/* ================================================================== PAWFECTLY POLISHED - example site 4, cloned from Veloura (Product-Catalog Blueprint) plus grooming and booking. wd-pp-s1, FIRST DRAFT. Palette and type are BRAND-KIT.md. Layout decisions are DESIGN.md. >> Veloura's rgba() literals were swapped value-for-value to this palette. ================================================================== */ *{box-sizing:border-box;margin:0;padding:0} :root{ /* dark ground - heroes, section backgrounds, footer */ --ink:#1B2340; --ink-2:#27304F; --ink-3:#36406A; /* light ground - product areas */ --cream:#FFF6EC; --sand:#F6E3CF; --shell:#FDEEE2; /* accents - raspberry is the button, sunshine is the standout, mint is the third */ --clay:#F0567E; --amber:#FFC83D; --blush:#FFD3DE; --mint:#7ED9B6; --blush-lt:#FFEEF2; /* the pale blush ground - Book page and Good to know */ --peri-lt:#ECEFF8; /* the pale periwinkle ground - the shop's category pages */ --clay-deep:#C23A5E; /* raspberry darkened for type on cream */ /* text */ --on-dark:#FFF8F0; --on-light:#1E2235; --on-light-soft:#5F6478; --line:rgba(30,34,53,.14); --line-dark:rgba(255,248,240,.16); --display:'Fredoka',system-ui,sans-serif; /* rounded and friendly - the Woof Gang feel */ --body:'Nunito',system-ui,sans-serif; --pad:clamp(20px,5vw,64px); } html{background:var(--ink);scroll-behavior:smooth} body{background:var(--ink);color:var(--on-dark);font-family:var(--body);font-weight:400; -webkit-font-smoothing:antialiased;overflow-x:hidden} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} /* display face is display only - these faces go muddy under ~20px (BRAND-KIT) */ .hero-h1,.deck-h2,.wordmark{font-family:var(--display);font-weight:600} .kicker{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase; color:var(--on-dark);opacity:.82} .kicker-dark{color:var(--on-light);opacity:.6} /* ---------------- NAV ---------------- Transparent over the hero, solid once past it - the Gucci behaviour. */ .nav{position:fixed;top:0;left:0;right:0;z-index:50; display:flex;align-items:center;justify-content:space-between; padding:22px var(--pad); transition:background .3s ease,border-color .3s ease,padding .3s ease} .nav.is-solid{background:rgba(27,35,64,.92);backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-dark);padding:14px var(--pad)} /* THE WORDMARK - lowercase, the brush standing between the two words the way the pampered chef spoon does. Second line is the small caps descriptor. Draft 1. */ .wordmark{display:inline-flex;flex-direction:column;align-items:center;line-height:1} .wm-main{display:inline-flex;align-items:center;font-size:24px;letter-spacing:-.01em} .wm-brush{height:1.5em;width:auto;margin:0 .1em;transform:translateY(.02em) rotate(10deg)} .wm-sub{font-family:var(--body);font-size:8.5px;font-weight:800;letter-spacing:.24em; text-transform:uppercase;margin-top:5px;opacity:.82} .nav-links{display:flex;gap:26px;align-items:center;font-size:14px;font-weight:600;letter-spacing:.02em} .nav-links a{opacity:.86;padding:6px 0} @media (hover:hover) and (pointer:fine){.nav-links a:hover{opacity:1}} /* the one standout on the bar - Veloura's amber Creators link, here the booking pill */ .nav-creators{color:var(--ink);background:var(--amber);opacity:1!important; padding:8px 16px!important;border-radius:999px;font-weight:800; box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.14)} .nav-links a.is-here{opacity:1;text-decoration:underline;text-underline-offset:6px} /* >> BOTH ARE PHONE-ONLY AND THIS IS WHAT KEEPS THEM OFF THE LAPTOP. `display:none` here means neither is a flex item in the desktop bar at all, so the desktop nav is untouched rather than overridden. Everything about them lives in the max-width:700px block. */ .burger,.nav-panel{display:none} /* ---------------- HERO ---------------- */ .hero{position:relative;height:100svh;min-height:560px;overflow:hidden; display:flex;align-items:flex-end} .hero picture{display:contents} /* the is a source-picker, never a box */ .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} /* the image is dark bottom-left already; this only guarantees it */ .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to top,rgba(27,35,64,.72) 0%,rgba(27,35,64,.25) 42%,transparent 70%)} .hero-copy{position:relative;z-index:2;padding:0 var(--pad) clamp(48px,9vh,110px);max-width:860px} /* text on a photograph - the 7 Star treatment: colour, weight, shadow together */ .hero .kicker{text-shadow:0 1px 8px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.7)} .hero-h1{font-size:clamp(2.6rem,6.4vw,5.2rem);line-height:1.02;margin:18px 0 16px; text-shadow:0 2px 12px rgba(0,0,0,.85),0 1px 4px rgba(0,0,0,.6)} .hero-sub{font-size:clamp(1rem,1.5vw,1.15rem);font-weight:400;max-width:34ch;opacity:.94; text-shadow:0 1px 8px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.7)} .hero-cta{display:flex;align-items:center;gap:26px;margin-top:30px;flex-wrap:wrap} /* the house button, solid fill - a transparent primary loses the click signal */ .btn{display:inline-flex;align-items:center;justify-content:center; background:var(--clay);color:var(--ink);font-weight:700;font-size:15px;letter-spacing:.06em; padding:14px 30px;border-radius:14px; box-shadow:0 8px 28px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.26), inset 0 -2px 0 rgba(0,0,0,.18); transition:transform .15s,box-shadow .15s} @media (hover:hover) and (pointer:fine){ .btn:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.26),inset 0 -2px 0 rgba(0,0,0,.18)} } .quiet{font-size:.95rem;font-weight:500;opacity:.72; text-shadow:0 1px 8px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.7)} @media (hover:hover) and (pointer:fine){.quiet:hover{opacity:1;text-decoration:underline}} .quiet:active{opacity:1;text-decoration:underline} /* ---------------- CATEGORY DECK ---------------- Ported from GCH's beer deck. Track height is set in JS; the stage pins. */ .deck{background:var(--cream);color:var(--on-light)} .deck-track{position:relative} .deck-stage{position:sticky;top:0;height:100svh;overflow:hidden; display:flex;flex-direction:column;align-items:center;justify-content:center} .deck-head{position:absolute;top:clamp(88px,13vh,140px);left:0;right:0;text-align:center; padding:0 var(--pad);z-index:2} .deck-h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.08;margin-top:12px;color:var(--on-light)} /* >> HEIGHT IS THE CONSTRAINED DIMENSION, SO IT IS SET FIRST AND THE WIDTH FOLLOWS. Sizing from width alone let the card grow taller than the space under the heading and the two collided (owner, wd-s26). Cards also sit at 56%, not 50% - the stage is not empty, it has a heading in its top third. */ .deck-rail{position:absolute;inset:0;--ch:min(56svh,470px);--cw:calc(var(--ch) / 1.25)} .deck-item{position:absolute;left:50%;top:56%;width:var(--cw);height:var(--ch); margin-top:calc(var(--ch) / -2); will-change:transform,filter,opacity} .frame{display:block;width:100%;height:calc(100% - 58px);overflow:hidden;background:var(--sand); border-radius:14px;box-shadow:0 18px 44px rgba(30,34,53,.22),0 4px 12px rgba(30,34,53,.14)} .shot{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1)} .deck-label{display:block;padding-top:14px;font-size:15px;font-weight:500;letter-spacing:.06em; color:var(--on-light)} .deck-label em{display:block;font-style:normal;font-size:12px;font-weight:400;letter-spacing:.1em; text-transform:uppercase;color:var(--on-light-soft);margin-top:4px} /* >> HOVER IS SCOPED TO THE CENTRE CARD ONLY. The others are blurred and pushed back, so a hover target on them is a target nobody can see they are hitting. */ @media (hover:hover) and (pointer:fine){ .deck-item.is-live:hover .shot{transform:scale(1.09)} } .deck-count{position:absolute;bottom:clamp(28px,5vh,56px);left:0;right:0;text-align:center; font-size:12px;letter-spacing:.18em;color:var(--on-light-soft);z-index:2} /* one card, or reduced motion - the deck stops being a deck */ .deck.is-static .deck-stage{position:static;height:auto;padding:120px 0 80px} .deck.is-static .deck-rail{position:static;display:flex;gap:24px;justify-content:center;flex-wrap:wrap} .deck.is-static .deck-item{position:static;margin:0;transform:none!important;filter:none!important;opacity:1!important} @media (max-width:700px){ .deck-rail{--ch:min(52svh,420px)} .nav-links{gap:18px;font-size:12px} .nav-links a:not(.nav-creators){display:none} /* they move into the panel below */ /* ---- THE PHONE BAR: Creators, then the burger hard right (wd-s29) ---- Mechanics copied from GCH's rail burger - same markup, same aria, same X transform, same JS. Only the skin differs: GCH's bar is wood, so its button needs glass chrome to read; this bar is transparent over a dark photograph, so the lines ARE the button. >> THE LINES ARE CREAM, NOT AMBER. Creators stays the only amber thing in the bar. */ .burger{display:grid;place-items:center;align-content:center;gap:4px; width:40px;height:40px;padding:0;background:none;border:0;cursor:pointer; /* the tap target stays 40px while the MARK sits on var(--pad) - the box overhangs, the lines do not, so the burger optically lines up with the wordmark's left edge */ margin-right:-11px} .burger span{display:block;width:18px;height:1.5px;background:var(--on-dark);border-radius:14px; transition:transform .2s ease,opacity .2s ease} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} /* ---- THE PANEL - drops out of the bar, not a full-screen overlay ---- Six short links do not need a whole screen, and this reuses the bar's own solid surface rather than inventing a second one. */ .nav-panel{position:absolute;top:100%;left:0;right:0; flex-direction:column;padding:4px var(--pad) 18px; background:rgba(27,35,64,.94); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line-dark)} .nav.is-open .nav-panel{display:flex} .nav-panel a{font-size:15px;letter-spacing:.08em;opacity:.86;padding:12px 0; border-bottom:1px solid var(--line-dark)} .nav-panel a:last-child{border-bottom:0} /* the bar goes solid with the panel, or a transparent strip sits above an opaque one. No border here - the panel's own bottom edge is the one that shows. */ .nav.is-open{background:rgba(27,35,64,.94); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} /* ---- HERO: the phone frame needs a slide, and it is not a taste call ---- The mobile file is 1920x1456, so the visible window is about 800 source px. The jar sits at source x 793-1373. A CENTRED window is 560-1360 and still clips its right edge by 13px, so object-position has to move regardless. 58% puts the window at 650-1450 - the whole jar, right of centre, with ~143px of ground to its left and ~77px to its right. */ .hero-img{object-position:58% center} } /* ---------------- NEW - the sticky stack ---------------- Ported from the studio's stats page: each card is `position:sticky`, so they pile up instead of scrolling past. No JS for the stacking - only the tail below the list. */ /* >> THE HEAD PINS WHERE THE #new ANCHOR LANDS IT, NOT UNDER THE NAV. The section's top padding moved INSIDE the head, so the same value does two jobs: it is the gap above the title on arrival, and it is the clearance under the fixed nav once pinned. Splitting them would make the pinned position differ from the landing position, which is the whole complaint. The band is opaque and full-bleed (box-shadow + clip-path) so cards pass behind it instead of showing through. */ .stack{--head-pad:clamp(80px,12vh,140px); --head-h:clamp(158px,calc(12vh + 98px),252px); background:var(--ink);color:var(--on-dark);padding:0 var(--pad) 0} .stack-head{position:sticky;top:0;z-index:6;max-width:1000px;margin:0 auto; padding-top:var(--head-pad);padding-bottom:clamp(16px,2.4vh,26px); background:var(--ink);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax)} .stack-h2{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.08;margin-top:12px} .stack-list{list-style:none;max-width:1000px;margin:clamp(40px,7vh,72px) auto 0} .scard{position:sticky;top:calc(var(--head-h) + 14px);margin-bottom:26px; display:grid;grid-template-columns:minmax(0,42%) 1fr;gap:clamp(20px,4vw,44px);align-items:center; padding:clamp(18px,2.4vw,28px);border-radius:16px; /* the house frosted panel - fill, blur, border, and the lit/shaded inset pair */ background:linear-gradient(180deg,rgba(54,64,106,.72),rgba(27,35,64,.88)); backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%); border:1px solid var(--line-dark); box-shadow:0 8px 32px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.32)} .scard-img{display:block;overflow:hidden;border-radius:10px;background:var(--ink-2);aspect-ratio:4/5} .scard-img img{width:100%;height:100%;object-fit:cover} .scard-tag{font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--amber)} .scard-name{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.1;margin:10px 0 12px} .scard-say{font-size:1rem;font-weight:400;opacity:.86;max-width:38ch;line-height:1.55} .scard-price{font-size:1rem;font-weight:500;margin-top:16px;letter-spacing:.04em} @media (max-width:700px){ .scard{grid-template-columns:1fr;gap:16px} .scard-img{aspect-ratio:16/10} /* >> RESERVE THREE LINES HERE, AND IT IS THE PHONE FIX FOR THE LAST CARD'S PIN (wd-s30). >> THE STACK'S TAIL ONLY WORKS IF EVERY CARD IS THE SAME HEIGHT. Its whole derivation in `main.js` block 3 says so - "every height term cancels" - and that is true right up until one card is taller than its neighbours. A sticky card is released when the list's bottom rises past `top + ITS OWN height`, so a TALLER card is released EARLIER: it slides out from behind the stack while the others are still pinned, and the last card's hold no longer ends where the arithmetic says it does. >> MEASURED, AND IT IS EXACTLY THE LAPTOP-VERSUS-PHONE SPLIT THE OWNER REPORTED. At 390 and 414 the cards are 425.8 / 401.0 / 401.0 - a 24.8px spread. At 768, 1024 and 1440 all three are identical, which is why nothing was ever wrong on a laptop. >> THE 24.8px IS ONE LINE OF `.scard-say`. Card 1's description wraps to THREE lines on a phone (74.4px) where cards 2 and 3 take two (49.6px); on a laptop all three take two. So reserving three lines on every card makes them equal again and the tail is correct. >> RESERVE, DO NOT CLAMP. `-webkit-line-clamp:2` would also equalise them and would do it by cutting a word off the end of card 1 - a copy change made by a stylesheet. >> 3 IS THE NUMBER TODAY BECAUSE THE LONGEST DESCRIPTION TAKES 3 LINES AT 390px. If a description is ever rewritten longer, this number goes up with it - check the three cards are still equal after any copy edit here. */ .scard-say{min-height:calc(3 * 1.55em)} /* >> TAKE vh OUT OF THE HEAD ON A PHONE, OR THE CARDS PIN ON A MOVING LINE (wd-s30, owner). >> THE CARDS' STICKY LINE IS `--head-h + 14px`, AND `--head-h` WAS BUILT FROM 12vh. On a phone the address bar hides as you scroll, the viewport gets TALLER, and every vh term grows with it - so the line the cards pin to moves DOWN mid-scroll. Card 1 pins at one height and card 3 pins at another, which is exactly the misalignment reported. >> MEASURED: sticky line 213.28px at an 844px viewport, 205.60 at 780, 200.80 at 740, 196.00 at 700, 191.20 at 660 - about 22px of travel across the range a phone's address bar covers. A laptop has no address bar, so the line never moves there, and that is the whole reason this only ever showed on a phone. >> ALL THREE vh TERMS THAT FEED THE HEAD ARE PINNED, NOT JUST `--head-h`. The head's own padding is 12vh and its bottom padding is 2.4vh, so fixing the sticky line alone would leave the head still growing and shrinking underneath it - the cards would sit at a constant line while the thing they tuck under changed height. >> THE NUMBERS ARE THE 844px VALUES ROUNDED, so a phone at rest looks as it did: 12vh was 101.3 (now 100), 2.4vh was 20.3 (now 20), and the head measured 182.3px tall (now 181). `--head-h` must stay equal to the head's real height or the 14px gap under it is wrong. */ .stack{--head-pad:100px; --head-h:181px} .stack-head{padding-bottom:20px} } /* ---------------- BEST SELLERS - the deck on the dark ground ---------------- */ .deck-dark{background:var(--ink);color:var(--on-dark)} .deck-dark .deck-h2,.deck-dark .deck-label{color:var(--on-dark)} .deck-dark .kicker{color:var(--on-dark);opacity:.82} .deck-dark .deck-label em,.deck-dark .deck-count{color:var(--on-dark);opacity:.6} .deck-dark .frame{background:var(--ink-2); box-shadow:0 18px 44px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.35)} /* the loop plays only in the centre slot - see main.js. Until a clip exists the poster is what shows, which is exactly what a still card should look like anyway. */ .loop{width:100%;height:100%;object-fit:cover;display:block; transition:transform .55s cubic-bezier(.2,.7,.2,1)} @media (hover:hover) and (pointer:fine){ .deck-item.is-live:hover .loop{transform:scale(1.06)} } /* ---------------- STAR RATING ---------------- Two layers of the same star, the top one clipped to --pct. Drawn as a repeating SVG background rather than five elements, so a card's rating is one inline value and the markup stays one line. >> SVG, NOT A STAR CHARACTER. The glyph is non-ASCII, and the house rule allows one in a utf-8 page but not in a file we generate - and a character would also be at the mercy of whatever font is loaded. */ .deck-label em{display:flex;align-items:center;gap:8px} .deck-label em b{font-weight:500;color:var(--on-light)} .deck-dark .deck-label em b{color:var(--on-dark)} .deck-label em i{font-style:normal;opacity:.7} .stars{display:inline-block;width:62px;height:11px;position:relative;flex-shrink:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23CFC8C0' d='M8 .6l2.2 4.6 5 .7-3.6 3.5.9 5L8 12l-4.5 2.4.9-5L.8 5.9l5-.7z'/%3E%3C/svg%3E"); background-size:12.4px 11px;background-repeat:repeat-x} .stars::before{content:"";position:absolute;top:0;left:0;bottom:0;width:var(--pct,0%); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFC83D' d='M8 .6l2.2 4.6 5 .7-3.6 3.5.9 5L8 12l-4.5 2.4.9-5L.8 5.9l5-.7z'/%3E%3C/svg%3E"); background-size:12.4px 11px;background-repeat:repeat-x} /* ---------------- TRENDING - the static row ---------------- Light ground, because products go on light (DESIGN.md Decision 2) - and because New and Best Sellers are both dark, so without this the page runs three dark sections together. */ .trend{background:var(--cream);color:var(--on-light); padding:clamp(80px,12vh,140px) var(--pad) clamp(88px,13vh,150px)} .trend-head{max-width:1200px;margin:0 auto clamp(36px,6vh,64px)} .trend-h2{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.08;margin-top:12px;color:var(--on-light)} .trend-sub{font-size:1rem;font-weight:400;color:var(--on-light-soft);margin-top:14px;max-width:44ch} /* >> THE WIDEN-ON-HOVER. Every card is `flex:1 1 0` so they share the row evenly; the hovered one grows and its neighbours give up the space. This is why the effect could not live in the deck - a deck card is absolutely positioned and its transform is rewritten every frame, so there is nothing to reflow and nothing that would not fight the deck. Transitioning `flex-grow` rather than `width` keeps the row exactly full at every point of the animation - a width transition leaves a gap on the trailing edge mid-way. */ .trend-row{display:flex;gap:clamp(12px,1.6vw,22px);max-width:1200px;margin:0 auto;align-items:flex-start} .tcard{flex:1 1 0;min-width:0;transition:flex-grow .45s cubic-bezier(.2,.7,.2,1)} @media (hover:hover) and (pointer:fine){ .trend-row:hover .tcard{flex-grow:.88} .trend-row .tcard:hover{flex-grow:1.55} } .tframe{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:14px; background:var(--sand); box-shadow:0 18px 44px rgba(30,34,53,.18),0 4px 12px rgba(30,34,53,.12)} /* the badge, per CONTEXT 2.6 - circular, top right of the image tile */ .tbadge{position:absolute;top:12px;right:12px;z-index:2; display:grid;place-items:center;text-align:center; width:70px;height:70px;border-radius:50%; background:var(--ink);color:var(--on-dark); font-size:9px;font-weight:600;letter-spacing:.12em;line-height:1.25;padding:6px} /* Two images stacked in the frame - the second fades in on hover. The swap is CSS only, so nothing here depends on the deck's rAF loop. */ .tshot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .tshot-alt{opacity:0;transition:opacity .45s ease} @media (hover:hover) and (pointer:fine){ .tcard:hover .tshot-alt{opacity:1} } .tbody{display:block;padding-top:16px} .tname{display:block;font-size:15px;font-weight:500;letter-spacing:.04em;color:var(--on-light)} .tsay{display:block;font-size:12px;font-weight:400;letter-spacing:.06em;text-transform:uppercase; color:var(--on-light-soft);margin-top:5px} .tprice{display:block;font-size:15px;font-weight:500;letter-spacing:.04em;margin-top:10px; color:var(--on-light)} /* Phone: a scrolling row, and NO widen. The effect needs neighbours to give up space, and at one-and-a-bit cards on screen there are none to give it. */ @media (max-width:820px){ .trend-row{overflow-x:auto;scroll-snap-type:x mandatory; margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad); -webkit-overflow-scrolling:touch} .tcard{flex:0 0 66vw;scroll-snap-align:start} .tbadge{width:58px;height:58px;font-size:8px} } /* ---------------- REVIEWS - stills, staggered grid ---------------- Dark ground, alternating off Trending's cream. */ .revs{background:var(--ink);color:var(--on-dark); padding:clamp(80px,12vh,140px) var(--pad) clamp(96px,14vh,160px)} .revs-head{max-width:1200px;margin:0 auto clamp(36px,6vh,64px)} .revs-h2{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.08;margin-top:12px} .revs-sub{font-size:1rem;font-weight:400;opacity:.72;margin-top:14px;max-width:48ch} .revs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px); max-width:1200px;margin:0 auto;align-items:start} /* >> THE STAGGER IS THE ONLY MOTION IN THIS SECTION and it is static offset, not scroll. Without it three equal cards in a row read as a table of testimonials. The offsets are a share of the card's own width, so they hold their proportion at every window size. */ .revs-grid .rev:nth-child(2){margin-top:6%} .revs-grid .rev:nth-child(3){margin-top:12%} .rev{margin:0} .rframe{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:14px; background:var(--ink-2); box-shadow:0 18px 44px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.35)} .rshot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* The quote is the biggest thing in the card - it is what the section is for. >> IT IS SET IN THE BODY FACE, NOT THE DISPLAY FACE (owner, wd-s29). It ran in Italiana and he called it: readable, but the eye has to work at every word. BRAND-KIT.md already said so - the display face is "display only: hero, section headings, product names, the wordmark. Never body copy" - and a review quote is body copy. It also bottoms out at 16.8px on a phone, under the ~20px this class of high-contrast serif needs before its hairlines go. Size and weight are unchanged, so the quote is still the loudest thing in the card. */ .rquote{font-family:var(--body);font-weight:400;font-size:clamp(1.05rem,1.55vw,1.35rem); line-height:1.45;margin:22px 0 0;color:var(--on-dark)} .rmeta{display:flex;flex-direction:column;gap:7px;margin-top:16px} .rwho{font-size:13px;font-weight:500;letter-spacing:.04em} .rprod{font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;opacity:.6} @media (max-width:820px){ .revs-grid{grid-template-columns:1fr;gap:clamp(34px,6vh,52px)} /* the stagger is a three-column effect - in one column it is just uneven spacing */ .revs-grid .rev:nth-child(2),.revs-grid .rev:nth-child(3){margin-top:0} } /* ---------------- CREATOR HOOK - the full-bleed band ---------------- Same construction as the hero: picture, scrim, copy bottom-left. Deliberately so - it is the second time the page makes a direct offer, and echoing the hero says that. */ .hook{position:relative;min-height:clamp(520px,72svh,760px);overflow:hidden; display:flex;align-items:flex-end;background:var(--ink-2)} .hook-bg{position:absolute;inset:0;z-index:0;display:block} .hook::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to top,rgba(27,35,64,.86) 0%,rgba(27,35,64,.42) 46%,rgba(27,35,64,.12) 78%)} .hook-copy{position:relative;z-index:2;padding:0 var(--pad) clamp(48px,9vh,96px);max-width:660px} .hook-h2{font-family:var(--display);font-weight:600; font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.05;margin:16px 0 16px; text-shadow:0 2px 12px rgba(0,0,0,.85),0 1px 4px rgba(0,0,0,.6)} .hook-say{font-size:clamp(1rem,1.4vw,1.12rem);font-weight:400;max-width:46ch;opacity:.94; line-height:1.6;text-shadow:0 1px 8px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.7)} .hook-cta{display:flex;align-items:center;gap:26px;margin-top:28px;flex-wrap:wrap} .hook-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* ---------------- NEWSLETTER - inert ---------------- */ .news{background:var(--shell);color:var(--on-light); padding:clamp(56px,9vh,96px) var(--pad)} .news-in{max-width:760px;margin:0 auto;text-align:center} .news-h2{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,2.8vw,2.3rem); line-height:1.12;color:var(--on-light)} .news-form{display:flex;gap:10px;margin:26px auto 0;max-width:480px} .news-input{flex:1 1 auto;min-width:0;font-family:var(--body);font-size:15px;font-weight:400; color:var(--on-light);background:transparent; border:1px solid rgba(30,34,53,.28);border-radius:14px;padding:13px 16px} /* a bold placeholder reads as a filled field - the shared standard's exclusion */ .news-input::placeholder{color:var(--on-light-soft);font-weight:400;opacity:.8} .news-input:focus{outline:none;border-color:var(--clay)} .news-fine{font-size:12px;color:var(--on-light-soft);margin-top:14px;letter-spacing:.03em} /* ---------------- FOOTER ---------------- */ .foot{background:var(--ink);color:var(--on-dark);padding:clamp(64px,10vh,110px) var(--pad) 34px} .foot-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto; gap:clamp(32px,5vw,90px);align-items:start} .foot-tag{font-size:13px;opacity:.6;margin-top:14px;max-width:32ch;line-height:1.6} .foot-cols{display:flex;gap:clamp(30px,5vw,76px)} .foot-col{display:flex;flex-direction:column;gap:9px} .foot-h{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase; opacity:.5;margin-bottom:5px} .foot-col a{font-size:13.5px;font-weight:400;opacity:.82} @media (hover:hover) and (pointer:fine){.foot-col a:hover{opacity:1;text-decoration:underline}} /* the section hairline, content-width - the house rule: it separates sections, it does not divide the page, so it stops where the content stops */ .foot-legal{max-width:1200px;margin:clamp(44px,7vh,80px) auto 0;padding-top:22px; border-top:.5px solid rgba(255,248,240,.18); font-size:11.5px;letter-spacing:.06em;opacity:.45} @media (max-width:820px){ .foot-in{grid-template-columns:1fr;gap:36px} .foot-cols{flex-wrap:wrap;gap:28px 44px} .news-form{flex-direction:column} } /* ================================================================== CREATOR PROGRAMS PAGE - creators.html Reuses the nav, hero, buttons, newsletter input treatment and footer as they are. Everything below is new to this page. ================================================================== */ /* >> THE SUBPAGE HERO IS SHORTER THAN THE HOME HERO, AND IT IS NOT A TASTE CALL. At 100svh the tier row - which is the reason the page exists - sits entirely below the fold. At 78svh the top of it shows, which is what says there is something under this. */ .hero-page{height:auto;min-height:clamp(520px,78svh,780px)} .hero-page .hero-h1{font-size:clamp(2.3rem,5.4vw,4.4rem)} .nav-creators.is-here{text-decoration:underline;text-underline-offset:6px} /* ---------------- THE THREE TIERS ---------------- */ .tiers{background:var(--ink);color:var(--on-dark);padding:clamp(64px,11vh,120px) var(--pad)} .tiers-in{max-width:1200px;margin:0 auto} .tiers-head{max-width:640px;margin:0 auto clamp(36px,6vh,60px);text-align:center} .tiers-h2{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.08;margin-top:12px} .tiers-sub{font-size:1rem;font-weight:400;opacity:.72;margin-top:14px} .tier-row{list-style:none;display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px);align-items:stretch} /* >> THE PANEL VALUES ARE .scard's, NOT A SECOND RECIPE. One look per element type per site - a frosted card here has to be the same object as a frosted card on the home page. If either ever changes, both selectors move together because they share this rule. */ .tier{display:flex;flex-direction:column; padding:clamp(22px,2.6vw,32px);border-radius:16px; background:linear-gradient(180deg,rgba(54,64,106,.72),rgba(27,35,64,.88)); backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%); border:1px solid var(--line-dark); box-shadow:0 8px 32px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.32)} /* >> ONLY THE OPEN TIER IS LIT, AND THAT IS THE PAGE'S ARGUMENT IN ONE DECLARATION. The tier with no bar on it is the one a visitor has to believe is real, so it is the one carrying the accent edge. The other two are conditional and read as quieter on purpose. */ .tier.is-open{border-color:rgba(255,200,61,.42)} .tier.is-open .tier-eyebrow{color:var(--amber)} .tier-eyebrow{font-size:10px;font-weight:600;letter-spacing:.2em;opacity:.72} .tier-name{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1.1;margin:10px 0 10px} .tier-who{font-size:1rem;font-weight:400;opacity:.86;line-height:1.5} .tier-list{list-style:none;margin:20px 0 0;display:flex;flex-direction:column;gap:11px} .tier-list li{position:relative;padding-left:20px;font-size:.95rem;font-weight:400; line-height:1.5;opacity:.86} /* a hairline tick rather than a bullet - a dot list on a luxury page reads as a spec sheet */ .tier-list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px; background:var(--clay)} .tier-ask{margin-top:auto;padding-top:20px;font-size:.9rem;font-weight:400;line-height:1.5; opacity:.8;border-top:1px solid var(--line-dark)} .tier-ask span{display:block;font-size:10px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;opacity:.6;margin-bottom:6px} /* ---------------- HOW IT WORKS - a light band, no panels ---------------- The tier row above is already three panels; a second row of them would read as six tiers. */ .steps{background:var(--cream);color:var(--on-light);padding:clamp(64px,11vh,120px) var(--pad)} .steps-in{max-width:1200px;margin:0 auto} .steps-h2{font-family:var(--display);font-weight:600;font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:1.1;color:var(--on-light);margin-top:12px;max-width:20ch} .step-row{list-style:none;display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(24px,3.4vw,52px);margin-top:clamp(36px,6vh,60px)} .step{border-top:1px solid var(--line);padding-top:20px} /* clay-deep, not clay: Italiana's thin numerals washed out in clay on cream - "2-4" read as "2 4" (owner, wd-s32). The display face has one weight, so the fix is tone, not bold. */ .step-n{font-family:var(--display);font-size:1.5rem;color:var(--clay-deep)} .step-h{font-size:1.05rem;font-weight:500;margin:10px 0 8px;color:var(--on-light)} .step-say{font-size:.95rem;font-weight:400;line-height:1.55;color:var(--on-light-soft)} /* ---------------- THE APPLICATION - inert ---------------- */ .apply{background:var(--ink);color:var(--on-dark);padding:clamp(64px,11vh,120px) var(--pad)} .apply-in{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,88px);align-items:start} .apply-h2{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.08;margin-top:12px} .apply-say{font-size:1rem;font-weight:400;opacity:.78;margin-top:16px;max-width:42ch; line-height:1.6} .apply-form{display:flex;flex-direction:column;gap:18px} .fld{display:flex;flex-direction:column;gap:8px} .fld-l{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;opacity:.7} /* the newsletter input's treatment, inverted for the dark ground - same border, same radius, same focus colour, so there is one field look on this site rather than two */ .fld-i{font-family:var(--body);font-size:15px;font-weight:400;color:var(--on-dark); background:transparent;border:1px solid var(--line-dark);border-radius:14px;padding:13px 15px} .fld-i::placeholder{color:var(--on-dark);opacity:.38;font-weight:400} .fld-i:focus{outline:none;border-color:var(--clay)} .btn-wide{width:100%;text-align:center;margin-top:6px} .apply-fine{font-size:12px;opacity:.6;letter-spacing:.03em} /* ---------------- CREATOR PAGE - PHONE ---------------- */ /* >> THE RULE ABOVE `We ask for` NEEDS A GUARANTEED GAP, NOT A FIXED ONE. `.tier-ask` uses `margin-top:auto` to sit on the floor of the card, so in a card whose bullets happen to fill the height that auto resolves to ZERO and the line lands right under the last bullet - which is why it looked different card to card and browser to browser. A bottom margin on the list sets a floor the auto cannot eat, and auto still absorbs the slack in the shorter cards. Laptop only - the phone stacks and never runs out of height. */ @media (min-width:901px){ .tier-list{margin-bottom:30px} } @media (max-width:900px){ .tier-row{grid-template-columns:1fr;gap:16px} .step-row{grid-template-columns:1fr;gap:26px} .apply-in{grid-template-columns:1fr;gap:32px} .tier-ask{margin-top:20px} } /* ---------------- THE DETAILS - the four mechanics, on the dark ground ---------------- A four-across strip, no panels: the tier row above is already panelled, and these are facts rather than offers. The number line is the display face because each one is a short label, which is what that face is for. */ .facts{background:var(--ink-2);color:var(--on-dark);padding:clamp(56px,9vh,100px) var(--pad)} .facts-in{max-width:1200px;margin:0 auto} .facts-h2{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.1;margin-top:12px;max-width:22ch} .fact-row{list-style:none;display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.6vw,40px);margin-top:clamp(32px,5vh,52px)} .fact{border-top:1px solid var(--line-dark);padding-top:18px} .fact-n{font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,1.7vw,1.5rem); line-height:1.15;color:var(--amber)} .fact-say{font-size:.92rem;font-weight:400;line-height:1.55;opacity:.82;margin-top:10px} @media (max-width:900px){ .fact-row{grid-template-columns:1fr 1fr;gap:22px} } @media (max-width:560px){ .fact-row{grid-template-columns:1fr;gap:20px} } /* ================================================================== COLLECTION TEMPLATE - collection-.html ================================================================== */ /* >> HALF THE HEIGHT OF A PAGE HERO. A collection hero names the group and gets out of the way; the grid is what the visitor came for. */ .chero{position:relative;min-height:clamp(340px,46svh,520px);overflow:hidden; display:flex;align-items:flex-end} .chero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to top,rgba(27,35,64,.82) 0%,rgba(27,35,64,.3) 46%,transparent 78%)} /* >> AND A SECOND SCRIM AT THE TOP, WHICH THE HOME HERO DOES NOT NEED. That photograph is dark where the bar sits; a category close-up is skin, and it is brightest exactly there. The nav is white type with no surface of its own until it goes solid, so without this the links sit on a light ground and disappear. */ .chero::before,.band::before{content:"";position:absolute;top:0;left:0;right:0;height:190px;z-index:1; pointer-events:none; background:linear-gradient(to bottom,rgba(27,35,64,.62) 0%,rgba(27,35,64,.24) 55%,transparent 100%)} /* the product page has no photograph behind the bar at all - it is locked solid in markup */ .nav.is-locked{background:rgba(27,35,64,.92);backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-dark);padding:14px var(--pad)} .chero-copy{position:relative;z-index:2;padding:0 var(--pad) clamp(34px,6vh,64px);max-width:680px} .chero .kicker{text-shadow:0 1px 8px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.7)} .chero-h1{font-family:var(--display);font-weight:600; font-size:clamp(2.6rem,7vw,5rem);line-height:1;margin:14px 0 14px; text-shadow:0 2px 12px rgba(0,0,0,.85),0 1px 4px rgba(0,0,0,.6)} .chero-sub{font-size:1rem;font-weight:400;max-width:46ch;opacity:.92;line-height:1.6; text-shadow:0 1px 8px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.7)} .coll{background:var(--cream);color:var(--on-light); padding:clamp(40px,6vh,72px) var(--pad) clamp(80px,12vh,130px)} .coll-in{max-width:1200px;margin:0 auto} /* the bar - count left, sort right, hairline under it. The section rule, not a full-bleed line: it separates the controls from the grid, it does not divide the page. */ .coll-bar{display:flex;align-items:center;justify-content:space-between;gap:20px; padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:clamp(28px,4vh,44px)} .coll-count{font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase; color:var(--on-light-soft)} .coll-sort{display:flex;align-items:center;gap:10px} .coll-sort-l{font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase; color:var(--on-light-soft)} .coll-sort-s{font-family:var(--body);font-size:14px;font-weight:400;color:var(--on-light); background:transparent;border:1px solid rgba(30,34,53,.28);border-radius:14px; padding:9px 12px;cursor:pointer} .coll-sort-s:focus{outline:none;border-color:var(--clay)} .coll-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.2vw,32px)} .coll-grid-3{grid-template-columns:repeat(3,1fr)} /* >> THE PRODUCT CARD IS THE TRENDING CARD'S FRAME AND SWAP, WITHOUT THE WIDEN. The widen needs a flex row whose neighbours can give up space; a grid's tracks are fixed, so widening one card either overlaps its neighbour or reflows the row. The image swap works anywhere, so that half comes along. Same aspect, same badge, same shadow - one card, two homes. */ .pcard{display:block} .pframe{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:14px; background:var(--sand); box-shadow:0 18px 44px rgba(30,34,53,.18),0 4px 12px rgba(30,34,53,.12)} .pshot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .pshot-alt{opacity:0;transition:opacity .45s ease} @media (hover:hover) and (pointer:fine){ .pcard:hover .pshot-alt{opacity:1} } .pbody{display:block;padding-top:15px} .pname{display:block;font-size:15px;font-weight:500;letter-spacing:.04em;color:var(--on-light)} .psay{display:block;font-size:12px;font-weight:400;letter-spacing:.06em;text-transform:uppercase; color:var(--on-light-soft);margin-top:5px} .prate{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:400; color:var(--on-light-soft);margin-top:9px} .prate i{font-style:normal;opacity:.8} .pprice{display:block;font-size:15px;font-weight:500;letter-spacing:.04em;margin-top:9px; color:var(--on-light)} @media (max-width:1000px){ .coll-grid,.coll-grid-3{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .coll-grid,.coll-grid-3{grid-template-columns:1fr;gap:26px} .coll-bar{flex-direction:column;align-items:flex-start;gap:12px} } /* ================================================================== PRODUCT TEMPLATE - product-.html >> EVERY RULE HERE HAS TO SURVIVE BEING FILLED WITH A MASCARA, A CLEANSER OR AN SPF. A product page is ONE design filled forty times - that is the whole reason the catalog price caps products and never pages. Nothing below is lip-oil specific. ================================================================== */ /* the page opens under a SOLID bar, not over a photograph - the first thing that has to be readable here is a price */ .pdp-body{background:var(--cream)} .pdp{background:var(--cream);color:var(--on-light); padding:calc(clamp(88px,12vh,120px) + 20px) var(--pad) clamp(60px,9vh,100px)} .pdp-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.15fr 1fr; gap:clamp(32px,4.4vw,72px);align-items:start} .pdp-stage{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:14px;background:var(--sand); box-shadow:0 18px 44px rgba(30,34,53,.18),0 4px 12px rgba(30,34,53,.12)} .pdp-main{width:100%;height:100%;object-fit:cover} .pdp-thumbs{list-style:none;display:flex;gap:12px;margin-top:14px} .pdp-thumb{width:84px;aspect-ratio:1/1;padding:0;border:1px solid transparent;border-radius:14px; overflow:hidden;background:var(--sand);cursor:pointer;opacity:.62; transition:opacity .2s ease,border-color .2s ease} .pdp-thumb img{width:100%;height:100%;object-fit:cover} .pdp-thumb.is-on{opacity:1;border-color:var(--clay)} @media (hover:hover) and (pointer:fine){ .pdp-thumb:hover{opacity:1} } .pdp-crumb{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-light-soft)} .pdp-crumb a{border-bottom:1px solid transparent} @media (hover:hover) and (pointer:fine){ .pdp-crumb a:hover{border-bottom-color:var(--clay)} } .pdp-name{font-family:var(--display);font-weight:600;font-size:clamp(2rem,3.6vw,3rem); line-height:1.05;margin:12px 0 14px;color:var(--on-light)} .pdp-rate{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--on-light-soft)} .pdp-rate i{font-style:normal} .pdp-price{font-size:1.35rem;font-weight:500;letter-spacing:.03em;margin-top:14px; color:var(--on-light)} .pdp-say{font-size:1rem;font-weight:400;line-height:1.65;color:var(--on-light);opacity:.86; margin-top:18px;max-width:46ch} .pdp-var{margin-top:26px} .pdp-var-l{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase; color:var(--on-light-soft)} .pdp-var-l em{font-style:normal;color:var(--on-light);margin-left:6px;letter-spacing:.04em} .swatches{display:flex;gap:12px;margin-top:12px} /* the swatch carries its colour inline, so a shade is one line of markup - the same way a rating is one inline value. Forty products can be filled in without touching this file. */ .sw{width:34px;height:34px;border-radius:50%;cursor:pointer;background:var(--sw); border:1px solid rgba(30,34,53,.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.14); outline:1px solid transparent;outline-offset:3px;transition:outline-color .18s ease} .sw.is-on{outline-color:var(--clay)} @media (hover:hover) and (pointer:fine){ .sw:hover{outline-color:rgba(240,86,126,.5)} } .pdp-buy .btn-wide{margin-top:26px} .pdp-fine{font-size:12px;color:var(--on-light-soft);margin-top:12px;letter-spacing:.03em} /* >> A DISCLOSURE LIST, NOT THREE PARAGRAPHS. On a product page the visitor is scanning for one answer, not reading the page. */ .pdp-det{margin-top:34px;border-top:1px solid var(--line)} .pdp-det details{border-bottom:1px solid var(--line)} .pdp-det summary{list-style:none;cursor:pointer;padding:16px 0;font-size:14px;font-weight:500; letter-spacing:.04em;color:var(--on-light);display:flex;align-items:center; justify-content:space-between} .pdp-det summary::-webkit-details-marker{display:none} .pdp-det summary::after{content:"+";font-size:16px;color:var(--on-light-soft);font-weight:400} .pdp-det details[open] summary::after{content:"-"} .pdp-det p{font-size:.95rem;font-weight:400;line-height:1.65;color:var(--on-light-soft); padding:0 0 18px;max-width:52ch} .also{background:var(--shell);color:var(--on-light);padding:clamp(64px,10vh,110px) var(--pad)} .also-in{max-width:1200px;margin:0 auto} .also .kicker{color:var(--on-light);opacity:.6} .also-h2{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.1;margin:12px 0 clamp(28px,4vh,44px);color:var(--on-light)} @media (max-width:860px){ .pdp-in{grid-template-columns:1fr;gap:28px} .pdp-stage{aspect-ratio:1/1} } /* ================================================================================== THE BAG (wd-s31) - the nav button, the drawer, and the lines in it. >> EVERY COLOUR HERE IS A TOKEN. Nothing new was added to :root for this - the drawer is the dark ground the hero and footer already use, so a client swap recolours it with the rest of the site and this block never needs opening. >> THE PANEL IS FIXED AND FULL HEIGHT, and its middle scrolls rather than the page. A drawer whose whole body scrolls takes the page with it on a phone once the list is longer than the screen. Header and footer are pinned; only .bag-lines moves. */ .bag-btn{ font:inherit;color:inherit;background:none;border:0;cursor:pointer; padding:6px 0;opacity:.8;letter-spacing:.08em; display:inline-flex;align-items:center;gap:7px; } .bag-btn.has-n{opacity:1} @media (hover:hover) and (pointer:fine){.bag-btn:hover{opacity:1}} /* the count sits in a pill so a single digit and a double digit are the same shape */ .bag-n{ display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px; border-radius:999px;background:var(--clay);color:var(--on-dark); font-size:11px;line-height:1;letter-spacing:0; } .bag{position:fixed;inset:0;z-index:100;visibility:hidden;} .bag.is-open{visibility:visible} .bag-veil{ position:absolute;inset:0;background:rgba(27,35,64,.55); opacity:0;transition:opacity .28s ease; } .bag.is-open .bag-veil{opacity:1} .bag-panel{ position:absolute;top:0;right:0;bottom:0;width:min(420px,100%); background:var(--ink);color:var(--on-dark); display:flex;flex-direction:column; transform:translateX(100%);transition:transform .32s cubic-bezier(.22,.61,.36,1); box-shadow:-24px 0 60px rgba(0,0,0,.45); } .bag.is-open .bag-panel{transform:none} /* the page behind must not scroll while the drawer is open */ body.bag-open{overflow:hidden} .bag-top{ display:flex;align-items:center;justify-content:space-between; padding:22px var(--pad) 16px;border-bottom:1px solid var(--line-dark);flex:0 0 auto; } .bag-h{font-family:var(--display);font-size:24px;letter-spacing:.01em} .bag-x{ font:inherit;font-size:13px;letter-spacing:.08em;color:inherit;opacity:.72; background:none;border:0;cursor:pointer;padding:6px 0; } @media (hover:hover) and (pointer:fine){.bag-x:hover{opacity:1;text-decoration:underline}} .bag-lines{flex:1 1 auto;overflow-y:auto;padding:6px var(--pad);} .bag-empty{opacity:.6;font-size:14px;padding:26px 0} .bagline{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line-dark)} .bagline:last-child{border-bottom:0} .bagline-img{flex:0 0 76px} .bagline-img img{width:76px;height:92px;object-fit:cover;display:block;border-radius:3px} .bagline-body{flex:1 1 auto;min-width:0} .bagline-name{font-size:14px;letter-spacing:.02em;color:inherit;text-decoration:none;display:block} @media (hover:hover) and (pointer:fine){.bagline-name:hover{text-decoration:underline}} .bagline-var{font-size:12px;opacity:.62;margin-top:3px} .bagline-price{font-size:13px;opacity:.82;margin-top:6px} .bagline-qty{display:flex;align-items:center;gap:10px;margin-top:10px} .bagline-qty button{ font:inherit;font-size:14px;line-height:1;color:inherit;cursor:pointer; background:none;border:1px solid var(--line-dark);border-radius:999px; width:26px;height:26px;display:grid;place-items:center;padding:0; } .bagline-qty span{font-size:13px;min-width:14px;text-align:center} .bagline-qty .bagline-rm{ width:auto;height:auto;border:0;padding:0;margin-left:4px; font-size:12px;opacity:.55;letter-spacing:.04em;border-radius:0; } @media (hover:hover) and (pointer:fine){ .bagline-qty button:hover{border-color:var(--clay)} .bagline-qty .bagline-rm:hover{opacity:1;text-decoration:underline;border-color:transparent} } .bag-foot{flex:0 0 auto;padding:18px var(--pad) calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--line-dark)} .bag-sub{display:flex;justify-content:space-between;font-size:15px;letter-spacing:.02em} .bag-note{font-size:12px;opacity:.55;margin:6px 0 14px} .bag-foot .btn[disabled]{opacity:.4;cursor:not-allowed} /* ---- the two order pages ---- */ .orderpage{ min-height:100svh;display:grid;place-items:center; background:var(--ink);color:var(--on-dark);padding:calc(var(--pad) * 2) var(--pad); } .orderpage-in{max-width:520px;text-align:center} .orderpage h1{font-family:var(--display);font-size:clamp(34px,7vw,52px);line-height:1.05} .orderpage p{margin-top:16px;opacity:.78;line-height:1.65} .orderpage .btn{margin-top:28px} .orderpage-quiet{ display:inline-block;margin-top:18px;font-size:14px;color:inherit; opacity:.72;text-decoration:none; } @media (hover:hover) and (pointer:fine){.orderpage-quiet:hover{opacity:1;text-decoration:underline}} /* ================================================================== COMPANY PAGES - our-story.html (wd-s32) ================================================================== */ /* a photo band with no copy on it - the words sit below on cream. It shares the collection hero's top scrim (grouped above), because a bright sky under the transparent nav hides the links. Positioned high so a wide screen keeps the horizon; the crop falls on the grass. */ .band{position:relative;height:clamp(420px,70svh,760px);overflow:hidden} .band .hero-img{object-position:50% 30%} .story{background:var(--cream);color:var(--on-light);padding:clamp(64px,11vh,120px) var(--pad)} .story-in{max-width:640px;margin:0 auto;text-align:center} .story-h1{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.05;margin:14px 0 6px} .story-say{font-size:1.05rem;font-weight:400;line-height:1.75;color:var(--on-light-soft);margin-top:20px} .story-cta{display:flex;justify-content:center;align-items:center;gap:26px;margin-top:40px;flex-wrap:wrap} .story .quiet,.wall .quiet,.info .quiet{text-shadow:none} /* on cream there is nothing to lift it off */ /* phone: the sides crop hard, so hold the sand and the water in frame */ @media (max-width:700px){ .band{height:clamp(340px,56svh,520px)} .band .hero-img{object-position:38% 50%} .story-in{text-align:left} .story-cta{justify-content:flex-start} } /* ---------------- CREATOR WALL - creators.html (wd-s32) ---------------- Cream between the two dark sections. Headings reuse the tier section's classes; the tile is the product card's .pframe at 9:16, so the shadow and radius are the same object. */ .wall{background:var(--cream);color:var(--on-light);padding:clamp(64px,11vh,120px) var(--pad)} .wall-row{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.6vw,22px)} .cframe{aspect-ratio:9/16} .chandle{font-size:12px;font-weight:400;color:var(--on-light-soft);margin-top:3px} .ctier{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--clay);margin-top:10px} .cquote{font-size:13px;font-weight:400;line-height:1.5;color:var(--on-light);margin-top:8px} .wall .quiet{display:inline-block;font-size:12px;margin-top:10px} @media (max-width:1000px){ .wall-row{grid-template-columns:repeat(3,1fr);row-gap:34px} } @media (max-width:560px){ .wall-row{grid-template-columns:repeat(2,1fr);gap:14px;row-gap:30px} } /* ---------------- HELP PAGES - shipping, returns, ingredients, faq (wd-s32) ---------------- One template filled four times. Locked nav and the product page's top padding, because there is no photograph behind the bar. The crumb, name, lede and disclosure rows are the product page's classes; the facts row is the creator page's steps strip. */ .info{background:var(--cream);color:var(--on-light); padding:calc(clamp(88px,12vh,120px) + 20px) var(--pad) clamp(70px,11vh,120px)} .info-in{max-width:760px;margin:0 auto} .info-tabs{display:flex;flex-wrap:wrap;gap:8px 24px} .info-tabs a.is-here{color:var(--on-light);border-bottom-color:var(--clay)} .info-facts{grid-template-columns:repeat(3,1fr)} .info-h2{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,2.4vw,1.9rem); line-height:1.15;color:var(--on-light);margin:clamp(40px,6vh,56px) 0 0} .info-p{font-size:1rem;font-weight:400;line-height:1.7;color:var(--on-light-soft);margin-top:12px;max-width:62ch} .info .pdp-det p{max-width:62ch} .ing-name{color:var(--on-light);font-weight:500;border-bottom:1px solid transparent} @media (hover:hover) and (pointer:fine){ .ing-name:hover{border-bottom-color:var(--clay)} } /* ---------------- CONTACT - the creator application section, under a locked nav ---------------- */ .contact{padding-top:calc(clamp(88px,12vh,120px) + 20px)} .contact-l{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:.6; margin-top:34px} .contact-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:10px} select.fld-i{appearance:none;-webkit-appearance:none;cursor:pointer} select.fld-i option{color:var(--on-light)} textarea.fld-i{resize:vertical;min-height:120px} @media (max-width:700px){ .info-facts{grid-template-columns:1fr;gap:22px} } /* ================================================================== PAWFECTLY POLISHED - NEW TO THIS BUILD (wd-pp-s1, first draft) Everything above is Veloura's, re-tokened. Everything below is the grooming and booking half, plus the draft image placeholders. ================================================================== */ /* the house button, as a pill - a playful shop, not a luxury label */ .btn{border-radius:999px} .btn-ghost{background:transparent;color:var(--on-dark);box-shadow:inset 0 0 0 2px rgba(255,248,240,.7)} .btn-ink{background:var(--ink);color:var(--on-dark)} /* ---------------- DRAFT IMAGE PLACEHOLDERS ---------------- Every picture on the draft is a labelled slot. The label is the shot it waits for. A slot sits inside any frame (.frame, .pframe, .tframe, .rframe, .scard-img, hero) and fills it, so swapping in the real image is one in place of one . */ .ph{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px; padding:18px;text-align:center; background:linear-gradient(140deg,var(--blush) 0%,var(--sand) 55%,#FFE7B0 100%); color:var(--on-light-soft);font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1.4} .ph::before{content:"";width:34px;height:34px;opacity:.55; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23C23A5E'%3E%3Cellipse cx='16' cy='22' rx='7.5' ry='6.5'/%3E%3Cellipse cx='7' cy='13' rx='3.2' ry='4'/%3E%3Cellipse cx='13' cy='8' rx='3.2' ry='4.2'/%3E%3Cellipse cx='19' cy='8' rx='3.2' ry='4.2'/%3E%3Cellipse cx='25' cy='13' rx='3.2' ry='4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat} .ph-dark{background:linear-gradient(140deg,var(--ink-3) 0%,var(--ink-2) 60%,#4A2F5C 100%); color:rgba(255,248,240,.62)} .scard-img,.rframe{position:relative} .frame{position:relative} /* the hero slot - a background video (Barkbus / Woof Gang). Draft: gradient + label */ .hero-ph{position:absolute;inset:0;z-index:0;display:grid;place-items:center; background:radial-gradient(120% 90% at 70% 30%,#F0567E 0%,#6B3A7A 42%,var(--ink) 80%)} .hero-ph span{max-width:36ch;text-align:center;font-size:12px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:rgba(255,248,240,.55);transform:translateY(-12vh)} /* ---------------- GROOMING STACK - the sticky stack, carrying services ---------------- */ .scard-from{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.7} .scard-price b{font-family:var(--display);font-size:1.6rem;font-weight:600;color:var(--amber)} .scard-list{list-style:none;margin-top:14px;display:flex;flex-wrap:wrap;gap:8px} .scard-list li{font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px; background:rgba(255,248,240,.09);border:1px solid var(--line-dark)} .scard .btn{margin-top:20px} /* ---------------- HOW BOOKING WORKS - Veloura's steps strip, reused ---------------- */ .steps .step-n{font-weight:600;color:var(--clay-deep)} /* ---------------- VISIT - the hook band, carrying the store facts ---------------- */ .visit-facts{display:grid;grid-template-columns:repeat(3,auto);gap:14px 40px;margin-top:24px; font-size:15px;font-weight:600;line-height:1.5;text-shadow:0 1px 8px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.7)} .visit-facts span{display:block;font-size:10px;font-weight:800;letter-spacing:.2em; text-transform:uppercase;opacity:.72;margin-bottom:4px} @media (max-width:700px){ .visit-facts{grid-template-columns:1fr} } /* ---------------- PRODUCT OPTIONS - size pills, on Veloura's swatch row ---------------- Same row, same pick-one script, same data-name read by the bag. A pet store sells sizes more often than shades, so the button is a pill with its label inside. */ .opt{font-family:var(--body);font-size:14px;font-weight:700;color:var(--on-light);cursor:pointer; background:transparent;border:1.5px solid rgba(30,34,53,.22);border-radius:999px;padding:9px 16px; transition:border-color .18s ease,background .18s ease} .opt.is-on{border-color:var(--clay);background:rgba(240,86,126,.1)} @media (hover:hover) and (pointer:fine){ .opt:hover{border-color:var(--clay)} } .swatches{flex-wrap:wrap} /* ================================================================== GROOMING PAGE - grooming.html ================================================================== */ .menu{background:var(--cream);color:var(--on-light);padding:clamp(64px,11vh,120px) var(--pad)} .menu-in{max-width:1100px;margin:0 auto} .menu-h2{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.08;margin-top:12px;color:var(--on-light)} .menu-sub{font-size:1rem;color:var(--on-light-soft);margin-top:12px;max-width:56ch;line-height:1.6} .menu-sub b{color:var(--on-light)} .sizes{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px} .size{padding:14px 16px;border-radius:14px;background:var(--shell);border:1px solid var(--line)} .size b{display:block;font-family:var(--display);font-size:1.2rem;font-weight:600} .size span{font-size:13px;color:var(--on-light-soft)} .price-table{width:100%;border-collapse:collapse;margin-top:28px;font-size:15px} .price-table th,.price-table td{text-align:left;padding:16px 12px;border-bottom:1px solid var(--line)} .price-table thead th{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase; color:var(--on-light-soft)} .price-table td:first-child b{display:block;font-family:var(--display);font-size:1.15rem;font-weight:600} .price-table td:first-child span{font-size:13px;color:var(--on-light-soft)} .price-table td.p{font-weight:800;font-size:1.05rem} .addons{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px} .addon{display:flex;justify-content:space-between;gap:12px;align-items:baseline; padding:16px 18px;border-radius:14px;background:#fff;border:1px solid var(--line)} .addon b{font-weight:800} .addon span{font-size:13px;color:var(--on-light-soft);display:block;margin-top:3px} .addon em{font-style:normal;font-weight:800;color:var(--clay-deep);white-space:nowrap} .menu-cta{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:36px} .menu .quiet{text-shadow:none;color:var(--on-light)} .know{background:var(--shell);color:var(--on-light);padding:clamp(64px,10vh,110px) var(--pad)} .know-in{max-width:860px;margin:0 auto} @media (max-width:900px){ .sizes{grid-template-columns:repeat(2,1fr)} .addons{grid-template-columns:1fr} } @media (max-width:600px){ .price-table thead{display:none} .price-table tr{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line); padding:12px 0} .price-table td{border:0;padding:6px 4px} .price-table td:first-child{grid-column:1/-1} .price-table td.p::before{content:attr(data-s);display:block;font-size:10px;font-weight:800; letter-spacing:.12em;text-transform:uppercase;color:var(--on-light-soft)} } /* ================================================================== BOOKING PAGE - book.html >> DRAFT: THE FLOW IS REAL IN THE BROWSER AND INERT AT THE END. Size, service, add-ons, a day, a drop-off time and the dog's details all work and price themselves live. Nothing is saved and no deposit is taken - that is the scheduling build (Worker + database + Stripe + reminder), which comes after the flow is approved on screen. ================================================================== */ .book{background:var(--cream);color:var(--on-light); padding:calc(clamp(88px,12vh,120px) + 20px) var(--pad) clamp(70px,11vh,120px)} .book-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 340px; gap:clamp(28px,4vw,56px);align-items:start} .book-h1{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,4.4vw,3.4rem); line-height:1.04;margin-top:10px} .book-lede{font-size:1.05rem;color:var(--on-light-soft);margin-top:12px;max-width:52ch;line-height:1.6} .bstep{margin-top:38px;padding-top:26px;border-top:1px solid var(--line)} .bstep-h{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:600; font-size:1.35rem} .bstep-h i{font-style:normal;display:grid;place-items:center;width:30px;height:30px;border-radius:50%; background:var(--ink);color:var(--on-dark);font-family:var(--body);font-size:14px;font-weight:800} .bstep-note{font-size:14px;color:var(--on-light-soft);margin-top:8px} .choices{display:grid;gap:12px;margin-top:16px} .choices-4{grid-template-columns:repeat(4,1fr)} .choices-2{grid-template-columns:repeat(2,1fr)} .choices-3{grid-template-columns:repeat(3,1fr)} .choice{position:relative;display:block;cursor:pointer} .choice input{position:absolute;opacity:0;pointer-events:none} .choice-box{display:block;height:100%;padding:16px;border-radius:14px;background:#fff; border:1.5px solid var(--line);transition:border-color .18s ease,box-shadow .18s ease} .choice-box b{display:block;font-family:var(--display);font-weight:600;font-size:1.1rem} .choice-box span{display:block;font-size:13px;color:var(--on-light-soft);margin-top:4px;line-height:1.45} .choice-box em{display:block;font-style:normal;font-weight:800;margin-top:8px;color:var(--clay-deep)} .choice input:checked + .choice-box{border-color:var(--clay); box-shadow:0 0 0 3px rgba(240,86,126,.18)} .choice input:focus-visible + .choice-box{outline:2px solid var(--ink);outline-offset:2px} @media (hover:hover) and (pointer:fine){ .choice:hover .choice-box{border-color:rgba(240,86,126,.55)} } .days{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;margin-top:16px;scroll-snap-type:x mandatory} .day{flex:0 0 74px;scroll-snap-align:start;cursor:pointer;text-align:center;padding:12px 6px;border-radius:14px; background:#fff;border:1.5px solid var(--line);font-family:var(--body);color:var(--on-light)} .day b{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--on-light-soft)} .day strong{display:block;font-family:var(--display);font-size:1.5rem;font-weight:600;margin-top:2px} .day small{display:block;font-size:11px;color:var(--on-light-soft)} .day.is-on{border-color:var(--clay);box-shadow:0 0 0 3px rgba(240,86,126,.18)} .day:disabled{opacity:.38;cursor:not-allowed} .times{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px} .time{font-family:var(--body);font-size:14px;font-weight:800;color:var(--on-light);cursor:pointer; padding:10px 16px;border-radius:999px;background:#fff;border:1.5px solid var(--line)} .time.is-on{border-color:var(--clay);background:rgba(240,86,126,.1)} .time:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through} .book .fld-l{color:var(--on-light-soft);opacity:1} .book .fld-i{color:var(--on-light);border-color:rgba(30,34,53,.24);background:#fff} .book .fld-i::placeholder{color:var(--on-light-soft);opacity:.7} .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px} .fgrid .full{grid-column:1/-1} /* the running summary - sticky beside the steps, the frosted house panel */ .bsum{position:sticky;top:110px;padding:24px;border-radius:18px;background:var(--ink);color:var(--on-dark); box-shadow:0 8px 32px rgba(0,0,0,.25),0 2px 8px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.32)} .bsum-h{font-family:var(--display);font-weight:600;font-size:1.3rem} .bsum-rows{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:9px;font-size:14px} .bsum-rows li{display:flex;justify-content:space-between;gap:12px} .bsum-rows li span:first-child{opacity:.7} .bsum-rows li.muted{opacity:.55} .bsum-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;padding-top:14px; border-top:1px solid var(--line-dark);font-weight:800} .bsum-total b{font-family:var(--display);font-size:1.7rem;font-weight:600;color:var(--amber)} .bsum-dep{font-size:13px;opacity:.78;margin-top:10px;line-height:1.5} .bsum-msg{font-size:13px;font-weight:700;color:var(--clay-deep);margin-top:10px;line-height:1.5} .bsum .btn{margin-top:18px} .bsum .btn[disabled]{opacity:.4;cursor:not-allowed} .bsum-fine{font-size:12px;opacity:.55;margin-top:12px;line-height:1.5} .booked{display:none;text-align:center;padding:36px 20px} .booked.is-on{display:block} .booked h2{font-family:var(--display);font-weight:600;font-size:clamp(2rem,4vw,3rem)} .booked p{color:var(--on-light-soft);margin:12px auto 0;max-width:46ch;line-height:1.6} @media (max-width:980px){ .book-in{grid-template-columns:1fr} .bsum{position:static} } @media (max-width:640px){ .choices-4,.choices-3{grid-template-columns:repeat(2,1fr)} .fgrid{grid-template-columns:1fr} } /* draft placeholders inside the bag drawer and the product page */ .bagline-img{position:relative;display:block;width:76px;height:92px;border-radius:3px;overflow:hidden} .bagline-img .ph,.pdp-thumb .ph{font-size:0;gap:0} .bagline-img .ph::before,.pdp-thumb .ph::before{width:22px;height:22px} .pdp-stage,.pdp-thumb{position:relative} /* the brush in the wordmark - head in raspberry, bristle dots and handle in the text color */ .wm-brush .h{fill:var(--clay)} .wm-brush .d{fill:var(--on-dark);opacity:.9} .wm-brush .s{fill:var(--on-dark)} /* ---- PHONE FIXES (wd-pp-s1 QC at 390px) ---- >> THE BOOKING COLUMN MUST BE minmax(0,1fr). The 14-day strip is a long flex row, and a plain 1fr track grows to its min-content width - the whole form ran off the right edge. >> THE BAR: wordmark + pill + Bag + burger did not fit 350px, so the burger fell off the screen. The pill drops to "Book" and the wordmark steps down. */ .book-in > *{min-width:0} @media (max-width:980px){ .book-in{grid-template-columns:minmax(0,1fr)} } @media (max-width:700px){ .nav-links{gap:12px} .wm-main{font-size:18px} .wm-sub{font-size:7px;letter-spacing:.2em;margin-top:4px} .nav-creators{padding:7px 13px!important;font-size:13px;white-space:nowrap} .nb-long{display:none} } /* ---- HERO TEXT CENTERED, OVER THE PICTURE (owner, wd-pp-s1 review) ---- Woof Gang and Barkbus both center their hero copy over the video. Applies to the home and grooming heroes. The scrim goes even (was a bottom-up fade for bottom-left copy) so the middle of the frame, where the words now sit, is the part that is darkened. */ .hero{align-items:center;justify-content:center} .hero-copy{text-align:center;margin:0 auto;padding:0 var(--pad);max-width:900px} .hero-sub{margin:0 auto} .hero-cta{justify-content:center} .hero::after{background:radial-gradient(ellipse 70% 60% at 50% 52%,rgba(27,35,64,.55) 0%,rgba(27,35,64,.3) 55%,rgba(27,35,64,.15) 100%)} /* the draft label moves to the bottom so it never sits under the headline */ .hero .hero-ph{align-items:end;padding-bottom:6vh} .hero .hero-ph span{transform:none} /* the home helper is two sentences (owner copy, wd-pp-s1) - wider measure so it sits in 3 lines, not 5 */ .hero-sub{max-width:52ch} /* two lines, always: "From everyday messy / to pawfectly polished." The column widens so the longer line fits on a laptop, and on a phone the size follows the screen width so neither line wraps a second time. */ .hero-copy{max-width:1180px} @media (max-width:700px){ .hero-h1{font-size:8.2vw} } /* ================================================================== THE SHOP - DEALT CARDS, PINNED (home page, locked wd-pp-s1) Chosen from 5 sandbox options. Replaces Veloura's category deck on the home page; the .deck rules above still drive Best sellers. ================================================================== */ .deal-head{text-align:center;max-width:760px;margin:0 auto clamp(36px,6vh,64px)} .deal-sec{background:var(--cream);color:var(--on-light)} .deal-track{position:relative;height:210svh} /* the stage pins for one screen of scroll - that scroll IS the deal */ .deal-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column; justify-content:center;padding:clamp(70px,10vh,100px) var(--pad) 30px} .deal-stage .deal-head{margin-bottom:clamp(20px,4vh,44px)} /* card width is solved from the HEIGHT left under the heading, so four cards always fit a laptop screen */ .deal-grid{display:grid;justify-content:center;gap:clamp(14px,2vw,28px); grid-template-columns:repeat(4,min(270px,20vw,calc((100svh - 360px) * .76)))} .deal{display:block;will-change:transform} .deal .pframe{aspect-ratio:4/5} .deal-l{display:block;padding-top:12px;font-family:var(--display);font-weight:600;font-size:1.2rem;text-align:center} .deal-l em{display:block;font-family:var(--body);font-style:normal;font-size:13px;font-weight:700;color:var(--on-light-soft);margin-top:3px} @media (hover:hover) and (pointer:fine){.deal.is-down:hover .pframe{box-shadow:0 0 0 3px var(--clay),0 18px 44px rgba(30,34,53,.22)}} @media (max-width:760px){ .deal-grid{grid-template-columns:repeat(2,min(43vw,calc((100svh - 330px) * .37)));gap:14px 12px} .deal-l{font-size:1.05rem;padding-top:8px}.deal-l em{font-size:12px} } @media (prefers-reduced-motion:reduce){.deal-track{height:auto}.deal-stage{position:static;height:auto;padding:100px var(--pad)}} /* ================================================================== GROOMING - MESSY TO POLISHED (home page, locked wd-pp-s1) Chosen from 4 sandbox options. Each service needs a BEFORE and an AFTER shot. ================================================================== */ .g-sec{background:var(--ink);color:var(--on-dark)} .g-head{text-align:center;max-width:760px;margin:0 auto;padding:clamp(80px,12vh,130px) var(--pad) clamp(30px,5vh,50px)} .chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .chips li{font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;background:rgba(255,248,240,.09);border:1px solid var(--line-dark)} .g-price{font-family:var(--display);font-weight:600;font-size:1.6rem;color:var(--amber);margin-top:12px} .g-name{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.1;margin:8px 0 10px} .g-say{font-size:1rem;line-height:1.55;opacity:.88;max-width:40ch} .g-tag{font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--amber)} .ph-mess{background:linear-gradient(140deg,#8C7A6B 0%,#5E5148 60%,#3E3631 100%);color:rgba(255,248,240,.65)} .ph-mess::before{filter:grayscale(1) brightness(1.6)} .wipe-track{position:relative;height:190svh} .wipe-stage{position:sticky;top:0;height:100svh;overflow:hidden;touch-action:pan-y;cursor:ew-resize} .wipe-stage .ph{font-size:14px} .wipe-after{clip-path:inset(0 0 0 100%)} .wipe-line{position:absolute;top:0;bottom:0;left:100%;width:3px;margin-left:-1.5px;background:#fff;z-index:3; box-shadow:0 0 12px rgba(0,0,0,.4)} .wipe-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%; display:grid;place-items:center;background:#fff;color:var(--ink);font-weight:800;font-size:14px;box-shadow:0 6px 18px rgba(0,0,0,.35)} .wipe-copy{position:absolute;left:var(--pad);bottom:clamp(28px,6vh,60px);z-index:4;max-width:460px;padding:24px 26px;border-radius:18px; background:rgba(27,35,64,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line-dark); box-shadow:0 8px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.32); opacity:0;transform:translateY(24px)} @media (max-width:700px){.wipe-copy{left:12px;right:12px;bottom:14px;padding:18px}.wipe-copy .g-say{display:none}} /* phones: the wipe is scroll-only, so no grab cursor and no drag knob - just the line (owner, wd-pp-s1) */ @media (hover:none),(pointer:coarse){ .wipe-stage{cursor:auto} .wipe-knob{display:none} } /* ================================================================== HOW BOOKING WORKS - THE BOOKING TIMELINE (home page, locked wd-pp-s1) From the saved groom timeline (inspiration-design-examples-md/components/saved-options/). Owner: it makes the visitor read each step - use it wherever steps or points need emphasis. ================================================================== */ .tl-sec{padding:0} .tl-track{position:relative;height:230svh} .tl-stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:80px var(--pad) 40px} .tl-head{text-align:center;margin-bottom:clamp(30px,6vh,60px)} .tl-head .steps-h2{max-width:none} .tl{position:relative;list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;max-width:1180px;margin:0 auto;width:100%} .tl-rail{position:absolute;left:10%;right:10%;top:17px;height:4px;border-radius:4px;background:rgba(30,34,53,.12)} .tl-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;background:var(--clay)} .tl-brush{position:absolute;top:-12px;left:10%;width:24px;height:60px;margin-left:-12px;z-index:3;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 62'%3E%3Cpath fill='%231B2340' d='M12 .5C18.1.5 23 6.6 23 14c0 6-3.2 11-7.7 12.8-.3 1.7-.3 3.2.1 5.2l1.8 20c.4 5-1.8 9-5.2 9s-5.6-4-5.2-9l1.8-20c.4-2 .4-3.5.1-5.2C4.2 25 1 20 1 14 1 6.6 5.9.5 12 .5z'/%3E%3Cellipse fill='%23F0567E' cx='12' cy='14' rx='8.6' ry='11'/%3E%3C/svg%3E") center/contain no-repeat;transform:rotate(90deg)} .tl-stop{position:relative;text-align:center;padding-top:54px;opacity:.38;transition:opacity .3s ease} .tl-stop.on{opacity:1} .tl-dot{position:absolute;top:2px;left:50%;width:34px;height:34px;margin-left:-17px;border-radius:50%;display:grid;place-items:center; background:var(--cream);border:3px solid rgba(30,34,53,.2);font:800 14px var(--body);color:var(--on-light-soft)} .tl-stop.on .tl-dot{border-color:var(--clay);background:var(--clay);color:#fff} .tl-stop b{display:block;font-family:var(--display);font-weight:600;font-size:1.2rem;color:var(--on-light)} .tl-stop span{display:block;font-size:14px;line-height:1.5;color:var(--on-light-soft);margin:6px auto 0;max-width:24ch} .tl-cta{text-align:center;margin-top:clamp(30px,6vh,56px)} /* the dot is a span too - keep the step-text rule off it */ .tl-stop .tl-dot{display:grid;margin:0 0 0 -17px;max-width:none;font-size:14px;line-height:1} @media (max-width:760px){ .tl{grid-template-columns:1fr;gap:0;max-width:340px} .tl-rail{left:15px;right:auto;top:17px;bottom:40px;width:4px;height:auto} .tl-fill{width:auto;right:0;height:0} .tl-brush{left:6px;top:0;margin-left:0;transform:none;width:18px;height:46px} .tl-stop{text-align:left;padding:4px 0 18px 52px} .tl-stop .tl-dot{top:0;left:0;margin:0} .tl-stop b{font-size:1.1rem}.tl-stop span{margin:3px 0 0;max-width:none;font-size:13px} .tl-head{margin-bottom:22px}.tl-head .steps-h2{font-size:1.7rem} .tl-cta{margin-top:16px} } /* phone: the snap was pinning card 1 to the screen edge, ignoring the row's left padding. scroll-padding makes the snap point respect it, so both ends get the same gap (owner, wd-pp-s1) */ @media (max-width:820px){ .trend-row{scroll-padding-inline:var(--pad)} } /* reviews sub-line: the site's own star graphic, larger, left of the score - Ridgeline's hero trust line, in this site's stars (owner, wd-pp-s1) */ .revs-sub{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px} .revs-sub b{font-weight:800;opacity:1} .revs-stars{width:98px;height:17px;background-size:19.6px 17px} .revs-stars::before{background-size:19.6px 17px} /* the line was faded as a whole, which dulled the stars - fade the words only */ .revs-sub{opacity:1;color:rgba(255,248,240,.72)} .revs-sub b{color:var(--on-dark)} /* ---------------- FOOTER SOCIAL ICONS (owner, wd-pp-s1) ---------------- >> COPIED VALUE FOR VALUE FROM GCH's FOOTER (.socials + .foot .socials). Size, radius, gap, the two outer shadows, the lit top edge and the shaded bottom edge are all GCH's numbers. ONLY THE COLORS CHANGED: GCH's cream-and-brown becomes this site's cream-and-navy - GCH's brown ink (#3A2410, rgba 90,56,20 / 60,34,10) maps to --ink (27,35,64 / 30,34,53). */ .socials{display:flex;gap:.45rem;margin-top:4px} .socials a{ width:24px;height:24px;border-radius:50%;display:grid;place-items:center; background:linear-gradient(180deg,var(--cream),var(--sand)); border:1px solid rgba(30,34,53,.26); box-shadow:0 6px 12px rgba(10,14,30,.28),inset 0 2px 0 rgba(255,255,255,.95),inset 0 -3px 0 rgba(30,34,53,.20); transition:transform .16s;opacity:1!important} .socials svg{width:12px;height:12px;fill:var(--ink)} @media (hover:hover) and (pointer:fine){ .socials a:hover{transform:translateY(-2px);text-decoration:none} } /* ================================================================== GROOMING PAGE - PRICES ON A CHALKBOARD + GOOD TO KNOW SPLIT WITH PHOTO, PAW-PRINT GROUND AND THE DOODLE STICKER (locked wd-pp-s1, sandbox option 4 - options 1 and 2 combined). The chalkboard is a CSS STAND-IN until the Leo texture exists (GCH's flatten-texture.py route). The line-drawn dog sits beside the Good to know heading (wd-s41). ================================================================== */ /* ---- PRICES ON A CHALKBOARD (Leo texture T1, wired wd-s41) ---- */ .menu.chalk{position:relative;color:var(--on-dark); background:#262B2A url("https://media.7starwebstudio.com/example/pawfectly-polished/images/chalk-bg.jpg") center/cover; box-shadow:inset 0 0 0 14px #6B4A2E,inset 0 0 0 16px #4A3220,inset 0 0 60px rgba(0,0,0,.55)} .menu.chalk .kicker-dark{color:var(--on-dark);opacity:.7} .menu.chalk .menu-h2,.menu.chalk .info-h2{color:var(--on-dark)} .menu.chalk .menu-sub{color:rgba(255,248,240,.75)}.menu.chalk .menu-sub b{color:var(--on-dark)} .menu.chalk .size{background:rgba(255,255,255,.05);border-color:rgba(255,248,240,.22);border-style:dashed} .menu.chalk .size span{color:rgba(255,248,240,.7)} .menu.chalk .price-table th,.menu.chalk .price-table td{border-bottom-color:rgba(255,248,240,.18);border-bottom-style:dashed} .menu.chalk .price-table thead th{color:rgba(255,248,240,.6)} .menu.chalk .price-table td:first-child span{color:rgba(255,248,240,.68)} .menu.chalk .price-table td.p{color:var(--amber);font-family:var(--display);font-weight:600;font-size:1.3rem} .menu.chalk .price-table td.p::before{color:rgba(255,248,240,.6)} .menu.chalk .addon{background:rgba(255,255,255,.05);border-color:rgba(255,248,240,.22);border-style:dashed} .menu.chalk .addon span{color:rgba(255,248,240,.68)} .menu.chalk .addon em{color:var(--amber)} .menu.chalk .quiet{color:var(--on-dark)} /* ---- GOOD TO KNOW, SPLIT WITH A CALM PHOTO ---- */ .know-in.split{max-width:1180px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:start} .know-photo{position:sticky;top:110px;aspect-ratio:4/5;border-radius:18px;overflow:hidden; box-shadow:0 18px 44px rgba(30,34,53,.18),0 4px 12px rgba(30,34,53,.12)} .know-photo .ph{font-size:13px} @media (max-width:860px){.know-in.split{grid-template-columns:1fr}.know-photo{position:relative;top:0;aspect-ratio:16/11}} /* ---- GOOD TO KNOW, CREAM + A LINE-DRAWN DOG + FAINT PAW PRINTS ---- */ .know.doodle{position:relative;overflow:hidden;background-color:var(--cream); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23F0567E' fill-opacity='.07' transform='rotate(-20 30 30)'%3E%3Cellipse cx='30' cy='36' rx='8' ry='7'/%3E%3Cellipse cx='20' cy='26' rx='3.4' ry='4.3'/%3E%3Cellipse cx='27' cy='21' rx='3.4' ry='4.5'/%3E%3Cellipse cx='34' cy='21' rx='3.4' ry='4.5'/%3E%3Cellipse cx='41' cy='26' rx='3.4' ry='4.3'/%3E%3C/g%3E%3Cg fill='%23F0567E' fill-opacity='.07' transform='rotate(15 90 90)'%3E%3Cellipse cx='90' cy='96' rx='8' ry='7'/%3E%3Cellipse cx='80' cy='86' rx='3.4' ry='4.3'/%3E%3Cellipse cx='87' cy='81' rx='3.4' ry='4.5'/%3E%3Cellipse cx='94' cy='81' rx='3.4' ry='4.5'/%3E%3Cellipse cx='101' cy='86' rx='3.4' ry='4.3'/%3E%3C/g%3E%3C/svg%3E")} .know.doodle .know-in{position:relative;z-index:1} /* ---- HYBRID: split photo + paw-print ground ---- */ .know-photo-wrap{position:sticky;top:110px} .know-photo-wrap .know-photo{position:relative;top:0} @media (max-width:860px){ .know-photo-wrap{position:relative;top:0;margin-bottom:40px} } /* ---- THE BLUSH PAW-PRINT GROUND (owner, wd-pp-s1) ---- ONE rule for both surfaces so they cannot drift: the Book page and the Grooming page's Good to know. Pale blush, raspberry paw prints at 12% (7% vanished on pink). */ .book,.know.doodle,.also,.coll.coll-blush{background-color:var(--blush-lt);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23F0567E' fill-opacity='.12' transform='rotate(-20 30 30)'%3E%3Cellipse cx='30' cy='36' rx='8' ry='7'/%3E%3Cellipse cx='20' cy='26' rx='3.4' ry='4.3'/%3E%3Cellipse cx='27' cy='21' rx='3.4' ry='4.5'/%3E%3Cellipse cx='34' cy='21' rx='3.4' ry='4.5'/%3E%3Cellipse cx='41' cy='26' rx='3.4' ry='4.3'/%3E%3C/g%3E%3Cg fill='%23F0567E' fill-opacity='.12' transform='rotate(15 90 90)'%3E%3Cellipse cx='90' cy='96' rx='8' ry='7'/%3E%3Cellipse cx='80' cy='86' rx='3.4' ry='4.3'/%3E%3Cellipse cx='87' cy='81' rx='3.4' ry='4.5'/%3E%3Cellipse cx='94' cy='81' rx='3.4' ry='4.5'/%3E%3Cellipse cx='101' cy='86' rx='3.4' ry='4.3'/%3E%3C/g%3E%3C/svg%3E")} /* ---- THE PERIWINKLE PAW-PRINT GROUND - the shop (owner, wd-pp-s1) ---- Pink = the salon (Book, Good to know), periwinkle = the shop. Navy paw prints at 8%. On .coll, so all five category pages and Shop All carry it. */ .coll{background-color:var(--peri-lt);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%231B2340' fill-opacity='.08' transform='rotate(-20 30 30)'%3E%3Cellipse cx='30' cy='36' rx='8' ry='7'/%3E%3Cellipse cx='20' cy='26' rx='3.4' ry='4.3'/%3E%3Cellipse cx='27' cy='21' rx='3.4' ry='4.5'/%3E%3Cellipse cx='34' cy='21' rx='3.4' ry='4.5'/%3E%3Cellipse cx='41' cy='26' rx='3.4' ry='4.3'/%3E%3C/g%3E%3Cg fill='%231B2340' fill-opacity='.08' transform='rotate(15 90 90)'%3E%3Cellipse cx='90' cy='96' rx='8' ry='7'/%3E%3Cellipse cx='80' cy='86' rx='3.4' ry='4.3'/%3E%3Cellipse cx='87' cy='81' rx='3.4' ry='4.5'/%3E%3Cellipse cx='94' cy='81' rx='3.4' ry='4.5'/%3E%3Cellipse cx='101' cy='86' rx='3.4' ry='4.3'/%3E%3C/g%3E%3C/svg%3E")} /* ---- PRODUCT PAGE (owner, wd-pp-s1, sandbox option 6) ---- Top: the shop's periwinkle, with ONE big faint paw print tilted clockwise behind the buy column (toes behind the name and price, pad behind the size pills and Add to bag). Bottom ('What people grab with it'): the blush paw-print ground - on the shared rule above. */ body.pdp-body,.pdp{background:var(--peri-lt)} .pdp{position:relative;overflow:hidden} .pdp-in{position:relative;z-index:1} .pdp::before{content:"";position:absolute;z-index:0;width:clamp(360px,44vw,640px);aspect-ratio:1;opacity:.06; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%231B2340'%3E%3Cellipse cx='16' cy='22' rx='7.5' ry='6.5'/%3E%3Cellipse cx='7' cy='13' rx='3.2' ry='4'/%3E%3Cellipse cx='13' cy='8' rx='3.2' ry='4.2'/%3E%3Cellipse cx='19' cy='8' rx='3.2' ry='4.2'/%3E%3Cellipse cx='25' cy='13' rx='3.2' ry='4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;right:4vw;top:120px;transform:rotate(18deg)} @media (max-width:860px){.pdp::before{right:-20vw;top:auto;bottom:40px;width:100vw}} /* ---- ORDER PAGES - paw prints on the navy (owner, wd-pp-s1) ---- Navy kept. Two big faint periwinkle paws (top-left, bottom-right), two medium raspberry paws (top-right, bottom-left), each tilted differently, as if a dog walked through. */ .orderpage{position:relative;overflow:hidden} .orderpage-in{position:relative;z-index:1} .op-paw{position:absolute;z-index:0;aspect-ratio:1;pointer-events:none} .op-big{width:clamp(220px,26vw,380px);opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23ECEFF8'%3E%3Cellipse cx='16' cy='22' rx='7.5' ry='6.5'/%3E%3Cellipse cx='7' cy='13' rx='3.2' ry='4'/%3E%3Cellipse cx='13' cy='8' rx='3.2' ry='4.2'/%3E%3Cellipse cx='19' cy='8' rx='3.2' ry='4.2'/%3E%3Cellipse cx='25' cy='13' rx='3.2' ry='4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat} .op-med{width:clamp(130px,14vw,210px);opacity:.16;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23F0567E'%3E%3Cellipse cx='16' cy='22' rx='7.5' ry='6.5'/%3E%3Cellipse cx='7' cy='13' rx='3.2' ry='4'/%3E%3Cellipse cx='13' cy='8' rx='3.2' ry='4.2'/%3E%3Cellipse cx='19' cy='8' rx='3.2' ry='4.2'/%3E%3Cellipse cx='25' cy='13' rx='3.2' ry='4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat} .op-1{left:18%;top:8%;transform:rotate(-16deg)} .op-2{right:5%;top:12%;transform:rotate(24deg)} .op-3{left:8%;bottom:6%;transform:rotate(-8deg)} .op-4{right:12%;bottom:-4%;transform:rotate(14deg)} @media (max-width:700px){ .op-big{width:46vw}.op-med{width:28vw} .op-1{left:-8%;top:6%}.op-2{right:-4%;top:14%}.op-3{left:4%;bottom:10%}.op-4{right:-10%;bottom:-2%} } /* category pages alternate (owner, wd-pp-s1): Food and Toys & Gear blush (.coll-blush, on the shared blush rule), Treats and Bath & Brush periwinkle, Shop All periwinkle */ /* ---------------- REAL IMAGES (wired wd-s41) ---------------- The wipe pair, the calm-dog photo and the line-dog sticker. Every other slot reuses a Veloura image class (.shot, .tshot, .pshot, .rshot, .pdp-main, .hero-img, .hook-img). */ .wipe-img,.know-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* ---- PAWS AND BISCUITS - the home Shop section (owner, wd-s41) ---- The blush / periwinkle tile, same 120px pattern, on cream: a navy paw print (8%, the brand color the shop pages' paws use - owner) and a raspberry bone biscuit (12%) per tile - a treat because it's the shop. The bone is drawn as one group with group opacity, so its overlapping shapes don't darken. It sits on the PINNED stage, not the section, so the prints hold still while the cards are dealt (owner). */ :root{--tile-pawbone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%231B2340' fill-opacity='.08' transform='rotate(-20 30 30)'%3E%3Cellipse cx='30' cy='36' rx='8' ry='7'/%3E%3Cellipse cx='20' cy='26' rx='3.4' ry='4.3'/%3E%3Cellipse cx='27' cy='21' rx='3.4' ry='4.5'/%3E%3Cellipse cx='34' cy='21' rx='3.4' ry='4.5'/%3E%3Cellipse cx='41' cy='26' rx='3.4' ry='4.3'/%3E%3C/g%3E%3Cg fill='%23F0567E' opacity='.12' transform='translate(90 92) rotate(-25) scale(1.08) translate(-16 -16)'%3E%3Ccircle cx='6.5' cy='11.5' r='4.6'/%3E%3Ccircle cx='6.5' cy='20.5' r='4.6'/%3E%3Ccircle cx='25.5' cy='11.5' r='4.6'/%3E%3Ccircle cx='25.5' cy='20.5' r='4.6'/%3E%3Crect x='6.5' y='12' width='19' height='8' rx='2'/%3E%3C/g%3E%3C/svg%3E")} .deal-stage{background-color:var(--cream);background-image:var(--tile-pawbone)} /* the same tile on Good to know and the five category pages, each keeping its own ground color (owner, wd-s41). Book and the product pages' 'What people grab' keep the plain paw tile. */ .know.doodle,.coll,.coll.coll-blush{background-image:var(--tile-pawbone)} /* Book: the same paw tile, colors alternating - raspberry and navy, the shop section's two paw colors - on its own blush ground. Paws only, no biscuits (owner, wd-s41). */ .book{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23F0567E' fill-opacity='.12' transform='rotate(-20 30 30)'%3E%3Cellipse cx='30' cy='36' rx='8' ry='7'/%3E%3Cellipse cx='20' cy='26' rx='3.4' ry='4.3'/%3E%3Cellipse cx='27' cy='21' rx='3.4' ry='4.5'/%3E%3Cellipse cx='34' cy='21' rx='3.4' ry='4.5'/%3E%3Cellipse cx='41' cy='26' rx='3.4' ry='4.3'/%3E%3C/g%3E%3Cg fill='%231B2340' fill-opacity='.08' transform='rotate(15 90 90)'%3E%3Cellipse cx='90' cy='96' rx='8' ry='7'/%3E%3Cellipse cx='80' cy='86' rx='3.4' ry='4.3'/%3E%3Cellipse cx='87' cy='81' rx='3.4' ry='4.5'/%3E%3Cellipse cx='94' cy='81' rx='3.4' ry='4.5'/%3E%3Cellipse cx='101' cy='86' rx='3.4' ry='4.3'/%3E%3C/g%3E%3C/svg%3E")} /* ---- SCATTERED PAW PRINTS (owner, wd-s41) ---- The thank-you page's prints, as one shared set: sizes copied from .op-big / .op-med, color picked per print. The print is a mask, so one shape serves every color. Placement is inline on each print. Used on the grooming banner (small only) and the booking timeline (both). */ .paws{overflow:hidden;isolation:isolate} /* no position here - the stages must stay sticky */ .g-band{position:relative} .spr{position:absolute;z-index:-1;aspect-ratio:1;pointer-events:none;background:var(--c);opacity:var(--o); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cellipse cx='16' cy='22' rx='7.5' ry='6.5'/%3E%3Cellipse cx='7' cy='13' rx='3.2' ry='4'/%3E%3Cellipse cx='13' cy='8' rx='3.2' ry='4.2'/%3E%3Cellipse cx='19' cy='8' rx='3.2' ry='4.2'/%3E%3Cellipse cx='25' cy='13' rx='3.2' ry='4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cellipse cx='16' cy='22' rx='7.5' ry='6.5'/%3E%3Cellipse cx='7' cy='13' rx='3.2' ry='4'/%3E%3Cellipse cx='13' cy='8' rx='3.2' ry='4.2'/%3E%3Cellipse cx='19' cy='8' rx='3.2' ry='4.2'/%3E%3Cellipse cx='25' cy='13' rx='3.2' ry='4'/%3E%3C/svg%3E") center/contain no-repeat} .spr-lg{width:clamp(220px,26vw,380px)} .spr-sm{width:clamp(130px,14vw,210px)} .spr-pink{--c:var(--clay)} .spr-navy{--c:var(--ink)} .spr-pale{--c:var(--peri-lt)} /* opacity per ground: dark band = the thank-you page's values; cream = the tile's values */ .g-band .spr-pink,.deck-dark .spr-pink{--o:.16} .g-band .spr-pale,.deck-dark .spr-pale{--o:.08} .deck-dark .spr-lg.spr-pink{--o:.10} .deck-dark .spr-lg.spr-pale{--o:.06} .tl-stage .spr-pink{--o:.12} .tl-stage .spr-navy{--o:.08} .tl-stage .spr-lg.spr-pink{--o:.09} .tl-stage .spr-lg.spr-navy{--o:.06} @media (max-width:700px){ .spr-lg{width:46vw} .spr-sm{width:24vw} .g-band .spr:nth-of-type(n+5){display:none} } /* the bone biscuit as a scattered print - same sizes as the paws (.spr-sm = medium, .spr-lg = large). Most loved: one medium and one large per color (owner, wd-s41). */ .spr-bone{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='6.5' cy='11.5' r='4.6'/%3E%3Ccircle cx='6.5' cy='20.5' r='4.6'/%3E%3Ccircle cx='25.5' cy='11.5' r='4.6'/%3E%3Ccircle cx='25.5' cy='20.5' r='4.6'/%3E%3Crect x='6.5' y='12' width='19' height='8' rx='2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='6.5' cy='11.5' r='4.6'/%3E%3Ccircle cx='6.5' cy='20.5' r='4.6'/%3E%3Ccircle cx='25.5' cy='11.5' r='4.6'/%3E%3Ccircle cx='25.5' cy='20.5' r='4.6'/%3E%3Crect x='6.5' y='12' width='19' height='8' rx='2'/%3E%3C/svg%3E")} /* ---- THE LINE-DRAWN DOG - a cream sticker beside the Good to know heading (owner, wd-s41; it used to sit on the photo's corner). The drawing is portrait, so it is fitted in a square. ---- */ .know-title{display:flex;align-items:center;justify-content:space-between;gap:20px} .know-title .doodle-dog{flex:none;margin-right:40px;width:clamp(110px,10vw,140px);aspect-ratio:1/1;height:auto;object-fit:contain; background:var(--cream);border-radius:50%;padding:12px;box-shadow:0 10px 26px rgba(30,34,53,.18)} @media (max-width:700px){.know-title .doodle-dog{width:80px;padding:7px;margin-right:28px;position:relative;top:14px}}