/*
Theme Name: Woodmart Child (Flash Source)
Description: Child theme of WoodMart. Holds Flash Source's own PHP and the brand colour system so a WoodMart update cannot wipe them.
Template: woodmart
Version: 1.1.0
Text Domain: woodmart-child
*/
/* =====================================================================================================
FLASH SOURCE COLOUR SYSTEM (CP-116) - the ONLY place a brand colour value is written.
To change a colour, edit ONE line in the tokens below. Everything else, including the Customizer
"Additional CSS" (Appearance > Customize), refers to these variables and never repeats a hex value.
HOW THE PALETTE IS USED (the rule, not just the values) - hierarchy revised in CP-118
- GOLD is the primary brand colour and the dominant accent: top bar, borders and rules, prices, links,
header icons, badges, category-tile frames. The exact logo gold is #D4A83A (read from the logo SVGs).
Gold has a light-to-white-gold SHIMMER (--fs-shimmer) on a few key elements only: top bar, tile
frames, the hero button's ring. It is CSS-only and switched off by prefers-reduced-motion.
- Raw gold never carries small TEXT on a light surface (2.2:1). Where gold must be text or a meaningful
icon on white/cream it is --fs-gold-text (#846105, the brightest gold that still passes AA).
Gold SURFACES take dark green text.
- GREEN GRADIENT (--fs-cta) is reserved for buttons and calls to action: Add to Cart, Buy Now, Shop Now,
Send Message, Checkout, Place order. Cream text on it. Plain dark green is still the hero, the footer
and the sale badge; it is no longer the general-purpose brand colour.
- White is the page. Cream is the second surface (bands, tiles, chips). Never a third background.
- Two neutrals, unchanged since CP-116: --fs-text for body copy (a green-tinted charcoal, never pure
black) and --fs-text-muted for secondary copy. Nothing else grey.
CONTRAST (WCAG AA, computed, not eyeballed). Every text pairing the site uses:
text on white 15.5 | text on cream 14.1 | text on cream-2 12.6 | muted on white 6.6
muted on cream 6.0 | muted on cream-2 5.4 | green on white 15.9 | green on cream 14.4
green on gold 7.2 (hover gold 6.0, gold-light 9.5, white-gold 14.0: the whole shimmer) |
cream on green 14.4 | cream on the CTA gradient 14.4 (dark end), 9.2 (light end), 6.7 (hover end) |
gold on green 7.2 | gold-text on white 5.7 | gold-text on cream 5.2 | gold-text on cream-2 4.6 |
danger on white 6.5
Gold on the mid green (4.4) and muted on gold (3.0) FAIL for text and are never used that way.
===================================================================================================== */
:root {
/* ---- base palette (raw values; the only hex codes on the site) ---- */
--fs-green: #0A2810; /* brand dark green */
--fs-green-mid: #1E4D2B; /* hover / success surfaces */
--fs-green-ink: #051208; /* the near-black green behind hero photos (Elementor hero containers) */
--fs-gold: #D4A83A; /* brand gold */
--fs-gold-hover: #C29A2E;
--fs-gold-light: #E6C563; /* shimmer: light gold */
--fs-gold-pale: #F6E7B4; /* shimmer: the white-gold highlight */
--fs-gold-text: #846105; /* the only gold that may be TEXT or an icon on a light surface (5.7:1 on white; was #7A5A0C before CP-118) */
--fs-cream: #FDF3DD; /* brand cream */
--fs-cream-2: #F5E6C8; /* deeper cream: chips, tiles, quiet buttons */
--fs-cream-3: #EBD8AE; /* deeper again: hover on cream-2 */
--fs-white: #FFFFFF;
--fs-text: #1E261F; /* body copy */
--fs-text-muted: #56604F; /* secondary copy */
--fs-line: #E6DEC8; /* hairlines and card borders on white or cream */
--fs-star: #B8891F; /* filled rating stars (graphic, not text) */
--fs-star-empty: #D9CDAE; /* empty rating stars */
--fs-danger: #B3261E; /* required-field marker, errors */
/* ---- channel triplets, so overlays can be written rgba(var(--fs-green-rgb), .5) ---- */
--fs-green-rgb: 10, 40, 16;
--fs-gold-rgb: 212, 168, 58;
--fs-cream-rgb: 253, 243, 221;
--fs-green-ink-rgb: 5, 18, 8;
--fs-gold-light-rgb: 230, 197, 99;
/* ---- button gradient (the ONLY use of green as a gradient) ---- */
--fs-cta-from: #0A2810; /* dark end (= brand green) */
--fs-cta-to: #1F4A2E; /* lighter end */
--fs-cta-hover-to: #2B6040; /* hover: the whole gradient slides one step lighter (cream text still 6.7:1) */
/* ---- roles (what components should reference) ---- CP-118: gold is primary; green is the CTA / dark surface.
Before CP-118 --fs-primary was green and --fs-accent was gold. Nothing in the site CSS read these two
aliases (checked: style.css, Customizer CSS, both grep-clean), so re-pointing them changed no rendering. */
--fs-primary: var(--fs-gold);
--fs-primary-hover: var(--fs-gold-hover);
--fs-primary-text: var(--fs-gold-text);
--fs-on-primary: var(--fs-green); /* text on a gold surface */
--fs-secondary: var(--fs-green); /* dark surfaces: hero, footer, sale badge */
--fs-secondary-hover: var(--fs-green-mid);
--fs-on-secondary: var(--fs-cream);
--fs-accent: var(--fs-gold-light); /* the shimmer highlight */
--fs-bg: var(--fs-white);
--fs-bg-alt: var(--fs-cream);
--fs-cta: linear-gradient(135deg, var(--fs-cta-from), var(--fs-cta-to));
--fs-cta-hover: linear-gradient(135deg, var(--fs-cta-to), var(--fs-cta-hover-to));
--fs-on-cta: var(--fs-cream);
--fs-price: var(--fs-gold-text);
--fs-link: var(--fs-gold-text);
--fs-link-hover: var(--fs-green);
--fs-border-gold: rgba(var(--fs-gold-rgb), .45);
/* light-to-white-gold sweep, symmetric so the ping-pong animation has no seam. Green text passes AA on every stop. */
--fs-shimmer: linear-gradient(100deg, var(--fs-gold-hover) 0%, var(--fs-gold) 20%, var(--fs-gold-light) 38%,
var(--fs-gold-pale) 50%, var(--fs-gold-light) 62%, var(--fs-gold) 80%, var(--fs-gold-hover) 100%);
--fs-radius: 10px;
--fs-shadow: 0 6px 22px rgba(var(--fs-green-rgb), .10);
}
/* ---- WoodMart's own colour variables, pointed at the palette ----
WoodMart writes these on :root from a generated file that loads AFTER this stylesheet, so a :root
override here would lose. Declared on body instead: variables inherit from the nearest ancestor, so
body always wins over :root, and WoodMart's dark-section (.color-scheme-light) blocks still win
over body because they set the same variables on a nearer element. */
body {
--wd-text-color: var(--fs-text);
--wd-title-color: var(--fs-green);
--wd-entities-title-color: var(--fs-text);
--wd-entities-title-color-hover: var(--fs-gold-text);
--wd-widget-title-color: var(--fs-green);
--wd-primary-color: var(--fs-gold);
--wd-alternative-color: var(--fs-green);
--wd-link-color: var(--fs-link);
--wd-link-color-hover: var(--fs-link-hover);
--btn-default-bgcolor: var(--fs-cream-2);
--btn-default-bgcolor-hover: var(--fs-cream-3);
--btn-default-color: var(--fs-green);
--btn-default-color-hover: var(--fs-green);
/* WoodMart paints buttons with background-COLOR, which cannot hold a gradient: these are the solid fallback
(dark end of the gradient); the gradient itself is applied in the BUTTONS section below. */
--btn-accented-bgcolor: var(--fs-cta-from);
--btn-accented-bgcolor-hover: var(--fs-cta-to);
--btn-accented-color: var(--fs-on-cta);
--btn-accented-color-hover: var(--fs-on-cta);
--notices-success-bg: var(--fs-green-mid);
--notices-success-color: var(--fs-white);
--notices-warning-bg: var(--fs-gold);
--notices-warning-color: var(--fs-green);
--wd-form-brd-color: var(--fs-line);
--wd-form-color: var(--fs-text);
--wd-form-placeholder-color: var(--fs-text-muted);
/* WoodMart's grey scale (light-mode values; its dark sections redefine these on a nearer element, so they are unaffected).
Collapses seven neutral greys into the two neutrals plus the cream surfaces. */
--color-gray-100: var(--fs-cream);
--color-gray-200: var(--fs-cream-2);
--color-gray-500: var(--fs-text-muted);
--color-gray-600: var(--fs-text-muted);
--color-gray-700: var(--fs-text-muted);
--color-gray-800: var(--fs-text);
--color-gray-900: var(--fs-green);
--bgcolor-gray-100: var(--fs-cream);
--bgcolor-gray-200: var(--fs-cream);
--bgcolor-gray-300: var(--fs-cream-2);
/* Elementor's own global colours (its kit still held Elementor's default blue and green). */
--e-global-color-primary: var(--fs-green);
--e-global-color-secondary: var(--fs-gold);
--e-global-color-text: var(--fs-text);
--e-global-color-accent: var(--fs-gold);
}
/* ---- TOP BAR (CP-118: gold with a slow shimmer; CP-116 had it dark green) ----
A metallic gold strip: the light-to-white-gold sweep drifts across it over ~14s (background-position on a
3x-wide gradient, per the brief; the bar is only 40px tall so the repaint is trivial), dark green tracked
caps on top (green on every shimmer stop is 6.0:1 or better, see the token header). Applies only when no
live offer is showing: with a live coupon the flashsource-offer-banners mu-plugin adds body.fs-offers-on and
paints its own dark-green bar with the offer image, which must not be touched. !important because WoodMart
paints the bar from a generated file and the Theme option (also set in CP-116) can lag behind a cache. */
body:not(.fs-offers-on) .header-banner {
/* background-position is deliberately NOT !important: an important declaration beats an animation and would freeze the sweep. */
background-color: var(--fs-gold) !important;
background-image: var(--fs-shimmer) !important;
background-size: 300% 100% !important;
background-repeat: no-repeat;
background-position: 0% 50%;
border-bottom: 1px solid rgba(var(--fs-green-rgb), .28);
animation: fs-shimmer 14s ease-in-out infinite alternate;
}
.header-banner,
.header-banner .wd-entry-content,
.header-banner p,
.header-banner a,
.header-banner .header-banner-container {
color: var(--fs-green) !important;
font-size: 13px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
}
/* Small phones: tracked caps at 13px wrap to two lines at 390px, so the bar tightens to stay one line. */
@media (max-width: 479px) {
.header-banner,
.header-banner .wd-entry-content,
.header-banner p,
.header-banner a,
.header-banner .header-banner-container { font-size: 11px; letter-spacing: .03em; }
}
/* ---- TEXT HIERARCHY ----
Primary = --fs-text (set through --wd-text-color above). Secondary copy, counts, meta and old prices
take the ONE muted neutral instead of five different greys (#242424 #333 #3e3e3e #555 #767676 #5f5f5f). */
.product-short-desc,
.woocommerce-breadcrumb,
.wd-breadcrumbs,
.wd-breadcrumbs a,
.wd-breadcrumbs .wd-last,
.wd-cat-count,
.wd-cat .wd-cat-count,
.wd-widget .count,
.widget_layered_nav .count,
.woocommerce-result-count,
.product_meta,
.product_meta a,
.wd-empty-page-text,
.price del,
.price del .amount,
.woocommerce-privacy-policy-text p,
.woocommerce form .optional,
span.optional {
color: var(--fs-text-muted);
}
.price del { opacity: 1; }
/* ---- CATEGORY TILES ----
A cream band with white tiles: the section is the second surface, the tile is the first. Photo
contained (never cropped), hairline border, green title, muted count. */
/* 635ec5a = the home "Feature Categories" band, 56c1b87 = the same band on the Shop page (Elementor ids;
9447fa9 is a leftover container hidden on every device, so it is not styled). Both are full width. */
.elementor-element-635ec5a,
.elementor-element-56c1b87 {
background: var(--fs-cream);
padding-block: 28px;
}
/* CP-118: the tile frame is a 2px gold border with the shimmer sweeping around it (border-box layer of a two-layer
background; the white fill is the padding-box layer and stays still). Each tile starts at a different phase. */
.wd-cats-element .wd-cat-thumb {
border: 2px solid transparent;
background: linear-gradient(var(--fs-white), var(--fs-white)) padding-box, var(--fs-shimmer) border-box;
background-size: 100% 100%, 300% 100%;
background-position: 0 0, 0% 50%;
border-radius: var(--fs-radius);
overflow: hidden;
animation: fs-shimmer-frame 12s ease-in-out infinite alternate;
transition: box-shadow .25s ease;
}
.wd-cats-element .wd-cat:nth-child(2) .wd-cat-thumb { animation-delay: -4s; }
.wd-cats-element .wd-cat:nth-child(3) .wd-cat-thumb { animation-delay: -8s; }
.wd-cats-element .wd-cat:hover .wd-cat-thumb {
box-shadow: var(--fs-shadow);
}
.wd-cats-element .wd-entities-title,
.wd-cats-element .wd-entities-title a {
color: var(--fs-green);
font-weight: 600;
}
/* ---- PRODUCT CARDS ----
White card, hairline border, soft green-tinted shadow on hover; title in body text colour, price in
brand green, old price and description muted. */
.wd-product .product-wrapper {
background: var(--fs-white);
border: 1px solid var(--fs-border-gold);
border-radius: var(--fs-radius);
transition: box-shadow .25s ease, border-color .25s ease;
}
.wd-product:hover .product-wrapper {
border-color: var(--fs-gold);
box-shadow: var(--fs-shadow);
}
.wd-product .wd-entities-title a { color: var(--fs-text); }
.wd-product .wd-entities-title a:hover { color: var(--fs-gold-text); }
.wd-product .price,
.wd-product .price .amount,
.single-product .summary .price,
.single-product .summary .price .amount {
color: var(--fs-price); /* CP-118: prices are gold text (5.7:1 on white), no longer green */
font-weight: 700;
}
/* ---- BADGES / LABELS ---- gold chip with green text (7.2:1); sale = green chip with cream text. */
.product-labels .product-label.new,
.product-labels .product-label.featured,
.units-sold-tag .units-sold-label {
background: var(--fs-gold) !important;
color: var(--fs-green) !important;
}
.product-labels .product-label.onsale {
background: var(--fs-green) !important;
color: var(--fs-cream) !important;
}
/* ---- RATING STARS: filled = brand star gold, empty = a quiet cream-grey (the theme used a lemon yellow). ---- */
.star-rating { color: var(--fs-star-empty); }
.star-rating span:before { color: var(--fs-star); }
.star-rating:before { color: var(--fs-star-empty); }
/* ---- FORMS ---- the required-field asterisk was WoodMart's pure red. */
.required,
abbr.required,
.woocommerce form .required { color: var(--fs-danger); }
.wd-skip-navigation.btn,
.wd-skip-content.btn { background: var(--fs-cream); color: var(--fs-green); }
/* ---- FILTER / SIDEBAR CHIPS ---- count chips and the price-filter button sit on cream, not neutral grey. */
.wd-widget .count,
.widget_layered_nav .count,
.widget_product_categories .count { background: var(--fs-cream-2); }
.wd-arrow-inner { background: var(--fs-cream); }
/* ---- FOOTER ---- the copyright bar's hairline was 10% black, invisible on dark green. */
.wd-copyrights.copyrights-wrapper,
.wd-copyrights { border-top: 1px solid rgba(var(--fs-cream-rgb), .18); }
/* ---- DEMO LEFTOVER HIDDEN (CP-116) ----
The live product page template is WoodMart's unmodified "Single product layout Kids" (post 621). It carries
a baby-store icon carousel (widget 55ccb4f: "100% Organic Cotton", "Inbuilt Mittens", "Hospital Checklist")
that has nothing to do with our products and is wrong on a tea or hair-colour page. Hidden here, NOT deleted:
the proper fix is to remove that widget from layout 621 (Elementor), which needs the owner's OK. If it is ever
removed there, delete this rule too. */
.elementor-element-55ccb4f { display: none !important; }
/* ---- LAST STRAGGLERS (CP-116 re-audit) ----
The computed-colour audit still found WoodMart's own greys in five places that its variables do not reach:
the header menu (#333), sidebar category links (#767676), price-filter labels and pagination (#242424) and
the count chips (#f2f2f2). Pointed at the palette here. The header rule excludes .whb-color-light rows so
the cream menu over the dark home hero is untouched. */
.whb-row:not(.whb-color-light) .wd-nav-header > li > a,
.whb-row:not(.whb-color-light) .wd-nav-header > li > a .nav-link-text { color: var(--fs-green); }
.wd-widget .product-categories li > a { color: var(--fs-text-muted); }
.wd-widget .product-categories li > a:hover,
.wd-widget .product-categories li.current-cat > a { color: var(--fs-green); }
.price_slider_amount .price_label span { color: var(--fs-green); }
.wd-pagination .page-numbers:not(.current) { color: var(--fs-green); }
.create-account-question p { color: var(--fs-text); }
.wd-widget li .count,
.wd-checkboxes-on .count { background: var(--fs-cream-2); }
.wd-btn-arrow .wd-arrow-inner { background: var(--fs-cream); }
.whb-row:not(.whb-color-light) .woodmart-nav-link { color: var(--fs-green); }
.single-product .wd-action-text,
p.stock { color: var(--fs-text); }
.insta-disclosure { color: var(--fs-text-muted); }
/* =====================================================================================================
FEATURE CATEGORIES ONLY ON HOME AND THE MAIN SHOP PAGE (CP-117)
The tile row is a shortcut into categories, so it is redundant once you are already inside one. The
shop archive layout (post 856) is shared by every product archive, so it is hidden on category, brand and
tag archives: the title container 9192a7b and the tile band 56c1b87 (see the CATEGORY TILES note above).
The main /shop/ page (body.post-type-archive-product) and the home page keep it.
===================================================================================================== */
body.tax-product_cat .elementor-element-9192a7b,
body.tax-product_cat .elementor-element-56c1b87,
body.tax-product_brand .elementor-element-9192a7b,
body.tax-product_brand .elementor-element-56c1b87,
body.tax-product_tag .elementor-element-9192a7b,
body.tax-product_tag .elementor-element-56c1b87 { display: none !important; }
/* =====================================================================================================
HERO (CP-117): animated brand gradient + live product cards. Applies to .fs-halloween-hero (home + shop).
The old hero was ONE flat JPG with the product cards baked in, over a solid #051208. Now:
- background = an oversized linear-gradient on ::before, drifting with transform (compositor-only: no repaint,
no layout, unlike animating background-position, which repaints the whole 1440x720 hero every frame);
- ::after = a static scrim on the text side so the small gold eyebrow and cream copy stay AA-readable at
EVERY point of the drift (measured, see PROJECT-MEMORY CP-117);
- the product cards are real linked ![]()
elements (Elementor HTML widget, class .fs-hero-art-widget) so each
can float, lift on hover and fade in independently. Only transform and opacity animate.
The old baked images are still attached in Elementor (background_image); background-image:none here stops them
loading. To go back to them, delete this HERO section and restore the two Customizer layers noted in CP-117.
===================================================================================================== */
.fs-halloween-hero {
--fs-hero-1: var(--fs-green-ink);
--fs-hero-2: var(--fs-green);
--fs-hero-3: var(--fs-green-mid);
--fs-hero-4: color-mix(in srgb, var(--fs-gold) 34%, var(--fs-green)); /* gold glow, kept dark enough for cream text */
--fs-hero-5: color-mix(in srgb, var(--fs-cream) 13%, var(--fs-green-mid)); /* soft cream haze */
position: relative;
overflow: clip;
isolation: isolate;
background-image: none !important;
}
.fs-halloween-hero::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 200%;
z-index: 0;
opacity: 1;
mix-blend-mode: normal;
transition: none;
/* symmetric, so the alternate loop has no seam */
background: linear-gradient(100deg,
var(--fs-hero-1) 0%, var(--fs-hero-2) 14%, var(--fs-hero-3) 28%, var(--fs-hero-4) 40%,
var(--fs-hero-5) 50%,
var(--fs-hero-4) 60%, var(--fs-hero-3) 72%, var(--fs-hero-2) 86%, var(--fs-hero-1) 100%);
transform: translate3d(-25%, 0, 0);
will-change: transform;
animation: fs-hero-drift 44s ease-in-out infinite alternate;
pointer-events: none;
}
.fs-halloween-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(90deg, rgba(var(--fs-green-ink-rgb), .74) 0%, rgba(var(--fs-green-ink-rgb), .44) 42%, rgba(var(--fs-green-ink-rgb), 0) 72%);
}
.fs-halloween-hero > .elementor-widget,
.fs-halloween-hero > .e-con-inner { position: relative; z-index: 1; }
@keyframes fs-hero-drift {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
/* ---- product cards ---- */
.fs-hero-art { display: flex; align-items: flex-start; gap: 14px; }
.fs-hero-card { display: block; flex: 1 1 0; min-width: 0; text-decoration: none; }
.fs-hero-float { display: block; will-change: transform; animation: fs-hero-float calc(5s + var(--i, 0) * .6s) ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.1s); }
.fs-hero-frame {
position: relative;
display: block;
padding: 6px;
background: var(--fs-cream);
border: 2px solid var(--fs-gold);
border-radius: 14px;
box-shadow: 0 8px 20px rgba(var(--fs-green-ink-rgb), .55);
}
.fs-hero-frame img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 9px; background: var(--fs-white); }
.fs-hero-frame img.is-contain { object-fit: contain; }
/* lifted shadow lives on a pseudo-element and fades in with opacity (box-shadow itself is never animated) */
.fs-hero-frame::after {
content: "";
position: absolute;
inset: -2px;
border-radius: 14px;
box-shadow: 0 20px 36px rgba(var(--fs-green-ink-rgb), .7), 0 0 0 1px rgba(var(--fs-gold-rgb), .9);
opacity: 0;
transition: opacity .35s ease;
pointer-events: none;
}
.fs-hero-card:focus-visible { outline: 2px solid var(--fs-cream); outline-offset: 5px; border-radius: 16px; }
@keyframes fs-hero-float {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, -9px, 0); }
}
@keyframes fs-hero-failsafe { to { opacity: 1; transform: none; } }
/* Layout at 1366px and up: cards sit on the right, vertically centred, zig-zag for depth. */
@media (min-width: 1366px) {
.fs-hero-art-widget { position: absolute !important; right: max(24px, 4vw); top: 54%; transform: translateY(-50%); width: min(50vw, 800px) !important; margin: 0 !important; }
.fs-hero-art--n4 { max-width: 640px; margin-left: auto; }
.fs-hero-card:nth-child(even) { margin-top: 34px; }
}
/* Below 1366px the cards stack under the text and the hero grows to fit (no fixed padding-bottom needed). */
@media (max-width: 1365px) {
.fs-halloween-hero { padding-bottom: 44px !important; }
.fs-halloween-hero::after { background: linear-gradient(180deg, rgba(var(--fs-green-ink-rgb), .6) 0%, rgba(var(--fs-green-ink-rgb), .28) 58%, rgba(var(--fs-green-ink-rgb), .1) 100%); }
.fs-hero-art-widget { margin-top: 30px !important; }
.fs-hero-art { justify-content: center; }
.fs-hero-card { flex: 0 1 190px; }
}
@media (max-width: 600px) {
.fs-hero-art { flex-wrap: wrap; gap: 10px; }
.fs-hero-art--n5 .fs-hero-card { flex: 0 0 calc((100% - 20px) / 3); }
.fs-hero-art--n4 .fs-hero-card { flex: 0 0 calc((100% - 10px) / 2); }
}
/* Entry: fade in and slide up when the hero first scrolls into view (class added by fs-hero-motion.js). Also
revealed by a 3s CSS failsafe, so a blocked or failed script can never leave the cards invisible. */
@media (prefers-reduced-motion: no-preference) {
.fs-hero-art .fs-hero-card {
opacity: 0;
transform: translate3d(0, 26px, 0);
transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
transition-delay: calc(var(--i, 0) * 90ms);
animation: fs-hero-failsafe .01s 3s forwards;
}
.fs-hero-art.is-in .fs-hero-card { opacity: 1; transform: none; }
.fs-hero-art.is-paused .fs-hero-float,
.fs-halloween-hero.is-paused::before { animation-play-state: paused; }
}
/* Hover (mouse only): soft scale-up and shadow lift. Touch devices just get the link. */
@media (hover: hover) and (pointer: fine) {
.fs-hero-frame { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.fs-hero-card:hover .fs-hero-frame,
.fs-hero-card:focus-visible .fs-hero-frame { transform: scale(1.07); }
.fs-hero-card:hover .fs-hero-frame::after,
.fs-hero-card:focus-visible .fs-hero-frame::after { opacity: 1; }
}
/* Reduced motion: still, with the gradient parked mid-way. */
@media (prefers-reduced-motion: reduce) {
.fs-halloween-hero::before { animation: none; transform: translate3d(-25%, 0, 0); will-change: auto; }
.fs-hero-float { animation: none; will-change: auto; }
}
/* =====================================================================================================
PRIMARY BUTTONS = GREEN GRADIENT (CP-118)
Add to Cart, Buy Now, Shop Now / every Elementor button, Send Message, Checkout, Place order, Return to
shop, Show on a map, the review Submit. Dark green to a slightly lighter green, cream text (9.2:1 or
better on the lightest point, 6.7:1 on the hover end), a thin gold hairline. Replaces the solid gold
(CP-101..117) and the solid green Buy Now.
Written with :where() so this list adds ZERO specificity: the hero's outline button (.fs-btn-outline,
its own !important rule in the Customizer CSS) and the quiet cream "Filter" style keep working.
!important because the theme and Elementor paint buttons from their own generated files.
===================================================================================================== */
:where(.btn-color-primary, .btn.btn-color-primary, .single_add_to_cart_button, .checkout-button, #place_order,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.wd-button-wrapper .btn, .woocommerce-mini-cart__buttons .checkout, .elementor-button,
.wd-buy-now-btn, button.wd-buy-now-btn.button.alt, .wpcf7-submit, .comment-form .form-submit .submit,
.woocommerce a.wc-backward, .woocommerce .wc-backward, .fs-btn) {
background-color: var(--fs-cta-from) !important;
background-image: var(--fs-cta) !important;
color: var(--fs-on-cta) !important;
border-color: rgba(var(--fs-gold-rgb), .6) !important;
transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
:where(.btn-color-primary, .btn.btn-color-primary, .single_add_to_cart_button, .checkout-button, #place_order,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.wd-button-wrapper .btn, .woocommerce-mini-cart__buttons .checkout, .elementor-button,
.wd-buy-now-btn, button.wd-buy-now-btn.button.alt, .wpcf7-submit, .comment-form .form-submit .submit,
.woocommerce a.wc-backward, .woocommerce .wc-backward, .fs-btn):is(:hover, :focus-visible) {
background-image: var(--fs-cta-hover) !important;
border-color: var(--fs-gold) !important;
color: var(--fs-on-cta) !important;
box-shadow: 0 8px 20px rgba(var(--fs-green-rgb), .28);
}
:where(.single_add_to_cart_button, .checkout-button, #place_order, .wpcf7-submit, .elementor-button):focus-visible {
outline: 2px solid var(--fs-gold);
outline-offset: 2px;
}
:where(.single_add_to_cart_button, .checkout-button, #place_order, .wpcf7-submit, .wd-buy-now-btn):disabled,
:where(.single_add_to_cart_button, .checkout-button, #place_order, .wpcf7-submit, .wd-buy-now-btn).disabled { opacity: .55; }
/* Hero CTA: the same green gradient, ringed by the gold shimmer (a 2px border-box layer that sweeps) so it
stays visible on the dark-green hero. The outline button next to it (.fs-btn-outline) is left as it was. */
.fs-halloween-hero .elementor-widget-button:not(.fs-btn-outline) .elementor-button {
border: 2px solid transparent !important;
background-image: var(--fs-cta), var(--fs-shimmer) !important;
background-origin: padding-box, border-box;
background-clip: padding-box, border-box;
background-size: 100% 100%, 300% 100% !important;
background-repeat: no-repeat;
background-position: 0 0, 0% 50%;
animation: fs-shimmer-frame 10s ease-in-out infinite alternate;
}
/* ---- gold shimmer: ping-pong on background-position (symmetric gradient, so no seam) ---- */
@keyframes fs-shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes fs-shimmer-frame { from { background-position: 0 0, 0% 50%; } to { background-position: 0 0, 100% 50%; } }
@media (prefers-reduced-motion: reduce) {
body:not(.fs-offers-on) .header-banner,
.wd-cats-element .wd-cat-thumb,
.fs-halloween-hero .elementor-widget-button .elementor-button { animation: none !important; }
body:not(.fs-offers-on) .header-banner { background-position: 50% 50%; }
.wd-cats-element .wd-cat-thumb,
.fs-halloween-hero .elementor-widget-button:not(.fs-btn-outline) .elementor-button { background-position: 0 0, 50% 50%; }
}
/* ---- GOLD ON LIGHT: header icons and rules (CP-118) ----
Header icons on the white header are the AA gold (5.7:1; non-text needs 3:1). On the dark hero-overlay header
(.whb-color-light) they stay cream. */
.whb-row:not(.whb-color-light) .wd-tools-icon,
.whb-row:not(.whb-color-light) .wd-tools-icon::before { color: var(--fs-gold-text); }
/* =====================================================================================================
WHY SHOP WITH US - TRUST ROW (CP-118)
Four items, one row (2x2 on tablet and phone). Elementor container #fstrust on the home page holds one HTML
widget with the markup (inline SVG icons, no icon font). Only claims the business can stand behind; the
support item links to the Contact page. Icon discs are the gold shimmer (static) with green strokes (7.2:1).
===================================================================================================== */
.fs-trust-band {
background: var(--fs-white);
border-top: 1px solid var(--fs-border-gold);
border-bottom: 1px solid var(--fs-border-gold);
padding: 22px max(20px, 4vw) !important;
margin: 0 0 28px !important;
}
.fs-trust { width: 100%; max-width: 1240px; margin-inline: auto; }
.fs-trust__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fs-trust__item {
display: flex;
align-items: flex-start; /* icons and titles line up across the row even when one title wraps */
gap: 14px;
padding: 8px 22px;
border-left: 1px solid var(--fs-border-gold);
}
.fs-trust__item:first-child { border-left: 0; }
.fs-trust__icon {
flex: 0 0 52px;
width: 52px;
height: 52px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--fs-shimmer) 50% 50% / 300% 100%;
color: var(--fs-green);
box-shadow: inset 0 0 0 1px rgba(var(--fs-green-rgb), .14);
}
.fs-trust__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fs-trust__title { display: block; color: var(--fs-green); font-weight: 700; font-size: 15px; line-height: 1.25; }
.fs-trust__sub { display: block; color: var(--fs-text-muted); font-size: 13px; line-height: 1.35; margin-top: 2px; }
/* the support item's title is a link whose ::after stretches over the whole tile, so the tile is one click target */
.fs-trust__item { position: relative; }
.fs-trust__title a { color: inherit; text-decoration: none; }
.fs-trust__title a::after { content: ""; position: absolute; inset: 0; }
.fs-trust__item:hover .fs-trust__title a,
.fs-trust__title a:focus-visible { color: var(--fs-gold-text); text-decoration: underline; text-underline-offset: 3px; }
.fs-trust__title a:focus-visible { outline: 2px solid var(--fs-gold-text); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 1023px) {
.fs-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 6px; }
.fs-trust__item:nth-child(odd) { border-left: 0; }
.fs-trust__item { padding: 10px 16px; }
}
@media (max-width: 520px) {
.fs-trust-band { padding: 14px 12px !important; }
.fs-trust__item { flex-direction: column; text-align: center; gap: 8px; padding: 12px 8px; }
.fs-trust__icon { flex-basis: 46px; width: 46px; height: 46px; }
.fs-trust__title { font-size: 14px; }
.fs-trust__sub { font-size: 12px; }
}
/* =====================================================================================================
PRODUCT REVIEWS (CP-118) - markup and rules: mu-plugins/flashsource-reviews.php
While a product has no reviews (body.fs-no-reviews, set server-side) the WoodMart summary ("0 reviews", five
empty bars), the sort row and the blank line are hidden and ONE card is shown: "No reviews yet - be the first to
share your experience" plus a Write a review link. The link points at #respond and the form is revealed with
:target, so it works with no JavaScript. Nothing is seeded: no sample text, no counts, no stars filled in.
Once a real review is approved the class disappears and WoodMart's normal widget comes back, restyled below.
===================================================================================================== */
body.fs-no-reviews #reviews { display: block; }
body.fs-no-reviews #reviews .wd-rating-summary-wrap,
body.fs-no-reviews #reviews #comments { display: none; }
body.fs-no-reviews #review_form_wrapper { width: 100%; max-width: 720px; margin-inline: auto; }
body.fs-no-reviews #respond { display: none; }
body.fs-no-reviews #respond:target { display: block; margin-top: 22px; }
#respond:target { scroll-margin-top: 120px; }
.fs-reviews-empty {
text-align: center;
padding: 34px 24px 28px;
border: 2px solid transparent;
border-radius: 14px;
background: linear-gradient(var(--fs-cream), var(--fs-cream)) padding-box, var(--fs-shimmer) border-box;
background-size: 100% 100%, 300% 100%;
background-position: 0 0, 50% 50%;
}
.fs-reviews-empty__stars { display: flex; justify-content: center; gap: 6px; margin-bottom: 14px; }
.fs-reviews-empty__stars svg { width: 30px; height: 30px; fill: none; stroke: var(--fs-gold-text); stroke-width: 1.6; stroke-linejoin: round; }
.fs-reviews-empty__title { margin: 0 auto 20px; max-width: 30ch; color: var(--fs-green); font-size: 21px; line-height: 1.35; font-weight: 700; text-wrap: balance; }
.fs-reviews-empty__cta { display: inline-block; padding: 12px 28px; border: 1px solid; border-radius: 8px; font-weight: 600; font-size: 15px; text-decoration: none; }
.fs-reviews-empty__note { margin: 16px 0 0; font-size: 13px; color: var(--fs-text-muted); }
.fs-reviews-verify { margin: 0 0 14px; padding: 10px 14px; background: var(--fs-cream); border-left: 3px solid var(--fs-gold); border-radius: 4px; font-size: 14px; color: var(--fs-text); }
/* the form and, later, real reviews: gold stars, quiet gold rules, palette text */
#reviews p.stars a,
#reviews .comment-form-rating .stars a { color: var(--fs-star); font-size: 22px; }
#reviews p.stars a::before { color: var(--fs-star); }
#reviews .wd-rating-progress-bar .progress-bar { background: var(--fs-gold); }
#reviews .comment-reply-title { color: var(--fs-green); font-weight: 700; }
#reviews .woocommerce-review__verified,
#reviews .verified { color: var(--fs-gold-text); font-weight: 600; }
#reviews .commentlist > li { border-bottom: 1px solid var(--fs-border-gold); }
@media (max-width: 767px) {
.fs-reviews-empty { padding: 26px 16px 22px; }
.fs-reviews-empty__title { font-size: 19px; }
.fs-reviews-empty__stars svg { width: 26px; height: 26px; }
}
/* =====================================================================================================
COOKIE CONSENT BANNER (CP-119) - built by mu-plugins/flashsource-tracking/fs-tracking.js, only when a tracker
ID is configured. Accept and Reject are the same size and both visible (rejecting must be as easy as accepting).
Sits above the WhatsApp button; on phones it is a bottom sheet with stacked full-width buttons.
===================================================================================================== */
.fs-consent {
position: fixed;
z-index: 100000;
left: 50%;
bottom: 16px;
transform: translateX(-50%);
width: min(960px, calc(100% - 24px));
display: flex;
gap: 20px;
align-items: center;
padding: 18px 22px;
background: var(--fs-cream);
color: var(--fs-text);
border: 2px solid var(--fs-gold);
border-radius: 14px;
box-shadow: 0 14px 40px rgba(var(--fs-green-rgb), .28);
}
.fs-consent[hidden] { display: none; }
.fs-consent__text { flex: 1 1 auto; min-width: 0; }
.fs-consent__title { margin: 0 0 4px; font-size: 17px; line-height: 1.3; color: var(--fs-green); }
.fs-consent p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fs-text); }
.fs-consent a { color: var(--fs-gold-text); text-decoration: underline; text-underline-offset: 2px; }
.fs-consent__opts { margin-top: 12px; display: grid; gap: 8px; }
.fs-consent__opts[hidden] { display: none; } /* display:grid above would otherwise override the hidden attribute (found in CP-119 screenshots) */
.fs-consent__opt { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; cursor: pointer; }
.fs-consent__opt input { margin-top: 3px; accent-color: var(--fs-green); }
.fs-consent__actions { flex: 0 0 auto; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.fs-consent__btn {
min-width: 138px;
padding: 11px 18px;
border-radius: 8px;
border: 1px solid rgba(var(--fs-gold-rgb), .6);
font: 600 14px/1.2 inherit;
cursor: pointer;
}
.fs-consent__btn--primary { background-color: var(--fs-cta-from); background-image: var(--fs-cta); color: var(--fs-on-cta); }
.fs-consent__btn--primary:hover, .fs-consent__btn--primary:focus-visible { background-image: var(--fs-cta-hover); border-color: var(--fs-gold); }
.fs-consent__btn--ghost { background: var(--fs-white); color: var(--fs-green); border-color: var(--fs-green); }
.fs-consent__btn--ghost:hover, .fs-consent__btn--ghost:focus-visible { background: var(--fs-cream-2); }
.fs-consent__btn:focus-visible { outline: 2px solid var(--fs-gold-text); outline-offset: 2px; }
@media (max-width: 767px) {
.fs-consent { flex-direction: column; align-items: stretch; bottom: 0; width: 100%; border-radius: 14px 14px 0 0; padding: 16px 16px 18px; max-height: 88vh; overflow: auto; }
.fs-consent__actions { flex-direction: column-reverse; }
.fs-consent__btn { width: 100%; }
/* the WhatsApp button sits bottom-right and covers the last button: hide it while the sheet is open */
body:has(.fs-consent:not([hidden])) [class*="ht-ctc"], body:has(.fs-consent:not([hidden])) [class*="ht_ctc"] { opacity: 0; pointer-events: none; }
}
/* =====================================================================================================
NEWSLETTER SIGNUP (CP-119) - markup and rules: mu-plugins/flashsource-newsletter.php, placed in the footer block (Elementor
container fsnlband). Sits on the footer's dark green: cream input, gradient button with the gold hairline, gold heading.
===================================================================================================== */
.fs-nl-band { padding: 34px max(20px, 4vw) 6px !important; }
.fs-nl { width: 100%; max-width: 640px; margin-inline: auto; text-align: center; }
.fs-nl__title { display: block; margin: 0 0 12px; color: var(--fs-gold); font-size: 20px; font-weight: 700; line-height: 1.3; }
.fs-nl__row { display: flex; gap: 10px; }
.fs-nl__row input[type=email] { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 16px; background: var(--fs-cream); color: var(--fs-text); border: 1px solid var(--fs-gold); border-radius: 8px; font-size: 15px; }
.fs-nl__row input[type=email]::placeholder { color: var(--fs-text-muted); }
.fs-nl__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.fs-nl__btn { flex: 0 0 auto; height: 46px; padding: 0 26px; border: 1px solid; border-radius: 8px; font-weight: 600; font-size: 15px; cursor: pointer; }
.fs-nl__note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--fs-cream) !important; opacity: .85; }
.fs-nl__note a { color: var(--fs-gold) !important; text-decoration: underline; }
.fs-nl__msg { min-height: 20px; margin: 8px 0 0; font-size: 14px; color: var(--fs-cream) !important; }
.fs-nl__msg.is-ok { color: var(--fs-gold-pale) !important; font-weight: 600; }
.fs-nl__msg.is-err::before { content: "! "; font-weight: 700; }
@media (max-width: 520px) { .fs-nl__row { flex-direction: column; } .fs-nl__btn { width: 100%; } }
/* =====================================================================================================
RECENTLY VIEWED (CP-119) - mu-plugins/flashsource-related.php. Hidden until the visitor has seen at least one other product.
===================================================================================================== */
.fs-rv { margin: 42px 0 10px; width: 100%; }
.fs-rv[hidden] { display: none; }
.fs-rv__title { margin: 0 0 18px; text-align: center; color: var(--fs-green); font-size: 26px; font-weight: 700; }
.fs-rv__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.fs-rv__card { display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 14px; text-decoration: none; background: var(--fs-white); border: 1px solid var(--fs-border-gold); border-radius: var(--fs-radius); transition: box-shadow .25s ease, border-color .25s ease; }
.fs-rv__card:hover, .fs-rv__card:focus-visible { border-color: var(--fs-gold); box-shadow: var(--fs-shadow); }
.fs-rv__card img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: var(--fs-white); border-radius: 6px; }
.fs-rv__name { color: var(--fs-text); font-size: 14px; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fs-rv__price, .fs-rv__price .amount { color: var(--fs-price); font-weight: 700; font-size: 15px; }
@media (max-width: 1023px) { .fs-rv__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .fs-rv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .fs-rv__title { font-size: 22px; } }
/* =====================================================================================================
BRANDED 404 (CP-119) - 404.php in this theme (WoodMart's said "This is somewhat embarrassing, isn't it?" and searched blog posts).
===================================================================================================== */
.fs-404 { padding: 56px 20px 72px; }
.fs-404__inner { max-width: 640px; margin-inline: auto; text-align: center; }
.fs-404__code { margin: 0; font-size: clamp(84px, 16vw, 148px); line-height: 1; font-weight: 800; letter-spacing: -.02em; color: var(--fs-gold-text); }
.fs-404__title { margin: 6px 0 10px; font-size: clamp(26px, 4vw, 36px); color: var(--fs-green); }
.fs-404__text { margin: 0 auto 26px; max-width: 46ch; color: var(--fs-text-muted); font-size: 17px; line-height: 1.55; }
.fs-404__search { display: flex; gap: 10px; max-width: 480px; margin: 0 auto 22px; }
.fs-404__search input[type=search] { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 16px; border: 1px solid var(--fs-gold); border-radius: 8px; background: var(--fs-white); color: var(--fs-text); font-size: 15px; }
.fs-404__search .fs-btn, .fs-404__actions .fs-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 26px; border: 1px solid; border-radius: 8px; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; }
.fs-404__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0 0 34px; }
.fs-404__ghost { display: inline-flex; align-items: center; height: 48px; padding: 0 26px; border: 1px solid var(--fs-green); border-radius: 8px; color: var(--fs-green); font-weight: 600; font-size: 15px; text-decoration: none; background: var(--fs-white); }
.fs-404__ghost:hover, .fs-404__ghost:focus-visible { background: var(--fs-cream-2); color: var(--fs-green); }
.fs-404__cats { padding-top: 24px; border-top: 1px solid var(--fs-border-gold); }
.fs-404__cats-title { margin: 0 0 12px; color: var(--fs-text-muted); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.fs-404__cats ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fs-404__cats a { display: inline-block; padding: 7px 16px; border: 1px solid var(--fs-border-gold); border-radius: 999px; background: var(--fs-cream); color: var(--fs-green); font-size: 14px; font-weight: 600; text-decoration: none; }
.fs-404__cats a:hover, .fs-404__cats a:focus-visible { background: var(--fs-cream-2); border-color: var(--fs-gold); }
@media (max-width: 480px) { .fs-404__search { flex-direction: column; } .fs-404__search .fs-btn { width: 100%; } .fs-404__actions > a { flex: 1 1 100%; } }
/* =====================================================================================================
SHIPMENT TRACKING BLOCK (CP-120b) - mu-plugins/flashsource-order-tracking.php. Shown on Track Order and My Account > order.
===================================================================================================== */
.fs-trk { margin: 26px 0; padding: 18px 20px; background: var(--fs-white); border: 1px solid var(--fs-border-gold); border-radius: var(--fs-radius); }
.fs-trk__title { margin: 0 0 10px; color: var(--fs-green); font-size: 20px; }
.fs-trk__row { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.fs-trk__carrier { font-weight: 700; color: var(--fs-green); }
.fs-trk__num { font-family: ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.fs-trk__note { margin: 12px 0 0; font-size: 13px; color: var(--fs-text-muted, #5a5a5a); }
/* .fs-btn carries only the green gradient and colours; every context supplies its own shape (as .fs-404 and .fs-nl do). Without this the
button rendered as a cramped strip with no padding (found in the CP-122 end-to-end run). */
.fs-trk__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 26px; border: 1px solid; border-radius: 8px; font-weight: 600; font-size: 15px; text-decoration: none; }
/* =====================================================================================================
FOOTER LOGO SIZE (CP-127). The footer image widget (block 403, widget 99f3686) has no width of its own: the ![]()
fills its column, so its size
followed the image's own proportions. The no-LLC lockup is narrower than the old one (aspect 2.34 instead of 3.22), so left alone it grew
from about 346 x 107 to 561 x 240. Pinned to 250 px wide, which keeps the old height (about 107 px).
===================================================================================================== */
.elementor-element-99f3686 .wd-image img { width: min(250px, 100%); height: auto; }