/* ============================================================================= * EVPS-1000X -- Experience skins (motion + surface "feel" presets). * * A THIRD orthogonal preset axis alongside style (colour tokens) and layout * (structure). Applied via the `data-evps-experience` attribute on , * set before first paint by the ClientAreaHeaderOutput hook. The default value * "classic" intentionally emits NO rules here -- it is the theme's native feel. * * Targets ONLY real, shipped classes (.evps-card, .evps-topbar, .evps-app, * .evps-btn--primary, .evps-card--accent) so every rule lands on live markup. * * CONSTRAINTS (enforced throughout): * - NO third-party CDN, NO @import, NO external font/asset. * - ALL motion wrapped in @media (prefers-reduced-motion: no-preference) so * reduced-motion users get the static fallback automatically (WCAG 2.3.3). * - Heavy GPU effects (backdrop blur) gated to @media (min-width:1024px) so * low-end mobile keeps a solid, cheap fallback (Core Web Vitals safe). * - Only `transform`/`opacity`/`box-shadow` are animated (compositor-friendly, * 60fps); never width/height/top/left. * ============================================================================= */ /* --------------------------------------------------------------------------- * Shared timing token. Each experience can override --evps-x-ease/-dur. * Kept short (≤240ms) so interactions feel snappy, not sluggish. * ------------------------------------------------------------------------- */ html[data-evps-experience] { --evps-x-dur: 200ms; --evps-x-ease: cubic-bezier(.2,.7,.3,1); } /* ============================================================================= * AURORA PRO -- maximum "wow": animated gradient topbar, lifted glass-ish cards, * gradient primary buttons, accent glow. The flagship demo experience. * ========================================================================== */ /* Sticky gradient topbar with a moving accent sheen (motion-gated). */ html[data-evps-experience="aurora-pro"] .evps-topbar { position: sticky; top: 0; z-index: 30; background: linear-gradient(120deg, color-mix(in srgb, var(--evps-primary) 16%, var(--evps-surface)) 0%, var(--evps-surface) 42%, color-mix(in srgb, var(--evps-accent) 14%, var(--evps-surface)) 100%); border-bottom: 1px solid color-mix(in srgb, var(--evps-primary) 30%, var(--evps-border)); box-shadow: 0 6px 24px -16px color-mix(in srgb, var(--evps-primary) 60%, transparent); } /* Cards: hover-lift + deeper shadow; gradient hairline on accent cards. */ html[data-evps-experience="aurora-pro"] .evps-card { box-shadow: var(--evps-shadow-md); } html[data-evps-experience="aurora-pro"] .evps-card--accent { position: relative; overflow: hidden; } html[data-evps-experience="aurora-pro"] .evps-card--accent::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--evps-primary), var(--evps-accent)); } /* Gradient primary buttons with an accent ring on hover. */ html[data-evps-experience="aurora-pro"] .evps-btn--primary { background: linear-gradient(120deg, var(--evps-primary), color-mix(in srgb, var(--evps-accent) 70%, var(--evps-primary))); border-color: transparent; } @media (prefers-reduced-motion: no-preference) { html[data-evps-experience="aurora-pro"] .evps-card { transition: transform var(--evps-x-dur) var(--evps-x-ease), box-shadow var(--evps-x-dur) var(--evps-x-ease); will-change: auto; } html[data-evps-experience="aurora-pro"] .evps-card:hover { transform: translateY(-6px); box-shadow: var(--evps-shadow-xl), var(--evps-shadow-glow); } html[data-evps-experience="aurora-pro"] .evps-btn--primary { transition: transform var(--evps-x-dur) var(--evps-x-ease), box-shadow var(--evps-x-dur) var(--evps-x-ease); } html[data-evps-experience="aurora-pro"] .evps-btn--primary:hover { transform: translateY(-1px); box-shadow: var(--evps-shadow-glow); } /* JS-driven animated counters fade/rise in (see evps-1000x.js countUp). */ html[data-evps-experience="aurora-pro"] [data-evps-count].evps-counting { transition: opacity 240ms var(--evps-x-ease); } } /* ============================================================================= * GLASS -- frosted glassmorphism. Translucent blurred surfaces on desktop; * solid fallback on mobile + reduced-motion-agnostic (blur isn't motion, but * it is GPU-heavy, hence the viewport gate). * ========================================================================== */ /* Mobile / default: solid, cheap. */ html[data-evps-experience="glass"] .evps-card, html[data-evps-experience="glass"] .evps-topbar { background: var(--evps-surface); } @media (min-width: 1024px) { html[data-evps-experience="glass"] .evps-topbar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--evps-surface) 68%, transparent); -webkit-backdrop-filter: saturate(140%) blur(8px); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid color-mix(in srgb, var(--evps-border) 60%, transparent); } html[data-evps-experience="glass"] .evps-card { background: color-mix(in srgb, var(--evps-surface) 78%, transparent); -webkit-backdrop-filter: saturate(130%) blur(6px); backdrop-filter: saturate(130%) blur(6px); border: 1px solid color-mix(in srgb, var(--evps-border-strong, var(--evps-border)) 55%, transparent); box-shadow: var(--evps-shadow-md); } } @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) { html[data-evps-experience="glass"] .evps-card { transition: transform var(--evps-x-dur) var(--evps-x-ease), box-shadow var(--evps-x-dur) var(--evps-x-ease); } html[data-evps-experience="glass"] .evps-card:hover { transform: translateY(-4px); box-shadow: var(--evps-shadow-lg); } } /* ============================================================================= * MINIMAL -- flat, fast, content-first. Strips shadows + hover motion, uses * crisp 1px dividers. The lowest-overhead, highest-clarity experience. * ========================================================================== */ html[data-evps-experience="minimal"] .evps-card { box-shadow: none; border: 1px solid var(--evps-border); background: var(--evps-surface); } html[data-evps-experience="minimal"] .evps-card:hover { box-shadow: none; transform: none; } html[data-evps-experience="minimal"] .evps-topbar { box-shadow: none; border-bottom: 1px solid var(--evps-border); background: var(--evps-surface); } html[data-evps-experience="minimal"] .evps-btn--primary { box-shadow: none; background: var(--evps-primary); } /* No transitions at all -- minimal is intentionally motionless. */ html[data-evps-experience="minimal"] .evps-card, html[data-evps-experience="minimal"] .evps-btn { transition: none; } /* ============================================================================= * CORPORATE -- restrained, credible, conservative. Subtle top gradient on * cards, gentle shadow, NO lift. Suited to finance/legal verticals. * ========================================================================== */ html[data-evps-experience="corporate"] .evps-card { box-shadow: var(--evps-shadow-sm); border-top: 2px solid color-mix(in srgb, var(--evps-primary) 50%, var(--evps-border)); } html[data-evps-experience="corporate"] .evps-topbar { background: var(--evps-surface); border-bottom: 1px solid var(--evps-border-strong, var(--evps-border)); } @media (prefers-reduced-motion: no-preference) { html[data-evps-experience="corporate"] .evps-card { transition: box-shadow var(--evps-x-dur) var(--evps-x-ease); } html[data-evps-experience="corporate"] .evps-card:hover { box-shadow: var(--evps-shadow-md); } }