/* ============================================================ themes.css — Unified Subject Theme System hscscience.com.au USAGE: Add data-theme attribute to : Biology (all modules except M4) Biology Module 4 (dark green) Chemistry M1, M4, M6, M7, M8 Chemistry M2 (+ hero panel animations) Chemistry M3 (+ reveal buttons) Chemistry M5 (+ assessment hero) REPLACES these 16 individual files (kept on disk as safety net): bio-y11-m1..m4-theme.css bio-y12-m5..m8-theme.css chem-y11-m1..m4-theme.css chem-y12-m5..m8-theme.css FIX NOTE: data-theme is on itself, so selectors must be body[data-theme="x"] not [data-theme="x"] body. Generated by Perplexity AI — June 2026 ============================================================ */ /* ============================================================ BIOLOGY — Teal palette (M1, M2, M3, M5, M6, M7, M8) ============================================================ */ body[data-theme="bio"] { --primary: #0d7377; --primary-mid: #0a5c60; --primary-light: rgba(13, 115, 119, 0.12); --accent: #14a9b8; --accent-dark: #0d7377; --accent-light: rgba(20, 169, 184, 0.12); --accent-bg: rgba(255, 255, 255, 0.88); --surface: rgba(255, 255, 255, 0.96); --surface-solid: #ffffff; --mesh-1: #d1fae5; --mesh-2: #ccfbf1; --mesh-3: #ecfeff; --mesh-gradient: radial-gradient(ellipse at 20% 20%, var(--mesh-1) 0%, transparent 55%), radial-gradient(ellipse at 80% 80%, var(--mesh-2) 0%, transparent 55%), radial-gradient(ellipse at 50% 50%, var(--mesh-3) 0%, transparent 70%), #f8fafc; --h2-color: var(--heading-color); --shadow-accent: 0 4px 20px var(--accent-light); background: radial-gradient(ellipse at 10% 20%, rgba(167,243,208,0.9) 0%, transparent 55%), radial-gradient(ellipse at 85% 10%, rgba(187,247,208,0.85) 0%, transparent 50%), radial-gradient(ellipse at 60% 80%, rgba(153,246,228,0.8) 0%, transparent 50%), linear-gradient(155deg, #d1fae5 0%, #ccfbf1 40%, #dcfce7 75%, #f0fdf4 100%); min-height: 100vh; } /* ============================================================ BIOLOGY MODULE 4 — Dark green / olive palette ============================================================ */ body[data-theme="bio-m4"] { --primary: #2d5a27; --primary-mid: #1b3a15; --primary-light: rgba(45, 90, 39, 0.12); --accent: #4a8c3f; --accent-dark: #2d5a27; --accent-light: rgba(74, 140, 63, 0.12); --accent-bg: rgba(255, 255, 255, 0.88); --surface: rgba(255, 255, 255, 0.96); --surface-solid: #ffffff; --mesh-1: #d1fae5; --mesh-2: #ccfbf1; --mesh-3: #ecfeff; --mesh-gradient: radial-gradient(ellipse at 20% 20%, var(--mesh-1) 0%, transparent 55%), radial-gradient(ellipse at 80% 80%, var(--mesh-2) 0%, transparent 55%), radial-gradient(ellipse at 50% 50%, var(--mesh-3) 0%, transparent 70%), #f8fafc; --h2-color: var(--heading-color); --shadow-accent: 0 4px 20px var(--accent-light); /* Module 4 specific tokens */ --m4-olive: #2d5a27; --m4-mid-green: #4a8c3f; --m4-lime: #86c67c; --m4-red: #c0392b; --m4-ochre: #c9a227; --m4-bg: #f2f8ed; --m4-surface: #dff0d2; --m4-text: #1a2f16; --m4-text-muted: #3d5a35; --m4-text-light: #6b9a5e; background: radial-gradient(ellipse at 10% 20%, rgba(134,198,124,0.25) 0%, transparent 55%), radial-gradient(ellipse at 85% 10%, rgba(184,217,168,0.3) 0%, transparent 50%), radial-gradient(ellipse at 60% 80%, rgba(210,240,200,0.3) 0%, transparent 50%), linear-gradient(155deg, #f2f8ed 0%, #dff0d2 40%, #e8f5e0 75%, #f0f8ec 100%); min-height: 100vh; } /* ============================================================ CHEMISTRY — Sky blue / indigo palette (M1, M4, M6, M7, M8) ============================================================ */ body[data-theme="chem"] { --primary: #38bdf8; --primary-mid: #0ea5e9; --primary-light: rgba(56, 189, 248, 0.12); --accent: #818cf8; --accent-dark: #6366f1; --accent-light: rgba(129, 140, 248, 0.12); --accent-bg: rgba(255, 255, 255, 0.88); --surface: rgba(255, 255, 255, 0.96); --surface-solid: #ffffff; --mesh-1: #e0f2fe; --mesh-2: #e0e7ff; --mesh-3: #f0f9ff; --mesh-gradient: radial-gradient(ellipse at 20% 20%, var(--mesh-1) 0%, transparent 55%), radial-gradient(ellipse at 80% 80%, var(--mesh-2) 0%, transparent 55%), radial-gradient(ellipse at 50% 50%, var(--mesh-3) 0%, transparent 70%), #f8fafc; --h2-color: var(--heading-color); --shadow-accent: 0 4px 20px var(--accent-light); background: radial-gradient(ellipse at 10% 20%, rgba(186,230,255,0.9) 0%, transparent 55%), radial-gradient(ellipse at 85% 10%, rgba(186,210,255,0.85) 0%, transparent 50%), radial-gradient(ellipse at 60% 80%, rgba(186,230,255,0.8) 0%, transparent 50%), linear-gradient(155deg, #e0f2fe 0%, #dbeafe 40%, #e0e7ff 75%, #f0f9ff 100%); min-height: 100vh; } /* ============================================================ CHEMISTRY MODULE 2 — Full base vars + hero panel animations ============================================================ */ body[data-theme="chem-m2"] { --primary: #38bdf8; --primary-mid: #0ea5e9; --primary-light: rgba(56, 189, 248, 0.12); --accent: #818cf8; --accent-dark: #6366f1; --accent-light: rgba(129, 140, 248, 0.12); --accent-bg: rgba(255, 255, 255, 0.88); --surface: rgba(255, 255, 255, 0.96); --surface-solid: #ffffff; --mesh-1: #e0f2fe; --mesh-2: #e0e7ff; --mesh-3: #f0f9ff; --mesh-gradient: radial-gradient(ellipse at 20% 20%, var(--mesh-1) 0%, transparent 55%), radial-gradient(ellipse at 80% 80%, var(--mesh-2) 0%, transparent 55%), radial-gradient(ellipse at 50% 50%, var(--mesh-3) 0%, transparent 70%), #f8fafc; --h2-color: var(--heading-color); --shadow-accent: 0 4px 20px var(--accent-light); background: radial-gradient(ellipse at 10% 20%, rgba(186,230,255,0.9) 0%, transparent 55%), radial-gradient(ellipse at 85% 10%, rgba(186,210,255,0.85) 0%, transparent 50%), radial-gradient(ellipse at 60% 80%, rgba(186,230,255,0.8) 0%, transparent 50%), linear-gradient(155deg, #e0f2fe 0%, #dbeafe 40%, #e0e7ff 75%, #f0f9ff 100%); min-height: 100vh; } /* M2 — Concept hero panels */ body[data-theme="chem-m2"] .hero-concept { position: relative; z-index: 1; flex: 0 1 420px; min-width: 320px; max-width: 420px; margin-top: -8px; filter: drop-shadow(0 18px 28px rgba(37, 99, 235, 0.14)); } body[data-theme="chem-m2"] .hero-concept-lr { isolation: isolate; } body[data-theme="chem-m2"] .lr-hero-svg { display: block; width: 100%; height: auto; } body[data-theme="chem-m2"] .lr-hero-glow { opacity: 0.8; } body[data-theme="chem-m2"] .lr-hero-flow { opacity: 0.84; animation: lr-flow-pulse 2.8s ease-in-out infinite; } body[data-theme="chem-m2"] .lr-hero-flow-b { animation-delay: 0.45s; } body[data-theme="chem-m2"] .lr-hero-product { animation: lr-product-lift 3.2s ease-in-out infinite; } body[data-theme="chem-m2"] .lr-hero-meter circle { animation: lr-meter-nudge 3.2s ease-in-out infinite; } @keyframes lr-flow-pulse { 0%, 100% { opacity: 0.54; stroke-width: 6; } 50% { opacity: 1; stroke-width: 8; } } @keyframes lr-product-lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes lr-meter-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } } @media (max-width: 860px) { body[data-theme="chem-m2"] .hero-top { align-items: center; } body[data-theme="chem-m2"] .hero-concept { flex-basis: 360px; min-width: 280px; } } @media (max-width: 620px) { body[data-theme="chem-m2"] .hero-top { flex-direction: column; } body[data-theme="chem-m2"] .hero-concept { width: 100%; min-width: 0; max-width: 380px; margin: 4px auto 0; } } /* ============================================================ CHEMISTRY MODULE 3 — Full base vars + reveal buttons ============================================================ */ body[data-theme="chem-m3"] { --primary: #38bdf8; --primary-mid: #0ea5e9; --primary-light: rgba(56, 189, 248, 0.12); --accent: #818cf8; --accent-dark: #6366f1; --accent-light: rgba(129, 140, 248, 0.12); --accent-bg: rgba(255, 255, 255, 0.88); --surface: rgba(255, 255, 255, 0.96); --surface-solid: #ffffff; --mesh-1: #e0f2fe; --mesh-2: #e0e7ff; --mesh-3: #f0f9ff; --mesh-gradient: radial-gradient(ellipse at 20% 20%, var(--mesh-1) 0%, transparent 55%), radial-gradient(ellipse at 80% 80%, var(--mesh-2) 0%, transparent 55%), radial-gradient(ellipse at 50% 50%, var(--mesh-3) 0%, transparent 70%), #f8fafc; --h2-color: var(--heading-color); --shadow-accent: 0 4px 20px var(--accent-light); background: radial-gradient(ellipse at 10% 20%, rgba(186,230,255,0.9) 0%, transparent 55%), radial-gradient(ellipse at 85% 10%, rgba(186,210,255,0.85) 0%, transparent 50%), radial-gradient(ellipse at 60% 80%, rgba(186,230,255,0.8) 0%, transparent 50%), linear-gradient(155deg, #e0f2fe 0%, #dbeafe 40%, #e0e7ff 75%, #f0f9ff 100%); min-height: 100vh; } body[data-theme="chem-m3"] .reveal-btn, body[data-theme="chem-m3"] .we-reveal-btn { display: inline-block; margin-top: 10px; padding: 7px 18px; background: #534ab7; color: #fff; border: none; border-radius: 6px; font-family: inherit; font-size: 0.93rem; font-weight: 600; cursor: pointer; transition: background 0.2s, opacity 0.2s; } body[data-theme="chem-m3"] .reveal-btn:hover, body[data-theme="chem-m3"] .we-reveal-btn:hover { background: #3c3489; } body[data-theme="chem-m3"] .reveal-btn:disabled, body[data-theme="chem-m3"] .we-reveal-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ============================================================ CHEMISTRY MODULE 5 — Full base vars + assessment hero styles ============================================================ */ body[data-theme="chem-m5"] { --primary: #38bdf8; --primary-mid: #0ea5e9; --primary-light: rgba(56, 189, 248, 0.12); --accent: #818cf8; --accent-dark: #6366f1; --accent-light: rgba(129, 140, 248, 0.12); --accent-bg: rgba(255, 255, 255, 0.88); --surface: rgba(255, 255, 255, 0.96); --surface-solid: #ffffff; --mesh-1: #e0f2fe; --mesh-2: #e0e7ff; --mesh-3: #f0f9ff; --mesh-gradient: radial-gradient(ellipse at 20% 20%, var(--mesh-1) 0%, transparent 55%), radial-gradient(ellipse at 80% 80%, var(--mesh-2) 0%, transparent 55%), radial-gradient(ellipse at 50% 50%, var(--mesh-3) 0%, transparent 70%), #f8fafc; --h2-color: var(--heading-color); --shadow-accent: 0 4px 20px var(--accent-light); background: radial-gradient(ellipse at 10% 20%, rgba(186,230,255,0.9) 0%, transparent 55%), radial-gradient(ellipse at 85% 10%, rgba(186,210,255,0.85) 0%, transparent 50%), radial-gradient(ellipse at 60% 80%, rgba(186,230,255,0.8) 0%, transparent 50%), linear-gradient(155deg, #e0f2fe 0%, #dbeafe 40%, #e0e7ff 75%, #f0f9ff 100%); min-height: 100vh; } body[data-theme="chem-m5"] .hero { background: linear-gradient(135deg, #312e81 0%, #0891b2 100%); } body[data-theme="chem-m5"] .hero h1 { color: #ffffff; } body[data-theme="chem-m5"] .hero--assessment { color: #fff; padding: 3rem 2rem 2.5rem; text-align: center; } body[data-theme="chem-m5"] .hero--assessment h1 { font-size: 2rem; margin-bottom: 0.5rem; } body[data-theme="chem-m5"] .hero--assessment p { font-size: 1rem; opacity: 0.9; max-width: 640px; margin: 0.5rem auto 0; } /* ============================================================ ADDING A NEW THEME — Template for developers ============================================================ Copy this block and fill in colours. Add data-theme="your-name" to the tag of the new lesson pages. No new file needed. body[data-theme="your-theme-name"] { --primary: #??????; --primary-mid: #??????; --primary-light: rgba(r, g, b, 0.12); --accent: #??????; --accent-dark: #??????; --accent-light: rgba(r, g, b, 0.12); --accent-bg: rgba(255, 255, 255, 0.88); --surface: rgba(255, 255, 255, 0.96); --surface-solid: #ffffff; --mesh-1: #??????; --mesh-2: #??????; --mesh-3: #??????; --shadow-accent: 0 4px 20px var(--accent-light); background: linear-gradient(155deg, var(--mesh-1), var(--mesh-2), var(--mesh-3)); min-height: 100vh; } ============================================================ */