/* ============================================================================= TAGAROA · DESIGN SYSTEM Eén bestand met de merkregels als echte code. Wie dit invoegt en de klassen gebruikt, kan niet meer per ongeluk van het merk afwijken. Alles hieronder komt uit het logo. Het logo bestaat uit precies drie ideeën: de SNEDE, het GAT en de DUNNE LIJN. Meer is er niet, en meer mag er niet bij. Versie 1.0 · juli 2026 ============================================================================= */ /* ----------------------------------------------------------------------------- 1 · TOKENS -------------------------------------------------------------------------- */ :root{ /* --- de merkhoek --------------------------------------------------------- Gemeten uit het wordmerk: het linkerbeen van de A staat op -25,36° uit het verticaal, de rechterflank op +25,58°. Afwijking 0,25 px op de lijnfit. De merkhoek is dus 25,5°. Nooit 45° gebruiken, nooit afronden naar 30°. */ --hoek: 25.5deg; --hoek-ratio: .477; /* tan(25,5°) . horizontaal = verticaal × dit */ /* De snede bestaat in drie maten. Groter dan L bestaat niet. */ --snede-s: 32px; --snede-s-x: 15px; --snede-m: 48px; --snede-m-x: 23px; --snede-l: 64px; --snede-l-x: 31px; --snede: var(--snede-l); --snede-x: var(--snede-l-x); /* --- het gat ------------------------------------------------------------- Een scheidingslijn is altijd onderbroken, altijd op dezelfde plaats. Vaste plek betekent dat je het als ritme herkent en niet als toeval. */ --gat-van: 41%; --gat-tot: 45%; /* --- kleur --------------------------------------------------------------- Vijf kleuren met een taak, plus drie neutralen om tekst en lijnen te zetten. Elke kleur heeft precies één taak. De grijzen zijn gekozen op contrast, niet op gevoel: elke tekstkleur haalt 4,5:1 op wit EN op papier. */ --wit: #FFFFFF; /* het verhaal */ --papier: #F2F2EE; /* alles wat data, techniek of bijzaak is */ --geel: #D6E93B; /* het signaal. ALLEEN als vlak, nooit als tekst */ --inkt: #1A1D1A; /* alle tekst */ --inkt-2: #4A5049; /* secundaire tekst */ --grijs: #63685F; /* labels, bijschriften. 5,71:1 op wit, 5,09 op papier */ --lijn: #DFE0D9; /* hairlines */ --alu: #8A9298; /* randen van lege plekken. 3,16:1, genoeg voor een rand */ --zee: #12433B; /* ALLEEN lijnen: kaartroute, technische tekening */ /* --- letters ------------------------------------------------------------- Twee rollen, plus mono voor echte meetwaarden. Nooit een vierde letter. */ --kop: 'Big Shoulders Display','Helvetica Neue',Arial,sans-serif; --ui: 'Archivo','Helvetica Neue',Arial,sans-serif; --mono: 'IBM Plex Mono',ui-monospace,monospace; /* --- ruimte --------------------------------------------------------------- */ --marge: clamp(20px,5vw,80px); /* zijmarge van de pagina */ --sectie: clamp(80px,12vh,160px); /* verticaal ritme tussen secties */ --ease: cubic-bezier(.16,1,.3,1); } /* ----------------------------------------------------------------------------- 2 · DE SNEDE -------------------------------------------------------------------------- */ /* WAT ZE ZEGT "Dit vlak is uit iets groters gesneden." WAAR WEL Alleen op een VLAK dat over iets anders ligt: het tekstvlak over de film, het aftelvlak, een wit vlak over een foto, het gele aftelblok. OOK WEL, sinds juli 2026 Een beeld in een horizontale strook. Een strook is een filmrol en elk beeld is er een kader uit: dezelfde redenering, dus dezelfde hoek. Eén snede per beeld, altijd dezelfde hoek, altijd rechtsonder. WAAR NIET Nooit op iets kleins dat je aanklikt of invult. Een knop met een schuine hoek is een knop met een defect. Dus niet op: knoppen, invulvelden, tabelcellen, logoplekken, labels, badges, losse foto's binnen de kolom. HOEVEEL Eén snede per vlak, in de hoek die naar het beeld kijkt. Nooit twee hoeken van hetzelfde vlak, nooit vier. */ .t-snede-rb{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--snede)),calc(100% - var(--snede-x)) 100%,0 100%)} .t-snede-lb{clip-path:polygon(0 0,100% 0,100% 100%,var(--snede-x) 100%,0 calc(100% - var(--snede)))} .t-snede-rt{clip-path:polygon(0 0,calc(100% - var(--snede-x)) 0,100% var(--snede),100% 100%,0 100%)} .t-snede-lt{clip-path:polygon(var(--snede-x) 0,100% 0,100% 100%,0 100%,0 var(--snede))} .t-snede-s{--snede:var(--snede-s);--snede-x:var(--snede-s-x)} .t-snede-m{--snede:var(--snede-m);--snede-x:var(--snede-m-x)} .t-snede-l{--snede:var(--snede-l);--snede-x:var(--snede-l-x)} /* Op smal scherm verdwijnt de snede: een vlak dat de volle breedte heeft, is niet meer over iets heen gelegd en heeft dus niets om uit te snijden. */ @media(max-width:820px){ .t-snede-rb,.t-snede-lb,.t-snede-rt,.t-snede-lt{clip-path:none} } /* ----------------------------------------------------------------------------- 3 · HET GAT -------------------------------------------------------------------------- */ /* WAT HET ZEGT "Deze lijn loopt door buiten beeld." Het is de missing piece uit de letters. WAAR WEL Op elke lijn die SCHEIDT: tussen twee secties, tussen twee panelen, boven een kolomkop, de rail van een tijdlijn. WAAR NIET Nooit op een lijn die OMSLUIT. Een kader met een gat is een lek. Dus geen gat in: tabelranden, invulvelden, fotokaders, de rand van een logoplek. HOEVEEL Altijd op dezelfde VERHOUDING van de lijn (41% tot 45%), nooit twee gaten in één lijn. Let op: dat is een verhouding, geen schermpositie. Vier lijnen van verschillende breedte naast elkaar geven dus vier gaten die niet uitlijnen. Dat is de bedoeling: het gat hoort bij de lijn, niet bij het raster. Wat het herkenbaar maakt is de constante verhouding. */ .t-gatlijn{ height:1px;border:0;margin:0; background:linear-gradient(to right, var(--lijn) 0 var(--gat-van), transparent var(--gat-van) var(--gat-tot), var(--lijn) var(--gat-tot) 100%); } /* als bovenrand van een blok, zonder extra element */ .t-gatboven{ background:linear-gradient(to right, var(--lijn) 0 var(--gat-van), transparent var(--gat-van) var(--gat-tot), var(--lijn) var(--gat-tot) 100%) top left/100% 1px no-repeat; } .t-gatlijn--v{ width:1px; background:linear-gradient(to bottom, var(--lijn) 0 var(--gat-van), transparent var(--gat-van) var(--gat-tot), var(--lijn) var(--gat-tot) 100%); } /* op een geel of donker vlak draait de lijnkleur mee */ .t-op-geel .t-gatlijn,.t-op-geel .t-gatboven{--lijn:rgba(26,29,26,.34)} /* ----------------------------------------------------------------------------- 4 · DE MARKERING -------------------------------------------------------------------------- */ /* WANNEER WORDT EEN WOORD GEMARKEERD Alleen het woord waar de campagne op draait. Drie soorten woorden komen in aanmerking, en verder niets: a. het woord dat de belofte is (ALLEEN) b. het getal dat de belofte draagt (3.542) c. de plaats of datum die alles vastlegt (1 NOVEMBER) Nooit een werkwoord. Nooit een tussenwoord. Nooit een hele zin. Nooit twee woorden na elkaar in dezelfde zin. HOEVEEL Maximaal één markering per scherm, maximaal drie op de hele pagina. Twee gele VLAKKEN van formaat tegelijk in beeld mag niet. De primaire knop telt niet mee: die is klein en functioneel. HOE Geel is een VLAK achter de tekst. Geel is nooit een tekstkleur: het haalt geen contrast op wit. */ .t-mark{ background:var(--geel);color:var(--inkt); padding:.02em .14em .05em; box-decoration-break:clone;-webkit-box-decoration-break:clone; } /* ----------------------------------------------------------------------------- 5 · HET MERKTEKEN -------------------------------------------------------------------------- */ /* De O uit het logo: een gebroken ring met twee sneden. Dat is het merkteken. HOEVEEL Precies drie keer op de hele pagina. Eén keer als scroll-aanwijzing in de hero, één keer bij het statement, één keer in de footer. Als het teken boven elke sectie staat, is het geen merkteken meer maar behang. */ .t-o{display:block;width:15px;height:15px;flex:none} .t-o--draait{animation:t-draai 7s linear infinite} @keyframes t-draai{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.t-o--draait{animation:none}} /* ----------------------------------------------------------------------------- 6 · VLAKKEN -------------------------------------------------------------------------- */ /* Wit = het verhaal. Papier = data, techniek, bijzaak. Geel = precies één sectie op de hele pagina (het aftellen) plus de knop. Zee = nooit een vlak, alleen lijnen. Regel: nooit twee opeenvolgende secties met hetzelfde vlak. Het ritme wit → papier → wit → geel is wat de pagina leesbaar houdt. */ .t-wit{background:var(--wit)} .t-papier{background:var(--papier)} .t-op-geel{background:var(--geel);color:var(--inkt)} .t-op-geel .t-grijs{color:rgba(26,29,26,.66)} /* ----------------------------------------------------------------------------- 7 · TYPOGRAFIE -------------------------------------------------------------------------- */ /* DRIE ROLLEN, EN DE TOETS OM TE WETEN WELKE Big Shoulders Display 800 → alles wat je LEEST ALS BEELD. koppen, grote getallen, het citaat. Deze letter is smal en oogt kleiner dan haar maat: nooit als tekstletter gebruiken, nooit onder 24px. Archivo 400-600 → alles wat je LEEST OF AANKLIKT. body, navigatie, knoppen, labels, bijschriften, formulieren. IBM Plex Mono 400-500 → alleen ECHTE MEETWAARDEN. De toets: kan een instrument aan boord dit getal aflezen? Coördinaten, lengte, diepgang, aftelcijfers, tijdstippen. Zo niet, dan Archivo. "3.542" in een kop is geen meetwaarde maar een uitroep: kopletter. NIETS ONDER 17 PX. Navigatie 18. Body 18 tot 20. */ .t-kop{font-family:var(--kop);font-weight:800;line-height:.94;letter-spacing:-.012em; text-wrap:balance} .t-kop--xl{font-size:clamp(3.6rem,11vw,10rem);line-height:.88;letter-spacing:-.03em} .t-kop--l {font-size:clamp(2.6rem,5.4vw,5rem)} .t-kop--m {font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.06} .t-kop--s {font-size:clamp(1.5rem,2.9vw,2.4rem);line-height:1.08} .t-body{font-family:var(--ui);font-weight:400;font-size:clamp(18px,1.2vw,20px); line-height:1.6;color:var(--inkt-2);text-wrap:pretty;max-width:60ch} .t-lead{font-family:var(--ui);font-weight:400;font-size:clamp(21px,1.8vw,26px); line-height:1.5;letter-spacing:-.008em;color:var(--inkt-2);max-width:34ch} .t-label{font-family:var(--ui);font-weight:500;font-size:17px;letter-spacing:.02em; color:var(--grijs);text-transform:none} .t-data{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums; letter-spacing:.02em;font-size:17px} /* Nooit cursief. Wie emfase nodig heeft, gebruikt gewicht of de markering. */ i,em,cite,address{font-style:normal} /* ----------------------------------------------------------------------------- 8 · KNOPPEN -------------------------------------------------------------------------- */ /* Twee soorten, meer niet. Rechte hoeken: een knop is geen vlak dat ergens overheen ligt, dus krijgt hij geen snede. */ .t-btn{display:inline-block;font-family:var(--ui);font-weight:600;font-size:17px; padding:16px 30px;border:1px solid transparent;cursor:pointer; transition:background-color .3s ease,color .3s ease,border-color .3s ease} .t-btn--vol{background:var(--geel);color:var(--inkt)} .t-btn--vol:hover{background:var(--inkt);color:var(--geel)} .t-btn--leeg{border-color:rgba(26,29,26,.32);color:var(--inkt);background:none} .t-btn--leeg:hover{border-color:var(--inkt)} .t-btn:focus-visible{outline:2px solid var(--inkt);outline-offset:3px} .t-op-geel .t-btn--vol{background:var(--inkt);color:var(--geel)} /* ----------------------------------------------------------------------------- 9 · BEELD -------------------------------------------------------------------------- */ /* Foto's staan in volle kleur. Geen grijssluier, geen duotone, geen tint: de boot is wit aluminium onder een echte lucht en dat mag je zien. Eén beeld per scherm mag de volle breedte nemen. De rest blijft binnen de marge. */ .t-foto{display:block;width:100%;height:auto; filter:contrast(1.05) saturate(1.08) brightness(1.01)} /* Een technische tekening kent precies twee diktes: de vorm (2 px) en de maatvoering (1,2 px). Een derde dikte bestaat niet. Selectie gebeurt met een geel vlak en een dikkere inktlijn, nooit met een nieuwe kleur. */ .t-tek .vorm{fill:none;stroke:var(--inkt);stroke-width:2; stroke-linejoin:round;stroke-linecap:round} .t-tek .maat{fill:none;stroke:var(--alu);stroke-width:1.2} .t-tek .aan .vorm{stroke-width:4} .t-tek .aan [fill]{fill:var(--geel)} .t-foto--vol{width:100vw;margin-left:calc(50% - 50vw);max-width:none} /* ----------------------------------------------------------------------------- 10 · BEWEGING -------------------------------------------------------------------------- */ /* De scrollfilm is de enige echte animatie op de pagina. Al de rest is één beweging: 18 px omhoog en opkomen. Hoogstens drie vertragingsstappen. */ .t-rv{opacity:0;transform:translateY(18px); transition:opacity .8s ease,transform .9s var(--ease)} .t-rv.in{opacity:1;transform:none} .t-rv.d1{transition-delay:.08s} .t-rv.d2{transition-delay:.18s} .t-rv.d3{transition-delay:.28s} @media(prefers-reduced-motion:reduce){ .t-rv{opacity:1;transform:none;transition:none} } /* ----------------------------------------------------------------------------- 11 · RASTER -------------------------------------------------------------------------- */ .t-marge{padding-left:var(--marge);padding-right:var(--marge)} .t-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,44px)} .t-sectie{padding-top:var(--sectie);padding-bottom:var(--sectie)} /* Val: gebruik nooit de padding-shorthand op een element dat ook .t-marge heeft. padding:80px 0 wist de zijmarges. */ /* ----------------------------------------------------------------------------- 11b · INHOUD VAN IEMAND ANDERS -------------------------------------------------------------------------- */ /* Een kaart of tracker in een iframe komt met zijn eigen kleuren en knoppen en daar kan je niets aan veranderen. Drie dingen zijn verplicht: 1. een EIGEN SCHILD erover, met een knop in onze vormtaal. Een kaart die de scroll opvangt, breekt een pagina die op scroll draait. Pas na een klik wordt de kaart bruikbaar. 2. een FILTER op het iframe, zodat vreemde kleuren in ons palet vallen. 3. een EIGEN KADER en eigen tekst eromheen. De kop, de gegevens en de uitleg zijn van ons. En wees eerlijk over wat het niet kan: AIS reikt 40 tot 60 zeemijl vanaf de kust. Wat je ziet is de LAATST GEMELDE positie, niet waar hij nu is. */ .t-inbed{position:relative;border:1px solid var(--lijn);background:var(--papier)} .t-inbed iframe{display:block;width:100%;border:0; filter:grayscale(.6) contrast(1.03)} .t-inbed__schild{position:absolute;inset:0;display:flex;align-items:center; justify-content:center;background:rgba(242,242,238,.72); -webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px); transition:opacity .3s ease} .t-inbed.aan .t-inbed__schild{opacity:0;pointer-events:none} /* ----------------------------------------------------------------------------- 12 · VERBODEN -------------------------------------------------------------------------- */ /* Deze regels staan hier zodat een afwijking meteen zichtbaar wordt in code review, niet pas op het scherm. NOOIT 45° of 30° als hoek. De merkhoek is 25,5° en niets anders. NOOIT geel als tekstkleur, geel als lijn, geel als vlak op een foto. Wel toegestaan: de markering achter EEN woord op beeld, mits dat deel van het beeld door een wash rustig is gemaakt. NOOIT twee gele vlakken tegelijk in beeld. NOOIT een gat in een lijn die iets omsluit. NOOIT een snede op een knop, een invulveld of een tabelcel. NOOIT een afgeronde hoek op een vlak, een knop, een veld of een kader. Sinds juli 2026 krijgen FOTO'S wel 5 px ronding. Dat maakt de snede scherper, want zij is dan het enige harde ding op de pagina. NOOIT een kleurverloop als lijn of als rand. NOOIT een gekleurde zijrand (border-left in de accentkleur). NOOIT cursief. NOOIT een em-dash. Gebruik een punt, een komma of haakjes. NOOIT emoji. NOOIT een donkere basiskleur. NOOIT het merkteken boven elke sectie. NOOIT een label boven elke sectie. Een label staat alleen boven een sectie waar de navigatie naartoe wijst. Vandaag zijn dat er vijf. NOOIT een titel van meer dan drie regels. NOOIT tekst onder 17 px. NOOIT een schaduw, behalve onder een element dat echt zweeft. */ /* Het vertaalvoorbehoud. Staat ALLEEN op /fr en /en, gezet door bouw_fr.py en bouw_en.py; op de Nederlandse pagina bestaat dit element niet en dan doet deze regel niets. WAAROM HET ER STAAT. Die twee pagina's zijn machinaal vertaald en zeggen dat nergens, en er staan sponsorformules en voorwaarden op. Een vertaalfout in een formule is geen taalkwestie maar een aansprakelijkheidskwestie, en dan hoort er te staan welke versie geldt. WAAROM HET ER ZO STAAT. Geen kader, geen icoon, geen tweede kleur: dan leest het als een waarschuwing over de inhoud in plaats van als een voetnoot over de taal. Eén regel in de gedempte inkt, onder de streep, waar een lezer die het wil weten hem vindt en een lezer die het niet zoekt er niet over struikelt. */ html body .foot__vert{margin:16px 0 0;font-family:var(--ui);font-weight:400; font-size:17px;line-height:1.5;color:var(--mute);max-width:66ch}