/* ceeme-omhulsel.css — DE KOP EN DE VOETTEKST, EN VERDER NIETS. ================================================================================================ De vorm van lib/omhulsel.js. Dit bestand is met opzet klein en met opzet ALLEEN. ── Waarom het niet in ceeme.css staat ──────────────────────────────────────────────────────── Dat bestand is 32 kB uitgerolde Tailwind, gebouwd voor de site die we aan het vervangen zijn. De oude kop hing daaraan vast: `bg-ink text-creme sticky top-0 z-50` en nog dertig klassen. Zolang het omhulsel die klassen nodig heeft, kan het niet van nul komen — dan is het opnieuw tekenen van de kop een verbouwing van de oude stylesheet. Dus staat hier alles wat de kop en de voettekst nodig hebben, in gewone CSS, zonder één klasse te lenen. Een pagina heeft van de oude site niets meer nodig om een kop te hebben. ── De regel die hier boven alles gaat ─────────────────────────────────────────────────────── ZONDER JAVASCRIPT VERANDERT ER NIETS AAN WAT ER STAAT. Geen opacity:0 in de basis, geen display:none op iets dat tekst draagt. Dat is niet voorzichtig — het is het product. Zie scripts/test-zonderjs.mjs, die élk script wegknipt én dit bestand meeleest. De duurste fout van 9 augustus was één `.rv{opacity:0}` in de basis van ceeme-2026.css, en die kostte de halve homepagina. Eén accent: amber #C6892B. Violet komt hier niet voor — dat is punt 3 en dat komt in het paneel (ceeme-menu.css), als licht en nooit als vlak. */ /* ── De namen dragen een voorvoegsel, en dat is geen smaak ───────────────────────────────────── public/ceeme-2026.css zet op :root óók een `--ink`, en op een andere waarde (#16150F tegenover #17170F). Twee stylesheets die dezelfde naam op :root zetten, is een fout die pas opvalt als de volgorde van twee -regels een keer omdraait — en dan verschuift de kleur van de halve site zonder dat er iets in een bestand veranderd is. Met `--ce-` ervoor kan dat niet gebeuren. */ :root { --ce-ink: #17170F; --ce-inkdiep: #0E0E09; --ce-creme: #F6F2E9; --ce-cremediep: #EEE9DF; --ce-lijn: #E2E2D8; --ce-stil: #83837A; --ce-inkzacht: #3A3A31; --ce-amber: #C6892B; --ce-amberdiep: #A8721F; --ce-kop-h: 64px; } /* De basis die het omhulsel zelf zet. Body-kleur en lettertype stonden tot nu toe als Tailwind-klassen ín de -tag, op elke pagina overgetypt en op drie plaatsen anders. */ body { margin: 0; background: var(--ce-creme); color: var(--ce-ink); font-family: "Manrope", system-ui, -apple-system, sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* ── De sprongverwijzing ───────────────────────────────────────────────────────────────────── Onzichtbaar tot iemand tabt. Wie met een toetsenbord of een schermlezer werkt, hoeft niet eerst door de hele kop; wie dat niet doet, merkt er niets van. Hij staat er ook zonder JavaScript. */ .kp-spring { position: absolute; left: 10px; top: -60px; z-index: 90; background: var(--ce-ink); color: var(--ce-creme); padding: 10px 16px; border-radius: 999px; font: 600 13px/1 inherit; text-decoration: none; transition: top 160ms ease; } .kp-spring:focus { top: 10px; outline: 2px solid var(--ce-amber); outline-offset: 2px } /* ── GEEN BALK: de kop ligt IN de hero ─────────────────────────────────────────────────────── Njusja: "de menubalk zou trouwens mooi in de hero moeten verwerkt zijn en niet als balk weergegeven worden... dat breekt de pagina." Ze heeft gelijk, en het is te zien zodra je het weet: de hero is een donkere band met licht erin, en daar lag een tweede donkere band bovenop met een eigen rand. Twee vlakken van dezelfde kleur met een naad ertussen — dan is de hero geen beeld meer maar het onderste stuk van een balk. Nu is de kop absoluut en volledig doorzichtig. Hij LIGT in de hero: het logo linksboven, de taal en Menu rechtsboven, en verder niets. Geen achtergrond, geen lijn, geen naad. Bij Bridoux werkt het net zo — FB linksboven, Fermer rechtsboven, en het scherm eronder is één beeld. De hero heeft bovenaan ruimte gekregen zodat de H1 er niet onder schuift; zie .ph-band in ceeme-paginahero.css. */ /* `fixed` en niet `absolute`. Met absolute stond de kop vast aan de BOVENKANT VAN DE PAGINA en scrolde hij dus gewoon uit beeld; hij werd pas weer zichtbaar voorbij tachtig procent van een scherm, wanneer `bw-diep` hem op fixed zette. Daartussen was hij nergens — precies wat Njusja zag: "menu verdwijnt te snel." Fixed mét een doorzichtige achtergrond geeft allebei: bovenaan lijkt hij deel van de hero, want er is geen vlak en geen naad, en verderop blijft hij bereikbaar zonder ooit een balk te worden. */ .ceeme-kop { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: transparent; color: var(--ce-creme); } .kp-band { max-width: 1180px; margin: 0 auto; min-height: var(--ce-kop-h); padding: 0 max(18px, 3vw); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .kp-merk { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; font-weight: 800; font-size: 20px; letter-spacing: -.025em; } /* Het logo staat inline zodat de ring kan draaien — zie lib/logo.js. Dertig seconden per omwenteling, dezelfde snelheid als `ceemeOrbitSpin` die er al was. Het woordmerk staat stil: draaiende letters zijn geen merk maar een kermis. */ /* De maat staat inline op de — zie lib/logo.js. Hier staat alleen wat er beweegt. Een licht dat rond de ring loopt: elke stip dooft en licht weer op, met een vertraging die met het volgnummer meeloopt. Vier seconden voor een hele ronde. Een ROTATIE zou hier niets doen — 112 gelijke stippen in een ring zien er gedraaid precies hetzelfde uit, en dat was de fout. */ .kp-stip { animation: kp-signaal 3.2s linear infinite; animation-delay: calc(var(--i, 0) * -0.0286s); } /* ── Waarom dit de derde poging is ────────────────────────────────────────────────────────── Eerst liet ik de ring ROTEREN: onzichtbaar, want 112 gelijke stippen in een ring zien er gedraaid precies hetzelfde uit. Toen een lichtje van 55% naar 100% dekking: ook onzichtbaar, want het logo is 26 px hoog en elke stip is dan nog geen 2 px — een verschil in dekking van 45% is op die maat niets. Nu verandert de stip van KLEUR. Van crème naar amber en terug, met een dieper dal ervoor. Kleur verschilt ook op twee pixels, dekking niet. Er zijn er zo'n tien tegelijk aan het oplichten, dus je ziet een gouden boog rond de ring lopen — traag, in 3,2 seconden. */ @keyframes kp-signaal { 0%, 78% { fill: currentColor; opacity: .45 } 86% { fill: #C6892B; opacity: 1 } 94%,100% { fill: currentColor; opacity: .45 } } @media (prefers-reduced-motion: reduce) { .kp-stip { animation: none; opacity: 1 } } .kp-woord { display: inline-block } /* Dezelfde ronde punt als in de hero — zie ceeme-hero.css voor waarom het geen letterteken is. */ .kp-punt { display: inline-block; width: .19em; height: .19em; margin-left: .05em; border-radius: 50%; background: var(--ce-amber); font-style: normal; } .kp-merk:focus-visible { outline: 2px solid var(--ce-amber); outline-offset: 4px; border-radius: 6px } .kp-rechts { display: flex; align-items: center; gap: 14px } /* De taalkiezer. Klein, monospace, en de eigen taal draagt het accent — één blik en je weet waar je staat. Een taal die deze pagina niet heeft, staat er gedoofd bij en niet als link naar niets: 91 van de 92 pagina's hebben nog geen Duits, en dat hoort zichtbaar te zijn. */ /* LET OP — de standaardtoestand is ZICHTBAAR, en wat verbergt staat in een @media. Andersom is het even mooi en het faalt op scripts/test-zonderjs.mjs, terecht: die test knipt élk script weg en zoekt naar `display:none` buiten `html.beweegt` en buiten een @media. `display:none` in de basis met een `@media (min-width)` die het weer aanzet, is voor die test — en voor een crawler die geen breedte heeft — niet te onderscheiden van iets wegstoppen. Het is bovendien de betere volgorde: de smalste schermen krijgen de eenvoudigste regel, en wat wegvalt is de taalkiezer (die ook onderaan in de voettekst staat) en de inlogknop. */ .kp-talen { display: inline-flex; align-items: center; gap: 5px; font: 700 11px/1 "Space Mono", ui-monospace, monospace; background: rgba(246, 242, 233, .08); border-radius: 999px; padding: 6px 10px; } .kp-talen a { color: rgba(246, 242, 233, .6); text-decoration: none } .kp-talen a:hover { color: var(--ce-creme) } .kp-talen a[aria-current] { color: var(--ce-amber) } .kp-talen i, .vt-talen i { color: rgba(246, 242, 233, .25); font-style: normal } .kp-taal-uit { color: rgba(246, 242, 233, .22) } @media (max-width: 619px) { .kp-talen { display: none } } /* ── Wat er UIT de balk is ─────────────────────────────────────────────────────────────────── Njusja: "inloggen moet eruit en gratisscan hoort hier ook niet." Inloggen wijst naar ceeme.app — de enige link op de site die je naar een ander product stuurt, en die hoort in de voettekst. Gratis scan staat al onderaan élke pagina als CTA en in de hero; hem ook nog in de balk zetten maakt van de kop een derde plek die om dezelfde klik vraagt. Wat overblijft: het logo, de taal, en de weg naar de rest van de site. Meer heeft een kop niet nodig. */ /* De kop reageert op scrollen — maar alleen als er beweging is. ceeme-beweging.js zet `bw-diep` voorbij tachtig procent van een scherm en `bw-weg` als je naar beneden gaat. Zonder script staat de kop gewoon boven en gebeurt geen van beide. */ /* ── Voorbij de hero ───────────────────────────────────────────────────────────────────────── De kop scrollt met de hero mee weg, want hij hoort erbij. Maar het menu moet bereikbaar blijven op een pagina van vier schermen hoog, en terugkomen als balk zou de fout hierboven herhalen. Dus komt hij terug als losse elementen: het logo en Menu blijven zweven waar ze stonden, zonder vlak en zonder rand. Op crème krijgen ze een inktkleur en een zachte schaduw, zodat ze leesbaar blijven zonder dat er een balk omheen hoeft. Alles hangt aan html.beweegt: zonder JavaScript staat de kop gewoon bovenaan de pagina. */ html.beweegt .ceeme-kop { transition: opacity 300ms ease } /* Voorbij de hero staat de pagina op crème. Dan wordt het logo inktkleurig, met een zachte gloed eromheen zodat het leesbaar blijft zonder dat er een vlak onder hoeft. */ html.beweegt.bw-diep .ceeme-kop { color: var(--ce-ink); text-shadow: 0 1px 14px rgba(246, 242, 233, .9); } html.beweegt.bw-diep .kp-logo { filter: drop-shadow(0 1px 10px rgba(246, 242, 233, .85)) } html.beweegt.bw-diep .kp-talen { background: rgba(23, 23, 15, .06) } html.beweegt.bw-diep .kp-talen a { color: rgba(23, 23, 15, .55) } html.beweegt.bw-diep .kp-talen a:hover { color: var(--ce-ink) } html.beweegt.bw-diep .kp-talen a[aria-current] { color: var(--ce-amberdiep) } html.beweegt.bw-diep .kp-talen i, html.beweegt.bw-diep .kp-taal-uit { color: rgba(23, 23, 15, .25) } /* ── En hij BLIJFT staan als je naar beneden scrollt ───────────────────────────────────────── Hier stond `bw-weg → opacity: 0`: de kop verdween zodra je naar beneden ging en kwam pas terug als je omhoog scrollde. Njusja: "menu verdwijnt te snel want bij naar beneden scrollen niet meer zichtbaar." Dat gedrag komt uit een tijd dat de kop een BALK was — dan is wegduiken winst, want je krijgt ruimte terug. Nu is het geen balk meer maar een logo en een woord die vrij op de pagina zweven; die kosten geen ruimte, en ze weghalen kost alleen de weg naar de rest van de site. De kop verdwijnt dus nog op precies één moment: bovenaan de homepagina, waar de bol het scherm voor zich alleen krijgt. En als het paneel openstaat, want dan heeft dat zijn eigen balk. */ /* Staat het paneel open, dan gaat de kop wég. De overname heeft een eigen balk met drie dingen — ceeme. links, de taalkiezer in het midden, ✕ Sluiten rechts — en die zit in het paneel zelf. Zie de kop van lib/menu.js. Twee balken over elkaar zou betekenen: twee woordmerken, twee taalkiezers die naar hetzelfde wijzen, en een Menu-knop naast een sluitknop. Dat is precies het soort dubbeling waar deze hele dag over ging, alleen dan in het klein. */ html.beweegt.mn-open .ceeme-kop { opacity: 0; visibility: hidden; transition: opacity 200ms ease } /* ── Op de eerste hero staat er geen balk ──────────────────────────────────────────────────── Njusja: "menubalk nog niet weergeven op eerste hero, enkel vanaf eerste scroll." De homepagina begint met de bol, schermvullend. Een balk daaroverheen haalt precies weg wat dat beeld doet: één ding, zonder omlijsting. Zodra je aan het wiel draait, komt hij. `bw-boven` zet ceeme-beweging.js zolang je bovenaan staat, en `.met-reis` staat alleen op de homepagina — zie bouw-home.mjs. Op elke andere pagina staat de balk er dus meteen, want daar begint de pagina met een hero die zelf een kop nodig heeft. Alles hangt aan html.beweegt: zonder JavaScript staat de balk er gewoon. */ html.beweegt.bw-boven .met-reis .ceeme-kop { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 260ms ease, visibility 0s linear 260ms; } @media (prefers-reduced-motion: reduce) { html.beweegt .ceeme-kop { transition: none } html.beweegt.bw-weg .ceeme-kop { transform: none } } /* ── De voettekst ───────────────────────────────────────────────────────────────────────────── */ .ceeme-voet { background: var(--ce-inkdiep); color: var(--ce-creme); margin-top: 96px; } .vt-band { max-width: 1180px; margin: 0 auto; padding: 56px max(18px, 3vw) 40px; display: grid; gap: 40px; } @media (min-width: 780px) { .vt-band { grid-template-columns: 1.3fr 2fr; gap: 56px } } .vt-merk .kp-merk { font-size: 18px } .vt-regel { margin: 14px 0 0; max-width: 30ch; color: rgba(246, 242, 233, .55); font-size: 14px; line-height: 1.6; } .vt-kolommen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px } @media (min-width: 560px) { .vt-kolommen { grid-template-columns: repeat(3, minmax(0, 1fr)) } } /* De kolomkop is een

en geen
, want een kop die eruitziet als een kop hoort er ook een te zijn. Dat is geen vormkwestie: een model dat de voettekst leest, gebruikt die koppen om te weten waar het naar kijkt. */ .vt-kop { margin: 0 0 12px; font: 700 10.5px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ce-stil); } .vt-kolom ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px } .vt-kolom a { color: rgba(246, 242, 233, .68); text-decoration: none; font-size: 14px; } .vt-kolom a:hover { color: var(--ce-creme) } .vt-kolom a:focus-visible, .vt-talen a:focus-visible { outline: 2px solid var(--ce-amber); outline-offset: 3px; border-radius: 3px; } .vt-onder { border-top: 1px solid rgba(246, 242, 233, .1) } .vt-onder { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; max-width: 1180px; margin: 0 auto; padding: 18px max(18px, 3vw) 26px; font-size: 12px; color: rgba(246, 242, 233, .4); } .vt-onder a { color: inherit; text-decoration: none } .vt-onder a:hover { color: var(--ce-creme) } .vt-talen { display: inline-flex; gap: 5px; font: 700 11px/1 "Space Mono", ui-monospace, monospace } .vt-talen a[aria-current] { color: var(--ce-amber) }