/* ═══ HALLOWEEN ═════════════════════════════════════════════════════════════ Four treatments in one file. NOTHING here applies unless the server has written data-festive="N" onto , and outside the dates this file is not even linked. Which page gets which, decided in server.js (FESTIVE): ?festive=1 to 4 that treatment, for that page load, on any date ?festive=0 none, even inside the dates otherwise FESTIVE.chosen, between FESTIVE.from and FESTIVE.until: one treatment, or a list taking turns a day at a time (shipped as [1, 2, 3, 4] - all four, one a day) 1 Pumpkin Patch the quietest: aubergine sidebar, warm field, a pumpkin after the page title, an orange Discounted cell 2 Haunted Night a night-sky header with a moon, stars and a ghost; violet sidebar with a ghostly green; ghosts in 1 card in 7 3 Trick or Treat orange header with bats, black sidebar; pumpkins, bats, ghosts and spiders through the cards 4 Haunted Mansion gothic black and wine: a dusk header with a mansion and a graveyard in silhouette; candles, ravens, tombstones Held to, because this is a price list people quote from: - no price changes colour, size or weight. The cell around the Discounted figure may be tinted; the figure never is - stock colours, finish swatches and photographs are never touched - nothing is downloaded: the art is inline SVG, a few hundred bytes each - no backdrop-filter (the iOS crash), and every animation is a transform, behind prefers-reduced-motion - no shared token (--brass-lt, --ink, --stone ...) is redefined The --hw-pumpkin ... --hw-moon-* values below are generated SVG; to redraw one, replace its data: URI. Everything after them is hand-written. ═══════════════════════════════════════════════════════════════════════════ */ html[data-festive]{ --hw-pumpkin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 64'%3E%3Cellipse cx='13' cy='40' rx='11' ry='17' fill='%23e0600a'/%3E%3Cellipse cx='59' cy='40' rx='11' ry='17' fill='%23e0600a'/%3E%3Cellipse cx='22' cy='38' rx='16' ry='22' fill='%23f26d0f'/%3E%3Cellipse cx='50' cy='38' rx='16' ry='22' fill='%23f26d0f'/%3E%3Cellipse cx='36' cy='38' rx='14' ry='23' fill='%23ff8a2a'/%3E%3Cpath fill='%234d8a2b' d='M33.5 17c-.5-6 1.5-11 6.5-13.5l3.2 3.4c-2.8 1.8-4 4.4-3.8 8.6z'/%3E%3Cpath fill='%232a1038' d='M21 29l9 4.5-10 4zM51 29l-9 4.5 10 4zM36 39l-3.6 6.2h7.2z'/%3E%3Cpath fill='%232a1038' d='M20 47c4 10 28 10 32 0l-4.5-2.6-3.7 3.4-3.8-3.4-4 3.4-4-3.4-3.8 3.4-3.7-3.4z'/%3E%3C/svg%3E"); --hw-pumpkin-lit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 64'%3E%3Cellipse cx='13' cy='40' rx='11' ry='17' fill='%23e0600a'/%3E%3Cellipse cx='59' cy='40' rx='11' ry='17' fill='%23e0600a'/%3E%3Cellipse cx='22' cy='38' rx='16' ry='22' fill='%23f26d0f'/%3E%3Cellipse cx='50' cy='38' rx='16' ry='22' fill='%23f26d0f'/%3E%3Cellipse cx='36' cy='38' rx='14' ry='23' fill='%23ff8a2a'/%3E%3Cpath fill='%234d8a2b' d='M33.5 17c-.5-6 1.5-11 6.5-13.5l3.2 3.4c-2.8 1.8-4 4.4-3.8 8.6z'/%3E%3Cpath fill='%23ffe08a' d='M21 29l9 4.5-10 4zM51 29l-9 4.5 10 4zM36 39l-3.6 6.2h7.2z'/%3E%3Cpath fill='%23ffe08a' d='M20 47c4 10 28 10 32 0l-4.5-2.6-3.7 3.4-3.8-3.4-4 3.4-4-3.4-3.8 3.4-3.7-3.4z'/%3E%3C/svg%3E"); --hw-ghost:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 76'%3E%3Cpath fill='%23ffffff' d='M30 3C15 3 6 14 6 30v41l7.5-6 8.5 8 8-8 8 8 8.5-8 7.5 6V30C54 14 45 3 30 3z'/%3E%3Cellipse cx='22' cy='29' rx='3.8' ry='5' fill='%2324143f'/%3E%3Cellipse cx='38' cy='29' rx='3.8' ry='5' fill='%2324143f'/%3E%3Cellipse cx='30' cy='43' rx='4.4' ry='5.6' fill='%2324143f'/%3E%3C/svg%3E"); --hw-ghost-ol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 76'%3E%3Cpath fill='%23ffffff' stroke='%237c5ce0' stroke-width='2.4' stroke-linejoin='round' d='M30 3C15 3 6 14 6 30v41l7.5-6 8.5 8 8-8 8 8 8.5-8 7.5 6V30C54 14 45 3 30 3z'/%3E%3Cellipse cx='22' cy='29' rx='3.8' ry='5' fill='%2324143f'/%3E%3Cellipse cx='38' cy='29' rx='3.8' ry='5' fill='%2324143f'/%3E%3Cellipse cx='30' cy='43' rx='4.4' ry='5.6' fill='%2324143f'/%3E%3C/svg%3E"); --hw-bat-dk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 44'%3E%3Cpolygon fill='%231a0f1f' points='50,12 53,4 56,11 64,8 78,3 92,9 100,18 95,17 91,25 86,20 80,29 74,23 66,32 60,24 56,30 50,40 44,30 40,24 34,32 26,23 20,29 14,20 9,25 5,17 0,18 8,9 22,3 36,8 44,11 47,4'/%3E%3C/svg%3E"); --hw-flock-dk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 90'%3E%3Cg fill='%231a0f1f'%3E%3Cpolygon transform='translate(0 34) rotate(-8 50 22) scale(0.62)' points='50,12 53,4 56,11 64,8 78,3 92,9 100,18 95,17 91,25 86,20 80,29 74,23 66,32 60,24 56,30 50,40 44,30 40,24 34,32 26,23 20,29 14,20 9,25 5,17 0,18 8,9 22,3 36,8 44,11 47,4'/%3E%3Cpolygon transform='translate(118 4) rotate(6 50 22) scale(0.46)' points='50,12 53,4 56,11 64,8 78,3 92,9 100,18 95,17 91,25 86,20 80,29 74,23 66,32 60,24 56,30 50,40 44,30 40,24 34,32 26,23 20,29 14,20 9,25 5,17 0,18 8,9 22,3 36,8 44,11 47,4'/%3E%3Cpolygon transform='translate(214 46) rotate(-4 50 22) scale(0.36)' points='50,12 53,4 56,11 64,8 78,3 92,9 100,18 95,17 91,25 86,20 80,29 74,23 66,32 60,24 56,30 50,40 44,30 40,24 34,32 26,23 20,29 14,20 9,25 5,17 0,18 8,9 22,3 36,8 44,11 47,4'/%3E%3C/g%3E%3C/svg%3E"); --hw-flock-lt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 90'%3E%3Cg fill='rgba(233,221,255,.85)'%3E%3Cpolygon transform='translate(0 34) rotate(-8 50 22) scale(0.62)' points='50,12 53,4 56,11 64,8 78,3 92,9 100,18 95,17 91,25 86,20 80,29 74,23 66,32 60,24 56,30 50,40 44,30 40,24 34,32 26,23 20,29 14,20 9,25 5,17 0,18 8,9 22,3 36,8 44,11 47,4'/%3E%3Cpolygon transform='translate(118 4) rotate(6 50 22) scale(0.46)' points='50,12 53,4 56,11 64,8 78,3 92,9 100,18 95,17 91,25 86,20 80,29 74,23 66,32 60,24 56,30 50,40 44,30 40,24 34,32 26,23 20,29 14,20 9,25 5,17 0,18 8,9 22,3 36,8 44,11 47,4'/%3E%3Cpolygon transform='translate(214 46) rotate(-4 50 22) scale(0.36)' points='50,12 53,4 56,11 64,8 78,3 92,9 100,18 95,17 91,25 86,20 80,29 74,23 66,32 60,24 56,30 50,40 44,30 40,24 34,32 26,23 20,29 14,20 9,25 5,17 0,18 8,9 22,3 36,8 44,11 47,4'/%3E%3C/g%3E%3C/svg%3E"); --hw-spider-dk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 42'%3E%3Cpath fill='none' stroke='%231a0f1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M26 19L35 10L38 4M27 22L38 19L40 25M27 25L37 29L38 36M25 27L32 34L31 40M14 19L5 10L2 4M13 22L2 19L0 25M13 25L3 29L2 36M15 27L8 34L9 40'/%3E%3Cellipse cx='20' cy='26' rx='7.5' ry='9' fill='%231a0f1f'/%3E%3Ccircle cx='20' cy='15' r='5' fill='%231a0f1f'/%3E%3Ccircle cx='18' cy='14' r='1.2' fill='%23fff'/%3E%3Ccircle cx='22' cy='14' r='1.2' fill='%23fff'/%3E%3C/svg%3E"); --hw-spider-or:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 42'%3E%3Cpath fill='none' stroke='%23ffb26b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M26 19L35 10L38 4M27 22L38 19L40 25M27 25L37 29L38 36M25 27L32 34L31 40M14 19L5 10L2 4M13 22L2 19L0 25M13 25L3 29L2 36M15 27L8 34L9 40'/%3E%3Cellipse cx='20' cy='26' rx='7.5' ry='9' fill='%23ffb26b'/%3E%3Ccircle cx='20' cy='15' r='5' fill='%23ffb26b'/%3E%3Ccircle cx='18' cy='14' r='1.2' fill='%231e0e2b'/%3E%3Ccircle cx='22' cy='14' r='1.2' fill='%231e0e2b'/%3E%3C/svg%3E"); --hw-spider-gr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 42'%3E%3Cpath fill='none' stroke='%23a6ffb8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M26 19L35 10L38 4M27 22L38 19L40 25M27 25L37 29L38 36M25 27L32 34L31 40M14 19L5 10L2 4M13 22L2 19L0 25M13 25L3 29L2 36M15 27L8 34L9 40'/%3E%3Cellipse cx='20' cy='26' rx='7.5' ry='9' fill='%23a6ffb8'/%3E%3Ccircle cx='20' cy='15' r='5' fill='%23a6ffb8'/%3E%3Ccircle cx='18' cy='14' r='1.2' fill='%23160c28'/%3E%3Ccircle cx='22' cy='14' r='1.2' fill='%23160c28'/%3E%3C/svg%3E"); --hw-spider-pale:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 42'%3E%3Cpath fill='none' stroke='%23ece6dc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M26 19L35 10L38 4M27 22L38 19L40 25M27 25L37 29L38 36M25 27L32 34L31 40M14 19L5 10L2 4M13 22L2 19L0 25M13 25L3 29L2 36M15 27L8 34L9 40'/%3E%3Cellipse cx='20' cy='26' rx='7.5' ry='9' fill='%23ece6dc'/%3E%3Ccircle cx='20' cy='15' r='5' fill='%23ece6dc'/%3E%3Ccircle cx='18' cy='14' r='1.2' fill='%23141014'/%3E%3Ccircle cx='22' cy='14' r='1.2' fill='%23141014'/%3E%3C/svg%3E"); --hw-web-lt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cpath fill='none' stroke='rgba(255,255,255,.8)' stroke-width='1.2' stroke-linecap='round' d='M140 0L0.8 14.6M140 0L14.2 61.4M140 0L42.7 100.7M140 0L83.1 127.9M140 0L130.2 139.7M106.6 3.5Q114.6 7.3 109.8 14.7M109.8 14.7Q118.6 15.6 116.7 24.2M116.7 24.2Q125.2 21.9 126.3 30.7M126.3 30.7Q133.6 25.7 137.7 33.5M73.2 7Q89.1 14.6 79.6 29.5M79.6 29.5Q97.2 31.1 93.3 48.3M93.3 48.3Q110.4 43.9 112.7 61.4M112.7 61.4Q127.2 51.4 135.3 67M39.8 10.5Q63.7 21.9 49.4 44.2M49.4 44.2Q75.8 46.7 70 72.5M70 72.5Q95.6 65.8 99 92.1M99 92.1Q120.8 77.1 133 100.6M6.3 14Q38.2 29.2 19.2 58.9M19.2 58.9Q54.3 62.2 46.6 96.7M46.6 96.7Q80.8 87.8 85.3 122.8M85.3 122.8Q114.4 102.7 130.6 134.1'/%3E%3C/svg%3E"); --hw-web-vi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cpath fill='none' stroke='rgba(205,190,255,.85)' stroke-width='1.2' stroke-linecap='round' d='M140 0L0.8 14.6M140 0L14.2 61.4M140 0L42.7 100.7M140 0L83.1 127.9M140 0L130.2 139.7M106.6 3.5Q114.6 7.3 109.8 14.7M109.8 14.7Q118.6 15.6 116.7 24.2M116.7 24.2Q125.2 21.9 126.3 30.7M126.3 30.7Q133.6 25.7 137.7 33.5M73.2 7Q89.1 14.6 79.6 29.5M79.6 29.5Q97.2 31.1 93.3 48.3M93.3 48.3Q110.4 43.9 112.7 61.4M112.7 61.4Q127.2 51.4 135.3 67M39.8 10.5Q63.7 21.9 49.4 44.2M49.4 44.2Q75.8 46.7 70 72.5M70 72.5Q95.6 65.8 99 92.1M99 92.1Q120.8 77.1 133 100.6M6.3 14Q38.2 29.2 19.2 58.9M19.2 58.9Q54.3 62.2 46.6 96.7M46.6 96.7Q80.8 87.8 85.3 122.8M85.3 122.8Q114.4 102.7 130.6 134.1'/%3E%3C/svg%3E"); --hw-moon-harvest:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='m' cx='38%25' cy='34%25' r='70%25'%3E%3Cstop offset='0' stop-color='%23fff1cf'/%3E%3Cstop offset='1' stop-color='%23f7b65a'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='48' fill='url(%23m)'/%3E%3Cg fill='%23d98a2b'%3E%3Ccircle cx='33' cy='37' r='9' opacity='.5'/%3E%3Ccircle cx='63' cy='61' r='12' opacity='.4'/%3E%3Ccircle cx='61' cy='29' r='5' opacity='.45'/%3E%3Ccircle cx='37' cy='69' r='6' opacity='.35'/%3E%3Ccircle cx='76' cy='42' r='3.5' opacity='.4'/%3E%3C/g%3E%3C/svg%3E"); --hw-moon-pale:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='m' cx='38%25' cy='34%25' r='70%25'%3E%3Cstop offset='0' stop-color='%23fffdf2'/%3E%3Cstop offset='1' stop-color='%23e6dcf7'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='48' fill='url(%23m)'/%3E%3Cg fill='%23b9a8d9'%3E%3Ccircle cx='33' cy='37' r='9' opacity='.5'/%3E%3Ccircle cx='63' cy='61' r='12' opacity='.4'/%3E%3Ccircle cx='61' cy='29' r='5' opacity='.45'/%3E%3Ccircle cx='37' cy='69' r='6' opacity='.35'/%3E%3Ccircle cx='76' cy='42' r='3.5' opacity='.4'/%3E%3C/g%3E%3C/svg%3E"); --hw-moon-orange:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='m' cx='38%25' cy='34%25' r='70%25'%3E%3Cstop offset='0' stop-color='%23ffd08a'/%3E%3Cstop offset='1' stop-color='%23ff7a1a'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='48' fill='url(%23m)'/%3E%3Cg fill='%23c8540a'%3E%3Ccircle cx='33' cy='37' r='9' opacity='.5'/%3E%3Ccircle cx='63' cy='61' r='12' opacity='.4'/%3E%3Ccircle cx='61' cy='29' r='5' opacity='.45'/%3E%3Ccircle cx='37' cy='69' r='6' opacity='.35'/%3E%3Ccircle cx='76' cy='42' r='3.5' opacity='.4'/%3E%3C/g%3E%3C/svg%3E"); --hw-moon-warm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='m' cx='38%25' cy='34%25' r='70%25'%3E%3Cstop offset='0' stop-color='%23fff7e6'/%3E%3Cstop offset='1' stop-color='%23f0d9b5'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='48' fill='url(%23m)'/%3E%3Cg fill='%23cdb38c'%3E%3Ccircle cx='33' cy='37' r='9' opacity='.5'/%3E%3Ccircle cx='63' cy='61' r='12' opacity='.4'/%3E%3Ccircle cx='61' cy='29' r='5' opacity='.45'/%3E%3Ccircle cx='37' cy='69' r='6' opacity='.35'/%3E%3Ccircle cx='76' cy='42' r='3.5' opacity='.4'/%3E%3C/g%3E%3C/svg%3E"); --hw-skyline:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 120'%3E%3Cpath fill='%230d0709' d='M0 120V106C120 98 220 104 330 100S560 96 700 101S860 98 900 100V120Z'/%3E%3Cpath fill='none' stroke='%230d0709' stroke-linecap='round' stroke-width='7' d='M72 106C70 92 74 80 70 64'/%3E%3Cpath fill='none' stroke='%230d0709' stroke-linecap='round' stroke-width='4' d='M71 80C60 74 50 70 38 58'/%3E%3Cpath fill='none' stroke='%230d0709' stroke-linecap='round' stroke-width='2.5' d='M48 66C44 60 44 54 38 48'/%3E%3Cpath fill='none' stroke='%230d0709' stroke-linecap='round' stroke-width='2' d='M56 72C54 66 50 64 46 62'/%3E%3Cpath fill='none' stroke='%230d0709' stroke-linecap='round' stroke-width='4' d='M71 74C82 66 94 62 108 50'/%3E%3Cpath fill='none' stroke='%230d0709' stroke-linecap='round' stroke-width='2.5' d='M96 60C100 52 106 48 112 42'/%3E%3Cpath fill='none' stroke='%230d0709' stroke-linecap='round' stroke-width='3.5' d='M70 64C68 56 72 48 74 38'/%3E%3Cpath fill='none' stroke='%230d0709' stroke-linecap='round' stroke-width='2' d='M71 54C64 48 60 44 56 36'/%3E%3Cpath fill='none' stroke='%230d0709' stroke-linecap='round' stroke-width='2' d='M73 46C78 40 84 36 88 30'/%3E%3Cpath fill='%230d0709' d='M150 104V86a10 10 0 0 1 20 0V104ZM178 104V92a7 7 0 0 1 14 0V104ZM204 104V82h-7v-6h7v-7h6v7h7v6h-7V104ZM228 104L230 88Q238 82 246 88L248 104Z'/%3E%3Cpath fill='%230d0709' d='M268 88H424v2H268ZM268 98H424v2H268ZM270 104V84l2-5l2 5V104ZM280 104V84l2-5l2 5V104ZM290 104V84l2-5l2 5V104ZM300 104V84l2-5l2 5V104ZM310 104V84l2-5l2 5V104ZM320 104V84l2-5l2 5V104ZM330 104V84l2-5l2 5V104ZM340 104V84l2-5l2 5V104ZM350 104V84l2-5l2 5V104ZM360 104V84l2-5l2 5V104ZM370 104V84l2-5l2 5V104ZM380 104V84l2-5l2 5V104ZM390 104V84l2-5l2 5V104ZM400 104V84l2-5l2 5V104ZM410 104V84l2-5l2 5V104ZM420 104V84l2-5l2 5V104Z'/%3E%3Cpath fill='none' stroke='%230d0709' stroke-linecap='round' stroke-width='4' d='M452 104C451 96 454 88 451 78'/%3E%3Cpath fill='none' stroke='%230d0709' stroke-linecap='round' stroke-width='2.5' d='M452 88C446 84 442 80 438 74'/%3E%3Cpath fill='none' stroke='%230d0709' stroke-linecap='round' stroke-width='2.5' d='M452 84C458 80 462 76 466 70'/%3E%3Cpath fill='none' stroke='%230d0709' stroke-linecap='round' stroke-width='2' d='M451 78C450 72 452 68 454 64'/%3E%3Cpath fill='%230d0709' d='M520 104V52L538 18L556 52V104ZM556 104V62L622 28L688 62V104ZM600 52L612 40L624 52V60H600ZM650 46V30h9V50ZM580 52V38h8V48ZM688 104V74L722 56L756 74V104Z'/%3E%3Cpath fill='none' stroke='%230d0709' stroke-width='2' d='M538 18V8'/%3E%3Cpath fill='%23ffcf6b' d='M533 74V64a5 5 0 0 1 10 0V74Z'/%3E%3Crect x='533' y='86' width='10' height='10' fill='%233a2a32'/%3E%3Crect x='570' y='66' width='10' height='12' fill='%23ffcf6b'/%3E%3Cpath stroke='%230d0709' stroke-width='1' d='M575 66v12M570 72h10'/%3E%3Crect x='592' y='66' width='10' height='12' fill='%233a2a32'/%3E%3Crect x='652' y='66' width='10' height='12' fill='%23ffcf6b'/%3E%3Cpath stroke='%230d0709' stroke-width='1' d='M657 66v12M652 72h10'/%3E%3Crect x='672' y='66' width='10' height='12' fill='%23ffcf6b'/%3E%3Cpath stroke='%230d0709' stroke-width='1' d='M677 66v12M672 72h10'/%3E%3Crect x='570' y='84' width='10' height='12' fill='%233a2a32'/%3E%3Crect x='592' y='84' width='10' height='12' fill='%23ffcf6b'/%3E%3Cpath stroke='%230d0709' stroke-width='1' d='M597 84v12M592 90h10'/%3E%3Crect x='652' y='84' width='10' height='12' fill='%233a2a32'/%3E%3Crect x='672' y='84' width='10' height='12' fill='%23ffcf6b'/%3E%3Cpath stroke='%230d0709' stroke-width='1' d='M677 84v12M672 90h10'/%3E%3Crect x='607' y='50' width='10' height='8' fill='%23ffcf6b'/%3E%3Cpath stroke='%230d0709' stroke-width='1' d='M612 50v8M607 54h10'/%3E%3Crect x='704' y='82' width='10' height='12' fill='%23ffcf6b'/%3E%3Cpath stroke='%230d0709' stroke-width='1' d='M709 82v12M704 88h10'/%3E%3Crect x='730' y='82' width='10' height='12' fill='%233a2a32'/%3E%3Cpath fill='%23ffcf6b' opacity='.75' d='M616 104V94a6 6 0 0 1 12 0V104Z'/%3E%3Cpath fill='%230d0709' d='M800 104V90a8 8 0 0 1 16 0V104ZM838 104V86h-5v-5h5v-6h5v6h5v5h-5V104ZM862 104L864 92Q870 87 876 92L878 104Z'/%3E%3C/svg%3E"); --hw-candle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64'%3E%3Ccircle cx='20' cy='16' r='13' fill='%23ffd27a' opacity='.3'/%3E%3Cpath fill='%23ffae2b' d='M20 3C25.5 10 26.5 17 20 23C13.5 17 14.5 10 20 3z'/%3E%3Cpath fill='%23fff2a8' d='M20 10C22.6 14 23 17.5 20 21C17 17.5 17.4 14 20 10z'/%3E%3Cpath stroke='%233a2a32' stroke-width='1.6' stroke-linecap='round' d='M20 23v4'/%3E%3Cpath fill='%23f3e6cc' d='M11 27h18v31a3 3 0 0 1-3 3H14a3 3 0 0 1-3-3z'/%3E%3Cpath fill='%23e2cfa9' d='M23 27h6v31a3 3 0 0 1-3 3h-3z'/%3E%3Cpath fill='%23fbf3e2' d='M11 27h18v4c-1.5 0-1.5 5-3 5s-1.5-3-3-3-1.5 7-3 7-1.5-6-3-6-1.5 3-3 3-1.5-2-3-2z'/%3E%3C/svg%3E"); --hw-tombstone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 58'%3E%3Cpath fill='%23a3a0b1' d='M7 53V24a17 17 0 0 1 34 0v29z'/%3E%3Cpath fill='%238b879d' d='M24 7a17 17 0 0 1 17 17v29H24z'/%3E%3Cpath fill='%236c6880' d='M22 17h4v7h7v4h-7v13h-4V28h-7v-4h7z'/%3E%3Cpath fill='%234d8a2b' d='M2 58c0-4 3-6 6-5 1-3 4-4 6-2 2-2 5-2 6 1 2-2 5-2 7 0 2-2 5-1 6 1 2-1 5 0 6 2 2-1 5 0 5 3z'/%3E%3C/svg%3E"); --hw-raven:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath fill='%23120d10' d='M4 30L18 26C22 20 30 16 38 16C42 10 48 7 53 8C56 9 58 11 59 13L64 15L59 16.5C58 20 55 23 51 25C49 31 43 36 34 37L31 38L30 44H28.5L29 38L25 38.5L24 44H22.5L23.5 38C18 37 14 34 12 31Z'/%3E%3Ccircle cx='52.5' cy='12' r='1.5' fill='%23ffcf6b'/%3E%3C/svg%3E"); } /* ── What every treatment shares ───────────────────────────────────────── The colours come from the --hw-* tokens each treatment sets further down. Shared tokens (--brass-lt, --ink, --stone...) are never redefined here: Mid-Autumn redefined --brass-lt and tinted things that had nothing to do with the festival. */ /* The header and the sidebar's top get a positioning context for their art. Neither had one, and nothing inside either is absolutely positioned, so nothing that was there moves. The header's own content is lifted above anything painted behind it. */ html[data-festive] #mhdr, html[data-festive] #sb-top{position:relative} html[data-festive] #mhdr > *{position:relative;z-index:1} /* a cobweb in the sidebar's top corner, and a spider on a thread from it */ html[data-festive] #sb-top::before{ content:'';position:absolute;top:0;right:0;width:76px;height:76px;pointer-events:none; background:var(--hw-web) no-repeat right top/contain;opacity:var(--hw-web-o)} html[data-festive] #sb-top::after{ content:'';position:absolute;top:0;right:20px;width:20px;height:60px;pointer-events:none; transform-origin:50% 0; background: linear-gradient(var(--hw-thread),var(--hw-thread)) no-repeat 50% 0/1px 42px, var(--hw-spider) no-repeat 50% 100%/20px 21px} /* the greeting, under the wordmark */ html[data-festive] .sb-brand-copy::after{ content:var(--hw-greet);display:block;margin-top:10px; font:800 9px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase; color:var(--hw-accent-lt)} /* the sidebar's own accents: the selected page, the rules, the Rigel pill */ html[data-festive] .ni:hover{background:var(--hw-nav-hover)} html[data-festive] .ni.on{background:var(--hw-nav-on)} html[data-festive] .ni.on::before{background:var(--hw-accent)} html[data-festive] .ni.on .ni-sub{color:var(--hw-accent-lt)} html[data-festive] #sb-rule{background:var(--hw-rule)} html[data-festive] #sb-foot{border-top-color:var(--hw-rule)} html[data-festive] .sb-rigel{color:var(--hw-accent-lt);border-color:var(--hw-rule);background:var(--hw-nav-on)} html[data-festive] .sb-rigel::before{background:var(--hw-accent)} html[data-festive] .sbf-panel{background:linear-gradient(145deg,rgba(255,255,255,.12),var(--hw-nav-on))} /* the phone's menu button */ html[data-festive] #mob-btn{background:var(--hw-mob-bg);color:var(--hw-mob-fg);border-color:var(--hw-mob-bd)} /* THE PRICE. The Discounted figure is the one quoted across a desk, so the cell around it takes the season and the figure does not: the same size, weight and ink as every other price on the page. Which cell that is, measured on all 236 cards: in the Distributor view the one before Distributor (RRP | Discounted | Distributor, or Discounted | Distributor where a product has no RRP); in the Sales view the last. Gain City's two layouts are different and are left alone, and so is a discontinued card, which is greyed out on purpose. */ html[data-festive] body.role-dist #pgrid .pcard:not(.pc-disc) .pc-prices:not(.pc-gcflat) > .ppc:nth-last-child(2):not(.d), html[data-festive] body.role-sales #pgrid .pcard:not(.pc-disc) .pc-prices:not(.pc-gcflat) > .ppc:last-child:not(.d){ background:var(--hw-price-bg)} html[data-festive] body.role-dist #pgrid .pcard:not(.pc-disc) .pc-prices:not(.pc-gcflat) > .ppc:nth-last-child(2):not(.d) .ppc-l, html[data-festive] body.role-sales #pgrid .pcard:not(.pc-disc) .pc-prices:not(.pc-gcflat) > .ppc:last-child:not(.d) .ppc-l{ color:var(--hw-price-lbl)} html[data-festive] body.role-dist #pgrid .pcard:not(.pc-disc) .pc-prices:not(.pc-gcflat) > .ppc:nth-last-child(2):not(.d)::after, html[data-festive] body.role-sales #pgrid .pcard:not(.pc-disc) .pc-prices:not(.pc-gcflat) > .ppc:last-child:not(.d)::after{ content:'';position:absolute;top:6px;right:6px;width:14px;height:14px;pointer-events:none; background:var(--hw-price-ico) no-repeat center/contain} /* a card with a finish table: the same column, by its heading */ html[data-festive] body.role-dist #pgrid .pcard:not(.pc-disc) .pc-ftbl th:nth-last-child(2), html[data-festive] body.role-sales #pgrid .pcard:not(.pc-disc) .pc-ftbl th:last-child{ color:var(--hw-price-lbl)} /* The scatter: a character in a card's top corner, over the photograph's empty margin. Placed by position at co-prime strides, so they land irregularly, and deterministic rather than random, so a product keeps its decoration when the grid redraws on a search instead of reshuffling under the cursor. One per card at most (a card has one ::after). Drawn, not downloaded and not decoded: nothing here adds to the photographs' memory. The strides are in each treatment below. */ /* The login screen: art goes behind the two panels, never over them. The sign-in box is centred, so how far down it starts depends on the window's HEIGHT: 249px on a 900px screen, 183px on a 768px laptop. The moon above it is therefore sized and placed by height (--hw-m), or on a short screen it slides behind the box. */ html[data-festive] #gate::after{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0; --hw-m:clamp(56px,min(13vh,11vw),150px)} html[data-festive] #gate .gate-box{position:relative} html[data-festive] #gate .gate-eyebrow, html[data-festive] #gate .gate-sub, html[data-festive] #gate .gate-metric span{color:var(--hw-accent-lt)} /* the little "Password" tag on the field's border, and the field in focus */ html[data-festive] #gate .gate-field::before{background:var(--hw-tag-bg);color:var(--hw-accent-lt)} html[data-festive] #gate input:focus{border-color:var(--hw-accent-lt);box-shadow:0 0 0 4px var(--hw-nav-on)} /* a pumpkin, or a ghost, perched on the sign-in box */ html[data-festive] #gate .gate-box::before{ content:'';position:absolute;top:-34px;right:28px;width:52px;height:46px;pointer-events:none; background:var(--hw-perch) no-repeat center bottom/contain} /* the greeting, above the title */ html[data-festive] #gate .gate-panel::before{ content:var(--hw-greet);display:block;margin:0 0 18px; font:800 11px/1.2 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--hw-accent-lt)} /* ═══ 1 · PUMPKIN PATCH ════════════════════════════════════════════════════ The quietest. The page stays light; the sidebar goes aubergine with pumpkin-orange accents, the field warms up, a pumpkin follows the page title, and the Discounted price sits in a soft orange cell. */ html[data-festive="1"]{ --hw-greet:"Happy Halloween"; --hw-accent:#ff8a2a;--hw-accent-lt:#ffb26b; --hw-nav-on:rgba(255,138,42,.15);--hw-nav-hover:rgba(255,170,90,.06);--hw-rule:rgba(255,138,42,.24); --hw-web:var(--hw-web-lt);--hw-web-o:.42; --hw-spider:var(--hw-spider-or);--hw-thread:rgba(255,178,107,.55); --hw-price-bg:linear-gradient(180deg,rgba(255,150,60,.15),rgba(255,150,60,.06)); --hw-price-lbl:#a34a06;--hw-price-ico:var(--hw-pumpkin); --hw-mob-bg:#2b1439;--hw-mob-fg:#ffb26b;--hw-mob-bd:#ff8a2a; --hw-perch:var(--hw-pumpkin-lit);--hw-tag-bg:#3b2133; } html[data-festive="1"] #sb{background:linear-gradient(170deg,#2b1439 0%,#1e0e2b 55%,#150a20 100%)} html[data-festive="1"] #mhdr{ background:linear-gradient(90deg,rgba(255,252,247,.92) 0%,rgba(255,243,229,.90) 62%,rgba(255,230,204,.92) 100%)} html[data-festive="1"] #mh1::after{ content:'';display:inline-block;width:.95em;height:.85em;margin-left:.32em;vertical-align:-.08em; background:var(--hw-pumpkin) no-repeat center/contain} html[data-festive="1"] #scroll{ /* calm, and clean: one tone, a moon glow in the corner and one low silhouette along the foot. Nothing repeats and nothing is small - a scatter of small faint marks reads as dirt on the screen */ background-color:#f6f0e9; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cpath%20fill%3D%22%236b4423%22%20fill-opacity%3D%22.06%22%20d%3D%22M60%2012A48%2048%200%201%200%2060%20108A38%2038%200%201%201%2060%2012Z%22%2F%3E%3C%2Fsvg%3E"), radial-gradient(circle at calc(100% - 92px) 88px,rgba(255,226,180,.55) 0,rgba(255,255,255,0) 190px), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%22240%22%20viewBox%3D%220%200%201600%20240%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Cg%20fill%3D%22%236b4423%22%20fill-opacity%3D%22.045%22%3E%3Cpath%20d%3D%22M0%20170C220%20120%20420%20118%20640%20150S1060%20120%201240%20110%201500%20128%201600%20140V240H0Z%22%2F%3E%3Cpath%20d%3D%22M1180%20118V66L1214%2038%201248%2066V112ZM1230%2070V30H1250V70Z%22%2F%3E%3Cpath%20d%3D%22M1240%20112V78L1266%2056%201292%2078V108Z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%236b4423%22%20fill-opacity%3D%22.06%22%3E%3Cpath%20d%3D%22M0%20205C260%20180%20520%20176%20800%20196S1300%20182%201600%20196V240H0Z%22%2F%3E%3Cg%20transform%3D%22translate(300%20166)%20scale(1.5)%22%3E%3Cellipse%20cx%3D%229%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2222%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2215.5%22%20cy%3D%2214%22%20rx%3D%228%22%20ry%3D%2211%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%220%22%20width%3D%223%22%20height%3D%226%22%20rx%3D%221.5%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(352%20176)%20scale(1.05)%22%3E%3Cellipse%20cx%3D%229%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2222%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2215.5%22%20cy%3D%2214%22%20rx%3D%228%22%20ry%3D%2211%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%220%22%20width%3D%223%22%20height%3D%226%22%20rx%3D%221.5%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(1380%20166)%20scale(1.3)%22%3E%3Cellipse%20cx%3D%229%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2222%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2215.5%22%20cy%3D%2214%22%20rx%3D%228%22%20ry%3D%2211%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%220%22%20width%3D%223%22%20height%3D%226%22%20rx%3D%221.5%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size:120px 120px,100% 100%,100% 240px; background-position:right 32px top 28px,0 0,center bottom; background-repeat:no-repeat,no-repeat,no-repeat} /* the login screen: a harvest moon over the map, pumpkins on the ground */ html[data-festive="1"] #gate::after{ background: var(--hw-moon-harvest) no-repeat right 5vw top 3vh/var(--hw-m) var(--hw-m), radial-gradient(circle at calc(100% - 5vw - var(--hw-m)/2) calc(3vh + var(--hw-m)/2),rgba(255,190,110,.26),transparent calc(var(--hw-m)*1.7)), var(--hw-pumpkin-lit) no-repeat left 5% bottom 4%/clamp(54px,6vw,84px) auto, var(--hw-pumpkin-lit) no-repeat left calc(5% + clamp(58px,6.4vw,90px)) bottom 4%/clamp(38px,4.2vw,58px) auto, radial-gradient(ellipse at 10% 100%,rgba(255,138,42,.22),transparent 34%)} /* ═══ 2 · HAUNTED NIGHT ════════════════════════════════════════════════════ The header becomes a night sky with a pale moon, stars and a ghost, the sidebar goes violet-black with a ghostly green, the field turns misty lavender, and a few ghosts peek out of the cards. */ html[data-festive="2"]{ --hw-greet:"Happy Halloween"; --hw-accent:#7dff9a;--hw-accent-lt:#a6ffb8; --hw-nav-on:rgba(125,255,154,.10);--hw-nav-hover:rgba(185,160,255,.07);--hw-rule:rgba(160,130,255,.24); --hw-web:var(--hw-web-vi);--hw-web-o:.5; --hw-spider:var(--hw-spider-gr);--hw-thread:rgba(166,255,184,.45); --hw-price-bg:linear-gradient(180deg,rgba(124,77,255,.10),rgba(124,77,255,.04)); --hw-price-lbl:#5b3cc4;--hw-price-ico:var(--hw-ghost-ol); --hw-mob-bg:#24143f;--hw-mob-fg:#a6ffb8;--hw-mob-bd:#7c4dff; --hw-perch:var(--hw-ghost);--hw-tag-bg:#2b1a4a; } html[data-festive="2"] #sb{background:linear-gradient(170deg,#1f1236 0%,#160c28 60%,#0f081c 100%)} /* the sky. The stars are a scatter of tiny gradients; the moon is drawn on the ::before so the header's own background can stay a plain gradient */ html[data-festive="2"] #mhdr{ background: radial-gradient(1.2px 1.2px at 22% 28%,rgba(255,255,255,.9),transparent), radial-gradient(1px 1px at 31% 70%,rgba(255,255,255,.7),transparent), radial-gradient(1.4px 1.4px at 47% 22%,rgba(255,255,255,.85),transparent), radial-gradient(1px 1px at 55% 64%,rgba(255,255,255,.6),transparent), radial-gradient(1.2px 1.2px at 63% 36%,rgba(255,255,255,.8),transparent), radial-gradient(1px 1px at 71% 78%,rgba(255,255,255,.55),transparent), radial-gradient(1.3px 1.3px at 84% 18%,rgba(255,255,255,.75),transparent), radial-gradient(1px 1px at 92% 62%,rgba(255,255,255,.6),transparent), linear-gradient(100deg,#1b1030 0%,#251442 55%,#30195a 100%); border-bottom-color:rgba(0,0,0,.35); box-shadow:inset 0 -1px 0 rgba(255,255,255,.06)} html[data-festive="2"] #mh1{color:#f6f1ff} html[data-festive="2"] #mh2{color:#bfb0dc} /* the pills sit in front of the sky, so they are solid - a translucent one lets the moon shine through the word CONFIDENTIAL */ html[data-festive="2"] #rigel-ref, html[data-festive="2"] #mhdr-badge, html[data-festive="2"] #mhdr-company-name{background:#fff;border-color:rgba(255,255,255,.7)} html[data-festive="2"] #mhdr::before{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0; background: var(--hw-moon-pale) no-repeat right 290px top -24px/84px 84px, radial-gradient(circle at calc(100% - 332px) 18px,rgba(236,228,255,.30),transparent 90px)} html[data-festive="2"] #mhdr::after{ content:'';position:absolute;right:412px;top:26px;width:24px;height:31px;pointer-events:none;z-index:0; background:var(--hw-ghost) no-repeat center/contain;opacity:.92} html[data-festive="2"] #scroll{ /* calm, and clean: one tone, a moon glow in the corner and one low silhouette along the foot. Nothing repeats and nothing is small - a scatter of small faint marks reads as dirt on the screen */ background-color:#f3f1f6; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cpath%20fill%3D%22%233d2a5c%22%20fill-opacity%3D%22.06%22%20d%3D%22M60%2012A48%2048%200%201%200%2060%20108A38%2038%200%201%201%2060%2012Z%22%2F%3E%3C%2Fsvg%3E"), radial-gradient(circle at calc(100% - 92px) 88px,rgba(230,222,248,.65) 0,rgba(255,255,255,0) 190px), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%22240%22%20viewBox%3D%220%200%201600%20240%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Cg%20fill%3D%22%233d2a5c%22%20fill-opacity%3D%22.045%22%3E%3Cpath%20d%3D%22M0%20170C220%20120%20420%20118%20640%20150S1060%20120%201240%20110%201500%20128%201600%20140V240H0Z%22%2F%3E%3Cpath%20d%3D%22M1180%20118V66L1214%2038%201248%2066V112ZM1230%2070V30H1250V70Z%22%2F%3E%3Cpath%20d%3D%22M1240%20112V78L1266%2056%201292%2078V108Z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%233d2a5c%22%20fill-opacity%3D%22.06%22%3E%3Cpath%20d%3D%22M0%20205C260%20180%20520%20176%20800%20196S1300%20182%201600%20196V240H0Z%22%2F%3E%3Cg%20transform%3D%22translate(300%20166)%20scale(1.5)%22%3E%3Cellipse%20cx%3D%229%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2222%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2215.5%22%20cy%3D%2214%22%20rx%3D%228%22%20ry%3D%2211%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%220%22%20width%3D%223%22%20height%3D%226%22%20rx%3D%221.5%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(352%20176)%20scale(1.05)%22%3E%3Cellipse%20cx%3D%229%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2222%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2215.5%22%20cy%3D%2214%22%20rx%3D%228%22%20ry%3D%2211%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%220%22%20width%3D%223%22%20height%3D%226%22%20rx%3D%221.5%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(1380%20166)%20scale(1.3)%22%3E%3Cellipse%20cx%3D%229%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2222%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2215.5%22%20cy%3D%2214%22%20rx%3D%228%22%20ry%3D%2211%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%220%22%20width%3D%223%22%20height%3D%226%22%20rx%3D%221.5%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size:120px 120px,100% 100%,100% 240px; background-position:right 32px top 28px,0 0,center bottom; background-repeat:no-repeat,no-repeat,no-repeat} /* ghosts in the cards: one in seven */ html[data-festive="2"] #pgrid > .pcard:nth-child(7n+3)::after{ content:'';position:absolute;top:12px;left:12px;width:27px;height:34px;pointer-events:none;z-index:1; background:var(--hw-ghost-ol) no-repeat center/contain} /* the login screen: a violet veil over the map, a pale moon, two ghosts */ html[data-festive="2"] #gate::after{ background: var(--hw-moon-pale) no-repeat right 5vw top 3vh/var(--hw-m) var(--hw-m), radial-gradient(circle at calc(100% - 5vw - var(--hw-m)/2) calc(3vh + var(--hw-m)/2),rgba(220,205,255,.24),transparent calc(var(--hw-m)*1.7)), var(--hw-ghost) no-repeat left 6% bottom 9%/clamp(40px,4.4vw,62px) auto, var(--hw-ghost) no-repeat left calc(6% + clamp(54px,6vw,84px)) bottom calc(9% + clamp(26px,3vw,42px))/clamp(26px,2.9vw,40px) auto, var(--hw-flock-lt) no-repeat left 34% top 4vh/clamp(150px,17vw,240px) auto, linear-gradient(160deg,rgba(48,20,92,.46),rgba(20,8,40,.40))} /* ═══ 3 · TRICK OR TREAT ═══════════════════════════════════════════════════ The full show, in orange and black. A pumpkin-orange header with bats in it, a black sidebar, the Discounted price in an orange cell, and pumpkins, bats, ghosts and spiders scattered through the cards. */ html[data-festive="3"]{ --hw-greet:"Trick or Treat"; --hw-accent:#ff7a1a;--hw-accent-lt:#ffa552; --hw-nav-on:rgba(255,122,26,.16);--hw-nav-hover:rgba(255,160,80,.07);--hw-rule:rgba(255,122,26,.26); --hw-web:var(--hw-web-lt);--hw-web-o:.5; --hw-spider:var(--hw-spider-pale);--hw-thread:rgba(236,230,220,.5); --hw-price-bg:linear-gradient(180deg,rgba(255,122,26,.17),rgba(255,122,26,.07)); --hw-price-lbl:#a34a06;--hw-price-ico:var(--hw-pumpkin); --hw-mob-bg:#ff7a1a;--hw-mob-fg:#141014;--hw-mob-bd:#141014; --hw-perch:var(--hw-pumpkin-lit);--hw-tag-bg:#2b1b12; } html[data-festive="3"] #sb{background:linear-gradient(170deg,#1c171c 0%,#141014 60%,#0d0a0d 100%)} html[data-festive="3"] #mhdr{ background:linear-gradient(100deg,#ffa047 0%,#ff8a2a 45%,#f5731a 100%); border-bottom-color:rgba(20,16,20,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.35)} html[data-festive="3"] #mh2{color:#4a2306} html[data-festive="3"] #rigel-ref, html[data-festive="3"] #mhdr-badge, html[data-festive="3"] #mhdr-company-name{background:#fff;border-color:rgba(255,255,255,.8)} html[data-festive="3"] #mh1::after{ content:'';display:inline-block;width:1.15em;height:.52em;margin-left:.34em;vertical-align:.18em; background:var(--hw-bat-dk) no-repeat center/contain} /* a flock, crossing the space the header leaves free */ html[data-festive="3"] #mhdr::before{ content:'';position:absolute;right:262px;bottom:6px;width:160px;height:48px;pointer-events:none;z-index:0; background:var(--hw-flock-dk) no-repeat center/contain} html[data-festive="3"] #scroll{ /* calm, and clean: one tone, a moon glow in the corner and one low silhouette along the foot. Nothing repeats and nothing is small - a scatter of small faint marks reads as dirt on the screen */ background-color:#f7f0e8; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cpath%20fill%3D%22%236b3a12%22%20fill-opacity%3D%22.06%22%20d%3D%22M60%2012A48%2048%200%201%200%2060%20108A38%2038%200%201%201%2060%2012Z%22%2F%3E%3C%2Fsvg%3E"), radial-gradient(circle at calc(100% - 92px) 88px,rgba(255,222,176,.55) 0,rgba(255,255,255,0) 190px), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%22240%22%20viewBox%3D%220%200%201600%20240%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Cg%20fill%3D%22%236b3a12%22%20fill-opacity%3D%22.045%22%3E%3Cpath%20d%3D%22M0%20170C220%20120%20420%20118%20640%20150S1060%20120%201240%20110%201500%20128%201600%20140V240H0Z%22%2F%3E%3Cpath%20d%3D%22M1180%20118V66L1214%2038%201248%2066V112ZM1230%2070V30H1250V70Z%22%2F%3E%3Cpath%20d%3D%22M1240%20112V78L1266%2056%201292%2078V108Z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%236b3a12%22%20fill-opacity%3D%22.06%22%3E%3Cpath%20d%3D%22M0%20205C260%20180%20520%20176%20800%20196S1300%20182%201600%20196V240H0Z%22%2F%3E%3Cg%20transform%3D%22translate(300%20166)%20scale(1.5)%22%3E%3Cellipse%20cx%3D%229%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2222%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2215.5%22%20cy%3D%2214%22%20rx%3D%228%22%20ry%3D%2211%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%220%22%20width%3D%223%22%20height%3D%226%22%20rx%3D%221.5%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(352%20176)%20scale(1.05)%22%3E%3Cellipse%20cx%3D%229%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2222%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2215.5%22%20cy%3D%2214%22%20rx%3D%228%22%20ry%3D%2211%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%220%22%20width%3D%223%22%20height%3D%226%22%20rx%3D%221.5%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(1380%20166)%20scale(1.3)%22%3E%3Cellipse%20cx%3D%229%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2222%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2215.5%22%20cy%3D%2214%22%20rx%3D%228%22%20ry%3D%2211%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%220%22%20width%3D%223%22%20height%3D%226%22%20rx%3D%221.5%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size:120px 120px,100% 100%,100% 240px; background-position:right 32px top 28px,0 0,center bottom; background-repeat:no-repeat,no-repeat,no-repeat} /* the Discounted column of a finish table, washed the same as the flat cell */ html[data-festive="3"] body.role-dist #pgrid .pcard:not(.pc-disc) .pc-ftbl td:nth-last-child(2), html[data-festive="3"] body.role-sales #pgrid .pcard:not(.pc-disc) .pc-ftbl td:last-child{ background:rgba(255,122,26,.07)} /* the scatter: a spider, a pumpkin, a bat and a ghost, at strides 13, 9, 11, 17 */ html[data-festive="3"] #pgrid > .pcard:is(:nth-child(13n+1),:nth-child(9n+4),:nth-child(11n+7),:nth-child(17n+10))::after{ content:'';position:absolute;top:12px;left:12px;width:32px;height:32px;pointer-events:none;z-index:1; background:no-repeat center/contain} html[data-festive="3"] #pgrid > .pcard:nth-child(9n+4)::after{background-image:var(--hw-pumpkin);width:36px;height:32px} html[data-festive="3"] #pgrid > .pcard:nth-child(11n+7)::after{background-image:var(--hw-bat-dk);width:40px;height:18px;top:16px} html[data-festive="3"] #pgrid > .pcard:nth-child(17n+10)::after{background-image:var(--hw-ghost-ol);width:26px;height:33px} /* the spider hangs from the card's top edge on its thread */ html[data-festive="3"] #pgrid > .pcard:nth-child(13n+1)::after{ top:0;left:22px;width:18px;height:44px; background: linear-gradient(rgba(26,15,31,.55),rgba(26,15,31,.55)) no-repeat 50% 0/1px 27px, var(--hw-spider-dk) no-repeat 50% 100%/18px 19px} /* the login screen: an orange moon with bats across it */ html[data-festive="3"] #gate::after{ background: var(--hw-flock-dk) no-repeat right calc(5vw - var(--hw-m)*.08) top calc(3vh + var(--hw-m)*.34)/calc(var(--hw-m)*1.05) auto, var(--hw-moon-orange) no-repeat right 5vw top 3vh/var(--hw-m) var(--hw-m), radial-gradient(circle at calc(100% - 5vw - var(--hw-m)/2) calc(3vh + var(--hw-m)/2),rgba(255,140,40,.30),transparent calc(var(--hw-m)*1.9)), var(--hw-pumpkin-lit) no-repeat left 5% bottom 4%/clamp(54px,6vw,84px) auto, radial-gradient(ellipse at 8% 100%,rgba(255,122,26,.24),transparent 32%)} /* ═══ 4 · HAUNTED MANSION ══════════════════════════════════════════════════ Gothic, in black and wine red. The header is a dusk sky with a haunted mansion, a graveyard and a dead tree in silhouette under a moon; candles, tombstones, ravens and spiders through the cards; the Discounted price in a wine-tinted cell with a candle; and on the sign-in screen the whole skyline along the bottom, under a red dusk. */ html[data-festive="4"]{ --hw-greet:"Happy Halloween"; --hw-accent:#e0475e;--hw-accent-lt:#ff97a7; --hw-nav-on:rgba(224,71,94,.15);--hw-nav-hover:rgba(255,120,140,.06);--hw-rule:rgba(224,71,94,.25); --hw-web:var(--hw-web-lt);--hw-web-o:.45; --hw-spider:var(--hw-spider-pale);--hw-thread:rgba(236,230,220,.45); --hw-price-bg:linear-gradient(180deg,rgba(160,30,60,.10),rgba(160,30,60,.04)); --hw-price-lbl:#9c1f3c;--hw-price-ico:var(--hw-candle); --hw-mob-bg:#2a1020;--hw-mob-fg:#ff97a7;--hw-mob-bd:#e0475e; --hw-perch:var(--hw-candle);--hw-tag-bg:#3a1424; } html[data-festive="4"] #sb{background:linear-gradient(170deg,#1d1317 0%,#140d11 60%,#0d080b 100%)} /* --hw-sk: how wide the skyline can be - the space between the page title and the badges, which is gone below about 1100px */ html[data-festive="4"] #mhdr{ --hw-sk:clamp(0px,calc(100vw - 940px),520px); background: radial-gradient(1.2px 1.2px at 16% 20%,rgba(255,255,255,.85),transparent), radial-gradient(1px 1px at 33% 12%,rgba(255,255,255,.6),transparent), radial-gradient(1.3px 1.3px at 49% 24%,rgba(255,255,255,.75),transparent), radial-gradient(1px 1px at 61% 10%,rgba(255,255,255,.6),transparent), radial-gradient(1.2px 1.2px at 74% 18%,rgba(255,255,255,.7),transparent), linear-gradient(180deg,#1c0f17 0%,#3a1424 48%,#6e2436 100%); border-bottom-color:rgba(0,0,0,.4); box-shadow:inset 0 -1px 0 rgba(255,255,255,.05)} html[data-festive="4"] #mh1{color:#fbf2f4} html[data-festive="4"] #mh2{color:#e2bcc5} html[data-festive="4"] #rigel-ref, html[data-festive="4"] #mhdr-badge, html[data-festive="4"] #mhdr-company-name{background:#fff;border-color:rgba(255,255,255,.7)} html[data-festive="4"] #mhdr::before{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0; background: var(--hw-skyline) no-repeat right 250px bottom/var(--hw-sk) auto, var(--hw-moon-warm) no-repeat right calc(250px + var(--hw-sk)*.40) top 6px/34px 34px, radial-gradient(circle at calc(100% - 267px - var(--hw-sk)*.40) 23px,rgba(255,225,190,.30),transparent 64px)} html[data-festive="4"] #mhdr::after{ content:'';position:absolute;right:calc(250px + var(--hw-sk)*.62);top:9px;width:64px;height:20px;pointer-events:none;z-index:0; background:var(--hw-flock-lt) no-repeat center/contain;opacity:.8} html[data-festive="4"] #scroll{ /* calm, and clean: one tone, a moon glow in the corner and one low silhouette along the foot. Nothing repeats and nothing is small - a scatter of small faint marks reads as dirt on the screen */ background-color:#f3eff0; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cpath%20fill%3D%22%234a2633%22%20fill-opacity%3D%22.06%22%20d%3D%22M60%2012A48%2048%200%201%200%2060%20108A38%2038%200%201%201%2060%2012Z%22%2F%3E%3C%2Fsvg%3E"), radial-gradient(circle at calc(100% - 92px) 88px,rgba(244,224,230,.65) 0,rgba(255,255,255,0) 190px), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%22240%22%20viewBox%3D%220%200%201600%20240%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Cg%20fill%3D%22%234a2633%22%20fill-opacity%3D%22.045%22%3E%3Cpath%20d%3D%22M0%20170C220%20120%20420%20118%20640%20150S1060%20120%201240%20110%201500%20128%201600%20140V240H0Z%22%2F%3E%3Cpath%20d%3D%22M1180%20118V66L1214%2038%201248%2066V112ZM1230%2070V30H1250V70Z%22%2F%3E%3Cpath%20d%3D%22M1240%20112V78L1266%2056%201292%2078V108Z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%234a2633%22%20fill-opacity%3D%22.06%22%3E%3Cpath%20d%3D%22M0%20205C260%20180%20520%20176%20800%20196S1300%20182%201600%20196V240H0Z%22%2F%3E%3Cg%20transform%3D%22translate(300%20166)%20scale(1.5)%22%3E%3Cellipse%20cx%3D%229%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2222%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2215.5%22%20cy%3D%2214%22%20rx%3D%228%22%20ry%3D%2211%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%220%22%20width%3D%223%22%20height%3D%226%22%20rx%3D%221.5%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(352%20176)%20scale(1.05)%22%3E%3Cellipse%20cx%3D%229%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2222%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2215.5%22%20cy%3D%2214%22%20rx%3D%228%22%20ry%3D%2211%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%220%22%20width%3D%223%22%20height%3D%226%22%20rx%3D%221.5%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(1380%20166)%20scale(1.3)%22%3E%3Cellipse%20cx%3D%229%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2222%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2215.5%22%20cy%3D%2214%22%20rx%3D%228%22%20ry%3D%2211%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%220%22%20width%3D%223%22%20height%3D%226%22%20rx%3D%221.5%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size:120px 120px,100% 100%,100% 240px; background-position:right 32px top 28px,0 0,center bottom; background-repeat:no-repeat,no-repeat,no-repeat} /* the scatter: a spider, a candle, a raven and a tombstone, at strides 13, 9, 11, 17 */ html[data-festive="4"] #pgrid > .pcard:is(:nth-child(13n+1),:nth-child(9n+4),:nth-child(11n+7),:nth-child(17n+10))::after{ content:'';position:absolute;top:12px;left:12px;width:32px;height:32px;pointer-events:none;z-index:1; background:no-repeat center/contain} html[data-festive="4"] #pgrid > .pcard:nth-child(9n+4)::after{background-image:var(--hw-candle);width:24px;height:38px;top:10px} html[data-festive="4"] #pgrid > .pcard:nth-child(11n+7)::after{background-image:var(--hw-raven);width:40px;height:30px} html[data-festive="4"] #pgrid > .pcard:nth-child(17n+10)::after{background-image:var(--hw-tombstone);width:30px;height:36px} html[data-festive="4"] #pgrid > .pcard:nth-child(13n+1)::after{ top:0;left:22px;width:18px;height:44px; background: linear-gradient(rgba(26,15,31,.55),rgba(26,15,31,.55)) no-repeat 50% 0/1px 27px, var(--hw-spider-dk) no-repeat 50% 100%/18px 19px} /* the sign-in screen: a red dusk over the map, the moon, bats, and the whole skyline along the bottom edge, below the sign-in box at any height */ html[data-festive="4"] #gate::after{ --hw-gh:clamp(70px,16vh,170px); background: var(--hw-skyline) no-repeat right -2vw bottom/auto var(--hw-gh), linear-gradient(#0d0709,#0d0709) no-repeat left bottom/100% calc(var(--hw-gh)*.12), var(--hw-flock-lt) no-repeat left 30% top 5vh/clamp(150px,17vw,240px) auto, var(--hw-moon-warm) no-repeat right 5vw top 3vh/var(--hw-m) var(--hw-m), radial-gradient(circle at calc(100% - 5vw - var(--hw-m)/2) calc(3vh + var(--hw-m)/2),rgba(255,225,190,.24),transparent calc(var(--hw-m)*1.8)), linear-gradient(180deg,rgba(40,10,24,.55) 0%,rgba(90,24,44,.38) 60%,rgba(140,40,64,.5) 100%)} /* ── Where the header has no room for its art ─────────────────────────── The moon, the ghost and the flock sit in the space between the page title and the badges. Below 1100px that space is gone (and the badges can wrap under the title), so the art goes rather than sit behind the words. */ @media(max-width:1099px){ html[data-festive] #mhdr::before, html[data-festive] #mhdr::after{content:none} } /* A phone's header is one line: the title and CONFIDENTIAL. A small moon fits between them in the night sky. */ @media(max-width:720px){ html[data-festive="2"] #mhdr::before{ content:'';background:var(--hw-moon-pale) no-repeat right 118px top 7px/26px 26px} html[data-festive="4"] #mhdr::before{ content:'';background:var(--hw-moon-warm) no-repeat right 118px top 7px/26px 26px} } /* Two columns on the sign-in screen become one below 860px, and the box sits in the middle: the art keeps to the top and bottom edges, smaller. The skyline is too wide for a phone, so it is placed with the mansion in view (it sits at 71% across the picture) rather than by its right edge. */ @media(max-width:860px){ html[data-festive] #gate .gate-box::before{top:-28px;right:22px;width:42px;height:38px} html[data-festive="4"] #gate::after{--hw-gh:clamp(70px,14vh,130px);background-position:72% bottom,left bottom,left 30% top 5vh,right 5vw top 3vh,0 0,0 0} } /* ── Motion, for whoever has not asked for less of it ─────────────────── Transforms only, so nothing is laid out or repainted per frame; a handful of elements, never one per card. */ @media(prefers-reduced-motion:no-preference){ html[data-festive] #sb-top::after{animation:hw-dangle 3.8s ease-in-out infinite alternate} html[data-festive="2"] #mhdr::after{animation:hw-float 4.6s ease-in-out infinite alternate} html[data-festive="3"] #mhdr::before{animation:hw-flit 7s ease-in-out infinite alternate} html[data-festive] #gate .gate-box::before{animation:hw-bob 5s ease-in-out infinite alternate} } @keyframes hw-dangle{from{transform:translateY(-5px) rotate(-2deg)}to{transform:translateY(5px) rotate(2deg)}} @keyframes hw-float{from{transform:translateY(-4px)}to{transform:translateY(4px)}} @keyframes hw-flit{ 0%{transform:translate(0,0)} 50%{transform:translate(-14px,-4px)} 100%{transform:translate(-26px,2px)}} @keyframes hw-bob{from{transform:translateY(0)}to{transform:translateY(-4px)}}