/* Reset + base typography + utility classes shared by public site and internal app. */ *, *::before, *::after { box-sizing: border-box; } /* Off-canvas drawers (mobile nav, sidebar) are position:fixed + transform:translateX(...) to sit off-screen. Chromium still counts a transformed fixed element's untransformed box in document scrollWidth, which silently doubles page width and makes the whole site horizontally scrollable on real phones — confirmed via a real-browser mobile QA pass, not visible in any DOM-only test. This is the standard, safe guard against that whole bug class. */ /* min-height, not height: a hard height:100% here, combined with overflow-x:hidden below, triggers a CSS spec quirk (a non-"visible" overflow-x forces the paired overflow-y to compute as "auto") that turns into its own clipped, independently-scrolling box instead of the real document scroll. That silently breaks window.scrollTo/scrollIntoView and every same-page anchor link (footer's #branches/#faq/#reviews) — found by actually clicking through anchor links in a real browser after adding the overflow-x fix below, not by any DOM-only test. min-height avoids the whole interaction: nothing in this codebase depends on html/body having a *hard* 100% height. */ html, body { min-height: 100%; overflow-x: hidden; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--ink-900); background: var(--offwhite); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--sp-2); font-weight: 600; line-height: var(--lh-tight); color: var(--teal-900); } h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-3xl); } h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } p { margin: 0 0 var(--sp-3); color: var(--ink-600); } a { color: var(--teal-700); text-decoration: none; } a:hover { color: var(--teal-600); text-decoration: underline; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg { max-width: 100%; display: block; } button { font-family: inherit; } table { border-collapse: collapse; width: 100%; } hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-6) 0; } :focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; border-radius: var(--radius-sm); } ::selection { background: var(--sand-300); color: var(--ink-900); } /* Scrollbars (progressive enhancement, non-blocking) */ * { scrollbar-width: thin; scrollbar-color: var(--sand-500) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-thumb { background: var(--sand-500); border-radius: var(--radius-full); } /* ---------- Layout utilities ---------- */ .container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--sp-6); } .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .flex-wrap { flex-wrap: wrap; } .gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); } .grid { display: grid; gap: var(--sp-4); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grow { flex: 1 1 auto; } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Text utilities ---------- */ .text-xs { font-size: var(--fs-xs); } .text-sm { font-size: var(--fs-sm); } .text-lg { font-size: var(--fs-lg); } .text-muted { color: var(--ink-400); } .text-danger { color: var(--danger-600, var(--danger-500)); } .text-success { color: var(--success-500); } .text-center { text-align: center; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mono { font-variant-numeric: tabular-nums; } /* ---------- Spacing utilities ---------- */ .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .p-0 { padding: 0; } /* ---------- Responsive breakpoints (mobile-first) ---------- < 640px : mobile 640-1024 : tablet > 1024 : desktop ------------------------------------------------------------- */ @media (min-width: 640px) { .sm\:grid-2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .lg\:grid-2 { grid-template-columns: repeat(2, 1fr); } .lg\:grid-3 { grid-template-columns: repeat(3, 1fr); } .lg\:grid-4 { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 1023px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .container { padding-inline: var(--sp-4); } } /* Lucide icon default sizing */ svg.lucide { width: 18px; height: 18px; stroke-width: 1.75; }