all still run exactly as on /about/.
⭐ The dark ground is set HERE rather than in the component, because it is this page's
choice: the rain only exists against dark, and a light-theme version would be a different
design rather than a variant. */
/* ⛔ THE HERO'S OVERLAY AND VIGNETTE ARE OFF ON THIS PAGE ONLY (Neil, 2026-08-28: *"the overlay
just hides the glyph rain too much"*). They exist to hold type off a PHOTOGRAPH; there is no
photograph here, and over the rain they read as a grey wash. Scoped to `.swf-gr-host`, so
every other page using this shared component is untouched. */
/* ⛔⛔ THE DOUBLED CLASS IS DELIBERATE — `.swf-gr-host.swf-gr-host` is 0,3,0 and beats the
component's own 0,2,0 rules. MEASURED at 1.53.2: `funnel.css` is enqueued with no dependency
and the THEME'S STYLESHEET LOADS AFTER IT, so every equal-specificity rule of ours silently
lost the cascade — the hidden photograph came back, the overlay came back, and the teal badge
stayed white. All three were "in the stylesheet" and none of them applied.
⭐ Specificity, not `!important`: `!important` wins today and makes the next override
unwinnable. Doubling the scoping class raises weight while staying overridable in order. */
/* ⭐⭐ WD-585 — AND THE IMAGE ITSELF, which this rule forgot. Neil, 2026-09-01: *"there's, like, a
broken image link or something saying the rules of a top grade... we're not using an image on
that page anyway."*
⛔ THE CAUSE IS AN EMPTY `src`, NOT A MISSING FILE. The photograph was "removed" from this hero by
blanking the attribute in the Etch block, so the markup still carries
`![The Rules of a Top Grade]()
`. A browser treats `src=""`
as a broken image: it paints the broken-image glyph AND the alt text, which is exactly the
caption he can see in the top-left. Nothing 404s, so no failed-request check would ever have
found it — the page requests nothing at all.
⇒ The image joins the overlay and the vignette it was always meant to be hidden alongside; the
note above already says the photograph is off on a glyph-rain host. Same doubled-class weight,
same reasoning: specificity rather than `!important`, so it stays overridable in order. */
.swf-gr-host.swf-gr-host .header-hero__bg,
.swf-gr-host.swf-gr-host .header-hero__overlay,
.swf-gr-host.swf-gr-host .header-hero__vignette { display: none; }
/* ⭐ THE GROUND FOLLOWS THE THEME — the rain supports both (see PALETTE in rules.js), so the
header must too, or the light theme is dark glyphs on a dark ground. */
.swf-gr-host { position: relative; background: #101114; isolation: isolate; }
/* ⚠️ `.header-hero` sets its own background, so the bare attribute selector lost on specificity
— measured: the host computed rgb(0,0,0) while the theme said light. Both grounds are declared
at the same weight as the component's own rule. */
.header-hero.swf-gr-host[data-gr-theme="dark"] { background: #101114; }
.header-hero.swf-gr-host[data-gr-theme="light"] { background: #f4f3f7; }
.swf-gr-host[data-gr-theme="light"],
.swf-gr-host[data-gr-theme="light"] .header-hero__title,
.swf-gr-host[data-gr-theme="light"] .header-hero__caption { color: #1c1d1f; }
/* ⛔ THE BADGE COLOUR IS NOT SET HERE EITHER — same cause as `.header-hero__bg` below: Etch's
page styles declare `.header-hero__badge { color: #fff !important; }`, so both rules that used
to sit on this line lost silently no matter how they were specified. Neil's ask (WD-425 #4:
*"'the mark scheme' in teal, which I thought was actually quite nice"*) is applied inline with
priority in `rules.js::paintOverrides()`, which also re-applies it on a theme flip. */
.swf-gr-host[data-gr-theme="light"] .header-hero__badge--unused,
.swf-gr-host[data-gr-theme="light"] .header-hero__subtitle { color: #55555f; }
/* ⛔⛔ NOTHING IN THIS STYLESHEET CAN TOUCH `.header-hero__bg`, AND THAT IS WHY FOUR FIXES FAILED.
MEASURED, twice, in the live page:
1. the hero's entrance ANIMATION assigns `visibility` and `opacity` inline on this image every
frame of its ramp, so a `visibility:hidden` rule here lost to a SCRIPT, not to the cascade;
2. `INLINE#etch-page-styles` — the Etch component's own page styles — declares
`.header-hero__bg { background: rgb(51,51,51) !important; z-index: 0 !important; }`
and `.header-hero__badge { color: #fff !important; }`.
⭐⭐ SO LOAD ORDER IS IRRELEVANT HERE, and the long-planned "give `funnel.css` a dependency so it
loads after the theme" is NOT the fix for this: `funnel.css` could load dead last and still lose
every one of these, because `!important` outranks order and specificity alike. A plain INLINE
style loses to it too. Only an inline `!important` declaration outranks an important author
rule — so the overrides live in `rules.js::paintOverrides()`, page-scoped, and nothing weaker
will hold. The image keeps its box, visibility and opacity and so remains the metronome the rain
mirrors (BRAND.md §7z); only its PAINT is removed.
⛔ Do not reinstate a rule here in any form. It is not a specificity problem, and a rule that
silently loses is worse than no rule — it reads as a fix. */
/* ⭐ THE GROUND IS PAINTED ON THE LAYER, NOT ON THE HOST. The component sets its own background
and wins on specificity — measured: the host computed rgb(0,0,0) while the theme said light,
which in light mode means dark ink glyphs on a black ground, i.e. nothing visible. The layer
is ours, sits above the component's background and below its content, so painting it here
settles the question instead of re-entering a specificity fight (root: watch the cascade —
two of my own rules already cancelled each other out on this component once today). */
.swf-gr-host .swf-gr__layer {
position: absolute; inset: 0; z-index: 0; pointer-events: none; background: #101114;
}
.swf-gr-host.swf-gr-host[data-gr-theme="light"] .swf-gr__layer { background: #f4f3f7; }
.swf-gr-host .swf-gr__source,
.swf-gr-host .swf-gr__output {
position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.swf-gr-host .swf-gr__source { opacity: 0; } /* the component's capture surface, never seen */
.swf-gr-host .swf-gr__output { z-index: 0; }
/* the hero's own content must sit ABOVE the rain — the component does not know the rain exists.
⛔⛔ THE LAYER MUST BE EXCLUDED HERE, and forgetting it is what broke the header at 1.53.1.
This selector is `0,3,0` and beats the `0,2,0` rule that makes `.swf-gr__layer` absolute, so
the layer was forced back to `position:relative` — an `inset:0` relative box has NO HEIGHT,
the canvas inside it sized to **1440 x 1**, and a one-pixel canvas draws nothing.
⭐ Nothing errored. Opacity was 1, the WebGL context was alive, the mirror tracked perfectly.
The header simply went grey — which is what Neil reported and what no error-based check could
have found. Two rules of mine, written twenty minutes apart, cancelling each other out. */
.swf-gr-host > *:not(.swf-gr__layer) { position: relative; z-index: 1; }
/* the hero's type is authored against a photograph; on our dark ground it needs the dark palette */
.swf-gr-host, .swf-gr-host .header-hero__title, .swf-gr-host .header-hero__caption { color: #f4f6fa; }
.swf-gr-host .header-hero__badge, .swf-gr-host .header-hero__subtitle { color: #9aa3b2; }
@media (prefers-reduced-motion: reduce) { .swf-gr-host .swf-gr__output { display: none; } }
/* ── /top-grade-rules/ · THE TWO RULES, ON "BUILT TO SPEC" ────────────────────
Ported from `Sophicly Spec Cards - PORT.html` §B (all 21 `.bts*` rules read first).
Their values, kept. Deviation: no CTA (Neil), and the rules occupy its slot. */
/* ⚠️ NO `opacity` DECLARED HERE, DELIBERATELY. The section is faded in on SCROLL from
`rules.js` (Neil: *"I don't want to be able to see the section under the header hero until I
start scrolling"*), and that driver sets `opacity:0` itself only once it is certain it will
run. Declaring 0 here instead would make a JS failure, or reduced-motion, render the section
permanently invisible — the §4d failure. The CSS default must be the VISIBLE state. */
.swf-bts {
--su: calc(100vw / 1440); /* their scale unit — everything below rides on it */
position: relative; overflow: hidden; grid-column: full;
color: #e0e0ee; background: #1c1d1f;
}
/* the bg is the zoom layer: starts at 1.75x and relaxes to 1 as the section rises */
.swf-bts__bg { position: absolute; inset: 0; will-change: transform; transform: scale(1.75); display: flex; }
/* ⭐ darkened AT THE IMAGE, not veiled by an overlay — theirs has no scrim over the plates.
`--k` is solved PER PLATE at runtime: engravings and letterpress title pages differ wildly
in mean lightness, and one shared brightness leaves the pale ones glaring as bright columns. */
.swf-bts__bg img {
flex: 1 1 0; min-width: 0; height: 100%; display: block;
object-fit: cover; object-position: center 32%;
filter: grayscale(1) contrast(1.18) brightness(var(--k, .30));
}
/* a light, text-only gradient weighted to the band where the type sits */
/* ⚠️ STRONGER THAN THEIRS, and stated. Their plates are darker Doré engravings; ours include
pale letterpress title pages that sit directly behind the type, and at their weights the
headline fought the background (measured at 1.52.0). Same shape, deeper stops. */
.swf-bts__scrim {
position: absolute; inset: 0;
background: radial-gradient(ellipse 82% 60% at 50% 50%, rgba(15,16,17,.92), rgba(15,16,17,.62) 68%, rgba(15,16,17,.42));
}
/* ⛔ `.swf-bts__eyebrow` REMOVED with its element — Neil, 2026-08-28: *"get rid of where it says
the mark scheme, in the section under the header hero."* The teal "The mark scheme" he liked is
the HEADER's badge (WD-425 #4) and is untouched; this was a second copy one section down. */
.swf-bts__credit {
position: absolute; right: 1.25rem; bottom: 1rem; z-index: 2; margin: 0;
font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(224,224,238,.42);
}
/* ⭐⭐ WD-452 — THEIR PADDING, RESTORED VERBATIM. Neil, 2026-08-29: *"ours is a lot smaller than
the original. Just make it exactly like the original. I don't really get why we've changed it…
I actually quite like that it's big and bold, because it forces the readers to read it."*
⚠️ THE REASONING THAT SHRANK IT WAS SOUND AND THE OUTCOME WAS STILL WRONG, which is the thing
worth remembering: the top padding was cut to close a "gap at the top" left by the removed
eyebrow and CTA. Correct as far as it went — and it quietly cost the one section whose entire
job is SCALE. The title is optically centred on its own ink by `rules.js` whatever the padding
is, so the asymmetry costs nothing in balance and buys back the prototype's presence. */
.swf-bts__inner {
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
/* ⭐⭐ WD-462 — THE CTA'S SLOT IS KEPT AS SPACE. Neil, 2026-08-29: *"look how small it is. If you
look at the original one, it's literally taking up like ninety percent of the viewport,
whereas ours are taking up like thirty percent… because it's taking up such a little bit of
the viewport, we can see the text underneath, and that pulls attention away from the statement
inside that big section, because that's the whole point."*
⭐ HE IS RIGHT, AND THE ARITHMETIC SAYS SO. The prototype's section at 1440x900 is
250 (pad-top) + ~285 (two 150px lines at line-height 1.1, less the -.1em/-.2em row margins)
+ 120 (`.bts__btnWrap` margin-top, `clamp(2.25rem, 8.33vw, 7.5rem)`)
+ 76 (the button: 31 + 31 padding + 14 line-height)
+ 150 (pad-bottom) = **~881px, i.e. 98% of the viewport.**
Ours had the two paddings and the type — and had DELETED the last two terms with the CTA, so
it measured 485px. Removing a button removed 196px of deliberate silence around the statement.
⛔ SO THE BUTTON'S SPACE STAYS, AND THAT IS HIS INSTRUCTION VERBATIM: *"I know in the original
there's also a call to action button, which increases the spacing, but maybe we should just
keep it the same size as the original. Just keep the same size."* No button, same box.
⚠️ Built from the prototype's OWN tokens rather than a measured pixel, so it stays right at
every width; the button term is a clamp because theirs is 76px on desktop and 51px on mobile
(its 860px rule: 17/18 padding + 16 line-height). */
padding: clamp(5rem, 17.36vw, 15.625rem) 1.25rem
calc(clamp(3.5rem, 10.4vw, 9.375rem) /* theirs, the real padding */
+ clamp(2.25rem, 8.33vw, 7.5rem) /* + the CTA's margin-top */
+ clamp(3.1875rem, 5.3vw, 4.75rem)); /* + the CTA's own height */
}
.swf-bts__title {
display: flex; flex-direction: column; width: 100%; text-align: center; margin: 0;
/* ⭐⭐ WD-459 — PLAYFAIR DISPLAY ITALIC, and it is the SAME RULE the bands follow, not an
exception to WD-453. Neil, 2026-08-29: *"reduce it to 1 line that hits the key points,
playfair display."*
⭐ THE PRINCIPLE, now consistent across the page: **a full-bleed photographic plate with type
over it takes the display face.** That is what a parallax band is (WD-457) and it is exactly
what this section is — six author plates behind one line. The sans belongs to STRUCTURE
(section and card headlines, questions, body); this is not structure, it is the same
furniture-on-a-picture as a band. WD-452 briefly set this in Proxima Soft under the
typeface-hierarchy ruling; that was the right rule applied to the wrong kind of section.
⚠️ Italic is not decoration here — BRAND.md carries Playfair Display Complete as an
ITALIC-ONLY face, so upright would fall back to a different cut. */
line-height: 1.1; font-family: var(--swf-display); font-style: italic; font-weight: 700;
/* theirs, MEASURED off the live page: 150px at 1440 and 266.667 at 2560 — exactly 100vw/1440,
with the tracking scaling too. The 2.5rem floor is ours; a phone needs one. */
font-size: max(2.5rem, calc(150 * var(--su)));
letter-spacing: calc(-4.5 * var(--su));
color: #f2f3f7;
}
/* ⛔⛔ WD-452 — THE PER-LINE `--fit` SHRINK IS GONE, AND SO IS `white-space: nowrap`.
That pair was the whole defect. `--fit` scaled each line down until it fitted on ONE line, so
a longer sentence rendered SMALLER — at 1440 the title was landing near 75px against the
prototype's 150px, i.e. half the size, and the cap had separately been cut 150 → 132 when the
lines still carried "1. " / "2. " numbering that no longer exists.
⭐ THEIRS IS ONE FIXED SIZE AND THE TEXT WRAPS. A sentence longer than the measure takes two
visual lines at full size instead of one line at half size — which is exactly the "big and bold"
he asked for, and it is what the prototype would do with our copy. Safe because the splitter
already wraps each WORD in an inline-block, so wrapping never breaks mid-word. */
/* ⛔ WD-462 — NO `--fit`, NO JS. The lines are short enough to sit at the prototype's own
`150 · --su` at every width ("Hit the criteria." is 17 characters ≈ 1140px against a 1400px
measure at 1440, and ≈ 306px against 350px at 390), so there is nothing to scale and the
section's height is now a pure function of CSS. Fitting was only ever needed because the copy
was too long — the right fix was the copy, which is Neil's call and he has made it. */
.swf-bts__line { display: block; text-align: center; }
.swf-bts__title > .swf-bts__line:nth-child(1) { margin-top: -0.1em; } /* theirs */
.swf-bts__title > .swf-bts__line:nth-child(2) { margin-top: -0.2em; } /* theirs */
/* ══════════════════════════════════════════════════════════════════════════════
WD-453 · THE TYPEFACE HIERARCHY, PUT BACK THE RIGHT WAY ROUND.
Neil, 2026-08-29: *"Playfair Display italics is starting to dominate, whereas it's actually
meant to be the other way around. Our main font is actually Proxima Soft, and the Playfair
Display italic is meant to be sort of like an accent, or is meant to provide a contrast that
draws attention. But we're doing it the other way around."*
MEASURED, not assumed: twelve rules on this page set `--swf-display`, and they covered every
band headline, every band paragraph, both deck card headlines and the card quotations. When
the display face is on EVERYTHING, it is no longer an accent — there is nothing left for it to
contrast against, and the page reads as a serif page with sans captions.
⭐ THE RULE APPLIED, per element: Playfair italic survives ONLY where it marks ONE thing —
the `` inside a band headline, `.swf-rulesec__small` ("genuinely", "every one of"), the
deck's big ghost numeral, and the examiner's quotation on a card (italic serif is the
conventional signal for someone else's words). Everything structural is Proxima Soft.
⛔⛔ THE BANDS ARE THE EXCEPTION, AND IT IS A STANDING RULE — NOT A ONE-OFF (Neil, 2026-08-29,
ruling on the band markup itself: *"the following sections should use Playfair Display italics.
That can be a standard thing."*).
⭐ **A PARALLAX BAND HEADLINE IS ALWAYS PLAYFAIR DISPLAY ITALIC.** Every `.swf-band__h` on every
funnel page, on every board, for ever — it is the one place the display face carries a whole
line rather than one word, because the band IS the accent: a full-bleed photographic plate that
interrupts the page between two blocks of reading. The type is furniture on a picture, not
structure, so the rule that flipped card and section headlines to Proxima Soft does NOT reach
it. WD-453 briefly scoped an override here that made them sans; it is deleted, and the site-wide
default (`.swf-band__h`, ~800 lines above) is once again the only rule that governs them —
which also keeps `/the-gap/` and `/watch/` identical to this page rather than quietly divergent.
⚠️ SO THE HIERARCHY HAS THREE TIERS, and the next model should not "fix" the middle one:
structure (section + card headlines, the exam question) ....... Proxima Soft
bands, and one-word accents inside a sans headline ............ Playfair Display italic
quotations and the ghost numeral .............................. Playfair Display italic
══════════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════════
WD-448 · EACH RULE GETS ITS OWN SECTION — the SPLIT HEADLINE.
Ported from `CSS Shine Effect/Sophicly Split Headline - PORT.html` (#B-515b, mechanism from
sondaven.com — all rights reserved, so MECHANISM ONLY: no markup, copy, colour or face of
theirs). Their constants, read from that file:
xPercent wrap([5, -1, -5]) → wrap([-5, 1, 5]) ease none
range top-bottom → bottom-top (the element's whole pass)
scrub 1s smoothing, reproduced as an exponential follow (TAU = scrub/3)
⭐ AND THE HALF THAT IS NOT IN THE JAVASCRIPT: the three rows are aligned `flex-end` / `center`
/ `flex-start` and the middle row carries a 20.5% right offset. Port the motion without the
alignment and it reads as three lines sliding, not a block breathing.
⭐ THE SIDE MARGIN IS DERIVED FROM THE DRIFT: theirs is more than double the travel by
construction (9.44vw margin against 4.05vw of drift), which is why the rows can never reach the
edge. Keep that relationship if the type size changes.
══════════════════════════════════════════════════════════════════════════════ */
/* ⛔⛔ NAMED `swf-rulesec`, NOT `swf-rule` — THAT CLASS WAS ALREADY TAKEN, by a horizontal-rule
divider (`width: 80px; height: 1px`) further up this same file. My section inherited the 80px
and collapsed to padding-only width (272px), with its heading measuring ZERO and the display
type spilling out of it as loose letters.
⭐ THE LESSON, and the ports already state it — the Split Headline port renamed sondaven's
`.services-*` for exactly this reason: a component class taken from the CONTENT's vocabulary
("rule" as in the two rules) collides with the same word used for STRUCTURE ("rule" as in
). Grep the stylesheet for a class before you claim it; a collision does not error, it
silently gives your section someone else's geometry. */
.swf-rulesec {
grid-column: full; position: relative;
/* ⭐ WD-481 — THE BAND TIER, not a fourth ladder. It was `clamp(80px, 18vh, 200px)`, which
measured **162px** at 1440×900 and, being vh-based, changed with the WINDOW'S HEIGHT while
every other section on this page changes with its WIDTH — two sections could not agree on a
gap. Vertical space is `--swf-band` / `--swf-sect` and nothing else (the ladder at the top of
this file). The INLINE padding is untouched: 9.44vw is the Risen row geometry the comment
above depends on. */
padding-block: var(--swf-band);
padding-inline: max(20px, 9.44vw);
/* ⚠️ clip, NEVER hidden — the rows translate sideways, and `hidden` is a scroll container that
will scroll itself the moment anything inside takes focus (their #B-509 lesson). */
overflow-x: clip;
/* ⭐ WD-481 — ON THE BRAND LADDER, IN BOTH THEMES. Was `#f4f3f7` / `#1c1d1f`, with a dark
override painting `#0f1011`. Neither hex is ours: `--swf-base` is the one step off the page
ground in BOTH themes (#f7f7f8 light · #242628 dark), which is what this alternating ground
is for. And `#1c1d1f` ink was near-black on white — the exact thing WD-386 ruled out
("Risen never put black on white"); `--swf-ink` is their #555. */
background: var(--swf-base); color: var(--swf-ink);
}
/* ⭐ TWO RULE SECTIONS MEET ON ONE GROUND, so the junction between them is a BEAT, not two
bands — band + band = 300px of empty ground between two headlines with no edge to justify it.
The model this page is held to allows exactly two junction values (2×sect, or sect+band); this
is the first. */
.swf-rulesec + .swf-rulesec { padding-top: var(--swf-sect); }
.swf-rulesec__inner { max-width: 1440px; margin: 0 auto; }
.swf-rulesec__eyebrow {
margin: 0; text-align: center; font-family: var(--swf-font); font-weight: 700;
font-size: .75rem; letter-spacing: .4em; text-transform: uppercase; color: #5333ed;
}
.swf-rulesec__head {
margin: clamp(24px, 5vh, 56px) 0 0; font-family: var(--swf-font); font-weight: 700;
font-size: clamp(38px, 10vw, 144px); line-height: .83; letter-spacing: -.064em;
text-transform: uppercase; will-change: transform;
}
.swf-rulesec__row {
display: flex; align-items: center;
transform: translateX(var(--x, 0)); will-change: transform;
}
.swf-rulesec__row--1 { justify-content: flex-end; }
.swf-rulesec__row--2 { justify-content: center; gap: 24px; padding-right: 20.5%; }
.swf-rulesec__row--3 { justify-content: flex-start; }
.swf-rulesec__small {
font-size: clamp(13px, 2.2vw, 32px); font-weight: 600; letter-spacing: .06em;
align-self: center; text-transform: none;
font-family: var(--swf-display); font-style: italic; color: #5333ed;
}
/* ⛔ `.swf-rulesec__note` IS GONE (2026-08-29, Neil): the two paragraphs under RULE ONE and RULE
TWO are deleted, so the rule that styled them is dead weight — it would only invite the next
model to put a paragraph back. The headline IS the rule. */
/* ⛔ THE DARK GROUND OVERRIDE IS GONE (WD-481) — `--swf-base` already flips, and a hardcoded
pair here is a second source of truth that drifts. The ACCENTS below stay: purple fails on
dark and mint is its replacement, which is a swap the tokens cannot make. */
html[data-theme='dark'] .swf-rulesec__eyebrow, html.dark .swf-rulesec__eyebrow { color: #7DF9E9; }
html[data-theme='dark'] .swf-rulesec__small, html.dark .swf-rulesec__small { color: #7DF9E9; }
@media (prefers-reduced-motion: reduce) {
/* theirs: reduced motion is a LAYOUT — the rows sit at their rest offsets, readable, still */
.swf-rulesec__row { transform: none !important; }
}
/* the CTA's slot, now the rules themselves (deviation) */
.swf-bts__rules {
position: relative; margin: clamp(2.25rem, 8.33vw, 7.5rem) 0 0; padding: 0;
list-style: none; display: grid; gap: var(--swf-lg);
width: 100%; max-width: 40rem; text-align: left;
}
.swf-bts__rules li { display: flex; gap: var(--swf-lg); align-items: baseline; }
.swf-bts__rules li + li { border-top: 1px solid rgba(224,224,238,.16); padding-top: var(--swf-lg); }
.swf-bts__rules span {
font-family: var(--swf-display); font-size: 1.9rem; line-height: 1; color: #51dacf;
min-width: 1.2rem; font-variant-numeric: tabular-nums;
}
.swf-bts__rules p { margin: 0; font-size: 1.08rem; line-height: 1.45; color: #cfd3de; }
@media (prefers-reduced-motion: reduce) { .swf-bts__bg { transform: none; } }
/* ── /top-grade-rules/ · THE CRITERIA, DECRYPTED (WD-430) ──────────────────────────────────
Replaces the ten-pane stack. The slider is ported from `Roll for Premium/Roll for Premium.html`:
a native `input[type=range]` whose value is mirrored onto `--slider-complete` (0-100), with the
track filled by `clip-path: inset(0 var(--inset) 0 0 round …)`. Their values, kept.
⛔ NO `opacity:0` ON THE PLAIN-ENGLISH BLOCK IN CSS. It is hidden by the driver only once the
driver is certain it can show it again — with no JS this section must read as a plain list
(root §4d). Same construction as the header layer and the two-rules section above. */
/* ⚠️ LIGHT IS THE BASE AND DARK IS STATED EXPLICITLY AT THE END OF THIS BLOCK — following the
convention established higher up this file, and for the reason MEASURED there: the host can
carry a stale `class="light"` on WHILE `data-theme="dark"` is set, so a dark-base /
`html.light`-override structure (which is how this section was first written) lights up in dark
mode. The explicit state must beat the default one, and must key on BOTH channels. */
/* ══════════════════════════════════════════════════════════════════════════════
/top-grade-rules/ · THE DECRYPTED CRITERIA (WD-444 rebuild — full brand pass)
Neil, 2026-08-29: *"you're using fonts that have nothing to do with our brand…
the cards are really boring… the spacing and sizing has got nothing to do with
our brand either."* All three faults were real and MEASURED:
· `.swf-dx__h` asked for `var(--swf-serif …)` — a token DEFINED NOWHERE — so the
biggest type in the section computed as **Georgia 700 upright** (the exact
silent-fallback failure BRAND.md §Playfair warns about).
· the cards were the hildenkaira prototype's pastel services-cards with our
words poured in: their em scale, their layout, `ui-monospace` for the one
thing the reader came to read.
· spacing was ad-hoc clamps, not the page's own --swf-band/--swf-sect/--swf-step.
THE REBUILD, and each choice traces to a source:
· intro heading = the HOUSE heading (`.swf-beat__h` pattern verbatim: Proxima
700, clamp(2rem → 3.9rem), -.03em, an accent word in Playfair italic).
· cards go DARK ON THE BRAND LADDER (#242628 base — BRAND.md Dark Base ladder;
the always-dark sidebar is the precedent for a dark surface in light theme).
They are identical in both themes; only the ground behind them swaps.
· type on the 1.25/16 ladder (BRAND.md §type): eyebrow/chips 13px CHROME ·
reading 20px · quote 20→25 fluid · title 39→49 DISPLAY fluid · ghost numeral
61→120 (DISPLAY carve-out: single-line display numerals may exceed).
· per-card accent, one each: mint #7DF9E9 · purple #a78bfa (dark-theme purple
accent per BRAND.md — #5333ed is a fill, never text on dark) · marker #ded6fb.
· zero borders — separation by contrast + purple-tinted shadow (this file's
own convention, line 20).
⛔ THE DEAL GEOMETRY IS UNTOUCHED — pin/container/list/item and the narrow
fallback are the verified WD-441 port and keep the prototype's em base.
══════════════════════════════════════════════════════════════════════════════ */
.swf-dx {
grid-column: full; position: relative;
/* ⭐⭐ WD-481 — `calc(var(--swf-band) * 2)` measured **300px**, and its first child is itself
a full band (150px), so the page paid **450px** above one headline and 462px at the seam
with `.swf-rulesec`. That is the dead space Neil photographed. A section whose children
carry their own band pays the BEAT tier, so every junction here lands on the model's
sect+band = 225px. */
padding-block: var(--swf-sect);
padding-inline: var(--swf-gutter);
/* WD-481: the brand ladder, both themes — see the note on `.swf-rulesec`. */
background: var(--swf-base); color: var(--swf-ink);
}
.swf-dx__intro { max-width: 46rem; margin: 0 auto; text-align: center; }
/* the HOUSE heading, centred — byte-matched to .swf-beat__h, not a cousin of it */
.swf-dx__h {
margin: 0 0 var(--swf-step);
font-family: var(--swf-font); font-weight: 700;
font-size: clamp(2rem, 1.1rem + 4vw, 3.9rem);
line-height: 1.02; letter-spacing: -.03em; color: #1c1d1f;
}
.swf-dx__h em {
font-family: var(--swf-display); font-style: italic; font-weight: 700;
letter-spacing: -.01em;
color: #5333ed; /* purple is "reserved for special moments" — this section is the page's one */
}
.swf-dx__stand {
margin: 0 auto; max-width: 34rem;
font-size: 1.25rem; line-height: 1.6; color: var(--swf-ink-soft); /* 20px — one ladder step up */
}
/* ══════════════════════════════════════════════════════════════════════════════
WD-468 · THE ASSESSMENT-OBJECTIVE PANELS — Image to Content, our parallax
Neil, 2026-08-29, replacing the card deck: *"something like the image to content style from
tympanus or codrops. But… they've got a weird sort of parallax. Why don't we replace their
parallax effect with ours?… there's, like, a navigation on the left. We don't need that…
the user can click on them to find out more about each assessment objective."*
Reference read before building: https://tympanus.net/Development/ImageToContent/
theirs, from `index.d73f7ad5.css` ours
.preview min-height 90vh .swf-ao__panel min-height min(68vh, 640px)
.preview__img overflow hidden .swf-ao__frame overflow clip
.preview__img-inner background 150% .swf-ao__img inset -30% 0, the band overhang
scrubbed yPercent `--swf-px`, the page's own parallax loop
.frame vertical-rl sticky index ⛔ not built — he said so
full-viewport .content-wrap an in-place split (see the deviation in the template)
⛔ THE DEAD `.swf-dc` DECK RULES ARE GONE, and only because they now have no consumer: the
markup that used them was replaced in the same change (root §3 — remove what YOUR change made
unused, never pre-existing dead code). Its full story, including the deletion that caused
WD-467, is in `~/.claude/handoffs/open/webdesign-FIXLIST.md`.
⚠️ `.swf-dc__lens` and `.swf-dc__hint` STAY — they are NOT the deck's. `rules.js` creates both
under those names for the mark-scheme paper's decrypt, and the paper restyles them at
`.swf-ms__paper .swf-dc__hint`. Deleting them because the prefix matched would have taken the
reticle and the phone's "Tap to reveal" button with them.
══════════════════════════════════════════════════════════════════════════════ */
.swf-ao { position: relative; }
.swf-ao__list {
width: min(80rem, 100%); margin: 0 auto;
padding-block: var(--swf-sect);
/* ⛔ WD-477 — THE GAP IS BACK, AND THE REASON IS THE RADIUS (Neil, 2026-08-30, after seeing it
flush): *"I can't tell whether it's better with or without the spacing... I think it's because
we've got the rounded corners without the spacing. It looks a bit weird. So just bring the
spacing back."* He is right about the cause: a rounded corner needs ground around it to read
as a corner at all. Ten rounded panels stacked flush make a column of pinched notches where
two radii meet, not one continuous surface. Removing the gap would only work with square
corners, which is a bigger change than the one he asked for. */
display: grid; gap: clamp(20px, 2.4vw, 34px);
}
/* ⭐ ONE PROPERTY CARRIES THE WHOLE OPEN — the grid template. Closed, the detail column is `0fr`
and the picture owns the panel; open, it is `1fr` and the picture squeezes to half while the
criterion grows in beside it. That IS "image to content", and it costs one transitionable
declaration instead of a full-viewport takeover and its four landmines.
⛔ `overflow: clip`, never `hidden` — this lane's standing rule: `hidden` makes a scroll
container, and this page is full of scroll machinery that would then have something new to
fight. `clip` clips identically and creates none. */
/* ⭐⭐ OPEN IS THE DEFAULT — IN THE CSS, NOT ONLY IN THE MARKUP (root §4d), and the first cut of
this file got it wrong. It shipped `grid-template-columns: 1fr 0fr` as the base, so with no JS
every criterion was collapsed to a zero-width column and the button that opens it did nothing:
the exact failure the template's own comment claimed to be avoiding. The closed state now hangs
off `.is-js`, which `rules.js` adds to the list only once it has bound the handler — so the
collapse cannot exist unless something is there to undo it. */
.swf-ao__panel {
/* ⭐⭐ THE CONTAINER IS WHAT STOPS THE TEXT RE-WRAPPING WHILE THE COLUMN OPENS — see the note on
`.swf-ao__detail-in`. `cqw` resolves against THIS box, which never changes width. */
container-type: inline-size;
position: relative; overflow: clip;
border-radius: var(--swf-r-lg);
min-height: min(68vh, 640px);
display: grid;
grid-template-areas: "media detail";
grid-template-columns: 1fr 1fr;
/* ⭐⭐ WD-470 — 300ms ON THE STANDARD CURVE, and both numbers come from `MOTION.md`, which Neil
told me to check. §3 Duration Scale: the open is UI FEEDBACK — he clicked and is waiting — so
it sits under the **400ms feedback ceiling** ("longer reads as broken"), on Standard
`cubic-bezier(0.4,0,0.2,1)`; `page`/section transitions are the 300 row. The old 720ms on the
arrival curve broke that ceiling by nearly double, and MOTION.md says in terms: "Never use
arrival timing on anything triggered by a click."
⭐ THE WHOLE GESTURE IS A `narrative` BEAT (1000-1800ms, "staged with overlap, never one slow
tween"): 300ms of space opening, THEN ~850ms of text decrypting = ~1.15s, staged. That is
exactly the order Neil described — *"it should open with no text, and then as soon as it's
finished, it just starts decrypting"* — and it is also what the brand doc already prescribed. */
transition: grid-template-columns .3s cubic-bezier(0.4, 0, 0.2, 1);
color: #f4f6fa;
box-shadow: 0 40px 90px -40px rgba(44,0,62,.5), 0 2px 6px rgba(20,10,40,.3);
}
.is-js .swf-ao__panel:not(.is-open) { grid-template-columns: 1fr 0fr; }
/* the picture, and the veil that makes type survivable on top of any photograph */
.swf-ao__frame { grid-area: media; position: relative; overflow: clip; min-width: 0; }
.swf-ao__img {
position: absolute;
/* ⛔ -30% PER SIDE, AND IT MUST MATCH `TRAVEL_RATIO` IN `funnel.js`. The travel is 30% of the
section height; anything less here and the layer's own edge slides into view at the end of
the range. The bands carry the same pair and the same comment. */
/* ⭐ WD-478 — THE OVERHANG IS NOW PUBLISHED PER BAND by `initParallax`, because Risen's travel
is a fraction of SCROLL DISTANCE (viewport-dependent) rather than of the section, so a short
section needs more headroom than a tall one. `--swf-oh` defaults to their 30% and only ever
grows. See the long note in `funnel.js`. */
/* ⭐⭐ WD-487 — RISEN'S LAYER GEOMETRY, VERBATIM. Read off their `theme.js` in our mirror:
function setSubPx(){ subPxImg.height( subPx.outerHeight() + subPx.outerHeight()*.3 ) }
and their `style.css`: `.subPxImg{position:absolute;top:0;left:0;right:0;bottom:0;…}`.
So the layer is ANCHORED AT THE TOP and 130% tall — the whole overhang hangs BELOW the
section. Ours had been `inset:-30% 0`, a 160% layer centred on the section: same MOTION, but a
different SLICE of the photograph (the middle of the picture instead of its top 77%). Neil:
*"I want it exactly the same as the Risen Church website."* Now it is.
⭐ `max(130%, 100% + 15vh)` is their 30% as a FLOOR: the bottom edge stays covered only while
0.15·vh ≤ overhang, and their bands are all taller than half a viewport; ours are not, so the
overhang grows where it must. The travel never changes — motion is what is seen. */
top: 0; left: 0; right: 0;
height: max(130%, calc(100% + 15vh));
background-size: cover; background-position: center;
transform: translate3d(0, var(--swf-px, 0px), 0);
will-change: transform;
}
/* ⭐ FAIL-SAFE, inherited from the bands: with `--swf-px` never set the fallback is 0px, so no-JS,
a script error or reduced motion gives a STILL PHOTOGRAPH, never a broken one. */
.swf-ao__veil {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(20,10,40,.30) 0%, rgba(20,10,40,.58) 46%, rgba(20,10,40,.86) 100%);
}
/* the face sits in the SAME grid area as the picture, so it shrinks with it on open */
/* ⛔ `align-content: end` IS LOAD-BEARING, and the symptom was not where it looked. MEASURED at
390: the Close button rendered as an 87px CIRCLE while its padding read an identical
`9.3px 17.25px` at both widths — so nothing was padding it. The face is a GRID with a 460px
floor and `align-content: normal`, i.e. STRETCH, so its four rows were inflated to fill
(85 / 72.6 / 119 / 95) and the button grew with the row it sat in. Packing the rows to the
bottom gives every child its natural height and fixes the spread-out face in the same
declaration. ⭐ Worth remembering as a class: a control that is the wrong SHAPE inside a grid is
usually its TRACK's fault, not its own — check `grid-template-rows` before touching padding. */
.swf-ao__face {
grid-area: media; position: relative; z-index: 2; min-width: 0;
align-self: end;
padding: clamp(26px, 3vw, 44px);
display: grid; gap: var(--swf-md); justify-items: start; align-content: end;
}
.swf-ao__code {
margin: 0; font-family: var(--swf-display); font-weight: 700; font-style: italic;
font-size: clamp(2.75rem, 1.6rem + 3.4vw, 5rem); line-height: .9;
letter-spacing: -.03em; color: #7DF9E9;
}
.swf-ao__skill {
margin: 0; max-width: 18ch;
font-family: var(--swf-font); font-weight: 700;
font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem);
line-height: 1.06; letter-spacing: -.03em; color: #fff;
}
.swf-ao__plain {
margin: 0; max-width: 42ch;
font-size: clamp(1rem, .95rem + .3vw, 1.25rem); line-height: 1.5; color: #e0e0ee;
}
/* ⭐ A REAL BUTTON — `.swf-ao__open` is not a link, because nothing navigates. Its two labels are
both in the markup and swapped by `aria-expanded`, so the control never depends on JS having
written text into it. */
.swf-ao__open {
margin-top: var(--swf-sm);
padding: .62em 1.15em; border: 0; border-radius: 999px;
background: #7DF9E9; color: #1C1D1F;
font: inherit; font-weight: 700; font-size: .9375rem; letter-spacing: .01em;
cursor: pointer; transition: transform .18s var(--swf-arrive), background .18s linear;
}
.swf-ao__open:hover { background: #a9fbf0; }
.swf-ao__open:active { transform: scale(.97); }
.swf-ao__open:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.swf-ao__open-off { display: none; }
.swf-ao__open[aria-expanded="true"] .swf-ao__open-on { display: none; }
.swf-ao__open[aria-expanded="true"] .swf-ao__open-off { display: inline; }
/* the content half */
.swf-ao__detail {
grid-area: detail; position: relative; z-index: 2;
overflow: hidden; min-width: 0;
background: #242628;
}
/* ⛔⛔ ABSOLUTE, AND IT IS A CORRECTNESS FIX RATHER THAN A LAYOUT PREFERENCE. MEASURED on the
first build: a closed panel rendered **3497px tall** instead of its 640px floor. A `0fr` COLUMN
is zero-WIDE, but its item still lays out at that width — so the criterion wrapped to roughly
one character per line and the grid ROW grew to fit the resulting tower. Taking the content out
of flow means the closed column contributes no height at all, and the panel is sized by the
photograph as intended.
⚠️ THE PHONE DOES NOT HAVE THIS BUG AND MUST NOT GET THIS FIX: there the `0fr` is the ROW
itself, so it is simply zero-high and the content sizes it correctly when open. The override is
in the 900px block, and inverting the two is how this returns.
⭐ `inset: 0` + `overflow-y: auto` also means a long criterion scrolls its own box instead of
pushing the Close button past the fold — root §CONTENT MUST SCROLL. */
/* ⭐⭐ WD-469 — `width: 50cqw` IS THE WHOLE FIX FOR "the way that the text animates… looks weird"
(Neil, 2026-08-30), and the cause was measured rather than guessed. Sampling the criterion's
own box across one open, its height stepped:
2701 → 1415 → 515 → 322 → 289 → 225 → 161 → 129 → 96 → 64px
Ten distinct heights in 0.72s. The text was laid out at the COLUMN's animating width, so it
started as a one-character-per-line tower and re-wrapped on **every frame** — words visibly
cascading and collapsing into place. It is the same root as the 3497px panel: content sized by
a track that is still moving.
⇒ `cqw` resolves against `.swf-ao__panel`, whose width is CONSTANT, so the criterion is wrapped
ONCE at its final measure and the growing column simply UNCOVERS it. A wipe, not a reflow.
⛔ Do not "simplify" this to `width: 100%` or `inset: 0`: both resolve against `.swf-ao__detail`,
which is the animating box, and the cascade comes straight back. */
/* ⛔ PINNED TO THE **RIGHT**, and that is what makes this a WIPE rather than a SLIDE. The detail
column grows leftward — its right edge is fixed at the panel edge and its left edge travels from
1280 to 640. Pinned `left: 0` the text rides that moving edge and slides in from off-panel;
pinned `right: 0` it is STATIONARY at 640-1280 the whole time and the widening column simply
uncovers it. Same single property, and the difference between the two is the whole feel of the
open. ⭐ The sweep follows the same direction (right to left) — see `SWEEP_DIR` in `rules.js`,
which is their `directional: true`. */
.swf-ao__detail-in {
position: absolute; top: 0; bottom: 0; right: 0; left: auto;
width: 50cqw;
padding: clamp(26px, 3vw, 44px);
display: flex; flex-direction: column; justify-content: center; gap: var(--swf-lg);
min-height: 0; overflow-y: auto;
}
.swf-ao__label {
margin: 0; font-size: .8125rem; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase; color: #9da5b4;
}
.swf-ao__quote { margin: 0; }
.swf-ao__quote p {
margin: 0; max-width: 44ch;
font-family: var(--swf-display); font-style: italic; font-weight: 400;
font-size: clamp(1.1875rem, 1rem + .7vw, 1.5rem); line-height: 1.34; color: #f4f6fa;
}
.swf-ao__where {
margin-top: var(--swf-sm);
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--swf-md) var(--swf-xl);
}
.swf-ao__nat, .swf-ao__map li {
margin: 0; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: #9da5b4;
}
.swf-ao__nat b, .swf-ao__map b { margin-left: .5em; letter-spacing: .1em; color: #7DF9E9; }
.swf-ao__map {
margin: 0; padding: 0; list-style: none;
display: flex; flex-wrap: wrap; gap: var(--swf-md) var(--swf-xl);
}
/* ── WD-469 · the ASCII sweep's three character states ─────────────────────────────────────
Ported from Canvas UI's ASCII Sweep, whose shader paints the same three: ahead of the band the
OLD panel, inside the band a glyph, behind it the new content with a glowing trail.
⭐ THEIR `glow: 2` AND `tint: 0.75` ARE WHAT MAKE IT READ AS A SWEEP rather than as a fade —
the band burns, the trail cools, and only then does the real character settle. Take the glow
out and it is a wipe.
⛔ `data-on="off"` IS ONLY INVISIBLE UNDER `.is-sweeping`, which `rules.js` adds when a sweep
actually starts and removes when it settles. Hiding it unconditionally would mean any failure
between wrapping the text and settling it — a thrown error, an unmeasurable box, an observer
that never fires — left the criterion permanently blank (root §4d). */
.swf-ao__ch { transition: color .14s linear; }
.is-sweeping .swf-ao__ch[data-on="off"] { opacity: 0; }
.swf-ao__ch[data-on="band"] {
color: #7DF9E9; /* deviation 2 — theirs is #4ade80 */
text-shadow: 0 0 8px rgba(125,249,233,.95), 0 0 18px rgba(125,249,233,.55);
transition: none;
}
.swf-ao__ch[data-on="trail"] {
color: #d8fffa;
text-shadow: 0 0 6px rgba(125,249,233,.45);
transition: none;
}
.swf-ao__ch[data-on="on"] { color: inherit; text-shadow: none; }
/* WD-503 — the resting state of an unread face: noise, dimmed, no glow. Visible by design (it is
the "coded" promise the panels make); the sweep, not a stylesheet, turns it into words. */
.swf-ao__ch[data-on="cipher"] { opacity: .55; color: inherit; text-shadow: none; }
@media (prefers-reduced-motion: reduce) {
.swf-ao__ch { transition: none; }
}
/* ⛔ NO SIDE-BY-SIDE SPLIT ON A PHONE. Half of a 390px panel is 195px, which is neither a
photograph nor a column of text. The same one-property open runs on ROWS instead. */
@media (max-width: 900px) {
.swf-ao__panel {
grid-template-areas: "media" "detail";
grid-template-columns: 1fr;
grid-template-rows: auto auto;
transition: grid-template-rows .3s cubic-bezier(0.4, 0, 0.2, 1);
min-height: 0;
}
.is-js .swf-ao__panel:not(.is-open) { grid-template-columns: 1fr; grid-template-rows: auto 0fr; }
.swf-ao__frame, .swf-ao__face { grid-area: media; }
.swf-ao__frame, .swf-ao__face { min-height: min(58vh, 460px); }
/* ⭐ BACK INTO FLOW — see the note on `.swf-ao__detail-in`. Here the collapsed track is the ROW,
so the content must size it; absolute positioning would give an open panel a 0px detail. */
/* ⭐ AND `50cqw` GOES WITH IT: the phone animates the ROW, so the width never changes and there
is nothing to re-wrap. Back into flow at full width, per the note above. */
.swf-ao__detail-in {
position: static; width: auto; inset: auto; overflow: visible;
padding-block: clamp(24px, 6vw, 34px);
}
}
@media (prefers-reduced-motion: reduce) {
/* ⭐ A LAYOUT, NOT A SLOWER VERSION — the panel opens instantly and the picture never moves. */
.swf-ao__panel { transition: none; }
.swf-ao__img { transform: none; }
.swf-ao__open { transition: none; }
}
/* ══════════════════════════════════════════════════════════════════════════════
WD-466 · THE MARK SCHEME PAGE — restored. Neil: *"I wanted a page, like how we had it before,
and in that page they could decrypt the text."* The canvas wall is withdrawn; the sheet is back,
carrying the general principles instead of one question. The decrypt is the DOM engine again,
per character, which is what it is good at.
⛔ PERMANENTLY-LIGHT ISLAND — a picture of a piece of paper. Every colour is NAMED, because
`--swf-mint` is Brand Deep Purple in light theme and would flip the ink out from under it.
══════════════════════════════════════════════════════════════════════════════ */
.swf-ms {
/* WD-481: was `calc(var(--swf-band) * 1.4)` = 210px — a fifth multiplier nothing else uses,
and it sat under a band's 150px, so 360px separated the headline from the paper it names.
The paper is a reading region inside `.swf-dx`'s ground: the BEAT tier. */
grid-column: full; padding-block: var(--swf-sect);
padding-inline: var(--swf-gutter);
display: flex; justify-content: center;
}
.swf-ms__stack { position: relative; width: 62rem; max-width: 100%; }
/* the three sheets under the paper — the reference's own transforms, verbatim (WD-450) */
.swf-ms__sheet {
position: absolute; inset: 0; border-radius: 2px;
box-shadow: 0 24px 50px -34px rgba(20,10,40,.5); pointer-events: none;
}
.swf-ms__sheet--1 { z-index: 1; background: #F4F1EA; transform: rotate(-2.29061deg) skew(-.572252deg, 0deg) scale(1.0008, 1.0004); }
.swf-ms__sheet--2 { z-index: 2; background: #FFFFFF; transform: rotate(-.57294deg) scale(1.00005, 1.00005); }
.swf-ms__sheet--3 { z-index: 3; background: #F4F1EA; transform: rotate(1.71836deg) scale(1.00045, 1.00045); }
.swf-ms__paper {
/* the engine's palette. On white stock the mint is invisible, so the cipher and its wavefront
are Sophicly purple — noise you can actually see. */
--dc-acc: #5333ed; --dc-acc-rgb: 83,51,237;
position: relative; z-index: 4; overflow: hidden; cursor: none;
padding: clamp(26px, 4vw, 60px) clamp(20px, 3.6vw, 56px) clamp(30px, 4vw, 60px);
border-radius: 2px; background: #FFFFFF; color: #1c1d1f; font-family: var(--swf-font);
box-shadow: 0 40px 80px -40px rgba(20,10,40,.55), 0 2px 4px rgba(20,10,40,.12);
}
/* the stock's own tooth — a whisper of ruling, so it reads as paper and not a white div */
.swf-ms__paper::before {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background:
radial-gradient(120% 90% at 88% -8%, rgba(83,51,237,.05), transparent 58%),
repeating-linear-gradient(180deg, rgba(28,29,31,.032) 0 1px, transparent 1px 28px);
}
.swf-ms__paper > * { position: relative; z-index: 1; }
.swf-ms__paper.is-plain { cursor: auto; }
/* ⭐ WD-467 — THE MASTHEAD IS A STAMP. It was a 11-14px right-aligned caption and Neil could not
see what the page was: *"maybe we need to have it somewhere a bit more prominent that it's about
the mark scheme."* The stamp reads first, the qualification reads second, and the 2px rule under
both is the thing that makes a white div look like a printed document. */
.swf-ms__masthead {
margin: 0 0 clamp(20px, 3vw, 36px); padding-bottom: var(--swf-md);
border-bottom: 2px solid #1c1d1f;
display: flex; flex-wrap: wrap; align-items: baseline;
gap: var(--swf-md) clamp(12px, 2vw, 22px);
color: #1c1d1f;
}
.swf-ms__stamp {
padding: .34em .7em .3em; border-radius: 2px;
background: #5333ed; color: #fff;
font-weight: 700; font-size: clamp(13px, 1.35vw, 19px);
letter-spacing: .16em; text-transform: uppercase;
}
.swf-ms__mastline {
margin-left: auto; /* the qualification sits opposite, as on a real cover */
font-weight: 600; font-size: clamp(11px, 1.05vw, 14px);
letter-spacing: .1em; text-transform: uppercase;
}
.swf-ms__title { margin-bottom: clamp(22px, 3vw, 36px); }
.swf-ms__qline {
margin: 0; font-weight: 700; font-size: clamp(11px, 1.05vw, 13px);
letter-spacing: .16em; text-transform: uppercase; color: #55555f;
}
/* ⭐⭐ WD-467 — "Nine words for a grade nine", on TWO lines, and the size came off the arithmetic
rather than off the eye (WML CLAUDE.md §ALIGNMENT/GEOMETRY: solve it on paper first).
content width = 62rem sheet - 2 x clamp(20,3.6vw,56) padding - the 30px indent = ~850px
longest line = "for a grade nine", 16 characters
at the old 104px cap, 16 x ~.50em advance = ~832px
832 into 850 is a 2% margin on an ESTIMATED advance, i.e. a line that overflows on any font
fallback or any narrower sheet. Capped at 88px it measures ~704px and has real air, and TWO
lines at 88px still stand taller on the page than ONE line at 104px did. */
.swf-ms__ao {
position: relative; display: inline-block; margin: .1em 0 0 clamp(12px, 2vw, 30px);
/* ⛔ WD-480 — TRACKING BACK TO NORMAL. Neil: *"why the words so squashed together? Have we done
something to the kerning there?"* We had: `letter-spacing: -.04em`, which at 88px is −3.5px in
every gap — my value, not a ported one. The sheet is a printed document, and printed documents
do not tighten their display type. Removed rather than reduced. */
font-weight: 700; font-size: clamp(40px, 6.4vw, 88px); line-height: .9;
color: #1c1d1f;
}
/* ⭐⭐ THE GHOST HOLDS THE BOX. Cipher glyphs are proportional, so an enciphered heading is a
different width every frame — at this size that is a headline that shakes and a ring that
chases it. Ghost and cipher share one grid cell: the ghost is hidden but still lays out, so the
box is the REAL text's box for ever and the scramble happens inside it. */
.swf-ms__aoline { display: grid; }
.swf-ms__aoline > * { grid-area: 1 / 1; }
.swf-ms__aoghost { visibility: hidden; }
/* ⛔ STRETCHES TO THE BLOCK, and the stroke does not stretch with it — see the template's note.
Without `preserveAspectRatio="none"` a path drawn at 260x150 scaled by width alone lies as a
flat band across the middle of a two-line heading. */
/* ⛔⛔ `max-width: none` IS LOAD-BEARING AND WAS MISSING ALL ALONG. The theme ships a global
`svg { max-width: 100% }` (this file already fights it at `.swf-rb__band svg`, line ~1184), so
the ring's `width: 124%` had been silently clamped to 100% since it was written — MEASURED
after the two-line change: ring box 574px against a heading box of 574px, i.e. a circle drawn
exactly ON the words instead of around them. A percentage that quietly becomes 100% is the
worst kind of CSS bug: it still looks roughly right on a single short line, which is why it
survived. */
.swf-ms__ring {
position: absolute; z-index: -1; left: 50%; top: 52%;
width: 114%; height: 128%; max-width: none;
transform: translate(-50%, -50%); color: #5333ed;
}
.swf-ms__q {
margin: clamp(14px, 2vw, 20px) 0 0; max-width: 40ch;
font-family: var(--swf-font); font-weight: 700; font-style: normal;
font-size: clamp(1.0625rem, .95rem + .7vw, 1.5rem); line-height: 1.3; color: #1c1d1f;
}
.swf-ms__squiggle {
display: block; width: clamp(120px, 14vw, 180px); height: auto;
margin: clamp(14px, 2vw, 22px) 0 0; color: #1c1d1f;
}
/* the criteria table — hairlines and a tinted head row, the shape a student recognises */
.swf-ms__table { width: 100%; border-collapse: collapse; table-layout: fixed; border: 1px solid rgba(28,29,31,.55); }
.swf-ms__table th, .swf-ms__table td {
border: 1px solid rgba(28,29,31,.4); padding: clamp(9px, 1.1vw, 14px);
vertical-align: top; text-align: left;
}
.swf-ms__table thead th {
background: rgba(28,29,31,.05); font-weight: 700; font-size: clamp(11px, .9vw, 13px);
letter-spacing: .08em; text-transform: uppercase; color: #1c1d1f;
}
.swf-ms__table thead th:first-child { width: 26%; }
.swf-ms__table tbody th b {
font-weight: 700; font-size: clamp(14px, 1.15vw, 18px); color: #1c1d1f; letter-spacing: -.01em;
}
.swf-ms__table td p { margin: 0; font-size: clamp(13px, 1.02vw, 15.5px); line-height: 1.45; color: #1c1d1f; }
.swf-ms__src {
margin: clamp(18px, 2.4vw, 28px) 0 0;
font-size: clamp(12px, .95vw, 14px); line-height: 1.5; color: #55555f;
}
/* the paper owns the lens + the hint the cards used to */
.swf-ms__paper .swf-dc__lens { z-index: 3; }
.swf-ms__paper .swf-dc__hint {
opacity: 1; right: clamp(20px, 3.6vw, 56px); top: clamp(66px, 8vw, 104px);
background: #5333ed; color: #fff; /* opaque: it sits on printed stock, not on glass */
}
.swf-ms__paper.is-lit .swf-dc__hint, .swf-ms__paper.is-plain .swf-dc__hint { opacity: 0; }
/* ⚠️ DARK THEME TAKES THE GLARE OFF THE STOCK, NOTHING MORE. A sheet of paper does not invert. */
html[data-theme='dark'] .swf-ms__paper, html.dark .swf-ms__paper { background: #EDE9E0; }
html[data-theme='dark'] .swf-ms__sheet--2, html.dark .swf-ms__sheet--2 { background: #EDE9E0; }
html[data-theme='dark'] .swf-ms__sheet--1, html[data-theme='dark'] .swf-ms__sheet--3,
html.dark .swf-ms__sheet--1, html.dark .swf-ms__sheet--3 { background: #E2DDD2; }
@media (max-width: 700px) {
/* ⛔ NO SIDE-BY-SIDE TABLE ON A PHONE — a 26% term column leaves the meaning at ~4 words a line. */
.swf-ms__table, .swf-ms__table tbody, .swf-ms__table tr, .swf-ms__table td { display: block; width: 100%; }
.swf-ms__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.swf-ms__table tbody th { display: block; width: 100%; text-align: left; background: rgba(28,29,31,.05); }
.swf-ms__table tr + tr { margin-top: -1px; }
/* ⛔ the stamp keeps the left edge and the qualification drops under it — `margin-left:auto`
on a wrapped flex line shoves it to the far right, alone, which reads as a stray label. */
.swf-ms__mastline { margin-left: 0; }
/* ⭐ MEASURED IN THE BROWSER AT 390, and the first arithmetic for this was WRONG in a way worth
recording: the usable width is not the viewport minus gutters, it is **234px** — the paper
renders 286px wide inside the section's own gutters, less its 20px padding each side and the
12px heading indent. Driven at three sizes against that real number:
34px → "for a grade nine" measures 227px, ONE line each, heading box 61px tall ✔
40px → hits the 234px cap and wraps, heading box 108px — a THREE-line heading, and the
ring (sized for two) then cuts straight through the last line
So the floor is 34px. ⛔ Do not raise it from a desktop-shaped estimate of the width. */
.swf-ms__ao { font-size: clamp(34px, 8.4vw, 46px); }
/* ⛔ `position: absolute` RESTATED: the deck's own 900px block sets `.swf-dc__hint{position:static}`,
unscoped and later in the file, which dropped this chip to the bottom of the sheet (WD-460). */
.swf-ms__paper .swf-dc__hint {
position: absolute; right: 16px; top: 62px; padding: 5px 12px; font-size: .6875rem;
}
}
/* ── the decrypt, ported from Canvas UI (WD-445) ──────────────────────────── */
/* ⛔ WD-447: the cards no longer encipher, so they no longer hide the cursor. */
/* the pointer reticle — shows where the decrypt field is centred */
.swf-dc__lens {
position: absolute; z-index: 3; left: 0; top: 0; width: 26px; height: 26px;
margin: -13px 0 0 -13px; border-radius: 50%;
border: 1px solid rgba(var(--dc-acc-rgb), .55);
background: radial-gradient(circle, rgba(var(--dc-acc-rgb), .16), transparent 70%);
opacity: 0; transition: opacity .18s linear; pointer-events: none;
}
.is-lit .swf-dc__lens { opacity: 1; }
/* the prompt — a card that looks like noise must SAY it can be opened (root §4d) */
.swf-dc__hint {
/* ⚠️ TOP-RIGHT, not bottom-centre: at the foot it sat on top of the board-mapping row, which
is itself content. The eyebrow line is the only always-empty corner of the card. */
position: absolute; z-index: 3; right: clamp(24px, 4vw, 56px); top: clamp(28px, 4vw, 52px);
margin: 0; padding: 7px 16px; border-radius: 999px;
background: rgba(var(--dc-acc-rgb), .12); color: var(--dc-acc);
font-family: var(--swf-font); font-weight: 700; font-size: .75rem;
letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
transition: opacity .3s var(--swf-arrive); pointer-events: none;
}
/* ⭐⭐ WD-460 — ON TOUCH THE CHIP IS A BUTTON, so it must be able to receive the tap. The ``
above is `pointer-events: none` (correct: on a pointing device it is a label over a hover
field). A button that cannot be pressed is the same broken promise in a new costume, so the
element type carries the behaviour rather than a media query guessing at it. */
button.swf-dc__hint {
pointer-events: auto; cursor: pointer; border: 0; font: inherit;
font-family: var(--swf-font); font-weight: 700; font-size: .75rem;
letter-spacing: .12em; text-transform: uppercase;
/* a real touch target — 44px is the smallest Apple will call one */
min-height: 44px; padding-inline: 18px;
-webkit-tap-highlight-color: transparent;
}
button.swf-dc__hint:active { transform: scale(.97); }
button.swf-dc__hint:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* ⛔ ONE HINT AT MOST. Six cards in a pile all peek out at the top, so six chips were visible at
once. The card decrypts itself on arrival now, so the hint is only a nudge for the second way
in (hover) and only ever belongs on the card actually being read. */
.swf-dc__hint { opacity: 0; }
/* ⭐ THE THREE GLYPH STATES, mirroring the reference's shader: cipher · wavefront · plain.
`edgeGlow: 2` and `edgeTint: 0.75` are theirs — the ring burns brighter and tints hard toward
the cipher colour, which is what makes the decrypt read as a wave rather than a fade. */
/* the word wrapper (WD-450) — every glyph is an inline-block, so without this the line-breaker
may break INSIDE a word. It is the enciphered text's only defence against that. */
.swf-dx__w { display: inline-block; white-space: nowrap; }
.swf-dx__ch { transition: color .12s linear; }
.swf-dx__ch[data-on="0"] { color: rgba(var(--dc-acc-rgb), .55); }
.swf-dx__ch[data-on="e"] { /* on the wavefront */
color: var(--dc-acc);
text-shadow: 0 0 10px rgba(var(--dc-acc-rgb), .85);
transition: none;
}
.swf-dx__ch[data-on="1"] { color: inherit; }
/* ⭐⭐ WD-460 — `.is-plain` IS AUTHORITATIVE, and this is a correctness fix, not a tidy-up.
MEASURED after the touch reveal: `goPlain()` restores every character's REAL TEXT (probed:
`firstCharText === firstCharReal`) but the `data-on` attribute was still reading `0`, so the
sheet rendered the true words in the CIPHER COLOUR — lavender at 55% on white paper. The
student taps "Tap to reveal", the mark scheme does appear, and it appears almost unreadable.
⛔ The lesson: TWO SOURCES OF TRUTH FOR ONE STATE. `data-on` is written per-frame by the paint
loop and `.is-plain` is written once by the reveal, so any frame that lands after the reveal
can quietly contradict it — a race that is invisible on desktop, where the pointer field keeps
repainting anyway. The panel-level class is the one that cannot be raced, so it wins outright
and the per-character attribute is left to the animation it belongs to. */
.is-plain .swf-dx__ch { color: inherit; text-shadow: none; }
/* ⛔⛔ THE DECK'S OWN 900px BLOCK IS DELETED WITH THE DECK — and one line of it was doing HARM,
which is worth recording because it is the twin of WD-467. It carried
`.swf-dc__hint { position: static }`, written for the CARD, unscoped. The cards are gone, so
that rule's only remaining subject was the MARK SCHEME's decrypt chip — and being later in the
file it beat the chip's own `position: absolute`. WD-460 had already been bitten by this and
patched it back at `max-width: 700`, which left **701-900px still broken**: the "Hover to
decrypt" chip dropped out of the corner and into the flow of the sheet, at every tablet width.
Deleting the deck fixes a bug nobody had reported yet. ⚠️ The `max-width: 700` restatement in
the paper's own block STAYS — it is correct, it is scoped, and it costs nothing. */
@media (prefers-reduced-motion: reduce) {
.swf-dx__ch { transition: none; }
}
/* ── dark theme: the GROUND swaps; the cards are already the dark ladder ──── */
/* ⛔ the GROUND override is gone (WD-481) — `--swf-base` flips on its own. */
html[data-theme='dark'] .swf-dx__h,
html.dark .swf-dx__h { color: var(--swf-ink); }
html[data-theme='dark'] .swf-dx__h em,
html.dark .swf-dx__h em { color: #7DF9E9; } /* purple text fails on dark; mint is the dark accent */
html[data-theme='dark'] .swf-dx__stand,
html.dark .swf-dx__stand { color: var(--swf-ink-soft); }
/* ══════════════════════════════════════════════════════════════════════════════
WD-448 · THE WORD TUNNEL — the practice reminder, immediately before the CTA.
Neil, 2026-08-29: *"just before the call to action at the end to take the assessment, we should
have a section where we remind them that everything that they've just gone through is just a
theory. Until they actually put it into practice, it doesn't really matter."*
Ported from `CSS Shine Effect/Sophicly Word Tunnel - PORT.html` (#B-578). Their geometry:
seven layers, scale 0.85^i (1 · .85 · .7225 · .614125 · .52200625 · .4437053125 · .377149…)
layer 1 is IN FLOW and never scales — it sets the section's height; 2-7 are absolute inset 0
range start = trigger top reaches viewport CENTRE · end = trigger bottom reaches top
ease power3.out → e = 1 − (1 − p)³
⭐ The port already carries the word PRACTICE and the line "nothing here works unless you keep
coming back to it" — it was built for exactly this argument, so the adaptation is copy only.
⛔ ONE token published per frame (`--e`); everything else is CSS. Do not re-derive per layer.
══════════════════════════════════════════════════════════════════════════════ */
.swf-tunnel {
grid-column: full; position: relative; padding-top: 16px;
/* ⭐⭐ WD-481 — THE TUNNEL NOW ANSWERS THE THEME. It was `#070707` on `#eaeaea` in BOTH
themes: a near-black that is not on our dark ladder (`--swf-page` is #1c1d1f) and a black
panel dropped into a white page in light. Neil: *"everything apart from the general header
hero need to support our light and dark theme colours."*
⭐ The depth is pure `scale` on the layers — no gradient, no opacity, nothing that needs a
dark ground — so the corridor reads identically with the ground inverted: receding words in
`--swf-ink` on `--swf-page`. */
background: var(--swf-page); color: var(--swf-ink); overflow: clip;
}
.swf-tunnel__header { padding: clamp(48px, 8vh, 96px) var(--swf-gutter) 0; max-width: 1440px; margin: 0 auto; }
.swf-tunnel__eyebrow {
margin: 0 0 var(--swf-lg); display: flex; align-items: center; gap: var(--swf-md);
font-family: var(--swf-font); font-weight: 700; font-size: .75rem;
/* the accent token, not the literal — `--swf-mint` is mint on dark and Brand Deep Purple
(#2c003e) on light, which is the pair this page uses everywhere else. */
letter-spacing: .3em; text-transform: uppercase; color: var(--swf-mint);
}
.swf-tunnel__eyebrow::before {
content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--swf-mint);
}
.swf-tunnel__h {
margin: 0; max-width: 20ch;
font-family: var(--swf-font); font-weight: 500;
font-size: clamp(2rem, 1.2rem + 3.4vw, 3.9375rem); /* 31 → 63, DISPLAY */
line-height: 1.05; letter-spacing: -.02em; color: var(--swf-ink);
}
/* ⭐⭐ WD-449 — THE PIN. Stated deviation from the port (root §13): theirs runs the scrub across
the section's own pass through the viewport, which works because on their page the section is
the only thing on screen. Ours sits under a heading, so by the time the words cleared the fold
`--e` was already 0.67 — measured. The track owns the scroll; the content sticks and plays the
whole 0 → 1 while pinned, so the reader ARRIVES at one word and watches it become a tunnel.
⚠️ Layer height follows the pin: 100svh, not their 125svh, or the layers overflow the pinned
box and the crosshair no longer sits at the centre of what you can see. */
.swf-tunnel__track { position: relative; height: 320vh; }
.swf-tunnel__content {
position: sticky; top: 0; height: 100svh; overflow: hidden;
/* ⭐⭐ IT FADES OUT AS IT LEAVES (Neil, 2026-08-30): *"is there any way that when it scrolls out
of view, it dims to, like, zero opacity, so it doesn't take away attention from the section
where it says get my child's free five minute assessment?"*
⭐ THE RAMP IS KEYED TO THE CONTENT'S OWN EXIT, NOT TO THE PIN'S PROGRESS, and the difference
matters. The track is 320vh, so fading over "the last 20% of the pin" would leave ~64vh of
scrolling with nothing on screen. Keyed to the exit, it is 1 for the whole pinned run and only
falls as the panel physically rises out of the viewport — which is what he described.
Published per frame as `--swf-tunnel-fade` by the same driver that owns `--e`; a stylesheet
alone cannot see the exit. Default 1, so no JS = no fade rather than an invisible section. */
opacity: var(--swf-tunnel-fade, 1);
}
.swf-tunnel__layer {
--t: 1; /* this layer's scale target */
position: absolute; inset: 0;
min-height: 100svh; padding: 16px;
display: flex; flex-flow: column; justify-content: space-between;
gap: clamp(7rem, 11.73rem + 1.887vw, 14rem);
background: var(--swf-page); color: var(--swf-ink);
transform: scale(calc(1 - (1 - var(--t)) * var(--e, 0)));
transform-origin: center center; will-change: transform;
}
.swf-tunnel__layer.is-abs { position: absolute; inset: 0; } /* every layer is, now the box is fixed */
/* 0.85^1 … 0.85^6 — theirs, in DOM order */
.swf-tunnel__layer.is-abs:nth-of-type(2) { --t: .85 }
.swf-tunnel__layer.is-abs:nth-of-type(3) { --t: .7225 }
.swf-tunnel__layer.is-abs:nth-of-type(4) { --t: .614125 }
.swf-tunnel__layer.is-abs:nth-of-type(5) { --t: .52200625 }
.swf-tunnel__layer.is-abs:nth-of-type(6) { --t: .4437053125 }
.swf-tunnel__layer.is-abs:nth-of-type(7) { --t: .377149515625 }
.swf-tunnel__word { display: block; width: 100%; height: auto; margin: 0; color: var(--swf-ink); }
/* ⭐⭐ WD-471 — `geometricPrecision` IS THE ANTI-WOBBLE. Neil, 2026-08-30: *"as it's working, the
text is sort of wobbling… it looks a bit weird how it's wobbling."*
MEASURED FIRST, and the measurement is what rules out the obvious suspects: driving the pin in
60 fine steps, `--e` is MONOTONIC (0 non-monotonic samples), the track height never changes
(2880px at every sample), the layer's scale runs 0.89291 → 0.7344 with **0 sign flips** in its
width delta, and the word's screen x moves smoothly. So the scrub is not jittering and nothing
is relaying out — **the geometry is clean, and the wobble is therefore in the RASTER**.
⇒ By default a browser GRID-FITS glyphs (hints them onto the pixel grid) and re-does it every
time the scale changes, so each frame snaps letters to slightly different positions — text that
breathes. `geometricPrecision` turns hinting off and renders from the outlines, which is exactly
what a continuously scaled word needs.
⚠️ HONEST LABEL: the first three facts are measured; that the residue is raster-level is
inference from having excluded everything else, and only a real screen in motion can confirm it.
⭐ AND `lengthAdjust` DROPS FROM `spacingAndGlyphs` TO THE DEFAULT `spacing` (in the template):
`spacingAndGlyphs` stretches the GLYPHS themselves to hit `textLength`, so every re-raster
redistributes letter shapes as well as gaps — the same artefact, doubled. `spacing` still spans
the viewBox exactly; it just moves the gaps. */
.swf-tunnel__word text {
font-family: var(--swf-font); font-weight: 600; font-size: 325px; fill: currentColor;
text-rendering: geometricPrecision;
}
.swf-tunnel__focus {
position: absolute; inset: 50% 0 0; transform: translateY(-50%);
display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.swf-tunnel__line { width: 3rem; height: 1px; background: var(--swf-ink); }
.swf-tunnel__line.is-dup { position: absolute; width: 3rem; transform: rotate(90deg); }
/* ⭐ THE REFUSAL HAS A STATE (theirs, kept): no motion = one clean panel, still legible. */
@media (prefers-reduced-motion: reduce) {
/* ⭐ THE REFUSAL HAS A STATE (theirs, kept): one clean panel, one pair of words, no pin. */
.swf-tunnel__track { height: auto; }
.swf-tunnel__content { position: relative; height: auto; }
.swf-tunnel__layer { transform: none; position: relative; inset: auto; }
.swf-tunnel__layer.is-abs { display: none; }
}
/* ══════════════════════════════════════════════════════════════════════════════
WD-487 · THE PARALLAX RUNS ON THE COMPOSITOR — a main-thread stall cannot touch it.
Neil's diag from his own machine (`?swf_pxdiag=1`, 2026-08-30): the maths was RIGHT (worst
disagreement 13.2px = one frame of lag), but **114 frame stalls over 50ms in one pass**, one of
them 100ms mid-page. The JS driver writes `--swf-px` on the main thread, so during any long
task — whatever its cause — the page keeps scrolling while the layer holds still, then it
catches up in one jump. That IS "the image drops into place", and it cannot be fixed by finding
the task, because the next task does it again.
⭐ THE MOTION IS UNCHANGED TO THE PIXEL. Theirs: y = (st − top) × 0.15, live while
|st − top| < wh. A `view()` timeline's progress is LINEAR in scroll distance, and `cover`
starts exactly where their window does (section top at the viewport bottom, d = −wh). So:
from d = −wh → y = −0.15·wh = −15vh
to d = +wh → y = +0.15·wh = +15vh (`animation-range: cover 0 cover 200vh`)
and `fill-mode: both` holds y at ±15vh outside the window — which is precisely their
`if (st > top − wh && st < top + wh)` freezing the tween at the edges. Byte-for-byte, minus
the thread it runs on.
The JS driver stays as the FALLBACK for browsers without scroll-driven animations; it is
gated off with the same `CSS.supports` test so the two can never both drive one layer.
══════════════════════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
.swf-band, .swf-cc, .swf-ao__panel { view-timeline: --swf-band block; }
.swf-band__img, .swf-ao__img, .swf-cc__wash {
animation: swf-parallax linear both;
animation-timeline: --swf-band;
animation-range: cover 0px cover 200vh;
}
@keyframes swf-parallax {
from { transform: translate3d(0, -15vh, 0); }
to { transform: translate3d(0, 15vh, 0); }
}
@media (prefers-reduced-motion: reduce) {
.swf-band__img, .swf-ao__img, .swf-cc__wash { animation: none; }
}
}
/* ══════════════════════════════════════════════════════════════════════════════
WD-489 · ONE RULE AT A TIME — the two rule sections fade as they leave.
Neil, 2026-08-30: *"when they're not fully in view, I think they should have, like, a fade to
zero — like the practice section. Otherwise I can see both lines at the same time. I can see
PRODUCE GOOD WRITING and MEET THE CRITERIA. So when one is in view, the other should be faded
out."* He is right, and the reason is structural rather than cosmetic: the page's argument is
that there are exactly TWO rules, delivered in order. Two 200px display headlines legible at
once turns a sequence into a list, and the reader has to decide which one they are being told.
⭐ IT IS THE CONTENT THAT FADES, NOT THE SECTION — and that distinction is load-bearing. Both
rule sections sit on the SAME ground (`--swf-base`), and `.swf-dx` below carries it too, so the
three read as one continuous surface. Fading the SECTION would fade its background out to the
page colour and put a seam between two panels that are meant to be one. Fading `__inner` moves
only the words.
⭐ SAME MECHANISM AS THE PARALLAX (WD-487), deliberately: a `view()` timeline on the compositor,
so it cannot be touched by the main-thread stalls Neil measured, and there is no second scroll
loop to drift. The hold either side of centre is what stops it flickering on a short viewport —
a plain 0→1→0 ramp would only ever be fully opaque at one exact scroll position.
⛔ NOT the tunnel's JS `--swf-tunnel-fade` path: that one predates the compositor work and needs
the pin's own geometry. This needs nothing but the element's own visibility.
══════════════════════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
/* ⭐ v3 (Neil, 2026-08-30: *"they fade out a little bit early"* — and, asked where Sevilla would
fade them, the honest answer from his source is NOWHERE: `scrollFX()` fades an element IN as
its top reaches the viewport bottom and only fades it OUT if you scroll back below that. He
never dims on exit. So this is our effect, not his, and the reference for it is the PRACTICE
tunnel on this page, which fades against its own edge leaving.)
v2 keyed everything to the section's CENTRE (±14% of cover), which at 1440 had the headline
gone while 63% of it was still on screen — that is the "early". v3 keys to the EDGES, with
named ranges: opaque by the time 60% of it has entered; starts to dim only once its top has
crossed the viewport top and 25% of it has left; gone as it leaves. The crossfade midpoint is
the geometric midpoint, so both headlines can read at ~half for a moment when the sections
are shorter than the screen — that is what is on screen, and it is stated here. */
.swf-rulesec__inner {
animation: swf-rule-focus linear both;
animation-timeline: view();
animation-range: entry 0% exit 100%;
}
/* v4 — v3 measured both headlines at 1 / 1 together at 1440 (y=1781), i.e. his original
complaint back again. Edge-keyed but STEEPER: in over entry 30→90%, out over exit 0→60%, so
the crossfade sums to ~0.9 and neither is ever full while the other is above ~0.3. On a phone
both 261px sections sit whole on one 844px screen — dimming a fully visible headline is the
stranger effect, so there they simply both read. Stated, not hidden. */
@keyframes swf-rule-focus {
entry 0% { opacity: 0; }
entry 30% { opacity: 0; }
entry 90% { opacity: 1; }
exit 0% { opacity: 1; }
exit 60% { opacity: 0; }
exit 100% { opacity: 0; }
}
/* ⛔ §4d — a refusal needs a state. With reduced motion the words are simply always readable. */
@media (prefers-reduced-motion: reduce) {
.swf-rulesec__inner { animation: none; opacity: 1; }
}
}
/* ══════════════════════════════════════════════════════════════════════════════
WD-493 · THE CONTACT PAGE — atlasmotion.com/contact, measured 2026-08-30 (root §14b/§14c):
h1 184px · weight 300 · letter-spacing -0.03em · line-height .89 · two lines · left of centre
lead: right of centre, ~4 lines, muted · form 772px · 2×2 grid · labels ABOVE · fields 48px
· padding 10px 8px 12px · 1px hairline rgba(255,255,255,.1) · fill rgba(217,217,217,.1)
· radius 0 · button right-aligned · contact rows under the form.
Deviations are disclosed at swf_render_contact(): type, tokens, fields, the site's own button.
The headline scale is Atlas's ratio to the viewport (184/1440 = 12.8vw), floored so a phone
still reads it as a headline and capped at their number.
══════════════════════════════════════════════════════════════════════════════ */
/* WD-493e — pinned dark, whatever the toggle says: the dark token set re-declared under the pin
(same values as the :root dark block; if those ever change, change these with them). */
body.swf-dark-pin { background: #1c1d1f; }
/* the light theme's token block is `html:not([data-theme='dark']):not(.dark):not(.dark-mode) .swf`
— (0,4,1). `:not(#swf-never)` lifts this to id-level, so the pin beats BOTH theme states without
`!important` (the id never exists; :not() with an id argument counts as an id). */
/* ── WD-660 · THE CONTACT ENTRANCE, ON THE CANON'S OWN NUMBERS THIS TIME (Neil, 2026-09-02, failing the
WD-657 cut: "page background is animating in before the elements; also timing of the elements needs work.
Study the timing of the landing pages and the general header hero pages"). The WD-657 cut cited MOTION.md
§3e but did not READ it — every number below was wrong by a little and the body was wrong by a lot
(1.6s at a 1.6s delay, on a third curve MOTION.md §2 forbids, so the FORM — the page's visual mass — arrived
after the 1.8s ground lift had already finished; that is exactly what he saw).
THE SPEC, read from `sophicly-plugins/MOTION.md` §3e (split-char rise) + §3 (arrival ladder):
h1 chars 1s power3.out, from y:20px, 0.3s lead, 0.03s/char ("the one thing": 900–1200ms)
lead 0.8s Entrance, from y:10px, at 0.55s (the canon's second line; primary support: 700–900ms)
body 0.6s Entrance, from y:8px, after the header's last element (secondary blocks: 500–700ms)
Travel 5–20px only. Body now lands at ~1.95s, INSIDE the ground's 1.8s lift, so ground and content read as
one arrival. The article's own ground is still shown at once (WD-657, unchanged); hidden starts stay scoped
to html.swf-js (no JS = all visible); chars are split by contact.js (plain split,
kept).
⚠️ Easing: the funnel's `--swf-arrive` (.23,1,.32,1) is Risen's easeOutQuint, MOTION.md's Entrance is
(.22,1,.36,1) — two house tokens a hundredth apart. This file uses ITS OWN token everywhere; introducing a
third here would be the drift. Flagged in the FIXLIST for a one-line reconciliation, not decided here. */
html.swf-js.swh-body-in .swf-contact { animation: none; opacity: 1; visibility: visible; }
.swf-contact__h .swf-ch { display: inline-block; backface-visibility: hidden; will-change: transform, opacity; }
html.swf-js:not(.swh-body-in) .swf-contact__h .swf-ch { opacity: 0; transform: translateY(20px); }
html.swf-js.swh-body-in .swf-contact__h .swf-ch { opacity: 1; transform: none;
transition: opacity 1s cubic-bezier(.215,.61,.355,1), transform 1s cubic-bezier(.215,.61,.355,1);
transition-delay: calc(.3s + var(--i, 0) * .03s); }
html.swf-js:not(.swh-body-in) .swf-contact__lead { opacity: 0; transform: translateY(10px); }
html.swf-js.swh-body-in .swf-contact__lead { opacity: 1; transform: none; transition: opacity .8s var(--swf-arrive), transform .8s var(--swf-arrive); transition-delay: .55s; }
html.swf-js:not(.swh-body-in) .swf-contact :is(.swf-contact__body, .swf-contact__side, .swf-contact__ticker) { opacity: 0; transform: translateY(8px); }
html.swf-js.swh-body-in .swf-contact :is(.swf-contact__body, .swf-contact__side, .swf-contact__ticker) { opacity: 1; transform: none; transition: opacity .6s var(--swf-arrive), transform .6s var(--swf-arrive); transition-delay: 1.35s; }
@media (prefers-reduced-motion: reduce) { html.swf-js .swf-contact :is(.swf-contact__h .swf-ch, .swf-contact__lead, .swf-contact__body, .swf-contact__side, .swf-contact__ticker) { transform: none; transition: none; opacity: 1; } }
/* ── WD-660, RETEST (Neil: "still animating the background first — background, then the text, then the form").
MEASURED this time, phone width, dark, first AND repeat visit: at body-in the article and every decor layer
inside it (topo canvas · lines · nav scrim) went 0→1 in ONE frame, chars 0.3s later, form 1.35s later. The
article's own ground is the page colour, so "the background" he sees IS those three layers popping in ahead
of the words. The hero pages hold their body until the title has landed (hero-motion `.rFc` 1s ease-in @.5s
AFTER the chars start at .3s); the contact page now does the same: the decor rides the BODY beat, so the
order is words → lead → (form + texture + lines + scrim together). */
html.swf-js:not(.swh-body-in) .swf-contact :is(.swf-contact__topo, .swf-contact__lines, .swf-nav-scrim) { opacity: 0; }
html.swf-js.swh-body-in .swf-contact :is(.swf-contact__topo, .swf-contact__lines, .swf-nav-scrim) { opacity: 1; transition: opacity .6s var(--swf-arrive); transition-delay: 1.35s; }
@media (prefers-reduced-motion: reduce) { html.swf-js .swf-contact :is(.swf-contact__topo, .swf-contact__lines, .swf-nav-scrim) { transition: none; opacity: 1; } }
/* WD-668 — the programme page carries the same scrim (markup in swf_render_science); it must sit above the brain
stage's canvas and under the nav, and it never takes a tap. */
#science .swf-nav-scrim { position: fixed; top: 0; left: 0; right: 0; z-index: 5; pointer-events: none; }
/* WD-651 · ONE STATED DEVIATION from the archive's scrim (root #13): theirs is `position:absolute; top:0` inside a
stage that begins at the top of the viewport; this article begins ~130px down (header clearance), so the same
rule painted a grey band across the headline and, caught by the child-lift rule below, sat IN FLOW. Here it
is fixed to the viewport, exactly where the nav is. Everything else is theirs, byte for byte. */
.swf-contact .swf-nav-scrim { position: fixed; top: 0; left: 0; right: 0; }
/* ── WD-651 · NAV SCRIM for the contact page in LIGHT theme — BRAND §"page without a hero": the reference is the
blog archive's .arc-nav-scrim (sophicly-blog-arc.php), ported VERBATIM (every rule, the veil rgb inlined,
masks byte-equal), renamed .swf-nav-scrim. Light only; dark needs none of it. */
.swf-nav-scrim{
position:absolute; left:0; right:0; top:0;
height:190px;
z-index:2; /* over the stage, under both navs (12 and 11) */
pointer-events:none;
display:none; /* dark theme needs none of this */
}
html.light .swf-nav-scrim,
html[data-theme="light"] .swf-nav-scrim{ display:block }
.swf-nav-scrim i{ position:absolute; left:0; right:0; top:0; display:block }
.swf-nav-scrim i:nth-child(1){
height:190px;
/* ⭐⭐ B137 (v0.32.0) — NO BACKDROP BLUR. Neil's ruling, 2026-09-01, after a day of A/B on his
own screen: *"only way that I've noticed that it's clean is if you remove all of the blur from
the top and the sides"* → then, on the panel's option E (tint only): *"These are the best
settings; we can use these."* The two masked backdrop-filter layers shimmered on his 120Hz
Liquid Retina panel while the strip moved; seven macOS screen recordings of the same page,
same Chrome 152 build, same panel could not capture it, so his eyes are the measurement.
The masked layers stay (byte-equal to what he approved); without a filter they paint
nothing, and the legibility now rests on the ::after tint alone. */
-webkit-mask-image:linear-gradient(180deg,
rgba(0,0,0,1.0000) 0.0px,
rgba(0,0,0,0.9987) 0.3px,
rgba(0,0,0,0.9901) 1.9px,
rgba(0,0,0,0.9694) 5.8px,
rgba(0,0,0,0.9337) 12.6px,
rgba(0,0,0,0.8821) 22.4px,
rgba(0,0,0,0.8154) 35.1px,
rgba(0,0,0,0.7356) 50.2px,
rgba(0,0,0,0.6456) 67.3px,
rgba(0,0,0,0.5493) 85.6px,
rgba(0,0,0,0.4507) 104.4px,
rgba(0,0,0,0.3544) 122.7px,
rgba(0,0,0,0.2644) 139.8px,
rgba(0,0,0,0.1846) 154.9px,
rgba(0,0,0,0.1179) 167.6px,
rgba(0,0,0,0.0663) 177.4px,
rgba(0,0,0,0.0306) 184.2px,
rgba(0,0,0,0.0099) 188.1px,
rgba(0,0,0,0.0013) 189.7px,
rgba(0,0,0,0.0000) 190.0px);
mask-image:linear-gradient(180deg,
rgba(0,0,0,1.0000) 0.0px,
rgba(0,0,0,0.9987) 0.3px,
rgba(0,0,0,0.9901) 1.9px,
rgba(0,0,0,0.9694) 5.8px,
rgba(0,0,0,0.9337) 12.6px,
rgba(0,0,0,0.8821) 22.4px,
rgba(0,0,0,0.8154) 35.1px,
rgba(0,0,0,0.7356) 50.2px,
rgba(0,0,0,0.6456) 67.3px,
rgba(0,0,0,0.5493) 85.6px,
rgba(0,0,0,0.4507) 104.4px,
rgba(0,0,0,0.3544) 122.7px,
rgba(0,0,0,0.2644) 139.8px,
rgba(0,0,0,0.1846) 154.9px,
rgba(0,0,0,0.1179) 167.6px,
rgba(0,0,0,0.0663) 177.4px,
rgba(0,0,0,0.0306) 184.2px,
rgba(0,0,0,0.0099) 188.1px,
rgba(0,0,0,0.0013) 189.7px,
rgba(0,0,0,0.0000) 190.0px);
}
.swf-nav-scrim i:nth-child(2){
height:120px;
-webkit-mask-image:linear-gradient(180deg,
rgba(0,0,0,1.0000) 0.0px,
rgba(0,0,0,0.9987) 0.2px,
rgba(0,0,0,0.9901) 1.2px,
rgba(0,0,0,0.9694) 3.7px,
rgba(0,0,0,0.9337) 8.0px,
rgba(0,0,0,0.8821) 14.1px,
rgba(0,0,0,0.8154) 22.2px,
rgba(0,0,0,0.7356) 31.7px,
rgba(0,0,0,0.6456) 42.5px,
rgba(0,0,0,0.5493) 54.1px,
rgba(0,0,0,0.4507) 65.9px,
rgba(0,0,0,0.3544) 77.5px,
rgba(0,0,0,0.2644) 88.3px,
rgba(0,0,0,0.1846) 97.8px,
rgba(0,0,0,0.1179) 105.9px,
rgba(0,0,0,0.0663) 112.0px,
rgba(0,0,0,0.0306) 116.3px,
rgba(0,0,0,0.0099) 118.8px,
rgba(0,0,0,0.0013) 119.8px,
rgba(0,0,0,0.0000) 120.0px);
mask-image:linear-gradient(180deg,
rgba(0,0,0,1.0000) 0.0px,
rgba(0,0,0,0.9987) 0.2px,
rgba(0,0,0,0.9901) 1.2px,
rgba(0,0,0,0.9694) 3.7px,
rgba(0,0,0,0.9337) 8.0px,
rgba(0,0,0,0.8821) 14.1px,
rgba(0,0,0,0.8154) 22.2px,
rgba(0,0,0,0.7356) 31.7px,
rgba(0,0,0,0.6456) 42.5px,
rgba(0,0,0,0.5493) 54.1px,
rgba(0,0,0,0.4507) 65.9px,
rgba(0,0,0,0.3544) 77.5px,
rgba(0,0,0,0.2644) 88.3px,
rgba(0,0,0,0.1846) 97.8px,
rgba(0,0,0,0.1179) 105.9px,
rgba(0,0,0,0.0663) 112.0px,
rgba(0,0,0,0.0306) 116.3px,
rgba(0,0,0,0.0099) 118.8px,
rgba(0,0,0,0.0013) 119.8px,
rgba(0,0,0,0.0000) 120.0px);
}
.swf-nav-scrim::after{
content:"";
position:absolute; inset:0;
background:linear-gradient(180deg,
rgba(21,22,23,0.5500) 0.0px,
rgba(21,22,23,0.5497) 0.1px,
rgba(21,22,23,0.5475) 0.9px,
rgba(21,22,23,0.5421) 2.7px,
rgba(21,22,23,0.5325) 6.0px,
rgba(21,22,23,0.5181) 11.0px,
rgba(21,22,23,0.4987) 17.7px,
rgba(21,22,23,0.4743) 26.2px,
rgba(21,22,23,0.4452) 36.2px,
rgba(21,22,23,0.4120) 47.7px,
rgba(21,22,23,0.3754) 60.3px,
rgba(21,22,23,0.3363) 73.8px,
rgba(21,22,23,0.2956) 87.9px,
rgba(21,22,23,0.2544) 102.1px,
rgba(21,22,23,0.2137) 116.2px,
rgba(21,22,23,0.1746) 129.7px,
rgba(21,22,23,0.1380) 142.3px,
rgba(21,22,23,0.1048) 153.8px,
rgba(21,22,23,0.0757) 163.8px,
rgba(21,22,23,0.0513) 172.3px,
rgba(21,22,23,0.0319) 179.0px,
rgba(21,22,23,0.0175) 184.0px,
rgba(21,22,23,0.0079) 187.3px,
rgba(21,22,23,0.0025) 189.1px,
rgba(21,22,23,0.0003) 189.9px,
rgba(21,22,23,0.0000) 190.0px);
}
html:not(#swf-never) body.swf-dark-pin .swf-contact {
--swf-page: #1c1d1f; --swf-base: #242628; --swf-raised: #2b2c2f;
--swf-ink: #e0e0ee; --swf-ink-soft: #9da5b4; --swf-absent: #9ca3af;
--swf-teal: #51dacf; --swf-mint: #7DF9E9; --swf-purple-lt: #a78bfa;
--swf-btn-ink: #1C1D1F;
}
.swf-contact { padding-block: var(--swf-band) calc(var(--swf-band) * 2); position: relative; background: var(--swf-page); }
/* ⭐ WD-675 (Neil, 2026-09-02: "I just want the same sequence as all the other pages, which is based on the Risen
church animation sequence"). MEASURED on /about/ in light: `html.swh-arriving body` is #000; on release hero-motion
WASHES the body ground #000 → the theme ground over `--swh-arrival` (1800ms, linear) while the content arrives.
MEASURED on /contact/: the article painted its OWN ground (`--swf-page`, white) — it popped in whole at body-in
and the body under it stayed #000 for the life of the page, so the wash never showed. The contact page now has
no ground of its own: the BODY carries the page colour (under the funnel's own theme selectors, and only once
`.swh-arriving` has lifted, exactly as hero-motion scopes its own pages), so the one wash rule hero-motion
already owns paints it. The nav scrim is ground, not content: it rides the same 1800ms linear window from
release instead of the body beat. Scoped to `html.swf-page-contact` (the shortcode id, never the slug). */
/* `!important` (measured on PROD, WD-675): the page there is the old slug, and Etch's legacy orchestrator sheet
(`etch-sophicly-orchestrator-hide-css-*`) pins `body.page-slug-contact-us { background:#000 !important }` and,
once revealed, `var(--body-bg, #000) !important` with the variable unset — black for the life of the page.
Hero-motion beats the same pin on its own pages with (0,3,1) + `!important`; so does this. */
html.swf-page-contact:not(.swh-arriving) body { background-color: #1c1d1f !important; }
html[data-theme='light']:not(.swh-arriving).swf-page-contact body, html.light:not(.swh-arriving).swf-page-contact body, html:not([data-theme='dark']):not(.dark):not(.dark-mode):not(.swh-arriving).swf-page-contact body { background-color: #ffffff !important; }
html.swf-page-contact .swf, html.swf-page-contact .swf-contact { background: transparent; }
html.swf-js.swf-page-contact.swh-body-in .swf-contact .swf-nav-scrim { transition: opacity var(--swh-arrival, 1800ms) linear; transition-delay: 0s; }
/* ── WD-493f.1 · ATLAS'S GRID, read out of their own drawer (BackgroundGrid in hoisted.js,
fetched 2026-08-30): vertical lines come in DOUBLE PAIRS 10px apart at ±(content/2 + 10)
and ±(content/2 + 20), a second pair 12vw further out, and horizontals are a mirrored double
pair framing the content block. 1px, one ink, alpha .2 on their page (under a fade mask) —
.1 here, no mask. Our content region = the --swf-col column the wrap sits in.
⛔ the first cut collapsed all lines into ONE: `.swf-contact > *` (same specificity, later in
the file) overrode this div's position:absolute, so its height was 0 and every percentage
line piled up at the top. The child lift below now EXCLUDES the decor layers. */
.swf-contact__lines {
/* full-bleed out of the 1240px article — Atlas's lines cross the whole VIEWPORT. `50vw`
includes the scrollbar (the ledger's warning), so the page pins `overflow-x: clip` below:
no scroll container, no sideways scrollbar, the overhang simply cannot scroll. */
position: absolute; inset: 0 calc(50% - 50vw); pointer-events: none; z-index: 0; overflow: hidden;
/* half-width of the content region: the column's half, or the gutter edge when narrower */
--swf-chalf: min(calc(50% - var(--swf-gutter)), calc(var(--swf-col) / 2));
}
body.swf-dark-pin { overflow-x: clip; }
.swf-contact__lines i { position: absolute; background: currentColor; color: var(--swf-ink); opacity: .1; }
/* inner double pair, left + right content edges */
.swf-contact__lines i:nth-child(1) { top: 0; bottom: 0; width: 1px; left: calc(50% - var(--swf-chalf) - 20px); }
.swf-contact__lines i:nth-child(2) { top: 0; bottom: 0; width: 1px; left: calc(50% - var(--swf-chalf) - 10px); }
.swf-contact__lines i:nth-child(3) { top: 0; bottom: 0; width: 1px; left: calc(50% + var(--swf-chalf) + 10px); }
.swf-contact__lines i:nth-child(4) { top: 0; bottom: 0; width: 1px; left: calc(50% + var(--swf-chalf) + 20px); }
/* outer double pair, 12vw further out (Atlas's t*.12) — off-canvas on narrow screens, clipped */
.swf-contact__lines i:nth-child(5) { top: 0; bottom: 0; width: 1px; left: calc(50% - var(--swf-chalf) - 20px - 12vw); }
.swf-contact__lines i:nth-child(6) { top: 0; bottom: 0; width: 1px; left: calc(50% - var(--swf-chalf) - 10px - 12vw); }
.swf-contact__lines i:nth-child(7) { top: 0; bottom: 0; width: 1px; left: calc(50% + var(--swf-chalf) + 10px + 12vw); }
.swf-contact__lines i:nth-child(8) { top: 0; bottom: 0; width: 1px; left: calc(50% + var(--swf-chalf) + 20px + 12vw); }
/* horizontal double pairs framing the content block, top and bottom */
.swf-contact__lines i:nth-child(9) { left: 0; right: 0; height: 1px; top: calc(var(--swf-band) - 34px); }
.swf-contact__lines i:nth-child(10) { left: 0; right: 0; height: 1px; top: calc(var(--swf-band) - 24px); }
.swf-contact__lines i:nth-child(11) { left: 0; right: 0; height: 1px; bottom: calc(var(--swf-band) + 24px); }
.swf-contact__lines i:nth-child(12) { left: 0; right: 0; height: 1px; bottom: calc(var(--swf-band) + 34px); }
/* WD-493f.2 · the texture — a still topo-contour field contact.js draws once. Behind everything,
full-bleed like the lines (sized by its insets — no width:100%, which would re-cap it at the
article's 1240px). */
/* ⛔ a canvas is a REPLACED element: left+right insets do NOT stretch it (it keeps its intrinsic
300×150, measured). Size it explicitly. */
.swf-contact__topo { position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; max-width: none; height: 100%; pointer-events: none; z-index: 0; }
.swf-contact > :not(.swf-contact__lines):not(.swf-contact__topo):not(.swf-nav-scrim) { position: relative; z-index: 1; } /* WD-651: the scrim is a decor layer too */
/* WD-493d.1 — effortel's arrangement: headline LEFT, form RIGHT, above the fold. On the `.swf`
grid the two sections share one row at desktop; the headline scale steps down so the pair fits. */
.swf-contact__head { display: block; }
/* WD-493f.5 — the side rail (contact rows + ticker) rides the LEFT column under the headline at
desktop; on a phone the source order (head → body → side) keeps the form above it. */
@media (min-width: 1024px) {
.swf-contact__wrap {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 772px);
grid-template-areas: "head body" "side body"; gap: 0 var(--swf-3xl, 48px); align-items: start;
}
.swf-contact__head { grid-area: head; }
.swf-contact__body { grid-area: body; }
.swf-contact__side { grid-area: side; }
}
.swf-contact__h {
margin: 0; max-width: 100%;
font-family: var(--swf-display); font-style: italic; font-weight: 400;
/* capped at the band ladder's own top step (76px): the left column is ~420px beside the 772px
form, and anything larger broke "Speak with" into four ragged lines (measured at 110px). */
font-size: clamp(48px, 5.5vw, 76px); line-height: 1.02; letter-spacing: -.02em; color: var(--swf-ink);
}
.swf-contact__lead {
margin: var(--swf-xl) 0 0; max-width: 30ch;
font-family: var(--swf-font); font-size: 18px; line-height: 1.45; color: var(--swf-ink-soft);
}
/* ⛔ measured: inside the `.swf` grid an item with `margin:auto` stops stretching and shrinks to its
content (677px, and 254px on a phone). `justify-self` centres it; `width:100%` fills the track. */
.swf-contact__body { width: 100%; max-width: 772px; margin: var(--swf-xl) 0 0; }
@media (min-width: 1024px) { .swf-contact__body { margin-top: 0; } }
.swf-contact__form { display: flex; flex-direction: column; gap: var(--swf-xl); }
.swf-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--swf-xl) var(--swf-3xl, 48px); }
.swf-field { display: flex; flex-direction: column; gap: var(--swf-sm); font-family: var(--swf-font); }
.swf-field > span { font-size: 16px; color: var(--swf-ink); }
/* WD-493e brand pass (Neil: "get rid of the strokes around the outside") — Atlas's hairline
border is theirs; ours is a quiet fill, the brand radius, and a teal ring only on focus. */
.swf-field input, .swf-field select, .swf-field textarea {
width: 100%; min-height: 48px; padding: 12px 14px; margin: 0;
font: inherit; font-size: 18px; color: var(--swf-ink);
/* WD-493h.1 (Neil: the topo pattern showed THROUGH the fields — the old rgba fill was
translucent, not a z-index fault). OPAQUE lift from the brand dark ladder instead. */
background: var(--swf-base); border: 0; border-radius: var(--swf-r-md);
outline: none; transition: box-shadow .2s ease, background-color .2s ease;
}
.swf-field input:focus-visible, .swf-field select:focus-visible, .swf-field textarea:focus-visible {
box-shadow: 0 0 0 2px var(--swf-teal); background: var(--swf-raised);
}
.swf-field textarea { resize: vertical; min-height: 156px; }
.swf-field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.swf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.swf-contact__actions { display: flex; justify-content: flex-end; }
/* WD-493f.4 — Neil: "Halo style is fine but reduce the padding — it looks a bit big and ugly."
Contact page only: the site-wide button keeps its own scale. */
.swf-contact .swf-btn { min-height: 50px; padding: 0 var(--swf-2xl); }
.swf-contact__err { margin: 0; color: #ffb4b4; font-family: var(--swf-font); font-size: 15px; }
.swf-contact__done { text-align: left; }
.swf-contact__done-h { margin: 0 0 var(--swf-md); font-family: var(--swf-display); font-style: italic; font-weight: 400; font-size: clamp(32px, 4vw, 48px); color: var(--swf-ink); }
.swf-contact__done p { margin: 0; font-family: var(--swf-font); font-size: 18px; color: var(--swf-ink-soft); }
/* WD-493f.5 — rows stack left-aligned under the lead, in the side rail */
.swf-contact__side { margin: var(--swf-2xl) 0 0; }
.swf-contact__rows { display: flex; flex-direction: column; align-items: flex-start; gap: var(--swf-lg); margin: 0; }
.swf-contact__rows div { display: flex; gap: var(--swf-lg); align-items: baseline; }
.swf-contact__rows dt { min-width: 5.5em; }
.swf-contact__rows dt { margin: 0; font-family: var(--swf-font); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--swf-ink-soft); }
.swf-contact__rows dd { margin: 0; font-family: var(--swf-font); font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.swf-contact__rows a { color: var(--swf-ink); text-decoration: none; }
.swf-contact__rows a:hover { color: var(--swf-teal); }
.swf-contact__ticker {
position: relative; height: 132px; overflow: hidden; margin-top: var(--swf-2xl); text-align: left;
-webkit-mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
}
.swf-contact__ticker-run {
list-style: none; margin: 0; padding: 0;
font-family: var(--swf-font); font-size: 14px; font-weight: 700; letter-spacing: .1em;
/* WD-493h.2 — Neil: the ticker read as just more grey text; teal separates it */
text-transform: uppercase; color: var(--swf-teal); line-height: 2;
animation: swf-ticker-up 36s linear infinite;
}
@keyframes swf-ticker-up { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) { .swf-contact__ticker-run { animation: none; } .swf-contact__ticker { height: auto; mask-image: none; -webkit-mask-image: none; } .swf-contact__ticker-run[aria-hidden] { display: none; } }
@media (max-width: 760px) {
.swf-contact__grid { grid-template-columns: 1fr; }
.swf-contact__actions { justify-content: stretch; }
.swf-contact__actions .swf-btn { width: 100%; }
}
/* ══════════════════════════════════════════════════════════════════════════════
WD-494 · THE DEMO PAGE — the contact page's sibling: same article class, same lines, same
topo, same head/body/side grid. Only what differs is declared here.
══════════════════════════════════════════════════════════════════════════════ */
html:not(#swf-never) body.swf-dark-pin .swf-demo {
--swf-page: #1c1d1f; --swf-base: #242628; --swf-raised: #2b2c2f;
--swf-ink: #e0e0ee; --swf-ink-soft: #9da5b4; --swf-absent: #9ca3af;
--swf-teal: #51dacf; --swf-mint: #7DF9E9; --swf-purple-lt: #a78bfa;
--swf-btn-ink: #1C1D1F;
}
/* the widget paints its own white card; a quiet raised frame keeps it deliberate on the dark
ground rather than a pasted-in rectangle */
.swf-demo__cal { background: var(--swf-base); border-radius: var(--swf-r-lg); padding: var(--swf-md); }
.swf-demo__cal iframe { display: block; width: 100%; min-height: 700px; border: 0; border-radius: var(--swf-r-md); background: #fff; }
.swf-demo__fallback { margin: var(--swf-md) 0 0; font-family: var(--swf-font); font-size: 13px; color: var(--swf-ink-soft); }
.swf-demo__fallback a { color: var(--swf-ink); }
.swf-demo__subh {
margin: 0 0 var(--swf-lg); font-family: var(--swf-font); font-size: 12px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; color: var(--swf-ink-soft);
}
.swf-demo__learn { display: flex; flex-direction: column; gap: var(--swf-xl); margin: 0; max-width: 34ch; }
.swf-demo__learn dt { margin: 0; font-family: var(--swf-font); font-size: 16px; font-weight: 700; color: var(--swf-ink); }
.swf-demo__learn dd { margin: var(--swf-sm) 0 0; font-family: var(--swf-font); font-size: 15px; line-height: 1.5; color: var(--swf-ink-soft); }
.swf-demo__talk { margin: var(--swf-2xl) 0 0; font-family: var(--swf-font); font-size: 15px; color: var(--swf-ink-soft); max-width: 34ch; }
.swf-demo__talk a { color: var(--swf-teal); text-decoration: none; }
.swf-demo__talk a:hover { text-decoration: underline; }
/* ══════════════════════════════════════════════════════════════════════════════
WD-491 · PROGRAMME PAGE STRIPS — the problem brief (verdict 1) and the merged method strip
(verdict 2). They sit between Etch components, follow the theme like every .swf section,
and own their vertical space by padding only (WD-357).
══════════════════════════════════════════════════════════════════════════════ */
.swf-pbrief { padding-block: var(--swf-band); text-align: center; }
.swf-pbrief__line {
margin: 0 auto; max-width: 42rem;
font-family: var(--swf-font); font-size: clamp(18px, 2.2vw, 22px); line-height: 1.55;
color: var(--swf-ink); text-wrap: balance;
}
.swf-pbrief__link { margin: var(--swf-xl) 0 0; font-family: var(--swf-font); font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.swf-pbrief__link a { color: var(--swf-teal); text-decoration: none; }
.swf-pbrief__link a:hover { text-decoration: underline; }
.swf-method { padding-block: var(--swf-band); }
.swf-method__h {
margin: 0; text-align: center;
font-family: var(--swf-display); font-style: italic; font-weight: 400;
font-size: clamp(34px, 5vw, 56px); line-height: 1.05; color: var(--swf-ink);
}
.swf-method__lead { margin: var(--swf-lg) auto 0; max-width: 34rem; text-align: center; font-family: var(--swf-font); font-size: 18px; color: var(--swf-ink-soft); }
.swf-method__rows { display: flex; flex-direction: column; gap: var(--swf-lg); max-width: 46rem; margin: var(--swf-2xl) auto 0; }
.swf-method__rows > div { background: var(--swf-base); border-radius: var(--swf-r-lg); padding: var(--swf-xl); }
.swf-method__rows dt { margin: 0 0 var(--swf-sm); font-family: var(--swf-font); font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--swf-teal); }
.swf-method__rows dd { margin: 0; font-family: var(--swf-font); font-size: 16px; line-height: 1.55; color: var(--swf-ink); }
.swf-method__rows dd span { color: var(--swf-ink-soft); font-weight: 700; }
.swf-method__close { margin: var(--swf-2xl) auto 0; max-width: 34rem; text-align: center; font-family: var(--swf-font); font-size: 17px; font-weight: 700; color: var(--swf-ink); }
/* ⭐⭐ WD-584 — THE GAP'S HERO IS THE AUTHORED PHOTOGRAPH NOW, AND ITS CROP HAS TO BE STEERED.
Neil, 2026-09-01: *"for the gap page, you're still using the old header hero image. Can we use
one of the new images, please?"*
⛔ WHY THIS NEEDS CSS AT ALL, rather than just swapping the file. MEASURED on staging: the same
`![]()
` is painted into two slots of opposite shape —
desktop 1440x936 ratio 1.54
phone 419x754 ratio 0.56 ← PORTRAIT
The retired photograph was a tall 1290x1712, so it suited the phone and the desktop cropped it.
The authored replacement is the reverse: 16:9, with the boy at ~82% across and the light pool
(the copy space the band rules ask for) on the left. Dropped in at the default `50% 50%`, the
portrait phone slot keeps the middle ~31% of the width — which is empty floor, with the subject
cropped clean out of frame.
⭐ So the FILE is one master and the CROP is per breakpoint. `object-position` costs nothing,
needs no `srcset`, and — the reason it is the right tool here — the `![]()
` belongs to the Etch
header section, not to this plugin, so its markup is not ours to rewrite. This steers it from the
outside without touching another lane's component (root §LANE OWNERSHIP).
⚠️ Scoped to `body.swf-page-the-gap`, the per-page class added at WD-580 — every other page's
hero keeps its own framing.
THE NUMBERS, derived rather than dialled: at 419x754 the image covers to 1345px wide, so 926px
overflow the slot. The boy's centre lands at 1345 x 0.82 = 1103. Placing him at ~62% across the
slot (right of centre, light to his left, which is where the headline sits) wants a window origin
of 1103 - 260 = 843, i.e. 843/926 = 91%. 88% is used, keeping a little more of the light.
⛔⛔ AND IT NEEDS `!important`, WHICH IS NOT LAZINESS — IT IS THE ONLY THING THAT WORKS HERE.
The first cut used a plain rule. It parsed, it matched the element (verified via CDP:
`matches()` true, the rule present in the sheet's cssRules), and the computed value stayed at the
initial `50% 50%` anyway — because the hero's own page-style declares
`object-position: center center !important`, and an important declaration beats a normal one
whatever its specificity or source order. This is the recorded Etch landmine
(`reference_etch_page_styles_are_important_so_load_order_cannot_win`), and it cost a full
deploy-and-measure cycle to rediscover from the inside.
⚠️ The id is carried too, so that when BOTH are important, specificity still decides in our
favour rather than leaving it to which sheet happens to load last. */
body.swf-page-the-gap #header-hero img.header-hero__bg{object-position:60% 50% !important}
@media (max-width:719px), (max-aspect-ratio:1/1){
body.swf-page-the-gap #header-hero img.header-hero__bg{object-position:88% 50% !important}
}
/* ⭐ WD-596 — THE CONTACT HEADLINE CLEARS THE MOBILE HEADER. Neil, phone: "the contact page on
mobile, the top part is overlapping with the s underline." WD-582 L6 put the General Mobile
Header (position:fixed, MEASURED 94px tall at 390 wide) on this page, and the page's own top band
(50px) was written for no header at all: the h1 sat at y50, under the S-mark. The-gap and
top-grade-rules compose the General Header Hero, which clears it; this page and the demo page
(both `.swf-contact`) do not, so the clearance is added here — only when a mobile header is
actually on the page (`:has`), and only under the header's own breakpoint (it is display:flex
at 899 and display:none at 900, measured). contact.js writes the measured height into
`--swf-mobile-header` so the 94px is a fallback, not a claim. */
@media (max-width: 899px) {
body:has(.mobile-header) .swf-contact { padding-top: calc(var(--swf-band) + var(--swf-mobile-header, 94px)); }
}
kept). ⚠️ Easing: the funnel's `--swf-arrive` (.23,1,.32,1) is Risen's easeOutQuint, MOTION.md's Entrance is (.22,1,.36,1) — two house tokens a hundredth apart. This file uses ITS OWN token everywhere; introducing a third here would be the drift. Flagged in the FIXLIST for a one-line reconciliation, not decided here. */ html.swf-js.swh-body-in .swf-contact { animation: none; opacity: 1; visibility: visible; } .swf-contact__h .swf-ch { display: inline-block; backface-visibility: hidden; will-change: transform, opacity; } html.swf-js:not(.swh-body-in) .swf-contact__h .swf-ch { opacity: 0; transform: translateY(20px); } html.swf-js.swh-body-in .swf-contact__h .swf-ch { opacity: 1; transform: none; transition: opacity 1s cubic-bezier(.215,.61,.355,1), transform 1s cubic-bezier(.215,.61,.355,1); transition-delay: calc(.3s + var(--i, 0) * .03s); } html.swf-js:not(.swh-body-in) .swf-contact__lead { opacity: 0; transform: translateY(10px); } html.swf-js.swh-body-in .swf-contact__lead { opacity: 1; transform: none; transition: opacity .8s var(--swf-arrive), transform .8s var(--swf-arrive); transition-delay: .55s; } html.swf-js:not(.swh-body-in) .swf-contact :is(.swf-contact__body, .swf-contact__side, .swf-contact__ticker) { opacity: 0; transform: translateY(8px); } html.swf-js.swh-body-in .swf-contact :is(.swf-contact__body, .swf-contact__side, .swf-contact__ticker) { opacity: 1; transform: none; transition: opacity .6s var(--swf-arrive), transform .6s var(--swf-arrive); transition-delay: 1.35s; } @media (prefers-reduced-motion: reduce) { html.swf-js .swf-contact :is(.swf-contact__h .swf-ch, .swf-contact__lead, .swf-contact__body, .swf-contact__side, .swf-contact__ticker) { transform: none; transition: none; opacity: 1; } } /* ── WD-660, RETEST (Neil: "still animating the background first — background, then the text, then the form"). MEASURED this time, phone width, dark, first AND repeat visit: at body-in the article and every decor layer inside it (topo canvas · lines · nav scrim) went 0→1 in ONE frame, chars 0.3s later, form 1.35s later. The article's own ground is the page colour, so "the background" he sees IS those three layers popping in ahead of the words. The hero pages hold their body until the title has landed (hero-motion `.rFc` 1s ease-in @.5s AFTER the chars start at .3s); the contact page now does the same: the decor rides the BODY beat, so the order is words → lead → (form + texture + lines + scrim together). */ html.swf-js:not(.swh-body-in) .swf-contact :is(.swf-contact__topo, .swf-contact__lines, .swf-nav-scrim) { opacity: 0; } html.swf-js.swh-body-in .swf-contact :is(.swf-contact__topo, .swf-contact__lines, .swf-nav-scrim) { opacity: 1; transition: opacity .6s var(--swf-arrive); transition-delay: 1.35s; } @media (prefers-reduced-motion: reduce) { html.swf-js .swf-contact :is(.swf-contact__topo, .swf-contact__lines, .swf-nav-scrim) { transition: none; opacity: 1; } } /* WD-668 — the programme page carries the same scrim (markup in swf_render_science); it must sit above the brain stage's canvas and under the nav, and it never takes a tap. */ #science .swf-nav-scrim { position: fixed; top: 0; left: 0; right: 0; z-index: 5; pointer-events: none; } /* WD-651 · ONE STATED DEVIATION from the archive's scrim (root #13): theirs is `position:absolute; top:0` inside a stage that begins at the top of the viewport; this article begins ~130px down (header clearance), so the same rule painted a grey band across the headline and, caught by the child-lift rule below, sat IN FLOW. Here it is fixed to the viewport, exactly where the nav is. Everything else is theirs, byte for byte. */ .swf-contact .swf-nav-scrim { position: fixed; top: 0; left: 0; right: 0; } /* ── WD-651 · NAV SCRIM for the contact page in LIGHT theme — BRAND §"page without a hero": the reference is the blog archive's .arc-nav-scrim (sophicly-blog-arc.php), ported VERBATIM (every rule, the veil rgb inlined, masks byte-equal), renamed .swf-nav-scrim. Light only; dark needs none of it. */ .swf-nav-scrim{ position:absolute; left:0; right:0; top:0; height:190px; z-index:2; /* over the stage, under both navs (12 and 11) */ pointer-events:none; display:none; /* dark theme needs none of this */ } html.light .swf-nav-scrim, html[data-theme="light"] .swf-nav-scrim{ display:block } .swf-nav-scrim i{ position:absolute; left:0; right:0; top:0; display:block } .swf-nav-scrim i:nth-child(1){ height:190px; /* ⭐⭐ B137 (v0.32.0) — NO BACKDROP BLUR. Neil's ruling, 2026-09-01, after a day of A/B on his own screen: *"only way that I've noticed that it's clean is if you remove all of the blur from the top and the sides"* → then, on the panel's option E (tint only): *"These are the best settings; we can use these."* The two masked backdrop-filter layers shimmered on his 120Hz Liquid Retina panel while the strip moved; seven macOS screen recordings of the same page, same Chrome 152 build, same panel could not capture it, so his eyes are the measurement. The masked layers stay (byte-equal to what he approved); without a filter they paint nothing, and the legibility now rests on the ::after tint alone. */ -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,1.0000) 0.0px, rgba(0,0,0,0.9987) 0.3px, rgba(0,0,0,0.9901) 1.9px, rgba(0,0,0,0.9694) 5.8px, rgba(0,0,0,0.9337) 12.6px, rgba(0,0,0,0.8821) 22.4px, rgba(0,0,0,0.8154) 35.1px, rgba(0,0,0,0.7356) 50.2px, rgba(0,0,0,0.6456) 67.3px, rgba(0,0,0,0.5493) 85.6px, rgba(0,0,0,0.4507) 104.4px, rgba(0,0,0,0.3544) 122.7px, rgba(0,0,0,0.2644) 139.8px, rgba(0,0,0,0.1846) 154.9px, rgba(0,0,0,0.1179) 167.6px, rgba(0,0,0,0.0663) 177.4px, rgba(0,0,0,0.0306) 184.2px, rgba(0,0,0,0.0099) 188.1px, rgba(0,0,0,0.0013) 189.7px, rgba(0,0,0,0.0000) 190.0px); mask-image:linear-gradient(180deg, rgba(0,0,0,1.0000) 0.0px, rgba(0,0,0,0.9987) 0.3px, rgba(0,0,0,0.9901) 1.9px, rgba(0,0,0,0.9694) 5.8px, rgba(0,0,0,0.9337) 12.6px, rgba(0,0,0,0.8821) 22.4px, rgba(0,0,0,0.8154) 35.1px, rgba(0,0,0,0.7356) 50.2px, rgba(0,0,0,0.6456) 67.3px, rgba(0,0,0,0.5493) 85.6px, rgba(0,0,0,0.4507) 104.4px, rgba(0,0,0,0.3544) 122.7px, rgba(0,0,0,0.2644) 139.8px, rgba(0,0,0,0.1846) 154.9px, rgba(0,0,0,0.1179) 167.6px, rgba(0,0,0,0.0663) 177.4px, rgba(0,0,0,0.0306) 184.2px, rgba(0,0,0,0.0099) 188.1px, rgba(0,0,0,0.0013) 189.7px, rgba(0,0,0,0.0000) 190.0px); } .swf-nav-scrim i:nth-child(2){ height:120px; -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,1.0000) 0.0px, rgba(0,0,0,0.9987) 0.2px, rgba(0,0,0,0.9901) 1.2px, rgba(0,0,0,0.9694) 3.7px, rgba(0,0,0,0.9337) 8.0px, rgba(0,0,0,0.8821) 14.1px, rgba(0,0,0,0.8154) 22.2px, rgba(0,0,0,0.7356) 31.7px, rgba(0,0,0,0.6456) 42.5px, rgba(0,0,0,0.5493) 54.1px, rgba(0,0,0,0.4507) 65.9px, rgba(0,0,0,0.3544) 77.5px, rgba(0,0,0,0.2644) 88.3px, rgba(0,0,0,0.1846) 97.8px, rgba(0,0,0,0.1179) 105.9px, rgba(0,0,0,0.0663) 112.0px, rgba(0,0,0,0.0306) 116.3px, rgba(0,0,0,0.0099) 118.8px, rgba(0,0,0,0.0013) 119.8px, rgba(0,0,0,0.0000) 120.0px); mask-image:linear-gradient(180deg, rgba(0,0,0,1.0000) 0.0px, rgba(0,0,0,0.9987) 0.2px, rgba(0,0,0,0.9901) 1.2px, rgba(0,0,0,0.9694) 3.7px, rgba(0,0,0,0.9337) 8.0px, rgba(0,0,0,0.8821) 14.1px, rgba(0,0,0,0.8154) 22.2px, rgba(0,0,0,0.7356) 31.7px, rgba(0,0,0,0.6456) 42.5px, rgba(0,0,0,0.5493) 54.1px, rgba(0,0,0,0.4507) 65.9px, rgba(0,0,0,0.3544) 77.5px, rgba(0,0,0,0.2644) 88.3px, rgba(0,0,0,0.1846) 97.8px, rgba(0,0,0,0.1179) 105.9px, rgba(0,0,0,0.0663) 112.0px, rgba(0,0,0,0.0306) 116.3px, rgba(0,0,0,0.0099) 118.8px, rgba(0,0,0,0.0013) 119.8px, rgba(0,0,0,0.0000) 120.0px); } .swf-nav-scrim::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,22,23,0.5500) 0.0px, rgba(21,22,23,0.5497) 0.1px, rgba(21,22,23,0.5475) 0.9px, rgba(21,22,23,0.5421) 2.7px, rgba(21,22,23,0.5325) 6.0px, rgba(21,22,23,0.5181) 11.0px, rgba(21,22,23,0.4987) 17.7px, rgba(21,22,23,0.4743) 26.2px, rgba(21,22,23,0.4452) 36.2px, rgba(21,22,23,0.4120) 47.7px, rgba(21,22,23,0.3754) 60.3px, rgba(21,22,23,0.3363) 73.8px, rgba(21,22,23,0.2956) 87.9px, rgba(21,22,23,0.2544) 102.1px, rgba(21,22,23,0.2137) 116.2px, rgba(21,22,23,0.1746) 129.7px, rgba(21,22,23,0.1380) 142.3px, rgba(21,22,23,0.1048) 153.8px, rgba(21,22,23,0.0757) 163.8px, rgba(21,22,23,0.0513) 172.3px, rgba(21,22,23,0.0319) 179.0px, rgba(21,22,23,0.0175) 184.0px, rgba(21,22,23,0.0079) 187.3px, rgba(21,22,23,0.0025) 189.1px, rgba(21,22,23,0.0003) 189.9px, rgba(21,22,23,0.0000) 190.0px); } html:not(#swf-never) body.swf-dark-pin .swf-contact { --swf-page: #1c1d1f; --swf-base: #242628; --swf-raised: #2b2c2f; --swf-ink: #e0e0ee; --swf-ink-soft: #9da5b4; --swf-absent: #9ca3af; --swf-teal: #51dacf; --swf-mint: #7DF9E9; --swf-purple-lt: #a78bfa; --swf-btn-ink: #1C1D1F; } .swf-contact { padding-block: var(--swf-band) calc(var(--swf-band) * 2); position: relative; background: var(--swf-page); } /* ⭐ WD-675 (Neil, 2026-09-02: "I just want the same sequence as all the other pages, which is based on the Risen church animation sequence"). MEASURED on /about/ in light: `html.swh-arriving body` is #000; on release hero-motion WASHES the body ground #000 → the theme ground over `--swh-arrival` (1800ms, linear) while the content arrives. MEASURED on /contact/: the article painted its OWN ground (`--swf-page`, white) — it popped in whole at body-in and the body under it stayed #000 for the life of the page, so the wash never showed. The contact page now has no ground of its own: the BODY carries the page colour (under the funnel's own theme selectors, and only once `.swh-arriving` has lifted, exactly as hero-motion scopes its own pages), so the one wash rule hero-motion already owns paints it. The nav scrim is ground, not content: it rides the same 1800ms linear window from release instead of the body beat. Scoped to `html.swf-page-contact` (the shortcode id, never the slug). */ /* `!important` (measured on PROD, WD-675): the page there is the old slug, and Etch's legacy orchestrator sheet (`etch-sophicly-orchestrator-hide-css-*`) pins `body.page-slug-contact-us { background:#000 !important }` and, once revealed, `var(--body-bg, #000) !important` with the variable unset — black for the life of the page. Hero-motion beats the same pin on its own pages with (0,3,1) + `!important`; so does this. */ html.swf-page-contact:not(.swh-arriving) body { background-color: #1c1d1f !important; } html[data-theme='light']:not(.swh-arriving).swf-page-contact body, html.light:not(.swh-arriving).swf-page-contact body, html:not([data-theme='dark']):not(.dark):not(.dark-mode):not(.swh-arriving).swf-page-contact body { background-color: #ffffff !important; } html.swf-page-contact .swf, html.swf-page-contact .swf-contact { background: transparent; } html.swf-js.swf-page-contact.swh-body-in .swf-contact .swf-nav-scrim { transition: opacity var(--swh-arrival, 1800ms) linear; transition-delay: 0s; } /* ── WD-493f.1 · ATLAS'S GRID, read out of their own drawer (BackgroundGrid in hoisted.js, fetched 2026-08-30): vertical lines come in DOUBLE PAIRS 10px apart at ±(content/2 + 10) and ±(content/2 + 20), a second pair 12vw further out, and horizontals are a mirrored double pair framing the content block. 1px, one ink, alpha .2 on their page (under a fade mask) — .1 here, no mask. Our content region = the --swf-col column the wrap sits in. ⛔ the first cut collapsed all lines into ONE: `.swf-contact > *` (same specificity, later in the file) overrode this div's position:absolute, so its height was 0 and every percentage line piled up at the top. The child lift below now EXCLUDES the decor layers. */ .swf-contact__lines { /* full-bleed out of the 1240px article — Atlas's lines cross the whole VIEWPORT. `50vw` includes the scrollbar (the ledger's warning), so the page pins `overflow-x: clip` below: no scroll container, no sideways scrollbar, the overhang simply cannot scroll. */ position: absolute; inset: 0 calc(50% - 50vw); pointer-events: none; z-index: 0; overflow: hidden; /* half-width of the content region: the column's half, or the gutter edge when narrower */ --swf-chalf: min(calc(50% - var(--swf-gutter)), calc(var(--swf-col) / 2)); } body.swf-dark-pin { overflow-x: clip; } .swf-contact__lines i { position: absolute; background: currentColor; color: var(--swf-ink); opacity: .1; } /* inner double pair, left + right content edges */ .swf-contact__lines i:nth-child(1) { top: 0; bottom: 0; width: 1px; left: calc(50% - var(--swf-chalf) - 20px); } .swf-contact__lines i:nth-child(2) { top: 0; bottom: 0; width: 1px; left: calc(50% - var(--swf-chalf) - 10px); } .swf-contact__lines i:nth-child(3) { top: 0; bottom: 0; width: 1px; left: calc(50% + var(--swf-chalf) + 10px); } .swf-contact__lines i:nth-child(4) { top: 0; bottom: 0; width: 1px; left: calc(50% + var(--swf-chalf) + 20px); } /* outer double pair, 12vw further out (Atlas's t*.12) — off-canvas on narrow screens, clipped */ .swf-contact__lines i:nth-child(5) { top: 0; bottom: 0; width: 1px; left: calc(50% - var(--swf-chalf) - 20px - 12vw); } .swf-contact__lines i:nth-child(6) { top: 0; bottom: 0; width: 1px; left: calc(50% - var(--swf-chalf) - 10px - 12vw); } .swf-contact__lines i:nth-child(7) { top: 0; bottom: 0; width: 1px; left: calc(50% + var(--swf-chalf) + 10px + 12vw); } .swf-contact__lines i:nth-child(8) { top: 0; bottom: 0; width: 1px; left: calc(50% + var(--swf-chalf) + 20px + 12vw); } /* horizontal double pairs framing the content block, top and bottom */ .swf-contact__lines i:nth-child(9) { left: 0; right: 0; height: 1px; top: calc(var(--swf-band) - 34px); } .swf-contact__lines i:nth-child(10) { left: 0; right: 0; height: 1px; top: calc(var(--swf-band) - 24px); } .swf-contact__lines i:nth-child(11) { left: 0; right: 0; height: 1px; bottom: calc(var(--swf-band) + 24px); } .swf-contact__lines i:nth-child(12) { left: 0; right: 0; height: 1px; bottom: calc(var(--swf-band) + 34px); } /* WD-493f.2 · the texture — a still topo-contour field contact.js draws once. Behind everything, full-bleed like the lines (sized by its insets — no width:100%, which would re-cap it at the article's 1240px). */ /* ⛔ a canvas is a REPLACED element: left+right insets do NOT stretch it (it keeps its intrinsic 300×150, measured). Size it explicitly. */ .swf-contact__topo { position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; max-width: none; height: 100%; pointer-events: none; z-index: 0; } .swf-contact > :not(.swf-contact__lines):not(.swf-contact__topo):not(.swf-nav-scrim) { position: relative; z-index: 1; } /* WD-651: the scrim is a decor layer too */ /* WD-493d.1 — effortel's arrangement: headline LEFT, form RIGHT, above the fold. On the `.swf` grid the two sections share one row at desktop; the headline scale steps down so the pair fits. */ .swf-contact__head { display: block; } /* WD-493f.5 — the side rail (contact rows + ticker) rides the LEFT column under the headline at desktop; on a phone the source order (head → body → side) keeps the form above it. */ @media (min-width: 1024px) { .swf-contact__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 772px); grid-template-areas: "head body" "side body"; gap: 0 var(--swf-3xl, 48px); align-items: start; } .swf-contact__head { grid-area: head; } .swf-contact__body { grid-area: body; } .swf-contact__side { grid-area: side; } } .swf-contact__h { margin: 0; max-width: 100%; font-family: var(--swf-display); font-style: italic; font-weight: 400; /* capped at the band ladder's own top step (76px): the left column is ~420px beside the 772px form, and anything larger broke "Speak with" into four ragged lines (measured at 110px). */ font-size: clamp(48px, 5.5vw, 76px); line-height: 1.02; letter-spacing: -.02em; color: var(--swf-ink); } .swf-contact__lead { margin: var(--swf-xl) 0 0; max-width: 30ch; font-family: var(--swf-font); font-size: 18px; line-height: 1.45; color: var(--swf-ink-soft); } /* ⛔ measured: inside the `.swf` grid an item with `margin:auto` stops stretching and shrinks to its content (677px, and 254px on a phone). `justify-self` centres it; `width:100%` fills the track. */ .swf-contact__body { width: 100%; max-width: 772px; margin: var(--swf-xl) 0 0; } @media (min-width: 1024px) { .swf-contact__body { margin-top: 0; } } .swf-contact__form { display: flex; flex-direction: column; gap: var(--swf-xl); } .swf-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--swf-xl) var(--swf-3xl, 48px); } .swf-field { display: flex; flex-direction: column; gap: var(--swf-sm); font-family: var(--swf-font); } .swf-field > span { font-size: 16px; color: var(--swf-ink); } /* WD-493e brand pass (Neil: "get rid of the strokes around the outside") — Atlas's hairline border is theirs; ours is a quiet fill, the brand radius, and a teal ring only on focus. */ .swf-field input, .swf-field select, .swf-field textarea { width: 100%; min-height: 48px; padding: 12px 14px; margin: 0; font: inherit; font-size: 18px; color: var(--swf-ink); /* WD-493h.1 (Neil: the topo pattern showed THROUGH the fields — the old rgba fill was translucent, not a z-index fault). OPAQUE lift from the brand dark ladder instead. */ background: var(--swf-base); border: 0; border-radius: var(--swf-r-md); outline: none; transition: box-shadow .2s ease, background-color .2s ease; } .swf-field input:focus-visible, .swf-field select:focus-visible, .swf-field textarea:focus-visible { box-shadow: 0 0 0 2px var(--swf-teal); background: var(--swf-raised); } .swf-field textarea { resize: vertical; min-height: 156px; } .swf-field select { appearance: none; -webkit-appearance: none; cursor: pointer; } .swf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .swf-contact__actions { display: flex; justify-content: flex-end; } /* WD-493f.4 — Neil: "Halo style is fine but reduce the padding — it looks a bit big and ugly." Contact page only: the site-wide button keeps its own scale. */ .swf-contact .swf-btn { min-height: 50px; padding: 0 var(--swf-2xl); } .swf-contact__err { margin: 0; color: #ffb4b4; font-family: var(--swf-font); font-size: 15px; } .swf-contact__done { text-align: left; } .swf-contact__done-h { margin: 0 0 var(--swf-md); font-family: var(--swf-display); font-style: italic; font-weight: 400; font-size: clamp(32px, 4vw, 48px); color: var(--swf-ink); } .swf-contact__done p { margin: 0; font-family: var(--swf-font); font-size: 18px; color: var(--swf-ink-soft); } /* WD-493f.5 — rows stack left-aligned under the lead, in the side rail */ .swf-contact__side { margin: var(--swf-2xl) 0 0; } .swf-contact__rows { display: flex; flex-direction: column; align-items: flex-start; gap: var(--swf-lg); margin: 0; } .swf-contact__rows div { display: flex; gap: var(--swf-lg); align-items: baseline; } .swf-contact__rows dt { min-width: 5.5em; } .swf-contact__rows dt { margin: 0; font-family: var(--swf-font); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--swf-ink-soft); } .swf-contact__rows dd { margin: 0; font-family: var(--swf-font); font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .swf-contact__rows a { color: var(--swf-ink); text-decoration: none; } .swf-contact__rows a:hover { color: var(--swf-teal); } .swf-contact__ticker { position: relative; height: 132px; overflow: hidden; margin-top: var(--swf-2xl); text-align: left; -webkit-mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent); mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent); } .swf-contact__ticker-run { list-style: none; margin: 0; padding: 0; font-family: var(--swf-font); font-size: 14px; font-weight: 700; letter-spacing: .1em; /* WD-493h.2 — Neil: the ticker read as just more grey text; teal separates it */ text-transform: uppercase; color: var(--swf-teal); line-height: 2; animation: swf-ticker-up 36s linear infinite; } @keyframes swf-ticker-up { from { transform: translateY(0); } to { transform: translateY(-100%); } } @media (prefers-reduced-motion: reduce) { .swf-contact__ticker-run { animation: none; } .swf-contact__ticker { height: auto; mask-image: none; -webkit-mask-image: none; } .swf-contact__ticker-run[aria-hidden] { display: none; } } @media (max-width: 760px) { .swf-contact__grid { grid-template-columns: 1fr; } .swf-contact__actions { justify-content: stretch; } .swf-contact__actions .swf-btn { width: 100%; } } /* ══════════════════════════════════════════════════════════════════════════════ WD-494 · THE DEMO PAGE — the contact page's sibling: same article class, same lines, same topo, same head/body/side grid. Only what differs is declared here. ══════════════════════════════════════════════════════════════════════════════ */ html:not(#swf-never) body.swf-dark-pin .swf-demo { --swf-page: #1c1d1f; --swf-base: #242628; --swf-raised: #2b2c2f; --swf-ink: #e0e0ee; --swf-ink-soft: #9da5b4; --swf-absent: #9ca3af; --swf-teal: #51dacf; --swf-mint: #7DF9E9; --swf-purple-lt: #a78bfa; --swf-btn-ink: #1C1D1F; } /* the widget paints its own white card; a quiet raised frame keeps it deliberate on the dark ground rather than a pasted-in rectangle */ .swf-demo__cal { background: var(--swf-base); border-radius: var(--swf-r-lg); padding: var(--swf-md); } .swf-demo__cal iframe { display: block; width: 100%; min-height: 700px; border: 0; border-radius: var(--swf-r-md); background: #fff; } .swf-demo__fallback { margin: var(--swf-md) 0 0; font-family: var(--swf-font); font-size: 13px; color: var(--swf-ink-soft); } .swf-demo__fallback a { color: var(--swf-ink); } .swf-demo__subh { margin: 0 0 var(--swf-lg); font-family: var(--swf-font); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--swf-ink-soft); } .swf-demo__learn { display: flex; flex-direction: column; gap: var(--swf-xl); margin: 0; max-width: 34ch; } .swf-demo__learn dt { margin: 0; font-family: var(--swf-font); font-size: 16px; font-weight: 700; color: var(--swf-ink); } .swf-demo__learn dd { margin: var(--swf-sm) 0 0; font-family: var(--swf-font); font-size: 15px; line-height: 1.5; color: var(--swf-ink-soft); } .swf-demo__talk { margin: var(--swf-2xl) 0 0; font-family: var(--swf-font); font-size: 15px; color: var(--swf-ink-soft); max-width: 34ch; } .swf-demo__talk a { color: var(--swf-teal); text-decoration: none; } .swf-demo__talk a:hover { text-decoration: underline; } /* ══════════════════════════════════════════════════════════════════════════════ WD-491 · PROGRAMME PAGE STRIPS — the problem brief (verdict 1) and the merged method strip (verdict 2). They sit between Etch components, follow the theme like every .swf section, and own their vertical space by padding only (WD-357). ══════════════════════════════════════════════════════════════════════════════ */ .swf-pbrief { padding-block: var(--swf-band); text-align: center; } .swf-pbrief__line { margin: 0 auto; max-width: 42rem; font-family: var(--swf-font); font-size: clamp(18px, 2.2vw, 22px); line-height: 1.55; color: var(--swf-ink); text-wrap: balance; } .swf-pbrief__link { margin: var(--swf-xl) 0 0; font-family: var(--swf-font); font-size: 15px; font-weight: 700; letter-spacing: .04em; } .swf-pbrief__link a { color: var(--swf-teal); text-decoration: none; } .swf-pbrief__link a:hover { text-decoration: underline; } .swf-method { padding-block: var(--swf-band); } .swf-method__h { margin: 0; text-align: center; font-family: var(--swf-display); font-style: italic; font-weight: 400; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; color: var(--swf-ink); } .swf-method__lead { margin: var(--swf-lg) auto 0; max-width: 34rem; text-align: center; font-family: var(--swf-font); font-size: 18px; color: var(--swf-ink-soft); } .swf-method__rows { display: flex; flex-direction: column; gap: var(--swf-lg); max-width: 46rem; margin: var(--swf-2xl) auto 0; } .swf-method__rows > div { background: var(--swf-base); border-radius: var(--swf-r-lg); padding: var(--swf-xl); } .swf-method__rows dt { margin: 0 0 var(--swf-sm); font-family: var(--swf-font); font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--swf-teal); } .swf-method__rows dd { margin: 0; font-family: var(--swf-font); font-size: 16px; line-height: 1.55; color: var(--swf-ink); } .swf-method__rows dd span { color: var(--swf-ink-soft); font-weight: 700; } .swf-method__close { margin: var(--swf-2xl) auto 0; max-width: 34rem; text-align: center; font-family: var(--swf-font); font-size: 17px; font-weight: 700; color: var(--swf-ink); } /* ⭐⭐ WD-584 — THE GAP'S HERO IS THE AUTHORED PHOTOGRAPH NOW, AND ITS CROP HAS TO BE STEERED. Neil, 2026-09-01: *"for the gap page, you're still using the old header hero image. Can we use one of the new images, please?"* ⛔ WHY THIS NEEDS CSS AT ALL, rather than just swapping the file. MEASURED on staging: the same `