/* ========================================================================== Liimra Motion 1.0 Zurückhaltende Interaktions- und Scroll-Animationen für liimra.de Block-Theme / Gutenberg. Keine Abhängigkeiten. Prinzip: animiert werden ausschliesslich transform, opacity und clip-path. Kein Layout-Thrashing, kein CLS, keine Library. ========================================================================== */ /* -------------------------------------------------------------------------- 0. Tokens Einmal hier anpassen, wirkt überall. --lm-accent bitte auf den Farb-Slug aus theme.json setzen (siehe README, Schritt 4). -------------------------------------------------------------------------- */ :root { --lm-dur-fast: 160ms; /* Hover, Focus, Active */ --lm-dur-base: 420ms; /* Scroll-Reveal */ --lm-dur-slow: 700ms; /* Bildmasken */ --lm-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* dezelerierend, kein Overshoot */ --lm-ease-inout: cubic-bezier(0.4, 0, 0.2, 1); --lm-shift: 18px; /* Reveal-Weg. Bewusst kurz. */ --lm-lift: -3px; /* Karten-Hover. Bewusst subtil. */ --lm-stagger: 70ms; /* Versatz zwischen Geschwister-Elementen */ --lm-shadow: 0 12px 28px -14px rgb(15 23 32 / 0.28), 0 3px 8px -4px rgb(15 23 32 / 0.12); /* Fallback-Kette: erster existierender Preset-Slug gewinnt. */ --lm-accent: var(--wp--preset--color--primary, var(--wp--preset--color--accent, var(--wp--preset--color--contrast, currentColor))); --lm-header-offset: 96px; /* Höhe des Sticky-Headers, für Anker-Sprünge */ } /* -------------------------------------------------------------------------- 1. Scroll-Reveal – Grundzustand Greift nur bei .lm-js auf . Ohne JS bleibt alles sichtbar: kein weisser Screen bei JS-Fehler, keine Nachteile für Crawler. -------------------------------------------------------------------------- */ .lm-js .lm-reveal { opacity: 0; transform: translate3d(0, var(--lm-shift), 0); transition: opacity var(--lm-dur-base) var(--lm-ease), transform var(--lm-dur-base) var(--lm-ease); } .lm-js .lm-reveal.is-inview { opacity: 1; transform: none; } /* Varianten */ .lm-js .lm-reveal--left { transform: translate3d(calc(var(--lm-shift) * -1), 0, 0); } .lm-js .lm-reveal--right { transform: translate3d(var(--lm-shift), 0, 0); } .lm-js .lm-reveal--fade { transform: none; } /* Bildmaske: schiebt das Motiv frei, statt es einzublenden. Wirkt technischer als ein Fade und passt zum Bau-Kontext. */ .lm-js .lm-reveal--mask { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path var(--lm-dur-slow) var(--lm-ease); } .lm-js .lm-reveal--mask.is-inview { clip-path: inset(0 0 0 0); } .lm-js .lm-reveal--mask img { transform: scale(1.05); transition: transform calc(var(--lm-dur-slow) + 200ms) var(--lm-ease); } .lm-js .lm-reveal--mask.is-inview img { transform: none; } /* -------------------------------------------------------------------------- 2. Stagger – ein Container, Kinder laufen versetzt ein Klasse auf den Columns-/Group-/Gallery-Block. Kinder brauchen nichts. -------------------------------------------------------------------------- */ .lm-js .lm-stagger > * { opacity: 0; transform: translate3d(0, var(--lm-shift), 0); transition: opacity var(--lm-dur-base) var(--lm-ease), transform var(--lm-dur-base) var(--lm-ease); } .lm-js .lm-stagger.is-inview > * { opacity: 1; transform: none; } .lm-js .lm-stagger.is-inview > *:nth-child(1) { transition-delay: 0ms; } .lm-js .lm-stagger.is-inview > *:nth-child(2) { transition-delay: calc(var(--lm-stagger) * 1); } .lm-js .lm-stagger.is-inview > *:nth-child(3) { transition-delay: calc(var(--lm-stagger) * 2); } .lm-js .lm-stagger.is-inview > *:nth-child(4) { transition-delay: calc(var(--lm-stagger) * 3); } .lm-js .lm-stagger.is-inview > *:nth-child(5) { transition-delay: calc(var(--lm-stagger) * 4); } .lm-js .lm-stagger.is-inview > *:nth-child(6) { transition-delay: calc(var(--lm-stagger) * 5); } .lm-js .lm-stagger.is-inview > *:nth-child(n + 7) { transition-delay: calc(var(--lm-stagger) * 6); } /* Für kurze Reihen wie die Trust-Badges: engerer Takt. */ .lm-stagger--tight { --lm-stagger: 45ms; } /* -------------------------------------------------------------------------- 3. Karten Der Schatten liegt auf einem ::after-Layer und wird per opacity animiert – deutlich günstiger als eine box-shadow-Transition. -------------------------------------------------------------------------- */ .lm-card { position: relative; isolation: isolate; transition: transform var(--lm-dur-fast) var(--lm-ease-inout); } .lm-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--lm-shadow); opacity: 0; transition: opacity var(--lm-dur-fast) var(--lm-ease-inout); pointer-events: none; } @media (hover: hover) and (pointer: fine) { .lm-card:hover { transform: translate3d(0, var(--lm-lift), 0); } .lm-card:hover::after { opacity: 1; } } /* Tastatur-Navigation bekommt dasselbe Feedback wie die Maus. */ .lm-card:focus-within { transform: translate3d(0, var(--lm-lift), 0); } .lm-card:focus-within::after { opacity: 1; } /* -------------------------------------------------------------------------- 4. Buttons – global, ohne Zusatzklasse Nur Bewegung und Focus. Farben bleiben bei theme.json. -------------------------------------------------------------------------- */ .wp-block-button__link, .wpforms-submit { transition: background-color var(--lm-dur-fast) var(--lm-ease-inout), border-color var(--lm-dur-fast) var(--lm-ease-inout), color var(--lm-dur-fast) var(--lm-ease-inout), transform var(--lm-dur-fast) var(--lm-ease-inout), box-shadow var(--lm-dur-fast) var(--lm-ease-inout); } @media (hover: hover) and (pointer: fine) { .wp-block-button__link:hover, .wpforms-submit:hover { transform: translate3d(0, -1px, 0); box-shadow: 0 6px 16px -8px rgb(15 23 32 / 0.35); } } /* Taktiles Feedback beim Klick: kurz und sofort. */ .wp-block-button__link:active, .wpforms-submit:active { transform: translate3d(0, 0, 0) scale(0.985); box-shadow: none; transition-duration: 60ms; } .wp-block-button__link:focus-visible, .wpforms-submit:focus-visible, .wp-block-navigation-item__content:focus-visible { outline: 2px solid var(--lm-accent); outline-offset: 3px; border-radius: inherit; } /* -------------------------------------------------------------------------- 5. Textlink mit Pfeil ("Zum Bereich") Das "›" wird per CSS gesetzt, damit es sich bewegen kann. Im Editor also aus dem Linktext entfernen. -------------------------------------------------------------------------- */ .lm-link-arrow { display: inline-flex; align-items: center; gap: 0.4em; } .lm-link-arrow::after { content: "\203A"; /* › */ display: inline-block; transform: translate3d(0, 0, 0); transition: transform var(--lm-dur-fast) var(--lm-ease-inout); } @media (hover: hover) and (pointer: fine) { .lm-link-arrow:hover::after { transform: translate3d(4px, 0, 0); } } .lm-link-arrow:focus-visible::after { transform: translate3d(4px, 0, 0); } /* -------------------------------------------------------------------------- 6. Bilder – ruhiger Zoom im festen Rahmen (Galerie, Karten-Header) -------------------------------------------------------------------------- */ .lm-zoom .wp-block-image, .lm-zoom.wp-block-image, .lm-zoom figure { overflow: clip; border-radius: inherit; } .lm-zoom img { transition: transform 500ms var(--lm-ease); backface-visibility: hidden; } @media (hover: hover) and (pointer: fine) { .lm-zoom .wp-block-image:hover img, .lm-zoom.wp-block-image:hover img, .lm-card:hover .lm-zoom img { transform: scale(1.04); } } /* Referenz-Logos: gedämpft, bei Hover auf volle Präsenz. */ .lm-logos > * { opacity: 0.62; transition: opacity var(--lm-dur-fast) var(--lm-ease-inout); } .lm-logos > *:hover { opacity: 1; } .lm-js .lm-logos.is-inview > * { opacity: 0.62; } .lm-js .lm-logos.is-inview > *:hover { opacity: 1; } /* -------------------------------------------------------------------------- 7. FAQ – Core-Details-Block, ohne JS ::details-content + interpolate-size animiert die Höhe nativ. Browser ohne Support öffnen schlagartig – gleiche Funktion, kein Fehler. -------------------------------------------------------------------------- */ .lm-faq details { interpolate-size: allow-keywords; } .lm-faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; transition: color var(--lm-dur-fast) var(--lm-ease-inout); } .lm-faq summary::-webkit-details-marker { display: none; } .lm-faq summary::after { content: ""; flex: none; width: 0.62em; height: 0.62em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-0.1em); transform-origin: center; transition: transform var(--lm-dur-base) var(--lm-ease); } .lm-faq details[open] > summary::after { transform: rotate(225deg) translateY(-0.1em); } .lm-faq summary:focus-visible { outline: 2px solid var(--lm-accent); outline-offset: 4px; } @supports selector(::details-content) { .lm-faq details::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size var(--lm-dur-base) var(--lm-ease), opacity var(--lm-dur-base) var(--lm-ease), content-visibility var(--lm-dur-base) allow-discrete; } .lm-faq details[open]::details-content { block-size: auto; opacity: 1; } } /* -------------------------------------------------------------------------- 8. Header – kompakter Zustand nach dem ersten Scroll Klasse wird per IntersectionObserver gesetzt, kein scroll-Listener. -------------------------------------------------------------------------- */ .lm-header { transition: padding-block var(--lm-dur-base) var(--lm-ease), box-shadow var(--lm-dur-base) var(--lm-ease), backdrop-filter var(--lm-dur-base) var(--lm-ease); } .lm-header--compact { box-shadow: 0 1px 0 rgb(15 23 32 / 0.08), 0 8px 24px -18px rgb(15 23 32 / 0.35); } .lm-header--compact .wp-block-site-logo img, .lm-header--compact .custom-logo { transform: scale(0.9); transition: transform var(--lm-dur-base) var(--lm-ease); transform-origin: left center; } .lm-header .wp-block-site-logo img, .lm-header .custom-logo { transition: transform var(--lm-dur-base) var(--lm-ease); } /* -------------------------------------------------------------------------- 9. Hero – bewusst minimal Nur Eyebrow und Buttons blenden ein. H1 und Hero-Bild bleiben unangetastet, weil eines von beiden das LCP-Element ist. -------------------------------------------------------------------------- */ .lm-js .lm-hero-in { opacity: 0; animation: lm-hero-in 520ms var(--lm-ease) 120ms forwards; } @keyframes lm-hero-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 10. Formular – Fokus-Zustände (WPForms) -------------------------------------------------------------------------- */ .wpforms-field input:not([type="checkbox"]):not([type="radio"]), .wpforms-field select, .wpforms-field textarea { transition: border-color var(--lm-dur-fast) var(--lm-ease-inout), box-shadow var(--lm-dur-fast) var(--lm-ease-inout); } .wpforms-field input:focus, .wpforms-field select:focus, .wpforms-field textarea:focus { border-color: var(--lm-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lm-accent) 22%, transparent); outline: none; } /* -------------------------------------------------------------------------- 11. Anker-Navigation Die Seite arbeitet mit #anfrage, #leistungen, #faq usw. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } html { scroll-padding-top: var(--lm-header-offset); } :target { scroll-margin-top: var(--lm-header-offset); } /* -------------------------------------------------------------------------- 12. Reduced Motion – nicht verhandelbar -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .lm-js .lm-reveal, .lm-js .lm-stagger > *, .lm-js .lm-hero-in { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; } .lm-js .lm-logos.is-inview > * { opacity: 0.62 !important; } }