/* ========================================================================== Halloween - the cute-spooky seasonal theme ========================================================================== Worn while the admin seasonal switch is on (Off / Halloween / Auto in /admin). Every rule below is scoped to html[data-theme="halloween"], which SiteThemeState sets, so with the switch off none of this applies and the site is exactly its everyday self. Nothing in app.css is changed or removed by this file; it only layers on top. What changes, in order of how loud it is: 1. The whole site goes dark: a plum-grey night, with MudBlazor in dark mode and the palette in HalloweenTheme.cs (PaletteDark). The mascot and the wordmark turn white. 2. The homepage board becomes a night sky in a pumpkin frame, with its own stickers (HalloweenBoardDecor.razor). 3. The logo is the Halloween mascot, in its witch hat (BrandMark.razor picks it, and the loading screen in index.html), turned white like the wordmark. 4. Filled main buttons go pumpkin orange with dark ink text. 5. A very faint scatter of little bats behind the page. */ html[data-theme="halloween"] { --pf-hw-pumpkin: #F57A1F; --pf-hw-pumpkin-deep: #DB6A16; --pf-hw-pumpkin-light: #FFB061; --pf-hw-night: #2B1F4A; --pf-hw-ink: #2A1406; --pf-hw-slime: #8BD45E; } /* 1. Main buttons -------------------------------------------------------------- Pumpkin with dark ink text: white on this orange is under 3:1, the ink is over 6:1. Outlined and text buttons keep the witch purple from the palette. */ html[data-theme="halloween"] .mud-button-filled.mud-button-filled-primary { background-color: var(--pf-hw-pumpkin); color: var(--pf-hw-ink); } html[data-theme="halloween"] .mud-button-filled.mud-button-filled-primary:hover { background-color: var(--pf-hw-pumpkin-deep); } html[data-theme="halloween"] .mud-button-filled.mud-button-filled-primary .mud-icon-root { color: inherit; } /* 2. The logo, in white for the night --------------------------------------------- The Halloween mascot (a black silhouette in a witch hat, chosen by BrandMark.razor) and the "Ponyfolio" wordmark, everywhere the brand appears: top bar, menu, footer, sign-in pages. The mascot is turned white with a filter rather than kept as a second white file, so its shape can never drift from the artist's drawing; the see-through parts of the face show the dark page through, as in a white silhouette. */ html[data-theme="halloween"] .pf-brand-mark img { filter: brightness(0) invert(1); } html[data-theme="halloween"] .pf-brand-word { color: #FFFFFF; } /* 3. Little bats behind the page ---------------------------------------------- A fixed layer under everything, faint enough to read as texture rather than pattern. Fixed and pointer-free so it costs nothing on scroll and never takes a click. */ html[data-theme="halloween"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='%23CDB8FF' fill-opacity='.07'%3E%3Cpath d='M40 52 C36 47 29 48 23 52 C26 55 25 60 22 64 C28 62 32 63 34 67 C36 64 38 64 40 66 C42 64 44 64 46 67 C48 63 52 62 58 64 C55 60 54 55 57 52 C51 48 44 47 40 52 Z'/%3E%3Cpath d='M170 150 C167 146 161 147 157 150 C159 152 158 156 156 159 C160 158 163 158 165 161 C166 159 168 159 170 160 C172 159 174 159 175 161 C177 158 180 158 184 159 C182 156 181 152 183 150 C179 147 173 146 170 150 Z'/%3E%3C/g%3E%3Cg fill='%23F57A1F' fill-opacity='.10'%3E%3Cpath d='M190 40 L192 45 L197 47 L192 49 L190 54 L188 49 L183 47 L188 45 Z'/%3E%3Cpath d='M70 180 L71.5 184 L75.5 185.5 L71.5 187 L70 191 L68.5 187 L64.5 185.5 L68.5 184 Z'/%3E%3Ccircle cx='120' cy='96' r='2'/%3E%3Ccircle cx='214' cy='206' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); background-size: 240px 240px; } /* 4. The homepage board, as a night sky ------------------------------------------ Same board, same frame shape and outline; a deep night-purple surface with a crescent moon and stars instead of the white enamel shine, in a pumpkin frame. The white pony cards stand out against it more than they did against lilac. */ html[data-theme="halloween"] .pf-pinboard.is-magnet.is-spooky { --pf-board: var(--pf-hw-night); --pf-frame-top: #FFB061; --pf-frame-side: #F5913A; --pf-frame-bottom: #DB6E1E; --pf-frame-line: #241D3D; --pf-board-shade: rgba(10, 6, 24, .45); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80' preserveAspectRatio='xMidYMid slice'%3E%3Ccircle cx='86' cy='14' r='7.5' fill='%23FFE8A3'/%3E%3Ccircle cx='89.5' cy='11.5' r='6.6' fill='%232B1F4A'/%3E%3Cg fill='%23FFE8A3'%3E%3Cpath d='M12 10 L12.7 11.8 L14.5 12.5 L12.7 13.2 L12 15 L11.3 13.2 L9.5 12.5 L11.3 11.8 Z'/%3E%3Cpath d='M64 6 L64.5 7.3 L65.8 7.8 L64.5 8.3 L64 9.6 L63.5 8.3 L62.2 7.8 L63.5 7.3 Z'/%3E%3Cpath d='M92 46 L92.6 47.6 L94.2 48.2 L92.6 48.8 L92 50.4 L91.4 48.8 L89.8 48.2 L91.4 47.6 Z'/%3E%3Cpath d='M6 58 L6.5 59.3 L7.8 59.8 L6.5 60.3 L6 61.6 L5.5 60.3 L4.2 59.8 L5.5 59.3 Z'/%3E%3C/g%3E%3Cg fill='%23FFFFFF' fill-opacity='.55'%3E%3Ccircle cx='30' cy='6' r='.5'/%3E%3Ccircle cx='46' cy='16' r='.4'/%3E%3Ccircle cx='76' cy='28' r='.45'/%3E%3Ccircle cx='22' cy='36' r='.4'/%3E%3Ccircle cx='54' cy='44' r='.35'/%3E%3Ccircle cx='70' cy='66' r='.45'/%3E%3Ccircle cx='36' cy='72' r='.4'/%3E%3Ccircle cx='96' cy='70' r='.4'/%3E%3Ccircle cx='4' cy='24' r='.35'/%3E%3C/g%3E%3C/svg%3E"); background-size: cover; background-position: center; } /* Magnets in the season's colours: pumpkin, slime, witch purple, candy pink. The cards' own --pin colour is set inline by Home.razor, so these paint the magnet itself. */ html[data-theme="halloween"] .is-spooky .pf-pin:nth-child(4n+1) .pf-pin-tack { background: #F57A1F; } html[data-theme="halloween"] .is-spooky .pf-pin:nth-child(4n+2) .pf-pin-tack { background: #8BD45E; } html[data-theme="halloween"] .is-spooky .pf-pin:nth-child(4n+3) .pf-pin-tack { background: #9B74F2; } html[data-theme="halloween"] .is-spooky .pf-pin:nth-child(4n+4) .pf-pin-tack { background: #FF8FB8; } /* The stickers sit where the everyday ones do (see .pf-board-sticker.is-rainbow and friends in app.css), sized for their own shapes. */ html[data-theme="halloween"] .pf-board-sticker.is-pumpkin { left: -5%; top: -7%; width: 14%; transform: rotate(-9deg); } html[data-theme="halloween"] .pf-board-sticker.is-ghost { right: -4.5%; top: 36%; width: 9%; transform: rotate(8deg); } html[data-theme="halloween"] .pf-board-sticker.is-candy { right: -4%; bottom: -5%; width: 12%; transform: rotate(-12deg); } /* The ghost drifts a little, as ghosts do. Transform only, so it is cheap. */ html[data-theme="halloween"] .pf-board-sticker.is-ghost { animation: pf-hw-ghost 5s ease-in-out infinite; } @keyframes pf-hw-ghost { 0%, 100% { transform: rotate(8deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-6%); } } /* Sticky notes in pumpkin and slime paper, written on in witch purple. */ html[data-theme="halloween"] .pf-board-note.is-pumpkin-paper { --pf-note: #FFD2A1; --pf-note-glue: #FFBB78; color: #6C3CD1; } html[data-theme="halloween"] .pf-board-note.is-slime-paper { --pf-note: #D6F2C2; --pf-note-glue: #BCE6A0; color: #6C3CD1; } /* Phones: the same trimming the everyday board gets. The ghost and notes go, the corner stickers move in a little. */ @media (max-width: 520px) { html[data-theme="halloween"] .pf-board-sticker.is-ghost { display: none; } html[data-theme="halloween"] .pf-board-sticker.is-pumpkin { left: -3%; top: -5%; width: 17%; } html[data-theme="halloween"] .pf-board-sticker.is-candy { right: -2.5%; bottom: -7%; width: 13%; } } /* Anyone who asked for less motion gets a still ghost and still bats. */ @media (prefers-reduced-motion: reduce) { html[data-theme="halloween"] .pf-board-sticker.is-ghost { animation: none; } }