/* ========================================================================== MTK Afbouw — design tokens HET CONCEPT MTK Afbouw bouwt de laag die niemand ziet: het stalen frame, de isolatie en het akoestische membraan achter elke afgewerkte wand. Deze site is daarom gekleed als een werktekening op de bouwplaats — maatvoering in mono, haarlijnen als stramien, het koele grijsblauw van gegalvaniseerd staal en gipsplaat als materiaal, en het okergeel van het Tecsound-membraan als enige signaalkleur. Dat okergeel is niet gekozen omdat het mooi is, maar omdat het uit hun eigen materiaal komt: het massaveermembraan dat op bijna elke foto terugkomt. Het is de kleur die op de bouw "geluidsisolatie" betekent. BEWUSTE NIET-KEUZES - Geen bouwplaats-oranje en geen veiligheidsgeel. Dat is de kleur van elke andere aannemerssite en zegt niets over dit vak. - Geen indigo/violet verloop op wit. - Geen afgeronde hoeken, nergens. Een metalstud profiel heeft scherpe hoeken; de site ook. Alle radius-tokens staan bewust op 0. - Geen stockfoto's. Er zijn 29 echte foto's van eigen werk. - Geen systeem-fontstack als display-font. -------------------------------------------------------------------------- HOE THEMING WERKT — deze structuur is NIET optioneel :root de complete lichte palet @media (prefers-color-scheme: dark) de OS-voorkeur, afgeschermd zodat een expliciete lichte keuze wint :root[data-theme="dark"] de toggle op de pagina, die het OS in beide richtingen moet verslaan Een kleur mag nooit alleen binnen een media query gedefinieerd zijn, anders verdwijnt hij voor lezers in de andere modus. ========================================================================== */ :root { /* ---- type ------------------------------------------------------------ Archivo (variabel, wdth 75–125) voor display: een industriële grotesk met ruggengraat, die op groot formaat karakter heeft. Public Sans voor lopende tekst — meer spanning dan de gebruikelijke UI-sans en houdt stand op 16px. IBM Plex Mono voor elk label: maatvoering hoort in mono. */ --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; --font-sans: "Public Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; /* Vloeiende schaal. De bovenste stappen zijn bewust steiler dan de onderste: tussen een sectiekop en een headline hoort een echte sprong te zitten. */ --step--2: clamp(0.70rem, 0.675rem + 0.11vw, 0.775rem); --step--1: clamp(0.80rem, 0.771rem + 0.13vw, 0.885rem); --step-0: clamp(1.00rem, 0.964rem + 0.16vw, 1.10rem); --step-1: clamp(1.19rem, 1.121rem + 0.31vw, 1.39rem); --step-2: clamp(1.41rem, 1.284rem + 0.57vw, 1.76rem); --step-3: clamp(1.68rem, 1.457rem + 1.01vw, 2.31rem); --step-4: clamp(2.00rem, 1.622rem + 1.71vw, 3.05rem); --step-5: clamp(2.38rem, 1.749rem + 2.85vw, 4.14rem); --step-6: clamp(2.83rem, 1.762rem + 4.83vw, 5.80rem); --step-7: clamp(3.37rem, 1.581rem + 8.09vw, 8.35rem); --leading-tight: 0.96; --leading-snug: 1.22; --leading-normal: 1.66; --tracking-tight: -0.018em; --tracking-display: -0.035em; --tracking-wide: 0.15em; --tracking-wider: 0.24em; /* ---- spacing & vorm --------------------------------------------------- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2.25rem; --space-xl: 3.5rem; --space-2xl: 5rem; --space-3xl: 7.5rem; /* Scherpe hoeken, overal. Zie "bewuste niet-keuzes" hierboven. */ --radius-xs: 0px; --radius-s: 0px; --radius-m: 0px; --radius-l: 0px; --radius-xl: 0px; --measure: 64ch; --shell-max: 1280px; --shell-pad: clamp(1.15rem, 4vw, 3.25rem); --rule: 1px; --header-h: 4.75rem; /* ---- motion ---------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --dur-fast: 140ms; --dur-base: 260ms; --dur-slow: 520ms; --dur-reveal: 720ms; /* ---- LICHT PALET — de volledige definitie van elke kleur -------------- Gipsplaat onder primer: een koel, licht grijs met een blauwzweem, nooit zuiver wit. Inkt is bijna-zwart met dezelfde blauwzweem, zodat tekst op het vlak ligt in plaats van erop te zweven. */ color-scheme: light; --bg: #f1f2f0; --bg-deep: #e1e4e2; --surface: #fafbfa; --surface-2: #e8ebe9; --surface-raised: rgba(250, 251, 250, 0.88); --surface-glass: rgba(241, 242, 240, 0.86); --border: rgba(16, 23, 26, 0.15); --border-strong: rgba(16, 23, 26, 0.32); --ink: #10171a; /* lopende tekst — moet 7:1 halen op --bg */ --ink-2: #3e484d; /* secundair — moet 4.5:1 halen op --bg */ --ink-3: #58636a; /* metadata — moet 4.5:1 halen op --bg EN --bg-deep */ --ink-inverse: #f4f6f5; /* Eén accent, met betekenis: een link, een actieve staat, een maat. Op licht moet het oker donker genoeg zijn voor 4.5:1 bij tekstgewicht. */ --accent: #8a5300; --accent-2: #1b4a63; --accent-ink: #fffdf6; --accent-soft: rgba(138, 83, 0, 0.10); --accent-glow: rgba(138, 83, 0, 0.22); /* Het logo is donker drukwerk op wit. Het krijgt in beide thema's een lichte plaat onder zich, zodat het merk overal identiek wordt weergegeven in plaats van in het donker te verdwijnen. */ --plate: #ffffff; --plate-border: rgba(16, 23, 26, 0.16); /* Het stramien: de rasterlijnen van een werktekening. */ --grid-line: rgba(16, 23, 26, 0.055); --grid-size: 46px; /* Foto's van bouwwerk zijn licht en hard; op een donkere pagina slaan ze een gat. In donkere modus worden thumbnails gedempt — nooit een figuur of een detailfoto die leesbaar moet blijven. */ --card-image-filter: none; --shadow-s: 0 1px 2px rgba(12, 20, 24, 0.07), 0 2px 8px rgba(12, 20, 24, 0.05); --shadow-m: 0 4px 12px rgba(12, 20, 24, 0.08), 0 16px 40px rgba(12, 20, 24, 0.09); --shadow-l: 0 10px 30px rgba(12, 20, 24, 0.11), 0 32px 80px rgba(12, 20, 24, 0.13); } /* ---- DONKER PALET ------------------------------------------------------ Geen gedimde lichte versie, maar een ander materiaal: gegalvaniseerd staal in slecht licht. Twee keer gedeclareerd — één keer voor de OS-voorkeur (afgeschermd zodat een expliciete lichte keuze wint) en één keer voor de toggle zelf. De blokken zijn identiek op de selector na. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0f1315; --bg-deep: #080b0c; --surface: #161c1f; --surface-2: #1e262a; --surface-raised: rgba(22, 28, 31, 0.82); --surface-glass: rgba(15, 19, 21, 0.86); --border: rgba(196, 214, 221, 0.13); --border-strong: rgba(196, 214, 221, 0.26); --ink: #eef2f3; --ink-2: #a7b2b8; --ink-3: #869299; --ink-inverse: #0f1315; --accent: #f0b429; --accent-2: #6fb3d8; --accent-ink: #1a1300; --accent-soft: rgba(240, 180, 41, 0.13); --accent-glow: rgba(240, 180, 41, 0.30); --plate: #f2f4f3; --plate-border: rgba(196, 214, 221, 0.22); --grid-line: rgba(196, 214, 221, 0.055); --card-image-filter: brightness(0.82) contrast(1.05) saturate(0.92); --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.4); --shadow-m: 0 6px 18px rgba(0, 0, 0, 0.52), 0 20px 48px rgba(0, 0, 0, 0.46); --shadow-l: 0 12px 34px rgba(0, 0, 0, 0.6), 0 40px 90px rgba(0, 0, 0, 0.55); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0f1315; --bg-deep: #080b0c; --surface: #161c1f; --surface-2: #1e262a; --surface-raised: rgba(22, 28, 31, 0.82); --surface-glass: rgba(15, 19, 21, 0.86); --border: rgba(196, 214, 221, 0.13); --border-strong: rgba(196, 214, 221, 0.26); --ink: #eef2f3; --ink-2: #a7b2b8; --ink-3: #869299; --ink-inverse: #0f1315; --accent: #f0b429; --accent-2: #6fb3d8; --accent-ink: #1a1300; --accent-soft: rgba(240, 180, 41, 0.13); --accent-glow: rgba(240, 180, 41, 0.30); --plate: #f2f4f3; --plate-border: rgba(196, 214, 221, 0.22); --grid-line: rgba(196, 214, 221, 0.055); --card-image-filter: brightness(0.82) contrast(1.05) saturate(0.92); --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.4); --shadow-m: 0 6px 18px rgba(0, 0, 0, 0.52), 0 20px 48px rgba(0, 0, 0, 0.46); --shadow-l: 0 12px 34px rgba(0, 0, 0, 0.6), 0 40px 90px rgba(0, 0, 0, 0.55); }