/* PollenEuropa — base stylesheet. * * Adapted from pollenalert.nl so the two sites share a visual language. * The palette and corner radius come from EU_BRAND in config/tenants.py; * everything else is inherited. Europe-map styles live in map.css. */ /* ============================================= PollenAlert.nl — Stylesheet ============================================= */ /* No @import for the typeface. It used to pull DM Sans from Google here, which is a request the cannot preload and cannot preconnect for — a stylesheet @import is discovered only after this file has been fetched and parsed, so it lands a full round trip late and on a host nobody warmed up. It also handed every visitor's IP to Google. The font now comes from /vendor/dm-sans.css, linked in the by scripts/build_pages.py. Weights 300 and 600 were requested here and never used by a single rule; only 400, 500 and 700 are vendored. */ /* ── Reset & base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* PollenEuropa palette — mirrors EU_BRAND in config/tenants.py. Variable names are inherited from pollenalert.nl so every rule in this file works unchanged; only the values differ. */ --green: #1f7a54; --green-lt:#4ec38a; --yellow: #f0a53a; --orange: #e8894a; --red: #d64545; --gray-50: #f7f8f8; --gray-100:#eef0f1; --gray-300:#d1d5d8; --gray-600:#666e76; --gray-800:#2c3135; --text: #181c1f; --white: #ffffff; --radius: 10px; --shadow: 0 1px 6px rgba(0,0,0,.07); --font: 'DM Sans', system-ui, sans-serif; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font); color: var(--text); background: var(--gray-50); line-height: 1.65; -webkit-font-smoothing: antialiased; font-weight: 400; } img { max-width: 100%; display: block; } a { color: var(--green); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Layout ── */ .container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } /* ── Header / Nav ── */ /* The site header. Scoped to a direct child of body rather than to every
, because a page's own
is also a header element and was inheriting the sticky bar's background, border and shadow — a card with a green underline drawn around every H1. */ body > header { background: var(--white); border-bottom: 2px solid var(--green); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 8px rgba(0,0,0,.06); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: .45rem 1.5rem; max-width: 1100px; margin: 0 auto; } .nav-actions { display: flex; align-items: center; gap: .3rem; } /* ── Mobile language button (shown only ≤640px) ── */ .logo { display: flex; align-items: center; gap: .55rem; } .logo-icon { font-size: 1.3rem; line-height: 1; color: var(--green); } .logo-text { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; color: var(--green); } /* Two-tone wordmark, and the two tones need different values per theme. The brand amber is 7.3:1 on the dark header and 2.1:1 on the white one — no single orange clears 4.5:1 against both, so light gets a darker cut of the same hue. */ .logo-text em { font-style: normal; color: #a8620a; } [data-theme="dark"] .logo-text em { color: var(--yellow); } nav { display: flex; gap: 1.75rem; } /* Pages without a lang-switcher: nav gap from logo, buttons pushed right */ .nav-inner:not(:has(.lang-switcher)) nav { margin-left: clamp(1.5rem, 8vw, 6rem); margin-right: auto; } nav a { font-size: .88rem; font-weight: 500; color: var(--gray-800); letter-spacing: .01em; padding-bottom: 2px; border-bottom: 2px solid transparent; transition: border-color .15s, color .15s; } nav a:hover, nav a.active { color: var(--green); border-color: var(--green); text-decoration: none; } /* ── Language switcher ── */ .lang-switcher { display: flex; gap: .1rem; align-items: center; margin-left: .6rem; flex-shrink: 0; } .lang-switcher a { font-size: .72rem; font-weight: 600; padding: .15rem .26rem; border-radius: 3px; color: var(--gray-600); border: 1px solid transparent; text-decoration: none; transition: color .15s, border-color .15s; } .lang-switcher a:hover { color: var(--green); border-color: var(--green); } .lang-switcher a.active { color: var(--green); border-color: var(--green); } [data-theme="dark"] .lang-switcher a { color: var(--gray-600); } [data-theme="dark"] .lang-switcher a.active, [data-theme="dark"] .lang-switcher a:hover { color: #fff; border-color: var(--green); } /* ── Theme toggle button ── */ .theme-btn { background: none; border: 1px solid var(--gray-300); color: var(--gray-600); width: 36px; height: 36px; padding: 0; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: color .15s, border-color .15s; flex-shrink: 0; border-radius: 3px; } .theme-btn:hover { color: var(--green); border-color: var(--green); } /* ── Hero ── */ .hero { background: #2d6a4f; color: var(--white); padding: 1.6rem 0; } .hero-inner { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; display: flex; flex-direction: row; align-items: center; gap: 1.5rem; justify-content: space-between; } .hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; flex: 1; min-width: 0; } .hero-meta { display: flex; flex-direction: column; gap: .45rem; flex-shrink: 0; } .hero-inner h1 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; white-space: nowrap; } .hero-inner h1 em { font-style: normal; color: #95d5b2; } .hero-inner > p { font-size: .95rem; font-weight: 300; opacity: .85; margin: 0; line-height: 1.65; max-width: 600px; } .hero-meta { /* column layout defined above in .hero-inner block */ } .badge { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); padding: .3rem .85rem; font-size: .82rem; font-weight: 500; letter-spacing: .02em; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; } /* ── Location picker (hero) ── */ .location-picker { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; max-width: 460px; width: 100%; } @media (max-width: 640px) { .location-picker { max-width: 100%; } } .location-input-wrap { flex: 1; position: relative; } .location-search-icon { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: #999; font-size: .85rem; pointer-events: none; } .location-input { width: 100%; padding: .55rem .7rem .55rem 2rem; border: none; border-radius: 6px; font-size: .88rem; font-family: var(--font); background: rgba(255,255,255,.95); color: #222; outline: none; } .location-input::placeholder { color: #999; } .location-input:focus { box-shadow: 0 0 0 2px rgba(255,255,255,.5); } .location-gps-btn { width: 38px; height: 38px; flex-shrink: 0; border: none; border-radius: 6px; cursor: pointer; background: rgba(255,255,255,.18); color: #fff; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: background .15s; } .location-gps-btn:hover { background: rgba(255,255,255,.3); } [data-theme="dark"] .location-input { background: rgba(0,0,0,.4); color: #eee; } [data-theme="dark"] .location-input::placeholder { color: #888; } /* Saved location shortcut */ /* ── Hooikoortsscore CTA ── */ /* ── Today's visual summary ── */ .today-section { padding: 1.8rem 0 0; } .today-card { display: grid; grid-template-columns: 190px 1fr; background: var(--white); border: 1px solid var(--gray-300); border-radius: 4px; box-shadow: var(--shadow); overflow: hidden; } .today-panel { background: linear-gradient(160deg, #e07b39 0%, #c0392b 100%); color: #fff; padding: 1.6rem 1.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .25rem; } .today-panel-icon { font-size: 2rem; opacity: .9; line-height: 1; } .today-panel-level { font-size: clamp(1rem, 3vw, 1.45rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; white-space: nowrap; } .today-panel-sub { font-size: .72rem; opacity: .8; font-weight: 400; margin-top: .1rem; } .today-panel-date { font-size: .72rem; opacity: .65; margin-top: .6rem; display: flex; align-items: center; gap: .3rem; } .today-meters { padding: 1.1rem 1.6rem; display: flex; flex-direction: column; gap: .55rem; justify-content: center; } .pm-row { display: grid; grid-template-columns: 1.2rem 10rem 1fr 4rem; align-items: center; gap: .6rem; } .pm-icon { color: var(--green); font-size: .82rem; text-align: center; } @media (max-width: 640px) { .pm-row { grid-template-columns: 1.2rem 5rem 1fr 3.5rem; } .pm-name { font-size: .78rem; } } .pm-name { font-size: .85rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 640px) { .pm-name { white-space: normal; line-height: 1.2; font-size: .78rem; } } .pm-track { height: 7px; background: var(--gray-100); border-radius: 2px; overflow: hidden; } .pm-fill { height: 100%; border-radius: 2px; } /* widths map level to visual fill */ .pm-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; text-align: right; white-space: normal; } /* ── Section titles ── */ .section { padding: 3rem 0; } .section-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -.025em; color: var(--text); margin-bottom: .45rem; } .section-sub { font-size: .95rem; color: var(--gray-600); margin-bottom: 2rem; font-weight: 400; } /* ── Pollen types grid ── */ .pollen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--gray-300); border: 1px solid var(--gray-300); } .pollen-card { background: var(--white); padding: 1.3rem 1.1rem; text-align: center; border-radius: 4px; transition: background .15s; } .pollen-card:hover { background: var(--gray-50); } .pollen-card h3 { font-size: .95rem; font-weight: 600; margin-bottom: .3rem; letter-spacing: -.01em; } .pollen-card p { font-size: .8rem; color: var(--gray-600); margin-bottom: .7rem; line-height: 1.5; } /* ── Map section ── */ .map-section { background: var(--white); padding: 3rem 0; } /* NL map panel — map + legend stacked */ .nl-map-panel { display: flex; flex-direction: column; } /* Heat overlay — radial gradients colored by pollen level (behind PNG) */ /* Transparent PNG map with province outlines (middle layer) */ /* Invisible SVG click/hover targets (top layer) */ /* Gradient legend below NL map */ /* ── 24h forecast animation player ───────────────────────────────────── */ /* Time + day/night badge */ /* Europa preview panel */ .eu-map-panel { display: flex; flex-direction: column; } .eu-preview-btn { display: inline-flex; align-items: center; gap: .4rem; background: var(--green); color: #fff; font-size: .82rem; font-weight: 700; padding: .45rem 1rem; border-radius: 6px; text-decoration: none; transition: background .15s, transform .1s; } .eu-preview-btn:hover { background: #1e7e34; transform: translateY(-1px); } /* Pollen concentration blobs */ /* Top "check levels" label */ /* Full-surface click overlay */ /* Heat overlay — background is set dynamically by JS from pollen-data.json */ .map-legend { min-width: 165px; background: var(--gray-50); border: 1px solid var(--gray-300); border-radius: 4px; padding: 1.2rem; } .map-legend h4 { font-size: .8rem; font-weight: 700; margin-bottom: .9rem; text-transform: uppercase; letter-spacing: .07em; color: var(--gray-600); } /* province base fills */ /* tooltip */ /* ── Tips / info boxes ── */ .tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .tip-card { background: var(--white); padding: 1.4rem 1.3rem; border-top: 3px solid var(--green-lt); border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.06); transition: box-shadow .2s, transform .2s; } .tip-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.10); transform: translateY(-2px); } .tip-card h3 { font-size: .95rem; font-weight: 700; margin-bottom: .45rem; letter-spacing: -.01em; } .tip-card p { font-size: .86rem; color: var(--gray-600); line-height: 1.65; } /* ── FAQ / Article ── */ .article-section { background: var(--white); padding: 3rem 0; } /* ── Blog info boxes ── */ /* ── FAQ accordion ── */ .faq-list { max-width: 720px; } details { border-bottom: 1px solid var(--gray-300); padding: .85rem 0; } summary { font-weight: 600; font-size: .95rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; letter-spacing: -.01em; } summary::after { content: '+'; font-size: 1.2rem; color: var(--green); font-weight: 300; } details[open] summary::after { content: '−'; } details p { font-size: .9rem; color: var(--gray-600); margin-top: .65rem; line-height: 1.75; } /* ── Footer ── */ footer { background: var(--gray-800); color: #9aa0a6; padding: 2.5rem 1.5rem; margin-top: 3rem; font-size: .86rem; } @media (min-width: 768px) { .footer-brand { grid-column: 1; grid-row: 1; } .footer-cols { grid-column: 2; grid-row: 1; } } footer a { color: #9aa0a6; } footer a:hover { color: var(--white); } /* ── Video cards ── */ /* Footer brand block */ .footer-brand { display: flex; flex-direction: column; gap: .25rem; } .footer-tagline { font-size: .8rem; opacity: .6; margin: 0; } /* Footer columns grid */ .footer-cols { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; } .footer-col { display: flex; flex-direction: column; gap: .4rem; min-width: 130px; } .footer-col-title { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6e7b74; margin-bottom: .2rem; } .footer-col a { color: #9aa0a6; text-decoration: none; font-size: .84rem; line-height: 1.4; } .footer-col a:hover { color: #fff; } /* Footer nav (legacy single-row, kept for compatibility) */ /* ── Hamburger button (hidden on desktop) ── */ .menu-btn { display: none; background: none; border: 1px solid var(--gray-300); color: var(--gray-600); padding: .32rem .65rem; cursor: pointer; font-size: 1rem; align-items: center; margin-left: .5rem; flex-shrink: 0; } .menu-btn:hover { color: var(--green); border-color: var(--green); } /* Mobile nav drawer */ [data-theme="dark"] .menu-btn { border-color: var(--gray-300); color: var(--gray-600); } /* ── Responsive ── */ @media (max-width: 780px) { .pollen-grid, .tips-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { nav { display: none; } .menu-btn { display: flex; } .nav-inner { padding: .3rem 1rem; } .logo { margin-right: auto; } .install-nav-btn { display: flex; } .nav-actions { margin-left: auto; gap: .2rem; } .logo-text { font-size: 1.2rem; } .logo-icon { font-size: 1.2rem; } .hero { padding: .75rem 0; } .hero-inner { flex-direction: column; align-items: flex-start; gap: .4rem; padding: 0 1rem; } .hero-inner h1 { white-space: normal; font-size: 1.45rem; } .hero-text p { font-size: .82rem; } .hero-meta { display: none; } .lang-switcher { display: none; } .badge { padding: .2rem .6rem; font-size: .75rem; } .today-card { grid-template-columns: 1fr; } .today-panel { flex-direction: row; padding: 1rem 1.2rem; gap: 1rem; justify-content: flex-start; text-align: left; } .today-panel-date { margin-top: 0; } .pm-row { grid-template-columns: 1.2rem 1fr 1fr 3.5rem; } } /* ── Mobile nav extras ── */ @media (max-width: 480px) { .pollen-grid, .tips-grid { grid-template-columns: 1fr; } } /* ── Pollen trend charts ── */ .charts-section { background: var(--gray-50); padding: 3rem 0; } .charts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .chart-card { background: var(--white); border: 1px solid var(--gray-300); border-radius: 4px; padding: 1.2rem 1.2rem .9rem; box-shadow: var(--shadow); } @media (max-width: 780px) { .charts-grid { grid-template-columns: 1fr; } } /* ── Dark mode ── */ [data-theme="dark"] { --green: #52b788; --green-lt:#40916c; --gray-50: #181c1f; --gray-100:#22272b; --gray-300:#3a4045; --gray-600:#9aa0a6; --gray-800:#d8dcdf; --text: #e8eaed; --white: #242a2f; --shadow: 0 1px 6px rgba(0,0,0,.35); } [data-theme="dark"] body { background: var(--gray-50); } [data-theme="dark"] body > header { background: #22272b; border-color: var(--green); } [data-theme="dark"] .hero { background: #163d29; color: #fff; } [data-theme="dark"] .map-section, [data-theme="dark"] .article-section { background: #22272b; } [data-theme="dark"] section#tips { background: #1d2226 !important; } [data-theme="dark"] .pollen-card, [data-theme="dark"] .tip-card, [data-theme="dark"] .chart-card, [data-theme="dark"] .today-card { background: #22272b; } [data-theme="dark"] .pm-track { background: #3a4045; } [data-theme="dark"] .pollen-card:hover { background: #2c3135; } [data-theme="dark"] details { border-color: var(--gray-300); } [data-theme="dark"] footer { background: #111518; } [data-theme="dark"] .pollen-grid { background: var(--gray-300); border-color: var(--gray-300); } [data-theme="dark"] nav a { color: var(--gray-800); } [data-theme="dark"] .theme-btn { border-color: var(--gray-300); color: var(--gray-600); } /* ── PWA install nav button ── */ .install-nav-btn { background: none; border: 1px solid var(--gray-300); color: var(--gray-600); border-radius: 3px; width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: .85rem; flex-shrink: 0; transition: color .2s, border-color .2s; } .install-nav-btn:hover { color: var(--green); border-color: var(--green); } [data-theme="dark"] .install-nav-btn { border-color: var(--gray-300); color: var(--gray-600); } /* Mobile menu install row */ /* iOS install tooltip */ @keyframes tip-in { from{opacity:0;transform:scale(.92) translateY(8px)} to{opacity:1;transform:none} } /* Notification badge button */ /* ── Europa promo banner ───────────────────────────── */ /* ── Rain suppression notice (inside today-card) ── */ /* ── Thunderstorm asthma alert ── */ /* ── Pollenbericht (daily report) ── */ .pollenbericht-section { background: #fff8e7; padding: 1rem 0 1.6rem; margin-top: 2.2rem; border-bottom: 1px solid #f0e0b0; } .pollenbericht-card { } [data-theme="dark"] .pollenbericht-section { background: #1e1a0e; border-color: #3a3010; } /* Europe-map styles, layered on top of the inherited base. * Everything here is specific to the Leaflet map that replaces * pollenalert.nl's Netherlands SVG; the rest of the page uses the * shared stylesheet. */ /* Severity scale. Ordered light-to-dark so it reads in greyscale and for red-green colour blindness: lightness carries the signal, hue reinforces. */ :root { --lvl-none: #e6efe9; --lvl-low: #8fd6ae; --lvl-moderate: #f2c65c; --lvl-high: #e8894a; --lvl-very-high: #cf4747; --lvl-nodata: #dbe2e6; } [data-theme="dark"] { --lvl-none: #1d2b24; --lvl-nodata: #223029; } /* The map fills the panel where the Netherlands PNG used to sit. */ .eu-map-panel { position: relative; } #map { /* No fixed *height*: the SVG carries its own ratio, so the container must follow it. Pinning pixels here — as the Leaflet version had to — crops the map to whatever fits, which meant the top half of the continent and nothing else. A reserved *ratio* is different, and necessary. The SVG is fetched and injected, so until it lands this box was zero pixels tall and everything below it sat where the map was about to be. That single jump was 0.433 of a 0.475 layout-shift score — most of the page's whole CLS, and the largest thing dragging the score down. The variable is set by js/app.js from the injected viewBox, because each country's map has its own ratio; the default is Europe's. */ aspect-ratio: var(--map-ratio, 1065 / 820); width: 100%; border-radius: var(--radius); border: 1px solid var(--gray-300); background: var(--gray-50); } [data-theme="dark"] #map { border-color: #2a3a33; background: #131f1a; } #map.unavailable { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, var(--gray-50), var(--gray-50) 10px, var(--white) 10px, var(--white) 20px); } .area { transition: fill-opacity .15s ease; cursor: pointer; } .area:hover { fill-opacity: 1; } .lvl-none { fill: var(--lvl-none); } .lvl-low { fill: var(--lvl-low); } .lvl-moderate { fill: var(--lvl-moderate); } .lvl-high { fill: var(--lvl-high); } .lvl-very-high { fill: var(--lvl-very-high); } .lvl-nodata { fill: var(--lvl-nodata); } /* Legend, matching the base site's gradient legend placement. */ .map-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: center; margin-top: .75rem; font-size: .82rem; color: var(--gray-600); } .map-legend .swatch { width: 13px; height: 13px; border-radius: 3px; display: inline-block; margin-right: .35rem; border: 1px solid rgba(0,0,0,.12); vertical-align: -2px; } .swatch.lvl-none { background: var(--lvl-none); } .swatch.lvl-low { background: var(--lvl-low); } .swatch.lvl-moderate { background: var(--lvl-moderate); } .swatch.lvl-high { background: var(--lvl-high); } .swatch.lvl-very-high { background: var(--lvl-very-high); } .swatch.lvl-nodata { background: var(--lvl-nodata); } /* Region detail, docked inside the map panel. */ .detail { position: absolute; right: .75rem; top: .75rem; z-index: 950; width: min(20rem, calc(100% - 1.5rem)); background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; max-height: calc(100% - 1.5rem); overflow-y: auto; font-size: .9rem; } [data-theme="dark"] .detail { background: #131f1a; border-color: #2a3a33; } .detail h2 { margin: 0 0 .2rem; font-size: 1.05rem; } .detail .close { float: right; background: none; border: 0; cursor: pointer; color: var(--gray-600); padding: .1rem .3rem; } .detail table { width: 100%; border-collapse: collapse; font-size: .86rem; } .detail th, .detail td { text-align: left; padding: .3rem .25rem; border-bottom: 1px solid var(--gray-100); } [data-theme="dark"] .detail th, [data-theme="dark"] .detail td { border-bottom-color: #22332c; } .detail thead th { color: var(--gray-600); font-weight: 500; font-size: .78rem; } .detail .num { text-align: right; font-variant-numeric: tabular-nums; } .detail .muted { color: var(--gray-600); } .detail .small { font-size: .78rem; } .pill { display: inline-block; padding: .05rem .45rem; border-radius: 999px; font-size: .76rem; font-weight: 500; color: #12211a; } /* --gray-600 on the palest band measured 4.41:1 — under by a hair, on the one pill that appears five times on a quiet day. */ .pill.lvl-none { background: var(--lvl-none); color: #5a626a; } [data-theme="dark"] .pill.lvl-none { color: #a8b0b6; } .pill.lvl-low { background: var(--lvl-low); } .pill.lvl-moderate { background: var(--lvl-moderate); } .pill.lvl-high { background: var(--lvl-high); } .pill.lvl-very-high { background: var(--lvl-very-high); color: #fff; } /* Search results for the location picker. */ .results { position: absolute; top: calc(100% + .3rem); left: 0; right: 0; background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius); box-shadow: var(--shadow); list-style: none; margin: 0; padding: .25rem; z-index: 1200; max-height: 17rem; overflow-y: auto; text-align: left; } [data-theme="dark"] .results { background: #131f1a; border-color: #2a3a33; } .results button { display: flex; align-items: center; gap: .55rem; width: 100%; background: none; border: 0; text-align: left; cursor: pointer; padding: .45rem .55rem; border-radius: 6px; font: inherit; /* Explicit, not inherited. The dropdown is painted white but sits inside the hero, which is dark with white text — so `color: inherit` put white text on a white panel. Only the country line survived, because that one had a colour of its own. */ color: var(--text); } [data-theme="dark"] .results button { color: #e8f1ec; } .results button:hover, .results button:focus { background: var(--gray-50); } [data-theme="dark"] .results button:hover { background: #1b2a24; } .results i { color: var(--gray-600); width: 1rem; } .results em { color: var(--gray-600); font-style: normal; font-size: .82rem; } /* Uncalibrated-species caveat. */ .warn { color: var(--yellow); font-size: .78rem; margin-left: .2rem; } .notice { display: flex; gap: .5rem; align-items: flex-start; margin: .8rem 0 0; padding: .55rem .65rem; background: rgba(240,165,58,.1); border: 1px solid rgba(240,165,58,.3); border-radius: 8px; font-size: .78rem; color: var(--gray-600); line-height: 1.45; } .notice i { color: var(--yellow); margin-top: .15rem; flex: none; } .status { margin: 0; padding: .5rem .9rem; font-size: .88rem; background: rgba(240,165,58,.12); border-radius: var(--radius); } .status.error { background: rgba(214,69,69,.12); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── Header and footer ─────────────────────────────────────────────── The base stylesheet's nav is driven by pollenalert.nl's components.js; this site ships a plain static header instead. */ .logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit; font-size: 1.12rem; letter-spacing: -.01em; font-weight: 500; } .logo strong { color: var(--green); font-weight: 700; } .main-nav { display: flex; gap: 1.25rem; margin-left: auto; flex-wrap: wrap; } .main-nav a { color: var(--gray-600); text-decoration: none; font-size: .93rem; padding: .2rem 0; border-bottom: 2px solid transparent; } .main-nav a:hover { color: var(--green); border-bottom-color: var(--green-lt); } /* A dark band in both themes. It used to be white on light, left over from when the footer was two lines of attribution. Everything added since — the columns, the brand block, the legal strip — was designed against the dark band the `footer` element rule sets, so on light the links came out at 2.6:1 against white and the divider was white on white. Neither shows in a screenshot of the top of the page, which is why it lasted. */ .site-footer { background: var(--gray-800); color: #c8cdd2; border-top: 1px solid rgba(255,255,255,.08); padding: 1.5rem 0; margin-top: 2rem; font-size: .88rem; } [data-theme="dark"] .site-footer { background: #131f1a; border-color: #22332c; } .site-footer a { color: #e8f1ec; } .site-footer p { margin: .25rem 0; } .site-footer i { color: var(--green-lt); margin-right: .3rem; } .site-footer .muted { color: #9aa0a6; } .pm-fill.lvl-none { background: var(--lvl-none); } .pm-fill.lvl-low { background: var(--lvl-low); } .pm-fill.lvl-moderate { background: var(--lvl-moderate); } .pm-fill.lvl-high { background: var(--lvl-high); } .pm-fill.lvl-very-high { background: var(--lvl-very-high); } @media (max-width: 640px) { .main-nav { gap: .9rem; margin-left: 0; width: 100%; } } /* Species filter above the map. */ .map-controls { display: flex; justify-content: flex-end; margin-bottom: .6rem; } .map-species { display: inline-flex; align-items: center; gap: .5rem; background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius); padding: .35rem .7rem; } [data-theme="dark"] .map-species { background: #131f1a; border-color: #2a3a33; } .map-species i { color: var(--gray-600); font-size: .85rem; } .map-species select { border: 0; background: transparent; color: inherit; font: inherit; font-size: .9rem; outline: none; } /* Respect a reduced-motion preference across the whole page. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ── Europe SVG map ────────────────────────────────────────────────── Replaces pollenalert.nl's Netherlands PNG + click-target SVG. Shapes are pre-projected to ETRS89-LAEA, so no map library and no Mercator. */ .eu-map { /* No height cap. The SVG frame is fitted to the continent's own aspect ratio at build time, so filling the width fills the frame exactly. Capping the height would shrink the width to match and leave the card padded down both sides — which is what it did. */ width: 100%; height: auto; display: block; } .eu-map .area { stroke: var(--white); stroke-width: .6; stroke-linejoin: round; cursor: pointer; transition: opacity .12s ease; } [data-theme="dark"] .eu-map .area { stroke: #0d1613; } .eu-map .area:hover { opacity: .82; } .eu-map .area:focus-visible { outline: none; stroke: var(--green); stroke-width: 1.6; } .eu-map .area.selected { stroke: var(--green); stroke-width: 1.6; } .map-back { position: absolute; left: .6rem; top: .6rem; z-index: 5; display: inline-flex; align-items: center; gap: .45rem; background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius); padding: .35rem .7rem; font: inherit; font-size: .88rem; cursor: pointer; color: inherit; box-shadow: var(--shadow); } [data-theme="dark"] .map-back { background: #131f1a; border-color: #2a3a33; } .map-back:hover { border-color: var(--green-lt); color: var(--green); } /* ── Header actions the inherited stylesheet does not cover ────────── The base file styles .nav-inner, .logo, .lang-switcher, .theme-btn and .install-nav-btn already; these fill the gaps for this site's header. */ .nav-inner { position: relative; } .main-nav { display: flex; gap: 1.15rem; margin-left: auto; flex-wrap: wrap; } .main-nav a { color: var(--gray-600); text-decoration: none; font-size: .93rem; padding: .2rem 0; border-bottom: 2px solid transparent; white-space: nowrap; } .main-nav a:hover, .main-nav a.active { color: var(--green); border-bottom-color: var(--green-lt); } .nav-actions { display: flex; align-items: center; gap: .4rem; } .install-nav-btn.is-on { color: var(--yellow); } .nav-menu-btn { display: none; background: none; border: 0; cursor: pointer; color: var(--gray-600); font-size: 1.1rem; padding: .3rem .4rem; } @media (max-width: 860px) { .nav-menu-btn { display: inline-flex; } .main-nav, .lang-switcher { display: none; width: 100%; order: 10; padding-top: .6rem; } body.nav-open .main-nav, body.nav-open .lang-switcher { display: flex; } } /* ── Language menu ─────────────────────────────────────────────────── Nine locales will not lay out inline at any width, so the switcher is a menu behind a globe on desktop as well as mobile. */ .lang-switcher { position: relative; } .lang-btn { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 1px solid transparent; border-radius: var(--radius); padding: .3rem .55rem; cursor: pointer; color: var(--gray-600); font: inherit; font-size: .88rem; } .lang-btn:hover, .lang-btn[aria-expanded="true"] { color: var(--green); border-color: var(--gray-300); } .lang-current { font-weight: 500; letter-spacing: .02em; } .lang-caret { font-size: .6rem; opacity: .7; } .lang-menu { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 1200; min-width: 11rem; margin: 0; padding: .3rem; list-style: none; background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius); box-shadow: var(--shadow); max-height: 20rem; overflow-y: auto; } [data-theme="dark"] .lang-menu { background: #131f1a; border-color: #2a3a33; } .lang-menu a { display: block; padding: .4rem .6rem; border-radius: 6px; text-decoration: none; color: inherit; font-size: .9rem; } .lang-menu a:hover { background: var(--gray-50); color: var(--green); } [data-theme="dark"] .lang-menu a:hover { background: #1b2a24; } .lang-menu a.active { color: var(--green); font-weight: 500; } .lang-menu [lang="ar"] { direction: rtl; text-align: right; } @media (max-width: 860px) { .lang-switcher { display: block; width: auto; order: 0; padding-top: 0; } } /* ── Full-width map card ───────────────────────────────────────────── The map is the page's centrepiece, so it gets the full wrapper width rather than sitting inside the narrower text container. */ .page-wrapper { /* Identical to .container — same max-width, same padding — so the map card lines up with every other section on the page instead of hanging over the edges of the layout. */ width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } .map-card { background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem 1.4rem 1.4rem; margin: 0 0 2rem; } [data-theme="dark"] .map-card { background: #131f1a; border-color: #2a3a33; } .map-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .map-card-head .section-title { margin: 0 0 .2rem; text-align: left; } .map-card-head .section-sub { margin: 0; text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; } #map-dominant { font-weight: 500; } #map-dominant .dom-species { color: var(--green); } .map-stamp { display: inline-flex; align-items: center; gap: .35rem; color: var(--gray-600); font-size: .88rem; } .map-controls { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .map-animate-btn { display: inline-flex; align-items: center; gap: .45rem; background: var(--green); color: #fff; text-decoration: none; border-radius: var(--radius); padding: .45rem .85rem; font-size: .9rem; } .map-animate-btn:hover { background: var(--green-lt); color: #12211a; } /* The map bleeds to the card edges. Card padding suits text; a map should meet its own frame, so cancel the horizontal padding for this one child rather than shrinking the map to fit inside it. */ .map-card .eu-map-panel { position: relative; margin-left: -1.4rem; margin-right: -1.4rem; } .map-card #map { border: 0; border-radius: 0; background: transparent; } @media (max-width: 720px) { .map-card .eu-map-panel { margin-left: -1rem; margin-right: -1rem; } } @media (max-width: 720px) { .map-card { padding: 1rem; } .map-card-head { flex-direction: column; } .map-controls { width: 100%; } .map-animate-btn { flex: 1; justify-content: center; } /* Region detail moves below the map instead of floating over it. Docking it top-right works on a wide screen because the panel takes a fifth of the width; on a phone `min(20rem, 100% - 1.5rem)` resolves to almost the full width, so the panel covered the very map it was describing — and the region it referred to was the one underneath it. Flowing it below also drops the scroll container: the panel can be as tall as it needs, and the page scrolls, which is what a phone expects. */ .detail { position: static; width: auto; max-height: none; overflow-y: visible; margin: .75rem 1rem 0; box-shadow: none; } } /* ── Animation controls ──────────────────────────────────────────────── */ .anim-bar { display: flex; align-items: center; gap: .9rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--gray-100); } [data-theme="dark"] .anim-bar { border-top-color: #22332c; } .anim-play { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--green); color: #fff; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; } .anim-play:hover { background: var(--green-lt); color: #12211a; } .anim-slider { flex: 1; accent-color: var(--green); cursor: pointer; } .anim-label { flex: none; min-width: 11rem; text-align: right; font-size: .9rem; font-variant-numeric: tabular-nums; color: var(--gray-600); } .anim-note { margin-top: .8rem; } .anim-note i { color: var(--gray-600); margin-right: .3rem; } .ghost-btn { background: transparent; color: var(--gray-600); border: 1px solid var(--gray-300); } .ghost-btn:hover { background: var(--gray-50); color: var(--green); } [data-theme="dark"] .ghost-btn:hover { background: #1b2a24; } @media (max-width: 560px) { .anim-label { min-width: 0; font-size: .82rem; } } /* ── Logo alignment ────────────────────────────────────────────────── The icon and the wordmark have different intrinsic baselines, so they need explicit centring rather than inheriting text alignment. Sizing and colour come from the .logo-* block near the top of the file, which the header and the footer now share. What used to be here was an override written for an inline SVG mark — including a half-pixel optical nudge for its centre — and it outlived the SVG. */ .logo { display: flex; align-items: center; } .logo a { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit; line-height: 1; } .nav-inner { align-items: center; } /* Provenance line: which CAMS run the figures came from, and when we ingested it. Small, muted — it is an audit trail, not a headline. */ .data-provenance { margin: .3rem 0 0; font-size: .8rem; color: var(--gray-600); font-variant-numeric: tabular-nums; } /* ── Fixes found by looking at the rendered page ─────────────────────── */ /* `[hidden]` sets display:none at the lowest specificity, so any class that sets display beats it and the element stays on screen. Every toggled element here needs the guard, or `el.hidden = true` silently does nothing. */ .map-back[hidden], .results[hidden], .detail[hidden], .status[hidden], .anim-bar[hidden] { display: none !important; } /* Note on --lvl-nodata: it was #eceff0, which is near-white. With a white stroke on a white card the map rendered perfectly and looked empty. The value is set at the top of this file; a test enforces the contrast. */ /* A hairline outline so borders survive against the lightest fills. */ .eu-map .area { stroke: rgba(255, 255, 255, .85); stroke-width: .7; } .eu-map .area.lvl-nodata, .eu-map .area.lvl-none { stroke: rgba(90, 110, 100, .35); } [data-theme="dark"] .eu-map .area.lvl-nodata, [data-theme="dark"] .eu-map .area.lvl-none { stroke: rgba(140, 165, 150, .3); } /* The today panel inherits a level-coloured background from the Dutch stylesheet. With no region chosen there is no level, so it was showing the default warm gradient as though something were wrong. */ .today-panel:not([class*="lvl-"]) { background: var(--gray-50); color: var(--gray-600); } [data-theme="dark"] .today-panel:not([class*="lvl-"]) { background: #1b2a24; color: var(--gray-600); } /* The panel takes the day's colour. Two stops rather than a flat fill so it reads as a panel and not a warning banner, and white text throughout except at 'none', where the fill is too pale to carry it. */ .today-panel.lvl-none { background: linear-gradient(160deg, #eef3f0 0%, var(--lvl-none) 100%); color: var(--gray-600); } .today-panel.lvl-low { background: linear-gradient(160deg, #6fc394 0%, #2f8f5e 100%); } .today-panel.lvl-moderate { background: linear-gradient(160deg, #f2c65c 0%, #d99a1f 100%); } .today-panel.lvl-high { background: linear-gradient(160deg, #e8894a 0%, #c85f28 100%); } .today-panel.lvl-very-high { background: linear-gradient(160deg, #d75757 0%, #a32020 100%); } .today-panel.lvl-nodata { background: linear-gradient(160deg, #e8edf0 0%, var(--lvl-nodata) 100%); color: var(--gray-600); } [data-theme="dark"] .today-panel.lvl-none { background: linear-gradient(160deg, #22332c 0%, var(--lvl-none) 100%); } [data-theme="dark"] .today-panel.lvl-nodata { background: linear-gradient(160deg, #26332e 0%, var(--lvl-nodata) 100%); } /* Inside a coloured panel the level word is white; the per-level text colours below only apply where the panel is pale. */ .today-panel.lvl-low .today-panel-level, .today-panel.lvl-moderate .today-panel-level, .today-panel.lvl-high .today-panel-level, .today-panel.lvl-very-high .today-panel-level { color: #fff; } .today-panel-level.lvl-none { color: var(--gray-600); } .today-panel-level.lvl-low { color: var(--green); } .today-panel-level.lvl-moderate { color: var(--yellow); } .today-panel-level.lvl-high { color: var(--orange); } .today-panel-level.lvl-very-high { color: var(--red); } /* Where we guessed the visitor is, and how to undo it. Stated plainly — guessing silently is what makes IP location feel intrusive. */ .detected-note { margin: .4rem 0 0; font-size: .84rem; color: var(--gray-600); } .detected-note i { margin-right: .3rem; } .detected-note strong { color: var(--text); font-weight: 500; } [data-theme="dark"] .detected-note strong { color: #e8f1ec; } .linklike { background: none; border: 0; padding: 0; cursor: pointer; color: var(--green); font: inherit; text-decoration: underline; } /* Sample-data banner. Deliberately loud — a map of invented pollen levels that looked like a real forecast would be worse than no map at all. */ .status.demo { background: rgba(214, 69, 69, .1); border: 1px solid rgba(214, 69, 69, .35); color: var(--text); } .status.demo i { color: var(--red); margin-right: .35rem; } .status.demo a { color: var(--green); } /* ══════════════════════════════════════════════════════════════════════ Content pages ══════════════════════════════════════════════════════════════════════ The map is an application; these are documents. They get a narrower measure than the map card because prose stops being readable somewhere around 75 characters, and the map card is 1100px wide precisely so the continent is not postage-stamped. ────────────────────────────────────────────────────────────────────── */ .page { max-width: 68rem; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; } .page-hero { margin-bottom: 2.5rem; } .page-hero h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.2; } .page .lede, .page-hero .lede { font-size: 1.1rem; color: var(--gray-600); max-width: 48rem; margin-top: .75rem; } .page section { margin-bottom: 2.5rem; } .page section > h2 { font-size: 1.35rem; margin-bottom: .75rem; } .page p { max-width: 48rem; } /* The reset strips paragraph margins, which is right for a card holding one line and wrong for a section holding an argument. */ .page section p + p, .page p + .privacy-table, .page p + .privacy-hosts { margin-top: .8rem; } .page .muted { color: var(--gray-600); font-size: .92rem; } .page .outro { margin-top: 2rem; } .btn { display: inline-block; background: var(--green); color: var(--white); padding: .7rem 1.4rem; border-radius: var(--radius); font-weight: 500; } .btn:hover { background: var(--green-lt); text-decoration: none; } /* ── Pollen types: one card per species ── */ .type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.25rem; } .type-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow); } .type-card h2 { font-size: 1.2rem; } .type-season { color: var(--gray-600); font-size: .88rem; margin: .2rem 0 .8rem; } .type-card p { font-size: .95rem; } /* ── Calendar: a species x month grid ── Colour alone would fail for a colour-blind reader and for anyone printing this, so the peak band is also darker and the cells carry a data-state attribute a screen reader can be pointed at. */ .calendar { width: 100%; border-collapse: collapse; font-size: .9rem; } .calendar th, .calendar td { border: 1px solid var(--gray-100); padding: .45rem .3rem; text-align: center; } .calendar thead th { font-weight: 500; color: var(--gray-600); } .calendar tbody th { text-align: left; font-weight: 500; white-space: nowrap; padding-inline-end: .9rem; } .cal-off { background: transparent; } .cal-season { background: var(--green-lt); opacity: .45; } .cal-peak { background: var(--green); } .legend { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; } .legend .chip { margin-inline-start: .75rem; } .legend .chip:first-child { margin-inline-start: 0; } .chip { display: inline-block; width: 1rem; height: 1rem; border-radius: 3px; vertical-align: -.15rem; border: 1px solid rgba(0,0,0,.08); } .chip.cal-season { opacity: .45; background: var(--green-lt); } .chip.cal-peak { background: var(--green); } .chip.lvl-none { background: var(--lvl-none); } .chip.lvl-low { background: var(--lvl-low); } .chip.lvl-moderate { background: var(--lvl-moderate); } .chip.lvl-high { background: var(--lvl-high); } .chip.lvl-very-high { background: var(--lvl-very-high); } /* ── Month strip on a species page ── */ .month-strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: .25rem; list-style: none; padding: 0; font-size: .78rem; text-align: center; } .month-strip li { padding: .5rem .1rem; border-radius: 4px; background: var(--gray-100); color: var(--gray-600); } .month-strip li.season { background: var(--green-lt); color: var(--gray-800); } .month-strip li.peak { background: var(--green); color: var(--white); font-weight: 500; } /* ── Level band table ── */ .bands { border-collapse: collapse; font-size: .95rem; min-width: 18rem; } .bands caption { text-align: start; font-weight: 500; padding-bottom: .5rem; } .bands td { border-bottom: 1px solid var(--gray-100); padding: .5rem 1.5rem .5rem 0; } .bands tr:last-child td { border-bottom: 0; } /* ── Tips ── */ .tip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.25rem; } .tip { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 1.4rem; } .tip h2 { font-size: 1.05rem; margin-bottom: .5rem; } .tip h2 i { color: var(--green); margin-inline-end: .4rem; } .tip p { font-size: .95rem; margin: 0; } /* ── FAQ ── These are cards, which replaces the site-wide underlined
style rather than sitting on top of it. It was sitting on top of it: the global rule pads .85rem top and bottom and the summary padded another 1rem, so every row was carrying about 62px of padding around a single line of text and stood at roughly twice the height it needed. Hence the explicit zeroes — they are load-bearing, not tidying. */ .faq-list details { background: var(--white); border: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); border-radius: var(--radius); padding: 0; margin-bottom: .4rem; } .faq-list summary { padding: .7rem 1.1rem; font-weight: 500; cursor: pointer; } .faq-list summary::marker { color: var(--green); } .faq-list summary::after { color: var(--green); } .faq-list p { padding: 0 1.1rem .9rem; margin: 0; color: var(--gray-600); font-size: .95rem; } /* ── Region index ── */ .country-block { margin-bottom: 2rem; } .country-block h2 { font-size: 1.1rem; margin-bottom: .5rem; } .region-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .2rem .75rem; font-size: .93rem; } /* ── Footer columns ── The minimal attribution strip stays at the bottom; the columns sit above it, because attribution is a legal obligation and navigation is a service, and the two should not read as the same kind of thing. */ .footer-top { display: grid; grid-template-columns: minmax(14rem, 1fr) 3fr; gap: 2rem; padding-bottom: 1.75rem; } .footer-logo { display: inline-flex; align-items: center; gap: .55rem; } .footer-logo:hover { text-decoration: none; } /* The header sits on white and the footer on the dark band, so the same mark needs a lighter green here. Only the colour changes — size, spacing and the wordmark come from the shared .logo-* rules. */ .footer-logo .logo-icon, .footer-logo .logo-text { color: var(--green-lt); } .footer-tagline { font-size: .9rem; margin-top: .4rem; opacity: .8; } .footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1.5rem; } .footer-col-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; /* An explicit colour rather than opacity. At .65 these came out at 3:1 against the band — small uppercase text, which the guidelines treat as ordinary text needing 4.5:1, not as large text. */ color: #aab3ad; margin-bottom: .5rem; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: .3rem; } .footer-col a { font-size: .92rem; } .footer-meta { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.25rem; } /* Full strength. At .75 it sat under the threshold against the band, and it is the site's own name — not decoration. */ .footer-site { color: #c8cdd2; } .footer-legal { margin-top: .5rem; } .footer-legal a { color: inherit; text-decoration: underline; opacity: .8; } .footer-legal a:hover { opacity: 1; } /* The storage table: four narrow columns of short facts, so it reads better tight than spread across a prose measure. */ .privacy-table { width: 100%; max-width: 46rem; font-size: .92rem; } .privacy-table thead th { text-align: start; font-weight: 500; color: var(--gray-600); font-size: .8rem; padding-bottom: .4rem; } .privacy-table td { vertical-align: top; padding-right: 1rem; } .privacy-table code { font-size: .86rem; white-space: nowrap; } .privacy-hosts { max-width: 46rem; font-size: .95rem; line-height: 1.8; } .privacy-hosts code { font-size: .88rem; } @media (max-width: 46rem) { .footer-top { grid-template-columns: 1fr; gap: 1.5rem; } .month-strip { grid-template-columns: repeat(6, 1fr); } .calendar { font-size: .78rem; } .calendar tbody th { font-size: .8rem; } } /* ── Written bulletin ── One entry per country. Deliberately plain: it is meant to be read straight down, or jumped into via the anchor on each heading. */ .bulletin-entry { margin-bottom: 1.5rem; } .bulletin-entry h2 { font-size: 1.1rem; margin-bottom: .2rem; } .bulletin-entry p { margin: 0; } /* ══════════════════════════════════════════════════════════════════════ Trend charts ══════════════════════════════════════════════════════════════════════ One card per species that has anything in the air, drawn as inline SVG. No chart library: the shape is an area and a baseline, the data is a dozen points, and pulling in a rendering engine for that would cost more than the whole rest of the page. ────────────────────────────────────────────────────────────────────── */ .charts-section { padding: 2.5rem 0; } .charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; margin-top: 1.25rem; } .chart-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 1rem 1.1rem 1.2rem; box-shadow: var(--shadow); } [data-theme="dark"] .chart-card { background: #131f1a; border-color: #2a3a33; } .chart-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; } .chart-title { font-weight: 500; font-size: .98rem; } .chart-svg { width: 100%; height: 5.5rem; display: block; overflow: visible; } /* Today splits measured from forecast. The dashed rule is the only thing distinguishing the two halves, so it has to survive dark mode and printing — hence a token rather than a hard-coded grey. */ .chart-today { stroke: var(--gray-300); stroke-width: 1; stroke-dasharray: 3 3; } .chart-area { fill: var(--green-lt); opacity: .28; } .chart-line { fill: none; stroke: var(--green); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } /* The forecast half is drawn lighter: it has not happened yet, and a chart that renders a prediction exactly like a measurement is making a claim it cannot support. */ .chart-line.forecast { stroke-dasharray: 4 3; opacity: .75; } .chart-area.forecast { opacity: .14; } .chart-axis { display: flex; justify-content: space-between; font-size: .7rem; color: var(--gray-600); margin-top: .35rem; } @media (max-width: 46rem) { .charts-grid { grid-template-columns: 1fr; } } /* ── Not found ── Centred and short. Someone who has hit a dead end wants the way out to be the most visible thing on the page, not a joke they have to scroll past. The 404 itself is decorative — it is in the title and the status line, so a screen reader is told twice already. */ .notfound { max-width: 34rem; margin: 3rem auto; text-align: center; } .notfound-code { font-size: clamp(4rem, 14vw, 7rem); font-weight: 700; line-height: .9; color: var(--green); opacity: .18; letter-spacing: -.04em; } .notfound h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin-top: -.5rem; } .notfound .lede, .notfound p { margin-left: auto; margin-right: auto; } .notfound .outro { display: flex; gap: 1rem; justify-content: center; align-items: center; flex-wrap: wrap; }