/* =========================================================== page-silver-pulser.css ----------------------------------------------------------- Page wrapper: .page-silver-pulser Loaded by the CMS via getVersionedFile('css/page-silver-pulser.css'). FRAME WIDTHS (per FIGMA_HANDOFF.md) Desktop: 1280px (content 1200 + 40px gutter each side) Mobile: 400px (content 380 + 10px gutter each side) PAGE FONT-SIZE BASE font-size: 18px on .page-silver-pulser. Every em value below is calibrated against this base, so Figma px values translate directly: 50px Figma -> 50/18 = 2.778em. Why em (not rem): rem anchors to , which the CMS leaves at the browser default (16px). The Figma was designed against an 18px base, so all spacing/typography math is in 18ths. Using em anchors the math to the .page-silver-pulser font-size scope instead, so it stays correct without touching and risking the CMS chrome (header/footer) on this page. Watch for em compounding in any element that declares its own font-size -- children of that element will resolve em against the new size, not 18px. CLAMP FORMULA (already inlined below; documented for reference) slope_vw = (desktop_px - mobile_px) / (1200 - 400) * 100 = (desktop_px - mobile_px) / 8 (1200 desktop basis per designer Aug 2026; was 1280 -- clamps now reach their max exactly at the 1200 content-column width) intercept_px = mobile_px - slope_vw/100 * 400 result = clamp(mobile_px, slope_vw vw + intercept_px, desktop_px) Clamps use PX endpoints, not em. Earlier drafts used em (mobile_px/18 etc.), but em inside clamp() depends on the parent's font-size, which (a) is fragile in this CMS-embedded page -- a stray inherited font-size on an ancestor silently rescales every em clamp, and (b) DevTools mis- resolves em-in-clamp-in-var against the element's OWN size, reporting a value the browser does not render. PX endpoints render identically (the vw term still drives the fluid scaling), are immune to ancestor font- size leaks, and read truthfully in DevTools. Non-clamp values stay em (anchored to the 18px page base; see the header reset below). No fallback declaration. Single clamp() per rule. INHERITED FROM CMS-LOADED CSS (do not re-declare unless overriding): - font-family: 'Roboto', sans-serif - color-scheme: light only ASCII rule: this file MUST stay ASCII-clean. The SmarterASP.NET upload filter rejects non-ASCII bytes. Use HTML entities or ASCII equivalents (e.g., -- for em-dash). TBD MARKERS Several typography and spacing clamps below are seeded with plausible starting values informed by the structural dump, and marked TBD. They get refined when each section's Figma:get_design_context returns concrete px values. SECTION INDEX (search the block prefix to jump to a section) model 1. Product hero (gallery + buy panel) desc 2. Description how-to 3. How to use (video cards) testimonials 4. Testimonials (card scroller) which 5. Which model (compare reveal) kits 6. Kits eyn 7. Everything you need (tabs -> accordion) begin 8. Where to begin (booklet) faq 9. Questions (FAQ accordion) page-wave Page-bottom wave into the footer =========================================================== */ /* -- TOKENS ---------------------------------------------- */ .page-silver-pulser { /* Root font-size: dominant Figma paragraph size. */ font-size: 18px; /* Font family: declared here (not just inherited from CMS chrome) so the page renders correctly in standalone preview contexts and is robust if the CMS-loaded family ever fails to load. Matches the CMS body family -- no override, just an explicit assertion. */ font-family: 'Roboto', sans-serif; /* Typography scale -- TBD values from Figma per section. Seed values derived from structural metadata heights: heading text rows ~36-45px tall => font ~28-36px body text ~25px tall => font ~16-18px */ --text-heading: clamp(30px, 2.5vw + 20px, 50px); /* 50px / 30px -- big centered section titles */ --text-subheading: clamp(18px, 0.5vw + 16px, 22px); /* 22px / 18px -- section intro subhead */ --text-body: clamp(16px, 0.25vw + 15px, 18px); /* TBD: ~18px / 16px */ --text-subtitle: clamp(14px, 0.25vw + 13px, 16px); /* TBD: ~16px / 14px uppercase */ --text-card-title: clamp(18px, 0.5vw + 16px, 22px); /* TBD: ~22px / 18px */ --text-btn: 1em; /* 18px -- Figma button label size. Earlier draft used a clamp to 15px which was below spec; raised to 1em to apply uniformly to every .btn (kits CTAs, swpg CTA, ATC, compare button, etc.). */ --text-small: 0.778em; /* 14px fixed */ /* Spacing -- TBD per Figma; seeded from common SOTA patterns. section_y 80/40, gutter 30/10. */ --space-section-y: clamp(40px, 5vw + 20px, 80px); /* 80px / 40px */ --space-container: clamp(10px, 2.5vw, 30px); /* 30px / 10px gutter */ --space-gap-md: clamp(10px, 1.25vw + 5px, 20px); /* TBD: ~20px / 10px */ --space-gap-lg: clamp(20px, 2.5vw + 10px, 40px); /* TBD: ~40px / 20px */ /* Radius */ --radius-btn: 0.625em; /* 11px -- kit default, kept for non-pill variants */ --radius-pill: 9999px; /* pill buttons (this page uses pill style heavily) */ --radius-card: 0.5em; /* 9px */ /* PX not em: feeds calc(radius - 1px) corner arcs on mixed-type-size elements; em resolves per-element and mismatches the curves (bug found on the compare page, Aug 2026). Identical rendering at the 18px base. */ --radius-panel: 20px; /* product cards, trust badges, reveals */ --radius-hero: clamp(10px, 2.5vw, 30px); /* TBD -- normalized to the 1200 basis Aug 2026 (was reaching 30px only at ~1700w); hero corners now hit 30px at 1200 */ /* ============================================================ BRAND ACCENT CONFIG -- the only colour lines a new page edits. Neutral, role-named tokens. A page built from this template sets these three to its product's brand colour; every accent helper (.text-accent, .section--accent, checks, links, etc.) references them, so re-theming a page is a 3-line change. THIS PAGE (Silver Pulser) -> green. ============================================================ */ --color-accent: #92ca6a; /* brand accent (Silver Pulser green) */ --color-accent-dark: #4a8b3f; /* darker shade -- eyebrow text, hovers */ --color-accent-tint: #d9e8d8; /* pale fill -- tinted section backgrounds */ /* Derived alpha tints of the accent -- tinted pills, tab states, the Cautions "Important" callout, testimonial cards and the which-model compare columns. color-mix() locks every tint to --color-accent, so re-theming a clone stays a 3-token swap with NO literal rgba() values to hunt down (the WOZ clone missed five of them -- designer feedback items 9/11/12/14, July 2026). */ --color-accent-a60: color-mix(in srgb, var(--color-accent) 60%, transparent); --color-accent-a40: color-mix(in srgb, var(--color-accent) 40%, transparent); --color-accent-a30: color-mix(in srgb, var(--color-accent) 30%, transparent); --color-accent-a20: color-mix(in srgb, var(--color-accent) 20%, transparent); --color-accent-a12: color-mix(in srgb, var(--color-accent) 12%, transparent); --color-accent-a10: color-mix(in srgb, var(--color-accent) 10%, transparent); /* Full product palette -- retained for cross-product links, kit cards and shared utilities that reference a SPECIFIC product regardless of which product THIS page is. */ --color-silver-pulser: #92ca6a; /* green */ --color-magnetic-pulser: #59afb2; /* teal */ --color-water-ozonator: #4792bc; /* blue -- also the site primary */ --color-bio-tuner: #a194c7; /* purple */ /* Product pastel backgrounds (lighter tints for themed sections) */ --color-silver-pulser-tint: #d9e8d8; --color-magnetic-pulser-tint: #cae4e6; --color-water-ozonator-tint: #bbddf0; --color-bio-tuner-tint: #d5d1e6; /* Neutrals */ --color-dark: #3b3b3b; /* body text -- confirmed from Section 1 Figma */ --color-tariff: #c98a2b; /* amber -- USA tariff surcharge line in the buy panel */ --color-white: #ffffff; --color-cream-bg: #f8f4f2; --color-light-blue: #eff9fd; --color-light-blue-deep: #d6effa; /* Accent text variants (darker shades of brand colours used for eyebrows) */ --color-silver-pulser-dark: #4a8b3f; /* darker green for "MICROPULSING" eyebrow text */ /* Button hover dark -- lighter than --color-dark (#3b3b3b). Used as the on-hover background for every coloured CTA on the site, per the Figma "Add to Cart / Variant3" component. */ --color-btn-hover: #555555; /* Wrapper layout */ color: var(--color-dark); width: 100%; } /* -- RESET (scoped to this page) ------------------------- */ .page-silver-pulser *, .page-silver-pulser *::before, .page-silver-pulser *::after { box-sizing: border-box; margin: 0; } .page-silver-pulser a { text-decoration: none; color: inherit; } .page-silver-pulser ul { list-style: none; padding: 0; } .page-silver-pulser img { display: block; max-width: 100%; height: auto; } .page-silver-pulser button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; } /* Section wrappers use
; the CMS site-wide stylesheet sets a font-size on the masthead
, which matches our section headers by tag and (since it's directly matched, it beats the inherited 18px base) inflates every em inside them. Re-anchor to the page base -- same reason the button reset above re-inherits font metrics. */ .page-silver-pulser header { font: inherit; } /* Shared section-title base (site standard, Aug 2026): every top-level section

carries .sec-title plus its block class (e.g. class="sec-title kits__title"). The base owns the declarations all section titles share; each block rule keeps only its own line-height (varies 1.2 / 1.3 by section) and local overrides, which win on source order. Matches the convention on the technology pages. */ .page-silver-pulser .sec-title { font-size: var(--text-heading); /* 50 / 30px */ font-weight: 900; } /* Keyboard focus (site standard, Aug 2026): a visible ring on interactive elements, matching the technology pages. Only shows for keyboard/AT focus (:focus-visible), never on mouse click. */ .page-silver-pulser a:focus-visible, .page-silver-pulser button:focus-visible, .page-silver-pulser input:focus-visible, .page-silver-pulser [tabindex]:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 2px; } /* -- LAYOUT UTILITIES ------------------------------------ */ /* Sections span 100% viewport width (background extends edge-to-edge). Content is centred and constrained inside .container, which also holds the horizontal gutter padding. */ .page-silver-pulser .section { padding: var(--space-section-y) 0; width: 100%; } .page-silver-pulser .container { width: 100%; /* Gutters sit OUTSIDE the content column (designer, Aug 2026; matches compare-silver-pulsers): a true 1200px column at desktop, padding only bites once the viewport is narrower than 1200 + gutters. */ max-width: calc(1200px + 2 * var(--space-container)); margin: 0 auto; padding: 0 var(--space-container); } /* Section background variants */ .page-silver-pulser .section--white { background: var(--color-white); } .page-silver-pulser .section--cream { background: var(--color-cream-bg); } .page-silver-pulser .section--light { background: var(--color-light-blue); } .page-silver-pulser .section--accent-tint { background: var(--color-accent-tint); } .page-silver-pulser .section--accent { background: var(--color-accent); color: var(--color-white); } .page-silver-pulser .section--teal { background: var(--color-magnetic-pulser); color: var(--color-white); } .page-silver-pulser .section--purple { background: var(--color-bio-tuner); color: var(--color-white); } /* -- COLOUR UTILITIES ------------------------------------ Two-tone headings use the role pair .text-ink (primary tone) + .text-accent (emphasised brand tone). .text-ink is this page's primary heading colour; .text-accent is --color-accent. */ .page-silver-pulser .text-accent { color: var(--color-accent); } .page-silver-pulser .text-ink { color: var(--color-water-ozonator); } .page-silver-pulser .text-teal { color: var(--color-magnetic-pulser); } .page-silver-pulser .text-purple { color: var(--color-bio-tuner); } .page-silver-pulser .text-white { color: var(--color-white); } .page-silver-pulser .text-dark { color: var(--color-dark); } .page-silver-pulser .text-center { text-align: center; } /* Brand subscript -- the "3" in "Water O3zonator" is a brand identifier rendered as a subscript. Authored as semantic 3 (ASCII-clean; the literal subscript glyph would fail the host's upload filter). Tuned here rather than relying on the browser default, which over-shrinks and over-drops the character. */ .page-silver-pulser .brand-sub { font-size: 0.7em; line-height: 0; vertical-align: -0.15em; } /* -- TYPOGRAPHY UTILITIES -------------------------------- */ .page-silver-pulser .section-title { font-size: var(--text-heading); font-weight: 900; line-height: 1.2; text-align: center; margin-bottom: var(--space-gap-lg); } .page-silver-pulser .text-subheading { font-size: var(--text-subheading); font-weight: 700; line-height: 1.5; } .page-silver-pulser .text-subtitle { font-size: var(--text-subtitle); font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: 0.05em; } .page-silver-pulser .text-body { font-size: var(--text-body); font-weight: 500; line-height: 1.6; } .page-silver-pulser .text-small-italic { font-size: var(--text-small); font-style: italic; font-weight: 500; line-height: 1.5; } .page-silver-pulser .text-card-title { font-size: var(--text-card-title); font-weight: 700; line-height: 1.3; } /* -- BUTTONS --------------------------------------------- */ .page-silver-pulser .btn { display: inline-flex; align-items: center; justify-content: center; /* Asymmetric vertical padding: the top is 0.056em (1px) larger than the bottom to optically centre uppercase text. Roboto Black's cap-height sits above the midpoint of the em square, so equal padding makes the glyphs appear to ride high. */ padding: calc(0.625em + 0.056em) 1.25em calc(0.625em - 0.056em); border-radius: var(--radius-btn); font-size: var(--text-btn); font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; line-height: 1; transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s; cursor: pointer; } /* Each colour variant transitions to the same dark grey on hover -- no translate, no expansion. Pattern applied uniformly to every coloured CTA on the page EXCEPT Add-to-Cart, which additionally expands vertically -- see .model__add-to-cart:hover further down. */ .page-silver-pulser .btn--accent { background: var(--color-accent); color: var(--color-white); } .page-silver-pulser .btn--accent:hover { background: var(--color-btn-hover); } .page-silver-pulser .btn--blue { background: var(--color-water-ozonator); color: var(--color-white); } .page-silver-pulser .btn--blue:hover { background: var(--color-btn-hover); } .page-silver-pulser .btn--teal { background: var(--color-magnetic-pulser); color: var(--color-white); } .page-silver-pulser .btn--purple { background: var(--color-bio-tuner); color: var(--color-white); } .page-silver-pulser .btn--dark { background: var(--color-dark); color: var(--color-white); } /* Pill modifier -- overrides border-radius to give a fully rounded pill. This page's Add-to-Cart and many other CTAs use pill style. */ .page-silver-pulser .btn--pill { border-radius: var(--radius-pill); } .page-silver-pulser .btn-center { display: flex; justify-content: center; margin-top: var(--space-gap-lg); } /* -- TWO-COLUMN LAYOUT ----------------------------------- */ .page-silver-pulser .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-gap-lg); align-items: start; } .page-silver-pulser .two-col--reverse .two-col__text { order: 1; } .page-silver-pulser .two-col--reverse .two-col__media { order: 0; } .page-silver-pulser .two-col--align-center { align-items: center; } .page-silver-pulser .two-col__text { display: flex; flex-direction: column; gap: var(--space-gap-md); min-width: 0; } .page-silver-pulser .two-col__media { display: flex; align-items: stretch; min-width: 0; } .page-silver-pulser .two-col__media img { width: 100%; } .page-silver-pulser .rounded-img { border-radius: var(--radius-card); object-fit: cover; width: 100%; height: 100%; } /* -- FEATURE LIST (checkmark or disc bullets) ------------ */ .page-silver-pulser .feature-list { list-style: disc; padding-left: 1.5em; display: flex; flex-direction: column; gap: 0.25em; } .page-silver-pulser .feature-list li { font-size: var(--text-body); font-weight: 500; line-height: 1.6; } /* Checkmark-style list (used in Kits / SWPG sections in the Figma) */ .page-silver-pulser .check-list { display: flex; flex-direction: column; gap: var(--space-gap-md); } .page-silver-pulser .check-list__item { display: flex; align-items: flex-start; gap: 0.75em; } .page-silver-pulser .check-list__icon { color: var(--color-water-ozonator); /* brand blue check (currentColor sprite) */ width: 30px; /* fixed px: em was resolving small against parent font-size */ height: 30px; flex-shrink: 0; } /* -- VIDEO THUMBNAIL ------------------------------------- */ /* Used by .image-to-video markup (see COMPONENTS.md). Click handler in /js/replace_image_with_video.js opens a modal. */ .page-silver-pulser .video-thumb { position: relative; display: block; } .page-silver-pulser .video-thumb__img { border-radius: var(--radius-card); object-fit: cover; width: 100%; aspect-ratio: 16/9; } .page-silver-pulser .video-thumb .play-button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(48px, 16%, 96px); height: auto; opacity: 0.85; transition: transform 0.2s, opacity 0.2s; pointer-events: none; } .page-silver-pulser .video-thumb:hover .play-button { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } /* =========================================================== PAGE-SPECIFIC SECTIONS ----------------------------------------------------------- Each of the 9 sections gets its own block below as Figma:get_design_context is pulled. Order follows the page so a top-down read of this file mirrors a top-down read of the page. Naming convention: .section- section wrapper .section-__ element inside .section--- variant =========================================================== */ /* ----------------------------------------------------------- SECTION 1: MODEL (Figma 7073:1637) Product gallery (left, 10-slide carousel) + buy panel (right, sticky on desktop). Stacks vertically below 1024px. ----------------------------------------------------------- */ /* Section-level overrides: this section uses 30px top / 80px bottom per Figma rather than the page default. */ .page-silver-pulser .section-model { padding: clamp(20px, 1.25vw + 15px, 30px) 0 var(--space-section-y); /* 20/30 -> 80px */ background: var(--color-white); } .page-silver-pulser .model__container { display: flex; flex-direction: column; gap: var(--space-gap-md); } /* Breadcrumb / filter strip */ .page-silver-pulser .model__breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0; } .page-silver-pulser .model__breadcrumb-link, .page-silver-pulser .model__breadcrumb-current { display: inline-block; padding: 0.556em 0.556em; /* 10px - matches Figma button padding */ border-radius: 1.333em; /* 24px - rounded pill */ font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.5; /* 27px */ color: var(--color-dark); white-space: nowrap; } /* Phone: keep the breadcrumb on ONE line (designer feedback mobile #2, WOZ July 2026). At 18px the strip can sit at the viewport edge and wrap the current-page item; stop the wrap and step the type down. */ @media (max-width: 767px) { .page-silver-pulser .model__breadcrumb { flex-wrap: nowrap; } .page-silver-pulser .model__breadcrumb-link, .page-silver-pulser .model__breadcrumb-current { font-size: 0.833em; /* 15px */ padding-left: 0.417em; /* 7.5px */ padding-right: 0.417em; white-space: nowrap; } .page-silver-pulser .model__breadcrumb-sep { font-size: 1em; /* 18px -- was 22px */ padding: 0 0.083em; } } .page-silver-pulser .model__breadcrumb-link { cursor: pointer; transition: background-color 0.15s; } .page-silver-pulser .model__breadcrumb-link:hover { text-decoration: underline; } .page-silver-pulser .model__breadcrumb-sep { font-size: 1.222em; /* 22px */ font-weight: 400; color: var(--color-dark); line-height: 1; padding: 0 0.111em; } .page-silver-pulser .model__breadcrumb-current { font-weight: 400; } /* Product row: gallery + buy panel side-by-side at desktop */ .page-silver-pulser .model__product { display: grid; grid-template-columns: 591px 1fr; gap: 1.111em; /* 20px between columns */ align-items: start; } /* =============== GALLERY (left column) =============== */ .page-silver-pulser .model__gallery { position: sticky; top: 1em; display: grid; grid-template-columns: 64px 1fr; gap: 1.111em; /* 20px between thumb rail and main */ width: 100%; } /* Thumbnail rail -- vertical film strip (site-card-scroller, axis=y, follow mode). The rail mirrors the main carousel: the active thumb is scrolled into view as the main image advances. Hidden < 1024px (mobile uses the dot indicator). */ /* The whole tower (arrows + strip) is 600px tall; the arrows sit INSIDE it, top and bottom, and the scroll viewport flex-fills the space between them. */ .page-silver-pulser .model__gallery-thumbs { display: flex; flex-direction: column; height: 600px; /* film-strip tower, arrows included */ gap: 0.556em; /* 10px between the arrows and the strip */ align-items: stretch; } /* The scroll viewport: fills the space between the two arrows; overflow + snap come from site-card-scroller.css (the axis=y rules). */ .page-silver-pulser .model__gallery-thumbs-track { flex: 1 1 auto; min-height: 0; /* allow the flex child to shrink + scroll */ display: flex; flex-direction: column; gap: 0.556em; /* 10px between thumbs */ align-items: stretch; } /* Up / down arrows: a second pair of carousel controls (carousel-btn carousel-btn--prev/--next) -- they advance the main image one at a time and dim to 0.35 at the first / last image via the carousel's .carousel-btn.is-disabled rule. Same size as the main gallery arrows (29x39), reusing that asset rotated to point up / down. */ .page-silver-pulser .model__gallery-thumbs-arrow { flex-shrink: 0; width: 64px; height: 2.167em; /* 39px -- matches the main gallery arrows */ padding: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 1; transition: opacity 0.15s, transform 0.15s; } .page-silver-pulser .model__gallery-thumbs-arrow:hover { transform: scale(1.1); } /* CSS-only chevron: a small rotated square with two visible borders. */ .page-silver-pulser .model__gallery-thumbs-chevron { display: block; width: 0.667em; /* ~12px */ height: 0.667em; border-top: 2px solid var(--color-dark); border-right: 2px solid var(--color-dark); } .page-silver-pulser .model__gallery-thumbs-arrow--up .model__gallery-thumbs-chevron { transform: rotate(-45deg); /* points up */ margin-top: 0.222em; /* visually centre the rotated shape */ } .page-silver-pulser .model__gallery-thumbs-arrow--down .model__gallery-thumbs-chevron { transform: rotate(135deg); /* points down */ margin-bottom: 0.222em; } .page-silver-pulser .model__gallery-thumb { display: block; width: 64px; height: 64px; padding: 0; border-radius: 0.278em; /* 5px */ overflow: hidden; background: transparent; cursor: pointer; border: 0; transition: transform 0.15s; } .page-silver-pulser .model__gallery-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.278em; /* 5px - matches wrapper now that there's no border */ } .page-silver-pulser .model__gallery-thumb:hover { transform: scale(1.05); } /* Active thumb: border around the image currently on the stage (drawn as an inset outline so the 64px box never shifts). */ .page-silver-pulser .model__gallery-thumb.is-active { outline: 2px solid var(--color-accent-dark); outline-offset: -2px; } /* Main stage */ .page-silver-pulser .model__gallery-main { position: relative; display: flex; /* Arrows centre on the row. The dot rail is taken out of flow (below) so the stage height equals the aspect-locked track height -- keeping the arrows centred on the IMAGE, not drifting with the rail beneath it. */ align-items: center; } .page-silver-pulser .model__gallery-arrow { flex-shrink: 0; width: 40px; height: 40px; padding: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; /* Circle button with a CSS-drawn white chevron (matches the home page). The circle uses this page's accent (silver-pulser green). No image asset. */ background: var(--color-accent, #92ca6a); border: 0; border-radius: 50%; cursor: pointer; opacity: 1; transition: opacity 0.15s, transform 0.15s; } .page-silver-pulser .model__gallery-arrow::before { content: ""; width: 12px; height: 12px; border-left: 2.5px solid #ffffff; border-bottom: 2.5px solid #ffffff; transform: translateX(2px) rotate(45deg); /* points LEFT (prev) */ } .page-silver-pulser .model__gallery-arrow--next::before { transform: translateX(-2px) rotate(225deg); /* mirrored -> points RIGHT */ } .page-silver-pulser .model__gallery-arrow:hover { transform: scale(1.1); } .page-silver-pulser .model__gallery-stage { position: relative; /* anchor for the absolute expand button */ flex: 1; /* takes width inside .model__gallery-main row */ align-self: stretch; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0.556em; /* 10px between track and dots */ } /* Track sits inside the stage, takes available vertical space. Position relative so slides are positioned within it (they fill it). */ .page-silver-pulser .model__gallery-track { position: relative; width: 100%; /* Lock the carousel viewport to the source image ratio (449 x 582) so it holds at every viewport; width drives height. */ aspect-ratio: 449 / 582; } .page-silver-pulser .model__gallery-slide { display: none; width: 100%; height: 100%; } .page-silver-pulser .model__gallery-slide.is-active { display: block; } .page-silver-pulser .model__gallery-slide img { width: 100%; height: 100%; /* cover: fills the carousel box, which is locked to the source image ratio (449 x 582) on .model__gallery-track -- so correctly-sized images show fully with no cropping at any viewport. An off-ratio image crops to fill; set object-position on that slide if a specific subject must stay fully visible. */ object-fit: cover; border-radius: 0.5em; } /* Dot progress bar -- 10 dots, active = blue */ .page-silver-pulser .model__gallery-mobile-dots { /* Out of flow so the stage height equals the aspect-locked track height (keeps the arrows centred on the image). Sits just below the track. */ position: absolute; left: 0; right: 0; top: calc(100% + 0.556em); display: flex; gap: 0.556em; /* 10px */ align-items: center; justify-content: center; } .page-silver-pulser .model__gallery-mobile-dot { width: 8px; height: 8px; border-radius: 4px; /* Figma spec is rgba(0,0,0,0.2) but it reads as invisible in production -- bumped to 0.4 for legibility. Active dot stays water-ozonator blue per Figma. */ background: rgba(0, 0, 0, 0.4); transition: background-color 0.2s; } .page-silver-pulser .model__gallery-mobile-dot.is-active { background: var(--color-water-ozonator); } /* Expand button -- floating circular bottom-right */ .page-silver-pulser .model__gallery-expand { position: absolute; right: 0.122em; /* 2.2px */ bottom: 0.456em; /* 8.2px */ width: 2.489em; /* 44.8px */ height: 2.489em; border-radius: 9999px; background: var(--color-white); box-shadow: 0 0 0 1px #d4d4d4; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; } .page-silver-pulser .model__gallery-expand:hover { transform: scale(1.05); box-shadow: 0 0 0 1px #a0a0a0, 0 2px 8px rgba(0, 0, 0, 0.1); } .page-silver-pulser .model__gallery-expand .icon { /* Sprite symbol (ico-gallery-expand) replaces the retired gallery_expand.svg (Aug 2026). .icon is 1em square, so font-size on the icon itself sets the 13.6px glyph size without scaling the 44.8px button. Colour via currentColor. */ font-size: 0.756em; /* 13.6px */ color: #3b3b3b; /* the original asset's stroke grey (not a brand token) */ } /* Fullscreen image modal opened by the expand button. Uses native ; CSS resets the browser defaults so the image fills the viewport-relative bounds, with a translucent backdrop and an absolutely-positioned close button. Font-size is reset to 18px because dialog elements promoted to the top layer do not inherit from .page-silver-pulser reliably across browsers, and em units below depend on that anchor. */ .page-silver-pulser .model__gallery-modal { font-size: 18px; border: 0; padding: 0; margin: 0; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: transparent; color: var(--color-white); } .page-silver-pulser .model__gallery-modal::backdrop { background: rgba(0, 0, 0, 0.88); } .page-silver-pulser .model__gallery-modal-inner { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .page-silver-pulser .model__gallery-modal-img { display: block; max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 0.5em; /* 9px -- subtle, matches gallery image radius */ } .page-silver-pulser .model__gallery-modal-arrow { /* Same circle-plus-chevron as the inline gallery arrows, floated over the fullscreen view. Wired by site-carousels.js as ordinary carousel-btn--prev/--next controls. */ position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; padding: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: var(--color-accent); border: 0; border-radius: 50%; cursor: pointer; transition: transform 0.15s; } .page-silver-pulser .model__gallery-modal-arrow--prev { left: 1.111em; } /* 20px */ .page-silver-pulser .model__gallery-modal-arrow--next { right: 1.111em; } .page-silver-pulser .model__gallery-modal-arrow::before { content: ""; width: 12px; height: 12px; border-left: 2.5px solid #ffffff; border-bottom: 2.5px solid #ffffff; transform: translateX(2px) rotate(45deg); /* points LEFT (prev) */ } .page-silver-pulser .model__gallery-modal-arrow--next::before { transform: translateX(-2px) rotate(225deg); /* mirrored -> points RIGHT */ } .page-silver-pulser .model__gallery-modal-arrow:hover { transform: translateY(-50%) scale(1.1); } .page-silver-pulser .model__gallery-modal-close { position: absolute; top: 1.111em; /* 20px */ right: 1.111em; width: 2.222em; /* 40px */ height: 2.222em; border: 0; border-radius: 9999px; background: rgba(255, 255, 255, 0.15); color: var(--color-white); font-size: 1.667em; /* 30px -- visible glyph */ line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.15s; } .page-silver-pulser .model__gallery-modal-close:hover { background: rgba(255, 255, 255, 0.3); } /* =============== BUY PANEL (right column) =============== */ .page-silver-pulser .model__buy { position: sticky; top: 1em; display: flex; flex-direction: column; gap: 0.611em; /* 11px between rows -- from Figma */ } /* Heading block */ .page-silver-pulser .model__heading { display: flex; flex-direction: column; } .page-silver-pulser .model__title { font-size: clamp(30px, 0.625vw + 27.5px, 35px); /* 30 -> 35px, fluid 400->1200 */ font-weight: 700; line-height: 1.3; /* ~45px @35 desktop / ~39px @30 mobile (A1) */ color: var(--color-dark); margin: 0; } .page-silver-pulser .model__model { font-size: 1.222em; /* 22px */ font-weight: 700; line-height: 2.045; /* 45px / 22px (B) */ color: var(--color-dark); margin: 0; } .page-silver-pulser .model__rating { display: inline-flex; align-items: center; gap: 0.556em; font-size: 1.222em; /* 22px */ line-height: 2.045; /* 45px / 22px (B) */ color: var(--color-dark); cursor: pointer; } .page-silver-pulser .model__stars { color: var(--color-accent); letter-spacing: 0.05em; font-weight: 700; } .page-silver-pulser .model__rating-link { font-weight: 400; transition: color 0.15s; } .page-silver-pulser .model__rating:hover .model__rating-link { color: var(--color-water-ozonator); } /* Two functions block */ .page-silver-pulser .model__desc { display: flex; flex-direction: column; gap: 0.556em; padding-bottom: 1.111em; /* 20px */ } .page-silver-pulser .model__desc-title { font-size: 1.222em; /* 22px */ font-weight: 700; line-height: 1.364; /* 30px / 22px (B) */ color: var(--color-dark); margin: 0; } .page-silver-pulser .model__desc-grid { display: grid; grid-template-columns: 1fr 1fr; /* Equal widths (designer override; Figma has 295 + flex-1) */ gap: 0.556em; /* 10px */ align-items: stretch; } /* Box treatment (padding/radius/shadow) lives on the two INNER card modifiers only. It used to sit on the generic .model__desc rule, which also matches the OUTER wrapper -- that painted an outer white box around the whole block (designer item 1, Aug 2026: removed). */ .page-silver-pulser .model__desc--accent, .page-silver-pulser .model__desc--ink { padding: 1.111em; /* 20px */ border-radius: var(--radius-panel); /* 20px */ box-shadow: 0 4px 20px 0 rgba(26, 43, 28, 0.07); } .page-silver-pulser .model__desc--accent { background: var(--color-accent-a30); } .page-silver-pulser .model__desc--ink { background: rgba(71, 146, 188, 0.3); /* --color-water-ozonator @ 30% */ } .page-silver-pulser .model__desc-eyebrow { font-size: 1em; /* 18px */ font-weight: 700; line-height: 1.389; /* 25px / 18px (C) */ text-transform: uppercase; letter-spacing: 0.1em; /* ~1.8px at 18px */ margin: 0; } .page-silver-pulser .model__desc--accent .model__desc-eyebrow { color: var(--color-accent-dark); /* #4a8b3f darker green */ } .page-silver-pulser .model__desc--ink .model__desc-eyebrow { color: var(--color-water-ozonator); } .page-silver-pulser .model__desc-body { font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.667; /* 30px / 18px (C) */ color: var(--color-dark); margin: 0; } /* Function card as collapsible reveal on mobile only. The eyebrow now lives inside a [data-reveal-toggle] button and the body inside a [hidden] region, so site-reveal.js can open/close it on phones. On desktop we keep the original static two-line card: the chevron is hidden, the trigger is inert, and the body is force-shown regardless of the [hidden] attribute site-reveal.js sets on init. (Mobile overrides live in the SECTION 1 @media (max-width:767px) block.) */ .page-silver-pulser .model__desc-trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.556em; /* 10px */ width: 100%; padding: 0; text-align: left; pointer-events: none; /* desktop: not a control */ cursor: default; } .page-silver-pulser .model__desc .model__desc-icon { display: none; } /* desktop: no chevron */ .page-silver-pulser .model__desc-body-wrap[hidden] { display: block; } /* desktop: always show body */ /* Price */ .page-silver-pulser .model__price { display: flex; align-items: baseline; gap: 0.222em; /* 4px */ margin: 0; } /* USA tariff surcharge line (Brad, Aug 2026). Reuses .model__price for the flex/baseline layout; this modifier restyles the text (the price line's 25px/900 lives on the child spans, which this line doesn't use). */ .page-silver-pulser .model__tariff { display: block; /* not flex: the label text + token spans flow and wrap as one sentence on phones */ font-size: 1em; /* 18px */ font-weight: 500; color: var(--color-tariff); } .page-silver-pulser .model__price-amount { font-size: 1.389em; /* 25px */ font-weight: 900; line-height: 1.4; /* 35px / 25px (B) */ color: var(--color-water-ozonator); } .page-silver-pulser .model__price-currency { font-size: 1.111em; /* 20px */ font-weight: 400; line-height: 1.75; /* 35px / 20px (B) */ color: var(--color-dark); } /* Finance row */ .page-silver-pulser .model__finance { display: flex; flex-direction: column; gap: 0.833em; /* 15px */ } .page-silver-pulser .model__shipping { font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.667; /* 30px / 18px (C) */ color: var(--color-dark); margin: 0; } .page-silver-pulser .model__bnpl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.556em; /* 10px */ margin: 0; } .page-silver-pulser .model__bnpl-label { font-size: 1em; font-weight: 700; line-height: 1.333; /* 24px / 18px (C) */ color: var(--color-dark); } .page-silver-pulser .model__bnpl-link { font-size: 0.833em; /* 15px */ font-weight: 700; line-height: 1.4; /* 21px / 15px (C, per comment intent) */ color: var(--color-dark); border-bottom: 3px solid var(--color-dark); /* No border-radius on a text element's border-bottom; it curves visibly at each end because the box is much taller than the border. Figma spec is 2px, bumped to 3px for legibility in production. */ transition: color 0.15s, border-color 0.15s; } .page-silver-pulser .model__bnpl-link:hover { color: var(--color-water-ozonator); border-bottom-color: var(--color-water-ozonator); } /* Trust badges */ .page-silver-pulser .model__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 1.667em; /* 30px */ padding: 0.556em 0; list-style: none; margin: 0; } .page-silver-pulser .model__trust-item { display: inline-flex; align-items: center; gap: 0.556em; /* 10px */ } .page-silver-pulser .model__trust-icon { color: var(--color-water-ozonator); /* brand blue check (currentColor sprite) */ width: 30px; /* fixed px: em was resolving small against parent font-size */ height: 30px; flex-shrink: 0; } .page-silver-pulser .model__trust-text { font-size: 1.111em; /* 20px */ font-weight: 700; line-height: 1.75; /* 35px / 20px (B) */ color: var(--color-water-ozonator); } .page-silver-pulser .model__trust-info { display: inline-flex; align-items: center; justify-content: center; width: 1.111em; /* 20px */ height: 1.111em; padding: 0; background: transparent; cursor: pointer; opacity: 0.7; transition: opacity 0.15s; } .page-silver-pulser .model__trust-info:hover { opacity: 1; } .page-silver-pulser .model__trust-info img { width: 100%; height: 100%; } .page-silver-pulser .model__trust-info svg { width: 100%; height: 100%; } /* Return-policy tooltip. Shown on hover (mouse), tap (touch), or focus (keyboard) by site-utilities.js, which toggles [hidden] + .is-open. The trust item is the positioning context. */ .page-silver-pulser .model__trust-item { position: relative; } .page-silver-pulser .model__trust-tip { position: absolute; top: calc(100% + 0.556em); /* 10px below the row */ left: 50%; z-index: 20; width: max-content; max-width: 20em; /* ~360px at the 18px base */ padding: 0.833em 1.111em; /* 15 / 20px */ border-radius: 0.667em; /* 12px */ background: var(--color-white); box-shadow: 0 4px 20px 0 rgba(26, 43, 28, 0.18); font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.556; /* 28px */ color: var(--color-dark); opacity: 0; transform: translateX(-50%) translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease; } .page-silver-pulser .model__trust-tip[hidden] { display: none; } .page-silver-pulser .model__tariff-wrap { position: relative; } /* surcharge tooltip anchor, mirrors .model__trust-item */ .page-silver-pulser .model__tariff .model__trust-info { color: var(--color-dark); /* same gray as the 30-day tip icon (page text + 0.7 opacity) */ vertical-align: middle; /* baseline-relative centering ... */ position: relative; top: -0.056em; /* ... plus a 1px lift; measured against the 30-day icon this puts both centers within 0.1px */ margin-left: 0.278em; /* 5px breathing room after the amount */ } .page-silver-pulser .model__trust-tip ul { margin: 0.278em 0 0; /* 5px */ padding-left: 1.111em; /* 20px */ list-style: disc; } .page-silver-pulser .model__trust-tip li { margin-top: 0.278em; } .page-silver-pulser .model__trust-tip.is-open { opacity: 1; transform: translateX(-50%) translateY(0); } .page-silver-pulser .model__trust-tip-link { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; } .page-silver-pulser .model__trust-tip-link:hover { color: var(--color-accent-dark); } /* Phone: the panel is centred on the "?" trigger (left:50% / -50%) with a 360px max-width; the trigger sits in the right half of the buy panel, so on a ~370px phone the panel overran the right viewport edge and clipped (designer feedback mobile #3, WOZ July 2026). Anchor it to the trust item's full width instead. */ @media (max-width: 767px) { .page-silver-pulser .model__trust-tip { left: 0; right: 0; width: auto; max-width: none; transform: translateY(-4px); } .page-silver-pulser .model__trust-tip.is-open { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .page-silver-pulser .model__trust-tip { transition: none; } } /* Add-to-cart form -- legacy table wrapper neutralized */ .page-silver-pulser .model__purchase-table, .page-silver-pulser .model__purchase-table > tbody, .page-silver-pulser .model__purchase-table > tbody > tr, .page-silver-pulser .model__purchase-table > tbody > tr > td { display: block; width: 100%; border: 0; padding: 0; margin: 0; border-collapse: collapse; } .page-silver-pulser .model__purchase { display: flex; flex-wrap: wrap; align-items: center; gap: 0.556em; /* 10px */ padding: 0.556em 0; margin: 0; } .page-silver-pulser .model__qty { display: inline-flex; align-items: center; gap: 0.556em; /* 10px */ padding: 0.278em 1.111em; /* 5px 20px */ border: 1px solid var(--color-dark); border-radius: var(--radius-pill); background: var(--color-white); } .page-silver-pulser .model__qty-btn { width: 1.5em; height: 1.5em; padding: 0; font-size: 1em; font-weight: 700; line-height: 1; color: var(--color-dark); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .page-silver-pulser .model__qty-input { width: 1.5em; text-align: center; font-family: inherit; font-size: 1em; font-weight: 400; line-height: 1.5; color: var(--color-dark); background: transparent; border: 0; padding: 0; /* Hide default number-input spinners */ -moz-appearance: textfield; appearance: textfield; } .page-silver-pulser .model__qty-input::-webkit-outer-spin-button, .page-silver-pulser .model__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .page-silver-pulser .model__add-to-cart { gap: 0.556em; padding: 0.556em 1.111em; /* 10px 20px */ font-size: 1em; /* 18px */ /* Override .btn's narrower transition list to include padding + box-shadow, both of which animate on hover and is-added. */ transition: padding 0.15s, box-shadow 0.15s, background-color 0.15s; } /* On hover: colour change only (the blue -> hover-dark background swap from .btn--blue:hover). The button does NOT grow on hover, per designer. (The post-click .is-added state below still expands.) */ /* Post-click success state: SAME SIZE as the resting button (designer, July 2026 -- the old expanded-height behaviour is gone), reverts to the base bg (not the hover-dark), gains a soft outer glow, and swaps the icon + label via the variant toggles below. Class is added by page-silver-pulser.js on click and removed after a short delay. */ .page-silver-pulser .model__add-to-cart.is-added, .page-silver-pulser .model__add-to-cart.is-added:hover { background: var(--color-water-ozonator); box-shadow: 0 0 20px 0 rgba(59, 59, 59, 0.3); } /* Icon + label variants -- both pre-rendered, one hidden at any time. Cleaner than mutating textContent / src in JS, and ensures both assets are preloaded so the swap is instant. */ .page-silver-pulser .model__cart-icon--added, .page-silver-pulser .model__atc-label--added { display: none; } .page-silver-pulser .model__add-to-cart.is-added .model__cart-icon--default, .page-silver-pulser .model__add-to-cart.is-added .model__atc-label--default { display: none; } .page-silver-pulser .model__add-to-cart.is-added .model__cart-icon--added, .page-silver-pulser .model__add-to-cart.is-added .model__atc-label--added { display: inline-flex; } .page-silver-pulser .model__cart-icon { /* Sprite symbols (ico-cart / ico-cart-added) inherit the button's white text via currentColor -- the old icon_cart_*.svg s and their brightness/invert filter hack are retired (July 2026). */ width: 1.5em; /* 27px-ish */ height: 1.222em; /* 22px */ transition: transform 0.15s; } /* No hover transform on the cart icon -- the button is colour-only on hover, per designer (icon does not change size). */ /* Manual download link */ .page-silver-pulser .model__manual { align-self: flex-start; font-size: 1.111em; /* 20px */ font-weight: 700; line-height: 1.5; /* 30px / 20px (B) */ color: var(--color-dark); border-bottom: 3px solid var(--color-dark); /* See note on .model__bnpl-link. Figma is 2px, bumped to 3px for legibility in production. */ transition: color 0.15s, border-color 0.15s; } .page-silver-pulser .model__manual:hover { color: var(--color-water-ozonator); border-bottom-color: var(--color-water-ozonator); } /* Hidden reveals (site-reveal.js: button trigger + [hidden] region) */ .page-silver-pulser .model__reveals { display: flex; flex-direction: column; border: 1px solid #cdcdcd; border-radius: var(--radius-panel); /* 20px */ overflow: hidden; } .page-silver-pulser .model__reveal + .model__reveal { border-top: 1px solid #cdcdcd; } .page-silver-pulser .model__reveal-trigger { display: flex; align-items: center; justify-content: space-between; gap: 1.111em; width: 100%; padding: 1.111em; /* 20px */ background: transparent; cursor: pointer; text-align: left; transition: background-color 0.15s; } .page-silver-pulser .model__reveal-label { flex: 1; font-size: 1.111em; /* 20px */ font-weight: 700; line-height: 1.5; /* 30px / 20px (B) */ color: var(--color-dark); } /* Chevron in a circular container. Collapsed: down + pale-blue fill. Expanded: flips 180deg (points up) + solid-blue fill. */ .page-silver-pulser .model__reveal-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 1.5em; /* 24px */ height: 1.5em; border-radius: 9999px; background: rgba(71, 146, 188, 0.12); transition: background-color 0.2s, transform 0.3s; } .page-silver-pulser .model__reveal-icon img { width: 0.444em; /* 8px */ height: 0.333em; /* 6px */ object-fit: contain; display: block; /* Recolor the source chevron to the brand blue for the collapsed (pale-blue circle) state. */ filter: brightness(0) saturate(100%) invert(52%) sepia(19%) saturate(1011%) hue-rotate(158deg) brightness(92%) contrast(85%); transition: filter 0.2s; } .page-silver-pulser .model__reveal-trigger:hover { background: rgba(71, 146, 188, 0.12); /* 12% #4792bc, per designer */ } .page-silver-pulser .model__reveal-trigger:hover .model__reveal-icon { background: rgba(71, 146, 188, 0.20); } /* Expanded state (aria-expanded set by site-reveal.js) */ .page-silver-pulser .model__reveal-trigger[aria-expanded="true"] .model__reveal-icon { background: var(--color-water-ozonator); transform: rotateX(180deg); } /* Recolor the chevron white when the circle fills blue. The source SVG is dark; this filter turns it white at the expanded state. */ .page-silver-pulser .model__reveal-trigger[aria-expanded="true"] .model__reveal-icon img { filter: brightness(0) invert(1); } /* Sprite chevron (currentColor): recolor via color, not filter. */ .page-silver-pulser .model__reveal-icon svg { width: 0.444em; /* 8px */ height: 0.333em; /* 6px */ display: block; color: var(--color-water-ozonator); /* brand blue #4792bc, collapsed */ transition: color 0.2s; } .page-silver-pulser .model__reveal-trigger[aria-expanded="true"] .model__reveal-icon svg { color: #fff; } /* Reveal body (shown/hidden by site-reveal.js) */ .page-silver-pulser .model__reveal-body { padding: 0 1.111em 1.111em; display: flex; flex-direction: column; gap: 0.556em; /* 10px */ } .page-silver-pulser .model__reveal-body[hidden] { display: none; } .page-silver-pulser .model__reveal-intro { font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.667; /* 30px */ color: var(--color-dark); } .page-silver-pulser .model__reveal-note { font-size: 0.833em; /* 15px */ font-weight: 400; line-height: 1.6; /* 24px */ color: var(--color-dark); } .page-silver-pulser .model__reveal-list { list-style: disc; padding-left: 1.5em; display: flex; flex-direction: column; } .page-silver-pulser .model__reveal-list li { font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.667; /* 30px */ color: var(--color-dark); } /* Accessory card (Stock up + Upgrades reveals) */ .page-silver-pulser .accessory-card { display: flex; align-items: center; gap: 1.111em; /* 20px */ padding: 0.556em; /* 10px */ border: 1px solid #d4d4d4; border-radius: var(--radius-panel); /* 20px */ } .page-silver-pulser .accessory-card__media { flex-shrink: 0; width: 5.556em; /* 100px */ height: 5.556em; border-radius: 0.222em; /* 4px */ overflow: hidden; } .page-silver-pulser .accessory-card__media img { width: 100%; height: 100%; object-fit: cover; } .page-silver-pulser .accessory-card__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.556em; /* 10px */ } .page-silver-pulser .accessory-card__name { font-size: 1.111em; /* 20px */ font-weight: 700; line-height: 1.5; /* 30px */ color: var(--color-dark); } .page-silver-pulser .accessory-card__price { font-size: 1.111em; /* 20px */ font-weight: 400; line-height: 1.15; /* 23px */ color: var(--color-dark); } .page-silver-pulser .accessory-card__desc { font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.667; /* 30px */ color: var(--color-dark); } /* The add-to-cart form wrapper is layout-transparent: the card's flex (desktop) / grid (mobile, grid-area:add) places the + Add BUTTON directly, so the form must not introduce its own box. */ .page-silver-pulser .accessory-card__buy { display: contents; } .page-silver-pulser .accessory-card__add { flex-shrink: 0; align-self: center; padding: 0.278em 1.111em; /* 5px 20px */ border-radius: var(--radius-pill); background: rgba(85, 85, 85, 0.1); font-size: 1em; /* 18px */ font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-water-ozonator); white-space: nowrap; transition: background-color 0.15s, box-shadow 0.15s; } .page-silver-pulser .accessory-card__add:hover { /* Hover: outline style -- white fill + 1px blue border (per designer's prototype). box-shadow inset draws the border without a size shift. */ background: var(--color-white); box-shadow: inset 0 0 0 2px var(--color-water-ozonator); } /* Stack the accessory card vertically on phones: image (full width) name price ............ + Add (same row; Add right-aligned) description The card becomes a 2-col grid; display:contents on __info lifts name/price/desc up to be grid items alongside the Add button (which is already a sibling at card level), so price and Add share one row with NO markup change. Desktop keeps __info as a flex column. */ @media (max-width: 767px) { .page-silver-pulser .accessory-card { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "media media" "name name" "price add" "desc desc"; align-items: center; column-gap: 0.833em; /* 15px between price and Add */ row-gap: 0.556em; /* 10px between stacked rows */ } .page-silver-pulser .accessory-card__info { display: contents; } .page-silver-pulser .accessory-card__media { grid-area: media; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--radius-card); } .page-silver-pulser .accessory-card__name { grid-area: name; } .page-silver-pulser .accessory-card__price { grid-area: price; } .page-silver-pulser .accessory-card__desc { grid-area: desc; } .page-silver-pulser .accessory-card__add { grid-area: add; justify-self: end; align-self: center; } } /* =============== RESPONSIVE =============== */ /* Tablet / mobile: stack gallery above buy panel, drop the sticky */ @media (max-width: 1024px) { .page-silver-pulser .model__product { grid-template-columns: 1fr; gap: 1.667em; /* 30px between stacked sections */ } .page-silver-pulser .model__gallery { position: static; grid-template-columns: 1fr; /* drop thumb rail; show only mobile dots */ } .page-silver-pulser .model__gallery-thumbs { display: none; /* mobile uses dot indicator instead */ } .page-silver-pulser .model__buy { position: static; } /* Function cards: 2 -> 1 column here (final column count at tablet). The tap-to-collapse reveal interaction stays at 767. */ .page-silver-pulser .model__desc-grid { grid-template-columns: 1fr; } } @media (min-width: 1025px) { /* Dots are intentionally visible on all viewports per Figma -- no hide rule. The thumb rail on the left and the dots beneath the stage serve different purposes (selection vs position). */ } /* Phone: collapse the function cards into tap-to-open reveals. The 2->1 column stack now happens at 1024 (above); only the phone-specific collapse behaviour lives here. Line-heights are unitless in the base rules, so there are no per-breakpoint line-height overrides. */ @media (max-width: 767px) { /* Function cards: become tap-to-open reveals on mobile. Show the chevron, make the trigger interactive, and let the [hidden] region collapse (overriding the desktop force-show). */ .page-silver-pulser .model__desc .model__desc-icon { display: flex; } .page-silver-pulser .model__desc-trigger { pointer-events: auto; cursor: pointer; } .page-silver-pulser .model__desc-body-wrap[hidden] { display: none; } /* Chevron flip + fill on expand -- mirrors the .model__reveal-icon behaviour used by the other reveals. */ .page-silver-pulser .model__desc-trigger[aria-expanded="true"] .model__reveal-icon { background: var(--color-water-ozonator); transform: rotateX(180deg); } .page-silver-pulser .model__desc-trigger[aria-expanded="true"] .model__reveal-icon img { filter: brightness(0) invert(1); } .page-silver-pulser .model__add-to-cart { flex: 1; /* fill width next to quantity selector */ } } /* ----------------------------------------------------------- SECTION 2: TWO FUNCTIONS (Figma 7073:1714) Light-blue section, centered 50px heading + 22px subhead, two equal white cards (image + title + body + accent link). ----------------------------------------------------------- */ /* The --blue wave above this section already provides the visual lead-in (white -> light-blue), so this is the one section with no top padding -- its content sits flush under the wave. All other sections keep the base .section top padding. */ .page-silver-pulser .section-description { padding-top: 0; } .page-silver-pulser .desc__container { display: flex; flex-direction: column; gap: 1.667em; /* 30px between header and card grid */ } .page-silver-pulser .desc__header { display: flex; flex-direction: column; gap: 0.556em; /* 10px */ text-align: center; } .page-silver-pulser .desc__title { line-height: 1.3; /* ~65px @50 desktop / ~39px @30 mobile (matches S3 title) */ /* colour via .text-ink (this page's primary heading tone) */ } .page-silver-pulser .desc__subhead { font-size: 1.222em; /* 22px -- constant; Figma mobile and desktop both 22px (shared --text-subheading bottoms out at 18px, which is wrong for this section's mobile) */ font-weight: 700; line-height: 1.4; color: var(--color-dark); } .page-silver-pulser .desc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.111em; /* 20px */ align-items: stretch; /* both cards match height */ } .page-silver-pulser .desc__card { display: flex; flex-direction: column; gap: 1.111em; /* 20px */ padding: clamp(30px, 1.25vw + 25px, 40px); /* 30 -> 40px, fluid 400->1200 */ background: var(--color-white); border-radius: 1.667em; /* 30px */ } .page-silver-pulser .desc__media { width: 100%; /* 400px desktop -> 200px mobile, rebased to the 1200/400 basis (Aug 2026) */ height: clamp(200px, 25vw + 100px, 400px); border-radius: var(--radius-panel); /* 20px */ overflow: hidden; } .page-silver-pulser .desc__media img { width: 100%; height: 100%; object-fit: cover; } .page-silver-pulser .desc__card-title { font-size: clamp(20px, 1.875vw + 12.5px, 35px); /* 20 -> 35px, fluid 400->1200 */ font-weight: 700; line-height: 1.3; /* ~45.5px @35 desktop / ~26px @20 mobile (A2) */ color: var(--color-dark); } .page-silver-pulser .desc__card-body { font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.667; /* 30px */ color: var(--color-dark); } /* Shared green underline "learn more" link. Reused across product sections (the SOTA "Products Description" component in Figma). Green = Silver Pulser product accent. */ .page-silver-pulser .learn-link { align-self: flex-start; font-size: 1em; /* 18px -- Figma component "SOTA Products Description" */ font-weight: 700; line-height: 1.667; /* 30px / 18px */ color: var(--color-accent); border-bottom: 3px solid var(--color-accent); /* No border-radius on a text element's border-bottom; it curves visibly at the line ends. Figma is 2px, bumped to 3px for legibility (consistent with .model__bnpl-link / .model__manual). */ transition: color 0.15s, border-color 0.15s; } .page-silver-pulser .learn-link:hover { color: var(--color-accent-dark); border-bottom-color: var(--color-accent-dark); } /* Section 2 responsive */ @media (max-width: 1024px) { .page-silver-pulser .desc__grid { grid-template-columns: 1fr; /* stack cards */ } } /* ----------------------------------------------------------- SECTION 3: HOW TO USE IT (Figma 7073:1737) White section, two-tone 50px heading, two bordered video cards: poster (image-to-video modal) + decorative control bar + title/body + Share and Watch-on platform links. ----------------------------------------------------------- */ .page-silver-pulser .how-to__container { display: flex; flex-direction: column; gap: 1.667em; /* 30px */ } .page-silver-pulser .how-to__header { display: flex; flex-direction: column; gap: 0.556em; /* 10px -- standardized heading/subheading gap (feedback #7) */ text-align: center; padding-bottom: 1.111em; } .page-silver-pulser .how-to__title { line-height: 1.3; /* ~65px @50 desktop / ~39px @30 mobile */ } .page-silver-pulser .how-to__subhead { font-size: 1.222em; /* 22px -- constant; Figma mobile and desktop both 22px (the shared --text-subheading bottoms out at 18px, which was wrong for this section's mobile) */ font-weight: 700; line-height: 1.4; color: var(--color-dark); } .page-silver-pulser .how-to__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.667em; /* 30px */ align-items: start; } .page-silver-pulser .how-to__card { display: flex; flex-direction: column; gap: 1.111em; /* 20px */ padding: 1.111em; /* 20px */ background: var(--color-white); border: 1px solid #d4d4d4; border-radius: var(--radius-panel); /* 20px */ } /* Poster / video trigger */ .page-silver-pulser .how-to__video { display: block; width: 100%; } /* Video preview rendering now handled by the shared .video-preview component in site-image-to-video.css. .how-to__video keeps its layout width above. */ /* Card body */ .page-silver-pulser .how-to__body { display: flex; flex-direction: column; gap: 1.111em; /* 20px */ padding: 0 0.556em; /* 10px side padding from Figma */ } .page-silver-pulser .how-to__card-title { font-size: clamp(20px, 0.25vw + 19px, 22px); /* 20 -> 22px, fluid 400->1200 */ font-weight: 700; line-height: 1.364; /* 30px */ color: var(--color-dark); } .page-silver-pulser .how-to__card-text { font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.667; /* 30px */ color: var(--color-dark); } /* Actions row: Share (left) + Watch-on platforms (right) */ .page-silver-pulser .how-to__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.833em; padding: 0 0.556em; line-height: 1.9; /* single-line row; sets the text line-box height so the row matches Figma's 35px (1.9 x 18px Share ~= 34px). Explicit value replaces fragile inheritance. */ } .page-silver-pulser .how-to__share { display: inline-flex; align-items: center; gap: 0.444em; /* 8px */ font-size: 1em; /* 18px */ font-weight: 500; color: var(--color-dark); cursor: pointer; } .page-silver-pulser .how-to__share img { width: 1.111em; height: 1.111em; } .page-silver-pulser .how-to__share svg { width: 1.111em; height: 1.111em; } .page-silver-pulser .how-to__share:hover { color: var(--color-water-ozonator); } /* Label swap for the clipboard-fallback confirmation (site-video-share.js toggles .is-copied). Both labels are pre-rendered; only one shows. The native share path doesn't copy, so it never triggers this. */ .page-silver-pulser .how-to__share-label--copied { display: none; } .page-silver-pulser .how-to__share.is-copied .how-to__share-label--default { display: none; } .page-silver-pulser .how-to__share.is-copied .how-to__share-label--copied { display: inline; color: var(--color-accent); } /* Share platform picker (built by site-video-share.js when a card offers both Rumble and YouTube; a single option shares directly). The picker is appended inside .how-to__actions, which is position:relative for this. */ .page-silver-pulser .how-to__actions { position: relative; } .page-silver-pulser .how-to__share-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; display: flex; flex-direction: column; min-width: 8.333em; /* 150px */ padding: 0.278em; /* 5px */ background: var(--color-white); border-radius: 0.556em; /* 10px */ box-shadow: 0 4px 20px 0 rgba(26, 43, 28, 0.15); } .page-silver-pulser .how-to__share-menu-item { padding: 0.444em 0.667em; /* 8px 12px */ border-radius: 0.333em; /* 6px */ font-size: 0.833em; /* 15px */ font-weight: 700; text-align: left; color: var(--color-dark); transition: background-color 0.15s, color 0.15s; } .page-silver-pulser .how-to__share-menu-item:hover { background: var(--color-accent-a12); color: var(--color-accent-dark); } .page-silver-pulser .how-to__watch { display: flex; flex-wrap: wrap; align-items: center; gap: 1.111em; /* 20px */ } .page-silver-pulser .how-to__watch-label { font-size: clamp(15px, 0.375vw + 13.5px, 18px); /* 15 -> 18px, fluid 400->1200 */ font-weight: 700; text-transform: uppercase; color: var(--color-dark); } .page-silver-pulser .how-to__platform { display: inline-flex; align-items: center; gap: 0.444em; /* 8px */ font-size: 1em; /* 18px */ font-weight: 500; color: var(--color-dark); transition: color 0.15s; } .page-silver-pulser .how-to__platform img { /* Explicit width AND height per Figma so the SVG can't stretch from its own viewBox (width:auto was letting these blow out into horizontal blobs). object-fit keeps the glyph crisp if the box ratio differs slightly from the source. Rumble is ~19x20, YouTube is ~26x20 -- widths set per-platform below. */ height: 1.111em; /* 20px */ width: auto; max-width: none; object-fit: contain; flex-shrink: 0; } /* Rumble icon: 19.111 x 20.001 in Figma -> ~0.956:1 */ .page-silver-pulser .how-to__platform[data-platform="rumble"] img { width: 1.062em; /* ~19.1px */ } .page-silver-pulser .how-to__platform[data-platform="rumble"] svg { width: 1.062em; height: 1.111em; } /* YouTube icon: 26 x 20 in Figma -> 1.3:1 (wider than tall) */ .page-silver-pulser .how-to__platform[data-platform="youtube"] img { width: 1.444em; /* 26px */ } .page-silver-pulser .how-to__platform[data-platform="youtube"] svg { width: 1.444em; height: 1.111em; } .page-silver-pulser .how-to__platform:hover { color: var(--color-water-ozonator); } /* Section 3 responsive */ @media (max-width: 1024px) { .page-silver-pulser .how-to__grid { grid-template-columns: 1fr; /* stack cards */ } } @media (max-width: 767px) { .page-silver-pulser .how-to__actions { justify-content: flex-start; gap: 1.111em; } /* Watch-on links are icon-only on mobile (per Figma). Hide the text label visually but keep it for screen readers, since the icon's alt="" leaves the link with no accessible name otherwise. */ .page-silver-pulser .how-to__platform span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } } /* ----------------------------------------------------------- SHARED CAROUSEL CONTROL STATE Applied by js/page-silver-pulser.js. Used by the Section 1 gallery (and any future [data-carousel-id]) when data-loop is "false" -- dims the arrow at the start/end. ----------------------------------------------------------- */ .page-silver-pulser .carousel-btn.is-disabled { opacity: 0.35; pointer-events: none; } /* ----------------------------------------------------------- SECTION 4: TESTIMONIALS (Figma 7073:1819) -- static grid Cream section, two-tone 50px heading. Eight cards: a feature row (one wide + one narrow) then two rows of three. Footer row carries the disclaimer and "Read all reviews" CTA. ----------------------------------------------------------- */ .page-silver-pulser .testimonials__container { display: flex; flex-direction: column; align-items: center; gap: 2.778em; /* 50px */ } .page-silver-pulser .testimonials__header { display: flex; flex-direction: column; gap: 0.556em; /* 10px -- standardized heading/subheading gap (feedback #7) */ text-align: center; width: 100%; } .page-silver-pulser .testimonials__title { line-height: 1.3; } .page-silver-pulser .testimonials__subhead { font-size: 1.222em; /* 22px -- constant; Figma mobile and desktop both 22px (shared --text-subheading bottoms out at 18px) */ font-weight: 700; line-height: 1.4; color: var(--color-dark); } /* Grid of rows */ .page-silver-pulser .tgrid { display: flex; flex-direction: column; gap: 1.111em; /* 20px between rows */ width: 100%; } .page-silver-pulser .tgrid__row { display: flex; gap: 1.111em; /* 20px */ align-items: stretch; /* cards match height within a row */ } /* Feature row: wide card + narrow card, ~860:320 like the Figma */ .page-silver-pulser .tgrid__row--feature > .tcard:first-child { flex: 860 1 0; } .page-silver-pulser .tgrid__row--feature > .tcard:last-child { flex: 320 1 0; } /* Rows of three: equal columns */ .page-silver-pulser .tgrid__row--three > .tcard { flex: 1 1 0; } /* Testimonial card */ .page-silver-pulser .tcard { display: flex; flex-direction: column; gap: 0.556em; /* 10px */ padding: 1.111em; /* 20px */ border-radius: var(--radius-panel); /* 20px */ box-shadow: 0 4px 20px 0 rgba(26, 43, 28, 0.07); min-width: 0; } .page-silver-pulser .tcard--tint-30 { background: var(--color-accent-a30); } .page-silver-pulser .tcard--tint-20 { background: var(--color-accent-a20); } .page-silver-pulser .tcard__badge { align-self: flex-start; background: var(--color-white); border-radius: var(--radius-panel); padding: 0.278em 1.111em; /* 5px 20px */ font-size: 1em; /* 18px */ font-weight: 700; line-height: 1.389; /* 25px */ text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent-dark); } .page-silver-pulser .tcard__stars { /* Expects rating_stars_5.png to be a TIGHTLY-CROPPED 150x25 export (artwork edge-to-edge, no transparent padding). The Figma node 7073:1829 is 150x25 but the source PNG it references has padding baked in -- Figma masks it with object-cover. A tight re-export means this img can render at its natural size without any object-fit gymnastics here. */ width: 8.333em; /* 150px */ height: 1.389em; /* 25px */ } .page-silver-pulser .tcard__quote { display: flex; flex-direction: column; gap: 0; } .page-silver-pulser .tcard__quote p { font-size: clamp(18px, 0.25vw + 17px, 20px); /* 18 mobile -> 20 desktop */ font-weight: 500; line-height: 1.75; /* constant; ~31.5px @18 mobile -> 35px @20 desktop */ color: var(--color-dark); } .page-silver-pulser .tcard__divider { width: 100%; height: 0; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); margin: 0; } .page-silver-pulser .tcard__person { display: flex; align-items: center; gap: 1.667em; /* 30px */ } .page-silver-pulser .tcard__avatar--placeholder { width: 6.278em; /* 113px */ height: 5.556em; /* 100px */ flex-shrink: 0; color: var(--color-accent); /* tints the currentColor sprite avatar */ } .page-silver-pulser .tcard__avatar--photo { width: 5.556em; /* 100px */ height: 5.556em; border-radius: 9999px; object-fit: cover; flex-shrink: 0; } .page-silver-pulser .tcard__meta { display: flex; flex-direction: column; min-width: 0; } .page-silver-pulser .tcard__name { font-size: 1.111em; /* 20px */ font-weight: 700; line-height: 1.5; /* 30px @20 both views */ color: var(--color-dark); } .page-silver-pulser .tcard__loc { font-size: 1.111em; /* 20px */ font-weight: 400; line-height: 1.5; /* 30px @20 both views */ color: var(--color-dark); } /* Footer: disclaimer (left, flexible) + CTA (right) */ .page-silver-pulser .testimonials__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.667em; /* 30px */ width: 100%; } .page-silver-pulser .testimonials__disclaimer { flex: 1 1 0; min-width: 0; font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.667; /* 30px */ color: var(--color-dark); } .page-silver-pulser .testimonials__cta { flex-shrink: 0; } /* Section 4 responsive: rows collapse to single column */ @media (max-width: 1024px) { .page-silver-pulser .tgrid__row { flex-direction: column; } .page-silver-pulser .testimonials__footer { justify-content: flex-start; } } @media (max-width: 767px) { /* Footer stacks: centered disclaimer, then CTA below it (Figma mobile). Without this the disclaimer's flex:1 1 0 shrinks to a sliver beside the button. */ .page-silver-pulser .testimonials__footer { flex-direction: column; align-items: center; justify-content: center; gap: 0.556em; /* 10px */ } .page-silver-pulser .testimonials__disclaimer { flex: none; width: 100%; text-align: center; } } /* ----------------------------------------------------------- SECTION 5: WHICH MODEL (Figma 7073:1915) Light-grey section. Three product cards (SP8 featured with green border) + comparison table with a "Show more details" disclosure toggle. ----------------------------------------------------------- */ .page-silver-pulser .section-which-model { background: #edecec; } .page-silver-pulser .which__container { display: flex; flex-direction: column; gap: 2.778em; /* 50px */ } .page-silver-pulser .which__header { display: flex; flex-direction: column; gap: 0.556em; /* 10px -- standardized heading/subheading gap (feedback #7) */ text-align: center; } .page-silver-pulser .which__title { line-height: 1.3; } .page-silver-pulser .which__subhead { font-size: 1.222em; /* 22px -- constant; Figma mobile and desktop both 22px (shared --text-subheading bottoms out at 18px) */ font-weight: 700; line-height: 1.4; color: var(--color-dark); } /* Three product cards */ .page-silver-pulser .which__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.556em; /* 10px */ align-items: stretch; } .page-silver-pulser .which-card { display: flex; flex-direction: column; gap: 0.778em; /* 14px */ padding-top: 1.111em; /* 20px */ background: var(--color-white); border: 1px solid #d4d4d4; border-radius: var(--radius-panel); /* 20px */ overflow: hidden; } /* Featured (SP8): 4px green border instead of the 1px grey */ .page-silver-pulser .which-card--featured { border: 4px solid var(--color-accent); } .page-silver-pulser .which-card__media { width: 100%; height: 12.944em; /* 233px */ } .page-silver-pulser .which-card__media img { width: 100%; height: 100%; object-fit: contain; } .page-silver-pulser .which-card__name { font-size: 1.667em; /* 30px */ font-weight: 700; line-height: 1.167; /* 35px */ color: var(--color-dark); text-align: center; } .page-silver-pulser .which-card__price { text-align: center; margin: 0; } .page-silver-pulser .which-card__amount { font-size: 1.389em; /* 25px */ font-weight: 900; line-height: 1.4; /* 35px */ color: var(--color-water-ozonator); } .page-silver-pulser .which-card__currency { font-size: 1.111em; /* 20px */ font-weight: 400; color: var(--color-dark); } /* Cream footer panel fills remaining height; CTA pinned to bottom */ .page-silver-pulser .which-card__foot { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 1.111em; /* 20px */ background: var(--color-cream-bg); padding: 1.111em 0.556em; /* 20px 10px */ } .page-silver-pulser .which-card__desc { font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.667; /* 30px */ color: var(--color-dark); text-align: center; } .page-silver-pulser .which-card__cta { align-self: center; gap: 0.556em; } .page-silver-pulser .which-card__cart-icon { /* Sprite has no intrinsic size (the old was 25x25). */ width: 1.389em; /* 25px */ height: 1.389em; flex-shrink: 0; } .page-silver-pulser .which-card__cart-icon { width: 1.5em; height: 1.222em; } /* Neutralize the legacy table wrapper around SP8's add-to-cart form */ .page-silver-pulser .which-card__buy-table, .page-silver-pulser .which-card__buy-table > tbody, .page-silver-pulser .which-card__buy-table > tbody > tr, .page-silver-pulser .which-card__buy-table > tbody > tr > td { display: block; width: 100%; border: 0; padding: 0; margin: 0; border-collapse: collapse; } .page-silver-pulser .which-card__buy { display: flex; justify-content: center; margin: 0; } /* Heading + table block (matches the Compare page structure): the block is ONE child of .which__container's 50px gap, and the heading-to-table space is the block's own 30px gap. */ .page-silver-pulser .which__compare-block { display: flex; flex-direction: column; gap: 1.667em; /* 30px heading-to-table */ } .page-silver-pulser .which__compare-heading { font-size: 1.222em; /* 22px */ font-weight: 700; line-height: 1.364; /* 30px */ color: var(--color-dark); text-align: center; margin: 0; } /* Comparison table */ .page-silver-pulser .which-compare { display: flex; flex-direction: column; width: 100%; } /* Horizontal-scroll wrapper around the table rows (NOT the toggle button). On narrow phones the table is wider than the viewport, so a native horizontal scrollbar appears here. min-width:0 is the flexbox fix: as a flex child of .which-compare this lets the wrapper shrink to the container width and scroll its content internally, instead of forcing the whole section wider (which would cause page-level horizontal scroll). */ .page-silver-pulser .which-compare__scroll { min-width: 0; /* no overflow-x: the chart squeezes fluidly at all widths (compare-page pattern) */ } /* Per-cell labels exist in the markup for the phone layout only; on desktop/tablet the Features column carries the labels and these stay hidden. */ .page-silver-pulser .which-compare__cell-label { display: none; } /* Shared row template: feature label (flexible, capped) + 3 fixed cols */ .page-silver-pulser .which-compare__head, .page-silver-pulser .which-compare__row { display: grid; grid-template-columns: minmax(0, 1fr) 13em 13em 13em; /* ~233px cols */ align-items: stretch; border-bottom: 1px solid #cdcdcd; } /* Header row: sticky under the fixed masthead at all widths (compare-page pattern). The white row background makes the pinned header opaque -- the translucent column tints composite over it exactly as they do over the page, so rows cannot show through while pinned. */ .page-silver-pulser .which-compare__head { position: sticky; top: var(--masthead-h, 70px); z-index: 2; /* Opaque backing in the SECTION color (.section-which-model is #edecec): invisible at rest (no white ears beside the rounded corner cells), fills the corner notches consistently while pinned, and the translucent column tints composite over it exactly as the body cells do over the section. */ background: #edecec; border-bottom: 2px solid var(--color-accent); } .page-silver-pulser .which-compare__feature-head, .page-silver-pulser .which-compare__feature { display: flex; align-items: center; padding: 0.278em 1.667em; /* 5px 30px */ color: var(--color-dark); } .page-silver-pulser .which-compare__feature-head { font-size: 1.222em; /* 22px */ font-weight: 700; line-height: 1.136; /* 25px */ } .page-silver-pulser .which-compare__feature { padding-left: 3.647em; /* 65.65px indent, matching Figma rows */ font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.667; /* 30px */ } .page-silver-pulser .which-compare__link { text-decoration: underline; /* matches page-compare-silver-pulsers */ } .page-silver-pulser .which-compare__col { display: flex; align-items: center; justify-content: center; padding: 0.278em; font-size: 1.111em; /* 20px */ font-weight: 700; color: var(--color-dark); text-align: center; } /* Column tint ramp from the Figma: SP8 darkest, Lite lightest */ .page-silver-pulser .which-compare__col--sp8 { background: var(--color-accent-a60); } .page-silver-pulser .which-compare__col--sp7 { background: var(--color-accent-a40); } .page-silver-pulser .which-compare__col--lite { background: var(--color-accent-a30); } /* Round all four visible corners of the chart (the tinted columns define its shape; the Features column is white on white). Corner CELLS carry the radii directly -- container clipping would break the sticky header. */ .page-silver-pulser .which-compare__head .which-compare__col--sp8 { border-top-left-radius: var(--radius-panel); } .page-silver-pulser .which-compare__head .which-compare__col--lite { border-top-right-radius: var(--radius-panel); } .page-silver-pulser .which-compare__row:last-child .which-compare__col--sp8 { border-bottom-left-radius: var(--radius-panel); } .page-silver-pulser .which-compare__row:last-child .which-compare__col--lite { border-bottom-right-radius: var(--radius-panel); } .page-silver-pulser .which-compare__row:last-child { border-bottom: 0; /* the full-width hairline would run past the rounded corners */ } /* X-mark cells are de-emphasised per Figma: same base dark tone as the checks (#3a3a3a), but at 40% alpha so they read as muted against the green tint. The check cells stay fully opaque. */ .page-silver-pulser .which-compare__col--no { color: rgba(58, 58, 58, 0.40); } /* Accessories sub-header row: bold label, no checkmarks */ .page-silver-pulser .which-compare__row--subhead .which-compare__feature { font-weight: 700; font-size: 1.111em; /* 20px */ padding-left: 1.667em; /* align with section heading, less indented than rows */ } .page-silver-pulser .which-compare__row--subhead .which-compare__col { /* keep the tint columns continuous but empty */ min-height: 2em; } /* Expandable region */ .page-silver-pulser .which-compare__more { display: flex; flex-direction: column; } .page-silver-pulser .which-compare__more[hidden] { display: none; } /* Toggle */ .page-silver-pulser .which-compare__toggle { display: inline-flex; align-items: center; justify-content: center; gap: 1.111em; /* 20px */ align-self: center; padding: 1.111em; cursor: pointer; background: transparent; } .page-silver-pulser .which-compare__toggle-label { font-size: 1.111em; /* 20px */ font-weight: 700; line-height: 1.44; /* 28.8px */ color: var(--color-dark); } .page-silver-pulser .which-compare__toggle-icon { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 1.333em; /* 24px circle */ height: 1.333em; border-radius: 9999px; /* Pale water-ozonator-blue circle. Same pattern as the Section 1 reveal toggles (.model__reveal-icon) so all reveal-style buttons across the page share one visual treatment. */ background: rgba(71, 146, 188, 0.12); transition: background-color 0.2s, transform 0.3s; } .page-silver-pulser .which-compare__toggle-icon img { width: 0.444em; /* 8px */ height: 0.333em; /* 6px */ object-fit: contain; display: block; /* Recolor the source chevron to the brand blue for the collapsed state -- matches the Section 1 reveal toggles. */ filter: brightness(0) saturate(100%) invert(52%) sepia(19%) saturate(1011%) hue-rotate(158deg) brightness(92%) contrast(85%); transition: filter 0.2s; } .page-silver-pulser .which-compare__toggle:hover .which-compare__toggle-icon { background: rgba(71, 146, 188, 0.20); } /* Expanded state (aria-expanded set by site-reveal.js): fill blue, flip chevron upward, recolor it white. */ .page-silver-pulser .which-compare__toggle[aria-expanded="true"] .which-compare__toggle-icon { background: var(--color-water-ozonator); transform: rotateX(180deg); } .page-silver-pulser .which-compare__toggle[aria-expanded="true"] .which-compare__toggle-icon img { filter: brightness(0) invert(1); } .page-silver-pulser .which-compare__toggle-icon svg { width: 0.444em; /* 8px */ height: 0.333em; /* 6px */ display: block; color: var(--color-water-ozonator); transition: color 0.2s; } .page-silver-pulser .which-compare__toggle[aria-expanded="true"] .which-compare__toggle-icon svg { color: #fff; } /* Section 5 responsive */ @media (max-width: 1024px) { .page-silver-pulser .which__cards { grid-template-columns: 1fr; gap: 1.111em; } /* Comparison table (option A + frozen first column): the Features label column is pinned in place while the three product columns scroll under it. Products are a fixed 160px; the feature column fills on tablet (1fr) but clamps to 160px on phone, so the table's 640px minimum overflows a phone viewport and scrolls horizontally via .which-compare__scroll. On tablet (>=640px) it fills the width with no scroll. */ /* Fluid squeeze (compare-page pattern): columns share the width; NO horizontal scroll at this tier. */ .page-silver-pulser .which-compare__head, .page-silver-pulser .which-compare__row { grid-template-columns: minmax(0, 1.5fr) 1fr 1fr 1fr; } .page-silver-pulser .which-compare__feature { padding-left: 1.111em; /* 20px -- reduce big indent on small screens */ padding-right: 0.556em; /* 10px */ } .page-silver-pulser .which-compare__row--subhead .which-compare__feature { padding-left: 0.909em; /* 20px at 22px */ } } /* Phone chart (compare-page pattern, Figma 13587:23305): NO horizontal scrolling -- the Features column disappears; three fluid columns fill the width and every cell stacks its own label above its value. */ @media (max-width: 767px) { .page-silver-pulser .which-compare__head, .page-silver-pulser .which-compare__row { grid-template-columns: 1fr 1fr 1fr; } .page-silver-pulser .which-compare__feature-head, .page-silver-pulser .which-compare__feature, .page-silver-pulser .which-compare__row--subhead { display: none; /* labels move into the cells; no Accessories divider on mobile */ } .page-silver-pulser .which-compare__col { flex-direction: column; font-size: 1em; /* 18px anchor so label/value ems below are exact */ padding: 0.278em; /* 5px */ } .page-silver-pulser .which-compare__cell-label { display: block; font-size: 0.833em; /* 15px */ font-weight: 400; line-height: 1.333; /* 20px */ text-align: center; color: var(--color-dark); } .page-silver-pulser .which-compare__cell-value { font-size: 1.111em; /* 20px check/cross glyphs */ line-height: 1.6; /* 32px */ } .page-silver-pulser .which-compare__col--val .which-compare__cell-value { font-size: 0.833em; /* 15px bold text values */ font-weight: 700; line-height: 1.333; /* 20px */ } .page-silver-pulser .which-compare__head .which-compare__col { font-size: 1.222em; /* 22px bold header cells */ } } /* ----------------------------------------------------------- SECTION 6: KITS (Figma 7073:1959) White section, two kit cards. Featured (Wellness & Relaxation) has an accent border + "Most Popular Bundle" banner. Each card: banner (optional) -> top image+intro row -> cream footer with INCLUDES checklist + View CTA. Card structures normalized so both align. ----------------------------------------------------------- */ .page-silver-pulser .kits__container { display: flex; flex-direction: column; gap: 2.778em; /* 50px */ } .page-silver-pulser .kits__header { display: flex; flex-direction: column; gap: 0.556em; /* 10px -- standardized heading/subheading gap (feedback #7) */ text-align: center; } .page-silver-pulser .kits__title { line-height: 1.3; } .page-silver-pulser .kits__subhead { font-size: 1.222em; /* 22px -- constant; Figma mobile and desktop both 22px (shared --text-subheading bottoms out at 18px) */ font-weight: 700; line-height: 1.4; color: var(--color-dark); } .page-silver-pulser .kits__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4.444em; /* 80px gap between the two cards, per Figma */ align-items: stretch; } /* Kit card */ .page-silver-pulser .kit-card { display: flex; flex-direction: column; background: var(--color-white); /* 4px border on both cards so the featured card's coloured border doesn't reduce its inner content width relative to the non- featured cards. Both cards keep identical content areas, which keeps the CTA buttons (align-self: stretch) the same width. Non-featured cards show the 1px #d4d4d4 hairline via an OUTER box-shadow ring (an inset ring is painted under the opaque cream footer, so it would only show around the white top; an outer ring can't be covered and wraps the whole block). */ border: 4px solid transparent; border-radius: var(--radius-panel); /* 20px */ box-shadow: 0 4px 20px 0 rgba(26, 43, 28, 0.07), 0 0 0 1px #d4d4d4; overflow: hidden; } .page-silver-pulser .kit-card--featured { border-color: var(--color-accent); /* Drop the inset hairline; the accent border replaces it. */ box-shadow: 0 4px 20px 0 rgba(26, 43, 28, 0.07); } /* Green banner across the featured card top */ .page-silver-pulser .kit-card__banner { background: var(--color-accent); color: var(--color-white); padding: 0.278em 1.111em; /* 5px 20px */ font-size: 1em; /* 18px */ font-weight: 700; line-height: 1.389; /* 25px */ text-transform: uppercase; letter-spacing: 0.1em; text-align: center; } /* Top row: product image + intro (title/price/summary) */ .page-silver-pulser .kit-card__top { display: flex; gap: 0.778em; /* 14px */ align-items: center; padding: 1.111em; /* 20px */ } /* The featured card's MOST POPULAR banner is 35px tall (25px line-height + 2x5px padding). Give the banner-less card the same 35px at the top of its white section so both cards' white sections match and the cream INCLUDES bands align at desktop (designer item 12, Aug 2026). */ .page-silver-pulser .kit-card:not(.kit-card--featured) .kit-card__top { padding-top: calc(1.111em + 35px); } .page-silver-pulser .kit-card__media { flex: 1 1 0; min-width: 0; height: 12.944em; /* 233px */ border-radius: var(--radius-panel); overflow: hidden; } .page-silver-pulser .kit-card__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-panel); } .page-silver-pulser .kit-card__intro { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.278em; /* 5px */ text-align: left; } .page-silver-pulser .kit-card__name { font-size: 1.222em; /* 22px */ font-weight: 700; line-height: 1.364; /* 30px */ color: var(--color-dark); } .page-silver-pulser .kit-card__price { margin: 0; } .page-silver-pulser .kit-card__was { font-size: 1em; /* 18px */ font-weight: 400; color: var(--color-dark); text-decoration: line-through; margin-right: 0.25em; } .page-silver-pulser .kit-card__amount { font-size: 1.389em; /* 25px */ font-weight: 900; line-height: 1.4; /* 35px */ color: var(--color-water-ozonator); } .page-silver-pulser .kit-card__currency { font-size: 1.111em; /* 20px */ font-weight: 400; color: var(--color-dark); } .page-silver-pulser .kit-card__summary { font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.667; /* 30px */ color: var(--color-dark); } /* Cream footer: INCLUDES checklist (top) + CTA (bottom), fills height */ .page-silver-pulser .kit-card__foot { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 1.667em; /* 30px */ background: var(--color-cream-bg); padding: 1.111em; /* 20px */ } .page-silver-pulser .kit-card__includes { display: flex; flex-direction: column; gap: 0.556em; /* 10px */ } .page-silver-pulser .kit-card__includes-label { font-size: 0.833em; /* 15px */ font-weight: 700; line-height: 1.533; /* 23px */ text-transform: uppercase; letter-spacing: 0.2em; /* 3px at 15px */ color: var(--color-dark); } .page-silver-pulser .kit-card__list { display: flex; flex-direction: column; } .page-silver-pulser .kit-card__item { display: flex; align-items: center; gap: 1.111em; /* 20px */ font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.667; /* 30px */ color: var(--color-dark); } /* The Silver Pulser line is emphasised (blue, bold, larger) */ .page-silver-pulser .kit-card__item--primary { font-size: 1.222em; /* 22px */ font-weight: 700; line-height: 1.591; /* 35px */ color: var(--color-water-ozonator); /* Re-anchor the icon-to-label gap to 20px: this row declares its own 22px font-size, so the inherited 1.111em gap resolved to ~24.4px and the label sat out of line with the 20px-gap rows below (designer item 11, Aug 2026). 0.909em x 22px = 20px. */ gap: 0.909em; } .page-silver-pulser .kit-card__check { color: var(--color-water-ozonator); /* brand blue check (currentColor sprite) */ /* Fixed 25px (standardized kit-check size across pages), independent of the row font-size so every row's check is identical. */ width: 25px; height: 25px; flex-shrink: 0; } .page-silver-pulser .kit-card__cta { /* Fixed width per Figma (node 7073:2046, w-[393px]) on both kit cards -- regardless of which label text the button contains, both buttons render at the same 393px so the two cards have visually parallel CTAs. 21.833em at the 18px base = 393px. */ align-self: center; width: 21.833em; text-align: center; } /* Section 6 responsive */ @media (max-width: 1024px) { .page-silver-pulser .kits__grid { grid-template-columns: 1fr; gap: 1.667em; /* tighten from 80px when stacked */ } /* Stacked cards have no cross-card band alignment to preserve -- drop the 35px banner compensation. */ .page-silver-pulser .kit-card:not(.kit-card--featured) .kit-card__top { padding-top: 1.111em; } } @media (max-width: 767px) { /* Stack the image above the intro inside each card on phones. align-items:stretch overrides the base center (which is for the desktop row's vertical centering); in the mobile column that center governs the horizontal axis and shrink-wraps + centers the intro, making cards with shorter text (the non-featured kit) look indented. Stretch makes the intro full content width so its left-aligned text lines up with the INCLUDES block below it, per the Figma mobile frame. */ .page-silver-pulser .kit-card__top { flex-direction: column; align-items: stretch; } .page-silver-pulser .kit-card__media { width: 100%; flex: none; } /* CTA goes full-width and is allowed to wrap on phones, matching the Figma mobile frame (the long featured-kit label wraps to two lines). The desktop fixed 393px (.kit-card__cta width) otherwise exceeds a phone's content width and is clipped by the card's overflow:hidden. */ .page-silver-pulser .kit-card__cta { width: 100%; white-space: normal; } } /* ----------------------------------------------------------- SECTION 7: EVERYTHING YOU NEED (Figma 7073:2048) Cream section. A tabbed card: 4 tabs (Benefits / Features / Cautions / Specifications). Each panel holds product groups (accent badge) of two-column benefit cards. Tabs driven by site-tabs.js. ----------------------------------------------------------- */ .page-silver-pulser .eyn__container { display: flex; flex-direction: column; gap: 2.778em; /* 50px */ } .page-silver-pulser .eyn__header { display: flex; flex-direction: column; gap: 0.556em; /* 10px -- standardized heading/subheading gap (feedback #7) */ text-align: center; } .page-silver-pulser .eyn__title { /* Figma 53.5 -> capped at the shared heading scale */ line-height: 1.3; } .page-silver-pulser .eyn__subhead { font-size: 1.222em; /* 22px -- constant; Figma mobile and desktop both 22px (shared --text-subheading bottoms out at 18px) */ font-weight: 700; line-height: 1.4; color: var(--color-dark); } /* Tabbed card shell */ .page-silver-pulser .eyn-tabs { display: flex; flex-direction: column; gap: 2.222em; /* 40px */ background: var(--color-white); border: 1px solid #e2e8e3; /* Figma "Gray Nurse" */ border-radius: 1.778em; /* 32px */ box-shadow: 0 4px 20px 0 rgba(26, 43, 28, 0.07); overflow: hidden; padding-bottom: 1.167em; /* 21px */ } /* Tab bar */ .page-silver-pulser .eyn-tabs__bar { display: flex; align-items: stretch; border-bottom: 0.8px solid #d4d4d4; } .page-silver-pulser .eyn-tabs__tab { flex: 1 1 0; min-width: 0; padding: 1em 1em 1.022em; /* 16px top / 18.4px bottom */ font-size: 1.111em; /* 20px */ font-weight: 700; line-height: 1.25; /* 25px */ text-align: center; color: var(--color-dark); background: transparent; border-bottom: 2.4px solid transparent; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; } .page-silver-pulser .eyn-tabs__tab:hover { background: var(--color-accent-a12); } /* Active tab: pale accent fill (accent @ 10%, per the shared Figma tabs component) + darker accent underline */ .page-silver-pulser .eyn-tabs__tab.is-active { background: var(--color-accent-a10); border-bottom-color: var(--color-accent-dark); } /* Panels */ .page-silver-pulser .eyn-tabs__panel { display: flex; flex-direction: column; gap: 2.222em; /* 40px between groups */ padding: 0 1.111em; /* 20px */ } .page-silver-pulser .eyn-tabs__panel[hidden] { display: none; } /* Product group */ .page-silver-pulser .eyn-group { display: flex; flex-direction: column; gap: 0.556em; /* 10px */ } .page-silver-pulser .eyn-group__heading { margin: 0; } .page-silver-pulser .eyn-group__badge { display: inline-flex; align-items: center; justify-content: center; background: var(--color-accent); color: var(--color-white); padding: 0.278em 1.111em; /* 5px 20px */ border-radius: var(--radius-panel); /* 20px */ font-size: 1em; /* 18px */ font-weight: 700; line-height: 1.389; /* 25px */ text-transform: uppercase; letter-spacing: 0.1em; } /* Two-column card grid inside a group */ .page-silver-pulser .eyn-group__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.556em; /* 10px */ align-items: stretch; } .page-silver-pulser .eyn-card { display: flex; flex-direction: column; gap: 0.556em; /* 10px */ padding: 1.378em; /* 24.8px */ border: 1px solid #d4d4d4; border-radius: 0.889em; /* 16px */ } .page-silver-pulser .eyn-card__title { font-size: 1.222em; /* 22px */ font-weight: 700; line-height: 1.364; /* 30px */ color: var(--color-dark); } .page-silver-pulser .eyn-card__body { font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.667; /* 30px */ color: var(--color-dark); } /* Full-width card variant (Features / Cautions / Specs use single-column cards rather than the Benefits two-up grid). */ .page-silver-pulser .eyn-card--wide { width: 100%; } /* Badge used as an in-card heading (distinct from the group badge that sits above a grid). Green by default; dark variant for neutral groups. */ .page-silver-pulser .eyn-card__badge { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; padding: 0.278em 1.111em; /* 5px 20px */ border-radius: var(--radius-panel); /* 20px */ font-size: 1em; /* 18px */ font-weight: 700; line-height: 1.389; /* 25px */ text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-white); } .page-silver-pulser .eyn-card__badge--accent { background: var(--color-accent); } .page-silver-pulser .eyn-card__badge--dark { background: var(--color-dark); } /* Bulleted list inside a card (Features, Cautions, Output Specs) */ .page-silver-pulser .eyn-card__list { list-style: disc; padding-left: 1.5em; display: flex; flex-direction: column; gap: 0.278em; } .page-silver-pulser .eyn-card__list li { font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.667; /* 30px */ color: var(--color-dark); } .page-silver-pulser .eyn-card__list strong { font-weight: 700; } /* "Important" callout (Cautions panel): pale accent fill, accent left rule */ .page-silver-pulser .eyn-important { display: flex; flex-direction: column; gap: 0.094em; /* ~1.7px */ background: var(--color-accent-a10); border-left: 4px solid var(--color-accent); border-radius: 0.889em; /* 16px */ padding: 1em 1.222em 1em 1.444em; /* 18px / 22px / 26px */ } .page-silver-pulser .eyn-important__title { font-size: 1.222em; /* 22px */ font-weight: 700; line-height: 1.591; /* 35px */ color: var(--color-dark); } .page-silver-pulser .eyn-important__body { font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.667; /* 30px */ color: var(--color-dark); } /* Mobile accordion (Section 7) -- full styling in the <=767 block below. On desktop the accordion heads are hidden and every body is shown; the tab bar + site-tabs.js drive panel visibility exactly as before (desktop unchanged). The bodies carry [hidden] for the mobile collapsed default, so this rule force-shows them on desktop. site-reveal.js sets no inline styles at rest, so a plain display override is sufficient. */ .page-silver-pulser .eyn-acc__head { display: none; } .page-silver-pulser .eyn-acc__body { display: flex; flex-direction: column; gap: 2.222em; /* 40px between groups -- the spacing the panel carried before */ } /* Section 7 responsive */ @media (max-width: 1024px) { .page-silver-pulser .eyn-group__grid { grid-template-columns: 1fr; /* stack benefit cards */ /* Stacked card lists match the 40px rhythm of the panels whose cards sit directly in the accordion body (Features/Cautions) -- the tight 10px grid gap is a DESKTOP spec (designer, July 2026). */ gap: 2.222em; /* 40px */ } } @media (max-width: 767px) { /* The 4 tabs become a vertical accordion on phones (Figma 7193:5727): hide the tab bar, show every panel as a stacked row, and let each head toggle its own body via site-reveal.js (independent open/close). The desktop tab interaction is untouched. */ .page-silver-pulser .eyn-tabs { gap: 0; padding-bottom: 0; border-radius: 1.111em; /* 20px -- Figma row corners; container clips the rounded top of the first head and bottom of the last row (overflow:hidden on .eyn-tabs) */ } .page-silver-pulser .eyn-tabs__bar { display: none; } /* Show all panels as accordion items (override site-tabs.js hiding the inactive panels) and drop the desktop panel padding/gap so the heads sit flush as full-width rows. */ .page-silver-pulser .eyn-tabs__panel, .page-silver-pulser .eyn-tabs__panel[hidden] { display: flex; padding: 0; gap: 0; } /* Accordion head row: label left, plus/minus right. Figma BAR padding 6/10/8.4 (pt/px/pb) + inner row py-5; folded together here since the label sits directly in the head. Values are em of the head's own 20px font-size. */ .page-silver-pulser .eyn-acc__head { display: flex; align-items: center; justify-content: space-between; gap: 1em; /* 20px */ width: 100%; padding: 0.55em 0.5em 0.67em; /* ~11px 10px 13.4px (of 20px) */ background: var(--color-accent-a10); border-bottom: 2.4px solid var(--color-accent-dark); font-size: 1.111em; /* 20px */ font-weight: 700; line-height: 1.25; /* 25px */ color: #3b3b3b; text-align: left; } /* CSS plus icon -> minus when expanded (keys off aria-expanded that site-reveal.js sets on the head). */ .page-silver-pulser .eyn-acc__icon { position: relative; flex-shrink: 0; width: 1.111em; /* 20px */ height: 1.111em; } .page-silver-pulser .eyn-acc__icon::before, .page-silver-pulser .eyn-acc__icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: #555555; } .page-silver-pulser .eyn-acc__icon::before { /* horizontal bar */ width: 0.722em; /* 13px */ height: 0.139em; /* 2.5px */ transform: translate(-50%, -50%); } .page-silver-pulser .eyn-acc__icon::after { /* vertical bar */ width: 0.139em; height: 0.722em; transform: translate(-50%, -50%); transition: opacity 0.2s; } .page-silver-pulser .eyn-acc__head[aria-expanded="true"] .eyn-acc__icon::after { opacity: 0; /* plus -> minus */ } /* Round the corner rows so their fill + accent border follow the card curve. First head = top corners; last head (collapsed) / last body (expanded) = bottom corners. Matches Figma: first BAR rounded-tl/tr-20, last BAR rounded-bl/br-20. 19px = container 20px minus its 1px gray border. */ .page-silver-pulser .eyn-tabs__panel:first-of-type .eyn-acc__head { border-top-left-radius: 1.056em; /* ~19px */ border-top-right-radius: 1.056em; } .page-silver-pulser .eyn-tabs__panel:last-of-type .eyn-acc__head[aria-expanded="false"] { border-bottom-left-radius: 1.056em; border-bottom-right-radius: 1.056em; } .page-silver-pulser .eyn-tabs__panel:last-of-type .eyn-acc__body { border-bottom-left-radius: 1.056em; border-bottom-right-radius: 1.056em; } /* Body: collapsed via [hidden] on phones (desktop base force-shows it). When open, content sits within the BAR's 10px side padding (Figma); vertical padding gives breathing room under the head. */ .page-silver-pulser .eyn-acc__body[hidden] { display: none; } .page-silver-pulser .eyn-acc__body { padding: 0.833em 0.556em 0.833em; /* 15px 10px (of 18px base) */ } /* The last panel's open body is the card's curved bottom; a little more bottom padding keeps its inner white cards off the rounded corner so the curve reads cleanly (the container's overflow:hidden does the clipping). */ .page-silver-pulser .eyn-tabs__panel:last-of-type .eyn-acc__body { padding-bottom: 1.111em; /* 20px */ } } /* ----------------------------------------------------------- SECTION 8: WHERE TO BEGIN (Figma 7073:2055) White section. Two columns: left = "Inside you'll find" checklist + download CTA; right = framed booklet preview that opens the video modal (image-to-video). Wraps to a single centered column on narrow screens. ----------------------------------------------------------- */ .page-silver-pulser .swpg__container { display: flex; flex-direction: column; gap: 2.778em; /* 50px */ } .page-silver-pulser .swpg__header { display: flex; flex-direction: column; gap: 0.556em; /* 10px -- standardized heading/subheading gap (feedback #7) */ text-align: center; } .page-silver-pulser .swpg__title { line-height: 1.3; } .page-silver-pulser .swpg__subhead { font-size: 1.222em; /* 22px -- constant; Figma mobile and desktop both 22px (shared --text-subheading bottoms out at 18px) */ font-weight: 700; line-height: 1.4; color: var(--color-dark); } /* Body: left column (497px) + right column (653px) from Figma, wrapping and centering when they don't fit. */ .page-silver-pulser .swpg__body { display: flex; flex-wrap: wrap; gap: 2.778em; /* 50px */ align-items: center; justify-content: center; } .page-silver-pulser .swpg__left { flex: 1 1 360px; max-width: 497px; display: flex; flex-direction: column; gap: 1.667em; /* 30px */ } .page-silver-pulser .swpg__list-block { display: flex; flex-direction: column; gap: 0.556em; /* 10px */ } .page-silver-pulser .swpg__list-title { font-size: 1.222em; /* 22px */ font-weight: 700; line-height: 1.591; /* 35px */ color: var(--color-dark); } /* Checklist rows: 20px text, 30px icon, 30px gap (overrides the base .check-list sizing for this section). */ .page-silver-pulser .swpg__list .check-list__item { gap: 1.667em; /* 30px */ } .page-silver-pulser .swpg__list .check-list__item span { font-size: 1.111em; /* 20px */ font-weight: 500; line-height: 1.75; /* 35px */ color: var(--color-dark); } .page-silver-pulser .swpg__cta { align-self: flex-start; } /* Right: framed booklet preview */ .page-silver-pulser .swpg__preview { flex: 1 1 360px; max-width: 653px; display: block; } /* Video preview rendering now handled by the shared .video-preview component (framed variant) in site-image-to-video.css. The frame, aspect-ratio and play size are set via instance vars on the . .swpg__preview keeps its flex/max-width layout above. */ /* Section 8 responsive */ @media (max-width: 1024px) { /* Single column. Flatten swpg__left (display:contents) so its children -- the list-block and the CTA -- join swpg__body's flow directly. That lets the booklet preview sit BETWEEN the bullets and the CTA, matching the Figma mobile order: list-title -> bullets -> booklet -> download CTA. */ .page-silver-pulser .swpg__container { gap: 1.667em; /* 30px header->body (Figma; desktop 50px) */ } .page-silver-pulser .swpg__body { flex-direction: column; align-items: stretch; gap: 1.111em; /* 20px base = the booklet->CTA gap; preview adds 10px on top so bullets->booklet reads 30px (Figma) */ } .page-silver-pulser .swpg__left { display: contents; } .page-silver-pulser .swpg__list-block { order: 1; } .page-silver-pulser .swpg__preview { order: 2; flex-basis: auto; max-width: 100%; margin-top: 0.556em; /* +10px on top of the 20px body gap -> 30px bullets->booklet (booklet->CTA stays the 20px gap) */ } .page-silver-pulser .swpg__cta { order: 3; align-self: center; } } @media (max-width: 767px) { /* Checklist tightens to the Figma mobile spec: 18px medium text, 20px check icon, 10px gap (desktop keeps 20px text / 30px icon / 30px gap). */ .page-silver-pulser .swpg__list .check-list__item { gap: 0.556em; /* 10px */ } .page-silver-pulser .swpg__list .check-list__item span { font-size: 1em; /* 18px */ line-height: 1.667; /* 30px */ } } /* ----------------------------------------------------------- SECTION 9: QUESTIONS (Figma 7073:2106) -- FAQ accordion White section. Two columns: portrait image (left) + accordion (right). Each row is a accent-tinted pill; expand/collapse is handled by site-reveal.js, answer HTML is fetched by site-faqs.js from /faqs/sp_*.html. ----------------------------------------------------------- */ .page-silver-pulser .faq__container { display: flex; flex-direction: column; gap: 2.778em; /* 50px */ } .page-silver-pulser .faq__header { display: flex; flex-direction: column; gap: 0.556em; /* 10px -- standardized heading/subheading gap (feedback #7) */ text-align: center; } .page-silver-pulser .faq__title { line-height: 1.3; } .page-silver-pulser .faq__subhead { font-size: 1.222em; /* 22px -- constant; Figma mobile and desktop both 22px (shared --text-subheading bottoms out at 18px) */ font-weight: 700; line-height: 1.4; color: var(--color-dark); } /* Body: image (left) + accordion (right) */ .page-silver-pulser .faq__body { display: flex; gap: 2.778em; /* 50px */ /* flex-start (NOT stretch) -- per Figma the image is 483px tall while the accordion column is 635px, so the image is intentionally shorter and aligns to the top. stretch would distort the image's aspect ratio by forcing it to fill the column. */ align-items: flex-start; } .page-silver-pulser .faq__media { flex: 0 0 357px; /* Figma container is 357 x 483 (aspect 357:483 ~= 0.74). Holding that ratio keeps the image at its intended height (shorter than the accordion column beside it) without forcing it via height in px, so it scales proportionally if the column shrinks. */ aspect-ratio: 357 / 483; border-radius: var(--radius-panel); /* 20px */ overflow: hidden; /* Stay visible while the accordion is opened and scrolled: the media is shorter than the list, so pinning it near the top keeps it on screen as you page through. align-self releases it so sticky can engage. */ align-self: flex-start; position: sticky; top: 120px; } .page-silver-pulser .faq__media img { width: 100%; height: 100%; object-fit: cover; /* The subject in the source photo sits slightly right-of-center; pull the crop window leftward so she lands centered in the tall narrow column. Tune the X% if the photo gets re-shot. */ object-position: 25% center; } .page-silver-pulser .faq__list { flex: 1 1 0; min-width: 350px; display: flex; flex-direction: column; gap: 1.111em; /* 20px */ } /* FAQ row */ .page-silver-pulser .faq__item { border-radius: 1.778em; /* 32px */ box-shadow: 0 4px 20px 0 rgba(26, 43, 28, 0.07); overflow: hidden; } .page-silver-pulser .faq__item--tint-30 { background: var(--color-accent-a30); } .page-silver-pulser .faq__item--tint-20 { background: var(--color-accent-a20); } /* Trigger (the always-visible question bar) */ .page-silver-pulser .faq__trigger { display: flex; align-items: center; justify-content: space-between; gap: 1.111em; width: 100%; min-height: 3.056em; /* 55px */ padding: 0.556em 1.111em; /* 10px 20px */ background: transparent; cursor: pointer; text-align: left; } .page-silver-pulser .faq__question { flex: 1; font-size: 1.111em; /* 20px */ font-weight: 700; line-height: 1.75; /* 35px */ color: var(--color-dark); } /* Plus icon that rotates to a minus when expanded (drawn in CSS) */ .page-silver-pulser .faq__icon { position: relative; flex-shrink: 0; width: 1.667em; /* 30px */ height: 1.667em; } .page-silver-pulser .faq__icon::before, .page-silver-pulser .faq__icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--color-accent-dark); border-radius: 1px; transition: transform 0.2s; } .page-silver-pulser .faq__icon::before { width: 0.889em; /* 16px horizontal bar */ height: 0.139em; /* ~2.5px */ transform: translate(-50%, -50%); } .page-silver-pulser .faq__icon::after { width: 0.139em; height: 0.889em; /* vertical bar -> makes a plus */ transform: translate(-50%, -50%); } /* When expanded: hide the vertical bar so a plus becomes a minus */ .page-silver-pulser .faq__trigger[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); } /* Answer panel (HTML injected by site-faqs.js) */ .page-silver-pulser .faq__answer { padding: 0 1.111em 1.111em; /* 20px sides + bottom; flush under question */ font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.667; /* 30px */ color: var(--color-dark); } .page-silver-pulser .faq__answer[hidden] { display: none; } .page-silver-pulser .faq__answer p { margin-bottom: 0.667em; } .page-silver-pulser .faq__answer p:last-child { margin-bottom: 0; } /* Loading / error states set by site-faqs.js */ .page-silver-pulser .faq__answer.is-loading { opacity: 0.6; } .page-silver-pulser .faq__answer.is-error { color: #b00020; } .page-silver-pulser .faq__cta-wrap { margin-top: 0.556em; } /* Section 9 responsive */ @media (max-width: 1024px) { .page-silver-pulser .faq__container { gap: 1.667em; /* 30px header->body (Figma; desktop 50px) */ } .page-silver-pulser .faq__body { flex-direction: column; gap: 1.667em; /* 30px image->accordion (Figma; desktop 50px) */ } .page-silver-pulser .faq__media { flex: none; width: 100%; /* Mobile crops the portrait to a short landscape band (Figma 357x196, ~1.82:1) rather than the desktop tall portrait (357/483). */ aspect-ratio: 357 / 196; /* Stacked full-width on mobile -- no sticky. */ position: static; } .page-silver-pulser .faq__list { width: 100%; min-width: 0; } } @media (max-width: 767px) { /* FAQ rows tighten to the Figma mobile spec: 10px gap between rows, 5px vertical row padding, question line-height 30px (desktop keeps 20px gap / 10px padding / 35px line-height). */ .page-silver-pulser .faq__list { gap: 0.556em; /* 10px */ } .page-silver-pulser .faq__trigger { padding: 0.278em 1.111em; /* 5px 20px */ } .page-silver-pulser .faq__question { line-height: 1.5; /* 30px at 20px */ } } /* =========================================================== WAVE DIVIDERS BETWEEN SECTIONS ----------------------------------------------------------- Decorative full-bleed PNG waves that transition one section's background colour into the next. Each
sits in normal flow between two sections. 7073:1713 --blue white -> light-blue (1 -> 2) divider_wave_blue 1640x218 7073:1736 --curved-blue light-blue -> white (2 -> 3) divider_curved_blue 1640x51 7073:2047 --green (6 -> 7) divider_wave_green_beige_bottom 1640x81 7073:2054 --beige (7 -> 8) divider_wave_beige 1640x70 7073:2103 thin line divider (8 -> 9) -- see .section-divider-line Each wave holds its own Figma aspect ratio (width:height) so it stays full-bleed and proportional at any viewport width; at the 1640 design width each resolves to its Figma pixel height. These are shared dividers reusable across pages, so the PNGs live in images/elements/ (downloaded by download-images.ps1). =========================================================== */ .page-silver-pulser .section-wave { width: 100%; /* Default ratio (the --blue wave, 1640x218). Each other wave sets its own ratio below to match its Figma dimensions. Holding the ratio keeps the wave full-bleed and proportional at any width; at the 1640 design width the heights resolve to their Figma px (e.g. --curved-blue -> 51px). */ aspect-ratio: 1640 / 218; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; /* Seam fix, section-level (per COMPONENTS.md): fractional element heights can leave a sub-pixel gap between the wave's bottom edge and the next section, showing the white body background as a thin line above that section's heading (designer feedback #5). Pull the next section 1px up UNDER the wave: its solid fill is the same colour as the wave artwork's bottom row, so the overlap is invisible. The wave itself stays background-transparent (designer, July 2026). */ margin: 0 0 -1px; /* the -1px is the seam fix above -- keep it in the shorthand */ pointer-events: none; } .page-silver-pulser .section-wave--blue { background-image: url('../images/elements/divider_wave_blue.png'); /* 1640 x 218 -- uses the default ratio above. */ } .page-silver-pulser .section-wave--curved-blue { aspect-ratio: 1640 / 51; /* Figma: 1640 x 51 -- flat curve */ background-image: url('../images/elements/divider_curved_blue.png'); } .page-silver-pulser .section-wave--green { aspect-ratio: 1640 / 81; /* Figma: 1640 x 81 */ background-image: url('../images/elements/divider_wave_green_beige_bottom.png'); /* baked beige bottom -- section below is --cream (#f8f4f2); use the _white_bottom variant only above white sections */ } .page-silver-pulser .section-wave--beige { aspect-ratio: 1640 / 70; /* Figma: 1640 x 70 */ background-image: url('../images/elements/divider_wave_beige.png'); } /* Thin horizontal line divider (node 7073:2103), between Section 8 and Section 9. Not a wave -- a hairline rule with horizontal padding matching the Figma (50px inset each side). */ .page-silver-pulser .section-divider-line { width: 100%; padding: 0 2.778em; /* 50px inset each side */ } .page-silver-pulser .section-divider-line hr { border: 0; border-top: 1px solid #cdcdcd; margin: 0; } /* =========================================================== MEDIA QUERIES -- STRUCTURAL ONLY ----------------------------------------------------------- Most responsiveness lives in clamp() above. Add a query only when CSS Grid / Flexbox can't handle a structural shift cleanly (e.g., 2-col -> 1-col stacking). Standard tiers: <= 1024px tablet -- collapse 2-col to 1-col <= 767px phone -- button width, font tweaks =========================================================== */ /* Tablet */ @media (max-width: 1024px) { .page-silver-pulser .two-col { grid-template-columns: 1fr; } /* Reverse variants flip back to natural DOM order on mobile. */ .page-silver-pulser .two-col--reverse .two-col__text { order: 0; } .page-silver-pulser .two-col--reverse .two-col__media { order: 1; } } /* Phone */ @media (max-width: 767px) { .page-silver-pulser .btn { white-space: normal; text-align: center; } } /* =========================================================== PAGE-BOTTOM WAVE. The wrapper (.page-wave: full-bleed margins, margin-bottom:-1px to tuck against the footer, line-height:0, pointer-events:none) is owned by the shared css/site-footer.css, since every page ends with this image. We only add what site-footer.css is missing: the img must be width:100% or it falls back to its intrinsic width and the wave looks "not full bleed". A little air above the wave, page-specific. =========================================================== */ .page-silver-pulser .page-wave { margin-top: var(--space-section-y); } .page-silver-pulser .page-wave__img { display: block; width: 100%; height: auto; } /* The wave is the last child of the final section, so remove that section's bottom padding -- otherwise ~80px of white sits between the wave and the footer (site-footer.css only overlaps 1px). */ .page-silver-pulser .section-questions { padding-bottom: 0; }