/* ──────────────────────────────────────────────────────────────────────────── index-editorial.css Scoped to on index.html only. Removing the body class (or this ) reverts to the global style.css. ──────────────────────────────────────────────────────────────────────────── */ .page-home { --ed-text: #0f172a; --ed-text-soft: #475569; --ed-text-mute: #94a3b8; --ed-bg: #ffffff; --ed-bg-soft: #f8fafc; --ed-line: #e2e8f0; --ed-line-soft: #f1f5f9; --ed-accent: #ff1616; --ed-dark: #0b0f17; --ed-display: 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; --ed-body: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--ed-bg); color: var(--ed-text); font-family: var(--ed-body); } /* Dark mode */ :root[data-theme="dark"] .page-home { --ed-text: #e6edf6; --ed-text-soft: #b6c2d2; --ed-text-mute: #7b8aa1; --ed-bg: #0b1220; --ed-bg-soft: #11172a; --ed-line: #1f2a3d; --ed-line-soft: #15203a; --ed-dark: #050810; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page-home { --ed-text: #e6edf6; --ed-text-soft: #b6c2d2; --ed-text-mute: #7b8aa1; --ed-bg: #0b1220; --ed-bg-soft: #11172a; --ed-line: #1f2a3d; --ed-line-soft: #15203a; --ed-dark: #050810; } } /* Override existing global hero/audience-split visuals on this page only. The global selectors live in style.css; here we just neutralize them so the editorial sections below have a clean canvas. */ .page-home main > .hero, .page-home main > .audience-split { display: none; } /* ── Nav reskin (home page only) ───────────────────────────────────────────── */ /* Nav backdrop is handled by body.is-marketing-site rules in style.css so it's theme-aware. Here we just keep the position/border behaviour. */ .page-home nav.nav-has-center { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid transparent; transition: border-color 200ms ease, background 200ms ease; } .page-home nav.nav-has-center.is-scrolled { border-bottom-color: var(--ed-line); } /* ── Layout helpers ────────────────────────────────────────────────────────── */ .page-home .ed-shell { max-width: 1320px; margin: 0 auto; padding: 0 clamp(1.25rem, 2.5vw, 3rem); } /* Staggered reveal — opacity + slight rise, controlled by IntersectionObserver */ .page-home [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .page-home [data-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0); } @media (prefers-reduced-motion: reduce) { .page-home [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ── Hero ──────────────────────────────────────────────────────────────────── */ .page-home .ed-hero { position: relative; padding: clamp(3rem, 9vw, 7rem) 0 clamp(2rem, 5vw, 4rem); overflow: hidden; } .page-home .ed-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); position: relative; } .page-home .ed-hero-title { font-family: var(--ed-display); font-weight: 700; font-size: clamp(2.4rem, 6.2vw, 6.5rem); line-height: 0.96; letter-spacing: -0.03em; color: var(--ed-text); margin: 0; max-width: 18ch; } .page-home .ed-hero-title em { font-style: italic; color: var(--ed-accent); font-weight: 700; } .page-home .ed-hero-meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 2vw, 2rem); margin-top: clamp(1.5rem, 4vw, 3rem); } @media (min-width: 880px) { .page-home .ed-hero-meta { grid-template-columns: 5fr 4fr; align-items: end; } } .page-home .ed-hero-lede { font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.55; color: var(--ed-text); max-width: 56ch; margin: 0; } .page-home .ed-hero-lede strong { font-weight: 700; color: var(--ed-text); } .page-home .ed-hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; border-top: 1px solid var(--ed-line); padding-top: 1rem; } .page-home .ed-stat-num { font-family: var(--ed-display); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 700; line-height: 1; color: var(--ed-text); letter-spacing: -0.03em; } .page-home .ed-stat-num em { color: var(--ed-accent); font-style: normal; } .page-home .ed-stat-label { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ed-text-mute); margin-top: 0.3rem; } /* ── Editorial intro paragraph + pull-quote ────────────────────────────────── */ .page-home .ed-intro { padding: clamp(4rem, 9vw, 8rem) 0; } .page-home .ed-intro-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); } @media (min-width: 980px) { .page-home .ed-intro-inner { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2.5rem, 5vw, 5rem); } /* Side-by-side now, so the pullquote doesn't need its stacked top margin. */ .page-home .ed-intro-inner .ed-pullquote { margin-top: 0; } } .page-home .ed-intro-text { font-size: clamp(1.35rem, 2vw, 1.85rem); line-height: 1.45; color: var(--ed-text); margin: 0; font-weight: 500; letter-spacing: -0.01em; max-width: 38ch; } .page-home .ed-intro-text strong { color: var(--ed-accent); font-weight: 700; } .page-home .ed-pullquote { margin: clamp(2rem, 4vw, 3rem) 0 0; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem); background: var(--ed-bg-soft); border-left: 4px solid var(--ed-accent); font-family: var(--ed-display); font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.25; font-style: italic; font-weight: 700; color: var(--ed-text); letter-spacing: -0.02em; border-radius: 6px 32px 8px 28px; } /* ── How it works (01 · 02 · 03) ───────────────────────────────────────────── */ .page-home .ed-process { padding: clamp(4rem, 9vw, 8rem) 0; background: var(--ed-bg-soft); position: relative; } .page-home .ed-process-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: end; margin-bottom: clamp(2rem, 5vw, 4rem); } @media (min-width: 880px) { .page-home .ed-process-head { grid-template-columns: 1fr auto; } } .page-home .ed-process-title { font-family: var(--ed-display); font-weight: 700; font-size: clamp(2.4rem, 7vw, 6rem); line-height: 0.95; letter-spacing: -0.03em; color: var(--ed-text); margin: 0; } .page-home .ed-process-title em { color: var(--ed-accent); font-style: italic; } .page-home .ed-process-sub { max-width: 28ch; color: var(--ed-text-soft); font-size: 1rem; line-height: 1.55; } .page-home .ed-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 2.5rem); } @media (min-width: 760px) { .page-home .ed-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3rem); } } @media (min-width: 1100px) { .page-home .ed-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1.5rem, 2.4vw, 2.25rem); } } .page-home .ed-step { display: flex; flex-direction: column; gap: 0.55rem; padding-top: 1.1rem; border-top: 2px solid var(--ed-text); } .page-home .ed-step-num { font-family: var(--ed-display); font-weight: 700; font-size: clamp(2.25rem, 3vw, 3rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--ed-accent); display: inline-block; margin-bottom: 0.15rem; } .page-home .ed-step-title { font-family: var(--ed-display); font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.65rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--ed-text); margin: 0; } .page-home .ed-step-body { color: var(--ed-text-soft); font-size: 0.98rem; line-height: 1.55; margin: 0; } /* ── Two paths CTA ─────────────────────────────────────────────────────────── */ .page-home .ed-paths { background: var(--ed-dark); color: #f8fafc; position: relative; overflow: hidden; } .page-home .ed-paths-head { padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem); } .page-home .ed-paths-title { font-family: var(--ed-display); font-weight: 700; font-size: clamp(2.4rem, 7vw, 6rem); line-height: 0.95; letter-spacing: -0.03em; color: #ffffff; margin: 0; max-width: 18ch; } .page-home .ed-paths-title em { color: var(--ed-accent); font-style: italic; } .page-home .ed-paths-grid { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid rgba(255, 255, 255, 0.08); } @media (min-width: 780px) { .page-home .ed-paths-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .page-home .ed-path { position: relative; padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 2.5vw, 3rem); border-bottom: 1px solid rgba(255, 255, 255, 0.08); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 1.25rem; min-height: clamp(280px, 32vw, 420px); isolation: isolate; overflow: hidden; transition: color 200ms ease; } .page-home .ed-path + .ed-path { border-left: 1px solid rgba(255, 255, 255, 0.08); } @media (max-width: 779px) { .page-home .ed-path + .ed-path { border-left: none; } } .page-home .ed-path::before { content: ""; position: absolute; inset: 0; background: var(--ed-accent); transform: translateY(101%); transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1); z-index: -1; } .page-home .ed-path:hover::before, .page-home .ed-path:focus-visible::before { transform: translateY(0); } .page-home .ed-path:hover, .page-home .ed-path:focus-visible { color: #ffffff; outline: none; } .page-home .ed-path-num { font-family: var(--ed-display); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .page-home .ed-path:hover .ed-path-num, .page-home .ed-path:focus-visible .ed-path-num { color: rgba(255, 255, 255, 0.92); } .page-home .ed-path-title { font-family: var(--ed-display); font-weight: 700; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 0.95; letter-spacing: -0.025em; margin: 0; } .page-home .ed-path-body { color: rgba(255, 255, 255, 0.7); font-size: 1rem; line-height: 1.55; max-width: 38ch; margin: 0; } .page-home .ed-path:hover .ed-path-body, .page-home .ed-path:focus-visible .ed-path-body { color: rgba(255, 255, 255, 0.92); } .page-home .ed-path-arrow { margin-top: auto; display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--ed-display); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .page-home .ed-path-arrow svg { transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); } .page-home .ed-path:hover .ed-path-arrow svg, .page-home .ed-path:focus-visible .ed-path-arrow svg { transform: translateX(6px); } /* ── Closing CTA (red editorial band) ──────────────────────────────────────── */ .page-home .ed-closer { background: var(--ed-accent); color: #ffffff; padding: clamp(4rem, 9vw, 8rem) 0; position: relative; overflow: hidden; } .page-home .ed-closer-inner { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1.5rem, 3vw, 2.25rem); } .page-home .ed-closer-title { font-family: var(--ed-display); font-weight: 700; font-size: clamp(2.6rem, 8vw, 7rem); line-height: 0.92; letter-spacing: -0.03em; color: #ffffff; margin: 0; } .page-home .ed-closer-title em { font-style: italic; color: var(--ed-dark); } .page-home .ed-closer-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.25rem; } .page-home .ed-cta { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--ed-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; padding: 0.95rem 1.6rem; border: 2px solid var(--ed-dark); border-radius: 4px 14px 6px 12px; transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 180ms ease; } .page-home .ed-cta svg { transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); } .page-home .ed-cta:hover svg, .page-home .ed-cta:focus-visible svg { transform: translateX(6px); } .page-home .ed-cta-primary { background: #ffffff; color: var(--ed-dark); box-shadow: 5px 5px 0 var(--ed-dark); } .page-home .ed-cta-ghost { background: transparent; color: #ffffff; border-color: #ffffff; box-shadow: 5px 5px 0 rgba(11, 15, 23, 0.45); } .page-home .ed-cta:hover, .page-home .ed-cta:focus-visible { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ed-dark); outline: none; } .page-home .ed-cta-ghost:hover, .page-home .ed-cta-ghost:focus-visible { box-shadow: 7px 7px 0 rgba(11, 15, 23, 0.55); } .page-home .ed-closer-note { font-size: 0.95rem; color: rgba(255, 255, 255, 0.9); margin: 0; } .page-home .ed-closer-note a { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } /* Spacer / page bottom rule */ .page-home main { display: block; } .page-home main > section + section, .page-home main > div + section { border-top: 0; } /* Force the global hero's pseudo-elements to not leak through */ .page-home .hero { display: none !important; } /* small mobile niceties */ @media (max-width: 600px) { .page-home .ed-hero { padding-top: clamp(2rem, 6vw, 4rem); } .page-home .ed-hero-title { font-size: clamp(3rem, 13vw, 6rem); } }