/* Theme Name: Lovable Atmosphere — Sevenality Theme URI: https://sevenality.com Description: Sevenality's site-specific child of Lovable Atmosphere. Holds only what is genuinely Sevenality: the brand marble textures, the Adobe Fonts (Typekit) loader for prenton / utopia-std-headline, the brand pattern set, and the brand token overrides in theme.json. Everything else is inherited from the canonical parent so it stays in sync. Author: Sevenality Template: lovableatmosphere Version: 2.17.1 Requires at least: 6.5 Requires PHP: 7.4 Text Domain: lovableatmosphere-sevenality */ /* ───────────────────────────────────────────────────────────── INK ON DARK Four steps. The stylesheet carried TWELVE distinct alphas of white — .42 .45 .5 .6 .62 .7 .72 .74 .78 .82 .85 — all doing one job: dimming text on a dark ground. Nobody can distinguish 72% white from 74% white; they are two decisions where the reader perceives one. Mapped so no existing value moves by more than .07, which is below the threshold where a tonal step reads as a change rather than as the same colour. NOT INCLUDED, deliberately: the per-project accent. That is computed per case study from the client's own artwork (see lib/project-accent.php) and is supposed to differ on every page — it is art direction, not drift. ───────────────────────────────────────────────────────────── */ :root{ --ink-on-dark : #fff; --ink-on-dark-soft : rgba(255,255,255,.78); --ink-on-dark-dim : rgba(255,255,255,.66); --ink-on-dark-faint : rgba(255,255,255,.5); /* .45 measured 4.47:1 on the #1a1a1a philanthropy band — a 0.03 miss. .5 clears it. */ --sev-blue-light : #80ABD7; --sev-blue-deep : #0c3d5d; --sev-black : #0d0d0d; } /* ───────────────────────────────────────────────────────────── SPACING SCALE Two scales, because this theme legitimately spaces two ways: static component padding, and section rhythm that grows with the viewport. Before this there were 26 distinct static values between .15rem and 2.25rem — including .3, .35, .4 and .45 as four separate decisions — and 71 distinct fluid clamps. Nine of those 71 were pairs identical apart from whitespace, e.g. clamp(2rem,4vw,3rem) used 12x clamp(2rem, 4vw, 3rem) used 3x the same value authored twice because nobody could look it up. ───────────────────────────────────────────────────────────── */ :root{ /* static — nearest-step mapping */ --s-3xs : .25rem; --s-2xs : .375rem; --s-xs : .5rem; --s-sm : .75rem; --s-md : 1rem; --s-lg : 1.25rem; --s-xl : 1.5rem; --s-2xl : 2rem; --s-3xl : 3rem; --s-4xl : 4rem; /* fluid — section rhythm, mapped by ceiling */ --sp-1 : clamp(.75rem, 1.5vw, 1.25rem); --sp-2 : clamp(1rem, 2vw, 1.75rem); --sp-3 : clamp(1.5rem, 3vw, 2.5rem); --sp-4 : clamp(2rem, 4vw, 3.5rem); --sp-5 : clamp(3rem, 6vw, 5rem); --sp-6 : clamp(4rem, 8vw, 7rem); --sp-7 : clamp(5rem, 12vw, 10rem); } /* ───────────────────────────────────────────────────────────── TYPE SCALE Ten steps. Before this the four main surfaces rendered 36 distinct sizes between them, including EIGHT inside a 7px band (9,10,11,12,13,14,15,16) and THIRTEEN display clamps each used exactly once — two of which were byte-identical apart from whitespace: clamp(2rem,1.3rem + 3.2vw,4rem) clamp(2rem, 1.3rem + 3.2vw, 4rem) That is the definition of no system: the same decision made twice, independently, and stored twice. Steps are mapped by clamp CEILING, because the ceiling is what a reader meets on a desktop and what the hierarchy is judged on. ───────────────────────────────────────────────────────────── */ :root{ /* ── The parent's editorial ramp, mapped onto ours ────────────────────── The parent theme owns the NAMES (--atm-t-*) and its blog components reference nothing else. This is where this site supplies the VALUES. Before this, /ideas/ — the posts page, and a primary surface on a site positioned around writing — rendered in the parent's own sizes and sat outside the ramp everything else here uses. Now the blog is typeset in the same eleven steps as the homepage, and gflidev keeps its own. */ --atm-t-hero : var(--t-h1); --atm-t-display : var(--t-h2); --atm-t-title : var(--t-h3); --atm-t-lead : var(--t-lead); --atm-t-body : var(--t-body); --atm-t-small : var(--t-small); --atm-t-meta : var(--t-meta); --atm-t-micro : var(--t-micro); --t-micro : .625rem; /* 10px — eyebrows, chip labels */ --t-meta : .75rem; /* 12px — meta, counts, captions */ --t-small : .875rem; /* 14px — secondary UI */ --t-body : 1rem; /* 16px — NOT the document body. Named badly and worth stating: the page's reading size is 21px, set by the parent's styles.typography. fontSize clamp. This is a COMPONENT step used in 9 places (buttons, stat labels, definition lists). Use --t-lead, or the `read` font-size preset, for anything a reader reads at length. */ --t-lead : clamp(1.0625rem, 1rem + .45vw, 1.3125rem); /* 17 → 21 — standfirsts. Ceiling deliberately 21px, not 22: the parent theme already sets body and links at 21px in 81 places. A 22px step would have been a second size nobody could tell apart from the first. Meet the rhythm that is already there rather than add to it. */ --t-h4 : clamp(1.25rem, 1rem + 1.4vw, 2rem); /* 20 → 32 */ --t-h3 : clamp(1.6rem, 1.2rem + 2.2vw, 2.75rem); /* 26 → 44 */ --t-statement: clamp(1.75rem, 1.1rem + 2.6vw, 4rem); /* 28 → 55 — the section-opening statement. A REAL step, not drift: it was already hand-authored twice on the homepage ("A brand is a coherence problem", "Tell us what's keeping you up at night") and it sits between the hero at 96 and sub-heads at 44. Snapping it either way would have collapsed two levels into one. */ --t-h2 : clamp(2rem, 1.4rem + 3.4vw, 4rem); /* 32 → 64 */ --t-h1 : clamp(2.5rem, 1.5rem + 5.4vw, 6rem); /* 40 → 96 */ --t-mega : clamp(3.25rem, 1.5rem + 8vw, 9rem); /* the one display size */ } /* * Keep this file minimal. Brand tokens belong in theme.json; this holds only * what theme.json provably cannot win. * * WHY THESE RULES EXIST: * theme.json `styles.typography.fontFamily` emits a global-styles rule for * body, but the parent ships a COMPILED stylesheet (build/theme-styles.css) * that also sets `body { font-family: ... }`. That bundle is enqueued as a * real stylesheet and lands after global styles, so it wins on cascade order * and the body silently rendered in Hanken Grotesk. * * The visible symptom was subtle and worth remembering: `prenton` reported as * `unloaded` in document.fonts. Browsers only fetch a webfont when something * actually matches it — because the parent's rule kept winning, Prenton was * never requested at all. The font wasn't broken; nothing was asking for it. * * The child stylesheet declares a dependency on `theme-styles` (see * functions.php), so these rules load after the parent's and take effect. */ body { font-family: var(--wp--preset--font-family--sans); font-weight: 300; } /* ============================================================ WIDTH INTENT One system, replacing three copy-pasted versions of the same three rules (About, Philanthropy and Press each carried their own). ============================================================ THE PROBLEM THIS SOLVES Every pattern root is a constrained layout, so WordPress emits :where(.is-layout-constrained) > :where(:not(.alignfull)...) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; } against every direct child. Two consequences, both measured: 1. Sections cap at contentSize (46rem / 736px) even when they hold a grid that needs the whole band. Philanthropy's Writing section was still doing this — 736px wide at left=352 while every sibling ran 1380px at left=30 — because `.sp-arts-sec` was left out of that pattern's hand-written band list. 2. Each child re-centres on ITS OWN measure, so a single section had left edges at 30, 352, 355 and 468px: four starting points. WHY EVERY SELECTOR HERE DOUBLES ITS CLASS WordPress's own rule is :where()-wrapped and therefore beatable by a single class. The PARENT THEME IS NOT. lovableatmosphere ships a deliberate, un-:where()'d override in src/css/theme/layout.scss (compiled into build/theme-styles.css, documented in its docs/WORDPRESS-CONSTRAINED-LAYOUT.md): .wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; } Two classes, so (0,2,0). A single-class `.sev-band` at (0,1,0) loses to it outright — confirmed against the live cascade via CSS.getMatchedStylesForNode, which showed `.sev-band` matching and still computing to 736px. Doubling the class makes these (0,2,0), which ties, and the child stylesheet is enqueued with `theme-styles` as a dependency so it resolves later and wins. That is the same mechanism the hand-written `.sevenality-phil > .sp-hero` rules further down already rely on. Note that specificity decides between !important declarations too, which is why the margin rule needs the doubled class AND the !important: it is competing with `margin-left: auto !important` at (0,2,0). USAGE .sev-band a section: holds contents to the wide measure and makes every child start at the same left edge .sev-fill a child that manages its own grid; fills the band .sev-mid a child at the bridging measure .sev-prose a child at the reading measure Prose that already carries a `ch`-based max-width (headings at 18ch, notes at 52ch) needs none of these. A `ch` measure is a typographic decision and should outrank a layout default — the audit found most 736px boxes on About and Press were micro-labels and ch-measured headings, which are correct as they stand. Reach for an intent only where an element would otherwise inherit contentSize by accident. */ :root { --sev-w-prose: var(--wp--style--global--content-size, 46rem); /* 736px - reading measure */ --sev-w-mid: 68rem; /* 1088px - bridge */ --sev-w-wide: var(--wp--style--global--wide-size, 86.25rem); /* 1380px - full band */ } .sev-band.sev-band { max-width: var(--sev-w-wide); width: 100%; margin-inline:auto; } /* Every child starts at the band's left edge rather than centring on its own width. See the !important note above for why this needs the weight. */ .sev-band.sev-band > * { margin-inline: 0 !important; } .sev-band.sev-band .sev-fill { max-width: none; width: 100%; } .sev-band.sev-band > .sev-mid { max-width: var(--sev-w-mid); } .sev-band.sev-band > .sev-prose { max-width: var(--sev-w-prose); } /* ============================================================ PATTERN STYLES Only what block attributes cannot express: the index layout, the shared row device, and the quote band stage. ============================================================ */ /* ---------- Work index ---------- */ .sevenality-index__layout { display: grid; grid-template-columns: 1fr; gap:var(--sp-3); } @media (min-width: 960px) { .sevenality-index__layout { grid-template-columns: repeat(12, 1fr); gap:var(--sp-4); } /* panel LEFT and sticky — the image anchors while the names scroll past */ .sevenality-index__panel { grid-column: 1 / span 5; position: sticky; top: clamp(4rem, 12vh, 7rem); align-self: start; } /* centre the names against the panel so neither leaves a dead quadrant */ .sevenality-index__rows { grid-column: 7 / span 6; align-self: center; } } .sevenality-index__panel { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #161616; } .sevenality-index__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; } /* first image is visible before hydration, so the panel is never empty */ .sevenality-index__panel img:first-child, .sevenality-index__panel img.is-active { opacity: 1; } /* once a choice is made, only the active one shows */ .sevenality-index__panel:has(img.is-active) img:first-child:not(.is-active) { opacity: 0; } /* ---------- the shared row device (index + ideas) ---------- */ .sevenality-row { display: grid; grid-template-columns: auto 1fr auto; gap:var(--s-xs) var(--sp-1); align-items: baseline; padding-block:var(--sp-2); border-block-start: 1px solid rgba(255, 255, 255, .16); text-decoration: none; transition: opacity .3s ease; } .sevenality-row:last-child { border-block-end: 1px solid rgba(255, 255, 255, .16); } /* dim the set, light the one — hierarchy without weight, and no JS needed */ .sevenality-index__rows:hover .sevenality-row, .sevenality-ideas__rows:hover .sevenality-row { opacity: .32; } .sevenality-index__rows .sevenality-row:hover, .sevenality-index__rows .sevenality-row:focus-visible, .sevenality-ideas__rows .sevenality-row:hover, .sevenality-ideas__rows .sevenality-row:focus-visible { opacity: 1; } .sevenality-row__num { font-family: var(--wp--preset--font-family--sans); font-size:var(--t-micro); letter-spacing: .2em; color:var(--sev-blue-light); } .sevenality-row__name { font-family: var(--wp--preset--font-family--display); font-size:var(--t-h3); line-height: 1.05; letter-spacing: -.02em; color:var(--ink-on-dark); } .sevenality-row__meta { font-family: var(--wp--preset--font-family--sans); font-weight: 300; font-size:var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color:var(--ink-on-dark-faint); text-align: right; } /* ---------- Services brief (homepage) ---------- Three lines stated plainly. Not the hub's full acts — see the pattern docblock for why that would have been several thousand pixels of repeat. */ .sevenality-svcbrief .svb-head__row { display: flex; align-items: baseline; justify-content: space-between; gap:var(--s-xl); padding-block-end:var(--s-md); border-block-end: 1px solid var(--sev-rule); margin-block-end:var(--sp-3); } .sevenality-svcbrief .svb-micro { font-family: var(--wp--preset--font-family--sans); font-size:var(--t-micro); letter-spacing: .24em; text-transform: uppercase; color: var(--sev-accent); margin:0; } .sevenality-svcbrief .svb-all { white-space: nowrap; font-family: var(--wp--preset--font-family--sans); font-size:var(--t-meta); letter-spacing: .06em; color: inherit; text-decoration: none !important; border-bottom: 1px solid var(--sev-rule); padding-bottom:var(--s-3xs); } .sevenality-svcbrief .svb-all:hover { border-color: var(--sev-accent); color: var(--sev-accent); } /* Four programs, not three disciplines — see patterns/services-brief.php for why the band changed axis. Two rows of two rather than four thin columns: at 1560px a quarter column is ~360px, and the situation lines run to two words short of wrapping badly in it. */ .sevenality-svcbrief .svb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:var(--sp-3) var(--sp-4); } @media (max-width: 860px) { .sevenality-svcbrief .svb-grid { grid-template-columns: minmax(0, 1fr); } } .sevenality-svcbrief .svb-line { display: grid; gap:var(--s-xs); align-content: start; padding-block-start:var(--s-md); border-block-start: 1px solid var(--sev-rule); color: inherit; text-decoration: none !important; transition: opacity .3s ease; } /* Same dim-the-set, light-the-one hierarchy the row device uses. Weight is not available in this type kit, so opacity does the work. */ .sevenality-svcbrief .svb-grid:hover .svb-line { opacity: .35; } .sevenality-svcbrief .svb-line:hover, .sevenality-svcbrief .svb-line:focus-visible { opacity: 1; } .sevenality-svcbrief .svb-line__n { font-family: var(--wp--preset--font-family--sans); font-size:var(--t-micro); letter-spacing: .2em; color: var(--sev-ink-dim); } .sevenality-svcbrief .svb-line__name { font-family: var(--wp--preset--font-family--display); font-size:var(--t-h4); line-height: 1.06; letter-spacing: -.02em; color: var(--sev-ink); } .sevenality-svcbrief .svb-line__d { font-family: var(--wp--preset--font-family--sans); font-weight: 300; font-size:var(--t-small); line-height: 1.6; color: var(--sev-ink-dim); max-width: 34ch; } .sevenality-svcbrief .svb-line__c { font-family: var(--wp--preset--font-family--sans); font-size:var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--sev-accent); font-variant-numeric: tabular-nums; margin-block-start:var(--s-2xs); } /* ---------- Philanthropy brief (homepage) ---------- One number, set large. The Philanthropy page owns the 40x40 marks grid; this takes the figure and not the device. */ .sevenality-philbrief .phb__micro { font-family: var(--wp--preset--font-family--sans); font-size:var(--t-micro); letter-spacing: .24em; text-transform: uppercase; color: var(--sev-accent); margin:0 0 var(--sp-3); padding-block-end:var(--s-md); border-block-end: 1px solid var(--sev-rule); } .sevenality-philbrief .phb__body { display: grid; gap:var(--sp-4); align-items: center; } @media (min-width: 900px) { /* `auto` for the numeral, not a percentage. A 42% column was narrower than "1,600" set at 13rem, so the figure ran straight over the heading beside it — a fixed fraction cannot know how wide a glyph string is. Letting the column size to its content and giving the text the remainder makes the overlap impossible rather than unlikely. */ .sevenality-philbrief .phb__body { /* Centred as a PAIR rather than pinned left. Capping the measure left ~460px of dead space to the right of the text while the figure sat hard against the left edge, so the band read as stranded rather than composed. `justify-content: center` on a max-content grid centres the figure and the copy together and lets the air fall on both sides. */ grid-template-columns: auto minmax(0, max-content); justify-content: center; gap: clamp(2rem, 5vw, 5.5rem); } } .sevenality-philbrief .phb__body > * { min-width: 0; } /* aria-hidden in the markup: the heading beside it already says "1,600 students", so a screen reader hearing the numeral twice would be reading the layout rather than the sentence. */ .sevenality-philbrief .phb__fig { font-family: var(--wp--preset--font-family--display); font-size:var(--t-mega); line-height: .82; letter-spacing: -.045em; color: var(--sev-accent); margin:0; font-variant-numeric: tabular-nums; } .sevenality-philbrief .phb__h { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size:var(--t-h3); line-height: 1.1; letter-spacing: -.02em; margin:0 0 var(--s-md); max-width: 22ch; } .sevenality-philbrief .phb__d { font-family: var(--wp--preset--font-family--sans); font-weight: 300; font-size:var(--t-body); line-height: 1.7; color: var(--sev-ink-dim); margin:0 0 var(--s-xl); max-width: 46ch; } .sevenality-philbrief .phb__go { font-family: var(--wp--preset--font-family--sans); font-size:var(--t-meta); letter-spacing: .14em; text-transform: uppercase; /* Was var(--sev-accent). This band spends its accent on the 1,600 — the one proof figure on the page, and the moment the whole band is built around — plus the micro label every band carries. A third kind put it past DESIGN.md principle 8, and this is the one the amendment does not cover: the permission is for a repeated link colour WITHIN a repeating element, which is the Ideas and Work card links. This is a lone link at the foot of a band. It keeps its underline and reads as a link without the tint. */ color: var(--sev-ink); text-decoration: none !important; border-bottom: 1px solid currentColor; padding-bottom:var(--s-3xs); } /* ---------- Ideas: featured writing ---------- Image-led cards at the same scale as the work rail's, because this section now sits ABOVE the work and has to be able to hold that position. Three up, equal columns — the count is known, so no auto-fit. */ .sevenality-ideas .svi-head__row { display: flex; align-items: baseline; justify-content: space-between; gap:var(--s-xl); padding-block-end:var(--s-md); border-block-end: 1px solid var(--sev-rule); margin-block-end:var(--sp-3); } .sevenality-ideas .svi-micro { font-family: var(--wp--preset--font-family--sans); font-size:var(--t-micro); letter-spacing: .24em; text-transform: uppercase; color: var(--sev-accent); margin:0; } .sevenality-ideas .svi-all { white-space: nowrap; font-family: var(--wp--preset--font-family--sans); font-size:var(--t-meta); letter-spacing: .06em; color: inherit; text-decoration: none !important; border-bottom: 1px solid var(--sev-rule); padding-bottom:var(--s-3xs); } .sevenality-ideas .svi-all:hover { border-color: var(--sev-accent); color: var(--sev-accent); } .sevenality-ideas .svi-h { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size:var(--t-h2); line-height: 1.04; letter-spacing: -.03em; margin:0 0 var(--sp-3); max-width: 18ch; } .sevenality-ideas .svi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:var(--sp-2); } @media (max-width: 900px) { .sevenality-ideas .svi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .sevenality-ideas .svi-grid { grid-template-columns: minmax(0, 1fr); } } /* The Programs band's lead — see patterns/services-brief.php. Set at the `statement` step (55px) rather than h2 (64px): this band opens a list, it does not open the page, and 55/32 puts its lead ratio at 1.7 alongside the other bands' 2.0–3.4 rather than above them. */ .sevenality-svcbrief .svb-h { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: var(--t-statement); line-height: 1.06; letter-spacing: -.02em; margin: var(--s-md) 0 0; max-width: 20ch; } /* The head row is core blocks now, so its children arrive with block margins. */ .sevenality-ideas .svi-head__row > p { margin: 0; } /* The grid is a core/post-template. Core ships it as a list; the reset kills the marker and padding so the existing grid rules apply unchanged. */ .sevenality-ideas .svi-grid { list-style: none; padding: 0; margin: 0; } /* The post-template also carries core's FLOW layout class, whose `> * + *` rule puts a block-start margin on every item after the first. In a flow list that is the block gap; inside this grid it silently drops cards two and three below card one. Measured rather than guessed: the li tops came back 1791.5 / 1811.5 / 1811.5 with margin-top 0px / 20px / 20px. */ .sevenality-ideas .svi-grid > li { margin: 0; } .sevenality-ideas .svi-card { display: flex; flex-direction: column; color: inherit; /* Anchor for the stretched link below. */ position: relative; } /* THE WHOLE CARD IS THE CLICK TARGET, from ONE link. The old markup wrapped every card in an , which is a big target but also an anchor containing a heading and a paragraph. Here only the title is a link — one link, one accessible name — and its ::after is stretched over the card to restore the target. */ .sevenality-ideas .svi-card__t a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* !important because the theme underlines links with !important; the old markup needed the same escape on its wrapping . */ .sevenality-ideas .svi-card__t a { color: inherit; text-decoration: none !important; } .sevenality-ideas .svi-card__media { display: block; overflow: hidden; background: var(--wkc-card, light-dark(#F1EEE9, rgba(255,255,255,.05))); margin-block-end:var(--s-md); position: relative; } /* core/post-featured-image writes the aspect ratio onto its own inner img when the aspectRatio attribute is set, so the ratio is not repeated here. */ .sevenality-ideas .svi-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .sevenality-ideas .svi-card:hover .svi-card__media img, .sevenality-ideas .svi-card:focus-within .svi-card__media img { transform: scale(1.04); } /* NO FEATURED IMAGE: the title becomes the art. A grey box would read as a broken card; type at scale reads as a decision — and this section is meant to lead with typography anyway. core/post-featured-image returns an EMPTY STRING when a post has no thumbnail — not an empty wrapper — so there is nothing in the DOM to detect directly. :has() asks the card whether an image ever arrived. This replaces a stand-in that repeated the title inside the media box under aria-hidden. The title now does both jobs while being rendered once, which is one fewer thing for a screen reader to skip past. */ .sevenality-ideas .svi-card:not(:has(.svi-card__media img)) .svi-card__t { /* Takes the media box's place in the column rather than sitting under an absent one, so a type card and an image card start at the same height. */ order: -1; aspect-ratio: 4 / 3; display: grid; align-content: end; padding:var(--sp-1); margin-block-end:var(--s-md); /* Was var(--sev-accent). The card already reads as art from the tinted ground and the display type filling a 4/3 box; setting the type in accent as well made this a THIRD kind of accent-marked thing in the band, past the two DESIGN.md principle 8 allows. The wash stays — a 12% tint fading to transparent is a ground, not a mark. */ color: var(--sev-ink); background: linear-gradient(160deg, color-mix(in srgb, var(--sev-accent) 12%, transparent), transparent 70%); /* A long unbroken word in a narrow column has nowhere to go; let it break rather than overflow. */ overflow-wrap: anywhere; hyphens: auto; /* The base rule clamps to three lines with -webkit-box, which is for a title sitting UNDER art. Here the title IS the art and has a 4/3 box to fill, so `display: grid` above both lays it out and drops the clamp. */ } .sevenality-ideas .svi-card__t { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size:var(--t-h4); line-height: 1.1; letter-spacing: -.02em; /* Three lines, then ellipsis. One post title here runs to five lines while its neighbours take two, which left the standfirsts starting at three different heights and the row reading as broken rather than editorial. The full title is still the link's accessible name. */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; /* core/post-title is an

and arrives with heading margins. */ margin: 0; } .sevenality-ideas .svi-card:hover .svi-card__t, .sevenality-ideas .svi-card:hover .svi-card__t a { color: var(--sev-accent); } .sevenality-ideas .svi-card__date { font-family: var(--wp--preset--font-family--sans); font-size:var(--t-meta); letter-spacing: .06em; color: var(--sev-ink-dim); margin:0 0 var(--s-2xs); } .sevenality-ideas .svi-card__d { font-family: var(--wp--preset--font-family--sans); font-size:var(--t-small); line-height: 1.55; color: var(--sev-ink-dim); margin-block-start:var(--s-xs); max-width: 34ch; } /* core/post-excerpt wraps its text in its own

, which the hand-written markup did not have. Without this the card gains a paragraph's worth of space it was never designed to carry. */ .sevenality-ideas .svi-card__d p { margin: 0; } .sevenality-ideas .svi-card__go { margin-block-start:auto; margin-block-end:0; padding-block-start:var(--s-md); font-family: var(--wp--preset--font-family--sans); font-size:var(--t-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--sev-accent); } /* The band renders as a heading over nothing once the seeded test posts are removed and before the first real POV is published. Say so rather than leave a hole. */ .sevenality-ideas .svi-empty { font-family: var(--wp--preset--font-family--sans); font-size:var(--t-small); color: var(--sev-ink-dim); margin: 0; } @media (prefers-reduced-motion: reduce) { .sevenality-ideas .svi-card__media img { transition: none; } .sevenality-ideas .svi-card:hover .svi-card__media img { transform: none; } } /* MODIFIER: a figure in the middle of the row. The base device stays `auto 1fr auto` for the work index; this adds a fourth column so the count sits between the name and the label instead of the row running on empty. Set in the display face at a readable size — it is a fact about what is behind the link, not a caption, and at eyebrow size it would read as decoration. */ .sevenality-row--counted { grid-template-columns: auto 1fr auto auto; } .sevenality-row__count { font-family: var(--wp--preset--font-family--display); font-size:var(--t-lead); line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; } @media (max-width: 560px) { .sevenality-row { grid-template-columns: auto 1fr; } .sevenality-row__meta { grid-column: 2; text-align: left; } /* Two columns on a phone: the count drops under the name and the label sits beside it, rather than four columns crushing into a stack of fragments. */ .sevenality-row--counted { grid-template-columns: auto 1fr; } .sevenality-row__count { grid-column: 2; } } /* ---------- Quote band ---------- */ .sevenality-qband__stage { position: relative; margin-block-start:var(--sp-3); } .sevenality-qslide { display: grid; grid-template-columns: 1fr; gap:var(--sp-3); margin:0; opacity: 0; visibility: hidden; position: absolute; inset-block-start: 0; inset-inline: 0; transition: opacity .5s ease; } /* first slide visible pre-hydration so the band is never blank */ .sevenality-qslide:first-child { opacity: 1; visibility: visible; position: relative; } .sevenality-qband__stage:has(.is-current) .sevenality-qslide:first-child:not(.is-current) { opacity: 0; visibility: hidden; position: absolute; } .sevenality-qslide.is-current { opacity: 1; visibility: visible; position: relative; } @media (min-width: 900px) { .sevenality-qslide { grid-template-columns: repeat(12, 1fr); align-items: start; } .sevenality-qslide__text { grid-column: 1 / span 8; } /* THE ATTRIBUTION BELONGS TO THE QUOTE. It used to sit at columns 10–12 with `align-items: start`, which aligned it to the top of the GRID ROW rather than to anything in the quote — measured at 75.1% from the left while the quote ended around 66%, and starting 3% ABOVE the quote's own first line, with column 9 as an empty gutter between them. It read as a floating label rather than as a name attached to words. Underneath, on the quote's own left edge, is the plain reading of "someone said this". */ .sevenality-qslide__cite { grid-column: 1 / span 8; } } /* A short rule marks the hand-off from the words to whose words they are. */ .sevenality-qslide__cite::before { content: ""; display: block; inline-size: 2.5rem; block-size: 1px; background: currentColor; opacity: .3; margin-block-end: var(--s-md); } .sevenality-qslide__text { font-family: var(--wp--preset--font-family--serif-text); font-size:var(--t-h4); line-height: 1.36; color:var(--ink-on-dark); margin:0; text-wrap: pretty; } .sevenality-qslide__cite { font-style: normal; padding-block-start:var(--s-xs); } .sevenality-qslide__name { display: block; font-family: var(--wp--preset--font-family--sans); font-size:var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color:var(--sev-blue-light); font-style: normal; } .sevenality-qslide__org { display: block; font-family: var(--wp--preset--font-family--sans); font-weight: 300; font-size:var(--t-meta); color:var(--ink-on-dark-faint); margin-block-start:var(--s-2xs); } /* Arrows sit either side of the indicators on one row. The dots keep their own top margin, so the row takes none — otherwise the two stack up and the band grows a dead strip under the quote. */ .sevenality-qnav { display: flex; align-items: center; gap:var(--s-md); } .sevenality-qarrow { inline-size: 2.25rem; block-size: 2.25rem; margin-block-start:var(--sp-4); display: grid; place-items: center; padding:0; background: transparent; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; color:var(--ink-on-dark-dim); cursor: pointer; transition: border-color .25s ease, color .25s ease; } .sevenality-qarrow svg { inline-size: 1rem; block-size: 1rem; } .sevenality-qarrow:hover { border-color:var(--ink-on-dark-dim); color:var(--ink-on-dark); } .sevenality-qarrow:focus-visible { outline: 2px solid #80ABD7; outline-offset: 2px; } .sevenality-qdots { display: flex; gap:var(--s-sm); margin-block-start:var(--sp-4); } /* * The indicator is a 2px rule with a 44px hit area. * * The parent enforces `min-height: 44px` on buttons — the WCAG minimum touch * target — which was squaring these off. That rule is right and should not be * overridden: a 2px-tall button is a 2px tap target. So the BUTTON keeps its * full 44px and stays transparent, and a pseudo-element draws the visible * rule centred inside it. Design and hit area are decoupled. */ .sevenality-qdot { width: 3rem; min-height: 44px; padding:0; border: 0; cursor: pointer; background: transparent; display: flex; align-items: center; } .sevenality-qdot::before { content: ""; display: block; width: 100%; height: 2px; background: rgba(255, 255, 255, .22); transition: background .3s ease; } .sevenality-qdot:hover::before, .sevenality-qdot:focus-visible::before { background: rgba(255, 255, 255, .5); } .sevenality-qdot.is-current::before { background: #fff; } @media (prefers-reduced-motion: reduce) { .sevenality-index__panel img, .sevenality-qslide, .sevenality-row, .sevenality-qdot::before { transition: none; } } /* * Pinned method section — paint the scroll distance. * * A pinned block is lifted out of flow, leaving the generated * `.lvbl-pin-spacer` holding only its scroll height. The spacer is * transparent, so the theme's warm cream body (#fff8f2) showed through for * the whole 460vh the method section occupies — a huge pale gap between two * dark sections, visible on any fast scroll or if the pin fails. * * Paint the spacer that contains this section, scoped with :has() so other * pinned sections can carry their own colour. */ .lvbl-pin-spacer:has(> .sevenality-method) { background-color:var(--sev-blue-deep); } /* ============================================================ HERO — LAYERED MARBLE DEPTH Depth from three planes of the SAME image, not three images: the file is already cached, so the extra layers cost no requests and no bytes. Each plane drifts at a different rate, which is what reads as depth when the page is static, while the plugin's bg-parallax handles depth on scroll. ============================================================ */ .sevenality-hero { position: relative; isolation: isolate; /* keep blend modes off the page behind */ } /* Plane 1 — the core cover image. Slow, wide drift. */ .sevenality-hero .wp-block-cover__image-background { transform-origin: 52% 48%; will-change: transform; animation: sevenality-drift-a 46s ease-in-out infinite alternate; } /* Plane 2 — same marble, larger and softer, drifting the OTHER way. Counter-motion is what sells parallax; matched motion just looks like one moving photo. */ .sevenality-hero::before { content: ""; position: absolute; inset: -8%; z-index: 0; background: var(--sevenality-marble) center / cover no-repeat; opacity: .45; mix-blend-mode: soft-light; transform-origin: 45% 55%; will-change: transform; animation: sevenality-drift-b 61s ease-in-out infinite alternate; pointer-events: none; } /* Plane 3 — a slow luminance sweep. Suggests light moving across a liquid surface; the thing that stops it reading as a still. */ .sevenality-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient( 60% 50% at 30% 40%, rgba(128, 171, 215, .18) 0%, rgba(128, 171, 215, 0) 70% ); will-change: opacity, transform; animation: sevenality-sheen 38s ease-in-out infinite alternate; pointer-events: none; } /* content and scrim must sit above all three planes */ .sevenality-hero > .wp-block-cover__background, .sevenality-hero > .wp-block-cover__inner-container { position: relative; z-index: 2; } @keyframes sevenality-drift-a { from { transform: scale(1.06) translate3d(-1.2%, -0.8%, 0); } to { transform: scale(1.12) translate3d(1.2%, 0.9%, 0); } } @keyframes sevenality-drift-b { from { transform: scale(1.14) translate3d(1.6%, 1.1%, 0) rotate(0.4deg); } to { transform: scale(1.06) translate3d(-1.5%, -1.2%, 0) rotate(-0.3deg); } } @keyframes sevenality-sheen { from { opacity: .55; transform: translate3d(-6%, -3%, 0); } to { opacity: 1; transform: translate3d(7%, 4%, 0); } } /* Ambient motion is decoration. Under reduced-motion the depth stays (the planes remain offset and scaled) but nothing moves. */ @media (prefers-reduced-motion: reduce) { .sevenality-hero .wp-block-cover__image-background, .sevenality-hero::before, .sevenality-hero::after { animation: none; } } /* ============================================================ SCHEME-AWARE HOMEPAGE Light canvas with dark bands as punctuation — the original Sevenality pattern, restored. .sevenality-band flips with the scheme (thesis, work, ideas, contact) .sevenality-hero / .sevenality-method / .sevenality-quoteband stay FIXED in both schemes. They are brand covers, not surfaces: the marble, the FLAME deck and the testimonial band punctuate the page in either mode. Colour lives here rather than in block attributes on purpose — an inline style from a block attribute beats any stylesheet, so a hardcoded background in block markup can never be scheme-aware. ============================================================ */ :root { --sev-canvas: light-dark(#FBFBFB, #0d0d0d); --sev-ink: light-dark(#14171a, #ffffff); --sev-ink-soft: light-dark(#4A4A4A, rgba(255, 255, 255, .72)); /* Light value darkened from #8a8d90, which measured 3.17:1 against the #fff8f2 ground — below the 4.5:1 AA floor, on the token used for every standfirst, figure label and meta line on the site. #6e7174 clears it at 4.72:1. The dark value is unchanged: measured on the case study template it already passes, and darkening it there would have dimmed text that is correct. */ --sev-ink-dim: light-dark(#6a6c6f, rgba(255, 255, 255, .5)); --sev-rule: light-dark(#E4E2DE, rgba(255, 255, 255, .16)); --sev-accent: light-dark(#306090, #80ABD7); } .sevenality-band { background-color: var(--sev-canvas); color: var(--sev-ink); border-block-start: 1px solid var(--sev-rule); } .sevenality-band :is(h1, h2, h3, h4, p, span, cite, dd, dt) { color: inherit; } /* eyebrows and numerals take the accent, which also flips. The row count belongs here by that same rule — it is a numeral. Stating it explicitly rather than leaving it to `:is(...) { color: inherit }`, which was already handing it the link colour and happened to land on the accent on a light band and would not have on a dark one. */ .sevenality-band [style*="letter-spacing:0.24em"], .sevenality-band .sevenality-row__num, .sevenality-band .sevenality-row__count { color: var(--sev-accent); } .sevenality-band .sevenality-row__meta { color: var(--sev-ink-dim); } .sevenality-band .sevenality-row { border-block-start-color: var(--sev-rule); } .sevenality-band .sevenality-row:last-child { border-block-end-color: var(--sev-rule); } .sevenality-band .sevenality-row__name { color: var(--sev-ink); } /* the index panel placeholder should not be a black hole on light */ .sevenality-band .sevenality-index__panel { background: light-dark(#EFEDEA, #161616); } /* the contact CTA button inverts against the canvas */ .sevenality-band .wp-block-button__link { background-color: var(--sev-ink) !important; color: var(--sev-canvas) !important; } /* Fixed brand bands — explicitly NOT scheme-aware. Restated here so a future edit to .sevenality-band cannot leak into them by accident. */ .sevenality-hero, .sevenality-method, .sevenality-quoteband, /* The philanthropy brief sits on #1a1a1a and needs the tokens flipped the same way. It first shipped with an `is-dark` class, which is what the case-study template uses and means nothing here — the result was near-black type on a near-black band. The mechanism is color-scheme, not a class name. */ .sevenality-philbrief { color-scheme: dark; } /* ============================================================ GLOBAL MARBLE TRACK — the page-wide layer Decoration only: no content, no pointer events, and it reuses the marble already fetched for the hero so it costs nothing. The runtime positions it fixed and drives opacity/scale from story progress; everything here is just how it LOOKS. ============================================================ */ .sevenality-gtrack{ pointer-events:none; height:100vh; background:var(--sevenality-marble) center / cover no-repeat; mix-blend-mode:soft-light; opacity:0; /* runtime takes over; invisible if JS never runs */ will-change:opacity, transform; z-index:0; } /* Never let decoration sit over content. */ .sevenality-band, .sevenality-hero, .sevenality-method, .sevenality-quoteband{ position:relative; z-index:1 } @media (prefers-reduced-motion: reduce){ .sevenality-gtrack{ display:none } } /* Hero headline: colour one word WITHOUT nesting a span. * * The headline previously wrapped "communities" in an inline . That * span sat INSIDE an element carrying lvbl-anim-split-words-mask, which wraps * every word in its own span to clip it — the extra nesting level escaped the * layout entirely (measured at x=1451 on a 1440 viewport) and pushed a * horizontal scrollbar onto the whole page. Removing the nested span dropped * overflowing elements from 1 to 0. * * The splitter emits `` per word, so the colour can come * from CSS instead and both the masked reveal and the two-tone headline * survive. * * ⚠ INDEX-BOUND: data-word="2" is the third word. If the headline copy * changes, update this index or the wrong word turns blue. * "Building(0) better(1) communities(2) by(3) building(4) better(5) brands(6)" */ .sevenality-hero h1 [data-word="2"]{ color: var(--wp--preset--color--brand-light, #80ABD7) } .sevenality-hero{ overflow: clip } /* Contain sub-pixel horizontal overflow. Measured 1447px scrollWidth against a 1440px viewport — 7px of horizontal scroll with NO element reporting an oversized box. It comes from transformed descendants (the word-split spans and the hero's depth layers) contributing to the scrollable overflow area rather than to layout. `clip` rather than `hidden`: hidden would create a scroll container and break the position:sticky pins in the method section. */ html, body { overflow-x: clip } /* The story anchor must not participate in layout. sevenality_ensure_story_anchor() wraps the content in

so the plugin's global timeline has something to measure. That wrapper made every section a GRANDCHILD of .entry-content, which broke the theme's alignfull escape — full-bleed bands collapsed to the 680px content column. display:contents removes the wrapper's box from layout while leaving the element in the DOM for the runtime to measure. */ .lvbl-story { display: contents } /* Index rows are not body links. The theme underlines content links with `.entry-content a:not(.btn):not(.wp-block-button__link)` — specificity (0,3,1), which beats a bare `.sevenality-row` at (0,1,0). Match its shape so this ties and wins on load order, rather than reaching for !important. */ .entry-content a.sevenality-row:not(.wp-block-button__link) { text-decoration: none; } /* Section interiors span their band. The bands are constrained layouts, so WordPress caps non-aligned children at --wp--style--global--content-size (46rem here, since theme.json now owns layout). That is right for prose and wrong for these full-width devices — the work index collapsed to a 273px panel beside 339px of rows. These wrappers manage their own internal grid and should fill the band. */ .sevenality-band .sevenality-index__layout, .sevenality-band .sevenality-ideas__rows, .sevenality-quoteband .sevenality-qband, .sevenality-band > .wp-block-group { /* (0,2,0) to beat WordPress's constrained-layout rule `.is-layout-constrained > :where(:not(.alignfull)…)` at (0,1,0) — a bare class ties and loses on load order. */ max-width: none; width: 100%; } /* ============================================================ CASE STUDY (single-project.php) One template, sixteen looks. --cs-accent is set per project from its featured image; .is-dark flips the canvas when the accent needs a dark ground to stay legible. ============================================================ */ .sevenality-cs{ --cs-canvas:#FBFBFB; --cs-ink:#14171a; --cs-soft:#4A4A4A; --cs-dim:#8a8d90; --cs-rule:#E4E2DE; --cs-gutter:clamp(1.25rem,4vw,4.5rem); --cs-measure:44rem; background:var(--cs-canvas); color:var(--cs-ink); } .sevenality-cs.is-dark{ --cs-canvas:#0d0d0d; --cs-ink:#ffffff; --cs-soft:rgba(255,255,255,.72); --cs-dim:rgba(255,255,255,.45); --cs-rule:rgba(255,255,255,.16); } .sevenality-cs .cs-wrap{max-width:1560px;margin-inline:auto;padding-inline:var(--cs-gutter)} .sevenality-cs .cs-micro{font-family:var(--wp--preset--font-family--sans);font-weight:400;font-size:var(--t-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--cs-accent);margin:0} /* hero — the project's colour washes its own image */ .sevenality-cs .cs-hero{position:relative;isolation:isolate;overflow:clip;min-height:clamp(30rem,76vh,44rem);display:flex;align-items:flex-end;background:#0b0b0c;padding-block:var(--sp-5)} .sevenality-cs .cs-hero__img{position:absolute;inset:0;z-index:0} .sevenality-cs .cs-hero__img img{width:100%;height:100%;object-fit:cover} .sevenality-cs .cs-hero__scrim{position:absolute;inset:0;z-index:1;background: radial-gradient(75% 65% at 18% 82%, color-mix(in srgb, var(--cs-accent) 55%, transparent) 0%, transparent 62%), linear-gradient(180deg,rgba(6,8,12,.30) 0%,rgba(6,8,12,.16) 40%,rgba(6,8,12,.88) 100%)} .sevenality-cs .cs-hero__in{position:relative;z-index:2;width:100%} .sevenality-cs .cs-hero .cs-micro{color:var(--ink-on-dark-dim)} .sevenality-cs .cs-hero__t{font-family:var(--wp--preset--font-family--display);font-weight:400;font-size:var(--t-h1);line-height:1;letter-spacing:-.03em;color:var(--ink-on-dark);margin:var(--s-lg) 0 0;max-width:18ch;text-wrap:balance} .sevenality-cs .cs-hero__meta{display:flex;flex-wrap:wrap;gap:var(--s-xs);margin-block-start:var(--sp-3);padding-block-start:var(--s-lg);border-block-start:1px solid rgba(255,255,255,.22)} .sevenality-cs .cs-tag{font-family:var(--wp--preset--font-family--sans);font-weight:400;font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-on-dark-soft);border:1px solid rgba(255,255,255,.32);padding:var(--s-3xs) var(--s-xs)} /* the arc */ .sevenality-cs .cs-arc{padding-block:var(--sp-6)} .sevenality-cs .cs-act{display:grid;grid-template-columns:1fr;gap:var(--sp-3);padding-block:var(--sp-4);border-block-start:1px solid var(--cs-rule)} @media(min-width:900px){ .sevenality-cs .cs-act{grid-template-columns:repeat(12,1fr);align-items:start} .sevenality-cs .cs-act__label{grid-column:1/span 3} .sevenality-cs .cs-act__body{grid-column:5/span 7} /* THE ALTERNATION IS GONE. Flipping the label from left to right on every other act was meant to supply rhythm, but the acts are named Objective, Challenge, Solutions, Results — a reader is following an argument, and moving the signpost each time makes them re-find it. With the in-body images restored the plates now provide the variation, which is what should have been carrying it. */ } .sevenality-cs .cs-act__n{font-family:var(--wp--preset--font-family--sans);font-weight:400;font-size:var(--t-micro);letter-spacing:.2em;color:var(--cs-accent-ink,var(--cs-accent));margin:0} /* Every act is announced in the project's colour, not just Results. The readable variant is used because seven of fourteen accents fail 4.5:1 on the dark canvas — see the note in single-project.php. */ .sevenality-cs .cs-act__h{font-family:var(--wp--preset--font-family--display);font-weight:400;font-size:var(--t-h3);line-height:1.1;letter-spacing:-.02em;margin:var(--s-xs) 0 0;text-transform:capitalize;color:var(--cs-accent-ink,var(--cs-accent))} .sevenality-cs .cs-act__body p{margin:0 0 var(--s-lg);font-size:var(--t-lead);line-height:1.7;color:var(--cs-soft);max-width:var(--cs-measure)} .sevenality-cs .cs-act__body p:last-child{margin:0} /* results is the answer the reader came for */ .sevenality-cs .cs-act--results .cs-act__body p{color:var(--cs-ink);font-family:var(--wp--preset--font-family--serif-text);font-size:var(--t-h4);line-height:1.5;border-inline-start:2px solid var(--cs-accent);padding-inline-start:var(--s-lg)} /* plates */ .sevenality-cs .cs-plate{margin-block:var(--sp-5)} .sevenality-cs .cs-plate--bleed{width:100vw;margin-inline:calc(50% - 50vw)} .sevenality-cs .cs-plate--duo{display:grid;grid-template-columns:1fr;gap:var(--sp-2)} @media(min-width:760px){.sevenality-cs .cs-plate--duo{grid-template-columns:repeat(2,1fr)}} .sevenality-cs .cs-plate figcaption{font-family:var(--wp--preset--font-family--sans);font-weight:300;font-size:var(--t-micro);color:var(--cs-dim);margin-block-start:var(--s-sm)} .sevenality-cs .cs-plate--bleed figcaption{max-width:1560px;margin-inline:auto;padding-inline:var(--cs-gutter)} .sevenality-cs .cs-extra{max-width:var(--cs-measure);color:var(--cs-soft);padding-block-start:var(--sp-3);border-block-start:1px solid var(--cs-rule)} /* testimonial — the accent carries the band */ .sevenality-cs .cs-quote{background:color-mix(in srgb, var(--cs-accent) 88%, #101014);color:var(--ink-on-dark);padding-block:var(--sp-6)} .sevenality-cs .cs-quote .cs-micro{color:var(--ink-on-dark-dim)} .sevenality-cs .cs-quote__t{font-family:var(--wp--preset--font-family--serif-text);font-size:var(--t-h4);line-height:1.4;margin:var(--s-lg) 0 0;max-width:34ch} .sevenality-cs .cs-quote__c{font-style:normal;display:block;margin-block-start:var(--s-xl);padding-block-start:var(--s-md);border-block-start:1px solid rgba(255,255,255,.22)} .sevenality-cs .cs-quote__n{font-family:var(--wp--preset--font-family--sans);font-weight:400;font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-on-dark)} .sevenality-cs .cs-quote__co{display:block;font-family:var(--wp--preset--font-family--sans);font-weight:300;font-size:var(--t-meta);color:var(--ink-on-dark-dim);margin-block-start:var(--s-2xs)} /* more work + cta */ .sevenality-cs .cs-next{padding-block:var(--sp-5)} .sevenality-cs .cs-rows{margin-block-start:var(--sp-3)} .sevenality-cs .cs-row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-xs) var(--sp-1);align-items:baseline;padding-block:var(--sp-2);border-block-start:1px solid var(--cs-rule);transition:opacity .3s ease} .sevenality-cs .cs-row:last-child{border-block-end:1px solid var(--cs-rule)} .sevenality-cs .cs-rows:hover .cs-row{opacity:.32} .sevenality-cs .cs-rows .cs-row:hover,.sevenality-cs .cs-rows .cs-row:focus-visible{opacity:1} .entry-content .sevenality-cs a.cs-row,.sevenality-cs a.cs-row{text-decoration:none} .sevenality-cs .cs-row__n{font-family:var(--wp--preset--font-family--sans);font-weight:400;font-size:var(--t-micro);letter-spacing:.2em;color:var(--cs-accent)} .sevenality-cs .cs-row__name{font-family:var(--wp--preset--font-family--display);font-weight:400;font-size:var(--t-h4);line-height:1.06;letter-spacing:-.02em;margin:0;color:var(--cs-ink)} .sevenality-cs .cs-row__meta{font-family:var(--wp--preset--font-family--sans);font-weight:300;font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--cs-dim);text-align:right} @media(max-width:560px){.sevenality-cs .cs-row{grid-template-columns:auto 1fr}.sevenality-cs .cs-row__meta{grid-column:2;text-align:left}} .sevenality-cs .cs-cta{background:color-mix(in srgb, var(--cs-accent) 8%, var(--cs-canvas));padding-block:var(--sp-5);border-block-start:1px solid var(--cs-rule)} /* Explicit ink. Without it this fell through to the same near-black that hid the act headings — 'Let's create something amazing together' was invisible on the dark canvas. */ .sevenality-cs .cs-cta__t{color:var(--cs-ink);font-family:var(--wp--preset--font-family--display);font-weight:400;font-size:var(--t-h3);line-height:1.05;letter-spacing:-.025em;margin:var(--s-lg) 0 0;max-width:20ch;text-wrap:balance} .sevenality-cs .cs-btn{display:inline-flex;align-items:center;gap:var(--s-sm);margin-block-start:var(--s-2xl);font-family:var(--wp--preset--font-family--sans);font-weight:400;font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;background:var(--cs-ink);color:var(--cs-canvas);padding:var(--s-md) var(--s-2xl);text-decoration:none} /* Plate framing. Attached images range from full-bleed photography to small logo files, so an unframed plate leaves little assets floating in whitespace. Give every plate a consistent frame and CONTAIN rather than cover — cropping a logo or a business-card layout to fill a box is worse than letterboxing it — with a faint accent ground so the letterboxing reads as intentional. */ .sevenality-cs .cs-plate figure{ margin:0; background:color-mix(in srgb, var(--cs-accent) 6%, var(--cs-canvas)); overflow:hidden; } .sevenality-cs .cs-plate--bleed figure{aspect-ratio:21/9} .sevenality-cs .cs-plate--duo figure{aspect-ratio:4/3} .sevenality-cs .cs-plate figure img{ width:100%;height:100%;object-fit:contain;display:block; } @media(max-width:760px){ .sevenality-cs .cs-plate--bleed figure{aspect-ratio:16/10} } /* Authored inline images inside an ACF body. Many bodies carry their own

. Give them the same frame as a plate, and break them out of the reading measure so they are not squeezed into a text column. */ .sevenality-cs .cs-act__body p:has(img){ max-width:none; margin-block:var(--sp-3); } .sevenality-cs .cs-act__body img{ width:100%;height:auto;display:block; background:color-mix(in srgb, var(--cs-accent) 6%, var(--cs-canvas)); } /* The results accent rule marks PROSE, not pictures — without this it runs down the side of an image paragraph as a long stray line. */ .sevenality-cs .cs-act--results .cs-act__body p:has(img){ border-inline-start:0; padding-inline-start:0; } /* Keep the site header above page content. .site-header is position:absolute at top:0 with no z-index, so it relies on page content being transparent. Any template whose
paints an opaque background covers the nav entirely — which is exactly what happened on the work index. Give the header a stacking order instead of asking every template to stay transparent. */ .site-header { z-index: 20 } /* And reserve room for it, since an absolute header takes no space in flow. */ .sevenality-workindex .wi-head { padding-block-start:var(--sp-7)} /* ============================================================ WORK GRID (templates/tpl-portfolio.php) Image-led. The work is the point, so tiles are square and large, on a dark ground so the imagery carries the page. One grid + filter, never grouped sections — grouping turned 17 projects into 55 repeated rows. ============================================================ */ .sevenality-workgrid{ --wg-canvas:#0d0d0d; --wg-ink:#fff; --wg-dim:rgba(255,255,255,.5); --wg-rule:rgba(255,255,255,.16); --wg-gutter:clamp(1.25rem,4vw,4.5rem); background:var(--wg-canvas);color:var(--wg-ink); } .sevenality-workgrid .wg-wrap{max-width:1560px;margin-inline:auto;padding-inline:var(--wg-gutter)} .sevenality-workgrid .wg-micro{font-family:var(--wp--preset--font-family--sans);font-weight:400;font-size:var(--t-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--wp--preset--color--brand-light,#80ABD7);margin:0} /* Head was 722px — 23.4% of the page — with the right half empty and the first row of work below the fold. Top padding roughly halved, and the intro moved into that empty column instead of running under the title. */ .sevenality-workgrid .wg-head{padding-block:var(--sp-5) var(--sp-3)} .sevenality-workgrid .wg-head__grid{display:grid;gap:var(--sp-3)} @media(min-width:900px){ .sevenality-workgrid .wg-head__grid{ grid-template-columns:minmax(0,1fr) minmax(0,26rem); /* Top-aligned. Bottom-aligning them looked right in principle — the intro's last line settling onto the title's baseline — but the intro column is much the taller of the two, so it pushed the title down and left a dead quadrant above the eyebrow. Aligned from the top, the short title and the long standfirst start together and the slack falls under the title, which is where a magazine puts it. */ align-items:start; column-gap:var(--sp-5); } } .sevenality-workgrid .wg-title{font-family:var(--wp--preset--font-family--display);font-weight:400;font-size:var(--t-h1);line-height:.98;letter-spacing:-.03em;margin:var(--s-lg) 0 0;max-width:14ch} .sevenality-workgrid .wg-intro{max-width:44rem} /* This copy is supporting material, not a lead paragraph, and at full size it was what set the head's height on every width — three paragraphs before a phone visitor saw a single project. Smaller and tighter buys back most of a screen without cutting a word. */ .sevenality-workgrid .wg-intro p{font-family:var(--wp--preset--font-family--sans);font-weight:300;font-size:var(--t-small);line-height:1.6;color:var(--ink-on-dark-dim);margin:0 0 var(--s-sm)} .sevenality-workgrid .wg-intro p:last-child{margin:0} /* filter chips */ /* The filter is a control strip, not a section. It was spending ~128px of vertical between the head and the first tile; the rule already separates them, so the space was doing the job twice. */ .sevenality-workgrid .wg-controls{display:flex;flex-wrap:wrap;gap:var(--s-xs);padding-block:var(--sp-1);border-block-end:1px solid var(--wg-rule);margin-block-end:var(--sp-2)} .sevenality-workgrid .wg-chip{ font-family:var(--wp--preset--font-family--sans);font-weight:400; font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase; color:var(--ink-on-dark-dim);background:transparent; border:1px solid var(--wg-rule);padding:var(--s-xs) var(--s-md);cursor:pointer; display:inline-flex;align-items:center;gap:var(--s-xs); transition:color .25s ease,border-color .25s ease,background .25s ease; } .sevenality-workgrid .wg-chip:hover,.sevenality-workgrid .wg-chip:focus-visible{color:var(--ink-on-dark);border-color:var(--ink-on-dark-faint)} .sevenality-workgrid .wg-chip.is-on{color:var(--sev-black);background:#fff;border-color:var(--ink-on-dark)} .sevenality-workgrid .wg-chip__n{font-variant-numeric:tabular-nums;opacity:.55;font-size:var(--t-micro)} /* Situation chips are sentences, not single words — "One brand, many audiences" against the old "Branding". Measured at 390px they wrapped to FOUR rows, putting ~160px of filter bar above the first tile on a page whose whole job is showing work, and reintroducing exactly the below-the-fold problem the header grid was reshaped to fix. So on narrow screens the bar scrolls sideways instead of stacking: one row, fixed cost, and the horizontal swipe is the familiar phone gesture for a filter row. The scrollbar is hidden but the overflow is real, so keyboard and trackpad scrolling still reach the last chip. */ @media (max-width: 700px){ .sevenality-workgrid .wg-controls{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .sevenality-workgrid .wg-controls::-webkit-scrollbar{display:none} .sevenality-workgrid .wg-chip{flex:0 0 auto} } /* the grid — square tiles, image-led */ .sevenality-workgrid .wg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr)); gap:var(--sp-1); padding-block-end:var(--sp-5); } /* TWO UP ON PHONES. `auto-fill` at a 17rem minimum resolves to ONE column below ~640px, which made the grid 5,828px of a 7,449px page — sixteen full-width tiles, a seven-screen scroll to see the work. Two up halves it and, more importantly, lets a visitor compare projects instead of meeting them one at a time. The meta has to come down with the tile or the title swallows a 165px square. */ @media(max-width:640px){ .sevenality-workgrid .wg-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-xs); } .sevenality-workgrid .wg-tile__meta{ padding:var(--s-xs) var(--s-sm); padding-block-start:var(--s-2xl); gap:var(--s-3xs); } .sevenality-workgrid .wg-tile__name{font-size:var(--t-small);line-height:1.2} /* One line, not two: at half width a two-line tagline is taller than the name it belongs to. */ .sevenality-workgrid .wg-tile__type{font-size:var(--t-micro);line-height:1.35;-webkit-line-clamp:1} } .sevenality-workgrid .wg-tile{ position:relative;display:block;text-decoration:none;color:inherit; background:#141414;overflow:hidden; } .sevenality-workgrid .wg-tile__media{display:block;aspect-ratio:1;overflow:hidden;position:relative} .sevenality-workgrid .wg-tile__media img{ width:100%;height:100%;object-fit:cover;display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1); } /* the accent veil — the project's own colour, held at rest, arriving on engagement so the wall reads as work first and colour second */ .sevenality-workgrid .wg-tile__veil{ position:absolute;inset:0; background:color-mix(in srgb, var(--wg-accent) 42%, transparent); opacity:0;transition:opacity .35s ease; } .sevenality-workgrid .wg-tile__meta{ position:absolute;inset-inline:0;inset-block-end:0;z-index:2; display:flex;flex-direction:column;gap:var(--s-3xs); padding:var(--sp-1); /* Tall, eased scrim. A short one is fine over dark photography and fails over light tiles — Hope Center and Bellame are near-white at the foot, which left the title unreadable. This holds white type over any image. */ padding-block-start:var(--sp-5); background:linear-gradient(0deg, rgba(8,8,10,.94) 0%, rgba(8,8,10,.80) 38%, rgba(8,8,10,.42) 68%, rgba(8,8,10,0) 100%); transform:translateY(.35rem);opacity:.92; transition:transform .35s ease,opacity .35s ease; } .sevenality-workgrid .wg-tile__name{font-family:var(--wp--preset--font-family--display);font-weight:400;font-size:var(--t-lead);line-height:1.15;color:var(--ink-on-dark)} /* Sentence case, not the 9px uppercase eyebrow that suited a one-word discipline. A tagline IS a sentence and has to read as one; clamped to two lines so a long one cannot shove the title off the tile. */ .sevenality-workgrid .wg-tile__type{font-family:var(--wp--preset--font-family--sans);font-weight:300;font-size:var(--t-meta);line-height:1.45;letter-spacing:0;text-transform:none;color:var(--ink-on-dark-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .sevenality-workgrid .wg-tile:hover .wg-tile__media img, .sevenality-workgrid .wg-tile:focus-visible .wg-tile__media img{transform:scale(1.05)} .sevenality-workgrid .wg-tile:hover .wg-tile__veil, .sevenality-workgrid .wg-tile:focus-visible .wg-tile__veil{opacity:1} .sevenality-workgrid .wg-tile:hover .wg-tile__meta, .sevenality-workgrid .wg-tile:focus-visible .wg-tile__meta{transform:none;opacity:1} .sevenality-workgrid .wg-tile:focus-visible{outline:2px solid #fff;outline-offset:2px} /* filtered out */ .sevenality-workgrid .wg-tile.is-out{display:none} .sevenality-workgrid .wg-note{font-family:var(--wp--preset--font-family--sans);font-weight:300;font-size:var(--t-meta);line-height:1.6;color:var(--wg-dim);max-width:60ch;margin:0 0 var(--sp-5)} @media(prefers-reduced-motion:reduce){ .sevenality-workgrid .wg-tile__media img, .sevenality-workgrid .wg-tile__veil, .sevenality-workgrid .wg-tile__meta, .sevenality-workgrid .wg-chip{transition:none} } /* Explicit colour on the work-grid headings. The theme styles h1/.entry-title with its own colour, which outranks the colour inherited from .sevenality-workgrid — on a dark canvas that rendered the page title near-invisible. */ .sevenality-workgrid .wg-title, .sevenality-workgrid h1 { color:var(--ink-on-dark) } .sevenality-workgrid .wg-intro p { color:var(--ink-on-dark-dim) } /* Dark-canvas pages: the header overlaps `main`, so header furniture sitting in that overlap has to switch ink. The scheme toggle is black by default and vanished on the work index and on all nine dark case studies in light mode. */ body.sevenality-dark-canvas .lvbl-cst-icon{color:var(--ink-on-dark-soft)} body.sevenality-dark-canvas .lvbl-cst-toggle:hover .lvbl-cst-icon, body.sevenality-dark-canvas .lvbl-cst-toggle:focus-visible .lvbl-cst-icon{color:var(--ink-on-dark)} /* ============================================================ SEVENALITY FOOTER A sitemap on black marble, signed with the wordmark. ============================================================ What this replaces was 990px — 18% of a page — for SIX links, five of them the header nav restated while that header is sticky and never leaves the screen. See footer.php for the promises it made that nothing backed. The marble is the theme's own brand-texture-dark.jpg, not the blue hero texture: the footer should feel like the same material seen in shadow, not a second hero. */ /* Doubled class, (0,2,0). The parent ships `.site-footer{background:...}` in build/dark-mode-styles.css — a SHORTHAND, which resets background-image to none — and that bundle is enqueued AFTER this stylesheet, so a single class loses on order. Measured: background-image computed to `none` with the rule present and the texture returning 200. */ .sevenality-footer.sevenality-footer{ position:relative; background-color:#0b0b0c; /* Two declarations on purpose. The first is always valid and is what a browser without image-set() support uses; the second overrides it where image-set() IS supported and takes the WebP. 324 KB -> 16 KB. */ background-image:url("assets/textures/brand-texture-dark.jpg"); background-image:image-set(url("assets/textures/brand-texture-dark.webp") type("image/webp"), url("assets/textures/brand-texture-dark.jpg") type("image/jpeg")); background-size:cover; background-position:center; color:var(--ink-on-dark); --sf-rule:rgba(255,255,255,.16); --sf-dim:rgba(255,255,255,.6); padding-block:var(--sp-5) var(--sp-2); margin-block-start:0; overflow:hidden; } .sevenality-footer .sf-inner{width:min(100% - 2rem,var(--sev-w-wide,86.25rem));margin-inline:auto} /* ---- sitemap ---- */ .sevenality-footer .sf-map{display:grid;gap:var(--sp-3);grid-template-columns:repeat(2,minmax(0,1fr))} @media(min-width:820px){.sevenality-footer .sf-map{grid-template-columns:repeat(4,minmax(0,1fr))}} .sevenality-footer .sf-col__h{font-family:var(--wp--preset--font-family--sans);font-weight:400;font-size:var(--t-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--sev-blue-light);margin:0 0 var(--s-md);padding-block-end:var(--s-sm);border-block-end:1px solid var(--sf-rule)} .sevenality-footer .sf-col__list{list-style:none;margin:0;padding:0} .sevenality-footer .sf-col__list a{display:block;padding-block:var(--s-xs);font-family:var(--wp--preset--font-family--sans);font-size:var(--t-small);line-height:1.35;color:var(--ink-on-dark);text-decoration:none !important} .sevenality-footer .sf-col__list a:hover, .sevenality-footer .sf-col__list a:focus-visible{color:var(--sev-blue-light)} /* ---- the sign-off ---- Sized in vw so the wordmark spans the measure at any viewport rather than being pinned to one breakpoint. Ten characters of the display face fill roughly 5.2em, so ~19vw lands it edge to edge on a 1440 band. */ .sevenality-footer .sf-sign{ position:relative; font-family:var(--wp--preset--font-family--display); font-weight:400; font-size:min(19vw,17rem); line-height:.82; letter-spacing:-.045em; margin:var(--sp-5) 0 0; color:var(--ink-on-dark); white-space:nowrap; } .sevenality-footer .sf-sign__base, .sevenality-footer .sf-sign__fill{display:block} /* THE FILL SWEEP The blue marble is the SAME stone as the footer ground, lit — the two textures are the same swirl in different values, so the letters read as the material they are cut from rather than as a pasted-in picture. The fill copy is laid exactly over the base. `background-clip:text` paints the marble inside the letterforms; the mask then reveals it left to right in reading order, so the signature completes as you arrive. The mask edge is deliberately WIDE — 18% of the word — which is the whole "blur": a soft boundary bleeding into the letters costs nothing to paint, where an actual filter on display type this size is expensive. */ .sevenality-footer .sf-sign__fill{ position:absolute; /* Extended BELOW the box on purpose. background-clip:text paints only within the element's background box, and line-height:.82 leaves the descenders hanging outside it — the tail of the "y" stayed white while the rest of the word had filled. Dropping the bottom edge by a quarter of an em brings the descender inside the painted area. */ inset:0 0 -.25em 0; /* Reuses --sevenality-marble (printed in wp_head by sevenality_marble_custom_property) rather than naming the theme JPEG again. The custom property resolves to the uploaded marble attachment — the SAME artwork at the same 1440x1080, 59 KB as WebP against 1,478 KB for the theme file — and the page has already downloaded it for the hero image, so painting the text costs nothing further. Measured: the JPEG was the single heaviest resource on the site, pulled in by this one rule to fill letterforms. It stays on disk as the fallback the property itself uses when no attachment is set. */ background-image:var(--sevenality-marble); background-size:cover; background-position:center; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-mask-image:linear-gradient(to right,#000 calc(var(--sf-p) - 18%),transparent var(--sf-p)); mask-image:linear-gradient(to right,#000 calc(var(--sf-p) - 18%),transparent var(--sf-p)); pointer-events:none; } /* 0% is the DEFAULT, which means the fill is masked out entirely and the solid white base is what shows. That is the fallback for Firefox, which has no scroll-driven animation, and for reduced motion. The signature is never half-arrived by accident. */ @property --sf-p{syntax:'';inherits:false;initial-value:0%} @supports (animation-timeline: view()){ @media(prefers-reduced-motion:no-preference){ /* THE RANGE'S CEILING IS THE SUBJECT'S HEIGHT. * * Measured on the Reposition spoke: the footer is 658px tall, so its * `entry` phase spans exactly 658px of scroll, and `entry 12% 88%` * spent 480px of that — scrollY 2476 to 2956, finishing 80px before * the document ended. Sampling --sf-p confirmed it: 0% at 2396, 118% * by 2956. On a trackpad fling to the bottom, the whole signature * writes itself in a fraction of a second and is already finished * when the reader arrives. * * Widening the percentages could not fix it, because 658px was the * entire budget. So the TIMELINE moves to a taller subject: #main, * the whole page body above the footer. `entry` on that starts as the * page content begins arriving and finishes as it clears, which * spends thousands of pixels instead of hundreds — and crucially the * signature is already well underway BEFORE the footer appears, * rather than racing to complete inside it. * * The range was then chosen by measurement rather than taste. Sampling * --sf-p at eight scroll positions across four candidate ranges: * * contain 0% 100% completes at ~87% of scroll — before the footer * is on screen at all, so nobody ever sees it move * cover 70% 100% only reaches 98% by the page end — never lands * cover 50% 95% begins at half the scroll, completes exactly at * the bottom, and is still visibly writing while * the footer is in view * * That is 1,518px of scroll on this page against 480px before, and * because the range is relative to #main it scales with page length * instead of being a fixed pixel budget that suits one template. */ /* A named view-timeline is only visible to DESCENDANTS of the element * that declares it. `.sf-sign__fill` lives in