/* ============================================================
web-mobile-baseline.css — canonical mobile layer for benji-hosted sites
v1 · 2026-05-21
Drop-in stylesheet. Load AFTER your design tokens, BEFORE component CSS.
What this gives you, with zero per-site tuning:
1. No horizontal scroll on mobile (overflow-x: clip on html+body).
2. Header height token (--nav-h) shared with the mobile drawer.
3. Hamburger button at 44×44 tap target (iOS HIG minimum).
4. Slide-in drawer at ≤900px, scrollable, overscroll-contained,
safe-area-bottom padding for iPhone X+ notch.
5. All inline media (img/video/iframe/svg) hard-capped at 100% width.
6. body-scroll lock when the drawer is open is handled by mobile-nav.js.
Required HTML structure (in ):
Required meta in :
The viewport-fit=cover is what lets env(safe-area-inset-bottom) work.
============================================================ */
:root {
/* Override --nav-h to match your actual header height (default 72px). */
--nav-h: 72px;
/* Override --baseline-paper to your page background color. */
--baseline-paper: #FBFAF7;
/* Override --baseline-ink to your foreground text color. */
--baseline-ink: #0E2851;
/* Override --baseline-hairline to your divider color. */
--baseline-hairline: #DDD6C7;
/* Override --baseline-container-px to your container padding. */
--baseline-container-px: clamp(20px, 4vw, 32px);
}
/* 1. Horizontal-scroll lock — the "mobile frame" Greg asked for. */
html {
overflow-x: clip;
-webkit-text-size-adjust: 100%;
}
body {
overflow-x: clip;
width: 100%;
}
/* 2. Hard-cap inline media so off-screen overflow never reappears. */
img, video, iframe, svg, canvas {
max-width: 100%;
height: auto;
display: block;
}
/* 3. Tables: scroll within their own box rather than break the page. */
.table-wrap, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 4. Hamburger button — 44×44 hit area, 24px visual icon. */
.nav-burger {
display: none;
width: 44px;
height: 44px;
position: relative;
padding: 0;
border: 0;
background: transparent;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
.nav-burger span {
position: absolute;
left: 10px;
right: 10px;
height: 1.5px;
background: var(--baseline-ink);
transition: transform 0.2s, opacity 0.2s, top 0.2s;
}
.nav-burger span:nth-child(1) { top: 16px; }
.nav-burger span:nth-child(2) { top: 22px; }
.nav-burger span:nth-child(3) { top: 28px; }
.nav-burger.is-open span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { top: 22px; transform: rotate(-45deg); }
/* 5. Mobile drawer (≤900px). Header stays visible above it.
CRITICAL: backdrop-filter / transform / filter / perspective on any ancestor
of .nav-links creates a CSS containing block that breaks position: fixed.
The drawer then anchors to that ancestor instead of the viewport, and its
background can't cover the page below — content leaks through.
We defensively kill backdrop-filter on .nav at this breakpoint and force a
solid background. If your site puts backdrop-filter / transform / filter /
perspective on a different ancestor, you must do the same for that one. */
@media (max-width: 900px) {
.nav {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: var(--baseline-paper);
}
.nav-burger { display: block; z-index: 1001; }
.nav-links {
position: fixed;
inset: var(--nav-h) 0 0 0;
display: flex;
flex-direction: column;
background: var(--baseline-paper);
padding: 24px var(--baseline-container-px) calc(32px + env(safe-area-inset-bottom));
gap: 18px;
align-items: stretch;
transform: translateX(100%);
transition: transform 0.25s ease;
border-top: 1px solid var(--baseline-hairline);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
z-index: 999;
list-style: none;
margin: 0;
}
.nav-links.is-open { transform: translateX(0); }
.nav-links li { width: 100%; list-style: none; }
.nav-links a {
font-size: 18px;
display: block;
padding: 10px 0;
min-height: 44px;
color: var(--baseline-ink);
text-decoration: none;
}
.nav-cta { margin-top: 16px; justify-content: center; }
}