/* ============================================================
Zunnebeke.be — dorpsbulletin
White ground, banded layout in the spirit of a municipal
portal (quick links up top, a tinted band for the modules) —
but built with our own voice: Fraunces for character, poppy
red as the one loud colour, hedgerow green and wheat gold
as quiet company, not another blue/teal government clone.
============================================================ */
:root{
--bg: #ffffff;
--tint: #f5f2ea;
--tint-2: #efe9d9;
--card: #ffffff;
--ink: #26201a;
--ink-2: #6c6150;
--ink-3: #5f5340; /* WCAG AA: >=6:1 on white/tint, keep any new token checked */
--line: rgba(42,35,24,.15);
--line-soft: rgba(42,35,24,.09);
--poppy: #EE9C16;
--poppy-deep: #29313C;
--poppy-soft: #FEF3E6;
--field: #4c6a45;
--field-soft: #dfe9d6;
--wheat: #b9852b;
--wheat-soft: #f1e2bf;
--sky: #4f7089;
--sky-soft: #dbe6ea;
/* Flemish waste-fraction colours — recognisable at a glance,
matched to the real bag/container colours. Ready for BUILD.md Phase 4. */
--waste-rest: #504a42;
--waste-pmd: #2f6fb0;
--waste-gft: #4c6a45;
--waste-papier: #93672f;
--waste-glas: #2e7d5b;
--radius: 11px;
--radius-lg: 16px;
--shadow-1: 0 1px 2px rgba(42,35,24,.05);
--shadow-2: 0 12px 28px -14px rgba(42,35,24,.22);
--ease: cubic-bezier(.22,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:'Karla',system-ui,-apple-system,sans-serif;
background:var(--bg);
color:var(--ink);
min-height:100vh;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
line-height:1.6;
position:relative;
}
a{color:var(--poppy-deep);text-decoration-color:rgba(140,42,32,.35);text-underline-offset:2px}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:4px}
.container{max-width:1080px;margin:0 auto;padding:0 1.35rem}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.01em}
/* ── Decorative motif ──────────────────────────────── */
.poppy-motif{
position:absolute;top:-30px;right:-60px;z-index:0;pointer-events:none;
color:var(--poppy);opacity:.05;
transform:rotate(12deg);
}
@media(max-width:640px){ .poppy-motif{ width:220px;height:220px;top:-15px;right:-70px } }
/* ── Masthead ─────────────────────────────────────── */
.site-head{position:relative;z-index:1;padding:2.4rem 0 1.1rem}
.head-inner{display:flex;flex-direction:column;gap:.5rem}
.masthead-line{
font-family:'Karla',sans-serif;font-size:.76rem;font-weight:600;
text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2);
animation:riseIn .5s var(--ease) both;
}
.masthead-sep{margin:0 .5rem;color:var(--ink-3)}
.masthead-tag{color:var(--poppy-deep)}
.brand{display:inline-block;line-height:0;animation:riseIn .6s .06s var(--ease) both}
.brand-logo{display:block;height:clamp(38px,6vw,58px);width:auto;max-width:350px}
.brand-sub{
color:var(--ink-2);font-size:.96rem;max-width:38rem;margin-top:.6rem;
animation:riseIn .6s .12s var(--ease) both;
}
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* ── Quick links — "snel naar", the practical stuff people
actually came for: recyclage, wachtapotheek, noodnummers. ── */
.quick-links{position:relative;z-index:1;padding:.3rem 0 1.9rem}
.quick-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;
border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
padding:1.3rem 0;
}
.quick-item{
display:flex;align-items:center;gap:.75rem;
padding:.4rem;border-radius:10px;
text-decoration:none;color:var(--ink);
transition:background .18s var(--ease),transform .18s var(--ease);
}
.quick-item:hover{background:var(--tint);transform:translateY(-1px);text-decoration:none}
.quick-icon{
display:flex;align-items:center;justify-content:center;flex-shrink:0;
width:2.5rem;height:2.5rem;border-radius:50%;
background:var(--tint);color:var(--poppy-deep);
}
.quick-item:nth-child(1) .quick-icon{color:var(--wheat);background:var(--wheat-soft)}
.quick-item:nth-child(2) .quick-icon{color:var(--poppy-deep);background:var(--poppy-soft)}
.quick-item:nth-child(3) .quick-icon{color:var(--wheat);background:var(--wheat-soft)}
.quick-item:nth-child(4) .quick-icon{color:var(--poppy-deep);background:var(--poppy-soft)}
.quick-label{font-size:.88rem;font-weight:600;line-height:1.3}
.quick-label small{display:block;font-size:.74rem;font-weight:500;color:var(--ink-2);margin-top:.05rem}
/* ── Deelgemeente filter ──────────────────────────── */
.dg-bar{position:relative;z-index:1;padding:0 0 1.6rem}
.dg-inner{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center}
.dg-label{font-size:.78rem;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;margin-right:.3rem}
.dg-chip{
padding:.4rem 1.05rem;border-radius:100px;
border:1.5px solid var(--line);
background:var(--bg);
color:var(--ink-2);
font-size:.85rem;font-weight:600;
text-decoration:none;
transition:border-color .18s var(--ease),color .18s var(--ease),
background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.dg-chip:hover{color:var(--ink);border-color:var(--poppy);text-decoration:none;transform:translateY(-1px)}
.dg-chip.on{
color:#fdf6ee;border-color:var(--poppy);background:var(--poppy);
box-shadow:var(--shadow-1);
}
/* ── Module band — the tinted section that groups afval,
agenda, nieuws, weer and overlijden, the way a portal groups
its content clusters against a light band. ── */
.module-band{position:relative;z-index:1;background:#f8f8f8;padding:2.1rem 0 2.4rem}
.card{
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius);
padding:1.5rem 1.5rem 1.6rem;
margin-bottom:1.35rem;
box-shadow:var(--shadow-1);
transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.accent-wheat{border-top-color:transparent}
.accent-field{border-top-color:transparent}
.accent-sky{border-top-color:transparent}
.accent-poppy{border-top-color:transparent}
.card.sober{border-top-color:transparent;background:#f8f8f8;box-shadow:none}
.card.sober:hover{transform:none;box-shadow:none}
.card-head{
display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;
justify-content:space-between;
margin-bottom:1.15rem;
}
.card-head h2{font-size:1.12rem;font-weight:600;margin-right:auto}
.card-icon{
display:inline-flex;color:var(--poppy-deep);flex-shrink:0;
order:-1;margin-right:-.25rem;
}
.accent-wheat .card-icon{color:var(--wheat)}
.accent-field .card-icon{color:var(--wheat)}
.accent-sky .card-icon{color:var(--wheat)}
.accent-poppy .card-icon{color:var(--poppy)}
.card-src{
font-size:.78rem;font-weight:600;color:var(--ink-3);
text-transform:uppercase;letter-spacing:.04em;
white-space:nowrap;
}
.card-src a{color:var(--ink-2);text-decoration:none;border-bottom:1px dotted var(--ink-3)}
.card-src a:hover{color:var(--poppy-deep);border-color:var(--poppy-deep)}
/* Reveal-on-scroll, staggered by position among siblings */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.on{opacity:1;transform:translateY(0)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.35rem}
.grid-2 .card{margin-bottom:1.35rem}
.empty{color:var(--ink-2);font-size:.96rem}
.empty small{color:var(--ink-3);font-size:.87rem}
/* ── Weer ─────────────────────────────────────────────
Deliberately a slim utility strip, not a hero: on a village
bulletin the news, afvalkalender and agenda carry the weight,
the weather is a glance-and-move-on. */
.card.wx{padding:1.05rem 1.5rem}
.card.wx .card-head{margin-bottom:.7rem}
.wx-now{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.wx-now-icon{color:var(--wheat);flex-shrink:0;line-height:0}
.wx-icon.wx-regen{color:var(--sky)}
.wx-icon.wx-onweer{color:var(--poppy-deep)}
.wx-icon.wx-bewolkt,.wx-icon.wx-mist,.wx-icon.wx-halfbewolkt{color:var(--ink-2)}
.wx-icon.wx-sneeuw{color:#5f7688}
.wx-now-main{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;flex-shrink:0}
.wx-temp{
font-family:'Fraunces',Georgia,serif;font-weight:600;
font-size:1.85rem;line-height:1;letter-spacing:-.01em;color:var(--ink);
}
.wx-temp span{font-family:'Karla',sans-serif;font-size:.95rem;font-weight:500;color:var(--ink-2);margin-left:.1rem}
.wx-text{color:var(--ink-2);font-size:.9rem}
.wx-meta{
display:flex;flex-wrap:wrap;gap:.2rem 1.15rem;
padding-left:1.15rem;margin-left:.15rem;border-left:1px dashed var(--line);
}
.wx-meta div{display:flex;align-items:baseline;gap:.3rem}
.wx-meta dt{font-size:.68rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.wx-meta dd{font-size:.85rem;font-weight:600;color:var(--ink)}
.wx-days{
list-style:none;display:flex;gap:.3rem;
margin-left:auto;padding-left:1.15rem;border-left:1px dashed var(--line);
}
.wx-day{
display:flex;flex-direction:column;align-items:center;gap:.2rem;
padding:.3rem .55rem;border-radius:8px;
text-align:center;
transition:background .2s var(--ease);
}
.wx-day:hover{background:var(--wheat-soft)}
.wx-day-label{font-size:.66rem;color:var(--ink-2);font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.wx-day .wx-icon{color:var(--wheat)}
.wx-day-temp{font-size:.76rem;white-space:nowrap}
.wx-day-temp strong{font-weight:700;color:var(--ink)}
.wx-day-temp em{font-style:normal;color:var(--ink-3);margin-left:.2rem}
/* ── Afvalkalender fraction badges — ready for BUILD.md Phase 4 ──
Use as: PMD */
.waste-badge{
display:inline-flex;align-items:center;gap:.4rem;
padding:.3rem .7rem;border-radius:100px;
font-size:.78rem;font-weight:700;letter-spacing:.02em;
color:#fdf6ee;
}
.waste-badge::before{content:'';width:.55rem;height:.55rem;border-radius:50%;background:currentColor;flex-shrink:0}
.waste-rest{background:var(--waste-rest)}
.waste-pmd{background:var(--waste-pmd)}
.waste-gft{background:var(--waste-gft)}
.waste-papier{background:var(--waste-papier)}
.waste-glas{background:var(--waste-glas)}
/* ── Gemeentenieuws grid — ready for BUILD.md Phase 5 ──
*/
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.news-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card);box-shadow:var(--shadow-1)}
.news-thumb{aspect-ratio:16/10;background:var(--tint);overflow:hidden}
.news-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.news-body{padding:.9rem 1rem 1.1rem}
.news-tag{
display:inline-block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
color:var(--poppy-deep);background:var(--poppy-soft);padding:.2rem .55rem;border-radius:100px;margin-bottom:.55rem;
}
.news-body h3{font-size:1rem;font-weight:600;line-height:1.35;margin-bottom:.4rem}
.news-body h3 a{color:var(--ink);text-decoration:none}
.news-body h3 a:hover{color:var(--poppy-deep)}
.news-body time{font-size:.78rem;color:var(--ink-3)}
@media(max-width:760px){.news-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.news-grid{grid-template-columns:1fr}}
/* ── Foot ─────────────────────────────────────────── */
.site-foot{
position:relative;z-index:1;
border-top:2px solid var(--poppy);
background:var(--bg);
padding:2.4rem 0 2.6rem;
color:var(--ink-2);font-size:.87rem;
}
.foot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.25rem;margin-bottom:1.85rem}
.foot-grid h4{
font-family:'Fraunces',Georgia,serif;color:var(--ink);font-size:.95rem;
font-weight:600;margin-bottom:.6rem;letter-spacing:-.005em;
}
.foot-links{list-style:none;display:flex;flex-direction:column;gap:.35rem}
.foot-links a{color:var(--ink-2);text-decoration:none;border-bottom:1px dotted transparent}
.foot-links a:hover{color:var(--poppy-deep);border-color:var(--poppy-deep)}
.foot-bottom{
padding-top:1.35rem;border-top:1px solid var(--line);
font-size:.76rem;color:var(--ink-3);
}
/* ── Responsive ───────────────────────────────────── */
@media(max-width:760px){
.quick-grid{grid-template-columns:1fr 1fr}
.grid-2{grid-template-columns:1fr}
.foot-grid{grid-template-columns:1fr;gap:1.5rem}
.wx-meta{border-left:none;border-top:1px dashed var(--line);padding-left:0;margin-left:0;padding-top:.55rem;width:100%}
.wx-days{border-left:none;border-top:1px dashed var(--line);padding-left:0;margin-left:0;padding-top:.55rem;width:100%;justify-content:space-between}
}
@media(max-width:420px){
.quick-grid{grid-template-columns:1fr}
.card{padding:1.25rem 1.1rem 1.35rem}
.card.wx{padding:1rem 1.1rem}
.wx-day{padding:.3rem .3rem}
}
/* ── Reduced motion ───────────────────────────────── */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}