/* ============================================================================ * Mobile layer for the Claude Design exports. * * The exported pages carry no media queries and style everything inline, so the * only way to override them from a stylesheet is attribute selectors + !important. * Everything here is scoped to <=820px; desktop is untouched. * ========================================================================== */ @media (max-width: 820px) { /* --- stop sideways scrolling ------------------------------------------- */ /* `clip` instead of `hidden` so the sticky nav keeps working (hidden would turn into a scroll container and break position:sticky). */ html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; } /* NB: not iframes. The hero background video is deliberately wider than the viewport (width:max(100%,178vh)) so it covers; its parent clips it. Capping it exposes the YouTube player chrome. */ img, video { max-width: 100%; } /* --- multi-column layouts collapse ------------------------------------- */ [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* small product/stat tiles stay 2-up rather than one long column */ [style*="repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* The photo gallery is CSS multi-column (columns:3), not grid — 3 up on a phone gives ~107px thumbnails. Two keeps the page from running forever. */ [style*="columns:"] { columns: 2 !important; } /* --- fixed-width layout containers go fluid ----------------------------- */ /* Only containers (>=520px). Smaller fixed widths are icons/badges. */ [style*="width:1180px"], [style*="width:1160px"], [style*="width:1080px"], [style*="width:1040px"], [style*="width:900px"], [style*="width:820px"], [style*="width:800px"], [style*="width:760px"], [style*="width:640px"], [style*="width:620px"], [style*="width:560px"], [style*="width:520px"] { width: 100% !important; max-width: 100% !important; } /* --- section padding ---------------------------------------------------- */ /* Matched on the horizontal component rather than the whole string: most of these are 3-value (`80px 40px 40px`), and nesting two of them ate 172px of a 390px screen. Pairing with [style*="padding:"] keeps it off margins. */ [style*="padding:"][style*="px 46px"], [style*="padding:"][style*="px 40px"], [style*="padding:"][style*="px 36px"], [style*="padding:"][style*="px 34px"], [style*="padding:"][style*="px 32px"], [style*="padding:"][style*="px 30px"], [style*="padding:"][style*="px 28px"] { padding-left: 18px !important; padding-right: 18px !important; } /* Tall desktop section padding makes for an endless scroll on a phone. */ [style*="padding:100px"], [style*="padding:96px"], [style*="padding:90px"], [style*="padding:84px"], [style*="padding:80px"], [style*="padding:76px"], [style*="padding:70px"] { padding-top: 52px !important; padding-bottom: 52px !important; } /* --- display type ------------------------------------------------------- */ /* The exports use clamp() with desktop-sized minimums (e.g. clamp(90px,12vw,170px)), so the floor still overflows a 390px screen. Re-floor them here. */ h1 { font-size: clamp(38px, 11vw, 64px) !important; line-height: .95 !important; } h2 { font-size: clamp(26px, 7.5vw, 40px) !important; line-height: 1 !important; } h3 { font-size: clamp(20px, 5.5vw, 28px) !important; } /* --- wide flex rows wrap ------------------------------------------------ */ [style*="display:flex"][style*="gap:48px"], [style*="display:flex"][style*="gap:28px"], [style*="display:flex"][style*="gap:24px"] { flex-wrap: wrap; } /* keep hero CTA pairs from squashing */ [style*="display:flex"][style*="gap:14px"] > a { flex: 1 1 auto; text-align: center; } /* --- nav (desktop link row is replaced by the menu in mobile-nav.js) ----- */ [data-screen-label="Nav"] { padding-left: 18px !important; padding-right: 18px !important; gap: 12px !important; } .bb-mnav-links { display: none !important; } /* --- tap targets -------------------------------------------------------- */ /* Text fields fill their column; 16px stops iOS zooming on focus. Checkboxes/radios are EXCLUDED — width:100% stretches the control itself (a 190px-wide checkbox) and shoves its label text out of the row. */ input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { width: 100% !important; box-sizing: border-box !important; font-size: 16px !important; } input[type="checkbox"], input[type="radio"] { width: 18px !important; height: 18px !important; flex: 0 0 auto !important; margin: 0 !important; } } /* Menu button only exists on small screens */ .bb-burger { display: none; } @media (max-width: 820px) { .bb-burger { display: grid !important; } }