/* ============================================================================ 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 [hidden] — Bootstrap's input[type="file"] rule otherwise leaks it. */ [hidden] { display: none !important; } /* color-scheme drives native form controls (checkboxes, scrollbars) to match. */ :root, [data-theme="dark"] { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } /* Kill Bootstrap's white-ish 1px border-bottom on . */ fieldset > legend, legend { border-bottom: 0 !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; color: var(--th-page-fg); /* override style.css's default #555 — too dark on dark bg */ } [data-theme="dark"] #wrapper { background-color: var(--th-page-bg) !important; box-shadow: none !important; color: var(--th-page-fg); } [data-theme="dark"] #content { background: var(--th-page-bg) !important; color: var(--th-page-fg); } /* Canvas's style.css sets `.section { background-color: #fff }` — override in dark mode so the section cards (Why Choose, etc.) don't stay white. */ [data-theme="dark"] .section, [data-theme="dark"] .section.parallax { background-color: var(--th-page-bg) !important; color: var(--th-page-fg); } [data-theme="dark"] .section h1, [data-theme="dark"] .section h2, [data-theme="dark"] .section h3, [data-theme="dark"] .section h4, [data-theme="dark"] .section h5, [data-theme="dark"] .section h6, [data-theme="dark"] .section p, [data-theme="dark"] #content h1, [data-theme="dark"] #content h2, [data-theme="dark"] #content h3, [data-theme="dark"] #content h4, [data-theme="dark"] #content h5, [data-theme="dark"] #content h6, [data-theme="dark"] #content p { color: var(--th-page-fg) !important; } [data-theme="dark"] #content a:not(.button):not(.cf2-btn-send) { color: var(--th-link-fg); } /* Brand-blue text site-wide: Canvas Construction's colors.css paints many text elements `color: #001689` (h1-h6 > span, .team-title span, .btn-link, product prices, etc.). In dark theme they read too dark on the dark page, so swap to the lighter brand blue (#4b67d6). Light theme is unaffected. Excluded by design (still #001689 brand blue in BOTH themes): - #primary-menu hover/current button (site-chrome.css) - .cf2-btn-send (form submit button) - Buttons that use --th-link-fg already (Learn More, Get a Quote) */ [data-theme="dark"] a:not(.button):not(.theme-toggle):not(.cf2-btn-send):not(.nocolor), [data-theme="dark"] h1 > span:not(.nocolor), [data-theme="dark"] h2 > span:not(.nocolor), [data-theme="dark"] h3 > span:not(.nocolor), [data-theme="dark"] h4 > span:not(.nocolor), [data-theme="dark"] h5 > span:not(.nocolor), [data-theme="dark"] h6 > span:not(.nocolor), [data-theme="dark"] .team-title span, [data-theme="dark"] .btn-link, [data-theme="dark"] .product-price ins, [data-theme="dark"] .single-product .product-price, [data-theme="dark"] .pricing-box.best-price .pricing-price, [data-theme="dark"] .heading-block.border-color::after { color: var(--th-link-fg); /* #4b67d6 in dark, #001689 in light (no-op here) */ } /* Top-bar and footer anchors keep their existing dark-theme color (already set by their own rules). The :not() selectors above don't reach them because we anchor on plain `a` which top-bar/footer rules win against via specificity (#top-bar a, #footer a). */ /* Canvas's .promo.promo-light forces white bg — override in dark mode. */ [data-theme="dark"] .promo.promo-light { background-color: var(--th-page-bg) !important; color: var(--th-page-fg) !important; } [data-theme="dark"] .promo.promo-light h1, [data-theme="dark"] .promo.promo-light h2, [data-theme="dark"] .promo.promo-light h3, [data-theme="dark"] .promo.promo-light h4, [data-theme="dark"] .promo.promo-light h5, [data-theme="dark"] .promo.promo-light h6, [data-theme="dark"] .promo.promo-light p, [data-theme="dark"] .promo.promo-light strong { color: var(--th-page-fg) !important; } /* Inline `style="background-color: #f5f4f4"` on a section needs !important to beat. The .section override already does this — but the promo above doesn't have .section class, hence the explicit rule above. */ [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 — bump the page-title-mini h1 size so the page heading reads more prominently. style.css's default of 18px felt small against the hero image and full-width content below. Applies in both themes. */ #page-title.page-title-mini h1 { font-size: 26px; letter-spacing: 1.5px; } /* Intermediate-width header fix (992–1199px). #wrapper is 1000px wide here. The full-size logo (≈ 556px wide at 100px height) + the 7 primary-menu items + trigger collide and the menu wraps to a new line. Shrink the logo height so it stays under ≈ 400px wide and the menu fits beside it. */ @media (min-width: 992px) and (max-width: 1199px) { #header:not(.transparent-header) #logo img { height: 70px !important; } #primary-menu > ul > li > a { padding-left: 10px; padding-right: 10px; } } /* Page-title band — slightly lighter than the page bg so the title sits in its own visible "section". Soft top/bottom dividers reinforce the band. */ [data-theme="dark"] #page-title { background: #242424 !important; border-top: 1px solid #2e2e2e !important; border-bottom: 1px solid #2e2e2e !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.02); } [data-theme="dark"] #page-title.page-title-mini { padding: 22px 0 !important; } [data-theme="dark"] #page-title h1 { color: #e8e8e8 !important; } [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; } /* ── Footer: theme-aware ──────────────────────────────────────────────────── Dark theme uses the existing .dark styles + the baked-in white logo/icons. Light theme overrides bg/text colors AND swaps the white logo + white social icons to the colored variants via CSS `content: url(...)` (modern browsers support this on — no markup duplication needed). */ /* Dark mode keeps the existing dark footer look; just ensure colors stay defensively even if other theme rules try to cascade in. */ [data-theme="dark"] #footer.dark { background-color: #1d1d1d !important; color: #e0e0e0 !important; border-top: 1px solid rgba(255,255,255,0.05) !important; } [data-theme="dark"] #footer.dark a { color: #e0e0e0; } [data-theme="dark"] #footer.dark a:hover { color: #4b67d6; } /* Light mode: light grey footer with dark text and colored assets. */ [data-theme="light"] #footer.dark { background-color: #f2f2f2 !important; color: #1a1a1a !important; border-top: 1px solid #e0e0e0 !important; } /* dark.css ships `.dark #copyrights { color: rgba(255,255,255,0.25) }` which beats our outer footer color rule — override #copyrights specifically. */ [data-theme="light"] #footer.dark #copyrights { background-color: transparent !important; color: #1a1a1a !important; text-shadow: none !important; } [data-theme="light"] #footer.dark #copyrights a, [data-theme="light"] #footer.dark .copyright-links a { color: #1a1a1a !important; border-bottom-color: #001689 !important; } [data-theme="light"] #footer.dark #copyrights a:hover, [data-theme="light"] #footer.dark .copyright-links a:hover { color: #001689 !important; border-bottom-color: #001689 !important; } [data-theme="light"] #footer.dark .footer-big-contacts { color: #1a1a1a !important; } [data-theme="light"] #footer.dark .footer-big-contacts span { color: #001689 !important; } /* Image swaps for light mode (CSS `content` replaces the bitmap). */ [data-theme="light"] #footer img[src$="siboney-1972-09-white.svg"] { content: url("../images/siboney-1972-09.svg"); } [data-theme="light"] #footer img[src$="mbe/mbe-logo-gray.svg"] { content: url("../images/mbe/mbe-logo-blue.svg"); } /* Chamber of Commerce logo: dark wordmark on light pages, white on dark. */ [data-theme="dark"] img.cc-chamber-logo, [data-theme="dark"] img[src$="ccpb_logo_dark.svg"] { content: url("../images/logo/ccpb_logo_white.svg"); } /* Siboney top logo: dark-theme swap to the -dark variant (which has #001689 fills, matching the brand blue used in the menu). Light theme keeps the original #2b3389. Designer authorized this color split. */ [data-theme="dark"] #logo img[src$="siboney-1972-09.svg"] { content: url("../images/siboney-1972-09-dark.svg"); } /* Loading-overlay spinner — same #2b3389 → #001689 swap in dark theme so the spinner matches the brand blue used in the menu. The -dark variant preserves the original SVG animations. */ [data-theme="dark"] #sib-loading-overlay img[src$="sib-loading-03.svg"] { content: url("../images/anim/sib-loading-03-dark.svg"); } /* ── Footer social + MBE icons — SVG, per-theme normal + hover ──────────── Markup default: white. Light theme: normal=blue, hover=red. Dark theme: normal=grey, hover=white. MBE follows the same scheme. */ /* Light theme — normal (blue) */ [data-theme="light"] #footer img[src$="smi_40x40__white_facebook.svg"] { content: url("../images/social/smi_40x40__blue_facebook.svg"); } [data-theme="light"] #footer img[src$="smi_40x40__white_instagram.svg"] { content: url("../images/social/smi_40x40__blue_instagram.svg"); } [data-theme="light"] #footer img[src$="smi_40x40__white_x.svg"] { content: url("../images/social/smi_40x40__blue_x.svg"); } [data-theme="light"] #footer img[src$="smi_40x40__white_youtube.svg"] { content: url("../images/social/smi_40x40__blue_youtube.svg"); } [data-theme="light"] #footer img[src$="smi_40x40__white_linkedin.svg"] { content: url("../images/social/smi_40x40__blue_linkedin.svg"); } [data-theme="light"] #footer img[src$="mbe-logo-white.svg"] { content: url("../images/mbe/mbe-logo-blue.svg"); } /* Light theme — hover (red) */ [data-theme="light"] #footer #top-social a:hover img[src$="smi_40x40__white_facebook.svg"] { content: url("../images/social/smi_40x40__red_facebook.svg"); } [data-theme="light"] #footer #top-social a:hover img[src$="smi_40x40__white_instagram.svg"] { content: url("../images/social/smi_40x40__red_instagram.svg"); } [data-theme="light"] #footer #top-social a:hover img[src$="smi_40x40__white_x.svg"] { content: url("../images/social/smi_40x40__red_x.svg"); } [data-theme="light"] #footer #top-social a:hover img[src$="smi_40x40__white_youtube.svg"] { content: url("../images/social/smi_40x40__red_youtube.svg"); } [data-theme="light"] #footer #top-social a:hover img[src$="smi_40x40__white_linkedin.svg"] { content: url("../images/social/smi_40x40__red_linkedin.svg"); } [data-theme="light"] #footer #top-social a:hover img[src$="mbe-logo-white.svg"] { content: url("../images/mbe/mbe-logo-red.svg"); } /* Dark theme — normal (grey). Hover state stays white (markup default). */ [data-theme="dark"] #footer img[src$="smi_40x40__white_facebook.svg"] { content: url("../images/social/smi_40x40__grey_facebook.svg"); } [data-theme="dark"] #footer img[src$="smi_40x40__white_instagram.svg"] { content: url("../images/social/smi_40x40__grey_instagram.svg"); } [data-theme="dark"] #footer img[src$="smi_40x40__white_x.svg"] { content: url("../images/social/smi_40x40__grey_x.svg"); } [data-theme="dark"] #footer img[src$="smi_40x40__white_youtube.svg"] { content: url("../images/social/smi_40x40__grey_youtube.svg"); } [data-theme="dark"] #footer img[src$="smi_40x40__white_linkedin.svg"] { content: url("../images/social/smi_40x40__grey_linkedin.svg"); } [data-theme="dark"] #footer img[src$="mbe-logo-white.svg"] { content: url("../images/mbe/mbe-logo-grey.svg"); } [data-theme="dark"] #footer #top-social a:hover img[src$="smi_40x40__white_facebook.svg"] { content: url("../images/social/smi_40x40__blue_facebook.svg"); } [data-theme="dark"] #footer #top-social a:hover img[src$="smi_40x40__white_instagram.svg"] { content: url("../images/social/smi_40x40__blue_instagram.svg"); } [data-theme="dark"] #footer #top-social a:hover img[src$="smi_40x40__white_x.svg"] { content: url("../images/social/smi_40x40__blue_x.svg"); } [data-theme="dark"] #footer #top-social a:hover img[src$="smi_40x40__white_youtube.svg"] { content: url("../images/social/smi_40x40__blue_youtube.svg"); } [data-theme="dark"] #footer #top-social a:hover img[src$="smi_40x40__white_linkedin.svg"] { content: url("../images/social/smi_40x40__blue_linkedin.svg"); } [data-theme="dark"] #footer #top-social a:hover img[src$="mbe-logo-white.svg"] { content: url("../images/mbe/mbe-logo-blue.svg"); } /* (Removed earlier dark-mode override for #primary-menu hover/current — the site-chrome.css #001689 brand blue stays in both themes per user pref.) */ /* ── 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: 0 0 0 12px; /* LI flex-centers vertically */ 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; position: relative; z-index: 250; /* above #header so it can't steal hover/click */ } .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; } /* Block events on glyph children so clicks always land on the button. */ .theme-toggle * { pointer-events: none !important; } .theme-toggle { pointer-events: auto; } [data-theme="dark"] .theme-toggle .ti-sun { display: inline; } /* clicking switches → light */ [data-theme="light"] .theme-toggle .ti-moon { display: inline; } /* clicking switches → dark */ /* LI hosting the toggle: no hover bg, flex-center the button in the 44px row. */ #top-bar .top-links li.theme-toggle-item, #top-bar .top-links li.theme-toggle-item:hover { background: transparent !important; padding: 0 6px !important; display: flex !important; align-items: center !important; height: 44px; } /* ── 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; } }