/* ========================================================================== "Pop-up Storybook" — shared style for all student-facing pages. - Cartoon background image (set on ) - Paper-card title plate with washi tape, layered back card - Mascots (ABC block + dartboard) floating on the title plate - Paper cards (white, navy outline, hard offset shadow) for any content ============================================================================= */ :root { --ink: #1b1140; --paper: #fff5e1; --sun: #ffd23f; --coral: #ff5b6e; --mint: #b6f0d4; } /* ---------- page background: cartoon + subtle darkening overlay ---------- */ body.storybook { background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.20) 100%), url('/img/bg-login.png') center / cover no-repeat fixed; } body.storybook .bg-stage::before { opacity: 0.12; } body.storybook .confetti span { opacity: 0.40; } /* ---------- title plate (full-size, used on login/pick) ---------- */ .plate-stack { position: relative; margin-top: 36px; max-width: 600px; width: 94vw; } .plate-back { position: absolute; inset: 0; transform: rotate(-3deg) translate(-10px, 12px); background: var(--mint); border: 3px solid var(--ink); border-radius: 30px; box-shadow: 0 14px 30px rgba(27,17,64,0.20); } .plate { position: relative; padding: 32px 32px 26px; background: var(--paper); border: 3px solid var(--ink); border-radius: 30px; box-shadow: 0 18px 0 -4px var(--ink), 0 24px 40px rgba(27,17,64,0.30); text-align: center; background-image: linear-gradient(180deg, transparent 0, transparent 96%, rgba(27,17,64,0.05) 100%); } /* compact version: same look, smaller — used on game.html top bar */ .plate.compact { padding: 14px 24px 12px; max-width: 520px; border-radius: 22px; display: inline-flex; align-items: center; gap: 14px; text-align: left; } .plate.compact .washi { display: none; } .plate.compact .title-main { font-size: 28px; line-height: 1; } .plate.compact .features { display: none; } .plate.compact .title-sub { display: none; } /* washi tape strip on the top center of the plate */ .washi { position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-2deg); width: 110px; height: 24px; background: var(--sun); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 0 3px 0 rgba(27,17,64,0.15); } .washi::before, .washi::after { content: ""; position: absolute; top: 0; bottom: 0; width: 6px; background: repeating-linear-gradient(45deg, var(--ink) 0 3px, transparent 3px 6px); } .washi::before { left: 0; } .washi::after { right: 0; } /* eyebrow tag (HT EXPLORE) */ .eyebrow { display: inline-block; font-family: 'Lilita One', 'Fredoka', sans-serif; font-size: 12px; letter-spacing: 6px; padding: 5px 14px 4px; background: var(--ink); color: var(--sun); border-radius: 999px; margin-bottom: 12px; } /* title */ .title-main { margin: 0; font-family: 'Lilita One', 'Fredoka', sans-serif; font-weight: 900; line-height: 0.92; font-size: clamp(46px, 8.5vw, 74px); letter-spacing: 0.5px; color: var(--ink); } .title-main .w1 { display: block; } .title-main .w2 { display: inline-block; color: var(--coral); position: relative; padding: 0 4px; } .title-main .w2::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: -6px; height: 12px; background: url("data:image/svg+xml;utf8,") center/100% 100% no-repeat; transform: rotate(-1deg); } /* feature chips */ .features { display: flex; justify-content: center; gap: 10px; margin-top: 16px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 5px; background: #fff; border: 2px solid var(--ink); border-radius: 999px; font-family: 'Lilita One', 'Fredoka', sans-serif; font-size: 13px; color: var(--ink); box-shadow: 0 3px 0 var(--ink); } .chip .ico { font-size: 15px; } /* subtitle */ .title-sub { margin-top: 14px; font-size: 15px; color: var(--ink); font-weight: 500; opacity: 0.78; } .title-sub .wave { display: inline-block; transform-origin: 70% 70%; animation: wave 1.4s ease-in-out infinite; } @keyframes wave { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(20deg); } 75% { transform: rotate(-12deg); } } /* ---------- paper card (form, content) ---------- */ .paper-card { position: relative; background: #fff; border: 3px solid var(--ink); border-radius: 26px; box-shadow: 0 18px 0 -4px var(--ink), 0 24px 40px rgba(27,17,64,0.30); padding: 26px; text-align: center; display: flex; flex-direction: column; gap: 14px; } .paper-card .tiny.muted { color: var(--ink); opacity: 0.65; } /* ghost buttons inherit white text from .btn — override so they're visible inside paper cards (white background). */ .paper-card .btn.ghost { color: var(--ink); } .paper-card .btn.ghost:hover { background: rgba(27,17,64,0.08); } .paper-card .input { background: #faf6e7; color: var(--ink); border: 2px solid var(--ink); } .paper-card .input::placeholder { color: rgba(27,17,64,0.40); } .paper-card .input:focus { background: #fff; box-shadow: 0 0 0 3px var(--sun); } /* paper card with a colored tape strip on the top-left */ .paper-card.tape-coral::before { content: ""; position: absolute; top: -12px; left: 24px; width: 70px; height: 22px; background: var(--coral); border: 2px solid var(--ink); border-radius: 3px; transform: rotate(-4deg); box-shadow: 0 3px 0 rgba(27,17,64,0.15); } .paper-card.tape-sun::before { content: ""; position: absolute; top: -12px; left: 24px; width: 70px; height: 22px; background: var(--sun); border: 2px solid var(--ink); border-radius: 3px; transform: rotate(-4deg); box-shadow: 0 3px 0 rgba(27,17,64,0.15); } /* ---------- name-pick cards (used on pick.html) ---------- */ .name-card { appearance: none; border: 2px solid var(--ink); background: #fff; color: var(--ink); border-radius: 18px; padding: 18px 16px; display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; cursor: pointer; font-family: inherit; font-size: 22px; font-weight: 700; transition: transform 0.1s ease, box-shadow 0.1s ease; text-align: left; box-shadow: 0 4px 0 var(--ink); } .name-card:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); } .name-card:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); } .name-card .ico { font-size: 30px; } .name-card .lbl { text-align: left; } .name-card .status.badge { font-size: 13px; padding: 4px 10px; background: var(--mint); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; font-family: 'Lilita One', sans-serif; } .name-card.is-chosen { background: #fff8d6; box-shadow: 0 6px 0 var(--coral); border-color: var(--coral); } .name-card.is-single { cursor: default; } /* ---------- game-screen question card ---------- */ .question-card { position: relative; background: #fff; border: 3px solid var(--ink); border-radius: 26px; box-shadow: 0 18px 0 -4px var(--ink), 0 24px 40px rgba(27,17,64,0.30); padding: 28px 24px 24px; text-align: center; display: flex; flex-direction: column; gap: 16px; max-width: 920px; width: 96vw; } .question-card .q-text { font-family: 'Lilita One', 'Fredoka', sans-serif; font-size: clamp(28px, 4.5vw, 42px); line-height: 1.05; color: var(--ink); margin: 8px 0; } .question-card .q-image img, .question-card .q-image video { max-width: 100%; max-height: 50vh; border-radius: 16px; border: 3px solid var(--ink); } .question-card .q-meta { display: flex; justify-content: space-between; align-items: center; font-family: 'Lilita One', sans-serif; letter-spacing: 1px; color: var(--ink); } .q-meta .badge-q { display: inline-block; padding: 6px 14px; background: var(--ink); color: var(--sun); border-radius: 999px; font-size: 14px; } /* answer buttons — keep the colorful red/blue/yellow/green they had, but add the navy outline so they belong to the storybook */ .answer-btn { border: 3px solid var(--ink) !important; box-shadow: inset 0 -8px 0 rgba(0,0,0,0.20), 0 4px 0 var(--ink) !important; } .answer-btn:hover { box-shadow: inset 0 -8px 0 rgba(0,0,0,0.20), 0 6px 0 var(--ink) !important; } .answer-btn:active { box-shadow: inset 0 -4px 0 rgba(0,0,0,0.18), 0 2px 0 var(--ink) !important; } /* ---------- reveal / top-3 paper card ---------- */ .reveal-card { position: relative; background: #fff; border: 3px solid var(--ink); border-radius: 26px; box-shadow: 0 18px 0 -4px var(--ink), 0 24px 40px rgba(27,17,64,0.30); padding: 26px; text-align: center; display: flex; flex-direction: column; gap: 14px; max-width: 720px; width: 92vw; } .reveal-card .reveal-headline { font-family: 'Lilita One', 'Fredoka', sans-serif; font-size: clamp(22px, 3vw, 30px); color: var(--ink); } .reveal-card .reveal-headline .accent { color: var(--coral); } /* leaderboard rows — same family, no plain rows */ .lb-row { background: #fff !important; border: 2px solid var(--ink) !important; box-shadow: 0 3px 0 var(--ink) !important; color: var(--ink) !important; } .lb-row .lb-rank { background: #fff !important; border: 2px solid var(--ink); color: var(--ink) !important; } .lb-row.first { background: linear-gradient(90deg, #fff3a8, #ffd23f) !important; } .lb-row.first .lb-rank { background: linear-gradient(180deg, #ffe27a, #ffb300) !important; color: #2a1500 !important; } .lb-row.second { background: linear-gradient(90deg, #ecf0ff, #d0d8ee) !important; } .lb-row.third { background: linear-gradient(90deg, #f3a877, #c47a3f) !important; } .lb-score { background: none !important; -webkit-text-fill-color: var(--ink) !important; color: var(--ink) !important; font-family: 'Lilita One', sans-serif; } /* ---------- mascots ---------- */ .mascot { position: absolute; top: 50%; width: 80px; height: 80px; filter: drop-shadow(0 6px 0 var(--ink)); } .mascot.left { left: -44px; animation: bobL 3.4s ease-in-out infinite; } .mascot.right { right: -44px; animation: bobR 3.4s ease-in-out infinite 1.2s; } @keyframes bobL { 0%,100% { transform: translateY(-50%) rotate(-6deg); } 50% { transform: translateY(-60%) rotate(6deg); } } @keyframes bobR { 0%,100% { transform: translateY(-50%) rotate(6deg); } 50% { transform: translateY(-60%) rotate(-6deg); } } @media (max-width: 640px) { .mascot { width: 58px; height: 58px; } .mascot.left { left: -28px; } .mascot.right { right: -28px; } .title-main { font-size: 48px; } }