/* ═══════════════════════════════════════════════════════════ Jibbenbar Weather Station — Dashboard Stylesheet Dark sky theme · Barlow Condensed + Barlow ═══════════════════════════════════════════════════════════ */ :root { /* Backgrounds */ --bg-page: #0d1520; --bg-card: #121e2e; --bg-card-alt: #162336; --bg-header: #0a1018; /* Category accent colours */ --c-temp: #f97316; /* orange — temperature */ --c-rain: #38bdf8; /* sky — rain */ --c-wind: #a3e635; /* lime — wind */ --c-sky: #c084fc; /* violet — sky / moon */ --c-pressure: #34d399; /* emerald — pressure */ --c-records: #fbbf24; /* amber — records */ /* Text */ --text-primary: #e8edf3; --text-secondary: #7a90a8; --text-less-dim: #7a90a8; --text-dim: #4a607a; /* Borders */ --border: rgba(255,255,255,0.07); --border-mid: rgba(255,255,255,0.12); /* Misc */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --shadow-card: 0 4px 24px rgba(0,0,0,0.45); --transition: 0.2s ease; } /* ═══════════════════════════════════════════════════════════ LIGHT MODE Only overrides variables — all layout/component rules above continue to work unchanged via var() references. Toggled by adding class="light" to . ═══════════════════════════════════════════════════════════ */ body.light { --bg-page: #edf1f7; --bg-card: #ffffff; --bg-card-alt: #f3f6fb; --bg-header: #ffffff; --text-primary: #1c2e3e; --text-secondary: #56789a; --text-less-dim: #4a6a88; --text-dim: #9ab4cc; --border: rgba(0,0,0,0.08); --border-mid: rgba(0,0,0,0.14); --shadow-card: 0 2px 12px rgba(0,0,0,0.07); } /* These two rules use hardcoded rgba — need explicit light overrides */ body.light .stat-row:hover { background: rgba(0,0,0,0.025); } body.light .webcam-wrap { background: #f3f6fb; } /* ─── Theme toggle button ───────────────────────────────── */ .theme-toggle { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-mid); background: var(--bg-card-alt); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; flex-shrink: 0; transition: color var(--transition), background var(--transition), border-color var(--transition); } .theme-toggle:hover { color: var(--text-primary); } /* In dark mode show the sun (click = go light). In light mode show the moon (click = go dark). */ body:not(.light) .theme-icon-moon { display: none; } body.light .theme-icon-sun { display: none; } /* ─── Reset ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: 'Barlow', system-ui, sans-serif; background-color: var(--bg-page); color: var(--text-primary); min-height: 100vh; line-height: 1.5; /* subtle noise texture */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"); } /* ─── Layout container ───────────────────────────────────── */ .container { max-width: 1280px; margin: 0 auto; padding: 0 16px 48px; } /* ═══════════════════════════════════════════════════════════ HEADER ═══════════════════════════════════════════════════════════ */ .site-header { background: var(--bg-header); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); } .header-inner { max-width: 1280px; margin: 0 auto; padding: 0 16px; height: 56px; display: flex; align-items: center; justify-content: space-between; } .station-name { font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-primary); } .station-sub { font-size: 0.75rem; color: var(--text-secondary); margin-left: 8px; letter-spacing: 0.06em; text-transform: uppercase; } .header-meta { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--text-secondary); } .update-label { text-transform: uppercase; letter-spacing: 0.05em; } .update-time { color: var(--text-primary); font-weight: 500; } /* ═══════════════════════════════════════════════════════════ HERO STRIP ═══════════════════════════════════════════════════════════ */ .hero-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin: 0 -16px 24px; background: var(--border); } .hero-tile { background: var(--bg-card); padding: 20px 16px 18px; display: flex; align-items: flex-start; gap: 14px; position: relative; overflow: hidden; transition: background var(--transition); } .hero-tile::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; } .hero-temp::before { background: var(--c-temp); } .hero-rain::before { background: var(--c-rain); } .hero-wind::before { background: var(--c-wind); } .hero-uv::before { background: var(--c-sky); } .hero-pressure::before { background: var(--c-pressure); } .hero-icon { font-size: 1.1rem; margin-top: 6px; flex-shrink: 0; opacity: 0.7; } .hero-temp .hero-icon { color: var(--c-temp); } .hero-rain .hero-icon { color: var(--c-rain); } .hero-wind .hero-icon { color: var(--c-wind); } .hero-uv .hero-icon { color: var(--c-sky); } .hero-pressure .hero-icon { color: var(--c-pressure); } .hero-value { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2rem, 4vw, 2.2rem); font-weight: 700; line-height: 1; letter-spacing: -0.01em; color: var(--text-primary); } .hero-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); margin-top: 4px; } .hero-sub { font-size: 0.9rem; color: var(--text-less-dim); margin-top: 3px; } /* ═══════════════════════════════════════════════════════════ DETAIL GRID ═══════════════════════════════════════════════════════════ */ .detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; } /* ─── Cards ──────────────────────────────────────────────── */ .card { background: var(--bg-card); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; border: 1px solid var(--border); position: relative; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius-md) var(--radius-md) 0 0; } .card--temp::before { background: var(--c-temp); } .card--rain::before { background: var(--c-rain); } .card--wind::before { background: var(--c-wind); } .card--sky::before { background: var(--c-sky); } .card--records::before { background: var(--c-records); } .card--pressure::before { background: var(--c-pressure); } .card-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--bg-card-alt); } .card-head i { font-size: 0.85rem; opacity: 0.8; } .card--temp .card-head i { color: var(--c-temp); } .card--rain .card-head i { color: var(--c-rain); } .card--wind .card-head i { color: var(--c-wind); } .card--sky .card-head i { color: var(--c-sky); } .card--records .card-head i { color: var(--c-records); } .card--pressure .card-head i { color: var(--c-pressure); } .card-head h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); } /* ─── Stat list ──────────────────────────────────────────── */ .stat-list { padding: 12px 0; } .stat-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 18px; gap: 12px; transition: background var(--transition); } .stat-row:hover { background: rgba(255,255,255,0.03); } .stat-row--major { padding: 10px 18px 8px; margin-bottom: 2px; } .stat-row--major .sl-value { font-family: 'Barlow Condensed', sans-serif; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; } .sl-label { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; } .sl-value { font-size: 0.9rem; font-weight: 500; color: var(--text-primary); text-align: right; } .sl-muted { color: var(--text-secondary); } .card-divider { height: 1px; background: var(--border); margin: 6px 18px; } /* ═══════════════════════════════════════════════════════════ SECTION BLOCKS (forecast, charts, webcam) ═══════════════════════════════════════════════════════════ */ .section-block { background: var(--bg-card); border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: var(--shadow-card); margin-bottom: 24px; overflow: hidden; } .section-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--bg-card-alt); } .section-head i { font-size: 0.85rem; color: var(--text-secondary); } .section-head h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); } /* ─── Forecast widget overrides ──────────────────────────── */ .section-block .wf-widget { padding: 16px 20px; color: var(--text-primary); } .section-block .wf-card { background: var(--bg-card-alt); border-color: var(--border-mid); color: var(--text-primary); } .section-block .wf-date { color: var(--text-secondary); } .section-block .wf-min { color: var(--text-dim); } .section-block .wf-rain { color: var(--text-secondary); } .section-block .wf-card.wf-today { background: linear-gradient(145deg, #1e3a5f 0%, #1e4d8c 100%); border-color: #2563eb; } /* ═══════════════════════════════════════════════════════════ TABS ═══════════════════════════════════════════════════════════ */ .tab-bar { display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tab-bar::-webkit-scrollbar { display: none; } .tab-btn { font-family: 'Barlow', sans-serif; font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 16px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); cursor: pointer; white-space: nowrap; transition: color var(--transition), border-color var(--transition); margin-bottom: -1px; } .tab-btn:hover { color: var(--text-primary); } .tab-btn.active { color: var(--c-rain); border-bottom-color: var(--c-rain); } .tab-content { position: relative; } .tab-pane { display: none; padding: 12px 16px 16px; } .tab-pane.active { display: block; } .chart-wrap { width: 100%; height: 420px; } /* ═══════════════════════════════════════════════════════════ WEBCAM ═══════════════════════════════════════════════════════════ */ .webcam-wrap { width: 100%; background: #070d14; padding: 16px 20px; } .webcam-wrap img { width: 100%; border-radius: var(--radius-sm); display: block; } /* ═══════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════ */ .site-footer { text-align: center; padding: 20px; font-size: 0.75rem; color: var(--text-dim); border-top: 1px solid var(--border); letter-spacing: 0.05em; } /* ═══════════════════════════════════════════════════════════ WIND ROSE ═══════════════════════════════════════════════════════════ */ #wind-rose { width: 100%; height: 420px; } /* ═══════════════════════════════════════════════════════════ RESPONSIVE — TABLET (≤ 1024px) ═══════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .hero-strip { grid-template-columns: repeat(3, 1fr); } .hero-tile:nth-child(4), .hero-tile:nth-child(5) { /* stays on second row */ } .detail-grid { grid-template-columns: repeat(2, 1fr); } } /* ═══════════════════════════════════════════════════════════ RESPONSIVE — MOBILE (≤ 640px) ═══════════════════════════════════════════════════════════ */ @media (max-width: 640px) { .container { padding: 0 0 40px; } /* Header */ .header-inner { padding: 0 12px; } .station-sub { display: none; } /* Hero — 2 columns on small phones, fills nicely */ .hero-strip { grid-template-columns: repeat(2, 1fr); margin: 0 0 16px; } /* Make pressure tile span full width as 5th tile */ .hero-pressure { grid-column: span 2; } .hero-value { font-size: 2.2rem; } /* Detail cards — single column */ .detail-grid { grid-template-columns: 1fr; gap: 8px; padding: 0 12px; margin-bottom: 16px; } /* Section blocks */ .section-block { margin: 0 0 16px; border-radius: 0; border-left: none; border-right: none; } .section-block .wf-widget { padding: 12px; } /* Charts smaller on mobile */ .chart-wrap { height: 300px; } #wind-rose { height: 300px; } /* Tab bar scrolls */ .tab-btn { font-size: 0.72rem; padding: 10px 12px; } .webcam-wrap { padding: 12px; } /* Stat rows tighter on mobile */ .stat-row { padding: 5px 14px; } .card-head { padding: 12px 14px; } .card-divider { margin: 4px 14px; } } /* ═══════════════════════════════════════════════════════════ PLOTLY dark theme overrides ═══════════════════════════════════════════════════════════ */ .js-plotly-plot .plotly .bg { fill: transparent !important; } /* ═══════════════════════════════════════════════════════════ Animations ═══════════════════════════════════════════════════════════ */ @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .hero-tile { animation: fadeIn 0.4s ease both; } .card { animation: fadeIn 0.4s ease both; } .hero-tile:nth-child(1) { animation-delay: 0.05s; } .hero-tile:nth-child(2) { animation-delay: 0.10s; } .hero-tile:nth-child(3) { animation-delay: 0.15s; } .hero-tile:nth-child(4) { animation-delay: 0.20s; } .hero-tile:nth-child(5) { animation-delay: 0.25s; }