groeit mee, zodat de paginavoet altijd onderaan blijft — ook op korte * pagina's. Alleen layout; kleuren/typografie blijven van de design-laag. */ body { min-height: 100dvh; display: flex; flex-direction: column; } body > main { flex: 1 0 auto; } /* ─── /css/variables/website.css ─── */ /* website.css — banuslodge.com brand-tokens (stijlgids Age, 2026-06). * * Overschrijft framework-defaults uit /modules/variables.css en voegt * site-eigen design-tokens toe. Laad NA variables.css. * * Stijlgids-palet: cream #F4EFEB · terra #9F643F · olive #8E8866 · * olive-dark #5A5537 · brown #573B2D · sand #E1CC95 · ink #1D1D1B. * Dit bestand is de ENIGE plek met hex-waarden; site.css gebruikt * uitsluitend tokens (zie ook de CMS-theme-vars --theme-color-1..10). */ :root { /* ── Brand ─────────────────────────────────────────────────────────── */ --color-primary: #9f643f; /* terra — knoppen, nav-accent, links */ --color-primary-fg: #f4efeb; /* cream op terra */ --color-accent: #9f643f; /* ── Vlakken — site staat vast op het lichte schema ────────────────── */ --color-bg: #f4efeb; /* cream als paginabasis */ --color-bg-soft: #ede4dc; /* dieper cream voor panels */ --color-bg-elev: #ffffff; /* kaarten/pill-nav */ --color-fg: #1d1d1b; /* ink */ /* ── Site-eigen tokens (gebruikt door custom/site.css) ─────────────── */ --bl-olive: #8e8866; --bl-olive-dark: #5a5537; --bl-brown: #573b2d; --bl-sand: #e1cc95; --bl-radius: 18px; /* één kaart-radius site-breed (galerij/kaarten/frosted) */ --bl-band-radius: 34px; /* grote banden/kaarten (terra-band, locatie, contact-info) */ /* Content-breedte — design --max; overschrijft framework-default (76rem) */ --content-max: 1240px; /* ── Tekst-tinten (design) ─────────────────────────────────────────── */ --bl-body-text: #5d534b; /* paragrafen in lagen op licht */ --bl-welcome: #473d35; /* welkom-sectie-tekst (warmer dan body) */ --bl-signature: #6f6359; /* ondertekening (italic) */ --bl-near-white: #fcfaf9; /* basis van het welkom-verloop */ /* cream met alpha — tekst op donkere banden (color-mix valt buiten de browser-baseline, daarom rgba) */ --bl-cream-soft: rgba(244, 239, 235, .7); /* eyebrow op donker */ --bl-cream-soft-72: rgba(244, 239, 235, .72); /* lopende tekst op band */ --bl-cream-90: rgba(244, 239, 235, .9); /* kaart-subtekst op foto */ --bl-cream: #f4efeb; /* hero-dot actief (pill) */ --bl-cream-55: rgba(244, 239, 235, .55); /* hero-dot inactief */ /* paginavoet (design .footer-*): cream-tinten op het bruine vlak */ --bl-cream-soft-82: rgba(244, 239, 235, .82); /* footer body/links */ --bl-cream-soft-60: rgba(244, 239, 235, .6); /* footer onderbalk */ --bl-cream-12: rgba(244, 239, 235, .12); /* social-knop vlak */ --bl-cream-25: rgba(244, 239, 235, .25); /* social-knop hover */ --bl-cream-14: rgba(244, 239, 235, .14); /* footer-scheidingslijn */ /* frosted-glass kaartjes op foto-banden (design .loc-card) */ --bl-frost: rgba(46, 52, 64, .24); --bl-frost-hover: rgba(46, 52, 64, .32); --bl-frost-border: rgba(255, 255, 255, .22); /* brand-getinte schaduwen (alpha-variant van brown; bewust rgba — color-mix valt buiten de browser-baseline) */ --bl-shadow: 0 18px 50px rgba(87, 59, 45, .14); --bl-shadow-sm: 0 8px 24px rgba(87, 59, 45, .10); /* omhoog-werpende schaduw voor de sticky book-bar (rand naar boven) */ --bl-shadow-up: 0 -10px 34px rgba(87, 59, 45, .12); /* ── On-image: tekst op donkere cover-foto/overlay ─────────────────── */ --on-image-overlay: rgba(29, 29, 27, .35); --on-image-overlay-strong: rgba(29, 29, 27, .5); --on-image-fg: #fff; --on-image-fg-soft: rgba(255, 255, 255, .85); --on-image-border: rgba(255, 255, 255, .6); --on-image-bg-hover: rgba(255, 255, 255, .12); } /* ─── /css/base.css ─── */ /* Reset + typografie. Bewust minimaal — geen normalize.css. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-primary) 30%, transparent) transparent; scroll-behavior: smooth; scroll-padding-top: var(--site-header-height, 0px); } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-primary) 30%, transparent); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--color-primary) 55%, transparent); } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--line-base); color: var(--color-fg); background: var(--color-bg); /* Sticky footer: body vult minstens de viewport en stapelt header/main/ footer als kolom; main groeit (flex: 1) zodat de voet ook bij weinig content onderaan staat. 100vh = fallback voor browsers zonder dvh. */ min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } body.is-scroll-locked { overflow: hidden; } main { display: block; flex: 1 0 auto; } img, picture, video, svg { display: block; max-width: 100%; height: auto; } a { color: var(--color-link); text-underline-offset: .2em; } h1, h2, h3, h4, h5, h6 { margin: 0; line-height: var(--line-tight); font-family: var(--font-display); } /* Kale h1 in het 3e thema-font (Cormorant Garamond); de merk-/layer-titels (`.general__title` e.d.) worden in custom/site.css gestuurd. Gewone h2–h6 blijven op --font-display (theme-font-2). */ h1 { font-family: var(--theme-font-3, var(--font-display)); } p { margin: 0 0 var(--space-3); } /* Buttons — basis variant primary/secondary */ .button { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); text-decoration: none; font-weight: 600; line-height: 1.2; transition: transform .12s ease, background .12s ease; /* Reset native