/* ============================================================================ voyce-refine.css — professional refinement layer, VOYCE brand preserved. SCOPED to `body.voyce-refine` so it applies only to the checkpoint pages and can be removed by deleting one class. The foundation is untouched and recoverable at tag `foundation-complete`. BRAND RULES THIS LAYER MUST NOT BREAK (docs/BRAND.md, measured not assumed): - Inter only, weights 400 and 700. No new family. - Everything except body copy is lowercase. - Headings carry negative tracking that SCALES WITH SIZE (-3.26px at 67.84px = -0.048em). Expressed in em below, so fluid type keeps the signature at every size. This is the single easiest thing to lose and the most damaging. - Display line-height stays below 1.0. - Pure monochrome, zero saturation. Body text #D8D8D8 on #000 — deliberately not white. ============================================================================ */ body.voyce-refine { --vr-text: #D8D8D8; --vr-muted: rgba(255,255,255,.66); --vr-rule: #3A3A3A; } /* ── TYPE: DELIBERATELY NOT TOUCHED ───────────────────────────────────────── An earlier version of this file set fluid clamp() sizes on h1/h2/h3 and capped body copy at 68ch. Measured against live afterwards, every one of those was wrong: index@390 h1 live 46.38px my clamp produced 36px -> a REGRESSION I introduced academy@390 h2 live 98.6px ours 98.5px -> never a bug; live is the same chars/line live 88/90 at 1440, 46 at 390 -> ours already matched; the 68ch cap was looser than live's own 48ch/36ch block rules and inert Live already manages measure deliberately - 48ch on desktop text blocks, 36ch on the academy lede, explicitly released to none below 760px - and academy's h2 takes its size from Squarespace's scaled-text container via `font-size: inherit !important`, so no h2 selector can win regardless. The "mobile heading bug" was the design. Type is therefore left exactly as live sets it. Changing it is a design decision for the owner, not a repair, and it is not being made silently. */ /* ── 1. TOUCH TARGETS (WCAG 2.2 AA, 2.5.8) ────────────────────────────────── Measured: 8 interactive elements under 24x24 on index@1440, 2 on academy - and LIVE HAS THE SAME COUNTS (8 / 1 / 2 / 0 across the four page+width combinations). So this is not a mirror defect; it is a deliberate accessibility improvement OVER live, which §4 authorises. Flagged as such rather than presented as a repair. Inline text links are exempt by the success criterion, so this targets buttons and nav items only. */ body.voyce-refine .sqs-block-button-element, body.voyce-refine .header-nav-item > a, body.voyce-refine button:not(.accordion-item__click-target) { min-height: 24px; display: inline-flex; align-items: center; } /* ── 2. VISIBLE FOCUS (WCAG 2.4.7 / 2.4.11) ───────────────────────────────── Keyboard users had no reliable focus indicator. currentColor inherits the element's own colour, so contrast is satisfied wherever it lands without hard-coding a value that would fail on one of the surfaces. scroll-margin keeps a focused element clear of the fixed header, which is 224px tall and would otherwise cover it (2.4.11 focus-not-obscured). */ /* !important is required here, not preferred: Squarespace's transplanted reset sets `outline: none` on interactive elements with higher specificity than any selector this file can reasonably reach. Verified by keyboard Tab - before this, outline-style computed to `none` even with the rule present, so the indicator did not exist for keyboard users. */ body.voyce-refine :focus-visible { outline: 2px solid currentColor !important; outline-offset: 3px !important; border-radius: 2px; } body.voyce-refine :focus { outline: none; } body.voyce-refine :focus-visible { scroll-margin-top: 240px; scroll-margin-bottom: 48px; } /* ── 3. COURSE LIST — density and hierarchy (academy) ─────────────────────── The course rows are the densest information on the site and the page a prospective student actually reads. Rules were #3A3A3A hairlines with uniform spacing, so 25 rows read as one undifferentiated block. Slightly more row height, a clearer hover, and a hit area that covers the whole row rather than the text alone. Nothing is hidden and no copy changes. */ body.voyce-refine .accordion-item { border-color: var(--vr-rule); } body.voyce-refine .accordion-item__click-target { padding-top: .9rem; padding-bottom: .9rem; transition: opacity .18s ease; } body.voyce-refine .accordion-item__click-target:hover { opacity: .72; } /* ── 4. MOTION, AND THE ACCESSIBILITY FLOOR ───────────────────────────────── Reduced-motion support was absent. Animation is suppressed rather than merely shortened, and - the part that matters - every reveal is forced to its FINAL visible state. A reader who asks for reduced motion must still be able to read the page, which is the same guarantee as the JS-disabled case. */ @media (prefers-reduced-motion: reduce) { body.voyce-refine *, body.voyce-refine *::before, body.voyce-refine *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } body.voyce-refine .preFade, body.voyce-refine .preSlide { opacity: 1 !important; transform: none !important; visibility: visible !important; } } /* ── 6. MEDIA ─────────────────────────────────────────────────────────────── Images keep their aspect box while loading so the page does not reflow under the reader, and grayscale stays the brand treatment. */ body.voyce-refine img { max-width: 100%; height: auto; } /* ═══════════════════════════════════════════════════════════════════════════ PILOT — Home and Academy only (body.voyce-refine). Composition, not decoration. Brand invariants held throughout: Inter 400/700 only, no new family; no new colour outside the measured monochrome set; no gradients, rounded cards, shadows or stock imagery; no new animation; no invented copy, price, duration or claim. ═══════════════════════════════════════════════════════════════════════════ */ /* ── A. COURSE METADATA CHIP (academy) ────────────────────────────────────── Surfaces each course's OWN "12 sessions · 18 hours · 6 weeks" line, already present as the first line of its panel, into the collapsed row. Measured: 17 of 25 courses state sessions, 16 state hours and weeks, none state a fee — so the chip shows only what that course says. Set in the muted brand grey so the course NAME stays the primary object and the row still scans as a list of names, not a table. */ body.voyce-refine .vr-meta { display: block; margin-top: .3rem; font-size: .8125rem; font-weight: 400; line-height: 1.3; letter-spacing: .01em; color: rgba(255, 255, 255, .62); font-variant-numeric: tabular-nums; } /* From 768px the row is wide enough to carry name and metadata on one line, which makes courses directly comparable down the column instead of stacking. */ @media (min-width: 768px) { body.voyce-refine .accordion-item__title { display: flex; align-items: baseline; gap: 1.25rem; flex-wrap: wrap; } body.voyce-refine .vr-meta { display: inline; margin-top: 0; margin-left: auto; padding-left: 1.5rem; white-space: nowrap; } } /* ── B. ACTION AFFORDANCE (home) ──────────────────────────────────────────── The four calls to action already exist and already point at real pages — Explore Releases → /record-label, Submit Demo → /demodrop-1, Explore Studio → /recording-studio, Book a Session → /book-studio. Nothing is added and no label is rewritten; they simply did not READ as actions, rendering as plain text among plain text. A hairline box in the existing rule colour gives them an edge and a real hit area without introducing a button style the brand does not have — no fill, no radius, no shadow. */ body.voyce-refine .sqs-block-button-element { border: 1px solid var(--vr-rule); padding: .85rem 1.6rem; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; transition: border-color .18s ease, color .18s ease; } body.voyce-refine .sqs-block-button-element:hover, body.voyce-refine .sqs-block-button-element:focus-visible { border-color: #FFF; color: #FFF; } @media (prefers-reduced-motion: reduce) { body.voyce-refine .sqs-block-button-element { transition: none; } } /* ── C. SECTION RHYTHM (academy course groups) ────────────────────────────── I GOT THIS WRONG FIRST AND THE MEASUREMENT CORRECTED ME. The five course-group sections looked like a rhythm defect: structurally equivalent, but bottom padding at 1440 of 126.72 / 188.72 / 126.72 / 256.72 / 126.72px. I normalised them to the dominant 126.72px. The rule never applied, and finding out why showed the normalisation was wrong anyway: @media (min-width: 768px) .va-colsec > .content-wrapper { padding-bottom: calc(126.72px + var(--va-pad, 0px)) !important } The surplus is `--va-pad` — the owner's own injected mechanism reserving vertical space for the decorative left-column "object studies" images (`--va-img`, `--va-h`), whose heights differ per section. The varying padding is DELIBERATE and load-bearing; flattening it would crowd or clip those images. Desktop spacing is therefore left exactly as the site sets it. Mobile is a different case and is safe: both the `.va-col::after` image and the `.va-colsec` padding rule sit inside `@media (min-width: 768px)`, so `--va-pad` has no effect below 768px and nothing is reserved. There the padding is a uniform 6.6vmax (55.7px at 390x844) on a page that runs to 12,658px, and the groups read as widely separated islands. Tightened so related courses sit closer together — the one deliberate density change in this pilot, and it removes no content. :has() is already used by live's own injected CSS (`body:has(#vacad)`), so support is not a new assumption. */ @media (max-width: 767px) { body.voyce-refine section.page-section:has(.accordion-item) > .content-wrapper { padding-top: 34px !important; padding-bottom: 34px !important; } }