Beta2 Updates
Now 14 Days Accuracy Indicators Sunrise/Sunset Moon Cycles Early Pro Limitations New Code Formatting
This commit is contained in:
fraxle
@@ -0,0 +1,720 @@
|
||||
/* ════════════════════════════════════════════════════════════════════════
|
||||
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: hidden;
|
||||
}
|
||||
|
||||
/* 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. */
|
||||
|
||||
.utci-day-tabs {
|
||||
display: flex;
|
||||
margin-bottom: 18px;
|
||||
border-bottom: 2px solid #d4c0a0;
|
||||
}
|
||||
|
||||
.utci-day-tab {
|
||||
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 {
|
||||
overflow-x: auto;
|
||||
border: 1.5px solid #c9b08a;
|
||||
background: #fffcf2;
|
||||
}
|
||||
|
||||
.utci-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Column headings (Hour, Air, RH, Wind...) */
|
||||
.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;
|
||||
position: sticky;
|
||||
top: 0; /* sticks to the top while scrolling */
|
||||
border-bottom: 2px solid #c9b08a;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
|
||||
/* ── 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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user