/* Theme Name: SINO FRESH Author: Shandong SINO FRESH Pet Food Co., Ltd. Text Domain: sinofresh Version: 2.10.90 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Description: Block theme (FSE) for SINO FRESH pet supplements. Visual system v2: single typeface (Inter 400/600/700), 6-colour palette — Ink #1C2B24 / Forest #1B4D3E / Mist #F3F6F4 / Paper #FFFFFF / Line #DCE2DF / Kiln #B54E0F (CTA only). Flat surfaces, hairlines instead of shadows, unified 6px radius. */ /* Fonts load from theme.json fontFace (assets/fonts/plex-{400,600,700}.woff2). */ /* === 0. Horizontal overflow guard ---------------------------------------- A single element wider than the viewport means horizontal scrolling on every real phone. Clip at the root so nothing can push the page sideways; `clip` (not `hidden`) never creates a scroll container, so position:sticky keeps working. Pre-2022 browsers fall back to hidden via the first line. */ html, body { overflow-x: hidden; overflow-x: clip; } /* === 1. Header navigation submenu (dropdown) === WP's Navigation block has no submenu colour attributes (submenus inherit the nav text colour = card-white on a white popup -> invisible). */ .wp-block-navigation .wp-block-navigation__submenu-container { background-color: var(--wp--preset--color--card-white); border: 1px solid var(--wp--preset--color--border-light); border-radius: 6px; box-shadow: none; min-width: 180px; } .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content a, .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: var(--wp--preset--color--text-primary); font-weight: 400; } .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item { border-radius: 6px; transition: background-color 0.15s ease; } .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:hover { background-color: var(--wp--preset--color--bg-light); } /* Keep header on one line: let the nav shrink instead of pushing the CTA out */ .wp-block-navigation { flex-shrink: 1; min-width: 0; } /* === 2. Tables === */ .wp-block-table { overflow-x: auto; } .wp-block-table table { border-collapse: collapse; width: 100%; } .wp-block-table th, .wp-block-table td { border: 1px solid var(--wp--preset--color--border-light); padding: 10px 14px; text-align: left; vertical-align: top; font-size: 14px; line-height: 1.5; } .wp-block-table thead th { background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--card-white); font-family: var(--wp--preset--font-family--heading); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .wp-block-table tbody td:first-child { font-weight: 600; color: var(--wp--preset--color--text-primary); } .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: var(--wp--preset--color--bg-light); } .wp-block-table.is-style-stripes { border-bottom: none; } /* Core's .is-style-stripes sets border-color:transparent on cells at (0,2,1); re-assert the token colour at higher specificity so the grid stays visible. */ .wp-block-table.is-style-stripes table th, .wp-block-table.is-style-stripes table td { border-color: var(--wp--preset--color--border-light); } /* === 3. Fluent Forms === (was Gravity Forms; appearance replicated for the GF→FF template switch. Baseline measured on the GF render at 2.10.80: button bg --cta, radius 6px, padding 14px/24px, full card width; text/email/tel inputs 48px tall, radius 6px, border --border-medium; selects self-sized; focus border --cta; 16px row gap; 6px label margin. GF's phone-country-selector rules are gone with GF — FF phone fields are plain tel inputs.) */ .fluentform .ff-btn-submit, .fluentform input[type="submit"], .fluentform button[type="submit"] { background-color: var(--wp--preset--color--cta) !important; background-image: none !important; color: #FFFFFF !important; border: none !important; border-radius: 6px !important; padding: 14px 24px !important; width: 100% !important; font-family: var(--wp--preset--font-family--heading) !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer; transition: background-color 0.15s ease; } .fluentform .ff-btn-submit:hover, .fluentform input[type="submit"]:hover, .fluentform button[type="submit"]:hover { background-color: var(--wp--preset--color--cta-hover) !important; background-image: none !important; } .fluentform .ff-el-form-control { border: 1px solid var(--wp--preset--color--border-medium) !important; border-radius: 6px !important; padding: 12px 14px !important; font-size: 16px !important; } /* Selects: let the control size itself so the option text is never clipped (same fix the GF render needed — a fixed height starves the content box). */ select.ff-el-form-control { height: auto !important; line-height: normal !important; padding-top: 12px !important; padding-bottom: 12px !important; } /* Single-line inputs: 48px keeps the 44px touch-target minimum; height wins over padding so the browser centres the text vertically. */ input.ff-el-form-control[type="text"], input.ff-el-form-control[type="email"], input.ff-el-form-control[type="tel"] { height: 48px !important; padding-top: 0 !important; padding-bottom: 0 !important; } .fluentform input:focus, .fluentform select:focus, .fluentform textarea:focus { border-color: var(--wp--preset--color--cta) !important; outline: none; } /* Compact row rhythm: FF's default group margin and label spacing are airier than the GF render — 16px / 6px keeps the lead form on roughly one screen. */ .fluentform .ff-el-group { margin-bottom: 16px !important; } .fluentform .ff-el-input--label { margin-bottom: 6px !important; } /* WhatsApp fallback hint (Form 2; reimplemented on the Fluent Forms submit hook — see functions.php). Standalone class so it works inside FF's button wrapper, which is a flex row like GF's footer was. */ .fluentform .sf-gf-wa-hint { flex: 0 0 100%; width: 100%; margin: 0 !important; padding: 0 !important; font-family: var(--wp--preset--font-family--body) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.5 !important; color: var(--wp--preset--color--text-secondary) !important; text-align: center; } /* Default success (confirmation) messages: FF renders them inside the form wrapper, which sits on the white .sf-form-card — pin the dark body color so the message never lands light-on-white. (The COA certificate result keeps its own .sf-cert-result styles, reimplemented with the FF hook.) */ .fluentform .ff-message-success { color: var(--wp--preset--color--text-primary); } /* Field labels: forms live inside white cards that sit on deep-green sections carrying textColor:card-white — the card sets its own background but never resets text colour, so FF labels inherit white-on-white. Pin the dark body colour at the wrapper level (same root cause / fix as .ff-message-success above). Labels keep FF's own weight/size; only the colour source changes. */ .fluentform { color: var(--wp--preset--color--text-primary); } /* === 4. Core search block (templates/search.html) === */ .wp-block-search__input { border: 1px solid var(--wp--preset--color--border-medium) !important; border-radius: 6px !important; padding: 10px 14px !important; font-size: 15px !important; } .wp-block-search__input:focus { border-color: var(--wp--preset--color--cta) !important; outline: none; } /* === 5. Dynamic post blocks: inner anchors follow the block's own colour === theme.json paints every link Forest. Inside the Forest post header that makes the category tag and the author name invisible, so let these two inherit. */ .wp-block-post-terms a, .wp-block-post-author-name a { color: inherit; } /* === 6. Focus visibility (WCAG 2.2 — never remove the focus ring) === */ a:focus-visible, button:focus-visible, .wp-element-button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--wp--preset--color--cta); outline-offset: 2px; } /* === 7. Content width --------------------------------------------------- WP does not emit the `is-layout-constrained` class for every top-level section of this theme's front page, so the content cap that theme.json declares (contentSize: 1200px) is re-asserted here at ZERO specificity: wherever WP does apply its own layout or alignment rules they still win, and inside this theme the 1364px full-width fallback that text was inheriting becomes a readable 1200px measure. */ :where(.wp-site-blocks > .wp-block-group > *) { max-width: var(--wp--style--global--content-size, 1200px); margin-inline: auto; } /* the FAQ list hangs off the same left edge as the section heading and subtitle: it adopts the very same content measure and centring box the headings use, so both edges line up to the pixel. The hairline rules and the +/− markers then land on the heading's right edge too. */ .sf-faq { /* FAQ lists read best at a narrow centred measure. The group's own WP layout caps its children, but this rule caps the GROUP itself — without it the group element stays at the 1200px global measure and left-aligned headings above it stop lining up with the accordion's left edge. */ max-width: 800px; margin-inline: auto; } /* centred-heading variant (quality page: the h2 lives inside the group and is centre-aligned) — keep that design's narrower centred measure */ .sf-faq:has(> .has-text-align-center) { max-width: 800px; } /* === 8. Card system v2 ------------------------------------------------- Three treatments replace the "white rounded box" reflex that made every section look alike. A card is defined by its hairline, not by a fill or a drop shadow; the band behind it supplies the tone. Radius is unified at 6px. The inline `border-radius:8px` and per-card padding were removed from the markup, so these rules are the single source of truth. */ .sf-card { border: 1px solid var(--wp--preset--color--border-light); border-radius: 6px; transition: border-color 0.2s ease, transform 0.2s ease; } /* Hover = a 2px lift + a darker hairline. No shadow (flat surfaces rule) and no colour fill, so a row of five cards stays calm when the pointer sweeps across it. The lift is declared on the card, never on its children. Edge-jitter guard: a card that lifts on hover oscillates when the pointer sits exactly on its edge (card moves up -> pointer "leaves" -> card drops -> pointer "enters" -> repeat). The transparent ::after extends the hover hit area 4px past the border, so the pointer stays inside the card's hit region after the 2px lift. z-index:-1 paints it behind the card's content, so links inside stay clickable; it is invisible by design. */ .sf-card, .sf-tile { position: relative; } .sf-card::after, .sf-tile::after { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; z-index: -1; } .sf-card:hover, .sf-tile:hover { transform: translateY(-2px); border-color: var(--wp--preset--color--accent); } .sf-card--roomy { padding: 24px; } .sf-card--quote { padding: 24px; } .sf-card--flush { padding: 0; overflow: hidden; } /* Stretched link: the title anchor covers the whole card via an inset pseudo-element, so image, title, and padding all activate the same link with a single tab stop. The card is position:relative (declared above); the -4px hover hit-area ::after sits at z-index:-1 behind the content, so this z-index:1 overlay never competes with it. The Read More affordance is a non-interactive (its own styling kept below). */ .sf-card__title-link { color: inherit; text-decoration: none; } /* WP core sets :where(.wp-block-group.wp-block-group-is-layout-constrained) {position:relative}, which makes the card's inner content group the containing block for the title-link ::after — so inset:0 would cover only the text block and never the image slot above it. Reset that group to static here so the ::after resolves to .sf-card (position:relative above) and covers the whole card, image included. */ .sf-card--flush .wp-block-group-is-layout-constrained { position: static; } .sf-card__title-link::after { content: ''; position: absolute; inset: 0; z-index: 1; } .sf-card__more { font-weight: inherit; color: var(--wp--preset--color--primary); } .sf-card__title-link:focus-visible { outline: none; } .sf-card__title-link:focus-visible::after { outline: 2px solid var(--wp--preset--color--brand-green); outline-offset: 2px; } /* Equal-height tour cards: the two Tour Options white cards sit in flex columns that stretch to equal height, but the cards themselves only grow to their own text. Pull them to 100% so the bottoms align. border-box is required — .wp-block-column is content-box and height:100% would otherwise overflow past the column by the card's padding. */ .sf-tour-card { height: 100%; box-sizing: border-box; } /* Cards stretch to their column so all card bottoms in a row align (the columns container is a flex row, so cards of unequal content height otherwise end at different baselines). Applies to both plain and stretch-aligned columns: Cooperation Models + OEM/ODM (--roomy) and Latest Articles (--flush). Plain .sf-card (Certifications) is excluded — its cards already align with each other. On mobile the columns stack and the column height becomes indefinite, so height:100% resolves to auto and stacking is unchanged. */ .wp-block-column > .sf-card--roomy, .wp-block-column > .sf-card--flush { box-sizing: border-box; height: 100%; } /* Product tiles: full-bleed image (flush to the card border on top and both sides, no plinth letterboxing), copy block keeps its own padding. object-fit:cover lets the square render crop instead of showing gaps. */ .sf-tile { display: flex; flex-direction: column; height: 100%; padding: 0 0 18px; border: 1px solid var(--wp--preset--color--border-light); border-radius: 6px; transition: border-color 0.2s ease, transform 0.2s ease; } .sf-tile__media { margin: 0 0 14px !important; /* the media box is a fixed-size frame: flex must never stretch or shrink it, otherwise engines that resolve aspect-ratio boxes differently (WebKit/Safari) reflow the whole tile when the image loads */ flex: 0 0 auto; /* top corners follow the card radius; the card clips overflow anyway */ border-radius: 6px 6px 0 0; /* the plinth clips the 1.03 zoom so the render never spills past the tile */ overflow: hidden; } /* Linked media (wp:image linkDestination:"custom") emits
. Core block-library sets `.wp-block-image > a { display: inline-block }`; an inline-block whose only child is block-level (our `.sf-tile__media img` is display:block) takes its baseline from its bottom margin edge, so the figure's line box keeps the strut descender below the render — measured 7.59px at 16px/1.6, a light band between the image and the card copy. Block-level the anchor and the media box is image-height again, so a linked tile is geometrically identical to the unlinked one it replaced. */ .sf-tile__media > a { display: block; } .sf-tile__media img { display: block; width: 100%; height: auto; /* The square frame lives on the IMG, not on the figure. WebKit mis-computes an aspect-ratio box that is also a flex item with a percentage-height img inside (figure grew to ~2x the column width while the img painted at half of it -> a large blank band above/below the render). With the ratio on the replaced element itself and no percentage heights anywhere, Chrome, Safari and Firefox derive identical geometry. Safari < 15.4 (no aspect-ratio) falls back to the images' natural 1:1 ratio. */ aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.3s ease; } .sf-tile:hover .sf-tile__media img { transform: scale(1.03); } /* the image bleeds, so the copy block carries the horizontal padding */ .sf-tile > h3, .sf-tile > p { padding-left: 18px; padding-right: 18px; } .sf-tile h3 { margin: 0 0 6px; font-size: 16px; line-height: 1.3; } .sf-tile p { margin: 0; } /* the Learn More link sinks to the card foot so eight cards bottom-align */ .sf-tile p:last-child { margin-top: auto !important; padding-top: 12px; } /* === 9. Dosage grid: an even 4 x 2 catalogue --------------------------- The "lead tile spans two columns" experiment is gone: with an even count it only produced a ragged third row and ~200px of extra height. */ .wp-block-columns.sf-dosage-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: stretch; } .wp-block-columns.sf-dosage-grid > .wp-block-column { margin: 0; } /* === 10. Statement strip: five claims on one ruled line ----------------- "Formulated Clean" is a compliance statement, not a product grid, so it reads as a single ruled row instead of five centred cards. */ .wp-block-columns.sf-strip { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; } .sf-strip > .wp-block-column { margin: 0; padding: 0 18px; border-left: 1px solid var(--wp--preset--color--border-light); } .sf-strip > .wp-block-column:first-child { padding-left: 0; border-left: none; } .sf-strip p { margin: 0; } /* each claim leads with a grass-green check mark (brand-green) in front of deep forest text: flex keeps the check on the same line as the text. The section headline is centred, so each claim centres inside its cell. */ .sf-strip .sf-claim { display: flex; align-items: flex-start; justify-content: center; gap: 8px; text-align: left; } .sf-claim__check { flex: 0 0 auto; color: var(--wp--preset--color--brand-green); font-size: 20px; font-weight: 700; line-height: 1; /* optically centre the glyph against the 16px first text line: a bare line-height:1 span rides high next to a 1.6 line box */ margin-top: 3px; } /* one-line commercial terms under the stat panel */ .sf-params { margin-top: 24px !important; letter-spacing: 0.01em; } /* === 11. Ruled panel: gapless cells for process and data ---------------- Used by Quality Control (3 x 2), the enquiry process (4 + 3) and the export figures (1 x 4). Cells are separated by a hairline and nothing else, so the group reads as one table rather than as N cards. */ .wp-block-columns.sf-panel { display: grid !important; gap: 0; margin-bottom: 0; } .wp-block-columns.sf-panel--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wp-block-columns.sf-panel--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* === 11a. Bare panel: process steps (Inquiry → After-Sales) -------------- Each step's sf-cell carries an inline 2px accent border-top AND the panel base rule gives the column a 1px border-light border-top: two stacked lines. Bare means unframed, so the grey column border goes away and the accent line moves up onto the column, bridging the 30px column gaps so the 7 step markers read as one continuous process line. Row-start and row-end columns stay inside the container; below 781px the panel stacks to one column and the bridging collapses. */ .wp-block-columns.sf-panel--bare > .wp-block-column { border-top: 0; position: relative; } .sf-panel--bare > .wp-block-column:has(> .sf-cell)::before { content: ""; position: absolute; top: 0; left: -16px; right: -16px; border-top: 2px solid var(--wp--preset--color--accent); } .sf-panel--bare > .wp-block-column:nth-child(4n + 1):has(> .sf-cell)::before { left: 0; } .sf-panel--bare > .wp-block-column:nth-child(4n):has(> .sf-cell)::before, .sf-panel--bare > .wp-block-column:last-child:has(> .sf-cell)::before { right: 0; } .sf-panel--bare .sf-cell { border-top-width: 0 !important; } /* 11a-b. Mobile: the step number needs air below the bridged accent line. Plain-column pages (drops/liquids/fish-oil/dental-chews) get it from the group's inline spacing-20 padding-top (16px); the sf-panel--bare variant relied on column padding, which the R5 equal-height rule zeroes — so give the group its own 16px and both variants read identically. */ @media (max-width: 768px) { .sf-panel--bare .sf-cell { padding-top: 16px !important; } } .sf-panel > .wp-block-column { margin: 0; padding: 18px 0 20px; border-top: 1px solid var(--wp--preset--color--border-light); } .sf-panel--3 > .wp-block-column:not(:nth-child(3n + 1)) { padding-left: 20px; } .sf-panel--3 > .wp-block-column:not(:nth-child(3n)) { padding-right: 20px; } .sf-panel--4 > .wp-block-column:not(:nth-child(4n + 1)) { padding-left: 20px; } .sf-panel--4 > .wp-block-column:not(:nth-child(4n)) { padding-right: 20px; } .sf-panel--3:not(.sf-panel--bare) > .wp-block-column:not(:nth-child(3n)) { border-right: 1px solid var(--wp--preset--color--border-light); } .sf-panel--4:not(.sf-panel--bare) > .wp-block-column:not(:nth-child(4n)) { border-right: 1px solid var(--wp--preset--color--border-light); } /* bare variant: horizontal rules only plus a gutter. Used where the rows are not the same length (7 steps across 4 columns) — a vertical rule there would stop mid-table. */ .wp-block-columns.sf-panel--bare { column-gap: 30px; } .sf-panel--bare > .wp-block-column { padding-right: 0; } .sf-panel h3 { margin: 0 0 6px; font-size: 17px; } .sf-panel p { margin: 0; } .sf-panel > .wp-block-column > p:first-child { font-variant-numeric: tabular-nums; } /* === 12. Asset slots: honest, compact frames for assets not yet shot ---- The template still holds real placeholders (the "待上传…" labels). They keep their place in the DOM but no longer reserve 400px of empty height; each variant is sized for the asset it will receive. */ .sf-slot { display: grid !important; place-items: center; border-radius: 4px; font-size: 12px; letter-spacing: 0.03em; text-align: center; color: var(--wp--preset--color--text-secondary); } .sf-slot p { margin: 0; } .sf-slot--document, .sf-slot--map { background-color: var(--wp--preset--color--bg-light); } .sf-slot--photo { background-color: var(--wp--preset--color--card-white); } .sf-slot--document { min-height: 88px; margin-bottom: 14px; } .sf-slot--document img { width: 100%; height: auto; display: block; border-radius: 4px; } .sf-slot--photo { min-height: 92px; margin-top: 14px; } /* photo slots carry a real image now: bleed it edge-to-edge (no white frame left over from the old placeholder plinth) */ .sf-slot--photo img { border-radius: 0; } .sf-slot--map { min-height: 260px; } .sf-slot--video { min-height: 320px; } /* Photo slots wrap the image in a 12px paragraph; the parser closes that

before the

, so the empty

becomes the container's first child and the constrained-layout gap rule (:root :where(.is-layout-constrained) > *) charges the figure a 24px margin-top — a white strip above every photo. Slots are single-image frames; the photo must sit flush at the top. */ .sf-slot .wp-block-image { margin-top: 0; } /* Panel columns carry unequal gutter padding (20/40/20), so width-driven image heights drift a few px across a row. Source photos are exactly 4:3, so pinning the ratio evens the row without any visible crop. */ .sf-panel .sf-slot--photo img { aspect-ratio: 4 / 3; object-fit: cover; } /* avatar placeholders share the slot treatment but stay circular; the flex container collapses their paragraph to zero width, so the content is laid out with grid instead */ .sf-avatar { display: grid !important; place-items: center; overflow: hidden; padding: 0; } .sf-avatar p { width: 100%; font-size: 10px; line-height: 1.25; } /* === 13. FAQ accordion (core/details, pure CSS, no JS) ------------------ One

per Q&A; the first ships with `open`. The summary row is the whole click target (min-height 44px for touch). The + / − marker is drawn with two pseudo-elements: the vertical bar rotates away when the item opens. Content stays in the DOM (SEO/AI) — details only hides it. */ .sf-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; /* border-box keeps the declared min-height as the real hit area (44px touch target) instead of 44 + padding */ box-sizing: border-box; min-height: 44px; padding: 12px 0; cursor: pointer; list-style: none; } .sf-faq summary::-webkit-details-marker { display: none; } .sf-faq summary h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--wp--preset--color--text-primary); } .sf-faq summary:hover h3 { color: var(--wp--preset--color--primary); } .sf-faq__icon { position: relative; flex: 0 0 auto; width: 18px; height: 18px; } .sf-faq__icon::before, .sf-faq__icon::after { content: ""; position: absolute; inset: 0; margin: auto; border-radius: 1px; background: var(--wp--preset--color--primary); transition: transform 220ms ease, opacity 220ms ease; } .sf-faq__icon::before { width: 18px; height: 2px; } .sf-faq__icon::after { width: 2px; height: 18px; } .sf-faq details[open] .sf-faq__icon::after { opacity: 0; transform: rotate(90deg); } /* The constrained layout injects a 24px block-gap between sibling details, which read as a floating white band above every question. Zero it out and keep a tight 10px gutter; the hairline then hugs the question row and the whole block loses ~220px of height across eight items. */ /* The constrained layout caps every child of the FAQ group at the block's own 800px contentSize and re-centres it (margin auto !important), which is what pushed the rows 200px right of the heading. Release both so the rows span exactly the same content box as the heading and subtitle above them. */ .sf-faq details { max-width: none !important; margin-inline: 0 !important; margin-block: 0; padding: 0; border-bottom: 1px solid var(--wp--preset--color--border-light); } .sf-faq details + details { margin-block-start: 10px; } .sf-faq details:first-of-type { border-top: 1px solid var(--wp--preset--color--border-light); } .sf-faq details p { margin: 8px 0 14px; /* the list now runs the full content width; answers keep a readable measure instead of stretching to 1200px */ max-width: 820px; font-size: 14px; line-height: 1.6; color: var(--wp--preset--color--text-secondary); } @keyframes sf-faq-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .sf-faq details[open] > p { animation: sf-faq-open 220ms ease; } @media (prefers-reduced-motion: reduce) { .sf-faq details[open] > p { animation: none; } .sf-faq__icon::before, .sf-faq__icon::after { transition: none; } } /* Flex rows whose layout class WP does not emit on this template: the CTA check rows (marker + text) and the article cover slots. */ .sf-row { display: flex; align-items: flex-start; gap: 12px; } .sf-row p { margin: 0; } .sf-slot--cover { aspect-ratio: 4 / 3; width: 100%; } /* === 14. Section headings: eyebrow label replaces the decorative rule --- H2s used to carry a grass-green underline. The anchor is now an uppercase eyebrow label; where a section has one the underline is suppressed, and the sections that keep the rule get the restrained Forest version. */ .sf-eyebrow { /* vertical margins only. The horizontal ones belong to the layout layer (constrained layout / the zero-specificity content-width shim); setting them here clobbered that `auto` and hung the label at the band padding edge, 82px left of the heading it introduces. */ margin-block: 0 10px; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--primary); } .sf-eyebrow.has-text-align-center { margin-right: auto; margin-left: auto; } h2.wp-block-heading::after { content: ""; display: block; width: 28px; height: 2px; margin-top: 14px; background-color: var(--wp--preset--color--primary); } h2.wp-block-heading.has-text-align-center::after { margin-right: auto; margin-left: auto; } .sf-eyebrow + h2.wp-block-heading::after { content: none; } /* on a Forest band the eyebrow and the rule both have to go light */ .has-primary-background-color .sf-eyebrow { color: var(--wp--preset--color--card-white); opacity: 0.72; } .has-primary-background-color h2.wp-block-heading::after { background-color: rgba(255, 255, 255, 0.4); } /* === 14b. Header top bar --------------------------------------------------- Utility strip above the nav: hours + badges + social (7 icons) left, email right. 12px type, quiet colour; on phones only the email survives. */ .sf-topbar { row-gap: 6px; } .sf-topbar p { margin: 0; } .sf-topbar a { color: inherit; text-decoration: none; } .sf-topbar a:hover { text-decoration: underline; } /* inline-flex kills the old baseline hack: the 14px SVG no longer pokes above the 12px em box, icon and text share one optical centre */ .sf-topbar__email, .sf-topbar__meta { display: inline-flex; align-items: center; gap: 6px; line-height: 1; } .sf-topbar__email svg, .sf-topbar__meta svg { width: 14px; height: 14px; flex-shrink: 0; display: block; } .sf-topbar__email a { font-size: 13px; } .sf-topbar-badges .sf-cert-badge { /* badges come from Site Settings; a row with a URL renders as an , without one as a — both get the same pill */ display: inline-block; margin-right: 6px; padding: 1px 8px; border: 1px solid var(--wp--preset--color--border-light); border-radius: 999px; letter-spacing: 0.05em; } .sf-topbar-badges a.sf-cert-badge:hover { color: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); text-decoration: none; } @media (max-width: 1023px) { /* hours / badges wrap onto a second line on narrow desktops; two classes: must out-rank WP's `body .is-layout-flex { display:flex }` (0,1,1) — the single-class selectors used to silently lose */ .sf-topbar .sf-topbar-left { flex-wrap: wrap; row-gap: 4px; } } /* === 14c. Footer ---------------------------------------------------------- Brand column + three nav columns; the nav columns are core/details so the same markup is an always-open heading on desktop and a tap accordion on phones. */ .sf-footer-grid { align-items: stretch; } .sf-footer .wp-block-column > p, .sf-footer .wp-block-column > div { margin-top: 0; } .sf-footer-brand { letter-spacing: 0.06em; } /* social icon row: flex with a real gap — the old per-anchor margin-right (14px) stacked on top of the gap and double-spaced the row */ .sf-social { display: flex; align-items: center; gap: 12px; } .sf-social a { color: var(--wp--preset--color--card-white); } .sf-social svg { /* solid Simple-Icons silhouettes read visually heavier than the old stroke set, so the row runs one step smaller (20 -> 18) */ width: 18px; height: 18px; display: block; } @media (max-width: 768px) { .sf-social { gap: 10px; } .sf-social svg { width: 16px; height: 16px; } } /* Breathing room between the company blurb and the social icon row (specificity must beat the column-child margin reset above). */ .sf-footer .wp-block-column > p.sf-social { margin-top: 20px; } .sf-social a:hover { /* accent (#1B4D3E) equals the footer band here — dark on dark, invisible. Brand green keeps the hover legible on the forest background. */ color: var(--wp--preset--color--brand-green); } .sf-footer .sf-footcol { margin: 0 0 4px; } .sf-footcol summary { list-style: none; cursor: default; font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 0; margin-bottom: 12px; } /* Keep each column heading visually grouped with its links: the WP default paragraph margin opens a 24px hole under the summary — close it. */ .sf-footcol .sf-footlinks { margin-top: 0; } .sf-footcol summary::-webkit-details-marker { display: none; } .sf-footlinks { display: flex; flex-direction: column; gap: 7px; } .sf-footlinks a { color: rgba(255, 255, 255, 0.78); text-decoration: none; } .sf-footlinks a:hover { color: var(--wp--preset--color--card-white); text-decoration: underline; } .sf-footcontact span { color: rgba(255, 255, 255, 0.6); } .sf-footer-legal p { margin: 0; color: rgba(255, 255, 255, 0.75); } .sf-legal-links span { margin: 0 10px; opacity: 0.4; } .sf-legal-links a { color: rgba(255, 255, 255, 0.75); text-decoration: none; } .sf-legal-links a:hover { color: var(--wp--preset--color--card-white); } @media (min-width: 782px) { /* desktop: the accordion stays open and the toggle is inert */ .sf-footcol summary { pointer-events: none; } } @media (max-width: 781px) { .sf-footcol summary { cursor: pointer; } .sf-footcol summary::after { content: "+"; float: right; font-size: 16px; font-weight: 700; line-height: 1; } .sf-footcol[open] summary::after { content: "\2212"; } } /* === 15. Dark-band guard (transitional) --------------------------------- `accent` is Forest now, so an accent-coloured label on a Forest band would be invisible (site title in the header, hero labels on the 8 dosage pages). Flip those to white. A later markup pass replaces the classes outright and this rule can be dropped. */ .has-primary-background-color .has-accent-color, .has-primary-background-color.has-accent-color { color: var(--wp--preset--color--card-white) !important; } /* exception: the nav-bar site title keeps its grass-green brand colour */ .has-primary-background-color .wp-block-site-title a { color: var(--wp--preset--color--brand-green) !important; } /* === 16. Hero: full-viewport 4-slide carousel ---------------------------- The section is the stage; .sf-hero-track is the sliding strip (WP flex layout, gap 0, children stretch) holding four core/cover slides. JS only drives translateX; everything else is CSS. A left gradient scrim keeps white copy readable on any frame. Height = first screen minus header. */ .sf-hero-slider { position: relative; height: calc(100vh - 80px); min-height: 600px; max-height: 960px; overflow: hidden; background: var(--wp--preset--color--primary); } .sf-hero-track { /* the section's constrained layout caps children at content-size (1200px) with forced auto margins — lift it so slides span the full stage */ width: 100% !important; max-width: none !important; margin-inline: 0 !important; height: 100%; transition: transform 0.6s ease; will-change: transform; } .sf-slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; } .sf-slide img.wp-block-cover__image-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* left scrim: strongest where the copy sits, fading out to the right */ .sf-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 28, 23, 0.66) 0%, rgba(18, 28, 23, 0.38) 46%, rgba(18, 28, 23, 0.1) 100%); pointer-events: none; } .sf-slide .wp-block-cover__inner-container { position: relative; z-index: 1; width: 100%; height: 100%; } /* copy block: left-aligned, about half the stage wide */ .sf-slide__copy { width: min(620px, 52%); margin-left: clamp(24px, 5vw, 72px); height: 100%; justify-content: center; } .sf-slide__eyebrow { color: var(--wp--preset--color--brand-green); } .sf-slide__title { margin: 0 0 14px; font-size: clamp(30px, 4vw, 52px); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; color: #fff; text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35); } h1.sf-slide__title { font-size: clamp(32px, 4.2vw, 56px); } .sf-slide__subtitle { margin: 0; max-width: 560px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4); } /* CTA pair: one editable instance, pinned bottom-left like the copy */ .sf-hero__cta { position: absolute; left: clamp(24px, 5vw, 72px); bottom: clamp(28px, 5vh, 56px); z-index: 2; margin: 0; } .sf-hero__cta .wp-block-buttons { gap: 12px; } .sf-hero__cta .is-style-outline .wp-block-button__link { background: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.85); } .sf-hero__cta .is-style-outline .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.14) !important; } /* arrows: white glyph on a translucent ink circle */ .sf-hero-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: none; border-radius: 50%; background: rgba(18, 28, 23, 0.5); color: #fff; cursor: pointer; transition: background 0.2s ease; } .sf-hero-btn:hover { background: rgba(18, 28, 23, 0.8); } .sf-hero-prev { left: 20px; } .sf-hero-next { right: 20px; } /* dots: bottom-centre, solid for the current slide */ .sf-hero-dots { position: absolute; bottom: 22px; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: 10px; } .sf-hero-dots button { position: relative; width: 10px; height: 10px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.45); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } /* invisible hit-area extension: visual dot stays 10px, touch target ≥32px */ .sf-hero-dots button::after { content: ""; position: absolute; inset: -11px; border-radius: 50%; } .sf-hero-dots button:hover { transform: scale(1.2); } .sf-hero-dots button.is-active { background: #fff; } /* === 16b. Slider autoplay progress (home hero) ============================= 3px track hugging the bottom edge of .sf-hero-slider, below the dots (22px/12px) so the two never collide. The green bar is driven by transform:scaleX from hero-slider.js rAF loop — same visual language as the article reading bar (.sf-progress, section 53) but absolutely positioned inside the stage. Hidden entirely when the visitor prefers reduced motion (JS skips driving it too). */ .sf-slider-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255, 255, 255, 0.15); z-index: 10; pointer-events: none; } .sf-slider-progress__bar { height: 100%; background: #5ab735; transform-origin: left center; transform: scaleX(0); will-change: transform; } @media (prefers-reduced-motion: reduce) { .sf-slider-progress { display: none; } } /* === 17. (retired) Stat panel -> section 28 ------------------------------ The six-cell spec grid was folded into the front-page stat bar; cell rules, column counts and the 3% hover now live in section 28. */ /* === 18. Flat surfaces: no shadows anywhere ---------------------------- */ .wp-block-group, .wp-block-column, .wp-block-columns, .wp-block-cover, .wp-block-image img { box-shadow: none; } .wp-block-button__link, .wp-element-button { box-shadow: none; text-decoration: none; } /* === 19. Tabular figures for specification data ------------------------ */ .wp-block-table table, .sf-num { font-variant-numeric: tabular-nums; } /* === 20. Responsive ---------------------------------------------------- Panels keep their desktop column count down to 781px — at that width a 3- or 4-column panel is still legible, and not reflowing avoids re-drawing the row-aware rules. Below 781px everything collapses to one column and the column-aware rules are switched off, which is why the two `!important` declarations below are intentional. */ @media (max-width: 1023px) { .sf-eyebrow { letter-spacing: 0.06em; } .wp-block-columns.sf-dosage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 781px) { .wp-block-columns.sf-dosage-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } /* below 781px the strip reflows to a wrapping grid (2-up on a phone) */ .wp-block-columns.sf-strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); row-gap: 12px; } .sf-strip > .wp-block-column { padding: 0; border-left: none; border-top: none; } .wp-block-columns.sf-panel--3, .wp-block-columns.sf-panel--4 { grid-template-columns: minmax(0, 1fr); } .sf-panel > .wp-block-column { padding: 16px 0 !important; border-right: none !important; } .wp-block-columns.sf-panel--bare { column-gap: 0; } /* single column: no gaps to bridge, keep the accent line inside */ .sf-panel--bare > .wp-block-column:has(> .sf-cell)::before { left: 0; right: 0; } /* hero keeps the interactive slider on phones (2026-09: retired the static-first-slide degradation) — dots + touch swipe replace the arrows, which stay hidden on touch */ .sf-hero-slider { height: 74vh; min-height: 460px; touch-action: pan-y; } .sf-hero-btn { display: none; } .sf-slide__copy { width: auto; margin-inline: 20px; padding-bottom: 96px; } .sf-hero__cta { left: 20px; right: 20px; bottom: 20px; } /* mobile: centre the hero button pair (home + dosage heroes); the copy above stays left-aligned and desktop keeps the bottom-left pin */ .sf-hero__cta .wp-block-buttons, .sf-hero-inner .wp-block-buttons { justify-content: center; } /* centred buttons fill the width where the dots used to live — drop the dots to their own strip below the pair (still centred, follows them) */ .sf-hero-dots { bottom: 6px; } .sf-slide__subtitle { font-size: 15px; } .sf-slot--map { min-height: 200px; } .sf-slot--video { min-height: 220px; } .sf-card--roomy, .sf-card--quote { padding: 18px; } } @media (max-width: 768px) { .wp-block-table thead th { white-space: normal; } .wp-block-table th, .wp-block-table td { padding: 8px 10px; font-size: 13px; } h2.wp-block-heading::after { margin-top: 12px; } } /* === 21. Motion: hover feedback and scroll reveal ---------------------- Two mechanisms, both cheap: `:hover` + `transition` in CSS for pointers, and one IntersectionObserver in assets/js/interactions.js for the way in. Nothing here animates layout — only `transform` and `opacity`, both composited. No library, no scroll listener, no `will-change`. 21a. Card media zoom. The zoom lives on the image, the clip on its figure, so the card's own box (and any focus ring inside it) is never cut off. */ .sf-card img { transition: transform 0.3s ease; } .sf-card .wp-block-image, .sf-tile .wp-block-image { overflow: hidden; } .sf-card:hover img { transform: scale(1.03); } /* 21b. Buttons: 150ms, colour + a 2% swell. Filled buttons darken to Kiln hover (declared in theme.json); the outlined secondary buttons have an inline `background-color:transparent`, which only `!important` can beat — they take the Forest tint instead of the dark fill. */ .wp-block-button__link { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .wp-block-button__link:hover, .wp-block-button__link:focus-visible { transform: scale(1.02); } .wp-block-button__link.has-border-color:hover, .wp-block-button__link.has-border-color:focus-visible { background-color: var(--wp--preset--color--cta-selected-bg) !important; } /* 21b-2. Outlined secondary buttons: the "View All …" buttons used to carry their whole look as inline styles, so each copy drifted on its own. One class now holds the declarations the button blocks printed inline. The hover tint still comes from the has-border-color rule above, and the .wp-block-button prefix outspecifies the theme.json element button, whose CTA-orange fill would otherwise win the tie on source order. */ .wp-block-button .sf-btn-outline { border: 2px solid var(--wp--preset--color--primary); border-radius: 6px; background-color: transparent; color: var(--wp--preset--color--primary); font-weight: 600; } /* 21c. Header navigation. The nav sits on the Forest band, so WP's global link hover (dark ink + underline) would paint the item invisible. White text, and the underline is drawn with a border instead so it cannot shift the baseline of a 15px item. */ .wp-block-navigation .wp-block-navigation-item__content { transition: color 0.15s ease, border-color 0.15s ease; border-bottom: 1px solid transparent; padding-bottom: 2px; } .wp-block-navigation .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--card-white); border-bottom-color: currentColor; text-decoration: none; } .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { border-bottom-color: transparent; } /* Dropdown items live on the light popup: the global white-text hover above paints them invisible (white on near-white). Higher specificity keeps the dark ink on hover. Contrast: #1B4D3E on #F3F6F4 = 9.6:1 (WCAG AAA). */ .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--primary); text-decoration: none; } /* Mobile overlay menu: WP paints the modal white when the nav block itself has no background class, while the nav's card-white text bleeds in — white on white, unreadable. The doubled .is-menu-open outranks WP's default. */ @media (max-width: 781px) { .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open.is-menu-open { background-color: var(--wp--preset--color--primary); } .wp-block-navigation .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item__content a { color: var(--wp--preset--color--card-white); } .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--card-white); } .wp-block-navigation .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container { background-color: rgba(255, 255, 255, 0.08); border: none; } .wp-block-navigation .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content a, .wp-block-navigation .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: var(--wp--preset--color--card-white); } } /* 21d. Scroll reveal. `.sf-motion` and `.sf-pending` are both added by the script, and only to sections that start below the fold — so the hero, the LCP element, is never hidden, and a browser without JS (or with reduced motion) simply renders the page as before. Desktop only, by the script. */ .sf-motion .wp-site-blocks > .wp-block-group { transition: opacity 0.4s ease, transform 0.4s ease; } .sf-motion .wp-site-blocks > .wp-block-group.sf-pending { opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; } /* 21e. Reduced motion: honour the OS setting instead of animating fast. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .sf-card:hover, .sf-tile:hover, .wp-block-button__link:hover, .wp-block-button__link:focus-visible { transform: none; } /* later same-specificity hover rules would win on source order — assert with !important instead */ .sf-statbar__cell:hover .sf-statbar__num { transform: none !important; } /* the stagger classes are JS-only, but never leave a cell hidden */ .sf-statbar.sf-stagger .sf-statbar__cell { opacity: 1; transform: none; } .sf-motion .wp-site-blocks > .wp-block-group.sf-pending { opacity: 1; transform: none; } } /* === 22. Client-stories marquee: one row, drifting right-to-left -------- The track holds TWO copies of the six-card group; animating it by exactly -50% of its own width lands the second copy where the first started, so the loop is seamless with zero JS. Each group carries its own trailing gap (padding-right) so -50% stays exact. */ .sf-marquee { overflow: hidden; /* bleed to the section edges so cards glide out of view, not into padding */ margin-top: var(--wp--preset--spacing--60, 40px); } /* full-bleed escape hatch: WP's constrained layout forces `margin:auto !important` on section children, so the bleed needs same-weight declarations at higher specificity (and a lifted max-width, otherwise the negative margins have nothing to bleed into). */ .wp-site-blocks .sf-marquee { margin-inline: calc(50% - 50vw) !important; max-width: none !important; } .sf-marquee__track { display: flex; width: max-content; animation: sf-marquee-left 90s linear infinite; will-change: transform; } .sf-stories__group { display: flex; align-items: stretch; gap: 24px; padding-right: 24px; } @keyframes sf-marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Pause while the pointer is over the strip (covers the cards too). */ .sf-marquee:hover .sf-marquee__track, .sf-marquee:focus-within .sf-marquee__track { animation-play-state: paused; } /* Cards: fixed width keeps rhythm; flex column + stretch equalises height so short and long quotes share one top and bottom edge. */ .sf-story { display: flex; flex-direction: column; flex: 0 0 auto; width: 340px; margin: 0; text-decoration: none; color: inherit; } .sf-story h3 { margin: 0 0 2px; font-size: 16px; } .sf-story__role { margin: 0 0 12px; font-size: 14px; color: var(--wp--preset--color--text-secondary); } .sf-story__quote { margin: 0 0 14px; font-size: 16px; font-style: italic; font-weight: 400; color: var(--wp--preset--color--text-primary); } .sf-story__type { margin: auto 0 0; font-size: 12px; color: var(--wp--preset--color--text-secondary); } /* Initials avatar: a quiet plinth until the real headshots are uploaded. */ .sf-story__avatar { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 999px; background: var(--wp--preset--color--bg-light); color: var(--wp--preset--color--accent); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; } /* Keyboard users get the same affordance pointer users have. */ .sf-story:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; } /* No lift on hover: the marquee clips at its own top edge (overflow:hidden, cards sit flush with it), so translateY(-2px) cuts off the top border. Border stays green via .sf-card:hover; a soft shadow carries the affordance. */ .sf-story:hover { transform: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } @media (max-width: 1023px) { .sf-story { width: 300px; } } @media (max-width: 781px) { .sf-marquee { margin-top: 24px; } .sf-stories__group { gap: 16px; padding-right: 16px; } .sf-story { width: 260px; } .sf-marquee__track { animation-duration: 60s; } } /* === 23. Sticky header ----------------------------------------------------- The nav is a template part only ~119px tall, so position: sticky has no room to engage (sticky is confined to its parent). Instead sticky-header.js toggles .is-sticky (fixed, ~60px, solid forest, hairline shadow) once the 100px sentinel leaves the viewport, and marks the part .sf-header-stuck so a matching spacer keeps the page from jumping. The bar's block padding is inline, hence the !important overrides. */ .sf-header-sentinel { position: absolute; top: 0; left: 0; height: 100px; width: 1px; pointer-events: none; } .sf-header { transition: padding 250ms ease, box-shadow 250ms ease, background-color 250ms ease; } .sf-header.is-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 999; padding-top: 6px !important; padding-bottom: 6px !important; background-color: var(--wp--preset--color--primary) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } /* reserve the bar's in-flow height while it is fixed */ .sf-header-stuck { padding-bottom: 80px; } /* keep the bar below the admin bar for logged-in views */ body.admin-bar .sf-header.is-sticky { top: 32px; } /* Anchor targets for the smart-scroll Get a Quote CTAs (quote-cta.js): land the form below the 61px sticky bar on desktop. On phones the html { scroll-padding-top: 64px } rule in section 27p already covers the 57px bar, so the targets zero their own margin there. */ #inquiry-form, #quote, #booking-form { scroll-margin-top: 96px; } @media (prefers-reduced-motion: reduce) { .sf-header { transition: none; } } /* === 23b. Brand logo (header nav + footer) -------------------------------- Both slots render core/site-logo, so ops swap the logo in Appearance -> Editor (site identity) without touching templates. The seeded PNG is the tagline-free render of the source .ai (white wordmark + #5AB735 mark); height-capped so any future logo stays legible at bar scale. */ .sf-logo { margin: 0; line-height: 0; display: flex; align-items: center; } .sf-logo img { height: 34px; width: auto; max-width: 200px; display: block; object-fit: contain; } .sf-footer-logo { margin: 0 0 12px; line-height: 0; display: flex; align-items: center; } .sf-footer-logo img { height: 48px; width: auto; max-width: 260px; display: block; object-fit: contain; } @media (max-width: 768px) { .sf-logo img { /* the nav CTA is gone on phones, so the wordmark gets its room back */ height: 34px; max-width: 190px; } } /* === 24. Generated asset imagery ----------------------------------------- The former text placeholders now hold AI-generated stand-in photos; the slot frames stay but the image carries the layout. Adds a play-button overlay for video covers and a circular fit for client-story avatars. */ .sf-slot img { display: block; width: 100%; height: auto; border-radius: 6px; } .sf-slot--map img { border-radius: 8px; } .sf-slot--video { padding: 0; } .sf-slot--video img { border-radius: 4px; } /* Video cover: 16:9 poster + a click-to-load YouTube player. It used to be a 400px-tall green card with a 512x288 poster floating in the middle of it. Now the poster IS the card: a fixed 16:9 box, so the layout never moves when the image lands (no CLS) and never letterboxes (object-fit). Core pads every `has-background` group by 20px 38px — cleared here or the poster cannot reach the edges. about.js builds the iframe on click only, so until then the page makes zero requests to YouTube. */ .sf-video-cover { position: relative; overflow: hidden; aspect-ratio: 16 / 9; padding: 0; } .sf-video-cover .wp-block-image { position: absolute; inset: 0; display: block; margin: 0; } .sf-video-cover img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; } /* The whole 16:9 frame is the hit area, far beyond the 44px touch minimum; the visible ring is drawn by the span inside it. */ .sf-video__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; } .sf-video__play-icon { position: relative; width: 76px; height: 76px; border-radius: 999px; background: rgba(27, 77, 62, 0.8); transition: background-color 0.25s ease, transform 0.25s ease; } .sf-video__play-icon::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-36%, -50%); border-left: 24px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent; } .sf-video__play:hover .sf-video__play-icon, .sf-video__play:focus-visible .sf-video__play-icon { background: rgba(27, 77, 62, 0.95); transform: scale(1.06); } .sf-video__play:focus-visible { outline: 3px solid #fff; outline-offset: -8px; } /* playing state: poster and button step aside for the player */ .sf-video-cover.is-playing .wp-block-image, .sf-video-cover.is-playing .sf-video__play { display: none; } .sf-video__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; } @media (max-width: 768px) { .sf-video__play-icon { width: 64px; height: 64px; } .sf-video__play-icon::after { border-left-width: 20px; border-top-width: 12px; border-bottom-width: 12px; } } @media (prefers-reduced-motion: reduce) { .sf-video__play-icon { transition: none; } .sf-video__play:hover .sf-video__play-icon, .sf-video__play:focus-visible .sf-video__play-icon { transform: none; } } .sf-story__avatar img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; } /* === 15. Breadcrumbs — embedded at the top of each inner-page hero === */ .sf-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 18px; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.7); } .sf-breadcrumb__crumb { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.2s ease; } .sf-breadcrumb a.sf-breadcrumb__crumb:hover { color: #ffffff; text-decoration: underline; } .sf-breadcrumb__current { color: rgba(255, 255, 255, 0.9); } .sf-breadcrumb__sep { color: rgba(255, 255, 255, 0.45); } @media (prefers-reduced-motion: reduce) { .sf-breadcrumb__crumb { transition: none; } } @media (max-width: 767px) { .sf-breadcrumb { font-size: 12px; margin-bottom: 14px; } /* 3-level trails fold to ← Mid / Current */ .sf-breadcrumb--d3 .sf-breadcrumb__crumb--home, .sf-breadcrumb--d3 .sf-breadcrumb__sep--home { display: none; } .sf-breadcrumb--d3 .sf-breadcrumb__crumb--mid::before { content: "←\00a0"; } /* 2-level trails keep Home as ← Home */ .sf-breadcrumb--d2 .sf-breadcrumb__crumb--home::before { content: "←\00a0"; } /* 4-level trails (Home / Products / Form / Formula, i.e. single-sf_formula) fold TWO levels: Home and Products are both implied by "← Form". The 3-level rule above cannot be reused — its prefix is a different trail — so the pair of hidden crumbs is spelled out here. The visible result is the same shape as the 3-level fold, one level deeper: ← Soft Chews / . */ .sf-breadcrumb--d4 .sf-breadcrumb__crumb--home, .sf-breadcrumb--d4 .sf-breadcrumb__sep--home, .sf-breadcrumb--d4 .sf-breadcrumb__crumb--products, .sf-breadcrumb--d4 .sf-breadcrumb__sep--products { display: none; } .sf-breadcrumb--d4 .sf-breadcrumb__crumb--form::before { content: "←\00a0"; } } /* === 25. Header-to-hero seam --------------------------------------------- The WP layout engine applies --wp--style--block-gap (24px) between the header template part and the hero section, exposing a white body strip between the two dark surfaces. Collapse it, and lift the nav with a hairline shadow so the green-on-green boundary stays readable. */ .wp-site-blocks > header.wp-block-template-part + * { margin-top: 0; } .sf-header { position: relative; z-index: 10; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.15); } /* === 25c. Nav-bar content edges ------------------------------------------ The constrained sections centre a contentSize (1200px) box inside a full- width band padded 38px, so their text edge sits at max(38px, (viewport - 1200px) / 2). Reproduce exactly that formula on the nav bar (inline 24px padding overridden) so the logo's left edge and the Get a Quote button's right edge land on the content column's edges. */ .sf-header { padding-left: max(38px, calc((100% - var(--wp--style--global--content-size, 1200px)) / 2)) !important; padding-right: max(38px, calc((100% - var(--wp--style--global--content-size, 1200px)) / 2)) !important; } /* === 25b. Inner-page hero tone ------------------------------------------- Same-hue step down from the nav (#1B4D3E) so the two dark surfaces read as tiers instead of one flat block. Inner-page templates mark their hero with .sf-hero-inner; the home hero keeps its photo/overlay treatment. */ .sf-hero-inner { background-color: #2E6B54; } /* === 25d. Dosage page: specification strip (hero -> Standard Formulas) --- Five-field quick-reference table for the form on this page, lifted from the page's own FAQ answer and Standard Specs copy. Deliberately carries NO heading: toc-nav.js numbers its entries from the H2 order (sf-sec-N), so an h2 here would shift every later anchor on the page. The supplies the accessible name instead. Hairline rows and no vertical rules, matching the ruled panels used across the site. The header row is branded green with ink text: white on brand-green resolves to 2.7:1, which fails AA at this size, while ink-on-brand-green is 5.8:1. ------------------------------------------ */ .sf-spectable { padding-top: 40px !important; padding-bottom: 0 !important; } /* Phone: six columns of spec copy cannot be read sideways, so each field stacks as a labelled row. display:block on the table parts drops the table semantics for AT, which is the accepted trade for the stacked pattern; the data-label attributes carry the field names that the hidden header row supplied on wider screens. --------------------------------------------- */ @media (max-width: 767px) { .sf-spectable { padding-top: 24px !important; } } /* === 26. Dosage page refinements (Soft Chews first) --------------------- Merged Specifications/Formula/Packaging band, compact spec list, and Related tiles reusing the homepage catalogue tile. */ /* Merged band: Specifications | Formula Options | Packaging Options. Natural heights — top-aligned, each column ends where its content ends. Two classes + !important on purpose: WP's global block CSS ships `.wp-block-columns { align-items: normal !important }` (normal = stretch in grid, which silently re-equalised the columns); matching the flag and out-ranking the specificity wins the cascade. */ .wp-block-columns.sf-triple { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: flex-start !important; } .sf-triple > .wp-block-column { margin: 0; position: relative; min-width: 0; } .sf-triple > .wp-block-column h3 { margin: 0 0 4px; font-size: 17px; } .sf-triple__list { padding-left: 18px; } /* Compact rhythm matched to the spec table on the left: same 10px vertical padding and 1.5 leading, so all three columns read at one pace. Columns keep their natural heights (flex-start), top-aligned. */ .sf-triple__list li { line-height: 1.5 !important; padding: 10px 0; } .sf-triple__list li + li { margin-top: 0; } .sf-triple__list li::marker { color: var(--wp--preset--color--accent); } @media (min-width: 1024px) { .sf-triple > .wp-block-column + .wp-block-column::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: -12px; width: 1px; background-color: var(--wp--preset--color--border-light); } } @media (max-width: 1023px) { /* same double-class specificity as the base rule above, or the base (0,2,0) would out-rank these responsive overrides */ .wp-block-columns.sf-triple { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-triple > .wp-block-column:nth-child(3) { grid-column: 1 / -1; } } @media (max-width: 767px) { .wp-block-columns.sf-triple { grid-template-columns: minmax(0, 1fr); } .sf-triple > .wp-block-column:nth-child(3) { grid-column: auto; } } /* Compact 8-row spec list (was 16-20px vertical padding per row) */ .sf-spec-list { margin-top: 14px; border-top: 1px solid var(--wp--preset--color--border-light); } .sf-spec-row { display: grid; grid-template-columns: 38% 1fr; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--wp--preset--color--border-light); } .sf-spec-term { font-size: 13px; color: var(--wp--preset--color--text-secondary); } .sf-spec-value { font-size: 14px; font-weight: 700; color: var(--wp--preset--color--primary); font-variant-numeric: tabular-nums; } /* Related Dosage Forms: homepage catalogue tiles with a page-scoped 4:3 frame (the homepage's own tiles keep their 1:1 ratio) */ .sf-related-grid .sf-tile__media img { aspect-ratio: 4 / 3; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .sf-related-grid .sf-tile { overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); } /* iOS touch: no hover state — a short press-down acknowledgement instead */ @media (hover: none) { .sf-related-grid .sf-tile:active { transform: scale(0.98); } } @media (prefers-reduced-motion: reduce) { .sf-related-grid .sf-tile, .sf-related-grid .sf-tile__media img { transition: none; } } /* === 26b. Global reach map (front page) ================================== Inline-SVG world map: stylized continent silhouettes + pulse dots. Land = forest tint, dots = forest, origin (China) = brand green. Animation is opacity/transform only; disabled under reduced motion. */ /* .sf-slot forces display:grid (section 12); its implicit column is content-sized, which makes the SVG's percentage width resolve cyclically and fall back to the 300px replaced-element default. Give the map slot a real fluid column so width:100% has something definite to resolve against. */ .sf-slot--map { grid-template-columns: minmax(0, 1fr); background: #F5F7F2; } .sf-map { width: 100%; height: auto; display: block; } .sf-map__land { fill: #E5EBE3; stroke: #D0D7CC; stroke-width: .5; } .sf-map__dot { fill: #1B4D3E; opacity: .7; } .sf-map__dot--dest { opacity: .85; } .sf-map__dot--origin { fill: var(--wp--preset--color--brand-green); opacity: 1; } .sf-map__halo { fill: none; stroke: var(--wp--preset--color--brand-green); stroke-width: 2px; opacity: .5; } .sf-map__halo--far { stroke-width: 1.5px; opacity: .25; } .sf-map__pulse { animation: sfPulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes sfPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.25); } } /* 26c export arcs: static dashed route + flowing light segment (0 JS). Flow layer uses a short dash cycling over the path via stroke-dashoffset; per-path dasharray period = arc length (inlined on each path). */ .sf-map__arc { fill: none; stroke: rgba(90, 183, 53, 0.4); stroke-width: 1.5; stroke-dasharray: 4 4; stroke-linecap: round; } .sf-map__arc-flow { fill: none; stroke: rgba(90, 183, 53, 0.9); stroke-width: 2; stroke-linecap: round; animation: sfArcFlow 3.6s linear infinite; } @keyframes sfArcFlow { from { stroke-dashoffset: var(--arc-len, 610); } to { stroke-dashoffset: 0; } } /* WP emits .is-layout-flex rules AFTER the theme stylesheet, so the grid needs !important to win the cascade (same pattern as other sf- blocks). */ .wp-block-group.sf-map__regions { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 28px !important; margin-top: 32px !important; } .sf-map__region h3 { font-size: 15px; margin: 0 0 6px; } .sf-map__region p { margin: 0; } @media (max-width: 781px) { .wp-block-group.sf-map__regions { grid-template-columns: 1fr !important; gap: 18px !important; } } @media (prefers-reduced-motion: reduce) { .sf-map__pulse, .sf-map__arc-flow { animation: none; } } /* === 27. Mobile optimisation (<= 768px) ================================== Phone-specific compression pass. Every rule lives inside a media query, so desktop (>= 769px) is byte-for-byte the cascade it was before. Nothing is deleted from the DOM: the top bar's WhatsApp/address/hours/badges, the nav CTA and the certificate copy all stay in the markup for crawlers — the phone just stops painting them. Accordions are native
(core details / core navigation), so collapsed content is still in the HTML. */ /* --- 27a. Top bar: one 34px line, email only ------------------------------ */ @media (max-width: 768px) { .sf-topbar { padding-top: 6px !important; padding-bottom: 6px !important; padding-left: 16px !important; padding-right: 16px !important; line-height: 1.45; } /* hours / badges all drop on phones — the email stays reachable and the social icons live in the footer only */ .sf-topbar .sf-topbar-left { display: none; } .sf-topbar .sf-topbar-contact { flex-wrap: nowrap; align-items: center; justify-content: center; } .sf-topbar .sf-topbar-contact p { white-space: nowrap; } } /* --- 27b. Nav bar: [logo] .... [hamburger], no CTA ----------------------- The quote button wrapped onto its own 40px row on phones, doubling the bar height; the hero already carries the same action. The hamburger gets a real 44px touch target instead of a 24px glyph. */ @media (max-width: 768px) { .sf-header { padding-top: 10px !important; padding-bottom: 10px !important; padding-left: 16px !important; padding-right: 16px !important; flex-wrap: nowrap; align-items: center; } /* Hide the Get a Quote button on phones (it wrapped onto its own 40px row); the hero already carries the same action. The basket icon that used to sit beside it went in batch H7f. */ .sf-header .sf-header__cta .wp-block-button { display: none; } .sf-header .wp-block-navigation { flex: 0 0 auto; } /* Hug the right edge: under space-between the auto margin soaks up all free space, so the hamburger stops floating mid-bar. (Before batch H7f it hugged the basket button that sat to its right.) Child combinator is required — the overlay's inner