/* ============================================================================ CIRCULANT — AI Voice Agency design tokens & shared recipes ---------------------------------------------------------------------------- SINGLE SOURCE OF TRUTH for the AVA parent brand. Linked in every page BEFORE that page's own styles, so every page can consume the tokens and inherits the shared polish (focus, glass, LIVE dot). Semantic color law (also in DESIGN.md): green = live status gold = money / pricing violet = featured cyan = everything else Budget: max ~3 accent moments per screen. This file only defines :root tokens + OPT-IN utility classes + a global keyboard-focus rule. It sets NO base/body styles, so linking it onto an existing page can never cause a visual regression. ============================================================================ */ :root { /* ---- Palette --------------------------------------------------------- */ --void: #0A0A0F; /* background — never pure black */ --void-raise: #14141C; /* raised surface (card on void) */ --ink: #EEF0F4; /* body text — never pure white */ --matter: #EEF0F4; /* alias (standalone pages use --matter) */ --ink-mute: #808088; /* secondary text */ --dim: rgba(238,240,244,0.64); --cyan: #00D4FF; /* PRIMARY — CTAs, links, everything else */ --cyan-bright: #00E5FF; /* hover / active */ --cyan-active: #00E5FF; /* alias */ --live-green: #22C55E; /* LIVE status ONLY */ --live-green-bright: #4ADE80; --gold: #FFB800; /* MONEY — pricing links & figures ONLY */ --gold-bright: #FFC94D; --violet: #8B5CF6; /* FEATURED / flagship ONLY */ --violet-bright: #A78BFA; --danger: #FF6B6B; /* ---- Lines & surfaces ------------------------------------------------ */ --line: rgba(255,255,255,0.10); --line-strong: rgba(0,212,255,0.40); /* ---- Type families --------------------------------------------------- */ --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* ---- Spacing scale (8px base) --------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 80px; --space-9: 128px; /* ---- Fluid type scale ------------------------------------------------ */ --text-xs: 11px; --text-sm: 13px; --text-base: clamp(15px, 1.2vw, 16px); --text-lg: clamp(17px, 2.5vw, 21px); --text-xl: clamp(20px, 3vw, 26px); --text-2xl: clamp(24px, 4vw, 34px); --text-3xl: clamp(28px, 5vw, 44px); --text-display: clamp(32px, 6vw, 56px); /* ---- Radii ----------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; /* ---- Prose measure (readable line length) --------------------------- */ --measure: 70ch; /* sits inside the 65–75ch target band */ /* ---- Glass recipe (values consumed by .glass below) ----------------- */ --glass-fill: linear-gradient(165deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04)); --glass-border: 1px solid rgba(0,212,255,0.20); --glass-blur: 18px; --glass-shadow: 0 18px 60px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.07); --glass-fallback: rgba(17,19,27,0.93); /* ---- Glow recipe ----------------------------------------------------- */ --glow-cyan: 0 0 32px rgba(0,212,255,0.40); --glow-violet: 0 0 40px rgba(139,92,246,0.35); --glow-gold: 0 0 30px rgba(255,184,0,0.30); --glow-green: 0 0 14px rgba(34,197,94,0.55); } /* ---- Glass card recipe (opt-in) --------------------------------------- */ .glass { background: var(--glass-fallback); border: var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--glass-fallback); } } /* ---- Glow utilities (opt-in) ------------------------------------------ */ .glow-cyan { box-shadow: var(--glow-cyan); } .glow-violet { box-shadow: var(--glow-violet); } .glow-gold { box-shadow: var(--glow-gold); } /* ---- Semantic accent helpers (color law) ------------------------------ */ .accent-cyan { color: var(--cyan); } .accent-live { color: var(--live-green); } .accent-money { color: var(--gold); } .accent-featured { color: var(--violet); } /* ---- Readable prose measure ------------------------------------------- */ .prose { max-width: var(--measure); } /* ---- LIVE status dot — green, pulsing, reduced-motion safe ------------ */ .circ-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--live-green); margin-right: 8px; box-shadow: var(--glow-green); animation: circLivePulse 2s ease-in-out infinite; } @keyframes circLivePulse { 0%, 100% { box-shadow: 0 0 6px rgba(34,197,94,0.5); opacity: 0.85; } 50% { box-shadow: 0 0 14px rgba(34,197,94,0.95); opacity: 1; } } /* ---- Featured badge — violet (FLAGSHIP / MOST POPULAR) ---------------- */ .circ-badge { display: inline-block; padding: 5px 14px; border-radius: var(--radius-pill); background: var(--violet); color: var(--void); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 0 24px rgba(139,92,246,0.55); } /* ---- Global keyboard focus (a11y) ------------------------------------- */ /* Matches the proven rule in styles.css; extends it to standalone pages */ /* that do not link styles.css. Only visible on keyboard focus. */ *:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } /* ---- Motion safety ---------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .circ-live-dot { animation: none; } }