/* ============================================================================= IQ Factor — shared motion + brand engine stylesheet. Linked once from index.html; reused by EVERY test. - MOTION (tokens, keyframes, .cta, transitions, micro-interactions) is GLOBAL and opt-in via classes — inert until an element uses it, so it never changes a test that doesn't ask for it. - BRAND PALETTE is scoped under [data-theme="vitality"] (set on from config.meta.theme) so it can't clobber other tests' colours (e.g. the IQ funnel keeps its own --bg/--line). Palette rule (hard): lilac (#C4A1D9) and olive (#A69140) NEVER share a gradient. --grad-data is lilac->violet only. Olive is free elsewhere (glows, markers, badges). GPU only: animate transform / opacity (background-position on .cta is the one deliberate exception, isolated to a single small node). ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;600;700;800&display=swap'); :root { /* Motion tokens (spec §2) */ --dur-micro: 180ms; --dur-base: 320ms; --dur-slow: 650ms; --dur-data: 1100ms; --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-inout: cubic-bezier(.65, 0, .35, 1); --loop-ambient: 9s; /* CTA violet family (self-contained so .cta works in any theme; no olive) */ --btn-1: #6B4E8E; --btn-2: #8E6BB0; --btn-hi: #A98AC9; } /* ===== Keyframes ============================================================ */ @keyframes cta-flow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @keyframes cta-shine { 0%, 55% { transform: translateX(0) skewX(-18deg); } 80%, 100% { transform: translateX(520%) skewX(-18deg); } } /* tiny, calm ambient drift (≤8px / ≤3%) */ @keyframes ambient-a { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(6px,-8px,0) scale(1.03); } } @keyframes ambient-b { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-7px,6px,0) scale(1.025); } } @keyframes fade-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-fall { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } } @keyframes toast-in { 0% { opacity: 0; transform: translateY(-14px); } 12%, 88% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-8px); } } @keyframes press-pop { 0% { transform: scale(1); } 50% { transform: scale(.98); } 100% { transform: scale(1); } } /* ===== CTA — "перелив" (spec §3), pure violet family, no olive ============== */ .cta { position: relative; overflow: hidden; color: #fff; font-weight: 700; border: none; cursor: pointer; border-radius: 100px; padding: 17px 24px; background: linear-gradient(90deg, var(--btn-1), var(--btn-2), var(--btn-1)); background-size: 200% 100%; animation: cta-flow 6s var(--ease-inout) infinite; box-shadow: 0 10px 26px rgba(107, 78, 142, .35); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); will-change: transform; } .cta::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: translateX(0) skewX(-18deg); animation: cta-shine 6s var(--ease-inout) infinite; pointer-events: none; } .cta:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(107, 78, 142, .45); } .cta:active { transform: translateY(0) scale(.98); } /* ===== Ambient glows (spec §4) — lilac TL + olive BR as SEPARATE radial blobs (not a shared gradient, so the palette rule holds) ======================== */ .ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .ambient::before, .ambient::after { content: ""; position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(80px); opacity: .14; will-change: transform; } .ambient::before { top: -16vmax; left: -12vmax; background: radial-gradient(circle, #C4A1D9, transparent 70%); animation: ambient-a var(--loop-ambient) var(--ease-inout) infinite; } .ambient::after { bottom: -16vmax; right: -12vmax; background: radial-gradient(circle, #A69140, transparent 70%); animation: ambient-b calc(var(--loop-ambient) * 1.25) var(--ease-inout) infinite; } /* ===== Entrances + screen transitions (spec §4) ============================ */ .rise { animation: fade-rise var(--dur-base) var(--ease-out) both; } .screen-enter { animation: fade-rise var(--dur-slow) var(--ease-out) both; } .screen-exit { animation: fade-fall var(--dur-base) var(--ease-out) both; } /* stagger: set --i per child; ~70ms steps (spec §5 hero) */ .stagger > * { animation: fade-rise var(--dur-base) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); } /* ===== Data viz helpers ===================================================== */ .bar-track { background: rgba(32, 32, 33, .06); border-radius: 100px; overflow: hidden; } .bar-fill { transform-origin: left center; transform: scaleX(0); transition: transform var(--dur-slow) var(--ease-out); border-radius: 100px; } /* ===== Micro-interactions (spec §6) — opt-in via class ===================== */ .lift { transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .lift:hover { transform: translateY(-2px); } .lift:active { transform: scale(.98); } .press:active { animation: press-pop var(--dur-micro) var(--ease-out); } /* milestone toast */ .toast { animation: toast-in 1900ms var(--ease-out) both; } /* ===== prefers-reduced-motion (spec §8) ==================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } /* data nodes (rings/curves/bars) are set to their final state by JS — see _motion.js */ } /* ============================================================================= BRAND THEME — "vitality" (spec §1 + Stitch DESIGN.md). Scoped to opted-in tests. ============================================================================= */ [data-theme="vitality"] { --bg: #FBFAF9; --card: #FFFFFF; --ink: #202021; --dim: #76726B; --lilac: #C4A1D9; --violet: #8E6BB0; --olive: #A69140; --line: rgba(32, 32, 33, .07); /* data gradient — one family only (lilac -> violet) */ --grad-data: linear-gradient(135deg, #C4A1D9 0%, #8E6BB0 100%); --shadow-card: 0 14px 44px rgba(32, 32, 33, .08); --radius-card: 24px; font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--ink); } [data-theme="vitality"] .data-fill { background: var(--grad-data); } [data-theme="vitality"] .olive { color: var(--olive); } /* solo olive accent (marker/badge) */ [data-theme="vitality"] .card { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }