/* ========================================================================== THEME TOKENS — mirrors the competitor's Shopify theme settings 1:1 Change these 6 lines to rebrand the whole funnel. ========================================================================== */ :root{ /* Three roles, one job each. Mixing them is what made the buy box read as assembled rather than designed: forest = structure, selection and primary action (headings, the chosen tier, tickers, the add-to-cart button) sage = support only (icon chips, focus rings, tints, links). It is never a background for white text: at 2.4:1 it fails contrast. green = proof and affirmation (ticks, claim marks, timeline labels, claim ticks). Small doses, never structure. */ /* Palette matches the product imagery (assets/img/brand + the 7 gallery images): leaf green #2F7E4B, forest #133D26, cream #FFF8E6, papaya orange. #2F7E4B under white text is 5.1:1 (passes AA). Orange under white text is ~2.9:1, so --accent-3 is for decoration/highlights only, never button text. */ --accent-1:#5C9E72; /* light leaf: icon chips, focus, links */ --accent-2:#2F7E4B; /* brand green: buttons only */ --accent-2-dark:#256740; /* green hover/pressed */ --accent-3:#F47A2A; /* papaya orange: highlights only */ --bg-1:#ffffff; --bg-2:#FFF8E6; /* cream section background */ --heading:#133D26; /* forest: headings, structure, selection */ --text:#1F2A22; /* near-black with a green cast, body copy */ --text-90:var(--text); --text-60:#5A665D; /* secondary text */ --star:#FFCC00; /* Surfaces and lines are tinted toward the cream/forest pair so nothing in the buy box reads as a neutral grey. */ --surface-quiet:#FFFCF3; /* unselected card ground */ --surface-quiet-2:#F6EFD9; /* unselected perk bar, quiet strips */ --tint-chip:#E3F0E6; /* icon chip ground */ --line:rgba(19,61,38,.15); /* hairline */ --line-strong:rgba(19,61,38,.28); --ink-muted:#5E7364; /* muted body on quiet surfaces */ --ink-faint:#9DB0A2; /* icons/strikethrough */ --on-navy-70:rgba(255,255,255,.74); /* ---- type --------------------------------------------------------------- Poppins, to match the reference PDP and the wordmark. Static weights 400-800. Tracking rule: negative ONLY on display sizes, positive on uppercase buttons/labels, zero on body copy. */ --font-body:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-heading:var(--font-body); --fw-body:400; --fw-bold:700; --fw-heading:600; --fs-h1:34px; --ls-h1:-0.025em; /* 52px on desktop */ --fs-h2:26px; --ls-h2:-0.015em; /* 34px on desktop */ --fs-h3:20px; --ls-h3:-0.005em; /* 24px on desktop */ --fs-body:16px; /* 17px on desktop. Poppins sets ~7% wider than Figtree */ --fs-small:14px; /* 15px on desktop */ --fs-label:16px; --ls-label:0.02em; /* buttons + uppercase labels */ --measure:65ch; /* max line length for reading copy */ --buttons-radius:12px; --buttons-border-width:2px; --media-radius:12px; --text-boxes-radius:24px; --bar-radius:8px; /* bundle bars */ --inputs-radius:6px; --pill-radius:40px; --page-width:1400px; --gutter-mobile:20px; --gutter-desktop:40px; --dur:.2s; --dur-long:.5s; } /* ========================= RESET ========================= */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--bg-1);color:var(--text); font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-body); line-height:1.6;letter-spacing:normal;-webkit-font-smoothing:antialiased; overflow-x:clip; /* clip, not hidden: hidden would make body a scroll container and can break position:sticky */ } img{max-width:100%;display:block;height:auto} button{font:inherit;color:inherit;cursor:pointer;border:0;background:none} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--font-heading);color:var(--heading);margin:0 0 .5em} h1{font-size:var(--fs-h1);font-weight:700;letter-spacing:var(--ls-h1);line-height:1.12} h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:var(--ls-h2);line-height:1.18} h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:var(--ls-h3);line-height:1.3} h4{font-size:var(--fs-h3);font-weight:600;letter-spacing:var(--ls-h3);line-height:1.3} small,.text-small{font-size:var(--fs-small)} /* numerals line up in prices, quantities and tables */ .price,.qty,table td,.bundle__price,.bundle__compare,.bundle__gift-price,[data-total]{font-variant-numeric:tabular-nums} /* cap reading copy at a comfortable measure */ .feature__text p,.accordion__content p,.accordion__content li,.section__sub,.guarantee p,.review__body,.benefit-card p,.timeline__item p,.ingredient p,.icon-bar__item p,.footer__block p{max-width:var(--measure)} .section__sub,.section__head p{margin-left:auto;margin-right:auto} p{margin:0 0 1em} ul{margin:0;padding:0;list-style:none} :focus-visible{outline:2px solid var(--accent-1);outline-offset:2px} .page-width{max-width:var(--page-width);margin:0 auto;padding:0 var(--gutter-mobile)} .narrow{max-width:760px;margin:0 auto} .center{text-align:center} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ========================= MARQUEE / TICKERS ========================= */ .marquee{overflow:hidden;position:relative;width:100%} .marquee__track{display:flex;width:max-content;animation:marquee var(--speed,26s) linear infinite} .marquee__group{display:flex;align-items:center;flex:0 0 auto} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.marquee__track{animation:none}} /* Top announcement ticker and mid-page strip ticker are one component with two mount points — same height, type, spacing and speed. Declared together so a change to one cannot silently leave the other behind. */ .announcement-ticker, /* Navy, not sky. Sky (#47b5e9) behind white text is 2.4:1, which fails WCAG AA, and a saturated pale-blue band above a white header made the page open on its weakest colour. Navy reads as the brand and passes comfortably. */ .strip-ticker{background:var(--heading);color:#fff;height:40px;display:flex;align-items:center} .announcement-ticker .marquee__item, .strip-ticker .marquee__item{ display:inline-flex;align-items:center;gap:10px;padding:0 20px;white-space:nowrap; font-size:var(--fs-small);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-label); } .announcement-ticker .sep{display:none} /* Sale bar. Sits where the announcement ticker sat, same navy ground, so the 88px of chrome above the fold is unchanged. Navy rather than a red: red is not in this palette, and a red urgency band is the exact furniture the page spends twenty screens distancing itself from. Navy makes it read as the brand running a sale, not as a template running a tactic. */ .salebar{background:var(--heading);color:#fff} .salebar__inner{ display:flex;align-items:center;justify-content:center; gap:clamp(14px,4vw,34px);padding:6px clamp(14px,4vw,28px); } .salebar__label{display:flex;flex-direction:column;line-height:1.12} .salebar__label strong{font-size:15px;font-weight:700;letter-spacing:.02em} .salebar__label span{font-size:11px;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.72)} .salebar__clock{display:flex;align-items:flex-start;gap:5px;font-variant-numeric:tabular-nums} /* The days unit is toggled with the hidden attribute, and display:flex below beat it, so a zero-days clock rendered as "0 days : 03 hours". Attribute wins now. */ .salebar__unit[hidden],.salebar__sep[hidden]{display:none} /* FIXED width, not min-width. The units were sizing to their own labels, so "hours" made a wider column than "secs" and the four numbers sat at uneven intervals. */ .salebar__unit{display:flex;flex-direction:column;align-items:center;width:44px} .salebar__unit b{font-size:22px;font-weight:700;line-height:1} .salebar__unit span{font-size:10px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.72);margin-top:1px} .salebar__sep{font-size:20px;font-weight:700;line-height:1;opacity:.45;margin-top:1px} @media (min-width:750px){ .salebar__label strong{font-size:17px} .salebar__unit b{font-size:25px} .salebar__unit{width:50px} } /* trust bar under it */ .trust-bar{background:var(--bg-2);color:var(--text);min-height:72px;display:flex;align-items:center} .trust-bar .marquee__item{ display:inline-flex;align-items:center;gap:10px; padding:0 22px;white-space:nowrap;font-size:var(--fs-small);font-weight:600;line-height:1.2; } .trust-bar .stars{color:var(--star);letter-spacing:-1px;font-size:15px} .trust-bar .divider{width:1px;height:26px;background:rgba(18,18,18,.15)} .trust-bar .ico{width:20px;height:20px;flex:0 0 20px;color:var(--accent-1)} .trust-bar .two-line{display:flex;flex-direction:column;text-align:center} /* ========================= HEADER ========================= */ .site-header{ position:sticky;top:0;z-index:60;background:var(--bg-1); height:56px;display:flex;align-items:center; border-bottom:1px solid rgba(18,18,18,.07); } .site-header__inner{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center; width:100%;max-width:var(--page-width);margin:0 auto;padding:0 var(--gutter-mobile); } .header__icons{display:flex;align-items:center;gap:2px;justify-self:end;margin-right:-7px} .icon-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;transition:background var(--dur)} .icon-btn:hover{background:rgba(47,126,75,.1)} .icon-btn svg{width:20px;height:20px} /* Caps at open tracking, not bold-and-tight. Figtree 800 at negative tracking is the stock look every Shopify theme ships with; the letterspaced caps read as a deliberate mark and sit correctly beside the medical cross. */ .site-logo{font-size:17px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--heading);display:inline-flex;align-items:center;gap:9px;text-decoration:none} .site-logo__mark{width:20px;height:20px;flex:0 0 auto;color:var(--accent-1);margin-top:-1px} .header__burger{margin-left:-7px} .header__nav{display:none} @media (min-width:990px){ .page-width{padding:0 var(--gutter-desktop)} .site-header__inner{padding:0 var(--gutter-desktop)} .header__nav{display:flex;gap:26px;font-size:var(--fs-small);font-weight:600;letter-spacing:var(--ls-label)} .header__nav a:hover{color:var(--accent-1)} .header__burger{display:none} :root{--fs-h1:50px;--fs-h2:34px;--fs-h3:23px;--fs-body:17px;--fs-small:15px} } /* mobile drawer */ .drawer{position:fixed;inset:0;z-index:100;visibility:hidden;pointer-events:none} .drawer[open],.drawer.is-open{visibility:visible;pointer-events:auto} .drawer__overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity var(--dur)} .drawer.is-open .drawer__overlay{opacity:1} .drawer__panel{ position:absolute;top:0;bottom:0;left:0;width:min(86vw,360px);background:#fff; transform:translateX(-100%);transition:transform var(--dur-long) cubic-bezier(.25,.8,.3,1); padding:24px 22px;display:flex;flex-direction:column;gap:6px;overflow-y:auto; } .drawer--right .drawer__panel{left:auto;right:0;transform:translateX(100%)} .drawer.is-open .drawer__panel{transform:translateX(0)} .drawer__close{position:absolute;top:16px;right:16px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%} .drawer__link{padding:14px 0;border-bottom:1px solid rgba(18,18,18,.08);font-size:var(--fs-h3);font-weight:600;color:var(--heading)} /* ========================= BUTTONS ========================= */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:52px;padding:14px 24px;border-radius:var(--buttons-radius); font-size:var(--fs-label);font-weight:600;letter-spacing:var(--ls-label);text-align:center; transition:transform var(--dur),filter var(--dur);width:100%; } .btn:active{transform:scale(.985)} .btn--atc{background:var(--heading);color:#fff;text-transform:uppercase} .btn--atc:hover{filter:brightness(1.06)} .btn--outline{background:transparent;color:var(--accent-1);border:var(--buttons-border-width) solid var(--accent-1)} /* pulse on the main ATC — same attention pattern as the original */ /* Set by the cart module while a request is in flight. Styled rather than text-swapped, because the button contains the live price node. */ .btn.is-busy{opacity:.62;cursor:progress;pointer-events:none} .btn.is-busy.btn--pulse{animation:none} .btn--pulse{animation:atcPulse 2.6s ease-in-out infinite} @keyframes atcPulse{0%,100%{box-shadow:0 0 0 0 rgba(47,126,75,.45)}50%{box-shadow:0 0 0 12px rgba(47,126,75,0)}} @media (prefers-reduced-motion:reduce){.btn--pulse{animation:none}} /* -------- cart drawer: branded cover (12 Sep 2026) -------- The panel carries 24px/22px of padding, so the cover cancels it with negative margins to run full bleed. Change one and change the other. */ /* Built to the reference layout the brand supplied: logo, one pill, one row of trust marks, tight. Vertical rhythm is deliberately small (8px) because this sits above the cart contents and every pixel here pushes the line items and the checkout button further down the panel. */ .cartcover{ margin:-24px -22px 14px;padding:18px 20px 14px; background:var(--surface-quiet);border-bottom:1px solid var(--line); display:grid;justify-items:center;gap:8px;text-align:center; } /* The cover carries the HEADER lockup, not a second one. It used to set its own weight 800 / -1.5% tracking / sentence case, which is a different wordmark from the 600 / +13% / uppercase in the header, on the same screen. `.site-logo` does the work now and this only scales it up. */ .cartcover__logo{font-size:18px;gap:9px} .cartcover__logo .site-logo__mark{width:23px;height:23px;flex:0 0 23px} /* Avatar pill. The white ring is what makes three overlapping circles read as three separate faces rather than one smear, which is the whole reason the reference layout works. Same construction as the checkout banner's pill, drawn there with Path2D. THE AVATARS ARE PETS AND THE LABEL IS A PROPERTY, NOT A COUNT - see the markup. */ .cartcover__pets{ display:inline-flex;align-items:center;gap:8px; margin:0;padding:4px 13px 4px 5px; background:var(--tint-chip);border-radius:var(--pill-radius); } .cartcover__avatars{display:inline-flex;align-items:center} .cartcover__avatars img{ width:24px;height:24px;border-radius:50%;object-fit:cover; border:2px solid #fff;display:block; } .cartcover__avatars img+img{margin-left:-8px} .cartcover__petstxt{ font-size:12px;font-weight:800;letter-spacing:.03em; text-transform:uppercase;color:var(--heading); } /* The chip states a property of the product, not a count of customers. */ .cartcover__chip{ display:inline-flex;align-items:center;gap:6px; background:transparent;color:var(--text-60); border-radius:var(--pill-radius);padding:0; font-size:12px;font-weight:600;letter-spacing:.01em; } .cartcover__chip .ico{width:14px;height:14px;color:var(--accent-2);flex:0 0 14px} /* One row, icon beside label, hairline chips - the reference puts all three on a single line and that is what makes it read as a strip rather than three stacked features. Labels are two words each so they hold one line down to 330px. */ .cartcover__trust{ display:flex;justify-content:center;flex-wrap:nowrap;gap:12px; font-size:11px;font-weight:600;color:var(--text-60);line-height:1; } .cartcover__trust li{display:inline-flex;align-items:center;gap:5px;white-space:nowrap} /* Hairline between the three, instead of a box around each: three bordered chips need 357px against the 316px of panel a 390px phone gives, so they wrapped 2+1. Borderless with a divider is the same strip at 301px, and it reads tighter, which is the ask. */ .cartcover__trust li+li{border-left:1px solid var(--line);padding-left:12px} .cartcover__trust .ico{width:14px;height:14px;color:var(--heading);flex:0 0 14px} .cart__heading{font-size:18px;font-weight:700;color:var(--heading);margin:0 0 2px} .cart__empty{padding:10px 0 2px;font-size:14px;color:var(--text-60);display:grid;gap:7px} .cart__empty p:first-child{font-weight:700;color:var(--text)} /* ⚠ MUST come after .cart__empty. The UA sheet's [hidden]{display:none} loses to any author rule that sets display, and .cart__empty sets display:grid — so without this the empty state stayed visible ABOVE the line items the moment the cart filled. Any future `display` on an element toggled via .hidden needs the same guard. */ .cart__empty[hidden]{display:none} /* Mouse-drag on the horizontal rails (funnel.js module 13). Touch is untouched: a finger already swipes these natively, and this only exists because a cursor drag does nothing to a scroll-snap container, which made the strips look frozen on desktop and in the _tools/mobile.html device preview. */ .is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none} .is-dragging img{pointer-events:none} /* Wordmark image (assets/img/brand/nativa-wordmark.png, 1056x420, 3x). Replaces the old uppercase text + mark lockup in the header and the cart cover. */ .site-logo__img{height:30px;width:auto;display:block} .cartcover__logo .site-logo__img{height:36px} /* Announcement bar, set to the reference header: static (no marquee), brand green, two centred lines, the offer in bold. "Buy 2 Get 1 FREE" is the real tier-2 offer in the buy box, so the banner and the cart agree. */ .announce-bar{background:var(--accent-2);color:#fff;text-align:center;padding:5px 12px 6px} .announce-bar p{margin:0;line-height:1.3} .announce-bar__top{font-size:17px;font-weight:400;letter-spacing:.04em;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.14)} .announce-bar__top u{text-underline-offset:3px;text-decoration-thickness:1px} .announce-bar__offer{font-size:17px;font-weight:700;letter-spacing:.02em;padding-top:3px} @media (min-width:750px){.announce-bar__top,.announce-bar__offer{font-size:18px}} /* Header to the reference proportions: taller bar, larger centred logo, thin black line icons. */ .site-header .icon-btn svg{color:#121212;stroke-width:1.5} @media (max-width:749px){ .site-header .site-logo__img{height:36px} } .site-header{height:64px} .site-header .icon-btn{width:40px;height:40px} .site-header .icon-btn svg{width:26px;height:26px} /* Header wordmark = the NATIVA mark from the bottle label (604x237, transparent). */ .site-header .site-logo__img{height:40px} @media (min-width:750px){.site-header .site-logo__img{height:44px}} .cartcover__logo .site-logo__img{height:40px}