/* ========================================================================== Tern Gallery — custom styles What belongs in this file: - animations and transitions - CSS the Site Editor cannot express (complex selectors, pseudo-elements, form field styling) What does NOT belong here: - colours, fonts, sizes and spacing. Those live in the Site Editor (Appearance > Editor > Styles) so they stay editable without code. Remember: the Site Editor overrides files. If a rule here appears to do nothing, check whether the Site Editor is setting the same property. ========================================================================== */ /* ========================================================================== FORM FIELDS Shared behaviour for every place a visitor types something. At the moment the newsletter signup in the footer is the only one on the site, but a search or contact field added later picks all of this up on its own. Scoped to .wp-site-blocks — the wrapper a block theme puts around everything it renders on the page. This stylesheet also loads inside the Site Editor, and that scope keeps these rules off the editor's own toolbars and panels. ========================================================================== */ :root { /* * What an autofilled field paints itself. It has to be a real colour — * there is no way in CSS to say "whatever is behind me" — so it is the * page background. If a field is ever placed on a differently coloured * panel, re-declare this property on that panel and everything below * follows. */ --terngallery-field-background: var(--wp--preset--color--custom-off-white, #fffbf8); /* * The focus indicator: a second hairline drawn directly beneath the * field's own rule, so the line reads as twice as thick. A shadow rather * than a thicker border, because a border would make the field taller and * nudge everything under it down by a pixel. */ --terngallery-field-focus-line: 0 1px 0 0 currentColor; } /* -------------------------------------------------------------------------- Autofill. When the browser fills a field in for you it paints the background and the text in a layer that ordinary `background-color` and `color` cannot reach — which is where the pale blue comes from. Two properties do reach it: a large inset shadow covers the background, and -webkit-text-fill-color recolours the text. The hover, focus and active states are spelled out because the blue comes back on each one otherwise. The absurd transition delay is the standard trick for stopping Chrome fading its own colour in before ours lands — nothing actually animates, the change is simply never reached. :-webkit-autofill and :autofill are the same thing under two names, old and standard. They are wrapped in :is() so that a browser which knows only one of them ignores the other rather than throwing the whole rule away. -------------------------------------------------------------------------- */ .wp-site-blocks :is(input[type="text"], input[type="email"], input[type="search"]):is(:-webkit-autofill, :autofill), .wp-site-blocks :is(input[type="text"], input[type="email"], input[type="search"]):is(:-webkit-autofill, :autofill):is(:hover, :focus, :focus-visible, :active) { /* The prefixed property first, for older Safari, which ignores the unprefixed one here. Both say the same thing. */ -webkit-box-shadow: 0 0 0 100px var(--terngallery-field-background) inset; box-shadow: 0 0 0 100px var(--terngallery-field-background) inset; -webkit-text-fill-color: currentColor; caret-color: currentColor; transition: background-color 100000s ease-in-out 0s; } /* -------------------------------------------------------------------------- Focus. The browser's default is a heavy box drawn around the whole field. It is removed here and replaced, not simply deleted: someone navigating by keyboard has to be able to see where they are. Note that a typing field counts as keyboard-relevant to the browser, so :focus-visible matches when it is clicked as well as when it is tabbed to. That is deliberate on the browsers' part and is what we want: clicking the field shows the same quiet line rather than the black box. -------------------------------------------------------------------------- */ .wp-site-blocks :is(input[type="text"], input[type="email"], input[type="search"]):is(:focus, :focus-visible) { outline: 0; } /* * The newsletter field is excluded because its rule is drawn by its wrapper * rather than by the input itself — see the footer section below, which puts * the same line on the wrapper. Without this it would draw its line exactly * on top of the existing one and nothing would appear to change. */ .wp-site-blocks :is(input[type="text"], input[type="email"], input[type="search"]):not(.terngallery-newsletter__input):focus-visible { box-shadow: var(--terngallery-field-focus-line); } /* ========================================================================== FONTS ========================================================================== */ /* -------------------------------------------------------------------------- Suisse Intl's italic. Links go italic on hover (see INTERACTIVE STATES). For ABC Otto that picks the real Otto Italic file, because both Otto files were uploaded as one family. Suisse's italic was uploaded as a separate family, "Suisse BP Int'l", so a Suisse link — the footer's contact and social links — got a fake, computer-slanted version of the upright letters instead. This tells the browser that the italic file already in the Font Library is the italic of "Suisse Intl" too. Nothing new is downloaded; it is the same file at the same address. -------------------------------------------------------------------------- */ @font-face { font-family: "Suisse Intl"; font-style: italic; font-weight: 300; font-display: fallback; src: url("/wp-content/uploads/fonts/Suisse-BP-Int_l-Light-Italic.otf") format("opentype"); } /* ========================================================================== FOOTER The footer's layout is built with blocks and edited in the Site Editor (Appearance > Editor > Patterns > Footer). Only the parts blocks can't express are styled here. ========================================================================== */ /* -------------------------------------------------------------------------- Every line on the site — all Separator blocks (footer top edge, the Home pages, section labels on About, Events and Exhibitions, the Single Artwork / Single Artist patterns) — is one hairline: solid black, 0.5px. Styled here because the Separator block has no line-weight setting in the Site Editor, only a colour. The colour is set here too because Twenty Twenty-Five gives every Separator its "accent 6" colour, which is 20% of the text colour, i.e. grey — and the design has no grey. It uses the Site Editor's Black swatch, so changing that swatch changes every line. 0.5px: on high-resolution screens (most phones, Macs) this is one physical pixel. Ordinary screens can't draw half a pixel and show a 1px line instead — the finest line they have. The dotted Separator style is left alone; it's dots, not a line. The underlines drawn in templates.css match this, and the one exception — the off-white rule on the orange Events panel — is further down. Changed 2026-09-29; before that these were 1px at 25–20% strength. -------------------------------------------------------------------------- */ .wp-block-separator:not(.is-style-dots) { height: 0; border: 0; border-top: 0.5px solid var(--wp--preset--color--custom-black, #000); background: none; opacity: 1; } /* On the Home hero, a line takes the colour of the text in its panel instead: white over the photograph, black on the plain panel. "currentColor" means "the same colour as the text around me", so if a panel's text colour is changed in the editor, its line follows. "color: inherit" is needed first: the theme gives the Separator its own 20%-strength text colour, which currentColor would otherwise pick up. */ .terngallery-hero__panel-pin .wp-block-separator:not(.is-style-dots) { color: inherit; border-top-color: currentColor; } /* The labelled hairlines sit tight under their label; their spacing is set per block in the editor. */ .wp-block-separator.terngallery-hairline { margin-block: 0; } /* The gap between the footer's top line and its columns: 20px on phones (client feedback, 2026-10-05). The desktop gap is a block setting — the Columns block's top margin in the Site Editor, 28.6px for Figma's 30px — and a block setting has no separate phone value, so the phone one lives here. "!important" is needed because the block setting is written onto the element itself, which outranks any stylesheet rule. The footer text is 11px on a 15px line on phones, as in Figma, so 20px here is Figma's 20px. Up to 1199px: the footer uses its phone layout until the three columns have room (see "The footer on a phone"). */ @media (max-width: 1199px) { .terngallery-footer-rule + .wp-block-columns { margin-top: 20px !important; } } /* -------------------------------------------------------------------------- The footer on a phone, and on any screen up to 1199px. The layout is the Figma "Footer S Mobile" frame. Below 782px WordPress stacks a Columns block into a single column by itself. Between 782 and 1199px it would keep the three wide columns, which run out of room there: the address wraps and the email runs into the opening hours. So the same stacked layout is used up to 1199px (Karla, 2026-10-06), and the columns are stacked here for that range. From 1200px the wide layout has room. ⚠️ The type sizes at the end of this block use !important, and they have to: the Site Editor writes font sizes into each block as an inline style, and an inline style can only be beaten that way. The cost is real — changing a footer size in the Site Editor will change it on a wide screen and do nothing on a phone, because these win. If a size looks stuck on a phone, this is why. Change it here as well. -------------------------------------------------------------------------- */ @media (max-width: 1199px) { /* Stacked: one column at a time, full width, as WordPress does by itself below 782px. Its own rule for wider screens forbids wrapping with !important, so this needs it too. */ footer.wp-block-template-part .wp-block-columns { flex-wrap: wrap !important; } footer.wp-block-template-part .wp-block-columns > .wp-block-column { flex-basis: 100% !important; } /* The stacked gaps at their phone sizes at every width up to 1199px: 30px between the address, the hours and the links, 70px above the logo. Both are spacing presets that grow with the screen, which would open the stack up to 50px and 100px on a tablet. The Spacer's height is typed into the block, hence !important. */ footer .terngallery-footer-rule + .wp-block-columns { row-gap: 30px; } footer .terngallery-footer-rule ~ .wp-block-spacer { height: 70px !important; } /* The tagline and the copyright one above the other. On a phone the copyright drops below for want of room; on a wider screen it would stay on the tagline's line, so the stack is made explicit. */ footer .wp-block-group:has(> .terngallery-footer-copyright) { flex-direction: column; align-items: flex-start; } /* The social links run across in one line on a phone, not stacked. The line breaks between them are the stacking, so they go; the gap is the 10px from the design. */ .terngallery-footer-social br { display: none; } .terngallery-footer-social a:not(:last-child) { margin-right: 10px; } /* 261px rather than the 405px of the wide layout. "footer" in front makes this outrank the 405px rule, which comes later in this file and would otherwise win. */ footer .terngallery-newsletter { max-width: 261px; } /* 109px rather than 297px. Scoped to the footer so the header's own logo, which is a different size, is left alone. */ footer .wp-block-site-logo img { max-width: 109px; } /* Stacked, the copyright sits under the tagline at the left margin. The automatic left margin that pins it right on a wide screen (see "The copyright line" below) would push it to the right edge here, so it is cleared. "footer" in front makes this outrank that rule, which comes later in this file and would otherwise win. */ footer .wp-block-group.terngallery-footer-copyright { margin-left: 0; } /* Vertical spacing, from the Figma mobile frame (2026-10-06). The phone type sits on the same line heights as the design, so these are the design's numbers as drawn. The blank line inside the address and the opening hours: one 15px line, not the 30px block spacing the columns use on a wide screen. */ footer .terngallery-footer-rule + .wp-block-columns > .wp-block-column > p + p { margin-block-start: 15px; } /* 70px from the newsletter line to the logo. That is the Spacer block's own height, so the automatic block spacing above and below it is removed. */ footer .terngallery-footer-rule ~ .wp-block-spacer, footer .terngallery-footer-rule ~ .wp-block-spacer + .wp-block-columns { margin-block-start: 0; } /* 17px from the logo to the tagline, and from the tagline to the copyright, instead of the 30px the stacked blocks would otherwise get. */ footer .wp-block-spacer + .wp-block-columns, footer .wp-block-group:has(> .terngallery-footer-copyright) { row-gap: 17px; } /* The second column of the bottom row is empty by design — it is what puts the tagline on the same line as the social links above it. Stacked, it is just a gap, so it comes out. Only the footer's from 782px up; on a phone every empty column goes, as before (the rule after this block). */ footer.wp-block-template-part .wp-block-column:empty { display: none; } /* ---------------------------------------------------------------------- Type sizes, from the Figma mobile frame. See the warning above. The two font-family classes are what separate them: everything set in Suisse is the small capitals, and the one thing set in ABC Otto is the tagline sentence. Letter-spacing is left alone — the design's 0.33px at 11px is the same 0.03em the wide layout already uses. ---------------------------------------------------------------------- */ footer.wp-block-template-part .has-suisse-intl-font-family { font-size: 11px !important; line-height: 15px !important; } footer.wp-block-template-part .has-abc-otto-font-family { font-size: 12px !important; line-height: 16px !important; } /* Smaller again, and listed after the rule above so that it wins — the copyright is set in Suisse too and would otherwise be caught by it. */ footer.wp-block-template-part .wp-block-group.terngallery-footer-copyright { font-size: 9px !important; line-height: 15px !important; } /* 11px under the copyright line, as in the frame (Karla, 2026-10-06), rather than the 30px typed into the footer's outer group, which wide screens keep. Typed, so only !important outweighs it. */ footer.wp-block-template-part > .wp-block-group { padding-bottom: 11px !important; } } /* Phones: any empty column, anywhere, is only a gap once stacked. */ @media (max-width: 781px) { .wp-block-column:empty { display: none; } } /* -------------------------------------------------------------------------- The copyright line, bottom right. It shares a row with the tagline, set to "space between": the tagline goes to the left of the row and the copyright to the right. That works only while both fit on one line. On a narrower screen the copyright drops onto a line of its own, and a row with one item on it has nothing to space apart — so it would sit on the left, under the tagline, instead of out at the right edge. An automatic left margin eats whatever room is left on its line, which pins it to the right edge either way: level with the end of the hairline rule above and with the right-hand edge of the footer. The selector names the block class as well as ours only to outweigh one of WordPress's own rules — it zeroes the margins of everything inside a flex row, and a single class of ours does not beat it. Dropping `.wp-block-group` from the front of this makes the rule stop working. -------------------------------------------------------------------------- */ .wp-block-group.terngallery-footer-copyright { margin-left: auto; } /* The bottom row on a wide screen: the logo, the tagline and the copyright stand on one line, as in Figma (client feedback, 2026-10-06). The columns are set to "bottom" in the Site Editor, which lines up the bottoms of their boxes. But a line of text has room under its letters for the tails of g, p and y, and that room differs between the 16px tagline and the 10px copyright — so their letters floated a few pixels above the logo's foot, each by a different amount. Aligning on the baseline (the line the letters stand on) fixes that; for the logo, an image, the baseline is its bottom edge. It keeps working if a size is changed in the Site Editor. Below 1200px the row is stacked (see "The footer on a phone"). */ @media (min-width: 1200px) { footer .wp-block-spacer + .wp-block-columns, footer .wp-block-group:has(> .terngallery-footer-copyright) { align-items: last baseline; } /* Each column carries its own "bottom" setting, which would otherwise win over the row's. */ footer .wp-block-spacer + .wp-block-columns > .wp-block-column { align-self: last baseline; } } /* -------------------------------------------------------------------------- Newsletter field. Rendered by the [terngallery_newsletter] shortcode. Once a Mailchimp form URL is saved in TERN Settings > Newsletter it becomes a real form posting straight to Mailchimp; until then it renders the same field with no
around it, so it looks right but cannot submit — typing an address and pressing Enter does nothing at all. That is the intended safe state, not a bug in the field. The look — a single hairline underneath with an arrow at the right — isn't something the Site Editor can produce, which is why it lives here. -------------------------------------------------------------------------- */ .terngallery-newsletter { /* * The design's line of type: 13px on an 18px line. The field and the * arrow are both positioned from this ratio rather than from fixed * pixels, so they stay aligned with each other if the footer's font * size is changed in the Site Editor. */ --terngallery-newsletter-line: 1.385; position: relative; /* 405px is the rule's width in the Figma file. Black, 0.5px, to match every other line on the site (until 2026-09-29 it was 1px in the footer's text colour, which the theme sets to a near-black #111). */ max-width: 405px; border-bottom: 0.5px solid var(--wp--preset--color--custom-black, #000); } .terngallery-newsletter__input { /* "inherit" throughout means the field picks up whatever typography the surrounding block sets, so changing the font in the Site Editor changes this too. Nothing is hard-coded. */ width: 100%; /* The padding counts inside that 100%. Otherwise the field is 24px wider than its column, which the 12px phone margin can't hide: the whole page then scrolls sideways. */ box-sizing: border-box; /* The right padding keeps a long address from running underneath the arrow. The 0.23em below it is the gap between the type and the rule in the design — 3px at 13px type. */ padding: 0 1.5rem 0.23em 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; /* Set after `font`, which is a shorthand and would otherwise reset it. */ line-height: var(--terngallery-newsletter-line); /* Upright, both the placeholder and the address typed in. It was italic between 2026-10-01 and 2026-10-15, then taken back off at Karla's request: it read as the odd one out beside the upright social links directly above it. */ font-style: normal; letter-spacing: inherit; text-transform: inherit; -webkit-appearance: none; appearance: none; } /* Browsers normally grey out placeholder text. We want it to read as a label, so it matches the surrounding text exactly. */ .terngallery-newsletter__input::placeholder { color: inherit; opacity: 1; } /* Focus. The browser's heavy focus box is removed site-wide in FORM FIELDS above. Nothing is drawn in its place here, on purpose: the 0.5px rule stays 0.5px while someone is typing their address. Every other field on the site gains a second hairline on focus — see --terngallery-field-focus-line in FORM FIELDS. This one is deliberately exempt, because the rule thickening as you type reads as the field changing rather than as a focus state. Don't add it back without asking. What a keyboard user gets instead is the text cursor, which is the browser's own focus indication for a typing field, plus the real focus ring still on the arrow button below. */ /* The arrow is a real submit button, so the form can be sent by clicking it as well as by pressing Enter. Button styling is stripped back to nothing so it reads as part of the typography rather than as a control. Its height is the height of the line of type, not of the whole field — the field is taller because of the gap above the rule — so that centring the arrow inside it puts it level with the words, as in the design. */ .terngallery-newsletter__submit { position: absolute; right: 0; top: 0; height: calc(1em * var(--terngallery-newsletter-line)); display: flex; align-items: center; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; } /* Only the real submit button invites a click. Before the Mailchimp URL is set the shortcode renders an inert button in its place, and giving that one a pointer cursor would promise something that doesn't happen. */ .terngallery-newsletter__submit[type="submit"] { cursor: pointer; } /* The arrow itself is the Figma file's own drawing, at its own size — the same approach as the arrows on the artist and artwork pages. It is a separate file from assets/arrow.svg because the file draws this one smaller. */ .terngallery-newsletter__submit::after { content: url("newsletter-arrow.svg"); display: block; line-height: 0; } .terngallery-newsletter__submit:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } /* Mailchimp's spam trap. Positioned far off-screen rather than hidden with display:none, because some automated scripts skip fields that are properly hidden — which would defeat the point. */ .terngallery-newsletter__trap { position: absolute; left: -5000px; } /* ========================================================================== HEADER Layout is built with blocks and edited in the Site Editor (Appearance > Editor > Patterns > Header). Only the parts blocks can't express are styled here. ========================================================================== */ /* -------------------------------------------------------------------------- The header stays on screen. "fixed" takes the header out of the page entirely and pins it to the top of the window, so it no longer occupies any space. Every page therefore has to reserve that space itself, which is what the padding on .wp-site-blocks does — otherwise the first thing on each page would start underneath it. The height below is only a starting point. custom.js measures the real header and writes the true value back into this variable, so changing the logo size or the header's padding in the Site Editor needs no edit here. The written-down value only matters for the instant before the script runs. The background is not decoration: without it the page would scroll visibly through the header. -------------------------------------------------------------------------- */ :root { --terngallery-header-height: 4.1rem; /* How far down the header sits. Zero for visitors. Anyone logged in has the WordPress admin bar above it, which is itself fixed to the top, so the header has to start below that instead. The three widths match the ones WordPress uses for the bar: 32px, then 46px, then it stops being fixed at all and simply scrolls away. */ --terngallery-header-top: 0px; } body.admin-bar { --terngallery-header-top: 32px; } @media screen and (max-width: 782px) { body.admin-bar { --terngallery-header-top: 46px; } } @media screen and (max-width: 600px) { body.admin-bar { --terngallery-header-top: 0px; } } .wp-site-blocks > header.wp-block-template-part { position: fixed; top: var(--terngallery-header-top); left: 0; right: 0; /* Above the page, below the intro splash (9999) and the artist hover preview (60), both of which are meant to cover it. */ z-index: 50; background: var(--wp--preset--color--custom-off-white, #fffbf8); } .wp-site-blocks { padding-top: var(--terngallery-header-height); } /* -------------------------------------------------------------------------- "Centred cluster, with one item pinned to the right edge." Blocks can centre things, and blocks can push things right, but they can't do both in one row — a right-pinned item would drag the centred group off-centre. Taking Events out of the flow keeps the wordmark and menu genuinely centred. Desktop only. On narrow screens everything returns to normal flow and stacks, because pinning to the edge stops making sense there. -------------------------------------------------------------------------- */ @media (min-width: 782px) { .terngallery-header-row { position: relative; } .terngallery-header-row > .terngallery-header-events { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; } } /* -------------------------------------------------------------------------- The header on desktop: the Figma Top Bar (node 943:1972), 43px tall. Menu and Events in the 14/19 "Desktop Text" style, the wordmark 78px wide, 12px above and below. Together: 12 + 19 + 12 = 43. The padding works the same way as on phones below: it is typed into the template part as the "30" spacing size, so redefining that size for this row only changes it here. Typing a new number into the Site Editor instead would break the phone rule, which relies on the "30" size staying put. -------------------------------------------------------------------------- */ @media (min-width: 782px) { .wp-site-blocks .terngallery-header-row { --wp--preset--spacing--30: 12px; } .terngallery-header-row .wp-block-site-logo img { width: 78px; height: auto; } .terngallery-header-row .terngallery-header-nav .wp-block-navigation-item, .terngallery-header-row .terngallery-header-events a { font-size: 14px; line-height: 19px; } /* The words sit on the bottom edge of the wordmark, as in Figma. The row centres the wordmark and the menu on each other, which leaves the letters' baseline 4px above the wordmark's foot; this moves the words down by that much without changing the bar's height. "nav" is named because WordPress copies the menu's class onto the list inside it too, which would otherwise move the words twice. */ .terngallery-header-row nav.terngallery-header-nav, .terngallery-header-row .terngallery-header-events a { position: relative; top: 4px; } } /* -------------------------------------------------------------------------- The header on phones: one thin bar, as in the Figma mobile Home frame. Wordmark on the left, the menu straight after it, Events against the right edge, 12px in from both sides, 43px tall. The menu is written out rather than hidden behind a menu button because the Navigation block's "Overlay Menu" is set to Off in the header template part; this only arranges it. It stays on one line down to the narrowest phones (320px): the gaps are tied to the screen width so they close up, and below about 335px the type steps down slightly as well, rather than the menu wrapping. -------------------------------------------------------------------------- */ @media (max-width: 781px) { /* The side margin comes from the page-wide padding on the group around the row, which is wider than the 12px the design wants. */ .wp-site-blocks > header .has-global-padding:has(> .terngallery-header-row) { padding-left: 12px; padding-right: 12px; } /* The row's top and bottom padding is typed into the template part as the "30" spacing size, on the element itself. Redefining that size for this row only turns it into 13.5px, which with the 16px line of the menu makes the 43px bar. */ .wp-site-blocks .terngallery-header-row { --wp--preset--spacing--30: 13.5px; flex-wrap: nowrap; justify-content: space-between; gap: 0; } /* Wordmark and menu. 13px apart at the 376px design width. */ .terngallery-header-row > .wp-block-group { gap: min(13px, 3.5vw); min-width: 0; } /* The wordmark never gives up width; only the gaps do. */ .terngallery-header-row .wp-block-site-logo { flex-shrink: 0; } .terngallery-header-row .wp-block-site-logo img { width: 52px; height: auto; } .terngallery-header-nav, .terngallery-header-nav .wp-block-navigation__container { flex-wrap: nowrap; gap: min(0.35em, 1vw); } /* Below about 335px the words themselves no longer fit, however small the gaps, so the type steps down with the screen from there: 12px at 333px, about 11.5px at 320px. Wider screens keep the 12px of the mobile type sizes further down this file; the extra class in front makes this rule the one that counts. */ .terngallery-header-row .terngallery-header-nav .wp-block-navigation-item, .terngallery-header-row .terngallery-header-events a { font-size: min(var(--wp--preset--font-size--medium), 3.6vw); } .terngallery-header-row > .terngallery-header-events { margin: 0 0 0 min(12px, 2vw); white-space: nowrap; } /* The words sit on the foot of the wordmark (Karla, 2026-10-15), as on a wide screen above. Centred on each other in the 43px bar, the letters' baseline lands just above the wordmark's foot; this moves the words down onto it without changing the bar. 1px: the font's metrics say 1.8px, but a phone snaps text to whole pixels, and 2px put the letters a pixel below the foot (measured on Karla's screenshot). "nav" is named for the same reason as above. */ .terngallery-header-row nav.terngallery-header-nav, .terngallery-header-row .terngallery-header-events a { position: relative; top: 1px; } /* The dot: 6px, about 4px from the word. The extra class in front lets this win over the desktop dot rule further down this file. */ .terngallery-header-row .terngallery-header-events a::before { width: 0.5em; height: 0.5em; margin-right: 0.33em; vertical-align: calc(0.5cap - 0.25em); } } /* -------------------------------------------------------------------------- Commas between the menu items: "Exhibitions, Artists, News, About". The commas are added by CSS rather than typed into the menu labels, so the last item never has a trailing comma, and reordering or adding items in the Site Editor keeps the punctuation correct with no thought required. -------------------------------------------------------------------------- */ .terngallery-header-nav .wp-block-navigation-item:not(:last-child)::after { content: ","; } /* -------------------------------------------------------------------------- The pulsing dot before "Events". An opacity heartbeat. Note the colour slug is "custom-poppy-orage" — the "n" is missing in the name saved in the Site Editor, so it has to be spelled that way here too. Size and gap are the Figma file's, as proportions of the type: an 8px dot and about 5.5px of space beside 14px text. Centred on the capital E rather than on the small letters. "middle" is the browser's own centring, but it means the middle of a lowercase "x", which reads as sitting low next to a capital. `cap` is the height of a capital in the font actually loaded, so the dot's centre lands at half of it whatever the size. Browsers that don't know `cap` use the line above. -------------------------------------------------------------------------- */ .terngallery-header-events a::before { content: ""; display: inline-block; width: 0.57em; height: 0.57em; margin-right: 0.4em; vertical-align: 0.1em; vertical-align: calc(0.5cap - 0.285em); border-radius: 50%; background: var(--wp--preset--color--custom-poppy-orage, #c24a12); animation: terngallery-pulse 1.8s ease-in-out infinite; } @keyframes terngallery-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } /* Some people find moving or flashing elements genuinely uncomfortable — motion can trigger nausea or migraine — and their operating system lets them ask for less of it. Honouring that is standard practice: they get a steady dot instead of a pulsing one, and lose nothing else. */ @media (prefers-reduced-motion: reduce) { .terngallery-header-events a::before { animation: none; opacity: 1; } } /* ========================================================================== PAGE LAYOUT HELPERS ========================================================================== */ /* -------------------------------------------------------------------------- An intentionally empty column, used to hold the second slot of the 25/25/50 grid open so the following column starts halfway across. On phones the columns stack, at which point an empty one contributes nothing but an unexplained gap — so it is removed there. -------------------------------------------------------------------------- */ @media (max-width: 781px) { .wp-block-column.terngallery-spacer-column { display: none; } } /* ========================================================================== THE PINNED HERO The sequence: 1. The photograph fills the screen under the header. Nothing else. 2. Scrolling brings the block underneath it up over the photograph in white type, which comes to rest below the header and stays there. 3. The off-white page rises from the bottom and passes through that type, turning it black as it goes — mid-line, not all at once. 4. Everything below follows up behind it and the page carries on normally. WHAT IS IN THE PAGE, AND WHAT IS NOT In the page: the hero, then the block to animate, side by side at the top level. Nothing nested, no classes but the hero's own. Made by the plugin at render time (see includes/hero.php): a second copy of that block, and the three boxes named below. Only the hero's class appears in the editor — everything else here is scaffolding you will not find there. HOW THE FLIP WORKS Two copies of the block sit in the same place on screen: a white one over the photograph, and a black one on the off-white panel. The panel starts below the bottom of the screen and is pushed up by scrolling. It is opaque, so it covers the white copy as it rises; its own copy is clipped to its top edge, so the black only shows where the panel has already arrived. The join between them is that edge. THE CURTAIN The panel is only as tall as the block inside it, which on its own would let the photograph reappear underneath as it leaves. So the panel hangs an off-white curtain below itself — painted, not laid out, so it takes up no space. Everything after the panel then sits directly underneath and floats on top of the curtain, gaps and all. No JavaScript drives any of this. Every position comes from how far the page has been scrolled. TUNING Only the first two variables are choices. The rest are worked out from them and from the header's height, and changing one by hand puts the parts out of step with each other. ========================================================================== */ body { /* Where the type comes to rest, measured down from under the header. */ --terngallery-hero-pin: 7rem; /* How far the type rides up over the photograph before any scrolling at all. 0 means the first screen is the photograph alone. */ --terngallery-hero-overlap: 0px; /* -- derived from here down -- */ /* The visible area below the header: what the photograph fills. */ --terngallery-hero-stage: calc(100lvh - var(--terngallery-header-top) - var(--terngallery-header-height)); /* The resting place, as a position on the screen rather than below the header. Both copies use it, which is why they line up. */ --terngallery-hero-rest: calc(var(--terngallery-header-top) + var(--terngallery-hero-pin)); /* How far the black copy may be lifted above the panel it lives in, so it is already in position before the panel's edge reaches it. Any value comfortably over half a screen does. */ --terngallery-hero-reach: 50vh; /* How far the panel is pulled back up the page. This is the distance that makes its edge reach the resting line while the photograph is still held still — any less and the photograph starts sliding away mid-sweep. */ --terngallery-hero-lift: calc(100lvh - var(--terngallery-hero-rest)); /* How long the photograph is held, and the white copy with it. This is the length that makes the panel arrive at the bottom of the screen at the same moment the type finishes settling — the two are meant to coincide. */ --terngallery-hero-hold: calc(var(--terngallery-hero-lift) + 100vh - var(--terngallery-hero-rest)); } @media (max-width: 781px) { body { /* The type is proportionally larger and the screen much shorter, so the same resting place would push the block off the bottom. */ --terngallery-hero-pin: 3rem; } } /* -------------------------------------------------------------------------- The hero, and the photograph inside it. "sticky" means: sit in the page normally, but never scroll above this line — until the hero ends, at which point let go and scroll away like anything else. That is what makes it look fixed without it actually being fixed. So the hero's own height is how long the photograph is held for. That height only applies when there is something to animate. A hero with nothing after it is left as an ordinary screen-high image, which is the sensible thing for it to be. lvh is "large viewport height": the whole screen on a phone, ignoring the browser's address bar, so there is no seam when the bar hides. -------------------------------------------------------------------------- */ .terngallery-hero { position: relative; } .terngallery-hero:has(+ .terngallery-hero__ghost) { min-height: calc(var(--terngallery-hero-stage) + var(--terngallery-hero-hold)); } .wp-block-image.terngallery-hero__image { position: sticky; top: calc(var(--terngallery-header-top) + var(--terngallery-header-height)); z-index: 0; width: 100%; height: var(--terngallery-hero-stage); margin: 0; overflow: hidden; } /* The Image block's own styles say a picture keeps its natural proportions. Here it has to fill a screen-sized box instead, so this rule has to outrank them — hence naming both classes rather than just ours. object-fit: cover is "fill the box, crop whatever doesn't fit", the same as a background image. */ .wp-block-image.terngallery-hero__image img { display: block; width: 100%; height: 100%; object-fit: cover; } /* -------------------------------------------------------------------------- The white copy. Its top margin cancels the hero's held height, putting it back level with the bottom of the photograph; its own height is then the runway the type inside has to stay put on. The colour is forced onto everything inside because this copy is decorative — whatever colours the blocks carry from the editor, here they all have to read as white against a photograph. -------------------------------------------------------------------------- */ .terngallery-hero__ghost { position: relative; z-index: 1; margin-top: calc(-1 * var(--terngallery-hero-hold) - var(--terngallery-hero-overlap)); min-height: var(--terngallery-hero-hold); /* The box is a screen and a half of empty space over the photograph. It should not be catching clicks — only the type inside it should, and that is switched back on below. */ pointer-events: none; } /* -------------------------------------------------------------------------- Which copy the mouse reaches. Whichever copy you can see is the one you can select and click, and no arrangement of layers decides that — clip-path does, because a clipped-away area cannot be clicked either. While the panel's edge is still below the type, the black copy is clipped away there, so the pointer falls straight through to the white copy beneath it. Once the edge has passed, the black copy is no longer clipped at that point and, being the later of the two, takes the click itself. So the switch happens exactly at the join, for free, and the text never feels dead under the cursor. -------------------------------------------------------------------------- */ .terngallery-hero__ghost > .terngallery-hero__panel-pin { pointer-events: auto; } .terngallery-hero__ghost, .terngallery-hero__ghost * { color: #fff; } .terngallery-hero__ghost > .terngallery-hero__panel-pin { position: sticky; top: var(--terngallery-hero-rest); } /* -------------------------------------------------------------------------- The off-white panel, and the curtain hanging below it. The panel is exactly as tall as the block inside it — no more — so whatever comes next on the page sits straight underneath with its normal spacing. The curtain is what stops the photograph showing through there: it is drawn below the panel but takes up no space, so it costs nothing in the layout. z-index: -1 puts it behind the panel's own contents while keeping it in front of the photograph, which sits at 0. -------------------------------------------------------------------------- */ .terngallery-hero__panel { position: relative; z-index: 1; margin-top: calc(-1 * var(--terngallery-hero-lift)); background: var(--wp--preset--color--custom-off-white, #fffbf8); color: var(--wp--preset--color--custom-black, #000); } .terngallery-hero__panel::before { content: ""; position: absolute; top: 100%; left: 0; right: 0; /* Exactly as far as the photograph can still reach below the panel, and no further. The panel's bottom edge and the photograph's are at most this far apart — the lift is the whole distance the panel was pulled up by, so a curtain that long covers the gap even if the block inside had no height at all. Making it longer "to be safe" is what hid the footer. */ height: calc(var(--terngallery-hero-lift) + var(--terngallery-hero-overlap)); z-index: -1; background: var(--wp--preset--color--custom-off-white, #fffbf8); pointer-events: none; } /* Everything after the panel floats on the curtain rather than under it. The gaps between those blocks stay transparent, which is the point — the curtain shows through them, so there are no seams. */ .terngallery-hero__panel ~ * { position: relative; z-index: 2; } /* The footer needs the same lift, and the rule above cannot reach it: it is not a neighbour of the panel but a neighbour of the whole page content, one level further out. Without this the curtain paints straight over it and the footer silently disappears — which is exactly what happened. */ .wp-site-blocks:has(.terngallery-hero__panel) > footer { position: relative; z-index: 2; } /* -------------------------------------------------------------------------- The holder around each copy, and why it exists. The black copy has to do two things in turn: - while the panel's edge is still below the resting line, hold at that line so it lines up with the white copy behind it; - once the edge has passed above the line, travel with the panel, so the block underneath keeps its place and does not run into the back of it. A sticky box does exactly that, provided it is told how far it may move. The negative margin is how far it may rise; the invisible block added after it is the same height, which leaves the holder exactly as tall as the copy — and that is what stops the copy from ever being carried below the panel's own top edge. Both are the same variable. Changing one without the other breaks the alignment. clip-path means "paint nothing outside this box". Since the holder's top edge is the panel's top edge, that is what stops the black copy showing above the join. -------------------------------------------------------------------------- */ .terngallery-hero__panel > .terngallery-hero__panel-pin { display: flow-root; -webkit-clip-path: inset(0); clip-path: inset(0); } /* Three classes rather than one, deliberately. WordPress sets "no top margin" on the first item inside any block, in a rule carrying as much weight as a single-class one of ours and read later — so a simpler selector quietly loses, and the two copies end up a hundred-odd pixels apart. */ .terngallery-hero__panel > .terngallery-hero__panel-pin > * { position: sticky; top: var(--terngallery-hero-rest); margin-top: calc(-1 * var(--terngallery-hero-reach)); } .terngallery-hero__panel > .terngallery-hero__panel-pin::after { content: ""; display: block; height: var(--terngallery-hero-reach); } /* -------------------------------------------------------------------------- Giving the holders a width to work with. The holders are made by the plugin rather than placed in the editor, so WordPress does not know they are there and does not lay them out. Left alone they would be given the narrow "content" width and the blocks inside them would be narrower still. These rules hand their contents the same widths and the same distance in from the edge of the screen that they would have had sitting directly in the page — whether they are set to default, wide or full width. Every value is one of WordPress's own variables, so changing a width in the Site Editor still reaches here. -------------------------------------------------------------------------- */ .terngallery-hero__panel-pin { box-sizing: border-box; padding-left: var(--wp--style--root--padding-left); padding-right: var(--wp--style--root--padding-right); } .terngallery-hero__panel-pin > * { max-width: var(--wp--style--global--content-size); margin-left: auto; margin-right: auto; } .terngallery-hero__panel-pin > .alignwide { max-width: var(--wp--style--global--wide-size); } .terngallery-hero__panel-pin > .alignfull { max-width: none; margin-left: calc(-1 * var(--wp--style--root--padding-left)); margin-right: calc(-1 * var(--wp--style--root--padding-right)); } /* -------------------------------------------------------------------------- Letting the hero reach the top of the screen. The page template leaves generous space above the content — right for an ordinary page, wrong for a photograph meant to fill the screen. :has() reads "a
that contains a hero", so this only affects pages that actually have one; every other page keeps its spacing. !important is needed because the template sets those two values as inline styles, and an inline style beats an ordinary rule however it is written. The page's own title is removed separately, with the Hide title switch in the sidebar when editing the page. -------------------------------------------------------------------------- */ main:has(.terngallery-hero) { margin-top: 0 !important; } main:has(.terngallery-hero) > * { padding-top: 0 !important; } /* -------------------------------------------------------------------------- Some people find scroll-driven movement genuinely uncomfortable, and their operating system lets them ask for less of it. For them the hero becomes the plain design: photograph, then the blocks once, in black on off-white. The white copy is removed from the page entirely. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .terngallery-hero:has(+ .terngallery-hero__ghost) { min-height: 0; } .wp-block-image.terngallery-hero__image { position: static; height: auto; } .wp-block-image.terngallery-hero__image img { height: auto; } .terngallery-hero__ghost { display: none; } .terngallery-hero__panel { margin-top: 0; } .terngallery-hero__panel::before { display: none; } .terngallery-hero__panel > .terngallery-hero__panel-pin { clip-path: none; } .terngallery-hero__panel > .terngallery-hero__panel-pin > * { position: static; margin-top: 0; } .terngallery-hero__panel > .terngallery-hero__panel-pin::after { display: none; } } /* ========================================================================== INTRO SPLASH Wordmark and tagline over soft sand, once per browsing session. The motion is deliberately almost nothing: the splash is simply there from the first frame, holds, and dissolves to reveal the homepage underneath. Only opacity ever changes — nothing slides, scales, blurs or wipes. Like light changing in a gallery, not an animation. --------------------------------------------------------------------------- TUNING The fade, the skip fade and the easing are variables below. The hold before the fade is in assets/custom.js (SPLASH_HOLD), because it also waits for the homepage to finish loading, and only a script can know when that is. --------------------------------------------------------------------------- ========================================================================== */ :root { /* The dissolve. Slow enough to read as a change of light rather than a cut; much slower and it starts to feel like waiting. Lengthened from 1000ms on 2026-09-30, which felt a little quick. */ --terngallery-splash-fade: 1400ms; /* When a visitor clicks, scrolls or presses a key. A little quicker — they have told us they want the page — but still a dissolve, because an abrupt disappearance reads as a fault. */ --terngallery-splash-skip-fade: 800ms; /* An even pace from start to finish, as on flussbad.com, whose images fade in with exactly this. A curve that eases in and out spends most of its change in the middle, which on a full-screen fade reads as a sudden drop; an even one reads as light slowly changing. The earlier value was cubic-bezier(0.4, 0, 0.2, 1), if a softer start is ever wanted. */ --terngallery-splash-ease: linear; /* The safety net. If the script never runs, the splash dissolves on its own after this long, so nobody can ever be stuck behind it. */ --terngallery-splash-safety-delay: 8000ms; } /* Hidden by default. It is revealed only by the script in the page head, which runs before the first paint — so the splash is there from the very first frame, and no JavaScript equals no splash rather than a splash with no way to dismiss itself. Do not invert this. */ .terngallery-splash { display: none; } .terngallery-splash-active .terngallery-splash { /* Tells the browser in advance that this will fade, so it prepares it as its own layer and the fade is drawn smoothly from the first frame, instead of being set up at the moment it starts. Flussbad does the same. */ will-change: opacity; display: flex; align-items: center; justify-content: center; /* "fixed" floats it above the page instead of taking up room in it, so the homepage is fully laid out underneath from the start, and removing the splash moves nothing. */ position: fixed; inset: 0; z-index: 9999; /* Starts below the WordPress admin bar when someone is logged in, so the pair is centred in the space that can actually be seen. Zero for visitors. The variable is set with the header, higher up this file. */ top: var(--terngallery-header-top, 0px); /* Both colours are set by the client in TERN Settings, which prints them as these two variables in the page head. The fallbacks keep the splash looking right if that ever fails to print. */ background: var(--terngallery-splash-bg, var(--wp--preset--color--custom-soft-sand, #e3c6a4)); color: var(--terngallery-splash-fg, var(--wp--preset--color--custom-black, #000)); /* The safety net described above. "both" holds the splash fully visible during the delay, then holds it invisible and unclickable at the end. Normally the script starts the real dissolve long before this. */ animation: terngallery-splash-safety var(--terngallery-splash-fade) var(--terngallery-splash-ease) var(--terngallery-splash-safety-delay) both; } /* The script adds this once the hold is over and the homepage has loaded. */ .terngallery-splash-leaving .terngallery-splash { animation: terngallery-splash-leave var(--terngallery-splash-fade) var(--terngallery-splash-ease) both; } .terngallery-splash-skip .terngallery-splash { animation: terngallery-splash-skip var(--terngallery-splash-skip-fade) var(--terngallery-splash-ease) both; } /* * Three identical fades under three different names — and the names matter. * When one fade replaces another under the SAME name, the browser does not * start it afresh: it keeps the old one's clock running. The real fade would * then begin already "1.8 seconds in", treat its 1 second as over, and cut * straight to the end — a jump instead of a dissolve. A new name always * starts from the beginning. * * visibility:hidden at the end also stops the panel intercepting clicks. */ @keyframes terngallery-splash-safety { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } } @keyframes terngallery-splash-leave { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } } @keyframes terngallery-splash-skip { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } } /* Logo and tagline side by side, the pair centred on screen. Every size is the Figma "2 Intro" frame's: an 88px logo, a 72px gap, and the tagline in the "Desktop Heading 2" style — ABC Otto Light, 23px on a 33px line. The logo is centred on the tagline's capital letters, the optical way to pair a wordmark with a line of text. Measured in the browser, the middle of the 33px line falls exactly on the middle of the capitals (0.06px apart), so "align-items: center" does it — provided the line height stays 33/23. Change that ratio and the logo drifts off the capitals. (In the Figma file itself the logo sits about 1.3px high; this corrects that.) */ .terngallery-splash__inner { display: flex; align-items: center; gap: 72px; padding-inline: 1.5rem; } .terngallery-splash__mark { flex: none; width: 88px; height: auto; } .terngallery-splash__tagline { margin: 0; font-family: var(--wp--preset--font-family--abc-otto), serif; /* Figma's 23px, which is the Site Editor's "x-large" size. */ font-size: var(--wp--preset--font-size--x-large, 1.43rem); font-weight: 300; /* Figma's 33px line, written as a ratio so it stays right at any size. */ line-height: calc(33 / 23); letter-spacing: 0; } /* Phones: stack the logo above the tagline, both centred. */ @media (max-width: 781px) { .terngallery-splash__inner { flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; } .terngallery-splash__tagline { font-size: var(--wp--preset--font-size--large, 1.125rem); } } /* Reduced motion: the splash still shows briefly (the hold is shortened in the script), then cuts straight to the page with no fade. */ @media (prefers-reduced-motion: reduce) { :root { --terngallery-splash-fade: 1ms; --terngallery-splash-skip-fade: 1ms; } } /* ========================================================================== ARTIST PAGE ========================================================================== */ /* -------------------------------------------------------------------------- HERO CAROUSEL Deliberately NOT a slider plugin and NOT JavaScript. The block itself uses WordPress's native flex layout — which also means the editor shows it as a row rather than a vertical stack — and CSS adds only the horizontal scrolling and the snap points. Why that beats a slider library here: - nothing to load, update, or have break in two years - real momentum scrolling on phones and trackpads, for free - it degrades to a plain scrolling row if anything fails - keyboard and screen-reader behaviour is the browser's, not ours -------------------------------------------------------------------------- */ .wp-block-group.terngallery-carousel { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; align-items: flex-start; } .wp-block-group.terngallery-carousel > figure.wp-block-image { flex: 0 0 auto; margin: 0; scroll-snap-align: start; /* * A percentage of the container, not of the viewport — and the container is * the page's content box, because the block is aligned "wide". So the * arithmetic is done by the browser against a width that is correct by * construction, and about two and a half images are visible at every * window size. * * Two earlier attempts got this wrong and are worth remembering. A fixed * 560px cap meant three images fitted inside a wide window, so nothing * overflowed and the design's bleed never happened. Replacing that with a * padding calculated from a percentage put the first image 50px out of line * with every other element on the page, because percentage padding resolves * against the containing block rather than the element itself. Sizing the * items rather than insetting the container avoids both traps. */ width: max(240px, 37%); } .wp-block-group.terngallery-carousel > figure.wp-block-image img { width: 100%; height: auto; } /* -------------------------------------------------------------------------- WORKS INDEX Now a plain Group block using WordPress's own grid layout, so there is deliberately almost no CSS here. The previous version was a Gallery block forced into a grid by CSS. That fought the block on two fronts: Gallery's own layout rules had to be overridden, and its markup never validated in the editor. WordPress's grid layout gives equal columns, natural image heights and top alignment natively — and the column count is editable in the editor's own controls instead of being fixed in this file. -------------------------------------------------------------------------- */ .wp-block-group.terngallery-works-index > figure.wp-block-image { margin: 0; } .wp-block-group.terngallery-works-index > figure.wp-block-image img { width: 100%; height: auto; } /* Captions sit under their own image, left aligned rather than centred. */ .wp-block-group.terngallery-works-index figcaption { text-align: left; } /* -------------------------------------------------------------------------- Exhibition and fair listings. A Table block with its borders removed. A table is the honest markup here — this is tabular data, a year paired with an event — and it means rows can be added in the editor without touching code. -------------------------------------------------------------------------- */ .wp-block-table.terngallery-listing table, .wp-block-table.terngallery-listing td, .wp-block-table.terngallery-listing th { border: 0; } .wp-block-table.terngallery-listing td { padding: 0 0 0.35em; vertical-align: top; } /* The year column: narrow, and never wrapping onto two lines. */ .wp-block-table.terngallery-listing td:first-child { width: 5.5em; white-space: nowrap; } /* -------------------------------------------------------------------------- Download links, with a chevron. Each download is a core **File block**, so the client attaches the PDF in the Media Library like any other file. That block has no typography controls in the editor and core shrinks it to 0.8em, so the type has to be set here to match the exhibition listings beside it. The chevron is drawn in CSS rather than typed, so adding a download in the editor cannot forget it and the markers stay identical. It is two borders on a rotated box rather than a "⌄" character, because ABC Otto has no glyph at that code point and the browser would substitute a different font for it. The List-block markup is styled alongside, so a page built the older way keeps working. -------------------------------------------------------------------------- */ .terngallery-downloads .wp-block-list, .terngallery-downloads ul { list-style: none; margin: 0; padding: 0; } /* * One row per download: a File block wrapper, or a list item. * * No rule under a row. The only hairline in this column is the one under the * "Downloads" heading, which is a Separator block in the content. */ .terngallery-downloads .wp-block-file, .terngallery-downloads li { margin: 0 0 0.9em; padding: 0; border: 0; font-family: var(--wp--preset--font-family--abc-otto), serif; font-size: 0.85rem; font-weight: 300; line-height: 1.6; } /* * The label left, the chevron right. * * Three selectors for the same row because the markup differs by context: * * - front end: the link is a direct child of .wp-block-file. Only the first * one, so the pill "Show download button" adds is left alone. * - editor: the File block wraps the link in .wp-block-file__content-wrapper. * The row is that wrapper, not the link — the link there is a contenteditable * rich text field, and leaving it alone keeps typing in it well behaved. * - the older List-block markup. */ .terngallery-downloads .wp-block-file > a:first-child, .terngallery-downloads .wp-block-file__content-wrapper, .terngallery-downloads li > a { display: flex; justify-content: space-between; align-items: center; gap: 1em; color: inherit; } /* * No underline on a download, anywhere. This is broader than the rule above on * purpose: the editor canvas underlines a File block's link where the front end * does not, and the two have to look the same. */ .terngallery-downloads a { text-decoration: none; border-bottom: 0; } .terngallery-downloads .wp-block-file > a:first-child::after, .terngallery-downloads .wp-block-file__content-wrapper::after, .terngallery-downloads li > a::after { content: ""; flex: none; width: 0.4em; height: 0.4em; margin-top: -0.2em; /* the rotated box sits low without this */ border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); opacity: 0.6; } /* ========================================================================== EVENTS OVERLAY The panel's colour, padding and grid are NOT here — they are set on a Group block inside the Events page content, so the client edits the design in the editor and the standalone page and the overlay cannot drift apart. What is here is only what turns a into a full-screen panel, the transition, and the two controls the page content has no way to style. ========================================================================== */ dialog.terngallery-events { /* A is a centred box with a border and a width by default. */ width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: hidden; } /* * The dialog itself does not scroll — this element inside it does. * * That matters for alignment. A scrollbar on the dialog narrows its content box * by around 15px, which pulls everything inside half that distance out of line * with the rest of the site. Scrolling one level in leaves the dialog's box at * the full viewport width, so the content lines up exactly. */ .terngallery-events__scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; } /* * The panel has to fill the viewport even when its content is shorter, or the * page behind shows through below it — which is what happens by default, since * a Group block is only as tall as its contents. * * position: relative anchors the Back control, which is taken out of the flow * so that it sits on the panel rather than in a transparent strip above it. */ .terngallery-events__content { position: relative; display: flex; flex-direction: column; min-height: 100%; } /* * In the overlay the panel becomes a column so that the gap between the * featured event and the listing can absorb whatever height is left over, * putting the Upcoming row at the foot of the screen as the design shows. * * Scoped to the overlay on purpose. On the standalone page the panel sits in * normal flow between the site header and footer, where stretching it to the * viewport would be wrong. */ .terngallery-events__content > .terngallery-events-panel { flex: 1 1 auto; display: flex; flex-direction: column; } .terngallery-events__content .terngallery-events-gap { flex: 1 1 auto; height: auto; min-height: var(--wp--preset--spacing--80, 70px); } /* * Every direct child needs an explicit width in this flex column. * * A wide-aligned block carries margin-inline: auto, and auto margins on a flex * item cancel align-items: stretch — so each child falls back to sizing itself * from its own contents. The separator, having no contents, collapsed to zero * width and the rule above Upcoming vanished while still being present in the * markup. The Upcoming row shrank for the same reason, starting 165px inside * everything else; the featured row escaped only because its image is wide * enough to reach the max-width anyway. * * width: 100% restores the stretch. max-width and the auto margins then * constrain and centre each child exactly as they do outside the overlay. */ .terngallery-events__content .terngallery-events-panel > * { width: 100%; } /* -------------------------------------------------------------------------- The Back control. Rendered by the plugin rather than placed in the page content, so it cannot be deleted by accident while editing — the overlay would then have no visible way to close, which is the one failure that traps someone. Aligned to the same width as the page content below it, so it sits on the same right-hand edge as everything else rather than floating near the corner. -------------------------------------------------------------------------- */ .terngallery-events__bar { position: absolute; inset-inline: 0; top: 0; z-index: 1; display: flex; justify-content: flex-end; /* * content-box is declared explicitly, and it is load-bearing. * * With it, this element's *content box* works out at exactly * (container - wide-size) / 2 from each edge — the same position as any * wide-aligned block — whatever the padding happens to be. Under * border-box the padding eats into the max-width instead and the Back * control ends up 50px inside everything else. * * The padding is the theme's page margin itself (root padding), so the two * also agree on narrow screens where max-width no longer binds, including * the narrower phone margin set under "Phone side margins". */ box-sizing: content-box; max-width: var(--wp--style--global--wide-size, 1340px); margin-inline: auto; padding-block: var(--wp--preset--spacing--30, 20px); padding-inline: var(--wp--style--root--padding-left, var(--wp--preset--spacing--50, 50px)) var(--wp--style--root--padding-right, var(--wp--preset--spacing--50, 50px)); } .terngallery-events__close { padding: 0; border: 0; background: transparent; /* * Set explicitly rather than inherited. This control sits outside the * coloured panel in the markup, so "inherit" reaches past it to the page * underneath and picks up that page's dark text — which is nearly * invisible on the orange. */ color: var(--wp--preset--color--custom-off-white, #fffbf8); font-family: var(--wp--preset--font-family--abc-otto), serif; font-size: 0.95rem; font-weight: 300; line-height: 1; cursor: pointer; } .terngallery-events__close:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } /* * Back sits exactly where Events was, so the panel can be opened and closed * without moving the pointer. * * The script measures the Events link as the overlay opens and writes its box * into the five custom properties below. Measuring rather than hard-coding a * position is what makes it exact: the header moves when the admin bar is * showing, and on phones Events is not pinned to the right at all. * * Back is given the whole of that box, text set to its right-hand end, which * is where the word "Events" ends. The rules above remain as the fallback if * nothing was measured. */ .terngallery-events.is-anchored .terngallery-events__bar { padding: 0; max-width: none; } .terngallery-events.is-anchored .terngallery-events__close { position: absolute; left: var(--terngallery-events-back-left); top: var(--terngallery-events-back-top); width: var(--terngallery-events-back-width); height: var(--terngallery-events-back-height); display: flex; align-items: center; justify-content: flex-end; font-size: var(--terngallery-events-back-font-size); } /* The panel receives focus when the overlay opens, which would otherwise draw a focus ring around the whole thing. */ .terngallery-events__content:focus { outline: 0; } /* * The rule above Upcoming: the one line on the site that isn't black, because * it sits on saturated orange. Full-strength Off White, at the site-wide 0.5px * weight (set at the top of this file). It was 50% opacity until 2026-09-29. */ .terngallery-events-panel .wp-block-separator.terngallery-hairline { border-top-color: var(--wp--preset--color--custom-off-white, #fffbf8); } /* -------------------------------------------------------------------------- The transition: the panel slides in from the right. From the right because that is where the Events button is, so the panel arrives from the side that was clicked, and leaves the same way. Two layers move differently. The orange panel (the dialog itself) slides; the blurred page behind it (::backdrop, a separate layer the browser draws underneath, see below) does not move but fades, in step with the slide. If the blur simply switched on and off, it would jump at the start and end. What keeps it smooth: - Only `transform` (the slide) and `opacity` (the fade) are animated. The browser can hand both to the graphics card and move a finished picture, rather than laying out the page again on every frame, which is what makes animations judder. - The blur's strength is never animated, only its opacity. Animating a blur radius means redrawing the blur every frame, which stutters. - The curve starts briskly and settles gently, the way a drawer glides to a stop. The same 500ms and the same curve are used for opening and closing. -------------------------------------------------------------------------- */ @keyframes terngallery-events-slide-in { from { transform: translateX(100%); } to { transform: none; } } @keyframes terngallery-events-slide-out { from { transform: none; } to { transform: translateX(100%); } } @keyframes terngallery-events-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes terngallery-events-fade-out { from { opacity: 1; } to { opacity: 0; } } /* 500ms and cubic-bezier(0.32, 0.72, 0, 1) are written out four times rather than kept in one variable: older browsers don't pass variables through to ::backdrop, and the blur would then lose its fade. Change all four together. */ dialog.terngallery-events[open] { animation: terngallery-events-slide-in 500ms cubic-bezier(0.32, 0.72, 0, 1) both; } dialog.terngallery-events[open]::backdrop { animation: terngallery-events-fade-in 500ms cubic-bezier(0.32, 0.72, 0, 1) both; } dialog.terngallery-events[open].is-closing { animation: terngallery-events-slide-out 500ms cubic-bezier(0.32, 0.72, 0, 1) both; } dialog.terngallery-events[open].is-closing::backdrop { animation: terngallery-events-fade-out 500ms cubic-bezier(0.32, 0.72, 0, 1) both; } /* * Some people find movement across the screen genuinely uncomfortable, and * their operating system lets them ask for less of it. They get a plain fade * of the panel instead of the slide; the blur fades as for everyone else. */ @media (prefers-reduced-motion: reduce) { dialog.terngallery-events[open] { animation: terngallery-events-fade-in 300ms ease-out both; } dialog.terngallery-events[open].is-closing { animation: terngallery-events-fade-out 300ms ease-out both; } dialog.terngallery-events[open]::backdrop, dialog.terngallery-events[open].is-closing::backdrop { animation-duration: 300ms; animation-timing-function: ease-out; } } /* * The page behind is blurred rather than darkened. * * At 80% opacity the orange alone leaves the page underneath legible — its * headings and paragraphs read straight through and collide with the overlay's * own text. Blurring turns it into a soft wash: you can still tell something is * behind, which is the point of a translucent overlay, but nothing competes. * * This has to live on ::backdrop, not on the panel. A modal sits in * the top layer, which starts a new backdrop root — so backdrop-filter on * anything *inside* the dialog cannot reach the page below it and silently does * nothing. ::backdrop is the one layer between the page and the dialog. * * No colour here on purpose: darkening what shows through only muddies the * orange. Browsers without backdrop-filter get the 80% orange alone. */ dialog.terngallery-events[open]::backdrop { background: transparent; backdrop-filter: blur(50px) saturate(115%); -webkit-backdrop-filter: blur(50px) saturate(115%); } /* -------------------------------------------------------------------------- RSVP, and the overlay on a phone. RSVP follows the Figma button (2026-10-06): 138 x 23, a 0.5px Off White line at 70%, 12px italic. Its block has a 1px white border, 48px padding and the Small size typed in; those are inline styles, and WordPress's size class carries !important, so these need it too. -------------------------------------------------------------------------- */ .terngallery-events-panel .wp-block-button__link { box-sizing: border-box; min-width: 138px; padding: 6px 23px !important; border-width: 0.5px !important; border-color: rgb(255 251 248 / 70%) !important; color: var(--wp--preset--color--custom-off-white, #fffbf8) !important; font-size: 0.75rem !important; line-height: 10px !important; text-align: center; } /* * An upcoming event's date and time: two paragraphs in a Stack group * (terngallery-event-when), one above the other with no gap, as the single * paragraph with a line break was until 2026-10-06. Set here because the * overlay is drawn after WordPress has printed the layout styles for the * page, so the Stack's own vertical layout never reaches it. Phones turn it * into a row below. */ .terngallery-events-panel .wp-block-group.terngallery-event-when { flex-direction: column; align-items: flex-start; gap: 0; } /* * Phones: the mobile Events frame in Figma (943:2713, the overlay 4010:744). * Measured from the top of the overlay: NEXT WEEK 43px down, 7px to the * dates, 12px to the title, 13px to the guest and to the text; RSVP 30px * under the text, the image 29px under that, 140px wide against the right * margin; the line 39px under the image, UPCOMING 21px under the line, 9px to * the first date, 8px to each title (23/33), 40px between events. * * Many of these sizes are typed into the Events page's blocks as inline * styles, so they need !important here; the whole block is phone-only and * scoped to the panel. The gap that stretches above UPCOMING on a wide screen * stays as it is there (Karla, 2026-10-05); phones get Figma's 39px. * * Back stays pinned in the corner while the overlay scrolls, so it can always * be reached (2026-10-06). */ @media (max-width: 781px) { dialog.terngallery-events.is-anchored .terngallery-events__close { position: fixed; font-style: italic; } .terngallery-events-panel { padding-top: 43px !important; } .terngallery-events-panel h6 { font-size: 0.6875rem; line-height: 15px; } .terngallery-events-panel > .wp-block-columns:first-of-type { row-gap: 7px; } .terngallery-events-panel > .wp-block-columns:first-of-type > .wp-block-column + .wp-block-column + .wp-block-column { margin-top: 22px; } .terngallery-events-panel > .wp-block-columns:first-of-type h1 { margin-block-start: 12px; } .terngallery-events-panel > .wp-block-columns:first-of-type h3 { margin-block-start: 13px; } .terngallery-events-panel > .wp-block-columns:first-of-type .wp-block-spacer { display: none; } .terngallery-events-panel > .wp-block-columns:first-of-type h3 + * + p, .terngallery-events-panel > .wp-block-columns:first-of-type h3 + p { margin-block-start: 13px; padding-right: 0 !important; } .terngallery-events-panel .wp-block-image.is-resized { margin-right: 0 !important; margin-left: auto !important; width: 140px; } .terngallery-events-panel .wp-block-image.is-resized img { width: 140px !important; } .terngallery-events__content .terngallery-events-gap, .terngallery-events-panel .terngallery-events-gap { display: none; } .terngallery-events-panel .wp-block-separator.terngallery-hairline { margin-top: 39px !important; margin-bottom: 21px !important; } .terngallery-events-panel > .wp-block-columns:last-of-type { row-gap: 0; margin-top: 0; } .terngallery-events-panel > .wp-block-columns:last-of-type > .wp-block-column:first-child { padding-bottom: 9px; } .terngallery-events-panel > .wp-block-columns:last-of-type > .wp-block-column + .wp-block-column + .wp-block-column { margin-top: 40px; } .terngallery-events-panel .terngallery-event-link { margin-top: 8px !important; font-size: 23px !important; line-height: 33px !important; } /* Each upcoming event's date and time on one line, 20px apart. They are two paragraphs in a Stack group (terngallery-event-when), stacked on a wide screen; this turns the stack into a row, which wraps if a long date ever leaves no room. */ .terngallery-events-panel .wp-block-group.terngallery-event-when { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 20px; } } /* -------------------------------------------------------------------------- Upcoming events, as links. -------------------------------------------------------------------------- */ .terngallery-event-link a { position: relative; color: inherit; text-decoration: none; } /* ========================================================================== NEWS ========================================================================== */ /* -------------------------------------------------------------------------- Two columns that flow independently. Not a grid, and the design is explicit about why: the right column's second item begins before the left column's first has finished. Two columns whose items overlap vertically like that can only happen if each column flows on its own — a row-based grid would align them and leave a gap under whichever item is shorter. CSS multi-column does exactly that, with no JavaScript and no library. The trade-off is reading order: items fill the left column top to bottom, then the right — the way a magazine page reads, rather than left-right in pairs. -------------------------------------------------------------------------- */ .terngallery-news .wp-block-post-template { columns: 2; /* 120px between columns, 520px each inside the 1160px container — the proportions in the design file. */ column-gap: 120px; } .terngallery-news .wp-block-post-template > li { /* Keep an article whole instead of letting it split across the column break, which is what multi-column would otherwise do to it. */ break-inside: avoid; margin-block-end: var(--wp--preset--spacing--80, 140px); /* The edges the title's link is stretched to — see below. */ position: relative; } /* -------------------------------------------------------------------------- The whole card is clickable. The title's link is stretched over the entire card with an invisible layer, so a click anywhere on it opens the article. It is the usual way to do this: a link cannot simply be wrapped around the card, because the Post Template has no setting for it and the blocks inside already carry links of their own. The image and "Read more" still link to the same article, for keyboard and screen-reader users; they just sit under the layer. Anything that must stay separately clickable would need to be lifted above it — which is why the category is plain text (includes/news-link.php). -------------------------------------------------------------------------- */ .terngallery-news .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; } /* -------------------------------------------------------------------------- The two image shapes. This is what creates the staggered effect. The tall shape is exactly twice the height of the short one — 5:3 against 5:6 — so the offset between the two columns is a regular interval rather than an arbitrary one. Alternating by position rather than per post: there is one Post Template for every article, so a block setting could only ever apply the same shape to all of them. If a per-article choice is wanted instead, that needs a field on the post. -------------------------------------------------------------------------- */ .terngallery-news .wp-block-post-featured-image { margin: 0; } .terngallery-news .wp-block-post-featured-image img { width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; } /* The pattern repeats every three articles: one short, then two tall. So the 1st, 4th, 7th … are short, and every other article keeps the tall shape. */ .terngallery-news .wp-block-post-template > li:nth-child(3n+1) .wp-block-post-featured-image img { aspect-ratio: 5 / 3; } /* -------------------------------------------------------------------------- Item details. -------------------------------------------------------------------------- */ /* The category and the date sit on one line, pushed to opposite ends. */ .terngallery-news__meta a { text-decoration: none; color: inherit; } .terngallery-news .wp-block-post-title a { text-decoration: none; color: inherit; } /* "Read more" sits on its own line in italic, as in the design. It is a Read More block rather than the excerpt's own "Read more" text, because only the block has an "Open in new tab" setting — and each item points to an article elsewhere. */ .terngallery-news .wp-block-read-more { margin-top: 1.2em; font-style: italic; text-decoration: none; color: inherit; } /* One column on narrow screens: two 520px columns cannot survive a phone, and the staggered effect has nothing to stagger against with a single column. */ @media (max-width: 781px) { .terngallery-news .wp-block-post-template { columns: 1; } /* The first item 16px under the header, as on the other phone pages, rather than the 30px typed into the page's group. */ .wp-block-group.terngallery-news { padding-top: 16px !important; } /* The mobile News frame (Figma 4067:2811) reorders each item: category, then the date under it, the title, the image, the text and "Read more". The blocks stay in their wide-screen order; only phones re-sequence them. 60px between items. */ .terngallery-news .wp-block-post-template > li { display: flex; flex-direction: column; align-items: flex-start; margin-block-end: 60px; } .terngallery-news .wp-block-post-template > li > * { max-width: 100%; } .terngallery-news .terngallery-news__meta { order: 1; } .terngallery-news .wp-block-post-title { order: 2; } .terngallery-news .wp-block-post-featured-image { order: 3; } .terngallery-news .wp-block-post-excerpt { order: 4; } .terngallery-news .wp-block-read-more { order: 5; } /* Category over the date, both at the left. The sizes are typed into the blocks, so these need !important, as in the footer and the overlay. */ .terngallery-news .terngallery-news__meta { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 0 !important; } .terngallery-news .terngallery-news__meta .wp-block-post-terms { font-size: 0.6875rem !important; line-height: 15px !important; } /* The date in Caption, 10/14, as in the frame. */ .terngallery-news .terngallery-news__meta .wp-block-post-date { font-family: var(--wp--preset--font-family--abc-otto), serif !important; font-size: 0.625rem !important; line-height: 14px !important; letter-spacing: 0 !important; } /* Title at Heading 2's mobile 18/24, 7px under the date. */ .terngallery-news .wp-block-post-title { margin-top: 7px !important; margin-bottom: 0 !important; font-size: 1.125rem !important; line-height: 24px !important; } /* The image 9px under the title, 196px tall at its own proportions, as the frame draws a wide and a narrow one at the same height; a very wide image is cropped to the screen's width rather than squashed. */ .terngallery-news .wp-block-post-featured-image { margin-top: 9px; } .terngallery-news .wp-block-post-template > li .wp-block-post-featured-image img { width: auto; max-width: 100%; height: 196px; aspect-ratio: auto; object-fit: cover; } /* The text 20px under the image, at Text 12/16, full width; "Read more" one blank line (16px) under it. */ /* The blank line before "Read more" is this text's bottom margin: Read More's own margins are taken by its larger tap area (TAP AREAS ON PHONES), and in this column margins add up rather than overlap. */ .terngallery-news .wp-block-post-excerpt { width: 100%; margin-top: 20px; margin-bottom: 16px; font-size: 0.75rem !important; line-height: 16px !important; } .terngallery-news .wp-block-post-excerpt__excerpt { margin: 0; } .terngallery-news .wp-block-read-more { font-size: 0.75rem !important; line-height: 16px !important; } } /* ========================================================================== SINGLE ARTWORK ========================================================================== */ /* -------------------------------------------------------------------------- The hero image fills its column. Without this it renders at its own natural width, which for the current files is well under the column — the layout looks correct but the artwork sits small inside it. Filling the column matches the design, at the cost of upscaling anything smaller: the artwork files want to be at least twice the column's width to stay sharp on a high-resolution screen. -------------------------------------------------------------------------- */ .terngallery-artwork-hero img { width: 100%; height: auto; } /* ========================================================================== ARTIST NAME LISTS Applies to anything carrying .terngallery-name-list — currently the Query Loop's Post Template on the Artists page and the home page, and the "Projects with" paragraph of spans. Layout only. Type stays with the blocks, so changing a size in the editor still works rather than being silently overridden from here. ========================================================================== */ .terngallery-name-list { display: flex; flex-wrap: wrap; justify-content: center; /* A wide gap between names, while an ordinary word space still separates the words inside one ("Melissa Alcena" holds together; the gap to the next name is far wider). A single space character cannot do both, which is why this is flex rather than centred text. 54px, the spacing in the design file, expressed in rem rather than em. The Query Loop sets its font size on the title inside each item, not on the list, so an em here would resolve against the list's own inherited size — about 14px — and give a fifth of the intended gap. */ column-gap: 3.375rem; row-gap: 0; } /* The Query Loop wraps each post in an
  • , and renders the title as its own paragraph — both arrive with margins that would break the row. */ .terngallery-name-list > li, .terngallery-name-list .wp-block-post-title { margin: 0; } .terngallery-name-list a, .terngallery-name-list span { color: inherit; text-decoration: none; } /* Phones: one name per line, centred, as in the mobile Artists and Home frames in Figma (4032:1809, 928:1157). A wrapping row would pair short names up on one line. */ @media (max-width: 781px) { .terngallery-name-list { flex-direction: column; align-items: center; text-align: center; } /* The titles carry 5px of padding above and below, typed into the block, which spaces the names 40px apart instead of the design's 30. The editor writes it onto the element itself, and only !important outweighs that; it applies on phones only, so the block's setting still governs desktop. */ .terngallery-name-list .wp-block-post-title { padding-block: 0 !important; } /* "Projects with" is one paragraph, its size typed into the block. The editor has no separate phone size, so the mobile Heading 1 size (24/30) is set on the names inside it instead, which outweighs the paragraph's own size without !important. */ .terngallery-name-list > span { font-size: var(--wp--preset--font-size--xx-large); line-height: 1.25; } } /* The small-capital labels over the lists on the Artists page, carrying terngallery-artists-label (Advanced → Additional CSS class). Their size, line height and the gap under them were typed into the block until 2026-10-06; they live here so a phone can follow Figma 4032:1809. ARTISTS is in the phone frame only, so it also carries terngallery-phone-only and is hidden on wide screens, where the desktop frame (769:266) labels only PROJECTS WITH. */ @media (min-width: 782px) { p.terngallery-artists-label { margin-bottom: 32px; font-size: 0.75rem; line-height: 1.6; } .terngallery-phone-only { display: none; } /* With the label hidden, the list is first again and keeps no gap. */ .terngallery-phone-only + .wp-block-query { margin-block-start: 0; } } /* Phones: Tagline 11/15, the first name 20px under the label; ARTISTS 64px under the header (5px above where the page's padding would put it). */ @media (max-width: 781px) { p.terngallery-artists-label { margin-bottom: 20px; font-size: 0.6875rem; line-height: 1.364; } p.terngallery-artists-label.terngallery-phone-only { margin-top: -5px; } } /* -------------------------------------------------------------------------- THE HOVER PREVIEW Hovering a name reveals that artist's work, following the cursor. There is exactly ONE preview element on the page, created by the script and appended to the body. The first version gave every artist their own positioned image and let :hover fade them in and out — which meant that crossing a row of tightly packed names left images continuously overlapping each other's fades, so something was always on screen and it was impossible to tell which name it belonged to. One element, whose source is swapped, fixes that: only one image can ever be visible, and it can be taken away cleanly between artists. The timing is what creates the separation. Leaving a name hides the image quickly; arriving at one waits before showing it. The wait is longer than the hide, so the image is always fully gone before the next appears, and brushing past a name on the way somewhere else never triggers it at all. -------------------------------------------------------------------------- */ /* * The per-artist Image blocks are the source of the images — the client swaps * them in the editor like any other image — but they are never displayed on the * front end. display:none also means the browser only downloads the one image * being hovered, rather than all seventeen on page load. */ .terngallery-artist__preview, .terngallery-preview-source { display: none; } /* * In the editor they must be visible and selectable, or there would be no way * to change an artist's image. Kept small so a column of seventeen remains * workable. */ .editor-styles-wrapper .terngallery-artist__preview, .block-editor-iframe__body .terngallery-artist__preview, .editor-styles-wrapper .terngallery-preview-source, .block-editor-iframe__body .terngallery-preview-source { display: block; max-width: 90px; } .terngallery-preview { position: fixed; top: 0; left: 0; z-index: 60; margin: 0; /* Never intercept the pointer: the name underneath has to stay clickable while its own preview is on screen. */ pointer-events: none; opacity: 0; /* The script writes the cursor position into these two properties. */ transform: translate3d( var(--terngallery-preview-x, 0px), var(--terngallery-preview-y, 0px), 0 ); /* Leaving is quicker than arriving, which is what makes the gap between one artist and the next legible rather than a continuous smear. */ transition: opacity 100ms ease; } /* * The Exhibitions index's preview, which is a different object from the * artists' card and measured from its own frame. * * 451 of the design's 1440 across, at the image's own proportions. The 2:3 crop * above is right for the artist lists — it makes seventeen photographs of * different shapes read as one set — and wrong here, where an installation * shot squeezed into a tall portrait loses the room, which is the subject. * * The floor and ceiling on the width are mine. The frame is drawn at one * window size and says nothing about the others. */ .terngallery-preview.is-anchored img { width: clamp(260px, 31.3vw, 520px); aspect-ratio: auto; height: auto; } .terngallery-preview.is-visible { opacity: 1; transition: opacity 180ms ease-out; } .terngallery-preview img { display: block; width: clamp(160px, 13.5vw, 220px); height: auto; /* The design's preview is a 2:3 portrait. Cropping to it means every artist's image reads the same regardless of the shape they supply. */ aspect-ratio: 2 / 3; object-fit: cover; } @media (prefers-reduced-motion: reduce) { .terngallery-preview, .terngallery-preview.is-visible { transition: none; } } /* ========================================================================== EXHIBITIONS INDEX The Exhibitions page's chronological list: a year in the left gutter, the exhibition title beside it, one row per show. A Query Loop, not a hand-typed table. The artist pages list an artist's own shows in a Table block (.terngallery-listing above) and that stays right there — a CV is a handful of lines. This list is the gallery's whole history and grows on its own, so it is generated from the Exhibitions post type the same way the Artists page is generated from the artist posts. Layout only. The type is set on the Post Date and Post Title blocks in the editor, so a size can still be changed visually rather than being overridden from here. ========================================================================== */ .terngallery-exhibition-index { list-style: none; margin: 0; padding: 0; } /* * Each row is a two-column grid rather than a flex row, so every title starts * at the same left edge whether its year is printed or not — which is what * makes the gutter read as a column once the repeated years are hidden. * * 6.5rem is the 103px gap between the year and the title in the design file. */ .terngallery-exhibition-index > li { display: grid; grid-template-columns: 6.5rem 1fr; align-items: baseline; margin: 0; /* * Only as wide as the year and the title, rather than the full width of * the list. * * A list item is a block, so it spanned the whole 1340px whatever its * title's length — leaving upwards of a thousand pixels of empty row to * the right of a short name that still counted as hovering it. Images * appeared out in the margin, belonging to nothing the pointer was near. * max-content ends the row where its text does. */ width: max-content; max-width: 100%; } /* Both blocks arrive with margins of their own that would break the rhythm — the row spacing is the title's line height and nothing else. */ .terngallery-exhibition-index .wp-block-post-date, .terngallery-exhibition-index .wp-block-post-title { margin: 0; } /* The title is a link to the exhibition, but it is set as plain text: this is an index, and eight underlines down the page would be louder than the type. */ .terngallery-exhibition-index .wp-block-post-title a { color: inherit; text-decoration: none; } /* * A year identical to the row above, marked by includes/exhibitions.php. * * opacity rather than display:none or visibility:hidden — all three take it off * the page, but only this one leaves it readable by a screen reader, so the * gutter looks the way it was designed while every exhibition still announces * the year it belongs to. The cost is that selecting the list with the mouse * copies the invisible years too. */ .terngallery-exhibition-index .wp-block-post-date.is-repeated-year { opacity: 0; } /* Every year at 12px (client feedback, 2026-10-05), as on the artist pages. The Post Date block carries a typed 0.7rem, so the size goes on the year inside it — the same way round as the phone sizes below, which still win on a phone because they come later. */ .terngallery-exhibition-index .wp-block-post-date time { font-size: 0.75rem; } /* On a phone, as in the mobile Exhibitions frame in Figma (4066:2288): a 61px year column, titles at Text Large (14/20) and years at Tagline (11/15), so every row is 20px. The sizes typed into the Post Title and Post Date blocks sit on the blocks themselves, and the editor has no separate phone size. So the phone sizes go on the link and the year inside them, made blocks of their own, which outweighs the typed size without !important. As blocks, they also stop the outer element's larger line height from padding each row out. */ @media (max-width: 781px) { .terngallery-exhibition-index > li { grid-template-columns: 3.8125rem 1fr; } .terngallery-exhibition-index .wp-block-post-title a, .terngallery-exhibition-index .wp-block-post-date time { display: block; } .terngallery-exhibition-index .wp-block-post-title a { font-size: 0.875rem; line-height: 1.429; /* 20px */ } .terngallery-exhibition-index .wp-block-post-date time { font-size: var(--wp--preset--font-size--custom-1); line-height: 1.364; /* 15px */ } } /* -------------------------------------------------------------------------- THE ON VIEW IMAGE ROW Measured from the design file at full size, not estimated: three images all 466px tall in a 1440px frame, 20px apart, at widths of 723, 359 and a third cut off by the edge of the page. The row begins at the content's left margin and runs off the right of the window. So the images are sized BY HEIGHT, each keeping its own proportions. That is the opposite of .terngallery-carousel above, which fixes each item's WIDTH and lets the heights fall where they may. With pictures that all share one aspect ratio the two rules look identical; the moment a portrait sits next to a landscape, only sizing by height gives the design's even baseline, and the width-based rule gives a ragged one. .terngallery-carousel is deliberately left alone. It drives the artist pages, which are built and working, and which have not been measured against their own frame. If they turn out to want this behaviour too, the two rules should become one. -------------------------------------------------------------------------- */ .wp-block-group.terngallery-filmstrip { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; align-items: flex-start; /* * The block is aligned "full", so it spans the window. Putting the content * column's own left margin back lines the first image up with the ON VIEW * label above it, while nothing on the right stops the last one running * off the edge — which is the whole effect. * * The margin is worked out rather than named, because the label's position * is not one number. Below about 1440px the page margin decides it; above * that, the content stops growing at its wide size and centres, so the * margin is half of what is left over. max() picks whichever is in force. * * Two variables that look right and are not: * --wp--style--root-padding-left is only emitted by themes using * root-padding-aware alignments; measuring the live page showed it is not * defined here at all, so the padding silently came out as zero and the * first image sat flush against the window. * The spacing preset alone is the page margin, which is correct at 1440 * and too small at every width above it. */ padding-left: max( var(--wp--style--root--padding-left, var(--wp--preset--spacing--50)), (100vw - var(--wp--style--global--wide-size)) / 2 ); padding-right: 0; /* * Snapping has to be told about that padding or it undoes it. Each image * snaps its own left edge to the container's origin, so without this the * browser scrolls the row by exactly the padding the moment it settles — * measured on the live page as scrollLeft locking itself to 50px, putting * the first image flush against the window again and refusing to be moved * back. scroll-padding shifts the snap line to where the padding ends. */ scroll-padding-left: max( var(--wp--style--root--padding-left, var(--wp--preset--spacing--50)), (100vw - var(--wp--style--global--wide-size)) / 2 ); } .wp-block-group.terngallery-filmstrip > figure.wp-block-image { flex: 0 0 auto; margin: 0; scroll-snap-align: start; /* * 466 of the design's 1440, expressed against the window so it scales. * The floor and ceiling are mine, not the design's — the frame is drawn at * one width only, and without them the row would be thumbnail-sized on a * phone and enormous on a wide monitor. */ height: clamp(200px, 32.4vw, 520px); width: auto; } /* * The image fills the height and takes whatever width that implies. * * max-width has to be released explicitly: WordPress caps every image at 100% * of its container, and here the container has no width of its own to be 100% * of — it is the image that decides. Leaving the cap in place collapses the * whole row. */ .wp-block-group.terngallery-filmstrip > figure.wp-block-image img { display: block; height: 100%; width: auto; max-width: none; } /* -------------------------------------------------------------------------- THE EXHIBITIONS PAGE: ON VIEW AND PAST EXHIBITIONS The two groups on the Exhibitions page carry the classes terngallery-on-view and terngallery-past-exhibitions (Advanced → Additional CSS class in the editor). The gaps between their blocks used to be typed into the blocks, which the editor applies at every screen size; they live here instead so that a phone can have the mobile frame's tighter spacing (Figma 4066:2288). The desktop values are the ones that were typed in, unchanged. The text sizes are the site's own presets, so they follow the Site Editor. -------------------------------------------------------------------------- */ .terngallery-on-view__dates { margin-bottom: 0.4rem; } .terngallery-on-view h1 { margin-top: 0; margin-bottom: var(--wp--preset--spacing--30); } .terngallery-on-view h3 { margin-bottom: var(--wp--preset--spacing--50); } /* 30px from the line under PAST EXHIBITIONS to the list on wide screens. It was typed into the line's group on 2026-10-05, which reached phones too; it lives here since 2026-10-06. Phones set their own 10px below. */ @media (min-width: 782px) { .terngallery-past-exhibitions h4 + .wp-block-group { margin-bottom: 1.875rem; } } @media (max-width: 781px) { /* 16px under the header. The page template puts 60px there on every ordinary page (a 30px margin and 30px of padding), and the mobile frames differ page to page — About and Artists keep roughly that — so this one section is drawn up by the difference rather than the template changed. The selectors name the block type as well as the class so that they outweigh WordPress's own spacing between blocks, which otherwise wins by loading later. */ .wp-block-group.terngallery-on-view { margin-block-start: -2.75rem; } /* The label and the column beside it stack on a phone: 7px apart. */ .terngallery-on-view .wp-block-columns { row-gap: 0.4375rem; } /* 12px, 13px and 13px between date, title, names and text. The top margin of the next block is cleared, or the larger of the two would win. */ .terngallery-on-view__dates { margin-bottom: 0.75rem; } .terngallery-on-view h1 { margin-bottom: 0.8125rem; } .terngallery-on-view h3 { margin-top: 0; margin-bottom: 0.8125rem; } .terngallery-on-view h3 + p { margin-top: 0; } /* 41px from the text to the image row. The Spacer between them sets the wide-screen distance and is skipped here. */ .wp-block-group.terngallery-on-view + .wp-block-spacer { display: none; } .wp-block-group.terngallery-filmstrip { margin-block-start: 2.5625rem; } /* PAST EXHIBITIONS 79px under the image row (the group's own padding gives 49), its line 5px under it, the list 10px under the line. The Spacer's 30px is not part of the phone design. */ .terngallery-past-exhibitions > h4.wp-block-heading { margin-block-start: 1.875rem; } .terngallery-past-exhibitions h4 + .wp-block-group { margin-top: 0.3125rem; } .terngallery-past-exhibitions .wp-block-spacer { display: none; } .terngallery-past-exhibitions .wp-block-query { margin-top: 0.625rem; } } /* -------------------------------------------------------------------------- THE ABOUT PAGE The same arrangement as the Exhibitions page above: the page's three sections carry the classes terngallery-about-intro, -team and -consultancy, the bios terngallery-about-bio, and the spacing and line heights that used to be typed into the blocks live here, so a phone can follow the mobile About frame in Figma (4067:2628). The desktop values are the ones that were typed in, unchanged. -------------------------------------------------------------------------- */ .wp-block-group.terngallery-about-intro { padding-bottom: clamp(70px, 8.82vw, 127px); } .terngallery-about-intro p { line-height: 1.44; } .terngallery-about-team .wp-block-group + .wp-block-group { margin-block-start: 52px; } .terngallery-about-team p.terngallery-about-bio { margin-block-start: 15px; } .terngallery-about-consultancy h1 { line-height: 1.389; } /* Wide screens: the values that were typed into the team section's blocks until 2026-10-06, unchanged. Moved here so phones can follow Figma. The 16px size is the fluid size WordPress made of the typed 1rem. */ @media (min-width: 782px) { .terngallery-about-team .wp-block-separator.terngallery-hairline { margin-top: 7px; } .terngallery-about-team ul.wp-block-list { margin-top: 10px; padding-left: 15px; font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.156), 1rem); line-height: 1.375; } .terngallery-about-team figure.wp-block-gallery { margin-top: 15px; } .terngallery-about-team figure.wp-block-gallery + .wp-block-group { margin-top: 31px; } .terngallery-about-team .wp-block-group > h2.wp-block-heading { font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.156), 1rem); } .terngallery-about-team p.terngallery-about-bio, .terngallery-about-team p.terngallery-about-bio + p { line-height: 1.365; } .terngallery-about-team p.terngallery-about-bio + p { margin-top: 19px; } } @media (max-width: 781px) { /* The intro at Heading 2's mobile 18/24, one blank line (24px) between its paragraphs, and 60px down to the image. */ .terngallery-about-intro p { line-height: 1.333; } .wp-block-group.terngallery-about-intro > p + p { margin-block-start: 1.5rem; } .wp-block-group.terngallery-about-intro { padding-bottom: 3.75rem; } .terngallery-about-intro + .wp-block-group { margin-block-start: 0; } /* The intro 66px under the header, not 60, and the image under it 316px wide and centred, 30px in from each side. */ .wp-block-group.terngallery-about-intro { margin-block-start: 0.375rem; } .terngallery-about-intro + .wp-block-group > .wp-block-gallery { max-width: 316px; margin-inline: auto; } /* The line under SERVICES is 200px long; the one under MEET THE TEAM keeps the full width. */ .terngallery-about-team .wp-block-column:first-child > hr { width: 200px; /* WordPress centres every separator; this one starts at the left, under its label (fixed 2026-10-15). */ margin-left: 0; margin-right: auto; } /* Each label's line 5px under its text; the Services list 30px and the team photo 41px under the label's top; the first member 29px under the photo. The list at Text Large 14/20, its bullets hanging in the margin as in the frame. */ .terngallery-about-team .wp-block-separator.terngallery-hairline { margin-top: 5px; } .terngallery-about-team ul.wp-block-list { margin-top: 9px; padding-left: 10px; font-size: 0.875rem; line-height: 1.4286; } .terngallery-about-team figure.wp-block-gallery { margin-top: 20px; } .terngallery-about-team figure.wp-block-gallery + .wp-block-group { margin-top: 29px; } /* Names at Text Large 14/20, bios and emails at Text 12/16, one blank line (16px) before the email. */ .terngallery-about-team .wp-block-group > h2.wp-block-heading { font-size: 0.875rem; line-height: 1.4286; } .terngallery-about-team p.terngallery-about-bio, .terngallery-about-team p.terngallery-about-bio + p { line-height: 1.333; } .terngallery-about-team p.terngallery-about-bio + p { margin-top: 1rem; } /* 60px from the image to SERVICES. The fixed 105px Spacer before the section is the desktop gap, so it stands down on a phone. */ .wp-block-spacer:has(+ .terngallery-about-team) { display: none; } .wp-block-group.terngallery-about-team { margin-block-start: 3.75rem; } /* The labels at Tagline's 11/15, and 50px from the Services list down to MEET THE TEAM once the columns stack. */ .terngallery-about-team h6 { line-height: 1.364; } .terngallery-about-team .wp-block-columns { row-gap: 3.125rem; } /* Each member: the role directly under the name, the bio 10px under the role, 40px between members. */ .terngallery-about-team .wp-block-group > h6 { margin-block-start: 0; } .terngallery-about-team p.terngallery-about-bio { margin-block-start: 0.625rem; } .terngallery-about-team .wp-block-group + .wp-block-group { margin-block-start: 2.5rem; } /* Consultancy: 70px under the last member (the label's own 14px makes 84), the heading 7px under its label, at Heading 1's mobile 24/30. The fixed 92px Spacer before it stands down, as above. */ .wp-block-spacer:has(+ .terngallery-about-consultancy) { display: none; } .wp-block-group.terngallery-about-consultancy { margin-block-start: 4.375rem; } .terngallery-about-consultancy .wp-block-columns { row-gap: 0.4375rem; } .terngallery-about-consultancy h1 { line-height: 1.25; } } /* Phones: the mobile Exhibitions frame's row, 187px tall at its 376px width (so 49.7% of the screen's width) with 13px between the images. The 200px floor above was a guess made before there was a phone design. */ @media (max-width: 781px) { .wp-block-group.terngallery-filmstrip { gap: 0.8125rem; } .wp-block-group.terngallery-filmstrip > figure.wp-block-image { height: 49.7vw; } } /* -------------------------------------------------------------------------- THE HOME PAGE The three sections under the pinned hero carry terngallery-home-on-view (the animated block), terngallery-home-fair (the line, the upcoming fair and the text under it) and terngallery-home-artists. Their padding and the line's margins were typed into the blocks until 2026-10-06; they live here so a phone can follow the mobile Home frame in Figma (928:1157). The wide-screen values are the typed ones, unchanged. -------------------------------------------------------------------------- */ @media (min-width: 782px) { .wp-block-group.terngallery-home-on-view { padding-block: var(--wp--preset--spacing--50); } .wp-block-group.terngallery-home-fair { padding-top: var(--wp--preset--spacing--30); padding-bottom: var(--wp--preset--spacing--80); } .terngallery-home-fair > hr.wp-block-separator { margin-block: var(--wp--preset--spacing--40); } .wp-block-group.terngallery-home-artists { padding-block: var(--wp--preset--spacing--80); } } @media (max-width: 781px) { /* On view: its label, then 7px to the dates; 10px to the title, 13px to the names. Nothing under the names, so the line follows 39px below them (the 19px between blocks plus the next section's 20px). */ .wp-block-group.terngallery-home-on-view { padding-top: var(--wp--preset--spacing--50); padding-bottom: 0; } .terngallery-home-on-view .wp-block-columns, .terngallery-home-fair .wp-block-columns { row-gap: 0.4375rem; } .terngallery-home-on-view .wp-block-column > h1 { margin-block-start: 0.625rem; } .terngallery-home-on-view .wp-block-column > h3 { margin-block-start: 0.8125rem; } /* The fair: the line, UPCOMING ART FAIR 16px under it, 8px to the dates, 12px to the title, 14px to the names, 13px to the text, then 84px down to ARTISTS (this padding, the 19px between blocks and 65px above the label). */ .wp-block-group.terngallery-home-fair { padding-top: 20px; padding-bottom: 0; } .terngallery-home-fair > hr.wp-block-separator { margin-block: 0; } .terngallery-home-fair > .wp-block-columns { margin-block-start: 1rem; row-gap: 0.5rem; } .terngallery-home-fair .wp-block-column > h1 { margin-block-start: 0.75rem; } .terngallery-home-fair .wp-block-column > h3 { margin-block-start: 0.875rem; } .terngallery-home-fair .wp-block-column > h2 { margin-block-start: 0.8125rem; } .wp-block-group.terngallery-home-artists { padding-top: 65px; padding-bottom: var(--wp--preset--spacing--80); } } /* -------------------------------------------------------------------------- TAP AREAS ON PHONES The small links and buttons get an invisible, taller tap area: about 44px, the usual minimum for a fingertip, or less where a neighbouring link is closer than that. Nothing moves and nothing looks different (2026-10-06). An inline link takes vertical padding without changing the line it sits on. A block, inline-block or flex one takes the same padding and an equal negative margin, which cancel out. The bordered buttons cannot take padding without the border growing, so they get a transparent layer instead. Lists of names and titles are left alone: their lines are 20-30px apart, so a bigger area would steal taps from the next line. -------------------------------------------------------------------------- */ @media (max-width: 781px) { /* Inline links: 15px text, 14px above and below. */ .terngallery-header-events a, .terngallery-footer-social a, .terngallery-about-team a, .terngallery-exhibition__more a, .terngallery-artist__jump a, .terngallery-artwork__back a { padding-block: 14px; } .terngallery-hero__panel-pin a { padding-block: 7px; } /* The header: logo and menu items fill the 43px bar. */ .terngallery-header-row .custom-logo-link { padding-block: 15px; margin-block: -15px; } .terngallery-header-nav .wp-block-navigation-item__content { padding-block: 14px; margin-block: -14px; } /* The newsletter field grows upwards only, keeping its line where it is; the arrow beside it grows on every side. */ .terngallery-newsletter__input { padding-top: 13px; margin-top: -13px; } .terngallery-newsletter__submit { box-sizing: content-box; padding: 14px 12px 14px 14px; margin: -14px -12px -14px -14px; } /* News. */ .terngallery-news .wp-block-read-more { padding-block: 12px; margin-block: -12px; } .terngallery-news .wp-block-post-title a { padding-block: 11px; margin-block: -11px; } /* Bordered buttons (Inquire): 23px tall, a transparent layer 10px above and below makes 43. */ .wp-block-button__link, .terngallery-artwork__inquire { position: relative; } .wp-block-button__link::after, .terngallery-artwork__inquire::after { content: ""; position: absolute; inset: -10px 0; } } /* ========================================================================== INTERACTIVE STATES Anything clickable goes italic while the pointer is on it and while it is being pressed, and a navigation item stays italic for the page you are currently on. ========================================================================== */ /* * Every link and button, site-wide. * * :focus-visible is included so the same signal reaches keyboard users. It is * deliberately not plain :focus, which would also fire on mouse clicks and * leave the italic stuck on after clicking. */ a:hover, a:active, a:focus-visible, button:hover, button:active, button:focus-visible, .wp-block-button__link:hover, .wp-block-button__link:active, .wp-block-button__link:focus-visible { font-style: italic; } /* * Buttons invert on hover: the outline fills in with the button's own colour, * and the lettering takes the colour of whatever the button sits on, as if cut * out of the fill. On the orange Events panel that is an off-white button with * orange lettering; on an off-white page, a black button with off-white * lettering. * * One rule for every Button block on the site, plus the artwork page's * Inquire, which the plugin draws itself. A new button picks it up with no * setting to remember. Keyboard focus gets the same look as the pointer. * * How it works, since none of it is obvious: * * - The fill is a shadow drawn inwards, not a background colour. Button * blocks save their background colour on the button itself (these ones say * "transparent"), and that would win over anything written here. * - The fill uses currentColor, the button's text colour. The lettering is * then recoloured with -webkit-text-fill-color rather than `color`, so * currentColor, and therefore the fill, stays what it was. Despite the * prefix it works in every current browser. * - "Whatever the button sits on" comes from --terngallery-surface, which is * set by the background colour classes below. A true hole through to the * blurred page is not possible in CSS, but the 80% orange lettering over the * fill mixes to the same colour as the panel around it, so it reads as one. */ :root { --terngallery-surface: var(--wp--preset--color--custom-off-white, #fffbf8); } /* One line per palette colour. A group given one of these as its background passes it down to any button inside. A new colour added to the palette in the Site Editor needs a line here too, or buttons on it fall back to off-white lettering. */ .has-custom-off-white-background-color { --terngallery-surface: var(--wp--preset--color--custom-off-white); } .has-custom-black-background-color { --terngallery-surface: var(--wp--preset--color--custom-black); } .has-custom-black-70-background-color { --terngallery-surface: var(--wp--preset--color--custom-black-70); } .has-custom-soft-sand-background-color { --terngallery-surface: var(--wp--preset--color--custom-soft-sand); } .has-custom-poppy-orage-background-color { --terngallery-surface: var(--wp--preset--color--custom-poppy-orage); } .has-custom-poppy-orange-80-background-color { --terngallery-surface: var(--wp--preset--color--custom-poppy-orange-80); } /* * Outline buttons have no fill, on every page. * * WordPress already says this, but with exactly the same priority as the * Global Styles rule that gives every button a black fill, so whichever loads * last wins. And the order changes from page to page: where the page's own * content has a Button block (the About page's Enquire), WordPress loads its * button styles early and the black wins; elsewhere they load at the end and * the outline wins. That is what turned RSVP black in the Events overlay on * the About page only. * * This says the same thing a little more firmly, so the order stops mattering. * A fill chosen on a button in the editor still wins, which is what * :not(.has-background) is for. */ .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) { background-color: transparent; background-image: none; } .wp-block-button__link, .terngallery-artwork__inquire { transition: box-shadow 200ms ease-out, border-color 200ms ease-out, -webkit-text-fill-color 200ms ease-out; } .wp-block-button__link:hover, .wp-block-button__link:focus-visible, .terngallery-artwork__inquire:hover, .terngallery-artwork__inquire:focus-visible { box-shadow: inset 0 0 0 100vmax currentColor; border-color: currentColor; -webkit-text-fill-color: var(--terngallery-surface); } @media (prefers-reduced-motion: reduce) { .wp-block-button__link, .terngallery-artwork__inquire { transition: none; } } /* * Keeping links still while they turn italic. * * The script wraps each link's text in .terngallery-steady and draws an * invisible italic copy of it exactly on top (see "Links that keep their * width" in custom.js). Both sit in the same grid cell, so the wrapper is * always as wide as the wider of the two and the link's neighbours never move. * * For that to hold, the text itself never actually turns italic — if it did, * both versions would be italic and the link would shrink to that width. * Instead, going italic means swapping which of the two is visible. */ .terngallery-steady { display: inline-grid; } .terngallery-steady > .terngallery-steady__text, .terngallery-steady::after { grid-area: 1 / 1; } /* Beats the site-wide italic rule above, which the text would otherwise inherit from the link. */ .terngallery-steady > .terngallery-steady__text { font-style: normal; } /* The link around them stays upright too. Suisse's italic file reserves different space above and below its letters than the upright one, so a Suisse link turning italic made its whole line about 1px taller and pushed everything beneath it down. The italic copy still shows on hover; only the line keeps the upright measurements. */ a:is(:hover, :active, :focus-visible):has(> .terngallery-steady) { font-style: normal; } .terngallery-steady::after { content: attr(data-italic); /* The same again, marked as decoration so screen readers don't read the name twice. Browsers that don't understand this line use the one above. */ content: attr(data-italic) / ""; font-style: italic; visibility: hidden; pointer-events: none; } /* The italic moments — the same list as the site-wide rule above. */ a:is(:hover, :active, :focus-visible) > .terngallery-steady > .terngallery-steady__text { visibility: hidden; } a:is(:hover, :active, :focus-visible) > .terngallery-steady::after { visibility: visible; } /* The current page in the navigation is italic all the time, so there is no change to hold still for. Its text is simply italic, which keeps the word its natural italic width — reserving the upright width would leave a gap before the comma. */ .current-menu-item > a > .terngallery-steady > .terngallery-steady__text, .current-menu-ancestor > a > .terngallery-steady > .terngallery-steady__text, .current_page_item > a > .terngallery-steady > .terngallery-steady__text { font-style: italic; visibility: visible; /* stays showing on hover too */ } .current-menu-item > a > .terngallery-steady::after, .current-menu-ancestor > a > .terngallery-steady::after, .current_page_item > a > .terngallery-steady::after { display: none; } /* * Lists with a hover preview image — the artist lists — work differently. * The image fades in, so the name fades too: the upright name fades out as * its italic copy fades in, on the image's own timing (180ms in, 100ms out, * matching .terngallery-preview). The script starts all three together by * adding is-previewing to the name (see "Hover previews" in custom.js). * * The swap above is switched off here: both versions stay visible and only * their opacity changes. */ .terngallery-has-preview a:hover, .terngallery-has-preview a:active, .terngallery-has-preview a:focus-visible { font-style: normal; } .terngallery-has-preview a > .terngallery-steady > .terngallery-steady__text { visibility: visible; transition: opacity 100ms ease; } .terngallery-has-preview a > .terngallery-steady::after { visibility: visible; opacity: 0; transition: opacity 100ms ease; } .terngallery-has-preview .is-previewing a > .terngallery-steady > .terngallery-steady__text { opacity: 0; transition: opacity 180ms ease-out; } .terngallery-has-preview .is-previewing a > .terngallery-steady::after { opacity: 1; transition: opacity 180ms ease-out; } /* A name the script couldn't prepare still turns italic, just without the fade. */ .terngallery-has-preview .is-previewing a:not(:has(> .terngallery-steady)) { font-style: italic; } @media (prefers-reduced-motion: reduce) { .terngallery-has-preview a > .terngallery-steady > .terngallery-steady__text, .terngallery-has-preview a > .terngallery-steady::after { transition: none; } } /* * No outline around focused links. * * The theme draws a 2px black box around anything in focus, and because its * rule uses plain :focus it also appears after a mouse click. The italic above * already shows keyboard users where they are, so the box is removed. */ a:focus, a:focus-visible { outline: none; } /* * Links that stay upright (client feedback, 2026-10-01). * * These links do not go italic on hover, press or keyboard focus: * * - the footer's contact details and social links; * - the article titles on the News page; * - the downloads on exhibition and artist pages, which stay regular. * - artwork titles under their images — exhibition, artwork and artist * pages (client feedback, BugHerd, 2026-10-05). * * Most links are prepared by the "keep their width" script, so the swap to * the italic copy is switched off as well as the italic itself. (The script * skips exhibition downloads, so for them only the first rule matters.) A * link added to one of these places later stays upright with no setting to * remember. * * Keyboard users still need to see where they are, and the outline is removed * above, so a focused link here gets a thin underline instead — as do the * always-italic email addresses below, for the same reason. A mouse click * does not trigger it; only the Tab key does. */ :is(footer, .terngallery-news .wp-block-post-title, .terngallery-downloads, .terngallery-artist__downloads, .terngallery-works__caption, .terngallery-artist__caption) a:is(:hover, :active, :focus-visible) { font-style: normal; } :is(footer, .terngallery-news .wp-block-post-title, .terngallery-artist__downloads, .terngallery-works__caption, .terngallery-artist__caption) a:is(:hover, :active, :focus-visible) > .terngallery-steady > .terngallery-steady__text { visibility: visible; } :is(footer, .terngallery-news .wp-block-post-title, .terngallery-artist__downloads, .terngallery-works__caption, .terngallery-artist__caption) a:is(:hover, :active, :focus-visible) > .terngallery-steady::after { visibility: hidden; } /* * Email addresses in page content are italic all the time (client feedback, * 2026-10-01) — today that is the team's addresses on the About page. Like the * current page in the navigation, they are simply italic, so there is no swap * on hover. The footer's address sits outside
    and stays upright. */ main a[href^="mailto:"], main a[href^="mailto:"] > .terngallery-steady > .terngallery-steady__text { font-style: italic; visibility: visible; } main a[href^="mailto:"] > .terngallery-steady::after { display: none; } :is(footer, .terngallery-news .wp-block-post-title, .terngallery-downloads, .terngallery-artist__downloads, .terngallery-works__caption, .terngallery-artist__caption) a:focus-visible, main a[href^="mailto:"]:focus-visible { text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 0.2em; } /* * The current page stays italic in the navigation. WordPress marks the item * with current-menu-item; the ancestor class covers a child page keeping its * parent marked. */ .wp-block-navigation-item.current-menu-item > a, .wp-block-navigation-item.current-menu-ancestor > a, .wp-block-navigation-item.current_page_item > a { font-style: italic; } /* * Wider letter spacing for italic (client feedback, 2026-10-01, for review). * * The italic letters sit closer together than the upright ones, so wherever * text is italic it gets 6% extra space between letters — Figma's "letter * spacing 6%", which is 0.06em here. Change the number below to try another * value; set it to 0 to switch the whole thing off. * * CSS can't select "everything italic", so the italic places are listed: * the italic copy links swap to on hover, links the script didn't prepare, * the current page in the menu, email addresses, "Read more" and buttons * (italic in Global Styles). The newsletter field was on this list until * 2026-10-15; it is upright now, so it takes the footer's normal spacing. */ :root { --terngallery-italic-spacing: 0.06em; } .terngallery-steady::after, a:is(:hover, :active, :focus-visible):not(:has(> .terngallery-steady)), button:is(:hover, :active, :focus-visible), .wp-block-navigation-item:is(.current-menu-item, .current-menu-ancestor, .current_page_item) > a, main a[href^="mailto:"], .terngallery-news .wp-block-read-more, .wp-block-button__link, .terngallery-artwork__inquire { letter-spacing: var(--terngallery-italic-spacing); } /* Links that stay upright on hover keep their normal spacing. Their italic copy is never shown, but it still takes up room, so it has to stay the upright width or the link would grow a gap after it. */ :is(footer, .terngallery-news .wp-block-post-title, .terngallery-downloads, .terngallery-artist__downloads, .terngallery-works__caption, .terngallery-artist__caption) a, :is(footer, .terngallery-news .wp-block-post-title, .terngallery-artist__downloads, .terngallery-works__caption, .terngallery-artist__caption) a > .terngallery-steady::after { letter-spacing: inherit; } /* -------------------------------------------------------------------------- No underlines on links. The theme underlines links — some always, and some only on hover: the navigation, post titles, and a few other blocks. The italic on hover is the signal instead, so no link is ever underlined, in any state. The theme's rules start with :root, which gives them a little weight, so this rule starts with :root too and then outweighs them by naming the link. -------------------------------------------------------------------------- */ :root a { text-decoration: none; } /* -------------------------------------------------------------------------- Phone side margins Every mobile frame in Figma sets its content 12px in from the screen's edges. The page margin is WordPress's root padding, which the theme sets to the "50" spacing size — 30px on a phone. Redefining it here moves every page at once, and anything that follows the page margin, rather than a size of its own, comes along. "html body" outweighs the theme's own declaration. -------------------------------------------------------------------------- */ @media (max-width: 781px) { html body { --wp--style--root--padding-left: 0.75rem; --wp--style--root--padding-right: 0.75rem; } /* The frames set some secondary columns a further 30px in (42px from the edge): the team on About. The artist and exhibition pages do the same in templates.css. */ .wp-block-group.terngallery-about-team { padding-left: 1.875rem; } } /* -------------------------------------------------------------------------- Mobile type The Figma "Typography – Mobile" sheet (node 933:1517), as applied in the mobile Home (928:1157) and Single Artist (4032:1856) frames. Below 782px, WordPress's own mobile breakpoint, every desktop style steps down: Heading 1 36/50 -> 24/30 preset "xx-large" Heading 2 23/33 -> 18/24 preset "x-large" Heading 3 16/18 -> 13/15 preset "large" Tagline 13/18 -> 11/15 preset "custom-1" (tagline), H4 Text 14/19 -> 12/16 preset "medium", and every paragraph Caption 12 -> 10/14 preset "small" Text Large 14/20 no preset; lists of titles, and the description on the home page The presets are redefined rather than each block being resized, so anything given a size in the Site Editor picks up the mobile value too. They are set on "html body", which outweighs the theme's own ":root" and "body" declarations whichever stylesheet loads first. Global Styles' Additional CSS held an older mobile block with other values; it was emptied on 2026-09-30, so if mobile sizes ever look wrong, check that box has not been refilled. -------------------------------------------------------------------------- */ @media (max-width: 781px) { html body { --wp--preset--font-size--small: 0.625rem; /* 10px */ --wp--preset--font-size--medium: 0.75rem; /* 12px */ --wp--preset--font-size--large: 0.8125rem; /* 13px */ --wp--preset--font-size--x-large: 1.125rem; /* 18px */ --wp--preset--font-size--xx-large: 1.5rem; /* 24px */ --wp--preset--font-size--custom-1: 0.6875rem; /* 11px */ line-height: 1.333; /* 16px at 12px */ } /* Heading sizes are set in Global Styles as fixed values for H1 and H3, not presets, so they are pointed back at the presets here. "body h1" outweighs the plain "h1" of Global Styles, while any rule naming a class still wins over it. */ body h1 { font-size: var(--wp--preset--font-size--xx-large); line-height: 1.25; /* 30px */ } body h2 { font-size: var(--wp--preset--font-size--x-large); line-height: 1.333; /* 24px */ } body h3 { font-size: var(--wp--preset--font-size--large); line-height: 1.154; /* 15px */ } body h4 { font-size: var(--wp--preset--font-size--custom-1); line-height: 1.364; /* 15px */ } body .wp-element-caption { font-size: var(--wp--preset--font-size--small); line-height: 1.4; /* 14px */ } /* Buttons use the Small size, which becomes the 10px caption size on a phone; the mobile frames draw buttons at 12px ("Inquire"). The Small size is applied with WordPress's own !important, so rather than fight it, Small is simply 12px again inside a button. */ body .wp-block-button, body .wp-element-button { --wp--preset--font-size--small: 0.75rem; font-size: 0.75rem; } /* Text Large. The description on the home page is a Heading 2 block, but the mobile Home frame sets it at 14/20 rather than Heading 2's 18/24. */ .home h2.wp-block-heading { font-size: 0.875rem; line-height: 1.429; /* 20px */ } /* The menu and "Events" in the header carry a fluid size typed into the header template part, on the element itself. Setting the size on what sits inside them replaces it without needing !important. */ .terngallery-header-nav .wp-block-navigation-item, .terngallery-header-events a { font-size: var(--wp--preset--font-size--medium); } /* The artist list on the home page: Heading 1 size, from the preset. */ .terngallery-name-list .wp-block-post-title { line-height: 1.25; /* 30px */ } }