/* ========================================================================== OFG BASE — gedeelde laag voor One Flora Group-sites (greenpackers.nl, later flora2day.com; nicdenheijer.nl kan migreren) Bevat: reset, layout, componenten, utilities, nav, kaart. GEEN merkkleuren/fonts: alles leest semantische tokens (--c-*, --font-*, --radius-*) die de merklaag (css/.css) zet. Laadvolgorde: ofg-base.css → .css. Strikte CSP ('self'), geen inline stijl. ========================================================================== */ :root{ --s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.5rem;--s-6:2rem;--s-7:2.5rem;--s-8:3rem;--s-9:4rem;--s-10:6rem; --section:clamp(4rem,2.8rem + 5.2vw,7.5rem);--gutter:clamp(1.25rem,.8rem + 2.2vw,2.5rem);--container:76rem;--tap:2.75rem; --fs-display:clamp(2.5rem,1.6rem + 4.2vw,5.25rem);--fs-h1:clamp(2.25rem,1.6rem + 2.8vw,3.75rem);--fs-h2:clamp(1.875rem,1.45rem + 1.8vw,3rem); --fs-h3:clamp(1.25rem,1.17rem + .35vw,1.5rem);--fs-lead:clamp(1.125rem,1.06rem + .3vw,1.3125rem);--fs-body:1.0625rem;--fs-small:.9375rem;--fs-eyebrow:.8125rem; --lh-tight:1.02;--lh-head:1.12;--lh-body:1.65; --radius-s:.5rem;--radius-m:1rem;--radius-l:1.75rem;--radius-pill:999px; --shadow:0 1px 2px rgb(0 0 0 / .06),0 12px 32px -12px rgb(0 0 0 / .18); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:5rem} @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} body{margin:0;font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-ink);background:var(--c-bg);overflow-wrap:break-word} img,picture,svg{display:block;max-width:100%;height:auto} h1,h2,h3,h4{font-family:var(--font-display);line-height:var(--lh-head);margin:0 0 var(--s-4);color:var(--c-heading);text-wrap:balance} h1{font-size:var(--fs-h1);line-height:var(--lh-tight)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)} p,ul,ol,dl{margin:0 0 var(--s-4)} a{color:var(--c-link);text-underline-offset:.2em;text-decoration-thickness:.08em} a:hover{color:var(--c-link-hover);text-decoration-thickness:.14em} :focus-visible{outline:3px solid var(--c-focus);outline-offset:3px;border-radius:2px} .on-dark :focus-visible,.site-footer :focus-visible,.topbar :focus-visible{outline-color:var(--c-focus-on-dark)} /* utilities */ .container{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto} .section{padding-block:var(--section)}.section--tight{padding-block:calc(var(--section)*.6)} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip-link{position:absolute;left:var(--s-4);top:-4rem;z-index:100;padding:var(--s-3) var(--s-4);background:var(--c-ink);color:#fff;border-radius:var(--radius-s)} .skip-link:focus{top:var(--s-4);color:#fff} .stack>*+*{margin-top:var(--s-4)}.measure{max-width:38rem} .eyebrow{display:inline-block;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-eyebrow);margin-bottom:var(--s-3)} .lead{font-size:var(--fs-lead);line-height:1.55;color:var(--c-muted)} .muted{color:var(--c-muted)}.small{font-size:var(--fs-small)} /* placeholder voor onbevestigde gegevens — altijd zichtbaar gemarkeerd */ .ph{display:inline-flex;align-items:center;gap:.35em;padding:.05em .5em;border:2px dashed var(--c-ph-border);background:var(--c-ph-bg);color:var(--c-ph-text);border-radius:var(--radius-s);font-weight:700;font-size:.92em;line-height:1.4} .ph::before{content:"\25B2";font-size:.7em} .ph-note{font-size:var(--fs-small);color:var(--c-ph-text)} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:var(--tap);min-width:var(--tap);padding:.75em 1.4em;border-radius:var(--radius-btn);font:inherit;font-weight:700;line-height:1.2;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background-color .15s,color .15s,transform .15s} .btn--primary{background:var(--c-btn-bg);color:var(--c-btn-text)}.btn--primary:hover{background:var(--c-btn-bg-hover);color:var(--c-btn-text-hover)} .btn--secondary{background:transparent;color:var(--c-ink);border-color:var(--c-ink)}.btn--secondary:hover{background:var(--c-ink);color:var(--c-bg)} .on-dark .btn--secondary{color:#fff;border-color:#fff}.on-dark .btn--secondary:hover{background:#fff;color:var(--c-ink)} @media (prefers-reduced-motion:no-preference){.btn:hover{transform:translateY(-1px)}} .btn__arrow{width:1.1em;height:1.1em;flex:none} .btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3)} /* topbar + header + nav */ .topbar{background:var(--c-topbar-bg);color:var(--c-topbar-text);font-size:var(--fs-small)} .topbar .container{display:flex;justify-content:space-between;gap:var(--s-4);align-items:center;min-height:2.25rem;flex-wrap:wrap} .topbar a{color:inherit;display:inline-flex;align-items:center;min-height:var(--tap)} .topbar__extra{display:none} .site-header{position:sticky;top:0;z-index:50;background:var(--c-header-bg);border-bottom:1px solid var(--c-line)} .site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:4.5rem} .brand{display:inline-flex;align-items:center;min-height:var(--tap);flex:none} .brand__logo{height:var(--logo-h);width:auto} .nav-toggle{display:inline-flex;align-items:center;gap:.5em;min-height:var(--tap);min-width:var(--tap);padding:0 1em;border:2px solid var(--c-ink);border-radius:var(--radius-btn);font-weight:700;color:var(--c-ink);text-decoration:none;background:none} .nav-toggle__icon{width:1.25rem;height:1.25rem} .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--c-header-bg);border-bottom:1px solid var(--c-line);box-shadow:var(--shadow)} .site-nav.is-open{display:block} .site-nav ul{list-style:none;margin:0;padding:var(--s-3) var(--gutter) var(--s-6)} .site-nav a{display:flex;align-items:center;min-height:3.25rem;font-family:var(--font-display);font-size:1.375rem;font-weight:700;color:var(--c-ink);text-decoration:none;border-bottom:1px solid var(--c-line)} .site-nav a[aria-current=page]{color:var(--c-link)} .site-nav .nav-cta{margin-top:var(--s-5);border:0} .site-nav .nav-cta .btn{width:100%} @media (min-width:64em){ .nav-toggle{display:none}.topbar__extra{display:inline-flex} .site-nav{display:block;position:static;box-shadow:none;border:0;background:none} .site-nav ul{display:flex;align-items:center;gap:var(--s-2);padding:0} .site-nav li{display:flex} .site-nav a{font-family:var(--font-body);font-size:1rem;border:0;padding:0 .9em;min-height:var(--tap);border-radius:var(--radius-pill)} .site-nav a:hover{background:var(--c-tint)} .site-nav a[aria-current=page]{box-shadow:inset 0 -3px 0 var(--c-accent);border-radius:0} .site-nav .nav-cta{margin:0 0 0 var(--s-3)}.site-nav .nav-cta a.btn{padding:0 1.3em;font-family:var(--font-body)} .site-nav .nav-cta a.btn:hover{background:var(--c-btn-bg-hover)} } /* breadcrumb */ .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.25em .5em;padding:0;margin:0 0 var(--s-5);font-size:var(--fs-small)} .crumbs li+li::before{content:"/";color:var(--c-field);margin-right:.5em} .crumbs a{color:var(--c-muted);display:inline-flex;align-items:center;min-height:var(--tap)} .crumbs [aria-current]{display:inline-flex;align-items:center;min-height:var(--tap)} /* grid */ .grid{display:grid;gap:var(--s-5)} @media (min-width:40em){.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:64em){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (min-width:40em) and (max-width:63.99em){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}} .split{display:grid;gap:var(--s-7);align-items:center} @media (min-width:56em){.split{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-9)}.split--wide-media{grid-template-columns:1.15fr 1fr}} /* media */ .media{border-radius:var(--radius-l);overflow:hidden;background:var(--c-tint)} .media img{width:100%;height:100%;object-fit:cover} .ratio-4x3{aspect-ratio:4/3}.ratio-3x2{aspect-ratio:3/2}.ratio-1x1{aspect-ratio:1} /* card */ .card{position:relative;display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-6);border-radius:var(--radius-l);background:var(--c-card-bg);color:var(--c-ink)} .card h3{margin:0}.card p{margin:0} .card__link{margin-top:auto;padding-top:var(--s-3);font-weight:700} .card__link a{display:inline-flex;align-items:center;min-height:var(--tap);color:inherit} .card__link a::after{content:"";position:absolute;inset:0;border-radius:inherit} /* fact strip */ .facts{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));list-style:none;padding:0;margin:0} .fact{padding:var(--s-5);border-radius:var(--radius-m);background:var(--c-bg);border:1px solid var(--c-line)} .fact strong{display:block;font-family:var(--font-display);font-size:1.5rem;line-height:1.15;color:var(--c-heading);margin-bottom:var(--s-1)} /* jobs list */ .jobs{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4)} .job{position:relative;display:grid;gap:var(--s-2);padding:var(--s-5) var(--s-6);border:2px solid var(--c-line);border-radius:var(--radius-m);background:var(--c-bg)} .job:hover{border-color:var(--c-ink)} .job h3{margin:0}.job h3 a{color:var(--c-ink);text-decoration:none;display:inline-flex;min-height:var(--tap);align-items:center} .job h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit} .job__meta{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;padding:0;margin:0} .job__meta li{padding:.2em .7em;border-radius:var(--radius-pill);background:var(--c-tint);font-size:var(--fs-small);font-weight:600} /* contact + statische kaart */ .contact-list{list-style:none;padding:0;margin:0 0 var(--s-5);display:grid;gap:var(--s-2)} .contact-list a{display:inline-flex;align-items:center;gap:.6em;min-height:var(--tap);font-weight:700;font-size:1.125rem} .contact-list svg{width:1.25rem;height:1.25rem;flex:none} .map{margin:0;border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--c-line);background:var(--c-tint)} .map img{width:100%;aspect-ratio:8/5;object-fit:cover} .map figcaption{padding:var(--s-3) var(--s-4);font-size:.8125rem;color:var(--c-muted);background:var(--c-bg)} .map figcaption a{color:inherit;display:inline-flex;align-items:center;min-height:var(--tap)} .route-links{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;padding:0;margin:var(--s-4) 0 0} .route-links a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 1em;border:2px solid var(--c-ink);border-radius:var(--radius-pill);color:var(--c-ink);text-decoration:none;font-weight:700;font-size:var(--fs-small)} .route-links a:hover{background:var(--c-ink);color:var(--c-bg)} /* footer */ .site-footer{background:var(--c-footer-bg);color:var(--c-on-dark);padding-block:var(--s-9) var(--s-6);font-size:var(--fs-small)} .site-footer a{color:#fff} .site-footer h2{font-family:var(--font-body);font-size:var(--fs-eyebrow);letter-spacing:.12em;text-transform:uppercase;color:var(--c-on-dark-accent);margin-bottom:var(--s-3)} .site-footer ul{list-style:none;padding:0;margin:0} .site-footer li a{display:inline-flex;align-items:center;min-height:var(--tap)} .footer-grid{display:grid;gap:var(--s-7)} @media (min-width:48em){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}} .footer-bottom{margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid rgb(255 255 255 / .18);display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);justify-content:space-between} .footer-logo{display:inline-flex;padding:var(--s-3) var(--s-4);background:#fff;border-radius:var(--radius-m);margin-bottom:var(--s-4)} .footer-logo img{height:var(--logo-h);width:auto} .site-footer a,.crumbs a{min-width:var(--tap);justify-content:flex-start} .footer-bottom a{display:inline-flex;align-items:center;min-height:var(--tap)} .media picture{display:block;height:100%} /* ---- BASE v1.1 (flora2day, 2026-10-20) — generieke uitbreidingen, ook bruikbaar voor greenpackers/nicdenheijer ---- */ /* taalwissel: