/* ================================================================ * bv7x-brand.css — DESIGN.md overlay (Phase 1, preview) * Activates only when . Toggled by * /js/bv7x-brand-toggle.js when ?brand=v2 or localStorage flag is set. * * Strategy: redefine the in-page :root tokens (--bg, --purple, --cyan, * --green, --red, --amber, --text-*, --border) so the existing markup * picks up monochrome surfaces + DESIGN.md semantic accents without * per-element rewrites. Targeted overrides kill the gradient buttons * and decorative blurs that don't flow through tokens. * ================================================================ */ html[data-brand="v2"] { /* Surfaces — pure black per DESIGN.md */ --bg: #000000; --bg-card: rgba(255, 255, 255, 0.02); --bg-card-hover: rgba(255, 255, 255, 0.04); --bg-surface: #08080d; --bg-elevated: #101016; --bg-hover: #15151c; --bg-active: #1c1c24; /* Borders — opacity only, no colored borders */ --border: rgba(255, 255, 255, 0.08); --border-hover: rgba(255, 255, 255, 0.15); --border-strong: rgba(255, 255, 255, 0.15); --border-focus: rgba(255, 255, 255, 0.35); /* Text — white with opacity scale */ --text: #ffffff; --text-primary: #ffffff; --text-dim: rgba(255, 255, 255, 0.65); --text-secondary: rgba(255, 255, 255, 0.65); --text-muted: rgba(255, 255, 255, 0.40); --text-tertiary: rgba(255, 255, 255, 0.40); --text-faint: rgba(255, 255, 255, 0.25); --text-disabled: rgba(255, 255, 255, 0.12); /* Decorative accents collapsed to white — kills purple/cyan as accent without rewriting per-element class lists. The 3 reserved semantic colors below stay live. */ --purple: #ffffff; --purple-dim: rgba(255, 255, 255, 0.08); --cyan: #ffffff; --cyan-dim: rgba(255, 255, 255, 0.08); /* Semantic — only meaningful colors per DESIGN.md */ --accent-bull: #34d399; --accent-bear: #f87171; --accent-warn: #fbbf24; --bg-bull: rgba(52, 211, 153, 0.10); --bg-bear: rgba(248, 113, 113, 0.10); --bg-warn: rgba(251, 191, 36, 0.10); /* Existing pages use --green/--red/--amber for semantic state. Re-anchor them onto the DESIGN.md accents so win/loss/warn surfaces carry the canonical hue. */ --green: #34d399; --green-dim: rgba(52, 211, 153, 0.10); --red: #f87171; --red-dim: rgba(248, 113, 113, 0.10); --amber: #fbbf24; --amber-dim: rgba(251, 191, 36, 0.10); } /* Body typography — DESIGN.md mandates Plus Jakarta Sans for body. The existing pages set Inter; redefine to take effect. */ html[data-brand="v2"] body { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; background: #000000; color: var(--text); } /* Decorative aurora blurs — gone. */ html[data-brand="v2"] .aurora, html[data-brand="v2"] .signal-hero-glow, html[data-brand="v2"] .hero-strip-glow { display: none !important; } /* Nav surface — pure black, mono eyebrow link styling */ html[data-brand="v2"] .nav { background: rgba(0, 0, 0, 0.85); border-bottom: 1px solid var(--border); } html[data-brand="v2"] .nav-name { font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.02em; } html[data-brand="v2"] .nav-links a { font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 400; color: var(--text-muted); } html[data-brand="v2"] .nav-links a:hover, html[data-brand="v2"] .nav-links a.active { color: var(--text); } /* Primary CTA button — pure white, no gradient, no glow. Replaces .nav-cta's existing linear-gradient(135deg, #7c3aed, #3b82f6). */ html[data-brand="v2"] .nav-cta { background: #ffffff; color: #000000; border-radius: 4px; box-shadow: none; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -0.01em; } html[data-brand="v2"] .nav-cta:hover { background: rgba(255, 255, 255, 0.85); transform: none; box-shadow: none; } /* Wallet/gate button — neutral surface, no purple */ html[data-brand="v2"] .nav-gate-btn { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-strong); color: var(--text); border-radius: 4px; } html[data-brand="v2"] .nav-gate-btn:hover { background: rgba(255, 255, 255, 0.10); border-color: var(--border-focus); } html[data-brand="v2"] .nav-gate-btn.verified { background: var(--bg-bull); border-color: rgba(52, 211, 153, 0.30); color: var(--accent-bull); } /* Generic link color — DESIGN.md says color is meaning, not decoration. Inline links should follow text color, not glow purple. */ html[data-brand="v2"] a { color: inherit; } html[data-brand="v2"] a:hover { color: var(--text-dim); } /* Mobile menu — match nav surface */ html[data-brand="v2"] .mobile-menu { background: rgba(0, 0, 0, 0.97); } html[data-brand="v2"] .mobile-menu a { font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.18em; font-size: 13px; } /* Headings — DESIGN.md tracking */ html[data-brand="v2"] h1, html[data-brand="v2"] h2, html[data-brand="v2"] h3, html[data-brand="v2"] h4 { font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.04em; color: var(--text); } /* Tab bars (terminal page) — neutralize active-state purple underline */ html[data-brand="v2"] .terminal-tab.active, html[data-brand="v2"] .terminal-tabs .active { color: var(--text); border-bottom-color: var(--text); }