/* ════════════════════════════════════════════════════════════════ LangDesk — Shared Interaction & Motion Layer (H7 / DS-4) ---------------------------------------------------------------- One file, linked from EVERY surface (landing, checkout, client, reviewer, admin, debugger, token pages) so the whole product presses, focuses and moves the same way. Loaded LAST in each so it wins cascade ties over the per-page styles without needing !important. Philosophy (Emil Kowalski / animations.dev): - Pressable things must respond to press → scale(0.97) on :active. - Keyboard focus must be visible → :focus-visible ring (WCAG 2.4.7). - Motion needs strong custom easing, never the weak built-ins. - Respect prefers-reduced-motion: kill movement, keep meaning. Additive only — it layers on top of each page's existing design. ════════════════════════════════════════════════════════════════ */ :root { /* Strong custom curves. The CSS built-ins are too weak to feel intentional. ease-out for enter/press (front-loaded = responsive), ease-in-out for on-screen movement, drawer curve for sheets. */ --ld-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ld-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ld-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* Focus ring colour falls back to teal but inherits each page's own --accent, so the ring matches that surface's brand automatically. */ --ld-focus: var(--accent, #00d4aa); } /* ── Press feedback ─────────────────────────────────────────────── Every pressable element scales down a hair on press. Subtle (0.97), instant-feeling, makes the UI feel like it's truly listening. The transition lives on the elements below so the scale eases back. */ button:active:not(:disabled), .btn:active, .btn-primary:active, .btn-secondary:active, .login-btn:active, .primary:active, .secondary:active, .cta:active, .cta-button:active, .star:active, .star-btn:active, .cert-card:active, .faq-q:active, [role="button"]:active:not([aria-disabled="true"]) { transform: scale(0.97); } /* Harmonise the transition on pressables so :active eases instead of snapping, and replace the product's many `transition: all` shorthands with the exact properties that actually change. transform is included so the press scale animates. */ button, .btn, .btn-primary, .btn-secondary, .login-btn, .primary, .secondary, .cta, .cta-button, .star, .star-btn, .nav-item, .tab, .subtab, .chip, .cert-card { transition-property: background-color, border-color, color, box-shadow, opacity, transform; transition-duration: 150ms; transition-timing-function: var(--ld-ease-out); } /* ── Visible keyboard focus ─────────────────────────────────────── Panels strip outlines and signal focus with a 1px border hue shift — invisible for keyboard users. :focus-visible only fires for keyboard navigation, never mouse clicks, so it adds the ring without touching the click experience. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible, [contenteditable]:focus-visible { outline: 2px solid var(--ld-focus); outline-offset: 2px; border-radius: 4px; } /* Belt-and-suspenders: never let a removed default outline win for keyboard users on inputs that set outline:none inline. */ input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--ld-focus); outline-offset: 1px; } /* ── Hover only on real pointers ────────────────────────────────── Touch taps fire :hover and leave a stuck highlight. Anything that only wants hover affordance should sit behind this — provided as a utility for per-page hovers that opt in. */ @media (hover: none) { /* Neutralise sticky hover transforms on touch for the common pressables (the press scale above already gives feedback). */ .cert-card:hover, .btn:hover, .star:hover, .star-btn:hover { transform: none; } } /* ── Modals: gentle, origin-centred entry ───────────────────────── Modals are "occasional" frequency → a standard 200ms ease-out entry is warranted. They keep transform-origin: center (they're not anchored to a trigger). Nothing appears from scale(0) — start at 0.96 + opacity so it grows from a real shape. Overlay fades. */ .modal, .modal-card, .modal-content { transition: transform 200ms var(--ld-ease-out), opacity 200ms ease-out; } .modal-overlay, .modal-backdrop { transition: opacity 150ms ease-out; } @starting-style { .modal-overlay.open .modal, .modal-overlay.is-open .modal, .modal-overlay.active .modal, .modal-overlay[style*="flex"] .modal, .modal-card, .modal-content { opacity: 0; transform: scale(0.96); } } /* ── Reduced motion ─────────────────────────────────────────────── Users who asked for less motion get instant state changes and no looping animation (the infinite pulses / shimmer / spinners are the vestibular problem). Opacity/colour still resolve, just immediately; meaning is never removed, only movement. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html { scroll-behavior: auto !important; } }