/** Shopify CDN: Minification failed Line 150:0 All "@import" rules must come first **/ /* ============================================================ HYDRAW — base design tokens, reset, utilities Type sizes: clamp(min @375px, fluid @1440px target, max @1920px) ============================================================ */ :root { /* Brand palette */ --c-olive: #706A3A; --c-olive-deep: #5A552F; --c-cream: #FEFBF0; --c-cream-soft: #FDF6D9; --c-ink: #242217; --c-mint: #C1E5A4; --c-mint-hover: #B0D894; --c-line: rgba(36, 34, 23, 0.12); --c-line-on-olive: rgba(254, 251, 240, 0.18); /* Surface defaults */ --bg-page: var(--c-cream); --fg-page: var(--c-ink); /* Typography families — Euclid Circular A is self-hosted (see theme.liquid @font-face) */ --ff-sans: 'Euclid Circular A', 'Helvetica Neue', Arial, sans-serif; --ff-mono: 'Roboto Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Type scale — fluid clamp(min, ideal, max) where ideal targets 1440px */ /* Section title sizing — linear between two anchor points: 1244px → 40px (3.55 × 12.44 − 4.16 = 40) 1920px → 64px (3.55 × 19.2 − 4.16 = 64) Below 1244 the 2.5rem (40px) floor pins the size; above 1920 the 4rem (64px) ceiling caps it. Same formula on both H1 vars so titles using .t-h1 and .t-h1-xl read at the exact same scale across the theme. */ --fs-h1-xl: clamp(2.5rem, calc(3.55vw - 0.26rem), 4rem); /* 40 → 64 between 1244-1920 */ --fs-h1: clamp(2.5rem, calc(3.55vw - 0.26rem), 4rem); --fs-h2: clamp(2rem, 1rem + 3.5vw, 2.44rem); /* 38.99px — sect 1 hero */ --fs-body-lg: clamp(1.25rem, 0.85rem + 1.5vw, 1.94rem); /* 31.01px — sect 3 body */ /* Section body / accordion-name scale — fixed to the figma 1440 spec (17.08px) at every viewport. Consumers: `.t-body`, `.minerals__name`, `.hydbody__name`, `.stats__body`, `.expand__heading`, `.faqq__q`, `.pdp-acc__summary`, and the `` element default. Mobile-specific 18px overrides on accordion names remain authoritative inside their own components. */ --fs-body: 17.08px; /* Stat / hero numbers — retuned scale. Mobile / ≤1280 → 42px (floor) 1280px → 42px (2.1875 × 12.8 + 14 = 42) 1920px → 56px (2.1875 × 19.2 + 14 = 56) — ceiling Was 44→71 which read as oversized on 1440-1920 hero displays. New scale keeps the number's visual presence at large viewports while sitting comfortably above body copy at 1280, without towering over it. */ --fs-num: clamp(2.625rem, calc(2.1875vw + 0.875rem), 3.5rem); /* 42 → 56 between 1280-1920 */ /* Mono-large — retuned to the same 20→24 ramp as --fs-body so mono subheadings (`.t-mono-lg`) sit at the same scale as accordion names and lead body copy at every viewport. 1280px → 20px (0.625 × 12.8 + 12 = 20) 1920px → 24px (0.625 × 19.2 + 12 = 24) — ceiling Floor 1rem (16px) keeps the mobile floor consistent with --fs-body. */ --fs-mono-lg: clamp(1rem, calc(0.625vw + 0.75rem), 1.5rem); /* 16 → 20 → 24 at 400/1280/1920 */ --fs-mono: clamp(0.95rem, 0.85rem + 0.5vw, 1.46rem); /* 23.34px — sect 6 */ --fs-mono-sm: clamp(1rem, 0.85rem + 0.4vw, 1.29rem); /* 20.7px — sect 4 footer line */ --fs-mono-xs: clamp(0.9rem, 0.8rem + 0.3vw, 1.225rem); /* 19.61px — buttons */ --fs-mono-mini: clamp(0.85rem, 0.8rem + 0.2vw, 1.04rem);/* 16.67px — sachet text */ --fs-meta: clamp(0.8rem, 0.78rem + 0.1vw, 0.886rem); /* 14.17px — sect 2 */ /* Section body copy — linear between two anchor points: 1280px → 16px (0.375 × 12.8 + 11.2 = 16) 1920px → 18.4px (0.375 × 19.2 + 11.2 = 18.4) Below 1280 the 1rem (16px) floor pins it; above 1920 the 1.15rem (18.4px) ceiling caps it. Used by meet/minerals/rtabs/scenarios/hydbody/stats body copy + the t-meta-2 utility class. */ --fs-meta-2: clamp(1rem, calc(0.375vw + 0.7rem), 1.15rem); /* 16 → 18.4 between 1280-1920 */ --fs-meta-mono: clamp(0.78rem, 0.76rem + 0.1vw, 0.886rem); /* 14.18px — sect 8 */ /* Spacing scale */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --sp-11: 10rem; /* Containers — sections span the full viewport; --gutter is the L/R padding. Fluid: 64px at the 1440 figma artboard (4.44vw), floors near 16px on mobile, caps at 128px on very wide screens. */ --w-narrow: 880px; --gutter: clamp(1rem, 4.44vw, 8rem); /* Section rhythm — single source of truth used by every standard section (hydration-body, minerals-accordion, scenarios for now; ripple outward as sections are touched). Values picked so a 1280×700 viewport fits a section above the sticky header without scroll, while a 1920 viewport gets the visual breathing room the figma artboard implies. 1280 / 1440 / 1920 vertical math: --space-section : 51 / 58 / 80 --space-title-gap : 38 / 43 / 48 --space-row : 19 / 22 / 24 Override at the section level only when a specific layout demands it (e.g. above-the-fold sections that pin to svh). */ --space-section: clamp(2.5rem, 4vw, 5rem); --space-title-gap: clamp(1.75rem, 3vw, 3rem); --space-row: clamp(0.875rem, 1.5vw, 1.5rem); /* Radii */ --r-button: 26px; --r-card: 24px; --r-card-lg: 36px; --r-pill: 999px; /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 180ms; --dur: 320ms; --dur-slow: 600ms; --dur-cinematic: 900ms; /* Layers */ --z-header: 100; --z-drawer: 200; --z-modal: 300; /* Header height (used for sticky offsets). Default = 88px (the original 1920 spec). The ≤1440 media query below overrides this to 64px so narrow-desktop viewports get a tighter header without affecting the 1920 design at all. */ --header-h: 88px; } /* Narrow-desktop header trim — applies at and below 1440 only so the 1920 design stays untouched. Every component that reads `var(--header-h)` adapts to the 64px value automatically (sticky offsets, hero IO math, pdp sticky media top, hydbody video, elmap section height). */ @media (max-width: 1440px) { :root { --header-h: 64px; } } /* Roboto Mono via Google Fonts (used for buttons and small mono labels). */ @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;600&display=swap'); /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h, 88px) + 16px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; } } body { margin: 0; font-family: var(--ff-sans); font-size: var(--fs-body); line-height: 1.25; letter-spacing: -0.01em; color: var(--fg-page); background: var(--bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* `clip` hides horizontal overflow without becoming a scroll container, so position:sticky on the header keeps working. Older browsers fall back to hidden. */ overflow-x: hidden; overflow-x: clip; } img, svg, video { display: block; max-width: 100%; height: auto; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { padding: 0; margin: 0; list-style: none; } h1, h2, h3, h4, h5, h6, p { margin: 0; } :focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; border-radius: 4px; } /* ---------- Skip link ---------- */ .skip-link { position: absolute; top: -100px; left: 1rem; z-index: 1000; background: var(--c-ink); color: var(--c-cream); padding: 0.75rem 1.25rem; border-radius: 8px; transition: top var(--dur) var(--ease-out); } .skip-link:focus { top: 1rem; } /* ---------- Layout primitives ---------- */ .page-w { width: 100%; padding-inline: var(--gutter); } .page-w--narrow { max-width: var(--w-narrow); margin-inline: auto; } .page-w--bleed { padding-inline: 0; } .section { padding-block: clamp(3rem, 6vw, 7rem); } .section--tight { padding-block: clamp(2rem, 4vw, 4rem); } .section--olive { background: var(--c-olive); color: var(--c-cream); } .section--cream { background: var(--c-cream); color: var(--c-ink); } .section--cream-soft { background: var(--c-cream-soft); color: var(--c-ink); } /* ---------- Type utilities ---------- */ .t-h1-xl { font-family: var(--ff-sans); font-weight: 400; /* Fixed to the figma 1440 spec: 38.99px / 41.25px. Replaces the previous `clamp(2.5rem, calc(3.55vw - 0.26rem), 4rem)` fluid scale so titles read at the exact designed weight at every desktop viewport. */ font-size: 38.99px; line-height: 41.25px; letter-spacing: -0.01em; } .t-h1 { font-family: var(--ff-sans); font-weight: 400; font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -0.01em; } .t-h2 { font-family: var(--ff-sans); font-weight: 400; font-size: var(--fs-h2); line-height: 1.25; letter-spacing: -0.01em; } .t-body-lg { font-family: var(--ff-sans); font-weight: 400; font-size: var(--fs-body-lg); line-height: 1.155; letter-spacing: -0.01em; } .t-body { font-family: var(--ff-sans); font-weight: 400; font-size: var(--fs-body); line-height: 1.253; letter-spacing: -0.01em; } .t-meta { font-family: var(--ff-sans); font-weight: 600; font-size: var(--fs-meta); line-height: 1.253; letter-spacing: -0.01em; } .t-meta-2 { font-family: var(--ff-sans); font-weight: 400; font-size: var(--fs-meta-2); line-height: 1.352; letter-spacing: -0.01em; } .t-num { font-family: var(--ff-sans); font-weight: 400; font-size: var(--fs-num); line-height: 0.41; letter-spacing: -0.01em; } .t-mono-lg { font-family: var(--ff-mono); font-weight: 400; font-size: var(--fs-mono-lg); line-height: 1.175; letter-spacing: -0.01em; } .t-mono { font-family: var(--ff-mono); font-weight: 400; font-size: var(--fs-mono); line-height: 1.071; letter-spacing: -0.01em; } .t-mono-sm { font-family: var(--ff-mono); font-weight: 400; font-size: var(--fs-mono-sm); line-height: 1.797; letter-spacing: -0.01em; } .t-mono-mini { font-family: var(--ff-mono); font-weight: 400; font-size: var(--fs-mono-mini); line-height: 1.522; letter-spacing: -0.01em; } .t-mono-meta { font-family: var(--ff-mono); font-weight: 400; font-size: var(--fs-meta-mono); line-height: 1.038; letter-spacing: -0.01em; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--ff-mono); font-weight: 400; font-size: var(--fs-mono-xs); line-height: 0.863; letter-spacing: -0.01em; text-transform: capitalize; text-align: center; white-space: nowrap; padding: 14px 27px; min-width: 185px; min-height: 80px; border-radius: var(--r-button); border: 1px solid transparent; cursor: pointer; transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); will-change: transform; } .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(36, 34, 23, 0.35); } .btn:active { transform: translateY(0); } .btn--mint { background: var(--c-mint); color: var(--c-ink); } .btn--mint:hover { background: var(--c-mint-hover); } .btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-ink); } .btn--ghost:hover { background: var(--c-ink); color: var(--c-cream); } .btn--ghost-cream { background: transparent; color: var(--c-cream); border-color: var(--c-cream); } .btn--ghost-cream:hover { background: var(--c-cream); color: var(--c-olive); } .btn--solid-ink { background: var(--c-ink); color: var(--c-cream); } .btn--solid-ink:hover { background: var(--c-olive); } /* Compact button variant for header / inline use */ .btn--sm { min-width: 0; min-height: 0; padding: 10px 18px; } /* Stacked variant — 2-line button (verb / HYDRAW.) per the figma spec where line-height (16.92) is intentionally tighter than font-size (19.61) */ .btn--stack { flex-direction: column; gap: 0.15em; line-height: 0.863; } .btn--stack .btn__line { display: block; } .btn--stack.btn--sm { padding: 12px 20px; } /* ---------- Reveal-on-scroll utility ---------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-cinematic) var(--ease-out), transform var(--dur-cinematic) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .reveal.is-visible { opacity: 1; transform: none; } .reveal--fade { transform: none; } /* ---------- Accessibility helpers ---------- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---------- Forms baseline ---------- */ input, button, select, textarea { font: inherit; } input[type="email"], input[type="text"] { background: transparent; border: 1px solid currentColor; color: inherit; border-radius: var(--r-pill); padding: 1rem 1.5rem; width: 100%; transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); } input[type="email"]::placeholder, input[type="text"]::placeholder { color: currentColor; opacity: 0.7; } input[type="email"]:focus, input[type="text"]:focus { outline: none; background: rgba(255, 255, 255, 0.06); } /* ---------- Shopify-injected consent banner ---------- */ /* The privacy/cookie banner is injected into the page and otherwise inherits the theme's fluid `--fs-body`, which blows it up on wide screens. Pin it to fixed sizes so it renders at Shopify's intended scale. */ #shopify-pc__banner, #shopify-pc__prefs { font-size: 16px; line-height: 1.45; letter-spacing: normal; } #shopify-pc__banner h2, #shopify-pc__prefs h2 { font-size: 1.25rem; line-height: 1.3; letter-spacing: normal; } #shopify-pc__banner p, #shopify-pc__prefs p, #shopify-pc__banner button, #shopify-pc__prefs button { font-size: 0.9375rem; line-height: 1.5; letter-spacing: normal; } /* Consent banner — hide the "Decline" button, round + brand the dialog. */ .shopify-pc__banner__btn-decline { display: none; } #shopify-pc__banner { margin-bottom: 16px; border-radius: 16px; background-color: var(--bg-page); } .shopify-pc__banner__dialog button.shopify-pc__banner__btn-accept { border-radius: 16px; /* Shopify's own injected styles have higher specificity than any selector we can write from the theme, so background needs !important to override. */ background: var(--c-mint) !important; font-family: var(--ff-mono); } /* ---------- Shopify policy pages (Terms / Privacy / Refund / Shipping) ---------- These templates have no theme section — Shopify renders the markup directly into {{ content_for_layout }}. The body class isn't reliable across stores, so we target Shopify's own .shopify-policy__container instead. */ .shopify-policy__container { padding-block: clamp(2.5rem, 5vw, 5rem); padding-inline: var(--gutter); max-width: 880px; margin-inline: auto; } /* H1 page title — bottom margin gives space before the first body block. */ .shopify-policy__container h1 { margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem); } /* H2 section headings inside policy pages — generous top margin to break up the long copy, tighter bottom so the heading hugs its first paragraph. */ .shopify-policy__container h2 { margin-top: clamp(2rem, 3vw, 2.75rem); margin-bottom: clamp(0.5rem, 1vw, 0.875rem); } .shopify-policy__container h2:first-child { margin-top: 0; } /* ---------- Shopify built-in challenge page (hCaptcha) ---------- `/challenge?...` is rendered by Shopify itself and dropped straight into `{{ content_for_layout }}` with no theme padding. Styling `.shopify-challenge__container` adds the same vertical / horizontal rhythm the rest of the site uses, so the hCaptcha widget doesn't sit flush with the header / footer. */ .shopify-challenge__container { padding: clamp(3rem, 6vw, 7rem) var(--gutter); max-width: 640px; margin-inline: auto; text-align: center; color: var(--c-ink); } .shopify-challenge__message { font-family: var(--ff-sans); font-size: var(--fs-body); line-height: 1.35; margin: 0 0 clamp(1rem, 2vw, 1.5rem); } .shopify-challenge__errors { margin-bottom: clamp(1rem, 2vw, 1.5rem); font-family: var(--ff-sans); font-size: var(--fs-meta-2); color: #7a2e1c; } .shopify-challenge__error { list-style: none; margin: 0; padding: 0; } #captcha_form { display: flex; flex-direction: column; align-items: center; gap: clamp(1rem, 2vw, 1.5rem); } .shopify-challenge__button { padding: 0.85rem 1.75rem; background: var(--c-ink); color: var(--c-cream); border: 0; border-radius: 14px; font-family: var(--ff-sans); font-weight: 500; font-size: var(--fs-meta-2); letter-spacing: -0.005em; cursor: pointer; transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out); } .shopify-challenge__button:hover { transform: translateY(-1px); } /* ---------- PDP 1.1 shared shell ---------- Every `pdp-*` section on the 1.1 product page uses the same shell: a light grey (#F8F8F8 per the figma frames, overridable per section) full-bleed background with the page gutter, and a 1268px centred content column (288 → 1557 on the 1440 artboard). */ .pdp11 { background: var(--pdp11-bg, #F8F8F8); color: var(--c-ink); padding-inline: var(--gutter); } .pdp11__inner { max-width: 1268px; margin-inline: auto; }