/* LOGOS shared baseline — auto-injected on every HTML response by the * Flask after_request hook in app.py. Mobile-first defaults that * EVERY page inherits, so no per-template CSS rewrites are needed for * a page to render correctly on a phone. * * Fluid layout tokens (--logos-space-*, --logos-type-*, --logos-radius-*) * live in :root; pair with /logos/static/css/logos-marketing.css for * landing-style pages (see templates/Logos.html). * * Design rules: * • Add baselines, don't override page styles. Pages that explicitly * set a font-size / color / margin keep winning via specificity. * • Mobile-first: phone-friendly defaults are the BASE; desktop is the * enhancement (via min-width queries). * • Use rem/em so user-controlled accessibility zoom works. * • Touch / ≤1024 px: html 24–26 px; header uses oversized #logos-nav + * px clamps in logos-nav.js. Logos marketing uses px clamps too. * * Touch targets: 44×44 px is the iOS HIG / Android Material minimum. * Inputs default to 16px+ to suppress iOS Safari's focus-zoom. */ /* ── Box-model reset that doesn't break legacy fixed-size layouts ── */ *, *::before, *::after { box-sizing: border-box; } /* ── Fluid design tokens (rem = html font-size). * Replicate on new pages: `padding: var(--logos-space-gutter)` etc. * Clamp() blends phone / tablet / laptop without breakpoint cliffs. ─ */ :root { --logos-space-gutter: clamp(0.5rem, 2.5vw, 1.25rem); --logos-space-section: clamp(1rem, 4vw, 2rem); --logos-space-card-pad: clamp(0.875rem, 3.2vw, 1.25rem); --logos-radius-panel: clamp(10px, 2vw, 15px); --logos-radius-card: clamp(6px, 1.25vw, 8px); --logos-radius-pill: clamp(14px, 3vw, 20px); --logos-border-accent: clamp(2px, 0.35vw, 3px); --logos-type-hero: clamp(1.85rem, 1.15rem + 3.8vw, 3.35rem); --logos-type-title: clamp(1.35rem, 1.05rem + 1.1vw, 1.65rem); --logos-type-heading: clamp(1.22rem, 1rem + 1.05vw, 1.42rem); --logos-type-subhead: clamp(1.06rem, 0.94rem + 0.65vw, 1.22rem); --logos-type-body: clamp(1rem, 0.93rem + 0.35vw, 1.09rem); --logos-type-lead: clamp(1.02rem, 0.93rem + 0.48vw, 1.125rem); --logos-type-ui: clamp(0.9375rem, 0.88rem + 0.3vw, 1rem); --logos-type-caption: clamp(0.8125rem, 0.76rem + 0.25vw, 0.875rem); } /* ── Unified nav: readable on tablets / phones; children use em of this root ─ */ #logos-nav { font-size: clamp(0.8125rem, 0.72rem + 0.4vw, 0.9375rem); } /* ── Root font scaling: 16 px desktop; fluid on viewports ≤1024 px ───── * html.font-size affects rem units across every page; em units that * cascade from inherit indirectly. Pages that set body * font-size in px still win because px is absolute. */ html { font-size: 16px; /* Desktop: suppress layout shift from font-boost heuristics */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ── Touch / tablets / “desktop mode” phones: readability layer ───────── * text-size-adjust:auto lets Safari/Chrome apply inflation heuristics. * Matches max-width seen when Android/iOS requests desktop layout. */ @media (max-width: 1024px) { html { font-size: 24px; -webkit-text-size-adjust: auto; text-size-adjust: auto; } :root { --logos-type-hero: clamp(2.35rem, 1.5rem + 4.5vw, 3.55rem); --logos-type-title: clamp(1.72rem, 1.45rem + 1.42vw, 1.78rem); --logos-type-heading: clamp(1.56rem, 1.35rem + 1.25vw, 1.62rem); --logos-type-subhead: clamp(1.38rem, 1.25rem + 0.95vw, 1.45rem); --logos-type-body: clamp(1.42rem, 1.2rem + 1.15vw, 1.52rem); --logos-type-lead: clamp(1.5rem, 1.28rem + 1.25vw, 1.62rem); --logos-type-ui: clamp(1.3rem, 1.15rem + 0.82vw, 1.4rem); --logos-type-caption: clamp(1.12rem, 1.02rem + 0.62vw, 1.2rem); } #logos-nav { font-size: max(21px, clamp(1.55rem, 1.12rem + 2.1vw, 1.85rem)); -webkit-text-size-adjust: auto; text-size-adjust: auto; } } /* Very narrow phones: one more html step + running text bump */ @media (max-width: 480px) { html { font-size: 26px; } :root { --logos-type-hero: clamp(2.62rem, 1.62rem + 5.35vw, 3.62rem); --logos-type-title: clamp(1.96rem, 1.58rem + 1.45vw, 2rem); --logos-type-body: clamp(1.52rem, 1.14rem + 1.15vw, 1.62rem); --logos-type-lead: clamp(1.58rem, 1.2rem + 1.35vw, 1.72rem); --logos-type-ui: clamp(1.38rem, 1.18rem + 0.95vw, 1.48rem); --logos-type-subhead: clamp(1.52rem, 1.35rem + 1.12vw, 1.56rem); --logos-type-heading: clamp(1.72rem, 1.5rem + 1.35vw, 1.82rem); } #logos-nav { font-size: max(23px, clamp(1.62rem, 1.22rem + 2.05vw, 1.95rem)); } } /* ── Default body — only applies if the page didn't set its own ── */ body { margin: 0; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Long-form text wrap: long URLs / SQL / code don't blow out width ── */ code, pre, kbd, samp { word-wrap: break-word; overflow-wrap: anywhere; } pre { white-space: pre-wrap; } /* ── Images / media never push past their container ── */ img, video, canvas, svg, iframe { max-width: 100%; height: auto; } /* ── Form controls: 16px+ so iOS doesn't zoom on focus, big touch * targets on phones, and inherit the page's font family. */ input, select, textarea, button { font: inherit; font-size: max(1rem, 16px); } @media (max-width: 768px) { /* Make tap targets at least 44px tall on phones. min-height instead * of height so explicit-height controls aren't overridden. */ button, .btn, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], input[type="file"] { min-height: 44px; } /* Links inside running prose stay normal; bare-link buttons in * navs and CTAs get a comfortable tap target via padding rules * in each component, not globally here, to avoid breaking layouts. */ } /* ── Generic table escape hatch ──────────────────────────────────── * Tables that aren't already wrapped in a scroll container can still * pan horizontally on a phone instead of forcing a page-wide scroll. */ @media (max-width: 768px) { table { max-width: 100%; } } /* ── A "logos-page" wrapper class for new pages to opt in to the * full mobile-first treatment without touching their CSS. ── */ .logos-page { max-width: min(1080px, 100%); margin: 0 auto; padding: var(--logos-space-section, 1.25rem) var(--logos-space-gutter, 1rem) 2rem; } @media (max-width: 768px) { .logos-page { padding: calc(var(--logos-space-gutter, 1rem) * 0.9) calc(var(--logos-space-gutter, 1rem) * 0.75) 1.5rem; line-height: 1.62; } .logos-page h1 { font-size: 1.875rem; } .logos-page h2 { font-size: 1.54rem; } .logos-page table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } } /* ── Print: drop background gradients & shadows, ink-friendly text ── */ @media print { body { background: #fff !important; color: #000; } .logos-marketing-body { background: #fff !important; } #logos-nav { display: none !important; } }