:root { color-scheme:light; --blue:#0f3b5f; --dark:#123047; --teal:#5fb7b7; --green:#6fa36f; --light:#f4f8f9; --text:#263238; /* Semantic UI tokens (themed in the [data-theme="dark"] block below). Use these for chrome/surfaces rather than literal colours so dark mode flips in one place. --ink is "dark text on a light surface"; it is kept separate from --dark because --dark also paints the always-dark footer, which must NOT flip in dark mode. */ --surface:#ffffff; /* cards, header, dropdowns, table cells */ --surface-alt:#eaf1f4; /* alternating section tint, striped rows */ --ink:var(--dark); /* nav text, card body text, icons */ --muted:#4f5b66; /* secondary/intro text */ --border:#d9e3e7; /* structural dividers */ --border-soft:#eef2f4; /* hairline dividers */ } /* Dark theme. The initial value of data-theme is set by a tiny inline script in the document (from localStorage, else the OS preference) so there is no flash. */ :root[data-theme="dark"] { color-scheme:dark; --blue:#7fb4d9; /* brand blue lightened so headings/links read on dark */ --teal:#6fc7c7; --green:#8fc28f; --text:#d6e0e6; --light:#0e1a24; /* page background */ --dark:#0a1620; /* footer stays dark, just a touch deeper than surfaces */ --surface:#16242f; --surface-alt:#1d2f3c; --ink:#cdd9e0; --muted:#9fb0bb; --border:#2a3a45; --border-soft:#243441; } /* The SYLVA wordmark is a single-colour navy SVG — flip it to white on the dark header. */ :root[data-theme="dark"] .logo .hero-img { filter:brightness(0) invert(1); } /* Partner/related-project logos are dark monochrome art; sit them on white chips so they stay legible on dark cells. */ :root[data-theme="dark"] .sylva-table td.logo-cell img { background:#fff; border-radius: 8px; padding:6px; } /* Pre-rendered light/dark logo variants (footer funding logos, social icons) must follow the site theme toggle, NOT the OS colour scheme. They sit in .main-footer on the page background, which flips with data-theme; the old tracked only the OS, so toggling against the OS showed the wrong-contrast file. Markup carries both variants as ; these helpers reveal the one matching data-theme. */ :root[data-theme="dark"] .theme-img-light { display:none; } :root:not([data-theme="dark"]) .theme-img-dark { display:none; } /* Smooth the switch between themes for the surfaces that actually change colour. */ body, header, footer, .menu, .dropdown-content, .card, .stat-card, .pilot, .latest-news-item, .device-status, .sylva-table th, .sylva-table td { transition:background-color .25s ease, border-color .25s ease, color .25s ease; } /* Leave room for the sticky header when scrolling to an anchor (htmx show:#id:top, native #hash links). Without this the targeted heading lands at viewport top — i.e. hidden behind the ~100px sticky header. Applied to the scroll container (the root). */ html { scroll-padding-top: 110px; } @media (max-width:950px) { html { scroll-padding-top: 96px; } } body { margin:0; font-family:Arial, sans-serif; background:var(--light); color:var(--text); line-height:1.6; /* Sticky footer: keep the page at least full-height so the footer sits at the bottom of the viewport on short pages instead of floating up. */ min-height:100vh; display:flex; flex-direction:column; } main { flex:1 0 auto; } figure { border-radius: 14px; margin:0; overflow:hidden; position:relative; } figure img { border-radius: 14px; display:block; max-width: 1200px; } video { border-radius: 14px; } figcaption { position:absolute; left: 10px; bottom: 3px; padding: 12px 16px; background:color-mix(in srgb, var(--light) 98%, transparent); border-radius: 14px; color:var(--text); font-size:14px; line-height:1.4; } .sr-only { position:absolute; width:1px; height:1px; padding:0; clip:rect(0,0,0,0); white-space:nowrap; border:0; } header { background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:1000; isolation:isolate; } .nav { max-width:1200px; margin:auto; padding:18px 32px; display:flex; justify-content:space-between; align-items:center; } .logo { font-size:30px; font-weight:800; color:var(--blue); } .menu { display:flex; gap:10px; align-items:center; } /* Dark-mode toggle: icon-only chip on desktop; becomes a labelled row inside the open hamburger menu on mobile (see the rule in the max-width:950px block). */ .theme-toggle { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:40px; height:40px; margin-left:6px; padding:0; border:0; border-radius:10px; background:none; cursor:pointer; color:var(--ink); line-height:1; font-family:Arial, sans-serif; } .theme-toggle:hover { background:color-mix(in srgb, var(--ink) 12%, transparent); } /* Fixed-box SVG icons (not emoji) so the glyph height is identical in every browser. */ .theme-toggle-icon { width:18px; height:18px; display:block; flex:0 0 auto; } /* Show the moon ("switch to dark") in light mode, the sun in dark mode. */ .theme-toggle .theme-toggle-sun, :root[data-theme="dark"] .theme-toggle .theme-toggle-moon { display:none; } :root[data-theme="dark"] .theme-toggle .theme-toggle-sun { display:block; } /* The text label rides along only in the stacked mobile menu. */ .theme-toggle-label { display:none; font-size:15px; font-weight:600; } .menu a, .menu a:visited, .dropbtn { text-decoration:none; color:var(--ink); padding:12px; font-size:14px; font-weight:600; background:none; border:none; cursor:pointer; font-family:Arial, sans-serif; } /*.menu a.active:visited,*/ .menu a.active, .dropbtn.active, .dropdown:has(.dropdown-content a.active) .dropbtn { /* Must differ in hue from the inactive --dark (#123047); --blue (#0f3b5f) is nearly identical and reads as "not active". --teal is the visible accent. --accent-blue ?*/ color:var(--teal); } .dropdown { position:relative; } .dropdown-content { display:none; position:absolute; background:var(--surface); min-width:240px; border-radius:10px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.12); top:42px; z-index:200; } .dropdown-content a { display:block; padding:14px 16px; /* Integer line-height keeps each row a whole, scale-friendly height (14+20+14=48px) so every border-bottom lands on a whole device pixel. Inheriting body's 1.6 gives 22.4px line boxes → fractional row heights → hairlines anti-aliased to uneven shades at non-100% display scaling. */ line-height:20px; border-bottom:1px solid var(--border-soft); } /* No divider under the last item — it would sit on the menu's rounded bottom edge. */ .dropdown-content a:last-child { border-bottom:0; } @media (hover: hover) { .dropdown:hover .dropdown-content { display:block; } } .hamburger { display:none; background:none; border:0; padding:0; cursor:pointer; width:44px; height:44px; position:relative; } .hamburger span { display:block; position:absolute; left:50%; width:26px; margin-left:-13px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s, opacity .2s; } .hamburger span:nth-child(1) { top:14px; } .hamburger span:nth-child(2) { top:21px; } .hamburger span:nth-child(3) { top:28px; } .hamburger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .hamburger[aria-expanded="true"] span:nth-child(2) { opacity:0; } .hamburger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } .hero-img { height: auto; width: auto; max-height: clamp(32px, 6.0vw, 64px); min-height: 32px; max-width: 100%; flex-shrink: 0; vertical-align: middle; border-radius: 0px; } .hero { position:relative; overflow:hidden; background: linear-gradient( rgba(6,25,35,.58), rgba(8,35,45,.52) ), url('img/pollen_hero_background.png'); background-size: cover; background-position: center; background-repeat: no-repeat; color: white; padding: 140px 32px 120px; } .hero::after { content:""; position:absolute; inset:0; z-index:1; background: radial-gradient( circle at top right, rgba(255,220,120,.18), transparent 40% ); pointer-events:none; } .hero-inner { position:relative; z-index:2; max-width:1200px; margin:auto; display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; } .hero h1 { font-size:54px; line-height:1.05; margin-bottom:24px; text-shadow:0 4px 20px rgba(0,0,0,.35); } .hero p { font-size:20px; margin-bottom:32px; text-shadow:0 2px 10px rgba(0,0,0,.35); } .pollen-layer { position:absolute; inset:0; z-index:1; pointer-events:none; background-image: radial-gradient(circle, rgba(255,255,255,.35) 1px, transparent 2px), radial-gradient(circle, rgba(255,220,120,.25) 1px, transparent 2px); background-size: 140px 140px, 220px 220px; animation:pollenFloat 30s linear infinite; opacity:.45; } img { /* Never let an image exceed its container — guards against fixed-width images (e.g. .bioaerosol-image at 700px) overflowing a narrower grid column or the viewport. height:auto keeps the aspect ratio when the width is capped. */ max-width:100%; height:auto; border-radius:14px; } .bioaerosol-image { width: 700px; } /* Live station status table ("traffic lights") on the main page. Markup is built at runtime by initStatusTable() in site.js. */ .device-status { background:var(--surface); border-radius:14px; box-shadow:0 14px 40px rgba(0,0,0,.12); padding:8px 0; overflow:hidden; } .status-table { display:grid; grid-template-columns:auto 1fr auto; } /* display:contents lets each row's three cells participate directly in the table grid, so columns line up across every row. */ .status-row { display:contents; } .status-row > span { display:flex; align-items:center; padding:10px 18px; border-bottom:1px solid var(--border-soft); } .status-head > span { font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--blue); } .status-cell-name { font-weight:600; color:var(--ink); } .status-cell-device { color:var(--text); } .status-country { margin-left:8px; font-size:12px; font-weight:700; color:#fff; background:var(--teal); border-radius:6px; padding:1px 7px; } .status-light { display:inline-block; flex:0 0 auto; width:14px; height:14px; border-radius:50%; box-shadow:0 0 0 3px rgba(0,0,0,.06); } .status-green { background:#2e9e4f; } .status-yellow { background:#e8c020; } .status-orange { background:#e8821e; } .status-red { background:#d64545; } .status-legend { display:flex; flex-wrap:wrap; gap:14px; padding:12px 18px 6px; font-size:13px; color:var(--text); } .status-legend > span { display:flex; align-items:center; gap:6px; } .status-message { padding:18px; color:var(--text); } img.icon { border-radius: 0px; height: 1rem; width: 1rem; vertical-align: text-top; } /* These .icon SVGs (external-link, calendar) are stroke="currentColor" loaded via , so they can't inherit the page text colour and render black — invisible on dark surfaces. Invert them to a light tone (≈ --ink) in dark mode so they read against the dark header/cards. */ :root[data-theme="dark"] img.icon { filter: invert(0.85); } @keyframes pollenFloat { from { background-position: 0 0, 20px 40px, 60px 20px; } to { background-position: 300px -500px, 220px -420px, 400px -600px; } } /* Buttons live on the always-dark hero image, so keep them a fixed light chip with fixed dark-blue text in both themes (not the themed --blue, which lightens). */ .button { display:inline-block; background:#fff; color:#0f3b5f; padding:14px 22px; border-radius:14px; text-decoration:none; font-weight:700; margin-right:12px; margin-bottom:12px; } .button.secondary { background:transparent; color:white; border:2px solid white; } /* Sections are full-bleed; .content-container does all horizontal centering. The background tint alternates automatically (see section:nth-of-type below). */ section { padding:48px 0; } /* On inner pages the first
sits directly under the sticky nav, so its full top padding reads as wasted space. The main page leads with .hero (a
, not a section), so the section isn't :first-child there and this never applies. */ #content > section:first-child { padding-top:24px; } .section-title { font-size:40px; color:var(--blue); margin-bottom:20px; line-height:1.15; } .section-intro { max-width:850px; font-size:19px; line-height:1.8; color:var(--muted); margin-top:-4px; margin-bottom:42px; } .eyebrow { color:var(--teal); text-transform:uppercase; font-size:13px; letter-spacing:.12em; font-weight:800; margin-bottom:12px; } .hero .eyebrow { color:white; opacity:.95; } .two-col { display:grid; grid-template-columns:1fr 1fr; gap:24px; } .two-col + .two-col { margin-top:24px; } .card { background:var(--surface); padding:30px; border-radius:14px; box-shadow:0 8px 26px rgba(0,0,0,.06); } /* Wrap a .card in to make the whole card a link without inheriting default link colour/underline/visited styling. Cursor stays pointer (anchor default). */ .card-link { display:block; color:inherit; text-decoration:none; } .card-link:hover h3 { text-decoration:underline; } .card-row { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:24px; } .card-row-fill { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } .card-top { border-top:6px solid var(--accent, transparent); } .card-left { border-left:6px solid var(--accent, transparent); } .accent-blue { --accent:#3b82f6; } .accent-green { --accent:#10b981; } .accent-purple { --accent:#8b5cf6; } .accent-orange { --accent:#f59e0b; } .accent-red { --accent:#ef4444; } /* The single centering element for all section content: a full-bleed section re-centers its content into a 1200px column here. */ .content-container { max-width:1200px; margin:auto; padding:0 32px; } /* Automatic alternating tint: every even section becomes a full-bleed band. Counting is source order among
s within #content (the hero is a
, so it isn't counted). Switch to :nth-of-type(odd) to tint the first section instead. */ section:nth-of-type(even) { background:var(--surface-alt); } .content-container :is(h3, h4) { color:var(--blue); margin-bottom:20px; line-height:1.15; } /* LATEST NEWS SUMMARY (rendered by the generator's NEWS_TABLE_* constants) */ .latest-news-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; } .latest-news-item { display:grid; grid-template-columns:140px 1fr; gap:24px; align-items:baseline; background:var(--surface); padding:18px 24px; border-radius:12px; box-shadow:0 4px 14px rgba(0,0,0,.05); } .latest-news-date { color:var(--teal); font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; } .latest-news-link { color:var(--blue); text-decoration:none; font-weight:600; font-size:18px; } .latest-news-link:hover { text-decoration: none; } @media(max-width:600px) { .latest-news-item { grid-template-columns:1fr; gap:4px; } } .deliverables, .deliverables ol { list-style:none; margin:0; padding:0; } /* Outer counter = work package number (the "1" / "2" in D1.x / D2.x). */ .deliverables { counter-reset:wp; } .deliverables > li { counter-increment:wp; } .deliverables > li + li { margin-top:28px; } /* Inner counter = deliverable sequence; restart it for each work package. */ .deliverables > li > ol { counter-reset:del; } .deliverables-wp { color:var(--teal); text-transform:uppercase; font-size:13px; letter-spacing:.12em; font-weight:800; margin:0 0 10px; } /* One deliverable = one striped row: [ D-number | title | download ]. */ .deliverables ol > li { counter-increment:del; display:grid; grid-template-columns:5.5rem 1fr auto; gap:24px; align-items:baseline; padding:14px 20px; border-radius: 8px; margin-bottom: 4px; } /* Alternating shades. nth-of-type restarts per work package, so every package's first row is the lighter tone — visually consistent columns. */ .deliverables ol > li:nth-of-type(odd) { background:var(--surface-alt); } .deliverables ol > li:nth-of-type(even) { background:var(--light); } /* The D. label, generated entirely from the counters. */ .deliverables ol > li::before { content:"D" counter(wp) "." counter(del); font-weight:700; color:var(--blue); font-variant-numeric:tabular-nums; } .deliverables-title { color:var(--text); } .deliverables-download { white-space:nowrap; font-weight:600; color:var(--blue); text-decoration:none; } .deliverables-download:hover { text-decoration:underline; } @media(max-width:600px) { .deliverables ol > li { grid-template-columns:4rem 1fr; row-gap:6px; } .deliverables-download { grid-column:2; } } .pilot-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .pilot { background:var(--surface); border-radius: 14px; overflow:hidden; box-shadow:0 8px 26px rgba(0,0,0,.06); } .pilot-image { height:180px; background-size:cover; background-position:center; } .pilot-content { padding:24px; } .pilot h3 { color:var(--blue); margin-top:0; } .pilot h4 { color:var(--teal); margin-bottom:6px; } footer { background:var(--dark); color:white; padding:40px; flex-shrink:0; } footer a, footer a:visited { color: white; text-decoration: underline; font-weight:600; } footer a:hover { text-decoration: underline; } .footer-inner { max-width:1200px; margin:auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; } @media(max-width:950px){ .hero-inner, .pilot-grid, .two-col, .stat-grid, .card-row { grid-template-columns:1fr; } .hamburger { display:flex; } .menu { display:none; position:absolute; top:100%; left:0; right:0; z-index:1000; background:var(--surface); flex-direction:column; align-items:stretch; padding:12px 24px 20px; gap:0; box-shadow:0 14px 30px rgba(0,0,0,.12); border-top:1px solid var(--border); max-height:calc(100vh - 80px); overflow-y:auto; } .menu.open { display:flex; } .menu > a { padding:14px 0; border-bottom:1px solid var(--border-soft); } .menu > a:last-child { border-bottom:0; } .menu > .theme-toggle { width:100%; height:auto; justify-content:flex-start; margin-left:0; padding:14px 0; border-radius: 0; border-top:1px solid var(--border-soft); } .theme-toggle-label { display:inline; } .dropdown { width:100%; } .dropbtn { width:100%; text-align:left; padding:14px 0; border-bottom:1px solid var(--border-soft); } .dropdown-content { position:static; box-shadow:none; border-radius: 0; padding-left:16px; min-width:0; } .dropdown.open .dropdown-content { display:block; } .dropdown-content a { padding:12px 0; line-height:20px; /* Integer row height (12+20+12=44px) — keeps border-bottom hairlines on whole pixels; see desktop rule. */ border-bottom:1px solid var(--border-soft); } .dropdown-content a:last-child { border-bottom:0; } .hero h1 { font-size:40px; } } .sylva-table a, .sylva-table a:visited { color: var(--ink); font-size: 1.6rem; text-decoration: inherit; } .sylva-table a:hover { text-decoration: underline; } .sylva-table table { padding-top: 1em; padding-bottom: 1em; width: 100%; } table.sylva-table { border-radius:14px; width: 100%; /* Clip the cell backgrounds and row dividers to the rounded corners — without this they paint square over the radius. Works because border-collapse stays separate (see border-spacing:0 below). */ overflow:hidden; } table.sylva-table, table.sylva-table th, table.sylva-table td { background-color: var(--surface); } tbody.online-data-table, tbody.online-data-table a, tbody.online-data-table a:visited { font-size: initial; } .sylva-table td { padding: 0.75rem 1rem; } .sylva-table { --partner-divider: var(--teal); border-spacing:0; } .sylva-table tbody tr:not(:last-child) td { border-bottom:1px solid var(--partner-divider); } td.logo-cell , td.logo-text-cell { text-align: center; vertical-align: middle; } td.logo-cell { padding-left: 1rem; padding-right: 1rem; width: 6rem; } td.logo-text-cell { width: 12rem; } td.logo-text-cell > a:hover, td.logo-text-cell > a { color:var(--blue); font-size: 1.2rem; font-weight: 600; text-decoration: none; } .sylva-table td.logo-cell img { border-radius: 0; display: inline-block; margin: 0 auto; padding-bottom: 0; vertical-align: middle; height: auto; min-width: 1.25rem; max-width: 100%; } .main-footer { display: flex; flex-direction: column; align-items: center; gap: clamp(1.5rem, 4vw, 2rem); padding: 2rem 1rem; text-align: center; } .main-footer img { /* Footer logos/icons are not photos — override the global rounded img corners. */ border-radius: 0; } .main-footer-logos { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; row-gap: clamp(1rem, 4vw, 1.5rem); } .logo-wrapper { /* Shrink all 3 logos together on smallest screens */ max-width: 360px; /* The largest logo size */ width: 100%; display: flex; justify-content: center; align-items: center; } .footer-logo { height: auto; display: block; width: 100%; margin-left: auto; margin-right: auto; } .footer-logo.fmi { max-width: 100%; /* 360px/360px */ } .footer-logo.seri { max-width: 100%; /* 360px/360px */ padding-left: 0.5rem; } .footer-logo.eu { max-width: 77.78%; /* 280px/360px */ margin-top: -0.2rem; } .main-footer-social { display: flex; flex-direction: column; align-items: center; } .main-footer-social-buttons { display: flex; gap: 1rem; justify-content: center; align-items: center; padding-top: 0; padding-bottom: 1rem; } .tappable-button { /* When applied to , enlarges tappable area around actual buttons */ display: inline-flex; align-items: center; justify-content: center; padding: 8px; min-width: 44px; min-height: 44px; border-radius: 6px; text-decoration: none; margin: 0; } .tappable-button.text { padding: 6px 2px; min-height: 1em; } .clickable-logo { transition: opacity 0.3s ease, filter 0.3s ease; cursor: pointer; } .clickable-logo:hover { opacity: 0.5; } .clickable-logo.linkedin, .clickable-logo.bluesky { /* Individual social button sizes */ height: 28px; display: block; } .clickable-logo.newsletter { height: 34px; margin-bottom: 4px; display: block; } .main-footer-project-id p { font-size: clamp(0.6rem, 3vw, 0.8rem); white-space: nowrap; overflow: hidden; text-align: center; } @media (max-width: 576px) { .main-footer-social-buttons { gap: 0.75rem; } .tappable-button { min-width: 36px; min-height: 36px; } .clickable-logo.linkedin, .clickable-logo.bluesky { height: 24px; } .clickable-logo.newsletter { height: 30px; margin-bottom: 2px; } } @media (min-width: 768px) { .main-footer-logos { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 1.5rem; } .logo-wrapper { /* Keep wrappers as real flex items — dissolving them with display:contents made Chrome overlap wrapped rows */ width: auto; max-width: none; } .footer-logo { width: auto; } .footer-logo.fmi, .footer-logo.seri { width: 360px; max-width: 360px; padding-left: 0; } .footer-logo.eu { width: 280px; max-width: 280px; margin-top: 0; } } @media (min-width: 1600px) { .main-footer { display: grid; grid-template-columns: 5.5fr 2.5fr; align-items: start; text-align: left; padding: 2rem 0; gap: 2rem; } .main-footer-logos { flex-direction: row; justify-content: flex-start; align-items: flex-start; flex-wrap: nowrap; } .main-footer-social { align-items: flex-end; margin-top: -8px; } .main-footer-social-buttons { justify-content: flex-end; padding: 0; } .main-footer-project-id { padding-top: 0.4rem; text-align: right; } } /* Generic responsive row of photos. Drop any number of
(or bare ) children in and they flow into equal-width columns that wrap, collapsing toward a single column on narrow screens. Tune the smallest column width before wrapping with --figure-min. The min(100%, …) guard lets a column shrink below that floor on very narrow viewports so a single image never overflows its container. */ .figure-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--figure-min, 220px)), 1fr)); gap: 16px; align-items: start; margin: 24px 0; } .figure-row figure { margin: 0; } .figure-row img { width: 100%; height: auto; } /* Several photos in a .news-img wrapper stack vertically (big images that would be too small side by side). figure{margin:0} leaves them flush, so add breathing room between adjacent ones. Targeting figure+figure leaves the common single-image case untouched. */ .news-img figure + figure { margin-top: 24px; } /* Click-to-load facade for third-party post embeds (e.g. LinkedIn). Shows a lightweight card; the real cross-origin