/* ========================================================================== Seasonal themes — CVČ Bánovce nad Bebravou Keyed off (set by index.php from the current date). Each block remaps the core color tokens defined in main.css; because header, footer, nav, links, buttons, headings and the body::before base gradient all resolve through those tokens, one override re-themes the whole site. A matching decorative motif is painted on the .season-decor layer. All motion is disabled under prefers-reduced-motion. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Seasonal palettes (token overrides) Each --primary-blue stays a saturated 600–800 hue so white header/footer text keeps its contrast. -------------------------------------------------------------------------- */ [data-season="spring"] { --primary-blue: #16a34a; /* fresh green */ --primary-blue-dark: #15803d; --primary-blue-light: #22c55e; --secondary-blue: #4ade80; --accent-blue: #86efac; --light-blue: #dcfce7; --ultra-light-blue: #f0fdf4; } [data-season="summer"] { --primary-blue: #0284c7; /* bright sky blue */ --primary-blue-dark: #0369a1; --primary-blue-light: #0ea5e9; --secondary-blue: #38bdf8; --accent-blue: #7dd3fc; --light-blue: #e0f2fe; --ultra-light-blue: #f0f9ff; } [data-season="autumn"] { --primary-blue: #c2410c; /* warm orange */ --primary-blue-dark: #9a3412; --primary-blue-light: #ea580c; --secondary-blue: #f97316; --accent-blue: #fdba74; --light-blue: #ffedd5; --ultra-light-blue: #fff7ed; } [data-season="winter"] { --primary-blue: #1e40af; /* cool deep blue */ --primary-blue-dark: #1e3a8a; --primary-blue-light: #3b82f6; --secondary-blue: #60a5fa; --accent-blue: #bae6fd; --light-blue: #e0f2fe; --ultra-light-blue: #f8fafc; /* cool white */ } /* -------------------------------------------------------------------------- 2. Decorative motif layer Fixed, non-interactive, sits above the base gradient/mesh but behind all content (see z-index ladder in main.css: gradient -3, mesh -2, decor -1). -------------------------------------------------------------------------- */ .season-decor { position: fixed; inset: 0; z-index: -1; pointer-events: none; } /* Each season paints a hand-authored SVG "field" (several shapes scattered across a 400×400 tile) on two layers of different size → parallax depth. Each layer loops by exactly one tile height, so the fall is seamless. */ @keyframes seasonFall { from { background-position: 0 0, 140px 0; } to { background-position: 0 440px, 140px 320px; } } [data-season="spring"] .season-decor, [data-season="autumn"] .season-decor, [data-season="winter"] .season-decor, [data-season="summer"] .season-decor { background-repeat: repeat, repeat; background-size: 440px 440px, 320px 320px; animation: seasonFall 34s linear infinite; } /* Winter — snowflakes */ [data-season="winter"] .season-decor { background-image: url("../img/seasons/winter-field.svg"), url("../img/seasons/winter-field.svg"); opacity: 0.85; } /* Spring — cherry blossoms & petals */ [data-season="spring"] .season-decor { background-image: url("../img/seasons/spring-field.svg"), url("../img/seasons/spring-field.svg"); opacity: 0.8; } /* Autumn — falling leaves */ [data-season="autumn"] .season-decor { background-image: url("../img/seasons/autumn-field.svg"), url("../img/seasons/autumn-field.svg"); opacity: 0.8; } /* Summer — sunny sparkles, drifting gently, over a warm glow */ [data-season="summer"] .season-decor { background-image: url("../img/seasons/summer-field.svg"), url("../img/seasons/summer-field.svg"); opacity: 0.8; } /* A soft warm glow anchored to the bottom corners for summer (::before so it does not move with the drifting sparkle field above). */ [data-season="summer"] .season-decor::before { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side at 100% 108%, rgba(253,224,71,0.30), transparent 70%), radial-gradient(closest-side at 0% 106%, rgba(56,189,248,0.16), transparent 65%); animation: sunPulse 14s ease-in-out infinite; } @keyframes sunPulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } } /* Seasonal banner motif — reuses the field art, whitened + faint in main.css (.banner-decor), so the season also reads on the header (visible on mobile). */ [data-season="winter"] .banner-decor { background-image: url("../img/seasons/winter-field.svg"); } [data-season="spring"] .banner-decor { background-image: url("../img/seasons/spring-field.svg"); } [data-season="autumn"] .banner-decor { background-image: url("../img/seasons/autumn-field.svg"); } [data-season="summer"] .banner-decor { background-image: url("../img/seasons/summer-field.svg"); } /* -------------------------------------------------------------------------- 3. Season-aware heading accent (replaces the fixed 🎨 from main.css) -------------------------------------------------------------------------- */ [data-season="spring"] .section-title::before { content: "🌸"; } [data-season="summer"] .section-title::before { content: "☀️"; } [data-season="autumn"] .section-title::before { content: "🍂"; } [data-season="winter"] .section-title::before { content: "❄️"; } /* -------------------------------------------------------------------------- 4. Accessibility — respect reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .season-decor, .season-decor::before { animation: none !important; } }