/* 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/aspect/2.0/styles/responsive_topnav.css') screen and (max-width: 1023px); /* Font imports ------------------- */ @import url(https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;1,300;1,400&display=swap); @import url(https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap); /* Background colour --------------*/ /* body_background_color */ body, #social_sharing_links.popup_vertical ul, .social_sharing_links.popup_vertical ul, .fancybox-powerzoom .fancybox-overlay, #popup_overlay, .subheading span, body.slide-nav-active #responsive_slide_nav_wrapper, #cookie_notification, .fancybox-overlay.fancybox-overlay-image, .fancybox-skin, div.arprompt, #sc_checkout_content #shipping_container select, #sc_checkout_content #shipping_container .inputField, .form .form_row .inputField, .form .form_row select, .form .form_row textarea, .form .form_row #captcha input, .form .form_row .g-recaptcha, .section-home #slideshow.full_list.content_below ul li, #contact_form #contact_form_item_preview .inner, .buy_enquire_quick_view, .filters_panel.filters_layout_dropdown .fp-module-content-inner { background-color: #fdfdfd } /* alternative_background_color */ #protected_path_login #container, #protected_path_login #protected_path_login_container, #protected_path_login:after, #mailing_list_popup_box, #manage_cookie_preferences_popup_box { background-color: #e7e6e2 } body.slide-nav-active #responsive_slide_nav_wrapper, #responsive_slide_nav_wrapper #top_nav .header_quicksearch_field { background-color: #fdfdfd !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: #fdfdfd } #header:not(.header_transparent) .inner { border: 0; } #header #store_cart_widget a { color: #fdfdfd; outline-color: #2e2e29; } #preloader #loader:before { background-color: #876d40; } #popup_box .close::after, #popup_box .pagination_controls > div.pagination_controls_previous:after, #popup_box .pagination_controls > div.pagination_controls_next:after { color: #1b1b1b; } /* 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: #fdfdfd; } 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: #dfdedc; } .buy_enquire_quick_view .quick-view-information { border-color: #dfdedc; } .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: #dfdedc; } /* Fonts----------------------------- */ /* Main body font ------------------- */ body, input, select, textarea { font-family: 'Jost', 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: 'EB Garamond', Serif; } /* Navigation font ------------------- */ #top_nav.navigation ul li a, #top_nav #full_nav .dropdown-btn { font-family: 'Jost', Sans-Serif; } /* User custom html-font sizing ------------------- */ html { font-size: 9.5px; } /* 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{ letter-spacing: 0.09em; } /* Text colours----------------------------- */ /* Heading and emphasis text colour ------------------- */ /* Colour #1b1b1b */ 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: #1b1b1b; } blockquote { border-left: 1px solid #1b1b1b; } #logo a, #logo a:visited { color: #1b1b1b; } /* 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: #5f5e57; } .page_stats .disabled, .ps_item.disabled { color: #5f5e57; 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: #2e2e29; } #privacy_policy_form_msg { color: #2e2e29; 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: #876d40; } /* 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.grid_dynamic_layout_artfairs ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artfairs ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artfairs ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artfairs ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artfairs ul li img:first-letter { font-family:object-fit; } .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:50.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 {display:none;} .records_list.grid_dynamic_layout_instagram ul li .image > span {position: static;} /* artworks - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artworks:not(.feature_list) > ul > li { width:50.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 {display:none;} .records_list.grid_dynamic_layout_artworks ul li .image > span {position: static;} /* 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:50.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 {display:none;} .records_list.grid_dynamic_layout_default_image_grid ul li .image > span {position: static;} /* 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.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:33.33% }} .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:66.6666666667%; } /* 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.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:100.0%; } /* 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.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:50.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 {display:none;} .records_list.grid_dynamic_layout_exhibitions_installation ul li .image > span {position: static;} /* artist installation - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artist_installation:not(.feature_list) > ul > li { width:50.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 {display:none;} .records_list.grid_dynamic_layout_artist_installation ul li .image > span {position: static;} /* 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 - 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:66.6666666667%; } /* 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:66.6666666667%; } /* 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.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:100.0%; } /* 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.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:66.6666666667%; } /* 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.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:50.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 {display:none;} .records_list.grid_dynamic_layout_exhibitions_works ul li .image > span {position: static;} /* 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:66.6666666667%; } /* 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:66.6666666667%; } /* 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:66.6666666667%; } /* 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:66.6666666667%; } /* exhibitions featured - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_exhibitions_featured ul { width:100%;}} .records_list.grid_dynamic_layout_exhibitions_featured ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_exhibitions_featured ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_exhibitions_featured ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_exhibitions_featured ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_exhibitions_featured ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_exhibitions_featured ul li .image::after { padding-top:66.6666666667%; } /* press - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_press:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_press ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_press ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_press ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_press ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_press ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_press ul li .image::after { padding-top:100.0%; } /* 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: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:66.6666666667%; } /* 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.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:66.6666666667%; } /* 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:50.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 {display:none;} .records_list.grid_dynamic_layout_viewing_rooms_works ul li .image > span {position: static;} /* artist works - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artist_works:not(.feature_list) > ul > li { width:50.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 {display:none;} .records_list.grid_dynamic_layout_artist_works ul li .image > span {position: static;} /* 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.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:50.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 {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.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:33.33% }} .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:33.33% }} .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:33.33% } .subsection-artist-list-standard .artists_list_dynamic_columns ul { width:33.33% } .subsection-artist-list-preview .artists_list_dynamic_columns ul { width:33.33% } /* Light and dark logo variants css ------------------- */ /* Logo text color ------------------- */ #logo { background: none; width: 100%; min-width: 200px; max-width: 200px; } #header #logo.user-custom-logo-image::before { padding-top:15.7862407862%; } .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-artlogicwebsite1974/usr/images/preferences/wordmark-ink.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-artlogicwebsite1974/usr/images/preferences/wordmark-ink.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-artlogicwebsite1974/usr/images/preferences/wordmark-ink.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: #5f5e57; } #slide_nav_reveal::after { color: #5f5e57; } #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: #1b1b1b; } /* 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: #1b1b1b; } /* 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: #5f5e57; } /* 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: #1b1b1b; } /* 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: #1b1b1b; } /* quick view button */ .buy_enquire_button button, a.buy_enquire_detail_link { color: #1b1b1b; } /* 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: 0.62 !important; } .parallax-mirror:not(#parallax-hero_header) img.parallax-slider { opacity: 0.62 !important; } /* don't show if opacity = 1 */ /* Hero section image height ------------------- */ ::root { --hero-height: 75vh } #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, 75vh); 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, 50vh); 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-artlogicwebsite1974/usr/images/preferences/wordmark-ink.png'); } } /* Artlogic preferences custom CSS - entered by Artlogic in the preferences screen ------------------- */ /* Client custom user CSS - entered by the client in the preferences screen ------------------- */ /* ── PAGE SCOPES ───────────────────────────────────────────── Artlogic derives the body class from the page SLUG: /sculpture/ gives body.section-sculpture, /the-sculpture/ gives body.section-the-sculpture. Renaming a page therefore silently unhooks every rule scoped to it, and the page looks destroyed while the content is untouched. That happened once. These scopes use body[class*="..."] so either slug matches. If a page is renamed to something that does not contain the word, these have to be updated by hand. ──────────────────────────────────────────────────────────── */ /* ============================================================ SIMON GUDGEON · custom CSS for Artlogic Settings > Website > Styles > Customise CSS styles SAFE BASE. Typography only. Nothing here changes layout, height, overflow or width, so it cannot blank a page. ============================================================ */ /* ── TYPOGRAPHY ───────────────────────────────────────────── EB Garamond carries the work and the words. Jost does the small letterspaced jobs. */ h1,h2,h3,h4,h5{ font-family:"EB Garamond",Georgia,serif; font-weight:400; letter-spacing:-.01em; } /* NO display sizes on bare h1 and h2. Artlogic uses those tags for record headings and modal titles, not just for headlines, so a size here turned the artist name on a work page into 96px and the enquiry form title into 43px. Display sizes are set per place instead: the hero, the ethos strip, the work record below. */ /* NO sizes on bare h3 or h4 either. Audited on the live site: the only h3 on a work page is Artlogic's "Item added to cart" toast in the header, which my 30px was inflating. Family and tracking above are safe to set globally, sizes are not. If a real h3 is ever needed, size it by its own class. */ /* Family and line-height are safe on every paragraph. The SIZE is not: the cookie notice is a

, and 19px body serif in a banner is wrong and appears on every page. It sits outside #content, as does the header, so #content is the boundary. NOTE .prose is NOT a safe scope, the cookie banner uses it. */ p{ font-family:"EB Garamond",Georgia,serif; line-height:1.62; } #content p{font-size:19px; margin:0 0 1.15em} /* the theme gives

no margin at all, so paragraphs ran into each other. Set here rather than on bare p, for the same reason as the size: the cookie banner is a

too. */ /* a work record is a narrow column beside an image, not a page of prose, so its description takes a smaller size. */ .artwork_details_wrapper p{font-size:16px} /* ── NAVIGATION ───────────────────────────────────────────── */ nav a{ font-family:"Jost",sans-serif; font-weight:300; font-size:10.4px; letter-spacing:.35em; text-transform:uppercase; } /* ── THE BRONZE SURNAME ───────────────────────────────────── For anywhere a field does accept HTML. Write the name as Simon Gudgeon Harmless if the span never appears. */ .metal{ background:linear-gradient(120deg,#77551F 0%,#95682F 40%,#B98D4C 65%,#66471F 100%); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; padding-bottom:.24em; /* or the descender of the g goes unpainted */ } /* ── MATERIAL AND EDITION ─────────────────────────────────── */ .artwork-medium,.artwork__medium{ font-family:"EB Garamond",Georgia,serif; font-style:italic; color:#876D40; } /* ============================================================ HERO · TESTED ON THE LIVE SITE 28 JULY The hero title is .fullscreen_slideshow .hero_splash_text .title The theme sets it to 4em uppercase centred from a stylesheet we cannot override on specificity alone, hence !important on those properties only. Everything is scoped to the hero. ============================================================ */ .fullscreen_slideshow .hero_splash_text{ display:flex; flex-direction:column; align-items:flex-start; /* left, not centred */ justify-content:flex-end; /* low, not middle */ text-align:left; padding:0 6vw 11vh; } .fullscreen_slideshow .hero_splash_text .title{ font-size:clamp(46px,9vw,180px) !important; line-height:.92 !important; letter-spacing:-.015em !important; text-transform:none !important; text-align:left !important; } /* the eyebrow is an

in the slide caption, not in the splash block. It needs Jost, and rescuing from the h1-h5 rule above which was making it serif. */ .fullscreen_slideshow .content .inner h2{ font-family:"Jost",sans-serif !important; font-weight:300 !important; font-size:10.4px !important; letter-spacing:.35em !important; text-transform:uppercase !important; text-align:left !important; } /* ── THE BRONZE SURNAME IN THE HERO ───────────────────────── The splash name over the hero is drawn by the template from the site name. There is no field to put a into, so the name is redrawn here in its two colours, and the real text is left in the page at zero size so search engines and screen readers still read it. Scoped to body.section-home, so no other page's hero can be overwritten by it. If the site name ever changes, change the two content: lines below to match. */ body.section-home .fullscreen_slideshow .hero_splash_text .title{ font-size:0 !important; letter-spacing:0 !important; } body.section-home .fullscreen_slideshow .hero_splash_text .title::before, body.section-home .fullscreen_slideshow .hero_splash_text .title::after{ font-family:"EB Garamond",Georgia,serif; font-size:clamp(46px,9vw,180px); letter-spacing:-.015em; line-height:.92; } body.section-home .fullscreen_slideshow .hero_splash_text .title::before{ content:"Simon "; color:#FFFFFF; } body.section-home .fullscreen_slideshow .hero_splash_text .title::after{ content:"Gudgeon"; background:linear-gradient(120deg,#8A6532 0%,#A67C44 40%,#C49A5E 65%,#7A5A2C 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ── THE SIGNATURE IN THE FOOTER ──────────────────────────── Live text, not an image, so it stays sharp at any size and the address below it can still be selected and read. The markup lives in Layout > Footer contact details:
Simon Gudgeon
Never below 40px: under that the gradient bands. */ .advanced_footer .footer-sig{ font-family:"EB Garamond",Georgia,serif; font-size:clamp(56px,8vw,132px); line-height:1; letter-spacing:-.015em; color:#1B1B1B; white-space:nowrap; margin:0 0 .55em; } /* .metal pads its own descender so the g is painted in full. The negative margin takes that padding back out of the flow, so the address does not get pushed down by it. */ .advanced_footer .footer-sig .metal{ margin-bottom:-.24em; } /* ── THE FOOTER, IN THREE COLUMNS ─────────────────────────── The mark runs across the top, three columns sit under it, and the copyright and the links share a last row over one hairline. Content comes from four CMS boxes in Layout: Footer contact details = the mark Footer column 1 = the wordmark Footer column 2 = the address Footer column 3 = contact Scoped to .advanced_footer throughout. */ .advanced_footer > .inner{ display:grid; grid-template-columns:repeat(3,1fr); column-gap:56px; align-items:start; } .advanced_footer > .inner > .clear{display:none} .advanced_footer .advanced_footer_item{float:none;display:block;width:auto;margin:0} /* the mark row, matched by its own class rather than :first-child. With the big Gudgeon removed, :first-child fell through onto the wordmark column and stretched it across all three. The contact details item is the only one the theme gives .clearwithin, so it identifies the mark row exactly. */ .advanced_footer .advanced_footer_item.clearwithin{grid-column:1/-1;grid-row:1;margin-bottom:52px} .advanced_footer .advanced_footer_item_1{grid-column:1;grid-row:2} .advanced_footer .advanced_footer_item_2{grid-column:2;grid-row:2} .advanced_footer .advanced_footer_item_3{grid-column:3;grid-row:2} /* the wordmark is the REAL mark: outlined SVG paths pasted into footer column 1. Never set it as live text. The letterspacing is the identity, and any font substitution destroys it. */ /* the wordmark is a PNG now. It was inline SVG, but footer column 1 is a TinyMCE field and TinyMCE strips the moment anyone saves that panel, which is exactly what happened. survives. */ .advanced_footer .fw img, .advanced_footer .fw svg{display:block;width:236px;height:auto;max-width:100%} .advanced_footer .advanced_footer_item_2 div, .advanced_footer .advanced_footer_item_3 div{line-height:1.75} .advanced_footer .fc-enquire{margin-top:1em} .advanced_footer .fc-enquire a{text-decoration:underline;text-underline-offset:4px} /* the copyright must STRETCH across all three columns, or its border-top draws a rule only one column wide. The links then sit in the same cell, pushed to the right. */ .advanced_footer .copyright{ grid-column:1/-1;grid-row:3; border-top:1px solid #DFDEDC; margin-top:72px;padding-top:22px;float:none; } .advanced_footer #social_links{ grid-column:1/-1;grid-row:3; justify-self:end; margin-top:72px;padding-top:22px;float:none; display:flex;gap:32px;white-space:nowrap; } /* the links read as words. The theme hides the label with text-indent:-9999px and draws an icon in its place. */ .advanced_footer #social_links .social_links_item{float:none;width:auto;margin:0} .advanced_footer #social_links .social_media_icon{display:none} .advanced_footer #social_links a{ display:inline-block;width:auto;height:auto;text-indent:0;line-height:1.6; font-family:"Jost",sans-serif;font-weight:300;font-size:10.4px; letter-spacing:.28em;text-transform:uppercase;color:#5F5E57; } @media (max-width:900px){ .advanced_footer > .inner{grid-template-columns:1fr;row-gap:32px} .advanced_footer .advanced_footer_item_1, .advanced_footer .advanced_footer_item_2, .advanced_footer .advanced_footer_item_3, .advanced_footer .copyright, .advanced_footer #social_links{grid-column:1;grid-row:auto;justify-self:start} .advanced_footer .advanced_footer_item:first-child{margin-bottom:8px} .advanced_footer .copyright{margin-top:24px} .advanced_footer #social_links{margin-top:0;padding-top:0;gap:26px;flex-wrap:wrap;white-space:normal} } /* ── THE FOOTER GROUND ────────────────────────────────────── Chalk, which is the palette's stated role for footer and section grounds. The footer box is inset by the site container, so the ground is painted OUTWARD with a spread shadow and the overflow clipped back to the footer's own height. Nothing about the layout changes: no width, no margin, no position. Doing this the usual way, 100vw with negative margins, would have. margin-bottom is zeroed because the theme leaves 30px below the footer, which would show as a white strip under the ground. */ .advanced_footer{ background:#E7E6E2; box-shadow:0 0 0 100vmax #E7E6E2; clip-path:inset(0 -100vmax); border-top:0; padding:104px 0 64px; margin:120px 0 0; } /* Hairline #DFDEDC was picked against Alabaster and all but vanishes on Chalk. Stone at 22% reads, and keeps the rule inside the palette rather than inventing a new grey. */ .advanced_footer .copyright{border-top-color:rgba(95,94,87,.22)} /* ── THE ETHOS STRIP ──────────────────────────────────────── Six words drifting slowly under the hero. The markup is one block pasted into the page content:
Form...Bronze (the six, TWICE)
The six words are repeated so the loop is seamless: the track slides exactly half its own width, which lands the second set precisely where the first started. overflow:hidden is scoped to .ethos, a class that exists nowhere else, so it cannot catch any other element. */ .ethos{ overflow:hidden; margin:26px 0 76px; /* 26 above reads as 76, because the theme adds 50 there and nothing below */ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%); } .ethos-track{ display:flex; width:max-content; animation:ethos-drift 64s linear infinite; } .ethos-track span{ display:flex; align-items:center; white-space:nowrap; font-family:"EB Garamond",Georgia,serif; font-size:clamp(30px,3.6vw,58px); line-height:1.25; letter-spacing:-.01em; color:#5F5E57; padding-left:.5em; } /* the separator is the only bronze here, and it is a middle dot rather than a dash, per the brand's no-dashes rule. */ .ethos-track span::after{ content:"\00B7"; color:#876D40; margin-left:.62em; } @keyframes ethos-drift{ from{transform:translateX(0)} to{transform:translateX(-50%)} } /* anyone who has asked their machine to stop animations gets the words standing still, not a broken layout. */ @media (prefers-reduced-motion:reduce){ .ethos-track{animation:none} } /* ── THE ARTWORK RULE · 1 of 2, the record page ───────────── The hierarchy arrived inverted: the artist name at 96px and the work at 12.8px. On his own site every work is his, so the name is the quiet part and the piece is the loud one. */ .artwork_details_wrapper h1.artist, .artwork_details_wrapper h1.artist a{ font-family:"Jost",sans-serif; font-weight:300; font-size:10.4px; letter-spacing:.35em; text-transform:uppercase; color:#5F5E57; line-height:1.4; margin:0 0 26px; } /* the title takes the italic. This is the brand's one italic job, the same move as the material line. */ /* !important here for the same reason as the hero: the size and the uppercase come from the theme stylesheet, served cross origin, which we cannot outrank on specificity alone. */ .artwork_details_wrapper .subtitle, .artwork_details_wrapper .subtitle .title{ font-family:"EB Garamond",Georgia,serif !important; font-size:44px !important; font-style:italic !important; font-weight:400 !important; letter-spacing:-.01em !important; text-transform:none !important; color:#1B1B1B !important; line-height:1.08 !important; } .artwork_details_wrapper .subtitle{margin:0 0 26px} .artwork_details_wrapper .medium, .artwork_details_wrapper .dimensions, .artwork_details_wrapper .edition_details{ font-family:"EB Garamond",Georgia,serif; font-size:17px; color:#5F5E57; line-height:1.72; } .artwork_details_wrapper .price{ font-family:"EB Garamond",Georgia,serif; font-size:17px; letter-spacing:0; text-transform:none; color:#1B1B1B; } /* the enquiry form title, which was inheriting the old h2 size */ .fp_title{ font-size:20px; letter-spacing:.16em; line-height:1.3; } /* ── THE ARTWORK RULE · 2 of 2, the parallax band ─────────── THE RULE: on his own site every work is his, so the maker is never the headline. Wherever a work is labelled, the ARTIST NAME is small letterspaced capitals and the TITLE takes the italic serif at display size. Artlogic labels a work in two places and it arrived inverted in both of the ones that are ours to set. Here the type sits white over a photograph, so no colour is set: it inherits whatever the band needs. */ .hero_heading .fp_title, .hero_heading .fp_title a{ font-family:"Jost",sans-serif !important; font-weight:300 !important; font-size:10.4px !important; letter-spacing:.35em !important; text-transform:uppercase !important; line-height:1.4 !important; opacity:.82 !important; } .hero_heading .subtitle{ font-family:"EB Garamond",Georgia,serif !important; font-size:clamp(30px,3.4vw,52px) !important; font-style:italic !important; font-weight:400 !important; letter-spacing:-.01em !important; text-transform:none !important; line-height:1.12 !important; } /* ── THE SMALL PRINT ──────────────────────────────────────── The required fields note and the data protection paragraph at the foot of the enquiry form were inheriting the site's 19px body serif, so the legal text was set at the same size as the writing on the homepage and dominated the form. Scoped to .fancybox-inner, which only exists for these popups. Nothing on a normal page can be caught by it. The several class names are a deliberate belt and braces: the ones that do not exist cost nothing. */ .fancybox-inner p, .privacy_policy_form_msg, .privacy_policy_form_msg p, .privacy_policy_form_msg .asterisk, .privacy_policy_form_msg .asterisk p{ font-family:"EB Garamond",Georgia,serif !important; font-size:13px !important; line-height:1.6 !important; color:#5F5E57 !important; } /* ── THE ABOUT ARCHETYPES ─────────────────────────────────── Three blocks the About page is built from. Each is scoped to a class that exists nowhere else on the site. */ /* 1 · THE PLATE. A full bleed photograph with the page title over it. Used instead of the theme hero, because the theme hero cannot put one word in italic bronze. */ .plate{ position:relative; overflow:hidden; width:100vw; margin:0 0 76px calc(50% - 50vw); } .plate img{display:block;width:100%;height:auto} /* the scrim: deepest where the words sit, gone by two thirds up, so the photograph is barely touched above the type. */ .plate::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(20,20,19,.86) 0%, rgba(20,20,19,.50) 34%, rgba(20,20,19,.12) 64%, rgba(20,20,19,0) 100%); } .plate-text{ position:absolute; left:6vw; bottom:9%; z-index:2; display:flex; flex-direction:column; align-items:flex-start; } .plate-eyebrow{ font-family:"Jost",sans-serif; font-weight:300; font-size:10.4px; letter-spacing:.35em; text-transform:uppercase; color:#FDFDFD; opacity:.85; margin-bottom:1.9em; } .plate-title{ font-family:"EB Garamond",Georgia,serif; font-size:clamp(40px,6vw,104px); line-height:1; letter-spacing:-.015em; color:#FDFDFD; } /* GILT, not Bronze. Measured: flat Bronze #876D40 on a dark ground is 3.56:1 and fails as type. Gilt is 6.74:1. */ .plate-title em{font-style:italic;color:#C49A5E} /* 2 · THE PULL QUOTE, on Chalk, full bleed by the same paint outward trick as the footer, so no width is touched. */ .pullquote{ background:#E7E6E2; box-shadow:0 0 0 100vmax #E7E6E2; clip-path:inset(0 -100vmax); margin:96px 0; padding:104px 9vw; text-align:center; } /* the theme puts a rule and 30px of padding on every blockquote, which reads as off centre under centred type. */ /* the theme gives every blockquote width:85% and margin-left:0, from the cross origin sheet, so it sat 84px left of centre while its container was perfectly centred. Measured, not guessed: container centre 778, blockquote centre 694. */ .pullquote blockquote{ width:auto !important; margin-left:auto !important; margin-right:auto !important; border-left:0; padding-left:0; font-family:"EB Garamond",Georgia,serif; font-size:clamp(26px,3.2vw,48px); line-height:1.26; letter-spacing:-.01em; color:#1B1B1B; margin:0; } /* here the ground is light, so the accent is flat Bronze */ .pullquote em{font-style:italic;color:#876D40} .pullquote cite{ display:block; margin-top:2.4em; font-family:"Jost",sans-serif; font-weight:300; font-style:normal; font-size:10.4px; letter-spacing:.35em; text-transform:uppercase; color:#5F5E57; } /* 3 · THE TIMELINE. Four facts, bronze numerals. #content p carries 19px, which beats a plain .timeline p on specificity, so the id has to be in this selector too. */ .timeline, .facts{ display:grid; grid-template-columns:repeat(4,1fr); column-gap:48px; row-gap:56px; /* the venues row runs to two rows of four */ border-top:1px solid #DFDEDC; padding-top:56px; margin:88px 0; } .timeline .year, .facts .year{ font-family:"EB Garamond",Georgia,serif; font-size:clamp(30px,3vw,46px); line-height:1; letter-spacing:-.01em; color:#876D40; margin-bottom:.5em; } #content .timeline p, #content .facts p{ font-size:17px; line-height:1.6; color:#5F5E57; margin:0; } .arrow-link{ display:inline-block; white-space:nowrap; text-decoration:none; /* the theme underlines links; the border below IS the underline */ font-family:"Jost",sans-serif; font-weight:300; font-size:12px; letter-spacing:.25em; text-transform:uppercase; color:#1B1B1B; border-bottom:1px solid #876D40; padding-bottom:8px; } @media (max-width:820px){ .timeline{grid-template-columns:1fr 1fr;row-gap:44px;column-gap:32px} .pullquote{padding:72px 24px;margin:64px 0} .plate-text{left:24px;bottom:7%} .plate-eyebrow{margin-bottom:1.4em} } /* a full bleed photograph with no type over it. Same escape from the content column as .plate, without the scrim. */ .band{ width:100vw; margin:84px 0 84px calc(50% - 50vw); } .band img{display:block;width:100%;height:auto} /* The same four up row, in three and two column variants, so Madeleine's copy can be broken into scannable facts instead of running as a wall of paragraphs. .year carries a word as happily as it carries a date. */ .facts.three{grid-template-columns:repeat(3,1fr)} .facts.two{grid-template-columns:repeat(2,1fr);column-gap:72px} /* a quiet line that follows a facts row and closes it off */ #content p.aside{ font-size:17px; color:#5F5E57; margin:26px 0 0; } @media (max-width:820px){ .facts.three,.facts.two{grid-template-columns:1fr;row-gap:38px} } /* ── THE ABOUT PAGE IS A CENTRED COLUMN ───────────────────── Scoped to body.section-about, so no other page is touched. Two faults this fixes. The composition was incoherent, left aligned columns against a centred quote. And the measure was 1395px, which is far too long a line to read: a paragraph wants somewhere near 65 characters, not 200. max-width is set on the PARAGRAPHS, never on a container. Putting it on a container is what blanked the site once. */ body.section-about #content p{ max-width:64ch; margin-left:auto; margin-right:auto; text-align:center; } body.section-about .facts, body.section-about .timeline{text-align:center} body.section-about #content .facts p, body.section-about #content .timeline p{ max-width:32ch; margin:0 auto; } /* the label above a fact row. Without it a bronze word like "Highgrove" or "Steel" sits on the page with nothing saying what it is, which reads as decoration rather than meaning. */ .facts-label{ display:block; text-align:center; font-family:"Jost",sans-serif; font-weight:300; font-size:10.4px; letter-spacing:.35em; text-transform:uppercase; color:#5F5E57; border-top:1px solid #DFDEDC; padding-top:38px; margin:96px 0 0; } /* a labelled row gives up its own rule, so the two read as one unit rather than two stacked blocks. */ .facts-label + .facts, .facts-label + .timeline{ margin-top:44px; border-top:0; padding-top:0; } /* ── THE GHOSTED HERO ─────────────────────────────────────── Artlogic renders the hero into TWO lists: a plain