/* ═══════════════════════════════════════════════════════════
furō — brand tokens v1.0
Drop-in bestand voor elk nieuw project (web, app, prototype).
Bevat: design tokens + de kern-merkelementen (macron, wordmark,
label, button, tag). Bewust klein gehouden — de rest bouw je
per project, mét deze tokens.
═══════════════════════════════════════════════════════════ */
:root {
/* ── kleur — kern ── */
--furo-black: #0D0D0D;
--furo-white: #FFFFFF;
--furo-thunder: #2B2B2B; /* bodytekst op licht */
--furo-graphite: #4A4A4A; /* secundaire tekst */
--furo-stone: #9A9A9A; /* labels, meta, placeholders */
--furo-fog: #E4E4E4; /* lijnen, borders */
--furo-snow: #F6F6F6; /* afwisselende secties */
/* ── kleur — signaal (max. 1 blikvanger per compositie) ── */
--furo-orange: #E08227; /* accenten & CTA-vlakken */
--furo-orange-bright: #ED9440; /* hover van oranje */
--furo-orange-deep: #B8681C; /* oranje TEKST op wit (contrast) */
--furo-orange-soft: rgba(224,130,39,0.12);
/* ── kleur — functioneel (alleen systeem-feedback) ── */
--furo-ok: #3D8B62;
--furo-error: #C24040;
/* ── typografie ── */
--furo-font: 'HN', 'TeX Gyre Heros', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--furo-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
/* gewichten: 300 Light (koppen) · 400 Roman (tekst) · 600 Heavy (alleen CTA) */
/* ── ruimte (alleen deze waarden gebruiken) ── */
--furo-s1: 4px;
--furo-s2: 8px;
--furo-s3: 16px;
--furo-s4: 24px;
--furo-s5: 40px;
--furo-s6: 64px;
--furo-s7: 96px;
/* ── vorm & motion ── */
--furo-r: 0px; /* optioneel 4px op knoppen — hier bewust vierkant, matcht de referentie-doc */
--furo-dur-fast: 0.18s; /* hovers, kleur */
--furo-dur-base: 0.3s; /* transforms */
--furo-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--furo-ease-bump: cubic-bezier(0.34, 1.56, 0.64, 1); /* de macron-bump */
/* ── z-index schaal (nooit losse waarden verzinnen) ── */
--z-base: 0; /* normale flow */
--z-raised: 10; /* hover-kaarten, dropdowns, tooltips */
--z-menu: 190; /* fullscreen mobiel menu */
--z-nav: 200; /* fixed navigatie */
--z-modal: 300; /* dialogen — max. één tegelijk */
--z-toast: 400; /* meldingen; skip-link = 999 */
/* ── semantische tokens (schrijf componenten hiertegen) ── */
--furo-bg: var(--furo-white);
--furo-bg-raise: var(--furo-snow);
--furo-line: var(--furo-fog);
--furo-text: var(--furo-black);
--furo-text-soft: var(--furo-thunder);
--furo-text-faint: var(--furo-stone);
--furo-orange-text: var(--furo-orange-deep); /* oranje tekst op licht = Deep */
}
/* ── dark mode: remap via data-theme, nooit per component hexen ── */
[data-theme="dark"] {
--furo-bg: #0D0D0D;
--furo-bg-raise: #16191A;
--furo-line: rgba(255,255,255,0.1);
--furo-text: #F4F4F3; /* nooit puur wit */
--furo-text-soft: rgba(255,255,255,0.64);
--furo-text-faint: rgba(255,255,255,0.48);
--furo-orange-text: var(--furo-orange); /* op donker mag vol oranje */
}
/* ── breakpoints (referentie — CSS vars werken niet in media queries) ──
≥1180px max container 1180, 12 kolommen, sectie-padding 96px
<900px tablet grids 4→2 kolommen
<720px mobiel hamburger-nav, sectie-padding 64px, grids stapelen
<520px smal alles één kolom, tabellen scrollbaar
Alleen deze vier. Raakvlakken ≥44×44px op touch. */
/* ── fonts (pas paden aan per project) ──
TeX Gyre Heros (GUST Font License) vervangt Helvetica Neue LT Pro: zie
assets/furo-site.css voor de toelichting en de echte @font-face-blokken.
Geen light-gewicht beschikbaar, dus 300 draait op de Regular-snit.
@font-face { font-family:'HN'; src:url('fonts/texgyreheros-regular.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'HN'; src:url('fonts/texgyreheros-regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'HN'; src:url('fonts/texgyreheros-bold.woff2') format('woff2'); font-weight:600; font-display:swap; }
*/
/* ═══ macron — het merkelement ═══
Altijd smal (60% letterbreedte), altijd currentColor.
Nooit oranje, nooit uitgerekt.
Gebruik: furo */
.macron { position: relative; display: inline-block; line-height: 1; }
.macron::before {
content: ''; position: absolute;
left: 20%; right: 20%; top: 0.16em; height: 0.08em;
background: currentColor; border-radius: 1px;
}
/* cap-variant: op cijfers en kapitalen (kap-hoogte) moet de streep erbóven — bv. 4ō4 */
.macron-cap::before { top: -0.18em; }
/* bump-animatie — alleen hero of laad-moment, nooit 2x tegelijk in beeld */
/* Desktop is exact de oorspronkelijke beweging: 2,6s, uitslag 0,09em, en een
ruime aanloop van 60% tot 100% van de cyclus (ruwweg 1 seconde). Die is
eerder een keer ingekort tot een klein tikje van 0,05em en dat was fout.
Op een telefoon staat het woordmerk dichter op je oog en kwam hij te vaak
terug, dus daar is alleen de pauze langer. De bewéging is identiek: dezelfde
uitslag, dezelfde ~1 seconde, alleen uitgedrukt in het percentage dat bij een
cyclus van 7s hoort. Zo blijft het dezelfde bump, hij komt alleen minder. */
.macron-bump::before { animation: furo-bump 2.6s var(--furo-ease-bump) infinite; }
@keyframes furo-bump {
0%, 60%, 100% { transform: translateY(0); }
75% { transform: translateY(-0.09em); }
88% { transform: translateY(0.015em); }
}
/* Op een telefoon dezelfde beweging, alleen een langere pauze ertussen.
Hier heeft een tijdje een "rustiger" variant gestaan: easing per keyframe,
geen terugveer, een val van 595ms in plaats van 125ms. Die was bedoeld tegen
het schudden dat Joris op zijn iPhone zag. Dat schudden bleek iets heel
anders te zijn: op zijn toestel stond "verminder beweging" aan, en het
onvolledige fragment onderaan dit bestand liet de animatie daardoor
honderdduizend keer per seconde herhalen. Zodra dat gerepareerd was en hij de
varianten naast elkaar kon zien, koos hij deze, de oorspronkelijke.
Dus: niets aan veranderen, en zeker niet nogmaals "gladstrijken". Het
doorschieten van de veer-easing tussen elk keyframepaar is hier gewenst
gedrag en geen bug. Zie [[technique_ios_web_animation_traps]] punt 1 voor
waaróm dat doorschiet, mocht het ooit ergens anders wél storen. */
@media (max-width: 720px) {
.macron-bump::before { animation-name: furo-bump-traag; animation-duration: 7s; }
}
@keyframes furo-bump-traag {
0%, 85.1%, 100% { transform: translateY(0); }
90.7% { transform: translateY(-0.09em); }
95.5% { transform: translateY(0.015em); }
}
/* ═══ wordmark ═══ */
.wordmark {
font-family: var(--furo-font); font-weight: 300;
letter-spacing: -0.01em; line-height: 1; text-decoration: none;
}
.wm-suffix { font-size: 0.42em; font-weight: 400; opacity: 0.5; letter-spacing: 0.04em; margin-left: 0.5em; }
/* ═══ label — mono eyebrow met vierkantje ═══
Het merkteken vóór een label is een klein gevuld vierkantje, geen streepje.
Het herhaalt de vierkante chip-vorm (.furo-chip en de knopen in de hero-
animatie) en het leest niet als een gedachtestreepje. ═══ */
.furo-label {
font-family: var(--furo-mono); font-size: 11px;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--furo-stone); display: inline-flex; align-items: center; gap: 8px;
}
.furo-label::before { content: ''; width: 5px; height: 5px; background: var(--furo-orange-deep); flex-shrink: 0; }
/* ═══ marking — oranje tracked tekst (enige plek voor oranje tekst) ═══ */
.furo-marking {
font-family: var(--furo-mono); font-size: 13px;
letter-spacing: 0.28em; text-transform: uppercase;
color: var(--furo-orange-deep); /* op donker: var(--furo-orange) */
}
/* ═══ button ═══ */
.furo-btn {
font-family: var(--furo-font); font-weight: 600; font-size: 13px;
letter-spacing: 0.04em; padding: 14px 26px; cursor: pointer;
border: 1px solid var(--furo-orange); background: var(--furo-orange); color: var(--furo-black);
border-radius: var(--furo-r);
transition: background var(--furo-dur-base) var(--furo-ease-out),
transform var(--furo-dur-fast) var(--furo-ease-out);
}
.furo-btn:hover { background: var(--furo-orange-bright); border-color: var(--furo-orange-bright); transform: translateY(-2px); }
.furo-btn:active { transform: translateY(0) scale(0.98); }
.furo-btn:disabled { background: var(--furo-fog); border-color: var(--furo-fog); color: var(--furo-stone); cursor: not-allowed; transform: none; }
.furo-btn.ghost { background: transparent; color: currentColor; border-color: currentColor; }
/* ═══ tag ═══ */
.furo-tag {
font-family: var(--furo-mono); font-size: 11px;
letter-spacing: 0.14em; text-transform: uppercase;
border: 1px solid var(--furo-fog); padding: 7px 13px;
display: inline-flex; align-items: center; gap: 8px;
}
.furo-tag::before { content: ''; width: 5px; height: 5px; background: var(--furo-orange); flex-shrink: 0; }
/* ═══ samenwerkings-animaties — tools die koppelen ═══
Flow: puls reist over een lijn tussen twee chips.
HTML: tussen twee .furo-chip's.
Max. één flow-keten per pagina. */
.furo-chip {
width: 52px; height: 52px; border: 1px solid var(--furo-fog);
position: relative; display: inline-flex; align-items: center; justify-content: center;
font-family: var(--furo-font); font-size: 17px; font-weight: 300; background: var(--furo-white);
}
.furo-chip::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 2.5px; background: var(--furo-orange); }
/* Bewust NIET infinite: een eeuwig pulserende keten in beeld leest als storing,
zeker op een telefoon. Drie keer laat zien wat er gebeurt en valt daarna stil.
.speelt wordt door furo-site.js gezet zolang de keten écht in beeld staat en
weer weggehaald zodra je wegscrolt, zodat de keten opnieuw afspeelt telkens
als je ernaar kijkt. Eerder hing dit aan .in van de reveal, en die slaat al aan
bij 15% zichtbaarheid en haakt zichzelf daarna af: op een telefoon was de
animatie dan al afgelopen voordat je er was, en kwam ze nooit meer terug. */
.furo-chip.receive::before { animation: none; }
.speelt .furo-chip.receive::before {
animation: furo-barpulse 1.4s linear 4;
animation-delay: var(--keten-vertraging, 0s);
}
@keyframes furo-barpulse { 0%,42% { opacity: 1; } 50% { opacity: 0.2; } 58%,100% { opacity: 1; } }
.furo-flow { flex: 1; height: 2px; background: var(--furo-fog); position: relative; overflow: hidden; }
/* De puls is een verloop over de volle breedte van het spoor, met een oranje
blokje van 26px in het midden. Dat is bewust geen los blokje van 26px meer:
die reisde op `left`, en `left` is een layout-eigenschap. Het ontwerpsysteem
verbiedt dat om een reden. Safari geeft zo'n animatie geen eigen laag en
berekent per beeldje de opmaak opnieuw, en juist op iOS is dat het eerste wat
sneuvelt zodra er verderop iets zwaars staat. Met een verloop kan de hele
laag met `transform` verschuiven: van volledig links buiten beeld naar
volledig rechts buiten beeld, zonder één layoutberekening. */
.furo-flow::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg,
transparent 0, transparent calc(50% - 13px),
var(--furo-orange) calc(50% - 13px), var(--furo-orange) calc(50% + 13px),
transparent calc(50% + 13px), transparent 100%);
transform: translate3d(-100%, 0, 0);
animation: none;
}
.speelt.furo-flow::before, .speelt .furo-flow::before {
animation: furo-flow 1.4s linear 4;
animation-delay: var(--keten-vertraging, 0s);
will-change: transform;
}
@keyframes furo-flow {
from { transform: translate3d(-100%, 0, 0); }
to { transform: translate3d(100%, 0, 0); }
}
/* Keten van 2+ lijnen: zet --keten-vertraging: 1s op de tweede schakel, zodat de
puls doorreist in plaats van gelijktijdig te vertrekken. Let op: dit moet een
custom property zijn en geen inline animation-delay. De animatie draait op
::before, en een inline stijl op het element bereikt een pseudo-element niet;
een custom property erft er wél naartoe. Eerder stond hier het inline geval,
en daardoor liepen beide pulsen stilletjes gelijk op. */
/* Sync: twee strepen komen samen in het midden en lossen op */
.furo-sync { position: relative; height: 2px; background: var(--furo-fog); overflow: hidden; }
.furo-sync::before, .furo-sync::after { content: ''; position: absolute; top: 0; width: 20px; height: 100%; background: var(--furo-orange); border-radius: 1px; }
.furo-sync::before { animation: furo-sync-l 2.4s var(--furo-ease-out) infinite; }
.furo-sync::after { animation: furo-sync-r 2.4s var(--furo-ease-out) infinite; }
@keyframes furo-sync-l { 0% { left: -20px; opacity: 1; } 55% { left: calc(50% - 21px); opacity: 1; } 70%,100% { left: calc(50% - 21px); opacity: 0; } }
@keyframes furo-sync-r { 0% { right: -20px; opacity: 1; } 55% { right: calc(50% - 21px); opacity: 1; } 70%,100% { right: calc(50% - 21px); opacity: 0; } }
/* ═══ scroll-reveal systeem ═══
.reveal op sectiekoppen, .stagger op grids (max 8 kinderen).
Activeer met:
const io = new IntersectionObserver(es => es.forEach(e => {
if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
}), { threshold: 0.15 });
document.querySelectorAll('.reveal, .stagger').forEach(el => io.observe(el)); */
.reveal { opacity: 0; transform: translateY(24px); filter: blur(6px);
transition: opacity .8s var(--furo-ease-out), transform .8s var(--furo-ease-out), filter .8s var(--furo-ease-out); }
.reveal.in { opacity: 1; transform: none; filter: none; }
.stagger > * { opacity: 0; transform: translateY(18px);
transition: opacity .6s var(--furo-ease-out), transform .6s var(--furo-ease-out); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1) { transition-delay: 0s; }
.stagger.in > *:nth-child(2) { transition-delay: .07s; }
.stagger.in > *:nth-child(3) { transition-delay: .14s; }
.stagger.in > *:nth-child(4) { transition-delay: .21s; }
.stagger.in > *:nth-child(5) { transition-delay: .28s; }
.stagger.in > *:nth-child(6) { transition-delay: .35s; }
.stagger.in > *:nth-child(7) { transition-delay: .42s; }
.stagger.in > *:nth-child(8) { transition-delay: .49s; }
/* ═══ focus & motion-voorkeuren ═══ */
:focus-visible { outline: 2px solid var(--furo-orange); outline-offset: 3px; }
/* ═══ verminderde beweging ═══
Hier zat een echte fout in, en die was op een desktop onzichtbaar.
Er stond alleen `animation-duration: 0.01ms !important`. Dat is een veel
gekopieerd fragment, maar het is onvolledig: een animatie met
`animation-iteration-count: infinite` wordt daardoor niet stilgezet maar juist
honderdduizend keer per seconde herhaald. Gemeten op deze site: het streepje
van het woordmerk sprong per beeldje tussen 0 en -1,98px. Iemand die
"verminder beweging" aanzet omdat hij van beweging misselijk wordt, kreeg dus
een tríllend woordmerk in plaats van een stilstaand.
De ontbrekende regel is `animation-iteration-count: 1`: dan loopt een
eindeloze animatie één keer af in 0,01ms en staat hij daarna stil.
De 0,01ms zelf blijft nodig, zodat een animatie zijn eindstand bereikt en een
`animationend` nog afgaat.
De drie sierlijke, eindeloze animaties zetten we bovendien expliciet uit, met
hun eindstand erbij, want "één keer heel snel afspelen" is voor een bump nog
altijd een sprongetje. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0ms !important;
transition-duration: 0.01ms !important;
}
.reveal, .stagger > * { opacity: 1; transform: none; filter: none; }
/* Alleen de animatie uitzetten, niet ook de eigenschap zelf vastzetten. Een
`transform: none !important` hiernaast zou vanzelfsprekend lijken maar is
overbodig (zonder animatie staat het element toch al op zijn ruststand) en
schadelijk: een belangrijke declaratie wint in de cascade van een lopende
animatie, dus daarmee is de beweging nergens meer aan te zetten, ook niet
bewust op een proefpagina. */
.macron-bump::before { animation: none !important; }
.furo-flow::before { animation: none !important; }
.furo-chip.receive::before, .speelt .furo-chip.receive::before { animation: none !important; opacity: 1 !important; }
}