/* ================================================================= Zhip landing — dark mode theme Applied when is present (set by theme.js). theme.js runs synchronously early in to prevent FOUC. ================================================================= */ /* ── Reduced-motion guard ─────────────────────────── */ @media (prefers-reduced-motion: reduce) { .glass-card, .glass-chip { transition: none !important; } } /* ── Page shell ──────────────────────────────────── */ .dark body { background-color: #0a0f1e; background-image: linear-gradient(to bottom right, #0a0f1e, #0d1830); color: #e2e8f0; } /* ── Text token overrides ────────────────────────── */ /* Tailwind custom tokens are defined with single-value light colours only. These selector overrides (0,2,0 specificity) beat single-class Tailwind rules. */ .dark .text-on-surface { color: #e2e8f0 !important; } .dark .text-on-surface-variant { color: #94a3b8 !important; } .dark .text-on-secondary-container { color: #94a3b8 !important; } /* Inline strong highlights that use text-on-surface */ .dark strong.text-on-surface { color: #f1f5f9 !important; } /* Hard-coded blue-800 used in the hero diagram label */ .dark .text-blue-800 { color: #93c5fd !important; } /* ── Icon container backgrounds (cards / hero diagram) ─ */ .dark .bg-primary-fixed { background-color: rgba(59, 130, 246, 0.14) !important; } .dark .bg-surface-container-high { background-color: rgba(30, 41, 59, 0.80) !important; } .dark .bg-error-container { background-color: rgba(127, 29, 29, 0.35) !important; } .dark .bg-success-container { background-color: rgba(5, 150, 105, 0.18) !important; } .dark .text-on-error-container { color: #fca5a5 !important; } .dark .text-success-on-container { color: #6ee7b7 !important; } .dark .text-on-primary-container { color: #93c5fd !important; } /* ── Status badge pill ("Now in Private Beta") ───── */ /* The pill uses bg-surface-container-low without an opacity modifier; the section variants use bg-surface-container-low/50 which Tailwind generates as a separate class (.bg-surface-container-low\/50), so :not(section) is safe but not strictly needed — kept for clarity. */ .dark .bg-surface-container-low:not(section) { background-color: rgba(30, 41, 59, 0.80) !important; } .dark .border-outline-variant:not(section) { border-color: rgba(59, 130, 246, 0.25) !important; } /* ── Glass nav panel ──────────────────────────────── */ .dark .glass-panel { background: rgba(10, 15, 30, 0.92); border-bottom-color: rgba(59, 130, 246, 0.22); } /* ── Glass cards ──────────────────────────────────── */ .dark .glass-card { background: rgba(15, 23, 42, 0.95); border-color: rgba(59, 130, 246, 0.18); box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.55); } .dark .glass-card:hover { border-color: rgba(59, 130, 246, 0.38); box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.70); } /* ── Glass chips (hero diagram) ───────────────────── */ .dark .glass-chip { background: rgba(15, 23, 42, 0.94); border-color: rgba(148, 163, 184, 0.18); box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.45); } .dark .glass-chip:hover { box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.60); } /* ── Footer ───────────────────────────────────────── */ .dark footer { background: rgba(10, 15, 30, 0.95) !important; border-top-color: rgba(148, 163, 184, 0.12) !important; } /* ── Form inputs (pilots / pilotos pages) ─────────── */ .dark input, .dark select, .dark textarea { background-color: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; } .dark input::placeholder, .dark textarea::placeholder { color: #64748b !important; } .dark select option { background-color: #1e293b; color: #e2e8f0; } /* ── Theme toggle button ──────────────────────────── */ #theme-toggle, #theme-toggle-mobile { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; border-radius: 0.75rem; border: 1px solid #cbd5e1; padding: 0.5rem; color: #475569; background: transparent; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; font-family: inherit; font-size: inherit; line-height: 1; } #theme-toggle:hover, #theme-toggle-mobile:hover { border-color: #3b82f6; color: #3b82f6; } .dark #theme-toggle, .dark #theme-toggle-mobile { border-color: #334155; color: #94a3b8; } .dark #theme-toggle:hover, .dark #theme-toggle-mobile:hover { border-color: #93c5fd; color: #93c5fd; } /* Mobile toggle: full-width row in dropdown */ #theme-toggle-mobile { width: 100%; justify-content: flex-start; padding: 0.5rem 0.5rem; border-radius: 0.75rem; }