/* * Factory Child — premium structural design system * =========================================================================== * STRUCTURE ONLY. Every brand color and font is DATA: the Factory Core plugin * (Site\BrandTokens + Site\Fonts) injects the brand custom properties and the * Google Fonts; this file only consumes them, so one shared theme reskins per * site. There are NO hard-coded brand colors and NO bundled fonts here — every * shade is DERIVED from the tokens with color-mix(). * * Tokens consumed from the plugin (defined on :root by BrandTokens): * colors --color-primary --color-primary-hover --color-accent --color-bg * --color-surface --color-text --color-muted --color-line --color-dark * fonts --font-heading --font-body * Required tokens (primary, accent, bg, text, fonts) are used directly. Optional * tokens get a graceful, token-DERIVED fallback below via --fx-* aliases — these * are separate property names, so a plugin-supplied value always wins the cascade * and an omitted token never leaves a var() undefined (PLAYBOOK gotcha 10). * * Authored mobile-first: base rules target 390px phones, min-width media queries * scale up. Visible focus, prefers-reduced-motion honored. * * Specificity: Divi's dynamic / cached-inline CSS loads after the child theme, so * a few global guarantees (heading/body font-family, the 16px base) use a `body` * prefix + !important to win. Per-module styling authored by the Divi library is * left to win on its own. New premium components are emitted as raw HTML inside * Divi CODE modules (PLAYBOOK gotcha 2: custom classes/attrs do NOT render on * CLI-built Divi-native modules), so the .fx-* class + data-* hooks below are * reliable on that raw markup. * * =========================== INTEGRATION CONTRACT ========================== * The Divi component library emits markup that matches these hooks. * * SCROLL REVEAL (factory-ui.js drives it — §2a): * attr data-fx-reveal = fade | fade-up | fade-left | fade-right | scale | blur-up * attr data-fx-delay = 1..6 (≈80ms stagger steps) * class .fx-in = added by JS when the element enters the viewport (once) * (internal) .fx-armed = added by JS only to BELOW-the-fold reveal targets so * already-visible content is NEVER hidden -> no FOUC, and * if JS never runs the content stays fully visible. * COUNTERS (factory-ui.js): * attr data-fx-count = target number (may contain a decimal) * attr data-fx-suffix / data-fx-prefix = strings appended/prepended * attr data-fx-duration = ms (default 1600) · data-fx-decimals = N * The element's own text is the final value (no-JS fallback). Add .fx-count for type. * DECoration utilities: * .fx-mesh (.fx-mesh--soft) animated gradient-mesh ambient background * .fx-lift hover elevation · .fx-zoom>.fx-zoom__img media zoom * * COMPONENT CLASS HOOKS (the library emits matching markup): * layout .fx-container .fx-section (.fx-section--soft/--dark/--tight/--gradient) * .fx-grid(.fx-grid--2/3/4) .fx-rule .fx-overlap * type .fx-eyebrow .fx-lead .fx-prose .fx-display * actions .fx-btn (.fx-btn--primary/--accent/--ghost/--dark) .fx-btn--lg/--block * surfaces .fx-card .fx-card__media .fx-card__body .fx-card__title .fx-card__text * reveal .fx-hover-reveal > .fx-hover-reveal__item (fade+rise on hover/focus; * touch + reduced-motion safe — always visible where hover can't happen) * media .fx-figure .fx-figure__img .fx-figure__caption (.fx-figure--framed/--tall/--wide) * art .fx-ph .fx-ph__art .fx-ph__svg .fx-ph__icon .fx-ph__label (.fx-ph--TONE/--RATIO) * quote .fx-quote .fx-quote__text .fx-quote__foot .fx-avatar .fx-quote__name .fx-quote__meta .fx-stars * stats .fx-bigstats .fx-bigstat .fx-bigstat__value .fx-bigstat__suffix .fx-bigstat__label * pricing .fx-tier (.fx-tier--featured) .fx-tier__badge .fx-tier__name .fx-tier__price * .fx-tier__period .fx-tier__desc .fx-tier__features .fx-tier__cta * gallery .fx-gallery .fx-gallery__item .fx-gallery__img .fx-gallery__cap * marquee .fx-marquee (.fx-marquee--reverse) .fx-marquee__track .fx-marquee__item * logos .fx-logos .fx-logo * process .fx-process .fx-process__step .fx-process__node .fx-process__n * .fx-process__title .fx-process__body * hero .fx-badges .fx-badge .fx-ministats .fx-ministat .fx-ministat__value * .fx-ministat__label .fx-overlay (--fx-overlay:0..1) * header .fx-site-header .fx-topbar .fx-header-bar .fx-header-inner .fx-wordmark * .fx-nav .fx-menu-toggle .fx-header-actions .fx-nav-scrim (body.fx-menu-open) * footer .fx-site-footer .fx-footer-grid .fx-footer-col .fx-footer-title * .fx-footer-links .fx-footer-contact .fx-social .fx-hours .fx-footer-bottom * sticky .fx-stickybar .fx-stickybar__btn .fx-stickybar__call .fx-stickybar__close * (body[data-fx-cta], body.fx-has-stickybar — set by factory-ui.js) * ========================================================================= */ /* ========================================================================= * * 1. Structural tokens + derived color aliases (no brand color is set here) * * ========================================================================= */ :root{ /* Derived/optional color aliases — fall back without redefining brand tokens. */ --fx-surface: var(--color-surface, var(--color-bg)); --fx-muted: var(--color-muted, color-mix(in srgb, var(--color-text) 58%, var(--color-bg))); --fx-line: var(--color-line, color-mix(in srgb, var(--color-text) 14%, transparent)); --fx-primary-hover: var(--color-primary-hover, color-mix(in srgb, var(--color-primary) 82%, var(--color-text))); --fx-dark: var(--color-dark, var(--color-text)); --fx-soft: color-mix(in srgb, var(--color-primary) 6%, var(--fx-surface)); --fx-softer: color-mix(in srgb, var(--color-primary) 3%, var(--fx-surface)); --fx-tint-accent: color-mix(in srgb, var(--color-accent) 12%, var(--fx-surface)); --fx-hairline: color-mix(in srgb, var(--fx-dark) 8%, transparent); /* Readable text on filled primary / dark / accent surfaces (factory norm = light bg). */ --fx-on-primary: var(--fx-surface); --fx-on-dark: var(--fx-surface); --fx-on-dark-muted: color-mix(in srgb, var(--fx-surface) 72%, transparent); --fx-on-dark-line: color-mix(in srgb, var(--fx-surface) 20%, transparent); /* Fluid type scale (mobile-first; clamps stay legible at 390px). */ --fs-xs:.8125rem; --fs-sm:.875rem; --fs-base:1rem; --fs-md:1.0625rem; --fs-lg:clamp(1.2rem, 1.08rem + .55vw, 1.5rem); --fs-xl:clamp(1.45rem, 1.2rem + 1.05vw, 2rem); --fs-2xl:clamp(1.85rem, 1.4rem + 1.95vw, 2.75rem); --fs-3xl:clamp(2.25rem, 1.55rem + 3.05vw, 3.85rem); --fs-display:clamp(2.6rem, 1.5rem + 5.1vw, 5rem); /* hero display heading */ --fs-oversize:clamp(2.1rem, 1.3rem + 3.6vw, 4.25rem); /* oversize step (xl -> display) */ --fs-mega:clamp(3.2rem, 1.6rem + 7vw, 7rem); /* MEGA display moments (statement / editorial hero) */ --lh-tight:1.12; --lh-display:1.02; --lh-mega:0.95; --lh-snug:1.3; --lh:1.65; --tracking-eyebrow:.14em; --tracking-wide:.02em; --tracking-tight:-0.02em; /* Spacing rhythm (4 / 8 px). */ --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem; --gutter:clamp(1.25rem, 4vw, 2rem); --container:1200px; --measure:65ch; --section-y:clamp(3rem, 6vw, 6rem); --section-y-tight:clamp(2rem, 4vw, 3.5rem); /* Radius. */ --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px; --radius-pill:999px; /* Button + hover-reveal control knobs. Neutral defaults = current behaviour; a site's custom_css can set --fx-btn-radius:var(--radius-pill) once to make every button a pill without editing this shared file (buttons consume the var below). --fx-hover-rise is the small offset the hover-reveal skeleton lifts a revealed control from. */ --fx-btn-radius:var(--radius-sm); --fx-hover-rise:.5rem; /* Layered soft shadows (tinted from the dark token; no hard-coded color). */ --shadow-xs:0 1px 2px color-mix(in srgb, var(--fx-dark) 8%, transparent); --shadow-sm:0 1px 2px color-mix(in srgb, var(--fx-dark) 9%, transparent), 0 2px 6px color-mix(in srgb, var(--fx-dark) 6%, transparent); --shadow-md:0 2px 6px color-mix(in srgb, var(--fx-dark) 7%, transparent), 0 10px 26px color-mix(in srgb, var(--fx-dark) 12%, transparent); --shadow-lg:0 6px 16px color-mix(in srgb, var(--fx-dark) 10%, transparent), 0 24px 56px color-mix(in srgb, var(--fx-dark) 16%, transparent); --shadow-xl:0 12px 28px color-mix(in srgb, var(--fx-dark) 12%, transparent), 0 44px 90px color-mix(in srgb, var(--fx-dark) 22%, transparent); --shadow-primary:0 16px 40px -14px color-mix(in srgb, var(--color-primary) 50%, transparent); --shadow-inset:inset 0 0 0 1px color-mix(in srgb, var(--fx-dark) 6%, transparent); /* Gradients + glints (derived; the light "sheen" uses the on-primary tint). */ --fx-grad-primary:linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 52%, var(--fx-dark))); --fx-grad-accent:linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 58%, var(--color-primary))); --fx-grad-dark:linear-gradient(150deg, var(--fx-dark), color-mix(in srgb, var(--fx-dark) 78%, var(--color-primary))); --fx-sheen:color-mix(in srgb, var(--fx-on-primary) 32%, transparent); /* Motion + reveal. */ --t-fast:140ms; --t:220ms; --ease:cubic-bezier(.2,.7,.3,1); --ease-out:cubic-bezier(.16,1,.3,1); --fx-reveal-dur:720ms; --fx-reveal-ease:cubic-bezier(.16,1,.3,1); --fx-reveal-shift:26px; --fx-reveal-blur:12px; --fx-stagger:80ms; /* Orchestrated page-load entrance (editorial hero / statement). */ --fx-enter-dur:760ms; --fx-enter-shift:30px; --fx-enter-stagger:90ms; --fx-marquee-dur:36s; --fx-mesh-dur:24s; /* Layering. */ --z-scrim:999; --z-header:1000; --z-menu:1001; --z-sticky:1100; /* Focus ring soft glow. */ --ring:0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent); } /* ========================================================================= * * 2. Document base * * ========================================================================= */ body{ background-color:var(--color-bg); color:var(--color-text); font-family:var(--font-body); /* Divi's inherited base computes to 14px; restate the 16px mobile minimum so unsized body copy never triggers iOS auto-zoom. Sized components are unaffected. */ font-size:16px !important; line-height:var(--lh); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ max-width:100%; height:auto; } ::selection{ background:color-mix(in srgb, var(--color-primary) 18%, transparent); } /* ========================================================================= * * 2a. Scroll-reveal system (data-attribute contract — §2a) * * Default: fully visible (no-JS / JS-failed / reduced-motion safe). * * factory-ui.js adds .fx-armed ONLY to below-the-fold targets (so visible * * content never blinks), then .fx-in when they enter the viewport. * * ========================================================================= */ [data-fx-reveal].fx-armed{ opacity:0; will-change:opacity, transform, filter; transition:opacity var(--fx-reveal-dur) var(--fx-reveal-ease), transform var(--fx-reveal-dur) var(--fx-reveal-ease), filter var(--fx-reveal-dur) var(--fx-reveal-ease); } [data-fx-reveal="fade-up"].fx-armed { transform:translate3d(0, var(--fx-reveal-shift), 0); } [data-fx-reveal="fade-left"].fx-armed { transform:translate3d(calc(-1 * var(--fx-reveal-shift)), 0, 0); } [data-fx-reveal="fade-right"].fx-armed{ transform:translate3d(var(--fx-reveal-shift), 0, 0); } [data-fx-reveal="scale"].fx-armed { transform:scale(.93); } [data-fx-reveal="blur-up"].fx-armed { transform:translate3d(0, calc(var(--fx-reveal-shift) * .7), 0); filter:blur(var(--fx-reveal-blur)); } /* Settle to natural state once seen (and release the compositor hint). */ [data-fx-reveal].fx-in{ opacity:1; transform:none; filter:none; will-change:auto; } /* Stagger steps (applied via the transition delay on the armed -> in change). */ [data-fx-reveal][data-fx-delay="1"]{ transition-delay:calc(1 * var(--fx-stagger)); } [data-fx-reveal][data-fx-delay="2"]{ transition-delay:calc(2 * var(--fx-stagger)); } [data-fx-reveal][data-fx-delay="3"]{ transition-delay:calc(3 * var(--fx-stagger)); } [data-fx-reveal][data-fx-delay="4"]{ transition-delay:calc(4 * var(--fx-stagger)); } [data-fx-reveal][data-fx-delay="5"]{ transition-delay:calc(5 * var(--fx-stagger)); } [data-fx-reveal][data-fx-delay="6"]{ transition-delay:calc(6 * var(--fx-stagger)); } /* ========================================================================= * * 3. Typography — headings use --font-heading, body uses --font-body * * Font-family is force-applied (body prefix + !important) to beat Divi; * * the size scale is a normal-specificity default that modules can override. * * ========================================================================= */ body, body p, body li, body span, body a, body label, body .et_pb_text, body .et_pb_text_inner, body .et_pb_blurb_description, body input, body select, body textarea, body button{ font-family:var(--font-body) !important; } body h1, body h2, body h3, body h4, body h5, body h6, body .et_pb_module h1, body .et_pb_module h2, body .et_pb_module h3, body .et_pb_module h4, body .et_pb_module h5, body .et_pb_module h6, body .et_pb_heading h1, body .et_pb_heading h2, body .et_pb_heading h3, body .et_pb_heading .et_pb_module_heading, .fx-wordmark, .fx-footer-title, .fx-display{ font-family:var(--font-heading) !important; line-height:var(--lh-tight); letter-spacing:.005em; } body h1{ font-size:var(--fs-3xl); font-weight:700; letter-spacing:var(--tracking-tight); } body h2{ font-size:var(--fs-2xl); font-weight:700; letter-spacing:-0.01em; } body h3{ font-size:var(--fs-xl); font-weight:600; } body h4{ font-size:var(--fs-lg); font-weight:600; } body h5{ font-size:var(--fs-md); font-weight:600; } body h6{ font-size:var(--fs-base); font-weight:600; letter-spacing:var(--tracking-wide); } body p{ line-height:var(--lh); } /* Oversized fluid display heading for hero moments. Uses the optional DISPLAY face (var(--font-display) falls back to --font-heading when no display family is set, so this is safe for every site). The high-specificity variants are needed because the grouped heading-family rule above now includes `body .et_pb_module h1` (0,1,2) — a bare `.fx-display` (0,1,0) re-assertion would lose the !important tie and display headings would silently paint in the heading face (that exact regression shipped once; keep these selectors). */ .fx-display, body h1.fx-display, body h2.fx-display, body h3.fx-display, body .et_pb_module h1.fx-display, body .et_pb_module h2.fx-display, body .et_pb_module h3.fx-display{ font-family:var(--font-display) !important; font-size:var(--fs-display) !important; font-weight:700; line-height:var(--lh-display); letter-spacing:var(--tracking-tight); text-wrap:balance; } /* MEGA + oversize display steps (statement pull-quotes / editorial hero). */ .fx-mega{ font-size:var(--fs-mega) !important; line-height:var(--lh-mega) !important; letter-spacing:-0.025em; } .fx-oversize{ font-size:var(--fs-oversize) !important; line-height:var(--lh-tight); } /* Leading-tight + tabular helpers for big type. */ .fx-leading-tight{ line-height:var(--lh-tight) !important; } .fx-leading-mega{ line-height:var(--lh-mega) !important; } .fx-display-font, body h1.fx-display-font, body h2.fx-display-font, body h3.fx-display-font, body .et_pb_module h1.fx-display-font, body .et_pb_module h2.fx-display-font, body .et_pb_module h3.fx-display-font{ font-family:var(--font-display) !important; } .fx-mono-font{ font-family:var(--font-mono) !important; } /* Eyebrow / overline — structural label above a heading. */ .fx-eyebrow{ display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--font-body); font-size:var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-eyebrow); color:var(--color-primary); margin:0 0 var(--space-3); } /* A short gradient tick before the eyebrow label reads as an intentional accent. */ .fx-eyebrow::before{ content:""; width:1.75rem; height:2px; border-radius:2px; background:var(--fx-grad-accent); } .fx-eyebrow--center{ justify-content:center; } .fx-eyebrow--bare::before{ content:none; } /* Lead paragraph + readable prose measure. */ .fx-lead{ font-size:var(--fs-md); color:var(--fx-muted); line-height:var(--lh); } .fx-prose{ max-width:var(--measure); } .fx-prose > * + *{ margin-top:var(--space-4); } /* Gradient hairline rule + decorative divider. */ .fx-rule{ height:1px; border:0; background:linear-gradient(90deg, transparent, var(--fx-line), transparent); margin:var(--space-6) 0; } .fx-rule--accent{ background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-accent) 60%, transparent), transparent); } /* ========================================================================= * * 4. Links + focus * * ========================================================================= */ body a{ color:var(--color-primary); text-decoration-thickness:1px; text-underline-offset:.18em; transition:color var(--t) var(--ease); } body a:hover{ color:var(--fx-primary-hover); } :where(a, button, input, select, textarea, [tabindex], .et_pb_button):focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; border-radius:var(--radius-sm); } /* ========================================================================= * * 5. Buttons * * .fx-btn = generic (Theme Builder / Code modules). Divi's own button gets * * the brand font + a tokened fallback so a module Divi forgets to colour * * (PLAYBOOK gotcha 9) never falls back to default blue. A light sheen * * sweeps across filled buttons on hover. * * ========================================================================= */ .fx-btn{ position:relative; overflow:hidden; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); min-height:48px; padding:.7em 1.6em; font-family:var(--font-body); font-weight:600; font-size:var(--fs-base); letter-spacing:var(--tracking-wide); line-height:1.2; text-align:center; text-decoration:none; border:1.5px solid transparent; border-radius:var(--fx-btn-radius); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease); } /* Sheen glint — a single diagonal pass; transform-only so it's cheap. */ .fx-btn::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(100deg, transparent 28%, var(--fx-sheen) 50%, transparent 72%); transform:translateX(-120%); opacity:0; transition:transform 620ms var(--ease-out), opacity var(--t) var(--ease); } .fx-btn:hover::before{ transform:translateX(120%); opacity:1; } .fx-btn:hover{ transform:translateY(-1px); } .fx-btn:active{ transform:translateY(1px); } .fx-btn--lg{ min-height:54px; padding:.85em 2em; font-size:var(--fs-md); } .fx-btn--block{ display:flex; width:100%; } .fx-btn--primary{ background:var(--color-primary); color:var(--fx-on-primary); border-color:var(--color-primary); box-shadow:var(--shadow-sm); } .fx-btn--primary:hover{ background:var(--fx-primary-hover); border-color:var(--fx-primary-hover); color:var(--fx-on-primary); box-shadow:var(--shadow-md), var(--shadow-primary); } .fx-btn--accent{ background:var(--color-accent); color:var(--fx-on-primary); border-color:var(--color-accent); box-shadow:var(--shadow-sm); } .fx-btn--accent:hover{ background:color-mix(in srgb, var(--color-accent) 86%, var(--fx-dark)); border-color:color-mix(in srgb, var(--color-accent) 86%, var(--fx-dark)); box-shadow:var(--shadow-md); } .fx-btn--ghost{ background:transparent; color:var(--color-primary); border-color:color-mix(in srgb, var(--color-primary) 40%, transparent); } .fx-btn--ghost::before{ content:none; } .fx-btn--ghost:hover{ background:var(--color-primary); color:var(--fx-on-primary); border-color:var(--color-primary); } .fx-btn--dark{ background:var(--fx-dark); color:var(--fx-on-dark); border-color:var(--fx-dark); } .fx-btn--dark:hover{ background:color-mix(in srgb, var(--fx-dark) 88%, var(--color-primary)); border-color:color-mix(in srgb, var(--fx-dark) 88%, var(--color-primary)); } /* Light outline button — the secondary CTA on a DOMINANT/dark ground (fills to a light panel with dark text on hover). */ .fx-btn--light{ background:transparent; color:var(--fx-on-dark); border-color:color-mix(in srgb, var(--fx-on-dark) 55%, transparent); } .fx-btn--light::before{ content:none; } .fx-btn--light:hover{ background:var(--fx-on-dark); color:var(--fx-dark); border-color:var(--fx-on-dark); } /* Divi button: brand font + clean (no sliding arrow) + safe brand fallback colours. */ body .et_pb_button{ font-family:var(--font-body) !important; font-weight:600 !important; letter-spacing:var(--tracking-wide) !important; background-color:var(--color-primary); color:var(--fx-on-primary); border:1.5px solid var(--color-primary); border-radius:var(--fx-btn-radius); transition:background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t-fast) var(--ease); } body .et_pb_button:hover{ background-color:var(--fx-primary-hover); border-color:var(--fx-primary-hover); color:var(--fx-on-primary); box-shadow:var(--shadow-primary); transform:translateY(-1px); } body .et_pb_button:after{ display:none !important; } /* ========================================================================= * * 6. Cards * * Hover lift + gradient top-edge reveal + media zoom. * * ========================================================================= */ .fx-card{ position:relative; display:flex; flex-direction:column; background:var(--fx-surface); border:1px solid var(--fx-line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; transition:transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); } /* Gradient edge that brightens on hover (top hairline). */ .fx-card::after{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--fx-grad-accent); opacity:0; transition:opacity var(--t) var(--ease); } .fx-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--color-primary) 22%, var(--fx-line)); } .fx-card:hover::after{ opacity:1; } .fx-card__media{ display:block; position:relative; overflow:hidden; } .fx-card__media img{ display:block; width:100%; transition:transform 520ms var(--ease-out); } .fx-card:hover .fx-card__media img{ transform:scale(1.06); } .fx-card__body{ padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); flex:1 1 auto; } .fx-card__title{ font-family:var(--font-heading); font-size:var(--fs-lg); margin:0; color:var(--color-text); } .fx-card__text{ color:var(--fx-muted); margin:0; } .fx-card__price{ color:var(--color-primary); font-weight:700; font-size:var(--fs-lg); } /* Generic hover-lift + media-zoom utilities (for code-module markup). */ .fx-lift{ transition:transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease); } .fx-lift:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); } /* Media zoom — covers both the legacy .fx-zoom hook AND the .fx-media markup that fx_media() actually emits (the two System agents diverged on the class name; this aliases them so the hover-zoom is live globally, not only where a per-site custom_css happens to patch it). */ .fx-zoom, .fx-media--zoom .fx-media__frame{ overflow:hidden; } .fx-zoom__img, .fx-media--zoom .fx-media__img{ display:block; width:100%; transition:transform 600ms var(--ease-out); } .fx-zoom:hover .fx-zoom__img, .fx-media--zoom:hover .fx-media__img{ transform:scale(1.07); } /* Gentle transition for Divi blurb/group surfaces (no custom class needed). */ body .et_pb_blurb{ transition:transform var(--t) var(--ease); } /* Hover-reveal skeleton (DS product-card "reveal on hover" primitive). A child marked .fx-hover-reveal__item starts hidden and fades+rises in when its .fx-hover-reveal ancestor is hovered OR receives keyboard focus. Hover-capable fine pointers ONLY — under (hover:none) [touch] and prefers-reduced-motion the item is ALWAYS visible, so a tap-only device never has an unreachable control. Neutral: opacity/transform only (colours come from the component / custom_css). */ @media (hover:hover) and (pointer:fine){ .fx-hover-reveal .fx-hover-reveal__item{ opacity:0; transform:translateY(var(--fx-hover-rise)); transition:opacity var(--t) var(--ease), transform var(--t) var(--ease); } .fx-hover-reveal:hover .fx-hover-reveal__item, .fx-hover-reveal:focus-within .fx-hover-reveal__item{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ .fx-hover-reveal .fx-hover-reveal__item{ opacity:1 !important; transform:none !important; } } /* ========================================================================= * * 7. Layout helpers + section rhythm * * ========================================================================= */ .fx-container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); } .fx-section{ position:relative; padding-block:var(--section-y); } .fx-section--tight{ padding-block:var(--section-y-tight); } .fx-section--soft{ background:var(--fx-soft); } .fx-section--gradient{ background:linear-gradient(180deg, var(--fx-surface), var(--fx-soft)); } .fx-section--dark{ background:var(--fx-dark); color:var(--fx-on-dark); } .fx-section--dark :where(h1,h2,h3,h4,h5,h6){ color:var(--fx-on-dark); } .fx-section--dark p, .fx-section--dark .fx-lead{ color:var(--fx-on-dark-muted); } .fx-section--dark a:not(.fx-btn){ color:var(--fx-on-dark); text-decoration-color:var(--color-accent); } .fx-section--dark a:not(.fx-btn):focus-visible{ outline-color:var(--color-accent); } /* ---- 24d. Solid-brand-color band (generic, factory-wide — any future site * can use a solid primary-color band, not shop-specific). AA CHECK (sRGB * rel. luminance): --fx-on-primary (cream #FBF7F2, L≈0.94) on --color-primary * (burgundy #5C0120, L≈0.02) -> (0.94+.05)/(0.02+.05) ≈ 14.1:1 (AAA). * --color-accent (gold #DDA77B, L≈0.45) on the same burgundy -> ≈7.1:1 (AAA * for normal text, clears AA 4.5:1 with margin) — identical pairing already * used by .fx-section--dark/stats-bar bands above, so no new risk. Gold is * used ONLY for the eyebrow here (dark-ground-only accent-as-text rule). */ .fx-section--primary{ background:var(--color-primary); color:var(--fx-on-primary); } .fx-section--primary :where(h1,h2,h3,h4,h5,h6){ color:var(--fx-on-primary); } .fx-section--primary p, .fx-section--primary .fx-lead{ color:var(--fx-on-dark-muted); } .fx-section--primary .fx-eyebrow{ color:var(--color-accent); } .fx-section--primary a:not(.fx-btn){ color:var(--fx-on-primary); text-decoration-color:var(--color-accent); } /* Overlap utility: pull a block up over the previous section (e.g. a card row). */ .fx-overlap{ margin-top:calc(-1 * var(--space-7)); position:relative; z-index:1; } /* Responsive auto-grid for card rows. */ .fx-grid{ display:grid; gap:var(--space-5); grid-template-columns:1fr; } @media (min-width:560px){ .fx-grid--2, .fx-grid--3, .fx-grid--4{ grid-template-columns:repeat(2,1fr); } } @media (min-width:900px){ .fx-grid--3{ grid-template-columns:repeat(3,1fr); } .fx-grid--4{ grid-template-columns:repeat(4,1fr); } } /* Keep Divi sections breathable but not cavernous on phones. */ @media (max-width:600px){ body .et_pb_section{ padding-top:var(--section-y-tight); padding-bottom:var(--section-y-tight); } } /* ========================================================================= * * 8. Hybrid imagery — real-photo figure frame + caption (fx_media output) * * ========================================================================= */ .fx-figure{ position:relative; display:block; margin:0; border-radius:var(--radius-lg); overflow:hidden; background:var(--fx-soft); box-shadow:var(--shadow-md); } .fx-figure__img{ display:block; width:100%; height:100%; aspect-ratio:var(--fx-ratio, 16 / 9); object-fit:cover; transition:transform 640ms var(--ease-out); } .fx-figure--tall{ --fx-ratio:3 / 4; } .fx-figure--wide{ --fx-ratio:16 / 9; } .fx-figure--square{ --fx-ratio:1 / 1; } .fx-figure--4-3{ --fx-ratio:4 / 3; } .fx-figure--3-2{ --fx-ratio:3 / 2; } .fx-figure--21-9{ --fx-ratio:21 / 9; } /* Framed variant: hairline inner ring + brand-tinted matte. */ .fx-figure--framed{ padding:8px; background:var(--fx-surface); box-shadow:var(--shadow-lg); } .fx-figure--framed .fx-figure__img{ border-radius:calc(var(--radius-lg) - 8px); } .fx-figure--framed::after{ content:""; position:absolute; inset:8px; border-radius:calc(var(--radius-lg) - 8px); box-shadow:var(--shadow-inset); pointer-events:none; } .fx-figure:hover .fx-figure__img{ transform:scale(1.04); } .fx-figure__caption{ position:relative; display:block; padding:var(--space-3) var(--space-4); font-size:var(--fs-sm); color:var(--fx-muted); line-height:1.5; background:var(--fx-surface); border-top:1px solid var(--fx-line); } /* Caption overlaid on the image (gradient scrim) variant. */ .fx-figure--overlay .fx-figure__caption{ position:absolute; left:0; right:0; bottom:0; border-top:0; color:var(--fx-on-dark); background:linear-gradient(0deg, color-mix(in srgb, var(--fx-dark) 78%, transparent), transparent); padding-top:var(--space-6); } /* ========================================================================= * * 9. Placeholder ART (fx_placeholder_image — elevated SVG frame) * * The PHP helper renders layered SVG art (gradient mesh + grain + motif + * * icon) inside .fx-ph; these rules frame it and place the label. Ratio set * * via --fx-ph-ratio (PLAYBOOK gotcha 3: aspect-ratio via CSS, not attr). * * ========================================================================= */ .fx-ph{ position:relative; display:flex; align-items:flex-end; justify-content:flex-start; width:100%; aspect-ratio:var(--fx-ph-ratio, 16 / 9); border-radius:var(--radius-md); overflow:hidden; isolation:isolate; background:var(--fx-soft); color:var(--fx-on-primary); box-shadow:var(--shadow-inset); } /* The inline SVG art layer fills the frame behind the label. */ .fx-ph__art, .fx-ph__svg, .fx-ph > svg{ position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; object-fit:cover; pointer-events:none; } /* A centred brand icon/motif glyph (optional). */ .fx-ph__icon{ position:absolute; z-index:1; inset:0; margin:auto; width:clamp(2.5rem, 14%, 4.5rem); height:auto; opacity:.92; color:currentColor; pointer-events:none; } /* Bracketed label in elegant small caps, bottom-left. */ .fx-ph__label{ position:relative; z-index:2; max-width:86%; margin:var(--space-4); font-family:var(--font-body); font-size:var(--fs-xs); font-weight:600; letter-spacing:.12em; text-transform:uppercase; line-height:1.35; padding:.4em .8em; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--fx-dark) 36%, transparent); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:var(--fx-on-dark); } /* Legacy/centered label fallback (older flat output centres its label). */ .fx-ph--center{ align-items:center; justify-content:center; } .fx-ph--center .fx-ph__label{ margin:0; text-align:center; } .fx-ph--1-1{ --fx-ph-ratio:1 / 1; } .fx-ph--4-3{ --fx-ph-ratio:4 / 3; } .fx-ph--3-2{ --fx-ph-ratio:3 / 2; } .fx-ph--16-9{ --fx-ph-ratio:16 / 9; } .fx-ph--3-4{ --fx-ph-ratio:3 / 4; } .fx-ph--21-9{ --fx-ph-ratio:21 / 9; } .fx-ph--primary{ background:var(--fx-grad-primary); color:var(--fx-on-primary); } .fx-ph--accent{ background:var(--fx-grad-accent); color:var(--fx-on-primary); } .fx-ph--dark{ background:var(--fx-grad-dark); color:var(--fx-on-dark); } .fx-ph--muted{ background:color-mix(in srgb, var(--color-text) 8%, var(--fx-surface)); color:var(--fx-muted); } .fx-ph--soft{ background:var(--fx-soft); color:var(--color-primary); } .fx-ph--surface{ background:linear-gradient(135deg, var(--fx-surface), var(--fx-soft)); color:var(--fx-muted); } /* ========================================================================= * * 10. Animated gradient mesh (ambient background utility — §2a) * * GPU-friendly: a blurred pseudo-element drifts via transform only. * * ========================================================================= */ .fx-mesh{ position:relative; isolation:isolate; overflow:hidden; } .fx-mesh::before{ content:""; position:absolute; inset:-25%; z-index:-1; pointer-events:none; background: radial-gradient(38% 44% at 22% 28%, color-mix(in srgb, var(--color-primary) 55%, transparent), transparent 70%), radial-gradient(34% 40% at 80% 22%, color-mix(in srgb, var(--color-accent) 48%, transparent), transparent 68%), radial-gradient(40% 46% at 68% 82%, color-mix(in srgb, var(--color-primary) 38%, transparent), transparent 72%); filter:blur(14px); opacity:.85; animation:fx-mesh-drift var(--fx-mesh-dur) ease-in-out infinite alternate; } .fx-mesh--soft::before{ opacity:.5; } @keyframes fx-mesh-drift{ 0% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(2%,-2%,0) scale(1.08); } 100%{ transform:translate3d(-2%,2%,0) scale(1.04); } } /* ========================================================================= * * 11. Hero accents — badges, mini-stat row, image overlay (§2d hero) * * ========================================================================= */ .fx-badges{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin:var(--space-4) 0 0; } .fx-badge{ display:inline-flex; align-items:center; gap:var(--space-2); padding:.4em .9em; border-radius:var(--radius-pill); font-size:var(--fs-xs); font-weight:600; letter-spacing:var(--tracking-wide); color:var(--color-primary); background:var(--fx-soft); border:1px solid color-mix(in srgb, var(--color-primary) 22%, transparent); } .fx-badge svg{ width:1em; height:1em; } .fx-section--dark .fx-badge{ color:var(--fx-on-dark); background:var(--fx-on-dark-line); border-color:var(--fx-on-dark-line); } .fx-ministats{ display:flex; flex-wrap:wrap; gap:var(--space-5) var(--space-6); margin:var(--space-6) 0 0; } .fx-ministat{ display:flex; flex-direction:column; gap:.2rem; } .fx-ministat__value{ font-family:var(--font-heading); font-weight:700; font-size:var(--fs-xl); line-height:1; color:var(--color-primary); font-variant-numeric:tabular-nums; } .fx-ministat__label{ font-size:var(--fs-xs); letter-spacing:.04em; text-transform:uppercase; color:var(--fx-muted); } .fx-section--dark .fx-ministat__value{ color:var(--color-accent); } .fx-section--dark .fx-ministat__label{ color:var(--fx-on-dark-muted); } /* Mini-stat divider (thin rule between cells on wider screens). */ @media (min-width:560px){ .fx-ministats{ gap:0; } .fx-ministat{ padding-inline:var(--space-5); border-left:1px solid var(--fx-line); } .fx-ministat:first-child{ padding-left:0; border-left:0; } .fx-section--dark .fx-ministat{ border-color:var(--fx-on-dark-line); } } /* Image overlay scrim for an over-photo hero (opacity via --fx-overlay 0..1). */ .fx-overlay{ position:relative; isolation:isolate; } .fx-overlay::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg, color-mix(in srgb, var(--fx-dark) calc(var(--fx-overlay, .5) * 70%), transparent), color-mix(in srgb, var(--fx-dark) calc(var(--fx-overlay, .5) * 100%), transparent)); } .fx-overlay > *{ position:relative; z-index:1; } /* ========================================================================= * * 12. Big stats / animated counters (§2d big_stats) * * ========================================================================= */ .fx-bigstats{ display:grid; gap:var(--space-6); grid-template-columns:repeat(2,1fr); } @media (min-width:760px){ .fx-bigstats{ grid-template-columns:repeat(4,1fr); } } .fx-bigstat{ text-align:center; padding:var(--space-3); } .fx-bigstat__value, .fx-count{ display:block; font-family:var(--font-heading); font-weight:700; font-size:var(--fs-3xl); line-height:1; color:var(--color-primary); font-variant-numeric:tabular-nums; letter-spacing:var(--tracking-tight); } .fx-bigstat__suffix{ color:var(--color-accent); } .fx-bigstat__label{ display:block; margin-top:var(--space-3); font-size:var(--fs-sm); letter-spacing:.06em; text-transform:uppercase; color:var(--fx-muted); font-weight:600; } .fx-section--dark .fx-bigstat__value, .fx-section--dark .fx-count{ color:var(--color-accent); } .fx-section--dark .fx-bigstat__label{ color:var(--fx-on-dark-muted); } /* ========================================================================= * * 13. Testimonials / blockquote (§ testimonials) * * ========================================================================= */ .fx-quote{ position:relative; display:flex; flex-direction:column; gap:var(--space-4); margin:0; padding:var(--space-6) var(--space-5) var(--space-5); background:var(--fx-surface); border:1px solid var(--fx-line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); transition:transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease); } .fx-quote:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); } /* Oversized opening quote mark in the heading face. */ .fx-quote::before{ content:"\201C"; position:absolute; top:-.18em; left:.3em; font-family:var(--font-heading); font-size:5rem; line-height:1; color:color-mix(in srgb, var(--color-primary) 22%, transparent); pointer-events:none; } .fx-quote__text{ position:relative; font-size:var(--fs-md); line-height:var(--lh); color:var(--color-text); } .fx-quote__foot{ display:flex; align-items:center; gap:var(--space-3); margin-top:auto; } .fx-avatar{ flex:0 0 auto; width:48px; height:48px; border-radius:var(--radius-pill); object-fit:cover; background:var(--fx-grad-primary); display:inline-flex; align-items:center; justify-content:center; color:var(--fx-on-primary); font-family:var(--font-heading); font-weight:700; font-size:var(--fs-md); box-shadow:var(--shadow-sm); } .fx-quote__name{ font-weight:700; color:var(--color-text); font-size:var(--fs-sm); line-height:1.3; } .fx-quote__meta{ color:var(--fx-muted); font-size:var(--fs-xs); line-height:1.3; } /* Star rating row. */ .fx-stars{ display:inline-flex; gap:.12em; color:var(--color-accent); font-size:var(--fs-md); letter-spacing:.06em; line-height:1; } /* ========================================================================= * * 14. Pricing tiers — featured tier + badge (§ pricing_tiers) * * ========================================================================= */ .fx-tier{ position:relative; display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-6) var(--space-5); background:var(--fx-surface); border:1px solid var(--fx-line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); transition:transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); } .fx-tier:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); } .fx-tier--featured{ border-color:color-mix(in srgb, var(--color-primary) 55%, transparent); box-shadow:var(--shadow-lg); background:linear-gradient(180deg, var(--fx-soft), var(--fx-surface)); } @media (min-width:900px){ .fx-tier--featured{ transform:scale(1.04); } .fx-tier--featured:hover{ transform:scale(1.04) translateY(-4px); } } .fx-tier__badge{ position:absolute; top:0; right:var(--space-5); transform:translateY(-50%); padding:.35em .9em; border-radius:var(--radius-pill); font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--fx-on-primary); background:var(--fx-grad-accent); box-shadow:var(--shadow-sm); } .fx-tier__name{ font-family:var(--font-heading); font-size:var(--fs-lg); font-weight:700; margin:0; color:var(--color-text); } .fx-tier__price{ font-family:var(--font-heading); font-weight:700; line-height:1; font-size:var(--fs-2xl); color:var(--color-primary); font-variant-numeric:tabular-nums; } .fx-tier__period{ font-size:var(--fs-sm); color:var(--fx-muted); font-weight:500; } .fx-tier__desc{ color:var(--fx-muted); font-size:var(--fs-sm); } .fx-tier__features{ list-style:none; margin:var(--space-3) 0; padding:0; display:flex; flex-direction:column; gap:var(--space-3); } .fx-tier__features li{ position:relative; padding-left:1.7em; font-size:var(--fs-sm); color:var(--color-text); line-height:1.5; } .fx-tier__features li::before{ content:""; position:absolute; left:0; top:.12em; width:1.1em; height:1.1em; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--color-accent) 18%, transparent); } .fx-tier__features li::after{ content:""; position:absolute; left:.34em; top:.36em; width:.34em; height:.6em; border:solid var(--color-accent); border-width:0 2px 2px 0; transform:rotate(45deg); } .fx-tier__cta{ margin-top:auto; padding-top:var(--space-3); } /* ========================================================================= * * 15. Gallery — masonry-ish grid with hover zoom (§ gallery_grid) * * ========================================================================= */ .fx-gallery{ display:grid; gap:var(--space-3); grid-template-columns:repeat(2,1fr); } @media (min-width:760px){ .fx-gallery{ grid-template-columns:repeat(3,1fr); gap:var(--space-4); } } .fx-gallery__item{ position:relative; overflow:hidden; border-radius:var(--radius-md); box-shadow:var(--shadow-sm); } .fx-gallery__img{ display:block; width:100%; aspect-ratio:var(--fx-ratio, 4 / 3); object-fit:cover; transition:transform 620ms var(--ease-out); } .fx-gallery__item:hover .fx-gallery__img{ transform:scale(1.08); } .fx-gallery__cap{ position:absolute; left:0; right:0; bottom:0; padding:var(--space-5) var(--space-3) var(--space-3); font-size:var(--fs-xs); font-weight:600; letter-spacing:.04em; color:var(--fx-on-dark); background:linear-gradient(0deg, color-mix(in srgb, var(--fx-dark) 75%, transparent), transparent); opacity:0; transform:translateY(6px); transition:opacity var(--t) var(--ease), transform var(--t) var(--ease-out); } .fx-gallery__item:hover .fx-gallery__cap{ opacity:1; transform:translateY(0); } /* Make the first cell span two on wide screens for editorial rhythm. */ @media (min-width:760px){ .fx-gallery--feature .fx-gallery__item:first-child{ grid-column:span 2; grid-row:span 2; } } /* ========================================================================= * * 16. Marquee — seamless infinite logo/word ribbon (§2d marquee) * * PHP duplicates the items inside the track; the track slides -50%. * * ========================================================================= */ .fx-marquee{ overflow:hidden; width:100%; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .fx-marquee__track{ display:flex; width:max-content; flex-wrap:nowrap; align-items:center; gap:var(--space-7); animation:fx-marquee-x var(--fx-marquee-dur) linear infinite; will-change:transform; } .fx-marquee:hover .fx-marquee__track{ animation-play-state:paused; } .fx-marquee--reverse .fx-marquee__track{ animation-direction:reverse; } .fx-marquee__item{ flex:0 0 auto; display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--font-heading); font-weight:600; font-size:var(--fs-lg); color:var(--fx-muted); white-space:nowrap; letter-spacing:.01em; } .fx-marquee__item::after{ content:"\2022"; margin-left:var(--space-7); color:color-mix(in srgb, var(--color-accent) 60%, transparent); } @keyframes fx-marquee-x{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } } /* Logo strip (static, no animation) — muted marks that lift on hover. */ .fx-logos{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-6) var(--space-7); } .fx-logo{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-weight:700; font-size:var(--fs-lg); color:var(--fx-muted); opacity:.7; filter:grayscale(1); transition:opacity var(--t) var(--ease), filter var(--t) var(--ease), color var(--t) var(--ease); } .fx-logo:hover{ opacity:1; filter:grayscale(0); color:var(--color-primary); } .fx-logo img{ max-height:2.2rem; width:auto; } /* ========================================================================= * * 17. Process timeline (§2d process) * * Vertical connector on mobile; horizontal node row on desktop. * * ========================================================================= */ .fx-process{ display:flex; flex-direction:column; gap:var(--space-6); position:relative; } .fx-process__step{ position:relative; display:flex; gap:var(--space-4); align-items:flex-start; } .fx-process__node{ flex:0 0 auto; position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:var(--radius-pill); background:var(--fx-grad-primary); color:var(--fx-on-primary); font-family:var(--font-heading); font-weight:700; font-size:var(--fs-md); box-shadow:var(--shadow-sm), 0 0 0 6px color-mix(in srgb, var(--color-primary) 10%, transparent); } .fx-process__node svg{ width:1.4rem; height:1.4rem; } /* Connector line linking the nodes (mobile = vertical). */ .fx-process__step:not(:last-child) .fx-process__node::after{ content:""; position:absolute; left:50%; top:100%; width:2px; height:calc(var(--space-6) + 100%); transform:translateX(-50%); background:linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 40%, transparent), transparent); } .fx-process__body{ padding-top:.35rem; } .fx-process__n{ font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--color-accent); } .fx-process__title{ font-family:var(--font-heading); font-size:var(--fs-lg); margin:.1rem 0 .3rem; color:var(--color-text); } .fx-process__body p{ color:var(--fx-muted); font-size:var(--fs-sm); margin:0; line-height:var(--lh); } @media (min-width:860px){ .fx-process{ flex-direction:row; gap:var(--space-5); } .fx-process__step{ flex:1 1 0; flex-direction:column; text-align:center; align-items:center; } .fx-process__step:not(:last-child) .fx-process__node::after{ left:100%; top:50%; width:calc(var(--space-5) + 100%); height:2px; transform:translateY(-50%); background:linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 40%, transparent), transparent); } .fx-process__body{ padding-top:0; } } .fx-section--dark .fx-process__node{ box-shadow:var(--shadow-sm), 0 0 0 6px var(--fx-on-dark-line); } .fx-section--dark .fx-process__title{ color:var(--fx-on-dark); } .fx-section--dark .fx-process__body p{ color:var(--fx-on-dark-muted); } /* ========================================================================= * * 18. Header / navigation chrome (Theme Builder Code module) * * Mobile-first: base = wordmark + hamburger + slide-down panel. * * factory-ui.js toggles body.fx-menu-open (and aria-expanded). * * ========================================================================= */ .fx-site-header{ font-family:var(--font-body); } /* Optional announcement strip. */ .fx-topbar{ background:var(--color-primary); color:var(--fx-on-primary); text-align:center; font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; padding:var(--space-2) var(--gutter); } .fx-topbar a{ color:var(--fx-on-primary); text-decoration:underline; } /* Sticky bar. */ .fx-header-bar{ position:sticky; top:0; z-index:var(--z-header); background:color-mix(in srgb, var(--fx-surface) 90%, transparent); -webkit-backdrop-filter:saturate(140%) blur(8px); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--fx-line); box-shadow:var(--shadow-sm); } .fx-header-inner{ display:flex; align-items:center; gap:var(--space-3); max-width:var(--container); margin-inline:auto; padding:var(--space-3) var(--gutter); } .fx-wordmark{ flex:1 1 auto; min-width:0; color:var(--color-primary) !important; font-size:var(--fs-lg); font-weight:700; line-height:1; text-decoration:none; letter-spacing:.01em; } .fx-wordmark:hover{ color:var(--fx-primary-hover) !important; } .fx-header-actions{ flex:0 0 auto; display:flex; align-items:center; gap:var(--space-2); } .fx-header-actions .fx-btn{ min-height:44px; padding:.55em 1.1em; font-size:var(--fs-sm); } /* Hamburger (base = visible on phones). */ .fx-menu-toggle{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--color-primary); cursor:pointer; -webkit-tap-highlight-color:transparent; } .fx-menu-toggle svg{ display:block; } .fx-menu-toggle .fx-ico-close{ display:none; } body.fx-menu-open .fx-menu-toggle .fx-ico-open{ display:none; } body.fx-menu-open .fx-menu-toggle .fx-ico-close{ display:block; } /* Nav panel (base = collapsed dropdown under the bar). */ .fx-nav{ position:absolute; left:0; right:0; top:100%; z-index:var(--z-menu); background:var(--fx-surface); border-bottom:1px solid var(--fx-line); box-shadow:var(--shadow-md); max-height:0; overflow:hidden; visibility:hidden; opacity:0; pointer-events:none; transition:max-height var(--t) var(--ease-out), opacity var(--t), visibility 0s linear var(--t); } body.fx-menu-open .fx-nav{ max-height:75vh; overflow-y:auto; visibility:visible; opacity:1; pointer-events:auto; transition:max-height var(--t) var(--ease-out), opacity var(--t), visibility 0s linear 0s; } .fx-nav ul{ list-style:none !important; margin:0 !important; padding:var(--space-1) 0 !important; display:flex; flex-direction:column; } .fx-nav li{ margin:0 !important; padding:0 !important; border-bottom:1px solid var(--fx-line); } .fx-nav li:last-child{ border-bottom:0; } .fx-nav li::before{ content:none !important; } .fx-nav a{ display:flex; align-items:center; width:100%; min-height:52px; padding:var(--space-3) var(--gutter); color:var(--color-text) !important; font-weight:500; font-size:var(--fs-base); text-decoration:none; transition:background var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .fx-nav a:hover, .fx-nav a[aria-current="page"]{ background:var(--fx-soft); color:var(--color-primary) !important; box-shadow:inset 3px 0 0 var(--color-accent); } /* Scrim behind the open panel. */ .fx-nav-scrim{ display:none; } body.fx-menu-open .fx-nav-scrim{ display:block; position:fixed; inset:0; z-index:var(--z-scrim); background:color-mix(in srgb, var(--fx-dark) 42%, transparent); } body.fx-menu-open{ overflow:hidden; } /* Desktop (≥901px): inline nav, underline-on-hover, no hamburger/scrim. */ @media (min-width:901px){ .fx-menu-toggle{ display:none; } .fx-wordmark{ flex:0 0 auto; } .fx-nav{ position:static; flex:1 1 auto; background:transparent; border:0; box-shadow:none; max-height:none; overflow:visible; visibility:visible; opacity:1; pointer-events:auto; } .fx-nav ul{ flex-direction:row; align-items:center; justify-content:center; gap:var(--space-6); padding:0 !important; } .fx-nav li{ width:auto; border:0; } .fx-nav a{ position:relative; width:auto; min-height:44px; padding:var(--space-2) 0; font-size:var(--fs-sm); letter-spacing:var(--tracking-wide); white-space:nowrap; } .fx-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:var(--space-2); height:2px; background:var(--color-accent); transform:scaleX(0); transform-origin:left; transition:transform var(--t) var(--ease-out); } .fx-nav a:hover{ background:transparent; box-shadow:none; color:var(--fx-primary-hover) !important; } .fx-nav a:hover::after{ transform:scaleX(1); } .fx-nav a[aria-current="page"]{ background:transparent; box-shadow:none; color:var(--color-primary) !important; font-weight:600; } .fx-nav a[aria-current="page"]::after{ transform:scaleX(1); } .fx-nav-scrim{ display:none !important; } } /* ========================================================================= * * 19. Footer chrome (Theme Builder Code module) * * Dark band. Includes name, address, phone, email, social, hours, ©. * * ========================================================================= */ .fx-site-footer{ background:var(--fx-dark); color:var(--fx-on-dark); font-family:var(--font-body); } .fx-footer-grid{ max-width:var(--container); margin-inline:auto; padding:var(--space-8) var(--gutter) var(--space-6); display:grid; grid-template-columns:1fr; gap:var(--space-6); } @media (min-width:600px){ .fx-footer-grid{ grid-template-columns:repeat(2,1fr); column-gap:var(--space-7); } } @media (min-width:980px){ .fx-footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1.4fr; } } .fx-site-footer .fx-wordmark{ color:var(--fx-on-dark) !important; font-size:var(--fs-xl); } .fx-site-footer .fx-wordmark:hover{ color:var(--color-accent) !important; } .fx-footer-tagline{ color:var(--fx-on-dark-muted); font-size:var(--fs-sm); line-height:var(--lh); margin:var(--space-3) 0 var(--space-4); max-width:36ch; } .fx-footer-title{ color:var(--fx-on-dark) !important; font-size:var(--fs-md); font-weight:600; margin:0 0 var(--space-4); letter-spacing:.01em; } .fx-footer-links{ list-style:none !important; margin:0 !important; padding:0 !important; display:flex; flex-direction:column; gap:var(--space-3); } .fx-footer-links li{ margin:0 !important; padding:0 !important; } .fx-footer-links li::before{ content:none !important; } .fx-footer-links a{ color:var(--fx-on-dark-muted) !important; text-decoration:none; font-size:var(--fs-sm); transition:color var(--t) var(--ease), padding-left var(--t) var(--ease); } .fx-footer-links a:hover{ color:var(--color-accent) !important; padding-left:3px; } /* Contact block (address / phone / email rows). */ .fx-footer-contact{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-3); } .fx-footer-contact li{ display:flex; gap:var(--space-3); align-items:flex-start; color:var(--fx-on-dark-muted); font-size:var(--fs-sm); line-height:1.5; } .fx-footer-contact a{ color:var(--fx-on-dark) !important; text-decoration:none; } .fx-footer-contact a:hover{ color:var(--color-accent) !important; } .fx-footer-contact svg{ flex:0 0 auto; width:18px; height:18px; margin-top:.1em; color:var(--color-accent); } /* Opening hours. */ .fx-hours{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2); } .fx-hours li{ display:flex; justify-content:space-between; gap:var(--space-4); color:var(--fx-on-dark-muted); font-size:var(--fs-sm); border-bottom:1px solid var(--fx-on-dark-line); padding-bottom:var(--space-2); } .fx-hours li:last-child{ border-bottom:0; } .fx-hours .fx-hours__days{ color:var(--fx-on-dark); } /* Social icon row. */ .fx-social{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3); } .fx-social a{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--radius-pill); color:var(--fx-on-dark) !important; background:var(--fx-on-dark-line); transition:background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t-fast) var(--ease); } .fx-social a:hover{ background:var(--color-accent); color:var(--fx-on-primary) !important; transform:translateY(-2px); } .fx-social svg{ width:20px; height:20px; display:block; } /* Sub-footer. */ .fx-footer-bottom{ border-top:1px solid var(--fx-on-dark-line); max-width:var(--container); margin-inline:auto; padding:var(--space-4) var(--gutter) var(--space-6); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3); } .fx-footer-bottom p{ margin:0; color:var(--fx-on-dark-muted); font-size:var(--fs-xs); } @media (max-width:560px){ .fx-footer-bottom{ flex-direction:column; align-items:flex-start; } } /* ========================================================================= * * 20. Forms — Contact Form 7 + generic inputs * * ========================================================================= */ .fx-form, .wpcf7-form{ display:block; } .fx-form label, .wpcf7-form label{ display:block; font-weight:600; font-size:var(--fs-sm); color:var(--color-text); margin-bottom:var(--space-2); } .fx-field{ margin-bottom:var(--space-4); } .fx-form input:not([type=checkbox]):not([type=radio]):not([type=submit]), .fx-form select, .fx-form textarea, .wpcf7-form input:not([type=checkbox]):not([type=radio]):not([type=submit]), .wpcf7-form select, .wpcf7-form textarea{ width:100%; min-height:48px; font-family:var(--font-body) !important; font-size:var(--fs-base); color:var(--color-text); background:var(--fx-surface); border:1px solid var(--fx-line); border-radius:var(--radius-sm); padding:.7em .9em; box-shadow:none; transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .fx-form textarea, .wpcf7-form textarea{ min-height:8rem; resize:vertical; } .fx-form input:focus, .fx-form select:focus, .fx-form textarea:focus, .wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus{ outline:0; border-color:var(--color-primary); box-shadow:var(--ring); } .fx-form input::placeholder, .wpcf7-form input::placeholder, .wpcf7-form textarea::placeholder{ color:var(--fx-muted); } .wpcf7-form input[type=checkbox], .wpcf7-form input[type=radio], .fx-form input[type=checkbox], .fx-form input[type=radio]{ accent-color:var(--color-primary); width:1.1rem; height:1.1rem; } .wpcf7-form input[type=submit], .fx-form button[type=submit], .fx-form input[type=submit]{ min-height:48px; padding:.7em 1.8em; font-family:var(--font-body); font-weight:600; letter-spacing:var(--tracking-wide); color:var(--fx-on-primary); background:var(--color-primary); border:1.5px solid var(--color-primary); border-radius:var(--radius-sm); cursor:pointer; transition:background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .wpcf7-form input[type=submit]:hover, .fx-form button[type=submit]:hover, .fx-form input[type=submit]:hover{ background:var(--fx-primary-hover); border-color:var(--fx-primary-hover); box-shadow:var(--shadow-primary); } /* Validation + response (CF7 toggles these classes). */ .wpcf7-form .wpcf7-not-valid{ border-color:color-mix(in srgb, var(--color-primary) 55%, var(--color-text)) !important; box-shadow:var(--ring); } .wpcf7-not-valid-tip{ color:var(--color-primary); font-size:var(--fs-xs); margin-top:var(--space-2); } .wpcf7-response-output{ border-radius:var(--radius-sm); border:1px solid var(--fx-line); border-left:3px solid var(--color-accent); background:var(--fx-soft); color:var(--color-text); font-size:var(--fs-sm); padding:var(--space-3) var(--space-4); margin:var(--space-4) 0 0; } /* ========================================================================= * * 21. Sticky bottom CTA / tap-to-call bar (factory-ui.js) * * Hidden until JS reveals it; body[data-fx-cta] is the toggle flag. * * ========================================================================= */ .fx-stickybar{ position:fixed; left:0; right:0; bottom:0; z-index:var(--z-sticky); transform:translateY(120%); transition:transform var(--t) var(--ease-out); padding:var(--space-2) var(--gutter); padding-bottom:calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); background:color-mix(in srgb, var(--fx-surface) 92%, transparent); -webkit-backdrop-filter:saturate(150%) blur(10px); backdrop-filter:saturate(150%) blur(10px); border-top:1px solid var(--fx-line); box-shadow:0 -8px 28px color-mix(in srgb, var(--fx-dark) 16%, transparent); } .fx-stickybar.is-visible{ transform:translateY(0); } .fx-stickybar__inner{ display:flex; align-items:center; gap:var(--space-3); max-width:var(--container); margin-inline:auto; } .fx-stickybar__text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; line-height:1.2; } .fx-stickybar__label{ font-weight:600; font-size:var(--fs-sm); color:var(--color-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fx-stickybar__sub{ font-size:var(--fs-xs); color:var(--fx-muted); } .fx-stickybar__actions{ flex:0 0 auto; display:flex; align-items:center; gap:var(--space-2); } .fx-stickybar__btn, .fx-stickybar__call{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); min-height:44px; padding:.55em 1.2em; font-family:var(--font-body); font-weight:600; font-size:var(--fs-sm); letter-spacing:var(--tracking-wide); border-radius:var(--radius-sm); text-decoration:none; white-space:nowrap; transition:background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease); } .fx-stickybar__btn{ background:var(--color-primary); color:var(--fx-on-primary) !important; border:1.5px solid var(--color-primary); } .fx-stickybar__btn:hover{ background:var(--fx-primary-hover); border-color:var(--fx-primary-hover); } .fx-stickybar__call{ background:transparent; color:var(--color-primary) !important; border:1.5px solid var(--color-primary); } .fx-stickybar__call:hover{ background:var(--color-primary); color:var(--fx-on-primary) !important; } .fx-stickybar__call svg{ width:18px; height:18px; } .fx-stickybar__close{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:0; border-radius:var(--radius-pill); background:transparent; color:var(--fx-muted); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background var(--t) var(--ease), color var(--t) var(--ease); } .fx-stickybar__close:hover{ background:var(--fx-soft); color:var(--color-text); } .fx-stickybar__close svg{ width:18px; height:18px; } /* Reserve space so the fixed bar never hides page-bottom content. */ body.fx-has-stickybar{ padding-bottom:5rem; } /* Desktop ≥701px: a centred floating bar rather than full-bleed. */ @media (min-width:701px){ .fx-stickybar{ left:50%; right:auto; transform:translate(-50%,120%); bottom:var(--space-5); width:min(640px, calc(100% - 2 * var(--gutter))); border:1px solid var(--fx-line); border-radius:var(--radius-pill); padding:var(--space-2) var(--space-5); box-shadow:var(--shadow-lg); } .fx-stickybar.is-visible{ transform:translate(-50%,0); } /* Reserve the pill's own height + its bottom offset (var(--space-5)) so fixed-bar pages never cover page-bottom content at desktop widths — was `padding-bottom:0`, which let the pill sit on top of ~64-80px of whatever scrolled to the bottom of the viewport on EVERY desktop page (site-wide bug, not shop-only, since the sticky bar is global chrome). */ body.fx-has-stickybar{ padding-bottom:calc(var(--space-5) * 2 + 56px); } } /* ========================================================================= * * 22. WooCommerce baseline (shop sites) — compact, fully tokenized * * Guarded on the WC body classes (PLAYBOOK gotcha 11) so brochure sites * * are unaffected; shops get branded buttons/prices/cards/notices. * * ========================================================================= */ body.woocommerce a.button, body .woocommerce a.button, body.woocommerce button.button, body .woocommerce button.button, body.woocommerce .button, body .woocommerce .button, body.woocommerce-page a.button, body.woocommerce-page button.button, body.woocommerce-page .button, body.woocommerce #respond input#submit, body .woocommerce #respond input#submit, body.woocommerce-page #respond input#submit, body .single_add_to_cart_button, body .wc-block-components-button{ font-family:var(--font-body) !important; font-weight:600 !important; letter-spacing:var(--tracking-wide) !important; text-transform:none !important; background-color:var(--color-primary) !important; color:var(--fx-on-primary) !important; border:1.5px solid var(--color-primary) !important; border-radius:var(--fx-btn-radius) !important; padding:.8em 1.8em !important; line-height:1.3 !important; transition:background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), opacity var(--t) var(--ease), transform var(--t) var(--ease) !important; } body.woocommerce a.button:hover, body .woocommerce a.button:hover, body.woocommerce button.button:hover, body .woocommerce button.button:hover, body.woocommerce .button:hover, body .woocommerce .button:hover, body.woocommerce-page a.button:hover, body .single_add_to_cart_button:hover{ background-color:var(--fx-primary-hover) !important; border-color:var(--fx-primary-hover) !important; color:var(--fx-on-primary) !important; } body.woocommerce .price, body .woocommerce .price, body.woocommerce-page .price, body.woocommerce span.amount, body .woocommerce span.amount, body.woocommerce-page span.amount{ color:var(--color-primary); font-weight:700; } body.woocommerce span.onsale, body .woocommerce span.onsale, body.woocommerce-page span.onsale{ background:var(--color-accent) !important; color:var(--fx-on-primary) !important; border-radius:var(--radius-pill); min-height:0; min-width:0; line-height:1; padding:.5em .9em; font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:var(--fs-xs); box-shadow:var(--shadow-sm); } body.woocommerce ul.products li.product, body .woocommerce ul.products li.product{ background:var(--fx-surface); border:1px solid var(--fx-line); border-radius:var(--radius-lg); padding:14px 14px 18px; box-shadow:var(--shadow-sm); transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease); } body.woocommerce ul.products li.product:hover, body .woocommerce ul.products li.product:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); } body.woocommerce ul.products li.product img, body .woocommerce ul.products li.product img, body.woocommerce-page ul.products li.product img{ aspect-ratio:1 / 1; object-fit:cover; width:100%; border-radius:var(--radius-md); } body.woocommerce ul.products li.product h2.woocommerce-loop-product__title, body .woocommerce ul.products li.product h2.woocommerce-loop-product__title, body.woocommerce-page ul.products li.product h2.woocommerce-loop-product__title, body.woocommerce ul.products li.product .woocommerce-loop-product__title, body .woocommerce ul.products li.product .woocommerce-loop-product__title, body.woocommerce-page ul.products li.product .woocommerce-loop-product__title{ font-family:var(--font-heading) !important; font-size:var(--fs-lg) !important; color:var(--color-text) !important; } body .woocommerce-message, body .woocommerce-info, body .woocommerce-error, body ul.woocommerce-error{ border-radius:var(--radius-md); border:1px solid var(--fx-line); border-left:3px solid var(--color-accent); background:var(--fx-soft) !important; color:var(--color-text) !important; box-shadow:var(--shadow-sm); font-size:var(--fs-sm); } body .woocommerce-message::before, body .woocommerce-info::before, body .woocommerce-error::before{ color:var(--color-accent) !important; } body .woocommerce form .form-row input.input-text, body .woocommerce form .form-row textarea, body .woocommerce form .form-row select{ font-family:var(--font-body) !important; background:var(--fx-surface) !important; border:1px solid var(--fx-line) !important; border-radius:var(--radius-sm) !important; color:var(--color-text) !important; padding:.7em .9em !important; min-height:48px; } body .woocommerce form .form-row input.input-text:focus, body .woocommerce form .form-row textarea:focus{ border-color:var(--color-primary) !important; box-shadow:var(--ring) !important; outline:0 !important; } /* ========================================================================= * * 24. BOLD PRIMITIVES — dominant-ground utilities, page-load entrance, * * editorial hero / statement / editorial-split, atmosphere hooks. * * (Consumed by the code-module composites the fx_* library emits AND by * * per-site custom_css. All token-driven; reduced-motion + no-JS safe.) * * ========================================================================= */ /* ---- 24a. Orchestrated page-load entrance (data-fx-enter contract) -------- * * Items are fully VISIBLE by default (no-JS / JS-failed / reduced-motion safe). * A co-located inline