/* ============================================================ NETSTAGER TECHNOLOGIES — typography.css Global default typography using the Geist font family. Load order in : 1. Google Fonts (Geist — preconnect + stylesheet link) 2. Bootstrap 5 (reboot / normalize) 3. typography.css ← this file overrides Bootstrap type 4. style.css (layout, components, utilities) Fluid rem system (defined in style.css): 1 rem = 16 px @ 1920 px viewport (desktop reference) 1 rem = 13 px @ 1024 px viewport (tablet) 1 rem = 10 px @ 390 px viewport (mobile) All rem values here therefore scale proportionally with the viewport — no separate breakpoint overrides needed for type. ============================================================ */ /* ── SECTION 1 · FONT IMPORT ──────────────────────────────── */ /* Geist is served via Google Fonts (imported in ). Weights loaded: 300 · 400 · 500 · 600 · 700 · 800 · 900 If you ever switch to self-hosted, replace the tag with @font-face blocks pointing to your local /fonts/ folder. The CSS variables below will remain unchanged. @font-face example (self-hosted): @font-face { font-family: 'Geist'; src: url('../fonts/Geist-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist'; src: url('../fonts/Geist-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } */ /* ── SECTION 2 · TYPOGRAPHY TOKENS ───────────────────────── */ :root { /* ── Font families ── */ --font-base: 'Geist', 'Inter', system-ui, -apple-system, sans-serif; --font-heading: 'Geist', 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'Geist Mono', 'Fira Code', monospace; /* ── Font weights ── */ --fw-light: 300; --fw-regular: 400; /* body text, paragraphs */ --fw-medium: 500; /* headings h1–h5 */ --fw-semibold: 600; --fw-bold: 700; --fw-extrabold:800; --fw-black: 900; /* ── Design-reference sizes (rem) ── */ /* 1 rem = 16 px at 1920 px viewport. */ /* These values are the authored / design-spec sizes. */ --fs-body: 1.5rem; /* 24 px @16px → body &

*/ --lh-body: 2rem; /* 32 px @16px → body line-height */ --fs-h1: 4rem; /* 64 px @16px */ --fs-h2: 4rem; /* 64 px @16px */ --fs-h3: 4rem; /* 64 px @16px */ --fs-h4: 4rem; /* 64 px @16px */ --fs-h5: 4rem; /* 64 px @16px */ --lh-heading: 5rem; /* 80 px @16px */ /* ── Fluid overrides using clamp() ────────────────────────── clamp(minimum, preferred-fluid, maximum) · minimum : smallest the font should ever be (rem) · preferred : viewport-relative value that scales smoothly · maximum : largest allowed (rem) These sit on top of the fluid rem system so the type never becomes unreadably small on tiny screens or absurdly large on ultra-wide monitors. ─────────────────────────────────────────────────────────── */ --fs-h1-fluid: clamp(2rem, 3.333vw, 4rem); --fs-h2-fluid: clamp(1.75rem, 3.333vw, 4rem); --fs-h3-fluid: clamp(1.5rem, 3.333vw, 4rem); --fs-h4-fluid: clamp(1.25rem, 3.333vw, 4rem); --fs-h5-fluid: clamp(1rem, 3.333vw, 4rem); /* ── Colors ── */ --color-body: #636363; /* body &

text */ --color-heading: #000000; /* h1 – h5 text */ } /* ── SECTION 3 · BASE ELEMENT DEFAULTS ───────────────────── */ /* html font-size is set in style.css using the fluid rem formula: clamp(10px, 0.8333vw, 20px). Everything here is authored in rem and inherits that scale. */ /* ── Body & paragraphs ── */ body { font-family: var(--font-base); font-weight: var(--fw-regular); /* Geist Regular 400 */ font-size: var(--fs-body); /* 1.5rem · 24px @1920px */ line-height: var(--lh-body); /* 2rem · 32px @1920px */ color: var(--color-body); /* #636363 */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } p { font-family: var(--font-base); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-body); margin-top: 0; margin-bottom: var(--lh-body); /* vertical rhythm = 1 line-height */ } /* ── Headings h1 – h5 ── */ h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: var(--fw-medium); /* Geist Medium 500 */ line-height: var(--lh-heading); /* 5rem @1920px */ color: var(--color-heading); margin-top: 0; margin-bottom: 2rem; letter-spacing: -0.02em; /* Geist optical tightening */ text-rendering: optimizeLegibility; } h1 { font-size: var(--fs-h1-fluid); line-height: 1.1; } h2 { font-size: var(--fs-h2-fluid); line-height: 1.15; } h3 { font-size: var(--fs-h3-fluid); line-height: 1.2; } h4 { font-size: var(--fs-h4-fluid); line-height: 1.25; } h5 { font-size: var(--fs-h5-fluid); line-height: 1.3; } /* ── SECTION 4 · INLINE & SEMANTIC ELEMENTS ──────────────── */ /* Strong / bold — use semibold for Geist optical balance */ strong, b { font-weight: var(--fw-semibold); color: inherit; } /* Emphasis / italic */ em, i { font-style: italic; color: inherit; } /* Small text */ small { font-size: 0.875rem; /* 14px @16px */ line-height: 1.5; } /* Lead paragraph — slightly larger intro copy */ .lead { font-size: 1.75rem; /* 28px @16px */ line-height: 2.25rem; /* 36px @16px */ font-weight: var(--fw-regular); color: var(--color-body); } /* Muted / secondary text */ .text-muted-custom { color: rgba(99, 99, 99, 0.65); } /* Display size — hero headlines larger than h1 */ .display-1 { font-size: clamp(2.5rem, 5vw, 6rem); line-height: 1.05; font-weight: var(--fw-medium); letter-spacing: -0.03em; color: var(--color-heading); } /* Caption / label text */ .caption { font-size: 0.75rem; /* 12px @16px */ line-height: 1.5rem; font-weight: var(--fw-regular); letter-spacing: 0.02em; color: rgba(99, 99, 99, 0.75); } /* Overline / eyebrow label */ .overline { font-size: 0.8125rem; /* 13px @16px */ font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; color: var(--color-body); } /* ── SECTION 5 · LINKS ────────────────────────────────────── */ a { color: inherit; text-decoration: none; transition: color 0.2s ease; } a:hover { color: inherit; text-decoration: none; } /* ── SECTION 6 · LISTS ────────────────────────────────────── */ ul, ol { list-style: none; margin: 0; padding: 0; } /* Prose lists (inside .prose or article) */ .prose ul, article ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1.5rem; } .prose ol, article ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1.5rem; } .prose li, article li { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-body); margin-bottom: 0.5rem; } /* ── SECTION 7 · CROSS-BROWSER CONSISTENCY ───────────────── */ /* Prevent font inflation on mobile (iOS Safari) */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Consistent box-sizing across all browsers */ *, *::before, *::after { box-sizing: border-box; } /* Normalize button / input font inheritance */ button, input, select, textarea { font-family: var(--font-base); font-size: inherit; line-height: inherit; } /* Remove default fieldset / legend quirks */ fieldset { border: none; margin: 0; padding: 0; } /* ── SECTION 8 · RESPONSIVE FLUID OVERRIDES ──────────────── */ /* The fluid rem system in style.css already scales all rem values proportionally. These overrides add guardrails specifically for typography at extreme screen sizes. */ /* Tablet ≤ 1024 px */ @media (max-width: 64em) { :root { --lh-heading: 1.2; /* switch to unitless ratio on tablet */ } p, body { font-size: var(--fs-body); /* 1.5rem still — fluid rem shrinks it */ line-height: 1.7; /* unitless for better scaling */ } } /* Mobile ≤ 767 px */ @media (max-width: 767px) { :root { --lh-body: 1.7; } p, body { line-height: 1.7; } .lead { line-height: 1.6; } .display-1 { letter-spacing: -0.025em; } } /* Small mobile ≤ 480 px */ @media (max-width: 30em) { p, body { line-height: 1.65; } } /* ── SECTION 9 · PREFERS REDUCED MOTION ──────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }