/* ════════════════════════════════════════════════════════════════ STARGAZING — STYLES Dark-mode-first by design (sky context). Uses [data-theme="dark"] on to flip token palette via _shared/tokens.css. ════════════════════════════════════════════════════════════════ */ /* ── HERO — Milky Way over La Palma (Evgeni Tcherkasski / Unsplash) ─ */ .lpwd-hub--night .lpwd-hub__hero { position: relative; isolation: isolate; min-height: var(--lpwd-hub-hero-h); background-image: linear-gradient(180deg, rgb(8 10 20 / 0.55) 0%, rgb(8 10 20 / 0.35) 40%, rgb(8 10 20 / 0.85) 100%), image-set( url('../images/hub-stars-hero-mobile.jpg') 1x, url('../images/hub-stars-hero.jpg') 2x ); background-size: cover; background-position: center top; color: #f3f5f8; } @media (min-width: 768px) { .lpwd-hub--night .lpwd-hub__hero { min-height: var(--lpwd-hub-hero-h-md); background-image: linear-gradient(180deg, rgb(8 10 20 / 0.55) 0%, rgb(8 10 20 / 0.30) 35%, rgb(8 10 20 / 0.85) 100%), url('../images/hub-stars-hero.jpg'); } } .lpwd-hub--night .lpwd-hub__hero-inner { position: relative; z-index: 1; } .lpwd-hub--night .lpwd-hub__title, .lpwd-hub--night .lpwd-hub__eyebrow, .lpwd-hub--night .lpwd-hub__lede { color: #f3f5f8; text-shadow: 0 2px 12px rgb(0 0 0 / 0.55); } .lpwd-hub--night .lpwd-hub__lede { text-shadow: 0 1px 6px rgb(0 0 0 / 0.65); } .lpwd-hub--night .lpwd-hub__badge { background: rgb(15 20 25 / 0.55); border-color: rgb(255 255 255 / 0.18); backdrop-filter: blur(6px); color: #f3f5f8; } /* Photo credit — bottom-right of hero, low-profile */ .lpwd-hub--night .lpwd-hub__hero::after { content: 'Photo · Evgeni Tcherkasski / Unsplash'; position: absolute; right: 0.75rem; bottom: 0.5rem; z-index: 2; font-family: var(--lpwd-hub-font-mono); font-size: 0.65rem; letter-spacing: 0.05em; color: rgb(255 255 255 / 0.55); text-shadow: 0 1px 3px rgb(0 0 0 / 0.6); pointer-events: none; } /* ── PICK OF THE WEEK ─────────────────────────────────────────── */ .lpwd-stars__pick { max-width: var(--lpwd-hub-maxw); margin: 0 auto; padding: var(--lpwd-hub-gap-lg) var(--lpwd-hub-section-px) 0; } .lpwd-pick { background: var(--lpwd-hub-surface); border: 1px solid var(--lpwd-hub-border); border-radius: var(--lpwd-hub-radius-lg); padding: var(--lpwd-hub-card-pad); display: grid; grid-template-columns: auto 1fr auto; gap: var(--lpwd-hub-gap-md); align-items: center; box-shadow: var(--lpwd-hub-shadow-md); } .lpwd-pick__badge { font-size: 2.5rem; line-height: 1; } .lpwd-pick__body strong { font-family: var(--lpwd-hub-font-head); font-size: var(--lpwd-hub-size-h2); letter-spacing: var(--lpwd-hub-track-head); color: var(--lpwd-hub-ink); display: block; line-height: var(--lpwd-hub-lh-head); } .lpwd-pick__body span { font-size: var(--lpwd-hub-size-small); color: var(--lpwd-hub-ink-soft); } .lpwd-pick__score { font-family: var(--lpwd-hub-font-mono); font-size: var(--lpwd-hub-size-h2); font-weight: 700; color: var(--lpwd-hub-success); letter-spacing: 0.02em; } /* ── HOUR GRID ────────────────────────────────────────────────── */ .lpwd-stars__hours { max-width: var(--lpwd-hub-maxw); margin: 0 auto; padding: var(--lpwd-hub-gap-lg) var(--lpwd-hub-section-px); display: flex; flex-direction: column; gap: var(--lpwd-hub-gap-md); } .lpwd-night { background: var(--lpwd-hub-surface); border: 1px solid var(--lpwd-hub-border); border-radius: var(--lpwd-hub-radius-md); padding: var(--lpwd-hub-card-pad); display: flex; flex-direction: column; gap: var(--lpwd-hub-gap-sm); } .lpwd-night__head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--lpwd-hub-border); padding-bottom: var(--lpwd-hub-gap-sm); } .lpwd-night__date { font-family: var(--lpwd-hub-font-head); font-weight: var(--lpwd-hub-weight-head); font-size: var(--lpwd-hub-size-h3); color: var(--lpwd-hub-ink); margin: 0; } .lpwd-night__score { font-family: var(--lpwd-hub-font-mono); font-size: var(--lpwd-hub-size-small); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .lpwd-night[data-grade="great"] .lpwd-night__score { color: var(--lpwd-hub-success); } .lpwd-night[data-grade="ok"] .lpwd-night__score { color: var(--lpwd-hub-warn); } .lpwd-night[data-grade="poor"] .lpwd-night__score { color: var(--lpwd-hub-danger); } .lpwd-hours { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 4px; } .lpwd-hour { text-align: center; font-family: var(--lpwd-hub-font-mono); font-size: var(--lpwd-hub-size-micro); padding: 6px 2px; border-radius: var(--lpwd-hub-radius-sm); background: var(--lpwd-hub-surface-2); color: var(--lpwd-hub-ink-soft); display: flex; flex-direction: column; gap: 2px; } .lpwd-hour__time { color: var(--lpwd-hub-ink-mute); font-size: var(--lpwd-hub-size-micro); } .lpwd-hour__cloud { font-weight: 700; color: var(--lpwd-hub-ink); } .lpwd-hour[data-cloud="low"] { background: color-mix(in srgb, var(--lpwd-hub-success) 18%, var(--lpwd-hub-surface-2)); } .lpwd-hour[data-cloud="mid"] { background: color-mix(in srgb, var(--lpwd-hub-warn) 18%, var(--lpwd-hub-surface-2)); } .lpwd-hour[data-cloud="high"] { background: color-mix(in srgb, var(--lpwd-hub-danger) 18%, var(--lpwd-hub-surface-2)); } /* ── LEGEND ───────────────────────────────────────────────────── */ .lpwd-stars__legend { max-width: var(--lpwd-hub-maxw); margin: 0 auto; padding: 0 var(--lpwd-hub-section-px) var(--lpwd-hub-section-py); } .lpwd-stars__legend-h { font-family: var(--lpwd-hub-font-head); font-size: var(--lpwd-hub-size-h3); color: var(--lpwd-hub-ink); margin: 0 0 var(--lpwd-hub-gap-md); } .lpwd-stars__legend-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--lpwd-hub-gap-md); margin: 0; } .lpwd-stars__legend-list dt { font-family: var(--lpwd-hub-font-mono); font-size: var(--lpwd-hub-size-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--lpwd-hub-ink-mute); margin-bottom: 4px; } .lpwd-stars__legend-list dd { font-size: var(--lpwd-hub-size-small); color: var(--lpwd-hub-ink-soft); margin: 0; }