/* ============================================================ Bermuda National Shipwreck Archive — Design System Global entry point. Consumers link THIS file only. Keep this file as @import lines only. ============================================================ */ @import url('./tokens/fonts.css'); @import url('./tokens/colors.css'); @import url('./tokens/typography.css'); @import url('./tokens/spacing.css'); @import url('./tokens/elevation.css'); /* ------------------------------------------------------------ .prose — rich text authored in the Record Editor (account fields). Inline HTML is allowed: p, h2-h4, strong, em, a, ul/ol, blockquote. ------------------------------------------------------------ */ .prose > *:first-child{margin-top:0} .prose > *:last-child{margin-bottom:0} .prose p{margin:0 0 1em} .prose h1,.prose h2,.prose h3,.prose h4{font-family:var(--font-display);color:var(--text-heading);letter-spacing:-0.02em;line-height:1.15;margin:1.6em 0 .5em;text-wrap:balance} .prose h1{font-size:1.5em;font-weight:700} .prose h2{font-size:1.3em;font-weight:700} .prose h3{font-size:1.1em;font-weight:700} .prose h4{font-size:.95em;font-weight:700;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--meta-ink)} .prose strong,.prose b{font-weight:700} .prose em,.prose i{font-style:italic} .prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px} .prose a:hover{text-decoration-thickness:2px} .prose ul,.prose ol{margin:0 0 1em;padding-left:1.3em} .prose li{margin:0 0 .35em} .prose blockquote{margin:1.2em 0;padding-left:1em;border-left:2px solid var(--accent);font-style:italic} .prose hr{border:none;border-top:1px solid rgba(10,31,60,.15);margin:2em 0} .surface-deep .prose h1,.surface-deep .prose h2,.surface-deep .prose h3{color:var(--sand-50)} .surface-deep .prose hr{border-top-color:rgba(232,224,212,.2)} /* ============================================================ MOBILE / TABLET FIXES — added 7 Sep 2026, trimmed same day Three of the original four rules were removed once Claude Design shipped the real fixes (#2 profile stacking, #3 tab-strip scroll, #4 timeline) — verified by deleting each rule live and re-measuring scrollWidth. What remains is not a stopgap: the top bar sizing is ours by agreement (Claude Design was told not to duplicate it), as is the 44px tap floor. styles.css is not part of the Claude Design export, so it survives a zip apply. !important is required because the build files inject their styles at runtime, after this file loads. ============================================================ */ @media (max-width: 900px) { /* 1. Top bar: logo + search + Submit + hamburger needed 459px in a 375px bar, pushing the hamburger off-screen. With the desktop nav hidden, that left NO reachable navigation on a phone. */ .bnsa-topbar { gap: 8px !important; padding-left: 12px !important; padding-right: 12px !important; } } /* ---- Tap targets, per Claude Design 7 Sep ------------------------------- 44×44 floor below 900px. Their brief specced the Submit "+" at 40px in point 1 and a 44px floor in point 6; 44 wins — it is the accessibility threshold that point 6 exists to meet. Hit area only, no visual change. */ @media (max-width: 900px) { /* Sizing only — NEVER `display`. An earlier version set `display: inline-flex !important` here, which overrode the build's `.bnsa-hamburger{display:none}` above 760px and put the full nav AND the hamburger in the bar together, overflowing by up to 65px at tablet width. */ .bnsa-hamburger, .bnsa-search, .bnsa-submit { min-width: 44px !important; min-height: 44px !important; align-items: center !important; justify-content: center !important; } nav a, [role="tab"], button { min-height: 44px; } } /* ---- Submit collapses to its "+" icon on phones ------------------------ Claude Design spec #1: icon below 900px, label returns above. Not built in source yet, so it lives here. Why it matters: at 390px the bar needs exactly 390px — 12 + 116 + 8 + 3 + 8 + 44 + 8 + 127 + 8 + 44 + 12. Zero slack, so any difference in real-device font rendering pushes the hamburger off-screen. The label is 83px of that. Collapsing it restores real headroom. font-size:0 hides the text node while leaving it in the accessibility tree; the SVG carries explicit width/height attributes so it still draws. */ @media (max-width: 620px) { .bnsa-submit { font-size: 0 !important; width: 44px !important; max-width: 44px !important; padding-left: 0 !important; padding-right: 0 !important; gap: 0 !important; } .bnsa-submit svg { width: 18px !important; height: 18px !important; flex: 0 0 auto !important; } } /* ---- Nav/hamburger swap point raised to 840px -------------------------- The build swaps at 760px (`@media(max-width:760px)` in shell.build.js), but the full nav needs ~820px to fit alongside logo, search and Submit. Between 761 and ~820 the nav renders and overflows the bar — 38px at 770px. Raising the swap to 840 closes the gap with margin to spare. Belongs in source; here until Claude Design moves their breakpoint. */ @media (max-width: 840px) { .bnsa-nav { display: none !important; } .bnsa-hamburger { display: inline-flex !important; } } /* ---- Catalog tab strip: stop the vertical bounce ----------------------- Setting `overflow-x: auto` makes the OTHER axis compute to `auto` too, so the strip became vertically scrollable by 1px (clientHeight 43 vs scrollHeight 44) — enough for iOS to grab a vertical drag and bounce while you swipe sideways. The 1px came from the 44px tap-target floor below, which made each tab exactly as tall as the strip's content box. Fix: pin the y axis shut, give the strip room for a 44px tab, and tell the browser this element only pans horizontally so vertical drags reach the page. */ @media (max-width: 900px) { .bnsa-catalog-tabs, .bnsa-catalog-tabs > * { overflow-y: hidden !important; overscroll-behavior-x: contain; touch-action: pan-x; } .bnsa-catalog-tabs, .bnsa-catalog-tabs > * { min-height: 50px !important; align-items: center !important; } } /* ---- Any sidebar layout stacks on mobile ------------------------------ Generalised 9 Sep. Three separate bugs came from the same root: a desktop two-column layout stacked without unwinding the properties that only made sense side by side — fixed width, then source order, then `position: sticky`. Each was fixed per-page, and each time another page turned up with the same shape: wreck-profile, then all-contents (`236px 258px`, results 188px off-screen), then dive-report (`122px 300px`, 124px overflow). Matching the shape rather than the page ends that. The `aside` rules apply to every sidebar regardless of parent, because the parent varies: `section > article + aside` on profiles and dive reports, `div > aside + div` on the search page. */ @media (max-width: 900px) { :is(section, div, main, article):has(> aside) { grid-template-columns: 1fr !important; gap: 24px !important; } aside { width: auto !important; max-width: 100% !important; /* `position: sticky; top: 92px` keeps a sidebar in view beside scrolling results on desktop. Stacked, it pins over the content and — with a transparent background — both render on top of each other. */ position: static !important; top: auto !important; } } /* ---- Card badges: drop backdrop-filter on mobile ---------------------- The category pill over each card image is a single element carrying `background: rgba(6,20,37,0.62); backdrop-filter: blur(6px)`. On iOS Safari the blurred backdrop can render offset from its element, leaving a ghost pill beside the real one — it looks like a duplicate label but nothing is duplicated in the DOM. Dropping the blur and raising the background opacity keeps the same legibility over a photograph without the artifact. Desktop keeps the blur. Targeted by inline-style substring because the badge has no class. */ @media (max-width: 900px) { span[style*="backdrop-filter"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(6, 20, 37, 0.88) !important; } } /* ---- Card tiles top-align ---------------------------------------------- Tiles that are