/* ============================================================ LEXRA — Ship the Command Layer Single stylesheet. Zero dependencies. Self-hosted fonts. Base CSS renders the composed end-state (no-JS / reduced-motion); .js + .motion-ok on unlock the awakening, whisper reveals, and the scroll theater. ============================================================ */ /* ---- Fonts (self-hosted WOFF2, variable where served) ---- */ @font-face { font-family: 'Cinzel'; src: url('assets/fonts/cinzel-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('assets/fonts/manrope.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; } /* ---- Tokens ---- */ :root { --ivory: #F7F3EC; --sand: #E9E1D2; --charcoal: #12161A; --gold: #D4AF37; --champagne: #E7D6A6; --gold-deep: #A8832B; --gold-ink: #3A2E0E; --gold-lt: #8A6A16; /* gold em on ivory */ --teal-deep: #0E2B2F; --teal-mist: #5FA7A2; --positive: #6FB6A8; --risk: #C86B57; --bg: #0A1317; --bg-seq: #0C1418; --bg-final: #12161A; --bg-footer: #0B0F12; --paper: #F7F3EC; --paper-2: #F1EADD; --muted: #A7B0AD; --subtle: #6E7B79; --faint: #77837F; --steel: #8A9591; --ink-muted: #5B6663; --panel-bg: rgba(15,29,35,.55); --panel-bg-2: rgba(15,29,35,.66); --panel-line: rgba(247,243,236,.13); --hairline-ink: rgba(18,22,26,.12); --font-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif; --font-serif: var(--font-sans); --font-sans: 'Manrope', system-ui, sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); --pad-x: clamp(20px, 6.6vw, 96px); } /* ---- Reset / base ---- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ivory); font-family: var(--font-sans); overflow-x: clip; } main { width: 100%; max-width: 100%; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, p, dl, dd, dt, figure { margin: 0; } ul { margin: 0; padding: 0; } a { color: var(--gold); text-decoration: none; } a:hover { color: var(--champagne); } button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; } ::selection { background: rgba(212,175,55,.28); } section { scroll-margin-top: 24px; } .svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .skip-link { position: absolute; left: 16px; top: -48px; z-index: 200; background: var(--charcoal); color: var(--champagne); border: 1px solid rgba(212,175,55,.5); border-radius: 8px; padding: 10px 16px; font: 600 13px var(--font-sans); transition: top .2s; } .skip-link:focus { top: 12px; } /* ---- Type roles ---- */ .eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 11.5px; letter-spacing: .24em; line-height: 1.9; color: var(--gold); overflow: visible; } .eyebrow-ink { color: var(--teal-deep); } .h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(31px, 3.2vw, 46px); line-height: 1.1; color: var(--ivory); text-wrap: balance; margin-top: 16px; } .h2 em { font-style: normal; color: inherit; } .h2-ink { color: var(--charcoal); } .h2-ink em { color: inherit; } .wordmark { font-family: var(--font-display); font-weight: 600; letter-spacing: .3em; color: var(--ivory); white-space: nowrap; } .flourish { display: flex; align-items: center; gap: 12px; } .fl-line { width: 64px; height: 1px; background: rgba(212,175,55,.4); } .fl-star { color: var(--gold); font-size: 11px; line-height: 1; } .flourish-ink { justify-content: center; margin-top: 20px; } .flourish-ink .fl-line { width: 54px; background: rgba(168,131,43,.4); } .flourish-ink .fl-star { color: var(--gold-deep); font-size: 10px; } /* ---- Buttons ---- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font: 600 14px var(--font-sans); cursor: pointer; padding: 15px 26px; overflow: hidden; text-align: center; } .btn-primary { background: var(--ivory); color: var(--charcoal); border: 1px solid var(--ivory); box-shadow: 0 12px 32px -18px rgba(0,0,0,.7); transition: background-color .2s, color .2s, transform .2s; } .btn-primary:hover, .btn-primary:focus-visible { background: var(--sand); color: var(--charcoal); } html.motion-ok .btn-primary:hover { transform: translateY(-1px); } .btn-ghost { background: rgba(247,243,236,.02); color: var(--ivory); border: 1px solid rgba(247,243,236,.22); transition: border-color .2s, color .2s; padding: 15px 24px; } .btn-ghost:hover, .btn-ghost:focus-visible { border-color: rgba(212,175,55,.5); color: var(--champagne); } .btn-nav { padding: 10px 18px; font-size: 12.5px; } .btn-demo { padding: 11px 20px; font-size: 12.5px; pointer-events: none; } .btn-demo.btn-ghost { padding: 11px 18px; } /* ---- Copy-mail fallback ---- */ .mail-fallback { font: 500 13.5px var(--font-sans); color: var(--muted); } .copy-mail { color: var(--muted); } .copy-mail:hover { color: var(--muted); } .copy-addr { color: var(--gold); border-bottom: 1px solid rgba(212,175,55,.35); } .copy-mail:hover .copy-addr { color: var(--champagne); } .copy-mail.copied .copy-addr { color: var(--positive); border-bottom-color: transparent; } /* ---- Demo tags / panels / chips ---- */ .demo-tag { font: 600 7.5px var(--font-sans); letter-spacing: .13em; color: rgba(212,175,55,.7); } .demo-tag-pill { font-size: 8.5px; color: rgba(212,175,55,.85); border: 1px solid rgba(212,175,55,.32); border-radius: 999px; padding: 3px 8px; white-space: nowrap; } .demo-tag-corner { position: absolute; top: 9px; right: 12px; } .panel { position: relative; background: var(--panel-bg-2); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); border: 1px solid var(--panel-line); border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.66), inset 0 1px 0 rgba(247,243,236,.08); padding: 18px 22px 20px; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .panel-title { font: 600 11.5px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .panel-title-star { display: inline-flex; align-items: center; gap: 8px; } .pstar { color: var(--gold); font-size: 10px; } .chip { font: 500 10.5px var(--font-sans); color: var(--subtle); border: 1px solid rgba(247,243,236,.12); border-radius: 999px; padding: 4px 11px; } .chip-teal { display: inline-flex; align-items: center; gap: 8px; font: 600 12px var(--font-sans); color: var(--positive); border-color: rgba(95,167,162,.4); padding: 7px 15px; } /* ---- Caption lockup (§4.5 — one consistent lockup) ---- */ .caption-lockup { display: flex; align-items: center; gap: 12px; margin-top: 24px; font-family: var(--font-display); font-weight: 600; font-size: 9.5px; letter-spacing: .24em; line-height: 1.9; color: var(--teal-deep); } .cap-line { flex: none; width: 44px; height: 1px; background: rgba(18,22,26,.18); } /* ---- Path spine (§4.1 — gutter-routed, faded ends, desktop only) ---- */ .spine { display: none; position: absolute; left: 12px; top: 0; width: 22px; height: 100%; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%); } .spine path { fill: none; stroke-width: 1.8; stroke-linecap: round; } .spine-ivory path { stroke: var(--teal-mist); opacity: .32; } .spine-dark path { stroke: var(--teal-mist); opacity: .45; } @media (min-width: 1024px) { .spine { display: block; } } /* ============================================================ NAV ============================================================ */ .nav { position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 24px clamp(28px, 3.9vw, 56px); background: transparent; margin-bottom: -86px; /* overlay the hero like the design */ } .nav-brand { display: inline-flex; align-items: center; gap: 14px; } .emblem-nav { height: 34px; width: auto; aspect-ratio: 370 / 690; } .wordmark-nav { font-size: 16px; } .nav-links { display: flex; align-items: center; gap: clamp(20px, 2.5vw, 36px); } .nav-links > a:not(.btn) { font: 500 13px var(--font-sans); color: var(--muted); transition: color .18s; } .nav-links > a:not(.btn):hover { color: var(--ivory); } .nav-menu-btn { display: none; font: 600 10px var(--font-sans); letter-spacing: .22em; color: var(--muted); padding: 14px 0 14px 16px; } @media (max-width: 1023.5px) { .nav { margin-bottom: 0; padding: 16px 20px; } .nav-links { display: none; } .nav-menu-btn { display: block; } .emblem-nav { height: 26px; } .wordmark-nav { font-size: 13px; letter-spacing: .28em; } } /* Mobile menu overlay */ .menu { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: rgba(8,16,20,.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .menu[hidden] { display: none; } .menu-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; } .menu-close { font: 600 10px var(--font-sans); letter-spacing: .22em; color: var(--gold); padding: 14px 0 14px 16px; } .menu-links { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 32px; } .menu-links > a:not(.menu-mail) { font-family: var(--font-serif); font-size: 34px; color: var(--ivory); padding: 12px 0; border-bottom: 1px solid rgba(247,243,236,.1); } .menu-links .flourish { margin-top: 24px; } .menu-links .fl-line { width: 44px; } .menu-links .fl-star { font-size: 9px; } .menu-mail { font: 500 13px var(--font-sans); color: var(--gold); margin-top: 8px; } /* ============================================================ 01 HERO ============================================================ */ .hero { position: relative; overflow: hidden; background: var(--bg); } .hero-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(155deg, #0A1317 0%, #0E2B2F 46%, #0A1317 100%); } .hero-scene { position: absolute; inset: 0; z-index: 1; } .hero-scene img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: 50% 54%; filter: brightness(.62) saturate(.82); } .hero-scrim { position: absolute; inset: 0; z-index: 2; background: radial-gradient(circle at 50% 40%, rgba(14,43,47,.42), rgba(8,16,20,.88) 72%); } .hero-glow { position: absolute; inset: 0; z-index: 3; background: radial-gradient(ellipse 760px 420px at 50% 14%, rgba(212,175,55,.08), transparent 65%); } .hero-fade { position: absolute; inset: 0; z-index: 4; background: linear-gradient(to top, rgba(7,13,16,.88) 0%, rgba(7,13,16,0) 30%); pointer-events: none; } .hero-grain { position: absolute; inset: 0; z-index: 18; opacity: .05; mix-blend-mode: overlay; pointer-events: none; } .hero .spine { z-index: 5; } .hero-inner { position: relative; z-index: 15; min-height: min(920px, 100vh); display: flex; align-items: center; justify-content: center; padding: 132px var(--pad-x) 96px; text-align: center; } .hero-copy { width: 100%; max-width: 1040px; display: flex; flex-direction: column; align-items: center; } .hero-lockup { display: flex; flex-direction: column; align-items: center; width: 150px; } .hero-emblem-wrap { position: relative; } .emblem-hero { height: 116px; width: auto; aspect-ratio: 370 / 690; display: block; filter: drop-shadow(0 0 28px rgba(212,175,55,.2)); } .wordmark-hero { margin-top: 12px; font-size: 22px; letter-spacing: .34em; text-indent: .34em; } .flourish-hero { margin-top: 10px; transform-origin: center; } .hero-eyebrow { margin-top: 30px; } .hero-h1 { margin-top: 18px; font-family: var(--font-display); font-weight: 500; width: 100%; min-width: 0; font-size: clamp(40px, 4.2vw, 60px); line-height: 1.12; letter-spacing: .02em; color: var(--ivory); max-width: 1180px; text-wrap: pretty; } .hero-h1 em { font-style: normal; color: inherit; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1px no-repeat; } .hero-sub { margin-top: 22px; font: 400 16px/1.72 var(--font-sans); color: #D8D2C6; max-width: 720px; } .hero-ctas { margin-top: 32px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; } .hero-copy .mail-fallback { margin-top: 14px; } .hero-trust { margin-top: 18px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 11px; font: 500 12.5px var(--font-sans); color: var(--faint); list-style: none; } .tstar { color: rgba(212,175,55,.45); font-size: 8.5px; } .insight-text { font: 400 13.5px/1.55 var(--font-sans); color: #C9D0CC; } @media (max-width: 1023.5px) { .hero-inner { min-height: calc(100svh - 70px); padding: 56px 24px 64px; } .hero-copy { flex: 0 0 auto; width: calc(100vw - 48px); max-width: calc(100vw - 48px); min-width: 0; } .hero-scene img { inset: 0; width: 100%; height: 100%; object-position: 52% 50%; filter: brightness(.5) saturate(.82); } .hero-scrim { background: linear-gradient(to bottom, rgba(8,16,20,.48), rgba(8,16,20,.9) 72%, rgba(8,16,20,.98)); } .hero-glow { background: radial-gradient(ellipse 320px 220px at 50% 18%, rgba(212,175,55,.1), transparent 65%); } .hero-lockup { width: auto; } .emblem-hero { height: 92px; filter: drop-shadow(0 0 22px rgba(212,175,55,.2)); } .wordmark-hero { margin-top: 10px; font-size: 19px; letter-spacing: .32em; text-indent: .32em; } .flourish-hero .fl-line { width: 44px; } .flourish-hero .fl-star { font-size: 9px; } .hero-eyebrow { margin-top: 22px; font-size: 9.5px; letter-spacing: .18em; max-width: 36ch; } .hero-h1 { margin-top: 14px; width: 100%; max-width: 100%; min-width: 0; font-size: clamp(24px, 6.6vw, 32px); line-height: 1.2; letter-spacing: 0; overflow-wrap: anywhere; } .hero-sub { margin-top: 14px; width: 100%; max-width: 100%; min-width: 0; font-size: 14px; line-height: 1.7; text-align: center; overflow-wrap: anywhere; } .hero-ctas { margin-top: 22px; flex-direction: column; width: 100%; gap: 12px; } .hero-ctas .btn { width: 100%; height: 52px; padding: 0; } .hero-copy .mail-fallback { text-align: center; } .hero-trust { margin-top: 12px; justify-content: center; font-size: 11.5px; } } /* ============================================================ 02 SIGNAL BAR — engraved, never animated ============================================================ */ .signal { position: relative; background: #091114; border-top: 1px solid rgba(212,175,55,.30); border-bottom: 1px solid rgba(212,175,55,.14); display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 26px); padding: 14px clamp(16px, 3vw, 40px); } .signal-line { flex: none; width: clamp(28px, 7.6vw, 110px); height: 1px; background: rgba(247,243,236,.10); } .signal-text { font: 600 clamp(8.5px, .75vw, 10.5px) var(--font-sans); letter-spacing: .18em; color: var(--steel); text-align: center; line-height: 1.9; } /* ============================================================ 03 THE PROBLEM ============================================================ */ .problem { position: relative; background: var(--paper); padding: clamp(64px, 7.2vw, 104px) var(--pad-x) 0; overflow: hidden; } .problem-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(300px, 520px) 1fr; gap: clamp(36px, 5.8vw, 84px); align-items: start; max-width: 1248px; margin-inline: auto; } .problem-arch { position: relative; width: min(520px, 100%); aspect-ratio: 520 / 640; border-radius: 999px 999px 0 0; overflow: hidden; } .problem-arch img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 62%; filter: brightness(1.04) saturate(1.02); } .arch-dim { position: absolute; inset: 0; background: rgba(10,19,23,.55); } .arch-tint { position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,43,47,.28), transparent 45%); } /* Review drift — glass cards adrift inside the arch */ .drift-cluster { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%); width: min(78%, 340px); display: flex; flex-direction: column; gap: 18px; } .drift-tag { position: absolute; top: -24px; right: 2px; } .drift-card { position: relative; background: var(--panel-bg-2); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); border: 1px solid var(--panel-line); border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.66), inset 0 1px 0 rgba(247,243,236,.08); padding: 15px 18px 14px; } .drift-item-1 .drift-card { transform: rotate(-2deg); margin-right: 14px; } .drift-item-2 .drift-card { transform: rotate(1.5deg); margin-left: 14px; } .drift-item-3 { align-self: center; } .drift-item-3 .drift-chip { transform: rotate(-1deg); } .drift-card .frag-stars { margin-top: 7px; } .st-dim { color: var(--gold); opacity: .25; } .drift-chip { display: inline-flex; align-items: center; font: 600 11px var(--font-sans); letter-spacing: .02em; color: var(--teal-mist); background: var(--panel-bg-2); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); border: 1px solid rgba(95,167,162,.45); border-radius: 999px; padding: 6px 14px; box-shadow: 0 18px 44px -16px rgba(0,0,0,.6); } @media (max-width: 640px) { .drift-cluster { gap: 14px; } .drift-tag { position: static; align-self: flex-end; margin: 0 26px -6px 0; } .drift-item-1 .drift-card, .drift-item-2 .drift-card { transform: none; margin-left: 0; margin-right: 0; } .drift-item-3 .drift-chip { transform: none; } } .problem-copy { padding-top: clamp(0px, 1.8vw, 26px); } .lede { margin-top: 22px; font-family: var(--font-serif); font-style: italic; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.5; color: #3D4A47; max-width: 560px; } .problem-list { margin-top: clamp(28px, 2.8vw, 40px); display: flex; flex-direction: column; } .problem-row { position: relative; display: grid; grid-template-columns: clamp(56px, 6.7vw, 96px) 1fr; gap: 20px; align-items: start; padding: 22px 0; border-top: 1px solid var(--hairline-ink); transition: transform .24s; } .problem-row::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: rgba(168,131,43,.55); transform: scaleX(0); transform-origin: left; transition: transform .24s ease; } html.motion-ok .problem-row:hover::before { transform: scaleX(1); } html.motion-ok .problem-row:hover { transform: translateY(-2px); } .problem-row-last { border-bottom: 1px solid var(--hairline-ink); } .problem-num { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 2.9vw, 42px); line-height: 1; color: rgba(14,43,47,.22); } .row-title { font: 600 15px var(--font-sans); color: var(--charcoal); } .row-desc { margin-top: 6px; font: 400 14px/1.65 var(--font-sans); color: var(--ink-muted); max-width: 470px; } .problem-gate { display: block; position: relative; z-index: 1; width: calc(100% + 2 * var(--pad-x)); height: clamp(70px, 7.6vw, 110px); margin: clamp(48px, 5vw, 72px) calc(-1 * var(--pad-x)) 0; } .gate-spine { display: none; } @media (min-width: 1024px) { .gate-spine { display: block; } } @media (max-width: 860px) { .problem-grid { grid-template-columns: 1fr; } .problem-arch { margin: 0 auto; } } /* ============================================================ 04 SEQUENCE — base: stacked; theater layers on (.theater) ============================================================ */ .seq { position: relative; background: var(--bg-seq); padding: clamp(64px, 7vw, 100px) var(--pad-x) clamp(72px, 7.6vw, 110px); overflow: clip; /* clips the artwork without creating a sticky-breaking scroll container */ } .seq-scene { position: absolute; right: -60px; top: 0; height: 120%; width: 60%; pointer-events: none; } .seq-scene img { width: 100%; height: 100%; object-fit: cover; filter: blur(26px) brightness(.5) saturate(.9); opacity: .22; } .seq-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 900px 600px at 30% 8%, rgba(212,175,55,.07), transparent 60%); pointer-events: none; } .seq-head { position: relative; max-width: 1248px; margin-inline: auto; } .seq-theater { position: relative; margin-top: clamp(40px, 4.4vw, 64px); } .seq-stick { position: relative; max-width: 1248px; margin-inline: auto; } .seq-rail { display: none; } /* Base stacked stages (mobile / no-JS / reduced motion) */ .stage { position: relative; display: grid; grid-template-columns: clamp(44px, 9.7vw, 140px) 1fr; gap: 0 clamp(14px, 1.7vw, 24px); align-items: start; padding-bottom: clamp(48px, 5vw, 72px); } .stage:last-child { padding-bottom: 0; } .seq-stages { position: relative; } .seq-stages::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: calc(clamp(44px, 9.7vw, 140px) / 2); width: 1px; background: rgba(247,243,236,.12); } /* §4.3 — no boxes behind numerals: Cinzel gold on the theater background */ .stage-num { position: relative; z-index: 1; justify-self: center; background: var(--bg-seq); padding: 8px 6px; font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 2.1vw, 30px); color: var(--gold); opacity: .35; transition: opacity .5s; } .stage.is-lit .stage-num, html:not(.js) .stage-num, html.js:not(.motion-ok) .stage-num { opacity: 1; } .stage-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; } .stage-label { font-family: var(--font-display); font-weight: 600; font-size: clamp(12px, .97vw, 14px); letter-spacing: .22em; color: var(--ivory); } .stage-quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(17px, 1.45vw, 21px); color: var(--muted); } .stage-aside { font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--muted); } /* Stage 1 — capture fragments */ .frag-row { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; } .frag { position: relative; border-radius: 12px; box-shadow: 0 18px 44px -16px rgba(0,0,0,.7); padding: 16px 18px 14px; } .frag-kicker { font: 600 9px var(--font-sans); letter-spacing: .16em; color: var(--steel); } .frag-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .frag-note { width: min(300px, 100%); transform: rotate(-2.2deg); background: #EFE6D6; border-radius: 6px; } .frag-note .frag-kicker { color: #7A6E52; } .frag-script { margin-top: 9px; font-family: var(--font-serif); font-style: italic; font-size: 19px; line-height: 1.42; color: #2A2620; } .frag-note .demo-tag { margin-top: 11px; color: #9C8E6B; } .frag-review { width: min(296px, 100%); margin-top: 20px; transform: rotate(1.8deg); background: var(--panel-bg-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--panel-line); box-shadow: 0 18px 44px -16px rgba(0,0,0,.7), inset 0 1px 0 rgba(247,243,236,.08); } .frag-stars { margin-top: 8px; font-size: 13px; letter-spacing: 3px; } .st-on { color: var(--gold); } .st-off { color: rgba(247,243,236,.25); } .frag-body { margin-top: 7px; font: 400 13.5px/1.55 var(--font-sans); color: #C9D0CC; } .frag-email { width: min(300px, 100%); margin-top: 6px; transform: rotate(-1deg); background: rgba(233,225,210,.09); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(247,243,236,.15); box-shadow: 0 18px 44px -16px rgba(0,0,0,.7), inset 0 1px 0 rgba(247,243,236,.08); } .frag-email .frag-body { margin-top: 10px; } /* Stage 2 — structure */ .merge-row { margin-top: 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .one-case { font: 600 10.5px var(--font-sans); letter-spacing: .1em; color: var(--gold); } .panel-case { margin-top: 18px; width: min(620px, 100%); border-color: rgba(212,175,55,.22); padding: 20px 24px; } .panel-case .panel-head { margin-bottom: 0; } .case-title { font: 600 14px var(--font-sans); color: var(--ivory); } .case-grid { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; } .case-cell { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .case-cell-b { border-bottom: 1px solid rgba(247,243,236,.08); padding-bottom: 10px; } .case-cell dt { font: 500 12px var(--font-sans); color: var(--subtle); } .case-cell dd { font: 500 12.5px var(--font-sans); color: var(--ivory); } .case-cell .num { font-variant-numeric: tabular-nums; } .case-cell .due { font-weight: 600; color: var(--gold); } .badge-risk { font: 600 11.5px var(--font-sans); color: var(--risk); border: 1px solid rgba(200,107,87,.4); border-radius: 999px; padding: 3px 10px; } @media (max-width: 640px) { .case-grid { grid-template-columns: 1fr; } .case-cell { border-bottom: 1px solid rgba(247,243,236,.08); padding-bottom: 10px; } } /* Stage 3 — recommend */ .option-col { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; width: min(620px, 100%); } .option { position: relative; display: flex; align-items: center; gap: 18px; background: var(--panel-bg-2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--panel-line); border-radius: 14px; box-shadow: 0 18px 44px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(247,243,236,.08); padding: 16px 20px; } .option-a { border-color: rgba(212,175,55,.3); } .opt-badge { flex: none; width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(247,243,236,.3); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--muted); } .opt-badge-gold { border-color: rgba(212,175,55,.55); color: var(--gold); } .opt-text { font: 400 13.5px/1.5 var(--font-sans); color: #C9D0CC; } .opt-text-primary { color: var(--ivory); } .opt-pending { color: var(--steel); } .opt-note { display: flex; align-items: center; gap: 9px; font: 500 12px var(--font-sans); color: var(--steel); } .opt-note-star { color: var(--teal-mist); font-size: 10px; } /* Stage 4 — approve + seal */ .approve-wrap { position: relative; margin-top: 26px; width: min(620px, 100%); } .panel-approve { padding: 20px 24px 22px; } .approve-option { margin-top: 14px; font: 400 13.5px/1.55 var(--font-sans); color: #C9D0CC; max-width: 400px; } .approve-by { margin-top: 16px; display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(247,243,236,.08); padding-top: 16px; } .gm-badge { width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(212,175,55,.5); background: rgba(212,175,55,.08); display: flex; align-items: center; justify-content: center; font: 600 11px var(--font-sans); color: var(--champagne); } .approve-by-text { font: 500 12.5px var(--font-sans); color: var(--muted); } .approve-by-text strong { color: var(--ivory); font-weight: 500; } .approve-actions { margin-top: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .stage-aside-approve { margin-top: 18px; } .seal { position: absolute; bottom: 16px; right: 16px; width: 156px; height: 156px; filter: drop-shadow(0 14px 30px rgba(0,0,0,.55)); } .seal-pulse { position: absolute; bottom: 16px; right: 16px; width: 156px; height: 156px; border-radius: 999px; border: 1px solid rgba(212,175,55,.6); opacity: 0; pointer-events: none; } html.js.motion-ok .seal { opacity: 0; } @media (max-width: 860px) { .seal, .seal-pulse { right: 12px; width: 128px; height: 128px; bottom: 12px; } } /* Stage 5 — learn */ .learn-chips { margin-top: 26px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .panel-flag { margin-top: 18px; width: min(620px, 100%); border-radius: 14px; padding: 16px 20px; } .panel-flag .panel-head { margin-bottom: 0; } .panel-flag .panel-title { font-size: 11px; letter-spacing: .1em; } .flag-text { margin-top: 9px; font: 400 13.5px/1.55 var(--font-sans); color: #C9D0CC; } .learn-close { margin-top: 44px; max-width: 640px; font-family: var(--font-serif); font-style: italic; font-size: clamp(21px, 1.9vw, 27px); line-height: 1.45; color: var(--ivory); } .learn-close em { color: var(--gold); font-style: italic; } /* Sequence exit CTA */ .seq-exit { position: relative; margin-top: clamp(48px, 5vw, 72px); display: flex; align-items: center; flex-wrap: wrap; gap: 18px; max-width: 1248px; margin-inline: auto; } /* ---- Theater mode (≥768px, JS + motion only; class set by script) ---- */ .seq.theater .seq-theater { height: 450vh; } .seq.theater .seq-stick { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: clamp(64px, 9.7vw, 140px) 1fr; gap: 0 clamp(14px, 1.7vw, 24px); align-items: center; max-width: 1248px; } .seq.theater .seq-rail { display: flex; flex-direction: column; justify-content: space-between; position: relative; height: min(66vh, 620px); align-self: center; } .seq.theater .rail-line, .seq.theater .rail-fill { position: absolute; left: 50%; top: 8px; bottom: 8px; width: 1px; background: rgba(247,243,236,.12); } .seq.theater .rail-fill { background: linear-gradient(180deg, rgba(212,175,55,.2), rgba(212,175,55,.75)); transform: scaleY(var(--seq, 0)); transform-origin: top; } .seq.theater .rail-num { position: relative; z-index: 1; align-self: center; background: var(--bg-seq); padding: 8px 6px; font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 2.1vw, 30px); color: var(--gold); opacity: .35; transition: opacity .5s; } .seq.theater .rail-num.is-on { opacity: 1; } .seq.theater .seq-stages { position: relative; height: min(76vh, 720px); align-self: center; } .seq.theater .seq-stages::before { display: none; } .seq.theater .stage { position: absolute; inset: 0; padding-bottom: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(28px); transition: opacity .55s var(--ease), transform .55s var(--ease); pointer-events: none; overflow: visible; } .seq.theater .stage.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; } .seq.theater .stage.is-past { opacity: 0; transform: translateY(-22px); } .seq.theater .stage-num { display: none; } /* stage 1 → 2 snap: fragments drift toward the case as they exit */ .seq.theater .stage[data-stage="1"].is-past .frag { transform: translate(34px, -14px) scale(.96); transition: transform .28s var(--ease); } /* staged inner reveals inside the theater */ .seq.theater .stage [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .45s var(--ease), transform .45s var(--ease); } .seq.theater .stage.is-active [data-reveal] { opacity: 1; transform: none; transition-delay: var(--rd, 0ms); } .seq.theater .stage.is-active [data-reveal].no-delay { transition-delay: 0ms; } /* ============================================================ 05 PLATFORM — ledger (§4.2 rhythm) ============================================================ */ .platform { position: relative; background: var(--paper); padding: clamp(64px, 7vw, 100px) var(--pad-x) clamp(64px, 6.6vw, 96px); border-top: 1px solid rgba(212,175,55,.35); overflow: hidden; } .platform-inner { position: relative; z-index: 1; max-width: 1248px; margin-inline: auto; } .ledger { margin-top: clamp(36px, 3.9vw, 56px); display: flex; flex-direction: column; } .ledger-row { position: relative; display: grid; grid-template-columns: minmax(240px, 400px) 1fr minmax(240px, 300px); gap: clamp(24px, 3.9vw, 56px); align-items: center; padding: clamp(48px, 7vh, 88px) 0; /* §4.2 */ border-top: 1px solid var(--hairline-ink); /* full-width hairline */ transition: transform .24s; } .ledger-row::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: rgba(168,131,43,.55); transform: scaleX(0); transform-origin: left; transition: transform .24s ease; } html.motion-ok .ledger-row:hover::before { transform: scaleX(1); } html.motion-ok .ledger-row:hover { transform: translateY(-2px); } .ledger-row-last { border-bottom: 1px solid var(--hairline-ink); } .ledger-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.45vw, 21px); letter-spacing: .16em; color: var(--charcoal); } .ledger-flourish { margin-top: 13px; display: flex; align-items: center; gap: 10px; } .fl-line-l { width: 88px; height: 1px; background: rgba(168,131,43,.5); } .fl-star-s { color: var(--gold-deep); font-size: 8px; line-height: 1; } .ledger-desc { font: 400 15.5px/1.7 var(--font-sans); color: var(--ink-muted); max-width: 34ch; } /* §4.2 */ .vignette { position: relative; width: min(300px, 100%); height: 230px; justify-self: end; clip-path: path('M0 230 L0 92 C0 42 108 13 150 0 C192 13 300 42 300 92 L300 230 Z'); background-color: var(--teal-deep); background-image: linear-gradient(160deg, rgba(16,34,39,.5) 0%, #0E2B2F 60%, #0A1317 100%); } .vig-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 240px 140px at 50% 12%, rgba(212,175,55,.14), transparent 65%); } .vig-card { position: relative; background: rgba(15,29,35,.8); border: 1px solid rgba(247,243,236,.12); border-radius: 10px; padding: 10px 12px; } .vig-grid { position: absolute; left: 24px; right: 24px; top: 74px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .vig-label { display: block; font: 500 8.5px var(--font-sans); color: var(--subtle); } .vig-num { display: block; font: 300 19px var(--font-sans); color: var(--ivory); margin-top: 2px; } .vig-card-wide { position: absolute; left: 24px; right: 24px; top: 158px; } .vig-card-wide svg { margin-top: 5px; } .vig-tag { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 7.5px; letter-spacing: .14em; color: rgba(212,175,55,.75); } .vig-card-case { position: absolute; left: 24px; right: 24px; top: 80px; border-color: rgba(212,175,55,.25); padding: 11px 13px; } .vig-case-title { display: block; font: 600 10px var(--font-sans); color: var(--ivory); } .vig-case-due { display: block; margin-top: 5px; font: 500 8.5px var(--font-sans); color: var(--risk); } .vig-btn-row { position: absolute; left: 24px; right: 24px; top: 146px; display: flex; gap: 8px; } .vig-btn { flex: 1; border-radius: 7px; padding: 8px 0; text-align: center; font: 600 9px var(--font-sans); } .vig-btn-primary { background: var(--ivory); color: var(--charcoal); } .vig-btn-ghost { border: 1px solid rgba(247,243,236,.25); color: var(--ivory); } .vig-card-themes { position: absolute; left: 24px; right: 24px; top: 78px; padding: 11px 13px; } .theme-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .vig-card-themes .theme-row:first-of-type { margin-top: 8px; } .theme-bar { height: 4px; border-radius: 2px; background: rgba(95,167,162,1); } .theme-label { font: 500 8px var(--font-sans); color: var(--muted); } .vig-card-brief { position: absolute; left: 24px; right: 24px; top: 76px; padding: 11px 13px; } .vig-brief-title { display: flex; align-items: center; gap: 7px; font: 600 9.5px var(--font-sans); color: var(--ivory); } .vig-brief-title .pstar { font-size: 9px; } .vig-brief-body { display: block; margin-top: 7px; font: 400 9.5px/1.6 var(--font-sans); color: var(--muted); } .vig-chip-row { display: flex; gap: 6px; margin-top: 8px; } .vig-chip { font: 600 8px var(--font-sans); color: var(--muted); border: 1px solid rgba(247,243,236,.15); border-radius: 999px; padding: 3px 8px; } .vig-chip-teal { color: var(--positive); border-color: rgba(95,167,162,.4); } @media (max-width: 960px) { .ledger-row { grid-template-columns: 1fr; gap: 22px; padding: clamp(40px, 6vh, 64px) 0; } .vignette { justify-self: start; } } /* ============================================================ 06 PRINCIPLES ============================================================ */ .principles { position: relative; background: var(--paper-2); padding: clamp(64px, 6.6vw, 96px) var(--pad-x) clamp(68px, 7.2vw, 104px); overflow: hidden; } .principles-h { font-size: clamp(30px, 3vw, 44px); text-align: center; margin-top: 0; } .founder-logo { width: clamp(120px, 11vw, 156px); margin: 0 auto 28px; border-radius: 50%; } .principles-grid { margin: clamp(40px, 4.2vw, 60px) auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(32px, 3.3vw, 48px); max-width: 1248px; position: relative; z-index: 1; } .principle-title { margin-top: 16px; font: 600 15px var(--font-sans); color: var(--charcoal); } .principle-desc { margin-top: 8px; font: 400 13.5px/1.65 var(--font-sans); color: var(--ink-muted); } /* ============================================================ 07 PILOT BAND ============================================================ */ .pilot { position: relative; background: var(--teal-deep); padding: clamp(72px, 7.6vw, 110px) clamp(24px, 6.6vw, 96px) clamp(80px, 8.3vw, 120px); overflow: hidden; border-top: 1px solid rgba(212,175,55,.35); } .pilot-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 1000px 560px at 50% 0%, rgba(212,175,55,.09), transparent 62%), radial-gradient(ellipse 900px 500px at 50% 115%, rgba(7,13,16,.75), transparent 70%); } .pilot-arch { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); width: min(760px, 94vw); height: auto; pointer-events: none; } .pilot-inner { position: relative; max-width: 620px; margin: 0 auto; text-align: center; padding-top: clamp(48px, 4.9vw, 70px); } .pilot-h2 { margin-top: 18px; font-size: clamp(30px, 3vw, 44px); line-height: 1.12; } .pilot-sub { margin: 22px auto 0; font: 400 15.5px/1.75 var(--font-sans); color: var(--muted); max-width: 560px; } .pilot-ctas { margin-top: 34px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px; } /* ============================================================ 08 FAQ ============================================================ */ .faq { position: relative; background: var(--paper); padding: clamp(64px, 7vw, 100px) var(--pad-x) clamp(72px, 7.6vw, 110px); border-top: 1px solid rgba(212,175,55,.3); overflow: hidden; } .faq-inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; } .faq-h2 { margin-top: 0; font-size: clamp(29px, 2.9vw, 42px); text-align: center; } .faq-list { margin-top: clamp(36px, 3.6vw, 52px); display: flex; flex-direction: column; } .faq-item { position: relative; border-top: 1px solid var(--hairline-ink); } .faq-item::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: rgba(168,131,43,.55); transform: scaleX(0); transform-origin: left; transition: transform .24s ease; } html.motion-ok .faq-item:hover::before { transform: scaleX(1); } .faq-item-last { border-bottom: 1px solid var(--hairline-ink); } .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 4px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-q { font-family: var(--font-serif); font-weight: 500; font-size: clamp(19px, 1.6vw, 23px); color: var(--charcoal); } .faq-i { flex: none; width: 26px; height: 1px; background: rgba(168,131,43,.35); transition: height .24s, background .24s; } .faq-item[open] .faq-i { height: 2px; background: var(--gold-deep); } .faq-a { padding: 0 4px 26px; } .faq-a p { font: 400 14.5px/1.7 var(--font-sans); color: var(--ink-muted); max-width: 720px; } /* ============================================================ 09 FINAL CTA ============================================================ */ .final { position: relative; background: var(--bg-final); padding: 0 clamp(24px, 6.6vw, 96px) clamp(72px, 7.6vw, 110px); overflow: hidden; } .final-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 900px 480px at 50% 30%, rgba(14,43,47,.55), transparent 70%); } .final-path { display: none; position: relative; width: calc(100% + 2 * clamp(24px, 6.6vw, 96px)); height: clamp(150px, 16vw, 230px); margin: 0 calc(-1 * clamp(24px, 6.6vw, 96px)); } @media (min-width: 1024px) { .final-path { display: block; } } .final-star { filter: drop-shadow(0 0 12px rgba(212,175,55,.6)); } .final-inner { position: relative; max-width: 640px; margin: 0 auto; text-align: center; } .final-h2 { margin-top: 12px; font-size: clamp(34px, 3.5vw, 50px); line-height: 1.08; } @media (max-width: 1023.5px) { .final-inner { padding-top: clamp(64px, 10vw, 96px); } } .final-sub { margin: 20px auto 0; font: 400 15.5px/1.75 var(--font-sans); color: var(--muted); max-width: 520px; } .final-ctas { margin-top: 32px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px; } /* ============================================================ 10 FOOTER ============================================================ */ .footer { position: relative; background: var(--bg-footer); border-top: 1px solid rgba(212,175,55,.22); padding: clamp(40px, 3.9vw, 56px) clamp(24px, 6.6vw, 96px) 40px; } .footer-main { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 32px 48px; } .footer-brand { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; } .emblem-footer { height: 30px; width: auto; aspect-ratio: 370 / 690; } .wordmark-footer { font-size: 14px; } .footer-sep { width: 1px; height: 16px; background: rgba(247,243,236,.18); } .footer-tagline { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--muted); } .footer-links { display: flex; flex-wrap: wrap; gap: 32px clamp(32px, 3.9vw, 56px); } .footer-col { display: flex; flex-direction: column; gap: 11px; } .footer-col a:not(.footer-mail) { font: 500 13px var(--font-sans); color: var(--muted); transition: color .18s; } .footer-col a:not(.footer-mail):hover { color: var(--ivory); } .footer-mail { font: 500 13px var(--font-sans); } .footer-co { font: 500 13px var(--font-sans); color: var(--subtle); } .footer-compliance { margin-top: 44px; border-top: 1px solid rgba(247,243,236,.08); padding-top: 20px; display: flex; align-items: center; justify-content: center; gap: 12px; } .fstar { color: rgba(212,175,55,.5); font-size: 9px; } .footer-compliance p { font: 400 11.5px var(--font-sans); color: var(--subtle); text-align: center; } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } } /* ============================================================ TRUST PAGE (trust.html) Additive only — no selector above this line is modified. Gold appears as hairlines and small glyphs; never as a fill. ============================================================ */ .tp-hero { position: relative; background: var(--bg); padding: clamp(132px, 12vw, 168px) var(--pad-x) clamp(72px, 7.6vw, 108px); text-align: center; overflow: hidden; } .tp-hero-inner { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; } .tp-h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.08; color: var(--ivory); text-wrap: balance; margin-top: 16px; } .tp-lede { margin: 26px auto 0; max-width: 620px; font: 400 16px/1.75 var(--font-sans); color: var(--muted); } .tp-section { position: relative; background: var(--bg-final); padding: clamp(68px, 7vw, 104px) var(--pad-x); overflow: hidden; border-top: 1px solid rgba(212,175,55,.28); } .tp-section-ink { position: relative; background: var(--paper); padding: clamp(68px, 7vw, 104px) var(--pad-x); overflow: hidden; border-top: 1px solid rgba(168,131,43,.3); } .tp-inner { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; } .tp-inner-wide { position: relative; z-index: 1; max-width: 1248px; margin: 0 auto; } .tp-h2 { margin-top: 0; font-size: clamp(28px, 2.8vw, 40px); text-align: center; } .tp-body { margin: 26px auto 0; max-width: 660px; font: 400 15.5px/1.85 var(--font-sans); color: var(--muted); } .tp-body-ink { color: var(--ink-muted); } /* Three principle cards — hairline above each, no filled panels */ .tp-cards { margin: clamp(40px, 4.2vw, 60px) auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(30px, 3.2vw, 48px); max-width: 1080px; } .tp-card { border-top: 1px solid rgba(168,131,43,.45); padding-top: 22px; } .tp-card-title { margin: 0; font: 600 15px var(--font-sans); color: var(--charcoal); } .tp-card-desc { margin-top: 10px; font: 400 13.5px/1.7 var(--font-sans); color: var(--ink-muted); } /* "What we won't do" — one hairline per item, gold star marker */ .tp-wont { margin: clamp(34px, 3.4vw, 48px) auto 0; max-width: 720px; list-style: none; } .tp-wont li { display: flex; gap: 16px; align-items: baseline; padding: 22px 4px; border-top: 1px solid var(--hairline-ink); font: 400 15.5px/1.7 var(--font-sans); color: var(--charcoal); } .tp-wont li:last-child { border-bottom: 1px solid var(--hairline-ink); } .tp-wont .tp-mark { flex: none; color: var(--gold-deep); font-size: 10px; line-height: 2.1; } .tp-note { margin: clamp(40px, 4vw, 56px) auto 0; max-width: 660px; text-align: center; font: 400 13.5px/1.7 var(--font-sans); color: var(--faint); } @media (max-width: 720px) { .tp-hero { padding-top: 120px; } .tp-body, .tp-lede { font-size: 15px; } }