/* ========================================================================== Weather site stylesheet Card-based dashboard layout in the style of belchertownweather.com, with a light theme and a dark theme toggled via [data-theme="dark"] on the element. ========================================================================== */ :root { --bg: #eef1f4; --surface: #ffffff; --surface-alt: #f6f8fa; --text: #1c2733; --text-muted: #5b6b7a; --border: #dde3e9; --accent: #1f77b4; --accent-2: #0f9d9d; --header-bg: #16232f; --header-text: #f4f7fa; --rising: #2e9e4b; --falling: #c0392b; --steady: #8a8f98; --shadow: 0 1px 3px rgba(20, 30, 40, 0.08), 0 1px 2px rgba(20, 30, 40, 0.06); } html[data-theme="dark"] { --bg: #0f1720; --surface: #17222d; --surface-alt: #1c2937; --text: #eaf0f6; --text-muted: #9aa9b8; --border: #2a3948; --accent: #4da3e0; --accent-2: #35c2c2; --header-bg: #0b131b; --header-text: #f4f7fa; --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); transition: background 0.2s ease, color 0.2s ease; } a { color: var(--accent); } /* ---------------------------------- Header ------------------------------ */ .site-header { background: var(--header-bg); color: var(--header-text); padding: 1rem 1.25rem; } .site-header-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; } .site-title { margin: 0; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.01em; } .site-tagline { margin: 0.15rem 0 0; font-size: 0.85rem; color: #b7c3ce; } .header-right { display: flex; align-items: center; gap: 1rem; } .last-updated { font-size: 0.8rem; color: #b7c3ce; } .theme-toggle { background: transparent; border: 1px solid #3a4a58; color: var(--header-text); border-radius: 999px; padding: 0.35rem 0.75rem; cursor: pointer; font-size: 0.85rem; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.08); } /* ------------------------------------ Nav -------------------------------- */ .site-nav { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } .site-nav-inner { max-width: 1100px; margin: 0 auto; display: flex; gap: 0.25rem; overflow-x: auto; padding: 0 1.25rem; } .site-nav a { display: inline-block; padding: 0.75rem 0.9rem; color: var(--text-muted); text-decoration: none; font-size: 0.9rem; font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; } .site-nav a:hover, .site-nav a.active { color: var(--accent); border-bottom-color: var(--accent); } /* ------------------------------------ Main ------------------------------- */ main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; } section { margin-bottom: 2.5rem; scroll-margin-top: 3.5rem; } .section-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.9rem; display: flex; align-items: baseline; gap: 0.5rem; } .section-subtitle { font-size: 0.8rem; font-weight: 400; color: var(--text-muted); } /* --------------------------- Current conditions hero ---------------------- */ .hero { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-radius: 14px; padding: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; box-shadow: var(--shadow); } .hero-temp-block { display: flex; align-items: center; gap: 1rem; } .hero-icon { font-size: 3.2rem; line-height: 1; } .hero-temp { font-size: 3.6rem; font-weight: 800; line-height: 1; } .hero-meta { display: flex; flex-direction: column; gap: 0.2rem; } .hero-conditions { font-size: 1.05rem; font-weight: 600; } .hero-feels-like, .hero-location { font-size: 0.85rem; opacity: 0.9; } .hero-spacer { flex: 1; } /* -------------------------------- Stat grid ------------------------------ */ /* ---------------------------------- Radar --------------------------------- */ .radar-wrap { position: relative; width: 100%; height: 480px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); } .radar-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } @media (max-width: 560px) { .radar-wrap { height: 360px; } } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1rem; box-shadow: var(--shadow); } .stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0.3rem; } .stat-value { font-size: 1.35rem; font-weight: 700; } .stat-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; } .trend-rising { color: var(--rising); } .trend-falling { color: var(--falling); } .trend-steady { color: var(--steady); } /* --------------------------------- Charts --------------------------------- */ .chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; box-shadow: var(--shadow); margin-bottom: 1rem; } .chart-card h3 { margin: 0 0 0.5rem; font-size: 0.95rem; } .chart-wrap { position: relative; height: 260px; } .chart-range-buttons { display: flex; gap: 0.4rem; margin-bottom: 1rem; } .chart-range-buttons button { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.82rem; cursor: pointer; } .chart-range-buttons button.active { background: var(--accent); border-color: var(--accent); color: #fff; } /* -------------------------------- Forecast -------------------------------- */ .forecast-scroller { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; } .forecast-day { flex: 0 0 auto; width: 110px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.8rem 0.6rem; text-align: center; box-shadow: var(--shadow); } .forecast-day .fd-name { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.35rem; } .forecast-day .fd-icon { font-size: 1.6rem; margin-bottom: 0.35rem; } .forecast-day .fd-hi { font-weight: 700; } .forecast-day .fd-lo { color: var(--text-muted); } .forecast-day .fd-precip { font-size: 0.75rem; color: var(--accent); margin-top: 0.3rem; } .hourly-scroller { display: flex; gap: 0.6rem; overflow-x: auto; padding-bottom: 0.5rem; } .hourly-item { flex: 0 0 auto; width: 76px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.3rem; } .hourly-item .hr-time { font-size: 0.72rem; color: var(--text-muted); } .hourly-item .hr-icon { font-size: 1.2rem; margin: 0.25rem 0; } .hourly-item .hr-temp { font-weight: 700; font-size: 0.9rem; } /* --------------------------------- Records --------------------------------- */ .records-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; } /* ------------------------------- Sun & moon -------------------------------- */ .sunmoon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; } /* --------------------------------- Footer ---------------------------------- */ footer { border-top: 1px solid var(--border); padding: 1.5rem 1.25rem; text-align: center; color: var(--text-muted); font-size: 0.8rem; } footer a { color: var(--text-muted); } /* ---------------------------------- States ---------------------------------- */ .loading-msg, .error-msg { color: var(--text-muted); font-size: 0.9rem; padding: 0.5rem 0; } .error-msg { color: var(--falling); } /* ---------------------------------- Responsive ------------------------------ */ @media (max-width: 560px) { .hero-temp { font-size: 2.8rem; } .hero-icon { font-size: 2.4rem; } }