/* ============================================================================ site-theme.css Light/dark theme system for contact.html, sib_contact.html, and sib_mcreg.html. Default = dark (matches the current look). When ``, the rules below revert the dark overrides and produce an index.html-style look — white wrapper, light-gray top-bar, light header, default page-title, white form chrome — while the footer always stays dark. ============================================================================ */ /* Honor the [hidden] attribute. Bootstrap's `input[type="file"] { display: block }` silently overrides the user-agent display:none for ``, leaking the unstyled "Choose File" button into the debug toolbar. */ [hidden] { display: none !important; } /* ── Theme tokens ────────────────────────────────────────────────────────── */ :root, [data-theme="dark"] { --th-page-bg: #1a1a1a; --th-page-fg: #e0e0e0; --th-link-fg: #4b67d6; /* accent-blue light — same shade used in the contact form fields below */ --th-accent-light: #4b67d6; /* alias for general accent text/icons in dark mode */ --th-card-bg: #2d2d2d; --th-card-border: #444; --th-divider: #333; --th-topbar-bg: #333; --th-topbar-fg: #bbb; --th-topbar-hover-bg: #2d3340; --th-topbar-hover-fg: #fff; --th-header-bg: #484848; --th-header-fg: #ccc; --th-pmenu-hover-bg: #001689; --th-pmenu-hover-fg: #fff; --th-pmenu-dd-bg: #3a3a3a; --th-pmenu-dd-fg: #bbb; --th-pmenu-dd-hover-bg: #444; --th-pmenu-dd-hover-fg: #fff; --th-pmenu-dd-border: #4a4a4a; --th-pmenu-dd-accent: #2B3389; --th-pagetitle-bg: #606060; --th-pagetitle-fg: #f0f0f0; --th-pagetitle-border: #c8973a; --th-tbdd-bg: #2d2d2d; --th-tbdd-fg: #ccc; --th-tbdd-hover-bg: #383838; --th-tbdd-hover-fg: #fff; --th-tbdd-accent: #1ABC9C; --th-tbdd-border: #444; --th-map-state: #383838; --th-map-active: #4b67d6; /* lighter accent-blue: more visible on dark bg */ --th-map-hover: #5b76e1; --th-map-border: #1a1a1a; --th-map-logo: #4b67d6; /* logo "S" inside Florida SVG (.st2) */ --th-map-text: #ffffff; /* legacy: used for all labels */ --th-map-text-disabled: #ffffff; /* label on disabled states */ --th-map-text-enabled: #ffffff; /* label on enabled (active) states */ --th-map-tip-bg: #2d2d2d; --th-map-tip-fg: #f0f0f0; --th-map-tip-border: #444; /* Form chrome (sib_mcreg) */ --th-form-card: #2d2d2d; --th-form-card-fg: #e0e0e0; --th-form-field: #252525; --th-form-field-fg: #e0e0e0; --th-form-field-border: #3d3d3d; --th-form-tab-bg: #2d2d2d; --th-form-tab-active: #2B3389; --th-form-progress-bg: #353535; --th-form-progress-fill:#2B3389; --th-form-helper: #888; --th-form-section: #252525; } [data-theme="light"] { --th-page-bg: #ffffff; --th-page-fg: #444; --th-link-fg: #001689; --th-accent-light: #001689; /* light theme uses the deep brand blue everywhere */ --th-card-bg: #fafafa; --th-card-border: #e0e0e0; --th-divider: #eeeeee; --th-topbar-bg: #ffffff; --th-topbar-fg: #888; --th-topbar-hover-bg: #EEE; --th-topbar-hover-fg: #333; --th-header-bg: #F9F9F9; --th-header-fg: #333; --th-pmenu-hover-bg: #001689; --th-pmenu-hover-fg: #fff; --th-pmenu-dd-bg: #ffffff; --th-pmenu-dd-fg: #555; --th-pmenu-dd-hover-bg: #F5F5F5; --th-pmenu-dd-hover-fg: #001689; --th-pmenu-dd-border: #eaeaea; --th-pmenu-dd-accent: #1ABC9C; --th-pagetitle-bg: #F5F5F5; --th-pagetitle-fg: #444; --th-pagetitle-border: #c8973a; --th-tbdd-bg: #ffffff; --th-tbdd-fg: #555; --th-tbdd-hover-bg: #F9F9F9; --th-tbdd-hover-fg: #001689; --th-tbdd-accent: #1ABC9C; --th-tbdd-border: #e0e0e0; --th-map-state: #EBECED; --th-map-active: #2B3389; /* deep brand blue reads well on white bg */ --th-map-hover: #264A9A; --th-map-border: #ffffff; --th-map-logo: #264A9A; --th-map-text: #333; --th-map-text-disabled: #333; /* dark text on light-gray disabled states */ --th-map-text-enabled: #ffffff; /* white text on brand-blue active states */ --th-map-tip-bg: #ffffff; --th-map-tip-fg: #333; --th-map-tip-border: #ccc; /* Light forms — page is white, form cards are light grey, inputs are white inside cards */ --th-form-card: #f1f3f6; /* form-card surface (light grey, not pure white) */ --th-form-card-fg: #2a2a2a; --th-form-card-border: #e2e6ec; --th-form-field: #ffffff; /* input bg pops on the grey card */ --th-form-field-fg: #2a2a2a; --th-form-field-border: #cdd2d9; --th-form-tab-bg: #e9edf2; --th-form-tab-active: #2B3389; --th-form-progress-bg: #dde1e7; --th-form-progress-fill:#2B3389; --th-form-helper: #6b7280; --th-form-section: #ffffff; /* fieldset surface (lighter than card) */ } /* ── DARK MODE EXPLICIT OVERRIDES ──────────────────────────────────────── Cover #wrapper bg + the broader #primary-menu selectors that contact.css doesn't address. These were previously inline in sib_mcreg.html. */ [data-theme="dark"] body { background-color: var(--th-page-bg) !important; } [data-theme="dark"] #wrapper { background-color: var(--th-page-bg) !important; box-shadow: none !important; } [data-theme="dark"] #content { background: var(--th-page-bg) !important; } [data-theme="dark"] #primary-menu, [data-theme="dark"] #primary-menu > ul, [data-theme="dark"] #primary-menu > div > ul { background-color: var(--th-header-bg) !important; } /* ── LIGHT MODE OVERRIDES ────────────────────────────────────────────────── */ /* These rules only fire when [data-theme="light"] is on . They beat contact.css's dark !important rules via higher specificity. */ [data-theme="light"] body, [data-theme="light"] #wrapper, [data-theme="light"] #content { background-color: var(--th-page-bg) !important; color: var(--th-page-fg); } [data-theme="light"] #wrapper { box-shadow: none !important; } [data-theme="light"] #primary-menu, [data-theme="light"] #primary-menu > ul, [data-theme="light"] #primary-menu > div > ul { background-color: var(--th-header-bg) !important; } /* Top bar */ [data-theme="light"] #top-bar { background-color: var(--th-topbar-bg) !important; border-bottom-color: #eaeaea !important; } [data-theme="light"] #top-bar, [data-theme="light"] #top-bar a, [data-theme="light"] #top-bar .top-links > ul > li > a { color: var(--th-topbar-fg) !important; } [data-theme="light"] #top-bar .top-links > ul > li:hover { background-color: var(--th-topbar-hover-bg) !important; } [data-theme="light"] #top-bar .top-links > ul > li:hover > a { color: var(--th-topbar-hover-fg) !important; } /* Top-bar dropdown panel */ [data-theme="light"] #top-bar .top-links ul ul { background: var(--th-tbdd-bg); border-top: 1px solid var(--th-tbdd-accent); border-bottom: 1px solid var(--th-tbdd-border); box-shadow: 0 2px 8px rgba(0,0,0,0.12); } [data-theme="light"] #top-bar .top-links ul ul li { border-top: 1px solid var(--th-tbdd-border); } [data-theme="light"] #top-bar .top-links ul ul li:hover { background-color: var(--th-tbdd-hover-bg); } [data-theme="light"] #top-bar .top-links ul ul a { color: var(--th-tbdd-fg); } [data-theme="light"] #top-bar .top-links ul ul li:hover > a { color: var(--th-tbdd-hover-fg); } /* Header / primary menu */ [data-theme="light"] #header, [data-theme="light"] #header-wrap, [data-theme="light"] #header .menu-container { background-color: var(--th-header-bg) !important; border-bottom-color: #eaeaea !important; } [data-theme="light"] #header .menu-item > a, [data-theme="light"] #primary-menu > ul > li > a { color: var(--th-header-fg) !important; } [data-theme="light"] #primary-menu > ul > li:hover > a, [data-theme="light"] #primary-menu > ul > li.current > a { background-color: var(--th-pmenu-hover-bg) !important; color: var(--th-pmenu-hover-fg) !important; } /* Primary-menu dropdown */ [data-theme="light"] #primary-menu ul ul, [data-theme="light"] #primary-menu ul li .mega-menu-content { background-color: var(--th-pmenu-dd-bg) !important; border-color: var(--th-pmenu-dd-border) !important; border-top: 2px solid var(--th-pmenu-dd-accent) !important; box-shadow: 0 8px 24px rgba(0,0,0,.15) !important; } [data-theme="light"] #primary-menu ul ul a { color: var(--th-pmenu-dd-fg) !important; } [data-theme="light"] #primary-menu ul ul li:hover > a { background-color: var(--th-pmenu-dd-hover-bg) !important; color: var(--th-pmenu-dd-hover-fg) !important; } /* Page title */ [data-theme="light"] #page-title { background: var(--th-pagetitle-bg) !important; border-top: 1px solid #eaeaea !important; border-bottom: 3px solid var(--th-pagetitle-border) !important; } [data-theme="light"] #page-title h1 { color: var(--th-pagetitle-fg) !important; } /* contact_new map area */ [data-theme="light"] #cn-back-btn { border-color: #bbb; color: #001689; } [data-theme="light"] #cn-back-btn:hover { background: rgba(0,22,137,0.08); } [data-theme="light"] #region-placeholder { color: #666; border-color: #d0d0d0; background: rgba(0,0,0,0.02); } [data-theme="light"] #region-placeholder .rp-icon { color: #aaa; } /* region-contact rules moved to the cf2 contact-form section below */ [data-theme="light"] #map-tip { background: var(--th-map-tip-bg) !important; color: var(--th-map-tip-fg) !important; border-color: var(--th-map-tip-border) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important; } /* Map state labels — fallback before JS runs. Final per-state color is set by applyMapTheme() in JS so enabled (blue) states get white labels and disabled (light gray) states get dark labels. No !important here so JS wins. */ [data-theme="light"] #map_base svg #text-abb text { fill: var(--th-map-text-disabled); } /* Florida sub-map — light theme path fills */ [data-theme="light"] #cn-fl-svg .st0 { fill: var(--th-map-state) !important; stroke: #C1C1C1 !important; } [data-theme="light"] #cn-fl-svg .st1 { fill: var(--th-map-border) !important; } /* ============================================================================ FORMS — LIGHT THEME (comprehensive) Both forms (sib_mcreg standard inputs, contact cf2-* fields) use the same palette: page is white, card surfaces are LIGHT GREY, inputs are white inside the cards (so they pop). Brand blue stays as the accent. ============================================================================ */ /* Page-level + container animation */ [data-theme="light"] .container { animation: none; } /* Body text + headings */ [data-theme="light"] body { color: #2a2a2a !important; } [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] .subtitle, [data-theme="light"] .cf2-title { color: #2a2a2a !important; } /* ──────────────────────────────────────────────────────────────────────────── sib_mcreg (registration form with tabs) ──────────────────────────────────────────────────────────────────────────── */ /* Language toggle (EN / ES pill) */ [data-theme="light"] .language-toggle { background-color: var(--th-form-card) !important; border: 1px solid var(--th-form-card-border); } [data-theme="light"] .lang-btn { color: #555 !important; background-color: transparent !important; } [data-theme="light"] .lang-btn:hover { background-color: #e3e7ec !important; color: #2a2a2a !important; } [data-theme="light"] .lang-btn.active { background-color: var(--th-form-tab-active) !important; color: #fff !important; } /* Tabs row (COMPANY / VEHICLE / DRIVER / INSURANCE / COMPLIANCE) */ [data-theme="light"] .tab-container { background-color: var(--th-form-tab-bg) !important; border: 1px solid var(--th-form-card-border); border-radius: 8px; } [data-theme="light"] .tab-label { background-color: var(--th-form-card) !important; color: #4b5563 !important; border-color: var(--th-form-card-border) !important; } [data-theme="light"] .tab-label:hover { background-color: #e3e7ec !important; color: #2a2a2a !important; border-color: #c0c6cc !important; } [data-theme="light"] .tab-input:checked + .tab-label, [data-theme="light"] #tab1:checked ~ .tab-container label[for="tab1"], [data-theme="light"] #tab2:checked ~ .tab-container label[for="tab2"], [data-theme="light"] #tab3:checked ~ .tab-container label[for="tab3"], [data-theme="light"] #tab4:checked ~ .tab-container label[for="tab4"], [data-theme="light"] #tab5:checked ~ .tab-container label[for="tab5"], [data-theme="light"] #tab6:checked ~ .tab-container label[for="tab6"] { background-color: var(--th-form-tab-active) !important; color: #fff !important; border-color: var(--th-form-tab-active) !important; } /* Form progress strip — light grey card */ [data-theme="light"] .form-progress { background-color: var(--th-form-card) !important; border: 1px solid var(--th-form-card-border); border-radius: 8px; } [data-theme="light"] .progress-text { color: #4b5563 !important; } [data-theme="light"] .progress-text > span:first-child { color: var(--th-form-tab-active) !important; } [data-theme="light"] .progress-bar { background-color: var(--th-form-progress-bg) !important; } [data-theme="light"] .progress-fill { background-color: var(--th-form-progress-fill) !important; } [data-theme="light"] .save-meta { color: var(--th-form-helper) !important; } /* Tab content panels — LIGHT GREY card (not pure white) */ [data-theme="light"] .tab-content, [data-theme="light"] #content1, [data-theme="light"] #content2, [data-theme="light"] #content3, [data-theme="light"] #content4, [data-theme="light"] #content5, [data-theme="light"] #content6 { background-color: var(--th-form-card) !important; color: var(--th-form-card-fg) !important; border: 1px solid var(--th-form-card-border); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.03); } /* Fieldsets — slightly lighter than the card (white) */ [data-theme="light"] fieldset, [data-theme="light"] .subsection-fieldset { background-color: var(--th-form-section) !important; border: 1px solid var(--th-form-card-border) !important; border-radius: 6px; } [data-theme="light"] fieldset legend, [data-theme="light"] .subsection-fieldset legend { color: #001689 !important; font-weight: 600; background: var(--th-form-section); padding: 0 8px; } /* Labels + helper + required asterisk */ [data-theme="light"] label, [data-theme="light"] .form-group label { color: #001689 !important; } [data-theme="light"] small, [data-theme="light"] .form-group small, [data-theme="light"] .cf2-help { color: var(--th-form-helper) !important; } [data-theme="light"] .required { color: #d97706 !important; } /* Inputs — sib_mcreg standard inputs (white inside grey card) */ [data-theme="light"] input[type="text"], [data-theme="light"] input[type="email"], [data-theme="light"] input[type="tel"], [data-theme="light"] input[type="number"], [data-theme="light"] input[type="date"], [data-theme="light"] input[type="password"], [data-theme="light"] textarea, [data-theme="light"] select { background-color: var(--th-form-field) !important; color: var(--th-form-field-fg) !important; border: 2px solid var(--th-form-field-border) !important; border-radius: 6px; } [data-theme="light"] input:focus, [data-theme="light"] textarea:focus, [data-theme="light"] select:focus { border-color: var(--th-form-tab-active) !important; background-color: var(--th-form-field) !important; box-shadow: 0 0 0 3px rgba(43,51,137,0.14); } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: #9ca3af !important; } /* Webkit autofill (Chrome's yellow override neutralized) */ [data-theme="light"] input:-webkit-autofill, [data-theme="light"] input:-webkit-autofill:hover, [data-theme="light"] input:-webkit-autofill:focus, [data-theme="light"] textarea:-webkit-autofill, [data-theme="light"] select:-webkit-autofill, [data-theme="light"] #registrationForm input:-webkit-autofill, [data-theme="light"] #registrationForm textarea:-webkit-autofill, [data-theme="light"] #registrationForm select:-webkit-autofill { -webkit-text-fill-color: var(--th-form-field-fg) !important; caret-color: var(--th-form-field-fg) !important; background-color: var(--th-form-field) !important; -webkit-box-shadow: 0 0 0 1000px var(--th-form-field) inset !important; box-shadow: 0 0 0 1000px var(--th-form-field) inset !important; } /* Checkboxes + radios */ [data-theme="light"] .checkbox-group label, [data-theme="light"] .radio-group label { color: #2a2a2a !important; } [data-theme="light"] .radio-option { border: 1px solid var(--th-form-field-border); background: var(--th-form-field); color: #444; } [data-theme="light"] .radio-option:has(input:checked), [data-theme="light"] .radio-option.selected { background-color: var(--th-form-tab-active) !important; color: #fff !important; border-color: var(--th-form-tab-active) !important; } /* Navigation buttons (Previous / Next / Submit) */ [data-theme="light"] .nav-btn, [data-theme="light"] #registrationForm button[type="submit"] { background-color: var(--th-form-field) !important; color: #001689 !important; border: 2px solid #001689 !important; border-radius: 6px; } [data-theme="light"] .nav-btn:hover:not(:disabled), [data-theme="light"] #registrationForm button[type="submit"]:hover { background-color: #001689 !important; color: #fff !important; border-color: #001689 !important; } [data-theme="light"] .nav-btn:disabled, [data-theme="light"] button:disabled { background-color: #eef0f3 !important; color: #9ca3af !important; border-color: var(--th-form-card-border) !important; cursor: not-allowed; } /* Auto-save indicator */ [data-theme="light"] .auto-save-indicator { background-color: var(--th-form-field) !important; color: #2a2a2a !important; border: 1px solid var(--th-form-card-border); box-shadow: 0 2px 8px rgba(0,0,0,0.08); } [data-theme="light"] #autoSaveMessage { color: #16a34a !important; } /* Submit overlay */ [data-theme="light"] .submit-overlay { background-color: rgba(255,255,255,0.92) !important; } [data-theme="light"] .submit-overlay-card { background-color: var(--th-form-field) !important; color: #2a2a2a !important; border: 1px solid var(--th-form-card-border); box-shadow: 0 8px 32px rgba(0,0,0,0.15); } [data-theme="light"] #submitOverlayText { color: #2a2a2a !important; } [data-theme="light"] .submit-success-box { background-color: #ecfdf5 !important; color: #065f46 !important; border: 1px solid #a7f3d0; } /* Validation errors */ [data-theme="light"] .validation-error, [data-theme="light"] .cf2-field-error { color: #dc2626 !important; } [data-theme="light"] input.invalid, [data-theme="light"] textarea.invalid, [data-theme="light"] select.invalid { border-color: #dc2626 !important; } [data-theme="light"] .tooltip { color: #d97706 !important; } [data-theme="light"] .tooltip .tooltiptext { background-color: #2a2a2a !important; color: #fff !important; } [data-theme="light"] .char-counter { color: var(--th-form-helper) !important; } /* Debug tools */ [data-theme="light"] .debug-tools { background-color: #fff7ed !important; border: 1px solid #fed7aa !important; } [data-theme="light"] .debug-btn { background-color: var(--th-form-field) !important; border: 1px solid #fb923c !important; color: #c2410c !important; } /* Mobile accordion items */ [data-theme="light"] .mobile-accordion-item { background-color: var(--th-form-card) !important; border: 1px solid var(--th-form-card-border) !important; } [data-theme="light"] .mobile-accordion-trigger { color: #2a2a2a !important; background-color: var(--th-form-card) !important; } [data-theme="light"] #sib-loading-overlay { background: #fafbfc !important; } /* ──────────────────────────────────────────────────────────────────────────── contact form (cf2-* classes — embedded inside contact.html on state click) Matched to sib_mcreg light look: light-grey card + white inputs + brand blue. ──────────────────────────────────────────────────────────────────────────── */ /* The card around the whole form */ [data-theme="light"] .cf2-card { background-color: var(--th-form-card) !important; color: var(--th-form-card-fg) !important; border: 1px solid var(--th-form-card-border) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important; } [data-theme="light"] .cf2-title { color: #2a2a2a !important; } /* Floating-label inputs sit on a WHITE field (popping out of the grey card) */ [data-theme="light"] .cf2-input { background-color: var(--th-form-field) !important; color: var(--th-form-field-fg) !important; border-bottom: 2px solid var(--th-form-field-border) !important; border-radius: 4px 4px 0 0; } [data-theme="light"] .cf2-input:focus { background-color: #ffffff !important; border-bottom-color: var(--th-form-tab-active) !important; box-shadow: 0 2px 0 0 rgba(43,51,137,0.18) !important; } [data-theme="light"] select.cf2-input { background-color: var(--th-form-field) !important; color: var(--th-form-field-fg) !important; } /* Floating label color */ [data-theme="light"] .cf2-label { color: #6b7280 !important; } [data-theme="light"] .cf2-input:focus + .cf2-label, [data-theme="light"] .cf2-input:not(:placeholder-shown) + .cf2-label, [data-theme="light"] .cf2-field-select .cf2-label { color: var(--th-form-tab-active) !important; } /* Leading icon */ [data-theme="light"] .cf2-icon { color: #9ca3af !important; } [data-theme="light"] .cf2-field.cf2-focused .cf2-icon { color: var(--th-form-tab-active) !important; } /* Hint + required */ [data-theme="light"] .cf2-hint { color: var(--th-form-helper) !important; } [data-theme="light"] .cf2-required { color: #dc2626 !important; } /* Has-error label */ [data-theme="light"] .cf2-field.cf2-has-error .cf2-label { color: #dc2626 !important; } [data-theme="light"] .cf2-input.input-error { border-bottom-color: #dc2626 !important; } /* Webkit autofill — light bg/text inside the cf2 inputs */ [data-theme="light"] .cf2-input:-webkit-autofill, [data-theme="light"] .cf2-input:-webkit-autofill:hover, [data-theme="light"] .cf2-input:-webkit-autofill:focus, [data-theme="light"] .cf2-textarea:-webkit-autofill, [data-theme="light"] .cf2-textarea:-webkit-autofill:hover, [data-theme="light"] .cf2-textarea:-webkit-autofill:focus { -webkit-text-fill-color: var(--th-form-field-fg) !important; caret-color: var(--th-form-field-fg) !important; background-color: var(--th-form-field) !important; -webkit-box-shadow: 0 0 0 1000px var(--th-form-field) inset !important; box-shadow: 0 0 0 1000px var(--th-form-field) inset !important; border-bottom: 2px solid var(--th-form-field-border) !important; } [data-theme="light"] .cf2-input:-webkit-autofill:focus { background-color: #fff !important; -webkit-box-shadow: 0 0 0 1000px #fff inset !important; border-bottom-color: var(--th-form-tab-active) !important; } /* reCAPTCHA — undo contact.css's filter:invert that was forcing dark widget */ [data-theme="light"] .cf2-recaptcha-wrap iframe { filter: none !important; } [data-theme="light"] .cf2-recaptcha-wrap iframe img { filter: none !important; } /* Submit button (cf2-btn-send keeps brand blue — already light-friendly) */ [data-theme="light"] .cf2-btn-send { background: #001689 !important; color: #fff !important; box-shadow: 0 2px 6px rgba(0,22,137,0.18) !important; } [data-theme="light"] .cf2-btn-send:hover:not(:disabled) { background: #0a2fb8 !important; box-shadow: 0 4px 14px rgba(0,22,137,0.28) !important; } /* Draft + result banners */ [data-theme="light"] #draft-status.saved { color: #16a34a !important; } [data-theme="light"] #draft-status.restored { color: var(--th-form-tab-active) !important; } [data-theme="light"] #contact-result.success { background: #ecfdf5 !important; border: 1px solid #a7f3d0 !important; color: #065f46 !important; } [data-theme="light"] #contact-result.error { background: #fef2f2 !important; border: 1px solid #fecaca !important; color: #991b1b !important; } /* Region-contact card (top of region panel — contact info + photo) */ [data-theme="light"] #region-contact { color: var(--th-page-fg); border-bottom-color: var(--th-form-card-border); } [data-theme="light"] #region-contact a { color: #001689; } /* ── Theme toggle button (always visible in top-bar, both themes) ───────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 7px 0 7px 12px; /* (44 - 30) / 2 = 7px → vertically centered in 44px-tall top-bar */ padding: 0; background: transparent; border: 1px solid currentColor; border-radius: 50%; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; opacity: 0.7; transition: opacity .15s ease, transform .15s ease, background-color .15s ease; box-sizing: border-box; vertical-align: middle; } .theme-toggle:hover { opacity: 1; transform: scale(1.08); } .theme-toggle:focus-visible { outline: 2px solid var(--th-pmenu-hover-bg); outline-offset: 2px; } .theme-toggle .ti-sun, .theme-toggle .ti-moon { display: none; } [data-theme="dark"] .theme-toggle .ti-sun { display: inline; } /* clicking switches → light */ [data-theme="light"] .theme-toggle .ti-moon { display: inline; } /* clicking switches → dark */ /* Top-bar list-item containing the toggle: no hover bg, no padding */ #top-bar .top-links li.theme-toggle-item, #top-bar .top-links li.theme-toggle-item:hover { background: transparent !important; padding: 0 6px !important; } /* ── Floating theme toggle (visible only on screens where the top-bar is hidden) ── Uses brand blue in both themes so it's clearly visible against any background. */ .theme-toggle-floating { position: fixed; bottom: 16px; right: 16px; z-index: 9000; width: 44px; height: 44px; margin: 0; /* override the top-bar variant's margins */ background: #001689; color: #ffffff; border: none; box-shadow: 0 4px 14px rgba(0,0,0,0.35); font-size: 18px; opacity: 0.94; display: none; /* shown via media query below */ } [data-theme="light"] .theme-toggle-floating { box-shadow: 0 4px 14px rgba(0,22,137,0.30); } .theme-toggle-floating:hover { opacity: 1; transform: scale(1.06); } @media (max-width: 991px) { .theme-toggle-floating { display: inline-flex; } }