/* educator.in — "Playful" theme layer for school children. Linked LAST in every page's (after the page styles + mobile.css), so it re-skins the whole portal by overriding the shared CSS variables and component classes. Remove this one file to go back to the classic look. */ /* NOTE: the "Baloo 2" font is loaded asynchronously by nav.js (a CSS @import here would block first paint on slow connections). Until it arrives, the stack falls back to Fraunces/Georgia gracefully. */ :root{ /* Bottom-left floating buttons (share ✦, topic 🎯, menu ☰) share one row. A page that needs them lifted (chat's message box) just overrides --edu-fab-bottom instead of fighting each rule with !important. */ --edu-fab-bottom:16px; --edu-fab-size:52px; --edu-fab-gap:10px; /* brighter, friendlier palette (same meaning: AI=blue, human=warm red) */ --paper:#FFF7E8; --card:#FFFFFF; --ink:#2B2440; --ink-mute:#6B6485; --ai:#4A5CFF;--ai-deep:#3243D6;--ai-soft:#E9EDFF; --human:#F0604D;--human-soft:#FFE9E4; --gold:#FFA726;--gold-deep:#B26A00;--gold-soft:#FFF1D6; --green:#2BB673;--green-soft:#E1F7EB;--green-deep:#177A4B; --line:rgba(43,36,64,.12);--line-strong:rgba(43,36,64,.24); /* every heading on the site uses var(--serif) → all go rounded & chubby */ --serif:"Baloo 2","Fraunces",Georgia,serif; } /* Four buttons at 52px would eat most of a 390px phone, so shrink the row there. Every fab sizes from these two variables, so this is the only place to change. */ @media(max-width:480px){ :root{--edu-fab-size:44px;--edu-fab-gap:8px} } /* sunny confetti-dot background everywhere */ body{ background-color:var(--paper); background-image: radial-gradient(circle at 24px 30px, rgba(74,92,255,.06) 3px, transparent 4px), radial-gradient(circle at 84px 90px, rgba(255,167,38,.09) 3px, transparent 4px), radial-gradient(circle at 140px 40px, rgba(43,182,115,.07) 3px, transparent 4px); background-size:170px 130px; } /* rainbow ribbon on top of every page */ header{position:sticky;top:0} header::before{ content:'';display:block;height:5px; background:linear-gradient(90deg,#4A5CFF,#2BB673,#FFA726,#F0604D,#4A5CFF); } header{background:rgba(255,247,232,.94)!important} .brand{font-family:"Baloo 2",sans-serif!important;font-weight:800!important;letter-spacing:0!important} /* headings: bouncy but readable */ h1,h2,h3,h4,.gtopic{letter-spacing:0!important} /* friendlier cards & tiles — rounder, thicker outline, soft colored shadow */ .card,.qcard,.tile,.prod,.cat,.ccard,.detail,.maker,.explore-box,.band,.cert,.rcard,.modalcard,.item,.module{ border-radius:20px!important; } .tile,.prod,.ccard,.cert{ border-width:2px!important; box-shadow:0 4px 0 rgba(43,36,64,.06); } .tile:hover,.prod:hover,.ccard:hover{ transform:translateY(-4px) rotate(-.4deg); box-shadow:0 10px 24px rgba(74,92,255,.14); } .tile .ic{width:52px!important;height:52px!important;font-size:26px!important;border-radius:16px!important} /* juicy buttons */ .btn,.send,.nextbtn,.sform button.go,.explore-form button,.abtn,.lread,button.go{ border-radius:14px!important; font-family:"Baloo 2",sans-serif;font-weight:700; } .btn.primary,.send,.human-btn{box-shadow:0 5px 0 rgba(50,67,214,.35)} .btn.primary:active,.send:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(50,67,214,.35)} /* game answer buttons: big, chunky, tappable */ .opt{ border-radius:16px!important;border-width:2.5px!important; box-shadow:0 4px 0 rgba(43,36,64,.08); } .opt:hover{transform:translateY(-2px) scale(1.01)} .opt.correct{box-shadow:0 4px 0 rgba(43,182,115,.4)} .opt.wrong{box-shadow:0 4px 0 rgba(240,96,77,.35)} /* chips & badges: sticker feel */ .chip,.badge,.eyebrow,.kicker{border-radius:99px} .chip{font-weight:800} /* progress bars slightly thicker & rounder */ .steps .st{height:10px!important} .bar{height:9px!important} /* chat bubbles rounder */ .msg.you .bubble{border-radius:20px 20px 6px 20px!important} .msg.tutor .bubble{border-radius:6px 20px 20px 20px!important} /* toasts pop */ .toast{border-radius:16px!important;font-family:"Baloo 2",sans-serif;font-weight:700} /* floating tutor button: friendlier */ .edu-tw-fab{box-shadow:0 8px 24px rgba(74,92,255,.45),0 4px 0 rgba(50,67,214,.5)!important} /* footer softening */ footer{background:rgba(255,255,255,.5)} @media(prefers-reduced-motion:reduce){ .tile:hover,.prod:hover,.ccard:hover,.opt:hover{transform:none} } /* ============================================================ APPEARANCE — learner-chosen colour theme + text size. public/appearance.js sets html[data-theme] / html[data-text] from the saved choice (My Account → ⚙️ Settings). These rules live at the end of theme.css because it is linked LAST on every page, so they reliably beat each page's own :root block. "playful" is the default above — it needs no overrides here. ============================================================ */ html[data-theme="calm"]{ --paper:#F7F5F1;--card:#FFFFFF;--ink:#26262B;--ink-mute:#66646E; --ai:#4A63A8;--ai-deep:#33487F;--ai-soft:#E8ECF7; --human:#B0655A;--human-soft:#F6E8E5; --gold:#B98A3E;--gold-deep:#8A6524;--gold-soft:#F5ECD9; --green:#4C8C6A;--green-soft:#E4F0E9;--green-deep:#2F6247; --line:rgba(38,38,43,.12);--line-strong:rgba(38,38,43,.24); } html[data-theme="ocean"]{ --paper:#EFF7FB;--card:#FFFFFF;--ink:#12303D;--ink-mute:#4C6B78; --ai:#0E7EA8;--ai-deep:#095C7C;--ai-soft:#DDF0F8; --human:#E2685C;--human-soft:#FBE6E3; --gold:#E0A02A;--gold-deep:#A26F12;--gold-soft:#FBEFD5; --green:#1FA88C;--green-soft:#DDF4EE;--green-deep:#137A64; --line:rgba(18,48,61,.12);--line-strong:rgba(18,48,61,.24); } html[data-theme="forest"]{ --paper:#F2F7EE;--card:#FFFFFF;--ink:#1F2E1C;--ink-mute:#556B4F; --ai:#3B7A57;--ai-deep:#275940;--ai-soft:#E3F1E8; --human:#C2664A;--human-soft:#F8E7E0; --gold:#C08A2E;--gold-deep:#8C6113;--gold-soft:#F6EDD6; --green:#2E9E5B;--green-soft:#E1F4E8;--green-deep:#1B7040; --line:rgba(31,46,28,.12);--line-strong:rgba(31,46,28,.24); } /* Dark: only the shared design tokens are re-pointed, so every page that builds on them follows. Cards/menus/inputs that hard-code #fff are caught by the small sweep at the end. */ html[data-theme="dark"]{ --paper:#15161C;--card:#1E2029;--ink:#ECEBF2;--ink-mute:#A8A6B8; --ai:#8899FF;--ai-deep:#6C7BE8;--ai-soft:#262A3D; --human:#FF8A75;--human-soft:#3A2622; --gold:#FFC163;--gold-deep:#C58A20;--gold-soft:#3A2F1B; --green:#5FD39B;--green-soft:#1E3329;--green-deep:#2E8F63; --line:rgba(236,235,242,.14);--line-strong:rgba(236,235,242,.28); } /* High contrast: maximum legibility, for low vision or bright sunlight. */ html[data-theme="contrast"]{ --paper:#FFFFFF;--card:#FFFFFF;--ink:#000000;--ink-mute:#2B2B2B; --ai:#0033CC;--ai-deep:#001F80;--ai-soft:#E3EAFF; --human:#A5000F;--human-soft:#FFE6E8; --gold:#7A5200;--gold-deep:#553900;--gold-soft:#FFF2D6; --green:#006B33;--green-soft:#E0F5E9;--green-deep:#004D24; --line:rgba(0,0,0,.45);--line-strong:#000000; } html[data-theme="contrast"] body{-webkit-font-smoothing:auto} html[data-theme="contrast"] a:focus-visible, html[data-theme="contrast"] button:focus-visible{outline:3px solid #0033CC;outline-offset:2px} /* Dark mode needs a few explicit fixes for surfaces that hard-code white. */ html[data-theme="dark"] body{background:var(--paper);color:var(--ink)} html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select{ background:var(--card);color:var(--ink);border-color:var(--line-strong)} html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:var(--ink-mute)} html[data-theme="dark"] .tile,html[data-theme="dark"] .card,html[data-theme="dark"] .topt, html[data-theme="dark"] .door,html[data-theme="dark"] .sub,html[data-theme="dark"] .tcard, html[data-theme="dark"] .setup,html[data-theme="dark"] .today,html[data-theme="dark"] .qplay{ background:var(--card);color:var(--ink)} html[data-theme="dark"] .today{background:linear-gradient(155deg,var(--card) 0%,#232739 190%)} /* the playful layer sets the header background with !important (line ~41), so dark mode has to answer in kind or the bar stays cream. */ html[data-theme="dark"] header{background:rgba(21,22,28,.94)!important} html[data-theme="dark"] .brand,html[data-theme="dark"] .fbrand{color:var(--ink)} html[data-theme="dark"] nav.top a,html[data-theme="dark"] .fcol a{color:var(--ink-mute)} html[data-theme="dark"] .signin,html[data-theme="dark"] .edu-nav-btn{background:var(--card);color:var(--ink);border-color:var(--line-strong)} html[data-theme="dark"] .edu-menu,html[data-theme="dark"] .edu-nav-ovl .edu-menu{background:var(--card);color:var(--ink)} html[data-theme="dark"] footer{background:rgba(30,32,41,.5)} html[data-theme="dark"] img[src$=".svg"]{filter:none} /* Text size. This codebase sizes text in px, so scaling the root font-size would do almost nothing — `zoom` on is what actually moves it, and it leaves position:fixed chrome (menus, the ✦ launcher) anchored to the real viewport instead of shifting it off-screen. */ html[data-text="small"] body{zoom:.92} html[data-text="normal"] body{zoom:1} html[data-text="large"] body{zoom:1.12} html[data-text="xlarge"] body{zoom:1.25} @media print{html[data-text] body{zoom:1}} /* Dark mode: surfaces that hard-code a white background. Their text colour comes from var(--ink*), which goes light in dark mode — on a white box that is invisible, which is exactly the "icon card text not showing" bug. Rather than rewrite ~114 declarations across the pages, re-point the backgrounds here. Deliberately NOT included: .poster, .mmbox/.mmlabel and photo tiles, which must stay white because they are printed or exported as images. */ html[data-theme="dark"] .abtn, html[data-theme="dark"] .aopt, html[data-theme="dark"] .auth, html[data-theme="dark"] .bookc, html[data-theme="dark"] .btn, html[data-theme="dark"] .bubble, html[data-theme="dark"] .bucket, html[data-theme="dark"] .chap, html[data-theme="dark"] .chip, html[data-theme="dark"] .chips, html[data-theme="dark"] .drop, html[data-theme="dark"] .emo, html[data-theme="dark"] .explore-form, html[data-theme="dark"] .fcfront, html[data-theme="dark"] .gbtn, html[data-theme="dark"] .gcar, html[data-theme="dark"] .gtile, html[data-theme="dark"] .home-suggest, html[data-theme="dark"] .hw-btn, html[data-theme="dark"] .hw-cust, html[data-theme="dark"] .hw-eb-cancel, html[data-theme="dark"] .hw-pal-item, html[data-theme="dark"] .item, html[data-theme="dark"] .keyb, html[data-theme="dark"] .lbrow, html[data-theme="dark"] .lbtog, html[data-theme="dark"] .linkbtn, html[data-theme="dark"] .lrung, html[data-theme="dark"] .lv, html[data-theme="dark"] .maker, html[data-theme="dark"] .mcell, html[data-theme="dark"] .memc, html[data-theme="dark"] .mic, html[data-theme="dark"] .mk, html[data-theme="dark"] .mode, html[data-theme="dark"] .module, html[data-theme="dark"] .namerow, html[data-theme="dark"] .news, html[data-theme="dark"] .obtn, html[data-theme="dark"] .opt, html[data-theme="dark"] .prow, html[data-theme="dark"] .q, html[data-theme="dark"] .qa, html[data-theme="dark"] .qp-opt, html[data-theme="dark"] .qtile, html[data-theme="dark"] .read, html[data-theme="dark"] .resume, html[data-theme="dark"] .samples, html[data-theme="dark"] .saved, html[data-theme="dark"] .sform, html[data-theme="dark"] .sharepop, html[data-theme="dark"] .signin, html[data-theme="dark"] .sncell, html[data-theme="dark"] .sub, html[data-theme="dark"] .suggest-hd, html[data-theme="dark"] .suggest-item, html[data-theme="dark"] .syl-chapter, html[data-theme="dark"] .syl-controls, html[data-theme="dark"] .sylch, html[data-theme="dark"] .tab, html[data-theme="dark"] .tchips, html[data-theme="dark"] .tfbtn, html[data-theme="dark"] .ticket, html[data-theme="dark"] .topic, html[data-theme="dark"] .vwrap, html[data-theme="dark"] .words{background:var(--card)!important;color:var(--ink)} html[data-theme="dark"] .chips a, html[data-theme="dark"] .subs a, html[data-theme="dark"] .tchips a{background:var(--card)!important;color:var(--ink-mute)} html[data-theme="dark"] .chips a:hover, html[data-theme="dark"] .subs a:hover{color:var(--ai);border-color:var(--ai)} /* keep filled/branded buttons readable — they set their own colours */ html[data-theme="dark"] .btn:not(.ghost):not(.sm), html[data-theme="dark"] .send, html[data-theme="dark"] .dlbtn{color:#fff} html[data-theme="dark"] .msg.you .bubble{background:var(--ai);color:#fff!important} /* Floating helpers the learner can switch off (My Account → Appearance). appearance.js stamps html[data-tutorfab|sharefab|topicfab]="on|off" before paint, so a hidden button never flashes in first. */ html[data-tutorfab="off"] .edu-tw-fab, html[data-tutorfab="off"] .edu-tw-panel{display:none!important} html[data-sharefab="off"] .eduf-wrap{display:none!important} html[data-topicfab="off"] .edutab{display:none!important} /* ============================================================ PAGE WATERMARK — a large, faint "educator.in" behind every page, so any screenshot or printout carries the brand. Deliberately: • fixed + pointer-events:none, so it never blocks a tap or scrolls oddly • very low opacity, so it can't hurt text contrast (checked in dark too) • hidden on the pages that ARE the artwork (poster/mind-map exports keep their own corner watermark) via .no-watermark on ============================================================ */ body::after{ /* text + on/off come from the admin (see /api/access → brand); nav.js sets --edu-wm and html[data-wm]. The literal here is only the fallback for the moment before that lands, and for a page loaded without JS. */ content:var(--edu-wm,"educator.in"); position:fixed;left:50%;top:50%; transform:translate(-50%,-50%) rotate(-24deg); font-family:"Baloo 2","Inter",system-ui,sans-serif; font-weight:800; font-size:clamp(46px,13vw,190px); letter-spacing:.02em; color:var(--ink,#1B1A17); opacity:.05; pointer-events:none; user-select:none; white-space:nowrap; /* ABOVE the content, not behind it. Behind, any image or card simply covered it and only the bit poking past the edges showed — which read as a bug. A watermark has to lie over what it is marking. It stays under the fixed chrome (menus/panels sit at 9993+) and never takes a click. */ z-index:3; } html[data-theme="dark"] body::after{opacity:.08} html[data-theme="contrast"] body::after{opacity:.035} body.no-watermark::after, html[data-wm="off"] body::after{display:none} /* keep it behind everything that draws its own background */ body > *{position:relative;z-index:1} /* On paper the watermark must appear on EVERY sheet, not just the first. A fixed-position element repeats per page in Chrome/Edge print, which is what we want here — the same mark on each page of a printed worksheet. */ @media print{ body::after{ /* PRINT uses its own admin setting (--edu-wmp / html[data-wmp]) — marking a sheet that leaves the building is a separate decision from branding the live screen, so the on-screen mark can be off while printouts stay marked, and vice versa. */ content:var(--edu-wmp,var(--edu-wm,"educator.in")); display:block; position:fixed;left:50%;top:45%; transform:translate(-50%,-50%) rotate(-30deg); opacity:.1;font-size:120pt;color:#000; -webkit-print-color-adjust:exact;print-color-adjust:exact; } html[data-wmp="off"] body::after{display:none} /* the screen switch must NOT hide the printed mark (that is what data-wmp is for) */ html[data-wm="off"][data-wmp="on"] body::after{display:block} body.no-watermark::after{display:none} } /* the small brand line sits centred at the very bottom, after all content */ .edu-foot-brand{ text-align:center; font:600 13px/1.6 "Inter",system-ui,sans-serif; color:var(--ink-mute,#5C564A); padding:18px 16px calc(20px + env(safe-area-inset-bottom,0px)); margin-top:8px; } .edu-foot-brand a{color:var(--ai,#3147C4);text-decoration:none;font-weight:700} .edu-foot-brand a:hover{text-decoration:underline}