/* ──────────────────────────────────────────────────────────────── theme-dark.css — Dark premium theme overlay for app pages Loaded AFTER styles.css so its rules win where they overlap. Activated by adding `class="dark-theme"` to or . ──────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Syne:wght@600&display=swap'); html.dark-theme, body.dark-theme { --bg-deep: #0a0a0f; --bg-card: rgba(255,255,255,0.04); --glass-border: rgba(255,255,255,0.08); --accent: #f97316; --accent-deep: #ea580c; --text-primary: #f1f5f9; --text-secondary: rgba(255,255,255,0.55); --text-tertiary: rgba(255,255,255,0.35); --bar-bg: rgba(10,10,15,0.85); --input-bg: rgba(255,255,255,0.06); --input-border: rgba(255,255,255,0.08); --select-bg: #1e293b; --ease: cubic-bezier(0.16, 1, 0.3, 1); /* Override existing styles.css tokens so all base components flow dark */ --primary: var(--accent); --primary-dark: var(--accent-deep); --primary-light: rgba(249,115,22,0.12); --bg: var(--bg-deep); --white: #ffffff; --text: var(--text-primary); --muted: var(--text-secondary); --border: var(--glass-border); --shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.35); --shadow: 0 4px 24px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.25); --shadow-lg: 0 14px 44px rgba(0,0,0,0.55), 0 4px 14px rgba(0,0,0,0.3); --shadow-blue: 0 8px 24px -8px rgba(249,115,22,0.45); --gradient: linear-gradient(135deg, #f97316 0%, #ea580c 60%, #c2410c 100%); } /* Apply Outfit + Syne fonts on every page that loads theme-dark.css, regardless of which theme is active (so dashboard/create stay consistent). */ body { font-family: 'Outfit', system-ui, -apple-system, sans-serif; } body h1, body h2, body h3, body h4 { font-family: 'Syne', 'Outfit', sans-serif; font-weight: 600; letter-spacing: -0.01em; } body .logo { font-family: 'Syne', 'Outfit', sans-serif; font-weight: 600; } body.dark-theme { background: var(--bg-deep); color: var(--text-primary); position: relative; min-height: 100vh; overflow-x: hidden; /* Tell Chrome/Safari this page is already dark — disables Chrome's auto-dark force */ color-scheme: dark; } html.dark-theme, html:has(body.dark-theme) { color-scheme: dark; } /* === Background orbs + noise === */ body.dark-theme .orb { position: fixed; border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: 0; will-change: transform; } body.dark-theme .orb-1 { width: 420px; height: 420px; background: radial-gradient(circle, #f97316 0%, transparent 70%); top: -120px; left: -120px; opacity: 0.45; animation: orb-float-1 22s ease-in-out infinite; } body.dark-theme .orb-2 { width: 480px; height: 480px; background: radial-gradient(circle, #7c3aed 0%, transparent 70%); bottom: -160px; right: -140px; opacity: 0.4; animation: orb-float-2 26s ease-in-out infinite; } body.dark-theme .orb-3 { width: 360px; height: 360px; background: radial-gradient(circle, #2563eb 0%, transparent 70%); top: 35%; right: 20%; opacity: 0.3; animation: orb-float-3 20s ease-in-out infinite; } @keyframes orb-float-1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(80px,60px) scale(1.15); } } @keyframes orb-float-2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-90px,-70px) scale(1.1); } } @keyframes orb-float-3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(50px,-90px) scale(0.9); } } body.dark-theme .noise { position: fixed; inset: 0; pointer-events: none; opacity: 0.04; z-index: 1; background-image: url("data:image/svg+xml;utf8,"); } /* Lift app content above orbs/noise */ body.dark-theme nav, body.dark-theme .landing-nav, body.dark-theme .dash-wrap, body.dark-theme .form-shell, body.dark-theme #create-footer, body.dark-theme .modal-overlay, body.dark-theme .toast, body.dark-theme .crop-modal-overlay { position: relative; z-index: 2; } /* === Top navigation === */ body.dark-theme .landing-nav { background: var(--bar-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); } body.dark-theme .logo span { color: var(--accent); } /* === Buttons === */ body.dark-theme .btn { font-family: 'Outfit', system-ui, sans-serif; } body.dark-theme .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); box-shadow: var(--shadow-blue); color: white; } body.dark-theme .btn-primary:hover { box-shadow: 0 12px 32px -10px rgba(249,115,22,0.6); } body.dark-theme .btn-outline { background: var(--bg-card); border: 1px solid var(--glass-border); color: var(--text-primary); } body.dark-theme .btn-outline:hover { border-color: rgba(249,115,22,0.4); color: var(--accent); } body.dark-theme .btn-white { background: white; color: var(--bg-deep); } /* === Form inputs === */ body.dark-theme input, body.dark-theme select, body.dark-theme textarea { background: var(--input-bg); border: 1.5px solid var(--input-border); color: var(--text-primary); font-family: inherit; } body.dark-theme input::placeholder, body.dark-theme textarea::placeholder { color: var(--text-tertiary); } /* Chrome/Edge autofill — force the dark glass background and light text */ body.dark-theme input:-webkit-autofill, body.dark-theme input:-webkit-autofill:hover, body.dark-theme input:-webkit-autofill:focus, body.dark-theme input:-webkit-autofill:active, body.dark-theme textarea:-webkit-autofill, body.dark-theme select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #181820 inset !important; box-shadow: 0 0 0 1000px #181820 inset !important; -webkit-text-fill-color: var(--text-primary) !important; caret-color: var(--text-primary) !important; border-color: var(--input-border) !important; transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s; } body.dark-theme input:focus, body.dark-theme select:focus, body.dark-theme textarea:focus, body.dark-theme .form-group input:focus, body.dark-theme .form-group select:focus, body.dark-theme .form-group textarea:focus { outline: none; -webkit-appearance: none !important; appearance: none !important; border-color: var(--accent) !important; background-color: var(--input-bg) !important; background-image: none !important; color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.15) !important; } /* === Failsafe — maximum-specificity dark input override for every state. Beats any UA stylesheet, any styles.css rule, autofill paint, focus paint, etc. === */ html body.dark-theme input, html body.dark-theme textarea, html body.dark-theme select, html body.dark-theme input:focus, html body.dark-theme input:focus-visible, html body.dark-theme input:focus-within, html body.dark-theme input:hover, html body.dark-theme input:active, html body.dark-theme textarea:focus, html body.dark-theme textarea:focus-visible, html body.dark-theme select:focus, html body.dark-theme .form-group input, html body.dark-theme .form-group input:focus, html body.dark-theme .form-group input:focus-visible, html body.dark-theme .form-group input:hover, html body.dark-theme .form-group input:active, html body.dark-theme .form-group textarea, html body.dark-theme .form-group textarea:focus, html body.dark-theme .form-group select, html body.dark-theme .form-group select:focus { background-color: rgba(255,255,255,0.06) !important; background-image: none !important; color: #f1f5f9 !important; -webkit-text-fill-color: #f1f5f9 !important; -webkit-appearance: none !important; appearance: none !important; -webkit-tap-highlight-color: transparent !important; /* Kill any background transition so it can't fade through white */ transition-property: border-color, box-shadow !important; } /* === NUCLEAR FIX — paints dark bg via inset shadow on ALL inputs unconditionally. This beats Chrome's autofill preview, autofill-selected, autofill-performed, and any other paint that overrides background-color. === */ html body.dark-theme input, html body.dark-theme input:hover, html body.dark-theme input:focus, html body.dark-theme input:active, html body.dark-theme input:-webkit-autofill, html body.dark-theme input:-webkit-autofill:hover, html body.dark-theme input:-webkit-autofill:focus, html body.dark-theme input:-webkit-autofill:active, html body.dark-theme textarea, html body.dark-theme textarea:focus, html body.dark-theme textarea:-webkit-autofill, html body.dark-theme select, html body.dark-theme select:focus, html body.dark-theme select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #181820 inset !important; box-shadow: 0 0 0 1000px #181820 inset !important; -webkit-text-fill-color: #f1f5f9 !important; color: #f1f5f9 !important; caret-color: #f97316 !important; background-color: #181820 !important; background-image: none !important; transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s, border-color 0.18s, box-shadow 0.18s !important; } /* Add orange focus glow ON TOP of the dark inset shadow */ html body.dark-theme input:focus, html body.dark-theme textarea:focus, html body.dark-theme select:focus { -webkit-box-shadow: 0 0 0 1000px #181820 inset, 0 0 0 3px rgba(249,115,22,0.18) !important; box-shadow: 0 0 0 1000px #181820 inset, 0 0 0 3px rgba(249,115,22,0.18) !important; border-color: #f97316 !important; } /* === Pragmatic fallback for Android Chrome — if bg paint overrides win, force text to BLACK on focus so it stays visible on a white-painted bg. Resting state keeps the light text on dark bg. === */ html body.dark-theme input:focus, html body.dark-theme input:focus-visible, html body.dark-theme input:focus-within, html body.dark-theme input:active, html body.dark-theme textarea:focus, html body.dark-theme textarea:focus-visible, html body.dark-theme select:focus { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; caret-color: #0f172a !important; } body.dark-theme select option { background: var(--select-bg); color: var(--text-primary); } body.dark-theme label { color: var(--text-secondary); } /* === Cards & sections === */ body.dark-theme .form-section { background: var(--bg-card); border: 1px solid var(--glass-border); } body.dark-theme .form-section-header { background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--glass-border); color: var(--text-primary); } body.dark-theme .form-section-header:hover { background: rgba(255,255,255,0.05); } body.dark-theme .form-section-header .section-icon { color: var(--accent); } body.dark-theme .form-section-header .toggle-arrow { color: var(--text-tertiary); } body.dark-theme .hint { color: var(--text-tertiary); } /* === Dashboard cards === */ body.dark-theme .dash-card { background: var(--bg-card); border: 1px solid var(--glass-border); } body.dark-theme .dash-card:hover { border-color: rgba(249,115,22,0.3); box-shadow: 0 12px 30px -10px rgba(0,0,0,0.55); } body.dark-theme .dash-card-header { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); } body.dark-theme .dash-card-body { color: var(--text-secondary); } body.dark-theme .dash-views { color: var(--text-tertiary); } body.dark-theme .dash-btn { background: rgba(255,255,255,0.06); color: var(--text-primary); border: 1px solid var(--glass-border); } body.dark-theme .dash-btn:hover { background: rgba(249,115,22,0.12); color: var(--accent); border-color: rgba(249,115,22,0.35); } body.dark-theme .dash-btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: white; border: none; } body.dark-theme .dash-header h1 { color: var(--text-primary); } body.dark-theme .dash-header p { color: var(--text-secondary); } body.dark-theme .empty-state { background: var(--bg-card); border: 1px solid var(--glass-border); color: var(--text-secondary); } /* === Create form footer === */ body.dark-theme #create-footer { background: var(--bar-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--glass-border); } body.dark-theme #footer-url-wrap { color: var(--text-secondary); } body.dark-theme #footer-url { color: var(--accent) !important; } body.dark-theme .form-shell-header { background: var(--bar-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); color: var(--text-primary); } /* === Modal === */ body.dark-theme .modal { background: #11141b; border: 1px solid var(--glass-border); color: var(--text-primary); } body.dark-theme .modal-header { border-bottom: 1px solid var(--glass-border); } body.dark-theme .modal-tabs { border-bottom: 1px solid var(--glass-border); } body.dark-theme .modal-tab { color: var(--text-tertiary); } body.dark-theme .modal-tab.active { color: var(--accent); border-bottom-color: var(--accent); } body.dark-theme .modal-error { background: rgba(239,68,68,0.1); color: #fca5a5; border: 1px solid rgba(239,68,68,0.25); } /* === Toasts === */ body.dark-theme .toast { background: #11141b; border: 1px solid var(--glass-border); color: var(--text-primary); } /* === Username availability === */ body.dark-theme #username-hint { color: var(--text-tertiary); } body.dark-theme #url-preview { color: var(--accent); } /* === Link rows / spec rows / video rows === */ body.dark-theme .link-row select, body.dark-theme .link-row input, body.dark-theme .spec-row input, body.dark-theme .video-row input { background: var(--input-bg); border: 1.5px solid var(--input-border); color: var(--text-primary); } body.dark-theme .add-link-btn { background: var(--bg-card); border: 1.5px dashed rgba(249,115,22,0.35); color: var(--accent); } body.dark-theme .add-link-btn:hover { background: rgba(249,115,22,0.08); border-color: var(--accent); } body.dark-theme .move-btn, body.dark-theme .remove-link-btn { background: var(--bg-card); border: 1px solid var(--glass-border); color: var(--text-secondary); } body.dark-theme .move-btn:hover { color: var(--accent); border-color: rgba(249,115,22,0.4); } body.dark-theme .remove-link-btn { color: #fca5a5; border-color: rgba(239,68,68,0.25); background: rgba(239,68,68,0.08); } body.dark-theme .remove-link-btn:hover { background: rgba(239,68,68,0.15); } /* === Avatar / logo upload widget === */ body.dark-theme .avatar-preview, body.dark-theme #logo-preview { background: var(--bg-card); border: 2px dashed rgba(249,115,22,0.35); color: var(--text-secondary); } body.dark-theme .btn-upload { background: var(--bg-card); border: 1.5px solid rgba(249,115,22,0.35); color: var(--accent); } body.dark-theme .btn-upload:hover { background: var(--accent); color: white; border-color: var(--accent); } body.dark-theme .avatar-url-row input { background: var(--input-bg); border: 1.5px solid var(--input-border); color: var(--text-primary); } /* === Theme picker swatches === */ body.dark-theme .theme-swatch.selected { outline-color: var(--accent); box-shadow: 0 0 0 3px rgba(249,115,22,0.3); } /* === Theme toggle button (inline, sits in the nav) === */ .theme-toggle-btn { width: 36px; height: 36px; flex-shrink: 0; background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: 50%; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: color 0.2s, transform 0.2s var(--ease), border-color 0.2s, background 0.2s; } .theme-toggle-btn:hover { color: var(--accent); border-color: rgba(249,115,22,0.4); transform: scale(1.08); } .theme-toggle-btn:active { transform: scale(0.94); } .theme-toggle-btn svg { width: 18px; height: 18px; } /* Light-mode default for toggle button (when dark-theme NOT applied) */ body:not(.dark-theme) .theme-toggle-btn { background: white; border: 1px solid #e2e8f0; color: #64748b; } body:not(.dark-theme) .theme-toggle-btn:hover { color: #2563eb; border-color: #bfdbfe; } /* ════════════════════════════════════════════════════════════ CONSISTENCY PASS — match card.php's visual treatment ════════════════════════════════════════════════════════════ */ /* === Typography: Syne for headings, Outfit for body === */ body.dark-theme h1, body.dark-theme h2, body.dark-theme h3, body.dark-theme .dash-header h1, body.dark-theme .form-section-header, body.dark-theme .modal-header h2, body.dark-theme .create-title, body.dark-theme .dash-card-name { font-family: 'Syne', 'Outfit', sans-serif; font-weight: 600; letter-spacing: -0.01em; } body.dark-theme { letter-spacing: 0.005em; } /* === Section headers: match card.php's section-title aesthetic === */ body.dark-theme .form-section-header { font-size: 0.75rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent) !important; background: transparent !important; border-bottom: 1px solid var(--glass-border) !important; padding: 1rem 1.25rem !important; display: flex; align-items: center; gap: 0.6rem; position: relative; } body.dark-theme .form-section-header::before { content: ''; width: 3px; height: 14px; background: linear-gradient(180deg, var(--accent), transparent); border-radius: 2px; flex-shrink: 0; } body.dark-theme .form-section-header .section-icon { font-size: 0.95rem; color: var(--accent); } body.dark-theme .form-section-header:hover { background: rgba(255,255,255,0.03) !important; } body.dark-theme .form-section-body { padding: 1.5rem 1.25rem; } body.dark-theme .form-section-body label { font-size: 0.78rem; font-weight: 500; color: var(--text-secondary); } /* === Glass cards everywhere — soft borders, glass background === */ body.dark-theme .form-section, body.dark-theme .dash-card { background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 8px 24px -16px rgba(0,0,0,0.4); transition: border-color 0.3s ease, box-shadow 0.3s ease; } body.dark-theme .form-section:hover, body.dark-theme .dash-card:hover { border-color: rgba(249,115,22,0.25); box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 12px 32px -12px rgba(0,0,0,0.5); } /* === Dashboard card refinement === */ body.dark-theme .dash-card-header { background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 50%, #f97316 100%); background-size: 200% 200%; animation: dashHeaderFlow 14s ease infinite; position: relative; } @keyframes dashHeaderFlow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } body.dark-theme .dash-card-header::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.12) 0%, transparent 60%); pointer-events: none; } body.dark-theme .dash-avatar { border: 2px solid rgba(255,255,255,0.3); background: rgba(0,0,0,0.2); backdrop-filter: blur(8px); } body.dark-theme .dash-card-name { font-size: 1rem; } body.dark-theme .dash-card-title { color: rgba(255,255,255,0.85); font-weight: 400; } /* === Form inputs — uniform dark glass === */ body.dark-theme input[type="text"], body.dark-theme input[type="email"], body.dark-theme input[type="tel"], body.dark-theme input[type="url"], body.dark-theme input[type="password"], body.dark-theme input[type="number"], body.dark-theme select, body.dark-theme textarea { font-family: 'Outfit', sans-serif; border-radius: 10px; padding: 0.78rem 0.95rem; font-size: 0.9rem; letter-spacing: 0.005em; -webkit-appearance: none; appearance: none; -webkit-text-fill-color: var(--text-primary); background-color: var(--input-bg) !important; color: var(--text-primary) !important; } /* === Buttons unified styling === */ body.dark-theme .btn, body.dark-theme .modal-submit, body.dark-theme .dash-btn { font-family: 'Outfit', sans-serif; font-weight: 600; letter-spacing: 0.01em; transition: transform 0.25s var(--ease), box-shadow 0.25s, background 0.25s, border-color 0.25s; } body.dark-theme .btn-primary, body.dark-theme .modal-submit, body.dark-theme .enq-submit { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); border: none; color: white; box-shadow: 0 8px 24px -8px rgba(249,115,22,0.5); } body.dark-theme .btn-primary:hover, body.dark-theme .modal-submit:hover, body.dark-theme .enq-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 32px -10px rgba(249,115,22,0.65); } body.dark-theme .btn:active { transform: scale(0.98); } /* === Modal — match card.php's bg-card glass === */ body.dark-theme .modal { background: #11141b; border: 1px solid var(--glass-border); box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.3); } body.dark-theme .modal-tab.active { color: var(--accent); border-bottom-color: var(--accent); } /* === Logo brand alignment === */ body.dark-theme .logo { font-family: 'Syne', sans-serif; font-weight: 600; } body.dark-theme .logo span { color: var(--accent); } /* === Hint and helper text === */ body.dark-theme .hint, body.dark-theme small, body.dark-theme .form-text { color: var(--text-tertiary); font-size: 0.78rem; } /* === Dashboard top nav consistency === */ body.dark-theme .dash-nav { background: var(--bar-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); } body.dark-theme .nav-user { background: var(--bg-card); border: 1px solid var(--glass-border); } body.dark-theme .nav-user:hover { border-color: rgba(249,115,22,0.35); } body.dark-theme .nav-user-avatar { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: white; } body.dark-theme .nav-dropdown { background: #11141b; border: 1px solid var(--glass-border); box-shadow: 0 16px 40px rgba(0,0,0,0.5); } body.dark-theme .nav-dropdown-item { color: var(--text-secondary); } body.dark-theme .nav-dropdown-item:hover { background: rgba(249,115,22,0.08); color: var(--accent); } body.dark-theme .nav-dropdown-item.danger { color: #fca5a5; } body.dark-theme .nav-dropdown-item.danger:hover { background: rgba(239,68,68,0.1); color: #f87171; } body.dark-theme .nav-dropdown-header { border-bottom: 1px solid var(--glass-border); } body.dark-theme .nav-dropdown-name { color: var(--text-primary); } body.dark-theme .nav-dropdown-email { color: var(--text-tertiary); } /* === Create page header === */ body.dark-theme .create-header { background: var(--bar-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); } body.dark-theme .create-title { font-size: 1.6rem; background: linear-gradient(135deg, #ffffff 40%, var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body.dark-theme .create-sub { color: var(--text-secondary); } body.dark-theme .create-sub strong { color: var(--accent); } /* === Empty state and views badges === */ body.dark-theme .dash-views { color: var(--text-tertiary); } body.dark-theme .empty-state h3 { font-family: 'Syne', sans-serif; color: var(--text-primary); } /* === Username prefix === */ body.dark-theme .username-row { background: var(--bg-card); border: 1.5px solid var(--input-border); } body.dark-theme .username-prefix { background: rgba(255,255,255,0.04); color: var(--text-tertiary); border-right: 1px solid var(--glass-border); }