/* * Brightway Consultancy — utilities.css * Accessibility helpers + reveal initial state + reduced-motion guard. * Depends on tokens.css. MASTER.md §11 / BRIEF §9 / Emil §6.3 rule 6. * * Scope — 5 single-purpose utilities, no component logic: * 1. .bwc-sr-only — visually hide, keep for assistive tech * 2. .bwc-skip-link — skip-to-content (focus-visible reveal), * snaps into view (Emil rule 1: never animate * keyboard-initiated actions) * 3. .bwc-reveal — scroll-entry initial state for GSAP (Phase 7); * gated behind (prefers-reduced-motion: * no-preference) so reduced-motion users see * content visible by default — robust to * GSAP load failure or animation gating * 4. prefers-reduced-motion universal override on animation-duration, * animation-iteration-count, transition-duration, * scroll-behavior. Opacity / color / transform * end-states still resolve their final value — * they snap instead of animating, so no * affordance is lost (Emil §6.3 rule 6). * 5. body::before — body-wide film grain overlay (Editorial * Luxury §3.A.2, Phase 6 addition). Fixed * pseudo-element, pointer-events:none. Breaks * gradient banding + creates the "physical * paper feel" central to the brand mood. * * Tokens consumed: --bwc-z-sticky, --bwc-bg-elevated, --bwc-text, * --bwc-accent-gold, --bwc-font-body, --bwc-fs-sm. */ /* =========================================================================== * 1. SR-ONLY — visually hidden, accessible to screen readers * Standard combo (clip + clip-path + 1px box + nowrap) — covers legacy * and modern UA, defeats line-break-induced exposure. * ========================================================================= */ .bwc-sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* =========================================================================== * 2. SKIP-LINK — first focusable element (BRIEF §9 a11y) * Off-screen at rest, snaps into the viewport when keyboard-focused. * No transition on inset-block-start — keyboard-initiated reveal must * be instant (Emil §6.3 rule 1). * ========================================================================= */ .bwc-skip-link { position: absolute; inset-block-start: -100%; inset-inline-start: 1rem; z-index: var(--bwc-z-sticky); display: inline-block; padding-block: 0.75rem; padding-inline: 1rem; background-color: var(--bwc-bg-elevated); color: var(--bwc-text); border: 1px solid var(--bwc-accent-gold); border-radius: 4px; font-family: var(--bwc-font-body); font-size: var(--bwc-fs-sm); font-weight: 500; text-decoration: none; } .bwc-skip-link:focus, .bwc-skip-link:focus-visible { inset-block-start: 1rem; outline: 2px solid var(--bwc-accent-gold); outline-offset: 2px; } /* =========================================================================== * 3. REVEAL — initial hidden state for GSAP scroll entries (MASTER §6.4) * Gated behind no-preference so reduced-motion users (or users with no * JS / GSAP load failure) see content visible by default. GSAP in * Phase 7 transitions opacity/transform/filter to their final values. * ========================================================================= */ @media (prefers-reduced-motion: no-preference) { .bwc-reveal { opacity: 0; transform: translateY(24px); filter: blur(8px); /* ≤20px — Emil §6.3 rule 9 budget */ } } /* =========================================================================== * 4. PREFERS-REDUCED-MOTION — universal animation/scroll override * Reduces motion to instant snap (0.01ms is the established cross-UA * safe value — preserves cascade end-states while killing perceptible * motion). Touches ONLY motion-related timing properties — opacity, * color, transform end-states still resolve their final value * instantly (Emil §6.3 rule 6: reduced, not zero). * ========================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* =========================================================================== * 4b. NAV-OPEN — body class that scrolls the mobile nav state machine. * Adding this class to simultaneously: (a) reveals the mobile * nav overlay (rule in nav.css §10), (b) swaps the hamburger icon for * the X (rule in nav.css §9), and (c) locks document scroll (this * rule). Single source of truth, written by main.js — no other * selector should react to it. overflow:hidden on stops the * page scroll while the fixed overlay is open; overscroll-behavior: * contain on the overlay (nav.css §10) keeps touch-momentum confined. * ========================================================================= */ body.bwc-nav-open { overflow: hidden; } /* =========================================================================== * 5. GRAIN — body-wide film grain overlay (Editorial Luxury §3.A.2, * Phase 6 addition for the Aurora Hero). * * Fixed pseudo-element on , pointer-events: none. The grain * breaks subtle gradient banding (the 3 aurora blobs, future * atmospheric panels) and creates the "physical paper feel" central * to the brand mood. * * SVG inline via data URI — no external request, no * GPU repaints (fixed = composited once). * * z-index: 9999 places grain above ALL content for a consistent * paper feel including over modals/tooltips. If overlay on saturated * UI elements (red CTA, gold eyebrow) appears to mute colors after * visual test, lower z-index to 1 to position grain below content * but above background. Iterative decision after cold-reload review. * * mix-blend-mode: overlay is calibrated for dark mode (warm-dark * #0A0A0A). If light mode is enabled in Phase 10/12, this blend * mode may need switching to 'soft-light' or removal entirely * depending on the new palette luminance. * ========================================================================= */ body::before { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity: 0.03; mix-blend-mode: overlay; } /* * AUDIT — Phase 5 complete, utilities.css (2026-05-20) * * emil-design-eng — Before/After review (greenfield; rules check): * * | Concern (rule) | Resolution | * |-------------------------------------------------|-------------------------------------------------------------------------------------------------| * | Rule 1 — no animation on keyboard-init actions | ✅ Skip-link reveal on :focus / :focus-visible has NO transition on inset-block-start — snaps. | * | Rule 2 — exact transition properties | N/A — utilities.css contains zero `transition` declarations. | * | Rule 3 — asymmetric enter/exit | N/A — no enter/exit motion at this level (reveal is GSAP-handled in Phase 7). | * | Rule 5 — hover gated | N/A — no :hover selectors in this file. | * | Rule 6 — prefers-reduced-motion respected | ✅ Two-layer defense: (a) .bwc-reveal initial hidden state is GATED behind no-preference so | * | | reduced-motion users see content visible by default; (b) universal `*` override neutralizes | * | | animation/transition durations to 0.01ms — end-states cascade, motion does not. | * | Rule 7 — no scale(0) entries | ✅ .bwc-reveal uses translateY(24px) + opacity(0) + blur(8px). No scale at all. | * | Rule 9 — animate transform/opacity (blur ≤20px) | ✅ blur(8px) is within the explicit ≤20px sparing budget; reveal animates only filter, opacity, | * | | transform — no layout-thrashing properties touched. | * * Duration audit: 0.01ms !important is intentional — established cross-UA * pattern (Eric Meyer 2019, adopted by web.dev, MDN, accessibility guides) * for snapping animations to instant while keeping cascade end-states. NOT * a UI duration to compare against the Emil ≤300ms table — this is the * reduced-motion neutralization value, semantically "zero motion". * * Easing audit: --bwc-ease-in not referenced. No easings declared in this * file (no transitions). --bwc-ease-* tokens not consumed. * * high-end-visual-design — Absolute Zero: * * | Anti-pattern | Status | * |-------------------------------------------------|-------------------------------------------------------------------------------------------------| * | Inter/Roboto/Arial/etc. fonts | ✅ Skip-link uses --bwc-font-body (Barlow). | * | Pure #000 / pure #FFF | ✅ Skip-link uses --bwc-bg-elevated / --bwc-text (warm-tinted). | * | 1px solid gray | ✅ Skip-link border is --bwc-accent-gold (semantic, not neutral). | * | shadow-md / shadow-lg | ✅ No drop shadows. Skip-link uses a hairline gold border, no shadow. | * | Default focus ring | ✅ Skip-link :focus / :focus-visible custom — 2px gold + 2px offset. | * | transition: all | ✅ Zero transitions declared. | * | Built-in CSS ease-in / ease-in-out keywords | ✅ Zero — no transitions. | * | Linear easing on UI | N/A — no transitions. | * | Tailwind utility class | ✅ All .bwc-* prefixed BEM-style. No utility-framework patterns. | * * Accessibility verification: * * | WCAG / BRIEF §9 requirement | Status | * |-------------------------------------------------|-------------------------------------------------------------------------------------------------| * | Skip-to-content as first focusable element | ✅ header.php emits `…` before nav; this file | * | | provides its visible/focus styling. | * | Visible focus states on every interactive elem | ✅ Skip-link :focus + :focus-visible custom outline (gold 2px, offset 2px). | * | Screen-reader-only content available | ✅ .bwc-sr-only standard pattern (clip + clip-path + 1px box). | * | prefers-reduced-motion respected globally | ✅ Universal override + .bwc-reveal gated under no-preference. | * * Result: 0 blocking violation. Phase 5 complete — last placeholder filled. */