/* * styles.css — Custom Styles for המגרלה * * Tailwind CDN handles utility classes. This file provides everything that * Tailwind cannot: custom animations, component-specific rules, scrollbar * styling, and CSS custom properties for theming. * * Sections: * 1. Global font * 2. View transitions (fadeIn animation + .view / .view.active) * 3. Result reveal (revealResult animation + .result-reveal) * 4. Shuffle animation (shuffleText animation + .shuffling) * 5. Option item enter (slideIn animation + .option-enter) * 6. Draw button pulse (pulse-once animation + .btn-pulse) * 7. Decorative diamond (.diamond) * 8. Custom scrollbar (CSS variables + ::-webkit-scrollbar rules) * 9. Input focus ring (input:focus, textarea:focus) */ /* ── 1. Global font ──────────────────────────────────────────────────────── */ * { font-family: 'Heebo', sans-serif; } /* ── 2. View transitions ─────────────────────────────────────────────────── */ /* Hidden by default; only the .active view is rendered */ .view { display: none; opacity: 0; } /* Activating a view makes it a flex container and triggers the entrance animation */ .view.active { display: flex; animation: fadeIn 0.35s ease forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ── 3. Result reveal ────────────────────────────────────────────────────── */ /* Applied to the result card when a winner is displayed. The slight overshoot (scale 1.03) gives a satisfying "pop" feel. */ @keyframes revealResult { 0% { opacity: 0; transform: scale(0.92) translateY(16px); } 60% { transform: scale(1.03) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } .result-reveal { animation: revealResult 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } /* ── 4. Shuffle animation ────────────────────────────────────────────────── */ /* Rapid opacity pulse applied to the shuffle display during the draw phase */ @keyframes shuffleText { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .shuffling { animation: shuffleText 0.18s ease-in-out infinite; } /* ── 5. Option item enter ────────────────────────────────────────────────── */ /* New option rows slide in from the right (RTL: right is the list start) */ @keyframes slideIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } } .option-enter { animation: slideIn 0.22s ease forwards; } /* ── 6. Draw button pulse ────────────────────────────────────────────────── */ /* Brief scale-down-and-back on the draw button click for tactile feedback */ @keyframes pulse-once { 0% { transform: scale(1); } 40% { transform: scale(0.95); } 100% { transform: scale(1); } } .btn-pulse { animation: pulse-once 0.25s ease; } /* ── 7. Decorative diamond ───────────────────────────────────────────────── */ /* The small indigo rotated square shown next to the app title on each screen */ .diamond { width: 10px; height: 10px; background: #6366f1; transform: rotate(45deg); display: inline-block; } /* ── 8. Custom scrollbar ─────────────────────────────────────────────────── */ /* CSS variables allow the dark-mode variant to override colours with one rule */ :root { --scrollbar-track: #e2e8f0; --scrollbar-thumb: #94a3b8; } /* Tailwind's 'dark' class on overrides the variables for dark mode */ .dark { --scrollbar-track: #1e293b; --scrollbar-thumb: #475569; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } /* ── 9. Input focus ring ─────────────────────────────────────────────────── */ /* Replace the browser default outline with a consistent indigo glow */ input:focus, textarea:focus { outline: none; box-shadow: 0 0 0 2px #6366f1; }