/* CSS imports ------------------- */ /* Forced mobile nav on all sizes ------------------- */ @import url('/lib/g/2.0/styles/responsive_topnav.css') screen and (max-width: 1023px); @import url('/lib/g/themes/aspect/2.0/styles/responsive_topnav.css') screen and (max-width: 1023px); /* Font imports ------------------- */ /* Background colour --------------*/ #header.header_transparent .dropdown-mask { background-color: transparent !important; } /* Feature popup colours ------------------- */ /* Fonts----------------------------- */ /* Main body font ------------------- */ /* Heading and emphasis font ------------------- */ /* Navigation font ------------------- */ /* User custom html-font sizing ------------------- */ html { font-size: 10.0px; } /* Title - Heading spacing and transform ------------------- */ /* 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; } /* Subheading and secondary emphasis text colour ------------------- */ /* Body/main text colour ------------------- */ /* Link text color ------------------- */ /* Header layout ------------------- */ /* Dynamically created grid layout css ------------------- */ /* artfairs - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artfairs:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_artfairs ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artfairs ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artfairs ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artfairs ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artfairs ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_artfairs ul li .image::after { padding-top:100.0%; } /* instagram - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_instagram:not(.feature_list) > ul > li { width:33.33% }} .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:33.33% }} .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:33.33% }} .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:33.33% }} .records_list.grid_dynamic_layout_video ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_video ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_video ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_video ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_video ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_video ul li .image::after { padding-top:66.6666666667%; } /* default grid - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_default_grid:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_default_grid ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_default_grid ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_default_grid ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_default_grid ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_default_grid ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_default_grid ul li .image::after { padding-top:100.0%; } /* artists - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artists:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_artists ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artists ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artists ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artists ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artists ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_artists ul li .image::after { padding-top:100.0%; } /* video featured - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_video_featured ul { width:100%;}} .records_list.grid_dynamic_layout_video_featured ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_video_featured ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_video_featured ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_video_featured ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_video_featured ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_video_featured ul li .image::after { padding-top: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:33.33% }} .records_list.grid_dynamic_layout_exhibitions ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_exhibitions ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_exhibitions ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_exhibitions ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_exhibitions ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_exhibitions ul li .image::after { padding-top:100.0%; } /* events works - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_events:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_events ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_events ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_events ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_events ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_events ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_events ul li .image::after { padding-top:100.0%; } /* exhibitions installation - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_exhibitions_installation:not(.feature_list) > ul > li { width:33.33% }} .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 - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_artist_installation:not(.feature_list) > ul > li { width:33.33% }} .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 - 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: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:33.33% }} .records_list.grid_dynamic_layout_artwork_categories_landing ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_artwork_categories_landing ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_artwork_categories_landing ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_artwork_categories_landing ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_artwork_categories_landing ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_artwork_categories_landing ul li .image::after { padding-top:100.0%; } /* events - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_events:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_events ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_events ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_events ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_events ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_events ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_events ul li .image::after { padding-top:100.0%; } /* store - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_store:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_store ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_store ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_store ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_store ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_store ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_store ul li .image::after { padding-top:100.0%; } /* default feature grid - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_default_feature_grid ul { width:100%;}} .records_list.grid_dynamic_layout_default_feature_grid ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_default_feature_grid ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_default_feature_grid ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_default_feature_grid ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_default_feature_grid ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_default_feature_grid ul li .image::after { padding-top: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:33.33% }} .records_list.grid_dynamic_layout_feature_panels ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_feature_panels ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_feature_panels ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_feature_panels ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_feature_panels ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_feature_panels ul li .image::after { padding-top:100.0%; } /* exhibitions works - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_exhibitions_works:not(.feature_list) > ul > li { width:33.33% }} .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 - 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:100.0%; } /* 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:100.0%; } /* 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: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 - 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:100.0%; } /* press - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_press:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_press ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_press ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_press ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_press ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_press ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_press ul li .image::after { padding-top:100.0%; } /* news - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_news:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_news ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_news ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_news ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_news ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_news ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_news ul li .image::after { padding-top:100.0%; } /* viewing rooms featured forthcoming - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_viewing_rooms_featured_forthcoming ul { width:100%;}} .records_list.grid_dynamic_layout_viewing_rooms_featured_forthcoming ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_viewing_rooms_featured_forthcoming ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_viewing_rooms_featured_forthcoming ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_viewing_rooms_featured_forthcoming ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_viewing_rooms_featured_forthcoming ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_viewing_rooms_featured_forthcoming ul li .image::after { padding-top:100.0%; } /* search - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_search:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_search ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_search ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_search ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_search ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_search ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_search ul li .image::after { padding-top:100.0%; } /* viewing rooms featured - feature_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.feature_list.grid_dynamic_layout_viewing_rooms_featured ul { width:100%;}} .records_list.grid_dynamic_layout_viewing_rooms_featured ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_viewing_rooms_featured ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_viewing_rooms_featured ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_viewing_rooms_featured ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_viewing_rooms_featured ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_viewing_rooms_featured ul li .image::after { padding-top: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:33.33% }} .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:33.33% }} .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 { padding-top:100.0%; } /* exhibitors - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_exhibitors:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_exhibitors ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_exhibitors ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_exhibitors ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_exhibitors ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_exhibitors ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_exhibitors ul li .image::after { padding-top:100.0%; } /* feature panels image grid - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_feature_panels_image_grid:not(.feature_list) > ul > li { width:33.33% }} .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:33.33% }} .records_list.grid_dynamic_layout_publications ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_publications ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_publications ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_publications ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_publications ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_publications ul li .image::after { padding-top:100.0%; } /* team - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_team:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_team ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_team ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_team ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_team ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_team ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_team ul li .image::after { padding-top:100.0%; } /* viewing rooms - image_list-------------------------------------- */ @media screen and (min-width:1023px) {.records_list.grid_dynamic_layout_viewing_rooms:not(.feature_list) > ul > li { width:33.33% }} .records_list.grid_dynamic_layout_viewing_rooms ul li img { object-fit: cover; width: 100%; height: 100%; } .records_list.grid_dynamic_layout_viewing_rooms ul li .image > span.objectfit-fallback-bg { background-size:cover; } .records_list.grid_dynamic_layout_viewing_rooms ul li .image > span > a { height: 100%; } .browser-msie .records_list.grid_dynamic_layout_viewing_rooms ul li img { font-family:object-fit; } .browser-msie .records_list.grid_dynamic_layout_viewing_rooms ul li img:first-letter { font-family:object-fit; } .records_list.grid_dynamic_layout_viewing_rooms ul li .image::after { padding-top:100.0%; } /* Dynamically created artist list css ------------------- */ .subsection-artist-list-preview-letters .artists_list_dynamic_columns ul { width:33.33% } .subsection-artist-list-standard .artists_list_dynamic_columns ul { width:33.33% } .subsection-artist-list-preview .artists_list_dynamic_columns ul { width:33.33% } /* Light and dark logo variants css ------------------- */ /* Logo text color ------------------- */ #logo { background: none; width: 100%; min-width: 120px; max-width: 120px; } #header #logo.user-custom-logo-image::before { padding-top:37.5627240143%; } .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-artlogicwebsite0596/usr/images/preferences/logo-gbtl-black-002-.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-artlogicwebsite0596/usr/images/preferences/logo-gbtl-black-002-.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-artlogicwebsite0596/usr/images/preferences/logo-gbtl-black-002-.png', sizingMethod='scale')"; } #logo a { text-indent: -9999px; padding: 0; } /* Topnav text color ------------------- */ /* Subnav text color ------------------- */ /* Responsive nav text color ------------------- */ /* Responsive nav active / hover text color ------------------- */ /* Button text color ------------------- */ /* 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: 65vh } #hero_header > .inner, body.layout-hero-header:not(.type-fullscreen) #main_content::before, body.layout-hero-header.layout-hero-header-record-data #hero_header > .inner, body.layout-hero-header.layout-hero-header-record-data:not(.type-fullscreen ) #main_content::before, body.layout-hero-header #hero_header.hero-mode-split { height: var(--hero-height, 65vh); } .layout-hero-header-record-data #hero_header > .inner, body.layout-hero-header-record-data.layout-hero-header:not(.type-fullscreen ) #main_content::before, body.layout-hero-header-record-data.layout-hero-header.layout-hero-header-record-data #hero_header > .inner, body.layout-hero-header-record-data.layout-hero-header.layout-hero-header-record-data:not(.type-fullscreen ) #main_content::before, body.layout-hero-header.layout-hero-header-record-data #hero_header.hero-mode-split { height: var(--hero-height, 65vh); max-height: none; } /* Home page slideshow / fullscreen video ui buttons ------------------- */ /* Hero header slideshow ui buttons ------------------- */ /* Carousel feature panel ui buttons ------------------- */ @media screen and (max-width:360px) { #logo a { background-image: url('https://static-assets.artlogic.net/w_500,c_limit,f_auto,fl_lossy,q_auto/ws-artlogicwebsite0596/usr/images/preferences/logo-gbtl-black-002-.png'); } } /* Artlogic preferences custom CSS - entered by Artlogic in the preferences screen ------------------- */ /* Client custom user CSS - entered by the client in the preferences screen ------------------- */ /* ============================================================ GALLERY BY THE LAKES · custom CSS for Artlogic v3.9 · 8 Nov 2026, tested by injection on the live site Settings > Website > Styles > Customise CSS styles Simon Gudgeon's system without the Gudgeon and without the bronze: EB Garamond for headlines and titles, Jost 300 for every small letterspaced job, Ink / white / Stone, Pine as the one Sculpture by the Lakes accent. Body copy is Sculpture by the Lakes' Source Serif, and every numeral in running text is too. SAFE BASE, the lesson from Simon's site: typography and colour only on theme elements. Nothing here changes height, overflow, width or position of a theme element, so it cannot blank a page. Layout only appears inside our own gl- classes, which exist nowhere until a page's content creates them. The gallery logo is left exactly as it is. ============================================================ */ /* THE FONTS, declared directly. Artlogic places this stylesheet after its own rules, and an @import only works as the very first rule of a sheet, so the import was silently ignored on the live site (7 Nov) and everything fell back to Georgia. Declaring the faces works wherever the sheet lands. Latin subset only, served from Google Fonts. EB Garamond 400 + italic, Jost 300 and 400, Source Serif 4 400 + italic. */ @font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGFmQSNjdsmc35JDF1K5GRwUjcdlttVFm-rI7e8QL99U6i1hGFJRvw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGDmQSNjdsmc35JDF1K5E55YMjF_7DPuGi-6_RkBI9_WamXgHlI.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/jost/v20/92zatBhPNqw73oTd4jQmfxI.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/jost/v20/92zatBhPNqw73oTd4jQmfxI.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/sourceserif4/v15/vEFH2_tTDB4M7-auWDN0ahZJW1ge6NmXq2ZbF8zBfb98SUr6aX2SzxEj.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/sourceserif4/v15/vEFF2_tTDB4M7-auWDN0ahZJW3IX2iZPwg3BucvUtfykDXr4Y3qwzQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root{ --gl-ink:#1B1B1B; --gl-body:#2E2E29; --gl-grey:#5F5E57; --gl-mute:#9C9B94; --gl-stone:#ECEAE9; --gl-white:#FFFFFF; --gl-rule:#DFDEDC; --gl-pine:#497E72; --gl-ease:cubic-bezier(.23,1,.32,1); } /* ── TYPOGRAPHY ───────────────────────────────────────────── Family and tracking are safe everywhere. SIZES are set per place, never on bare h1/h2: Artlogic uses those tags for record headings and modal titles too (Simon's site, 28 July). */ h1,h2,h3,h4,h5{ font-family:"EB Garamond",Georgia,serif !important; font-weight:400 !important; letter-spacing:-.005em !important; text-transform:none !important; color:var(--gl-ink); } /* body copy: Source Serif. Scoped to #content, because the cookie banner is a

too and must not turn into 17px serif. */ #content p,#content li,#content .prose{ font-family:"Source Serif 4","Source Serif Pro",Georgia,serif; color:var(--gl-body); line-height:1.62; } #content p{font-size:17px} /* ── NAVIGATION ───────────────────────────────────────────── */ /* measured on simongudgeon.com, 7 Nov: Jost 200, 11.875px, 1.07px tracking (.09em), Stone grey, Ink when active. */ #top_nav a,#header nav a{ font-family:"Jost",sans-serif !important; font-weight:200 !important; font-size:11.875px !important; letter-spacing:.09em !important; text-transform:uppercase !important; color:var(--gl-grey) !important; } #top_nav li.active > a,#top_nav a:hover{color:var(--gl-ink) !important} /* ── PAGE TITLES ──────────────────────────────────────────── The theme prints each section's title in .heading_wrapper as 22px uppercase Spartan. Simon's page title spec instead. */ .heading_wrapper h1,.heading_wrapper h1 a, .heading_wrapper h1 .h1_heading{ font-size:clamp(40px,5vw,76px) !important; line-height:1 !important; letter-spacing:-.01em !important; color:var(--gl-ink) !important; text-decoration:none !important; } .heading_wrapper h1 .separator{display:none !important} /* the theme floats the subtitle left, so the dates squeezed in beside it instead of sitting under it (Daniela, 7 Nov, the Printland 3 page). The dates now take their own line under the subtitle; Overview and Works stay on the right. */ .heading_wrapper h1 .h1_subtitle{float:none !important} /* exhibition subtitles are upright everywhere (Daniela, 7 Nov) */ .heading_wrapper > .subtitle{float:left !important;clear:left !important;margin-top:14px !important} .heading_wrapper h1 .h1_subtitle{ display:block !important; font-family:"EB Garamond",Georgia,serif !important; font-style:normal !important; font-size:.5em !important; line-height:1.2 !important; margin-top:.35em !important; color:var(--gl-grey) !important; } /* DATES, like Simon's "British Sculptor" line: EB Garamond capitals, 19px, .09em. Measured on simongudgeon.com. */ .heading_wrapper .subtitle_date,#slideshow .date, .records_list .content .date,.subtitle_date{ font-family:"EB Garamond",Georgia,serif !important; font-weight:400 !important; font-size:17px !important; letter-spacing:.09em !important; text-transform:uppercase !important; color:var(--gl-grey) !important; } #slideshow .date{font-size:19px !important} .heading_wrapper .subtitle, #sub_nav a{ font-family:"Jost",sans-serif !important; font-weight:300 !important; font-size:10.4px !important; letter-spacing:.35em !important; text-transform:uppercase !important; color:var(--gl-grey) !important; } #sub_nav li.active a{color:var(--gl-ink) !important} /* ── THE HOMEPAGE SLIDESHOW CAPTION ───────────────────────── The current exhibition slide: title as a headline, subtitle in italic, the dates as small capitals. */ #slideshow h2,#slideshow h2 a{ font-size:clamp(34px,3.6vw,56px) !important; line-height:1.05 !important; letter-spacing:-.01em !important; color:var(--gl-ink) !important; text-decoration:none !important; } #slideshow .separator{display:none !important} #slideshow .h1_subtitle{ display:block !important; font-style:normal !important; font-size:.55em !important; margin-top:.3em !important; color:var(--gl-grey) !important; } /* the theme sets capitals and wide tracking on the inner spans of titles and captions too, so they are released here. Found in the live test, 7 Nov: the subtitle stayed in tracked capitals. */ #slideshow h2 *,.heading_wrapper h1 *,.records_list .content *{text-transform:none !important} .heading_wrapper h1 .h1_subtitle,#slideshow .h1_subtitle{letter-spacing:0 !important} /* ── THE HOMEPAGE HERO · like Simon's ────────────────────── Measured on simongudgeon.com, 7 Nov: the photograph at .62 over an Ink ground (no gradient), the name in EB Garamond at 9vw, line-height .92, low left at 6vw and 11vh, a descriptor beneath in EB Garamond capitals, 19px, .09em. Here the name is Gallery by the Lakes, all white, upright, no bronze, and much smaller than Simon's: capped at 76px (Daniela, 7 Nov: at 9vw it was shouting). The hero is written at the TOP of the homepage's Main Page Content, which the theme prints after the slideshow. To put it above Now showing, the content block is flattened into the page (display:contents) and the hero ordered first. Only the hero moves; the welcome text and the band keep their places. */ body.section-home #content{display:flex;flex-direction:column} body.section-home #content_module{display:contents !important} body.section-home .gl-hero{order:-1} .gl-hero{position:relative;width:100vw;margin:-50px 0 120px calc(50% - 50vw); height:calc(100vh - 106px);min-height:520px;overflow:hidden;background:var(--gl-ink)} /* .8, not Simon's .62: the gallery interior is already a dark photograph, and .62 made it heavy (7 Nov). */ .gl-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8} .gl-hero-text{position:absolute;left:6vw;bottom:11vh;z-index:2} #content .gl-hero-t{margin:0;font-family:"EB Garamond",Georgia,serif;font-weight:400; font-size:clamp(36px,4.4vw,76px) !important;line-height:1 !important;letter-spacing:-.01em;color:#fff !important} #content .gl-hero-sub{margin:20px 0 0;font-family:"EB Garamond",Georgia,serif;font-size:19px !important; letter-spacing:.09em;text-transform:uppercase;color:#fff !important;line-height:1.1 !important} @media (max-width:900px){ .gl-hero{height:72vh;margin-bottom:72px} .gl-hero-text{left:16px;right:16px;bottom:8vh} #content .gl-hero-sub{font-size:15px !important} } /* ── THE ARTISTS OF THE SHOW · homepage feature panel ─────── The content is Artlogic's own: a Records grid feature panel on the Home page record, listing artist RECORDS, each pulling its name, its list image (the portrait) and its link to the artist page. Change who appears in the panel, not here. This sheet only places it straight after Now showing and gives it the house look: portrait 4:5 crops, names in EB Garamond. Page order on the homepage: hero, Now showing, this panel, then the welcome text and the Sculpture by the Lakes band. */ body.section-home #slideshow{order:1} body.section-home #content > .feature_panels{order:2} body.section-home #content_module > *{order:3} body.section-home #content_module > .gl-hero{order:-1} /* the gap above was 281px: 101px left under the slideshow, plus 130px margin, plus the theme's 50px panel padding (Daniela, 8 Nov: "too big gap"). Now about 120px, the page's rhythm. */ body.section-home .feature_panels{margin:0 !important;padding-top:20px !important} /* ON STONE (Daniela, 8 Nov): the artists sit in a full width Stone band, the print above stays on white. Pulled up close under the print (she asked for a smaller gap twice): the slideshow leaves about 100px of its own space, so the band starts 50px into it. */ /* about 50px under the Now showing print: the slideshow leaves ~33px of its own below the picture, so add 20px, not pull up */ body.section-home #content > .feature_panels{margin:96px 0 0 !important;padding:0 !important} /* the Stone, the sideways row and the arrows belong to the artists panel only. Matched by what it holds (artist records), because the Exhibitions panel is the same panel type (8 Nov). */ body.section-home .feature_panels li.panel:has(.item_content_section_artists){ background:var(--gl-stone);box-shadow:0 0 0 100vmax var(--gl-stone);clip-path:inset(0 -100vmax); padding:72px 0 84px !important; } /* ── EXHIBITIONS · a Records grid of exhibition RECORDS ────── Sacred Earth now, the next show added when its record is live. Laid out like the homepage mockup: three cards across, each picture whole inside a Stone frame (exhibition images are often a painting shot on white), title EB Garamond, subtitle Source Serif, dates in EB capitals. The picture is the exhibition record's own List image. */ body.section-home .feature_panels li.panel:has(.item_content_section_exhibitions){background:none !important;box-shadow:none !important;clip-path:none !important;margin:0 !important;padding:0 !important} /* moved straight after Now showing (Daniela, 8 Nov: "after the printland, show previous and see what's next"), so it sits close under the print and the artists' Stone follows 120px below. */ body.section-home .feature_panels li.panel:has(.item_content_section_artists){margin-top:120px !important} body.section-home .feature_panels li.panel:has(.item_content_section_exhibitions) .panel_header{display:none !important} body.section-home .feature_panels li.panel:has(.item_content_section_exhibitions) .panel_header h2{margin-bottom:0 !important} /* the label above each card follows the ORDER of the cards in the panel: keep the past show first and the next show second. */ body.section-home .feature_panels li.panel:has(.item_content_section_exhibitions) .records_list > ul > li .content::before{ display:block;font-family:"Jost",sans-serif;font-weight:300;font-size:10.4px; letter-spacing:.35em;text-transform:uppercase;color:var(--gl-grey);margin:20px 0 -10px; } body.section-home .feature_panels li.panel:has(.item_content_section_exhibitions) .records_list > ul > li:nth-child(1) .content::before{content:"Previously"} body.section-home .feature_panels li.panel:has(.item_content_section_exhibitions) .records_list > ul > li:nth-child(2) .content::before{content:"Coming next"} body.section-home .feature_panels li.panel:has(.item_content_section_exhibitions) .records_list > ul{display:flex !important;flex-wrap:wrap;justify-content:center;gap:44px;padding:0 !important;margin:0 !important} body.section-home .feature_panels li.panel:has(.item_content_section_exhibitions) .records_list > ul > li{flex:0 0 calc((100% - 88px) / 3) !important;max-width:calc((100% - 88px) / 3) !important} body.section-home .feature_panels li.panel:has(.item_content_section_exhibitions) .records_list > ul > li{width:auto !important;float:none !important;margin:0 !important;padding:0 !important;display:block !important} body.section-home .feature_panels li.panel:has(.item_content_section_exhibitions) .image{display:block !important;background:var(--gl-stone);aspect-ratio:4/3;padding:26px;box-sizing:border-box;overflow:hidden;height:auto !important;min-height:0 !important} body.section-home .feature_panels li.panel:has(.item_content_section_exhibitions) .image > span{position:relative !important;inset:auto !important;width:100% !important;height:100% !important;display:flex !important;align-items:center;justify-content:center} body.section-home .feature_panels li.panel:has(.item_content_section_exhibitions) .image img{width:100% !important;height:100% !important;object-fit:contain !important} body.section-home .feature_panels li.panel:has(.item_content_section_exhibitions) .fp_title{font-family:"EB Garamond",Georgia,serif !important;font-size:26px !important;line-height:1.15 !important;letter-spacing:0 !important;text-transform:none !important;color:var(--gl-ink) !important;margin:20px 0 4px !important} body.section-home .feature_panels li.panel:has(.item_content_section_exhibitions) .subtitle{display:block;font-family:"Source Serif 4",Georgia,serif !important;font-size:16px !important;line-height:1.5 !important;color:var(--gl-grey) !important;text-transform:none !important;letter-spacing:0 !important} body.section-home .feature_panels li.panel:has(.item_content_section_exhibitions) .date{display:block;font-family:"EB Garamond",Georgia,serif !important;font-size:15px !important;letter-spacing:.09em !important;text-transform:uppercase !important;color:var(--gl-grey) !important;margin-top:10px} body.section-home .feature_panels li.panel:has(.item_content_section_exhibitions) .description{display:none !important} @media (max-width:900px){ body.section-home .feature_panels li.panel:has(.item_content_section_exhibitions) .records_list > ul{gap:40px} body.section-home .feature_panels li.panel:has(.item_content_section_exhibitions) .records_list > ul > li{flex:0 0 100% !important;max-width:100% !important} } /* ── SCULPTURE BY THE LAKES · now a feature panel RECORD ──── Image/Text adjacent panel on the Home page record (8 Nov): photo, Heading, Subtitle (shown as the eyebrow above), Content, Link and Link label are all fields in the panel editor. This gives it the measured band from Simon's homepage: square photo 54%, text 46% with 10% padding, eyebrow 19px/24, heading 48px/ 26, text 19px, 34px before the button, Pine line under it. */ body.section-home .feature_panels li.panel_type_4{margin:120px 0 0 !important;padding:0 !important;background:none !important} body.section-home .feature_panels li.panel_type_4 > a{display:grid !important;grid-template-columns:54fr 46fr;align-items:center;text-decoration:none !important} body.section-home .feature_panels li.panel_type_4 .image{display:block !important;aspect-ratio:1/1;overflow:hidden;width:100% !important;height:auto !important;float:none !important;margin:0 !important} body.section-home .feature_panels li.panel_type_4 .image span{display:block !important;width:100% !important;height:100% !important} body.section-home .feature_panels li.panel_type_4 .image img{width:100% !important;height:100% !important;object-fit:cover !important} body.section-home .feature_panels li.panel_type_4 .content{padding:0 10% !important;width:auto !important;float:none !important;margin:0 !important} body.section-home .feature_panels li.panel_type_4 .slider-content{display:flex;flex-direction:column;align-items:flex-start} body.section-home .feature_panels li.panel_type_4 .subtitle{ order:-1;font-family:"Jost",sans-serif !important;font-weight:300 !important;font-size:19px !important; letter-spacing:.35em !important;text-transform:uppercase !important;color:var(--gl-grey) !important; line-height:1.55 !important;margin:0 0 24px !important; } body.section-home .feature_panels li.panel_type_4 h2.fp_title{ font-family:"EB Garamond",Georgia,serif !important;font-size:48px !important;line-height:1.12 !important; letter-spacing:-.01em !important;text-transform:none !important;color:var(--gl-ink) !important;margin:0 0 26px !important; } body.section-home .feature_panels li.panel_type_4 .description p{ font-family:"Source Serif 4",Georgia,serif !important;font-size:19px !important;line-height:1.62 !important; color:var(--gl-body) !important;margin:0 0 1.15em !important; } body.section-home .feature_panels li.panel_type_4 .description p:last-child{margin-bottom:34px !important} body.section-home .feature_panels li.panel_type_4 .link, body.section-home .feature_panels li.panel_type_4 .link span{ font-family:"Jost",sans-serif !important;font-weight:300 !important;font-size:12px !important; letter-spacing:.25em !important;text-transform:uppercase !important;color:var(--gl-ink) !important;line-height:1.62 !important; } body.section-home .feature_panels li.panel_type_4 .link{display:inline-block !important;margin-top:6px !important;padding-bottom:8px !important;border-bottom:1px solid var(--gl-pine) !important} @media (max-width:900px){ body.section-home .feature_panels li.panel_type_4 > a{grid-template-columns:1fr;gap:40px} body.section-home .feature_panels li.panel_type_4 .content{padding:0 !important} body.section-home .feature_panels li.panel_type_4 h2.fp_title{font-size:36px !important} } /* the slideshow paints white over the top of the band where the two overlap; it carries no colour of its own anyway */ body.section-home #slideshow,body.section-home #slideshow > ul, body.section-home #slideshow > ul > li,body.section-home #slideshow .content{background:transparent !important} /* THE WELCOME LINE, straight after the hero and before Now showing (Daniela, 8 Nov). The gallery's own paragraph, tagged gl-welcome in the homepage content, set as a lead in EB Garamond. */ body.section-home #content_module > .gl-welcome{order:0} #content p.gl-welcome{ font-family:"EB Garamond",Georgia,serif !important; font-size:clamp(24px,2.3vw,32px) !important;line-height:1.4 !important; color:var(--gl-ink) !important;max-width:34em;margin:0 0 120px !important; } @media (max-width:900px){#content p.gl-welcome{margin-bottom:72px !important}} body.section-home .feature_panels .panel_header h2{ font-size:clamp(36px,3.6vw,54px) !important;line-height:1.08 !important; letter-spacing:-.01em !important;margin:0 0 48px !important;text-align:left !important; } /* a row that scrolls sideways like a slideshow (Daniela, 8 Nov: "way smaller like the mockups", "to the side like a slideshow"). Four portraits in view with the fifth peeking in, so it reads as a row to move along; snaps to each portrait. Artlogic's records grid has no slider type, so the row is drawn here. */ body.section-home .feature_panels li.panel:has(.item_content_section_artists) .records_list > ul{ display:flex !important;flex-wrap:nowrap !important;gap:28px; overflow-x:auto;scroll-snap-type:x mandatory; padding:0 0 22px !important;margin:0 !important; scrollbar-width:thin;scrollbar-color:#C9C8C3 transparent; } body.section-home .feature_panels li.panel:has(.item_content_section_artists) .records_list > ul > li{ flex:0 0 calc((100% - 112px) / 4.35) !important;width:auto !important;max-width:none !important; padding:0 !important;margin:0 !important;scroll-snap-align:start;display:block !important;float:none !important; /* the theme fades items in as they enter the window; sideways it hid portraits that had scrolled out of view, so they stay on */ opacity:1 !important;transform:none !important;transition:none !important; } @media (max-width:900px){ body.section-home .feature_panels li.panel:has(.item_content_section_artists) .records_list > ul > li{flex-basis:72% !important} } /* ARROWS for the row (Daniela, 8 Nov: for people who cannot scroll sideways easily). Drawn by the browser from CSS alone (::scroll-button), no script: Chrome and Edge show them, Safari and Firefox fall back to trackpad, swipe and the scroll bar. Each click moves a full set along; an arrow hides at its end. */ body.section-home .feature_panels li.panel:has(.item_content_section_artists) .records_list{position:relative} body.section-home .feature_panels li.panel:has(.item_content_section_artists) .records_list > ul::scroll-button(*){ /* at the bottom right of the Stone, quiet (Daniela, 8 Nov: "somewhere on the bottom of the stone, more classy") */ position:absolute;bottom:-52px;width:44px;height:30px; border:0;border-radius:0;background:transparent;color:var(--gl-ink); font-family:"Jost",sans-serif;font-weight:300;font-size:22px;line-height:30px; text-align:center;cursor:pointer;z-index:3;transition:opacity .4s,color .4s; } body.section-home .feature_panels li.panel:has(.item_content_section_artists) .records_list > ul::scroll-button(left){content:"\2190" / "Previous artists";right:52px} body.section-home .feature_panels li.panel:has(.item_content_section_artists) .records_list > ul::scroll-button(right){content:"\2192" / "More artists";right:0} body.section-home .feature_panels li.panel:has(.item_content_section_artists) .records_list > ul::scroll-button(*):disabled{opacity:.25;cursor:default} body.section-home .feature_panels li.panel:has(.item_content_section_artists) .records_list > ul::scroll-button(*):not(:disabled):hover{color:var(--gl-pine)} body.section-home .feature_panels .item_content_section_artists .image{ display:block !important;aspect-ratio:3/4;overflow:hidden;height:auto !important;min-height:0 !important; } body.section-home .feature_panels .item_content_section_artists .image span{display:block !important;height:100% !important;min-height:0 !important} body.section-home .feature_panels .item_content_section_artists img{ width:100% !important;height:100% !important;object-fit:cover; transition:transform 1.4s var(--gl-ease); } body.section-home .feature_panels .item_content_section_artists a:hover img{transform:scale(1.03)} body.section-home .feature_panels .item_content_section_artists .fp_title{ font-family:"EB Garamond",Georgia,serif !important;font-size:24px !important; letter-spacing:0 !important;text-transform:none !important;color:var(--gl-ink) !important; margin:16px 0 4px !important;line-height:1.2 !important; } /* ── NOW SHOWING · the homepage slideshow, restyled ────────── The slideshow stays: it is what the exhibition record's "show on homepage" option feeds, so a new show still goes to the front page with one click. Only its look changes (Daniela, 7 Nov): two equal halves, the work in full at its own shape on white, set against the centre line, never cropped, never with type over it; beside it "Now showing", the title, the subtitle in italic, the dates and a View the exhibition button. No Stone frame (it read as too much Stone around a square print). The button is drawn on the slide's own link, so it needs no field. */ body.section-home #slideshow > ul > li{ display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:96px;align-items:center;width:100%; } body.section-home #slideshow li > span.image{ display:flex !important;align-items:center;justify-content:flex-end; background:none;width:100%;height:auto !important; } body.section-home #slideshow li > span.image span, body.section-home #slideshow li > span.image a{display:flex;align-items:center;justify-content:flex-end;width:100%} body.section-home #slideshow li > span.image img{ width:auto !important;height:auto !important; max-width:100% !important;max-height:72vh !important;object-fit:contain; } body.section-home #slideshow li > .content{padding:0 !important;margin:0 !important;position:static !important;background:none !important} /* LIKE THE SCULPTURE BY THE LAKES BAND (Daniela, 8 Nov: "more in the middle, like sculpture by the lakes"): the same 54 / 46 split, the print centred in the left column, the text column padded 10% so it starts exactly where the band's text starts (993px at 1728). */ body.section-home #slideshow > ul > li{grid-template-columns:54fr 46fr !important;gap:0 !important} body.section-home #slideshow li > span.image{justify-content:center !important;width:100% !important} body.section-home #slideshow li > span.image span, body.section-home #slideshow li > span.image a{justify-content:center !important} body.section-home #slideshow li > .content{padding:0 10% !important} body.section-home #slideshow li > .content .inner{ position:relative !important;padding:0 0 62px !important;margin:0 !important; width:auto !important;max-width:none !important; } body.section-home #slideshow li > .content .inner::before{ content:"Now showing";display:block; font-family:"Jost",sans-serif;font-weight:300;font-size:19px; letter-spacing:.35em;text-transform:uppercase;color:var(--gl-grey);margin:0 0 24px; } body.section-home #slideshow h2, body.section-home #slideshow h2 a{margin:0 0 14px !important;text-align:left !important} body.section-home #slideshow .date{margin:14px 0 0 !important;text-align:left !important} body.section-home #slideshow h2 a::after{ content:"View the exhibition";position:absolute;left:0;bottom:0; font-family:"Jost",sans-serif;font-weight:300;font-size:12px;font-style:normal; letter-spacing:.25em;text-transform:uppercase;color:var(--gl-ink); line-height:1.62;padding-bottom:8px;border-bottom:1px solid var(--gl-pine); } @media (max-width:900px){ body.section-home #slideshow > ul > li{grid-template-columns:1fr;gap:32px} body.section-home #slideshow li > span.image, body.section-home #slideshow li > span.image span, body.section-home #slideshow li > span.image a{justify-content:flex-start} } /* ── LISTS OF WORKS, ARTISTS, EXHIBITIONS ─────────────────── THE ARTWORK RULE, gallery version: many artists here, so the artist stays, as small letterspaced capitals, and the title takes the italic serif. No layout is touched. */ .records_list .content .artist, .records_list .content .artist a, .records_list .content .artist *{ display:block; font-family:"Jost",sans-serif !important; font-weight:300 !important; font-size:10.4px !important; letter-spacing:.3em !important; text-transform:uppercase !important; color:var(--gl-grey) !important; margin-bottom:6px; } .records_list .content .artist_comma,.records_list .content .title_comma{display:none !important} .records_list .content .title, .records_list .content .title a, .records_list .content h2{ font-family:"EB Garamond",Georgia,serif !important; font-size:21px !important; line-height:1.25 !important; letter-spacing:0 !important; text-transform:none !important; color:var(--gl-ink) !important; } .records_list .content > .title > .title{font-style:italic !important} .records_list .content .subtitle,.records_list .content .year{ font-family:"Source Serif 4",Georgia,serif !important; font-size:15px !important; letter-spacing:0 !important; text-transform:none !important; color:var(--gl-grey) !important; } .artist_list_section_wrapper h2{ font-size:26px !important; line-height:1.3 !important; color:var(--gl-ink) !important; } /* ── THE ARTWORK RECORD PAGE ──────────────────────────────── Artist small, title loud and italic, the facts in Source Serif, the price in ink. */ .artwork_details_wrapper h1.artist, .artwork_details_wrapper h1.artist a{ font-family:"Jost",sans-serif !important; font-weight:300 !important; font-size:10.4px !important; letter-spacing:.35em !important; text-transform:uppercase !important; color:var(--gl-grey) !important; line-height:1.4 !important; margin:0 0 22px !important; } .artwork_details_wrapper .subtitle, .artwork_details_wrapper .subtitle .title{ font-family:"EB Garamond",Georgia,serif !important; font-size:42px !important; font-style:italic !important; font-weight:400 !important; letter-spacing:-.01em !important; text-transform:none !important; color:var(--gl-ink) !important; line-height:1.08 !important; } .artwork_details_wrapper .subtitle .year{font-style:normal !important;color:var(--gl-grey) !important;font-size:.5em !important} .artwork_details_wrapper .medium, .artwork_details_wrapper .dimensions, .artwork_details_wrapper .edition_details, .artwork_details_wrapper p{ font-family:"Source Serif 4",Georgia,serif !important; font-size:16px !important; color:var(--gl-grey) !important; line-height:1.7 !important; text-transform:none !important; letter-spacing:0 !important; } .artwork_details_wrapper .price, .artwork_details_wrapper .price *{ font-family:"Source Serif 4",Georgia,serif !important; font-size:18px !important; letter-spacing:0 !important; text-transform:none !important; color:var(--gl-ink) !important; } /* ── BUTTONS AND LINKS ────────────────────────────────────── Simon's button: Jost 300, 12px, .25em, capitals, ink, a hairline beneath, no arrows, in every state. */ #content .link a,#content a.link,#content span.link, #content .button,#content a.button, .artwork_details_wrapper .enquire a, .artwork_details_wrapper a.website_contact_form, .artwork_details_wrapper a.button{ font-family:"Jost",sans-serif !important; font-weight:300 !important; font-size:12px !important; letter-spacing:.25em !important; text-transform:uppercase !important; color:var(--gl-ink) !important; line-height:1.62 !important; } .artwork_details_wrapper a.website_contact_form{ display:inline-block !important; text-decoration:none !important; border-bottom:1px solid var(--gl-pine) !important; padding-bottom:8px !important; } /* ── THE FOOTER ───────────────────────────────────────────── */ #footer,#footer a,#footer .copyright,#footer .copyright *{ font-family:"Jost",sans-serif !important; font-weight:300 !important; font-size:10.4px !important; letter-spacing:.3em !important; text-transform:uppercase !important; color:var(--gl-grey) !important; } /* ============================================================ OUR OWN BLOCKS · gl- classes Written into page content (feature panels, viewing room text, page text). They exist nowhere else, so they cannot reach the theme. These carry the layouts from the approved mockups in Work/SBTL/Gallery Shop mockups. ============================================================ */ .gl-num{font-family:"Source Serif 4",Georgia,serif} /* the eyebrow and the button, the two small type jobs */ #content .gl-eyebrow{ margin:0 0 24px; font-family:"Jost",sans-serif !important; font-weight:300;font-size:10.4px !important; letter-spacing:.35em;text-transform:uppercase; color:var(--gl-grey) !important; } /* THE BUTTON, Simon's "Plan a visit" measured: Jost 300, 12px, 3px (.25em), capitals, Ink text, 1px line 8px below. His line is bronze; here it is Pine, the one Sculpture by the Lakes accent, in the same role. */ #content .gl-btn{ display:inline-block; font-family:"Jost",sans-serif;font-weight:300;font-size:12px; letter-spacing:.25em;text-transform:uppercase; color:var(--gl-ink) !important;text-decoration:none !important; line-height:1.62;padding:0 0 8px;border-bottom:1px solid var(--gl-pine); } /* THE PLATE. A full bleed photograph with the title over it, a scrim deepest where the words sit. Never over an artwork: only a photograph of a place or a person. */ .gl-plate{position:relative;overflow:hidden;width:100vw;margin:-50px 0 110px calc(50% - 50vw);height:72vh;background:var(--gl-ink)} .gl-plate img{display:block;width:100%;height:100%;object-fit:cover} .gl-plate::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(20,20,19,.86) 0%,rgba(20,20,19,.5) 34%,rgba(20,20,19,.12) 64%,rgba(20,20,19,0) 100%)} .gl-plate-text{position:absolute;left:6vw;bottom:9%;z-index:2} #content .gl-plate .gl-eyebrow{color:rgba(255,255,255,.85) !important} #content .gl-plate-title{margin:0;font-family:"EB Garamond",Georgia,serif;font-weight:400; font-size:clamp(46px,6.5vw,104px) !important;line-height:.95 !important;letter-spacing:-.01em;color:#fff !important} .gl-plate-title em{font-style:italic} /* THE INK BAND, for inner pages without a photograph */ .gl-band-ink{background:var(--gl-ink);box-shadow:0 0 0 100vmax var(--gl-ink);clip-path:inset(0 -100vmax); padding:120px 0 88px;margin:-50px 0 120px} #content .gl-band-ink .gl-eyebrow{color:var(--gl-mute) !important} #content .gl-band-ink h1{margin:0;font-size:clamp(46px,6.5vw,104px) !important;line-height:.95 !important;letter-spacing:-.01em !important;color:#fff !important} .gl-band-ink h1 em{font-style:italic} /* THE INTRO. A lead sentence beside the body copy */ .gl-intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:80px;align-items:start;padding-bottom:110px} #content .gl-lead{margin:0;font-family:"EB Garamond",Georgia,serif !important;font-size:clamp(26px,2.6vw,34px) !important;line-height:1.38;color:var(--gl-ink) !important} /* THE DOORS. Fixed ratios so a hub reads as a composition */ .gl-row1{margin-bottom:68px} .gl-row2{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-bottom:68px} .gl-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:44px} .gl-tile{display:block} .gl-im{display:block;overflow:hidden;background:var(--gl-stone)} .gl-im img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--gl-ease)} .gl-tile:hover .gl-im img{transform:scale(1.035)} .gl-21x9{aspect-ratio:21/9}.gl-4x3{aspect-ratio:4/3}.gl-1x1{aspect-ratio:1/1} .gl-cap{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:18px 2px 0} .gl-t{font-family:"EB Garamond",Georgia,serif;font-size:26px;line-height:1.2;color:var(--gl-ink)} .gl-d{font-family:"Jost",sans-serif;font-weight:300;font-size:10.4px;letter-spacing:.3em;text-transform:uppercase;color:var(--gl-grey);text-align:right} .gl-row3 .gl-cap{flex-direction:column;gap:8px}.gl-row3 .gl-d{text-align:left} /* THE STONE BAND, a feature with images beside the text */ .gl-band{background:var(--gl-stone);box-shadow:0 0 0 100vmax var(--gl-stone);clip-path:inset(0 -100vmax); display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:center;padding:110px 0;margin:110px 0 0} #content .gl-h2{margin:0 0 24px;font-size:clamp(36px,3.6vw,54px) !important;line-height:1.08 !important;letter-spacing:-.01em !important} .gl-h2 em{font-style:italic} .gl-ims{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px} .gl-ims a,.gl-ims span{display:flex;align-items:center;justify-content:center;background:var(--gl-white);aspect-ratio:3/4;overflow:hidden;padding:14px} .gl-ims img{display:block;max-width:100%;max-height:100%;object-fit:contain} /* THE PINE BAND, Sculpture by the Lakes */ .gl-visit{background:var(--gl-pine);box-shadow:0 0 0 100vmax var(--gl-pine);clip-path:inset(0 -100vmax); display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:center;padding:110px 0;margin:110px 0 0} #content .gl-visit .gl-eyebrow{color:rgba(255,255,255,.8) !important} #content .gl-visit .gl-h2,#content .gl-visit p{color:#fff !important} #content .gl-visit .gl-btn{color:#fff !important;border-color:#fff} .gl-visit .gl-ph{aspect-ratio:4/3;overflow:hidden}.gl-visit .gl-ph img{width:100%;height:100%;object-fit:cover;display:block} /* THE SCULPTURE BY THE LAKES BAND, homepage. Simon's homepage band measured on simongudgeon.com at 1728px, 7 Nov: a square photograph at 54% of the row, text at 46% with 10% padding each side, centred on the photograph. Eyebrow Jost 300 19px .35em, 24px below. Heading EB Garamond 48px, 1.12, 26px below. Text 19px, 1.62, 34px below. Button 6px further down. Upright throughout, no italic word (Daniela, 7 Nov). */ .gl-sbtl{display:grid;grid-template-columns:54fr 46fr;align-items:center;margin:120px 0} .gl-sbtl .gl-ph{aspect-ratio:1/1;overflow:hidden} .gl-sbtl .gl-ph img{width:100%;height:100%;object-fit:cover;display:block} .gl-sbtl .gl-tx{padding:0 10%} #content .gl-sbtl .gl-eyebrow{font-size:19px !important;letter-spacing:.35em;line-height:1.55;margin:0 0 24px} #content .gl-sbtl .gl-h2{font-size:48px !important;line-height:1.12 !important;letter-spacing:-.01em !important;margin:0 0 26px;font-style:normal} #content .gl-sbtl p.gl-text{font-size:19px;line-height:1.62;margin:0 0 1.15em} /* the 34px before the button only, so two paragraphs keep the ordinary paragraph gap between them */ #content .gl-sbtl p.gl-text:has(+ p .gl-btn){margin-bottom:34px} #content .gl-sbtl .gl-btn{margin-top:6px} @media (max-width:900px){ .gl-sbtl{grid-template-columns:1fr;gap:40px;margin:72px 0} .gl-sbtl .gl-ph{aspect-ratio:4/3} .gl-sbtl .gl-tx{padding:0} #content .gl-sbtl .gl-h2{font-size:36px !important} } /* THE PORTRAIT AND WORKS spotlight */ .gl-spot{grid-template-columns:minmax(0,4fr) minmax(0,7fr)} .gl-spot .gl-portrait{aspect-ratio:4/5;overflow:hidden} .gl-spot .gl-portrait img{width:100%;height:100%;object-fit:cover;display:block} .gl-spot .gl-ims{grid-template-columns:repeat(4,1fr);margin-top:34px} /* THE STUDIO spotlight, full width over a landscape portrait */ .gl-studio{position:relative;overflow:hidden;width:100vw;margin:110px 0 0 calc(50% - 50vw);height:min(80vh,760px)} .gl-studio img{width:100%;height:100%;object-fit:cover;display:block} .gl-studio::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(20,20,19,.82) 0%,rgba(20,20,19,.45) 38%,rgba(20,20,19,0) 70%)} .gl-studio-text{position:absolute;left:6vw;top:50%;transform:translateY(-50%);z-index:2;max-width:440px} #content .gl-studio .gl-eyebrow{color:rgba(255,255,255,.8) !important} #content .gl-studio .gl-h2,#content .gl-studio p{color:#fff !important} #content .gl-studio .gl-btn{color:#fff !important;border-color:#fff} @media (max-width:900px){ .gl-plate{height:60vh;margin-bottom:64px} .gl-band-ink{padding:80px 0 56px;margin-bottom:72px} .gl-intro{grid-template-columns:1fr;gap:32px;padding-bottom:64px} .gl-21x9{aspect-ratio:16/10}.gl-1x1{aspect-ratio:4/3} .gl-row2,.gl-row3{grid-template-columns:1fr;gap:52px;margin-bottom:52px} .gl-cap{flex-direction:column;gap:8px}.gl-d{text-align:left} .gl-band,.gl-visit{grid-template-columns:1fr;gap:44px;padding:76px 0} .gl-spot .gl-ims{grid-template-columns:1fr 1fr} .gl-studio-text{left:16px;right:16px;top:auto;bottom:28px;transform:none} .gl-studio::after{background:linear-gradient(to top,rgba(20,20,19,.86) 0%,rgba(20,20,19,.4) 45%,rgba(20,20,19,0) 75%)} } /* ── ARTISTS LIST: THE CATEGORY FILTERS (v3.9, 8 Nov 2026) ─── All, Sculptors, Painters, Printmakers... sit on the baseline of the "Artists" title and end on the list's right edge. The title scales (clamp 40 to 76px, line-height 1), so the filters' offset scales with it: title descent .145em less the filters' own 12.4px. Scoped to the list pages only; artist pages untouched. Phone: the filters drop under the title, start on its left edge and slide sideways on one line instead of wrapping. */ .subsection-artists-list .artists-header{display:flex !important;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;column-gap:48px;row-gap:14px} .subsection-artists-list .artists-header::before,.subsection-artists-list .artists-header::after{display:none !important} .subsection-artists-list .artists-header h1{float:none !important;margin:0 !important;flex:0 0 auto} .subsection-artists-list #sub_nav{float:none !important;position:static !important;clear:none !important;width:auto !important;margin:0 0 calc(clamp(40px,5vw,76px) * .145 - 12.4px) !important;padding:0 !important} .subsection-artists-list #sub_nav .inner{float:none !important;margin:0 !important;padding:0 !important} .subsection-artists-list #sub_nav ul{display:flex !important;gap:0 34px;margin:0 !important;padding:0 !important;list-style:none;float:none !important} .subsection-artists-list #sub_nav li{float:none !important;display:block !important;margin:0 !important;padding:0 !important} .subsection-artists-list #sub_nav li a{display:inline-block;padding:0 0 6px !important;margin:0 !important;border-bottom:1px solid transparent} .subsection-artists-list #sub_nav li.active a{border-bottom-color:var(--gl-ink)} .subsection-artists-list #sub_nav li a:hover{color:var(--gl-ink) !important} @media (max-width:900px){ .subsection-artists-list .artists-header{flex-direction:column;align-items:flex-start} .subsection-artists-list #sub_nav{width:100% !important;margin:0 !important} .subsection-artists-list #sub_nav ul{gap:0 26px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent);padding-right:36px !important} .subsection-artists-list #sub_nav ul::-webkit-scrollbar{display:none} .subsection-artists-list #sub_nav li{flex:0 0 auto} .subsection-artists-list #sub_nav li a{padding:8px 0 !important} }