/* 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{ /* 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; } /* 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} }