/* ============================================================================= PINNER QUIZZES — "Playful Bright" theme ----------------------------------------------------------------------------- Drop-in reskin that brings the PPT look (Fredoka font, chunky sticker cards, decorative circles, higher contrast) to the whole app. HOW TO INSTALL Option A (simplest): paste this whole file at the END of desktop-overrides.css. Option B: save as pinner-theme.css and link it AFTER desktop-overrides.css in your HTML : <-- last It only OVERRIDES existing selectors — nothing structural. Fully reversible: delete this block / file and you are back to the current look. The ONE optional JS change (for per-subject colour-coding) is at the very bottom, clearly marked and safe to skip. ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,600&display=swap'); /* Extra palette (adds to your existing --brand vars; doesn't replace them) */ :root{ --brand-deep:#2f7d33; /* deeper green for headings — reads well on white */ --btn-hi:#9bd23f; /* button gradient top */ --btn-lo:#7cb42a; /* button gradient bottom */ --btn-shadow:#5f8f1f; /* the "sticker" drop under buttons */ --card-line:#e7efdc; /* soft card border */ } /* ── 1. TYPE ──────────────────────────────────────────────────────────────── Body copy → Nunito (friendly, readable). Headings, buttons, pills, labels → Fredoka (the PPT display face). */ body{ font-family:'Nunito', Arial, Helvetica, sans-serif; } h1, h2, h3, .brand h1, .hero h2, .hero p, .quiz-head h2, .menu-card h3, .quiz-card h3, .name-screen h2, .result-screen h2, .score-big, .crumb, .badge, .btn, .menu-card button, .quiz-card button, .option-btn, .passage-options .option-btn, .progress, .timer-pill, .marks-badge, .marks-badge-multi, .mode-badge, .section-heading, .quiz-group-head h3, .quiz-group-num, .quiz-group-count, .quiz-step-badge, .quiz-challenge-badge, .passage-title, .story-context-label, .menu-view-btn, .qnav-btn{ font-family:'Fredoka', 'Nunito', Arial, sans-serif; } /* PROTECT MATHS LAYOUTS — force number/column work back to monospace so the font swap can never disturb their alignment. */ .written-method, .col-calc-grid, .col-calc-op, .col-calc-digit, .col-calc-dot, .col-calc-input, .col-calc-carry-input, .col-calc-rem-input, .col-calc-mini-input, .col-calc-remainder-label{ font-family:"Consolas","Lucida Console","Courier New", monospace !important; } /* ── 2. COLOUR & CONTRAST ────────────────────────────────────────────────── */ .hero h2, .quiz-head h2, .menu-card h3, .quiz-card h3, .name-screen h2, .result-screen h2{ color:var(--brand-deep); } .hero p{ color:#e0932a; font-weight:500; } /* warm subtitle, like the PPT */ /* ── 3. CHUNKY "STICKER" CARDS ───────────────────────────────────────────── */ .card, .menu-card, .quiz-card, .hero{ border:3px solid var(--card-line); border-radius:24px; box-shadow:0 12px 30px rgba(60,90,30,0.10); } .panel{ border:3px solid var(--card-line); border-radius:28px; box-shadow:0 16px 38px rgba(60,90,30,0.12); } /* ── 4. BUTTONS — solid, bright, with an offset drop ─────────────────────── */ .btn, .menu-card button, .quiz-card button{ background:linear-gradient(180deg, var(--btn-hi), var(--btn-lo)); border-radius:16px; font-weight:600; box-shadow:0 4px 0 var(--btn-shadow); transition:transform .12s ease, box-shadow .12s ease; } .btn:hover, .menu-card button:hover, .quiz-card button:hover{ background:linear-gradient(180deg, var(--btn-hi), var(--btn-lo)); transform:translateY(-2px); box-shadow:0 6px 0 var(--btn-shadow); } .btn:active, .menu-card button:active, .quiz-card button:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--btn-shadow); } /* Secondary (white) buttons keep their look — just round + lift */ .btn.secondary, .finish-bar .btn.secondary{ border-radius:16px; box-shadow:0 3px 0 rgba(0,0,0,0.06); } /* ── 5. BREADCRUMB PILLS ─────────────────────────────────────────────────── */ .crumb{ border:none; font-weight:600; box-shadow:0 2px 0 rgba(0,0,0,0.06); } .crumb.current{ background:linear-gradient(180deg, var(--btn-hi), var(--btn-lo)); color:#fff; box-shadow:0 3px 0 var(--btn-shadow); } /* ── 6. PROGRESS DOTS — fill the current step so it pops ──────────────────── */ .qnav-btn{ font-weight:600; } .qnav-btn.current{ background:linear-gradient(180deg, var(--btn-hi), var(--btn-lo)); color:#fff; border-color:var(--btn-shadow); } /* ── 7. DECORATIVE CIRCLES (from the PPT) ──────────────────────────────────── Fixed, behind everything, non-interactive. Pure decoration. */ .app{ position:relative; z-index:1; } body::before, body::after{ content:""; position:fixed; border-radius:50%; z-index:0; pointer-events:none; } body::before{ top:-150px; right:-100px; width:380px; height:380px; background:rgba(139,194,41,0.12); } body::after{ bottom:-120px; left:-90px; width:280px; height:280px; background:rgba(245,166,35,0.12); } /* One soft circle inside the hero panel */ .hero{ position:relative; overflow:hidden; } .hero::after{ content:""; position:absolute; top:-40px; right:-30px; width:150px; height:150px; border-radius:50%; background:#eef6df; z-index:0; pointer-events:none; } .hero > *{ position:relative; z-index:1; } /* ── 8. SUBJECT / STORY ICON TILES ─────────────────────────────────────────── Rendered by pinnerIcon() in app.js. Green brand tile by default; the emoji inside is chosen from the story title (or subject). */ .subject-icon{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:54px; height:54px; border-radius:16px; font-size:28px; line-height:1; background:linear-gradient(180deg, var(--btn-hi), var(--btn-lo)); box-shadow:0 4px 0 var(--btn-shadow); } .subject-icon-sm{ width:38px; height:38px; border-radius:12px; font-size:20px; box-shadow:0 3px 0 var(--btn-shadow); } .quiz-head-title{ display:flex; align-items:center; gap:16px; } /* keep the quiz-card title tidy next to its small icon */ .quiz-card-title-row{ align-items:center; } /* ── 9. HERO OWL MASCOT (all menu pages) ───────────────────────────────────── renderHero() prepends

. Put owl-mascot.svg in your assets/ folder. It jiggles 3× on arrival then rests; hover/click replays it (wired in app.js). */ @keyframes owlcheer{ 0% { transform:translateY(0) scale(1) rotate(0deg); } 20% { transform:translateY(-10px) scale(1.08) rotate(-7deg); } 40% { transform:translateY(0) scale(1) rotate(0deg); } 60% { transform:translateY(-10px) scale(1.08) rotate(7deg); } 80% { transform:translateY(0) scale(1) rotate(0deg); } } .hero{ display:flex; align-items:center; gap:22px; } .hero-text{ flex:1 1 auto; } .hero-owl{ flex:none; width:78px; height:auto; cursor:pointer; transform-origin:50% 90%; animation:owlcheer 0.9s ease-in-out 3; } @media (max-width:560px){ .hero-owl{ width:60px; } } /* ── 10. SUBJECT COLOURS (one fixed colour per subject) ────────────────────── app.js stamps data-subject on each menu card and on each expanded-subject section heading. Every card/heading for a subject shares one colour, so a year page reads as coloured bands: Maths green, English orange, 11+ blue… Each card exposes its accent as CSS vars so buttons + tint follow along. To recolour a subject, change the four hex values on its line below. */ .menu-card[data-subject]{ --a-hi:#8ecb4e; --a-lo:#6fb636; --a-sh:#4f8f26; --a-tint:#eaf5da; /* default green */ position:relative; overflow:hidden; border-top:6px solid var(--a-lo); } /* subject → colour map (shared by the card and its section heading) */ .menu-card[data-subject="maths"], .quiz-group[data-subject="maths"] { --a-hi:#8ecb4e; --a-lo:#6fb636; --a-sh:#4f8f26; --a-tint:#eaf5da; } /* green */ .menu-card[data-subject="english"], .quiz-group[data-subject="english"] { --a-hi:#f2a63e; --a-lo:#e0932a; --a-sh:#b8760f; --a-tint:#fdefd8; } /* orange */ .menu-card[data-subject="elevenplus"], .quiz-group[data-subject="elevenplus"] { --a-hi:#5aa9dd; --a-lo:#4a9bd4; --a-sh:#2f7bb0; --a-tint:#e2f0fa; } /* blue */ .menu-card[data-subject="course"], .quiz-group[data-subject="course"] { --a-hi:#6f8fd6; --a-lo:#5b78c9; --a-sh:#3f57a0; --a-tint:#e6ebfa; } /* 11+ course — distinct blue */ .menu-card[data-subject="timestables"], .quiz-group[data-subject="timestables"]{ --a-hi:#d574bd; --a-lo:#c95fae; --a-sh:#a53f8c; --a-tint:#fbe6f5; } /* pink */ .menu-card[data-subject="quizzes"], .quiz-group[data-subject="quizzes"] { --a-hi:#4dbcac; --a-lo:#3fb0a0; --a-sh:#2b8577; --a-tint:#dff3ef; } /* teal */ .menu-card[data-subject="challenges"], .quiz-group[data-subject="challenges"] { --a-hi:#ef8a5c; --a-lo:#e6683c; --a-sh:#b84a24; --a-tint:#fce6dc; } /* coral */ /* home-page year cards — a gentle spectrum so Home isn't monotone */ .menu-card[data-subject="year1"]{ --a-hi:#8ecb4e; --a-lo:#6fb636; --a-sh:#4f8f26; --a-tint:#eaf5da; } .menu-card[data-subject="year2"]{ --a-hi:#4dbcac; --a-lo:#3fb0a0; --a-sh:#2b8577; --a-tint:#dff3ef; } .menu-card[data-subject="year3"]{ --a-hi:#5aa9dd; --a-lo:#4a9bd4; --a-sh:#2f7bb0; --a-tint:#e2f0fa; } .menu-card[data-subject="year4"]{ --a-hi:#9a80d6; --a-lo:#8b6fc9; --a-sh:#634aa0; --a-tint:#ece5f8; } .menu-card[data-subject="year5"]{ --a-hi:#d574bd; --a-lo:#c95fae; --a-sh:#a53f8c; --a-tint:#fbe6f5; } .menu-card[data-subject="year6"]{ --a-hi:#f2a63e; --a-lo:#e0932a; --a-sh:#b8760f; --a-tint:#fdefd8; } /* soft accent circle in the top-right corner of each card */ .menu-card[data-subject]::before{ content:""; position:absolute; top:-30px; right:-30px; width:92px; height:92px; border-radius:50%; background:var(--a-tint); z-index:0; } .menu-card[data-subject] > *{ position:relative; z-index:1; } /* buttons pick up the card's accent */ .menu-card[data-subject] button{ background:linear-gradient(180deg, var(--a-hi), var(--a-lo)); box-shadow:0 4px 0 var(--a-sh); } /* card title matches the subject colour (was flat green everywhere) */ .menu-card[data-subject] h3{ color:var(--a-lo); } .menu-card[data-subject] button:hover{ background:linear-gradient(180deg, var(--a-hi), var(--a-lo)); } /* coloured subject section headings (expanded subjects on the year page) */ .quiz-group[data-subject] .quiz-group-head h3{ color:var(--a-lo); } .quiz-group[data-subject] .quiz-group-num{ background:linear-gradient(180deg, var(--a-hi), var(--a-lo)); box-shadow:0 3px 0 var(--a-sh); } .quiz-group[data-subject] .quiz-group-rule{ background:linear-gradient(90deg, var(--a-tint), transparent); } /* ── 11. TWO-BUTTON CARDS (Classwork / Homework) ───────────────────────────── The pair reads as intentional: first button solid (the accent), the rest outlined in the same colour. */ .menu-card .card-actions{ margin-top:16px; } .menu-card .card-actions button{ margin-top:0; } .menu-card[data-subject] .card-actions button:not(:first-child){ background:#fff; color:var(--a-lo); border:2.5px solid var(--a-lo); box-shadow:0 4px 0 var(--a-tint); } .menu-card[data-subject] .card-actions button:not(:first-child):hover{ background:var(--a-tint); } /* ── 12. GROUP HEADINGS + COLLAPSIBLE SECTIONS ─────────────────────────────── Reused for menu groups (KS1/KS2, Curriculum/11+/Extras…) and quiz blocks (Block 1/2/3). Coloured number chip, softer rule, and a proper tappable affordance when collapsible. */ .quiz-group-head h3{ color:var(--brand-deep); } .quiz-group-num{ background:linear-gradient(180deg, var(--btn-hi), var(--btn-lo)); border-radius:12px; box-shadow:0 3px 0 var(--btn-shadow); } .quiz-group-rule{ background:linear-gradient(90deg, var(--card-line), transparent); height:3px; } .quiz-group-count{ background:#eef6df; color:#5a7d2b; padding:4px 12px; border-radius:999px; } /* collapsible heading = clearly clickable */ .quiz-group-head[role="button"]{ user-select:none; padding:6px 8px; margin-left:-8px; border-radius:14px; transition:background .12s ease; } .quiz-group-head[role="button"]:hover{ background:rgba(139,194,41,0.10); } .group-chevron{ color:var(--brand-dark); font-size:15px; width:26px; height:26px; line-height:26px; text-align:center; border-radius:50%; background:#eef6df; margin-left:10px !important; } /* ── 13. LOCKED CARDS (subscriptions, not yet switched on) ──────────────────── app.js greys these with opacity + grayscale. Add a small padlock + keep the accent bar muted so a locked card looks deliberate, not broken. */ .menu-card[style*="grayscale"]{ position:relative; } .menu-card[style*="grayscale"]::after{ content:"🔒"; position:absolute; top:12px; right:14px; font-size:18px; filter:grayscale(0); opacity:.8; z-index:2; } /* ── 14. WIDER, TIGHTER LAYOUT ─────────────────────────────────────────────── Use more of the screen on big monitors, and let cards hug their content instead of the old fixed heights (kills the dead space under buttons). */ .shell{ width:min(1320px, calc(100% - 40px)); } .menu-card{ min-height:0; } .quiz-card{ min-height:0; } /* ── 15. COLLAPSIBLE BLOCK BARS (leaf quiz-list pages) ─────────────────────── Turn the block heading into a full-width, obviously-tappable bar in the current subject's colour. app.js stamps data-subject on the leaf section so an English page's bars are orange, Maths green, 11+ blue, etc. The round chevron badge on the right makes open/close clear. */ .quiz-group[data-subject] .quiz-group-head[role="button"]{ background:linear-gradient(90deg, var(--a-tint), #fff); border:2px solid var(--a-tint); padding:12px 16px; margin:0 0 16px; border-radius:16px; gap:12px; } .quiz-group[data-subject] .quiz-group-head[role="button"]:hover{ filter:brightness(0.98); } .quiz-group[data-subject] .quiz-group-head[role="button"] h3{ color:var(--a-lo); } .quiz-group[data-subject] .quiz-group-head[role="button"] .group-chevron{ background:var(--a-lo); color:#fff; width:32px; height:32px; line-height:32px; font-size:15px; box-shadow:0 3px 0 var(--a-sh); } .quiz-group[data-subject] .quiz-group-head[role="button"] .quiz-group-count{ background:#fff; color:var(--a-lo); } /* ── 16. PLAYFUL QUIZ CARDS (busy quiz-list pages) ─────────────────────────── On the selection menus each subject stays ONE colour. But a long quiz list (39 comprehensions, etc.) reads better as a lively rotation than a wall of one colour — so quiz cards cycle a 5-colour palette, with a numbered badge for quick scanning. Menu cards are unaffected. */ .quiz-group .grid{ counter-reset: none; } /* numbering handled per grid */ .grid > .quiz-card{ --q-hi:#8ecb4e; --q-lo:#6fb636; --q-sh:#4f8f26; --q-tint:#eaf5da; position:relative; overflow:hidden; border-top:6px solid var(--q-lo); } .grid > .quiz-card:nth-of-type(5n+2){ --q-hi:#f2a63e; --q-lo:#e0932a; --q-sh:#b8760f; --q-tint:#fdefd8; } .grid > .quiz-card:nth-of-type(5n+3){ --q-hi:#5aa9dd; --q-lo:#4a9bd4; --q-sh:#2f7bb0; --q-tint:#e2f0fa; } .grid > .quiz-card:nth-of-type(5n+4){ --q-hi:#d574bd; --q-lo:#c95fae; --q-sh:#a53f8c; --q-tint:#fbe6f5; } .grid > .quiz-card:nth-of-type(5n+5){ --q-hi:#4dbcac; --q-lo:#3fb0a0; --q-sh:#2b8577; --q-tint:#dff3ef; } .grid > .quiz-card::before{ content:""; position:absolute; top:-30px; right:-30px; width:88px; height:88px; border-radius:50%; background:var(--q-tint); z-index:0; } .grid > .quiz-card > *{ position:relative; z-index:1; } .grid > .quiz-card h3{ color:var(--q-lo); } .grid > .quiz-card > button{ background:linear-gradient(180deg, var(--q-hi), var(--q-lo)); box-shadow:0 4px 0 var(--q-sh); } /* the icon tile in the title row picks up the card's colour */ .grid > .quiz-card .subject-icon{ background:linear-gradient(180deg, var(--q-hi), var(--q-lo)); box-shadow:0 3px 0 var(--q-sh); } /* ── 17. TILED MENU PANELS (Home, Year pages, Times Tables) ────────────────── Each subject/group is a tinted "zone" panel; panels tile into balanced rows that fill the width (Maths | English, then 11+ Practice | Course, then Extras, etc.). Quiz-list pages are NOT panelised — they keep the rainbow blocks above. */ .menu-tiles{ display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start; } .subject-panel{ flex:1 1 calc(50% - 9px); min-width:320px; background:#f1f6e8; border:2px solid #e2ecce; border-radius:20px; padding:16px 16px 18px; } /* subject-tinted panels (expanded subjects) */ .subject-panel[data-subject="maths"] { background:#f1f7e6; border-color:#dcebc4; } .subject-panel[data-subject="english"] { background:#fdf4e6; border-color:#f6e0c0; } .subject-panel[data-subject="elevenplus"]{ background:#eef6fc; border-color:#d5e8f6; } .subject-panel[data-subject="course"] { background:#eff2fc; border-color:#dbe2f5; } .subject-panel[data-subject="quizzes"] { background:#eafaf6; border-color:#cfeee4; } .subject-panel[data-subject="challenges"]{ background:#fdf0ea; border-color:#f7d9cb; } /* 11+ Course: faint diagonal stripe so it reads as a sibling-but-different zone */ .subject-panel[data-pattern="stripe"]{ background:repeating-linear-gradient(45deg, #eff2fc, #eff2fc 12px, #e6ebfa 12px, #e6ebfa 24px); } .panel-head{ display:flex; align-items:center; gap:10px; margin:0 0 12px; } .panel-head h3{ margin:0; font-family:'Fredoka','Nunito',sans-serif; font-weight:600; font-size:19px; color:#3a5a2a; } .subject-panel[data-subject="maths"] .panel-head h3{ color:#4f8f26; } .subject-panel[data-subject="english"] .panel-head h3{ color:#c47a12; } .subject-panel[data-subject="elevenplus"] .panel-head h3{ color:#2f7bb0; } .subject-panel[data-subject="course"] .panel-head h3{ color:#3f57a0; } .subject-panel[data-subject="quizzes"] .panel-head h3{ color:#2b8577; } .subject-panel[data-subject="challenges"] .panel-head h3{ color:#b84a24; } /* cards inside a panel tile responsively (2-up in a half-width panel) */ .panel-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; } /* ── 17b. HOME PAGE bespoke layout ─────────────────────────────────────────── Key Stage 1 (narrow, years stacked) | Key Stage 2 (twice as wide, 2×2), together spanning the full width — matching the Times Tables zone below. Only applies on the home page (.home-tiles). */ .home-tiles{ align-items:flex-start; } .home-tiles > .subject-panel{ min-width:0; } .home-tiles > .subject-panel:nth-child(1){ flex:1 1 0; } /* Key Stage 1 */ .home-tiles > .subject-panel:nth-child(2){ flex:2 1 0; } /* Key Stage 2 — 2× wide */ .home-tiles > .subject-panel:nth-child(1) .panel-grid{ grid-template-columns:1fr; } /* KS1 years stacked */ .home-tiles > .subject-panel:nth-child(2) .panel-grid{ grid-template-columns:1fr 1fr; } /* KS2 as a 2×2 */ .home-tiles > .subject-panel:nth-child(3){ flex:1 1 100%; } /* Times Tables full width */ .home-tiles > .subject-panel:nth-child(3) .panel-grid{ grid-template-columns:repeat(4, 1fr); } /* ── 18. HOVER LIFT (cards + buttons) ──────────────────────────────────────── A gentle, playful raise on hover so cards feel tappable. */ .menu-card, .quiz-card{ transition:transform .12s ease, box-shadow .12s ease; } .menu-card:hover, .quiz-card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(60,90,30,0.16); }