/* m-kloosterman.nl — the whole stylesheet. * * Theme: every token is declared ONCE, as light-dark(, ). The value * that wins follows the `color-scheme` property, so the OS preference needs no * media query. The manual override just flips `color-scheme` on :root (see the * two rules under the token block), which is why a saved theme survives with no * JS beyond the one-line snippet. * There IS a second copy of the palette, but only inside the @supports block for * pre-2024 engines — modern browsers never read it. Treat the light-dark() block * as the source of truth and regenerate that copy from it. */ /* ---------- fonts ---------- */ /* Self-hosted, not Google CDN (GDPR). See README. JetBrains Mono is static 400 — a weight range here would give faux bold. */ @font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:400 700; font-display:swap; src:url('assets/fonts/space-grotesk-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- theme tokens ---------- */ :root{ color-scheme:light dark; --bg: light-dark(#fbfbfc, #111114); --text: light-dark(#1c1c22, #e7e7ea); --strong: light-dark(#0a0a0f, #f2f2f4); --muted: light-dark(#55555f, #a2a2a8); --dim: light-dark(#65656f, #9a9aa2); --faint: light-dark(#70707a, #82828b); --monodim: light-dark(#6d6d76, #8b8b93); --border: light-dark(#e7e7ec, #23232a); --border-soft: light-dark(#ececf0, #1e1e24); --border-nav: light-dark(#d8d8de, #34343b); --badge-border: light-dark(#e2e2e8, #26262c); --chip-border: light-dark(#e2e2e8, #2c2c33); --surface: light-dark(#ffffff, #151518); --surface-2: light-dark(#ffffff, #161619); --surface-3: light-dark(#f4f4f6, #1b1b1f); --surface-hover: light-dark(#f7f7f9, #18181c); --dot: light-dark(#c8c8d0, #3a3a42); --accent: light-dark(#15803d, #4ade80); --accent-ink: light-dark(#ffffff, #06231a); --btn-bg: light-dark(#18181b, #e7e7ea); --btn-text: light-dark(#ffffff, #111114); --btn-hover: light-dark(#000000, #ffffff); --sec-text: light-dark(#3f3f46, #c9c9cf); --sec-border: light-dark(#d8d8de, #2c2c33); --sec-hover: light-dark(#a1a1aa, #4a4a54); --link-hover: light-dark(#000000, #ffffff); --code: light-dark(#3f3f46, #c9c9cf); /* Illustration tokens — the 7 colours the two SVG variants differed in. */ --ill-surface-deep: light-dark(#f4f4f7, #26262c); --ill-surface: light-dark(#ededf1, #2a2a30); --ill-surface-raised: light-dark(#dcdce4, #33333b); --ill-ink-soft: light-dark(#2a2a30, #d0d0d4); --ill-ink: light-dark(#3a3a46, #cfd3d8); --ill-ink-strong: light-dark(#26262c, #e7e7ea); --ill-accent: light-dark(#16a34a, #4ade80); /* light-dark() returns a colour, so it slots into shadows and gradients too. */ --shadow:0 24px 60px light-dark(rgba(0,0,0,.10), rgba(0,0,0,.35)); --grad-card:linear-gradient(160deg, light-dark(#ffffff,#17171b), light-dark(#f4f4f6,#141417)); --grad-about:radial-gradient(120% 140% at 100% 0%, light-dark(#eaf7ee,#1c1c22), light-dark(#ffffff,#141417)); } /* The manual override. Nothing else to restate — every token above re-resolves. */ :root[data-theme="light"]{color-scheme:light} :root[data-theme="dark"] {color-scheme:dark} /* Fallback for engines without light-dark() (pre-Chrome 123 / Safari 17.5 / Firefox 120, i.e. older than ~mid-2024). Modern browsers skip this block entirely — @supports is false — so light-dark() above stays the single source of truth. Only edit this copy when you change a colour; better still, regenerate it from the block above. Without it those engines drop every token: layout and text survive (color-scheme is much older and still applies), but borders, accents, button fills and the illustration tones all vanish. */ @supports not (color: light-dark(#fff, #000)){ :root{ --bg:#fbfbfc; --text:#1c1c22; --strong:#0a0a0f; --muted:#55555f; --dim:#65656f; --faint:#70707a; --monodim:#6d6d76; --border:#e7e7ec; --border-soft:#ececf0; --border-nav:#d8d8de; --badge-border:#e2e2e8; --chip-border:#e2e2e8; --surface:#ffffff; --surface-2:#ffffff; --surface-3:#f4f4f6; --surface-hover:#f7f7f9; --dot:#c8c8d0; --accent:#15803d; --accent-ink:#ffffff; --btn-bg:#18181b; --btn-text:#ffffff; --btn-hover:#000000; --sec-text:#3f3f46; --sec-border:#d8d8de; --sec-hover:#a1a1aa; --link-hover:#000000; --code:#3f3f46; --ill-surface-deep:#f4f4f7; --ill-surface:#ededf1; --ill-surface-raised:#dcdce4; --ill-ink-soft:#2a2a30; --ill-ink:#3a3a46; --ill-ink-strong:#26262c; --ill-accent:#16a34a; --shadow:0 24px 60px rgba(0,0,0,.10); --grad-card:linear-gradient(160deg,#ffffff,#f4f4f6); --grad-about:radial-gradient(120% 140% at 100% 0%,#eaf7ee,#ffffff); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#111114; --text:#e7e7ea; --strong:#f2f2f4; --muted:#a2a2a8; --dim:#9a9aa2; --faint:#82828b; --monodim:#8b8b93; --border:#23232a; --border-soft:#1e1e24; --border-nav:#34343b; --badge-border:#26262c; --chip-border:#2c2c33; --surface:#151518; --surface-2:#161619; --surface-3:#1b1b1f; --surface-hover:#18181c; --dot:#3a3a42; --accent:#4ade80; --accent-ink:#06231a; --btn-bg:#e7e7ea; --btn-text:#111114; --btn-hover:#ffffff; --sec-text:#c9c9cf; --sec-border:#2c2c33; --sec-hover:#4a4a54; --link-hover:#ffffff; --code:#c9c9cf; --ill-surface-deep:#26262c; --ill-surface:#2a2a30; --ill-surface-raised:#33333b; --ill-ink-soft:#d0d0d4; --ill-ink:#cfd3d8; --ill-ink-strong:#e7e7ea; --ill-accent:#4ade80; --shadow:0 24px 60px rgba(0,0,0,.35); --grad-card:linear-gradient(160deg,#17171b,#141417); --grad-about:radial-gradient(120% 140% at 100% 0%,#1c1c22,#141417); } } :root[data-theme="dark"]{ --bg:#111114; --text:#e7e7ea; --strong:#f2f2f4; --muted:#a2a2a8; --dim:#9a9aa2; --faint:#82828b; --monodim:#8b8b93; --border:#23232a; --border-soft:#1e1e24; --border-nav:#34343b; --badge-border:#26262c; --chip-border:#2c2c33; --surface:#151518; --surface-2:#161619; --surface-3:#1b1b1f; --surface-hover:#18181c; --dot:#3a3a42; --accent:#4ade80; --accent-ink:#06231a; --btn-bg:#e7e7ea; --btn-text:#111114; --btn-hover:#ffffff; --sec-text:#c9c9cf; --sec-border:#2c2c33; --sec-hover:#4a4a54; --link-hover:#ffffff; --code:#c9c9cf; --ill-surface-deep:#26262c; --ill-surface:#2a2a30; --ill-surface-raised:#33333b; --ill-ink-soft:#d0d0d4; --ill-ink:#cfd3d8; --ill-ink-strong:#e7e7ea; --ill-accent:#4ade80; --shadow:0 24px 60px rgba(0,0,0,.35); --grad-card:linear-gradient(160deg,#17171b,#141417); --grad-about:radial-gradient(120% 140% at 100% 0%,#1c1c22,#141417); } } /* ---------- reset & base ---------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--bg);color:var(--text); font-family:'Space Grotesk',system-ui,sans-serif; -webkit-font-smoothing:antialiased; min-height:100vh; transition:background .25s,color .25s; } a{color:var(--text);text-decoration:none} a:hover{color:var(--link-hover)} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} /* UA outline vanishes against the dark primary button. */ :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px} [tabindex="-1"]:focus{outline:none} /* ---------- layout ---------- */ .wrap{max-width:1120px;margin:0 auto;padding:0 32px} .sec{padding:104px 0 24px} .grid3{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .grid2{margin-top:44px;display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:stretch} .skip{position:absolute;left:-9999px;top:0} .skip:focus{left:20px;top:20px;z-index:10;background:var(--surface);color:var(--strong);border:1px solid var(--border-nav);border-radius:8px;padding:10px 16px} /* ---------- nav ---------- */ .nav{display:flex;align-items:center;justify-content:space-between;height:88px} .brand{display:flex;align-items:center;gap:11px;color:var(--strong)} .icon{display:block;flex-shrink:0} .brand-name{font-weight:600;font-size:18px;letter-spacing:-0.4px;white-space:nowrap;color:var(--strong)} .nav-right{display:flex;align-items:center;gap:28px;font-size:15px;color:var(--muted)} .theme-btn{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted);border:1px solid var(--border-nav);border-radius:8px;padding:7px 12px} .theme-btn:hover{color:var(--text);border-color:var(--sec-hover)} .nav-cta{padding:9px 18px;border:1px solid var(--border-nav);border-radius:8px;color:var(--text)} .nav-cta:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} /* ---------- hero ---------- */ .hero{padding:80px 0 64px;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center} .badge{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--monodim);border:1px solid var(--badge-border);border-radius:999px;padding:7px 15px;margin-bottom:34px} .badge-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)} .hero-title{font-size:48px;line-height:1.08;font-weight:700;letter-spacing:-1.5px;max-width:16ch;color:var(--strong)} .hero-lead{margin-top:26px;font-size:19px;line-height:1.55;color:var(--muted);max-width:52ch} .hero-actions{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px;align-items:center} .hero-art{display:flex;justify-content:center;animation:floaty 7s ease-in-out infinite} .hero-img{width:100%;height:auto;max-width:400px} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:10px;font-size:16px;border-radius:10px} .btn-primary{background:var(--btn-bg);color:var(--btn-text);font-weight:600;padding:15px 26px} .btn-primary:hover{background:var(--btn-hover)} .btn-secondary{color:var(--sec-text);padding:15px 20px;border:1px solid var(--sec-border)} .btn-secondary:hover{border-color:var(--sec-hover);color:var(--strong)} .about-cta{margin-top:32px;padding:16px 30px} /* ---------- terminal ---------- */ .terminal{position:relative;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);overflow:hidden;box-shadow:var(--shadow)} .terminal-glow{position:absolute;top:-40%;right:-10%;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,var(--accent),transparent 70%);opacity:.10;pointer-events:none} .term-bar{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--border);background:var(--surface-3)} .term-dot{width:12px;height:12px;border-radius:50%;background:var(--dot)} .term-path{margin-left:10px;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--faint)} .term-body{padding:26px 28px;font-family:'JetBrains Mono',monospace;font-size:14.5px;line-height:2.05;color:var(--code)} .term-cmd{margin-top:10px} .term-prompt{color:var(--accent)} .term-out{color:var(--monodim)} .term-ok{color:var(--accent)} .term-cursor{display:inline-block;width:9px;height:17px;background:var(--accent);margin-left:6px;vertical-align:-3px;animation:blink 1.1s step-end infinite} /* ---------- sections ---------- */ .eyebrow{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent);letter-spacing:1px} .sec-title{font-size:38px;font-weight:700;letter-spacing:-1px;margin-top:14px;max-width:20ch;color:var(--strong)} .svc-card{border:1px solid var(--border);border-radius:14px;padding:26px;background:var(--surface);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .svc-card:hover{border-color:var(--accent);background:var(--surface-hover);transform:translateY(-4px);box-shadow:var(--shadow)} .svc-num{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent)} .svc-title{font-size:20px;font-weight:600;margin-top:16px;color:var(--strong)} .svc-body{margin-top:11px;font-size:15px;line-height:1.6;color:var(--dim)} .approach-card{border:1px solid var(--border);border-radius:16px;padding:38px;background:var(--grad-card)} .approach-title{font-size:30px;font-weight:700;letter-spacing:-0.5px;color:var(--strong);max-width:18ch} .approach-body{margin-top:18px;font-size:16px;line-height:1.65;color:var(--dim)} .chips{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px} .tech-chip{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--sec-text);border:1px solid var(--chip-border);border-radius:8px;padding:8px 13px;background:var(--surface-3)} .tech-chip:hover{border-color:var(--accent);color:var(--accent)} .principles{display:grid;gap:18px} .principle{border:1px solid var(--border);border-radius:14px;padding:24px 26px;background:var(--surface)} .principle-title{font-size:18px;font-weight:600;color:var(--strong)} .principle-body{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--dim)} /* ---------- about ---------- */ .about-sec{padding:104px 0} .about{border:1px solid var(--border);border-radius:18px;padding:56px;background:var(--grad-about);display:grid;grid-template-columns:1fr .7fr;gap:40px;align-items:center} .about-title{font-size:40px;font-weight:700;letter-spacing:-1px;max-width:20ch;color:var(--strong)} .about-body{margin-top:20px;font-size:18px;line-height:1.6;color:var(--muted);max-width:46ch} .about-art{display:flex;justify-content:center;animation:floaty 8s ease-in-out infinite} .about-img{width:100%;height:auto;max-width:300px} /* ---------- footer ---------- */ .footer{border-top:1px solid var(--border-soft);padding:34px 0 60px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;color:var(--faint);font-size:14px} .footer-brand{display:flex;align-items:center;gap:9px;color:var(--muted)} .footer-name{font-weight:600;font-size:15px;letter-spacing:-0.3px;white-space:nowrap} .footer-contact{font-family:'JetBrains Mono',monospace} /* ---------- utilities ---------- */ /* Email ships reversed; this paints it round the right way. The reversed node is aria-hidden — bidi-override reorders glyphs, not the accessibility tree — and a .sr-only sibling carries the address for assistive tech. See README. */ .rev{unicode-bidi:bidi-override;direction:rtl} a.mail{cursor:pointer} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} [hidden]{display:none} /* ---------- responsive ---------- */ /* Real classes, so these override by source order — no !important anywhere. */ @media (max-width:880px){ .hero{grid-template-columns:1fr;gap:34px;padding:52px 0 44px} .hero-img{max-width:320px} .grid3{grid-template-columns:1fr 1fr} .grid2{grid-template-columns:1fr} .about{grid-template-columns:1fr;padding:40px} .sec{padding:76px 0 8px} .hero-title{font-size:40px} .nav-link{display:none} } @media (max-width:560px){ .wrap{padding:0 20px} .hero{padding:36px 0 32px;gap:28px} .hero-title{font-size:30px;letter-spacing:-1px} .sec-title,.about-title{font-size:25px} .grid3{grid-template-columns:1fr} .about{padding:30px 22px} .about-art{display:none} .hero-img{max-width:260px} .term-body{font-size:12.5px;padding:20px 20px} .brand-name{font-size:16px} .sec{padding:64px 0 4px} } /* Below ~460px the wordmark (113px) squeezes the nav until "Get in touch" wraps and the brand collides with it. Drop the words, keep the mark. .sr-only rather than display:none — the only other child of .brand is an aria-hidden , so hiding it outright would leave the home link with no accessible name. */ @media (max-width:460px){ .brand-name{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} } /* ---------- motion ---------- */ @keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} @media (prefers-reduced-motion: reduce){ *{animation:none !important;transition:none !important} html{scroll-behavior:auto} }