/* =================================================================== SHARED SUBPAGE STYLESHEET (formerly mastered-tailored.css) Used by all secondary pages: mastered, tailored, standarded, team, schools, contact. Owns: - body reset for those pages - .program-hero (shared hero used by every subpage) - .program-features / .feature-card grid - .program-impact / .impact-list - .program-cta banner - .program-intro layout + CTAs - .section-title used inside subpages When adding a NEW page-type rule, put it in the page-specific css (pages/team.css, pages/contact.css, etc), not here. When you need to change a shared subpage component, do it here. Design tokens come from css/tokens.css (linked first in ). =================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); body { font-family: 'Montserrat', Arial, sans-serif; margin: 0; color: var(--color-text); } .page-container.mastered-page { display: flex; flex-direction: column; min-height: 100vh; } /* .program-hero* moved to css/components.css — shared with every subpage. */ /* Overview band — the lead paragraph that used to live in the hero */ .program-intro { background: var(--color-white); padding: clamp(2.5rem, 5vw, 5rem) clamp(1.25rem, 6vw, 5rem); } .program-intro-inner { max-width: 900px; margin: 0 auto; } .program-intro-eyebrow { font-family: 'Montserrat', Arial, sans-serif; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-primary); margin: 0 0 1.5rem; } .program-intro-desc { font-family: 'Montserrat', Arial, sans-serif; font-size: clamp(1.1rem, 0.8rem + 0.8vw, 1.65rem); font-weight: 300; line-height: 1.55; color: var(--color-dark); margin: 0; max-width: 65ch; } .program-intro-desc b, .program-intro-desc strong { font-weight: 600; } /* Inline CTAs at the end of the overview band */ .program-intro-actions { margin-top: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; } /* Intro-section CTAs use .btn (primary) and .btn .btn--ghost (secondary). This class only overrides the font-size to a smaller, fluid value appropriate for the overview block. */ .program-intro-cta { font-size: clamp(0.95rem, 0.85rem + 0.25vw, 1.05rem); padding: 0.8em 1.6em; } @media (max-width: 500px) { .program-intro-cta { width: 100%; justify-content: center; } } /* Shared section title (no App.css on these pages) */ .section-title { text-align: center; margin: 0; padding: 0 1rem; font-family: var(--font-heading); color: var(--color-dark); font-weight: 400; font-size: clamp(1.8rem, 1.2rem + 1.6vw, 3.2rem); line-height: 1.1; } /* Mobile typography bump (≤600px): section headers → 3rem, body copy → ~16px (root font is ~11.2px on phones, so 1.45rem ≈ 16px). */ @media (max-width: 600px) { .section-title { font-size: 3rem; } .program-intro-desc, .impact-row, .feature-card-desc { font-size: 1.45rem; } } /* Features — card grid (auto-fit handles all breakpoints fluidly) */ .program-features { padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 6vw, 5rem); background: var(--color-bg); scroll-margin-top: 5rem; /* clear the sticky navbar on anchor jumps */ } .features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); max-width: 1200px; margin: clamp(2rem, 4vw, 3rem) auto 0; justify-content: center; } .features-grid.features-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 800px; } @media (max-width: 900px) { .features-grid, .features-grid.features-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .features-grid, .features-grid.features-grid-4 { grid-template-columns: 1fr; max-width: 26rem; } } .feature-card { background: var(--color-white); border-radius: var(--radius-card); padding: clamp(1.5rem, 2vw, 2rem) clamp(1.25rem, 2vw, 1.75rem); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 0.75rem; transition: transform 0.2s ease, box-shadow 0.2s ease; } .feature-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,0.12); } .feature-card-icon { font-size: clamp(2rem, 1.5rem + 1vw, 2.4rem); color: var(--color-contrast); line-height: 1; } .feature-card-title { font-family: 'Montserrat', Arial, sans-serif; font-size: clamp(1rem, 0.85rem + 0.4vw, 1.15rem); font-weight: 700; margin: 0; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-dark); } .feature-card-desc { font-size: clamp(0.9rem, 0.8rem + 0.25vw, 1rem); line-height: 1.6; margin: 0; color: var(--color-text); font-weight: 400; } /* Impact — typographic list with check icon */ .program-impact { padding: clamp(3rem, 6vw, 6rem) clamp(1.25rem, 6vw, 5rem); background: var(--gradient-section); } .impact-list { list-style: none; padding: 0; margin: 3rem auto 0; max-width: 900px; display: flex; flex-direction: column; } .impact-row { display: flex; align-items: center; gap: clamp(0.75rem, 1.5vw, 1.25rem); padding: clamp(1.25rem, 2vw, 1.75rem) 0; font-family: 'Montserrat', Arial, sans-serif; font-size: clamp(1.05rem, 0.85rem + 0.6vw, 1.4rem); font-weight: 400; color: var(--color-dark); line-height: 1.4; } .impact-row-icon { font-size: clamp(1.3rem, 1rem + 0.7vw, 1.75rem); color: var(--color-contrast); flex-shrink: 0; line-height: 1; } .impact-row + .impact-row { border-top: 1px solid rgba(var(--color-dark-rgb), 0.15); } .impact-row b, .impact-row strong { font-weight: 700; } /* Program CTA banner styles moved to css/components.css (.cta-banner / .btn) */ /* Featured testimonial on mastered/tailored — wraps a single .testimonial-frame (defined in css/components.css) in a band with the same gradient background as .program-impact. */ .program-review { background: var(--gradient-section); padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 6vw, 5rem); display: flex; align-items: center; justify-content: center; } .program-review .testimonial-frame { background: var(--color-white); max-width: 880px; } html, body { width: 100%; max-width: 100vw; overflow-x: hidden; box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } /* Fluid root font-size matching App.css */ html { font-size: clamp(11.2px, 6px + 0.65vw, 16px); } body { min-width: 320px; }