/* Basic body styling */ /* The drifting gradient used to live on as an animated background-position. background-position is a paint property, so it could never be composited — it repainted the entire viewport every frame, forever. Same motion, expressed as a transform on an oversized fixed layer, runs on the GPU instead. Geometry mirrors the original `background-size: 400% 400%`: a layer 4x the viewport, offset -150vh so it sits vertically centred (the old `50%`), sliding from 0 to -300vw and back (the old `0%` -> `100%` horizontal sweep). */ @keyframes gradientShift { 0% { transform: translate3d(0, -150vh, 0); } 50% { transform: translate3d(-300vw, -150vh, 0); } 100% { transform: translate3d(0, -150vh, 0); } } body { font-family: 'Inter', sans-serif; transition: background-color 0.8s ease; } body::before { content: ''; position: fixed; top: 0; left: 0; width: 400vw; height: 400vh; z-index: -1; pointer-events: none; background: linear-gradient(45deg, #000000, #1a1a2e, #16213e, #0f172a); animation: gradientShift 15s ease infinite; will-change: transform; } /* Header Styling */ #header-bg { opacity: 0.92; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background 0.8s ease-in-out, opacity 0.5s; } /* Toggle Switch Styles */ .toggle-label { display: block; overflow: hidden; width: 2.5rem; height: 1.5rem; border-radius: 9999px; background: linear-gradient(135deg, #94a3b8, #64748b); cursor: pointer; position: relative; transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); } .toggle-label:hover { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 12px rgba(147, 197, 253, 0.4); } .toggle-checkbox { appearance: none; display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: linear-gradient(135deg, #ffffff, #f1f5f9); border: none; cursor: pointer; position: absolute; top: 0; left: 0; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s ease, box-shadow 0.4s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1); } .toggle-checkbox:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15); } .toggle-checkbox:checked { transform: translateX(1rem); background: linear-gradient(135deg, #4ade80, #22c55e); box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4), 0 1px 2px rgba(0, 0, 0, 0.1); } .toggle-checkbox:checked:hover { box-shadow: 0 4px 12px rgba(34, 197, 94, 0.5), 0 2px 4px rgba(0, 0, 0, 0.15); } .toggle-label:has(+ .toggle-checkbox:checked) { background: linear-gradient(135deg, #22c55e, #16a34a); } /* Unit Label Animations */ .unit-label { opacity: 0.6; transform: scale(0.95); text-shadow: none; } .unit-f { opacity: 1; transform: scale(1.1); text-shadow: 0 0 8px rgba(255, 255, 255, 0.5); } .toggle-wrapper:has(.toggle-checkbox:checked) ~ .unit-c { opacity: 1; transform: scale(1.1); text-shadow: 0 0 8px rgba(74, 222, 128, 0.6); } .toggle-wrapper:has(.toggle-checkbox:checked) + .unit-c { opacity: 1; transform: scale(1.1); text-shadow: 0 0 8px rgba(74, 222, 128, 0.6); } :has(.toggle-checkbox:checked) .unit-f { opacity: 0.6; transform: scale(0.95); text-shadow: none; } /* Loading Spinner */ @keyframes spin { to { transform: rotate(360deg); } } .spinner { border: 4px solid rgba(0, 0, 0, 0.1); width: 36px; height: 36px; border-radius: 50%; border-left-color: #0ea5e9; animation: spin 1s linear infinite; margin: 2rem auto; } /* Error Message */ .error-message { background-color: #fee2e2; color: #b91c1c; padding: 0.75rem 1rem; border-radius: 0.5rem; text-align: center; margin-top: 1rem; font-size: 0.875rem; } /* Centered Message Container */ .centered-message-container { display: flex; justify-content: center; align-items: center; min-height: 100px; } /* Hourly/Daily Grid Card Styles */ .hourly-grid-card, .daily-grid-card { min-height: 130px; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.3s ease; position: relative; cursor: pointer; } .hourly-grid-card:hover, .daily-grid-card:hover { transform: scale(1.05); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } /* Temperature Indicator Bar */ .temp-indicator-bar { height: 4px; width: 60%; margin: 0.25rem auto 0; border-radius: 9999px; transition: background-color 0.3s ease; } /* Click Indicator Icon */ .click-indicator { position: absolute; top: 0.5rem; right: 0.5rem; width: 1.25rem; height: 1.25rem; color: #9ca3af; opacity: 0.6; transition: opacity 0.2s ease; } .daily-grid-card:hover .click-indicator { opacity: 1; } /* Header transition */ #header-bg { transition: background 0.8s ease-in-out; } /* Content Section Styling & Animation */ /* No backdrop-filter here: at 2px behind an 85%-opaque background it was imperceptible, but because the clouds behind it never stop moving the browser could never cache the blur — it recomputed across four full-width surfaces every frame. The header keeps its 4px, where the effect is actually visible. `position: relative; z-index: 1` is load-bearing, not decoration. #weather-effects-container is body's first child at `position: fixed; z-index: 0` with an opaque background, so it paints in the positioned layer. backdrop-filter used to force a stacking context here, which lifted these panels into that same layer, after the overlay in tree order. Without it they fall back to the in-flow layer and the overlay paints straight over them — panels, headings and all. This restores the ordering explicitly and for free. */ .content-section { position: relative; z-index: 1; opacity: 0; transition: opacity 0.6s ease-in-out, background-color 0.8s ease, border-color 0.8s ease; background-color: rgba(255, 255, 255, 0.8); border: 1px solid transparent; } .content-section.loaded { opacity: 1; } /* Theme-specific text colors */ .dark-theme .content-section h2 { color: #cbd5e1; } .dark-theme .content-section { color: #e2e8f0; } .light-theme .content-section h2 { color: #1e3a8a; } .light-theme .content-section { color: #1f2937; } /* Theme-specific card backgrounds/text */ .light-theme .hourly-grid-card { background-color: rgba(249, 250, 251, 0.8); color: #1f2937; } .light-theme .daily-grid-card { background-color: rgba(249, 250, 251, 0.8); color: #1f2937; } .dark-theme .hourly-grid-card { background-color: rgba(71, 85, 105, 0.6); color: #e2e8f0; } .dark-theme .daily-grid-card { background-color: rgba(71, 85, 105, 0.6); color: #e2e8f0; } .dark-theme .click-indicator { color: #6b7280; } /* Modal Styles (Shared by Daily and Map Modals) */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 1000; } .modal-overlay.open { opacity: 1; visibility: visible; } .modal { background-color: white; padding: 1.5rem; border-radius: 0.75rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); max-width: 90%; width: 500px; /* Default width for daily modal */ position: relative; transform: scale(0.95); transition: transform 0.3s ease; } .modal-overlay.open .modal { transform: scale(1); } .modal-close { position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #6b7280; } .modal-close:hover { color: #1f2937; } /* Dark theme modal adjustments */ .dark-theme .modal { background-color: #374151; color: #e5e7eb; } .dark-theme .modal-close { color: #9ca3af; } .dark-theme .modal-close:hover { color: #f3f4f6; } .dark-theme .modal h3 { color: #f9fafb; } .dark-theme .modal dt { color: #d1d5db; } .dark-theme .modal dd { color: #f3f4f6; } /* Modal Content Styling */ .modal dt { font-weight: 600; color: #4b5563; } .modal dd { color: #1f2937; margin-left: 0; margin-bottom: 0.5rem; } /* Specific styles for Map and Radar Modals */ #map-modal, #radar-modal { width: 90vw; max-width: 700px; height: 80vh; max-height: 600px; padding: 0.5rem; } #leaflet-map, #radar-map-container { height: calc(100% - 40px); width: 100%; border-radius: 0.5rem; } .map-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; } /* Historical Data Section Styles */ .historical-summary-item { margin-bottom: 0.5rem; } .historical-summary-item dt { font-weight: 600; } .historical-summary-item dd { margin-left: 0.5rem; } /* Historical Chart Container */ #historical-chart-container { position: relative; height: 300px; width: 100%; margin-top: 1rem; } /* Button styling for active toggle */ .toggle-active, .preset-btn.active { background-color: #3b82f6 !important; color: white !important; border-color: #2563eb !important; } .preset-btn { background-color: #e5e7eb; color: #374151; border: 1px solid #d1d5db; } .dark-theme .preset-btn { background-color: #4b5563; color: #e5e7eb; border-color: #374151; } .dark-theme .preset-btn.active { background-color: #3b82f6 !important; color: white !important; border-color: #2563eb !important; } /* Map Pin & Radar Icon Button */ #map-pin-btn, #radar-btn { background: none; border: none; padding: 0.5rem; cursor: pointer; color: #6b7280; /* text-gray-500 */ } #map-pin-btn:hover, #radar-btn:hover { color: #1d4ed8; /* text-blue-700 */ } .dark-theme #map-pin-btn, .dark-theme #radar-btn { color: #9ca3af; } .dark-theme #map-pin-btn:hover, .dark-theme #radar-btn:hover { color: #60a5fa; /* text-blue-400 */ }