/* ============================================================================= TYPOGRAPHY.CSS Scope: Font setup, text rendering, headings, paragraphs, links, lists, blockquotes, and common text utilities. Notes: - We load fonts in HTML via Google Fonts (see comment above). - We keep using your CSS variables; where helpful, we add safe fallbacks. - IMPORTANT: Your existing variable name "--awc-font-serif" is reused for the display/heading font even though Montserrat is sans-serif. This avoids a breaking refactor across your codebase. The comment below clarifies intent. ========================================================================== */ /* ============================================================================= ROOT FONT VARIABLES (non-breaking defaults + fallbacks) If these are already defined in base.css, this block will simply reinforce them. Otherwise, it sets sensible defaults so this file is drop-in safe. ========================================================================== */ :root { /* Display/heading font (kept variable name for backward compatibility) */ --awc-font-serif: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Body font */ --awc-font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Color tokens (these should match your design system) */ --awc-text: #222; /* default body text */ --awc-muted: #666; /* secondary text / captions */ --awc-dark: #0f172a; /* existing token in your CSS */ --awc-brand: #0066cc; /* brand link color (used by .link-brand) */ } /* ============================================================================= TEXT RENDERING & BASELINE Improves cross-browser type appearance and sets the base rhythm. ========================================================================== */ html { /* Better scaling for clamp() calculations and consistent rem sizing */ font-size: 100%; /* 16px base on most browsers */ } body { font-family: var(--awc-font-sans); font-weight: 400; font-size: 1rem; /* ~16px */ line-height: 1.6; /* comfortable default for body text */ color: var(--awc-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ============================================================================= HEADINGS Modern, confident headings using the display font. We use clamp() so type scales smoothly across viewports without media queries. -------------------------------------------------------------------------- h1: Hero/section titles h2: Section headings h3: Subsection headings ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--awc-font-serif); /* Montserrat (see note above) */ line-height: 1.2; margin: 0 0 0.5em 0; color: var(--awc-dark); font-weight: 600; /* default heading weight */ } h1 { /* From ~32px up to ~48px depending on viewport */ font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.015em; /* slight tightening for display sizes */ font-weight: 700; /* give H1 extra presence */ } h2 { /* From ~24px up to ~36px */ font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -0.01em; } h3 { /* From ~20px up to ~24px */ font-size: clamp(1.25rem, 2.2vw, 1.5rem); letter-spacing: -0.005em; } h4 { font-size: 1.125rem; /* ~18px */ } h5 { font-size: 1rem; /* ~16px */ text-transform: none; } h6 { font-size: 0.875rem; /* ~14px */ letter-spacing: 0.02em; text-transform: uppercase; color: var(--awc-muted); } .awc-h3-tight { line-height: 1.2 !important; } /* ============================================================================= PARAGRAPHS & LEAD ========================================================================== */ p { margin: 0 0 1rem 0; } .lead { /* Slightly larger than default body; color can be overridden contextually (e.g., hero sets lead to white in layout.css). */ font-size: 1.1rem; line-height: 1.5; color: var(--awc-dark); margin-bottom: 1.25rem; } /* ============================================================================= LINKS Default links + a brand-styled helper class that you’re already using. ========================================================================== */ a { color: var(--awc-brand); text-decoration: none; } a:hover, a:focus { text-decoration: underline; } /* Brand link helper (explicit) */ .link-brand { color: var(--awc-brand); } .link-brand:hover, .link-brand:focus { text-decoration: underline; text-underline-offset: 2px; } /* ============================================================================= LISTS Tighter, readable spacing with consistent nested behavior. ========================================================================== */ ul, ol { margin: 0 0 1rem 1.25rem; /* left indent keeps lists aligned in grids */ padding: 0; } ul ul, ol ol, ul ol, ol ul { margin-bottom: 0.75rem; /* slightly tighter for nested lists */ } li { margin: 0.25rem 0; } /* ============================================================================= BLOCKQUOTES & FIGCAPTIONS Subtle styling that fits a modern wellness aesthetic. ========================================================================== */ blockquote { margin: 1rem 0; padding: 0.75rem 1rem; border-left: 4px solid rgba(0, 102, 204, 0.25); /* faint brand accent */ background: rgba(0, 0, 0, 0.02); color: var(--awc-dark); font-style: italic; } figcaption, .caption, .small-note { font-size: 0.875rem; color: var(--awc-muted); margin-top: 0.5rem; } /* ============================================================================= INLINE ELEMENTS Keep emphasis readable and consistent across components. ========================================================================== */ strong, b { font-weight: 600; /* slightly less aggressive than 700 for modern feel */ color: var(--awc-dark); } em, i { font-style: italic; } small { font-size: 0.875rem; color: var(--awc-muted); } code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.95em; background: rgba(0, 0, 0, 0.04); padding: 0.1em 0.35em; border-radius: 4px; } /* ============================================================================= HR / DIVIDERS ========================================================================== */ hr { border: 0; border-top: 1px solid rgba(0, 0, 0, 0.08); margin: 1.5rem 0; } /* ============================================================================= UTILITIES (text) Lightweight helpers for common typographic tweaks. ========================================================================== */ .text-muted { color: var(--awc-muted) !important; } .text-inverse { color: #fff !important; } .text-brand { color: var(--awc-brand) !important; } .text-tight { letter-spacing: -0.01em !important; } .text-wide { letter-spacing: 0.03em !important; } .eyebrow { display: block; font-size: 0.8125rem; /* ~13px */ letter-spacing: 0.08em; text-transform: uppercase; color: var(--awc-muted); margin-bottom: 0.5rem; } .text-selected { color: var(--awc-brand); font-weight: 600; border-bottom: 2px solid var(--awc-brand); padding-top: 1px; } /* ============================================================================= RESPONSIVE TWEAKS Modest type scaling and rhythm adjustments for small screens. ========================================================================== */ @media (max-width: 576px) { h1 { font-size: clamp(1.75rem, 6vw, 2.25rem); } h2 { font-size: clamp(1.375rem, 4.5vw, 1.75rem); } h3 { font-size: clamp(1.125rem, 3.6vw, 1.375rem); } .lead { font-size: 1.05rem; } } /* ============================================================================= ACCESSIBILITY & PRINT ========================================================================== */ /* Focus styles (defer to your component library if present) */ a:focus-visible, button:focus-visible { outline: 2px solid rgba(0, 102, 204, 0.6); outline-offset: 2px; } /* Print: simpler, ink-friendly */ @media print { a { color: #000; text-decoration: underline; } blockquote { border-left-color: #000; background: none; } } /* === AWC Section Typography: Courses & Health Products ==================== */ /* Eyebrow: small uppercase label above titles */ .awc-eyebrow { display: inline-block; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--awc-muted); margin-bottom: var(--awc-space-2); font-weight: 600; } /* Section Title (inherits heading sizes but with slight tracking) */ .awc-title { font-weight: 700; letter-spacing: -0.015em; color: var(--awc-dark); margin-bottom: var(--awc-space-3); font-family: var(--awc-font-serif); } /* Lead paragraph (subhead or intro under section title) */ .awc-lead { font-size: 1.05rem; color: var(--awc-muted); line-height: 1.7; max-width: 68ch; margin-bottom: var(--awc-space-4); } /* Headings and display text spacing inside cards */ .awc-card h3, .awc-card h4 { font-weight: 600; margin-bottom: var(--awc-space-2); color: var(--awc-dark); } /* CTA emphasis if used in section headers */ .awc-cta { font-weight: 700; color: var(--awc-brand); } /* Eyebrow variant for light backgrounds (e.g., on colored panels) */ .awc-eyebrow--light { color: rgba(255, 255, 255, 0.85); } .check-list { list-style: none; padding-left: 0 !important; } .check-list li::before { content: "✔ "; color: green; font-weight: bold; margin-left: 0px !important; padding-left: 0px !important; } .serv-price-time { color: #808080; }