/* ================================================================= SolarQuest — style.css All styling for both color themes, Fredoka typography, layout, and the Brain Rest cat animations. Sections: 1. Theme variables (Colorful / Pastel) 2. Reset & base 3. Top bar 4. Landing & mode cards 5. Settings 6. Quest map 7. Play screen (questions, progress, feedback) 8. Brain Rest break 9. Reward screen 10. Multiplayer screens 11. Buttons & shared components 12. Responsive ================================================================= */ /* ================================================================= 1. THEME VARIABLES ----------------------------------------------------------------- Two palettes, toggled by [data-theme] on . #1266d8 (Adit's brand blue) is the secondary accent in the Colorful theme. ================================================================= */ :root, [data-theme="colorful"] { --bg-grad: linear-gradient(160deg, #0b0f2e 0%, #1b1464 45%, #3a1b6e 100%); --surface: #ffffff; --surface-soft: rgba(255, 255, 255, 0.08); --text-on-dark: #ffffff; --text-on-light: #201a3e; --text-muted: rgba(255, 255, 255, 0.72); --primary: #ff9f1c; --primary-dark: #e6810a; --secondary: #1266d8; --accent-pink: #ff5d8f; --accent-yellow: #ffd93d; --success: #2ecc71; --success-bg: #e8fbef; --gentle: #4a90d9; --gentle-bg: #e9f2fc; --star-filled: #ffd93d; --star-empty: rgba(32, 26, 62, 0.15); --card-shadow: 0 10px 30px rgba(10, 5, 40, 0.35); --locked-color: rgba(255, 255, 255, 0.3); --halo-glow: rgba(255, 217, 160, 0.5); --star-dot-rgb: 255, 255, 255; } [data-theme="pastel"] { --bg-grad: linear-gradient(160deg, #fdf3f7 0%, #eef1fb 50%, #e8f6f3 100%); --surface: #ffffff; --surface-soft: rgba(32, 26, 62, 0.04); --text-on-dark: #3c3660; --text-on-light: #3c3660; --text-muted: rgba(60, 54, 96, 0.65); --primary: #f7a8b8; --primary-dark: #ee8ba0; --secondary: #7ea8e0; --accent-pink: #f5c2e7; --accent-yellow: #ffe29a; --success: #6dbf8b; --success-bg: #e6f6ec; --gentle: #8fb3e0; --gentle-bg: #edf3fc; --star-filled: #ffcb6b; --star-empty: rgba(60, 54, 96, 0.15); --card-shadow: 0 10px 26px rgba(120, 110, 160, 0.18); --locked-color: rgba(60, 54, 96, 0.25); --halo-glow: rgba(247, 168, 184, 0.45); --star-dot-rgb: 126, 168, 224; } /* ================================================================= 2. RESET & BASE ================================================================= */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; background: var(--bg-grad); } body { font-family: "Fredoka", system-ui, sans-serif; color: var(--text-on-dark); min-height: 100vh; overflow-x: hidden; transition: background 0.4s ease; -webkit-tap-highlight-color: transparent; } button, input { font-family: inherit; } /* iOS Safari's default tap-highlight is an opaque grey rectangle. Most buttons in the app have an opaque background that hides it, but the quest path's transparent-background nodes made it show up as a stark grey box on every tap -- kill it everywhere and rely on our own :active states for tap feedback instead. */ button { -webkit-tap-highlight-color: transparent; outline: none; } button:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; } .hidden { display: none !important; } /* ================================================================= 3. TOP BAR ================================================================= */ .topbar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; position: sticky; top: 0; z-index: 20; } .topbar-spacer { flex: 1; } .icon-btn { background: var(--surface-soft); border: none; border-radius: 14px; width: 44px; height: 44px; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: inherit; transition: transform 0.15s ease; } .icon-btn:active { transform: scale(0.92); } .xp-badge { background: var(--surface-soft); border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; } /* ================================================================= MAIN / SCREENS ================================================================= */ #app { max-width: 720px; margin: 0 auto; padding: 10px 20px 60px; } .screen { display: none; } .screen.active { display: block; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .title-xl { font-size: clamp(2.2rem, 8vw, 3.2rem); font-weight: 700; margin: 4px 0 0; text-align: center; } .title-lg { font-size: 1.7rem; font-weight: 700; text-align: center; margin: 10px 0 4px; } .subtitle { text-align: center; color: var(--text-muted); font-weight: 500; margin: 4px 0 30px; } .subtitle-sm { text-align: center; color: var(--text-muted); font-weight: 500; margin: 0 0 20px; } /* ================================================================= 4. LANDING & MODE CARDS ================================================================= */ .hero { text-align: center; padding: 30px 0 10px; } .hero-planet { font-size: 4.5rem; animation: float 4s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(6deg); } } .mode-choice { display: flex; flex-direction: column; gap: 16px; margin-top: 10px; } .mode-card { background: var(--surface); color: var(--text-on-light); border: none; border-radius: 24px; padding: 24px; text-align: left; cursor: pointer; box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: 4px; transition: transform 0.15s ease; } .mode-card:active { transform: scale(0.97); } .mode-emoji { font-size: 2.2rem; } .mode-label { font-size: 1.3rem; font-weight: 700; } .mode-desc { font-size: 0.9rem; color: #6b6690; font-weight: 500; } /* ================================================================= 5. SETTINGS ================================================================= */ .settings-card { background: var(--surface); color: var(--text-on-light); border-radius: 20px; padding: 22px; box-shadow: var(--card-shadow); margin-bottom: 20px; } .settings-label { font-weight: 600; margin: 0 0 12px; } .seg-control { display: flex; background: var(--surface-soft); border-radius: 14px; padding: 4px; gap: 4px; } [data-theme] .settings-card .seg-control { background: #f0eefb; } .seg-btn { flex: 1; border: none; background: transparent; padding: 10px 12px; border-radius: 10px; font-weight: 600; font-size: 0.9rem; cursor: pointer; color: inherit; } .seg-btn.active { background: var(--primary); color: #fff; } /* Small pill toggle for the theme switch (Settings) -- compact, not stretched full-width like the segmented controls elsewhere. */ .theme-pill { display: inline-flex; gap: 4px; background: var(--gentle-bg); border-radius: 999px; padding: 4px; } .theme-pill-btn { border: none; background: transparent; padding: 8px 18px; border-radius: 999px; font-weight: 700; font-size: 0.85rem; cursor: pointer; color: var(--text-muted-on-surface, #8a84ad); transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .theme-pill-btn.active { background: var(--primary); color: var(--text-on-light); box-shadow: 0 0 0 3px var(--accent-yellow); } /* ================================================================= 6. QUEST MAP ================================================================= */ .quest-map { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 20px; position: relative; } .quest-node { display: flex; align-items: center; gap: 16px; background: var(--surface); color: var(--text-on-light); border-radius: 20px; padding: 16px 18px; box-shadow: var(--card-shadow); cursor: pointer; border: none; text-align: left; position: relative; } .quest-node:nth-child(even) { margin-left: 12%; } .quest-node:nth-child(odd) { margin-right: 12%; } .quest-node.locked { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.4); } .quest-node-icon { font-size: 2rem; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--gentle-bg); flex-shrink: 0; } .quest-node-body { flex: 1; } .quest-node-name { font-weight: 700; font-size: 1.05rem; } .quest-node-stars { color: var(--star-filled); font-size: 0.95rem; letter-spacing: 1px; } .quest-node-stars .empty { color: var(--star-empty); } .quest-node-lock { font-size: 1.4rem; } /* ================================================================= 6b. QUEST PATH MAP (Solo mode v2) — winding path + parallax stars ================================================================= */ .path-map-wrap { position: relative; max-width: 480px; margin: 10px auto 0; height: 1180px; } .path-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .path-field-layer { position: absolute; inset: -10% -10%; background-repeat: repeat; will-change: transform; } .path-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; } .path-node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: 168px; z-index: 2; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; color: inherit; transition: transform 0.12s ease; } .path-node:disabled { cursor: not-allowed; } .path-node:not(:disabled):active { transform: translate(-50%, -50%) scale(0.94); } .path-node:not(:disabled):active .path-planet svg { filter: brightness(1.15); } .path-node.side-left { align-items: flex-end; text-align: right; } .path-node.side-right { align-items: flex-start; text-align: left; } .path-planet { position: relative; width: 86px; height: 86px; } .path-planet svg { width: 100%; height: 100%; } .path-halo { position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, var(--halo-glow), transparent 70%); animation: pathPulse 3.2s ease-in-out infinite; } .path-node.locked .path-halo { display: none; } @keyframes pathPulse { 0%, 100% { opacity: 0.55; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.06); } } .path-node.locked .path-planet svg { filter: grayscale(0.85); opacity: 0.6; } .path-lock-chip { position: absolute; bottom: -2px; right: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); border: 2px solid var(--gentle-bg); display: flex; align-items: center; justify-content: center; font-size: 12px; } /* Rocket that flies along the path between chapters (script.js: flyShipTo) */ .ship-marker { position: absolute; width: 30px; height: 30px; transform: translate(-50%, -50%) rotate(var(--ship-angle, 0deg)); z-index: 3; pointer-events: none; filter: drop-shadow(0 3px 6px rgba(10, 5, 40, 0.35)); } .ship-marker svg { width: 100%; height: 100%; } .path-node-name { font-weight: 700; font-size: 0.9rem; color: var(--text-on-dark); } .path-node.locked .path-node-name { color: var(--locked-color); } .path-node-stars { font-size: 0.8rem; letter-spacing: 2px; color: var(--star-filled); } .path-node-stars .empty { color: var(--locked-color); } .path-node-meta { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); } /* ================================================================= 6c. BADGE SHELF (Collection screen) ================================================================= */ .badge-shelf { margin-top: 16px; background: var(--surface); border-radius: 24px; padding: 26px 18px 20px; box-shadow: var(--card-shadow); display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 20px 8px; } .badge-medal { display: flex; flex-direction: column; align-items: center; gap: 8px; } .badge-disc { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; } .badge-medal.earned .badge-disc { background: radial-gradient(circle at 35% 30%, var(--accent-yellow), var(--primary) 75%); box-shadow: 0 6px 16px rgba(255, 159, 28, 0.3); } .badge-medal.locked .badge-disc { background: var(--gentle-bg); filter: grayscale(1); opacity: 0.7; } .badge-label { font-weight: 700; font-size: 0.78rem; text-align: center; color: var(--text-on-light); } .badge-cond { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.6rem; color: var(--text-muted); text-align: center; } /* ================================================================= 7. PLAY SCREEN ================================================================= */ /* Reactive planet mascot -- floats above the play header, idle-blinks by default, and reacts to correct/wrong answers via the [data-mood] attr. */ .mascot { width: 64px; height: 64px; margin: 0 auto 6px; animation: mascotBob 2.4s ease-in-out infinite; } .mascot svg { width: 100%; height: 100%; display: block; } .mood-face { display: none; } .mascot[data-mood="idle"] .mood-idle, .mascot[data-mood="happy"] .mood-happy, .mascot[data-mood="soft"] .mood-soft { display: block; } .mascot[data-mood="idle"] .eye { animation: mascotBlink 4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; } .mascot.pop { animation: mascotBob 2.4s ease-in-out infinite, mascotPop 0.5s ease; } .mascot.soft-nudge { animation: mascotBob 2.4s ease-in-out infinite, mascotNudge 0.6s ease; } @keyframes mascotBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes mascotBlink { 0%, 90%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } } @keyframes mascotPop { 0% { transform: scale(1) rotate(0); } 40% { transform: scale(1.22) rotate(-6deg); } 70% { transform: scale(0.96) rotate(4deg); } 100% { transform: scale(1) rotate(0); } } @keyframes mascotNudge { 0% { transform: rotate(0); } 30% { transform: rotate(-6deg); } 60% { transform: rotate(4deg); } 100% { transform: rotate(0); } } .play-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .level-chip { background: var(--surface-soft); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 0.85rem; white-space: nowrap; } .progress-track { flex: 1; height: 12px; background: var(--surface-soft); border-radius: 999px; overflow: hidden; } .progress-track.small { height: 8px; } .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary), var(--accent-yellow)); border-radius: 999px; transition: width 0.4s ease; } .progress-fill.alt { background: linear-gradient(90deg, var(--secondary), var(--accent-pink)); } .question-count { font-weight: 600; font-size: 0.85rem; color: var(--text-muted); white-space: nowrap; } .mp-race-row { background: var(--surface-soft); border-radius: 16px; padding: 12px 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; } .mp-lane { display: flex; align-items: center; gap: 10px; } .mp-lane-label { font-weight: 700; font-size: 0.8rem; width: 46px; } .mp-score { font-weight: 700; font-size: 0.85rem; width: 24px; text-align: right; } .question-stage { background: var(--surface); color: var(--text-on-light); border-radius: 24px; padding: 26px 22px; box-shadow: var(--card-shadow); min-height: 260px; } .question-text { font-size: 1.25rem; font-weight: 600; margin: 0 0 20px; line-height: 1.4; } .options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .option-btn { background: var(--gentle-bg); border: 3px solid transparent; border-radius: 16px; padding: 16px 12px; font-weight: 600; font-size: 1rem; cursor: pointer; color: var(--text-on-light); transition: transform 0.12s ease, border-color 0.2s ease; } .option-btn:active { transform: scale(0.96); } .option-btn.correct { border-color: var(--success); background: var(--success-bg); } .option-btn.wrong { border-color: var(--accent-pink); } .option-btn:disabled { cursor: default; } .fill-form { display: flex; flex-direction: column; gap: 16px; align-items: stretch; } .fill-input { border: 3px solid var(--gentle-bg); background: var(--gentle-bg); border-radius: 16px; padding: 16px; font-size: 1.1rem; font-weight: 600; text-align: center; color: var(--text-on-light); } .fill-input:focus { outline: none; border-color: var(--secondary); } .match-grid { display: flex; flex-direction: column; gap: 14px; } .match-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; } .match-term { flex: 0 0 40%; min-width: 0; background: var(--gentle-bg); border-radius: 12px; padding: 12px; font-weight: 700; font-size: 0.9rem; text-align: center; } .match-select { flex: 1; min-width: 0; max-width: 100%; border: 3px solid var(--gentle-bg); background: var(--surface); border-radius: 12px; padding: 12px; font-weight: 600; font-size: 0.85rem; color: var(--text-on-light); } .match-row.correct .match-select { border-color: var(--success); } .match-row.wrong .match-select { border-color: var(--accent-pink); } .match-correct-reveal { flex: 0 0 100%; width: 100%; box-sizing: border-box; padding-left: calc(40% + 10px); color: #1b7a43; font-weight: 700; font-size: 0.78rem; } .fill-correct-reveal { margin: 12px 0 0; color: #1b7a43; font-weight: 700; font-size: 0.95rem; text-align: center; } .flashcard { min-height: 200px; border-radius: 18px; background: var(--gentle-bg); display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; font-weight: 600; font-size: 1.15rem; cursor: pointer; user-select: none; transition: transform 0.2s ease; } .flashcard.flipped { background: var(--success-bg); } .flashcard-hint { display: block; font-size: 0.8rem; color: var(--text-muted); font-weight: 500; margin-top: 14px; } .stage-actions { margin-top: 20px; display: flex; justify-content: center; } /* Feedback popup (star burst / confetti) -- sits in normal document flow right after the question card, so it's pushed below it and can never overlap the question, no matter how tall the card gets. */ .feedback-popup { position: relative; margin: 16px auto 0; padding: 16px 26px; border-radius: 18px; font-weight: 700; font-size: 1.1rem; text-align: center; max-width: 92%; animation: popIn 0.35s ease; } .feedback-popup.correct { background: var(--success-bg); color: #1b7a43; box-shadow: 0 8px 24px rgba(46, 204, 113, 0.35); } .fun-fact-line { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(43, 43, 69, 0.18); font-size: 0.78rem; font-weight: 600; opacity: 0.85; line-height: 1.35; } .fun-fact-line:empty { display: none; } .feedback-popup.wrong { background: var(--gentle-bg); color: #2b5a8a; box-shadow: 0 8px 24px rgba(74, 144, 217, 0.25); } @keyframes popIn { 0% { transform: translateY(10px) scale(0.7); opacity: 0; } 60% { transform: translateY(-4px) scale(1.05); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } } .burst { position: fixed; z-index: 49; font-size: 1.4rem; pointer-events: none; animation: burstFly 0.9s ease-out forwards; } @keyframes burstFly { 0% { transform: translate(0, 0) scale(0.6) rotate(0deg); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(180deg); opacity: 0; } } /* ================================================================= 8. BRAIN REST BREAK ================================================================= */ .brain-rest-screen { position: fixed; inset: 0; z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-grad); text-align: center; padding: 20px; } .brain-rest-screen.active { display: flex; } .cat-scene { display: flex; gap: 34px; font-size: 4.2rem; margin-bottom: 20px; } .cat { display: inline-block; } #cat1 { animation: catBounce 1.1s ease-in-out infinite; } #cat2 { animation: catSway 1.6s ease-in-out infinite; } #cat3 { animation: catWiggle 0.9s ease-in-out infinite; } @keyframes catBounce { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-26px) rotate(4deg); } } @keyframes catSway { 0%, 100% { transform: translateX(-14px) rotate(-8deg); } 50% { transform: translateX(14px) rotate(8deg); } } @keyframes catWiggle { 0%, 100% { transform: rotate(-10deg) scale(1); } 25% { transform: rotate(8deg) scale(1.05); } 50% { transform: rotate(-6deg) scale(0.98); } 75% { transform: rotate(10deg) scale(1.04); } } .brain-rest-title { font-size: clamp(2.4rem, 10vw, 3.6rem); font-weight: 700; margin: 0 0 8px; } .brain-rest-sub { color: var(--text-muted); font-weight: 500; margin: 0 0 30px; } /* ================================================================= 9. REWARD SCREEN ================================================================= */ .reward-card { background: var(--surface); color: var(--text-on-light); border-radius: 26px; padding: 34px 26px; text-align: center; box-shadow: var(--card-shadow); margin-top: 20px; } .reward-badge { font-size: 4rem; margin-bottom: 6px; animation: badgePop 0.5s ease; } @keyframes badgePop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } } .stars-row { font-size: 2.4rem; margin: 14px 0; color: var(--star-empty); letter-spacing: 6px; } .stars-row .filled { color: var(--star-filled); } .reward-xp { font-weight: 700; font-size: 1.2rem; color: var(--secondary); margin: 0 0 22px; } /* ================================================================= 10. MULTIPLAYER ================================================================= */ .pairing-code { text-align: center; font-size: 2.6rem; font-weight: 700; letter-spacing: 8px; background: var(--surface); color: var(--text-on-light); border-radius: 20px; padding: 20px; box-shadow: var(--card-shadow); margin-bottom: 20px; } .qr-box { display: flex; justify-content: center; background: var(--surface); border-radius: 20px; padding: 20px; box-shadow: var(--card-shadow); margin-bottom: 16px; } .join-panel { display: flex; flex-direction: column; gap: 14px; align-items: center; margin: 20px 0; } .code-input { width: 100%; max-width: 280px; text-align: center; font-size: 1.6rem; font-weight: 700; letter-spacing: 6px; text-transform: uppercase; padding: 16px; border-radius: 16px; border: 3px solid var(--surface); background: var(--surface); color: var(--text-on-light); } .code-input:focus { outline: none; border-color: var(--secondary); } .qr-video { width: 100%; max-width: 320px; border-radius: 18px; background: #000; } .error-text { text-align: center; color: var(--accent-pink); font-weight: 600; min-height: 20px; } .mp-final-scores { display: flex; justify-content: center; gap: 40px; font-size: 1.6rem; font-weight: 700; margin: 16px 0 24px; } /* ================================================================= 11. BUTTONS & SHARED COMPONENTS ================================================================= */ .btn { display: block; width: 100%; border: none; border-radius: 16px; padding: 15px 20px; font-weight: 700; font-size: 1rem; cursor: pointer; margin-top: 12px; font-family: inherit; } .btn-primary { background: var(--primary); color: #fff; } .btn-secondary { background: var(--surface-soft); color: var(--text-on-dark); } .screen:not(.brain-rest-screen) .btn-secondary, .settings-card ~ .btn-secondary { color: var(--text-on-dark); } .btn:active { transform: scale(0.97); } /* ================================================================= 12. RESPONSIVE ================================================================= */ @media (min-width: 640px) { .mode-choice { flex-direction: row; } .mode-card { flex: 1; } } @media (max-width: 420px) { .options-grid { grid-template-columns: 1fr; } .quest-node:nth-child(even) { margin-left: 4%; } .quest-node:nth-child(odd) { margin-right: 4%; } }