/* ============================================================ AccentCoach — Brand System ("Phonetics Lab") ONE identity for the entire platform: web app, mobile app, welcome pages, and the admin panel. Every surface imports this file, so the brand is defined in exactly one place. ============================================================ */ :root{ /* ---- surfaces ---- */ --bg:#F7F4EC; /* warm ivory paper — the base */ --bg-2:#FCFAF4; /* raised panel */ --bg-3:#FFFFFF; /* card */ --edge:#E7E1D3; /* hairline border */ --edge-2:#D6CFBD; /* stronger border */ /* ---- ink ---- */ --ink:#1C2436; /* primary text — ink navy */ --ink-2:#5E6982; /* muted */ --ink-3:#97A0B4; /* faint */ /* ---- brand colors ---- */ --teal:#0C9B8A; /* SIGNATURE — action, live, brand */ --teal-d:#0A7D6F; /* pressed / deep */ --teal-dim:#DBF0EC; /* teal wash */ --amber:#D98A1F; /* pitch / stress / streak */ --amber-dim:#F7EBD6; --red:#DD4B44; /* record / stop */ --red-dim:#F8E3E1; --violet:#6A5AE0; /* AI / Vera */ --violet-d:#5546C8; --violet-dim:#EAE6FB; /* aliases (back-compat with existing web app CSS) */ --cyan:var(--teal); --cyan-dim:var(--teal-dim); /* ---- geometry ---- */ --r:16px; /* card radius */ --r-lg:22px; /* large radius */ --r-sm:10px; /* small radius */ --sidebar:236px; /* ---- elevation ---- */ --shadow-sm:0 2px 8px rgba(28,36,54,.05); --shadow:0 12px 30px rgba(28,36,54,.08); --shadow-lg:0 28px 60px -20px rgba(12,155,138,.28); /* ---- type ---- */ --font-display:"Fraunces",Georgia,serif; --font-body:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-mono:"Space Mono",ui-monospace,monospace; /* ---- motion ---- */ --ease:cubic-bezier(.22,1,.36,1); --dur:.28s; } /* ============================================================ BRAND PRIMITIVES — reusable classes shared across surfaces ============================================================ */ /* the wordmark lockup — used in web app, admin, welcome, mobile */ .ac-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;} .ac-brand .ac-mark{flex-shrink:0;} .ac-brand .ac-word{font-family:var(--font-display);font-weight:900;letter-spacing:-.02em;color:var(--ink);line-height:1;} .ac-brand .ac-word .ac-accent{color:var(--teal);} .ac-brand .ac-tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-top:3px;} /* ------------------------------------------------------------ PULSE HALO — shared feedback ring (.ac-pulse) One component for "here is how that went": two rings expand and fade from the element, tinted by outcome. Wrap any element and toggle .is-pulsing to fire it. … Variants set the colour pair: --good teal (strong) --mid amber (close) --low red (needs work) Two deliberate details: 1. It claims BOTH ::before and ::after, so it must be applied to a wrapper rather than an element that already uses them — .lp-rec-btn, for instance, owns ::before for its recording ring. 2. The animation is an ENHANCEMENT, not the message. The reduced- motion rule at the bottom of this file flattens every animation to nothing, so the outcome also reads as a static tinted ring via box-shadow — otherwise motion-sensitive users would see no feedback at all. ------------------------------------------------------------ */ .ac-pulse{ position:relative; display:inline-flex; border-radius:inherit; --pulse-color:var(--teal); --pulse-wash:var(--teal-dim); } .ac-pulse--good{--pulse-color:var(--teal); --pulse-wash:var(--teal-dim);} .ac-pulse--mid {--pulse-color:var(--amber);--pulse-wash:var(--amber-dim);} .ac-pulse--low {--pulse-color:var(--red); --pulse-wash:var(--red-dim);} .ac-pulse::before, .ac-pulse::after{ content:""; position:absolute; inset:-6px; border-radius:inherit; border:3px solid var(--pulse-color); opacity:0; pointer-events:none; /* MUST paint above the wrapped control. .ac-pulse is position:relative with z-index:auto, so it opens no stacking context: without this the ::before ring paints in tree order BEHIND the button — and behind heavy shadows like .lp-rec-btn's red glow, which swallowed it entirely. */ z-index:2; } /* ::before is the RING THAT CARRIES THE MESSAGE. It is opaque the whole time .is-pulsing is set, with no animation required — the outcome must be legible even when animation never runs. */ .ac-pulse.is-pulsing::before{ opacity:1; box-shadow:0 0 0 6px var(--pulse-wash); } /* ::after is the expanding flourish on top — decoration, never the message. */ @keyframes acPulseHold{ 0% {opacity:0; transform:scale(.86);} 9% {opacity:1; transform:scale(1);} 74% {opacity:1; transform:scale(1);} 100%{opacity:0; transform:scale(1.07);} } @keyframes acPulseRing{ 0% {opacity:.85; transform:scale(.96); border-width:3px;} 60% {opacity:.35;} 100%{opacity:0; transform:scale(1.75); border-width:1px;} } /* Animation is opt-IN for motion-tolerant users, rather than opt-out via the blanket rule below. That rule forces animation-duration to ~0 with the keyframes' fill-mode still applied, which would land on the final frame — opacity:0 — and silently erase the feedback. */ @media (prefers-reduced-motion: no-preference){ .ac-pulse.is-pulsing::before{animation:acPulseHold 1.7s var(--ease) forwards;} .ac-pulse.is-pulsing::after {animation:acPulseRing 1.15s var(--ease) .12s forwards;} /* decorative, continuous variant — ambience rather than feedback */ .ac-pulse--ambient::before, .ac-pulse--ambient::after{border-width:2px;} .ac-pulse--ambient::before{animation:acPulseRing 3.6s var(--ease) infinite;} .ac-pulse--ambient::after {animation:acPulseRing 3.6s var(--ease) 1.8s infinite;} } /* the ambient variant is pure decoration — it must not leave a static ring */ .ac-pulse--ambient::before{opacity:0;box-shadow:none;} @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;} } /* The site name inside running text ("Go to X", "Welcome to X"), as opposed to the wordmark lockups .brand-name / .ac-word / .nav-word carry their own type for (v1.99.16). site-brand.js rewrites all four; this one exists so a name in a sentence has a hook without inheriting a wordmark's styling. nowrap because a two-word product name breaking mid-brand reads as two. */ .brand-word{white-space:nowrap;} /* A LOGO CAN NEVER RENDER AT ITS NATURAL SIZE (v1.99.16). site-brand.js swaps an mark for an and carries the mark's own classes across, so the page's existing sizing applies — but an operator uploads whatever they have, and a mark class without explicit dimensions would let a 512px file take over the header. This is the floor under that; a page's own .brand-mark / .ac-mark rule still wins where it sets one. */ .brand-img{max-width:32px;max-height:32px;object-fit:contain;} /* ---- confetti (v1.99.26) ---- The canvas Confetti.burst() appends and removes. Every layout rule is here rather than in the script because it is presentation, and because both documents that celebrate — the app and certificate.html — load this file. pointer-events:none is the load-bearing one: this covers the entire viewport, and without it a full-screen invisible sheet would swallow every click for as long as it is up. It is also why there is no control on it and nothing to dismiss. z-index sits above the app shell and its dialogs so a burst is not clipped by the auth panel or a scrim, and BELOW nothing in particular — it takes no input, so it cannot get in the way of anything it covers. .no-print keeps it off a printed certificate: the print stylesheet's whole contract is that anything the paper must not carry lives in that class, and a canvas of falling paper is not part of a credential. */ .ac-confetti{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:9999; background:transparent; } @media print{ .ac-confetti{display:none !important;} } @media (prefers-reduced-motion: reduce){ .ac-confetti{display:none !important;} }