/* ========================================================================== Seasonal theming — decorative layer only. Activated by `data-season=""` on , set server-side by the `active_season` context processor (see seasonal.py + app.py). Every rule in this file is scoped under an `html[data-season...]` prefix, so pages render byte-identical to before when no season is active (kill switch, out-of-window dates, or ?season=off). Muting: `data-season-muted="1"` on (set for distributor / project manager logins — customer-facing surfaces) kills all animation and halves pattern opacity; glows are unaffected. Every decorative node is `pointer-events: none` and stacked behind real content (negative z-index inside an isolated stacking context), so it can never intercept clicks or sit above body copy. Text color/contrast is never touched by this file. ========================================================================== */ /* --------------------------------------------------------------------- Shared mechanics (season-agnostic scaffolding) --------------------------------------------------------------------- */ /* Guard against any horizontal scroll the fixed ambient layers could theoretically introduce. Scoped to seasonal pages only — no effect when no season is active. */ html[data-season] body { overflow-x: hidden; } /* Ambient page-level layer: body::before carries the animated drifting pattern, body::after carries the static corner accents. Both are viewport-fixed, non-interactive, and painted behind all page content. */ html[data-season] body::before, html[data-season] body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; } /* Hero-card accent glow: additive-only overlay behind each card's own content. `isolation: isolate` gives the card its own local stacking context so the negative z-index pseudo-element is guaranteed to stay scoped to this card (never leaks behind/above unrelated page sections) without altering the card's layout, clipping, or existing background. */ html[data-season] .rp-hero, html[data-season] .dp-hero, html[data-season] .pickem-dashboard-card { isolation: isolate; } html[data-season] .rp-hero::after, html[data-season] .dp-hero::after, html[data-season] .pickem-dashboard-card::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: 0; } /* --------------------------------------------------------------------- FALL — warm amber/orange glows + drifting leaves --------------------------------------------------------------------- */ html[data-season="fall"] .rp-hero::after, html[data-season="fall"] .dp-hero::after, html[data-season="fall"] .pickem-dashboard-card::after { opacity: 1; background: radial-gradient(ellipse 60% 70% at 10% -12%, rgba(245, 158, 11, 0.22), transparent 60%), radial-gradient(ellipse 55% 65% at 102% 118%, rgba(217, 119, 6, 0.16), transparent 65%); } html[data-theme="light"][data-season="fall"] .rp-hero::after, html[data-theme="light"][data-season="fall"] .dp-hero::after, html[data-theme="light"][data-season="fall"] .pickem-dashboard-card::after { background: radial-gradient(ellipse 60% 70% at 10% -12%, rgba(217, 119, 6, 0.13), transparent 60%), radial-gradient(ellipse 55% 65% at 102% 118%, rgba(180, 83, 9, 0.10), transparent 65%); } /* Fall page-wide canvas layers (drifting leaf pattern + corner accents) disabled 2026-08-26 per Brandon — normal page gradient restored, pending a different canvas treatment. Hero glows and the leaf pile stay active. html[data-season="fall"] body::before { opacity: 1; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20140%20140'%3E%3Cg%20fill='%23d17a3a'%20fill-opacity='0.45'%3E%3Cpath%20d='M30%2020c7%205%2012%2014%2010%2022-1%205-5%208-10%208s-9-3-10-8c-2-8%203-17%2010-22z'%20transform='rotate(15%2030%2034)'/%3E%3Cpath%20d='M100%2070c6%204%2010%2012%208%2019-1%204-4%207-8%207s-7-3-8-7c-2-7%202-15%208-19z'%20transform='rotate(-25%20100%2082)'/%3E%3Cpath%20d='M55%20100c5%204%209%2010%207%2016-1%204-4%206-7%206s-6-2-7-6c-2-6%202-12%207-16z'%20transform='rotate(50%2055%20110)'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: repeat; background-size: 220px 220px; animation: seasonal-fall-drift 110s linear infinite; } html[data-season="fall"] body::after { opacity: 0.6; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2060'%3E%3Cpath%20d='M30%208c10%207%2016%2019%2013%2029-2%207-8%2011-13%2011s-11-4-13-11c-3-10%203-22%2013-29z'%20fill='%23d17a3a'%20fill-opacity='0.5'/%3E%3Cpath%20d='M30%208v40'%20stroke='%238a4a1f'%20stroke-opacity='0.4'%20stroke-width='1.6'%20fill='none'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2060'%3E%3Cpath%20d='M30%208c10%207%2016%2019%2013%2029-2%207-8%2011-13%2011s-11-4-13-11c-3-10%203-22%2013-29z'%20fill='%23d17a3a'%20fill-opacity='0.5'/%3E%3Cpath%20d='M30%208v40'%20stroke='%238a4a1f'%20stroke-opacity='0.4'%20stroke-width='1.6'%20fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat, no-repeat; background-position: -8px -8px, calc(100% + 8px) calc(100% + 8px); background-size: 130px 130px, 150px 150px; } */ @keyframes seasonal-fall-drift { from { background-position: 0 0; } to { background-position: 220px 260px; } } /* Leaf pile overlay — DOM-injected by seasonal_fall.js, fall season only. Clipped to the hero card, non-interactive, stacked behind real content (same negative-z-index isolated stacking context as .rp-hero::after / .dp-hero::after above). */ .pdsm-fall-leaf-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; border-radius: inherit; } .pdsm-fall-leaf { position: absolute; top: -20px; left: 0; display: block; opacity: 0; /* linear, not ease-in: timing functions apply per keyframe segment, so any easing would zero the velocity at the 30%/60% sway waypoints and make leaves visibly stall midair. */ animation-timing-function: linear; animation-fill-mode: forwards; } .pdsm-fall-leaf.is-falling { animation-name: pdsm-fall-leaf-drop; will-change: transform; } .pdsm-fall-leaf.is-landed { top: auto; opacity: 0.92; } @keyframes pdsm-fall-leaf-drop { 0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; } 10% { opacity: 0.9; } 30% { transform: translate3d(var(--pdsm-leaf-sway, 8px), calc(var(--pdsm-leaf-drop-y, 100px) * 0.35), 0) rotate(calc(var(--pdsm-leaf-rot, 320deg) * 0.4)); } 60% { transform: translate3d(calc(var(--pdsm-leaf-sway, 8px) * -0.7), calc(var(--pdsm-leaf-drop-y, 100px) * 0.7), 0) rotate(calc(var(--pdsm-leaf-rot, 320deg) * 0.75)); } 100% { transform: translate3d(0, var(--pdsm-leaf-drop-y, 100px), 0) rotate(var(--pdsm-leaf-rot, 320deg)); opacity: 0.92; } } @media (prefers-reduced-motion: reduce) { .pdsm-fall-leaf.is-falling { animation: none !important; opacity: 0 !important; } } /* --------------------------------------------------------------------- HALLOWEEN — purple/orange glows + floating bats & pumpkins --------------------------------------------------------------------- */ html[data-season="halloween"] .rp-hero::after, html[data-season="halloween"] .dp-hero::after, html[data-season="halloween"] .pickem-dashboard-card::after { opacity: 1; background: radial-gradient(ellipse 58% 68% at 8% -10%, rgba(107, 63, 160, 0.24), transparent 60%), radial-gradient(ellipse 52% 62% at 100% 116%, rgba(226, 115, 31, 0.16), transparent 65%); } html[data-theme="light"][data-season="halloween"] .rp-hero::after, html[data-theme="light"][data-season="halloween"] .dp-hero::after, html[data-theme="light"][data-season="halloween"] .pickem-dashboard-card::after { background: radial-gradient(ellipse 58% 68% at 8% -10%, rgba(91, 46, 145, 0.14), transparent 60%), radial-gradient(ellipse 52% 62% at 100% 116%, rgba(180, 90, 20, 0.10), transparent 65%); } html[data-season="halloween"] body::before { opacity: 1; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20160%20160'%3E%3Cg%20transform='translate(15%2020)%20scale(1.1)'%20fill='%236b3fa0'%20fill-opacity='0.4'%3E%3Cpath%20d='M20,10%20C15,2%205,2%202,8%20C6,6%2010,8%2011,12%20C6,10%202,14%204,18%20C8,14%2012,15%2014,12%20C13,17%2017,20%2020,17%20C23,20%2027,17%2026,12%20C28,15%2032,14%2036,18%20C38,14%2034,10%2029,12%20C30,8%2034,6%2038,8%20C35,2%2025,2%2020,10%20Z'/%3E%3C/g%3E%3Cg%20transform='translate(95%2095)'%3E%3Cellipse%20cx='14'%20cy='16'%20rx='14'%20ry='11'%20fill='%23e2731f'%20fill-opacity='0.4'/%3E%3Cpath%20d='M4%208%20Q14%204%2014%2026'%20stroke='%23a8501a'%20stroke-opacity='0.35'%20stroke-width='1.4'%20fill='none'/%3E%3Cpath%20d='M24%208%20Q14%204%2014%2026'%20stroke='%23a8501a'%20stroke-opacity='0.35'%20stroke-width='1.4'%20fill='none'/%3E%3Crect%20x='11'%20y='0'%20width='6'%20height='6'%20rx='1.5'%20fill='%235c8a3a'%20fill-opacity='0.45'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: repeat; background-size: 240px 240px; animation: seasonal-halloween-float 16s ease-in-out infinite; } html[data-season="halloween"] body::after { opacity: 0.6; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2020'%3E%3Cpath%20d='M20,10%20C15,2%205,2%202,8%20C6,6%2010,8%2011,12%20C6,10%202,14%204,18%20C8,14%2012,15%2014,12%20C13,17%2017,20%2020,17%20C23,20%2027,17%2026,12%20C28,15%2032,14%2036,18%20C38,14%2034,10%2029,12%20C30,8%2034,6%2038,8%20C35,2%2025,2%2020,10%20Z'%20fill='%236b3fa0'%20fill-opacity='0.5'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2028%2030'%3E%3Cellipse%20cx='14'%20cy='16'%20rx='13'%20ry='10'%20fill='%23e2731f'%20fill-opacity='0.5'/%3E%3Cpath%20d='M4%209%20Q14%205%2014%2025'%20stroke='%23a8501a'%20stroke-opacity='0.4'%20stroke-width='1.5'%20fill='none'/%3E%3Cpath%20d='M24%209%20Q14%205%2014%2025'%20stroke='%23a8501a'%20stroke-opacity='0.4'%20stroke-width='1.5'%20fill='none'/%3E%3Crect%20x='11'%20y='1'%20width='6'%20height='6'%20rx='1.5'%20fill='%235c8a3a'%20fill-opacity='0.5'/%3E%3C/svg%3E"); background-repeat: no-repeat, no-repeat; background-position: -6px -4px, calc(100% + 6px) calc(100% + 6px); background-size: 110px 55px, 120px 130px; } @keyframes seasonal-halloween-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } } /* --------------------------------------------------------------------- Muted variant — distributor / project manager surfaces. No animation, pattern opacity halved, glows unchanged. --------------------------------------------------------------------- */ html[data-season][data-season-muted] body::before, html[data-season][data-season-muted] body::after { animation: none !important; } html[data-season="fall"][data-season-muted] body::before { opacity: 0.5; } html[data-season="fall"][data-season-muted] body::after { opacity: 0.3; } html[data-season="halloween"][data-season-muted] body::before { opacity: 0.5; } html[data-season="halloween"][data-season-muted] body::after { opacity: 0.3; } /* --------------------------------------------------------------------- Reduced motion — all seasonal animation off, static accents only. Independent of muting: applies even on full-spirit rep/internal views. --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html[data-season] body::before, html[data-season] body::after { animation: none !important; } }