/* * Finance Hamster — design-system FOUNDATION. * The shared token + motion layer every surface inherits. Loaded first (as a * dependency of every plugin stylesheet) so its custom properties + utilities * are available everywhere, independent of which surface renders. * * The core palette / type / space / radius / shadow scales live in the theme's * :root (style.css). This sheet ADDS what the design system was missing — motion * tokens, an accessible accent-for-text token — and the reduced-motion-safe * motion utilities (reveal-on-scroll + micro-interactions) that deliver the * "wow" without changing any layout. Nothing here is colour/size churn; it is * purely additive, so it cannot regress an existing surface. */ :root { /* Accent tuned for TEXT contrast. --accent-d (#b9770a) is ~3.4:1 on light surfaces — fine for icons/borders, fails WCAG AA (4.5:1) for small text. Use --accent-text for links / "View →" affordances / eyebrows. */ --accent-text: #8a5a06; /* ~4.7:1 on #fff, ~4.5:1 on --soft */ /* Motion tokens — one vocabulary of durations + easings for the whole site. */ --fh-dur-fast: 120ms; --fh-dur: 200ms; --fh-dur-slow: 420ms; --fh-ease: cubic-bezier( .22, .61, .36, 1 ); /* ease-out: quick start, soft settle */ --fh-ease-spring: cubic-bezier( .34, 1.32, .56, 1 ); /* gentle overshoot for playful accents */ } @media ( prefers-color-scheme: dark ) { :root { --accent-text: #fbbf24; /* bright accent reads on the dark surface */ } } /* ---------------------------------------------------------------------------- * Motion system. EVERYTHING that moves lives inside this single * prefers-reduced-motion: no-preference guard, so "reduce" (and no-JS) users * get the calm, final-state site for free. * ------------------------------------------------------------------------- */ @media ( prefers-reduced-motion: no-preference ) { /* Reveal-on-scroll. Primary path = pure CSS scroll-driven animation (Chromium); in browsers without animation-timeline the declaration collapses to an instant 0s animation → the element simply shows (no flash, no-JS-safe). */ .fh-reveal { animation: fh-reveal-up linear both; animation-timeline: view(); animation-range: entry 2% cover 22%; will-change: opacity, transform; } @keyframes fh-reveal-up { from { opacity: 0; transform: translateY( 26px ); } to { opacity: 1; transform: none; } } /* Fallback path for browsers without scroll-timeline (Safari/Firefox): motion.js adds .fh-js-reveal to , then toggles .is-in as elements enter view. Gated on that class so a no-JS load never hides content. */ .fh-js-reveal .fh-reveal { animation: none; opacity: 0; transform: translateY( 26px ); transition: opacity var( --fh-dur-slow ) var( --fh-ease ), transform var( --fh-dur-slow ) var( --fh-ease ); } .fh-js-reveal .fh-reveal.is-in { opacity: 1; transform: none; } /* Staggered children — a gentle cascade when a container reveals. */ .fh-js-reveal .fh-reveal.is-in > .fh-stagger > * { animation: fh-fade-in var( --fh-dur-slow ) var( --fh-ease ) both; } .fh-js-reveal .fh-reveal.is-in > .fh-stagger > *:nth-child(2) { animation-delay: 60ms; } .fh-js-reveal .fh-reveal.is-in > .fh-stagger > *:nth-child(3) { animation-delay: 120ms; } .fh-js-reveal .fh-reveal.is-in > .fh-stagger > *:nth-child(4) { animation-delay: 180ms; } .fh-js-reveal .fh-reveal.is-in > .fh-stagger > *:nth-child(n+5) { animation-delay: 240ms; } @keyframes fh-fade-in { from { opacity: 0; transform: translateY( 12px ); } to { opacity: 1; transform: none; } } /* Micro-interactions — opt-in utilities. Lift a card, press a control. */ .fh-lift { transition: transform var( --fh-dur ) var( --fh-ease ), box-shadow var( --fh-dur ) var( --fh-ease ); } .fh-lift:hover { transform: translateY( -3px ); box-shadow: var( --shadow-lg, 0 14px 40px rgba( 43, 33, 24, .12 ) ); } .fh-press { transition: transform var( --fh-dur-fast ) var( --fh-ease ); } .fh-press:active { transform: translateY( 1px ) scale( .985 ); } } /* Focus ring — visible, token-tinted, shown for keyboard users on any surface. Outside the reduced-motion guard: a focus ring is not "motion". */ .fh-focusable:focus-visible { outline: 2px solid var( --accent, #f59e0b ); outline-offset: 2px; border-radius: var( --radius-sm, 10px ); }