fraxle
d8465675cd
Added variable temps to the simple view Fixed height shifting on model selections Tweaked style and added guides in simple view Linked profiles to simple view
576 lines
16 KiB
CSS
576 lines
16 KiB
CSS
/* ════════════════════════════════════════════════════════════════════════
|
|
header.css — Page header: title wordmark, UTCI dial, and search box.
|
|
════════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* ── 4. HEADER (title + dial + search, three-column grid) ──────────── */
|
|
|
|
.utci-header {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr; /* left | dial | why */
|
|
grid-template-areas: "hleft dial hright";
|
|
column-gap: 32px;
|
|
align-items: stretch;
|
|
padding-bottom: 6px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.header-left { grid-area: hleft; }
|
|
.scope-col { grid-area: dial; }
|
|
.header-right { grid-area: hright; }
|
|
|
|
/* Left column — wordmark, tagline, search and location stacked together */
|
|
.header-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
/* Wraps the location line + the reveal-on-demand search overlay so the
|
|
search can position itself directly over the location to save space. */
|
|
.utci-loc-search {
|
|
position: relative;
|
|
margin-top: 18px;
|
|
width: 300px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Right column — now hosts the "Why it feels like this" panel,
|
|
sitting close to the dial it explains. */
|
|
.header-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* The big "SunScope" wordmark */
|
|
.utci-title {
|
|
font-family: Manrope, sans-serif;
|
|
font-weight: 250;
|
|
font-size: clamp(48px, 6vw, 80px);
|
|
line-height: 1;
|
|
letter-spacing: -0.01em;
|
|
color: #1e1208;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.05em;
|
|
}
|
|
|
|
.utci-title .title-sun,
|
|
.utci-title .title-scope {
|
|
color: #1e1208;
|
|
}
|
|
|
|
.title-icon {
|
|
width: 0.82em;
|
|
height: 0.82em;
|
|
color: #1e1208;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* "See the world the way..." */
|
|
.utci-tagline {
|
|
font-family: Manrope, sans-serif;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 11px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: #7a5c2a;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
/* "↳ Location, Somewhere" + the magnifier that reveals the search */
|
|
.utci-current-loc {
|
|
font-family: Fraunces, serif;
|
|
font-style: italic;
|
|
font-weight: 800;
|
|
font-size: 18px;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
color: #1e1208;
|
|
text-align: left;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* The location name doubles as a search trigger — styled to read as plain
|
|
text but with a subtle hover cue so it's discoverable. */
|
|
.utci-loc-name {
|
|
flex: 0 1 auto;
|
|
font: inherit;
|
|
color: inherit;
|
|
padding: 0;
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 5px;
|
|
border-bottom: 1px dashed transparent;
|
|
transition: color 0.2s, border-color 0.2s;
|
|
}
|
|
|
|
/* Map pin sits just ahead of the location name; nudge it onto the text
|
|
baseline and tint it brass so it reads as a location marker. */
|
|
.utci-loc-pin {
|
|
flex: 0 0 auto;
|
|
align-self: center;
|
|
position: relative;
|
|
top: 1px;
|
|
color: #c8922a;
|
|
}
|
|
|
|
.utci-loc-name:hover {
|
|
color: #c8922a;
|
|
border-bottom-color: #c8922a80;
|
|
}
|
|
|
|
.utci-loc-name:focus-visible {
|
|
outline: none;
|
|
color: #c8922a;
|
|
border-bottom-color: #c8922a;
|
|
}
|
|
|
|
/* Small brass magnifying-glass button sitting beside the location name */
|
|
.utci-search-toggle {
|
|
flex: 0 0 auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
border: 1.5px solid #c9b08a;
|
|
border-radius: 999px;
|
|
background: #fffcf2;
|
|
color: #9a7a3a;
|
|
cursor: pointer;
|
|
transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.utci-search-toggle:hover {
|
|
color: #c8922a;
|
|
border-color: #c8922a;
|
|
background: #fef3dc;
|
|
}
|
|
|
|
.utci-search-toggle:focus-visible {
|
|
outline: none;
|
|
border-color: #c8922a;
|
|
box-shadow: 0 0 0 3px #c8922a24;
|
|
}
|
|
|
|
.utci-search-toggle[aria-expanded="true"] {
|
|
color: #fff;
|
|
background: #c8922a;
|
|
border-color: #c8922a;
|
|
}
|
|
|
|
/* The lat/lon below the location */
|
|
.utci-loc-coords {
|
|
font-family: JetBrains Mono, monospace;
|
|
font-style: normal;
|
|
font-size: 11px;
|
|
color: #b09870;
|
|
display: block;
|
|
flex-basis: 100%; /* drop onto its own line below the name + magnifier */
|
|
margin-top: 4px;
|
|
margin-left: 0;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
/* The big UTCI dial in the middle of the header.
|
|
Change width/height to resize it. */
|
|
.scope-ring {
|
|
width: 270px;
|
|
height: 270px;
|
|
display: block;
|
|
}
|
|
|
|
/* Wraps the dial SVG + the precip FX canvas so the canvas can overlay the
|
|
lens. Sizes itself to the SVG (220px, or 250px on mobile). */
|
|
.scope-wrap {
|
|
position: relative;
|
|
display: inline-block;
|
|
line-height: 0;
|
|
}
|
|
|
|
/* Animated rain/snow/lightning layer, clipped to the lens circle and sitting
|
|
on top of the glass. Inset to 95% to match the lens radius (r=95 of 100). */
|
|
.scope-fx {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 95%;
|
|
height: 95%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Cloud sprite strips drift horizontally inside the lens; sprites are
|
|
duplicated +200 user-units so the wrap is seamless. */
|
|
@keyframes scopeCloudDrift {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(var(--drift, -200px)); }
|
|
}
|
|
.scope-cloud-layer {
|
|
animation: scopeCloudDrift linear infinite;
|
|
will-change: transform;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.scope-cloud-layer { animation: none; }
|
|
}
|
|
|
|
.scope-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Time-lapse toggle beneath the dial. Brass pill matching the scope bezel. */
|
|
.scope-play {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 4px 12px;
|
|
border: 1px solid rgba(200, 146, 42, 0.5);
|
|
border-radius: 999px;
|
|
background: rgba(40, 28, 10, 0.55);
|
|
color: #e8d8c0;
|
|
font-family: 'Manrope', sans-serif;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
cursor: pointer;
|
|
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
|
}
|
|
.scope-play:hover {
|
|
background: rgba(16, 10, 3, 0.8);
|
|
border-color: rgba(200, 146, 42, 0.85);
|
|
color: #f5edd6;
|
|
}
|
|
.scope-play.is-playing {
|
|
padding: 4px 14px;
|
|
background: #241708; /* solid dark so the clock pops */
|
|
border-color: rgba(200, 146, 42, 0.9);
|
|
color: #ffd98a;
|
|
}
|
|
.scope-play.is-playing:hover {
|
|
background: #160d03;
|
|
color: #ffe6b0;
|
|
}
|
|
.scope-play-icon { font-size: 9px; line-height: 1; }
|
|
/* While playing, the simulated clock is the readout — same size as the idle
|
|
label, but monospaced + tabular so the digits don't jitter as they tick. */
|
|
.scope-play.is-playing .scope-play-label {
|
|
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
font-variant-numeric: tabular-nums;
|
|
min-width: 40px;
|
|
text-align: center;
|
|
color: #ffd98a;
|
|
}
|
|
|
|
/* The environment selector sits just below the dial, centred under it.
|
|
Kept out of .scope-col so the dial alone defines that column's height
|
|
and stays vertically centred against the side columns. */
|
|
.scope-env-bar {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 2px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.scope-env-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
border-top: 1px solid #c9b08a;
|
|
width: 270px; /* match desktop/tablet dial width */
|
|
}
|
|
|
|
.scope-env-label {
|
|
font-family: Manrope, sans-serif;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: #b09870;
|
|
}
|
|
|
|
.scope-env-row .cs-wrap,
|
|
.scope-env-row .cs-btn {
|
|
width: 100%;
|
|
}
|
|
|
|
.scope-env-row .cs-btn {
|
|
justify-content: center;
|
|
position: relative;
|
|
isolation: isolate;
|
|
border-radius: 999px;
|
|
box-shadow: inset 0 1px 3px rgba(255,255,255,0.30), 0 2px 8px rgba(0,0,0,0.18);
|
|
transition: color 0.35s ease;
|
|
}
|
|
|
|
.scope-env-row .cs-btn .cs-btn-overlay {
|
|
display: block;
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
background: #c8922a;
|
|
opacity: 0;
|
|
transition: opacity 0.35s ease;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.scope-env-row .cs-btn.on:hover .cs-btn-overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Label stays above the overlay */
|
|
.scope-env-row .cs-btn .cs-btn-label {
|
|
position: relative;
|
|
z-index: 1;
|
|
font-family: Manrope, sans-serif;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Arrow pinned right, above the overlay */
|
|
.scope-env-row .cs-arrow {
|
|
position: absolute;
|
|
right: 12px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.scope-env-row .cs-panel,
|
|
.scope-env-row .cs-option,
|
|
.insight-env-footer .cs-panel,
|
|
.insight-env-footer .cs-option {
|
|
text-align: center;
|
|
}
|
|
|
|
.insight-env-footer .cs-btn.on:hover .cs-btn-overlay { opacity: 1; }
|
|
.insight-env-footer .cs-btn .cs-btn-label { position: relative; z-index: 1; }
|
|
|
|
/* Per-environment gradient themes — !important keeps the gradient fixed
|
|
under the brass hover overlay (ui.css :hover rules load later). */
|
|
.scope-env-row[data-env="open"] .cs-btn.on { background: linear-gradient(135deg, #5a8a28 0%, #b8d860 100%) !important; border-color: #4a7818 !important; color: #fff; }
|
|
.scope-env-row[data-env="forest"] .cs-btn.on { background: linear-gradient(135deg, #1b5e3b 0%, #57bf8a 100%) !important; border-color: #1b5e3b !important; color: #fff; }
|
|
.scope-env-row[data-env="alpine"] .cs-btn.on { background: linear-gradient(135deg, #a8cfe8 0%, #dff0fa 100%) !important; border-color: #6aaedd !important; color: #1a3a58; }
|
|
.scope-env-row[data-env="beach"] .cs-btn.on { background: linear-gradient(135deg, #2a8fc8 0%, #e8d87a 100%) !important; border-color: #1e78b0 !important; color: #fff; }
|
|
.scope-env-row[data-env="river"] .cs-btn.on { background: linear-gradient(135deg, #2e6e5e 0%, #78c4a8 100%) !important; border-color: #2e6e5e !important; color: #fff; }
|
|
.scope-env-row[data-env="desert"] .cs-btn.on { background: linear-gradient(135deg, #b86820 0%, #e8c458 100%) !important; border-color: #a05818 !important; color: #fff; }
|
|
.scope-env-row[data-env="openwater"] .cs-btn.on { background: linear-gradient(135deg, #0c4878 0%, #2898d8 100%) !important; border-color: #0c4878 !important; color: #fff; }
|
|
.scope-env-row[data-env="urban"] .cs-btn.on { background: linear-gradient(135deg, #4a5568 0%, #a89880 100%) !important; border-color: #3a4455 !important; color: #fff; }
|
|
|
|
/* Duplicate gradient rules for the Solar model button inside the insight panel */
|
|
.insight-env-footer[data-env="open"] .cs-btn.on { background: linear-gradient(135deg, #5a8a28 0%, #b8d860 100%) !important; border-color: #4a7818 !important; color: #fff; }
|
|
.insight-env-footer[data-env="forest"] .cs-btn.on { background: linear-gradient(135deg, #1b5e3b 0%, #57bf8a 100%) !important; border-color: #1b5e3b !important; color: #fff; }
|
|
.insight-env-footer[data-env="alpine"] .cs-btn.on { background: linear-gradient(135deg, #a8cfe8 0%, #dff0fa 100%) !important; border-color: #6aaedd !important; color: #1a3a58; }
|
|
.insight-env-footer[data-env="beach"] .cs-btn.on { background: linear-gradient(135deg, #2a8fc8 0%, #e8d87a 100%) !important; border-color: #1e78b0 !important; color: #fff; }
|
|
.insight-env-footer[data-env="river"] .cs-btn.on { background: linear-gradient(135deg, #2e6e5e 0%, #78c4a8 100%) !important; border-color: #2e6e5e !important; color: #fff; }
|
|
.insight-env-footer[data-env="desert"] .cs-btn.on { background: linear-gradient(135deg, #b86820 0%, #e8c458 100%) !important; border-color: #a05818 !important; color: #fff; }
|
|
.insight-env-footer[data-env="openwater"] .cs-btn.on { background: linear-gradient(135deg, #0c4878 0%, #2898d8 100%) !important; border-color: #0c4878 !important; color: #fff; }
|
|
.insight-env-footer[data-env="urban"] .cs-btn.on { background: linear-gradient(135deg, #4a5568 0%, #a89880 100%) !important; border-color: #3a4455 !important; color: #fff; }
|
|
|
|
/* On hover the brass overlay covers the interior — force white text for contrast */
|
|
.scope-env-row .cs-btn.on:hover { color: #fff; }
|
|
.insight-env-footer .cs-btn.on:hover { color: #fff; }
|
|
|
|
/* The search box on the right of the header */
|
|
.utci-search-wrap {
|
|
position: relative;
|
|
width: 300px;
|
|
}
|
|
|
|
/* When revealed, the search floats over the location line rather than
|
|
occupying its own vertical slot — keeps the header compact. */
|
|
.utci-search-overlay {
|
|
position: absolute;
|
|
top: -9px;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 60;
|
|
}
|
|
|
|
.utci-search-overlay .utci-search {
|
|
box-shadow: 0 6px 20px #64461426; /* lift it off the location underneath */
|
|
}
|
|
|
|
/* The 300px wrapper would let .utci-fetch-time's default right-align drift to
|
|
the far edge; keep it left-aligned beneath the coords as before. */
|
|
.utci-loc-search .utci-fetch-time {
|
|
text-align: left;
|
|
}
|
|
|
|
.utci-search-label {
|
|
font-family: Manrope, sans-serif;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
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: 6px;
|
|
padding: 5px 10px;
|
|
font-size: 10px;
|
|
color: #5a3e1b;
|
|
background: #f5edd6;
|
|
border-radius: 6px;
|
|
font-family: Manrope, sans-serif;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* ── Stacked header layout (mobile + tablet) ─────────────────────────────
|
|
The desktop 3-column grid (left | dial | why-panel) needs ~960px of
|
|
viewport to fit: the location/search box is 300px, the "Why it feels like"
|
|
panel ~300px, plus the 220px dial and gaps. Below that the rigid columns
|
|
can't shrink and the why-panel overflows off the right edge, so we stack
|
|
everything into one centred column — matching where the glance rail also
|
|
drops below the table. */
|
|
@media (max-width: 960px) {
|
|
.utci-header {
|
|
grid-template-columns: 1fr; /* single column — stack title, dial, search */
|
|
grid-template-areas: none; /* flow in DOM order: left, dial, selector, why */
|
|
gap: 20px;
|
|
padding-bottom: 15px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
/* Clear the desktop area placement so children stack in DOM order */
|
|
.header-left,
|
|
.scope-col,
|
|
.scope-env-bar,
|
|
.header-right {
|
|
grid-area: auto;
|
|
}
|
|
|
|
.header-right {
|
|
align-items: center; /* centre the "Why it feels like" panel under the dial */
|
|
}
|
|
|
|
.utci-title {
|
|
font-size: clamp(40px, 12vw, 60px);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.utci-title,
|
|
.utci-tagline {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.scope-ring {
|
|
width: 250px;
|
|
height: 250px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.scope-env-row {
|
|
width: 250px;
|
|
}
|
|
|
|
.utci-loc-search {
|
|
width: 100%;
|
|
margin-top: 4px; /* tighten gap above location on mobile */
|
|
}
|
|
|
|
.utci-current-loc {
|
|
justify-content: center; /* centre name + magnifier on mobile */
|
|
text-align: center;
|
|
}
|
|
|
|
.utci-loc-coords {
|
|
text-align: center;
|
|
}
|
|
|
|
.utci-loc-search .utci-fetch-time {
|
|
text-align: center; /* match the desktop override's specificity */
|
|
}
|
|
|
|
.utci-search-wrap {
|
|
width: 100%; /* full-width search box */
|
|
}
|
|
}
|