/* * Brightway Consultancy — hero.css * Home hero "Video Background Hero" — full-bleed editorial composition * over a looping muted MP4 video. The video carries the atmosphere * (golden dust shimmer, served from /assets/videos/hero.mp4); a * vertical gradient overlay (light at the top, denser at the bottom) * guarantees the H1 + sub + CTAs remain legible without burying the * video. Reduced-motion users see the same composition minus the video * (hidden); the body's warm-dark background-color (base.css §body) * shows through the transparent slot. * * Depends on tokens.css, layout.css, components.css. Reference: * Apple, Stripe, Linear hero-video tradition — gradient overlay over * video for editorial legibility (no heavy uniform mask). * * Scope (7 blocks): * 1. .bwc-section--hero local override of layout.css * (relative anchor for video + * overlay, isolation context, * overflow clip, editorial top * padding, vertical flex centring) * 2. .bwc-hero-video full-bleed video background * 2b. WebKit media controls hide defeats Safari's UA play-button * overlay when autoplay is gated * 3. .bwc-section--hero::after gradient overlay over the video * for editorial legibility * 4. .bwc-hero-content editorial copy overlay, max 60ch * 5. .bwc-hero-content > * + * single-lobotomy rhythm rule * 6. .bwc-hero-cta-group flex row for the 2 hero CTAs * 7. @media reduced-motion hide the video; overlay + body * bg preserve the composition * * Universal contract: * - Logical properties everywhere (inline-size, block-size, inset, * padding-block-*, margin-block-*). * - No transition: all (no transitions at all in this file). * - No CSS animations at this phase — the video carries the motion, * the gradient overlay is static. * - prefers-reduced-motion handled in bloc 7. !important is used in * two sanctioned exceptions: bloc 2b (override WebKit's UA media- * controls pseudo-elements, where no other mechanism works) and * bloc 7 (Eric Meyer reduced-motion neutralisation, matching the * pattern in utilities.css §4). * - Color tokens only: --bwc-bg (warm-dark canvas), mixed with * transparent via color-mix() for the overlay gradient stops — * no hardcoded rgba() in code. */ /* =========================================================================== * 1. Section override — relative anchor for the video + overlay, * isolation context (stacking confined to this section so the * body-wide grain in utilities.css §5 still composites over the * whole hero), overflow clip for any video bleed past the section * edges, editorial top padding lifts the H1 above natural vertical * centre, flex centring keeps content vertically aligned. * ========================================================================= */ .bwc-section--hero { position: relative; isolation: isolate; overflow: hidden; min-block-size: 100dvh; padding-block-start: clamp(6rem, 12vh, 12rem); display: flex; align-items: center; } /* =========================================================================== * 2. Hero video — full-bleed background. * inset: 0 + inline/block-size 100% = video fills the section. * object-fit: cover crops the video to fill any aspect ratio without * distortion — desktop wide, mobile portrait, ultrawide all served. * pointer-events: none guarantees the video never intercepts a * click (CTAs above remain clickable). z-index: 0 places the video * at the section's stacking floor; the ::after overlay sits at the * same z-index level (later-painted by sibling rule) and the * content lifts to z-index: 1 above both. * ========================================================================= */ .bwc-hero-video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: 0; pointer-events: none; /* Lift the golden-dust shimmer: the source clip is intentionally * underexposed, and the warm-dark canvas + gradient below would * otherwise mute it to near-invisible. brightness(1.32) brings the * dust into the upper midtones; contrast(1.06) sharpens highlight * grain without crushing blacks. Composited on GPU — no FPS cost. */ filter: brightness(1.32) contrast(1.06); } /* =========================================================================== * 2b. WebKit media controls hide — when Safari's autoplay heuristic * defers (Low Power Mode, restrictive site settings) it injects a * centred "play" overlay drawn by UA shadow-DOM pseudo-elements. * Those pseudos sit at UA-level specificity that no normal selector * can beat — !important is required. Sanctioned exception per the * contract header above. * * Playback continues to be requested by autoplay + JS .play() in * main.js; this CSS only hides the visual overlay, it does NOT * bypass any user-permission requirement. * ========================================================================= */ .bwc-hero-video::-webkit-media-controls, .bwc-hero-video::-webkit-media-controls-enclosure, .bwc-hero-video::-webkit-media-controls-overlay-enclosure, .bwc-hero-video::-webkit-media-controls-panel, .bwc-hero-video::-webkit-media-controls-overlay-play-button, .bwc-hero-video::-webkit-media-controls-start-playback-button, .bwc-hero-video::-webkit-media-controls-play-button, .bwc-hero-video::-webkit-media-controls-fullscreen-button, .bwc-hero-video::-webkit-media-controls-mute-button, .bwc-hero-video::-webkit-media-controls-timeline, .bwc-hero-video::-webkit-media-controls-current-time-display, .bwc-hero-video::-webkit-media-controls-time-remaining-display, .bwc-hero-video::-webkit-media-controls-volume-slider { display: none !important; -webkit-appearance: none !important; pointer-events: none !important; opacity: 0 !important; } /* =========================================================================== * 3. Section overlay — vertical gradient tuned to let the golden-dust * video breathe while keeping H1 + sub + CTAs readable. * * Composition: the H1 + sub + CTAs sit roughly in the lower half of * the hero (vertical flex-centre + top padding). The TOP half is * purely atmospheric and now passes the video through entirely; the * BOTTOM half catches density only where text actually lives. * * Stops: * 0–45% transparent — pure video, full dust visibility * 60% bg @ 22% — subtle ramp begins * 82% bg @ 52% — text band starts catching density * 100% bg @ 72% — final readability anchor (warm-dark * tinted, not near-opaque, so the * dust around the CTAs still reads). * * color-mix(in srgb) keeps the overlay tonally aligned with the body * background (no hardcoded rgba). pointer-events: none ensures CTAs * remain clickable through the overlay layer. * ========================================================================= */ .bwc-section--hero::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient( to bottom, transparent 0%, transparent 45%, color-mix(in srgb, var(--bwc-bg) 22%, transparent) 60%, color-mix(in srgb, var(--bwc-bg) 52%, transparent) 82%, color-mix(in srgb, var(--bwc-bg) 72%, transparent) 100% ); pointer-events: none; } /* =========================================================================== * 4. Hero content — z-index lift above the video + overlay (both at * z-index 0) + max editorial measure (60ch) so the H1 + sub keep a * readable line length on wide viewports. * ========================================================================= */ .bwc-hero-content { position: relative; z-index: 1; max-inline-size: 60ch; } /* --------------------------------------------------------------------------- * 4b. Brand monogram — the picto above the eyebrow/H1. Left-aligned with the * editorial content axis; square asset, height auto. Sized in a clamp so * it reads as a confident mark on desktop yet never crowds the H1 off a * short mobile viewport. A warm-dark halo (drop-shadow, tinted from * --bwc-bg via color-mix to honour this file's no-hardcoded-rgba rule) * keeps the picto legible over the bright top of the golden-dust video, * where the gradient overlay is still transparent. Static — no motion. * ------------------------------------------------------------------------- */ .bwc-hero-monogram { display: block; inline-size: clamp(5.75rem, 4.5rem + 4vw, 8.75rem); /* 92 → 140px */ block-size: auto; filter: drop-shadow(0 3px 22px color-mix(in srgb, var(--bwc-bg) 72%, transparent)); } /* =========================================================================== * 5. Hero content vertical rhythm — single lobotomy rule (Heydon * Pickering). Every direct child after the first gets the same * block-start margin, producing consistent vertical spacing across * eyebrow / H1 / sub / CTA group without per-element rules. * ========================================================================= */ .bwc-hero-content > * + * { margin-block-start: var(--bwc-space-4); } /* =========================================================================== * 6. CTA group — primary + ghost pair, flex-wrap so the pair stacks * on narrow viewports without a media query. * ========================================================================= */ .bwc-hero-cta-group { display: flex; flex-wrap: wrap; gap: var(--bwc-space-2); } /* =========================================================================== * 7. prefers-reduced-motion — hide the video entirely (accessibility). * The ::after gradient overlay remains (it has no animation) and * the body's warm-dark background-color (base.css sets * body { background-color: var(--bwc-bg); }) shows through the * transparent video slot. The hero reads as a flat editorial still: * eyebrow + H1 + sub + CTAs legible against the dark canvas, no * motion of any kind. !important is one of the two sanctioned * exceptions in this file (cf. bloc 2b), matching the pattern * documented in utilities.css §4 (Eric Meyer reduced-motion * neutralisation, 2019). * ========================================================================= */ @media (prefers-reduced-motion: reduce) { .bwc-hero-video { display: none !important; } }