/* CSS imports ------------------- */ /* Forced mobile nav on all sizes ------------------- */ @import url('/lib/g/2.0/styles/responsive_topnav.css'); @import url('/lib/g/themes/aperture/2.0/styles/responsive_topnav.css'); /* Font imports ------------------- */ @font-face { font-family: "Diatype Medium"; src: url('/usr/documents/fonts/bold_font_woff/2/abcdiatype-medium-trial.woff') format('woff'), url('/usr/documents/fonts/bold_font_woff2/2/abcdiatype-medium-trial.woff2') format('woff2'), url('/usr/documents/fonts/bold_font_ttf/2/abcdiatype-medium-trial.ttf') format('truetype'); font-style: normal; font-weight: bold; } @font-face { font-family: "Diatype Medium"; src: url('/usr/documents/fonts/regular_font_woff/2/abcdiatype-medium-trial.woff') format('woff'), url('/usr/documents/fonts/regular_font_woff2/2/abcdiatype-medium-trial.woff2') format('woff2'), url('/usr/documents/fonts/regular_font_ttf/2/abcdiatype-medium-trial.ttf') format('truetype'); font-style: normal; font-weight: normal; } /* Background colour --------------*/ #header.header_transparent .dropdown-mask { background-color: transparent !important; } /* Feature popup colours ------------------- */ 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: #c1c1c1; } .buy_enquire_quick_view .quick-view-information { border-color: #c1c1c1; } .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: #ffffff; } /* Fonts----------------------------- */ /* Main body font ------------------- */ body, input, select, textarea { font-family: "Diatype Medium", Sans-serif; font-style:normal; font-weight:normal; } /* 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: "Diatype Medium", Sans-serif; font-style:normal; font-weight:normal; } /* Navigation font ------------------- */ #top_nav.navigation ul li a, #top_nav #full_nav .dropdown-btn { font-family: "Diatype Medium", Sans-serif; font-style:normal; font-weight:normal; } /* User custom html-font sizing ------------------- */ html { font-size: 9.5px; } /* 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.78px; } body { font-size: 0.999637155298rem; 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; } /* 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: #c1c1c1; } /* Header layout ------------------- */ /* Dynamically created grid layout css ------------------- */ /* artfairs - tile_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.tile_list.grid_dynamic_layout_artfairs ul { width: calc(25.0% - 20px) }} .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 {display:block;} .records_list.grid_dynamic_layout_artfairs ul li .image > span {position: absolute;} .records_list.grid_dynamic_layout_artfairs ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_artfairs .tile_list_formatted { margin-right: -20px; } .records_list.grid_dynamic_layout_artfairs .tile_list_formatted ul { padding-right: 20px; } } /* 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%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_instagram > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_instagram > ul > li { padding-right: 20px; } } /* artworks - tile_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.tile_list.grid_dynamic_layout_artworks ul { width: calc(25.0% - 20px) }} .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; } .records_list.grid_dynamic_layout_artworks ul li .image::after {display:block;} .records_list.grid_dynamic_layout_artworks ul li .image > span {position: absolute;} .records_list.grid_dynamic_layout_artworks ul li .image::after { padding-top:150.0%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_artworks .tile_list_formatted { margin-right: -20px; } .records_list.grid_dynamic_layout_artworks .tile_list_formatted ul { padding-right: 20px; } } /* default image grid - tile_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.tile_list.grid_dynamic_layout_default_image_grid ul { width: calc(25.0% - 20px) }} .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%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_default_image_grid .tile_list_formatted { margin-right: -20px; } .records_list.grid_dynamic_layout_default_image_grid .tile_list_formatted ul { padding-right: 20px; } } /* video - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_video:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_video ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_video ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_video ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_video ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_video ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_video ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_video > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_video > ul > li { padding-right: 20px; } } /* default grid - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_default_grid:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_default_grid ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_default_grid ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_default_grid ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_default_grid ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_default_grid ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_default_grid ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_default_grid > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_default_grid > ul > li { padding-right: 20px; } } /* artists - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artists:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_artists ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artists ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artists ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artists ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artists ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_artists ul li .image::after { padding-top:150.0%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_artists > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_artists > ul > li { padding-right: 20px; } } /* 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:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_artist_works_categories > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_artist_works_categories > ul > li { padding-right: 20px; } } /* exhibitions - tile_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.tile_list.grid_dynamic_layout_exhibitions ul { width: calc(25.0% - 20px) }} .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 {display:block;} .records_list.grid_dynamic_layout_exhibitions ul li .image > span {position: absolute;} .records_list.grid_dynamic_layout_exhibitions ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_exhibitions .tile_list_formatted { margin-right: -20px; } .records_list.grid_dynamic_layout_exhibitions .tile_list_formatted ul { padding-right: 20px; } } /* events works - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_events:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_events ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_events ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_events ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_events ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_events ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_events ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_events > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_events > ul > li { padding-right: 20px; } } /* exhibitions installation - slideshow-------------------------------------- */ @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%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_exhibitions_installation > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_exhibitions_installation > ul > li { padding-right: 20px; } } /* artist installation - slider-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artist_installation:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_artist_installation ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artist_installation ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artist_installation ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artist_installation ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artist_installation ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_artist_installation ul li .image::after { padding-top:150.0%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_artist_installation > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_artist_installation > ul > li { padding-right: 20px; } } /* 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:25.0% }} .records_list.grid_dynamic_layout_artwork_categories_landing ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artwork_categories_landing ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artwork_categories_landing ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artwork_categories_landing ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artwork_categories_landing ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_artwork_categories_landing ul li .image::after { padding-top:150.0%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_artwork_categories_landing > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_artwork_categories_landing > ul > li { padding-right: 20px; } } /* events - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_events:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_events ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_events ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_events ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_events ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_events ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_events ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_events > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_events > ul > li { padding-right: 20px; } } /* store - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_store:not(.feature_list) > ul > li { width:25.0% }} .records_list.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:flex-start; justify-content: flex-start; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_store ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_store > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_store > ul > li { padding-right: 20px; } } /* 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:25.0% }} .records_list.grid_dynamic_layout_feature_panels ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_feature_panels ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_feature_panels ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_feature_panels ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_feature_panels ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_feature_panels ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_feature_panels > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_feature_panels > ul > li { padding-right: 20px; } } /* exhibitions works - slideshow-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_exhibitions_works:not(.feature_list) > ul > li { width:25.0% }} .records_list.feature_list.grid_dynamic_layout_exhibitions_works:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_exhibitions_works:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_exhibitions_works ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_exhibitions_works ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_exhibitions_works ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_exhibitions_works > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_exhibitions_works > ul > li { padding-right: 20px; } } /* 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:25.0% }} .records_list.grid_dynamic_layout_press ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_press ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_press ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_press ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_press ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_press ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_press > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_press > ul > li { padding-right: 20px; } } /* news - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_news:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_news ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_news ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_news ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_news ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_news ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_news ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_news > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_news > ul > li { padding-right: 20px; } } /* 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:25.0% }} .records_list.grid_dynamic_layout_search ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_search ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_search ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_search ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_search ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_search ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_search > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_search > ul > li { padding-right: 20px; } } /* 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 - tile_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.tile_list.grid_dynamic_layout_viewing_rooms_works ul { width: calc(25.0% - 20px) }} .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%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_viewing_rooms_works .tile_list_formatted { margin-right: -20px; } .records_list.grid_dynamic_layout_viewing_rooms_works .tile_list_formatted ul { padding-right: 20px; } } /* 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:150.0%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_artist_works > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_artist_works > ul > li { padding-right: 20px; } } /* exhibitors - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_exhibitors:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_exhibitors ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_exhibitors ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_exhibitors ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_exhibitors ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_exhibitors ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_exhibitors ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_exhibitors > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_exhibitors > ul > li { padding-right: 20px; } } /* feature panels image grid - tile_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.tile_list.grid_dynamic_layout_feature_panels_image_grid ul { width: calc(25.0% - 20px) }} .records_list.feature_list.grid_dynamic_layout_feature_panels_image_grid:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_feature_panels_image_grid:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_feature_panels_image_grid ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_feature_panels_image_grid ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_feature_panels_image_grid ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_feature_panels_image_grid .tile_list_formatted { margin-right: -20px; } .records_list.grid_dynamic_layout_feature_panels_image_grid .tile_list_formatted ul { padding-right: 20px; } } /* publications - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_publications:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_publications ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_publications ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_publications ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_publications ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_publications ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_publications ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_publications > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_publications > ul > li { padding-right: 20px; } } /* team - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_team:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_team ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_team ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_team ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_team ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_team ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_team ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_team > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_team > ul > li { padding-right: 20px; } } /* viewing rooms - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_viewing_rooms:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_viewing_rooms ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_viewing_rooms ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_viewing_rooms ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_viewing_rooms ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_viewing_rooms ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_viewing_rooms ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_viewing_rooms > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_viewing_rooms > ul > li { padding-right: 20px; } } /* 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 .logo-variant-light { content:''; background-image:url(/usr/images/preferences/smg_logo_website-02.png)} #logo .logo-variant-dark { content:''; background-image:url(/usr/images/preferences/smg_logo_website-01.png)} /* Logo text color ------------------- */ #logo { background: none; width: 100%; min-width: 280px; max-width: 360px; } #header #logo.user-custom-logo-image::before { padding-top:4.79418886199%; } .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-smg/usr/images/preferences/smg_logo_website-01.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-smg/usr/images/preferences/smg_logo_website-01.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-smg/usr/images/preferences/smg_logo_website-01.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: #000000; } #slide_nav_reveal::after { color: #000000; } #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 ------------------- */ /* Responsive nav active / hover text color ------------------- */ /* Button text color ------------------- */ .button a, .button a:visited, .button a:hover, .button span, .button input, .buy_now_store_item_add_container>button.store_item_add_to_cart>span { color: #c1c1c1; } /* quick view button */ .buy_enquire_button button, a.buy_enquire_detail_link { color: #c1c1c1; } /* Hero section image opacity ------------------- */ .fullscreen-slide-dark .fullscreen_slideshow.hero_header_layout_center:not(.override-slide-brightness) ul li::before, .fullscreen_slideshow.hero_header_layout_center:not(.detect-slide-brightness):not(.override-slide-brightness) ul li::before, .fullscreen-slide-dark .fullscreen_slideshow.hero_header_layout_left-center:not(.override-slide-brightness) ul li::before, .fullscreen_slideshow.hero_header_layout_left-center:not(.detect-slide-brightness):not(.override-slide-brightness) ul li::before { background: rgba(0,0,0,0.1999999999999999555910790150) !important; } .fullscreen-slide-light .fullscreen_slideshow.hero_header_layout_center:not(.override-slide-brightness) ul li::before, .fullscreen-slide-light .fullscreen_slideshow.hero_header_layout_left-center:not(.override-slide-brightness) ul li::before { background: rgba(255,255,255,0.1999999999999999555910790150) !important; } /* don't show if opacity = 1 */ /* Hero section image height ------------------- */ ::root { --hero-height: 0vh } /* Home page slideshow / fullscreen video ui buttons ------------------- */ /* Hero header slideshow ui buttons ------------------- */ /* Carousel feature panel ui buttons ------------------- */ .slick-prev:before, .slick-next:before { background: #ffffff !important; } .slick-prev:before, .slick-next:before { color: #000000 !important; } @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-smg/usr/images/preferences/smg_logo_website-01.png'); } } /* Artlogic preferences custom CSS - entered by Artlogic in the preferences screen ------------------- */ /* Remove artwork dimensions from embedded PV grid captions */ div.pv-dimensions { display: none !important; } /* Handle 'interests' checkboxes floating over labels on desktop */ @media screen and (min-width: 1388px) { #artlogic_mailinglist_signup_form div.multi-field input[type=checkbox] { position: absolute; /* left: 0; */ /* top: 5px; */ left: 3rem; top: 0px } } /* Client custom user CSS - entered by the client in the preferences screen ------------------- */ /* ============================================= FONT FACE DECLARATIONS ============================================= */ @font-face { font-family: 'Romie'; src: url('https://www.sarahmyerscough.com/usr/documents/fonts/regular_font_woff2/3/romie-regular-1-.woff2') format('woff2'), url('https://www.sarahmyerscough.com/usr/documents/fonts/regular_font_woff/3/romie-regular-1-.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Romie Italic'; src: url('https://www.sarahmyerscough.com/usr/documents/fonts/regular_font_woff2/4/romie-regular-italic-1-.woff2') format('woff2'), url('https://www.sarahmyerscough.com/usr/documents/fonts/regular_font_woff/4/romie-regular-italic-1-.woff') format('woff'); font-weight: 400; font-style: italic; } /* RomieBrand: italic variant for G/g, roman for everything else */ @font-face { font-family: 'RomieBrand'; src: url('https://www.sarahmyerscough.com/usr/documents/fonts/regular_font_woff2/4/romie-regular-italic-1-.woff2') format('woff2'), url('https://www.sarahmyerscough.com/usr/documents/fonts/regular_font_woff/4/romie-regular-italic-1-.woff') format('woff'); font-weight: 400; font-style: normal; unicode-range: U+0047, U+0067; } @font-face { font-family: 'RomieBrand'; src: url('https://www.sarahmyerscough.com/usr/documents/fonts/regular_font_woff2/3/romie-regular-1-.woff2') format('woff2'), url('https://www.sarahmyerscough.com/usr/documents/fonts/regular_font_woff/3/romie-regular-1-.woff') format('woff'); font-weight: 400; font-style: normal; unicode-range: U+0000-0046, U+0048-0066, U+0068-FFFF; } /* ============================================= GENERAL TYPOGRAPHY ============================================= */ * { letter-spacing: 0.5px !important; line-height: 120% !important; } /* Base heading sizes — overridden per-context below */ h1, .h1_heading { font-size: 2.2rem !important; } /* was 1.6rem, before that 1.3rem — Diatype (no font-family override here, so this is the size for ANY plain h1/.h1_heading with no dedicated Romie rule — Artworks, Artists, Cabinet category pages, contact, and any future generic page type). Artist/exhibition/fair headers stay untouched: their own more specific selectors below (.artist-header h1, .exhibition-header h1_heading) win on specificity regardless of what this base value is set to. */ h2, .subheading { font-size: 1.0rem !important; } h3, h4, h5, h6 { font-size: 1.0rem !important; } /* Pull quote */ .pull_quote_content blockquote, .pull_quote_content blockquote.prose, .pull_quote_content p { font-size: 0.9rem !important; } /* ============================================= GLOBAL PAGE PADDING REDUCTION ============================================= */ /* Override Artlogic's min-height on #content which causes blank space on short pages */ #content { min-height: 0 !important; } .heading_wrapper, .cascading-page-header, .artworks-header, .artists-header { margin-bottom: 15px !important; margin-top: 0 !important; padding-bottom: 0 !important; } .subheading, #subheading_galleryartists, .panel_header { margin-bottom: 15px !important; margin-top: 15px !important; padding-top: 1px !important; padding-bottom: 1px !important; } /* "Upcoming Solo Exhibition" and similar panel_header titles — confirmed via inspector these inherit the shared h2 font-size (1.0rem) from the global rule above. Sized up specifically here, with padding-bottom zeroed on .panel_header itself (the 1px shared value above was negligible but non-zero). Scoped to .panel_header h2 so this doesn't touch h2 elsewhere that shares the base rule. */ .panel_header { padding-bottom: 0 !important; margin-bottom: 0 !important; } .panel_header h2 { font-size: 1.2rem !important; } /* ============================================= SECTION TITLE SUBHEADINGS — e.g. "Gallery Artists" / "Invited Artists" on the Artists page, "Works" on artist pages Confirmed via inspector: .subheading is display:flex, with the title as one flex item and Artlogic's own ::after pseudo-element (border-top:1px solid #eee, flex-grow:1) as the second — that's the grey "line", and flex-row was placing it BESIDE the title text, not above or below it. That's why a margin-top fix on the span alone couldn't work: the line was never stacked above the text to begin with. Switched to flex-direction:column so the line drops below the title instead of running alongside it. The ::after needs an explicit width once in a column, since flex-grow only stretches along the row's main axis, which no longer applies once the axis is vertical. ============================================= */ .subheading { flex-direction: column-reverse !important; /* was column — text (first in DOM) was landing on top, line (::after, second in DOM) below it. column-reverse flips the visual stack without touching DOM order, so the line renders first/top and the title sits below it */ align-items: flex-start !important; } .subheading span { font-size: 1.2rem !important; /* was 1.6rem — too large against the page title, sized down */ margin-top: 10px !important; /* was margin-bottom — space now needed above the title, since it's below the line rather than above it */ display: inline-block !important; } .subheading::after { width: 100% !important; /* flex-grow no longer creates width once the axis is vertical — set explicitly instead */ } .records_list { margin-top: 0 !important; padding-top: 0 !important; } .feature_panels { margin-top: 40px !important; padding-top: 0 !important; } .records_list ul li, .image_list ul li, .artist_list ul li { margin-bottom: 15px !important; padding-bottom: 0 !important; } /* ============================================= CONTENT BLOCK PADDING Applies to caption/text blocks beneath images in records lists, feature panels, and full-width panel_type_8 image panels. NOTE: the panel_type_8.feature_variant_1 overlay block (further down this file, under "GLOBAL FULL-WIDTH IMAGE PANEL — TEXT OVERLAY") deliberately overrides this padding back up to 40px on that specific variant. That's intentional — the overlay needs breathing room from the image edge — not a bug. Leave this rule as-is for every other panel_type_8 use. ============================================= */ /* Overrides Artlogic's own base rule (main.css) which sets 20px margin-bottom on every records list image by default. Was tested at 5px (too tight against the name below), moved back up to 10px — global, shared by artworks/artist/category grids, works alongside the h2 padding-top:2px below it. */ .records_list ul li .image { margin-bottom: 10px !important; } /* Zero padding on records list captions and full-width image panels only — NOT on text/ adjacent content panels (panel_type_4 etc.) which need their own internal padding */ .records_list li .content, li.panel_type_8 .content { padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Restore left padding for feature/grid layouts (publications, exhibitions) */ .records_list.feature_list ul li .content { padding-left: 24px !important; } /* ============================================= FEATURE PANELS — INNER SPACING & GUTTERS Removes Artlogic's default 60px bottom margin and 60px side padding that cause gaps around full-width image panels site-wide. ============================================= */ .feature_panels_inner.clearwithin { margin-bottom: 15px !important; } /* Remove side padding only on full-width image panels, not on records grids which need the page gutter */ .feature_panels_inner.clearwithin ul li.panel_type_8 { padding-left: 0 !important; padding-right: 0 !important; } /* Remove bottom margin between panel_type_8 and the next panel (e.g. the records grid) */ .feature_panels_inner.clearwithin ul li.panel_type_8 { margin-bottom: 15px !important; padding-bottom: 0 !important; } /* Hero autoplay video panel — Artlogic's own native margin-bottom (layout.css:7589, confirmed via inspector) is 60px; reduced to 45px. */ .feature_panels .panel_hero { margin-bottom: 45px !important; } /* Text panel (bio + Read more button) — inherits its 60px margin-bottom from the generic .feature_panels_inner>ul>li rule (layout.css:7507, confirmed via inspector), which every panel type shares. Scoped to panel_type_11 specifically so this doesn't also pull in the Works grid or other panel types riding on that same shared 60px default. */ .feature_panels_inner.clearwithin ul li.panel_type_11 { margin-bottom: 45px !important; } /* ============================================= FEATURE PANEL DIVIDERS Thin grey line between every panel, every page — independent of Artlogic's own .divider element (hidden globally below), so this is fully within our control rather than depending on whatever was drawing the line before "Works" previously. :not(:first-child) so the very first panel on a page (often the hero) doesn't get a line above it with nothing before it to separate from. ============================================= */ .feature_panels_inner.clearwithin > ul > li.panel:not(:first-child) { border-top: 1px solid #ddd !important; padding-top: 30px !important; /* breathing room below the line — estimate, tune if too tight/loose */ } /* ============================================= DIVIDERS Artlogic inserts .divider elements between sections, adding unwanted vertical space. ============================================= */ #content > .divider, .feature_panels + .divider { display: none !important; } /* ============================================= GLOBAL LISTING TITLES Covers all records lists and feature panels (exhibitions, artists, artworks, fairs, publications, etc.) and full-width panels. NOTE: this already covers ALL panel_type_8 instances, including feature_variant_1 — the overlay block further down does NOT repeat these rules, it only adds position/colour/sizing on top. ============================================= */ .records_list .content, li.panel_type_8 .content { display: flex; flex-direction: column; gap: 1px; } /* H2 title — Romie uppercase */ .records_list .content h2, li.panel_type_8 .content h2 { font-family: 'RomieBrand', 'Romie', serif !important; font-size: 1.4rem !important; /* was 1.7rem — also affects panel_type_8 overlay captions, which inherit this size */ text-transform: uppercase !important; font-weight: 400 !important; font-feature-settings: 'ss01' on, 'ss14' on, 'case' on, 'liga' on !important; padding-top: 2px !important; /* was 10px — reduced along with the image's own margin-bottom above, since both were stacking to create the gap between image and name */ padding-bottom: 5px !important; margin-bottom: 0 !important; } /* Subtitle — Diatype Medium */ .records_list .content span.subtitle, li.panel_type_8 .content span.subtitle { font-family: 'Diatype Medium', sans-serif !important; font-size: 1.0rem !important; font-feature-settings: normal !important; display: block !important; margin: 0 !important; padding: 0 !important; } /* Date — Diatype Medium Unified to match subtitle (1.0rem) — was 1.1rem in the original rule, the one confirmed size mismatch in an otherwise consistent date/subtitle pairing sitewide. */ .records_list .content span.date, li.panel_type_8 .content span.date { font-family: 'Diatype Medium', sans-serif !important; font-size: 1.0rem !important; font-feature-settings: normal !important; display: block !important; } /* ============================================= INDIVIDUAL ARTWORK TILES — title / medium / artist Confirmed via inspector: this is a different grid variant (.records_list.grid_dynamic_layout_artworks — individual artwork listing with an Enquire button) from the category/ artist grid styled above, which uses

for the name. This one uses plain divs (.title_and_year, .medium, .artist) styled entirely by Artlogic's own defaults — nothing above touches it, which is why .artist was rendering larger/bolder than the other two lines with no rule of ours responsible. Standardised to one size/weight across all three lines, and the artist name's own trailing space removed so the Enquire button sits closer beneath it. font-size value is an estimate matched to the general body-text scale used elsewhere (not measured against the exact previous .artist size) — check against the live page and adjust if it reads too small/large next to the images. ============================================= */ .records_list .content .title_and_year, .records_list .content .medium, .records_list .content .artist { font-size: 1rem !important; font-weight: 400 !important; margin: 0 !important; padding: 0 !important; } .records_list .enquire_button_container { margin-top: 8px !important; /* estimate — tightens the gap below the artist name, check against live spacing */ } /* ============================================= HOMEPAGE SLIDESHOW CAPTION ============================================= */ /* Slideshow h2 — controls gap to span.date below */ #slideshow.fullscreen_slideshow h2 { margin-bottom: 2px !important; margin-top: 0 !important; } /* Large title link */ #slideshow.fullscreen_slideshow h2 a { font-family: 'RomieBrand', 'Romie', serif !important; font-size: 51px !important; text-transform: uppercase !important; font-weight: 400 !important; letter-spacing: 0.02em !important; font-feature-settings: 'ss01' on, 'ss14' on, 'case' on, 'liga' on !important; display: block !important; } /* Hide the colon separator between title and subtitle */ #slideshow.fullscreen_slideshow h2 .separator { display: none !important; } /* Date range inside h2 */ #slideshow.fullscreen_slideshow h2 .h1_subtitle { font-family: 'Diatype Medium', sans-serif !important; font-size: 1.3rem !important; text-transform: none !important; font-weight: 400 !important; letter-spacing: 0.5px !important; font-feature-settings: normal !important; display: block !important; margin-top: 4px !important; } /* Status label e.g. "Opening next week" */ #slideshow.fullscreen_slideshow span.date { font-family: 'Diatype Medium', sans-serif !important; font-size: 1.3rem !important; font-feature-settings: normal !important; display: block !important; margin-top: 0 !important; } /* ============================================= BUTTONS ============================================= */ .button, .button_compact, .enquiry-button, input[type="submit"], button.submit_button { background-color: white !important; border: 1px solid black !important; color: black !important; text-transform: uppercase; letter-spacing: 0.5px !important; padding: 8px 16px; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; } /* Covers the case of class="button" applied directly to a hand-typed inside CMS description text (e.g. "Back To Artworks" on category pages) — not just the wrapping-div pattern Artlogic's own button fields use elsewhere. Carries no spacing of its own — spacing above/ below is controlled manually per instance with a typed
in the CMS text field, not by this rule. */ a.button { display: inline-block !important; text-decoration: none !important; } .button a, .button_compact a, .enquiry-button a { color: black !important; text-decoration: none; } .button:hover, .button_compact:hover, .enquiry-button:hover, input[type="submit"]:hover, button.submit_button:hover { background-color: black !important; color: white !important; } .button a:hover, .enquiry-button a:hover { color: white !important; } /* ============================================= FOOTER ============================================= */ #footer { border-top: none; } /* Footer columns — equal spacing across one row */ #footer .inner { display: block !important; } #footer .advanced_footer_item { display: inline-block !important; vertical-align: top !important; width: calc(25% - 20px) !important; padding: 0 !important; margin: 0 10px 0 0 !important; } #footer .advanced_footer_item p { margin: 0 0 4px !important; font-size: 0.9rem !important; } /* Tablet — two columns */ @media screen and (max-width: 768px) { #footer .advanced_footer_item { width: calc(50% - 20px) !important; margin-bottom: 24px !important; } } /* Mobile — full stack */ @media screen and (max-width: 480px) { #footer .advanced_footer_item { width: 100% !important; margin: 0 0 24px !important; } } /* ============================================= MAILING LIST — FOOTER FORM (EDITORIAL STYLE) Scoped to #mailinglist_form to avoid affecting the popup version of the same form. ============================================= */ #mailinglist_form { padding: 40px 0 !important; border-top: 1px solid black !important; margin-bottom: 40px !important; } #mailinglist_form h2 { font-size: 1.0rem !important; font-weight: 400 !important; margin-bottom: 24px !important; margin-top: 0 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } /* Form — single horizontal row, wraps gracefully */ #mailinglist_form #artlogic_mailinglist_signup_form { display: flex !important; flex-wrap: wrap !important; align-items: flex-end !important; gap: 0 32px !important; } /* Each field */ #mailinglist_form .form_row { display: flex !important; flex-direction: column !important; flex: 1 1 160px !important; min-width: 120px !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Labels */ #mailinglist_form .form_row label { font-size: 0.7rem !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-bottom: 6px !important; color: black !important; font-weight: 400 !important; } /* Bottom-border-only inputs */ #mailinglist_form .form_row input { border: none !important; border-bottom: 1px solid black !important; border-radius: 0 !important; background: transparent !important; padding: 4px 0 8px !important; font-size: 0.9rem !important; outline: none !important; width: 100% !important; letter-spacing: 0.5px !important; box-shadow: none !important; } #mailinglist_form .form_row input:focus { border-bottom: 1px solid black !important; outline: none !important; box-shadow: none !important; } /* Submit button */ #mailinglist_form #mailing_submit_button { flex: 0 0 auto !important; margin-bottom: 0 !important; padding-bottom: 0 !important; display: flex !important; align-items: flex-end !important; } /* Full-width elements */ #mailinglist_form #email_warning, #mailinglist_form .error { width: 100% !important; flex-basis: 100% !important; } /* Privacy text */ #mailinglist_form #privacy_policy_form_msg { flex-basis: 100% !important; margin-top: 16px !important; } #mailinglist_form #privacy_policy_form_msg p, #mailinglist_form #privacy_policy_form_msg .asterisk p { font-size: 0.7rem !important; color: #666 !important; margin: 0 0 4px !important; } /* Tablet — two fields per row */ @media screen and (max-width: 900px) { #mailinglist_form .form_row { flex: 1 1 calc(50% - 32px) !important; } #mailinglist_form #mailing_submit_button { flex: 1 1 100% !important; margin-top: 24px !important; } } /* Mobile — full stack */ @media screen and (max-width: 560px) { #mailinglist_form #artlogic_mailinglist_signup_form { flex-direction: column !important; gap: 20px !important; } #mailinglist_form .form_row { flex: 1 1 100% !important; min-width: 100% !important; } #mailinglist_form #mailing_submit_button { flex: 1 1 100% !important; margin-top: 8px !important; } } /* ============================================= MAILING LIST POPUP Clean, minimal — white background, no radius, matches site typography. ============================================= */ #mailing_list_popup_container { z-index: 9000 !important; } #mailing_list_popup_overlay { background: rgba(0, 0, 0, 0.4) !important; } #mailing_list_popup_box { background: white !important; border-radius: 0 !important; padding: 48px !important; max-width: 480px !important; width: 90vw !important; box-shadow: none !important; border: 1px solid black !important; overflow-y: auto !important; max-height: 90vh !important; } #mailing_list_popup_box h2 { font-size: 1.0rem !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-bottom: 32px !important; margin-top: 0 !important; } /* Close button */ #mailinglist_signup_close_popup_link a { font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: black !important; text-decoration: none !important; } /* Popup fields — stacked, same bottom-border style */ #mailing_list_popup_box .form_row { display: flex !important; flex-direction: column !important; margin-bottom: 20px !important; } #mailing_list_popup_box .form_row label { font-size: 0.7rem !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-bottom: 6px !important; color: black !important; } #mailing_list_popup_box .form_row input { border: none !important; border-bottom: 1px solid black !important; border-radius: 0 !important; background: transparent !important; padding: 4px 0 8px !important; font-size: 0.9rem !important; outline: none !important; box-shadow: none !important; letter-spacing: 0.5px !important; } #mailing_list_popup_box #mailing_submit_button { margin-top: 8px !important; } #mailing_list_popup_box #privacy_policy_form_msg p, #mailing_list_popup_box #privacy_policy_form_msg .asterisk p { font-size: 0.7rem !important; color: #666 !important; margin: 0 0 4px !important; } /* ============================================= COOKIE NOTIFICATION BAR Clean strip — matches site typography, no generic browser-default styling. ============================================= */ #cookie_notification { background: white !important; border-top: 1px solid black !important; padding: 16px 24px !important; font-size: 0.8rem !important; letter-spacing: 0.5px !important; } #cookie_notification .inner { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 12px 24px !important; } #cookie_notification_message { flex: 1 1 300px !important; } #cookie_notification_message p { font-size: 0.8rem !important; margin: 0 !important; line-height: 140% !important; } #cookie_notification_message strong { font-weight: 400 !important; text-transform: uppercase !important; } #cookie_notification_preferences, #cookie_notification_reject, #cookie_notification_accept { flex: 0 0 auto !important; } #cookie_notification_preferences a { font-size: 0.8rem !important; text-transform: none !important; letter-spacing: 0.5px !important; color: black !important; text-decoration: underline !important; } /* Cookie bar buttons — smaller, sentence case */ #cookie_notification_reject .button a, #cookie_notification_accept .button a, #cookie_notification_reject, #cookie_notification_accept { font-size: 0.75rem !important; text-transform: none !important; padding: 5px 12px !important; letter-spacing: 0.5px !important; } /* Mobile cookie bar */ @media screen and (max-width: 560px) { #cookie_notification .inner { flex-direction: column !important; align-items: flex-start !important; } #mailing_submit_button { flex: 1 1 100% !important; margin-top: 8px !important; } } /* ============================================= IMAGE/TEXT ADJACENT PANELS — HEADING STYLE e.g. "The Schoolhouse" on contact page. Targets h2.fp_title inside slider-content (panel_type_4 image+text panels). ============================================= */ .slider-content h2.fp_title { font-family: 'RomieBrand', 'Romie', serif !important; font-size: 1.7rem !important; text-transform: uppercase !important; font-weight: 400 !important; font-feature-settings: 'ss01' on, 'ss14' on, 'case' on, 'liga' on !important; margin-top: 0 !important; margin-bottom: 8px !important; } /* ============================================= IMAGE CAROUSELS — REDUCED SLIDE PADDING Artlogic's slick slider defaults to 30px left/right on each slide item. Halved to 15px. ============================================= */ .slick-list { margin-left: -15px !important; margin-right: -15px !important; } .slick-slide, .ig_slider .slick-slide, .item.slick-slide { padding-left: 15px !important; padding-right: 15px !important; } /* ============================================= EXHIBITION PAGE — PRIVATE VIEW ============================================= */ div.pv_content_above { display: none !important; } /* =============================================================== =============================================================== NEW ADDITIONS BELOW — TEXT PANEL TYPOGRAPHY (panel_type_11) Everything from here down is new. Typography only — no display/flex/grid changes, since Artlogic already handles the Text Panel's column layout itself via float (confirmed via inspector: .panel_image_text_columns .content). =============================================================== =============================================================== */ /* ----------------------------------------------- TITLE — Romie, uppercase Scoped to panel_type_11 only — deliberately NOT combined with the existing .slider-content h2.fp_title rule above (1.5rem), which stays untouched. ----------------------------------------------- */ li.panel_type_11 h2.fp_title { font-family: 'RomieBrand', 'Romie', serif !important; font-size: 2.2rem !important; text-transform: uppercase !important; font-weight: 400 !important; font-feature-settings: 'ss01' on, 'ss14' on, 'case' on, 'liga' on !important; margin-bottom: 12px !important; } /* ----------------------------------------------- BODY COPY — right-hand content Confirmed via inspector on Eleanor Lakelin page (.content_full.prose) AND Arko's page, which uses a different Artlogic layout variant for the same component — .content_columns.prose. Both selectors included so this doesn't silently miss whichever variant a given artist record happens to use. letter-spacing set to 0.5px per sitewide Diatype standard — NOTE: this was 'normal' (0) until the previous fix, chosen specifically to match this paragraph against the InDesign mockup exactly. If the mockup comparison still looks off after this change, that's the tension to resolve: 0.5px sitewide vs true-zero tracking for this one block. ----------------------------------------------- */ .panel_image_text_columns .content .content_full.prose p, .panel_image_text_columns .content .content_columns.prose p { font-size: 1rem !important; line-height: 132% !important; margin-bottom: 10px !important; letter-spacing: 0.5px !important; } .panel_image_text_columns .content .read_more_link.link a { display: inline-block !important; background-color: white !important; border: 1px solid black !important; color: black !important; letter-spacing: 0.5px !important; padding: 8px 16px !important; font-family: 'Diatype Medium', sans-serif !important; font-size: 0.9rem !important; text-decoration: none !important; cursor: pointer !important; transition: all 0.3s ease !important; } .panel_image_text_columns .content .read_more_link.link a:hover { background-color: black !important; color: white !important; } /* Narrow the column to an editorial reading measure, still floated right per Artlogic's own layout. Scoped to min-width:769px ONLY — Artlogic's existing mobile stacking behaviour for this component hasn't been inspected, so this rule simply never reaches that breakpoint rather than guessing at a replacement. */ @media screen and (min-width: 769px) { .panel_image_text_columns .content { width: 58% !important; max-width: 820px !important; } /* Vertical alignment with title top — scoped per page type AND to panel_number_1 only. Confirmed problem: .panel_image_text_columns .content matches EVERY Text Panel on a page, not just the one under the title — a second Text Panel further down a page (e.g. an essay panel) was getting pulled up by the same amount and overlapping content above it. panel_number_1 is an Artlogic-assigned class unique to the first panel in the list, confirmed via DOM. These use margin-top safely because Artlogic's own .content here is floated right — floats establish their own block formatting context, which is what stops the negative margin collapsing upward into the panel above. See the Artworks landing page rule further down for a case where that protection wasn't present and margin-top had to be replaced with position:relative/top instead. */ /* EXHIBITIONS — confirmed working at this value */ body.page-exhibitions .panel_number_1.panel_image_text_columns .content { margin-top: -125px !important; } /* Left column (buttons/metadata) — same idea as above, but smaller pull-up. This column doesn't need to align with the title top like body copy does; it just needs to close the excess gap left by the site's existing 40px .feature_panels top margin plus the header's own height. Estimate — check and adjust. */ body.page-exhibitions .panel_number_1.panel_image_text_columns .pull_quote_content { margin-top: -20px !important; } /* ARTISTS — calculated estimate, see note above */ body.page-artists .panel_number_1.panel_image_text_columns .content { margin-top: -91px !important; /* was -86px — lifted 5px further to align with heading */ } } /* ============================================= SUB-NAV BAR — hidden site-wide Confirmed shared id="sub_nav" across both artist pages (class="artists_nav navigation...") and exhibition pages (class="navigation..."), so one rule covers both. Pure display:none — safe, since this is a self-contained nav component; hiding it simply lets whatever follows sit higher, no structural risk to surrounding layout. ============================================= */ #sub_nav { display: none !important; } /* ============================================= PULL QUOTE FIELD — de-italicise, strip blockquote semantics Confirmed via DevTools:
inside
. font-size intentionally left alone here — the existing .pull_quote_content p rule above (0.9rem) already covers it; no need to restate. ============================================= */ .pull_quote_content blockquote.prose { font-style: normal !important; border-left: none !important; quotes: none !important; } .pull_quote_content blockquote.prose p { line-height: 130% !important; } /* Hide empty spacer paragraphs (

) — font-size:0 is a safer way to collapse these than display:none, since it can't affect surrounding flow */ .pull_quote_content blockquote.prose p:empty { font-size: 0 !important; line-height: 0 !important; margin: 0 !important; } /* ============================================= EXHIBITION HEADER — title / artist name / date Font styling only — colon stays visible, title and subtitle stay inline on one line for now. Stacking layout to be revisited separately, once confirmed safe against .exhibition-header's existing structure. Also covers ART FAIR pages (.event-header) — confirmed via inspector: same h1.has_subtitle > span.h1_heading structure, just a different wrapper class. The .subtitle_date rule may need re-checking against a fair page specifically — only h1_heading and the wrapper were confirmed directly; the date markup wasn't inspected yet. ============================================= */ .exhibition-header h1.has_subtitle .h1_heading, .event-header h1.has_subtitle .h1_heading { font-family: 'RomieBrand', 'Romie', serif !important; font-size: 2.2rem !important; text-transform: uppercase !important; font-weight: 400 !important; font-feature-settings: 'ss01' on, 'ss14' on, 'case' on, 'liga' on !important; margin-bottom: 4px !important; } .exhibition-header h1.has_subtitle .h1_subtitle, .event-header h1.has_subtitle .h1_subtitle { font-family: 'Diatype Medium', sans-serif !important; font-size: 1.1rem !important; text-transform: none !important; font-weight: 400 !important; letter-spacing: 0.5px !important; font-feature-settings: normal !important; margin-top: 2px !important; } .exhibition-header .subtitle.has_subnav, .event-header .subtitle.has_subnav, .event-header .width-subtitle.has_subnav { display: block !important; float: none !important; clear: both !important; } .exhibition-header .subtitle_date, .event-header .subtitle_date { font-family: 'Diatype Medium', sans-serif !important; font-size: 1.1rem !important; font-feature-settings: normal !important; display: block !important; float: none !important; margin-top: 16px !important; } /* Art fair pages only — date sits closer to the title here than on exhibitions, per request */ .event-header .subtitle_date { margin-top: 0 !important; } /* ============================================= ARTIST HEADER — title Font styling only. Structure confirmed: div.h1_wrapper containing plain text, no subtitle/separator spans (unlike exhibitions). ============================================= */ .artist-header .h1_wrapper h1.has_subnav { font-family: 'RomieBrand', 'Romie', serif !important; font-size: 3.0rem !important; /* was 3.5rem */ text-transform: uppercase !important; font-weight: 400 !important; font-feature-settings: 'ss01' on, 'ss14' on, 'case' on, 'liga' on !important; padding-top: 5px !important; /* new — requested for non-hero (no autoplay) artist pages */ } /* ============================================= .cms_button — bring in line with existing .button style. Font/colour only. Confirmed via DevTools: on exhibition pages the class sits directly on the ("EXPLORE ARTIST"); on artist pages it sometimes wraps the in a instead ("Download CV"). Both cases handled below, mirroring the existing .button / .button a split already used elsewhere in this stylesheet. ============================================= */ .cms_button, .cms_button:visited { background-color: white !important; border: 1px solid black !important; border-radius: 0 !important; color: black !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 8px 16px !important; font-size: 0.9rem !important; text-decoration: none !important; cursor: pointer !important; transition: all 0.3s ease !important; display: inline-block !important; /* was a bare inline — padding/border on an inline element don't reserve line-box height, so with the sitewide tight 120% line-height the top/bottom edges were overlapping neighbouring lines instead of rendering cleanly */ line-height: normal !important; /* overrides the global 120% specifically inside the button, so its own text sits centred rather than compressed */ } .cms_button:hover { background-color: black !important; color: white !important; } .cms_button a, .cms_button a:visited { color: black !important; text-decoration: none !important; } .cms_button:hover a { color: white !important; } /* ============================================= ARTIST NAME UNDER WORKS — hidden on artist pages only (redundant when already on that artist's own page); stays visible everywhere else (exhibition Works grids, homepage, etc.) ============================================= */ body.page-artists .records_list .content .artist { display: none !important; } /* ============================================= BUTTONS — never uppercase, always as typed Overrides text-transform on every button variant site-wide, including Artlogic's own auto-caps behaviour on .cms_button. Text renders exactly as written in the CMS (e.g. "Catalogue Essay"), whatever capitalisation was typed. ============================================= */ .button, .button_compact, .enquiry-button, input[type="submit"], button.submit_button, .cms_button, .panel_image_text_columns .content .read_more_link.link a { text-transform: none !important; padding: 5px 9px !important; font-size: 0.95rem !important; } /* ============================================= BUTTON ARROW ICON Adds a small right-pointing arrow before the text on button variants that don't already have one, per the InDesign mockup ("→ Download CV", "→ View available works" etc.) — applied via ::before so it shows automatically without retyping it into every CMS field. Deliberately does NOT include .button_compact or .enquiry-button — confirmed via inspector these already render Artlogic's own native trailing arrow (visible after the "Enquire" text). Adding a second arrow via ::before there collided with it, especially on hover — the text was vanishing and the arrow ending up mispositioned in the corner. If those need an arrow, it should replace/restyle Artlogic's existing one rather than stack another on top. ============================================= */ .button::before, .cms_button::before, a.button::before, .panel_image_text_columns .content .read_more_link.link a::before { content: "→" !important; margin-right: 6px !important; display: inline-block !important; } /* Enquire button (.button_compact / .enquiry-button) — Artlogic's own arrow icon sits after the text in the DOM, rendering on the right ("Enquire →"). The mockup wants it on the left ("→ Enquire"), matching every other button on the site. Rather than adding a second arrow (which caused the earlier hover conflict), this flips the VISUAL order of the existing text+icon via flex-reverse, leaving Artlogic's icon markup/mechanism completely untouched. */ .button_compact, .enquiry-button { display: inline-flex !important; flex-direction: row-reverse !important; align-items: center !important; justify-content: center !important; gap: 6px !important; } /* Breathing room above and between stacked buttons in the Pull Quote (e.g. "Exhibition Catalogue" / "Press Release") — restores spacing lost when the empty spacer paragraphs (

) were collapsed earlier. Scoped to .cms_button specifically since Enquire/Add buttons elsewhere don't need this gap. Padding/font-size here also override the shared rule above on purpose — "Enquire" needed to shrink, but these header buttons (Exhibition Catalogue, Press Release, Read more) are a different context and match the mockup better at a larger size. */ .cms_button, .panel_image_text_columns .content .read_more_link.link a { margin-top: 7px !important; padding: 7px 15px !important; font-size: 0.85rem !important; } /* ============================================= GALLERY ARTIST HERO OVERLAY Confirmed via inspector: the Hero panel's own Heading field renders as span.hero_heading > h2.fp_title, flex-centered by Artlogic's default. When this field is populated (gallery-artist pages), we hide the separate page-title name so it doesn't show twice — invited artists never populate this field, so their normal page title is untouched. ⚠️ Genuinely risky rule — uses :has() plus a content check, in a global stylesheet, on every artist page at once. Test Eleanor Lakelin (hero populated) AND Patrick Bongoy (not populated) after every change here. This is a DIFFERENT component to the panel_type_8 overlay below — no selector overlap, but same visual idea (white text over image). Worth keeping their values (font-size, left padding) in sync by eye if the design language for one changes. ============================================= */ /* Hide the whole header container, not just the name — its own margin/padding was left behind even with the name hidden, adding to the gap above the hero panel. */ body:has(.hero_heading:not(:empty)) .artist-header.heading_wrapper { display: none !important; } /* Reduce the gap above the hero panel now that the header above it is fully removed on these pages. */ body.page-artists:has(.hero_heading:not(:empty)) .feature_panels { margin-top: 0 !important; } /* Reposition the overlaid name from Artlogic's default center to top-left, matching where the page title sits on every other page type. */ body:has(.hero_heading:not(:empty)) .hero_heading { align-items: flex-start !important; justify-content: flex-start !important; padding-top: 40px !important; padding-left: 80px !important; /* was 150px */ } /* Same size/weight/case as the normal page-title style used elsewhere (.artist-header h1, .exhibition-header h1_heading) — consistency across page types. */ .hero_heading .fp_title { font-family: 'RomieBrand', 'Romie', serif !important; font-size: 3.5rem !important; /* was 4.4rem — dialed back */ text-transform: uppercase !important; font-weight: 400 !important; color: white !important; text-align: left !important; margin: 0 !important; } /* ============================================= GLOBAL FULL-WIDTH IMAGE PANEL — TEXT OVERLAY Targets li.panel_type_8.feature_variant_1 Confirmed via inspector: this is the panel behind both autofilled records (e.g. exhibitions autofill, "Intimations") and manually-typed Override Content — both cases share the same /.image/.content structure, so one rule covers every use, and every panel stays clickable through to its linked record. Deliberately does NOT repeat the h2/subtitle/date font rules already set under "GLOBAL LISTING TITLES" above — those already apply to every panel_type_8, including this variant, at matching values. This block only adds what's new: position, fixed image height, white text, and padding override. Text colour: always white, no gradient, no blend mode, per instruction. This means contrast depends entirely on the uploaded image — pale/light images will make the caption hard to read in places. That's an accepted editorial constraint, not a CSS problem to solve here. ============================================= */ li.panel.panel_type_8.feature_variant_1 { position: relative !important; cursor: pointer !important; overflow: hidden !important; /* stops overflowing .content bleeding into panels above/below */ } /* Lock the image to a consistent thin/narrow ratio. This also fixes the panel's height, which is what was collapsing to near-zero under the old absolute- positioned .content and letting the footer/signup ride up over it. */ li.panel.panel_type_8.feature_variant_1 > .image { position: relative !important; display: block !important; width: 100% !important; height: auto !important; padding-bottom: 0 !important; /* cancels Artlogic's inline lazyload aspect-ratio spacer, if present, so aspect-ratio below is the only sizing mechanism */ aspect-ratio: 21 / 2 !important; overflow: hidden !important; } /* Every wrapping layer between .image and the itself (span > a > span.object-fit-container) needs to fill the fixed-ratio box, or the ratio on .image has nothing to constrain visually. */ li.panel.panel_type_8.feature_variant_1 > .image > span, li.panel.panel_type_8.feature_variant_1 > .image .object-fit-container { display: block !important; width: 100% !important; height: 100% !important; } /* object-fit only affects the itself, not the wrapping span — targeting img.object-fit-contain directly (previous version mistakenly targeted the container, which did nothing). */ li.panel.panel_type_8.feature_variant_1 > .image img.object-fit-contain { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* Stretch the existing to cover the full panel — one link, no duplicate, no JS. */ li.panel.panel_type_8.feature_variant_1 .image a { position: absolute !important; inset: 0 !important; z-index: 1 !important; } /* Overlay the caption, bottom-left, uniformly. Overrides the sitewide panel_type_8 padding (0/8px/0/0 set under "CONTENT BLOCK PADDING" above) intentionally — this variant needs breathing room from the image edge. */ li.panel.panel_type_8.feature_variant_1 > .content { position: absolute !important; left: 0 !important; bottom: 30px !important; /* was 0 — lifted so the block sits higher, matching requested ~90px position */ z-index: 2 !important; width: 100% !important; padding: 0 40px 0 40px !important; /* was 15px */ pointer-events: none !important; /* clicks pass through to the stretched link above */ text-align: left !important; } /* Kills Artlogic's default 15px margin-bottom on subtitle/date (layout.css) — that gap was never coming from our stylesheet. */ li.panel.panel_type_8.feature_variant_1 > .content span.subtitle, li.panel.panel_type_8.feature_variant_1 > .content span.date { margin: 0 !important; } /* Space below the heading. min-height reserves the heading's line even when it's empty (e.g. when the title is baked into the uploaded image itself, like "Badlands", rather than typed into the CMS field) — without this, an empty

collapses and subtitle/date shift upward compared to panels where the heading has real text. 34px is an estimate matching the heading's rendered line-height; check against a real empty-heading panel and adjust if it's off. */ li.panel.panel_type_8.feature_variant_1 > .content h2.fp_title { min-height: 34px; margin-bottom: 10px !important; } /* Overrides Artlogic's default 20px padding-top on the caption div (layout.css: .fp_title + .description, .subtitle + .description) */ li.panel.panel_type_8.feature_variant_1 > .content .description.prose { padding-top: 0 !important; } /* Always white, no exceptions */ li.panel.panel_type_8.feature_variant_1 > .content, li.panel.panel_type_8.feature_variant_1 > .content * { color: #fff !important; } /* Kills the gap between subtitle and the caption body text. That gap wasn't coming from this stylesheet at all — it's the browser's default paragraph margin on the

inside .description.prose, never zeroed for this panel before. */ li.panel.panel_type_8.feature_variant_1 > .content .description.prose p { margin: 0 !important; } /* ============================================= ARTWORKS LANDING PAGE — INTRO TEXT Confirmed via inspector: #content_module.content_below.prose.clearwithin.full_width sits directly under #content, separate from the panel_image_text_columns system used on artist/exhibition pages — needed its own rule. VERTICAL POSITION — uses position:relative + top, NOT margin-top. Confirmed via inspector: margin-top:-45px was registering in the computed box model but producing no visible movement. Cause: float:none below (needed to kill Artlogic's default float so the block could be widened/repositioned) strips away the block formatting context a float would normally establish — without that, a negative top margin on this element collapses straight through into #content's own margin instead of shifting the child inside it. position:relative sidesteps the whole margin system: the element keeps its normal-flow space (so the grid below doesn't move) and is shifted purely visually. HORIZONTAL POSITION — width 50% + margin-left 50% assumes #content_module and the 4-column grid below share the same effective width/padding inside #content. Confirmed working visually; if the grid's own gutters ever change, re-check this against the live column-3 edge. DIVIDER — Artlogic renders its own empty

inside #content_module (confirmed via inspector, native height 30px from Artlogic's layout.css). Now that content_module is width:50%, that divider is trapped under the text column only. Pulled back out to span #content's full width and given a visible top border to match the artist-page divider treatment. Sized as 200% width / -100% margin-left relative to content_module's own 50% — if the 50%/50% split above changes, these two must change with it. Desktop only for now; mobile stacking to be checked separately. ============================================= */ @media screen and (min-width: 769px) { #content_module.content_below.prose.clearwithin.full_width { width: 50% !important; /* spans columns 3+4 */ max-width: none !important; margin-left: 50% !important; /* aligns left edge with column 3 start */ margin-right: 0 !important; margin-bottom: 0 !important; /* removes content_module's own trailing space before the divider/grid */ padding-bottom: 15px !important; /* estimate — breathing room below the button, before the grey filters-panel line beneath it; check against live spacing */ float: none !important; position: relative !important; /* replaces margin-top — see note above on why margin-top silently failed */ top: -35px !important; /* was -45px — re-tuned after the global h1 went from 1.6rem to 2.2rem, since "Artworks" now sits taller and the same -45 overshot */ } #content_module.content_below.prose.clearwithin.full_width p:last-of-type { margin-bottom: 0 !important; /* kills the browser's default

bottom margin on the last paragraph, which was adding to the gap above the divider independent of our own spacing */ } #content_module.content_below.prose.clearwithin.full_width .divider { width: 200% !important; margin-left: -100% !important; margin-top: 30px !important; height: 0 !important; /* Artlogic's own layout.css gives .divider a native 30px height — that's what was pushing the works grid below down away from the line, not any rule of ours */ border-top: 1px solid #ddd !important; } } /* ============================================= CATEGORY / SUBCATEGORY PAGES WITH FILTERS PANEL (Cabinet, and any other artwork subcategory) — INTRO TEXT VERTICAL ALIGNMENT Confirmed via inspector: these pages carry an extra ancestor class the plain Artworks landing page does NOT have — .artworks_filters_container_type_above_list on .artworks-page-categories-grid-container. That's the hook used here to give #content_module a different (much larger) upward offset than the -35px tuned for the landing page above, since here there's a whole filters_panel (the Sort/Keyword row) sitting between the h1 and #content_module that the landing page doesn't have. The extra class + ID combination here is more specific than the plain ID + class rule above, so it wins on these pages only — the landing page's own -35px stays untouched. Both values below are first-pass estimates, not measured against a live page — check against the actual "Sort" label baseline and the real gap to the Keyword field once live, and adjust. ============================================= */ @media screen and (min-width: 769px) { .artworks_filters_container_type_above_list #content_module.content_below.prose.clearwithin.full_width { top: -175px !important; /* was -130px — pushed further negative after adding 45px back via .fp-modules/.fp-module padding (15+15+15). Same pattern as before: any space added above content_module needs a matching increase here, any space removed needs a matching decrease. Still an estimate — check against live "Sort" baseline. */ } /* Narrows the Keyword search field and gives it breathing room on its right so the now-realigned intro text doesn't sit flush against it. Scoped to .filters_panel specifically so it doesn't touch a .navigation_inner anywhere else the filter system might reuse this markup. */ .filters_panel .navigation_inner { max-width: 300px !important; /* was ~345px natively — estimate, check against live overlap with the text block */ margin-right: 40px !important; } /* Artlogic's own layout.css gives .filters_panel.filters_layout_above_list a 50px bottom margin and 40px bottom padding (confirmed via inspector) — that's the excess space below the Sort/Keyword row, not anything of ours. Collapsed to 0, with a small 10px top padding added per request — easy to nudge back up slightly once seen live. */ .filters_panel.filters_layout_above_list { margin-bottom: 0 !important; padding-bottom: 0 !important; padding-top: 10px !important; } /* .fp-modules is the flex row holding Sort and Keyword directly (confirmed via inspector) — nested one level inside .filters_panel, separate from the panel-level padding above. */ .filters_panel .fp-modules { padding-bottom: 15px !important; } /* Each individual field (Sort, Keyword) inside .fp-modules — adds breathing room above/below the label+control within each column, separate from the row-level padding above. */ .filters_panel .fp-modules .fp-module { padding-top: 15px !important; padding-bottom: 15px !important; } } /* ============================================= FILTER SORT CHECKBOX — square indicator Confirmed via inspector: Artlogic's default is a FontAwesome checkmark glyph (content: "\f00c") on label::before, ~10px, light grey. Replaced with a small square outline that fills solid black when the underlying checkbox is checked, matching the site's minimal aesthetic rather than a tick icon. Assumes the "selected" state is driven by the native :checked state on input.fp-checkbox — if Artlogic instead toggles a class via JS rather than relying on native checkbox behaviour, the fill below won't trigger and this needs a different selector. Check live before treating this as finished. Scoped to .filters_panel only, so it doesn't touch checkbox styling anywhere else on the site that might reuse .fp-checkbox or .checkmark for something unrelated (e.g. cart/wishlist checkboxes). ============================================= */ .filters_panel .fp-checkbox-item label::before { font-family: initial !important; /* cancels FontAwesome so content renders as an empty box, not the tick glyph */ content: '' !important; display: inline-block !important; width: 8px !important; height: 8px !important; font-size: 0 !important; /* was 10px — box itself is the indicator now, no glyph text needed */ border: 1px solid #999 !important; background: transparent !important; margin: 0 10px 0 0 !important; vertical-align: middle !important; position: relative !important; top: -2px !important; /* nudged up slightly — was sitting a touch low against the label text */ } /* Solid fill on the selected option */ .filters_panel .fp-checkbox-item input.fp-checkbox:checked + label::before { background: black !important; border-color: black !important; } /* Hides Artlogic's own inside the label — a second, separate indicator that would otherwise sit alongside the square above and double up visually. */ .filters_panel .fp-checkbox-item label .checkmark { display: none !important; }