body { background: radial-gradient(ellipse at 20% 0%, rgba(124,58,237,0.20) 0%, transparent 50%), radial-gradient(ellipse at 80% 30%, rgba(56,189,248,0.15) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, rgba(244,114,182,0.10) 0%, transparent 50%), linear-gradient(135deg, #020617 0%, #0f172a 50%, #1e1b4b 100%) !important; background-attachment: fixed !important; background-size: cover !important; transition: background 1.2s ease !important; } /* Weather-aware backgrounds — class set by custom.js on based on openmeteo info widget text. */ html.weather-clear body, body.weather-clear { background: radial-gradient(ellipse at 30% -10%, rgba(251,191,36,0.30) 0%, transparent 45%), radial-gradient(ellipse at 80% 30%, rgba(56,189,248,0.20) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, rgba(244,114,182,0.10) 0%, transparent 50%), linear-gradient(135deg, #1e3a8a 0%, #312e81 50%, #581c87 100%) !important; } html.weather-partly body, body.weather-partly { background: radial-gradient(ellipse at 30% 10%, rgba(251,191,36,0.18) 0%, transparent 45%), radial-gradient(ellipse at 70% 30%, rgba(148,163,184,0.18) 0%, transparent 50%), linear-gradient(135deg, #1e293b 0%, #334155 60%, #475569 100%) !important; } html.weather-cloudy body, body.weather-cloudy { background: radial-gradient(ellipse at 50% 0%, rgba(148,163,184,0.22) 0%, transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(71,85,105,0.20) 0%, transparent 60%), linear-gradient(180deg, #1e293b 0%, #0f172a 60%, #020617 100%) !important; } html.weather-rain body, body.weather-rain { background: radial-gradient(ellipse at 50% 0%, rgba(59,130,246,0.22) 0%, transparent 55%), radial-gradient(ellipse at 30% 80%, rgba(14,165,233,0.15) 0%, transparent 50%), linear-gradient(180deg, #0c4a6e 0%, #0f172a 55%, #020617 100%) !important; } html.weather-storm body, body.weather-storm { background: radial-gradient(ellipse at 30% 0%, rgba(168,85,247,0.30) 0%, transparent 45%), radial-gradient(ellipse at 70% 60%, rgba(99,102,241,0.20) 0%, transparent 50%), linear-gradient(180deg, #1e1b4b 0%, #0f172a 50%, #030712 100%) !important; } html.weather-snow body, body.weather-snow { background: radial-gradient(ellipse at 50% 0%, rgba(226,232,240,0.30) 0%, transparent 55%), radial-gradient(ellipse at 30% 100%, rgba(148,163,184,0.20) 0%, transparent 50%), linear-gradient(180deg, #1e293b 0%, #334155 50%, #475569 100%) !important; } html.weather-night-clear body, body.weather-night-clear { background: radial-gradient(ellipse at 80% -5%, rgba(216,180,254,0.18) 0%, transparent 45%), radial-gradient(ellipse at 20% 80%, rgba(99,102,241,0.15) 0%, transparent 50%), linear-gradient(180deg, #020617 0%, #0c1338 50%, #1e1b4b 100%) !important; } /* ---- Time-of-day overlay tints on top of weather bg ---- */ body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: transparent; transition: background 2s ease; } html.time-sunrise body::after { background: radial-gradient(ellipse at 0% 60%, rgba(251,113,133,0.18) 0%, transparent 50%), radial-gradient(ellipse at 100% 20%, rgba(251,191,36,0.14) 0%, transparent 50%); } html.time-morning body::after { background: radial-gradient(ellipse at 30% 0%, rgba(125,211,252,0.10) 0%, transparent 55%); } html.time-midday body::after { background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.06) 0%, transparent 60%); } html.time-afternoon body::after { background: radial-gradient(ellipse at 70% 10%, rgba(251,191,36,0.10) 0%, transparent 55%); } html.time-sunset body::after { background: radial-gradient(ellipse at 100% 60%, rgba(251,113,133,0.20) 0%, transparent 55%), radial-gradient(ellipse at 0% 30%, rgba(244,114,182,0.14) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, rgba(124,58,237,0.10) 0%, transparent 55%); } html.time-night body::after { background: radial-gradient(ellipse at 20% 0%, rgba(99,102,241,0.10) 0%, transparent 55%), radial-gradient(ellipse at 80% 100%, rgba(56,189,248,0.06) 0%, transparent 55%); } html.weather-fog body, body.weather-fog { background: radial-gradient(ellipse at 50% 30%, rgba(203,213,225,0.18) 0%, transparent 60%), linear-gradient(180deg, #475569 0%, #334155 50%, #1e293b 100%) !important; } /* Header sits naked on the gradient bg — no card, no border. */ #information-widgets { background: transparent !important; backdrop-filter: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0.75rem 0.5rem !important; } .bookmark-group-name, h2 { letter-spacing: 0.18em !important; text-transform: uppercase !important; font-weight: 300 !important; font-size: 0.75rem !important; opacity: 0.55; } /* Quick Actions = real buttons (last section): resting bg, prominent hover. */ .services-group:last-of-type .service > a, .services-group:last-of-type .service > div { background: rgba(30, 41, 59, 0.30) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 14px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; cursor: pointer !important; transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease !important; } .services-group:last-of-type .service > a:hover, .services-group:last-of-type .service > div:hover { background: rgba(56, 189, 248, 0.18) !important; border-color: rgba(56, 189, 248, 0.5) !important; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(56, 189, 248, 0.25) !important; } .services-group:last-of-type .service > a:active, .services-group:last-of-type .service > div:active { transform: translateY(0); background: rgba(56, 189, 248, 0.28) !important; box-shadow: 0 4px 12px rgba(56, 189, 248, 0.20) !important; } /* Bookmarks (if any return): same subtle hover. */ .bookmark > a { background: transparent !important; border: none !important; transition: opacity 0.18s ease; } .bookmark > a:hover { opacity: 0.85; } /* Calendar event rows (now 2nd section): bare on the gradient. */ .services-group:nth-of-type(2) .service > * { background: transparent !important; border: none !important; box-shadow: none !important; } /* Forecast cards (now 1st section): keep card bg for visual contrast. */ .services-group:first-of-type .service > * { background: rgba(30, 41, 59, 0.45) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(12px); border-radius: 14px !important; } .information-widget-datetime .text-xl, .information-widget-datetime .tabular-nums { font-size: 1.6rem !important; font-weight: 200 !important; letter-spacing: 0.02em; } .information-widget-openmeteo .primary-text { font-size: 1.1rem !important; font-weight: 300 !important; } .container { max-width: 1400px !important; } iframe { border-radius: 10px; border: 0; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); } /* Hide empty service header for the calendar (name is single space). */ .service-container [class*="bookmark-name"]:empty, .service-container .primary-text:empty { display: none; } /* Hide empty service header for the calendar (name is single space). */ .service-container [class*="bookmark-name"]:empty, .service-container .primary-text:empty { display: none; } /* ------- Quick Actions tiles (now LAST section) — bigger text & icons ------- */ .services-group:last-of-type .service-container a, .services-group:last-of-type .service-container > div { min-height: 130px !important; padding: 1.75rem 2rem !important; align-items: center !important; } .services-group:last-of-type .primary-text { font-size: 1.65rem !important; font-weight: 400 !important; letter-spacing: 0.01em; line-height: 1.2 !important; } .services-group:last-of-type .secondary-text { font-size: 1rem !important; opacity: 0.65; line-height: 1.35 !important; } .services-group:last-of-type img, .services-group:last-of-type svg { width: 52px !important; height: 52px !important; } /* House status pill row injected just above Quick Actions. */ .house-status { display: flex !important; align-items: center !important; gap: 0.75rem !important; margin: 0.25rem 0 1rem !important; flex-wrap: wrap !important; } .house-pill { display: inline-flex !important; align-items: center !important; gap: 0.45rem !important; padding: 0.4rem 0.9rem !important; border-radius: 999px !important; background: rgba(30, 41, 59, 0.45) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; font-size: 0.85rem !important; font-weight: 400 !important; letter-spacing: 0.01em; color: #cbd5e1; } .house-pill .dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; } .house-since { font-size: 0.75rem !important; opacity: 0.55; letter-spacing: 0.04em; } /* Quick Actions: 3-col side-by-side. */ .services-group:last-of-type ul.services-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1rem !important; } @media (max-width: 768px) { .services-group:last-of-type ul.services-list { grid-template-columns: 1fr !important; } } /* Real section wrapper is .services-group (not .service-container). Force each section to its own full-width row. */ #services > .services-group, .services-group { flex: 0 0 100% !important; max-width: 100% !important; basis: 100% !important; margin-bottom: 1rem !important; } /* Calendar: compact agenda (now 2nd section, between forecast and QA). */ .services-group:nth-of-type(2) ul.services-list { min-height: 180px !important; } /* Today (forecast) — tall row with breathing room. */ .services-group:nth-of-type(2) ul.services-list { min-height: 220px; } /* Custom 5-day forecast injected by custom.js. */ .weather-forecast { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1rem !important; padding: 0.5rem 0 !important; width: 100% !important; } .weather-forecast .day { background: rgba(30, 41, 59, 0.45) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 14px !important; padding: 1rem 0.5rem !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.35rem !important; backdrop-filter: blur(12px) !important; transition: transform 0.18s ease, border-color 0.18s ease; } .weather-forecast .day:hover { transform: translateY(-2px); border-color: rgba(56, 189, 248, 0.4) !important; } .weather-forecast .day-label { font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; opacity: 0.55 !important; font-weight: 300 !important; } .weather-forecast .day-icon { width: 72px !important; height: 72px !important; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.4)); } .weather-forecast .day-temp { font-size: 1.4rem !important; font-weight: 300 !important; line-height: 1.2; } .weather-forecast .day-temp-lo { font-size: 0.85rem !important; opacity: 0.55 !important; } .weather-forecast .day-rain { font-size: 0.85rem !important; opacity: 0.7 !important; color: #7dd3fc; } .weather-forecast .day-extra { display: flex !important; flex-direction: column !important; gap: 0.15rem !important; margin-top: 0.4rem !important; padding-top: 0.5rem !important; border-top: 1px solid rgba(255,255,255,0.08) !important; font-size: 0.78rem !important; opacity: 0.75 !important; text-align: center !important; } .weather-forecast .day-extra span:first-child { color: #fcd34d; } .weather-forecast .day-extra span:last-child { color: #c4b5fd; } @media (max-width: 768px) { .weather-forecast { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0.5rem !important; } .weather-forecast .day-icon { width: 52px !important; height: 52px !important; } .weather-forecast .day-temp { font-size: 1.1rem !important; } .weather-forecast .day { padding: 0.7rem 0.4rem !important; } } /* Slot for the injected meteocons icon above each forecast card. */ .meteocon { display: block; width: 56px; height: 56px; margin: 0 auto 0.25rem auto; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4)); } /* Canvas that draws weather particles sits behind everything. */ #weather-canvas { position: fixed !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; opacity: 0.6; } /* Illustrated weather scene — tasteful corner accent. */ #weather-scene { position: fixed !important; top: 2vh; right: 1vw; width: 28vw; max-width: 460px; height: 32vh; z-index: 1 !important; pointer-events: none !important; opacity: 0.55; filter: drop-shadow(0 18px 48px rgba(0,0,0,0.45)); } #weather-scene svg { width: 100% !important; height: 100% !important; } /* Landscape silhouette band at the bottom of viewport. SVG injected via custom.js so escaping/CORS aren't an issue. */ #weather-silhouette { position: fixed !important; left: 0; right: 0; bottom: 0; height: 32vh; z-index: 0 !important; pointer-events: none !important; } #weather-silhouette svg { width: 100% !important; height: 100% !important; display: block; } /* Homepage wraps everything in .container with class z-10 which creates a stacking context above z-0. Defeat it so our fixed decorations can paint between the body gradient and the content cards. */ .container.z-10 { z-index: auto !important; } /* Make content card bgs survive over the decorations (otherwise the text would float over weather art with no readable contrast). */ .services-group, .service-block, .bookmark-list, .information-widget-datetime, .information-widget-openmeteo, #information-widgets > div { position: relative; z-index: 2; } /* Decorations go to z-1: above body gradient bg, below content (z-2). */ #weather-canvas, #weather-scene, #weather-silhouette { z-index: 1 !important; } /* ------- Mobile tuning ------- */ @media (max-width: 768px) { /* Stack quick actions vertically on small screens */ .service-container:first-of-type > div:last-child { grid-template-columns: 1fr !important; } .service-container:first-of-type > div:last-child > div > a { min-height: 90px !important; padding: 1.1rem 1.2rem !important; } .service-container:first-of-type .primary-text { font-size: 1.2rem !important; } .service-container:first-of-type .secondary-text { font-size: 0.85rem !important; } .service-container:first-of-type img, .service-container:first-of-type svg { width: 38px !important; height: 38px !important; } .service-container > div:last-child { min-height: 280px !important; } #information-widgets { padding: 0.75rem 1rem !important; } .information-widget-datetime .text-xl, .information-widget-datetime .tabular-nums { font-size: 1.15rem !important; } .container { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } } /* User requested: hide the Lottie weather scene in the corner, keep only canvas particles + silhouette. */ #weather-scene { display: none !important; }