/* ========================================================================= Anchor of Hope Psychiatry — Design System Palette: deep anchor navy, harbor teal, hopeful gold, warm linen cream. Type: Fraunces (display, warm serif) + Inter (body/UI, clean sans). Signature: a hand-drawn "anchor line" — a single rope/wave stroke that ties the hero, section dividers and footer together, echoing the brand name without leaning on a literal anchor icon everywhere. ========================================================================= */ :root { /* ======================================================================= Anchor of Hope — brand palette (warm terracotta / dusty blue / sage) ======================================================================= */ --terracotta: #c96f5b; --terracotta-deep: #a6543f; --terracotta-soft: #f3e3dd; --dusty-blue: #6d8fa6; --dusty-blue-deep: #4f6e82; --dusty-blue-soft: #e7eef3; --sage: #8baa9b; --sage-deep: #6c8b7c; --sage-soft: #e9f0ec; --slate-blue: #355c6b; --slate-blue-deep: #24414d; --cream: #faf6f1; --cream-deep: #f2e7d9; --white: #ffffff; --charcoal: #2f2f2f; --charcoal-soft: #6b6863; /* Warm gradient for small interactive/active states (buttons, avatars, selected calendar days, chat bubbles, active pagination). */ --brand-gradient: linear-gradient(120deg, var(--terracotta) 0%, var(--terracotta-deep) 100%); /* Deep, quiet gradient for large dark surfaces (footer, admin rail, page headers, the final CTA band). */ --dark-gradient: linear-gradient(160deg, var(--slate-blue) 0%, var(--slate-blue-deep) 100%); /* ---- Back-compat aliases so existing utility classes keep working ---- */ --coral: var(--terracotta); --coral-deep: var(--terracotta-deep); --amber: var(--sage); --maroon: var(--charcoal); --maroon-deep: var(--slate-blue-deep); --slate-teal: var(--dusty-blue); --slate-teal-soft: var(--dusty-blue-soft); --ink: var(--charcoal); --ink-soft: var(--charcoal-soft); --navy: var(--dusty-blue); --navy-deep: var(--slate-blue-deep); --teal: var(--slate-teal); --teal-soft: var(--slate-teal-soft); --gold: var(--sage); --gold-soft: var(--sage-soft); --linen: var(--cream); --linen-deep: var(--cream-deep); --font-display: "Fraunces", "Georgia", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --radius-lg: 1.25rem; --radius-md: 0.75rem; --shadow-soft: 0 20px 45px -20px rgba(53, 92, 107, 0.25); --shadow-card: 0 12px 30px -18px rgba(53, 92, 107, 0.18); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--ink); background-color: var(--linen); -webkit-font-smoothing: antialiased; } /* ========================================================================= Readability for older adult visitors — this practice serves many elderly patients, so text runs noticeably larger and bolder than a typical marketing site. Scaling the root font-size (rather than just ) is what makes this stick everywhere: every rem-based size in this stylesheet AND in Bootstrap itself (headings, buttons, badges, form fields, icons, spacing) grows proportionally from this one line. ========================================================================= */ html { font-size: 130%; /* ~20.8px base instead of the 16px browser default — slightly larger, site-wide */ } body { font-weight: 500; /* medium instead of regular — reads darker at a glance */ line-height: 1.65; } p, li, label, .form-control, .form-select, .nav-link, .dropdown-item, .chat-bubble, .service-card p, .app-list-row p { font-weight: 500; } h1, h2, h3, h4, h5, h6, .display-font { font-weight: 700; } h1, h2, h3, h4, .display-font { font-family: var(--font-display); color: var(--ink); letter-spacing: -0.01em; } .btn { font-weight: 700; } small, .small { font-weight: 500; } .text-teal { color: var(--teal) !important; } .text-gold { color: var(--gold) !important; } .text-coral { color: var(--coral) !important; } .text-terracotta { color: var(--terracotta) !important; } .text-sage { color: var(--sage-deep) !important; } .text-navy { color: var(--slate-blue) !important; } .text-ink-soft { color: var(--ink-soft) !important; } .bg-linen { background-color: var(--linen) !important; } .bg-linen-deep { background-color: var(--linen-deep) !important; } .bg-navy { background-color: var(--navy) !important; } .bg-navy-deep { background-color: var(--navy-deep) !important; } .bg-teal-soft { background-color: var(--teal-soft) !important; } .bg-sage-soft { background-color: var(--sage-soft) !important; } a { color: var(--teal); } a:hover { color: var(--navy); } /* ---------- Breadcrumbs (light surfaces — page-hero) ---------- */ .breadcrumb { font-size: .82rem; } .breadcrumb-item + .breadcrumb-item::before { color: rgba(53,92,107,.35); } .breadcrumb a { color: var(--ink-soft); text-decoration: none; font-weight: 600; } .breadcrumb a:hover { color: var(--terracotta); } .breadcrumb-item.active { color: var(--ink); font-weight: 600; } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dusty-blue-deep); } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--terracotta); display: inline-block; border-radius: 2px; } /* On dark surfaces (the CTA band) lighten the eyebrow so it still reads clearly against the deep slate-blue background. page-hero is now a light cream surface (see below), so it uses the default dark eyebrow. */ .cta-band .eyebrow { color: rgba(255,255,255,.85); } .cta-band .eyebrow::before { background: var(--sage); } /* ---------- Buttons ---------- */ .btn { font-weight: 600; border-radius: 999px; padding: .7rem 1.6rem; transition: all .25s ease; } .btn-primary-brand { background-color: var(--terracotta); border-color: var(--terracotta); color: var(--white); } .btn-primary-brand:hover { background-color: var(--terracotta-deep); border-color: var(--terracotta-deep); color: var(--white); transform: translateY(-2px); } .btn-outline-brand { background: transparent; border: 1.5px solid var(--white); color: var(--white); } .btn-outline-brand:hover { background: var(--white); color: var(--slate-blue-deep); transform: translateY(-2px); } /* Dark-outline variant for use on light/cream surfaces (e.g. the home hero) */ .btn-outline-ink { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); } .btn-outline-ink:hover { background: var(--ink); border-color: var(--ink); color: var(--white); transform: translateY(-2px); } .btn-navy { background-color: var(--navy); border-color: var(--navy); color: var(--white); } .btn-navy:hover { background-color: var(--dusty-blue-deep); border-color: var(--dusty-blue-deep); color: var(--white); transform: translateY(-2px); } /* Dusty-blue outline variant — the hero's secondary action, echoing a calm "read more" tone next to the terracotta primary CTA. */ .btn-outline-navy { background: transparent; border: 1.5px solid var(--dusty-blue); color: var(--dusty-blue-deep); } .btn-outline-navy:hover { background: var(--dusty-blue); border-color: var(--dusty-blue); color: var(--white); transform: translateY(-2px); } /* Bootstrap's default .btn-primary/.text-primary/.bg-primary ship as generic blue — override so every button across the site (public pages and the admin/app shell) lands on-brand. */ .btn-primary { --bs-btn-color: var(--white); --bs-btn-bg: var(--terracotta); --bs-btn-border-color: var(--terracotta); --bs-btn-hover-color: var(--white); --bs-btn-hover-bg: var(--terracotta-deep); --bs-btn-hover-border-color: var(--terracotta-deep); --bs-btn-active-color: var(--white); --bs-btn-active-bg: var(--terracotta-deep); --bs-btn-active-border-color: var(--terracotta-deep); --bs-btn-disabled-bg: var(--terracotta); --bs-btn-disabled-border-color: var(--terracotta); background-color: var(--terracotta) !important; border-color: var(--terracotta) !important; color: var(--white) !important; border-radius: 999px; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--terracotta-deep) !important; border-color: var(--terracotta-deep) !important; color: var(--white) !important; } .text-primary { color: var(--terracotta) !important; } .bg-primary { background-color: var(--terracotta) !important; } .btn-outline-primary { border-color: var(--terracotta) !important; color: var(--terracotta) !important; } .btn-outline-primary:hover { background-color: var(--terracotta) !important; border-color: var(--terracotta) !important; color: var(--white) !important; } /* ---------- Navbar ---------- */ .site-navbar { background-color: rgba(250, 246, 239, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(53, 92, 107, 0.1); transition: box-shadow .3s ease; } .site-navbar.is-scrolled { box-shadow: 0 8px 24px -18px rgba(53,92,107,.35); } .navbar-brand-mark { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--ink) !important; line-height: 1.1; } .navbar-brand-mark span { display:block; font-family: var(--font-body); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color: var(--teal); font-weight:600; } .site-navbar .nav-link { font-weight: 600; color: var(--ink); padding: .5rem 1rem !important; position: relative; /* Fixed px (not rem) so this stays a normal, comfortable menu size regardless of the site-wide 130% root font scaling used elsewhere. */ font-size: 16px; } .site-navbar .nav-link.active, .site-navbar .nav-link:hover { color: var(--teal); } .site-navbar .nav-link.active::after { content:""; position:absolute; left:1rem; right:1rem; bottom:.1rem; height:2px; background: var(--gold); border-radius:2px; } /* ---------- Hero ---------- */ /* Light, airy hero on a warm cream ground with a soft blush blob cradling the photo, plus faint botanical line-art — echoes a calm therapy-practice mockup while keeping the brand's terracotta / dusty-blue / sage palette. */ .hero { position: relative; overflow: hidden; background: var(--cream); color: var(--ink); padding-top: 8.5rem; padding-bottom: 4.5rem; } .hero .anchor-line { position: absolute; inset: 0; opacity: .35; pointer-events: none; } .hero h1 { color: var(--ink); font-size: clamp(2.35rem, 4.4vw, 3.55rem); line-height: 1.14; letter-spacing: -0.015em; } .hero .lead { color: var(--ink-soft); font-size: 1.15rem; max-width: 46ch; } /* Generic pill badge — still used on standalone page heroes (e.g. error pages) even though the homepage hero now leads straight with the headline. */ .hero-badge { display:inline-flex; align-items:center; gap:.6rem; background: var(--white); border: 1px solid rgba(53,92,107,.12); box-shadow: 0 8px 20px -14px rgba(53,92,107,.3); padding: .5rem 1rem; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--ink); } .hero-badge .dot { width:8px; height:8px; border-radius:50%; background: var(--terracotta); box-shadow: 0 0 0 4px rgba(201,111,91,.22); } /* Faint fern/leaf line-art tucked along the hero's left edge — a quiet botanical signature that doesn't compete with the copy. */ .hero-leaf { position: absolute; z-index: 0; pointer-events: none; color: var(--terracotta); opacity: .16; } .hero-leaf-left { top: 14%; left: -1.5rem; width: 170px; height: auto; transform: rotate(-8deg); } @media (max-width: 991.98px) { .hero-leaf { display: none; } } /* Large soft asymmetric blob sitting behind the hero photo, echoing the mockup's blush backdrop shape — sized and positioned to wrap around the whole image column rather than just peek from a corner. */ .hero-blob { position: absolute; top: 1rem; right: -6%; width: clamp(420px, 46vw, 700px); height: clamp(420px, 46vw, 700px); background: linear-gradient(155deg, #f6dccd 0%, var(--cream-deep) 100%); border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; z-index: 0; pointer-events: none; } @media (max-width: 991.98px) { .hero-blob { opacity: .7; width: clamp(320px, 78vw, 520px); height: clamp(320px, 78vw, 520px); } } /* ---------- Hero photo ---------- */ .hero-photo-wrap { position: relative; z-index: 1; } .hero-photo { border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); max-height: 460px; } /* ---------- Hero "now welcoming" note + trust chips ---------- */ .hero-note { display: flex; align-items: center; gap: .55rem; font-size: .9rem; font-weight: 600; color: var(--dusty-blue-deep); } .hero-note .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--terracotta); box-shadow: 0 0 0 4px rgba(201,111,91,.18); flex: none; } .hero-stats-inline { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; } .hero-stat-chip { display: flex; align-items: center; gap: .6rem; background: var(--white); border: 1px solid rgba(53,92,107,.1); box-shadow: var(--shadow-card); border-radius: 999px; padding: .55rem 1.1rem .55rem .65rem; } .hero-stat-chip .hero-stat { font-family: var(--font-display); font-weight: 700; font-size: .92rem; letter-spacing: -0.02em; color: var(--terracotta-deep); background: var(--terracotta-soft); width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; } .hero-stat-chip span { font-size: .8rem; font-weight: 600; color: var(--ink-soft); line-height: 1.2; } .hero-stat-chip.hero-stat-chip-phone .hero-stat { background: var(--dusty-blue-soft); color: var(--dusty-blue-deep); font-size: 1rem; } .hero-stat-chip a { color: var(--slate-blue); font-weight: 700; text-decoration: none; } .hero-stat-chip a:hover { text-decoration: underline; } /* Small phone line under the hero CTAs */ .hero-phone-note { display: flex; align-items: center; gap: .55rem; font-size: .88rem; font-weight: 600; color: var(--ink-soft); } .hero-phone-note i { color: var(--terracotta); font-size: .95rem; } .hero-phone-note a { color: var(--slate-blue); font-weight: 700; text-decoration: none; } .hero-phone-note a:hover { text-decoration: underline; } /* ---------- Trust strip (4-up icon row under the hero) ---------- */ .trust-strip { background: var(--white); } .trust-icon { width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } .trust-icon-terracotta { background: var(--terracotta-soft); color: var(--terracotta-deep); } .trust-icon-navy { background: var(--dusty-blue-soft); color: var(--dusty-blue-deep); } .trust-icon-sage { background: var(--sage-soft); color: var(--sage-deep); } .trust-icon-gold { background: var(--cream-deep); color: var(--terracotta-deep); } /* Divider used between sections — echoes a taut anchor rope */ .section-divider { height: 46px; width: 100%; display:block; margin-top:-1px; } /* ---------- Cards ---------- */ .service-card { background: var(--white); border-radius: var(--radius-lg); padding: 2rem 1.75rem; height: 100%; border: 1px solid rgba(53,92,107,.08); box-shadow: var(--shadow-card); transition: transform .3s ease, box-shadow .3s ease; } .service-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -20px rgba(53,92,107,.3); } .service-icon { width: 56px; height: 56px; border-radius: 16px; display:flex; align-items:center; justify-content:center; background: var(--teal-soft); color: var(--teal); font-size: 1.5rem; margin-bottom: 1.25rem; } .service-card:nth-child(3n+2) .service-icon { background: var(--gold-soft); color: var(--sage-deep); } .service-card:nth-child(3n) .service-icon { background: var(--terracotta-soft); color: var(--terracotta-deep); } .value-card { border-left: 3px solid var(--terracotta); padding-left: 1.25rem; } .testimonial-card { background: var(--white); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-card); height: 100%; } .testimonial-card .quote-mark { font-family: var(--font-display); font-size: 3rem; color: var(--terracotta); line-height: .5; display:block; margin-bottom:1rem; } .faq-accordion .accordion-item { border: none; border-bottom: 1px solid rgba(53,92,107,.12); background: transparent; } .faq-accordion .accordion-button { font-family: var(--font-display); font-weight:600; color: var(--ink); background: transparent; padding: 1.25rem 0; } .faq-accordion .accordion-button:not(.collapsed) { color: var(--dusty-blue-deep); background: transparent; box-shadow:none; } .faq-accordion .accordion-button:focus { box-shadow: none; } .faq-accordion .accordion-body { padding: 0 0 1.5rem; color: var(--ink-soft); } /* ---------- CTA band ---------- */ .cta-band { background: var(--dark-gradient); color: var(--white); border-radius: var(--radius-lg); padding: 3rem; position: relative; overflow: hidden; } /* ---------- Contact ---------- */ .contact-panel { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: 2.25rem; } .form-control, .form-select { border-radius: .65rem; border: 1.5px solid #e3ddd0; padding: .7rem .9rem; } .form-control:focus, .form-select:focus { border-color: var(--dusty-blue); box-shadow: 0 0 0 .2rem rgba(109,143,166,.18); } .form-label { font-weight: 600; color: var(--ink); font-size: .92rem; } .seo-fieldset { background: var(--cream); border: 1.5px solid #e3ddd0; border-radius: var(--radius-lg); padding: 1.5rem 1.5rem 1.25rem; } /* ========================================================================= Footer — warm, light "world-class" redesign. A cream/white surface with terracotta / dusty-blue / sage accents (matching the brand system above), a botanical line-art motif echoing the hero, a service-icon grid, and a three-part reassurance + booking CTA strip above the legal bar. Shared by every page via partials.footer, so this styling is site-wide. ========================================================================= */ .site-footer { position: relative; overflow: hidden; background: var(--white); color: var(--ink-soft); margin-top: -1px; /* sit flush under the wave divider */ } .site-footer a { color: var(--ink-soft); text-decoration: none; transition: color .2s ease; } .site-footer a:hover { color: var(--terracotta); } .footer-decor { position: absolute; width: 190px; height: auto; color: var(--terracotta); opacity: .12; pointer-events: none; z-index: 0; } .footer-decor-left { left: -2rem; bottom: 1rem; } .footer-decor-right { right: -2rem; top: 6rem; } @media (max-width: 767.98px) { .footer-decor { display: none; } } .footer-brand { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--ink); position: relative; z-index: 1; } .footer-tagline { max-width: 34ch; font-size: .92rem; color: var(--ink-soft); position: relative; z-index: 1; } .footer-social-icon { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--terracotta-soft); color: var(--terracotta-deep) !important; font-size: .95rem; transition: transform .2s ease, box-shadow .2s ease; position: relative; z-index: 1; } .footer-social-icon:hover { transform: translateY(-3px); box-shadow: 0 10px 20px -10px rgba(53,92,107,.35); } .footer-social-icon-terracotta { background: var(--terracotta-soft); color: var(--terracotta-deep) !important; } .footer-social-icon-sage { background: var(--sage-soft); color: var(--sage-deep) !important; } .footer-social-icon-navy { background: var(--dusty-blue-soft); color: var(--dusty-blue-deep) !important; } .footer-social-icon-terracotta-deep { background: var(--slate-blue); color: var(--white) !important; } .footer-heading { font-family: var(--font-display); font-weight: 600; color: var(--ink); margin-bottom: 1.1rem; padding-bottom: .65rem; position: relative; } .footer-heading::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 30px; background: var(--terracotta); border-radius: 2px; } .footer-link-list { display: flex; flex-direction: column; gap: .65rem; font-size: .92rem; } .footer-link-list a { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink-soft); } .footer-link-list a i { font-size: .7rem; color: var(--sage-deep); } .footer-link-list a:hover { color: var(--terracotta); } .footer-service-list { display: flex; flex-direction: column; gap: .7rem; font-size: .88rem; } .footer-service-list a { display: flex; align-items: center; gap: .65rem; color: var(--ink-soft); font-weight: 600; } .footer-service-list a:hover { color: var(--terracotta); } .footer-service-icon { width: 32px; height: 32px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; } .footer-service-icon-terracotta { background: var(--terracotta-soft); color: var(--terracotta-deep); } .footer-service-icon-navy { background: var(--dusty-blue-soft); color: var(--dusty-blue-deep); } .footer-service-icon-sage { background: var(--sage-soft); color: var(--sage-deep); } .footer-service-icon-dark { background: var(--charcoal); color: var(--white); } .footer-service-icon-terracotta-deep { background: var(--terracotta-deep); color: var(--white); } .footer-service-icon-navy-deep { background: var(--slate-blue); color: var(--white); } .footer-contact-list { display: flex; flex-direction: column; gap: 1rem; font-size: .9rem; } .footer-contact-list li { display: flex; align-items: flex-start; gap: .7rem; } .footer-contact-list i { color: var(--terracotta); font-size: 1rem; margin-top: .15rem; flex: none; } .footer-contact-list a { color: var(--ink-soft); font-weight: 600; } .footer-contact-list a:hover { color: var(--terracotta); } /* ---------- Reassurance / booking strip ---------- */ .footer-cta-strip { position: relative; z-index: 1; background: var(--terracotta-soft); border-radius: var(--radius-lg); padding: 1.75rem 2rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .footer-cta-item { display: flex; align-items: center; gap: .9rem; flex: 1 1 220px; } .footer-cta-quote p { font-family: var(--font-display); font-style: italic; color: var(--ink); font-size: .98rem; line-height: 1.5; } .footer-cta-action { flex: 1 1 320px; } .footer-cta-icon { width: 46px; height: 46px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--white); color: var(--terracotta-deep); font-size: 1.15rem; box-shadow: var(--shadow-card); } .footer-cta-icon-quote { color: var(--dusty-blue-deep); } .footer-cta-icon-navy { color: var(--slate-blue); } .footer-cta-title { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.02rem; } .footer-cta-sub { font-size: .88rem; color: var(--ink-soft); } .footer-cta-btn { white-space: nowrap; margin-left: auto; } .footer-cta-divider { width: 1px; align-self: stretch; background: rgba(53,92,107,.15); } @media (max-width: 991.98px) { .footer-cta-strip { padding: 1.5rem; } .footer-cta-divider { display: none; } .footer-cta-btn { margin-left: 0; margin-top: .75rem; } } /* ---------- Legal bottom bar ---------- */ .footer-bottom { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; border-top: 1px solid rgba(53,92,107,.1); margin-top: 2.25rem; padding: 1.5rem 0; font-size: .82rem; color: var(--ink-soft); } .footer-bottom-links { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .footer-bottom-links a { color: var(--ink-soft); } .footer-bottom-links a:hover { color: var(--terracotta); } .footer-hipaa { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--sage-deep); } /* Generic share/social icon button — used in the (now light) blog article page-hero. Independent of the footer's own .footer-social-icon variants above. */ .social-icon { width: 38px; height: 38px; border-radius: 50%; display:inline-flex; align-items:center; justify-content:center; background: var(--white); color: var(--dusty-blue-deep) !important; border: 1px solid rgba(53,92,107,.12); box-shadow: var(--shadow-card); transition: background .2s ease, color .2s ease, transform .2s ease; } .social-icon:hover { background: var(--terracotta); border-color: var(--terracotta); color: var(--white) !important; transform: translateY(-2px); } /* ---------- Spacing utility (Bootstrap tops out at 5) ---------- */ .py-6 { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; } @media (max-width: 991.98px) { .py-lg-6.py-5 { padding-top: 3rem; padding-bottom: 3rem; } } /* ---------- Photo treatment: tie real photography to the brand ---------- */ .brand-photo { position: relative; overflow: hidden; } .brand-photo img { transition: transform .5s ease; } .brand-photo:hover img { transform: scale(1.04); } .brand-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(53,92,107,.14) 0%, rgba(139,170,155,0) 55%); pointer-events: none; } /* ---------- Services dropdown ---------- */ .site-navbar .dropdown-menu { border: none; border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: .6rem; margin-top: .5rem; } .site-navbar .dropdown-item { border-radius: .5rem; padding: .55rem .9rem; font-weight: 600; font-size: 15px; color: var(--ink); } .site-navbar .dropdown-item:hover, .site-navbar .dropdown-item:focus { background: var(--slate-teal-soft); color: var(--slate-teal); } .site-navbar .dropdown-item i { color: var(--amber); width: 1.1rem; } /* ---------- Sticky mobile CTA ---------- */ .mobile-cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: var(--white); box-shadow: 0 -10px 30px -12px rgba(0,0,0,.18); padding: .65rem .9rem; display: none; } @media (max-width: 991.98px) { .mobile-cta-bar { display: flex; gap: .6rem; } main { padding-bottom: 4.2rem; } } .mobile-cta-bar .btn { flex: 1; padding: .65rem .5rem; font-size: .92rem; } /* ---------- Animation stagger for grid children ---------- */ .fade-up:nth-child(2) { transition-delay: .08s; } .fade-up:nth-child(3) { transition-delay: .16s; } .fade-up:nth-child(4) { transition-delay: .24s; } .fade-up:nth-child(5) { transition-delay: .32s; } .fade-up:nth-child(6) { transition-delay: .4s; } /* ---------- Subtle hero texture (signature anchor-line motif) ---------- */ .hero-texture { position: absolute; inset: 0; opacity: .16; pointer-events: none; } /* ---------- Blog ---------- */ .article-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: transform .3s ease, box-shadow .3s ease; height: 100%; } .article-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -20px rgba(53,92,107,.3); } .article-card .article-cover { aspect-ratio: 16/10; overflow: hidden; } .article-card .article-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .article-card:hover .article-cover img { transform: scale(1.05); } .article-category-pill { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--slate-teal-soft); color: var(--slate-teal); padding: .3rem .7rem; border-radius: 999px; } .article-prose { font-size: 1.08rem; line-height: 1.8; color: var(--ink); } .article-prose p { margin-bottom: 1.4rem; } .article-prose h2 { font-size: 1.5rem; margin-top: 2.2rem; margin-bottom: 1rem; } .article-prose h3 { font-size: 1.2rem; margin-top: 1.8rem; margin-bottom: .8rem; } .comment-thread { border-left: 2px solid transparent; } .comment-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand-gradient); color: var(--white); font-weight: 700; font-size: .85rem; } /* ---------- Auth pages (minimal card, underline inputs, full-bleed photo) ---------- */ .ms-auth-shell { min-height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; } .ms-auth-bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .ms-auth-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,28,26,.15) 0%, rgba(36,28,26,.45) 100%); } .ms-card { position: relative; background: var(--white); width: 100%; max-width: 440px; border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(47,31,26,.22); padding: 2.75rem 2.5rem 2rem; } .ms-logo-row { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.75rem; } .ms-logo-row img { width: 32px; height: 32px; border-radius: 10px; object-fit: cover; } .ms-logo-row span { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); } .ms-card h1 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--ink); margin-bottom: 1.5rem; } .ms-step-email { font-size: .95rem; color: var(--ink); margin-bottom: .25rem; } .ms-change-link { font-size: .8rem; } .ms-field { margin-bottom: 1.5rem; } .ms-field label { display: block; font-size: .85rem; color: var(--ink-soft); margin-bottom: .3rem; } .ms-input { width: 100%; border: 1.5px solid #e3ddd0; border-radius: .9rem; padding: .75rem 1rem; font-size: .95rem; background: var(--cream); color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } .ms-input:focus { outline: none; border-color: var(--terracotta); background: var(--white); box-shadow: 0 0 0 .2rem rgba(201,111,91,.16); } .ms-links a { display: block; font-size: .82rem; margin-bottom: .6rem; text-decoration: none; color: var(--slate-teal); font-weight: 600; } .ms-links a:hover { text-decoration: underline; } .ms-actions { display: flex; justify-content: flex-end; margin-top: 1.5rem; } .ms-btn-next { background: var(--coral); border: none; color: var(--white); font-weight: 600; padding: .7rem 1.9rem; border-radius: 999px; box-shadow: 0 10px 24px rgba(201,111,91,.32); transition: background .2s ease, transform .2s ease, box-shadow .2s ease; } .ms-btn-next:hover { background: var(--coral-deep); color: var(--white); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(201,111,91,.38); } .ms-btn-back { background: transparent; border: none; color: var(--slate-teal); font-weight: 600; padding: .7rem 1.1rem; border-radius: 999px; margin-right: auto; transition: background .2s ease; } .ms-btn-back:hover { background: var(--slate-teal-soft); } .ms-footer-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; padding: .75rem 1.5rem; font-size: .78rem; color: rgba(255,255,255,.85); z-index: 5; } .ms-footer-bar a { color: rgba(255,255,255,.85); text-decoration: none; margin-left: 1.25rem; } .ms-footer-bar a:hover { color: var(--white); text-decoration: underline; } /* ---------- Appointment availability picker ---------- */ .booking-provider-card { background: var(--white); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow-card); height: 100%; } .booking-provider-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; } .booking-provider-card .meta-row { display: flex; align-items: center; gap: .5rem; color: var(--ink-soft); font-size: .88rem; margin-bottom: .35rem; } .booking-calendar { background: var(--white); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-card); height: 100%; } .booking-calendar-header { display: flex; align-items: center; justify-content: space-between; background: var(--slate-teal-soft); border-radius: var(--radius-md); padding: .75rem 1rem; margin-bottom: 1.25rem; } .booking-calendar-header h3 { font-size: 1.05rem; margin: 0; color: var(--navy); font-family: var(--font-body); font-weight: 700; } .booking-calendar-header a { color: var(--slate-teal); font-size: 1.1rem; } .booking-calendar-header a.disabled { opacity: .3; pointer-events: none; } .booking-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; text-align: center; } .booking-grid .dow { font-size: .75rem; font-weight: 700; color: var(--ink-soft); padding-bottom: .5rem; } .booking-day { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 50%; text-decoration: none; font-size: .88rem; font-weight: 600; color: var(--ink); transition: background .15s ease, color .15s ease; } .booking-day:hover:not(.is-disabled):not(.is-selected) { background: var(--cream-deep); color: var(--ink); } .booking-day.is-disabled { color: #c8c0b8; pointer-events: none; } .booking-day.is-selected { background: var(--brand-gradient); color: var(--white); } .booking-day.is-today:not(.is-selected) { box-shadow: inset 0 0 0 1.5px var(--slate-teal); } .booking-slots-panel { background: var(--white); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-card); height: 100%; } .slot-list { display: flex; flex-direction: column; gap: .6rem; max-height: 420px; overflow-y: auto; padding-right: .25rem; } .slot-btn { width: 100%; text-align: center; padding: .6rem; border-radius: .6rem; border: 1.5px solid var(--slate-teal); background: var(--white); color: var(--slate-teal); font-weight: 600; font-size: .92rem; transition: all .15s ease; } .slot-btn:hover:not(:disabled) { background: var(--slate-teal-soft); } .slot-btn.is-selected { background: var(--brand-gradient); border-color: transparent; color: var(--white); } .slot-btn:disabled { background: var(--cream-deep); border-color: #e3ddd0; color: #b6ab9f; cursor: not-allowed; text-decoration: line-through; } .slot-empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--ink-soft); } /* ---------- Chat ---------- */ .chat-thread { display: flex; flex-direction: column; gap: 1rem; max-height: 55vh; overflow-y: auto; padding: .5rem; } .chat-bubble { max-width: 75%; padding: .75rem 1.1rem; border-radius: 1.1rem; line-height: 1.5; } .chat-bubble.from-patient { align-self: flex-end; background: var(--brand-gradient); color: var(--white); border-bottom-right-radius: .3rem; } .chat-bubble.from-practice { align-self: flex-start; background: var(--cream-deep); color: var(--ink); border-bottom-left-radius: .3rem; } .chat-meta { font-size: .72rem; opacity: .75; margin-top: .3rem; } /* ---------- App shell (Outlook-style: icon rail + content) ---------- */ .app-shell { display: flex; min-height: 100vh; background: var(--cream); } .app-rail { width: 76px; flex-shrink: 0; background: var(--dark-gradient); display: flex; flex-direction: column; align-items: center; padding: 1.25rem 0; position: sticky; top: 0; height: 100vh; } .app-rail .rail-logo { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; margin-bottom: 1.75rem; } .app-rail .rail-logo img { width: 100%; height: 100%; object-fit: cover; } .app-rail-nav { display: flex; flex-direction: column; gap: .35rem; width: 100%; align-items: center; } .app-rail-link { width: 52px; height: 52px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(255,255,255,.68); text-decoration: none; font-size: 1.15rem; position: relative; transition: background .15s ease, color .15s ease; } .app-rail-link span { font-size: .6rem; margin-top: .2rem; font-weight: 600; letter-spacing: .01em; } .app-rail-link:hover { background: rgba(255,255,255,.08); color: var(--white); } .app-rail-link.active { background: rgba(255,255,255,.14); color: var(--white); } .app-rail-link.active::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 4px; height: 26px; background: var(--amber); border-radius: 0 4px 4px 0; } .app-rail-link .badge-dot { position: absolute; top: 6px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); border: 2px solid var(--maroon-deep); } .app-rail-bottom { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: .5rem; } .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .app-topbar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.75rem; background: var(--white); border-bottom: 1px solid rgba(0,0,0,.06); position: sticky; top: 0; z-index: 10; } .app-topbar h1 { font-size: 1.15rem; margin: 0; color: var(--ink); font-family: var(--font-body); font-weight: 700; } .app-topbar-user { display: flex; align-items: center; gap: .6rem; } .app-topbar-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-gradient); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; } .app-content { padding: 1.75rem; flex: 1; } /* List-row pattern (Outlook's message-list feel), reused for admin tables/lists */ .app-list-row { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border-bottom: 1px solid rgba(0,0,0,.06); background: var(--white); transition: background .15s ease; } .app-list-row:hover { background: var(--cream-deep); } .app-list-row:first-child { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); } .app-list-row:last-child { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); border-bottom: none; } .app-panel { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; } .app-mobile-topnav { display: none; } @media (max-width: 860px) { .app-rail { display: none; } .app-mobile-topnav { display: flex; overflow-x: auto; gap: .5rem; background: var(--slate-blue-deep); padding: .6rem .75rem; } .app-mobile-topnav a { color: rgba(255,255,255,.75); text-decoration: none; font-size: .78rem; font-weight: 600; white-space: nowrap; padding: .4rem .7rem; border-radius: 8px; } .app-mobile-topnav a.active { background: rgba(255,255,255,.15); color: var(--white); } .app-content { padding: 1.1rem; } .app-topbar { padding: .85rem 1.1rem; } } .pagination .page-link { color: var(--dusty-blue-deep); border-color: #e3ddd0; font-weight: 600; } .pagination .page-link:hover { color: var(--white); background: var(--coral); border-color: var(--coral); } .pagination .page-item.active .page-link { background: var(--brand-gradient); border-color: var(--coral); color: var(--white); } .pagination .page-item.disabled .page-link { color: var(--ink-soft); } .btn-outline-teal { border: 1.5px solid var(--slate-teal); color: var(--slate-teal); background: transparent; } .btn-outline-teal:hover { background: var(--slate-teal); color: var(--white); } /* ---------- Utility ---------- */ .rounded-xl { border-radius: var(--radius-lg) !important; } .fade-up { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .fade-up.is-visible { opacity: 1; transform: translateY(0); } /* ---------- Page hero (About, Services, Contact, FAQ, Donate, Blog, Legal…) ---------- */ /* Light, warm cream hero echoing the homepage hero — a soft blush blob, faint botanical line-art, and dark ink type — instead of the previous dark navy banner. Shared by every inner page via this one class. */ .page-hero { position: relative; overflow: hidden; background: var(--cream); color: var(--ink); padding: 9rem 0 3.5rem; } .page-hero h1 { color: var(--ink); font-family: var(--font-display); } .page-hero .lead { color: var(--ink-soft); } .page-hero .hero-blob { width: clamp(320px, 34vw, 520px); height: clamp(320px, 34vw, 520px); top: -8%; right: -8%; opacity: .8; } .page-hero .hero-leaf-left { top: 8%; } @media (max-width: 767.98px) { .page-hero { padding: 8rem 0 2.75rem; } } /* Two-column variant with a photo (About, Services) — mirrors the homepage hero layout at a smaller scale. */ .page-hero-split .container { position: relative; z-index: 1; } .page-hero-split .page-hero-photo { border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); overflow: hidden; max-height: 360px; } .page-hero-split .page-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 991.98px) { .page-hero-split .page-hero-photo { max-height: 280px; } } .skip-link { position: absolute; left: -999px; top: 0; background: var(--terracotta); color: var(--white); padding: .75rem 1.25rem; z-index: 2000; font-weight:700; border-radius: 0 0 .5rem 0; } .skip-link:focus { left: 0; } :focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; } /* ========================================================================= Public live chat widget (chat / WhatsApp / call) — floating bubble shown to anonymous visitors on public pages, see partials/chat-widget. ========================================================================= */ .chat-widget { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1040; } .chat-widget-fab { width: 60px; height: 60px; border-radius: 50%; border: none; background: var(--brand-gradient); color: var(--white); font-size: 1.5rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px -8px rgba(201, 111, 91, .5); position: relative; cursor: pointer; transition: transform .15s ease; } .chat-widget-fab:hover { transform: translateY(-2px) scale(1.03); } .chat-widget-fab[aria-expanded="true"] i::before { content: "\f659"; } /* bi-chevron-down while open */ .chat-widget-fab-badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--coral-deep); color: var(--white); font-size: .72rem; font-weight: 700; line-height: 22px; text-align: center; border: 2px solid var(--white); } .chat-widget-panel { position: absolute; right: 0; bottom: 74px; width: min(360px, calc(100vw - 2.5rem)); background: var(--white); border-radius: var(--radius-md); box-shadow: 0 24px 60px -16px rgba(36, 28, 26, .35); display: flex; flex-direction: column; overflow: hidden; max-height: min(560px, 72vh); } .chat-widget-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .85rem 1rem; background: var(--brand-gradient); color: var(--white); } .chat-widget-header .fw-semibold { color: var(--white); font-size: .92rem; } .chat-widget-subtitle { font-size: .72rem; opacity: .9; } .chat-widget-header-actions { display: flex; align-items: center; gap: .35rem; } .chat-widget-icon-btn { width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,.18); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: .85rem; text-decoration: none; cursor: pointer; transition: background .15s ease; } .chat-widget-icon-btn:hover { background: rgba(255,255,255,.32); color: var(--white); } .chat-widget-whatsapp:hover { background: #25D366; } .chat-widget-form { padding: 1rem; overflow-y: auto; } .chat-widget-intro { font-size: .82rem; color: var(--ink-soft); margin-bottom: .75rem; } .chat-widget-alt-actions { display: flex; gap: .5rem; margin-top: .6rem; } .chat-widget-alt-actions .btn { flex: 1; } .chat-widget-emergency { font-size: .7rem; color: var(--ink-soft); margin: .75rem 0 0; text-align: center; } .chat-widget-thread-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; } .chat-widget-thread { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; min-height: 220px; } .chat-widget-thread .chat-bubble { max-width: 85%; padding: .6rem .85rem; font-size: .85rem; } .chat-widget-send-form { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid rgba(0,0,0,.06); } .chat-widget-send-form input { flex: 1; } @media (max-width: 480px) { .chat-widget { right: .75rem; bottom: .75rem; } .chat-widget-panel { bottom: 70px; } } @media (max-width: 991.98px) { /* Sit above the sticky mobile call/book bar rather than overlapping it. */ .chat-widget { bottom: calc(4.4rem + env(safe-area-inset-bottom, 0px)); } } /* ---------- Insurance We Accept ---------- */ /* Soft, therapeutic treatment for logo cards — calm off-white tiles, gentle shadow, muted-to-color hover — so a busy grid of outside brand logos still reads as gentle and unhurried, in keeping with the rest of the site. */ .insurance-strip { background: var(--cream); } .insurance-card { background: var(--white); border-radius: var(--radius-md); border: 1px solid rgba(53,92,107,.08); box-shadow: 0 10px 24px -16px rgba(53, 92, 107, .16); padding: 1.5rem 1.25rem; height: 100%; display: flex; align-items: center; justify-content: center; transition: transform .3s ease, box-shadow .3s ease; } .insurance-card:hover { transform: translateY(-4px); box-shadow: 0 18px 32px -18px rgba(53, 92, 107, .26); } .insurance-card img { max-width: 100%; max-height: 44px; width: auto; height: auto; filter: grayscale(45%) opacity(.82); transition: filter .3s ease; } .insurance-card:hover img { filter: grayscale(0%) opacity(1); } .insurance-note { background: var(--teal-soft); border-radius: var(--radius-md); padding: 1rem 1.25rem; color: var(--ink); font-size: .92rem; } .insurance-note strong { color: var(--teal); } /* ---------- About page polish ---------- */ /* Small credential/stat pills under the provider photo — same visual language as the homepage's .hero-stat-chip, reused here so real already-stated facts (years of experience, degree, certification) get a scannable, badge-like presentation. */ .credential-chip { display: inline-flex; align-items: center; gap: .5rem; background: var(--white); border: 1px solid rgba(53,92,107,.1); box-shadow: var(--shadow-card); border-radius: 999px; padding: .5rem 1rem .5rem .6rem; font-size: .82rem; font-weight: 700; color: var(--ink); } .credential-chip i { font-size: 1rem; color: var(--terracotta); } .credential-chip:nth-child(2) i { color: var(--dusty-blue-deep); } .credential-chip:nth-child(3) i { color: var(--sage-deep); } /* Small colored icon badge overlaid on a photo card corner — echoes the mockup's colorful icon-circle motif on top of real photography. */ .photo-badge { position: absolute; top: .85rem; left: .85rem; z-index: 2; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; box-shadow: 0 8px 18px -8px rgba(53,92,107,.4); } .photo-badge-terracotta { background: var(--terracotta); color: var(--white); } .photo-badge-navy { background: var(--slate-blue); color: var(--white); } .photo-badge-sage { background: var(--sage-deep); color: var(--white); } /* Pull-quote block — a soft peach card with an oversized serif quote mark and a faint botanical accent, matching the reference mockup's "Healing begins with feeling heard" quote treatment. */ .about-quote-block { position: relative; overflow: hidden; background: var(--terracotta-soft); border-radius: var(--radius-lg); padding: 3rem 3rem; } .about-quote-block .quote-mark { font-family: var(--font-display); font-size: 4rem; line-height: .4; color: var(--terracotta-deep); display: block; margin-bottom: 1.25rem; } .about-quote-block blockquote { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.35; color: var(--ink); max-width: 34ch; margin: 0; } .about-quote-block .quote-leaf { position: absolute; right: -1.5rem; bottom: -1.5rem; width: 170px; height: auto; color: var(--terracotta); opacity: .18; pointer-events: none; } @media (max-width: 767.98px) { .about-quote-block { padding: 2.25rem 1.75rem; } }