/* CSS imports ------------------- */ /* Forced mobile nav on all sizes ------------------- */ @import url('/lib/g/2.0/styles/responsive_topnav.css') screen and (max-width: 1023px); @import url('/lib/g/themes/aperture/2.0/styles/responsive_topnav.css') screen and (max-width: 1023px); /* Font imports ------------------- */ @import url(https://fonts.googleapis.com/css?family=Montserrat:300,600); /* Background colour --------------*/ #header.header_transparent .dropdown-mask { background-color: transparent !important; } #popup_box .close::after, #popup_box .pagination_controls > div.pagination_controls_previous:after, #popup_box .pagination_controls > div.pagination_controls_next:after { color: #6D6E71; } /* Feature popup colours ------------------- */ .button, .full-width.store_item.store_item_dynamic_status.clearwithin>.store_item_controls>.buy_now_store_item_add_container>button.store_item_add_to_cart { background: #F48223; } h1, .heading_wrapper h1, #header .inner, #footer, .countdown_container, .feature_list ul li .content .subtitle, #sidebar .feature_panels .records_list ul li, .sidebar .feature_panels .records_list ul li, .related_items_panel h3, .formats_list, .formats_list .formats_item, .subheading::after, .subheading::before, .related_items_panel > h3:after, .related_items_panel h3.related_items_panel_heading:after, .related_items_panel h2.related_items_panel_heading:after .share_link:not(.subnav_share_link), #social_sharing_links.popup_vertical, .social_sharing_links.popup_vertical, .store_item_group .store_items_standard, .store_items_standard .store_item, .page_stats, hr, #scw_popup_inner h3, #shopping_cart_information td, #wishlist_information td, #shopping_cart_information th, #wishlist_information th, #sc_additional_fields, #sc_checkout_content #sc_subtotal, #sc_checkout_content #sc_discount, #sc_checkout_content #sc_vat_total, #sc_checkout_content #sc_shipping_total, #sc_checkout_content #sc_order_total, div.arprompt .arpromptbuttons, div.arprompt button, #protected_path_login .protected_path_form_status_inner, #privacy_policy_form_msg{ border-color: #EDEDEE; } .buy_enquire_quick_view .quick-view-information { border-color: #EDEDEE; } /* Fonts----------------------------- */ /* Main body font ------------------- */ body, input, select, textarea { font-family: 'Montserrat', Sans-Serif; } /* Heading and emphasis font ------------------- */ #logo a, #footer, #home_splash .content, .navigation ul li a, .link, .link a, .page_stats, .subheading span, .subheading, .subtitle, .poster, .date, .price, #hero_heading, #hero_header .title, #hero_header .subtitle, h1, h2, h3, h4, h5, h6, .fullscreen_slideshow .hero_splash_text, .records_list ul li .content .title, .records_list ul li .content .artist, #cover_page_slideshow_pager, #mc_embed_signup input.button, .countdown_clock, #artists-browser .artists-browser-label, .artists-browser .artists-browser-label { font-family: 'Montserrat', Sans-Serif; } /* Navigation font ------------------- */ #top_nav.navigation ul li a, #top_nav #full_nav .dropdown-btn { font-family: 'Montserrat', Sans-Serif; } /* User custom html-font sizing ------------------- */ html { font-size: 10.0px; } /* Title - Heading spacing and transform ------------------- */ h1, h2, h3, h4, h5, h6, #hero_header .title, .fullscreen_slideshow .hero_splash_text, #logo a, .navigation ul li a, #slide_nav_reveal, #header_quick_search .inputField, #header_quick_search input, #header_quick_search select, #header_quick_search textarea, #header_quick_search #header_quicksearch_btn, #footer #artlogic, #footer #copyright, #footer #copyright .copyright-text, #footer .small-links-container, .page-artists h1 #artist_years, .page-artists h1 .artist_years, .event-details-wrapper .event-details span, .subsection-press .records_list .content .link a, .section-press .records_list .content .link a, #store_cart_widget, .fullscreen_slideshow .hero_splash_text, .fullscreen_slideshow .hero_splash_text .title, .fullscreen_slideshow ul li .content h2, .fullscreen_slideshow ul li .content h2 a, .fullscreen_slideshow ul li .content h2 a:visited, .fullscreen_slideshow ul li .content h2 a .separator, .fullscreen_slideshow ul li .content h2 a .h1_subtitle, #image_gallery #content_module h3, .records_list .content h2, .records_list .content .subtitle, .records_list .content .date, .records_list .content .location , .records_list ul li .content .title, .records_list ul li .content .artist, .feature_panels .panel_image_text_adjacent .content h2, .feature_list ul li .content h2, .feature_list ul li .content .subtitle, .feature_list ul li .content .date, .feature_list ul li .content .location, .full_list ul li .content h2, .full_list ul li .content .subtitle, .full_list ul li .content .date, .records_list.detail_expand_grid .expander_detail #image_gallery #content_module .subtitle, .link, .button, .simple_list ul li, #social_links_list ul li, .page_stats .ps_item, .page_stats .ps_pages, #protected_path_login #container h1, #protected_path_login #container label, .subheading, .poster, .subtitle, .h1_subtitle, .location , .date, .price, #fancybox-title-main .artist strong, #mc_embed_signup input.button, #home_splash .content, #hero_header .subtitle, .feature_panels .panel_hero .hero_heading .subtitle, #hero_header .inner, .feature_panels .panel_hero .hero_heading > h2, .feature_panels .panel_hero .hero_heading > a > h2, #cover_page_slideshow_pager, #artists-browser, .artists-browser , .exhibition-header .h1_subtitle, #top_nav #full_nav .has_dropdown_items .dropdown-btn, #top_nav #full_nav .has_dropdown_items_mobile .dropdown-btn{ } /* Text colours----------------------------- */ /* Heading and emphasis text colour ------------------- */ /* Colour #6D6E71 */ h1, h1 a, h1 a:visited, h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited, h4, h4 a, h4 a:visited, h5, h5 a, h5 a:visited, h6, h6 a, h6 a:visited, .feature_panels .records_list.image_list ul li h2, .page-artists #artist_list ul li h2, .page-artists .artist_list ul li h2, .records_list .content h2, .records_list ul li h2 a, .feature_list ul li .content h2, .related_items_panel h3, .navigation ul li a:hover, .navigation ul li.active a:hover, .navigation ul li.active a, .navigation ul li.active a:visited, .records_list ul li .content .artist, .records_list ul li .content .title_and_year, .records_list ul li .content .title, #cover_page_slideshow_pager, #image_gallery #content_module h3 { color: #6D6E71; } blockquote { border-left: 1px solid #6D6E71; } #logo a, #logo a:visited { color: #6D6E71; } /* Subheading and secondary emphasis text colour ------------------- */ .slideshow.splide p, input, select, textarea, .navigation ul li a, .navigation ul li a:visited, .records_list .content .description, .records_list ul li .content .description, .heading_wrapper h1 .h1_subtitle, .h1_subtitle, .subheading, .subtitle, .records_list .content .subtitle, .feature_list ul li .content .subtitle, .records_list .content .date, .records_list .content .location, .section-publications .records_list .content .description, .image_list ul li .content .title, .flow_list ul li .content .title, .page_stats .ps_pages, .page_stats .ps_item, .price, .date, .location, .poster, .subtitle, .records_list ul li a:not(.website_contact_form):not(.buy_enquire_detail_link), .records_list ul li a:not(.website_contact_form):not(.buy_enquire_detail_link):visited, #image_gallery #content_module .detail_view_module, .image_list ul li .content, .flow_list ul li .content, .tile_list ul li .content, .tile_list ul li .content .title, #shopping_cart_information td.sc_cell_item .details, #sc_total_price_container .order_total_wrapper, #footer, #footer a:not(.submit_button), #footer a:visited:not(.submit_button), .page-artworks #image_gallery .subtitle, .page-artworks .image_list ul li .content, .records_list ul li .signed_and_dated, .records_list ul li .dimensions, .records_list ul li .medium, .records_list ul li .read_more_label, .records_list ul li .series, #artists-browser, .artists-browser , .buy_now_enquire>.enquire_button_container.clearwithin > .button > a{ color: #231F20; } .page_stats .disabled, .ps_item.disabled { color: #231F20; opacity: 0.5; } /* Body/main text colour ------------------- */ body, a, a:visited, a:hover, #social_sharing_links.popup_vertical ul li.social_links_item a, #social_sharing_links.popup_vertical ul li.social_links_item a:visited, .social_sharing_links.popup_vertical ul li.social_links_item a, .social_sharing_links.popup_vertical ul li.social_links_item a:visited, .page-artists .subsection-works #image_gallery .subtitle, .page_stats .ps_item a, .page_stats .ps_item a:visited, .page-artworks #image_gallery .subtitle, .fancybox-skin, div.arprompt, .records_list .content, div.arprompt .arpromptmessage, .fancybox-type-image .fancybox-close::after, .fancybox-type-image .fancybox-prev span:after, .fancybox-type-image .fancybox-next span:after, .store_items_condensed .store_item_add_to_cart span, .store_items_condensed .store_item_add_to_cart.button span, .store_items_standard .store_item_remove_container .store_item_remove_from_cart:after, .subsection-store-products-record .store_item_remove_container .store_item_remove_from_cart:after, #sc_checkout_container #sc_checkout_payment_form .form_row .inputField, #sc_checkout_container #sc_checkout_payment_form .form_row input, .filters_panel .fp-module input[type=checkbox]+label, .filters_panel .fp-module .slider_label { color: #231F20; } #privacy_policy_form_msg { color: #231F20; opacity: 0.5; } /* Link text color ------------------- */ #wishlistEnquiryForm .button, .link, .link:hover, .link span, .link span:hover, .link a, .link a:hover, .link a:visited, #mc_embed_signup input.button, .simple_list ul li a, a.external { color: #231F20; } /* Header layout ------------------- */ /* Dynamically created grid layout css ------------------- */ /* artfairs - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artfairs:not(.feature_list) > ul > li { width:33.33% }} .records_list.feature_list.grid_dynamic_layout_artfairs:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_artfairs:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_artfairs ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_artfairs ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_artfairs ul li .image::after { padding-top:100.0%; } /* instagram - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_instagram:not(.feature_list) > ul > li { width:25.0% }} .records_list.feature_list.grid_dynamic_layout_instagram:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_instagram:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_instagram ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_instagram ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_instagram ul li .image::after { padding-top:100.0%; } /* artworks - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artworks:not(.feature_list) > ul > li { width:25.0% }} .records_list.feature_list.grid_dynamic_layout_artworks:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_artworks:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_artworks ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_artworks ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_artworks ul li .image::after { padding-top:100.0%; } /* default image grid - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_default_image_grid:not(.feature_list) > ul > li { width:25.0% }} .records_list.feature_list.grid_dynamic_layout_default_image_grid:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_default_image_grid:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_default_image_grid ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_default_image_grid ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_default_image_grid ul li .image::after { padding-top:100.0%; } /* video - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_video:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_video ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_video ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_video ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_video ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_video ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_video ul li .image::after { padding-top:66.6666666667%; } /* default grid - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_default_grid:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_default_grid ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_default_grid ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_default_grid ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_default_grid ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_default_grid ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_default_grid ul li .image::after { padding-top:100.0%; } /* artists - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artists:not(.feature_list) > ul > li { width:50.0% }} .records_list.grid_dynamic_layout_artists ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artists ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artists ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artists ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artists ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_artists ul li .image::after { padding-top:100.0%; } /* video featured - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_video_featured ul { width:100%;}} .records_list.grid_dynamic_layout_video_featured ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_video_featured ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_video_featured ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_video_featured ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_video_featured ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_video_featured ul li .image::after { padding-top:100.0%; } /* artist works categories - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artist_works_categories:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_artist_works_categories ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artist_works_categories ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artist_works_categories ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artist_works_categories ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artist_works_categories ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_artist_works_categories ul li .image::after { padding-top:100.0%; } /* exhibitions - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_exhibitions:not(.feature_list) > ul > li { width:33.33% }} .records_list.feature_list.grid_dynamic_layout_exhibitions:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_exhibitions:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_exhibitions ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_exhibitions ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_exhibitions ul li .image::after { padding-top:100.0%; } /* events works - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_events:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_events ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_events ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_events ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_events ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_events ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_events ul li .image::after { padding-top:100.0%; } /* exhibitions installation - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_exhibitions_installation:not(.feature_list) > ul > li { width:25.0% }} .records_list.feature_list.grid_dynamic_layout_exhibitions_installation:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_exhibitions_installation:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_exhibitions_installation ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_exhibitions_installation ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_exhibitions_installation ul li .image::after { padding-top:66.6666666667%; } /* artist installation - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artist_installation:not(.feature_list) > ul > li { width:25.0% }} .records_list.feature_list.grid_dynamic_layout_artist_installation:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_artist_installation:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_artist_installation ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_artist_installation ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_artist_installation ul li .image::after { padding-top:100.0%; } /* blog - detail_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_blog:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_blog ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_blog ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_blog ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_blog ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_blog ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_blog ul li .image::after { padding-top:66.6666666667%; } /* store featured - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_store_featured ul { width:100%;}} .records_list.grid_dynamic_layout_store_featured ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_store_featured ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_store_featured ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_store_featured ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_store_featured ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_store_featured ul li .image::after { padding-top:100.0%; } /* events featured - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_events_featured ul { width:100%;}} .records_list.grid_dynamic_layout_events_featured ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_events_featured ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_events_featured ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_events_featured ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_events_featured ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_events_featured ul li .image::after { padding-top:100.0%; } /* artwork categories landing - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artwork_categories_landing:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_artwork_categories_landing ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artwork_categories_landing ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artwork_categories_landing ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artwork_categories_landing ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artwork_categories_landing ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_artwork_categories_landing ul li .image::after { padding-top:100.0%; } /* events - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_events:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_events ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_events ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_events ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_events ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_events ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_events ul li .image::after { padding-top:66.6666666667%; } /* store - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_store:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_store ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_store ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_store ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_store ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_store ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_store ul li .image::after { padding-top:100.0%; } /* default feature grid - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_default_feature_grid ul { width:100%;}} .records_list.grid_dynamic_layout_default_feature_grid ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_default_feature_grid ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_default_feature_grid ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_default_feature_grid ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_default_feature_grid ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_default_feature_grid ul li .image::after { padding-top:100.0%; } /* feature panels - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_feature_panels:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_feature_panels ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_feature_panels ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_feature_panels ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_feature_panels ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_feature_panels ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_feature_panels ul li .image::after { padding-top:100.0%; } /* exhibitions works - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_exhibitions_works:not(.feature_list) > ul > li { width:25.0% }} .records_list.feature_list.grid_dynamic_layout_exhibitions_works:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_exhibitions_works:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_exhibitions_works ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_exhibitions_works ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_exhibitions_works ul li .image::after { padding-top:100.0%; } /* publications featured - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_publications_featured ul { width:100%;}} .records_list.grid_dynamic_layout_publications_featured ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_publications_featured ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_publications_featured ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_publications_featured ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_publications_featured ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_publications_featured ul li .image::after { padding-top:100.0%; } /* press featured - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_press_featured ul { width:100%;}} .records_list.grid_dynamic_layout_press_featured ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_press_featured ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_press_featured ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_press_featured ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_press_featured ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_press_featured ul li .image::after { padding-top:100.0%; } /* news featured - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_news_featured ul { width:100%;}} .records_list.grid_dynamic_layout_news_featured ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_news_featured ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_news_featured ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_news_featured ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_news_featured ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_news_featured ul li .image::after { padding-top:100.0%; } /* artfairs featured - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_artfairs_featured ul { width:100%;}} .records_list.grid_dynamic_layout_artfairs_featured ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artfairs_featured ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artfairs_featured ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artfairs_featured ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artfairs_featured ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_artfairs_featured ul li .image::after { padding-top:100.0%; } /* exhibitions featured - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_exhibitions_featured ul { width:100%;}} .records_list.grid_dynamic_layout_exhibitions_featured ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_exhibitions_featured ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_exhibitions_featured ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_exhibitions_featured ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_exhibitions_featured ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_exhibitions_featured ul li .image::after { padding-top:66.6666666667%; } /* press - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_press:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_press ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_press ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_press ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_press ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_press ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_press ul li .image::after { padding-top:150.0%; } /* news - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_news:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_news ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_news ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_news ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_news ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_news ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_news ul li .image::after { padding-top:100.0%; } /* viewing rooms featured forthcoming - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_viewing_rooms_featured_forthcoming ul { width:100%;}} .records_list.grid_dynamic_layout_viewing_rooms_featured_forthcoming ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_viewing_rooms_featured_forthcoming ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_viewing_rooms_featured_forthcoming ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_viewing_rooms_featured_forthcoming ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_viewing_rooms_featured_forthcoming ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_viewing_rooms_featured_forthcoming ul li .image::after { padding-top:100.0%; } /* search - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_search:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_search ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_search ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_search ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_search ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_search ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_search ul li .image::after { padding-top:100.0%; } /* viewing rooms featured - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_viewing_rooms_featured ul { width:100%;}} .records_list.grid_dynamic_layout_viewing_rooms_featured ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_viewing_rooms_featured ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_viewing_rooms_featured ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_viewing_rooms_featured ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_viewing_rooms_featured ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_viewing_rooms_featured ul li .image::after { padding-top:100.0%; } /* viewing rooms works - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_viewing_rooms_works:not(.feature_list) > ul > li { width:25.0% }} .records_list.feature_list.grid_dynamic_layout_viewing_rooms_works:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_viewing_rooms_works:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_viewing_rooms_works ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_viewing_rooms_works ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_viewing_rooms_works ul li .image::after { padding-top:100.0%; } /* artist works - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artist_works:not(.feature_list) > ul > li { width:25.0% }} .records_list.feature_list.grid_dynamic_layout_artist_works:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_artist_works:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_artist_works ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_artist_works ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_artist_works ul li .image::after { padding-top:100.0%; } /* exhibitors - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_exhibitors:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_exhibitors ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_exhibitors ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_exhibitors ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_exhibitors ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_exhibitors ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_exhibitors ul li .image::after { padding-top:100.0%; } /* feature panels image grid - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_feature_panels_image_grid:not(.feature_list) > ul > li { width:25.0% }} .records_list.feature_list.grid_dynamic_layout_feature_panels_image_grid:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_feature_panels_image_grid:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_feature_panels_image_grid ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_feature_panels_image_grid ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_feature_panels_image_grid ul li .image::after { padding-top:100.0%; } /* publications - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_publications:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_publications ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_publications ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_publications ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_publications ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_publications ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_publications ul li .image::after { padding-top:100.0%; } /* team - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_team:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_team ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_team ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_team ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_team ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_team ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_team ul li .image::after { padding-top:100.0%; } /* viewing rooms - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_viewing_rooms:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_viewing_rooms ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_viewing_rooms ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_viewing_rooms ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_viewing_rooms ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_viewing_rooms ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_viewing_rooms ul li .image::after { padding-top:100.0%; } /* Dynamically created artist list css ------------------- */ .subsection-artist-list-preview-letters .artists_list_dynamic_columns ul { width:50.0% } .subsection-artist-list-standard .artists_list_dynamic_columns ul { width:25.0% } .subsection-artist-list-preview .artists_list_dynamic_columns ul { width:50.0% } /* Light and dark logo variants css ------------------- */ /* Logo text color ------------------- */ #logo { background: none; width: 100%; min-width: 200px; max-width: 200px; } #header #logo.user-custom-logo-image::before { padding-top:29.5742232451%; } .device-highres #logo { background: none; } #logo a { background-image: url('https://static-assets.artlogic.net/w_1000,c_limit,f_auto,fl_lossy,q_auto/ws-artlogicwebsite3103/usr/images/preferences/art-alive-gallery-logo-png-2-1-.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; } .browser-msie-6 #logo a, .browser-msie-7 #logo a, .browser-msie-8 #logo a, .browser-msie-9 #logo a, .browser-msie-10 #logo a { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static-assets.artlogic.net/w_1000,c_limit,f_auto,fl_lossy,q_auto/ws-artlogicwebsite3103/usr/images/preferences/art-alive-gallery-logo-png-2-1-.png', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static-assets.artlogic.net/w_1000,c_limit,f_auto,fl_lossy,q_auto/ws-artlogicwebsite3103/usr/images/preferences/art-alive-gallery-logo-png-2-1-.png', sizingMethod='scale')"; } #logo a { text-indent: -9999px; padding: 0; } /* Topnav text color ------------------- */ #header #store_cart_widget::before, #header #store_cart_widget.active:not(.empty)::before, #header #store_cart_widget::after, #header #store_cart_widget.active:not(.empty)::after, #top_nav.navigation ul li a, #top_nav.navigation ul li a:visited, #header_quick_search #header_quicksearch_btn, #responsive_slide_nav_wrapper #top_nav .header_quicksearch_field, #header_quick_search.active input, #header_quick_search.active select, #header_quick_search.active textarea, #header .social_media_icon, #translations_nav.navigation ul li a, #top_nav #full_nav .dropdown-btn, #top_nav #full_nav .has_dropdown_items .dropdown-btn, #top_nav #full_nav .has_dropdown_items_mobile .dropdown-btn { color: #808285; } #slide_nav_reveal::after { color: #808285; } #top_nav.navigation ul li.active a, #top_nav.navigation ul li.active a:visited, #header #store_cart_widget:hover::before, #header #store_cart_widget:hover::after, #top_nav.navigation ul li:hover a, #translations_nav.navigation ul li.active a, #translations_nav.navigation ul li:hover a, #top_nav #full_nav .dropdown-btn:hover { color: #231F20; } /* Subnav text color ------------------- */ /* Responsive nav text color ------------------- */ /* Responsive nav active / hover text color ------------------- */ /* Button text color ------------------- */ .button a, .button a:visited, .button a:hover, .button span, .button input, .buy_now_store_item_add_container>button.store_item_add_to_cart>span { color: #FFFFFF; } /* quick view button */ .buy_enquire_button button, a.buy_enquire_detail_link { color: #FFFFFF; } /* Hero section image opacity ------------------- */ .fullscreen-slide-dark .fullscreen_slideshow.hero_header_layout_center:not(.override-slide-brightness) ul li::before, .fullscreen_slideshow.hero_header_layout_center:not(.detect-slide-brightness):not(.override-slide-brightness) ul li::before, .fullscreen-slide-dark .fullscreen_slideshow.hero_header_layout_left-center:not(.override-slide-brightness) ul li::before, .fullscreen_slideshow.hero_header_layout_left-center:not(.detect-slide-brightness):not(.override-slide-brightness) ul li::before { background: rgba(0,0,0,0.1999999999999999555910790150) !important; } .fullscreen-slide-light .fullscreen_slideshow.hero_header_layout_center:not(.override-slide-brightness) ul li::before, .fullscreen-slide-light .fullscreen_slideshow.hero_header_layout_left-center:not(.override-slide-brightness) ul li::before { background: rgba(255,255,255,0.1999999999999999555910790150) !important; } /* don't show if opacity = 1 */ /* Hero section image height ------------------- */ ::root { --hero-height: 0vh } /* Home page slideshow / fullscreen video ui buttons ------------------- */ /* Hero header slideshow ui buttons ------------------- */ /* Carousel feature panel ui buttons ------------------- */ @media screen and (max-width:360px) { #logo a { background-image: url('https://static-assets.artlogic.net/w_500,c_limit,f_auto,fl_lossy,q_auto/ws-artlogicwebsite3103/usr/images/preferences/art-alive-gallery-logo-png-2-1-.png'); } } /* Artlogic preferences custom CSS - entered by Artlogic in the preferences screen ------------------- */ /* Client custom user CSS - entered by the client in the preferences screen ------------------- */ /* Montserrat Regular (400) + Medium (500) used in the design. Artlogic only loads 300 and 600, and @import does not work here. */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ===================================================================== ART ALIVE GALLERY - CUSTOM CSS Sizes follow the approved design (1920px artboard) and scale with the screen width (vw), with min/max limits so they stay readable. 1. Header 2. Footer ===================================================================== */ /* --------------------------------------------------------------------- 1. HEADER --------------------------------------------------------------------- */ /* Header height, used to keep sticky content clear of the fixed header */ :root { --aa-header-h: calc(clamp(14px, 2.4vw, 46px) + clamp(36.5px, 3.073vw, 59px) + clamp(12px, 1.8vw, 34px) + clamp(3px, 0.3125vw, 6px)); } /* Light grey rule under the header (all screen sizes) */ #header { border-bottom: clamp(3px, 0.3125vw, 6px) solid #EDEDEE; } /* Search icon (magnifier, grey stroke as in the design) */ #header_quicksearch_btn { display: inline-block; width: clamp(18px, 1.41vw, 27px); height: clamp(18px, 1.41vw, 27px); padding: 0 !important; vertical-align: middle; background: url("data:image/svg+xml,") center / contain no-repeat; } #header_quicksearch_btn i, #header_quicksearch_btn::before, #header_quicksearch_btn::after { display: none !important; } /* Desktop header layout */ @media (min-width: 1024px) { #header { padding-left: 5.9vw !important; padding-right: 5.9vw !important; } #header .inner { max-width: none !important; width: auto !important; padding-top: clamp(14px, 2.4vw, 46px); padding-bottom: clamp(12px, 1.8vw, 34px); align-items: center; } #logo { flex: 0 0 auto !important; min-width: 0 !important; min-height: 0 !important; } #logo, #logo a { width: clamp(130px, 10.94vw, 210px) !important; height: auto !important; aspect-ratio: 210 / 59; } #header .header-ui-wrapper { flex: 1 1 auto; align-items: center; } #responsive_slide_nav_wrapper { flex: 1 1 auto; justify-content: center; } #top_nav ul.topnav { display: flex; flex-wrap: nowrap; justify-content: center; gap: clamp(12px, 2.24vw, 43px); } #top_nav ul.topnav > li { margin: 0 !important; } #top_nav ul.topnav > li > a { padding: 0; font-size: clamp(11px, 1.042vw, 20px); font-weight: 400; line-height: 1.25; letter-spacing: 0; white-space: nowrap; color: #808285; } #top_nav ul.topnav > li > a:hover, #top_nav ul.topnav > li.active > a { color: #231F20; } #header .header-icons-wrapper { margin-left: auto; } } /* --------------------------------------------------------------------- 2. FOOTER One grey background (#6D6E71) across the whole footer, white text. Desktop: Contact | Artists | Follow bottom bar: copyright (left) + links (right) SEO text (last, small) --------------------------------------------------------------------- */ #footer { border-top: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; /* align footer content 6.12vw from the screen edge, like the header */ margin-left: calc(6.12vw - (100vw - 100%) / 2) !important; margin-right: calc(6.12vw - (100vw - 100%) / 2) !important; padding: clamp(44px, 4.6vw, 88px) 0 0 !important; color: #FFFFFF; /* one background colour, extended to both screen edges */ border-image: linear-gradient(#6D6E71, #6D6E71) fill 0 / 0 / 0 100vmax; } #footer .inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 0.8fr); grid-template-areas: "contact artists follow" "bottom bottom bottom" "seo seo seo"; column-gap: clamp(32px, 4.2vw, 80px); max-width: none; padding: 0; font-family: Montserrat, sans-serif; color: #FFFFFF; } #footer .inner > .clear { display: none; } #footer .advanced_footer_item { display: block; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; } #footer #contact_info { float: none !important; width: auto !important; max-width: none !important; } #footer .advanced_footer_item:not([class*="advanced_footer_item_"]) { grid-area: contact; } #footer .advanced_footer_item_2 { grid-area: artists; } #footer .advanced_footer_item_3 { grid-area: follow; } #footer .inner .copyright { grid-area: bottom; } #footer .advanced_footer_item_1 { grid-area: seo; } /* Text and links */ #footer .inner p { margin: 0; font-size: clamp(14px, 0.94vw, 18px); font-weight: 400; line-height: 1.8; letter-spacing: 0; color: #FFFFFF; text-align: left !important; } #footer .inner a { color: #FFFFFF; text-decoration: none; } #footer .inner a:hover { text-decoration: underline; text-underline-offset: 4px; } /* links stay white after they are clicked or visited */ #footer .inner a:link, #footer .inner a:visited, #footer .inner a:hover, #footer .inner a:active, #footer .inner a:focus { color: #FFFFFF !important; } #footer .inner a:focus { outline: none; } #footer .inner a:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.7); outline-offset: 3px; } /* Column labels: Contact Us / Artists / Follow Art Alive */ #footer #contact_info strong, #footer .advanced_footer_item_3 strong, #footer .advanced_footer_item_2::before { display: block; margin-bottom: clamp(12px, 1vw, 20px); font-size: clamp(12px, 0.73vw, 14px); font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: #FFFFFF; } #footer .advanced_footer_item_2::before { content: "Featured Artists"; } #footer #contact_info strong + br { display: none; } /* Contact details: address, then phone + email on their own lines */ #footer #contact_info p + p { margin-top: 1em; } /* Featured artists: two-column list of links */ #footer .advanced_footer_item_2 ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: clamp(24px, 2.5vw, 48px); } #footer .advanced_footer_item_2 li { margin: 0 0 clamp(6px, 0.5vw, 10px); padding: 0; list-style: none; break-inside: avoid; font-size: clamp(14px, 0.94vw, 18px); line-height: 1.6; color: #FFFFFF; } #footer .advanced_footer_item_2 li::before { content: none !important; } /* Social icons: white outline circles (links in footer column 3) */ #footer .advanced_footer_item_3 p + p { display: flex; flex-wrap: wrap; gap: 12px; line-height: 1; } #footer .advanced_footer_item_3 p + p a { display: block; width: 42px; height: 42px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%; font-size: 0; color: transparent; background: center / 18px 18px no-repeat; transition: background-color 0.2s ease, border-color 0.2s ease; } #footer .advanced_footer_item_3 p + p a:hover { border-color: #FFFFFF; background-color: rgba(255, 255, 255, 0.15); } #footer .advanced_footer_item_3 p + p a::before, #footer .advanced_footer_item_3 p + p a::after { display: none !important; } #footer .advanced_footer_item_3 a[href*="facebook"] { background-image: url("data:image/svg+xml,"); } #footer .advanced_footer_item_3 a[href*="instagram"] { background-image: url("data:image/svg+xml,"); } #footer .advanced_footer_item_3 a[href*="whatsapp"], #footer .advanced_footer_item_3 a[href*="wa.me"] { background-image: url("data:image/svg+xml,"); } #footer .advanced_footer_item_3 a[href*="youtube"] { background-image: url("data:image/svg+xml,"); } /* Bottom bar: copyright (left) + Art Blogs / Foundation / Manage cookies (right) */ #footer .inner .copyright { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px; float: none !important; width: auto !important; margin: clamp(40px, 4.2vw, 80px) 0 0 !important; padding: clamp(18px, 1.4vw, 26px) 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.3); font-size: clamp(12px, 0.78vw, 15px) !important; line-height: 1.6; color: #FFFFFF; } #footer .inner #copyright { order: 1; display: block !important; width: auto !important; margin: 0 !important; font-size: inherit !important; } #footer .inner #copyright .copyright-text { margin: 0 !important; font-size: inherit !important; font-weight: 400 !important; letter-spacing: 0.02em !important; text-transform: none !important; color: #FFFFFF; } #footer .inner .small-links-container { order: 2; display: flex !important; flex-wrap: wrap; gap: 8px 28px; margin: 0 !important; font-size: inherit !important; } #footer .inner .small-links-container > div { margin: 0 !important; font-size: inherit !important; } #footer .inner .small-links-container .cookie_notification_preferences { order: 3; } #footer .inner .small-links-container a { font-size: inherit !important; font-weight: 400 !important; letter-spacing: 0.02em !important; text-transform: none !important; color: #FFFFFF; } /* SEO paragraph (footer column 1): last, small */ #footer .advanced_footer_item_1 { padding: clamp(18px, 1.4vw, 26px) 0 clamp(32px, 2.6vw, 48px) !important; border-top: 1px solid rgba(255, 255, 255, 0.3); } #footer .advanced_footer_item_1 p { font-size: clamp(11px, 0.68vw, 13px); line-height: 1.8; color: rgba(255, 255, 255, 0.9); } /* Tablet: Contact + Follow side by side, Artists below */ @media (max-width: 1023px) { #footer .inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "contact follow" "artists artists" "bottom bottom" "seo seo"; row-gap: 36px; } #footer .inner .copyright { margin-top: 0 !important; } } /* Phone: single column */ @media (max-width: 767px) { #footer { padding-top: 40px !important; } #footer .inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "contact" "follow" "artists" "bottom" "seo"; row-gap: 32px; } #footer .inner .copyright { flex-direction: column; align-items: flex-start; } } /* --------------------------------------------------------------------- 3. HOMEPAGE Blocks (Pages > Home > Feature panels): #34 Exhibitions header (text panel: title + "View all" link) #15 Exhibitions grid (records grid, exhibitions chosen in the CMS) #35 Featured Artists header (text panel) #36 Featured Artists carousel (records grid, artists chosen in the CMS) --------------------------------------------------------------------- */ /* Page edges line up with the header and footer */ body.section-home #container { max-width: none !important; padding-left: 6.12vw !important; padding-right: 6.12vw !important; } body.section-home .feature_panels_inner > ul > li.panel { margin-bottom: 0 !important; } /* Section headers: title left, "View all" link right */ body.section-home .feature_panels_inner > ul > li.panel.panel_id_34, body.section-home .feature_panels_inner > ul > li.panel.panel_id_35 { margin-top: clamp(64px, 6.5vw, 124px) !important; margin-bottom: clamp(22px, 2vw, 36px) !important; } body.section-home li.panel_id_34 .content, body.section-home li.panel_id_35 .content { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; } body.section-home li.panel_id_34 h2.fp_title, body.section-home li.panel_id_35 h2.fp_title { margin: 0 !important; font-size: clamp(24px, 2vw, 38px) !important; font-weight: 300 !important; line-height: 1.15; letter-spacing: -0.005em !important; text-transform: none !important; color: #231F20; } body.section-home li.panel_id_34 .link, body.section-home li.panel_id_35 .link { margin: 0 !important; } body.section-home li.panel_id_34 .link a, body.section-home li.panel_id_35 .link a { display: inline-block; padding-bottom: 3px; border-bottom: 1px solid #231F20; font-size: clamp(13px, 0.83vw, 16px) !important; font-weight: 500 !important; letter-spacing: 0.02em !important; text-transform: none !important; text-decoration: none; color: #231F20; } body.section-home li.panel_id_34 .link a::after, body.section-home li.panel_id_35 .link a::after { content: "\2192"; margin-left: 0.5em; } body.section-home li.panel_id_34 .link a:hover, body.section-home li.panel_id_35 .link a:hover { border-bottom-color: transparent; } /* Shared card image: fixed shape, image fills it, gentle zoom on hover */ body.section-home :is(li.panel_id_15, li.panel_id_36) .records_list li span.image { position: relative; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: hidden; background: #F4F4F5; } body.section-home :is(li.panel_id_15, li.panel_id_36) .records_list li span.image > span { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; } body.section-home :is(li.panel_id_15, li.panel_id_36) .records_list li span.image img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; transition: transform 0.6s ease; } body.section-home :is(li.panel_id_15, li.panel_id_36) .records_list li a:hover span.image img { transform: scale(1.03); } body.section-home :is(li.panel_id_15, li.panel_id_36) .records_list li a { display: block; text-decoration: none; } body.section-home :is(li.panel_id_15, li.panel_id_36) .records_list li .content { width: auto !important; height: auto !important; padding: 0 !important; } /* Exhibitions grid: 3 equal cards */ body.section-home li.panel_id_15 .records_list ul { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 2.4vw, 44px); margin: 0 !important; } body.section-home li.panel_id_15 .records_list li { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; } /* each exhibition image whole at its own shape: the banners carry lettered titles, so nothing is cropped (the theme's square/3:2 box is removed) */ body.section-home li.panel_id_15 .records_list ul { align-items: start; } body.section-home li.panel_id_15 .records_list li span.image { aspect-ratio: auto; background: none; } body.section-home li.panel_id_15 .records_list li span.image::before, body.section-home li.panel_id_15 .records_list li span.image::after { display: none !important; padding: 0 !important; } body.section-home li.panel_id_15 .records_list li span.image > span { position: static !important; display: block !important; height: auto !important; } body.section-home li.panel_id_15 .records_list li span.image img { display: block; height: auto !important; } body.section-home li.panel_id_15 .records_list li h2.fp_title { margin: clamp(14px, 1.1vw, 20px) 0 8px !important; font-size: clamp(14px, 0.94vw, 18px) !important; font-weight: 500 !important; line-height: 1.4; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #231F20; } body.section-home li.panel_id_15 .records_list li .content > span:not(.section) { display: block; margin: 0 !important; font-size: clamp(12px, 0.73vw, 14px) !important; font-weight: 400 !important; line-height: 1.7; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: #6D6E71; } /* Featured Artists: swipeable carousel (photo + name) */ body.section-home li.panel_id_36 .records_list ul { --aa-gap: clamp(20px, 2vw, 36px); anchor-name: --aa-artists; display: flex !important; flex-wrap: nowrap; gap: var(--aa-gap); margin: 0 !important; padding: 0 0 clamp(18px, 1.4vw, 26px) !important; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #6D6E71 #EDEDEE; } body.section-home li.panel_id_36 .records_list li { display: block !important; flex: 0 0 calc((100% - 3 * var(--aa-gap)) / 4); width: auto !important; margin: 0 !important; padding: 0 !important; scroll-snap-align: start; } body.section-home li.panel_id_36 .records_list li span.image { aspect-ratio: 3 / 4; } body.section-home li.panel_id_36 .records_list li h2.fp_title { margin: clamp(12px, 1vw, 18px) 0 0 !important; font-size: clamp(15px, 1.04vw, 20px) !important; font-weight: 500 !important; line-height: 1.35; letter-spacing: 0.01em !important; text-transform: none !important; color: #231F20; } body.section-home li.panel_id_36 .records_list li .description { display: none !important; } /* Room below the carousel for the arrows / scrollbar before the next section */ body.section-home .feature_panels_inner > ul > li.panel.panel_id_36 { margin-bottom: clamp(72px, 6.5vw, 124px) !important; } /* Carousel arrows (browsers that support CSS scroll buttons; others swipe/scroll) */ @supports selector(::scroll-button(left)) { body.section-home li.panel_id_36 .records_list ul { padding-bottom: 0 !important; scrollbar-width: none; } } body.section-home li.panel_id_36 .records_list ul::scroll-button(*) { position: absolute; position-anchor: --aa-artists; top: calc(anchor(bottom) + 14px); width: 44px; height: 44px; border: 1px solid #231F20; border-radius: 50%; background: #FFFFFF; color: #231F20; font-size: 18px; cursor: pointer; } body.section-home li.panel_id_36 .records_list ul::scroll-button(*):disabled { opacity: 0.3; cursor: default; } body.section-home li.panel_id_36 .records_list ul::scroll-button(left) { content: "\2190"; right: calc(anchor(right) + 56px); } body.section-home li.panel_id_36 .records_list ul::scroll-button(right) { content: "\2192"; right: anchor(right); } /* The arrows sit 14px + 44px below the carousel: add them to the gap so the About block has the same space above it (from the arrows) as below it */ @supports selector(::scroll-button(left)) { body.section-home .feature_panels_inner > ul > li.panel.panel_id_36 { margin-bottom: calc(58px + clamp(72px, 7vw, 132px)) !important; } @media (max-width: 767px) { body.section-home .feature_panels_inner > ul > li.panel.panel_id_36 { margin-bottom: clamp(72px, 6.5vw, 124px) !important; } } } /* Tablet */ @media (max-width: 1023px) { body.section-home li.panel_id_15 .records_list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.section-home li.panel_id_36 .records_list li { flex-basis: calc((100% - 2 * var(--aa-gap)) / 2.6); } } /* Phone */ @media (max-width: 767px) { body.section-home li.panel_id_15 .records_list ul { grid-template-columns: minmax(0, 1fr); } body.section-home li.panel_id_36 .records_list li { flex-basis: 68%; } body.section-home li.panel_id_36 .records_list ul::scroll-button(*) { display: none; } } /* --------------------------------------------------------------------- 4. HOMEPAGE - ABOUT + NEWSLETTER Blocks (Pages > Home > Feature panels): #37 About (image/text adjacent: heading, image, text, "Learn more") #38 Newsletter band (text panel linking to the mailing list form) --------------------------------------------------------------------- */ /* the newsletter band is the last block, so it meets the footer */ body.section-home .feature_panels_inner > ul { margin-bottom: 0 !important; } /* About -------------------------------------------------------------- */ body.section-home .feature_panels_inner > ul > li.panel.panel_id_37 { margin-top: clamp(72px, 7vw, 132px) !important; margin-bottom: 0 !important; } body.section-home li.panel_id_37 .panel_header { margin: 0 0 clamp(26px, 2.4vw, 48px) !important; padding: 0 !important; } body.section-home li.panel_id_37 .panel_header h2 { max-width: 22em; margin: 0 !important; font-size: clamp(22px, 1.8vw, 34px) !important; font-weight: 300 !important; line-height: 1.2; letter-spacing: -0.005em !important; text-transform: none !important; color: #231F20; } /* image left, text right */ body.section-home li.panel_id_37 > a { display: block; text-decoration: none; } body.section-home li.panel_id_37:not(.no_image) > a { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: start; column-gap: clamp(28px, 4vw, 76px); } body.section-home li.panel_id_37 span.image { position: relative; float: none !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden; background: #F4F4F5; aspect-ratio: 3 / 2; } body.section-home li.panel_id_37 span.image > span, body.section-home li.panel_id_37 span.image .object-fit-container { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; } body.section-home li.panel_id_37 span.image img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; } body.section-home li.panel_id_37 .content { float: none !important; width: auto !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; } /* opening statement: large type with a thin line on its left */ body.section-home li.panel_id_37 h2.fp_title { margin: 0 0 clamp(18px, 1.6vw, 30px) !important; padding: 2px 0 2px clamp(18px, 1.6vw, 30px) !important; border-left: 1px solid #231F20; font-size: clamp(20px, 1.56vw, 30px) !important; font-weight: 400 !important; line-height: 1.45 !important; letter-spacing: 0 !important; text-transform: none !important; color: #231F20; } body.section-home li.panel_id_37 .description { margin: 0 !important; padding: 0 !important; } body.section-home li.panel_id_37 .description p { margin: 0 0 1.1em !important; font-size: clamp(14px, 0.94vw, 17px) !important; font-weight: 400 !important; line-height: 1.9; letter-spacing: 0 !important; text-align: left !important; color: #231F20; } body.section-home li.panel_id_37 .description p:last-child { margin-bottom: 0 !important; } body.section-home li.panel_id_37 .link { display: block; margin: clamp(20px, 1.8vw, 34px) 0 0 !important; } body.section-home li.panel_id_37 .link > * { display: inline-block; padding-bottom: 3px; border-bottom: 1px solid #231F20; font-size: clamp(13px, 0.83vw, 16px) !important; font-weight: 500 !important; letter-spacing: 0.02em !important; text-transform: none !important; text-decoration: none; color: #231F20; } body.section-home li.panel_id_37 .link > *::after { content: "\2192"; margin-left: 0.5em; } body.section-home li.panel_id_37 > a:hover .link > * { border-bottom-color: transparent; } /* Newsletter band ----------------------------------------------------- */ body.section-home .feature_panels_inner > ul > li.panel.panel_id_38 { margin-top: clamp(72px, 7vw, 132px) !important; margin-bottom: 0 !important; padding: clamp(40px, 4.4vw, 84px) 0 !important; /* one light band, extended to both screen edges */ border-image: linear-gradient(#F4F4F5, #F4F4F5) fill 0 / 0 / 0 100vmax; } body.section-home li.panel_id_38 .content { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title link" "desc link"; align-items: center; column-gap: clamp(24px, 3vw, 60px); width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body.section-home li.panel_id_38 h2.fp_title { grid-area: title; align-self: end; margin: 0 0 8px !important; font-size: clamp(20px, 1.7vw, 32px) !important; font-weight: 300 !important; line-height: 1.25; letter-spacing: -0.005em !important; text-transform: none !important; color: #231F20; } body.section-home li.panel_id_38 .description { grid-area: desc; align-self: start; } body.section-home li.panel_id_38 .description p { margin: 0 !important; font-size: clamp(13px, 0.9vw, 16px) !important; font-weight: 400 !important; line-height: 1.7; text-align: left !important; color: #6D6E71; } body.section-home li.panel_id_38 .link { grid-area: link; align-self: center; margin: 0 !important; } body.section-home li.panel_id_38 .link a { display: inline-block; padding: clamp(13px, 1vw, 18px) clamp(26px, 2.2vw, 42px); border: 1px solid #F48223; background: #F48223; font-size: clamp(12px, 0.78vw, 14px) !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; text-decoration: none; color: #FFFFFF !important; transition: background-color 0.2s ease, border-color 0.2s ease; } body.section-home li.panel_id_38 .link a:hover { border-color: #231F20; background: #231F20; } /* Tablet */ @media (max-width: 1023px) { body.section-home li.panel_id_37:not(.no_image) > a { grid-template-columns: minmax(0, 1fr); row-gap: clamp(24px, 3.4vw, 36px); } body.section-home li.panel_id_37 .panel_header h2 { max-width: none; } } /* Phone */ @media (max-width: 767px) { body.section-home li.panel_id_38 .content { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "desc" "link"; } body.section-home li.panel_id_38 .link { justify-self: start; margin-top: clamp(20px, 5vw, 28px) !important; } } /* --------------------------------------------------------------------- 5. ARTISTS LIST A-Z names in two columns, artwork preview on hover at the right (Settings > Artists > "List with hover image", 2 columns) --------------------------------------------------------------------- */ body.section-artists.no-page-params #container { max-width: none !important; padding-left: 6.12vw !important; padding-right: 6.12vw !important; } body.section-artists.no-page-params h1 { margin: 0 0 clamp(28px, 2.6vw, 52px) !important; font-size: clamp(24px, 2vw, 38px) !important; font-weight: 300 !important; line-height: 1.15; letter-spacing: -0.005em !important; text-transform: none !important; color: #231F20; } /* names on the left, hover image on the right */ body.section-artists.no-page-params .subsection-artist-list-preview { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 38vw, 620px); column-gap: clamp(32px, 4vw, 80px); align-items: start; } body.section-artists.no-page-params #content_module, body.section-artists.no-page-params #list_preview_navigation, body.section-artists.no-page-params .artist_list_section_wrapper, body.section-artists.no-page-params .artists-list-formatted-wrapper { width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; min-width: 0; float: none !important; } body.section-artists.no-page-params .artists-list-formatted-wrapper { display: flex; flex-wrap: nowrap; gap: clamp(24px, 3vw, 60px); } body.section-artists.no-page-params .artists-list-formatted-wrapper ul.dynamic-column { flex: 1 1 0; width: auto !important; margin: 0 !important; padding: 0 !important; list-style: none; } body.section-artists.no-page-params .artists-list-formatted-wrapper li { margin: 0 !important; padding: 0 !important; break-inside: avoid; } body.section-artists.no-page-params .artists-list-formatted-wrapper li a { display: block; padding: clamp(6px, 0.55vw, 10px) 0; text-decoration: none; } body.section-artists.no-page-params .artists-list-formatted-wrapper li h2 { margin: 0 !important; font-size: clamp(14px, 1.04vw, 19px) !important; font-weight: 400 !important; line-height: 1.5; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #231F20; transition: color 0.2s ease; } body.section-artists.no-page-params .artists-list-formatted-wrapper li a:hover h2 { color: #6D6E71; } /* the preview image follows the page as you scroll the names */ body.section-artists.no-page-params #sidebar { align-self: stretch; float: none !important; width: auto !important; height: auto !important; margin: 0 !important; } body.section-artists.no-page-params #list_preview_slideshow { position: sticky; top: calc(var(--aa-header-h) + clamp(16px, 1.5vw, 28px)); width: auto !important; min-height: 0 !important; } body.section-artists.no-page-params .subsection-artist-list-preview__image { width: auto !important; } body.section-artists.no-page-params .subsection-artist-list-preview__image img { width: 100% !important; height: auto !important; max-height: 78vh !important; object-fit: contain; object-position: center top; } /* Tablet: no hover on touch, so names use the full width */ @media (max-width: 1023px) { body.section-artists.no-page-params .subsection-artist-list-preview { grid-template-columns: minmax(0, 1fr); } body.section-artists.no-page-params #sidebar { display: none !important; } } /* Phone */ @media (max-width: 767px) { body.section-artists.no-page-params .artists-list-formatted-wrapper { display: block; } body.section-artists.no-page-params .artists-list-formatted-wrapper ul.dynamic-column { width: 100% !important; } body.section-artists.no-page-params .artists-list-formatted-wrapper li a { padding: 9px 0; } } /* --------------------------------------------------------------------- 6. ARTIST PAGE One page per artist (Settings > Artists > "Single page of combined sections"), in the order set under Settings > Artists > sub-navigation: name, biography + portrait, exhibitions, works. --------------------------------------------------------------------- */ body.section-artists:not(.no-page-params) #container { max-width: none !important; padding-left: 6.12vw !important; padding-right: 6.12vw !important; } /* name on the left, section links on the right */ body.section-artists .artist-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 40px; margin: 0 0 clamp(36px, 3.4vw, 64px) !important; padding: 0 !important; } body.section-artists .artist-header .h1_wrapper, body.section-artists .artist-header #sub_nav { float: none !important; width: auto !important; margin: 0 !important; } body.section-artists .artist-header .sub_nav_clear { display: none; } body.section-artists .artist-header h1 { margin: 0 !important; font-size: clamp(26px, 2.3vw, 44px) !important; font-weight: 300 !important; line-height: 1.1; letter-spacing: -0.01em !important; text-transform: none !important; color: #231F20; } body.section-artists #sub_nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 10px clamp(16px, 1.8vw, 34px); margin: 0 !important; padding: 0 !important; list-style: none; } body.section-artists #sub_nav li { margin: 0 !important; padding: 0 !important; } body.section-artists #sub_nav a { font-size: clamp(11px, 0.73vw, 14px) !important; font-weight: 500 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #808285; transition: color 0.2s ease; } body.section-artists #sub_nav li.active a, body.section-artists #sub_nav a:hover { color: #231F20; } /* sections: generous spacing and a small label (with its thin line) on each */ body.section-artists section.scroll_section { margin: 0 !important; padding: 0 0 clamp(56px, 5.2vw, 104px) !important; } body.section-artists .scroll_section_container .scroll_section_header { display: block !important; margin: 0 0 clamp(20px, 1.8vw, 34px) !important; } body.section-artists .scroll_section_header .subheading { margin: 0 !important; font-size: clamp(12px, 0.73vw, 14px) !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #6D6E71; } /* biography: text on the left, portrait on the right that stays in view while a long biography is read */ body.section-artists .subsection-biography { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); column-gap: clamp(32px, 4.6vw, 96px); align-items: start; } body.section-artists .subsection-biography:not(:has(.sidebar img)) { grid-template-columns: minmax(0, 1fr); } body.section-artists .subsection-biography > .content_module { order: 1; float: none !important; width: auto !important; max-width: 72ch; margin: 0 !important; } body.section-artists .subsection-biography > .sidebar { order: 2; align-self: stretch; float: none !important; width: auto !important; margin: 0 !important; } body.section-artists .subsection-biography .sidebar .image { position: sticky; top: calc(var(--aa-header-h) + clamp(16px, 1.5vw, 28px)); width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; } body.section-artists .subsection-biography .sidebar .image span, body.section-artists .subsection-biography .sidebar .image img { position: static !important; width: 100% !important; height: auto !important; } body.section-artists .subsection-biography .sidebar .divider { display: none; } body.section-artists .social_sharing_wrap a { font-size: clamp(11px, 0.68vw, 13px) !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #6D6E71 !important; } /* body copy: same type as the rest of the site */ body.section-artists .prose, body.section-artists .prose * { font-family: Montserrat, sans-serif !important; color: #231F20 !important; } body.section-artists .prose p, body.section-artists .prose li, body.section-artists .prose div, body.section-artists .prose span { font-size: clamp(14px, 0.94vw, 17px) !important; font-weight: 400 !important; line-height: 1.9 !important; letter-spacing: 0 !important; text-align: left !important; } body.section-artists .prose p { margin: 0 0 1.1em !important; } body.section-artists .prose p:last-child { margin-bottom: 0 !important; } body.section-artists .prose strong, body.section-artists .prose b { font-weight: 600 !important; } body.section-artists .prose a { text-decoration: underline; text-underline-offset: 3px; } /* exhibitions and art fairs: cards like the homepage */ body.section-artists .subsection-exhibitions .records_list ul, body.section-artists .subsection-art-fairs .records_list ul { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 2.4vw, 44px); margin: 0 !important; padding: 0 !important; } body.section-artists .subsection-exhibitions .records_list li, body.section-artists .subsection-art-fairs .records_list li { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; } body.section-artists .subsection-exhibitions .records_list li a, body.section-artists .subsection-art-fairs .records_list li a { display: block; text-decoration: none; } body.section-artists .subsection-exhibitions span.image { position: relative; display: block; float: none !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; aspect-ratio: 3 / 2; overflow: hidden; background: #F4F4F5; } body.section-artists .subsection-exhibitions span.image > span { position: absolute !important; inset: 0; } body.section-artists .subsection-exhibitions span.image img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; transition: transform 0.6s ease; } body.section-artists .subsection-exhibitions li a:hover span.image img { transform: scale(1.03); } /* art fairs show a painting: whole, at its own shape (never cropped) */ body.section-artists .subsection-art-fairs span.image { display: block; float: none !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden; } body.section-artists .subsection-art-fairs span.image::before, body.section-artists .subsection-art-fairs span.image::after { display: none !important; } body.section-artists .subsection-art-fairs span.image > span { position: static !important; display: block !important; height: auto !important; } body.section-artists .subsection-art-fairs span.image img { position: static !important; width: 100% !important; height: auto !important; max-width: none !important; max-height: none !important; transition: transform 0.6s ease; } body.section-artists .subsection-art-fairs li a:hover span.image img { transform: scale(1.03); } body.section-artists .subsection-exhibitions .records_list li .content, body.section-artists .subsection-art-fairs .records_list li .content { float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: clamp(14px, 1.1vw, 20px) 0 0 !important; text-align: left !important; } body.section-artists .subsection-exhibitions .content h2, body.section-artists .subsection-art-fairs .content h2 { margin: 0 0 8px !important; font-size: clamp(14px, 0.94vw, 18px) !important; font-weight: 500 !important; line-height: 1.4; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #231F20; } body.section-artists .subsection-exhibitions .content .subtitle, body.section-artists .subsection-exhibitions .content .date, body.section-artists .subsection-art-fairs .content .subtitle, body.section-artists .subsection-art-fairs .content .date { display: block; margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: clamp(12px, 0.73vw, 14px) !important; font-weight: 400 !important; line-height: 1.7; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: #6D6E71; } body.section-artists .subsection-exhibitions .content .description, body.section-artists .subsection-exhibitions .content .link, body.section-artists .subsection-art-fairs .content .description, body.section-artists .subsection-art-fairs .content .link { display: none !important; } /* works: an even grid; every artwork sits whole (never cropped) inside the same thin frame, caption lines under each other */ body.section-artists .subsection-works .records_list ul { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(36px, 3.2vw, 60px) clamp(24px, 2.4vw, 46px); margin: 0 !important; padding: 0 !important; } body.section-artists .subsection-works .records_list li.item { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; } body.section-artists .subsection-works .records_list li.item a { display: block; text-decoration: none; } body.section-artists .subsection-works li.item span.image { position: relative; display: block !important; float: none !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid #E4E4E6; background: #FFFFFF; } body.section-artists .subsection-works li.item span.image > span { position: absolute !important; inset: clamp(14px, 1.4vw, 26px) !important; display: block; width: auto !important; height: auto !important; } body.section-artists .subsection-works li.item span.image img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: contain; transition: transform 0.5s ease; } body.section-artists .subsection-works li.item a:hover span.image img { transform: scale(1.03); } body.section-artists .subsection-works .content { float: none !important; width: auto !important; margin: 0 !important; padding: clamp(12px, 1vw, 18px) 0 0 !important; } body.section-artists .subsection-works .content .comma, body.section-artists .subsection-works .content .artist_comma, body.section-artists .subsection-works .content .title_comma { display: none !important; } body.section-artists .subsection-works .content span { display: block; margin: 0 !important; padding: 0 !important; font-size: clamp(12px, 0.8vw, 15px) !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.6 !important; letter-spacing: 0.01em !important; text-transform: none !important; color: #6D6E71 !important; } body.section-artists .subsection-works .content span.artist { font-weight: 600 !important; color: #231F20 !important; } /* Smaller desktops */ @media (max-width: 1199px) { body.section-artists .subsection-works .records_list ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Tablet: portrait above the text, two across */ @media (max-width: 1023px) { body.section-artists .subsection-biography { grid-template-columns: minmax(0, 1fr); row-gap: clamp(22px, 3vw, 34px); } body.section-artists .subsection-biography > .sidebar { order: 1; max-width: 520px; } body.section-artists .subsection-biography > .content_module { order: 2; } body.section-artists .subsection-biography .sidebar .image { position: static; } body.section-artists .subsection-exhibitions .records_list ul, body.section-artists .subsection-art-fairs .records_list ul, body.section-artists .subsection-works .records_list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Phone */ @media (max-width: 767px) { body.section-artists .artist-header { align-items: flex-start; } body.section-artists .subsection-exhibitions .records_list ul, body.section-artists .subsection-art-fairs .records_list ul { grid-template-columns: minmax(0, 1fr); } body.section-artists .subsection-works .records_list ul { gap: 28px 16px; } body.section-artists .subsection-works li.item span.image > span { inset: 10px !important; } } /* --------------------------------------------------------------------- 7. CONTACT PAGE Address, phone and email on the left, the message form on the right, Google map full width underneath (Settings > Contact: map enabled). The form is Artlogic's own (Settings > Contact & Enquiries). --------------------------------------------------------------------- */ body.section-contact #container { max-width: none !important; padding-left: 6.12vw !important; padding-right: 6.12vw !important; } body.section-contact h1 { margin: 0 0 clamp(30px, 3vw, 56px) !important; font-size: clamp(24px, 2vw, 38px) !important; font-weight: 300 !important; line-height: 1.15; letter-spacing: -0.005em !important; text-transform: none !important; color: #231F20; } /* grid: details | form, then the map across both columns */ body.section-contact #content.contact_page_content { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-rows: auto auto 1fr auto; column-gap: clamp(40px, 6vw, 120px); align-items: start; } body.section-contact #content.contact_page_content > #content_module { display: contents; } body.section-contact #content_module > .page_content { grid-column: 1; grid-row: 1; } body.section-contact #content_module > #social_links_list { grid-column: 1; grid-row: 2; margin: clamp(8px, 1vw, 18px) 0 0 !important; padding: 0 !important; } body.section-contact #content_module > #contact_form_inline { grid-column: 2; grid-row: 1 / span 3; margin: 0 !important; padding: clamp(28px, 2.6vw, 48px) !important; background: #F4F4F5; } body.section-contact #content.contact_page_content > #sidebar { grid-column: 1 / -1; grid-row: 4; float: none !important; width: auto !important; margin: clamp(56px, 5.2vw, 104px) 0 0 !important; padding: 0 !important; } body.section-contact #content.contact_page_content > .feature_panels { grid-column: 1 / -1; } body.section-contact #content.contact_page_content .divider { display: none !important; } /* map */ body.section-contact #map_basic { width: 100% !important; height: clamp(320px, 30vw, 560px) !important; padding: 0 !important; aspect-ratio: auto !important; background: #F4F4F5; } /* details: small grey label, value underneath */ body.section-contact .page_content.prose h3 { margin: 0 0 8px !important; font-size: clamp(11px, 0.68vw, 13px) !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #6D6E71 !important; } body.section-contact .page_content.prose p { margin: 0 0 clamp(24px, 2.2vw, 40px) !important; font-size: clamp(15px, 1.04vw, 19px) !important; font-weight: 400 !important; line-height: 1.75 !important; text-align: left !important; color: #231F20 !important; } body.section-contact .page_content.prose strong { font-weight: 600 !important; } body.section-contact .page_content.prose a { color: #231F20 !important; text-decoration: none; background-image: linear-gradient(#231F20, #231F20); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.25s ease; } body.section-contact .page_content.prose a:hover { background-size: 100% 1px; } /* mailing list + map links under the details */ body.section-contact #social_links_list ul { margin: 0 !important; padding: 0 !important; list-style: none; } body.section-contact #social_links_list li { margin: 0 0 10px !important; padding: 0 !important; } body.section-contact #social_links_list a { font-size: clamp(11px, 0.68vw, 13px) !important; font-weight: 600 !important; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; color: #6D6E71 !important; } body.section-contact #social_links_list a:hover { color: #231F20 !important; } body.section-contact #social_links_list .social_media_icon { display: none !important; } /* message form */ body.section-contact #contact_form_header { margin: 0 0 clamp(20px, 1.8vw, 32px) !important; font-size: clamp(18px, 1.35vw, 26px) !important; font-weight: 300 !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; color: #231F20 !important; } body.section-contact #contactForm .form_row { display: block; max-width: none; margin: 0 0 clamp(14px, 1.2vw, 22px) !important; } body.section-contact #contactForm label { display: block !important; float: none !important; width: auto !important; margin: 0 0 6px !important; padding: 0 !important; font-size: clamp(11px, 0.68vw, 13px) !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #6D6E71 !important; } body.section-contact #contactForm input.inputField, body.section-contact #contactForm textarea { width: 100% !important; max-width: none !important; margin: 0 !important; padding: clamp(10px, 0.8vw, 14px) clamp(12px, 0.9vw, 16px) !important; border: 1px solid #DCDCDE !important; border-radius: 0 !important; background: #FFFFFF !important; font-family: Montserrat, sans-serif !important; font-size: clamp(14px, 0.9vw, 16px) !important; color: #231F20 !important; } body.section-contact #contactForm textarea { min-height: clamp(120px, 10vw, 170px) !important; resize: vertical; } body.section-contact #contactForm input.inputField:focus, body.section-contact #contactForm textarea:focus { border-color: #6D6E71 !important; outline: none !important; } body.section-contact #contactFormSubmit { display: inline-block !important; margin: clamp(6px, 0.6vw, 10px) 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; } body.section-contact #contactFormSubmit a { display: inline-block; padding: clamp(13px, 1vw, 18px) clamp(30px, 2.6vw, 50px); border: 1px solid #F48223; background: #F48223; font-size: clamp(12px, 0.78vw, 14px) !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; text-decoration: none; color: #FFFFFF !important; transition: background-color 0.2s ease, border-color 0.2s ease; } body.section-contact #contactFormSubmit a:hover { border-color: #231F20; background: #231F20; } /* Tablet and phone: details, links, form, map - one under the other */ @media (max-width: 1023px) { body.section-contact #content.contact_page_content { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } body.section-contact #content_module > .page_content, body.section-contact #content_module > #social_links_list, body.section-contact #content_module > #contact_form_inline, body.section-contact #content.contact_page_content > #sidebar { grid-column: 1; grid-row: auto; } body.section-contact #content_module > .page_content { order: 1; } body.section-contact #content_module > #social_links_list { order: 2; } body.section-contact #content_module > #contact_form_inline { order: 3; margin-top: clamp(32px, 5vw, 48px) !important; } body.section-contact #content.contact_page_content > #sidebar { order: 4; margin-top: clamp(40px, 6vw, 64px) !important; } body.section-contact #content.contact_page_content > .feature_panels { order: 5; } } @media (max-width: 767px) { body.section-contact #content_module > #contact_form_inline { padding: 22px 18px !important; } body.section-contact #map_basic { height: 320px !important; } } /* --------------------------------------------------------------------- 8. ABOUT US PAGE Heading with subtitle, text left, gallery photo right. --------------------------------------------------------------------- */ body.section-about-us #container { max-width: none !important; padding-left: 6.12vw !important; padding-right: 6.12vw !important; } body.section-about-us .heading_wrapper { margin: 0 0 clamp(26px, 2.4vw, 46px) !important; } body.section-about-us h1 { margin: 0 !important; font-size: clamp(24px, 2vw, 38px) !important; font-weight: 300 !important; line-height: 1.15; letter-spacing: -0.005em !important; text-transform: none !important; color: #231F20; } body.section-about-us h1 .h1_subtitle { display: block; max-width: none; margin: clamp(10px, 0.9vw, 16px) 0 0; font-size: clamp(13px, 0.94vw, 18px) !important; font-weight: 400 !important; line-height: 1.6; letter-spacing: 0 !important; text-transform: none !important; color: #6D6E71 !important; } body.section-about-us h1 .separator { display: none !important; } body.section-about-us #content { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 34vw, 560px); column-gap: clamp(32px, 4vw, 80px); align-items: start; } body.section-about-us #content > #content_module { grid-column: 1; grid-row: 1; float: none !important; width: auto !important; margin: 0 !important; } body.section-about-us #content > #sidebar { grid-column: 2; grid-row: 1; float: none !important; width: auto !important; margin: 0 !important; } body.section-about-us #content > .divider, body.section-about-us #content > .feature_panels { grid-column: 1 / -1; } body.section-about-us #sidebar .image { width: auto !important; height: auto !important; overflow: hidden; } body.section-about-us #sidebar .image img { width: 100% !important; height: auto !important; } body.section-about-us #content_module p, body.section-about-us #content_module li { margin: 0 0 1.2em !important; font-size: clamp(14px, 0.94vw, 17px) !important; font-weight: 400 !important; line-height: 1.9 !important; letter-spacing: 0 !important; text-align: left !important; color: #231F20 !important; } body.section-about-us #content_module p:last-child { margin-bottom: 0 !important; } body.section-about-us #content_module strong, body.section-about-us #content_module b { font-weight: 600 !important; } body.section-about-us #content_module a { color: #231F20 !important; text-decoration: underline; text-underline-offset: 3px; } /* "About the Gallery" text panel: two columns on desktop, one below 1024px */ body.section-about-us .panel_id_40 .description { column-count: 2; column-gap: clamp(40px, 4.6vw, 96px); } body.section-about-us .panel_id_40 .description p { margin: 0 0 1.2em !important; orphans: 3; widows: 3; } body.section-about-us .panel_id_40 .description p:last-child { margin-bottom: 0 !important; } @media (max-width: 1023px) { body.section-about-us .panel_id_40 .description { column-count: 1; } } /* Tablet and phone: photo first, then text */ @media (max-width: 1023px) { body.section-about-us #content { grid-template-columns: minmax(0, 1fr); row-gap: clamp(24px, 3.4vw, 40px); } body.section-about-us #content > #sidebar { grid-column: 1; grid-row: 1; } body.section-about-us #content > #content_module { grid-column: 1; grid-row: 2; } } /* 25 years logo: on the right of the "About Us" heading on tablet and desktop, under the subtitle on phones. The logo is the only thing in the page text (Pages > About Us), so #content is flattened into a grid with the heading to put both on one row. */ body.page-about-us #main_content:has(img[src*="celebrating-25-years"]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 4vw, 80px); align-items: center; } body.page-about-us #main_content:has(img[src*="celebrating-25-years"])::after, body.page-about-us #main_content:has(img[src*="celebrating-25-years"]) > #content::after { content: none !important; } body.page-about-us #main_content:has(img[src*="celebrating-25-years"]) > #content { display: contents; } body.page-about-us #main_content:has(img[src*="celebrating-25-years"]) > .heading_wrapper { grid-column: 1; grid-row: 1; margin: 0 !important; } body.page-about-us #main_content:has(img[src*="celebrating-25-years"]) .h1_subtitle { margin-bottom: 0 !important; text-wrap: balance; } body.page-about-us #main_content:has(img[src*="celebrating-25-years"]) > #content > #content_module { grid-column: 2; grid-row: 1; } body.page-about-us #main_content:has(img[src*="celebrating-25-years"]) > #content > .divider, body.page-about-us #main_content:has(img[src*="celebrating-25-years"]) > #content > .feature_panels { grid-column: 1 / -1; } body.page-about-us #main_content:has(img[src*="celebrating-25-years"]) > #content > .divider { margin-top: clamp(32px, 3.2vw, 60px) !important; } body.page-about-us #content_module img[src*="celebrating-25-years"] { display: block; width: clamp(160px, 16.7vw, 320px) !important; height: auto !important; mix-blend-mode: multiply; /* hides the JPG's white box on any background */ } @media (max-width: 767px) { body.page-about-us #main_content:has(img[src*="celebrating-25-years"]) { grid-template-columns: minmax(0, 1fr); } body.page-about-us #main_content:has(img[src*="celebrating-25-years"]) > #content > #content_module { grid-column: 1; grid-row: 2; margin-top: 24px !important; } body.page-about-us #content_module img[src*="celebrating-25-years"] { width: 190px !important; } } /* "Meet the Director" (#41): smaller, uncropped portrait (the photo is only 355 x 425 px), text takes the rest of the row */ body.section-about-us li.panel_id_41 { justify-content: space-between; align-items: flex-start; } body.section-about-us li.panel_id_41 > .image { flex: 0 0 auto !important; width: clamp(220px, 24vw, 355px) !important; height: auto !important; margin: 0 !important; } body.section-about-us li.panel_id_41 > .image > span { height: auto !important; aspect-ratio: 355 / 425; } body.section-about-us li.panel_id_41 > .content { flex: 1 1 0 !important; width: auto !important; max-width: none !important; padding-right: clamp(40px, 5vw, 96px) !important; } @media (max-width: 767px) { body.section-about-us li.panel_id_41 > .image { width: min(100%, 300px) !important; margin: 0 0 28px !important; } body.section-about-us li.panel_id_41 > .content { flex: 1 1 100% !important; padding-right: 0 !important; } } /* --------------------------------------------------------------------- 9. THE ART ALIVE FOUNDATION PAGE (Pages > The Art Alive Foundation) Built from three text panels: #43 About (opening statement + two columns), #44 What the Foundation does (numbered 2 x 2 grid), #45 Contact (grey band above the footer). --------------------------------------------------------------------- */ body.section-art-alive-foundation #container { max-width: none !important; padding-left: 6.12vw !important; padding-right: 6.12vw !important; } body.section-art-alive-foundation .heading_wrapper { margin: 0 0 clamp(36px, 3.4vw, 64px) !important; } body.section-art-alive-foundation h1 { margin: 0 !important; font-size: clamp(24px, 2vw, 38px) !important; font-weight: 300 !important; line-height: 1.15; letter-spacing: -0.005em !important; text-transform: none !important; color: #231F20; } body.section-art-alive-foundation h1 .separator { display: none !important; } body.section-art-alive-foundation h1 .h1_subtitle { display: block; margin: clamp(10px, 0.9vw, 16px) 0 0; font-size: clamp(13px, 0.94vw, 18px) !important; font-weight: 400 !important; line-height: 1.6; letter-spacing: 0 !important; text-transform: none !important; color: #6D6E71 !important; } /* panels: spacing, section labels and body text */ body.section-art-alive-foundation .feature_panels ul { margin: 0 !important; padding: 0 !important; } body.section-art-alive-foundation #main_content { margin-bottom: 0 !important; } body.section-art-alive-foundation li.panel { margin: 0 0 clamp(64px, 6vw, 116px) !important; padding: 0 !important; } body.section-art-alive-foundation li.panel .content { float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body.section-art-alive-foundation li.panel h2.fp_title { margin: 0 0 clamp(20px, 1.8vw, 34px) !important; font-size: clamp(12px, 0.73vw, 14px) !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #6D6E71 !important; } body.section-art-alive-foundation li.panel .description { margin: 0 !important; padding: 0 !important; } body.section-art-alive-foundation li.panel .description p { margin: 0 0 1.1em !important; font-size: clamp(14px, 0.94vw, 17px) !important; font-weight: 400 !important; line-height: 1.9 !important; letter-spacing: 0 !important; text-align: left !important; color: #231F20 !important; } body.section-art-alive-foundation li.panel .description p:last-child { margin-bottom: 0 !important; } /* #43 About: opening statement on the left, the text on the right */ body.section-art-alive-foundation li.panel_id_43 .description { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 4.6vw, 96px); align-items: start; } body.section-art-alive-foundation li.panel_id_43 .description p:first-child { grid-column: 1; grid-row: 1 / span 20; margin: 0 !important; padding: 2px 0 2px clamp(18px, 1.6vw, 30px); border-left: 1px solid #231F20; font-size: clamp(20px, 1.56vw, 30px) !important; line-height: 1.45 !important; } body.section-art-alive-foundation li.panel_id_43 .description p:not(:first-child) { grid-column: 2; } /* #44 What the Foundation does: numbered 2 x 2 grid */ body.section-art-alive-foundation li.panel_id_44 .description { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row dense; column-gap: clamp(40px, 4.6vw, 96px); counter-reset: taaf; } /* 01 02 on the first row, 03 04 on the second */ body.section-art-alive-foundation li.panel_id_44 .description h3:nth-of-type(odd), body.section-art-alive-foundation li.panel_id_44 .description p:nth-of-type(odd) { grid-column: 1; } body.section-art-alive-foundation li.panel_id_44 .description h3:nth-of-type(even), body.section-art-alive-foundation li.panel_id_44 .description p:nth-of-type(even) { grid-column: 2; } body.section-art-alive-foundation li.panel_id_44 .description h3 { margin: 0 !important; padding: clamp(22px, 1.8vw, 32px) 0 clamp(10px, 0.8vw, 14px) !important; border-top: 1px solid #DCDCDE; font-size: clamp(18px, 1.25vw, 24px) !important; font-weight: 400 !important; line-height: 1.35 !important; letter-spacing: 0 !important; text-transform: none !important; color: #231F20 !important; } body.section-art-alive-foundation li.panel_id_44 .description h3::before { counter-increment: taaf; content: counter(taaf, decimal-leading-zero); display: block; margin-bottom: clamp(8px, 0.7vw, 12px); font-size: clamp(11px, 0.68vw, 13px); font-weight: 600; letter-spacing: 0.14em; color: #6D6E71; } body.section-art-alive-foundation li.panel_id_44 .description p, body.section-art-alive-foundation li.panel_id_44 .description p:last-child { margin: 0 0 clamp(36px, 3.2vw, 60px) !important; } /* #45 Contact: light grey band running into the footer */ body.section-art-alive-foundation li.panel_id_45 { margin-bottom: 0 !important; padding: clamp(48px, 4.6vw, 88px) 0 !important; border-image: linear-gradient(#F4F4F5, #F4F4F5) fill 0 / 0 / 0 100vmax; } body.section-art-alive-foundation li.panel_id_45 .description { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column; column-gap: clamp(32px, 4vw, 80px); } body.section-art-alive-foundation li.panel_id_45 .description h3 { margin: 0 0 8px !important; font-size: clamp(11px, 0.68vw, 13px) !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #6D6E71 !important; } body.section-art-alive-foundation li.panel_id_45 .description p { margin: 0 !important; font-size: clamp(15px, 1.04vw, 19px) !important; line-height: 1.75 !important; } body.section-art-alive-foundation li.panel .description a { color: #231F20 !important; text-decoration: underline; text-underline-offset: 3px; } /* Tablet and phone: one column */ @media (max-width: 1023px) { body.section-art-alive-foundation li.panel_id_43 .description, body.section-art-alive-foundation li.panel_id_44 .description, body.section-art-alive-foundation li.panel_id_45 .description { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; } body.section-art-alive-foundation li.panel_id_43 .description p:first-child { grid-row: auto; margin: 0 0 clamp(28px, 4vw, 40px) !important; } body.section-art-alive-foundation li.panel_id_43 .description p, body.section-art-alive-foundation li.panel_id_44 .description h3, body.section-art-alive-foundation li.panel_id_44 .description p { grid-column: 1 !important; } body.section-art-alive-foundation li.panel_id_45 .description p { margin: 0 0 clamp(22px, 3vw, 30px) !important; } body.section-art-alive-foundation li.panel_id_45 .description p:last-child { margin-bottom: 0 !important; } } /* --------------------------------------------------------------------- 10. BLOG List: Settings > Other records > Blog = "Detail grid", 3 columns. Cards: image, title, three-line summary and "Read more". Images are portrait photos (3:4) and are shown whole at that shape. Posts without an image yet show a light grey panel of the same shape. Post: title + date, article column on the left, recent posts on the right (moves under the article below 1024px), comment form last. --------------------------------------------------------------------- */ body.section-blog #container { max-width: none !important; padding-left: 6.12vw !important; padding-right: 6.12vw !important; } body.section-blog .blog-header { margin: 0 0 clamp(36px, 3.4vw, 64px) !important; padding: 0 !important; } body.section-blog .blog-header h1 { max-width: 24em; margin: 0 !important; font-size: clamp(24px, 2vw, 38px) !important; font-weight: 300 !important; line-height: 1.15 !important; letter-spacing: -0.005em !important; text-transform: none !important; color: #231F20 !important; } /* list: three cards across */ body.section-blog .subsection-blog-grid .records_list > ul { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(48px, 4.4vw, 84px) clamp(24px, 2.4vw, 46px); margin: 0 !important; padding: 0 !important; } body.section-blog .subsection-blog-grid .records_list > ul > li { display: flex !important; flex-direction: column; float: none !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } body.section-blog .subsection-blog-grid .records_list > ul > li > a { display: block; text-decoration: none; } body.section-blog .subsection-blog-grid .records_list .image { position: relative; display: block !important; float: none !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; aspect-ratio: 3 / 4; overflow: hidden; background: #F4F4F5; } body.section-blog .subsection-blog-grid .records_list .image > span { position: absolute !important; inset: 0; display: block; width: auto !important; height: auto !important; } body.section-blog .subsection-blog-grid .records_list .image img { position: static !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover; transition: transform 0.6s ease; } body.section-blog .subsection-blog-grid .records_list li a:hover .image img { transform: scale(1.03); } /* no image uploaded yet: same-size grey panel */ body.section-blog .subsection-blog-grid .records_list > ul > li:not(:has(.image))::before { content: "Art Alive Gallery"; display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; background: #F4F4F5; font-size: clamp(11px, 0.68vw, 13px); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #B1B2B5; } body.section-blog .subsection-blog-grid .records_list .content { display: flex; flex: 1 1 auto; flex-direction: column; float: none !important; width: auto !important; margin: 0 !important; padding: clamp(18px, 1.5vw, 26px) 0 0 !important; } body.section-blog .subsection-blog-grid .records_list .title_container { margin: 0 !important; padding: 0 !important; } body.section-blog .subsection-blog-grid .records_list h2 { margin: 0 0 clamp(10px, 0.8vw, 14px) !important; font-size: clamp(17px, 1.2vw, 23px) !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0 !important; text-transform: none !important; } body.section-blog .subsection-blog-grid .records_list h2 a { color: #231F20 !important; text-decoration: none; background-image: linear-gradient(#231F20, #231F20); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.3s ease; } body.section-blog .subsection-blog-grid .records_list h2 a:hover { background-size: 100% 1px; } body.section-blog .subsection-blog-grid .records_list .blog_toolbar { display: none !important; } body.section-blog .subsection-blog-grid .records_list .description { display: block !important; margin: 0 0 clamp(16px, 1.3vw, 22px) !important; padding: 0 !important; } body.section-blog .subsection-blog-grid .records_list .description p { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0 !important; font-size: clamp(14px, 0.9vw, 16px) !important; font-weight: 400 !important; line-height: 1.75 !important; letter-spacing: 0 !important; text-align: left !important; color: #6D6E71 !important; } body.section-blog .subsection-blog-grid .records_list .description p ~ * { display: none !important; } body.section-blog .subsection-blog-grid .records_list .content > .link { display: block !important; margin: auto 0 0 !important; padding: 0 !important; } body.section-blog .subsection-blog-grid .records_list .content > .link a { font-size: clamp(11px, 0.68vw, 13px) !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; text-decoration: underline; text-underline-offset: 5px; color: #231F20 !important; } body.section-blog .subsection-blog-grid .records_list .content > .link a:hover { color: #6D6E71 !important; } /* post: date under the title */ body.section-blog .subsection-blog-record .blog-header .date { margin: clamp(14px, 1.2vw, 22px) 0 0 !important; font-size: clamp(11px, 0.68vw, 13px) !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #6D6E71 !important; } /* post: article | recent posts */ body.section-blog .subsection-blog-record #content { display: grid; grid-template-columns: minmax(0, 780px) minmax(220px, 320px); justify-content: space-between; column-gap: clamp(40px, 6vw, 120px); align-items: start; } body.section-blog .subsection-blog-record #content > .skiplink-container { position: absolute; } body.section-blog .subsection-blog-record .content_module { float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body.section-blog .subsection-blog-record .content_module > .image { display: block; width: auto !important; height: auto !important; margin: 0 0 clamp(32px, 3vw, 56px) !important; } body.section-blog .subsection-blog-record .content_module > .image img { display: block; width: 100% !important; height: auto !important; max-width: none !important; } /* post: reading text */ body.section-blog .subsection-blog-record .content_module p, body.section-blog .subsection-blog-record .content_module li { font-size: clamp(15px, 1vw, 18px) !important; font-weight: 400 !important; line-height: 1.9 !important; letter-spacing: 0 !important; text-align: left !important; color: #231F20 !important; } body.section-blog .subsection-blog-record .content_module p { margin: 0 0 1.2em !important; } body.section-blog .subsection-blog-record .content_module ul, body.section-blog .subsection-blog-record .content_module ol { margin: 0 0 1.4em !important; padding: 0 0 0 1.3em !important; } body.section-blog .subsection-blog-record .content_module ul { list-style: disc outside !important; } body.section-blog .subsection-blog-record .content_module ol { list-style: decimal outside !important; } body.section-blog .subsection-blog-record .content_module li { margin: 0 0 0.6em !important; padding: 0 0 0 0.3em !important; } body.section-blog .subsection-blog-record .content_module li::before { content: none !important; } body.section-blog .subsection-blog-record .content_module li::marker { color: #6D6E71; } body.section-blog .subsection-blog-record .content_module > h2, body.section-blog .subsection-blog-record .content_module > h3, body.section-blog .subsection-blog-record .content_module > h4 { margin: clamp(36px, 3vw, 56px) 0 clamp(12px, 1vw, 18px) !important; font-size: clamp(19px, 1.4vw, 27px) !important; font-weight: 400 !important; line-height: 1.35 !important; letter-spacing: 0 !important; text-transform: none !important; color: #231F20 !important; } body.section-blog .subsection-blog-record .content_module > h4 { font-size: clamp(16px, 1.1vw, 21px) !important; font-weight: 500 !important; } body.section-blog .subsection-blog-record .content_module strong, body.section-blog .subsection-blog-record .content_module b { font-weight: 600 !important; } body.section-blog .subsection-blog-record .content_module p a, body.section-blog .subsection-blog-record .content_module li a { color: #231F20 !important; text-decoration: underline; text-decoration-color: #B1B2B5; text-underline-offset: 4px; transition: text-decoration-color 0.2s ease; } body.section-blog .subsection-blog-record .content_module p a:hover, body.section-blog .subsection-blog-record .content_module li a:hover { text-decoration-color: #231F20; } body.section-blog .subsection-blog-record .content_module blockquote { margin: clamp(28px, 2.4vw, 44px) 0 !important; padding: 2px 0 2px clamp(18px, 1.6vw, 30px) !important; border-left: 1px solid #231F20; } body.section-blog .subsection-blog-record .content_module blockquote p { font-size: clamp(18px, 1.35vw, 26px) !important; line-height: 1.5 !important; } body.section-blog .subsection-blog-record .content_module img { max-width: 100%; height: auto; } /* post: share link, then the comment form */ body.section-blog .subsection-blog-record .social_sharing_wrap { margin: clamp(32px, 3vw, 52px) 0 0 !important; padding: clamp(20px, 1.6vw, 28px) 0 0 !important; border-top: 1px solid #EDEDEE; } body.section-blog .subsection-blog-record .social_sharing_wrap a { font-size: clamp(11px, 0.68vw, 13px) !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #6D6E71 !important; } body.section-blog .subsection-blog-record .content_module > .divider { display: none !important; } body.section-blog .module-comments { margin: clamp(40px, 3.6vw, 64px) 0 0 !important; padding: clamp(28px, 2.6vw, 48px) !important; background: #F4F4F5; } body.section-blog .module-comments .box, body.section-blog .module-comments .area, body.section-blog .module-comments .top { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; } body.section-blog .module-comments h2 { margin: 0 0 clamp(18px, 1.6vw, 28px) !important; font-size: clamp(18px, 1.35vw, 26px) !important; font-weight: 300 !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; color: #231F20 !important; } body.section-blog .module-comments .form_row { display: block; max-width: none; margin: 0 0 clamp(14px, 1.2vw, 22px) !important; } body.section-blog .module-comments label { display: block !important; float: none !important; width: auto !important; margin: 0 0 6px !important; padding: 0 !important; font-size: clamp(11px, 0.68vw, 13px) !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #6D6E71 !important; } body.section-blog .module-comments input.inputField, body.section-blog .module-comments input.captcha_field, body.section-blog .module-comments textarea { width: 100% !important; max-width: none !important; margin: 0 !important; padding: clamp(10px, 0.8vw, 14px) clamp(12px, 0.9vw, 16px) !important; border: 1px solid #DCDCDE !important; border-radius: 0 !important; background: #FFFFFF !important; font-family: Montserrat, sans-serif !important; font-size: clamp(14px, 0.9vw, 16px) !important; color: #231F20 !important; } body.section-blog .module-comments textarea { min-height: clamp(110px, 9vw, 150px) !important; resize: vertical; } body.section-blog .module-comments input.inputField:focus, body.section-blog .module-comments input.captcha_field:focus, body.section-blog .module-comments textarea:focus { border-color: #6D6E71 !important; outline: none !important; } body.section-blog .module-comments .submitFormRow { padding: 0 !important; } body.section-blog .module-comments .captchaFormRow img { display: block; margin: 0 0 12px; } body.section-blog .module-comments .mainButton { display: inline-block !important; margin: clamp(4px, 0.4vw, 8px) 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; } body.section-blog .module-comments .mainButton a { display: inline-block; padding: clamp(13px, 1vw, 18px) clamp(26px, 2.2vw, 42px); border: 1px solid #F48223; background: #F48223; font-size: clamp(11px, 0.73vw, 14px) !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; text-decoration: none; color: #FFFFFF !important; transition: background-color 0.2s ease, border-color 0.2s ease; } body.section-blog .module-comments .mainButton a:hover { border-color: #231F20; background: #231F20; } /* post: recent posts beside the article, stays in view */ body.section-blog .subsection-blog-record #sidebar { position: sticky; top: calc(var(--aa-header-h) + clamp(16px, 1.5vw, 28px)); float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; } body.section-blog #sidebar .feature_panels, body.section-blog #sidebar .records_list, body.section-blog #sidebar .records_list > ul, body.section-blog #sidebar li.panel, body.section-blog #sidebar li.panel .content { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } body.section-blog #sidebar h2 { margin: 0 0 clamp(8px, 0.7vw, 12px) !important; font-size: clamp(11px, 0.68vw, 13px) !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #6D6E71 !important; } body.section-blog #sidebar .simple_item_list { margin: 0 !important; padding: 0 !important; list-style: none !important; } body.section-blog #sidebar .simple_item_list li { float: none !important; width: auto !important; margin: 0 !important; padding: clamp(14px, 1.2vw, 20px) 0 !important; border-bottom: 1px solid #EDEDEE !important; } body.section-blog #sidebar .simple_item_list li::before { content: none !important; } body.section-blog #sidebar .simple_item_list .description { display: block; margin: 0 !important; } body.section-blog #sidebar .simple_item_list .name, body.section-blog #sidebar .simple_item_list .posted { display: block; } body.section-blog #sidebar .simple_item_list .name a { font-size: clamp(14px, 0.94vw, 17px) !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none; color: #231F20 !important; } body.section-blog #sidebar .simple_item_list .name a:hover { text-decoration: underline; text-underline-offset: 4px; } body.section-blog #sidebar .simple_item_list .divider { display: none !important; } body.section-blog #sidebar .simple_item_list .posted { margin: 6px 0 0; font-size: clamp(11px, 0.68vw, 13px) !important; font-weight: 500 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #6D6E71 !important; } /* Tablet: two cards across; recent posts under the article */ @media (max-width: 1023px) { body.section-blog .subsection-blog-grid .records_list > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.section-blog .subsection-blog-record #content { grid-template-columns: minmax(0, 1fr); } body.section-blog .subsection-blog-record #sidebar { position: static; margin: clamp(48px, 7vw, 72px) 0 0 !important; } } /* Phone: one card across */ @media (max-width: 767px) { body.section-blog .subsection-blog-grid .records_list > ul { grid-template-columns: minmax(0, 1fr); gap: 44px; } body.section-blog .module-comments { padding: 22px 18px !important; } } /* --------------------------------------------------------------------- 11. EVENT GALLERY List: Settings > Events = 3 columns, cropped. Cards: photo/banner in a 5:3 frame (client banners are ~1.7:1 with lettered titles), title, venue, dates. Event page: title, venue, dates, short text, then every photo uploaded to the record's "Image slideshow" shown as a grid (the theme's one-by- one slideshow is flattened; click opens the large image). Events with only a main image show it under the text at the text width. --------------------------------------------------------------------- */ body.section-events #container { max-width: none !important; padding-left: 6.12vw !important; padding-right: 6.12vw !important; } body.section-events .heading_wrapper { margin: 0 0 clamp(36px, 3.4vw, 64px) !important; padding: 0 !important; } body.section-events .heading_wrapper h1 { max-width: 24em; margin: 0 !important; font-size: clamp(24px, 2vw, 38px) !important; font-weight: 300 !important; line-height: 1.15 !important; letter-spacing: -0.005em !important; text-transform: none !important; color: #231F20 !important; } /* list: three cards across */ body.section-events .subsection-events-grid .records_list > ul { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(48px, 4.4vw, 84px) clamp(24px, 2.4vw, 46px); height: auto !important; margin: 0 !important; padding: 0 !important; } body.section-events .subsection-events-grid .records_list > ul > li { position: static !important; display: block !important; float: none !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; transform: none !important; } body.section-events .subsection-events-grid .records_list > ul > li > a { display: block; text-decoration: none; } body.section-events .subsection-events-grid .records_list .image { position: relative; display: block !important; float: none !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; aspect-ratio: 5 / 3; overflow: hidden; background: #F4F4F5; } body.section-events .subsection-events-grid .records_list .image > span { position: absolute !important; inset: 0; display: block; width: auto !important; height: auto !important; } body.section-events .subsection-events-grid .records_list .image img { position: static !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover; transition: transform 0.6s ease; } body.section-events .subsection-events-grid .records_list li a:hover .image img { transform: scale(1.03); } body.section-events .subsection-events-grid .records_list .content { float: none !important; width: auto !important; margin: 0 !important; padding: clamp(18px, 1.5vw, 26px) 0 0 !important; } body.section-events .subsection-events-grid .records_list h2 { margin: 0 0 clamp(8px, 0.6vw, 12px) !important; font-size: clamp(17px, 1.2vw, 23px) !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0 !important; text-transform: none !important; color: #231F20 !important; } body.section-events .subsection-events-grid .records_list .subtitle, body.section-events .subsection-events-grid .records_list .date { display: block !important; margin: 0 0 4px !important; font-size: clamp(12px, 0.76vw, 14px) !important; font-weight: 400 !important; line-height: 1.6 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #6D6E71 !important; } body.section-events .subsection-events-grid .records_list .description, body.section-events .subsection-events-grid .records_list .link { display: none !important; } /* event page: header */ body.section-events .event-header h1 .h1_heading { display: block; } body.section-events .event-header h1 .separator { display: none !important; } body.section-events .event-header h1 .h1_subtitle { display: block; float: none !important; margin: clamp(10px, 0.8vw, 14px) 0 0; text-transform: none !important; font-size: clamp(15px, 1vw, 19px) !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: 0 !important; color: #6D6E71 !important; } body.section-events .event-header .subtitle { float: none !important; clear: both; margin: 8px 0 0 !important; padding: 0 !important; } body.section-events .event-header .subtitle_date { font-size: clamp(12px, 0.76vw, 14px) !important; font-weight: 400 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #6D6E71 !important; } /* event page: text first, photos underneath */ body.section-events .subsection-event-detail-page .subsection-overview { display: flex !important; flex-direction: column; } body.section-events .subsection-event-detail-page .subsection-overview > .content_module { order: 1; float: none !important; width: auto !important; max-width: 780px; margin: 0 !important; padding: 0 !important; } body.section-events .subsection-event-detail-page .event-details-wrapper { display: none !important; } body.section-events .subsection-event-detail-page .content_module .prose p { font-size: clamp(15px, 1vw, 18px) !important; line-height: 1.9 !important; color: #414042 !important; } body.section-events .subsection-event-detail-page .subsection-overview > .sidebar { order: 2; float: none !important; width: 100% !important; margin: clamp(36px, 3.4vw, 64px) 0 0 !important; padding: 0 !important; } /* photos: grid instead of slideshow */ body.section-events .subsection-event-detail-page #ig_slideshow_container { float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } body.section-events .subsection-event-detail-page #ig_slideshow { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 20px); height: auto !important; } body.section-events .subsection-event-detail-page #ig_slideshow > .item { position: relative !important; top: auto !important; left: auto !important; z-index: auto !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; opacity: 1 !important; visibility: visible !important; } body.section-events .subsection-event-detail-page #ig_slideshow > .cycle-sentinel { display: none !important; } body.section-events .subsection-event-detail-page #ig_slideshow .image { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 3 / 2; overflow: hidden; background: #F4F4F5; } body.section-events .subsection-event-detail-page #ig_slideshow .image > span, body.section-events .subsection-event-detail-page #ig_slideshow .image a { display: block !important; width: 100% !important; height: 100% !important; } body.section-events .subsection-event-detail-page #ig_slideshow .image img { position: static !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover; transition: transform 0.6s ease; } body.section-events .subsection-event-detail-page #ig_slideshow .image a:hover img { transform: scale(1.03); } body.section-events .subsection-event-detail-page #ig_slideshow_thumbnails_container, body.section-events .subsection-event-detail-page #ig_slideshow_caption, body.section-events .subsection-event-detail-page .ig_slideshow_container .cycle-prev, body.section-events .subsection-event-detail-page .ig_slideshow_container .cycle-next, body.section-events .subsection-event-detail-page .ig_slideshow_container .cycle-pager { display: none !important; } /* only a main image: under the text, at the text width */ body.section-events .subsection-event-detail-page .sidebar > .image { float: none !important; width: 100% !important; max-width: 780px; height: auto !important; margin: 0 !important; } body.section-events .subsection-event-detail-page .sidebar > .image::before, body.section-events .subsection-event-detail-page .sidebar > .image::after { display: none !important; padding: 0 !important; } body.section-events .subsection-event-detail-page .sidebar > .image .object-fit-container { position: static !important; display: block !important; width: 100% !important; height: auto !important; } body.section-events .subsection-event-detail-page .sidebar > .image img { width: 100% !important; height: auto !important; max-height: none !important; } /* related artist link under the photos */ body.section-events #related_artists .records_list h2 { font-size: clamp(15px, 1vw, 18px) !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: #231F20 !important; } @media (max-width: 1023px) { body.section-events .subsection-events-grid .records_list > ul, body.section-events .subsection-event-detail-page #ig_slideshow { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { body.section-events .subsection-events-grid .records_list > ul, body.section-events .subsection-event-detail-page #ig_slideshow { grid-template-columns: minmax(0, 1fr); } } /* --------------------------------------------------------------------- 12. IN THE NEWS (press) One card style wherever press appears (In The News page, Press section on artist pages, Press tab on exhibitions): clipping in a 4:5 frame cropped from the top so the masthead and headline show, then title, then writer, publication, date. No clipping yet: grey panel. Article page: title and writer line across the top, then the summary and the link to the full article (marked with an arrow). Artist pages also get an Events section (feature list): title in the site's normal case. --------------------------------------------------------------------- */ body.section-press #container { max-width: none !important; padding-left: 6.12vw !important; padding-right: 6.12vw !important; } body.section-press .heading_wrapper { float: none !important; width: auto !important; max-width: 1000px; margin: 0 0 clamp(36px, 3.4vw, 64px) !important; padding: 0 !important; } body.section-press .heading_wrapper h1, body.section-press .page-top h1 { max-width: 24em; margin: 0 !important; font-size: clamp(24px, 2vw, 38px) !important; font-weight: 300 !important; line-height: 1.15 !important; letter-spacing: -0.005em !important; text-transform: none !important; color: #231F20 !important; } body.section-press #main_content > h1 { float: none !important; margin: 0 0 clamp(36px, 3.4vw, 64px) !important; } /* cards: three across */ body .records_list.grid_dynamic_layout_press > ul { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(48px, 4.4vw, 84px) clamp(24px, 2.4vw, 46px); height: auto !important; margin: 0 !important; padding: 0 !important; } body .records_list.grid_dynamic_layout_press > ul > li { position: static !important; display: block !important; float: none !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; transform: none !important; } body .records_list.grid_dynamic_layout_press > ul > li > a { display: block; text-decoration: none; } body .records_list.grid_dynamic_layout_press .image { position: relative; display: block !important; float: none !important; box-sizing: border-box; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid #E4E4E6; background: #F4F4F5; } body .records_list.grid_dynamic_layout_press .image > span { position: absolute !important; inset: 0; display: block; width: auto !important; height: auto !important; } body .records_list.grid_dynamic_layout_press .image img { position: static !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover; object-position: 50% 0; transition: transform 0.6s ease; } body .records_list.grid_dynamic_layout_press li a:hover .image img { transform: scale(1.03); transform-origin: 50% 0; } /* no clipping uploaded yet: same-size grey panel */ body .records_list.grid_dynamic_layout_press > ul > li > a:not(:has(.image))::before { content: "Art Alive Gallery"; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; background: #F4F4F5; font-size: clamp(11px, 0.68vw, 13px); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #B1B2B5; } body .records_list.grid_dynamic_layout_press .content { display: block !important; float: none !important; width: auto !important; margin: 0 !important; padding: clamp(18px, 1.5vw, 26px) 0 0 !important; } body .records_list.grid_dynamic_layout_press h2 { margin: 0 0 clamp(8px, 0.6vw, 12px) !important; font-size: clamp(17px, 1.2vw, 23px) !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0 !important; text-transform: none !important; color: #231F20 !important; } body .records_list.grid_dynamic_layout_press .date { display: block !important; margin: 0 !important; font-size: clamp(12px, 0.76vw, 14px) !important; font-weight: 400 !important; line-height: 1.6 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #6D6E71 !important; } /* article page */ body.section-press .subsection-press-record .press-header .subtitle { float: none !important; margin: clamp(12px, 1vw, 18px) 0 0 !important; padding: 0 !important; font-size: clamp(12px, 0.76vw, 14px) !important; font-weight: 400 !important; line-height: 1.6 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #6D6E71 !important; } body.section-press .subsection-press-record #content { display: flex !important; flex-direction: column; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; } body.section-press .subsection-press-record #content_module { order: 1; float: none !important; width: auto !important; max-width: 780px; margin: 0 !important; padding: 0 !important; } body.section-press .subsection-press-record #content_module .prose p { font-size: clamp(15px, 1vw, 18px) !important; line-height: 1.9 !important; color: #414042 !important; } body.section-press .subsection-press-record #content_module .prose a[target="_blank"]::after { content: "\00a0\2197"; } body.section-press .subsection-press-record #sidebar { order: 2; float: none !important; width: auto !important; max-width: 780px; margin: clamp(28px, 2.4vw, 44px) 0 0 !important; padding: 0 !important; } body.section-press .subsection-press-record #sidebar .social_sharing_wrap { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; } /* related artist links (press and event pages) */ body.section-press #related_artists .records_list h2 { font-size: clamp(15px, 1vw, 18px) !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: #231F20 !important; } /* Events section on artist pages */ body .records_list.grid_dynamic_layout_events.feature_list h2 { font-size: clamp(22px, 1.8vw, 34px) !important; font-weight: 300 !important; line-height: 1.25 !important; letter-spacing: 0 !important; text-transform: none !important; color: #231F20 !important; } @media (max-width: 1023px) { body .records_list.grid_dynamic_layout_press > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { body .records_list.grid_dynamic_layout_press > ul { grid-template-columns: minmax(0, 1fr); } } /* --------------------------------------------------------------------- 13. EXHIBITIONS - PAST BY YEAR Settings > Exhibitions: grid type "Split by status" + "Split past exhibitions by year". Every year of past exhibitions gets its own page and a year link, added automatically from the exhibition dates. The year links read as headings (current year dark and underlined); the status link (Past / Current / Forthcoming) only shows when there is more than one of them. --------------------------------------------------------------------- */ body.section-exhibitions .exhibition-list-header { margin: 0 0 clamp(36px, 3.4vw, 64px) !important; padding: 0 !important; } body.section-exhibitions .exhibition-list-header h1 { margin: 0 !important; font-size: clamp(24px, 2vw, 38px) !important; font-weight: 300 !important; line-height: 1.15 !important; letter-spacing: -0.005em !important; text-transform: none !important; color: #231F20 !important; } body.section-exhibitions #exhibitions_nav li:only-child { display: none !important; } body.section-exhibitions .exhibitions_list_filters { float: none !important; clear: both; margin: clamp(20px, 1.8vw, 32px) 0 0 !important; padding: 0 !important; } body.section-exhibitions #exhibitions_years_nav ul { display: flex !important; flex-wrap: wrap; gap: 10px clamp(22px, 2vw, 36px); margin: 0 !important; padding: 0 !important; } body.section-exhibitions #exhibitions_years_nav li { float: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } body.section-exhibitions #exhibitions_years_nav li a { display: inline-block; padding: 0 0 6px !important; border-bottom: 1px solid transparent; font-size: clamp(17px, 1.3vw, 24px) !important; font-weight: 400 !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; color: #9A9B9E !important; transition: color 0.2s ease, border-color 0.2s ease; } body.section-exhibitions #exhibitions_years_nav li a:hover { color: #231F20 !important; } body.section-exhibitions #exhibitions_years_nav li.active a { color: #231F20 !important; border-bottom-color: #231F20; } /* list cards: three across, each image whole at its own shape (Settings > Exhibitions = 3 columns, uncropped; the theme's square box is removed), then title, venue, dates - same card style as Event Gallery */ body.section-exhibitions .subsection-exhibitions-grid .records_list.image_list > ul { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(48px, 4.4vw, 84px) clamp(24px, 2.4vw, 46px); height: auto !important; margin: 0 !important; padding: 0 !important; } body.section-exhibitions .subsection-exhibitions-grid .records_list.image_list > ul > li { position: static !important; display: block !important; float: none !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; transform: none !important; } body.section-exhibitions .subsection-exhibitions-grid .records_list.image_list li > a { display: block; text-decoration: none; } body.section-exhibitions .subsection-exhibitions-grid .records_list.image_list .image { display: block !important; float: none !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; } body.section-exhibitions .subsection-exhibitions-grid .records_list.image_list .image::before, body.section-exhibitions .subsection-exhibitions-grid .records_list.image_list .image::after { display: none !important; padding: 0 !important; } body.section-exhibitions .subsection-exhibitions-grid .records_list.image_list .image > span { position: static !important; display: block !important; width: 100% !important; height: auto !important; } body.section-exhibitions .subsection-exhibitions-grid .records_list.image_list .image img { position: static !important; display: block !important; width: 100% !important; height: auto !important; max-width: none !important; max-height: none !important; transition: opacity 0.3s ease; } body.section-exhibitions .subsection-exhibitions-grid .records_list.image_list li a:hover .image img { opacity: 0.88; } body.section-exhibitions .subsection-exhibitions-grid .records_list.image_list .content { float: none !important; width: auto !important; margin: 0 !important; padding: clamp(18px, 1.5vw, 26px) 0 0 !important; } body.section-exhibitions .subsection-exhibitions-grid .records_list.image_list h2 { margin: 0 0 clamp(8px, 0.6vw, 12px) !important; font-size: clamp(17px, 1.2vw, 23px) !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0 !important; text-transform: none !important; color: #231F20 !important; } body.section-exhibitions .subsection-exhibitions-grid .records_list.image_list .subtitle, body.section-exhibitions .subsection-exhibitions-grid .records_list.image_list .date { display: block !important; margin: 0 0 4px !important; font-size: clamp(12px, 0.76vw, 14px) !important; font-weight: 400 !important; line-height: 1.6 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #6D6E71 !important; } body.section-exhibitions .subsection-exhibitions-grid .records_list.image_list .description, body.section-exhibitions .subsection-exhibitions-grid .records_list.image_list .link { display: none !important; } @media (max-width: 1023px) { body.section-exhibitions .subsection-exhibitions-grid .records_list.image_list > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { body.section-exhibitions .subsection-exhibitions-grid .records_list.image_list > ul { grid-template-columns: minmax(0, 1fr); } } /* Exhibition and art fair pages: the image next to the overview text is shown whole, at its own shape. Exhibition posters carry the title, dates and venue, and art fairs show a painting, so the theme's square crop cut them off. */ body.section-exhibitions .subsection-exhibition-detail-page .subsection-overview .sidebar > .image, body.section-art-fairs .subsection-event-detail-page .subsection-overview .sidebar > .image { height: auto !important; } body.section-exhibitions .subsection-exhibition-detail-page .subsection-overview .sidebar > .image::before, body.section-exhibitions .subsection-exhibition-detail-page .subsection-overview .sidebar > .image::after, body.section-art-fairs .subsection-event-detail-page .subsection-overview .sidebar > .image::before, body.section-art-fairs .subsection-event-detail-page .subsection-overview .sidebar > .image::after { display: none !important; padding: 0 !important; } body.section-exhibitions .subsection-exhibition-detail-page .subsection-overview .sidebar > .image a, body.section-exhibitions .subsection-exhibition-detail-page .subsection-overview .sidebar > .image .object-fit-container, body.section-art-fairs .subsection-event-detail-page .subsection-overview .sidebar > .image a, body.section-art-fairs .subsection-event-detail-page .subsection-overview .sidebar > .image .object-fit-container { position: static !important; display: block !important; width: 100% !important; height: auto !important; } body.section-exhibitions .subsection-exhibition-detail-page .subsection-overview .sidebar > .image img, body.section-art-fairs .subsection-event-detail-page .subsection-overview .sidebar > .image img { width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; } /* --------------------------------------------------------------------- 14. ART FAIRS Settings > Art Fairs = 3 columns, uncropped. Cards as on Exhibitions: each image whole at its own shape (the theme's square box is removed), then title, venue, dates. --------------------------------------------------------------------- */ body.section-art-fairs .event-list-header { margin: 0 0 clamp(36px, 3.4vw, 64px) !important; padding: 0 !important; } body.section-art-fairs .event-list-header h1 { margin: 0 !important; font-size: clamp(24px, 2vw, 38px) !important; font-weight: 300 !important; line-height: 1.15 !important; letter-spacing: -0.005em !important; text-transform: none !important; color: #231F20 !important; } /* list cards */ body.section-art-fairs .records_list.grid_dynamic_layout_artfairs.image_list > ul { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(48px, 4.4vw, 84px) clamp(24px, 2.4vw, 46px); height: auto !important; margin: 0 !important; padding: 0 !important; } body.section-art-fairs .records_list.grid_dynamic_layout_artfairs.image_list > ul > li { position: static !important; display: block !important; float: none !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; transform: none !important; } body.section-art-fairs .records_list.grid_dynamic_layout_artfairs.image_list li > a { display: block; text-decoration: none; } body.section-art-fairs .records_list.grid_dynamic_layout_artfairs.image_list .image { display: block !important; float: none !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; } body.section-art-fairs .records_list.grid_dynamic_layout_artfairs.image_list .image::before, body.section-art-fairs .records_list.grid_dynamic_layout_artfairs.image_list .image::after { display: none !important; padding: 0 !important; } body.section-art-fairs .records_list.grid_dynamic_layout_artfairs.image_list .image > span { position: static !important; display: block !important; width: 100% !important; height: auto !important; } body.section-art-fairs .records_list.grid_dynamic_layout_artfairs.image_list .image img { position: static !important; display: block !important; width: 100% !important; height: auto !important; max-width: none !important; max-height: none !important; transition: opacity 0.3s ease; } body.section-art-fairs .records_list.grid_dynamic_layout_artfairs.image_list li a:hover .image img { opacity: 0.88; } body.section-art-fairs .records_list.grid_dynamic_layout_artfairs.image_list .content { float: none !important; width: auto !important; margin: 0 !important; padding: clamp(18px, 1.5vw, 26px) 0 0 !important; } body.section-art-fairs .records_list.grid_dynamic_layout_artfairs.image_list h2 { margin: 0 0 clamp(8px, 0.6vw, 12px) !important; font-size: clamp(17px, 1.2vw, 23px) !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0 !important; text-transform: none !important; color: #231F20 !important; } body.section-art-fairs .records_list.grid_dynamic_layout_artfairs.image_list .subtitle, body.section-art-fairs .records_list.grid_dynamic_layout_artfairs.image_list .date { display: block !important; margin: 0 0 4px !important; font-size: clamp(12px, 0.76vw, 14px) !important; font-weight: 400 !important; line-height: 1.6 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #6D6E71 !important; } body.section-art-fairs .records_list.grid_dynamic_layout_artfairs.image_list .description, body.section-art-fairs .records_list.grid_dynamic_layout_artfairs.image_list .link { display: none !important; } body.section-art-fairs .records_list.grid_dynamic_layout_artfairs.image_list .subtitle:empty { display: none !important; } @media (max-width: 1023px) { body.section-art-fairs .records_list.grid_dynamic_layout_artfairs.image_list > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { body.section-art-fairs .records_list.grid_dynamic_layout_artfairs.image_list > ul { grid-template-columns: minmax(0, 1fr); } } /* Art fair page Works: each artwork whole in a square frame, as on the exhibition page. The grid follows the Events settings (cropped, 3:2), which also drive the Event Gallery, so it is changed here instead. */ body.section-art-fairs .subsection-event-detail-page .subsection-works li .image::after { padding-top: 100% !important; } body.section-art-fairs .subsection-event-detail-page .subsection-works li .image img { object-fit: contain !important; } /* --------------------------------------------------------------------- 15. ENQUIRE BUTTON (artwork pages) The theme shows "Enquire" as plain text; styled as the site's solid button (same as the Contact form Submit and newsletter Sign up). --------------------------------------------------------------------- */ body .enquire_button_container .link a.website_contact_form { display: inline-block !important; padding: clamp(13px, 1vw, 18px) clamp(30px, 2.6vw, 50px) !important; border: 1px solid #F48223 !important; background: #F48223 !important; font-size: clamp(12px, 0.78vw, 14px) !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; text-decoration: none !important; color: #FFFFFF !important; transition: background-color 0.2s ease, border-color 0.2s ease; } body .enquire_button_container .link a.website_contact_form:hover, body .enquire_button_container .link a.website_contact_form:focus-visible { border-color: #231F20 !important; background: #231F20 !important; } /* Artlogic's own buttons (.button: Enquire popup Submit, cookie banner, Mailing list Signup, cart) take the logo orange from Settings > Styles > Button background colour. Bolder text and charcoal on hover, to match the buttons above. */ .button a { font-weight: 600 !important; } .button:hover, .button:has(a:focus-visible) { background: #231F20 !important; } /* Enquiry popup and Contact page form: the "* denotes required fields" and privacy note under Submit is small print, same size as the footer's small text */ #contactForm #privacy_policy_form_msg, #contactForm #privacy_policy_form_msg p { font-size: clamp(11px, 0.68vw, 13px) !important; line-height: 1.8 !important; color: #6D6E71 !important; } #contactForm #privacy_policy_form_msg p { margin: 0 0 0.6em !important; } #contactForm #privacy_policy_form_msg p:last-child { margin-bottom: 0 !important; } /* --------------------------------------------------------------------- 16. SOLD / RESERVED LABELS Settings > Artworks: sold / reserved labels on (lists and detail). Shown in the logo orange with a dot before the word, under the caption in artwork grids and on the artwork page. In grids Artlogic gives Sold and Reserved the same class, so both get this style. --------------------------------------------------------------------- */ .records_list .price.price_unavailable, .artwork_details_wrapper .price.sold, .artwork_details_wrapper .price.reserved { display: flex !important; align-items: center; gap: 7px; font-size: clamp(11px, 0.68vw, 13px) !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #F48223 !important; } .records_list .price.price_unavailable::before, .artwork_details_wrapper .price.sold::before, .artwork_details_wrapper .price.reserved::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #F48223; }