/*
Theme Name: Dercums Child
Theme URI: https://dercums.com
Description: Child theme of Hello Elementor for Dercums.com (AquaLink). Holds only the
custom CSS/PHP that Elementor cannot reasonably handle. Layout and content
remain Elementor-managed.
Author: JS Web Design Services
Author URI: https://junsanchez.com
Template: hello-elementor
Version: 1.0.0
Text Domain: dercums-child
*/
/* Component styles are added here only where Elementor cannot handle the requirement.
Organise by component, keep specificity low, and use the shared class names
(site-header, hero, section, benefits, process, science, testimonial,
product-cta, faq-preview, resources, final-cta, site-footer). */
/* ==========================================================================
1. Content width
--------------------------------------------------------------------------
The Figma board is 1440 wide with 120px side margins, so the content
measure is 1200px. Elementor 4.3 REMOVED the kit's global "Content Width"
control (the kit stack no longer registers `container_width`), so the only
place left to set it once is Elementor's own public custom property.
Boxed containers resolve their inner width from
`--content-width: min(100%, var(--container-max-width, 1140px))`.
Side gutters below 1440 come from each section's own inline padding, not
from here — see the section padding convention in the build notes.
========================================================================== */
.elementor .e-con {
--container-max-width: 1200px;
}
/* ==========================================================================
2. Type rendering
--------------------------------------------------------------------------
Poppins at the Figma sizes needs optical smoothing to match the board;
without it headings render measurably heavier than the design.
========================================================================== */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ==========================================================================
3. Focus visibility
--------------------------------------------------------------------------
WCAG 2.4.7. teal-700 (#1F7A6E) is the measured ring colour: it clears 3:1
against every ground on this site including the gold button face (3.09:1),
where teal-500 falls to 1.99:1. Do not substitute teal-500.
========================================================================== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2.5px solid #1F7A6E;
outline-offset: 2px;
}
/* ==========================================================================
4. Footer decoration
--------------------------------------------------------------------------
Two purely decorative layers from Figma node 119:220 that Elementor cannot
express: a 4-stop gradient hairline across the top edge, and a 900px radial
teal glow anchored off the lower-right corner. Both are pseudo-elements so
they add no markup and cannot be tabbed to. The footer clips them, which is
what the Figma frame does too.
========================================================================== */
.dx-footer {
position: relative;
isolation: isolate;
}
/* Top Accent Rule — 1px, teal 0 → teal .55 @28% → gold .40 @62% → teal 0 */
.dx-footer::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: 0;
block-size: 1px;
background: linear-gradient(
90deg,
rgba(42, 157, 143, 0) 0%,
rgba(42, 157, 143, 0.55) 28%,
rgba(233, 196, 106, 0.40) 62%,
rgba(42, 157, 143, 0) 100%
);
z-index: -1;
}
/* Depth Glow — Ø900 ellipse, centre off the lower-right corner */
.dx-footer::after {
content: "";
position: absolute;
inset-block-start: 120px;
inset-inline-end: -360px;
inline-size: 900px;
block-size: 900px;
border-radius: 50%;
background: radial-gradient(
closest-side,
rgba(42, 157, 143, 0.16) 0%,
rgba(42, 157, 143, 0.05) 60%,
rgba(42, 157, 143, 0) 100%
);
pointer-events: none;
z-index: -1;
}
/* ==========================================================================
5. Rich-text margin trim
--------------------------------------------------------------------------
The Figma board measures every text block as its text box. Elementor's
Text Editor emits
, whose trailing margin (14.4px at the footer's 15px
body size) is then added to the auto-layout gap, pushing everything below
it down. Trimming only the LAST child keeps the spacing between paragraphs
intact while making the widget box equal its text box.
Elementor 4.3 ships "optimized markup", so a widget may or may not have the
.elementor-widget-container wrapper. Both shapes are covered below.
========================================================================== */
.elementor-widget-text-editor > :last-child,
.elementor-widget-text-editor > .elementor-widget-container > :last-child,
.elementor-widget-theme-post-content > :last-child,
.elementor-widget-theme-post-content > .elementor-widget-container > :last-child {
margin-block-end: 0;
}
/* ==========================================================================
6. Atmospheric layers
--------------------------------------------------------------------------
Sections 06 and 07 carry purely decorative Figma layers — blurred bubbles,
water ribbons, a molecular silhouette and a wide aqua glow. They are drawn
here as background layers on the section rather than as elements, so they
add no markup, cannot be tabbed to, and cannot affect text contrast.
Coordinates and colours are taken from the board 1:1.
========================================================================== */
/* --- 06 · The Science Behind AquaLink (node 88:175) --- */
.dx-science {
position: relative;
isolation: isolate;
}
/* Three blurred bubbles: upper-left (Ø210 @ -78,30), upper-right (Ø164 @ 1308,74),
lower-right (Ø208 @ 1286,1042). Each is white .46 → white .16 @58% → teal .07
@86% → transparent, which reads as the blurred ellipse without a filter. */
.dx-science::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: -2;
background:
radial-gradient(105px 105px at -78px 135px,
rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.16) 58%,
rgba(42,157,143,0.07) 86%, rgba(42,157,143,0) 100%),
radial-gradient(82px 82px at calc(100% - 50px) 156px,
rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.16) 58%,
rgba(42,157,143,0.07) 86%, rgba(42,157,143,0) 100%),
radial-gradient(104px 104px at calc(100% - 50px) calc(100% - 195px),
rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.16) 58%,
rgba(42,157,143,0.07) 86%, rgba(42,157,143,0) 100%);
background-repeat: no-repeat;
}
/* Two full-width water ribbons bleeding off the top and bottom edges. */
.dx-science::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: -1;
background:
linear-gradient(90deg, rgba(42,157,143,0.17) 0%, rgba(42,157,143,0.07) 50%, rgba(42,157,143,0.15) 100%),
linear-gradient(90deg, rgba(42,157,143,0.12) 0%, rgba(42,157,143,0.05) 50%, rgba(42,157,143,0.10) 100%);
background-repeat: no-repeat, no-repeat;
background-size: 100% 92px, 100% 120px;
background-position: 0 -26px, 0 calc(100% - 50px);
filter: blur(13px);
}
/* Molecular silhouette (node 90:180): 4 bonds + 5 nodes at teal 13%,
230x190 anchored at x=1010, y=150 within the 1440 board. */
.dx-science > .dx-molecule {
position: absolute;
inset-block-start: 150px;
inset-inline-start: calc(50% - 720px + 1010px);
inline-size: 230px;
block-size: 190px;
pointer-events: none;
z-index: -1;
}
@media (max-width: 1439px) {
.dx-science > .dx-molecule { display: none; }
}
/* --- 07 · Featured Experience (node 126:220) --- */
.dx-featured {
position: relative;
isolation: isolate;
}
/* Aqua Glow: Ø700 ellipse at (-30, 200), teal .18 → .05 @60% → 0, blur 110. */
.dx-featured::before {
content: "";
position: absolute;
inset-block-start: 200px;
inset-inline-start: -30px;
inline-size: 700px;
block-size: 700px;
border-radius: 50%;
background: radial-gradient(closest-side,
rgba(42,157,143,0.18) 0%, rgba(42,157,143,0.05) 60%, rgba(42,157,143,0) 100%);
pointer-events: none;
z-index: -1;
}
/* A self-hosted video must fill the card it is cropped into. */
.dx-featured .e-self-hosted-video,
.dx-featured video {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
display: block;
}
/* Bonds N1-N2, N2-N3, N2-N4, N4-N5 and five nodes, read off node 90:180. */
.dx-science > .dx-molecule {
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* The scrim, duration pill and name sit above the player; they must not
intercept clicks or the native video controls become unreachable. */
.dx-video-overlay {
pointer-events: none;
}
/* ==========================================================================
7. FAQ disclosure
--------------------------------------------------------------------------
The homepage FAQ preview is an Elementor loop over the `faq` post type, so
it renders as question/answer pairs rather than as one accordion widget.
These rules give it the board's appearance; assets/js/faq-disclosure.js
adds the button semantics. Without JS every answer stays visible, which is
the right fallback for this content.
========================================================================== */
.dx-faq-loop .elementor-grid {
gap: 0;
}
.dx-faq-item .dx-faq-q .elementor-heading-title {
margin: 0;
}
/* Hello Elementor's reset.css paints every button pink on hover/focus
(`button:hover { background-color: #c36 }`, specificity 0,1,1). `all: unset`
is a different declaration and cannot override it, so the neutral state is
spelled out here at 0,2,0. */
.elementor .dx-faq-toggle,
.elementor .dx-faq-toggle:hover,
.elementor .dx-faq-toggle:focus,
.elementor .dx-faq-toggle:active {
background-color: transparent;
color: inherit;
text-decoration: none;
box-shadow: none;
}
.dx-faq-toggle {
all: unset;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
inline-size: 100%;
cursor: pointer;
font: inherit;
color: inherit;
text-align: start;
}
.dx-faq-toggle::after {
content: "";
flex: 0 0 auto;
inline-size: 18px;
block-size: 18px;
/* teal plus sign, drawn from two 2px bars as on the board */
background:
linear-gradient(#1F7A6E, #1F7A6E) center / 16px 2px no-repeat,
linear-gradient(#1F7A6E, #1F7A6E) center / 2px 16px no-repeat;
transition: transform .18s ease;
}
.dx-faq-item.is-open .dx-faq-toggle::after {
/* the vertical bar is hidden, leaving a minus */
background: linear-gradient(#1F7A6E, #1F7A6E) center / 16px 2px no-repeat;
}
/* The board sets the answer measure to 620, not the full 740 column. Capping
the widget wrapper does not stick (Elementor resolves the text-editor
wrapper's inline size to 100% of the flex line), so the cap goes on the
paragraph itself, which nothing else sizes. */
.elementor .dx-faq-a > p,
.elementor .dx-faq-a > .elementor-widget-container > p {
max-inline-size: 620px;
}
.dx-faq-a[hidden] {
display: none;
}
/* Article cards: the loop item must fill its grid cell so all three align. */
.dx-article-loop .elementor-grid > .e-loop-item,
.dx-article-loop .elementor-loop-container > .e-loop-item {
display: flex;
}
.dx-article-card {
inline-size: 100%;
}
.dx-article-card .dx-article-img img {
inline-size: 100%;
block-size: 240px;
object-fit: cover;
display: block;
}
.dx-read-link .elementor-heading-title a {
color: inherit;
text-decoration: none;
}
/* ==========================================================================
8. "What AquaLink supports" — the five-state feature panel
--------------------------------------------------------------------------
Figma node 96:181 for the layout, and the Foundations board
"Supports Interaction - States" (100:13) for the five states.
Five panels are stacked in a fixed-height well on the left, and the list on
the right drives which one is shown. The well is fixed because the five
copy blocks differ in height (132-164 in the board) and the brief requires
no layout shift; the board's 990 band assumes state 01's copy only.
Activation is pointer-, click- AND keyboard-driven; see
assets/js/supports-panel.js. The last activated item stays active.
========================================================================== */
.elementor .dx-supports__left {
/* All five panels share one grid cell, so the well is always exactly as
tall as the tallest state. A fixed height would need re-measuring every
time the copy changes, and would clip whichever state grew. */
display: grid;
grid-template-columns: 1fr;
}
.elementor .dx-supports__panel {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
gap: 28px;
opacity: 0;
visibility: hidden;
transform: scale(1.01);
transition: opacity .26s ease, transform .26s ease, visibility 0s linear .26s;
}
.dx-supports__panel.is-active {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity .26s ease, transform .26s ease, visibility 0s;
}
/* Without JS every panel would stack on top of the others; show the first. */
.no-js .elementor .dx-supports__panel:not(:first-child) {
display: none;
}
.no-js .elementor .dx-supports__panel:first-child {
opacity: 1;
visibility: visible;
transform: none;
}
.elementor .dx-supports__visual {
inline-size: 100%;
block-size: 420px;
flex: 0 0 auto;
border-radius: 12px;
overflow: hidden;
background-color: #E9F4F7;
}
.dx-supports__visual img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
display: block;
}
/* ---- the right-hand list ---- */
/* Same pink-button reset as the FAQ toggle above. */
.elementor .dx-supports__item,
.elementor .dx-supports__item:hover,
.elementor .dx-supports__item:focus,
.elementor .dx-supports__item:active {
background-color: transparent;
color: inherit;
text-decoration: none;
box-shadow: none;
}
.elementor .dx-supports__item {
all: unset;
box-sizing: border-box;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
inline-size: 100%;
block-size: 100px;
padding-inline: 0 0;
border-block-end: 1px solid #E2E8F0;
cursor: pointer;
transition: padding-inline-start .2s ease;
}
/* The board draws the active edge as a 3x40 bar centred in the row, not as a
full-height border, so it is a pseudo-element rather than a border-left. */
.elementor .dx-supports__item::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-start: 30px;
inline-size: 3px;
block-size: 40px;
border-radius: 3px;
background-color: #2A9D8F;
opacity: 0;
transition: opacity .2s ease;
}
.elementor .dx-supports__item[aria-selected="true"] {
padding-inline-start: 20px;
}
.elementor .dx-supports__item[aria-selected="true"]::before {
opacity: 1;
}
.dx-supports__item-title {
flex: 1 1 auto;
font-family: Poppins, sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 26px;
color: #5B6B82;
transition: color .2s ease;
}
.dx-supports__item[aria-selected="true"] .dx-supports__item-title {
color: #0F172A;
font-weight: 600;
}
.elementor .dx-supports__arrow {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
inline-size: 44px;
block-size: 44px;
border-radius: 999px;
border: 1.25px solid rgba(15, 23, 42, 0.5);
color: #1F7A6E;
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.elementor .dx-supports__arrow::after {
content: "";
inline-size: 11px;
block-size: 11px;
/* A ::after inherits `display: inline` from the atomic base block, and an
inline box ignores width/height — so it must be told to be a block.
The glyph is baked per state rather than masked with currentColor: a
CSS mask resolves currentColor against its own document, not the host. */
display: block;
background: url('data:image/svg+xml,') center / 11px 11px no-repeat;
}
.elementor .dx-supports__item[aria-selected="true"] .dx-supports__arrow {
background-color: #0F172A;
border-color: #0F172A;
}
.elementor .dx-supports__item[aria-selected="true"] .dx-supports__arrow::after {
background-image: url('data:image/svg+xml,');
}
/* Keyboard focus has to be visible on a control with no default outline. */
.elementor .dx-supports__item:focus-visible {
outline: 2.5px solid #1F7A6E;
outline-offset: -2px;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
.elementor .dx-supports__panel,
.elementor .dx-supports__item,
.elementor .dx-supports__item::before,
.elementor .dx-supports__item-title,
.elementor .dx-supports__arrow {
transition-duration: .01ms;
}
.elementor .dx-supports__panel { transform: none; }
}
/* Tablet and below: the visual leads, the list follows, interaction unchanged. */
@media (max-width: 1024px) {
.elementor .dx-supports__visual { block-size: 360px; }
}
@media (max-width: 767px) {
.elementor .dx-supports__visual { block-size: 240px; }
.elementor .dx-supports__item { block-size: auto; padding-block: 20px; }
.elementor .dx-supports__item[aria-selected="true"] { padding-inline-start: 16px; }
}
/* --------------------------------------------------------------------------
Supports: between Elementor's desktop and tablet breakpoints the two fixed
columns (636 + 48 + 516 = 1200) are wider than the available measure, so
they have to become flexible before they overflow. Elementor's own tablet
rule only fires at 1024, which is 176px too late.
-------------------------------------------------------------------------- */
@media (max-width: 1199px) {
.elementor .dx-supports__left,
.elementor .dx-supports__list {
inline-size: auto;
flex: 1 1 0;
min-inline-size: 0;
}
}
/* Narrower than that, side by side stops being readable: the visual leads and
the list sits underneath, with the interaction unchanged. */
@media (max-width: 899px) {
.elementor .dx-supports__cols {
flex-direction: column;
}
.elementor .dx-supports__left,
.elementor .dx-supports__list {
inline-size: 100%;
flex: 0 0 auto;
}
}
/* ==========================================================================
9. Overlapping compositions below 1200
--------------------------------------------------------------------------
Sections 03 and 07 are built as two fixed columns that deliberately overlap
(700 + 560 and 480 + 780, each pulled back 60px). Those widths are drawn
for the 1200 measure; below it they push past the viewport. Elementor's own
tablet breakpoint is 1024, which is already too late, so the columns become
flexible at 1199 and stop overlapping at 899.
========================================================================== */
@media (max-width: 1199px) {
.elementor .dx-why__card,
.elementor .dx-featured__card {
inline-size: auto;
flex: 1 1 0;
min-inline-size: 0;
}
.elementor .dx-why__plate,
.elementor .dx-featured__left {
inline-size: auto;
flex: 1 1 0;
min-inline-size: 0;
}
}
@media (max-width: 899px) {
.elementor .dx-why__row,
.elementor .dx-featured__row {
flex-direction: column;
}
.elementor .dx-why__card,
.elementor .dx-why__plate,
.elementor .dx-featured__left,
.elementor .dx-featured__card {
inline-size: 100%;
flex: 0 0 auto;
/* the overlap and the vertical offset only make sense side by side */
margin: 0;
}
.elementor .dx-why__plate { block-size: 420px; margin-block-start: 32px; }
.elementor .dx-featured__card { margin-block-start: 32px; }
.elementor .dx-why__card,
.elementor .dx-featured__card { padding: 40px 32px; }
}
/* On a phone the card's own padding competes with the page gutter for an
already narrow measure, so it comes in to match. */
@media (max-width: 767px) {
.elementor .dx-why__card,
.elementor .dx-featured__card { padding: 32px 24px; }
}
/* Absolutely positioned accent plates are sized to their sibling, so they have
to stop being fixed-width at the same breakpoint the sibling does. */
@media (max-width: 1199px) {
.elementor .dx-why__accent,
.elementor .dx-featured__accent {
inline-size: auto;
inset-inline-end: -36px;
}
.elementor .dx-featured__accent { inset-inline-end: 36px; inset-inline-start: -36px; }
.elementor .dx-faq__headcol,
.elementor .dx-faq__loopwrap {
inline-size: auto;
flex: 1 1 0;
min-inline-size: 0;
}
.elementor .dx-faq__headcol { flex: 0 1 320px; }
}
@media (max-width: 899px) {
.elementor .dx-faq__row { flex-direction: column; }
.elementor .dx-faq__headcol,
.elementor .dx-faq__loopwrap { inline-size: 100%; flex: 0 0 auto; }
.elementor .dx-why__accent,
.elementor .dx-featured__accent { display: none; }
}
/* A CSS grid track's automatic minimum is min-content, so a loop item with any
fixed-width descendant will refuse to shrink. */
.dx-faq-loop .elementor-grid,
.dx-article-loop .elementor-grid {
min-inline-size: 0;
}
.dx-faq-loop .e-loop-item,
.dx-article-loop .e-loop-item {
min-inline-size: 0;
}
/* --------------------------------------------------------------------------
Footer columns. 440 brand + 96 gutter + 664 links is drawn for the 1200
measure; below it the fixed widths push past the band, and because the
footer clips its decorative glow the overflow silently cuts content off
rather than producing a scrollbar.
-------------------------------------------------------------------------- */
@media (max-width: 1199px) {
.dx-footer .dx-footer__brand {
width: auto;
flex: 1 1 320px;
min-width: 0;
}
.dx-footer .dx-footer__cols {
flex: 1 1 420px;
min-width: 0;
gap: 40px;
}
.dx-footer .dx-footer__col {
width: auto;
flex: 1 1 auto;
min-width: 140px;
}
}
@media (max-width: 767px) {
.dx-footer .dx-footer__brand,
.dx-footer .dx-footer__cols { flex: 1 1 100%; }
.dx-footer .dx-footer__col { flex: 1 1 45%; }
}
/* ==========================================================================
10. Fixed header and scroll state
--------------------------------------------------------------------------
Behaviour copied from aqualinkh2o.com, measured on the live site: the header
is fixed at the top, transparent-surfaced at rest, and past the scroll
threshold it compacts (84 -> 68 there, 88 -> 68 here) and gains a
translucent blurred surface with a hairline, over a 500ms premium ease.
The palette is Dercums' own — its header is paper, not navy.
========================================================================== */
:root {
--dx-header-h: 88px;
--dx-header-h-scrolled: 68px;
--dx-ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
/* Page gutter below the mobile breakpoint. Anything that bleeds out of a
band measures itself from this, so there is one number to change. */
--dx-gutter: 20px;
}
.elementor-location-header {
position: fixed;
inset-block-start: 0;
inset-inline: 0;
z-index: 80;
}
/* The header no longer occupies flow, so the document has to start below it. */
body {
padding-block-start: var(--dx-header-h);
}
.elementor .dx-header {
min-block-size: var(--dx-header-h);
background-color: #FFFFFF;
transition:
min-block-size .5s var(--dx-ease-premium),
background-color .5s var(--dx-ease-premium),
box-shadow .5s var(--dx-ease-premium),
backdrop-filter .5s var(--dx-ease-premium);
}
/* Elementor emits the container background as
`.elementor-37 .elementor-element.elementor-element-x:not(.elementor-motion-effects-element-type-background)`,
whose :not() puts it at 0,4,0 — above anything sane a child theme can write.
The scrolled surface is the one place that has to win outright. */
.elementor .dx-header.is-scrolled {
min-block-size: var(--dx-header-h-scrolled);
background-color: rgba(255, 255, 255, 0.92) !important;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08), 0 10px 30px -18px rgba(15, 23, 42, 0.35);
}
/* The logo shrinks with the bar, as it does on the parent site. */
.elementor .dx-header .dx-header__logo img {
transition: width .5s var(--dx-ease-premium);
}
.elementor .dx-header.is-scrolled .dx-header__logo img {
width: 140px;
}
/* Elementor's own burger belongs to the nav-menu widget; the drawer replaces it. */
.elementor .dx-header .elementor-menu-toggle,
.elementor .dx-header .elementor-nav-menu--dropdown {
display: none !important;
}
/* ---- the toggle ---- */
.elementor .dx-header__toggle .elementor-widget-container,
.elementor .dx-header__toggle {
line-height: 0;
}
.dx-nav-toggle,
.dx-nav-toggle:hover,
.dx-nav-toggle:focus,
.dx-nav-toggle:active {
display: grid;
place-items: center;
inline-size: 44px;
block-size: 44px;
padding: 0;
border: 1px solid rgba(15, 23, 42, 0.2);
border-radius: 999px;
background-color: transparent;
color: #0F172A;
cursor: pointer;
transition: border-color .2s ease, background-color .2s ease;
}
.dx-nav-toggle:hover {
border-color: rgba(15, 23, 42, 0.5);
}
.dx-nav-toggle:focus-visible {
outline: 2.5px solid #1F7A6E;
outline-offset: 2px;
}
.dx-nav-toggle__bars,
.dx-nav-toggle__bars::before,
.dx-nav-toggle__bars::after {
display: block;
inline-size: 18px;
block-size: 2px;
border-radius: 2px;
background-color: currentColor;
}
.dx-nav-toggle__bars {
position: relative;
}
.dx-nav-toggle__bars::before,
.dx-nav-toggle__bars::after {
content: "";
position: absolute;
inset-inline-start: 0;
}
.dx-nav-toggle__bars::before { inset-block-start: -6px; }
.dx-nav-toggle__bars::after { inset-block-start: 6px; }
/* ==========================================================================
11. Mobile navigation drawer
--------------------------------------------------------------------------
Same shape as the parent site: a blurred navy scrim over the page and a
panel sliding in from the right at min(88vw, 22rem), logo and close control
at the top, the primary links stacked with hairlines, and the CTA pinned to
the bottom.
========================================================================== */
.dx-drawer {
position: fixed;
inset: 0;
z-index: 90;
}
.dx-drawer[hidden] {
display: none;
}
.dx-drawer__scrim {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
padding: 0;
border: 0;
cursor: default;
background-color: rgba(11, 17, 32, 0.7);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
opacity: 0;
transition: opacity .4s var(--dx-ease-premium);
}
.dx-drawer.is-open .dx-drawer__scrim {
opacity: 1;
}
.dx-drawer__panel {
position: absolute;
inset-block: 0;
inset-inline-end: 0;
display: flex;
flex-direction: column;
inline-size: min(88vw, 22rem);
padding: 20px 24px 32px;
background-color: #0B1120;
box-shadow: -24px 0 60px -24px rgba(0, 0, 0, 0.6);
transform: translateX(100%);
transition: transform .42s var(--dx-ease-premium);
overflow-y: auto;
overscroll-behavior: contain;
}
.dx-drawer.is-open .dx-drawer__panel {
transform: none;
}
.dx-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-block-end: 24px;
}
.dx-drawer__logo img {
display: block;
inline-size: 148px;
block-size: auto;
}
.dx-drawer__close,
.dx-drawer__close:hover,
.dx-drawer__close:focus,
.dx-drawer__close:active {
display: grid;
place-items: center;
inline-size: 44px;
block-size: 44px;
flex: 0 0 auto;
padding: 0;
border: 1px solid rgba(42, 157, 143, 0.75);
border-radius: 999px;
background-color: transparent;
color: #FFFFFF;
cursor: pointer;
}
.dx-drawer__close::before,
.dx-drawer__close::after {
content: "";
position: absolute;
inline-size: 16px;
block-size: 2px;
border-radius: 2px;
background-color: currentColor;
}
.dx-drawer__close { position: relative; }
.dx-drawer__close::before { transform: rotate(45deg); }
.dx-drawer__close::after { transform: rotate(-45deg); }
.dx-drawer__close:focus-visible {
outline: 2.5px solid #2A9D8F;
outline-offset: 2px;
}
.dx-drawer__nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.dx-drawer__nav li + li {
border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}
.dx-drawer__nav a {
display: block;
padding-block: 16px;
font-family: Poppins, sans-serif;
font-size: 17px;
font-weight: 500;
line-height: 26px;
color: #CBD5E1;
text-decoration: none;
transition: color .2s ease;
}
.dx-drawer__nav a:hover,
.dx-drawer__nav a[aria-current="page"] {
color: #E9C46A;
}
.dx-drawer__nav a:focus-visible {
outline: 2.5px solid #2A9D8F;
outline-offset: 2px;
}
.dx-drawer__cta {
margin-block-start: auto;
display: flex;
align-items: center;
justify-content: center;
block-size: 56px;
border-radius: 8px;
background-color: #E9C46A;
color: #0F172A;
font-family: Poppins, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 1.04px;
text-transform: uppercase;
text-decoration: none;
}
.dx-drawer__cta:hover { background-color: #D9AE4A; }
.dx-drawer__cta:focus-visible {
outline: 2.5px solid #2A9D8F;
outline-offset: 2px;
}
html.dx-drawer-open,
html.dx-drawer-open body {
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
.dx-drawer__panel,
.dx-drawer__scrim,
.elementor .dx-header,
.elementor .dx-header .dx-header__logo img {
transition-duration: .01ms;
}
}
/* ==========================================================================
12. Testimonial poster, play control and video dialog
========================================================================== */
.elementor .dx-video__play,
.elementor .dx-video__play:hover,
.elementor .dx-video__play:focus,
.elementor .dx-video__play:active {
/* Hello Elementor paints buttons pink on hover; see section 7. */
background-color: rgba(15, 23, 42, 0.38);
color: #FFFFFF;
/* inset-inline-start/block-start are 50%, so pull back by half the box */
transform: translate(-50%, -50%);
transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.elementor .dx-video__play:hover {
background-color: rgba(15, 23, 42, 0.62);
border-color: rgba(255, 255, 255, 0.9);
transform: translate(-50%, -50%) scale(1.06);
}
.elementor .dx-video__play:focus-visible {
outline: 2.5px solid #2A9D8F;
outline-offset: 3px;
}
/* The Figma triangle is 15x17. A border triangle has to be nudged with a
margin to look centred, and that margin also shifts it off the true centre;
an SVG whose own viewBox is balanced needs no nudge at all. */
.elementor .dx-video__tri {
inline-size: 18px;
block-size: 20px;
background: url('data:image/svg+xml,') center / contain no-repeat;
}
.dx-video-modal {
inline-size: min(92vw, 520px);
max-block-size: 90dvh;
padding: 0;
border: 0;
border-radius: 20px;
background: transparent;
overflow: visible;
}
.dx-video-modal::backdrop {
background-color: rgba(11, 17, 32, 0.82);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.dx-video-modal__frame {
position: relative;
border-radius: 20px;
overflow: hidden;
background-color: #0B1120;
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
}
.dx-video-modal__player {
display: block;
inline-size: 100%;
max-block-size: 82dvh;
background-color: #0B1120;
}
.dx-video-modal__close,
.dx-video-modal__close:hover,
.dx-video-modal__close:focus,
.dx-video-modal__close:active {
position: absolute;
inset-block-start: 12px;
inset-inline-end: 12px;
display: grid;
place-items: center;
inline-size: 40px;
block-size: 40px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 999px;
background-color: rgba(15, 23, 42, 0.62);
color: #FFFFFF;
cursor: pointer;
}
.dx-video-modal__close::before,
.dx-video-modal__close::after {
content: "";
position: absolute;
inline-size: 14px;
block-size: 2px;
border-radius: 2px;
background-color: currentColor;
}
.dx-video-modal__close::before { transform: rotate(45deg); }
.dx-video-modal__close::after { transform: rotate(-45deg); }
.dx-video-modal__close:focus-visible {
outline: 2.5px solid #2A9D8F;
outline-offset: 2px;
}
/* The board's soft line breaks are set for its own column widths. They are
client copy and stay in the markup, but below the tablet breakpoint they
land mid-sentence, so the text is allowed to reflow naturally instead. */
@media (max-width: 767px) {
.dx-soft-break br {
display: none;
}
}
/* ==========================================================================
13. Reveal on scroll and on load
--------------------------------------------------------------------------
Same motion as the parent site: elements start low and transparent and
settle as they arrive, staggered, on cubic-bezier(.22, 1, .36, 1).
The RESTING state is declared here and armed by an inline flag printed in
the
, so the hero is already hidden on the first paint. If this
waited for the footer script the hero would paint, disappear, then animate.
assets/js/reveal.js only adds .is-revealed, a frame later, so the
transition has a start state to run from.
Rows and single-child wrappers hand the reveal down to their contents and
mark themselves .dx-reveal-passthrough, so a grid of cards arrives card by
card rather than as one slab.
========================================================================== */
.dx-reveal-ready .dx-section__wrap > *,
.dx-reveal-ready .dx-reveal {
opacity: 0;
transform: translateY(20px);
transition:
opacity .6s var(--dx-ease-premium),
transform .6s var(--dx-ease-premium);
will-change: opacity, transform;
}
.dx-reveal-ready .dx-reveal-passthrough,
.dx-reveal-ready .dx-reveal.is-revealed,
.dx-reveal-ready .dx-section__wrap > *.is-revealed {
opacity: 1;
transform: none;
will-change: auto;
}
/* A passthrough must not animate or it would fight its own children. */
.dx-reveal-ready .dx-reveal-passthrough {
transition: none;
}
@media (prefers-reduced-motion: reduce) {
.dx-reveal-ready .dx-section__wrap > *,
.dx-reveal-ready .dx-reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* ==========================================================================
14. Mobile rhythm
--------------------------------------------------------------------------
The board's vertical spacing is drawn for a 1440 frame: 140px bands and
56-88px gaps between groups. Carried to a 390 screen that reads as long
stretches of empty paper between ideas. Bands and gaps are tightened here in
one place rather than as a mobile variant on every section.
========================================================================== */
@media (max-width: 767px) {
/* One gutter for the whole page, set once — bands, the header and the
footer, so everything lines up on the same rail. Each of these carries
its own Elementor padding at the same specificity, so this rule has to
come after them in the sheet, which it does. */
.elementor .dx-band,
.elementor .dx-header,
.dx-footer {
padding-inline: var(--dx-gutter);
}
.elementor .dx-band {
padding-block: 56px;
}
.elementor .dx-section__wrap {
row-gap: 36px;
}
/* The hero keeps a little more air than the other bands, but far less than
the board's desktop rhythm: `body` already carries the fixed header's
clearance, so this is breathing room only and nothing slides under the
bar when it is cut. Applies to every hero on the site via .dx-hero. */
.elementor .dx-band.dx-hero {
padding-block: 40px;
}
}
/* The band between the two breakpoints.
--------------------------------------------------------------------------
The drawer nav takes over at 1024, so from there down a visitor is on what
is plainly a small screen — but Elementor's `mobile` variants stop at 767.
Without this the 768-1024 band keeps the board's full 1440 rhythm: 140-180px
of padding per band, which is how the footer came to have 104px of navy
above its logo on a tablet. The values sit between the two neighbours rather
than jumping off a cliff at 768. */
@media (min-width: 768px) and (max-width: 1024px) {
/* 72, not 88: with tablet landscape and laptop now active above it, this
is the NARROWEST of the four desktop-layout steps and has to sit below
them — 56 mobile, 72 here, 80 landscape, 88 laptop. It read 88 while it
was the only step between mobile and desktop, which left a 900px screen
with more band padding than an 1100px one. */
.elementor .dx-band {
padding-block: 72px;
}
.elementor .dx-section__wrap {
row-gap: 48px;
}
.elementor .dx-band.dx-hero {
padding-block: 56px;
}
}
/* ==========================================================================
15. Hero photograph below the nav breakpoint
--------------------------------------------------------------------------
On desktop the hero is copy over a full-bleed photograph with a
left-to-right scrim, which is the approved board. That composition assumes
a landscape frame: the source is 1671x941 and the product sits at about 62%
across, so on a portrait viewport `cover` crops it out of the picture
entirely.
aqualinkh2o.com solves this by changing the composition rather than the
crop — on mobile its hero is a solid navy band with the product as a real
image block between the headline and the body copy. Same approach here.
The 85% object-position is measured, not guessed: at a 5:4 block the source
scales to 1108px wide against a 390px window, and 85% of that 328px of
overflow is what centres the tub with its splash and molecules intact.
NOTE: an atomic e-image renders the itself — there is no wrapper — so
every one of these declarations belongs on the same element, and
`max-inline-size` has to be released or e-image-base's `max-width: 100%`
caps the bleed back to the column width.
========================================================================== */
.elementor .dx-hero__photo {
display: none;
}
/* Every hero shares the behaviour below but not the values: the homepage is
white copy on a navy scrim, the Science hero is navy copy on a white wash,
and each photograph has its own subject placement. Both are declared as
custom properties so a second hero is a two-line override, not a fork of
the whole block. Defaults are the homepage's. */
.elementor .dx-band.dx-hero {
--dx-hero-solid: #0F172A;
--dx-hero-focus: 85%;
--dx-hero-focus-wide: 72%;
--dx-hero-ratio: 5 / 4;
}
/* The Science hero. Its wash is white and its ink is navy, so the solid
colour has to invert or the copy lands white-on-white. 70% is measured the
same way as the homepage's 85%: at a 5:4 block the 1942x809 source scales to
749px against a 390px window, and 70% of that 359px of overflow is the only
offset that keeps the molecule, the powder dish and the tub all in frame. */
.elementor .dx-band.dx-hero.dx-hero--light {
--dx-hero-solid: #FFFFFF;
--dx-hero-focus: 70%;
--dx-hero-focus-wide: 70%;
}
@media (max-width: 1024px) {
/* The band becomes solid, so the scrim has nothing left to do — unless the
hero opted out (see dx-hero--keep-bg below). */
.elementor .dx-band.dx-hero:not(.dx-hero--keep-bg) {
background-image: none;
background-color: var(--dx-hero-solid);
}
/* The copy column is 620px wide by design. The bleed below is measured
from its own width, so it has to fill the band first or the image stops
short of the right edge. */
.elementor .dx-hero__copy {
inline-size: 100%;
max-inline-size: 100%;
}
.elementor .dx-hero:not(.dx-hero--keep-bg) .dx-hero__photo {
display: block;
/* The homepage hero's copy column carries a 26px gap so the photo is
spaced by its siblings; the Science hero spaces its lines with their
own margins instead, which leaves the photo flush against the
headline above and the intro below. Owning its own margin makes the
photo correct in both, and `margin-block` does not fight the
`margin-inline` bleed below. */
margin-block: 28px;
/* Full bleed out of the band's own gutter. */
inline-size: calc(100% + (2 * var(--dx-gutter)));
max-inline-size: none;
margin-inline: calc(-1 * var(--dx-gutter));
aspect-ratio: var(--dx-hero-ratio);
object-fit: cover;
object-position: var(--dx-hero-focus) center;
}
}
/* Between the nav breakpoint and mobile the section keeps 40px of inline
padding and the frame is wider, so the bleed and the crop both change. */
@media (max-width: 1024px) and (min-width: 768px) {
.elementor .dx-hero:not(.dx-hero--keep-bg) .dx-hero__photo {
/* Above the mobile breakpoint the band keeps Elementor's 40px. */
inline-size: calc(100% + 80px);
margin-inline: -40px;
aspect-ratio: 16 / 9;
object-position: var(--dx-hero-focus-wide) center;
}
}
/* ==========================================================================
16. Science page
--------------------------------------------------------------------------
Everything here is a pattern the atomic style schema cannot express:
`overflow: clip`, viewport-relative bleeds, generated hairlines, and a real
data table. Values are read from the approved board
(page "03 — Science · Desktop").
========================================================================== */
/* --- decorative blocks narrower than 30px --------------------------------
Elementor floors every container at min-width: 30px so an empty one stays
grabbable in the editor. That is an editor affordance, not a layout rule,
and it silently renders the 9px process-track dots as 30x9 dashes. `:empty`
cannot be used to catch these — an Elementor container always contains a
whitespace text node — so the blocks that need the floor released carry
dx-dot. Every rule and hairline in this build is wider than 30px and so is
unaffected. */
.elementor .dx-dot {
min-inline-size: 0;
}
/* --- decorative node-and-bond textures ----------------------------------
Two frames of 77 and 87 hairlines with 35 and 42 dots. Reproducing them as
atomic elements would add 112 nodes of page data for pure decoration, so
they are exported once and painted as backgrounds. Both deliberately hang
outside their band, hence the clip on the band rather than on the texture:
`clip` (not `hidden`) because it must not create a scroll container. */
.elementor .dx-band.dx-has-texture,
.elementor .dx-band.dx-has-bleed {
overflow: clip;
}
.elementor .dx-tex {
pointer-events: none;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.elementor .dx-tex--lattice {
background-image: url("assets/img/texture-lattice.svg");
}
.elementor .dx-tex--matrix {
background-image: url("assets/img/texture-matrix.svg");
}
/* --- 03 · the image that hugs the viewport edge -------------------------
The board zeroes this band's left padding so the 640x820 image touches the
frame edge. A fixed width would only be right at 1440, so the bleed is
measured from the measure itself: margin percentages resolve against the
flex container, so `50% - 50vw` is exactly the distance from the measure's
left edge to the viewport's, at any width. The image then grows to fill
what is left beside the 600px copy column — 640px at 1440, as drawn. */
@media (min-width: 1025px) {
.elementor .dx-sci-split__media {
margin-inline-start: calc(50% - 50vw);
inline-size: auto;
max-inline-size: none;
flex: 1 1 auto;
}
/* Both items need their automatic minimum released or they refuse to
shrink: a flex item's `min-width: auto` floors an at its own
aspect-derived width, so between 1025 and 1280 — where the measure is
narrower than 1200 but the row has not stacked yet — the pair overflows
the viewport by whatever the bleed took. With the floor gone the row
still resolves to the board's 640 + 80 + 600 at 1440, because the image
is the only item that grows. */
.elementor .dx-sci-split__media,
.elementor .dx-sci-split__copy {
min-inline-size: 0;
}
.elementor .dx-sci-split__copy {
flex: 0 1 600px;
}
}
/* --- 05 · the process track --------------------------------------------
Each step owns its dot and numeral (.dx-sci-step__rail). On desktop the
four rails sit side by side and read as one track, so only the connecting
hairline is drawn here: 936x1 running centre-to-centre of the first and
last dot. Four 264 columns in a 1200 row put those centres at 132 and 1068,
i.e. 11% in from each end. Generated rather than built, so it cannot drift
out of alignment with the dots. A sized pseudo-element needs an explicit
display or it collapses. */
.elementor .dx-sci-steps::before {
content: "";
display: block;
position: absolute;
inset-block-start: 4px;
inset-inline: 11%;
block-size: 1px;
background-color: #CBD5E1;
}
/* Below the four-across layout the track turns ninety degrees: the spine runs
down the left, each dot sits on it with its numeral beneath, and the step's
image and copy sit to the right. The connector is drawn per step rather than
as one line down the column so it stops at the last dot instead of running
on into the whitespace below it. */
@media (max-width: 767px) {
.elementor .dx-sci-steps {
--dx-rail: 40px;
--dx-step-gap: 40px;
row-gap: var(--dx-step-gap);
align-items: stretch;
}
.elementor .dx-sci-steps::before {
content: none; /* the horizontal hairline has nothing to connect */
}
.elementor .dx-sci-step {
flex-direction: row;
align-items: flex-start;
column-gap: 20px;
inline-size: 100%;
}
.elementor .dx-sci-step__rail {
position: relative;
flex: 0 0 var(--dx-rail);
inline-size: var(--dx-rail);
/* The step aligns its children to flex-start, which leaves the rail
only as tall as the dot and numeral — 41px — and the connector below
is measured from the rail's own box, so it would stop a long way
short of the next dot. Stretching it to the step's full height costs
nothing: the rail is a column, so the dot stays at the top. */
align-self: stretch;
}
/* From this dot down to the next one. The dot paints over the top of it. */
.elementor .dx-sci-step:not(:last-child) .dx-sci-step__rail::after {
content: "";
display: block;
position: absolute;
inset-block: 4px calc(-1 * var(--dx-step-gap));
inset-inline-start: calc(50% - 0.5px);
inline-size: 1px;
background-color: #CBD5E1;
}
/* Centred under the dot on desktop; ranged left beside it on mobile. */
.elementor .dx-sci-step__card,
.elementor .dx-sci-step__card * {
align-items: flex-start;
text-align: start;
}
}
/* --- 08 · the mechanism table -------------------------------------------
A real