/* ============================================================ AGENT-A · Hero section · v2.7 (Direct-Download Pivot) ------------------------------------------------------------ Mobile-first (375x667). Tablet 768. Desktop 960. Rail ≥1280. Palette inherits tokens.css (loaded before this file in cascade); fallback values mirror the FANATIK locked palette so the partial is testable in isolation. v2.7 changes vs v2.6: - LEFT plate replaced: 4-still slow-crossfade VEO-style bg (was 16:10 b-roll video). CSS-only animation. Reduced-motion locks to still #1 (no JS swap, no flash). - PRIMARY CTAs replaced: App Store + Google Play badges (was left-tick text "START THE QUIZ." button). - SECONDARY: "OR TEST YOURSELF FIRST →" subdued text link. - Vertical rhythm bumped: --hero-pad-y, .hero__copy gap, and dedicated cta-group → secondary → tick spacing all pushed up so 1080p+ doesn't feel cramped. ============================================================ */ :root { --black: #000000; --off-black: #0A0A0A; --lime: #D3FE4C; --white: #FFFFFF; --gold: #E6B84D; --mute: rgba(255, 255, 255, 0.55); --mute-deep: rgba(255, 255, 255, 0.35); --rule: rgba(255, 255, 255, 0.10); --hero-pad-x: clamp(20px, 5vw, 80px); /* v2.7 rhythm bump: floor 60, ceiling 120 (was 48-96) so the full vertical stack — manifesto, explainer, badges, link, tick — breathes at 1080p+. */ --hero-pad-y: clamp(60px, 8vh, 120px); --hero-gap: clamp(28px, 4vw, 56px); --hero-max: 1440px; --type-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --type-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; } /* ---------------------------------------------------------- Section frame ---------------------------------------------------------- */ .hero { position: relative; display: block; width: 100%; max-width: 100%; box-sizing: border-box; /* Mobile/tablet floor — desktop caps at 100vh, see below. */ min-height: 720px; background: var(--black); color: var(--white); font-family: var(--type-display); padding: var(--hero-pad-y) var(--hero-pad-x); padding-top: max(var(--hero-pad-y), env(safe-area-inset-top)); padding-bottom: max(var(--hero-pad-y), env(safe-area-inset-bottom)); overflow: hidden; isolation: isolate; } .hero *, .hero *::before, .hero *::after { box-sizing: border-box; } /* ---------------------------------------------------------- T15 · Speed-line grammar — 6 horizontal lime hairlines at FANATIK Y positions: 15 / 28 / 50 / 62 / 73 / 86%. ---------------------------------------------------------- */ .hero::before { content: ""; position: absolute; inset: 0; width: 100%; left: 0; transform: none; pointer-events: none; z-index: 1; background-image: linear-gradient(to bottom, transparent 14.95%, rgba(211, 254, 76, 0.08) 14.95%, rgba(211, 254, 76, 0.08) 15.05%, transparent 15.05%), linear-gradient(to bottom, transparent 27.95%, rgba(211, 254, 76, 0.08) 27.95%, rgba(211, 254, 76, 0.08) 28.05%, transparent 28.05%), linear-gradient(to bottom, transparent 49.95%, rgba(211, 254, 76, 0.08) 49.95%, rgba(211, 254, 76, 0.08) 50.05%, transparent 50.05%), linear-gradient(to bottom, transparent 61.95%, rgba(211, 254, 76, 0.08) 61.95%, rgba(211, 254, 76, 0.08) 62.05%, transparent 62.05%), linear-gradient(to bottom, transparent 72.95%, rgba(211, 254, 76, 0.08) 72.95%, rgba(211, 254, 76, 0.08) 73.05%, transparent 73.05%), linear-gradient(to bottom, transparent 85.95%, rgba(211, 254, 76, 0.08) 85.95%, rgba(211, 254, 76, 0.08) 86.05%, transparent 86.05%); background-repeat: no-repeat; background-size: 100% 100%; } .hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; grid-template-areas: "bg" "copy"; gap: var(--hero-gap); max-width: var(--hero-max); margin: 0 auto; align-items: center; } /* ---------------------------------------------------------- v2.7 · VEO-style 4-still slow-crossfade background plate ---------------------------------------------------------- Layout: each .hero__bg-still is absolutely positioned and stacked at inset:0. Animation visibility cycle is 16s with each still holding for ~4s before fading. Delays stagger each still by 4s so the cycle reads as a slow rotation. Math: 0%–18.75% = visible (≈3s of a 16s loop) 25%–100% = hidden (rest of the loop) Stagger: still 1: delay 0s still 2: delay 4s still 3: delay 8s still 4: delay 12s Reduced motion: animation disabled; still #1 locked to opacity 1. No flash, no JS, no layout shift. Asset fallback: until Agent E generates the 4 stills, the background-image will 404 and the still falls back to var(--off-black) — the panel still reads as a brand-toned rectangle, not a broken-image icon. ---------------------------------------------------------- */ .hero__bg { grid-area: bg; position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; margin: 0; background: var(--off-black); border: 1px solid rgba(211, 254, 76, 0.15); /* faint lime hairline (continuity w/ b-roll v2.6) */ isolation: isolate; } .hero__bg-still { position: absolute; inset: 0; background-color: var(--off-black); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; /* FW2 fix #1+#2 (CDO M1): 24s loop (was 16s) — 6s active per still (was 4s). Gives smoother holds, less rushed crossfade. Ken Burns scale layered into the keyframe so each still also breathes 1.0→1.04 across its active window — imperceptible as motion but adds atmospheric "alive" feel (CDO M1). */ animation: hero-bg-rotate 24s infinite; will-change: opacity, transform; } /* FW2 fix #1: stagger delays bumped 4s → 6s to match the 24s loop. */ .hero__bg-still--1 { animation-delay: 0s; } .hero__bg-still--2 { animation-delay: 6s; } .hero__bg-still--3 { animation-delay: 12s; } .hero__bg-still--4 { animation-delay: 18s; } @keyframes hero-bg-rotate { /* Each still: fade in 0→6.25%, hold 6.25–18.75%, fade out 18.75–25%, hidden 25–100%. With a 6s stagger across a 24s loop this gives a continuous slow crossfade. Ken Burns layered: scale 1.0 at fade-in → 1.04 at fade-out so each still's active window has slow zoom-in motion. */ 0% { opacity: 0; transform: scale(1.0); } 6.25% { opacity: 1; } 18.75% { opacity: 1; } 25% { opacity: 0; transform: scale(1.04); } 100% { opacity: 0; transform: scale(1.04); } } /* Dark gradient mask on the right edge of the bg plate, so a manifesto block that spills over the right side of the plate on tablet/desktop stays legible against busy stills. */ .hero__bg-mask { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, transparent 25%, transparent 60%, rgba(0, 0, 0, 0.55) 100%), linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.40) 100%); pointer-events: none; } /* AI · GENERATED micro-label · EU AI Act Art 52(3). Bottom-right of the bg plate, JBM Mono 700, 9-11px, lime accent on off-black tile. Mandatory because the stills depict crowds / persons synthetically (Category C). */ .hero__bg-ai-label { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; /* 2026-05-22 audit fix: brand spec mandates JetBrains Mono 700 for the EU AI Act Article 52(3) AI · GENERATED label. Was inheriting Inter because var(--type-mono) wasn't resolving at this scope. */ font-family: 'JetBrains Mono', ui-monospace, 'Space Mono', 'Courier New', monospace; font-weight: 700; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); background: var(--off-black); border: 1px solid rgba(211, 254, 76, 0.4); pointer-events: none; } .hero__bg-ai-label-dot { color: var(--lime); font-weight: 700; } @media (min-width: 768px) { .hero__bg-ai-label { font-size: 11px; } } /* ---------------------------------------------------------- Copy column · CENTRE v2.7 rhythm bump: container gap pushed so the stack (manifesto → explainer → badges → secondary → tick) reads as 5 deliberate beats, not 5 crammed lines. ---------------------------------------------------------- */ .hero__copy { grid-area: copy; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px); max-width: 640px; } /* v2.12.1: media-query font-size overrides removed as dead code — inline clamp at index.html:310 wins via cascade order. */ .hero__manifesto { display: flex; flex-direction: column; gap: clamp(4px, 0.6vw, 8px); font-family: var(--type-display); font-weight: 900; font-size: clamp(40px, 7.5vw, 88px); line-height: 0.92; /* BUG-030 · letter-spacing relaxed from -0.05em territory to -0.035em. Tighter tracking caused "AS" of PASSION to merge at 0-1px gap at desktop. Aligns with v2.8 inline override in index.html (F1 fixes the -0.055em inline value to -0.035em in tandem). */ letter-spacing: -0.035em; text-transform: uppercase; color: var(--white); margin: 0; /* FW2 fix #8: manifesto centred. External default lays the manifesto full-width and centre-aligned. The v2.8 inline version uses `position: absolute` with `left: clamp(24, 5vw, 64); right: clamp(24, 5vw, 64);` — FW1 owns the inline override that adds `text-align: center`. We match the alignment here so the external rule (used when inline is hoisted out) renders identically. left:0 / right:0 is a no-op on a non-absolute element but defends against future refactors that promote the manifesto back to position:absolute. */ text-align: center; left: 0; right: 0; } .hero__manifesto-line { display: inline-block; } .hero__period { color: var(--lime); margin-left: 0.04em; } /* Explainer typography lift — 22-24px white with breathing room. */ .hero__explainer { font-family: var(--type-display); font-weight: 400; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.45; letter-spacing: 0.5px; color: var(--white); margin: 0; max-width: 36ch; } /* ---------------------------------------------------------- PRIMARY CTAs · App Store + Google Play badge pair ---------------------------------------------------------- v2.7 pivot · the badges ARE the primary action. Horizontal pair with 16-20px gap, vertically centered, ~180-200px wide each. Sized to remain tappable at mobile and crisp at 4K. Hit-area minimum 44×44pt per iOS HIG / 48×48dp per Material. Margin-top adds rhythm above the badges (clamp(32px, 5vh, 72px)) — this is the largest single break in the hero stack because the badges are the primary moment. ---------------------------------------------------------- */ .hero__cta-group--primary { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; /* v2.7 rhythm: large breathing gap between explainer and primary badge pair. Overrides the .hero__copy container gap for this one transition because it carries weight. */ margin-top: clamp(8px, 2vh, 24px); } .hero__badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: transparent; /* Hit-area enforcement — badge SVG is ~60px tall; padding bumps the tap target to ≥48dp. */ padding: 4px; text-decoration: none; transition: transform 0.15s ease, opacity 0.15s ease; /* Hairline lime focus ring (not visible until :focus-visible). */ outline: none; } .hero__badge-img { display: block; width: clamp(160px, 18vw, 200px); height: auto; /* Preserve the badge's intrinsic 3:1 ratio (180×60). aspect-ratio is set as a fallback in case the SVG inline width/height attrs get stripped by an optimiser. */ aspect-ratio: 3 / 1; } .hero__badge:hover, .hero__badge:focus-visible { transform: translateY(-1px); } .hero__badge:active { transform: translateY(1px); } .hero__badge:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; } /* ---------------------------------------------------------- SECONDARY · "OR TEST YOURSELF FIRST →" text link ---------------------------------------------------------- Demoted from giant button styling — now a single tick-link. ~14-16px Inter 700, mute color, lime period and arrow accent. Sits below the badge pair with a clear gap so it reads as secondary, not as a peer of the primary action. ---------------------------------------------------------- */ .hero__secondary { margin: 0; /* Rhythm: clamp(20px, 3vh, 40px) gap above; .hero__copy container gap already handles the lower edge. The margin-top here is conservative to avoid double-stacking against the .hero__cta-group--primary margin-top above. */ margin-top: clamp(4px, 1vh, 16px); font-family: var(--type-display); } .hero__secondary-link { display: inline-flex; align-items: center; /* M9 (2026-05-25 audit) — was `gap: 8px`, which inserted 8px between EVERY flex child, including between "OR TEST YOURSELF FIRST" and its lime period → the dot floated detached ("FIRST . →"). Zero the flex gap so the period welds to the word like the manifesto periods; the arrow keeps its own breathing room via its margin-left below. */ gap: 0; /* H6 (2026-05-25 audit) — tap target was ~31px tall (min-height:0) at desktop/tablet; the 44px floor only existed in the ≤900px inline block. Promote min-height + small inline padding to the base rule so the touch target is ≥44px at every width without moving the visible text much. */ min-height: 44px; padding: 8px 6px; font-weight: 700; font-size: 14px; line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--mute); white-space: nowrap; transition: color 0.15s ease, transform 0.15s ease; } .hero__secondary-link:hover { color: var(--white); } .hero__secondary-link:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; color: var(--white); } .hero__secondary-text { display: inline-block; } .hero__secondary-period { color: var(--lime); font-weight: 900; } .hero__secondary-arrow { display: inline-block; color: var(--lime); font-weight: 700; margin-left: 2px; transition: transform 0.15s ease; } .hero__secondary-link:hover .hero__secondary-arrow { transform: translateX(3px); } /* ---------------------------------------------------------- (member-counting subsystem removed — SW v2.10.0) Previously the hero carried a small live-count tick, a right- side count rail with recent-entries list, and a logged-in member badge, plus the matching hero[data-state] selectors. All gone with the subsystem. ---------------------------------------------------------- */ /* ---------------------------------------------------------- Focus styles · WCAG AA safety net ---------------------------------------------------------- */ .hero a:focus-visible, .hero button:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; } .hero a:focus:not(:focus-visible), .hero button:focus:not(:focus-visible) { outline: none; } /* ---------------------------------------------------------- Tablet small · ≥640w · type-scale bump only ---------------------------------------------------------- */ @media (min-width: 640px) { /* v2.12.1 (E9): .hero__manifesto font-size override removed as dead code — inline clamp at index.html:310 wins via cascade order. */ .hero__secondary-link { font-size: 15px; } } /* ---------------------------------------------------------- TABLET · 768-959w · two-column treatment ---------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 959px) { .hero { min-height: clamp(720px, 95vh, 1024px); padding: clamp(56px, 6vw, 80px) clamp(32px, 4vw, 56px); } .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "copy bg"; gap: clamp(28px, 3vw, 40px); align-items: center; } /* v2.12.1 (E9): .hero__manifesto font-size override removed as dead code — inline clamp at index.html:310 wins via cascade order. */ .hero__bg { /* Tablet portrait — plate sits next to copy at 4:5 instead of 16:10 to fit the side-by-side composition. */ aspect-ratio: 4 / 5; max-height: 70vh; } .hero__copy { max-width: none; } .hero__secondary-link { font-size: 16px; } } /* ---------------------------------------------------------- Desktop · 960-1279w · two-column (bg left, copy right) ---------------------------------------------------------- v2.7: removed the max-height:100vh cap that v2.6 used. The pivot adds two new stacked rows (badges + secondary link) on top of manifesto + explainer + tick — capping at 100vh would force a cramped layout on 720p laptops. We let the section grow as tall as it needs, with the new --hero-pad-y ceiling (120px) controlling the upper bound. ---------------------------------------------------------- */ @media (min-width: 960px) { .hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; } .hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr); grid-template-areas: "bg copy"; gap: clamp(32px, 4vw, 64px); width: 100%; } .hero__bg { aspect-ratio: 9 / 13; max-height: 78vh; } .hero__copy { max-width: none; } .hero__cta-group--primary { gap: 20px; } .hero__badge-img { width: clamp(180px, 14vw, 200px); } } /* ---------------------------------------------------------- Wide desktop · ≥1280w · manifesto bump (rail removed with founding-counting subsystem) ---------------------------------------------------------- */ @media (min-width: 1280px) { .hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); grid-template-areas: "bg copy"; } /* v2.12.1 (E9): .hero__manifesto font-size override removed as dead code — inline clamp at index.html:310 wins via cascade order. */ .hero__cta-group--primary { display: flex; } .hero__secondary { display: block; } } /* ---------------------------------------------------------- Extra-large desktop · ≥1440w · type bump ---------------------------------------------------------- v2.12.1 (E9): the @media (min-width: 1440px) wrapper only contained a .hero__manifesto font-size override — removed as dead code since inline clamp at index.html:310 wins via cascade order at every breakpoint. Whole block deleted to avoid an empty media-query stub. */ /* ---------------------------------------------------------- Reduced motion ---------------------------------------------------------- Kill the bg-rotate animation entirely and lock to still #1. Other transition durations collapse to 0.01ms (effectively instant) but layout / visibility / transforms remain intact. ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .hero__bg-still { animation: none !important; } .hero__bg-still--1 { opacity: 1 !important; } .hero__bg-still--2, .hero__bg-still--3, .hero__bg-still--4 { opacity: 0 !important; } .hero__badge, .hero__secondary-link, .hero__secondary-arrow, .hero a, .hero button { transition: none !important; } .hero *, .hero *::before, .hero *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ---------------------------------------------------------- Print ---------------------------------------------------------- */ @media print { .hero__bg, .hero__cta-group--primary, .hero__secondary { display: none; } .hero::before { display: none; } .hero { color: #000; background: #fff; } .hero__period { color: #000; } } /* ============================================================ v2.8 BROADCAST · F2-owned refinements (2026-05-14) ------------------------------------------------------------ These rules patch the v2.8 hero-chyron + secondary-link styles that are otherwise defined inline in index.html. They live here as a safety net so the rules survive even if F1 later extracts inline blocks. Reduced-motion + forced-colors blocks below extend the existing fallbacks at the top of this file. ============================================================ */ /* BUG-052 · LIVE dot diameter bump at desktop. Inline default of 7×7 reads as a static comma at 1440w against the chyron's broadcast typography. Bump to 10×10 at desktop so the pulse animation registers as a heartbeat, not noise. Mobile inline rule already trims to 7px via media query. */ @media (min-width: 768px) { .hero-chyron__live-dot { width: 10px; height: 10px; } } /* BUG-035 · Belt-and-braces LIVE-dot pulse opacity fallback. The inline rule uses box-shadow only; on devices that throttle box-shadow animation (older Android Chrome, mid-tier eInk screens), the dot reads as static. Layer an opacity pulse on top so the heartbeat survives without the glow. */ @keyframes v28-hero-live-pulse-opacity { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .hero-chyron__live-dot { animation: v28-live-pulse 1.6s ease-out infinite, v28-hero-live-pulse-opacity 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .hero-chyron__live-dot { animation: none !important; opacity: 1 !important; } } /* BUG-048 · Secondary link reads as interactive, not body copy. The "OR TEST YOURSELF FIRST. →" tick is the demoted-to-text entry into the quiz. Without an underline cue, screenreaders treat it as a link but sighted users miss the affordance. Underline at low opacity at rest, full lime on hover/focus. */ .hero__secondary-link { border-bottom: 1px solid rgba(211, 254, 76, 0.4); padding-bottom: 4px; } @media (hover: hover) and (pointer: fine) { .hero__secondary-link:hover { border-bottom-color: var(--lime); } } .hero__secondary-link:focus-visible { /* 3px lime outline at 3px offset — brand focus-ring spec. Overrides the 2px @4px outline defined earlier in this file. */ outline: 3px solid var(--lime); outline-offset: 3px; border-bottom-color: var(--lime); } /* Forced-colors safety for the secondary link underline — without this the bottom-border reads as the same colour as system text and stops carrying affordance. */ @media (forced-colors: active) { .hero__secondary-link { border-bottom-color: LinkText; } .hero__secondary-link:focus-visible { outline-color: Highlight; border-bottom-color: Highlight; } } /* BUG-002 follow-through · `.hero-chyron__badge` is an anchor. The global `a { color: inherit }` in tokens.css already kills the rgb(0,0,238) default, but we explicitly set color on the badge so a future global override (e.g. `:root a { color: ... }`) can't accidentally re-blue the badge. */ .hero-chyron__badge { color: inherit; } .hero-chyron__badge:focus-visible { /* Brand focus-ring spec — 3px lime, 3px offset. Inline rule already sets these; we re-state for cascade safety if F1 moves the inline block to an external file. */ outline: 3px solid var(--lime); outline-offset: 3px; } /* ============================================================ FW2 fix #4 (CDO D2) — Remove hero brightness double-darkness ------------------------------------------------------------ The inline rule in index.html sets: .hero__bg-still { filter: brightness(0.55) contrast(1.15) saturate(0.92); } The brightness(0.55) compounds with .hero__bg-mask vignette gradient already darkening the plate — text legibility doesn't need both. Strip brightness, keep the contrast + saturate grade. Specificity compound (.hero .hero__bg-still = 0,2,0) wins over the inline single-class selector (0,1,0). Cascade order is irrelevant once specificity differs. */ .hero .hero__bg-still { filter: contrast(1.15) saturate(0.92); } @media (forced-colors: active) { /* High-contrast mode — strip the grade entirely so system colours read true. */ .hero .hero__bg-still { filter: none; } } /* ============================================================ A11Y P2-3 — Hero text-band scrim reinforcement ------------------------------------------------------------ The white manifesto is `position:absolute; top:44%` (index.html), overlaid directly on the full-bleed stadium stills. With the brightness(0.55) stripped above, the stills render bright, and the inline `.hero__bg-mask` is WEAKEST exactly where the manifesto sits: its radial centre is transparent and its linear gradient is clear through the 22–58% band (the 44% manifesto row). Over the brightest stadium still, white text there can fall under 4.5:1. Fix: re-declare the mask `background` (shorthand replaces, can't be additive) — reproduce the inline radial + linear layers AND add a horizontal mid-band darkening layer (~30–62%) centred on the manifesto so its text keeps ≥4.5:1 without crushing the top/bottom of the plate. Compound specificity (.hero .hero__bg-mask = 0,2,0) wins over the inline single-class rule (0,1,0) regardless of source order — same technique the brightness override above relies on. */ .hero .hero__bg-mask { background: /* mid-band scrim — strengthens the manifesto row (P2-3) */ linear-gradient(180deg, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.45) 44%, rgba(0, 0, 0, 0) 64%), /* original inline radial vignette */ radial-gradient(120% 80% at 50% 45%, transparent 35%, rgba(0, 0, 0, 0.55) 100%), /* original inline top/bottom linear */ linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.0) 22%, rgba(0, 0, 0, 0.0) 58%, rgba(0, 0, 0, 0.75) 100%); } @media (forced-colors: active) { /* High-contrast mode governs its own palette — drop the scrim. */ .hero .hero__bg-mask { background: none; } } /* ============================================================ FW2 fix #3 (CDO M2) — Period pulse slowdown ------------------------------------------------------------ Inline `.hero__period` (index.html line 313) declares: animation: v28-period-pulse 800ms ease-in-out infinite alternate; At 800ms the pulse reads as a nervous tic, not a broadcast LIVE indicator. Bump to 2400ms with a smoother cubic-bezier so it reads as a heartbeat at broadcast pace. Applies to all 3 lime periods on the manifesto (line1, line2, line3 already share the .hero__period class; staggered delays at 240ms / 480ms preserved by the inline `:nth-child` rules). Specificity compound (.hero .hero__period = 0,2,0) wins over inline (0,1,0). */ .hero .hero__period { animation: v28-period-pulse 2400ms cubic-bezier(0.4, 0, 0.2, 1) infinite alternate; } /* Inline staggered delays at line2 (240ms) + line3 (480ms) read fine at the 800ms tempo, but at the new 2400ms tempo they barely register as a stagger. Bump proportionally so each period leads the next by ~30% of the new cycle (was ~30% of the old cycle). 720ms + 1440ms. */ .hero .hero__manifesto-line:nth-child(2) .hero__period { animation-delay: 720ms; } .hero .hero__manifesto-line:nth-child(3) .hero__period { animation-delay: 1440ms; } @media (prefers-reduced-motion: reduce) { .hero .hero__period { animation: none !important; opacity: 1 !important; } } /* ============================================================ FW2 fix #8 (CDO) — Hero manifesto centred (override) ------------------------------------------------------------ v2.12.1 (E9): both FW2 `.hero .hero__manifesto { text-align: center }` rules (base + @media max-width:900px mirror) removed as duplicate declarations. The base declaration at hero.css:268 (`.hero__manifesto { text-align: center }`) plus the inline rule at index.html stay; that's the canonical pair — cascade resolves correctly without the compound `.hero .hero__manifesto` override or the mobile mirror. */