/* vendored from ~/Development/bespoke-brand (commit 79842df) — do not edit here; re-copy from the brand repo. */ /* ========================================================================== Bespoke Code — brand tokens Single source of truth. Derived verbatim from bespokecode.mx (public/theme/css/demo/start-hub-8/base.css + public/custom/css/custom.css). Every consumer (marketing site, dev-docs HTML, Claude Artifacts) starts here. Prefix: --bc- Decisions frozen 2026-08-28 (Ricardo): palette stays navy -> violet with yellow hover + green accent, exactly as the live site. No dark mode. ========================================================================== */ :root { /* --------------------------------------------------------------- Brand — dark end (the site's signature: navy that melts to violet) --------------------------------------------------------------- */ --bc-navy-900: #191C33; /* hero gradient end, darkest navy */ --bc-navy-800: #2E2D57; /* contact gradient start */ --bc-navy-700: #353A5F; /* hero gradient start */ --bc-charcoal-1: #2D3140; /* tech + footer gradient start */ --bc-charcoal-2: #19272C; /* tech + footer gradient end */ /* Brand — violet / purple */ --bc-violet-700: #5430B6; /* contact gradient end */ --bc-violet-600: #5A31C4; /* THE wave fill */ --bc-purple-700: #422F8A; /* .bg-purple — CTA buttons */ --bc-purple-500: #7150E8; /* most-used inline accent purple */ --bc-purple-400: #9F51E0; /* scroll indicator start */ --bc-purple-mark: rgba(141, 126, 255, 0.44); /* highlighter swash */ /* Brand — accents */ --bc-yellow: #F0DB4F; /* hover flip on dark CTAs */ --bc-yellow-pure: #FFFF00; /* .bg-yellow header CTA / hero brush */ --bc-accent: #49C193; /* green accent (--lqd-color-accent) */ /* --------------------------------------------------------------- Neutrals --------------------------------------------------------------- */ --bc-white: #FFFFFF; --bc-heading: #292929; /* all h1-h6 on light */ --bc-body: #626974; /* all body copy on light */ --bc-muted: #8e929b; --bc-slate-200: #e2e8f0; /* labels/headings on dark */ --bc-slate-300: #A2B2C9; /* subheadings on dark */ --bc-on-dark: #B4B6C6; /* body copy on dark */ --bc-rule: #e2e8f0; /* hairlines, table borders */ --bc-surface: #F9F8F5; /* faintest off-white panel */ --bc-surface-2: #F4F3F8; /* code/table zebra */ /* White-alpha ladder — for text and hairlines on dark sections */ --bc-white-10: rgba(255,255,255,0.10); --bc-white-40: rgba(255,255,255,0.40); --bc-white-60: rgba(255,255,255,0.60); --bc-white-70: rgba(255,255,255,0.70); --bc-white-80: rgba(255,255,255,0.80); /* --------------------------------------------------------------- Semantic (status) — docs need these; the site never had them. Hues chosen inside the brand family, not bootstrap defaults. --------------------------------------------------------------- */ --bc-info: var(--bc-purple-500); --bc-info-bg: #F1EEFD; --bc-warn: #B4791A; --bc-warn-bg: #FBF3E0; --bc-danger: #C0392B; --bc-danger-bg: #FBECEA; --bc-success: #2F8A67; --bc-success-bg: #E7F5EF; --bc-decision: var(--bc-violet-700); --bc-decision-bg: #EFEAFA; /* --------------------------------------------------------------- Gradients — the identity. Angles are verbatim from the site. --------------------------------------------------------------- */ --bc-grad-hero: linear-gradient(120deg, var(--bc-navy-700) 0%, var(--bc-navy-900) 100%); --bc-grad-contact: linear-gradient(180deg, var(--bc-navy-800) 0%, var(--bc-violet-700) 100%); --bc-grad-tech: linear-gradient(180deg, var(--bc-charcoal-1) 0%, var(--bc-charcoal-2) 100%); --bc-grad-footer: linear-gradient(170deg, var(--bc-charcoal-1) 0%, var(--bc-charcoal-2) 100%); --bc-grad-stack: linear-gradient(180deg, #211F36 0%, #373E5C 100%); --bc-grad-accent: linear-gradient(90deg, var(--bc-purple-400) 0%, #8297de 100%); /* --------------------------------------------------------------- Type — PROVISIONAL decision 2026-08-28: Be Vietnam Pro everywhere (that is what actually renders on the site, after custom.css's !important override), plus JetBrains Mono for code. Space Grotesk / Libre Baskerville were dropped. --------------------------------------------------------------- */ --bc-font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --bc-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --bc-fw-regular: 400; --bc-fw-medium: 500; --bc-fw-bold: 700; /* Marketing display scale — the site's own. NOT for documents. Documents use the readable scale in doc.css. */ --bc-display-1: 64px; --bc-display-2: 48px; --bc-display-3: 40px; --bc-display-ls-1: -4px; --bc-display-ls-2: -1.5px; --bc-display-ls-3: -0.5px; /* --------------------------------------------------------------- Shape --------------------------------------------------------------- */ --bc-radius-sm: 4px; --bc-radius-card: 7px; --bc-radius-md: 12px; --bc-radius-panel: 20px; --bc-radius-pill: 100px; /* Shadows — house signature is huge blur, tiny alpha, tinted lilac. */ --bc-shadow-xs: 0 1px 6px 0 rgba(34,40,59,.11); --bc-shadow-soft: 0 15px 55px 0 rgba(190,184,255,.22); --bc-shadow-card: 0 14px 55px 0 rgba(208,202,239,.30); --bc-shadow-lift: 0 12px 28px rgba(0,0,0,.12); --bc-shadow-deep: 0 31px 53px 0 rgba(0,0,0,.07); /* --------------------------------------------------------------- Layout --------------------------------------------------------------- */ --bc-container: 1140px; /* marketing container */ --bc-container-wide: 1340px; /* header / full-bleed content */ --bc-measure: 860px; /* document reading column */ --bc-sidebar: 260px; /* document sidebar nav */ --bc-transition: all .3s; } /* -------------------------------------------------------------------------- PRINT-SAFE SUBSET -------------------------------------------------------------------------- Chromium prints gradients only with printBackground:true, and even then a full-bleed dark band eats toner and reads muddy on office printers. For any printed/PDF surface use ONLY these, and flatten every gradient to its solid: --bc-navy-900 --bc-violet-700 --bc-purple-700 --bc-heading --bc-body --bc-rule --bc-white --bc-surface --bc-info/-bg --bc-warn/-bg --bc-danger/-bg --bc-success/-bg Flattening map used by doc.css @media print: --bc-grad-hero -> var(--bc-navy-900) --bc-grad-contact -> var(--bc-violet-700) --bc-grad-footer -> var(--bc-charcoal-2) Never rely on: --bc-purple-mark, --bc-white-* alphas, any --bc-shadow-* (alpha blends band and dither on print). -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- DARK MODE HOOK — intentionally not implemented. bespokecode.mx has zero prefers-color-scheme rules; the identity is a light page with dark sections. If a future consumer ever needs it, redefine the NEUTRALS here only (never the brand hues), and mirror it under :root[data-theme="dark"] so an explicit toggle can win: @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bc-white: #14161F; --bc-heading: #F2F3F7; --bc-body: #B4B6C6; --bc-rule: #2C3040; --bc-surface: #1B1E29; --bc-surface-2: #22263400; } } -------------------------------------------------------------------------- */