/* ══════════════════════════════════════════════════════════ SEASONAL SIDE BORDERS Decorative rails framing the left & right viewport margins driven by ══════════════════════════════════════════════════════════ */ .season-rail { position: fixed; top: 0; bottom: 0; width: clamp(65px, 7.5vw, 130px); z-index: 100; pointer-events: none; user-select: none; overflow: hidden; display: none; /* hidden by default, enabled when a theme matches */ } /* Show rails when a seasonal theme is active */ [data-site-theme="spring"] .season-rail, [data-site-theme="summer"] .season-rail, [data-site-theme="autumn"] .season-rail, [data-site-theme="winter"] .season-rail, [data-site-theme="pride"] .season-rail, [data-site-theme="christmas"] .season-rail { display: block; } /* Hide on screens where centered content fills the viewport margins */ @media (max-width: 1280px) { .season-rail { display: none !important; } } .season-rail--left { left: 0; } .season-rail--right { right: 0; transform: scaleX(-1); /* mirrors vector elements symmetrically */ } /* Container for all decorative seasonal items */ .season-rail__content { position: relative; width: 100%; height: 100%; } /* Individual seasonal element wrapper */ .season-item { position: absolute; display: block; will-change: transform, opacity; } /* ══════════════════════════════════════════════════════════ 1. AUTUMN — Drifting maple & oak leaves ══════════════════════════════════════════════════════════ */ .season-item--autumn { display: none; } [data-site-theme="autumn"] .season-item--autumn { display: block; } /* Keyframe swaying and floating */ @keyframes autumnSwayA { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-12px) rotate(10deg); } } @keyframes autumnSwayB { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(14px) rotate(-12deg); } } .season-item--autumn:nth-child(odd) { animation: autumnSwayA 6s ease-in-out infinite; } .season-item--autumn:nth-child(even) { animation: autumnSwayB 8s ease-in-out infinite; } /* ══════════════════════════════════════════════════════════ 2. SPRING — Cherry blossom (sakura) petals ══════════════════════════════════════════════════════════ */ .season-item--spring { display: none; } [data-site-theme="spring"] .season-item--spring { display: block; } @keyframes sakuraFlutterA { 0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); } 50% { transform: translateY(-16px) rotate(18deg) scale(1.05); } } @keyframes sakuraFlutterB { 0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); } 50% { transform: translateY(18px) rotate(-15deg) scale(0.95); } } .season-item--spring:nth-child(odd) { animation: sakuraFlutterA 7s ease-in-out infinite; } .season-item--spring:nth-child(even) { animation: sakuraFlutterB 9s ease-in-out infinite; } /* ══════════════════════════════════════════════════════════ 3. WINTER — Snowflakes & frost crystals ══════════════════════════════════════════════════════════ */ .season-item--winter { display: none; } [data-site-theme="winter"] .season-item--winter { display: block; } @keyframes snowFloatA { 0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.85; } 50% { transform: translateY(16px) rotate(45deg); opacity: 1; } } @keyframes snowFloatB { 0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.7; } 50% { transform: translateY(-14px) rotate(-35deg); opacity: 0.95; } } .season-item--winter:nth-child(odd) { animation: snowFloatA 8s ease-in-out infinite; } .season-item--winter:nth-child(even) { animation: snowFloatB 11s ease-in-out infinite; } /* ══════════════════════════════════════════════════════════ 4. SUMMER — Sunbeams, citrus blossoms & sun dust ══════════════════════════════════════════════════════════ */ .season-item--summer { display: none; } [data-site-theme="summer"] .season-item--summer { display: block; } @keyframes summerGlow { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } @keyframes summerBreeze { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-10px) rotate(6deg); } } .season-item--summer:nth-child(odd) { animation: summerBreeze 7s ease-in-out infinite; } .season-item--summer:nth-child(even) { animation: summerGlow 5s ease-in-out infinite; } /* ══════════════════════════════════════════════════════════ 5. CHRISTMAS — Baubles, holly sprigs & pine boughs ══════════════════════════════════════════════════════════ */ .season-item--christmas { display: none; } [data-site-theme="christmas"] .season-item--christmas { display: block; } @keyframes christmasSway { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-8px); } } @keyframes christmasGlow { 0%, 100% { filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.4)); transform: scale(1); } 50% { filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.8)); transform: scale(1.05); } } .season-item--christmas:nth-child(odd) { animation: christmasSway 6s ease-in-out infinite; } .season-item--christmas:nth-child(even) { animation: christmasGlow 4s ease-in-out infinite; } /* ══════════════════════════════════════════════════════════ 6. PRIDE — Rainbow hearts, stars & prismatic sparkles ══════════════════════════════════════════════════════════ */ .season-item--pride { display: none; } [data-site-theme="pride"] .season-item--pride { display: block; } @keyframes prideFloatA { 0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); } 50% { transform: translateY(-14px) rotate(12deg) scale(1.06); } } @keyframes prideSparkle { 0%, 100% { opacity: 0.75; transform: rotate(0deg) scale(1); } 50% { opacity: 1; transform: rotate(180deg) scale(1.15); } } .season-item--pride:nth-child(odd) { animation: prideFloatA 6s ease-in-out infinite; } .season-item--pride:nth-child(even) { animation: prideSparkle 5s ease-in-out infinite; } /* ══════════════════════════════════════════════════════════ REDUCED MOTION SUPPORT Respect users who prefer reduced motion ══════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .season-item { animation: none !important; } } /* ══════════════════════════════════════════════════════════ SEASONAL FLOATING FOOTER PILES Piles of leaves, sakura petals, snow blankets & botanicals resting on the top ledge of the floating card container. ══════════════════════════════════════════════════════════ */ .site-footer .container { position: relative !important; overflow: visible !important; } .footer-season-pile { position: absolute; top: 0; left: 0; right: 0; height: 0; pointer-events: none; user-select: none; z-index: 10; } .footer-pile { display: none; position: relative; width: 100%; height: 0; } [data-site-theme="autumn"] .footer-pile--autumn, [data-site-theme="spring"] .footer-pile--spring, [data-site-theme="winter"] .footer-pile--winter, [data-site-theme="summer"] .footer-pile--summer, [data-site-theme="pride"] .footer-pile--pride, [data-site-theme="christmas"] .footer-pile--christmas { display: block; } .footer-pile__group { position: relative; z-index: 10; } .footer-pile__item { position: absolute; z-index: 10; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)); transition: transform 0.4s ease; will-change: transform; } .footer-pile__flower { z-index: 15 !important; } /* Subtle organic pile settling animation */ @keyframes pileRest { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } .footer-pile__group .footer-pile__item:nth-child(odd) { animation: pileRest 5s ease-in-out infinite; } /* Continuous Seasonal Drifts along the card top edge */ .footer-leafpile { position: absolute; top: -24px; left: -2px; width: calc(100% + 4px); height: 34px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.14)); z-index: 1; } .footer-petalpile { position: absolute; top: -22px; left: -2px; width: calc(100% + 4px); height: 32px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12)); z-index: 1; } /* Winter Snowcap blanket along the card's top edge */ .footer-snowcap { position: absolute; top: -16px; left: -2px; width: calc(100% + 4px); height: 22px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.08)); z-index: 1; } [data-theme="dark"] .footer-snowcap stop[offset="0%"] { stop-color: #2b3848 !important; } [data-theme="dark"] .footer-snowcap stop[offset="100%"] { stop-color: #1a222c !important; } [data-theme="dark"] .footer-snowcap path[stroke="#ffffff"] { stroke: #475a6f !important; } /* Summer Ocean Waves along the card top edge */ .footer-wavecap { position: absolute; top: -18px; left: -2px; width: calc(100% + 4px); height: 26px; filter: drop-shadow(0 2px 4px rgba(2, 132, 199, 0.22)); z-index: 1; } [data-theme="dark"] .footer-wavecap stop[offset="0%"] { stop-color: #0c4a6e !important; } [data-theme="dark"] .footer-wavecap stop[offset="60%"] { stop-color: #075985 !important; } [data-theme="dark"] .footer-wavecap stop[offset="100%"] { stop-color: #0369a1 !important; } [data-theme="dark"] .footer-wavecap path[stroke="#ffffff"] { stroke: #7dd3fc !important; } /* Christmas Pine Garland along card top edge */ .footer-pinegarland { position: absolute; top: -24px; left: -2px; width: calc(100% + 4px); height: 34px; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.18)); z-index: 1; } /* Pride Ribbon & Rainbow Wave along card top edge */ .footer-pridecap { position: absolute; top: -18px; left: -2px; width: calc(100% + 4px); height: 26px; filter: drop-shadow(0 2px 6px rgba(216, 30, 91, 0.25)); z-index: 1; } @media (prefers-reduced-motion: reduce) { .footer-pile__item { animation: none !important; } }