/* ─────────────────────────────────────────────────────────────────────────── The Lab Trading — shared micro-interactions Linked LAST in on every page. Subtle, premium, brand-calm. Base easings use :where() (0 specificity) so a page's own styles ALWAYS win — this can only *add* smoothness, never override/break existing animations. Fully disabled under prefers-reduced-motion. ─────────────────────────────────────────────────────────────────────────── */ /* Accessible focus ring everywhere (kept even with reduced motion) */ :focus-visible { outline: 2px solid rgba(52, 207, 73, 0.7); outline-offset: 2px; } /* Smooth in-page scrolling */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } @media (prefers-reduced-motion: no-preference) { /* ── Low-priority default easings (page styles override these) ── */ :where(a, .btn, button, [role="button"], .btn-lime, .btn-ghost, .btn-solid, .social-btn, .pill, .verified-pill, .theme-switch, summary) { transition: transform .16s cubic-bezier(.22, 1, .36, 1), background-color .22s ease, border-color .22s ease, box-shadow .22s ease, color .2s ease, opacity .2s ease; } :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .field) { transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } :where(.card) { transition: box-shadow .25s ease, border-color .2s ease; } :where(.review-card) { transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease; } /* ── Interactive states (normal specificity → these apply) ── */ /* Buttons: a soft press on click */ .btn:active:not(:disabled), button:active:not(:disabled), [role="button"]:active, .btn-lime:active, .btn-ghost:active, .btn-solid:active:not(:disabled), .social-btn:active { transform: scale(.97); } /* Arrow/icon inside a button nudges forward on hover — tiny premium touch */ .btn:hover svg, .btn-lime:hover svg, .btn-solid:hover svg { transform: translateX(1.5px); transition: transform .2s cubic-bezier(.22, 1, .36, 1); } /* Cards: shadow-only hover (no transform → safe with scroll reveals) */ .card:hover { box-shadow: 0 18px 46px -28px rgba(2, 12, 4, 0.45); } /* Marketing testimonial cards: a gentle lift (they aren't scroll-revealed) */ .review-card:hover { transform: translateY(-3px); box-shadow: 0 22px 54px -32px rgba(0, 0, 0, 0.5); } /* ── Scroll reveal ── reveal.js adds .reveal-on to ONLY after it confirms support, then tags content with [data-reveal]. So if JS is absent/blocked/errors, this selector never matches and nothing is ever hidden (content stays visible). A JS failsafe also force-adds .in after 2.5s. */ html.reveal-on [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .75s cubic-bezier(.22, .61, .36, 1), transform .75s cubic-bezier(.22, .61, .36, 1); will-change: opacity, transform; } html.reveal-on [data-reveal].in { opacity: 1; transform: none; } } a { text-underline-offset: 2px; }