/* WindStoke Theme Variables * Dark mode (default) + Light mode * Applied via data-theme attribute on */ :root, [data-theme="dark"] { /* Page backgrounds */ --ws-bg-page: #0F172A; --ws-bg-page-secondary: #1E293B; --ws-bg-card: rgba(255, 255, 255, 0.05); --ws-bg-card-alt: rgba(255, 255, 255, 0.03); --ws-bg-card-solid: #1E293B; --ws-bg-card-hover: rgba(255, 255, 255, 0.08); --ws-bg-input: rgba(255, 255, 255, 0.05); /* Text */ --ws-text-primary: #E2E8F0; --ws-text-secondary: #94A3B8; --ws-text-muted: #64748B; --ws-text-heading: #F1F5F9; --ws-text-bright: white; /* Borders */ --ws-border-subtle: rgba(255, 255, 255, 0.06); --ws-border-default: rgba(255, 255, 255, 0.1); --ws-border-strong: rgba(255, 255, 255, 0.15); /* Surfaces */ --ws-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3); --ws-glass-bg: rgba(255, 255, 255, 0.05); --ws-glass-border: rgba(255, 255, 255, 0.1); --ws-overlay-light: rgba(255, 255, 255, 0.03); --ws-overlay-medium: rgba(255, 255, 255, 0.05); --ws-overlay-strong: rgba(255, 255, 255, 0.08); /* Header/Nav */ --ws-nav-bg: rgba(15, 23, 42, 0.98); --ws-header-bg: rgba(15, 23, 42, 0.95); /* Modal */ --ws-modal-bg: #1E293B; /* Toggle */ --ws-toggle-bg: #334155; /* Scrollbar */ --ws-scrollbar-track: rgba(255, 255, 255, 0.05); --ws-scrollbar-thumb: rgba(255, 255, 255, 0.15); /* Live page card body (dark theme native) */ --ws-live-card-bg: rgba(255, 255, 255, 0.03); --ws-live-card-text: var(--ws-text-primary); --ws-live-card-text-muted: var(--ws-text-muted); --ws-live-card-text-dark: var(--ws-text-bright); --ws-live-card-border: rgba(255, 255, 255, 0.08); --ws-live-card-surface: rgba(255, 255, 255, 0.04); --ws-live-card-white: rgba(255, 255, 255, 0.03); } [data-theme="light"] { /* Page backgrounds */ --ws-bg-page: #F8FAFC; --ws-bg-page-secondary: #F1F5F9; --ws-bg-card: #FFFFFF; --ws-bg-card-alt: #FFFFFF; --ws-bg-card-solid: #FFFFFF; --ws-bg-card-hover: #F8FAFC; --ws-bg-input: #F1F5F9; /* Text */ --ws-text-primary: #1E293B; --ws-text-secondary: #64748B; --ws-text-muted: #94A3B8; --ws-text-heading: #0F172A; --ws-text-bright: #0F172A; /* Borders */ --ws-border-subtle: #E2E8F0; --ws-border-default: #CBD5E1; --ws-border-strong: #94A3B8; /* Surfaces */ --ws-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); --ws-glass-bg: rgba(255, 255, 255, 0.8); --ws-glass-border: #E2E8F0; --ws-overlay-light: rgba(0, 0, 0, 0.02); --ws-overlay-medium: rgba(0, 0, 0, 0.04); --ws-overlay-strong: rgba(0, 0, 0, 0.06); /* Header/Nav */ --ws-nav-bg: rgba(255, 255, 255, 0.95); --ws-header-bg: rgba(255, 255, 255, 0.95); /* Modal */ --ws-modal-bg: #FFFFFF; /* Toggle */ --ws-toggle-bg: #CBD5E1; /* Scrollbar */ --ws-scrollbar-track: #F1F5F9; --ws-scrollbar-thumb: #CBD5E1; /* Live page card body */ --ws-live-card-bg: #FFFFFF; --ws-live-card-text: #1E293B; --ws-live-card-text-muted: #64748B; --ws-live-card-text-dark: #0F172A; --ws-live-card-border: #E2E8F0; --ws-live-card-surface: linear-gradient(135deg, #F8FAFC, #F1F5F9); --ws-live-card-white: white; } /* Light mode background — visible gradient + ambient glow */ [data-theme="light"] body { background: linear-gradient(135deg, #FFFFFF 0%, #EFF6FF 35%, #F0FDFA 65%, #F8FAFC 100%); } [data-theme="light"] body::before { background: radial-gradient(ellipse at 15% 15%, rgba(14, 165, 233, 0.12) 0%, transparent 55%), radial-gradient(ellipse at 85% 85%, rgba(20, 184, 166, 0.09) 0%, transparent 55%); } /* Light mode bottom nav */ [data-theme="light"] .ws-bottom-nav { background: rgba(255, 255, 255, 0.95); border-top-color: rgba(203, 213, 225, 0.5); } /* Safe-area gap fill — light mode */ [data-theme="light"] body::after { background: #F8FAFC; } /* Light mode logo text */ [data-theme="light"] .ws-logo-text { color: #0F172A; } /* Light mode header buttons */ [data-theme="light"] .ws-stoke-btn { background: rgba(0, 0, 0, 0.04); border-color: var(--ws-border-default); } [data-theme="light"] .ws-stoke-btn:hover { background: rgba(0, 0, 0, 0.08); } [data-theme="light"] .ws-stoke-btn .session-count { color: #0F172A; } /* Light mode toast */ [data-theme="light"] .ws-toast { background: #FFFFFF; border-color: var(--ws-border-default); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } [data-theme="light"] .ws-toast-message { color: #1E293B; } /* Form select options in light mode */ [data-theme="light"] .form-select option { background: #FFFFFF; color: #1E293B; } [data-theme="light"] .model-select option, [data-theme="light"] .wave-select option { background: #FFFFFF; color: #1E293B; } /* Light mode table headers */ [data-theme="light"] .data-table th { background: linear-gradient(135deg, #E2E8F0, #F1F5F9); color: #0F172A; } /* Light mode responsive menu bg */ [data-theme="light"] .site-nav-links.show { background: #FFFFFF; } /* ========================================== LIGHT MODE — DASHBOARD ELEMENTS ========================================== */ /* Modal */ [data-theme="light"] .modal-content { background: var(--ws-modal-bg); } /* Wizard overlay */ [data-theme="light"] .wizard-overlay { background: rgba(248, 250, 252, 0.98); } /* Location search results */ [data-theme="light"] .location-results { background: #FFFFFF; } /* Note popover */ [data-theme="light"] .note-popover { background: rgba(255, 255, 255, 0.98); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } /* Skeleton shimmer */ [data-theme="light"] .skeleton-line { background: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 25%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.04) 75%); background-size: 200% 100%; } /* Past week day */ [data-theme="light"] .week-day.past { background: rgba(241, 245, 249, 0.8); } /* ========================================== LIGHT MODE — FORECAST ELEMENTS ========================================== */ /* Location card — crisp white card with subtle depth */ [data-theme="light"] .location-card { background: #FFFFFF; backdrop-filter: none; border-color: rgba(14, 165, 233, 0.08); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(14, 165, 233, 0.04); } /* Location header — subtle gradient with brand color tint */ [data-theme="light"] .location-header { background: linear-gradient(135deg, #FFFFFF, #F0F9FF); border-bottom: 1px solid #E2E8F0; } /* Day header cells — frosted glass with brand tint */ [data-theme="light"] .day-header-cell { background: linear-gradient(180deg, #EFF6FF, #F8FAFC); border-left: 3px solid #E2E8F0; border-bottom-color: #CBD5E1; color: #334155; } [data-theme="light"] .day-header-cell.today { background: linear-gradient(180deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.03)); } /* Hours cells — clean white with whisper-thin separators */ [data-theme="light"] .hours-cell { background: #FFFFFF; border-left: 3px solid #E2E8F0; } /* Bar track — soft inset look */ [data-theme="light"] .bar-container { background: linear-gradient(180deg, #E2E8F0, #EFF2F6); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06); } /* Bar glow effects — slightly reduced for light bg */ [data-theme="light"] .bar-fill.good { box-shadow: 0 0 8px rgba(16, 185, 129, 0.35), 0 0 16px rgba(16, 185, 129, 0.15); } [data-theme="light"] .bar-fill.marginal { box-shadow: 0 0 4px rgba(251, 191, 36, 0.2); } /* Wind arrow text shadow — lighter for white bg */ [data-theme="light"] .wind-arrow { text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8); } /* Accuracy details */ [data-theme="light"] .accuracy-details { background: linear-gradient(135deg, #F8FAFC, #F0F9FF); border-color: #E2E8F0; } /* Row label sticky cell — clean with refined shadow */ [data-theme="light"] .row-label-cell { box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05); border-right-color: #E2E8F0; } /* Timeline scrollbar — brand-colored to match dark mode */ [data-theme="light"] .timeline-container { scrollbar-color: #0EA5E9 #F1F5F9; } /* AVG toggle dot + legend line (white-on-white fix) */ [data-theme="light"] .toggle-dot.avg { background: #1E293B; } [data-theme="light"] .legend-line.avg { background: #1E293B; } /* Location type badge — slightly stronger on light */ [data-theme="light"] .location-type-badge { background: rgba(14, 165, 233, 0.1); } /* Comparison chart container */ [data-theme="light"] .comparison-chart-container { border-color: #E2E8F0; }