/* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ===== Site-wide themes ================================================ Applied by setting `data-theme` on . Each theme just shifts a few color variables and the body background. Individual pages use their own gradients but the base chrome (header, side menu, main bg) follows this. */ /* DARK theme */ html[data-theme="dark"] body { background: #1a1a22 !important; color: #f0f0f0; } html[data-theme="dark"] .app-header { background: linear-gradient(135deg, #2a1a10 0%, #4a2818 100%) !important; } html[data-theme="dark"] .side-menu { background: linear-gradient(180deg, #26262e 0%, #1a1a22 100%) !important; } html[data-theme="dark"] .menu-link { color: #d0d0d0 !important; } html[data-theme="dark"] .menu-header { background: #0e0e14 !important; } html[data-theme="dark"] .feature-card, html[data-theme="dark"] .bear-welcome, html[data-theme="dark"] .activity-item { background: #26262e !important; color: #f0f0f0; } html[data-theme="dark"] .feature-card h3, html[data-theme="dark"] .bear-welcome h2, html[data-theme="dark"] .activity-section h2 { color: #ffcf3f; } html[data-theme="dark"] .feature-card p, html[data-theme="dark"] .lead-text, html[data-theme="dark"] .activity-item p { color: #cccccc; } /* RAINBOW theme */ html[data-theme="rainbow"] body { background: linear-gradient(135deg, #ffeaea 0%, #fff2cc 20%, #eaffea 40%, #cce6ff 60%, #eadcff 80%, #ffe0f0 100%) !important; background-attachment: fixed; } html[data-theme="rainbow"] .app-header { background: linear-gradient(90deg, #ff6b6b, #ffcf3f, #7fd47f, #4d9dd6, #a17ce6, #ff7dcf) !important; } html[data-theme="rainbow"] .feature-card { border: 2px solid rgba(255, 100, 180, 0.4); } /* FOREST theme */ html[data-theme="forest"] body { background: linear-gradient(180deg, #d8ecc8 0%, #b8dba0 100%) !important; background-attachment: fixed; } html[data-theme="forest"] .app-header { background: linear-gradient(135deg, #2e5c2f 0%, #4d8b3c 100%) !important; } html[data-theme="forest"] .side-menu { background: linear-gradient(180deg, #f0f7e8 0%, #d8ecc8 100%) !important; } /* NIGHT-SKY theme */ html[data-theme="night-sky"] body { background: radial-gradient(ellipse at 30% 20%, #4d3aa0, #0b0728 70%, #050214 100%) !important; background-attachment: fixed; color: #f0f0f0; } html[data-theme="night-sky"] .app-header { background: linear-gradient(135deg, #1a0b40 0%, #4a2f8a 100%) !important; } html[data-theme="night-sky"] .side-menu { background: linear-gradient(180deg, #1a1236 0%, #0b0728 100%) !important; } html[data-theme="night-sky"] .menu-link { color: #d0d0e6 !important; } html[data-theme="night-sky"] .menu-header { background: #0b0728 !important; } html[data-theme="night-sky"] .feature-card, html[data-theme="night-sky"] .bear-welcome, html[data-theme="night-sky"] .activity-item { background: rgba(255,255,255,0.05) !important; color: #f0f0f0; } html[data-theme="night-sky"] .feature-card h3, html[data-theme="night-sky"] .bear-welcome h2, html[data-theme="night-sky"] .activity-section h2 { color: #ffe15a; } html[data-theme="night-sky"] .feature-card p, html[data-theme="night-sky"] .lead-text { color: #dddddd; } /* ===== Big-text mode for early readers =============================== */ html.lbl-big-text { font-size: 20px !important; } html.lbl-big-text body { line-height: 1.75 !important; font-size: 1.15rem; } html.lbl-big-text h1 { font-size: 2.4rem !important; } html.lbl-big-text h2 { font-size: 2rem !important; } html.lbl-big-text h3 { font-size: 1.5rem !important; } html.lbl-big-text p, html.lbl-big-text li, html.lbl-big-text a { font-size: 1.15rem; } html.lbl-big-text .btn { font-size: 1.2rem !important; padding: 1rem 1.8rem !important; } html.lbl-big-text .menu-link { padding: 1.2rem 1.5rem !important; font-size: 1.2rem !important; } html.lbl-big-text .menu-icon { font-size: 1.7rem !important; } /* ===== Colorblind-friendly palette =================================== */ html.lbl-colorblind { --cb-red: #e69f00; /* orange in place of red */ --cb-green: #009e73; /* teal-green */ --cb-blue: #0072b2; --cb-yellow:#f0e442; --cb-purple:#cc79a7; } html.lbl-colorblind [class*="rm-"] .rm-cell { filter: hue-rotate(-15deg) contrast(1.05); } /* ===== Read-aloud page paragraph highlight =========================== */ .lbl-read-aloud-btn { background: #6B4423; color: white; border: none; border-radius: 999px; padding: 0.3rem 0.7rem; font-size: 0.85rem; cursor: pointer; margin-left: 0.4rem; } .lbl-read-aloud-btn:hover { filter: brightness(1.1); } :root { --color-black: #1a1a1a; --color-dark-grey: #4a4a4a; --color-grey: #808080; --color-light-grey: #b8b8b8; --color-white: #ffffff; --color-off-white: #f8f8f8; --color-brown: #8b4513; --color-light-brown: #a0522d; --color-warm-brown: #cd853f; --shadow-sm: 0 2px 4px rgba(0,0,0,0.1); --shadow-md: 0 4px 8px rgba(0,0,0,0.15); --shadow-lg: 0 8px 16px rgba(0,0,0,0.2); --transition-speed: 0.3s; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--color-off-white); color: var(--color-black); line-height: 1.6; min-height: 100vh; overflow-x: hidden; } .app-container { position: relative; min-height: 100vh; } /* Header Styles */ .app-header { background: linear-gradient(135deg, var(--color-brown) 0%, var(--color-light-brown) 100%); color: var(--color-white); padding: 1rem 1.5rem; box-shadow: var(--shadow-md); position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; gap: 1.5rem; } .menu-toggle { background: transparent; border: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 8px; transition: var(--transition-speed); } .menu-toggle span { display: block; width: 25px; height: 3px; background-color: var(--color-white); border-radius: 2px; transition: var(--transition-speed); } .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); } .header-content { flex: 1; } .app-title { font-size: 1.8rem; font-weight: 600; text-shadow: 2px 2px 4px rgba(0,0,0,0.2); } /* Side Menu Styles */ .side-menu { position: fixed; top: 0; left: -280px; width: 280px; height: 100vh; background: linear-gradient(180deg, var(--color-white) 0%, var(--color-off-white) 100%); box-shadow: var(--shadow-lg); transition: left var(--transition-speed) ease; z-index: 200; display: flex; flex-direction: column; } .side-menu.active { left: 0; } .menu-header { background: var(--color-dark-grey); color: var(--color-white); padding: 2rem 1.5rem; text-align: center; border-bottom: 3px solid var(--color-brown); } .menu-logo { width: 60px; height: 60px; margin-bottom: 0.5rem; border-radius: 50%; background: var(--color-white); padding: 8px; } .menu-header h2 { font-size: 1.2rem; font-weight: 500; } .menu-list { list-style: none; flex: 1; overflow-y: auto; padding: 1rem 0; } .menu-item { margin: 0.25rem 0; } .menu-link { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.5rem; color: var(--color-dark-grey); text-decoration: none; transition: all var(--transition-speed); border-left: 4px solid transparent; } .menu-link:hover { background-color: rgba(139, 69, 19, 0.1); border-left-color: var(--color-brown); color: var(--color-brown); } .menu-icon { font-size: 1.4rem; width: 30px; text-align: center; } .menu-text { font-size: 1rem; font-weight: 500; } .menu-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--color-light-grey); color: var(--color-grey); font-size: 0.85rem; text-align: center; } /* Menu Overlay */ .menu-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity var(--transition-speed), visibility var(--transition-speed); z-index: 150; } .menu-overlay.active { opacity: 1; visibility: visible; } /* Main Content */ .main-content { padding-top: 5rem; min-height: 100vh; transition: margin-left var(--transition-speed); } .content-wrapper { max-width: 1200px; margin: 0 auto; padding: 2rem; } /* Hero Section */ .hero-section { margin-bottom: 3rem; } .bear-welcome { text-align: center; margin-bottom: 3rem; padding: 2rem; background: var(--color-white); border-radius: 15px; box-shadow: var(--shadow-md); border: 2px solid var(--color-warm-brown); } .bear-welcome h2 { font-size: 2.5rem; color: var(--color-brown); margin-bottom: 1rem; } .lead-text { font-size: 1.2rem; color: var(--color-dark-grey); } /* Feature Cards */ .feature-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-bottom: 3rem; } .feature-card { background: var(--color-white); border-radius: 12px; padding: 2rem; text-align: center; box-shadow: var(--shadow-sm); transition: transform var(--transition-speed), box-shadow var(--transition-speed); border: 2px solid transparent; } .feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--color-warm-brown); } .card-icon { font-size: 3rem; margin-bottom: 1rem; } .feature-card h3 { color: var(--color-brown); margin-bottom: 0.75rem; font-size: 1.4rem; } .feature-card p { color: var(--color-dark-grey); margin-bottom: 1.5rem; line-height: 1.6; } /* Buttons */ .btn { padding: 0.75rem 1.5rem; border: none; border-radius: 25px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all var(--transition-speed); text-transform: uppercase; letter-spacing: 0.5px; } .btn-primary { background: linear-gradient(135deg, var(--color-brown) 0%, var(--color-light-brown) 100%); color: var(--color-white); box-shadow: var(--shadow-sm); } .btn-primary:hover { transform: scale(1.05); box-shadow: var(--shadow-md); } /* Activity Section */ .activity-section { margin-bottom: 3rem; } .activity-section h2 { text-align: center; color: var(--color-brown); font-size: 2rem; margin-bottom: 2rem; } .activity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; } .activity-item { background: var(--color-white); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition-speed); cursor: pointer; } .activity-item:hover { transform: scale(1.05); } .activity-item img { width: 100%; height: 150px; object-fit: cover; background: var(--color-light-grey); } .activity-item h4 { padding: 1rem 1rem 0.5rem; color: var(--color-brown); } .activity-item p { padding: 0 1rem 1rem; color: var(--color-dark-grey); font-size: 0.9rem; } /* Bear Fact Box */ .bear-fact { margin: 3rem 0; } .fact-box { background: linear-gradient(135deg, var(--color-warm-brown) 0%, var(--color-light-brown) 100%); color: var(--color-white); padding: 2rem; border-radius: 15px; text-align: center; box-shadow: var(--shadow-md); } .fact-box h3 { font-size: 1.5rem; margin-bottom: 1rem; } .fact-box p { font-size: 1.1rem; line-height: 1.6; } /* Responsive Design */ @media (max-width: 768px) { .app-header { padding: 0.75rem 1rem; gap: 0.75rem; } .app-title { font-size: 1.4rem; } .content-wrapper { padding: 1rem; } .bear-welcome h2 { font-size: 2rem; } .feature-cards { grid-template-columns: 1fr; gap: 1.5rem; } .activity-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; } } /* Phone-specific tweaks (portrait phones roughly ≤ 480px wide) */ @media (max-width: 520px) { .app-header { padding: 0.5rem 0.75rem; gap: 0.5rem; } .app-title { font-size: 1.05rem; } .header-logo { width: 32px !important; height: 32px !important; } /* The right-hand auth strip is too wide on phones — shrink text out and keep only the icon-plus-avatar so it still fits. */ .auth-links a { padding: 0.35rem 0.6rem !important; font-size: 0.9rem; } .auth-links a span:not(.header-avatar-svg) { font-size: 0.9rem; } .main-content { padding-top: 4rem; } /* Full-width side menu on phones so it's easy to tap. */ .side-menu { width: 85vw; left: -85vw; max-width: 320px; } .menu-link { padding: 1rem 1.25rem; /* bigger touch target */ } .menu-icon { font-size: 1.5rem; } .menu-text { font-size: 1.05rem; } .bear-welcome { padding: 1.25rem; } .bear-welcome h2 { font-size: 1.5rem; } .lead-text { font-size: 1rem; } .activity-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; } /* Buttons on phones: keep them tappable and readable. */ .btn { padding: 0.7rem 1.25rem; font-size: 0.95rem; } } /* Extra-small phones (≤ 380px) — hide the auth-link label text entirely and just keep the avatar/emoji so the header doesn't overflow. */ @media (max-width: 380px) { .app-title { font-size: 0.95rem; } .auth-links a { padding: 0.3rem 0.5rem !important; } .header-logo { display: none; } } /* Respect iPhone / notched-device safe areas. */ @supports (padding: env(safe-area-inset-top)) { .app-header { padding-top: max(0.75rem, env(safe-area-inset-top)); padding-left: max(0.75rem, env(safe-area-inset-left)); padding-right: max(0.75rem, env(safe-area-inset-right)); } .bug-report-fab { bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px)); left: max(16px, calc(env(safe-area-inset-left) + 8px)); } } @media (min-width: 1024px) { body.menu-open .main-content { margin-left: 280px; } } /* Animations */ @keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .feature-card { animation: slideIn 0.6s ease-out; } .feature-card:nth-child(2) { animation-delay: 0.1s; } .feature-card:nth-child(3) { animation-delay: 0.2s; }