/* ============================================================ Weather Ambient Effects All effects scoped under [data-weather] — no-op when unavailable ============================================================ */ /* Background hue-rotation + brightness modulation */ [data-weather] body::before { filter: hue-rotate(var(--weather-hue-shift, 0deg)) brightness(var(--weather-brightness, 1)); } /* Glow modulation */ [data-weather] { --glow-scale: var(--weather-brightness, 1); } /* ── Rain Overlay ── */ .weather-rain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; opacity: 0; background: repeating-linear-gradient( 105deg, transparent, transparent 3px, rgba(120, 160, 200, 0.04) 3px, rgba(120, 160, 200, 0.04) 4px ); background-size: 100% 40px; animation: rainFall 0.6s linear infinite; } /* Only show rain in dark mode (data-weather is on ) */ html:not([data-theme="light"]) .weather-rain { opacity: 1; } html[data-theme="light"] .weather-rain { opacity: 0; } @keyframes rainFall { from { background-position: 0 0; } to { background-position: 0 40px; } } /* ── Fog Overlay ── */ [data-weather="foggy"]::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.12) 100%); } [data-theme="light"][data-weather="foggy"]::after { background: radial-gradient(ellipse at center, transparent 30%, rgba(200,200,200,0.15) 100%); } /* ── Weather Pill ── */ .weather-pill { position: relative; display: flex; align-items: center; gap: 8px; font-family: var(--font-body, 'Space Mono', monospace); font-size: 0.7rem; color: var(--text-muted); background: var(--bg-secondary, rgba(255,255,255,0.05)); border: 1px solid var(--border-color, rgba(255,255,255,0.1)); border-radius: 8px; padding: 4px 10px; white-space: nowrap; opacity: 0.8; transition: opacity 0.2s; cursor: default; } .weather-pill:hover { opacity: 1; } /* ── Hourly Bars (inline) ── */ .weather-bars { display: flex; align-items: flex-end; gap: 1px; height: 16px; } .weather-bar { width: 2px; min-height: 3px; border-radius: 1px 1px 0 0; background: var(--text-muted, #888); opacity: 0.5; transition: opacity 0.1s; } .weather-bar--past { opacity: 0.2; } .weather-bar--now { background: var(--color-accent, #39ff14); opacity: 1; } .weather-bar:hover { opacity: 1; } /* ── Hover Tooltip ── */ .weather-tip { position: absolute; bottom: calc(100% + 4px); left: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; font-size: 0.55rem; color: var(--text-muted, #999); background: var(--bg-secondary, #1a1a2e); border: 1px solid var(--border-color, rgba(255,255,255,0.1)); border-radius: 4px; padding: 2px 6px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.1s; z-index: 100; } .weather-tip--visible { opacity: 1; } .weather-tip-icon { width: 16px; height: 16px; } [data-theme="light"] .weather-tip { background: var(--bg-secondary, #f0f0f0); }