/* BOT SPOT — Marketing site styles */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* ---------- Theme tokens ---------- :root = LIGHT (default, no attribute). [data-theme="dark"] on = dark. theme.js + the inline head snippet set the attribute (localStorage 'cbp_theme'). Rule of thumb: --accent = fills (primary buttons, bars, halos), always mint. --accent-text = "ink" (text, links, borders, strokes, icons): dark green in light so it reads AA on white, mint in dark. --up/--down/--warn/--info are ink too (re-contrasted in light). --on-accent = text on a mint fill. */ :root { color-scheme: light; /* Surfaces — paper white, layered */ --bg: #f6f7f9; --bg-1: #eef1f5; --bg-2: #e6eaf0; --bg-3: #dde2eb; --panel: #ffffff; --panel-elev: #ffffff; --panel-glass: rgba(255, 255, 255, 0.72); /* Borders & dividers — hairline */ --line: #d8dde6; --line-strong: #c2c9d6; --line-soft: #e4e8ee; /* Text (AA on --bg: fg-dim 8.3, fg-mute 5.4, fg-faint 4.6 / 5.0 on panel — faint carries small read text: band labels, legal footer, matrix "off") */ --fg: #0c1018; --fg-dim: #404a5a; --fg-mute: #5b6675; --fg-faint: #66717f; /* Brand accent — phosphor mint for fills, deep green for ink (6.1:1 on --bg) */ --accent: #7CFCB6; --accent-dim: #2f9f74; --accent-text: #0A6B4A; --accent-glow: rgba(10, 107, 74, 0.14); --on-accent: #07090d; /* Signal colors (ink, AA on --bg) */ --up: #0A6B4A; --down: #C8243F; --warn: #9A5B00; --info: #5A4BD6; /* Venue colours (chart strokes / legend / dots) */ --venue-hl: #0A6B4A; --venue-bn: #8F6A00; --venue-kr: #5A4BD6; --venue-mx: #087590; --venue-bv: #1F5AE0; --venue-as: #A85A06; --venue-kc: #15705d; /* Shadows */ --shadow-pop: 0 18px 44px rgba(16, 24, 40, 0.16); --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05), 0 12px 32px -14px rgba(16, 24, 40, 0.22); /* Type */ --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* Dark palette (the original design). Also scoped to .pterm and .v3-tg: the hero terminal and the Telegram capture frame stay dark in both themes by design (a terminal, and a chat window, are dark surfaces). Scoping the palette rather than hard-coding hex keeps them token-driven. */ [data-theme="dark"], .pterm, .v3-tg { color-scheme: dark; --bg: #07090d; --bg-1: #0c0f15; --bg-2: #11151d; --bg-3: #161b25; --panel: #0e1218; --panel-elev: #141923; --panel-glass: rgba(255, 255, 255, 0.02); --line: #1c2230; --line-strong: #2a3142; --line-soft: #141925; --fg: #e6edf3; --fg-dim: #aab3c0; --fg-mute: #7b8594; /* AA on bg/panel/panel-elev (5.3 / 5.0 / 4.7) */ --fg-faint: #6c7686; /* secondary/decorative text, ~4.3:1 on bg */ --accent: #7CFCB6; --accent-dim: #4ec795; --accent-text: #7CFCB6; --accent-glow: rgba(124, 252, 182, 0.18); --up: #7CFCB6; --down: #FF4D6D; --warn: #FFB454; --info: #8B7CFF; --venue-hl: #7CFCB6; --venue-bn: #F3BA2F; --venue-kr: #8B7CFF; --venue-mx: #0BB8E0; --venue-bv: #4E9BFF; --venue-as: #FFB86B; --venue-kc: #24AE8F; --shadow-pop: 0 18px 44px rgba(0, 0, 0, 0.5); --shadow-card: none; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } ::selection { background: var(--accent); color: var(--on-accent); } /* ---------- Layout primitives ---------- */ .wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; } .row { display: flex; } .col { display: flex; flex-direction: column; } .muted { color: var(--fg-mute); } .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; } .up { color: var(--up); } .down { color: var(--down); } .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-mute); } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px) saturate(140%); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid var(--line-soft); transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease); } /* Scrolled state. reveal.js puts .nav-js on when its listener is live: there, the nav sheds its hairline at rest and takes a stronger one back past ~24px of scroll, so it detaches from the page instead of floating on it. Pages that do not load reveal.js keep the resting hairline they always had. Colour only, no motion: this stays on under prefers-reduced-motion. */ .nav-js .nav, .nav-js .docs-nav { border-bottom-color: transparent; } .nav.is-scrolled, .nav-js .nav.is-scrolled, .docs-nav.is-scrolled, .nav-js .docs-nav.is-scrolled { background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom-color: var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); text-decoration: none; } .brand:hover { color: var(--fg); } .brand-mark { width: 24px; height: 24px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); border-radius: 5px; font-family: var(--font-mono); font-weight: 700; font-size: 13px; box-shadow: 0 0 22px var(--accent-glow); } .brand-name { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; } .nav-links { display: flex; gap: 26px; align-items: center; } .nav-links a { color: var(--fg-dim); text-decoration: none; font-size: 14px; transition: color 0.15s var(--ease); } .nav-links a:hover { color: var(--fg); } .nav-links a.active { color: var(--fg); } .nav-cta { display: flex; gap: 10px; align-items: center; } /* Theme switch — Light / Dark / System (theme.js owns state + aria-pressed) */ .theme-switch { display: inline-flex; gap: 2px; padding: 2px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 999px; } .theme-switch button { width: 26px; height: 26px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 999px; color: var(--fg-mute); cursor: pointer; transition: color 0.15s var(--ease), background 0.15s var(--ease); } .theme-switch button:hover { color: var(--fg); } .theme-switch button[aria-pressed="true"] { background: var(--panel-elev); color: var(--accent-text); box-shadow: 0 0 0 1px var(--line-strong); } .theme-switch button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; } .theme-switch svg { width: 14px; height: 14px; display: block; } /* Compare dropdown — CSS pur (hover + focus-within), le toggle reste un vrai lien vers le roundup pour le tactile et le clavier */ .nav-drop { position: relative; } .nav-drop-toggle .chev { display: inline-block; margin-left: 5px; font-size: 9px; color: var(--fg-mute); transition: transform 0.15s var(--ease); } .nav-drop:hover .nav-drop-toggle .chev, .nav-drop:focus-within .nav-drop-toggle .chev { transform: translateY(1px); color: var(--fg-dim); } .nav-drop-menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-4px); min-width: 224px; display: flex; flex-direction: column; padding: 6px; background: var(--panel-elev); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-pop); opacity: 0; visibility: hidden; transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), visibility 0.15s; } /* pont invisible pour ne pas perdre le hover entre le lien et le menu */ .nav-drop-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } .nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* variante alignee a droite (breadcrumb du docs, colle au bord) */ .nav-drop-menu--right { left: auto; right: 0; transform: translateY(-4px); } .nav-drop:hover .nav-drop-menu--right, .nav-drop:focus-within .nav-drop-menu--right { transform: translateY(0); } .nav-links .nav-drop-menu a { padding: 9px 12px; border-radius: 6px; font-size: 13.5px; white-space: nowrap; } .nav-links .nav-drop-menu a:hover { background: var(--bg-2); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; border: 1px solid transparent; border-radius: 6px; cursor: pointer; transition: all 0.15s var(--ease); text-decoration: none; white-space: nowrap; } .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 80%, transparent), 0 8px 28px var(--accent-glow); } .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 0 0 1px var(--accent), 0 12px 36px var(--accent-glow); } .btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-strong); } .btn-ghost:hover { border-color: var(--fg-mute); background: var(--bg-1); } .btn-sm { padding: 7px 12px; font-size: 12.5px; } .btn-lg { padding: 14px 22px; font-size: 14.5px; } .btn .arrow { transition: transform 0.2s var(--ease); } .btn:hover .arrow { transform: translateX(2px); } /* ---------- Download picker (anchored popover, no overlay) ---------- */ .dlp { position: relative; display: inline-flex; } .dlp > .btn { width: 100%; } .dlp-caret { font-size: 9px; margin-left: 2px; opacity: 0.75; } .dlp-menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; min-width: 300px; padding: 8px; background: var(--panel-elev); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-pop); animation: dlpIn 160ms var(--ease) both; text-align: left; } .dlp-menu--right { left: auto; right: 0; } .dlp-menu--center { left: 50%; transform: translateX(-50%); } /* Pricing cards are position:relative with no z-index, so a later card paints over an open menu in the card before it. Lift the card that holds the menu. */ .price-card:has(.dlp-menu) { z-index: 20; } @keyframes dlpIn { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .dlp-menu { animation: none; } } .dlp-item { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 9px 12px; border-radius: 6px; font-size: 13.5px; color: var(--fg); text-decoration: none; white-space: nowrap; } .dlp-item:hover, .dlp-item:focus-visible { background: var(--bg-2); } .dlp-item:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; } .dlp-item--primary { font-weight: 600; color: var(--accent-text); } .dlp-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-mute); letter-spacing: 0.04em; } .dlp-sep { height: 1px; background: var(--line-soft); margin: 7px 4px; } .dlp-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); padding: 3px 12px 5px; } .dlp-note { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-mute); line-height: 1.5; padding: 7px 12px 4px; white-space: normal; max-width: 280px; } /* ---------- Section spacing ---------- */ section { padding: 96px 0; position: relative; } section + section { border-top: 1px solid var(--line-soft); } .section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 56px; max-width: 720px; } .section-head h2 { font-size: clamp(32px, 4vw, 44px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; } .section-head p { color: var(--fg-dim); font-size: 17px; max-width: 620px; text-wrap: pretty; } /* ---------- Cards / panels ---------- */ .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; position: relative; } .panel-elev { background: var(--panel-elev); border: 1px solid var(--line); border-radius: 10px; } /* hairline grid background — used in hero variants */ .grid-bg { background-image: linear-gradient(to right, var(--line-soft) 1px, transparent 1px), linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px); background-size: 56px 56px; background-position: -1px -1px; } .grid-mask { -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); } /* ---------- Hero shared ---------- */ .hero { position: relative; padding: 40px 0 64px; /* clip only sideways: the masked grid and the terminal's 3D entrance must not widen the page, but the download popover has to escape downwards. overflow-x: clip is the one value that leaves overflow-y visible. */ overflow-x: clip; overflow-y: visible; } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, var(--line-soft) 1px, transparent 1px), linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 75%); opacity: 0.55; pointer-events: none; } .hero-inner { position: relative; z-index: 1; } .tagpill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px 5px 9px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--fg-dim); font-family: var(--font-mono); } .tagpill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-text); box-shadow: 0 0 10px var(--accent); animation: pulseDot 2s infinite; } @keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* Product Hunt badge, sits in the hero tag row. Scaled down from its native 250x54 so it reads as a peer of the tagpills instead of shouting over the headline, and so it costs the fold as little vertical space as possible. */ .ph-badge { display: inline-flex; line-height: 0; border-radius: 10px; } .ph-badge:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; } .ph-badge-img { width: 195px; height: auto; display: block; } .ph-badge-img--dark { display: none; } [data-theme="dark"] .ph-badge-img--light { display: none; } [data-theme="dark"] .ph-badge-img--dark { display: block; } .hero h1 { font-size: clamp(38px, 4.6vw, 58px); font-weight: 600; line-height: 1.0; letter-spacing: -0.035em; margin: 14px 0 16px; text-wrap: balance; } .hero h1 em { font-style: normal; color: var(--accent-text); /* the accent carries both words: never break "the / wiggle" across lines */ white-space: nowrap; } .hero .lede { font-size: 18px; color: var(--fg-dim); max-width: 540px; margin-bottom: 20px; text-wrap: pretty; } .hero-ctas { display: flex; gap: 12px; align-items: center; } .hero-tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .tagpill-link { text-decoration: none; color: var(--accent-text); border-color: var(--accent-dim); } .tagpill-link:hover { background: var(--bg-3); } /* Orchestrated hero entrance — one pass, top to bottom, once. opacity + transform only, inside space the element already occupies, so no sibling ever reflows. Steps are 80ms apart. */ @keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .hero-en { animation: heroIn 0.62s var(--ease) both; } .hero-en-1 { animation-delay: 0.06s; } .hero-en-2 { animation-delay: 0.14s; } .hero-en-3 { animation-delay: 0.22s; } .hero-en-4 { animation-delay: 0.30s; } .hero-en-5 { animation-delay: 0.38s; } @media (prefers-reduced-motion: reduce) { .hero-en { animation: none; } } /* trial banner above price grid */ .trial-banner { display: flex; align-items: center; gap: 14px; padding: 16px 22px; margin: 0 0 28px; background: linear-gradient(90deg, var(--accent-glow), transparent 70%); border: 1px solid color-mix(in srgb, var(--accent-text) 30%, transparent); border-radius: 10px; font-family: var(--font-mono); font-size: 13px; color: var(--fg-dim); } .trial-banner strong { color: var(--accent-text); font-weight: 600; font-size: 14px; letter-spacing: 0.02em; } .trial-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-text); box-shadow: 0 0 0 0 var(--accent); animation: trialPulse 2s ease-in-out infinite; flex-shrink: 0; } @keyframes trialPulse { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 0 8px transparent; } } /* ---------- Hero V1 — Planner Logs terminal ---------- */ .pterm-wrap { /* 3D perspective container so the rotation reads as physical */ perspective: 1400px; perspective-origin: 50% 30%; } .pterm { position: relative; background: linear-gradient(180deg, #0b0e14 0%, #0a0d12 100%); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-family: var(--font-mono); box-shadow: 0 2px 0 rgba(255,255,255,0.02) inset, 0 30px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(124,252,182,0.04); transform-style: preserve-3d; /* Initial state: rotated away, slightly down + scaled */ opacity: 0; transform: rotateX(14deg) rotateY(-26deg) translateY(28px) scale(0.9); transition: opacity 1300ms cubic-bezier(0.16, 1, 0.3, 1), transform 1600ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 1600ms cubic-bezier(0.16, 1, 0.3, 1); } .pterm.pterm-mounted { opacity: 1; transform: rotateX(0) rotateY(0) translateY(0) scale(1); box-shadow: 0 2px 0 rgba(255,255,255,0.02) inset, 0 50px 120px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(124,252,182,0.08), 0 0 80px -20px var(--accent-glow); } .pterm::before { /* faint phosphor glow on the bezel */ content: ""; position: absolute; inset: -1px; border-radius: 14px; pointer-events: none; background: radial-gradient(120% 80% at 50% -20%, var(--accent-glow), transparent 55%), radial-gradient(80% 60% at 50% 120%, rgba(139,124,255,0.10), transparent 60%); opacity: 0.55; z-index: 0; } .pterm > * { position: relative; z-index: 1; } /* chrome — macOS dots + title + REC */ .pterm-chrome { display: flex; align-items: center; gap: 14px; padding: 11px 14px 10px; background: linear-gradient(180deg, #11151d, #0d1117); border-bottom: 1px solid var(--line-soft); } .pterm-dots { display: flex; gap: 6px; } .pterm-dots span { width: 11px; height: 11px; border-radius: 50%; background: #2a3142; box-shadow: 0 0 0 0.5px rgba(255,255,255,0.04); } .pterm-dots span:nth-child(1) { background: #FF5F57; } .pterm-dots span:nth-child(2) { background: #FEBC2E; } .pterm-dots span:nth-child(3) { background: #28C840; } .pterm-title { font-size: 11.5px; color: var(--fg-mute); letter-spacing: 0.06em; display: flex; gap: 8px; align-items: baseline; flex: 1; justify-content: center; } .pterm-title .pterm-path { color: var(--fg-dim); } .pterm-title .pterm-sep { color: var(--fg-faint); } .pterm-live { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 0.16em; color: var(--down); padding: 3px 9px; border-radius: 99px; background: rgba(255,77,109,0.10); border: 1px solid rgba(255,77,109,0.25); } .pterm-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--down); animation: ptermPulse 1.4s ease-in-out infinite; } @keyframes ptermPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,77,109,0.6); opacity: 1; } 50% { box-shadow: 0 0 0 6px rgba(255,77,109,0); opacity: 0.5; } } /* tab strip */ .pterm-tabs { display: flex; gap: 0; padding: 0 14px; background: #0a0d12; border-bottom: 1px solid var(--line-soft); font-size: 11.5px; } .pterm-tab { padding: 9px 14px; color: var(--fg-mute); letter-spacing: 0.02em; border-bottom: 1.5px solid transparent; cursor: default; } .pterm-tab-active { color: var(--accent); border-bottom-color: var(--accent); background: linear-gradient(180deg, transparent, var(--accent-glow)); } /* exchange chip rail */ .pterm-rail { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 14px; background: #0a0d12; border-bottom: 1px solid var(--line-soft); } .px-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 7px; background: rgba(255,255,255,0.025); border: 1px solid var(--line); border-radius: 99px; font-size: 10.5px; letter-spacing: 0.05em; color: var(--fg-dim); } .px-chip .px-dot { width: 7px; height: 7px; border-radius: 50%; } .px-chip .px-code { color: var(--fg); font-weight: 500; } .px-chip .px-count { color: var(--fg-mute); margin-left: 2px; padding-left: 8px; border-left: 1px solid var(--line); } /* log body */ .pterm-body { position: relative; padding: 14px 16px 18px; height: 380px; overflow: hidden; color: var(--fg-dim); font-size: 12.5px; line-height: 1.65; /* fade-out top mask so old lines feather away */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30px, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30px, #000 100%); } /* one-shot scanline sweep on arrival */ .pterm-scan { position: absolute; left: 0; right: 0; top: 0; height: 120px; background: linear-gradient(180deg, transparent 0%, rgba(124,252,182,0.04) 20%, rgba(124,252,182,0.22) 50%, rgba(124,252,182,0.04) 80%, transparent 100%); pointer-events: none; animation: ptermScan 1800ms cubic-bezier(0.4, 0, 0.6, 1) 1500ms 1 both; z-index: 2; } @keyframes ptermScan { 0% { transform: translateY(-140px); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(420px); opacity: 0; } } /* individual log lines */ .plog-line { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .plog-line.plog-in { animation: plogIn 280ms var(--ease) both; } @keyframes plogIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } } .plog-prompt { color: var(--accent); font-weight: 600; } .plog-cmd { color: var(--fg); } .plog-cursor { display: inline-block; width: 8px; height: 13px; background: var(--accent); vertical-align: -2px; margin-left: 4px; animation: ptermBlink 1.05s steps(2) infinite; } @keyframes ptermBlink { 50% { opacity: 0; } } .plog-ts { color: var(--fg-faint); flex-shrink: 0; } .plog-lvl { font-size: 10px; padding: 1px 6px; border-radius: 3px; letter-spacing: 0.06em; flex-shrink: 0; font-weight: 500; } .plog-msg { color: var(--fg); min-width: 0; } .plog-emoji { font-size: 11.5px; flex-shrink: 0; } .plog-rule { color: var(--fg-faint); font-size: 10.5px; letter-spacing: 0.06em; margin: 4px 0; opacity: 0.7; } .plog-tail { margin-top: 4px; } .plog-spin { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--line-strong); border-top-color: var(--accent); animation: ptermSpin 800ms linear infinite; flex-shrink: 0; } @keyframes ptermSpin { to { transform: rotate(360deg); } } /* status bar footer */ .pterm-statusbar { display: flex; align-items: center; gap: 14px; padding: 9px 14px; background: linear-gradient(180deg, #0a0d12, #07090d); border-top: 1px solid var(--line-soft); font-size: 10.5px; letter-spacing: 0.04em; color: var(--fg-mute); } .pterm-stat { display: inline-flex; align-items: baseline; gap: 6px; } .pterm-stat-lbl { color: var(--fg-faint); letter-spacing: 0.12em; font-size: 9.5px; } .pterm-stat-val { color: var(--fg); font-weight: 500; font-size: 11.5px; } .pterm-stat-val.up { color: var(--up); } .pterm-stat-sep { width: 1px; height: 14px; background: var(--line-soft); } /* ---------- Hero V2 — Grid chart ---------- */ .gridchart { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 24px; position: relative; min-height: 420px; } .gridchart-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; } .gridchart-pair { font-family: var(--font-mono); font-size: 13px; color: var(--fg-mute); letter-spacing: 0.06em; } .gridchart-price { font-family: var(--font-mono); font-size: 32px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; line-height: 1; margin-top: 4px; } .gridchart-delta { font-family: var(--font-mono); font-size: 12px; color: var(--up); margin-top: 6px; } .gridchart-svg { width: 100%; height: 320px; display: block; } /* ---------- Hero V3 — Ticker tape ---------- */ .tickers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .ticker { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; } .ticker-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .ticker-sym { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-dim); letter-spacing: 0.06em; } .ticker-ex { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-mute); text-transform: uppercase; letter-spacing: 0.06em; } .ticker-price { font-family: var(--font-mono); font-size: 20px; font-weight: 500; } .ticker-meta { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--fg-mute); } .feed { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-top: 10px; font-family: var(--font-mono); font-size: 11.5px; height: 156px; overflow: hidden; position: relative; } .feed::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(to bottom, transparent, var(--panel)); pointer-events: none; } .feed-row { display: flex; gap: 10px; align-items: baseline; padding: 2px 0; } .feed-row .ts { color: var(--fg-faint); width: 56px; } .feed-row .ex { color: var(--fg-mute); width: 56px; } .feed-row .side { width: 36px; } .feed-row .side.b { color: var(--up); } .feed-row .side.s { color: var(--down); } .feed-row .px { color: var(--fg); } /* ---------- Hero live performance strip (above the CTA row) ---------- */ .hero-live { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; } /* The four tiles never fit one line inside the hero column, so the strip is a deliberate 2x2 block, not a wrapping row: an explicit grid puts a hairline only ever between two cells. The wrapping flex it replaces left the last rule of each visual row hanging in empty space. */ .hero-live-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .hlt { display: flex; flex-direction: column; gap: 3px; padding: 10px 18px; min-width: 0; } .hlt:nth-child(odd) { padding-left: 0; } /* column 1 aligns with the h1 */ .hlt:nth-child(even) { border-left: 1px solid var(--line-soft); } .hlt:nth-child(n + 3) { border-top: 1px solid var(--line-soft); } .hlt .hlt-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); } .hlt .hlt-v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); white-space: nowrap; } /* Net profit is the figure the strip exists for: one step up (28/22 = 1.27). min-width is set in ch by the component so the count-up never widens it. */ .hlt:first-child .hlt-v { font-size: 24px; } .hlt .hlt-v.up { color: var(--up); } .hlt .hlt-v.down { color: var(--down); } /* provenance line and the on-chain link share one line under the block */ .hero-live-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .hero-live-verify { flex-shrink: 0; } .hero-live-note { flex: 1 1 0; /* wraps instead of pushing the link onto its own line */ min-width: 0; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-mute); letter-spacing: 0.04em; } /* ---------- How it works ---------- */ .how-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; } .how-steps { display: flex; flex-direction: column; gap: 8px; } .how-step { display: grid; grid-template-columns: 40px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; transition: opacity 0.2s var(--ease); } .how-step:last-child { border-bottom: none; } .how-step.dim { opacity: 0.42; } .how-step .num { font-family: var(--font-mono); font-size: 12px; color: var(--fg-mute); padding-top: 5px; } .how-step h3 { font-size: 19px; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.01em; } .how-step p { color: var(--fg-dim); font-size: 14.5px; line-height: 1.55; text-wrap: pretty; } .how-viz { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 24px; position: relative; } .how-viz svg { width: 100%; height: 380px; } /* ---------- Performance ---------- */ .perf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 32px; } .perf-stat { background: var(--panel); padding: 22px 24px; } .perf-stat .lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 10px; } .perf-stat .val { font-family: var(--font-mono); font-size: 32px; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 8px; } .perf-stat .delta { font-family: var(--font-mono); font-size: 12px; } /* ROI row + capital base line (rendered only when the export carries the fields) */ .roi-row { display: flex; align-items: baseline; gap: 34px; flex-wrap: wrap; padding: 18px 24px; margin: -18px 0 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .roi-title { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); } /* Two type steps only: 10.5px labels, 20px figures (ratio 1.9). The old 11px label next to a 16px figure read as one blurred size. */ .roi-cell { display: flex; flex-direction: column; gap: 3px; } .roi-head { display: flex; align-items: baseline; gap: 10px; } .roi-cell .roi-l { font-size: 10.5px; color: var(--fg-mute); text-transform: uppercase; letter-spacing: 0.1em; } .roi-cell b { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; } .roi-cell b.up { color: var(--up); } .roi-cell b.down { color: var(--down); } .roi-cell .roi-ann { font-size: 11px; color: var(--fg-dim); letter-spacing: 0.02em; } .roi-cell .roi-sub { font-size: 10.5px; color: var(--fg-faint); } .roi-note { flex-basis: 100%; font-size: 10.5px; color: var(--fg-mute); letter-spacing: 0.02em; } .capline { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--fg-dim); margin: -4px 0 10px; } .perf-proj { margin: 0 0 22px; font-size: 14px; } .perf-proj a { color: var(--accent-text); text-decoration: none; border-bottom: 1px solid color-mix(in oklch, currentColor 35%, transparent); } .perf-proj a:hover { border-bottom-color: currentColor; } .perf-table-note { padding: 12px 22px 14px; border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-mute); letter-spacing: 0.02em; line-height: 1.55; } .perf-table-note code { color: var(--accent-text); background: var(--bg-2); padding: 1px 6px; border-radius: 4px; font-size: 11px; } .perf-chart { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .perf-chart-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line-soft); } .perf-chart-head h3 { font-size: 15px; font-weight: 500; } .tabs { display: flex; gap: 4px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 6px; padding: 3px; } .tabs button { padding: 5px 11px; font-family: var(--font-mono); font-size: 11px; background: transparent; border: none; color: var(--fg-mute); cursor: pointer; border-radius: 4px; letter-spacing: 0.06em; text-transform: uppercase; } .tabs button.active { background: var(--bg-3); color: var(--fg); } .perf-chart-body { padding: 18px 22px 24px; } .perf-chart-body svg { width: 100%; height: 320px; display: block; } /* Line draw-in, keyed on the scroll reveal. The path carries pathLength="1", so the dash units are normalised and no measured length is needed. Written in the safe direction: drawn by default, hidden only while the block is armed-but-not-revealed. No reveal.js (no JS, no IntersectionObserver, reduced motion) => .reveal never lands => the line is simply there. */ .perf-line { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.05s var(--ease); } .perf-line-end { opacity: 1; transition: opacity 0.35s var(--ease) 0.8s; } .reveal:not(.in) .perf-line { stroke-dashoffset: 1; transition: none; } .reveal:not(.in) .perf-line-end { opacity: 0; transition: none; } @media (prefers-reduced-motion: reduce) { .perf-line, .reveal:not(.in) .perf-line { stroke-dashoffset: 0; transition: none; } .perf-line-end, .reveal:not(.in) .perf-line-end { opacity: 1; transition: none; } } /* legends */ .legend { display: flex; gap: 18px; align-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim); } .legend i { display: inline-block; width: 10px; height: 2px; background: currentColor; margin-right: 6px; } /* Performance V2 — split layout */ .perf-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; } .perf-table { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .perf-table-head { padding: 18px 22px; border-bottom: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; } .perf-table-head h3 { font-size: 15px; font-weight: 500; } table.perf { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12.5px; } table.perf th, table.perf td { padding: 11px 22px; text-align: left; border-bottom: 1px solid var(--line-soft); } table.perf th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-mute); font-weight: 500; background: var(--bg-1); } table.perf td.r, table.perf th.r { text-align: right; } table.perf tbody tr:last-child td { border-bottom: none; } table.perf tbody tr:hover { background: var(--bg-1); } /* ---------- Exchanges + Features ---------- */ .ex-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 64px; } .ex-cell { background: var(--panel); padding: 28px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: background 0.2s var(--ease); } .ex-cell:hover { background: var(--panel-elev); } .ex-logo { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: #07090d; } .ex-logo.bn { background: linear-gradient(135deg, #F3BA2F, #F0B90B); } .ex-logo.mx { background: linear-gradient(135deg, #0BB8E0, #0693C2); color: white; } .ex-logo.kc { background: linear-gradient(135deg, #23AF91, #1A8F73); color: white; } .ex-logo.kr { background: linear-gradient(135deg, #5741D9, #4531B9); color: white; } .ex-logo.hl { background: linear-gradient(135deg, #97FCE4, #5fe8c4); } .ex-logo.bv { background: linear-gradient(135deg, #3B7BFF, #1F5AE0); color: white; } .ex-logo.as { background: linear-gradient(135deg, #FFD37C, #E89532); } .ex-name { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg); } .ex-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-mute); } .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .feat { background: var(--panel); padding: 28px; display: flex; flex-direction: column; gap: 12px; } .feat-icon { width: 28px; height: 28px; display: grid; place-items: center; color: var(--accent-text); margin-bottom: 6px; } .feat h4 { font-size: 16px; font-weight: 600; letter-spacing: -0.005em; } .feat p { color: var(--fg-dim); font-size: 14.5px; line-height: 1.55; text-wrap: pretty; } /* ---------- Pricing ---------- */ .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .price-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 28px; display: flex; flex-direction: column; position: relative; } .price-card.featured { border-color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent-text), 0 0 60px var(--accent-glow); } .price-card .name { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 8px; } .price-card.featured .name { color: var(--accent-text); } .price-card .tagline { font-size: 14px; color: var(--fg-dim); margin-bottom: 18px; } .price-card .amount { display: flex; align-items: baseline; gap: 6px; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line-soft); } .price-card .amount .v { font-family: var(--font-mono); font-size: 40px; font-weight: 500; letter-spacing: -0.02em; } .price-card .amount .u { font-family: var(--font-mono); font-size: 13px; color: var(--fg-mute); } .price-card ul { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 24px; flex: 1; } .price-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--fg-dim); } .price-card li svg { flex-shrink: 0; color: var(--accent-text); margin-top: 4px; } .price-card .btn { width: 100%; justify-content: center; } /* ---------- CTA ---------- */ .cta { text-align: center; padding: 96px 0; border-top: 1px solid var(--line-soft); } .cta h2 { font-size: clamp(36px, 5vw, 56px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 18px; text-wrap: balance; } .cta p { color: var(--fg-dim); font-size: 17px; max-width: 520px; margin: 0 auto 32px; text-wrap: pretty; } .cta-ctas { display: flex; gap: 12px; justify-content: center; } /* ---------- Footer ---------- */ .foot { border-top: 1px solid var(--line-soft); padding: 36px 0; } .foot-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 28px; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-mute); letter-spacing: 0.04em; } .foot-links { display: flex; flex-wrap: wrap; gap: 22px; } .foot-links a { color: var(--fg-mute); text-decoration: none; } .foot-links a:hover { color: var(--fg); } /* ---------- Principle (slide 2 explainer) ---------- */ .principle { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; } .thesis { border-left: 1px solid var(--line-strong); padding: 8px 0 8px 26px; display: flex; flex-direction: column; gap: 18px; } .thesis blockquote { font-size: 22px; line-height: 1.35; letter-spacing: -0.01em; color: var(--fg); font-weight: 400; text-wrap: balance; } .thesis cite { font-family: var(--font-mono); font-size: 11px; font-style: normal; color: var(--fg-mute); letter-spacing: 0.08em; text-transform: uppercase; } .thesis cite::before { content: "— "; } .mech { display: flex; flex-direction: column; gap: 14px; } .mech-step { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; align-items: flex-start; } .mech-step .ix { font-family: var(--font-mono); font-size: 11px; color: var(--accent-text); padding-top: 2px; } .mech-step h4 { font-size: 14.5px; font-weight: 600; margin-bottom: 4px; } .mech-step p { font-size: 14.5px; color: var(--fg-dim); line-height: 1.55; } .mech-step code { font-family: var(--font-mono); font-size: 12px; background: var(--bg-2); padding: 1px 6px; border-radius: 4px; color: var(--accent-text); } /* ---------- Product screens preview ---------- */ .screens { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; } .screen { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; position: relative; box-shadow: var(--shadow-card); /* keeps the dark screenshot from floating on white */ transition: transform 0.3s var(--ease), border-color 0.3s var(--ease); } .screen:hover { border-color: var(--line-strong); transform: translateY(-2px); } /* Dual-theme captures: the real app window chrome is in the PNG, no fake bar. Switching is attribute-based ([data-theme]) so it follows the site toggle, including 'system' (theme.js resolves system to the attribute). */ .screen-img { display: block; width: 100%; height: auto; background: var(--bg-1); } .screen-img--dark { display: none; } [data-theme="dark"] .screen-img--light { display: none; } [data-theme="dark"] .screen-img--dark { display: block; } /* caption sits on a screenshot that matches the site theme: token colors, gradient from the panel color so text stays legible on light captures too */ .screen-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 44px 18px 16px; background: linear-gradient(to top, var(--panel) 0%, color-mix(in srgb, var(--panel) 86%, transparent) 60%, transparent 100%); } .screen-caption .eyebrow { margin-bottom: 4px; display: block; color: var(--fg-mute); } .screen-caption h4 { font-size: 16px; font-weight: 600; color: var(--fg); } .screen-caption p { font-size: 13px; color: var(--fg-dim); margin-top: 4px; } /* layout spans */ .screen.span-7 { grid-column: span 7; } .screen.span-5 { grid-column: span 5; } .screen.span-6 { grid-column: span 6; } .screen.span-4 { grid-column: span 4; } .screen.span-8 { grid-column: span 8; } .screen.span-12 { grid-column: span 12; } /* ---------- New in v3.0.0 — bento ---------- Hierarchy, not a repeat: one dominant lead cell (Telegram remote control, full width, accent-washed, carrying the real capture), two second-tier cells of unequal width, then a dense key/value list for everything else. Each tier has its own inner structure: prose + token rail + cascade / prose + mono figure / prose + counters / label-value rows. */ .v3-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .v3-lead { grid-column: 1 / -1; } .v3-cell--grid { grid-column: span 7; } .v3-cell--analytics { grid-column: span 5; } .v3-rest { grid-column: 1 / -1; } /* --- lead cell --- */ .v3-lead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: start; padding: 30px 32px; border-radius: 14px; /* the one committed use of the accent in this section */ border: 1px solid color-mix(in srgb, var(--accent-text) 32%, var(--line)); background: radial-gradient(130% 150% at 100% 0%, var(--accent-glow) 0%, transparent 58%), var(--panel); } .v3-lead h3 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.14; margin-bottom: 12px; } /* Measure caps in this section are ~70 rendered characters, not 70ch: 1ch is the advance of "0" (0.6em in IBM Plex Sans) while a running character averages ~0.45em, so a ch value overshoots the real measure by about a third. Counted on rendered lines, 54ch lands at 70-72 characters. */ .v3-lead-copy > p { font-size: 15px; line-height: 1.62; color: var(--fg-dim); max-width: 54ch; text-wrap: pretty; } /* footnote tier, a clean step down from the 15px lede (1.25) rather than the near-miss size that reads as an accident */ .v3-lead-copy > p.v3-lead-foot { margin-top: 18px; font-size: 12px; line-height: 1.65; color: var(--fg-mute); } /* inline command in prose */ .v3-inl { font-family: var(--font-mono); font-size: 0.92em; color: var(--accent-text); white-space: nowrap; } /* the token rail: real commands, tappable-looking */ .v3-cmds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; } .v3-cmds code { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; padding: 5px 10px; border-radius: 999px; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent-text) 26%, transparent); } /* the /set tap cascade: each step indents under the previous one */ .v3-cascade { list-style: none; margin-top: 20px; border-top: 1px solid var(--line-soft); } .v3-cascade li { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; line-height: 1.5; color: var(--fg-dim); } .v3-cascade-k { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg); } .v3-cascade li + li .v3-cascade-k { padding-left: 16px; } .v3-cascade li + li + li .v3-cascade-k { padding-left: 32px; } .v3-cascade li + li .v3-cascade-k::before { content: "↳ "; color: var(--fg-faint); } /* the Telegram capture: a chat window is a dark surface in both themes, so .v3-tg carries the dark token palette (see the top of this file) */ .v3-tg { width: 375px; max-width: 100%; padding: 12px 12px 11px; border-radius: 12px; background: var(--bg-1); border: 1px solid var(--line); } .v3-tg img { display: block; width: 100%; height: auto; border-radius: 8px; } .v3-tg figcaption { margin-top: 11px; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.55; letter-spacing: 0.02em; color: var(--fg-mute); } /* --- second tier --- */ .v3-cell { display: flex; flex-direction: column; gap: 12px; padding: 24px 26px 22px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); } .v3-cell h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; } .v3-cell p { font-size: 14px; line-height: 1.6; color: var(--fg-dim); max-width: 53ch; /* ~70 rendered characters, see .v3-lead-copy above */ text-wrap: pretty; } /* second-tier cells run one mono step below the lead cell's 11.5px, so the step down from their 14px prose stays >= 1.25 */ .v3-cell-link { margin-top: auto; padding-top: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--accent-text); text-decoration: none; } .v3-cell-link:hover { text-decoration: underline; } /* mono figure — restructuring, before and after */ .v3-fig { font-family: var(--font-mono); font-size: 11px; line-height: 1.75; color: var(--fg-mute); background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: 8px; padding: 11px 13px; overflow-x: auto; white-space: nowrap; } .v3-fig b { color: var(--fg); font-weight: 500; } .v3-fig-to { color: var(--accent-text); } /* counters — analytics */ .v3-figs { display: flex; gap: 30px; } .v3-figs > div { display: flex; flex-direction: column; } .v3-fignum { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -0.025em; color: var(--fg); } .v3-figlbl { margin-top: 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); } /* --- the rest: dense label / value rows, not tiles --- */ .v3-rest { padding: 2px 26px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); } .v3-rest-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); } .v3-rest-row:last-child { border-bottom: none; } .v3-rest-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); padding-top: 3px; } .v3-rest-v { font-size: 13.5px; line-height: 1.62; color: var(--fg-dim); max-width: 54ch; /* ~70 rendered characters, see .v3-lead-copy above */ text-wrap: pretty; } .v3-foot { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--fg-mute); margin-top: 24px; } /* Internal cascade for the bento. reveal.js arms `section > .wrap > *`, so the .reveal class lands on .v3-bento itself; the cells then run their own staggered entrance inside it. Safe direction again: visible unless the block is armed-but-not-revealed, so no reveal.js (no JS, no IntersectionObserver, reduced motion) means everything is simply on screen. */ .v3-bento > * { opacity: 1; transform: none; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); } .v3-bento.reveal:not(.in) > * { opacity: 0; transform: translateY(10px); transition: none; } .v3-bento > *:nth-child(2) { transition-delay: 0.09s; } .v3-bento > *:nth-child(3) { transition-delay: 0.16s; } .v3-bento > *:nth-child(4) { transition-delay: 0.23s; } /* the block fades, the cells travel: without this the container's own 14px and the cells' 10px would stack into one 24px lurch */ .v3-bento.reveal { transform: none; } @media (prefers-reduced-motion: reduce) { .v3-bento > *, .v3-bento.reveal:not(.in) > * { opacity: 1; transform: none; transition: none; } } /* ---------- Demo video (framed like the gallery) ---------- */ .demo-frame { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-card); max-width: 980px; } .demo-frame video { display: block; width: 100%; height: auto; background: #0b0e14; /* poster is a dark capture; avoids a white flash */ } /* ---------- Exchange detail cards ---------- */ .ex-details { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .ex-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 22px 20px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; } .ex-card-top { display: flex; align-items: center; gap: 10px; } .ex-card-top .ex-logo { width: 28px; height: 28px; border-radius: 6px; font-size: 11px; } .ex-card h4 { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; } .ex-card .note { font-size: 12.5px; color: var(--fg-dim); line-height: 1.5; flex: 1; } .ex-card .meta { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line-soft); } .ex-card .meta-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-mute); letter-spacing: 0.04em; text-transform: uppercase; } .ex-card .meta-row b { font-weight: 500; color: var(--fg-dim); } .ex-card .pin { font-family: var(--font-mono); font-size: 10.5px; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.08em; text-transform: uppercase; } .ex-card .pin.warn { background: rgba(255, 180, 84, 0.12); color: var(--warn); } .ex-card .pin.info { background: rgba(139, 124, 255, 0.14); color: var(--info); } .ex-card .pin.ok { background: rgba(124, 252, 182, 0.12); color: var(--up); } /* ---------- Local-first manifesto ---------- */ .local { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; } .local-callouts { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .local-callout { background: var(--panel); padding: 22px 26px; display: grid; grid-template-columns: 24px 1fr; gap: 16px; align-items: flex-start; } .local-callout svg { color: var(--accent-text); margin-top: 2px; } .local-callout h4 { font-size: 15px; font-weight: 600; margin-bottom: 4px; } .local-callout p { font-size: 14.5px; color: var(--fg-dim); line-height: 1.55; } .shield { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 32px; position: relative; overflow: hidden; } .shield::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--line-soft) 1px, transparent 1px), linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%); mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%); opacity: 0.45; pointer-events: none; } .shield-inner { position: relative; } .kv { display: grid; grid-template-columns: 1fr auto; gap: 10px 24px; font-family: var(--font-mono); font-size: 12.5px; } .kv .k { color: var(--fg-mute); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; padding-top: 3px; } .kv .v { color: var(--fg); } .kv .v.no { color: var(--down); } .kv .v.ok { color: var(--up); } /* ---------- Docs page ---------- */ .docs-layout { display: grid; grid-template-columns: 240px 1fr; gap: 64px; max-width: 1240px; margin: 0 auto; padding: 48px 32px; } .toc { position: sticky; top: 88px; align-self: flex-start; max-height: calc(100vh - 110px); overflow-y: auto; font-size: 13px; } .toc h5 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 14px; } .toc ul { list-style: none; display: flex; flex-direction: column; } .toc li a { display: block; padding: 6px 0 6px 14px; color: var(--fg-dim); text-decoration: none; border-left: 1px solid var(--line); transition: color 0.15s, border-color 0.15s; font-size: 13px; } .toc li a:hover { color: var(--fg); border-color: var(--line-strong); } .toc li a.active { color: var(--accent-text); border-color: var(--accent-text); } .toc li.sub a { padding-left: 24px; font-size: 12.5px; color: var(--fg-mute); } .doc-content { max-width: 760px; } .doc-content section { padding: 0; scroll-margin-top: 88px; } .doc-content section + section { border-top: none; } .doc-content h1 { font-size: 42px; font-weight: 600; letter-spacing: -0.025em; margin-bottom: 12px; text-wrap: balance; } .doc-content .lede { font-size: 17px; color: var(--fg-dim); margin-bottom: 48px; text-wrap: pretty; max-width: 620px; } .doc-content h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.015em; margin: 56px 0 16px; padding-top: 28px; border-top: 1px solid var(--line-soft); } .doc-content h2:first-of-type { border-top: none; padding-top: 0; margin-top: 8px; } .doc-content h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.005em; margin: 36px 0 12px; display: flex; align-items: center; gap: 12px; } .doc-content h3 .vlogo { width: 22px; height: 22px; border-radius: 5px; display: inline-grid; place-items: center; font-family: var(--font-mono); font-size: 10px; font-weight: 700; } .doc-content p { font-size: 15px; color: var(--fg-dim); line-height: 1.65; margin-bottom: 14px; text-wrap: pretty; } /* prose measure — direct flow only (cards/callouts keep their box width) */ .doc-content section > p, .doc-content section > ul, .doc-content section > ol { max-width: 74ch; } .doc-content p strong { color: var(--fg); font-weight: 600; } .doc-content p code, .doc-content li code { font-family: var(--font-mono); font-size: 13px; background: var(--bg-2); padding: 2px 7px; border-radius: 4px; color: var(--accent-text); border: 1px solid var(--line); } .doc-content ol, .doc-content ul { margin: 0 0 18px 22px; color: var(--fg-dim); font-size: 15px; line-height: 1.7; } .doc-content ol li, .doc-content ul li { margin-bottom: 6px; } .doc-content a { color: var(--accent-text); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent-text) 35%, transparent); } .doc-content a:hover { border-bottom-color: var(--accent-text); } /* Buttons inside docs reset link styles */ .doc-content a.btn { border-bottom: none; } .doc-content a.btn:hover { border-bottom: none; } .doc-content a.btn-primary { color: var(--on-accent); } .doc-content a.btn-ghost { color: var(--fg); } .doc-content a.djourney-step { border-bottom: none; } .doc-content a.djourney-step:hover { border-bottom: none; } .doc-callout { display: flex; gap: 14px; padding: 18px 20px; border-radius: 8px; margin: 18px 0; background: var(--bg-1); border: 1px solid var(--line); border-left: 3px solid var(--accent-text); } .doc-callout.warn { border-left-color: var(--warn); } .doc-callout.danger { border-left-color: var(--down); } .doc-callout.info { border-left-color: var(--info); } .doc-callout svg { flex-shrink: 0; color: var(--accent-text); margin-top: 3px; } .doc-callout.warn svg { color: var(--warn); } .doc-callout.danger svg { color: var(--down); } .doc-callout.info svg { color: var(--info); } .doc-callout p { margin: 0; font-size: 14px; } .doc-callout strong { display: block; color: var(--fg); margin-bottom: 4px; font-size: 13px; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; } .doc-step { display: grid; grid-template-columns: 32px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); } .doc-step:last-child { border-bottom: none; } .doc-step .n { font-family: var(--font-mono); font-size: 12px; color: var(--fg-mute); padding-top: 3px; font-variant-numeric: tabular-nums; } .doc-step h4 { font-size: 15.5px; font-weight: 600; margin-bottom: 6px; } .doc-step p { font-size: 14px; color: var(--fg-dim); line-height: 1.6; margin-bottom: 0; } /* cycle anatomy svg styling */ .cycle-diagram { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 28px; margin: 24px 0; } .cycle-diagram svg { width: 100%; height: auto; display: block; } /* docs nav (smaller) */ .docs-nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px) saturate(140%); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid var(--line-soft); transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease); } /* Placed after both nav rules so it wins on source order. The scrolled state is colour only and stays on under reduced motion; only the fade is dropped. */ @media (prefers-reduced-motion: reduce) { .nav, .docs-nav { transition-duration: 0s; } } .docs-nav-inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; height: 60px; } .docs-nav .crumb { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-mute); letter-spacing: 0.04em; } .docs-nav .crumb a { color: var(--fg-mute); text-decoration: none; } .docs-nav .crumb a:hover { color: var(--fg); } .docs-nav .crumb .sep { color: var(--fg-faint); } /* ============================================================ */ /* Docs · graphic components (visuals.jsx / visuals-*.jsx) */ /* ============================================================ */ /* DocsHero */ .dhero { position: relative; margin: 8px 0 32px; padding: 32px 36px 28px; background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg) 100%); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; } .dhero-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(80% 60% at 50% 0%, #000, transparent 80%); opacity: 0.5; } .dhero-left { position: relative; z-index: 1; } .dhero-left h1 { font-size: 38px !important; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; margin: 14px 0 14px !important; } .dhero-left .lede { font-size: 16px !important; max-width: 520px !important; margin-bottom: 20px !important; } .dhero-ctas { display: flex; gap: 10px; } .dhero-right { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dhero-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--panel-glass); border: 1px solid var(--line); border-radius: 10px; } .dhero-stat .v { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--fg); line-height: 1; letter-spacing: -0.02em; } .dhero-stat .v.up { color: var(--up); } .dhero-stat .v small { font-size: 12px; color: var(--fg-mute); margin-left: 4px; font-weight: 400; } .dhero-stat .l { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-mute); letter-spacing: 0.08em; text-transform: uppercase; } /* JourneyMap */ .djourney { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0 0 32px; } .djourney-rail { position: absolute; left: 36px; right: 36px; top: 38px; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--line-strong) 10%, var(--line-strong) 90%, transparent 100%); z-index: 0; } .djourney-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; text-decoration: none !important; color: inherit; transition: transform 200ms var(--ease), border-color 200ms var(--ease); opacity: 0; animation: djFadeUp 600ms var(--ease) both; } .djourney-step:hover { transform: translateY(-2px); border-color: var(--line-strong); background: var(--panel-elev); } @keyframes djFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .djourney-num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--accent-text); padding: 2px 8px; border: 1px solid var(--accent-text); border-radius: 99px; background: var(--accent-glow); } .djourney-ico { width: 36px; height: 36px; display: grid; place-items: center; background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; color: var(--accent-text); } .djourney-title { font-size: 14px; font-weight: 600; color: var(--fg); } .djourney-sub { font-family: var(--font-mono); font-size: 11px; color: var(--fg-mute); } /* PermissionMatrix */ .dmtx { margin: 28px 0 48px; } .dmtx-head { margin-bottom: 18px; } .dmtx-head .eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-text); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; } .dmtx-head h3 { font-size: 17px !important; color: var(--fg); font-weight: 500; display: block !important; margin: 0 !important; padding: 0 !important; } .dmtx-grid { display: grid; grid-template-columns: 1.4fr repeat(5, 0.65fr) 0.9fr 0.75fr; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-family: var(--font-mono); } .dmtx-cell { padding: 12px 10px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); font-size: 12px; color: var(--fg-dim); display: flex; align-items: center; gap: 8px; } .dmtx-cell:last-child, .dmtx-grid > *:nth-child(8n) { border-right: none; } .dmtx-th { background: var(--bg-1); color: var(--fg-mute); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding-top: 14px; padding-bottom: 14px; } .dmtx-req { font-size: 9px; color: var(--up); letter-spacing: 0.08em; } .dmtx-req.off { color: var(--fg-faint); } .dmtx-venue { gap: 12px; } .dmtx-vn { font-size: 13px; color: var(--fg); font-weight: 500; font-family: var(--font-sans); } .dmtx-ip { display: inline-block; font-size: 9.5px; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 99px; margin-top: 2px; } .dmtx-ip.ok { color: var(--up); background: rgba(124,252,182,0.12); } .dmtx-ip.warn { color: var(--warn); background: rgba(255,180,84,0.14); } .dmtx-ip.muted{ color: var(--fg-mute); background: var(--bg-2); } .dmtx-mark { font-family: var(--font-mono); font-size: 16px; line-height: 1; } .dmtx-mark.on { color: var(--up); } .dmtx-mark.off { color: var(--fg-faint); } .dmtx-num { font-size: 18px; color: var(--fg); font-weight: 500; } .dmtx-num-l { font-size: 10px; color: var(--fg-mute); } .dmtx-pin { font-size: 11px; color: var(--fg); font-weight: 500; padding: 3px 8px; border-radius: 4px; background: var(--bg-1); } .dmtx-pin.warn { color: var(--warn); background: rgba(255,180,84,0.10); } /* ExchangeCard grid */ .dxc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin: 24px 0 36px; } .dxc { background: var(--panel); border: 1px solid var(--line); scroll-margin-top: 80px; border-radius: 12px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; } .dxc-top { display: flex; align-items: flex-start; gap: 12px; } .dxc-top .ex-logo { width: 36px; height: 36px; border-radius: 8px; font-size: 14px; flex-shrink: 0; } .dxc-head { flex: 1; } .dxc-head h4 { font-size: 16px !important; margin: 0 0 2px !important; color: var(--fg); font-weight: 600; } .dxc-where { font-family: var(--font-mono); font-size: 11px; color: var(--fg-mute); letter-spacing: 0.04em; } .dxc-badge { font-family: var(--font-mono); font-size: 9.5px; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.08em; text-transform: uppercase; } .dxc-badge.info { background: rgba(139,124,255,0.12); color: var(--info); } .dxc-badge.warn { background: rgba(255,180,84,0.14); color: var(--warn); } .dxc-badge.danger { background: rgba(255,77,109,0.12); color: var(--down); } .dxc-badge.ok { background: rgba(124,252,182,0.12); color: var(--up); } .dxc-steps { list-style: none !important; margin: 0 !important; display: flex; flex-direction: column; gap: 10px; } .dxc-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; margin: 0 !important; font-size: 13.5px !important; } .dxc-n { font-family: var(--font-mono); font-size: 10px; color: var(--accent-text); letter-spacing: 0.08em; background: var(--accent-glow); border: 1px solid color-mix(in srgb, var(--accent-text) 30%, transparent); border-radius: 4px; display: grid; place-items: center; height: 22px; } .dxc-steps strong { color: var(--fg); font-size: 13.5px; font-weight: 600; display: block; } .dxc-steps p { font-size: 12.5px !important; color: var(--fg-dim); margin: 2px 0 0 !important; line-height: 1.55; } .dxc-watch { display: flex; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 12px; margin-top: auto; } .dxc-watch.warn { background: rgba(255,180,84,0.08); border: 1px solid rgba(255,180,84,0.2); } .dxc-watch.danger { background: rgba(255,77,109,0.08); border: 1px solid rgba(255,77,109,0.2); } .dxc-watch-icon { font-family: var(--font-mono); font-weight: 700; width: 18px; height: 18px; flex-shrink: 0; display: grid; place-items: center; border-radius: 4px; background: var(--bg-3); } .dxc-watch.warn .dxc-watch-icon { color: var(--warn); background: rgba(255,180,84,0.18); } .dxc-watch.danger .dxc-watch-icon { color: var(--down); background: rgba(255,77,109,0.12); } .dxc-watch strong { display: block; color: var(--fg); font-size: 11.5px; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; } .dxc-watch p { margin: 0 !important; color: var(--fg-dim); font-size: 12px !important; } /* InstallStepper */ .dinst { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0 36px; } .dinst-card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0 20px 20px; overflow: hidden; opacity: 0; animation: djFadeUp 700ms var(--ease) both; } .dinst-art { margin: 0 -20px 14px; padding: 18px 0 0; background: linear-gradient(180deg, var(--bg-1), transparent); display: grid; place-items: center; border-bottom: 1px solid var(--line-soft); } .dinst-art svg { width: 140px; height: 80px; } .dinst-num { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--accent-text); margin-bottom: 6px; } .dinst-card h4 { font-size: 15px !important; margin: 0 0 6px !important; color: var(--fg); font-weight: 600; } .dinst-card p { font-size: 12.5px !important; color: var(--fg-dim); margin: 0 !important; line-height: 1.55; } .dinst-card-link { display: flex; flex-direction: column; text-decoration: none !important; color: inherit; border-bottom: none !important; cursor: pointer; transition: border-color 180ms var(--ease), transform 180ms var(--ease), background 180ms var(--ease); } .dinst-card-link:hover { border-color: var(--accent-text) !important; transform: translateY(-2px); background: linear-gradient(180deg, rgba(124,252,182,0.04), transparent 60%), var(--panel); } .dinst-card-link:hover .dinst-cta { color: var(--accent-text); } .dinst-card-link:hover .dinst-cta .arrow { transform: translateX(2px); } .dinst-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg); font-weight: 500; } .dinst-cta .arrow { transition: transform 180ms var(--ease); display: inline-block; } /* PlanTimeline */ .dplan { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 24px 24px 20px; margin: 22px 0 36px; } .dplan-head { margin-bottom: 16px; } .dplan-head .eyebrow { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-text); letter-spacing: 0.12em; text-transform: uppercase; display: block; margin-bottom: 6px; } .dplan-head h3 { display: block !important; font-size: 18px !important; color: var(--fg); font-weight: 600; margin: 0 0 6px !important; padding: 0 !important; } .dplan-head p { font-size: 13px !important; color: var(--fg-dim); margin: 0 !important; } .dplan-svg { width: 100%; height: auto; display: block; } @keyframes dplanPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.55; } transform-origin: center; } /* QuickStart7Day */ .dqs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 18px 0 32px; } .dqs-day { padding: 14px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; opacity: 0; animation: djFadeUp 500ms var(--ease) both; } .dqs-day .dqs-d { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-mute); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; } .dqs-day .dqs-what { font-size: 13px; color: var(--fg); line-height: 1.4; font-weight: 500; } .dqs-day.dqs-up { border-color: rgba(124,252,182,0.3); background: rgba(124,252,182,0.04); } .dqs-day.dqs-up .dqs-what { color: var(--up); } .dqs-day.dqs-accent { border-color: var(--accent-text); background: var(--accent-glow); } .dqs-day.dqs-accent .dqs-what { color: var(--accent-text); } .dqs-day.dqs-mute .dqs-what { color: var(--fg-dim); font-weight: 400; } /* responsive docs */ @media (max-width: 900px) { .dhero { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; } .djourney { grid-template-columns: repeat(2, minmax(0, 1fr)); } .djourney-rail { display: none; } .dmtx-grid { grid-template-columns: 1.4fr repeat(5, 1fr) 1fr 1fr; font-size: 11px; } .dxc-grid { grid-template-columns: minmax(0, 1fr); } .dinst { grid-template-columns: minmax(0, 1fr); } .dqs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Short desktop screens (1366x768 and 1280x720 laptops, minus browser chrome): the hero has to end above the fold, CTA included, or the primary action is invisible on the most common laptop there is. Height-scoped so tall displays keep the roomier rhythm. */ @media (min-width: 1000px) and (max-height: 820px) { .hero { padding: 24px 0 48px; } .hero h1 { font-size: clamp(34px, 3.9vw, 50px); margin: 10px 0 12px; } .hero .lede { margin-bottom: 14px; } .hero-live { margin-bottom: 12px; } .hlt { padding: 8px 16px; } .hlt .hlt-v { font-size: 18px; } .hlt:first-child .hlt-v { font-size: 22px; } } /* Very short desktop viewports (a browser window that is not maximised on a 768px screen lands here). Same intent as the rule above, one step tighter. */ @media (min-width: 1000px) and (max-height: 680px) { .hero { padding: 16px 0 36px; } .hero h1 { font-size: clamp(30px, 3.4vw, 42px); margin: 8px 0 10px; } .hero .lede { font-size: 16px; margin-bottom: 10px; } .hero-live { margin-bottom: 10px; } .hlt { padding: 6px 14px; } .hlt .hlt-v { font-size: 16px; } .hlt:first-child .hlt-v { font-size: 19px; } } /* ---------- Responsive ---------- */ /* Section rhythm — deliberately uneven above 1000px. The release section gets the most air (it is the reason to visit today), the demo the least (the video carries itself). Scoped to a min-width so the phone rules below, which target the bare `section`, are never out-specified by these ids. */ @media (min-width: 1001px) { #v3 { padding: 116px 0 104px; } #performance { padding: 104px 0; } #demo { padding: 76px 0 88px; } } @media (max-width: 1000px) { .nav-links { display: none; } .v3-lead { grid-template-columns: minmax(0, 1fr); gap: 26px; } .v3-cell--grid, .v3-cell--analytics { grid-column: span 6; } .perf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .perf-stat { border-bottom: 1px solid var(--line); } .how-grid { grid-template-columns: minmax(0, 1fr); } .feat-grid { grid-template-columns: minmax(0, 1fr); } .ex-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .price-grid { grid-template-columns: minmax(0, 1fr); } .perf-split { grid-template-columns: minmax(0, 1fr); } .principle { grid-template-columns: minmax(0, 1fr); gap: 32px; } .ex-details { grid-template-columns: repeat(2, minmax(0, 1fr)); } .local { grid-template-columns: minmax(0, 1fr); gap: 32px; } .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 20px; } .toc { position: static; max-height: none; } .screens { grid-template-columns: minmax(0, 1fr); } .screen.span-7, .screen.span-5, .screen.span-6, .screen.span-4, .screen.span-8, .screen.span-12 { grid-column: span 1; } /* Universal min-width: 0 so long mono / code / nowrap children can't blow out their grid column. This is the fix for the "content sprawls past the viewport" class of bugs. */ .docs-layout > *, .dxc-grid > *, .djourney > *, .dinst > *, .dqs > *, .local > *, .principle > *, .perf-split > *, .price-grid > *, .ex-details > *, .perf-stats > *, .screens > *, .dhero > *, .dhero-right > *, .how-grid > *, .feat-grid > *, .ex-strip > *, .tickers > *, .hero-row > *, .v3-bento > *, .v3-lead > * { min-width: 0; } } /* ============================================================ */ /* PHONE — ≤640px */ /* ============================================================ */ @media (max-width: 640px) { /* ---- Global rhythm ---- */ .wrap { padding: 0 18px; } section { padding: 56px 0; } .section-head { margin-bottom: 32px; gap: 10px; } .section-head p { font-size: 15px; } /* ---- Nav (landing) ---- */ .nav-inner { height: 56px; gap: 8px; } .brand-name { font-size: 11px; letter-spacing: 0.02em; } .nav-cta { gap: 8px; } .nav-cta .btn-ghost { display: none; } /* keep only Download on phones */ /* theme switch compact so brand + switch + Download fit a 375px nav */ .theme-switch { padding: 1px; gap: 1px; } .theme-switch button { width: 24px; height: 24px; } /* ---- Hero ---- */ .hero { padding: 56px 0 48px; } .hero h1 { font-size: clamp(32px, 9vw, 44px); margin: 18px 0 16px; line-height: 1.05; } .hero .lede { font-size: 15px; margin-bottom: 24px; } .hero-ctas { flex-direction: column; align-items: stretch; } .hero-ctas .btn { justify-content: center; } .hero-ctas .dlp, .cta-ctas .dlp { display: flex; } .hero-ctas .dlp .btn, .cta-ctas .dlp .btn { flex: 1; } /* live strip: tiles tighten, verify button drops to its own full row */ .hero-live { margin-bottom: 22px; } .hlt { padding: 12px 14px; } .hlt .hlt-v { font-size: 18px; } .hlt:first-child .hlt-v { font-size: 22px; } .hero-live-foot { flex-direction: column; align-items: stretch; gap: 12px; } .hero-live-verify { justify-content: center; } /* ---- Hero terminal — strip 3D effects, shrink chrome ---- */ .pterm-wrap { perspective: none; } .pterm, .pterm.pterm-mounted { transform: none !important; box-shadow: 0 2px 0 rgba(255,255,255,0.02) inset, 0 20px 50px -16px rgba(0,0,0,0.6), 0 0 0 1px rgba(124,252,182,0.06) !important; } .pterm-chrome { padding: 9px 12px; gap: 10px; } .pterm-title { font-size: 10px; } .pterm-title .pterm-path, .pterm-title .pterm-sep { display: none; } /* keep only the version tag */ .pterm-tabs { padding: 0 6px; overflow-x: auto; } .pterm-tab { padding: 8px 10px; font-size: 10.5px; white-space: nowrap; } .pterm-rail { padding: 8px 10px; } .px-chip { font-size: 9.5px; padding: 3px 8px 3px 6px; } .pterm-body { padding: 10px 12px; height: 300px; font-size: 11px; line-height: 1.6; } .plog-line { gap: 6px; } .plog-emoji { font-size: 10.5px; } .plog-lvl { font-size: 9px; padding: 1px 4px; } /* Status bar: wrap onto two lines, hide the "NEXT" stat */ .pterm-statusbar { flex-wrap: wrap; gap: 10px; padding: 8px 12px; row-gap: 6px; } .pterm-stat-sep { display: none; } .pterm-stat:nth-child(7) { display: none; } /* hide "NEXT" stat — least useful on phones */ /* ---- Trial banner — stack ---- */ .trial-banner { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; font-size: 12.5px; } /* ---- New in v3.0.0 — bento collapses to one column ---- */ .v3-bento { gap: 12px; } .v3-lead { padding: 22px 18px; gap: 22px; } .v3-lead h3 { font-size: 22px; } .v3-lead-copy > p { font-size: 14.5px; } .v3-lead-copy > p.v3-lead-foot { font-size: 11.5px; } .v3-cell--grid, .v3-cell--analytics { grid-column: 1 / -1; } .v3-cell { padding: 18px 18px 16px; } .v3-cell h3 { font-size: 17px; } .v3-cascade li { grid-template-columns: minmax(0, 1fr); gap: 3px; } .v3-cascade li + li { padding-left: 14px; } .v3-cascade li + li + li { padding-left: 28px; } .v3-cascade li + li .v3-cascade-k, .v3-cascade li + li + li .v3-cascade-k { padding-left: 0; } .v3-tg { width: 100%; } .v3-rest { padding: 2px 18px; } .v3-rest-row { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 13px 0; } /* ---- Principle ---- */ .thesis blockquote { font-size: 18px !important; } /* ---- Performance table — make horizontally scrollable ---- */ .perf-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.perf { min-width: 560px; } .perf-chart-head { flex-direction: column; align-items: flex-start; gap: 10px; } .perf-chart-body { padding: 14px 16px 20px; } .perf-chart-body svg { height: 240px; } /* ---- Exchanges — 1 column on phones, 2 was too tight ---- */ .ex-details { grid-template-columns: minmax(0, 1fr); gap: 14px; } /* ---- CTA + Footer ---- */ .cta-ctas { flex-direction: column; align-items: stretch; } .cta-ctas .btn { justify-content: center; } .foot-inner { flex-direction: column; align-items: flex-start; gap: 14px; text-align: left; } .foot-links { flex-wrap: wrap; gap: 14px; } /* ============================================================ */ /* DOCS PAGE */ /* ============================================================ */ .docs-nav-inner { padding: 0 16px; height: 56px; gap: 8px; } .docs-nav .crumb { font-size: 11px; gap: 8px; min-width: 0; } .docs-nav .crumb > span { display: none; } /* brand only: room for switch + Download */ .docs-nav .btn-ghost { display: none; } /* keep only Download */ .docs-layout { padding: 20px 16px; gap: 20px; } /* ---- Docs hero ---- */ .dhero { padding: 24px 18px; gap: 24px; margin: 0 0 24px; } .dhero-left h1 { font-size: 28px !important; margin: 12px 0 12px !important; } .dhero-left .lede { font-size: 14.5px !important; margin-bottom: 16px !important; } .dhero-ctas { flex-direction: column; align-items: stretch; } .dhero-ctas .btn { justify-content: center; } .dhero-right { gap: 8px; } .dhero-stat { padding: 12px 14px; } .dhero-stat .v { font-size: 22px; } /* ---- Journey map — single column ---- */ .djourney { grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 28px; } .djourney-step { padding: 12px 14px; flex-direction: row; align-items: center; gap: 14px; } .djourney-text { flex: 1; min-width: 0; } /* ---- Permission matrix — horizontal scroll ---- */ .dmtx { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .dmtx-head { padding-right: 0; } .dmtx-grid { min-width: 640px; } /* ---- Headings + body ---- */ .doc-content h1 { font-size: 30px !important; } .doc-content h2 { font-size: 24px; margin: 40px 0 14px; padding-top: 24px; } .doc-content h3 { font-size: 17px; } .doc-content p, .doc-content li { font-size: 14.5px; } /* ---- Install stepper cards — tighter ---- */ .dinst { gap: 12px; } .dinst-card { padding: 16px 16px 18px; } /* ---- Plan timeline — readable on mobile ---- */ .dplan { padding: 16px 12px; } .dplan-head h3 { font-size: 15px !important; } /* ---- QuickStart 7-day — single col on tiny screens ---- */ .dqs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .dqs-day { padding: 10px 12px; } /* ---- Config table inside docs — let it scroll ---- */ .doc-content table { font-size: 11.5px; } } /* Under ~420px two columns cannot hold "+311.70 USDC" at a legible size, so the strip drops to one column and each tile becomes a single label/value line: four numbers cost four lines, not eight. Hairlines between rows only. */ @media (max-width: 420px) { .hero-live-row { grid-template-columns: minmax(0, 1fr); } .hlt { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; } .hlt:nth-child(even) { border-left: none; } .hlt:nth-child(n + 2) { border-top: 1px solid var(--line-soft); } } /* very narrow phones: brand mark only, the name no longer fits next to the switch */ @media (max-width: 360px) { .brand-name, .docs-nav .crumb a > span:last-child { display: none; } } /* ============================================================ */ /* Scroll reveal — armed by reveal.js. */ /* No JS => classes never added => everything stays visible. */ /* transform/opacity only: zero layout shift. */ /* ============================================================ */ .reveal { opacity: 0; transform: translateY(14px); } span.reveal { display: inline-block; } /* transform needs a box on inline eyebrows */ .reveal.in { opacity: 1; transform: none; transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } .reveal.in { transition: none; } } @media print { .reveal { opacity: 1; transform: none; } }