* { box-sizing: border-box; }
html, body { margin:0; padding:0; scroll-behavior:smooth; }
body { background:#F5F1EA; font-family:'Archivo', system-ui, sans-serif; color:#1A1A1A; }
.ngb img { display:block; }
.ngb a { text-decoration:none; }
.ngb section { scroll-margin-top:80px; }
.ngb-cookiebar { transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .45s ease; }
.ngb-cookiebar.consent-hidden { transform: translateY(220%); opacity: 0; pointer-events: none; }
button:hover, .ngb a[href="#contact"]:hover { filter:brightness(.96); }
/* tokens/fonts.css */
/* ============================================================
FONTS
Both brands use Google Fonts. These ARE the production
typefaces — no substitution.
· NoGlutenBakery → Archivo (display+body), DM Serif Display
(italic accents), Caveat Brush (hand-lettered).
· Mijn Bakker → Playfair Display (display), Lato (body).
Loaded via @import so the whole closure ships to consumers.
============================================================ */
/* Fonts geladen via in (sneller dan @import) */
/* tokens/colors.css */
/* ============================================================
COLORS — base palettes
Raw, brand-agnostic palette values. Semantic aliases that
flip per brand live in brands.css; here are the literal
ramps both brands draw from. Values lifted verbatim from the
production websites (noglutenbakery.be / mijnbakker.be).
============================================================ */
:root {
/* ---------- NoGlutenBakery palette ---------- */
--ngb-teal: #4FA8A3; /* primary brand */
--ngb-teal-deep: #2E6F6B; /* darker teal, italic accents on light */
--ngb-teal-pale: #E4F0EF; /* tint for soft fills */
--ngb-oker: #E89A2E; /* ocher — the energy accent */
--ngb-oker-deep: #B57820; /* darker ocher for shadows/hover */
--ngb-roze: #F5C4D1; /* pink — tertiary highlight */
--ngb-roze-pale: #FBE5EB; /* pink wash backgrounds */
--ngb-zwart: #1A1A1A; /* ink black — borders + text */
--ngb-grijs-warm: #F5F1EA; /* warm paper background */
--ngb-grijs-licht: #ECE5D8; /* light sand panel */
--ngb-wit: #FFFFFF;
/* ---------- Mijn Bakker palette ---------- */
--mb-navy: #063467; /* primary brand — logo blue */
--mb-navy-dark: #042449; /* deepest night */
--mb-navy-light: #0C4A8F; /* lifted navy */
--mb-gold: #C9A84C; /* primary accent */
--mb-gold-light: #E7B54A; /* brighter gold for highlights */
--mb-gold-pale: #FAF3E0; /* pale gold panel */
--mb-cream: #FDFAF4; /* page cream */
--mb-off-white: #F5F0E8; /* alt section background */
--mb-text: #1B3A6B; /* body text on light */
--mb-text-muted: #5A6A82; /* secondary text */
--mb-border: #D4C89A; /* warm hairline border */
}
/* tokens/typography.css */
/* ============================================================
TYPOGRAPHY — font families + type scale
Family tokens are brand-agnostic handles; the per-brand
defaults for --font-display / --font-body are set in
brands.css. The size/weight/leading scale is shared.
============================================================ */
:root {
/* ---- Family handles ---- */
--font-archivo: 'Archivo', system-ui, sans-serif; /* NGB display + body */
--font-serif-em: 'DM Serif Display', Georgia, serif; /* NGB italic accent */
/* ---- Type scale (rem, 16px base) ---- */
--text-xs: 0.6875rem; /* 11px — eyebrows, tags, labels */
--text-sm: 0.8125rem; /* 13px — captions, meta */
--text-base: 0.9375rem; /* 15px — body */
--text-md: 1.125rem; /* 18px — lead-in body */
--text-lg: 1.375rem; /* 22px — card titles */
--text-xl: 1.75rem; /* 28px — sub-headings */
--text-2xl: 2.25rem; /* 36px — section titles */
--text-3xl: 3rem; /* 48px — big section titles */
--text-4xl: 4rem; /* 64px — hero */
/* ---- Weights ---- */
--weight-light: 300;
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* ---- Leading ---- */
--leading-tight: 1.05;
--leading-snug: 1.2;
--leading-normal: 1.55;
--leading-relaxed: 1.75;
/* ---- Tracking ---- */
--tracking-tight: -0.02em; /* NGB headings */
--tracking-normal: 0;
--tracking-wide: 0.08em; /* MB uppercase buttons */
--tracking-eyebrow: 0.14em; /* eyebrow / tag labels */
}
/* tokens/spacing.css */
/* ============================================================
SPACING, RADII, SHADOWS, BORDERS
Shared scale plus the two distinct "physics" the brands use:
· NGB → hard ink borders + hard offset shadows (sticker feel)
· MB → hairline borders + soft diffuse shadows (refined)
Brand-specific values flip via brands.css; here are the base
ramps and both shadow vocabularies.
============================================================ */
:root {
/* ---- Spacing scale (4px base) ---- */
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.5rem; /* 24 */
--space-6: 2rem; /* 32 */
--space-7: 2.75rem; /* 44 */
--space-8: 3.5rem; /* 56 */
--space-9: 5rem; /* 80 — section padding */
--space-10: 5.625rem; /* 90 — section padding (NGB) */
/* ---- Radii ---- */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 14px;
--radius-xl: 16px;
--radius-pill: 999px;
/* ---- NGB shadow vocabulary (hard offset, no blur) ---- */
--shadow-ngb-sm: 4px 4px 0 var(--ngb-zwart);
--shadow-ngb-md: 6px 6px 0 var(--ngb-zwart);
--shadow-ngb-lg: 8px 8px 0 var(--ngb-zwart);
--shadow-ngb-oker: 6px 6px 0 var(--ngb-oker-deep);
/* ---- Mijn Bakker shadow vocabulary (soft, diffuse) ---- */
--shadow-mb-sm: 0 4px 16px rgba(6,52,103,0.08);
--shadow-mb-md: 0 12px 40px rgba(27,58,107,0.10);
--shadow-mb-lg: 0 18px 50px rgba(6,52,103,0.18);
/* ---- Border widths ---- */
--border-hair: 1px; /* MB hairlines */
--border-thick: 3px; /* NGB ink outline */
--border-thin: 2px;
}
/* tokens/brands.css — semantic tokens (NGB scope; components resolve via these) */
/* -------- DEFAULT = NoGlutenBakery -------- */
:root,
[data-brand="ngb"] {
/* core */
--brand-primary: var(--ngb-teal);
--brand-primary-deep: var(--ngb-teal-deep);
--brand-primary-pale: var(--ngb-teal-pale);
--brand-accent: var(--ngb-oker);
--brand-accent-deep: var(--ngb-oker-deep);
--brand-tertiary: var(--ngb-roze);
--brand-tertiary-pale: var(--ngb-roze-pale);
--brand-ink: var(--ngb-zwart);
/* surfaces */
--surface-page: var(--ngb-grijs-warm);
--surface-alt: var(--ngb-grijs-licht);
--surface-card: var(--ngb-wit);
--surface-invert: var(--ngb-zwart);
--surface-brand: var(--ngb-teal);
/* text */
--text-body: var(--ngb-zwart);
--text-muted: #555555;
--text-on-dark: var(--ngb-wit);
--text-em: var(--ngb-teal-deep); /* serif italic accents */
--text-on-brand: var(--ngb-zwart); /* teal panels keep dark text */
/* type */
--font-display: var(--font-archivo);
--font-body: var(--font-archivo);
--font-em: var(--font-serif-em);
--heading-weight: var(--weight-black);
--heading-tracking: var(--tracking-tight);
--heading-leading: var(--leading-tight);
/* form / shape physics */
--border-color: var(--ngb-zwart);
--border-width: var(--border-thick);
--radius-card: var(--radius-lg);
--radius-control: var(--radius-sm);
--shadow-card: var(--shadow-ngb-lg);
--shadow-control: var(--shadow-ngb-sm);
--shadow-hover: var(--shadow-ngb-md);
/* button */
--btn-bg: var(--ngb-zwart);
--btn-fg: var(--ngb-oker);
--btn-border: var(--ngb-zwart);
--btn-transform: uppercase; /* @kind other */
--btn-weight: var(--weight-black);
/* eyebrow / tag */
--tag-bg: var(--ngb-zwart);
--tag-fg: var(--ngb-oker);
/* icon tile (feature / process) */
--tile-bg: var(--ngb-oker);
--tile-fg: var(--ngb-zwart);
--tile-radius: 50%;
--tile-border: var(--border-thick) solid var(--ngb-zwart); /* @kind other */
}
/* styles.css */
/* ============================================================
NoGlutenBakery Design System — global entry point
Consumers link THIS one file. Order matters: fonts, then
color/type/spacing tokens, then brand scopes.
============================================================ */
/* ===== RESPONSIVE / MOBIEL ===== */
#nav-toggle{ display:none; flex:none; width:48px; height:40px; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:#fff; border:3px solid #1A1A1A; border-radius:8px; cursor:pointer; padding:0; }
#nav-toggle span{ display:block; width:22px; height:3px; background:#1A1A1A; border-radius:2px; }
@media (max-width: 1023px){
#nav-toggle{ display:inline-flex; }
nav[style]{ flex-wrap:wrap; padding-left:18px!important; padding-right:18px!important; }
#nav-menu{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch!important; gap:0!important; background:#fff; border-top:3px solid #1A1A1A; border-bottom:3px solid #1A1A1A; padding:6px 0!important; margin:0; display:none!important; box-shadow:0 14px 24px rgba(0,0,0,.14); }
#nav-menu.open{ display:flex!important; }
#nav-menu > a{ padding:14px 22px!important; font-size:16px!important; border-bottom:1px solid #efe9dd; }
#nav-menu > span[data-no-i18n]{ align-self:flex-start; margin:14px 22px 6px; }
#nav-menu > a:last-child{ padding:14px 22px 16px!important; border-bottom:none; }
#nav-menu > a:last-child button{ width:100%; }
[style*="grid-template-columns:repeat(5,1fr)"]{ grid-template-columns:repeat(3,1fr)!important; }
}
@media (max-width: 900px){
[style*="grid-template-columns:1.08fr .92fr"],
[style*="grid-template-columns:.9fr 1.1fr"],
[style*="grid-template-columns:.85fr 1.15fr"]{ grid-template-columns:1fr!important; }
}
@media (max-width: 768px){
section[style], footer[style]{ padding-left:18px!important; padding-right:18px!important; }
[style*="grid-template-columns:1fr 1fr"],
[style*="grid-template-columns:2fr 1.2fr 1fr"]{ grid-template-columns:1fr!important; }
[style*="grid-template-columns:repeat(4,1fr)"]{ grid-template-columns:repeat(2,1fr)!important; }
[style*="grid-template-columns:repeat(3,1fr)"]{ grid-template-columns:repeat(2,1fr)!important; }
[style*="gap:48px"]{ gap:30px!important; }
[style*="gap:56px"]{ gap:30px!important; }
}
@media (max-width: 560px){
[style*="grid-template-columns:repeat(5,1fr)"]{ grid-template-columns:repeat(2,1fr)!important; }
[style*="grid-template-columns:repeat(3,1fr)"]{ grid-template-columns:1fr!important; }
[style*="clamp(42px,4.8vw,62px)"]{ font-size:32px!important; line-height:1.05!important; }
[style*="padding:16px 32px"]{ width:100%!important; justify-content:center!important; }
}