/* ============================================================ atmosphere.css — Dynamic sky based on time + weather (Bozen). PHP injects palette via + adds classes: .phase-{x}, .weather-{y}, .is-day | .is-night ============================================================ */ :root { /* Defaults — overridden inline on by Atmosphere::bodyStyle() */ --sky-1: #cfe8f0; --sky-2: #f5e4c8; --sky-3: rgba(255, 220, 180, 0.45); --sky-4: rgba(80, 150, 200, 0.20); --ink-on-sky: #111; --weather-tint: transparent; --weather-blur: 0px; --weather-desat: 1; /* Short enough for a snappy light/dark theme switch, still smooth for the (rare) sky-phase cross-fade on SPA navigation. */ --sky-transition: 0.55s cubic-bezier(.4, 0, .2, 1); } /* The body itself only carries the fallback colour stop; actual painting lives in ::before/::after layers + #fx-canvas. */ body.atmosphere { background: var(--sky-2); transition: background var(--sky-transition); } /* Layer 1 — main sky gradient (BG image fades in for day phases, pure gradient for dawn/dusk/night so it actually shows the palette). */ body.atmosphere::after { content: ""; position: fixed; inset: 0; background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 100%); z-index: -2; pointer-events: none; filter: saturate(var(--weather-desat)) blur(var(--weather-blur)); transition: filter var(--sky-transition), background var(--sky-transition); } /* Day phases keep the clouds.jpg as a soft layer over the gradient so it doesn't lose the postcard look. Night phases drop it for clean deep-sky colours. */ body.atmosphere.phase-morning::after, body.atmosphere.phase-day::after, body.atmosphere.phase-golden-hour::after { background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 100%), url("/assets/backgrounds/clouds.jpg") center/cover no-repeat; background-blend-mode: soft-light, normal; } /* Layer 2 — radial glow accents + weather tint overlay */ body.atmosphere::before { content: ""; position: fixed; inset: 0; background: radial-gradient(60% 50% at 50% 60%, var(--sky-3), transparent 75%), radial-gradient(50% 40% at 80% 15%, var(--sky-4), transparent 70%), var(--weather-tint); pointer-events: none; z-index: -1; transition: background var(--sky-transition); } /* ---- Particle canvas mood: brighten on day, dim on night ---- */ body.atmosphere.is-night #fx-canvas { opacity: 0.55; } body.atmosphere.is-day #fx-canvas { opacity: 0.85; } /* ---- Weather class hooks for JS (weather-fx.js targets these) ---- */ body.atmosphere.weather-rain .weather-canvas, body.atmosphere.weather-snow .weather-canvas, body.atmosphere.weather-fog .weather-canvas, body.atmosphere.weather-thunder .weather-canvas { display: block; } .weather-canvas { display: none; position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; mix-blend-mode: screen; } /* Thunder: occasional white flash overlay */ body.atmosphere.weather-thunder::before { animation: thunder-flash 9s ease-in-out infinite; } @keyframes thunder-flash { 0%, 90%, 100% { filter: none; } 91%, 92% { filter: brightness(1.6) saturate(1.2); } 93% { filter: brightness(0.9); } 94% { filter: brightness(1.4); } } /* ---- Night-phase ink adjustments — keep readability on dark sky ---- */ body.atmosphere.is-night { color-scheme: dark; } body.atmosphere.is-night .vdb-topbar-brand { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.35); box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25); } body.atmosphere.is-night .vdb-topbar-signe img { /* SIGNE stays black inside its circle on night sky too */ filter: brightness(0) invert(1); } body.atmosphere.is-night .vdb-footer-nav { background: rgba(0, 0, 0, 0.35); border-color: rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.85); } body.atmosphere.is-night .vdb-footer-nav a { color: rgba(255, 255, 255, 0.85); } body.atmosphere.is-night .vdb-footer-nav a:hover { color: #fff; } /* Lang switcher dark-mode tweak */ body.atmosphere.is-night .lang-switch button { color: rgba(255, 255, 255, 0.72); } body.atmosphere.is-night .lang-switch button:hover { color: #fff; } body.atmosphere.is-night .lang-switch button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.85); color: #000; } /* Glass card itself stays bright/cream on night for readability — we don't want a dark login form. Optional subtle inversion for hero. */ body.atmosphere.is-night .hero-card, body.atmosphere.is-night .auth-card { background: rgba(255, 255, 255, 0.62); border-color: rgba(255, 255, 255, 0.85); } /* ---- Reduced motion: still transition colours but slowly, no flashes ---- */ @media (prefers-reduced-motion: reduce) { body.atmosphere::after, body.atmosphere::before { transition: none; } body.atmosphere.weather-thunder::before { animation: none; } }