/* wx-page — "Instrument at night" * * A dark, glass-panelled instrument readout. The one live color on the page is * --accent: JS derives it from the current temperature each render, so the * whole surface warms or cools with the weather. Every color below comes from * a token in :root — nothing is hard-coded past this block. */ :root { /* Sky */ --sky: #060b15; --bg-gradient: radial-gradient( ellipse 120% 80% at 50% -10%, #0b1322 0%, #060b15 55%, #04070d 100% ); /* Glass */ --glass-fill: rgba(140, 165, 215, 0.055); --glass-border: rgba(150, 175, 225, 0.13); --glass-radius: 22px; --glass-blur: blur(14px) saturate(1.2); /* Text */ --text-hi: #eef2fa; --text-lo: rgba(238, 242, 250, 0.52); --text-faint: rgba(238, 242, 250, 0.3); /* Semantic accents */ --rain: #55c2f0; --alert-amber: #ffb454; --alert-red: #e5484d; /* Live accent — overwritten from JS per render (temperature-driven). */ --accent: hsl(210 22% 62%); --accent-glow: hsla(210, 22%, 62%, 0.28); --accent-dim: hsla(210, 22%, 62%, 0.14); /* Type + rhythm */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", Roboto, "Segoe UI", "Noto Sans", sans-serif; --gap: 18px; --pad: clamp(18px, 2.4vw, 26px); --shadow: 0 18px 44px rgba(0, 0, 0, 0.42); /* Multiplier on the hero + tile headline type. 1 normally; kiosk mode bumps * it so the readout carries across a room. */ --type-scale: 1; } /* ---- Display modes (?kiosk=1, ?blur=0) — set once on at boot ------ */ :root.kiosk { --type-scale: 1.15; user-select: none; -webkit-user-select: none; scrollbar-width: none; } :root.kiosk::-webkit-scrollbar, :root.kiosk ::-webkit-scrollbar { width: 0; height: 0; display: none; } /* No zoom control on an unattended display — the radar band is fixed. */ :root.kiosk .leaflet-control-zoom { display: none; } /* Opaque fill instead of the glass blur: cheaper to composite on low-power * panels. The --glass tokens stay defined; this class just overrides where * they're consumed. */ :root.no-blur .panel, :root.no-blur .leaflet-bar a, :root.no-blur .leaflet-bar a:hover { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(20, 30, 50, 0.82); } :root.no-blur .ring::before { backdrop-filter: none; -webkit-backdrop-filter: none; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background: var(--bg-gradient) fixed; color: var(--text-hi); font-family: var(--font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; letter-spacing: 0.01em; } /* Shared "instrument label": tiny, tracked, quiet. */ .label { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); } .faint { color: var(--text-faint); } .unit { color: var(--text-lo); font-weight: 400; font-size: 0.42em; letter-spacing: 0.02em; margin-left: 0.35em; } /* Stale-reading badge appended after an em dash. */ .age-badge { display: inline-block; margin-left: 0.4em; padding: 0.08em 0.42em; border-radius: 999px; border: 1px solid var(--glass-border); font-size: 0.5em; letter-spacing: 0.06em; color: var(--text-faint); vertical-align: middle; } .is-stale { color: var(--text-faint); } /* ---- Layout grid --------------------------------------------------------- */ .grid { display: grid; gap: var(--gap); max-width: 1320px; margin: 0 auto; padding: clamp(16px, 3vw, 34px); grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "alert alert alert" "hero hero wind" "tiles tiles tiles" "map map map" "goes forecast forecast" "charts charts charts" "footer footer footer"; } #alert-ribbon { grid-area: alert; } #hero { grid-area: hero; } #wind { grid-area: wind; } #tiles { grid-area: tiles; } #map { grid-area: map; } #goes { grid-area: goes; } #forecast { grid-area: forecast; } #charts { grid-area: charts; } #footer { grid-area: footer; } @media (max-width: 1100px) { .grid { grid-template-columns: 1fr 1fr; grid-template-areas: "alert alert" "hero wind" "tiles tiles" "map map" "goes forecast" "charts charts" "footer footer"; } } @media (max-width: 640px) { .grid { grid-template-columns: 1fr; grid-template-areas: "alert" "hero" "wind" "tiles" "map" "goes" "forecast" "charts" "footer"; } } /* ---- Panel base ---------------------------------------------------------- */ .panel { position: relative; background: var(--glass-fill); border: 1px solid var(--glass-border); border-radius: var(--glass-radius); padding: var(--pad); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow); } /* ---- Alert ribbon -------------------------------------------------------- */ .alert-ribbon { display: flex; align-items: baseline; gap: 0.4rem 0.9rem; padding: 0.85rem 1.15rem; border-radius: 14px; background: color-mix(in srgb, var(--alert-red) 20%, transparent); border: 1px solid color-mix(in srgb, var(--alert-red) 55%, transparent); /* A solid red seam on the leading edge reads as an NWS band, not a tint. */ border-left: 4px solid var(--alert-red); color: var(--text-hi); } .alert-ribbon.hidden { display: none; } /* Pulse once when the ribbon first appears (re-armed only on hidden -> shown * in renderAlert). prefers-reduced-motion suppresses it via the global rule. */ .alert-ribbon--enter { animation: alert-enter 2s ease-out 1; } @keyframes alert-enter { 0%, 100% { box-shadow: var(--shadow); } 30%, 70% { box-shadow: var(--shadow), 0 0 20px color-mix(in srgb, var(--alert-red) 42%, transparent); } } .alert-ribbon__event { flex: none; font-weight: 700; letter-spacing: 0.02em; color: color-mix(in srgb, var(--alert-red) 62%, var(--text-hi)); } .alert-ribbon__text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-lo); font-size: 0.9rem; } /* ---- Hero ---------------------------------------------------------------- */ .hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: clamp(20px, 4vw, 48px); overflow: hidden; } /* A thin accent seam along the top edge — the page's live tint made literal. */ .hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.7; } .hero__temp { font-size: calc(clamp(4rem, 13vw, 8.6rem) * var(--type-scale)); font-weight: 200; line-height: 0.9; letter-spacing: -0.02em; color: var(--accent); text-shadow: 0 0 46px var(--accent-glow); } .hero__cond { margin-top: 0.35rem; font-size: clamp(1.1rem, 2.4vw, 1.5rem); font-weight: 500; color: var(--text-hi); } .hero__stats { display: grid; grid-template-columns: repeat(2, auto); gap: 0.9rem 2.4rem; margin: 0; } .hero__stats .stat { display: flex; flex-direction: column; gap: 0.28rem; } .hero__stats dt { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); } .hero__stats dd { margin: 0; font-size: 1.32rem; font-weight: 500; color: var(--text-hi); } /* ---- Wind ---------------------------------------------------------------- */ .wind__body { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 26px); margin-top: 0.9rem; } .compass { width: clamp(96px, 12vw, 124px); height: auto; flex: none; } .compass__ring { fill: none; stroke: var(--glass-border); stroke-width: 2; } .compass__card { fill: var(--text-faint); font-size: 12px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; } .compass__needle { fill: var(--accent); transform-box: fill-box; transform-origin: center; transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1); filter: drop-shadow(0 0 6px var(--accent-glow)); } .compass__hub { fill: var(--text-lo); } .wind__speed { font-size: clamp(2.2rem, 5vw, 2.9rem); font-weight: 300; color: var(--text-hi); line-height: 1; } .wind__meta { margin-top: 0.5rem; color: var(--text-lo); font-size: 0.95rem; } .wind__meta .dot { margin: 0 0.4rem; color: var(--text-faint); } /* Gust has no direction of its own — no second needle. When it's running * well ahead of sustained speed (a squall, not just gusty steady wind) the * number pulses instead. */ #wind-gust.gust-pulse { color: var(--alert-amber); animation: gust-pulse 1.8s ease-in-out infinite; } @keyframes gust-pulse { 0%, 100% { text-shadow: none; } 50% { text-shadow: 0 0 10px var(--alert-amber); } } /* ---- Tiles --------------------------------------------------------------- */ .tiles { display: grid; gap: var(--gap); grid-template-columns: repeat(4, 1fr); } @media (max-width: 1100px) { .tiles { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .tiles { grid-template-columns: 1fr; } } .tile { display: flex; flex-direction: column; gap: 0.55rem; min-height: 148px; } .label--rain { color: color-mix(in srgb, var(--rain) 78%, var(--text-faint)); } .tile__primary { display: flex; align-items: baseline; gap: 0.15rem; margin-top: auto; font-size: calc(clamp(2rem, 4.4vw, 2.7rem) * var(--type-scale)); font-weight: 300; color: var(--text-hi); } #rain-rate, #rain-today, #rain-total { color: var(--rain); } .tile__sub { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; font-size: 0.86rem; color: var(--text-lo); } .tile__sub b { font-weight: 600; color: var(--text-hi); } .tile__arrow { display: inline-flex; align-items: center; margin-left: 0.15rem; } .trend { width: 1.15rem; height: 1.15rem; } .trend path, .trend line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .trend circle { fill: var(--text-faint); stroke: none; } .comfort { color: var(--accent); font-weight: 600; } /* UV tile — conic ring fills with solar/1000. */ .tile--uv .tile__uv { display: flex; align-items: center; gap: 1rem; margin-top: auto; } /* The ring lives in the UV tile but its fill encodes solar irradiance, not * UV — this caption names that so the encoding isn't a guess. */ .tile__ringwrap { display: flex; flex: none; flex-direction: column; align-items: center; gap: 0.4rem; } .ring__caption { font-size: 0.56rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); } .ring { --deg: 0deg; position: relative; width: 84px; height: 84px; flex: none; border-radius: 50%; background: conic-gradient(var(--accent) var(--deg), var(--glass-border) 0); display: grid; place-items: center; } .ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: color-mix(in srgb, var(--glass-fill), var(--sky) 65%); backdrop-filter: var(--glass-blur); } .ring__value { position: relative; font-size: 1.7rem; font-weight: 400; color: var(--text-hi); } .tile__uvmeta { display: flex; flex-direction: column; gap: 0.2rem; font-size: 1rem; color: var(--text-hi); } /* ---- GOES satellite card ------------------------------------------------- */ .goes-card { display: flex; flex-direction: column; gap: 0.7rem; min-height: 200px; } .goes-card__link { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; min-height: 0; text-decoration: none; color: inherit; } /* Fixed 16:10 window so the full-disk image always seats the same, cropped * (object-fit: cover) rather than letterboxed. */ .goes-card__frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: calc(var(--glass-radius) - 8px); overflow: hidden; background: var(--sky); border: 1px solid var(--glass-border); } .goes-card__img { width: 100%; height: 100%; object-fit: cover; display: block; } .goes-card__img.hidden { display: none; } /* Quiet stand-in when there's no image yet or a load fails — never the * browser's broken-image icon. */ .goes-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--text-faint); } .goes-card__placeholder.hidden { display: none; } .goes-card__caption { font-size: 0.8rem; letter-spacing: 0.03em; color: var(--text-lo); font-variant-numeric: tabular-nums; } .goes-card__link:hover .goes-card__frame { border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-border)); } .goes-card__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } /* ---- Condition glyphs (forecast strip + daily row) ------------------------ */ .glyph { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* ---- Forecast: hourly strip + daily row ----------------------------------- */ .forecast { display: flex; flex-direction: column; gap: 1rem; min-height: 200px; } .forecast__hourly { display: flex; gap: 0.6rem; overflow-x: auto; padding-bottom: 0.35rem; margin: 0 -0.2rem; padding-left: 0.2rem; padding-right: 0.2rem; } .hourly__cell { flex: none; width: 44px; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; } .hourly__hour { font-size: 0.66rem; color: var(--text-faint); letter-spacing: 0.03em; } .hourly__glyph { width: 22px; height: 22px; color: var(--text-hi); } .hourly__temp { font-size: 0.86rem; font-weight: 600; color: var(--text-hi); font-variant-numeric: tabular-nums; } .hourly__precip { font-size: 0.66rem; font-variant-numeric: tabular-nums; } .hourly__precip.is-wet { color: var(--rain); font-weight: 600; } .forecast__daily { display: flex; flex-direction: column; gap: 0.5rem; } .daily__cell { display: grid; grid-template-columns: 2.1rem 1.35rem 1fr 1.7rem 1.7rem; align-items: center; gap: 0.6rem; font-size: 0.78rem; } .daily__day { color: var(--text-hi); font-weight: 600; } .daily__glyph { width: 18px; height: 18px; color: var(--text-lo); } .daily__bar-track { position: relative; justify-self: center; width: 4px; height: 30px; border-radius: 999px; background: var(--glass-border); } .daily__bar { position: absolute; left: 0; right: 0; border-radius: 999px; background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); } .daily__hi { color: var(--text-hi); text-align: right; font-variant-numeric: tabular-nums; } .daily__lo { text-align: right; font-variant-numeric: tabular-nums; } /* ---- History charts -------------------------------------------------------- */ .chart-panel { display: flex; flex-direction: column; gap: 1rem; min-height: 150px; } .chart-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; } .chart-tabs { display: flex; gap: 1.1rem; } .chart-tab { position: relative; background: none; border: none; padding: 0.2rem 0.05rem 0.55rem; font: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); cursor: pointer; } .chart-tab:hover { color: var(--text-lo); } .chart-tab.is-active { color: var(--text-hi); } .chart-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); } .chart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); } @media (max-width: 760px) { .chart-grid { grid-template-columns: 1fr; } } .chart-card { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; } .chart-card__title { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); } .chart-line { /* viewBox is a plot-only 100x36 now — no label gutter, labels are HTML * siblings (.chart-plot's y spans, .chart-x's x strip) rather than SVG * , which used to stretch non-uniformly under * preserveAspectRatio="none" and read as huge, overlapping axis text. */ display: block; width: 100%; height: 80px; } .chart-line__stroke { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; } .chart-line__overlay { fill: none; stroke-width: 1.2; opacity: 0.5; vector-effect: non-scaling-stroke; } .chart-line__area { stroke: none; fill-opacity: 0.25; } /* The svg's positioning context for the y max/min labels (or the "no data * yet" note) below — real HTML text, sized in actual pixels, never * stretched by the svg's non-uniform scaling. */ .chart-plot { position: relative; } .chart-y { position: absolute; left: 0.2rem; font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; pointer-events: none; } .chart-y--max { top: 0.1rem; } .chart-y--min { bottom: 0.1rem; } .chart-note { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 11px; color: var(--text-faint); white-space: nowrap; } /* The x-axis label strip: a relatively-positioned row under the plot: each * sparse tick label is an absolutely-positioned span at `left: N%` — the * same timeDomain/xFor math the plotted paths use — since the domain isn't * always uniform, an even flex spacing (space-between) would misalign a * label against the sample it names. */ .chart-x { position: relative; height: 14px; margin-top: 0.15rem; } .chart-x__label { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; color: var(--text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; } /* ---- Map panel: radar animation + GOES underlay --------------------------- */ .map-panel { display: flex; flex-direction: column; gap: 0.7rem; min-height: 200px; padding: var(--pad) var(--pad) calc(var(--pad) * 0.7); overflow: hidden; } /* Landscape scope: the map panel owns its own full-width grid row, so its * canvas can run wide and short — a regional radar strip, not a square inset. * Canvas height sets the panel height (head + controls + padding ride on top); * z7 in app.js frames the range rings and reference cities to this shape. */ @media (min-width: 641px) { .map-canvas { min-height: 340px; } } @media (min-width: 1101px) { .map-canvas { min-height: 400px; } } .map-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .map-select { appearance: none; background: var(--glass-fill); border: 1px solid var(--glass-border); border-radius: 999px; color: var(--text-hi); font: inherit; font-size: 0.72rem; letter-spacing: 0.02em; padding: 0.3rem 1.6rem 0.3rem 0.7rem; max-width: 60%; background-image: linear-gradient(45deg, transparent 50%, var(--text-lo) 50%), linear-gradient(135deg, var(--text-lo) 50%, transparent 50%); background-position: calc(100% - 0.9rem) 55%, calc(100% - 0.6rem) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .map-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .map-canvas { flex: 1; min-height: 300px; border-radius: calc(var(--glass-radius) - 8px); overflow: hidden; background: var(--sky); } /* ---- Scope furniture: range-ring + city labels, station reticle ---------- * All rendered by Leaflet divIcon/circleMarker on the "scope" pane (over the * radar). Text carries a hard shadow so faint labels stay legible over bright * precip returns; every color is a page token. Non-interactive by construction * (set in app.js), so no pointer/hover state is needed here. */ .scope-ring-label, .scope-city-label { width: max-content; font-family: var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; text-shadow: 0 0 4px var(--sky), 0 1px 3px var(--sky), 0 0 8px var(--sky); } /* Ring labels sit at each ring's north edge; nudge the text up off the stroke * and center it on the meridian. */ .scope-ring-label { transform: translate(-50%, -1.1em); font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); } /* City labels ride just right of their dot. */ .scope-city-label { transform: translate(6px, -0.55em); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-lo); } /* Station reticle: the accent dot glows like the rest of the live accent. * Leaflet writes color/fillColor as SVG stroke/fill attributes, which can't * read a CSS var — so the live --accent is applied here (CSS wins over the * presentation attribute) and the shape tracks the temperature tint. */ .scope-station { stroke: var(--accent); fill: var(--accent); filter: drop-shadow(0 0 5px var(--accent-glow)) drop-shadow(0 0 2px var(--accent)); } /* Leaflet's own chrome, restyled with this page's glass tokens instead of its * default white panels — every color below is a token, nothing hard-coded. */ .leaflet-container { background: var(--sky); font-family: var(--font); color: var(--text-hi); } .leaflet-bar, .leaflet-control-zoom { border: 1px solid var(--glass-border) !important; border-radius: 12px !important; overflow: hidden; box-shadow: var(--shadow) !important; } .leaflet-bar a, .leaflet-bar a:hover { background: var(--glass-fill); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); color: var(--text-hi); border-bottom: 1px solid var(--glass-border); } .leaflet-bar a:last-child { border-bottom: none; } .leaflet-bar a.leaflet-disabled { color: var(--text-faint); background: var(--glass-fill); } .leaflet-touch .leaflet-bar a { width: 32px; height: 32px; line-height: 30px; } .map-panel__controls { display: flex; align-items: center; gap: 0.6rem; } .map-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--glass-border); background: var(--glass-fill); color: var(--text-hi); font-size: 0.9rem; cursor: pointer; } .map-btn:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--glass-border)); } .map-scrub { flex: 1; min-width: 0; appearance: none; height: 4px; border-radius: 999px; background: var(--glass-border); outline: none; } .map-scrub::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); cursor: pointer; } .map-scrub::-moz-range-thumb { width: 14px; height: 14px; border: none; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); cursor: pointer; } .map-time { flex: none; min-width: 4.4em; text-align: right; font-size: 0.82rem; font-variant-numeric: tabular-nums; color: var(--text-lo); } .map-note { font-size: 0.78rem; letter-spacing: 0.02em; color: var(--text-faint); } .map-note.hidden { display: none; } /* ---- Footer / station chips ---------------------------------------------- */ .footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.2rem; padding: 1rem var(--pad); } .chips { display: flex; flex-wrap: wrap; gap: 0.55rem; } .chip { display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.34rem 0.72rem; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass-fill); font-size: 0.82rem; color: var(--text-hi); } .chip__label { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); } .chip__value { font-weight: 600; } .chip--alert { border-color: color-mix(in srgb, var(--alert-amber) 55%, transparent); background: color-mix(in srgb, var(--alert-amber) 14%, transparent); color: color-mix(in srgb, var(--alert-amber) 70%, var(--text-hi)); } .chip--alert .chip__label { color: color-mix(in srgb, var(--alert-amber) 55%, var(--text-faint)); } .chip--stale { color: var(--text-faint); } .chip--stale .chip__value { color: var(--text-faint); } .footer__stamp { font-size: 0.8rem; color: var(--text-faint); letter-spacing: 0.04em; } /* Dim the whole surface if /api/now can't be reached. */ .is-offline .grid { opacity: 0.55; transition: opacity 0.4s ease; } /* ---- Accessibility floor ------------------------------------------------- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }