/* ============================================================ themeV0.01.css — the single sitewide stylesheet. Loaded FIRST by every page (before any app stylesheet), so app rules always win on equal specificity. It is the CSS counterpart of the topbar.php / footer.php partials: everything that used to be copy-pasted into a dozen app stylesheets lives here once. THE VERSION IN THE FILENAME IS LOAD-BEARING. This file is served `Cache-Control: public, max-age=604800, immutable` (root .htaccess), and `immutable` means browsers will not revalidate it even on a hard reload. Editing it in place therefore reaches new visitors only — everyone else keeps the old bytes until their copy expires. So: any change here must bump the filename (V0.01 -> V0.02) and update the 66 `href="/themeV0.01.css"` references, then deploy both together. Renamed from the unversioned theme.css on 2026-07-22 for exactly this reason; see plan/12-lighthouse-sitewide.md §8. Matches the convention already used by commonV0.03.js / homeV0.01.css / imgrV0.07.css. Contents 1. font GSans variable face 2. tokens design tokens — light (default) + dark skin 3. base reset + body 4. utilities .hidden, .is-disabled 5. cookie cookie consent banner 6. footer footer grid, links, message box, language + skin pickers 7. shell generic .page-* content shell 8. mobile SKIN LIGHT IS THE DEFAULT. The light values live on plain :root, so a page renders light even if the attribute is missing for any reason; dark is the opt-in overlay on :root[data-theme="dark"]. The skin is chosen server-side from the `skin` cookie and rendered as , so there is no flash of the wrong theme and no inline script (strict CSP). The footer picker flips the attribute live and stores the cookie — see the skin block in commonV0.03.js. Everything colour-related must go through a token below. A hard-coded colour in an app stylesheet is invisible to the other skin. ============================================================ */ /* ============================================================ 1. FONT ============================================================ */ /* GSans is split per script. The source GSansVar.ttf is 4.7 MB (1.9 MB over the wire) because it carries Latin, Cyrillic, Greek, Hebrew, Thai, Devanagari, Bengali and Armenian in one file -- and every page was paying for all of it. That was 95% of the bytes of an average page. We do not drop scripts: footer.php offers 51 languages. Instead each script is its own WOFF2 with a unicode-range, so the browser downloads only the ones the page actually puts on screen. An English page fetches gsans-latin.woff2 (42 KB) and nothing else. Rebuild with: python3 fonts/build-subsets.py The ranges below must stay in sync with RANGES in that script. font-weight is 400 700 and not 100 700: the wght axis in the shipped font really is 400..700, so the old declaration was promising a Thin the font never had, and the browser clamped it anyway. CJK (ja/zh/ko) and Arabic (ar/fa/ur) are absent from the source font, so those languages fall back to the system UI font exactly as they did before. Italic ships Latin only -- every italic rule on the site is UI chrome (.muted, , article emphasis). Non-Latin italic gets a synthesised oblique instead of a multi-megabyte download nobody reads. */ @font-face { font-family: "GSans"; src: url("/fonts/gsans-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "GSans"; src: url("/fonts/gsans-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "GSans"; src: url("/fonts/gsans-cyrillic.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "GSans"; src: url("/fonts/gsans-cyrillic-ext.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: "GSans"; src: url("/fonts/gsans-greek.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0370-03FF; } @font-face { font-family: "GSans"; src: url("/fonts/gsans-greek-ext.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+1F00-1FFF; } @font-face { font-family: "GSans"; src: url("/fonts/gsans-hebrew.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } @font-face { font-family: "GSans"; src: url("/fonts/gsans-thai.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: "GSans"; src: url("/fonts/gsans-devanagari.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; } @font-face { font-family: "GSans"; src: url("/fonts/gsans-bengali.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0980-09FE, U+200C-200D, U+20B9, U+25CC; } @font-face { font-family: "GSans"; src: url("/fonts/gsans-armenian.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0530-058F, U+FB13-FB17; } @font-face { font-family: "GSans"; src: url("/fonts/gsans-it-latin.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "GSans"; src: url("/fonts/gsans-it-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ============================================================ 2. TOKENS Light (plain :root) is the default and is derived from flight-compensation/eu261.es/css/themeV0.01.css, so the two sites share one visual language. Dark ([data-theme="dark"]) reproduces the palette the site shipped before the consolidation and must stay pixel-identical. ============================================================ */ :root[data-theme="dark"] { color-scheme: dark; /* page */ --bg: #0b1220; --bg-2: #0e1730; /* body gradient end */ --bg-deep: #0a0f1c; /* insets, code blocks, wells */ /* surfaces */ --panel: #111a2e; --panel-light: #16223c; --panel-hover: #1b2a4d; --panel-alt: #0f172a; --surface-grey: #111827; /* cloud/* slate surface */ --field-hover: #1a2b49; /* lines */ --border: #22304f; --border-soft: #243041; /* ink */ --text: #e6edf6; --text-strong: #ffffff; /* headings — NEVER hard-code #fff */ --text-dim: #9fb0cc; --text-mute: #9ca3af; --text-grey: #e5e7eb; /* cloud/* body ink */ /* accent */ --accent: #3b82f6; --accent-soft: #60a5fa; --accent-strong: #2563eb; --accent-pale: #93c5fd; --accent-deep: #1d4ed8; --on-accent: #ffffff; /* status */ --success: #22c55e; --danger: #ef4444; --danger-soft: #f87171; --warn: #fbbf24; /* effects */ --shadow: 0 6px 24px rgba(0, 0, 0, .45); --scrim: rgba(0, 0, 0, .5); --overlay-1: rgba(255, 255, 255, .04); --overlay-2: rgba(255, 255, 255, .08); --cookie-bg: rgba(17, 26, 46, .98); /* Border for filled/secondary buttons. Dark separates them by fill alone, so it stays transparent there; light needs a real edge — see §6. */ --btn-border: transparent; --panel-shadow: 0 0 0 0 transparent; /* Selected rows/cards in the cloud file managers. --text is deliberately the ink on top of --select-bg: it is light in dark and dark in light, so the pair reads correctly in both skins. */ --select-bg: #003173; --select-dim: #c7d2fe; } :root { color-scheme: light; /* The page canvas is a light grey and panels are pure white, so cards and toolbars separate from the background the same way they do in dark (where the page is darker than the panel). An all-white page + all-white panels made every card disappear except for its 1px border. */ --bg: #f2f2f5; --bg-2: #e9e9ee; /* body gradient end */ --bg-deep: #e6e6eb; /* insets, code blocks, wells */ --panel: #ffffff; --panel-light: #f5f5f7; --panel-hover: #e8e8ed; --panel-alt: #fafafc; --surface-grey: #ffffff; --field-hover: #ececf0; --border: #d2d2d7; --border-soft: #e3e3e6; --text: #1d1d1f; --text-strong: #1d1d1f; --text-dim: #6e6e73; --text-mute: #86868b; --text-grey: #1d1d1f; --accent: #0066cc; --accent-soft: #0055b3; --accent-strong: #0066cc; --accent-pale: #0a66c2; --accent-deep: #004494; --on-accent: #ffffff; --success: #1a7f37; --danger: #b3261e; --danger-soft: #c5372c; --warn: #8a5a00; --shadow: 0 6px 24px rgba(0, 0, 0, .08); --scrim: rgba(0, 0, 0, .35); --overlay-1: rgba(0, 0, 0, .03); --overlay-2: rgba(0, 0, 0, .06); --cookie-bg: rgba(255, 255, 255, .98); --btn-border: #d2d2d7; --panel-shadow: 0 1px 2px rgba(0, 0, 0, .05); --select-bg: #d8e8fb; --select-dim: #4a6fa5; } /* ============================================================ 3. BASE Deliberately minimal. Layout-specific body rules (padding, display:flex, a flat background) stay in the app stylesheet that needs them and win because they are loaded after this file. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: "GSans", "Segoe UI", Arial, sans-serif; background: linear-gradient(180deg, var(--bg), var(--bg-2)); color: var(--text); } /* ============================================================ 4. UTILITIES ============================================================ */ .hidden { display: none; } .is-disabled { opacity: 0.7; cursor: wait; pointer-events: none; } /* Hide from the screen but KEEP in the accessibility tree. Not the same thing as .hidden: display:none removes the element from the a11y tree too, which is how the topbar toggle ended up with no accessible name at all on mobile (see the mobile block in topbar.css). Use this whenever a label is collapsed for space rather than removed. */ .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; } /* ============================================================ 5. COOKIE BANNER ============================================================ */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: var(--cookie-bg); border-top: 1px solid var(--border); padding: 16px; z-index: 9999; backdrop-filter: blur(8px); display: none; } .cookie-banner.cookie-banner-visible { display: block; } .cookie-wrap { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; justify-content: space-between; } .cookie-text { flex: 1; min-width: 260px; color: var(--text-dim); font-size: 13px; } .cookie-options { display: flex; flex-direction: column; gap: 6px; min-width: 200px; } .cookie-option { display: flex; justify-content: space-between; font-size: 13px; color: var(--text); background: var(--panel-light); padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); } .cookie-option input { transform: scale(1.1); } .cookie-actions { display: flex; gap: 10px; align-items: center; } .cookie-btn { padding: 8px 14px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; font-size: 13px; background: var(--panel-light); color: var(--text); } .cookie-accept { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .cookie-reject { background: transparent; } /* ============================================================ 6. FOOTER ============================================================ */ .footer { margin-top: 40px; padding: 24px 20px; background: var(--panel); border-top: 1px solid var(--border); color: var(--text-dim); font-size: 13px; } .footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; margin: 0 auto; text-align: left; } .footer h4 { margin-bottom: 8px; font-size: 13px; color: var(--text); } /* padding, not just line-height: these links were 17px tall and 20px apart, failing the 24x24 minimum touch target. The padding is what the finger actually hits, so it has to be on the itself -- spacing the rows further apart would not have helped, the target would still be 17px. */ .footer a { display: block; color: var(--text-dim); text-decoration: none; margin: 3px 0; padding: 4px 0; min-height: 24px; box-sizing: border-box; } .footer a:hover { color: var(--accent-soft); } .footer-bottom { margin-top: 16px; text-align: center; font-size: 12px; border-top: 1px solid var(--border); padding-top: 10px; } /* message form */ .msg-box { margin-top: 8px; display: flex; gap: 6px; } .msg-box input { flex: 1; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel-light); color: var(--text); font-size: 12px; } .msg-box button { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); cursor: pointer; font-size: 12px; } .msg-status { font-size: 11px; margin-top: 4px; color: var(--text-dim); } .msg-status-ok { color: var(--text-dim); } .msg-status-error { color: var(--danger-soft); } /* language + skin pickers — same control, same styling */ .footer-lang, .footer-skin { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; } .footer-lang label, .footer-skin label { font-size: 0.9rem; color: var(--text-dim); } .footer-lang select, .footer-skin select { background: var(--panel-light); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 0.95rem; outline: none; cursor: pointer; transition: border-color .2s ease, background .2s ease; } .footer-lang select:hover, .footer-lang select:focus, .footer-skin select:hover, .footer-skin select:focus { border-color: var(--accent); background: var(--field-hover); } /* ============================================================ 7. GENERIC CONTENT SHELL Used by the legal / informational pages (privacy, cookies, terms, error). ============================================================ */ .page-container { max-width: 900px; margin: 0 auto; padding: 30px; } .page-nav { display: flex; gap: 8px; margin-bottom: 20px; } .page-nav a { padding: 8px 16px; background: var(--panel); color: var(--text-dim); text-decoration: none; border-radius: 8px; border: 1px solid var(--border); transition: 0.15s; } .page-nav a:hover { color: var(--text); background: var(--panel-light); } .page-nav a.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .page-section { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 20px; } .page-section h1, .page-section h3 { margin-top: 0; color: var(--text-strong); } .page-section p { color: var(--text-dim); line-height: 1.6; } .cookie-box { padding: 14px; background: var(--panel-light); border: 1px solid var(--border); border-radius: 10px; } .cookie-box strong { display: block; margin-bottom: 6px; color: var(--text); } .cookie-box p { margin: 0; color: var(--text-dim); } /* ============================================================ 8. MOBILE ============================================================ */ @media (max-width: 600px), (pointer: coarse) { .footer-grid { grid-template-columns: 1fr; } }