/* ========================================================================== Wagö — pet supplements -------------------------------------------------------------------------- 00 Tokens 01 Reset and base 02 Announcement, header, nav 03 Buttons, links, shared bits 04 Wordmark 05 Pouch (drawn, with live lettering) 06 Photography 07 Hero 08 Our Supplements 09 Ingredients 10 Why pet parents choose Wagö 11 Trust row 12 Newsletter 13 Footer 14 Motion 15 Responsive ========================================================================== */ /* 00 Tokens ============================================================== Hexes below were read off img/reference.webp by scanning small patches and taking the median of the flattest one, so each is a colour that actually exists on the comp rather than a blend of a region. */ :root { /* Ground and ink */ --pine: #265054; /* announcement bar, headings, buttons */ --pine-deep: #17393C; /* only ever used to tint shadows */ --cream: #FEF3E2; /* hero ground — sampled off hero-pets.webp */ --white: #FEFEFE; /* the "white" sections are not pure white */ --band: #FBEDD7; /* accordion band — sampled off why-pets.webp */ --sage: #E4ECE7; /* four-icon trust row */ --sage-2: #E3EBE4; /* newsletter band, a hair cooler */ --mint-soft: #EDF2EE; /* blob behind the ingredients pouch */ --row-open: #E9EEEA; /* the open accordion row */ /* Product tints, in comp order */ --tint-1: #ECF1ED; --tint-2: #FBF4E8; --tint-3: #FDF1E7; /* Pouch faces */ --pouch-1: #97BAB1; --pouch-2: #F0DABB; --pouch-3: #E99677; /* Accents */ --coral: #E8926F; --teal: #5DA89E; --tan: #EBBF8B; /* Type colours */ --ink: #265054; --body: #37474A; --muted: #64777A; /* One measure for the whole page. The gutter is derived from it so a decorative shape can bleed to the viewport edge without a second guess. */ --shell: min(1200px, 100% - 96px); --gut: max(48px, calc((100vw - 1200px) / 2)); --r-pill: 999px; --r-card: 22px; --r-row: 14px; --r-panel: 28px; /* Two terms, both tinted with the palette's own darkest ink. A black shadow on a cream ground reads as dirt. */ --sh-card: 0 1px 2px rgba(23, 57, 60, .06), 0 14px 32px -12px rgba(23, 57, 60, .16); --sh-lift: 0 2px 4px rgba(23, 57, 60, .08), 0 24px 48px -16px rgba(23, 57, 60, .22); --sh-pouch: 0 2px 3px rgba(23, 57, 60, .10), 0 20px 34px -14px rgba(23, 57, 60, .28); --sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --display: 'Nunito', 'Nunito Sans', system-ui, sans-serif; } /* 01 Reset and base ====================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--white); color: var(--body); font-family: var(--sans); font-size: 16px; line-height: 1.62; -webkit-font-smoothing: antialiased; /* clip, not hidden: hidden on would make the sticky header scroll. */ overflow-x: clip; } svg { display: block; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button, input { font: inherit; color: inherit; } h1, h2, h3, p, ul, figure, figcaption { margin: 0; } ul { padding: 0; list-style: none; } h1, h2, h3 { font-family: var(--display); font-weight: 800; color: var(--ink); line-height: 1.16; letter-spacing: -.01em; } .shell { width: var(--shell); margin-inline: auto; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } :focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: 14px; top: -64px; z-index: 120; padding: 10px 20px; border-radius: var(--r-pill); background: var(--pine); color: #fff; font-size: 14px; font-weight: 700; transition: top .18s ease; } .skip-link:focus-visible { top: 12px; } /* 02 Announcement, header, nav =========================================== */ .announce { background: var(--pine); color: #F4FAF8; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .012em; padding: 9px 20px; } .site-header { /* Transparent at the top of the page, solid once scrolled. The hero is pulled up by the bar's own height, so at rest there IS something behind the links — which is the whole reason the scrolled state cannot also be see-through. */ position: sticky; top: 0; z-index: 60; background: transparent; backdrop-filter: none; transition: background-color .25s ease, box-shadow .25s ease; } .site-header.is-stuck, .site-header.is-open { /* Solid, not glass — this site is light. A translucent bar over a light page was letting the page's own imagery through the nav links, and the blur was only there to rescue legibility the opacity had taken away. The dark samples keep their glass: over a dark ground the effect reads as depth rather than as interference. No backdrop-filter behind an opaque background — it blurs what nobody can see and still costs a layer. */ background: var(--white); box-shadow: 0 1px 0 rgba(38, 80, 84, .08), 0 10px 26px -18px rgba(23, 57, 60, .5); } .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 74px; gap: 16px; } .nav__left { display: flex; align-items: center; gap: 6px; } .nav__right { display: flex; align-items: center; gap: 6px; justify-content: flex-end; } .iconbtn { position: relative; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background .16s ease; } .iconbtn:hover { background: var(--tint-1); } .iconbtn svg { width: 23px; height: 23px; } .iconbtn__badge { position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-pill); background: var(--coral); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; } .nav__burger { display: grid; align-content: center; gap: 4px; width: 42px; height: 42px; padding: 0 9px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; } .nav__burger:hover { background: var(--tint-1); } .nav__burger span { display: block; height: 2.4px; border-radius: 2px; background: var(--ink); transition: width .18s ease; } /* The comp's burger is three staggered rules, not three equal ones. */ .nav__burger span:nth-child(1) { width: 100%; } .nav__burger span:nth-child(2) { width: 74%; } .nav__burger span:nth-child(3) { width: 88%; } .nav__burger[aria-expanded="true"] span:nth-child(2), .nav__burger[aria-expanded="true"] span:nth-child(3) { width: 100%; } .brand { justify-self: center; display: block; } /* The primary links live behind the burger at every width, as in the comp — the header shows only the wordmark and the four glyphs. */ .nav__panel { grid-column: 1 / -1; display: none; padding: 6px 0 18px; border-top: 1px solid var(--tint-1); } .nav__panel.is-open { display: grid; } .nav__panel a { padding: 11px 4px; font-family: var(--display); font-weight: 700; color: var(--ink); } .nav__panel a:hover { color: var(--coral); } /* 03 Buttons, links, shared bits ========================================= */ .btn { display: inline-block; padding: 18px 42px; /* box = .745 of the h1's line pitch, was .679 */ border-radius: var(--r-pill); background: var(--pine); color: #FBFDFC; font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; box-shadow: var(--sh-card); transition: transform .18s ease, background .18s ease, box-shadow .18s ease; } .btn:hover { background: #1E4448; transform: translateY(-2px); box-shadow: var(--sh-lift); } .link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); } .link svg { width: 19px; height: 19px; transition: transform .2s ease; } .link:hover svg { transform: translateX(5px); } .ticks { position: absolute; } .ticks--coral { color: var(--coral); } .ticks--mint { color: #9FC7BF; } /* Section dividers. One wave symbol, recoloured per instance — the fill is currentColor so `color` alone decides which band it belongs to. */ .wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(48px, 6vw, 88px); } .wave--white { color: var(--white); } .wave--cream { color: var(--band); } .wave--inbox { color: var(--sage-2); height: clamp(34px, 4vw, 56px); } /* 04 Wordmark ============================================================ Live text, not an image, so it stays crisp and selectable. The umlaut on the "o" is the paw glyph, sized off the font so it tracks the type. */ .wordmark { display: inline-block; font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -.03em; color: var(--ink); } .wordmark__o { position: relative; display: inline-block; } .wordmark__o svg { position: absolute; left: 50%; bottom: 100%; width: .46em; height: .46em; margin-bottom: -.24em; transform: translateX(-50%); fill: currentColor; } /* 05 Pouch =============================================================== Drawn, not photographed: a rounded box with a heat-sealed top, a gusset shaded down one side, and live HTML lettering over it. Everything inside sizes in `em`, so setting `font-size` on .pouch scales the whole object — that is how the same component serves the hero, the cards and the ingredients still-life at three different sizes. */ .pouch { position: relative; width: 20em; aspect-ratio: 200 / 262; padding: 3.6em 1.6em 1.4em; display: flex; flex-direction: column; align-items: center; border-radius: 1.2em 1.2em 2em 2em / .9em .9em 2.6em 2.6em; font-size: 10px; text-align: center; box-shadow: var(--sh-pouch); isolation: isolate; } /* Gusset shading: bright down the middle, shadowed at both folded edges. */ .pouch--multi { background: linear-gradient(97deg, #82A9A0 0 3%, var(--pouch-1) 16%, #A6C6BE 46%, var(--pouch-1) 82%, #82A9A0 100%); } .pouch--joint { background: linear-gradient(97deg, #DFC7A2 0 3%, var(--pouch-2) 16%, #F7E7CD 46%, var(--pouch-2) 82%, #DFC7A2 100%); } .pouch--skin { background: linear-gradient(97deg, #D7825F 0 3%, var(--pouch-3) 16%, #F0A88C 46%, var(--pouch-3) 82%, #D7825F 100%); } /* The heat seal across the top, with the zip line under it. */ .pouch__seal { position: absolute; left: .5em; right: .5em; top: .5em; height: 1.5em; border-radius: .7em .7em .2em .2em; background: rgba(23, 57, 60, .07); } .pouch__seal::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: .34em; height: 1px; background: rgba(23, 57, 60, .18); } .wordmark--pouch { font-size: 4.4em; color: #16383A; margin-bottom: .12em; } .pouch__name { font-family: var(--display); font-size: 1.85em; font-weight: 800; line-height: 1.14; letter-spacing: .012em; text-transform: uppercase; color: #16383A; } .pouch__kind { font-family: var(--display); font-size: 1.15em; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: rgba(22, 56, 58, .74); margin-top: .35em; } .pouch__claim { margin-top: 1.15em; padding: .5em .9em; border: 1px solid rgba(22, 56, 58, .34); border-radius: var(--r-pill); /* Sized to leave real margin, which it did not have before. The pouch is entirely em-based, so the claim's width as a fraction of the pouch is the SAME at every screen size — 1.12 for the skin variant, meaning it was always wider than its padding box, at 1920 exactly as much as at 320. It only looked acceptable because it still fell inside the pouch's outer edge by a few px; on a phone, where that slack is about 3px, real font rasterisation closes it and the pill visibly overhangs. "Healthy Skin & Shiny Coat" is the longest of the three claims and drives these numbers; joint measured .96 and was one glyph from the same fate. */ font-size: .86em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(22, 56, 58, .82); white-space: nowrap; } /* Three benefit seals along the bottom of the face. At this scale they read as marks, so they are drawn rather than labelled. */ .pouch__marks { display: flex; gap: 1.5em; margin-top: auto; padding-bottom: .7em; } .pouch__marks i { display: block; width: 2.2em; height: 2.2em; border-radius: 50%; border: 1px solid rgba(22, 56, 58, .42); background: radial-gradient(circle at 50% 50%, rgba(22, 56, 58, .55) 0 22%, transparent 23%), radial-gradient(circle at 50% 50%, transparent 0 42%, rgba(22, 56, 58, .34) 43% 52%, transparent 53%); } .pouch__net { padding: .3em 1.1em; border-radius: var(--r-pill); background: rgba(22, 56, 58, .82); color: #F6FBF9; font-size: .82em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } /* Soft contact shadow on the ground under a free-standing pouch. */ .pouch--ground::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: -4%; height: 8%; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(23, 57, 60, .17), transparent 70%); z-index: -1; } /* 06 Photography ========================================================= Both animal plates are photographed on the exact ground they land on, and ship as opaque rectangles. Nothing is cut out. A matte on this much curly fur fringes at the edge, and the fringe reads as a pale halo the moment the plate sits on a coloured page — the same failure the Lumière set hit. The consequence, and the reason --cream and --band carry the values they do: the page follows the photograph, not the other way round. Both vars were sampled off the delivered files. Nudge either one and the plate stops dissolving and starts being a rectangle. */ .hero__pets, .why__pets { display: block; width: 100%; height: auto; } /* 07 Hero ================================================================ */ .hero { position: relative; background: var(--cream); /* Up behind the 74px bar, with the height given back as padding. */ margin-top: -74px; padding-block: calc(74px + clamp(36px, 5vw, 70px)) clamp(120px, 15vw, 210px); overflow: clip; } /* The comp's mint blob is baked into hero-pets.webp rather than drawn here. A CSS blob bleeding to the viewport edge cannot coexist with an opaque plate: wherever the two overlap the plate's cream wins, and the blob ends at an invisible vertical line. Baked, it stays behind the animals where the comp puts it, at every width, for free. */ .hero__frond { position: absolute; left: calc(var(--gut) * -.55); bottom: clamp(60px, 9vw, 130px); /* 140/120 of the old width: the viewBox grew sideways to stop clipping the third leaf, so the same CSS width would have drawn a smaller frond. */ width: clamp(140px, 15.2vw, 222px); height: auto; opacity: .9; pointer-events: none; } /* Even columns, not 0.92/1.08. The heading is the reason: at .92fr the copy column is 526px at 1440, and "For Happy Paws" needs 587 at the size the iteration draws it, so it wrapped to a third line. The iteration gives its copy column about 45% of the page against our 36.5%; an even split plus a tighter gap gets to 576, which holds the heading on two lines down to the breakpoint. It costs the stage column 42px, and the plate is mostly cream, so what actually shrinks is smaller than that number looks. */ .hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 3.4vw, 48px); } /* Everything in this block is set from measurements off wago-ai.png — the generated iteration of the same design — taken as fractions of the PAGE WIDTH and as multiples of the h1's own line pitch, both of which survive the fact that the two images are at different zooms. Where a heading appears in both, the string is identical, so the ink-width ratio is the type-size ratio. Its section h2s came out level with ours (0.91 / 1.07 / 0.96 on "Our Supplements", "ingredients you can trust", "Why Pet Parents"), so the rest of the page is left alone. The hero is where it differs, and it differs in one direction: the heading is bigger and everything under it is bigger still, relative to the heading. */ .hero__title { position: relative; /* 41.6% of the page width against our 34.7% would put this at 80px. It does not fit: measured, "For Happy Paws" is 579px at 78 and 563 at 76 against a 576px column, so 76 is the ceiling and the iteration's x1.20 becomes x1.12. Reaching the rest of it would need a wider shell, and the shell is shared with every section below — which measured level with the iteration and so is left alone. The remaining difference is carried by the sub, the pills and the gaps, which is where most of it was anyway. 5.6vw, not 6.2: the column narrows faster than the type does, and 6.2 crossed it again at around 1100. */ font-size: clamp(46px, 5.6vw, 76px); line-height: 1.08; letter-spacing: -.022em; } .hero__title .ticks { top: -.12em; right: -.02em; width: clamp(26px, 2.6vw, 38px); height: auto; } .hero__sub { max-width: 40ch; /* .49 of the h1's line pitch. This is measured from INK to INK, and the h1's own leading below its last line counts toward it — which is why growing the heading from 68 to 76 pushed the join from .397 straight past the target to .654 without this number moving at all. 29px lands it back on .49. */ margin-top: clamp(18px, 2vw, 29px); /* Solved, not guessed: on the same 46-character line the sub measures .885 of the h1's width in the iteration and .749 in ours, so its size relative to the heading is 1.18x what we had. .287 x 80px = 23. */ font-size: clamp(17px, 1.55vw, 22px); color: var(--body); } /* The one measurement that came back level: the button's box is .745 of the h1's line pitch there and .740 here, and the gap above it .490 against .507. Left alone. */ .hero .btn { margin-top: 30px; } .hero__pills { display: flex; align-items: center; gap: clamp(20px, 3vw, 38px); margin-top: clamp(40px, 5.3vw, 71px); /* .92 of the h1's pitch, was .86 */ } .hero__pills li { display: grid; justify-items: center; gap: 10px; text-align: center; font-family: var(--display); font-size: clamp(14px, 1.25vw, 18px); /* .275 of the h1's pitch, was .233 */ font-weight: 700; line-height: 1.28; color: var(--ink); } .hero__pills li + li { padding-left: clamp(20px, 3vw, 38px); border-left: 1px solid rgba(38, 80, 84, .2); } .hero__pills svg { width: clamp(34px, 2.7vw, 39px); height: auto; color: var(--ink); } .hero__stage { position: relative; } .hero__stage .ticks--mint { right: -2%; bottom: 34%; width: clamp(28px, 2.8vw, 42px); height: auto; } /* The plate fills the stage column outright. It is mostly cream, and cream is free here — the surplus is the same colour as the section, so only the animals and the blob read as content. The negative bottom margin, with the pouch row's own -8%, is what puts the pouches in front of the animals' forelegs the way the comp does. */ .hero__pets { margin-bottom: -12%; } .pouch-row { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; gap: clamp(6px, .9vw, 14px); margin-top: -8%; } .pouch-row .pouch { font-size: clamp(6.2px, .72vw, 9.4px); } /* The comp stands the coral pouch a step shorter than its neighbours. */ .pouch-row .pouch--skin { font-size: clamp(5.6px, .65vw, 8.5px); } /* 08 Our Supplements ===================================================== */ .supplements { background: var(--white); padding-block: clamp(6px, 1vw, 14px) clamp(56px, 7vw, 96px); } .section-head { position: relative; text-align: center; padding-block: clamp(10px, 2vw, 26px) clamp(28px, 4vw, 48px); } .section-head__paw { width: 30px; height: 30px; margin: 0 auto 14px; fill: var(--teal); } .section-head h2 { font-size: clamp(30px, 3.4vw, 44px); } .section-head p { margin-top: 10px; font-size: 16px; color: var(--body); } /* Flanking illustrations. They are ornament, so they leave at 1024 rather than crowd the heading. */ .section-head__pet { position: absolute; bottom: 8%; width: clamp(130px, 14vw, 200px); height: auto; } .section-head__pet--l { left: 0; } .section-head__pet--r { right: 0; } .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); } .card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(14px, 1.6vw, 26px); padding: clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 28px); border-radius: var(--r-card); transition: transform .2s ease, box-shadow .2s ease; } .card--multi { background: var(--tint-1); } .card--joint { background: var(--tint-2); } .card--skin { background: var(--tint-3); } .card:hover { transform: translateY(-3px); box-shadow: var(--sh-card); } .card .pouch { font-size: clamp(4.8px, .58vw, 7.4px); } .card__body h3 { font-size: clamp(17px, 1.35vw, 20px); } .card__body > p { margin-top: 12px; font-size: 14.5px; color: var(--body); } .card__price { margin-top: 10px; font-family: var(--display); font-size: 17px; font-weight: 800; color: var(--ink); } .card__price span { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--muted); } .card .link { margin-top: 16px; } /* 09 Ingredients ========================================================= */ .ingredients { position: relative; background: var(--white); padding-block: clamp(30px, 4vw, 56px) clamp(110px, 13vw, 180px); overflow: clip; } .ingredients__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(28px, 4vw, 60px); } .ingredients__copy h2 { font-size: clamp(28px, 2.9vw, 38px); line-height: 1.32; } /* The comp sets the second line as its own block with a little air above. */ .ingredients__copy h2 span { display: inline-block; margin-top: .34em; } .ingredients__copy > p { max-width: 36ch; margin-top: 18px; font-size: 15px; color: var(--body); } .minis { display: flex; gap: clamp(18px, 2.4vw, 34px); margin-top: clamp(28px, 3.4vw, 44px); } .minis li { display: grid; justify-items: center; gap: 12px; text-align: center; font-size: 13px; line-height: 1.35; color: var(--body); } .mini__disc { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--tint-2); } .mini__disc svg { width: 27px; height: 27px; color: var(--ink); } .ingredients__stage { position: relative; display: grid; justify-items: center; padding-top: 12px; } .ingredients__blob { position: absolute; top: -14%; right: calc(var(--gut) * -.5); width: clamp(240px, 26vw, 380px); height: auto; z-index: 0; } .ingredients__stage .pouch { position: relative; z-index: 2; font-size: clamp(7px, .82vw, 11px); } .stilllife { position: relative; z-index: 3; width: min(88%, 420px); height: auto; margin-top: -14%; } .seal { position: absolute; z-index: 4; top: 0; right: 4%; width: clamp(72px, 8vw, 108px); height: auto; filter: drop-shadow(0 8px 18px rgba(23, 57, 60, .18)); } .seal__ring { font-family: var(--display); font-size: 9.4px; font-weight: 700; letter-spacing: .1em; } .seal__word { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .06em; } .seal__word--big { font-size: 22px; font-weight: 800; letter-spacing: .02em; } /* 10 Why pet parents choose Wagö ========================================= */ .why { position: relative; background: var(--band); padding-block: clamp(20px, 3vw, 40px) clamp(50px, 6vw, 84px); } .why__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(28px, 4vw, 60px); } .why__stage { position: relative; } .why__heart { position: absolute; top: -6%; left: 12%; width: clamp(24px, 2.4vw, 34px); height: auto; color: var(--coral); z-index: 2; } .why__paw { position: absolute; top: -9%; left: 27%; width: clamp(20px, 2vw, 28px); height: auto; fill: #F0E3CD; z-index: 2; } .why__copy h2 { position: relative; display: inline-block; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.28; } .why__pawmark { display: inline-block; width: .78em; height: .78em; margin-left: .22em; vertical-align: -.02em; fill: #BFCFC7; } .acc { margin-top: clamp(20px, 2.6vw, 32px); display: grid; gap: 9px; } .acc__row { border-radius: var(--r-row); background: var(--white); box-shadow: 0 1px 2px rgba(23, 57, 60, .05); transition: background .18s ease; } .acc__row[open] { background: var(--row-open); box-shadow: none; } .acc__row summary { display: flex; align-items: center; gap: 13px; padding: 13px 18px; cursor: pointer; list-style: none; } .acc__row summary::-webkit-details-marker { display: none; } .acc__disc { flex: none; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--pine); color: #fff; transition: background .18s ease; } .acc__disc svg { width: 15px; height: 15px; } .acc__row[open] .acc__disc { background: var(--coral); } .acc__label { flex: 1; font-family: var(--display); font-size: 14.5px; font-weight: 700; color: var(--ink); } /* Plus that loses its upright stroke when the row opens. */ .acc__sign { position: relative; flex: none; width: 15px; height: 15px; } .acc__sign::before, .acc__sign::after { content: ""; position: absolute; inset: 50% 0 auto; height: 1.8px; border-radius: 2px; background: var(--ink); transform: translateY(-50%); } .acc__sign::after { transform: translateY(-50%) rotate(90deg); } .acc__row[open] .acc__sign::after { opacity: 0; } .acc__row p { padding: 0 18px 17px 56px; font-size: 14px; line-height: 1.6; color: var(--muted); } /* 11 Trust row =========================================================== */ .trust { position: relative; background: var(--sage); padding-block: clamp(38px, 4.6vw, 62px) clamp(56px, 7vw, 92px); } .trust__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); text-align: center; } .trust__row svg { width: 32px; height: 32px; margin: 0 auto 16px; color: var(--ink); } .trust__row h3 { font-size: 15px; font-weight: 700; } .trust__row p { margin-top: 4px; font-size: 13.5px; color: var(--muted); } /* 12 Newsletter ========================================================== */ .inbox { position: relative; background: var(--sage-2); padding-block: clamp(34px, 4vw, 56px) clamp(46px, 6vw, 72px); overflow: clip; } .inbox__frond { position: absolute; width: clamp(128px, 14vw, 198px); /* see .hero__frond */ height: auto; opacity: .85; pointer-events: none; } .inbox__frond--l { left: calc(var(--gut) * -.6); bottom: 8%; } .inbox__frond--r { right: calc(var(--gut) * -.6); bottom: -14%; transform: scaleX(-1); } .inbox__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1fr) minmax(0, .72fr); align-items: center; gap: clamp(16px, 2.6vw, 40px); } .inbox__pet { width: 100%; max-width: 240px; height: auto; } /* Both animals face the copy, so the eye is walked inwards to the field. */ .inbox__pet--l { justify-self: start; } .inbox__pet--r { justify-self: end; } .inbox__copy h2 { font-size: clamp(24px, 2.5vw, 32px); } .inbox__copy > p { max-width: 38ch; margin-top: 10px; font-size: 14.5px; color: var(--body); } /* One pill containing the field and the button, as in the comp. */ .signup { display: flex; align-items: center; max-width: 420px; margin-top: 22px; padding: 5px 5px 5px 6px; border-radius: var(--r-pill); background: var(--white); box-shadow: var(--sh-card); } .signup input { flex: 1; min-width: 0; padding: 11px 14px; border: 0; background: transparent; font-size: 14.5px; } .signup input::placeholder { color: #93A3A2; } .signup input:focus-visible { outline-offset: -2px; } .signup button { flex: none; padding: 12px 26px; border: 0; border-radius: var(--r-pill); background: var(--pine); color: #FBFDFC; font-family: var(--display); font-size: 12.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; cursor: pointer; transition: background .18s ease; } .signup button:hover { background: #1E4448; } /* 13 Footer ============================================================== */ .site-footer { background: var(--pine); color: #CEDCD9; padding-block: 30px; font-size: 13px; } .site-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; } .site-footer__brand { display: flex; align-items: center; gap: 16px; } .site-footer__brand .wordmark { font-size: 26px; color: #FBFDFC; } .site-footer__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; } .site-footer a:hover { color: #fff; text-decoration: underline; } /* 14 Motion ============================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .btn:hover, .card:hover { transform: none; } } /* 15 Responsive ========================================================== 768 is the width that breaks: the hero and the two split sections go to one column there, and the flanking ornament comes out. */ @media (max-width: 1180px) { :root { --shell: min(1200px, 100% - 72px); --gut: max(36px, calc((100vw - 1200px) / 2)); } .section-head__pet { width: clamp(110px, 12vw, 150px); } } @media (max-width: 1024px) { .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); } .section-head__pet { display: none; } .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card--skin { grid-column: 1 / -1; max-width: calc(50% - 12px); } .why__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .inbox__grid { grid-template-columns: minmax(0, .6fr) minmax(0, 1fr) minmax(0, .6fr); } .minis { gap: 18px; } } @media (max-width: 860px) { .hero__grid, .ingredients__grid, .why__grid { grid-template-columns: minmax(0, 1fr); } .hero__grid { gap: clamp(28px, 6vw, 48px); } .hero__stage { max-width: 560px; margin-inline: auto; width: 100%; } .pouch-row .pouch { font-size: clamp(6px, 1.5vw, 9px); } .pouch-row .pouch--skin { font-size: clamp(5.4px, 1.35vw, 8.2px); } .ingredients__stage { max-width: 520px; margin-inline: auto; width: 100%; } .ingredients__stage .pouch { font-size: clamp(8px, 2vw, 11px); } .why__stage { max-width: 520px; margin-inline: auto; width: 100%; } .cards { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } .card--skin { grid-column: auto; max-width: none; } .card .pouch { font-size: clamp(5px, 1.3vw, 6.6px); } .trust__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; } .inbox__grid { grid-template-columns: minmax(0, 1fr); text-align: center; } .inbox__copy > p { margin-inline: auto; } .signup { margin-inline: auto; } .inbox__pet { max-width: 190px; } .inbox__pet--l { justify-self: center; } .inbox__pet--r { display: none; } } @media (max-width: 640px) { :root { --shell: min(1200px, 100% - 40px); --gut: max(20px, calc((100vw - 1200px) / 2)); } .nav { min-height: 64px; } /* The strip sits under the status bar with the floating header beneath it, so it needs room below the words — same as Lumière's ticker. */ .announce { padding: 9px 20px 13px; } .wordmark { font-size: 28px; } .hero { padding-bottom: clamp(90px, 22vw, 130px); } .hero__title { font-size: clamp(34px, 9vw, 46px); } .hero__pills { gap: 18px; } .hero__pills li + li { padding-left: 18px; } .hero__frond { width: 100px; bottom: 46px; left: -34px; } .minis { flex-wrap: wrap; justify-content: flex-start; gap: 20px 24px; } .mini__disc { width: 48px; height: 48px; } .card { grid-template-columns: auto minmax(0, 1fr); gap: 16px; } .card .pouch { font-size: 5.4px; } .acc__row summary { padding: 12px 14px; gap: 11px; } .acc__label { font-size: 13.5px; } .acc__row p { padding: 0 14px 15px 50px; font-size: 13.5px; } .signup { flex-wrap: wrap; border-radius: 22px; padding: 8px; } .signup input { flex-basis: 100%; } .signup button { width: 100%; margin-top: 6px; } .site-footer__row { flex-direction: column; align-items: flex-start; text-align: left; } .site-footer__brand { flex-direction: column; align-items: flex-start; gap: 8px; } } @media (max-width: 420px) { .section-head h2 { font-size: 27px; } .trust__row { gap: 26px 12px; } .trust__row h3 { font-size: 14px; } .seal { width: 64px; right: 0; } }