/* 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 ------------------- */ #wishlistEnquiryForm .button, .link, .link:hover, .link span, .link span:hover, .link a, .link a:hover, .link a:visited, #mc_embed_signup input.button, .simple_list ul li a, a.external { color: #c1c1c1; } /* Header layout ------------------- */ /* Dynamically created grid layout css ------------------- */ /* artfairs - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artfairs:not(.feature_list) > ul > li { width:50.0% }} .records_list.grid_dynamic_layout_artfairs ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artfairs ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artfairs ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artfairs ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artfairs ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_artfairs ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_artfairs > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_artfairs > ul > li { 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:flex-start; justify-content: flex-start; -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 - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artworks:not(.feature_list) > ul > li { width:25.0% }} .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 { padding-top:150.0%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_artworks > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_artworks > ul > li { 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:flex-start; justify-content: flex-start; -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:33.33% }} .records_list.grid_dynamic_layout_video ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_video ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_video ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_video ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_video ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_video ul li .image::after { padding-top:66.6666666667%; } @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 - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_exhibitions:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_exhibitions ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_exhibitions ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_exhibitions ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_exhibitions ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_exhibitions ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_exhibitions ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_exhibitions > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_exhibitions > ul > li { 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:flex-start; justify-content: flex-start; -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:50.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:flex-start; justify-content: flex-start; -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 - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artfairs_featured:not(.feature_list) > ul > li { width:50.0% }} .records_list.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 - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_exhibitions_featured:not(.feature_list) > ul > li { width:50.0% }} .records_list.grid_dynamic_layout_exhibitions_featured ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_exhibitions_featured ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_exhibitions_featured ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_exhibitions_featured ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_exhibitions_featured ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_exhibitions_featured ul li .image::after { padding-top:66.6666666667%; } /* press - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_press:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_press ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_press ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_press ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_press ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_press ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_press ul li .image::after { padding-top: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:33.33% }} .records_list.grid_dynamic_layout_news ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_news ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_news ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_news ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_news ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_news ul li .image::after { padding-top:66.6666666667%; } @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:flex-start; justify-content: flex-start; -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(33.33% - 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:flex-start; justify-content: flex-start; -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:33.33% }} .records_list.grid_dynamic_layout_publications ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_publications ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_publications ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_publications ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_publications ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_publications ul li .image::after { padding-top: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:33.33% }} .records_list.grid_dynamic_layout_team ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_team ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_team ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_team ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_team ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_team ul li .image::after { padding-top: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; } h1, .h1_heading { font-size: 2.2rem !important; } h2, .subheading { font-size: 1.0rem !important; } h3, h4, h5, h6 { font-size: 1.0rem !important; } .pull_quote_content blockquote, .pull_quote_content blockquote.prose, .pull_quote_content p { font-size: 0.9rem !important; } /* ============================================= GLOBAL PAGE PADDING REDUCTION ============================================= */ #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; } .panel_header { padding-bottom: 0 !important; margin-bottom: 10px !important; } .panel_header h2 { font-size: 1.2rem !important; } .subheading { flex-direction: column-reverse !important; align-items: flex-start !important; } .subheading span { font-size: 1.2rem !important; margin-top: 10px !important; display: inline-block !important; } .subheading::after { width: 100% !important; } /* Removes the grey line ABOVE section subheadings ("Works", "Series", "Upcoming Exhibitions", etc.) sitewide — this was Artlogic's own ::after border-top, sitting visually above the subheading text due to the column-reverse layout above. Deliberately does NOT touch the separate panel-to-panel divider rule (.feature_panels_inner...li.panel:not(:first-child) border-top, further down this file) — that line stays, per request to keep dividers between panels but remove the redundant one directly above subheadings. */ .subheading::after { display: none !important; } .records_list { margin-top: 0 !important; padding-top: 0 !important; } .feature_panels { margin-top: 40px !important; padding-top: 0 !important; } /* Artist pages specifically — remove the top gap so the first panel (View CV / Read more) sits directly below the artist name, without touching the global 40px used elsewhere (homepage, exhibitions, etc.). */ body.page-artists .feature_panels { margin-top: 0 !important; } .records_list ul li, .image_list ul li, .artist_list ul li { margin-bottom: 15px !important; padding-bottom: 0 !important; } .records_list ul li .image { margin-bottom: 10px !important; } /* Artwork grids sitewide (Works sections, and any other records_list grid showing artwork items) — small extra gap above the caption block (title/medium/Enquire). Broadened from tile_list-only to all records_list grids, since Artlogic reuses several different grid class variants (image_list, tile_list, grid_dynamic_layout_*) for what's visually the same artwork-listing pattern. */ .records_list ul li .content { padding-top: 5px !important; } .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; } .records_list.feature_list ul li .content { padding-left: 24px !important; } .feature_panels_inner.clearwithin { margin-bottom: 15px !important; } .feature_panels_inner.clearwithin ul li.panel_type_8 { padding-left: 0 !important; padding-right: 0 !important; } /* margin-bottom removed (was 15px) — padding-bottom on the shared rule below is now the sole spacer between panels, avoiding the doubled-gap problem where this margin stacked with the next panel's padding-top. */ .feature_panels_inner.clearwithin ul li.panel_type_8 { padding-bottom: 0 !important; } /* margin-bottom removed (was 45px, was set on .panel_hero) — same reasoning as above: padding-bottom on the shared rule below now handles spacing consistently. */ /* margin-bottom removed (was 45px, was set on ul li.panel_type_11) — same reasoning as above. */ /* padding-bottom:30 added — this is now the ONLY spacer between panels sitewide (margins removed from the panel-type-specific rules above). padding-top stays 30 as the sitewide default; artist pages override it to 0 just below, since with a consistent bottom spacer already in place, keeping top padding too would double the gap. */ .feature_panels_inner.clearwithin > ul > li.panel:not(:first-child) { border-top: 1px solid #ddd !important; padding-top: 30px !important; padding-bottom: 30px !important; } /* Artist pages — remove the top padding specifically here (border-top stays, so the divider line is still visible, just sitting flush at the boundary instead of with extra space above it). Without this, artist pages get a doubled ~60px gap: this panel's own 30px bottom padding plus the next panel's 30px top padding. */ body.page-artists .feature_panels_inner.clearwithin > ul > li.panel:not(:first-child) { padding-top: 0 !important; } #content > .divider, .feature_panels + .divider { display: none !important; } .records_list .content, li.panel_type_8 .content { display: flex; flex-direction: column; gap: 1px; } .records_list .content h2, li.panel_type_8 .content h2 { font-family: 'RomieBrand', 'Romie', serif !important; font-size: 1.4rem !important; text-transform: uppercase !important; font-weight: 400 !important; font-feature-settings: 'ss01' on, 'ss14' on, 'case' on, 'liga' on !important; padding-top: 2px !important; padding-bottom: 5px !important; margin-bottom: 0 !important; } .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; } .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; } .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: 0 !important; padding-top: 0 !important; } #slideshow.fullscreen_slideshow h2 { margin-bottom: 2px !important; margin-top: 0 !important; } #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; } #slideshow.fullscreen_slideshow h2 .separator { display: none !important; } #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; } #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; } 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 .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; } /* Copyright / policy block (Privacy Policy, Manage cookies, Copyright line) — matched to the 0.9rem used by the footer columns above. This block sits outside .advanced_footer_item so it wasn't covered by that rule and was falling back to a larger default. Targets the block and its links/text. */ #footer .copyright, #footer .copyright a, #footer .copyright p, #footer .copyright div { font-size: 0.9rem !important; } @media screen and (max-width: 768px) { #footer .advanced_footer_item { width: calc(50% - 20px) !important; margin-bottom: 24px !important; } } @media screen and (max-width: 480px) { #footer .advanced_footer_item { width: 100% !important; margin: 0 0 24px !important; } } /* ============================================= MAILING LIST — FOOTER FORM (EDITORIAL STYLE) ============================================= */ #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; } #mailinglist_form #artlogic_mailinglist_signup_form { display: flex !important; flex-wrap: wrap !important; align-items: flex-end !important; gap: 0 32px !important; } #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; } #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; } #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; } #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; } #mailinglist_form #email_warning, #mailinglist_form .error { width: 100% !important; flex-basis: 100% !important; } #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; } @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; } } @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 ============================================= */ #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; } #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; } #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 ============================================= */ #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_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; } @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 ============================================= */ .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 ============================================= */ .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; } /* =============================================================== TEXT PANEL TYPOGRAPHY (panel_type_11) =============================================================== */ 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; } .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; } @media screen and (min-width: 769px) { .panel_image_text_columns .content { width: 58% !important; max-width: 820px !important; } body:not(.page-exhibitions):not(.page-artists) .panel_image_text_columns .content { position: relative !important; top: -45px !important; } /* Event detail pages: cancel the -45px pull above. That offset is tuned for the homepage/generic layout where the divider sits 45px higher than the content — but on event/art-fair pages the geometry differs, so the pull lifts the text out of line with the grey divider. Resetting top:0 here (more specific than the body:not() rule, so it wins) puts the text back in line with the divider. Same reset applied to the pull_quote variant further down. */ .subsection-event-detail-page .panel_image_text_columns .content { top: 0 !important; } body.page-exhibitions .panel_number_1.panel_image_text_columns .content { margin-top: -125px !important; } body.page-exhibitions .panel_number_1.panel_image_text_columns .pull_quote_content { margin-top: -20px !important; } body.page-artists .panel_number_1.panel_image_text_columns .content { margin-top: -66px !important; } } /* ============================================= SERIES PAGE — H2 TYPOGRAPHY ============================================= */ h2.series-title { font-family: 'Diatype Medium', sans-serif !important; text-transform: none !important; font-weight: 400 !important; font-size: 1.2rem !important; } section[data-subsection-type="series"] .records_list.gd_no_of_columns_4.image_list .content h2 { font-family: 'Diatype Medium', sans-serif !important; text-transform: none !important; font-weight: 400 !important; font-size: 1.1rem !important; } /* ============================================= PULL QUOTE FIELD ============================================= */ .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; } .pull_quote_content blockquote.prose p:empty { font-size: 0 !important; line-height: 0 !important; margin: 0 !important; } /* ============================================= EXHIBITION HEADER — title / artist name / date ============================================= */ .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; } .event-header .subtitle_date { margin-top: 0 !important; } /* ============================================= HEADER — HAMBURGER MENU ICON ALIGNMENT ============================================= */ #slide_nav_reveal { position: relative !important; top: -10px !important; } /* ============================================= ARTIST HEADER — title ============================================= */ .artist-header .h1_wrapper h1.has_subnav { font-family: 'RomieBrand', 'Romie', serif !important; font-size: 3.0rem !important; text-transform: uppercase !important; font-weight: 400 !important; font-feature-settings: 'ss01' on, 'ss14' on, 'case' on, 'liga' on !important; padding-top: 5px !important; } /* Artist page sub-nav (Works / Signature Works / Exhibitions jump links, id="sub_nav" role="navigation") — hidden per request. Scoped to body.page-artists so this doesn't touch #sub_nav or .navigation elements that may exist under other page types. The parent .heading_wrapper still carries its own margin-bottom:50px (set sitewide, not here), so check live whether that now reads as too much empty space under the artist name with the nav gone — if so, that's a separate follow-up, not something this rule should silently absorb. */ body.page-artists #sub_nav.artists_nav { display: none !important; } /* ============================================= .cms_button ============================================= */ .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; line-height: normal !important; } .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 ============================================= */ body.page-artists .records_list .content .artist { display: none !important; } /* ============================================= BUTTONS — never uppercase, always as 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 ============================================= */ .button:not(.button_compact):not(.enquiry-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; } .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 ============================================= */ body:has(.hero_heading:not(:empty)) .artist-header.heading_wrapper { display: none !important; } body.page-artists:has(.hero_heading:not(:empty)) .feature_panels { margin-top: 0 !important; } 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; } .hero_heading .fp_title { font-family: 'RomieBrand', 'Romie', serif !important; font-size: 3.5rem !important; text-transform: uppercase !important; font-weight: 400 !important; color: white !important; text-align: left !important; margin: 0 !important; } /* Bio text panel (panel_type_11) padding — scoped to artist pages that have the autoplay hero video ONLY, via the same :has(.hero_heading:not(:empty)) marker used for the hero overlay rules above. Deliberately NOT global: the sitewide divider rule (.feature_panels_inner...li.panel:not(:first-child), further down) still governs padding on every other panel and page — this override only wins for THIS panel type on THESE pages because it carries the extra body-level :has() scope plus the panel-type class, out-specifying the shared rule. margin-bottom: 0 is the key part, confirmed via inspector: Artlogic's own layout.css:7515 (.feature_panels_inner>ul>li) sets margin: 0 0 60px, which was stacking UNDER our 30px padding-bottom — so the real gap under this panel was ~90px (30 padding + 60 margin), not 30 or 60. Zeroing that margin here leaves a clean 30 top / 30 bottom on these pages only, without touching Artlogic's 60px margin elsewhere. */ body.page-artists:has(.hero_heading:not(:empty)) .feature_panels_inner.clearwithin > ul > li.panel.panel_type_11 { padding-top: 30px !important; padding-bottom: 30px !important; margin-bottom: 0 !important; } /* ============================================= GLOBAL FULL-WIDTH IMAGE PANEL — TEXT OVERLAY ============================================= */ /* IMAGE-ONLY VIEWPORT BREAKOUT — v5 (v4's core logic: .image and .content are both position:absolute, taking them out of document flow entirely. An out-of-flow element can't affect a flex item's sizing and can't push or squeeze .panel_header, a plain in-flow sibling — so .panel_header needs no special handling and simply renders as it always has, above the space reserved below it.) That part was already correct — but v4's padding-bottom never actually WON the cascade. An older rule, .feature_panels_inner.clearwithin > ul > li.panel:not(:first-child), sets padding-bottom: 30px !important on this same li, and its selector is MORE specific (an extra element in the chain, plus :not(:first-child) itself counts toward specificity) than v4's plain li.panel.panel_type_8.feature_variant_1. Both are !important, so specificity decided it regardless of source order or how cleanly the file was pasted — the calc() below was being silently discarded every time. The arithmetic proves it: 30px (that rule's padding-top) + ~35px (.panel_header's own height) + 30px (that rule's padding-bottom) + 1px (its border) ≈ 91px — exactly what was measured live. Fix: prefix the same ancestor chain so THIS rule's specificity exceeds the older one, without touching that shared rule at all — other panel types still depend on it for their own divider spacing. */ .feature_panels_inner.clearwithin ul li.panel.panel_type_8.feature_variant_1 { position: relative !important; cursor: pointer !important; overflow: visible !important; padding-bottom: calc(100vw * 2 / 21) !important; } li.panel.panel_type_8.feature_variant_1 > .image { position: absolute !important; left: 50% !important; bottom: 0 !important; transform: translateX(-50%) !important; width: 100vw !important; height: calc(100vw * 2 / 21) !important; margin: 0 !important; padding-bottom: 0 !important; overflow: hidden !important; } 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; } li.panel.panel_type_8.feature_variant_1 > .image img.object-fit-contain { width: 100% !important; height: 100% !important; object-fit: cover !important; } li.panel.panel_type_8.feature_variant_1 .image a { position: absolute !important; inset: 0 !important; z-index: 1 !important; } /* .content is bottom-anchored and height-matched to .image, so it covers exactly the image's footprint (not the whole li, which would now include .panel_header's own space above it). Vertical centering switches from the old top:50%/translateY trick (which centred against li's full box) to flexbox justify-content, centred specifically within THIS box's own height instead. padding-top: 50px, padding-left: 0 per your latest instruction — the previous 95px fp_title exception below is now updated to match, so it's consistent for this exhibition panel rather than silently overriding it again. */ li.panel.panel_type_8.feature_variant_1 > .content { position: absolute !important; left: 0 !important; bottom: 0 !important; height: calc(100vw * 2 / 21) !important; z-index: 2 !important; width: 100% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 50px 40px 0 0 !important; pointer-events: none !important; text-align: left !important; } 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; position: relative !important; top: -6px !important; } /* Full-width image banners — typography is deliberately unified across artist, exhibition, event and other feature-panel contexts: H2 = 1.7rem; subtitle/date/body copy = 1.15rem. */ li.panel.panel_type_8.feature_variant_1 > .content h2.fp_title, li.panel.panel_type_8.feature_variant_1 > .content h2.fp_title[data-fieldname="title"], li.panel.panel_type_8.feature_variant_1 > .content h2.fp_title[data-fieldname="heading"] { font-size: 1.7rem !important; line-height: 115% !important; min-height: 34px; margin-bottom: 0 !important; padding-bottom: 0 !important; mix-blend-mode: difference !important; } /* Consolidated to match the base 50px above — was 95px, a deliberate exhibition-specific tweak from an earlier session, now unified per explicit instruction rather than left as a silent override. */ li.panel.panel_type_8.feature_variant_1 > .content:has(h2.fp_title) { padding-top: 50px !important; } li.panel.panel_type_8.feature_variant_1 > .content span.subtitle, li.panel.panel_type_8.feature_variant_1 > .content span.date { font-size: 1.15rem !important; line-height: 115% !important; mix-blend-mode: difference !important; } /* ============================================= EXHIBITION PANEL WITH LOGO PNG When a logo image is dropped into the Content field of an exhibition/event feature panel, the DOM order is: h2.fp_title → subtitle → date → description.prose(logo) i.e. the logo renders LAST, below everything, overlapping the title area. Per spec, the logo should REPLACE the heading and sit at the very top, with artist name then date underneath. Detection: .content:has(.description.prose img) — true only when a logo has actually been added. So panels without a logo are completely untouched and keep showing their h2 heading as before. .content is already display:flex/column, so flex `order` reorders visually without changing the DOM (reading order for screen readers stays logical). Order values: description/logo = -1 (first), subtitle = 0, date = 1. h2 is hidden entirely. */ li.panel.panel_type_8.feature_variant_1 > .content:has(.description.prose img) h2.fp_title { display: none !important; } li.panel.panel_type_8.feature_variant_1 > .content:has(.description.prose img) .description.prose { order: -1 !important; } li.panel.panel_type_8.feature_variant_1 > .content:has(.description.prose img) span.subtitle { order: 0 !important; } li.panel.panel_type_8.feature_variant_1 > .content:has(.description.prose img) span.date { order: 1 !important; } /* Logo image sizing within the exhibition panel — RESPONSIVE. Previously max-height: 48px (fixed px) locked the logo to one height regardless of screen, so on narrower screens (iPad, reduced desktop) the banner shrank but the logo didn't — making it loom proportionally larger, especially wide PNGs like BADLANDS. Fix: cap the logo by WIDTH relative to the viewport (18vw), so it scales down as the banner narrows and keeps a roughly constant relationship to the artist/date text at every size — per the principle that the logo shouldn't be much wider than the date line. max-width: 340px is a hard ceiling on very wide screens (roughly the width of the date text), and max-height: 60px is a safety cap so a tall/square logo can't blow out the banner height. min() keeps whichever is smaller. Adjust the 18vw / 340px pair together to taste. */ li.panel.panel_type_8.feature_variant_1 > .content:has(.description.prose img) .description.prose img { max-width: min(18vw, 340px) !important; max-height: 60px !important; width: auto !important; height: auto !important; margin-bottom: 0 !important; } /* Tighten the logo's own paragraph and the prose container too, so no residual bottom margin sits between the logo and the artist name once the img margin is zeroed above. */ li.panel.panel_type_8.feature_variant_1 > .content:has(.description.prose img) .description.prose, li.panel.panel_type_8.feature_variant_1 > .content:has(.description.prose img) .description.prose p:has(img) { margin-bottom: 0 !important; padding-bottom: 0 !important; line-height: 1 !important; } li.panel.panel_type_8.feature_variant_1 > .content .description.prose { padding-top: 0 !important; font-size: 1.15rem !important; line-height: 115% !important; mix-blend-mode: difference !important; } li.panel.panel_type_8.feature_variant_1 > .content, li.panel.panel_type_8.feature_variant_1 > .content * { color: #fff !important; } li.panel.panel_type_8.feature_variant_1 > .content .description.prose p { margin: 0 !important; font-size: 1.15rem !important; line-height: 115% !important; mix-blend-mode: difference !important; } /* ============================================= FULL-WIDTH IMAGE PANEL — TEXT-ONLY VARIANT (no exhibition/press/publication data attached) ============================================= */ li.panel.panel_type_8.feature_variant_1 > .content:not(:has(h2.fp_title)) .description.prose { max-width: 500px !important; font-size: 1.15rem !important; } li.panel.panel_type_8.feature_variant_1 > .content:not(:has(h2.fp_title)) .description.prose p { padding-left: 1.2em !important; text-indent: -1.2em !important; } /* Logo paragraph exception: when a paragraph contains an image (the dynamic PNG logo dropped into the description field), it should NOT get the hanging-indent gutter — that's only meant to align wrapped text lines under the arrow. Reset it so the logo sits flush at the left edge like the rest of the image. */ li.panel.panel_type_8.feature_variant_1 > .content:not(:has(h2.fp_title)) .description.prose p:has(img) { padding-left: 0 !important; text-indent: 0 !important; } /* Arrow goes before the TEXT, never the logo image. Bulletproofed: explicitly SUPPRESS any ::before on a paragraph that contains an image (the logo), then ADD the arrow only to a paragraph that does NOT contain an image. Using :not(:has(img)) directly (without :first-of-type, which was fragile when the logo

was technically the first-of-type) means the arrow lands on the text regardless of whether a logo precedes it, and the logo never gets one. */ li.panel.panel_type_8.feature_variant_1 > .content:not(:has(h2.fp_title)) .description.prose p:has(img)::before { content: none !important; } li.panel.panel_type_8.feature_variant_1 > .content:not(:has(h2.fp_title)) .description.prose p:not(:has(img))::before { content: "→ " !important; } /* ============================================= FULL-WIDTH IMAGE PANEL — MOBILE ASPECT RATIO The 21:2 ratio used above (li's padding-bottom, .image's height, .content's height) is tuned for a wide, thin desktop banner — 1800px viewport gives ~171px tall. At mobile widths the SAME ratio scales down proportionally, which is the problem: 390px gives only ~37px tall, squeezing the image into an unreadable sliver and pushing the caption's own 50px padding-top past the box entirely. This isn't a bug in the calc(), it's the wrong ratio for a narrow screen — a banner-shaped crop doesn't stay legible at phone widths. Fix: swap to a taller ratio below the same 767px breakpoint used elsewhere in this file. Currently 1:3 (height = one third of width): at 390px that gives ~130px, at 564px ~188px — a thin banner that still reads clearly at phone widths without the ~37px sliver the desktop ratio produced. Width stays 100vw throughout (untouched here), so full-bleed is unaffected at any screen size — only the height ratio changes. To adjust the height yourself: change the ratio in all THREE lines below (they must stay identical, or the image, its reserved space, and the caption box drift apart). Lower the first number for a shorter panel — e.g. 1/4 is shorter than 1/3, 1/2 is taller. 768–1024px (tablet) currently still inherits the 21:2 desktop ratio, giving roughly 73–97px tall — thin, but not as broken as mobile's 37px. Worth checking live whether tablet also needs its own step in between; left alone for now since only mobile was flagged. */ @media screen and (max-width: 767px) { .feature_panels_inner.clearwithin ul li.panel.panel_type_8.feature_variant_1 { padding-bottom: calc(100vw * 1 / 3) !important; } li.panel.panel_type_8.feature_variant_1 > .image { height: calc(100vw * 1 / 3) !important; } li.panel.panel_type_8.feature_variant_1 > .content { height: calc(100vw * 1 / 3) !important; } } /* ============================================= ARTWORKS LANDING / PARENT CATEGORY PAGES ONLY CHILD ARTWORK CATEGORY PAGES LEFT NATIVE ============================================= This layout is deliberately applied ONLY when the page does NOT contain Artlogic's actual artwork-results list: .records_list.grid_dynamic_layout_artworks.filter_results Therefore child artwork category pages (Gareth Neal, Marc Fish, etc.) receive no custom artwork-page grid, no display:contents, no custom width/column placement, and no custom filter layout. Parent category pages such as Consoles keep the existing two-column heading/text arrangement and full-width category grid. The old filters-panel row has also been removed because the Filters Panel is no longer present in the Artlogic backend. */ @media screen and (min-width: 769px) { .artworks-page-categories-grid-container:not(:has( .records_list.grid_dynamic_layout_artworks.filter_results )) { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 40px !important; grid-template-areas: "aw-header aw-text" "aw-grid aw-grid" !important; } .artworks-page-categories-grid-container:not(:has( .records_list.grid_dynamic_layout_artworks.filter_results )) > .artworks-header { grid-area: aw-header !important; margin-bottom: 15px !important; } .artworks-page-categories-grid-container:not(:has( .records_list.grid_dynamic_layout_artworks.filter_results )) > #content { display: contents !important; } .artworks-page-categories-grid-container:not(:has( .records_list.grid_dynamic_layout_artworks.filter_results )) #content_module.content_below.prose.clearwithin.full_width { grid-area: aw-text !important; margin-bottom: 20px !important; } .artworks-page-categories-grid-container:not(:has( .records_list.grid_dynamic_layout_artworks.filter_results )) #content_module.content_below.prose.clearwithin.full_width p:last-of-type { margin-bottom: 0 !important; } .artworks-page-categories-grid-container:not(:has( .records_list.grid_dynamic_layout_artworks.filter_results )) #content_module.content_below.prose.clearwithin.full_width .divider { display: none !important; } .artworks-page-categories-grid-container:not(:has( .records_list.grid_dynamic_layout_artworks.filter_results )) .subsection-artworks-categories-grid { grid-area: aw-grid !important; border-top: 1px solid #ddd !important; padding-top: 25px !important; } } /* Keep the artwork-category sub-navigation hidden on the landing / parent category pages only. Child artwork-result pages are left native for this diagnostic test. */ .artworks-page-categories-grid-container:not(:has( .records_list.grid_dynamic_layout_artworks.filter_results )) .artworks-header #sub_nav.navigation, .artworks-page-categories-grid-container:not(:has( .records_list.grid_dynamic_layout_artworks.filter_results )) #sub_nav.navigation[aria-label="Artwork categories"] { display: none !important; } /* ============================================= CHILD ARTWORK CATEGORY PAGES Keep heading / commission text in two columns, while artwork results span the full width below. ============================================= */ /* Hide artwork-category sub-navigation on child artwork pages */ .artworks-page-categories-grid-container:has( .records_list.grid_dynamic_layout_artworks.filter_results ) .artworks-header #sub_nav.navigation, .artworks-page-categories-grid-container:has( .records_list.grid_dynamic_layout_artworks.filter_results ) #sub_nav.navigation[aria-label="Artwork categories"] { display: none !important; } @media screen and (min-width: 769px) { .artworks-page-categories-grid-container:has( .records_list.grid_dynamic_layout_artworks.filter_results ) { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 40px !important; grid-template-areas: "aw-header aw-text" "aw-grid aw-grid" !important; } .artworks-page-categories-grid-container:has( .records_list.grid_dynamic_layout_artworks.filter_results ) > .artworks-header { grid-area: aw-header !important; margin-bottom: 15px !important; } .artworks-page-categories-grid-container:has( .records_list.grid_dynamic_layout_artworks.filter_results ) > #content { display: contents !important; } .artworks-page-categories-grid-container:has( .records_list.grid_dynamic_layout_artworks.filter_results ) > #content > #content_module.content_below.prose.clearwithin { grid-area: aw-text !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin-bottom: 20px !important; } .artworks-page-categories-grid-container:has( .records_list.grid_dynamic_layout_artworks.filter_results ) > #content > #content_module.content_below.prose.clearwithin p:last-of-type { margin-bottom: 0 !important; } .artworks-page-categories-grid-container:has( .records_list.grid_dynamic_layout_artworks.filter_results ) > #content > #content_module.content_below.prose.clearwithin .divider { display: none !important; } .artworks-page-categories-grid-container:has( .records_list.grid_dynamic_layout_artworks.filter_results ) > #content > .records_list.grid_dynamic_layout_artworks.filter_results { grid-area: aw-grid !important; grid-column: 1 / -1 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important; } .artworks-page-categories-grid-container:has( .records_list.grid_dynamic_layout_artworks.filter_results ) > #content > .records_list.grid_dynamic_layout_artworks.filter_results > ul { width: 100% !important; max-width: none !important; min-width: 0 !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important; } } /* ============================================= EXHIBITIONS PAGE — nav bar ============================================= */ body.page-exhibitions .heading_wrapper.exhibition-list-header { justify-content: flex-start !important; } body.page-exhibitions #exhibitions_nav.navigation { float: left !important; margin-top: 20px !important; margin-right: auto !important; } body.page-exhibitions .subsection-exhibition-detail-page #exhibitions_nav.navigation { display: none !important; } /* Hide the per-exhibition sub-nav (the Works / Featured Artists / etc. tabs, #sub_nav aria-label="Exhibition subnavigation") inside the exhibition header. This is distinct from #exhibitions_nav (the Current/Upcoming/Past listing tabs hidden just above) — different element, different nav. Scoped to .exhibition-header so it can't touch the artworks or artist subnavs elsewhere. */ .exhibition-header #sub_nav.navigation, body.page-exhibitions #sub_nav.navigation[aria-label="Exhibition subnavigation"] { display: none !important; } /* ============================================= RELATED CONTENT — VIDEO / EVENT THUMBNAILS In the "Related Content" grid at the foot of exhibition/ event pages, video and event entries (li.related-video_entries, li.related-events) were rendering boxed and floating: their thumbnail is a wide video frame, but Artlogic reserves a tall square-ish cell for it, and the lazyloader falls back to default square dimensions (lazyload-fallback-dimensions) — so the image sat in the top of an oversized box with empty space around it. Regular related records (exhibitions, publications) don't have this problem; they fill cleanly. Fix: force just the video/event entry images into a 3:2 landscape cell with object-fit:cover, matching the regular records. Scoped to .subsection-related-content and these two li classes only — cannot touch the full-bleed exhibition banners (li.panel.panel_type_8, a different selector) or the regular related records. */ .subsection-related-content li.related-video_entries .image, .subsection-related-content li.related-events .image { position: relative !important; width: 100% !important; height: auto !important; aspect-ratio: 3 / 2 !important; overflow: hidden !important; } .subsection-related-content li.related-video_entries .image span, .subsection-related-content li.related-events .image span, .subsection-related-content li.related-video_entries .image .object-fit-container, .subsection-related-content li.related-events .image .object-fit-container { display: block !important; width: 100% !important; height: 100% !important; } .subsection-related-content li.related-video_entries .image img, .subsection-related-content li.related-events .image img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* ============================================= RELATED ARTISTS PANEL (artist pages) The related-artists grid (section#related_artists, a .records_list.mini_list) renders in 2 wide columns by default. Per the InDesign design it should be 4 tighter columns, smaller items, sitting close under the heading. NOTE: the ul and li here carry NO layout class (the ul is bare, the li is just .visible) — an earlier attempt targeted ul.clearwithin and matched nothing. These selectors target the bare ul and its direct li children under #related_artists, so they actually apply. Scoped to #related_artists only. */ section#related_artists.related_items_panel { padding-top: 0 !important; margin-top: 0 !important; } section#related_artists .records_list.mini_list > ul { display: flex !important; flex-wrap: wrap !important; margin: 0 !important; padding: 0 !important; } section#related_artists .records_list.mini_list > ul > li { width: 25% !important; box-sizing: border-box !important; padding-right: 20px !important; margin-bottom: 18px !important; float: none !important; list-style: none !important; } /* Smaller artist thumbnail icons */ section#related_artists .records_list.mini_list > ul > li .icon, section#related_artists .records_list.mini_list > ul > li .icon img { width: 40px !important; height: 40px !important; object-fit: cover !important; } /* Slightly smaller artist name to match the tighter grid */ section#related_artists .records_list.mini_list > ul > li .content { font-size: 0.95rem !important; } /* ============================================= EVENT PAGE ============================================= */ .pull_quote_content blockquote.prose p { font-size: 1.0rem !important; } /* Hide the "Back to art fairs" link (.back_to_link, including its divider) on event detail pages. */ .subsection-event-detail-page .back_to_link { display: none !important; } /* Hide the page-stats pager ("1 of 4 / Previous / Next", #page_stats.page_stats.not-prose) on event detail pages. */ .subsection-event-detail-page .page_stats.not-prose { display: none !important; } /* Remove the spacing/divider under the "View all works" heading (.panel_header) on event detail pages so the image banner sits closer beneath it. Targets the panel_header's own bottom margin plus any divider it carries. */ .subsection-event-detail-page li.panel_type_8 .panel_header, .subsection-event-detail-page li.panel_type_8 .panel_header h2 { margin-bottom: 0 !important; padding-bottom: 0 !important; } .subsection-event-detail-page li.panel_type_8 .panel_header + .divider, .subsection-event-detail-page li.panel_type_8 .panel_header .divider { display: none !important; } /* Event-page image banner description ("Click here to view all works on display") — bumped to 1.0rem. Scoped to event detail pages so it doesn't affect the same .description.prose text on other full-bleed banners (BADLANDS, TNC, etc.) sitewide. */ .subsection-event-detail-page li.panel_type_8.feature_variant_1 > .content .description.prose, .subsection-event-detail-page li.panel_type_8.feature_variant_1 > .content .description.prose p { font-size: 1.15rem !important; } @media screen and (min-width: 769px) { body:not(.page-exhibitions):not(.page-artists) .panel_image_text_columns .pull_quote_content { position: relative !important; top: -45px !important; } } /* ============================================= NEWS PAGE ============================================= */ body.page-news .subsection-news-record.layout-no-sidebar.advanced-content { display: flex !important; flex-direction: column !important; } body.page-news .subsection-news-record.layout-no-sidebar.advanced-content > #content { order: 2 !important; } body.page-news .subsection-news-record.layout-no-sidebar.advanced-content > .related_content_full_width { order: 2 !important; } body.page-news .subsection-news-record.layout-no-sidebar.advanced-content > .feature_panels { order: 1 !important; } .subsection-news-record #content_module .date { display: none !important; } body.page-news .page_stats.not-prose { display: none !important; } @media screen and (min-width: 769px) { body.page-news .panel_image_text_columns .content { top: -55px !important; } } /* ============================================= PRESS PAGE ============================================= */ body.page-press .subsection-press-record.layout-no-subnav { display: flex !important; flex-direction: column !important; } body.page-press .subsection-press-record.layout-no-subnav > #content { order: 2 !important; } body.page-press .subsection-press-record.layout-no-subnav > .related_content_full_width { order: 2 !important; } body.page-press .subsection-press-record.layout-no-subnav > .feature_panels { order: 1 !important; } .subsection-press-record #content_module .date { display: none !important; } body.page-press .page_stats.not-prose { display: none !important; } body.page-press #content.content_alt.clearwithin { display: flex !important; align-items: flex-start !important; gap: 40px !important; } body.page-press #content.content_alt.clearwithin > #sidebar { float: none !important; margin-top: 0 !important; flex: 0 0 50% !important; max-width: 50% !important; padding-left: 0 !important; } body.page-press #content.content_alt.clearwithin > #content_module { float: none !important; flex: 1 1 50% !important; max-width: 50% !important; margin-top: -190px !important; } body.page-press .press-header .subtitle.secondary-title { display: none !important; } /* ============================================= ART FAIR PAGES ============================================= */ .subsection-event-detail-page li.panel_type_7.feature_variant_1 .records_list ul li a { display: flex !important; align-items: center !important; } .subsection-event-detail-page li.panel_type_7.feature_variant_1 .records_list ul li .image { width: 55px !important; height: 55px !important; flex: 0 0 55px !important; float: none !important; margin: 0 15px 0 0 !important; overflow: hidden !important; } .subsection-event-detail-page li.panel_type_7.feature_variant_1 .records_list ul li .image img, .subsection-event-detail-page li.panel_type_7.feature_variant_1 .records_list ul li .image .object-fit-container { width: 100% !important; height: 100% !important; object-fit: cover !important; } .subsection-event-detail-page li.panel_type_7.feature_variant_1 .records_list ul li .content { width: auto !important; flex: 1 1 auto !important; float: none !important; padding-left: 0 !important; padding-top: 0 !important; } /* Art fair (event) pages — pull the intro text panel up to align with the top of the fair name (h1), same pattern as .page-exhibitions (-125px) and .page-artists (-66px) below. Stacks with the top:0 reset above rather than replacing it — margin-top shifts the box's flow position, top:0 then offsets from there, so the two don't fight. */ @media screen and (min-width: 769px) { .subsection-event-detail-page .panel_number_1.panel_image_text_columns .content { margin-top: -95px !important; } } /* Art fair (event) pages — hide the main image entirely when one is uploaded (the .sidebar block, float:right/width:50% via layout.css:271). Scoped to .subsection-event-detail-page so it doesn't touch .sidebar/#sidebar on press pages, which use the same class for an unrelated two-column layout. */ .subsection-event-detail-page .sidebar.clearwithin { display: none !important; } /* ============================================= ARTIST PAGES — VIDEO RECORDS IN 3 COLUMNS ============================================= */ @media screen and (min-width: 769px) { body.page-artists .subsection-videos .records_list.grid_dynamic_layout_video.feature_list > ul { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 30px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } body.page-artists .subsection-videos .records_list.grid_dynamic_layout_video.feature_list > ul > li { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; } body.page-artists .subsection-videos .records_list.grid_dynamic_layout_video.feature_list > ul > li > a { display: block !important; width: 100% !important; } body.page-artists .subsection-videos .records_list.grid_dynamic_layout_video.feature_list > ul > li .image { width: 100% !important; margin: 0 0 10px 0 !important; } body.page-artists .subsection-videos .records_list.grid_dynamic_layout_video.feature_list > ul > li .content { width: 100% !important; padding: 0 !important; } } /* ============================================= ARTIST PAGES — PRESS: MAXIMUM 8 RECORDS ============================================= */ body.page-artists #scroll_section_press .records_list > ul > li:nth-child(n+9), body.page-artists #scroll_section_press .c-records-list__item:nth-child(n+9) { display: none !important; } /* ============================================= ARTIST PAGES — "EXPLORE MORE" TEXT PANELS SAFE LAYOUT ONLY — NO AUTOMATIC HIDING ============================================= Frontend inspector confirms these render as: li.panel.panel_text.panel_type_2.feature_variant_1.no_image This section only removes the divider/extra spacing when an Explore more text panel immediately follows a dynamic panel. It deliberately DOES NOT hide any dynamic content panels. ============================================= */ body.page-artists .feature_panels_inner > ul > li.panel_press + li.panel_text.panel_type_2.no_image, body.page-artists .feature_panels_inner > ul > li.panel_videos + li.panel_text.panel_type_2.no_image, body.page-artists .feature_panels_inner > ul > li.panel_exhibitions + li.panel_text.panel_type_2.no_image, body.page-artists .feature_panels_inner > ul > li.panel_news + li.panel_text.panel_type_2.no_image, body.page-artists .feature_panels_inner > ul > li.panel_art-fairs + li.panel_text.panel_type_2.no_image, body.page-artists .feature_panels_inner > ul > li.panel_events + li.panel_text.panel_type_2.no_image, body.page-artists .feature_panels_inner > ul > li.panel_publications + li.panel_text.panel_type_2.no_image { border-top: none !important; padding-top: 0 !important; margin-top: 0 !important; } /* Keep the button itself close to the records */ body.page-artists .feature_panels_inner > ul > li.panel_text.panel_type_2.no_image .cms_button { margin-top: 0 !important; } /* ============================================= ARTIST PAGES — VIDEOS: HIDE NATIVE "READ MORE" ============================================= */ /* Artlogic outputs a span.link inside each video record. Hide that native Read more link; the separate Explore more panel handles navigation for the section. */ body.page-artists .subsection-videos .records_list.grid_dynamic_layout_video.feature_list span.link { display: none !important; } /* ============================================= ARTIST PAGES — HIDE EMPTY DYNAMIC PANELS + THEIR FOLLOWING "EXPLORE MORE" PANEL ============================================= This version checks for an ACTUAL nested record

  • inside the specific Artlogic scroll_section for each dynamic panel. If there is no record
  • : 1. hide the dynamic panel itself 2. hide the immediately-following text/button panel This is more reliable than checking for .visible, because the record markup differs between Artlogic panel types. ============================================= */ /* ---------- PRESS ---------- */ body.page-artists .feature_panels_inner > ul > li.panel_press:not( :has(> section#scroll_section_press .records_list > ul > li) ) { display: none !important; } body.page-artists .feature_panels_inner > ul > li.panel_press:not( :has(> section#scroll_section_press .records_list > ul > li) ) + li.panel_text.panel_type_2.no_image { display: none !important; } /* ---------- VIDEOS ---------- */ body.page-artists .feature_panels_inner > ul > li.panel_videos:not( :has(> section#scroll_section_videos .records_list > ul > li) ) { display: none !important; } body.page-artists .feature_panels_inner > ul > li.panel_videos:not( :has(> section#scroll_section_videos .records_list > ul > li) ) + li.panel_text.panel_type_2.no_image { display: none !important; } /* ---------- EXHIBITIONS ---------- */ body.page-artists .feature_panels_inner > ul > li.panel_exhibitions:not( :has(> section#scroll_section_exhibitions .records_list > ul > li) ) { display: none !important; } body.page-artists .feature_panels_inner > ul > li.panel_exhibitions:not( :has(> section#scroll_section_exhibitions .records_list > ul > li) ) + li.panel_text.panel_type_2.no_image { display: none !important; } /* ---------- NEWS ---------- */ body.page-artists .feature_panels_inner > ul > li.panel_news:not( :has(> section#scroll_section_news .records_list > ul > li) ) { display: none !important; } body.page-artists .feature_panels_inner > ul > li.panel_news:not( :has(> section#scroll_section_news .records_list > ul > li) ) + li.panel_text.panel_type_2.no_image { display: none !important; } /* ---------- EVENTS ---------- */ body.page-artists .feature_panels_inner > ul > li.panel_events:not( :has(> section#scroll_section_events .records_list > ul > li) ) { display: none !important; } body.page-artists .feature_panels_inner > ul > li.panel_events:not( :has(> section#scroll_section_events .records_list > ul > li) ) + li.panel_text.panel_type_2.no_image { display: none !important; } /* ---------- PUBLICATIONS ---------- */ body.page-artists .feature_panels_inner > ul > li.panel_publications:not( :has(> section#scroll_section_publications .records_list > ul > li) ) { display: none !important; } body.page-artists .feature_panels_inner > ul > li.panel_publications:not( :has(> section#scroll_section_publications .records_list > ul > li) ) + li.panel_text.panel_type_2.no_image { display: none !important; } /* ---------- ART FAIRS ---------- */ /* Artlogic class may render as panel_art-fairs while the section id uses scroll_section_art_fairs; this targets that combination. */ body.page-artists .feature_panels_inner > ul > li.panel_art-fairs:not( :has(> section#scroll_section_art_fairs .records_list > ul > li) ) { display: none !important; } body.page-artists .feature_panels_inner > ul > li.panel_art-fairs:not( :has(> section#scroll_section_art_fairs .records_list > ul > li) ) + li.panel_text.panel_type_2.no_image { display: none !important; } /* ============================================= ARTIST PAGES — TIGHTEN DYNAMIC PANEL TO FOLLOWING "EXPLORE MORE" TEXT PANEL ============================================= */ /* Remove Artlogic's default 60px bottom margin from dynamic panels when they are immediately followed by the Explore more text panel, so the button sits much closer to the records above. */ body.page-artists .feature_panels_inner > ul > li.panel_press:has(+ li.panel_text.panel_type_2.no_image), body.page-artists .feature_panels_inner > ul > li.panel_videos:has(+ li.panel_text.panel_type_2.no_image), body.page-artists .feature_panels_inner > ul > li.panel_exhibitions:has(+ li.panel_text.panel_type_2.no_image), body.page-artists .feature_panels_inner > ul > li.panel_news:has(+ li.panel_text.panel_type_2.no_image), body.page-artists .feature_panels_inner > ul > li.panel_art-fairs:has(+ li.panel_text.panel_type_2.no_image), body.page-artists .feature_panels_inner > ul > li.panel_events:has(+ li.panel_text.panel_type_2.no_image), body.page-artists .feature_panels_inner > ul > li.panel_publications:has(+ li.panel_text.panel_type_2.no_image) { margin-bottom: 0 !important; padding-bottom: 10px !important; } /* Also remove any residual top margin/padding/divider from the Explore more panel itself when it directly follows one of the dynamic record panels above. */ body.page-artists .feature_panels_inner > ul > li.panel_press + li.panel_text.panel_type_2.no_image, body.page-artists .feature_panels_inner > ul > li.panel_videos + li.panel_text.panel_type_2.no_image, body.page-artists .feature_panels_inner > ul > li.panel_exhibitions + li.panel_text.panel_type_2.no_image, body.page-artists .feature_panels_inner > ul > li.panel_news + li.panel_text.panel_type_2.no_image, body.page-artists .feature_panels_inner > ul > li.panel_art-fairs + li.panel_text.panel_type_2.no_image, body.page-artists .feature_panels_inner > ul > li.panel_events + li.panel_text.panel_type_2.no_image, body.page-artists .feature_panels_inner > ul > li.panel_publications + li.panel_text.panel_type_2.no_image { margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; } /* ============================================= FULL-WIDTH IMAGE PANEL — BLACK TEXT MARKER ============================================= In Artlogic: 1. Type [black] in the Content field. 2. Select only [black]. 3. Apply STRIKETHROUGH formatting. The marker is hidden on the live site. Its presence switches all overlay text in that full-width image panel to black. Do not use strikethrough for other content in these full-width image panels, as it acts as the black-text trigger. ============================================= */ /* Turn the entire panel text black when Artlogic outputs a strikethrough element in the description. */ li.panel.panel_type_8.feature_variant_1:has( .description.prose s ) > .content, li.panel.panel_type_8.feature_variant_1:has( .description.prose s ) > .content *, li.panel.panel_type_8.feature_variant_1:has( .description.prose strike ) > .content, li.panel.panel_type_8.feature_variant_1:has( .description.prose strike ) > .content *, li.panel.panel_type_8.feature_variant_1:has( .description.prose [style*="line-through"] ) > .content, li.panel.panel_type_8.feature_variant_1:has( .description.prose [style*="line-through"] ) > .content * { color: #000 !important; mix-blend-mode: normal !important; } /* Hide the [black] marker itself on the live site. */ li.panel.panel_type_8.feature_variant_1 .description.prose s, li.panel.panel_type_8.feature_variant_1 .description.prose strike, li.panel.panel_type_8.feature_variant_1 .description.prose [style*="line-through"] { display: none !important; } /* ============================================= FULL-WIDTH IMAGE PANEL — BLACK MARKER REMOVE EXTRA ARROW / EMPTY MARKER PARAGRAPH ============================================= */ /* Artlogic wraps the strikethrough [black] marker in its own

    . The existing text-only banner rule adds an arrow to every text paragraph, so hiding only the / leaves an empty paragraph whose ::before arrow still renders. Hide the whole marker paragraph and suppress its arrow. */ li.panel.panel_type_8.feature_variant_1 .description.prose p:has(s), li.panel.panel_type_8.feature_variant_1 .description.prose p:has(strike), li.panel.panel_type_8.feature_variant_1 .description.prose p:has([style*="line-through"]) { display: none !important; margin: 0 !important; padding: 0 !important; } li.panel.panel_type_8.feature_variant_1 .description.prose p:has(s)::before, li.panel.panel_type_8.feature_variant_1 .description.prose p:has(strike)::before, li.panel.panel_type_8.feature_variant_1 .description.prose p:has([style*="line-through"])::before { content: none !important; display: none !important; } /* ============================================= ARTIST PAGES — EXHIBITIONS: MAXIMUM 6 RECORDS ============================================= */ /* Artlogic controls the source order. This simply shows the first six exhibition records supplied by Artlogic. */ body.page-artists #scroll_section_exhibitions .records_list > ul > li:nth-child(n+7) { display: none !important; } /* ============================================= ARTIST PAGES — STORIES RELATED CONTENT PANEL NEWS + EVENTS ONLY / MAXIMUM 3 ============================================= Scoped to the last Related Content panel so it remains stable if another Related Content panel is ever added elsewhere. ============================================= */ body.page-artists .feature_panels_inner > ul > li.panel_related_content:not(:has(~ li.panel_related_content)) #scroll_section_related_content .subsection-related-content .records_list > ul > li:not( .related-news, .related-events ) { display: none !important; } body.page-artists .feature_panels_inner > ul > li.panel_related_content:not(:has(~ li.panel_related_content)) #scroll_section_related_content .subsection-related-content .records_list > ul > li:nth-child(n + 4 of .related-news, .related-events) { display: none !important; } /* Hide the Stories panel if there are no News/Event records */ body.page-artists .feature_panels_inner > ul > li.panel_related_content:not(:has(~ li.panel_related_content)):not( :has( #scroll_section_related_content .records_list > ul > li:is(.related-news, .related-events) ) ) { display: none !important; } /* Rename heading to Stories */ body.page-artists .feature_panels_inner > ul > li.panel_related_content:not(:has(~ li.panel_related_content)) #scroll_section_related_content .subheading span { font-size: 0 !important; } body.page-artists .feature_panels_inner > ul > li.panel_related_content:not(:has(~ li.panel_related_content)) #scroll_section_related_content .subheading span::after { content: "Stories" !important; font-size: 1.2rem !important; line-height: 120% !important; letter-spacing: 0.5px !important; } /* Desktop: 3 columns */ @media screen and (min-width: 769px) { body.page-artists .feature_panels_inner > ul > li.panel_related_content:not(:has(~ li.panel_related_content)) #scroll_section_related_content .subsection-related-content .records_list > ul { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 30px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } body.page-artists .feature_panels_inner > ul > li.panel_related_content:not(:has(~ li.panel_related_content)) #scroll_section_related_content .records_list > ul > li:is(.related-news, .related-events) { width: 100% !important; max-width: none !important; float: none !important; clear: none !important; margin: 0 !important; padding: 0 !important; } body.page-artists .feature_panels_inner > ul > li.panel_related_content:not(:has(~ li.panel_related_content)) #scroll_section_related_content .records_list > ul > li:is(.related-news, .related-events) .image { position: relative !important; width: 100% !important; height: auto !important; aspect-ratio: 3 / 2 !important; overflow: hidden !important; margin: 0 0 10px 0 !important; } body.page-artists .feature_panels_inner > ul > li.panel_related_content:not(:has(~ li.panel_related_content)) #scroll_section_related_content .records_list > ul > li:is(.related-news, .related-events) .image span, body.page-artists .feature_panels_inner > ul > li.panel_related_content:not(:has(~ li.panel_related_content)) #scroll_section_related_content .records_list > ul > li:is(.related-news, .related-events) .image .object-fit-container { display: block !important; width: 100% !important; height: 100% !important; } body.page-artists .feature_panels_inner > ul > li.panel_related_content:not(:has(~ li.panel_related_content)) #scroll_section_related_content .records_list > ul > li:is(.related-news, .related-events) .image img { width: 100% !important; height: 100% !important; object-fit: cover !important; } } /* Tablet */ @media screen and (min-width: 600px) and (max-width: 768px) { body.page-artists .feature_panels_inner > ul > li.panel_related_content:not(:has(~ li.panel_related_content)) #scroll_section_related_content .records_list > ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; } } /* Mobile */ @media screen and (max-width: 599px) { body.page-artists .feature_panels_inner > ul > li.panel_related_content:not(:has(~ li.panel_related_content)) #scroll_section_related_content .records_list > ul { display: grid !important; grid-template-columns: 1fr !important; gap: 20px !important; } } /* Stories cards do not show dates */ body.page-artists .feature_panels_inner > ul > li.panel_related_content:not(:has(~ li.panel_related_content)) #scroll_section_related_content .records_list > ul > li:is(.related-news, .related-events) span.date { display: none !important; } /* ============================================= ARTIST PAGES — FILMS SECTION Rename "Videos" to "Films" 3 columns / maximum 3 records ============================================= */ /* Rename the dynamic section heading from "Videos" to "Films" without changing Artlogic's underlying panel type. */ body.page-artists #scroll_section_videos .subheading span { font-size: 0 !important; } body.page-artists #scroll_section_videos .subheading span::after { content: "Films" !important; font-size: 1.2rem !important; line-height: 120% !important; letter-spacing: 0.5px !important; } /* Keep only the first 3 film/video records */ body.page-artists #scroll_section_videos .records_list > ul > li:nth-child(n+4) { display: none !important; } /* Force the Films section into a clean 3-column grid */ @media screen and (min-width: 769px) { body.page-artists #scroll_section_videos .records_list > ul { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 30px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } body.page-artists #scroll_section_videos .records_list > ul > li { width: 100% !important; max-width: none !important; float: none !important; clear: none !important; margin: 0 !important; padding: 0 !important; } body.page-artists #scroll_section_videos .records_list > ul > li > a { display: block !important; width: 100% !important; } body.page-artists #scroll_section_videos .records_list > ul > li .image { width: 100% !important; margin: 0 0 10px 0 !important; } body.page-artists #scroll_section_videos .records_list > ul > li .content { width: 100% !important; padding: 0 !important; } } /* Tablet: 2 columns */ @media screen and (min-width: 600px) and (max-width: 768px) { body.page-artists #scroll_section_videos .records_list > ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; } } /* Mobile: 1 column */ @media screen and (max-width: 599px) { body.page-artists #scroll_section_videos .records_list > ul { display: grid !important; grid-template-columns: 1fr !important; gap: 20px !important; } } /* ============================================= ARTIST PAGES — EXHIBITIONS ARTIST-NAMED EXHIBITIONS FIRST ============================================= This version deliberately does NOT try to compare the page slug against the exhibition slug. Instead, within an Artist Exhibitions panel, any exhibition URL containing one of the represented artist slugs is prioritised ahead of generic/group exhibition URLs. This avoids the unreliable page-path selector and preserves the existing Artlogic source order inside each priority group. ============================================= */ /* Restore a stable 3-column desktop grid */ @media screen and (min-width: 1023px) { body.page-artists #scroll_section_exhibitions .records_list > ul { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 30px 20px !important; } body.page-artists #scroll_section_exhibitions .records_list > ul > li { width: auto !important; margin: 0 !important; float: none !important; clear: none !important; } } /* Tablet */ @media screen and (min-width: 600px) and (max-width: 1022px) { body.page-artists #scroll_section_exhibitions .records_list > ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 30px 20px !important; } body.page-artists #scroll_section_exhibitions .records_list > ul > li { width: auto !important; margin: 0 !important; float: none !important; clear: none !important; } } /* Mobile */ @media screen and (max-width: 599px) { body.page-artists #scroll_section_exhibitions .records_list > ul { display: grid !important; grid-template-columns: 1fr !important; gap: 24px !important; } body.page-artists #scroll_section_exhibitions .records_list > ul > li { width: auto !important; margin: 0 !important; float: none !important; clear: none !important; } } /* Default exhibition cards */ body.page-artists #scroll_section_exhibitions .records_list > ul > li { order: 2 !important; } /* Exhibition URLs containing a represented artist name/slug come first */ body.page-artists #scroll_section_exhibitions .records_list > ul > li:has( a[href*="arko"], a[href*="ian-collings"], a[href*="katrien-doms"], a[href*="marc-fish"], a[href*="luke-fuller"], a[href*="ernst-gamperl"], a[href*="full-grown"], a[href*="teresa-hastings"], a[href*="christopher-kurtz"], a[href*="eleanor-lakelin"], a[href*="peter-marigold"], a[href*="ori-orisun-merhav"], a[href*="gareth-neal"], a[href*="john-makepeace"], a[href*="tadeas-podracky"], a[href*="aneta-regel"], a[href*="marc-ricourt"], a[href*="diana-scherer"], a[href*="julian-stair"], a[href*="wycliffe-stutchbury"], a[href*="adi-toch"], a[href*="julian-watts"], a[href*="nic-webb"], a[href*="dana-barnes"], a[href*="patrick-bongoy"], a[href*="ann-coddington"], a[href*="lin-fanglu"], a[href*="aude-franjou"], a[href*="tomonari-hashimoto"], a[href*="kenji-honma"], a[href*="wanbing-huang"], a[href*="marlene-huissoud"], a[href*="etsuko-ichikawa"], a[href*="tim-johnson"], a[href*="taylor-kibby"], a[href*="alida-kuzemczak-sayer"], a[href*="fernando-laposse"], a[href*="kate-mccgwire"], a[href*="adriana-meunie"], a[href*="annette-mills"], a[href*="mayumi-onagi"], a[href*="frances-pinnock"], a[href*="ash-plumb"], a[href*="marcin-rusak"], a[href*="joana-schneider"], a[href*="amy-usdin"], a[href*="jim-partridge"], a[href*="lucy-williams"], a[href*="laura-ellen-bacon"] ) { order: 1 !important; } /* ============================================= ARTIST EXHIBITIONS — REMOVE PHANTOM GRID CELL Artlogic's .clearwithin clearfix pseudo-elements become grid items when the list is changed to CSS Grid. Hide them so the first exhibition starts in column 1. ============================================= */ body.page-artists #scroll_section_exhibitions .records_list > ul::before, body.page-artists #scroll_section_exhibitions .records_list > ul::after { content: none !important; display: none !important; } /* ============================================= STANDARD FEATURE PANEL HEADINGS Keep section labels such as "Previous Solo Exhibition" in the normal site sans-serif, not Romie. ============================================= */ body.page-artists .feature_panels_inner > ul > li.panel_type_8 .panel_header h2, body.page-artists .feature_panels_inner > ul > li.panel_type_8 .subheading, body.page-artists .feature_panels_inner > ul > li.panel_type_8 .subheading span { font-family: inherit !important; } /* Clip each Featured Programme slide cleanly */ body.page-artists .feature_panels_inner > ul > li.panel_related_content:has(~ li.panel_related_content) #scroll_section_related_content .records_list > ul > li:is( .related-exhibitions, .related-events, .related-news, .related-art-fairs ) { overflow: hidden !important; } /* ============================================= ARTIST PAGES — PUBLICATIONS ALWAYS USE 3-COLUMN GRID ON DESKTOP ============================================= */ @media screen and (min-width: 769px) { body.page-artists #scroll_section_publications .records_list > ul { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 30px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } body.page-artists #scroll_section_publications .records_list > ul > li { width: auto !important; max-width: none !important; float: none !important; clear: none !important; margin: 0 !important; padding: 0 !important; } } @media screen and (min-width: 600px) and (max-width: 768px) { body.page-artists #scroll_section_publications .records_list > ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; } } @media screen and (max-width: 599px) { body.page-artists #scroll_section_publications .records_list > ul { display: grid !important; grid-template-columns: 1fr !important; gap: 20px !important; } } /* ============================================= ARTIST PAGES — PUBLICATIONS CARD LAYOUT Image above; heading + subheading underneath. Hide date, description and Read more. ============================================= */ body.page-artists #scroll_section_publications .records_list > ul > li > a { display: block !important; width: 100% !important; height: auto !important; } body.page-artists #scroll_section_publications .records_list > ul > li .image { position: relative !important; display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 3 / 2 !important; margin: 0 0 10px 0 !important; overflow: hidden !important; } body.page-artists #scroll_section_publications .records_list > ul > li .image > span, body.page-artists #scroll_section_publications .records_list > ul > li .image .object-fit-container { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; } body.page-artists #scroll_section_publications .records_list > ul > li .image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* Put publication copy underneath the image */ body.page-artists #scroll_section_publications .records_list > ul > li .content { position: static !important; display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } /* Heading */ body.page-artists #scroll_section_publications .records_list > ul > li .content h2, body.page-artists #scroll_section_publications .records_list > ul > li .content .title { display: block !important; margin: 0 !important; padding: 0 !important; } /* Subheading only */ body.page-artists #scroll_section_publications .records_list > ul > li .content .subtitle { display: block !important; margin: 0 !important; padding: 0 !important; } /* Remove all extra publication metadata / actions */ body.page-artists #scroll_section_publications .records_list > ul > li .content .date, body.page-artists #scroll_section_publications .records_list > ul > li .content .description, body.page-artists #scroll_section_publications .records_list > ul > li .content .link, body.page-artists #scroll_section_publications .records_list > ul > li .content .read_more, body.page-artists #scroll_section_publications .records_list > ul > li .content .price, body.page-artists #scroll_section_publications .records_list > ul > li .content .location { display: none !important; } /* ============================================= ARTIST PAGES — GLOBAL EMPTY RELATED CONTENT CLEANUP Stories uses the Artist Related Content panel and only shows News + Events. If neither exists, remove BOTH the empty dynamic panel and its immediately-following "Explore more" text panel. Applies to every artist page. ============================================= */ /* Hide Related Content / Stories when there is no News or Event record. This checks the actual source records rather than animation classes. */ body.page-artists .feature_panels_inner > ul > li.panel_related_content:not( :has( > section#scroll_section_related_content .records_list > ul > li:is(.related-news, .related-events) ) ) { display: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* Hide the orphaned Explore more panel that belongs to that empty section. */ body.page-artists .feature_panels_inner > ul > li.panel_related_content:not( :has( > section#scroll_section_related_content .records_list > ul > li:is(.related-news, .related-events) ) ) + li.panel_text.panel_type_2.no_image { display: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* When Stories DOES contain News/Event records and has an Explore more panel, keep the spacing compact and remove Artlogic's divider. */ body.page-artists .feature_panels_inner > ul > li.panel_related_content:has( > section#scroll_section_related_content .records_list > ul > li:is(.related-news, .related-events) ):has(+ li.panel_text.panel_type_2.no_image) { margin-bottom: 0 !important; padding-bottom: 10px !important; } body.page-artists .feature_panels_inner > ul > li.panel_related_content:has( > section#scroll_section_related_content .records_list > ul > li:is(.related-news, .related-events) ) + li.panel_text.panel_type_2.no_image { margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; } /* ============================================= ARTIST PAGES — EXPLORE MORE DIVIDER CLEANUP Remove divider lines from Explore more utility panels after populated dynamic sections, including Publications and Stories. ============================================= */ body.page-artists .feature_panels_inner > ul > li:is( .panel_press, .panel_videos, .panel_exhibitions, .panel_news, .panel_events, .panel_publications, .panel_art-fairs, .panel_related_content ) + li.panel_text.panel_type_2.no_image { border-top: none !important; border-bottom: none !important; margin-top: 0 !important; padding-top: 0 !important; } /* Prevent pseudo-element rules from drawing an extra horizontal divider around Explore more panels. */ body.page-artists .feature_panels_inner > ul > li.panel_text.panel_type_2.no_image::before, body.page-artists .feature_panels_inner > ul > li.panel_text.panel_type_2.no_image::after { content: none !important; display: none !important; } /* ============================================= ARTIST PAGES — PUBLICATIONS REMOVE GREY DIVIDER UNDER CARD TEXT ============================================= */ body.page-artists #scroll_section_publications .records_list > ul > li .content .subtitle, body.page-artists #scroll_section_publications .records_list > ul > li .content .date, body.page-artists #scroll_section_publications .records_list > ul > li .content .description, body.page-artists #scroll_section_publications .records_list > ul > li .content .link { border-bottom: none !important; } /* Also remove any inherited divider from the publication content wrapper itself. */ body.page-artists #scroll_section_publications .records_list > ul > li .content { border-bottom: none !important; } /* ============================================= ARTIST PAGES — PUBLICATIONS INFO SPACING Match the title/subtitle rhythm used by Stories / News cards. ============================================= */ body.page-artists #scroll_section_publications .records_list > ul > li .content h2, body.page-artists #scroll_section_publications .records_list > ul > li .content .title { margin: 0 !important; padding-top: 2px !important; padding-bottom: 5px !important; } body.page-artists #scroll_section_publications .records_list > ul > li .content .subtitle { margin: 0 !important; padding: 0 !important; } /* ============================================= ARTIST HERO — ROMIE GLYPHS ONLY Keep Artlogic's hero content untouched; only ensure hero titles use RomieBrand with the intended alternate glyphs (including G). ============================================= */ body.page-artists .hero_heading .fp_title, body.page-artists .hero_heading h1, body.page-artists .hero_heading h2 { font-family: 'RomieBrand', 'Romie', serif !important; font-feature-settings: 'ss01' on, 'ss14' on, 'case' on, 'liga' on !important; font-variant-ligatures: common-ligatures !important; text-transform: uppercase !important; font-weight: 400 !important; } /* ============================================= ENQUIRY LIST — PLUS / CHECK INSTEAD OF HEART Keeps Artlogic's native wishlist functionality intact. ============================================= */ .wishlist_button { position: relative !important; width: 22px !important; height: 22px !important; min-width: 22px !important; background: none !important; overflow: visible !important; font-size: 0 !important; line-height: 1 !important; } /* Suppress Artlogic's native heart artwork/icon. */ .wishlist_button > * { opacity: 0 !important; } .wishlist_button::before { content: "+" !important; display: flex !important; align-items: center !important; justify-content: center !important; position: absolute !important; inset: 0 !important; font-family: 'Diatype Medium', sans-serif !important; font-size: 1.35rem !important; font-weight: 400 !important; line-height: 1 !important; color: #000 !important; opacity: 1 !important; } /* Common Artlogic/state-class possibilities for an item already saved. */ .wishlist_button.added::before, .wishlist_button.active::before, .wishlist_button.selected::before, .wishlist_button.in_wishlist::before, .wishlist_button.is-active::before, .wishlist_button.is_added::before, .wishlist_button.wishlist_button_added::before, .wishlist_button[aria-pressed="true"]::before, .wishlist_button[data-status="added"]::before, .wishlist_button[data-added="true"]::before { content: "✓" !important; font-size: 1.05rem !important; } /* ============================================= ENQUIRY LIST POPUP — REMOVE BUTTON ARROWS The site's general button rule adds arrows globally; suppress them only inside Artlogic wishlist/enquiry-list popups. ============================================= */ :is( #wishlist_popup, #wishlist_popup_container, .wishlist_popup, .wishlist-popup, .wishlist_popup_container, .wishlist-popup-container, .wishlist_overlay, .wishlist-overlay, .store_item_popup, .store-item-popup ) .button::before, :is( #wishlist_popup, #wishlist_popup_container, .wishlist_popup, .wishlist-popup, .wishlist_popup_container, .wishlist-popup-container, .wishlist_overlay, .wishlist-overlay, .store_item_popup, .store-item-popup ) .button a::before, :is( #wishlist_popup, #wishlist_popup_container, .wishlist_popup, .wishlist-popup, .wishlist_popup_container, .wishlist-popup-container, .wishlist_overlay, .wishlist-overlay, .store_item_popup, .store-item-popup ) a.button::before, :is( #wishlist_popup, #wishlist_popup_container, .wishlist_popup, .wishlist-popup, .wishlist_popup_container, .wishlist-popup-container, .wishlist_overlay, .wishlist-overlay, .store_item_popup, .store-item-popup ) .cms_button::before { content: none !important; display: none !important; margin: 0 !important; } /* ============================================= HEADER — ENQUIRY LIST TEXT LINK Replace the wishlist/heart header icon with a clear text label. Keeps Artlogic's existing wishlist cart link and count behaviour. ============================================= */ #wishlist_cart_widget { width: auto !important; min-width: 0 !important; height: auto !important; overflow: visible !important; } #wishlist_cart_widget::before { content: none !important; display: none !important; } #wishlist_cart_widget .wishlist_cart_widget_inner { display: flex !important; align-items: center !important; width: auto !important; height: auto !important; } #wishlist_cart_widget .wishlist_cart_widget_inner::before { content: "View enquiries list" !important; display: inline-block !important; font-family: 'Diatype Medium', sans-serif !important; font-size: 0.9rem !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: 0.5px !important; color: #000 !important; white-space: nowrap !important; } /* Hide the native wishlist/heart icon but keep the widget clickable. */ #wishlist_cart_widget .wishlist_cart_widget_inner > * { display: none !important; } /* Preserve the whole widget as a clickable target. */ #wishlist_cart_widget, #wishlist_cart_widget .wishlist_cart_widget_inner { cursor: pointer !important; } /* ============================================= ENQUIRY LIST PAGE — EDITORIAL FULL-WIDTH LAYOUT Rebuild Artlogic wishlist/basket page to match SMG design: list full width first, then enquiry form below. ============================================= */ /* Main page structure */ body.section-wishlist #main_content, body.page-wishlist #main_content { width: 100% !important; } body.section-wishlist .subsection--store-basket, body.page-wishlist .subsection--store-basket { display: block !important; width: 100% !important; } body.section-wishlist .subsection--store-basket > #content_module, body.page-wishlist .subsection--store-basket > #content_module, body.section-wishlist .subsection--store-basket > #sidebar, body.page-wishlist .subsection--store-basket > #sidebar { float: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Page heading */ body.section-wishlist #content_module > h2, body.page-wishlist #content_module > h2 { font-family: 'Diatype Medium', sans-serif !important; font-size: 2rem !important; line-height: 1.1 !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; margin: 0 0 18px 0 !important; padding: 0 0 18px 0 !important; border-bottom: 1px solid #ddd !important; } /* "Item / Event" label */ body.section-wishlist #wc_contents_container::before, body.page-wishlist #wc_contents_container::before { content: "Item / Event" !important; display: block !important; font-family: 'Diatype Medium', sans-serif !important; font-size: 0.95rem !important; line-height: 1.2 !important; margin-bottom: 8px !important; } /* Reset Artlogic table */ body.section-wishlist table#wishlist_information, body.page-wishlist table#wishlist_information { width: 100% !important; border-collapse: collapse !important; border-spacing: 0 !important; table-layout: fixed !important; margin: 0 !important; } body.section-wishlist table#wishlist_information tbody, body.page-wishlist table#wishlist_information tbody { display: block !important; width: 100% !important; } body.section-wishlist table#wishlist_information tr.product_detail, body.page-wishlist table#wishlist_information tr.product_detail { display: grid !important; grid-template-columns: minmax(0, 1fr) 28px !important; align-items: center !important; width: 100% !important; min-height: 74px !important; border-bottom: 1px solid #e5e5e5 !important; } body.section-wishlist table#wishlist_information tr.product_detail:first-child, body.page-wishlist table#wishlist_information tr.product_detail:first-child { border-top: none !important; } body.section-wishlist table#wishlist_information td, body.page-wishlist table#wishlist_information td { display: block !important; width: auto !important; padding: 10px 0 !important; border: 0 !important; vertical-align: middle !important; } /* Artwork/item cell */ body.section-wishlist table#wishlist_information td.sc_cell_item > a, body.page-wishlist table#wishlist_information td.sc_cell_item > a { display: grid !important; grid-template-columns: 54px minmax(200px, 260px) minmax(0, 1fr) !important; column-gap: 22px !important; align-items: center !important; width: 100% !important; color: #000 !important; text-decoration: none !important; } /* Thumbnail */ body.section-wishlist table#wishlist_information td.sc_cell_item .image, body.page-wishlist table#wishlist_information td.sc_cell_item .image { display: block !important; width: 54px !important; height: 54px !important; margin: 0 !important; overflow: hidden !important; } body.section-wishlist table#wishlist_information td.sc_cell_item .image img, body.page-wishlist table#wishlist_information td.sc_cell_item .image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Artist + work title */ body.section-wishlist table#wishlist_information td.sc_cell_item .title, body.page-wishlist table#wishlist_information td.sc_cell_item .title { display: block !important; margin: 0 !important; padding: 0 !important; font-family: 'Diatype Medium', sans-serif !important; font-size: 0.95rem !important; line-height: 1.22 !important; font-weight: 400 !important; color: #000 !important; } /* Medium / dimensions / further details */ body.section-wishlist table#wishlist_information td.sc_cell_item .details, body.page-wishlist table#wishlist_information td.sc_cell_item .details { display: block !important; margin: 0 !important; padding: 0 !important; font-family: 'Diatype Medium', sans-serif !important; font-size: 0.95rem !important; line-height: 1.22 !important; font-weight: 400 !important; color: #000 !important; } /* Remove X */ body.section-wishlist table#wishlist_information td.sc_cell_remove, body.page-wishlist table#wishlist_information td.sc_cell_remove { text-align: right !important; padding-left: 8px !important; } body.section-wishlist table#wishlist_information td.sc_cell_remove a, body.page-wishlist table#wishlist_information td.sc_cell_remove a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; font-size: 1.05rem !important; line-height: 1 !important; color: #777 !important; text-decoration: none !important; } /* Divider before Submit form */ body.section-wishlist .subsection--store-basket > #sidebar, body.page-wishlist .subsection--store-basket > #sidebar { border-top: 1px solid #ddd !important; margin-top: 34px !important; padding-top: 28px !important; } /* Form container: left-aligned and deliberately narrower */ body.section-wishlist #sidebar #sc_checkout_container, body.page-wishlist #sidebar #sc_checkout_container, body.section-wishlist #sidebar .form, body.page-wishlist #sidebar .form { width: 58% !important; max-width: 760px !important; margin: 0 !important; } /* Submit heading */ body.section-wishlist #sidebar h2, body.page-wishlist #sidebar h2 { font-family: 'Diatype Medium', sans-serif !important; font-size: 0.95rem !important; line-height: 1.2 !important; font-weight: 400 !important; margin: 0 0 24px 0 !important; padding: 0 !important; text-transform: none !important; } /* Generic Artlogic checkout form rows */ body.section-wishlist #sidebar .form .form_row, body.page-wishlist #sidebar .form .form_row, body.section-wishlist #sidebar .form .formrow, body.page-wishlist #sidebar .form .formrow, body.section-wishlist #sidebar .form .field, body.page-wishlist #sidebar .form .field { margin: 0 0 18px 0 !important; padding: 0 !important; } body.section-wishlist #sidebar label, body.page-wishlist #sidebar label { display: block !important; font-family: 'Diatype Medium', sans-serif !important; font-size: 0.95rem !important; line-height: 1.2 !important; margin: 0 0 8px 0 !important; padding: 0 !important; } /* Inputs */ body.section-wishlist #sidebar input[type="text"], body.section-wishlist #sidebar input[type="email"], body.section-wishlist #sidebar input[type="tel"], body.section-wishlist #sidebar textarea, body.page-wishlist #sidebar input[type="text"], body.page-wishlist #sidebar input[type="email"], body.page-wishlist #sidebar input[type="tel"], body.page-wishlist #sidebar textarea { display: block !important; box-sizing: border-box !important; width: 100% !important; max-width: none !important; border: 1px solid #d8d8d8 !important; background: #fff !important; border-radius: 0 !important; box-shadow: none !important; font-family: 'Diatype Medium', sans-serif !important; font-size: 0.95rem !important; color: #000 !important; padding: 9px 10px !important; } body.section-wishlist #sidebar input[type="text"], body.section-wishlist #sidebar input[type="email"], body.section-wishlist #sidebar input[type="tel"], body.page-wishlist #sidebar input[type="text"], body.page-wishlist #sidebar input[type="email"], body.page-wishlist #sidebar input[type="tel"] { min-height: 38px !important; } body.section-wishlist #sidebar textarea, body.page-wishlist #sidebar textarea { min-height: 135px !important; resize: vertical !important; } /* Submit button */ body.section-wishlist #sidebar input[type="submit"], body.section-wishlist #sidebar button[type="submit"], body.section-wishlist #sidebar .button, body.page-wishlist #sidebar input[type="submit"], body.page-wishlist #sidebar button[type="submit"], body.page-wishlist #sidebar .button { width: auto !important; min-width: 0 !important; border: 1px solid #000 !important; background: #fff !important; color: #000 !important; border-radius: 0 !important; box-shadow: none !important; font-family: 'Diatype Medium', sans-serif !important; font-size: 0.9rem !important; line-height: 1 !important; padding: 9px 14px !important; text-transform: none !important; } /* No sitewide arrow inside the enquiry-list submit control */ body.section-wishlist #sidebar .button::before, body.section-wishlist #sidebar .button a::before, body.section-wishlist #sidebar a.button::before, body.page-wishlist #sidebar .button::before, body.page-wishlist #sidebar .button a::before, body.page-wishlist #sidebar a.button::before { content: none !important; display: none !important; } /* Tablet */ @media screen and (min-width: 769px) and (max-width: 1100px) { body.section-wishlist table#wishlist_information td.sc_cell_item > a, body.page-wishlist table#wishlist_information td.sc_cell_item > a { grid-template-columns: 50px minmax(180px, 230px) minmax(0, 1fr) !important; column-gap: 16px !important; } body.section-wishlist #sidebar #sc_checkout_container, body.page-wishlist #sidebar #sc_checkout_container, body.section-wishlist #sidebar .form, body.page-wishlist #sidebar .form { width: 72% !important; max-width: 680px !important; } } /* Mobile */ @media screen and (max-width: 768px) { body.section-wishlist #content_module > h2, body.page-wishlist #content_module > h2 { font-size: 1.6rem !important; } body.section-wishlist table#wishlist_information tr.product_detail, body.page-wishlist table#wishlist_information tr.product_detail { grid-template-columns: minmax(0, 1fr) 28px !important; align-items: start !important; padding: 10px 0 !important; } body.section-wishlist table#wishlist_information td.sc_cell_item > a, body.page-wishlist table#wishlist_information td.sc_cell_item > a { grid-template-columns: 48px minmax(0, 1fr) !important; grid-template-areas: "image title" "image details" !important; column-gap: 14px !important; row-gap: 4px !important; align-items: start !important; } body.section-wishlist table#wishlist_information td.sc_cell_item .image, body.page-wishlist table#wishlist_information td.sc_cell_item .image { grid-area: image !important; width: 48px !important; height: 48px !important; } body.section-wishlist table#wishlist_information td.sc_cell_item .title, body.page-wishlist table#wishlist_information td.sc_cell_item .title { grid-area: title !important; } body.section-wishlist table#wishlist_information td.sc_cell_item .details, body.page-wishlist table#wishlist_information td.sc_cell_item .details { grid-area: details !important; } body.section-wishlist #sidebar #sc_checkout_container, body.page-wishlist #sidebar #sc_checkout_container, body.section-wishlist #sidebar .form, body.page-wishlist #sidebar .form { width: 100% !important; max-width: none !important; } } /* ============================================= ENQUIRY LIST PAGE — REFINEMENTS Full-width list first; form underneath. Wider fields, visible Remove text, single-border submit button. ============================================= */ /* Keep the list full width, then place the form beneath it */ body.section-wishlist .subsection--store-basket > #content_module, body.page-wishlist .subsection--store-basket > #content_module, body.section-wishlist .subsection--store-basket > #sidebar, body.page-wishlist .subsection--store-basket > #sidebar { float: none !important; width: 100% !important; max-width: none !important; clear: both !important; } /* Form should sit underneath the list and have a generous working width */ body.section-wishlist #sidebar #sc_checkout_container, body.page-wishlist #sidebar #sc_checkout_container, body.section-wishlist #sidebar .form, body.page-wishlist #sidebar .form { width: 72% !important; max-width: 980px !important; margin: 0 !important; } /* Wider form controls */ body.section-wishlist #sidebar input[type="text"], body.section-wishlist #sidebar input[type="email"], body.section-wishlist #sidebar input[type="tel"], body.section-wishlist #sidebar textarea, body.page-wishlist #sidebar input[type="text"], body.page-wishlist #sidebar input[type="email"], body.page-wishlist #sidebar input[type="tel"], body.page-wishlist #sidebar textarea { width: 100% !important; max-width: none !important; } /* Make the remove control explicit and readable instead of an X */ body.section-wishlist table#wishlist_information td.sc_cell_remove, body.page-wishlist table#wishlist_information td.sc_cell_remove { width: 72px !important; min-width: 72px !important; text-align: right !important; padding-left: 14px !important; } body.section-wishlist table#wishlist_information td.sc_cell_remove a, body.page-wishlist table#wishlist_information td.sc_cell_remove a { width: auto !important; height: auto !important; min-width: 0 !important; padding: 0 !important; font-family: 'Diatype Medium', sans-serif !important; font-size: 0 !important; line-height: 1.2 !important; color: #777 !important; text-decoration: none !important; } body.section-wishlist table#wishlist_information td.sc_cell_remove a::before, body.page-wishlist table#wishlist_information td.sc_cell_remove a::before { content: "Remove" !important; display: inline-block !important; font-size: 0.9rem !important; line-height: 1.2 !important; } /* Allocate proper room for the Remove label */ body.section-wishlist table#wishlist_information tr.product_detail, body.page-wishlist table#wishlist_information tr.product_detail { grid-template-columns: minmax(0, 1fr) 86px !important; } /* Submit button: one clean border only, with arrow restored */ body.section-wishlist #sidebar .button, body.page-wishlist #sidebar .button { display: inline-flex !important; align-items: center !important; gap: 8px !important; width: auto !important; min-width: 0 !important; padding: 0 !important; border: 1px solid #000 !important; background: #fff !important; } body.section-wishlist #sidebar .button::before, body.page-wishlist #sidebar .button::before { content: "→" !important; display: inline-block !important; margin-left: 12px !important; font-size: 0.9rem !important; line-height: 1 !important; } body.section-wishlist #sidebar .button input, body.section-wishlist #sidebar .button button, body.section-wishlist #sidebar .button a, body.page-wishlist #sidebar .button input, body.page-wishlist #sidebar .button button, body.page-wishlist #sidebar .button a { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; padding: 10px 14px 10px 0 !important; } /* Tablet */ @media screen and (min-width: 769px) and (max-width: 1100px) { body.section-wishlist #sidebar #sc_checkout_container, body.page-wishlist #sidebar #sc_checkout_container, body.section-wishlist #sidebar .form, body.page-wishlist #sidebar .form { width: 82% !important; max-width: 820px !important; } } /* Mobile */ @media screen and (max-width: 768px) { body.section-wishlist table#wishlist_information tr.product_detail, body.page-wishlist table#wishlist_information tr.product_detail { grid-template-columns: minmax(0, 1fr) 66px !important; } body.section-wishlist table#wishlist_information td.sc_cell_remove, body.page-wishlist table#wishlist_information td.sc_cell_remove { width: 58px !important; min-width: 58px !important; } body.section-wishlist table#wishlist_information td.sc_cell_remove a::before, body.page-wishlist table#wishlist_information td.sc_cell_remove a::before { font-size: 0.82rem !important; } body.section-wishlist #sidebar #sc_checkout_container, body.page-wishlist #sidebar #sc_checkout_container, body.section-wishlist #sidebar .form, body.page-wishlist #sidebar .form { width: 100% !important; max-width: none !important; } } /* ============================================= ENQUIRY LIST PAGE — 66 / 34 LAYOUT + ALIGNMENT Desktop: list 66%, form 34%; align item content to top. Full-width divider under Item / Event. Header enquiry-list link sits cleanly left of burger. ============================================= */ @media screen and (min-width: 1101px) { body.section-wishlist .subsection--store-basket, body.page-wishlist .subsection--store-basket { display: grid !important; grid-template-columns: minmax(0, 66fr) minmax(0, 34fr) !important; column-gap: 42px !important; align-items: start !important; width: 100% !important; } body.section-wishlist .subsection--store-basket > #content_module, body.page-wishlist .subsection--store-basket > #content_module, body.section-wishlist .subsection--store-basket > #sidebar, body.page-wishlist .subsection--store-basket > #sidebar { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; clear: none !important; } /* Sidebar/form occupies full 34% column */ body.section-wishlist #sidebar #sc_checkout_container, body.page-wishlist #sidebar #sc_checkout_container, body.section-wishlist #sidebar .form, body.page-wishlist #sidebar .form { width: 100% !important; max-width: none !important; margin: 0 !important; } /* Remove the horizontal divider used by the stacked layout */ body.section-wishlist .subsection--store-basket > #sidebar, body.page-wishlist .subsection--store-basket > #sidebar { border-top: 0 !important; margin-top: 0 !important; padding-top: 0 !important; } } /* Item/Event heading line should span the full list column */ body.section-wishlist table#wishlist_information tr:first-child, body.page-wishlist table#wishlist_information tr:first-child { width: 100% !important; } body.section-wishlist table#wishlist_information th.sc_column_item, body.page-wishlist table#wishlist_information th.sc_column_item { display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 0 0 10px 0 !important; margin: 0 !important; border-bottom: 1px solid #e5e5e5 !important; } /* Ensure the heading row itself doesn't constrain the divider */ body.section-wishlist table#wishlist_information thead, body.page-wishlist table#wishlist_information thead { display: block !important; width: 100% !important; } body.section-wishlist table#wishlist_information thead tr, body.page-wishlist table#wishlist_information thead tr { display: block !important; width: 100% !important; } /* Artwork rows: align content to the top rather than vertically centered */ body.section-wishlist table#wishlist_information tr.product_detail, body.page-wishlist table#wishlist_information tr.product_detail { align-items: start !important; } body.section-wishlist table#wishlist_information td, body.page-wishlist table#wishlist_information td { vertical-align: top !important; } body.section-wishlist table#wishlist_information td.sc_cell_item > a, body.page-wishlist table#wishlist_information td.sc_cell_item > a { align-items: start !important; } body.section-wishlist table#wishlist_information td.sc_cell_item .title, body.page-wishlist table#wishlist_information td.sc_cell_item .title, body.section-wishlist table#wishlist_information td.sc_cell_item .details, body.page-wishlist table#wishlist_information td.sc_cell_item .details { align-self: start !important; } /* Keep thumbnail aligned with the top of the work-name block */ body.section-wishlist table#wishlist_information td.sc_cell_item .image, body.page-wishlist table#wishlist_information td.sc_cell_item .image { align-self: start !important; } /* Position Remove at the same top baseline */ body.section-wishlist table#wishlist_information td.sc_cell_remove, body.page-wishlist table#wishlist_information td.sc_cell_remove { align-self: start !important; padding-top: 10px !important; } /* Header enquiry link: place immediately left of the burger menu */ #header .header-ui-wrapper, #header .header-icons-wrapper, .header-ui-wrapper, .header-icons-wrapper { display: flex !important; align-items: center !important; } #wishlist_cart_widget { order: -1 !important; margin: 0 18px 0 0 !important; width: auto !important; min-width: max-content !important; } #wishlist_cart_widget .wishlist_cart_widget_inner { width: auto !important; min-width: max-content !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; } #wishlist_cart_widget .wishlist_cart_widget_inner::before { content: "View enquiries list" !important; white-space: nowrap !important; } /* Keep the menu control directly after the enquiry-list label */ #header .header-ui-wrapper .responsive_slide_nav_wrapper, #header .header-icons-wrapper .responsive_slide_nav_wrapper, .header-ui-wrapper .responsive_slide_nav_wrapper, .header-icons-wrapper .responsive_slide_nav_wrapper { order: 0 !important; margin-left: 0 !important; } /* ============================================= ENQUIRY LIST PAGE — FULL-WIDTH TITLE ROW Enquiry List spans both columns; Item/Event and Submit begin together on the next row. ============================================= */ @media screen and (min-width: 1101px) { body.section-wishlist .subsection--store-basket, body.page-wishlist .subsection--store-basket { grid-template-columns: minmax(0, 66fr) minmax(0, 34fr) !important; grid-template-rows: auto auto !important; column-gap: 42px !important; row-gap: 0 !important; align-items: start !important; } /* Expose the title and list as separate grid items */ body.section-wishlist .subsection--store-basket > #content_module, body.page-wishlist .subsection--store-basket > #content_module { display: contents !important; } /* Enquiry List heading spans the complete page width */ body.section-wishlist #content_module > h2, body.page-wishlist #content_module > h2 { grid-column: 1 / -1 !important; grid-row: 1 !important; width: 100% !important; box-sizing: border-box !important; margin: 0 0 18px 0 !important; padding: 0 0 18px 0 !important; border-bottom: 1px solid #ddd !important; } /* Artwork list begins beneath the heading, left column */ body.section-wishlist #content_module > #sc_contents_container, body.page-wishlist #content_module > #sc_contents_container { grid-column: 1 !important; grid-row: 2 !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } /* Submit/form begins on exactly the same row as Item/Event */ body.section-wishlist .subsection--store-basket > #sidebar, body.page-wishlist .subsection--store-basket > #sidebar { grid-column: 2 !important; grid-row: 2 !important; align-self: start !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border-top: 0 !important; } body.section-wishlist #sidebar h2, body.page-wishlist #sidebar h2 { margin-top: 0 !important; padding-top: 0 !important; } }