/* =========================================================== page-water-ozonator.css ----------------------------------------------------------- Page wrapper: .page-water-ozonator Loaded by the CMS via getVersionedFile('css/page-water-ozonator.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-water-ozonator. 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-water-ozonator 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 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) kits 5. Kits eyn 6. Everything you need (tabs -> accordion) begin 7. Where to begin (booklet) faq 8. Questions (FAQ accordion) page-wave Page-bottom wave into the footer =========================================================== */ /* -- TOKENS ---------------------------------------------- */ .page-water-ozonator { /* 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 */ --radius-panel: 20px; /* px not em: feeds corner-arc matching math; em resolves per-element (bug found Aug 2026) */ --radius-hero: clamp(10px, 2.5vw, 30px); /* TBD */ /* Brand colours -- product-named convention. This page is Water Ozonator, so --color-water-ozonator (blue) is the page accent. The other product colours remain available for cross-product links and shared utilities. */ --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-magnetic-pulser-tint: #cae4e6; --color-water-ozonator-tint: #bbddf0; --color-water-ozonator-dark: #3f799a; /* darker blue for eyebrow/accent text (from Everything-you-need active tab border) */ --color-bio-tuner-tint: #d5d1e6; /* Generic accent alias (template convention -- see page-products.css and PROJECT.md "Neutral class convention"): on this page the accent IS the Water Ozonator blue. Structural helpers and the derived alpha tints below reference the alias so all product pages share one vocabulary. */ --color-accent: var(--color-water-ozonator); --color-accent-dark: var(--color-water-ozonator-dark); --color-accent-tint: var(--color-water-ozonator-tint); --color-tariff: #c98a2b; /* amber -- USA tariff surcharge line in the buy panel */ --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); /* Neutrals */ --color-dark: #3b3b3b; /* body text -- confirmed from Section 1 Figma */ --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) */ /* 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-water-ozonator *, .page-water-ozonator *::before, .page-water-ozonator *::after { box-sizing: border-box; margin: 0; } .page-water-ozonator a { text-decoration: none; color: inherit; } .page-water-ozonator ul { list-style: none; padding: 0; } .page-water-ozonator img { display: block; max-width: 100%; height: auto; } .page-water-ozonator 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-water-ozonator 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-water-ozonator .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-water-ozonator a:focus-visible, .page-water-ozonator button:focus-visible, .page-water-ozonator input:focus-visible, .page-water-ozonator [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-water-ozonator .section { padding: var(--space-section-y) 0; width: 100%; } .page-water-ozonator .container { width: 100%; /* Gutters sit OUTSIDE the content column (designer, Aug 2026): a true 1200px column at desktop; padding only bites below 1200 + gutters. */ max-width: calc(1200px + 2 * var(--space-container)); margin: 0 auto; padding: 0 var(--space-container); } /* Section background variants */ .page-water-ozonator .section--white { background: var(--color-white); } .page-water-ozonator .section--cream { background: var(--color-cream-bg); } .page-water-ozonator .section--light { background: var(--color-light-blue); } .page-water-ozonator .section--accent-tint { background: var(--color-accent-tint); } .page-water-ozonator .section--accent { background: var(--color-accent); color: var(--color-white); } .page-water-ozonator .section--teal { background: var(--color-magnetic-pulser); color: var(--color-white); } .page-water-ozonator .section--purple { background: var(--color-bio-tuner); color: var(--color-white); } /* -- COLOUR UTILITIES ------------------------------------ */ .page-water-ozonator .text-accent { color: var(--color-accent); } .page-water-ozonator .text-ink { color: var(--color-dark); } .page-water-ozonator .text-teal { color: var(--color-magnetic-pulser); } .page-water-ozonator .text-purple { color: var(--color-bio-tuner); } .page-water-ozonator .text-white { color: var(--color-white); } .page-water-ozonator .text-dark { color: var(--color-dark); } .page-water-ozonator .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-water-ozonator .brand-sub { font-size: 0.7em; line-height: 0; vertical-align: -0.15em; } /* -- TYPOGRAPHY UTILITIES -------------------------------- */ .page-water-ozonator .section-title { font-size: var(--text-heading); font-weight: 900; line-height: 1.2; text-align: center; margin-bottom: var(--space-gap-lg); } .page-water-ozonator .text-subheading { font-size: var(--text-subheading); font-weight: 700; line-height: 1.5; } .page-water-ozonator .text-subtitle { font-size: var(--text-subtitle); font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: 0.05em; } .page-water-ozonator .text-body { font-size: var(--text-body); font-weight: 500; line-height: 1.6; } .page-water-ozonator .text-small-italic { font-size: var(--text-small); font-style: italic; font-weight: 500; line-height: 1.5; } .page-water-ozonator .text-card-title { font-size: var(--text-card-title); font-weight: 700; line-height: 1.3; } /* -- BUTTONS --------------------------------------------- */ .page-water-ozonator .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-water-ozonator .btn--accent { background: var(--color-accent); color: var(--color-white); } .page-water-ozonator .btn--accent:hover { background: var(--color-btn-hover); } .page-water-ozonator .btn--blue { background: var(--color-water-ozonator); color: var(--color-white); } .page-water-ozonator .btn--blue:hover { background: var(--color-btn-hover); } .page-water-ozonator .btn--teal { background: var(--color-magnetic-pulser); color: var(--color-white); } .page-water-ozonator .btn--purple { background: var(--color-bio-tuner); color: var(--color-white); } .page-water-ozonator .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-water-ozonator .btn--pill { border-radius: var(--radius-pill); } .page-water-ozonator .btn-center { display: flex; justify-content: center; margin-top: var(--space-gap-lg); } /* -- TWO-COLUMN LAYOUT ----------------------------------- */ .page-water-ozonator .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-gap-lg); align-items: start; } .page-water-ozonator .two-col--reverse .two-col__text { order: 1; } .page-water-ozonator .two-col--reverse .two-col__media { order: 0; } .page-water-ozonator .two-col--align-center { align-items: center; } .page-water-ozonator .two-col__text { display: flex; flex-direction: column; gap: var(--space-gap-md); min-width: 0; } .page-water-ozonator .two-col__media { display: flex; align-items: stretch; min-width: 0; } .page-water-ozonator .two-col__media img { width: 100%; } .page-water-ozonator .rounded-img { border-radius: var(--radius-card); object-fit: cover; width: 100%; height: 100%; } /* -- FEATURE LIST (checkmark or disc bullets) ------------ */ .page-water-ozonator .feature-list { list-style: disc; padding-left: 1.5em; display: flex; flex-direction: column; gap: 0.25em; } .page-water-ozonator .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-water-ozonator .check-list { display: flex; flex-direction: column; gap: var(--space-gap-md); } .page-water-ozonator .check-list__item { display: flex; align-items: flex-start; gap: 0.75em; } .page-water-ozonator .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-water-ozonator .video-thumb { position: relative; display: block; } .page-water-ozonator .video-thumb__img { border-radius: var(--radius-card); object-fit: cover; width: 100%; aspect-ratio: 16/9; } .page-water-ozonator .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-water-ozonator .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-water-ozonator .section-model { padding: clamp(20px, 1.25vw + 15px, 30px) 0 var(--space-section-y); /* 20/30 -> 80px */ background: var(--color-white); } .page-water-ozonator .model__container { display: flex; flex-direction: column; gap: var(--space-gap-md); } /* Breadcrumb / filter strip */ .page-water-ozonator .model__breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0; } .page-water-ozonator .model__breadcrumb-link, .page-water-ozonator .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; } .page-water-ozonator .model__breadcrumb-link { cursor: pointer; transition: background-color 0.15s; } .page-water-ozonator .model__breadcrumb-link:hover { text-decoration: underline; } .page-water-ozonator .model__breadcrumb-sep { font-size: 1.222em; /* 22px */ font-weight: 400; color: var(--color-dark); line-height: 1; padding: 0 0.111em; } .page-water-ozonator .model__breadcrumb-current { font-weight: 400; } /* Product row: gallery + buy panel side-by-side at desktop */ .page-water-ozonator .model__product { display: grid; grid-template-columns: 591px 1fr; gap: 1.111em; /* 20px between columns */ align-items: start; } /* =============== GALLERY (left column) =============== */ .page-water-ozonator .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-water-ozonator .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-water-ozonator .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-water-ozonator .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-water-ozonator .model__gallery-thumbs-arrow:hover { transform: scale(1.1); } /* CSS-only chevron: a small rotated square with two visible borders. */ .page-water-ozonator .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-water-ozonator .model__gallery-thumbs-arrow--up .model__gallery-thumbs-chevron { transform: rotate(-45deg); /* points up */ margin-top: 0.222em; /* visually centre the rotated shape */ } .page-water-ozonator .model__gallery-thumbs-arrow--down .model__gallery-thumbs-chevron { transform: rotate(135deg); /* points down */ margin-bottom: 0.222em; } .page-water-ozonator .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-water-ozonator .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-water-ozonator .model__gallery-thumb:hover { transform: scale(1.05); } /* Note: no active-state highlight per Figma. JS still toggles .is-active for state tracking; if a visual indicator is wanted later, style here. */ /* Main stage */ .page-water-ozonator .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-water-ozonator .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 (water-ozonator blue). No image asset. */ background: var(--color-water-ozonator, #4792bc); border: 0; border-radius: 50%; cursor: pointer; opacity: 1; transition: opacity 0.15s, transform 0.15s; } .page-water-ozonator .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-water-ozonator .model__gallery-arrow--next::before { transform: translateX(-2px) rotate(225deg); /* mirrored -> points RIGHT */ } .page-water-ozonator .model__gallery-arrow:hover { transform: scale(1.1); } .page-water-ozonator .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-water-ozonator .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-water-ozonator .model__gallery-slide { display: none; width: 100%; height: 100%; } .page-water-ozonator .model__gallery-slide.is-active { display: block; } .page-water-ozonator .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-water-ozonator .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-water-ozonator .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-water-ozonator .model__gallery-mobile-dot.is-active { background: var(--color-water-ozonator); } /* Expand button -- floating circular bottom-right */ .page-water-ozonator .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-water-ozonator .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-water-ozonator .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-water-ozonator reliably across browsers, and em units below depend on that anchor. */ .page-water-ozonator .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-water-ozonator .model__gallery-modal::backdrop { background: rgba(0, 0, 0, 0.88); } .page-water-ozonator .model__gallery-modal-inner { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .page-water-ozonator .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-water-ozonator .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-water-ozonator .model__gallery-modal-arrow--prev { left: 1.111em; } /* 20px */ .page-water-ozonator .model__gallery-modal-arrow--next { right: 1.111em; } .page-water-ozonator .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-water-ozonator .model__gallery-modal-arrow--next::before { transform: translateX(-2px) rotate(225deg); /* mirrored -> points RIGHT */ } .page-water-ozonator .model__gallery-modal-arrow:hover { transform: translateY(-50%) scale(1.1); } .page-water-ozonator .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-water-ozonator .model__gallery-modal-close:hover { background: rgba(255, 255, 255, 0.3); } /* =============== BUY PANEL (right column) =============== */ .page-water-ozonator .model__buy { position: sticky; top: 1em; display: flex; flex-direction: column; gap: 0.611em; /* 11px between rows -- from Figma */ } /* Heading block */ .page-water-ozonator .model__heading { display: flex; flex-direction: column; } .page-water-ozonator .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-water-ozonator .model__model { font-size: 1.222em; /* 22px */ font-weight: 700; line-height: 2.045; /* 45px / 22px (B) */ color: var(--color-dark); margin: 0; } .page-water-ozonator .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-water-ozonator .model__stars { color: var(--color-water-ozonator); letter-spacing: 0.05em; font-weight: 700; } .page-water-ozonator .model__rating-link { font-weight: 400; transition: color 0.15s; } .page-water-ozonator .model__rating:hover .model__rating-link { color: var(--color-water-ozonator); } /* Description card (replaces SP two-functions block). Figma 11579:4513/4514: single card, 30% brand-blue fill, 20px radius, 20px padding, soft shadow. Eyebrow uppercase brand-blue; body dark. */ .page-water-ozonator .model__description { display: flex; flex-direction: column; padding-bottom: 1.111em; /* 20px */ } .page-water-ozonator .model__desc-card { display: flex; flex-direction: column; gap: 0.556em; /* 10px */ padding: 1.111em; /* 20px */ border-radius: var(--radius-panel); /* 20px */ background: var(--color-accent-a30); box-shadow: 0 4px 20px 0 rgba(26, 43, 28, 0.07); } .page-water-ozonator .model__desc-eyebrow { font-size: 1em; /* 18px */ font-weight: 700; line-height: 1.389; /* 25px / 18px */ text-transform: uppercase; letter-spacing: 0.1em; /* ~1.8px */ color: var(--color-dark); margin: 0; } .page-water-ozonator .model__desc-body { font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.667; /* 30px / 18px */ color: var(--color-dark); margin: 0; } /* Plug-type selector (Figma 11579:4540). Required in-panel selection that replaces the o=1 wall-adapter dialog. Four bordered pills; selected pill fills brand-blue. Red prompt shows when the user tries to add with none chosen (site-cart.js toggles [hidden] on [data-plug-msg]). */ .page-water-ozonator .model__plug { display: flex; flex-direction: column; gap: 0.556em; /* 10px */ padding: 0.556em 0; /* 10px vertical, per Figma py-[10px] */ border: 0; margin: 0; min-width: 0; flex: 0 0 100%; /* own row within the flex-wrap purchase form (above qty/ATC) */ } .page-water-ozonator .model__plug-label { font-size: 1em; /* 18px */ font-weight: 700; line-height: 1.333; /* 24px / 18px */ color: var(--color-dark); padding: 0; } .page-water-ozonator .model__plug-prompt { display: flex; align-items: center; gap: 0.556em; /* 10px between icon and text (Figma 11579:5217) */ font-size: 0.833em; /* 15px */ font-weight: 400; line-height: 1.333; /* 20px / 15px */ color: #c00; /* Figma validation red */ margin: 0; } .page-water-ozonator .model__plug-prompt[hidden] { display: none; } .page-water-ozonator .model__plug-prompt-icon { width: 1em; /* 15px at the 15px prompt size */ height: 1em; flex-shrink: 0; color: #c00; /* drives currentColor in the sprite symbol (ico-exclamation-in-circle) */ } .page-water-ozonator .model__plug-options { display: flex; flex-wrap: wrap; gap: 0.556em; /* 10px */ } .page-water-ozonator .model__plug-option { padding: 0.278em 1.111em; /* 5px 20px */ border: 1px solid var(--color-dark); border-radius: 0.556em; /* 10px */ background: var(--color-white); font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.5; /* 27px / 18px */ letter-spacing: 0.1em; /* ~1.8px */ text-transform: uppercase; color: var(--color-dark); transition: background-color 0.15s, color 0.15s, border-color 0.15s; } .page-water-ozonator .model__plug-option:hover { border-color: var(--color-water-ozonator); color: var(--color-water-ozonator); } .page-water-ozonator .model__plug-option[aria-pressed="true"] { background: var(--color-water-ozonator); border-color: var(--color-water-ozonator); color: var(--color-white); } /* Price */ .page-water-ozonator .model__price { display: flex; align-items: baseline; gap: 0.222em; /* 4px */ margin: 0; } .page-water-ozonator .model__price-amount { font-size: 1.389em; /* 25px */ font-weight: 900; line-height: 1.4; /* 35px / 25px (B) */ color: var(--color-water-ozonator); } .page-water-ozonator .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-water-ozonator .model__finance { display: flex; flex-direction: column; gap: 0.833em; /* 15px */ } .page-water-ozonator .model__shipping { font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.667; /* 30px / 18px (C) */ color: var(--color-dark); margin: 0; } .page-water-ozonator .model__bnpl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.556em; /* 10px */ margin: 0; } .page-water-ozonator .model__bnpl-label { font-size: 1em; font-weight: 700; line-height: 1.333; /* 24px / 18px (C) */ color: var(--color-dark); } .page-water-ozonator .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-water-ozonator .model__bnpl-link:hover { color: var(--color-water-ozonator); border-bottom-color: var(--color-water-ozonator); } /* Trust badges */ .page-water-ozonator .model__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 1.667em; /* 30px */ padding: 0.556em 0; list-style: none; margin: 0; } .page-water-ozonator .model__trust-item { display: inline-flex; align-items: center; gap: 0.556em; /* 10px */ } .page-water-ozonator .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-water-ozonator .model__trust-text { font-size: 1.111em; /* 20px */ font-weight: 700; line-height: 1.75; /* 35px / 20px (B) */ color: var(--color-water-ozonator); } .page-water-ozonator .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-water-ozonator .model__trust-info:hover { opacity: 1; } .page-water-ozonator .model__trust-info img { width: 100%; height: 100%; } .page-water-ozonator .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 ONLY toggles [hidden] + .is-open; positioning is entirely CSS-owned (see the phone-tier anchor override in the <=767 block). The trust item is the positioning context. */ .page-water-ozonator .model__trust-item { position: relative; } .page-water-ozonator .model__trust-tip { position: absolute; top: calc(100% + 0.556em); /* 10px below the row */ left: 50%; transform: translateX(-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); /* fade/scale in */ opacity: 0; transform: translateX(-50%) translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease; } .page-water-ozonator .model__trust-tip[hidden] { display: none; } .page-water-ozonator .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-water-ozonator .model__tariff-wrap { position: relative; } /* surcharge tooltip anchor, mirrors .model__trust-item */ .page-water-ozonator .model__trust-tip ul { margin: 0.278em 0 0; /* 5px */ padding-left: 1.111em; /* 20px */ list-style: disc; } .page-water-ozonator .model__trust-tip li { margin-top: 0.278em; } .page-water-ozonator .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-water-ozonator .model__trust-tip.is-open { opacity: 1; transform: translateX(-50%) translateY(0); } .page-water-ozonator .model__trust-tip-link { color: var(--color-water-ozonator); text-decoration: underline; text-underline-offset: 2px; } .page-water-ozonator .model__trust-tip-link:hover { color: var(--color-water-ozonator-dark); } @media (prefers-reduced-motion: reduce) { .page-water-ozonator .model__trust-tip { transition: none; } } /* Add-to-cart form -- legacy table wrapper neutralized */ .page-water-ozonator .model__purchase-table, .page-water-ozonator .model__purchase-table > tbody, .page-water-ozonator .model__purchase-table > tbody > tr, .page-water-ozonator .model__purchase-table > tbody > tr > td { display: block; width: 100%; border: 0; padding: 0; margin: 0; border-collapse: collapse; } .page-water-ozonator .model__purchase { display: flex; flex-wrap: wrap; align-items: center; gap: 0.556em; /* 10px */ padding: 0.556em 0; margin: 0; } .page-water-ozonator .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-water-ozonator .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-water-ozonator .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-water-ozonator .model__qty-input::-webkit-outer-spin-button, .page-water-ozonator .model__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .page-water-ozonator .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-water-ozonator.js on click and removed after a short delay. */ .page-water-ozonator .model__add-to-cart.is-added, .page-water-ozonator .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-water-ozonator .model__cart-icon--added, .page-water-ozonator .model__atc-label--added { display: none; } .page-water-ozonator .model__add-to-cart.is-added .model__cart-icon--default, .page-water-ozonator .model__add-to-cart.is-added .model__atc-label--default { display: none; } .page-water-ozonator .model__add-to-cart.is-added .model__cart-icon--added, .page-water-ozonator .model__add-to-cart.is-added .model__atc-label--added { display: inline-flex; } .page-water-ozonator .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-water-ozonator .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-water-ozonator .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-water-ozonator .model__reveals { display: flex; flex-direction: column; border: 1px solid #cdcdcd; border-radius: var(--radius-panel); /* 20px */ overflow: hidden; } .page-water-ozonator .model__reveal + .model__reveal { border-top: 1px solid #cdcdcd; } .page-water-ozonator .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-water-ozonator .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-water-ozonator .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-water-ozonator .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-water-ozonator .model__reveal-trigger:hover { background: rgba(71, 146, 188, 0.12); /* 12% #4792bc, per designer */ } .page-water-ozonator .model__reveal-trigger:hover .model__reveal-icon { background: rgba(71, 146, 188, 0.20); } /* Expanded state (aria-expanded set by site-reveal.js) */ .page-water-ozonator .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-water-ozonator .model__reveal-trigger[aria-expanded="true"] .model__reveal-icon img { filter: brightness(0) invert(1); } /* Sprite chevron (currentColor): recolor via color, not filter. */ .page-water-ozonator .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-water-ozonator .model__reveal-trigger[aria-expanded="true"] .model__reveal-icon svg { color: #fff; } /* Reveal body (shown/hidden by site-reveal.js) */ .page-water-ozonator .model__reveal-body { padding: 0 1.111em 1.111em; display: flex; flex-direction: column; gap: 0.556em; /* 10px */ } .page-water-ozonator .model__reveal-body[hidden] { display: none; } .page-water-ozonator .model__reveal-intro { font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.667; /* 30px */ color: var(--color-dark); } .page-water-ozonator .model__reveal-note { font-size: 0.833em; /* 15px */ font-weight: 400; line-height: 1.6; /* 24px */ color: var(--color-dark); } .page-water-ozonator .model__reveal-list { list-style: disc; padding-left: 1.5em; display: flex; flex-direction: column; } .page-water-ozonator .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-water-ozonator .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-water-ozonator .accessory-card__media { flex-shrink: 0; width: 5.556em; /* 100px */ height: 5.556em; border-radius: 0.222em; /* 4px */ overflow: hidden; } .page-water-ozonator .accessory-card__media img { width: 100%; height: 100%; object-fit: cover; } .page-water-ozonator .accessory-card__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.556em; /* 10px */ } .page-water-ozonator .accessory-card__name { font-size: 1.111em; /* 20px */ font-weight: 700; line-height: 1.5; /* 30px */ color: var(--color-dark); } .page-water-ozonator .accessory-card__price { font-size: 1.111em; /* 20px */ font-weight: 400; line-height: 1.15; /* 23px */ color: var(--color-dark); } .page-water-ozonator .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-water-ozonator .accessory-card__buy { display: contents; } .page-water-ozonator .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-water-ozonator .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-water-ozonator .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-water-ozonator .accessory-card__info { display: contents; } .page-water-ozonator .accessory-card__media { grid-area: media; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--radius-card); } .page-water-ozonator .accessory-card__name { grid-area: name; } .page-water-ozonator .accessory-card__price { grid-area: price; } .page-water-ozonator .accessory-card__desc { grid-area: desc; } .page-water-ozonator .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-water-ozonator .model__product { grid-template-columns: 1fr; gap: 1.667em; /* 30px between stacked sections */ } .page-water-ozonator .model__gallery { position: static; grid-template-columns: 1fr; /* drop thumb rail; show only mobile dots */ } .page-water-ozonator .model__gallery-thumbs { display: none; /* mobile uses dot indicator instead */ } .page-water-ozonator .model__buy { position: static; } } @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-specific tweaks for the buy panel. Line-heights are unitless in the base rules, so there are no per-breakpoint line-height overrides. */ @media (max-width: 767px) { .page-water-ozonator .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-water-ozonator .section-description { padding-top: 0; } .page-water-ozonator .desc__container { display: flex; flex-direction: column; gap: 1.667em; /* 30px between header and body */ } .page-water-ozonator .desc__header { display: flex; flex-direction: column; gap: 0.556em; /* 10px */ text-align: center; } .page-water-ozonator .desc__title { line-height: 1.2; /* 60px @50 desktop */ /* two-tone via .text-ink (dark) + .text-accent (brand blue) */ } .page-water-ozonator .desc__subhead { font-size: 1.222em; /* 22px -- constant; Figma mobile and desktop both 22px */ font-weight: 700; line-height: 1.364; /* 30px / 22px */ color: var(--color-dark); } /* Body: two-column (text left, image right) via the shared .two-col utility (stacks at 1024). Only the text/image specifics live here. Per Figma 11579:4581 the body is a WHITE CARD sitting on the light-blue section: white fill, 30px radius, 40px padding, 20px gap between the text column and the image (not the shared 40px --space-gap-lg). This also brings WOZ in line with the Silver Pulser card treatment (feedback #6, and mobile #5 "design should match SP page"). */ .page-water-ozonator .desc__body { background: var(--color-white); border-radius: 1.667em; /* 30px */ padding: clamp(30px, 1.25vw + 25px, 40px); /* 30 -> 40px, fluid 400->1200 -- same convention as the SP desc__card */ gap: 1.111em; /* 20px row gap (overrides --space-gap-lg from .two-col) */ } .page-water-ozonator .desc__body-title { font-size: clamp(20px, 1.875vw + 12.5px, 35px); /* 20 -> 35px, fluid 400->1200 -- matches SP .desc__card-title (designer, July 2026) */ font-weight: 700; line-height: 1.3; /* matches SP */ color: var(--color-dark); margin: 0; /* spacing comes from the column gap only (designer, July 2026) */ } .page-water-ozonator .desc__body-text { font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.667; /* 30px */ color: var(--color-dark); margin: 0; /* spacing comes from the column gap only (designer, July 2026) */ } .page-water-ozonator .desc__body .two-col__media { border-radius: var(--radius-panel); /* 20px */ overflow: hidden; } .page-water-ozonator .desc__body .two-col__media img { width: 100%; aspect-ratio: 684 / 397; /* Figma image ratio */ object-fit: cover; } /* Stacked (<=1024, where .two-col collapses to one column): the IMAGE sits ABOVE the title -- image, title, text, link -- matching the SP card order (designer revision, July 2026; supersedes the earlier title-first order). The text wrapper becomes display:contents so the image can be ordered ahead of its siblings; spacing is the grid's own 20px gap. */ @media (max-width: 1024px) { .page-water-ozonator .desc__body .two-col__text { display: contents; } .page-water-ozonator .desc__body .two-col__media { order: -1; } } /* Shared underline "learn more" link. Reused across product sections (the SOTA "Products Description" component in Figma). Accent = Water Ozonator product accent. */ .page-water-ozonator .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-water-ozonator); border-bottom: 3px solid var(--color-water-ozonator); /* 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-water-ozonator .learn-link:hover { color: var(--color-water-ozonator-dark); border-bottom-color: var(--color-water-ozonator-dark); } /* ----------------------------------------------------------- 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-water-ozonator .how-to__container { display: flex; flex-direction: column; gap: 1.667em; /* 30px */ } .page-water-ozonator .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-water-ozonator .how-to__title { line-height: 1.3; /* ~65px @50 desktop / ~39px @30 mobile */ } .page-water-ozonator .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-water-ozonator .how-to__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.667em; /* 30px */ align-items: start; } /* WOZ: single card spans full width; the card itself becomes horizontal (video left, text right) via --wide. */ .page-water-ozonator .how-to__grid--single { grid-template-columns: 1fr; } .page-water-ozonator .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 */ } /* Wide (horizontal) card: video + body side-by-side, vertically centered. Stacks to vertical at 1024 (see responsive block). */ .page-water-ozonator .how-to__card--wide { flex-direction: row; align-items: center; gap: 1.111em; /* 20px */ } .page-water-ozonator .how-to__card--wide .how-to__video { flex: 1 1 0; min-width: 0; } .page-water-ozonator .how-to__card--wide .how-to__body { flex: 1 1 0; min-width: 0; } /* Poster / video trigger */ .page-water-ozonator .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-water-ozonator .how-to__body { display: flex; flex-direction: column; gap: 1.111em; /* 20px */ padding: 0 0.556em; /* 10px side padding from Figma */ } .page-water-ozonator .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-water-ozonator .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-water-ozonator .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-water-ozonator .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-water-ozonator .how-to__share img { width: 1.111em; height: 1.111em; } .page-water-ozonator .how-to__share svg { width: 1.111em; height: 1.111em; } .page-water-ozonator .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-water-ozonator .how-to__share-label--copied { display: none; } .page-water-ozonator .how-to__share.is-copied .how-to__share-label--default { display: none; } .page-water-ozonator .how-to__share.is-copied .how-to__share-label--copied { display: inline; color: var(--color-water-ozonator); } /* 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-water-ozonator .how-to__actions { position: relative; } .page-water-ozonator .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-water-ozonator .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-water-ozonator .how-to__share-menu-item:hover { background: var(--color-accent-a12); color: var(--color-accent-dark); } .page-water-ozonator .how-to__watch { display: flex; flex-wrap: wrap; align-items: center; gap: 1.111em; /* 20px */ } .page-water-ozonator .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-water-ozonator .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-water-ozonator .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-water-ozonator .how-to__platform[data-platform="rumble"] img { width: 1.062em; /* ~19.1px */ } .page-water-ozonator .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-water-ozonator .how-to__platform[data-platform="youtube"] img { width: 1.444em; /* 26px */ } .page-water-ozonator .how-to__platform[data-platform="youtube"] svg { width: 1.444em; height: 1.111em; } .page-water-ozonator .how-to__platform:hover { color: var(--color-water-ozonator); } /* Section 3 responsive */ @media (max-width: 1024px) { .page-water-ozonator .how-to__grid { grid-template-columns: 1fr; /* stack cards */ } /* Wide (WOZ single) card: stack video above body below tablet. */ .page-water-ozonator .how-to__card--wide { flex-direction: column; align-items: stretch; } } @media (max-width: 767px) { .page-water-ozonator .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-water-ozonator .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-water-ozonator.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-water-ozonator .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-water-ozonator .testimonials__container { display: flex; flex-direction: column; align-items: center; gap: 2.778em; /* 50px */ } .page-water-ozonator .testimonials__header { display: flex; flex-direction: column; gap: 0.556em; /* 10px -- standardized heading/subheading gap (feedback #7) */ text-align: center; width: 100%; } .page-water-ozonator .testimonials__title { line-height: 1.3; } .page-water-ozonator .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-water-ozonator .tgrid { display: flex; flex-direction: column; gap: 1.111em; /* 20px between rows */ width: 100%; } .page-water-ozonator .tgrid__row { display: flex; gap: 1.111em; /* 20px */ align-items: stretch; /* cards match height within a row */ } /* Feature row: wide card + narrow card, 730:450 per the Figma (730 + 20 gap + 450 = 1200 container width) */ .page-water-ozonator .tgrid__row--feature > .tcard:first-child { flex: 730 1 0; } .page-water-ozonator .tgrid__row--feature > .tcard:last-child { flex: 450 1 0; } /* Rows of three: equal columns */ .page-water-ozonator .tgrid__row--three > .tcard { flex: 1 1 0; } /* Testimonial card */ .page-water-ozonator .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-water-ozonator .tcard--tint-30 { background: var(--color-accent-a30); } .page-water-ozonator .tcard--tint-20 { background: var(--color-accent-a20); } .page-water-ozonator .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-water-ozonator-dark); } .page-water-ozonator .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-water-ozonator .tcard__quote { display: flex; flex-direction: column; gap: 0; } .page-water-ozonator .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-water-ozonator .tcard__divider { width: 100%; height: 0; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); margin: 0; } .page-water-ozonator .tcard__person { display: flex; align-items: center; gap: 1.667em; /* 30px */ } .page-water-ozonator .tcard__avatar--placeholder { width: 6.278em; /* 113px */ height: 5.556em; /* 100px */ flex-shrink: 0; color: var(--color-accent); /* tints the currentColor sprite avatar */ } .page-water-ozonator .tcard__avatar--photo { width: 5.556em; /* 100px */ height: 5.556em; border-radius: 9999px; object-fit: cover; flex-shrink: 0; } .page-water-ozonator .tcard__meta { display: flex; flex-direction: column; min-width: 0; } .page-water-ozonator .tcard__name { font-size: 1.111em; /* 20px */ font-weight: 700; line-height: 1.5; /* 30px @20 both views */ color: var(--color-dark); } .page-water-ozonator .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-water-ozonator .testimonials__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.667em; /* 30px */ width: 100%; } .page-water-ozonator .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-water-ozonator .testimonials__cta { flex-shrink: 0; } /* Section 4 responsive: rows collapse to single column */ @media (max-width: 1024px) { .page-water-ozonator .tgrid__row { flex-direction: column; } .page-water-ozonator .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-water-ozonator .testimonials__footer { flex-direction: column; align-items: center; justify-content: center; gap: 0.556em; /* 10px */ } .page-water-ozonator .testimonials__disclaimer { flex: none; width: 100%; text-align: center; } } /* ----------------------------------------------------------- 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-water-ozonator .kits__container { display: flex; flex-direction: column; gap: 2.778em; /* 50px */ } .page-water-ozonator .kits__header { display: flex; flex-direction: column; gap: 0.556em; /* 10px -- standardized heading/subheading gap (feedback #7) */ text-align: center; } .page-water-ozonator .kits__title { line-height: 1.3; } .page-water-ozonator .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-water-ozonator .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-water-ozonator .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-water-ozonator .kit-card--featured { border-color: var(--color-water-ozonator); /* 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-water-ozonator .kit-card__banner { background: var(--color-water-ozonator); 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-water-ozonator .kit-card__top { display: flex; gap: 0.778em; /* 14px */ align-items: center; padding: 1.111em; /* 20px */ } .page-water-ozonator .kit-card__media { flex: 1 1 0; min-width: 0; height: 12.944em; /* 233px */ border-radius: var(--radius-panel); overflow: hidden; } .page-water-ozonator .kit-card__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-panel); } .page-water-ozonator .kit-card__intro { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.278em; /* 5px */ text-align: left; } .page-water-ozonator .kit-card__name { font-size: 1.222em; /* 22px */ font-weight: 700; line-height: 1.364; /* 30px */ color: var(--color-dark); } .page-water-ozonator .kit-card__price { margin: 0; } .page-water-ozonator .kit-card__amount { font-size: 1.389em; /* 25px */ font-weight: 900; line-height: 1.4; /* 35px */ color: var(--color-water-ozonator); } .page-water-ozonator .kit-card__currency { font-size: 1.111em; /* 20px */ font-weight: 400; color: var(--color-dark); } .page-water-ozonator .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-water-ozonator .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-water-ozonator .kit-card__includes { display: flex; flex-direction: column; gap: 0.556em; /* 10px */ } .page-water-ozonator .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-water-ozonator .kit-card__list { display: flex; flex-direction: column; } .page-water-ozonator .kit-card__item { display: flex; align-items: center; /* Fixed 20px gap (not em) so the emphasized --primary row, which has a larger font-size, keeps the SAME icon-to-text gap as the other rows and its text stays left-aligned with them (no visual indent). */ gap: 20px; font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.667; /* 30px */ color: var(--color-dark); } /* The Water Ozonator line is emphasised (blue, bold, larger) */ .page-water-ozonator .kit-card__item--primary { font-size: 1.222em; /* 22px */ font-weight: 700; line-height: 1.591; /* 35px */ color: var(--color-water-ozonator); } .page-water-ozonator .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-water-ozonator .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-water-ozonator .kits__grid { grid-template-columns: 1fr; gap: 1.667em; /* tighten from 80px when stacked */ } } @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-water-ozonator .kit-card__top { flex-direction: column; align-items: stretch; } .page-water-ozonator .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-water-ozonator .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-water-ozonator .eyn__container { display: flex; flex-direction: column; gap: 2.778em; /* 50px */ } .page-water-ozonator .eyn__header { display: flex; flex-direction: column; gap: 0.556em; /* 10px -- standardized heading/subheading gap (feedback #7) */ text-align: center; } .page-water-ozonator .eyn__title { /* Figma 53.5 -> capped at the shared heading scale */ line-height: 1.3; } .page-water-ozonator .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-water-ozonator .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-water-ozonator .eyn-tabs__bar { display: flex; align-items: stretch; border-bottom: 0.8px solid #d4d4d4; } .page-water-ozonator .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-water-ozonator .eyn-tabs__tab:hover { background: var(--color-accent-a12); } /* Active tab: pale-blue fill + darker-blue underline (Figma 11579:4825: fill rgba(71,146,188,0.1), bottom border #3f799a). */ .page-water-ozonator .eyn-tabs__tab.is-active { background: var(--color-accent-a10); border-bottom-color: var(--color-accent-dark); } /* Panels */ .page-water-ozonator .eyn-tabs__panel { display: flex; flex-direction: column; gap: 2.222em; /* 40px between groups */ padding: 0 1.111em; /* 20px */ } .page-water-ozonator .eyn-tabs__panel[hidden] { display: none; } /* Product group */ .page-water-ozonator .eyn-group { display: flex; flex-direction: column; gap: 0.556em; /* 10px */ } .page-water-ozonator .eyn-group__heading { margin: 0; } .page-water-ozonator .eyn-group__badge { display: inline-flex; align-items: center; justify-content: center; background: var(--color-water-ozonator); 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-water-ozonator .eyn-group__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.556em; /* 10px */ align-items: stretch; } .page-water-ozonator .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-water-ozonator .eyn-card__title { font-size: 1.222em; /* 22px */ font-weight: 700; line-height: 1.364; /* 30px */ color: var(--color-dark); } .page-water-ozonator .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-water-ozonator .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-water-ozonator .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-water-ozonator .eyn-card__badge--accent { background: var(--color-accent); } .page-water-ozonator .eyn-card__badge--dark { background: var(--color-dark); } /* Bulleted list inside a card (Features, Cautions, Output Specs) */ .page-water-ozonator .eyn-card__list { list-style: disc; padding-left: 1.5em; display: flex; flex-direction: column; gap: 0.278em; } .page-water-ozonator .eyn-card__list li { font-size: 1em; /* 18px */ font-weight: 400; line-height: 1.667; /* 30px */ color: var(--color-dark); } .page-water-ozonator .eyn-card__list strong { font-weight: 700; } /* Nested sub-bullets (WOZ Features/Cautions). The parent list is a flex column, so give nested lists normal list flow with a lighter marker. */ .page-water-ozonator .eyn-card__list ul { list-style: circle; padding-left: 1.5em; margin-top: 0.278em; display: block; } .page-water-ozonator .eyn-card__list ul li { margin-top: 0.139em; } /* "Important" callout (Cautions panel): pale-blue fill, blue left rule. Matches the WOZ blue accent used across the Everything-You-Need tabs (was SP green #f5faf0 / #8bc34a). */ .page-water-ozonator .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-water-ozonator .eyn-important__title { font-size: 1.222em; /* 22px */ font-weight: 700; line-height: 1.591; /* 35px */ color: var(--color-dark); } .page-water-ozonator .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-water-ozonator .eyn-acc__head { display: none; } .page-water-ozonator .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-water-ozonator .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-water-ozonator .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-water-ozonator .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-water-ozonator .eyn-tabs__panel, .page-water-ozonator .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-water-ozonator .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-water-ozonator-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-water-ozonator .eyn-acc__icon { position: relative; flex-shrink: 0; width: 1.111em; /* 20px */ height: 1.111em; } .page-water-ozonator .eyn-acc__icon::before, .page-water-ozonator .eyn-acc__icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: #555555; } .page-water-ozonator .eyn-acc__icon::before { /* horizontal bar */ width: 0.722em; /* 13px */ height: 0.139em; /* 2.5px */ transform: translate(-50%, -50%); } .page-water-ozonator .eyn-acc__icon::after { /* vertical bar */ width: 0.139em; height: 0.722em; transform: translate(-50%, -50%); transition: opacity 0.2s; } .page-water-ozonator .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-water-ozonator .eyn-tabs__panel:first-of-type .eyn-acc__head { border-top-left-radius: 1.056em; /* ~19px */ border-top-right-radius: 1.056em; } .page-water-ozonator .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-water-ozonator .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-water-ozonator .eyn-acc__body[hidden] { display: none; } .page-water-ozonator .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-water-ozonator .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-water-ozonator .swpg__container { display: flex; flex-direction: column; gap: 2.778em; /* 50px */ } .page-water-ozonator .swpg__header { display: flex; flex-direction: column; gap: 0.556em; /* 10px -- standardized heading/subheading gap (feedback #7) */ text-align: center; } .page-water-ozonator .swpg__title { line-height: 1.3; } .page-water-ozonator .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-water-ozonator .swpg__body { display: flex; flex-wrap: wrap; gap: 2.778em; /* 50px */ align-items: center; justify-content: center; } .page-water-ozonator .swpg__left { flex: 1 1 360px; max-width: 497px; display: flex; flex-direction: column; gap: 1.667em; /* 30px */ } .page-water-ozonator .swpg__list-block { display: flex; flex-direction: column; gap: 0.556em; /* 10px */ } .page-water-ozonator .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-water-ozonator .swpg__list .check-list__item { gap: 1.667em; /* 30px */ } .page-water-ozonator .swpg__list .check-list__item span { font-size: 1.111em; /* 20px */ font-weight: 500; line-height: 1.75; /* 35px */ color: var(--color-dark); } .page-water-ozonator .swpg__cta { align-self: flex-start; } /* Right: framed booklet preview */ .page-water-ozonator .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-water-ozonator .swpg__container { gap: 1.667em; /* 30px header->body (Figma; desktop 50px) */ } .page-water-ozonator .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-water-ozonator .swpg__left { display: contents; } .page-water-ozonator .swpg__list-block { order: 1; } .page-water-ozonator .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-water-ozonator .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-water-ozonator .swpg__list .check-list__item { gap: 0.556em; /* 10px */ } .page-water-ozonator .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-water-ozonator .faq__container { display: flex; flex-direction: column; gap: 2.778em; /* 50px */ } .page-water-ozonator .faq__header { display: flex; flex-direction: column; gap: 0.556em; /* 10px -- standardized heading/subheading gap (feedback #7) */ text-align: center; } .page-water-ozonator .faq__title { line-height: 1.3; } .page-water-ozonator .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-water-ozonator .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-water-ozonator .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-water-ozonator .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-water-ozonator .faq__list { flex: 1 1 0; min-width: 350px; display: flex; flex-direction: column; gap: 1.111em; /* 20px */ } /* FAQ row */ .page-water-ozonator .faq__item { border-radius: 1.778em; /* 32px */ box-shadow: 0 4px 20px 0 rgba(26, 43, 28, 0.07); overflow: hidden; } .page-water-ozonator .faq__item--tint-30 { background: var(--color-accent-a30); } .page-water-ozonator .faq__item--tint-20 { background: var(--color-accent-a20); } /* Trigger (the always-visible question bar) */ .page-water-ozonator .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-water-ozonator .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-water-ozonator .faq__icon { position: relative; flex-shrink: 0; width: 1.667em; /* 30px */ height: 1.667em; } .page-water-ozonator .faq__icon::before, .page-water-ozonator .faq__icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--color-water-ozonator-dark); border-radius: 1px; transition: transform 0.2s; } .page-water-ozonator .faq__icon::before { width: 0.889em; /* 16px horizontal bar */ height: 0.139em; /* ~2.5px */ transform: translate(-50%, -50%); } .page-water-ozonator .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-water-ozonator .faq__trigger[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); } /* Answer panel (HTML injected by site-faqs.js) */ .page-water-ozonator .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-water-ozonator .faq__answer[hidden] { display: none; } .page-water-ozonator .faq__answer p { margin-bottom: 0.667em; } .page-water-ozonator .faq__answer p:last-child { margin-bottom: 0; } /* Lists and links inside fetched answer fragments are styled SITE-WIDE by css/site-faqs.css (specificity-doubled selectors that beat the page resets above) -- no page-level rules needed here. */ /* Loading / error states set by site-faqs.js */ .page-water-ozonator .faq__answer.is-loading { opacity: 0.6; } .page-water-ozonator .faq__answer.is-error { color: #b00020; } .page-water-ozonator .faq__cta-wrap { margin-top: 0.556em; } /* Section 9 responsive */ @media (max-width: 1024px) { .page-water-ozonator .faq__container { gap: 1.667em; /* 30px header->body (Figma; desktop 50px) */ } .page-water-ozonator .faq__body { flex-direction: column; gap: 1.667em; /* 30px image->accordion (Figma; desktop 50px) */ } .page-water-ozonator .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-water-ozonator .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-water-ozonator .faq__list { gap: 0.556em; /* 10px */ } .page-water-ozonator .faq__trigger { padding: 0.278em 1.111em; /* 5px 20px */ } .page-water-ozonator .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 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-water-ozonator .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-water-ozonator .section-wave--blue { background-image: url('../images/elements/divider_wave_blue.png'); /* 1640 x 218 -- uses the default ratio above. */ } .page-water-ozonator .section-wave--curved-blue { aspect-ratio: 1640 / 51; /* Figma: 1640 x 51 -- flat curve */ background-image: url('../images/elements/divider_curved_blue.png'); } .page-water-ozonator .section-wave--green { aspect-ratio: 1640 / 81; /* Figma: 1640 x 81 */ background-image: url('../images/elements/divider_wave_green_beige_bottom.png'); } .page-water-ozonator .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-water-ozonator .section-divider-line { width: 100%; padding: 0 2.778em; /* 50px inset each side */ } .page-water-ozonator .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-water-ozonator .two-col { grid-template-columns: 1fr; } /* Reverse variants flip back to natural DOM order on mobile. */ .page-water-ozonator .two-col--reverse .two-col__text { order: 0; } .page-water-ozonator .two-col--reverse .two-col__media { order: 1; } } /* Phone */ @media (max-width: 767px) { .page-water-ozonator .btn { white-space: normal; text-align: center; } /* Breadcrumb on ONE line (feedback mobile #2). At 18px the strip sits right at the viewport edge and wraps the current-page item; stop the wrap and step the type down so it fits comfortably with room to spare. */ .page-water-ozonator .model__breadcrumb { flex-wrap: nowrap; } .page-water-ozonator .model__breadcrumb-link, .page-water-ozonator .model__breadcrumb-current { font-size: 0.833em; /* 15px */ padding-left: 0.417em; /* 7.5px - tighten the pill padding on phone */ padding-right: 0.417em; white-space: nowrap; } .page-water-ozonator .model__breadcrumb-sep { font-size: 1em; /* 18px - was 22px; smaller separators on phone */ padding: 0 0.083em; } /* Return-policy tooltip (feedback mobile #3): the panel is centered on the "?" trigger (left:50% / translateX(-50%)) with a 360px max-width. The trigger sits in the right half of the buy panel, so on a ~370px phone the centered panel overran the right edge and clipped its text. On phone, anchor the panel to the trust item's full width (which spans the buy panel, safely inside the viewport) instead of centering it. */ .page-water-ozonator .model__trust-tip { left: 0; right: 0; width: auto; max-width: none; transform: translateY(-4px); } .page-water-ozonator .model__trust-tip.is-open { transform: translateY(0); } } /* =========================================================== 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-water-ozonator .page-wave { margin-top: var(--space-section-y); } .page-water-ozonator .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-water-ozonator .section-questions { padding-bottom: 0; }