/* =========================================================================== BolEnglish — Global Typography System --------------------------------------------------------------------------- One font family (Inter) across the whole platform · restrained weights (max 700) · a single, slightly-larger, consistent type scale · generous line height for readability. Modelled on Coursera / Notion / Stripe. Loaded LAST in every layout's and on index.html. Selectors are prefixed with `body ` so their specificity (0,1,1) outranks bare Tailwind utility classes (0,1,0) — this lets the scale win over both the compiled app.css AND the runtime Tailwind CDN used on the landing page, without needing !important. Inline element styles (e.g. the brand logo's Fredoka) still win, so the wordmark keeps its identity. =========================================================================== */ :root { --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ---- Family: a single primary font everywhere ------------------------- */ html, body { font-family: var(--font-sans); } button, input, select, textarea, optgroup { font-family: var(--font-sans); } body { font-size: 1.0625rem; /* 17px base body */ line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Display / title class uses the same family as the rest of the platform. The brand logo wordmark opts back into Fredoka via an inline style. */ body .learn-display { font-family: var(--font-sans); letter-spacing: -0.01em; } /* ---- Weight discipline: never heavier than 700 ------------------------ */ body .font-black, body .font-extrabold { font-weight: 700; } strong, b { font-weight: 600; } /* ---- One consistent, slightly-larger type scale ----------------------- Only font-size is overridden; each Tailwind step keeps its own (sensible) line-height, and any explicit leading-* utility a page sets still wins. */ body .text-xs { font-size: 0.8125rem; } /* 13px — labels, badges, chips */ body .text-sm { font-size: 0.9375rem; } /* 15px — secondary / nav / meta */ body .text-base { font-size: 1.0625rem; } /* 17px — body */ body .text-lg { font-size: 1.1875rem; } /* 19px — lead body / large body */ body .text-xl { font-size: 1.3125rem; } /* 21px — card titles */ body .text-2xl { font-size: 1.5rem; } /* 24px — section titles */ body .text-3xl { font-size: 2rem; } /* 32px */ body .text-4xl { font-size: 2.375rem; } /* 38px — page titles */ /* text-5xl and up (big stat displays) intentionally left untouched. */ /* ---- Readability defaults --------------------------------------------- */ p, li { line-height: 1.65; } h1 { line-height: 1.2; letter-spacing: -0.02em; } h2, h3, h4, h5, h6 { line-height: 1.3; letter-spacing: -0.01em; } /* ---- Learner nav stat pills (streak + XP) ----------------------------- Self-contained so the NavStats view component renders identically on every layout, whether the page loads app.css (Tailwind) or coach-brand.css. */ .navstat { display: inline-flex; align-items: center; gap: .375rem; border-radius: 9999px; padding: .4rem .85rem; font-size: .875rem; font-weight: 600; line-height: 1; white-space: nowrap; } .navstat-streak { background: rgba(249, 115, 22, .12); color: #f97316; } .navstat-xp { background: rgba(124, 58, 237, .10); color: #7c3aed; } @media (max-width: 639px) { .navstat-xp { display: none; } } @media (max-width: 420px) { .navstat-streak { display: none; } } /* ---- Validation summary: never show the empty red box on page load ---- asp-validation-summary always renders the .form-errors div; when there are no errors it carries .validation-summary-valid. Hide it in that state so the message box only appears once a real validation error exists. (Fixes the "empty red box on load" across all admin create/edit forms.) */ .form-errors.validation-summary-valid, .form-errors:empty { display: none !important; }