/* --------------------------------------------------------------------------- Bang! Cart Pro - Freemius checkout styling. Hosted here, on our own server, and pointed at from the Freemius dashboard: Plans > Customization > Custom Checkout CSS file. Freemius fetch this URL and inject it into the checkout document, which is the only way to reach inside that iframe - it is cross-origin, so the site's own stylesheet cannot. EVERYTHING BELOW IS A DOCUMENTED CUSTOM PROPERTY. Freemius publish three layers of them (palette, theme, appearance) and they must be set on :root. Their checkout is an Angular application, so its class names are generated and undocumented - targeting those would work today and break silently the next time they deploy. If something here stops taking effect, check whether the variable has been renamed before reaching for a class selector. WHY !important ON EVERY LINE. Freemius inject this file into their document, and we do not control whether it lands before or after their own :root block. Same selector, same specificity - so without it, whichever they load last wins and this file silently does nothing. Custom properties honour !important, and there is nothing here it can trample that we did not intend. VERIFIED LIVE, 13 Aug 2026. Read straight out of the running checkout: the file arrives as a second after Freemius' own style.css, --fs-ds-theme-primary-accent-color resolves to #1f6ca2, and the Review Order button computes to rgb(31, 108, 162). It did nothing at all until the URL was actually saved in Plans > Customization > Custom Checkout CSS file - the field sits beside a near-identical one for the contact form, which is the easy mistake. CACHING. Freemius link to this URL exactly as typed, with no ?v= on the end, so the site's usual filemtime cache-buster cannot help here. The .htaccess carves this one file out of the year-long immutable rule for that reason. Do not put it back in: without the carve-out, editing this file would change nothing for anyone who had already opened a checkout, and "immutable" means not even a hard refresh would go and look. Palette taken from assets/css/styles.css, unchanged: --blue-deep #1f6ca2 the accessible blue, chosen during the contrast pass as the lightest that passes WCAG AA both as text and behind white text. It is the right one for a button, which is what the accent colour is. --blue #489cd8 --purple-deep #2c2450 --ink #221d33 --muted #635d76 --line #e9e6f1 --btn-radius 5px ------------------------------------------------------------------------ */ :root { /* ---- Layer two: theme colours. The primary accent is the Review Order button, the focus rings and the links. This is the single change that stops the checkout looking like somebody else's product. ---- */ --fs-ds-theme-primary-accent-color: #1f6ca2 !important; --fs-ds-theme-primary-accent-color-hover: #17557f !important; /* ---- Layer one: the blue palette the theme draws from, so anything we have not named individually still lands in our blue rather than Freemius' violet. Lightness is kept in step with the shade numbers, which is what their guidance asks for - contrast inside the checkout depends on it. ---- */ --fs-ds-blue-100: #e7f2fb !important; --fs-ds-blue-200: #cbe3f6 !important; --fs-ds-blue-300: #9ecbec !important; --fs-ds-blue-400: #6fb2e2 !important; --fs-ds-blue-500: #489cd8 !important; --fs-ds-blue-600: #2a80c2 !important; --fs-ds-blue-700: #1f6ca2 !important; --fs-ds-blue-800: #17557f !important; --fs-ds-blue-900: #103e5c !important; /* ---- Layer three: shape. 5px is the site's own --btn-radius, so the checkout's buttons match the ones on the page that opened it. THE NAME MATTERS. This file first used --fs-ds-appearance-button-border-radius and -input-border-radius. Neither exists. Freemius define exactly three radii, and a custom property that nothing reads is silently accepted by the browser - it sets, it just does nothing, and the checkout goes on rendering at 6px while the file looks correct. Read from the live checkout on 13 Aug 2026: --fs-ds-appearance-border-radius 6px buttons, main controls --fs-ds-appearance-border-radius-sm 4px inputs, small controls --fs-ds-appearance-border-radius-lg 12px panels and cards Only the first is changed. -sm at 4px is a pixel off the site and not worth the blast radius; -lg is panel shape, which should stay Freemius' because the panel is theirs. ---- */ --fs-ds-appearance-border-radius: 5px !important; } /* SDK-embedded checkouts scope their variables to .dashboard-mode rather than :root. Repeated rather than combined into one selector list, because if a future Freemius release drops one of the two, a comma-joined rule would be discarded whole and take the working half with it. */ .dashboard-mode { --fs-ds-theme-primary-accent-color: #1f6ca2 !important; --fs-ds-theme-primary-accent-color-hover: #17557f !important; --fs-ds-blue-100: #e7f2fb !important; --fs-ds-blue-200: #cbe3f6 !important; --fs-ds-blue-300: #9ecbec !important; --fs-ds-blue-400: #6fb2e2 !important; --fs-ds-blue-500: #489cd8 !important; --fs-ds-blue-600: #2a80c2 !important; --fs-ds-blue-700: #1f6ca2 !important; --fs-ds-blue-800: #17557f !important; --fs-ds-blue-900: #103e5c !important; --fs-ds-appearance-border-radius: 5px !important; } /* Deliberately NOT set here: TYPOGRAPHY. --fs-ds-typography-* exists, but the site's fonts are self-hosted woff2 files and a document on checkout.freemius.com cannot load them without an Access-Control-Allow-Origin header on this server. Setting a font family the checkout cannot fetch buys a fallback, not a brand. If it is ever wanted, the .htaccess change comes first and is tested before this line is added. ANYTHING TARGETING A CLASS. See the note at the top. */