/* Seasonal palettes. season.js sets data-season on . */ /* ---------- fall: warm paper, pumpkin and maple ---------- */ :root[data-season="fall"] { --paper: #F9F1E5; --paper-2: #F2E3CF; --line: #E6D5BF; --teacup: #F5C98F; /* primary buttons, highlights */ --teacup-deep: #D98B3A; /* focus rings, nav hover */ --peach: #EBA57C; --pink: #C4553B; /* the instagram button: maple */ } /* ---------- halloween: night paper, pumpkin buttons, faint stars ---------- */ :root[data-season="halloween"] { --paper: #2B2340; --paper-2: #342A4C; --line: #4B4066; --ink: #F6EDE1; /* text on the night paper */ --ink-soft: #CEC2DA; --teacup: #FFB25E; /* pumpkin */ --teacup-deep: #FFB25E; --peach: #9C7BD1; /* lilac highlight */ --card-ink: #2B2622; /* text that sits on white cards stays dark */ --card-soft: #6B615A; } [data-season="halloween"] body { background-image: radial-gradient(rgba(255,244,220,0.09) 1px, transparent 1.2px); background-size: 23px 23px; } /* anything white keeps dark ink */ [data-season="halloween"] .btn, [data-season="halloween"] .links a, [data-season="halloween"] .bubble, [data-season="halloween"] .chip, [data-season="halloween"] .ask-card, [data-season="halloween"] .view-card, [data-season="halloween"] .round, [data-season="halloween"] .ask-card .x { color: var(--card-ink); } [data-season="halloween"] .btn.pink { color: #fff; } [data-season="halloween"] .links svg { stroke: var(--card-ink); } [data-season="halloween"] .ask-card .note, [data-season="halloween"] .ask-card .opt, [data-season="halloween"] .view-meta .date { color: var(--card-soft); } [data-season="halloween"] .ask-card input:not([type]) { background: #FAF6EF; border-color: #E4DCCF; color: var(--card-ink); } /* outlines inside white cards stay dark so they still show */ [data-season="halloween"] .ask-card .btn, [data-season="halloween"] .ask-card .x, [data-season="halloween"] .view-card .round, [data-season="halloween"] .view-meta a { box-shadow: 0 0 0 2px var(--card-ink), 0 3px 0 var(--card-ink); } [data-season="halloween"] .chip:not([aria-pressed="true"]) { box-shadow: 0 0 0 2px rgba(255,244,220,.25); } [data-season="halloween"] .season-sky span { opacity: .8; } /* things drifting behind the page */ .season-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .season-sky span { position: absolute; top: -40px; opacity: .55; will-change: transform; animation-name: season-fall, season-sway; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-direction: normal, alternate; } [data-season="halloween"] .season-sky span { animation-name: season-float, season-sway; } @keyframes season-fall { from { translate: 0 -40px; rotate: 0deg; } to { translate: 0 110vh; rotate: 320deg; } } @keyframes season-float { from { translate: 0 110vh; } to { translate: 0 -60px; } } @keyframes season-sway { from { margin-left: -24px; } to { margin-left: 24px; } } @media (prefers-reduced-motion: reduce) { .season-sky { display: none; } }