/* ========================================================================== pages.css — page-specific section styling ========================================================================== */ /* ========================================================================== Hero (homepage) ========================================================================== */ .hero { padding-block: var(--space-7) var(--space-8); position: relative; overflow: hidden; } .hero__grid { display: grid; gap: var(--space-6); align-items: center; } @media (min-width: 960px) { .hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); } } .hero__eyebrow-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; } .hero__owner-chip { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--soft-white); border: 1px solid var(--line-hairline); border-radius: 999px; padding: 0.4rem 0.9rem 0.4rem 0.4rem; box-shadow: var(--shadow-soft); } .hero__owner-chip img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; } .hero__owner-chip span { font-size: var(--step--1); font-weight: 600; color: var(--burgundy); } .hero h1 { margin-bottom: var(--space-4); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); } .hero__visual { position: relative; display: flex; align-items: center; justify-content: center; } .hero__portrait { position: relative; width: min(100%, 420px); aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); border: 1px solid var(--line-hairline); } .hero__portrait img { width: 100%; height: 100%; object-fit: cover; } .hero__wheel-accent { position: absolute; top: -8%; right: -12%; width: 55%; opacity: 0.5; pointer-events: none; z-index: -1; } /* ========================================================================== Scroll reveal (progressive enhancement — see animations.js) Content is fully visible with NO js at all: default state is opacity:1. JS adds .js-reveal-ready to once loaded, which THEN hides elements until they scroll into view. This ordering means a visitor with JS disabled, or on a slow connection where JS hasn't executed yet, always sees full content immediately — motion is a bonus, never a gate. ========================================================================== */ .reveal { opacity: 1; transform: none; } html.js-reveal-ready .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1); } html.js-reveal-ready .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html.js-reveal-ready .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========================================================================== Service cards grid (homepage + services overview) ========================================================================== */ .services-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; } @media (min-width: 720px) { .services-grid { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================== Curriculum ========================================================================== */ .curriculum-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line-hairline); } .curriculum-item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); padding-block: var(--space-5); border-bottom: 1px solid var(--line-hairline); } .curriculum-item__index { font-family: var(--font-display); font-size: var(--step-2); color: var(--copper); min-width: 2.4ch; } .curriculum-item h3 { margin-bottom: var(--space-1); } /* ========================================================================== Schedule grid ========================================================================== */ .schedule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--space-2); } .schedule-day { background: var(--bg-panel); border: 1px solid var(--line-hairline); border-radius: var(--radius-sm); padding: var(--space-3); text-align: center; } .schedule-day--active { border-color: var(--copper); background: rgba(200, 124, 65, 0.08); } .schedule-day__label { font-weight: 700; font-size: var(--step--1); color: var(--burgundy); display: block; margin-bottom: 0.25rem; } .schedule-day__time { font-size: 0.78rem; color: var(--text-muted); } /* ========================================================================== FAQ / Q&A accordion ========================================================================== */ .faq-list { border-top: 1px solid var(--line-hairline); } .faq-item { border-bottom: 1px solid var(--line-hairline); } .faq-item__question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); background: transparent; border: none; text-align: left; font-family: var(--font-display); font-size: var(--step-1); color: var(--burgundy); } .faq-item__icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--copper); position: relative; transition: transform var(--transition-base); } .faq-item__icon::before, .faq-item__icon::after { content: ""; position: absolute; background: var(--copper); } .faq-item__icon::before { top: 50%; left: 22%; right: 22%; height: 1.5px; } .faq-item__icon::after { left: 50%; top: 22%; bottom: 22%; width: 1.5px; transition: opacity var(--transition-base); } .faq-item[data-open="true"] .faq-item__icon::after { opacity: 0; } .faq-item__answer { overflow: hidden; max-height: 0; transition: max-height 320ms ease; } .faq-item[data-open="true"] .faq-item__answer { max-height: 600px; } .faq-item__answer-inner { padding-bottom: var(--space-4); color: var(--text-muted); max-width: 68ch; } /* ========================================================================== Process steps (readings — "what happens next") ========================================================================== */ .process-steps { display: grid; gap: var(--space-4); grid-template-columns: 1fr; counter-reset: step; } @media (min-width: 720px) { .process-steps { grid-template-columns: repeat(3, 1fr); } } .process-step { position: relative; padding-top: var(--space-6); } .process-step__number { position: absolute; top: 0; left: 0; font-family: var(--font-display); font-size: var(--step-3); color: var(--cream); -webkit-text-stroke: 1.5px var(--copper); line-height: 1; } /* ========================================================================== Blog ========================================================================== */ .blog-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; } @media (min-width: 720px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } } .blog-card { display: flex; flex-direction: column; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-panel); border: 1px solid var(--line-hairline); transition: transform var(--transition-base), box-shadow var(--transition-base); } .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .blog-card__image { aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream); } .blog-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; } .blog-card:hover .blog-card__image img { transform: scale(1.04); } .blog-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; } .blog-card__meta { display: flex; gap: var(--space-3); font-size: 0.8rem; color: var(--text-muted); } .blog-card__title { font-size: var(--step-1); } .blog-card__excerpt { color: var(--text-muted); font-size: var(--step--1); } /* Rich text body content, rendered from the dashboard's editor output. Scoped under .post-body so editor styling never leaks into the rest of the site. */ .post-body { font-size: var(--step-0); line-height: 1.75; color: var(--text-body); } .post-body > * + * { margin-top: var(--space-4); } .post-body h2 { font-size: var(--step-2); margin-top: var(--space-6); } .post-body h3 { font-size: var(--step-1); margin-top: var(--space-5); } .post-body a { color: var(--copper-dark); text-decoration: underline; text-underline-offset: 3px; } .post-body blockquote { border-left: 3px solid var(--copper); padding-left: var(--space-4); font-family: var(--font-display); font-size: var(--step-1); color: var(--burgundy); } .post-body img { border-radius: var(--radius-md); } .post-body ul, .post-body ol { padding-left: 1.4rem; } .post-body ul { list-style: disc; } .post-body ol { list-style: decimal; } .post-body code { background: var(--cream); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; } /* ========================================================================== Trust strip (payment methods, credential markers) ========================================================================== */ .trust-strip { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; justify-content: center; padding-block: var(--space-4); } .trust-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--step--1); color: var(--text-muted); font-weight: 500; } /* ========================================================================== 404 / maintenance ========================================================================== */ .status-page { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; padding-block: var(--space-8); }