/* ================================================================= PT Clinic Template — Inner Page Styles (inner-pages.css) Rehab CEOs Design System v1.1 Loaded by all inner pages alongside styles.css. Do NOT load on index.html (homepage uses app.js + styles.css only). ================================================================= */ /* ================================================================= [data-reveal] SCROLL ANIMATION SYSTEM IntersectionObserver adds .is-visible — CSS does the rest. ================================================================= */ /* Hidden-until-revealed state only applies once the 'js' class (set by an inline script in , before body paint) confirms scripts are actually running. With JS disabled, that class never lands, [data-reveal] never matches these rules, and content renders at its normal opacity/position immediately — no permanently-invisible sections. */ .js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } [data-reveal].is-visible { opacity: 1; transform: none; } .js [data-reveal="left"] { transform: translateX(-50px); } .js [data-reveal="right"] { transform: translateX(50px); } .js [data-reveal="scale"] { transform: scale(0.92); } [data-reveal="left"].is-visible, [data-reveal="right"].is-visible, [data-reveal="scale"].is-visible { transform: none; } /* stagger: section is transparent container; children reveal sequentially */ .js [data-reveal="stagger"] { opacity: 1; transform: none; transition: none; } .js [data-reveal="stagger"] > * { opacity: 0; transform: translateY(32px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } [data-reveal="stagger"].is-visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; } [data-reveal="stagger"].is-visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.10s; } [data-reveal="stagger"].is-visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.20s; } [data-reveal="stagger"].is-visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.30s; } [data-reveal="stagger"].is-visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.40s; } [data-reveal="stagger"].is-visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.50s; } /* Extended past the template's stock 6 items — no current grid on this build exceeds 6 direct children, but this is a landing-page/category grid template reused across pages with varying counts, and an item past :nth-child(6) with no rule here would stay permanently invisible (opacity:0 from the base rule above), not just unanimated. */ [data-reveal="stagger"].is-visible > *:nth-child(7) { opacity: 1; transform: none; transition-delay: 0.60s; } [data-reveal="stagger"].is-visible > *:nth-child(8) { opacity: 1; transform: none; transition-delay: 0.70s; } [data-reveal="stagger"].is-visible > *:nth-child(9) { opacity: 1; transform: none; transition-delay: 0.80s; } [data-reveal="stagger"].is-visible > *:nth-child(10) { opacity: 1; transform: none; transition-delay: 0.90s; } [data-reveal="stagger"].is-visible > *:nth-child(11) { opacity: 1; transform: none; transition-delay: 1.00s; } [data-reveal="stagger"].is-visible > *:nth-child(12) { opacity: 1; transform: none; transition-delay: 1.10s; } @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal="stagger"] > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ================================================================= NAV ACTIVE STATE */ .nav-link[aria-current="page"] { color: rgba(20,22,34,1) !important; } .nav-link[aria-current="page"]::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--color-accent); } /* ================================================================= INNER PAGE HERO */ .inner-hero { position: relative; min-height: 52vh; display: flex; align-items: flex-end; padding: calc(var(--header-h) + clamp(52px, 9vh, 100px)) var(--section-pad-h) clamp(56px, 8vh, 96px); overflow: hidden; background: var(--bg-secondary); } /* ambient gold bloom — lifts the hero above a plain dark panel */ .inner-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(52% 72% at 90% 15%, var(--color-accent-glow), transparent 68%); } .inner-hero-bg { position: absolute; inset: -20% 0; /* extra height above so parallax doesn't reveal edges */ z-index: 0; will-change: transform; } /* Team photo: standing therapists' heads sit close to the top of the source frame. Same total bleed as the base rule (parallax headroom unchanged), just weighted toward the bottom so the crop favors keeping the standing group's faces over the seated pair. */ .inner-hero-bg-team { inset: -6% 0 -34% 0; } .inner-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; } .inner-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.60) 45%, rgba(10,10,10,0.92) 100%); } .inner-hero-content { position: relative; z-index: 2; } .page-breadcrumb { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 1.4rem; font-family: var(--font-body); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .page-breadcrumb a { display: inline-block; color: var(--text-muted); padding: 0.85rem 0.15rem; margin: -0.85rem -0.15rem; transition: color var(--duration-fast); } .page-breadcrumb a:hover { color: var(--color-accent); } .page-breadcrumb .sep { opacity: 0.4; } .inner-hero .section-label { margin-bottom: 1rem; } .inner-hero h1 { font-family: var(--font-display); font-size: clamp(2.8rem, 5.5vw, 5.2rem); font-weight: 700; line-height: 0.97; letter-spacing: -0.03em; color: var(--text-primary); max-width: 16ch; margin-top: 0.4rem; overflow-wrap: break-word; word-break: break-word; } /* Kinetic Identity word-resolve spans, added by initKineticType() in page.js */ .inner-hero h1 .k-word { display: inline-block; } .inner-hero-sub { margin-top: 1.4rem; max-width: 52ch; color: var(--text-secondary); font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.7; font-weight: 300; } /* ================================================================= SHARED INNER PAGE BOOKING FORM */ .inner-form-section { position: relative; overflow: hidden; } .inner-form-section::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(52% 62% at 80% 76%, var(--color-accent-glow), transparent 70%); } .inner-form-inner { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; } .inner-form-text .section-label { color: var(--color-accent); } .inner-form-text .t-h2 { margin-bottom: 1.2rem; } .inner-form-text .t-body { color: var(--text-secondary); max-width: 44ch; margin-top: 1rem; } .inner-form-phone { margin-top: 2.2rem; } .inner-form-phone .t-label { color: var(--text-muted); display: block; margin-bottom: 0.5rem; } .inner-form-phone a { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; color: var(--text-primary); transition: color var(--duration-fast); } .inner-form-phone a:hover { color: var(--color-accent); } .inner-form-embed { background: var(--bg-tertiary); border: 1px solid rgba(240,237,232,0.1); border-radius: 14px; padding: 0.5rem; } .inner-form-embed iframe { border-radius: 10px; } /* ================================================================= ABOUT — ORIGIN STORY (light) */ .about-origin.section-light::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(58% 72% at 96% 6%, rgba(122,92,20,0.32), transparent 70%), radial-gradient(44% 54% at 2% 96%, rgba(26,22,12,0.16), transparent 68%); } .about-story-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2.5rem, 6vw, 6.5rem); align-items: center; } .about-story-text .section-head { margin-bottom: clamp(1.8rem, 3vw, 2.8rem); } .about-story-text .t-body { color: var(--text-body-light); } .about-story-text .t-body + .t-body { margin-top: 1.3rem; } .about-story-pull { font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 400; line-height: 1.22; letter-spacing: -0.01em; color: var(--color-accent-dim-text); border-left: 2px solid var(--color-accent-dim-text); padding-left: 1.4rem; margin-bottom: 2rem; } .about-story-photo { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 3/4; box-shadow: 0 32px 72px rgba(20,28,44,0.22); } .about-story-photo img { width: 100%; height: 100%; object-fit: cover; } .about-story-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light; background: linear-gradient(155deg, var(--color-accent-dim) 0%, transparent 52%, var(--color-accent) 100%); opacity: 0.36; } /* ================================================================= ABOUT — PHILOSOPHY (dark) */ .about-philosophy { background: linear-gradient(180deg, #0D0F18, #090B10); text-align: center; } .about-philosophy::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(62% 78% at 50% 105%, var(--color-accent-glow), transparent 70%); } .about-philosophy-lede { font-family: var(--font-display); font-style: italic; font-size: clamp(1.9rem, 4.2vw, 4rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; color: var(--text-primary); max-width: 820px; margin: 0 auto clamp(1.4rem, 2vw, 2rem); } .about-philosophy-lede em { color: var(--color-accent); font-style: inherit; } .about-philosophy-sub { text-align: center; max-width: 58ch; margin: 0 auto clamp(3rem, 5vw, 5.5rem); color: var(--text-secondary); } .about-philosophy .section-head { text-align: center; max-width: none; margin-bottom: clamp(2rem, 3vw, 3rem); } .about-philosophy .section-head .t-h2 { color: var(--text-primary); } .about-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 2.5vw, 2.2rem); text-align: left; } /* Some pages hold 4 pillars instead of 3: keep all four on one row rather than wrapping the last one onto a lonely line of its own. */ .about-pillars:has(.about-pillar:nth-child(4)) { grid-template-columns: repeat(4, 1fr); } .about-pillar { padding: clamp(1.8rem, 2.6vw, 2.6rem); border-radius: 14px; border: 1px solid rgba(240,237,232,0.1); background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); transition: border-color var(--duration-base), background var(--duration-base), transform var(--duration-base) var(--ease-smooth); } .about-pillar:hover { border-color: rgba(216,172,63,0.35); background: rgba(216,172,63,0.03); transform: translateY(-4px); } .about-pillar-icon { margin-bottom: 1.4rem; } .about-pillar-icon svg { width: 40px; height: 40px; fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .about-pillar h3 { margin-bottom: 0.7rem; color: var(--text-primary); } .about-pillar .t-body { color: var(--text-secondary); font-size: 0.97rem; } /* ================================================================= ABOUT — TEAM (reuses homepage .team-grid styles) */ /* No new CSS needed — .team-grid, .team-card, .team-photo, .team-name, .team-cred are all in styles.css and apply here automatically. */ /* Expanded 6-up grid: 3-col on desktop, 2-col on tablet, 1-col on phone */ .about-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); } /* This client has 7 providers, not a multiple of 3 — repeat(3,1fr) leaves the last row with 1 card pinned left against 2 phantom empty tracks. grid-wrap swaps to a flex-wrap layout so an incomplete last row centers instead. */ .about-team-grid.grid-wrap { display: flex; flex-wrap: wrap; justify-content: center; } .about-team-grid.grid-wrap .team-card { flex: 1 1 300px; max-width: 340px; } /* ================================================================= ABOUT — FACILITY PHOTOS (dark) */ .about-facility { background: linear-gradient(180deg, #090C13, #06080E); } .about-facility::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(52% 60% at 12% 58%, var(--color-accent-2-glow), transparent 68%); } .about-photos-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; grid-template-rows: auto auto; gap: 16px; } .about-photo-item { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 44px rgba(0,0,0,0.45); } .about-photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .about-photo-item:first-child { grid-row: span 2; } .about-photo-item:first-child img { height: 100%; aspect-ratio: auto; } .about-photo-item:not(:first-child) img { aspect-ratio: 4/3; } .about-photo-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem 1.2rem 0.9rem; background: linear-gradient(to top, rgba(0,0,0,0.72), transparent); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(240,237,232,0.7); } /* ================================================================= ABOUT — TRUST SIGNALS (light) */ .about-trust.section-light::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(54% 66% at 5% 5%, rgba(39,63,99,0.28), transparent 68%), radial-gradient(46% 56% at 95% 92%, rgba(122,92,20,0.24), transparent 68%); } .about-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2vw, 1.8rem); margin-top: clamp(2.4rem, 4vw, 4rem); } .trust-item { display: flex; align-items: flex-start; gap: 1.1rem; padding: 1.5rem 1.6rem; border-radius: 12px; background: rgba(255,255,255,0.52); border: 1px solid rgba(20,28,44,0.11); box-shadow: 0 8px 24px rgba(20,28,44,0.06); transition: border-color var(--duration-base), background var(--duration-base), transform var(--duration-base) var(--ease-smooth), box-shadow var(--duration-base); } .trust-item:hover { border-color: rgba(168,128,31,0.45); background: rgba(255,255,255,0.85); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(39,63,99,0.14); } .trust-icon { flex: none; width: 38px; height: 38px; } .trust-icon svg { width: 100%; height: 100%; fill: none; stroke: var(--color-accent-dim-text); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .trust-label { font-weight: 600; font-size: 0.98rem; color: var(--text-on-light); margin-bottom: 0.35rem; font-family: var(--font-body); } .trust-body { font-size: 0.88rem; color: var(--text-body-light); line-height: 1.55; } /* ================================================================= ABOUT — BOOKING FORM (dark) */ .about-booking { background: linear-gradient(180deg, #0D1119, #080B12); position: relative; overflow: hidden; } .about-booking::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(50% 58% at 80% 78%, var(--color-accent-glow), transparent 70%); } /* ================================================================= SERVICES LANDING */ .services-overview { background: linear-gradient(180deg, #080B12, #0D0F18); position: relative; } .services-overview::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(55% 65% at 92% 8%, var(--color-accent-glow), transparent 66%), radial-gradient(42% 54% at 4% 94%, var(--color-accent-2-glow), transparent 66%); } .services-grid-wrap { position: relative; z-index: 1; } /* Featured service (Physical Therapy) — full-width flagship card */ .service-card-featured { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(2.2rem, 4vw, 3.6rem) clamp(2rem, 4vw, 3.2rem); border-radius: 16px; background: linear-gradient(135deg, rgba(216,172,63,0.07) 0%, rgba(255,255,255,0.03) 100%); border: 1px solid rgba(216,172,63,0.2); text-decoration: none; color: inherit; margin-bottom: clamp(1.4rem, 2.5vw, 2rem); transition: border-color var(--duration-base), background var(--duration-base), transform var(--duration-base) var(--ease-smooth), box-shadow var(--duration-base); box-shadow: 0 2px 40px rgba(216,172,63,0.04); } .service-card-featured:hover { border-color: rgba(216,172,63,0.45); background: linear-gradient(135deg, rgba(216,172,63,0.10) 0%, rgba(255,255,255,0.04) 100%); transform: translateY(-3px); box-shadow: 0 24px 60px rgba(216,172,63,0.1); } .service-card-featured-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.9rem; display: block; } .service-card-featured-icon { width: 52px; height: 52px; margin-bottom: 1.4rem; background: rgba(216,172,63,0.08); border-radius: 12px; display: flex; align-items: center; justify-content: center; } .service-card-featured-icon svg { width: 28px; height: 28px; fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .service-card-featured h2 { font-family: var(--font-display); font-size: clamp(1.9rem, 3.5vw, 3rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: 1rem; } .service-card-featured-body { color: var(--text-secondary); font-size: clamp(0.97rem, 1.1vw, 1.06rem); line-height: 1.7; max-width: 46ch; } .service-card-featured-arrow { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.8rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; color: var(--color-accent); transition: gap var(--duration-fast); } .service-card-featured:hover .service-card-featured-arrow { gap: 1rem; } .service-card-featured-meta { display: flex; flex-direction: column; gap: 1rem; } .service-feature-pill { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.2rem; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(240,237,232,0.08); } .service-feature-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex: none; } .service-feature-pill-text { font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); } /* Regular service cards — 3-column grid */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.8vw, 1.5rem); } .service-card { display: block; text-decoration: none; color: inherit; padding: clamp(1.6rem, 2.5vw, 2.2rem); border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(240,237,232,0.09); transition: border-color var(--duration-base), background var(--duration-base), transform var(--duration-base) var(--ease-smooth), box-shadow var(--duration-base); } .service-card:hover { border-color: rgba(216,172,63,0.3); background: rgba(216,172,63,0.04); transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,0.25); } .service-card-icon { width: 44px; height: 44px; margin-bottom: 1.3rem; background: rgba(216,172,63,0.07); border-radius: 10px; display: flex; align-items: center; justify-content: center; } .service-card-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .service-card h3 { font-family: var(--font-body); font-weight: 600; font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--text-primary); margin-bottom: 0.55rem; line-height: 1.25; } .service-card-desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; } .service-card-link { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.2rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); transition: gap var(--duration-fast); } .service-card:hover .service-card-link { gap: 0.75rem; } /* ================================================================= SERVICE CHILD PAGES */ /* Section 1 — What Is [Service]: dark split with image */ .service-intro { background: linear-gradient(180deg, #0D0F18, #080B12); position: relative; overflow: hidden; } .service-intro::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(55% 68% at 96% 10%, var(--color-accent-glow), transparent 66%); } .service-intro > .section-shell { position: relative; z-index: 1; } .service-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 7rem); align-items: center; } .service-intro-text .section-label { color: var(--color-accent); } .service-intro-text .t-h2 { margin-bottom: 1.2rem; } .service-intro-text .t-body { color: var(--text-secondary); } .service-intro-text .t-body + .t-body { margin-top: 1rem; } .service-key-facts { margin-top: clamp(1.8rem, 3vw, 2.6rem); display: flex; flex-direction: column; gap: 0.8rem; } .service-key-fact { display: flex; align-items: flex-start; gap: 0.9rem; font-size: 0.93rem; color: var(--text-secondary); line-height: 1.55; } .service-key-fact-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex: none; margin-top: 0.45em; } .service-intro-image { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 32px 72px rgba(0,0,0,0.45); } .service-intro-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .service-intro-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(216,172,63,0.08) 0%, transparent 60%); } /* Section 2 — Who It Helps: light with 3-col condition list */ .service-who { position: relative; overflow: hidden; } .service-who.section-light::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(52% 64% at 97% 6%, rgba(122,92,20,0.28), transparent 66%), radial-gradient(42% 52% at 3% 96%, rgba(39,63,99,0.18), transparent 66%); } .service-who > .section-shell { position: relative; z-index: 1; } .service-who .section-head .t-h2 { color: #141B2B; } .service-who .section-head .t-body { color: var(--text-body-light); } .service-who .section-head .section-label { color: var(--color-accent-dim-text); } .who-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.8rem, 1.5vw, 1.2rem); margin-top: clamp(2rem, 3.5vw, 3.2rem); } /* Card, not a flex row: icon/title/description stack so every title sits on its own line (or wraps to two within the fixed column width) and every description starts flush with its own card instead of chasing the previous title's width. */ .who-item { padding: 1.1rem 1.3rem; border-radius: 10px; background: rgba(255,255,255,0.6); border: 1px solid rgba(20,28,44,0.09); transition: border-color var(--duration-base), background var(--duration-base); } .who-item:hover { border-color: rgba(168,128,31,0.35); background: rgba(255,255,255,0.88); } .who-item-icon { width: 32px; height: 32px; margin-bottom: 0.7rem; background: rgba(168,128,31,0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; } .who-item-icon svg { width: 17px; height: 17px; fill: none; stroke: var(--color-accent-dim-text); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .who-item h3 { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; color: var(--text-on-light); margin-bottom: 0.3rem; line-height: 1.3; } .who-item p { font-size: 0.86rem; color: var(--text-body-light); line-height: 1.55; } /* Section 3 — What to Expect: dark numbered steps */ .service-process { background: linear-gradient(180deg, #08090F, #0B0D18); position: relative; overflow: hidden; } .service-process::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(48% 60% at 8% 92%, var(--color-accent-glow), transparent 66%); } .service-process > .section-shell { position: relative; z-index: 1; } .process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(2.4rem, 4vw, 4rem); } /* Some services run 4 or 5 steps instead of 3: keep every numbered step on one row rather than wrapping the last one onto a lonely line of its own. */ .process-steps:has(.process-step:nth-child(4)) { grid-template-columns: repeat(4, 1fr); } .process-steps:has(.process-step:nth-child(5)) { grid-template-columns: repeat(5, 1fr); } .process-step { position: relative; padding-top: 1rem; } .process-step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(240,237,232,0.1); } .process-num { font-family: var(--font-display); font-size: clamp(2.8rem, 5vw, 4.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--color-accent); opacity: 0.22; margin-bottom: 1rem; display: block; } .process-step h3 { font-family: var(--font-body); font-weight: 600; font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--text-primary); margin-bottom: 0.6rem; line-height: 1.25; } .process-step .t-body { color: var(--text-secondary); font-size: 0.92rem; } /* Process steps rendered inside a light section (condition pages) need dark-on-light colors */ .section-light .process-step::before { background: rgba(26,26,26,0.12); } .section-light .process-num { color: var(--color-accent-dim-text); opacity: 0.32; } .section-light .process-step h3 { color: var(--text-on-light); } .section-light .process-step .t-body { color: var(--text-body-light); } /* Section 4 — Outcomes: light with benefit grid */ .service-outcomes { position: relative; overflow: hidden; } .service-outcomes.section-light::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(56% 68% at 94% 94%, rgba(122,92,20,0.24), transparent 68%); } .service-outcomes > .section-shell { position: relative; z-index: 1; } .service-outcomes .section-head .t-h2 { color: #141B2B; } .service-outcomes .section-head .t-body { color: var(--text-body-light); } .service-outcomes .section-head .section-label { color: var(--color-accent-dim-text); } .outcomes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.6rem); margin-top: clamp(2rem, 3.5vw, 3.2rem); } .outcome-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.3rem 1.5rem; border-radius: 12px; background: rgba(255,255,255,0.6); border: 1px solid rgba(20,28,44,0.09); } .outcome-icon { width: 36px; height: 36px; flex: none; border-radius: 8px; background: rgba(168,128,31,0.1); display: flex; align-items: center; justify-content: center; } .outcome-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--color-accent-dim-text); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .outcome-item h3 { font-family: var(--font-body); font-weight: 600; font-size: 0.97rem; color: var(--text-on-light); margin-bottom: 0.3rem; } .outcome-item p { font-size: 0.86rem; color: var(--text-body-light); line-height: 1.55; } /* Section 5 — Testimonial: dark editorial */ .service-testimonial { background: linear-gradient(180deg, #14161C, #0D1119); position: relative; overflow: hidden; } .service-testimonial::before { content: "\201C"; position: absolute; left: -1%; top: -8%; z-index: 0; font-family: var(--font-display); font-weight: 700; line-height: 1; font-size: clamp(14rem, 28vw, 34rem); color: rgba(216,172,63,0.04); pointer-events: none; } .service-testimonial > .section-shell { position: relative; z-index: 1; } .service-testimonial .section-label { color: var(--color-accent); } .service-quote-wrap { max-width: 900px; } .service-quote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.4rem, 2.8vw, 2.4rem); font-weight: 400; line-height: 1.28; letter-spacing: -0.01em; color: var(--text-primary); margin-top: 1.4rem; } .service-quote-cite { display: block; margin-top: 1.6rem; font-style: normal; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); } .service-quote-cite span { color: var(--text-muted); } /* Section 6 — Related Services: dark with 3 link cards */ .service-related { background: linear-gradient(180deg, #0A0B10, #070810); position: relative; overflow: hidden; } .service-related::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(50% 62% at 50% 110%, var(--color-accent-glow), transparent 68%); } .service-related > .section-shell { position: relative; z-index: 1; } /* Light variant — breaks the consecutive-dark run after testimonial */ .service-related.section-light { background: linear-gradient(180deg, #F6F4F0, #ECE8E0); } .service-related.section-light::before { background: radial-gradient(52% 64% at 5% 5%, rgba(39,63,99,0.2), transparent 66%), radial-gradient(44% 54% at 96% 96%, rgba(122,92,20,0.16), transparent 66%); } .service-related.section-light .section-head .t-h2 { color: #141B2B; } .service-related.section-light .section-head .section-label { color: var(--color-accent-dim-text); } .service-related.section-light .related-card { background: rgba(255,255,255,0.62); border-color: rgba(20,28,44,0.1); } .service-related.section-light .related-card:hover { border-color: rgba(168,128,31,0.4); background: rgba(255,255,255,0.9); } .service-related.section-light .related-card h3 { color: var(--text-on-light); } .service-related.section-light .related-card p { color: var(--text-body-light); } .service-related.section-light .related-card-icon { background: rgba(168,128,31,0.1); } .service-related.section-light .related-card-icon svg { stroke: var(--color-accent-dim-text); } .service-related.section-light .related-card-arrow { color: var(--color-accent-dim-text); } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.8rem); margin-top: clamp(2.2rem, 3.5vw, 3.5rem); } /* Landing-page category grids (services/index.html, what-we-treat/index.html) reuse .related-grid but hold a variable item count per group, not always a multiple of 3 — a fixed repeat(3,1fr) leaves an incomplete last row left-aligned with phantom empty tracks. This modifier keeps the same card size/gap but wraps and centers instead. */ .related-grid.grid-wrap { display: flex; flex-wrap: wrap; justify-content: center; } .related-grid.grid-wrap .related-card { flex: 1 1 340px; max-width: 380px; } .related-card { display: block; text-decoration: none; color: inherit; padding: clamp(1.4rem, 2.2vw, 2rem); border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(240,237,232,0.09); transition: border-color var(--duration-base), background var(--duration-base), transform var(--duration-base) var(--ease-smooth); } .related-card:hover { border-color: rgba(216,172,63,0.28); background: rgba(216,172,63,0.03); transform: translateY(-3px); } .related-card-icon { width: 40px; height: 40px; margin-bottom: 1.1rem; background: rgba(216,172,63,0.07); border-radius: 9px; display: flex; align-items: center; justify-content: center; } .related-card-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .related-card h3 { font-family: var(--font-body); font-weight: 600; font-size: clamp(0.97rem, 1.2vw, 1.06rem); color: var(--text-primary); margin-bottom: 0.4rem; } .related-card p { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.55; } .related-card-arrow { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); transition: gap var(--duration-fast); } .related-card:hover .related-card-arrow { gap: 0.7rem; } /* Responsive for service child page sections */ @media (max-width: 1024px) { .service-intro-grid { grid-template-columns: 1fr; } .service-intro-image { aspect-ratio: 16/9; max-height: 380px; } .process-steps, .process-steps:has(.process-step:nth-child(4)), .process-steps:has(.process-step:nth-child(5)) { grid-template-columns: 1fr; gap: 1.8rem; } .outcomes-grid { grid-template-columns: 1fr; } .related-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .related-grid { grid-template-columns: 1fr; } } /* ================================================================= WHAT WE TREAT LANDING */ .conditions-section { background: linear-gradient(180deg, #F6F4F0, #ECE8E0); position: relative; overflow: hidden; color: var(--text-on-light); } .conditions-section::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(56% 64% at 3% 8%, rgba(39,63,99,0.22), transparent 66%), radial-gradient(44% 52% at 97% 96%, rgba(122,92,20,0.18), transparent 66%); } .conditions-section > .section-shell { position: relative; z-index: 1; } /* Force readable text on the cream background */ .conditions-section .t-h2 { color: #141B2B; } .conditions-section .t-h3 { color: var(--text-on-light); } .conditions-section .t-body { color: var(--text-body-light); } .conditions-section .section-label { color: var(--color-accent-dim-text); } .condition-group { margin-bottom: clamp(3rem, 5vw, 5.5rem); } .condition-group:last-child { margin-bottom: 0; } .condition-group-header { display: flex; align-items: center; gap: 1.2rem; margin-bottom: clamp(1.4rem, 2.5vw, 2rem); padding-bottom: 1.1rem; border-bottom: 1px solid rgba(20,28,44,0.12); } .condition-group-icon { width: 40px; height: 40px; flex: none; background: rgba(168,128,31,0.12); border-radius: 10px; display: flex; align-items: center; justify-content: center; } .condition-group-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--color-accent-dim-text); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .condition-group-label { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent-dim-text); } .condition-group-count { margin-left: auto; font-size: 0.75rem; font-weight: 500; color: rgba(20,28,44,0.65); /* A11Y FIX: was 0.4 alpha, ~2.5:1 on this bg (needs 4.5:1) */ letter-spacing: 0.04em; } .condition-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.8vw, 1.5rem); } .condition-card { display: block; text-decoration: none; color: inherit; padding: clamp(1.4rem, 2vw, 1.9rem); border-radius: 14px; background: rgba(255,255,255,0.65); border: 1px solid rgba(20,28,44,0.1); box-shadow: 0 6px 20px rgba(20,28,44,0.06); transition: border-color var(--duration-base), background var(--duration-base), transform var(--duration-base) var(--ease-smooth), box-shadow var(--duration-base); } .condition-card:hover { border-color: rgba(168,128,31,0.4); background: rgba(255,255,255,0.92); transform: translateY(-3px); box-shadow: 0 18px 44px rgba(39,63,99,0.12); } .condition-card-icon { width: 38px; height: 38px; margin-bottom: 1.1rem; } .condition-card-icon svg { width: 100%; height: 100%; fill: none; stroke: var(--color-accent-dim-text); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .condition-card h3 { font-family: var(--font-body); font-weight: 600; font-size: clamp(0.97rem, 1.2vw, 1.08rem); color: var(--text-on-light); margin-bottom: 0.5rem; line-height: 1.25; } .condition-card-desc { font-size: 0.87rem; color: var(--text-body-light); line-height: 1.6; } .condition-card-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.1rem; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-dim-text); transition: gap var(--duration-fast), color var(--duration-fast); } .condition-card:hover .condition-card-link { gap: 0.7rem; color: var(--color-accent-dim-text); } /* ================================================================= SERVICES BOOKING */ .services-booking { background: linear-gradient(180deg, #0D1119, #080B12); position: relative; } .services-booking::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(50% 58% at 80% 78%, var(--color-accent-glow), transparent 70%); } /* ================================================================= CONDITION CHILD PAGES */ /* Section 1: Understanding [Condition] — dark, empathetic split */ .condition-understanding { background: linear-gradient(180deg, #0D0F18, #080B12); position: relative; overflow: hidden; } .condition-understanding::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(55% 68% at 6% 94%, var(--color-accent-glow), transparent 66%); } .condition-understanding > .section-shell { position: relative; z-index: 1; } .condition-understanding-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 7rem); align-items: center; } .condition-understanding-text .section-label { color: var(--color-accent); } .condition-understanding-text .t-h2 { margin-bottom: 1.2rem; } .condition-understanding-text .t-body { color: var(--text-secondary); } .condition-understanding-text .t-body + .t-body { margin-top: 1rem; } .condition-stat-row { display: flex; gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(1.8rem, 3vw, 2.6rem); flex-wrap: wrap; } .condition-stat { display: flex; flex-direction: column; } .condition-stat-num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1; letter-spacing: -0.03em; color: var(--color-accent); } .condition-stat-label { font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); margin-top: 0.3rem; max-width: 14ch; line-height: 1.4; } .condition-understanding-image { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 32px 72px rgba(0,0,0,0.45); } .condition-understanding-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .condition-understanding-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(216,172,63,0.06) 0%, transparent 55%); } /* Section 2: Symptoms — light */ .condition-symptoms { position: relative; overflow: hidden; } .condition-symptoms.section-light::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(52% 64% at 5% 7%, rgba(39,63,99,0.22), transparent 66%), radial-gradient(44% 54% at 96% 94%, rgba(122,92,20,0.18), transparent 66%); } .condition-symptoms > .section-shell { position: relative; z-index: 1; } .condition-symptoms .section-head .t-h2 { color: #141B2B; } .condition-symptoms .section-head .t-body { color: var(--text-body-light); } .condition-symptoms .section-head .section-label { color: var(--color-accent-dim-text); } .symptoms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.8vw, 1.5rem); margin-top: clamp(2rem, 3.5vw, 3.2rem); } /* Some pages hold 4 symptom items instead of 3 or 6: keep all four on one row rather than wrapping the last one onto a lonely line of its own. */ .symptoms-grid:has(.symptom-item:nth-child(4)):not(:has(.symptom-item:nth-child(5))) { grid-template-columns: repeat(4, 1fr); } .symptom-item { padding: clamp(1.2rem, 1.8vw, 1.6rem); border-radius: 12px; background: rgba(255,255,255,0.62); border: 1px solid rgba(20,28,44,0.09); transition: border-color var(--duration-base), background var(--duration-base); } .symptom-item:hover { border-color: rgba(168,128,31,0.35); background: rgba(255,255,255,0.9); } .symptom-item-icon { width: 36px; height: 36px; margin-bottom: 0.9rem; background: rgba(168,128,31,0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; } .symptom-item-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--color-accent-dim-text); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .symptom-item h3 { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; color: var(--text-on-light); margin-bottom: 0.3rem; line-height: 1.25; } .symptom-item p { font-size: 0.84rem; color: var(--text-body-light); line-height: 1.55; } /* Section 3: How We Treat It — dark */ .condition-treatment { background: linear-gradient(180deg, #090B10, #0C0E16); position: relative; overflow: hidden; } .condition-treatment::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(50% 62% at 96% 8%, var(--color-accent-glow), transparent 66%); } .condition-treatment > .section-shell { position: relative; z-index: 1; } .treatment-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 7rem); align-items: start; } .treatment-text .section-label { color: var(--color-accent); } .treatment-text .t-h2 { margin-bottom: 1.2rem; } .treatment-text .t-body { color: var(--text-secondary); margin-top: 1rem; } .treatment-tools-list { display: flex; flex-direction: column; gap: 0.8rem; margin-top: clamp(1.8rem, 3vw, 2.6rem); } .treatment-tool { display: flex; align-items: center; gap: 1rem; padding: 0.95rem 1.2rem; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(240,237,232,0.08); text-decoration: none; color: inherit; transition: border-color var(--duration-base), background var(--duration-base); } .treatment-tool:hover { border-color: rgba(216,172,63,0.28); background: rgba(216,172,63,0.04); } .treatment-tool-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); flex: none; opacity: 0.65; } .treatment-tool-name { font-weight: 500; font-size: 0.93rem; color: var(--text-primary); flex: 1; } .treatment-tool-arrow { font-size: 0.78rem; color: var(--color-accent); opacity: 0; transition: opacity var(--duration-fast); } .treatment-tool:hover .treatment-tool-arrow { opacity: 1; } .treatment-note { margin-top: 1.4rem; padding: 1.1rem 1.3rem; border-radius: 10px; background: rgba(216,172,63,0.05); border: 1px solid rgba(216,172,63,0.14); font-size: 0.87rem; color: var(--text-secondary); line-height: 1.6; } .treatment-note strong { color: var(--text-primary); font-weight: 500; } /* Responsive for condition child pages */ @media (max-width: 1024px) { .condition-understanding-grid { grid-template-columns: 1fr; } .condition-understanding-image { aspect-ratio: 16/9; max-height: 380px; } /* Staff bio headshots (square source photos, head framed near the top) lose the top of the head to this shorter mobile crop under the default center object-position. */ .condition-understanding-image img[src*="/team/"] { object-position: center 15%; } .treatment-split { grid-template-columns: 1fr; } .symptoms-grid, .symptoms-grid:has(.symptom-item:nth-child(4)):not(:has(.symptom-item:nth-child(5))) { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .symptoms-grid, .symptoms-grid:has(.symptom-item:nth-child(4)):not(:has(.symptom-item:nth-child(5))) { grid-template-columns: 1fr; } } /* ================================================================= CONTACT PAGE */ .contact-section { background: linear-gradient(180deg, #0B0D14, #08090F); position: relative; overflow: hidden; padding: var(--section-pad-v) 0; } .contact-section::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(52% 64% at 6% 8%, var(--color-accent-glow), transparent 66%), radial-gradient(40% 52% at 96% 96%, var(--color-accent-2-glow), transparent 66%); } .contact-section > .section-shell { position: relative; z-index: 1; } .contact-split { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(3rem, 6vw, 7rem); align-items: start; } /* Left: GHL form embed */ .contact-form-col .inner-form-embed { margin-top: 0; } .contact-form-head { margin-bottom: clamp(1.8rem, 3vw, 2.8rem); } .contact-form-head .section-label { color: var(--color-accent); } .contact-form-head .t-h2 { margin-top: 0.6rem; margin-bottom: 0; } .contact-friction-note { margin-top: 1rem; font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; } .contact-friction-note strong { color: var(--text-primary); font-weight: 500; } /* Right: Clinic info */ .contact-info-col { padding-top: 0.4rem; } .contact-info-block { margin-bottom: clamp(2rem, 3.5vw, 3rem); } .contact-info-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 0.9rem; padding-bottom: 0.7rem; border-bottom: 1px solid rgba(240,237,232,0.08); } .contact-info-item { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; } .contact-info-item:last-child { margin-bottom: 0; } .contact-info-icon { width: 36px; height: 36px; flex: none; background: rgba(216,172,63,0.07); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-top: 0.1rem; } .contact-info-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .contact-info-item-text { flex: 1; } .contact-info-item-title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.25rem; display: block; } .contact-info-item a, .contact-info-item address { font-style: normal; color: var(--text-primary); font-size: 0.97rem; line-height: 1.55; transition: color var(--duration-fast); } .contact-info-item a:hover { color: var(--color-accent); } /* Hours grid */ .contact-hours-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; } .contact-hours-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.88rem; padding: 0.45rem 0; border-bottom: 1px solid rgba(240,237,232,0.06); } .contact-hours-row:last-child { border-bottom: none; } .contact-hours-day { color: var(--text-secondary); font-weight: 400; } .contact-hours-time { color: var(--text-primary); font-weight: 500; text-align: right; } .contact-hours-time.is-closed { color: var(--text-muted); } /* Map embed */ .contact-map { border-radius: 14px; overflow: hidden; border: 1px solid rgba(240,237,232,0.1); height: 240px; margin-top: clamp(1.8rem, 3vw, 2.6rem); background: rgba(255,255,255,0.04); } .contact-map iframe { width: 100%; height: 100%; border: none; display: block; filter: saturate(0.3) brightness(0.75); } /* ================================================================= RESPONSIVE */ @media (max-width: 1024px) { .inner-hero { min-height: 46vh; } .about-story-grid { grid-template-columns: 1fr; gap: 2.5rem; } .about-story-photo { aspect-ratio: 3/2; max-height: 440px; order: -1; } .about-pillars, .about-pillars:has(.about-pillar:nth-child(4)) { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } .about-team-grid { grid-template-columns: repeat(2, 1fr); } .about-photos-grid { grid-template-columns: 1fr 1fr; } .about-photo-item:first-child { grid-row: span 1; } .about-photo-item:first-child img { aspect-ratio: 4/3; height: auto; } .inner-form-inner { grid-template-columns: 1fr; } .about-trust-grid { grid-template-columns: repeat(2, 1fr); } .service-card-featured { grid-template-columns: 1fr; } .services-grid { grid-template-columns: repeat(2, 1fr); } .condition-grid { grid-template-columns: repeat(2, 1fr); } .contact-split { grid-template-columns: 1fr; } .contact-info-col { padding-top: 0; } } @media (max-width: 767px) { /* About pillars: 2-col tablet step before collapsing at 640px */ .about-pillars, .about-pillars:has(.about-pillar:nth-child(4)) { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .inner-hero { min-height: 56vh; align-items: center; padding-top: calc(var(--header-h) + 2rem); } .inner-hero h1 { font-size: clamp(2.1rem, 9vw, 3.2rem); } .about-team-grid { grid-template-columns: 1fr; } .about-photos-grid { grid-template-columns: 1fr; } .about-trust-grid { grid-template-columns: 1fr; } .about-pillars, .about-pillars:has(.about-pillar:nth-child(4)) { grid-template-columns: 1fr; } .about-philosophy-lede { font-size: clamp(1.6rem, 7vw, 2.4rem); } .services-grid { grid-template-columns: 1fr; } .condition-grid { grid-template-columns: 1fr; } /* Contact hours: single column on small phones */ .contact-hours-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { /* who-grid: single column on small phones */ .who-grid { grid-template-columns: 1fr; } } /* ================================================================= CLIENT BLOCK — Greiner Physical Therapy One addition: a light-section variant of the pillar grid. .about-pillar hard-codes dark-section text, border and fill values (--text-primary on a translucent white card), so reusing it inside a .section-light wrapper produced near-white text on cream: the exact recurrence documented as bug #2 and #7 in ONBOARDING section 6. The remedy is the one that document prescribes, an explicitly scoped light override, rather than restructuring the component. Verified by computed style, not by eye. ================================================================= */ .section-light .about-pillar { border: 1px solid rgba(20,28,44,0.11); background: rgba(255,255,255,0.6); box-shadow: 0 8px 24px rgba(20,28,44,0.06); } .section-light .about-pillar:hover { border-color: rgba(168,128,31,0.45); background: rgba(255,255,255,0.9); } .section-light .about-pillar h3 { color: var(--text-on-light); } .section-light .about-pillar .t-body { color: var(--text-body-light); } .section-light .about-pillar-icon svg { stroke: var(--color-accent-dim-text); } .section-light .about-philosophy-sub { color: var(--text-body-light); } /* ----------------------------------------------------------------- POST BODY — the one new component in this build, for ported blog articles. Scoped to .post-body inside a light section so it cannot leak into any template section. Uses only existing tokens. ----------------------------------------------------------------- */ .post-body { max-width: 72ch; margin: 0 auto; color: var(--text-body-light); font-size: clamp(1.02rem, 1.15vw, 1.14rem); line-height: 1.75; } .post-body > *:first-child { margin-top: 0; } .post-body p { margin: 0 0 1.35em; } .post-body h2 { font-family: var(--font-display); font-variation-settings: 'opsz' 96, 'wght' 620, 'SOFT' 0; font-size: clamp(1.6rem, 2.6vw, 2.15rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--text-on-light); margin: 2.4em 0 0.7em; } .post-body h3 { font-family: var(--font-display); font-variation-settings: 'opsz' 48, 'wght' 600, 'SOFT' 0; font-size: clamp(1.22rem, 1.8vw, 1.45rem); line-height: 1.25; color: var(--text-on-light); margin: 2em 0 0.6em; } .post-body h4 { font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; letter-spacing: 0.01em; color: var(--text-on-light); margin: 1.7em 0 0.5em; } .post-body strong, .post-body b { color: var(--text-on-light); font-weight: 600; } .post-body ul, .post-body ol { margin: 0 0 1.35em; padding-left: 1.15em; } .post-body ul { list-style: none; padding-left: 0; } .post-body ul > li { position: relative; padding-left: 1.5em; margin-bottom: 0.6em; } .post-body ul > li::before { content: ""; position: absolute; left: 0.15em; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent-dim); } .post-body ol { list-style: decimal; } .post-body ol > li { margin-bottom: 0.6em; padding-left: 0.25em; } .post-body a { color: var(--color-accent-dim-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .post-body a:hover { color: var(--text-on-light); } .post-body blockquote { margin: 2em 0; padding: 0.2em 0 0.2em 1.4em; border-left: 3px solid var(--color-accent); font-family: var(--font-display); font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.4; color: var(--text-on-light); } @media (max-width: 640px) { .post-body { font-size: 1.02rem; } .post-body h2 { margin-top: 1.9em; } } /* ----------------------------------------------------------------- Two more light-section overrides, both found by the QA sweep's computed-contrast check rather than by eye. Same root cause as the pillar fix above: components authored for a dark section, reused inside a light one. ----------------------------------------------------------------- */ /* .treatment-tool-name is --text-primary, i.e. near-white, because its home is the dark condition-treatment block. The generator also uses that row markup for plain lists inside a light prose band (privacy, the location pages), where it was invisible. */ .section-light .treatment-tool { border-color: rgba(20,28,44,0.12); background: rgba(255,255,255,0.55); } .section-light .treatment-tool:hover { border-color: rgba(168,128,31,0.45); background: rgba(255,255,255,0.85); } .section-light .treatment-tool-name { color: var(--text-on-light); } .section-light .treatment-tool-arrow { color: var(--color-accent-dim-text); } .section-light .treatment-note { color: var(--text-body-light); } /* .related-card-arrow in brand gold measures 1.79:1 on cream. The deeper gold clears 4.3:1. */ .section-light .related-card-arrow, .section-team.section-light .related-card-arrow { color: var(--color-accent-dim-text); }