/* ============================================================================= Hinke. Trendstore — beweging. Eén laag voor de hele site, zodat alles in hetzelfde tempo en met dezelfde curve beweegt (tokens staan in main.css: --hinke-ease, --hinke-dur-*). UITGANGSPUNT: de site had al ±50 hover-toestanden die allemaal hárd omsprongen. Het grootste deel van dit bestand geeft die bestaande toestanden dus alleen een transition — de kleuren en maten blijven van de pagina-CSS. Daar bovenop komt een handvol eigen beweging: de tweede foto op een productkaart, beelden die inzoomen, iconen die even opveren, knoppen die indrukken en blokken die bij het scrollen in beeld komen. OPBOUW 1. Basis — links, knoppen, velden 2. Beelden — categorieën, lookbook, media-blokken + de productkaart 3. Iconen — header, socials, hartje, prullenbak, pijlen 4. Panelen — menu, zoekpaneel, FAQ, tooltips 5. In beeld komen bij scrollen (.hinke-reveal, gezet door hinke.js) 6. Wie beweging uit heeft staan 7. De meeschuivende header (.is-stuck, gezet door hinke.js) REGEL: nooit `transition: all` — dat animeert ook layout-eigenschappen en maakt het schokkerig. Alleen opacity, transform, color, background, border en box-shadow, want die draaien op de compositor of zijn goedkoop. BELANGRIJK: alles wat iets verbérgt (§5) hangt achter `html.hinke-motion`. Die class zet hinke.js pas als beweging gewenst én mogelijk is, zodat de inhoud zonder JS gewoon zichtbaar blijft. ========================================================================== */ /* ----------------------------------------------------------------------------- 1. Basis — links, knoppen, velden -------------------------------------------------------------------------- */ /* Tekstlinks: menu, footer, kruimelpad, inhoudsopgave, contact, team, socials. */ .hinke-nav__menu > li > a, .hinke-nav__menu .sub-menu a, .hinke-footer__links a, .hinke-footer__shop-link, .hinke-footer__credit, .hinke-crumb a, .hinke-toc__list a, .hinke-contact__rij a, .hinke-team__links a, .hinke-lookbook__social-link, .hinke-cart__name a, .woocommerce-checkout .hinke-co-coupon__toggle, .woocommerce-checkout .hinke-co-terms__link, .woocommerce-account .hinke-page__body .hinke-accnav__link { transition: color var(--hinke-dur-snel) var(--hinke-ease), opacity var(--hinke-dur-snel) var(--hinke-ease); } /* Knoppen: alle CTA's van de site, inclusief die van WooCommerce. */ .hinke-blkbtn, .hinke-hero__cta, .hinke-about__btn, .hinke-404__cta, .hinke-cats__btn, .hinke-kaart__meer, .hinke-newsletter__btn, .hinke-promo__btn, .hinke-contact__verzend, .hinke-ty__cta, .woocommerce .hinke-summary .single_add_to_cart_button, /* "Verder winkelen" stond hierboven bij de TEKSTLINKS, en die groep animeert alleen color en opacity. Het is een gevulde knop van 202×53 die bij hover van vulling verandert, dus sprong die wissel hard om. Hier hoort hij. */ .woocommerce-cart a.hinke-cart__continue, .woocommerce .wc-proceed-to-checkout a.checkout-button.hinke-cart__checkout, .woocommerce-checkout .woocommerce button.button.alt.hinke-co-submit, .woocommerce-checkout .woocommerce button.button.hinke-co-coupon__apply, .woocommerce-checkout .sellabees-cart-email__btn, /* De gouden "Heb je al een account?"-balk stond hierboven bij de TEKSTLINKS, want hij markeerde zich met een onderstreping. Die is eruit; hij reageert nu als knop (donkerder goud + indrukken), dezelfde beweging als de afrekenknop in de winkelwagen. Zie pages/checkout.css. */ .woocommerce-checkout .hinke-co-login__bar, .woocommerce-account .hinke-page__body .hinke-btn, .woocommerce-account .hinke-page__body .hinke-address__edit, /* De knop in een lege staat ("Blader door producten", "Bekijk de collectie") — zelfde gouden CTA, dus dezelfde overgang. Zie pages/account.css §18. */ .woocommerce-account .hinke-page__body .sellabees-empty__btn, /* De knop in een accountmelding, o.a. "Opnieuw verzenden" bij een tijdelijk wachtwoord (WooCommerce 11). Zie pages/account.css §14b. */ .woocommerce-account .hinke-page__body .woocommerce-info .button.wc-forward, .woocommerce-account .hinke-page__body .woocommerce-message .button.wc-forward, /* De knop in het keuzevenster van het verlanglijstje. Die stond hier niet in, dus sloeg het goud bij hover hard om naar het donkere goud in plaats van over te lopen. Opmaak van dat venster staat in layout.css §11. */ /* De drie knoppen onder het verlanglijstje (updaten/legen/alles toevoegen). Die hadden van WooCommerce een `transition: all` zonder duur meegekregen, dus sloeg de hover hard om. Nu dezelfde overgang als de knoppen in de winkelwagen en op de afrekenpagina. Zie pages/account.css. */ .woocommerce-account .hinke-page__body .sellabees-wishlist__btn, .sellabees-wish-modal .sellabees-wish-modal__add { transition: background-color var(--hinke-dur-snel) var(--hinke-ease), border-color var(--hinke-dur-snel) var(--hinke-ease), color var(--hinke-dur-snel) var(--hinke-ease), box-shadow var(--hinke-dur-snel) var(--hinke-ease), transform var(--hinke-dur-snel) var(--hinke-ease); } /* Indrukken: 1px meegeven. Genoeg om te voelen, te klein om op te vallen. */ .hinke-blkbtn:active, .hinke-hero__cta:active, .hinke-about__btn:active, .hinke-404__cta:active, .hinke-newsletter__btn:active, .hinke-promo__btn:active, .hinke-contact__verzend:active, .hinke-ty__cta:active, .woocommerce .hinke-summary .single_add_to_cart_button:active, .woocommerce-cart a.hinke-cart__continue:active, .woocommerce .wc-proceed-to-checkout a.checkout-button.hinke-cart__checkout:active, .woocommerce-checkout .woocommerce button.button.alt.hinke-co-submit:active, .woocommerce-checkout .woocommerce button.button.hinke-co-coupon__apply:active, .woocommerce-checkout .sellabees-cart-email__btn:active, /* De balk zelf, niet de link erin: het klikvlak beslaat de hele balk, dus de hele balk zakt mee. `:active` geldt ook voor de ouder van wat je indrukt. */ .woocommerce-account .hinke-page__body .sellabees-empty__btn:active, .woocommerce-checkout .hinke-co-login__bar:active, .woocommerce-account .hinke-page__body .sellabees-wishlist__btn:active, .sellabees-wish-modal .sellabees-wish-modal__add:active { transform: translateY(1px); } /* Formuliervelden: het kader loopt zacht mee bij focus. */ .hinke-field, .hinke-promo__field, .hinke-newsletter__field, .hinke-contact__form input, .hinke-contact__form textarea, .woocommerce-checkout .hinke-co-grid .form-row input.input-text, .woocommerce-checkout .hinke-co-grid .form-row textarea, .woocommerce-checkout .hinke-co-coupon__input, .woocommerce-checkout .sellabees-cart-email__input, /* De velden van de inlog-popup heten in de core `.sellabees-login__field`; hier stond `.hinke-auth__field` en die klasse bestaat nergens. */ .sellabees-login__field, .sellabees-newsletter input { transition: border-color var(--hinke-dur-snel) var(--hinke-ease), box-shadow var(--hinke-dur-snel) var(--hinke-ease), background-color var(--hinke-dur-snel) var(--hinke-ease); } /* Maat- en kleurswatches op de productpagina + de maten op de productkaart. */ .hinke-swatch, .hinke-card .sellabees-size, .sellabees-wish-modal__opt { transition: border-color var(--hinke-dur-snel) var(--hinke-ease), background-color var(--hinke-dur-snel) var(--hinke-ease), color var(--hinke-dur-snel) var(--hinke-ease), box-shadow var(--hinke-dur-snel) var(--hinke-ease), transform var(--hinke-dur-snel) var(--hinke-ease); } /* ACHTER (hover: hover) — zie de toelichting bij §2. */ @media (hover: hover) { .hinke-swatch:not(.is-unavailable):hover, .sellabees-wish-modal__opt:hover { transform: scale(1.08); } } /* ----------------------------------------------------------------------------- 2. Beelden — categorieën, lookbook, media, en de productkaart Twee soorten beweging, per soort beeld: - PRODUCTKAARTEN wisselen van foto. Geen zoom (zo gevraagd): bij hover komt de tweede foto uit de galerij tevoorschijn. Zie onderaan deze sectie. - ALLE ANDERE BEELDEN zoomen licht in. Die hebben geen tweede foto, en een kaart die bij hover niets doet leest als niet-klikbaar. Alle beeldhouders hebben al `overflow: hidden`, dus de zoom blijft binnen zijn kader. 1.05 is met opzet klein: bij fotografie van kleding is meer meteen goedkoop. -------------------------------------------------------------------------- */ /* LET OP — deze lijst stond deels op klassen die niet bestaan: `.hinke-kaart__media` en `.hinke-tm__media` komen in geen enkele template voor (nagemeten), dus de zoom op het kaartenblok deed nergens iets. De echte klasse is `.hinke-kaart__beeld`. Het beeld van tekst_media en het mediablok zitten NIET in een link en hebben dus geen hover-aangrijpingspunt; die staan hier daarom niet meer in. En de kaartfoto van Openingstijden (`.hinke-tm__kaartfoto`) mag juist NIET zoomen: dan schuift de locatiemarker van de winkel af. */ .hinke-cats__card img, .hinke-lookbook__item img, .hinke-linkrij__card img { transition: transform var(--hinke-dur-traag) var(--hinke-ease); } /* * KAARTENBLOK ("Bekijk meer over ons"): niet het beeld beweegt, maar de héle kaart. * * Zo gevraagd (14-08). Reden om het ook zo te willen: die kaart ís de knop — beeld, * titel, tekst en "Lees meer..." horen bij elkaar en linken naar dezelfde pagina. * Alleen de foto laten inzoomen suggereert dat de foto het klikbare deel is. * * Een lift van 6px met een zachte schaduw, geen schaal: tekst die geschaald wordt * gaat rafelen (subpixels), en dat is precies waar deze kaart vol mee staat. */ .hinke-kaart { transition: transform var(--hinke-dur-mid) var(--hinke-ease), box-shadow var(--hinke-dur-mid) var(--hinke-ease); } .hinke-kaart:has(.hinke-kaart__link:focus-visible) { transform: translateY(-6px); box-shadow: 0 10px 24px rgba(0, 0, 0, .10); } /* Toetsenbordfocus staat BUITEN de hover-hek: die moet op elk apparaat werken, ook op een tablet met een toetsenbord eraan. */ .hinke-cats__card:focus-within img, .hinke-lookbook__item:focus-within img { transform: scale(1.05); } /* * De hover-zoom hangt achter `(hover: hover)`. * * WAAROM: op een touchscreen bestaat hover niet, maar de meeste mobiele browsers * laten `:hover` ná een tap wél staan — tot je iets anders aanraakt. Zonder dit * hek bleef een aangetikte kaart dus ingezoomd staan, en dat leest als een * vastgelopen pagina. Met het hek gebeurt er op touch niets en houdt de muis zijn * effect. Dezelfde reden geldt voor §1 (swatches) en §3 (iconen). */ @media (hover: hover) { .hinke-cats__card:hover img, .hinke-lookbook__item:hover img, .hinke-linkrij__card:hover img { transform: scale(1.05); } /* De hele kaart komt omhoog; het beeld erin blijft stilstaan. */ .hinke-kaart:hover { transform: translateY(-6px); box-shadow: 0 10px 24px rgba(0, 0, 0, .10); } } /* De titel van een productkaart kleurt mee naar het goud van de CTA's. */ .hinke-card__name, .woocommerce .sellabees-shop__main ul.products li.product .woocommerce-loop-product__title { transition: color var(--hinke-dur-snel) var(--hinke-ease); } .hinke-card__link:focus-visible .hinke-card__name { color: var(--hinke-gold); } @media (hover: hover) { .hinke-card__link:hover .hinke-card__name, .woocommerce .sellabees-shop__main ul.products li.product:hover .woocommerce-loop-product__title { color: var(--hinke-gold); } } /* * TWEEDE PRODUCTFOTO — de hover van de productkaart. * * In plaats van inzoomen komt de volgende foto uit de galerij tevoorschijn. Bij * kleding zegt dat meer dan een uitsnede van dezelfde foto: je ziet de achterkant, * of het item gedragen. De zet de core erin (inc/productcard.php); alleen * producten mét galerijfoto krijgen er een, de rest heeft simpelweg geen tweede * laag en gedraagt zich als voorheen. * * Twee kaartsoorten, dezelfde afspraak: * winkelraster ul.products > li.product > a > img (+ de tweede img erachter) * eigen kaarten .hinke-card__media > img (+ de tweede img erachter) * * De tweede foto ligt er met `position: absolute` bovenop en niet ernaast, zodat * de kaart niet van hoogte verandert. Hij erft de maatvoering (aspect-ratio + * object-fit) van de bestaande beeldregels in pages/shop.css en layout.css, dus * de twee lagen vallen exact samen. * * `overflow: hidden` op de link blijft staan: de zoom is weg, maar het houdt de * tweede foto binnen het kader. De sale-badge en het verlanglijst-hartje hangen * aan li.product en vallen buiten die clip — die blijven dus zichtbaar. */ .woocommerce .sellabees-shop__main ul.products li.product a.woocommerce-loop-product__link { display: block; position: relative; overflow: hidden; } .hinke-card__media { position: relative; } /* LET OP — de kaart-link (`a.woocommerce-loop-product__link`) staat hier met opzet NIET in. Met die schakel erbij is deze regel specifieker dan de hover-regel eronder, en dan wint `opacity: 0` van `opacity: 1`: de tweede foto bleef op de categoriepagina onzichtbaar terwijl hij op de homepage wél wisselde (gemeten met een echte muisbeweging via het debug-protocol, niet met een nagemaakte class). */ .woocommerce .sellabees-shop__main ul.products li.product .sellabees-loop-thumb-2, .hinke-card__media .sellabees-loop-thumb-2 { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity var(--hinke-dur-mid) var(--hinke-ease); } /* Toetsenbord: ook zonder muis wisselt de foto, op elk apparaat. */ .woocommerce .sellabees-shop__main ul.products li.product:focus-within .sellabees-loop-thumb-2, .hinke-card__link:focus-visible .sellabees-loop-thumb-2 { opacity: 1; } /* * Achter `(hover: hover)`, om dezelfde reden als hierboven: na een tap blijft * `:hover` op een telefoon hangen, en dan zou de tweede foto tot de volgende tap * over de eerste blijven liggen. */ @media (hover: hover) { .woocommerce .sellabees-shop__main ul.products li.product:hover .sellabees-loop-thumb-2, .hinke-card__link:hover .sellabees-loop-thumb-2 { opacity: 1; } } /* * En op een apparaat zónder muis hoeft die foto er helemaal niet te zijn. * * Dat is geen cosmetiek maar gewicht: een categoriepagina toont tot 24 kaarten, dus * dat zijn tot 24 extra foto's die een telefoon zou binnenhalen voor een effect dat * daar niet bestaat. `display: none` haalt de foto uit de layout, en een * `loading="lazy"`-afbeelding zonder layout wordt niet opgehaald. * * Nagemeten met touch-emulatie op /new-in/: van de foto's die daar alléén als * hover-foto voorkomen (2 van de 6 — de shop hergebruikt beelden, de rest staat * toch al als hoofdfoto op de pagina) haalt een aanraakscherm er 0 op, en een * muis-sessie 2. Precies de bedoeling. * * De focus-variant hierboven werkt hier nog steeds niet, en dat is juist: op een * telefoon is er geen toetsenbordfocus zonder aanraking, en met `display: none` * blijft de foto ook buiten de tabvolgorde en buiten schermlezers. * * De lange selector is nodig, niet netjes bedoeld: pages/shop.css zet * `display: block` op `… li.product a img` (0,6,3) en een korte `display: none` * (0,1,0) verliest daarvan — gemeten, de foto bleef laden op een telefoon. Met de * `img` en de class erbij komt deze op (0,6,4) en wint hij wél. */ @media (hover: none) { .woocommerce .sellabees-shop .sellabees-shop__main ul.products li.product a img.sellabees-loop-thumb-2, .hinke-card__media img.sellabees-loop-thumb-2 { display: none; } } /* ----------------------------------------------------------------------------- 3. Iconen — header, socials, hartje, prullenbak, carrouselpijlen -------------------------------------------------------------------------- */ .hinke-header__action, .hinke-footer__social a, .hinke-carousel__arrow, .hinke-cart__remove a.remove, .sellabees-wish-btn, .hinke-tm__stip { transition: transform var(--hinke-dur-snel) var(--hinke-ease), opacity var(--hinke-dur-snel) var(--hinke-ease), color var(--hinke-dur-snel) var(--hinke-ease), background-color var(--hinke-dur-snel) var(--hinke-ease); } /* * Ook hier het hover-hek (zie §2). Bij deze groep was het effect op touch het * hinderlijkst: een aangetikt header-icoon of verlanglijst-hartje bleef op 1,12 * staan en de prullenbak bleef een kwartslag gedraaid — precies bij de knoppen * die je op een telefoon het vaakst aanraakt. */ /* * NIET op de productpagina-variant. Overal elders is het verlanglijst-hartje een * los icoon van 27×23 op een productkaart, en dan is opschalen precies goed. Op de * productpagina is het een knop mét tekstlabel ("Toevoegen aan verlanglijstje", * .sellabees-wish-btn--single, 208×21): daar rekt scale(1.12) het hele label op en * springt de tekst 12% groter — geen subtiele terugkoppeling meer maar een * verschuiving die je uit je ooghoek ziet. Vandaar dat die variant hier wegvalt. * * De eenmalige `hinke-pop` op het icoontje (verderop) blijft wél staan: die loopt * op .is-active, dus pas nádat het product op de lijst staat, en raakt alleen de * SVG en niet het label. */ @media (hover: hover) { .hinke-header__action:hover, .hinke-footer__social a:hover, .hinke-carousel__arrow:hover, .sellabees-wish-btn:not(.sellabees-wish-btn--single):hover { transform: scale(1.12); } /* De schaal hoort op het BOLLETJE, niet op de marker. De marker is het aanraakvlak van 44×44 met de tooltip erin: die opschalen liet het gouden labeltje meegroeien, en het overschreef bovendien de `translate` waarmee het bolletje op de winkel werd gecentreerd — het bolletje sprong dan 5px van zijn plek en wees de winkel niet meer aan. Het blok centreert nu met een negatieve marge, dus dit kan geen kwaad meer, maar de schaal hoort inhoudelijk toch op de punt zelf. */ .hinke-tm__marker:hover .hinke-tm__stip { transform: scale(1.12); } .hinke-cart__remove a.remove:hover { transform: rotate(90deg); } } /* Het verlanglijst-hartje veert één keer op zodra het aan gaat. De core zet .is-active op de knop na de AJAX-toggle, dus dit loopt gelijk met de server. */ .sellabees-wish-btn.is-active .sellabees-wish-btn__icon, .sellabees-wish-btn.is-on .sellabees-wish-btn__icon { animation: hinke-pop var(--hinke-dur-mid) var(--hinke-ease); } @keyframes hinke-pop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } } /* De winkelwagenteller in de header telt zichtbaar op. De teller komt uit de core-helper `sellabees_cart_count_html()` en heet daar `.sellabees-cart-count`; hier stond `.hinke-header__count` en die klasse bestaat nergens. */ .sellabees-cart-count { transition: transform var(--hinke-dur-mid) var(--hinke-ease), background-color var(--hinke-dur-snel) var(--hinke-ease); } /* ----------------------------------------------------------------------------- 4. Panelen — zoekpaneel, mobiel menu, submenu, FAQ, tooltip Deze elementen worden al door JS/CSS in- en uitgeklapt; hier komt alleen de overgang erbij. `visibility` schakelt op 0s aan het einde, zodat een gesloten paneel niet klikbaar blijft tijdens het uitfaden. -------------------------------------------------------------------------- */ /* * Submenu en tooltip klappen open met opacity + visibility (zie layout.css en * blocks/tekst_media.css), en dát is te animeren. `visibility` schakelt op 0s * aan het einde, zodat een gesloten paneel niet klikbaar blijft tijdens het * uitfaden. */ .hinke-nav__menu > li > .sub-menu, .hinke-tm__tip { transition: opacity var(--hinke-dur-mid) var(--hinke-ease), transform var(--hinke-dur-mid) var(--hinke-ease), visibility 0s linear var(--hinke-dur-mid); } .hinke-nav__menu > li:hover > .sub-menu, .hinke-nav__menu > li:focus-within > .sub-menu, .hinke-tm__marker:hover .hinke-tm__tip, .hinke-tm__marker:focus-visible .hinke-tm__tip { transition: opacity var(--hinke-dur-mid) var(--hinke-ease), transform var(--hinke-dur-mid) var(--hinke-ease), visibility 0s; } /* * Zoekpaneel — uitklappen onder de header. * * WAAROM DIT ANDERS MOET: dit paneel ging open door het `hidden`-attribuut weg te * halen, en `hidden` is `display: none`. Aan display valt niets te animeren, dus * klapte het paneel er hard in — hier stond eerder een regel op `.hinke-search` * met een class `.is-open` die nergens werd gezet, en die deed dus niets. * * Nu zet hinke.js (§2) `.is-open` op het paneel zélf, één frame nadat `hidden` * eraf gaat, en haalt hij `hidden` er bij het sluiten pas ná de overgang weer op. * Het paneel schuift daarmee open in hoogte (het duwt de pagina omlaag, dus dít * is de beweging die "uitklappen" leest) terwijl het formulier infadet. * * De max-hoogte is een plafond, geen maat: het paneel is 80px hoog (18px vulling * + veld 44 + 18). 160px vangt ook een tweede regel op als de tekst ooit langer * wordt — een hogere waarde maakt de beweging traag op het laatst, omdat de * overgang de vólle afstand naar het plafond verdeelt. * * De roze scheidingslijn hoort bij het paneel; die fadet mee, anders staat er * tijdens het openklappen een losse streep onder de header. */ .hinke-search-panel { overflow: hidden; max-height: 0; opacity: 0; border-top-color: transparent; transition: max-height var(--hinke-dur-mid) var(--hinke-ease), opacity var(--hinke-dur-snel) var(--hinke-ease), border-top-color var(--hinke-dur-mid) var(--hinke-ease); } .hinke-search-panel.is-open { max-height: 160px; opacity: 1; border-top-color: var(--hinke-pink); } /* Het veld komt nog 6px van boven mee, zodat het niet plat "verschijnt". */ .hinke-search-panel .hinke-search { transform: translateY(-6px); transition: transform var(--hinke-dur-mid) var(--hinke-ease); } .hinke-search-panel.is-open .hinke-search { transform: translateY(0); } /* * Accordeon op de productpagina ("Beschrijving", "Verzenden & Retourneren"). * * De
klapt van zichzelf in één frame open — dat leest als flikkeren. hinke.js * (§12) zet hier een gemeten hoogte op en haalt die er na de overgang weer af; deze * regel maakt van dat verschil een beweging. `overflow: hidden` staat er ook in de JS, * maar hier alvast, zodat een halve frame nooit tekst buiten het vak laat zien. * * Zelfde duur als het zoekpaneel hierboven: dit is dezelfde soort beweging — een blok * dat de pagina omlaag duwt. */ .hinke-acc__body, /* Zelfde beweging voor een FAQ-vraag (blocks/faq.css). Daar zit één regel extra werk in de JS: die items horen bij elkaar in een groep, dus het zusje sluit mee. */ .hinke-faq__antwoord { transition: height var(--hinke-dur-mid) var(--hinke-ease), padding-bottom var(--hinke-dur-mid) var(--hinke-ease); } /* * SEO-tekst — open- en dichtklappen (structuur in pages/home.css, JS §10). * * Hier gaat het om een blok tekst dat de rest van de pagina wegduwt, en dat is * precies de beweging die je wilt zien: de footer schuift mee omlaag, zodat het * duidelijk is dát er tekst bijkomt en niet dat er iets over de pagina heen valt. * * Waarom `max-height` en niet de `height: auto`-interpolatie: die vraagt om * `interpolate-size: allow-keywords` en die staat alleen in Chromium — in Safari * en Firefox zou het dan hard openklappen. Met max-height werkt het overal; * hinke.js pint bij openen de gemeten hoogte zodat de overgang een doel heeft. * * De duur is `--hinke-dur-traag` en niet `-mid`: dit is de grootste afstand die * iets op deze site aflegt (honderden pixels, tegen 80px bij het zoekpaneel). Met * dezelfde 320ms schiet het blok er in één klap uit. */ .hinke-seo__body.is-clamped { transition: max-height var(--hinke-dur-traag) var(--hinke-ease); } /* Het verloop onderaan fadet weg terwijl het blok opengaat - anders verdwijnt de uitloop pas aan het eind, precies wanneer je naar de tekst kijkt. */ .hinke-seo__body.is-clamped::after { opacity: 1; transition: opacity var(--hinke-dur-mid) var(--hinke-ease); } /* * Mobiel menu — zelfde oorzaak: `.hinke-nav.is-open` schakelt alleen * `display: none` → `block`, en dat valt niet te animeren. Het menu is een * zwevend paneel (absoluut gepositioneerd, met schaduw), dus het duwt niets weg: * hier past een fade met een klein zetje van boven. Géén hoogte-animatie — die * zou vechten met de `max-height` waarmee een lang menu zelf kan scrollen * (layout.css §10c). * * Dit gaat OPZETTELIJK zonder JS: `transition-behavior: allow-discrete` houdt het * paneel tijdens het uitfaden in beeld en `@starting-style` levert de begintoestand * bij het openen. Zo blijft de openen/sluiten-logica van hinke.js (schermslot op * iOS, klik buiten het menu, opruimen bij draaien) volledig ongemoeid. Kent een * browser deze twee nog niet, dan klapt het menu open zoals voorheen — precies * het gedrag van nu, dus niets gaat kapot. */ @media (max-width: 1200px) { .hinke-nav { opacity: 0; transform: translateY(-8px); transition: opacity var(--hinke-dur-snel) var(--hinke-ease), transform var(--hinke-dur-mid) var(--hinke-ease), display var(--hinke-dur-mid) allow-discrete; } .hinke-nav.is-open { opacity: 1; transform: translateY(0); } @starting-style { .hinke-nav.is-open { opacity: 0; transform: translateY(-8px); } } } /* ----------------------------------------------------------------------------- Hamburger → kruis De vorm en de eindstanden staan in layout.css; hier alleen de overgang. De drie lijnen krijgen elk een kleine vertraging, zodat het kruis zich opbouwt in plaats van in één klap om te klappen: eerst schuift de korte middenlijn weg, dan draaien de buitenste twee naar elkaar toe. Bij sluiten loopt dat in omgekeerde volgorde, want dan gelden de vertragingen van de dichte staat. `transform-origin: center` is expliciet: de lijnen zijn 2px hoog en absoluut geplaatst, en zonder dit draait Chrome om het midden van de KNOP in plaats van om het midden van de lijn — dan zwiept het kruis scheef weg. -------------------------------------------------------------------------- */ .hinke-header__burger span { transform-origin: center; transition: transform var(--hinke-dur-mid) var(--hinke-ease), opacity var(--hinke-dur-snel) var(--hinke-ease); } /* Dicht: de buitenste lijnen draaien terug nádat de middenlijn weer in beeld is. */ .hinke-header__burger span:nth-child(1), .hinke-header__burger span:nth-child(3) { transition-delay: 60ms; } .hinke-header__burger[aria-expanded="true"] span:nth-child(1), .hinke-header__burger[aria-expanded="true"] span:nth-child(3) { transition-delay: 40ms; } .hinke-header__burger[aria-expanded="true"] span:nth-child(2) { transition-delay: 0s; } /* ----------------------------------------------------------------------------- 5. In beeld komen bij scrollen hinke.js zet `.hinke-reveal` op een vaste lijst blokken en `.is-in` zodra ze in beeld komen (IntersectionObserver). Rijen krijgen daarbij een index mee (--hinke-reveal-i), zodat kaarten na elkaar verschijnen in plaats van als één muur. De verschuiving is klein en altijd van onderaf: dat leest als "de pagina komt op gang", niet als een presentatie. -------------------------------------------------------------------------- */ html.hinke-motion .hinke-reveal { opacity: 0; transform: translate3d(0, var(--hinke-reveal-shift), 0); transition: opacity var(--hinke-dur-traag) var(--hinke-ease), transform var(--hinke-dur-traag) var(--hinke-ease); transition-delay: calc(var(--hinke-reveal-i, 0) * 80ms); } html.hinke-motion .hinke-reveal.is-in { opacity: 1; transform: translate3d(0, 0, 0); } /* ----------------------------------------------------------------------------- 6. Wie beweging uit heeft staan Geen transitions, geen keyframes, geen verschuiving — en vooral: de blokken uit §5 staan gewoon zichtbaar. hinke.js zet `html.hinke-motion` in dat geval niet, dit is het vangnet als de voorkeur ná het laden wordt omgezet. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.hinke-motion .hinke-reveal, html.hinke-motion .hinke-reveal.is-in { opacity: 1; transform: none; transition: none; } /* Zoekpaneel, mobiel menu en de SEO-tekst staan er meteen, zonder uitklappen. De JS zet de class nog steeds, dus openen en sluiten blijven werken. */ .hinke-search-panel, .hinke-search-panel .hinke-search, .hinke-nav, .hinke-seo__body.is-clamped, .hinke-seo__body.is-clamped::after { transition: none; } /* De hamburger springt direct naar het kruis: de eindstand blijft (dat is informatie — open of dicht), alleen het draaien en de vertragingen vervallen. */ .hinke-header__burger span, .hinke-header__burger[aria-expanded="true"] span:nth-child(1), .hinke-header__burger[aria-expanded="true"] span:nth-child(2), .hinke-header__burger[aria-expanded="true"] span:nth-child(3) { transition: none; transition-delay: 0s; } .hinke-search-panel .hinke-search { transform: none; } .hinke-swatch:not(.is-unavailable):hover, .sellabees-wish-modal__opt:hover, .hinke-header__action:hover, .hinke-footer__social a:hover, .hinke-carousel__arrow:hover, .sellabees-wish-btn:hover, .hinke-tm__marker:hover .hinke-tm__stip, .hinke-cart__remove a.remove:hover, .hinke-cats__card:hover img, .hinke-cats__card:focus-within img, .hinke-lookbook__item:hover img, .hinke-lookbook__item:focus-within img, .hinke-linkrij__card:hover img { transform: none; } /* De kaart blijft staan waar hij staat; de schaduw mag, die beweegt niet. */ .hinke-kaart, .hinke-kaart:hover, .hinke-kaart:has(.hinke-kaart__link:focus-visible) { transform: none; transition: box-shadow var(--hinke-dur-snel) var(--hinke-ease); } /* De tweede productfoto blijft wisselen — dat is geen versiering maar een andere kijk op het product. Alleen het overvloeien vervalt: hij staat er meteen. */ .woocommerce .sellabees-shop__main ul.products li.product .sellabees-loop-thumb-2, .hinke-card__media .sellabees-loop-thumb-2 { transition: none; } .sellabees-wish-btn.is-active .sellabees-wish-btn__icon, .sellabees-wish-btn.is-on .sellabees-wish-btn__icon { animation: none; } /* De header schuift zonder overgang omhoog; hij blijft wél vastzitten. */ .hinke-header { transition: none; } } /* ----------------------------------------------------------------------------- 7. De meeschuivende header De header staat vast bovenaan (layout.css). Zodra je voorbij de topbalk bent, zet hinke.js §9 `.is-stuck` en schuift die balk erboven weg, zodat alleen de witte balk met logo, menu en iconen overblijft — op een telefoon is dat het verschil tussen 150px en 110px die permanent van het scherm afgaat. Waarom een transform en geen inklappende hoogte: een sticky element houdt zijn plek in de pagina, dus zou het inklappen van de topbalk alle inhoud eronder 40px omhoog laten springen. Een transform verandert die hoogte niet. De hoogte van de topbalk komt uit een variabele die de JS opmeet: op smalle schermen wikkelt een lange USP en is die balk hoger dan de 40px uit het ontwerp. De schaduw doet het werk dat het ontwerp niet hoefde te regelen: zolang de header meescrollt ligt hij óp de inhoud, en wit-op-wit is dan geen grens. -------------------------------------------------------------------------- */ .hinke-header { transition: transform var(--hinke-dur-mid) var(--hinke-ease), box-shadow var(--hinke-dur-mid) var(--hinke-ease); } .hinke-header.is-stuck { transform: translateY(calc(-1 * var(--hinke-topbar-h, 40px))); box-shadow: 0 6px 18px rgba(0, 0, 0, .07); } /* ----------------------------------------------------------------------------- 8. Keuzevenster van het verlanglijstje — openen Het venster verscheen zonder overgang: het ene frame niets, het volgende een wit vlak over de pagina. Met een korte fade en een zetje van onderen landt het rustiger, in hetzelfde tempo als de rest van de site. WAAROM EEN ANIMATION EN GEEN TRANSITION De core zet dit venster aan en uit met het `hidden`-attribuut (assets/js/wishlist.js) en niet met een class. Van `display: none` naar zichtbaar valt niets te animeren — een transition heeft geen begintoestand om vanaf te lopen. Een `animation` start wél zodra het element gerenderd wordt, dus die pakt het openen gewoon op. Het SLUITEN blijft daardoor abrupt: `hidden` zet het element in hetzelfde frame op `display: none`, en daar valt met CSS niets tussen te krijgen. Dat zou JavaScript in de core vragen (eerst een class, dan ná de animatie `hidden`), en dat is een grotere ingreep dan dit oplevert — bij het sluiten kijk je toch weer naar de pagina eronder. Duur: het venster in --hinke-dur-snel (180ms), de doos in --hinke-dur-mid (320ms), dus de achtergrond is er eerst en de doos komt er net achteraan. -------------------------------------------------------------------------- */ @keyframes hinke-wlm-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes hinke-wlm-box { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } } .sellabees-wish-modal:not([hidden]) { animation: hinke-wlm-fade var(--hinke-dur-snel) var(--hinke-ease) both; } .sellabees-wish-modal:not([hidden]) .sellabees-wish-modal__box { animation: hinke-wlm-box var(--hinke-dur-mid) var(--hinke-ease) both; } /* Wie beweging uit heeft staan, krijgt het venster meteen te zien — geen zetje en geen fade, zodat er niets beweegt maar ook niets ontbreekt (zie §6). */ @media (prefers-reduced-motion: reduce) { .sellabees-wish-modal:not([hidden]), .sellabees-wish-modal:not([hidden]) .sellabees-wish-modal__box { animation: none; } }