/* Snappalm · Shopify Storefront — shared styles Editorial direction. Roca-led, Inter body, JetBrains Mono labels. Imports from ../../colors_and_type.css for all tokens. */ /* Reset & base */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { overflow-x: hidden; } /* The page ends on the dark footer. Give that same dark background so iOS Safari's rubber-band overscroll at the bottom blends into the footer instead of painting a default white bar. overscroll-behavior tames the bounce on browsers that support it. */ html { background: var(--sp-tetsukon); overscroll-behavior-y: none; } body { overflow-x: clip; overscroll-behavior-y: none; } body { font-family: var(--sp-font-sans); color: var(--sp-fg); background: var(--sp-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; line-height: 1.5; } img { max-width: 100%; display: block; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-select: none; } a { color: inherit; text-decoration: none; } button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; padding: 0; } /* Layout tokens */ :root { --sh-nav-h: 50px; --sh-pad-side: clamp(20px, 5vw, 64px); --sh-max: 1440px; --sh-radius: 22px; /* Standard inset for anything pinned to a section's bottom edge (fine print, mobile hero CTA, etc.). Keep bottom-pinned elements on this. */ --sh-bottom-inset: 28px; } /* ─── Navigation ─── */ .sh-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; /* Transparent fixed wrapper — the capsule floats OVER the hero/content (Nomad-style); the hero runs to the top behind it. */ padding: clamp(10px, 1.1vw, 15px) clamp(14px, 2.4vw, 28px); background: transparent; } .sh-nav__inner { max-width: var(--sh-max); margin: 0 auto; height: var(--sh-nav-h); padding: 0 clamp(20px, 2.4vw, 36px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 48px; /* The floating capsule itself */ background: rgba(248, 246, 241, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--sp-tetsukon-06); border-radius: 999px; /* full pill — matches .sh-btn and the badge pills */ box-shadow: var(--sp-shadow-2); } /* Mobile: keep the pill nav IN-FLOW (not overlaying the hero) so the tall mobile hero keeps its full height as before. The float-over-hero behaviour is desktop-only. */ @media (max-width: 860px) { /* Mobile: keep the pill nav IN-FLOW (sticky, NOT fixed) so the tall mobile hero keeps its full height — this is the original behavior. Reverted from position:fixed, which pulled the bar out of flow and shortened the mobile header / shifted the hero image. */ .sh-nav { position: sticky; } /* ...but WHILE THE MENU IS OPEN, pin the bar (fixed). Opening the menu sets body{overflow:hidden}, which un-sticks a sticky element and drops it off-screen ("nav disappears when I open the menu lower on the page"). Switching to fixed only during the open state keeps the bar + menu on screen; the momentary in-flow→fixed shift is hidden behind the menu overlay. */ .sh-nav:has(.sh-nav__sheet.is-open) { position: fixed; } } .sh-nav__left, .sh-nav__right { display: flex; align-items: center; gap: 32px; } .sh-nav__right { justify-content: flex-end; } .sh-nav__wordmark { display: inline-flex; align-items: center; justify-self: center; height: 40px; } .sh-nav__wordmark img { height: 100%; width: auto; display: block; } .sh-nav__link { font-family: var(--sp-font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sp-fg); opacity: 0.7; transition: opacity 0.15s; } .sh-nav__link:hover { opacity: 1; } .sh-nav__cart { display: flex; align-items: center; gap: 8px; font-family: var(--sp-font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sp-fg); opacity: 0.7; transition: opacity 0.15s; } .sh-nav__cart:hover { opacity: 1; } .sh-nav__cart-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--sp-tetsukon); color: var(--sp-fg-on-dark); border-radius: 9px; font-size: 10px; letter-spacing: 0; font-weight: 500; font-family: var(--sp-font-sans); } /* ─── Nav: hamburger + mobile sheet ─── */ .sh-nav__burger { display: none; appearance: none; width: 36px; height: 36px; margin-left: -8px; padding: 0; background: transparent; border: 0; border-radius: 6px; cursor: pointer; align-items: center; justify-content: center; color: var(--sp-fg); } .sh-nav__burger:hover { background: var(--sp-tetsukon-06); } .sh-nav__burger-icon { position: relative; width: 18px; height: 12px; display: inline-block; } .sh-nav__burger-icon i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform 0.2s ease, top 0.2s ease, opacity 0.15s; } .sh-nav__burger-icon i:nth-child(1) { top: 2px; } .sh-nav__burger-icon i:nth-child(2) { top: 9px; } .sh-nav__burger-icon.is-open i:nth-child(1) { top: 5px; transform: rotate(45deg); } .sh-nav__burger-icon.is-open i:nth-child(2) { top: 5px; transform: rotate(-45deg); } .sh-nav__sheet { position: absolute; top: 100%; left: 0; right: 0; background: var(--sp-bg); border-bottom: 1px solid var(--sp-tetsukon-06); padding: 12px var(--sh-pad-side) 22px; display: flex; flex-direction: column; gap: 10px; visibility: hidden; transform: translateY(-8px); pointer-events: none; transition: transform 0.18s ease, visibility 0s linear 0.18s; z-index: 55; /* The sheet is an absolutely-positioned child of the fixed, backdrop-filtered nav. iOS/desktop Safari intermittently fails to repaint an opacity reveal in that compositing context — the menu opened (state toggled, links live) but never painted. So the reveal is gated on `visibility` + a slide, NOT opacity, and the panel is promoted to its own layer. It shows when open regardless of any opacity/compositing quirk. */ will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .sh-nav__sheet.is-open { visibility: visible; transform: translateY(0); pointer-events: auto; transition: transform 0.18s ease, visibility 0s; } /* Nomad-style: each menu item is a simple box + text (Roca upright = weight 700). */ .sh-nav__sheet-link { font-family: var(--sp-font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--sp-fg); padding: 15px 18px; border: 1px solid var(--sp-tetsukon-06); border-radius: 12px; background: var(--sp-bg-paper); text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; } .sh-nav__sheet-link:hover, .sh-nav__sheet-link:active { background: var(--sp-tetsukon-06); } .sh-nav__scrim { position: fixed; inset: var(--sh-nav-h) 0 0 0; background: rgba(41, 38, 27, 0.18); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; z-index: 48; } .sh-nav__scrim.is-open { opacity: 1; pointer-events: auto; } /* ─── Nav responsive ─── */ @media (max-width: 720px) { /* Header (MOBILE ONLY): logo LEFT, Buy (text) then Hamburger RIGHT */ .sh-nav__inner { display: flex; align-items: center; gap: 16px; } .sh-nav__wordmark { order: 0; margin-right: auto; height: 40px; flex: none; } .sh-nav__wordmark img { object-fit: contain; height: 100%; width: auto; } .sh-nav__right { order: 1; gap: 14px; flex: none; margin-right: -6px; } .sh-nav__left { order: 2; gap: 0; flex: none; } .sh-nav__burger { display: inline-flex; margin-left: 0; } /* Inline links move into the sheet on mobile */ .sh-nav__left .sh-nav__link, .sh-nav__right .sh-nav__link { display: none; } .sh-nav__cart-label { display: none; } .sh-nav__cart { gap: 0; } /* Add back the Buy button in the mobile header as a small, rounded outline button */ .sh-nav__right .sh-btn { display: inline-flex !important; align-items: center; justify-content: center; background: transparent !important; color: var(--sp-asagi-dark) !important; border: 1px solid var(--sp-asagi-dark) !important; text-decoration: none; padding: 5px 12px !important; font-size: 12px !important; font-weight: 600; border-radius: 999px !important; /* completely rounded pill shape */ box-shadow: none !important; min-height: auto; } /* ── Open menu = one seamless, full-height paper surface (no gap to the bar) ── */ .sh-nav:has(.sh-nav__sheet.is-open) { padding: 0; } .sh-nav:has(.sh-nav__sheet.is-open) .sh-nav__inner { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; background: var(--sp-bg); backdrop-filter: none; -webkit-backdrop-filter: none; } .sh-nav__sheet { height: calc(100dvh - var(--sh-nav-h)); border-bottom: 0; padding-top: 20px; overflow-y: auto; } .sh-nav__sheet .sh-nav__sheet-cta { margin-top: 6px; width: 100%; justify-content: center; border-radius: 12px; padding: 18px; font-size: 16px; } } @media (max-width: 380px) { .sh-nav__wordmark { height: 34px; } } /* ─── Buttons ─── */ .sh-btn { display: inline-flex; align-items: center; justify-content: center; padding: 18px 32px; font-family: var(--sp-font-sans); font-weight: 500; font-size: 15px; letter-spacing: -0.005em; border-radius: 999px; transition: background 0.15s, transform 0.08s; cursor: pointer; white-space: nowrap; } .sh-btn:active { transform: translateY(1px); } .sh-btn--primary { background: var(--sp-asagi-dark); color: var(--sp-fg-on-dark); } .sh-btn--sm { padding: 9px 18px; font-size: 12.5px; } .sh-btn--primary:hover { background: color-mix(in oklch, var(--sp-asagi-dark) 85%, black); } .sh-btn--dark { background: var(--sp-tetsukon); color: var(--sp-fg-on-dark); } .sh-btn--dark:hover { background: color-mix(in oklch, var(--sp-tetsukon) 85%, black); } .sh-btn--ghost { background: transparent; color: var(--sp-fg); border: 1px solid var(--sp-tetsukon-15); } .sh-btn--ghost:hover { border-color: var(--sp-tetsukon); } .sh-btn--full { width: 100%; } /* Text link with arrow */ .sh-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sp-font-sans); font-weight: 500; font-size: 14px; color: var(--sp-fg); border-bottom: 1px solid var(--sp-fg); padding-bottom: 1px; } .sh-link--quiet { border-bottom: 1px solid var(--sp-tetsukon-15); color: var(--sp-fg-muted); } .sh-link--quiet:hover { color: var(--sp-fg); border-color: var(--sp-fg); } /* ─── Common section blocks ─── */ .sh-eyebrow { font-family: var(--sp-font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sp-fg-subtle); } .sh-display { font-family: var(--sp-font-display); font-weight: 700; letter-spacing: -0.035em; line-height: 0.94; color: var(--sp-fg); text-wrap: balance; font-kerning: normal; font-feature-settings: "kern" 1, "liga" 1; margin: 0; } .sh-kern-wo { letter-spacing: -0.09em; } .sh-kern-wi { letter-spacing: -0.04em; } .sh-kern-fr { letter-spacing: -0.05em; } .sh-h2 { font-family: var(--sp-font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.02; letter-spacing: -0.03em; color: var(--sp-fg); margin: 0; text-wrap: balance; } .sh-h3 { font-family: var(--sp-font-display); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--sp-fg); margin: 0; } .sh-lede { font-family: var(--sp-font-sans); font-weight: 300; font-size: clamp(0.95rem, 0.4vw + 0.8rem, 1.0625rem); line-height: 1.55; color: var(--sp-fg-muted); max-width: 46ch; margin: 0; } .sh-body { font-family: var(--sp-font-sans); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--sp-fg-muted); max-width: 56ch; } /* ─── Page shell: keep the footer on the floor ─── Short pages (privacy-policy, terms-of-service, fit-guide) ended wherever their copy ended, so on a tall screen the footer floated mid-page and the canvas showed through below it — measured 196-299px of dead band at iPad portrait (820x1180), 2026-08-02. It was invisible only because html's background happens to be the same navy as the footer; anything that breaks that coincidence exposes it as an empty band. The shell now fills at least one viewport and the footer is pushed to the bottom. dvh here, NOT svh — this is the one place in this codebase where svh is the wrong unit and it is worth knowing why. svh is the viewport with Safari's chrome EXPANDED, i.e. deliberately the SMALLEST it ever gets. That is correct for a hero that must fit above the fold, and wrong for a floor that must REACH THE BOTTOM: it undershoots the real visible area and leaves a short band under the footer (Mark saw exactly that on iPad, 2026-08-02, after the first svh pass; iPhone looked right only because the two units happen to coincide there). dvh is the CURRENT viewport, so the footer lands on the actual bottom edge. dvh's usual hazard — reflow as the toolbar collapses on scroll — cannot bite here: this floor only binds on a page too short to scroll, and on a page long enough to scroll the content already exceeds it and min-height is inert. vh first as the fallback for any engine without dvh. Pages taller than the viewport are completely unaffected: min-height is a floor, and flex-grow on a main that already exceeds it is a no-op. /home does not use .sh-app (it renders #root > #top) and is deliberately untouched by this. */ .sh-app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } .sh-app > .sh-main { flex: 1 0 auto; } .sh-app > .sh-footer { flex: none; margin-top: auto; } /* ─── Footer ─── */ .sh-footer { background: var(--sp-tetsukon); color: var(--sp-fg-on-dark); padding: 80px var(--sh-pad-side) 48px; } .sh-footer__inner { max-width: var(--sh-max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 56px; } .sh-footer__wordmark { height: 36px; margin-bottom: 16px; } .sh-footer__wordmark img { height: 100%; width: auto; display: block; filter: invert(1) brightness(1.1); } .sh-footer__note { font-family: var(--sp-font-sans); font-weight: 300; font-size: 14px; color: rgba(244, 240, 232, 0.7); max-width: 28ch; line-height: 1.55; } .sh-footer__col-title { font-family: var(--sp-font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244, 240, 232, 0.55); margin-bottom: 18px; } .sh-footer__link { display: block; font-family: var(--sp-font-sans); font-size: 14px; color: rgba(244, 240, 232, 0.85); padding: 4px 0; transition: color 0.15s; } .sh-footer__link:hover { color: var(--sp-fg-on-dark); } .sh-footer__bottom { max-width: var(--sh-max); margin: 48px auto 0; padding-top: 28px; border-top: 1px solid rgba(244, 240, 232, 0.12); display: flex; justify-content: space-between; font-family: var(--sp-font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244, 240, 232, 0.5); } /* ─── Utility ─── */ .sh-divider { height: 1px; background: var(--sp-tetsukon-06); border: 0; margin: 0; } .sh-kinari { background: var(--sp-kinari); } .sh-dark { background: var(--sp-tetsukon); color: var(--sp-fg-on-dark); } /* ─── Fold sizing ─── Each major section slot-fits one viewport below the sticky nav. Clamp so it doesn't collapse on short laptops or balloon on tall monitors. */ :root { --sh-fold-min: 600px; --sh-fold-max: 820px; } .sh-fold { min-height: clamp(var(--sh-fold-min), calc(100vh - var(--sh-nav-h)), var(--sh-fold-max)); display: flex; flex-direction: column; justify-content: center; } /* The hero specifically uses vh-minus-nav exactly, no floor (content is tight) */ .sh-fold--hero { min-height: clamp(520px, calc(100vh - var(--sh-nav-h)), 760px); display: flex; flex-direction: column; justify-content: center; } /* ─── Mobile responsive (shared shop chrome) ─── */ @media (max-width: 720px) { .sh-shop__grid { grid-template-columns: 1fr; gap: 40px; } .sh-shipstrip__inner { grid-template-columns: 1fr; } .sh-shipfact { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--sp-tetsukon-06); } .sh-shipfact:last-child { border-bottom: 0; } .sh-footer { padding-top: 40px; } .sh-footer__note { font-size: 12px; } .sh-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; } .sh-footer__bottom { flex-direction: column; gap: 8px; } } @media (max-width: 480px) { .sh-footer__inner { grid-template-columns: 1fr; } } /* ---- Founder fact in the mobile menu (Mark 2026-07-28) -------------------------------- The sheet is height:100dvh on mobile, so with four links and a CTA there is a large dead area beneath the Buy button. flex:1 lets this block absorb exactly that leftover space and centre itself inside it. Hidden on desktop, where the sheet is a short dropdown. The rules above and below are TAPERED — a gradient that fades to nothing at both ends rather than a hard 1px border. That's what reads as an unrolled scroll instead of a table divider, and it's why they're gradients and not border-top/bottom. */ .sh-nav__fact { display: none; } @media (max-width: 860px) { .sh-nav__fact { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; /* Wider than before (Mark 2026-07-28): near-edge-to-edge so the lines breathe. */ width: 100%; padding: 26px 2px 10px; } /* Scroll edges. ::before sits above the copy, ::after below — both taper out. */ .sh-nav__fact::before, .sh-nav__fact-close::before { content: ""; display: block; width: min(100%, 30rem); height: 1px; flex: 0 0 auto; background: linear-gradient(90deg, transparent 0%, var(--sp-tetsukon-15) 18%, var(--sp-tetsukon-30) 50%, var(--sp-tetsukon-15) 82%, transparent 100%); } .sh-nav__fact::before { margin-bottom: 22px; } /* No ::after — the bottom rule lives on .sh-nav__fact-close::before instead, because a real element can never be placed after the parent's ::after in flex order, and the closing line has to sit BELOW that rule. */ .sh-nav__fact-name { margin: 0; font-family: var(--sp-font-display); font-weight: 700; font-size: clamp(1.35rem, 6vw, 1.8rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--sp-fg); text-wrap: balance; } .sh-nav__fact-line { margin: 0; max-width: 30ch; font-family: var(--sp-font-sans); font-size: 15px; line-height: 1.4; color: var(--sp-fg); text-wrap: balance; } .sh-nav__fact-age { margin: 0; font-family: var(--sp-font-display); font-weight: 700; font-size: clamp(1.05rem, 4.6vw, 1.3rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--sp-asagi-dark); } .sh-nav__fact-note { margin: 12px 0 0; max-width: 32ch; font-family: var(--sp-font-sans); font-style: italic; font-size: 13px; line-height: 1.55; color: var(--sp-fg-muted); text-wrap: pretty; } /* Closing line — sits below the bottom scroll rule (which is its own ::before). Same small size as the note above it, but upright and medium weight so it reads as the page speaking to the reader rather than another footnote about the founder. */ .sh-nav__fact-close { position: relative; margin: 24px 0 0; padding-top: 24px; max-width: 30ch; font-family: var(--sp-font-sans); font-weight: 500; font-size: 13px; line-height: 1.5; color: var(--sp-fg); text-wrap: balance; } .sh-nav__fact-close::before { position: absolute; top: 0; left: 50%; transform: translateX(-50%); } }