/** * Fluent Starter - Fluent Cart Compatibility * * FluentCart paints its entire storefront from its own --fct-* CSS variables * (buttons, surfaces, text, borders, inputs). This theme never defines them, * so they resolve empty and FluentCart falls back to its built-in defaults * (most visibly, the "Buy Now" button rendering black). This file bridges the * --fct-* families to the same --fcom-* Fluent Community tokens every other * button and surface on the site uses, so FluentCart follows the community * theme and light/dark mode automatically. * * Only loaded when FluentCart is active (see fluent_starter_has_fluent_cart()). * * @package Fluent_Starter */ /* ========================================================================== Map FluentCart CSS Variables to Fluent Community Tokens Defined on `body` (not :root) so these win over any plugin defaults set on :root for elements inside the document. --fcom-* already swaps on light/dark, so a single block inherits dark mode for free; the literal fallbacks below only matter when a --fcom-* token is somehow absent. ========================================================================== */ body { /* ----- Base button family (fallback for primary CTAs) ----- */ --fct-btn-bg-color: var(--fcom-primary-button, #2B2E33); --fct-btn-text-color: var(--fcom-primary-button-text, #ffffff); --fct-btn-border-color: var(--fcom-primary-button, #2B2E33); /* ----- Primary CTAs: Buy Now / direct checkout ----- */ --fct-direct-btn-bg-color: var(--fcom-primary-button, #2B2E33); --fct-direct-btn-text-color: var(--fcom-primary-button-text, #ffffff); /* ----- Primary CTAs: Add to Cart ----- */ --fct-add-to-cart-btn-bg-color: var(--fcom-primary-button, #2B2E33); --fct-add-to-cart-btn-text-color: var(--fcom-primary-button-text, #ffffff); --fct-add-to-cart-btn-border-color: var(--fcom-primary-button, #2B2E33); --fct-add-to-cart-btn-hover-bg-color: var(--fcom-primary-button, #2B2E33); /* ----- Shop archive buttons ----- */ --fct-shop-btn-bg-color: var(--fcom-primary-button, #2B2E33); --fct-shop-btn-text-color: var(--fcom-primary-button-text, #ffffff); /* ----- Product card button ----- */ --fct-card-btn-bg-color: var(--fcom-primary-button, #2B2E33); --fct-card-btn-text-color: var(--fcom-primary-button-text, #ffffff); /* ----- Full checkout button ----- */ --fct-checkout-btn-bg-color: var(--fcom-primary-button, #2B2E33); --fct-checkout-btn-text-color: var(--fcom-primary-button-text, #ffffff); /* ----- Cart drawer primary button + view-cart ----- */ --fct-cart-drawer-btn-bg-color: var(--fcom-primary-button, #2B2E33); --fct-cart-drawer-btn-text-color: var(--fcom-primary-button-text, #ffffff); --fct-cart-drawer-btn-border-color: var(--fcom-primary-button, #2B2E33); --fct-view-cart-btn-bg-color: var(--fcom-primary-button, #2B2E33); /* ----- Modal/iframe checkout button (see note at bottom) ----- */ --fct-modal-checkout-btn-bg-color: var(--fcom-primary-button, #2B2E33); --fct-modal-checkout-btn-text-color: var(--fcom-primary-button-text, #ffffff); /* ----- Secondary / neutral buttons: keep neutral, NOT primary ----- */ --fct-secondary-btn-bg-color: var(--fcom-secondary-bg, #f0f2f5); --fct-secondary-btn-text-color: var(--fcom-primary-text, #19283a); --fct-secondary-btn-border-color: var(--fcom-primary-border, #e3e8ee); --fct-secondary-btn-hover-bg-color: var(--fcom-light-bg, #E1E4EA); --fct-cart-item-delete-btn-bg-color: var(--fcom-secondary-bg, #f0f2f5); --fct-cart-item-delete-btn-text-color: var(--fcom-primary-text, #19283a); --fct-cart-item-delete-btn-color: var(--fcom-primary-text, #19283a); --fct-cart-item-delete-btn-border-color: var(--fcom-primary-border, #e3e8ee); --fct-cart-item-delete-btn-hover-bg-color: var(--fcom-light-bg, #E1E4EA); --fct-view-cart-drawer-btn-color: var(--fcom-primary-text, #19283a); --fct-view-cart-drawer-btn-border-color: var(--fcom-primary-border, #e3e8ee); --fct-view-cart-drawer-btn-hover-bg: var(--fcom-light-bg, #E1E4EA); --fct-customer-dashboard-logout-btn-bg-color: var(--fcom-secondary-bg, #f0f2f5); --fct-customer-dashboard-logout-btn-text-color: var(--fcom-primary-text, #19283a); --fct-customer-dashboard-logout-btn-hover-bg-color: var(--fcom-light-bg, #E1E4EA); /* ----- Primary surface backgrounds ----- */ --fct-primary-bg-color: var(--fcom-primary-bg, #ffffff); --fct-card-bg: var(--fcom-primary-bg, #ffffff); --fct-cart-drawer-bg: var(--fcom-primary-bg, #ffffff); --fct-cart-drawer-primary-bg-color: var(--fcom-primary-bg, #ffffff); --fct-shop-primary-bg-color: var(--fcom-primary-bg, #ffffff); --fct-checkout-primary-bg-color: var(--fcom-primary-bg, #ffffff); --fct-checkout-summary-bg-color: var(--fcom-primary-bg, #ffffff); --fct-checkout-payment-method-bg-color: var(--fcom-primary-bg, #ffffff); --fct-checkout-address-modal-bg: var(--fcom-primary-bg, #ffffff); --fct-select-dropdown-bg: var(--fcom-primary-bg, #ffffff); --fct-modal-checkout-primary-bg-color: var(--fcom-primary-bg, #ffffff); --fct-customer-dashboard-card-bg: var(--fcom-primary-bg, #ffffff); /* ----- Secondary surface backgrounds ----- */ --fct-secondary-bg-color: var(--fcom-secondary-bg, #f0f2f5); --fct-shop-secondary-bg-color: var(--fcom-secondary-bg, #f0f2f5); --fct-checkout-secondary-bg-color: var(--fcom-secondary-bg, #f0f2f5); --fct-checkout-address-wrapper-bg: var(--fcom-secondary-bg, #f0f2f5); --fct-checkout-shipping-methods-bg: var(--fcom-secondary-bg, #f0f2f5); --fct-cart-drawer-footer-action-bg-color: var(--fcom-secondary-bg, #f0f2f5); --fct-single-product-qty-bg: var(--fcom-secondary-bg, #f0f2f5); --fct-cart-drawer-quantity-bg-color: var(--fcom-secondary-bg, #f0f2f5); --fct-cart-drawer-quantity-btn-bg: var(--fcom-secondary-bg, #f0f2f5); --fct-cart-drawer-quantity-btn-hover-bg: var(--fcom-light-bg, #E1E4EA); /* ----- Primary text ----- */ --fct-primary-text-color: var(--fcom-primary-text, #19283a); --fct-heading-color: var(--fcom-primary-text, #19283a); --fct-shop-primary-text-color: var(--fcom-primary-text, #19283a); --fct-single-product-primary-text-color: var(--fcom-primary-text, #19283a); --fct-card-primary-text-color: var(--fcom-primary-text, #19283a); --fct-card-text-color: var(--fcom-primary-text, #19283a); --fct-checkout-primary-text-color: var(--fcom-primary-text, #19283a); --fct-cart-drawer-primary-text-color: var(--fcom-primary-text, #19283a); --fct-cart-drawer-close-btn-color: var(--fcom-primary-text, #19283a); --fct-cart-drawer-quantity-color: var(--fcom-primary-text, #19283a); --fct-cart-drawer-quantity-btn-color: var(--fcom-primary-text, #19283a); --fct-modal-checkout-primary-text-color: var(--fcom-primary-text, #19283a); --fct-customer-dashboard-title-color: var(--fcom-primary-text, #19283a); --fct-customer-dashboard-text-color: var(--fcom-primary-text, #19283a); --fct-customer-dashboard-card-heading-color: var(--fcom-primary-text, #19283a); --fct-customer-dashboard-primary-text-color: var(--fcom-primary-text, #19283a); --fct-customer-dashboard-nav-text-color: var(--fcom-primary-text, #19283a); --fct-shop-view-switcher-color: var(--fcom-primary-text, #19283a); --fct-shop-paginator-items-color: var(--fcom-primary-text, #19283a); --fct-customer-dashboard-paginator-text-color: var(--fcom-primary-text, #19283a); /* ----- Secondary / muted text + placeholders ----- */ --fct-secondary-text-color: var(--fcom-secondary-text, #525866); --fct-shop-secondary-text-color: var(--fcom-secondary-text, #525866); --fct-single-product-secondary-text-color: var(--fcom-secondary-text, #525866); --fct-checkout-secondary-text-color: var(--fcom-secondary-text, #525866); --fct-cart-drawer-secondary-text-color: var(--fcom-secondary-text, #525866); --fct-modal-checkout-secondary-text-color: var(--fcom-secondary-text, #525866); --fct-customer-dashboard-secondary-text-color: var(--fcom-secondary-text, #525866); --fct-customer-dashboard-sub-title-color: var(--fcom-secondary-text, #525866); --fct-input-placeholder-text-color: var(--fcom-text-off, #959595); --fct-checkout-input-placeholder-text-color: var(--fcom-text-off, #959595); /* ----- Borders & dividers ----- */ --fct-border-color: var(--fcom-primary-border, #e3e8ee); --fct-divider-color: var(--fcom-primary-border, #e3e8ee); --fct-shop-border-color: var(--fcom-primary-border, #e3e8ee); --fct-shop-divider-color: var(--fcom-primary-border, #e3e8ee); --fct-single-product-border-color: var(--fcom-primary-border, #e3e8ee); --fct-card-border-color: var(--fcom-primary-border, #e3e8ee); --fct-checkout-border-color: var(--fcom-primary-border, #e3e8ee); --fct-cart-drawer-border-color: var(--fcom-primary-border, #e3e8ee); --fct-cart-drawer-quantity-border-color: var(--fcom-primary-border, #e3e8ee); --fct-modal-checkout-border-color: var(--fcom-primary-border, #e3e8ee); --fct-modal-checkout-divider-color: var(--fcom-primary-border, #e3e8ee); --fct-customer-dashboard-border-color: var(--fcom-primary-border, #e3e8ee); --fct-customer-dashboard-card-border-color: var(--fcom-primary-border, #e3e8ee); --fct-customer-dashboard-divider-color: var(--fcom-primary-border, #e3e8ee); /* ----- Inputs ----- */ --fct-input-bg-color: var(--fcom-primary-bg, #ffffff); --fct-input-text-color: var(--fcom-primary-text, #19283a); --fct-input-disabled-bg-color: var(--fcom-secondary-bg, #f0f2f5); --fct-input-disabled-bg: var(--fcom-secondary-bg, #f0f2f5); --fct-checkout-input-bg-color: var(--fcom-primary-bg, #ffffff); --fct-checkout-input-text-color: var(--fcom-primary-text, #19283a); --fct-checkout-input-border-color: var(--fcom-primary-border, #e3e8ee); --fct-checkout-input-disabled-bg-color: var(--fcom-secondary-bg, #f0f2f5); --fct-shop-input-bg: var(--fcom-primary-bg, #ffffff); --fct-shop-input-border: var(--fcom-primary-border, #e3e8ee); --fct-modal-checkout-input-disabled-bg: var(--fcom-secondary-bg, #f0f2f5); --fct-select-option-hover-bg: var(--fcom-active-bg, #f0f3f5); /* ----- Active / accent states ----- */ --fct-active-border-color: var(--fcom-primary-button, #2B2E33); --fct-shop-checkmark-active-bg: var(--fcom-primary-button, #2B2E33); --fct-shop-checkmark-active-border-color: var(--fcom-primary-button, #2B2E33); --fct-shop-view-switcher-active-bg: var(--fcom-primary-button, #2B2E33); --fct-shop-paginator-items-active-bg: var(--fcom-primary-button, #2B2E33); --fct-shop-paginator-items-active-color: var(--fcom-primary-button-text, #ffffff); --fct-single-product-active-border-color: var(--fcom-primary-button, #2B2E33); --fct-checkout-active-border-color: var(--fcom-primary-button, #2B2E33); --fct-checkout-address-active-border-color: var(--fcom-primary-button, #2B2E33); --fct-checkout-radio-active-border-color: var(--fcom-primary-button, #2B2E33); --fct-checkout-radio-active-bg-color: var(--fcom-primary-button, #2B2E33); --fct-checkout-radio-dot-bg-color: var(--fcom-primary-button-text, #ffffff); --fct-modal-checkout-active-text-color: var(--fcom-primary-button, #2B2E33); --fct-modal-checkout-active-border-color: var(--fcom-primary-button, #2B2E33); --fct-primary-active-text-color: var(--fcom-primary-button, #2B2E33); --fct-cart-drawer-badge-bg-color: var(--fcom-primary-button, #2B2E33); --fct-cart-drawer-badge-text-color: var(--fcom-primary-button-text, #ffffff); --fct-customer-dashboard-nav-active-bg-color: var(--fcom-primary-button, #2B2E33); --fct-customer-dashboard-nav-active-text-color: var(--fcom-primary-button-text, #ffffff); --fct-customer-dashboard-nav-active-bar-color: var(--fcom-primary-button, #2B2E33); --fct-customer-dashboard-paginator-items-active-bg: var(--fcom-primary-button, #2B2E33); --fct-customer-dashboard-paginator-items-active-color: var(--fcom-primary-button-text, #ffffff); --fct-customer-dashboard-paginator-items-active-border: var(--fcom-primary-button, #2B2E33); } /* ========================================================================== Hard Override on Storefront CTA Classes Guarantees the theme color wins even if FluentCart sets its variables on a closer wrapper than `body`. Only background-color is forced (not the `background` shorthand) so FluentCart's subtle top-highlight gradient stays layered over the theme color. ========================================================================== */ .fluent-cart-direct-checkout-button, .fluent-cart-add-to-cart-button { background-color: var(--fcom-primary-button, #2B2E33) !important; color: var(--fcom-primary-button-text, #ffffff) !important; border-color: var(--fcom-primary-button, #2B2E33) !important; } .fluent-cart-direct-checkout-button:hover, .fluent-cart-add-to-cart-button:hover { opacity: 0.9; background-color: var(--fcom-primary-button, #2B2E33) !important; color: var(--fcom-primary-button-text, #ffffff) !important; } /* ========================================================================== Note: Modal / Iframe Checkout FluentCart's modal checkout renders inside a separate