/* ============================================================================ MENDOZA — EDITORIAL-WARM FULL PAGE (two themes, one layout) ---------------------------------------------------------------------------- Aesthetic: high-end editorial / luxury private clinic. Type-led (Source Serif 4 headings, Public Sans body), sand-paper canvas, ONE accent, 8px grid, fine accent hairline rules as section dividers. THEMING CONTRACT - EVERY colour is a CSS custom property. The layout, type scale, grid, and motion are identical across themes. Only the token VALUES change. - Default (:root) = "warm" (editorial terracotta on sand paper). - = "blue-clinical" (bright blue / navy on light blue-white). Same elegant page in a clinical-blue suit. MOTION CONTRACT (learned the hard way — do not regress) - Every element is FULL-OPACITY and complete AT REST. - Reveal is pure polish: a self-terminating fade-up that only ENDS at opacity:1. No .in class -> element stays visible. No JS -> visible. prefers-reduced-motion -> everything static and complete. - Nothing on this page is EVER made visible by animation. ========================================================================== */ @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/public-sans-var.woff2) format('woff2'); } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(../fonts/source-serif-4-var.woff2) format('woff2'); } /* ---- THEME A: warm (default) --------------------------------------------- */ :root { --bg: #f8f4ec; /* sand paper */ --surface: #fffdf8; /* lifted warm white */ --tint: #f1e9db; /* alternating band */ --ink: #2b2622; /* ink */ --ink-dim: #5b5344; /* supporting text */ --ink-faint: #8b8070; /* meta / eyebrow-muted */ --accent: #bb5a3c; /* terracotta (ONLY accent) */ --accent-2: #9d4227; /* accent hover */ --accent-ink: #fffaf3; /* text on accent */ --line: #e2d8c6; /* neutral hairline */ --divider: rgba(187, 90, 60, .30); /* accent section rule */ --accent-soft: rgba(187, 90, 60, .10); /* icon wash / chips */ --portrait-shadow: rgba(80, 45, 25, .38); --card-shadow: rgba(80, 45, 25, .10); --footer-bg: #2b2622; --footer-ink: #cabfae; --footer-head: #f8f4ec; --footer-line: #4a4238; /* Shared, non-colour design tokens (identical across themes). */ --font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --serif: "Source Serif 4", Georgia, "Times New Roman", serif; --ease: cubic-bezier(.2, .7, .2, 1); --gutter: clamp(24px, 6vw, 96px); --maxw: 1200px; } /* ---- THEME B: blue-clinical ---------------------------------------------- */ .theme-blue { --bg: #f5f9fc; --surface: #ffffff; --tint: #e4eef7; --ink: #0c3557; /* deep navy ink */ --ink-dim: #40607b; --ink-faint: #7d94a8; --accent: #005cb9; /* bright blue (ONLY accent) */ --accent-2: #00497a; /* deep navy hover */ --accent-ink: #ffffff; --line: #d3e2ef; --divider: rgba(0, 92, 185, .28); --accent-soft: rgba(0, 92, 185, .10); --portrait-shadow: rgba(10, 50, 90, .35); --card-shadow: rgba(10, 50, 90, .12); --footer-bg: #00304f; --footer-ink: #a9c2d8; --footer-head: #ffffff; --footer-line: #14496b; } /* ========================================================================== BASE ========================================================================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: var(--accent); } a:hover { color: var(--accent-2); } .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100; } .skip:focus { left: 0; } /* Section rhythm + the fine accent hairline divider between every section. */ .section { padding: clamp(64px, 9vw, 120px) 0; border-top: 1px solid var(--divider); } .section--tint { background: var(--tint); } .eyebrow { margin: 0 0 16px; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); } h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--ink); } .section-head { max-width: 46rem; margin: 0 auto clamp(40px, 6vw, 64px); text-align: center; } .section-head .eyebrow { } .section-head h2 { margin-bottom: 20px; } .section-head .rule { width: 48px; height: 2px; background: var(--accent); margin: 20px auto 0; border-radius: 2px; } .lede { margin: 0; font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.6; color: var(--ink-dim); } /* ========================================================================== STICKY EDITORIAL HEADER (brand lockup + nav + phone + CTA + theme toggle) ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: saturate(1.15) blur(9px); backdrop-filter: saturate(1.15) blur(9px); border-bottom: 1px solid transparent; transition: box-shadow .28s var(--ease), border-color .28s var(--ease), background-color .28s var(--ease); } @supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--bg); } } .site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 34px -20px var(--card-shadow); } .site-header__inner { max-width: var(--maxw); margin-inline: auto; padding: 11px var(--gutter); display: flex; align-items: center; gap: clamp(16px, 2.4vw, 30px); } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); margin-right: auto; min-width: 0; } .brand__mark { width: 34px; height: 34px; color: var(--accent); flex: 0 0 auto; } .brand__text { display: flex; flex-direction: column; line-height: 1.18; min-width: 0; } .brand__name { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; color: var(--ink); letter-spacing: -.01em; } .brand__sub { font-size: .72rem; color: var(--ink-faint); letter-spacing: .01em; } .site-nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 28px); } .navlink { font-size: .93rem; font-weight: 500; color: var(--ink-dim); text-decoration: none; position: relative; padding: 6px 1px; white-space: nowrap; transition: color .2s var(--ease); } .navlink::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--accent); transition: right .3s var(--ease); } .navlink:hover { color: var(--ink); } .navlink:hover::after { right: 0; } .header-cta { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 18px); } .header-phone { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap; transition: color .2s var(--ease); } .header-phone svg { width: 17px; height: 17px; color: var(--accent); } .header-phone:hover { color: var(--accent); } .btn--sm { min-height: 44px; padding: 10px 20px; font-size: .95rem; border-radius: 9px; } .btn__short { display: none; } .theme-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; letter-spacing: .03em; white-space: nowrap; color: var(--ink-dim); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; transition: border-color .2s var(--ease), color .2s var(--ease); } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle__dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; background: #005cb9; box-shadow: inset 0 0 0 2px rgba(255,255,255,.65); } .theme-blue .theme-toggle__dot { background: #bb5a3c; } /* anchored sections clear the sticky header when jumped to */ :where(#about, #spine, #reviews, #locations, #contact, #conditions) { scroll-margin-top: 78px; } /* ========================================================================== HERO — reused verbatim from the approved editorial-warm hero. Type sizes / grid / 3-line name wrap are UNCHANGED; only colours are tokenised. ========================================================================== */ .hero { --hero-colgap: clamp(32px, 5vw, 72px); position: relative; background: var(--bg); color: var(--ink); padding: clamp(40px, 6vw, 88px) var(--gutter) clamp(56px, 9vw, 120px); overflow: clip; } .hero__inner { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr); grid-template-areas: "text portrait"; align-items: start; column-gap: var(--hero-colgap); row-gap: clamp(32px, 6vw, 56px); } .hero__text { grid-area: text; align-self: center; max-width: 34ch; } .hero__overline { margin: 0 0 24px; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); } .hero__name { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--ink); } .hero__rule { height: 1px; width: 100%; margin: 24px 0; background: var(--accent); transform: scaleX(1); transform-origin: left center; } .hero__credential { margin: 0; font-size: clamp(.95rem, 1.4vw, 1.1rem); font-weight: 500; letter-spacing: .01em; color: var(--ink-dim); } .hero__tagline { margin: 16px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.3rem, 2.3vw, 1.85rem); line-height: 1.28; color: var(--ink); } .hero__cta { margin: 40px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 28px; border-radius: 10px; font-family: var(--font); font-size: 1.02rem; font-weight: 600; letter-spacing: .01em; text-decoration: none; cursor: pointer; border: 0; transition: transform .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease); } .btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 18px -8px var(--portrait-shadow); } .btn--primary:hover { background: var(--accent-2); color: var(--accent-ink); transform: translateY(-1px); } .btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--bg); transform: translateY(-1px); } .btn--ghost svg, .btn--ghost .glyph { color: var(--accent); } .btn--ghost:hover svg, .btn--ghost:hover .glyph { color: var(--accent-ink); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .hero__phoneglyph { color: var(--accent); font-size: 1.05em; line-height: 1; } .hero__btn--phone:hover .hero__phoneglyph { color: var(--accent-ink); } .hero__portrait { grid-area: portrait; align-self: start; position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--line); box-shadow: 0 30px 60px -30px var(--portrait-shadow); } .hero__portrait::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(43, 38, 34, .10); border-radius: inherit; pointer-events: none; } .hero__portrait img { position: absolute; inset: 0; width: 100%; height: 120%; object-fit: cover; object-position: 50% 22%; display: block; will-change: transform; } /* ========================================================================== VALUE TRIO — "why him". Editorial: accent index numeral + serif head, hairline. ========================================================================== */ .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); } .vitem { padding-top: 24px; border-top: 2px solid var(--accent); } .vitem__no { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--accent); letter-spacing: .02em; } .vitem h3 { margin: 12px 0 10px; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.2; } .vitem p { margin: 0; color: var(--ink-dim); font-size: 1.02rem; } /* ========================================================================== CONDITIONS — index grid. Flat wayfinding icons in accent, serif labels. ========================================================================== */ .cond-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--divider); border: 1px solid var(--divider); border-radius: 14px; overflow: hidden; } .cond { background: var(--bg); padding: clamp(22px, 2.5vw, 30px); } .section--tint .cond { background: var(--tint); } .cond__icon { width: 30px; height: 30px; color: var(--accent); margin-bottom: 14px; } .cond h4 { margin: 0 0 8px; font-size: 1.12rem; line-height: 1.25; } .cond p { margin: 0; font-size: .95rem; color: var(--ink-dim); line-height: 1.5; } .cond-note { margin: clamp(28px, 4vw, 40px) auto 0; max-width: 60rem; text-align: center; font-size: .95rem; color: var(--ink-faint); } /* ========================================================================== SIGNATURE CENTERPIECE — scroll-scrubbed anatomical spine -------------------------------------------------------------------------- BASE (this block) is the source of truth: a normal, complete, printable section showing the FINAL assembled + highlighted figure and all four captions in flow. The scroll scrub is layered on top only where supported and motion is allowed. Nothing here is ever made visible by animation. ========================================================================== */ .spine { border-top: 1px solid var(--divider); background: var(--bg); overflow: clip; } .spine-stage { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(32px, 6vw, 84px); align-items: center; padding-block: clamp(56px, 8vw, 104px); } .spine-fig { display: flex; justify-content: center; } .spine-svg { width: 100%; max-width: 330px; height: auto; overflow: visible; } /* SVG layer paint — all via tokens, so both themes recolour for free. The RESTING (fallback) paint is the finished, highlighted state. */ .spine-svg .bone { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; stroke-opacity: .5; } .spine-svg .canal rect { fill: var(--ink); opacity: .06; } .spine-svg .disc { fill: var(--line); } .spine-svg .disc--hi { fill: var(--accent); } .spine-svg .foramen { fill: none; stroke: var(--accent); stroke-width: 2.4; } .spine-svg .nerve { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; } .spine-svg .emph { opacity: 1; } .spine-svg .emph-a { stop-color: var(--accent); stop-opacity: .5; } .spine-svg .emph-b { stop-color: var(--accent); stop-opacity: 0; } .spine-copy h2 { margin-top: 2px; } .spine-lede { margin: 14px 0 4px; font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.6; color: var(--ink-dim); } .spine-caps { margin-top: 22px; display: grid; gap: 15px; } .spine-cap { margin: 0; padding-left: 20px; position: relative; font-family: var(--serif); font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.42; color: var(--ink); } .spine-cap::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--accent); } /* ---- ENHANCED: pin + scrub (native CSS scroll-driven timeline) ----------- */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .spine-track { position: relative; height: 460vh; view-timeline-name: --spine; view-timeline-axis: block; } .spine-sticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; } .spine-stage { padding-block: 0; width: 100%; } /* vertebrae assemble, centre-out (each --dy set inline per level) */ .vert { animation: vert-in linear both; animation-timeline: --spine; } .lvl3 { animation-range: contain 2% contain 15%; } .lvl2, .lvl4 { animation-range: contain 9% contain 25%; } .lvl1, .lvl5 { animation-range: contain 19% contain 37%; } @keyframes vert-in { from { opacity: 0; transform: translateY(var(--dy)); } to { opacity: 1; transform: none; } } /* worn disc lights up */ .disc--hi { animation: disc-hi linear both; animation-timeline: --spine; animation-range: contain 44% contain 60%; } @keyframes disc-hi { from { fill: var(--line); } to { fill: var(--accent); } } /* foramen outline draws in */ .foramen { animation: soft-in linear both; animation-timeline: --spine; animation-range: contain 54% contain 68%; } /* nerve root draws + turns to the accent (the moment) */ .nerve { stroke-dasharray: 100; animation: nerve-draw linear both; animation-timeline: --spine; animation-range: contain 66% contain 90%; } @keyframes nerve-draw { from { stroke-dashoffset: 100; stroke: var(--ink-faint); stroke-width: 4; } to { stroke-dashoffset: 0; stroke: var(--accent); stroke-width: 6; } } /* emphasis halo blooms at the end */ .emph { animation: soft-in linear both; animation-timeline: --spine; animation-range: contain 80% contain 100%; } @keyframes soft-in { from { opacity: 0; } to { opacity: 1; } } /* captions crossfade in step with the figure (real text, still selectable) */ .spine-caps { position: relative; min-height: 6.2em; } .spine-cap { position: absolute; inset: 0; opacity: 0; animation: cap linear both; animation-timeline: --spine; } .spine-cap[data-cap="1"] { animation-range: contain 1% contain 30%; } .spine-cap[data-cap="2"] { animation-range: contain 28% contain 52%; } .spine-cap[data-cap="3"] { animation-range: contain 50% contain 74%; } .spine-cap[data-cap="4"] { animation-name: cap-last; animation-range: contain 72% contain 100%; } @keyframes cap { 0% { opacity: 0; } 16% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; } } @keyframes cap-last { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 1; } } } } /* ---- FALLBACK: no native scroll timeline (e.g. Firefox). JS sets --sp (0..1) via rAF; assembly scrubs, highlights sit at their finished state, captions stay in normal flow. No JS -> everything simply static + final. -- */ @supports not (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .spine-track.js-scrub { position: relative; height: 460vh; } .spine-track.js-scrub .spine-sticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; } .spine-track.js-scrub .spine-stage { padding-block: 0; width: 100%; } .spine-track.js-scrub .vert { --asm: clamp(0, calc(var(--sp, 0) * 3), 1); opacity: var(--asm); transform: translateY(calc(var(--dy) * (1 - var(--asm)))); } } } /* ========================================================================== MEET THE SURGEON ========================================================================== */ .about { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(36px, 6vw, 80px); align-items: center; } .about__photo { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--line); box-shadow: 0 30px 60px -30px var(--portrait-shadow); } .about__photo::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(43,38,34,.10); border-radius: inherit; pointer-events: none; } .about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; } .about__text .role { margin: 8px 0 20px; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--accent); } .about__text > p { color: var(--ink-dim); font-size: 1.05rem; max-width: 52ch; } .about__text h2 { margin-top: 4px; } .badges { list-style: none; margin: 26px 0; padding: 0; display: grid; gap: 12px; } .badges li { display: flex; align-items: flex-start; gap: 12px; font-size: 1rem; font-weight: 500; color: var(--ink); } .badges svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; color: var(--accent-ink); background: var(--accent); border-radius: 50%; padding: 3px; } .stats { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 48px); margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--divider); } .stat b { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 3vw, 2.4rem); line-height: 1; color: var(--accent); } .stat span { display: block; margin-top: 8px; font-size: .9rem; color: var(--ink-dim); } /* ========================================================================== REVIEWS ========================================================================== */ .stars { color: var(--accent); letter-spacing: 2px; } .rating-line { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: center; margin: 0 auto clamp(36px, 5vw, 52px); font-size: 1rem; color: var(--ink-dim); } .rating-line b { color: var(--ink); } .rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 28px); } .rev { position: relative; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: clamp(24px, 2.6vw, 32px); box-shadow: 0 18px 40px -30px var(--card-shadow); } .rev::before { content: "\201C"; position: absolute; top: 6px; right: 18px; font-family: var(--serif); font-size: 4rem; line-height: 1; color: var(--accent-soft); pointer-events: none; } .rev .stars { font-size: .95rem; } .rev p { margin: 14px 0 20px; font-family: var(--serif); font-size: 1.1rem; line-height: 1.5; color: var(--ink); } .rev__meta { display: flex; flex-direction: column; gap: 2px; font-size: .85rem; } .rev__meta b { color: var(--ink); } .rev__meta .src { color: var(--ink-faint); } .reviews__note { margin: clamp(28px, 4vw, 40px) auto 0; max-width: 60rem; text-align: center; font-size: .85rem; color: var(--ink-faint); line-height: 1.6; } /* ========================================================================== LOCATIONS — themed ridge silhouette (fills follow the accent, so it swaps) ========================================================================== */ .loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 28px); } .loc { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px -30px var(--card-shadow); } .loc__banner { position: relative; height: 120px; color: var(--accent); background: var(--accent-soft); } .loc__banner svg { position: absolute; inset: 0; width: 100%; height: 100%; } .loc__banner span { position: absolute; left: 20px; bottom: 14px; font-family: var(--serif); font-weight: 600; font-size: 1.25rem; color: var(--ink); z-index: 1; } .loc__body { padding: 22px clamp(20px, 2.2vw, 26px) 26px; } .loc__body .region { margin: 0 0 8px; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } .loc__body p { margin: 0 0 12px; color: var(--ink-dim); font-size: .98rem; } .loc__body a { font-weight: 600; } /* ========================================================================== CONTACT ========================================================================== */ .contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 72px); align-items: start; } .contact__info h2 { margin-bottom: 16px; } .infoline { display: flex; align-items: flex-start; gap: 14px; margin-top: 18px; } .infoline svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--accent); margin-top: 2px; } .infoline span { display: flex; flex-direction: column; } .infoline b { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); } .infoline a, .infoline span > :not(b) { color: var(--ink); font-weight: 500; } .infoline a:hover { color: var(--accent); } .form { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: clamp(24px, 3vw, 40px); box-shadow: 0 24px 50px -34px var(--card-shadow); } .field { margin-bottom: 18px; } .field label { display: block; margin-bottom: 7px; font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-dim); } .field input, .field textarea { width: 100%; font-family: var(--font); font-size: 1rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .field textarea { min-height: 120px; resize: vertical; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .form .btn--primary { width: 100%; margin-top: 4px; } .form__ok { display: none; margin-top: 18px; padding: 14px 16px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--divider); color: var(--ink); font-size: .95rem; } .form__ok.show { display: block; } .form__note { margin: 16px 0 0; font-size: .8rem; line-height: 1.6; color: var(--ink-faint); } /* ========================================================================== FOOTER ========================================================================== */ .site-footer { background: var(--footer-bg); color: var(--footer-ink); padding: clamp(48px, 7vw, 80px) 0 40px; } .footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(28px, 5vw, 64px); } .footer-brand__name { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; color: var(--footer-head); } .footer-brand__sub { display: block; margin-top: 4px; font-size: .82rem; color: var(--footer-ink); } .footer-brand p { margin: 16px 0 0; max-width: 40ch; font-size: .92rem; line-height: 1.6; } .footer-col h4 { margin: 0 0 14px; font-family: var(--font); font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--footer-head); } .footer-col a, .footer-col p { display: block; margin: 0 0 9px; color: var(--footer-ink); text-decoration: none; font-size: .95rem; } .footer-col a:hover { color: var(--accent); } .disclaimer { margin-top: clamp(36px, 5vw, 56px); padding-top: 22px; border-top: 1px solid var(--footer-line); font-size: .82rem; color: var(--footer-ink); } /* ========================================================================== MICRO-MOTION — hover / press affordances (base; killed by reduced-motion) ========================================================================== */ .rev, .loc { transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); } .rev:hover, .loc:hover { transform: translateY(-5px); box-shadow: 0 26px 52px -28px var(--card-shadow); border-color: var(--divider); } .cond { transition: background-color .25s var(--ease); } .cond:hover { background: var(--accent-soft); } .cond__icon { transition: transform .28s var(--ease); } .cond:hover .cond__icon { transform: translateY(-3px) scale(1.06); } .stat { transition: transform .25s var(--ease); } .about:hover .stat { transform: none; } .btn:active { transform: translateY(0) scale(.985); } .navlink:active, .theme-toggle:active, .header-phone:active { transform: translateY(1px); } /* ========================================================================== MOTION — reveal is polish only. Resting state is always fully visible. ========================================================================== */ .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { .reveal.in { animation: reveal-in .62s var(--ease) both; } @keyframes reveal-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } /* staggered entrance for grid children as a group enters view */ .cond-grid .cond.in:nth-child(4n+2) { animation-delay: .06s; } .cond-grid .cond.in:nth-child(4n+3) { animation-delay: .12s; } .cond-grid .cond.in:nth-child(4n+4) { animation-delay: .18s; } .rev-grid .rev.in:nth-child(3n+2) { animation-delay: .08s; } .rev-grid .rev.in:nth-child(3n+3) { animation-delay: .16s; } .loc-grid .loc.in:nth-child(2) { animation-delay: .09s; } .loc-grid .loc.in:nth-child(3) { animation-delay: .18s; } .trio .vitem.in:nth-child(2) { animation-delay: .09s; } .trio .vitem.in:nth-child(3) { animation-delay: .18s; } /* section hairline rules draw in when their head reveals */ .section-head.in .rule { animation: rule-draw .7s var(--ease) .12s both; } @keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Hero entrance stagger — starts hidden, is `both`, and ENDS at opacity:1, so a settled screenshot / no-support browser simply shows everything. */ .hero__overline, .hero__name, .hero__credential, .hero__tagline, .hero__cta, .hero__portrait { animation: hero-rise .72s var(--ease) both; } .hero__overline { animation-delay: .00s; } .hero__name { animation-delay: .06s; } .hero__credential { animation-delay: .18s; } .hero__tagline { animation-delay: .24s; } .hero__cta { animation-delay: .30s; } .hero__portrait { animation: hero-portrait-in .9s var(--ease) .10s both; } .hero__rule { animation: hero-draw .7s var(--ease) .12s both; } @keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes hero-portrait-in { from { opacity: 0; transform: translateY(20px) scale(1.015); } to { opacity: 1; transform: none; } } @keyframes hero-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ONE signature scroll motion: portrait parallax on the inner . */ @supports (animation-timeline: scroll()) { .hero__portrait img { animation: hero-parallax linear both; animation-timeline: scroll(root block); animation-range: 0 120vh; } @keyframes hero-parallax { from { transform: translateY(0); } to { transform: translateY(-12%); } } } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } .reveal, .reveal.in { opacity: 1 !important; transform: none !important; } .hero__rule { transform: scaleX(1) !important; } } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 1000px) { .cond-grid { grid-template-columns: repeat(2, 1fr); } .rev-grid { grid-template-columns: repeat(2, 1fr); } .loc-grid { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr 1fr; } .about { grid-template-columns: 1fr; } .about__photo { max-width: 380px; } /* header collapses: brand + toggle + Request only */ .site-nav { display: none; } .header-phone { display: none; } .brand__sub { display: none; } .brand__name { font-size: .95rem; } .btn__full { display: none; } .btn__short { display: inline; } } /* Spine centerpiece is STATIC (unpinned, final, all captions in flow) on narrow screens — a pinned 100vh scrub is wrong on a phone. Overrides both the native and the JS-fallback enhanced paths. */ @media (max-width: 860px) { .spine-stage { grid-template-columns: 1fr; gap: 26px; padding-block: clamp(48px, 11vw, 84px) !important; } .spine-svg { max-width: 250px; } .spine-track, .spine-track.js-scrub { height: auto !important; } .spine-sticky, .spine-track.js-scrub .spine-sticky { position: static !important; height: auto !important; display: block !important; } .vert, .disc--hi, .foramen, .nerve, .emph, .spine-cap { animation: none !important; } .vert { opacity: 1 !important; transform: none !important; } .spine-caps { position: static !important; min-height: 0 !important; } .spine-cap { position: static !important; opacity: 1 !important; } } @media (max-width: 760px) { .trio { grid-template-columns: 1fr; gap: 0; } .vitem { border-top: none; padding-top: 0; margin-top: 28px; } .vitem:first-child { margin-top: 0; } .vitem { border-top: 2px solid var(--accent); padding-top: 24px; margin-top: 32px; } .contact { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; } } /* Hero: single column, portrait on top (matches the approved hero) */ @media (max-width: 720px) { .hero__inner { grid-template-columns: 1fr; grid-template-areas: "portrait" "text"; row-gap: clamp(28px, 8vw, 44px); } .hero__text { align-self: start; max-width: none; } .hero__portrait { aspect-ratio: 4 / 4.4; } .hero__rule { margin: 20px 0; } .hero__cta { margin-top: 32px; } .hero__cta .btn { flex: 1 1 auto; } } @media (max-width: 520px) { .cond-grid { grid-template-columns: 1fr; } .rev-grid { grid-template-columns: 1fr; } .stats { gap: 20px 32px; } } @media (max-width: 430px) { .theme-toggle__lbl { display: none; } .theme-toggle { padding: 8px 10px; gap: 0; } .header-cta { gap: 10px; } .site-header__inner { gap: 12px; } }