/** * shared/kids-theme.css * Kids-mode CSS overrides — applied when has class="kids-mode" * or a parent element has data-kids="true". * * Usage: * * * Design goals: * - Larger font sizes (18px base) * - Rounder corners (16–24px) * - Pastel / vivid palette depending on category * - Bigger touch targets (≥48px) * - Playful hover animations (bounce, scale) * - Age-badge colours: green 5-8 / blue 8-11 / purple 11-14 */ /* ========================================================================== 1. BASE OVERRIDES ========================================================================== */ .kids-mode, [data-kids="true"] { --font-main: "Nunito", "Fredoka One", system-ui, sans-serif; --kids-radius: 16px; --kids-radius-lg: 24px; --kids-text-base: 1.125rem; /* 18px */ --kids-text-lg: 1.3rem; --kids-text-xl: 1.55rem; --kids-text-2xl: 1.9rem; --kids-text-3xl: 2.4rem; --kids-btn-h: 48px; /* min touch target */ --kids-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55); } /* Load Nunito if not already present */ @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap"); .kids-mode body, [data-kids="true"] body, .kids-mode, [data-kids="true"] { font-family: var(--font-main); font-size: var(--kids-text-base); line-height: 1.7; } /* ========================================================================== 2. CARD OVERRIDES ========================================================================== */ .kids-mode .sim-card, [data-kids="true"] .sim-card { border-radius: var(--kids-radius-lg); transition: transform 0.2s var(--kids-bounce), box-shadow 0.2s ease; } .kids-mode .sim-card:hover, [data-kids="true"] .sim-card:hover { transform: scale(1.04) translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); } /* ========================================================================== 3. BUTTONS ========================================================================== */ .kids-mode button, .kids-mode a.btn, [data-kids="true"] button, [data-kids="true"] a.btn { min-height: var(--kids-btn-h); border-radius: var(--kids-radius); font-family: var(--font-main); font-weight: 700; font-size: 1rem; padding: 0 1.5rem; transition: transform 0.15s var(--kids-bounce); } .kids-mode button:active, .kids-mode a.btn:active, [data-kids="true"] button:active, [data-kids="true"] a.btn:active { transform: scale(0.96); } /* ========================================================================== 4. AGE BADGES ========================================================================== */ .age-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.25rem 0.75rem; border-radius: 999px; line-height: 1; white-space: nowrap; } /* Green — 5–8 years */ .age-badge--5-8, .age-badge[data-age="5-8"] { background: #dcfce7; color: #166534; border: 1.5px solid #86efac; } /* Blue — 8–11 years */ .age-badge--8-11, .age-badge[data-age="8-11"] { background: #dbeafe; color: #1e3a8a; border: 1.5px solid #93c5fd; } /* Purple — 11–14 years */ .age-badge--11-14, .age-badge[data-age="11-14"] { background: #ede9fe; color: #4c1d95; border: 1.5px solid #c4b5fd; } /* Dark-mode variants */ [data-theme="dark"] .age-badge--5-8, [data-theme="dark"] .age-badge[data-age="5-8"] { background: rgba(134, 239, 172, 0.12); color: #86efac; border-color: rgba(134, 239, 172, 0.3); } [data-theme="dark"] .age-badge--8-11, [data-theme="dark"] .age-badge[data-age="8-11"] { background: rgba(147, 197, 253, 0.12); color: #93c5fd; border-color: rgba(147, 197, 253, 0.3); } [data-theme="dark"] .age-badge--11-14, [data-theme="dark"] .age-badge[data-age="11-14"] { background: rgba(196, 181, 253, 0.12); color: #c4b5fd; border-color: rgba(196, 181, 253, 0.3); } /* ========================================================================== 5. FUN FACT BOX (used in kids articles) ========================================================================== */ .fun-fact { position: relative; background: var(--color-surface); border: 2px dashed; border-radius: var(--kids-radius-lg); padding: 1.25rem 1.25rem 1.25rem 3.5rem; margin: 1.5rem 0; font-size: 0.95rem; line-height: 1.7; color: var(--color-muted-2); } .fun-fact::before { content: "💡"; position: absolute; left: 1rem; top: 1.1rem; font-size: 1.5rem; } .fun-fact--rocket::before { content: "🚀"; } .fun-fact--star::before { content: "⭐"; } .fun-fact--bug::before { content: "🐛"; } .fun-fact--science::before { content: "🔬"; } .fun-fact--math::before { content: "📐"; } /* ========================================================================== 6. TRY AT HOME BOX ========================================================================== */ .try-home { background: var(--color-surface); border-radius: var(--kids-radius-lg); padding: 1.25rem 1.5rem; margin: 1.5rem 0; border-left: 4px solid #4ade80; } .try-home-title { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #4ade80; margin-bottom: 0.6rem; } .try-home p, .try-home li { font-size: 0.9rem; color: var(--color-muted-2); line-height: 1.7; } /* ========================================================================== 7. TELL A FRIEND SHARE BOX ========================================================================== */ .share-box { background: var(--color-surface); border-radius: var(--kids-radius-lg); padding: 1rem 1.25rem; margin: 1.5rem 0; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .share-box-text { flex: 1; font-size: 0.9rem; font-weight: 600; color: var(--color-muted-2); min-width: 160px; } .share-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.2rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700; border: none; cursor: pointer; background: rgba(99, 102, 241, 0.15); color: #818cf8; transition: background 0.2s, transform 0.15s var(--kids-bounce); } .share-btn:hover { background: rgba(99, 102, 241, 0.25); transform: scale(1.05); } .share-btn:active { transform: scale(0.97); } /* ========================================================================== 8. READ-ALOUD BUTTON (Web Speech API) ========================================================================== */ .read-aloud-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border: 1.5px solid var(--color-border); border-radius: 999px; background: transparent; color: var(--color-muted-2); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: border-color 0.2s, color 0.2s, transform 0.15s var(--kids-bounce); } .read-aloud-btn:hover { border-color: #60a5fa; color: #60a5fa; transform: scale(1.04); } .read-aloud-btn.is-speaking { border-color: #f43f5e; color: #f43f5e; animation: pulse-ring 1.4s ease-in-out infinite; } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.4); } 70% { box-shadow: 0 0 0 8px rgba(244, 63, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); } } /* ========================================================================== 9. KIDS CATEGORY HERO EXTRAS ========================================================================== */ .kids-hero-emoji { font-size: 3.5rem; display: inline-block; animation: float-emoji 3s ease-in-out infinite; } @keyframes float-emoji { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ========================================================================== 10. PRINT STYLES (save-a-page for kids) ========================================================================== */ @media print { .kids-mode nav, [data-kids="true"] nav, .kids-mode footer, [data-kids="true"] footer, .share-box, .read-aloud-btn, #navbar-root, #footer-root { display: none !important; } .kids-mode, [data-kids="true"] { background: white !important; color: black !important; } }