/* ═══════════════════════════════════════════════════════ Scott Powell, MD — shared stylesheet Recreated from the Claude Design prototypes (faithful build) ═══════════════════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* overflow-x:hidden on html (not just body) stops iOS Safari from leaking a sub-pixel sliver of the page behind full-bleed sections along the edges. clip (not hidden) is used: hidden would make html/body scroll containers, which breaks position:sticky on the procedures sub-nav; clip clips the sliver without creating a scroll container, so scrolling AND sticky work. */ html { scroll-behavior: smooth; scroll-padding-top: 140px; width: 100%; max-width: 100%; overflow-x: clip; } body { font-family: 'Barlow', sans-serif; color: #0b1627; -webkit-font-smoothing: antialiased; } body.page-home { background: #fff; overflow-x: clip; width: 100%; max-width: 100%; min-width: 0; } body.page-light { background: #faf8f5; overflow-x: clip; width: 100%; max-width: 100%; } a { text-decoration: none; color: inherit; } section, nav, footer, div#main-nav { width: 100%; } /* ── FAQ accordions (native

) ── */ details > summary { list-style: none; cursor: pointer; user-select: none; } details > summary::-webkit-details-marker { display: none; } details > summary .faq-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #1a3d6e; color: #1a3d6e; font-size: 18px; font-weight: 400; line-height: 1; flex-shrink: 0; transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease; } details[open] > summary .faq-toggle { transform: rotate(45deg); background: #1a3d6e; color: #fff; } @keyframes heroIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* ══════════════ HOME PAGE — RESPONSIVE ══════════════ */ @media (max-width: 1024px) { .nav-links { display: none !important; } .nav-mobile-controls { display: flex !important; } .nav-subtitle { display: none !important; } } /* Open mobile menu = full-screen opaque overlay so the page never shows through it. app.js relocates .js-mobile-menu to so it's a true viewport-fixed overlay (inside the nav, its backdrop-filter trapped it and the box collapsed, letting links spill onto the hero). z-index sits just below the nav (999) so the bar and its close button stay clickable on top. The drawer's display is toggled inline by the hamburger JS. */ .js-mobile-menu { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; z-index: 998; padding-top: 96px !important; overflow-y: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 768px) { #main-nav .nav-logo-name { font-size: 28px !important; letter-spacing: 0.3px !important; } #main-nav > div { height: 64px !important; } } @media (max-width: 768px) { #home > div { padding-top: 40px !important; padding-bottom: 56px !important; } .hero-photo-desktop { display: none !important; } .hero-photo-mobile { display: block !important; } /* Badges as a 2x2 grid on mobile so "Clinical Professor" sits on the 2nd row next to the U.S. Soccer badge instead of orphaning onto a 3rd line. */ .hero-badges { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; } .hero-badges span { font-size: 11px !important; padding: 8px 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1.25 !important; } .hero-buttons { gap: 10px !important; flex-direction: row !important; flex-wrap: nowrap !important; } .hero-buttons a { flex: 1 !important; text-align: center !important; padding: 14px 10px !important; font-size: 12px !important; letter-spacing: 1px !important; } #home h1 { font-size: 88px !important; line-height: 0.93 !important; letter-spacing: -2px !important; } } @media (max-width: 480px) { #home h1 { font-size: 72px !important; letter-spacing: -1.5px !important; } .hero-buttons a { font-size: 12px !important; padding: 14px 12px !important; } } @media (max-width: 768px) { #home > div { flex-direction: column !important; padding: 48px 24px 60px !important; gap: 40px !important; } #home > div > div:first-child { animation: none !important; opacity: 1 !important; transform: none !important; } #home > div > div:last-child { flex: 0 0 auto !important; width: 100% !important; max-width: 400px !important; margin: 0 auto !important; animation: none !important; opacity: 1 !important; } #home h1 { font-size: 64px !important; line-height: 1 !important; } } @media (min-width: 769px) and (max-width: 1024px) { #home > div { padding: 64px 32px !important; gap: 40px !important; } #home > div > div:last-child { flex: 0 0 320px !important; } #home h1 { font-size: 72px !important; } } @media (max-width: 768px) { #home h1 { font-size: 52px !important; } #home > div > div:last-child { max-width: 320px !important; } } @media (max-width: 1024px) { #about > div { grid-template-columns: 1fr !important; gap: 40px !important; padding: 0 28px !important; } #about { padding: 64px 0 !important; } } @media (max-width: 1024px) { #procedures > div { padding: 0 20px !important; } } @media (max-width: 1024px) { #knee > div, #shoulder > div, #elbow > div, #ankle > div, #non-surgical > div, #spine > div { padding: 0 24px !important; } #knee, #shoulder, #elbow, #ankle, #non-surgical, #spine { padding: 64px 0 56px !important; } section .proc-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 640px) { section .proc-grid { grid-template-columns: 1fr !important; } } @media (max-width: 1024px) { #press { padding: 64px 0 !important; } #press > div { padding: 0 24px !important; } } @media (max-width: 768px) { .press-grid { grid-template-columns: 1fr !important; } } @media (max-width: 1024px) { #testimonials > div { padding: 0 24px !important; } #testimonials > div > div { grid-template-columns: 1fr !important; } #testimonials { padding: 64px 0 !important; } } @media (max-width: 768px) { #testimonials > div > div { grid-template-columns: 1fr !important; } .testimonials-grid { grid-template-columns: 1fr !important; } } @media (max-width: 1024px) { .testimonials-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 1024px) { #resources > div { grid-template-columns: 1fr !important; gap: 40px !important; padding: 0 24px !important; } #resources { padding: 64px 0 !important; } } @media (max-width: 1024px) { #contact { padding: 72px 0 !important; } #contact > div { padding: 0 24px !important; } #contact h2 { font-size: 40px !important; } #contact > div > div { flex-direction: column !important; align-items: stretch !important; } #contact > div > div > a { text-align: center !important; } } @media (max-width: 1024px) { footer > div { padding: 40px 24px 24px !important; } footer > div > div:first-child { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } } @media (max-width: 640px) { footer > div > div:first-child { grid-template-columns: 1fr !important; } } @media (max-width: 1024px) { .faq-wrap { padding: 28px 24px !important; } } @media (max-width: 640px) { #home h1 { font-size: 44px !important; } #home > div { padding: 36px 20px 48px !important; } } @media (min-width: 1025px) { #home { min-height: 100vh; } } @media (max-width: 1024px) { /* Mobile + iPad: hero fits its content so the bottom fade sits flush against the "Former Official Team Physician" bar — zero gap. Desktop (>=1025px) keeps min-height:100vh and is untouched. */ #home { min-height: 0 !important; } #home > div { padding-bottom: 36px !important; } /* Eliminate the band between the hero and the navy "Former Official Team Physician" bar on mobile/tablet. The .hero-bottom-fade sits in the correct layer (above the background glow, below the photo); make it tall and let it reach SOLID #0f1c32 (= the bar colour) for its bottom portion so the hero's bottom edge equals the bar with no seam. The two decorative layers that paint OVER the fade — the bright 3px edge line and the faint hatch — are what re-introduced blue at the very bottom, so hide them here. Desktop (>=1025px) keeps all three layers and is untouched. */ #home .hero-bottom-fade { height: 200px !important; background: linear-gradient(to bottom, rgba(15,28,50,0) 0%, #0f1c32 86%, #0f1c32 100%) !important; } #home .hero-edge-line, #home .hero-hatch { display: none !important; } } @media (max-width: 768px) { /* Commanding two-line hero headline on mobile. This is the last #home h1 rule in the file, so it supersedes the stacked DC export sizes (52/44px). clamp() scales with the viewport — floored high enough to stay bold on small phones, capped so the longest line ("Powell, MD") never overflows. Keeps the Scott / Powell, MD wrap and tight line-height. iPad (769-1024px) and desktop (>=1025px) are untouched. */ #home h1 { font-size: clamp(48px, 17vw, 88px) !important; line-height: 0.92 !important; letter-spacing: -1.5px !important; } } @media (max-width: 1024px) { /* Ease the eyebrow's heavy tracking below desktop so "Sports Medicine & Orthopedics — Santa Monica, CA" stops forcing an awkward wrap. "Santa Monica, CA" is held together with white-space:nowrap in the markup. */ .hero-eyebrow { letter-spacing: 2.5px !important; } } @media (max-width: 480px) { .hero-eyebrow { letter-spacing: 1.5px !important; } } @media (max-width: 640px) { #home .hero-bottom-fade { height: 120px !important; } } @media (max-width: 1024px) { #about h2 { font-size: 38px !important; } section h2 { font-size: 34px !important; } } @media (max-width: 640px) { #about h2 { font-size: 32px !important; } section h2 { font-size: 28px !important; } #contact h2 { font-size: 32px !important; } } @media (max-width: 1024px) { .nav-mobile-call { display: inline-block !important; } } @media (max-width: 1024px) { .hero-badges { flex-wrap: wrap !important; } .hero-buttons { flex-direction: row !important; align-items: center !important; flex-wrap: wrap !important; } } @media (max-width: 1024px) { /* Team-physician strip: below desktop the inline "A · B · C" list is too wide for one line and wraps mid-list, stranding a separator dot. Stack each affiliation on its own line and hide the dot separators. Desktop (>=1025px) keeps the inline dot-separated row. */ .affiliations-inner { flex-direction: column !important; gap: 6px !important; align-items: flex-start !important; } .affiliations-inner span[style*="font-size:18px"] { display: none !important; } } @media (max-width: 640px) { .hero-badges span { font-size: 10px !important; padding: 6px 10px !important; } } /* ══════════════ ABOUT (Meet Dr. Powell) — RESPONSIVE ══════════════ */ @media (max-width: 1024px) { nav .nav-links { display: none !important; } .nav-mobile-controls { display: flex !important; } .nav-subtitle { display: none !important; } } @media (max-width: 900px) { .bio-layout { grid-template-columns: 1fr !important; } .bio-sidebar { position: static !important; } .bio-sidebar-photo { display: none !important; } .bio-hero h1 { font-size: 52px !important; } } @media (max-width: 640px) { .bio-hero h1 { font-size: 40px !important; } nav .nav-logo-name { font-size: 24px !important; } } /* ══════════════ PATIENT RESOURCES — RESPONSIVE ══════════════ */ @media (max-width: 1024px) { .res-grid { grid-template-columns: 1fr !important; } .ins-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 640px) { .ins-grid { grid-template-columns: 1fr !important; } .res-hero h1 { font-size: 44px !important; } } /* ══════════════ LEGAL / POLICY PAGES ══════════════ */ .legal-wrap { max-width: 880px; margin: 0 auto; padding: 60px 40px 88px; } .legal-meta { font-family: 'Barlow', sans-serif; font-size: 14px; color: #7a8a9a; margin-bottom: 4px; } .legal-intro { font-family: 'Barlow', sans-serif; font-size: 17px; line-height: 1.8; color: #4a5568; margin: 20px 0 8px; } .legal-body h2 { font-family: 'Manrope', sans-serif; font-size: 23px; font-weight: 800; color: #0b1627; letter-spacing: -0.5px; margin: 38px 0 12px; } .legal-body h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 700; color: #0b1627; letter-spacing: 0.2px; margin: 24px 0 8px; } .legal-body p { font-family: 'Barlow', sans-serif; font-size: 16px; line-height: 1.8; color: #4a5568; margin-bottom: 16px; } .legal-body ul { margin: 0 0 16px; padding-left: 22px; } .legal-body li { font-family: 'Barlow', sans-serif; font-size: 16px; line-height: 1.75; color: #4a5568; margin-bottom: 8px; } .legal-body strong { color: #0b1627; font-weight: 600; } .legal-body em { color: #3d4a5c; } .legal-body a { color: #1a3d6e; font-weight: 600; border-bottom: 1px solid rgba(26,61,110,0.3); transition: border-color 0.2s; } .legal-body a:hover { border-color: #1a3d6e; } .legal-body hr { border: 0; border-top: 1px solid #e2d9ce; margin: 32px 0; } .legal-contact { margin-top: 16px; padding: 22px 26px; background: #fff; border-left: 3px solid #1a3d6e; border-radius: 0 3px 3px 0; box-shadow: 0 2px 16px rgba(11,22,39,0.06); } .legal-contact p { margin-bottom: 0; } .legal-divider { width: 40px; height: 3px; background: #1a3d6e; margin: 0 0 28px; } /* small medical notice callout (Contact page) */ .med-notice { background: #fff; border-left: 3px solid #1a3d6e; border-radius: 0 3px 3px 0; padding: 18px 22px; box-shadow: 0 2px 12px rgba(11,22,39,0.06); margin-top: 24px; } .med-notice p { font-family: 'Barlow', sans-serif; font-size: 14px; line-height: 1.7; color: #4a5568; margin: 0; } .med-notice strong { color: #0b1627; } /* footer legal links row */ .footer-legal { display: flex; gap: 22px; flex-wrap: wrap; } .footer-legal a { font-family: 'Barlow', sans-serif; font-size: 13px; color: rgba(255,255,255,0.3); transition: color 0.2s; } .footer-legal a:hover { color: rgba(255,255,255,0.65); } @media (max-width: 640px) { .legal-wrap { padding: 44px 22px 64px; } .legal-body h2 { font-size: 21px; } }