/* Vennus Digital — Report Styles Brand v1.4.4 — Beige mode is the default (docs/redesign-2026-07-spec.md §2 and §7). Dark mode is an opt-in toggle, not a B2B/B2C route branch — [data-theme="dark"] on (declared in audit.css, which this stylesheet is always loaded alongside) re-declares --cream*/--charcoal* to their charcoal-mode values, so every rule below that uses var(--cream)/var(--charcoal) flips automatically regardless of route. Operator blue (var(--accent), also declared in audit.css) is the sole accent and does not change between light/dark. The `report-b2b` class the model still emits on the B2B article wrapper (data/prompt-b2b.txt) carries no styling here anymore — B2C and B2B reports render identically aside from content. Kept as an inert content marker rather than stripped from the prompt, since removing it there isn't a Step 1 concern. */ /* ─── REPORT BREAKOUT — the form's #app container constrains to 880px; when a .screen-report is present, the report breaks out to full width. ─── */ #app:has(.screen-report) { max-width: 100%; } .screen-report { max-width: 100% !important; width: 100%; padding: 0 !important; margin: 0 !important; flex: 1; display: block; } #progress-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent)); z-index: 100; transition: width 0.1s ease-out; } /* ═══════════════════════════════════════════════════════════════ REPORT FRAME ═══════════════════════════════════════════════════════════════ */ .report { display: block; position: relative; z-index: 2; } /* ═══════════════════════════════════════════════════════════════ SECTION RHYTHM — full-screen bookends, natural flow for Path ═══════════════════════════════════════════════════════════════ */ .report-section { padding: clamp(48px, 8vh, 96px) clamp(24px, 5vw, 64px); position: relative; } /* Full-screen sections — cover, mirror, bigger picture */ .section-cover, .report-mirror, .report-bigger-picture { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } /* Path section flows naturally because it's long */ .report-path { padding-top: clamp(80px, 14vh, 160px); padding-bottom: clamp(64px, 10vh, 120px); } /* ═══════════════════════════════════════════════════════════════ SCROLL-REVEAL ANIMATION ═══════════════════════════════════════════════════════════════ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } /* Stagger-fade for elements within Path 1 */ .reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); } /* All children become visible when parent has .visible — applies regardless of count */ .reveal-stagger.visible > * { opacity: 1; transform: translateY(0); } /* Specific stagger delays for the first several children to create rhythm */ .reveal-stagger.visible > *:nth-child(1) { transition-delay: 0ms; } .reveal-stagger.visible > *:nth-child(2) { transition-delay: 80ms; } .reveal-stagger.visible > *:nth-child(3) { transition-delay: 160ms; } .reveal-stagger.visible > *:nth-child(4) { transition-delay: 240ms; } .reveal-stagger.visible > *:nth-child(5) { transition-delay: 320ms; } .reveal-stagger.visible > *:nth-child(6) { transition-delay: 400ms; } .reveal-stagger.visible > *:nth-child(7) { transition-delay: 480ms; } .reveal-stagger.visible > *:nth-child(8) { transition-delay: 560ms; } .reveal-stagger.visible > *:nth-child(9) { transition-delay: 640ms; } .reveal-stagger.visible > *:nth-child(10) { transition-delay: 720ms; } /* ═══════════════════════════════════════════════════════════════ COVER SECTION ═══════════════════════════════════════════════════════════════ */ .section-cover { align-items: flex-start; position: relative; } .cover-inner { max-width: 1080px; margin: 0 auto; width: 100%; } .report-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); margin-bottom: 36px; display: inline-flex; align-items: center; gap: 16px; } .report-eyebrow::before { content: ''; display: inline-block; width: 56px; height: 1px; background: var(--accent); } .report-title { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 7vw, 96px); line-height: 1.0; letter-spacing: -0.025em; color: var(--charcoal); max-width: 22ch; margin-bottom: clamp(48px, 7vh, 80px); } .report-title em { font-style: italic; color: var(--accent); } .cover-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; padding-top: 24px; border-top: 1px solid var(--border-mid); max-width: 880px; } .cover-meta-item { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; } .cover-meta-label { color: var(--charcoal-faint); margin-bottom: 8px; } .cover-meta-value { color: var(--charcoal); font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 16px; letter-spacing: 0; text-transform: none; } /* ───── SCROLL CUE — under cover title, fades on scroll ───── */ .scroll-cue { position: absolute; bottom: clamp(40px, 6vh, 64px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--accent); opacity: 0.85; transition: opacity 0.4s ease; pointer-events: none; } .scroll-cue.faded { opacity: 0; } .scroll-cue-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; } .scroll-cue-arrow { width: 1px; height: 36px; background: linear-gradient(to bottom, var(--accent) 0%, var(--accent) 50%, transparent 100%); animation: scroll-pulse 2.4s ease-in-out infinite; } @keyframes scroll-pulse { 0%, 100% { opacity: 0.35; transform: scaleY(0.7); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); transform-origin: top; } } /* ═══════════════════════════════════════════════════════════════ SECTION HEADINGS — shared across mirror, path, bigger picture ═══════════════════════════════════════════════════════════════ */ .section-heading { font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 5.5vw, 64px); line-height: 1.05; letter-spacing: -0.025em; color: var(--charcoal); margin-bottom: clamp(40px, 6vh, 64px); } .section-heading em { font-style: italic; color: var(--accent); font-weight: 300; } .section-body { color: var(--charcoal); } .section-body p { margin-bottom: 1.4em; } .section-body em { font-style: italic; color: var(--accent); } .section-body strong { font-weight: 500; color: var(--charcoal); } /* ═══════════════════════════════════════════════════════════════ MIRROR — focused reading column, intimate ═══════════════════════════════════════════════════════════════ */ .report-mirror { align-items: center; } .mirror-inner { max-width: 760px; width: 100%; margin: 0 auto; background: var(--cream-elev); padding: clamp(40px, 6vw, 80px) clamp(32px, 5vw, 72px); border: 1px solid var(--border-mid); position: relative; } .mirror-inner::before { content: ''; position: absolute; top: -1px; left: 0; width: clamp(56px, 8vw, 96px); height: 2px; background: var(--accent); } .report-mirror .section-heading { text-align: left; font-size: clamp(26px, 3.5vw, 40px); margin-bottom: clamp(28px, 4vh, 40px); } .report-mirror .section-body p { font-family: var(--serif); font-weight: 300; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.65; margin-bottom: 1.4em; color: var(--charcoal); } .report-mirror .section-body p:last-child { margin-bottom: 0; } /* ═══════════════════════════════════════════════════════════════ PATH SECTION — wider, multi-element ═══════════════════════════════════════════════════════════════ */ .path-inner { max-width: 1280px; margin: 0 auto; } .report-path .section-heading { text-align: left; margin-bottom: clamp(32px, 5vh, 48px); } .path-intro { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(19px, 1.55vw, 24px); line-height: 1.55; color: var(--charcoal-soft); max-width: 64ch; margin: 0 0 clamp(56px, 8vh, 96px); padding-left: clamp(0px, 1vw, 16px); border-left: 1px solid var(--accent-mid); padding-left: 24px; } /* ───── PATH 1 LEAD CARD ───── */ .path-card-lead { background: var(--cream-elev); padding: clamp(40px, 5vw, 80px); margin: 0 0 clamp(80px, 10vh, 128px); border: 1px solid var(--border); border-left: 3px solid var(--accent); position: relative; } .path-card-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); margin-bottom: 24px; display: inline-flex; align-items: center; gap: 12px; } .path-heading { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.5vw, 52px); line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 16px; color: var(--charcoal); } .path-heading em { font-style: italic; color: var(--accent); font-weight: 300; } .path-headliner { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(18px, 1.55vw, 24px); line-height: 1.5; color: var(--charcoal-soft); margin: 0 0 36px; max-width: 56ch; padding-left: 24px; border-left: 2px solid var(--accent-mid); } .path-probability { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-elev); background: var(--accent); padding: 14px 22px; margin-bottom: clamp(48px, 6vh, 64px); } /* Path 1 sub-blocks */ .path-block { margin-bottom: clamp(28px, 4vh, 44px); padding-bottom: clamp(28px, 4vh, 44px); border-bottom: 1px solid var(--border-mid); } .path-block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .path-block-heading { font-family: var(--mono); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); margin: 0 0 24px; padding-bottom: 14px; border-bottom: 1px solid var(--accent-mid); display: inline-block; padding-right: 56px; font-weight: 400; } .path-block p { font-family: var(--serif); font-weight: 300; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.7; color: var(--charcoal); margin-bottom: 1.1em; max-width: 68ch; } .path-block p:last-child { margin-bottom: 0; } /* Market block paragraphs flow to full width to match the stat block visually */ .path-block-market p { max-width: none; } /* ───── STAT BLOCK ───── */ .path-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; margin: 20px 0 16px; border: 1px solid var(--border-mid); } .path-stat { padding: clamp(24px, 3vw, 36px); border-right: 1px solid var(--border-mid); background: var(--cream); } .path-stat:last-child { border-right: none; } @media (max-width: 720px) { .path-stat { border-right: none; border-bottom: 1px solid var(--border-mid); } .path-stat:last-child { border-bottom: none; } } .stat-value { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 3.5vw, 44px); line-height: 1; letter-spacing: -0.025em; color: var(--accent); margin-bottom: 10px; } .stat-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--charcoal-muted); line-height: 1.5; } /* ───── 90-DAY PATH GRID ───── */ .path-90day { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 28px 0 32px; } @media (max-width: 880px) { .path-90day { grid-template-columns: 1fr; gap: 16px; } } .path-phase { background: var(--cream); padding: clamp(24px, 2.8vw, 32px); border: 1px solid var(--border-mid); border-top: 2px solid var(--accent); } .phase-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border-mid); font-weight: 400; } .phase-actions { list-style: none; padding: 0; margin: 0; } .phase-actions li { font-family: var(--serif); font-weight: 300; font-size: 15px; line-height: 1.6; color: var(--charcoal); margin-bottom: 14px; padding-left: 22px; position: relative; } .phase-actions li:last-child { margin-bottom: 0; } .phase-actions li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 12px; height: 1px; background: var(--accent); } .path-revenue-target { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.5; color: var(--charcoal); margin-top: 28px; padding: 18px 24px; background: var(--accent-light); border-left: 2px solid var(--accent); max-width: 68ch; } /* ───── PATH 2 & 3 — SIDE BY SIDE ───── */ .path-alternatives { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 40px); margin: 0 0 clamp(48px, 7vh, 80px); } @media (max-width: 880px) { .path-alternatives { grid-template-columns: 1fr; } } .path-card-alt { background: var(--cream-elev); padding: clamp(28px, 3.5vw, 44px); border: 1px solid var(--border-mid); border-top: 2px solid var(--charcoal-muted); display: flex; flex-direction: column; } .path-card-alt .path-heading { font-size: clamp(22px, 2.2vw, 28px); margin-bottom: 14px; } .path-card-alt .path-headliner { font-size: clamp(15px, 1.25vw, 17px); margin-bottom: 28px; padding-bottom: 24px; padding-left: 18px; border-bottom: 1px solid var(--border-mid); border-left: 1px solid var(--accent-mid); max-width: 50ch; } .path-alt-block { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); } .path-alt-block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .path-alt-block-heading { font-family: var(--serif); font-weight: 400; font-size: clamp(17px, 1.55vw, 21px); line-height: 1.2; letter-spacing: -0.015em; color: var(--charcoal); margin: 0 0 14px; } .path-alt-block-heading em { font-style: italic; color: var(--accent); font-weight: 300; } .path-alt-block p { font-family: var(--serif); font-weight: 300; font-size: 15px; line-height: 1.65; color: var(--charcoal); margin: 0; max-width: 56ch; } /* ───── PATH RECOMMENDATION CALLOUT ───── */ .path-recommendation { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(18px, 1.55vw, 23px); line-height: 1.55; color: var(--cream-elev); margin: 0; padding: clamp(36px, 4.5vw, 56px) clamp(40px, 5vw, 72px); padding-left: clamp(80px, 8vw, 110px); background: var(--accent); max-width: 1280px; position: relative; } .path-recommendation::before { content: '→'; font-style: normal; font-family: var(--serif); font-size: 32px; line-height: 1; color: var(--cream-elev); position: absolute; top: clamp(36px, 4.5vw, 56px); left: clamp(40px, 5vw, 72px); opacity: 0.6; } /* ───── SECTION CTA — end-of-section report button, Step 5. Model-authored (see prompt-b2c.txt / prompt-b2b.txt "End-of-section CTAs"), one per Path 1/2/3, Fleet (B2B), and Bigger Picture. Text colour is a literal hex, not var(--cream-elev)/var(--cream), because those tokens flip with the light/dark toggle and would go dark-on-blue in dark mode — this button is always operator-blue-filled regardless of theme. ───── */ .report-section-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(28px, 3.5vw, 40px); padding: 14px 28px; background: var(--accent); color: #f4ede1; font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: 0.02em; text-decoration: none; border-radius: 2px; transition: background 0.2s ease; } .report-section-cta:hover { background: var(--accent-deep); } /* ═══════════════════════════════════════════════════════════════ BIGGER PICTURE — quiet exhale, centred ═══════════════════════════════════════════════════════════════ */ .report-bigger-picture { align-items: center; position: relative; } .bigger-picture-inner { max-width: 720px; width: 100%; margin: 0 auto; padding-top: clamp(48px, 6vh, 80px); position: relative; } .bigger-picture-inner::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 64px; height: 1px; background: var(--accent); } .report-bigger-picture .section-heading { text-align: center; font-weight: 300; margin-bottom: clamp(48px, 7vh, 72px); } .report-bigger-picture .section-body { font-family: var(--serif); font-weight: 300; font-size: clamp(18px, 1.55vw, 23px); line-height: 1.65; color: var(--charcoal-soft); } .report-bigger-picture .section-body p { margin-bottom: 1.6em; } .report-bigger-picture .section-body p:last-child { font-style: italic; font-size: 1.1em; color: var(--charcoal); text-align: left; margin-top: 2em; padding-top: 1.6em; border-top: 1px solid var(--border-mid); } /* ═══════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════════ */ .report-footer { padding: clamp(64px, 8vh, 96px) clamp(24px, 5vw, 64px) clamp(56px, 7vh, 80px); border-top: 1px solid var(--border-mid); background: var(--cream-elev); } .footer-inner { max-width: 1280px; margin: 0 auto; display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-start; align-items: center; } .footer-mark { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 14px; color: var(--charcoal-muted); margin-right: auto; } .btn-secondary { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; padding: 14px 22px; background: transparent; color: var(--charcoal); border: 1px solid var(--border-strong); cursor: pointer; transition: all 0.2s ease; text-transform: uppercase; } .btn-secondary:hover { border-color: var(--charcoal); background: var(--cream); } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { .path-card-lead { padding: 28px 24px; } .path-recommendation { padding: 28px 24px; padding-left: 60px; } .path-recommendation::before { left: 24px; top: 28px; font-size: 24px; } } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ===================================================================== The Fleet — Section 3 of the B2B Direction Audit report --------------------------------------------------------------------- Renders inside
on the B2B report page. Charcoal mode is the only supported context for this section (B2C reports do not include a Fleet section). Depends on the locked brand tokens from Visual Identity v1.4. If those tokens are already declared at :root or [data-mode="charcoal"], the hardcoded fallback values below can be removed in favour of the var() references. ===================================================================== */ /* --- Locked tokens for the Fleet section (charcoal mode) --- */ /* If your global token system already exports these, ignore this block. */ .report-fleet { --fleet-bg: #0d0f13; --fleet-card-bg: #14171d; --fleet-card-bg-hover: #181c23; --fleet-text: #e8eaf0; --fleet-text-muted: rgba(232, 234, 240, 0.72); --fleet-text-faint: rgba(232, 234, 240, 0.40); --fleet-accent: #4b9ee8; --fleet-accent-strong: rgba(75, 158, 232, 0.85); --fleet-accent-mid: rgba(75, 158, 232, 0.38); --fleet-accent-soft: rgba(75, 158, 232, 0.22); --fleet-border-muted: rgba(232, 234, 240, 0.10); --fleet-border-muted-hover: rgba(232, 234, 240, 0.28); --fleet-bg-hover-muted: rgba(232, 234, 240, 0.025); --fleet-ease: cubic-bezier(0.65, 0, 0.35, 1); } /* --- Section container --- */ /* Bottom padding intentionally smaller than top — the outro CTA section follows directly after, and the previous 96–160px symmetric padding made the gap between The Fleet and the VSL placeholder excessive. Tight bottom + the CTA's own top padding still gives enough breathing room. */ .report-fleet { background: var(--fleet-bg); color: var(--fleet-text); padding: clamp(96px, 12vw, 160px) clamp(20px, 4vw, 40px) clamp(32px, 4vw, 48px); position: relative; } /* Single-column layout matching .path-inner above. The previous 1fr/4fr grid (with all children getting grid-column: 2) pushed every piece of Fleet content into the right 80% of the container, which misaligned The Fleet visually with the Path section above it. The leftover grid-column: 2 declarations on individual children remain harmless on a non-grid parent (CSS ignores grid-* on non-grid ancestors) — no per-rule cleanup needed. */ .report-fleet .fleet-inner { max-width: 1280px; margin: 0 auto; } /* --- Section heading --- */ .report-fleet .section-heading { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(40px, 4.5vw, 64px); line-height: 1; letter-spacing: -0.015em; color: var(--fleet-text); margin: 0 0 40px; grid-column: 2; } .report-fleet .section-heading em { font-style: italic; color: var(--fleet-accent); font-weight: 300; } /* --- Intro paragraph --- */ .report-fleet .fleet-intro { font-family: 'Syne', sans-serif; font-size: 18px; line-height: 1.55; color: rgba(232, 234, 240, 0.78); max-width: 640px; margin: 0 0 56px; grid-column: 2; } /* --- Hairline divider between intro and grid --- */ .report-fleet .fleet-hairline { height: 1px; background: rgba(75, 158, 232, 0.28); margin: 0 0 48px; grid-column: 2; } /* --- "Start here" and "The whole fleet" labels --- */ .report-fleet .fleet-toprow-label, .report-fleet .fleet-also-label { font-family: 'Syne Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; margin: 0 0 20px; grid-column: 2; } .report-fleet .fleet-toprow-label { color: rgba(232, 234, 240, 0.55); } .report-fleet .fleet-also-label { color: var(--fleet-text-faint); } /* --- Top row: three pulsing cards in a 3-column grid --- */ .report-fleet .fleet-toprow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 56px; grid-column: 2; } /* --- Top card: pulsing operator-blue border, brighter background --- */ .report-fleet .fleet-card-top { position: relative; background: var(--fleet-card-bg); border: 1px solid var(--fleet-accent-mid); border-radius: 2px; padding: 24px 22px 22px; animation: fleetPulse 2.2s ease-in-out infinite; transition: transform 320ms var(--fleet-ease), background-color 320ms var(--fleet-ease); cursor: default; } /* Stagger the pulse across the three top cards so they breathe in sequence */ .report-fleet .fleet-card-top:nth-child(1) { animation-delay: 0s; } .report-fleet .fleet-card-top:nth-child(2) { animation-delay: 0.28s; } .report-fleet .fleet-card-top:nth-child(3) { animation-delay: 0.56s; } .report-fleet .fleet-card-top:hover { animation-play-state: paused; border-color: var(--fleet-accent-strong); background: var(--fleet-card-bg-hover); transform: translateY(-2px); box-shadow: 0 0 36px 4px rgba(75, 158, 232, 0.32); } /* --- The classification tag above each top card (e.g. "Hours returned") --- */ .report-fleet .fleet-card-tag { font-family: 'Syne Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fleet-accent); margin: 0 0 14px; } /* --- Pillar tag (OPS / SALES / MARKETING) on every card --- */ .report-fleet .fleet-pillar { font-family: 'Syne Mono', monospace; font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--fleet-text-faint); margin: 0 0 12px; } /* --- Agent name (Fraunces) --- */ .report-fleet .fleet-card-name { font-family: 'Fraunces', serif; font-weight: 300; font-size: 23px; line-height: 1.15; color: var(--fleet-text); margin: 0 0 12px; letter-spacing: -0.01em; } /* Smaller name size on supporting cards */ .report-fleet .fleet-card-also .fleet-card-name { font-size: 18px; margin-bottom: 8px; } /* --- Mission text --- */ .report-fleet .fleet-mission { font-family: 'Syne', sans-serif; font-size: 14px; line-height: 1.55; color: var(--fleet-text-muted); margin: 0; } /* Smaller mission text on supporting cards */ .report-fleet .fleet-card-also .fleet-mission { font-size: 13px; } /* --- Supporting grid: six cards in a 3-column grid (2 rows) --- */ .report-fleet .fleet-also-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; grid-column: 2; } /* --- Supporting card: muted off-white border, no pulse --- */ .report-fleet .fleet-card-also { background: transparent; border: 1px solid var(--fleet-border-muted); border-radius: 2px; padding: 20px 22px; transition: border-color 280ms var(--fleet-ease), background-color 280ms var(--fleet-ease), transform 280ms var(--fleet-ease); cursor: default; } .report-fleet .fleet-card-also:hover { border-color: var(--fleet-border-muted-hover); background: var(--fleet-bg-hover-muted); transform: translateY(-2px); } /* --- Close line (italicised Fraunces sentence below the supporting grid) --- */ .report-fleet .fleet-close { font-family: 'Fraunces', serif; font-weight: 300; font-size: 19px; line-height: 1.5; color: rgba(232, 234, 240, 0.85); max-width: 700px; margin: 56px 0 0; font-style: italic; grid-column: 2; } .report-fleet .fleet-close em { font-style: italic; color: var(--fleet-accent); } /* ===================================================================== Pulse animation ===================================================================== */ @keyframes fleetPulse { 0%, 100% { border-color: var(--fleet-accent-mid); box-shadow: 0 0 0 0 rgba(75, 158, 232, 0); } 50% { border-color: var(--fleet-accent-strong); box-shadow: 0 0 28px 2px var(--fleet-accent-soft); } } /* ===================================================================== Accessibility — prefers-reduced-motion Users who opt out of motion get a static brighter border on the top three cards and no movement or hover transforms anywhere. ===================================================================== */ @media (prefers-reduced-motion: reduce) { .report-fleet .fleet-card-top { animation: none; border-color: rgba(75, 158, 232, 0.65); transition: none; } .report-fleet .fleet-card-top:hover { transform: none; box-shadow: none; } .report-fleet .fleet-card-also { transition: none; } .report-fleet .fleet-card-also:hover { transform: none; } } /* ===================================================================== Responsive: tablet (single inner column, content stacks) ===================================================================== */ @media (max-width: 1100px) { .report-fleet .fleet-also-grid { grid-template-columns: repeat(2, 1fr); } } /* ===================================================================== Responsive: mobile (single-column for all grids, marker collapses above content) ===================================================================== */ @media (max-width: 768px) { .report-fleet { padding: 64px 24px 80px; } .report-fleet .fleet-inner { grid-template-columns: 1fr; gap: 24px; } .report-fleet .section-heading, .report-fleet .fleet-intro, .report-fleet .fleet-hairline, .report-fleet .fleet-toprow-label, .report-fleet .fleet-toprow, .report-fleet .fleet-also-label, .report-fleet .fleet-also-grid, .report-fleet .fleet-close { grid-column: 1; } .report-fleet .section-heading { font-size: 40px; } .report-fleet .fleet-toprow { grid-template-columns: 1fr; } .report-fleet .fleet-also-grid { grid-template-columns: 1fr; } /* Reduce vertical movement on mobile hover */ .report-fleet .fleet-card-top:hover, .report-fleet .fleet-card-also:hover { transform: none; } }