back up under the header without giving up sticky, and the hero already reserves --hdr-h of padding so nothing lands beneath the nav. */ margin-bottom:calc(var(--hdr-h) * -1); } /* past the hero: behave like the header on every other page */ .site-header.over.is-stuck{ background:var(--page); } .site-header.over.is-stuck .nav-list > li > a{color:var(--ink)} .site-header.over.is-stuck .nav-list > li > a:hover{color:var(--coral)} .site-header.over.is-stuck .nav-list > li > a[aria-current]{ color:var(--coral); box-shadow:inset 0 -2px 0 0 var(--coral); } .site-header.over.is-stuck .burger span{background:var(--ink)} /* No scrim. The original site lays a fully transparent header over the hero with nothing between the links and the photograph, and every darkening we tried, band or vignette, read as a bar on top of the picture. The ground under the links is chosen by the photograph instead: the home gallery paints the cat on red first. A light glyph shadow is the only insurance, and it is unmeasured: rendering text transparent makes Chrome paint the shadow through the glyph, so the sampler cannot see it. */ .site-header.over:not(.over--ink) .nav-list > li > a{text-shadow:0 1px 2px rgba(0,0,0,.35)} .site-header.over:not(.over--ink) .burger span{box-shadow:0 1px 2px rgba(0,0,0,.35)} .site-header.over.is-stuck .nav-list > li > a{text-shadow:none} .site-header.over.is-stuck .burger span{box-shadow:none} .hdr-inner{ width:min(100% - 2*var(--gap), var(--wrap)); margin-inline:auto; min-height:var(--hdr-h); display:flex;align-items:center;justify-content:space-between;gap:16px; } .brand{display:block;flex:0 0 auto;line-height:0} .brand img{width:var(--logo);height:auto} /* --- burger ------------------------------------------------------------ */ .burger{ display:none; width:46px;height:46px;padding:11px 9px; background:none;border:0;cursor:pointer; flex-direction:column;justify-content:space-between; } .burger span{ display:block;height:3px;border-radius:2px;background:var(--ink); transition:transform .28s ease, opacity .2s ease;transform-origin:center; } .site-header.over .burger span{background:#fff} body.nav-open .burger span{background:var(--ink)} body.nav-open .burger span:nth-child(1){transform:translateY(9.5px) rotate(45deg)} body.nav-open .burger span:nth-child(2){opacity:0} body.nav-open .burger span:nth-child(3){transform:translateY(-9.5px) rotate(-45deg)} /* --- nav --------------------------------------------------------------- */ .nav-list{display:flex;align-items:center;gap:clamp(14px,2.1vw,30px)} .nav-list > li{position:relative} .nav-list > li > a{ display:inline-flex;align-items:center;gap:6px; font-weight:600;font-size:clamp(14px,1.1vw,16px); text-decoration:none;color:var(--ink); padding:8px 0; white-space:nowrap; } .site-header.over .nav-list > li > a{color:#fff} .nav-list > li > a:hover{color:var(--coral)} /* current page — coral with the underline the live site uses */ .nav-list > li > a[aria-current]{ color:var(--coral); box-shadow:inset 0 -2px 0 0 var(--coral); } .chev{width:10px;height:6px;flex:0 0 auto} .sub-toggle{display:none} .sub,.sub2{ position:absolute;top:100%;left:0;min-width:210px; background:#fff;border-radius:12px;padding:8px; box-shadow:0 12px 34px rgba(0,0,0,.16); opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .18s ease, transform .18s ease, visibility .18s; } /* The Book menu sits at the right end of a right-aligned nav, so the second level opens inward. Opening outward pushed past the viewport and gave the page a horizontal scrollbar at ~1024px even while hidden. */ .sub2{top:0;right:100%;left:auto;margin-right:4px} .has-sub:hover > .sub, .has-sub:focus-within > .sub, .has-sub2:hover > .sub2, .has-sub2:focus-within > .sub2{opacity:1;visibility:visible;transform:translateY(0)} .sub a,.sub2 a{ display:block;padding:9px 14px;border-radius:8px; text-decoration:none;color:var(--ink);font-weight:500;font-size:15px;white-space:nowrap; } .sub a:hover,.sub2 a:hover{background:var(--cream);color:var(--brick)} .has-sub2{position:relative} .has-sub2 > a::after{content:"›";float:right;opacity:.5;padding-left:12px} /* Transparency alone is not a treatment: the nav has to be legible against whatever is behind it. `.over` defaults to white, which only works over dark or scrimmed artwork. Heroes on a light ground (About's cream, Pet Stay's orange panel) take the ink variant instead. */ .site-header.over.over--ink .nav-list > li > a{color:var(--ink)} .site-header.over.over--ink .nav-list > li > a:hover{color:var(--brick)} /* Brick is only 3.1:1 on Pet Stay's orange, under AA for 16px text. This deeper brown clears 6.3:1 there and 12.9:1 on About's cream, and stays in the brand's warm family rather than jumping to flat black. */ .site-header.over.over--ink .nav-list > li > a[aria-current]{ color:#4a2418; box-shadow:inset 0 -2px 0 0 #4a2418; } .site-header.over.over--ink .burger span{background:var(--ink)} /* over--ink-m: white on desktop, ink on phones. Pet Grooming's desktop hero is blue with white copy; its phone hero is a pink photograph, and the original answers that with ink copy and a coral burger square. */ @media (max-width:759px){ .site-header.over.over--ink-m .nav-list > li > a{color:var(--ink);text-shadow:none} .site-header.over.over--ink-m .burger{background:var(--coral);border-radius:0} .site-header.over.over--ink-m .burger span{background:#fff;box-shadow:none} .site-header.over.over--ink-m.is-stuck .burger{background:none} .site-header.over.over--ink-m.is-stuck .burger span{background:var(--ink)} } .nav-scrim{ position:fixed;inset:0;z-index:88; background:rgba(0,0,0,.45); border:0; } /* --- mobile nav -------------------------------------------------------- */ @media (max-width:900px){ /* same principle on a phone: 17px of clearance around a 66px mark */ :root{--hdr-h:100px;--logo:66px} .burger{display:flex} .nav{ position:fixed;inset:0 0 0 auto;z-index:95; width:min(86vw, 360px); background:#fff; padding:calc(var(--hdr-h) + 12px) 22px 40px; transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); overflow-y:auto; overscroll-behavior:contain; box-shadow:-14px 0 40px rgba(0,0,0,.18); } body.nav-open .nav{transform:translateX(0)} .nav-list{flex-direction:column;align-items:stretch;gap:0} .nav-list > li{border-bottom:1px solid var(--rule)} .nav-list > li > a, .site-header.over .nav-list > li > a{ color:var(--ink);font-size:17px;padding:15px 2px; /* room for the submenu toggle */ padding-right:52px; } .nav-list > li > a[aria-current]{box-shadow:none} .chev{display:none} .has-sub{position:relative} .sub-toggle{ display:block;position:absolute;top:4px;right:0; width:46px;height:46px;background:none;border:0;cursor:pointer; } .sub-toggle::before,.sub-toggle::after{ content:"";position:absolute;top:50%;left:50%; width:13px;height:2.5px;border-radius:2px;background:var(--ink); transform:translate(-50%,-50%);transition:transform .25s ease; } .sub-toggle::after{transform:translate(-50%,-50%) rotate(90deg)} .sub-toggle[aria-expanded="true"]::after{transform:translate(-50%,-50%) rotate(0)} .sub,.sub2{ position:static;opacity:1;visibility:visible;transform:none; box-shadow:none;background:var(--cream);border-radius:10px; padding:4px;margin:0 0 14px; display:none; } .sub2{margin:4px 0 4px 12px;background:#fff} .sub-toggle[aria-expanded="true"] + .sub{display:block} .has-sub2 > .sub2{display:block} .has-sub2 > a::after{display:none} .sub a,.sub2 a{padding:11px 14px} } /* ========================================================================== Buttons — the live site uses coral pills ========================================================================== */ .btn{ display:inline-flex;align-items:center;justify-content:center; min-height:48px;padding:13px 34px; background:var(--coral);color:#fff; font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.03em; text-transform:uppercase;text-decoration:none; border:0;border-radius:999px;cursor:pointer; transition:background .2s ease, transform .12s ease; text-align:center; } .btn:hover{background:#e06b47} .btn:active{transform:translateY(1px)} .btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed} .btn--ghost{background:transparent;color:var(--coral);box-shadow:inset 0 0 0 2px var(--coral)} .btn--ghost:hover{background:var(--coral);color:#fff} .btn--wide{width:100%} /* floating "BOOK MY PET" — the live site parks this mid-page */ .book-float{display:flex;justify-content:center;margin:0 auto} /* ========================================================================== Page furniture ========================================================================== */ .page-title{ text-align:center; font-family:var(--display); font-size:clamp(26px, 4.6vw, 44px); letter-spacing:.01em; color:var(--ink); /* Interior page headings sat straight under the sticky header with barely any air. The original gives the title roughly 40px of clearance before it starts, which reads far calmer on a phone. */ padding:var(--sp-top) var(--gap) clamp(26px,4.5vw,40px); text-transform:uppercase; } .eyebrow{ text-align:center;font-weight:600;font-size:13px;letter-spacing:.12em; text-transform:uppercase;color:var(--slate); } .section{padding-block:var(--sp-sec)} .section--cream{background:var(--cream)} .section--white{background:#fff} .panel{ background:var(--panel); border-radius:var(--r); padding:clamp(22px,4vw,46px); } /* ========================================================================== Footer ========================================================================== */ .site-footer{ background:#fff; padding:clamp(38px,6vw,64px) var(--gap) clamp(44px,7vw,72px); text-align:center; } /* footer links measured 30px and 38px tall on a phone; grow the hit area only for touch so the mouse layout stays as drawn */ @media (pointer:coarse){ footer a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center} } .foot-word{ display:inline-block; font-family:var(--display); font-size:clamp(19px,2.6vw,26px); color:var(--slate); letter-spacing:.02em; text-decoration:none; } .social{display:flex;justify-content:center;gap:12px;margin-top:18px} .social a{ display:grid;place-items:center; width:38px;height:38px;border-radius:50%; background:var(--coral);color:#fff; transition:background .2s ease; } .social a:hover{background:#e06b47} .social svg{width:19px;height:19px} /* ========================================================================== Utilities ========================================================================== */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } .center{text-align:center} /* ========================================================================== iOS / Safari hardening ========================================================================== */ /* Kill the grey flash Safari paints on tap, but keep a real pressed state so the control still feels responsive. */ a,button,summary,[role="button"]{-webkit-tap-highlight-color:transparent} a:active,button:active{opacity:.86} /* Notch and home-indicator clearance. The header and footer run edge to edge, so on an iPhone in landscape the content would otherwise sit under the rounded corners. */ .hdr-inner{ padding-left:max(0px, env(safe-area-inset-left)); padding-right:max(0px, env(safe-area-inset-right)); } .site-footer{ padding-bottom:calc(clamp(44px,7vw,72px) + env(safe-area-inset-bottom)); padding-left:max(var(--gap), env(safe-area-inset-left)); padding-right:max(var(--gap), env(safe-area-inset-right)); } @media (max-width:900px){ .nav{ padding-right:max(22px, env(safe-area-inset-right)); padding-bottom:calc(40px + env(safe-area-inset-bottom)); /* the drawer scrolls on its own; keep momentum scrolling on older iOS */ -webkit-overflow-scrolling:touch; } } /* Safari's 100vh includes the collapsing toolbar, so a full-height hero jumps as the user scrolls. dvh tracks the visible viewport; the vh line stays as the fallback for browsers without it. */ @supports (height:100dvh){ .home-hero{min-height:min(78dvh, 600px)} } @media (min-width:901px){ @supports (height:100dvh){ .home-hero{min-height:clamp(440px, 70dvh, 760px)} } } /* Horizontal rails (the reviews row) should keep momentum scrolling and stop the page rubber-banding sideways with them. */ [class*="__rail"]{ -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }