/* 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: "American Grotesk"; src: url('/usr/documents/fonts/regular_font_woff/1/american-grotesk-regular.woff') format('woff'), url('/usr/documents/fonts/regular_font_woff2/1/american-grotesk-regular.woff2') format('woff2'), url('/usr/documents/fonts/regular_font_ttf/1/american-grotesk-regular.ttf') format('truetype'); font-style: normal; font-weight: normal; } @font-face { font-family: "American Grotesk"; src: url('/usr/documents/fonts/bold_font_woff/1/american-grotesk-bold.woff') format('woff'), url('/usr/documents/fonts/bold_font_woff2/1/american-grotesk-bold.woff2') format('woff2'), url('/usr/documents/fonts/bold_font_ttf/1/american-grotesk-bold.ttf') format('truetype'); font-style: normal; font-weight: bold; } /* Background colour --------------*/ body.slide-nav-active #responsive_slide_nav_wrapper, #responsive_slide_nav_wrapper #top_nav .header_quicksearch_field { background-color: #000000 !important; } body.responsive-nav-side-position-fullscreen.slide-nav-open #responsive_slide_nav_wrapper::before { display: none; } #header.header_transparent .dropdown-mask { background-color: transparent !important; } /* Feature popup colours ------------------- */ .button, .full-width.store_item.store_item_dynamic_status.clearwithin>.store_item_controls>.buy_now_store_item_add_container>button.store_item_add_to_cart { background: #ffffff; } 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: #000000; } .buy_enquire_quick_view .quick-view-information { border-color: #000000; } .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: #000000; } /* Fonts----------------------------- */ /* Main body font ------------------- */ body, input, select, textarea { font-family: "American Grotesk", 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: "American Grotesk", Sans-serif; font-style:normal; font-weight:normal; } /* Navigation font ------------------- */ #top_nav.navigation ul li a, #top_nav #full_nav .dropdown-btn { font-family: "American Grotesk", Sans-serif; font-style:normal; font-weight:normal; } /* User custom html-font sizing ------------------- */ html { font-size: 10.0px; } /* 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: 14.5px; } body { font-size: 1.0rem; line-height: 2.48rem; } h1, h2, h3, h4, h5, h6, #hero_header .title, .fullscreen_slideshow .hero_splash_text, #logo a, .navigation ul li a, #slide_nav_reveal, #header_quick_search .inputField, #header_quick_search input, #header_quick_search select, #header_quick_search textarea, #header_quick_search #header_quicksearch_btn, #footer #artlogic, #footer #copyright, #footer #copyright .copyright-text, #footer .small-links-container, .page-artists h1 #artist_years, .page-artists h1 .artist_years, .event-details-wrapper .event-details span, .subsection-press .records_list .content .link a, .section-press .records_list .content .link a, #store_cart_widget, .fullscreen_slideshow .hero_splash_text, .fullscreen_slideshow .hero_splash_text .title, .fullscreen_slideshow ul li .content h2, .fullscreen_slideshow ul li .content h2 a, .fullscreen_slideshow ul li .content h2 a:visited, .fullscreen_slideshow ul li .content h2 a .separator, .fullscreen_slideshow ul li .content h2 a .h1_subtitle, #image_gallery #content_module h3, .records_list .content h2, .records_list .content .subtitle, .records_list .content .date, .records_list .content .location , .records_list ul li .content .title, .records_list ul li .content .artist, .feature_panels .panel_image_text_adjacent .content h2, .feature_list ul li .content h2, .feature_list ul li .content .subtitle, .feature_list ul li .content .date, .feature_list ul li .content .location, .full_list ul li .content h2, .full_list ul li .content .subtitle, .full_list ul li .content .date, .records_list.detail_expand_grid .expander_detail #image_gallery #content_module .subtitle, .link, .button, .simple_list ul li, #social_links_list ul li, .page_stats .ps_item, .page_stats .ps_pages, #protected_path_login #container h1, #protected_path_login #container label, .subheading, .poster, .subtitle, .h1_subtitle, .location , .date, .price, #fancybox-title-main .artist strong, #mc_embed_signup input.button, #home_splash .content, #hero_header .subtitle, .feature_panels .panel_hero .hero_heading .subtitle, #hero_header .inner, .feature_panels .panel_hero .hero_heading > h2, .feature_panels .panel_hero .hero_heading > a > h2, #cover_page_slideshow_pager, #artists-browser, .artists-browser , .exhibition-header .h1_subtitle, #top_nav #full_nav .has_dropdown_items .dropdown-btn, #top_nav #full_nav .has_dropdown_items_mobile .dropdown-btn{ text-transform: none; letter-spacing: 0; } /* Text colours----------------------------- */ /* Heading and emphasis text colour ------------------- */ /* Colour #000000 */ h1, h1 a, h1 a:visited, h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited, h4, h4 a, h4 a:visited, h5, h5 a, h5 a:visited, h6, h6 a, h6 a:visited, .feature_panels .records_list.image_list ul li h2, .page-artists #artist_list ul li h2, .page-artists .artist_list ul li h2, .records_list .content h2, .records_list ul li h2 a, .feature_list ul li .content h2, .related_items_panel h3, .navigation ul li a:hover, .navigation ul li.active a:hover, .navigation ul li.active a, .navigation ul li.active a:visited, .records_list ul li .content .artist, .records_list ul li .content .title_and_year, .records_list ul li .content .title, #cover_page_slideshow_pager, #image_gallery #content_module h3 { color: #000000; } blockquote { border-left: 1px solid #000000; } #logo a, #logo a:visited { color: #000000; } /* Subheading and secondary emphasis text colour ------------------- */ .slideshow.splide p, input, select, textarea, .navigation ul li a, .navigation ul li a:visited, .records_list .content .description, .records_list ul li .content .description, .heading_wrapper h1 .h1_subtitle, .h1_subtitle, .subheading, .subtitle, .records_list .content .subtitle, .feature_list ul li .content .subtitle, .records_list .content .date, .records_list .content .location, .section-publications .records_list .content .description, .image_list ul li .content .title, .flow_list ul li .content .title, .page_stats .ps_pages, .page_stats .ps_item, .price, .date, .location, .poster, .subtitle, .records_list ul li a:not(.website_contact_form):not(.buy_enquire_detail_link), .records_list ul li a:not(.website_contact_form):not(.buy_enquire_detail_link):visited, #image_gallery #content_module .detail_view_module, .image_list ul li .content, .flow_list ul li .content, .tile_list ul li .content, .tile_list ul li .content .title, #shopping_cart_information td.sc_cell_item .details, #sc_total_price_container .order_total_wrapper, #footer, #footer a:not(.submit_button), #footer a:visited:not(.submit_button), .page-artworks #image_gallery .subtitle, .page-artworks .image_list ul li .content, .records_list ul li .signed_and_dated, .records_list ul li .dimensions, .records_list ul li .medium, .records_list ul li .read_more_label, .records_list ul li .series, #artists-browser, .artists-browser , .buy_now_enquire>.enquire_button_container.clearwithin > .button > a{ color: #000000; } .page_stats .disabled, .ps_item.disabled { color: #000000; opacity: 0.5; } /* Body/main text colour ------------------- */ body, a, a:visited, a:hover, #social_sharing_links.popup_vertical ul li.social_links_item a, #social_sharing_links.popup_vertical ul li.social_links_item a:visited, .social_sharing_links.popup_vertical ul li.social_links_item a, .social_sharing_links.popup_vertical ul li.social_links_item a:visited, .page-artists .subsection-works #image_gallery .subtitle, .page_stats .ps_item a, .page_stats .ps_item a:visited, .page-artworks #image_gallery .subtitle, .fancybox-skin, div.arprompt, .records_list .content, div.arprompt .arpromptmessage, .fancybox-type-image .fancybox-close::after, .fancybox-type-image .fancybox-prev span:after, .fancybox-type-image .fancybox-next span:after, .store_items_condensed .store_item_add_to_cart span, .store_items_condensed .store_item_add_to_cart.button span, .store_items_standard .store_item_remove_container .store_item_remove_from_cart:after, .subsection-store-products-record .store_item_remove_container .store_item_remove_from_cart:after, #sc_checkout_container #sc_checkout_payment_form .form_row .inputField, #sc_checkout_container #sc_checkout_payment_form .form_row input, .filters_panel .fp-module input[type=checkbox]+label, .filters_panel .fp-module .slider_label { color: #000000; } #privacy_policy_form_msg { color: #000000; opacity: 0.5; } /* Link text color ------------------- */ #wishlistEnquiryForm .button, .link, .link:hover, .link span, .link span:hover, .link a, .link a:hover, .link a:visited, #mc_embed_signup input.button, .simple_list ul li a, a.external { color: #000000; } /* Header layout ------------------- */ /* Dynamically created grid layout css ------------------- */ /* artfairs - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artfairs:not(.feature_list) > ul > li { width:25.0% }} .records_list.grid_dynamic_layout_artfairs ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artfairs ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artfairs ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artfairs ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artfairs ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_artfairs ul li .image::after { padding-top:100.0%; } /* 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:100.0%; } /* artworks - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artworks:not(.feature_list) > ul > li { width:25.0% }} .records_list.feature_list.grid_dynamic_layout_artworks:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_artworks:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_artworks ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_artworks ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_artworks ul li .image::after { padding-top:100.0%; } /* default image grid - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_default_image_grid:not(.feature_list) > ul > li { width:25.0% }} .records_list.feature_list.grid_dynamic_layout_default_image_grid:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_default_image_grid:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_default_image_grid ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_default_image_grid ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_default_image_grid ul li .image::after { padding-top:100.0%; } /* 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%; } /* 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:100.0%; } /* 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:100.0%; } /* video featured - full_list-------------------------------------- */ .records_list.full_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:100.0%; } /* artist works categories - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artist_works_categories:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_artist_works_categories ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artist_works_categories ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artist_works_categories ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artist_works_categories ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artist_works_categories ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_artist_works_categories ul li .image::after { padding-top:100.0%; } /* exhibitions - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_exhibitions:not(.feature_list) > ul > li { width:50.0% }} .records_list.feature_list.grid_dynamic_layout_exhibitions:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_exhibitions:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_exhibitions ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_exhibitions ul li .image > span { -webkit-justify-content:flex-start; justify-content: flex-start; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_exhibitions ul li .image::after { padding-top:66.6666666667%; } /* events works - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_events:not(.feature_list) > ul > li { width: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:100.0%; } /* exhibitions installation - slider-------------------------------------- */ @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:100.0%; } /* artist installation - slider-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artist_installation:not(.feature_list) > ul > li { width:25.0% }} .records_list.feature_list.grid_dynamic_layout_artist_installation:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_artist_installation:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_artist_installation ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_artist_installation ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_artist_installation ul li .image::after { padding-top:100.0%; } /* 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 - full_list-------------------------------------- */ .records_list.full_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:100.0%; } /* 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:100.0%; } /* 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:100.0%; } /* 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:100.0%; } /* 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.grid_dynamic_layout_store ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_store ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_store ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_store ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_store ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_store ul li .image::after { padding-top:100.0%; } /* default feature grid - full_list-------------------------------------- */ .records_list.full_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:100.0%; } /* 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:100.0%; } /* exhibitions works - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_exhibitions_works:not(.feature_list) > ul > li { width: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:100.0%; } /* publications featured - full_list-------------------------------------- */ .records_list.full_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:100.0%; } /* press featured - full_list-------------------------------------- */ .records_list.full_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:100.0%; } /* news featured - full_list-------------------------------------- */ .records_list.full_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:100.0%; } /* 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:100.0%; } /* exhibitions featured - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_exhibitions_featured:not(.feature_list) > ul > li { width:50.0% }} .records_list.feature_list.grid_dynamic_layout_exhibitions_featured:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_exhibitions_featured:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_exhibitions_featured ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_exhibitions_featured ul li .image > span { -webkit-justify-content:flex-start; justify-content: flex-start; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_exhibitions_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:100.0%; } /* 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:100.0%; } /* viewing rooms featured forthcoming - full_list-------------------------------------- */ .records_list.full_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:100.0%; } /* 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:100.0%; } /* viewing rooms featured - full_list-------------------------------------- */ .records_list.full_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:100.0%; } /* viewing rooms works - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_viewing_rooms_works:not(.feature_list) > ul > li { width:25.0% }} .records_list.feature_list.grid_dynamic_layout_viewing_rooms_works:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_viewing_rooms_works:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_viewing_rooms_works ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_viewing_rooms_works ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_viewing_rooms_works ul li .image::after { padding-top:100.0%; } /* 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.feature_list.grid_dynamic_layout_artist_works:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_artist_works:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_artist_works ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_artist_works ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_artist_works ul li .image::after {display:none;} .records_list.grid_dynamic_layout_artist_works ul li .image > span {position: static;} /* exhibitors - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_exhibitors:not(.feature_list) > ul > li { width: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:100.0%; } /* feature panels image grid - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_feature_panels_image_grid:not(.feature_list) > ul > li { width:25.0% }} .records_list.feature_list.grid_dynamic_layout_feature_panels_image_grid:not(.grid_dynamic_layout_exhibitions_featured) ul li .image::after { display:none; } .records_list.feature_list.grid_dynamic_layout_feature_panels_image_grid:not(.grid_dynamic_layout_exhibitions_featured) ul li .image > span { display:block; position: static } .records_list.grid_dynamic_layout_feature_panels_image_grid ul li .image > span.objectfit-fallback-bg { background-size:contain; } .records_list.grid_dynamic_layout_feature_panels_image_grid ul li .image > span { -webkit-justify-content:center; justify-content: center; -webkit-align-items:center; -ms-flex-align: center; align-items: center; } .records_list.grid_dynamic_layout_feature_panels_image_grid ul li .image::after { padding-top:100.0%; } /* 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:100.0%; } /* 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:100.0%; } /* viewing rooms - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_viewing_rooms:not(.feature_list) > ul > li { width: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:100.0%; } /* Dynamically created artist list css ------------------- */ .subsection-artist-list-preview-letters .artists_list_dynamic_columns ul { width:25.0% } .subsection-artist-list-standard .artists_list_dynamic_columns ul { width:25.0% } .subsection-artist-list-preview .artists_list_dynamic_columns ul { width:25.0% } /* Light and dark logo variants css ------------------- */ /* Logo text color ------------------- */ #logo { background: none; width: 100%; min-width: 160px; max-width: 160px; } #header #logo.user-custom-logo-image::before { padding-top:87.7528089888%; } .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-artlogicwebsite2548/usr/images/preferences/acag-logo-40_black_web.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-artlogicwebsite2548/usr/images/preferences/acag-logo-40_black_web.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-artlogicwebsite2548/usr/images/preferences/acag-logo-40_black_web.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 ------------------- */ .slide-nav-open #responsive_slide_nav_wrapper #top_nav ul li:not(.active) a, .slide-nav-open #header #responsive_slide_nav_wrapper .social_media_icon::after, .slide-nav-open #responsive_slide_nav_wrapper .quicksearch-icon::after, .slide-nav-open #responsive_slide_nav_wrapper #top_nav .header_quicksearch_field, .slide-nav-open #responsive_slide_nav_wrapper #top_nav #top_nav_reveal ul li a::after, .slide-nav-open #top_nav #full_nav .has_dropdown_items .dropdown-btn, .slide-nav-open #top_nav #full_nav .has_dropdown_items_mobile .dropdown-btn{ color: #ffffff; } /* Responsive nav active / hover text color ------------------- */ .slide-nav-open #responsive_slide_nav_wrapper #top_nav ul li.active a, .slide-nav-open #responsive_slide_nav_wrapper #top_nav ul li:hover a { color: #ededed; } /* 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: #000000; } /* quick view button */ .buy_enquire_button button, a.buy_enquire_detail_link { color: #000000; } /* 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.01) !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.01) !important; } /* don't show if opacity = 1 */ /* Hero section image height ------------------- */ ::root { --hero-height: 0vh } #hero_header.hero-fixed-aspect-ratio::after { padding-top:42.8571428571%; } /* 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-artlogicwebsite2548/usr/images/preferences/acag-logo-40_black_web.png'); } } /* Artlogic preferences custom CSS - entered by Artlogic in the preferences screen ------------------- */ #slide_nav_reveal { display: block !important; } li.nested > a[aria-label="Link to american contemporary art GALLERY Locations page"] { display: none !important; } li.nested > a.active_dir.active[aria-label="Link to american contemporary art GALLERY Locations page"] { display: none !important; } #top_nav #full_nav .top.has_dropdown_items_mobile .dropdown-btn:after { position: relative; right: -10px; } /* Client custom user CSS - entered by the client in the preferences screen ------------------- */ /* Assorted changes to make footer black */ #container { padding-left: 0px !important; padding-right: 0px !important; margin-left: 0px; margin-right: 0px; max-width: 100%; } @media screen and (min-width: 1023px) { #main_content { padding-left: 6vw; padding-right: 6vw; } #header, #page_header, .type-fullscreen #header, .layout-hero-header #header, .header-fixed-wrapper #header, #slideshow.split_slideshow.full_list, #hero_header.hero-mode-split { padding-left: 6vw !important; padding-right: 6vw !important; } } .fullscreen_slideshow ul li .content .inner { padding-left: 6vw !important; } #footer .inner { padding-left: 6vw; padding-right: 6vw; } #footer a:not(.submit_button), #footer a:visited:not(.submit_button) { color: #fff; } #footer { background: #000000; color: #fff; width: 100% !important; margin-bottom: 0px !important; } /* START Gravity Made Visible essay page (only affects the page with id="gmv") */ #gmv{ --gmv-ink: #231f20;--gmv-paper: #ffffff;--gmv-muted: #6b6562;--gmv-rule: #e2ded9;--gmv-tint: #f5f3f0;--gmv-night: #0a0d14;--gmv-night-ink: #efece6;--gmv-night-muted: #a39e97;--gmv-font: "American Grotesk","Libre Franklin","Helvetica Neue",Helvetica,Arial,sans-serif;--gmv-ease: cubic-bezier(.19,1,.22,1);--gmv-fullw: 100vw;--gmv-text: 620px;--gmv-gap: clamp(36px,4vw,72px);--gmv-aside: 400px;--gmv-groupw: min(calc(var(--gmv-text) + var(--gmv-gap) + var(--gmv-aside)),88vw);--gmv-body: clamp(17px,0.4vw + 13px,19.5px);position: relative;z-index: 0;color: var(--gmv-ink);background: var(--gmv-paper);font-family: var(--gmv-font);font-size: var(--gmv-body);font-weight: 400;line-height: 1.62;letter-spacing: normal;text-align: left;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-kerning: normal;text-rendering: optimizeLegibility} #gmv *,#gmv *::before,#gmv *::after{ box-sizing: border-box} #gmv::before{ content: "";position: absolute;z-index: -1;top: 0;bottom: 0;left: calc(50% - var(--gmv-fullw) / 2);width: var(--gmv-fullw);background: var(--gmv-paper);pointer-events: none} #gmv p,#gmv h1,#gmv h2,#gmv h3,#gmv figure,#gmv figcaption,#gmv blockquote,#gmv ol,#gmv ul,#gmv li,#gmv nav{ margin: 0;padding: 0;border: 0;background: none;width: auto;max-width: none;font-family: inherit;font-size: inherit;line-height: inherit;font-weight: inherit;color: inherit;letter-spacing: inherit;text-transform: none;float: none} #gmv img{ display: block;max-width: 100%;height: auto;border: 0;margin: 0} #gmv a{ color: inherit} #gmv a.image_popup{ display: block;cursor: zoom-in;text-decoration: none} #gmv em,#gmv i{ font-style: italic} #gmv strong,#gmv b{ font-weight: 700} #gmv sup{ font-size: .66em;line-height: 0;vertical-align: .55em} #gmv .gmv-vh{ position: absolute !important;width: 1px;height: 1px;margin: -1px;padding: 0;overflow: hidden;clip: rect(0 0 0 0);white-space: nowrap;border: 0} #gmv a:focus-visible{ outline: 2px solid currentColor;outline-offset: 3px} #main_content:has(#gmv)>.heading_wrapper{ display: none} #gmv .gmv-hero{ display: grid;grid-template-columns: minmax(0,1fr);gap: 32px} #gmv .gmv-hero__text{ display: flex;flex-direction: column;gap: 20px;min-width: 0} #gmv .gmv-kicker{ display: flex;align-items: center;gap: 12px;font-size: 15px;line-height: 1.3} #gmv .gmv-kicker::before{ content: "";width: 28px;height: 1px;background: currentColor} #gmv .gmv-title{ font-weight: 700;font-size: clamp(60px,7.6vw,132px);line-height: .9;letter-spacing: -.028em;margin: 0;text-wrap: balance} #gmv .gmv-title span{ display: block} #gmv .gmv-names{ font-size: clamp(21px,1.7vw,29px);line-height: 1.22} #gmv .gmv-names strong{ font-weight: 700} #gmv .gmv-byline{ font-size: 17px;line-height: 1.45;display: flex;flex-wrap: wrap;gap: 4px 18px} #gmv .gmv-byline span{ color: var(--gmv-muted)} #gmv .gmv-hero__fig{ position: relative;min-width: 0} #gmv .gmv-hero__img{ position: relative;overflow: hidden} #gmv .gmv-hero__img img{ width: 100%} #gmv .gmv-hero__credits{ display: grid;grid-template-columns: minmax(0,1fr);gap: 4px;margin-top: 14px;font-size: 12.5px;line-height: 1.42;color: var(--gmv-muted)} #gmv .gmv-hero__credits b,#gmv .gmv-hero__credits strong{ color: var(--gmv-ink);font-weight: 700} #gmv .gmv-hero__credits>span{ display: block} #gmv .gmv-hero__credits .gmv-credit{ display: block;font-size: 12px;margin-top: 1px} @media (min-width: 700px){ #gmv .gmv-hero__credits{ grid-template-columns: 924fr 80fr 924fr 82fr 924fr;gap: 0} #gmv .gmv-hero__credits>span:nth-child(1){ grid-column: 1} #gmv .gmv-hero__credits>span:nth-child(2){ grid-column: 3} #gmv .gmv-hero__credits>span:nth-child(3){ grid-column: 5} #gmv .gmv-hero__credits b,#gmv .gmv-hero__credits strong{ display: block} } @media (min-width: 1000px){ #gmv .gmv-hero{ grid-template-columns: minmax(0,5fr) minmax(0,7fr);gap: clamp(32px,4vw,72px);align-items: end} #gmv .gmv-hero__text{ padding-bottom: 46px} } @media (min-width: 1200px){ #gmv .gmv-hero{ grid-template-columns: minmax(0,4fr) minmax(0,8fr)} } #gmv .gmv-hero::after{ content: "";grid-column: 1 / -1;justify-self: center;width: 7px;height: 96px;margin-top: clamp(4px,3vw,40px);background: radial-gradient(circle,var(--gmv-ink) 0 3px,transparent 3.6px) 50% 0 / 7px 7px no-repeat,linear-gradient(var(--gmv-rule),var(--gmv-rule)) 50% 0 / 1px 100% no-repeat} #gmv .gmv-essay{ --w: min(var(--gmv-text),100%)} #gmv .gmv-essay>p,#gmv .gmv-essay>h2,#gmv .gmv-essay>.gmv-prologue,#gmv .gmv-essay>.gmv-notes,#gmv .gmv-night>p,#gmv .gmv-night>h2,#gmv .gmv-col,#gmv .gmv-essay>.gmv-fig>figcaption,#gmv .gmv-night>.gmv-fig>figcaption,#gmv .gmv-swipe-hint{ width: var(--w);margin-left: auto;margin-right: auto} #gmv .gmv-wide{ width: 100%;margin-left: auto;margin-right: auto} #gmv .gmv-full{ width: var(--gmv-fullw);max-width: none;margin-left: calc(50% - var(--gmv-fullw) / 2);overflow: hidden} #gmv p + p{ margin-top: 1.05em} #gmv .gmv-fig + p,#gmv .gmv-plates + p,#gmv .gmv-swipe-hint + p{ margin-top: 0} #gmv .gmv-essay p{ hanging-punctuation: first} #gmv .gmv-prologue{ font-size: clamp(20px,.9vw + 11px,25px);line-height: 1.5;margin-top: clamp(28px,4vw,64px)} #gmv .gmv-prologue p + p{ margin-top: .9em} #gmv .gmv-num{ font-size: clamp(40px,3.6vw,60px);font-weight: 400;line-height: 1;letter-spacing: .01em;margin-top: clamp(76px,9vw,150px);margin-bottom: clamp(22px,2.2vw,34px);scroll-margin-top: 90px} #gmv .gmv-num + p{ margin-top: 0} #gmv .gmv-figref{ text-decoration: underline;text-decoration-thickness: 1px;text-underline-offset: .18em;text-decoration-color: rgba(35,31,32,.35)} #gmv .gmv-figref:hover{ text-decoration-color: currentColor} #gmv .gmv-fnref{ text-decoration: none;font-weight: 700;padding: 0 .14em;border-radius: 2px;scroll-margin-top: 40vh} #gmv .gmv-fnref:hover,#gmv .gmv-fnref:target{ background: var(--gmv-ink);color: var(--gmv-paper)} #gmv .gmv-fig{ margin-top: clamp(36px,5vw,72px);margin-bottom: clamp(36px,5vw,72px);scroll-margin-top: 80px} #gmv .gmv-fig img{ margin-left: auto;margin-right: auto;width: auto;max-height: 86vh} #gmv .gmv-fig--land img,#gmv .gmv-fig--full img{ width: 100%;max-height: none} #gmv figcaption{ font-size: 13.5px;line-height: 1.45;color: var(--gmv-muted);margin-top: 14px;text-wrap: pretty} #gmv figcaption b,#gmv figcaption strong{ color: var(--gmv-ink);font-weight: 700} #gmv .gmv-credit{ display: block;font-size: 12px;margin-top: 3px} #gmv .gmv-capbreak{ display: inline-block;margin-top: 10px} #gmv .gmv-fig:target img,#gmv .gmv-plates:target img{ outline: 2px solid var(--gmv-ink);outline-offset: 6px} #gmv .gmv-pair{ display: grid;grid-template-columns: minmax(0,1fr) minmax(0,1fr);gap: clamp(8px,1.4vw,24px);align-items: end} #gmv .gmv-pair img{ width: 100%;max-height: none} #gmv .gmv-pair>figcaption{ grid-column: 1 / -1} #gmv .gmv-fig--aside{ width: min(440px,100%);margin-left: auto;margin-right: auto} #gmv .gmv-fig--aside.gmv-fig--slim{ width: min(240px,62%)} #gmv .gmv-fig--aside img{ width: 100%} #gmv .gmv-fig--aside figcaption{ width: auto} #gmv .gmv-plates{ display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: clamp(14px,2vw,36px);margin-top: clamp(40px,5vw,72px);margin-bottom: clamp(40px,5vw,72px);align-items: start;scroll-margin-top: 80px} #gmv .gmv-plates--2{ grid-template-columns: repeat(2,minmax(0,1fr))} #gmv .gmv-plate img{ width: 100%;max-height: none;aspect-ratio: 135 / 183;object-fit: cover} #gmv .gmv-plate figcaption{ margin-top: 12px} #gmv .gmv-ref{ display: block;margin-top: 3px;font-size: 12px} #gmv .gmv-swipe-hint{ display: none} @media (max-width: 699px){ #gmv .gmv-plates--swipe{ display: flex;overflow-x: auto;scroll-snap-type: x mandatory;gap: 12px;width: var(--gmv-fullw);margin-left: calc(50% - var(--gmv-fullw) / 2);padding: 0 calc((var(--gmv-fullw) - 100%) / 2) 6px;scrollbar-width: none;-webkit-overflow-scrolling: touch} #gmv .gmv-plates--swipe::-webkit-scrollbar{ display: none} #gmv .gmv-plates--swipe>.gmv-plate{ flex: 0 0 74%;scroll-snap-align: center} #gmv .gmv-swipe-hint{ display: block;font-size: 12.5px;color: var(--gmv-muted);margin-top: -26px;margin-bottom: 36px} } #gmv .gmv-pq{ width: var(--w);margin: clamp(72px,9vw,140px) auto;padding: 0;border: 0;quotes: none;background: none;overflow: visible;font-size: clamp(30px,3.5vw,56px);line-height: 1.12;letter-spacing: -.012em;text-wrap: balance} #gmv .gmv-pq::before{ content: "";display: block;width: 1px;height: clamp(56px,7vw,96px);background: currentColor;margin-bottom: 28px} #gmv .gmv-pq .gmv-w{ display: inline-block} #gmv .gmv-statement{ position: relative} #gmv .gmv-statement p{ font-size: clamp(28px,2.9vw,47px);line-height: 1.2;letter-spacing: -.01em;text-wrap: balance} #gmv .gmv-coda{ font-size: clamp(22px,1.3vw + 10px,31px);line-height: 1.38;margin-top: 1.4em !important;text-wrap: pretty} #gmv .gmv-fin{ font-size: 15px;color: var(--gmv-muted);margin-top: 2.4em !important} #gmv .gmv-fin::after{ content: "";display: block;width: 9px;height: 9px;border-radius: 50%;background: var(--gmv-ink);margin-top: 44px} #gmv .gmv-immersive{ position: relative;width: var(--gmv-fullw);margin-left: calc(50% - var(--gmv-fullw) / 2);margin-top: clamp(48px,6vw,96px);view-timeline: --gmv-im block} #gmv .gmv-immersive__fig{ position: sticky;top: 0;height: 100vh;height: 100svh;margin: 0;overflow: hidden;background: #e9e7e3} #gmv .gmv-immersive__fig img{ width: 100%;height: 100%;max-height: none;object-fit: cover;object-position: 54% 52%;transform-origin: 54% 52%} #gmv .gmv-immersive__fig figcaption{ position: absolute;left: max(16px,6vw);bottom: 18px;width: auto;max-width: min(520px,80%);margin: 0;padding: 10px 14px;background: var(--gmv-paper);font-size: 12.5px} #gmv .gmv-immersive__steps{ position: relative;z-index: 1;margin-top: -100vh;margin-top: -100svh;padding: 70vh max(16px,6vw) 60vh;display: grid;gap: 78vh} #gmv .gmv-immersive__steps>p{ width: min(560px,100%);margin: 0 auto;background: var(--gmv-paper);padding: 26px 30px 28px;box-shadow: 0 1px 1px rgba(0,0,0,.05),0 18px 48px rgba(0,0,0,.14)} #gmv .gmv-immersive__steps>p.gmv-card--lg{ font-size: clamp(22px,1.4vw + 10px,32px);line-height: 1.3;width: min(680px,100%)} #gmv .gmv-night{ position: relative;color: var(--gmv-night-ink);padding-top: clamp(200px,26vh,320px);padding-bottom: clamp(200px,26vh,320px);margin-top: clamp(40px,5vw,80px)} #gmv .gmv-night::before{ content: "";position: absolute;top: 0;bottom: 0;z-index: -1;left: calc(50% - var(--gmv-fullw) / 2);width: var(--gmv-fullw);background: linear-gradient(to bottom,var(--gmv-paper) 0,var(--gmv-night) 190px,var(--gmv-night) calc(100% - 190px),var(--gmv-paper) 100%)} #gmv .gmv-night figcaption,#gmv .gmv-night .gmv-ref,#gmv .gmv-night .gmv-swipe-hint{ color: var(--gmv-night-muted)} #gmv .gmv-night figcaption em,#gmv .gmv-night figcaption b,#gmv .gmv-night figcaption strong{ color: var(--gmv-night-ink)} #gmv .gmv-night .gmv-figref{ text-decoration-color: rgba(239,236,230,.4)} #gmv .gmv-night .gmv-fnref:hover,#gmv .gmv-night .gmv-fnref:target{ background: var(--gmv-night-ink);color: var(--gmv-night)} #gmv .gmv-night .gmv-plates{ margin-top: 0} #gmv .gmv-notes{ margin-top: clamp(80px,9vw,140px);padding-top: 26px;border-top: 1px solid var(--gmv-rule)} #gmv .gmv-notes h2{ font-size: 15px;font-weight: 700;margin-bottom: 18px} #gmv .gmv-notes ol{ list-style: none;counter-reset: gmvnote;display: grid;gap: 14px} #gmv .gmv-notes li{ counter-increment: gmvnote;position: relative;padding: 6px 8px 6px 34px;margin-left: -8px;font-size: 15px;line-height: 1.55;color: var(--gmv-muted);scroll-margin-top: 30vh;transition: background .4s} #gmv .gmv-notes li::before{ content: counter(gmvnote);position: absolute;left: 8px;top: 6px;font-weight: 700;color: var(--gmv-ink)} #gmv .gmv-notes li p + p{ margin-top: .6em} #gmv .gmv-notes li:target{ background: var(--gmv-tint);color: var(--gmv-ink)} #gmv .gmv-back{ text-decoration: none;margin-left: 6px;color: var(--gmv-ink);font-weight: 700} #gmv .gmv-end{ display: grid;grid-template-columns: minmax(0,1fr);gap: clamp(44px,6vw,88px);margin-top: clamp(88px,10vw,160px);padding-top: clamp(40px,5vw,64px);border-top: 1px solid var(--gmv-ink)} #gmv .gmv-eyebrow{ font-size: 14px;letter-spacing: .02em;color: var(--gmv-muted);margin-bottom: 14px} #gmv .gmv-end h2{ font-size: clamp(26px,2.3vw,38px);line-height: 1.12;font-weight: 700;letter-spacing: -.01em;margin-bottom: 14px;text-wrap: balance} #gmv .gmv-end h2 span{ display: block;font-weight: 400} #gmv .gmv-end p{ font-size: 17px;line-height: 1.5} #gmv .gmv-end p + p{ margin-top: .7em} #gmv .gmv-end .gmv-dim{ color: var(--gmv-muted)} #gmv .gmv-actions{ display: flex;flex-wrap: wrap;gap: 12px;margin-top: 26px !important} #gmv .gmv-btn{ display: inline-block;padding: 14px 22px 13px;border: 1px solid var(--gmv-ink);background: var(--gmv-ink);color: var(--gmv-paper);text-decoration: none;font-size: 15.5px;line-height: 1.2;letter-spacing: .01em;transition: background .25s,color .25s} #gmv .gmv-btn:hover{ background: var(--gmv-paper);color: var(--gmv-ink)} #gmv .gmv-btn--line{ background: transparent;color: var(--gmv-ink)} #gmv .gmv-btn--line:hover{ background: var(--gmv-ink);color: var(--gmv-paper)} #gmv .gmv-cat{ display: grid;grid-template-columns: minmax(0,150px) minmax(0,1fr);gap: 22px;align-items: start} #gmv .gmv-cat img{ width: 100%;box-shadow: 0 1px 2px rgba(0,0,0,.08),0 10px 26px rgba(0,0,0,.12)} #gmv .gmv-hint{ font-size: 14px !important;color: var(--gmv-muted);margin-top: 12px !important} #gmv .gmv-credits{ grid-column: 1 / -1;color: var(--gmv-muted);border-top: 1px solid var(--gmv-rule);padding-top: 20px} #gmv .gmv-credits p{ font-size: 12.5px;line-height: 1.5} @media (max-width: 599px){ #gmv .gmv-cat{ grid-template-columns: minmax(0,1fr)} #gmv .gmv-cat img{ width: 150px} } @media (min-width: 900px){ #gmv .gmv-end{ grid-template-columns: minmax(0,7fr) minmax(0,5fr)} #gmv .gmv-cat{ grid-template-columns: minmax(0,170px) minmax(0,1fr)} } #gmv .gmv-rail{ display: none} @media (min-width: 1200px){ #gmv .gmv-essay{ --group: min(calc(var(--gmv-text) + var(--gmv-gap) + var(--gmv-aside)),100%);--lead: calc((100% - var(--group)) / 2)} #gmv .gmv-essay>p,#gmv .gmv-essay>h2,#gmv .gmv-essay>.gmv-prologue,#gmv .gmv-essay>.gmv-notes,#gmv .gmv-essay .gmv-col,#gmv .gmv-essay>.gmv-fig>figcaption,#gmv .gmv-essay>.gmv-pq,#gmv .gmv-night>p,#gmv .gmv-night>h2,#gmv .gmv-night>.gmv-pq{ margin-left: var(--lead);margin-right: 0} #gmv .gmv-essay>.gmv-wide,#gmv .gmv-night>.gmv-wide{ width: var(--group);margin-left: var(--lead)} #gmv .gmv-essay>.gmv-pq,#gmv .gmv-night>.gmv-pq{ width: calc(var(--group) - var(--gmv-aside) * .35)} #gmv .gmv-essay>.gmv-pair>figcaption{ margin-left: 0;width: var(--gmv-text)} #gmv .gmv-essay>.gmv-fig--aside{ float: right;clear: right;width: var(--gmv-aside);margin: 6px var(--lead) 32px 32px} #gmv .gmv-essay>.gmv-fig--aside.gmv-fig--slim{ width: 300px} #gmv .gmv-essay>.gmv-fig--aside img{ width: auto;max-width: 100%;max-height: 64vh;margin: 0} #gmv .gmv-essay>.gmv-fig--aside figcaption{ width: auto;margin-left: 0} #gmv .gmv-essay>.gmv-fig--aside + p{ margin-top: 1.05em} #gmv .gmv-statement,#gmv .gmv-immersive,#gmv .gmv-essay>.gmv-wide,#gmv .gmv-fig--full,#gmv .gmv-night,#gmv .gmv-clear,#gmv .gmv-essay>.gmv-notes{ clear: both} #gmv .gmv-immersive__steps{ padding-left: 0;padding-right: 0} #gmv .gmv-immersive__steps>p{ width: calc(var(--gmv-text) + 60px);margin-left: calc(50% - var(--gmv-groupw) / 2 - 30px)} #gmv .gmv-immersive__steps>p.gmv-card--lg{ width: calc(var(--gmv-text) + 160px)} #gmv .gmv-immersive__fig figcaption{ left: calc(50% - var(--gmv-groupw) / 2)} #gmv .gmv-rail{ display: block;position: fixed;z-index: 50;top: 22vh;height: 56vh;left: max(14px,calc(3vw - 10px));width: 40px;color: #fff;mix-blend-mode: difference} #gmv .gmv-rail::before{ content: "";position: absolute;left: 0;top: 0;bottom: 0;width: 1px;background: currentColor;opacity: .25} #gmv .gmv-rail ol{ list-style: none;position: absolute;inset: 0} #gmv .gmv-rail li{ position: absolute;left: 12px;margin-top: -10px;list-style: none} #gmv .gmv-rail a{ display: block;font-size: 12px;line-height: 20px;letter-spacing: .03em;text-decoration: none;opacity: .55} #gmv .gmv-rail a:hover{ opacity: 1} } @keyframes gmv-drop{ from{ opacity: 0;transform: translateY(-.3em)} to{ opacity: 1;transform: none} } @keyframes gmv-pour3{ 0%{ clip-path: polygon(0 0,100% 0,100% 0,66.6% 0,66.6% 0,33.3% 0,33.3% 0,0 0)} 35%{ clip-path: polygon(0 0,100% 0,100% 8%,66.6% 8%,66.6% 30%,33.3% 30%,33.3% 62%,0 62%)} 70%{ clip-path: polygon(0 0,100% 0,100% 58%,66.6% 58%,66.6% 86%,33.3% 86%,33.3% 100%,0 100%)} 100%{ clip-path: polygon(0 0,100% 0,100% 100%,66.6% 100%,66.6% 100%,33.3% 100%,33.3% 100%,0 100%)} } @keyframes gmv-cue{ 0%{ background-position: 50% -8px,50% 0} 80%,100%{ background-position: 50% 92px,50% 0} } @keyframes gmv-pour{ from{ clip-path: inset(0 0 100% 0);transform: translateY(-3%) scale(1.03)} to{ clip-path: inset(0 0 0 0);transform: none} } @keyframes gmv-fade{ from{ opacity: 0} to{ opacity: 1} } @keyframes gmv-word{ from{ opacity: 0;transform: translateY(-.55em)} to{ opacity: 1;transform: none} } @keyframes gmv-grow-x{ from{ transform: scaleX(0)} to{ transform: scaleX(1)} } @keyframes gmv-grow-y{ from{ transform: scaleY(0)} to{ transform: scaleY(1)} } @keyframes gmv-splash{ 0%{ opacity: 0;transform: scale(.1)} 8%{ opacity: .9} 100%{ opacity: 0;transform: scale(1.7)} } @keyframes gmv-zoom{ from{ transform: scale(1)} to{ transform: scale(1.34)} } @keyframes gmv-fall{ from{ top: 0%} to{ top: 100%} } @keyframes gmv-railfade{ 0%,2%{ opacity: 0} 5%,93%{ opacity: 1} 96%,100%{ opacity: 0} } @media (prefers-reduced-motion: no-preference){ html:has(#gmv){ scroll-behavior: smooth} #gmv .gmv-title span,#gmv .gmv-names,#gmv .gmv-byline,#gmv .gmv-kicker{ animation: gmv-drop 1.1s var(--gmv-ease) both} #gmv .gmv-title span:nth-child(1){ animation-delay: .05s} #gmv .gmv-title span:nth-child(2){ animation-delay: .14s} #gmv .gmv-title span:nth-child(3){ animation-delay: .23s} #gmv .gmv-names{ animation-delay: .42s} #gmv .gmv-byline{ animation-delay: .54s} #gmv .gmv-hero__img img{ animation: gmv-pour3 2.1s cubic-bezier(.45,.05,.2,1) .2s both} #gmv .gmv-hero::after{ animation: gmv-cue 2.4s cubic-bezier(.55,0,1,.45) infinite} @supports (animation-timeline: view()){ #gmv .gmv-essay .gmv-fig:not(.gmv-immersive__fig) img,#gmv .gmv-plate img{ animation: gmv-pour linear both;animation-timeline: view();animation-range: entry 5% cover 40%} #gmv .gmv-essay .gmv-fig:not(.gmv-immersive__fig) figcaption,#gmv .gmv-plate figcaption{ animation: gmv-fade linear both;animation-timeline: view();animation-range: entry 0% entry 100%} #gmv .gmv-num{ animation: gmv-drop linear both;animation-timeline: view();animation-range: entry 0% entry 100%} #gmv .gmv-pq{ view-timeline: --gmv-pq block} #gmv .gmv-pq .gmv-w{ animation: gmv-word linear both;animation-timeline: --gmv-pq;animation-range: entry calc(20% + var(--i,0) * 5%) cover calc(36% + var(--i,0) * 3%)} #gmv .gmv-statement{ height: 200vh;view-timeline: --gmv-st block} #gmv .gmv-statement__stage{ position: sticky;top: 0;height: 100vh;height: 100svh;display: flex;align-items: center} #gmv .gmv-statement__stage>p{ margin-top: -14vh;max-width: 15.5em} #gmv .gmv-statement__stage::before{ content: "";position: absolute;top: 72%;left: calc(50% - var(--gmv-fullw) / 2);width: var(--gmv-fullw);height: 1.5px;background: var(--gmv-ink);transform-origin: 0 50%;animation: gmv-grow-x linear both;animation-timeline: --gmv-st;animation-range: contain 4% contain 40%} #gmv .gmv-statement__stage::after{ content: "";position: absolute;top: 0;height: 72%;left: 91%;width: 1.5px;background: var(--gmv-ink);transform-origin: 50% 0;animation: gmv-grow-y cubic-bezier(.55,0,1,.45) both;animation-timeline: --gmv-st;animation-range: contain 44% contain 74%} #gmv .gmv-statement__stage>p::after{ content: "";position: absolute;top: 72%;left: 91%;width: 120px;height: 34px;margin: -17px 0 0 -60px;border: 1.5px solid var(--gmv-ink);border-radius: 50%;opacity: 0;pointer-events: none;animation: gmv-splash linear both;animation-timeline: --gmv-st;animation-range: contain 74% contain 96%} #gmv .gmv-immersive__fig img{ animation: gmv-zoom linear both;animation-timeline: --gmv-im;animation-range: contain 0% contain 100%} #gmv .gmv-essay{ view-timeline: --gmv-essay block} #gmv .gmv-essay::before{ content: "";position: fixed;z-index: 50;left: 0;top: 0;width: 100%;height: 3px;pointer-events: none;background: #fff;mix-blend-mode: difference;transform-origin: 0 50%;animation: gmv-grow-x linear both;animation-timeline: --gmv-essay;animation-range: contain 0% contain 100%} #gmv .gmv-rail::after{ content: "";position: absolute;left: -3px;width: 7px;height: 7px;margin-top: -3px;border-radius: 50%;background: currentColor;animation: gmv-fall linear both;animation-timeline: --gmv-essay;animation-range: contain 0% contain 100%} #gmv .gmv-rail{ animation: gmv-railfade linear both;animation-timeline: --gmv-essay;animation-range: cover 0% cover 100%} } } @media (min-width: 1200px) and (prefers-reduced-motion: no-preference){ @supports (animation-timeline: view()){ #gmv .gmv-statement__stage::after{ left: calc(var(--lead) + var(--gmv-text) + var(--gmv-gap) * 1.7)} #gmv .gmv-statement__stage>p::after{ left: calc(var(--lead) + var(--gmv-text) + var(--gmv-gap) * 1.7)} #gmv .gmv-statement__stage>p{ max-width: min(15.5em,var(--gmv-text))} } } @media (max-width: 699px) and (prefers-reduced-motion: no-preference){ @supports (animation-timeline: view()){ #gmv .gmv-statement__stage>p{ max-width: 82%} #gmv .gmv-statement__stage::after{ left: 94%} #gmv .gmv-statement__stage>p::after{ left: 94%} } } @media print{ #gmv .gmv-rail,#gmv .gmv-essay::before{ display: none !important} #gmv .gmv-immersive__fig,#gmv .gmv-statement__stage{ position: static;height: auto} #gmv .gmv-statement{ height: auto} #gmv .gmv-immersive__steps{ margin: 0;padding: 0;gap: 1em} } /* END Gravity Made Visible essay page */