/* PrivateForge marketing site — handcrafted, dependency-free. v4 "Forge" design system: FULLY dual-theme. Every surface — nav, heroes, engine consoles/diagrams, CTA bands, footer — reads from the token blocks below, so light and dark are both first-class (no permanently-dark chrome). Forge Green is the single accent, Copper is Enterprise-only. Display type Space Grotesk, body Inter, micro-labels JetBrains Mono. Theming: `data-theme="light|dark"` on ; with no attribute set, prefers-color-scheme decides. The pre-paint snippet + nav toggle + home ledger ticker are the only JS. All motion gated by prefers-reduced-motion. The --d-* tokens are FIXED dark values for the few intentionally always-dark components (featured pricing tier, honest-math card). NB: --cobalt* aliases retained for long-tail pages. */ :root { /* brand palette (PrivateForge-Green-Bold kit) — theme-invariant */ --green: #62B88F; --green-deep: #3E8F68; --green-soft: #BFE6D1; --green-ink: #2A7551; --green-50: #E7F4EC; --night: #101814; --night-deep: #0B100D; --night-lift: #18231C; --ink: #131A16; --copper: #B56F45; --copper-soft: #F3E3D7; /* FIXED dark-card text (always-dark components only) */ --d-text: #E9F0EB; --d-muted: #A3B5A9; --d-faint: #75857B; --amber: #f59e0b; --amber-50: #fff7e8; /* legacy aliases (do not remove — long-tail pages reference these) */ --cobalt: #62B88F; --cobalt-ink: var(--accent-ink); --cobalt-700: #3E8F68; --cobalt-300: #8FCFAD; --cobalt-50: var(--chip-bg); --ink-800: #101814; --ink-700: #18231C; --bg: var(--surf); --bg-soft: var(--surf-soft); --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --container: 1180px; --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Space Grotesk", "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; } /* ============================ THEME TOKENS ============================ */ /* ---- light (default): Warm Bone, light chrome, light consoles ---- */ :root, html[data-theme="light"] { --surf: #F6F4ED; --surf-soft: #EFEDE3; --card-bg: #ffffff; --card-line: #E5E1D3; --line: #E5E1D3; --text: #131A16; --slate: #4D5A52; --slate-400: #8A968D; --accent-ink: #2A7551; --chip-bg: #E7F4EC; --chip-line: #CDE8D9; --row-hover: #FBFAF3; --copper-chip-bg: #F3E3D7; --copper-chip-line: #E8CDB8; --copper-text: #8C5430; --callout-bg: #fff7e8; --callout-line: #fde8bf; --callout-text: #92400e; --btn-ghost-bg: #ffffff; --btn-ghost-color: #131A16; --btn-ghost-line: #E5E1D3; --shadow-sm: 0 1px 2px rgba(19, 26, 22, .05), 0 1px 3px rgba(19, 26, 22, .07); --shadow: 0 10px 30px rgba(19, 26, 22, .09); --shadow-lg: 0 28px 70px rgba(19, 26, 22, .18); /* chrome */ --nav-bg: rgba(246, 244, 237, .82); --nav-line: #E5E1D3; --hero-bg: radial-gradient(1100px 540px at 50% -12%, rgba(98, 184, 143, .22), transparent 62%), radial-gradient(720px 460px at 14% 18%, rgba(62, 143, 104, .12), transparent 60%), radial-gradient(820px 520px at 88% 30%, rgba(98, 184, 143, .10), transparent 65%), linear-gradient(#FDFCF7, #F6F4ED); --grid-c: rgba(23, 122, 79, .09); --trust-bg: #ffffff; --trust-line: #E5E1D3; --alt-bg: #EFEDE3; /* .section--dark surface */ --alt-glow: rgba(98, 184, 143, .18); --band-bg: radial-gradient(720px 380px at 50% -10%, rgba(98, 184, 143, .28), transparent 65%), linear-gradient(160deg, #EAF2EC, #EFEDE3); --footer-bg: #EFEDE3; --footer-line: #E0DCCE; /* console / engine */ --panel: linear-gradient(180deg, rgba(36, 145, 98, .06), transparent 32%), #ffffff; --panel-line: rgba(23, 122, 79, .3); --panel-inset: rgba(255, 255, 255, .9); --panel-shadow: 0 24px 60px rgba(16, 58, 40, .14); --node-fill: #ffffff; --node-stroke: rgba(23, 122, 79, .35); --path: rgba(23, 122, 79, .22); --flow: #2E8F63; --ringc: rgba(23, 122, 79, .42); --core-fill: #ffffff; --core-stroke: #3E8F68; --pulse: #1F7F52; --lane-c: rgba(23, 122, 79, .15); --lg-new: #1F7F52; --scan: rgba(98, 184, 143, .16); color-scheme: light; } /* ---- dark: full Forge Night ---- */ html[data-theme="dark"] { --surf: #0D1310; --surf-soft: #101814; --card-bg: #141E18; --card-line: rgba(255, 255, 255, .09); --line: rgba(255, 255, 255, .09); --text: #E9F0EB; --slate: #A3B5A9; --slate-400: #75857B; --accent-ink: #7FC9A4; --chip-bg: rgba(98, 184, 143, .12); --chip-line: rgba(98, 184, 143, .3); --row-hover: rgba(98, 184, 143, .05); --copper-chip-bg: rgba(181, 111, 69, .15); --copper-chip-line: rgba(181, 111, 69, .45); --copper-text: #DDA374; --callout-bg: rgba(245, 158, 11, .1); --callout-line: rgba(245, 158, 11, .3); --callout-text: #F3CE8F; --btn-ghost-bg: rgba(255, 255, 255, .05); --btn-ghost-color: #E9F0EB; --btn-ghost-line: rgba(255, 255, 255, .18); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 10px 30px rgba(0, 0, 0, .4); --shadow-lg: 0 28px 70px rgba(0, 0, 0, .55); --nav-bg: rgba(11, 16, 13, .78); --nav-line: rgba(255, 255, 255, .07); --hero-bg: radial-gradient(1100px 540px at 50% -12%, rgba(98, 184, 143, .22), transparent 62%), radial-gradient(720px 460px at 14% 18%, rgba(62, 143, 104, .14), transparent 60%), radial-gradient(820px 520px at 88% 30%, rgba(98, 184, 143, .10), transparent 65%), linear-gradient(#101814, #0B100D); --grid-c: rgba(98, 184, 143, .07); --trust-bg: rgba(255, 255, 255, .04); --trust-line: rgba(255, 255, 255, .09); --alt-bg: #101814; --alt-glow: rgba(98, 184, 143, .14); --band-bg: radial-gradient(720px 380px at 50% -10%, rgba(98, 184, 143, .35), transparent 65%), linear-gradient(160deg, #18231C, #0B100D); --footer-bg: #0B100D; --footer-line: rgba(255, 255, 255, .07); --panel: linear-gradient(180deg, rgba(24, 35, 28, .92), rgba(13, 19, 15, .96)); --panel-line: rgba(98, 184, 143, .24); --panel-inset: rgba(255, 255, 255, .04); --panel-shadow: 0 40px 90px rgba(0, 0, 0, .5), 0 0 80px rgba(98, 184, 143, .10); --node-fill: #0E1813; --node-stroke: rgba(98, 184, 143, .28); --path: rgba(98, 184, 143, .14); --flow: #BFE6D1; --ringc: rgba(98, 184, 143, .4); --core-fill: #0D1A12; --core-stroke: #62B88F; --pulse: #BFE6D1; --lane-c: rgba(98, 184, 143, .12); --lg-new: #BFE6D1; --scan: rgba(98, 184, 143, .12); color-scheme: dark; } /* no stored choice → follow the OS */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { --surf: #0D1310; --surf-soft: #101814; --card-bg: #141E18; --card-line: rgba(255, 255, 255, .09); --line: rgba(255, 255, 255, .09); --text: #E9F0EB; --slate: #A3B5A9; --slate-400: #75857B; --accent-ink: #7FC9A4; --chip-bg: rgba(98, 184, 143, .12); --chip-line: rgba(98, 184, 143, .3); --row-hover: rgba(98, 184, 143, .05); --copper-chip-bg: rgba(181, 111, 69, .15); --copper-chip-line: rgba(181, 111, 69, .45); --copper-text: #DDA374; --callout-bg: rgba(245, 158, 11, .1); --callout-line: rgba(245, 158, 11, .3); --callout-text: #F3CE8F; --btn-ghost-bg: rgba(255, 255, 255, .05); --btn-ghost-color: #E9F0EB; --btn-ghost-line: rgba(255, 255, 255, .18); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 10px 30px rgba(0, 0, 0, .4); --shadow-lg: 0 28px 70px rgba(0, 0, 0, .55); --nav-bg: rgba(11, 16, 13, .78); --nav-line: rgba(255, 255, 255, .07); --hero-bg: radial-gradient(1100px 540px at 50% -12%, rgba(98, 184, 143, .22), transparent 62%), radial-gradient(720px 460px at 14% 18%, rgba(62, 143, 104, .14), transparent 60%), radial-gradient(820px 520px at 88% 30%, rgba(98, 184, 143, .10), transparent 65%), linear-gradient(#101814, #0B100D); --grid-c: rgba(98, 184, 143, .07); --trust-bg: rgba(255, 255, 255, .04); --trust-line: rgba(255, 255, 255, .09); --alt-bg: #101814; --alt-glow: rgba(98, 184, 143, .14); --band-bg: radial-gradient(720px 380px at 50% -10%, rgba(98, 184, 143, .35), transparent 65%), linear-gradient(160deg, #18231C, #0B100D); --footer-bg: #0B100D; --footer-line: rgba(255, 255, 255, .07); --panel: linear-gradient(180deg, rgba(24, 35, 28, .92), rgba(13, 19, 15, .96)); --panel-line: rgba(98, 184, 143, .24); --panel-inset: rgba(255, 255, 255, .04); --panel-shadow: 0 40px 90px rgba(0, 0, 0, .5), 0 0 80px rgba(98, 184, 143, .10); --node-fill: #0E1813; --node-stroke: rgba(98, 184, 143, .28); --path: rgba(98, 184, 143, .14); --flow: #BFE6D1; --ringc: rgba(98, 184, 143, .4); --core-fill: #0D1A12; --core-stroke: #62B88F; --pulse: #BFE6D1; --lane-c: rgba(98, 184, 143, .12); --lg-new: #BFE6D1; --scan: rgba(98, 184, 143, .12); color-scheme: dark; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-rendering: geometricPrecision; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font); color: var(--text); background: var(--surf); line-height: 1.62; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: normal; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; text-rendering: geometricPrecision; } body, .nav, .hero, .ctaband, .footer, .card, .tier, .console, .chip, .pack, .faq details { transition: background-color .25s ease, border-color .25s ease, color .25s ease; } h1, h2, h3, h4 { margin: 0; line-height: 1.08; letter-spacing: 0; font-family: var(--font-display); font-weight: 700; color: var(--text); } p { margin: 0; } a { color: inherit; text-decoration: none; } img, svg, canvas, video { display: block; max-width: 100%; } img, video { height: auto; image-rendering: auto; } svg { shape-rendering: geometricPrecision; text-rendering: geometricPrecision; } ul { margin: 0; padding: 0; list-style: none; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .muted { color: var(--slate); } .center { text-align: center; } .nowrap { white-space: nowrap; } /* ---------- eyebrow / gradient text ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-ink); } .eyebrow::before { content: ""; width: 22px; height: 1.5px; background: currentColor; opacity: .65; } .gradient-text { background: linear-gradient(95deg, var(--green) 10%, var(--green-soft) 50%, var(--green) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% auto; } /* light theme: darker ramp everywhere so gradient headings stay readable */ html[data-theme="light"] .gradient-text { background-image: linear-gradient(95deg, var(--green-deep), #2E7E57 55%, #236B49); } @media (prefers-color-scheme: light) { html:not([data-theme]) .gradient-text { background-image: linear-gradient(95deg, var(--green-deep), #2E7E57 55%, #236B49); } } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 640; font-size: 15px; cursor: pointer; padding: 12px 22px; border-radius: 12px; border: 1px solid transparent; transition: transform .14s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--green); color: #0C1410; box-shadow: 0 8px 24px rgba(98, 184, 143, .30), inset 0 1px 0 rgba(255, 255, 255, .25); } .btn--primary:hover { background: var(--green-deep); color: #fff; box-shadow: 0 12px 34px rgba(62, 143, 104, .40); } .btn--ghost { background: var(--btn-ghost-bg); color: var(--btn-ghost-color); border-color: var(--btn-ghost-line); box-shadow: var(--shadow-sm); } .btn--ghost:hover { border-color: var(--green); color: var(--accent-ink); } .btn--dark { background: var(--ink); color: #fff; } .btn--dark:hover { background: #000; } .btn--light { background: var(--card-bg); color: var(--accent-ink); border-color: var(--card-line); } .btn--light:hover { border-color: var(--green); } .btn--lg { padding: 16px 28px; font-size: 16px; border-radius: 14px; } .btn--block { width: 100%; } /* ---------- badges ---------- */ .badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; border: 1px solid transparent; } .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .badge--now, .badge--early, .badge--secure { color: var(--accent-ink); background: var(--chip-bg); border-color: var(--chip-line); } .badge--copper { color: var(--copper-text); background: var(--copper-chip-bg); border-color: var(--copper-chip-line); } .badge--soon { color: var(--slate); background: var(--surf-soft); border-color: var(--card-line); } .tier--featured .badge { background: rgba(98, 184, 143, .12); color: var(--green-soft); border-color: rgba(98, 184, 143, .3); } /* ---------- logo ---------- */ .logo { display: inline-flex; align-items: center; gap: 11px; } .logo svg, .logo img { width: 34px; height: 34px; } .logo__word { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .15em; color: var(--text); } .logo__tag { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink); margin-top: 10px; } /* ---------- nav (theme-aware glass) ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--nav-line); } .nav__inner { display: flex; align-items: center; gap: 40px; height: 70px; } .nav__links { display: flex; align-items: center; gap: 30px; margin-left: 4px; } .nav__links a { position: relative; font-size: 14.5px; font-weight: 560; color: var(--slate); transition: color .15s; padding: 6px 2px; } .nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--accent-ink); border-radius: 2px; transition: right .22s ease; box-shadow: 0 0 8px rgba(98, 184, 143, .7); } .nav__links a:hover::after, .nav__links a.active::after { right: 0; } .nav__links a:hover { color: var(--text); } .nav__links a.active { color: var(--accent-ink); font-weight: 650; } .nav__cta { margin-left: auto; display: flex; align-items: center; gap: 12px; } /* theme toggle (sun/moon) */ .theme-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--btn-ghost-line); background: var(--btn-ghost-bg); color: var(--slate); cursor: pointer; transition: border-color .18s ease, color .18s ease, transform .14s ease; padding: 0; font: inherit; } .theme-toggle:hover { border-color: var(--green); color: var(--accent-ink); } .theme-toggle:active { transform: translateY(1px); } .theme-toggle svg { width: 19px; height: 19px; } /* Three-stop cycle (auto → light → dark → auto). The visible glyph is the DESTINATION of the next click — matching the app's toggle — and is driven by the user's MODE (data-theme-mode), not the effective painted theme. */ .theme-toggle .ico-sun, .theme-toggle .ico-moon, .theme-toggle .ico-auto { display: none; } html[data-theme-mode="auto"] .theme-toggle .ico-sun { display: block; } /* next: Light */ html[data-theme-mode="light"] .theme-toggle .ico-moon { display: block; } /* next: Dark */ html[data-theme-mode="dark"] .theme-toggle .ico-auto { display: block; } /* next: Auto */ /* No-JS fallback (mode never set): show the moon as a sensible default. */ html:not([data-theme-mode]) .theme-toggle .ico-moon { display: block; } .nav__toggle { display: none; } .nav__check { position: absolute; width: 1px; height: 1px; opacity: 0; } .nav__burger { display: none; } @media (max-width: 1020px) { /* mobile: hamburger toggles a dropdown drawer (pure CSS, no JS) */ .nav__inner { flex-wrap: wrap; height: auto; min-height: 60px; padding: 10px 0; } .nav__burger { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 40px; margin-left: auto; cursor: pointer; border: 1px solid var(--btn-ghost-line); border-radius: 10px; background: var(--btn-ghost-bg); } .nav__burger span { height: 2px; width: 20px; background: var(--text); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; } .nav__check:checked ~ .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__check:checked ~ .nav__burger span:nth-child(2) { opacity: 0; } .nav__check:checked ~ .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav__links, .nav__cta { order: 5; width: 100%; display: none; flex-direction: column; align-items: stretch; margin-left: 0; } .nav__links { gap: 0; margin: 10px 0 0; border-top: 1px solid var(--line); } .nav__links a { padding: 14px 2px; font-size: 16px; color: var(--text); border-bottom: 1px solid var(--line); } .nav__links a::after { display: none; } .nav__links a.active { color: var(--accent-ink); } .nav__cta { gap: 10px; margin: 14px 0 8px; } .nav__cta .btn { width: 100%; justify-content: center; } .nav__cta .theme-toggle { width: 100%; height: 44px; } .nav__check:checked ~ .nav__links { display: flex; } .nav__check:checked ~ .nav__cta { display: flex; } } /* ---------- hero (theme-aware aurora + grid) ---------- */ .hero { position: relative; overflow: hidden; padding: 104px 0 96px; background: var(--surf); color: var(--text); } .hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--hero-bg); background-size: 130% 130%, 120% 120%, 120% 120%, 100% 100%; } .hero__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(var(--grid-c) 1px, transparent 1px), linear-gradient(90deg, var(--grid-c) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(900px 560px at 50% 18%, #000 30%, transparent 78%); mask-image: radial-gradient(900px 560px at 50% 18%, #000 30%, transparent 78%); } .hero__rings { position: absolute; top: -200px; left: 50%; transform: translateX(-50%); width: 860px; opacity: .55; z-index: 0; } /* animated orbit system */ .hero__orbit { position: absolute; top: -210px; left: 50%; transform: translateX(-50%); width: 880px; z-index: 0; opacity: .8; pointer-events: none; } .orbit__ring { transform-box: view-box; transform-origin: 50% 50%; } .orbit__node { transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 6px rgba(98, 184, 143, .9)); } .orbit__node--copper { filter: drop-shadow(0 0 6px rgba(181, 111, 69, .9)); } .orbit__beam { stroke-dasharray: 5 16; } .orbit__core { transform-box: fill-box; transform-origin: center; } /* drifting spark field */ .hero__sparks { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .hero__sparks::before, .hero__sparks::after { content: ""; position: absolute; inset: -160px 0 0 0; background-image: radial-gradient(2px 2px at 12% 78%, rgba(98, 184, 143, .8), transparent 60%), radial-gradient(1.5px 1.5px at 28% 32%, rgba(62, 143, 104, .7), transparent 60%), radial-gradient(2px 2px at 46% 64%, rgba(98, 184, 143, .55), transparent 60%), radial-gradient(1.5px 1.5px at 63% 22%, rgba(62, 143, 104, .7), transparent 60%), radial-gradient(2px 2px at 78% 70%, rgba(98, 184, 143, .6), transparent 60%), radial-gradient(1.5px 1.5px at 91% 40%, rgba(62, 143, 104, .6), transparent 60%); background-size: 100% 100%; opacity: .35; } .hero__sparks::after { background-image: radial-gradient(1.5px 1.5px at 8% 24%, rgba(62, 143, 104, .6), transparent 60%), radial-gradient(2px 2px at 22% 86%, rgba(98, 184, 143, .5), transparent 60%), radial-gradient(1.5px 1.5px at 39% 12%, rgba(62, 143, 104, .55), transparent 60%), radial-gradient(2px 2px at 57% 48%, rgba(98, 184, 143, .45), transparent 60%), radial-gradient(1.5px 1.5px at 72% 90%, rgba(62, 143, 104, .5), transparent 60%), radial-gradient(2px 2px at 95% 16%, rgba(98, 184, 143, .5), transparent 60%); opacity: .25; } .hero__inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; text-align: center; } .hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.3rem); font-weight: 700; margin: 20px 0 0; } .hero .lead { font-size: clamp(1.06rem, 1.9vw, 1.26rem); color: var(--slate); margin: 22px auto 0; max-width: 660px; } .hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; } .hero__trust { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; font-size: 13.5px; } .hero__trust span { display: inline-flex; align-items: center; gap: 8px; color: var(--slate); background: var(--trust-bg); border: 1px solid var(--trust-line); padding: 8px 14px; border-radius: 999px; backdrop-filter: blur(6px); box-shadow: var(--shadow-sm); } .hero__trust .check { color: var(--accent-ink); } .page-hero { padding: 84px 0 64px; } .page-hero .hero__inner { max-width: 800px; } .page-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.3rem); margin-top: 16px; } /* ---------- console / engine (theme-aware panel) ---------- */ .console { position: relative; z-index: 1; text-align: left; max-width: 760px; margin: 56px auto 0; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 18px; box-shadow: var(--panel-shadow), inset 0 1px 0 var(--panel-inset); backdrop-filter: blur(10px); overflow: hidden; } .console--engine { max-width: 1000px; } .console__bar { position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--slate-400); text-transform: uppercase; } .console__bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; background: linear-gradient(100deg, transparent, var(--scan), transparent); } .console__bar .dots { display: inline-flex; gap: 6px; margin-right: 8px; } .console__bar .dots i { width: 9px; height: 9px; border-radius: 50%; display: block; } .console__bar .dots i:nth-child(1) { background: var(--line); } .console__bar .dots i:nth-child(2) { background: rgba(98, 184, 143, .45); } .console__bar .dots i:nth-child(3) { background: var(--green); } .console__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); font-weight: 600; } .console__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); } .console__body { padding: 20px 22px 24px; display: grid; gap: 13px; font-family: var(--font-mono); font-size: 13.5px; color: var(--slate); } .console__row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; min-width: 0; } .console__prompt { color: var(--accent-ink); font-weight: 700; } .console__user { color: var(--text); } .console__label { flex: none; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-400); width: 86px; } .console__chip { display: inline-flex; align-items: center; gap: 6px; background: var(--chip-bg); border: 1px solid var(--chip-line); color: var(--accent-ink); border-radius: 7px; padding: 2px 9px; font-size: 12.5px; } .console__chip--dim { background: transparent; border-color: var(--line); color: var(--slate); } .console__ok { color: var(--accent-ink); } .console__caret { display: inline-block; width: 8px; height: 15px; background: var(--green); vertical-align: -2px; } /* engine internals (SVG) */ .engine-wrap { padding: 18px 14px 6px; } .engine { width: 100%; height: auto; } .engine .node { fill: var(--node-fill); stroke: var(--node-stroke); stroke-width: 1; } .engine .node-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; fill: var(--text); font-weight: 500; } .engine .node-sub { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .14em; fill: var(--slate-400); } .engine .path-base { fill: none; stroke: var(--path); stroke-width: 1.4; } .engine .path-flow { fill: none; stroke: var(--flow); stroke-width: 1.4; stroke-dasharray: 3 14; opacity: .45; } .engine .core-ring { fill: none; stroke: var(--ringc); stroke-width: 1; stroke-dasharray: 4 7; transform-box: fill-box; transform-origin: center; } .engine .core-ring--copper { stroke: rgba(181, 111, 69, .55); } .engine .core-body { fill: var(--core-fill); stroke: var(--core-stroke); stroke-width: 1.2; } .engine .core-body--copper { stroke: var(--copper); } .engine .core-t1 { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .3em; fill: var(--slate); } .engine .core-t2 { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: .1em; fill: var(--text); } .engine .core-t3 { font-family: var(--font-mono); font-size: 8px; letter-spacing: .18em; fill: var(--accent-ink); } .engine .mini-t1 { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .26em; fill: var(--slate); } .engine .mini-t2 { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: .1em; fill: var(--text); } .engine .lane-sep { stroke: var(--lane-c); stroke-dasharray: 2 8; } .engine .lane-cap { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .2em; fill: var(--accent-ink); } .engine .lane-cap--copper { fill: var(--copper-text); } .engine .pulse { fill: var(--pulse); } .engine .pulse-copper { fill: var(--copper); } .engine .n-dot-mint { fill: var(--green-deep); } .engine .n-dot-soft { fill: var(--green); } .engine .n-dot-copper { fill: var(--copper); } /* Portrait engine variant — a purpose-built mobile diagram that stacks the three cores vertically and fits the viewport (no horizontal swipe). Hidden by default; a console opts in with .engine--has-portrait and the diagram is revealed at ≤760px (see the media query below). Fonts are bumped because it renders near 1:1 on a phone rather than downscaled like the wide SVG. */ .engine--mobile { display: none; } .engine--mobile .node-label { font-size: 13px; } .engine--mobile .node-sub { font-size: 9.5px; letter-spacing: .06em; } .engine--mobile .mini-t1 { font-size: 8px; letter-spacing: .14em; } .engine--mobile .mini-t2 { font-size: 15px; } /* live audit ledger */ .ledger { border-top: 1px dashed var(--panel-line); padding: 14px 20px 16px; font-family: var(--font-mono); font-size: 12px; display: flex; flex-direction: column; gap: 7px; min-height: 158px; } .lg-row { display: flex; gap: 14px; align-items: baseline; color: var(--slate-400); transition: color .8s ease, opacity .8s ease; } .lg-row.new { color: var(--lg-new); } .lg-time { flex: 0 0 auto; color: inherit; } .lg-task { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--slate); } .lg-prov { flex: 0 0 auto; color: inherit; } .lg-cr { flex: 0 0 auto; color: inherit; } .lg-ok { flex: 0 0 auto; color: var(--accent-ink); } .lg-row:nth-child(n+5) { opacity: .45; } @media (max-width: 640px) { .ledger { font-size: 11px; } .lg-prov { display: none; } } /* --- Mobile-friendly engine diagrams (PF-739) --------------------------- The wide engine SVGs (1040px viewBox, 8–11px labels) become unreadable when downscaled onto a phone. On ≤760px we show a readable text summary of the same routing AND keep the real diagram as a horizontally scrollable strip held at a legible width. Both are mobile-only — desktop is untouched (no min-width/overflow applies above 760px, so the split-column Business/Enterprise diagrams render exactly as before). */ .engine-legend { display: none; } .elg { border: 1px solid var(--card-line); border-radius: 12px; background: var(--card-bg); padding: 12px 13px; } .elg + .elg { margin-top: 10px; } .elg__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: .96rem; color: var(--text); } .elg__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; } .elg__dot--soft { background: var(--green); } .elg__dot--mint { background: var(--green-deep); } .elg__dot--copper { background: var(--copper); } .elg__tag { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-400); } .elg__flow { margin: 8px 0 0; font-size: .9rem; line-height: 1.5; color: var(--slate); } .elg__flow strong { color: var(--accent-ink); font-weight: 650; } .elg__note { margin: 6px 0 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-400); } .engine-legend__foot { margin: 12px 2px 0; text-align: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .07em; color: var(--accent-ink); } @media (max-width: 760px) { .console--engine .engine-legend { display: block; padding: 14px 14px 6px; } .console--engine .engine-legend::after { content: "Live diagram below — swipe to explore →"; display: block; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--panel-line); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-400); } .console--engine .engine-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .console--engine .engine-wrap .engine { min-width: 880px; } /* Opt-in portrait swap (index hero): show the purpose-built mobile diagram and hide the wide scroll-strip + its "swipe" hint. Scoped to .engine--has-portrait so the enterprise/business scroll diagrams keep the generic behavior above. */ .console--engine.engine--has-portrait .engine-legend::after { content: none; } .console--engine.engine--has-portrait .engine-wrap { overflow-x: visible; } .console--engine.engine--has-portrait .engine-wrap > .engine:not(.engine--mobile) { display: none; } .console--engine.engine--has-portrait .engine-wrap > .engine--mobile { display: block; min-width: 0; } } /* ---------- nested memory-layers visual ---------- */ .layers { border: 1px solid rgba(98, 184, 143, .35); border-radius: 20px; background: var(--chip-bg); padding: 18px; } .layers .layer { border: 1px dashed rgba(98, 184, 143, .4); border-radius: 15px; background: var(--card-bg); padding: 16px; margin-top: 12px; } .layers .layer .layer { background: var(--chip-bg); } .layers .layer .layer .layer { background: var(--card-bg); border-style: solid; border-color: var(--green); } .layer__tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-ink); } .layer__tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(98, 184, 143, .8); } .layer__note { display: block; font-size: .86rem; color: var(--slate); margin-top: 6px; } .layers__models { margin-top: 14px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--slate); text-align: center; } .layers__models b { color: var(--accent-ink); font-weight: 700; } /* ---------- sections ---------- */ section { padding: 92px 0; } .section--soft { background: var(--surf-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section--dark { position: relative; background: var(--alt-bg); color: var(--text); overflow: hidden; } .section--dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(900px 480px at 80% -10%, var(--alt-glow), transparent 60%); } .section--dark > .container { position: relative; } .section__head { max-width: 720px; margin: 0 auto 52px; text-align: center; } .section__head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: 14px 0 0; } .section__head p { color: var(--slate); margin-top: 16px; font-size: 1.06rem; } /* ---------- grids / cards ---------- */ .grid { display: grid; gap: 22px; } .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } } @media (max-width: 600px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } } .card { background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); min-width: 0; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .grid > *, .tiers > *, .packs > *, .split > *, .feature-band > * { min-width: 0; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow), 0 0 0 1px rgba(98, 184, 143, .18); border-color: var(--green); } .card h3 { font-size: 1.15rem; margin: 16px 0 8px; letter-spacing: 0; } .card p { color: var(--slate); font-size: .97rem; } .card-tag { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-ink); margin: 16px 0 -6px; } .chip { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--chip-bg); color: var(--accent-ink); border: 1px solid var(--chip-line); transition: transform .16s ease; } .chip svg { width: 23px; height: 23px; } .card:hover .chip { transform: scale(1.06) rotate(-3deg); } .chip--copper { background: var(--copper-chip-bg); border-color: var(--copper-chip-line); color: var(--copper-text); } /* ---------- audience profile cards ---------- */ .profile { display: flex; flex-direction: column; position: relative; } .profile__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .profile h3 { font-size: 1.34rem; margin-top: 16px; } .profile__for { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); margin-top: 4px; font-family: var(--font-mono); } .profile__for--copper { color: var(--copper-text); } .profile__desc { color: var(--slate); margin-top: 10px; font-size: .98rem; } .profile ul { margin-top: 18px; display: grid; gap: 11px; } .profile li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; } .profile__price { margin-top: 20px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; } .profile__price small { display: block; font-family: var(--font); font-weight: 500; color: var(--slate-400); font-size: .82rem; margin-top: 2px; } .profile__link { margin-top: 20px; color: var(--accent-ink); font-weight: 640; font-size: .95rem; display: inline-flex; gap: 6px; align-items: center; transition: gap .15s; } .profile__link:hover { gap: 10px; } .check { flex: none; width: 19px; height: 19px; color: var(--accent-ink); margin-top: 1px; } .tier--featured .check { color: var(--green); } /* ---------- pricing tiers ---------- */ .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; } .tiers--3 { max-width: 1020px; margin-left: auto; margin-right: auto; } @media (max-width: 980px) { .tiers, .tiers--3 { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; } } .tier { position: relative; background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--radius-lg); padding: 30px 26px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; height: 100%; } /* featured tier stays Forge Night in BOTH themes (intentional contrast card) */ .tier--featured { background: linear-gradient(180deg, var(--night-lift), var(--night)); border-color: rgba(98, 184, 143, .5); color: var(--d-text); box-shadow: var(--shadow-lg), 0 0 60px rgba(98, 184, 143, .14); } .tier--featured::before { content: "Most popular"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--green); color: #0C1410; font-size: 12px; font-weight: 700; letter-spacing: .03em; padding: 5px 14px; border-radius: 999px; white-space: nowrap; z-index: 2; } .tier--copper { border-top: 3px solid var(--copper); } /* "Coming soon" tier — muted ribbon; mirrors .tier--featured::before but low-emphasis (PF-696) */ .tier--soon { position: relative; } .tier--soon::before { content: "Coming soon"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--surf-soft); color: var(--slate); border: 1px solid var(--card-line); font-size: 12px; font-weight: 700; letter-spacing: .03em; padding: 4px 13px; border-radius: 999px; white-space: nowrap; z-index: 2; } .tier__name { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-ink); } .tier--featured .tier__name { color: var(--green); } .tier__for { color: var(--slate); font-size: .92rem; margin-top: 6px; min-height: 42px; } .tier--featured .tier__for { color: var(--d-muted); } .tier__price { display: flex; align-items: baseline; gap: 6px; margin: 20px 0 4px; } .tier__price .amt { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; letter-spacing: 0; } .tier--featured .tier__price .amt { color: #fff; } .tier__price .per { color: var(--slate); font-size: .92rem; font-weight: 560; } .tier--featured .tier__price .per { color: var(--d-muted); } .tier__note { font-size: .84rem; color: var(--slate-400); min-height: 18px; } .tier--featured .tier__note { color: var(--d-muted); } .tier .btn { margin-top: 22px; } .tier__list { margin-top: 22px; display: grid; gap: 11px; } .tier__list li { display: flex; gap: 9px; font-size: .92rem; align-items: flex-start; } .tier--featured .tier__list li { color: var(--d-text); } .tier__list .check { width: 17px; height: 17px; } .tier__sep { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-400); margin-top: 24px; font-family: var(--font-mono); } .tier--featured .tier__sep { color: var(--d-faint); } /* ghost button readability inside the always-dark featured tier */ .tier--featured .btn--ghost { background: rgba(255, 255, 255, .05); color: #fff; border-color: rgba(255, 255, 255, .2); } /* credit top-up packs */ .packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 880px; margin: 0 auto; } @media (max-width: 760px) { .packs { grid-template-columns: 1fr; max-width: 480px; } } .pack { background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 22px; text-align: center; box-shadow: var(--shadow-sm); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .pack:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: var(--shadow); } .pack__name { font-family: var(--font-mono); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-400); } .pack__credits { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin-top: 8px; } .pack__price { color: var(--accent-ink); font-weight: 650; margin-top: 4px; } .pack__note { color: var(--slate-400); font-size: .82rem; margin-top: 6px; } /* ---------- comparison table ---------- */ .compare-wrap { overflow-x: auto; border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); background: var(--card-bg); } table.compare { width: 100%; border-collapse: collapse; min-width: 760px; } .compare th, .compare td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); } .compare thead th { position: sticky; top: 0; background: var(--night); color: #fff; z-index: 2; font-size: .95rem; } .compare thead .plan { font-family: var(--font-display); font-weight: 700; } .compare thead .plan span { display: block; font-family: var(--font); font-size: .78rem; font-weight: 500; color: var(--d-muted); margin-top: 2px; } .compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; width: 170px; } .compare .group td { background: var(--surf-soft); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); font-family: var(--font-mono); } .compare .feat { color: var(--text); font-weight: 560; } .compare .feat small { display: block; color: var(--slate-400); font-weight: 400; font-size: .8rem; } .compare tbody tr:hover td { background: var(--row-hover); } .compare tbody tr.group:hover td { background: var(--surf-soft); } .compare .yes { color: var(--accent-ink); margin: 0 auto; } .compare .no { color: var(--slate-400); opacity: .55; margin: 0 auto; } .compare .val { font-weight: 640; font-size: .9rem; } .compare .featured-col { background: rgba(98, 184, 143, .07); } /* ---------- faq ---------- */ .faq { max-width: 800px; margin: 0 auto; display: grid; gap: 12px; } .faq details { border: 1px solid var(--card-line); border-radius: var(--radius); background: var(--card-bg); padding: 4px 22px; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; } .faq details[open] { border-color: var(--green); box-shadow: var(--shadow-sm), 0 0 0 1px rgba(98, 184, 143, .2); } .faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 640; font-size: 1.02rem; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .faq summary::-webkit-details-marker { display: none; } .faq summary .ico { flex: none; width: 20px; height: 20px; color: var(--accent-ink); transition: transform .2s; } .faq details[open] summary .ico { transform: rotate(45deg); } .faq details p { color: var(--slate); padding: 0 0 18px; font-size: .98rem; } /* ---------- cta band (theme-aware) ---------- */ .ctaband { position: relative; overflow: hidden; color: var(--text); background: var(--band-bg); } .ctaband .container { padding-top: 84px; padding-bottom: 84px; text-align: center; position: relative; z-index: 1; } .ctaband h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); } .ctaband p { color: var(--slate); margin: 16px auto 0; max-width: 560px; } .ctaband .hero__cta { margin-top: 30px; } .ctaband__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(var(--grid-c) 1px, transparent 1px), linear-gradient(90deg, var(--grid-c) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(640px 360px at 50% 30%, #000 25%, transparent 75%); mask-image: radial-gradient(640px 360px at 50% 30%, #000 25%, transparent 75%); } /* ---------- footer (theme-aware) ---------- */ .footer { background: var(--footer-bg); color: var(--slate); padding: 68px 0 38px; border-top: 1px solid var(--footer-line); } .footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; } @media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; row-gap: 36px; } } .footer .logo__word { color: var(--text); } .footer__about { color: var(--slate-400); font-size: .92rem; margin-top: 16px; max-width: 300px; } .footer h4 { color: var(--text); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; font-family: var(--font-mono); font-weight: 700; } .footer ul { display: grid; gap: 10px; } .footer a { color: var(--slate); font-size: .93rem; transition: color .15s; } .footer a:hover { color: var(--accent-ink); } .footer__bar { border-top: 1px solid var(--footer-line); margin-top: 48px; padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .86rem; color: var(--slate-400); } /* ---------- misc ---------- */ .section-link { color: var(--accent-ink); font-weight: 640; display: inline-flex; gap: 6px; align-items: center; } .split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 32px; } } .stat-row { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 28px; } .stat .n { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--text); letter-spacing: 0; } .stat .l { color: var(--slate); font-size: .9rem; } a:focus-visible, .btn:focus-visible, summary:focus-visible, label:focus-visible, button:focus-visible { outline: 3px solid rgba(98, 184, 143, .6); outline-offset: 2px; border-radius: 6px; } /* ---------- multi-page helpers ---------- */ .pill { display: inline-flex; gap: 8px; align-items: center; background: var(--card-bg); border: 1px solid var(--card-line); border-radius: 999px; padding: 7px 15px; font-size: 13px; font-weight: 600; color: var(--slate); box-shadow: var(--shadow-sm); } .steps { display: grid; gap: 16px; counter-reset: step; max-width: 720px; } .steps li { display: flex; gap: 16px; align-items: flex-start; } .steps li strong { display: block; margin-bottom: 2px; } .steps li span { color: var(--slate); font-size: .96rem; } .steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--chip-bg); color: var(--accent-ink); font-family: var(--font-display); font-weight: 700; font-size: .9rem; display: grid; place-items: center; border: 1px solid var(--chip-line); } .lead-list { display: grid; gap: 13px; margin-top: 22px; } .lead-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 1rem; } .lead-list .check { width: 21px; height: 21px; margin-top: 1px; } .feature-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 900px) { .feature-band { grid-template-columns: 1fr; } } /* ---------- long-form documents ---------- */ .doc { max-width: 768px; margin: 0 auto; } .doc > h2 { font-size: 1.24rem; margin: 38px 0 10px; } .doc > h2:first-child { margin-top: 0; } .doc > h3 { font-size: 1.05rem; margin: 26px 0 8px; } .doc p { color: var(--slate); font-size: 1rem; line-height: 1.7; margin: 0 0 15px; } .doc ul { list-style: disc; padding-left: 1.25em; margin: 0 0 16px; color: var(--slate); } .doc li { margin: 6px 0; line-height: 1.7; } .doc a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; font-weight: 560; } .doc strong { color: var(--text); font-weight: 680; } .doc__meta { color: var(--slate-400); font-size: .92rem; margin-top: 16px; } .doc__note { color: var(--slate-400); font-size: .9rem; margin-top: 18px; } .doc .callout { background: var(--callout-bg); border: 1px solid var(--callout-line); color: var(--callout-text); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 26px; font-size: .94rem; line-height: 1.6; } .doc .callout strong { color: var(--callout-text); } .doc-table { border: 1px solid var(--card-line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); margin: 4px 0; background: var(--card-bg); } .doc-table .row { display: grid; grid-template-columns: 1fr 1.9fr; gap: 18px; padding: 14px 18px; font-size: .96rem; } .doc-table .row + .row { border-top: 1px solid var(--line); } .doc-table .row.head { background: var(--surf-soft); font-weight: 700; color: var(--text); } .doc-table .row span:first-child { color: var(--text); font-weight: 560; } .doc-table .row span:last-child { color: var(--slate); } @media (max-width: 560px) { .doc-table .row { grid-template-columns: 1fr; gap: 4px; } } /* code blocks stay dark in both themes (terminal convention) */ pre { margin: 16px 0 0; background: var(--night-deep); color: #DCE8E0; border: 1px solid rgba(98, 184, 143, .25); border-radius: 12px; padding: 14px 16px; overflow-x: auto; max-width: 100%; } pre code { font-family: var(--font-mono); font-size: .86rem; } /* ---------- docs page (sticky TOC + long-form article) ---------- */ .docs { padding-top: 56px; } .docs__layout { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 56px; align-items: start; } @media (max-width: 900px) { .docs__layout { grid-template-columns: 1fr; gap: 0; } } .docs__toc { position: sticky; top: 90px; align-self: start; } @media (max-width: 900px) { .docs__toc { display: none; } } .docs__toc-title { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-400); margin: 0 0 14px; } .docs__toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; border-left: 1px solid var(--line); } .docs__toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--slate); font-size: .9rem; font-weight: 500; text-decoration: none; transition: color .15s ease, border-color .15s ease; } .docs__toc a:hover { color: var(--accent-ink); border-color: var(--green); } .docs__body { min-width: 0; max-width: 760px; } .docs__body > section { scroll-margin-top: 90px; } .docs__body > section + section { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--line); } .docs__body h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); letter-spacing: -.02em; margin: 0; } .docs__body h3 { font-size: 1.12rem; letter-spacing: -.01em; margin: 28px 0 0; } .docs__body p { color: var(--slate); margin: 12px 0 0; } .docs__body .docs__lead { font-size: 1.06rem; margin-top: 10px; } .docs__body ul:not(.lead-list):not(.steps) { color: var(--slate); margin: 12px 0 0; padding-left: 20px; display: grid; gap: 7px; } .docs__body ul:not(.lead-list):not(.steps) li::marker { color: var(--green); } .docs__body a { color: var(--accent-ink); font-weight: 560; text-decoration: none; } .docs__body a:hover { text-decoration: underline; } .docs__body code { font-family: var(--font-mono); font-size: .85em; background: var(--surf-soft); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--ink); } .docs__body pre code { background: none; border: 0; padding: 0; color: inherit; } .docs__note { margin-top: 18px; padding: 13px 16px; border-radius: var(--radius-sm); background: var(--surf-soft); border: 1px solid var(--line); border-left: 3px solid var(--green); } .docs__note p { margin: 0; font-size: .94rem; } .docs__note strong { color: var(--ink); } /* ---------- motion (reduced-motion safe) ---------- */ @keyframes reveal { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes orbitRev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } @keyframes gradShift { to { background-position: 200% center; } } @keyframes auroraDrift { 0% { background-position: 0% 0%, 0% 0%, 100% 0%, 0 0; } 100% { background-position: 60% 40%, 30% 60%, 60% 40%, 0 0; } } @keyframes caretBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } } @keyframes navShadow { to { box-shadow: 0 10px 36px rgba(0, 0, 0, .18); } } @keyframes nodePulse { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.55); opacity: 1; } } @keyframes corePulse { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.18); opacity: 1; } } @keyframes beamFlow { to { stroke-dashoffset: -210; } } @keyframes flowDash { to { stroke-dashoffset: -204; } } @keyframes sparkDrift { from { transform: translateY(0); } to { transform: translateY(140px); } } @keyframes scanSweep { 0% { left: -30%; } 55%, 100% { left: 110%; } } @keyframes ctaPulse { 0%, 100% { box-shadow: 0 8px 24px rgba(98, 184, 143, .30), 0 0 0 0 rgba(98, 184, 143, .35), inset 0 1px 0 rgba(255, 255, 255, .25); } 50% { box-shadow: 0 8px 28px rgba(98, 184, 143, .40), 0 0 0 12px rgba(98, 184, 143, 0), inset 0 1px 0 rgba(255, 255, 255, .25); } } .btn--primary:hover, .btn--light:hover { transform: translateY(-1px); } @media (prefers-reduced-motion: no-preference) { .gradient-text { animation: gradShift 8s ease-in-out infinite alternate; } .hero__bg { animation: auroraDrift 26s ease-in-out infinite alternate; } .hero__rings { transform-origin: 50% 50%; animation: orbitRev 90s linear infinite; } .orbit__ring--1 { animation: orbit 90s linear infinite; } .orbit__ring--2 { animation: orbitRev 65s linear infinite; } .orbit__ring--3 { animation: orbit 120s linear infinite; } .orbit__node { animation: nodePulse 3.4s ease-in-out infinite; } .orbit__node--d1 { animation-delay: .9s; } .orbit__node--d2 { animation-delay: 1.7s; } .orbit__node--d3 { animation-delay: 2.5s; } .orbit__core { animation: corePulse 5s ease-in-out infinite; } .orbit__beam { animation: beamFlow 7s linear infinite; } .orbit__beam--d1 { animation-delay: 1.2s; } .orbit__beam--d2 { animation-delay: 2.6s; } .orbit__beam--d3 { animation-delay: 4s; } .hero__sparks::before { animation: sparkDrift 30s linear infinite alternate; } .hero__sparks::after { animation: sparkDrift 44s linear infinite alternate-reverse; } .console__bar::after { animation: scanSweep 5.5s ease-in-out infinite; } .console__caret { animation: caretBlink 1.1s steps(1) infinite; } .console__live::before { animation: caretBlink 2.2s ease-in-out infinite; } .engine .path-flow { animation: flowDash 6s linear infinite; } .engine .core-ring { animation: orbit 26s linear infinite; } .hero .btn--primary.btn--lg, .ctaband .btn--primary.btn--lg { animation: ctaPulse 3.4s ease-in-out infinite; } .hero__inner > * { animation: heroIn .7s cubic-bezier(.2, .7, .2, 1) both; } .hero__inner > *:nth-child(2) { animation-delay: .08s; } .hero__inner > *:nth-child(3) { animation-delay: .16s; } .hero__inner > *:nth-child(4) { animation-delay: .24s; } .hero__inner > *:nth-child(5) { animation-delay: .32s; } .hero__inner > *:nth-child(6) { animation-delay: .4s; } @supports (animation-timeline: view()) { .section__head, .grid > *, .tiers > *, .packs > *, .split > *, .steps li, .faq details, .compare-wrap, .stat-row { animation: reveal linear both; animation-timeline: view(); animation-range: entry 2% cover 24%; } } @supports (animation-timeline: scroll()) { .nav { animation: navShadow linear both; animation-timeline: scroll(root); animation-range: 0 90px; } } } /* ===================== Product Updates / Changelog ===================== */ /* Customer-facing changelog + roadmap. Pure CSS + a little vanilla JS for tabs/filters/search; with JS disabled the panels stack and stay readable. */ .updates { padding-top: 44px; } .updates .container { max-width: 940px; } /* tabs (hidden when JS is off — panels stack instead) */ .tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 26px; } .no-js .tabs { display: none; } .tab { appearance: none; font: inherit; cursor: pointer; font-weight: 640; font-size: 15px; color: var(--slate); background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 12px 16px; margin-bottom: -1px; border-radius: 10px 10px 0 0; transition: color .15s ease, border-color .15s ease, background .15s ease; } .tab:hover { color: var(--text); background: var(--row-hover); } .tab.is-active { color: var(--accent-ink); border-bottom-color: var(--green); } .tab:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } /* toolbar: search + filter chips */ .updates__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-bottom: 28px; } .no-js .updates__toolbar, .updates__toolbar[hidden] { display: none; } .updates__search { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; background: var(--card-bg); border: 1px solid var(--card-line); border-radius: 12px; padding: 0 14px; min-width: 240px; box-shadow: var(--shadow-sm); color: var(--slate-400); } .updates__search svg { width: 17px; height: 17px; flex: 0 0 auto; } .updates__search input { flex: 1; font: inherit; font-size: 14.5px; color: var(--text); background: transparent; border: 0; outline: 0; padding: 11px 0; } .updates__search input::placeholder { color: var(--slate-400); } .updates__search:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(98, 184, 143, .16); } .filters { display: flex; flex-wrap: wrap; gap: 8px; } .filter { appearance: none; font: inherit; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--slate); background: var(--card-bg); border: 1px solid var(--card-line); border-radius: 999px; padding: 7px 14px; box-shadow: var(--shadow-sm); transition: color .14s ease, border-color .14s ease, background .14s ease, transform .14s ease; } .filter:hover { border-color: var(--green); color: var(--accent-ink); transform: translateY(-1px); } .filter.is-active { color: #0C1410; background: var(--green); border-color: var(--green); box-shadow: 0 6px 16px rgba(98, 184, 143, .26); } .filter:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } /* panels */ .tabpanel[hidden] { display: none; } /* with JS off, .no-js stays on : reveal every panel so all content is readable without tabs (JS users never see this — .no-js is removed pre-paint). */ .no-js .tabpanel[hidden] { display: block !important; } .updates__h { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 8px; } .updates__note { color: var(--slate); margin: 0 0 26px; max-width: 660px; font-size: .98rem; line-height: 1.6; } /* changelog list + cards */ .updates__list { display: flex; flex-direction: column; gap: 16px; } .update { position: relative; background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .update:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--green); } .update[hidden], .updates__soon .update[hidden] { display: none !important; } .update__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 12px; } .update__date { margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-400); } .update__title { font-size: 1.18rem; margin: 0 0 8px; letter-spacing: -.01em; } .update__body { color: var(--slate); font-size: .98rem; margin: 0; line-height: 1.62; } .update__tags { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; margin: 14px 0 0; } .update__tags li { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); background: var(--surf-soft); border: 1px solid var(--card-line); border-radius: 6px; padding: 3px 8px; } /* coming-soon cards stretch to equal height with CTA pinned to the bottom */ .updates__soon .update { height: 100%; display: flex; flex-direction: column; } .update--soon .update__body { flex: 1; } .update--soon .update__cta { margin-top: 18px; } .update__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } /* plan badge: outline pill with a plan-colored dot (distinct from type badges) */ .badge--plan { background: transparent; color: var(--slate); border-color: var(--card-line); } .badge--plan .dot { background: var(--green); } .badge--plan.p-biz .dot { background: var(--slate-400); } .badge--plan.p-ent .dot { background: var(--copper); } /* extra badge colors for changelog types / roadmap statuses */ .badge--amber { color: var(--callout-text); background: var(--callout-bg); border-color: var(--callout-line); } .badge--solid { color: #0C1410; background: var(--green); border-color: var(--green); } /* small + link buttons */ .btn--sm { padding: 9px 16px; font-size: 14px; border-radius: 11px; } .btn--link { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--accent-ink); background: transparent; border: 0; padding: 0; text-decoration: none; border-bottom: 1px solid transparent; } .btn--link:hover { border-bottom-color: currentColor; } /* empty state */ .updates__empty { color: var(--slate); font-size: .96rem; padding: 30px 4px; text-align: center; } .updates__empty[hidden] { display: none; } /* feature requests */ .requests { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; } .requests__lead p { color: var(--slate); font-size: 1.02rem; line-height: 1.7; } .requests__lead .update__cta { margin: 22px 0 14px; } .requests__fine { font-size: .88rem; color: var(--slate-400); } .requests__cloud { display: flex; flex-wrap: wrap; gap: 10px; } @media (max-width: 760px) { .requests { grid-template-columns: 1fr; gap: 26px; } .update__date { margin-left: 0; width: 100%; margin-top: 2px; } .updates__search { min-width: 0; width: 100%; } }