sunscope/assets/sunscope.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 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 */
}


/* ── 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;
  /* Fixed layout so the explicit per-cell widths set by the JS width-sync
     (see useLayoutEffect in sunscope.js) are actually enforced. Without
     this the browser's auto layout treats those widths as suggestions and
     redistributes space, which makes the header and body columns drift
     apart the further right you scroll. */
  table-layout: fixed;
}

/* 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;
}

/* The Dir column is centered on both desktop and mobile so the
   compass vane sits with even padding either side — especially
   important on mobile where the compass label is hidden and there's
   no text to balance the right-aligned content. */
.utci-table th.utci-dir-cell,
.utci-table td.utci-dir-cell {
  text-align: center;
}

/* "Tight" header — for columns whose body content is narrower than
   the default tracked-out header would suggest (Air, Pcpt). Reducing
   the letter-spacing shrinks the heading's natural width so it stops
   driving the column wider than the body needs. Right-aligned values
   then sit with balanced visual padding on either side. */
.utci-table th.utci-tight-head {
  letter-spacing: 0.04em;
}


/* ── 8. NOW-ROW & NIGHT-ROW DECORATIONS ─────────────────────────────── */

/* "Currently this hour" — the highlighted row.
   The row gets a cream-yellow background and darker text. No left
   stripe or pip — the colour shift alone signals "this is now". */
.utci-table tbody tr.is-now {
  background: #fff8e4 !important;
}

.utci-table tbody tr.is-now td {
  color: #1e1208;
  /* Brass bracket framing the current-hour row top and bottom — clean,
     definitive, no left stripe needed. */
  border-top: 2px solid #c8922a;
  border-bottom: 2px solid #c8922a;
}

/* 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-app {
    padding: 52px 10px 32px;
  }

  .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;
  }

  /* Halve the hourly-table cell padding on mobile so more columns fit
     in the viewport before the horizontal scrollbar kicks in. */
  .utci-table th {
    padding: 7px 6px;
  }
  .utci-table td {
    padding: 5px 6px;
  }

  /* Drop the compass-label text ("N", "NW"...) next to the wind vane on
     mobile — the vane arrow alone is enough at small sizes. */
  .wind-dir-label {
    display: none;
  }

}