/* BitVibe Labs — shared brand baseline (GENERIC, drop-in). Single source of truth. Vendor into each product's public/brand-kit/ and link it in AFTER the product's own CSS so these win where intended. Pairs with bg-shader.js + head-snippet.html. See rule bitvibe-web-product-baseline. 2026-05-29 — token set expanded from the Claude Design "BitVibe Labs Design System v23 (LOCKED)" export (source of record: /Code/Design/BitVibeLabs/ concepts/design-system-v23/). Accents are UNCHANGED (not a rebrand); this adds the surface/text/semantic/spacing/radii/motion/type scales + per-product accent slot + class-scoped helpers. ADDITIVE: the legacy --bvl-* names are retained so existing products don't break (var(--undefined) → 0; see rule css-undefined-var-fallback). The v23 bare `html,body { background/color/font }` rule is DELIBERATELY OMITTED — brand.css loads AFTER product CSS, so it would override every product background and break the per-product iOS-chin tint (rule ios-safari-chin-tint). Each product still owns its own html/body bg. */ :root { /* ── Brand & accent — LOCKED (legacy --bvl-* names, products depend on these) */ --bvl-bit: #1FB8FF; --bvl-vibe: #FF4520; --bvl-labs: #B0A29A; --bvl-win: #18E69B; --bvl-bg: #0A0A0A; --bvl-fg: #F5F5F4; --bvl-labs-warm: #EFECE6; /* the "Labs" word in the tri-color parent wordmark */ /* Light-surface accent variants — DO NOT use as primaries on dark canvas */ --bvl-bit-light: #0084D9; --bvl-vibe-light: #FF2D00; --bvl-win-light: #0FC284; --bvl-labs-light: #5C5048; --bvl-font-wm: 'Fraunces', Georgia, serif; --bvl-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --bvl-font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace; /* ── Surface — dark canonical ──────────────────────────────────────────── */ --bg: #0A0A0A; /* canvas (near-black, NOT pure #000) = --bvl-bg */ --bg-elevated: #141414; /* cards, raised panels (alias: --canvas-soft) */ --bg-elevated-2: #1C1C1C; /* insets, hover fills */ --bg-elevated-hover: #1F1F1F; --hairline: #2A2A2A; /* 1px borders/dividers */ --hairline-strong: #3A3A3A; --bg-light: #FAFAF9; --fg-on-light: #0A0A0A; /* print/docs only */ /* ── Text ──────────────────────────────────────────────────────────────── */ --fg: #F5F5F4; /* ink — headings + body on dark = --bvl-fg */ --fg-muted: #C7C4BE; /* secondary body */ --fg-dim: #8A867E; /* timestamps, fine print, hints */ --fg-dimmer: #7A6B62; /* darker Labs derivative */ --on-accent: #0A0A0A; /* text ON a bright accent fill */ --border: rgba(245,245,244,0.08); --border-strong: rgba(245,245,244,0.16); /* ── Semantic ──────────────────────────────────────────────────────────── */ --success: #18E69B; /* = win */ --error: #FF4520; /* = vibe */ --warning: #E6B017; /* amber, sparingly */ --info: #1FB8FF; /* = bit */ /* ── Per-product accent slot (parent default = vibe; products override) ──── */ --accent: var(--bvl-vibe); --accent-hover: var(--bvl-vibe-light); --accent-dim: rgba(255,69,32,0.12); /* ── Type families — LOCKED (new names; legacy --bvl-font-* kept above) ──── */ --font-wordmark: 'Fraunces', Georgia, 'Times New Roman', serif; --font-display: 'Fraunces', Georgia, serif; --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --fraunces-axes: 'SOFT' 50, 'WONK' 0; /* ── Spacing scale (4px base) ──────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 140px; --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; /* ── Radii ─────────────────────────────────────────────────────────────── */ --radius-none: 0; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 100px; --radius-full: 9999px; /* ── Motion ────────────────────────────────────────────────────────────── */ --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ── Elevation / shadows ───────────────────────────────────────────────── */ --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.25); --shadow-cta: 0 4px 14px var(--accent-dim), inset 0 1px 0 rgba(255,255,255,0.18); --shadow-cta-hover: 0 8px 22px var(--accent-dim), inset 0 1px 0 rgba(255,255,255,0.25); --ring-focus: 0 0 0 3px var(--accent-dim); /* ── Type scale ────────────────────────────────────────────────────────── */ --type-wordmark-size: 56px; --type-wordmark-line: 1.0; --type-wordmark-tracking: -0.02em; --type-display-xl-size: 56px; --type-display-xl-line: 58px; --type-display-xl-tracking: -1.1px; --type-display-lg-size: 40px; --type-display-lg-line: 44px; --type-display-lg-tracking: -0.8px; --type-display-md-size: 28px; --type-display-md-line: 34px; --type-display-md-tracking: -0.5px; --type-display-sm-size: 22px; --type-display-sm-line: 28px; --type-body-lg-size: 18px; --type-body-lg-line: 28px; --type-body-md-size: 16px; --type-body-md-line: 24px; --type-body-sm-size: 14px; --type-body-sm-line: 20px; --type-caption-size: 12px; --type-caption-line: 16px; --type-code-size: 13px; --type-code-line: 20px; --type-button-md-size: 14px; --type-button-lg-size: 16px; } /* ── Per-product accent re-bindings (INERT until a product opts in via data-product on / or a .product-* class). Anything using var(--accent) retints — buttons, inputs, URL-trick, links. ─────────────── */ :root[data-product="gitaskhub"], .product-gitaskhub { --accent: var(--bvl-bit); --accent-hover: #4FCAFF; --accent-dim: rgba(31,184,255,0.12); } :root[data-product="gitdeployhub"], :root[data-product="youasktube"], .product-gitdeployhub, .product-youasktube { --accent: var(--bvl-vibe); --accent-hover: var(--bvl-vibe-light); --accent-dim: rgba(255,69,32,0.12); } :root[data-product="gitsafehub"], .product-gitsafehub { --accent: var(--bvl-win); --accent-hover: #2EF5AC; --accent-dim: rgba(24,230,155,0.12); } /* ── Class-scoped type/helper utilities (opt-in only — these style ONLY elements that carry the class, so no existing product element changes). The v23 bare `html,body { background/color/font }` rule is intentionally NOT included here; each product owns its own html/body background. ─────── */ .wordmark { font-family: var(--font-wordmark); font-weight: 700; font-variation-settings: var(--fraunces-axes); letter-spacing: var(--type-wordmark-tracking); line-height: var(--type-wordmark-line); } .display-xl, .display-lg, .display-md, .display-sm { font-family: var(--font-display); font-weight: 700; font-variation-settings: var(--fraunces-axes); color: var(--fg); } .display-xl { font-size: var(--type-display-xl-size); line-height: var(--type-display-xl-line); letter-spacing: var(--type-display-xl-tracking); } .display-lg { font-size: var(--type-display-lg-size); line-height: var(--type-display-lg-line); letter-spacing: var(--type-display-lg-tracking); } .display-md { font-size: var(--type-display-md-size); line-height: var(--type-display-md-line); letter-spacing: var(--type-display-md-tracking); } .display-sm { font-size: var(--type-display-sm-size); line-height: var(--type-display-sm-line); font-weight: 600; } .body-lg { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line); } .body-md { font-size: var(--type-body-md-size); line-height: var(--type-body-md-line); } .body-md-strong { font-size: var(--type-body-md-size); line-height: var(--type-body-md-line); font-weight: 500; } .body-sm { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); } .caption { font-size: var(--type-caption-size); line-height: var(--type-caption-line); color: var(--fg-dim); } .code, code { font-family: var(--font-mono); font-size: var(--type-code-size); line-height: var(--type-code-line); } .wm-bit { color: var(--bvl-bit); } .wm-vibe { color: var(--bvl-vibe); } .wm-win { color: var(--bvl-win); } .wm-labs { color: var(--bvl-labs-warm); } .section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); } .section-label::before { content: "// "; color: var(--accent); } /* iOS horizontal-pan fix — iOS scrolls , so BOTH need it. Use width/height 100% (not 100vw/100vh) on fixed full-bleed layers to avoid mobile over-count. */ html, body { overflow-x: hidden; max-width: 100%; } /* Ambient shader canvas (paired with bg-shader.js). Fixed, behind all content. JS overscans the size via inline style; this is the resting/no-JS state. ⚠️ iOS CHIN: the canvas does NOT paint the iOS chin/safe-area (Safari tints those from background-color, NOT WebGL). Each product MUST set, in its OWN css, `html,body` + `#bvl-bgcanvas { background-color: }` — else the chin shows a black band against the colored shader. See rule ios-safari-chin-tint (gitmyhub = #0f2a40, verified 2026-05-29). */ #bvl-bgcanvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; width: 100%; height: 100%; } /* prefers-reduced-motion safety net. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* The iOS chin fade-to-black overlay was REMOVED from the shared kit (2026-05-27). It is bitvibelabs.com-SPECIFIC (a sparse hero with empty bottom space). On content-dense product pages a fixed bottom overlay sits ON TOP of real content and hides it. NOT a portable default — it lives only on bitvibelabs.com. See rule ios-safari-chin-tint for the (now caveated) mechanism. */