/* De favorieten-ingang in de kopbalk. * * Deze regels hingen tot 01-09-2026 aan `#contact.gk-fav-nav`, omdat dit item * toen letterlijk de plaats van "Contact" innam. Sinds Favorieten ernaast staat * in plaats van eroverheen (zie serve.py:voeg_favnav_toe) heeft het een eigen id, * en toen viel de opmaak weg: het item stond er wel maar was 0 bij 0 pixels. * Daarom nu aan de class en niet aan een id — dan overleeft het de volgende keer * dat er iets aan die kopbalk verandert. */ /* Het favorieten-hartje: hoe het eruitziet en hoe het beweegt. Eén bron voor alle plekken waar een hartje staat — de rubriekpagina, de kaartpagina en de favorietenpagina. Het gedrag staat in hartje.js. */ /* Zelfde bewegingslijn als het favorieten-sterretje in Sjoppy: eerst schieten, dan drie hele slagen om de as, dan zakken en landen. */ @keyframes gk-hartpling { 0% { transform: translateY(0) rotateY(0deg) scale(1); } 18% { transform: translateY(-26px) rotateY(240deg) scale(1.35); } 38% { transform: translateY(-42px) rotateY(540deg) scale(1.4); } 52% { transform: translateY(-44px) rotateY(720deg) scale(1.35); } 78% { transform: translateY(-8px) rotateY(1080deg) scale(1.1); } 90% { transform: translateY(3px) rotateY(1080deg) scale(0.9); } 100% { transform: translateY(0) rotateY(1080deg) scale(1); } } .favoriet_login { cursor: pointer; transition: color .18s ease; } /* De bron zet het hartje in de lijst op z-index 2. Dat is genoeg tot er bij hover een kader of overlay over de kaart komt; dan valt het hartje eronder. Het is de bovenste laag van een kaartje, dus dat hoort het ook te zijn. */ .card .favBtn, .cards_list .favBtn { z-index: 20 !important; } .favoriet_login.gk-vlucht { animation: gk-hartpling .85s cubic-bezier(0.22,0.9,0.3,1); transform-origin: center; will-change: transform; } /* Gevuld en rood zodra hij favoriet is. Font Awesome vult op font-weight 900; dat werkt ongeacht welke stijlvariant de kit meelevert. */ .favoriet_login.gk-favoriet { color: var(--gk-hart, #eb5e5e); font-weight: 900; -webkit-text-stroke: 0; } @media (prefers-reduced-motion: reduce) { .favoriet_login.gk-vlucht { animation: none; } } /* De vlucht gebeurt in een eigen laag, rechtstreeks aan gehangen. Waarom: de menubalk (`#menu_bar`) is een kind van `.mm-page` met z-index 3, en alle pagina-inhoud zit in `#main.wrapper` met z-index 2. Alles binnen die wrapper valt dus onder het menu, hoe hoog je de z-index van het hartje zelf ook zet — een stapelcontext laat zich niet van binnenuit overrulen. Buiten die wrapper kan het wel. */ /* Niets meer dan een doosje op de goede plek. Kleur en vulling komen van `.favoriet_login.gk-favoriet` hierboven — dezelfde regel die het hartje op zijn eigen plek rood maakt. Maat en regelhoogte neemt het scriptje over van het origineel, zodat de kloon precies op dezelfde plek staat en de vlucht niet met een sprongetje begint. */ .gk-vluchtlaag { position: fixed; z-index: 2147483000; pointer-events: none; display: block; } /* "Contact" in de kopbalk wees naar dezelfde pagina als "Klantenservice"; die plek is nu van de favorieten. Het balletje telt mee zodra je iets aanklikt. */ .gk-fav-nav .gk-hart-wrap { position: relative; display: inline-block; } /* Klein genoeg om het hartje heel te laten: het balletje hoort een aantekening te zijn, geen tweede icoon. */ .gk-fav-nav .gk-fav-teller { position: absolute; top: -5px; right: -7px; min-width: 13px; height: 13px; padding: 0 3px; border-radius: 999px; background: var(--gk-hart, #eb5e5e); color: #fff; font-size: 8.5px; font-weight: 700; line-height: 13px; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; box-shadow: 0 0 0 1.5px #fff; transform: scale(0); transition: transform .22s cubic-bezier(.34,1.56,.64,1); pointer-events: none; } .gk-fav-nav .gk-fav-teller.gk-erop { transform: scale(1); } /* Kort opveren bij elke wijziging, zodat je ziet dát er iets bijkwam. */ .gk-fav-nav .gk-fav-teller.gk-tel-op { animation: gk-tel .4s cubic-bezier(.34,1.56,.64,1); } @keyframes gk-tel { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } } /* Het hartje in de kopbalk blijft de omlijnde vorm van een niet-gekozen kaart — alleen het balletje is rood. */ /* "far" is dezelfde variant als het poppetje van Inloggen en het karretje van Winkelwagen; met fa-light was het hartje merkbaar dunner dan zijn buren. */ .gk-fav-nav .gk-hart-icoon { color: inherit; } @media (prefers-reduced-motion: reduce) { .gk-fav-nav .gk-fav-teller { transition: none; } .gk-fav-nav .gk-fav-teller.gk-tel-op { animation: none; } } /* ── Het hartje in de mobiele kopbalk ──────────────────────────────────── Op een telefoon toont de kopbalk drie iconen: zoeken, account en winkelwagen. Het favorietentegeltje stond daar wél in de pagina maar op 0 bij 0 — hun mobiele opmaak verbergt alles wat in zo'n een is, en ons hartje zit nu juist in een span (die het balletje moet kunnen positioneren). Ries, 26-08-2026: *"op mobile mijn favorieten in de header als icoon met notificatie belletje erbij."* Hieronder krijgt het tegeltje dezelfde maat en kleur als de andere drie: 24 px, #555, en de tekst eronder blijft verborgen net als bij hen. */ @media (max-width: 767px) { li.gk-fav-nav > a > .gk-hart-wrap { display: inline-block !important; position: relative; line-height: 24px; } /* Het woord "Favorieten" blijft weg: de andere drie tonen ook alleen hun icoon. De tekst blijft wel in de pagina staan voor schermlezers. */ li.gk-fav-nav > a > span:not(.gk-hart-wrap) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } li.gk-fav-nav .gk-hart-icoon { display: inline-block !important; font-size: 24px; line-height: 24px; color: #555; } li.gk-fav-nav .gk-fav-teller { display: block !important; top: -4px; right: -8px; } } /* ── Het tegeltje zichtbaar houden op de grote kopbalk ─────────────────── Sinds 01-09-2026 staat Favorieten náást Contact in plaats van eroverheen, en heeft het dus een eigen id. Toen bleek dat het item op desktop 0 bij 0 werd: het thema verbergt de 's in zo'n kopbalk-link, en toen ons tegeltje nog letterlijk #contact heette liftte het mee op de regels die dáárvoor gemaakt zijn. Met een eigen id valt die dekking weg en blijft er niets over om breed te zijn — het hartje en het woord zitten allebei in een span. Daarom hier expliciet, en aan de class zodat het niet weer omvalt als er iets aan de kopbalk verandert. Alleen boven de mobiele grens; daaronder geldt het blok hierboven, waar het woord juist wél verborgen hoort te blijven. */ @media (min-width: 768px) { li.gk-fav-nav > a { display: inline-flex !important; align-items: center; gap: 8px; white-space: nowrap; } li.gk-fav-nav > a > .gk-hart-wrap { display: inline-block !important; position: relative; line-height: 1; } li.gk-fav-nav > a > span:not(.gk-hart-wrap) { display: inline !important; position: static; width: auto; height: auto; overflow: visible; clip-path: none; } li.gk-fav-nav .gk-hart-icoon { display: inline-block !important; } /* Het balletje zit ín .gk-hart-wrap en is dus géén direct kind van de . De regel hierboven redt alleen die directe kinderen, dus zonder deze regel bleef het verborgen: juiste tekst, juiste kleur, display none. Robbert zag dat meteen ("het rode balletje is nu wel verdwenen"). Onder de mobiele grens staat dezelfde regel al. */ li.gk-fav-nav .gk-fav-teller { display: block !important; } }