/* ============================================================ QUIZZY — UNIFIED DARK THEME (matches index.html / profile.html) Shared across all quiz, results & challenge pages. Palette: #121212 base + purple (#7f00ff) glow + yellow accents. Font (DM Sans) is loaded via in each page's with preconnect + display=swap — faster than a render-blocking @import. ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg-main: #121212; --bg-card: #1a1a1a; --bg-card2: #1e1e1e; --primary: #7f00ff; --primary-light: #9b30ff; --primary-glow: rgba(127, 0, 255, 0.28); --yellow: #fcfa02; --yellow-soft: #ffdc5e; --text-main: #ffffff; --text-sub: rgba(255,255,255,0.52); --border: rgba(255,255,255,0.07); --border-purple: rgba(127,0,255,0.28); } html { scroll-behavior: smooth; } /* ─── FULL-PAGE BACKGROUND — same as index.html hero ─────────── */ body { font-family: 'DM Sans', sans-serif; background-color: var(--bg-main); background-image: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(127,0,255,0.42) 0%, transparent 65%), radial-gradient(ellipse 55% 40% at 95% 105%, rgba(127,0,255,0.18) 0%, transparent 60%), radial-gradient(ellipse 40% 35% at -5% 50%, rgba(127,0,255,0.12) 0%, transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cdefs%3E%3Cpattern id='grid' width='60' height='60' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 60 0 L 0 0 0 60' fill='none' stroke='rgba(127%2C0%2C255%2C0.15)' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grid)'/%3E%3C/svg%3E"); background-size: auto, auto, auto, 60px 60px; background-repeat: no-repeat, no-repeat, no-repeat, repeat; background-attachment: fixed, fixed, fixed, fixed; min-height: 100vh; color: var(--text-main); -webkit-font-smoothing: antialiased; } /* ─── ACCENTS ───────────────────────────────────────────────── */ .yellow-text { color: var(--yellow-soft); } .login-link { color: var(--yellow-soft); text-decoration: underline; } .bullet-icon { color: var(--yellow-soft); margin-right: 8px; } .coin-count { background: rgba(252, 250, 2, 0.09); border: 1px solid rgba(252, 250, 2, 0.22); padding: 4px 12px; border-radius: 50px; color: var(--yellow); font-weight: 700; } /* ─── QUIZ OPTION BUTTONS (option-button + option-btn) ──────── */ .option-button, .option-btn { transition: all 0.2s ease; border: 1px solid var(--border); background-color: var(--bg-card); border-radius: 12px; color: var(--text-main); } .option-button:hover, .option-btn:hover { border-color: var(--border-purple); background-color: #222; } .option-button.selected, .option-btn.selected { border-color: var(--primary-light); background-color: rgba(127, 0, 255, 0.16); } .option-button.correct, .option-btn.correct { border-color: #4ade80; background-color: rgba(74, 222, 128, 0.18); } .option-button.incorrect, .option-btn.incorrect { border-color: #f87171; background-color: rgba(248, 113, 113, 0.18); } /* ─── BUTTONS ───────────────────────────────────────────────── */ .btn { padding: 15px 30px; font-size: 16px; font-weight: bold; border: none; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; position: relative; overflow: hidden; } .btn-heartbeat { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); color: #fff; box-shadow: 0 4px 18px var(--primary-glow); animation: heartbeat 1.2s 2; } .btn-heartbeat:hover { background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%); box-shadow: 0 0 24px var(--primary-glow); animation: heartbeat 0.4s 2; } @media (max-width: 768px) { .btn { padding: 12px 24px; font-size: 14px; } } /* ─── POPUPS (single + final coin popups) ───────────────────── */ .popup-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: center; z-index: 50; } .popup-content { background: linear-gradient(180deg, #1d1d1d 0%, #161616 100%); border: 1px solid var(--border-purple); border-radius: 18px; padding: 24px; width: 90%; max-width: 350px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 36px rgba(127, 0, 255, 0.14); animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* ─── AD CONTAINER ──────────────────────────────────────────── */ .ad-container { width: 100%; max-width: 100%; overflow: hidden; min-height: 100px; margin: 0; display: flex; justify-content: center; align-items: center; } /* ─── CONTENT CARDS — same look as index.html .seo-card ─────── */ .category-card, .seo-card { background: linear-gradient(180deg, rgba(27, 27, 27, 0.98), rgba(18, 18, 18, 0.98)); border: 1px solid rgba(127, 0, 255, 0.18); border-radius: 16px; position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 22px rgba(0, 0, 0, 0.22); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .seo-card { padding: 16px; margin-top: 10px; } .category-card:hover, .seo-card:hover { transform: translateY(-3px); border-color: rgba(127, 0, 255, 0.38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 28px rgba(0, 0, 0, 0.32); } .category-card::before, .seo-card::before { content: ''; position: absolute; left: -18px; bottom: -32px; width: 90px; height: 90px; background: radial-gradient(circle, rgba(127, 0, 255, 0.12), transparent 70%); pointer-events: none; } /* Heading with the index-style purple dot */ .category-card h2, .seo-card h2 { color: #ffffff; font-weight: 800; display: flex; align-items: center; gap: 8px; } .category-card h2::before, .seo-card h2::before { content: ''; width: 6px; height: 6px; flex-shrink: 0; display: inline-block; border-radius: 999px; background: linear-gradient(135deg, #7f00ff, #c084fc); box-shadow: 0 0 0 6px rgba(127, 0, 255, 0.08); } .category-card p, .seo-card p { color: var(--text-sub); line-height: 1.68; } .category-card p b, .category-card p strong, .seo-card p b, .seo-card p strong { color: rgba(255, 255, 255, 0.88); font-weight: 700; } .category-card a, .seo-card p a { color: var(--primary-light); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(127, 0, 255, 0.4); transition: color 0.18s ease, border-color 0.18s ease; } .category-card a:hover, .seo-card p a:hover { color: #c084fc; border-color: rgba(192, 132, 252, 0.8); } .category-card a b, .seo-card p a b { color: inherit; } /* ─── RESULTS PAGE ──────────────────────────────────────────── */ .result-card { background: linear-gradient(180deg, rgba(31, 31, 31, 0.94), rgba(19, 19, 19, 0.94)); border: 1px solid var(--border-purple); border-radius: 16px; padding: 10px; margin-bottom: 10px; } .progress-bar { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-bottom: 8px; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-light)); border-radius: 5px; transition: width 0.3s ease; } .confetti { position: absolute; width: 10px; height: 10px; background-color: var(--yellow-soft); animation: confetti-fall 3s ease-in-out forwards; z-index: 0; } /* ─── DAILY CHALLENGE EXTRAS ────────────────────────────────── */ .content-container { flex-grow: 1; overflow-y: auto; padding-bottom: 40px; } .streak-bonus { animation: pulse 2s infinite; } /* ─── ANIMATIONS ────────────────────────────────────────────── */ .fade-in { animation: fadeIn 0.5s ease-in-out; } .coin-animation { animation: spinCoin 1s infinite linear; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes popIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes spinCoin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } @keyframes moveUp { 0% { transform: translate(-50%, 0); opacity: 1; } 100% { transform: translate(-50%, -50px); opacity: 0; } } @keyframes confetti-fall { 0% { transform: translateY(-100px) rotate(0deg); opacity: 1; } 100% { transform: translateY(500px) rotate(360deg); opacity: 0; } } @keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } } @keyframes heartbeat { 0% { transform: scale(1); } 7% { transform: scale(1.1); } 14% { transform: scale(1); } 21% { transform: scale(1.1); } 28% { transform: scale(1); } 100% { transform: scale(1); } } /* ─── SCROLLBAR ─────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--bg-main); } ::-webkit-scrollbar-thumb { background: rgba(127,0,255,0.4); border-radius: 4px; } /* ─── HIDDEN UTILITY (must win over component display rules) ────── The quiz screens & popups (.popup-overlay{display:flex}, etc.) are toggled with the `hidden` class. Because this stylesheet loads AFTER tailwind.min.css, a plain `.hidden{display:none}` would be overridden by later component rules — so force it. Elements are shown by JS that REMOVES the class, never by overriding display, so !important is safe. */ .hidden { display: none !important; }