/* ============================================================= PAGE & PIXEL DESIGNS — DARK MODE Applied via [data-theme="dark"] on Respects OS preference by default; user can override via toggle. ============================================================= */ /* ── Theme toggle button ─────────────────────────────────────── */ /* Light mode: light navy button (🌙) */ .theme-toggle { background: #4a7ab5; border: 1px solid #4a7ab5; border-radius: 20px; padding: 0.3rem 0.6rem; cursor: pointer; font-size: 1rem; line-height: 1; display: flex; align-items: center; color: #ffffff; transition: border-color 0.2s, background 0.2s; flex-shrink: 0; } .theme-toggle:hover { background: #3a6aa8; border-color: #3a6aa8; } /* Dark mode: amber-orange button (☀️), 25% darker than #ffab02 */ [data-theme="dark"] .theme-toggle { background: #bf8001; border-color: #bf8001; color: #ffffff; } [data-theme="dark"] .theme-toggle:hover { background: #a86d01; border-color: #a86d01; } /* ── CSS variable overrides ──────────────────────────────────── */ [data-theme="dark"] { color-scheme: dark; /* shared.css */ --dark-text: #e2e8f0; --bg-light: #1e293b; --gradient-secondary: linear-gradient(135deg, #2c5c9e, #69bfbf); /* admin-common.css & styles.css */ --admin-bg: #0f172a; --admin-card-bg: #1e293b; --admin-card: #1e293b; --admin-border: #334155; --admin-border-light: #263450; --admin-text: #e2e8f0; --admin-text-light: #94a3b8; --admin-text-muted: #64748b; --admin-shadow: rgba(0, 0, 0, 0.4); --admin-shadow-hover: rgba(0, 0, 0, 0.5); /* per-page card variables */ --book-card: #1e293b; --event-card: #1e293b; --gallery-card: #1e293b; --worldbuilding-card: #1e293b; /* events dashboard page variables */ --event-bg: #0f172a; --event-text: #e2e8f0; --event-text-light: #94a3b8; --event-border: #334155; --event-shadow: rgba(0, 0, 0, 0.4); --event-shadow-hover: rgba(0, 0, 0, 0.5); } /* ── Global ──────────────────────────────────────────────────── */ [data-theme="dark"] body { background: #0f172a; color: #e2e8f0; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: #e2e8f0; } /* ── Marketing navbar ────────────────────────────────────────── */ [data-theme="dark"] .navbar { background: rgba(15, 23, 42, 0.97); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .navbar .nav-links { background: #0f172a; } [data-theme="dark"] .nav-links a { color: #e2e8f0; } [data-theme="dark"] .nav-links a:hover, [data-theme="dark"] .nav-links a.active { color: var(--secondary-blue); background-color: rgba(58, 123, 211, 0.15); } [data-theme="dark"] .mobile-menu-toggle span { background-color: #e2e8f0; } [data-theme="dark"] .logo img { background: white; padding: 4px; border-radius: 6px; } [data-theme="dark"] .nav-logo { background: white; padding: 4px; } [data-theme="dark"] .logo-subtitle { -webkit-text-fill-color: var(--secondary-blue); } /* ── Marketing cards & surfaces ──────────────────────────────── */ [data-theme="dark"] .feature-card, [data-theme="dark"] .card { background: #1e293b; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .feature-card:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); border-color: rgba(255, 171, 2, 0.3); } [data-theme="dark"] .pricing-card { background: #1e293b; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .pricing-card.featured { background: linear-gradient(135deg, rgba(255, 171, 2, 0.08) 0%, rgba(58, 123, 211, 0.08) 100%); } [data-theme="dark"] .included-item { background: #1e293b; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25); } [data-theme="dark"] .included-section { background: #162033; } [data-theme="dark"] .pricing-note { background: rgba(255, 171, 2, 0.07); color: #e2e8f0; } /* ── Home page: grows-with-you section ──────────────────────── */ [data-theme="dark"] .grows-card { background: #1e293b; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .grows-card:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .grows-card h4 { color: #e2e8f0; } /* ── Marketing CTA section ───────────────────────────────────── */ /* cta-section uses --gradient-secondary (blue→cyan), fine on dark */ /* ── Auth modal ──────────────────────────────────────────────── */ [data-theme="dark"] .auth-modal-content { background: #1e293b; color: #e2e8f0; } [data-theme="dark"] .auth-modal-content h2, [data-theme="dark"] .auth-modal-content p, [data-theme="dark"] .auth-modal-content label { color: #e2e8f0; } [data-theme="dark"] .auth-modal-content input[type="email"], [data-theme="dark"] .auth-modal-content input[type="password"], [data-theme="dark"] .auth-modal-content input[type="text"] { background: #0f172a; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .auth-divider span { color: #94a3b8; } /* ── Admin nav ───────────────────────────────────────────────── */ [data-theme="dark"] .nav { background: #1e293b; border-bottom-color: #334155; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } [data-theme="dark"] .nav .nav-links { background: #1e293b; border-top-color: #334155; } [data-theme="dark"] .nav-link { color: #e2e8f0; } [data-theme="dark"] .nav-link:hover { background: #334155; color: #e2e8f0; } [data-theme="dark"] .nav-link.active { background: #2C5282; color: white; } [data-theme="dark"] .nav-title { color: #93c5fd; } [data-theme="dark"] .mobile-toggle span { background: #e2e8f0; } [data-theme="dark"] .back-to-site { background: #ffab02; color: white !important; } /* ── Admin forms ─────────────────────────────────────────────── */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-group input, [data-theme="dark"] .form-group textarea, [data-theme="dark"] .form-group select, [data-theme="dark"] .social-link-row input, [data-theme="dark"] .domain-input-wrap input { background: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; } [data-theme="dark"] .form-group label { color: #e2e8f0; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-group input:focus, [data-theme="dark"] .form-group textarea:focus, [data-theme="dark"] .form-group select:focus { border-color: #4299e1 !important; background: #0f172a !important; } [data-theme="dark"] .form-group input:-webkit-autofill, [data-theme="dark"] .form-group input:-webkit-autofill:hover, [data-theme="dark"] .form-group input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #0f172a inset !important; -webkit-text-fill-color: #e2e8f0 !important; } /* ── Admin modals ────────────────────────────────────────────── */ [data-theme="dark"] .modal-content, [data-theme="dark"] .wizard-content { background: #1e293b; color: #e2e8f0; } [data-theme="dark"] .modal-header, [data-theme="dark"] .wizard-content .modal-header { border-bottom-color: #334155; } [data-theme="dark"] .modal-footer { background: #0f172a; border-top-color: #334155; } [data-theme="dark"] .ppd-tour-tooltip { background: #1e293b; color: #e2e8f0; } /* ── Admin secondary buttons ─────────────────────────────────── */ [data-theme="dark"] .btn-secondary, [data-theme="dark"] .wizard-btn, [data-theme="dark"] .ppd-tour-btn, [data-theme="dark"] .cancel-btn, [data-theme="dark"] .secondary-btn { background: #1e293b; color: #e2e8f0; border-color: #334155; } [data-theme="dark"] .btn-secondary:hover, [data-theme="dark"] .secondary-btn:hover { background: #334155; } /* ── Admin dropzone & upload ─────────────────────────────────── */ [data-theme="dark"] .image-dropzone { border-color: #334155; } [data-theme="dark"] .image-dropzone:hover { border-color: #4299e1; } [data-theme="dark"] .upload-progress { background: rgba(30, 41, 59, 0.97); color: #e2e8f0; } /* ── Admin misc surfaces ─────────────────────────────────────── */ [data-theme="dark"] .support-current, [data-theme="dark"] .no-purchase-features, [data-theme="dark"] .setup-step, [data-theme="dark"] .wizard-module-item, [data-theme="dark"] .final-confirmation, [data-theme="dark"] .domain-request-summary, [data-theme="dark"] .domain-suffix { background: #162033; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .current-plan-display { background: #162033; border-color: #334155; } [data-theme="dark"] .plan-display { background: #162033; border-color: #334155; } [data-theme="dark"] .help-card { background: #162033; border-color: #334155; } [data-theme="dark"] .help-card:hover { border-color: #ffab02; } [data-theme="dark"] .feature-toggle-item { border-color: #334155; } [data-theme="dark"] .feature-toggle-item:hover { border-color: #4299e1; background: rgba(66, 153, 225, 0.05); } [data-theme="dark"] .no-features-message { background: #162033; color: #94a3b8; } [data-theme="dark"] .support-option { border-color: #334155; } [data-theme="dark"] .support-option:hover { border-color: #4299e1; background: rgba(66, 153, 225, 0.05); } [data-theme="dark"] .checkbox-label .checkmark { background: #0f172a; border-color: #334155; } /* ── About page ──────────────────────────────────────────────── */ [data-theme="dark"] .transparency-section { background: #162033; } [data-theme="dark"] .transparency-item, [data-theme="dark"] .value-item { background: #1e293b; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .transparency-item p, [data-theme="dark"] .value-item p { color: #94a3b8; } [data-theme="dark"] .comparison-card { background: #1e293b; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .comparison-card.typical { border-color: #334155; } [data-theme="dark"] .price-item { border-bottom-color: #334155; } [data-theme="dark"] .price-item .service { color: #e2e8f0; } /* ── Services page ───────────────────────────────────────────── */ [data-theme="dark"] .builder-section { background: #1e293b; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .option-card { background: #1e293b; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .service-option { border-color: #334155; } [data-theme="dark"] .service-option.selected { border-color: var(--primary-orange); background: rgba(255, 171, 2, 0.08); } [data-theme="dark"] .payment-item { border-bottom-color: #334155; } [data-theme="dark"] .section-description { color: #94a3b8; } [data-theme="dark"] .tooltip { background: #1e293b; color: #e2e8f0; border: 1px solid #334155; } /* ── Contact page ────────────────────────────────────────────── */ [data-theme="dark"] .form-container, [data-theme="dark"] .contact-card, [data-theme="dark"] .pricing-reminder, [data-theme="dark"] .next-steps { background: #1e293b; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .value { background: #0f172a; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .contact-method { background: #162033; } [data-theme="dark"] .captcha-group { background: #162033; } [data-theme="dark"] .captcha-input { background: #0f172a !important; color: #e2e8f0 !important; border-color: #334155 !important; } [data-theme="dark"] .captcha-input::placeholder { color: #64748b !important; } [data-theme="dark"] .cta-button-secondary { background: #1e293b; color: #93c5fd; border-color: #4299e1; } [data-theme="dark"] .cta-button-secondary:hover { background: #4299e1; color: white; } /* ── Dashboard: shared across sub-pages ─────────────────────── */ [data-theme="dark"] .filter-select { background: #0f172a; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .filter-select:focus { border-color: #4299e1; outline: none; } [data-theme="dark"] .existing-image-item { background: #162033; } [data-theme="dark"] .editor-toolbar button { background: #162033; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .editor-toolbar button:hover { background: #263450; } [data-theme="dark"] .notification { background: #1e293b; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .notification-message { color: #e2e8f0; } /* ── Dashboard: storage page ─────────────────────────────────── */ [data-theme="dark"] .storage-header { background: #1e293b; } [data-theme="dark"] .overview-card, [data-theme="dark"] .image-management, [data-theme="dark"] .image-card, [data-theme="dark"] .storage-plan { background: #1e293b; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .stat-item { background: #162033; } [data-theme="dark"] .usage-circle::before { background: #1e293b; } [data-theme="dark"] .usage-warning-item, [data-theme="dark"] .deletion-options { background: #162033; border-color: #334155; } [data-theme="dark"] .tips-btn { background: #162033; border-color: #4299e1; color: #93c5fd; } [data-theme="dark"] .breakdown-item:hover { background: #263450; } [data-theme="dark"] .search-input { background: #0f172a; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .help-tooltip { background: #1e293b; color: #e2e8f0; border: 1px solid #334155; } [data-theme="dark"] .help-tooltip::after { border-right-color: #1e293b; } /* ── Dashboard: gallery page ─────────────────────────────────── */ [data-theme="dark"] .tip { background: #162033; } [data-theme="dark"] .upgrade-option { background: #1e293b; border-color: #334155; } [data-theme="dark"] .upgrade-option:hover { background: rgba(128, 90, 213, 0.08); border-color: rgba(128, 90, 213, 0.4); } /* ── Dashboard: worldbuilding page ──────────────────────────── */ [data-theme="dark"] .relationship-suggestions { background: #1e293b; border-color: #334155; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .delete-element-card, [data-theme="dark"] .delete-element-mini { background: #162033; } /* ── Dashboard: events page ──────────────────────────────────── */ [data-theme="dark"] .book-option { background: #1e293b; border-color: #334155; } [data-theme="dark"] .schedule-date-input, [data-theme="dark"] .schedule-time-select { background: #0f172a; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .schedule-help-text { color: #94a3b8; } [data-theme="dark"] .form-section.scheduling-section h4 { color: #93c5fd; } /* ── Themes page ─────────────────────────────────────────────── */ [data-theme="dark"] .custom-feature { background: #1e293b; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .browser-url { background: #0f172a; color: #94a3b8; } /* ── Dashboard: store page ───────────────────────────────────── */ [data-theme="dark"] .package-summary { background: #1e293b; border-color: #334155; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } /* ── Dashboard: social links section ────────────────────────── */ [data-theme="dark"] .social-link-item { background: #1e293b; border-color: #334155; } [data-theme="dark"] .social-item-url { color: #93c5fd; } [data-theme="dark"] .add-social-row { background: #1e293b; border-color: #334155; } [data-theme="dark"] .social-platform-select, [data-theme="dark"] .social-url-input { background: #0f172a; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .add-social-btn { border-color: #334155; color: #93c5fd; } [data-theme="dark"] .add-social-btn:hover { border-color: #60a5fa; background: rgba(96, 165, 250, 0.06); } /* ── Dashboard: theme switcher ──────────────────────────────── */ [data-theme="dark"] .theme-switch-card { background: #1e293b; border-color: #334155; } [data-theme="dark"] .theme-switch-card:hover { border-color: #60a5fa; } [data-theme="dark"] .theme-switch-card.theme-current { background: #0f2a1f; border-color: #48BB78; } [data-theme="dark"] .theme-switch-card.theme-selected:not(.theme-current) { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22); } [data-theme="dark"] .theme-switch-label h4 { color: #93c5fd; } [data-theme="dark"] .theme-switch-label p { color: #94a3b8; } [data-theme="dark"] .theme-preview-btn { background: #334155; color: #e2e8f0; } [data-theme="dark"] .theme-preview-btn:hover:not(:disabled) { background: #475569; } /* ── Dashboard: gallery upload queue ────────────────────────── */ [data-theme="dark"] .queue-item { background: #1e293b; border-color: #334155; } /* ── Dashboard: help card buttons ───────────────────────────── */ [data-theme="dark"] .help-card-btn { background: #1e293b; color: #93c5fd; }