/* ================================================================ BIMO AI — DARK MODE OVERRIDES (data-theme="dark" on ) Tokens in variables.css handle background/text/border/surface. This file only handles structural overrides that tokens cannot: glass effects, specific gradient backgrounds, animated borders. ================================================================ */ /* ── Header ─────────────────────────────────────────────────── */ [data-theme="dark"] .top-header { background: var(--color-header-bg); border-bottom-color: var(--color-border); } /* ── Credits button — dark variant ─────────────────────────── */ [data-theme="dark"] .credits-btn.header-action-btn { background: linear-gradient(160deg, #1e1a10 0%, #181308 100%) padding-box, linear-gradient( 148deg, rgba(220, 174, 56, 0.85) 0%, rgba(175, 132, 40, 0.32) 50%, rgba(132, 95, 18, 0.62) 100% ) border-box; color: #dfc05a; box-shadow: none; } [data-theme="dark"] .credits-btn.header-action-btn::before { background: linear-gradient( 90deg, transparent, rgba(240, 210, 100, 0.55), transparent ); } [data-theme="dark"] .credits-btn.header-action-btn:hover { opacity: 0.88; box-shadow: none; } [data-theme="dark"] .credits-btn.header-action-btn .header-action-btn__icon, [data-theme="dark"] .credits-btn.header-action-btn .header-action-btn__plus { color: #c89e28; } [data-theme="dark"] .credits-btn.header-action-btn .header-action-btn__text { color: #dfc05a; } /* ── My Tools featured box ───────────────────────────────────── */ [data-theme="dark"] #bimoToolsDropdown .featured-box { background: radial-gradient(circle at top left, rgba(var(--color-primary-rgb), 0.09), transparent 34%), radial-gradient(circle at bottom right, rgba(var(--color-primary-rgb), 0.05), transparent 34%), var(--color-surface-2); } /* ── Generator hero card ─────────────────────────────────────── */ [data-theme="dark"] .generate-lp-card-wrapper { background: conic-gradient(from var(--angle), transparent 70%, rgba(var(--color-primary-rgb), 0.45), var(--color-primary), rgba(var(--color-primary-rgb), 0.45)); } [data-theme="dark"] .generate-lp-card { background: radial-gradient(ellipse at top right, rgba(var(--color-primary-rgb), 0.08), transparent 42%), radial-gradient(ellipse at bottom left, rgba(var(--color-primary-rgb), 0.04), transparent 42%), var(--color-surface); box-shadow: none; } [data-theme="dark"] .generate-ai-badge { background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.12) 0%, rgba(var(--color-primary-rgb), 0.06) 100%); border-color: rgba(var(--color-primary-rgb), 0.28); } /* ── Nav primary link ────────────────────────────────────────── */ [data-theme="dark"] .nav-link-primary { background: linear-gradient(180deg, rgba(var(--color-primary-rgb), 0.15) 0%, rgba(var(--color-primary-rgb), 0.08) 100%) !important; border-color: rgba(var(--color-primary-rgb), 0.28) !important; } [data-theme="dark"] .nav-link-primary:hover { background: linear-gradient(180deg, rgba(var(--color-primary-rgb), 0.22) 0%, rgba(var(--color-primary-rgb), 0.12) 100%) !important; } /* ── Settings panel header ───────────────────────────────────── */ [data-theme="dark"] .top-title-setting { background: rgba(22, 25, 32, 0.9); border-bottom-color: var(--color-border); } /* ── Mobile sidebar overlay ──────────────────────────────────── */ [data-theme="dark"] .sidebar-overlay { background: rgba(0, 0, 0, 0.55); } /* ── Sidebar logout danger hover ─────────────────────────────── */ [data-theme="dark"] .sidebar-logout:hover { background: rgba(var(--color-primary-rgb), 0.0); background: rgba(201, 75, 85, 0.12); color: #e07a82; } /* ── Project menu context ────────────────────────────────────── */ [data-theme="dark"] .sidebar-project-menu { background: var(--color-surface); border-color: var(--color-border); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.30); } /* ── Skeleton shimmer ────────────────────────────────────────── */ [data-theme="dark"] .dashboard-skeleton__block, [data-theme="dark"] .dashboard-skeleton__label, [data-theme="dark"] .dashboard-skeleton__item, [data-theme="dark"] .dashboard-skeleton__pill, [data-theme="dark"] .dashboard-skeleton__avatar, [data-theme="dark"] .dashboard-skeleton__action, [data-theme="dark"] .dashboard-skeleton__chip, [data-theme="dark"] .dashboard-skeleton__title, [data-theme="dark"] .dashboard-skeleton__copy, [data-theme="dark"] .dashboard-skeleton__note, [data-theme="dark"] .dashboard-skeleton__button, [data-theme="dark"] .dashboard-skeleton__preview-badge, [data-theme="dark"] .dashboard-skeleton__preview-title, [data-theme="dark"] .dashboard-skeleton__preview-copy, [data-theme="dark"] .dashboard-skeleton__preview-progress, [data-theme="dark"] .dashboard-skeleton__preview-line, [data-theme="dark"] .dashboard-skeleton__settings-title, [data-theme="dark"] .dashboard-skeleton__settings-line, [data-theme="dark"] .dashboard-skeleton__settings-field, [data-theme="dark"] .dashboard-skeleton__feature, [data-theme="dark"] .dashboard-skeleton__settings-toggle { background: linear-gradient(180deg, var(--color-surface-3) 0%, var(--color-surface-2) 100%); } [data-theme="dark"] .dashboard-skeleton__block::before, [data-theme="dark"] .dashboard-skeleton__label::before, [data-theme="dark"] .dashboard-skeleton__item::before, [data-theme="dark"] .dashboard-skeleton__pill::before, [data-theme="dark"] .dashboard-skeleton__avatar::before, [data-theme="dark"] .dashboard-skeleton__action::before, [data-theme="dark"] .dashboard-skeleton__chip::before, [data-theme="dark"] .dashboard-skeleton__title::before, [data-theme="dark"] .dashboard-skeleton__copy::before, [data-theme="dark"] .dashboard-skeleton__note::before, [data-theme="dark"] .dashboard-skeleton__button::before, [data-theme="dark"] .dashboard-skeleton__preview-badge::before, [data-theme="dark"] .dashboard-skeleton__preview-title::before, [data-theme="dark"] .dashboard-skeleton__preview-copy::before, [data-theme="dark"] .dashboard-skeleton__preview-progress::before, [data-theme="dark"] .dashboard-skeleton__preview-line::before, [data-theme="dark"] .dashboard-skeleton__settings-title::before, [data-theme="dark"] .dashboard-skeleton__settings-line::before, [data-theme="dark"] .dashboard-skeleton__settings-field::before, [data-theme="dark"] .dashboard-skeleton__feature::before, [data-theme="dark"] .dashboard-skeleton__settings-toggle::before { background: linear-gradient(90deg, transparent 0%, var(--color-skeleton-shine) 50%, transparent 100%); } /* ── Form inputs ─────────────────────────────────────────────── */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="number"], [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--color-surface-2); border-color: var(--color-border-strong); color: var(--color-text); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--color-text-faint); } /* ── Reward popup ────────────────────────────────────────────── */ [data-theme="dark"] .reward-popup-overlay { background: var(--color-overlay); } [data-theme="dark"] .reward-popup { background: var(--color-surface); border-color: var(--color-border); } /* ── My Tools dropdown ───────────────────────────────────────── */ [data-theme="dark"] #bimoToolsDropdown .dropdown-menu { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); } /* ── Profile menu ────────────────────────────────────────────── */ [data-theme="dark"] .profile-menu { background: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-panel); } /* ── Settings overlay ────────────────────────────────────────── */ [data-theme="dark"] .settings-overlay { background: rgba(0, 0, 0, 0.6); } /* ── Mobile FAB skeleton ─────────────────────────────────────── */ [data-theme="dark"] .dashboard-skeleton__content::after { background: linear-gradient(180deg, var(--color-dark-hover) 0%, var(--color-dark-elevated) 100%); } /* ── Settings panel — bottom sheet modal ─────────────────────── */ [data-theme="dark"] .box-camera-gallery { background: var(--color-surface-2); border-top: 1px solid var(--color-border); } [data-theme="dark"] .box-camera-gallery h5 { color: var(--color-text); } [data-theme="dark"] .box-camera-gallery .line-drag-drop { background: var(--color-border-strong); } /* ── Settings panel — image source choices ───────────────────── */ [data-theme="dark"] .boxes-choising { border-color: var(--color-border); background: transparent; } [data-theme="dark"] .boxes-choising:hover { background: rgba(var(--color-primary-rgb), 0.06); border-color: rgba(var(--color-primary-rgb), 0.22); } [data-theme="dark"] .boxes-choising .left_icon { background: var(--color-surface-3); } /* ── Settings panel — language/country dropdown ──────────────── */ [data-theme="dark"] .box_data { background: var(--color-surface-2); border-color: var(--color-border-strong); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.40); } [data-theme="dark"] .box_searching { border-bottom-color: var(--color-border); } [data-theme="dark"] .box_searching input { background: transparent; color: var(--color-text); } [data-theme="dark"] .data_here { color: var(--color-text); } [data-theme="dark"] .data_here:hover, [data-theme="dark"] .data_here.active_data_hare { background: rgba(var(--color-primary-rgb), 0.1); } /* ── Settings panel — drag overlay ──────────────────────────── */ [data-theme="dark"] .upload_drag_overlay { background: rgba(18, 21, 28, 0.92); } /* ── Settings panel — product output card ────────────────────── */ [data-theme="dark"] .output { background: var(--color-surface-2); border-color: var(--color-border); } [data-theme="dark"] .output .product_img { background: var(--color-surface-3); } [data-theme="dark"] .output .contain_content_default { border-left-color: var(--color-border); } /* ── Settings panel — upload box ─────────────────────────────── */ [data-theme="dark"] .upload_box { border-color: rgba(var(--color-primary-rgb), 0.35); background: rgba(var(--color-primary-rgb), 0.07); } [data-theme="dark"] .upload_box:hover { background: rgba(var(--color-primary-rgb), 0.11); } /* ── Settings panel — section body areas ────────────────────── */ [data-theme="dark"] .offerSectionBody, [data-theme="dark"] .extraInfoWrap, [data-theme="dark"] .manualColorWrap { background-color: var(--color-surface-2); border-color: var(--color-border); } [data-theme="dark"] .offerSavedCard { background-color: var(--color-surface-2); border-color: var(--color-border); } [data-theme="dark"] .brand-logo-preview-card { background: var(--color-surface-2); border-color: var(--color-border); } [data-theme="dark"] .s8-content-inner { background: var(--color-surface-2); border-color: var(--color-border); } /* ── Settings panel — brand mode switch ─────────────────────── */ [data-theme="dark"] .brand-mode-switch { background: var(--color-surface-3); border-color: var(--color-border); } [data-theme="dark"] .brand-mode-btn.active, [data-theme="dark"] .brand-mode-btn[aria-pressed="true"] { background: var(--color-surface-2); box-shadow: 0 1px 3px rgba(0,0,0,0.25); } /* ── Settings panel — color picker overlay ───────────────────── */ [data-theme="dark"] .colorPickerOverlay { background: rgba(0, 0, 0, 0.5); } [data-theme="dark"] .colorPickerPanel { background: var(--color-surface-2); border-color: var(--color-border); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .openColorPickerBtn, [data-theme="dark"] .closeColorPickerBtn { background-color: var(--color-surface-3); border-color: var(--color-border); color: var(--color-text); }