/* 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:25.0% }} .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: 300.0px; max-width: 500px; } #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, 0.9vw, 16px); 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; } /* Studio credit (Settings > Layout > additional footer links): last in the row and quieter than the gallery's own links, so it reads as a credit. */ #footer .inner .small-links-container > div:has(a[href*="spiritnoise.com"]) { order: 4; } #footer .inner .small-links-container a[href*="spiritnoise.com"], #footer .inner .small-links-container a[href*="spiritnoise.com"]:link, #footer .inner .small-links-container a[href*="spiritnoise.com"]:visited { font-size: 0.86em !important; color: rgba(255, 255, 255, 0.6) !important; transition: color 0.2s ease; } #footer .inner .small-links-container a[href*="spiritnoise.com"]:hover, #footer .inner .small-links-container a[href*="spiritnoise.com"]:focus { color: #FFFFFF !important; } /* Bottom bar sides (tablet and desktop): the gallery's small links on the left, copyright and studio credit together on the right. The links container is flattened with display: contents so the credit can sit beside the copyright. Phones keep the stacked order. */ @media (min-width: 768px) { #footer .inner .copyright { justify-content: flex-start !important; } #footer .inner .small-links-container { display: contents !important; } #footer .inner .small-links-container > div { order: 1; } #footer .inner .small-links-container .cookie_notification_preferences { order: 2; } #footer .inner #copyright { order: 3; margin-left: auto !important; } } /* 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; } /* The theme puts an extra 50px above the panels, so the space under the hero slider was larger than the space between the sections below it. Removing it lets the "Exhibitions" header keep its own spacing, the same as "Featured Artists". */ body.section-home #content > .feature_panels { padding-top: 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; } /* Year links under the title, styled like the exhibitions page (Settings > Other Records > Events: list layout "Extended entry" + "Group past events by year"). The status link (Past) is hidden while it is the only one, and so is the "Past" heading above the grid while past events are the only group - both come back if a current or forthcoming event is added. */ body.section-events #events_nav li:only-child { display: none !important; } body.section-events #events-grid-container > .subsection-events-grid:first-child > .subheading { display: none !important; } body.section-events .events_list_filters { float: none !important; clear: both; margin: clamp(12px, 1.1vw, 18px) 0 0 !important; padding: 0 !important; } body.section-events #events_years_nav ul { display: flex !important; flex-wrap: wrap; gap: 8px clamp(18px, 1.6vw, 28px); margin: 0 !important; padding: 0 !important; } body.section-events #events_years_nav li { float: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } body.section-events #events_years_nav li a { display: inline-block; padding: 0 0 5px !important; border-bottom: 1px solid transparent; font-size: clamp(14px, 1.05vw, 19px) !important; font-weight: 400 !important; line-height: 1.3 !important; letter-spacing: 0.06em !important; font-variant-numeric: tabular-nums; text-transform: none !important; text-decoration: none !important; color: #9A9B9E !important; transition: color 0.2s ease, border-color 0.2s ease; } body.section-events #events_years_nav li a:hover { color: #231F20 !important; } body.section-events #events_years_nav li.active a { color: #231F20 !important; border-bottom-color: #231F20; } /* Art fairs list: the "Past" heading above the grid is hidden the same way, while past fairs are the only group. */ body.section-art-fairs #events-grid-past:first-child > .subheading { display: none !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 { /* columns follow Settings > Other Records > Press grid columns (the theme adds gd_no_of_columns_N); four where the template says nothing */ --press-columns: 4; display: grid !important; grid-template-columns: repeat(var(--press-columns), 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; } body .records_list.grid_dynamic_layout_press.gd_no_of_columns_2 > ul { --press-columns: 2; } body .records_list.grid_dynamic_layout_press.gd_no_of_columns_3 > ul { --press-columns: 3; } body .records_list.grid_dynamic_layout_press.gd_no_of_columns_5 > ul { --press-columns: 5; } body .records_list.grid_dynamic_layout_press.gd_no_of_columns_6 > ul { --press-columns: 6; } @media (max-width: 1279px) { body .records_list.grid_dynamic_layout_press > ul { --press-columns: 3 !important; } } @media (max-width: 1023px) { body .records_list.grid_dynamic_layout_press > ul { --press-columns: 2 !important; } } @media (max-width: 600px) { body .records_list.grid_dynamic_layout_press > ul { --press-columns: 1 !important; } } /* --------------------------------------------------------------------- 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(12px, 1.1vw, 18px) 0 0 !important; padding: 0 !important; } body.section-exhibitions #exhibitions_years_nav ul { display: flex !important; flex-wrap: wrap; gap: 8px clamp(18px, 1.6vw, 28px); 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 5px !important; border-bottom: 1px solid transparent; font-size: clamp(14px, 1.05vw, 19px) !important; font-weight: 400 !important; line-height: 1.3 !important; letter-spacing: 0.06em !important; font-variant-numeric: tabular-nums; 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; }