133 lines
5.0 KiB
CSS
133 lines
5.0 KiB
CSS
/* ════════════════════════════════════════════════════════════════════════
|
|
base.css — Fonts, reset, page shell, and top navigation.
|
|
════════════════════════════════════════════════════════════════════════
|
|
|
|
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
|
|
════════════════════════════════════════════════════════════════════════ */
|
|
|
|
|
|
/* ── 1. FONTS + RESET ───────────────────────────────────────────────── */
|
|
|
|
@import "https://fonts.bunny.net/css2?family=Fraunces:ital,wght@0,300;0,500;0,700;0,900;1,300;1,500;1,700;1,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 36px 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 */
|
|
}
|