/* 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 phones: nav dropdowns ~25px (readable, full-width labels); * top-bar pills stay compact via logos-nav.js. * * 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); /* LOGOS nav dropdown lists: compact desktop; modest bump on touch (see below). */ --logos-nav-menu-font: 13px; --logos-nav-menu-line: 1.35; --logos-nav-menu-item-py: 4px; --logos-nav-menu-item-px: 12px; --logos-nav-menu-item-min-h: 0; --logos-nav-menu-section-font: 10px; --logos-nav-menu-section-py: 4px; } /* Touch phones: readable dropdown text (~25px), scaled tap targets. */ @media (max-device-width: 1024px), (max-width: 768px), (max-width: 1024px) and (hover: none), (hover: none) and (pointer: coarse) { :root { --logos-nav-menu-font: 25px; --logos-nav-menu-line: 1.4; --logos-nav-menu-item-py: 15px; --logos-nav-menu-item-px: 21px; --logos-nav-menu-item-min-h: 65px; --logos-nav-menu-section-font: 16px; --logos-nav-menu-section-py: 9px; } } /* ── Unified nav: base size for top-bar pills (dropdown panels use vars above). ─ */ #logos-nav { font-size: clamp(14px, 0.875rem + 0.2vw, 17px); } /* ── Root font scaling: 16 px desktop; modest bump on phones ───── * 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%; } @media (max-width: 768px) { html { font-size: 18px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } :root { --logos-type-hero: clamp(1.75rem, 1.2rem + 3.5vw, 2.5rem); --logos-type-title: clamp(1.35rem, 1.1rem + 1vw, 1.55rem); --logos-type-heading: clamp(1.22rem, 1.05rem + 0.85vw, 1.38rem); --logos-type-subhead: clamp(1.08rem, 0.98rem + 0.5vw, 1.18rem); --logos-type-body: clamp(1.02rem, 0.96rem + 0.3vw, 1.08rem); --logos-type-lead: clamp(1.06rem, 0.98rem + 0.4vw, 1.12rem); --logos-type-ui: clamp(0.98rem, 0.92rem + 0.25vw, 1.02rem); --logos-type-caption: clamp(0.86rem, 0.8rem + 0.2vw, 0.92rem); } #logos-nav { font-size: clamp(15px, 3.8vw, 17px); } } @media (max-width: 480px) { html { font-size: 18px; } #logos-nav { font-size: clamp(15px, 4vw, 17px); } } /* ── 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; } } /* ── 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; } } /* ── Phone nav dropdowns: panel items only (not top-bar pills). ── */ @media (max-device-width: 1024px) { #logos-nav .ln-drop-panel, #logos-nav .ln-submenu-body { font-size: var(--logos-nav-menu-font) !important; line-height: var(--logos-nav-menu-line); } #logos-nav .ln-drop-item, #logos-nav a.ln-drop-item, #logos-nav .ln-drop-item .ln-drop-label, #logos-nav .ln-submenu-label, #logos-nav .ln-submenu-toggle { font-size: var(--logos-nav-menu-font) !important; line-height: var(--logos-nav-menu-line); font-weight: 600; } #logos-nav .ln-drop-section { font-size: var(--logos-nav-menu-section-font) !important; } #logos-nav .ln-drop-item, #logos-nav .ln-submenu-toggle { padding: var(--logos-nav-menu-item-py) var(--logos-nav-menu-item-px) !important; min-height: var(--logos-nav-menu-item-min-h); } } #logos-nav.ln-touch-menu .ln-drop-panel, #logos-nav.ln-touch-menu .ln-submenu-body { font-size: var(--logos-nav-menu-font) !important; line-height: var(--logos-nav-menu-line); } #logos-nav.ln-touch-menu .ln-drop-item, #logos-nav.ln-touch-menu a.ln-drop-item, #logos-nav.ln-touch-menu .ln-drop-item .ln-drop-label, #logos-nav.ln-touch-menu .ln-submenu-label, #logos-nav.ln-touch-menu .ln-submenu-toggle { font-size: var(--logos-nav-menu-font) !important; line-height: var(--logos-nav-menu-line); font-weight: 600; } #logos-nav.ln-touch-menu .ln-drop-section { font-size: var(--logos-nav-menu-section-font) !important; } #logos-nav.ln-touch-menu .ln-drop-item, #logos-nav.ln-touch-menu .ln-submenu-toggle { padding: var(--logos-nav-menu-item-py) var(--logos-nav-menu-item-px) !important; min-height: var(--logos-nav-menu-item-min-h); } @media (max-width: 768px), (max-width: 1024px) and (hover: none), (hover: none) and (pointer: coarse) { #logos-nav .ln-drop-panel, #logos-nav .ln-submenu-body { font-size: var(--logos-nav-menu-font) !important; line-height: var(--logos-nav-menu-line); } #logos-nav .ln-drop-item .ln-drop-label, #logos-nav .ln-submenu-label { font-size: var(--logos-nav-menu-font) !important; line-height: var(--logos-nav-menu-line); font-weight: 600; } #logos-nav .ln-drop-section { font-size: var(--logos-nav-menu-section-font) !important; } #logos-nav .ln-drop-item, #logos-nav .ln-submenu-toggle { padding: var(--logos-nav-menu-item-py) var(--logos-nav-menu-item-px) !important; min-height: var(--logos-nav-menu-item-min-h); } } /* ── 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; } }