/* Easter egg visuals. Each egg gets its own scoped block. Anything that wants to ride on personalisation tier-gates should look at the `data-jb-disable-board-easter-eggs` attribute on via the easter-eggs.js registry, not directly here. */ /* Snow canvas (Christmas, landing). position: fixed sits behind the hero glass card but above the .bg gradient. pointer-events:none so the sign-in button stays clickable through the canvas. */ .easter-egg-snow { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0; } /* Pi-day glyph (board). Activated via ``. Sits at z-index 0 behind the .board lists, full-viewport pinned, and dims with the user's accent so it blends. user-select:none so triple-click on a list doesn't grab the glyph. */ html[data-jb-easter-egg="pi-day"]::after { content: '\03C0'; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: 'Times New Roman', Times, serif; font-style: italic; font-weight: 700; font-size: clamp(180px, 28vw, 380px); color: var(--accent, #c7ff5e); opacity: 0.05; pointer-events: none; user-select: none; z-index: 0; line-height: 1; } /* Dismiss pill — small, bottom-right. Mirrors .readonly-notice but compact and unobtrusive so an active egg never blocks the board. */ .easter-egg-pill { position: fixed; right: 12px; bottom: 12px; z-index: 78; display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; background: rgba(13,17,22,0.78); color: var(--ink-soft, #aab1bb); font: 600 11px/1 var(--font-sans, system-ui, -apple-system, Segoe UI, sans-serif); letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0,0,0,0.32); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); opacity: 0.78; transition: opacity 0.15s ease; } .easter-egg-pill:hover { opacity: 1; } .easter-egg-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #c7ff5e); box-shadow: 0 0 6px var(--accent, #c7ff5e); flex: 0 0 auto; } .easter-egg-pill-text { white-space: nowrap; } .easter-egg-pill-dismiss { flex: 0 0 auto; border: 0; background: transparent; color: inherit; font-size: 14px; line-height: 1; padding: 4px 8px; border-radius: 999px; cursor: pointer; opacity: 0.7; } .easter-egg-pill-dismiss:hover { background: rgba(255,255,255,0.08); opacity: 1; } /* Holiday lights (December, scope='*'). Strung along the bottom edge of the .topbar via a small absolutely-positioned host. The topbar is normally static, so :has() promotes it to a positioning context only when the lights are mounted — no layout impact the other eleven months. */ .topbar:has(.easter-egg-lights) { position: relative; } .easter-egg-lights { position: absolute; left: 0; right: 0; bottom: -6px; height: 16px; pointer-events: none; display: flex; justify-content: space-between; align-items: flex-start; padding: 0 22px; z-index: 6; /* The wire — a faint dark curve drawn behind the bulbs. */ background: radial-gradient(ellipse 50% 6px at 50% 0, rgba(0,0,0,0.30), transparent 70%); } .easter-egg-lights-bulb { width: 8px; height: 11px; border-radius: 0 0 50% 50% / 0 0 60% 60%; position: relative; top: 2px; opacity: 0.92; box-shadow: 0 0 8px 1px currentColor, 0 0 2px rgba(0,0,0,0.55) inset; animation: easter-egg-lights-blink 2.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.18s); } .easter-egg-lights-bulb::before { /* Tiny brass cap so the bulb visually hangs from the wire. */ content: ''; position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 5px; height: 3px; border-radius: 1px; background: rgba(60, 50, 30, 0.85); } .easter-egg-lights-bulb--r { color: #ff5c5c; background: #ff5c5c; } .easter-egg-lights-bulb--g { color: #4ade80; background: #4ade80; } .easter-egg-lights-bulb--b { color: #60a5fa; background: #60a5fa; } .easter-egg-lights-bulb--y { color: #facc15; background: #facc15; } @keyframes easter-egg-lights-blink { 0%, 100% { filter: brightness(1.05); opacity: 0.92; } 50% { filter: brightness(0.55); opacity: 0.65; } } /* Respect users who opted out of motion at the OS level. The script already early-returns on prefers-reduced-motion, but belt-and-braces: if a future egg adds motion via CSS, kill it here too. */ @media (prefers-reduced-motion: reduce) { .easter-egg-snow { display: none; } .easter-egg-lights-bulb { animation: none; } }