@charset "UTF-8"; /* ========================================================================== Sovereign Terminal v11 — "Prime" -------------------------------------------------------------------------- A men's health publication, redrawn against a premium men's-clinic reference. The clinical blue-grey build this replaces read as a lab report: correct, cold, and indistinguishable from a dashboard. This reader is a man deciding what to do about his own body, and the design has to look like it takes that seriously and like it costs something. THE GROUND. Warm cream paper, not white and not blue. Nearly the whole page sits on it, because this is a publication and a publication is read. Dark appears exactly THREE times — the hero, the newsletter band that closes the page, and the footer. Those three are the design's punctuation; if dark spreads past them the cream stops meaning anything. COLOUR. Warm near-black ink, and ONE gold that carries every action. The gold has two values because a single one cannot serve both grounds: --gold is darkened until it clears AA as text on cream, and --gold-lift is the brighter leaf that only ever appears on the dark bands. Using the bright one on cream is the single easiest way to wreck this palette. A warmed rust is held back for what is genuinely urgent — at most twice on a page. TYPE. Two families with clearly separated jobs: Cormorant Garamond — every display line. A high-contrast Garamond with fine hairlines and a small optical size, so the whole display ramp runs roughly 12% larger than a workhorse serif would and the weights stay light: 300 for the hero claim, 400 for section heads, 500 where a title must hold against a photograph. Set heavier than 500 it turns muddy. Inter Tight — body copy, navigation, meta, labels and the figures. News text is read, not admired; the serif stays out of it. Section heads are CENTRED with a short gold rule beneath — the reference's one structural signature, and what makes a page of article grids read as composed rather than as a feed. Still no tracked-out capitals in display, and still no bylines anywhere. RADIUS. Near-square. A publication carrying mortality data should not look pillowy, and the reference is square-cornered throughout. Controls take a 2px softening rather than a pill. Sections in order: 1 Tokens 2 Reset / base 3 Bands — the page's sections 4 Typography primitives 5 Buttons, chips, marks 6 Header / navigation 7 Cards — the shared article vocabulary 8 Front page sections 9 Sidebar panels 10 Footer 11 Archive / category 12 Single post 13 Static page 14 Thank-you / 404 15 Forms (opt-in, modal) 16 Utilities, motion, print 17 Single-post furniture ========================================================================== */ /* ── 1. Tokens ───────────────────────────────────────────────────────────── */ :root { /* ── Ground ────────────────────────────────────────────────────────── Warm cream, with enough yellow in it that a white tile reads as lifted paper rather than as a slightly different white. --tile-warm is the filled tile the grids alternate in; --surface-sink is the deepest flat value before the dark bands. */ --ground: #FAF7F1; --surface: #FFFFFF; --tile-warm: #F2EDE3; --tile-warm-deep: #E8E0D1; --surface-sink: #EFE9DE; /* Kept under their old names so the several hundred call sites written against the blue build keep resolving. They point at the warm values now; nothing else needs to know. */ --tile-blue: var(--tile-warm); --tile-blue-deep: var(--tile-warm-deep); /* ── Ink ───────────────────────────────────────────────────────────── Warm near-black rather than navy or a true black. Every step is measured against --ground: -400 is the lightest that still clears AA at body size, -500 clears it at 13px and above, and -600 is for rules and decorative marks only, never for text. */ --ink: #14120F; --ink-200: #2A2620; --ink-300: #4A443A; --ink-400: #6A6255; /* -500 is the lightest ink that still clears AA at 12px, which is the size the card read-time and the meta rows use. #7A7164 measures 4.49:1 against the cream — a hair under, and the sort of near-miss that survives review because it looks fine. This value is 4.83:1. */ --ink-500: #756C5F; --ink-600: #C3B9A8; /* ── Gold ──────────────────────────────────────────────────────────── The one action colour, in two values for two grounds. --gold is the ONLY one that may carry text or a rule on cream. It is measured, not eyeballed: at #8A6A1A it clears AA at 4.72:1 against --ground and 5.05:1 against a white tile, so the same value is safe for a 12px label on either. The obvious brighter pick — the #A8812B this build first used — measures 3.36:1 on cream and fails AA at every size that is not display type, which is exactly the failure a gold palette invites and never announces. --gold-lift is the brighter leaf the reference uses, and it is legible ONLY on the dark bands; on cream it drops to roughly 2.4:1. --gold-deep is the pressed/hover value for filled controls. */ --gold: #8A6A1A; --gold-lift: #C9A227; --gold-deep: #6B5114; --gold-tint: #F3EBD8; --gold-wash: #FAF5E9; /* ── Dark ──────────────────────────────────────────────────────────── The hero scrim, the newsletter band and the footer. --dark-2 is the lifted plate inside them — a field on the newsletter form, a column rule in the footer. */ --dark: #14120F; --dark-2: #201D18; --dark-3: #2C2820; --on-dark: #F5F1E8; --on-dark-dim: #A79E8C; /* The rust flag, warmed to sit in this palette. Reserved for genuinely live or urgent markers — never for an ordinary button, and never more than twice on a page. */ --flag: #9C3A22; --flag-tint: #F6E4DD; /* ── Compatibility aliases ─────────────────────────────────────────── The blue build named its system colour --signal, aliased --accent onto it, and used --lav as a second voice. All of them resolve to the gold now. There is ONE action colour in this design; anything that needs a genuinely different voice takes a topic hue by name. Renaming the call sites instead would touch several hundred lines to change nothing visible. */ --signal: var(--gold); --signal-deep: var(--gold-deep); --signal-lift: var(--gold-lift); --signal-tint: var(--gold-tint); --signal-wash: var(--gold-wash); --accent: var(--gold); --accent-deep: var(--gold-deep); --accent-tint: var(--gold-tint); --accent-wash: var(--gold-wash); --lav: var(--gold); /* The topic hues. These match st_chip_palette() in functions.php — a change in one has to be made in the other. All four are earthed enough to sit beside the gold without competing with it for the reader's eye, and all four are measured to clear AA (4.5:1) against the cream ground AND a white tile, because they are used as plain 12px text for a card's topic label rather than as a filled chip. */ --teal: #3E6B63; --slate: #5A5348; --moss: #4A6340; --amber: #8A5A18; /* Tile tints for the figure and guide plates. */ --tint-blue: var(--tile-warm); --tint-teal: #E2EAE7; --tint-slate: #EBE8E2; --tint-sand: #F2EAD9; /* ── Lines and shadow ──────────────────────────────────────────────── Lines are warm and visible: this design separates with a real edge rather than with shadow, so a tile keeps its shape on a tinted band. Shadow stays tight and rare — a large soft drop under every card is the SaaS-kit default and the reference has none of it. */ --line: rgba(20, 18, 15, 0.14); --line-soft: rgba(20, 18, 15, 0.08); --line-firm: rgba(20, 18, 15, 0.26); --line-gold: rgba(138, 106, 26, 0.34); --shade: 0 1px 2px rgba(20, 18, 15, 0.05); --shade-lift: 0 2px 4px rgba(20, 18, 15, 0.06), 0 12px 28px -18px rgba(20, 18, 15, 0.32); --shade-panel: 0 24px 60px -40px rgba(20, 18, 15, 0.55); /* ── Type ────────────────────────────────────────────────────────────── */ --font-display: "Cormorant Garamond", "Times New Roman", Times, serif; --font-body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Display ramp. Cormorant draws small for its point size — its x-height is well under a workhorse serif's — so every step here is set roughly 12% larger than the equivalent in the blue build. It also carries its colour in the hairlines rather than the stems, so the weights stay light: anything above 500 fills in and loses the contrast that is the whole reason for the face. */ --fs-claim: clamp(2.9rem, 6.2vw, 5rem); --fs-h1: clamp(2.25rem, 4.8vw, 3.75rem); --fs-h2: clamp(1.85rem, 3.4vw, 2.75rem); --fs-h3: clamp(1.3rem, 2.1vw, 1.7rem); --fs-h4: 1.1875rem; /* The figure ramp — the big numbers on the data tiles. Set in the body face, not the serif: a statistic is data, and the serif is reserved for the writing. */ --fs-figure: clamp(2.5rem, 4.4vw, 3.5rem); --fs-lead: clamp(1.0625rem, 1.4vw, 1.1875rem); --fs-body: 1rem; --fs-small: 0.9375rem; --fs-meta: 0.8125rem; --fs-micro: 0.75rem; --track-tight: -0.004em; --track-claim: 0.012em; /* The reference letterspaces its small labels wide. Display stays near neutral — Cormorant is already generously fitted. */ --track-label: 0.16em; /* ── Radius ────────────────────────────────────────────────────────── Near-square throughout, following the reference. Controls take the smallest possible softening rather than a pill. */ --r-pill: 2px; --r-img: 0px; --r-card: 2px; --r-plate: 2px; --r-panel: 3px; /* ── Measure and rhythm ────────────────────────────────────────────── Bands are taller than the blue build's. The reference's whole character is air around centred type, and a cramped band reads as a content farm however good the type is. */ --measure: 68ch; --container: 1280px; --gutter: clamp(1.125rem, 3.5vw, 2.5rem); --band-y: clamp(3.75rem, 7vw, 6.5rem); --gap: clamp(0.75rem, 1.1vw, 1rem); /* The masthead logo cap, driven by the Customizer (st_logo_height). */ --logo-h: 40px; --ease: cubic-bezier(0.2, 0.6, 0.3, 1); --speed: 180ms; } /* ── 2. Reset / base ─────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* The sticky masthead would otherwise cover the target of every in-page link. Its own height plus a line of air. */ scroll-padding-top: 6rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, picture, svg, video { display: block; max-width: 100%; } /* The `hidden` attribute has to WIN. It only carries the browser default `display:none`, which is the weakest declaration there is, so any component rule that sets its own `display` silently defeats it — and anything toggled with `el.hidden = true` then never disappears. The subscribe modal is exactly that case: it is `display:grid` when open, and without this it could not be closed. */ [hidden] { display: none !important; } img { height: auto; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } ul, ol { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; } /* One focus treatment for the whole design: a signal-blue ring offset off the element. On navy grounds it would disappear, so there it goes white. */ :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; } /* On the dark grounds the gold focus ring is too close to the ground to read, so it goes to the cream ink. .st-modal is NOT in this list: the modal's dialog is a cream plate, so the default ring is correct there — the class named here previously (.st-modal__panel) never existed in the markup, which is the sort of selector that looks like coverage and provides none. */ .site-footer :focus-visible, .signal :focus-visible, .band--dark :focus-visible, .hero :focus-visible { outline-color: var(--on-dark); } /* ── 3. Bands ───────────────────────────────────────────────────────────── A BAND is a page section. Bands are separated by space; a band that needs setting apart takes a flat tint or the navy inversion rather than a rule. The warm build put every section head in its own narrow left column, which gave four consecutive card sections one shared spine. This design does not need that crutch, because its sections are not four identical grids: the mosaic, the figure strip, the topic rail and the guide row are already different shapes. So the head sits ABOVE its content on a single baseline, with the section label and its "view all" link on the same line — the way a newspaper sets a section front. .band--split is kept because archive and single templates still lay out against it. */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .band { position: relative; } .band__inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); padding-block: var(--band-y); } /* A band that manages its own vertical space — the hero and the closing newsletter panel both do, because their padding belongs to the plate inside rather than to the section. */ .band--flush > .band__inner { padding-block: 0; } /* The tinted band: a flat inset plate, no shadow. */ .band--tint { isolation: isolate; } .band--tint .band__body, .band--tint .band__head { position: relative; z-index: 1; } .band--tint::before { content: ""; position: absolute; inset: clamp(1rem, 2vw, 1.75rem) var(--gutter); border-radius: var(--r-panel); background: var(--surface-sink); z-index: 0; } /* ── The band head ─────────────────────────────────────────────────── CENTRED, and this is the design's one structural signature. The label sits above in wide-tracked capitals, the serif heading under it, and a short gold rule under that. It is what makes a page of article grids read as composed rather than as a feed, and it is the single thing the reference does that no stock theme does. The blue build set this head left, bounded by a full-width rule, with the "view all" link on the label's baseline at the right. That arrangement needs a left column to hang off; centred, there is no baseline to share, so the link drops BELOW the heading and centres with it. On the few heads that are still left-aligned (.band__head--start, used by the archive and single templates where a centred head would float free of the column it introduces) the old baseline arrangement is restored. Capitals appear HERE and in no other display context. A tracked-out label over a centred serif heading is a masthead convention; tracked-out capitals used as a heading are the template tell. */ .band__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; margin-bottom: clamp(2rem, 3.4vw, 3rem); } /* The section label. Small, wide-tracked capitals in the gold — the reference's eyebrow exactly. No rule before it any more: the rule has moved under the heading where it does more work. */ .band__eyebrow { display: block; color: var(--gold); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1.4; } .band__eyebrow::before { content: none; } .band__title { margin: 0; max-width: 24ch; font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--fs-h2); font-weight: 400; line-height: 1.12; letter-spacing: var(--track-claim); color: var(--ink); text-wrap: balance; } /* The short gold rule beneath the heading. Drawn on the heading's own ::after so it tracks the heading rather than needing a spacer element, and so a head with no heading cannot leave a stray rule behind. */ .band__title::after { content: ""; display: block; width: 3.5rem; height: 1px; margin: clamp(1rem, 1.8vw, 1.4rem) auto 0; background: var(--gold); } /* The second half of a section heading, set in italic at the same size. Kept from the blue build: it is a good gesture and Cormorant's italic is a true drawn italic rather than a slant, which is what makes it work. */ .band__title em, .title-em { font-style: italic; font-weight: 300; } .band__link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--gold); font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } .band__link:hover, .band__link:focus-visible { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 0.3em; } /* An intro paragraph under a centred head — the reference runs one under most of its section heads. Constrained well short of the body measure so it stays a caption to the heading rather than becoming a column of copy. */ .band__intro { max-width: 58ch; color: var(--ink-300); font-size: var(--fs-lead); line-height: 1.65; text-wrap: pretty; } /* ── The left-aligned head ─────────────────────────────────────────── For heads that introduce a column rather than a full-width band: the archive's result list, the single post's related row. Restores the blue build's baseline arrangement. */ .band__head--start { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; text-align: left; gap: 0.5rem 1.5rem; margin-bottom: clamp(1.25rem, 2.2vw, 1.75rem); padding-top: 1rem; border-top: 1px solid var(--ink); } .band__head--start .band__eyebrow { grid-column: 1; } .band__head--start .band__title { grid-column: 1; max-width: 22ch; } .band__head--start .band__title::after { margin-inline: 0; } .band__head--start .band__link { grid-column: 2; grid-row: 1; } .band__head--start .band__intro { grid-column: 1; } /* ── Heads on the dark bands ───────────────────────────────────────── The gold has to switch to its bright value the moment the ground goes dark; --gold is tuned for cream and goes muddy here. */ .band--dark .band__eyebrow, .band--dark .band__link, .site-footer .band__eyebrow { color: var(--gold-lift); } .band--dark .band__title, .band--dark .band__intro { color: var(--on-dark); } .band--dark .band__intro { color: var(--on-dark-dim); } .band--dark .band__title::after { background: var(--gold-lift); } @media (max-width: 640px) { .band__head--start { grid-template-columns: minmax(0, 1fr); } .band__head--start .band__link { grid-column: 1; grid-row: auto; margin-top: 0.25rem; } } /* ── The dark band ─────────────────────────────────────────────────── Used three times on the whole site and nowhere else: the hero, the newsletter band that closes the front page, and the footer. It bleeds full width — a dark plate inset from the gutters would read as a card, and these are meant to read as the page changing ground under you. */ .band--dark { background: var(--dark); color: var(--on-dark); } .band--dark a:not(.btn) { color: var(--gold-lift); } .band--dark :focus-visible { outline-color: var(--gold-lift); } .band--dark .band__title em { color: var(--gold-lift); } .band__body { min-width: 0; } /* .band--split is retained for the archive and single layouts, which put a sidebar beside their content. */ .band--split > .band__inner { display: block; } /* ── 4. Typography primitives ────────────────────────────────────────────── */ .h1, .h2, .h3 { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 400; letter-spacing: var(--track-claim); line-height: 1.12; color: var(--ink); text-wrap: balance; } .h1 { font-size: var(--fs-h1); } .h2 { font-size: var(--fs-h2); } .h3 { font-size: var(--fs-h3); line-height: 1.2; font-weight: 500; } .lead { font-size: var(--fs-lead); line-height: 1.65; color: var(--ink-300); max-width: 62ch; } /* The standalone label, for places that need the band eyebrow's treatment without a band head around it — a card's topic line, the hero's kicker. */ .eyebrow { display: inline-block; color: var(--gold); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1.4; } .eyebrow::before { content: none; } /* ── 5. Buttons, chips, marks ───────────────────────────────────────────── The reference's control is a SQUARED gold rectangle with a short, wide-tracked capital label — no rounding, no icon, no shadow. It reads as a stamped plate rather than as a pill, and that squareness is half of why the reference looks expensive: rounded controls on a serif page are the universal template tell. Capitals are used here, as on the band eyebrow, and nowhere else. They work on a control because the label is two or three words at 13px — the thing that made tracked-out capitals a tell was setting HEADINGS in them. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.9rem; border: 1px solid var(--gold); border-radius: var(--r-pill); background: var(--gold); color: #fff; font-family: var(--font-body); font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease); } .btn:hover, .btn:focus-visible { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; } /* --accent is the historical name for the filled control; it stays so every existing call site keeps working. */ .btn--accent { background: var(--gold); border-color: var(--gold); color: #fff; } .btn--accent:hover, .btn--accent:focus-visible { background: var(--gold-deep); border-color: var(--gold-deep); } /* The outlined control. Used where two actions sit together and only one is the point — and as the hero's single call to action, where a filled gold plate over a photograph would shout. */ .btn--ghost { background: transparent; border-color: var(--ink-600); color: var(--ink); } .btn--ghost:hover, .btn--ghost:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--ground); } /* The old lavender secondary. Mapped onto the ink button so nothing that still asks for it renders unstyled. */ .btn--lav { background: var(--ink); border-color: var(--ink); color: #fff; } .btn--lav:hover, .btn--lav:focus-visible { background: var(--ink-200); border-color: var(--ink-200); } /* ── Controls on the dark bands ────────────────────────────────────── On dark, the filled control keeps its gold but switches to the BRIGHT value and takes near-black text: gold-on-dark with white text is the one combination in this palette that fails contrast in both directions. .btn--on-accent is the historical name and is kept pointing here. */ .band--dark .btn, .band--dark .btn--accent, .hero .btn, .hero .btn--accent, .btn--on-accent, .signal .btn--accent { background: var(--gold-lift); border-color: var(--gold-lift); color: var(--dark); } .band--dark .btn:hover, .band--dark .btn:focus-visible, .band--dark .btn--accent:hover, .band--dark .btn--accent:focus-visible, .hero .btn:hover, .hero .btn:focus-visible, .btn--on-accent:hover, .btn--on-accent:focus-visible, .signal .btn--accent:hover, .signal .btn--accent:focus-visible { background: #E0BC4A; border-color: #E0BC4A; color: var(--dark); } /* The outlined control on dark — the hero's call to action. .hero is named explicitly and NOT folded into .band--dark: the hero is its own section with its own scrim, not a band, so a rule written only against .band--dark left the hero's button at its cream-ground colours — near-black ink on a dark photograph, measured at 1:1 against the scrim's floor. This is the exact failure mode of a two-ground palette, and it is invisible in a screenshot taken over a dark photo. */ .band--dark .btn--ghost, .hero .btn--ghost, .signal .btn--ghost, .site-footer .btn--ghost, .btn--outline-light { background: transparent; border-color: rgba(245, 241, 232, 0.55); color: var(--on-dark); } .band--dark .btn--ghost:hover, .band--dark .btn--ghost:focus-visible, .hero .btn--ghost:hover, .hero .btn--ghost:focus-visible, .signal .btn--ghost:hover, .signal .btn--ghost:focus-visible, .site-footer .btn--ghost:hover, .site-footer .btn--ghost:focus-visible, .btn--outline-light:hover, .btn--outline-light:focus-visible { background: var(--gold-lift); border-color: var(--gold-lift); color: var(--dark); } .btn--sm { padding: 0.6rem 1.25rem; font-size: var(--fs-micro); letter-spacing: 0.1em; } .btn--lg { padding: 1rem 2.4rem; font-size: var(--fs-small); } /* A control that spans its container — the newsletter submit on mobile, the Explore button at the foot of a beat card. */ .btn--block { width: 100%; } /* ── The arrow badge ────────────────────────────────────────────────── The warm build trailed a filled circular chevron after every label. That is the "→ on every button" tell, and at the scale it was drawn it also made each control look like two objects. It is now a bare chevron that only appears on standalone links, nudging on hover, and it is suppressed entirely inside a .btn — a button's job is already stated by its words. */ .arrow-badge { display: inline-grid; place-items: center; width: 0.75rem; height: 0.75rem; flex: none; color: currentColor; transition: transform var(--speed) var(--ease); } .arrow-badge svg { width: 0.7rem; height: 0.7rem; stroke-width: 2.25; } .arrow-badge--sm svg { width: 0.6rem; height: 0.6rem; } .btn .arrow-badge { display: none; } a:hover > .arrow-badge { transform: translateX(2px); } /* ── Topic chips ────────────────────────────────────────────────────── A chip is the topic's name in the topic's colour, on a pale ground with a left rule in the same colour. Not a filled pill: on a page carrying four or five of them, filled pills at card scale read as a row of buttons and pull rank over the headlines they sit above. */ .chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.5rem 0.2rem 0.45rem; border-left: 3px solid var(--chip-bg, var(--signal)); border-radius: 0 3px 3px 0; background: var(--surface-sink); color: var(--chip-bg, var(--signal)); font-size: var(--fs-micro); font-weight: 600; line-height: 1.4; text-decoration: none; transition: background var(--speed) var(--ease); } .chip:hover, .chip:focus-visible { background: var(--signal-tint); } .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } /* The meta row — reading time and date. Separated by a thin rule rather than by a middle dot. */ .meta-row { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink-500); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; } .meta-row > span + span::before, .meta-row > span + time::before, .meta-row > time + span::before { content: ""; display: inline-block; width: 1px; height: 0.8em; margin-right: 0.6rem; vertical-align: -0.05em; background: var(--ink-600); } .meta-row--on-dark { color: rgba(255, 255, 255, 0.72); } .meta-row--on-dark > span + span::before, .meta-row--on-dark > span + time::before { background: rgba(255, 255, 255, 0.35); } /* ── 6. Header / navigation ───────────────────────────────────── The reference stacks its masthead: the wordmark CENTRED on its own line, then a hairline, then the navigation centred beneath it. That stack is what gives a masthead the weight of a publication rather than of an app bar — the logo is not competing with a row of links for the same band of space, so it can be set at a size worth looking at. Below 1080px the stack collapses back to a conventional three-cell row: brand left, drawer toggle right. There is no room for a centred stack on a phone, and a centred logo over a burger reads as a mistake. The bar is flat cream with a hard bottom rule — no floating plate, no shadow appearing on scroll. A publication's masthead is fixed furniture. */ .site-header { position: sticky; top: 0; z-index: 60; background: var(--ground); border-bottom: 1px solid var(--line); } /* Once the page scrolls, the masthead takes a near-opaque plate. On a flat cream ground it is already opaque, so this only matters where the header overlaps the hero photograph on short viewports. main.js sets the class. */ .site-header--scrolled { background: var(--ground); box-shadow: 0 1px 0 var(--line), 0 10px 30px -24px rgba(20, 18, 15, 0.5); } .masthead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; min-height: 4.5rem; } /* The centred stack, 1080px and up. The brand takes the full width on row one; the navigation and the single control share row two, with the control absolutely placed at the right so the menu stays centred on the PAGE rather than on the space left over beside it — which is the detail that separates a deliberate centred menu from one that merely looks centred until a link is added. */ @media (min-width: 1081px) { /* The masthead is also the containing block for the utility cell below: .masthead__util is a SIBLING of .nav-primary, not a child of it, so `position: relative` on the nav row could never contain it — the offsets fell through to .site-header and resolved against the whole two-row masthead, which is what parked the Subscribe pill and the burger up in the brand row, nowhere near the menu they belong to. */ .masthead { position: relative; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; padding-block: 1.5rem 0; } .masthead__brand { padding-bottom: 1.4rem; } .nav-primary { position: relative; width: 100%; border-top: 1px solid var(--line); padding-block: 0.85rem; } .nav-menu { display: flex; justify-content: center; } /* Pinned to the right of the navigation row and centred on it. The cell is stretched from the top of the nav row to the bottom of the masthead rather than given a computed height, and its contents are centred inside that box. Stating the row's start once (the brand row's padding + the capped logo) and letting `bottom: 0` find its end keeps the control centred on the links whatever the Customizer sets the logo height to — an arithmetic height had to restate the nav row's own padding and drifted a few pixels off centre as soon as the link line-height did not match the guess. */ .masthead__util { position: absolute; right: 0; top: calc(1.5rem + var(--logo-h) + 1.4rem); bottom: 0; display: flex; align-items: center; } } /* The masthead utility cell: the Subscribe control and, below the breakpoint, the drawer toggle. */ .masthead__util { display: flex; align-items: center; gap: 0.6rem; justify-self: end; } .masthead__brand { display: flex; align-items: center; } .masthead__brand a, .masthead__brand .site-logo { display: flex; align-items: center; text-decoration: none; color: var(--ink); } /* The Customizer's logo, capped by --logo-h. the_custom_logo() emits class="custom-logo" — it does NOT accept a class argument — so the masthead rule has to name that class. Styling .brand-mark alone meant nothing matched the element WordPress actually prints, and the Customizer's height setting did nothing on the front end. .brand-mark is kept alongside it for the text wordmark path. */ .masthead__brand .custom-logo, .brand-mark { display: block; /* !important beats the width/height ATTRIBUTES WordPress prints on the (width="600" height="91"), which otherwise fix the intrinsic box and leave the logo at full size whatever the setting says. */ height: var(--logo-h) !important; width: auto !important; /* Height alone is not enough: a wide wordmark at 40px tall can still be 600px across. In the centred stack there is no neighbour to push into, but the cap still keeps an oversized mark from bleeding past the gutters on a narrow viewport. */ max-width: min(420px, 74vw); /* contain, not cover: where the width cap does bite the logo must letterbox inside its box rather than be stretched to fill it. */ object-fit: contain; } /* The link WordPress wraps the logo in. Without this it is a block box the full width of its cell, so the mark cannot sit tight to its edge. */ .masthead__brand .custom-logo-link { display: inline-flex; align-items: center; line-height: 0; } /* The text wordmark, used when no logo has been uploaded. Set in the display serif so the masthead carries the publication's voice even without art, and letterspaced wide the way the reference sets its own — a wordmark is the one place where tracked-out display type is correct rather than a tell, because it is a mark being read as a shape, not a line being read as a sentence. */ .wordmark { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); line-height: 1; } .wordmark em { font-style: italic; font-weight: 300; text-transform: none; letter-spacing: 0.04em; color: var(--gold); } .nav-primary { min-width: 0; justify-self: center; } .nav-list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.85rem); } /* Set in capitals and bold. Capitals need letterspacing to stay readable — at their natural fit the counters close up — and they are dropped a step in size, because a capital is optically larger than a lowercase letter at the same point size. */ .nav-list a { display: inline-block; padding: 0.35rem 0; color: var(--ink-200); font-size: var(--fs-meta); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease); } .nav-list a:hover, .nav-list a:focus-visible { color: var(--gold); border-bottom-color: var(--gold); } .nav-list .current-menu-item > a, .nav-list .current_page_item > a { color: var(--gold); border-bottom-color: var(--gold); } /* The masthead's one filled control. Larger than the .btn--sm it used to take: it is the only action in a row of plain links, and at small size it read as one more item in the menu rather than as the thing to press. Capitalised with the navigation so the two agree. */ .masthead__cta { padding: 0.6rem 1.35rem; font-size: var(--fs-micro); letter-spacing: 0.12em; } /* The drawer's own header and the drawer subscribe link: mobile only. */ .nav-head, .nav-subscribe { display: none; } .menu-pill { display: none; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--ink); } .menu-pill__bars { display: grid; gap: 4px; width: 1rem; } .menu-pill__bars span { display: block; height: 2px; background: currentColor; border-radius: 1px; } .nav-scrim { display: none; } /* ── Below 1080px: the drawer ────────────────────────────────────────── */ @media (max-width: 1080px) { .masthead { grid-template-columns: auto minmax(0, 1fr); min-height: 4rem; } .masthead__util { grid-column: 2; } .masthead__cta { display: none; } .menu-pill { display: inline-flex; } /* The panel that slides is .nav-primary, NOT .nav-menu — main.js toggles .is-open on #nav-primary, and styling the inner wrapper instead left the drawer permanently shut. */ .nav-primary { position: fixed; inset: 0 0 0 auto; z-index: 90; width: min(21rem, 86vw); padding: 1.25rem var(--gutter) 2rem; background: var(--surface); border-left: 1px solid var(--line); transform: translateX(100%); visibility: hidden; transition: transform var(--speed) var(--ease), visibility var(--speed) var(--ease); overflow-y: auto; } .nav-primary.is-open { transform: translateX(0); visibility: visible; } .nav-menu { display: block; } .nav-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); } .nav-head__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; } .nav-close { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: transparent; color: var(--ink); } .nav-close svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; } .nav-list { display: grid; gap: 0; align-items: stretch; } .nav-list li + li { border-top: 1px solid var(--line-soft); } /* In the drawer the links are their own list rather than a row inside a masthead, so they take a reading size. Capitals are kept for consistency with the desktop bar but tracked a little tighter, since at this size they no longer need the extra air. */ .nav-list a { display: block; padding: 0.85rem 0; font-size: 0.9375rem; letter-spacing: 0.05em; border-bottom: 0; } .nav-list a:hover, .nav-list a:focus-visible { border-bottom-color: transparent; color: var(--signal); } .nav-subscribe { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; padding: 0.75rem 1.25rem; border-radius: var(--r-pill); background: var(--signal); color: #fff; font-size: var(--fs-small); font-weight: 600; text-decoration: none; } .nav-scrim { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(20, 18, 15, 0.55); opacity: 0; visibility: hidden; transition: opacity var(--speed) var(--ease), visibility var(--speed) var(--ease); } .nav-scrim.is-open { opacity: 1; visibility: visible; } } /* main.js sets this on while the drawer is open, so the page behind the panel does not scroll under it. */ body.nav-open { overflow: hidden; } /* The drawer lives inside .site-header, which is position:sticky with its own z-index — so it opens a stacking context, and the panel's z-index:90 is resolved INSIDE it rather than against the scrim. The panel therefore rendered behind the scrim it is supposed to sit above, and the whole drawer came up dimmed. Raising the header above the scrim while the drawer is open fixes it without moving the markup: the panel keeps its place in the document, and the header returns to its own layer as soon as the drawer closes. */ @media (max-width: 1080px) { body.nav-open .site-header { z-index: 100; } } /* The reading-progress bar on single posts. A single signal-blue line at the very top of the viewport. */ .read-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: 2px; background: transparent; pointer-events: none; } .read-progress__fill { height: 100%; width: 0; background: var(--signal); transition: width 80ms linear; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 0.75rem 1.25rem; background: var(--ink); color: #fff; font-size: var(--fs-small); font-weight: 600; text-decoration: none; } .skip-link:focus { left: 0.5rem; top: 0.5rem; } /* ── 7. Cards ───────────────────────────────────────────────────────────── One article vocabulary, two weights: .card--photo the photograph, then the text beneath it on the ground .card--plate a flat tinted tile, no photography The blue build drew both as bordered tiles with a 10px corner. The reference draws neither: its article cards are a SQUARE photograph with the type set beneath on the page's own ground, no box, no edge, no shadow. That is the whole difference between a page that reads as a magazine and one that reads as a dashboard, and it costs nothing but the border. What separates one card from the next is the photograph's edge and the space around it. On hover the image darkens very slightly and the headline takes the gold — the card does not lift, scale or float, all of which turn a page of news into a page of products. */ .card { position: relative; display: flex; flex-direction: column; min-width: 0; background: transparent; border: 0; border-radius: 0; transition: none; } .card:hover { transform: none; } .card__media { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tile-warm); } .card__img, .card__media img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--speed) var(--ease); } .card:hover .card__img, .card:hover .card__media img { opacity: 0.88; } .card__body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; flex: 1; padding: 1.35rem 0.5rem 0; } /* The topic label above a card headline. Wide-tracked capitals in the gold, matching the band eyebrow — one label treatment for the whole design rather than a second one invented for cards. It keeps --card-accent so a term with its own colour can still override it; where no term colour is set it falls back to the gold. */ .card__topic { color: var(--card-accent, var(--gold)); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none; line-height: 1.4; } .card__topic:hover, .card__topic:focus-visible { text-decoration: underline; text-underline-offset: 0.3em; } .card__title { font-family: var(--font-display); font-optical-sizing: auto; font-size: 1.4rem; font-weight: 500; line-height: 1.2; letter-spacing: var(--track-claim); color: var(--ink); text-wrap: pretty; } .card__title a { text-decoration: none; transition: color var(--speed) var(--ease); } .card__title a:hover, .card__title a:focus-visible { color: var(--gold); } /* The headline covers the whole tile, so the card is clickable anywhere without nesting a second link around the photograph. */ .card__title a::after { content: ""; position: absolute; inset: 0; } .card__text { color: var(--ink-400); font-size: var(--fs-small); line-height: 1.6; max-width: 42ch; } /* The foot carries the read time alone now. The blue build ruled it off from the body and trailed a chevron after it; on an unboxed card a rule across the bottom draws a line to nowhere, and the chevron was the "→ on everything" tell. What is left is one quiet line of meta. */ .card__foot { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: auto; padding-top: 0.85rem; border-top: 0; } .card__read { color: var(--ink-500); font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-variant-numeric: tabular-nums; } .card__foot .arrow-badge { display: none; } /* The flat treatment, for cards with no photograph. A tinted plate with a gold hairline at the top rather than a coloured left edge — the left bar was a component-library convention and read as a status flag. */ .card--plate { background: var(--tile-warm); border: 0; border-top: 2px solid var(--card-accent, var(--gold)); border-radius: 0; padding: 1.5rem 1.35rem; } .card--plate:hover { background: var(--tile-warm-deep); } .card--plate .card__body { padding: 0; } .card--plate .card__foot { border-top: 0; } /* ── 8. Front page ─────────────────────────────────────────────────────── The page in order: Hero — a full-bleed dark photograph, the claim centred over it. Latest — three picture cards directly beneath, on cream. Beats — the reference's services grid, carrying categories. Standards — the cream/gold band: how this newsroom works, plus figures. Guides — the long reads, one feature at double width. FAQ — an accordion of plain questions. Signal — the dark newsletter band that closes the page. Dark appears in exactly two of those (hero, signal) plus the footer. The rest is cream, because this is a publication and a publication is read. ── The hero ───────────────────────────────────────────────────────── The blue build opened with a mosaic of unequal tiles — a good newspaper front, and completely unlike the reference, which opens with one dark photograph and a centred serif claim over it and nothing else. That emptiness is the point: it is the only place on the page where nothing is being sold or indexed, and it is what makes the grids beneath it read as content rather than as the whole site. The photograph is the newest post's featured image, or whatever has been set in the Customizer. It is always darkened by a scrim — an undarkened photograph cannot be typed over safely, whatever the photograph is, and a hero that depends on the editor choosing a dark image will break the first time one does not. */ .hero { position: relative; display: grid; place-items: center; min-height: clamp(26rem, 62vh, 40rem); padding-block: clamp(4rem, 9vw, 7.5rem); background: var(--dark); color: var(--on-dark); isolation: isolate; overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: -2; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } /* The scrim. Two layers: a flat wash that guarantees a floor of darkness whatever the photograph does, and a vertical gradient that deepens top and bottom so the masthead above and the page edge below both have something to sit against. */ .hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(20, 18, 15, 0.82) 0%, rgba(20, 18, 15, 0.52) 38%, rgba(20, 18, 15, 0.58) 68%, rgba(20, 18, 15, 0.88) 100%), rgba(20, 18, 15, 0.3); } /* No photograph at all — a fresh install, or a site whose newest posts carry no art. The hero still has to look deliberate, so it falls back to a flat dark field with a faint gold vignette rather than to a grey box. */ .hero--bare .hero__scrim { background: radial-gradient(120% 90% at 50% 0%, rgba(201, 162, 39, 0.16), transparent 62%), var(--dark); } .hero__inner { position: relative; width: 100%; max-width: 56rem; margin-inline: auto; padding-inline: var(--gutter); display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(1.1rem, 2vw, 1.6rem); } .hero__kicker { color: var(--gold-lift); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none; } a.hero__kicker:hover, a.hero__kicker:focus-visible { text-decoration: underline; text-underline-offset: 0.35em; } /* The claim. Cormorant at its lightest weight and largest size — the one place in the design where display type is allowed to be enormous. The second line in italic is the gesture carried over from the blue build; here it also does structural work, separating the publication's subject from its promise without needing a second colour or size. */ .hero__claim { margin: 0; font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--fs-claim); font-weight: 300; line-height: 1.04; letter-spacing: var(--track-claim); color: #fff; text-wrap: balance; } .hero__claim em { display: block; font-style: italic; font-weight: 300; color: var(--gold-lift); } .hero__text { max-width: 46ch; color: rgba(245, 241, 232, 0.86); font-size: var(--fs-lead); line-height: 1.65; text-wrap: pretty; } .hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; margin-top: 0.5rem; } /* ── Latest: the three picture cards under the hero ───────────────── */ .latestrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.75rem); } @media (max-width: 900px) { .latestrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* An orphan third card in a two-across grid is the arrangement that makes a deliberate row look accidental, so it spans instead. */ .latestrow > :last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 28rem; margin-inline: auto; } } @media (max-width: 560px) { .latestrow { grid-template-columns: minmax(0, 1fr); } .latestrow > :last-child:nth-child(odd) { grid-column: auto; max-width: none; } } /* ── The shared card row ────────────────────────────────────────────── The three-across grid the related-posts row on a single post and the suggestion row on the 404 both use. It is defined here rather than beside them because it is the same arrangement as .latestrow and must not drift away from it. */ .cardrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.75rem); } @media (max-width: 900px) { .cardrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cardrow > :last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 28rem; margin-inline: auto; } } @media (max-width: 560px) { .cardrow { grid-template-columns: minmax(0, 1fr); } .cardrow > :last-child:nth-child(odd) { grid-column: auto; max-width: none; } } /* ── Beats: the reference's services grid ───────────────────────────── In the reference this is the block of clinic services: a photograph, the service name in serif above it, a list of what it covers beneath, and a gold button. Here the service is a BEAT — a category — the list is its three newest headlines, and the button goes to the archive. The name sits ABOVE the photograph, as it does in the reference. That is an unusual arrangement and it is most of why the block reads as designed: a title under an image is what every card in every theme does. The tile is a flat cream plate with a hairline edge; the photograph is square-cornered and full-bleed to the plate's inner width. */ .beatgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 2.6vw, 2.25rem); } @media (max-width: 980px) { .beatgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .beatgrid { grid-template-columns: minmax(0, 1fr); } } .beatcard { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line-soft); padding: 1.65rem 1.5rem 1.5rem; text-align: center; transition: border-color var(--speed) var(--ease); } .beatcard:hover { border-color: var(--line-gold); } .beatcard__name { margin: 0 0 1.1rem; font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--fs-h3); font-weight: 500; line-height: 1.15; letter-spacing: var(--track-claim); color: var(--ink); } .beatcard__name a { text-decoration: none; transition: color var(--speed) var(--ease); } .beatcard__name a:hover, .beatcard__name a:focus-visible { color: var(--gold); } .beatcard__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tile-warm); margin-bottom: 1.25rem; } .beatcard__media img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--speed) var(--ease); } .beatcard:hover .beatcard__media img { opacity: 0.9; } /* The fallback when a beat has no photographed post: the line-art mark on a tinted plate, drawn large. The icons were worth keeping — they are the one piece of drawn artwork the theme owns — and a beat without a photo should not leave a grey rectangle where its neighbours have images. */ .beatcard__mark { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 1.25rem; background: var(--gold-wash); color: var(--beat-accent, var(--gold)); } .beatcard__mark svg { width: 38%; height: auto; max-width: 5.5rem; stroke-width: 1; } /* The list of recent headlines. Centred to agree with the rest of the tile, and ruled between rows rather than bulleted — a bullet list centred is unreadable, a ruled one is a contents page. */ /* The list takes the leftover height rather than only what its own rows need, so the Explore button beneath it lands on the SAME line in every card of the row whatever each beat's headlines happen to be. Without this the buttons sit wherever the text stops and the row reads as six cards of different lengths even though the tiles are identical. */ .beatcard__list { display: flex; flex-direction: column; gap: 0; flex: 1; margin-bottom: 1.4rem; text-align: center; } .beatcard__item { padding-block: 0.6rem; border-top: 1px solid var(--line-soft); } .beatcard__item:first-child { border-top: 0; padding-top: 0; } /* Two lines at most. A single four-line headline in one beat otherwise sets the height of every card in the row. */ .beatcard__item a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-300); font-size: var(--fs-small); line-height: 1.45; text-decoration: none; transition: color var(--speed) var(--ease); } .beatcard__item a:hover, .beatcard__item a:focus-visible { color: var(--gold); } .beatcard__cta { margin-top: auto; align-self: center; } /* ── Standards: the cream/gold band ─────────────────────────────────── The reference's "Why PRIMETIME" — a tinted full-bleed band carrying the clinic's argument for itself. Here it carries the newsroom's: how the reporting is done, and three numbers about the archive that are read from the archive rather than invented. It bleeds full width and takes the gold wash rather than a plate inset from the gutters, so it reads as the page changing ground. */ .standards { background: var(--gold-wash); border-block: 1px solid var(--line-gold); } .standards__body { display: flex; flex-direction: column; align-items: center; gap: clamp(2rem, 4vw, 3.25rem); } .standards__text { max-width: 62ch; text-align: center; color: var(--ink-300); font-size: var(--fs-lead); line-height: 1.7; text-wrap: pretty; } .standards__text strong { color: var(--ink); font-weight: 600; } /* The three figures. Set in the body face and tabular — a statistic is data, and the serif is reserved for the writing. Separated by hairlines rather than sat in boxes. */ .figurerow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); width: 100%; max-width: 54rem; } @media (max-width: 680px) { .figurerow { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; } } .figure { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; padding-inline: 0.5rem; border-left: 1px solid var(--line-gold); } .figure:first-child { border-left: 0; } @media (max-width: 680px) { .figure { border-left: 0; border-top: 1px solid var(--line-gold); padding-top: 1.5rem; } .figure:first-child { border-top: 0; padding-top: 0; } } .figure__value { font-family: var(--font-body); font-size: var(--fs-figure); font-weight: 300; line-height: 1; letter-spacing: -0.02em; color: var(--gold); font-variant-numeric: tabular-nums; } .figure__label { color: var(--ink-400); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1.5; } /* ── Guides: the long reads ─────────────────────────────────────────── One feature at double width beside two ordinary cards. This is the only place on the front page where tile SIZE still carries hierarchy, and it is worth keeping for exactly that reason: a page where every card is the same size has no opinion about what is worth reading. */ .guiderow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 3vw, 2.75rem); align-items: start; } /* The two short rows go in a column of their OWN rather than into two grid rows beside the feature. The obvious arrangement — a feature spanning two rows with a side card in each — does not work, and not for a reason CSS lets you tune away: a spanning item distributes its height across every track it spans, so the feature's ~700px is split between the two side rows and each 144px card is stranded in the middle of a 350px track. grid-auto-rows, min-content and align-items:start all fail to help, because the tracks themselves are what is oversized. A nested column sidesteps it entirely. The feature and the stack are two items in one row, each free to be its own height. */ .guiderow__stack { display: flex; flex-direction: column; gap: clamp(1.25rem, 2.2vw, 1.75rem); min-width: 0; } .guiderow__feature .card__media { aspect-ratio: 3 / 2; } .guiderow__feature .card__title { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 400; } /* The two beside it are set as horizontal rows rather than as stacked cards: at half the feature's width a vertical card would be a column of postage stamps. */ .guiderow__side { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.25rem; align-items: start; text-align: left; } .guiderow__side .card__media { aspect-ratio: 1 / 1; margin: 0; } .guiderow__side .card__body { align-items: flex-start; text-align: left; padding: 0; gap: 0.45rem; } .guiderow__side .card__title { font-size: 1.25rem; } .guiderow__side .card__text { display: none; } .guiderow__side .card__foot { justify-content: flex-start; padding-top: 0.4rem; } @media (max-width: 860px) { .guiderow { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 460px) { .guiderow__side { grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; } } /* ── FAQ ────────────────────────────────────────────────────────────── Built on
/, so every question is open to a reader with no scripting and to a search engine, and the disclosure works before any JavaScript has run. The marker is drawn as a plus that becomes a minus, using a pseudo-element rather than the native triangle, which cannot be styled consistently across browsers. Rows are separated by hairlines on the page's own ground — no boxes. An accordion of bordered panels is the component-library default and reads as a support widget. */ .faqlist { max-width: 52rem; margin-inline: auto; border-top: 1px solid var(--line); } .faq { border-bottom: 1px solid var(--line); } .faq__q { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding-block: 1.35rem; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 500; line-height: 1.3; letter-spacing: var(--track-claim); color: var(--ink); transition: color var(--speed) var(--ease); } /* Both are needed: WebKit uses the pseudo-element, everyone else honours list-style on the summary itself. */ .faq__q::-webkit-details-marker { display: none; } .faq__q:hover { color: var(--gold); } /* The plus/minus. Drawn as two rules in a box so the horizontal stroke can stay while the vertical one rotates away — a glyph swap would jump. */ .faq__q::after { content: ""; flex: none; width: 0.85rem; height: 0.85rem; margin-top: 0.4rem; background: linear-gradient(var(--gold), var(--gold)) center / 100% 1px no-repeat, linear-gradient(var(--gold), var(--gold)) center / 1px 100% no-repeat; transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease); } .faq[open] .faq__q::after { /* Rotating the whole box by 90° turns the plus into a plus again, so the vertical stroke is faded instead and the box given a quarter turn for the motion. */ transform: rotate(90deg); background: linear-gradient(var(--gold), var(--gold)) center / 100% 1px no-repeat; } .faq[open] .faq__q { color: var(--gold); } .faq__a { padding-bottom: 1.5rem; max-width: 64ch; color: var(--ink-300); font-size: var(--fs-body); line-height: 1.7; } .faq__a p + p { margin-top: 0.85rem; } /* ── Signal: the closing newsletter band ────────────────────────────── The last of the design's three dark grounds. Full-bleed, centred, and carrying nothing but the offer and the form — the blue build put a list of benefits beside it, which turned the last thing on the page into a pitch deck. */ .signal { background: var(--dark); color: var(--on-dark); position: relative; isolation: isolate; overflow: hidden; } /* A faint gold wash from the top edge, so the band is not a flat black rectangle. Kept well under the type's contrast floor. */ .signal::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 70% at 50% 0%, rgba(201, 162, 39, 0.14), transparent 60%); } .signal__body { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; max-width: 40rem; margin-inline: auto; text-align: center; } .signal__text { color: var(--on-dark-dim); font-size: var(--fs-lead); line-height: 1.65; text-wrap: pretty; } .signal__form { width: 100%; } /* ── 9. Sidebar panels ──────────────────────────────────────────────────── The article column's companion. Panels are plates on the ground, sticky as a group so the column travels with a long article. */ .layout__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } .layout__main { min-width: 0; } .sidebar { display: flex; flex-direction: column; gap: var(--gap); position: sticky; top: 6rem; } .panel { padding: 1.5rem 1.4rem; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shade); } .panel__heading { margin: 0 0 0.6rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; letter-spacing: var(--track-tight); color: var(--ink); } .panel__intro { margin: 0 0 1.1rem; color: var(--ink-400); font-size: var(--fs-meta); line-height: 1.55; } /* The subscribe panel is the one coloured plate in the column. */ .panel--subscribe { background: var(--signal-wash); border: 1px solid var(--signal-tint); box-shadow: none; } .panel--subscribe .panel__heading { color: var(--signal-deep); } /* ── Topic list ───────────────────────────────────────────────────────── */ .cat-list { display: flex; flex-direction: column; } .cat-list__link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--line-soft); color: var(--ink-300); font-size: var(--fs-small); text-decoration: none; transition: color var(--speed) var(--ease); } .cat-list__item:last-child .cat-list__link { border-bottom: 0; } .cat-list__name { display: flex; align-items: center; gap: 0.6rem; } /* The topic's hue survives as the small dot before its name. */ .cat-list__name::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--cat-accent, var(--accent)); } .cat-list__link:hover, .cat-list__link:focus-visible { color: var(--accent); } .cat-list__count { color: var(--ink-500); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; } /* ── Mini list ────────────────────────────────────────────────────────── */ .minilist { display: flex; flex-direction: column; gap: 1rem; } .minilist__item { display: flex; align-items: flex-start; gap: 0.85rem; } .minilist__media { flex: none; width: 4.5rem; border-radius: 10px; overflow: hidden; background: var(--surface-sink); aspect-ratio: 1; } .minilist__img { width: 100%; height: 100%; object-fit: cover; } .minilist__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .minilist__title { margin: 0; font-family: var(--font-display); font-size: 0.95rem; font-weight: 500; line-height: 1.28; letter-spacing: var(--track-tight); } .minilist__title a { color: var(--ink); text-decoration: none; } .minilist__title a:hover, .minilist__title a:focus-visible { color: var(--accent); } .minilist__meta, .minilist__date { color: var(--ink-500); font-size: var(--fs-micro); } @media (max-width: 1000px) { .layout__grid { grid-template-columns: minmax(0, 1fr); } .sidebar { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } } /* ── 10. Footer ─────────────────────────────────────────────────────────── The dark slab, in two parts: three columns, then one centred base line. The build this replaces was the old four-column link dump recoloured — it kept its bordered beat chips, a left accent bar on every row, a "Latest" list repeating articles the reader had already passed three times, and everything jammed left while the whole page above it was centred. Recolour is not redesign, and a footer that does not speak the page's language is where a good design stops looking deliberate. What is here instead is the reference's own footer, which is the plainest thing on its page: three columns of ordinary type under wide-tracked gold headings, and no boxes anywhere. Its restraint is what lets the dark slab read as the publication signing off rather than as one more section. */ .site-footer { margin-top: 0; padding-block: clamp(3.5rem, 6vw, 5.5rem) 0; background: var(--dark); color: var(--on-dark-dim); border-top: 1px solid var(--line-gold); } /* ── The three columns ──────────────────────────────────────────────── The brand takes the widest, because it carries the logo and a sentence; the two link columns are narrower and equal. */ .footer-grid { display: grid; /* The brand column is the widest but not by much: it carries a logo and one 34ch sentence, so at a larger share it simply ran out of content and left a hole beside two full columns. These three are measured against what is actually in them. */ grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; padding-bottom: clamp(3rem, 5vw, 4.5rem); } @media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.75rem; } /* The brand spans the full width above the two link columns rather than sitting in a half-width cell with its logo cramped. */ .footer-brand { grid-column: 1 / -1; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } } /* ── The brand column ─────────────────────────────────────────────────── */ .footer-brand__mark, .footer-brand .custom-logo { display: inline-block; width: auto; max-width: min(15rem, 62%); height: auto; max-height: none; } /* A logo uploaded in the Customizer is almost always drawn for a light ground, so on the dark slab it is knocked back to white. brightness(0) flattens it to black first, then invert() takes it to white — which keeps a multi-colour mark legible instead of leaving it to fight the slab. */ .footer-brand .custom-logo { filter: brightness(0) invert(1); opacity: 0.92; } /* The text wordmark, when no logo is set. Matches the masthead's tracked capitals so the two read as the same mark. */ .footer-brand__mark { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark); text-decoration: none; } /* The brand line is set in the display serif, not the body face: it is the publication's statement of itself rather than UI copy, and it is the last piece of editorial voice on the page. */ .footer-brand__text { margin-top: 1.4rem; max-width: 34ch; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 400; line-height: 1.5; color: var(--on-dark-dim); text-wrap: pretty; } /* The italic close — this design's recurring gesture, in its last position on the page. Set on its own line and in the gold so it reads as a signature rather than as a trailing clause. */ .footer-brand__text em { display: block; margin-top: 0.5rem; font-style: italic; color: var(--gold-lift); } .footer-brand__cta { margin-top: 1.75rem; } /* ── Column headings ────────────────────────────────────────────────── The same wide-tracked gold label as every section head on the site. The leading rule the old build drew before each one is gone with all the others: there is ONE label treatment in this design now. */ .footer-col__heading { margin: 0 0 1.5rem; font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-lift); } /* ── The beat list ──────────────────────────────────────────────────── A plain list with a small gold bullet, exactly as the reference sets its services. The chips this replaces were bordered filled boxes that read as a row of buttons; at footer scale, anything with an edge on it outranks the heading above it. */ .footer-list { display: flex; flex-direction: column; gap: 0.55rem; } .footer-list a { display: inline-flex; align-items: baseline; gap: 0.65rem; color: var(--on-dark-dim); font-size: var(--fs-small); line-height: 1.4; text-decoration: none; transition: color var(--speed) var(--ease); } .footer-list a::before { content: ""; flex: none; width: 4px; height: 4px; /* Nudged up onto the x-height: aligned to the baseline a square bullet sits under the text rather than beside it. */ transform: translateY(-0.28em); background: var(--gold-lift); } .footer-list a:hover, .footer-list a:focus-visible { color: var(--on-dark); } /* ── The standards list ─────────────────────────────────────────────── Ruled between rows rather than bulleted — these are statements, not destinations, and a bullet would make them look like links. */ .footer-notes { display: flex; flex-direction: column; gap: 0; } /* The rule is drawn to the TEXT's measure rather than to the column's. A hairline that carries on past the last word into empty space reads as a table that lost its other cells. */ .footer-notes li { max-width: 36ch; padding-block: 0.7rem; border-top: 1px solid rgba(245, 241, 232, 0.12); color: var(--on-dark-dim); font-size: var(--fs-small); line-height: 1.5; } .footer-notes li:first-child { border-top: 0; padding-top: 0; } .footer-contact { display: inline-block; margin-top: 1.4rem; color: var(--gold-lift); font-size: var(--fs-small); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line-gold); padding-bottom: 2px; transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease); } .footer-contact:hover, .footer-contact:focus-visible { color: #fff; border-bottom-color: var(--gold-lift); } /* ── The base bar ───────────────────────────────────────────────────── One centred line, as the reference sets it. The old build split it left and right, which on a page whose every other row is centred was the last thing still pulling to the edges. */ .footer-base { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; padding-block: 1.75rem; border-top: 1px solid rgba(245, 241, 232, 0.12); text-align: center; } .footer-copy { margin: 0; color: var(--on-dark-dim); font-size: var(--fs-micro); line-height: 1.6; } .footer-legal__menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.5rem; } .footer-legal__menu a { color: var(--on-dark-dim); font-size: var(--fs-micro); text-decoration: none; transition: color var(--speed) var(--ease); } .footer-legal__menu a:hover, .footer-legal__menu a:focus-visible { color: var(--gold-lift); text-decoration: underline; text-underline-offset: 0.3em; } /* ── 11. Archive / category ─────────────────────────────────────────────── */ /* The head brings its own rhythm and always sits inside a band, so it adds nothing at the top (the band's padding is already there) and only a closing gap at the bottom. Stacking both left a screen of dead cream above every archive title. */ .page-head { padding-block: 0 clamp(1.25rem, 2.5vw, 2rem); } /* The same label as every other one in the design: wide-tracked gold capitals, no leading rule. The archive head stays LEFT aligned — it introduces the column of results beneath it rather than a full-width band — but it uses the shared label treatment rather than a variant. */ .page-head__eyebrow { display: block; margin-bottom: 0.9rem; color: var(--gold); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1.4; } .page-head__eyebrow::before { content: none; } .page-head__title { margin: 0; max-width: 20ch; font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--fs-h1); font-weight: 400; line-height: 1.08; letter-spacing: var(--track-claim); text-wrap: balance; } .page-head__text { margin-top: 1rem; max-width: 56ch; color: var(--ink-400); font-size: var(--fs-lead); line-height: 1.6; } /* The gap is much wider than the blue build's --gap. These cards no longer have a border, so the space between them is the only thing separating one from the next; at the old tile spacing they run together into a field. */ .archive-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1.75rem, 3vw, 2.75rem); } /* ── Pagination ───────────────────────────────────────────────────────── */ .pagination { display: flex; justify-content: center; margin-top: clamp(2.5rem, 5vw, 4rem); } .pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .pagination .page-numbers { display: grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding-inline: 0.75rem; border-radius: var(--r-pill); color: var(--ink-300); font-size: var(--fs-meta); font-weight: 500; text-decoration: none; transition: background var(--speed) var(--ease), color var(--speed) var(--ease); } .pagination .page-numbers:hover { background: var(--signal-tint); color: var(--signal-deep); } .pagination .page-numbers.current { background: var(--accent); color: #fff; } /* ── 12. Single post ────────────────────────────────────────────────────── */ /* The article head runs the FULL width of its band rather than being held to a text measure. A headline is display type, not reading type: at 46rem a long one broke to three or four short lines with a wide empty channel beside it, which read as a column that had failed to fill rather than as a deliberate measure. The standfirst below it keeps its own measure, so the prose is still set to a comfortable line length. */ .post-head { padding-block: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2rem); max-width: none; } .post-head__title { margin: 0.75rem 0 0; font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--fs-h1); font-weight: 500; line-height: 1.08; letter-spacing: var(--track-claim); /* Capped in characters rather than rems, and set wide: display type takes a longer line than prose does, so this is high enough that an ordinary headline runs one or two lines across the band, and low enough that a very long one still turns rather than running the full 1280px. */ max-width: 34ch; text-wrap: balance; } /* The standfirst is prose, so it keeps a reading measure even though the headline above it no longer does. */ .post-head__standfirst { margin-top: 1.1rem; max-width: 58ch; color: var(--ink-400); font-size: var(--fs-lead); line-height: 1.6; } .post-hero { margin-bottom: clamp(2rem, 4vw, 3rem); border-radius: var(--r-plate); overflow: hidden; background: var(--surface-sink); aspect-ratio: 16 / 9; } .post-hero img { width: 100%; height: 100%; object-fit: cover; } /* ── The byline ───────────────────────────────────────────────────────── */ .byline { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--ink-400); font-size: var(--fs-meta); } .byline__avatar { width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%; object-fit: cover; } .byline--lg .byline__avatar { width: 2.75rem; height: 2.75rem; } .byline--plain .byline__avatar { display: none; } .byline__stack { display: flex; flex-direction: column; gap: 0.05rem; } .byline__name { color: var(--ink); font-weight: 600; } .byline__role { color: var(--ink-500); font-size: var(--fs-micro); } .byline__sep { opacity: 0.4; } .meta-row { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink-500); font-size: var(--fs-meta); } .card__sep { opacity: 0.4; } /* ── The article body ───────────────────────────────────────────────── The one place on the site with a long measure. Serif headings step down inside it; body copy stays Inter, because a full article set in a display serif is a magazine affectation rather than a reading improvement. */ .entry-content { max-width: var(--measure); font-size: 1.0625rem; line-height: 1.75; color: var(--ink-200); } .entry-content > * + * { margin-top: 1.4em; } .entry-content h2, .entry-content h3, .entry-content h4 { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 500; line-height: 1.2; letter-spacing: var(--track-tight); color: var(--ink); margin-top: 2.2em; text-wrap: balance; } .entry-content h2 { font-size: 1.75rem; } .entry-content h3 { font-size: 1.4rem; } .entry-content h4 { font-size: 1.18rem; } .entry-content a { color: var(--accent); text-decoration-color: var(--signal-tint); text-decoration-thickness: 2px; } .entry-content a:hover, .entry-content a:focus-visible { text-decoration-color: currentColor; } .entry-content ul, .entry-content ol { padding-left: 1.3em; } .entry-content ul { list-style: disc; } .entry-content ol { list-style: decimal; } .entry-content li + li { margin-top: 0.5em; } .entry-content li::marker { color: var(--accent); } .entry-content img, .entry-content figure img { border-radius: var(--r-img); } .entry-content figcaption { margin-top: 0.6rem; color: var(--ink-500); font-size: var(--fs-meta); } .entry-content blockquote { padding: 1.4rem 1.6rem; border-radius: var(--r-img); background: var(--signal-wash); font-family: var(--font-display); font-size: 1.25rem; line-height: 1.4; letter-spacing: var(--track-tight); color: var(--signal-deep); } .entry-content blockquote p + p { margin-top: 0.6em; } .entry-content hr { height: 1px; border: 0; background: var(--line); margin-block: 2.5em; } .entry-content code { padding: 0.15em 0.4em; border-radius: 5px; background: var(--surface-sink); font-size: 0.9em; } .entry-content pre { padding: 1.2rem 1.35rem; border-radius: var(--r-img); background: var(--ink); color: var(--ground); overflow-x: auto; } .entry-content pre code { padding: 0; background: none; color: inherit; } .entry-content table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); } .entry-content th, .entry-content td { padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--line); text-align: left; } .entry-content th { font-weight: 600; color: var(--ink); } /* ── Share row ────────────────────────────────────────────────────────── */ .share-row { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; } .share-row__label { margin-right: 0.2rem; color: var(--ink-500); font-size: var(--fs-meta); } .share-row__link { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--surface-sink); color: var(--ink-300); transition: background var(--speed) var(--ease), color var(--speed) var(--ease); } .share-row__link svg { width: 1.05rem; height: 1.05rem; fill: currentColor; } .share-row__link:hover, .share-row__link:focus-visible { background: var(--accent); color: #fff; } /* ── 13. Static page ────────────────────────────────────────────────────── */ .page-content { max-width: var(--measure); } /* ── 14. Thank-you / 404 ────────────────────────────────────────────────── */ .notice-page { display: grid; place-items: center; min-height: 52vh; padding-block: clamp(3rem, 8vw, 6rem); text-align: center; } .notice-page__inner { max-width: 34rem; } .notice-page__mark { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin: 0 auto 1.5rem; border-radius: 50%; background: var(--signal-tint); color: var(--accent); } .notice-page__mark svg { width: 2rem; height: 2rem; } .notice-page__title { margin: 0; font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--fs-h1); font-weight: 500; line-height: 1.1; letter-spacing: var(--track-claim); } .notice-page__text { margin-top: 1rem; color: var(--ink-400); font-size: var(--fs-lead); line-height: 1.6; } .notice-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; } /* ── 15. Forms ────────────────────────────────────────────────── The search field's styles lived here. There is no search on this site — st_disable_search() closes the endpoint and filters get_search_form() to an empty string — so the rules had nothing left to style and are gone. The newsletter opt-in is the only form the theme ships, and it carries its own stylesheet at inc/optin-form/optin-form.css. */ /* ── 16. Utilities, motion, print ───────────────────────────────────────── */ .site-main { display: block; } /* Reveal-on-scroll. main.js adds .is-in once an element enters the viewport; without scripting the .no-js body rule below leaves everything visible, so content is never hidden behind a script that failed to load. */ .reveal { opacity: 0; transform: translateY(12px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); } .reveal.is-in { opacity: 1; transform: none; } body.no-js .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .card:hover, .topiccard:hover, .guide:hover, .collage__item:hover { transform: none; } } @media print { .site-header, .site-footer, .sidebar, .share-row, .read-progress, .hero__collage, .signal { display: none !important; } body { background: #fff; color: #000; } .entry-content { max-width: none; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; } } /* ── 17. Single-post furniture ──────────────────────────────────────────── Added after the section rewrite: the pieces the article template uses that are not shared with any listing. Kept together at the end rather than scattered into sections 11–14, so the article page's own vocabulary is in one place. */ .post-head__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .post-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); } .post-head__facts { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink-500); font-size: var(--fs-meta); } /* The article body's own max-width is set by .entry-content; the head above it spans the full band. */ .single-article .post-head { max-width: none; padding-bottom: clamp(1.5rem, 3vw, 2rem); } .single-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 2.5rem; } .single-tags__label { margin-right: 0.25rem; color: var(--ink-500); font-size: var(--fs-meta); } /* WordPress prints tag links bare, so they are styled by element here rather than by a class the template controls. */ .single-tags a { display: inline-block; padding: 0.3rem 0.75rem; border-radius: var(--r-pill); background: var(--surface-sink); color: var(--ink-300); font-size: var(--fs-micro); text-decoration: none; transition: background var(--speed) var(--ease), color var(--speed) var(--ease); } .single-tags a:hover, .single-tags a:focus-visible { background: var(--accent); color: #fff; } .single-share { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); } /* ── Previous / next ────────────────────────────────────────────────── Two plates, the second right-aligned so the pair reads as a spread. */ .postnav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: 2.5rem; } .postnav__item { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 1.25rem; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shade); text-decoration: none; transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease); } .postnav__item:hover, .postnav__item:focus-visible { transform: translateY(-2px); box-shadow: var(--shade-lift); } /* A lone "next" sits in the right-hand column rather than drifting left. */ .postnav__item--next { grid-column: 2; text-align: right; } .postnav__label { color: var(--lav); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0; } .postnav__title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; line-height: 1.25; letter-spacing: var(--track-tight); color: var(--ink); } .postnav__item:hover .postnav__title { color: var(--accent); } @media (max-width: 620px) { .postnav { grid-template-columns: 1fr; } .postnav__item--next { grid-column: 1; text-align: left; } } /* ── Notice pages ─────────────────────────────────────────────────────── */ .notice-page__note { margin-top: 1rem; color: var(--ink-500); font-size: var(--fs-meta); line-height: 1.6; } /* The confirmation tick is the one place sage appears outside a topic dot — it is the colour of a completed action, not of a link. */ .notice-page__mark--ok { background: var(--signal-wash); color: var(--moss); } /* ── Page-level spacing ─────────────────────────────────────────────── These templates own their own head spacing, so the band's default block padding would double it. */ .page-band > .band__inner, .page-main .page-head { padding-top: 0; } .page-band .page-head { padding-top: clamp(2.5rem, 5vw, 4rem); } .listing > .band__inner { padding-top: 0; } /* The head band above a listing closes with the head's own padding, so the band adds none. Keyed off a class rather than :has(), whose support is not universal enough to hang layout on. */ .band--head > .band__inner { padding-bottom: 0; } /* The article starts close under the masthead. The band's default --band-y is sized for a front-page section with a rule above it; on an article there is nothing above the headline, so a full band's worth of space just pushed the story down the screen. */ .layout--single > .band__inner { padding-top: clamp(1.75rem, 3vw, 2.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); } .related > .band__inner { padding-top: 0; }