/* ALTiQ Theme Tokens (SSOT) - Default: light - Optional: dark via - System preference is applied by assets/js/theme-init.js when user has not chosen. */ :root { color-scheme: light; /* Design tokens (required set) */ /* Premium light: tinted canvas + white surfaces */ --bg: #f4f7fb; --bg-2: #eef3fa; --surface: #ffffff; --surface-2: #f2f6fb; --text: #0b1220; --muted: #475569; --border: rgba(15, 23, 42, 0.14); --line: rgba(15, 23, 42, 0.16); --primary: #2563eb; --primary-contrast: #ffffff; --link: #1d4ed8; --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 12px 28px rgba(16, 24, 40, 0.10); --focus: 0 0 0 3px rgba(37, 99, 235, 0.28); /* Elevation primitives */ --panel: #ffffff; --panel-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 16px 34px rgba(16, 24, 40, 0.10); --panel-shadow-hover: 0 2px 6px rgba(16, 24, 40, 0.08), 0 22px 46px rgba(16, 24, 40, 0.14); --card-lift: -2px; --card-border-hover: color-mix(in srgb, var(--border) 70%, var(--primary) 30%); /* Modern enhancements (used by assets/css/modern-enhancements.css) */ --card-modern-shadow: var(--panel-shadow); --card-modern-shadow-hover: var(--panel-shadow-hover); --card-modern-border-hover: var(--card-border-hover); /* Typography tokens */ --heading: #0b1220; --label: var(--muted); /* Buttons */ --btn-primary-shadow: 0 10px 22px rgba(37, 99, 235, 0.18); --btn-primary-shadow-hover: 0 12px 28px rgba(37, 99, 235, 0.22); --btn-secondary-bg: rgba(22, 163, 74, 0.08); --btn-secondary-bg-hover: rgba(22, 163, 74, 0.12); --btn-secondary-border: rgba(22, 163, 74, 0.55); --btn-secondary-border-hover: rgba(22, 163, 74, 0.75); --btn-secondary-text: #15803d; --btn-tertiary-bg: rgba(15, 23, 42, 0.04); --btn-tertiary-bg-hover: rgba(15, 23, 42, 0.07); --btn-tertiary-text: var(--text); --btn-tertiary-border: rgba(15, 23, 42, 0.18); --btn-tertiary-border-hover: rgba(15, 23, 42, 0.26); /* Pricing */ --pricing-toggle-active-text: var(--primary-contrast); --pricing-popular-border: rgba(37, 99, 235, 0.55); --pricing-popular-ring: rgba(37, 99, 235, 0.12); --pricing-popular-shadow: 0 16px 40px rgba(16, 24, 40, 0.18); /* Section rhythm */ --section-alt-bg: var(--surface-2); --section-divider: rgba(15, 23, 42, 0.08); /* Seasonal demo sections */ --seasonal-offer-gradient: linear-gradient(135deg, #1e3a8a 0%, #7c2d12 100%); /* Legacy dark-section gradients (tokenized) */ --section-contrast-bg: linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 100%); --section-quickstart-bg: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%); --section-contact-bg: var(--surface-2); /* Legacy Bootstrap "bg-dark" sections (tokenized) */ --section-dark-bg: var(--section-contrast-bg); /* Legacy Bootstrap dark inputs (tokenized) */ --input-dark-bg: var(--surface); --input-dark-text: var(--text); /* Legacy vars used throughout site.css/admin */ --ink: var(--text); --brand: var(--primary); /* Secondary accent used for gradients / hover */ --accent: #16a34a; --accent-contrast: #06121a; /* Misc */ --chip: rgba(255, 255, 255, 0.82); --chip-text: var(--text); --chip-soon-bg: rgba(245, 158, 11, 0.18); --chip-soon-text: #7c2d12; --chip-soon-border: rgba(245, 158, 11, 0.45); /* Brand flourishes */ --brand-dot-glow: rgba(37, 99, 235, 0.35); --hero-glow-1: rgba(37, 99, 235, 0.12); --hero-glow-2: rgba(22, 163, 74, 0.12); /* Quick-start accents (used on homepage) */ --qs-step-1: #21A6FF; --qs-step-1b: #1B8FDB; --qs-step-2: #10b981; --qs-step-2b: #059669; --qs-step-3: #f59e0b; --qs-step-3b: #d97706; --qs-step-4: #8b5cf6; --qs-step-4b: #7c3aed; --qs-step-text: #ffffff; --qs-code: var(--info); /* Admin button hover shadow (preserve shipping look) */ --admin-btn-hover-shadow: 0 6px 20px rgba(34, 197, 94, 0.25); --admin-btn-hover-shadow-strong: 0 6px 20px rgba(126, 196, 107, 0.35); /* Chat widget tokens */ --chat-brand: #8B5CF6; --chat-brand-2: #22D3EE; --chat-ink: #0A1021; --chat-panel: var(--panel); --chat-line: rgba(137, 100, 255, 0.28); --chat-btn-icon: #06121a; --chat-badge-bg: #FF5A5A; --chat-badge-text: #ffffff; --chat-badge-border: #06121a; --chat-badge-shadow: 0 6px 14px rgba(255, 90, 90, 0.50); --chat-shadow: 0 16px 36px rgba(139, 92, 246, 0.35); --chat-panel-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); --chat-header-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(34, 211, 238, 0.28)); --chat-toolbar-bg: rgba(255, 255, 255, 0.08); --chat-toolbar-bg-hover: rgba(255, 255, 255, 0.18); --chat-bot-bg: rgba(255, 255, 255, 0.06); --chat-bot-avatar-bg: rgba(139, 92, 246, 0.18); --chat-bot-avatar-border: rgba(139, 92, 246, 0.45); --chat-bot-avatar-text: #e6e4ff; --chat-user-avatar-bg: rgba(255, 255, 255, 0.14); --chat-user-avatar-border: rgba(255, 255, 255, 0.35); --chat-user-avatar-text: #0b0f1a; --chat-avatar-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); --chat-input-bg: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.14)); --chat-attach-bg: rgba(255, 255, 255, 0.05); --chat-attach-border: rgba(255, 255, 255, 0.12); --chat-attach-bg-hover: rgba(255, 255, 255, 0.12); --chat-attach-text: #ffffff; --chat-textarea-bg: rgba(255, 255, 255, 0.06); --chat-textarea-border: rgba(255, 255, 255, 0.12); --chat-placeholder: rgba(71, 85, 105, 0.75); --chat-focus: 0 0 0 3px rgba(139, 92, 246, 0.18); --chat-focus-border: rgba(139, 92, 246, 0.55); --chat-send-border: rgba(255, 255, 255, 0.12); --chat-send-shadow: 0 6px 16px rgba(139, 92, 246, 0.35); --chat-filepill-bg: rgba(255, 255, 255, 0.02); --chat-filepill-border: rgba(255, 255, 255, 0.06); --chat-filepill-text: var(--muted); --chat-pill-btn-bg: rgba(255, 255, 255, 0.10); --chat-disclaimer-bg: rgba(255, 255, 255, 0.03); --chat-disclaimer-text: #64748b; --chat-disclaimer-link: var(--link); --chat-typing-dot: rgba(37, 99, 235, 0.25); /* Widget embed defaults (used by homepage JS config) */ --widget-brand-color: #6366f1; --widget-bg-color: #1a1d29; /* Modern enhancements bridge (assets/css/modern-enhancements.css) */ --enh-glow-primary: rgba(37, 99, 235, 0.30); --enh-glow-success: rgba(34, 197, 94, 0.30); --enh-glow-warning: rgba(245, 158, 11, 0.30); --enh-gradient-primary: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%); --enh-gradient-success: linear-gradient(135deg, #22C55E 0%, #34D399 100%); --enh-gradient-accent: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%); --enh-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.10); --enh-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15); --enh-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.20); --header-bg: rgba(255, 255, 255, 0.78); --header-backdrop: blur(10px); /* Form + disabled */ --disabled-bg: rgba(15, 23, 42, 0.06); --disabled-text: rgba(15, 23, 42, 0.45); /* Admin page accents (used by static admin HTML styles) */ --info: #21a6ff; --info-2: #1b8fdd; --info-3: #1677bb; --primary-2: #3b82f6; --success: #10b981; --success-2: #22c55e; --success-3: #28a745; --success-4: #20c997; --warning: #f59e0b; --warning-2: #ffc107; --warning-3: #fd7e14; --danger: #dc3545; --danger-2: #ef4444; --danger-3: #d32f2f; --accent-purple: #8b5cf6; --accent-purple-2: #7c3aed; --accent-pink: #ec4899; --brand-paypal: #0070ba; --brand-venmo: #3d95ce; --brand-stripe: #635bff; /* Alpha helpers (used by legacy static HTML styles) */ --overlay-10: rgba(127, 127, 127, 0.10); --overlay-12: rgba(127, 127, 127, 0.12); --overlay-28: rgba(127, 127, 127, 0.28); --overlay-35: rgba(127, 127, 127, 0.35); --overlay-45: rgba(127, 127, 127, 0.45); --glass-02: rgba(255, 255, 255, 0.02); --glass-03: rgba(255, 255, 255, 0.03); --glass-04: rgba(255, 255, 255, 0.04); --glass-05: rgba(255, 255, 255, 0.05); --glass-06: rgba(255, 255, 255, 0.06); --glass-08: rgba(255, 255, 255, 0.08); --glass-10: rgba(255, 255, 255, 0.10); --glass-12: rgba(255, 255, 255, 0.12); --glass-20: rgba(255, 255, 255, 0.20); --glass-40: rgba(255, 255, 255, 0.40); --shadow-black-10: rgba(0, 0, 0, 0.10); --shadow-black-20: rgba(0, 0, 0, 0.20); --shadow-black-25: rgba(0, 0, 0, 0.25); --shadow-black-30: rgba(0, 0, 0, 0.30); --shadow-black-40: rgba(0, 0, 0, 0.40); --shadow-black-50: rgba(0, 0, 0, 0.50); --shadow-black-55: rgba(0, 0, 0, 0.55); --shadow-black-80: rgba(0, 0, 0, 0.80); --tint-info-08: rgba(33, 166, 255, 0.08); --tint-info-10: rgba(33, 166, 255, 0.10); --tint-info-12: rgba(33, 166, 255, 0.12); --tint-info-14: rgba(33, 166, 255, 0.14); --tint-info-20: rgba(33, 166, 255, 0.20); --tint-info-25: rgba(33, 166, 255, 0.25); --tint-info-30: rgba(33, 166, 255, 0.30); --tint-info-40: rgba(33, 166, 255, 0.40); --tint-info-50: rgba(33, 166, 255, 0.50); --tint-info-55: rgba(33, 166, 255, 0.55); --tint-success-05: rgba(16, 185, 129, 0.05); --tint-success-10: rgba(16, 185, 129, 0.10); --tint-success-30: rgba(16, 185, 129, 0.30); --tint-success-12: rgba(40, 167, 69, 0.10); --tint-warning-05: rgba(245, 158, 11, 0.05); --tint-warning-10: rgba(245, 158, 11, 0.10); --tint-warning-15: rgba(255, 193, 7, 0.15); --tint-warning-35: rgba(255, 193, 7, 0.35); --tint-accent-05: rgba(139, 92, 246, 0.05); --tint-accent-10: rgba(139, 92, 246, 0.10); --tint-danger-10: rgba(220, 53, 69, 0.10); /* Common UI gradients */ --btn-brand-bg: linear-gradient(135deg, var(--info) 0%, var(--info-2) 100%); --btn-brand-bg-hover: linear-gradient(135deg, var(--info-2) 0%, var(--info-3) 100%); --password-meter-track: rgba(15, 23, 42, 0.18); --password-strength-weak: var(--danger); --password-strength-fair: var(--warning-3); --password-strength-good: var(--warning-2); --password-strength-strong: var(--success-3); --password-strength-very-strong: var(--success-4); /* Standalone AURA web chat (aura/index.html) */ --aura-input-bar-bg: var(--surface); --aura-input-field-bg: var(--bg); --aura-typing-dot: #7aa7ff; /* Print-safe constants */ --print-paper: #ffffff; --print-ink: #000000; --admin-modal-bg: var(--panel); --admin-modal-border: var(--border); --admin-modal-divider: rgba(15, 23, 42, 0.08); --admin-section-bg: var(--panel); --admin-section-border: rgba(15, 23, 42, 0.12); --admin-row-divider: rgba(15, 23, 42, 0.06); --admin-info-box-bg: color-mix(in srgb, var(--info) 14%, var(--surface)); --admin-preview-bg: #f5f5f5; --admin-deep-bg: #1a2332; --admin-blue-1: #1e90ff; --admin-blue-2: #1c7ed6; --admin-blue-3: #1a8acc; --admin-code-bg: #0b1220; --admin-code-text: #e6f3ff; --admin-code-border: rgba(37, 99, 235, 0.25); --admin-input-bg: var(--surface); --admin-input-border: var(--border); --admin-input-text: var(--text); --admin-input-muted: var(--muted); --admin-badge-bg: rgba(15, 23, 42, 0.06); --admin-badge-text: var(--muted); --btn-close-filter: none; } [data-theme="dark"] { color-scheme: dark; /* Design tokens (required set) */ --bg: #0b1011; --bg-2: #12181a; --surface: #12181a; --surface-2: #0f1416; --text: #e8f1f2; /* Keep dark mode visually identical to current shipping styles */ --muted: #9fb0b7; --border: rgba(255, 255, 255, 0.10); --line: rgba(255, 255, 255, 0.12); --primary: #2563eb; --primary-contrast: #ffffff; --link: #6ec8ff; --shadow: 0 16px 40px rgba(0, 0, 0, 0.55); --focus: 0 0 0 3px rgba(33, 166, 255, 0.35); --panel: rgba(18, 24, 26, 0.92); --panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 30px rgba(0, 0, 0, 0.35); --panel-shadow-hover: var(--panel-shadow); --card-lift: 0px; --card-border-hover: var(--border); --card-modern-shadow: none; --card-modern-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.20); --card-modern-border-hover: rgba(255, 255, 255, 0.20); --heading: #e6f3f7; --ink: #dde7ea; --label: #8ea2aa; --btn-primary-shadow: none; --btn-primary-shadow-hover: none; --btn-secondary-bg: transparent; --btn-secondary-bg-hover: transparent; --btn-secondary-border: var(--accent); --btn-secondary-border-hover: var(--accent); --btn-secondary-text: var(--accent); --btn-tertiary-bg: rgba(255, 255, 255, 0.06); --btn-tertiary-bg-hover: rgba(255, 255, 255, 0.15); --btn-tertiary-text: #ffffff; --btn-tertiary-border: rgba(255, 255, 255, 0.25); --btn-tertiary-border-hover: rgba(255, 255, 255, 0.35); --pricing-toggle-active-text: #06121a; --pricing-popular-border: rgba(33, 166, 255, 0.60); --pricing-popular-ring: rgba(33, 166, 255, 0.12); --pricing-popular-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); --section-alt-bg: transparent; --section-divider: transparent; --seasonal-offer-gradient: linear-gradient(135deg, #1e3a8a 0%, #7c2d12 100%); /* Keep legacy dark-section gradients visually identical */ --section-contrast-bg: linear-gradient(180deg, #0D1315 0%, #0B1011 100%); --section-quickstart-bg: #060E13; --section-contact-bg: #0A0F10; /* Keep Bootstrap bg-dark sections visually identical */ --section-dark-bg: #212529; /* Keep Bootstrap dark inputs visually identical */ --input-dark-bg: #212529; --input-dark-text: #f8f9fa; --accent: #22c55e; --accent-contrast: #06121a; --chip: rgba(255, 255, 255, 0.05); --chip-text: #d7e3e8; --chip-soon-bg: rgba(245, 158, 11, 0.18); --chip-soon-text: #f1d084; --chip-soon-border: rgba(245, 158, 11, 0.35); --brand-dot-glow: rgba(33, 166, 255, 0.60); --hero-glow-1: rgba(33, 166, 255, 0.12); --hero-glow-2: rgba(126, 196, 107, 0.12); /* Quick-start accents (preserve shipping look) */ --qs-step-1: #21A6FF; --qs-step-1b: #1B8FDB; --qs-step-2: #10b981; --qs-step-2b: #059669; --qs-step-3: #f59e0b; --qs-step-3b: #d97706; --qs-step-4: #8b5cf6; --qs-step-4b: #7c3aed; --qs-step-text: #ffffff; --qs-code: var(--info); /* Chat widget tokens (preserve current dark look) */ --chat-panel: #0D1217; --chat-header-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(34, 211, 238, 0.28)); --chat-badge-shadow: 0 6px 14px rgba(255, 90, 90, 0.50); --chat-bot-avatar-text: #e6e4ff; --chat-avatar-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); --chat-attach-text: #ffffff; --chat-send-border: rgba(255, 255, 255, 0.12); --chat-send-shadow: 0 6px 16px rgba(139, 92, 246, 0.35); --chat-placeholder: rgba(232, 241, 242, 0.65); --chat-disclaimer-text: #A8B7C3; --chat-disclaimer-link: #A8D4FF; --chat-typing-dot: #cfe9ff; --widget-brand-color: #6366f1; --widget-bg-color: #1a1d29; /* Modern enhancements bridge (keeps current feel) */ --enh-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.20); --enh-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25); --enh-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35); --header-bg: rgba(9, 12, 13, 0.72); --header-backdrop: blur(10px); --disabled-bg: rgba(255, 255, 255, 0.08); --disabled-text: #9fb0b7; --info: #21a6ff; --info-2: #1b8fdd; --info-3: #1677bb; --primary-2: #3b82f6; --success: #10b981; --success-2: #22c55e; --success-3: #28a745; --success-4: #20c997; --warning: #f59e0b; --warning-2: #ffc107; --warning-3: #fd7e14; --danger: #dc3545; --danger-2: #ef4444; --danger-3: #d32f2f; --accent-purple: #8b5cf6; --accent-purple-2: #7c3aed; --accent-pink: #ec4899; --brand-paypal: #0070ba; --brand-venmo: #3d95ce; --brand-stripe: #635bff; --overlay-10: rgba(127, 127, 127, 0.10); --overlay-12: rgba(127, 127, 127, 0.12); --overlay-28: rgba(127, 127, 127, 0.28); --overlay-35: rgba(127, 127, 127, 0.35); --overlay-45: rgba(127, 127, 127, 0.45); --glass-02: rgba(255, 255, 255, 0.02); --glass-03: rgba(255, 255, 255, 0.03); --glass-04: rgba(255, 255, 255, 0.04); --glass-05: rgba(255, 255, 255, 0.05); --glass-06: rgba(255, 255, 255, 0.06); --glass-08: rgba(255, 255, 255, 0.08); --glass-10: rgba(255, 255, 255, 0.10); --glass-12: rgba(255, 255, 255, 0.12); --glass-20: rgba(255, 255, 255, 0.20); --glass-40: rgba(255, 255, 255, 0.40); --shadow-black-10: rgba(0, 0, 0, 0.10); --shadow-black-20: rgba(0, 0, 0, 0.20); --shadow-black-25: rgba(0, 0, 0, 0.25); --shadow-black-30: rgba(0, 0, 0, 0.30); --shadow-black-40: rgba(0, 0, 0, 0.40); --shadow-black-50: rgba(0, 0, 0, 0.50); --shadow-black-55: rgba(0, 0, 0, 0.55); --shadow-black-80: rgba(0, 0, 0, 0.80); --tint-info-08: rgba(33, 166, 255, 0.08); --tint-info-10: rgba(33, 166, 255, 0.10); --tint-info-12: rgba(33, 166, 255, 0.12); --tint-info-14: rgba(33, 166, 255, 0.14); --tint-info-20: rgba(33, 166, 255, 0.20); --tint-info-25: rgba(33, 166, 255, 0.25); --tint-info-30: rgba(33, 166, 255, 0.30); --tint-info-40: rgba(33, 166, 255, 0.40); --tint-info-50: rgba(33, 166, 255, 0.50); --tint-info-55: rgba(33, 166, 255, 0.55); --tint-success-05: rgba(16, 185, 129, 0.05); --tint-success-10: rgba(16, 185, 129, 0.10); --tint-success-30: rgba(16, 185, 129, 0.30); --tint-success-12: rgba(40, 167, 69, 0.10); --tint-warning-05: rgba(245, 158, 11, 0.05); --tint-warning-10: rgba(245, 158, 11, 0.10); --tint-warning-15: rgba(255, 193, 7, 0.15); --tint-warning-35: rgba(255, 193, 7, 0.35); --tint-accent-05: rgba(139, 92, 246, 0.05); --tint-accent-10: rgba(139, 92, 246, 0.10); --tint-danger-10: rgba(220, 53, 69, 0.10); --btn-brand-bg: linear-gradient(135deg, var(--info) 0%, var(--info-2) 100%); --btn-brand-bg-hover: linear-gradient(135deg, var(--info-2) 0%, var(--info-3) 100%); --password-meter-track: #3A424F; --password-strength-weak: var(--danger); --password-strength-fair: var(--warning-3); --password-strength-good: var(--warning-2); --password-strength-strong: var(--success-3); --password-strength-very-strong: var(--success-4); --aura-input-bar-bg: #0a0f10; --aura-input-field-bg: #0f1618; --aura-typing-dot: #7aa7ff; --print-paper: #ffffff; --print-ink: #000000; --admin-modal-bg: #0d1315; --admin-modal-border: rgba(255, 255, 255, 0.20); --admin-modal-divider: rgba(255, 255, 255, 0.10); --admin-section-bg: #0b1011; --admin-section-border: rgba(255, 255, 255, 0.10); --admin-row-divider: rgba(255, 255, 255, 0.05); --admin-info-box-bg: #1e3a5f; --admin-preview-bg: #f5f5f5; --admin-deep-bg: #1a2332; --admin-blue-1: #1e90ff; --admin-blue-2: #1c7ed6; --admin-blue-3: #1a8acc; --admin-code-bg: #000000; --admin-code-text: #e9eef7; --admin-code-border: rgba(255, 255, 255, 0.12); --admin-input-bg: #2a323e; --admin-input-border: rgba(255, 255, 255, 0.10); --admin-input-text: #e9eef7; --admin-input-muted: #8e95a5; --admin-badge-bg: #2a323e; --admin-badge-text: #9ba4b5; --btn-close-filter: invert(1) grayscale(100%); } .btn-close-white { filter: var(--btn-close-filter) !important; } /* Global base wiring */ html, body { background: var(--bg); color: var(--text); } a { color: var(--link); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--focus); } /* Bootstrap-ish fixes to make "dark"-named components theme-aware */ .navbar, .site-header { background: var(--header-bg) !important; backdrop-filter: var(--header-backdrop); } .navbar .navbar-brand, .navbar .nav-link, .navbar .navbar-text { color: var(--text) !important; } .navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--link) !important; } /* Navbar hamburger: token-driven so it’s visible in Light + Dark (HTML uses navbar-dark, but header background is theme-tokenized). */ .navbar .navbar-toggler { color: var(--link) !important; border-color: var(--border) !important; background: var(--btn-tertiary-bg) !important; border-radius: 12px; } .navbar .navbar-toggler:hover, .navbar .navbar-toggler:focus { background: var(--btn-tertiary-bg-hover) !important; } .navbar .navbar-toggler:focus { box-shadow: var(--focus) !important; } .navbar .navbar-toggler-icon { background-color: transparent !important; background-image: linear-gradient(var(--link), var(--link)), linear-gradient(var(--link), var(--link)), linear-gradient(var(--link), var(--link)) !important; background-position: 50% 35%, 50% 50%, 50% 65% !important; background-size: 70% 2.25px, 70% 2.25px, 70% 2.25px !important; background-repeat: no-repeat !important; } .dropdown-menu, .dropdown-menu-dark { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow); } .dropdown-item, .dropdown-menu-dark .dropdown-item { color: var(--text) !important; } .dropdown-item:hover, .dropdown-item:focus, .dropdown-menu-dark .dropdown-item:hover, .dropdown-menu-dark .dropdown-item:focus { background: rgba(127, 127, 127, 0.15) !important; } .dropdown-divider { border-top: 1px solid var(--border) !important; } .btn-outline-light { color: var(--text) !important; border-color: var(--border) !important; } .btn-outline-light:hover, .btn-outline-light:focus { background: rgba(127, 127, 127, 0.15) !important; } /* Legacy adapters: make Bootstrap "dark" utilities theme-aware without changing dark mode visuals */ .section.bg-dark, .section.bg-black { background: var(--section-dark-bg) !important; } html[data-theme="light"] .section.bg-dark, html[data-theme="light"] .section.bg-black { color: var(--text) !important; } .form-control.bg-dark, .form-select.bg-dark, textarea.form-control.bg-dark, .form-control.bg-black, .form-select.bg-black, textarea.form-control.bg-black { background-color: var(--input-dark-bg) !important; color: var(--input-dark-text) !important; border-color: var(--border) !important; } html[data-theme="light"] .text-light { color: var(--text) !important; } /* Dark mode: improve radio/checkbox visibility (Bootstrap + native inputs) */ html[data-theme="dark"] .form-check-input, html[data-theme="dark"] input[type="checkbox"], html[data-theme="dark"] input[type="radio"] { accent-color: var(--link); } html[data-theme="dark"] .form-check-input { background-color: var(--surface-2); border-color: rgba(255, 255, 255, 0.45); } html[data-theme="dark"] .form-check-input:focus { border-color: var(--link); box-shadow: var(--focus); } html[data-theme="dark"] .form-check-input:checked { background-color: var(--link); border-color: var(--link); } html[data-theme="dark"] .form-check-input:disabled { opacity: 0.6; } /* Theme toggle button */ .altiq-theme-toggle { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; user-select: none; } .altiq-theme-toggle:hover { filter: brightness(1.03); } .altiq-theme-toggle .bi { font-size: 1.05rem; line-height: 1; } /* Floating toggle (auto-inserted by theme.js if a page has no toggle markup) */ .altiq-theme-fab { position: fixed; right: 14px; bottom: 14px; z-index: 9999; box-shadow: var(--shadow); } @media (prefers-reduced-motion: no-preference) { .altiq-theme-fab { transition: transform 120ms ease, filter 120ms ease; } .altiq-theme-fab:hover { transform: translateY(-1px); } } /* Admin page helpers */ .admin-content { color: var(--text); } .admin-content .settings-group, .admin-content .stat-card, .admin-content .knowledge-item { background: var(--surface); border-color: var(--border); } /* Theme-aware Bootstrap tables for admin UI (avoid hardcoded table-dark in light mode) */ .admin-content .admin-table { --bs-table-bg: var(--surface); --bs-table-color: var(--text); --bs-table-border-color: var(--admin-row-divider); --bs-table-striped-bg: var(--admin-badge-bg); --bs-table-striped-color: var(--text); --bs-table-hover-bg: color-mix(in srgb, var(--info) 10%, var(--surface)); --bs-table-hover-color: var(--text); border: 1px solid var(--admin-section-border); } .admin-content .admin-table thead th { color: var(--heading); border-bottom-color: var(--admin-row-divider); } /* Admin secondary action buttons (enterprise-neutral) */ .btn-admin-action { background: var(--btn-tertiary-bg); color: var(--btn-tertiary-text); border: 1px solid var(--btn-tertiary-border); } .btn-admin-action:hover, .btn-admin-action:focus { background: var(--btn-tertiary-bg-hover); border-color: var(--btn-tertiary-border-hover); color: var(--btn-tertiary-text); box-shadow: var(--focus); } /* Bootstrap variable alignment (improves native Bootstrap components in light mode) */ :root { --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-secondary-color: var(--muted); --bs-secondary-bg: var(--surface-2); --bs-tertiary-bg: var(--surface-2); --bs-border-color: var(--border); --bs-card-bg: var(--panel); --bs-card-border-color: var(--border); --bs-link-color: var(--link); --bs-link-hover-color: var(--link); --bs-heading-color: var(--heading); --bs-emphasis-color: var(--text); --bs-form-control-bg: var(--surface); --bs-form-control-color: var(--text); --bs-form-control-border-color: var(--border); --bs-modal-bg: var(--surface); --bs-modal-border-color: var(--border); --bs-dropdown-bg: var(--surface); --bs-dropdown-border-color: var(--border); --bs-table-color: var(--text); --bs-table-bg: transparent; }