/* ============================================================================= MyAISE · brand tokens (v2 — cream paper + 5-accent brushstroke) Activate with . Add `.bv-dark` for dark surface. Concatenated from MyAISE Design System / colors_and_type.css + brand-v2.css. ============================================================================= */ /* Fonts loaded via tags in the layout for preconnect performance. Fraunces (display) · Inter (UI) · JetBrains Mono (tooling). */ :root { /* ── Brand accents — the 5-paint brushstroke palette ─────────────────── */ --bv-violet: #7B3EC1; --bv-violet-2: #5446BD; --bv-indigo: #2F2E8D; --bv-indigo-2: #1A1240; --bv-orange: #EE7134; --bv-orange-2: #C05D08; --bv-gold: #F5B025; --bv-gold-2: #FBC13A; --bv-cyan: #00A8C6; --bv-cyan-2: #4AD0F0; --bv-magenta: #C2408D; --bv-magenta-2: #D951B5; /* ── Surface — warm cream paper ───────────────────────────────────────── */ --bv-paper: #F5EFE0; --bv-paper-2: #FBF6E8; --bv-paper-3: #FFFDF6; --bv-ink: #1A1240; --bv-ink-2: #3A2F70; --bv-ink-3: #6E5FA0; --bv-ink-4: #A092C7; --bv-line-1: rgba(26, 18, 64, 0.08); --bv-line-2: rgba(26, 18, 64, 0.16); --bv-line-3: rgba(26, 18, 64, 0.32); /* Currently-active accent — switchable per surface via [data-accent] */ --bv-accent: var(--bv-violet); --bv-accent-soft: rgba(123, 62, 193, 0.10); --bv-accent-border: rgba(123, 62, 193, 0.28); /* ── Type ─────────────────────────────────────────────────────────────── */ --bv-font-display: 'Fraunces', 'Fraunces Fallback', 'Cooper BT', Georgia, serif; --bv-font-sans: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --bv-font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Inter scale (UI) — pure `font:` shorthand. Letter-spacing is applied by surface-specific rules (e.g. .page-header h1, .bv-display), NEVER here: a stray `letter-spacing` declaration after a custom property leaks onto `:root` and inherits globally, which loosens every glyph on the page. */ --bv-text-display-1: 800 64px/1.02 var(--bv-font-sans); --bv-text-display-2: 700 44px/1.05 var(--bv-font-sans); --bv-text-h1: 700 32px/1.15 var(--bv-font-sans); --bv-text-h2: 700 24px/1.25 var(--bv-font-sans); --bv-text-h3: 600 18px/1.35 var(--bv-font-sans); --bv-text-body: 400 15px/1.6 var(--bv-font-sans); --bv-text-body-sm: 400 13px/1.55 var(--bv-font-sans); --bv-text-meta: 500 12px/1.4 var(--bv-font-sans); /* Mono — reserved for tooling (rule keys, selectors, telemetry) */ --bv-text-mono: 500 13px/1.5 var(--bv-font-mono); --bv-text-mono-sm: 500 11px/1.4 var(--bv-font-mono); --bv-text-eyebrow: 600 11px/1 var(--bv-font-mono); /* ── Spacing (4px grid) ───────────────────────────────────────────────── */ --bv-space-1: 4px; --bv-space-2: 8px; --bv-space-3: 12px; --bv-space-4: 16px; --bv-space-5: 24px; --bv-space-6: 32px; --bv-space-7: 48px; --bv-space-8: 64px; --bv-space-9: 96px; /* ── Radii ────────────────────────────────────────────────────────────── */ --bv-radius-xs: 4px; --bv-radius-sm: 6px; --bv-radius-md: 8px; /* buttons, inputs */ --bv-radius-lg: 12px; /* cards */ --bv-radius-xl: 16px; /* panels, modals */ --bv-radius-pill: 999px; /* ── Elevation — ink-tinted, never pure black ─────────────────────────── */ --bv-shadow-1: 0 1px 2px rgba(26, 18, 64, 0.08); --bv-shadow-2: 0 6px 18px -6px rgba(26, 18, 64, 0.18), 0 1px 0 rgba(255, 253, 246, 0.6) inset; --bv-shadow-3: 0 22px 48px -18px rgba(26, 18, 64, 0.28), 0 1px 0 rgba(255, 253, 246, 0.6) inset; --bv-shadow-focus: 0 0 0 2px var(--bv-paper), 0 0 0 4px var(--bv-accent); /* ── Motion ───────────────────────────────────────────────────────────── */ --bv-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --bv-ease-in: cubic-bezier(0.5, 0, 0.75, 0); --bv-ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1); --bv-dur-1: 120ms; --bv-dur-2: 200ms; --bv-dur-3: 360ms; --bv-dur-pulse: 1400ms; /* v1 aliases — the canonical design-system CSS uses --ca-* names */ --ca-ease-out: var(--bv-ease-out); --ca-ease-in: var(--bv-ease-in); --ca-ease-snap: var(--bv-ease-snap); --ca-dur-1: var(--bv-dur-1); --ca-dur-2: var(--bv-dur-2); --ca-dur-3: var(--bv-dur-3); --ca-dur-pulse: var(--bv-dur-pulse); /* ── Semantic ─────────────────────────────────────────────────────────── */ --bv-success: var(--bv-cyan); --bv-warn: var(--bv-gold); --bv-error: #D14747; --bv-info: var(--bv-cyan); } /* ── Accent overrides (apply on any subtree via [data-accent="orange"]) ── */ [data-accent="violet"] { --bv-accent: var(--bv-violet); --bv-accent-soft: rgba(123, 62, 193, 0.10); --bv-accent-border: rgba(123, 62, 193, 0.28); } [data-accent="orange"] { --bv-accent: var(--bv-orange); --bv-accent-soft: rgba(238, 113, 52, 0.10); --bv-accent-border: rgba(238, 113, 52, 0.32); } [data-accent="cyan"] { --bv-accent: var(--bv-cyan); --bv-accent-soft: rgba(0, 168, 198, 0.10); --bv-accent-border: rgba(0, 168, 198, 0.32); } [data-accent="magenta"] { --bv-accent: var(--bv-magenta); --bv-accent-soft: rgba(194, 64, 141, 0.10); --bv-accent-border: rgba(194, 64, 141, 0.32); } [data-accent="gold"] { --bv-accent: var(--bv-gold); --bv-accent-soft: rgba(245, 176, 37, 0.12); --bv-accent-border: rgba(245, 176, 37, 0.36); } /* Tight body kerning — the canonical MyAISE Design System inherits `letter-spacing: -0.03em` from the root (see colors_and_type.css line 58 in the source kit). Restating it here as an intentional rule keeps every downstream surface (sidebar nav, body paragraphs, buttons) reading at the reference's tracking. Specific elements (.eyebrow, .badge, .nav-icon, code) reset it back to wider tracking where they need it. */ :root { letter-spacing: -0.03em; } /* ── Base body styling — only kicks in when .brand-v2 is set ──────────── */ /* IMPORTANT: do not set font-size / line-height here. Per-surface stylesheets (dashboard.css uses 14px / 1.55, marketing.css uses 15px / 1.6) override via the body element selector, which has LOWER specificity than body.brand-v2. Setting size/line-height here would silently win and stretch every page. */ body.brand-v2 { background: var(--bv-paper); color: var(--bv-ink); font-family: var(--bv-font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.brand-v2 ::selection { background: var(--bv-accent); color: var(--bv-paper); } /* NOTE: deliberately NOT setting font/font-family on body.brand-v2 h1/h2/h3. The `font:` shorthand would force --bv-font-sans (Inter) and beat per-surface rules like `.page-header h1 { font-family: var(--bv-font-display) }` on specificity. Each surface declares its own heading typography. */ body.brand-v2 p { text-wrap: pretty; } body.brand-v2 code, body.brand-v2 pre, body.brand-v2 kbd, body.brand-v2 samp { font-family: var(--bv-font-mono); font-size: 0.92em; } /* ── Dark variant — same accents, paper inverted ──────────────────────── */ body.brand-v2.bv-dark { --bv-paper: #15102E; --bv-paper-2: #1F1942; --bv-paper-3: #2A2358; --bv-ink: #F5EFE0; --bv-ink-2: #D8CFE9; --bv-ink-3: #A092C7; --bv-ink-4: #6E5FA0; --bv-line-1: rgba(245, 239, 224, 0.06); --bv-line-2: rgba(245, 239, 224, 0.14); --bv-line-3: rgba(245, 239, 224, 0.28); } /* ── Hand-lettered display headline — hero & section openers only ─────── */ .bv-display { font-family: var(--bv-font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: -0.02em; color: var(--bv-ink); text-wrap: balance; } /* ── Painted underline (multi-pass SVG brushstroke) ───────────────────── */ .bv-paint-stroke { position: relative; display: inline-block; } .bv-paint-stroke > svg { position: absolute; left: -6px; right: -6px; bottom: -0.18em; width: calc(100% + 12px); height: 0.32em; pointer-events: none; } /* ── The orange pulse dot — live / recording / rule-fired ─────────────── */ .bv-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bv-orange); animation: bv-pulse var(--bv-dur-pulse) var(--bv-ease-out) infinite; } @keyframes bv-pulse { 0% { box-shadow: 0 0 0 0 rgba(238, 113, 52, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(238, 113, 52, 0); } 100% { box-shadow: 0 0 0 0 rgba(238, 113, 52, 0); } } /* ── Sparkle scatter motion ───────────────────────────────────────────── */ @keyframes bv-twinkle { 0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.94); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } } @keyframes bv-spin-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes bv-spin-ccw { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } @media (prefers-reduced-motion: reduce) { .bv-sparkle-scatter span { animation: none !important; } .bv-dot { animation: none !important; } } /* ── Responsive helpers used across surfaces ──────────────────────────── */ @media (max-width: 960px) { .bv-hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; } .bv-showcase-grid { grid-template-columns: 1fr !important; gap: 32px !important; } .bv-features-grid { grid-template-columns: repeat(2, 1fr) !important; } .bv-pricing-grid { grid-template-columns: 1fr !important; gap: 28px !important; } .bv-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } .bv-section { padding-left: 22px !important; padding-right: 22px !important; } .bv-self-healing-grid { grid-template-columns: 1fr !important; } .bv-stack-md { display: block !important; } .bv-hide-md { display: none !important; } .bv-nav-links { display: none !important; } .bv-blog-feat { grid-template-columns: 1fr !important; } .bv-blog-grid { grid-template-columns: 1fr !important; } } @media (max-width: 640px) { .bv-features-grid { grid-template-columns: 1fr !important; } .bv-footer-grid { grid-template-columns: 1fr !important; } .bv-hide-sm { display: none !important; } .bv-hero-pad { padding: 64px 22px 72px !important; } .bv-section { padding-top: 64px !important; padding-bottom: 64px !important; } .bv-display { font-size: clamp(40px, 11vw, 56px) !important; } }