/* ========================================================================== RishaLearn — Theme Variants ========================================================================== Each block below overrides the same CSS custom properties defined in :root inside rlp-style.css. Nothing here duplicates component rules — every card, button, and form still comes from the one component stylesheet. This file only swaps the tokens that stylesheet reads. Active theme is applied via a `data-rlp-theme="slug"` attribute on , set from RLP_Settings::active_theme() in partial-header.php. Matching Google Fonts are loaded per theme in RLP_Assets — see the THEME_FONTS map there; keep that map and the font values below in sync if you change a theme's typography. ========================================================================== */ /* -------------------------------------------------------------------------- 1. VERDANT (default) — trust-forward emerald + coral, soft Material-style elevation, generous rounding. The platform's home base identity. -------------------------------------------------------------------------- */ [data-rlp-theme="verdant"] { --rlp-primary: #0B6B4F; --rlp-primary-dk: #084F39; --rlp-primary-tint: #E7F5EF; --rlp-accent: #FF6B4A; --rlp-accent-dk: #E14F2E; --rlp-accent-tint: #FFEEE9; --rlp-accent-glow: rgba(255,107,74,0.32); --rlp-ink: #1A1D23; --rlp-ink-soft: #5B6169; --rlp-ink-faint: #8A9099; --rlp-border: #E4E6EA; --rlp-surface: #FFFFFF; --rlp-surface-alt: #F6F7F9; --rlp-panel-bg: #0B6B4F; --rlp-panel-text: #FFFFFF; --rlp-panel-text-soft: rgba(255,255,255,0.82); --rlp-panel-text-faint: rgba(255,255,255,0.55); --rlp-panel-border: rgba(255,255,255,0.15); --rlp-on-primary: #FFFFFF; --rlp-font-display: 'Plus Jakarta Sans', -apple-system, sans-serif; --rlp-font-body: 'Plus Jakarta Sans', -apple-system, sans-serif; --rlp-radius-sm: 8px; --rlp-radius-md: 12px; --rlp-radius-lg: 18px; --rlp-radius-xl: 28px; --rlp-shadow-sm: 0 1px 2px rgba(20,22,30,0.06); --rlp-shadow-card: 0 4px 18px rgba(20,22,30,0.07); --rlp-shadow-lifted: 0 16px 40px rgba(20,22,30,0.14); } [data-rlp-theme="verdant"] .rlp-hero { background: linear-gradient(180deg, var(--rlp-primary-tint) 0%, var(--rlp-surface) 100%); } /* -------------------------------------------------------------------------- 2. INDIGO TECH — modern SaaS register: deep indigo + cyan, tighter radius, crisper shadows, geometric display type. Reads more "platform", less "storefront" — an option for a more tech-forward positioning. -------------------------------------------------------------------------- */ [data-rlp-theme="indigo"] { --rlp-primary: #4338CA; --rlp-primary-dk: #362DA1; --rlp-primary-tint: #EEF2FF; --rlp-accent: #06B6D4; --rlp-accent-dk: #0891B2; --rlp-accent-tint: #ECFEFF; --rlp-accent-glow: rgba(6,182,212,0.30); --rlp-ink: #111827; --rlp-ink-soft: #4B5563; --rlp-ink-faint: #9CA3AF; --rlp-border: #E5E7EB; --rlp-surface: #FFFFFF; --rlp-surface-alt: #F3F4F6; --rlp-panel-bg: #4338CA; --rlp-panel-text: #FFFFFF; --rlp-panel-text-soft: rgba(255,255,255,0.82); --rlp-panel-text-faint: rgba(255,255,255,0.55); --rlp-panel-border: rgba(255,255,255,0.15); --rlp-on-primary: #FFFFFF; --rlp-font-display: 'Space Grotesk', -apple-system, sans-serif; --rlp-font-body: 'Inter', -apple-system, sans-serif; --rlp-radius-sm: 6px; --rlp-radius-md: 9px; --rlp-radius-lg: 13px; --rlp-radius-xl: 20px; --rlp-shadow-sm: 0 1px 2px rgba(17,24,39,0.07); --rlp-shadow-card: 0 3px 10px rgba(17,24,39,0.08); --rlp-shadow-lifted: 0 12px 28px rgba(17,24,39,0.16); } [data-rlp-theme="indigo"] .rlp-hero { background-color: var(--rlp-surface); background-image: linear-gradient(90deg, rgba(67,56,202,0.06) 1px, transparent 1px), linear-gradient(rgba(67,56,202,0.06) 1px, transparent 1px); background-size: 28px 28px; } [data-rlp-theme="indigo"] .rlp-btn { letter-spacing: 0.01em; } /* -------------------------------------------------------------------------- 3. SUNRISE — warm, playful, energetic. Very rounded, bouncy tinted shadows, rounded-friendly type. The strongest fit for the Class 1–5 audience specifically — worth considering as the actual default. -------------------------------------------------------------------------- */ [data-rlp-theme="sunrise"] { --rlp-primary: #C2410C; --rlp-primary-dk: #9A3412; --rlp-primary-tint: #FFF1E6; --rlp-accent: #DB2777; --rlp-accent-dk: #BE185D; --rlp-accent-tint: #FDF0F5; --rlp-accent-glow: rgba(219,39,119,0.32); --rlp-ink: #2A1B12; --rlp-ink-soft: #6B5645; --rlp-ink-faint: #A08D7C; --rlp-border: #F3E1CB; --rlp-surface: #FFFDF9; --rlp-surface-alt: #FFF3E0; --rlp-panel-bg: #C2410C; --rlp-panel-text: #FFFFFF; --rlp-panel-text-soft: rgba(255,255,255,0.85); --rlp-panel-text-faint: rgba(255,255,255,0.6); --rlp-panel-border: rgba(255,255,255,0.18); --rlp-on-primary: #FFFFFF; --rlp-font-display: 'Baloo 2', -apple-system, sans-serif; --rlp-font-body: 'Nunito', -apple-system, sans-serif; --rlp-radius-sm: 12px; --rlp-radius-md: 16px; --rlp-radius-lg: 24px; --rlp-radius-xl: 36px; --rlp-shadow-sm: 0 2px 4px rgba(194,65,12,0.08); --rlp-shadow-card: 0 6px 20px rgba(194,65,12,0.10); --rlp-shadow-lifted: 0 18px 44px rgba(194,65,12,0.20); } [data-rlp-theme="sunrise"] .rlp-hero { background: linear-gradient(180deg, var(--rlp-primary-tint) 0%, var(--rlp-surface) 100%); } /* -------------------------------------------------------------------------- 4. CLASSIC ACADEMIC — traditional, editorial, trust-through-restraint. Navy + burgundy, serif headings, minimal rounding and elevation. The option for a more formal/conservative positioning. -------------------------------------------------------------------------- */ [data-rlp-theme="classic"] { --rlp-primary: #1E3A5F; --rlp-primary-dk: #14283F; --rlp-primary-tint: #EAF0F6; --rlp-accent: #8C2F39; --rlp-accent-dk: #6B232A; --rlp-accent-tint: #FBEEF0; --rlp-accent-glow: rgba(140,47,57,0.22); --rlp-ink: #1C1C1C; --rlp-ink-soft: #55524A; --rlp-ink-faint: #8C8776; --rlp-border: #DDD6C8; --rlp-surface: #FFFFFF; --rlp-surface-alt: #F7F5F0; --rlp-panel-bg: #1E3A5F; --rlp-panel-text: #F7F1E3; --rlp-panel-text-soft: rgba(247,241,227,0.82); --rlp-panel-text-faint: rgba(247,241,227,0.55); --rlp-panel-border: rgba(247,241,227,0.18); --rlp-on-primary: #FFFFFF; --rlp-font-display: 'Lora', Georgia, serif; --rlp-font-body: 'Source Sans 3', -apple-system, sans-serif; --rlp-radius-sm: 4px; --rlp-radius-md: 6px; --rlp-radius-lg: 10px; --rlp-radius-xl: 16px; --rlp-shadow-sm: 0 1px 1px rgba(28,28,28,0.05); --rlp-shadow-card: 0 2px 8px rgba(28,28,28,0.06); --rlp-shadow-lifted: 0 10px 24px rgba(28,28,28,0.12); } [data-rlp-theme="classic"] .rlp-hero { background: var(--rlp-surface-alt); border-bottom: 1px solid var(--rlp-border); } [data-rlp-theme="classic"] .rlp-btn { text-transform: none; letter-spacing: 0.01em; } [data-rlp-theme="classic"] .rlp-card { box-shadow: none; border: 1px solid var(--rlp-border); } [data-rlp-theme="classic"] .rlp-card:hover { box-shadow: var(--rlp-shadow-card); transform: none; } /* -------------------------------------------------------------------------- 5. DARK — full dark surface, brightened brand colors for contrast on black, panels use a dark neutral rather than a bright color block (a full-bleed saturated green panel would fight the rest of a dark UI). -------------------------------------------------------------------------- */ [data-rlp-theme="dark"] { --rlp-primary: #34D399; --rlp-primary-dk: #10B981; --rlp-primary-tint: rgba(52,211,153,0.14); --rlp-accent: #F97316; --rlp-accent-dk: #C2410C; --rlp-accent-tint: rgba(249,115,22,0.14); --rlp-accent-glow: rgba(249,115,22,0.45); --rlp-ink: #F3F4F6; --rlp-ink-soft: #B4B9C2; --rlp-ink-faint: #7C818C; --rlp-border: #2A2F38; --rlp-surface: #14171C; --rlp-surface-alt: #1B1F26; --rlp-panel-bg: #1B1F26; --rlp-panel-text: #F3F4F6; --rlp-panel-text-soft: rgba(243,244,246,0.75); --rlp-panel-text-faint: rgba(243,244,246,0.5); --rlp-panel-border: rgba(243,244,246,0.1); --rlp-on-primary: #FFFFFF; /* Every theme uses white button text, no exceptions — see the "Buttons must never use black" fix note below. The PREVIOUS accent here (#FF8A65, a pale coral) was too light for white text to read clearly, which is what forced a near-black on-primary color before; fixed at the source by using a properly saturated orange instead, so white text (the same rule every other theme already follows) works correctly here too. */ --rlp-font-display: 'Plus Jakarta Sans', -apple-system, sans-serif; --rlp-font-body: 'Plus Jakarta Sans', -apple-system, sans-serif; --rlp-radius-sm: 8px; --rlp-radius-md: 12px; --rlp-radius-lg: 18px; --rlp-radius-xl: 28px; --rlp-shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --rlp-shadow-card: 0 4px 18px rgba(0,0,0,0.45); --rlp-shadow-lifted: 0 16px 44px rgba(0,0,0,0.6); color-scheme: dark; } [data-rlp-theme="dark"] .rlp-hero { background: linear-gradient(180deg, var(--rlp-surface-alt) 0%, var(--rlp-surface) 100%); } [data-rlp-theme="dark"] .rlp-header__search-input { background: var(--rlp-surface-alt); color: var(--rlp-ink); } /* Base rule never set a text color at all — fine on a light theme (defaults to black), invisible on dark. */ [data-rlp-theme="dark"] .rlp-field input, [data-rlp-theme="dark"] .rlp-field select { background: var(--rlp-surface-alt); } /* Stylistic: gives inputs a touch of definition against the page in dark mode. */ [data-rlp-theme="dark"] .rlp-subject-tile__badge { background: rgba(255,255,255,0.92); } /* -------------------------------------------------------------------------- 6. KINDERGARTEN — for pre-primary / kindergarten learners specifically, as distinct from the Class 1-5 register the other five themes are tuned for. Deliberately different from Sunrise, not just "brighter": primary crayon-box blue + sunshine yellow instead of a warm terracotta pairing, even larger rounding (kindergarten UI convention — nothing should look sharp-edged), a chunky bubble-letter display face, and bigger buttons sitewide (small children and the parents tapping on their behalf both benefit from larger touch targets, not just a color swap). -------------------------------------------------------------------------- */ [data-rlp-theme="kindergarten"] { --rlp-primary: #2E86DE; --rlp-primary-dk: #1B68B8; --rlp-primary-tint: #EAF4FF; --rlp-accent: #D97706; --rlp-accent-dk: #B45309; --rlp-accent-tint: #FFF8E1; --rlp-accent-glow: rgba(217,119,6,0.38); /* Was a bright sunshine yellow (#F4B400) with white text — nearly unreadable (very poor contrast). Darkened to a richer gold-orange that keeps the warm "sunshine" feel while white text actually reads clearly on it. */ --rlp-ink: #22314A; --rlp-ink-soft: #5B6B85; --rlp-ink-faint: #93A0B8; --rlp-border: #DCEAFB; --rlp-surface: #FFFFFF; --rlp-surface-alt: #F3F9FF; --rlp-panel-bg: #2E86DE; --rlp-panel-text: #FFFFFF; --rlp-panel-text-soft: rgba(255,255,255,0.88); --rlp-panel-text-faint: rgba(255,255,255,0.62); --rlp-panel-border: rgba(255,255,255,0.2); --rlp-on-primary: #FFFFFF; --rlp-font-display: 'Fredoka', -apple-system, sans-serif; --rlp-font-body: 'Quicksand', -apple-system, sans-serif; --rlp-radius-sm: 14px; --rlp-radius-md: 20px; --rlp-radius-lg: 28px; --rlp-radius-xl: 40px; --rlp-shadow-sm: 0 2px 5px rgba(46,134,222,0.10); --rlp-shadow-card: 0 8px 22px rgba(46,134,222,0.14); --rlp-shadow-lifted: 0 20px 48px rgba(46,134,222,0.24); } /* Soft polka-dot hero — reads as playroom, not corporate gradient. */ [data-rlp-theme="kindergarten"] .rlp-hero { background-color: var(--rlp-primary-tint); background-image: radial-gradient(rgba(46,134,222,0.14) 2.5px, transparent 2.5px), radial-gradient(rgba(244,180,0,0.16) 2.5px, transparent 2.5px); background-size: 26px 26px; background-position: 0 0, 13px 13px; } /* Bigger touch targets everywhere a small child (or the parent tapping for them) might need to hit a button — not just a cosmetic choice. */ [data-rlp-theme="kindergarten"] .rlp-btn { padding-top: 14px; padding-bottom: 14px; font-weight: 700; } [data-rlp-theme="kindergarten"] .rlp-btn--large { padding-top: 18px; padding-bottom: 18px; font-size: 1.08em; } [data-rlp-theme="kindergarten"] .rlp-card { border: 2px solid var(--rlp-border); } [data-rlp-theme="kindergarten"] .rlp-card:hover { transform: translateY(-3px) scale(1.01); } [data-rlp-theme="kindergarten"] .rlp-subject-tile__badge { border: 3px solid rgba(255,255,255,0.8); }