/* CSS imports ------------------- */ /* Forced mobile nav on all sizes ------------------- */ @import url('/lib/g/2.0/styles/responsive_topnav.css'); @import url('/lib/g/themes/aperture/2.0/styles/responsive_topnav.css'); /* Font imports ------------------- */ @font-face { font-family: "Diatype Medium"; src: url('/usr/documents/fonts/bold_font_woff/2/abcdiatype-medium-trial.woff') format('woff'), url('/usr/documents/fonts/bold_font_woff2/2/abcdiatype-medium-trial.woff2') format('woff2'), url('/usr/documents/fonts/bold_font_ttf/2/abcdiatype-medium-trial.ttf') format('truetype'); font-style: normal; font-weight: bold; } @font-face { font-family: "Diatype Medium"; src: url('/usr/documents/fonts/regular_font_woff/2/abcdiatype-medium-trial.woff') format('woff'), url('/usr/documents/fonts/regular_font_woff2/2/abcdiatype-medium-trial.woff2') format('woff2'), url('/usr/documents/fonts/regular_font_ttf/2/abcdiatype-medium-trial.ttf') format('truetype'); font-style: normal; font-weight: normal; } /* Background colour --------------*/ #header.header_transparent .dropdown-mask { background-color: transparent !important; } /* Feature popup colours ------------------- */ h1, .heading_wrapper h1, #header .inner, #footer, .countdown_container, .feature_list ul li .content .subtitle, #sidebar .feature_panels .records_list ul li, .sidebar .feature_panels .records_list ul li, .related_items_panel h3, .formats_list, .formats_list .formats_item, .subheading::after, .subheading::before, .related_items_panel > h3:after, .related_items_panel h3.related_items_panel_heading:after, .related_items_panel h2.related_items_panel_heading:after .share_link:not(.subnav_share_link), #social_sharing_links.popup_vertical, .social_sharing_links.popup_vertical, .store_item_group .store_items_standard, .store_items_standard .store_item, .page_stats, hr, #scw_popup_inner h3, #shopping_cart_information td, #wishlist_information td, #shopping_cart_information th, #wishlist_information th, #sc_additional_fields, #sc_checkout_content #sc_subtotal, #sc_checkout_content #sc_discount, #sc_checkout_content #sc_vat_total, #sc_checkout_content #sc_shipping_total, #sc_checkout_content #sc_order_total, div.arprompt .arpromptbuttons, div.arprompt button, #protected_path_login .protected_path_form_status_inner, #privacy_policy_form_msg{ border-color: #c1c1c1; } .buy_enquire_quick_view .quick-view-information { border-color: #c1c1c1; } .form .form_row .inputField, .form .form_row select, .form .form_row textarea, .form .form_row #captcha input, .form .form_row .g-recaptcha, #mc_embed_signup input, #protected_path_login .protected_path_field_row, #sc_checkout_content #shipping_container select, #sc_checkout_content #shipping_container .inputField, input, textarea, select { border-color: #ffffff; } /* Fonts----------------------------- */ /* Main body font ------------------- */ body, input, select, textarea { font-family: "Diatype Medium", Sans-serif; font-style:normal; font-weight:normal; } /* Heading and emphasis font ------------------- */ #logo a, #footer, #home_splash .content, .navigation ul li a, .link, .link a, .page_stats, .subheading span, .subheading, .subtitle, .poster, .date, .price, #hero_heading, #hero_header .title, #hero_header .subtitle, h1, h2, h3, h4, h5, h6, .fullscreen_slideshow .hero_splash_text, .records_list ul li .content .title, .records_list ul li .content .artist, #cover_page_slideshow_pager, #mc_embed_signup input.button, .countdown_clock, #artists-browser .artists-browser-label, .artists-browser .artists-browser-label { font-family: "Diatype Medium", Sans-serif; font-style:normal; font-weight:normal; } /* Navigation font ------------------- */ #top_nav.navigation ul li a, #top_nav #full_nav .dropdown-btn { font-family: "Diatype Medium", Sans-serif; font-style:normal; font-weight:normal; } /* User custom html-font sizing ------------------- */ html { font-size: 9.5px; } /* Title - Heading spacing and transform ------------------- */ /* Dynamically adjust font sizes so that headings and titles look larger (as lowercase appears smaller than uppercase) while the body size remains the same -------------------------- */ html { font-size: 13.78px; } body { font-size: 0.999637155298rem; line-height: 2.48rem; } h1, h2, h3, h4, h5, h6, #hero_header .title, .fullscreen_slideshow .hero_splash_text, #logo a, .navigation ul li a, #slide_nav_reveal, #header_quick_search .inputField, #header_quick_search input, #header_quick_search select, #header_quick_search textarea, #header_quick_search #header_quicksearch_btn, #footer #artlogic, #footer #copyright, #footer #copyright .copyright-text, #footer .small-links-container, .page-artists h1 #artist_years, .page-artists h1 .artist_years, .event-details-wrapper .event-details span, .subsection-press .records_list .content .link a, .section-press .records_list .content .link a, #store_cart_widget, .fullscreen_slideshow .hero_splash_text, .fullscreen_slideshow .hero_splash_text .title, .fullscreen_slideshow ul li .content h2, .fullscreen_slideshow ul li .content h2 a, .fullscreen_slideshow ul li .content h2 a:visited, .fullscreen_slideshow ul li .content h2 a .separator, .fullscreen_slideshow ul li .content h2 a .h1_subtitle, #image_gallery #content_module h3, .records_list .content h2, .records_list .content .subtitle, .records_list .content .date, .records_list .content .location , .records_list ul li .content .title, .records_list ul li .content .artist, .feature_panels .panel_image_text_adjacent .content h2, .feature_list ul li .content h2, .feature_list ul li .content .subtitle, .feature_list ul li .content .date, .feature_list ul li .content .location, .full_list ul li .content h2, .full_list ul li .content .subtitle, .full_list ul li .content .date, .records_list.detail_expand_grid .expander_detail #image_gallery #content_module .subtitle, .link, .button, .simple_list ul li, #social_links_list ul li, .page_stats .ps_item, .page_stats .ps_pages, #protected_path_login #container h1, #protected_path_login #container label, .subheading, .poster, .subtitle, .h1_subtitle, .location , .date, .price, #fancybox-title-main .artist strong, #mc_embed_signup input.button, #home_splash .content, #hero_header .subtitle, .feature_panels .panel_hero .hero_heading .subtitle, #hero_header .inner, .feature_panels .panel_hero .hero_heading > h2, .feature_panels .panel_hero .hero_heading > a > h2, #cover_page_slideshow_pager, #artists-browser, .artists-browser , .exhibition-header .h1_subtitle, #top_nav #full_nav .has_dropdown_items .dropdown-btn, #top_nav #full_nav .has_dropdown_items_mobile .dropdown-btn{ text-transform: none; } /* Text colours----------------------------- */ /* Heading and emphasis text colour ------------------- */ /* Colour #000000 */ h1, h1 a, h1 a:visited, h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited, h4, h4 a, h4 a:visited, h5, h5 a, h5 a:visited, h6, h6 a, h6 a:visited, .feature_panels .records_list.image_list ul li h2, .page-artists #artist_list ul li h2, .page-artists .artist_list ul li h2, .records_list .content h2, .records_list ul li h2 a, .feature_list ul li .content h2, .related_items_panel h3, .navigation ul li a:hover, .navigation ul li.active a:hover, .navigation ul li.active a, .navigation ul li.active a:visited, .records_list ul li .content .artist, .records_list ul li .content .title_and_year, .records_list ul li .content .title, #cover_page_slideshow_pager, #image_gallery #content_module h3 { color: #000000; } blockquote { border-left: 1px solid #000000; } #logo a, #logo a:visited { color: #000000; } /* Subheading and secondary emphasis text colour ------------------- */ .slideshow.splide p, input, select, textarea, .navigation ul li a, .navigation ul li a:visited, .records_list .content .description, .records_list ul li .content .description, .heading_wrapper h1 .h1_subtitle, .h1_subtitle, .subheading, .subtitle, .records_list .content .subtitle, .feature_list ul li .content .subtitle, .records_list .content .date, .records_list .content .location, .section-publications .records_list .content .description, .image_list ul li .content .title, .flow_list ul li .content .title, .page_stats .ps_pages, .page_stats .ps_item, .price, .date, .location, .poster, .subtitle, .records_list ul li a:not(.website_contact_form):not(.buy_enquire_detail_link), .records_list ul li a:not(.website_contact_form):not(.buy_enquire_detail_link):visited, #image_gallery #content_module .detail_view_module, .image_list ul li .content, .flow_list ul li .content, .tile_list ul li .content, .tile_list ul li .content .title, #shopping_cart_information td.sc_cell_item .details, #sc_total_price_container .order_total_wrapper, #footer, #footer a:not(.submit_button), #footer a:visited:not(.submit_button), .page-artworks #image_gallery .subtitle, .page-artworks .image_list ul li .content, .records_list ul li .signed_and_dated, .records_list ul li .dimensions, .records_list ul li .medium, .records_list ul li .read_more_label, .records_list ul li .series, #artists-browser, .artists-browser , .buy_now_enquire>.enquire_button_container.clearwithin > .button > a{ color: #000000; } .page_stats .disabled, .ps_item.disabled { color: #000000; opacity: 0.5; } /* Body/main text colour ------------------- */ body, a, a:visited, a:hover, #social_sharing_links.popup_vertical ul li.social_links_item a, #social_sharing_links.popup_vertical ul li.social_links_item a:visited, .social_sharing_links.popup_vertical ul li.social_links_item a, .social_sharing_links.popup_vertical ul li.social_links_item a:visited, .page-artists .subsection-works #image_gallery .subtitle, .page_stats .ps_item a, .page_stats .ps_item a:visited, .page-artworks #image_gallery .subtitle, .fancybox-skin, div.arprompt, .records_list .content, div.arprompt .arpromptmessage, .fancybox-type-image .fancybox-close::after, .fancybox-type-image .fancybox-prev span:after, .fancybox-type-image .fancybox-next span:after, .store_items_condensed .store_item_add_to_cart span, .store_items_condensed .store_item_add_to_cart.button span, .store_items_standard .store_item_remove_container .store_item_remove_from_cart:after, .subsection-store-products-record .store_item_remove_container .store_item_remove_from_cart:after, #sc_checkout_container #sc_checkout_payment_form .form_row .inputField, #sc_checkout_container #sc_checkout_payment_form .form_row input, .filters_panel .fp-module input[type=checkbox]+label, .filters_panel .fp-module .slider_label { color: #000000; } #privacy_policy_form_msg { color: #000000; opacity: 0.5; } /* Link text color ------------------- */ .link, .link:hover, .link span, .link span:hover, .link a, .link a:hover, .link a:visited, #mc_embed_signup input.button, .simple_list ul li a, a.external { color: #c1c1c1; } /* Header layout ------------------- */ /* Dynamically created grid layout css ------------------- */ /* artfairs - tile_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.tile_list.grid_dynamic_layout_artfairs ul { width: calc(25.0% - 20px) }} .records_list.grid_dynamic_layout_artfairs ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artfairs ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artfairs ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artfairs ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artfairs ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_artfairs ul li .image::after {display:block;} .records_list.grid_dynamic_layout_artfairs ul li .image > span {position: absolute;} .records_list.grid_dynamic_layout_artfairs ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_artfairs .tile_list_formatted { margin-right: -20px; } .records_list.grid_dynamic_layout_artfairs .tile_list_formatted ul { padding-right: 20px; } } /* instagram - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_instagram:not(.feature_list) > ul > li { width:25.0% }} .records_list.feature_list.grid_dynamic_layout_instagram:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_instagram:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_instagram ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_instagram ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_instagram ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_instagram > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_instagram > ul > li { padding-right: 20px; } } /* artworks - tile_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.tile_list.grid_dynamic_layout_artworks ul { width: calc(25.0% - 20px) }} .records_list.grid_dynamic_layout_artworks ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artworks ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artworks ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artworks ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artworks ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_artworks ul li .image::after {display:block;} .records_list.grid_dynamic_layout_artworks ul li .image > span {position: absolute;} .records_list.grid_dynamic_layout_artworks ul li .image::after { padding-top:150.0%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_artworks .tile_list_formatted { margin-right: -20px; } .records_list.grid_dynamic_layout_artworks .tile_list_formatted ul { padding-right: 20px; } } /* default image grid - tile_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.tile_list.grid_dynamic_layout_default_image_grid ul { width: calc(25.0% - 20px) }} .records_list.feature_list.grid_dynamic_layout_default_image_grid:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_default_image_grid:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_default_image_grid ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_default_image_grid ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_default_image_grid ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_default_image_grid .tile_list_formatted { margin-right: -20px; } .records_list.grid_dynamic_layout_default_image_grid .tile_list_formatted ul { padding-right: 20px; } } /* video - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_video:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_video ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_video ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_video ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_video ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_video ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_video ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_video > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_video > ul > li { padding-right: 20px; } } /* default grid - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_default_grid:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_default_grid ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_default_grid ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_default_grid ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_default_grid ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_default_grid ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_default_grid ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_default_grid > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_default_grid > ul > li { padding-right: 20px; } } /* artists - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artists:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_artists ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artists ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artists ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artists ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artists ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_artists ul li .image::after { padding-top:150.0%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_artists > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_artists > ul > li { padding-right: 20px; } } /* video featured - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_video_featured ul { width:100%;}} .records_list.grid_dynamic_layout_video_featured ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_video_featured ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_video_featured ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_video_featured ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_video_featured ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_video_featured ul li .image::after { padding-top:66.6666666667%; } /* artist works categories - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artist_works_categories:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_artist_works_categories ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artist_works_categories ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artist_works_categories ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artist_works_categories ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artist_works_categories ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_artist_works_categories ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_artist_works_categories > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_artist_works_categories > ul > li { padding-right: 20px; } } /* exhibitions - tile_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.tile_list.grid_dynamic_layout_exhibitions ul { width: calc(25.0% - 20px) }} .records_list.grid_dynamic_layout_exhibitions ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_exhibitions ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_exhibitions ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_exhibitions ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_exhibitions ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_exhibitions ul li .image::after {display:block;} .records_list.grid_dynamic_layout_exhibitions ul li .image > span {position: absolute;} .records_list.grid_dynamic_layout_exhibitions ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_exhibitions .tile_list_formatted { margin-right: -20px; } .records_list.grid_dynamic_layout_exhibitions .tile_list_formatted ul { padding-right: 20px; } } /* events works - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_events:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_events ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_events ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_events ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_events ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_events ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_events ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_events > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_events > ul > li { padding-right: 20px; } } /* exhibitions installation - slideshow-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_exhibitions_installation:not(.feature_list) > ul > li { width:25.0% }} .records_list.feature_list.grid_dynamic_layout_exhibitions_installation:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_exhibitions_installation:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_exhibitions_installation ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_exhibitions_installation ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_exhibitions_installation ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_exhibitions_installation > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_exhibitions_installation > ul > li { padding-right: 20px; } } /* artist installation - slider-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artist_installation:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_artist_installation ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artist_installation ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artist_installation ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artist_installation ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artist_installation ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_artist_installation ul li .image::after { padding-top:150.0%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_artist_installation > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_artist_installation > ul > li { padding-right: 20px; } } /* blog - reading_list-------------------------------------- */ .records_list.grid_dynamic_layout_blog ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_blog ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_blog ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_blog ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_blog ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_blog ul li .image::after { padding-top:66.6666666667%; } /* store featured - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_store_featured ul { width:100%;}} .records_list.grid_dynamic_layout_store_featured ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_store_featured ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_store_featured ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_store_featured ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_store_featured ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_store_featured ul li .image::after { padding-top:66.6666666667%; } /* events featured - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_events_featured ul { width:100%;}} .records_list.grid_dynamic_layout_events_featured ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_events_featured ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_events_featured ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_events_featured ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_events_featured ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_events_featured ul li .image::after { padding-top:66.6666666667%; } /* artwork categories landing - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artwork_categories_landing:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_artwork_categories_landing ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artwork_categories_landing ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artwork_categories_landing ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artwork_categories_landing ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artwork_categories_landing ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_artwork_categories_landing ul li .image::after { padding-top:150.0%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_artwork_categories_landing > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_artwork_categories_landing > ul > li { padding-right: 20px; } } /* events - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_events:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_events ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_events ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_events ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_events ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_events ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_events ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_events > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_events > ul > li { padding-right: 20px; } } /* store - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_store:not(.feature_list) > ul > li { width:25.0% }} .records_list.feature_list.grid_dynamic_layout_store:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_store:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_store ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_store ul li .image > span { -webkit-justify-content:flex-start; justify-content: flex-start; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_store ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_store > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_store > ul > li { padding-right: 20px; } } /* default feature grid - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_default_feature_grid ul { width:100%;}} .records_list.grid_dynamic_layout_default_feature_grid ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_default_feature_grid ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_default_feature_grid ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_default_feature_grid ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_default_feature_grid ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_default_feature_grid ul li .image::after { padding-top:66.6666666667%; } /* feature panels - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_feature_panels:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_feature_panels ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_feature_panels ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_feature_panels ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_feature_panels ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_feature_panels ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_feature_panels ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_feature_panels > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_feature_panels > ul > li { padding-right: 20px; } } /* exhibitions works - slideshow-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_exhibitions_works:not(.feature_list) > ul > li { width:25.0% }} .records_list.feature_list.grid_dynamic_layout_exhibitions_works:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_exhibitions_works:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_exhibitions_works ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_exhibitions_works ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_exhibitions_works ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_exhibitions_works > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_exhibitions_works > ul > li { padding-right: 20px; } } /* publications featured - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_publications_featured ul { width:100%;}} .records_list.grid_dynamic_layout_publications_featured ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_publications_featured ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_publications_featured ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_publications_featured ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_publications_featured ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_publications_featured ul li .image::after { padding-top:66.6666666667%; } /* press featured - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_press_featured ul { width:100%;}} .records_list.grid_dynamic_layout_press_featured ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_press_featured ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_press_featured ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_press_featured ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_press_featured ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_press_featured ul li .image::after { padding-top:66.6666666667%; } /* news featured - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_news_featured ul { width:100%;}} .records_list.grid_dynamic_layout_news_featured ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_news_featured ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_news_featured ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_news_featured ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_news_featured ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_news_featured ul li .image::after { padding-top:66.6666666667%; } /* artfairs featured - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_artfairs_featured ul { width:100%;}} .records_list.grid_dynamic_layout_artfairs_featured ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artfairs_featured ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artfairs_featured ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artfairs_featured ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artfairs_featured ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_artfairs_featured ul li .image::after { padding-top:66.6666666667%; } /* exhibitions featured - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_exhibitions_featured ul { width:100%;}} .records_list.grid_dynamic_layout_exhibitions_featured ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_exhibitions_featured ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_exhibitions_featured ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_exhibitions_featured ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_exhibitions_featured ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_exhibitions_featured ul li .image::after { padding-top:66.6666666667%; } /* press - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_press:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_press ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_press ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_press ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_press ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_press ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_press ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_press > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_press > ul > li { padding-right: 20px; } } /* news - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_news:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_news ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_news ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_news ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_news ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_news ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_news ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_news > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_news > ul > li { padding-right: 20px; } } /* viewing rooms featured forthcoming - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_viewing_rooms_featured_forthcoming ul { width:100%;}} .records_list.grid_dynamic_layout_viewing_rooms_featured_forthcoming ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_viewing_rooms_featured_forthcoming ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_viewing_rooms_featured_forthcoming ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_viewing_rooms_featured_forthcoming ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_viewing_rooms_featured_forthcoming ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_viewing_rooms_featured_forthcoming ul li .image::after { padding-top:66.6666666667%; } /* search - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_search:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_search ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_search ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_search ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_search ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_search ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_search ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_search > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_search > ul > li { padding-right: 20px; } } /* viewing rooms featured - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_viewing_rooms_featured ul { width:100%;}} .records_list.grid_dynamic_layout_viewing_rooms_featured ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_viewing_rooms_featured ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_viewing_rooms_featured ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_viewing_rooms_featured ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_viewing_rooms_featured ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_viewing_rooms_featured ul li .image::after { padding-top:66.6666666667%; } /* viewing rooms works - tile_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.tile_list.grid_dynamic_layout_viewing_rooms_works ul { width: calc(25.0% - 20px) }} .records_list.feature_list.grid_dynamic_layout_viewing_rooms_works:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_viewing_rooms_works:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_viewing_rooms_works ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_viewing_rooms_works ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_viewing_rooms_works ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_viewing_rooms_works .tile_list_formatted { margin-right: -20px; } .records_list.grid_dynamic_layout_viewing_rooms_works .tile_list_formatted ul { padding-right: 20px; } } /* artist works - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artist_works:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_artist_works ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artist_works ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artist_works ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artist_works ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artist_works ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_artist_works ul li .image::after { padding-top:150.0%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_artist_works > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_artist_works > ul > li { padding-right: 20px; } } /* exhibitors - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_exhibitors:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_exhibitors ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_exhibitors ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_exhibitors ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_exhibitors ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_exhibitors ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_exhibitors ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_exhibitors > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_exhibitors > ul > li { padding-right: 20px; } } /* feature panels image grid - tile_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.tile_list.grid_dynamic_layout_feature_panels_image_grid ul { width: calc(25.0% - 20px) }} .records_list.feature_list.grid_dynamic_layout_feature_panels_image_grid:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_feature_panels_image_grid:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_feature_panels_image_grid ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_feature_panels_image_grid ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_feature_panels_image_grid ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_feature_panels_image_grid .tile_list_formatted { margin-right: -20px; } .records_list.grid_dynamic_layout_feature_panels_image_grid .tile_list_formatted ul { padding-right: 20px; } } /* publications - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_publications:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_publications ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_publications ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_publications ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_publications ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_publications ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_publications ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_publications > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_publications > ul > li { padding-right: 20px; } } /* team - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_team:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_team ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_team ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_team ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_team ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_team ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_team ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_team > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_team > ul > li { padding-right: 20px; } } /* viewing rooms - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_viewing_rooms:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_viewing_rooms ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_viewing_rooms ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_viewing_rooms ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_viewing_rooms ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_viewing_rooms ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_viewing_rooms ul li .image::after { padding-top:66.6666666667%; } @media screen and (min-width:1023px) { .records_list.grid_dynamic_layout_viewing_rooms > ul { margin-right: -20px; } .records_list.grid_dynamic_layout_viewing_rooms > ul > li { padding-right: 20px; } } /* Dynamically created artist list css ------------------- */ .subsection-artist-list-preview-letters .artists_list_dynamic_columns ul { width:33.33% } .subsection-artist-list-standard .artists_list_dynamic_columns ul { width:33.33% } .subsection-artist-list-preview .artists_list_dynamic_columns ul { width:33.33% } /* Light and dark logo variants css ------------------- */ #logo .logo-variant-light { content:''; background-image:url(/usr/images/preferences/smg_logo_website-02.png)} #logo .logo-variant-dark { content:''; background-image:url(/usr/images/preferences/smg_logo_website-01.png)} /* Logo text color ------------------- */ #logo { background: none; width: 100%; min-width: 280px; max-width: 360px; } #header #logo.user-custom-logo-image::before { padding-top:4.79418886199%; } .device-highres #logo { background: none; } #logo a { background-image: url('https://static-assets.artlogic.net/w_1000,c_limit,f_auto,fl_lossy,q_auto/ws-smg/usr/images/preferences/smg_logo_website-01.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; } .browser-msie-6 #logo a, .browser-msie-7 #logo a, .browser-msie-8 #logo a, .browser-msie-9 #logo a, .browser-msie-10 #logo a { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static-assets.artlogic.net/w_1000,c_limit,f_auto,fl_lossy,q_auto/ws-smg/usr/images/preferences/smg_logo_website-01.png', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static-assets.artlogic.net/w_1000,c_limit,f_auto,fl_lossy,q_auto/ws-smg/usr/images/preferences/smg_logo_website-01.png', sizingMethod='scale')"; } #logo a { text-indent: -9999px; padding: 0; } /* Topnav text color ------------------- */ #header #store_cart_widget::before, #header #store_cart_widget.active:not(.empty)::before, #header #store_cart_widget::after, #header #store_cart_widget.active:not(.empty)::after, #top_nav.navigation ul li a, #top_nav.navigation ul li a:visited, #header_quick_search #header_quicksearch_btn, #responsive_slide_nav_wrapper #top_nav .header_quicksearch_field, #header_quick_search.active input, #header_quick_search.active select, #header_quick_search.active textarea, #header .social_media_icon, #translations_nav.navigation ul li a, #top_nav #full_nav .dropdown-btn, #top_nav #full_nav .has_dropdown_items .dropdown-btn, #top_nav #full_nav .has_dropdown_items_mobile .dropdown-btn { color: #000000; } #slide_nav_reveal::after { color: #000000; } #top_nav.navigation ul li.active a, #top_nav.navigation ul li.active a:visited, #header #store_cart_widget:hover::before, #header #store_cart_widget:hover::after, #top_nav.navigation ul li:hover a, #translations_nav.navigation ul li.active a, #translations_nav.navigation ul li:hover a, #top_nav #full_nav .dropdown-btn:hover { color: #000000; } /* Subnav text color ------------------- */ .navigation ul li.active a, .navigation ul li.active a:hover, .navigation ul li.active a:visited, body.type-fullscreen.fullscreen-slide-light .navigation ul li.active a { color: #000000; } /* Responsive nav text color ------------------- */ /* Responsive nav active / hover text color ------------------- */ /* Button text color ------------------- */ .button a, .button a:visited, .button a:hover, .button span, .button input, .buy_now_store_item_add_container>button.store_item_add_to_cart>span { color: #c1c1c1; } /* quick view button */ .buy_enquire_button button, a.buy_enquire_detail_link { color: #c1c1c1; } /* Hero section image opacity ------------------- */ .fullscreen-slide-dark .fullscreen_slideshow.hero_header_layout_center:not(.override-slide-brightness) ul li::before, .fullscreen_slideshow.hero_header_layout_center:not(.detect-slide-brightness):not(.override-slide-brightness) ul li::before, .fullscreen-slide-dark .fullscreen_slideshow.hero_header_layout_left-center:not(.override-slide-brightness) ul li::before, .fullscreen_slideshow.hero_header_layout_left-center:not(.detect-slide-brightness):not(.override-slide-brightness) ul li::before { background: rgba(0,0,0,0.1999999999999999555910790150) !important; } .fullscreen-slide-light .fullscreen_slideshow.hero_header_layout_center:not(.override-slide-brightness) ul li::before, .fullscreen-slide-light .fullscreen_slideshow.hero_header_layout_left-center:not(.override-slide-brightness) ul li::before { background: rgba(255,255,255,0.1999999999999999555910790150) !important; } /* don't show if opacity = 1 */ /* Hero section image height ------------------- */ ::root { --hero-height: 0vh } /* Home page slideshow / fullscreen video ui buttons ------------------- */ /* Hero header slideshow ui buttons ------------------- */ /* Carousel feature panel ui buttons ------------------- */ .slick-prev:before, .slick-next:before { background: #ffffff !important; } .slick-prev:before, .slick-next:before { color: #000000 !important; } @media screen and (max-width:360px) { #logo a { background-image: url('https://static-assets.artlogic.net/w_500,c_limit,f_auto,fl_lossy,q_auto/ws-smg/usr/images/preferences/smg_logo_website-01.png'); } } /* Artlogic preferences custom CSS - entered by Artlogic in the preferences screen ------------------- */ /* Remove artwork dimensions from embedded PV grid captions */ div.pv-dimensions { display: none !important; } /* Handle 'interests' checkboxes floating over labels on desktop */ @media screen and (min-width: 1388px) { #artlogic_mailinglist_signup_form div.multi-field input[type=checkbox] { position: absolute; /* left: 0; */ /* top: 5px; */ left: 3rem; top: 0px } } /* Client custom user CSS - entered by the client in the preferences screen ------------------- */ /* ============================================= FONT FACE DECLARATIONS ============================================= */ @font-face { font-family: 'Romie'; src: url('https://www.sarahmyerscough.com/usr/documents/fonts/regular_font_woff2/3/romie-regular-1-.woff2') format('woff2'), url('https://www.sarahmyerscough.com/usr/documents/fonts/regular_font_woff/3/romie-regular-1-.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Romie Italic'; src: url('https://www.sarahmyerscough.com/usr/documents/fonts/regular_font_woff2/4/romie-regular-italic-1-.woff2') format('woff2'), url('https://www.sarahmyerscough.com/usr/documents/fonts/regular_font_woff/4/romie-regular-italic-1-.woff') format('woff'); font-weight: 400; font-style: italic; } /* RomieBrand: italic variant for G/g, roman for everything else */ @font-face { font-family: 'RomieBrand'; src: url('https://www.sarahmyerscough.com/usr/documents/fonts/regular_font_woff2/4/romie-regular-italic-1-.woff2') format('woff2'), url('https://www.sarahmyerscough.com/usr/documents/fonts/regular_font_woff/4/romie-regular-italic-1-.woff') format('woff'); font-weight: 400; font-style: normal; unicode-range: U+0047, U+0067; } @font-face { font-family: 'RomieBrand'; src: url('https://www.sarahmyerscough.com/usr/documents/fonts/regular_font_woff2/3/romie-regular-1-.woff2') format('woff2'), url('https://www.sarahmyerscough.com/usr/documents/fonts/regular_font_woff/3/romie-regular-1-.woff') format('woff'); font-weight: 400; font-style: normal; unicode-range: U+0000-0046, U+0048-0066, U+0068-FFFF; } /* ============================================= GENERAL TYPOGRAPHY ============================================= */ * { letter-spacing: 0.5px !important; line-height: 120% !important; } 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; } /* REMOVED: this was suppressing the divider border-top on EVERY exhibition-autofill panel sitewide, not just the specific instance immediately after bio text it was originally meant for (see comment history) — that's what was making the line disappear above "Previous Solo Exhibition" and similar later-page instances. Removed so the line renders consistently, matching every other panel. */ #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; } @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; } /* ============================================= "TEXT COLUMNS WITH QUOTE" PANEL — HEADING/CONTENT ALIGNMENT Previous attempts used a separate selector chaining li.panel_type_11.feature_variant_1.no_image.panel_image_text_columns > .panel_heading + .content — confirmed via three independent tests (fresh private window, full-file parse validation, live-source diff) that this rule was never appearing in the browser's matched-rules list at all, despite being present verbatim in the served file and structurally matching the DOM. Cause undetermined — but rather than keep debugging a selector that demonstrably isn't reaching the cascade, this folds the offset directly into the rule immediately above, which IS confirmed rendering live (user_custom.css:2304). Excludes page-exhibitions/page-artists via :not() on body, since those page types already have their own specific negative-margin offsets (-125px/-91px) further below for a DIFFERENT alignment problem (aligning to the PAGE's h1, not a sibling .panel_heading) — this rule would otherwise stack on top of those and overshoot. -45px is a revised estimate — -60px overshot slightly (live-tested), brought back down. Check against the homepage and adjust again if still off. ============================================= */ body:not(.page-exhibitions):not(.page-artists) .panel_image_text_columns .content { position: relative !important; top: -45px !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; } /* -51px (was -91px) — reduced by exactly the 40px we removed from body.page-artists .feature_panels' top margin elsewhere in this file. That -91px was originally tuned to compensate for the panel starting 40px lower; removing that gap moved .content's natural starting position up 40px too, but the fixed -91px pull was still applying on top of that, overshooting past the correct alignment with the artist name. pull_quote_content (View CV) has no offset of its own, so it self-corrected when the gap was removed — this brings .content back in line with it. */ /* -66px (was -51px, was -91px originally) — moved up a further 15px per request. */ body.page-artists .panel_number_1.panel_image_text_columns .content { margin-top: -66px !important; } } /* ============================================= SUB-NAV BAR — hidden site-wide ============================================= */ #sub_nav { display: none !important; } /* ============================================= SERIES PAGE — H2 TYPOGRAPHY h2.series-title (the "Bleed Cabinets" heading shown when viewing an individual series) wasn't targeted by any rule above, so it was falling back to Artlogic's own native styling rather than matching the Diatype used elsewhere — this brings it in line so the Series listing page and the individual series detail page read consistently. ============================================= */ h2.series-title { font-family: 'Diatype Medium', sans-serif !important; text-transform: none !important; font-weight: 400 !important; font-size: 1.2rem !important; } /* Grid caption ("BLEED CABINETS" etc.) — Diatype instead of the sitewide Romie default (.records_list .content h2 above), scoped to the Series section only via Artlogic's own data-subsection-type marker, so this doesn't affect captions on other listing grids sitewide. Image sizing/ gutter changes for this same grid were reverted separately — this rule is text-only, unrelated to the image dimension issue that prompted that reversion. */ 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 Confirmed via inspector: #slide_nav_reveal (30x30, role=button) sits inside .header-icons-wrapper, a flex row alongside header_quick_search and store_cart_widget. Uses position:relative/top rather than margin-top — margin on a flex child here would risk shifting the other icons in the row too; this only moves it visually. ============================================= */ #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; } /* ============================================= .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; } /* ============================================= GLOBAL FULL-WIDTH IMAGE PANEL — TEXT OVERLAY ============================================= */ li.panel.panel_type_8.feature_variant_1 { position: relative !important; cursor: pointer !important; overflow: hidden !important; } li.panel.panel_type_8.feature_variant_1 > .image { position: relative !important; display: block !important; width: 100% !important; height: auto !important; padding-bottom: 0 !important; aspect-ratio: 21 / 2 !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; } /* Overlay the caption, vertically centred, left-aligned. Overrides the sitewide panel_type_8 padding (0/8px/0/0 set under "CONTENT BLOCK PADDING" above) intentionally — this variant needs breathing room from the image edge. padding-top: 40px (was 0) — the text was sitting too high within the box; since the box itself stays vertically centred via top:50%/translateY(-50%), adding top padding increases the box's own height without moving its centre, which pushes the actual text (excluded from the padding box) further down within it. First-pass estimate — check live and adjust. If this undershoots, the more likely root cause is the .image aspect-ratio rule above not rendering at the intended thin 21:2 ratio, making the image taller than designed — worth checking .image's own computed styles directly if padding alone doesn't fully fix it. */ li.panel.panel_type_8.feature_variant_1 > .content { position: absolute !important; left: 0 !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 2 !important; width: 100% !important; /* padding-left reduced from 40 to 30. padding-top stays 55 as the default (non-exhibition CTA panels), with an exception immediately below bumping it back to 70 specifically when h2.fp_title is present (exhibition/ press/publication-linked panels). */ padding: 55px 40px 0 40px !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; } 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"] { font-size: 1.7rem !important; line-height: 120% !important; min-height: 34px; margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Exception: exhibition/press/publication-linked panels (detected via presence of h2.fp_title) get extra padding- top instead of the 55 default above — wins on specificity via :has() regardless of source order. 95px (was 85px, before that 70px) — pushed 10px lower per request. */ li.panel.panel_type_8.feature_variant_1 > .content:has(h2.fp_title) { padding-top: 95px !important; } /* Subtitle/date increase — scoped specifically to feature_variant_1 (not the broader li.panel_type_8 .content span.subtitle/date rule under "GLOBAL LISTING TITLES" above, which also covers ordinary listing-grid thumbnails sitewide). This wins on specificity regardless of source order, so the smaller grid captions elsewhere stay untouched. */ 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; } li.panel.panel_type_8.feature_variant_1 > .content .description.prose { padding-top: 0 !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; } /* ============================================= FULL-WIDTH IMAGE PANEL — TEXT-ONLY VARIANT (no exhibition/press/publication data attached) Confirmed via inspector: the Peter Marigold "View all available works..." panel has ONLY .description.prose inside .content — h2.fp_title doesn't render at all when unpopulated (not just empty, absent from the DOM). The Luke Fuller "Everything and Nothing" and Christopher Kurtz "BADLANDS" panels DO have h2.fp_title populated. :has() lets this be detected structurally, so the arrow/ width/size treatment below only ever applies to the plain-CTA variant, never to an exhibition/press/ publication panel — no manual per-panel toggle needed. max-width and font-size are first-pass estimates, matching the narrower InDesign layout — check live and adjust both. ============================================= */ li.panel.panel_type_8.feature_variant_1 > .content:not(:has(h2.fp_title)) .description.prose { max-width: 500px !important; font-size: 1.1rem !important; } /* Hanging indent: text-indent pulls the FIRST line (arrow + space) back into a reserved gutter equal to padding-left, so the arrow sits alone at the left edge — any wrapped second/third line respects the padding-left instead and lines up under the first word of the text, not under the arrow. 1.2em is an estimate matching "→ "'s rendered width at this font-size — check live and adjust if lines 2+ sit slightly off from where "View" (or equivalent) starts. */ 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; } li.panel.panel_type_8.feature_variant_1 > .content:not(:has(h2.fp_title)) .description.prose p:first-of-type::before { content: "→ " !important; } /* ============================================= ARTWORKS LANDING PAGE — INTRO TEXT ============================================= */ @media screen and (min-width: 769px) { #content_module.content_below.prose.clearwithin.full_width { width: 50% !important; max-width: none !important; margin-left: 50% !important; margin-right: 0 !important; margin-bottom: 0 !important; padding-bottom: 15px !important; float: none !important; position: relative !important; top: -35px !important; } #content_module.content_below.prose.clearwithin.full_width p:last-of-type { margin-bottom: 0 !important; } #content_module.content_below.prose.clearwithin.full_width .divider { width: 200% !important; margin-left: -100% !important; margin-top: 30px !important; height: 0 !important; border-top: 1px solid #ddd !important; } } /* ============================================= CATEGORY / SUBCATEGORY PAGES WITH FILTERS PANEL ============================================= */ @media screen and (min-width: 768px) { .artworks_filters_container_type_above_list #content_module.content_below.prose.clearwithin.full_width { top: -130px !important; } .artworks_filters_container_type_above_list #content { position: relative !important; top: -50px !important; } .artworks_filters_container_type_above_list .subsection-artworks-categories-grid { position: relative !important; top: -20px !important; } .filters_panel .navigation_inner { max-width: 300px !important; margin-right: 40px !important; position: relative !important; top: 20px !important; } .filters_panel.filters_layout_above_list { margin-bottom: 0 !important; padding-bottom: 0 !important; padding-top: 10px !important; } .filters_panel .fp-modules { padding-bottom: 15px !important; } .filters_panel .fp-module { padding-top: 15px !important; padding-bottom: 25px !important; } .filters_panel .navigation_item { padding-top: 15px !important; } } /* ============================================= TABLET RANGE — WIDEN navigation_inner Confirmed via inspector: removing max-width on .navigation_inner alone didn't fully fix the "Recently added" wrap at iPad width — the checkbox item itself (li inside ul.group-items) carries its own Artlogic-native width constraint, independent of its ancestor's width. Both need unlocking together. ============================================= */ @media screen and (min-width: 768px) and (max-width: 1024px) { .filters_panel .navigation_inner { max-width: none !important; } .filters_panel ul.group-items li, .filters_panel .fp-checkbox-item, .filters_panel .fp-checkbox-item label { width: auto !important; white-space: nowrap !important; } } /* ============================================= MOBILE RANGE — FILTERS PANEL SPACING The desktop block above (padding on .fp-modules, .fp-module, .navigation_item) only fires at min-width:769px, so mobile was inheriting Artlogic's own native spacing untouched — the large blue/green/ orange padding blocks seen in DevTools. Same wrap risk as tablet applies here too, so the width fix is repeated at this breakpoint. ============================================= */ @media screen and (max-width: 767px) { .filters_panel.filters_layout_above_list { padding-bottom: 10px !important; margin-bottom: 0 !important; } .filters_panel .fp-modules { padding-bottom: 4px !important; } .filters_panel .fp-module { padding-top: 6px !important; padding-bottom: 6px !important; } .filters_panel .navigation_item { padding-top: 6px !important; } .filters_panel .navigation_inner { max-width: none !important; } .filters_panel ul.group-items li, .filters_panel .fp-checkbox-item, .filters_panel .fp-checkbox-item label { width: auto !important; white-space: nowrap !important; } } /* ============================================= MOBILE — CATEGORY PAGE INTRO TEXT ("If you are interested in a custom commission...") Confirmed via inspector: #content_module carries no rule of ours below 769px, so it sat flush under the Sort/checkbox row with no breathing room. margin-bottom 50px is Artlogic's own native value (layout.css, .content_module.content_below) — not previously set by us — scoped down here so the works grid isn't held away from the text by that much space on a narrow screen. ============================================= */ @media screen and (max-width: 767px) { #content_module.content_below.clearwithin.prose { margin-top: 20px !important; margin-bottom: 20px !important; } } /* ============================================= FILTER SORT CHECKBOX — square indicator ============================================= */ .filters_panel .fp-checkbox-item label::before { font-family: initial !important; content: '' !important; display: inline-block !important; width: 8px !important; height: 8px !important; font-size: 0 !important; border: 1px solid #999 !important; background: transparent !important; margin: 0 10px 0 0 !important; vertical-align: middle !important; position: relative !important; top: -2px !important; } .filters_panel .fp-checkbox-item input.fp-checkbox:checked + label::before { background: black !important; border-color: black !important; } .filters_panel .fp-checkbox-item label .checkmark { display: none !important; }