/** * Theme System - CSS Custom Properties * * Two themes: * - Chalk and Blackboard (default) - Dark chalkboard aesthetic * - Soft Spot - Light pastel aesthetic with muted colors * * Usage: Add class="theme-soft-spot" to to switch themes * * Variable naming: * - --theme-input-* : Letter input boxes (the row where typed letters appear) * - --theme-key-* : Keyboard keys (neutral state) * - --theme-key-highlight-* : Prominent/glowing keys (scaffolding: needed letters) * - --theme-key-muted-* : De-emphasized keys (scaffolding: unneeded letters) * - --theme-key-error-* : Error feedback (wrong letter pressed) */ /* ================================================ Default Theme: Chalk and Blackboard ================================================ */ :root { /* Background & Layout */ --theme-bg: #1a262b; --theme-text: #ffffff; --theme-pattern-text: #ffffff; /* Pattern emphasis (same as text in Chalk theme) */ /* Font - Chalk theme uses Schoolbell */ --theme-font: 'Schoolbell', cursive; /* Input Row (letter boxes) */ --theme-input-bg: #000000; --theme-input-border: #ffffff; --theme-input-border-width: 3px; --theme-input-text: #ffffff; --theme-input-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); --theme-input-completed-border: #4ade80; --theme-input-completed-text: #4ade80; --theme-input-peek-text: rgba(255, 255, 255, 0.5); /* Keyboard - Neutral Keys */ --theme-key-bg: #0d1215; --theme-key-border: rgba(255, 255, 255, 0.7); --theme-key-border-width: 2px; --theme-key-text: #ffffff; --theme-key-font-weight: normal; --theme-key-font-size: 24px; --theme-key-shadow: rgba(0, 0, 0, 0.5); --theme-key-bottom-border: 4px; /* Keyboard - Highlighted Keys (prominent/glowing) */ --theme-key-highlight-bg: #0d1215; --theme-key-highlight-border: #ffeb3b; --theme-key-highlight-text: #ffeb3b; --theme-key-highlight-shadow: rgba(0, 0, 0, 0.5); --theme-key-highlight-glow: rgba(255, 235, 59, 0.4); --theme-key-highlight-glow-inner: rgba(255, 235, 59, 0.2); --theme-key-highlight-text-glow: rgba(255, 235, 59, 0.8); /* Keyboard - Muted Keys (de-emphasized) */ --theme-key-muted-opacity: 0.3; --theme-key-muted-border: #555555; --theme-key-muted-text: #777777; /* Keyboard - Error State */ --theme-key-error-border: #ff4444; /* Decorative */ --theme-divider: rgba(255, 255, 255, 0.5); --theme-divider-thickness: 2px; --theme-divider-shadow: rgba(0, 0, 0, 0.5); --theme-icon-glow: rgba(255, 255, 255, 0.2); } /* ================================================ Soft Spot Theme Colors extracted from reference image ================================================ */ body.theme-soft-spot { /* Background & Layout */ --theme-bg: #dbe1ea; --theme-text: #97b0c8; /* Blue-400: labels, shared with input text & key bg */ --theme-pattern-text: #beb1bd; /* Mauve-400: warm mauve, same as divider */ /* Font override for Soft Spot - rounded sans-serif */ --theme-font: 'Nunito', 'Varela Round', sans-serif; /* Input Row (letter boxes) */ --theme-input-bg: #fefffc; --theme-input-border: transparent; --theme-input-border-width: 0; --theme-input-text: #97b0c8; /* Blue-400 */ --theme-input-shadow: 0 4px 0 #bccbec; /* Completion state - soft green-teal (gentle "well done") */ --theme-input-completed-border: #8bbfad; --theme-input-completed-text: #8bbfad; --theme-input-peek-text: rgba(151, 176, 200, 0.4); /* Keyboard - Neutral Keys */ --theme-key-bg: #97b0c8; /* Blue-400 */ --theme-key-border: transparent; --theme-key-border-width: 0; --theme-key-text: #e9ebee; /* Off-white */ --theme-key-font-weight: bold; --theme-key-font-size: 36px; --theme-key-shadow: #8099b8; /* Blue-600 */ --theme-key-bottom-border: 6px; --theme-key-shadow-diffuse: 0 0 0 transparent; --theme-row-shadow-filter: drop-shadow(0 4px 6px rgba(80, 100, 120, 0.4)); /* Keyboard - Highlighted Keys (prominent/glowing) NOTE: highlight-border not visible due to border-width: 0 */ --theme-key-highlight-bg: #f6e8a4; /* Yellow-400 */ --theme-key-highlight-border: #e2c887; --theme-key-highlight-text: #97b0c8; /* Blue-400 */ --theme-key-highlight-shadow: #e2c887; /* Yellow-500 */ --theme-key-highlight-glow: rgba(246, 232, 164, 0.15); --theme-key-highlight-glow-inner: rgba(246, 232, 164, 0.08); --theme-key-highlight-text-glow: none; /* Keyboard - Muted Keys (de-emphasized) NOTE: muted-border not visible due to border-width: 0 */ --theme-key-muted-opacity: 0.35; --theme-key-muted-border: #b9c8cf; --theme-key-muted-text: #b9c8cf; /* Shadow-grey */ /* Keyboard - Error State Error feedback uses box-shadow glow instead of borders (flat/borderless aesthetic) */ --theme-key-error-border: #d4908f; --theme-key-error-shadow: 0 0 10px rgba(212, 144, 143, 0.4); /* Decorative Elements */ --theme-divider: #beb1bd; /* Mauve-400 */ --theme-divider-thickness: 4px; --theme-divider-shadow: rgba(160, 130, 140, 0.15); /* icon-glow: emoji/icon drop-shadow in spelling-component.js */ --theme-icon-glow: rgba(109, 106, 122, 0.15); } /* ================================================ Shared Animations ================================================ */ /* Shake animation - triggered on incorrect key press */ @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } /* Pop animation - triggered on input box completion */ @keyframes pop { 50% { transform: scale(1.15); } }