.pol-overzicht,.pol-navigatie{min-width:0;overflow-wrap:anywhere} #fr-main .pol-raad>:is(h2,p,dl){margin:0} .pol-raad h2{font-family:var(--fr-serif,Georgia,serif);font-weight:500} .pol-zetels{margin:16px 0} .pol-zetels>div{display:flex;gap:16px;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--fr-lijn,#ddd)} .pol-zetels dt{font-weight:500} .pol-zetels dd{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:0;text-align:right;flex-shrink:0;max-width:45%} .pol-partijen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:20px} .pol-partijkaart{display:flex;flex-direction:column;min-width:0} #fr-main .pol-partijkaart h3{font-family:var(--fr-serif,Georgia,serif);font-weight:500;font-size:1.5rem;margin:12px 0} .pol-partijkaart .pol-meer-link{margin-top:auto;padding-top:12px} .pol-meta,.pol-bronstand,.pol-betaald{font-size:.85rem;line-height:1.5} .pol-meta{margin:0} .pol-bronstand{color:var(--portal-muted,#595959)} .pol-betaald{display:block;font-weight:600;padding:6px 0} .pol-nav-lijst{list-style:none;margin:0;padding:0} .pol-nav-lijst li+li{border-top:1px solid var(--fr-lijn,#ddd)} .pol-nav-lijst strong{font-weight:600} .pol-nav-lijst span,.pol-nav-lijst small{font-size:.8rem;line-height:1.4} .pol-nav-lijst a:hover,.pol-nav-lijst a[aria-current]{text-decoration:underline} .pol-meer-link{display:block;margin-top:12px} .pol-leden-lijst{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} .pol-leden-lijst li{display:flex;align-items:flex-start;gap:12px;min-width:0} .pol-leden-lijst h3,.pol-speerpunten h3{font-size:1rem;margin:0 0 4px} .pol-leden-lijst p{margin:0 0 4px} .pol-portret{width:64px;height:80px;object-fit:cover;flex-shrink:0;border-radius:4px} .pol-bronnen a{display:block;overflow-wrap:anywhere} .pol-speerpunten li+li{margin-top:16px} @media(max-width:600px){.pol-partijen,.pol-leden-lijst{grid-template-columns:minmax(0,1fr)} .pol-zetels>div{gap:10px} #fr-main .pol-partijkaart h3{font-size:1.35rem} } .pol-totalen{display:flex;align-items:baseline;gap:10px} .pol-totalen strong{font:2rem var(--fr-serif,Georgia,serif)} .pol-totalen strong+strong{margin-left:20px} .pol-stippen{display:flex;flex-wrap:wrap;gap:5px;max-width:180px} .pol-stippen>span{display:block;width:9px;height:9px;border-radius:50%;background:currentColor} .pol-monogram,.pol-initialen{display:flex;align-items:center;justify-content:center;background:var(--fr-bg);border:1px solid var(--fr-lijn);color:var(--portal-heading);font-family:var(--fr-serif,Georgia,serif)} .pol-monogram{width:48px;height:48px;margin-bottom:12px} @media(max-width:600px){.pol-stippen{display:none} } .pol-kaart-boven{display:flex;align-items:center;justify-content:space-between;gap:12px} .pol-kaart-boven .pol-monogram{margin:0;flex-shrink:0} .pol-kaart-boven .pol-meta{text-align:right} #fr-main .pol-partijkaart{padding:20px} #fr-main .pol-partijkaart>p{margin:0 0 10px} #fr-main .pol-overzicht>h2{margin:0 0 16px} .pol-nav-lijst a{padding:10px 0;color:inherit;text-decoration:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 10px;min-height:44px} .pol-nav-lijst small,.pol-nav-lijst .pol-betaald{grid-column:1/-1} .pol-voorbehoud{margin:0 0 4px;font-size:.78rem;line-height:1.4;color:var(--fr-stil,#5b6878)} .pol-zetelbadge{display:inline-flex;align-items:center;justify-content:center;min-width:29px;height:29px;border:1px solid var(--fr-lijn);background:var(--fr-bg);font-family:var(--fr-mono,monospace)} @media(min-width:1025px){ [data-fr-rail]>.fr-rail-inhoud:has(>.pol-navigatie){height:max(16rem,calc(100dvh - var(--dorps-rail-top,10rem) - 1rem));overflow:hidden} [data-fr-rail]>.fr-rail-inhoud:has(>.pol-navigatie)>.fr-clubs{display:flex;flex-direction:column;flex:1 1 0;min-height:0;max-height:none;overflow:hidden} [data-fr-rail]>.fr-rail-inhoud:has(>.pol-navigatie)>.pol-navigatie{display:flex;flex-direction:column;flex:0 1 auto;min-height:0;max-height:50%;overflow:hidden} [data-fr-rail]>.fr-rail-inhoud:has(>.pol-navigatie) :is(.fr-clubs-lijst,.pol-nav-lijst){min-height:0;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin} } .pol-claim{border-left:4px solid var(--portal-heading,#24364b);background:var(--fr-tint,var(--portal-bg,#f2f4f6))} .pol-claim h2,.pol-aanbod h2,.pol-voortgang h2{font-family:var(--fr-serif,Georgia,serif);font-weight:500;font-size:1.6rem;line-height:1.2} .pol-aanbod,.pol-voortgang{overflow-wrap:anywhere} .pol-voortgang-balk{display:block;width:100%;height:12px;accent-color:var(--portal-heading,#24364b);border:0;border-radius:6px;overflow:hidden;background:var(--fr-lijn,#ddd)} .pol-voortgang-balk::-webkit-progress-bar{background:var(--fr-lijn,#ddd)} .pol-voortgang-balk::-webkit-progress-value{background:var(--portal-heading,#24364b)} .pol-voortgang-balk::-moz-progress-bar{background:var(--portal-heading,#24364b)} .pol-voortgang-links{display:flex;flex-wrap:wrap;gap:8px 20px;padding-left:20px} .pol-voortgang-links a{display:inline-block;min-height:32px;padding:4px 0} .pol-leden,.pol-speerpunten{position:relative} .pol-vragen,.pol-vraag-pagina{min-width:0;overflow-wrap:anywhere} .pol-wachtstand{font-size:.85rem;color:var(--portal-muted,#595959)} .pol-vraag{padding:20px 0;border-top:1px solid var(--fr-lijn,#ddd)} .pol-vraag-tekst{font-weight:600} .pol-vraag-datum{font-size:.85rem;line-height:1.5;color:var(--portal-muted,#595959)} .pol-antwoord{margin-top:16px;padding:16px;border-left:3px solid var(--portal-heading,#24364b);background:var(--fr-tint,var(--portal-bg,#f2f4f6))} #fr-main .pol-antwoord h3{font-size:1rem;margin:0 0 10px} #fr-main .pol-antwoord p:last-child{margin-bottom:0} .pol-vraag-formulier{display:flex;flex-direction:column;gap:12px;margin-top:24px} .pol-vraag-formulier label{display:flex;flex-direction:column;gap:6px;font-weight:600} .pol-vraag-formulier :is(input,textarea){box-sizing:border-box;width:100%;min-width:0;padding:12px;border:1px solid var(--fr-lijn,#999);border-radius:4px;background:var(--portal-surface,var(--fr-kaart,#fff));color:var(--portal-text,#222);font:inherit} .pol-vraag-formulier textarea{resize:vertical} .pol-vraag-contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .pol-vraag-val{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .pol-vraag-fout{padding:14px;border:1px solid currentColor;color:var(--portal-text,#222);font-weight:600} .pol-vraag-klaar{padding:20px;border:1px solid var(--fr-lijn,#ddd);background:var(--fr-tint,var(--portal-bg,#f2f4f6))} .pol-vraag-verstuur{align-self:flex-start;border:1px solid var(--portal-heading,#24364b);border-radius:4px;background:var(--portal-heading,#24364b);color:var(--portal-surface,#fff);padding:12px 18px;font:inherit;font-weight:600;cursor:pointer} .pol-vraag-verstuur:hover{background:var(--portal-heading,#24364b);filter:brightness(.9)} @media(max-width:600px){.pol-vraag-contact{grid-template-columns:minmax(0,1fr)}.pol-vragen .stad-blok-kop{align-items:flex-start;flex-direction:column;gap:8px}}
.pw-widget{ --pw-padding:18px; --pw-padding-bottom:14px; --pw-icon-size:72px; position:relative; overflow:hidden; border-radius:22px; width:100%; max-width:100%; box-shadow:0 22px 55px rgba(10,14,40,.35); font-weight:600; isolation:isolate; color:#fff; flex-shrink:0; container-type:inline-size; } .portal-left-col-v20{display:grid;gap:16px;min-width:0} .pw-radius-zacht{border-radius:14px} .pw-radius-recht{border-radius:6px} .pw-widget.pw-noshadow{box-shadow:none !important} .pw-size-compact{--pw-padding:14px;--pw-padding-bottom:11px;--pw-icon-size:60px} .pw-size-compact .pw-top{margin-bottom:8px} .pw-size-compact .pw-title{font-size:.76rem} .pw-size-compact .pw-temp{font-size:2.3rem} .pw-size-compact .pw-desc{font-size:.9rem} .pw-size-compact .pw-now{gap:11px;margin-bottom:10px} .pw-size-compact .pw-row{padding:7px 2px;font-size:.87rem} .pw-size-compact .pw-panel{padding:2px 11px 9px} .pw-size-compact .pw-alert{font-size:.8rem;padding:6px 9px} .pw-size-compact .pw-fact{font-size:.78rem} .pw-size-ruim{--pw-padding:22px;--pw-padding-bottom:18px;--pw-icon-size:84px} .pw-size-ruim .pw-title{font-size:.9rem} .pw-size-ruim .pw-temp{font-size:3.4rem} .pw-size-ruim .pw-desc{font-size:1.05rem} .pw-size-ruim .pw-row{padding:11px 2px;font-size:.98rem} .pw-size-ruim .pw-alert{font-size:.9rem} .pw-size-ruim .pw-fact{font-size:.87rem} .pw-atmosphere{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} .pw-sky{position:absolute;inset:0;z-index:0} .pw-shade{ position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,0) 55%); } .pw-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none} .pw-inner{position:relative;z-index:4;padding:var(--pw-padding) var(--pw-padding) var(--pw-padding-bottom)} .pw-head-content,.pw-body{position:relative;z-index:4} .pw-top{display:flex;align-items:center;gap:10px;margin-bottom:11px} .pw-title{ color:#fff;font-weight:800;font-size:.83rem;letter-spacing:.13em;text-transform:uppercase; text-shadow:0 1px 6px rgba(0,0,0,.35); } .pw-knmi{display:flex;align-items:center;gap:10px;border-radius:12px;padding:9px 12px;font-size:.86rem;font-weight:800;margin-bottom:12px;line-height:1.3} .pw-knmi small{display:block;font-weight:600;font-size:.74rem;opacity:.9} .pw-knmi strong{display:block} .pw-knmi-geel{background:#fef9c3;color:#854d0e;border:1px solid #fde047} .pw-knmi-oranje{background:#ffedd5;color:#9a3412;border:1px solid #fdba74} .pw-knmi-rood{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;animation:pwKnmiPulse 2.2s infinite} @keyframes pwKnmiPulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.35)}50%{box-shadow:0 0 0 7px rgba(220,38,38,0)}} .pw-now{display:flex;align-items:center;gap:14px;margin-bottom:13px;color:#fff} .pw-icon{display:grid;place-items:center;flex:0 0 var(--pw-icon-size);width:var(--pw-icon-size);aspect-ratio:120 / 128;line-height:1;filter:drop-shadow(0 3px 8px rgba(0,0,0,.3))} .pw-icon img{display:block;width:100%;height:auto} .pw-icon canvas{display:block;width:100%;height:auto} .pw-icon img[hidden]{display:none} .pw-temp{font-size:2.9rem;font-weight:800;line-height:1;text-shadow:0 2px 12px rgba(0,0,0,.35)} .pw-temp sup{font-size:1.4rem;top:-.9em;position:relative;vertical-align:baseline} .pw-desc{font-size:.98rem;margin-top:2px;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.4)} .pw-panel{background:rgba(255,255,255,.94);border-radius:14px;padding:4px 13px 11px;color:#22333a} .pw-row{display:flex;justify-content:space-between;gap:10px;padding:9px 2px;border-bottom:1px dashed #dfe5e3;color:#43555b;font-size:.92rem} .pw-row:last-child{border-bottom:none} .pw-row b{color:#22333a;font-weight:700;text-align:right} .pw-alert{display:flex;align-items:center;gap:9px;background:#eef4f2;color:#0f5f5c;border-radius:10px;padding:8px 11px;font-size:.85rem;font-weight:700;margin-top:8px} .pw-fact{border-top:1px dashed #dfe5e3;margin-top:9px;padding-top:9px;color:#5d6d74;font-size:.82rem;line-height:1.5} .pw-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;margin:10px -4px 0;padding:7px 10px;border-radius:10px;background:rgba(10,18,36,.68)} .pw-radius-zacht .pw-foot{border-radius:8px} .pw-radius-recht .pw-foot{border-radius:4px} .pw-updated{color:#fff;font-size:.73rem;line-height:1.35;margin-left:auto} .pw-clock{white-space:nowrap} .pw-widget button.pw-geo{ display:inline-flex;align-items:center;gap:6px; border:none;background:transparent !important;padding:0;margin:0;min-height:0;min-width:0;width:auto;box-shadow:none; color:var(--pw-geo-color,#fff) !important;font:inherit;font-size:.82rem;font-weight:800;line-height:1.35;cursor:pointer; white-space:nowrap; } @container (max-width:300px){ .pw-foot{flex-direction:column;align-items:flex-start} .pw-updated{margin-left:0} } .pw-widget button.pw-geo:is(:hover,:focus-visible,:active){background:transparent !important;color:var(--pw-geo-color,#fff) !important;box-shadow:none} .pw-widget button.pw-geo:is(:hover,:focus-visible) .pw-geo-txt{text-decoration:underline} .pw-widget button.pw-geo:focus-visible{outline:2px solid currentColor;outline-offset:4px} .pw-widget button.pw-geo[hidden]{display:none} @media(max-width:1280px){ .portal-home-inner-v147 .pw-widget, .portal-home-inner-v147 .portal-left-col-v20, .portal-contact-v1473 .pw-widget, .portal-contact-v1473 .portal-left-col-v20, .portal-auth-v148 .pw-widget, .portal-auth-v148 .portal-left-col-v20{display:none} } .pw-sun{ position:absolute;top:-46px;right:-38px;width:190px;height:190px;border-radius:50%; z-index:1;pointer-events:none; background:radial-gradient(circle,rgba(255,214,120,.9) 0%,rgba(255,190,80,.3) 45%,transparent 70%); animation:pwSunSpin 40s linear infinite; } @keyframes pwSunSpin{to{transform:rotate(360deg)}} .pw-moon{ --pw-moon-size:54px;width:var(--pw-moon-size);height:var(--pw-moon-size); position:absolute;top:44px;right:16px;z-index:1;pointer-events:none; display:grid;place-items:center; filter:drop-shadow(0 0 16px rgba(220,230,255,.5)); } .pw-moon canvas{display:block;width:100%;height:100%} .pw-moon-foto{--pw-moon-size:66px} .pw-moon-minimaal{--pw-moon-size:38px} .pw-moon-dimmed{opacity:.4} .pw-moon-realistisch{animation:pwMoonFloat 8s ease-in-out infinite} .pw-moon-sikkel{--pw-moon-size:46px;animation:pwMoonGlow 5s ease-in-out infinite} @keyframes pwMoonFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes pwMoonGlow{ 0%,100%{filter:drop-shadow(0 0 12px rgba(245,205,130,.45))} 50%{filter:drop-shadow(0 0 26px rgba(245,205,130,.85))} } .pw-flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:3;pointer-events:none} .pw-flash-active{animation:pwFlash .57s ease-out} @keyframes pwFlash{0%,12%{opacity:.7}100%{opacity:0}} .pw-live .pw-icon{animation:pwIconBob 4s ease-in-out infinite} @keyframes pwIconBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} @media (prefers-reduced-motion: reduce){ .pw-knmi-rood{animation:none} .pw-sun,.pw-moon-realistisch,.pw-moon-sikkel,.pw-live .pw-icon,.pw-flash-active{animation:none} } .pw-skin-kaart{--pw-geo-color:var(--pw-kaart-accent,#2f5d8a);background:var(--pw-kaart-vlak,#fff);border:1.5px solid var(--pw-kaart-rand,#dfe5ec);color:var(--pw-kaart-inkt,#22333a);box-shadow:0 8px 26px rgba(35,47,62,.08)} .pw-skin-kaart .pw-shade{background:none} .pw-skin-kaart .pw-head{position:relative;overflow:hidden;margin:calc(-1 * var(--pw-padding)) calc(-1 * var(--pw-padding)) 13px} .pw-skin-kaart .pw-head-content{box-sizing:border-box;width:fit-content;max-width:100%;padding:var(--pw-padding) var(--pw-padding) 1px} .pw-skin-kaart .pw-head-content::before{ content:"";position:absolute;inset:0 -96px 0 0;z-index:-1;pointer-events:none; background:linear-gradient(90deg,rgba(3,35,76,.70),rgba(3,35,76,.70) calc(100% - 96px),rgba(3,35,76,0)); } .pw-skin-kaart .pw-panel{background:var(--pw-kaart-vlak,#fff);color:var(--pw-kaart-inkt,#22333a)} .pw-skin-kaart .pw-row{color:var(--pw-kaart-zacht,#4b5b6b);border-bottom-color:var(--pw-kaart-rand,#dfe5ec)} .pw-skin-kaart .pw-row b{color:var(--pw-kaart-inkt,#22333a)} .pw-skin-kaart .pw-foot{background:var(--pw-kaart-vlak,#fff)} .pw-skin-kaart .pw-updated{color:var(--pw-kaart-accent,#2f5d8a)}
.weer-app { --weer-goud: var(--fr-messingdonker, var(--fr-kicker, var(--fr-stil))); --weer-paneel: var(--fr-voet, #15213b); --weer-glas: color-mix(in srgb, var(--weer-paneel) 93%, transparent); --weer-tegel: var(--fr-bg); --weer-lijn: var(--fr-lijn, var(--fr-rand)); --weer-knoprand: var(--fr-rand2, var(--fr-rand)); --weer-hoek: var(--fr-hoek, 10px); --weer-hoek-klein: var(--fr-hoek-klein, 8px); --weer-hoek-knop: var(--fr-hoek-knop, 8px); --weer-gekozen: color-mix(in srgb, var(--fr-tekst) 5%, var(--fr-kaart)); --weer-spoor: color-mix(in srgb, var(--fr-tekst) 8%, var(--fr-kaart)); --weer-regen: #2a63c4; --weer-regenvlak: #2f6fd6; --weer-koud: #2f66c4; --weer-rood: #c0392b; --weer-zon: #e0a52c; --weer-tempvlak: color-mix(in srgb, #d59a2b 22%, var(--fr-kaart)); --weer-templijn: #d59a2b; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.125rem; min-width: 0; max-width: 100%; color: var(--fr-tekst); font: 400 .9375rem/1.45 var(--fr-sans); font-variant-numeric: tabular-nums; } .weer-app *, .weer-app *::before, .weer-app *::after { box-sizing: border-box; } :where(.weer-app) p { margin: 0; } .weer-app a { color: var(--fr-link, var(--fr-tekst)); } .weer-app a:hover { color: var(--weer-goud); } .weer-app :focus-visible { outline: 3px solid var(--fr-tekst); outline-offset: 2px; } .weer-app [hidden] { display: none !important; } .weer-app section { min-width: 0; scroll-margin-top: 5rem; } .weer-verborgen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .weer-tekens { position: absolute; width: 0; height: 0; overflow: hidden; } .weer-teken { display: block; flex: none; overflow: visible; } .weer-stil { color: var(--fr-stil); } .weer-harde-stoot { color: var(--weer-rood); } .weer-pijl { flex: none; fill: none; stroke: var(--fr-stil); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .weer-kaartje { background: var(--fr-kaart); border: 1px solid var(--fr-rand); border-radius: var(--weer-hoek); padding: 1.25rem 1.375rem; position: relative; z-index: 1; } .weer-kicker { font: 400 .6875rem/1.4 var(--fr-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--weer-goud); margin: 0 0 .25rem; } #fr-main .weer-app h2 { font: 500 1.4375rem/1.2 var(--fr-serif); letter-spacing: -.01em; margin: 0 0 .75rem; color: var(--fr-kop, var(--fr-tekst)); } .weer-sectiekop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .375rem 1rem; } #fr-main .weer-sectiekop h2 { margin: 0; } .weer-hint { font-size: .8125rem; color: var(--fr-stil); } .weer-tegel { background: var(--weer-tegel); border-radius: var(--weer-hoek-klein); padding: .75rem .875rem; } .weer-tegel-label, .weer-hulp-tegels dt { font-size: .75rem; color: var(--fr-stil); } .weer-tegel-groot { font: 600 1.375rem/1.1 var(--fr-serif); margin: .125rem 0 0; } .weer-tegel-waarde { font-weight: 600; font-size: .9375rem; margin: .25rem 0 0; } .weer-tegel-sub { font-size: .78125rem; color: var(--fr-stil); margin: .1875rem 0 0; } .weer-noot { font-size: .8125rem; line-height: 1.5; color: var(--fr-stil); margin-top: .625rem; } .weer-storing { color: var(--fr-stil); } .weer-waarschuwingen { flex: 1 1 100%; min-width: 0; position: relative; z-index: 1; display: grid; gap: 1.125rem; } .weer-kaartwaarschuwing { display: none; } .weer-waarschuwing { flex: 1 1 100%; min-width: 0; position: relative; z-index: 1; background: var(--weer-paneel); color: #fff; border-radius: var(--weer-hoek); overflow-wrap: anywhere; } .weer-waarschuwing > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; padding: .75rem 1rem; cursor: pointer; list-style: none; } .weer-waarschuwing > summary::-webkit-details-marker { display: none; } .weer-waarschuwing-code { width: 14px; height: 14px; flex: none; border-radius: 3px; background: #f2c230; box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); } .weer-waarschuwing.is-oranje .weer-waarschuwing-code { background: #f08c2d; } .weer-waarschuwing.is-rood .weer-waarschuwing-code { background: #dd3333; } .weer-waarschuwing-titel { font-weight: 600; font-size: .9375rem; } .weer-waarschuwing-meta { color: rgba(255, 255, 255, .82); font-size: .875rem; } .weer-waarschuwing-knop { margin-left: auto; min-height: 36px; display: inline-flex; align-items: center; padding: .375rem .75rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: 6px; font-size: .8125rem; font-weight: 500; } .weer-waarschuwing > summary:hover .weer-waarschuwing-knop { background: rgba(255, 255, 255, .1); } .weer-waarschuwing[open] .weer-dicht, .weer-waarschuwing:not([open]) .weer-open { display: none; } .weer-waarschuwing-tekst { padding: 0 1rem .875rem; font-size: .9375rem; line-height: 1.5; color: rgba(255, 255, 255, .92); } .weer-waarschuwing-tekst p + p { margin-top: .5rem; } .weer-brontekst { white-space: pre-line; } .weer-app .weer-waarschuwing-tijd { font-size: .78125rem; color: rgba(255, 255, 255, .7); } .weer-waarschuwing :focus-visible { outline-color: #fff; } .weer-bladkop { flex: 1 1 100%; min-width: 0; position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .625rem 1.25rem; } .weer-bladkop-tekst { min-width: 0; } #fr-main .weer-app h1 { font: 500 clamp(1.875rem, 4vw, 2.625rem)/1.05 var(--fr-serif); letter-spacing: -.015em; margin: 0; color: var(--fr-kop, var(--fr-tekst)); overflow-wrap: anywhere; } .weer-bijgewerkt { display: flex; align-items: flex-start; gap: .5rem; margin-top: .375rem; font-size: .875rem; color: var(--fr-stil); } .weer-levend { width: 8px; height: 8px; flex: none; margin-top: 6px; border-radius: 50%; background: #2e9e5b; animation: weer-pols 2.4s ease-in-out infinite; } @keyframes weer-pols { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } .weer-bladkop-knoppen { display: flex; flex-wrap: wrap; gap: .625rem; max-width: 100%; } .weer-knop { min-height: 44px; display: inline-flex; align-items: center; gap: .5rem; padding: 0 1rem; border: 1px solid var(--weer-knoprand); border-radius: var(--weer-hoek-knop); background: var(--fr-kaart); color: var(--fr-tekst); font: 500 .875rem var(--fr-sans); cursor: pointer; } .weer-knop:hover { border-color: var(--fr-tekst); } .weer-knop svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .weer-deeladres { min-width: 0; width: 100%; padding: .6rem; border: 1px solid var(--fr-rand); background: var(--fr-kaart); color: var(--fr-tekst); } .weer-radar { flex: 3 1 35rem; min-width: 0; position: relative; z-index: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--weer-hoek); background: var(--weer-paneel); box-shadow: 0 1px 2px rgba(20, 26, 42, .08); } .weer-kaartvak { position: relative; isolation: isolate; height: clamp(300px, 44vh, 470px); background: #dde3e9; } .weer-kaart { position: absolute; inset: 0; z-index: 0; } .weer-kaart-svg { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; } .weer-app.is-interactive .weer-kaart-svg { touch-action: none; cursor: grab; } .weer-kaart-svg.is-slepen { cursor: grabbing; } .weer-kaart-svg:focus-visible { outline-offset: -4px; } .weer-kaart-zee { fill: #e3e8ed; } .weer-kaart-radar image { opacity: 0; transition: opacity .18s linear; } .weer-kaart-radar image.is-zichtbaar { opacity: .84; } .weer-kaart-stip-halo { fill: rgba(21, 33, 59, .18); } .weer-kaart-stip-kern { fill: #15213b; stroke: #fff; stroke-width: 2.5; } .weer-kaart-stip.is-jij .weer-kaart-stip-kern { fill: #2f6fd6; } .weer-kaart-stip text { font: 600 12px var(--fr-sans); dominant-baseline: middle; fill: #15213b; stroke: rgba(255, 255, 255, .9); stroke-width: 4px; stroke-linejoin: round; paint-order: stroke; } .weer-kaartlagen { position: absolute; z-index: 3; left: 12px; right: 12px; top: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: .625rem; pointer-events: none; } .weer-kaartlagen > * { pointer-events: auto; } .weer-kaartlinks { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; min-width: 0; } .weer-kaartpil { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .625rem; min-width: 0; min-height: 44px; padding: .5rem .875rem .5rem .75rem; border-radius: 22px; background: var(--weer-glas); color: #fff; box-shadow: 0 2px 8px rgba(20, 26, 42, .2); } .weer-kaartpil svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .weer-kaartpil strong { font-weight: 600; font-size: .9375rem; overflow-wrap: break-word; } .weer-kaartpil-streep { width: 1px; height: 16px; flex: none; background: rgba(255, 255, 255, .28); } .weer-kaartpil output { font-size: .84375rem; color: rgba(255, 255, 255, .88); white-space: nowrap; } .weer-kaartknoppen { display: flex; flex-direction: column; gap: .5rem; } .weer-rondknop { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--weer-glas); color: #fff; box-shadow: 0 2px 8px rgba(20, 26, 42, .2); cursor: pointer; } .weer-rondknop:hover { background: var(--weer-paneel); } .weer-rondknop svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .weer-rondknop .is-vol { fill: currentColor; } .weer-kaartlagen :focus-visible, .weer-band :focus-visible { outline-color: #fff; } .weer-radar.is-leeg .weer-kaartvak { height: auto; min-height: 10rem; } .weer-radar-leeg { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: .25rem; padding: 4.5rem 1.25rem 1.25rem; color: #5d6474; text-align: center; } .weer-band { padding: .75rem 1rem .75rem .75rem; background: var(--weer-paneel); color: #fff; } .weer-band-rij { display: flex; align-items: center; gap: .75rem; } .weer-speelknop { width: 44px; height: 44px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--weer-paneel); cursor: pointer; } .weer-speelknop:hover { background: #e9ecf3; } .weer-speelknop svg { fill: currentColor; } .weer-speelknop .weer-pauze, .weer-band.is-spelen .weer-speelknop .weer-speel { display: none; } .weer-band.is-spelen .weer-speelknop .weer-pauze { display: block; } .weer-tijdlijn { flex: 1; min-width: 0; } .weer-tijdlijn-kop { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 .75rem; margin: 0 0 .375rem; font-size: .75rem; color: rgba(255, 255, 255, .72); } .weer-tijdlijn-straks { min-width: 0; text-align: right; } .weer-smal { display: none; } .weer-tijdlijn-spoor { position: relative; height: 40px; border-radius: 6px; background: rgba(255, 255, 255, .08); } .weer-tijdlijn-verleden { position: absolute; left: 0; top: 0; bottom: 0; width: 33.333%; border-radius: 6px 0 0 6px; background: rgba(255, 255, 255, .08); } .weer-tijdlijn-svg { position: absolute; left: 0; top: -5px; width: 100%; height: 50px; overflow: visible; pointer-events: none; } .weer-buien-onbekend { fill: url(#weer-arcering); } .weer-arcering-streep { fill: rgba(255, 255, 255, .42); } .weer-tijdlijn-leeg { font: 500 12px var(--fr-sans); fill: rgba(255, 255, 255, .85); text-anchor: middle; dominant-baseline: middle; } .weer-buienstaaf { fill: #4d8df0; } .weer-buienstaaf.is-verleden { fill: rgba(170, 190, 225, .9); } .weer-buienstaaf.is-beeld { fill: #9cc4ff; } .weer-tijdlijn-voortgang { fill: #9cc4ff; } .weer-tijdlijn-nu { fill: #fff; } .weer-tijdlijn-knop { fill: #fff; stroke: var(--weer-paneel); stroke-width: 3; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); } .weer-band.is-spelen .weer-tijdlijn-knop { transition: cx .5s linear; } .weer-band.is-spelen .weer-tijdlijn-voortgang { transition: width .5s linear; } .weer-tijdlijn-schuif { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .weer-tijdlijn-spoor:has(.weer-tijdlijn-schuif:focus-visible) { outline: 3px solid #fff; outline-offset: 3px; } .weer-tijdlijn-tijden { display: block; width: 100%; height: 16px; margin-top: .5rem; overflow: visible; } .weer-tijdlijn-tijden text { font: 400 11.5px var(--fr-sans); fill: rgba(255, 255, 255, .72); text-anchor: middle; } .weer-tijdlijn-tijden .is-nu { font-weight: 600; fill: #fff; } .weer-band:not([data-weather-player]) .weer-legenda { margin-left: 0; } .weer-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .625rem; margin: .625rem 0 0 56px; font-size: .6875rem; color: rgba(255, 255, 255, .75); } .weer-legenda-eenheid, .weer-legenda-uitleg { flex: none; white-space: nowrap; } .weer-legenda ol { flex: 1 1 10rem; min-width: 0; display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; } .weer-legenda li { flex: 1; min-width: 0; white-space: nowrap; } .weer-legenda li::before { content: ""; display: block; height: 6px; margin-bottom: 3px; background: #9fd6f5; } .weer-legenda li:first-child::before { border-radius: 3px 0 0 3px; } .weer-legenda li:nth-child(2)::before { background: #4fa0e6; } .weer-legenda li:nth-child(3)::before { background: #2068d6; } .weer-legenda li:nth-child(4)::before { background: #1446bd; } .weer-legenda li:nth-child(5)::before { background: #f0cd46; } .weer-legenda li:nth-child(6)::before { background: #f08c2d; } .weer-legenda li:nth-child(7)::before { background: #e1464b; border-radius: 0 3px 3px 0; } .weer-blad { display: contents; } .weer-nu { flex: 1 1 20rem; min-width: 0; align-self: stretch; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem 1.375rem 1.375rem; background: var(--fr-kaart); border: 1px solid var(--fr-rand); border-radius: var(--weer-hoek); box-shadow: 0 -10px 30px rgba(20, 26, 42, .10); } .weer-nu-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .625rem; } .weer-nu-kop .weer-kicker { margin: 0; } .weer-nu-bron { font-size: .78125rem; color: var(--fr-stil); } .weer-nu-hoofd { display: flex; flex-wrap: wrap; align-items: center; gap: 1.125rem; } .weer-temperatuur { display: flex; align-items: flex-start; font: 400 clamp(76px, 11vw, 100px)/.88 var(--fr-serif); letter-spacing: -.04em; } .weer-temperatuur span { font-size: .42em; line-height: 1; margin-top: .12em; color: var(--fr-stil); } .weer-nu-type { display: flex; flex-direction: column; gap: 2px; min-width: 120px; } .weer-nu-type .weer-teken { margin: -4px 0 2px -4px; } .weer-nu-tekst { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.01em; } .weer-nu-voelt { font-size: .90625rem; color: var(--fr-stil); } .weer-nu-wind { display: flex; align-items: center; gap: .875rem; } .weer-nu-wind > div { min-width: 0; } .weer-nu-windkop { font-weight: 600; font-size: .96875rem; } .weer-nu-windsub { font-size: .84375rem; color: var(--fr-stil); } .weer-kompas { display: block; flex: none; } .weer-kompas-rand { fill: var(--fr-kaart); stroke: var(--weer-knoprand); } .weer-kompas-ring { fill: none; stroke: var(--weer-spoor); } .weer-kompas-streep line { stroke: var(--fr-rand3, var(--fr-rand)); stroke-width: 1; } .weer-kompas text { font: 600 7.5px var(--fr-mono); fill: var(--fr-stil); text-anchor: middle; dominant-baseline: central; } .weer-kompas text.is-noord { fill: var(--weer-goud); } .weer-kompas-pijl { fill: none; stroke: var(--fr-tekst); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .weer-nu-zin { font: 400 clamp(18px, 1.6vw, 21px)/1.38 var(--fr-serif); letter-spacing: -.005em; } .weer-nu-feiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .625rem .875rem; margin: 0; font-size: .84375rem; } .weer-nu-feiten dt { font-size: .75rem; color: var(--fr-stil); } .weer-nu-feiten dd { margin: 0; font-weight: 600; } .weer-nu-noot { margin-top: auto; border-top: 1px solid var(--weer-lijn); padding-top: .75rem; font-size: .8125rem; line-height: 1.5; color: var(--fr-stil); } .weer-nu-noot + .weer-nu-noot { margin-top: 0; border-top: 0; padding-top: 0; } .weer-uren { flex: 1 1 100%; padding: 1.25rem 0 1rem; } .weer-uren > .weer-sectiekop, .weer-uren > .weer-storing { margin: 0 1.375rem .625rem; } .weer-strookvenster { overflow-x: auto; overscroll-behavior-x: contain; padding: 0 14px; scrollbar-width: thin; } .weer-strook { --weer-grafiek-top: 110px; --weer-grafiek-hoogte: 72px; position: relative; isolation: isolate; width: max-content; min-width: 100%; padding-top: 4px; } .weer-strook-temp { position: absolute; left: 2px; top: var(--weer-grafiek-top); width: calc(100% - 4px); height: var(--weer-grafiek-hoogte); pointer-events: none; } .weer-strook-vlak { fill: var(--weer-tempvlak); opacity: .8; } .weer-strook-lijn { fill: none; stroke: var(--weer-templijn); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .weer-strook-stip { fill: var(--fr-kaart); stroke: var(--weer-templijn); stroke-width: 2; vector-effect: non-scaling-stroke; } .weer-strook-uren { display: flex; align-items: stretch; margin: 0; padding: 0 2px; list-style: none; } .weer-uur { position: relative; width: 58px; flex: none; display: flex; flex-direction: column; } .weer-uur-dag { position: relative; z-index: 2; display: block; height: 18px; padding-left: 6px; font: 400 10px/18px var(--fr-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--weer-goud); white-space: nowrap; } .weer-uur:first-child .weer-uur-dag { padding-left: 2px; } .weer-uur.is-nieuwe-dag::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 0; width: 1px; background: var(--fr-rand); } .weer-uur-knop { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 54px; margin: 0 2px; padding: 6px 0 10px; border-radius: var(--weer-hoek-klein); cursor: pointer; } .weer-uur-knop::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transition: background-color .14s ease-out; } .weer-uur-knop.is-gekozen::before { background: var(--weer-gekozen); } @media (hover: hover) { .weer-uur-knop:not(.is-gekozen):hover::before { background: linear-gradient(color-mix(in srgb, var(--fr-tekst) 22%, transparent), color-mix(in srgb, var(--fr-tekst) 22%, transparent)) 50% calc(var(--weer-grafiek-top) - 22px) / 1px var(--weer-grafiek-hoogte) no-repeat, color-mix(in srgb, var(--fr-tekst) 4%, transparent); } } .weer-uur-knop::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 3px; border-radius: 2px; } .weer-uur-knop.is-gekozen::after { background: var(--fr-knop, var(--fr-tekst)); } .weer-uur-knop:focus-visible { outline: 3px solid var(--fr-tekst); outline-offset: -3px; } :where(.weer-uur-knop > span, .weer-uur-knop > time) { display: block; text-align: center; white-space: nowrap; } .weer-uur-tijd { height: 18px; font-size: 13.5px; font-weight: 500; } .weer-uur:first-child .weer-uur-tijd { font-weight: 600; } .weer-uur-knop.is-gekozen .weer-uur-tijd { color: var(--fr-kop, var(--fr-tekst)); } .weer-uur-teken { height: 26px; display: grid; place-items: center; } .weer-uur-temp { height: 22px; font-size: 15px; font-weight: 600; } .weer-uur-regenvak { height: 72px; width: 100%; display: flex; align-items: flex-end; justify-content: center; } .weer-uur-regenvak svg { display: block; fill: var(--weer-regenvlak); opacity: .85; } .weer-uur-regen { height: 16px; font-size: 12px; font-weight: 500; color: var(--fr-stil); } .weer-uur-regen.is-nat { color: var(--weer-regen); } .weer-uur-kans { height: 14px; font-size: 11px; color: var(--fr-stil); } .weer-uur-wind { height: 22px; display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 12.5px; font-weight: 500; } .weer-uur-stoot { height: 14px; font-size: 11px; color: var(--fr-stil); } .weer-uur-stoot.weer-harde-stoot { color: var(--weer-rood); } .weer-gekozen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem 1.625rem; margin: .75rem 1.375rem 0; padding-top: .875rem; border-top: 1px solid var(--weer-lijn); font-size: .875rem; } .weer-gekozen-kop { min-width: 150px; } .weer-gekozen-kop .weer-kicker { letter-spacing: .12em; margin: 0; } .weer-gekozen-titel { font-weight: 600; font-size: 1.0625rem; margin-top: 2px; } .weer-gekozen-tekst { font-size: .8125rem; color: var(--fr-stil); } .weer-gekozen-waarden { display: flex; flex-wrap: wrap; gap: .75rem 1.625rem; flex: 1 1 18rem; margin: 0; } :where(.weer-gekozen-waarden > div) { min-width: 80px; } .weer-gekozen-temp, .weer-gekozen-voelt { min-width: 88px; } .weer-gekozen-neerslag { min-width: 110px; } .weer-gekozen-wind { min-width: 120px; } .weer-gekozen-stoten { min-width: 100px; } .weer-gekozen-waarden dt { font-size: .75rem; color: var(--fr-stil); } .weer-gekozen-waarden dd { margin: 0; font-weight: 600; } .weer-rij { flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: 1.125rem; position: relative; z-index: 1; } .weer-rij > .weer-kaartje { flex: 1 1 18.75rem; min-width: 0; } .weer-zonneboog { display: block; width: 100%; height: auto; margin-top: .375rem; overflow: visible; } .weer-zonneboog-baan { fill: none; stroke: var(--weer-knoprand); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; } .weer-zonneboog-licht { fill: none; stroke: var(--weer-zon); stroke-width: 2.5; stroke-linecap: round; } .weer-zonneboog-horizon { stroke: var(--fr-rand); stroke-width: 1; } .weer-zonneboog-zuid { font: 400 9px var(--fr-mono); letter-spacing: 1px; fill: var(--weer-goud); text-anchor: middle; } .weer-zonneboog-gloed { fill: #f0b83a; opacity: .22; } .weer-zonneboog-zon { stroke: var(--fr-kaart); stroke-width: 2.5; } .weer-zon-tijden { display: flex; justify-content: space-between; gap: .5rem; margin-top: .25rem; font-size: .84375rem; } .weer-zon-tijden > span:not(.weer-stil) { color: var(--fr-stil); } .weer-zon-tijden strong { color: var(--fr-tekst); } .weer-maan { display: flex; align-items: center; gap: .875rem; margin-top: .875rem; } .weer-maan > div { min-width: 0; flex: 1; } .weer-maan-teken { display: block; flex: none; } .weer-maan-naam { font-weight: 600; } .weer-maan-sub { font-size: .8125rem; line-height: 1.45; color: var(--fr-stil); } .weer-maan-sub + .weer-maan-sub { margin-top: 2px; } .weer-maan-sub strong { color: var(--fr-tekst); } .weer-lijst { margin: .875rem 0 0; font-size: .875rem; } .weer-lijst > div { display: grid; grid-template-columns: auto minmax(0, 1fr); border-top: 1px solid var(--weer-lijn); } .weer-lijst dt { padding: .5625rem 1rem .5625rem 0; color: var(--fr-stil); white-space: nowrap; } .weer-lijst dd { margin: 0; padding: .5625rem 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; } .weer-lijst small { display: block; font-weight: 400; font-size: .78125rem; color: var(--fr-stil); } .weer-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem 1rem; } .weer-water .weer-tegel-groot { font-size: 1.25rem; } .weer-water .weer-tegel-waarde { margin-top: .1875rem; } .weer-hulp { display: flex; flex-direction: column; } .weer-hulp-tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; margin: 0; } .weer-hulp-tegels dd { margin: 0; overflow-wrap: anywhere; } .weer-hulp-tegels dd.weer-tegel-groot { margin-top: .125rem; } .weer-hulp-tegels dd.weer-tegel-waarde { margin-top: .25rem; } .weer-hulp-tegels dd.weer-tegel-sub { margin-top: .1875rem; } .weer-hulp-zin { margin-top: .75rem; font-size: .875rem; line-height: 1.5; } .weer-link { margin-top: auto; padding-top: .75rem; display: inline-flex; align-items: center; gap: .375rem; min-height: 44px; font-weight: 600; font-size: .875rem; text-decoration: none; } .weer-rij-onder { align-items: flex-start; } .weer-rij > .weer-dagen { flex: 2 1 32.5rem; padding: 1.25rem 1rem .625rem; } .weer-dagen > .weer-sectiekop { margin: 0 .375rem .375rem; } .weer-dagen > .weer-storing { margin: .5rem .375rem; } .weer-dag { border-top: 1px solid var(--weer-lijn); } .weer-dag > summary { display: grid; grid-template-columns: 84px 30px minmax(110px, 1fr) auto; align-items: center; gap: .75rem; padding: .6875rem .375rem; border-radius: var(--weer-hoek-klein); cursor: pointer; list-style: none; } .weer-dag > summary::-webkit-details-marker { display: none; } .weer-dag > summary:hover { background: var(--weer-tegel); } .weer-dag > summary:focus-visible { outline-offset: -3px; } .weer-dag.is-ver .weer-dag-teken, .weer-dag.is-ver .weer-dagbalk { opacity: .7; } .weer-dag-naam strong { display: block; font-weight: 600; font-size: .90625rem; } .weer-dag-naam small { display: block; font-size: .75rem; color: var(--fr-stil); } .weer-dag-teken { display: grid; place-items: center; } .weer-dag-temp { display: grid; grid-template-columns: 2.5em minmax(0, 1fr) 2.5em; align-items: center; gap: .5rem; font-size: .875rem; } .weer-dag-laag { text-align: right; color: var(--weer-koud); font-weight: 500; white-space: nowrap; } .weer-dag-hoog { font-weight: 600; white-space: nowrap; } .weer-dagbalk { display: block; width: 100%; height: 8px; } .weer-dagbalk-spoor { fill: var(--weer-spoor); } .weer-dag-rest { min-width: 84px; text-align: right; font-size: .8125rem; line-height: 1.35; } :where(.weer-dag-rest > span) { display: flex; justify-content: flex-end; } .weer-dag-regen { color: var(--fr-stil); font-weight: 500; } .weer-dag-regen.is-nat, .weer-dag-uren .is-nat { color: var(--weer-regen); } .weer-dag-wind { display: inline-flex; align-items: center; gap: 4px; color: var(--fr-stil); } .weer-dag-rest .weer-dag-wind { display: flex; justify-content: flex-end; } .weer-dag-uit { padding: .125rem .375rem 1rem; } .weer-dag-feiten { display: flex; flex-wrap: wrap; gap: .375rem 1.375rem; margin: 0 0 .625rem; font-size: .8125rem; color: var(--fr-stil); } .weer-dag-tabelvenster { overflow-x: auto; overscroll-behavior-x: contain; } .weer-dag-uren { width: 100%; min-width: 22rem; border-collapse: collapse; font-size: .84375rem; } .weer-dag-uren th, .weer-dag-uren td { padding: .375rem .1875rem; text-align: left; white-space: nowrap; border-bottom: 1px solid color-mix(in srgb, var(--weer-lijn) 60%, var(--fr-kaart)); vertical-align: middle; } .weer-dag-uren thead th { padding-bottom: .375rem; font: 400 .71875rem var(--fr-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fr-stil); border-bottom-color: var(--weer-lijn); } .weer-dag-uren tbody th { font-weight: 600; } .weer-dag-uren td:nth-child(2) { width: 26px; } .weer-rij > .weer-bericht { flex: 1 1 21.25rem; } #fr-main .weer-bericht h2 { font-size: clamp(1.375rem, 2vw, 1.625rem); margin-bottom: .375rem; } #fr-main .weer-bericht h3 { font: 600 .9375rem/1.4 var(--fr-sans); margin: 1rem 0 .375rem; } .weer-bericht-uitgifte { font-size: .78125rem; color: var(--fr-stil); margin-bottom: .875rem; } .weer-bericht > p:not([class]) { margin: 0 0 .75rem; font-size: .9375rem; line-height: 1.55; } .weer-bericht strong { font-weight: 600; } .weer-betekenis { margin-top: 1rem; font-size: .875rem; line-height: 1.5; } .weer-bronnen { flex: 1 1 100%; min-width: 0; position: relative; z-index: 1; padding-top: .25rem; font-size: .78125rem; line-height: 1.6; color: var(--fr-stil); overflow-wrap: anywhere; } .weer-toast { position: fixed; z-index: 1100; left: 50%; bottom: 24px; max-width: calc(100vw - 32px); transform: translateX(-50%); padding: .75rem 1.125rem; border-radius: var(--weer-hoek-knop); background: var(--weer-paneel); color: #fff; font-size: .875rem; text-align: center; box-shadow: 0 6px 24px rgba(20, 26, 42, .3); animation: weer-toast .25s ease-out; } @keyframes weer-toast { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } } .weer-dagen { container-type: inline-size; } @container (max-width: 20rem) { .weer-dagen .weer-dag > summary { grid-template-columns: minmax(0, 1fr) auto; gap: .375rem .75rem; } .weer-dag-temp { grid-column: 1 / -1; } .weer-dag-rest { grid-column: 1 / -1; min-width: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; text-align: left; } .weer-dag-rest > span, .weer-dag-rest .weer-dag-wind { justify-content: flex-start; } } @media (max-width: 719px) { #fr-main:has(> .weer-app), #fr-main:has(> * > .weer-app) { padding-top: 0; padding-left: 0; padding-right: 0; } .weer-app { --weer-bandhoogte: 9.25rem; --weer-onderbalk: calc(4rem + var(--veilige-onderrand, env(safe-area-inset-bottom, 0px))); --weer-bladpiek: 7rem; gap: 0; } .weer-radar { order: -1; flex-basis: 100%; border-radius: 0; box-shadow: none; } .weer-kaartvak { height: clamp(250px, calc(100svh - var(--fr-kopbalk, 58px) - env(safe-area-inset-top, 0px) - var(--weer-bandhoogte) - var(--weer-onderbalk) - var(--weer-bladpiek)), 640px); } .weer-band { padding-bottom: calc(.75rem + 1.25rem); } .weer-bladkop { margin-top: -1.25rem; padding: 1.5rem 1rem 1rem; gap: .5rem .75rem; align-items: flex-start; flex-wrap: wrap; background: var(--fr-bg); border-radius: 1.25rem 1.25rem 0 0; box-shadow: 0 -10px 26px rgba(10, 20, 30, .16); } .weer-bladkop-tekst { flex: 1 1 0; } .weer-bladkop::before { content: ""; position: absolute; left: 50%; top: 10px; width: 44px; height: 4px; margin-left: -22px; border-radius: 2px; background: var(--fr-rand3, var(--fr-rand)); } #fr-main .weer-app h1 { font-size: clamp(1.5rem, 6.6vw, 2.125rem); } .weer-bladkop-knoppen { display: contents; } .weer-bladkop .weer-knop { flex: none; width: 44px; padding: 0; justify-content: center; border-radius: 50%; } .weer-bladkop .weer-knop > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .weer-bladkop .weer-deeladres { flex: 1 1 100%; } .weer-kaartwaarschuwing { display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; min-height: 36px; padding: .375rem .75rem; border-radius: 18px; background: var(--weer-glas); color: #fff; font-size: .8125rem; font-weight: 600; text-decoration: none; box-shadow: 0 2px 8px rgba(20, 26, 42, .2); pointer-events: auto; } .weer-app .weer-kaartwaarschuwing, .weer-app .weer-kaartwaarschuwing:visited { color: #fff; } .weer-kaartwaarschuwing:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .weer-kaartwaarschuwing .weer-waarschuwing-code { width: 12px; height: 12px; } .weer-radar.is-leeg:has(.weer-kaartwaarschuwing) .weer-radar-leeg { padding-top: 7.5rem; } .weer-kaartwaarschuwing.is-oranje .weer-waarschuwing-code { background: #f08c2d; } .weer-kaartwaarschuwing.is-rood .weer-waarschuwing-code { background: #dd3333; } html:has(.weer-app) { scroll-padding-bottom: calc(4.5rem + var(--veilige-onderrand, env(safe-area-inset-bottom, 0px))); } .weer-waarschuwingen { order: 1; padding: 0 .875rem 1.125rem; background: var(--fr-bg); } .weer-blad { order: 2; flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 1.125rem; position: relative; z-index: 1; background: var(--fr-bg); } .weer-blad > .weer-nu { flex: none; border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; } .weer-kaartje, .weer-rij > .weer-kaartje { border-radius: 0; border-left: 0; border-right: 0; } .weer-rij { flex-direction: column; flex-wrap: nowrap; align-items: stretch; } .weer-rij > .weer-kaartje, .weer-rij > .weer-dagen, .weer-rij > .weer-bericht { flex: none; } .weer-bronnen { padding: .25rem 1rem 0; } .weer-toast { bottom: calc(76px + var(--veilige-onderrand, env(safe-area-inset-bottom, 0px))); } } @media (max-width: 719px) and (min-height: 600px) { .weer-radar:not(.is-leeg) { position: sticky; top: calc(var(--fr-kopbalk, 58px) + env(safe-area-inset-top, 0px)); } .weer-app.weer-radar-los .weer-radar { position: relative; top: auto; } } @media (max-width: 719px) and (max-height: 599px) { .weer-kaartvak { height: clamp(200px, 60svh, 360px); } } @media (max-width: 420px) { .weer-breed { display: none; } .weer-smal { display: inline; } } @media (max-width: 400px) { .weer-kaartpil { gap: .5rem; padding-inline: .75rem .625rem; } .weer-legenda { margin-left: 0; } .weer-band { padding-right: .75rem; } .weer-nu, .weer-kaartje { padding-left: 1.125rem; padding-right: 1.125rem; } .weer-uren { padding-left: 0; padding-right: 0; } .weer-uren > .weer-sectiekop, .weer-gekozen { margin-left: 1.125rem; margin-right: 1.125rem; } .weer-rij > .weer-dagen { padding-left: .5rem; padding-right: .5rem; } .weer-dag > summary { grid-template-columns: 5.25rem 26px minmax(70px, 1fr) auto; gap: .5rem; } .weer-dag-temp { grid-template-columns: 2.3em minmax(0, 1fr) 2.3em; gap: .375rem; } .weer-dag-rest { min-width: 0; } } html[data-thema="donker"] .weer-app, html[data-thema="auto"][data-auto-stand="nacht"] .weer-app { --weer-paneel: color-mix(in srgb, var(--fr-voet, #15213b) 86%, #fff); --weer-regen: #7aa7f0; --weer-regenvlak: #5b8fe6; --weer-koud: #8db2f0; --weer-rood: #ff9c95; --weer-kaartstand: nacht; } html[data-thema="donker"] .weer-kaart-tegels > image, html[data-thema="auto"][data-auto-stand="nacht"] .weer-kaart-tegels > image { filter: url(#weer-nacht); } html[data-thema="donker"] .weer-kaart-zee, html[data-thema="auto"][data-auto-stand="nacht"] .weer-kaart-zee { fill: #1d2731; } html[data-thema="donker"] .weer-kaartvak, html[data-thema="auto"][data-auto-stand="nacht"] .weer-kaartvak { background: #1d2731; } html[data-thema="donker"] .weer-radar-leeg, html[data-thema="auto"][data-auto-stand="nacht"] .weer-radar-leeg { color: #b8c0cc; } html[data-thema="donker"] .weer-kaart-stip text, html[data-thema="auto"][data-auto-stand="nacht"] .weer-kaart-stip text { fill: #fff; stroke: rgba(13, 20, 32, .85); } @media (prefers-color-scheme: dark) { html[data-thema="auto"]:not([data-auto-stand]) .weer-app { --weer-paneel: color-mix(in srgb, var(--fr-voet, #15213b) 86%, #fff); --weer-regen: #7aa7f0; --weer-regenvlak: #5b8fe6; --weer-koud: #8db2f0; --weer-rood: #ff9c95; --weer-kaartstand: nacht; } html[data-thema="auto"]:not([data-auto-stand]) .weer-kaart-tegels > image { filter: url(#weer-nacht); } html[data-thema="auto"]:not([data-auto-stand]) .weer-kaart-zee { fill: #1d2731; } html[data-thema="auto"]:not([data-auto-stand]) .weer-kaartvak { background: #1d2731; } html[data-thema="auto"]:not([data-auto-stand]) .weer-radar-leeg { color: #b8c0cc; } html[data-thema="auto"]:not([data-auto-stand]) .weer-kaart-stip text { fill: #fff; stroke: rgba(13, 20, 32, .85); } } @media (prefers-reduced-motion: reduce) { .weer-levend, .weer-toast { animation: none; } .weer-kaart-radar image, .weer-band.is-spelen .weer-tijdlijn-knop, .weer-band.is-spelen .weer-tijdlijn-voortgang, .weer-uur-knop::before { transition: none; } }