/* ========================================================================= EEMC FinMatch — brand override stylesheet Dark theme (black / off-black / white) with #FFC603 gold buttons. Loaded in before the SDK renders, so the calculator paints already-branded (no flash). Scoped entirely to .embed-humm-calculator so nothing else on the page is affected. Strategy: - Re-declare the SDK's inline `--lender-*` theme variables. An author !important rule beats a normal inline declaration, so these win. - Add explicit rules for the backgrounds / text the SDK sets in its own stylesheet (which has no variable), also with !important. Covers BOTH views: the calculator (.calc-view) and the "Apply for Finance" enquiry page (.instant-checkout-view). ========================================================================= */ /* ---- 1. Theme variables (re-skin everything variable-driven) ---------- */ .embed-humm-calculator { --lender-accent-color: #FFC603 !important; --lender-accent-color-2: #FFD84D !important; --lender-font-color: #FFFFFF !important; --lender-link-color: #FFC603 !important; --lender-dropdown-bg: #1F1F1F !important; --lender-dropdown-arrow-color: #FFC603 !important; /* Primary button (Apply for Finance / Share Quote / Start Application) */ --lender-button-1-bg: #FFC603 !important; --lender-button-1-text: #000000 !important; --lender-button-1-hover-bg: #E6B200 !important; --lender-button-1-border-color: transparent !important; --lender-button-1-border-width: 0px !important; /* Secondary button style (if the SDK ever uses button-style-2) */ --lender-button-2-bg: #161616 !important; --lender-button-2-text: #FFC603 !important; --lender-button-2-hover-bg: #262626 !important; --lender-button-2-border-color: #FFC603 !important; --lender-button-2-border-width: 2px !important; --lender-button-text-weight: 600 !important; /* Input / field cards */ --lender-purchaseAmount-bg: #161616 !important; --lender-purchaseAmount-value-bg: #1F1F1F !important; --lender-purchaseAmount-border-color: #333333 !important; --lender-depositPercentage-bg: #161616 !important; --lender-depositPercentage-border-color: #333333 !important; --lender-creditProduct-bg: #161616 !important; --lender-creditProduct-border-color: #333333 !important; /* Repayment table ("Upfront Instalment" etc.) */ --lender-finance-table-bg: #161616 !important; /* Icons */ --lender-edit-icon-color: #EAEAEA !important; --lender-edit-icon-hover-color: #FFC603 !important; --lender-edit-summary-icon-color: #EAEAEA !important; --lender-edit-summary-icon-hover-color: #FFC603 !important; /* Bullets / headings / terms */ --lender-bullet-color: #FFC603 !important; --lender-bullet-text-color: #000000 !important; --lender-h1-font-color: #FFFFFF !important; --terms-font-color: #9A9A9A !important; } /* ---- 2. Full width of the containing column --------------------------- */ .embed-humm-calculator, .embed-humm-calculator .view-container, .embed-humm-calculator .calc-view, .embed-humm-calculator .instant-checkout-view, .embed-humm-calculator .instant-checkout-container { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* ---- 3. Black background (both views) --------------------------------- */ .embed-humm-calculator, .embed-humm-calculator .view-container, .embed-humm-calculator .calc-view, .embed-humm-calculator .instant-checkout-view, .embed-humm-calculator .instant-checkout-container { background-color: #000000 !important; } /* ---- 4. Off-black panels --------------------------------------------- */ .embed-humm-calculator .purchase-amount-field, .embed-humm-calculator .rep-table-container, .embed-humm-calculator .repayment-table, .embed-humm-calculator .finance-details-container, .embed-humm-calculator .finance-detail-item { background-color: #161616 !important; border-color: #333333 !important; } /* ---- 5. Text: white / off-white -------------------------------------- */ .embed-humm-calculator, .embed-humm-calculator .purchase-amount-label, .embed-humm-calculator .field-label, .embed-humm-calculator .repayment-table .label, .embed-humm-calculator .repayment-table .value, .embed-humm-calculator .finance-details-header, .embed-humm-calculator .finance-details-header span, .embed-humm-calculator .detail-label, .embed-humm-calculator .detail-value, .embed-humm-calculator .max-loan-warning { color: #EAEAEA !important; } .embed-humm-calculator .repayment-table .value, .embed-humm-calculator .detail-value, .embed-humm-calculator .finance-details-header span { color: #FFFFFF !important; } /* Terms + links */ .embed-humm-calculator .terms-and-conditions { color: #9A9A9A !important; } .embed-humm-calculator .terms-and-conditions a { color: #FFC603 !important; } /* ---- 6. Inputs (dark) ------------------------------------------------- */ .embed-humm-calculator .finance-options { background-color: #1F1F1F !important; color: #FFFFFF !important; border: 1px solid #333333 !important; } /* Enquiry-form inputs: standard white box + black text. Kept intentionally plain so they behave identically on every device/browser and sidestep the dark-input autofill problems entirely (per request). */ .embed-humm-calculator .instant-checkout-input { background-color: #FFFFFF !important; color: #000000 !important; /* The SDK sets -webkit-text-fill-color from the (white) theme font colour, which overrides `color` and made typed text invisible on white. Force it. */ -webkit-text-fill-color: #000000 !important; caret-color: #000000 !important; border: 1px solid #CCCCCC !important; } /* Purchase-price chip: the SDK renders this value box with a light background that doesn't read our variable, so force it dark. Input sits transparent on top with white text — fixes the white-on-light unreadable value. */ .embed-humm-calculator .purchase-amount-value { background-color: #2A2A2A !important; } .embed-humm-calculator .price-input { background-color: transparent !important; color: #FFFFFF !important; border: none !important; } .embed-humm-calculator .instant-checkout-input::placeholder { color: #666666 !important; -webkit-text-fill-color: #666666 !important; opacity: 1 !important; } /* Gold focus only on the dark-themed calc-page fields. Enquiry inputs keep the browser-default focus ring so they stay fully standard. */ .embed-humm-calculator .price-input:focus, .embed-humm-calculator .finance-options:focus { border-color: #FFC603 !important; outline: 2px solid rgba(255, 198, 3, 0.6) !important; outline-offset: 1px !important; } /* Address-lookup autocomplete dropdown (Postcoder / Google Places). The suggestions inherit the calculator's white text-fill, and some libraries portal the list outside the calculator container — so target it by its own class, unscoped. This stylesheet only loads on finance pages, so the reach is limited to where the calculator appears. */ .postcoder-autocomplete-container, .pac-container { background-color: #FFFFFF !important; border: 1px solid #CCCCCC !important; } .postcoder-autocomplete-container, .postcoder-autocomplete-container *, .pac-container, .pac-container * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* ---- 7. Buttons: #FFC603 with black text ----------------------------- */ .embed-humm-calculator .feature-cta-button.button-style-1, .embed-humm-calculator .lender-cta-button.button-style-1, .embed-humm-calculator .instant-checkout-cta { background-color: #FFC603 !important; color: #000000 !important; border: none !important; } .embed-humm-calculator .feature-cta-button.button-style-1:hover, .embed-humm-calculator .lender-cta-button.button-style-1:hover, .embed-humm-calculator .instant-checkout-cta:hover { background-color: #E6B200 !important; } .embed-humm-calculator .feature-cta-button .lender-btn-text, .embed-humm-calculator .instant-checkout-cta { color: #000000 !important; } /* Edit control on the enquiry page */ .embed-humm-calculator .edit-finance-details, .embed-humm-calculator .edit-finance-details-text { color: #FFC603 !important; } .embed-humm-calculator .edit-arrow { stroke: #FFC603 !important; } .embed-humm-calculator .edit-icon { fill: #EAEAEA !important; } /* ---- 8. EEMC logo beside the Humm logo (CSS-only, survives re-render) - */ /* Centre the whole logo group across the calculator width. */ .embed-humm-calculator .feature-header { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; text-align: center !important; } .embed-humm-calculator .header-icon { display: flex !important; align-items: center !important; justify-content: center !important; gap: 18px !important; margin: 0 auto !important; } .embed-humm-calculator .header-icon::after { content: "" !important; display: inline-block !important; width: 44px; height: 44px; flex: 0 0 auto; background: url("https://www.englishelectricmotorco.com/wp-content/uploads/2023/04/pulse2.gif") center / contain no-repeat; } /* Optional: if the Humm wordmark is too dark to read on black, uncomment to force it white. (It's a brand asset, so left off by default.) .embed-humm-calculator .feature-logo { filter: brightness(0) invert(1) !important; } */