/** * QUIZTREFF EASTER THEME 2026 * ============================ * Pastell-Glow + Neon/Space accents - cute bunnies, spring vibes * Activated via data-theme="easter" on */ /* ========== Easter Theme CSS Variables ========== */ html[data-theme="easter"] { color-scheme: dark; /* Base Colors - Dark with warm undertone */ --qt-bg: #0B0812; --qt-bg2: #100D1E; --qt-bg3: #150F24; /* Text Colors */ --qt-text: rgba(255, 255, 255, 0.92); --qt-text-muted: rgba(255, 255, 255, 0.68); --qt-text-soft: rgba(255, 255, 255, 0.50); /* Card/Surface Colors */ --qt-card: rgba(255, 255, 255, 0.04); --qt-card-hover: rgba(255, 255, 255, 0.07); --qt-card-elevated: rgba(255, 255, 255, 0.06); --qt-border: rgba(255, 180, 220, 0.10); --qt-border-hover: rgba(255, 180, 220, 0.20); /* Accent Colors - Easter Pastel Palette */ --qt-pastel-pink: #FFB3D9; --qt-pastel-pink-soft: rgba(255, 179, 217, 0.18); --qt-pastel-pink-glow: rgba(255, 179, 217, 0.22); --qt-pastel-purple: #D4A5FF; --qt-pastel-purple-soft: rgba(212, 165, 255, 0.16); --qt-pastel-purple-glow: rgba(212, 165, 255, 0.20); --qt-pastel-green: #A8F0C0; --qt-pastel-yellow: #FFE4A0; --qt-pastel-blue: #A8D8FF; /* Status Colors */ --qt-success: #A8F0C0; --qt-danger: #FF6B8A; --qt-warning: #FFE4A0; --qt-info: #A8D8FF; /* Effects */ --qt-glow-pink: 0 0 22px rgba(255, 179, 217, 0.22); --qt-glow-purple: 0 0 22px rgba(212, 165, 255, 0.18); --qt-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --qt-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45); /* Glass Effect */ --qt-glass-blur: 12px; --qt-glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); --qt-glass-border: rgba(255, 180, 220, 0.10); /* Radius */ --qt-radius: 18px; --qt-radius-sm: 12px; --qt-radius-lg: 24px; /* Focus Ring */ --qt-focus: 0 0 0 3px rgba(255, 179, 217, 0.28); /* Noise/Grain Opacity */ --qt-noise-opacity: 0.05; --qt-glow-opacity: 0.25; } /* ========== Base Background with Pastel Glow ========== */ html[data-theme="easter"] body { background: radial-gradient(1200px 600px at 20% 10%, rgba(255, 179, 217, 0.10), transparent 60%), radial-gradient(900px 500px at 80% 30%, rgba(212, 165, 255, 0.08), transparent 60%), radial-gradient(700px 400px at 50% 80%, rgba(168, 240, 192, 0.06), transparent 50%), radial-gradient(500px 300px at 70% 60%, rgba(168, 216, 255, 0.05), transparent 50%), linear-gradient(180deg, var(--qt-bg), var(--qt-bg2)); color: var(--qt-text); min-height: 100vh; position: relative; } html[data-theme="easter"] { overflow-x: clip; } /* Easter Glow Layer */ html[data-theme="easter"] body::before { content: ""; position: fixed; inset: -30vh -20vw; pointer-events: none !important; z-index: -100; opacity: var(--qt-glow-opacity); background: radial-gradient(50% 35% at 25% 25%, rgba(255, 179, 217, 0.18), transparent 60%), radial-gradient(45% 35% at 75% 40%, rgba(212, 165, 255, 0.15), transparent 60%), radial-gradient(40% 30% at 60% 70%, rgba(168, 240, 192, 0.12), transparent 60%), radial-gradient(35% 25% at 30% 80%, rgba(255, 228, 160, 0.10), transparent 60%); filter: blur(40px); transform: translateZ(0); animation: easter-glow-drift 25s ease-in-out infinite alternate; } /* Noise/Grain Texture Layer */ html[data-theme="easter"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none !important; z-index: -99; opacity: var(--qt-noise-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E"); mix-blend-mode: overlay; transform: translateZ(0); } @keyframes easter-glow-drift { 0% { transform: translateX(-2%) translateY(-1%) translateZ(0); opacity: var(--qt-glow-opacity); } 100% { transform: translateX(2%) translateY(1%) translateZ(0); opacity: calc(var(--qt-glow-opacity) * 0.8); } } /* ========== Z-Index Stack ========== */ html[data-theme="easter"] body::before { z-index: -100 !important; pointer-events: none !important; } html[data-theme="easter"] body::after { z-index: -99 !important; pointer-events: none !important; } html[data-theme="easter"] header { position: sticky !important; top: 0 !important; z-index: 9990 !important; } html[data-theme="easter"] header > div { position: relative; z-index: 9990; } html[data-theme="easter"] header nav .relative { z-index: 9991 !important; } html[data-theme="easter"] header [x-show], html[data-theme="easter"] header [x-transition], html[data-theme="easter"] header .dropdown-menu, html[data-theme="easter"] header div[x-show] { z-index: 9995 !important; } html[data-theme="easter"] header [class*="absolute"][class*="rounded"] { z-index: 9995 !important; } html[data-theme="easter"] header .relative > [x-show] { z-index: 9996 !important; } html[data-theme="easter"] [class*="fixed"][class*="inset-0"], html[data-theme="easter"] .modal, html[data-theme="easter"] [role="dialog"] { z-index: 9999 !important; } html[data-theme="easter"] main { position: relative; z-index: 50 !important; } html[data-theme="easter"] main section { position: relative; z-index: 50; } html[data-theme="easter"] .hero-glow { z-index: 1 !important; pointer-events: none !important; } /* ========== Frosted Glass Utility ========== */ html[data-theme="easter"] .qt-glass { background: var(--qt-glass-bg); border: 1px solid var(--qt-glass-border); border-radius: var(--qt-radius); box-shadow: var(--qt-shadow); backdrop-filter: blur(var(--qt-glass-blur)); -webkit-backdrop-filter: blur(var(--qt-glass-blur)); } html[data-theme="easter"] .qt-glass:hover { border-color: var(--qt-border-hover); } /* ========== Cards Override ========== */ html[data-theme="easter"] .rounded-2xl, html[data-theme="easter"] .rounded-xl { background: var(--qt-glass-bg); border-color: var(--qt-glass-border); } html[data-theme="easter"] [class*="bg-white/"][class*="border"] { background: var(--qt-glass-bg); border-color: var(--qt-glass-border); backdrop-filter: blur(var(--qt-glass-blur)); -webkit-backdrop-filter: blur(var(--qt-glass-blur)); } /* ========== Primary Buttons (Pastel Glow) ========== */ html[data-theme="easter"] .qt-btn-primary, html[data-theme="easter"] [class*="from-qtPink"][class*="to-qtPurple"], html[data-theme="easter"] .bg-gradient-to-r.from-qtPink { background: linear-gradient(135deg, rgba(255, 179, 217, 0.20), rgba(212, 165, 255, 0.16)) !important; border: 1px solid rgba(255, 179, 217, 0.35) !important; color: var(--qt-text) !important; box-shadow: var(--qt-glow-pink); transition: all 0.2s ease; } html[data-theme="easter"] .qt-btn-primary:hover, html[data-theme="easter"] [class*="from-qtPink"][class*="to-qtPurple"]:hover, html[data-theme="easter"] .bg-gradient-to-r.from-qtPink:hover { border-color: rgba(255, 179, 217, 0.55) !important; box-shadow: 0 0 30px rgba(255, 179, 217, 0.30); transform: translateY(-1px); } /* ========== Secondary Buttons ========== */ html[data-theme="easter"] .qt-btn-secondary, html[data-theme="easter"] [class*="border-white/"][class*="hover:bg-white/"] { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--qt-text); transition: all 0.2s ease; } html[data-theme="easter"] .qt-btn-secondary:hover, html[data-theme="easter"] [class*="border-white/"][class*="hover:bg-white/"]:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.20); } /* ========== Inputs ========== */ html[data-theme="easter"] .qt-input, html[data-theme="easter"] input[type="text"], html[data-theme="easter"] input[type="email"], html[data-theme="easter"] input[type="password"], html[data-theme="easter"] input[type="number"], html[data-theme="easter"] textarea, html[data-theme="easter"] select { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 180, 220, 0.15); color: var(--qt-text); border-radius: var(--qt-radius-sm); transition: all 0.2s ease; } html[data-theme="easter"] .qt-input:focus, html[data-theme="easter"] input:focus, html[data-theme="easter"] textarea:focus, html[data-theme="easter"] select:focus { outline: none; box-shadow: var(--qt-focus); border-color: rgba(255, 179, 217, 0.40); } html[data-theme="easter"] input::placeholder, html[data-theme="easter"] textarea::placeholder { color: var(--qt-text-soft); } /* ========== Header Override ========== */ html[data-theme="easter"] header { background: rgba(11, 8, 18, 0.70); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 180, 220, 0.12); position: sticky !important; top: 0 !important; z-index: 9990 !important; } /* Alpine.js dropdown fix */ html[data-theme="easter"] header nav > div[x-data] { position: relative !important; z-index: 9991 !important; } html[data-theme="easter"] header nav > div[x-data] > div[x-show] { position: absolute !important; z-index: 9995 !important; } html[data-theme="easter"] header > div > div > div[x-data] { position: relative !important; z-index: 9991 !important; } html[data-theme="easter"] header > div > div > div[x-data] > div[x-show] { position: absolute !important; z-index: 9995 !important; } /* ========== Footer Override ========== */ html[data-theme="easter"] footer { background: rgba(11, 8, 18, 0.50); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top-color: var(--qt-border); } /* ========== Dropdown Menus ========== */ html[data-theme="easter"] [x-show][class*="bg-black/"], html[data-theme="easter"] .dropdown-menu { background: rgba(16, 13, 30, 0.95) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: var(--qt-border) !important; } /* ========== Modals ========== */ html[data-theme="easter"] [class*="bg-qtBg"], html[data-theme="easter"] .modal-content { background: rgba(16, 13, 30, 0.98) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: var(--qt-border) !important; } /* ========== Timer/Progress Ring ========== */ html[data-theme="easter"] .timer-ring, html[data-theme="easter"] [class*="timer"] circle { stroke: var(--qt-pastel-pink) !important; } /* ========== Answer Buttons ========== */ html[data-theme="easter"] .answer-btn { background: var(--qt-glass-bg); border: 1px solid var(--qt-border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 0.15s ease; } html[data-theme="easter"] .answer-btn:hover:not(.disabled) { border-color: rgba(255, 179, 217, 0.35); box-shadow: var(--qt-glow-pink); } html[data-theme="easter"] .answer-btn.correct { background: rgba(168, 240, 192, 0.15) !important; border-color: rgba(168, 240, 192, 0.50) !important; } html[data-theme="easter"] .answer-btn.incorrect { background: rgba(255, 107, 138, 0.15) !important; border-color: rgba(255, 107, 138, 0.50) !important; } /* ========== Scoreboard ========== */ html[data-theme="easter"] .scoreboard, html[data-theme="easter"] [class*="scoreboard"] { background: var(--qt-glass-bg); border: 1px solid var(--qt-border); backdrop-filter: blur(var(--qt-glass-blur)); -webkit-backdrop-filter: blur(var(--qt-glass-blur)); } /* ========== Cosmetics Cards ========== */ html[data-theme="easter"] .cos-card { background: var(--qt-glass-bg); border-color: var(--qt-border); backdrop-filter: blur(var(--qt-glass-blur)); -webkit-backdrop-filter: blur(var(--qt-glass-blur)); } html[data-theme="easter"] .cos-card:hover { border-color: rgba(255, 179, 217, 0.25); background: rgba(255, 255, 255, 0.06); } html[data-theme="easter"] .cos-tab { background: rgba(255, 255, 255, 0.04); border-color: var(--qt-border); } html[data-theme="easter"] .cos-tab:hover, html[data-theme="easter"] .cos-tab.active { background: var(--qt-pastel-pink-soft); border-color: rgba(255, 179, 217, 0.30); } /* ========== Tablet Theme - Easter ========== */ html[data-theme="easter"] .tablet-root { box-shadow: inset 0 0 100px 30px rgba(255, 179, 217, 0.08), inset 0 0 200px 50px rgba(212, 165, 255, 0.05); } html[data-theme="easter"] .tablet-root::before { border-color: rgba(255, 179, 217, 0.25); } /* ========== Floating Easter Decorations ========== */ .easter-deco-container { position: fixed; inset: 0; pointer-events: none !important; z-index: -10; overflow: hidden; } .easter-deco-container * { pointer-events: none !important; user-select: none !important; } /* Floating cherry blossom petals */ .easter-petal { position: absolute; width: var(--size, 12px); height: var(--size, 12px); opacity: var(--opacity, 0.15); will-change: transform; animation: petal-fall var(--duration, 20s) linear infinite; animation-delay: var(--delay, 0s); } .easter-petal svg { width: 100%; height: 100%; filter: drop-shadow(0 0 2px var(--petal-glow, rgba(255,179,217,0.3))); } @keyframes petal-fall { 0% { transform: translateY(-20px) translateX(0) rotate(0deg); opacity: 0; } 5% { opacity: var(--opacity, 0.15); } 50% { transform: translateY(50vh) translateX(calc(var(--drift, 40px) * 0.6)) rotate(calc(var(--spin, 360deg) * 0.5)); } 90% { opacity: var(--opacity, 0.15); } 100% { transform: translateY(105vh) translateX(var(--drift, 40px)) rotate(var(--spin, 360deg)); opacity: 0; } } /* Larger sakura blossoms (5 petals) */ .easter-blossom { position: absolute; width: var(--size, 18px); height: var(--size, 18px); opacity: var(--opacity, 0.12); will-change: transform; animation: blossom-drift var(--duration, 25s) ease-in-out infinite; animation-delay: var(--delay, 0s); } .easter-blossom svg { width: 100%; height: 100%; filter: drop-shadow(0 0 4px rgba(255,179,217,0.25)); } @keyframes blossom-drift { 0% { transform: translateY(-30px) translateX(0) rotate(0deg) scale(1); opacity: 0; } 5% { opacity: var(--opacity, 0.12); } 25% { transform: translateY(25vh) translateX(calc(var(--drift, 30px) * -0.5)) rotate(90deg) scale(1.05); } 50% { transform: translateY(50vh) translateX(var(--drift, 30px)) rotate(180deg) scale(0.95); } 75% { transform: translateY(75vh) translateX(calc(var(--drift, 30px) * -0.3)) rotate(270deg) scale(1.02); } 90% { opacity: var(--opacity, 0.12); } 100% { transform: translateY(105vh) translateX(var(--drift, 30px)) rotate(360deg) scale(1); opacity: 0; } } /* ========== Cherry Blossom Trees (side decorations) ========== */ .easter-tree { position: fixed; pointer-events: none; z-index: -8; opacity: 0.06; transition: opacity 0.5s ease; } .easter-tree.left { left: -40px; bottom: 0; width: 280px; height: 100vh; } .easter-tree.right { right: -40px; bottom: 0; width: 250px; height: 100vh; transform: scaleX(-1); } /* Tree branch glow */ .easter-tree svg { width: 100%; height: 100%; filter: drop-shadow(0 0 20px rgba(255,179,217,0.15)); } /* ========== Cute Bunny Silhouettes ========== */ .easter-bunny-deco { position: fixed; pointer-events: none; z-index: -5; transition: opacity 0.5s ease; } /* Sitting bunny - bottom left */ .easter-bunny-deco.bunny-sit-left { bottom: 15px; left: 25px; width: 90px; height: 110px; opacity: 0.07; } /* Hopping bunny - bottom right */ .easter-bunny-deco.bunny-hop-right { bottom: 20px; right: 30px; width: 100px; height: 80px; opacity: 0.06; animation: bunny-hop 4s ease-in-out infinite; } /* Baby bunny - next to left bunny */ .easter-bunny-deco.bunny-baby-left { bottom: 18px; left: 110px; width: 50px; height: 60px; opacity: 0.05; animation: bunny-wiggle 3s ease-in-out infinite; } /* Peeking bunny - top right corner */ .easter-bunny-deco.bunny-peek-right { top: 80px; right: 10px; width: 60px; height: 70px; opacity: 0.04; animation: bunny-peek 5s ease-in-out infinite; } /* Bunny with egg - bottom center-right */ .easter-bunny-deco.bunny-egg { bottom: 12px; right: 180px; width: 70px; height: 85px; opacity: 0.05; } @keyframes bunny-hop { 0%, 100% { transform: translateY(0); } 15% { transform: translateY(-8px) rotate(-3deg); } 30% { transform: translateY(0) rotate(0deg); } } @keyframes bunny-wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(3deg); } 75% { transform: rotate(-3deg); } } @keyframes bunny-peek { 0%, 70%, 100% { transform: translateY(0); opacity: 0.04; } 80% { transform: translateY(-5px); opacity: 0.06; } 90% { transform: translateY(-3px); opacity: 0.05; } } /* ========== Floating hearts/sparkles ========== */ .easter-sparkle-float { position: absolute; width: var(--size, 6px); height: var(--size, 6px); opacity: 0; will-change: transform; animation: sparkle-float var(--duration, 8s) ease-in-out infinite; animation-delay: var(--delay, 0s); } @keyframes sparkle-float { 0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); } 20% { opacity: var(--opacity, 0.15); } 50% { opacity: var(--opacity, 0.15); transform: translateY(calc(var(--rise, -30px))) scale(1); } 80% { opacity: var(--opacity, 0.08); } } /* ========== Easter Event Banner ========== */ .easter-event-banner { background: linear-gradient(135deg, rgba(255, 179, 217, 0.08), rgba(212, 165, 255, 0.06), rgba(168, 240, 192, 0.04)); border: 1px solid rgba(255, 179, 217, 0.20); border-radius: var(--qt-radius); padding: 12px 20px; display: flex; align-items: center; gap: 12px; } .easter-event-banner::before { content: "Oster-Event 2026"; background: linear-gradient(135deg, var(--qt-pastel-pink), var(--qt-pastel-purple), var(--qt-pastel-green)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; font-size: 14px; letter-spacing: 0.5px; } /* ========== Nav Pills ========== */ html[data-theme="easter"] [class*="bg-green-500/"], html[data-theme="easter"] [class*="bg-orange-500/"], html[data-theme="easter"] [class*="bg-purple-500/"], html[data-theme="easter"] [class*="bg-pink-500/"] { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } html[data-theme="easter"] [class*="bg-green-500/15"] { background: rgba(168, 240, 192, 0.12); border-color: rgba(168, 240, 192, 0.25); } /* ========== Scrollbar ========== */ html[data-theme="easter"] ::-webkit-scrollbar { width: 8px; height: 8px; } html[data-theme="easter"] ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); } html[data-theme="easter"] ::-webkit-scrollbar-thumb { background: rgba(255, 179, 217, 0.20); border-radius: 4px; } html[data-theme="easter"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 179, 217, 0.35); } /* ========== Selection ========== */ html[data-theme="easter"] ::selection { background: rgba(255, 179, 217, 0.30); color: white; } /* ========== Links ========== */ html[data-theme="easter"] a:not([class]) { color: var(--qt-pastel-pink); } html[data-theme="easter"] a:not([class]):hover { color: var(--qt-pastel-purple); } /* ========== Form Labels ========== */ html[data-theme="easter"] label { color: var(--qt-text-muted); } /* ========== HR/Dividers ========== */ html[data-theme="easter"] hr { border-color: var(--qt-border); } /* ========== Tables ========== */ html[data-theme="easter"] table { border-color: var(--qt-border); } html[data-theme="easter"] th { background: rgba(255, 255, 255, 0.03); border-color: var(--qt-border); } html[data-theme="easter"] td { border-color: var(--qt-border); } html[data-theme="easter"] tr:hover td { background: rgba(255, 255, 255, 0.02); } /* ========== Code Blocks ========== */ html[data-theme="easter"] code, html[data-theme="easter"] pre { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--qt-border); } /* ========== Tooltip ========== */ html[data-theme="easter"] [data-tooltip]::after { background: rgba(16, 13, 30, 0.95); border: 1px solid var(--qt-border); backdrop-filter: blur(12px); } /* ========== Shine Effect ========== */ @media (prefers-reduced-motion: no-preference) { html[data-theme="easter"] .qt-shine { position: relative; overflow: hidden; } html[data-theme="easter"] .qt-shine::after { content: ""; position: absolute; inset: -50%; background: linear-gradient( 120deg, transparent 30%, rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.10) 55%, transparent 70% ); transform: translateX(-100%) rotate(15deg); transition: transform 0.6s ease; pointer-events: none; } html[data-theme="easter"] .qt-shine:hover::after { transform: translateX(100%) rotate(15deg); } } /* ========== Responsive ========== */ @media (max-width: 768px) { html[data-theme="easter"] body::before { opacity: calc(var(--qt-glow-opacity) * 0.7); filter: blur(60px); } html[data-theme="easter"] body::after { opacity: calc(var(--qt-noise-opacity) * 0.5); } .easter-bunny-deco { opacity: 0.03 !important; } .easter-bunny-deco.bunny-peek-right, .easter-bunny-deco.bunny-egg { display: none; } .easter-tree { opacity: 0.03 !important; } } /* Disable decorations on reduced motion */ @media (prefers-reduced-motion: reduce) { .easter-deco-container { display: none !important; } html[data-theme="easter"] body::before { animation: none !important; } } /* ========== Print ========== */ @media print { html[data-theme="easter"] body::before, html[data-theme="easter"] body::after, .easter-deco-container { display: none !important; } }