sunscope/assets/css/header.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;  /* 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 light, matching about page */
  font-style: italic;
  font-weight: 300;
  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;
}