/* ═══════════════════════════════════════════════════════════════════════════ PeytonGhalib — unified typography system ─────────────────────────────────────────────────────────────────────────── Loaded AFTER assets/css/style.css so it wins ties on source order. It only ever sets type properties (family, size, weight, tracking, leading, colour) and the reading measure. No layout, no positioning, no behaviour. WHY THIS FILE EXISTS The store had grown four competing font systems: 1. Josefin Sans — set on by the Furnixar template. A geometric display face with a short x-height: fine for a hero, tiring for a paragraph, and the reason the site read "decorative" rather than premium. 2. Poppins — hardcoded inline in ~40 places (navbar, homepage hero). 3. 'DM Sans' — named first in six newer templates but never actually self-hosted, so every one of them silently fell back to Poppins. A font system nobody could see. 4. 'July it' — a decorative display face still shipped in style.css as .font-secondary. Unreferenced. One system replaces all four: Manrope for headings, Inter for body. WHY THESE TWO Inter was drawn for screen UI — tall x-height, open apertures, unambiguous 1/l/I — which is what makes 18px body copy readable rather than merely big. Manrope is geometric enough to feel designed at display sizes but keeps a normal x-height, so headings and body sit on the same optical baseline instead of looking like two unrelated brands stacked on one page. SPECIFICITY CONTRACT — read before adding rules Almost everything here is an ELEMENT selector on purpose. Tailwind utility classes (text-xl, font-bold, text-gray-500) are class selectors and will therefore keep winning wherever a component sets them deliberately. That is the intent: this file moves the FLOOR — family, colour, rhythm, and the size of anything nobody styled — without fighting 134 templates for control of their own hierarchy. Adding !important here would invert that and break components. Don't. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Families ──────────────────────────────────────────────────────── Plus Jakarta Sans is the specified stand-in if Manrope is missing; it is not self-hosted, so in practice this falls through to the system UI stack, which is the correct failure mode — never to a decorative face. */ --pg-font-heading: 'Manrope', 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --pg-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* ── Fluid scale ───────────────────────────────────────────────────── Every clamp() hits its floor at a 360px viewport and its ceiling at 1280px, so the whole scale moves together and no step ever crosses the one above it. The maxima are the specified desktop sizes; the minima are what fits a 360px phone without a single wrapped word overflowing its container. */ --pg-h1: clamp(2rem, 1.35rem + 2.90vw, 3rem); /* 32 → 48px */ --pg-h2: clamp(1.75rem, 1.40rem + 1.56vw, 2.25rem); /* 28 → 36px */ --pg-h3: clamp(1.5rem, 1.28rem + 0.98vw, 1.875rem); /* 24 → 30px */ --pg-h4: clamp(1.25rem, 1.14rem + 0.49vw, 1.5rem); /* 20 → 24px */ --pg-h5: clamp(1.125rem, 1.07rem + 0.24vw, 1.25rem); /* 18 → 20px */ --pg-h6: 1rem; /* 16px */ --pg-body-size: clamp(1rem, 0.96rem + 0.20vw, 1.125rem); /* 16 → 18px */ --pg-small: 0.9375rem; /* 15px */ --pg-label: 0.8125rem; /* 13px */ /* ── Leading & tracking ────────────────────────────────────────────── Headings get slight negative tracking because geometric faces open up as they scale; without it a 48px Manrope headline reads loose. */ --pg-lh-heading: 1.2; --pg-lh-body: 1.8; --pg-track-display: -0.022em; --pg-track-heading: -0.014em; --pg-track-label: 0.08em; /* ── Weights ── */ --pg-w-h1: 800; --pg-w-h2: 700; --pg-w-h3: 700; --pg-w-h4: 600; --pg-w-h5: 600; --pg-w-body: 400; /* ── Colour ── Never pure black: #111827 keeps headings authoritative while letting the body grey sit a readable two steps below it rather than one. */ --pg-c-heading: #111827; --pg-c-body: #4B5563; --pg-c-secondary: #6B7280; --pg-c-muted: #9CA3AF; /* ── Rhythm ── */ --pg-para-gap: 1.5rem; /* 24px between paragraphs */ --pg-section: 5rem; /* 80px between content sections */ /* ── Reading measure ── 740px sits mid-range of the specified 720–760px. At 18px Inter that is ~78 characters, just inside the point where the eye starts losing the next line on the carriage return. */ --pg-measure: 46.25rem; /* 740px */ } /* Dark mode: the same hierarchy inverted. Pure white body text on a dark ground vibrates, so body copy stops at 72% just as it stops short of black in light mode. */ .dark { --pg-c-heading: #FFFFFF; --pg-c-body: rgba(255, 255, 255, 0.72); --pg-c-secondary: rgba(255, 255, 255, 0.60); --pg-c-muted: rgba(255, 255, 255, 0.44); } /* ─────────────────────────────────────────────────────────────────────────── 1. BASE ─────────────────────────────────────────────────────────────────────────── */ /* NOTE: html font-size is deliberately untouched. Every Tailwind text-* utility in this codebase is rem-based, so changing the root would rescale all 134 templates at once. Body size is set here instead, where it governs inherited text only. */ body { font-family: var(--pg-font-body); font-size: var(--pg-body-size); font-weight: var(--pg-w-body); line-height: var(--pg-lh-body); color: var(--pg-c-body); letter-spacing: 0; /* Kerning and default figures on; opsz lets Inter's optical sizing track the fluid scale instead of rendering one master at every size. */ font-kerning: normal; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ─────────────────────────────────────────────────────────────────────────── 2. HEADINGS ─────────────────────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--pg-font-heading); line-height: var(--pg-lh-heading); letter-spacing: var(--pg-track-heading); color: var(--pg-c-heading); /* text-wrap:balance stops a headline dropping one orphaned word onto its own line — the single most common thing that makes an otherwise clean page look unconsidered. Ignored by browsers that don't support it. */ text-wrap: balance; } h1, .h1 { font-size: var(--pg-h1); font-weight: var(--pg-w-h1); letter-spacing: var(--pg-track-display); } h2, .h2 { font-size: var(--pg-h2); font-weight: var(--pg-w-h2); } h3, .h3 { font-size: var(--pg-h3); font-weight: var(--pg-w-h3); } h4, .h4 { font-size: var(--pg-h4); font-weight: var(--pg-w-h4); } h5, .h5 { font-size: var(--pg-h5); font-weight: var(--pg-w-h5); } h6, .h6 { font-size: var(--pg-h6); font-weight: 600; letter-spacing: 0; } /* The template's own heading utilities pointed at the two retired faces. Repointing them is what keeps older markup inside the system rather than stranded outside it. */ .font-primary { font-family: var(--pg-font-heading); } .font-secondary { font-family: var(--pg-font-heading); } /* ─────────────────────────────────────────────────────────────────────────── 3. BODY COPY ─────────────────────────────────────────────────────────────────────────── */ p { line-height: var(--pg-lh-body); /* pretty only tunes the last few lines, so unlike balance it is safe on copy of any length. */ text-wrap: pretty; } /* Margin goes on a sibling selector so a paragraph never adds a trailing gap inside a card or a flex row that is already spacing its own children. */ p + p, p + ul, p + ol, ul + p, ol + p, p + blockquote, blockquote + p { margin-top: var(--pg-para-gap); } li { line-height: 1.7; } li + li { margin-top: 0.5rem; } small, .text-small { font-size: var(--pg-small); line-height: 1.65; } strong, b { font-weight: 600; color: var(--pg-c-heading); } /* ─────────────────────────────────────────────────────────────────────────── 4. LABELS, FORMS, BUTTONS ─────────────────────────────────────────────────────────────────────────── */ /* Form controls inherit nothing by default — without this they render in the browser's own UI font and give the whole checkout away as unstyled. */ input, textarea, select, button, optgroup { font-family: inherit; letter-spacing: inherit; } label, .pg-label { font-family: var(--pg-font-heading); font-size: var(--pg-label); font-weight: 600; letter-spacing: var(--pg-track-label); color: var(--pg-c-secondary); } .pg-label { text-transform: uppercase; } /* 16px is not a style choice on inputs: iOS Safari zooms the viewport on focus for anything smaller, and the page never zooms back out. */ input, textarea, select { font-size: 1rem; color: var(--pg-c-heading); } ::placeholder { color: var(--pg-c-muted); opacity: 1; } /* Buttons get family, weight and tracking here; size stays with the button classes themselves so icon-only and compact variants keep their own. The named classes below are the full-size actions, which do take the 16px. */ button, .btn, [type='button'], [type='submit'], [type='reset'] { font-family: var(--pg-font-heading); font-weight: 600; letter-spacing: 0.01em; } .btn, .btn-primary, .btn-secondary, .btn-outline { font-size: 1rem; line-height: 1.2; } /* ─────────────────────────────────────────────────────────────────────────── 5. READING MEASURE ─────────────────────────────────────────────────────────────────────────── The policy and long-form pages render inside .prose. Capping the measure there catches Terms, Privacy, Refund, Shipping and Returns in one rule without touching the marketing pages, whose sections are deliberately full-bleed. */ .prose { max-width: var(--pg-measure); font-size: var(--pg-body-size); line-height: var(--pg-lh-body); color: var(--pg-c-body); } .prose > * + * { margin-top: var(--pg-para-gap); } /* Long documents need the heading to belong to the text under it, not float equidistant between two blocks. Hence the asymmetric margins. */ .prose h2 { margin-top: var(--pg-section); margin-bottom: 1rem; } .prose h3 { margin-top: 2.5rem; margin-bottom: 0.75rem; } .prose h2:first-child, .prose h3:first-child { margin-top: 0; } .prose ul, .prose ol { padding-left: 1.375rem; } .prose a { color: #bb976d; text-underline-offset: 0.2em; } /* Opt-in measure for long-form blocks that are not .prose. */ .pg-measure { max-width: var(--pg-measure); } /* ─────────────────────────────────────────────────────────────────────────── 6. RESPONSIVE ─────────────────────────────────────────────────────────────────────────── The scale is already fluid, so this handles only what clamp() cannot: overflow. */ @media (max-width: 767.98px) { :root { --pg-lh-body: 1.7; /* long leading wastes vertical space on a phone */ --pg-section: 3rem; } /* A long unbroken product name or URL is the one thing that can still push a phone layout sideways. */ h1, h2, h3, .h1, .h2, .h3 { overflow-wrap: break-word; text-wrap: pretty; /* balance fights the narrow measure here */ } } /* Respect the reader's own minimum: if they have set a larger base size we must not clamp them back down. clamp() already scales with the viewport, not the root, so this only guards the fixed steps. */ @media (min-width: 1600px) { :root { --pg-measure: 48rem; } }