/* ================================================================= 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. The hidden (opacity:0) starting states below are scoped to .js, which page.js sets on the moment it runs (same convention app.js already uses for the homepage). Without that scope, a page with JavaScript disabled or failing to load would leave every [data-reveal] section at opacity:0 forever, since nothing would ever add .is-visible. Scoping to .js means the un-animated default is simply "visible" — progressive enhancement, not a dependency. ================================================================= */ .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 */ [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; } @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,16,12,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 teal 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; } .inner-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; } /* studio-hero.webp is a wide shot with a large empty-ceiling top half — push the crop window down so the room and the person in it are what actually shows. */ .inner-hero-bg img[src$="studio-hero.webp"] { transform: scale(1.65) translateY(-16%); } .inner-hero-bg::after { content: ""; position: absolute; inset: 0; /* Left-to-right scrim guarantees contrast for the text block (always left-aligned) regardless of how bright or busy the underlying photo is; the vertical scrim keeps the header and bottom edge readable on top of that. */ background: linear-gradient(90deg, rgba(8,8,10,0.86) 0%, rgba(8,8,10,0.68) 40%, rgba(8,8,10,0.38) 66%, rgba(8,8,10,0.52) 100%), linear-gradient(180deg, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.48) 45%, rgba(10,10,10,0.9) 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: rgba(240,237,232,0.78); text-shadow: 0 1px 12px rgba(0,0,0,0.6); } .page-breadcrumb a { display: inline-block; color: rgba(240,237,232,0.78); 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.55; } .inner-hero .section-label { margin-bottom: 1rem; text-shadow: 0 1px 14px rgba(0,0,0,0.7); } .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); text-shadow: 0 4px 28px rgba(0,0,0,0.55); 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); text-shadow: 0 2px 16px rgba(0,0,0,0.6); 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(13,68,59,0.32), transparent 70%), radial-gradient(44% 54% at 2% 96%, rgba(16,30,28,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); border-left: 2px solid var(--color-accent-dim); 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,30,28,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; } .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(102,146,143,0.35); background: rgba(102,146,143,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. */ /* Variable-count roster grid: flexbox instead of CSS grid so an incomplete last row centers instead of left-packing with phantom empty tracks (team size varies by client and changes over time as staff join/leave). 3-up on desktop, 2-up on tablet, 1-up on phone — same visual sizing as the old fixed grid. */ .about-team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(2rem, 4vw, 3.5rem); } .about-team-grid .team-card { flex: 0 1 calc((100% - clamp(2rem, 4vw, 3.5rem) * 2) / 3); } /* ================================================================= ABOUT — FACILITY PHOTOS (dark) */ .about-facility { background: linear-gradient(180deg, #0A0A0C, #07070A); } .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(22,50,104,0.28), transparent 68%), radial-gradient(46% 56% at 95% 92%, rgba(13,68,59,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,30,28,0.11); box-shadow: 0 8px 24px rgba(20,30,28,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(16,184,160,0.45); background: rgba(255,255,255,0.85); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(20,86,76,0.14); } .trust-icon { flex: none; width: 38px; height: 38px; } .trust-icon svg { width: 100%; height: 100%; fill: none; stroke: var(--color-accent-dim); 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, #0E1015, #09090F); 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, #09090F, #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(102,146,143,0.07) 0%, rgba(255,255,255,0.03) 100%); border: 1px solid rgba(102,146,143,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(102,146,143,0.04); } .service-card-featured:hover { border-color: rgba(102,146,143,0.45); background: linear-gradient(135deg, rgba(102,146,143,0.10) 0%, rgba(255,255,255,0.04) 100%); transform: translateY(-3px); box-shadow: 0 24px 60px rgba(102,146,143,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(102,146,143,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(102,146,143,0.3); background: rgba(102,146,143,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(102,146,143,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; } /* Staff bio headshots are square source photos already cropped tight to the head with no headroom above the hair; centering the crop into this wider 4:3 frame cuts straight through the top of the head, so anchor to the top instead and crop from the bottom. */ .service-intro-image.bio-photo img { object-position: center top; } .service-intro-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(102,146,143,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(13,68,59,0.28), transparent 66%), radial-gradient(42% 52% at 3% 96%, rgba(22,50,104,0.18), transparent 66%); } .service-who > .section-shell { position: relative; z-index: 1; } .service-who .section-head .t-h2 { color: #14100C; } .service-who .section-head .t-body { color: var(--text-body-light); } .service-who .section-head .section-label { color: var(--color-accent-dim); } .service-who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.6rem, 1.2vw, 1rem); margin-top: clamp(2rem, 3.5vw, 3.2rem); } .who-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.9rem 1.1rem; border-radius: 10px; background: rgba(255,255,255,0.6); border: 1px solid rgba(20,30,28,0.09); transition: border-color var(--duration-base), background var(--duration-base); } .who-item:hover { border-color: rgba(0,196,173,0.35); background: rgba(255,255,255,0.88); } .who-item-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent-dim); flex: none; margin-top: 0.45em; } .who-item-text { font-size: 0.9rem; color: var(--text-on-light); font-weight: 500; line-height: 1.4; } /* 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); } .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); 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(13,68,59,0.24), transparent 68%); } .service-outcomes > .section-shell { position: relative; z-index: 1; } .service-outcomes .section-head .t-h2 { color: #14100C; } .service-outcomes .section-head .t-body { color: var(--text-body-light); } .service-outcomes .section-head .section-label { color: var(--color-accent-dim); } .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,30,28,0.09); } .outcome-icon { width: 36px; height: 36px; flex: none; border-radius: 8px; background: rgba(0,196,173,0.1); display: flex; align-items: center; justify-content: center; } .outcome-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--color-accent-dim); 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, #0E1014); 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(102,146,143,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(22,50,104,0.2), transparent 66%), radial-gradient(44% 54% at 96% 96%, rgba(13,68,59,0.16), transparent 66%); } .service-related.section-light .section-head .t-h2 { color: #14100C; } .service-related.section-light .section-head .section-label { color: var(--color-accent-dim); } .service-related.section-light .related-card { background: rgba(255,255,255,0.62); border-color: rgba(20,30,28,0.1); } .service-related.section-light .related-card:hover { border-color: rgba(0,196,173,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(0,196,173,0.1); } .service-related.section-light .related-card-icon svg { stroke: var(--color-accent-dim); } .service-related.section-light .related-card-arrow { color: var(--color-accent-dim); } .related-grid { /* Flexbox, not grid: item count varies (3 on condition/service pages, up to 4+ on staff bios as the roster changes), so an incomplete last row must center instead of left-packing with phantom empty tracks. */ display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 2vw, 1.8rem); margin-top: clamp(2.2rem, 3.5vw, 3.5rem); } .related-card { flex: 0 1 calc((100% - clamp(1rem, 2vw, 1.8rem) * 2) / 3); } .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(102,146,143,0.28); background: rgba(102,146,143,0.03); transform: translateY(-3px); } .related-card-icon { width: 40px; height: 40px; margin-bottom: 1.1rem; background: rgba(102,146,143,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 { grid-template-columns: 1fr; gap: 1.8rem; } .outcomes-grid { grid-template-columns: 1fr; } .related-card { flex: 0 1 calc((100% - clamp(1rem, 2vw, 1.8rem)) / 2); } } @media (max-width: 640px) { .service-who-grid { grid-template-columns: repeat(2, 1fr); } .related-card { flex: 0 1 100%; } } /* ================================================================= 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(22,50,104,0.22), transparent 66%), radial-gradient(44% 52% at 97% 96%, rgba(13,68,59,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: #14100C; } .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); } .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,30,28,0.12); } .condition-group-icon { width: 40px; height: 40px; flex: none; background: rgba(0,196,173,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); 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); } .condition-group-count { margin-left: auto; font-size: 0.75rem; font-weight: 500; color: rgba(20,30,28,0.4); letter-spacing: 0.04em; } .condition-grid { /* Flexbox, not grid: each category group has a different condition count (2, 3 or 4), so an incomplete last row must center instead of left-packing with phantom empty tracks. */ display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 1.8vw, 1.5rem); } .condition-card { flex: 0 1 calc((100% - clamp(1rem, 1.8vw, 1.5rem) * 2) / 3); } .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,30,28,0.1); box-shadow: 0 6px 20px rgba(20,30,28,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(0,196,173,0.4); background: rgba(255,255,255,0.92); transform: translateY(-3px); box-shadow: 0 18px 44px rgba(20,86,76,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); 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); transition: gap var(--duration-fast), color var(--duration-fast); } .condition-card:hover .condition-card-link { gap: 0.7rem; color: var(--color-accent-dim); } /* ================================================================= SERVICES BOOKING */ .services-booking { background: linear-gradient(180deg, #0E1015, #09090F); 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(102,146,143,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(22,50,104,0.22), transparent 66%), radial-gradient(44% 54% at 96% 94%, rgba(13,68,59,0.18), transparent 66%); } .condition-symptoms > .section-shell { position: relative; z-index: 1; } .condition-symptoms .section-head .t-h2 { color: #14100C; } .condition-symptoms .section-head .t-body { color: var(--text-body-light); } .condition-symptoms .section-head .section-label { color: var(--color-accent-dim); } .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); } .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,30,28,0.09); transition: border-color var(--duration-base), background var(--duration-base); } .symptom-item:hover { border-color: rgba(0,196,173,0.35); background: rgba(255,255,255,0.9); } .symptom-item-icon { width: 36px; height: 36px; margin-bottom: 0.9rem; background: rgba(0,196,173,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); 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(102,146,143,0.28); background: rgba(102,146,143,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(102,146,143,0.05); border: 1px solid rgba(102,146,143,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; } .treatment-split { grid-template-columns: 1fr; } .symptoms-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .symptoms-grid { 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(102,146,143,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 { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } .about-team-grid .team-card { flex: 0 1 calc((100% - clamp(2rem, 4vw, 3.5rem)) / 2); } .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-card { flex: 0 1 calc((100% - clamp(1rem, 1.8vw, 1.5rem)) / 2); } .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 { 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 .team-card { flex: 0 1 100%; } .about-photos-grid { grid-template-columns: 1fr; } .about-trust-grid { grid-template-columns: 1fr; } .about-pillars { grid-template-columns: 1fr; } .about-philosophy-lede { font-size: clamp(1.6rem, 7vw, 2.4rem); } .services-grid { grid-template-columns: 1fr; } .condition-card { flex: 0 1 100%; } /* Contact hours: single column on small phones */ .contact-hours-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { /* Service who-grid: single column on small phones */ .service-who-grid { grid-template-columns: 1fr; } } /* ################################################################# ##### BLOG ARTICLE BLOCK :: BEGIN ##### ################################################################# The ONE sanctioned new component block for this build. Covers: the blog article hero meta row, the ported article prose body, and the blog index cards. Nothing above this banner is modified. Every colour below is stated EXPLICITLY rather than inherited, because this block lives inside .section-light and the template has twice shipped near-white text on a near-white background by reusing dark-section components in a light section. ################################################################# */ /* .inner-hero already carries --section-pad-h; .section-shell inside it is used only for the 1280px max-width, so its own gutter is zeroed out. */ .inner-hero-content.section-shell { padding-left: 0; padding-right: 0; } /* Post titles are long. The current crumb stays on one line and truncates rather than wrapping the breadcrumb into a paragraph. */ .blog-crumb-current { color: var(--text-secondary); max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Hero meta row (dark hero, sits under the breadcrumb) ---- */ .blog-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 1.6rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); } .blog-hero-meta .sep { opacity: 0.4; } .blog-hero-meta .blog-hero-meta-accent { color: var(--color-accent); } /* ---- Article body section (LIGHT) ---- */ .blog-article.section-light { background: linear-gradient(180deg, #F7F5F1, #EFEBE3); position: relative; overflow: hidden; } .blog-article.section-light::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(46% 56% at 98% 2%, rgba(13,68,59,0.14), transparent 70%); } .blog-article > .section-shell { position: relative; z-index: 1; } .blog-article-body { max-width: 74ch; margin: 0 auto; } /* ---- Ported prose. Explicit colours on every text node. ---- */ .blog-prose { color: var(--text-body-light); font-family: var(--font-body); font-size: clamp(1.02rem, 1.15vw, 1.13rem); font-weight: 300; line-height: 1.78; overflow-wrap: break-word; } .blog-prose > * + * { margin-top: 1.3rem; } .blog-prose p { color: var(--text-body-light); } .blog-prose h2, .blog-prose h3, .blog-prose h4, .blog-prose h5 { font-family: var(--font-display); color: #14100C; letter-spacing: -0.02em; overflow-wrap: break-word; } .blog-prose h2 { font-size: clamp(1.65rem, 2.9vw, 2.3rem); font-weight: 600; line-height: 1.14; margin-top: clamp(2.6rem, 4.5vw, 3.6rem); padding-top: clamp(1.4rem, 2.4vw, 2rem); border-top: 1px solid rgba(20,30,28,0.13); } .blog-prose h3 { font-size: clamp(1.28rem, 2vw, 1.55rem); font-weight: 600; line-height: 1.24; margin-top: clamp(2rem, 3.2vw, 2.6rem); } .blog-prose h4, .blog-prose h5 { font-size: clamp(1.08rem, 1.5vw, 1.22rem); font-weight: 600; line-height: 1.3; margin-top: clamp(1.6rem, 2.6vw, 2.1rem); } .blog-prose h2 + *, .blog-prose h3 + *, .blog-prose h4 + *, .blog-prose h5 + * { margin-top: 0.9rem; } .blog-prose strong, .blog-prose b { color: #14100C; font-weight: 600; } .blog-prose em, .blog-prose i { font-style: italic; } .blog-prose a { color: var(--color-accent-dim); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--duration-fast); } .blog-prose a:hover { color: #14100C; } /* WP often bolds part of a link; the link colour must win inside the anchor */ .blog-prose a strong, .blog-prose a b, .blog-prose a em { color: inherit; } .blog-prose ul, .blog-prose ol { padding-left: 1.4rem; } .blog-prose ul { list-style: disc; } .blog-prose ol { list-style: decimal; } .blog-prose li { color: var(--text-body-light); } .blog-prose li + li { margin-top: 0.55rem; } .blog-prose li::marker { color: var(--color-accent-dim); } .blog-prose li > ul, .blog-prose li > ol { margin-top: 0.55rem; } .blog-prose blockquote { border-left: 2px solid var(--color-accent-dim); padding-left: clamp(1rem, 2vw, 1.5rem); font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.18rem, 1.9vw, 1.5rem); line-height: 1.35; color: var(--color-accent-dim); } .blog-prose blockquote p { color: var(--color-accent-dim); } .blog-prose img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 20px 48px rgba(20,30,28,0.16); } .blog-prose figure { margin: 0; } .blog-prose figcaption { margin-top: 0.7rem; font-size: 0.84rem; color: #6B6560; line-height: 1.5; } .blog-prose hr { border: none; height: 1px; background: rgba(20,30,28,0.14); margin-top: clamp(2rem, 3.5vw, 3rem); } /* Tables scroll inside their own container, never the page */ .blog-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .blog-prose table { width: 100%; border-collapse: collapse; min-width: 480px; font-size: 0.94rem; color: var(--text-body-light); } .blog-prose th, .blog-prose td { text-align: left; padding: 0.75rem 0.9rem; border-bottom: 1px solid rgba(20,30,28,0.13); } .blog-prose th { color: #14100C; font-weight: 600; } /* Byline + share-free footer strip under the prose */ .blog-article-foot { margin-top: clamp(2.6rem, 4.5vw, 3.6rem); padding-top: clamp(1.4rem, 2.4vw, 2rem); border-top: 1px solid rgba(20,30,28,0.14); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.6rem; } .blog-article-foot p { color: var(--text-body-light); font-size: 0.94rem; max-width: 48ch; } .blog-article-foot .link-arrow { margin-top: 0; color: var(--color-accent-dim); } /* ---- Blog index cards (LIGHT section) ---- */ .blog-index-grid { /* Flexbox, not grid: post count grows over time and won't always divide evenly by 3, so an incomplete last row must center instead of left-packing with phantom empty tracks. */ display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 2vw, 1.8rem); } .blog-index-grid .blog-card { flex: 0 1 calc((100% - clamp(1rem, 2vw, 1.8rem) * 2) / 3); } .blog-card { display: flex; flex-direction: column; padding: clamp(1.4rem, 2.2vw, 2rem); border-radius: 14px; background: rgba(255,255,255,0.62); border: 1px solid rgba(20,30,28,0.1); text-decoration: none; transition: border-color var(--duration-base), background var(--duration-base), transform var(--duration-base) var(--ease-smooth); } .blog-card:hover { border-color: rgba(102,146,143,0.45); background: rgba(255,255,255,0.92); transform: translateY(-3px); } .blog-card-date { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-dim); margin-bottom: 0.9rem; } .blog-card h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.12rem, 1.5vw, 1.3rem); line-height: 1.22; letter-spacing: -0.01em; color: var(--text-on-light); margin-bottom: 0.7rem; overflow-wrap: break-word; } .blog-card p { font-size: 0.9rem; line-height: 1.62; font-weight: 300; color: var(--text-body-light); margin-bottom: 1.2rem; } .blog-card-arrow { margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-dim); transition: gap var(--duration-fast); } .blog-card:hover .blog-card-arrow { gap: 0.75rem; } /* Related posts reuse .service-related.section-light card styling; only the heading font differs because post titles are longer than condition names. */ .blog-related .related-card { display: flex; flex-direction: column; } .blog-related .related-card h3 { font-family: var(--font-display); font-size: clamp(1.02rem, 1.3vw, 1.16rem); line-height: 1.24; color: var(--text-on-light); overflow-wrap: break-word; } .blog-related .related-card-arrow { margin-top: auto; } @media (max-width: 1024px) { .blog-index-grid .blog-card { flex: 0 1 calc((100% - clamp(1rem, 2vw, 1.8rem)) / 2); } } @media (max-width: 640px) { .blog-index-grid .blog-card { flex: 0 1 100%; } .blog-prose h2 { margin-top: 2.2rem; padding-top: 1.3rem; } .blog-crumb-current { max-width: 18ch; } .blog-hero-meta { font-size: 0.72rem; gap: 0.4rem 0.7rem; } } /* ################################################################# ##### BLOG ARTICLE BLOCK :: END ##### ################################################################# */ /* ================================================================= CLIENT BLOCK — Pyramid Physical Therapy & Pilates Config-level additions only. No template system is modified above. ================================================================= */ /* TEMPLATE BUG FIX (upstream: affects every clone of pt-website-template-2). [data-reveal="stagger"] > * is set to opacity:0, but only nth-child(1) through (6) are ever restored. Any stagger grid with more than six children leaves child 7 onward PERMANENTLY INVISIBLE, with no console error and nothing wrong in the HTML. This client has 13 services and 17 conditions to list, so the ceiling is hit on real pages. Delays continue to child 12 and then flatten, so a long grid does not crawl in. */ [data-reveal="stagger"].is-visible > * { opacity: 1; transform: none; } [data-reveal="stagger"].is-visible > *:nth-child(7) { transition-delay: 0.60s; } [data-reveal="stagger"].is-visible > *:nth-child(8) { transition-delay: 0.66s; } [data-reveal="stagger"].is-visible > *:nth-child(9) { transition-delay: 0.72s; } [data-reveal="stagger"].is-visible > *:nth-child(10) { transition-delay: 0.78s; } [data-reveal="stagger"].is-visible > *:nth-child(11) { transition-delay: 0.84s; } [data-reveal="stagger"].is-visible > *:nth-child(n+12) { transition-delay: 0.90s; } /* TEMPLATE BUG FIX (upstream: affects every clone). Hero copy does not align with body copy on wide viewports. `.inner-hero` applies --section-pad-h, then the block above zeroes the gutter on the `.section-shell` inside it. That leaves the shell its max-width:1280 and margin:0 auto, but the hero's own padding has already reduced the available width below 1280 (1440 - 172.8 = 1267.2), so auto-margin resolves to 0 and the shell cannot centre. Measured: hero H1 at 86.4px, first body heading at 166.4px, an 80px disagreement at 1440 and 96px at 1600, collapsing to 0 at <=1280, which is why it reads as fine on a laptop. Moving the gutter reset from the shell to the hero gives the shell the full width to centre in, so both land on the same line at every viewport. */ .inner-hero { padding-left: 0; padding-right: 0; } .inner-hero-content.section-shell { padding-left: var(--section-pad-h); padding-right: var(--section-pad-h); } /* TEMPLATE BUG FIX (upstream). `.section-light .process-num { opacity: 0.32 }` crushes the step numeral to rgb(174,187,182) on cream: measured 1.56:1, effectively invisible. This is the same light-section inheritance family as the two failures in ONBOARDING section 6, just caused by opacity rather than by colour. The numeral is decorative and aria-hidden, but it is also 54 to 80px display type carrying the step sequence, so it should at least clear the 3:1 large-text bar. 0.85 measures 3.81:1 and keeps it visually subordinate to the heading. */ .section-light .process-num { opacity: 0.85; }