/** * VirtuOZ design system — shared primitives + brand scopes. * Load after marketing `home.css` on public shells. * * Base typography, spacing, and radius stay in `home.css` (:root). * Brand-specific colors use `data-brand` on . */ /* --- EvoPay (default marketing; mirrors existing gold glass theme) --- */ :root[data-brand="evopay"] { --accent: #c9a962; --accent-soft: rgba(201, 169, 98, 0.18); --accent-bright: #e4cf8a; --accent-dim: #8a7340; --bg: var(--bg-deep, #0f1118); --ink: var(--text-primary, #f4f1eb); --ink-soft: var(--text-muted, #b9b4ab); --line: var(--border-glass, rgba(255, 255, 255, 0.12)); } :root[data-brand="evopay"][data-theme="light"] { --accent: #8a6f2a; --accent-soft: rgba(138, 111, 42, 0.2); --accent-bright: #b5923a; --accent-dim: #5c4a1f; --bg: var(--bg-deep, #f5f2ec); --ink: var(--text-primary, #1a1c22); --ink-soft: var(--text-muted, #4d515c); --line: var(--border-glass, rgba(26, 28, 34, 0.1)); } /* --- SynFi (warm editorial; light-first marketing) --- */ :root[data-brand="synfi"] { --accent: #b85c2e; --accent-soft: #f5e7dd; --accent-bright: #d47842; --accent-dim: #8a4522; --bg: #faf8f4; --ink: #1a1a18; --ink-soft: #4f4e4a; --line: #e5e3dc; } :root[data-brand="synfi"][data-theme="dark"] { --accent: #d47842; --accent-soft: rgba(212, 120, 66, 0.18); --accent-bright: #e8945a; --accent-dim: #b85c2e; --bg: #141310; --ink: #f4f1eb; --ink-soft: #b9b4ab; --line: rgba(255, 255, 255, 0.12); } /* SynFi logo: light wordmark on light surfaces, bright variant on dark theme */ html[data-brand="synfi"] .brand-logo--for-dark { display: none; } html[data-brand="synfi"][data-theme="dark"] .brand-logo--for-light { display: none; } html[data-brand="synfi"][data-theme="dark"] .brand-logo--for-dark { display: inline; } .synfi-marketing-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-block: 0 1.25rem; margin-inline: 0; padding-block: 0.5rem; padding-inline: 0; border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.12)); } .synfi-nav__link { font-size: 0.92rem; text-decoration: none; color: var(--muted, #9ca3af); } .synfi-nav__link.is-active { color: var(--accent, #c45c2e); font-weight: 600; } .synfi-legal-draft-badge { display: inline-block; margin: 0 0 1rem; padding: 0.35rem 0.65rem; border-radius: 6px; background: rgba(196, 92, 62, 0.15); border: 1px solid var(--accent, #c45c2e); } .synfi-table { width: 100%; border-collapse: collapse; margin: 1rem 0; } .synfi-table th, .synfi-table td { border: 1px solid var(--border, rgba(255, 255, 255, 0.12)); padding: 0.5rem 0.75rem; text-align: left; } /* SynFi footer (5-column dark band) */ .site-footer--synfi { background: #1a1a18; color: #f4f1eb; border-top: 3px solid var(--accent, #b85c2e); } .site-footer--synfi a { color: #f4f1eb; } .site-footer--synfi .footer-synfi-dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent, #b85c2e); margin-inline-end: 0.4rem; vertical-align: middle; } .site-footer--synfi .footer-upper--synfi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; } @media (max-width: 960px) { .site-footer--synfi .footer-upper--synfi { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .site-footer--synfi .footer-upper--synfi { grid-template-columns: 1fr; } } /* --- Broker / Bank (placeholders until product launch) --- */ :root[data-brand="broker"], :root[data-brand="bank"] { --accent: #64748b; --accent-soft: #e2e8f0; --bg: #f8fafc; --ink: #0f172a; --ink-soft: #475569; --line: #cbd5e1; }