/* Liquid Glass tokens — 4 modi (auto / day / night / brand)
@version 1.0.0 — 2026-05-20
Drop-in: + data-theme op .
Brand vereist Montserrat italic 200-700:
https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700&display=swap
Day/night gebruiken Inter (of system-stack). */
:root {
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--radius-sm: 12px;
--radius-md: 18px;
--radius-lg: 22px;
--radius-pill: 100px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
}
/* DAY */
[data-theme="day"],
[data-theme="auto"] {
--bg-base: #F5F4F0;
--bg-elev-1: rgba(255, 255, 255, 0.55);
--bg-elev-2: rgba(255, 255, 255, 0.78);
--bg-elev-3: rgba(255, 255, 255, 0.92);
--ink: #0A0A12;
--ink-soft: rgba(10, 10, 18, 0.72);
--ink-muted: rgba(10, 10, 18, 0.50);
--ink-faint: rgba(10, 10, 18, 0.28);
--border-glass: rgba(255, 255, 255, 0.60);
--border-soft: rgba(10, 10, 18, 0.08);
--accent: #4E6EE8;
--accent-soft: rgba(78, 110, 232, 0.14);
--inner-spec: rgba(255, 255, 255, 0.35);
--shadow-sm: 0 6px 20px -8px rgba(10, 10, 18, 0.10);
--shadow-md: 0 24px 60px -24px rgba(10, 10, 18, 0.18);
--shadow-lg: 0 40px 100px -30px rgba(10, 10, 18, 0.22);
--btn-bg: var(--ink);
--btn-fg: var(--bg-base);
--font-stack: 'Inter', system-ui, -apple-system, sans-serif;
}
/* ═══════════════════ NIGHT ═══════════════════ */
[data-theme="night"] {
--bg-base: #0E1116;
--bg-elev-1: rgba(30, 34, 44, 0.55);
--bg-elev-2: rgba(36, 40, 52, 0.78);
--bg-elev-3: rgba(42, 48, 60, 0.94);
--ink: #F2F4F8;
--ink-soft: rgba(242, 244, 248, 0.78);
--ink-muted: rgba(242, 244, 248, 0.52);
--ink-faint: rgba(242, 244, 248, 0.30);
--border-glass: rgba(255, 255, 255, 0.10);
--border-soft: rgba(255, 255, 255, 0.06);
--accent: #7B98F0;
--accent-soft: rgba(123, 152, 240, 0.18);
--inner-spec: rgba(255, 255, 255, 0.06);
--shadow-sm: 0 6px 20px -8px rgba(0, 0, 0, 0.45);
--shadow-md: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
--shadow-lg: 0 40px 100px -30px rgba(0, 0, 0, 0.65);
--btn-bg: var(--accent);
--btn-fg: #0E1116;
--font-stack: 'Inter', system-ui, -apple-system, sans-serif;
}
/* Auto-modus volgt OS-voorkeur als naar night moet gewisseld worden.
JS hoort matchMedia('(prefers-color-scheme: dark)') te beluisteren en
data-theme te wisselen tussen 'auto' (= day) en 'night' wanneer dat
verandert. Of: forceer hier overrides voor auto+dark. */
@media (prefers-color-scheme: dark) {
[data-theme="auto"] {
--bg-base: #0E1116;
--bg-elev-1: rgba(30, 34, 44, 0.55);
--bg-elev-2: rgba(36, 40, 52, 0.78);
--bg-elev-3: rgba(42, 48, 60, 0.94);
--ink: #F2F4F8;
--ink-soft: rgba(242, 244, 248, 0.78);
--ink-muted: rgba(242, 244, 248, 0.52);
--ink-faint: rgba(242, 244, 248, 0.30);
--border-glass: rgba(255, 255, 255, 0.10);
--border-soft: rgba(255, 255, 255, 0.06);
--accent: #7B98F0;
--accent-soft: rgba(123, 152, 240, 0.18);
--inner-spec: rgba(255, 255, 255, 0.06);
--shadow-sm: 0 6px 20px -8px rgba(0, 0, 0, 0.45);
--shadow-md: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
--shadow-lg: 0 40px 100px -30px rgba(0, 0, 0, 0.65);
--btn-bg: var(--accent);
--btn-fg: #0E1116;
}
}
/* ═══════════════════ BRAND — PROJEXT huisstijl ═══════════════════ */
[data-theme="brand"] {
--bg-base: #FBFAF6;
--bg-elev-1: rgba(251, 250, 246, 0.55);
--bg-elev-2: rgba(251, 250, 246, 0.82);
--bg-elev-3: rgba(251, 250, 246, 0.92);
--ink: #0F1430;
--ink-soft: rgba(15, 20, 48, 0.72);
--ink-muted: rgba(15, 20, 48, 0.55);
--ink-faint: rgba(15, 20, 48, 0.28);
--border-glass: rgba(255, 255, 255, 0.55);
--border-soft: rgba(15, 20, 48, 0.08);
--mint: #C8F0D8;
--blue: #BCDCFB;
--lavender: #D8D4F5;
--powder: #9FB8E8;
--accent: var(--powder);
--accent-soft: rgba(159, 184, 232, 0.22);
--inner-spec: rgba(255, 255, 255, 0.40);
--shadow-sm: 0 6px 20px -8px rgba(15, 20, 48, 0.18);
--shadow-md: 0 24px 60px -24px rgba(15, 20, 48, 0.25);
--shadow-lg: 0 40px 100px -30px rgba(15, 20, 48, 0.30);
--btn-bg: var(--ink);
--btn-fg: var(--bg-base);
--font-stack: 'Montserrat', system-ui, -apple-system, sans-serif;
}
/* ═══════════════════ BASE ═══════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
font-family: var(--font-stack);
font-size: 15px;
line-height: 1.55;
color: var(--ink);
background: var(--bg-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
/* Brand-modus: gelaagde achtergrond met geanimeerde gradient + noise.
In day/night-modi blijft de body kaal — alleen --bg-base. */
[data-theme="brand"] body::before {
content: "";
position: fixed; inset: 0; z-index: -3;
background:
radial-gradient(circle at 15% 10%, var(--mint) 0%, transparent 45%),
radial-gradient(circle at 85% 25%, var(--blue) 0%, transparent 50%),
radial-gradient(circle at 20% 75%, var(--lavender) 0%, transparent 48%),
radial-gradient(circle at 85% 90%, var(--blue) 0%, transparent 45%),
linear-gradient(135deg, var(--mint) 0%, var(--blue) 45%, var(--lavender) 100%);
background-size: 200% 200%;
animation: gradientShift 26s ease-in-out infinite alternate;
}
[data-theme="brand"] body::after {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
opacity: 0.32; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
@keyframes gradientShift {
0% { background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%, 0% 0%; }
100% { background-position: 20% 10%, 80% 20%, 10% 90%, 90% 80%, 100% 100%; }
}
/* PROJEXT-wordmark — italic X in powder.
In muted contexts (footer/meta) inherit kleur + weight zodat X visueel
matched op surrounding text. */
.brand-x { font-style: italic; font-weight: 200; color: var(--powder); }
footer .brand-x,
.meta .brand-x,
.footer-bottom .brand-x {
color: inherit !important;
font-weight: inherit !important;
}
/* ═══════════════════ GLAS-PRIMITIVES ═══════════════════ */
.glass-1,
.glass-2,
.glass-3 {
border: 1px solid var(--border-glass);
box-shadow: var(--shadow-md), inset 0 1px 0 var(--inner-spec);
}
.glass-1 {
background: var(--bg-elev-1);
backdrop-filter: saturate(1.4) blur(20px);
-webkit-backdrop-filter: saturate(1.4) blur(20px);
}
.glass-2 {
background: var(--bg-elev-2);
backdrop-filter: saturate(1.4) blur(28px);
-webkit-backdrop-filter: saturate(1.4) blur(28px);
}
.glass-3 {
background: var(--bg-elev-3);
backdrop-filter: saturate(1.4) blur(36px);
-webkit-backdrop-filter: saturate(1.4) blur(36px);
}
/* ═══════════════════ FOCUS-STATE ═══════════════════ */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);
border-color: var(--accent);
}
/* ═══════════════════ REDUCED MOTION ═══════════════════ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ═══════════════════ PERFORMANCE: mobiel blur reduceren ═══════════════════
backdrop-filter is duur op zwakke GPU's. Op smalle viewports lichter blur
om frame-drops te voorkomen. */
@media (max-width: 560px) {
.glass-1 { backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px); }
.glass-2 { backdrop-filter: saturate(1.3) blur(20px); -webkit-backdrop-filter: saturate(1.3) blur(20px); }
.glass-3 { backdrop-filter: saturate(1.3) blur(26px); -webkit-backdrop-filter: saturate(1.3) blur(26px); }
}