/* ═══════════════════════════════════════════════════════════════════════════ The site on a day of the year. js/shared/season.js puts data-season on on the day; every rule here hangs off it, so on any other day this file changes nothing. Halloween (Sergio, 11 October 2026): the floodlight blue turns pumpkin orange, the night turns a dark green, the home's sky shows the Halloween cup's haunted castle (img/themes/halloween.jpg), and bats fly across the sky at the top of each page. ═══════════════════════════════════════════════════════════════════════════ */ :root[data-season="halloween"] { --bg-deep: #030805; --bg-base: #0a0f0a; --bg-elevated: #12170f; --bg-surface: #1b2116; --led: #ff7a1a; --led-bright: #ffb25c; --led-pale: #ffe2be; --led-pale-rgb: 255 226 190; --led-pale-72: rgb(var(--led-pale-rgb) / 0.72); --led-deep: #5a2406; --led-glow: rgba(255, 122, 26, 0.35); --led-10: rgba(255, 122, 26, 0.1); --led-20: rgba(255, 122, 26, 0.2); --ticket-blue: linear-gradient(180deg, #4a2408 0%, #22150a 38%, #0b0f08 100%); --ticket-night: linear-gradient(180deg, #3a1d07 0%, #1c1209 40%, #090d07 100%); --entry-panel-blue: linear-gradient(180deg, #2c1606 0%, #170f08 55%, #090d07 100%); --panel-night: #15100a; } /* The sky over every page head, and the home's: a dark green night with the floodlights burning orange. */ :root[data-season="halloween"] .sky, :root[data-season="halloween"] .night { background: linear-gradient(180deg, #16260b 0%, #0d1807 42%, #060b04 74%, var(--bg-deep) 100%); } :root[data-season="halloween"] .sky__lamp, :root[data-season="halloween"] .night__lamp { background: radial-gradient(closest-side, rgba(255, 226, 190, 0.42), rgba(255, 178, 92, 0.26) 22%, rgba(255, 122, 26, 0.12) 55%, transparent 100%); } :root[data-season="halloween"] .night__halo { background: radial-gradient(closest-side, rgba(255, 122, 26, 0.36), rgba(255, 122, 26, 0.1) 60%, transparent 100%); } /* The castle behind the whole home, the cup pages and the Cups list (Sergio, 25 October 2026), not only the home's first screen (Sergio, 25 October 2026: it read as only the right side). It stays put while the page scrolls over it; each band below the first screen lays a shade over it so its words stay readable. */ :root[data-season="halloween"] body:has(.night, #cupTicket, .cups-head)::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(rgba(3, 8, 5, 0.2), rgba(3, 8, 5, 0.2)), url('/img/themes/halloween.jpg') 70% 20% / cover no-repeat, var(--bg-deep); } :root[data-season="halloween"] .night { background: linear-gradient(180deg, rgba(3, 8, 5, 0) 55%, rgba(3, 8, 5, 0.6) 100%), linear-gradient(90deg, rgba(3, 8, 5, 0.5) 0%, rgba(3, 8, 5, 0.3) 40%, rgba(3, 8, 5, 0.1) 70%, rgba(3, 8, 5, 0.3) 100%); } :root[data-season="halloween"] .learn { background: linear-gradient(180deg, rgba(3, 8, 5, 0.55) 0%, rgba(3, 8, 5, 0.72) 100%); } :root[data-season="halloween"] .learn__stars { background: radial-gradient(circle var(--glow) at calc(var(--ball-x) * 100%) calc(var(--ball-y) * 100%), rgba(255, 122, 26, 0.16), transparent); } :root[data-season="halloween"] main > :is(.band, section):not(.compete, .learn) { background: rgba(3, 8, 5, 0.78); } :root[data-season="halloween"] .board { background: rgba(90, 36, 6, 0.35); } :root[data-season="halloween"] .podium__step { border-top-color: rgba(255, 178, 92, 0.35); background: linear-gradient(180deg, rgba(255, 122, 26, 0.22) 0%, rgba(90, 36, 6, 0.36) 45%, rgba(90, 36, 6, 0) 100%); } :root[data-season="halloween"] .podium__place--1 .podium__step { background: linear-gradient(180deg, rgba(255, 122, 26, 0.4) 0%, rgba(90, 36, 6, 0.5) 45%, rgba(90, 36, 6, 0) 100%); } /* Bats across the sky, under the top bar. */ :root[data-season="halloween"] .sky::after, :root[data-season="halloween"] .night::after { content: ''; position: absolute; top: 76px; left: 0; right: 0; height: 140px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140'%3E%3Cdefs%3E%3Cpath id='b' d='M0 1Q-9-9-20-6Q-17-1-16 3Q-13 0-11 3Q-8 0-6 4Q-3 1 0 3Q3 1 6 4Q8 0 11 3Q13 0 16 3Q17-1 20-6Q9-9 0 1ZM-2-2L-2-6L0-3L2-6L2-2Q2 3 0 4Q-2 3-2-2Z'/%3E%3C/defs%3E%3Cg fill='%23070403'%3E%3Cuse href='%23b' transform='translate(160 60) rotate(-8) scale(1.6)'/%3E%3Cuse href='%23b' transform='translate(330 30) rotate(10) scale(1.1)'/%3E%3Cuse href='%23b' transform='translate(880 50) rotate(-12) scale(1.4)'/%3E%3Cuse href='%23b' transform='translate(1040 95) rotate(6) scale(0.9)'/%3E%3Cuse href='%23b' transform='translate(640 22) rotate(-4) scale(0.8)'/%3E%3C/g%3E%3C/svg%3E") center / 1200px 140px no-repeat; opacity: 0.85; } /* The leaderboard's plates below the three medals: pumpkin metal in place of the floodlights' blue (css/shared/prize-card.css). */ :root[data-season="halloween"] .prize-card--plain { --metal-hi: #ffd6a8; --metal: #f08a3a; --metal-lo: #b3501a; --ink: #4a1a04; } /* The home's phone plays a recording of the site in its usual blue; turned round the colour wheel, the blue in it comes out orange. */ :root[data-season="halloween"] .phone__video { filter: hue-rotate(165deg); } /* No floodlights on Halloween (Sergio, 25 October 2026): the banks, their beams and the glow they throw are off, so the castle's own moon lights the sky. */ :root[data-season="halloween"] :is(.sky__lamp, .sky__beams, .night__lamp, .night__beams, .night__halo) { display: none; } /* Where the bats fly across the sky with the embers (js/index/weather.js: the home, the cup pages and the Cups list), the still ones go while that canvas runs. */ :root[data-season="halloween"] body:has(> .weather) :is(.night, .sky)::after { display: none; } /* The Elite Cup's ticket on the home dresses like a Halloween cup's ticket (css/tournaments/tournament-detail-v2.css): a frame burning orange with green flame inside, the name as a burnt candle in Griffy, orange labels and a clock lit green. A cobweb fills its top corner, and a spider lets itself down on a thread beside the name (Sergio, 25 October 2026). */ :root[data-season="halloween"] .stage { --border-accent: rgba(190, 230, 60, 0.55); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Cpath d='M0 0L149.9 5.2M0 0L141.0 51.3M0 0L118.2 92.3M0 0L83.9 124.4M0 0L41.3 144.2M0 0L5.2 149.9M34.0 1.2Q27.4 5.3 31.9 11.6M31.9 11.6Q24.4 13.5 26.8 20.9M26.8 20.9Q19.0 20.4 19.0 28.2M19.0 28.2Q11.8 25.3 9.4 32.7M9.4 32.7Q4.4 27.5 1.2 34.0M62.0 2.2Q49.9 9.7 58.3 21.2M58.3 21.2Q44.5 24.6 48.9 38.2M48.9 38.2Q34.7 37.2 34.7 51.4M34.7 51.4Q21.5 46.1 17.1 59.6M17.1 59.6Q8.0 50.2 2.2 62.0M89.9 3.1Q72.4 14.1 84.6 30.8M84.6 30.8Q64.5 35.8 70.9 55.4M70.9 55.4Q50.3 54.0 50.3 74.6M50.3 74.6Q31.2 66.9 24.8 86.5M24.8 86.5Q11.5 72.9 3.1 89.9M117.9 4.1Q95.0 18.5 110.9 40.4M110.9 40.4Q84.6 46.9 93.0 72.6M93.0 72.6Q66.0 70.8 66.0 97.8M66.0 97.8Q40.9 87.7 32.5 113.4M32.5 113.4Q15.1 95.6 4.1 117.9' fill='none' stroke='%23f3eadc' stroke-opacity='.38' stroke-width='.8'/%3E%3C/svg%3E") 0 0 / 150px 150px no-repeat, radial-gradient(60% 90% at 15% 115%, rgba(70, 200, 40, 0.26), transparent 70%), radial-gradient(40% 70% at 100% 0%, rgba(70, 200, 40, 0.18), transparent 70%), linear-gradient(180deg, #2a1406 0%, #160d06 45%, #070a05 100%); } /* The burning frame is the ticket's edge, so its silver top rule goes. */ :root[data-season="halloween"] .stage::before { display: none; } /* A lightning strike over the castle (js/index/weather.js) lights the ticket for a moment. */ :root.is-lightning .stage { filter: brightness(1.35) saturate(1.1); } :root[data-season="halloween"] .stage > #eliteDesk::before { content: ''; position: absolute; inset: 5px; z-index: 1; pointer-events: none; border: 3px solid #ff7a1a; border-radius: 10px; box-shadow: 0 0 6px 1px #ffb347, inset 0 0 8px 2px rgba(255, 122, 26, 0.95), inset 0 0 26px 6px rgba(110, 230, 50, 0.4), inset 0 0 60px 10px rgba(40, 120, 20, 0.3); filter: url(#burnEdge); } :root[data-season="halloween"] .stage .cup__name { font-family: 'Griffy', var(--font-display); letter-spacing: 0; background: linear-gradient(180deg, #3a2210 0%, #b7884c 10%, #f7eed8 24%, #e8d2a0 70%, #bd8a46 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(255, 122, 26, 0.45)); } :root[data-season="halloween"] .stage .cup__name .cup-number { font-family: inherit; font-weight: 400; } :root[data-season="halloween"] .stage .cup__name a:hover { text-decoration-color: #ff7a1a; } :root[data-season="halloween"] .stage .t-label { color: #ff7a1a; } :root[data-season="halloween"] .stage .cup__dot { background: #ff7a1a; } :root[data-season="halloween"] .stage .clock__unit .t-figure { color: #fff; text-shadow: 0 0 6px rgba(120, 240, 60, 0.95), 0 0 18px rgba(80, 200, 40, 0.7); } /* On a stacked ticket the name starts at the top, so the web is smaller. */ @container cups (max-width: 679px) { :root[data-season="halloween"] .stage { background-size: 96px 96px, auto, auto, auto; } } /* The spider hangs in the gap between the name and the tear line, so it never crosses the words; a ticket too narrow for that gap has none. */ @container cups (min-width: 680px) { :root[data-season="halloween"] .stage > #eliteDesk::after { content: ''; position: absolute; top: 0; right: calc(var(--stub) + 2.5rem); z-index: 1; width: 28px; height: 160px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 140'%3E%3Cpath d='M12 0V118' stroke='%23f3eadc' stroke-opacity='.45' stroke-width='.7'/%3E%3Cpath d='M9 121L5 113.4L3 112M9 123L5 118.2L1 121M9 125L5 123.0L1 130M9 127L5 127.80000000000001L3 139M15 121L19 113.4L21 112M15 123L19 118.2L23 121M15 125L19 123.0L23 130M15 127L19 127.80000000000001L21 139' fill='none' stroke='%230a0503' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cellipse cx='12' cy='126' rx='4.6' ry='5.6' fill='%230a0503' stroke='%23ff7a1a' stroke-opacity='.55' stroke-width='.6'/%3E%3Ccircle cx='12' cy='119' r='2.8' fill='%230a0503'/%3E%3Ccircle cx='11' cy='118.6' r='.6' fill='%23ff8a1f'/%3E%3Ccircle cx='13' cy='118.6' r='.6' fill='%23ff8a1f'/%3E%3C/svg%3E") center bottom / 28px 160px no-repeat; transform-origin: 50% 0; } } /* It drops on its thread once the ticket is up, then rocks slowly. */ @media (prefers-reduced-motion: no-preference) { :root[data-season="halloween"] .stage > #eliteDesk::after { animation: spider-drop 2.2s cubic-bezier(0.16, 1, 0.3, 1) 1.6s backwards, spider-rock 5s ease-in-out 3.8s infinite; } } @keyframes spider-drop { from { transform: translateY(-160px); } } @keyframes spider-rock { 0%, 100% { transform: rotate(0deg) translateY(0); } 30% { transform: rotate(3deg) translateY(-6px); } 70% { transform: rotate(-2.5deg) translateY(3px); } } /* The cup pages and the Cups list on Halloween: the castle behind them (above), the page head's sky open onto it, and the embers' canvas (js/index/weather.js) behind everything. */ :root[data-season="halloween"] body:has(#cupTicket, .cups-head) .sky { background: none; } /* Under the page head, each band lays a shade over the castle so its words stay readable. */ :root[data-season="halloween"] body:has(#cupTicket, .cups-head) main .band { background: rgba(3, 8, 5, 0.62); } /* On the Cups list the shade has no edges (Sergio, 25 October 2026: the box cut through the castle): clear under the page head, dark under the list, and solid into the footer. The band grows to meet the footer, so the space a short list leaves above it shows no bare strip of castle. */ :root[data-season="halloween"] body:has(.cups-head) #main-content { display: flex; flex: 1 0 auto; flex-direction: column; } :root[data-season="halloween"] body:has(.cups-head) #main-content .band.cups { flex: 1 0 auto; background: linear-gradient(180deg, rgba(3, 8, 5, 0) 0, rgba(3, 8, 5, 0.62) 96px, rgba(3, 8, 5, 0.62) calc(100% - 140px), rgb(3, 8, 5) 100%); } :root[data-season="halloween"] .weather { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; } /* The Elite Cup's row on the Cups list: lit orange in place of the blue. */ :root[data-season="halloween"] .cups-ledger tr.is-lead { background: linear-gradient(180deg, rgba(255, 122, 26, 0.26) 0%, rgba(90, 36, 6, 0.2) 55%, transparent 100%); } /* Every cup's ticket wears the Halloween look on the day (js/tournaments/tournament-detail.js), dressed like the home's: the castle is already behind the page, so the ticket is the dark night with the cobweb in its corner and the spider beside the name. */ :root[data-season="halloween"] .ticket[data-theme="halloween"] { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Cpath d='M0 0L149.9 5.2M0 0L141.0 51.3M0 0L118.2 92.3M0 0L83.9 124.4M0 0L41.3 144.2M0 0L5.2 149.9M34.0 1.2Q27.4 5.3 31.9 11.6M31.9 11.6Q24.4 13.5 26.8 20.9M26.8 20.9Q19.0 20.4 19.0 28.2M19.0 28.2Q11.8 25.3 9.4 32.7M9.4 32.7Q4.4 27.5 1.2 34.0M62.0 2.2Q49.9 9.7 58.3 21.2M58.3 21.2Q44.5 24.6 48.9 38.2M48.9 38.2Q34.7 37.2 34.7 51.4M34.7 51.4Q21.5 46.1 17.1 59.6M17.1 59.6Q8.0 50.2 2.2 62.0M89.9 3.1Q72.4 14.1 84.6 30.8M84.6 30.8Q64.5 35.8 70.9 55.4M70.9 55.4Q50.3 54.0 50.3 74.6M50.3 74.6Q31.2 66.9 24.8 86.5M24.8 86.5Q11.5 72.9 3.1 89.9M117.9 4.1Q95.0 18.5 110.9 40.4M110.9 40.4Q84.6 46.9 93.0 72.6M93.0 72.6Q66.0 70.8 66.0 97.8M66.0 97.8Q40.9 87.7 32.5 113.4M32.5 113.4Q15.1 95.6 4.1 117.9' fill='none' stroke='%23f3eadc' stroke-opacity='.38' stroke-width='.8'/%3E%3C/svg%3E") 0 0 / 150px 150px no-repeat, radial-gradient(60% 90% at 15% 115%, rgba(70, 200, 40, 0.26), transparent 70%), radial-gradient(40% 70% at 100% 0%, rgba(70, 200, 40, 0.18), transparent 70%), linear-gradient(180deg, #2a1406 0%, #160d06 45%, #070a05 100%); } @media (min-width: 761px) { :root[data-season="halloween"] .ticket[data-theme="halloween"] .ticket__main::after { content: ''; position: absolute; top: 0; right: calc(var(--stub) + 2.5rem); z-index: 1; width: 28px; height: 160px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 140'%3E%3Cpath d='M12 0V118' stroke='%23f3eadc' stroke-opacity='.45' stroke-width='.7'/%3E%3Cpath d='M9 121L5 113.4L3 112M9 123L5 118.2L1 121M9 125L5 123.0L1 130M9 127L5 127.80000000000001L3 139M15 121L19 113.4L21 112M15 123L19 118.2L23 121M15 125L19 123.0L23 130M15 127L19 127.80000000000001L21 139' fill='none' stroke='%230a0503' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cellipse cx='12' cy='126' rx='4.6' ry='5.6' fill='%230a0503' stroke='%23ff7a1a' stroke-opacity='.55' stroke-width='.6'/%3E%3Ccircle cx='12' cy='119' r='2.8' fill='%230a0503'/%3E%3Ccircle cx='11' cy='118.6' r='.6' fill='%23ff8a1f'/%3E%3Ccircle cx='13' cy='118.6' r='.6' fill='%23ff8a1f'/%3E%3C/svg%3E") center bottom / 28px 160px no-repeat; transform-origin: 50% 0; } } @media (prefers-reduced-motion: no-preference) { :root[data-season="halloween"] .ticket[data-theme="halloween"] .ticket__main::after { animation: spider-drop 2.2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s backwards, spider-rock 5s ease-in-out 3.4s infinite; } } /* On a stacked ticket the name starts at the top, so the web is smaller. */ @media (max-width: 760px) { :root[data-season="halloween"] .ticket[data-theme="halloween"] { background-size: 96px 96px, auto, auto, auto; } }