/* METEOPROOF -- gedeelde hoofding + footer in de stijl van de nieuwe Overview (2026-09-27). Alles onder .sk-* zodat het niet botst met Tailwind op de oudere pagina's. Licht/donker volgt (zelfde thema-toggle als voorheen, shared.js wisselThema()). */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap"); :root { --sk-papier: #f6f5f1; --sk-inkt: #16181c; --sk-inkt2: #4a4f57; --sk-inkt3: #676c74; --sk-lijn: #dcd9d1; --sk-lijn2: #ebe8e1; --sk-accent: #d9643f; --sk-paneel: #fdfcf9; --sk-sans: "IBM Plex Sans", system-ui, sans-serif; --sk-mono: "IBM Plex Mono", ui-monospace, monospace; } html.dark { --sk-papier: #111418; --sk-inkt: #eceae4; --sk-inkt2: #aeb3ba; --sk-inkt3: #7b818a; --sk-lijn: #2a3038; --sk-lijn2: #20252c; --sk-accent: #e8774f; --sk-paneel: #181c22; } /* width:100% (2026-09-27): op pagina's met kromp de kop anders tot zijn inhoud en stond hij in het midden */ /* paginaachtergrond in dezelfde papiertint als de nieuwe Overview (enkel pagina's met de nieuwe kop) */ html:not(.dark) body.sk-pagina { background: var(--sk-papier); } .sk-kop { position: relative; z-index: 40; width: 100%; box-sizing: border-box; max-width: 1160px; margin: 0 auto; padding: 18px 20px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; font: 15px/1.5 var(--sk-sans); color: var(--sk-inkt); -webkit-font-smoothing: antialiased; } .sk-kop *, .sk-voet * { box-sizing: border-box; } .sk-merk { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--sk-inkt); } .sk-merk .sk-logo { width: 28px; height: 20px; background: url(/Meteoproof_logo_blkgrd_crop.png) center / contain no-repeat; } .sk-merk b { font-weight: 600; letter-spacing: .08em; font-size: 16px; } .sk-nav { display: flex; align-items: center; gap: 22px; font-size: 14px; } .sk-nav > a, .sk-menu > button { font: inherit; text-decoration: none; color: var(--sk-inkt2); background: none; border: 0; border-bottom: 2px solid transparent; padding: 4px 0; white-space: nowrap; cursor: pointer; } .sk-nav > a:hover, .sk-menu:hover > button, .sk-menu.open > button { color: var(--sk-inkt); } .sk-nav .actief, .sk-menu.actief > button { color: var(--sk-inkt); border-bottom-color: var(--sk-accent); } .sk-menu { position: relative; } .sk-menu > button::after { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 1px 3px 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .15s; } .sk-menu.open > button::after { transform: rotate(225deg); margin-bottom: 0; } .sk-paneel { display: none; position: absolute; top: 100%; left: -14px; z-index: 60; min-width: 270px; margin-top: 6px; padding: 6px 0; background: var(--sk-paneel); border: 1px solid var(--sk-lijn); box-shadow: 0 8px 24px rgba(0,0,0,.10); } .sk-paneel::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; } @media (hover: hover) { .sk-menu:hover .sk-paneel { display: block; } } .sk-menu.open .sk-paneel { display: block; } .sk-paneel a { display: block; padding: 8px 14px; color: var(--sk-inkt); text-decoration: none; border-left: 2px solid transparent; } .sk-paneel a:hover { background: color-mix(in oklab, var(--sk-inkt) 6%, transparent); } .sk-paneel a.actief { border-left-color: var(--sk-accent); background: color-mix(in oklab, var(--sk-accent) 7%, transparent); } .sk-paneel a b { display: block; font-weight: 500; font-size: 14px; } .sk-paneel a span { display: block; font-size: 12px; color: var(--sk-inkt3); } .sk-paneel a.sk-alles { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--sk-lijn2); font-size: 13px; color: var(--sk-inkt2); } .sk-rechts { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--sk-inkt2); } .sk-rechts button { font: inherit; color: var(--sk-inkt2); background: none; border: 0; cursor: pointer; padding: 0; } .sk-rechts button:hover { color: var(--sk-inkt); } .sk-taal [aria-pressed="true"] { color: var(--sk-inkt); font-weight: 500; } .sk-thema { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; } .sk-thema svg { width: 16px; height: 16px; } .sk-thema .zon { display: none; } html.dark .sk-thema .zon { display: block; } html.dark .sk-thema .maan { display: none; } .sk-voet { width: 100%; box-sizing: border-box; max-width: 1160px; margin: 0 auto; padding: 18px 20px 40px; border-top: 1px solid var(--sk-lijn); font: 12px/1.5 var(--sk-sans); color: var(--sk-inkt3); display: flex; flex-direction: column; gap: 10px; text-align: left; } .sk-voetlinks { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; } .sk-voetlinks a { color: var(--sk-inkt2); text-decoration: none; } .sk-voetlinks a:hover { color: var(--sk-accent); } .sk-voetmerk { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--sk-inkt) !important; } .sk-voetmerk .sk-logo { width: 20px; height: 14px; background: url(/Meteoproof_logo_blkgrd_crop.png) center / contain no-repeat; } .sk-voetinfo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; } .sk-voetinfo strong { color: var(--sk-inkt2); font-weight: 500; } @media (max-width: 900px) { .sk-kop { row-gap: 10px; } .sk-nav { order: 3; width: 100%; flex-wrap: wrap; gap: 4px 18px; } /* paneel over de volle breedte van de kop i.p.v. per knop (anders valt het buiten beeld) */ .sk-menu { position: static; } .sk-paneel { left: 16px; right: 16px; min-width: 0; } } @media (max-width: 520px) { .sk-kop { gap: 10px 14px; padding: 14px 16px; } .sk-nav { font-size: 13px; gap: 4px 14px; } .sk-voet { padding: 16px 16px 32px; } } /* CLS (2026-09-27): de kop wordt pas door site-kop.js (onderaan de pagina) ingevuld; tot dan zijn hoogte vrijhouden, anders schuift de hele pagina ~70-100 px omlaag. Gemeten eindhoogtes: >900 px 67, 521-900 101, <=520 92 (smaller dan ~360 px: 125). */ #site-kop:not(.sk-kop) { display: block; min-height: 67px; } @media (max-width: 900px) { #site-kop:not(.sk-kop) { min-height: 101px; } } @media (max-width: 520px) { #site-kop:not(.sk-kop) { min-height: 92px; } } /* CLS (2026-09-27): de voet staat anders al in beeld zolang de pagina-inhoud nog leeg is en schuift dan weg (tools/run-compare, 850-airmass, methodology). Met main minstens schermhoog start de voet onder de rand. */ body:has(#site-voet) main { min-height: 100vh; }