/** * Het ontwerpsysteem: wit, lijnen, rood. * * Dit is de enige plek waar een kleur, een maat of een hoek een waarde krijgt. * Alles daarna rekent met var(). Wie iets wil bijstellen, doet dat hier. * * Deze laag laadt als eerste, vóór style.css. Dat is met opzet: de twee * naamstelsels die de site al had (--cream/--ink/--line uit systeem.css en * --cmpl-* uit tokens.css) wijzen nu allebei hiernaar in plaats van hun eigen * hex mee te dragen. Zo staat er nog maar één waarheid, en kan een pagina die * tokens.css wél laadt niet meer iets anders tonen dan een pagina die dat niet * doet. * * @package complimentje-bridge */ :root{ /* --- Kleur ------------------------------------------------------------ Vijf. Meer heeft het systeem niet nodig: een grond, een inkt, een zacht grijs voor bijzaak, een lijn, en één rood. */ --kleur-grond:#FFFFFF; --kleur-ink:#1D1D1F; --kleur-soft:#6E6E73; --kleur-lijn:#E5E5EA; --kleur-rood:#C9414C; /* De enige uitzondering op "één rood", en hij verdient zijn plek: dit is uitsluitend de hover-stap van een knop. Zonder een tweede waarde is er geen zichtbaar verschil tussen een knop waar je op wijst en een knop waar je niet op wijst, en dan is de hover er niet meer. Nooit gebruiken als tekst-, label- of randkleur; daarvoor is er --kleur-rood. */ --kleur-rood-hover:#B23A44; /* De rand van een invoerveld. Geen zesde kleur maar een naam voor een bestaande: het zachte grijs. Waarom niet gewoon --kleur-lijn: die haalt op wit 1,26 : 1 en WCAG 1.4.11 vraagt 3 : 1 voor alles wat geen tekst is maar wel betekenis draagt. Bij een invoerveld is de rand precies dat: hij is het enige dat zegt dat je hier iets mag typen. --kleur-soft haalt 5,07 en heeft ruimte over. Een lijn die twee blokken scheidt mag wel licht blijven; die draagt geen betekenis, alleen rust. Vandaar twee namen voor twee taken. */ --kleur-veldrand:var(--kleur-soft); /* --- Het warme vlak --------------------------------------------------- Twee kleuren, en alleen voor de samen-cadeau-band op de homepage. Het systeem is wit, lijnen en rood, en laat precies één uitzondering toe: de samen-cadeau-band mag een zacht vlak houden. Dit zijn de twee kleuren van dat vlak, en ze horen nergens anders te staan. Waarom nieuwe namen en niet de oude. Er staan nog vier tokens uit de goud-tijd in het thema (--cmpl-terra-tint, --cmpl-gold-soft, --cmpl-paper, --cmpl-soft). Die bestaan alle vier, maar ze zijn bij de overgang naar dit systeem doorverwezen naar wit en naar de lijnkleur: gemeten op live geven ze #FFFFFF, #E5E5EA, #FFFFFF en #FFFFFF. Hun namen beloven dus warmte die hun waarden niet meer hebben. Ze weer vullen zou uitstralen naar elke andere plek die ze nog gebruikt; daarom blijven ze dood en staan hier twee eigen namen. --kleur-vlak-warm is de papierkleur die de drukker al zet (Cmpl_Lijnstijl::PAPIER) en die de kaart en het meelopende streepje al dragen. Hij is dus niet nieuw op de site, alleen nieuw in de tabel. --kleur-vlak-tint is het rood van het systeem op ongeveer een tiende over wit; daarmee is het geen tweede kleur maar hetzelfde rood, zachter gezet. */ --kleur-vlak-warm:#FAF6F1; --kleur-vlak-tint:#F9ECEE; /* --- Het werkvlak ------------------------------------------------------ Voorstel van 14 september 2026, voor de studio op /aanpassen/. De studio legt de kaart op een vlak waar je aan hem werkt. Dat vlak moet van het product te onderscheiden zijn, anders weet niemand waar de kaart ophoudt. De mockup zette er #F0EFEC neer, maar dat is een verzonnen waarde en die hoort hier niet te landen. Daarom een nieuwe naam op een bestaande waarde: de lijnkleur van het systeem, nu als vlak. Er komt dus geen zevende kleur bij; er komt een zevende naam bij, en die wijst naar de vierde waarde. Wil de ontwerpwacht het werkvlak lichter of warmer, dan is dat een besluit over de tabel en niet over deze pagina. */ --kleur-werkvlak:var(--kleur-lijn); /* --- Lijn ------------------------------------------------------------- Eén dikte. Een lijn scheidt; hij vraagt geen aandacht. */ --lijn-dikte:1px; /* --- Ruimte ----------------------------------------------------------- Negen stappen. Elke marge en elke padding in de site is er één van. */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; /* --- Hoeken ----------------------------------------------------------- Rond is aanraakbaar. Alleen wat je indrukt is een pil; een vlak is licht afgerond; een productbeeld is recht, want daar kijk je naar. */ --r-vlak:10px; --r-beeld:0; --r-rond:100px; /* De keuzehoek: 6 pixels, voor iets dat je aan- of uitzet. Toegevoegd 8 september 2026 met de chiprij van de toonkeuze. Volledig rond is van de knop die de pagina verder brengt; een keuze die aan of uit staat hoort daar niet op te lijken, want dan lezen twee verschillende dingen als hetzelfde. Vierkant is te hard naast de rest. */ --r-keuze:6px; } /* ========================================================================== * De uitzondering: het beeldmerk hoort niet bij de iconen. * * Iconen komen uit Lucide, op een raster van 24, lijndikte 2, weergave 20 px. * Het hartje naast het woordmerk valt daar buiten: dat is het logo. Het is * gevuld in plaats van lijn, en het schaalt mee met de letterhoogte ernaast in * plaats van vast te staan op 20 px. * * Deze regel staat hier en niet alleen in het commentaar bij het icoon, omdat * het systeem hier gelezen wordt. Bij het doorvoeren van het systeem werd het * beeldmerk per ongeluk het lijn-hartje; het controlescript kent dezelfde * uitzondering, anders keurt het juist de goede versie af. * ========================================================================== */ .cmpl-ic--beeldmerk-hart{ width:1em; height:1em; color:var(--kleur-rood); } /* ========================================================================== * De oude namen, nu doorverwijzingen. * * style.css en de tien pagina-stylesheets rekenen met --ink, --line, --terra * en de --cmpl-* reeks. Die namen blijven bestaan, maar dragen geen eigen * waarde meer: ze halen hem hier op. Daardoor hoeft er in die bestanden geen * enkele var()-naam om, en is er tegelijk maar één plek waar de waarde staat. * ========================================================================== */ :root{ /* Het stelsel uit systeem.css. */ --cream:var(--kleur-grond); --soft:var(--kleur-grond); /* rustvlakken zijn nu wit met een lijn */ --white:var(--kleur-grond); --ink:var(--kleur-ink); --muted:var(--kleur-soft); --line:var(--kleur-lijn); --gold:var(--kleur-lijn); --terra:var(--kleur-rood); --terra-soft:var(--kleur-rood); --terra-deep:var(--kleur-rood); /* Een label lees je; het is geen tweede rood meer. */ --label:var(--kleur-rood); --knop-vol:var(--kleur-rood); --knop-vol-hover:var(--kleur-rood-hover); --knop-rand:var(--kleur-lijn); --knop-hoogte:48px; /* Het stelsel uit tokens.css, voor de zeven pagina's die dat bestand laden. */ --cmpl-cream:var(--kleur-grond); --cmpl-soft:var(--kleur-grond); --cmpl-white:var(--kleur-grond); --cmpl-paper:var(--kleur-grond); --cmpl-paper-warm:var(--kleur-grond); --cmpl-paper-soft:var(--kleur-grond); --cmpl-paper-flow:var(--kleur-grond); --cmpl-ink:var(--kleur-ink); --cmpl-ink-soft:var(--kleur-ink); --cmpl-muted:var(--kleur-soft); --cmpl-muted-deep:var(--kleur-soft); --cmpl-subtle:var(--kleur-soft); --cmpl-line:var(--kleur-lijn); --cmpl-line-strong:var(--kleur-lijn); --cmpl-line-soft:var(--kleur-lijn); --cmpl-gold:var(--kleur-lijn); --cmpl-gold-soft:var(--kleur-lijn); --cmpl-terra:var(--kleur-rood); --cmpl-terra-soft:var(--kleur-rood); /* --cmpl-terra-deep staat bewust NIET hier. Hij stond hier op --kleur-rood en in systeem.css op --kleur-rood-hover, en systeem.css won op laadvolgorde. Zestien plekken kregen dus een andere rood dan hier beloofd, waaronder de accordeon op de teampagina. Een naam met "deep" erin die gelijk is aan de gewone rood betekent bovendien niets, dus de diepere waarde uit systeem.css is de juiste. Eén definitie, en die staat daar. */ --cmpl-terra-tint:var(--kleur-grond); --cmpl-terra-mist:var(--kleur-lijn); --cmpl-space-1:var(--s2); --cmpl-space-2:var(--s3); --cmpl-space-3:var(--s4); --cmpl-space-4:var(--s5); --cmpl-space-5:var(--s6); --cmpl-space-6:var(--s7); --cmpl-space-7:var(--s9); --cmpl-radius-sm:var(--r-vlak); --cmpl-radius:var(--r-vlak); --cmpl-radius-lg:var(--r-vlak); --cmpl-radius-pill:var(--r-rond); /* Geen schaduw meer. Een lijn doet hetzelfde en blijft scherp. De namen blijven staan zodat niets breekt dat er nog naar wijst. */ --cmpl-shadow-soft:none; --cmpl-shadow-card:none; /* * Negen namen die bij het overzetten zijn blijven liggen, 6 sep 2026. * * teams-landing.css gebruikt ze alle negen, en ze stonden nergens. Een * `var()` die niets vindt maakt de hele eigenschap ongeldig; wat je dan * krijgt is de beginwaarde, en bij een erfbare eigenschap de waarde van de * ouder. Dat is stil, en het levert nooit een foutmelding op. * * Wat het op /voor-teams/ aanrichtte: * --cmpl-wrap elke sectie verloor zijn kolom van 1120 en liep van rand * tot rand, want `max-width` werd `none`. * --cmpl-narrow de FAQ had geen maximumbreedte, dus die rijen ook. * --cmpl-serif alle koppen erfden de bodyletter. Niet de themaregel * `h1,h2,h3{font-family:'Newsreader',serif}`, want die * verliest van de ongeldige regel: ongeldig wordt niet * genegeerd, het wordt "erf van de ouder". * --cmpl-sage-* het vlakje achter de hartjes bleef doorzichtig. * --cmpl-ease elke transitie waarin hij stond was ongeldig, dus geen * overgang. * * De maten komen uit style.css (.wrap 1120, .narrow 720) en de letters uit * dezelfde twee families die het thema al gebruikt, zodat deze pagina niet * zijn eigen stelsel krijgt. * * Sage bestaat niet in "wit, lijnen, rood". Hij is daarom op wit en rood * gezet: dat is precies wat er nu op het scherm staat, dus deze regel * repareert de ongeldige waarde zonder de vormgeving te veranderen. Wil je * het vlakje wél zien, dan is `--cmpl-sage-soft:var(--kleur-lijn)` genoeg. */ --cmpl-wrap:1120px; --cmpl-narrow:720px; --cmpl-serif:'Newsreader',serif; /* De letterrij staat hier, en alleen hier. Tot 10 september 2026 stond hij in vijf spellingen door het thema, en dat leverde per element een andere terugval op zodra Figtree niet laadde. -apple-system staat vooraan omdat dat op een Mac de systeemletter is die het dichtst bij Figtree ligt. */ --cmpl-sans:"Figtree",-apple-system,system-ui,"Segoe UI",sans-serif; --cmpl-small:var(--fs-label); --cmpl-micro:var(--fs-label); --cmpl-sage-soft:var(--kleur-grond); --cmpl-sage-dark:var(--kleur-rood); --cmpl-ease:ease; }