/* ============================================ WIREDTYPE - Per-Type Theme Layer ("The Switch") Each DISC type defines accent palette + tagline. Loaded on every page. Activated by data-wt-type + data-wt-mode on . ============================================ */ /* ---------- Root defaults (no type / standard mode) ---------- */ :root { /* Fallback accent is Signal Rose */ --wt-accent: #E07A6B; --wt-accent-soft: rgba(224, 122, 107, 0.12); --wt-accent-strong: #C96A5B; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 224, 122, 107; --wt-glow: 0 0 0 3px rgba(224, 122, 107, 0.22); --wt-tagline: "Find your frequency."; --wt-pronoun-verb: "live"; --wt-pace: 1; } /* ============================================ PURE TYPES ============================================ */ html[data-wt-type="D"] { --wt-accent: #D04E4E; --wt-accent-soft: rgba(208, 78, 78, 0.12); --wt-accent-strong: #B83E3E; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 208, 78, 78; --wt-glow: 0 0 0 3px rgba(208, 78, 78, 0.22); --wt-tagline: "Dialed in. Ready to move."; --wt-pronoun-verb: "command"; --wt-pace: 1.2; } html[data-wt-type="I"] { --wt-accent: #D49540; --wt-accent-soft: rgba(212, 149, 64, 0.14); --wt-accent-strong: #BC8030; --wt-accent-contrast: #1A1520; --wt-accent-rgb: 212, 149, 64; --wt-glow: 0 0 0 3px rgba(212, 149, 64, 0.26); --wt-tagline: "Sparked, lit, wired for the room."; --wt-pronoun-verb: "spark"; --wt-pace: 1.15; } html[data-wt-type="S"] { --wt-accent: #4E9A5C; --wt-accent-soft: rgba(78, 154, 92, 0.12); --wt-accent-strong: #3E8A4C; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 78, 154, 92; --wt-glow: 0 0 0 3px rgba(78, 154, 92, 0.22); --wt-tagline: "Grounded. Tuned in. Here for the long arc."; --wt-pronoun-verb: "anchor"; --wt-pace: 0.85; } html[data-wt-type="C"] { --wt-accent: #4A8BC0; --wt-accent-soft: rgba(74, 139, 192, 0.12); --wt-accent-strong: #3A7BB0; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 74, 139, 192; --wt-glow: 0 0 0 3px rgba(74, 139, 192, 0.22); --wt-tagline: "Signal, clarified. Everything in its place."; --wt-pronoun-verb: "calibrate"; --wt-pace: 0.9; } /* ============================================ BLENDS (12) - weighted toward primary Math: 65% primary + 35% secondary (approx hex mix) ============================================ */ /* Di = 65% D(#D04E4E) + 35% I(#D49540) = ~#D2702F... use D2704A */ html[data-wt-type="Di"] { --wt-accent: #D26A42; --wt-accent-soft: rgba(210, 106, 66, 0.14); --wt-accent-strong: #BA5A32; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 210, 106, 66; --wt-glow: 0 0 0 3px rgba(210, 106, 66, 0.24); --wt-tagline: "Decisive, magnetic, always on transmit."; --wt-pronoun-verb: "charge"; --wt-pace: 1.2; } /* Id = 65% I + 35% D */ html[data-wt-type="Id"] { --wt-accent: #D07E44; --wt-accent-soft: rgba(208, 126, 68, 0.14); --wt-accent-strong: #B86E34; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 208, 126, 68; --wt-glow: 0 0 0 3px rgba(208, 126, 68, 0.24); --wt-tagline: "Charisma with teeth. Fun, then action."; --wt-pronoun-verb: "rally"; --wt-pace: 1.15; } /* Ds = 65% D + 35% S */ html[data-wt-type="Ds"] { --wt-accent: #9A7452; --wt-accent-soft: rgba(154, 116, 82, 0.14); --wt-accent-strong: #845E42; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 154, 116, 82; --wt-glow: 0 0 0 3px rgba(154, 116, 82, 0.22); --wt-tagline: "Steel wrapped in warmth. Lead and lift."; --wt-pronoun-verb: "steward"; --wt-pace: 1.0; } /* Sd = 65% S + 35% D */ html[data-wt-type="Sd"] { --wt-accent: #729256; --wt-accent-soft: rgba(114, 146, 86, 0.14); --wt-accent-strong: #5E7E42; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 114, 146, 86; --wt-glow: 0 0 0 3px rgba(114, 146, 86, 0.22); --wt-tagline: "Quiet authority. Grounded, then unmovable."; --wt-pronoun-verb: "anchor"; --wt-pace: 0.9; } /* Dc = 65% D + 35% C */ html[data-wt-type="Dc"] { --wt-accent: #8C6886; --wt-accent-soft: rgba(140, 104, 134, 0.14); --wt-accent-strong: #7A5672; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 140, 104, 134; --wt-glow: 0 0 0 3px rgba(140, 104, 134, 0.22); --wt-tagline: "Sharp edge, sharper plan. Precision pressure."; --wt-pronoun-verb: "execute"; --wt-pace: 1.1; } /* Cd = 65% C + 35% D */ html[data-wt-type="Cd"] { --wt-accent: #6D77A9; --wt-accent-soft: rgba(109, 119, 169, 0.14); --wt-accent-strong: #5B6599; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 109, 119, 169; --wt-glow: 0 0 0 3px rgba(109, 119, 169, 0.22); --wt-tagline: "Blueprint in one hand, hammer in the other."; --wt-pronoun-verb: "architect"; --wt-pace: 0.95; } /* Is = 65% I + 35% S */ html[data-wt-type="Is"] { --wt-accent: #B8914A; --wt-accent-soft: rgba(184, 145, 74, 0.14); --wt-accent-strong: #A07F3A; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 184, 145, 74; --wt-glow: 0 0 0 3px rgba(184, 145, 74, 0.22); --wt-tagline: "Warmth with wings. Friend first, star second."; --wt-pronoun-verb: "connect"; --wt-pace: 1.05; } /* Si = 65% S + 35% I */ html[data-wt-type="Si"] { --wt-accent: #7E9652; --wt-accent-soft: rgba(126, 150, 82, 0.14); --wt-accent-strong: #6A8242; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 126, 150, 82; --wt-glow: 0 0 0 3px rgba(126, 150, 82, 0.22); --wt-tagline: "Soft gravity. People stay close on purpose."; --wt-pronoun-verb: "harmonize"; --wt-pace: 0.9; } /* Ic = 65% I + 35% C */ html[data-wt-type="Ic"] { --wt-accent: #9A8E6C; --wt-accent-soft: rgba(154, 142, 108, 0.14); --wt-accent-strong: #867A5A; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 154, 142, 108; --wt-glow: 0 0 0 3px rgba(154, 142, 108, 0.22); --wt-tagline: "Storyteller with receipts. Charm, then proof."; --wt-pronoun-verb: "persuade"; --wt-pace: 1.05; } /* Ci = 65% C + 35% I */ html[data-wt-type="Ci"] { --wt-accent: #77919D; --wt-accent-soft: rgba(119, 145, 157, 0.14); --wt-accent-strong: #627D89; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 119, 145, 157; --wt-glow: 0 0 0 3px rgba(119, 145, 157, 0.22); --wt-tagline: "Quiet wit, clean data. Elegant by design."; --wt-pronoun-verb: "refine"; --wt-pace: 0.95; } /* Sc = 65% S + 35% C */ html[data-wt-type="Sc"] { --wt-accent: #4F928F; --wt-accent-soft: rgba(79, 146, 143, 0.14); --wt-accent-strong: #3F7E7B; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 79, 146, 143; --wt-glow: 0 0 0 3px rgba(79, 146, 143, 0.22); --wt-tagline: "Steady keeper. Calm systems, quiet wins."; --wt-pronoun-verb: "sustain"; --wt-pace: 0.85; } /* Cs = 65% C + 35% S */ html[data-wt-type="Cs"] { --wt-accent: #4F93A6; --wt-accent-soft: rgba(79, 147, 166, 0.14); --wt-accent-strong: #3F7F92; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 79, 147, 166; --wt-glow: 0 0 0 3px rgba(79, 147, 166, 0.22); --wt-tagline: "Careful architect. Every detail has a reason."; --wt-pronoun-verb: "calibrate"; --wt-pace: 0.9; } /* ============================================ TRI-TYPES (4) - equal blend of three ============================================ */ /* DIC = D + I + C blend */ html[data-wt-type="DIC"] { --wt-accent: #9C7276; --wt-accent-soft: rgba(156, 114, 118, 0.14); --wt-accent-strong: #866064; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 156, 114, 118; --wt-glow: 0 0 0 3px rgba(156, 114, 118, 0.22); --wt-tagline: "Three gears, one drive. Command, charm, calibrate."; --wt-pronoun-verb: "orchestrate"; --wt-pace: 1.05; } /* DIS = D + I + S */ html[data-wt-type="DIS"] { --wt-accent: #A08059; --wt-accent-soft: rgba(160, 128, 89, 0.14); --wt-accent-strong: #8A6C49; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 160, 128, 89; --wt-glow: 0 0 0 3px rgba(160, 128, 89, 0.22); --wt-tagline: "Push, pull, hold. The whole spectrum in one person."; --wt-pronoun-verb: "lead"; --wt-pace: 1.1; } /* DSC = D + S + C */ html[data-wt-type="DSC"] { --wt-accent: #72767D; --wt-accent-soft: rgba(114, 118, 125, 0.14); --wt-accent-strong: #60646B; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 114, 118, 125; --wt-glow: 0 0 0 3px rgba(114, 118, 125, 0.22); --wt-tagline: "Grounded, gritty, exact. A quiet force."; --wt-pronoun-verb: "build"; --wt-pace: 0.95; } /* ISC = I + S + C */ html[data-wt-type="ISC"] { --wt-accent: #7A9075; --wt-accent-soft: rgba(122, 144, 117, 0.14); --wt-accent-strong: #667C61; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 122, 144, 117; --wt-glow: 0 0 0 3px rgba(122, 144, 117, 0.22); --wt-tagline: "Warm, watchful, wise. A team in one soul."; --wt-pronoun-verb: "weave"; --wt-pace: 0.95; } /* ============================================ PARADOX TYPES (4) - diagonal gradient hint in the color ============================================ */ /* CpI = D with I paradox (assertive AND playful in tension) */ html[data-wt-type="CpI"] { --wt-accent: #C66850; --wt-accent-soft: rgba(198, 104, 80, 0.14); --wt-accent-strong: #AE5440; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 198, 104, 80; --wt-glow: 0 0 0 3px rgba(198, 104, 80, 0.26); --wt-tagline: "Thunder and fireworks, same sky."; --wt-pronoun-verb: "ignite"; --wt-pace: 1.2; } /* DpS = D with S paradox (urgent AND patient) */ html[data-wt-type="DpS"] { --wt-accent: #87714E; --wt-accent-soft: rgba(135, 113, 78, 0.14); --wt-accent-strong: #735D3E; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 135, 113, 78; --wt-glow: 0 0 0 3px rgba(135, 113, 78, 0.22); --wt-tagline: "Fast pulse, slow breath. Force without noise."; --wt-pronoun-verb: "endure"; --wt-pace: 1.0; } /* IpC = I with C paradox (warm AND exacting) */ html[data-wt-type="IpC"] { --wt-accent: #9A8678; --wt-accent-soft: rgba(154, 134, 120, 0.14); --wt-accent-strong: #847268; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 154, 134, 120; --wt-glow: 0 0 0 3px rgba(154, 134, 120, 0.22); --wt-tagline: "Confetti on the blueprint. Joy with standards."; --wt-pronoun-verb: "craft"; --wt-pace: 1.0; } /* SpD = S with D paradox (patient AND decisive) */ html[data-wt-type="SpD"] { --wt-accent: #69855B; --wt-accent-soft: rgba(105, 133, 91, 0.14); --wt-accent-strong: #577149; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 105, 133, 91; --wt-glow: 0 0 0 3px rgba(105, 133, 91, 0.22); --wt-tagline: "Still water that turns the wheel."; --wt-pronoun-verb: "hold"; --wt-pace: 0.9; } /* ============================================ BALANCED (1) - all four types equal ============================================ */ html[data-wt-type="DISC"] { --wt-accent: #7D8580; --wt-accent-soft: rgba(125, 133, 128, 0.14); --wt-accent-strong: #6B7370; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 125, 133, 128; --wt-glow: 0 0 0 3px rgba(125, 133, 128, 0.22); --wt-tagline: "Every frequency, tuned. A whole band in one signal."; --wt-pronoun-verb: "balance"; --wt-pace: 1.0; } /* ============================================ MODE: 'wired' applies the type accent; 'standard' keeps Signal Rose Default mode when no attribute is set is standard. ============================================ */ /* When the html is in standard mode, override --wt-accent back to rose regardless of type. This lets toggling work without clearing data-wt-type. */ html[data-wt-mode="standard"] { --wt-accent: #E07A6B; --wt-accent-soft: rgba(224, 122, 107, 0.12); --wt-accent-strong: #C96A5B; --wt-accent-contrast: #ffffff; --wt-accent-rgb: 224, 122, 107; --wt-glow: 0 0 0 3px rgba(224, 122, 107, 0.22); } /* ============================================ THEME HOOKS - Wire --wt-accent into the brand accent variables. These overrides run WHEN a type is set AND mode is 'wired' (or unset). We key off :not([data-wt-mode="standard"]) so default = wired. ============================================ */ html[data-wt-type]:not([data-wt-mode="standard"]) { --accent: var(--wt-accent); --accent-dark: var(--wt-accent-strong); --accent-deep: var(--wt-accent-strong); --accent-light: var(--wt-accent); --accent-glow: var(--wt-accent-soft); --accent-text: var(--wt-accent); --accent-rgb: var(--wt-accent-rgb); } /* ============================================ GLOBAL TRANSITIONS - retint smoothly when mode changes ============================================ */ html, body, a, button, .gnav__cta, .gnav__bottom-item--active, .btn, .btn-primary, .card, [class*="accent"] { transition: color 420ms cubic-bezier(.22,.61,.36,1), background-color 420ms cubic-bezier(.22,.61,.36,1), border-color 420ms cubic-bezier(.22,.61,.36,1), box-shadow 420ms cubic-bezier(.22,.61,.36,1), fill 420ms cubic-bezier(.22,.61,.36,1), stroke 420ms cubic-bezier(.22,.61,.36,1); } @media (prefers-reduced-motion: reduce) { html, body, a, button, .gnav__cta, .gnav__bottom-item--active, .btn, .btn-primary, .card, [class*="accent"] { transition: none !important; } } /* Signal Ripple logo retint - recolor inner circle + arcs when type is active */ html[data-wt-type]:not([data-wt-mode="standard"]) .gnav__logo-svg circle:first-child, html[data-wt-type]:not([data-wt-mode="standard"]) .gnav__logo-svg path:first-of-type { transition: fill 420ms ease, stroke 420ms ease; } html[data-wt-type]:not([data-wt-mode="standard"]) .gnav__logo-svg > circle { fill: var(--wt-accent) !important; } html[data-wt-type]:not([data-wt-mode="standard"]) .gnav__logo-svg > path:first-of-type { stroke: var(--wt-accent) !important; } /* ============================================ WOW OVERLAY - full-viewport ripple sweep Created/managed by theme-engine.js ============================================ */ .wt-wow-overlay { position: fixed; inset: 0; z-index: 99999; pointer-events: none; background: transparent; overflow: hidden; } .wt-wow-overlay::before { /* Dim-haze pulse */ content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(26,21,32,0.0) 0%, rgba(26,21,32,0.45) 80%); opacity: 0; animation: wt-wow-haze 1200ms ease-out forwards; } .wt-wow-ring { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 3px solid var(--wt-accent, #E07A6B); opacity: 0; transform: scale(0); animation: wt-wow-ring 1200ms cubic-bezier(.2,.7,.25,1) forwards; box-shadow: 0 0 40px 8px var(--wt-accent-soft, rgba(224,122,107,.18)), inset 0 0 20px 2px var(--wt-accent-soft, rgba(224,122,107,.18)); } .wt-wow-ring--2 { animation-delay: 140ms; border-width: 2px; opacity: 0.7; } .wt-wow-ring--3 { animation-delay: 280ms; border-width: 1.5px; opacity: 0.5; } .wt-wow-wash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, var(--wt-accent-soft, rgba(224,122,107,.18)) 0%, transparent 55%); opacity: 0; transform: scale(0.2); animation: wt-wow-wash 1200ms cubic-bezier(.2,.65,.25,1) forwards; animation-delay: 60ms; } .wt-wow-toast { position: absolute; left: 50%; bottom: 12%; transform: translate(-50%, 24px); padding: 14px 22px; border-radius: 999px; background: rgba(26,21,32,0.92); backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6); border: 1px solid var(--wt-accent, #E07A6B); box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 0 3px var(--wt-accent-soft, rgba(224,122,107,0.15)); color: #F0EAE0; font-family: "Outfit", system-ui, sans-serif; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; opacity: 0; animation: wt-wow-toast 900ms cubic-bezier(.2,.7,.25,1) forwards; animation-delay: 700ms; display: flex; align-items: center; gap: 10px; pointer-events: none; } .wt-wow-toast__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--wt-accent, #E07A6B); box-shadow: 0 0 12px 2px var(--wt-accent, #E07A6B); } [data-theme="light"] .wt-wow-toast { background: rgba(250, 247, 243, 0.95); color: #1A1520; } @keyframes wt-wow-haze { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes wt-wow-ring { 0% { opacity: 0; transform: scale(0); } 12% { opacity: 0.9; } 100% { opacity: 0; transform: scale(90); } } @keyframes wt-wow-wash { 0% { opacity: 0; transform: scale(0.2); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(2.2); } } @keyframes wt-wow-toast { 0% { opacity: 0; transform: translate(-50%, 24px); } 60% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 1; transform: translate(-50%, 0); } } /* prefers-reduced-motion: no animation, just a color snap */ @media (prefers-reduced-motion: reduce) { .wt-wow-overlay, .wt-wow-ring, .wt-wow-wash, .wt-wow-toast::before, .wt-wow-overlay::before { animation: none !important; } .wt-wow-toast { opacity: 1; transform: translate(-50%, 0); animation: none !important; } } /* ============================================ NAV MODE TOGGLE PILL - [Standard | Wired for me] ============================================ */ .wt-mode-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); font-family: "Inter", sans-serif; font-size: 0.72rem; font-weight: 600; white-space: nowrap; margin-right: 6px; } [data-theme="light"] .wt-mode-toggle { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); } .wt-mode-toggle__btn { appearance: none; background: transparent; border: none; cursor: pointer; font: inherit; color: var(--text-secondary, #B8AFA5); padding: 5px 11px; border-radius: 999px; transition: color .18s ease, background .18s ease, transform .18s ease; line-height: 1; } .wt-mode-toggle__btn:hover { color: var(--text, #F0EAE0); } .wt-mode-toggle__btn:focus-visible { outline: 2px solid var(--wt-accent, #E07A6B); outline-offset: 2px; } .wt-mode-toggle__btn--active { background: var(--wt-accent, #E07A6B); color: var(--wt-accent-contrast, #fff); box-shadow: 0 1px 6px rgba(0,0,0,0.18); } .wt-mode-toggle__btn--active:hover { color: var(--wt-accent-contrast, #fff); } @media (max-width: 768px) { .wt-mode-toggle { display: none; } /* Mobile mode toggle lives in the overlay instead */ } .wt-mode-toggle--mobile { display: none; margin: 0 0 16px; width: 100%; justify-content: center; } @media (max-width: 768px) { .wt-mode-toggle--mobile { display: inline-flex; } } /* aria-live status (visually hidden) */ .wt-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ============================================ LOCKED TOGGLE (no type set yet) The pill still renders so the affordance is visible, but the "Wired for me" side reads as locked: dimmed, padlock icon, not-allowed cursor, and a tooltip on hover. ============================================ */ .wt-mode-toggle--locked { opacity: 0.55; } .wt-mode-toggle--locked .wt-mode-toggle__btn[data-wt-mode-btn="wired"] { cursor: not-allowed; position: relative; padding-right: 26px; } .wt-mode-toggle--locked .wt-mode-toggle__btn[data-wt-mode-btn="wired"]::after { content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8AFA5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; opacity: 0.85; } .wt-mode-toggle__tooltip { position: absolute; left: 50%; transform: translateX(-50%) translateY(8px); bottom: -38px; white-space: nowrap; font-size: 0.72rem; padding: 6px 10px; border-radius: 6px; background: rgba(20, 18, 24, 0.96); color: #F0EAE0; border: 1px solid rgba(255,255,255,0.08); pointer-events: none; opacity: 0; transition: opacity 160ms ease, transform 160ms ease; z-index: 9999; } .wt-mode-toggle--locked:hover .wt-mode-toggle__tooltip, .wt-mode-toggle--locked:focus-within .wt-mode-toggle__tooltip { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================ POST-ASSESSMENT INVITATION PULSE Toggle pulses in Signal Rose to draw the eye to "Wired for me" once the user has just gotten their type for the first time. Stops as soon as the user clicks the wired side. ============================================ */ .wt-mode-toggle--pulse { animation: wt-toggle-pulse 2000ms cubic-bezier(.22,.61,.36,1) 0s 6; } .wt-mode-toggle--pulse-soft { animation: wt-toggle-pulse 2000ms cubic-bezier(.22,.61,.36,1) 0s 3; } @keyframes wt-toggle-pulse { 0% { box-shadow: 0 0 0 0 rgba(224, 122, 107, 0); } 40% { box-shadow: 0 0 0 16px rgba(224, 122, 107, 0.4); } 100% { box-shadow: 0 0 0 0 rgba(224, 122, 107, 0); } } @media (prefers-reduced-motion: reduce) { .wt-mode-toggle--pulse, .wt-mode-toggle--pulse-soft { animation: none !important; } } /* ============================================ LOCKED-TOGGLE INLINE PROMPT Small elegant card that rises when a user clicks the locked toggle. Self-dismisses after a few seconds or on click. ============================================ */ .wt-locked-prompt { position: fixed; z-index: 10000; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(10px); display: inline-flex; align-items: center; gap: 14px; padding: 12px 18px; border-radius: 12px; background: rgba(26, 21, 32, 0.96); color: #F0EAE0; border: 1px solid rgba(224, 122, 107, 0.45); box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 0 0 4px rgba(224,122,107,0.12); font-family: "Inter", sans-serif; font-size: 0.92rem; opacity: 0; pointer-events: none; transition: opacity 240ms ease, transform 240ms ease; } .wt-locked-prompt--visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .wt-locked-prompt__cta { appearance: none; background: #E07A6B; color: #fff; border: none; font: inherit; font-weight: 600; padding: 8px 14px; border-radius: 8px; cursor: pointer; } .wt-locked-prompt__cta:hover { background: #C96A5B; } .wt-locked-prompt__close { appearance: none; background: transparent; border: none; color: rgba(240, 234, 224, 0.65); font-size: 1.1rem; cursor: pointer; padding: 0 4px; line-height: 1; } /* ============================================ WIZARD-OF-OZ SEPIA STAGE Applied to by the engine during the early phase of the wow animation. Saturated reality fades in as the rings expand. ============================================ */ html.wt-oz-sepia { filter: saturate(0.5) sepia(0.4); transition: filter 1500ms cubic-bezier(.22,.61,.36,1); } html.wt-oz-revealing { filter: saturate(1) sepia(0); transition: filter 1500ms cubic-bezier(.22,.61,.36,1); } @media (prefers-reduced-motion: reduce) { html.wt-oz-sepia, html.wt-oz-revealing { filter: none !important; transition: none !important; } }