/* ============================================================ main.css — The C.A.R.E. Project Design System ============================================================ */ /* Google Fonts loaded via in each page's */ /* ============================================================ CSS Variables ============================================================ */ :root { --teal: #1A5F6E; --teal-light: #2B7A8C; --navy: #0F2B3C; --ivory: #FAF5EE; --ivory-warm: #F6EFE2; --sage: #7A9E7E; --gold: #C4A265; --gold-hover: #D4B477; --coral: #C97B6B; --lavender: #B8A9C9; --slate: #6B8FAD; --font-serif: 'Playfair Display', Georgia, serif; --font-sans: 'Source Sans Pro', system-ui, sans-serif; --max-width: 1200px; --section-pad: 96px 40px; --section-pad-sm: 64px 24px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --shadow-sm: 0 2px 12px rgba(15,43,60,.06); --shadow-md: 0 8px 30px rgba(15,43,60,.10); --shadow-lg: 0 20px 60px rgba(15,43,60,.15); --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================================ Reset & Base ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 18px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-sans); font-size: 1rem; line-height: 1.7; color: var(--navy); background-color: var(--ivory); overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { background: none; border: none; cursor: pointer; font-family: inherit; } /* ============================================================ Typography ============================================================ */ h1, h2, h3, h4 { font-family: var(--font-serif); line-height: 1.1; color: var(--navy); } h1 { font-size: clamp(40px, 5.5vw, 64px); font-weight: 700; line-height: 1.1; } h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 700; line-height: 1.2; } h3 { font-size: clamp(24px, 2.8vw, 32px); font-weight: 600; line-height: 1.3; } h4 { font-size: clamp(20px, 2.2vw, 24px); font-weight: 600; line-height: 1.4; } p { font-family: var(--font-sans); font-size: 1rem; line-height: 1.7; } small { font-family: var(--font-sans); font-size: 14px; } .eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 3px; color: var(--gold); display: block; margin-bottom: 16px; } /* ============================================================ Buttons ============================================================ */ .btn-primary { background: var(--gold); color: var(--navy); font-family: var(--font-sans); font-weight: 700; font-size: 16px; padding: 14px 32px; border-radius: var(--radius-sm); border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); } .btn-primary:hover { background: var(--gold-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(196,162,101,.35); } .btn-secondary { background: transparent; color: var(--teal); border: 1.5px solid var(--teal); font-family: var(--font-sans); font-weight: 700; font-size: 16px; padding: 13px 31px; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all var(--transition); } .btn-secondary:hover { background: var(--teal); color: #fff; } .btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.6); padding: 13px 31px; font-family: var(--font-sans); font-weight: 700; font-size: 16px; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all var(--transition); } .btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.9); } .btn-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 36px; } /* ============================================================ Layout Utilities ============================================================ */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 40px; width: 100%; } .section-inner { max-width: var(--max-width); margin: 0 auto; padding: var(--section-pad); } .section-header { margin-bottom: 56px; } .section-header.centered { text-align: center; max-width: 660px; margin: 0 auto 56px; } /* ============================================================ Header / Navigation ============================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: background var(--transition), box-shadow var(--transition); } .site-header.scrolled .main-nav { background: var(--ivory); box-shadow: var(--shadow-sm); } .site-header.scrolled .nav-item, .site-header.scrolled .nav-links a { color: var(--navy); } .site-header.scrolled .nav-logo-text, .site-header.scrolled .nav-logo-sub { color: var(--navy); } .site-header.scrolled .nav-phone { color: var(--teal); } /* Scarcity Banner */ .scarcity-banner { background: var(--coral); color: #fff; font-family: var(--font-sans); font-size: 14px; text-align: center; padding: 10px 48px; position: relative; line-height: 1.4; } .scarcity-banner strong { font-weight: 700; } .scarcity-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 20px; line-height: 1; opacity: 0.8; padding: 4px 8px; border-radius: 2px; transition: opacity var(--transition); } .scarcity-close:hover { opacity: 1; } .scarcity-banner.hidden { display: none; } /* Main Nav */ .main-nav { transition: background 0.4s ease, box-shadow 0.4s ease; padding: 0; } .nav-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 40px; height: 72px; display: flex; align-items: center; gap: 32px; } .nav-logo { display: flex; flex-direction: column; line-height: 1; text-decoration: none; flex-shrink: 0; } .nav-logo-text { font-family: var(--font-serif); font-weight: 700; font-size: 22px; color: #fff; letter-spacing: 1px; transition: color var(--transition); } .nav-logo-sub { font-family: var(--font-sans); font-weight: 600; font-size: 11px; color: rgba(255,255,255,0.8); letter-spacing: 4px; text-transform: uppercase; margin-top: 2px; transition: color var(--transition); } .site-header.scrolled .nav-logo-sub { color: rgba(15,43,60,0.7); } .nav-links { display: flex; align-items: center; gap: 4px; flex: 1; } .nav-links > li { position: relative; } .nav-item { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: rgba(255,255,255,0.92); padding: 8px 14px; border-radius: var(--radius-sm); text-decoration: none; display: flex; align-items: center; gap: 4px; transition: color var(--transition), background var(--transition); white-space: nowrap; cursor: pointer; } .nav-item:hover { color: #fff; background: rgba(255,255,255,0.1); } .site-header.scrolled .nav-item { color: var(--navy); } .site-header.scrolled .nav-item:hover { background: rgba(26,95,110,0.08); color: var(--teal); } .nav-arrow { font-size: 10px; transition: transform var(--transition); } .has-dropdown:hover .nav-arrow, .has-dropdown .nav-item[aria-expanded="true"] .nav-arrow { transform: rotate(180deg); } /* Dropdown */ .dropdown { position: absolute; top: calc(100% + 8px); left: 0; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); min-width: 220px; padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); z-index: 100; border-top: 3px solid var(--gold); } .has-dropdown:hover .dropdown, .has-dropdown .nav-item[aria-expanded="true"] + .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown li a { display: block; padding: 10px 20px; font-family: var(--font-sans); font-size: 15px; font-weight: 400; color: var(--navy); transition: color var(--transition), background var(--transition); } .dropdown li a:hover { color: var(--teal); background: var(--ivory-warm); } /* Nav Actions */ .nav-actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; } .nav-phone { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: rgba(255,255,255,0.85); text-decoration: none; transition: color var(--transition); white-space: nowrap; } .nav-phone:hover { color: var(--gold); } .nav-cta { font-size: 14px; padding: 10px 22px; white-space: nowrap; } /* Hamburger */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-left: auto; } .nav-hamburger span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: all var(--transition); } .site-header.scrolled .nav-hamburger span { background: var(--navy); } .nav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile Overlay */ .mobile-menu-overlay { display: none; position: fixed; inset: 0; background: var(--navy); z-index: 999; padding: 100px 32px 40px; overflow-y: auto; flex-direction: column; } .mobile-menu-overlay.open { display: flex; } .mobile-nav-links { display: flex; flex-direction: column; gap: 0; } .mobile-nav-links a, .mobile-nav-links button { font-family: var(--font-sans); font-weight: 600; font-size: 20px; color: #fff; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.1); text-decoration: none; display: block; text-align: left; } .mobile-sub-links { padding-left: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); } .mobile-sub-links a { font-size: 16px; color: rgba(255,255,255,0.75); border-bottom: none; padding: 10px 0; } .mobile-nav-actions { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; } .mobile-close-btn { position: absolute; top: 24px; right: 24px; color: #fff; font-size: 28px; padding: 8px; } /* Credentials Ribbon */ .credentials-ribbon { background: var(--teal); color: rgba(255,255,255,0.92); font-family: var(--font-sans); font-size: 13px; text-align: center; padding: 8px 24px; letter-spacing: 0.3px; line-height: 1.5; } /* ============================================================ Hero Section ============================================================ */ .hero { position: relative; height: 100vh; min-height: 640px; display: flex; align-items: center; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(15,43,60,0.80) 0%, rgba(26,95,110,0.55) 100%); z-index: 1; } .hero-content { position: relative; z-index: 2; max-width: var(--max-width); margin: 0 auto; padding: 0 40px; width: 100%; } .hero-content .eyebrow { color: var(--gold); } .hero-headline { font-family: var(--font-serif); font-size: clamp(40px, 5.5vw, 64px); font-weight: 700; color: #fff; line-height: 1.1; max-width: 720px; margin-bottom: 24px; } .hero-sub { font-family: var(--font-sans); font-size: 18px; color: rgba(255,255,255,0.88); max-width: 580px; line-height: 1.7; } /* ============================================================ Trust Ribbon ============================================================ */ .trust-ribbon { background: var(--teal); padding: 40px 40px; } .trust-ribbon-inner { max-width: var(--max-width); margin: 0 auto; display: flex; justify-content: space-around; align-items: center; gap: 24px; flex-wrap: wrap; } .trust-stat { text-align: center; flex: 1; min-width: 120px; } .trust-stat-number { font-family: var(--font-serif); font-size: clamp(32px, 3.5vw, 48px); font-weight: 700; color: var(--gold); display: block; line-height: 1; } .trust-stat-label { font-family: var(--font-sans); font-size: 12px; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 6px; display: block; } /* ============================================================ Empathy Section ============================================================ */ .empathy-section { background: var(--ivory-warm); padding: var(--section-pad); } .empathy-inner { max-width: 660px; margin: 0 auto; text-align: center; } .empathy-inner .eyebrow { font-size: 14px; letter-spacing: 1px; text-transform: none; font-style: italic; font-weight: 400; color: var(--coral); font-family: var(--font-serif); } .empathy-inner h2 { color: var(--navy); margin-bottom: 24px; } .empathy-inner p { font-size: 18px; color: rgba(15,43,60,0.8); margin-bottom: 32px; } .text-link { font-family: var(--font-sans); font-weight: 700; color: var(--teal); text-decoration: none; font-size: 16px; display: inline-flex; align-items: center; gap: 6px; transition: color var(--transition), gap var(--transition); } .text-link:hover { color: var(--teal-light); gap: 10px; } /* ============================================================ Modality Preview ============================================================ */ .modality-section { background: var(--ivory); padding: var(--section-pad); } .modality-section .section-inner { padding: 0; } .modality-header { margin-bottom: 48px; } .modality-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .modality-card { background: #fff; border-radius: var(--radius-md); padding: 32px 28px; border-left: 4px solid transparent; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); text-decoration: none; display: block; } .modality-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-left-color: var(--gold); } .modality-card h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--teal); margin-bottom: 12px; line-height: 1.3; } .modality-card p { font-size: 15px; color: rgba(15,43,60,0.72); line-height: 1.6; } /* ============================================================ Dr. Michelle Teaser ============================================================ */ .dr-michelle-section { background: var(--ivory-warm); padding: var(--section-pad); } .dr-michelle-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .dr-michelle-img-wrap { position: relative; } .dr-michelle-img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .dr-michelle-text .eyebrow { color: var(--gold); } .dr-michelle-text h2 { color: var(--navy); margin-bottom: 8px; } .credential-line { font-family: var(--font-sans); font-size: 14px; color: var(--teal); font-weight: 600; letter-spacing: 0.3px; margin-bottom: 24px; display: block; } .dr-michelle-text p { font-size: 17px; color: rgba(15,43,60,0.8); line-height: 1.75; margin-bottom: 28px; } /* ============================================================ 3-Step Path ============================================================ */ .steps-section { background: var(--navy); padding: var(--section-pad); } .steps-header { text-align: center; margin-bottom: 64px; } .steps-header .eyebrow { color: var(--gold); } .steps-header h2 { color: #fff; } .steps-row { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: flex-start; gap: 0; position: relative; } .step-box { flex: 1; text-align: center; padding: 0 32px; position: relative; } .step-number-circle { width: 56px; height: 56px; background: var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; font-family: var(--font-serif); font-weight: 700; font-size: 22px; color: var(--navy); position: relative; z-index: 2; } .step-connector { position: absolute; top: 28px; left: calc(50% + 28px); right: calc(-50% + 28px); height: 2px; background: rgba(196,162,101,0.35); z-index: 1; } .step-connector::after { content: '→'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--gold); font-size: 18px; background: var(--navy); padding: 0 8px; line-height: 1; } .step-box:last-child .step-connector { display: none; } .step-title { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--gold); margin-bottom: 12px; line-height: 1.3; } .step-body { font-family: var(--font-sans); font-size: 15px; color: rgba(255,255,255,0.78); line-height: 1.65; } /* ============================================================ Proof / Stats ============================================================ */ .proof-section { background: var(--ivory); padding: var(--section-pad); } .proof-inner { max-width: var(--max-width); margin: 0 auto; } .proof-header { text-align: center; margin-bottom: 16px; } .proof-header .eyebrow { color: var(--gold); } .proof-header h2 { color: var(--navy); margin-bottom: 48px; } .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 16px; } .stat-card { text-align: center; padding: 32px 24px; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .stat-number { font-family: var(--font-serif); font-size: clamp(48px, 5vw, 64px); font-weight: 700; color: var(--teal); display: block; line-height: 1; margin-bottom: 16px; } .stat-desc { font-family: var(--font-sans); font-size: 15px; color: rgba(15,43,60,0.72); line-height: 1.55; } .stats-note { text-align: center; font-style: italic; font-family: var(--font-serif); font-size: 18px; color: var(--teal); margin-top: 16px; margin-bottom: 56px; padding: 20px; } .testimonials-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 8px; } .testimonial-card { background: var(--ivory-warm); border-radius: var(--radius-md); padding: 36px 32px; border-top: 4px solid var(--gold); position: relative; } .testimonial-quote-mark { font-family: var(--font-serif); font-size: 72px; color: var(--coral); line-height: 1; position: absolute; top: 20px; left: 28px; opacity: 0.5; } .testimonial-text { font-family: var(--font-serif); font-size: 17px; font-style: italic; color: var(--navy); line-height: 1.7; padding-top: 36px; margin-bottom: 20px; } .testimonial-attribution { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--teal); text-transform: uppercase; letter-spacing: 1.5px; } /* ============================================================ Final CTA ============================================================ */ .final-cta-section { background: linear-gradient(160deg, var(--navy) 0%, #162d40 60%, #0a2233 100%); padding: var(--section-pad); text-align: center; } .final-cta-inner { max-width: 680px; margin: 0 auto; } .final-cta-section .eyebrow { color: var(--gold); } .final-cta-section h2 { color: #fff; margin-bottom: 20px; } .final-cta-section p { color: rgba(255,255,255,0.7); font-size: 17px; margin-bottom: 0; } .final-cta-section .btn-row { justify-content: center; margin-top: 36px; } /* ============================================================ Footer ============================================================ */ .site-footer { background: var(--navy); padding: 64px 40px 0; border-top: 3px solid rgba(196,162,101,0.3); } .footer-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; } .footer-col h4 { font-family: var(--font-sans); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); margin-bottom: 20px; } .footer-logo-text { font-family: var(--font-serif); font-size: 26px; font-weight: 700; color: #fff; display: block; letter-spacing: 1px; margin-bottom: 4px; } .footer-logo-sub { font-family: var(--font-sans); font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 4px; text-transform: uppercase; display: block; margin-bottom: 16px; } .footer-tagline { font-family: var(--font-serif); font-style: italic; color: rgba(255,255,255,0.6); font-size: 15px; margin-bottom: 20px; } .footer-contact-line { display: flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: 14px; color: rgba(255,255,255,0.72); margin-bottom: 8px; text-decoration: none; transition: color var(--transition); } .footer-contact-line:hover { color: var(--gold); } .footer-col p { font-family: var(--font-sans); font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.7; margin-bottom: 8px; } .footer-nav-links { display: flex; flex-direction: column; gap: 10px; } .footer-nav-links a { font-family: var(--font-sans); font-size: 14px; color: rgba(255,255,255,0.7); text-decoration: none; transition: color var(--transition); } .footer-nav-links a:hover { color: var(--gold); } .footer-pro-note { font-family: var(--font-sans); font-size: 13px; color: rgba(255,255,255,0.4); font-style: italic; margin-top: 8px; } .footer-bar { border-top: 1px solid rgba(255,255,255,0.1); padding: 20px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; max-width: var(--max-width); margin: 0 auto; } .footer-bar-copyright { font-family: var(--font-sans); font-size: 13px; color: rgba(255,255,255,0.45); } .footer-bar-links { display: flex; gap: 24px; } .footer-bar-links a { font-family: var(--font-sans); font-size: 13px; color: rgba(255,255,255,0.45); text-decoration: none; transition: color var(--transition); } .footer-bar-links a:hover { color: var(--gold); } /* ============================================================ Reveal on scroll utility ============================================================ */ .reveal-on-scroll { will-change: opacity, transform; } /* ============================================================ Responsive — 768px ============================================================ */ @media (max-width: 768px) { :root { --section-pad: var(--section-pad-sm); } html { font-size: 16px; } .nav-links, .nav-actions { display: none; } .nav-hamburger { display: flex; } .nav-inner { padding: 0 24px; } .hero-content { padding: 0 24px; } .modality-grid { grid-template-columns: 1fr 1fr; } .dr-michelle-inner { grid-template-columns: 1fr; gap: 40px; } .dr-michelle-img { aspect-ratio: 4 / 3; max-height: 380px; width: 100%; } .steps-row { flex-direction: column; gap: 32px; align-items: center; } .step-box { width: 100%; max-width: 360px; padding: 0 16px; } .step-connector { display: none; } .stats-row { grid-template-columns: 1fr; gap: 20px; } .testimonials-row { grid-template-columns: 1fr; gap: 24px; } .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; } .trust-ribbon-inner { gap: 32px; } .trust-stat { min-width: 100px; } } /* ============================================================ Responsive — 480px ============================================================ */ @media (max-width: 480px) { .modality-grid { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr; gap: 32px; } .trust-ribbon-inner { gap: 24px; } .trust-stat { min-width: 80px; flex: 0 0 40%; } .hero-content .btn-row { flex-direction: column; align-items: flex-start; } .final-cta-section .btn-row { flex-direction: column; align-items: center; } .footer-bar { flex-direction: column; text-align: center; } .footer-bar-links { gap: 16px; } .site-footer { padding: 48px 24px 0; } .scarcity-banner { padding: 10px 40px; font-size: 13px; } } /* ============================================================ Focus styles (accessibility) ============================================================ */ :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 2px; } /* ============================================================ Print ============================================================ */ @media print { .site-header, .scarcity-banner, .credentials-ribbon { position: static; } .hero { height: auto; min-height: auto; } } /* ============================================================ FORM ============================================================ */ .field-group { margin-bottom: 22px; } .field-group label { display: block; font-size: 13px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 7px; } .field-group .optional { font-weight: 400; text-transform: none; color: #888; font-size: 12px; } .field-group input, .field-group textarea { width: 100%; padding: 13px 16px; border: 1.5px solid #ddd5c8; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 16px; color: var(--navy); background: #fff; transition: border-color var(--transition), box-shadow var(--transition); outline: none; } .field-group input:focus, .field-group textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(26,95,110,0.12); } .field-group textarea { resize: vertical; min-height: 130px; } .form-note { margin-top: 14px; font-size: 13px; color: #888; line-height: 1.6; } .form-status { margin-top: 18px; padding: 14px 18px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; display: none; line-height: 1.5; } .form-status.success { background: #eaf4eb; color: #2d6a32; border-left: 3px solid var(--sage); display: block; } .form-status.error { background: #fdf0ee; color: #8b2e24; border-left: 3px solid var(--coral); display: block; } /* ============================================================ PAGE HERO (internal pages) ============================================================ */ .page-hero { background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%); color: #fff; padding: 120px 40px 80px; text-align: center; } .page-hero.split-layout { text-align: left; display: grid; grid-template-columns: 40% 60%; align-items: center; gap: 60px; padding: 100px 80px 80px; min-height: 480px; } .page-hero h1 { color: #fff; } .page-hero .eyebrow { color: var(--gold); } .page-hero-body { color: rgba(255,255,255,0.8); font-size: 17px; line-height: 1.7; margin-top: 16px; } .page-hero-portrait { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); position: relative; z-index: 1; margin-bottom: -60px; } /* ============================================================ CREDENTIALS / TIMELINE ============================================================ */ .credentials-awards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; max-width: var(--max-width); margin: 0 auto; } .credentials-list { list-style: none; display: flex; flex-direction: column; gap: 14px; } .credentials-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--navy); line-height: 1.5; } .credentials-list li::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); margin-top: 7px; flex-shrink: 0; } .credentials-list li strong { color: var(--teal); font-weight: 700; } .awards-timeline { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 20px; } .awards-timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--gold); } .award-item { padding-left: 28px; padding-bottom: 28px; position: relative; } .award-item::before { content: ''; position: absolute; left: -5px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; } .award-year { font-size: 13px; font-weight: 700; color: var(--gold); letter-spacing: 1px; margin-bottom: 4px; font-family: var(--font-sans); } .award-text { font-size: 15px; color: var(--navy); line-height: 1.5; } /* ============================================================ PHILOSOPHY / PULL QUOTE ============================================================ */ .pull-quote { font-family: var(--font-serif); font-style: italic; font-size: 28px; color: var(--gold); line-height: 1.4; text-align: center; max-width: 680px; margin: 40px auto 0; padding: 0 20px; } /* ============================================================ APPROACH MODALITY CARDS (large) ============================================================ */ .modality-grid-large { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; } .modality-card-large { background: #fff; border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(15,43,60,0.08); border-left: 4px solid transparent; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-left-color var(--transition); display: flex; flex-direction: column; text-decoration: none; } .modality-card-large:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-left-color: var(--gold); } .modality-card-img { height: 160px; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 13px; color: rgba(255,255,255,0.7); letter-spacing: 1px; transition: filter 0.3s; } .modality-card-large:hover .modality-card-img { filter: brightness(1.1); } .modality-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; gap: 10px; } .modality-card-body h3 { font-family: var(--font-serif); font-size: 18px; color: var(--navy); font-weight: 600; line-height: 1.3; } .modality-card-body p { font-size: 14px; color: #5a6e7a; line-height: 1.6; flex: 1; } .modality-rooms { display: flex; flex-wrap: wrap; gap: 6px; } .room-tag { font-size: 11px; background: rgba(26,95,110,0.08); color: var(--teal); padding: 3px 8px; border-radius: 20px; font-weight: 600; font-family: var(--font-sans); } .modality-card-link { font-size: 14px; font-weight: 700; color: var(--teal); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 12px; } .modality-card-link:hover { color: var(--gold); } /* ============================================================ EVIDENCE / RESEARCH STATS ============================================================ */ .evidence-section { background: var(--navy); padding: var(--section-pad); } .evidence-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } .evidence-text .eyebrow { color: var(--gold); } .evidence-text h2 { color: #fff; margin-bottom: 20px; } .evidence-text p { color: rgba(255,255,255,0.78); font-size: 17px; line-height: 1.75; } .evidence-stats { display: flex; flex-direction: column; gap: 16px; } .evidence-stat-box { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md); padding: 20px 24px; } .evidence-stat-number { font-family: var(--font-serif); font-size: 36px; font-weight: 700; color: var(--gold); display: block; line-height: 1; margin-bottom: 6px; } .evidence-stat-label { font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.5; } .evidence-stat-citation { font-size: 11px; color: var(--gold); font-style: italic; margin-top: 6px; display: block; opacity: 0.75; } /* ============================================================ CONTACT INFO PANEL ============================================================ */ .schedule-layout { display: grid; grid-template-columns: 60% 40%; gap: 64px; align-items: start; max-width: var(--max-width); margin: 0 auto; padding: var(--section-pad); } .contact-info-panel { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 120px; } .info-block h3 { font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; } .info-block p, .info-block address { font-size: 15px; color: #5a6e7a; line-height: 1.6; font-style: normal; } .contact-phone { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--teal); text-decoration: none; display: block; margin-bottom: 6px; } .contact-phone:hover { color: var(--gold); } .hipaa-note { background: rgba(26,95,110,0.06); border-radius: var(--radius-sm); padding: 14px 16px; border-left: 3px solid var(--teal); } .hipaa-note p { font-size: 13px; color: var(--teal); } /* ============================================================ BIO SECTION (Dr. Michelle) ============================================================ */ .bio-section { background: var(--ivory); padding: var(--section-pad); padding-top: 100px; } .bio-inner { max-width: 760px; margin: 0 auto; } .bio-inner .eyebrow { color: var(--gold); } .bio-inner h2 { margin-bottom: 24px; } .bio-inner p { font-size: 17px; color: rgba(15,43,60,0.82); line-height: 1.8; } /* ============================================================ MOBILE RESPONSIVE — NEW PAGES ============================================================ */ @media (max-width: 768px) { .page-hero { padding: 100px 24px 60px; } .page-hero.split-layout { grid-template-columns: 1fr; padding: 100px 24px 60px; text-align: center; gap: 32px; } .page-hero.split-layout .page-hero-portrait { max-width: 260px; margin: 0 auto; margin-bottom: -40px; aspect-ratio: 1 / 1; object-position: top; } .credentials-awards-grid { grid-template-columns: 1fr; gap: 48px; } .schedule-layout { grid-template-columns: 1fr; gap: 48px; padding: var(--section-pad-sm); } .contact-info-panel { position: static; } .modality-grid-large { grid-template-columns: 1fr; } .evidence-inner { grid-template-columns: 1fr; gap: 40px; } .pull-quote { font-size: 22px; } } /* ============================================================ STORY PAGE ============================================================ */ .care-letters-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 40px auto 0; max-width: var(--max-width); } .care-letter-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-md); padding: 28px 24px; text-align: center; } .care-letter { font-family: var(--font-serif); font-size: 4rem; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: 12px; display: block; } .care-letter-card h4 { color: #fff; font-size: 1rem; margin-bottom: 8px; } .care-letter-card p { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.6; } .comparison-section { padding: var(--section-pad); background: var(--ivory); } .comparison-header { max-width: 900px; margin: 0 auto 0; } .comparison-layout { display: grid; grid-template-columns: 1fr 2px 1fr; gap: 40px; max-width: 900px; margin: 40px auto 0; align-items: start; } .comparison-divider { background: var(--gold); min-height: 100%; } .comparison-col-header { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; padding-bottom: 12px; border-bottom: 2px solid currentColor; margin-bottom: 16px; } .comparison-col-header.old { color: #aaa; } .comparison-col-header.new { color: var(--teal); } .comparison-row { padding: 10px 0; font-size: 15px; line-height: 1.5; border-bottom: 1px solid rgba(15,43,60,0.06); } .comparison-col.old .comparison-row { color: #888; } .comparison-col.new .comparison-row { color: var(--navy); font-weight: 600; } .stat-cluster { display: grid; grid-template-columns: 1fr; gap: 20px; } .stat-box { background: #fff; border-radius: var(--radius-md); padding: 28px 24px; box-shadow: var(--shadow-sm); text-align: center; } .stat-box .stat-number { font-family: var(--font-serif); font-size: 3rem; font-weight: 700; color: var(--gold); display: block; line-height: 1; margin-bottom: 8px; } .stat-box .stat-label { font-size: 14px; color: var(--navy); line-height: 1.5; font-weight: 600; } .stat-box .stat-source { font-size: 11px; color: var(--teal); margin-top: 6px; display: block; } .crisis-section { padding: var(--section-pad); background: var(--ivory); } .crisis-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: start; } .crisis-text .eyebrow { color: var(--gold); } .crisis-text h2 { margin-bottom: 24px; } .crisis-text p { font-size: 17px; color: rgba(15,43,60,0.8); line-height: 1.8; margin-bottom: 20px; } /* ============================================================ SERVICES CARDS ============================================================ */ .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: var(--max-width); margin: 48px auto 0; } .service-card { background: #fff; border-radius: var(--radius-md); border: 1px solid rgba(15,43,60,0.08); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .service-card-accent { height: 4px; } .service-card-body { padding: 32px; flex: 1; display: flex; flex-direction: column; gap: 14px; } .service-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--teal); } .service-card h3 { font-family: var(--font-serif); font-size: 1.4rem; color: var(--navy); } .service-card p { font-size: 15px; color: #5a6e7a; line-height: 1.7; flex: 1; } .service-details { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding-top: 16px; border-top: 1px solid rgba(15,43,60,0.08); } .service-detail-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; } .service-detail-row .detail-label { color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; flex-shrink: 0; } .service-detail-row .detail-value { color: var(--navy); font-weight: 600; text-align: right; } .service-card-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--teal); text-decoration: none; margin-top: 8px; } .service-card-cta:hover { color: var(--gold); } /* ============================================================ AGE COHORT SECTIONS ============================================================ */ .cohort-section { padding: var(--section-pad); } .cohort-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: center; max-width: var(--max-width); margin: 0 auto; } .cohort-layout.reverse { grid-template-columns: 1.6fr 1fr; } .cohort-layout.reverse .cohort-visual { order: 2; } .cohort-layout.reverse .cohort-text { order: 1; } .cohort-visual { display: flex; flex-direction: column; gap: 20px; align-items: center; } .age-badge { background: var(--teal); color: #fff; border-radius: var(--radius-md); padding: 24px 32px; text-align: center; width: 100%; max-width: 200px; } .age-badge .age-num { font-family: var(--font-serif); font-size: 3rem; font-weight: 700; color: var(--gold); line-height: 1; display: block; } .age-badge .age-label { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.75); margin-top: 6px; display: block; } .cohort-img { width: 100%; border-radius: var(--radius-md); object-fit: cover; height: 280px; box-shadow: var(--shadow-md); } .cohort-text .eyebrow { color: var(--gold); } .cohort-text h2 { margin-bottom: 16px; } .cohort-text > p { font-size: 16px; color: rgba(15,43,60,0.8); line-height: 1.75; margin-bottom: 16px; } .cohort-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; } .cohort-tag { font-size: 12px; background: rgba(26,95,110,0.08); color: var(--teal); padding: 4px 10px; border-radius: 20px; font-weight: 600; } .cohort-modalities { margin-top: 12px; font-size: 14px; color: #5a6e7a; line-height: 1.65; } .cohort-modalities strong { color: var(--navy); display: block; margin-bottom: 4px; } .cohort-note { margin-top: 14px; font-size: 14px; color: #5a6e7a; font-style: italic; border-left: 3px solid var(--gold); padding-left: 12px; line-height: 1.6; } /* ============================================================ MODALITY SUB-PAGE ============================================================ */ .modality-hero { min-height: 380px; display: flex; align-items: center; padding: 120px 40px 80px; text-align: center; } .modality-hero-inner { max-width: 720px; margin: 0 auto; } .modality-hero .eyebrow { color: var(--gold); } .modality-hero h1 { color: #fff; } .modality-hero .page-hero-body { color: rgba(255,255,255,0.8); margin-top: 16px; } .modality-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; max-width: var(--max-width); margin: 0 auto; padding: var(--section-pad); background: var(--ivory); } .modality-content-grid h3 { font-family: var(--font-sans); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--teal); margin-bottom: 20px; } .modality-treats-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .modality-treats-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--navy); line-height: 1.5; } .modality-treats-list li::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-top: 8px; flex-shrink: 0; } .modality-session-text { font-size: 16px; color: rgba(15,43,60,0.8); line-height: 1.8; } .rooms-section { background: var(--ivory-warm); padding: 56px 40px; text-align: center; } .rooms-section h3 { font-family: var(--font-sans); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--teal); margin-bottom: 20px; } .rooms-badges { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .room-badge { font-family: var(--font-sans); font-size: 13px; font-weight: 700; background: var(--teal); color: #fff; padding: 8px 18px; border-radius: 24px; letter-spacing: 0.5px; } .modality-evidence { background: var(--navy); padding: 64px 40px; text-align: center; } .modality-evidence h3 { font-family: var(--font-sans); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); margin-bottom: 32px; } .evidence-quote { max-width: 680px; margin: 0 auto; font-size: 16px; color: rgba(255,255,255,0.82); line-height: 1.75; font-style: italic; border-left: 3px solid var(--gold); padding-left: 24px; text-align: left; } .evidence-citation { font-size: 12px; color: var(--gold); margin-top: 12px; display: block; font-style: normal; opacity: 0.8; } .modality-cta { background: var(--ivory); padding: 64px 40px; text-align: center; } .modality-cta h3 { margin-bottom: 24px; } .modality-back-link { display: block; margin-top: 20px; font-size: 14px; color: var(--teal); text-decoration: none; } .modality-back-link:hover { color: var(--gold); } /* ============================================================ MOBILE — SESSION 3 PAGES ============================================================ */ @media (max-width: 768px) { .care-letters-grid { grid-template-columns: repeat(2, 1fr); } .comparison-layout { grid-template-columns: 1fr; } .comparison-divider { display: none; } .services-grid { grid-template-columns: 1fr; } .cohort-layout, .cohort-layout.reverse { grid-template-columns: 1fr; } .cohort-layout.reverse .cohort-visual, .cohort-layout.reverse .cohort-text { order: unset; } .crisis-inner { grid-template-columns: 1fr; } .modality-content-grid { grid-template-columns: 1fr; padding: var(--section-pad-sm); } .modality-hero { padding: 100px 24px 60px; } } @media (max-width: 480px) { .care-letters-grid { grid-template-columns: 1fr 1fr; } .care-letter { font-size: 3rem; } } /* ============================================================ SPACE / ROOMS PAGE (Session 4) ============================================================ */ .rooms-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: var(--max-width); margin: 48px auto 0; } .room-card { background: #fff; border-radius: var(--radius-md); border: 1px solid rgba(15,43,60,0.08); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); } .room-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .room-card-img { height: 220px; display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(15,43,60,0.35); } .room-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; gap: 10px; } .room-card-body h3 { font-size: 1.15rem; color: var(--navy); } .room-modality-badge { display: inline-flex; align-items: center; background: rgba(26,95,110,0.08); color: var(--teal); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; width: fit-content; } .room-card-body p { font-size: 14px; color: #5a6e7a; line-height: 1.7; flex: 1; } .room-modality-link { font-size: 13px; font-weight: 700; color: var(--teal); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; margin-top: auto; } .room-modality-link:hover { color: var(--gold); } /* ============================================================ CONTACT PAGE (Session 4) ============================================================ */ .contact-info-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: var(--max-width); margin: 0 auto; padding: 56px 40px; } .contact-info-col { text-align: center; } .contact-info-col .info-icon { font-size: 2rem; margin-bottom: 12px; display: block; } .contact-info-col h3 { font-size: 1rem; color: var(--navy); margin-bottom: 8px; } .contact-info-col p, .contact-info-col a { font-size: 15px; color: #5a6e7a; line-height: 1.6; text-decoration: none; } .contact-info-col a:hover { color: var(--teal); } .contact-info-phone { font-family: var(--font-serif); font-size: 1.35rem; color: var(--teal); font-weight: 600; } .contact-form-layout { display: grid; grid-template-columns: 55% 1fr; gap: 56px; max-width: var(--max-width); margin: 0 auto; padding: var(--section-pad); } .map-embed-placeholder { background: var(--ivory-warm); border: 1.5px dashed rgba(15,43,60,0.2); border-radius: var(--radius-md); height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--navy); font-size: 16px; font-weight: 600; gap: 4px; padding: 24px; } .hours-block { margin-top: 28px; } .hours-block h4 { font-size: 1rem; color: var(--navy); margin-bottom: 12px; } .hours-row { display: flex; justify-content: space-between; font-size: 14px; color: #5a6e7a; padding: 8px 0; border-bottom: 1px solid rgba(15,43,60,0.06); } .hours-row span:last-child { font-weight: 600; color: var(--navy); } .hours-note { font-size: 13px; color: #888; margin-top: 12px; line-height: 1.6; font-style: italic; } /* ============================================================ FAQ ACCORDION (Session 4) ============================================================ */ .faq-list { display: flex; flex-direction: column; gap: 0; margin-top: 40px; } .faq-item { border-bottom: 1px solid rgba(15,43,60,0.1); } .faq-item:first-child { border-top: 1px solid rgba(15,43,60,0.1); } .faq-question { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; cursor: pointer; font-family: var(--font-sans); font-size: 17px; font-weight: 700; color: var(--navy); background: none; border: none; width: 100%; text-align: left; gap: 16px; } .faq-question:hover { color: var(--teal); } .faq-icon { font-size: 20px; color: var(--gold); font-weight: 300; flex-shrink: 0; transition: transform var(--transition); line-height: 1; } .faq-item.open .faq-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; } .faq-item.open .faq-answer { max-height: 400px; } .faq-answer-inner { padding-bottom: 20px; font-size: 16px; color: #5a6e7a; line-height: 1.75; } /* ============================================================ TEAM PAGE (Session 4) ============================================================ */ .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; } .team-placeholder-card { background: #fff; border-radius: var(--radius-md); border: 1px solid rgba(15,43,60,0.08); box-shadow: var(--shadow-sm); padding: 32px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .team-avatar { width: 120px; height: 120px; border-radius: 50%; background: var(--ivory-warm); border: 2px dashed rgba(15,43,60,0.15); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 2.5rem; color: var(--teal); overflow: hidden; flex-shrink: 0; } .team-avatar img { width: 100%; height: 100%; object-fit: cover; } .team-placeholder-card h3 { font-size: 1.1rem; color: var(--navy); } .team-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--teal); } .team-specialty { font-size: 13px; color: #888; } .text-placeholder-line { height: 12px; background: rgba(15,43,60,0.07); border-radius: 6px; width: 100%; } .text-placeholder-line.short { width: 75%; } /* ============================================================ MOBILE — SESSION 4 PAGES ============================================================ */ @media (max-width: 768px) { .rooms-grid { grid-template-columns: 1fr; } .contact-info-strip { grid-template-columns: 1fr; gap: 24px; padding: 40px 24px; } .contact-form-layout { grid-template-columns: 1fr; } .team-grid { grid-template-columns: 1fr; } }