@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); /* ============================================================ MARKED BY HAND — Mocha Mousse (light) Warm, inviting light theme. Same class structure as the dark "Workshop" theme, so every page works unchanged. To try another palette, paste a new :root block from the palette explorer — but note the light/dark-sensitive rules below already assume LIGHT. Dark theme is kept in theme-dark-backup.css. ============================================================ */ :root{ /* surfaces */ --graphite:#F8F4EE; /* page background — warm latte (3 shades lighter, 2026-07-06) */ --graphite-2:#FCF8F2; /* header / footer / cards */ --panel:#EAE0D4; /* inputs, insets */ --line:#D9CCBA; /* hairline borders */ /* ink */ --bone:#3B2F26; /* primary text — espresso */ --lede:#5C4F44; /* body copy (softer than full ink) */ --muted:#8E7D6B; /* captions, mono labels */ --faint:#A99A88; /* corner marks, ghost data */ /* accents */ --amber:#A47864; /* Mocha Mousse — primary action */ --amber-soft:#8A5E4C; /* links (deeper, for contrast on cream) */ --primary-ink:#FFF7F0; /* text on primary buttons */ --cyan:#7A9A8B; /* sage — secondary accent */ --accent-ink:#0F241D; /* text on accent buttons */ --ok:#5E8C6A; --warn:#C8892F; --op-cut:#C25E6E; --op-shade:#1E9AAD; --op-line:#7A9A8B; /* texture */ --grid:rgba(59,47,38,.055); /* type */ --disp:'Space Grotesk',system-ui,sans-serif; --brand:'Bricolage Grotesque','Space Grotesk',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace; /* rhythm */ --wrap:1180px; --r:14px; } *{box-sizing:border-box} html,body{margin:0} html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%} /* belt-and-braces: stops any one component's mis-sizing from making the whole page side-scrollable on mobile (iOS in particular). text-size-adjust:100% turns off mobile Chrome/WebView's automatic "font boosting" (it inflates font-size on narrow text blocks it judges hard to read, inconsistently per-element) — on cart.html's item rows this boosted the dims/qty subtitle text until it overflowed its flex column and visually overlapped the price/qty/remove column next to it on real phones (Tim + a friend's real order, 2026-10-17). Invisible in desktop-viewport testing since that heuristic is real-device-only, not replicated by just narrowing a desktop browser window. */ body{ background:var(--graphite);color:var(--bone);font-family:var(--disp); -webkit-font-smoothing:antialiased;line-height:1.5;min-height:100vh; display:flex;flex-direction:column; overscroll-behavior-x:none; /* iOS Safari: stops rubber-band/drag horizontal scroll WITHOUT the overflow-x:hidden regression tried first — setting overflow-x (any non-visible value) on body forces the paired overflow-y to compute as 'auto' per the CSS Overflow spec, turning body into its own scroll container it never was before, which broke position:sticky for .stagewrap on desktop (caught immediately, reverted same session — see reference-sandbox-no-working-browser memory on why this wasn't caught before shipping). overscroll-behavior doesn't create a scroll container or interact with that pairing rule, so it's side-effect-free. Real fix for the underlying overflow is still finding/trimming whatever's actually wider than the viewport — this only stops the BOUNCE/drag past the edge, not overflow that's genuinely scrollable. */ } main{flex:1 0 auto} a{color:var(--amber-soft);text-decoration:none} h1,h2,h3{font-family:var(--brand)} a:hover{text-decoration:underline} :focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px} img{max-width:100%;display:block} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,4vw,48px)} .mono{font-family:var(--mono)} .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--amber);margin:0 0 10px} .ghost-txt{color:var(--muted)} /* ===== HEADER / NAV ===== */ .top{border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--graphite-2),var(--graphite));position:sticky;top:0;z-index:50} /* ===== ANNOUNCEMENT BAR (site.js renderBar, promo-config.json) ===== */ .annbar{background:var(--cyan);color:var(--accent-ink);overflow:hidden;font-family:var(--mono);font-size:12px;letter-spacing:.4px;line-height:1;white-space:nowrap} .annbar[hidden]{display:none} .ann-track{display:inline-flex;animation:annScroll 30s linear infinite;will-change:transform} .annbar:hover .ann-track,.annbar:focus-within .ann-track{animation-play-state:paused} .ann-run{display:inline-flex;align-items:center;flex:none} .ann-msg{display:inline-flex;align-items:center;gap:10px;padding:9px 0} .ann-sep{padding:0 26px;opacity:.65} .ann-pill{font:inherit;font-weight:700;letter-spacing:.4px;background:#FCF8F2;color:#2F5A47;border:0;border-radius:999px;padding:4px 11px;cursor:pointer;min-height:24px} .ann-pill:hover{background:#fff} @keyframes annScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){ .ann-track{animation:none;display:block;white-space:normal;text-align:center;padding:0 12px} .ann-run[aria-hidden="true"]{display:none} .ann-run{display:block}.ann-msg{display:inline-flex;flex-wrap:wrap;justify-content:center;padding:7px 0} } .top-inner{display:flex;align-items:center;gap:18px;padding:0 18px} .brand{display:flex;align-items:center;gap:11px;flex:none} .brand:hover{text-decoration:none} .mark{width:30px;height:30px;flex:none;object-fit:contain} .mark::after{content:none} .brand b{font-family:var(--brand);font-weight:700;letter-spacing:.2px;color:var(--bone)} .brand small{display:block;color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.5px;text-transform:uppercase} .nav{display:flex;align-items:center;gap:4px;margin-left:auto} .nav a.navlink,.nav button.navlink{background:transparent;border:none;color:var(--bone);font-family:var(--disp);font-size:14px;font-weight:500;padding:9px 12px;border-radius:8px;cursor:pointer;position:relative;transition:color .15s,background .15s;display:inline-flex;align-items:center;gap:5px} .nav a.navlink:hover,.nav button.navlink:hover{background:color-mix(in srgb,var(--bone) 7%,transparent);text-decoration:none} .nav a.navlink.active{color:var(--amber)} .nav a.navlink.active::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;background:var(--amber);border-radius:2px} .dd{position:relative} .dd-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:248px;background:var(--graphite-2);border:1px solid var(--line);border-radius:12px;padding:7px;box-shadow:0 18px 40px rgba(59,47,38,.16);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s} .dd.open .dd-menu{opacity:1;visibility:visible;transform:none} .dd-item{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:9px;color:var(--bone)} .dd-item:hover{background:var(--panel);text-decoration:none} .dd-item .di-ic{width:16px;height:16px;margin-top:2px;flex:none} .dd-item b{display:block;font-size:13px;font-weight:600} .dd-item small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:2px;line-height:1.35} .dd-chev{transition:transform .18s} .dd.open .dd-chev{transform:rotate(180deg)} .cartbtn{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--line);color:var(--bone);font-family:var(--mono);font-size:12px;padding:9px 13px;border-radius:9px;cursor:pointer;flex:none} .cartbtn:hover{border-color:var(--amber);text-decoration:none} .cartbtn svg{width:18px;height:18px;flex:none} .cartbtn .ct{background:var(--amber);color:var(--primary-ink);font-weight:700;border-radius:20px;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;padding:0 5px} /* Icon-only cart button for the mobile top bar (Tim, 2026-09-09: "need a better look icon at the top for cart when in mobile view" — there wasn't one at all, cart was only reachable as a plain text link buried inside the hamburger drawer). Square to match .burger's tap target/footprint, sitting right beside it; the count moves off the inline pill and onto a small badge overlaid on the icon's corner, the standard mobile-cart-icon shape. Hidden on desktop — .cartbtn.desk is the icon+"Cart"+badge pill already shown there. */ .cartbtn.mobi{display:none;position:relative;width:44px;height:44px;padding:0;justify-content:center} /* Inset (top/right positive, not overhanging past the button's own edge) rather than the usual negative-offset "badge pokes out past the corner" look — this button sits flush against the very top of the viewport (the header has no padding above it), so a negative top pushed roughly the top third of the badge circle above y=0, off the visible page entirely (Tim, 2026-09-09 screenshot: "the number is not really in view"). Confirmed via headless Chrome: button boundingBox().y was exactly 0. */ .cartbtn.mobi .ct{position:absolute;top:3px;right:3px;min-width:16px;height:16px;font-size:10px} /* margin-left:auto so the burger hugs the right edge on mobile — .nav normally owns that auto-margin to push itself right, but .nav is display:none below 860px, so without this the burger is left stranded next to the logo with a big dead gap filling the rest of the bar. */ .burger{display:none;background:transparent;border:1px solid var(--line);border-radius:9px;width:44px;height:44px;cursor:pointer;color:var(--bone);margin-left:auto} .burger svg{width:20px;height:20px;margin:auto} .mnav{display:none;border-top:1px solid var(--line);background:var(--graphite-2)} .mnav.open{display:block} .mnav a,.mnav .mhead{display:block;padding:13px 4px;border-bottom:1px dashed var(--line);color:var(--bone);font-size:15px} .mnav .mhead{color:var(--muted);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;border-bottom:none;padding-bottom:4px;margin-top:6px} .mnav a.sub{padding-left:16px;font-size:14px;color:var(--bone)} .mnav a:last-child{border-bottom:none} @media(max-width:860px){.nav,.cartbtn.desk{display:none}.burger{display:flex}.cartbtn.mobi{display:inline-flex}} /* Mobile header layout: burger (menu) left, brand centered, cart right — Tim, 2026-09-09, preferred over the desktop-style "logo left, actions right" arrangement this inherited by default. Pure flexbox `order` (no DOM/markup change, .top-inner's source order stays brand/nav/desk/mobi/burger for desktop) — burger goes first, cartbtn.mobi last, and .brand becomes the one flexible item (flex:1, was flex:none) so it fills whatever space is left between the two fixed 44px squares and centers its own content there. Overrides .burger's margin-left:auto (that rule exists to push a lone burger to the right edge when .nav is hidden — not wanted now that burger sits first). */ @media(max-width:860px){ .burger{order:-1;margin-left:0} .brand{flex:1 1 auto;justify-content:center;min-width:0} .cartbtn.mobi{order:1} } /* The two fixed-size 44px icon buttons plus the non-shrinking .brand logo/wordmark (flex:none, never wraps or truncates) were already filling the header with almost no spare width on real phone widths (measured: exactly 0px of margin at 360-375px, ~31px of actual overflow at 320px, pushing the burger button off-screen — Tim, 2026-09-09 screenshot). Adding the mobile cart icon used up the last of that margin. Rather than shrink the tap targets below the 44px accessibility minimum, narrow the things that have slack: the subtitle line ("Laser & handmade · Sydney") is the single widest element in the whole bar at ~177px and is purely decorative, and the outer gap/padding has room to give too. */ @media(max-width:480px){ .top-inner{gap:10px;padding:0 12px} .brand small{display:none} } /* ===== BUTTONS ===== */ button{font-family:var(--disp);cursor:pointer;border:none} .btn{background:var(--amber);color:var(--primary-ink);font-weight:600;font-size:14px;padding:11px 18px;border-radius:9px;transition:transform .08s ease,filter .15s ease;display:inline-flex;align-items:center;gap:8px;text-decoration:none} .btn:hover{filter:brightness(1.05);text-decoration:none} .btn:active{transform:translateY(1px)} .btn.block{width:100%;justify-content:center;padding:14px;font-size:15px} .btn.lg{padding:14px 24px;font-size:15px} .btn:disabled{opacity:.4;cursor:not-allowed;filter:none} /* Border used to be var(--line) — a hairline barely darker than the page background (--graphite), so the button had almost no visible edge and read as greyed-out/disabled rather than a real secondary action. --muted border + a faint --panel fill gives it a clear, if quieter, shape next to the solid .btn without going as loud as the primary action. */ .btn.ghost{background:var(--panel);color:var(--bone);border:1.5px solid var(--muted)} .btn.ghost:hover{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 12%,var(--panel));filter:none} .btn.cyan{background:var(--cyan);color:var(--accent-ink)} .btn .ic{width:16px;height:16px} /* 44px min tap target (Apple HIG) — base .btn/.btn.ghost padding lands most instances at 40-43px. Sitewide fix here rather than per-file since .btn is theme.css's shared button, used (unmodified) on plenty of pages that never got their own tap-target pass. Tool pages that set their own inline/local padding override on .btn (e.g. keychain.html's #materialsInfoBtn) still need their own fix alongside this one. */ @media(max-width:600px){.btn,.btn.ghost{min-height:44px}} /* send-for-review pending/success states — the button itself changes, not just small text below it. display/gap set here too (not just base .btn) since tools carry their own inline .btn copy that may omit it. */ .btn.is-sending,.btn.is-sent{display:inline-flex;align-items:center;justify-content:center;gap:8px} .btn.is-sending:disabled{opacity:.85;cursor:wait;filter:none} .btn.is-sending::before{content:"";width:14px;height:14px;border-radius:50%;flex:none; border:2px solid color-mix(in srgb,currentColor 30%,transparent);border-top-color:currentColor;animation:btnspin .7s linear infinite} .btn.is-sent:disabled{opacity:1;filter:none;background:var(--ok);color:#fff;cursor:default} @keyframes btnspin{to{transform:rotate(360deg)}} /* required "I agree to the Terms" checkbox on every order/quote tool — shared so it looks identical everywhere. Deliberately block/inline (not flex) — a flex layout here was getting split apart by an ancestor's own flex/grid context on some tools, stranding the checkbox and its label text in different columns. */ .agree-terms{display:block;width:100%;font-size:12.5px;color:var(--muted);line-height:1.5;cursor:pointer;user-select:none;margin:10px 0 0} .agree-terms input{margin:0 6px 0 0;vertical-align:middle;position:relative;top:-1px;accent-color:var(--amber);cursor:pointer} /* the sitewide default link style is colour-only (no underline) — too subtle against --muted grey on the light-cream tools, so make the link inside this label unmistakably a link regardless of tool theme */ .agree-terms a{text-decoration:underline;font-weight:500} .agree-terms.err{color:var(--warn)} .agree-terms.err a{color:var(--warn)} /* ===== PANELS / CARDS / LAYOUT ===== */ .panel{background:var(--graphite-2);border:1px solid var(--line);border-radius:var(--r);padding:18px} .panel h2.lab{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-family:var(--mono);margin:0 0 12px;font-weight:500} .section{padding:56px 0} .section.tight{padding:38px 0} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap} .sec-head h2{font-size:clamp(22px,3.2vw,32px);margin:6px 0 0;font-weight:700;letter-spacing:-.4px} .sec-head p{margin:6px 0 0;color:var(--muted);max-width:520px;font-size:14.5px} .bed-bg{background:repeating-linear-gradient(0deg,transparent 0 23px,var(--grid) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--grid) 23px 24px),var(--graphite-2)} /* shared colour touches (see about.html) — subtle brand-accent washes + highlighter marks */ .canvas{background: radial-gradient(120% 110% at 0% 0%,color-mix(in srgb,var(--op-shade) 12%,transparent),transparent 55%), radial-gradient(120% 110% at 100% 100%,color-mix(in srgb,var(--op-cut) 11%,transparent),transparent 55%), repeating-linear-gradient(0deg,transparent 0 23px,var(--grid) 23px 24px), repeating-linear-gradient(90deg,transparent 0 23px,var(--grid) 23px 24px), var(--graphite-2)} .mh{padding:0 4px;border-radius:2px;white-space:nowrap} .mh.teal {background:linear-gradient(180deg,transparent 56%,color-mix(in srgb,var(--op-shade) 42%,transparent) 56%)} .mh.rose {background:linear-gradient(180deg,transparent 56%,color-mix(in srgb,var(--op-cut) 42%,transparent) 56%)} .mh.amber{background:linear-gradient(180deg,transparent 56%,color-mix(in srgb,var(--warn) 46%,transparent) 56%)} .mh.green{background:linear-gradient(180deg,transparent 56%,color-mix(in srgb,var(--ok) 42%,transparent) 56%)} /* "coming soon" tool banner + waitlist (playable, ordering locked) */ .soon-banner{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin:0 0 22px;padding:16px 18px;border-radius:14px; border:1px solid color-mix(in srgb,var(--op-shade) 42%,transparent); background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--op-shade) 15%,transparent),transparent 60%), radial-gradient(120% 140% at 100% 100%,color-mix(in srgb,var(--ok) 10%,transparent),transparent 60%), var(--graphite-2)} .soon-banner .sb-tag{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--op-shade); display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;border:1px solid color-mix(in srgb,var(--op-shade) 42%,transparent);white-space:nowrap} .soon-banner .sb-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--op-shade);animation:sbpulse 2s ease-in-out infinite} @keyframes sbpulse{0%,100%{opacity:.4}50%{opacity:1}} .soon-banner .sb-txt{flex:1 1 230px;min-width:0;font-size:13.5px;color:var(--lede);line-height:1.5} .soon-banner .sb-txt b{color:var(--bone)} .soon-wait{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 280px} .soon-wait input{flex:1 1 160px;min-width:140px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--graphite);color:var(--bone);font-family:inherit;font-size:14px} .soon-wait .swstat{flex-basis:100%;font-family:var(--mono);font-size:11.5px;margin:2px 0 0;min-height:1px} .soon-wait .swstat.ok{color:var(--ok)} .soon-wait .swstat.err{color:var(--op-cut)} @media (prefers-reduced-motion: reduce){.soon-banner .sb-tag .dot{animation:none}} .dd-soon{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;font-style:normal;color:var(--op-shade);border:1px solid color-mix(in srgb,var(--op-shade) 45%,transparent);border-radius:10px;padding:1px 5px;margin-left:5px;vertical-align:middle} .foot-soon{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--op-shade);margin-left:5px} .pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;padding:4px 9px;border-radius:20px;border:1px solid var(--line);color:var(--muted);background:var(--graphite-2)} .pill .dot{width:7px;height:7px;border-radius:50%} .pill.live{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}.pill.live .dot{background:var(--ok)} .pill.soon{color:var(--op-shade);border-color:color-mix(in srgb,var(--op-shade) 45%,transparent)}.pill.soon .dot{background:var(--op-shade)} /* ===== HERO ===== */ .hero{padding:46px 0 18px} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center} @media(max-width:920px){.hero-grid{grid-template-columns:1fr;gap:24px}} .hero h1{font-size:clamp(32px,5.4vw,54px);line-height:1.03;margin:14px 0 16px;font-weight:700;letter-spacing:-1px} .hero h1 .ghost{color:var(--muted)} .hero .lede{max-width:520px;color:var(--lede);font-size:16.5px;margin:0 0 26px} .lede{color:var(--lede)} .hero-cta{display:flex;gap:12px;flex-wrap:wrap} .hero-trust{display:flex;gap:22px;margin-top:26px;flex-wrap:wrap} .hero-trust div{font-family:var(--mono);font-size:12px;color:var(--muted)} .hero-trust b{display:block;color:var(--bone);font-size:20px;font-weight:600} .hero-bed{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;aspect-ratio:5/4;min-height:300px} .hero-bed .bedsvg{width:100%;height:100%;display:block} .hero-bed .corner{position:absolute;font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:1px} .hero-bed .corner.tl{top:10px;left:12px} .hero-bed .corner.tr{top:10px;right:12px} .hero-bed .corner.bl{bottom:10px;left:12px} .hero-bed .corner.br{bottom:10px;right:12px} .hero-readout{position:absolute;left:12px;bottom:30px;right:12px;display:flex;gap:8px;flex-wrap:wrap} .hero-readout .rd{background:color-mix(in srgb,var(--graphite-2) 88%,transparent);backdrop-filter:blur(3px);border:1px solid var(--line);border-radius:8px;padding:6px 10px} .hero-readout .rd .k{font-family:var(--mono);font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)} .hero-readout .rd .v{font-family:var(--mono);font-size:14px;color:var(--bone)} .trace-guide{stroke:var(--line)} .scanline{stroke:var(--amber);stroke-width:1.5;opacity:.9;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--amber) 70%,transparent))} .laserdot{fill:var(--amber);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--amber) 85%,transparent))} /* ===== PIPELINE ===== */ .pipe{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden} @media(max-width:820px){.pipe{grid-template-columns:1fr}} .pstep{padding:24px 22px;border-right:1px solid var(--line);background:var(--graphite-2);position:relative;display:flex;flex-direction:column} .pstep:last-child{border-right:none} @media(max-width:820px){.pstep{border-right:none;border-bottom:1px solid var(--line)}.pstep:last-child{border-bottom:none}} .pstep .pn{font-family:var(--mono);font-size:12px;color:var(--amber);letter-spacing:2px} .pstep h3{margin:12px 0 6px;font-size:19px;font-weight:600} .pstep p{margin:0 0 16px;color:var(--muted);font-size:14px;flex:1} .pstep .ptool{font-family:var(--mono);font-size:11px;color:var(--faint);margin-bottom:12px} .pstep .arrow{position:absolute;top:50%;right:-11px;transform:translateY(-50%);width:22px;height:22px;background:var(--graphite);border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2;color:var(--amber)} @media(max-width:820px){.pstep .arrow{display:none}} /* ===== PRODUCT CARDS ===== */ .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px} .pcard{background:var(--graphite-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;display:flex;flex-direction:column;box-shadow:0 6px 16px rgba(59,47,38,.05)} .pcard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--bone) 22%,var(--line));box-shadow:0 16px 32px rgba(59,47,38,.10);text-decoration:none} .pcard .pthumb{aspect-ratio:1/1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden} .pcard .pthumb .tag{position:absolute;top:10px;left:10px} .pcard .pbody{padding:13px 14px 15px} .pcard .pname{font-size:15px;font-weight:600;color:var(--bone);margin:0} .pcard .pmeta{font-family:var(--mono);font-size:11px;color:var(--muted);margin:3px 0 0} .pcard .prow{display:flex;align-items:baseline;justify-content:space-between;margin-top:10px} .pcard .price{font-family:var(--mono);font-weight:700;color:var(--amber);font-size:17px} .pcard .price small{color:var(--muted);font-weight:400;font-size:11px} .ph{width:100%;height:100%;position:relative} .ph.wood{background:repeating-linear-gradient(95deg,#9a7a4e,#9a7a4e 6px,#a8895a 6px,#a8895a 13px)} .ph.acrylic{background:radial-gradient(120% 120% at 30% 20%,#3a6e7a,#1f4651)} .ph.slate{background:linear-gradient(135deg,#4a4640,#2c2925)} .ph.bamboo{background:repeating-linear-gradient(0deg,#b5915a,#b5915a 10px,#c39e63 10px,#c39e63 20px)} .ph .glyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;color:rgba(255,255,255,.72);letter-spacing:1px;text-align:center;padding:0 14px} /* ===== FORMS ===== */ .field{margin-bottom:14px} .field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:6px} input[type=text],input[type=email],input[type=number],input[type=tel],select,textarea{width:100%;background:var(--graphite-2);color:var(--bone);border:1px solid var(--line);border-radius:9px;padding:11px 12px;font-family:var(--mono);font-size:14px} textarea{font-family:var(--disp);resize:vertical;min-height:120px;line-height:1.5} input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--bone) 25%,var(--line))} .formstat{font-family:var(--mono);font-size:12px;margin-top:8px;min-height:1px} .formstat.ok{color:var(--ok)}.formstat.err{color:var(--warn)} /* ===== PROSE ===== */ .prose{max-width:740px} .prose h2{font-size:24px;margin:36px 0 12px;font-weight:700;letter-spacing:-.3px;scroll-margin-top:84px} .prose h3{font-size:18px;margin:26px 0 8px;font-weight:600;scroll-margin-top:84px} .prose p{color:var(--lede);margin:0 0 14px} .prose ul{color:var(--lede);padding-left:20px;margin:0 0 14px} .prose li{margin:6px 0} .prose a{color:var(--amber-soft)} .faq details{border:1px solid var(--line);border-radius:12px;background:var(--graphite-2);margin-bottom:10px;overflow:hidden;box-shadow:0 4px 12px rgba(59,47,38,.04)} .faq summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:600;font-size:15.5px;display:flex;justify-content:space-between;align-items:center;gap:12px} .faq summary::-webkit-details-marker{display:none} .faq summary .fchev{color:var(--muted);transition:transform .2s;flex:none} .faq details[open] summary .fchev{transform:rotate(45deg)} .faq .fa-body{padding:0 18px 18px;color:var(--lede);font-size:14.5px;line-height:1.6} .tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:24px;flex-wrap:wrap} .tabs button{background:transparent;color:var(--muted);font-family:var(--mono);font-size:12px;padding:11px 14px;border-bottom:2px solid transparent;text-transform:uppercase;letter-spacing:.5px} .tabs button[aria-selected="true"]{color:var(--amber);border-bottom-color:var(--amber)} @media(max-width:600px){.tabs button{min-height:44px}} .tabpane{display:none} .tabpane.show{display:block} /* ===== FOOTER ===== */ .site-foot{border-top:1px solid var(--line);background:linear-gradient(180deg,var(--graphite),var(--graphite-2));margin-top:20px} .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;padding:44px 0 48px} /* stay 2-column through normal phone widths (iPhone SE/mini through Pro Max are all >360px) — collapsing to 1 column here was dumping ~19 footer links into one long left-aligned wall of text instead of using the screen's width. Only true tiny/legacy widths drop to 1 column. */ @media(max-width:760px){.foot-top{grid-template-columns:1fr 1fr;gap:24px}} @media(max-width:360px){.foot-top{grid-template-columns:1fr}} .foot-brand h3{margin:12px 0 6px;font-size:18px;font-weight:700} .foot-brand p{margin:0;color:var(--muted);font-size:13.5px;max-width:300px} .foot-col h4{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-weight:500} .foot-col a{display:block;color:var(--bone);font-size:14px;padding:5px 0} .foot-col a:hover{color:var(--amber);text-decoration:none} .foot-bottom{border-top:1px solid var(--line);padding:16px 0;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap} .foot-bottom .fm{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.5px} .foot-bottom .fsoc{display:flex;gap:10px} .foot-bottom .fsoc a{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--muted)} .foot-bottom .fsoc a:hover{border-color:var(--amber);color:var(--amber);text-decoration:none} .crumb{font-family:var(--mono);font-size:12px;color:var(--muted);padding:18px 0 0} .crumb a{color:var(--muted)}.crumb a:hover{color:var(--amber)} .notice{background:color-mix(in srgb,var(--cyan) 13%,var(--graphite-2));border:1px solid color-mix(in srgb,var(--cyan) 38%,transparent);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--bone);font-family:var(--mono);line-height:1.5} .notice.warn{background:color-mix(in srgb,var(--warn) 14%,var(--graphite-2));border-color:color-mix(in srgb,var(--warn) 42%,transparent)} /* site-wide banner site.js injects above the header on a tool page an owner has switched off in tools-status.json (old bookmarks/shared links still land here even once nav hides the link) */ .tool-offline-bar{background:color-mix(in srgb,var(--warn) 16%,var(--graphite));border-bottom:1px solid color-mix(in srgb,var(--warn) 42%,transparent);color:var(--bone);font-family:var(--mono);font-size:12.5px;line-height:1.5;text-align:center;padding:10px 0} .tool-offline-bar a{color:var(--warn)} /* low-key mobile-only tip on the design tools — no box/border, just a small muted line, mobile only */ .mobile-note{display:none;font-family:var(--mono);font-size:11.5px;color:var(--muted);line-height:1.5;margin:8px 0 0} @media(max-width:860px){.mobile-note{display:block}} .center{text-align:center} .mt0{margin-top:0}.mb0{margin-bottom:0} @media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* ===== Shared font picker (window.MBH.createFontPicker in site.js) — a custom listbox that live-previews a font on hover/arrow-key instead of a plain