/* 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/css2?display=swap&family=Inter:wght@400); @import url(https://fonts.googleapis.com/css2?display=swap&family=Inter:wght@400;600); /* Background colour --------------*/ body.slide-nav-active #responsive_slide_nav_wrapper, #responsive_slide_nav_wrapper #top_nav .header_quicksearch_field { background-color: #ffffff !important; } body.responsive-nav-side-position-fullscreen.slide-nav-open #responsive_slide_nav_wrapper::before { display: none; } #header.header_transparent .dropdown-mask { background-color: transparent !important; } #header, .header-fixed-wrapper #header, body .dropdown-mask { background-color: #ffffff } #header:not(.header_transparent) .inner { border: 0; } #header #store_cart_widget a { color: #ffffff; outline-color: #000000; } /* 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: #d8d8d8; } .form .form_row .inputField, .form .form_row select, .form .form_row textarea, .form .form_row #captcha input, .form .form_row .g-recaptcha, #mc_embed_signup input, #protected_path_login .protected_path_field_row, #sc_checkout_content #shipping_container select, #sc_checkout_content #shipping_container .inputField, input, textarea, select { border-color: #ededed; } /* Fonts----------------------------- */ /* Main body font ------------------- */ body, input, select, textarea { font-family: 'Inter', Sans-Serif; font-style: normal; font-weight: 400; } /* 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: 'Inter', Sans-Serif; font-weight: 400; font-style: normal; } /* Navigation font ------------------- */ #top_nav.navigation ul li a, #top_nav #full_nav .dropdown-btn { font-family: 'Inter', Sans-Serif; font-style: normal; font-weight: 400; } /* User custom html-font sizing ------------------- */ html { font-size: 9.25px; } /* Title - Heading spacing and transform ------------------- */ /* Dynamically adjust font sizes so that headings and titles look larger (as lowercase appears smaller than uppercase) while the body size remains the same -------------------------- */ html { font-size: 13.41px; } body { font-size: 1.00018642804rem; line-height: 2.48rem; } 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-transform: none; letter-spacing: 0; } /* Text colours----------------------------- */ /* Heading and emphasis text colour ------------------- */ /* Colour #000000 */ 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: #000000; } blockquote { border-left: 1px solid #000000; } #logo a, #logo a:visited { color: #000000; } /* 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: #000000; } .page_stats .disabled, .ps_item.disabled { color: #000000; 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: #000000; } #privacy_policy_form_msg { color: #000000; opacity: 0.5; } /* Link text color ------------------- */ .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: #565656; } /* 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:50.0% }} .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:flex-start; justify-content: flex-start; -webkit-align-items:flex-end; -ms-flex-align: flex-end; align-items: flex-end; } .records_list.grid_dynamic_layout_artfairs ul li .image::after { padding-top:66.6666666667%; } /* 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:66.6666666667%; } /* artworks - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artworks:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_artworks ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artworks ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artworks ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artworks ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artworks ul li img:first-letter { font-family:object-fit; } /* 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:66.6666666667%; } /* video - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_video:not(.feature_list) > ul > li { width:33.33% }} .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:33.33% }} .records_list.feature_list.grid_dynamic_layout_default_grid:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_default_grid:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_default_grid ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_default_grid ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:flex-end; -ms-flex-align: flex-end; align-items: flex-end; } .records_list.grid_dynamic_layout_default_grid ul li .image::after {display:none;} .records_list.grid_dynamic_layout_default_grid ul li .image > span {position: static;} /* artists - tile_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.tile_list.grid_dynamic_layout_artists ul { width: calc(33.33%) }} .records_list.feature_list.grid_dynamic_layout_artists:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_artists:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_artists ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_artists ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:flex-start; -ms-flex-align: flex-start; align-items: flex-start; } .records_list.grid_dynamic_layout_artists ul li .image::after {display:none;} .records_list.grid_dynamic_layout_artists ul li .image > span {position: static;} /* video featured - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_video_featured:not(.feature_list) > ul > li { width:100.0% }} .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; } /* 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.feature_list.grid_dynamic_layout_artist_works_categories:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_artist_works_categories:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_artist_works_categories ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_artist_works_categories ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:flex-start; -ms-flex-align: flex-start; align-items: flex-start; } .records_list.grid_dynamic_layout_artist_works_categories ul li .image::after {display:none;} .records_list.grid_dynamic_layout_artist_works_categories ul li .image > span {position: static;} /* 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.grid_dynamic_layout_exhibitions ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_exhibitions ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_exhibitions ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_exhibitions ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_exhibitions ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_exhibitions ul li .image::after { padding-top:66.6666666667%; } /* events works - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_events:not(.feature_list) > ul > li { width:33.33% }} .records_list.feature_list.grid_dynamic_layout_events:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_events:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_events ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_events ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:flex-end; -ms-flex-align: flex-end; align-items: flex-end; } .records_list.grid_dynamic_layout_events ul li .image::after {display:none;} .records_list.grid_dynamic_layout_events ul li .image > span {position: static;} /* 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:flex-start; -ms-flex-align: flex-start; align-items: flex-start; } .records_list.grid_dynamic_layout_artist_installation ul li .image::after { padding-top:66.6666666667%; } /* blog - reading_list-------------------------------------- */ .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 - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_store_featured:not(.feature_list) > ul > li { width:100.0% }} .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; } /* 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; } /* 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:33.33% }} .records_list.feature_list.grid_dynamic_layout_artwork_categories_landing:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_artwork_categories_landing:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_artwork_categories_landing ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_artwork_categories_landing ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:flex-end; -ms-flex-align: flex-end; align-items: flex-end; } .records_list.grid_dynamic_layout_artwork_categories_landing ul li .image::after {display:none;} .records_list.grid_dynamic_layout_artwork_categories_landing ul li .image > span {position: static;} /* 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; } /* store - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_store:not(.feature_list) > ul > li { width:33.33% }} .records_list.feature_list.grid_dynamic_layout_store:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_store:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_store ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_store ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:flex-end; -ms-flex-align: flex-end; align-items: flex-end; } .records_list.grid_dynamic_layout_store ul li .image::after {display:none;} .records_list.grid_dynamic_layout_store ul li .image > span {position: static;} /* default feature grid - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_default_feature_grid:not(.feature_list) > ul > li { width:100.0% }} .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; } /* feature panels - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_feature_panels:not(.feature_list) > ul > li { width:33.33% }} .records_list.feature_list.grid_dynamic_layout_feature_panels:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_feature_panels:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_feature_panels ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_feature_panels ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:flex-end; -ms-flex-align: flex-end; align-items: flex-end; } .records_list.grid_dynamic_layout_feature_panels ul li .image::after {display:none;} .records_list.grid_dynamic_layout_feature_panels ul li .image > span {position: static;} /* 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:flex-start; justify-content: flex-start; -webkit-align-items:flex-end; -ms-flex-align: flex-end; align-items: flex-end; } .records_list.grid_dynamic_layout_exhibitions_works ul li .image::after { padding-top:66.6666666667%; } /* publications featured - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_publications_featured:not(.feature_list) > ul > li { width:100.0% }} .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; } /* press featured - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_press_featured:not(.feature_list) > ul > li { width:100.0% }} .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; } /* news featured - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_news_featured:not(.feature_list) > ul > li { width:100.0% }} .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; } /* artfairs featured - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artfairs_featured:not(.feature_list) > ul > li { width:50.0% }} .records_list.feature_list.grid_dynamic_layout_artfairs_featured:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_artfairs_featured:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_artfairs_featured ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_artfairs_featured ul li .image > span { -webkit-justify-content:flex-start; justify-content: flex-start; -webkit-align-items:flex-end; -ms-flex-align: flex-end; align-items: flex-end; } .records_list.grid_dynamic_layout_artfairs_featured ul li .image::after {display:none;} .records_list.grid_dynamic_layout_artfairs_featured ul li .image > span {position: static;} /* exhibitions featured - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_exhibitions_featured ul { width:100%;}} .records_list.grid_dynamic_layout_exhibitions_featured ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_exhibitions_featured ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_exhibitions_featured ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_exhibitions_featured ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_exhibitions_featured ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_exhibitions_featured ul li .image::after { padding-top:66.6666666667%; } /* press - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_press:not(.feature_list) > ul > li { width:33.33% }} .records_list.feature_list.grid_dynamic_layout_press:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_press:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_press ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_press ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:flex-end; -ms-flex-align: flex-end; align-items: flex-end; } .records_list.grid_dynamic_layout_press ul li .image::after {display:none;} .records_list.grid_dynamic_layout_press ul li .image > span {position: static;} /* news - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_news:not(.feature_list) > ul > li { width:33.33% }} .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:66.6666666667%; } /* viewing rooms featured forthcoming - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_viewing_rooms_featured_forthcoming:not(.feature_list) > ul > li { width:100.0% }} .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; } /* search - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_search:not(.feature_list) > ul > li { width:33.33% }} .records_list.feature_list.grid_dynamic_layout_search:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_search:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_search ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_search ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:flex-end; -ms-flex-align: flex-end; align-items: flex-end; } .records_list.grid_dynamic_layout_search ul li .image::after {display:none;} .records_list.grid_dynamic_layout_search ul li .image > span {position: static;} /* viewing rooms featured - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_viewing_rooms_featured:not(.feature_list) > ul > li { width:100.0% }} .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; } /* 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:66.6666666667%; } /* 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.grid_dynamic_layout_artist_works ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artist_works ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artist_works ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artist_works ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artist_works ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_artist_works ul li .image::after { padding-top:66.6666666667%; } /* exhibitors - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_exhibitors:not(.feature_list) > ul > li { width:33.33% }} .records_list.feature_list.grid_dynamic_layout_exhibitors:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_exhibitors:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_exhibitors ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_exhibitors ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:flex-end; -ms-flex-align: flex-end; align-items: flex-end; } .records_list.grid_dynamic_layout_exhibitors ul li .image::after {display:none;} .records_list.grid_dynamic_layout_exhibitors ul li .image > span {position: static;} /* 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:33.33% }} .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 {display:none;} .records_list.grid_dynamic_layout_feature_panels_image_grid ul li .image > span {position: static;} /* publications - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_publications:not(.feature_list) > ul > li { width:33.33% }} .records_list.feature_list.grid_dynamic_layout_publications:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_publications:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_publications ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_publications ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:flex-end; -ms-flex-align: flex-end; align-items: flex-end; } .records_list.grid_dynamic_layout_publications ul li .image::after {display:none;} .records_list.grid_dynamic_layout_publications ul li .image > span {position: static;} /* team - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_team:not(.feature_list) > ul > li { width:33.33% }} .records_list.feature_list.grid_dynamic_layout_team:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_team:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_team ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_team ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:flex-end; -ms-flex-align: flex-end; align-items: flex-end; } .records_list.grid_dynamic_layout_team ul li .image::after {display:none;} .records_list.grid_dynamic_layout_team ul li .image > span {position: static;} /* viewing rooms - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_viewing_rooms:not(.feature_list) > ul > li { width:33.33% }} .records_list.feature_list.grid_dynamic_layout_viewing_rooms:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_viewing_rooms:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_viewing_rooms ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_viewing_rooms ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:flex-end; -ms-flex-align: flex-end; align-items: flex-end; } .records_list.grid_dynamic_layout_viewing_rooms ul li .image::after {display:none;} .records_list.grid_dynamic_layout_viewing_rooms ul li .image > span {position: static;} /* 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:50.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: 80px; max-width: 80px; } #header #logo.user-custom-logo-image::before { padding-top:64.6090534979%; } .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-artlogicwebsite1954/usr/images/preferences/screenshot-2025-01-17-at-1.07.08-pm.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-artlogicwebsite1954/usr/images/preferences/screenshot-2025-01-17-at-1.07.08-pm.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-artlogicwebsite1954/usr/images/preferences/screenshot-2025-01-17-at-1.07.08-pm.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: #565656; } #slide_nav_reveal::after { color: #565656; } #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: #000000; } /* Subnav text color ------------------- */ .navigation ul li.active a, .navigation ul li.active a:hover, .navigation ul li.active a:visited, body.type-fullscreen.fullscreen-slide-light .navigation ul li.active a { color: #000000; } /* Responsive nav text color ------------------- */ .slide-nav-open #responsive_slide_nav_wrapper #top_nav ul li:not(.active) a, .slide-nav-open #header #responsive_slide_nav_wrapper .social_media_icon::after, .slide-nav-open #responsive_slide_nav_wrapper .quicksearch-icon::after, .slide-nav-open #responsive_slide_nav_wrapper #top_nav .header_quicksearch_field, .slide-nav-open #responsive_slide_nav_wrapper #top_nav #top_nav_reveal ul li a::after, .slide-nav-open #top_nav #full_nav .has_dropdown_items .dropdown-btn, .slide-nav-open #top_nav #full_nav .has_dropdown_items_mobile .dropdown-btn{ color: #000000; } /* Responsive nav active / hover text color ------------------- */ .slide-nav-open #responsive_slide_nav_wrapper #top_nav ul li.active a, .slide-nav-open #responsive_slide_nav_wrapper #top_nav ul li:hover a { color: #565656; } /* 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: #565656; } /* quick view button */ .buy_enquire_button button, a.buy_enquire_detail_link { color: #565656; } /* Hero section image opacity ------------------- */ #mirror-slideshow.hero-parallax-element-mirror ul li .image, #mirror-slideshow.hero-parallax-element-mirror ul li .video_container .video_inner, #hero_header #slideshow ul li .image, #hero_header #hero_image_responsive, .parallax-mirror img.parallax-slider { opacity: 1 !important; } .parallax-mirror:not(#parallax-hero_header) img.parallax-slider { opacity: 1 !important; } /* don't show if opacity = 1 */ #hero_header:not(.hero_section_detect_brightness):not(.hero-mode-split)::after { display:none !important; } /* Hero section image height ------------------- */ ::root { --hero-height: 60vh } #hero_header > .inner, body.layout-hero-header:not(.type-fullscreen) #main_content::before, body.layout-hero-header.layout-hero-header-record-data #hero_header > .inner, body.layout-hero-header.layout-hero-header-record-data:not(.type-fullscreen ) #main_content::before, body.layout-hero-header #hero_header.hero-mode-split { height: var(--hero-height, 60vh); max-height: none; } .layout-hero-header-record-data #hero_header > .inner, body.layout-hero-header-record-data.layout-hero-header:not(.type-fullscreen ) #main_content::before, body.layout-hero-header-record-data.layout-hero-header.layout-hero-header-record-data #hero_header > .inner, body.layout-hero-header-record-data.layout-hero-header.layout-hero-header-record-data:not(.type-fullscreen ) #main_content::before, body.layout-hero-header.layout-hero-header-record-data #hero_header.hero-mode-split { height: var(--hero-height, 85vh); max-height: none; } /* 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-artlogicwebsite1954/usr/images/preferences/screenshot-2025-01-17-at-1.07.08-pm.png'); } } /* Artlogic preferences custom CSS - entered by Artlogic in the preferences screen ------------------- */ /* Client custom user CSS - entered by the client in the preferences screen ------------------- */ /* ============================================================================ Gallery LNL — user_custom.css (MERGED) BASE = live Artlogic input-field CSS (user_custom_fromtheinputfield.css) STYLUS = latest local Stylus working rules (lnl.user.css) Merge rule: where the two conflict, STYLUS wins. Merge date: 2026-07-14 (consolidation — About restructure, list type, mobile) Section tags: [BASE] carried over unchanged from the live stylesheet [STYLUS · new] new rule promoted from Stylus (no base equivalent) [STYLUS · wins] a base rule existed and conflicted; Stylus value kept Resolved / added this round (see inline notes): • Section headings — NEW global rule pulls each page title (Artists / Exhibitions / News / About) out to the logo gutter. • About page — reworked: native page title revealed + gutter-aligned (bespoke 72px title now hidden); body full-bleeds and staggers IN to the Exhibitions "Current" inset with equal margins; prose double-inset; Visit/Enquire + form labels sentence-cased and resized; Yes/No gap; body bottom padding 140→40px to close the form→footer gap. • Record lists — NEW feature_list / records_list / image_list type sizing. • Mobile — NEW: phase-change realignment at ≤459px (logo, all page titles, footer, About body all pulled to Artlogic's 15px content gutter); About photo cropped to left-1/3 portrait ≤480px; exhibitions caption title↔subtitle separation restored ≤480px; About image→prose gap and prose size reduced on phones. Carried from previous merge: global footer full-bleed, header .inner gutter, homepage feature_panels type, global .date. ============================================================================ */ /* ───────────────────────────────────────────────── [BASE] Base typography ───────────────────────────────────────────────── */ body { font-family: "Inter", sans-serif; font-size: 1.10rem; font-weight: 400; line-height: 1.60; } h6, h4 { font-family: "Inter", sans-serif; font-weight: 400; } h1, h2, h3, h5 { font-family: "Inter", sans-serif; font-weight: 400; } /* ═══════════════════════════════════════════════════════════════════════════ [STYLUS · new] GLOBAL LAYOUT OVERRIDES Cross-cutting rules promoted from Stylus. They fire on every page so the header logo gutter and the footer gutter line up site-wide. ═══════════════════════════════════════════════════════════════════════════ */ /* Header — kill Artlogic's own header padding so the gutter on .inner below is the single source of truth. */ .header-fixed-wrapper #header, .type-fullscreen #header, .layout-hero-header #header { padding-left: 0 !important; padding-right: 0 !important; } /* Header inner — full width with our clamp gutter (overrides Artlogic's aperture_layout default of max-width:1500px). Sets the logo's left edge. */ #header .inner, #header.header_fixed .inner { max-width: none !important; margin: 0 !important; padding-left: clamp(28px, 4vw, 64px) !important; padding-right: clamp(28px, 4vw, 64px) !important; box-sizing: border-box !important; } /* [STYLUS · wins] Global footer alignment. #footer is a child of Artlogic's #container (max-width:1660px; margin:0 auto; padding:0 80px). The calc(50% - 50vw) margins full-bleed it out to the viewport so its gutter matches the fixed logo on EVERY page — including artists/exhibitions, where #container is NOT broken to full width. Replaces the three per-section footer blocks the base used to carry (.section-home / body:has(.lnl-press) / body:has(.lnl-about)). On those pages #container is already full width, so the calc resolves to 0 and the result is identical to the old per-section fix. */ #footer { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; max-width: none !important; padding-left: clamp(28px, 4vw, 64px) !important; padding-right: clamp(28px, 4vw, 64px) !important; box-sizing: border-box !important; } #footer .inner { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* [STYLUS · wins] Global date style. !important overrides the base `.section-home .feature_panels .date` font-size/colour further down. */ .date { font-size: 1.4rem !important; color: #767676 !important; } /* [STYLUS · new] Section list headings (Artists / Exhibitions / News / About). Pull each page title out to the fixed logo gutter. .heading_wrapper sits inside Artlogic's default centered #container (80px inset); the calc(50% - 50vw) margins full-bleed it to the viewport, then the clamp gutter re-pads it — same technique as #header .inner and the global footer. cascading-page-header is About's native title (revealed in the About section below, replacing the old bespoke 72px one). */ .heading_wrapper.artists-header, .heading_wrapper.exhibition-list-header, .heading_wrapper.news-list-header, .heading_wrapper.cascading-page-header { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; max-width: none !important; padding-left: clamp(28px, 4vw, 64px) !important; padding-right: clamp(28px, 4vw, 64px) !important; box-sizing: border-box !important; } /* ═══════════════════════════════════════════════════════════════════════════ HOMEPAGE (.section-home) ═══════════════════════════════════════════════════════════════════════════ */ /* [BASE] Break container — homepage only. .section-home is added to by Artlogic on the homepage. Without !important Artlogic's specificity wins. */ .section-home #container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* [STYLUS · new] Homepage hero image — same gutter (replaces the earlier 1500px version) plus fixed viewport height. Merged from two duplicate Stylus blocks that targeted this same selector. */ body.section-home #slideshow.full_list ul li .image { width: calc(100% - clamp(28px, 4vw, 64px) * 2) !important; margin-left: auto !important; margin-right: auto !important; height: calc(100vh - 205px) !important; max-height: calc(100vh - 205px) !important; } /* [STYLUS · new] Homepage hero caption (title + date) — same left gutter; right side keeps 60px clearance for the prev/next arrows, plus the gutter. */ body.section-home #slideshow.full_list.slideshow_navigation_enabled ul li .content { padding-left: clamp(28px, 4vw, 64px) !important; padding-right: calc(60px + clamp(28px, 4vw, 64px)) !important; } /* [STYLUS · new] Homepage main content — flush to the hero, no side padding. Merged from two duplicate Stylus blocks (margin/padding-top + side padding). */ body.section-home #main_content { margin-top: 0 !important; padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* [STYLUS · new] Homepage slideshow pagination — align to the gutter. */ body.section-home #slideshow.full_list .slideshow-pagination-controls { right: clamp(28px, 4vw, 64px) !important; } /* [BASE] Restore padding and style Artlogic's feature panel to match the designer. (+28px breathing room under the hero banner) */ .section-home .feature_panels { padding: 56px clamp(28px, 4vw, 64px) 0 !important; } @media (max-width: 767px) { .section-home .feature_panels { padding-top: 96px !important; } } .section-home .feature_panels .panel_header h2 { font-family: 'Inter', sans-serif !important; font-size: 2.4rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: #111; line-height: 3.4rem; /* matches hero title line-height */ margin: 0 0 20px; } /* [STYLUS · wins] Title — enlarged everywhere, including News (the title itself still reads fine there). Base was 15px / weight 600. */ .section-home .feature_panels h2.fp_title { font-size: 1.864rem !important; font-weight: 400 !important; color: #111 !important; line-height: 1.25 !important; margin: 0 0 4px !important; } /* [BASE] Subtitle default (small grey). Kept as the fallback: it still governs News subtitles (font-size), while the two STYLUS rules below enlarge non-News subtitles and recolour News ones. */ .section-home .feature_panels .subtitle { font-size: 13px; font-weight: 400; color: #888; display: block; margin: 0 0 4px; } /* [STYLUS · new] Subtitle — match the title, but NOT on News cards, where .subtitle holds a full preview sentence rather than a short subtitle and looks broken blown up. */ .section-home .feature_panels li:not(.item_content_section_news) .subtitle { font-size: 1.864rem !important; font-weight: 400 !important; color: #111 !important; line-height: 1.25 !important; margin: 0 0 4px !important; display: block; } /* [STYLUS · new] News card preview text — grey. */ .section-home .feature_panels li.item_content_section_news .subtitle { color: #767676 !important; font-size: 1.4rem !important; } /* [BASE / STYLUS · wins] Panel date. font-size + colour now come from the global `.date` rule at the top (1.4rem / #767676); only display:block is still contributed here. */ .section-home .feature_panels .date { display: block; } /* ───────────────────────────────────────────────── [BASE] HOMEPAGE v2 — Moon Jar; An Axis All classes prefixed lnl- to avoid collisions with Artlogic's own classes and the old homepage. ───────────────────────────────────────────────── */ /* HERO — full-viewport title screen header_fixed means the Artlogic nav overlays from the top without pushing content down. Artlogic JS adds body padding-top equal to nav height so we don't need explicit top padding here. min(440px, 44vh): matches the live 440px value at ≥1000px viewport height, then scales down on shorter screens so the peek stays visually proportionate. On desktop, vh = svh (no browser chrome offset), so the desktop rule uses vh throughout. On mobile the svh overrides in the ≤767px block below take over. */ .lnl-hero { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 clamp(28px, 4vw, 64px) min(440px, 44vh); position: relative; background: #fff; box-sizing: border-box; } .lnl-label { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: #bbb; margin: 0 0 28px; line-height: 1; } /* clamp(52px, 13vw, 139px): 139px at ≥1070px wide (matches live site desktop), ~78px at 600px (half-laptop, wraps to 2 clean lines), 52px floor at ≤400px (phone portrait). */ .lnl-title { display: block !important; font-family: 'Inter', sans-serif !important; font-size: clamp(52px, 13vw, 139px) !important; font-weight: 600 !important; line-height: 0.88 !important; letter-spacing: -0.04em !important; color: #111 !important; margin: 0 0 36px !important; } .lnl-date { font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 400; color: #999; margin: 0; line-height: 1; } /* EXHIBITION — image + names max(-320px, -32vh): pulls the jar section up so the top of the jar peeks into the hero viewport. Equals exactly -320px at ≥1000px height, scales proportionally on shorter screens. overflow: hidden + translateY(-60px) crops the blank space above the rim in the source photo. */ .lnl-exh { display: flex; flex-direction: column; align-items: center; padding: 0 clamp(28px, 4vw, 64px) 100px; margin-top: max(-320px, -32vh); background: #fff; position: relative; z-index: 1; } .lnl-jar-wrap { width: 43vw; overflow: hidden; margin-bottom: 52px; } .lnl-jar-img { width: 100%; display: block; height: auto; transform: translateY(-60px); } .lnl-names { max-width: 680px; text-align: center; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 400; line-height: 2.2; color: #999; } .lnl-names .kr { color: #444; } .lnl-names .au { color: #aaa; } .lnl-names .sep { color: #ddd; } /* RESPONSIVE — ≤767px (phones and small tablets) Switch all vh values to svh (small viewport height). Mobile browsers compute 100vh using the LARGE viewport (browser chrome collapsed), making the hero overflow the actual visible area. 100svh is always the stable visible height — chrome accounted for. */ @media (max-width: 767px) { .lnl-hero { height: 100svh; padding-bottom: min(440px, 44svh); } .lnl-exh { margin-top: max(-320px, -32svh); } } /* RESPONSIVE — 540px–767px (tablet / half-laptop) */ @media (min-width: 540px) and (max-width: 767px) { .lnl-jar-wrap { width: 58vw; } } /* RESPONSIVE — ≤539px (mobile portrait) The peek concept is dropped entirely. */ @media (max-width: 539px) { .lnl-hero { height: 60svh; padding-top: 0; padding-bottom: 0; } .lnl-label { font-size: 12px; letter-spacing: 0.15em; margin-bottom: 20px; } .lnl-title { margin-bottom: 24px !important; } .lnl-date { font-size: 18px; } .lnl-exh { margin-top: 0; padding-top: 24px; } .lnl-jar-wrap { width: 78vw; overflow: visible; } .lnl-jar-img { transform: none; } } /* [BASE] UPCOMING EVENTS — three equal cards. Prefixed lnl-up-. */ .lnl-up-rule { height: 1px; background: #ebebeb; margin: 0 clamp(28px, 4vw, 64px); } .lnl-up { padding: 0 clamp(28px, 4vw, 64px) 80px; } .lnl-up-head { font-family: 'Inter', sans-serif !important; font-size: 20px; font-weight: 400; line-height: 1; color: #111; margin: 0 0 20px; padding-top: 26px; letter-spacing: 0; text-transform: none; padding-bottom: 10px; } .lnl-up-grid { display: flex; gap: 20px; } .lnl-up-card { flex: 1; min-width: 0; text-decoration: none; color: inherit; display: block !important; } .lnl-up-card:hover .lnl-up-img { opacity: 0.85; } .lnl-up-img { width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 3 / 2; object-fit: cover; display: block !important; margin-bottom: 12px !important; transition: opacity 0.2s; } .lnl-up-type, .lnl-up-title, .lnl-up-sub, .lnl-up-date { display: block; } .lnl-up-type { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #aaa; margin: 0 0 5px; line-height: 1; } .lnl-up-title { font-size: 15px; font-weight: 600; color: #111; margin: 0 0 3px; line-height: 1.25; } .lnl-up-sub { font-size: 13px; font-weight: 400; color: #888; margin: 0 0 3px; } .lnl-up-date { font-size: 12px; color: #bbb; margin: 0; } @media (max-width: 767px) { .lnl-up-grid { flex-wrap: wrap; } .lnl-up-card { min-width: calc(50% - 10px); } } @media (max-width: 539px) { .lnl-up-grid { flex-direction: column; } .lnl-up-card { min-width: 0; } } /* ───────────────────────────────────────────────── [STYLUS · new] RECORD-LIST TYPOGRAPHY Exhibitions listing cards (feature_list = Current/Upcoming featured, image_list = Past 3-col) and the generic records_list meta text (artists, etc.). See HANDOVER "Record-list layouts & meta-line spacing". ───────────────────────────────────────────────── */ /* Current / Upcoming featured cards (1-col feature_list). */ .feature_list ul li .content h2 { font-size: 2.1rem; margin-bottom: 0; /* close the title↔subtitle gap */ } .feature_list ul li .content .subtitle { font-size: 2.1rem; border-bottom: none; /* remove the divider line (12+12px keeps the gap) */ } /* Mobile: the margin-bottom:0 above reads cramped on phones (title sits right on the subtitle) — add a little separation back below 480px. */ @media (max-width: 480px) { .feature_list ul li .content h2 { margin-bottom: 0.8rem; } } /* Generic record-list meta (artists list, etc.). */ .records_list .content { font-size: 1.25rem; color: #767676 !important; } .records_list .content .subtitle { font-size: 1.65rem; } /* Past exhibitions (3-col image_list) — meta spacing. */ .image_list ul li .content h2 { margin-bottom: 0.4rem; /* title → next line = natural line gap */ } .image_list ul li .content .date { margin-top: 1rem; /* gap above the date */ } /* ───────────────────────────────────────────────── [BASE] ARTISTS LIST — layout tweaks ───────────────────────────────────────────────── */ .artist_above_list_content { order: 1; /* move it below */ } .subheading.beyond { padding-top: 40px; } .beyond-list, .beyond-list ul { display: block !important; width: 100% !important; column-count: 1 !important; columns: 1 !important; } .beyond-list ul { float: none !important; clear: both; margin-top: 0 !important; padding-top: 0 !important; } .beyond-list li { float: none !important; width: 100% !important; display: block !important; margin: 0 0 14px 0 !important; padding: 0 !important; line-height: 1.2 !important; } .beyond-list li h2 { margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; } .artist_years { display: inline-flex; flex-direction: row-reverse; gap: 0; } .artist_years .nationality { display: inline-block; white-space: nowrap; clip-path: inset(0 0.25em 0 0); margin-right: -0.25em; } .artist_years .nationality::before { content: ", "; } .artwork_details_wrapper h1.artist #artist_years { display: none !important; } /* ───────────────────────────────────────────────── [BASE] NEWS / PRESS PAGE For custom LNL press/news articles inserted into Artlogic news records. The .lnl-press block is the custom article; Artlogic's own news title, sidebar image and date stamp are hidden only when the page contains .lnl-press. NOTE: footer gutter for press pages is now handled by the GLOBAL #footer rule at the top of this file. ───────────────────────────────────────────────── */ /* ARTLOGIC PAGE OVERRIDES — only on .lnl-press pages */ /* Break the page out of Artlogic's normal container. */ body:has(.lnl-press) #container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* Hide Artlogic's auto-rendered news title. */ .subsection-news-record:has(.lnl-press) > .news-header { display: none !important; } /* Hide Artlogic's auto-rendered sidebar/main image. */ .subsection-news-record:has(.lnl-press) #sidebar { display: none !important; } /* Undo Artlogic's sidebar layout so the custom article can centre again. */ .subsection-news-record:has(.lnl-press) #content { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* Restore the content module to full width after sidebar removal. */ .subsection-news-record:has(.lnl-press) #content_module { float: none !important; clear: both !important; width: 100% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } /* Hide Artlogic's auto-rendered date stamp under the article. The custom press meta row already shows the date. */ .subsection-news-record:has(.lnl-press) #content_module > span > .date, .subsection-news-record:has(.lnl-press) #content_module > .date { display: none !important; } /* CUSTOM PRESS ARTICLE */ /* Scoped reset — descendants of .lnl-press only. */ .lnl-press *, .lnl-press *::before, .lnl-press *::after { box-sizing: border-box; margin: 0; padding: 0; } .lnl-press img { max-width: 100%; height: auto; display: block; } /* Article shell — centred, capped, with fluid gutters. */ .lnl-press-article { max-width: 1200px; margin: 0 auto; padding: clamp(40px, 6vw, 96px) clamp(20px, 4vw, 64px) clamp(60px, 8vw, 120px); } /* Top meta row. */ .lnl-press-meta { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #aaa; margin-bottom: clamp(28px, 4vw, 48px); } .lnl-press-meta .lnl-issue { display: none; } /* Display title. */ .lnl-press-title { font-size: clamp(44px, 9vw, 116px); line-height: 0.95; letter-spacing: -0.04em; margin: 0 0 clamp(48px, 7vw, 96px); max-width: 14ch; } .lnl-press-title span { display: block; } .lnl-press-title .ln-1 { color: #111; } .lnl-press-title .ln-2 { font-weight: 300; color: #999; } .lnl-press-title .ln-3 { font-style: italic; color: #111; } /* Hero image and work info. */ .lnl-press-hero { margin-bottom: clamp(48px, 6vw, 80px); } .lnl-press-hero-img { width: 100%; background: #f4f4f4; margin-bottom: clamp(28px, 4vw, 48px); } .lnl-press-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 56px); align-items: end; color: #555; } .lnl-press-work-title { font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; color: #111; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 14px; } .lnl-press-work-spec { font-size: clamp(15px, 1.4vw, 17px); color: #333; line-height: 1.6; } /* Metadata facts row. */ .lnl-press-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 24px; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; padding: 22px 0; } .lnl-press-fact-label { display: block; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #aaa; margin-bottom: 6px; } .lnl-press-fact-value { display: block; font-size: 14px; font-weight: 500; color: #111; letter-spacing: -0.005em; } .lnl-press-fact-value a { color: inherit; text-decoration: none; border-bottom: 1px solid #ddd; padding-bottom: 1px; transition: border-color 0.15s; } .lnl-press-fact-value a:hover { border-color: #111; } /* Lede. */ .lnl-press-lede { max-width: 880px; margin: 0 auto clamp(48px, 7vw, 88px); padding: 0 clamp(0px, 3vw, 32px); font-size: clamp(22px, 3vw, 36px); font-weight: 300; line-height: 1.4; letter-spacing: -0.018em; color: #222; text-align: center; } /* Pull quote. */ .lnl-press-quote { margin: 0 0 clamp(64px, 9vw, 120px); } .lnl-press-quote blockquote { border: 0 !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: none !important; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; letter-spacing: -0.005em; color: #222; text-wrap: pretty; } .lnl-press-quote blockquote > span { display: block; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .lnl-press-quote blockquote p { margin: 0 0 1em; max-width: none !important; } .lnl-press-quote blockquote p:last-of-type { margin-bottom: 0; } .lnl-press-quote blockquote em { font-style: italic; } .lnl-press-quote-attr { margin-top: clamp(20px, 2.5vw, 32px); font-size: clamp(14px, 1.3vw, 15px); color: #888; } /* CTA. */ .lnl-press-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: end; border-top: 1px solid #ebebeb; padding-top: clamp(32px, 4vw, 56px); } .lnl-press-cta-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #999; margin-bottom: 14px; } .lnl-press-cta-text p { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6; color: #333; max-width: 44ch; } .lnl-press-cta-link { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .lnl-press-cta-show { font-size: clamp(18px, 2vw, 24px); font-weight: 500; letter-spacing: -0.01em; color: #111; } .lnl-press-cta-link a { font-size: 13px; color: #111; text-decoration: none; border-bottom: 1px solid #111; padding-bottom: 2px; } .lnl-press-cta-link a:hover { color: #555; border-color: #555; } /* PRESS — RESPONSIVE */ @media (max-width: 880px) { .lnl-press-info { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 32px); align-items: start; } .lnl-press-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .lnl-press-cta { grid-template-columns: 1fr; align-items: start; } } @media (max-width: 540px) { .lnl-press-facts { grid-template-columns: 1fr; gap: 16px; } .lnl-press-meta { gap: 4px 16px; font-size: 10px; } } /* ───────────────────────────────────────────────── [BASE / STYLUS · wins] ABOUT PAGE (Was pasted twice in the live stylesheet; collapsed to a single copy in the previous merge.) Everything page-specific lives here, NOT in the page HTML — Artlogic strips