fraxle
044b4a59a9
New data columns for UV, soil and wind direction. Add icons to some data Better table formatting and responsiveness Improved scope background variations
847 lines
22 KiB
CSS
847 lines
22 KiB
CSS
/* ════════════════════════════════════════════════════════════════════════
|
|
SUNSCOPE · styles
|
|
════════════════════════════════════════════════════════════════════════
|
|
|
|
QUICK MAP — where to find and change common things
|
|
──────────────────────────────────────────────────────────────────────
|
|
Page background body { background }
|
|
Body text colour .utci-app { color }
|
|
Brand "brass" colour search file for #c8922a
|
|
Headline font .utci-title { font-family }
|
|
Body text font .utci-app { font-family }
|
|
Max page width .utci-shell { max-width }
|
|
Mobile breakpoint @media (max-width: 800px) at the bottom
|
|
Big UTCI dial size .scope-ring { width / height }
|
|
|
|
COLOUR PALETTE (the "warm parchment & brass" theme)
|
|
──────────────────────────────────────────────────────────────────────
|
|
#f5edd6 parchment page background
|
|
#fffcf2 soft cream cards, search box, table
|
|
#fdf8ee warm cream toolbars, legend, about block
|
|
#f0e4c4 pale honey table heading row
|
|
#fef3dc warm hover buttons on hover
|
|
#fef8ea row hover table row on hover
|
|
#fff8e4 "now" row the currently-active hour
|
|
#1e1208 espresso headings + emphasis
|
|
#4a3420 warm dark body text in the table
|
|
#6b4f2a muted bronze subtle emphasis
|
|
#7a5c2a tagline brown italic intro line
|
|
#9a7d5a soft brown column toggle text
|
|
#b09870 warm grey muted labels
|
|
#c0a880 pale dust night-row text, footer
|
|
#c8922a BRASS brand accent (links, dial, focus)
|
|
#a06e18 deep brass hover state for some links
|
|
#c9b08a warm border panel borders
|
|
#d4c0a0 soft border toolbar/legend borders
|
|
#ede4cc line table row dividers
|
|
|
|
FONTS
|
|
──────────────────────────────────────────────────────────────────────
|
|
Fraunces serif display titles, day labels, hour cell
|
|
Manrope body sans-serif paragraphs
|
|
JetBrains Mono numeric monospace table data, small labels
|
|
|
|
FILE STRUCTURE (in order below)
|
|
──────────────────────────────────────────────────────────────────────
|
|
1. Fonts + reset
|
|
2. Page background & shell
|
|
3. Top navigation
|
|
4. Header (title + dial + search)
|
|
5. Day tabs
|
|
6. Column toggles
|
|
7. Hourly table
|
|
8. Now-row + night-row decorations
|
|
9. Status & error banners
|
|
10. Legend
|
|
11. About + footer
|
|
12. Responsive (mobile)
|
|
════════════════════════════════════════════════════════════════════════ */
|
|
|
|
|
|
/* ── 1. FONTS + RESET ───────────────────────────────────────────────── */
|
|
|
|
@import "https://fonts.bunny.net/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,700;9..144,900&family=JetBrains+Mono:wght@400;600&family=Manrope:wght@400;500;600;700&display=swap";
|
|
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
/* ── 2. PAGE BACKGROUND & SHELL ─────────────────────────────────────── */
|
|
|
|
body {
|
|
background: #f5edd6; /* parchment */
|
|
}
|
|
|
|
.utci-app {
|
|
font-family: Manrope, sans-serif;
|
|
color: #1e1208;
|
|
background: #f5edd6;
|
|
min-height: 100vh;
|
|
padding: 52px 28px 32px;
|
|
position: relative;
|
|
/* overflow-x: clip (not hidden) — `clip` clips horizontal overflow
|
|
WITHOUT making this a scroll container, so `position: sticky` on
|
|
descendants (table <th>) can still stick relative to the viewport.
|
|
`hidden` would create a containing block that breaks sticky. */
|
|
overflow-x: clip;
|
|
}
|
|
|
|
/* Two big soft glows in the corners — pure decoration.
|
|
Comment one out to remove that side's glow. */
|
|
.lens-bloom-a {
|
|
position: fixed;
|
|
top: -200px;
|
|
left: -200px;
|
|
width: 700px;
|
|
height: 700px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(ellipse, rgba(255, 210, 60, 0.18) 0%, transparent 65%);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.lens-bloom-b {
|
|
position: fixed;
|
|
top: -80px;
|
|
right: -140px;
|
|
width: 520px;
|
|
height: 420px;
|
|
background: radial-gradient(ellipse, rgba(200, 146, 42, 0.13) 0%, transparent 68%);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* The centred container that holds everything. */
|
|
.utci-shell {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
|
|
/* ── 3. TOP NAVIGATION (Home / About links in the corner) ──────────── */
|
|
|
|
.utci-topnav {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding: 18px 32px;
|
|
gap: 28px;
|
|
}
|
|
|
|
.utci-topnav a {
|
|
font-family: JetBrains Mono, monospace;
|
|
font-size: 16px;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: #b09870;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
padding-bottom: 2px;
|
|
transition: color 0.2s, border-color 0.2s;
|
|
}
|
|
|
|
.utci-topnav a:hover {
|
|
color: #c8922a; /* brass on hover */
|
|
border-bottom-color: #c8922a80; /* faint underline */
|
|
}
|
|
|
|
|
|
/* ── 4. HEADER (title + dial + search, three-column grid) ──────────── */
|
|
|
|
.utci-header {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr; /* title | dial | search */
|
|
gap: 32px;
|
|
align-items: center;
|
|
padding-bottom: 32px;
|
|
border-bottom: 2px solid #c9b08a;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.header-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* The big "SUNScope" wordmark */
|
|
.utci-title {
|
|
font-family: Fraunces, serif;
|
|
font-weight: 900;
|
|
font-variation-settings: "opsz" 144;
|
|
font-size: clamp(48px, 6vw, 80px); /* responsive — scales with viewport */
|
|
line-height: 0.9;
|
|
letter-spacing: -0.03em;
|
|
color: #1e1208;
|
|
}
|
|
|
|
.utci-title .title-sun { /* "SUN" — bold + brass */
|
|
color: #c8922a;
|
|
font-weight: 900;
|
|
font-style: normal;
|
|
}
|
|
|
|
.utci-title .title-scope { /* "Scope" — italic */
|
|
font-style: italic;
|
|
font-weight: 900;
|
|
color: #1e1208;
|
|
}
|
|
|
|
.utci-title .title-beta { /* the small "beta" subscript */
|
|
font-size: 0.38em;
|
|
text-transform: none;
|
|
font-weight: 400;
|
|
letter-spacing: 0.05em;
|
|
vertical-align: super;
|
|
color: #b09870;
|
|
}
|
|
|
|
/* "See the sun the way..." */
|
|
.utci-tagline {
|
|
font-family: Fraunces, serif;
|
|
font-style: italic;
|
|
font-size: 17px;
|
|
color: #7a5c2a;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
/* The credits line under the tagline */
|
|
.utci-subtitle {
|
|
font-family: JetBrains Mono, monospace;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.18em;
|
|
margin-top: 10px;
|
|
color: #b09870;
|
|
}
|
|
|
|
.utci-subtitle-link { /* The "UTCI" link in the credits */
|
|
color: #c8922a;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid rgba(200, 146, 42, 0.4);
|
|
transition: border-color 0.2s, color 0.2s;
|
|
}
|
|
|
|
.utci-subtitle-link:hover {
|
|
color: #a06e18;
|
|
border-bottom-color: #a06e18;
|
|
}
|
|
|
|
/* "↳ Pangbourne, Berkshire" */
|
|
.utci-current-loc {
|
|
font-family: Fraunces, serif;
|
|
font-style: italic;
|
|
font-size: 18px;
|
|
margin-top: 12px;
|
|
color: #1e1208;
|
|
}
|
|
|
|
/* The lat/lon next to the location */
|
|
.utci-loc-coords {
|
|
font-family: JetBrains Mono, monospace;
|
|
font-style: normal;
|
|
font-size: 11px;
|
|
color: #b09870;
|
|
margin-left: 10px;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
/* The big UTCI dial in the middle of the header.
|
|
Change width/height to resize it. */
|
|
.scope-ring {
|
|
width: 220px;
|
|
height: 220px;
|
|
display: block;
|
|
}
|
|
|
|
/* The search box on the right of the header */
|
|
.utci-search-wrap {
|
|
position: relative;
|
|
width: 300px;
|
|
}
|
|
|
|
.utci-search-label {
|
|
font-family: JetBrains Mono, monospace;
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.18em;
|
|
color: #b09870;
|
|
display: block;
|
|
margin-bottom: 7px;
|
|
}
|
|
|
|
.utci-search {
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
border: 1.5px solid #c9b08a;
|
|
background: #fffcf2;
|
|
font-family: Manrope, sans-serif;
|
|
font-size: 14px;
|
|
color: #1e1208;
|
|
outline: none;
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.utci-search::placeholder {
|
|
color: #c0a880;
|
|
}
|
|
|
|
.utci-search:focus {
|
|
border-color: #c8922a;
|
|
box-shadow: 0 0 0 3px #c8922a24; /* brass glow when focused */
|
|
}
|
|
|
|
/* The dropdown list of city results */
|
|
.utci-results {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background: #fffcf2;
|
|
border: 1.5px solid #c9b08a;
|
|
border-top: none;
|
|
max-height: 260px;
|
|
overflow-y: auto;
|
|
z-index: 50;
|
|
box-shadow: 0 8px 24px #6446141f;
|
|
}
|
|
|
|
.utci-result {
|
|
padding: 11px 16px;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid #ede4cc;
|
|
font-size: 14px;
|
|
transition: background 0.12s;
|
|
border-left: 3px solid transparent;
|
|
}
|
|
|
|
.utci-result:hover {
|
|
background: #fef3dc;
|
|
border-left-color: #c8922a; /* brass marker on hover */
|
|
}
|
|
|
|
/* The "GB · 51.48°, -1.07°" line under each city */
|
|
.utci-result-meta {
|
|
font-size: 11px;
|
|
color: #b09870;
|
|
font-family: JetBrains Mono, monospace;
|
|
margin-top: 3px;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.utci-searching {
|
|
margin-top: 7px;
|
|
font-size: 10px;
|
|
color: #b09870;
|
|
font-family: JetBrains Mono, monospace;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
|
|
/* ── 5. DAY TABS (today / tomorrow / etc.) ─────────────────────────── */
|
|
/* Note: each tab's background colour comes from inline styles in
|
|
sunscope.js (the confidence bands). This file only handles spacing,
|
|
typography, and the active-tab underline. */
|
|
|
|
/* Wrapper that hosts the scrollable strip, edge fades, and chevrons. */
|
|
.utci-day-tabs-wrap {
|
|
position: relative;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
/* Edge fade gradients — only show when there's content to scroll to. */
|
|
.utci-day-tabs-wrap::before,
|
|
.utci-day-tabs-wrap::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 2px; /* leave the underline border visible */
|
|
width: 40px;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.utci-day-tabs-wrap::before {
|
|
left: 0;
|
|
background: linear-gradient(to right, #f5edd6 0%, rgba(245,237,214,0) 100%);
|
|
}
|
|
.utci-day-tabs-wrap::after {
|
|
right: 0;
|
|
background: linear-gradient(to left, #f5edd6 0%, rgba(245,237,214,0) 100%);
|
|
}
|
|
.utci-day-tabs-wrap.fade-left::before { opacity: 1; }
|
|
.utci-day-tabs-wrap.fade-right::after { opacity: 1; }
|
|
|
|
/* Chevron buttons — sit on top of the fades. */
|
|
.utci-day-scroll {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
border: 1px solid #d4c0a0;
|
|
background: #fffcf2;
|
|
color: #6b4f2a;
|
|
font-size: 20px;
|
|
font-family: Fraunces, serif;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 0 2px 0;
|
|
box-shadow: 0 1px 4px rgba(80,55,20,0.12);
|
|
transition: opacity 0.2s, background 0.15s, transform 0.15s;
|
|
}
|
|
.utci-day-scroll:hover {
|
|
background: #fef3dc;
|
|
}
|
|
.utci-day-scroll.left { left: -2px; }
|
|
.utci-day-scroll.right { right: -2px; }
|
|
.utci-day-scroll.hidden {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.utci-day-tabs {
|
|
display: flex;
|
|
border-bottom: 2px solid #d4c0a0;
|
|
overflow-x: auto;
|
|
scroll-behavior: smooth;
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* old Edge */
|
|
}
|
|
.utci-day-tabs::-webkit-scrollbar {
|
|
display: none; /* Chrome/Safari */
|
|
}
|
|
|
|
.utci-day-tab {
|
|
flex-shrink: 0;
|
|
padding: 12px 24px;
|
|
cursor: pointer;
|
|
font-family: JetBrains Mono, monospace;
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
background: transparent;
|
|
border: none;
|
|
color: #b09870;
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -2px;
|
|
transition: color 0.2s, border-color 0.2s;
|
|
}
|
|
|
|
.utci-day-tab:hover {
|
|
color: #6b4f2a;
|
|
}
|
|
|
|
.utci-day-tab.active {
|
|
color: #c8922a;
|
|
border-bottom-color: #c8922a;
|
|
}
|
|
|
|
/* The "Mon 12 May" date underneath each tab name */
|
|
.utci-day-date {
|
|
font-family: Fraunces, serif;
|
|
font-style: italic;
|
|
font-size: 13px;
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
display: block;
|
|
margin-top: 3px;
|
|
color: inherit;
|
|
}
|
|
|
|
|
|
/* ── 6. COLUMN TOGGLES (the "Columns: Hour Air RH ..." bar) ────────── */
|
|
|
|
.col-toggles {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
padding: 10px 14px;
|
|
background: #fdf8ee;
|
|
border: 1.5px solid #d4c0a0;
|
|
}
|
|
|
|
.col-toggles-label {
|
|
font-family: JetBrains Mono, monospace;
|
|
font-size: 9px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.18em;
|
|
color: #b09870;
|
|
margin-right: 4px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* The little pill buttons */
|
|
.col-toggle {
|
|
padding: 4px 11px;
|
|
cursor: pointer;
|
|
border: 1.5px solid #c9b08a;
|
|
background: #f5edd6;
|
|
color: #9a7d5a;
|
|
font-family: JetBrains Mono, monospace;
|
|
font-size: 9px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
transition: all 0.15s;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.col-toggle:hover {
|
|
border-color: #c8922a;
|
|
color: #6b4f2a;
|
|
background: #fef3dc;
|
|
}
|
|
|
|
/* The "pressed-in" active look */
|
|
.col-toggle.on {
|
|
background: #c8922a;
|
|
border-color: #c8922a;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
/* ── 7. HOURLY TABLE ────────────────────────────────────────────────── */
|
|
|
|
.utci-table-wrap {
|
|
/* No overflow on this wrapper — having any overflow here would make
|
|
the wrapper a scroll container, which would break sticky-to-viewport
|
|
on the .utci-thead-sticky strip inside.
|
|
The body scroller (.utci-tbody-scroll) owns the horizontal scrollbar. */
|
|
border: 1.5px solid #c9b08a;
|
|
background: #fffcf2;
|
|
}
|
|
|
|
/* ── STICKY HEADER STRIP ────────────────────────────────────────────────
|
|
Sits above the body and locks to the top of the viewport while the
|
|
page scrolls. Has overflow:hidden so the inner .utci-thead-track can
|
|
be translateX'd by JS to follow the body's scrollLeft. */
|
|
.utci-thead-sticky {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 5;
|
|
overflow: hidden;
|
|
background: #f0e4c4;
|
|
border-bottom: 2px solid #c9b08a;
|
|
box-shadow: 0 2px 5px rgba(74, 52, 32, 0.10);
|
|
}
|
|
|
|
/* The shifted track inside the sticky header — JS sets transform:translate3d
|
|
to keep its columns aligned with the body scroller's scrollLeft. */
|
|
.utci-thead-track {
|
|
will-change: transform;
|
|
}
|
|
|
|
/* Body scroller — owns the horizontal scrollbar for the whole table. */
|
|
.utci-tbody-scroll {
|
|
overflow-x: auto;
|
|
overflow-y: visible;
|
|
}
|
|
|
|
.utci-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Column headings (Hour, Air, RH, Wind...).
|
|
NOTE: stickiness is handled by the .utci-thead-sticky wrapper, not
|
|
the <th> itself — see the new wrapper rules higher up. */
|
|
.utci-table th {
|
|
background: #f0e4c4;
|
|
color: #6b4f2a;
|
|
font-family: JetBrains Mono, monospace;
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
font-weight: 600;
|
|
padding: 14px 12px;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* The Hour column aligns left, the rest align right */
|
|
.utci-table th:first-child,
|
|
.utci-table td:first-child {
|
|
text-align: left;
|
|
}
|
|
|
|
/* The "°C" / "m/s" etc. unit underneath each heading */
|
|
.utci-table th .col-unit {
|
|
display: block;
|
|
color: #c8922a;
|
|
font-size: 9px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.utci-table tbody tr {
|
|
border-bottom: 1px solid #ede4cc;
|
|
transition: background 0.1s;
|
|
}
|
|
|
|
.utci-table tbody tr:hover {
|
|
background: #fef8ea;
|
|
}
|
|
|
|
.utci-table td {
|
|
padding: 10px 12px;
|
|
text-align: right;
|
|
font-family: JetBrains Mono, monospace;
|
|
font-variant-numeric: tabular-nums; /* stops digits jiggling between rows */
|
|
white-space: nowrap;
|
|
color: #4a3420;
|
|
/* Baseline minimum column width — the JS width-sync uses max(60, head,
|
|
body) so very-narrow data columns ("Air 5.0") still feel comfortable
|
|
to read instead of being squashed. */
|
|
min-width: 60px;
|
|
}
|
|
|
|
/* Subtle vertical column dividers — same pale cream as the row
|
|
dividers so the table reads as a soft grid, not a hard one. The
|
|
last column has no divider so it doesn't double-up with the
|
|
container border. */
|
|
.utci-table th:not(:last-child),
|
|
.utci-table td:not(:last-child) {
|
|
border-right: 1px solid #ede4cc;
|
|
}
|
|
|
|
|
|
/* ── 8. NOW-ROW & NIGHT-ROW DECORATIONS ─────────────────────────────── */
|
|
|
|
/* "Currently this hour" — the highlighted row */
|
|
.utci-table tbody tr.is-now {
|
|
background: #fff8e4 !important;
|
|
box-shadow: inset 3px 0 #c8922a; /* brass stripe down the left */
|
|
}
|
|
|
|
.utci-table tbody tr.is-now td {
|
|
color: #1e1208;
|
|
}
|
|
|
|
/* The little brass pip in the time cell of the current hour */
|
|
.now-pip {
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: #c8922a;
|
|
margin-right: 7px;
|
|
vertical-align: middle;
|
|
box-shadow: 0 0 8px #c8922a73;
|
|
}
|
|
|
|
/* Night-time hours get a slightly muted text colour */
|
|
.utci-table tbody tr.is-night td {
|
|
color: #c0a880;
|
|
}
|
|
|
|
/* The time cell — uses the display serif instead of monospace */
|
|
.utci-time {
|
|
font-family: Fraunces, serif !important;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: #1e1208 !important;
|
|
}
|
|
|
|
/* The coloured pill inside UTCI / UTCI+P cells.
|
|
The pill's BACKGROUND comes from inline styles in sunscope.js
|
|
(the utciCategory() function decides which thermal-stress colour
|
|
to apply). This rule just handles the pill shape. */
|
|
.utci-cell {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 3px;
|
|
font-weight: 600;
|
|
min-width: 60px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Hero variant used for the UTCI+P column — the headline number.
|
|
Bigger, bolder, more breathing room so the eye lands here first. */
|
|
.utci-cell-hero {
|
|
padding: 7px 16px;
|
|
font-size: 19px;
|
|
font-weight: 700;
|
|
min-width: 76px;
|
|
letter-spacing: 0.01em;
|
|
box-shadow: 0 1px 0 rgba(0,0,0,0.15) inset, 0 0 0 1px rgba(255,255,255,0.08) inset;
|
|
}
|
|
|
|
.utci-band-label {
|
|
font-family: JetBrains Mono, monospace;
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
|
|
/* ── 9. STATUS & ERROR BANNERS ("Acquiring forecast data…") ────────── */
|
|
|
|
.utci-status {
|
|
padding: 14px 18px;
|
|
background: #f0e4c4;
|
|
color: #7a5c2a;
|
|
font-family: JetBrains Mono, monospace;
|
|
font-size: 11px;
|
|
text-align: center;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
border: 1.5px solid #c9b08a;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
|
|
/* ── 10. LEGEND (thermal-stress band colours at the bottom) ────────── */
|
|
|
|
.utci-legend {
|
|
margin-top: 22px;
|
|
padding: 18px 20px;
|
|
background: #fdf8ee;
|
|
border: 1.5px solid #c9b08a;
|
|
}
|
|
|
|
.utci-legend-label {
|
|
font-family: JetBrains Mono, monospace;
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.18em;
|
|
color: #b09870;
|
|
margin-bottom: 12px;
|
|
display: block;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.utci-legend-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
|
|
.utci-legend-item {
|
|
padding: 6px 12px;
|
|
font-family: JetBrains Mono, monospace;
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
flex: 1;
|
|
min-width: 110px;
|
|
text-align: center;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
|
|
/* ── 11. ABOUT + FOOTER ─────────────────────────────────────────────── */
|
|
|
|
.utci-about {
|
|
margin-top: 28px;
|
|
padding: 24px 28px;
|
|
background: #fdf8ee;
|
|
border: 1.5px solid #c9b08a;
|
|
}
|
|
|
|
.utci-about-heading {
|
|
font-family: Fraunces, serif;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #1e1208;
|
|
margin-bottom: 14px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.utci-about-text {
|
|
font-family: Manrope, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.75;
|
|
color: #4a3420;
|
|
margin-bottom: 12px;
|
|
max-width: 860px; /* keeps line length readable */
|
|
}
|
|
|
|
.utci-about-text:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.utci-about-text strong {
|
|
color: #1e1208;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.utci-about-text em {
|
|
font-style: italic;
|
|
color: #6b4f2a;
|
|
}
|
|
|
|
.utci-footer {
|
|
margin-top: 36px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid #d4c0a0;
|
|
font-family: JetBrains Mono, monospace;
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: #c0a880;
|
|
line-height: 2.2;
|
|
}
|
|
|
|
/* The "Reading the table." intro snippet */
|
|
.utci-footer em {
|
|
font-family: Fraunces, serif;
|
|
font-style: italic;
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
font-size: 14px;
|
|
color: #7a5c2a;
|
|
}
|
|
|
|
|
|
/* ── 12. RESPONSIVE (mobile) ───────────────────────────────────────── */
|
|
/* On screens narrower than 800px, stack the header vertically and
|
|
shrink the dial. Add more rules in this block to tweak mobile
|
|
layout further. */
|
|
|
|
@media (max-width: 800px) {
|
|
|
|
.utci-header {
|
|
grid-template-columns: 1fr; /* stack the 3 header columns */
|
|
text-align: center;
|
|
}
|
|
|
|
.header-right {
|
|
align-items: center;
|
|
}
|
|
|
|
.utci-search-wrap {
|
|
width: 100%;
|
|
}
|
|
|
|
.scope-ring {
|
|
width: 180px; /* smaller dial on mobile */
|
|
height: 180px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
}
|