/* ================================================================ MAK CLINIC — style.css Google Fonts, CSS custom properties, component styles. Tailwind CDN handles utilities; this file owns everything else. ================================================================ */ /* ── Google Fonts ───────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&family=Inter:wght@400;500;600&display=swap'); /* ── Design tokens ──────────────────────────────────────────────── */ :root { --ink-900: #0E1538; --ink-700: #202060; --ink-500: #3A4480; --cyan-500: #20A8E0; --cyan-600: #1788BB; --cyan-50: #EAF6FC; --surface: #FAFAF7; --surface-elevated: #FFFFFF; --cyan-700: #0A5F82; --neutral-700: #4A4A55; --neutral-300: #D4D4DC; --neutral-100: #F2F2EE; --container: 1200px; --r-card: 8px; --r-photo: 12px; --r-pill: 999px; --shadow: 0 1px 3px rgba(14,21,56,.06); } /* ── Reset + Base ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--surface); color: var(--ink-900); font-family: 'Inter', sans-serif; font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } p { max-width: 68ch; } /* ── Accessibility ─────────────────────────────────────────────── */ .skip-link { position: absolute; top: -100%; left: 1rem; z-index: 9999; background: var(--cyan-500); color: var(--ink-900); padding: .5rem 1.25rem; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; transition: top .2s; } .skip-link:focus { top: 1rem; } *:focus-visible { outline: 2px solid var(--cyan-600); outline-offset: 2px; border-radius: 2px; } /* ── Reveal animation (progressive enhancement) ───────────────── By default, .reveal elements are fully visible so the page works without JS. script.js adds .js class to , after which the hidden/transition state kicks in and IntersectionObserver drives the reveal. ──────────────────────────────────────────────────── */ .reveal { transition: opacity .6s ease-out, transform .6s ease-out; } .html-js .reveal { opacity: 0; transform: translateY(20px); } .html-js .reveal.visible { opacity: 1; transform: translateY(0); } .html-js .reveal--d1 { transition-delay: .1s; } .html-js .reveal--d2 { transition-delay: .2s; } .html-js .reveal--d3 { transition-delay: .3s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .html-js .reveal { opacity: 1; transform: none; transition: none; } * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ── Layout helpers ────────────────────────────────────────────── */ .container { max-width: var(--container); margin: 0 auto; padding: 0 2rem; } .section { padding: 96px 0; } .section--tinted { background: var(--cyan-50); } .section--neutral{ background: var(--neutral-100); } .section--dark { background: var(--ink-900); color: #fff; } /* ── Eyebrow label ─────────────────────────────────────────────── */ .eyebrow { display: block; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-700); margin-bottom: .75rem; } /* ── Buttons ───────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.5rem; border-radius: var(--r-pill); font-size: 16px; font-weight: 600; font-family: 'Inter', sans-serif; transition: background .2s, transform .15s, border-color .2s, color .2s; cursor: pointer; text-decoration: none; white-space: nowrap; } .btn svg { width: 18px; height: 18px; stroke-width: 1.5; flex-shrink: 0; } .btn-primary { background: var(--cyan-500); color: var(--ink-900); } .btn-primary:hover { background: var(--cyan-600); transform: translateY(-1px); } .btn-outline { border: 2px solid var(--ink-900); color: var(--ink-900); } .btn-outline:hover { border-color: var(--cyan-500); color: var(--cyan-600); transform: translateY(-1px); } /* ── Navigation ────────────────────────────────────────────────── */ header { position: sticky; top: 0; z-index: 100; } .nav { background: rgba(250,250,247,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--neutral-300); height: 72px; transition: box-shadow .3s; } .nav.scrolled { box-shadow: 0 2px 16px rgba(14,21,56,.07); } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } .nav__logo img { height: 38px; width: auto; display: block; } .nav__links { display: flex; align-items: center; gap: .25rem; } .nav__links a { font-size: 15px; font-weight: 500; color: var(--ink-700); padding: .4rem .8rem; border-radius: 6px; transition: background .15s, color .15s; } .nav__links a:hover { background: var(--neutral-100); color: var(--cyan-600); } .nav__right { display: flex; align-items: center; gap: 1rem; } .nav__phone { display: inline-flex; align-items: center; gap: .4rem; background: var(--cyan-500); color: var(--ink-900); padding: .5rem 1.1rem; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; font-family: 'Inter', sans-serif; text-decoration: none; transition: background .2s, transform .15s; } .nav__phone:hover { background: var(--cyan-600); transform: translateY(-1px); } .nav__phone svg { width: 14px; height: 14px; stroke-width: 2; } .hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; border-radius: 6px; transition: background .15s; } .hamburger:hover { background: var(--neutral-100); } .hamburger span { display: block; width: 22px; height: 2px; background: var(--ink-900); border-radius: 2px; transition: all .25s; } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav__mobile { display: none; position: fixed; top: 72px; left: 0; right: 0; background: var(--surface-elevated); border-bottom: 1px solid var(--neutral-300); padding: 1.5rem 2rem 2rem; transform: translateY(-110%); visibility: hidden; transition: transform .3s ease, visibility .3s ease; z-index: 99; box-shadow: 0 8px 24px rgba(14,21,56,.08); } .nav__mobile.open { transform: translateY(0); visibility: visible; } .nav__mobile ul { display: flex; flex-direction: column; } .nav__mobile ul a { display: block; font-size: 18px; font-weight: 500; color: var(--ink-700); padding: .875rem 0; border-bottom: 1px solid var(--neutral-100); transition: color .15s; } .nav__mobile ul li:last-child a { border-bottom: none; } .nav__mobile ul a:hover { color: var(--cyan-600); } .nav__mobile__cta { margin-top: 1.5rem; } .nav__mobile__cta .btn { width: 100%; justify-content: center; } /* ── Hero ──────────────────────────────────────────────────────── */ .hero { min-height: calc(100vh - 72px); display: flex; align-items: center; padding: 80px 0; overflow: hidden; } .hero__inner { display: grid; grid-template-columns: 60fr 40fr; gap: 4rem; align-items: center; } .hero__h1 { font-family: 'Fraunces', serif; font-optical-sizing: auto; font-size: clamp(44px, 5vw, 72px); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; color: var(--ink-900); margin-bottom: 1.75rem; margin-top: .5rem; } .hero__slogans { min-height: 2.4em; position: relative; margin-bottom: 2rem; } .hero__slogan { font-family: 'Fraunces', serif; font-style: italic; font-size: 22px; font-weight: 400; color: var(--ink-500); position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity .4s ease-in-out; } .hero__slogan.active { opacity: 1; } /* Show first slogan without JS */ .hero__slogans:not(.js-rotated) .hero__slogan:first-child { opacity: 1; } .hero__ctas { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .hero__trust { font-size: 13px; font-weight: 500; color: var(--ink-500); font-family: 'Inter', sans-serif; } .hero__visual { position: relative; } .hero__photo-wrap { position: relative; padding-bottom: 16px; padding-right: 16px; } .hero__photo-bg { position: absolute; bottom: 0; right: 0; width: 90%; height: 90%; border-radius: var(--r-photo); background: var(--cyan-50); border: 1px solid rgba(32,168,224,.2); } .hero__photo { position: relative; z-index: 1; border-radius: var(--r-photo); overflow: hidden; aspect-ratio: 4/5; background: var(--neutral-100); } .hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ── Welcome / Video ───────────────────────────────────────────── */ .welcome__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .yt-lite { border-radius: var(--r-photo); overflow: hidden; border: 1px solid var(--neutral-300); aspect-ratio: 16/9; cursor: pointer; background: var(--ink-900); position: relative; } .yt-lite img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; } .yt-lite:hover img { transform: scale(1.02); } .yt-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .yt-play-btn { width: 68px; height: 68px; background: var(--cyan-500); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 24px rgba(32,168,224,.4); transition: background .2s, transform .2s; } .yt-play-btn:hover { background: var(--cyan-600); transform: scale(1.08); } .yt-play-btn svg { width: 28px; height: 28px; margin-left: 4px; } .yt-lite iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .yt-lite.playing .yt-play { display: none; } .welcome__text h2 { font-family: 'Fraunces', serif; font-optical-sizing: auto; font-size: clamp(28px, 3vw, 44px); font-weight: 600; color: var(--ink-900); line-height: 1.15; margin-bottom: 1.25rem; } .welcome__text p { color: var(--neutral-700); margin-bottom: .75rem; max-width: 52ch; } .transcript-toggle { display: inline-flex; align-items: center; gap: .3rem; font-size: 14px; font-weight: 500; color: var(--cyan-700); cursor: pointer; background: none; border: none; padding: 0; margin-top: .25rem; font-family: 'Inter', sans-serif; } .transcript-toggle:hover { text-decoration: underline; } .transcript-toggle svg { width: 14px; height: 14px; transition: transform .2s; } details[open] .transcript-toggle svg { transform: rotate(180deg); } /* ── About / Mission ───────────────────────────────────────────── */ .about__inner { max-width: 720px; margin: 0 auto; } .about__inner h2 { font-family: 'Fraunces', serif; font-optical-sizing: auto; font-size: clamp(28px, 3.5vw, 48px); font-weight: 600; color: var(--ink-900); line-height: 1.1; margin-bottom: 1.5rem; } .about__pull { font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(22px, 2.5vw, 32px); line-height: 1.35; color: var(--ink-700); border-left: 4px solid var(--cyan-500); padding: .25rem 0 .25rem 1.5rem; margin: 2rem 0; } .about__inner p { color: var(--neutral-700); margin-bottom: 1rem; max-width: 60ch; } .about__cta-link { color: var(--cyan-700); font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; transition: gap .2s; } .about__cta-link:hover { text-decoration: underline; gap: .6rem; } .about__cta-link svg { width: 16px; height: 16px; } /* ── Doctor ────────────────────────────────────────────────────── */ .doctor__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .doctor__text h2 { font-family: 'Fraunces', serif; font-optical-sizing: auto; font-size: clamp(28px, 3.5vw, 48px); font-weight: 600; color: var(--ink-900); line-height: 1.1; margin-bottom: .25rem; } .doctor__creds { font-size: 14px; font-weight: 500; color: var(--ink-500); font-family: 'Inter', sans-serif; margin-bottom: .15rem; } .doctor__bio p { color: var(--neutral-700); margin-bottom: .875rem; max-width: 52ch; } .doctor__motto { font-family: 'Fraunces', serif; font-style: italic; font-size: 26px; color: var(--ink-700); margin: 1.75rem 0 1.25rem; line-height: 1; } .doctor__motto .dot { color: var(--cyan-500); margin: 0 .3rem; } .speaker-card { background: var(--cyan-50); border: 1px solid rgba(32,168,224,.2); border-radius: var(--r-card); padding: 1rem 1.25rem; font-size: 14px; color: var(--neutral-700); margin-top: 1.25rem; max-width: none; } .speaker-card a { color: var(--cyan-700); font-weight: 600; } .speaker-card a:hover { text-decoration: underline; } .doctor__visual { position: relative; } .doctor__photo-bg { position: absolute; top: 16px; left: -16px; width: 100%; height: 100%; border-radius: var(--r-photo); background: var(--cyan-50); border: 1px solid rgba(32,168,224,.2); } .doctor__photo { position: relative; z-index: 1; border-radius: var(--r-photo); overflow: hidden; aspect-ratio: 3/4; } .doctor__photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); } /* ── Testimonials ──────────────────────────────────────────────── */ .testimonials__heading { font-family: 'Fraunces', serif; font-optical-sizing: auto; font-size: clamp(28px, 3.5vw, 48px); font-weight: 600; color: var(--ink-900); margin-bottom: 2.5rem; } .t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .t-card { background: var(--surface-elevated); border: 1px solid var(--neutral-300); border-radius: var(--r-card); padding: 1.75rem; box-shadow: var(--shadow); display: flex; flex-direction: column; } .t-card__stars { display: flex; gap: 3px; color: var(--cyan-500); margin-bottom: 1rem; } .t-card__stars svg { width: 15px; height: 15px; fill: currentColor; stroke: none; } .t-card__quote { font-family: 'Fraunces', serif; font-style: italic; font-size: 19px; line-height: 1.55; color: var(--ink-700); flex: 1; margin-bottom: 1.25rem; max-width: none; } .t-card__quote::before { content: '\201C'; } .t-card__quote::after { content: '\201D'; } .t-card__attr { font-size: 13px; font-weight: 600; color: var(--ink-900); } .t-card__via { font-size: 12px; color: var(--ink-500); margin-top: 2px; } .t-card__via a { color: var(--cyan-700); } .t-card__via a:hover { text-decoration: underline; } .t-note { font-size: 14px; color: var(--ink-500); margin-top: 1.5rem; max-width: none; } .t-note a { color: var(--cyan-700); } .t-note a:hover { text-decoration: underline; } /* ── Services ──────────────────────────────────────────────────── */ .services__top { margin-bottom: 3rem; } .services__top h2 { font-family: 'Fraunces', serif; font-optical-sizing: auto; font-size: clamp(28px, 3.5vw, 48px); font-weight: 600; color: var(--ink-900); margin-bottom: .75rem; } .services__top p { color: var(--neutral-700); max-width: 56ch; } .s-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .s-card { background: var(--surface-elevated); border: 1px solid var(--neutral-300); border-radius: var(--r-card); padding: 2rem; box-shadow: var(--shadow); transition: border-color .2s, transform .2s, box-shadow .2s; } .s-card:hover { border-color: var(--cyan-500); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(14,21,56,.08); } .s-card__icon { color: var(--cyan-500); margin-bottom: 1rem; } .s-card__icon svg { width: 32px; height: 32px; stroke-width: 1.5; } .s-card h3 { font-size: 20px; font-weight: 600; color: var(--ink-900); margin-bottom: .625rem; line-height: 1.3; font-family: 'Inter', sans-serif; } .s-card p { font-size: 15px; color: var(--neutral-700); line-height: 1.6; max-width: none; } /* ── Hours ─────────────────────────────────────────────────────── */ .hours__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } .hours__heading { font-family: 'Fraunces', serif; font-optical-sizing: auto; font-size: clamp(28px, 3.5vw, 48px); font-weight: 600; color: var(--ink-900); line-height: 1.1; margin-bottom: .5rem; } .hours__sub { font-size: 15px; color: var(--ink-500); } .hours__row { display: flex; justify-content: space-between; align-items: baseline; padding: .875rem 0; border-bottom: 1px solid var(--neutral-300); gap: 2rem; } .hours__row:first-child { border-top: 1px solid var(--neutral-300); } .hours__day { font-size: 16px; font-weight: 600; color: var(--ink-900); } .hours__time { font-size: 15px; color: var(--neutral-700); text-align: right; } .hours__row--closed .hours__day, .hours__row--closed .hours__time { color: var(--ink-500); font-weight: 400; } .hours__note { font-size: 14px; color: var(--ink-500); margin-top: 1.25rem; line-height: 1.6; max-width: none; } .hours__note a { color: var(--cyan-700); } .hours__note a:hover { text-decoration: underline; } /* ── Contact ───────────────────────────────────────────────────── */ .contact__heading { font-family: 'Fraunces', serif; font-optical-sizing: auto; font-size: clamp(28px, 3.5vw, 48px); font-weight: 600; color: var(--ink-900); margin-bottom: 2.5rem; } .contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; } .contact__row { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--neutral-300); } .contact__row:first-child { border-top: 1px solid var(--neutral-300); } .contact__icon { color: var(--cyan-500); flex-shrink: 0; margin-top: 4px; } .contact__icon svg { width: 28px; height: 28px; stroke-width: 1.5; } .contact__label { font-size: 11px; font-weight: 600; color: var(--ink-500); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .2rem; } .contact__value { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 600; color: var(--ink-900); line-height: 1.2; max-width: none; } .contact__value a { color: var(--ink-900); transition: color .15s; } .contact__value a:hover { color: var(--cyan-600); } .contact__value--sm { font-size: 20px; } .contact__sub { font-size: 13px; color: var(--ink-500); margin-top: .2rem; max-width: none; } .contact__sub a { color: var(--cyan-700); } .contact__sub a:hover { text-decoration: underline; } .socials { display: flex; gap: .6rem; padding-top: 1.5rem; } .social-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--neutral-300); display: flex; align-items: center; justify-content: center; color: var(--ink-500); transition: all .2s; } .social-btn:hover { border-color: var(--cyan-500); color: var(--cyan-500); transform: translateY(-1px); } .social-btn svg { width: 16px; height: 16px; } .contact-form h3 { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 600; color: var(--ink-900); margin-bottom: 1.5rem; } .form-group { margin-bottom: 1.1rem; } .form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-700); margin-bottom: .35rem; } .form-group input, .form-group textarea { width: 100%; padding: .7rem 1rem; border: 1px solid var(--neutral-300); border-radius: var(--r-card); font-family: 'Inter', sans-serif; font-size: 16px; color: var(--ink-900); background: var(--surface-elevated); transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--cyan-500); box-shadow: 0 0 0 3px rgba(32,168,224,.28); } .form-group input.invalid { border-color: #c53030; } .form-group textarea { min-height: 112px; resize: vertical; } .form-note { font-size: 12px; color: var(--ink-500); margin-top: .5rem; max-width: none; } .form-error { font-size: 13px; color: #c53030; margin-top: .25rem; } .form-confirm { font-size: 14px; color: var(--cyan-600); margin-top: .75rem; font-weight: 500; } .contact__map { margin-top: 3rem; border-radius: var(--r-photo); overflow: hidden; border: 1px solid var(--neutral-300); } .contact__map iframe { width: 100%; height: 340px; display: block; border: none; } /* ── Legal ─────────────────────────────────────────────────────── */ .legal__inner { max-width: 860px; } .legal__inner h2 { font-family: 'Fraunces', serif; font-size: 36px; font-weight: 600; color: var(--ink-900); margin-bottom: .75rem; } .legal__intro { color: var(--neutral-700); max-width: 65ch; margin-bottom: 2rem; } .legal__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; } .legal__list { display: flex; flex-direction: column; } .legal__list li { font-size: 15px; color: var(--neutral-700); padding: .625rem 0 .625rem 1.25rem; border-bottom: 1px solid var(--neutral-300); position: relative; line-height: 1.55; max-width: none; } .legal__list li:first-child { border-top: 1px solid var(--neutral-300); } .legal__list li::before { content: '—'; position: absolute; left: 0; color: var(--cyan-500); } .legal__links { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; } .legal__links a { font-size: 14px; font-weight: 500; color: var(--cyan-700); } .legal__links a:hover { text-decoration: underline; } /* ── Footer ────────────────────────────────────────────────────── */ .footer { background: var(--ink-900); color: #fff; padding: 64px 0 0; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4rem; padding-bottom: 3rem; } .footer__logo img { height: 34px; width: auto; margin-bottom: 1.25rem; opacity: .9; } .footer__tagline { font-size: 15px; color: rgba(255,255,255,.45); line-height: 1.7; max-width: 30ch; } .footer__col-heading { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.55); margin-bottom: 1rem; font-family: 'Inter', sans-serif; } .footer__col ul { display: flex; flex-direction: column; gap: .5rem; } .footer__col ul a { font-size: 15px; color: rgba(255,255,255,.55); transition: color .15s; } .footer__col ul a:hover { color: #fff; } .footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 1.25rem 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; } .footer__copy { font-size: 13px; color: rgba(255,255,255,.5); } .footer__access { font-size: 13px; color: rgba(255,255,255,.5); } .footer__access a { color: rgba(255,255,255,.65); } .footer__access a:hover { color: rgba(255,255,255,.7); text-decoration: underline; } /* ── Mobile sticky CTA bar ─────────────────────────────────────── */ .mob-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: var(--ink-900); height: 64px; transform: translateY(100%); transition: transform .3s ease; } .mob-bar.visible { transform: translateY(0); } .mob-bar__inner { display: flex; height: 100%; } .mob-bar__call { flex: 0 0 60%; display: flex; align-items: center; justify-content: center; gap: .4rem; background: var(--cyan-500); color: var(--ink-900); font-size: 15px; font-weight: 700; font-family: 'Inter', sans-serif; text-decoration: none; transition: background .2s; } .mob-bar__call:hover { background: var(--cyan-600); } .mob-bar__call svg { width: 18px; height: 18px; stroke-width: 2; } .mob-bar__dir { flex: 0 0 40%; display: flex; align-items: center; justify-content: center; gap: .4rem; color: #fff; border-left: 1px solid rgba(255,255,255,.12); font-size: 14px; font-weight: 600; font-family: 'Inter', sans-serif; text-decoration: none; transition: background .2s; } .mob-bar__dir:hover { background: rgba(255,255,255,.06); } .mob-bar__dir svg { width: 16px; height: 16px; stroke-width: 2; } /* ── Responsive ────────────────────────────────────────────────── */ @media (max-width: 1024px) { .hero__inner { gap: 2.5rem; } .doctor__inner { gap: 3rem; } } @media (max-width: 768px) { .section { padding: 64px 0; } body { padding-bottom: 64px; } .nav__links, .nav__phone { display: none; } .hamburger { display: flex; } .nav__mobile { display: block; } .hero__inner { grid-template-columns: 1fr; } .hero__visual { max-width: 300px; margin: 0 auto; } .hero__ctas .btn { width: 100%; justify-content: center; } .hero__ctas { flex-direction: column; } .welcome__inner { grid-template-columns: 1fr; } .doctor__inner { grid-template-columns: 1fr; } .doctor__visual { order: -1; max-width: 300px; margin: 0 auto; } .hours__inner { grid-template-columns: 1fr; gap: 2.5rem; } .contact__inner { grid-template-columns: 1fr; } .t-grid { grid-template-columns: 1fr; } .s-grid { grid-template-columns: 1fr; } .legal__cols { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; gap: 2rem; } .mob-bar { display: block; } } @media (max-width: 480px) { .container { padding: 0 1rem; } } /* ============================================================ privacy.html — additions ============================================================ */ /* TOC */ .toc { margin: 2rem 0 3rem; padding: 1.25rem 1.5rem; background: var(--surface-elevated); border: 1px solid var(--neutral-300); border-left: 3px solid var(--cyan-500); border-radius: 8px; } .toc h2 { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-500); margin: 0 0 .75rem; } .toc ol { counter-reset: toc; list-style: none; margin: 0; padding-left: 0; } .toc ol li { counter-increment: toc; padding: .375rem 0; position: relative; padding-left: 2rem; } .toc ol li::before { content: counter(toc); position: absolute; left: 0; top: .375rem; color: var(--cyan-500); font-weight: 600; font-size: .875rem; } .toc ol li a { color: var(--ink-900); text-decoration: none; transition: color 150ms ease; } .toc ol li a:hover { color: var(--cyan-600); } .toc ol li a:hover::after { content: " \2192"; } /* Meta line under H1 */ .legal__inner .meta { color: var(--ink-500); font-size: .875rem; margin: 0 0 2rem; } /* Back link */ .back-link { display: inline-block; margin: 0 0 2rem; font-size: .9rem; color: var(--cyan-700); font-weight: 500; } .back-link:hover { text-decoration: underline; } /* Intro block spacing */ .privacy-intro { margin: 0 0 2.5rem; display: flex; flex-direction: column; gap: .75rem; } /* Prose sections */ .legal__inner section { margin-top: 3rem; } .legal__inner section h3 { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 .5rem; color: var(--ink-700); } .legal__inner section p { margin-bottom: 1rem; max-width: 100%; } /* Verbatim bullet lists */ .privacy-list { list-style: disc; padding-left: 1.5rem; margin: .75rem 0 1rem; } .privacy-list li { padding: .2rem 0; } /* Addresses */ .privacy-address { font-style: normal; margin: 1rem 0 1.5rem; line-height: 1.8; } /* Effective date line */ .privacy-effective { font-weight: 600; margin-top: 2rem; } /* ─── Legal section additions (P2) ─────────────────── */ .legal__frameworks { margin: 1rem 0 1.5rem; } .legal__callout { background: var(--surface-elevated); border: 1px solid var(--neutral-300); border-radius: 8px; padding: 1rem 1.25rem; margin: 1.5rem 0; font-size: .95rem; } .legal__callout p { margin: 0 0 .5rem; } .legal__callout p:last-child { margin-bottom: 0; } .legal__notice-cta { display: inline-flex; margin-top: 1.5rem; } /* Print */ @media print { .nav, .nav__mobile, .mob-bar, .footer, .skip-link, .toc, .back-link { display: none !important; } body { background: #fff; color: #000; } .section, .section--neutral { padding: 0 !important; background: #fff !important; } .container, .legal__inner { max-width: 100% !important; padding: 0 !important; } h1, h2, h3 { color: #000 !important; page-break-after: avoid; } a { color: #000 !important; text-decoration: underline; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; } } /* ============================================================ privacy.html — visual polish (Q2) ============================================================ */ /* H1 scale-up */ .legal__inner h1 { font-family: 'Fraunces', serif; font-optical-sizing: auto; font-size: clamp(36px, 4vw, 56px); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: var(--ink-900); margin: .5rem 0 .75rem; } /* Cyan accent rule under H1 */ .legal__accent-rule { width: 48px; height: 3px; background: var(--cyan-500); margin: 0 0 1.5rem; } /* Slim photo banner */ .privacy-banner { position: relative; width: 100%; height: 280px; overflow: hidden; } .privacy-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .privacy-banner__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,21,56,.55) 0%, rgba(14,21,56,.75) 100%); } .privacy-banner--abstract .privacy-banner__overlay { background: linear-gradient(180deg, rgba(14,21,56,.20) 0%, rgba(14,21,56,.35) 100%); } @media (max-width: 768px) { .privacy-banner { height: 180px; } } /* Section dividers */ .legal__section-divider { border: 0; border-top: 1px solid var(--neutral-300); max-width: 80%; margin: 3rem auto; } /* Section eyebrow labels */ .legal__section-eyebrow { display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-600); margin-bottom: .375rem; } /* Print: hide banner */ @media print { .privacy-banner { display: none !important; } }