/* ═══════════════════════════════════════════════════════════ TERMCAST — "Liquid glass" design system Light + dark, auto via prefers-color-scheme, overridable with [data-theme] on . Rule of the file: every colour is a token defined on bare :root (the light palette). The dark block redefines the SAME tokens and nothing else, so a component is written once and is correct in both themes. Never give a colour its only definition inside a media query. ═══════════════════════════════════════════════════════════ */ :root { color-scheme: light dark; /* ── Brand constants (do not flip with theme) ── */ --lime: #b9f06d; --lime-deep: #4c7d14; /* ── Type ── */ --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'SF Pro Display', ui-sans-serif, system-ui, 'Segoe UI', sans-serif; --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; /* Fluid scale — every step interpolates with the viewport, so the page reflows continuously instead of snapping at breakpoints. */ --text-caption: clamp(0.75rem, 0.72rem + 0.14vw, 0.8125rem); --text-mono: clamp(0.75rem, 0.71rem + 0.16vw, 0.8125rem); --text-body: clamp(0.9375rem, 0.89rem + 0.24vw, 1.0625rem); --text-body-lg: clamp(1.0625rem, 0.97rem + 0.46vw, 1.3125rem); --text-subheading: clamp(1.1875rem, 1.06rem + 0.62vw, 1.5rem); --text-heading-sm: clamp(1.875rem, 1.42rem + 2.05vw, 3rem); --text-heading-lg: clamp(2.5rem, 1.8rem + 3.2vw, 4.25rem); --text-display: clamp(2.75rem, 1.6rem + 5.1vw, 6rem); /* ── Rhythm ── */ --page-max: 1180px; --gutter: clamp(1.25rem, 4vw, 3rem); --section-gap: clamp(4.5rem, 9vw, 8.5rem); --card-pad: clamp(1.35rem, 3vw, 2.25rem); --radius-btn: 12px; --radius-sm: 14px; --radius-card: 22px; --radius-lg: 30px; --radius-pill: 9999px; /* ── Motion ── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur: 0.6s; /* ── LIGHT PALETTE (the default) ── */ --bg: #eef0f6; --bg-deep: #e5e8f1; --bg-band: #f6f7fb; --ink: #0c0f16; --ink-2: #4a5162; --ink-3: #5f6675; --accent: var(--lime-deep); --accent-dot: #6aa32a; --accent-line: rgba(76, 125, 20, 0.5); --accent-wash: rgba(122, 190, 60, 0.13); /* Glass surfaces — the whole vocabulary is these five values. */ --glass: rgba(255, 255, 255, 0.58); --glass-strong: rgba(255, 255, 255, 0.80); --glass-quiet: rgba(255, 255, 255, 0.34); --glass-brd: rgba(255, 255, 255, 0.85); --glass-brd-2: rgba(12, 15, 22, 0.08); --blur: saturate(180%) blur(20px); --blur-lg: saturate(200%) blur(40px); --hair: rgba(12, 15, 22, 0.10); --hair-soft: rgba(12, 15, 22, 0.06); --shadow-1: 0 1px 2px rgba(12,15,22,.05), 0 10px 26px -14px rgba(12,15,22,.20); --shadow-2: 0 2px 8px rgba(12,15,22,.06), 0 34px 64px -34px rgba(12,15,22,.34); --shadow-lift: 0 3px 10px rgba(12,15,22,.07), 0 44px 80px -40px rgba(12,15,22,.42); /* Ambient light behind the glass — blue/violet in daylight. */ --bloom-a: rgba(88, 134, 255, 0.34); --bloom-b: rgba(170, 122, 255, 0.26); --bloom-c: rgba(112, 214, 148, 0.26); /* Terminal chrome */ --term-bg: rgba(255, 255, 255, 0.74); --term-fg: #0c0f16; --term-dim: #6b7280; --term-brd: rgba(255, 255, 255, 0.9); /* Inline code / command blocks */ --code-bg: rgba(12, 15, 22, 0.045); --code-fg: #16202b; --code-brd: rgba(12, 15, 22, 0.09); --sheen: rgba(255, 255, 255, 0.75); --promo-h: 42px; --nav-h: 64px; } :root.promo-dismissed { --promo-h: 0px; } /* ── DARK PALETTE ── redefines the same tokens, nothing else. Guarded with :not([data-theme="light"]) so the manual toggle wins over the OS in both directions. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #05070a; --bg-deep: #030508; --bg-band: #0a0d12; --ink: #f0f3f7; --ink-2: #9aa3b2; --ink-3: #7b8492; --accent: var(--lime); --accent-dot: var(--lime); --accent-line: rgba(185, 240, 109, 0.55); --accent-wash: rgba(185, 240, 109, 0.10); --glass: rgba(255, 255, 255, 0.055); --glass-strong: rgba(255, 255, 255, 0.095); --glass-quiet: rgba(255, 255, 255, 0.03); --glass-brd: rgba(255, 255, 255, 0.12); --glass-brd-2: rgba(255, 255, 255, 0.07); --hair: rgba(255, 255, 255, 0.10); --hair-soft: rgba(255, 255, 255, 0.055); --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 10px 26px -14px rgba(0,0,0,.7); --shadow-2: 0 2px 8px rgba(0,0,0,.5), 0 34px 64px -34px rgba(0,0,0,.9); --shadow-lift: 0 3px 10px rgba(0,0,0,.55), 0 44px 80px -40px rgba(0,0,0,.95); --bloom-a: rgba(163, 245, 99, 0.30); --bloom-b: rgba(52, 205, 220, 0.24); --bloom-c: rgba(122, 112, 255, 0.26); --term-bg: rgba(9, 12, 16, 0.66); --term-fg: #e9edf2; --term-dim: #8b95a3; --term-brd: rgba(255, 255, 255, 0.11); --code-bg: rgba(255, 255, 255, 0.045); --code-fg: #d8dee6; --code-brd: rgba(255, 255, 255, 0.09); --sheen: rgba(255, 255, 255, 0.18); } } :root[data-theme="dark"] { --bg: #05070a; --bg-deep: #030508; --bg-band: #0a0d12; --ink: #f0f3f7; --ink-2: #9aa3b2; --ink-3: #7b8492; --accent: var(--lime); --accent-dot: var(--lime); --accent-line: rgba(185, 240, 109, 0.55); --accent-wash: rgba(185, 240, 109, 0.10); --glass: rgba(255, 255, 255, 0.055); --glass-strong: rgba(255, 255, 255, 0.095); --glass-quiet: rgba(255, 255, 255, 0.03); --glass-brd: rgba(255, 255, 255, 0.12); --glass-brd-2: rgba(255, 255, 255, 0.07); --hair: rgba(255, 255, 255, 0.10); --hair-soft: rgba(255, 255, 255, 0.055); --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 10px 26px -14px rgba(0,0,0,.7); --shadow-2: 0 2px 8px rgba(0,0,0,.5), 0 34px 64px -34px rgba(0,0,0,.9); --shadow-lift: 0 3px 10px rgba(0,0,0,.55), 0 44px 80px -40px rgba(0,0,0,.95); --bloom-a: rgba(163, 245, 99, 0.30); --bloom-b: rgba(52, 205, 220, 0.24); --bloom-c: rgba(122, 112, 255, 0.26); --term-bg: rgba(9, 12, 16, 0.66); --term-fg: #e9edf2; --term-dim: #8b95a3; --term-brd: rgba(255, 255, 255, 0.11); --code-bg: rgba(255, 255, 255, 0.045); --code-fg: #d8dee6; --code-brd: rgba(255, 255, 255, 0.09); --sheen: rgba(255, 255, 255, 0.18); } /* ═══════════════════════════════════════════ RESET & BASE ═══════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; background: var(--bg); transition: background 0.45s var(--ease-out); /* Every anchor target clears the fixed promo bar + nav. Without this `scrollIntoView` parks the heading underneath the chrome. */ scroll-padding-top: calc(var(--promo-h) + var(--nav-h) + 18px); } body { font-family: var(--font-sans); font-weight: 400; /* Transparent on purpose. The aurora below is a negative-z child of the root stacking context, which paints after html's background but BEFORE body's — an opaque body here hides it completely. */ background: transparent; color: var(--ink); line-height: 1.35; letter-spacing: -0.011em; overflow-x: hidden; transition: background 0.45s var(--ease-out), color 0.45s var(--ease-out); } /* The aurora. One fixed layer behind everything; the glass surfaces above it are what make it read as depth rather than wallpaper. */ body::before { content: ''; position: fixed; inset: -20vh -10vw; z-index: -2; pointer-events: none; background: radial-gradient(42vw 42vw at 12% 8%, var(--bloom-a), transparent 62%), radial-gradient(38vw 38vw at 88% 22%, var(--bloom-b), transparent 62%), radial-gradient(46vw 46vw at 62% 92%, var(--bloom-c), transparent 62%), radial-gradient(36vw 36vw at 8% 78%, var(--bloom-b), transparent 60%); filter: blur(30px); opacity: 0.9; animation: aurora 34s ease-in-out infinite alternate; transition: background 0.6s var(--ease-out); } /* A whisper of grain kills the banding that big soft gradients get on 8-bit panels. */ body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } @keyframes aurora { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-2.5%, 2%, 0) scale(1.08); } 100% { transform: translate3d(2%, -2.5%, 0) scale(1.04); } } ::selection { background: var(--accent-wash); color: var(--ink); } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--accent-dot); outline-offset: 3px; border-radius: 6px; } /* Chrome/Safari scrollbars, tuned to the theme instead of the OS default. */ * { scrollbar-width: thin; scrollbar-color: var(--hair) transparent; } *::-webkit-scrollbar { height: 8px; width: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 99px; } *::-webkit-scrollbar-thumb:hover { background: var(--ink-3); } /* ═══════════════════════════════════════════ GLASS PRIMITIVE Everything with a surface composes from here. ═══════════════════════════════════════════ */ .glass, .demo-card, .feature, .check-card, .price-card, .platform-box, .install-panel, .mesh-benefit, .crypto-item, .mobile-cta-reason, .architecture, .mesh-diagram-wrap, .terminal-window, .phone-float, .install-ref, .install-faq, .compare-scroll { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-brd); box-shadow: var(--shadow-1); } /* The top-edge highlight is what sells "glass" rather than "translucent rectangle" — a 1px specular line where the light would catch. */ .demo-card, .feature, .check-card, .price-card, .platform-box, .install-panel, .mesh-benefit, .crypto-item, .mobile-cta-reason, .architecture, .mesh-diagram-wrap, .terminal-window { position: relative; } .demo-card::before, .check-card::before, .price-card::before, .mesh-benefit::before, .crypto-item::before, .mobile-cta-reason::before, .architecture::before, .mesh-diagram-wrap::before, .terminal-window::before, .install-panel::before, .platform-box::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--sheen) 22%, var(--sheen) 78%, transparent); pointer-events: none; border-radius: inherit; } /* ═══════════════════════════════════════════ SCROLL REVEALS ═══════════════════════════════════════════ */ .reveal { opacity: 0; transform: translateY(22px) scale(0.995); filter: blur(6px); transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out), filter 0.85s var(--ease-out); will-change: opacity, transform; } .reveal.visible { opacity: 1; transform: none; filter: none; will-change: auto; } .reveal-delay-1 { transition-delay: 0.08s; } .reveal-delay-2 { transition-delay: 0.16s; } .reveal-delay-3 { transition-delay: 0.24s; } .reveal-delay-4 { transition-delay: 0.32s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; filter: none; transition: none; } body::before { animation: none; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ═══════════════════════════════════════════ SHARED TYPE ELEMENTS ═══════════════════════════════════════════ */ .container { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); } .sec-counter { display: inline-flex; align-items: center; padding: 5px 15px; border-radius: var(--radius-pill); background: var(--glass-quiet); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-brd-2); font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.5rem; } .sec-counter.dark, .sec-counter.light { color: var(--ink-3); } .sec-headline { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-heading-sm); line-height: 1.06; letter-spacing: -0.032em; color: var(--ink); max-width: 18ch; margin-top: 1.25rem; text-wrap: balance; } .sec-sub { font-size: var(--text-body-lg); line-height: 1.45; letter-spacing: -0.014em; color: var(--ink-2); max-width: 58ch; margin-top: 1.25rem; text-wrap: pretty; } /* .on-light / .on-dark were band modifiers in the old flat system. The theme now decides contrast, so they resolve to the same tokens and stay in the markup purely so nothing has to be re-tagged. */ .on-light .sec-sub, .on-dark .sec-sub { color: var(--ink-2); } .on-light .sec-headline, .on-dark .sec-headline { color: var(--ink); } .tag { display: inline-flex; align-items: center; gap: 9px; padding: 6px 15px 6px 12px; border-radius: var(--radius-pill); background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-brd); box-shadow: var(--shadow-1); font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink-2); } .tag.on-dark, .tag.on-light { color: var(--ink-2); } .tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-dot); flex-shrink: 0; box-shadow: 0 0 0 3px var(--accent-wash); } /* ── Buttons ── */ .arrow-btn { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: none; border-radius: 50%; background: var(--ink); color: var(--bg); cursor: pointer; box-shadow: var(--shadow-1); transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-out); } .arrow-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: var(--shadow-2); } .arrow-btn:active { transform: translateY(0) scale(0.97); } .arrow-btn svg { width: 16px; height: 16px; } .btn-fill, .btn-ghost { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 22px; border-radius: var(--radius-pill); font-family: var(--font-sans); font-weight: 500; font-size: var(--text-body); letter-spacing: -0.012em; text-transform: none; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-out), background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out); } .btn-fill { border: 1px solid transparent; background: var(--ink); color: var(--bg); box-shadow: var(--shadow-1); } /* Specular sweep on hover — the one flourish the primary CTA gets. */ .btn-fill::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 62%); transform: translateX(-120%); transition: transform 0.7s var(--ease-out); } .btn-fill:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } .btn-fill:hover::after { transform: translateX(120%); } .btn-fill:active { transform: translateY(0) scale(0.985); } .btn-fill.on-dark, .btn-fill.on-light { background: var(--ink); color: var(--bg); } .btn-ghost { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-brd); color: var(--ink); box-shadow: var(--shadow-1); } .btn-ghost:hover { transform: translateY(-2px); background: var(--glass-strong); box-shadow: var(--shadow-2); } .btn-ghost:active { transform: translateY(0) scale(0.985); } .btn-ghost.on-light, .btn-ghost.on-dark { color: var(--ink); } .hr { border: none; border-top: 1px solid var(--hair); } .hr-light { border: none; border-top: 1px solid var(--hair-soft); } /* ═══════════════════════════════════════════ PROMO BAR Height is auto, not a fixed 42px: the old bar clipped its own wrapped text on narrow phones because overflow was hidden on a locked height. JS measures the real height into --promo-h. ═══════════════════════════════════════════ */ .promo-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 120; min-height: var(--promo-h); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; padding: 9px 46px; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur-lg); backdrop-filter: var(--blur-lg); border-bottom: 1px solid var(--hair); font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: -0.01em; color: var(--ink-2); transition: transform 0.45s var(--ease-out), opacity 0.35s var(--ease-out); } :root.promo-dismissed .promo-bar { transform: translateY(-100%); opacity: 0; pointer-events: none; } .promo-bar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-dot); flex-shrink: 0; box-shadow: 0 0 0 3px var(--accent-wash); animation: pulse-dot 2.4s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.85); } } .promo-bar__text { text-align: center; line-height: 1.4; } .promo-bar__text strong { font-weight: 600; color: var(--ink); } .promo-bar__count { color: var(--accent); } .promo-bar__cta { flex-shrink: 0; color: var(--ink); padding: 3px 13px; border: 1px solid var(--glass-brd-2); border-radius: var(--radius-pill); background: var(--glass); transition: border-color 0.25s, color 0.25s, transform 0.25s var(--ease-spring); } .promo-bar__cta:hover { border-color: var(--accent-line); color: var(--accent); transform: translateY(-1px); } .promo-bar__close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; border: none; border-radius: 50%; background: transparent; color: var(--ink-3); font-size: 1.05rem; line-height: 1; cursor: pointer; transition: color 0.2s, background 0.2s; } .promo-bar__close:hover { color: var(--ink); background: var(--glass-quiet); } @media (max-width: 640px) { .promo-bar { padding: 8px 42px; font-size: 11.5px; } .promo-bar__cta { display: none; } } /* ═══════════════════════════════════════════ NAVIGATION — floating glass pill ═══════════════════════════════════════════ */ .nav { position: fixed; top: var(--promo-h); left: 0; right: 0; z-index: 100; padding: 10px var(--gutter) 0; transition: top 0.4s var(--ease-out), padding 0.4s var(--ease-out); } .nav-inner { max-width: var(--page-max); margin: 0 auto; display: flex; align-items: center; gap: clamp(0.5rem, 1.6vw, 1.25rem); height: var(--nav-h); padding: 0 8px 0 18px; border-radius: var(--radius-pill); background: transparent; border: 1px solid transparent; transition: background 0.45s var(--ease-out), border-color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); } /* The pill only materialises once you leave the hero — at the top of the page the nav floats bare over the aurora. */ .nav.scrolled .nav-inner { background: var(--glass-strong); -webkit-backdrop-filter: var(--blur-lg); backdrop-filter: var(--blur-lg); border-color: var(--glass-brd); box-shadow: var(--shadow-2); } .nav-logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; font-family: var(--font-sans); font-weight: 600; font-size: 15px; letter-spacing: -0.02em; color: var(--ink); } .nav-logo .logo-mark { width: 26px; height: 26px; flex-shrink: 0; } .nav-logo .logo-mark .lm-frame { stroke: var(--ink-3); } .nav-logo .logo-mark .lm-line-a { stroke: var(--ink); } .nav-logo .logo-mark .lm-line-b { stroke: var(--ink-3); } .nav-logo .logo-mark .lm-dot { fill: var(--accent-dot); } .nav-links { display: flex; align-items: center; gap: clamp(0.25rem, 1.1vw, 0.6rem); list-style: none; margin-left: auto; } .nav-links > li { display: flex; } .nav-links a { position: relative; display: inline-flex; align-items: center; padding: 8px 12px; border-radius: var(--radius-pill); font-family: var(--font-sans); font-weight: 500; font-size: 14px; letter-spacing: -0.012em; color: var(--ink-2); white-space: nowrap; transition: color 0.25s, background 0.25s; } .nav-links a:hover { color: var(--ink); background: var(--glass-quiet); } /* Scroll-spy state. The old markup hard-coded .active on the first item and never moved it; JS now drives it from the section in view. */ .nav-links li.active > a:not(.nav-ghost) { color: var(--ink); background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-brd-2); } .nav-sep { width: 1px; height: 22px; background: var(--hair); margin: 0 2px; flex-shrink: 0; } .nav-ghost { display: inline-flex; align-items: center; padding: 9px 18px !important; border-radius: var(--radius-pill); background: var(--ink); color: var(--bg) !important; font-weight: 600 !important; box-shadow: var(--shadow-1); transition: transform 0.3s var(--ease-spring), box-shadow 0.3s; } .nav-ghost:hover { background: var(--ink) !important; color: var(--bg) !important; transform: translateY(-1px); box-shadow: var(--shadow-2); } .nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: var(--ink-2); transition: color 0.2s, background 0.2s, transform 0.3s var(--ease-spring); } .nav-icon:hover { color: var(--ink); background: var(--glass-quiet); transform: translateY(-1px); } .nav-icon svg { width: 18px; height: 18px; } /* ── Theme toggle ── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--glass-brd-2); border-radius: 50%; background: var(--glass-quiet); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: var(--ink-2); cursor: pointer; transition: color 0.2s, background 0.2s, transform 0.45s var(--ease-spring); } .theme-toggle:hover { color: var(--ink); background: var(--glass); } .theme-toggle:active { transform: scale(0.92); } .theme-toggle svg { width: 16px; height: 16px; } /* Only one of the two glyphs is ever painted; which one depends on the resolved theme, so it is driven by the same guards as the palette. */ .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; } } :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; } :root[data-theme="light"] .theme-toggle .icon-sun { display: block; } :root[data-theme="light"] .theme-toggle .icon-moon { display: none; } /* ── Mobile nav ── */ /* .nav-links carries the margin-left:auto that eats the slack after the logo, so on desktop the actions cluster just trails it. Once the links collapse into the sheet, the auto moves here. */ .nav-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: 4px; } .nav-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-brd); border-radius: 50%; color: var(--ink); cursor: pointer; transition: background 0.2s, transform 0.3s var(--ease-spring); } .nav-toggle:active { transform: scale(0.94); } /* 1080px, not 900px: with eight links plus the icon cluster the old breakpoint left the bar overflowing its own pill for ~180px of width. */ @media (max-width: 1080px) { .nav-toggle { display: inline-flex; } .nav-links { display: none; margin-left: 0; } .nav-actions { margin-left: auto; } .nav-links.open { display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: absolute; top: calc(var(--nav-h) + 14px); left: var(--gutter); right: var(--gutter); max-height: calc(100dvh - var(--promo-h) - var(--nav-h) - 40px); overflow-y: auto; padding: 12px; border-radius: var(--radius-lg); background: var(--glass-strong); -webkit-backdrop-filter: var(--blur-lg); backdrop-filter: var(--blur-lg); border: 1px solid var(--glass-brd); box-shadow: var(--shadow-lift); animation: menuIn 0.35s var(--ease-out); } @keyframes menuIn { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: none; } } .nav-links.open > li { width: 100%; } .nav-links.open a { width: 100%; padding: 12px 14px; font-size: 15px; border-radius: var(--radius-sm); } .nav-links.open .nav-ghost { justify-content: center; margin-top: 6px; } .nav-links.open .nav-sep { display: none; } /* The icon row folds into one line instead of three stacked rows. */ .nav-links.open .nav-icon-group { justify-content: flex-start; padding: 6px 8px 0; } } .nav-icon-group { display: flex; align-items: center; gap: 2px; } /* ═══════════════════════════════════════════ HERO ═══════════════════════════════════════════ */ .hero { position: relative; /* svh, not vh — on mobile Safari 100vh is the URL-bar-collapsed height, so the old value pushed the CTA below the fold. */ min-height: 100svh; display: flex; align-items: center; padding: calc(var(--promo-h) + var(--nav-h) + clamp(2.5rem, 7vh, 5rem)) var(--gutter) clamp(3.5rem, 8vh, 6rem); } .hero-inner { max-width: var(--page-max); margin: 0 auto; width: 100%; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .hero-text { max-width: 620px; min-width: 0; } .hero h1 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-display); line-height: 0.98; letter-spacing: -0.042em; color: var(--ink); margin: 1.5rem 0 0; text-wrap: balance; } /* The gradient word. Painted with the same bloom colours as the aurora so the headline reads as lit by it. */ .hero h1 .grad { background: linear-gradient(105deg, var(--ink) 4%, var(--accent-dot) 44%, var(--ink) 92%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: gradSlide 9s ease-in-out infinite alternate; } @keyframes gradSlide { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } .hero-sub { font-size: var(--text-body-lg); line-height: 1.5; letter-spacing: -0.014em; color: var(--ink-2); margin: 1.5rem 0 2.25rem; max-width: 46ch; text-wrap: pretty; } .hero-sub strong { color: var(--ink); font-weight: 600; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .hero-trust { display: flex; flex-wrap: wrap; gap: 0.55rem 1.15rem; margin-top: 2.25rem; max-width: 44ch; } .hero-trust-item { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: -0.01em; color: var(--ink-3); } .hero-trust-item .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-dot); box-shadow: 0 0 0 3px var(--accent-wash); } /* ── Hero visual ── */ .hero-visual { position: relative; min-width: 0; display: flex; justify-content: flex-end; /* The phone card hangs past the terminal's corner; the old rule relied on .hero{overflow:hidden}, which cropped it instead. */ padding: 0 34px 34px 0; perspective: 1400px; } .terminal-window { width: 100%; max-width: 520px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); transform: rotateY(-4deg) rotateX(2deg); transform-style: preserve-3d; transition: transform 0.9s var(--ease-out); } .hero-visual:hover .terminal-window { transform: rotateY(0deg) rotateX(0deg); } @media (max-width: 900px) { .terminal-window { transform: none; } } .terminal-titlebar { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--hair-soft); background: var(--glass-quiet); } .terminal-dots { display: flex; gap: 7px; } .terminal-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); opacity: 0.45; } .terminal-dot:nth-child(1) { background: #ff5f57; opacity: 0.9; } .terminal-dot:nth-child(2) { background: #febc2e; opacity: 0.9; } .terminal-dot:nth-child(3) { background: #28c840; opacity: 0.9; } .terminal-title { flex: 1; text-align: center; font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: -0.01em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .terminal-live { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: -0.01em; color: var(--ink-3); } .terminal-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-dot); animation: pulse-dot 2.4s ease-in-out infinite; } .terminal-body { text-align: left; padding: 20px 22px; background: var(--term-bg); font-family: var(--font-mono); font-size: clamp(11px, 0.55vw + 8.5px, 13px); line-height: 1.75; /* Sized to the finished script so the hero does not reflow while the typing engine appends lines. */ min-height: 340px; color: var(--term-fg); } @media (max-width: 900px) { .terminal-body { min-height: 300px; } } .t-prompt { color: var(--ink-3); } .t-cmd { color: var(--term-fg); } .t-url { color: var(--accent); } .t-dim { color: var(--term-dim); } .t-success { color: var(--accent); font-weight: 600; } .t-green { color: var(--accent); } .t-arrow { color: var(--ink-3); } .t-qr { color: var(--term-fg); } .t-line { opacity: 0; transform: translateY(3px); transition: opacity 0.25s, transform 0.25s; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.35em; } .t-line.visible { opacity: 1; transform: none; } .t-cursor { display: inline-block; width: 7px; height: 1.1em; background: var(--accent-dot); vertical-align: text-bottom; border-radius: 2px; animation: cursor-pulse 1s steps(1) infinite; } @keyframes cursor-pulse { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.15; } } /* ── Floating phone ── */ .phone-float { position: absolute; right: 0; bottom: 0; width: 138px; z-index: 2; border-radius: 20px; padding: 8px; box-shadow: var(--shadow-lift); animation: floaty 7s ease-in-out infinite; } @keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-10px) rotate(1deg); } } .phone-screen { border-radius: 13px; overflow: hidden; aspect-ratio: 9 / 18; display: flex; flex-direction: column; /* The phone screen is a terminal in both themes — it stays dark. */ background: #0a0d12; } .phone-status { padding: 6px 10px 4px; display: flex; justify-content: center; } .phone-notch { width: 42%; height: 9px; background: #05070a; border-radius: 0 0 8px 8px; } .phone-terminal { flex: 1; padding: 6px; font-family: var(--font-mono); font-size: 5px; line-height: 1.6; color: #9aa3b2; } .phone-terminal .pt-g { color: var(--lime); } .phone-terminal .pt-b { color: #c9cbbe; } @media (max-width: 768px) { .phone-float { display: none; } .hero-visual { padding: 0; } } /* ═══════════════════════════════════════════ SECTION BANDS There is no longer a "dark band" and a "light band" — the theme owns contrast. The two class names survive as *tint* levels so the section rhythm still alternates. ═══════════════════════════════════════════ */ .band-dark, .band-light, .band-cta { position: relative; padding: var(--section-gap) 0; } .band-light { background: var(--glass-quiet); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-top: 1px solid var(--hair-soft); border-bottom: 1px solid var(--hair-soft); } .band-cta { text-align: center; border-top: 1px solid var(--hair-soft); } /* ═══════════════════════════════════════════ DEMO ═══════════════════════════════════════════ */ .demo-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; margin-top: 3.25rem; } .demo-card { min-width: 0; padding: 14px; border-radius: var(--radius-card); transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); } .demo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } .demo-card-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: -0.01em; color: var(--ink); } .demo-card-head svg { color: var(--ink-3); flex-shrink: 0; } .demo-card-title { color: var(--ink); } .demo-card-meta { margin-left: auto; color: var(--ink-3); } .demo-frame { position: relative; overflow: hidden; border-radius: 14px; background: #05070a; box-shadow: inset 0 0 0 1px var(--hair-soft); } .demo-frame.landscape { aspect-ratio: 16 / 9; } .demo-frame.portrait { aspect-ratio: 9 / 16; } .demo-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } @media (max-width: 900px) { .demo-grid { grid-template-columns: 1fr; } .demo-card.phone { width: 100%; max-width: 320px; margin: 0 auto; } } /* ═══════════════════════════════════════════ HOW IT WORKS ═══════════════════════════════════════════ */ .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.25rem); margin-top: 3.25rem; } @media (max-width: 860px) { .steps { grid-template-columns: 1fr; } } .step { min-width: 0; padding: 1.6rem 0 0; border-top: 1px solid var(--hair); transition: border-color 0.4s; } .step:hover { border-top-color: var(--accent-line); } .step-index { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--glass); border: 1px solid var(--glass-brd-2); font-family: var(--font-mono); font-size: var(--text-mono); color: var(--ink-2); margin-bottom: 1.1rem; } .step-title { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-subheading); line-height: 1.15; letter-spacing: -0.026em; color: var(--ink); margin-bottom: 0.6rem; } .step-desc { font-size: var(--text-body); line-height: 1.45; color: var(--ink-2); margin-bottom: 1.25rem; } .step-desc strong { color: var(--ink); font-weight: 600; } .step-platform-label { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-3); margin: 1rem 0 0.5rem; } .platform-box { margin-top: 1.1rem; padding: 14px 16px 16px; border-radius: var(--radius-sm); transition: box-shadow 0.4s var(--ease-out); } .platform-box:hover { box-shadow: var(--shadow-2); } details.platform-box:not([open]) { padding-bottom: 14px; } .platform-box-title { font-family: var(--font-sans); font-weight: 600; font-size: 14px; letter-spacing: -0.012em; color: var(--ink); text-align: left; } summary.platform-box-title { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; user-select: none; transition: color 0.2s; } summary.platform-box-title::-webkit-details-marker { display: none; } summary.platform-box-title:hover { color: var(--accent); } summary.platform-box-title::after { content: ''; width: 7px; height: 7px; flex-shrink: 0; margin-left: 12px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.3s var(--ease-out), border-color 0.2s; } summary.platform-box-title:hover::after { border-color: var(--accent); } details.platform-box[open] summary.platform-box-title::after { transform: rotate(-135deg); } /* ── Command blocks ── The copy button is sticky, not absolute: the block scrolls horizontally on long install URLs and an absolute button slid out of reach with the text. */ .step-code { display: flex; align-items: flex-start; gap: 10px; margin-top: 0; padding: 12px 12px 12px 15px; background: var(--code-bg); border: 1px solid var(--code-brd); border-radius: 12px; font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: -0.01em; color: var(--code-fg); text-align: left; overflow-x: auto; overscroll-behavior-x: contain; } .step-code > span { display: block; } .step-code-text { flex: 1; min-width: 0; white-space: pre; } .step-code-copy { position: sticky; right: 0; top: 0; flex-shrink: 0; margin-left: auto; align-self: flex-start; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-brd-2); border-radius: 8px; color: var(--ink-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; padding: 4px 9px; cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; } .step-code-copy:hover { color: var(--accent); border-color: var(--accent-line); } .step-code-copy[data-copied="1"] { color: var(--accent); border-color: var(--accent-line); } .step-download-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 500; font-size: var(--text-body); color: var(--ink); padding: 11px 20px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-brd); border-radius: var(--radius-pill); box-shadow: var(--shadow-1); transition: transform 0.3s var(--ease-spring), box-shadow 0.3s; } .step-download-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } /* ── Architecture strip ── */ .architecture { margin-top: 3.5rem; padding: clamp(1.5rem, 3.5vw, 2.75rem); border-radius: var(--radius-card); } .arch-flow { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: -0.01em; } .arch-node { padding: 13px 22px; border: 1px solid var(--glass-brd-2); border-radius: 14px; background: var(--glass-quiet); text-align: center; white-space: nowrap; color: var(--ink); } .arch-arrow { padding: 0 clamp(0.6rem, 2vw, 1.4rem); color: var(--ink-3); text-align: center; line-height: 1.35; display: flex; align-items: center; gap: 8px; } .arch-arrow .lock { color: var(--accent-dot); font-size: 8px; } /* ═══════════════════════════════════════════ INSTALL GUIDE ═══════════════════════════════════════════ */ .install-flow { display: grid; gap: 2.25rem; max-width: 820px; margin-top: 3.25rem; } .install-step { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 1.25rem; align-items: start; } @media (max-width: 620px) { .install-step { grid-template-columns: 1fr; gap: 0.75rem; } } /* A grid item's automatic minimum size is its content's min-content width, which the long install URLs blow past on a phone. Zeroing it lets the code blocks scroll inside themselves, not the page. */ .install-step > div { min-width: 0; } .install-num { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-brd); box-shadow: var(--shadow-1); font-family: var(--font-mono); font-size: 14px; color: var(--ink); } .install-step-title { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-subheading); line-height: 1.15; letter-spacing: -0.028em; color: var(--ink); } .install-step-desc { font-size: var(--text-body); line-height: 1.5; color: var(--ink-2); margin-top: 0.5rem; } .install-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 1.25rem; padding: 4px; border-radius: var(--radius-pill); background: var(--glass-quiet); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-brd-2); } .install-tab { padding: 7px 17px; border: none; border-radius: var(--radius-pill); background: transparent; color: var(--ink-2); font-family: var(--font-sans); font-weight: 500; font-size: 14px; letter-spacing: -0.012em; cursor: pointer; transition: color 0.25s, background 0.25s, box-shadow 0.25s; } .install-tab:hover { color: var(--ink); } .install-tab[aria-selected="true"] { background: var(--glass-strong); color: var(--ink); box-shadow: var(--shadow-1); } .install-panel { margin-top: 1rem; padding: clamp(1rem, 2.4vw, 1.5rem); border-radius: var(--radius-card); animation: panelIn 0.4s var(--ease-out); } @keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .install-panel[hidden] { display: none; } .install-label { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.5rem; } .install-label + .install-label, .step-code + .install-label, .install-note + .install-label { margin-top: 1.25rem; } .install-note { font-size: var(--text-body); line-height: 1.5; color: var(--ink-2); margin-top: 0.75rem; } .install-note strong { color: var(--ink); font-weight: 600; } .install-note code, .install-faq code { font-family: var(--font-mono); font-size: 0.86em; padding: 2px 6px; border-radius: 6px; background: var(--code-bg); border: 1px solid var(--code-brd); color: var(--code-fg); } /* ── Command reference ── */ .install-ref { max-width: 820px; margin-top: 3.5rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius-card); } .install-ref-title { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.1rem; } .install-ref-row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 1rem; padding: 13px 0; border-top: 1px solid var(--hair-soft); align-items: baseline; } @media (max-width: 620px) { .install-ref-row { grid-template-columns: 1fr; gap: 0.25rem; } } .install-ref-cmd { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: -0.01em; color: var(--accent); overflow-wrap: anywhere; } .install-ref-desc { font-size: var(--text-body); line-height: 1.45; color: var(--ink-2); } /* ── Troubleshooting ── */ .install-faq { max-width: 820px; margin-top: 2.5rem; padding: clamp(1rem, 2.4vw, 1.5rem) clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius-card); } .install-faq details { border-top: 1px solid var(--hair-soft); padding: 15px 0; } .install-faq details:first-of-type { border-top: none; padding-top: 4px; } .install-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; user-select: none; font-size: var(--text-body); font-weight: 500; color: var(--ink); transition: color 0.2s; } .install-faq summary::-webkit-details-marker { display: none; } .install-faq summary:hover { color: var(--accent); } .install-faq summary::after { content: ''; width: 7px; height: 7px; flex-shrink: 0; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.3s var(--ease-out); } .install-faq details[open] summary::after { transform: rotate(-135deg); } .install-faq p { font-size: var(--text-body); line-height: 1.55; color: var(--ink-2); margin-top: 0.75rem; } /* ═══════════════════════════════════════════ FEATURES ═══════════════════════════════════════════ */ .features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 3.25rem; } @media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .features-grid { grid-template-columns: 1fr; } } .feature { position: relative; padding: var(--card-pad); border-radius: var(--radius-card); overflow: hidden; transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); } /* Cursor-tracked highlight. --mx/--my are written by JS on pointermove; with no pointer the radial simply never shows. */ .feature::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), var(--accent-wash), transparent 70%); opacity: 0; transition: opacity 0.45s var(--ease-out); pointer-events: none; } .feature:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); } .feature:hover::after { opacity: 1; } .feature-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.35rem; border-radius: 14px; background: var(--glass-strong); border: 1px solid var(--glass-brd-2); box-shadow: var(--shadow-1); color: var(--ink); } .feature-icon svg { width: 18px; height: 18px; } .feature-icon .glyph { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-dot); box-shadow: 0 0 0 4px var(--accent-wash); } .feature-title { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-subheading); line-height: 1.15; letter-spacing: -0.026em; color: var(--ink); margin-bottom: 0.5rem; } .feature-desc { font-size: var(--text-body); line-height: 1.5; color: var(--ink-2); } /* ═══════════════════════════════════════════ SERVER MESH ═══════════════════════════════════════════ */ .mesh-diagram-wrap { margin: 3.25rem 0; padding: clamp(1.5rem, 3.5vw, 2.75rem); border-radius: var(--radius-card); } .mesh-diagram { width: 100%; max-width: 640px; height: auto; margin: 0 auto; display: block; overflow: visible; } .mesh-node-box { fill: var(--glass-strong); stroke: var(--glass-brd-2); stroke-width: 1.5; } .mesh-node-label { fill: var(--ink); font-family: var(--font-mono); font-size: 13px; text-anchor: middle; } .mesh-node-icon { font-size: 20px; text-anchor: middle; } .mesh-link-direct { stroke: var(--accent-dot); stroke-width: 1.5; fill: none; } .mesh-link-intro { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 4 5; fill: none; } .mesh-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; } .mesh-legend-item { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: -0.01em; color: var(--ink-3); } .mesh-legend-swatch { width: 28px; height: 0; border-top-width: 1.5px; border-top-style: solid; flex-shrink: 0; } .mesh-legend-swatch.direct { border-top-color: var(--accent-dot); } .mesh-legend-swatch.intro { border-top-style: dashed; border-top-color: var(--ink-3); } .mesh-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 3.25rem; } @media (max-width: 860px) { .mesh-benefits { grid-template-columns: 1fr; } } .mesh-benefit { padding: var(--card-pad); border-radius: var(--radius-card); transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); } .mesh-benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } .mesh-benefit h3 { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.75rem; } .mesh-benefit p { font-size: var(--text-body); line-height: 1.5; color: var(--ink); } /* ── Mesh animation ── Phone introduces the machines (dashed), then the machines link directly (solid, accent). One 8s loop drives every layer. */ .mesh-halo { fill: var(--accent-dot); opacity: 0; animation: meshHalo 8s ease-in-out infinite; } .mesh-node-box.phone { animation: meshPhonePulse 8s ease-in-out infinite; } .mesh-diagram .mesh-node-box:not(.phone) { animation: meshNodePulse 8s ease-in-out infinite; } .mesh-link-intro { opacity: 0.2; animation: meshIntroFlow 8s ease-in-out infinite; } .mesh-link-direct { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.18; animation: meshDraw 8s ease-in-out infinite; } .mesh-flow { fill: none; stroke: var(--accent-dot); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 94; opacity: 0; animation: meshFlowFade 8s ease-in-out infinite, meshFlowMove 2.2s linear infinite; } @keyframes meshHalo { 0%, 4% { r: 34px; opacity: 0; } 11% { r: 54px; opacity: 0.35; } 22% { r: 64px; opacity: 0; } 100% { r: 64px; opacity: 0; } } @keyframes meshPhonePulse { 0%, 4% { stroke-opacity: 0.45; } 12% { stroke-opacity: 1; } 30% { stroke-opacity: 1; } 42%, 100% { stroke-opacity: 0.4; } } @keyframes meshNodePulse { 0%, 38% { stroke-opacity: 0.3; } 50% { stroke-opacity: 1; } 64% { stroke-opacity: 0.55; } 100% { stroke-opacity: 0.55; } } @keyframes meshIntroFlow { 0%, 3% { opacity: 0.12; } 9% { opacity: 0.8; } 30% { opacity: 0.8; } 42% { opacity: 0.12; } 100% { opacity: 0.12; } } @keyframes meshDraw { 0%, 30% { stroke-dashoffset: 1; opacity: 0.18; } 47% { stroke-dashoffset: 0; opacity: 1; } 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 1; opacity: 0.18; } } @keyframes meshFlowMove { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } @keyframes meshFlowFade { 0%, 47% { opacity: 0; } 54% { opacity: 0.9; } 86% { opacity: 0.9; } 93%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .mesh-halo, .mesh-flow { display: none; } .mesh-link-direct { stroke-dashoffset: 0; opacity: 1; animation: none; } .mesh-link-intro { opacity: 0.3; animation: none; } .mesh-node-box { animation: none; } .phone-float { animation: none; } .hero h1 .grad { animation: none; } } /* ═══════════════════════════════════════════ COMPARISON ═══════════════════════════════════════════ */ .compare-scroll { margin-top: clamp(2.25rem, 5vw, 3.25rem); padding: clamp(0.5rem, 1.5vw, 1rem); border-radius: var(--radius-card); overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .compare-table { width: 100%; min-width: 700px; border-collapse: separate; border-spacing: 0; font-size: var(--text-body); letter-spacing: -0.012em; } .compare-table th, .compare-table td { padding: 1rem 1.05rem; text-align: left; border-bottom: 1px solid var(--hair-soft); vertical-align: middle; color: var(--ink-2); } .compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; } .compare-table thead th { position: sticky; top: 0; font-family: var(--font-mono); font-weight: 400; font-size: var(--text-mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-3); border-bottom-color: var(--hair); white-space: nowrap; } .compare-table tbody th { font-weight: 500; color: var(--ink); font-family: var(--font-sans); font-size: var(--text-body); } .compare-table td.mark { text-align: center; } /* Termcast column — an accent-washed glass strip running the table. */ .compare-table th.col-us, .compare-table td.col-us { background: var(--accent-wash); text-align: center; box-shadow: inset 1px 0 0 var(--accent-line), inset -1px 0 0 var(--accent-line); } .compare-table thead th.col-us { color: var(--accent); font-weight: 600; border-top-left-radius: 16px; border-top-right-radius: 16px; box-shadow: inset 1px 1px 0 var(--accent-line), inset -1px 0 0 var(--accent-line); } .compare-table tbody tr:last-child td.col-us { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; box-shadow: inset 1px 0 0 var(--accent-line), inset -1px -1px 0 var(--accent-line); } .compare-yes { color: var(--accent); font-weight: 600; } .compare-no { color: var(--ink-3); } .compare-partial { color: var(--ink-2); } .compare-note { margin-top: 1rem; font-size: var(--text-caption); letter-spacing: -0.01em; color: var(--ink-3); max-width: 70ch; font-family: var(--font-mono); line-height: 1.6; } .compare-us-mesh { font-size: 11px; display: block; color: var(--ink-3); margin-top: 2px; font-family: var(--font-mono); } @media (max-width: 620px) { .compare-table th, .compare-table td { padding: 0.8rem 0.75rem; } } /* ═══════════════════════════════════════════ USE CASES ═══════════════════════════════════════════ */ .uc-list { margin-top: clamp(2.25rem, 5vw, 3.5rem); display: flex; flex-direction: column; } .uc-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: clamp(1rem, 4vw, 3rem); padding: clamp(1.6rem, 4vw, 2.4rem) clamp(0.5rem, 1.5vw, 1.25rem); border-radius: var(--radius-card); border-top: 1px solid var(--hair-soft); transition: background 0.45s var(--ease-out), border-color 0.45s; } .uc-row:last-child { border-bottom: 1px solid var(--hair-soft); } .uc-row:hover { background: var(--glass-quiet); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-top-color: var(--accent-line); } .uc-index { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.02em; color: var(--ink-3); padding-top: 0.35rem; } .uc-for { display: block; font-family: var(--font-mono); font-size: var(--text-mono); text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-3); margin-top: 0.5rem; line-height: 1.45; } .uc-body { max-width: 66ch; } .uc-row h3 { font-family: var(--font-sans); font-weight: 600; font-size: clamp(1.2rem, 2.2vw, 1.55rem); color: var(--ink); letter-spacing: -0.026em; line-height: 1.15; margin-bottom: 0.6rem; } .uc-moment { color: var(--ink-2); margin-bottom: 0.85rem; line-height: 1.55; font-size: var(--text-body); } .uc-fit { color: var(--ink-2); line-height: 1.55; font-size: var(--text-body); } .uc-fit-label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--accent); margin-right: 0.5rem; } .uc-fit-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-dot); box-shadow: 0 0 0 3px var(--accent-wash); } .uc-fit strong { color: var(--ink); font-weight: 600; } @media (max-width: 640px) { .uc-row { grid-template-columns: 1fr; gap: 0.35rem; } .uc-index { padding-top: 0; } .uc-for { display: inline; margin-top: 0; margin-left: 0.75rem; } } /* ═══════════════════════════════════════════ SECURITY ═══════════════════════════════════════════ */ .security-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } @media (max-width: 860px) { .security-inner { grid-template-columns: 1fr; } } .crypto-stack { display: flex; flex-direction: column; gap: 12px; } .crypto-item { display: flex; align-items: flex-start; gap: 16px; padding: 18px 22px; border-radius: var(--radius-sm); transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); } .crypto-item:hover { transform: translateX(4px); box-shadow: var(--shadow-2); } .crypto-icon { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-dot); flex-shrink: 0; margin-top: 8px; box-shadow: 0 0 0 4px var(--accent-wash); } .crypto-label { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); } .crypto-desc { font-size: var(--text-body); line-height: 1.5; color: var(--ink-2); margin-top: 5px; } /* ═══════════════════════════════════════════ SECURITY CHECKS ═══════════════════════════════════════════ */ .checks-header { margin-bottom: 2.75rem; } .checks-header .sec-sub { margin-top: 1rem; } .checks-pipeline-badge { display: inline-flex; align-items: center; gap: 9px; padding: 9px 20px; border-radius: var(--radius-pill); background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-brd); box-shadow: var(--shadow-1); font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: -0.01em; color: var(--ink); margin-top: 1.5rem; transition: transform 0.3s var(--ease-spring), box-shadow 0.3s; } .checks-pipeline-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } .checks-pipeline-dot { width: 6px; height: 6px; background: var(--accent-dot); border-radius: 50%; animation: pulse-dot 2.4s ease-in-out infinite; } .checks-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } @media (max-width: 900px) { .checks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .checks-grid { grid-template-columns: 1fr; } } .check-card { padding: 1.4rem; border-radius: var(--radius-card); transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); } .check-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } .check-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 0.75rem; flex-wrap: wrap; } .check-icon { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-dot); flex-shrink: 0; box-shadow: 0 0 0 3px var(--accent-wash); } .check-name { font-family: var(--font-sans); font-weight: 600; font-size: 15px; letter-spacing: -0.014em; color: var(--ink); } .check-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--accent-wash); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--accent); margin-left: auto; } .check-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-dot); } .check-org { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: -0.01em; color: var(--ink-3); margin-bottom: 0.5rem; } .check-desc { font-size: var(--text-body); line-height: 1.5; color: var(--ink-2); } .checks-footer { margin-top: 2.25rem; } .checks-footer a { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: -0.01em; color: var(--ink-3); transition: color 0.2s; } .checks-footer a:hover { color: var(--accent); } /* ═══════════════════════════════════════════ PRICING ═══════════════════════════════════════════ */ .pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 820px; margin: 3.25rem auto 0; align-items: start; } @media (max-width: 660px) { .pricing-grid { grid-template-columns: 1fr; } } .price-card { position: relative; padding: var(--card-pad); border-radius: var(--radius-lg); transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); } .price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); } .price-card.pro { border-color: var(--accent-line); box-shadow: var(--shadow-2), 0 0 0 1px var(--accent-line); } /* The PRO badge is one flow element, not two absolutely-positioned pseudo-elements pinned at a hard-coded 68px offset. */ .price-badge { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--accent-wash); border: 1px solid var(--accent-line); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); } .price-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-dot); } .price-name { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.9rem; } .price-amount { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-heading-lg); line-height: 1; letter-spacing: -0.04em; color: var(--ink); margin-bottom: 0.3rem; } .price-amount span { font-size: var(--text-body); font-weight: 400; letter-spacing: -0.012em; color: var(--ink-3); } .price-alt { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: -0.01em; color: var(--ink-3); margin-bottom: 1.4rem; } .price-save { display: inline-block; color: var(--accent); background: var(--accent-wash); border: 1px solid var(--accent-line); padding: 2px 10px; border-radius: var(--radius-pill); margin-left: 4px; } .price-trial { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); background: var(--accent-wash); border: 1px solid var(--accent-line); padding: 4px 12px; border-radius: var(--radius-pill); margin-bottom: 1.4rem; } .price-trial::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-dot); } .price-features { list-style: none; display: flex; flex-direction: column; gap: 11px; } .price-features li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--text-body); line-height: 1.45; color: var(--ink); } .price-features li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-dot); flex-shrink: 0; margin-top: 9px; box-shadow: 0 0 0 3px var(--accent-wash); } .price-features li.dim { color: var(--ink-3); } .price-features li.dim::before { background: var(--ink-3); box-shadow: none; } .price-cta-row { margin-top: 1.85rem; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } /* ═══════════════════════════════════════════ MOBILE CTA ═══════════════════════════════════════════ */ .band-cta .sec-counter, .band-cta .sec-headline, .band-cta .sec-sub { margin-left: auto; margin-right: auto; } .band-cta .sec-headline { color: var(--ink); max-width: 22ch; } .band-cta .sec-sub { color: var(--ink-2); } .mobile-cta-reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 900px; margin: 3.25rem auto 0; text-align: left; } @media (max-width: 660px) { .mobile-cta-reasons { grid-template-columns: 1fr; } } .mobile-cta-reason { padding: clamp(1.2rem, 2.5vw, 1.7rem); border-radius: var(--radius-card); transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); } .mobile-cta-reason:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } .mobile-cta-reason h3 { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.7rem; } .mobile-cta-reason p { font-size: var(--text-body); line-height: 1.5; color: var(--ink-2); } .mobile-cta-closing { margin: 2.75rem auto 0; font-size: var(--text-body-lg); line-height: 1.5; color: var(--ink-2); max-width: 52ch; text-wrap: pretty; } .band-cta .arrow-btn { margin: 2.25rem auto 0; } /* ═══════════════════════════════════════════ FOOTER ═══════════════════════════════════════════ */ footer { position: relative; padding: 2.75rem var(--gutter); background: var(--glass-quiet); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-top: 1px solid var(--hair); } .footer-inner { max-width: var(--page-max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.25rem; } .footer-left { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-sans); font-weight: 600; font-size: 14px; letter-spacing: -0.016em; color: var(--ink); } .footer-left svg { width: 22px; height: 22px; } .footer-left .lm-frame { stroke: var(--ink-3); } .footer-left .lm-line-a { stroke: var(--ink); } .footer-left .lm-line-b { stroke: var(--ink-3); } .footer-left .lm-dot { fill: var(--accent-dot); } /* Separators are gaps between pills, not left borders — the old `li + li { border-left }` broke into orphaned bars once the list wrapped onto two rows. */ .footer-links { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; align-items: center; } .footer-links a { display: inline-flex; padding: 7px 13px; border-radius: var(--radius-pill); font-family: var(--font-sans); font-weight: 500; font-size: 14px; letter-spacing: -0.012em; color: var(--ink-2); transition: color 0.2s, background 0.2s; } .footer-links a:hover { color: var(--ink); background: var(--glass); } @media (max-width: 640px) { .footer-inner { flex-direction: column; align-items: flex-start; gap: 1.25rem; } .footer-links { margin-left: -13px; } } /* ═══════════════════════════════════════════ LEGACY TOKEN ALIASES A handful of inline style="" attributes in the markup still name the old palette. Mapping them here keeps those spans themed instead of falling back to unstyled inherit. ═══════════════════════════════════════════ */ :root { --color-ink: var(--ink); --color-paper: var(--bg); --color-graphite: var(--ink-2); --color-lichen: var(--ink-3); --color-lime: var(--accent); --color-bone: var(--bg-band); --color-void: #000; } /* The phone mock-up is a terminal screen in both themes, so it keeps its own dark-on-dark values rather than the themed ones. */ .phone-terminal { --color-lichen: #9aa3b2; --color-lime: var(--lime); } /* ═══════════════════════════════════════════ RESPONSIVE — hero stack ═══════════════════════════════════════════ */ @media (max-width: 900px) { .hero-inner { grid-template-columns: minmax(0, 1fr); } /* Centre the prose only. Centring .hero-inner leaked the alignment into the terminal transcript, which has to stay flush left. */ .hero-text { max-width: none; text-align: center; } .hero-sub { margin-left: auto; margin-right: auto; } .hero-actions { justify-content: center; } .hero-trust { justify-content: center; } .hero-visual { order: -1; justify-content: center; margin-bottom: 1.5rem; } .terminal-window { max-width: 440px; } .security-inner { text-align: left; } } @media (max-width: 520px) { .hero-actions .btn-fill, .hero-actions .btn-ghost { width: 100%; } } /* Backdrop-filter is the whole visual language here. Where it is unsupported the glass would render as flat near-transparent plastic, so those surfaces fall back to an opaque tint. */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .glass, .demo-card, .feature, .check-card, .price-card, .platform-box, .install-panel, .mesh-benefit, .crypto-item, .mobile-cta-reason, .architecture, .mesh-diagram-wrap, .terminal-window, .phone-float, .install-ref, .install-faq, .compare-scroll, .tag, .btn-ghost, .nav.scrolled .nav-inner, .nav-links.open, .promo-bar, footer, .band-light, .checks-pipeline-badge, .step-download-link { background: var(--bg-band); } .terminal-body { background: var(--bg-band); } } /* ═══════════════════════════════════════════ VISITOR COUNTER A quiet corner stat. Anchored inside the footer in the markup so that on a phone — where a fixed pill would sit on top of the content — it simply flows as the last footer line instead. ═══════════════════════════════════════════ */ .visitor-count { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--radius-pill); background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-brd); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: -0.01em; color: var(--ink-3); white-space: nowrap; user-select: none; } .visitor-count[hidden] { display: none; } .visitor-count .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-dot); flex-shrink: 0; box-shadow: 0 0 0 3px var(--accent-wash); animation: pulse-dot 2.4s ease-in-out infinite; } .visitor-num { color: var(--ink); font-variant-numeric: tabular-nums; } /* Below the fold on a phone it simply continues the footer surface; on a wider screen the strip itself is what goes fixed, so no ancestor with a backdrop-filter can capture it. */ .visitor-strip { display: flex; justify-content: center; padding: 0 var(--gutter) 2.25rem; background: var(--glass-quiet); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); } @media (min-width: 768px) { .visitor-strip { position: fixed; left: clamp(1rem, 2.5vw, 1.75rem); bottom: clamp(1rem, 2.5vw, 1.75rem); z-index: 90; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .visitor-count { box-shadow: var(--shadow-1); opacity: 0.6; transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out); } .visitor-count:hover { opacity: 1; transform: translateY(-2px); } } /* ═══════════════════════════════════════════ DOCS PAGE ═══════════════════════════════════════════ */ .docs-shell { padding: calc(var(--promo-h) + var(--nav-h) + clamp(2rem, 5vh, 3.5rem)) var(--gutter) clamp(4rem, 9vh, 7rem); } .docs-inner { max-width: var(--page-max); margin: 0 auto; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } /* A grid track's automatic minimum is its content's min-content width. The sidebar chip row and the wide tables inside the article both exceed the viewport, so without this the whole page scrolls sideways instead of the two elements scrolling inside themselves. */ .docs-side, .docs-main { min-width: 0; } .docs-side { position: sticky; top: calc(var(--promo-h) + var(--nav-h) + 1.5rem); } .docs-side-inner { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--radius-card); background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-brd); box-shadow: var(--shadow-1); } .docs-side-title { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); padding: 4px 10px 10px; } .docs-nav { list-style: none; display: flex; flex-direction: column; gap: 2px; } .docs-nav a { display: block; padding: 8px 11px; border-radius: 10px; font-size: 14px; font-weight: 500; letter-spacing: -0.012em; color: var(--ink-2); transition: color 0.2s, background 0.2s; } .docs-nav a:hover { color: var(--ink); background: var(--glass-quiet); } .docs-nav li.active a { color: var(--ink); background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent-line); } .docs-side-cta { margin-top: 10px; padding: 9px 11px; border-top: 1px solid var(--hair-soft); font-family: var(--font-mono); font-size: var(--text-mono); color: var(--ink-3); transition: color 0.2s; } .docs-side-cta:hover { color: var(--accent); } .docs-head { margin-bottom: clamp(2.5rem, 6vw, 4rem); } .docs-title { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-heading-lg); line-height: 1.02; letter-spacing: -0.04em; color: var(--ink); margin-top: 1.25rem; text-wrap: balance; } .docs-lede { font-size: var(--text-body-lg); line-height: 1.5; color: var(--ink-2); max-width: 58ch; margin-top: 1.25rem; text-wrap: pretty; } /* Sections keep their internal markup; only the full-bleed band chrome is dropped, since inside the article column they are plain blocks. */ .docs-section { position: relative; padding: clamp(2.5rem, 6vw, 4rem) 0; border-top: 1px solid var(--hair-soft); /* No scroll-margin-top here: html already carries scroll-padding-top for the fixed chrome, and the two offsets ADD — that landed every jumped-to section 127px too low, with its heading floating under a dead gap. */ } .docs-section:first-of-type { border-top: none; padding-top: 0; } .docs-block { max-width: none; margin: 0; padding: 0; } /* Inside a narrower column these two no longer need their own cap. */ .docs-main .install-flow, .docs-main .install-ref, .docs-main .install-faq { max-width: none; } .docs-main .security-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } @media (max-width: 1000px) { .docs-inner { grid-template-columns: minmax(0, 1fr); } .docs-side { position: static; } /* Horizontal chip row instead of a rail once the column is gone. */ .docs-side-inner { flex-direction: row; align-items: center; overflow-x: auto; gap: 6px; } .docs-side-title, .docs-side-cta { display: none; } .docs-nav { flex-direction: row; gap: 6px; } .docs-nav a { white-space: nowrap; } } /* ═══════════════════════════════════════════ DEMO CLIPS Self-hosted MP4s rather than X's embed widget: platform.twitter.com ships a third-party tracking script, and the privacy policy on this site promises there is none. Native