/* Seasonal decoration layer (#165): atmosphere, accent colours and background decoration only -- navigation, content and recommendations never read any of these tokens. See docs/seasonal-themes.md for the design note this implements, including which colour is which and the decoration rules per theme. How this is switched on: fragments/seasonal-theme.html sets `data-season=""` on (or removes it) before first paint, the same way fragments/theme.html already sets `data-theme`. Everything below is keyed off the combination of both attributes, and does nothing at all when data-season is absent -- the base Day/Night theme in main.css is untouched, which is what keeps the existing contrast guarantees intact (#165 AK "Alle Texte und Bedienelemente erfüllen weiterhin die bestehenden Kontrastanforderungen"). Token order matches the design note: Basis / Fläche / Text / Primär / Akzent / Deko. Basis and Fläche (--season-base, --season-surface) paint the atmosphere wash near the bottom of this file; Primär/Akzent/Deko colour the decoration motifs' strokes. Text (--season-text) is defined for every theme, matching the design note, but nothing in this codebase reads it yet -- the ticket rules out changing any actual text colour, so there has been no atmosphere-only use for it to fill. */ /* autumn */ html[data-season="autumn"][data-theme="day"] { --season-base: #F6EBDD; --season-surface: #FFF9F0; --season-text: #30231D; --season-primary: #B8572A; --season-accent: #7B3F32; --season-decor: #C69A4B; } html[data-season="autumn"][data-theme="night"] { --season-base: #17120F; --season-surface: #251A15; --season-text: #F3E7DA; --season-primary: #D9773F; --season-accent: #A64B3C; --season-decor: #C49A52; } html[data-season="autumn"][data-theme="os"] { --season-base: #F6EBDD; --season-surface: #FFF9F0; --season-text: #30231D; --season-primary: #B8572A; --season-accent: #7B3F32; --season-decor: #C69A4B; } @media (prefers-color-scheme: dark) { html[data-season="autumn"][data-theme="os"] { --season-base: #17120F; --season-surface: #251A15; --season-text: #F3E7DA; --season-primary: #D9773F; --season-accent: #A64B3C; --season-decor: #C49A52; } } /* christmas */ html[data-season="christmas"][data-theme="day"] { --season-base: #F5F2E9; --season-surface: #FFFCF5; --season-text: #1C2A23; --season-primary: #1F6B4F; --season-accent: #A8323E; --season-decor: #C9A44C; } html[data-season="christmas"][data-theme="night"] { --season-base: #0D1713; --season-surface: #15241D; --season-text: #F5F0E6; --season-primary: #3C9A6B; --season-accent: #D95A63; --season-decor: #D5B866; } html[data-season="christmas"][data-theme="os"] { --season-base: #F5F2E9; --season-surface: #FFFCF5; --season-text: #1C2A23; --season-primary: #1F6B4F; --season-accent: #A8323E; --season-decor: #C9A44C; } @media (prefers-color-scheme: dark) { html[data-season="christmas"][data-theme="os"] { --season-base: #0D1713; --season-surface: #15241D; --season-text: #F5F0E6; --season-primary: #3C9A6B; --season-accent: #D95A63; --season-decor: #D5B866; } } /* winter */ html[data-season="winter"][data-theme="day"] { --season-base: #EDF4F7; --season-surface: #FAFDFF; --season-text: #22313B; --season-primary: #4F7D96; --season-accent: #7FAFC4; --season-decor: #C8DCE6; } html[data-season="winter"][data-theme="night"] { --season-base: #0C1620; --season-surface: #142331; --season-text: #EAF3F7; --season-primary: #6FA6C1; --season-accent: #A7C9D8; --season-decor: #D7E9F1; } html[data-season="winter"][data-theme="os"] { --season-base: #EDF4F7; --season-surface: #FAFDFF; --season-text: #22313B; --season-primary: #4F7D96; --season-accent: #7FAFC4; --season-decor: #C8DCE6; } @media (prefers-color-scheme: dark) { html[data-season="winter"][data-theme="os"] { --season-base: #0C1620; --season-surface: #142331; --season-text: #EAF3F7; --season-primary: #6FA6C1; --season-accent: #A7C9D8; --season-decor: #D7E9F1; } } /* spring */ html[data-season="spring"][data-theme="day"] { --season-base: #F2F7ED; --season-surface: #FCFFF8; --season-text: #263426; --season-primary: #6E9C5A; --season-accent: #E7A6B4; --season-decor: #F2CD70; } html[data-season="spring"][data-theme="night"] { --season-base: #111A14; --season-surface: #1B2A1F; --season-text: #EDF4EA; --season-primary: #86B96F; --season-accent: #D98C9E; --season-decor: #D9B95F; } html[data-season="spring"][data-theme="os"] { --season-base: #F2F7ED; --season-surface: #FCFFF8; --season-text: #263426; --season-primary: #6E9C5A; --season-accent: #E7A6B4; --season-decor: #F2CD70; } @media (prefers-color-scheme: dark) { html[data-season="spring"][data-theme="os"] { --season-base: #111A14; --season-surface: #1B2A1F; --season-text: #EDF4EA; --season-primary: #86B96F; --season-accent: #D98C9E; --season-decor: #D9B95F; } } /* fourth-of-july */ html[data-season="fourth-of-july"][data-theme="day"] { --season-base: #F7F4EE; --season-surface: #FFFFFF; --season-text: #17263D; --season-primary: #204A87; --season-accent: #BF3343; --season-decor: #D3B36B; } html[data-season="fourth-of-july"][data-theme="night"] { --season-base: #0B1526; --season-surface: #14223A; --season-text: #F7F7F3; --season-primary: #4D78BA; --season-accent: #E15360; --season-decor: #E3C978; } html[data-season="fourth-of-july"][data-theme="os"] { --season-base: #F7F4EE; --season-surface: #FFFFFF; --season-text: #17263D; --season-primary: #204A87; --season-accent: #BF3343; --season-decor: #D3B36B; } @media (prefers-color-scheme: dark) { html[data-season="fourth-of-july"][data-theme="os"] { --season-base: #0B1526; --season-surface: #14223A; --season-text: #F7F7F3; --season-primary: #4D78BA; --season-accent: #E15360; --season-decor: #E3C978; } } /* bastille-day */ html[data-season="bastille-day"][data-theme="day"] { --season-base: #F3F5FA; --season-surface: #FFFFFF; --season-text: #202838; --season-primary: #2457A6; --season-accent: #D23B4B; --season-decor: #D9C9A2; } html[data-season="bastille-day"][data-theme="night"] { --season-base: #0D1422; --season-surface: #172033; --season-text: #F4F5F7; --season-primary: #4A76C5; --season-accent: #E25562; --season-decor: #E1C98E; } html[data-season="bastille-day"][data-theme="os"] { --season-base: #F3F5FA; --season-surface: #FFFFFF; --season-text: #202838; --season-primary: #2457A6; --season-accent: #D23B4B; --season-decor: #D9C9A2; } @media (prefers-color-scheme: dark) { html[data-season="bastille-day"][data-theme="os"] { --season-base: #0D1422; --season-surface: #172033; --season-text: #F4F5F7; --season-primary: #4A76C5; --season-accent: #E25562; --season-decor: #E1C98E; } } /* The decoration layer: a handful of low-opacity SVG motifs positioned around the page edges, never over the central text/nav/poster areas. One .season-decor-set exists per theme in the DOM (see fragments/seasonal-decorations.html) so no JavaScript has to inject markup; CSS shows only the one matching the current data-season. */ .season-decor { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } /* The atmosphere wash: what actually makes "it's autumn now" visible at a glance, using the Basis/Fläche tokens the palette table above defines but nothing else in this file reads. Layered the same way main.css's own --aura-1/2/3 radial gradients sit behind the page -- a background-only effect, painted at z-index: -1 like the rest of .season-decor, so it never touches a card's, button's or text's own --surface/--text/--accent colour underneath it. Invisible with no data-season attribute on purpose: var(--season-base) and var(--season-surface) are only ever defined by the per-season/per-theme rules below, so with neither set this `background` declaration is invalid at computed-value time and resolves to none -- no season, no wash, nothing to guard with an extra selector. */ .season-decor::before { content: ""; position: absolute; inset: 0; /* Full-bleed, not corner ellipses: Autumn's Basis (#F6EBDD) sits only a few RGB steps from the app's own neutral --bg (#FBFAF7), so anything that fades out before reaching most of the viewport reads as "nothing changed" for that theme specifically, even though it is visibly distinct for Christmas/Winter's cooler hues. Still only ever shows in the gaps between opaque cards/nav/posters, because it sits at the same z-index: -1 as the rest of .season-decor -- content painted on top of it is completely unaffected either way. */ background: linear-gradient(160deg, var(--season-base) 0%, var(--season-surface) 100%); opacity: 0.85; } .season-decor-set { display: none; } html[data-season="autumn"] .season-decor-set[data-season-set="autumn"], html[data-season="christmas"] .season-decor-set[data-season-set="christmas"], html[data-season="winter"] .season-decor-set[data-season-set="winter"], html[data-season="spring"] .season-decor-set[data-season-set="spring"], html[data-season="fourth-of-july"] .season-decor-set[data-season-set="fourth-of-july"], html[data-season="bastille-day"] .season-decor-set[data-season-set="bastille-day"] { display: block; } .season-decor .motif { position: absolute; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: season-drift 14s ease-in-out infinite; } /* Large background elements stay near-invisible (#165 AK: ~4-10% opacity); small accents read a little more clearly (~12-24%). */ .season-decor .motif-lg { width: 84px; height: 84px; opacity: 0.08; } .season-decor .motif-sm { width: 30px; height: 30px; opacity: 0.18; animation-duration: 10s; } .season-decor .tone-primary { color: var(--season-primary); } .season-decor .tone-accent { color: var(--season-accent); } .season-decor .tone-decor { color: var(--season-decor); } @keyframes season-drift { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(8px) rotate(4deg); } } /* #165 AK: prefers-reduced-motion yields a fully static display. */ @media (prefers-reduced-motion: reduce) { .season-decor .motif { animation: none; } }