/** Custom styles for ALTCHA Widget - Fully respects system prefers-color-scheme **/ /* Default light mode variables (applied unless overridden by dark mode) */ :root { /* Custom gradient, border, text, and shadow */ --altcha-bg-start: #f9f9f9; --altcha-bg-end: #ffffff; --altcha-border: #dcdcdc; --altcha-text: #333333; --altcha-shadow: rgba(0, 0, 0, 0.08); --altcha-shadow-hover: rgba(0, 0, 0, 0.12); /* ALTCHA CSS variables (light defaults) */ --altcha-color-base: #ffffff; --altcha-color-text: #333333; --altcha-color-border: #e8e8e8; --altcha-color-border-focus: #1D1DC9; --altcha-color-active: #1D1DC9; --altcha-color-footer-bg: transparent; --altcha-color-error-text: #f23939; --altcha-shadow: rgba(0, 0, 0, 0.2); --altcha-backdrop: rgba(0, 0, 0, 0.5); --altcha-input-bg: #ffffff; } /* Automatic dark mode: only applies when the user's system prefers dark */ @media (prefers-color-scheme: dark) { :root { --altcha-bg-start: #1e293b; /* slate-800 */ --altcha-bg-end: #0f172a; /* slate-900 */ --altcha-border: #334155; /* slate-700 */ --altcha-text: #f1f5f9; /* slate-100 */ --altcha-shadow: rgba(0, 0, 0, 0.3); --altcha-shadow-hover: rgba(0, 0, 0, 0.4); --altcha-color-base: #1e293b; --altcha-color-text: #f1f5f9; --altcha-color-border: #475569; /* slate-600 */ --altcha-color-border-focus: #3b82f6; /* blue-500 */ --altcha-color-active: #3b82f6; --altcha-color-footer-bg: rgba(0, 0, 0, 0.2); --altcha-color-error-text: #fb7185; /* rose-400 */ --altcha-shadow: rgba(0, 0, 0, 0.5); --altcha-backdrop: rgba(0, 0, 0, 0.8); --altcha-input-bg: #0f172a; } } /* Optional: Manual override classes (e.g., for a theme toggle button) */ /* Add class="dark" to to force dark mode */ /* Add class="light" to to force light mode */ html.dark { /* Same dark values as above */ --altcha-bg-start: #1e293b; --altcha-bg-end: #0f172a; --altcha-border: #334155; --altcha-text: #f1f5f9; --altcha-shadow: rgba(0, 0, 0, 0.3); --altcha-shadow-hover: rgba(0, 0, 0, 0.4); --altcha-color-base: #1e293b; --altcha-color-text: #f1f5f9; --altcha-color-border: #475569; --altcha-color-border-focus: #3b82f6; --altcha-color-active: #3b82f6; --altcha-color-footer-bg: rgba(0, 0, 0, 0.2); --altcha-color-error-text: #fb7185; --altcha-shadow: rgba(0, 0, 0, 0.5); --altcha-backdrop: rgba(0, 0, 0, 0.8); --altcha-input-bg: #0f172a; } html { /* Force light values (overrides system dark preference if needed) */ --altcha-bg-start: #f9f9f9; --altcha-bg-end: #ffffff; --altcha-border: #dcdcdc; --altcha-text: #333333; --altcha-shadow: rgba(0, 0, 0, 0.08); --altcha-shadow-hover: rgba(0, 0, 0, 0.12); --altcha-color-base: #ffffff; --altcha-color-text: #333333; --altcha-color-border: #e8e8e8; --altcha-color-border-focus: #1D1DC9; --altcha-color-active: #1D1DC9; --altcha-color-footer-bg: transparent; --altcha-color-error-text: #f23939; --altcha-shadow: rgba(0, 0, 0, 0.2); --altcha-backdrop: rgba(0, 0, 0, 0.5); --altcha-input-bg: #ffffff; } /* Widget styling - uses the variables above */ altcha-widget { display: block; width: 100%; max-width: 320px; margin: 1rem auto; padding: 1rem; /* border: 1px solid var(--altcha-border);*/ border-radius: 12px; background: linear-gradient(to right, var(--altcha-bg-start), var(--altcha-bg-end)); box-shadow: 0 2px 6px var(--altcha-shadow); font-family: 'Segoe UI', 'Roboto', sans-serif; font-size: 1rem; color: var(--altcha-text); transition: all 0.3s ease; } altcha-widget:hover { box-shadow: 0 4px 12px var(--altcha-shadow-hover); border-color: var(--altcha-color-active); /* Uses active color (different in light/dark) */ } /* Shadow DOM parts */ altcha-widget::part(label) { font-weight: 600; font-size: 0.875rem; margin-bottom: 0.5rem; color: var(--altcha-color-text); } altcha-widget::part(checkbox) { accent-color: var(--altcha-color-active); transform: scale(1.1); margin-right: 0.5rem; cursor: pointer; } altcha-widget::part(status) { font-size: 0.75rem; margin-top: 0.5rem; color: #60a5fa; /* Consistent blue that works in both themes */ } /* Internal fallback styles */ .altcha { background: var(--altcha-color-base); border: 1px solid var(--altcha-color-border); border-radius: 3px; color: var(--altcha-color-text); } .altcha:focus-within { border-color: var(--altcha-color-border-focus); } .altcha-code-challenge-input { background: var(--altcha-input-bg); color: var(--altcha-color-text); border: 1px solid var(--altcha-color-border); }