/* ── Sub-page shell (matches index h2 / body scale) ─────────────── */ .page-hero { padding: calc(var(--pad-y) * 0.85) 0 calc(var(--pad-y) * 0.25); } .page-hero-inner, .page-body-inner { max-width: 820px; } .page-body-inner { position: relative; padding-top: 26px; } .page-body-inner::before { content: ''; position: absolute; top: 0; left: 0; width: 46px; height: 1px; background: linear-gradient(90deg, var(--accent), var(--teal)); } .page-kicker { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--accent); text-transform: uppercase; margin: 0 0 22px; } .page-h1 { font-family: var(--sans); font-optical-sizing: auto; font-weight: 620; font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -.015em; line-height: 1.18; color: var(--page-text); margin: 0 0 20px; } .page-lede { font-family: var(--sans); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--page-text-secondary); max-width: 720px; margin: 0; } /* AI Infrastructure hero: footage at 25% over white. */ .page-hero.filings-fold { position: relative; overflow: hidden; min-height: 62svh; display: flex; align-items: center; background: #fff; color: #0a0c10; } .filings-plate { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #fff; } .filings-plate video, .filings-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.25; } .filings-plate .filings-still { display: none; } .filings-fold::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .filings-fold > .section-inner { position: relative; z-index: 2; } .filings-fold .page-lede { max-width: 640px; } .filings-fold .page-hero-inner { padding: clamp(24px, 3vw, 44px); max-width: 748px; } .filings-fold .page-h1, .filings-fold .page-lede { color: #0a0c10; text-shadow: none; } @media (max-width: 900px) { .page-hero.filings-fold { min-height: 0; } } @media (prefers-reduced-motion: reduce) { .filings-plate video { display: none; } .filings-plate .filings-still { display: block; } } .page-body { padding: calc(var(--pad-y) * 0.32) 0 calc(var(--pad-y) * 0.62); } .page-p { font-family: var(--sans); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.72; color: var(--page-text-secondary); margin: 0 0 20px; text-align: left; } .page-p:last-child { margin-bottom: 0; } .page-sect { background: transparent !important; border: 0 !important; } /* ── Page tone variants (scoped to page content, not ) ───── Using --page-text / --page-text-secondary so we do NOT stomp the site-wide --text tokens the fixed nav panel relies on. */ .page-tone-warm { background: #f4f0e8; --page-text: #14171f; --page-text-secondary: rgba(20,23,31,0.72); } .page-tone-blue { background: #0d1a2e; --page-text: #ecf1fa; --page-text-secondary: rgba(236,241,250,0.75); } .page-tone-deep { background: #080a10; --page-text: #ecedf1; --page-text-secondary: rgba(236,237,241,0.75); } .page-tone-slate { background: #1a1f2b; --page-text: #ecedf1; --page-text-secondary: rgba(236,237,241,0.75); } /* ── AI infrastructure: choreographed editorial sequence ──────────── */ /* Each stage is now its own full-bleed band, alternating tone and side the way the Why Revori tiers do — the hero is cream/left, then the sequence flips: navy/right, cream/left, navy/right... connected by a single ambient line threading through in a neutral gray (so it survives both tones) plus a small arrow at each seam pointing into the next band. */ .infra-seq-sect { padding: clamp(84px, 10vw, 132px) 0; position: relative; z-index: 1; } .infra-seq-sect.page-tone-warm { background: #f4f0e8 !important; } .infra-seq-sect.page-tone-blue { background: #0d1a2e !important; } .infra-seq-sect.page-tone-deep { background: #080a10 !important; } .infra-seq-sect.infra-seq-hue { background: radial-gradient(120% 160% at 18% -10%, rgba(78,143,247,0.16), transparent 55%), radial-gradient(90% 120% at 100% 115%, rgba(109,163,250,0.10), transparent 60%), #080a10 !important; } .infra-seq-wrap { position: relative; } .infra-connect-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: visible; } .infra-connect-svg path { fill: none; stroke: rgba(148, 148, 148, 0.55); stroke-width: 1.2; stroke-linecap: round; vector-effect: non-scaling-stroke; } .infra-seq-item { position: relative; z-index: 1; } .infra-seq-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; position: relative; z-index: 1; } .infra-seq-item { max-width: 480px; will-change: opacity, transform, filter; opacity: 0.12; transform: translateY(46px) scale(0.97); filter: blur(2px); transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease; } .infra-seq-item[data-align="left"] { grid-column: 1; justify-self: start; text-align: left; } .infra-seq-item[data-align="right"] { grid-column: 2; justify-self: end; text-align: left; } .infra-seq-h { font-family: var(--sans); font-optical-sizing: auto; font-weight: 620; font-size: clamp(23px, 2.6vw, 32px); letter-spacing: -0.015em; line-height: 1.2; color: var(--page-text); margin: 0 0 16px; } .infra-seq-p { font-family: var(--sans); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.72; color: var(--page-text-secondary); margin: 0; } /* seam arrow — bridges one band into the next, sits on the incoming band's own tone so it always has contrast */ .infra-seam-arrow { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; } .infra-seam-arrow svg { width: 100%; height: 100%; } .infra-seam-arrow path { fill: none; stroke: var(--page-text); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; } .infra-seq-sect:last-of-type .infra-seam-arrow { display: none; } @media (max-width: 900px) { .infra-seq-sect { padding: clamp(56px, 11vw, 84px) 0; } .infra-seq-grid { grid-template-columns: 1fr; } .infra-seq-item[data-align="left"], .infra-seq-item[data-align="right"] { grid-column: 1; justify-self: start; max-width: none; } .infra-connect-svg { display: none; } } @media (prefers-reduced-motion: reduce) { .infra-seq-item { opacity: 1 !important; transform: none !important; } } /* ── Sub-page nav stays legible over any tone ───────────────────── */ .page nav#nav { background: rgba(10,12,18,0.94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.06); } .page nav#nav .nav-link, .page nav#nav .logo-word { color: #ecedf1; } .page nav#nav .nav-link:hover { color: #fff; } /* Match the shared calm entrance, including its reading-order stagger. */ .filings-fold .page-hero-inner > .cm.in { animation: infraHeroEntrance 2.2s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i, 0) * 195ms); } @keyframes infraHeroEntrance { from { opacity: 0; transform: translateY(var(--cm-y, 18px)) scale(var(--cm-s, .99)); filter: blur(7px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @media (prefers-reduced-motion: reduce) { .filings-fold .page-hero-inner > .cm.in { animation: none; } } /* Deployment-style overview: side navigation and two-column content cards. */ .page-hero.filings-fold { padding: 142px 0 92px; } .filings-fold .infra-hero-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(50px, 9vw, 140px); align-items: start; } .filings-fold .page-hero-inner { padding: 0; max-width: 850px; } .filings-fold .page-h1 { font-size: clamp(44px, 5vw, 68px); font-weight: 500; line-height: 1.02; letter-spacing: -.045em; margin-bottom: 23px; } .filings-fold .page-lede { max-width: 58ch; font-size: 18px; line-height: 1.62; } .infra-side { display: flex; flex-direction: column; gap: 14px; padding-top: 7px; } .infra-side a { color: #40566e; font-size: 13px; text-decoration: none; } .infra-side a:hover, .infra-side a:focus-visible { color: #137fca; text-decoration: underline; } .infra-overview { padding: 92px 0; background: #f6f6f3; color: #13243a; } .infra-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .infra-card { padding: clamp(24px, 3vw, 40px); border: 1px solid #d8e0e6; border-radius: 6px; background: #fff; scroll-margin-top: 100px; } .infra-card::before { content: ''; display: block; width: 28px; height: 2px; background: #137fca; margin-bottom: 26px; } .infra-card .infra-seq-h { max-width: none; margin: 0 0 18px; color: #13243a; font-size: clamp(25px, 2.4vw, 34px); line-height: 1.12; letter-spacing: -.025em; } .infra-card .infra-seq-p { max-width: none; margin: 0; color: #53657a; font-size: 16px; line-height: 1.65; } @media (max-width: 800px) { .page-hero.filings-fold { padding: 112px 0 56px; } .filings-fold .infra-hero-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; } .infra-side { display: none; } .infra-card-grid { grid-template-columns: minmax(0, 1fr); } .infra-overview { padding: 56px 0; } }