/* ========================================================================== AlgoVault canonical design system — DESIGN-W2 / D2-C extraction -------------------------------------------------------------------------- Source-of-truth: vault `Design/AlgoVault Landing Hero v1/styles.css` + `Design/AlgoVault Track Record v1/styles.css` (md5 eeb87961acc7bed518f7bcf475999696 — byte-equal) Authored by Mr.1 in claude.ai/design (DESIGN-W1 handoff session). This file is the canonical token + selective-component layer that sits alongside the existing inline `` per-page Tailwind v3.4 Play CDN (D1-C foundation 2026-05-10). It does NOT replace Tailwind classes — it ADDS new component classes (.artboard, .bg-grid, .bg-radial-*, .bg-noise, .live-pulse) that landing/index.html consumes for selective visual polish (C2). D2-C scope (architect-ratified mid-Plan-Mode, audits/DESIGN-W2-endpoint-truth.md): - Tokens: full OKLCH custom-property set (drops in everywhere via :root) - Components: 5 canonical classes (.artboard + 4 backgrounds) - Animations: 1 canonical @keyframes (pulse — for .live-pulse class) - Typography: 3 font-family stacks (Inter Tight + Inter + JetBrains Mono). Google Fonts loader is injected per-page in HTML — see /_design/loader-preconnect.html for the canonical block. Heavy JSX-derived components (hero flow diagram, .nav-*, .btn-*, .xchg-*, .code-window, .tk-*, .trust-*, .counter, .flow-line, etc.) are deferred to DESIGN-W3 alongside the v1-minimal.jsx / v1-landing-rest.jsx / track-record.jsx / track-record-2.jsx / verify.jsx static-HTML translations. D1-C foundation preserved BYTE-IDENTICAL: 535 mint Tailwind classes (bg|text|border)-mint-{N}{/O?} across 12 landing files + 6 brand-accent inline-CSS hex literals in src/index.ts. ========================================================================== */ /* ---------- Tokens ---------- */ /* Verbatim from canonical styles.css; mint-anchor is byte-identical to D1-C */ :root { /* Base + foreground (dark theme) */ --bg: oklch(0.16 0.012 265); --bg-2: oklch(0.19 0.014 265); --bg-3: oklch(0.22 0.014 265); --line: oklch(0.28 0.012 265); --line-2: oklch(0.34 0.012 265); --fg: oklch(0.97 0.005 265); --fg-2: oklch(0.78 0.008 265); --fg-3: oklch(0.58 0.01 265); --fg-4: oklch(0.44 0.012 265); /* Accents — primary (violet) + alt families */ --violet: oklch(0.72 0.15 290); --violet-2: oklch(0.62 0.18 290); --violet-soft: oklch(0.32 0.08 290); /* DESIGN-W7 fix-forward 2026-05-11 (Mr.1 directive): "change the color to Plasma Mint, not electric cyan. The HTML color is Plasma Mint, not cyan." JSX V1Hero references both `var(--cyan)` and `accent-cyan` class — alias --cyan to mint values so all `var(--cyan)` references resolve to Plasma Mint without changing JSX markup. */ --cyan: oklch(0.86 0.16 165); /* aliased to mint per Mr.1 */ --cyan-2: oklch(0.72 0.16 165); /* aliased to mint-2 */ --cyan-soft: oklch(0.32 0.08 170); /* aliased to mint-soft */ /* Plasma Mint — D1-C anchor at oklch(0.86 0.16 165) ↔ #5BEEB3 */ --mint: oklch(0.86 0.16 165); --mint-2: oklch(0.72 0.16 165); --mint-soft: oklch(0.32 0.08 170); --azure: oklch(0.7 0.18 250); --azure-2: oklch(0.6 0.2 250); --azure-soft: oklch(0.3 0.1 250); --brass: oklch(0.78 0.09 85); --brass-2: oklch(0.68 0.12 85); --brass-soft: oklch(0.32 0.05 85); /* Status / semantic */ --green: oklch(0.78 0.16 155); --red: oklch(0.7 0.18 25); /* Typography stacks — Google Fonts loader injected per-page in HTML */ --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif; --font-text: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } /* ---------- .artboard wrapper ---------- */ /* Each visually-prominent surface lives inside one of these; provides the dark background + foreground default + relative positioning context for .bg-* layers to anchor against. Per canonical styles.css. */ .artboard { position: relative; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-text); line-height: 1.6; } /* ---------- Background treatments (C2 selective application) ---------- */ /* Grid pattern with radial mask — 56px square grid faded outside the ellipse-70%-60%-at-50%-30% region. Pointer-events-none so it never blocks clicks. */ .bg-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, oklch(0.24 0.012 265 / 0.45) 1px, transparent 1px), linear-gradient(to bottom, oklch(0.24 0.012 265 / 0.45) 1px, transparent 1px); background-size: 56px 56px; background-position: -1px -1px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 75%); pointer-events: none; } /* Violet radial wash — top-center primary glow + bottom-right secondary */ .bg-radial-violet { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 35% at 50% 0%, oklch(0.32 0.1 290 / 0.55), transparent 70%), radial-gradient(ellipse 30% 25% at 80% 70%, oklch(0.28 0.06 290 / 0.4), transparent 70%); pointer-events: none; } /* Accent radial wash — uses --accent-glow-{1,2,3} CSS custom properties when set on parent (defaults: cyan + cyan-deeper + violet-deep). Per-variant theming overrides via inline custom-property values. */ .bg-radial-accent { position: absolute; inset: 0; background: radial-gradient(ellipse 55% 40% at 50% -5%, var(--accent-glow-1, oklch(0.34 0.1 200 / 0.55)), transparent 70%), radial-gradient(ellipse 30% 25% at 85% 75%, var(--accent-glow-2, oklch(0.28 0.08 215 / 0.4)), transparent 70%), radial-gradient(ellipse 28% 22% at 12% 88%, var(--accent-glow-3, oklch(0.28 0.06 280 / 0.35)), transparent 70%); pointer-events: none; } /* Noise overlay — SVG turbulence at ~6% white opacity, mix-blend overlay. Adds film-grain texture to dark backgrounds without dominating. */ .bg-noise { position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.5; mix-blend-mode: overlay; pointer-events: none; } /* ---------- .live-pulse + @keyframes pulse ---------- */ /* Used on existing live-call-ticker pulse-dot (C2 application). Replaces the D1-C inline @keyframes pulse-dot with the canonical pulse rhythm. Verbatim from canonical styles.css. */ .live-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 var(--green); animation: pulse 1.8s ease-out infinite; flex-shrink: 0; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 oklch(0.78 0.16 155 / 0.6); } 70% { box-shadow: 0 0 0 8px oklch(0.78 0.16 155 / 0); } 100% { box-shadow: 0 0 0 0 oklch(0.78 0.16 155 / 0); } } /* ============================================================================ DESIGN-W3 / Tier A extensions (2026-05-10) — append-only. D2-C foundation (above this line) preserved BYTE-IDENTICAL. Architect pre-ratified fictional-↔-live mapping table; all numerical values bind to live `` or runtime polling. NO hardcoded sample data. ============================================================================ */ /* ---------- C1.A — Hero flow diagram (5 venues → MCP → AI agent) ---------- */ /* SVG-based static diagram with CSS-keyframe animations (no JS state). Translated from `Design/AlgoVault Landing Hero v1/v1-minimal.jsx` V0Diagram component (lines 88-240). React hooks elided; SVG + + + CSS keyframes do the motion. */ .hero-flow-container { position: relative; margin: 28px auto 0; max-width: 720px; padding: 18px 14px 12px; border: 1px solid var(--line); border-radius: 14px; background: oklch(0.13 0.012 265 / 0.7); } .hero-flow-svg { display: block; width: 100%; height: auto; max-height: 240px; overflow: visible; } .hero-flow-node-venue { fill: oklch(0.2 0.012 265); stroke: oklch(0.34 0.012 265); } .hero-flow-node-mcp { fill: oklch(0.18 0.014 265); stroke: var(--mint); stroke-width: 1.2; } .hero-flow-node-mcp-pulse { fill: none; stroke: var(--mint); stroke-opacity: 0.25; stroke-width: 1.2; transform-origin: center; animation: pulse 2.4s ease-out infinite; } .hero-flow-node-agent { fill: oklch(0.2 0.012 265); stroke: oklch(0.4 0.012 265); } .hero-flow-edge { stroke: oklch(0.32 0.012 265); stroke-opacity: 0.7; stroke-width: 1; fill: none; } .hero-flow-edge-pulse { stroke: var(--mint); stroke-width: 1.4; fill: none; stroke-dasharray: 4 6; animation: hero-flow-pulse 0.9s linear infinite; } .hero-flow-label { font-family: var(--font-mono); font-size: 10px; fill: var(--fg-3); letter-spacing: 0.04em; } .hero-flow-label-accent { font-family: var(--font-mono); font-size: 10px; fill: var(--mint); font-weight: 600; } .hero-flow-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid oklch(0.2 0.012 265 / 0.7); font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.04em; } .hero-flow-meta-strong { color: var(--mint); font-weight: 600; } @keyframes hero-flow-pulse { to { stroke-dashoffset: -120; } } /* ---------- C1.B — Recent calls live feed (5-row, 2.5s polling) ---------- */ /* Replaces the JSX `LAST_CALLS` hardcoded array (5 fictional sample strings). Vanilla JS poller (added in C3) hydrates rows from /api/recent-calls?limit=5. Each row: coin · tf · call (BUY/SELL/HOLD) · time. */ .recent-calls-feed { position: relative; margin: 18px auto 0; max-width: 540px; border: 1px solid var(--line); border-radius: 12px; background: oklch(0.13 0.012 265 / 0.7); overflow: hidden; font-family: var(--font-mono); } .recent-calls-feed-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; border-bottom: 1px solid var(--line); font-size: 9.5px; color: var(--fg-4); letter-spacing: 0.12em; } .recent-calls-feed-tick { display: inline-flex; align-items: center; gap: 5px; color: var(--green); } .recent-calls-row { display: grid; grid-template-columns: 64px 36px 1fr 70px; gap: 8px; align-items: center; padding: 5px 12px; height: 26px; font-size: 12px; border-bottom: 1px solid oklch(0.2 0.012 265 / 0.7); color: var(--fg-2); animation: recent-calls-row-fade-in 0.4s ease-out; } .recent-calls-row:last-child { border-bottom: none; } .recent-calls-coin { color: var(--fg); font-weight: 600; } .recent-calls-tf { color: var(--fg-3); } .recent-calls-call { font-weight: 600; letter-spacing: 0.04em; } .recent-calls-call-buy { color: var(--green); } .recent-calls-call-sell { color: var(--red); } .recent-calls-call-hold { color: var(--fg-3); } .recent-calls-time { color: var(--fg-4); text-align: right; font-size: 10.5px; } .recent-calls-empty { padding: 18px 12px; text-align: center; font-size: 11px; color: var(--fg-4); } @keyframes recent-calls-row-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ---------- C1.C — Tier stats grid (4-card per-tier breakdown) ---------- */ /* Translated from `Design/AlgoVault Track Record v1/track-record.jsx` TierSection (lines 218-292). All 4 tier names + counts + WR% bind to /api/performance-public.byTier (page-load hydration only — no polling). Tier colors are SEMANTIC non-brand (Tier 1 blue, T2 green, T3 purple, T4 orange) — preserved per D1-C; NOT mint-swapped. */ .tier-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 16px 0 28px; } .tier-stat-card { position: relative; overflow: hidden; padding: 22px 18px 18px; border: 1px solid var(--line); border-radius: 12px; background: oklch(0.18 0.014 265 / 0.5); display: flex; flex-direction: column; gap: 12px; } .tier-stat-card-stripe { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--tier-color, var(--mint)); opacity: 0.85; } .tier-stat-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .tier-stat-tier-label { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); letter-spacing: 0.18em; } .tier-stat-name { font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: -0.012em; color: var(--fg); margin-top: 2px; } .tier-stat-sample { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-4); letter-spacing: 0.05em; text-align: right; max-width: 50%; word-break: break-word; } .tier-stat-wr-row { display: flex; align-items: baseline; gap: 6px; } .tier-stat-wr { font-family: var(--font-display); font-size: 36px; font-weight: 600; letter-spacing: -0.022em; color: var(--mint); line-height: 1; } .tier-stat-wr-suffix { color: var(--fg-3); font-size: 18px; } .tier-stat-wr-cap { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-4); letter-spacing: 0.06em; text-transform: uppercase; } .tier-stat-pfe-bar { position: relative; height: 4px; border-radius: 2px; background: oklch(0.22 0.012 265); overflow: hidden; } .tier-stat-pfe-fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--tier-color, var(--mint)); border-radius: 2px; transition: width 0.5s ease-out; } .tier-stat-divider { border-top: 1px solid var(--line); padding-top: 10px; } .tier-stat-n { font-family: var(--font-mono); font-size: 13px; color: var(--fg); margin-top: 2px; } .tier-stat-n-cap { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-4); text-transform: uppercase; } /* ============================================================================ DESIGN-W4 / Tier B extensions (2026-05-10) — append-only. D2-C + W3 foundation (above this line) preserved BYTE-IDENTICAL. Architect-ratified Tier B mapping (extends W3): - Sample byExchange data → /api/performance-public.byExchange (page-load) - Sample byTimeframe data → /api/performance-public.byTimeframe (page-load) - Recent-calls panel → /api/recent-calls?limit=10 (2.5s polling) - Recent-verifications samples → DEFER (VERIFY-RECENT-FEED-W1) ============================================================================ */ /* ---------- C1.A — Below-fold polish (v1-landing-rest.jsx) ---------- */ /* Try in 30 seconds — 3-step quickstart cards */ .try-3step-card { position: relative; padding: 22px 20px 18px; border: 1px solid var(--line); border-radius: 14px; background: oklch(0.18 0.014 265 / 0.6); } .try-3step-number { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-bottom: 10px; border-radius: 6px; background: var(--mint-soft); color: var(--mint); font-family: var(--font-mono); font-weight: 700; font-size: 11px; } /* Tools — 3-card grid (get_trade_call / scan_funding_arb / get_market_regime) */ .tool-card { position: relative; padding: 24px 22px; border: 1px solid var(--line); border-radius: 14px; background: oklch(0.18 0.014 265 / 0.55); display: flex; flex-direction: column; gap: 12px; } .tool-card-snippet { margin-top: auto; padding: 10px 12px; border-radius: 8px; background: oklch(0.13 0.01 265); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-2); overflow-x: auto; } /* Use Cases — 4 partner cards */ .use-case-card { position: relative; overflow: hidden; padding: 22px 20px 18px; border: 1px solid var(--line); border-radius: 14px; background: oklch(0.18 0.014 265 / 0.55); display: flex; flex-direction: column; gap: 10px; } .use-case-card-logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); letter-spacing: 0.06em; } .use-case-card-stripe { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--use-case-color, var(--mint)); opacity: 0.85; } /* Tamper-Proof callout */ .tamper-proof-callout { margin: 16px 0; padding: 18px 22px; border: 1px solid var(--mint); border-radius: 12px; background: oklch(0.32 0.08 170 / 0.18); color: var(--fg); font-size: 14px; line-height: 1.55; } /* For Developers — 3 code-snippet blocks */ .dev-code-block { margin: 14px 0; padding: 14px 16px; border-radius: 10px; background: oklch(0.13 0.01 265); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--fg-2); overflow-x: auto; } .dev-transport-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.06em; } /* FAQ accordion (W4 refinement of existing) */ .faq-item-w4 { border-bottom: 1px solid var(--line); padding: 14px 0; } /* Footer */ .footer-w4 { margin-top: 64px; padding: 32px 0 24px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-4); text-align: center; letter-spacing: 0.04em; } /* ---------- C1.B — Track Record exchange + TF + recent-calls (track-record-2.jsx) ---------- */ .exchange-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 16px 0 28px; } .exchange-stat-card { position: relative; overflow: hidden; padding: 20px 18px 16px; border: 1px solid var(--line); border-radius: 12px; background: oklch(0.18 0.014 265 / 0.5); display: flex; flex-direction: column; gap: 10px; } .exchange-stat-card-stripe { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--exchange-color, var(--mint)); opacity: 0.85; } .exchange-stat-card-logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.08em; } .exchange-stat-card-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: var(--exchange-color, var(--mint)); color: oklch(0.16 0.012 265); font-family: var(--font-mono); font-weight: 700; font-size: 10.5px; } /* Timeframe bar chart */ .tf-bar-chart { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 28px; } .tf-bar-row { display: grid; grid-template-columns: 50px 1fr 60px; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11.5px; } .tf-bar-label { color: var(--fg-3); letter-spacing: 0.04em; } .tf-bar-track { position: relative; height: 8px; border-radius: 4px; background: oklch(0.22 0.012 265); overflow: hidden; } .tf-bar-fill { position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: 4px; background: var(--mint); transition: width 0.6s ease-out; } .tf-bar-value { text-align: right; color: var(--fg); font-weight: 600; } /* Recent-calls panel for /track-record. DESIGN-W8-FIX (2026-05-11): bg updated from oklch(0.13 0.012 265 / 0.7) to match .tier-stat-card reference (oklch(0.18 0.014 265 / 0.5)) — Mr.1 directive to unify /track-record card backgrounds. */ .tr-recent-calls-panel { margin: 16px 0 28px; border: 1px solid var(--line); border-radius: 12px; background: oklch(0.18 0.014 265 / 0.5); overflow: hidden; font-family: var(--font-mono); } .tr-recent-calls-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: 10.5px; color: var(--fg-4); letter-spacing: 0.12em; } .tr-recent-calls-row { display: grid; grid-template-columns: 70px 56px 60px 1fr 76px 76px; gap: 10px; align-items: center; padding: 6px 14px; height: 28px; font-size: 12px; border-bottom: 1px solid oklch(0.2 0.012 265 / 0.7); color: var(--fg-2); animation: recent-calls-row-fade-in 0.4s ease-out; } .tr-recent-calls-row:last-child { border-bottom: none; } /* ---------- C1.C — Verify page (verify.jsx) ---------- */ .verify-input-panel { position: relative; margin: 24px auto; max-width: 720px; padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: 14px; background: oklch(0.18 0.014 265 / 0.5); } .verify-input-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; margin-top: 10px; } .verify-input-field { flex: 1 1 280px; min-width: 200px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 8px; background: oklch(0.13 0.01 265); color: var(--fg); font-family: var(--font-mono); font-size: 13px; transition: border-color 0.15s, box-shadow 0.15s; } .verify-input-field:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 3px oklch(0.86 0.16 165 / 0.18); } .verify-input-button { padding: 10px 18px; border: 1px solid transparent; border-radius: 8px; background: var(--mint); color: oklch(0.16 0.05 165); font-family: var(--font-text); font-weight: 600; font-size: 13px; cursor: pointer; transition: filter 0.15s, transform 0.1s; } .verify-input-button:hover { filter: brightness(1.06); } .verify-input-button:active { transform: translateY(1px); } .verify-input-button:disabled { opacity: 0.6; cursor: not-allowed; } .verify-input-meta { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-4); } .verify-result-panel { margin: 16px auto 24px; max-width: 720px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: oklch(0.18 0.014 265 / 0.5); font-family: var(--font-mono); font-size: 12.5px; } .verify-result-status { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; background: oklch(0.13 0.012 265 / 0.6); color: var(--fg-2); } .verify-result-status-verified { border-color: var(--mint); color: var(--mint); } .verify-result-status-failed { border-color: var(--red); color: var(--red); } .verify-result-row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid oklch(0.2 0.012 265 / 0.7); align-items: baseline; word-break: break-all; } .verify-result-row:last-child { border-bottom: none; } .verify-result-row-key { color: var(--fg-4); letter-spacing: 0.04em; text-transform: uppercase; font-size: 10.5px; } .verify-result-row-val { color: var(--fg); } /* How verification works — 4-step diagram */ .howit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 16px 0 28px; } .howit-step { position: relative; padding: 20px 18px 16px; border: 1px solid var(--line); border-radius: 12px; background: oklch(0.18 0.014 265 / 0.5); display: flex; flex-direction: column; gap: 10px; } .howit-step-number { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--mint-soft); color: var(--mint); font-family: var(--font-mono); font-weight: 700; font-size: 11px; } .howit-step-icon { width: 28px; height: 28px; color: var(--mint); } .howit-step-title { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--fg); } .howit-step-desc { font-size: 12.5px; color: var(--fg-3); line-height: 1.5; } /* Verify FAQ snippets */ .verify-faq-list { margin: 16px 0 24px; } .verify-faq-item { padding: 12px 0; border-bottom: 1px solid var(--line); } .verify-faq-q { font-family: var(--font-display); font-size: 14px; color: var(--fg); margin-bottom: 4px; } .verify-faq-a { font-size: 12.5px; color: var(--fg-3); line-height: 1.55; } /* Recent-verifications graceful empty placeholder (full feed deferred to VERIFY-RECENT-FEED-W1 — needs new endpoint) */ .recent-verifications-empty { margin: 16px auto; max-width: 720px; padding: 22px; border: 1px dashed var(--line-2); border-radius: 12px; text-align: center; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-4); letter-spacing: 0.04em; } /* ───────────────────────────────────────────────────────────────────── DESIGN-W6 / C2+C3 (2026-05-10): dual-render @media swap. Below-fold + landing-rest sections render desktop+mobile variants into the page; CSS toggles which is visible at viewport ≤767px. ──────────────────────────────────────────────────────────────────── */ /* DESIGN-W7 fix-forward 2026-05-11 (Mr.1 directive: "Remove the Mobile view at desktop website, mobile view stay mobile website"): defensive `!important` to ensure cascade doesn't get overridden by JSX inline-style `display:flex` etc. on the inner artboard container. The artboard wrapper (V1Hero outer div) has `style="width:375px"` for mobile but no `display` override — the parent .lp-hero-mobile class controls visibility. `!important` defends against any future inline `display:` on children leaking up. */ .lp-belowfold-desktop, .lp-rest-desktop, .lp-hero-desktop { display: block !important; } .lp-belowfold-mobile, .lp-rest-mobile, .lp-hero-mobile { display: none !important; } @media (max-width: 767px) { .lp-belowfold-desktop, .lp-rest-desktop, .lp-hero-desktop { display: none !important; } .lp-belowfold-mobile, .lp-rest-mobile, .lp-hero-mobile { display: block !important; } } /* ───────────────────────────────────────────────────────────────────── DESIGN-W7 fix-forward 2026-05-11 (Mr.1 directive — match canonical Claude Design HTML desktop view): canonical class definitions extracted from Design/AlgoVault Landing Hero v1/styles.css that were missing from algovault-design.css. Plasma Mint accents throughout (--cyan aliased to mint hue 165 already; --accent set on .theme-mint root). ──────────────────────────────────────────────────────────────────── */ /* Theme: Plasma Mint accent system */ .theme-mint, body { --accent: oklch(0.86 0.16 165); --accent-edge: oklch(0.42 0.08 165); --accent-deep: oklch(0.56 0.14 170); --accent-glow-1: oklch(0.34 0.12 165 / 0.55); --accent-glow-2: oklch(0.28 0.08 180 / 0.4); --accent-glow-3: oklch(0.26 0.06 200 / 0.3); } /* Top nav (V1Hero shipped variant — when not stripped) + nav-pill / nav-cta / nav-logo */ .nav-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; } .nav-logo-mark { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: linear-gradient(135deg, var(--accent, var(--mint)), oklch(0.5 0.16 200)); color: oklch(0.13 0.012 265); font-family: var(--font-mono); font-weight: 700; font-size: 13px; } .nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; color: oklch(0.78 0.008 265); } .nav-links a { color: oklch(0.78 0.008 265); text-decoration: none; transition: color 0.15s; } .nav-links a:hover { color: oklch(0.97 0.005 265); } .nav-pill { font-family: var(--font-mono); font-size: 11.5px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); color: oklch(0.78 0.008 265); display: inline-flex; align-items: center; gap: 6px; } .nav-cta { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; background: oklch(0.97 0.005 265); color: oklch(0.13 0.012 265); font-size: 13.5px; font-weight: 500; text-decoration: none; } /* Buttons — Plasma Mint accent system (Mr.1 directive: "Try Free in Claude" is Plasma Mint) */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; height: 46px; border-radius: 10px; font-family: var(--font-text); font-weight: 500; font-size: 14.5px; text-decoration: none; border: 1px solid transparent; transition: transform 0.1s, background 0.15s, border-color 0.15s, filter 0.15s; cursor: pointer; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: oklch(0.97 0.005 265); color: oklch(0.13 0.012 265); } .btn-primary:hover { background: oklch(1 0 0); } .btn-primary.accent-violet { background: var(--violet, oklch(0.72 0.15 290)); color: oklch(0.18 0.04 290); } /* Plasma Mint primary button (Mr.1 directive 2026-05-11) */ .btn-primary.accent-cyan { background: var(--accent, var(--mint)); color: oklch(0.16 0.05 165); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.35), 0 0 0 1px oklch(0.96 0.05 165 / 0.25), 0 8px 30px -10px oklch(0.86 0.16 165 / 0.55); } .btn-primary.accent-cyan:hover { filter: brightness(1.05); } .btn-secondary { background: transparent; color: oklch(0.97 0.005 265); border-color: var(--line-2); } .btn-secondary:hover { border-color: oklch(0.58 0.01 265); background: oklch(0.22 0.012 265 / 0.6); } /* Exchange tile — placeholder monogram chips (W7 V0Diagram chip slots are now SVG logos) */ .xchg-tile { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: oklch(0.2 0.012 265 / 0.6); font-family: var(--font-mono); font-size: 12px; color: oklch(0.78 0.008 265); } .xchg-mark { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 10px; color: oklch(0.13 0.012 265); background: var(--mark, oklch(0.7 0.06 265)); flex-shrink: 0; } /* Mono captions for placeholders */ .placeholder-cap { font-family: var(--font-mono); font-size: 10.5px; color: oklch(0.44 0.012 265); letter-spacing: 0.02em; text-transform: uppercase; } /* Animated diagram primitives (canonical canvas — V0Diagram + flow.diagram panel) */ .flow-line { stroke: oklch(0.4 0.012 265); stroke-width: 1; fill: none; } .flow-line.dashed { stroke-dasharray: 3 4; } .flow-pulse { stroke-width: 1.5; fill: none; filter: drop-shadow(0 0 4px var(--accent, var(--mint))); } @keyframes pulse-dash { to { stroke-dashoffset: -120; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @keyframes orbit-sweep { to { transform: rotate(360deg); } } @keyframes feed-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } } @keyframes ticker-flicker { 0%, 96%, 100% { opacity: 1; } 97% { opacity: 0.55; } 98% { opacity: 1; } 99% { opacity: 0.7; } } /* Counter digit ticking */ .counter { font-family: var(--font-mono); font-feature-settings: 'tnum' 1, 'lnum' 1; } /* Trust bar (W3 ratification: dropped in W7 hero render — shown for completeness) */ .trust-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11.5px; color: oklch(0.58 0.01 265); } .trust-item { display: inline-flex; align-items: center; gap: 8px; } .trust-num { color: oklch(0.78 0.008 265); font-weight: 600; } /* Code window — TryIn30 quickstart + ForDevelopers code snippets */ .code-window { background: oklch(0.13 0.01 265); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; } .code-window-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: oklch(0.16 0.01 265); font-size: 11.5px; color: oklch(0.58 0.01 265); } .code-dot { width: 9px; height: 9px; border-radius: 50%; } .code-body { padding: 16px 18px; overflow: hidden; } .code-line { white-space: pre; } /* Syntax tokens (Build Rule 8 preserve orange/yellow on tk-num + tk-str etc.) */ .tk-key { color: oklch(0.78 0.13 290); } .tk-str { color: oklch(0.82 0.12 145); } .tk-num { color: oklch(0.82 0.12 65); } .tk-com { color: oklch(0.44 0.012 265); font-style: italic; } .tk-fn { color: oklch(0.8 0.13 220); } .tk-pun { color: oklch(0.58 0.01 265); } /* Hide canvas-only "flow.diagram" label per Mr.1 directive 2026-05-11 */ .placeholder-cap.flow-diagram-hide { display: none !important; } /* Artboard width — fix Mr.1 "right side blank" issue. Canonical canvas is 1440px wide; on wider viewports center the artboard so it doesn't sit left-aligned. */ .lp-hero-desktop > .artboard, .lp-belowfold-desktop > .artboard, .lp-rest-desktop > .artboard { max-width: 1440px; width: 100%; margin: 0 auto; } /* DESIGN-W7 fix-forward ROUND 7 (Mr.1 directive 2026-05-11): the below-fold + landing-rest wrappers contain
/