/* WeatherPower Christmas 2025 – global theme overrides This is designed to be safe everywhere and only applies when has the class "christmas". */ :root { --xmas-green: #22c55e; --xmas-red: #ef4444; --xmas-gold: #facc15; --xmas-snow: #e5f2ff; } body.christmas { /* Keep existing backgrounds but add a subtle festive tint */ box-shadow: inset 0 0 0 9999px rgba(15,23,42,0.65); } /* General glass cards on the homepage / dashboards */ body.christmas .glass, body.christmas .card, body.christmas .panel, body.christmas .section, body.christmas .wp-card { border-radius: 18px !important; border: 1px solid rgba(248,250,252,0.16) !important; background: linear-gradient(145deg, rgba(15,23,42,0.96), rgba(15,23,42,0.92)), radial-gradient(circle at top left, rgba(34,197,94,0.18), transparent 55%), radial-gradient(circle at bottom right, rgba(239,68,68,0.14), transparent 60%) !important; box-shadow: 0 20px 40px rgba(15,23,42,0.9), 0 0 0 1px rgba(15,23,42,0.9); } /* Buttons */ body.christmas button, body.christmas .button, body.christmas .btn, body.christmas [role="button"], body.christmas input[type="button"], body.christmas input[type="submit"] { border-radius: 999px; border: 1px solid rgba(248,250,252,0.45); background-image: linear-gradient(135deg,#16a34a,#22c55e); color: #ecfdf5; text-shadow: 0 1px 2px rgba(0,0,0,0.35); box-shadow: 0 0 18px rgba(22,163,74,0.75); } body.christmas button:hover, body.christmas .button:hover, body.christmas .btn:hover, body.christmas [role="button"]:hover, body.christmas input[type="button"]:hover, body.christmas input[type="submit"]:hover { filter: brightness(1.05); transform: translateY(-0.5px); box-shadow: 0 6px 20px rgba(22,163,74,0.8); } body.christmas button:disabled, body.christmas .btn:disabled { opacity: 0.6; box-shadow: none; } /* Warning / WeWatch drawer (radar.html) */ body.christmas #wpw-drawer { border-width: 2px; border-style: solid; border-color: transparent; border-image: linear-gradient(135deg,#ef4444,#f97316,#facc15,#22c55e,#22d3ee) 1; box-shadow: 0 24px 45px rgba(15,23,42,0.95), 0 0 28px rgba(252,211,77,0.28); } body.christmas #wpw-drawer .bar { background: linear-gradient(90deg,#ef4444,#f97316,#facc15,#22c55e,#22d3ee); } /* Chips in the warning drawer */ body.christmas #wpw-drawer .chip.red { background: rgba(239,68,68,0.18); border-color: rgba(239,68,68,0.6); } body.christmas #wpw-drawer .chip.gold { background: rgba(250,204,21,0.16); border-color: rgba(250,204,21,0.55); } body.christmas #wpw-drawer .chip.blue { background: rgba(56,189,248,0.16); border-color: rgba(56,189,248,0.55); } /* Christmas banner used by christmas.js */ #wp-christmas-banner { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 3000; max-width: min(620px, 96vw); pointer-events: auto; } #wp-christmas-banner-inner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: radial-gradient(circle at top left, rgba(34,197,94,0.24), rgba(15,23,42,0.98)); border: 1px solid rgba(248,250,252,0.4); box-shadow: 0 20px 40px rgba(15,23,42,0.95), 0 0 30px rgba(34,197,94,0.5); color: #e5f2ff; font-size: 13px; } #wp-christmas-banner-text span.label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; display: block; opacity: 0.9; } #wp-christmas-banner-text span.msg { font-size: 13px; font-weight: 600; } #wp-christmas-banner button.close { border-radius: 999px; border: 1px solid rgba(248,250,252,0.4); background: rgba(15,23,42,0.9); color: #e5e7eb; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 12px rgba(15,23,42,0.8); } /* Floating Christmas toggle button */ .christmas-toggle { position: fixed; right: 12px; bottom: 16px; z-index: 2800; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(148,163,184,0.7); background: radial-gradient(circle at top, rgba(34,197,94,0.9), rgba(15,23,42,0.98)); color: #f9fafb; display: grid; place-items: center; font-size: 20px; cursor: pointer; box-shadow: 0 12px 30px rgba(15,23,42,0.9), 0 0 16px rgba(34,197,94,0.9); } .christmas-toggle[aria-pressed="true"] { box-shadow: 0 0 26px rgba(34,197,94,0.95), 0 0 10px rgba(250,204,21,0.9); } /* Simple global snow overlay */ body.christmas .xmas-snow-layer { pointer-events: none; position: fixed; inset: 0; overflow: hidden; z-index: 2600; } body.christmas .xmas-snowflake { position: absolute; top: -10px; color: #e5f2ff; opacity: 0.8; font-size: 10px; text-shadow: 0 0 8px rgba(15,23,42,0.8); animation-name: xmas-snowfall; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes xmas-snowfall { 0% { transform: translate3d(0, -10px, 0); } 100% { transform: translate3d(20px, 110vh, 0); } } /* Slightly brighter hourly strips on the home/hourly page */ body.christmas .hourly .chip, body.christmas .hourly-chip { background: radial-gradient(circle at top, rgba(34,197,94,0.16), rgba(15,23,42,0.96)); border: 1px solid rgba(34,197,94,0.5); } /* Stream overlay (weatherpower-stream.html) tweaks */ body.christmas .overlay-root { /* very subtle green/red glow */ box-shadow: inset 0 0 0 1px rgba(148,163,184,0.4), 0 0 60px rgba(34,197,94,0.35), 0 0 40px rgba(248,113,113,0.35); } body.christmas .music-strip { border-color: rgba(34,197,94,0.7); box-shadow: 0 0 22px rgba(34,197,94,0.9); } body.christmas .webot-strip { border-color: rgba(250,204,21,0.7); } /* Overlay control panel (overlay-control.html) */ body.christmas .card, body.christmas .panel-main { border-radius: 18px; box-shadow: 0 20px 40px rgba(15,23,42,0.9), 0 0 0 1px rgba(15,23,42,0.9); } body.christmas .top-badge, body.christmas .status-dot.ok { background: #22c55e; } body.christmas .status-dot.warn { background: #f97316; } body.christmas .status-dot.err { background: #ef4444; }