/* ============================================================ COMMON.CSS — Shared layout/typography/button utilities Used across every template (not header/footer-specific — see header.css / footer.css for those). ============================================================ */ .container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--container-pad); width: 100%; } .h1 { font-size: var(--h1-size); line-height: var(--h1-line); font-weight: var(--h1-weight); font-family: var(--font-family); } .h2 { font-size: var(--h2-size); line-height: var(--h2-line); font-weight: var(--h2-weight); font-family: var(--font-family); } .h3 { font-size: var(--h3-size); line-height: var(--h3-line); font-weight: var(--h3-weight); font-family: var(--font-family); } .body-text { font-size: var(--body-size); line-height: var(--body-line); font-weight: var(--body-weight); } /* ── Buttons ──────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-family); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--radius-sm); padding: 12px 28px; transition: all var(--ease); white-space: nowrap; text-decoration: none; border: 2px solid transparent; } .btn--teal { background-color: var(--clr-teal); color: var(--clr-dark); border-color: var(--clr-teal); } .btn--teal:hover { background-color: var(--clr-teal-dark); border-color: var(--clr-teal-dark); } .btn--outline-teal { background-color: transparent; color: var(--clr-teal); border-color: var(--clr-teal); } .btn--outline-teal:hover { background-color: var(--clr-teal); color: var(--clr-dark); } .btn--outline-white { background-color: transparent; color: var(--clr-white); border-color: var(--clr-white); } .btn--outline-white:hover { background-color: var(--clr-white); color: var(--clr-dark); } .btn--blue { background-color: var(--clr-blue); color: var(--clr-white); border-color: var(--clr-blue); } .btn--blue:hover { background-color: var(--clr-blue-hover); border-color: var(--clr-blue-hover); } /* ── Section label (small uppercase eyebrow above headings) ─ */ .section-label { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-teal); margin-bottom: var(--sp-3); } /* ── Generic page wrapper (used by page.php / index.php / template-settings.php) ── Named .page-content, not .page — WordPress's body_class() already outputs a bare "page" class on every Page post type, which would otherwise collide with this rule and apply its padding to . */ .page-content { padding: var(--sp-8) 0; } .page__header { margin-bottom: var(--sp-8); } .page__title { font-size: 36px; font-weight: 800; line-height: 1.1; margin-bottom: var(--sp-3); color: var(--clr-text-dark); } .page__subtitle { color: var(--clr-text-muted); font-size: 18px; max-width: 56ch; } .not-found { text-align: center; padding: 64px 0; } .not-found h1 { font-size: 30px; margin-bottom: var(--sp-6); color: var(--clr-text-dark); } /* ── Long-form content (page.php fallback, blog post body) ─── */ .prose { font-size: 18px; line-height: 1.8; color: var(--clr-text-body); } .prose h2 { font-size: 24px; font-weight: 700; margin-top: var(--sp-8); margin-bottom: var(--sp-4); color: var(--clr-text-dark); } .prose h3 { font-size: 20px; font-weight: 600; margin-top: var(--sp-6); margin-bottom: var(--sp-3); color: var(--clr-text-dark); } .prose p { margin-bottom: var(--sp-4); } .prose ul, .prose ol { margin-bottom: var(--sp-4); padding-left: var(--sp-6); } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li { margin-bottom: var(--sp-2); } .prose strong { font-weight: 700; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 768px) { .page__title { font-size: 28px; } }