/* ========================================================================== 3 Lions — 4-Archetype Hero System (assets/css/hero.css) Styles partials/hero-{home,section,detail,utility}.html. Loaded LAST in so it wins the cascade for reveal + hero rules. Depends on assets/css/tokens.css. ========================================================================== */ /* -------------------------------------------------------------------------- 1. No-JS-safe reveal. Content is visible by DEFAULT; the hidden/animated state only applies under html.js (set by an inline script). Without JS — or before the script runs — everything renders at full opacity. These rules load after css/components.css and css/pages/home.css and so override their `.reveal{opacity:0}` base. -------------------------------------------------------------------------- */ .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; } html.js .reveal { opacity: 0; transform: translateY(30px); } html.js .reveal-left { opacity: 0; transform: translateX(-40px); } html.js .reveal-right { opacity: 0; transform: translateX(40px); } html.js .reveal-scale { opacity: 0; transform: scale(0.92); } html.js .reveal, html.js .reveal-left, html.js .reveal-right, html.js .reveal-scale { transition: opacity var(--duration-reveal, 600ms) var(--ease-out, ease), transform var(--duration-reveal, 600ms) var(--ease-out, ease); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } html.js .reveal.active, html.js .reveal-left.active, html.js .reveal-right.active, html.js .reveal-scale.active { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- 2. Hero shell + atmosphere (gradient-mesh + grain — never a flat fill) -------------------------------------------------------------------------- */ .hero { position: relative; isolation: isolate; overflow: hidden; color: var(--color-white); background-color: var(--navy); background-image: var(--hero-mesh); background-repeat: no-repeat; background-size: cover; padding-block: clamp(var(--sp-8), 6vw, var(--sp-12)); padding-inline: var(--gutter, 2rem); } /* grain overlay */ .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--hero-grain); background-size: 160px 160px; opacity: var(--hero-grain-opacity); pointer-events: none; mix-blend-mode: overlay; } /* soft bottom scrim keeps text contrast high over lighter mesh nodes */ .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 8, 42, 0) 40%, rgba(0, 8, 42, 0.55) 100%); pointer-events: none; } .hero__inner { position: relative; width: 100%; max-width: var(--content-width, 1200px); margin-inline: auto; display: flex; flex-direction: column; gap: var(--sp-3); } /* -------------------------------------------------------------------------- 3. Hero typography -------------------------------------------------------------------------- */ .hero__eyebrow { margin: 0; font-family: var(--font-body); font-size: var(--ts-eyebrow); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red-400); } .hero__title { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; font-size: var(--ts-h1); text-wrap: balance; color: var(--color-white); } .hero__subtitle { margin: 0; max-width: 60ch; font-family: var(--font-body); font-size: var(--ts-lead); line-height: 1.55; color: var(--color-white-90); } .hero__crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: var(--ts-eyebrow); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-white-80); } .hero__crumb a { color: rgba(255, 255, 255, 0.62); text-decoration: none; transition: color var(--duration-fast, 150ms) var(--ease-out, ease); } .hero__crumb a:hover, .hero__crumb a:focus-visible { color: var(--color-white); } .hero__crumb-sep { color: rgba(255, 255, 255, 0.32); } .hero__crumb-current { color: var(--color-white); font-weight: 600; } /* SERVICE HUB pill — red-tinted, matches the cd-hero label treatment */ .hero__pill { display: inline-flex; align-items: center; align-self: flex-start; gap: 0.5rem; margin: 0; padding: 0.35rem 1rem; background: rgba(207, 8, 31, 0.15); border: 1px solid rgba(207, 8, 31, 0.35); border-radius: 999px; font-family: var(--font-body); font-size: var(--ts-eyebrow); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #e8293e; } .hero__pill svg { width: 15px; height: 15px; } /* Inline hero stats row */ .hero__stats { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 2.75rem); margin: 0.25rem 0 0; padding: 0; } .hero__stat { display: flex; flex-direction: column; gap: 0.15rem; } .hero__stat-num { margin: 0; font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--color-white); } .hero__stat-label { margin: 0; font-size: var(--ts-eyebrow); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); } /* -------------------------------------------------------------------------- 4. Hero buttons (BEM — partials use .btn--primary / .btn--ghost) Scoped to .hero so global .btn-* rules are untouched. -------------------------------------------------------------------------- */ .hero .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--sp-3); border-radius: var(--radius-md, 8px); font-family: var(--font-body); font-size: var(--fs-button, 0.9375rem); font-weight: 700; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: transform var(--duration-fast, 150ms) var(--ease-out, ease), background-color var(--duration-fast, 150ms) var(--ease-out, ease), border-color var(--duration-fast, 150ms) var(--ease-out, ease), color var(--duration-fast, 150ms) var(--ease-out, ease); } .hero .btn--primary { background-color: var(--red); color: var(--color-white); border-color: var(--red); } .hero .btn--primary:hover { background-color: var(--red-600); border-color: var(--red-600); transform: translateY(-2px); } .hero .btn--ghost { background-color: transparent; color: var(--color-white); border-color: var(--color-white-50); } .hero .btn--ghost:hover { background-color: var(--color-white-12); border-color: var(--color-white); transform: translateY(-2px); } .hero .btn:focus-visible { outline: 3px solid var(--color-white); outline-offset: 2px; } /* -------------------------------------------------------------------------- 5. Archetype layout variations -------------------------------------------------------------------------- */ /* Home — large, centered, display scale */ .hero--home { text-align: center; padding-block: clamp(var(--sp-10), 9vw, calc(var(--sp-12) * 1.4)); } .hero--home .hero__inner { align-items: center; max-width: 56rem; } .hero--home .hero__title { font-size: var(--ts-display); } .hero--home .hero__subtitle { margin-inline: auto; } .hero--home .hero__actions { justify-content: center; } /* Section — category index, breadcrumb + lead */ .hero--section .hero__inner { max-width: 52rem; } /* Detail — leaf service, eyebrow + dual CTA */ .hero--detail .hero__inner { max-width: 54rem; } /* Utility — compact, breadcrumb + title */ .hero--utility { padding-block: clamp(var(--sp-6), 5vw, var(--sp-10)); } .hero--utility .hero__inner { max-width: 50rem; gap: var(--sp-2); } .hero--utility .hero__title { font-size: var(--ts-h2); } /* -------------------------------------------------------------------------- 5b. Curated photo backgrounds (assets/images/services/*). The photo is the BOTTOM layer; a near-opaque navy overlay sits above it and the translucent brand-accent radials sit on top, so white hero text keeps ≥4.5:1 contrast no matter the photo's local luminance. Pages opt in by setting --hero-photo (home via .hero--home; service hubs via body[data-hero]). Without image-set support the photo simply drops out and the overlay remains. -------------------------------------------------------------------------- */ .hero--home, body[data-hero] .hero--section { background-image: radial-gradient(120% 120% at 12% 8%, rgba(43, 79, 162, 0.50) 0%, rgba(1, 33, 105, 0) 42%), radial-gradient(120% 120% at 88% 0%, rgba(207, 8, 31, 0.26) 0%, rgba(1, 33, 105, 0) 38%), linear-gradient(180deg, rgba(0, 18, 63, 0.86) 0%, rgba(0, 8, 42, 0.92) 100%), var(--hero-photo, none); background-position: center; background-size: cover; } /* Home hero: gradient + glow only. The hero-homepage Canva poster bled placeholder text/logos through the overlay; removed 2026-05-30. Constellation hero unaffected. */ .hero--home { --hero-photo: none; } /* Service-hub heroes: gradient + brand glow only. The Canva poster backgrounds (hub-*.png — unedited templates with placeholder "reallygreatsite.com / 123 Anywhere St / March 22 2026" text) were removed 2026-05-30. */ body[data-hero] .hero--section { --hero-photo: none; } /* -------------------------------------------------------------------------- 6. One staggered load-reveal (JS only). Home reuses the .reveal pipeline (handled above) with a per-child stagger; the other archetypes — whose partials carry no .reveal class — animate their direct children on load. -------------------------------------------------------------------------- */ @keyframes heroRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } html.js .hero--home .reveal:nth-child(1) { --reveal-delay: 0ms; } html.js .hero--home .reveal:nth-child(2) { --reveal-delay: calc(var(--hero-stagger) * 1); } html.js .hero--home .reveal:nth-child(3) { --reveal-delay: calc(var(--hero-stagger) * 2); } html.js .hero--home .reveal:nth-child(4) { --reveal-delay: calc(var(--hero-stagger) * 3); } html.js .hero--section .hero__inner > *, html.js .hero--detail .hero__inner > *, html.js .hero--utility .hero__inner > * { animation: heroRise var(--hero-reveal-duration) var(--hero-reveal-ease) both; } html.js .hero--section .hero__inner > *:nth-child(1), html.js .hero--detail .hero__inner > *:nth-child(1), html.js .hero--utility .hero__inner > *:nth-child(1) { animation-delay: 0ms; } html.js .hero--section .hero__inner > *:nth-child(2), html.js .hero--detail .hero__inner > *:nth-child(2), html.js .hero--utility .hero__inner > *:nth-child(2) { animation-delay: calc(var(--hero-stagger) * 1); } html.js .hero--section .hero__inner > *:nth-child(3), html.js .hero--detail .hero__inner > *:nth-child(3), html.js .hero--utility .hero__inner > *:nth-child(3) { animation-delay: calc(var(--hero-stagger) * 2); } html.js .hero--section .hero__inner > *:nth-child(4), html.js .hero--detail .hero__inner > *:nth-child(4), html.js .hero--utility .hero__inner > *:nth-child(4) { animation-delay: calc(var(--hero-stagger) * 3); } /* -------------------------------------------------------------------------- 7. Reduced motion — show everything instantly, no transform/animation -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.js .reveal, html.js .reveal-left, html.js .reveal-right, html.js .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; } html.js .hero--section .hero__inner > *, html.js .hero--detail .hero__inner > *, html.js .hero--utility .hero__inner > * { animation: none !important; } .hero .btn { transition: none; } }