/* * typography.css * Loaded LAST in layout.tsx — wins all cascade conflicts by document order. * No !important needed. Do not move this link tag above other stylesheets. */ /* ── Root ───────────────────────────────────────────────────────────────── */ /* Bootstrap 3 sets html { font-size: 10px } which makes 1rem = 10px. Reset to 16px so all rem values are correct. */ html { font-size: 16px; overflow-x: hidden; /* prevent any element from causing horizontal scroll */ } /* ── Fonts ─────────────────────────────────────────────────────────────── */ body { font-family: var(--font-nunito), 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 0.9375rem; /* 15px — school-standard; 16px is fine but 17px reads as editorial */ line-height: 1.65; color: #3a3a3a; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-poppins), 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 700; line-height: 1.25; color: #222; margin-top: 0; } /* ── Heading scale ──────────────────────────────────────────────────────── */ h1 { font-size: 1.875rem; /* 30px */ letter-spacing: -0.02em; line-height: 1.2; } h2 { font-size: 1.375rem; /* 22px */ letter-spacing: -0.01em; } h3 { font-size: 1.125rem; /* 18px */ } h4 { font-size: 0.9375rem; /* 15px */ font-weight: 600; } h5 { font-size: 0.875rem; /* 14px */ font-weight: 600; } h6 { font-size: 0.75rem; /* 12px */ font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; } @media (max-width: 767px) { h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.0625rem; } } /* ── Body text ──────────────────────────────────────────────────────────── */ p { font-size: 0.9375rem; /* 15px — inherits body size */ line-height: 1.7; color: #444; margin-bottom: 1rem; } p:last-child { margin-bottom: 0; } /* ── Utility classes ────────────────────────────────────────────────────── */ /* Separator banner text */ .text-lg { font-size: 1.0625rem; /* 17px — a notch above body, not editorial-large */ line-height: 1.65; color: #444; font-weight: 400; } /* Homepage welcome paragraphs */ .lead-intro { font-size: 1rem; /* 16px — slightly above base 15px, warm and readable */ line-height: 1.75; color: #3a3a3a; font-weight: 400; margin-bottom: 1rem; } /* Headmaster byline */ .headmaster-byline { font-size: 0.9375rem; font-weight: 700; color: #555; font-style: italic; margin-top: 1.5rem; margin-bottom: 0; border-left: 3px solid #ff0000; padding-left: 10px; } /* ── Legacy overrides ───────────────────────────────────────────────────── */ /* custom.css sets .content h2 { uppercase; font-size: 36px } */ .content h2 { font-size: 1.375rem; /* matches h2 scale */ text-transform: none; } /* custom.css sets .text-lg { font-size: 14px } — already handled above */ /* Breadcrumb page title — slightly larger than h1 scale for banner context */ .breadcrumb-wrapper h1 { font-size: 1.625rem; /* 26px */ letter-spacing: -0.01em; } @media (max-width: 767px) { .breadcrumb-wrapper h1 { font-size: 1.25rem; } } /* fontWeightforteen helper — used in about-us page */ .fontWeightforteen { font-size: 0.9375rem; }