/* ========================================================================== Hydroscape theme hydroscape_theme.css Session 54, September 2026 Consolidated: one layer, one specificity system. One stylesheet, loaded after the compiled Tailwind build on every page of both sites. It changes colour, type, spacing and surfaces. It never changes words: every label, heading and paragraph on every page is left exactly as written. Capitals were text-transform in page CSS and are removed here. HOW THE CASCADE IS ARRANGED Every declaration that overrides page CSS is marked important, so page CSS never wins on its own (page rules are not important, with two exceptions handled in section 10). Among the theme's own rules, specificity and then file order decide, and the file is arranged so that intent flows downward: 1 tokens 5 controls 9 layout media 2 ground and band 6 coloured containers 10 page rules marked important 3 text, by element 7 components 4 surfaces 8 page-specific hooks Section 3 lifts text with bare element selectors (0,0,1): the lowest rung, so any class rule anywhere in this file beats it by specificity. Section 6 sets the ink of anything inside a coloured button with descendant rules (0,1,0) placed after the ink utilities they tie with, so a inside a lime button takes the button's dark ink. Touch-target floors in section 9 sit inside :where() at zero specificity so a page's own sizing always wins. To remove the theme from a page, remove its . Nothing else depends on it. Every themed page carries class="hs-theme" on ; it is only used in section 10. ========================================================================== */ /* ── 1 Tokens ─────────────────────────────────────────────────────────── */ :root { --hs-ground: #101B10; --hs-surface: #2E5A2A; /* cards: a green that sits on the ground (Rob, 14 Sep) */ --hs-surface-2: #3A6B36; /* panels inside a card, inputs, chips */ --hs-glass: rgba(46,90,42,.94); --hs-line: rgba(255,255,255,.12); --hs-line-2: rgba(255,255,255,.24); --hs-ink: #F6F8F1; /* near white with a breath of warmth */ --hs-ink-2: #DCE2D7; /* secondary: 4.77:1 on a panel, not just on a card */ --hs-ink-3: #98A496; /* placeholders and footers only */ --hs-lime: #A9B93C; /* the one accent, as a fill */ --hs-lime-2: #B9C94A; /* hover on lime */ --hs-lime-ink: #101B10; /* ink on lime */ --hs-red: #E06060; /* fills */ --hs-green: #7FC77A; --hs-blue: #6FB3D2; --hs-amber: #E0A63A; --hs-purple: #B58BE0; /* wildlife tint, fills and icons only */ --hs-purple-text:#E3D2F7; /* the same tint as text, measured on the panel */ --hs-lime-text: #DCEA7C; /* the same accents as text: brighter, measured to */ --hs-red-text: #FFCFCF; /* clear 4.5:1 on the card surface */ --hs-green-text: #C2EABE; --hs-blue-text: #BCE2F4; --hs-amber-text: #F8D998; --hero: none; /* each page sets its own photograph on */ --hero-lg: var(--hero); --hero-pos: 50% 40%; --hero-h: 320px; --hero-gap: 132px; color-scheme: dark; } @media (min-width: 900px) { :root { --hero-h: 440px; --hero-gap: 180px; } } /* ── 2 Ground and the photograph ──────────────────────────────────────── */ html { background: var(--hs-ground); } body { background: var(--hs-ground) !important; color: var(--hs-ink) !important; -webkit-font-smoothing: antialiased; position: relative; } ::selection { background: var(--hs-lime); color: var(--hs-lime-ink); } *:focus-visible { outline: 2px solid var(--hs-lime) !important; outline-offset: 2px; } * { scrollbar-color: var(--hs-surface-2) var(--hs-ground); } /* The photograph: a band at the top, lightly darkened, faded into the ground, behind the content. Pages set --hero (phone set) and --hero-lg (1600px). */ body::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--hero-h); background-image: linear-gradient(180deg, rgba(6,8,6,.08) 0%, rgba(8,12,8,.30) 55%, var(--hs-ground) 100%), var(--hero); background-size: cover, cover; background-position: center, var(--hero-pos); background-repeat: no-repeat; z-index: 0; pointer-events: none; } @media (min-width: 1100px) { body::before { background-image: linear-gradient(180deg, rgba(6,8,6,.08) 0%, rgba(8,12,8,.30) 55%, var(--hs-ground) 100%), var(--hero-lg); } } body > * { position: relative; z-index: 1; } main { padding-top: var(--hero-gap) !important; } /* Hub tools: a thinner band standalone, none inside the shell's iframe */ .hs-hub-tool { --hero-h: 240px; --hero-gap: 84px; } @media (min-width: 900px) { .hs-hub-tool { --hero-h: 300px; --hero-gap: 108px; } } .in-iframe body::before { display: none; } .in-iframe main { padding-top: 0 !important; } /* ── 3 Text, by element ───────────────────────────────────────────────── */ /* The lowest rung: page CSS left dark text on the dark ground in thousands of places, and this lifts all of it. Class rules below win by specificity. */ h1, h2, h3, h4, h5, h6, p, li, dd, dt, td, th, label, legend, summary, blockquote, figcaption, span, div, section, article, strong, b, em, i:not(.fa-solid):not(.fa-brands):not(.fa-regular) { color: var(--hs-ink) !important; } small { color: var(--hs-ink-2) !important; } a:not([class]):not([style*="background"]), p a:not([style*="background"]):not([class*="bg-"]), li a:not([class*="bg-"]), td a:not([class*="bg-"]), dd a:not([class*="bg-"]) { color: var(--hs-lime-text) !important; } input::placeholder, textarea::placeholder, .placeholder-slate-400::placeholder { color: var(--hs-ink-3) !important; } hr { border-color: var(--hs-line) !important; } blockquote { border-left-color: var(--hs-lime) !important; background: var(--hs-surface) !important; } code, pre { background: var(--hs-surface-2) !important; color: var(--hs-ink) !important; } /* Capitals and their tracking were styling; the words were already sentence case */ .uppercase, button, [role="button"], .header small, .footer p, .policy-meta-item strong, th, .section-label, .label, .hs-tab { text-transform: none !important; letter-spacing: 0 !important; } .tracking-wide, .tracking-wider, .tracking-widest, .tracking-\[0\.1em\], .tracking-\[0\.12em\], .tracking-\[0\.15em\], .tracking-\[0\.2em\] { letter-spacing: 0 !important; } /* Big figures carry the page */ .text-3xl, .text-4xl, .text-5xl, .text-6xl { font-weight: 800 !important; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } /* Ink utilities and hand-written text classes (0,1,0) */ .text-slate-900, .text-slate-800, .text-slate-700, .text-slate-600, .text-black, .text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-white, .text-\[\#707070\], .text-\[\#787b75\], .metric-name, .error-card h2, .error-card p, .loading-doctitle, .loading-msg, .zoom-label, .policy-meta dd, .policy-meta-item span, .policy-meta-item p, .gs-card p, .gs-card li, .hs-infographic-wrapper p, .hs-infographic-wrapper li, .hs-infographic-wrapper td, .hs-infographic-wrapper h1, .hs-infographic-wrapper h2, .hs-infographic-wrapper h3, .hs-fab-card, .hs-fab-card *, .hs-fab-row, .hs-fab-row *, #cookieConsent, #cookieConsent p, #cookieConsent span, #cookieConsent div, .section-h, .sub-heading, .shelf-title, .shelf-card-title, .section-title, .brand-fishery, .card-title, .panel-title, .article-body, .prose, .help-body, .guide-body, .shelf-card-subtitle { color: var(--hs-ink) !important; } .text-slate-500, .text-slate-400, .text-slate-300, .text-slate-200, .text-gray-500, .text-gray-400, .caption, figcaption, .meta, .muted, .subtitle, .sub, .hint, .note-text, .latin, .field-note, .form-hint, .image-panel .caption, .stat-box .label, .opinion-badge, .shelf-card-kind, .metric-desc, .policy-meta-item strong, .policy-meta dt, .policy-meta .label, .hs-fab-card small, .hs-fab-row small, .gs-tabs a, .gs-tabs button, .lang-icon, .leaflet-popup-close-button { color: var(--hs-ink-2) !important; } footer, .footer { color: var(--hs-ink-3) !important; background: transparent !important; border-top: 1px solid var(--hs-line); } /* ── 4 Surfaces ───────────────────────────────────────────────────────── */ /* Everything that was white or pale becomes the card surface */ .bg-white, .bg-slate-50, .bg-white\/90, .bg-white\/95, .bg-white\/80, [class*="bg-white"], .card, .mode-card, .stat-card, .panel, .hs-card, .policy-meta, .policy-meta-item, .meta-card, .info, .info-card, .notice, .callout, .prose, .guide-body, .feature-card, .stat-box, .image-panel, .related-card, .info-tab, .hs-fab-card, .nl-card, .eco-card, .modal-content, .article-card, .login-card, #loginCard, .auth-card, .load-overlay, #loadOverlay, .header-bar, .signup-card, .section-card, .trust-tier, .tier-card, .cat-chip, .chip, .doc-row, #statusMsg, #log, .log, .console, .gs-card, .gs-kpi, .gs-tabs, .gs-timeline, .filters-bar, .stats-bar, .section-panel, .kpi, .kpi-card, .stat-tile, .tile, .emu-toolbar, .map-container, .metric-card, .wq-chip, .opinion-badge, .shelf-card-kind, .error-card, .error-state, .loading, .loading-screen, .badge-soft, .status-msg, .connecting, .status-card, .activity-label, .rating-btn, .flow-content, .quote-block, .contact-cta, table, .data-table, .data-table td, .data-table th, tr, td, #statsHandle, #layersHandle, #hexTooltip, .layer-btn, .time-pill, .filter-btn, .tab-bar, .gs-nav, .back-btn, .view-tab, .handle, .tooltip, [class~="bg-slate-200"], [class~="bg-slate-300"], [class~="bg-gray-200"], .cta-btn-secondary, .btn-secondary, .leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-draw-toolbar a, .leaflet-draw-actions a, .leaflet-bar a, #cookieConsent { background-color: var(--hs-surface) !important; background-image: none !important; border-color: var(--hs-line) !important; color: var(--hs-ink) !important; } [style*="background:#fff"], [style*="background: #fff"], [style*="background:#ffffff"], [style*="background:white"], [style*="background-color:#fff"], [style*="background-color: #fff"], [style*="background:#f8fafc"], [style*="background:#f4f7ee"], [style*="background:rgba(255,255,255"], [style*="background: rgba(255,255,255"], [style*="background:rgba(255, 255, 255"] { background-color: var(--hs-surface) !important; background-image: none !important; color: var(--hs-ink) !important; } /* Panels inside a card, tints, inputs' kin */ .bg-slate-100, .bg-slate-200, .bg-slate-300, .bg-gray-100, .bg-gray-200, .bg-slate-50\/50, .section-label, .flow-tool, .flow-free, .caption, .gs-card-priority, .tab-btn, .gs-nav-btn, .pill, .badge, .tag, .eyebrow, .kicker, [class~="bg-sky-50"], [class~="bg-sky-100"], [class~="bg-blue-50"], [class~="bg-blue-100"], [class~="bg-emerald-50"], [class~="bg-emerald-100"], [class~="bg-green-50"], [class~="bg-green-100"], [class~="bg-amber-50"], [class~="bg-amber-100"], [class~="bg-red-50"], [class~="bg-red-100"], [class~="bg-yellow-50"], [class~="bg-yellow-100"], [class~="bg-slate-50"], [class~="bg-slate-100"], [class~="bg-gray-50"], [class~="bg-gray-100"], [class~="bg-indigo-50"], [class~="bg-purple-50"], [class~="bg-purple-100"], .probe-card, .probe-field, .kb-hint, .bottombar, .topbar, .emu-toolbar *, .loading-card, #loadingState, .alert, .alert-error, .alert-warn, .alert-info, .data-table th, thead th, th, tr:nth-child(even) td, .layer-btn, .time-pill, .filter-btn, .view-tab, .tab-bar, [class~="from-slate-50"], [class~="from-indigo-50"], [class~="from-indigo-100"], [class~="from-blue-50"], [class~="from-\[\#f4f6e8\]"] { background-color: var(--hs-surface-2) !important; background-image: none !important; border-color: var(--hs-line) !important; color: var(--hs-ink) !important; } [style*="background:#e0f2fe"], [style*="background:#dbeafe"], [style*="background:#d1fae5"], [style*="background:#fef3c7"], [style*="background:#fee2e2"], [style*="background:#f0f9ff"], [style*="background:#ecfdf5"], [style*="background:#f0fdf4"], [style*="background:#fffbeb"], [style*="background:#fef2f2"], [style*="background:#f1f5f9"], [style*="background:#e2e8f0"], [style*="background:#eef2f7"], [style*="background:#f5f7f0"], [style*="background:#f4f7ee"] { background-color: var(--hs-surface-2) !important; background-image: none !important; border-color: var(--hs-line) !important; color: var(--hs-ink) !important; } .bg-slate-300 { color: var(--hs-ink-2) !important; } .bg-\[\#a9b93c\]\/10, .bg-\[\#A9B93C\]\/10 { background-color: rgba(169,185,60,.10) !important; } /* Already dark: the ground, and overlays */ .bg-slate-900, .bg-slate-800, .bg-black, #loginView, .hs-infographic-wrapper { background-color: var(--hs-ground) !important; } .bg-slate-900\/50, .bg-black\/50, .bg-black\/40, .bg-black\/60 { background-color: rgba(16,27,16,.82) !important; } .bg-slate-900\/80, .bg-slate-800\/80, .bg-black\/80 { background-color: rgba(16,27,16,.88) !important; } .glass-panel, .time-bar { background: var(--hs-glass) !important; border-color: var(--hs-line) !important; } header, .hs-header, .header, .site-header, .page-header, .hs-tabbar, .hs-toolbar, .tool-toolbar { background: rgba(16,27,16,.92) !important; border-bottom: 1px solid var(--hs-line) !important; border-color: var(--hs-line) !important; } .leaflet-container { background: var(--hs-ground) !important; } /* Kit: hairlines instead of shadows, a calmer radius */ .card, .mode-card, .stat-card, .hs-card, [class*="rounded-2xl"].bg-white, [class*="rounded-xl"].bg-white { border: 1px solid var(--hs-line) !important; box-shadow: none !important; } .shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: none !important; } .rounded-2xl, .rounded-3xl { border-radius: 12px !important; } .rounded-xl { border-radius: 10px !important; } .rounded-lg { border-radius: 8px !important; } .border-slate-50, .border-slate-100, .border-slate-200, .border-slate-300, .border-gray-200, .border-gray-300, .border-blue-100, .border-blue-200, .border-emerald-200, .border-amber-200, .border-white, .border-\[\#a9b93c\]\/20, .divide-slate-100 > :not([hidden]) ~ :not([hidden]), .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--hs-line) !important; } .border-red-100, .border-red-200 { border-color: rgba(224,96,96,.35) !important; } .border-l-purple-500 { border-left-color: var(--hs-purple) !important; } .border-l-blue-500, .border-l-sky-500 { border-left-color: var(--hs-blue) !important; } .alert, .alert-error, .alert-warn, .alert-info, button.bg-white, a.bg-white, .cta-btn-secondary, .btn-secondary, [class~="from-slate-50"], [class~="from-indigo-50"], [class~="from-indigo-100"], [class~="from-blue-50"] { border-color: var(--hs-line-2) !important; } .alert-error { border-left: 4px solid var(--hs-red) !important; } .doc-row.uploaded { border-left: 3px solid var(--hs-green) !important; } table td, .data-table td, tr:nth-child(odd) td { background-color: var(--hs-surface) !important; border-color: var(--hs-line) !important; } table th, .data-table th, thead th, tr:nth-child(even) td { background-color: var(--hs-surface-2) !important; } th { color: var(--hs-ink) !important; } /* Accents as text: the brighter variants */ .text-\[\#a9b93c\], .text-\[\#A9B93C\], .text-lime, .accent, .section-label, .eyebrow, .kicker, .stat-box strong, .stat-box b, .stat-box .value, .gs-kpi b, .gs-kpi strong, .figure, .tab-btn.active, .hs-tab.active, .hs-tab[aria-selected="true"], .hs-tab[aria-current="page"], .hs-tabbar .active, .hs-tabbar [aria-current="page"], [aria-selected="true"] { color: var(--hs-lime-text) !important; } .text-red-400, .text-red-500, .text-red-600, .text-red-700, .error, .danger, .gs-card-priority.priority-high { color: var(--hs-red-text) !important; } .text-amber-500, .text-amber-600, .text-amber-700, .warn, .warning, .gs-card-priority.priority-medium { color: var(--hs-amber-text) !important; } .text-emerald-400, .text-emerald-500, .text-emerald-600, .text-emerald-700, .text-emerald-800, .text-green-500, .text-green-600, .text-green-700, .text-green-800, .text-\[\#4C8D2B\], .success, .ok { color: var(--hs-green-text) !important; } .text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800, .text-sky-500, .text-sky-700, .text-sky-800, [style*="color:#0284c7"], [style*="color:#0369a1"] { color: var(--hs-blue-text) !important; } .text-purple-400, .text-purple-500, .text-purple-600, .text-indigo-500, .text-indigo-600, .text-indigo-700, .text-violet-500, .text-violet-600 { color: var(--hs-purple-text) !important; } .text-orange-500, .text-orange-600, .text-orange-700, .text-yellow-600, .text-yellow-700 { color: var(--hs-amber-text) !important; } .text-teal-500, .text-teal-600, .text-teal-700, .text-cyan-500, .text-cyan-600, .text-cyan-700 { color: var(--hs-blue-text) !important; } .text-pink-500, .text-pink-600, .text-rose-500, .text-rose-600 { color: var(--hs-red-text) !important; } /* Inline colours a page wrote by hand */ [style*="color:#78350f"], [style*="color:#0f172a"], [style*="color:#1e293b"], [style*="color:#334155"], [style*="color:#475569"], [style*="color: #334155"] { color: var(--hs-ink) !important; } [style*="color:#64748b"], [style*="color:#94a3b8"], [style*="color: #64748b"] { color: var(--hs-ink-2) !important; } /* ── 5 Controls ───────────────────────────────────────────────────────── */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { background-color: var(--hs-surface-2) !important; color: var(--hs-ink) !important; border-color: var(--hs-line) !important; } input:focus, select:focus, textarea:focus { border-color: var(--hs-lime) !important; box-shadow: 0 0 0 3px rgba(169,185,60,.22) !important; } input[type="checkbox"], input[type="radio"] { accent-color: var(--hs-lime-text); } select option, .lang-select option { background: var(--hs-surface-2); color: var(--hs-ink); } button, .btn, [role="button"] { border-radius: 8px; } /* Language picker: a control, not a call to action */ .lang-btn-wrapper { background: var(--hs-surface-2) !important; border: 1px solid var(--hs-line-2) !important; border-radius: 8px !important; } .lang-btn-wrapper:hover { background: var(--hs-surface) !important; transform: none !important; } .lang-select { background: transparent !important; color: var(--hs-ink) !important; border: 0 !important; font-weight: 600; } /* Active states on chips, tabs and toggles */ .tab-btn.active, .hs-tab.active, .hs-tab[aria-selected="true"], .hs-tab[aria-current="page"], .hs-tabbar .active, .hs-tabbar [aria-current="page"], [aria-selected="true"] { border-color: var(--hs-lime) !important; } .tier-card.selected, .tier-card.active, .cat-chip.selected, .cat-chip.active, .chip.active, .wq-chip.active, .wq-chip.selected, .wq-chip[aria-pressed="true"] { background: rgba(169,185,60,.18) !important; border-color: var(--hs-lime) !important; color: var(--hs-ink) !important; } .trust-tier.selected, .trust-tier.active { border-color: var(--hs-lime) !important; box-shadow: 0 0 0 2px rgba(169,185,60,.3) !important; } .hs-fab-row:hover, .hs-fab-row:active, .info-tab:hover, .leaflet-bar a:hover { background: var(--hs-surface-2) !important; } .hs-tabbar a, .hs-tabbar button, .hs-tab { color: var(--hs-ink-2) !important; font-size: 0.8125rem !important; } .filter-btn[style*="background"], button[style*="background:#fff"], button[style*="background: #fff"] { background-color: var(--hs-surface) !important; } /* ── 6 Coloured containers ────────────────────────────────────────────── */ /* Every solid button colour used on either site, by inventory. Blue, purple, indigo, sky, cyan and amber families become the accent, lime; emerald and green become the theme green; red stays red. Descendant rules come last so a or inside takes the button's ink over the utilities above. */ .bg-\[\#a9b93c\], .bg-\[\#A9B93C\], .bg-\[\#8a9a2f\], .bg-\[\#76c4cc\], .bg-\[\#76C4CC\], .bg-\[\#4C8D2B\], .bg-\[\#4c8d2b\], .bg-purple-500, .bg-purple-600, .bg-purple-700, .bg-violet-500, .bg-indigo-500, .bg-indigo-600, .bg-indigo-700, .bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-sky-500, .bg-sky-600, .bg-sky-700, .bg-cyan-500, .bg-lime-500, .bg-lime-600, .bg-amber-500, .bg-amber-600, .bg-yellow-500, .hover\:bg-purple-600:hover, .hover\:bg-blue-600:hover, [class~="from-indigo-600"], [class~="from-\[\#a9b93c\]"], .hs-fab-btn, .tab-btn.active, .gs-nav-btn.active, .gs-tabs .active, .layer-btn.active, .time-pill.active, .filter-btn.active, .view-tab.active, .rating-btn.active, .rating-btn.selected, .activity-label.selected, .activity-label:has(input:checked), .peer:checked ~ .activity-label, [style*="background:#A9B93C"], [style*="background: #A9B93C"], [style*="background:#a9b93c"], [style*="background-color:#A9B93C"], [style*="background-color: #A9B93C"], [style*="background-color:#a9b93c"] { background-color: var(--hs-lime) !important; background-image: none !important; color: var(--hs-lime-ink) !important; border-color: var(--hs-lime) !important; } .bg-\[\#a9b93c\]:hover, .bg-\[\#A9B93C\]:hover, .hover\:bg-\[\#8a9a2f\]:hover { background-color: var(--hs-lime-2) !important; } .bg-emerald-500, .bg-emerald-600, .bg-emerald-700, .bg-green-500, .bg-green-600, .bg-green-700 { background-color: var(--hs-green) !important; color: var(--hs-lime-ink) !important; } .bg-red-500, .bg-red-600, .bg-red-700 { background-color: var(--hs-red) !important; color: #fff !important; } .marker-cluster { background: rgba(169,185,60,.55) !important; } .marker-cluster div { background: var(--hs-lime) !important; color: var(--hs-lime-ink) !important; font-weight: 800; font-family: inherit; } .marker-cluster-medium { background: rgba(224,166,58,.55) !important; } .marker-cluster-medium div { background: var(--hs-amber) !important; color: var(--hs-lime-ink) !important; } .marker-cluster-large { background: rgba(224,96,96,.55) !important; } .marker-cluster-large div { background: var(--hs-red) !important; color: #fff !important; } .cta-btn-primary, .btn-primary, .hero-cta, .cta-btn, .primary-btn, .lang-btn-wrapper.active { color: var(--hs-lime-ink) !important; } /* These get a lime background from the block above but kept near-white text, which measured 2.0:1. Anything painted lime takes the dark ink. */ .filter-btn.active, .filter-btn.active *, .featured-cta, .featured-cta *, .tab-btn.active, .gs-nav-btn.active, .gs-tabs .active, .layer-btn.active, .time-pill.active, .view-tab.active, .rating-btn.active, .rating-btn.selected { color: var(--hs-lime-ink) !important; } /* Pale gradient chips (the HydroVision label on the library and its kin) keep the ink; the label's bolt is lime */ [class~="from-slate-50"] *, [class~="from-indigo-50"] *, [class~="from-indigo-100"] *, [class~="from-blue-50"] * { color: var(--hs-ink) !important; } label[class~="from-indigo-50"] > .fa-bolt, label[class~="from-indigo-100"] > .fa-bolt { color: var(--hs-lime-text) !important; } /* Ink inside coloured containers, after everything it must beat */ .bg-\[\#a9b93c\] *, .bg-\[\#A9B93C\] *, .bg-\[\#8a9a2f\] *, .bg-\[\#76c4cc\] *, .bg-\[\#4C8D2B\] *, .bg-\[\#4c8d2b\] *, .bg-purple-500 *, .bg-purple-600 *, .bg-purple-700 *, .bg-indigo-500 *, .bg-indigo-600 *, .bg-indigo-700 *, .bg-blue-500 *, .bg-blue-600 *, .bg-blue-700 *, .bg-sky-500 *, .bg-sky-600 *, .bg-sky-700 *, .bg-cyan-500 *, .bg-lime-500 *, .bg-lime-600 *, .bg-amber-500 *, .bg-amber-600 *, .bg-yellow-500 *, [class~="from-indigo-600"] *, [class~="from-\[\#a9b93c\]"] *, .cta-btn-primary *, .btn-primary *, .hero-cta *, .cta-btn *, .primary-btn *, .hs-fab-btn *, .gs-tabs .active *, .layer-btn.active *, .time-pill.active *, .filter-btn.active *, .view-tab.active *, .activity-label:has(input:checked) *, [style*="background:#A9B93C"] *, [style*="background: #A9B93C"] *, [style*="background:#a9b93c"] *, [style*="background-color:#A9B93C"] *, [style*="background-color: #A9B93C"] *, [style*="background-color:#a9b93c"] *, .bg-\[\#a9b93c\].text-white, .bg-\[\#A9B93C\].text-white, .bg-\[\#4C8D2B\].text-white, .bg-blue-500.text-white, .bg-blue-600.text-white, .bg-purple-500.text-white, .bg-purple-600.text-white, .bg-lime-500.text-white, .bg-lime-600.text-white { color: var(--hs-lime-ink) !important; } .bg-red-500 *, .bg-red-600 *, .bg-red-700 * { color: #fff !important; } .bg-emerald-500 *, .bg-emerald-600 *, .bg-emerald-700 *, .bg-green-500 *, .bg-green-600 *, .bg-green-700 *, .bg-emerald-500.text-white, .bg-emerald-600.text-white, .bg-green-500.text-white, .bg-green-600.text-white { color: var(--hs-lime-ink) !important; } /* Secondary buttons are not lime: ink on the surface */ .cta-btn-secondary, .cta-btn-secondary *, .btn-secondary, .btn-secondary * { color: var(--hs-ink) !important; } /* ── 7 Components ─────────────────────────────────────────────────────── */ #cookieConsent { border-top-color: var(--hs-lime) !important; } .leaflet-container { background: var(--hs-ground) !important; } .leaflet-bar a { color: var(--hs-ink) !important; border-bottom-color: var(--hs-line) !important; } .leaflet-control-attribution { background: rgba(255,255,255,.85) !important; color: #4b5563 !important; } .leaflet-control-attribution a { color: #374151 !important; } .leaflet-popup-content-wrapper, .leaflet-popup-tip { color: var(--hs-ink) !important; box-shadow: 0 4px 16px rgba(0,0,0,.4) !important; } .leaflet-popup-content { color: var(--hs-ink); } .leaflet-draw-actions a { color: var(--hs-ink) !important; } #drawStatus, .draw-status, .map-status { background: rgba(16,27,16,.72) !important; color: var(--hs-ink) !important; padding: 4px 10px !important; border-radius: 6px !important; display: inline-block; } canvas { filter: none; } /* ── 8 Page-specific hooks ────────────────────────────────────────────── */ #hubView .card[data-tool] { padding: 20px 16px !important; } /* Hub tool grid: room around the content */ .hs-infographic-wrapper { color: var(--hs-ink) !important; } /* HydroCam: page-wide wrapper is the ground */ .emu-toolbar * { color: var(--hs-ink) !important; } /* phone emulator toolbar */ /* ── 9 Layout media ───────────────────────────────────────────────────── */ /* Narrow phones: headers are a wordmark on the left and a fixed cluster on the right, and at 320px they collided. The wordmark drops a size on one line, the language pill stops being squeezed, status pills truncate. */ @media (max-width: 380px) { h1.text-xl, header h1 { font-size: 0.95rem !important; white-space: nowrap; } .mx-auto.px-4, .mx-auto.px-6, header .px-6 { padding-left: 10px !important; padding-right: 10px !important; } .mx-auto.px-4 > .gap-3, .mx-auto.px-6 > .gap-3, header .gap-3 { gap: 8px !important; } .mx-auto.px-4 > .gap-2, .mx-auto.px-6 > .gap-2, header .gap-2 { gap: 6px !important; } span[data-i18n="tagline"], header .text-\[10px\] { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .lang-btn-wrapper { flex-shrink: 0 !important; } .lang-select { padding: 8px 24px 8px 8px !important; font-size: 13px !important; } .lang-icon { right: 6px !important; font-size: 11px !important; } #statusMsg, #authStatus, #globalStatusText, #statusText, #globalStatus { min-width: 0; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block !important; padding-left: 8px !important; padding-right: 8px !important; } #statusMsg .loader { display: inline-block; vertical-align: middle; } header button.w-8.h-8 { flex-shrink: 0; } } /* Mobile fit: tables scroll in their own box; chip strips do not shrink */ @media (max-width: 640px) { table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .filter-btn, .tab-btn, .pipeline-tab, .cat-chip, .gs-nav-btn { flex-shrink: 0; } .zoom-group { flex-wrap: wrap; } .hs-fab-articles .hs-fab-row-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* Touch targets: 44px floors at zero specificity, so a page's own sizing wins */ @media (pointer: coarse) { select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { min-height: 44px !important; } :where(button:not([class*="w-7"]):not([class*="w-8"]):not([class*="w-9"]):not([class*="w-10"]):not([class*="h-7"]):not([class*="h-8"]):not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):not(.leaflet-draw-toolbar *)), :where([role="button"]:not([class*="w-7"]):not([class*="w-8"]):not(.card)), :where(.btn, .cta-btn, .cta-btn-secondary) { min-height: 44px; } :where(.tab-btn, .pipeline-tab, .cat-chip, .gs-nav-btn, .info-tab, .filter-btn, .time-pill, .stat-pill) { min-height: 40px; } :where(a.btn) { min-height: 44px; display: inline-flex; align-items: center; } :where(a[class*="rounded"][class*="px-"][class*="py-"]:not(.card):not([class*="block"])) { min-height: 44px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ── 10 Page rules marked important ───────────────────────────────────── */ /* The help pages set `.help-cta a { color: white !important }`. Only a more specific important rule beats that, so these carry the html class. */ .hs-theme .help-cta a:not([class]), .hs-theme .contact-cta a:not([class]), .hs-theme .cta a:not([class]), .hs-theme .cta-box a:not([class]) { color: var(--hs-lime-ink) !important; background: var(--hs-lime) !important; } .hs-theme .help-cta a:not([class]):hover { background: var(--hs-lime-2) !important; color: var(--hs-lime-ink) !important; } /* The seals case study's cost table paints its category rows pale with an important rule */ .hs-theme .cost-table .category-row td { background-color: var(--hs-surface-2) !important; color: var(--hs-ink) !important; } /* ── 11 Interaction states ────────────────────────────────────────────── */ /* Page CSS was written for the old light theme and still carries pale hover and focus backgrounds. Sections 1 to 10 only set the resting state, so an element could look right until you touched it: .hs-tab:hover measured 1.20:1, pale ink on #f8fafc. Everything a pointer or keyboard reaches is set here. */ .hs-tabbar a:hover, .hs-tabbar button:hover, .hs-tab:hover, .hs-tabbar a:focus-visible, .hs-tabbar button:focus-visible, .hs-tab:focus-visible, .hs-tabbar a:active, .hs-tabbar button:active, .hs-tab:active { background: var(--hs-surface) !important; color: var(--hs-ink) !important; } .hs-tab.hs-tab--active, .hs-tab.hs-tab--active:hover { color: var(--hs-lime-text) !important; border-bottom-color: var(--hs-lime) !important; } .hs-tab.hs-tab--active i, .hs-tab:hover i { opacity: 1 !important; } a:hover, a:focus-visible, button:hover, button:focus-visible, [role="button"]:hover, [role="button"]:focus-visible, label:hover, summary:hover, .info-tab:hover, .doc-row:hover, .shelf-card:hover, .related-card:hover, .hover\:bg-slate-50:hover, .hover\:bg-slate-100:hover, .hover\:bg-slate-200:hover, .hover\:bg-gray-50:hover, .hover\:bg-gray-100:hover, .hover\:bg-white:hover, .hover\:bg-blue-50:hover, .hover\:bg-emerald-50:hover, .hover\:bg-red-50:hover, .hover\:bg-amber-50:hover { background-color: var(--hs-surface-2) !important; color: var(--hs-ink) !important; } .bg-\[\#a9b93c\]:hover, .bg-\[\#A9B93C\]:hover, .cta-btn-primary:hover, .btn-primary:hover, .hero-cta:hover, .primary-btn:hover, .bg-blue-500:hover, .bg-blue-600:hover, .bg-purple-500:hover, .bg-purple-600:hover, .bg-indigo-600:hover, .bg-sky-600:hover, .bg-lime-500:hover, .bg-lime-600:hover { background-color: var(--hs-lime-2) !important; color: var(--hs-lime-ink) !important; } .bg-\[\#a9b93c\]:hover *, .cta-btn-primary:hover *, .btn-primary:hover *, .bg-blue-600:hover *, .bg-purple-600:hover * { color: var(--hs-lime-ink) !important; } .bg-emerald-500:hover, .bg-emerald-600:hover, .bg-emerald-700:hover, .bg-green-500:hover, .bg-green-600:hover, .bg-green-700:hover { background-color: var(--hs-green) !important; color: var(--hs-lime-ink) !important; } .bg-red-500:hover, .bg-red-600:hover, .bg-red-700:hover { background-color: var(--hs-red) !important; color: #fff !important; } .export-btn, .refresh-btn, .export-btn:hover, .refresh-btn:hover, .export-btn:focus-visible, .refresh-btn:focus-visible { background-color: var(--hs-surface-2) !important; color: var(--hs-ink) !important; border-color: var(--hs-line-2) !important; } .skip-link, .skip-link:focus, .skip-link:focus-visible { background: var(--hs-lime) !important; color: var(--hs-lime-ink) !important; } /* ── 12 Tailwind slash-opacity backgrounds ────────────────────────────── */ /* bg-slate-200/50 is a different class name from bg-slate-200, so none of the surface rules matched it and those panels stayed pale. */ [class*="bg-white/"], [class*="bg-slate-50/"], [class*="bg-slate-100/"], [class*="bg-slate-200/"], [class*="bg-slate-300/"], [class*="bg-gray-50/"], [class*="bg-gray-100/"], [class*="bg-blue-50/"], [class*="bg-sky-50/"], [class*="bg-emerald-50/"], [class*="bg-green-50/"], [class*="bg-amber-50/"], [class*="bg-red-50/"], [class*="bg-purple-50/"], [class*="bg-indigo-50/"] { background-color: var(--hs-surface-2) !important; color: var(--hs-ink) !important; } /* ── 13 Named components still on light values ────────────────────────── */ .signup-header, .signup-header *, .brand, .brand * { color: var(--hs-ink) !important; } .step-badge { background: var(--hs-lime) !important; color: var(--hs-lime-ink) !important; } .upload-zone, .upload-zone * { color: var(--hs-ink) !important; } /* Leaflet's attribution keeps a light background, so its links stay dark */ .leaflet-control-attribution, .leaflet-control-attribution a, .leaflet-control-attribution span { color: #374151 !important; background-color: rgba(255,255,255,.88) !important; } /* ── 14 Touch targets measured under the floor ────────────────────────── */ @media (pointer: coarse) { :where(.cat-chip, .tab-btn, .map-btn, .pipeline-tab) { min-height: 44px; min-width: 44px; } :where(button[class*="w-7"], button[class*="h-7"]) { min-width: 36px; min-height: 36px; } } /* ── 15 The states section 11 missed ─────────────────────────────────── */ /* Section 11 covered :hover but not :active or :focus-visible on coloured buttons, so pressing a lime button left dark ink on whatever the page's :active rule painted underneath. "Close Guide" measured 1.52:1 while held. */ .bg-\[\#a9b93c\]:active, .bg-\[\#A9B93C\]:active, .bg-\[\#a9b93c\]:focus-visible, .bg-\[\#A9B93C\]:focus-visible, .cta-btn-primary:active, .btn-primary:active, .hero-cta:active, .primary-btn:active, .cta-btn-primary:focus-visible, .btn-primary:focus-visible, .hero-cta:focus-visible, .primary-btn:focus-visible, .bg-blue-500:active, .bg-blue-600:active, .bg-purple-600:active, .bg-sky-600:active, .bg-lime-500:active, .bg-lime-600:active, .bg-blue-500:focus-visible, .bg-blue-600:focus-visible, .bg-purple-600:focus-visible, .bg-lime-500:focus-visible { background-color: var(--hs-lime) !important; color: var(--hs-lime-ink) !important; } .bg-\[\#a9b93c\]:active *, .bg-\[\#A9B93C\]:active *, .bg-\[\#a9b93c\]:focus-visible *, .bg-blue-600:active *, .bg-blue-500:active * { color: var(--hs-lime-ink) !important; } .bg-emerald-500:active, .bg-emerald-600:active, .bg-green-500:active, .bg-green-600:active, .bg-emerald-600:focus-visible, .bg-green-600:focus-visible { background-color: var(--hs-green) !important; color: var(--hs-lime-ink) !important; } .bg-red-500:active, .bg-red-600:active, .bg-red-500:focus-visible, .bg-red-600:focus-visible { background-color: var(--hs-red) !important; color: #fff !important; } /* White ink never survives a lime fill: 2.17:1. Any element carrying both loses the white, whatever order the classes appear in. */ .text-white.bg-\[\#a9b93c\], .bg-\[\#a9b93c\] .text-white, .text-white.bg-lime-500, .text-white.bg-lime-600, .bg-\[\#a9b93c\] > .text-white, [class*="bg-[#a9b93c]"].text-white, [class*="bg-[#A9B93C]"].text-white { color: var(--hs-lime-ink) !important; } /* ── 16 Third-party map attribution ───────────────────────────────────── */ /* Leaflet and Mapbox draw their own attribution on a pale strip and the page CSS marks parts of it !important, so the plain rules lost. Scoped so they win, and the ink stays dark because the strip stays pale. */ .hs-theme .leaflet-control-attribution, .hs-theme .leaflet-control-attribution a, .hs-theme .leaflet-control-attribution span, .hs-theme .leaflet-control-attribution div, .hs-theme .mapboxgl-ctrl-attrib, .hs-theme .mapboxgl-ctrl-attrib a, .hs-theme .mapboxgl-ctrl-attrib-inner, .hs-theme .mapboxgl-ctrl-attrib-inner a { color: #1f2937 !important; background-color: rgba(255,255,255,.92) !important; } /* ── 17 Named components the second sweep found ──────────────────────── */ .signup-header, .signup-header *, .brand, .brand *, .signup-header h1, .signup-header p { color: var(--hs-lime-ink) !important; } .theme-text { color: var(--hs-ink) !important; } /* ── 18 The last of the measured contrast failures ───────────────────── */ /* White ink on any coloured fill, wherever the fill comes from. The earlier rules named specific background classes; these catch the rest by asking what the element actually is rather than which utility painted it. */ /* Dark ink on a white-text button ONLY where the button actually became lime. The rule used to catch every .text-white button, which broke the ones that carry their own inline gradient (HydroSonde's "Analyse Zone", Water Quality's "Connect HydroProbe"): those stay blue and were left with dark navy text on blue. A button with its own background-image keeps white text. */ button.text-white:not([style*="gradient"]):not([style*="background"]), a.text-white:not([style*="gradient"]):not([style*="background"]), .btn.text-white:not([style*="gradient"]):not([style*="background"]), [role="button"].text-white:not([style*="gradient"]):not([style*="background"]) { color: var(--hs-lime-ink) !important; } button.text-white[style*="gradient"], a.text-white[style*="gradient"], button.text-white[style*="gradient"] span, button.text-white[style*="gradient"] i { color: #ffffff !important; } button.text-white i, a.text-white i, button.text-white span { color: inherit !important; } /* the red and green fills are dark enough to keep white */ .bg-red-500.text-white, .bg-red-600.text-white, .bg-red-700.text-white, .bg-red-500.text-white *, .bg-red-600.text-white * { color: #fff !important; } /* Named states the sweep found still inheriting a pale page style */ .active-btn, .active-btn:hover, .active-btn:focus-visible, .active-btn:active { background: rgba(169,185,60,.18) !important; color: var(--hs-ink) !important; border-color: var(--hs-lime) !important; } .gs-nav-btn, .view-tab, .emu-icon-btn, .emu-drop-btn { color: var(--hs-ink) !important; } [class*="bg-cyan-50/"], [class*="bg-teal-50/"], [class*="bg-cyan-100/"] { background-color: var(--hs-surface-2) !important; color: var(--hs-ink) !important; } [class*="bg-cyan-50/"] *, [class*="bg-teal-50/"] * { color: var(--hs-ink) !important; } /* ── 20 Tab and pill strips, every width ─────────────────────────────── */ /* A strip of tabs wraps onto another row rather than squeezing its buttons until the words break. Not inside the phone media query: the Hub's Client Users strip is 790px of tabs and overflowed a 768px tablet too. The rule costs nothing on a wide screen, where the row fits and never wraps. The containers are usually unclassed Tailwind flex rows, so match on the child. */ :has(> .view-tab), :has(> .tab-btn), :has(> .filter-btn), :has(> .time-pill), :has(> .layer-btn) { flex-wrap: wrap; max-width: 100%; } .view-tab, .tab-btn, .filter-btn, .time-pill, .layer-btn { flex-shrink: 0; white-space: nowrap; } /* ── 19 Horizontal overflow at phone width ───────────────────────────── */ /* Six pages scrolled sideways at 375px, worst 426px over. In every case a row of buttons or a wide table was refusing to wrap. Nothing here changes a layout that already fits; it only stops one escaping the viewport. */ @media (max-width: 640px) { /* S55: `overflow-x: hidden` promotes the element to a scroll container, which forces overflow-y from `visible` to `auto`. That made body a scroller nested inside html at phone width, and the cormorant page's own `body { overscroll-behavior-y: none; }` then blocked the touch gesture from chaining out of a body that had nothing to scroll. Frozen page on Android, fine on desktop because this query never fires above 640px. `clip` clips without creating a scroll container. The hidden line stays as a fallback for anything older than Chrome 90 / Safari 16. */ html, body { overflow-x: hidden; overflow-x: clip; } .hs-tabbar-inner, .gs-tabs, .view-tabs, .emu-toolbar, .tab-bar, .filters-bar, .stats-bar, .zoom-group, .toolbar, .btn-row, .actions-row { flex-wrap: wrap !important; row-gap: 6px; } table, .data-table, .gs-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .min-w-\[900px\], .min-w-\[800px\], .min-w-\[760px\], .min-w-\[720px\], .min-w-\[640px\] { min-width: 0 !important; } pre, code { white-space: pre-wrap; word-break: break-word; } .whitespace-nowrap { white-space: normal !important; } .hs-tabbar-inner .hs-tab { flex: 0 0 auto; } } /* ── 20 Public-site findings ─────────────────────────────────────────── */ /* The cookie banner and the licence guide paint their own buttons, and the help pages carry a back link from the old light design. Measured at 2.02:1 and 2.85:1 respectively, both only while hovered or focused. */ #cookieConsent button, #cookieConsent button:hover, #cookieConsent button:focus-visible, #cookieConsent button:active, .cookie-accept, .cookie-accept:hover, .guide-accept, .guide-accept:hover { background: var(--hs-lime) !important; color: var(--hs-lime-ink) !important; border-color: var(--hs-lime) !important; } #cookieConsent button *, .cookie-accept * { color: var(--hs-lime-ink) !important; } #cookieConsent ul, #cookieConsent ul li, #cookieConsent p, #cookieConsent span { color: var(--hs-ink-2) !important; } .hero-back, .hero-back:hover, .hero-back:focus-visible, .hero-back:active { color: var(--hs-lime-text) !important; background: transparent !important; } .install-btn, .install-btn:hover, .install-btn:focus-visible { background: var(--hs-lime) !important; color: var(--hs-lime-ink) !important; } .install-btn *, .install-btn:hover * { color: var(--hs-lime-ink) !important; } /* The inactive chip is a surface, so it takes the light ink. The active one is painted lime, so it takes the dark ink (set in section 6) and must not be caught here: this rule used to include .active and undid it, leaving near white on lime at 2.0:1. */ .filter-btn:not(.active) { color: var(--hs-ink) !important; } .shelf-card-kind, .h-44 > span, [class*="bg-[#787b75]"] { color: var(--hs-ink) !important; } [class*="bg-[#787b75]"] { background-color: var(--hs-surface-2) !important; } /* the HydroVision label is a pale gradient chip; keep its ink dark enough */ label[class*="from-indigo-50"], label[class*="from-indigo-100"], label[class*="bg-gradient-to-br"] { background: var(--hs-surface-2) !important; color: var(--hs-ink) !important; } /* ── 21 Rows of links and cards running off the right edge ───────────── */ /* 255 elements sat past the viewport on the public site at 375px, most of them a credits list and the library shelf. Nothing here changes a layout that already fits. */ @media (max-width: 640px) { .credits-grid, .credits-list, .shelf, .shelf-row, .card-row, .chip-row, .filter-row { flex-wrap: wrap !important; } .shelf-card, .credits-list a, .credits-grid a { max-width: 100%; } /* S55: was `word-break: break-word`, the legacy alias for `overflow-wrap: anywhere`. That collapses an element's min-content width to a single character, so a flex item with no flex-shrink:0 gets squeezed until every letter wraps onto its own line. It turned the Hub's Client Users tab strip into six vertical columns of letters. `overflow-wrap: break-word` keeps the long-URL protection this was added for, but leaves min-content at the longest word, so nothing can be squeezed below a readable width. */ a, button { overflow-wrap: break-word; } .overflow-x-auto { -webkit-overflow-scrolling: touch; } }