/* Sjaaks Kaas v2 — season.css (season agent). Mobile first. zet --season (accentkleur) en --season-soft; andere modules mogen die gebruiken. */ :root{--season:#B35A24;--season-soft:color-mix(in srgb,var(--season) 12%,var(--surface))} .season-sinterklaas{--season:#B8452F} .season-kerst{--season:#A8322D} .season-winter{--season:#5B7FA0} .season-lente{--season:#6E9A3A} .season-koningsdag{--season:#E3701B} .season-graskaas{--season:#4F9A3A} .season-zomer{--season:#D39A12} .season-herfst{--season:#B35A24} @supports not (background:color-mix(in srgb,red 50%,blue)){:root{--season-soft:var(--bg-2)}} /* ---------- lint onder de header ---------- */ .season-rib{ position:relative; background:var(--season-soft); color:var(--ink); border-bottom:1px solid var(--line); box-shadow:inset 3px 0 0 var(--season); overflow:hidden; max-height:160px; transition:max-height .26s var(--ease),opacity .2s var(--ease); } .season-rib.season-rib-out{max-height:0; opacity:0; border-bottom-width:0} .season-rib-in{display:flex; align-items:center; gap:8px; min-height:44px; padding-block:0} .season-ic{flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:var(--season); background:var(--surface); border:1px solid color-mix(in srgb,var(--season) 35%,var(--line))} .season-ic svg{width:15px; height:15px} .season-txt{flex:1 1 auto; min-width:0; margin:0; font-size:13px; line-height:1.3; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .season-txt b{font-family:var(--display); font-weight:700; color:var(--ink); font-size:14.5px} .season-sep{color:var(--muted)} .season-long{display:none} .season-cta{flex:none; display:inline-flex; align-items:center; gap:4px; min-height:44px; white-space:nowrap; font-weight:700; font-size:13.5px; color:var(--ink); text-decoration:underline; text-decoration-color:var(--season); text-decoration-thickness:2px; text-underline-offset:4px; border-radius:6px} .season-cta:hover{color:var(--season)} .season-cta:focus-visible,.season-x:focus-visible{outline:2px solid var(--focus); outline-offset:2px} .season-x{flex:none; width:40px; height:44px; margin-right:-10px; border:0; background:none; color:var(--muted); font-size:22px; line-height:1; border-radius:50%; display:grid; place-items:center; cursor:pointer} .season-x:hover{color:var(--ink)} @media (min-width:700px){ .season-rib-in{gap:14px} .season-ic{width:30px; height:30px} .season-ic svg{width:18px; height:18px} .season-txt{font-size:14px; white-space:normal} .season-short{display:none} .season-long{display:inline} .season-cta{font-size:14px} .season-x{width:44px} } /* ---------- graskaas-CTA: kaart even laten oplichten ---------- */ .card.season-hl{box-shadow:0 0 0 3px var(--season),var(--shadow);animation:season-hl 1.4s var(--ease) 2} @keyframes season-hl{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--season) 35%,transparent),var(--shadow)}} @media (prefers-reduced-motion:reduce){ .season-rib{transition:none} .card.season-hl{animation:none} }