diff --git a/index.html b/index.html new file mode 100644 index 00000000000..cf66296310d --- /dev/null +++ b/index.html @@ -0,0 +1,429 @@ + + + + + + + Alice Tran, PMHNP-BC, FNP-BC — Psychiatric Care with Heart + + + + + + + + + + + +
+ + +
+

A place to be heard

+

+ Psychiatric care, with heart. +

+

+ Thoughtful, whole-person mental health care for the quiet struggles and the loud ones — + delivered in English and Vietnamese, by telehealth across Northern Virginia. +

+ + + +
+
Based in
Fairfax, VA
+
Speaking
English · Tiếng Việt
+
Care model
Telehealth
+
+
+ + + + +
+ + + + + +
+
+
+
+
+ +
+
+ A quiet morning, Fairfax +
+
+
+ +
+

About Alice

+

+ Care that listens
before it prescribes. +

+

+ I'm Alice — a dual board-certified Psychiatric Mental Health and Family Nurse + Practitioner. My work is guided by a simple belief: healing begins when someone + feels truly heard. +

+

+ I trained at Wilkes University and Frontier Nursing University, and I practice + with the Northern Virginia Psychiatric Group. I've spent my career walking + alongside international students, immigrants, and families navigating the quiet + weight of two cultures — and the courage it takes to ask for help. +

+

+ Whether your concerns are new or longstanding, you deserve a clinician who slows + down, asks the right questions, and remembers the whole of who you are. +

+ +
    +
  • PMHNP-BCPsychiatric Mental Health NP
  • +
  • FNP-BCFamily Nurse Practitioner
  • +
  • MSNWilkes University
  • +
  • MSNFrontier Nursing University
  • +
+
+
+
+ + +
+
+

The approach

+

Three quiet promises I make to every person I see.

+
+ +
+
+
01
+

I will listen, fully.

+

+ No rushed intakes. No one-size-fits-all checklists. Your first visit is an hour + because your story deserves the time. +

+
+ +
+
02
+

I will treat the whole of you.

+

+ Sleep, family, faith, food, work, loneliness, purpose. Mental health lives inside + a life — and we'll talk about all of it. +

+
+ +
+
03
+

I will honor where you come from.

+

+ Culture, language, and belonging shape how we heal. Tiếng Việt is welcome here, + and so is everything you carry. +

+
+
+
+ + +
+
+

Services

+

A small, intentional practice.
Built for depth, not volume.

+
+ +
+
+
Initial Visit
+

Comprehensive Psychiatric Evaluation

+

60 minutes · Telehealth

+

+ A spacious first appointment to understand your history, symptoms, relationships, + and goals. We'll map out what's been happening and co-create a plan that respects + your pace and values. +

+
    +
  • Diagnostic assessment
  • +
  • Personalized treatment plan
  • +
  • Psychoeducation & collaborative goal-setting
  • +
+
+ +
+
Follow-Up
+

Medication Management

+

Up to 30 minutes

+

+ Ongoing, thoughtful prescribing with close attention to how you're actually + feeling — not just what the chart says. +

+
+ +
+
Integrated
+

Supportive Psychotherapy

+

Woven into care

+

+ Brief, focused conversations that sit beside medication — because a script without + context rarely heals. +

+
+ +
+
Culturally attuned
+

Care in Tiếng Việt

+

For you & your family

+

+ Mental health support in Vietnamese — so parents, elders, and loved ones can + be part of the conversation, too. +

+
+
+
+ + +
+
+
+

What I help with

+

You don't have to name it perfectly
to be welcome here.

+

+ These are some of the experiences people bring to our first visit. You're welcome + if you see yourself in one — or in none. +

+
+ + +
+
+ + +
+
+
+ + You are not a diagnosis on a page. You are a person with a story, a family, + a future — and the bravest thing you've done this week is consider asking + for help. +
+
— Alice
+
+
+ + +
+
+

Resources

+

A small, curated library
for the in-between days.

+
+ +
+ +
Read
+

Understanding Anxiety

+

What anxiety is actually doing in the body — and five gentle things that help tonight.

+ Open article → +
+ +
Read
+

Depression, in plain language

+

Separating the clinical from the cultural, and why neither deserves silence.

+ Open article → +
+ +
Read
+

Living with Trauma

+

A compassionate primer on why your body remembers, and what healing can look like.

+ Open article → +
+ +
In crisis?
+

Call or text 988

+

The 988 Suicide & Crisis Lifeline is free, confidential, and available 24/7.

+ Get help now → +
+
+
+ + +
+
+
+

Begin here

+

+ The first step is usually
+ the hardest. +

+

+ If you're ready — or almost ready — I'd be honored to hear from you. + Reach out below and we'll find a time that feels right. +

+ +
    +
  • + Practice + Northern Virginia Psychiatric Group +
  • +
  • + Location + Fairfax, Virginia · Telehealth +
  • +
  • + Email + hello@alicetrannp.com +
  • +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +

+ This form is for general inquiries — not emergencies. If you're in crisis, + please call or text 988. +

+
+
+
+ + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 00000000000..82a84f7fe44 --- /dev/null +++ b/script.js @@ -0,0 +1,67 @@ +/* Alice Tran — modern redesign + Tiny, dependency-free interactions: reveal on scroll, nav state, mobile menu. */ + +(() => { + // Current year in footer + const year = document.getElementById('year'); + if (year) year.textContent = new Date().getFullYear(); + + // Nav: scrolled state + const nav = document.getElementById('nav'); + const setNavState = () => { + if (!nav) return; + nav.classList.toggle('is-scrolled', window.scrollY > 12); + }; + setNavState(); + window.addEventListener('scroll', setNavState, { passive: true }); + + // Mobile menu toggle + const toggle = nav?.querySelector('.nav__toggle'); + const links = nav?.querySelector('.nav__links'); + toggle?.addEventListener('click', () => { + const open = nav.classList.toggle('is-open'); + toggle.setAttribute('aria-expanded', open ? 'true' : 'false'); + }); + links?.querySelectorAll('a').forEach(a => + a.addEventListener('click', () => { + nav.classList.remove('is-open'); + toggle?.setAttribute('aria-expanded', 'false'); + }) + ); + + // Reveal on scroll — stagger siblings a touch + const revealables = document.querySelectorAll('[data-reveal]'); + if ('IntersectionObserver' in window && revealables.length) { + const io = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (!entry.isIntersecting) return; + const el = entry.target; + const siblings = Array.from(el.parentElement?.querySelectorAll(':scope > [data-reveal]') || []); + const index = Math.max(0, siblings.indexOf(el)); + el.style.setProperty('--delay', `${Math.min(index, 5) * 80}ms`); + el.classList.add('is-in'); + io.unobserve(el); + }); + }, { rootMargin: '0px 0px -8% 0px', threshold: 0.08 }); + + revealables.forEach((el) => io.observe(el)); + } else { + revealables.forEach((el) => el.classList.add('is-in')); + } + + // Contact form — friendly, no backend + const form = document.querySelector('.contact__form'); + form?.addEventListener('submit', (e) => { + e.preventDefault(); + const btn = form.querySelector('button[type="submit"]'); + if (!btn) return; + const original = btn.textContent; + btn.textContent = 'Thank you — talk soon.'; + btn.disabled = true; + form.reset(); + setTimeout(() => { + btn.textContent = original; + btn.disabled = false; + }, 3200); + }); +})(); diff --git a/styles.css b/styles.css new file mode 100644 index 00000000000..d62edffef7e --- /dev/null +++ b/styles.css @@ -0,0 +1,911 @@ +/* ========================================================= + Alice Tran — Modern Elegant Redesign + Palette: warm ivory, sage, deep forest, terracotta + Type: Cormorant Garamond (display) + Inter (text) + ========================================================= */ + +:root { + /* Color */ + --ivory: #F7F2EA; + --ivory-soft: #FBF7F0; + --cream: #EFE7D8; + --sage: #C4CDB5; + --sage-deep: #8A9A82; + --forest: #2E4A3C; + --forest-deep: #1F332A; + --terracotta: #C98A6B; + --blush: #E8CFC0; + --ink: #22271F; + --ink-soft: #4A5048; + --muted: #7A8078; + --line: rgba(34, 39, 31, 0.12); + + /* Type */ + --serif: "Cormorant Garamond", "Playfair Display", Georgia, serif; + --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; + + /* Layout */ + --container: 1200px; + --radius-sm: 10px; + --radius: 18px; + --radius-lg: 28px; + + /* Motion */ + --ease: cubic-bezier(.2,.7,.2,1); +} + +/* ---------- Reset ---------- */ +*, *::before, *::after { box-sizing: border-box; } +html { scroll-behavior: smooth; } +body { + margin: 0; + font-family: var(--sans); + font-size: 17px; + line-height: 1.65; + color: var(--ink); + background: var(--ivory); + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + overflow-x: hidden; +} +img, svg { display: block; max-width: 100%; } +a { color: inherit; text-decoration: none; } +button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; } +ul { list-style: none; padding: 0; margin: 0; } + +/* ---------- Type ---------- */ +h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; color: var(--forest-deep); } +.h2 { + font-size: clamp(2rem, 4.2vw, 3.4rem); + line-height: 1.08; + margin: 0 0 1rem; + font-weight: 400; +} +.serif-i { font-style: italic; font-weight: 300; color: var(--forest); } +.eyebrow { + font-family: var(--sans); + font-size: .78rem; + letter-spacing: .22em; + text-transform: uppercase; + color: var(--sage-deep); + margin: 0 0 1.2rem; + display: inline-flex; + align-items: center; + gap: .6rem; +} +.eyebrow::before { + content: ""; + width: 22px; height: 1px; + background: var(--sage-deep); + display: inline-block; +} +.lede { + font-size: 1.15rem; + color: var(--ink-soft); + max-width: 58ch; + margin: 0 0 1.25rem; +} + +/* ---------- Container helpers ---------- */ +section { padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 4vw, 3rem); } +.section__head { max-width: var(--container); margin: 0 auto 4rem; text-align: center; } +.section__head .eyebrow { justify-content: center; } +.section__head .lede { margin-left: auto; margin-right: auto; } +.section__head--left { text-align: left; } +.section__head--left .eyebrow { justify-content: flex-start; } +.section__head--left .lede { margin-left: 0; } + +/* ---------- Buttons ---------- */ +.btn { + display: inline-flex; + align-items: center; + gap: .5rem; + padding: .95rem 1.5rem; + border-radius: 999px; + font-weight: 500; + font-size: .95rem; + letter-spacing: .01em; + transition: transform .4s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); + will-change: transform; +} +.btn--primary { + background: var(--forest); + color: var(--ivory-soft); + box-shadow: 0 12px 32px -14px rgba(46, 74, 60, .55); +} +.btn--primary:hover { background: var(--forest-deep); transform: translateY(-2px); } +.btn--ghost { + color: var(--forest); + border: 1px solid var(--line); + background: transparent; +} +.btn--ghost:hover { background: var(--cream); } +.btn--full { width: 100%; justify-content: center; } + +/* ========================================================= + Navigation + ========================================================= */ +.nav { + position: fixed; + top: 0; left: 0; right: 0; + z-index: 50; + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + background: rgba(247, 242, 234, 0.72); + border-bottom: 1px solid transparent; + transition: background .3s var(--ease), border-color .3s var(--ease); +} +.nav.is-scrolled { + background: rgba(247, 242, 234, 0.9); + border-bottom-color: var(--line); +} +.nav__inner { + max-width: var(--container); + margin: 0 auto; + padding: 1rem clamp(1.25rem, 4vw, 3rem); + display: grid; + grid-template-columns: auto 1fr auto; + gap: 2rem; + align-items: center; +} +.nav__brand { + display: inline-flex; + align-items: center; + gap: .75rem; + color: var(--forest-deep); +} +.nav__mark { + display: inline-grid; + place-items: center; + width: 36px; height: 36px; + border-radius: 50%; + background: var(--cream); + color: var(--forest); +} +.nav__name { display: grid; line-height: 1.05; } +.nav__first { font-family: var(--serif); font-size: 1.1rem; color: var(--forest-deep); } +.nav__cred { + font-size: .68rem; + letter-spacing: .18em; + text-transform: uppercase; + color: var(--muted); + margin-top: 2px; +} +.nav__links { + display: flex; + gap: 2rem; + justify-content: center; + font-size: .92rem; + color: var(--ink-soft); +} +.nav__links a { position: relative; padding: .25rem 0; transition: color .2s var(--ease); } +.nav__links a::after { + content: ""; + position: absolute; left: 0; right: 0; bottom: -4px; + height: 1px; + background: var(--forest); + transform: scaleX(0); + transform-origin: right; + transition: transform .4s var(--ease); +} +.nav__links a:hover { color: var(--forest-deep); } +.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; } + +.nav__cta { + padding: .65rem 1.2rem; + border-radius: 999px; + background: var(--forest); + color: var(--ivory); + font-size: .88rem; + font-weight: 500; + transition: background .3s var(--ease), transform .3s var(--ease); +} +.nav__cta:hover { background: var(--forest-deep); transform: translateY(-2px); } + +.nav__toggle { + display: none; + width: 40px; height: 40px; + flex-direction: column; + justify-content: center; + gap: 5px; + align-items: center; +} +.nav__toggle span { + display: block; + width: 22px; height: 1.5px; + background: var(--forest-deep); + transition: transform .3s var(--ease), opacity .2s var(--ease); +} +.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } +.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; } +.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } + +/* ========================================================= + Hero + ========================================================= */ +.hero { + position: relative; + min-height: 100vh; + padding: clamp(8rem, 16vh, 12rem) clamp(1.25rem, 4vw, 3rem) clamp(5rem, 10vh, 8rem); + display: flex; + flex-direction: column; + justify-content: center; + overflow: hidden; + isolation: isolate; +} +.hero__bg { + position: absolute; inset: 0; z-index: -1; + background: + radial-gradient(1200px 600px at 85% 10%, rgba(196, 205, 181, .55), transparent 60%), + radial-gradient(900px 500px at 10% 90%, rgba(232, 207, 192, .45), transparent 60%), + linear-gradient(180deg, var(--ivory-soft), var(--ivory)); +} +.hero__blob { + position: absolute; + border-radius: 50%; + filter: blur(60px); + opacity: .55; + animation: float 18s ease-in-out infinite; +} +.hero__blob--1 { + width: 420px; height: 420px; + top: -80px; right: -120px; + background: radial-gradient(circle at 30% 30%, #C4CDB5, #8A9A82); +} +.hero__blob--2 { + width: 360px; height: 360px; + bottom: -100px; left: -80px; + background: radial-gradient(circle at 70% 40%, #E8CFC0, #C98A6B); + animation-delay: -8s; +} +@keyframes float { + 0%, 100% { transform: translate(0,0) scale(1); } + 50% { transform: translate(30px,-20px) scale(1.05); } +} +.hero__grain { + position: absolute; inset: 0; + background-image: radial-gradient(rgba(34,39,31,.06) 1px, transparent 1px); + background-size: 3px 3px; + opacity: .5; + mix-blend-mode: multiply; +} + +.hero__inner { + max-width: var(--container); + width: 100%; + margin: 0 auto; +} +.hero__title { + font-size: clamp(2.8rem, 8vw, 6.8rem); + line-height: 1; + margin: .5rem 0 1.5rem; + letter-spacing: -0.02em; + font-weight: 300; + max-width: 14ch; +} +.hero__title em { + font-style: italic; + font-weight: 300; + color: var(--forest); + background: linear-gradient(110deg, var(--forest), var(--terracotta) 70%, var(--forest)); + background-size: 200% 100%; + background-position: 0% 0; + -webkit-background-clip: text; + background-clip: text; + color: transparent; + animation: shimmer 8s linear infinite; +} +@keyframes shimmer { + 0% { background-position: 0% 0; } + 100% { background-position: 200% 0; } +} +.hero__lede { + font-size: clamp(1.05rem, 1.5vw, 1.25rem); + color: var(--ink-soft); + max-width: 52ch; + margin: 0 0 2.2rem; +} +.hero__actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 4rem; } + +.hero__meta { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + max-width: 620px; + gap: 1.5rem; + padding-top: 1.5rem; + border-top: 1px solid var(--line); + margin: 0; +} +.hero__meta > div { display: grid; gap: .15rem; } +.hero__meta dt { + font-size: .7rem; + letter-spacing: .2em; + text-transform: uppercase; + color: var(--muted); +} +.hero__meta dd { + margin: 0; + font-family: var(--serif); + font-size: 1.15rem; + color: var(--forest-deep); +} + +.hero__scroll { + position: absolute; + bottom: 2rem; left: 50%; + transform: translateX(-50%); + width: 22px; height: 36px; + border: 1px solid var(--line); + border-radius: 999px; + display: grid; + place-items: start center; + padding-top: 6px; +} +.hero__scroll span { + display: block; + width: 2px; height: 8px; + background: var(--forest); + border-radius: 2px; + animation: scrollhint 2s ease-in-out infinite; +} +@keyframes scrollhint { + 0%, 100% { transform: translateY(0); opacity: 1; } + 50% { transform: translateY(10px); opacity: .3; } +} + +/* ========================================================= + Marquee + ========================================================= */ +.marquee { + overflow: hidden; + padding: 1.4rem 0; + background: var(--forest); + color: var(--cream); + border-top: 1px solid rgba(255,255,255,.08); + border-bottom: 1px solid rgba(255,255,255,.08); +} +.marquee__track { + display: inline-flex; + gap: 2.5rem; + white-space: nowrap; + animation: marquee 40s linear infinite; + font-family: var(--serif); + font-style: italic; + font-size: 1.35rem; + opacity: .85; + padding-left: 2.5rem; +} +@keyframes marquee { + 0% { transform: translateX(0); } + 100% { transform: translateX(-50%); } +} + +/* ========================================================= + About + ========================================================= */ +.about { background: var(--ivory); } +.about__grid { + max-width: var(--container); + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1.1fr; + gap: clamp(2rem, 6vw, 5rem); + align-items: center; +} +.portrait { + position: relative; + padding: 1rem; +} +.portrait__frame { + position: relative; + aspect-ratio: 4 / 5; + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: + 0 30px 60px -30px rgba(46,74,60,.35), + 0 0 0 1px rgba(34,39,31,.05); + transform: rotate(-1.2deg); + transition: transform .8s var(--ease); +} +.portrait:hover .portrait__frame { transform: rotate(0deg); } +.portrait__art { width: 100%; height: 100%; object-fit: cover; } +.portrait::before { + content: ""; + position: absolute; + inset: 2rem -1rem -1rem 2rem; + border-radius: var(--radius-lg); + background: var(--blush); + z-index: -1; + opacity: .55; +} +.portrait__caption { + position: absolute; + bottom: -1.2rem; right: -.5rem; + background: var(--ivory-soft); + padding: .6rem 1rem; + border-radius: 999px; + font-size: .8rem; + color: var(--muted); + letter-spacing: .05em; + box-shadow: 0 10px 30px -10px rgba(0,0,0,.15); + border: 1px solid var(--line); +} + +.about__copy .h2 { margin-top: .4rem; } +.about__copy p { color: var(--ink-soft); max-width: 58ch; } + +.credentials { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: .75rem 2rem; + margin-top: 2.5rem; + padding-top: 2rem; + border-top: 1px solid var(--line); +} +.credentials li { + display: grid; + gap: .2rem; + font-size: .92rem; + color: var(--ink-soft); +} +.credentials span { + font-family: var(--serif); + font-size: 1.1rem; + color: var(--forest-deep); + letter-spacing: .05em; +} + +/* ========================================================= + Approach + ========================================================= */ +.approach { + background: linear-gradient(180deg, var(--ivory), var(--cream) 120%); +} +.approach__grid { + max-width: var(--container); + margin: 0 auto; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.25rem; +} +.promise { + background: var(--ivory-soft); + padding: 2.5rem 2rem 2.2rem; + border-radius: var(--radius-lg); + border: 1px solid var(--line); + transition: transform .5s var(--ease), box-shadow .5s var(--ease); + position: relative; + overflow: hidden; +} +.promise::before { + content: ""; + position: absolute; + top: 0; left: 0; right: 0; + height: 3px; + background: linear-gradient(90deg, var(--sage-deep), var(--forest)); + transform: scaleX(0); + transform-origin: left; + transition: transform .6s var(--ease); +} +.promise:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -40px rgba(46,74,60,.35); } +.promise:hover::before { transform: scaleX(1); } +.promise__num { + font-family: var(--serif); + font-size: 3rem; + color: var(--sage-deep); + line-height: 1; + margin-bottom: 1.5rem; + font-style: italic; + font-weight: 300; +} +.promise h3 { + font-size: 1.5rem; + margin: 0 0 .8rem; +} +.promise p { color: var(--ink-soft); margin: 0; } + +/* ========================================================= + Services + ========================================================= */ +.services { background: var(--ivory); } +.services__grid { + max-width: var(--container); + margin: 0 auto; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: auto; + gap: 1.25rem; +} +.service { + padding: 2.25rem 1.9rem 2rem; + background: var(--ivory-soft); + border: 1px solid var(--line); + border-radius: var(--radius-lg); + display: flex; + flex-direction: column; + transition: background .4s var(--ease), transform .4s var(--ease); +} +.service:hover { background: var(--cream); transform: translateY(-4px); } +.service--lg { + grid-column: span 3; + padding: 3rem; + background: + radial-gradient(500px 200px at 90% 0%, rgba(196,205,181,.45), transparent 70%), + var(--ivory-soft); +} +.service--lg h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); } +.service--accent { + background: linear-gradient(140deg, var(--forest) 0%, var(--forest-deep) 100%); + color: var(--cream); + border-color: transparent; +} +.service--accent h3, .service--accent .service__tag { color: var(--ivory-soft); } +.service--accent .service__meta, .service--accent p { color: rgba(251, 247, 240, .78); } +.service--accent:hover { background: linear-gradient(140deg, var(--forest-deep) 0%, #132019 100%); } + +.service__tag { + display: inline-block; + font-size: .7rem; + letter-spacing: .2em; + text-transform: uppercase; + color: var(--sage-deep); + margin-bottom: 1rem; +} +.service h3 { + font-size: 1.7rem; + margin: 0 0 .4rem; + line-height: 1.15; +} +.service__meta { + font-size: .88rem; + color: var(--muted); + margin: 0 0 1rem; + font-style: italic; +} +.service p { color: var(--ink-soft); margin: 0 0 1rem; } +.service__list { + margin-top: auto; + display: grid; + gap: .5rem; + padding-top: 1rem; +} +.service__list li { + position: relative; + padding-left: 1.25rem; + font-size: .95rem; + color: var(--ink-soft); +} +.service__list li::before { + content: ""; + position: absolute; + left: 0; top: .65em; + width: 8px; height: 1px; + background: var(--sage-deep); +} + +/* ========================================================= + Conditions + ========================================================= */ +.conditions { + background: var(--forest); + color: var(--cream); + border-radius: clamp(0px, 3vw, 48px) clamp(0px, 3vw, 48px) 0 0; + margin-top: -1px; +} +.conditions__inner { + max-width: var(--container); + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1.1fr; + gap: clamp(2rem, 6vw, 5rem); + align-items: center; +} +.conditions .h2 { color: var(--ivory-soft); } +.conditions .eyebrow { color: var(--sage); } +.conditions .eyebrow::before { background: var(--sage); } +.conditions .serif-i { color: var(--blush); } +.conditions .lede { color: rgba(251, 247, 240, .75); } + +.chips { + display: flex; + flex-wrap: wrap; + gap: .6rem; +} +.chips li { + padding: .7rem 1.15rem; + border: 1px solid rgba(255,255,255,.18); + border-radius: 999px; + font-size: .92rem; + color: var(--ivory-soft); + transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); + cursor: default; +} +.chips li:hover { + background: rgba(255,255,255,.08); + border-color: rgba(255,255,255,.35); + transform: translateY(-2px); +} + +/* ========================================================= + Quote + ========================================================= */ +.quote { + background: var(--forest); + color: var(--ivory-soft); + padding-top: 4rem; + padding-bottom: 8rem; +} +.quote figure { + max-width: 900px; + margin: 0 auto; + text-align: center; + position: relative; +} +.quote blockquote { + font-family: var(--serif); + font-size: clamp(1.6rem, 3.2vw, 2.6rem); + line-height: 1.3; + font-weight: 300; + font-style: italic; + margin: 0 0 1.5rem; + color: var(--ivory-soft); + position: relative; + padding-top: 3rem; +} +.quote__mark { + position: absolute; + top: -1rem; left: 50%; + transform: translateX(-50%); + font-size: 6rem; + line-height: 1; + color: var(--terracotta); + font-family: var(--serif); + opacity: .7; +} +.quote figcaption { + font-family: var(--sans); + font-size: .85rem; + letter-spacing: .2em; + text-transform: uppercase; + color: var(--sage); +} + +/* ========================================================= + Resources + ========================================================= */ +.resources { background: var(--ivory); } +.resources__grid { + max-width: var(--container); + margin: 0 auto; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.25rem; +} +.resource { + display: flex; + flex-direction: column; + padding: 2rem 1.75rem; + background: var(--ivory-soft); + border: 1px solid var(--line); + border-radius: var(--radius); + transition: transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease); +} +.resource:hover { + transform: translateY(-4px); + background: var(--cream); + border-color: var(--sage); +} +.resource__kicker { + font-size: .72rem; + letter-spacing: .22em; + text-transform: uppercase; + color: var(--sage-deep); + margin-bottom: 1.25rem; +} +.resource h3 { + font-size: 1.35rem; + margin: 0 0 .5rem; + line-height: 1.2; +} +.resource p { + font-size: .95rem; + color: var(--ink-soft); + margin: 0 0 1.25rem; + flex: 1; +} +.resource__link { + font-size: .88rem; + color: var(--forest); + font-weight: 500; +} +.resource--crisis { + background: linear-gradient(160deg, var(--terracotta), #A66D50); + color: var(--ivory-soft); + border-color: transparent; +} +.resource--crisis:hover { background: linear-gradient(160deg, #A66D50, #7E4F39); } +.resource--crisis .resource__kicker { color: var(--blush); } +.resource--crisis h3 { color: var(--ivory-soft); } +.resource--crisis p { color: rgba(251, 247, 240, .85); } +.resource--crisis .resource__link { color: var(--ivory-soft); } + +/* ========================================================= + Contact + ========================================================= */ +.contact { background: var(--cream); } +.contact__card { + max-width: var(--container); + margin: 0 auto; + background: var(--ivory-soft); + border-radius: var(--radius-lg); + padding: clamp(2rem, 5vw, 4rem); + display: grid; + grid-template-columns: 1fr 1fr; + gap: clamp(2rem, 5vw, 4rem); + box-shadow: 0 40px 80px -50px rgba(46,74,60,.35); + border: 1px solid var(--line); +} +.contact__left .h2 { margin-bottom: 1.2rem; } +.contact__details { + display: grid; + gap: 1rem; + margin-top: 2rem; + padding-top: 2rem; + border-top: 1px solid var(--line); +} +.contact__details li { display: grid; gap: .15rem; } +.contact__label { + font-size: .7rem; + letter-spacing: .22em; + text-transform: uppercase; + color: var(--muted); +} +.contact__details a { color: var(--forest); border-bottom: 1px solid var(--line); } +.contact__details a:hover { color: var(--terracotta); } + +.contact__form { display: grid; gap: 1.1rem; } +.field { display: grid; gap: .4rem; } +.field label { + font-size: .75rem; + letter-spacing: .18em; + text-transform: uppercase; + color: var(--muted); +} +.field input, +.field select, +.field textarea { + font-family: inherit; + font-size: 1rem; + color: var(--ink); + background: var(--ivory); + border: 1px solid var(--line); + border-radius: var(--radius-sm); + padding: .85rem 1rem; + transition: border-color .2s var(--ease), background .2s var(--ease); + resize: vertical; +} +.field input:focus, +.field select:focus, +.field textarea:focus { + outline: none; + border-color: var(--forest); + background: var(--ivory-soft); +} +.field__note { + font-size: .82rem; + color: var(--muted); + margin: .5rem 0 0; +} +.field__note a { color: var(--forest); border-bottom: 1px solid currentColor; } + +/* ========================================================= + Footer + ========================================================= */ +.footer { + background: var(--forest-deep); + color: rgba(251, 247, 240, .8); + padding: 4rem clamp(1.25rem, 4vw, 3rem) 2rem; +} +.footer__inner { + max-width: var(--container); + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + align-items: start; +} +.footer__brand { + display: flex; + align-items: center; + gap: 1rem; +} +.footer__brand .nav__mark { + background: rgba(255,255,255,.08); + color: var(--ivory-soft); +} +.footer__brand div { display: grid; gap: .15rem; } +.footer__brand strong { + font-family: var(--serif); + font-weight: 400; + font-size: 1.15rem; + color: var(--ivory-soft); +} +.footer__brand span { font-size: .85rem; } +.footer__nav { + display: flex; + gap: 1.5rem; + flex-wrap: wrap; + justify-content: flex-end; +} +.footer__nav a { font-size: .9rem; transition: color .2s var(--ease); } +.footer__nav a:hover { color: var(--blush); } +.footer__fine { + grid-column: 1 / -1; + border-top: 1px solid rgba(255,255,255,.1); + padding-top: 1.5rem; + margin: 2rem 0 0; + font-size: .82rem; + color: rgba(251, 247, 240, .5); +} + +/* ========================================================= + Reveal animation + ========================================================= */ +[data-reveal] { + opacity: 0; + transform: translateY(22px); + transition: opacity .9s var(--ease), transform .9s var(--ease); + transition-delay: var(--delay, 0ms); +} +[data-reveal].is-in { + opacity: 1; + transform: translateY(0); +} + +/* ========================================================= + Responsive + ========================================================= */ +@media (max-width: 960px) { + .nav__links, .nav__cta { display: none; } + .nav__toggle { display: inline-flex; } + .nav.is-open .nav__links { + display: flex; + flex-direction: column; + gap: 1.25rem; + position: absolute; + top: 100%; left: 0; right: 0; + background: var(--ivory-soft); + padding: 2rem; + border-top: 1px solid var(--line); + } + + .about__grid, + .conditions__inner, + .contact__card, + .footer__inner { grid-template-columns: 1fr; } + + .about__portrait { max-width: 480px; margin: 0 auto; } + + .approach__grid, + .services__grid, + .resources__grid { grid-template-columns: 1fr; } + .service--lg { grid-column: auto; padding: 2.25rem 1.9rem; } + + .footer__nav { justify-content: flex-start; } + + .hero__meta { grid-template-columns: 1fr 1fr; } +} + +@media (max-width: 520px) { + .hero__meta { grid-template-columns: 1fr; } + .credentials { grid-template-columns: 1fr; } +} + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.001ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.001ms !important; + } + [data-reveal] { opacity: 1; transform: none; } +} diff --git a/v2/index.html b/v2/index.html new file mode 100644 index 00000000000..651dbc158bf --- /dev/null +++ b/v2/index.html @@ -0,0 +1,442 @@ + + + + + + + Alice Tran, PMHNP-BC, FNP-BC — Psychiatric Care with Heart (Twilight) + + + + + + + + + + + +
+ + +
+

A place to be heard

+

+ Psychiatric care, with heart. +

+

+ Thoughtful, whole-person mental health care for the quiet struggles and the loud ones — + delivered in English and Vietnamese, by telehealth across Northern Virginia. +

+ + + +
+
Based in
Fairfax, VA
+
Speaking
English · Tiếng Việt
+
Care model
Telehealth
+
+
+ + + + +
+ + + + + +
+
+
+
+
+ +
+
+ A quiet evening, Fairfax +
+
+
+ +
+

About Alice

+

+ Care that listens
before it prescribes. +

+

+ I'm Alice — a dual board-certified Psychiatric Mental Health and Family Nurse + Practitioner. My work is guided by a simple belief: healing begins when someone + feels truly heard. +

+

+ I trained at Wilkes University and Frontier Nursing University, and I practice + with the Northern Virginia Psychiatric Group. I've spent my career walking + alongside international students, immigrants, and families navigating the quiet + weight of two cultures — and the courage it takes to ask for help. +

+

+ Whether your concerns are new or longstanding, you deserve a clinician who slows + down, asks the right questions, and remembers the whole of who you are. +

+ +
    +
  • PMHNP-BCPsychiatric Mental Health NP
  • +
  • FNP-BCFamily Nurse Practitioner
  • +
  • MSNWilkes University
  • +
  • MSNFrontier Nursing University
  • +
+
+
+
+ + +
+
+

The approach

+

Three quiet promises I make to every person I see.

+
+ +
+
+
01
+

I will listen, fully.

+

+ No rushed intakes. No one-size-fits-all checklists. Your first visit is an hour + because your story deserves the time. +

+
+ +
+
02
+

I will treat the whole of you.

+

+ Sleep, family, faith, food, work, loneliness, purpose. Mental health lives inside + a life — and we'll talk about all of it. +

+
+ +
+
03
+

I will honor where you come from.

+

+ Culture, language, and belonging shape how we heal. Tiếng Việt is welcome here, + and so is everything you carry. +

+
+
+
+ + +
+
+

Services

+

A small, intentional practice.
Built for depth, not volume.

+
+ +
+
+
Initial Visit
+

Comprehensive Psychiatric Evaluation

+

60 minutes · Telehealth

+

+ A spacious first appointment to understand your history, symptoms, relationships, + and goals. We'll map out what's been happening and co-create a plan that respects + your pace and values. +

+
    +
  • Diagnostic assessment
  • +
  • Personalized treatment plan
  • +
  • Psychoeducation & collaborative goal-setting
  • +
+
+ +
+
Follow-Up
+

Medication Management

+

Up to 30 minutes

+

+ Ongoing, thoughtful prescribing with close attention to how you're actually + feeling — not just what the chart says. +

+
+ +
+
Integrated
+

Supportive Psychotherapy

+

Woven into care

+

+ Brief, focused conversations that sit beside medication — because a script without + context rarely heals. +

+
+ +
+
Culturally attuned
+

Care in Tiếng Việt

+

For you & your family

+

+ Mental health support in Vietnamese — so parents, elders, and loved ones can + be part of the conversation, too. +

+
+
+
+ + +
+
+
+

What I help with

+

You don't have to name it perfectly
to be welcome here.

+

+ These are some of the experiences people bring to our first visit. You're welcome + if you see yourself in one — or in none. +

+
+ + +
+
+ + +
+
+
+ + You are not a diagnosis on a page. You are a person with a story, a family, + a future — and the bravest thing you've done this week is consider asking + for help. +
+
— Alice
+
+
+ + +
+
+

Resources

+

A small, curated library
for the in-between days.

+
+ +
+ +
Read
+

Understanding Anxiety

+

What anxiety is actually doing in the body — and five gentle things that help tonight.

+ Open article → +
+ +
Read
+

Depression, in plain language

+

Separating the clinical from the cultural, and why neither deserves silence.

+ Open article → +
+ +
Read
+

Living with Trauma

+

A compassionate primer on why your body remembers, and what healing can look like.

+ Open article → +
+ +
In crisis?
+

Call or text 988

+

The 988 Suicide & Crisis Lifeline is free, confidential, and available 24/7.

+ Get help now → +
+
+
+ + +
+
+
+

Begin here

+

+ The first step is usually
+ the hardest. +

+

+ If you're ready — or almost ready — I'd be honored to hear from you. + Reach out below and we'll find a time that feels right. +

+ +
    +
  • + Practice + Northern Virginia Psychiatric Group +
  • +
  • + Location + Fairfax, Virginia · Telehealth +
  • +
  • + Email + hello@alicetrannp.com +
  • +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +

+ This form is for general inquiries — not emergencies. If you're in crisis, + please call or text 988. +

+
+
+
+ + + + + + + diff --git a/v2/script.js b/v2/script.js new file mode 100644 index 00000000000..82a84f7fe44 --- /dev/null +++ b/v2/script.js @@ -0,0 +1,67 @@ +/* Alice Tran — modern redesign + Tiny, dependency-free interactions: reveal on scroll, nav state, mobile menu. */ + +(() => { + // Current year in footer + const year = document.getElementById('year'); + if (year) year.textContent = new Date().getFullYear(); + + // Nav: scrolled state + const nav = document.getElementById('nav'); + const setNavState = () => { + if (!nav) return; + nav.classList.toggle('is-scrolled', window.scrollY > 12); + }; + setNavState(); + window.addEventListener('scroll', setNavState, { passive: true }); + + // Mobile menu toggle + const toggle = nav?.querySelector('.nav__toggle'); + const links = nav?.querySelector('.nav__links'); + toggle?.addEventListener('click', () => { + const open = nav.classList.toggle('is-open'); + toggle.setAttribute('aria-expanded', open ? 'true' : 'false'); + }); + links?.querySelectorAll('a').forEach(a => + a.addEventListener('click', () => { + nav.classList.remove('is-open'); + toggle?.setAttribute('aria-expanded', 'false'); + }) + ); + + // Reveal on scroll — stagger siblings a touch + const revealables = document.querySelectorAll('[data-reveal]'); + if ('IntersectionObserver' in window && revealables.length) { + const io = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (!entry.isIntersecting) return; + const el = entry.target; + const siblings = Array.from(el.parentElement?.querySelectorAll(':scope > [data-reveal]') || []); + const index = Math.max(0, siblings.indexOf(el)); + el.style.setProperty('--delay', `${Math.min(index, 5) * 80}ms`); + el.classList.add('is-in'); + io.unobserve(el); + }); + }, { rootMargin: '0px 0px -8% 0px', threshold: 0.08 }); + + revealables.forEach((el) => io.observe(el)); + } else { + revealables.forEach((el) => el.classList.add('is-in')); + } + + // Contact form — friendly, no backend + const form = document.querySelector('.contact__form'); + form?.addEventListener('submit', (e) => { + e.preventDefault(); + const btn = form.querySelector('button[type="submit"]'); + if (!btn) return; + const original = btn.textContent; + btn.textContent = 'Thank you — talk soon.'; + btn.disabled = true; + form.reset(); + setTimeout(() => { + btn.textContent = original; + btn.disabled = false; + }, 3200); + }); +})(); diff --git a/v2/styles.css b/v2/styles.css new file mode 100644 index 00000000000..9202d60ce4b --- /dev/null +++ b/v2/styles.css @@ -0,0 +1,954 @@ +/* ========================================================= + Alice Tran — V2: "Twilight" + Palette: mist, dusty lavender, deep plum, champagne gold + Type: Fraunces (display) + Inter (text) + ========================================================= */ + +:root { + /* Color — twilight */ + --mist: #F3EFF7; + --mist-soft: #FAF7FC; + --cloud: #EAE3F1; + --lavender: #D3C9E4; + --lavender-dp: #A297C0; + --plum: #3E3454; + --plum-deep: #251D37; + --plum-darkest: #18112A; + --champagne: #D9B987; + --champagne-dp: #B08F5E; + --blush: #E5CFDB; + --ink: #231C33; + --ink-soft: #4A4260; + --muted: #7E7693; + --line: rgba(35, 28, 51, 0.12); + + /* Type */ + --serif: "Fraunces", "Cormorant Garamond", "Playfair Display", Georgia, serif; + --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; + + /* Layout */ + --container: 1200px; + --radius-sm: 10px; + --radius: 18px; + --radius-lg: 28px; + + /* Motion */ + --ease: cubic-bezier(.2,.7,.2,1); +} + +/* ---------- Reset ---------- */ +*, *::before, *::after { box-sizing: border-box; } +html { scroll-behavior: smooth; } +body { + margin: 0; + font-family: var(--sans); + font-size: 17px; + line-height: 1.65; + color: var(--ink); + background: var(--mist); + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + overflow-x: hidden; +} +img, svg { display: block; max-width: 100%; } +a { color: inherit; text-decoration: none; } +button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; } +ul { list-style: none; padding: 0; margin: 0; } + +/* ---------- Type ---------- */ +h1, h2, h3, h4 { + font-family: var(--serif); + font-weight: 400; + letter-spacing: -0.015em; + color: var(--plum-deep); + font-variation-settings: "opsz" 144, "SOFT" 50; +} +.h2 { + font-size: clamp(2rem, 4.2vw, 3.4rem); + line-height: 1.08; + margin: 0 0 1rem; + font-weight: 400; +} +.serif-i { font-style: italic; font-weight: 300; color: var(--plum); } +.eyebrow { + font-family: var(--sans); + font-size: .78rem; + letter-spacing: .22em; + text-transform: uppercase; + color: var(--lavender-dp); + margin: 0 0 1.2rem; + display: inline-flex; + align-items: center; + gap: .6rem; +} +.eyebrow::before { + content: ""; + width: 22px; height: 1px; + background: var(--lavender-dp); + display: inline-block; +} +.lede { + font-size: 1.15rem; + color: var(--ink-soft); + max-width: 58ch; + margin: 0 0 1.25rem; +} + +/* ---------- Container helpers ---------- */ +section { padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 4vw, 3rem); } +.section__head { max-width: var(--container); margin: 0 auto 4rem; text-align: center; } +.section__head .eyebrow { justify-content: center; } +.section__head .lede { margin-left: auto; margin-right: auto; } +.section__head--left { text-align: left; } +.section__head--left .eyebrow { justify-content: flex-start; } +.section__head--left .lede { margin-left: 0; } + +/* ---------- Buttons ---------- */ +.btn { + display: inline-flex; + align-items: center; + gap: .5rem; + padding: .95rem 1.5rem; + border-radius: 999px; + font-weight: 500; + font-size: .95rem; + letter-spacing: .01em; + transition: transform .4s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); + will-change: transform; +} +.btn--primary { + background: var(--plum); + color: var(--mist-soft); + box-shadow: 0 12px 32px -14px rgba(62, 52, 84, .6); +} +.btn--primary:hover { background: var(--plum-deep); transform: translateY(-2px); } +.btn--ghost { + color: var(--plum); + border: 1px solid var(--line); + background: transparent; +} +.btn--ghost:hover { background: var(--cloud); } +.btn--full { width: 100%; justify-content: center; } + +/* ========================================================= + Navigation + ========================================================= */ +.nav { + position: fixed; + top: 0; left: 0; right: 0; + z-index: 50; + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + background: rgba(243, 239, 247, 0.72); + border-bottom: 1px solid transparent; + transition: background .3s var(--ease), border-color .3s var(--ease); +} +.nav.is-scrolled { + background: rgba(243, 239, 247, 0.9); + border-bottom-color: var(--line); +} +.nav__inner { + max-width: var(--container); + margin: 0 auto; + padding: 1rem clamp(1.25rem, 4vw, 3rem); + display: grid; + grid-template-columns: auto 1fr auto; + gap: 2rem; + align-items: center; +} +.nav__brand { + display: inline-flex; + align-items: center; + gap: .75rem; + color: var(--plum-deep); +} +.nav__mark { + display: inline-grid; + place-items: center; + width: 36px; height: 36px; + border-radius: 50%; + background: var(--cloud); + color: var(--plum); +} +.nav__name { display: grid; line-height: 1.05; } +.nav__first { + font-family: var(--serif); + font-size: 1.15rem; + color: var(--plum-deep); + font-variation-settings: "opsz" 72, "SOFT" 100; +} +.nav__cred { + font-size: .68rem; + letter-spacing: .18em; + text-transform: uppercase; + color: var(--muted); + margin-top: 2px; +} +.nav__links { + display: flex; + gap: 2rem; + justify-content: center; + font-size: .92rem; + color: var(--ink-soft); +} +.nav__links a { position: relative; padding: .25rem 0; transition: color .2s var(--ease); } +.nav__links a::after { + content: ""; + position: absolute; left: 0; right: 0; bottom: -4px; + height: 1px; + background: var(--plum); + transform: scaleX(0); + transform-origin: right; + transition: transform .4s var(--ease); +} +.nav__links a:hover { color: var(--plum-deep); } +.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; } + +.nav__cta { + padding: .65rem 1.2rem; + border-radius: 999px; + background: var(--plum); + color: var(--mist-soft); + font-size: .88rem; + font-weight: 500; + transition: background .3s var(--ease), transform .3s var(--ease); +} +.nav__cta:hover { background: var(--plum-deep); transform: translateY(-2px); } + +.nav__toggle { + display: none; + width: 40px; height: 40px; + flex-direction: column; + justify-content: center; + gap: 5px; + align-items: center; +} +.nav__toggle span { + display: block; + width: 22px; height: 1.5px; + background: var(--plum-deep); + transition: transform .3s var(--ease), opacity .2s var(--ease); +} +.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } +.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; } +.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } + +/* ========================================================= + Hero — twilight gradient + ========================================================= */ +.hero { + position: relative; + min-height: 100vh; + padding: clamp(8rem, 16vh, 12rem) clamp(1.25rem, 4vw, 3rem) clamp(5rem, 10vh, 8rem); + display: flex; + flex-direction: column; + justify-content: center; + overflow: hidden; + isolation: isolate; +} +.hero__bg { + position: absolute; inset: 0; z-index: -1; + background: + radial-gradient(1100px 620px at 85% 5%, rgba(217, 185, 135, .35), transparent 55%), + radial-gradient(900px 550px at 10% 95%, rgba(211, 201, 228, .75), transparent 60%), + linear-gradient(180deg, var(--mist-soft) 0%, var(--mist) 50%, var(--cloud) 100%); +} +.hero__blob { + position: absolute; + border-radius: 50%; + filter: blur(70px); + opacity: .6; + animation: float 20s ease-in-out infinite; +} +.hero__blob--1 { + width: 420px; height: 420px; + top: -80px; right: -120px; + background: radial-gradient(circle at 30% 30%, #D3C9E4, #8A7FA8); +} +.hero__blob--2 { + width: 360px; height: 360px; + bottom: -100px; left: -80px; + background: radial-gradient(circle at 70% 40%, #E5CFDB, #A297C0); + animation-delay: -8s; +} +.hero__blob--3 { + width: 260px; height: 260px; + top: 30%; right: 20%; + background: radial-gradient(circle at 40% 60%, #F0DDB8, transparent 70%); + opacity: .4; + animation-delay: -14s; +} +@keyframes float { + 0%, 100% { transform: translate(0,0) scale(1); } + 50% { transform: translate(30px,-20px) scale(1.05); } +} +.hero__grain { + position: absolute; inset: 0; + background-image: radial-gradient(rgba(35, 28, 51, .055) 1px, transparent 1px); + background-size: 3px 3px; + opacity: .55; + mix-blend-mode: multiply; +} + +.hero__inner { + max-width: var(--container); + width: 100%; + margin: 0 auto; +} +.hero__title { + font-size: clamp(2.8rem, 8vw, 6.8rem); + line-height: 1; + margin: .5rem 0 1.5rem; + letter-spacing: -0.025em; + font-weight: 300; + max-width: 14ch; + font-variation-settings: "opsz" 144, "SOFT" 100; +} +.hero__title em { + font-style: italic; + font-weight: 300; + background: linear-gradient(110deg, var(--plum), var(--champagne-dp) 50%, var(--plum)); + background-size: 200% 100%; + background-position: 0% 0; + -webkit-background-clip: text; + background-clip: text; + color: transparent; + animation: shimmer 9s linear infinite; +} +@keyframes shimmer { + 0% { background-position: 0% 0; } + 100% { background-position: 200% 0; } +} +.hero__lede { + font-size: clamp(1.05rem, 1.5vw, 1.25rem); + color: var(--ink-soft); + max-width: 52ch; + margin: 0 0 2.2rem; +} +.hero__actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 4rem; } + +.hero__meta { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + max-width: 620px; + gap: 1.5rem; + padding-top: 1.5rem; + border-top: 1px solid var(--line); + margin: 0; +} +.hero__meta > div { display: grid; gap: .15rem; } +.hero__meta dt { + font-size: .7rem; + letter-spacing: .2em; + text-transform: uppercase; + color: var(--muted); +} +.hero__meta dd { + margin: 0; + font-family: var(--serif); + font-size: 1.15rem; + color: var(--plum-deep); +} + +.hero__scroll { + position: absolute; + bottom: 2rem; left: 50%; + transform: translateX(-50%); + width: 22px; height: 36px; + border: 1px solid var(--line); + border-radius: 999px; + display: grid; + place-items: start center; + padding-top: 6px; +} +.hero__scroll span { + display: block; + width: 2px; height: 8px; + background: var(--plum); + border-radius: 2px; + animation: scrollhint 2s ease-in-out infinite; +} +@keyframes scrollhint { + 0%, 100% { transform: translateY(0); opacity: 1; } + 50% { transform: translateY(10px); opacity: .3; } +} + +/* ========================================================= + Marquee + ========================================================= */ +.marquee { + overflow: hidden; + padding: 1.4rem 0; + background: var(--plum); + color: var(--cloud); + border-top: 1px solid rgba(255,255,255,.08); + border-bottom: 1px solid rgba(255,255,255,.08); +} +.marquee__track { + display: inline-flex; + gap: 2.5rem; + white-space: nowrap; + animation: marquee 40s linear infinite; + font-family: var(--serif); + font-style: italic; + font-size: 1.35rem; + opacity: .9; + padding-left: 2.5rem; +} +@keyframes marquee { + 0% { transform: translateX(0); } + 100% { transform: translateX(-50%); } +} + +/* ========================================================= + About + ========================================================= */ +.about { background: var(--mist); } +.about__grid { + max-width: var(--container); + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1.1fr; + gap: clamp(2rem, 6vw, 5rem); + align-items: center; +} +.portrait { + position: relative; + padding: 1rem; +} +.portrait__frame { + position: relative; + aspect-ratio: 4 / 5; + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: + 0 30px 60px -30px rgba(62, 52, 84, .4), + 0 0 0 1px rgba(35, 28, 51, .05); + transform: rotate(-1.2deg); + transition: transform .8s var(--ease); +} +.portrait:hover .portrait__frame { transform: rotate(0deg); } +.portrait__art { width: 100%; height: 100%; object-fit: cover; } +.portrait::before { + content: ""; + position: absolute; + inset: 2rem -1rem -1rem 2rem; + border-radius: var(--radius-lg); + background: linear-gradient(135deg, var(--blush), var(--champagne)); + z-index: -1; + opacity: .55; +} +.portrait__caption { + position: absolute; + bottom: -1.2rem; right: -.5rem; + background: var(--mist-soft); + padding: .6rem 1rem; + border-radius: 999px; + font-size: .8rem; + color: var(--muted); + letter-spacing: .05em; + box-shadow: 0 10px 30px -10px rgba(62, 52, 84, .2); + border: 1px solid var(--line); +} + +.about__copy .h2 { margin-top: .4rem; } +.about__copy p { color: var(--ink-soft); max-width: 58ch; } + +.credentials { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: .75rem 2rem; + margin-top: 2.5rem; + padding-top: 2rem; + border-top: 1px solid var(--line); +} +.credentials li { + display: grid; + gap: .2rem; + font-size: .92rem; + color: var(--ink-soft); +} +.credentials span { + font-family: var(--serif); + font-size: 1.1rem; + color: var(--plum-deep); + letter-spacing: .05em; +} + +/* ========================================================= + Approach + ========================================================= */ +.approach { + background: linear-gradient(180deg, var(--mist), var(--cloud) 120%); +} +.approach__grid { + max-width: var(--container); + margin: 0 auto; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.25rem; +} +.promise { + background: var(--mist-soft); + padding: 2.5rem 2rem 2.2rem; + border-radius: var(--radius-lg); + border: 1px solid var(--line); + transition: transform .5s var(--ease), box-shadow .5s var(--ease); + position: relative; + overflow: hidden; +} +.promise::before { + content: ""; + position: absolute; + top: 0; left: 0; right: 0; + height: 3px; + background: linear-gradient(90deg, var(--lavender-dp), var(--plum), var(--champagne)); + transform: scaleX(0); + transform-origin: left; + transition: transform .6s var(--ease); +} +.promise:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -40px rgba(62, 52, 84, .4); } +.promise:hover::before { transform: scaleX(1); } +.promise__num { + font-family: var(--serif); + font-size: 3rem; + color: var(--lavender-dp); + line-height: 1; + margin-bottom: 1.5rem; + font-style: italic; + font-weight: 300; +} +.promise h3 { + font-size: 1.5rem; + margin: 0 0 .8rem; +} +.promise p { color: var(--ink-soft); margin: 0; } + +/* ========================================================= + Services + ========================================================= */ +.services { background: var(--mist); } +.services__grid { + max-width: var(--container); + margin: 0 auto; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: auto; + gap: 1.25rem; +} +.service { + padding: 2.25rem 1.9rem 2rem; + background: var(--mist-soft); + border: 1px solid var(--line); + border-radius: var(--radius-lg); + display: flex; + flex-direction: column; + transition: background .4s var(--ease), transform .4s var(--ease); +} +.service:hover { background: var(--cloud); transform: translateY(-4px); } +.service--lg { + grid-column: span 3; + padding: 3rem; + background: + radial-gradient(500px 200px at 90% 0%, rgba(211, 201, 228, .5), transparent 70%), + radial-gradient(400px 200px at 10% 100%, rgba(217, 185, 135, .25), transparent 70%), + var(--mist-soft); +} +.service--lg h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); } +.service--accent { + background: linear-gradient(140deg, var(--plum) 0%, var(--plum-deep) 60%, var(--plum-darkest) 100%); + color: var(--cloud); + border-color: transparent; + position: relative; + overflow: hidden; +} +.service--accent::after { + content: ""; + position: absolute; + top: -60px; right: -60px; + width: 220px; height: 220px; + background: radial-gradient(circle, rgba(217, 185, 135, .35), transparent 70%); + pointer-events: none; +} +.service--accent h3, .service--accent .service__tag { color: var(--mist-soft); } +.service--accent .service__meta, .service--accent p { color: rgba(250, 247, 252, .78); } +.service--accent:hover { background: linear-gradient(140deg, var(--plum-deep) 0%, var(--plum-darkest) 100%); } + +.service__tag { + display: inline-block; + font-size: .7rem; + letter-spacing: .2em; + text-transform: uppercase; + color: var(--lavender-dp); + margin-bottom: 1rem; +} +.service h3 { + font-size: 1.7rem; + margin: 0 0 .4rem; + line-height: 1.15; +} +.service__meta { + font-size: .88rem; + color: var(--muted); + margin: 0 0 1rem; + font-style: italic; +} +.service p { color: var(--ink-soft); margin: 0 0 1rem; } +.service__list { + margin-top: auto; + display: grid; + gap: .5rem; + padding-top: 1rem; +} +.service__list li { + position: relative; + padding-left: 1.25rem; + font-size: .95rem; + color: var(--ink-soft); +} +.service__list li::before { + content: ""; + position: absolute; + left: 0; top: .65em; + width: 8px; height: 1px; + background: var(--lavender-dp); +} + +/* ========================================================= + Conditions + ========================================================= */ +.conditions { + background: linear-gradient(165deg, var(--plum) 0%, var(--plum-deep) 70%, var(--plum-darkest) 100%); + color: var(--cloud); + border-radius: clamp(0px, 3vw, 48px) clamp(0px, 3vw, 48px) 0 0; + margin-top: -1px; + position: relative; + overflow: hidden; +} +.conditions::before { + content: ""; + position: absolute; + top: -100px; right: -100px; + width: 400px; height: 400px; + background: radial-gradient(circle, rgba(217, 185, 135, .18), transparent 70%); + pointer-events: none; +} +.conditions__inner { + max-width: var(--container); + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1.1fr; + gap: clamp(2rem, 6vw, 5rem); + align-items: center; + position: relative; +} +.conditions .h2 { color: var(--mist-soft); } +.conditions .eyebrow { color: var(--champagne); } +.conditions .eyebrow::before { background: var(--champagne); } +.conditions .serif-i { color: var(--blush); } +.conditions .lede { color: rgba(250, 247, 252, .78); } + +.chips { + display: flex; + flex-wrap: wrap; + gap: .6rem; +} +.chips li { + padding: .7rem 1.15rem; + border: 1px solid rgba(255,255,255,.18); + border-radius: 999px; + font-size: .92rem; + color: var(--mist-soft); + transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); + cursor: default; + backdrop-filter: blur(4px); +} +.chips li:hover { + background: rgba(255,255,255,.08); + border-color: var(--champagne); + transform: translateY(-2px); +} + +/* ========================================================= + Quote + ========================================================= */ +.quote { + background: linear-gradient(180deg, var(--plum-darkest), var(--plum-deep)); + color: var(--mist-soft); + padding-top: 4rem; + padding-bottom: 8rem; +} +.quote figure { + max-width: 900px; + margin: 0 auto; + text-align: center; + position: relative; +} +.quote blockquote { + font-family: var(--serif); + font-size: clamp(1.6rem, 3.2vw, 2.6rem); + line-height: 1.3; + font-weight: 300; + font-style: italic; + margin: 0 0 1.5rem; + color: var(--mist-soft); + position: relative; + padding-top: 3rem; +} +.quote__mark { + position: absolute; + top: -1rem; left: 50%; + transform: translateX(-50%); + font-size: 6rem; + line-height: 1; + color: var(--champagne); + font-family: var(--serif); + opacity: .8; +} +.quote figcaption { + font-family: var(--sans); + font-size: .85rem; + letter-spacing: .2em; + text-transform: uppercase; + color: var(--lavender); +} + +/* ========================================================= + Resources + ========================================================= */ +.resources { background: var(--mist); } +.resources__grid { + max-width: var(--container); + margin: 0 auto; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.25rem; +} +.resource { + display: flex; + flex-direction: column; + padding: 2rem 1.75rem; + background: var(--mist-soft); + border: 1px solid var(--line); + border-radius: var(--radius); + transition: transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease); +} +.resource:hover { + transform: translateY(-4px); + background: var(--cloud); + border-color: var(--lavender); +} +.resource__kicker { + font-size: .72rem; + letter-spacing: .22em; + text-transform: uppercase; + color: var(--lavender-dp); + margin-bottom: 1.25rem; +} +.resource h3 { + font-size: 1.35rem; + margin: 0 0 .5rem; + line-height: 1.2; +} +.resource p { + font-size: .95rem; + color: var(--ink-soft); + margin: 0 0 1.25rem; + flex: 1; +} +.resource__link { + font-size: .88rem; + color: var(--plum); + font-weight: 500; +} +.resource--crisis { + background: linear-gradient(160deg, var(--champagne), var(--champagne-dp)); + color: var(--plum-darkest); + border-color: transparent; +} +.resource--crisis:hover { background: linear-gradient(160deg, var(--champagne-dp), #8A6D42); } +.resource--crisis .resource__kicker { color: var(--plum-deep); } +.resource--crisis h3 { color: var(--plum-darkest); } +.resource--crisis p { color: rgba(24, 17, 42, .82); } +.resource--crisis .resource__link { color: var(--plum-darkest); font-weight: 600; } + +/* ========================================================= + Contact + ========================================================= */ +.contact { background: var(--cloud); } +.contact__card { + max-width: var(--container); + margin: 0 auto; + background: var(--mist-soft); + border-radius: var(--radius-lg); + padding: clamp(2rem, 5vw, 4rem); + display: grid; + grid-template-columns: 1fr 1fr; + gap: clamp(2rem, 5vw, 4rem); + box-shadow: 0 40px 80px -50px rgba(62, 52, 84, .45); + border: 1px solid var(--line); +} +.contact__left .h2 { margin-bottom: 1.2rem; } +.contact__details { + display: grid; + gap: 1rem; + margin-top: 2rem; + padding-top: 2rem; + border-top: 1px solid var(--line); +} +.contact__details li { display: grid; gap: .15rem; } +.contact__label { + font-size: .7rem; + letter-spacing: .22em; + text-transform: uppercase; + color: var(--muted); +} +.contact__details a { color: var(--plum); border-bottom: 1px solid var(--line); } +.contact__details a:hover { color: var(--champagne-dp); } + +.contact__form { display: grid; gap: 1.1rem; } +.field { display: grid; gap: .4rem; } +.field label { + font-size: .75rem; + letter-spacing: .18em; + text-transform: uppercase; + color: var(--muted); +} +.field input, +.field select, +.field textarea { + font-family: inherit; + font-size: 1rem; + color: var(--ink); + background: var(--mist); + border: 1px solid var(--line); + border-radius: var(--radius-sm); + padding: .85rem 1rem; + transition: border-color .2s var(--ease), background .2s var(--ease); + resize: vertical; +} +.field input:focus, +.field select:focus, +.field textarea:focus { + outline: none; + border-color: var(--plum); + background: var(--mist-soft); +} +.field__note { + font-size: .82rem; + color: var(--muted); + margin: .5rem 0 0; +} +.field__note a { color: var(--plum); border-bottom: 1px solid currentColor; } + +/* ========================================================= + Footer + ========================================================= */ +.footer { + background: var(--plum-darkest); + color: rgba(250, 247, 252, .78); + padding: 4rem clamp(1.25rem, 4vw, 3rem) 2rem; +} +.footer__inner { + max-width: var(--container); + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + align-items: start; +} +.footer__brand { + display: flex; + align-items: center; + gap: 1rem; +} +.footer__brand .nav__mark { + background: rgba(255,255,255,.08); + color: var(--mist-soft); +} +.footer__brand div { display: grid; gap: .15rem; } +.footer__brand strong { + font-family: var(--serif); + font-weight: 400; + font-size: 1.15rem; + color: var(--mist-soft); +} +.footer__brand span { font-size: .85rem; } +.footer__nav { + display: flex; + gap: 1.5rem; + flex-wrap: wrap; + justify-content: flex-end; +} +.footer__nav a { font-size: .9rem; transition: color .2s var(--ease); } +.footer__nav a:hover { color: var(--champagne); } +.footer__fine { + grid-column: 1 / -1; + border-top: 1px solid rgba(255,255,255,.1); + padding-top: 1.5rem; + margin: 2rem 0 0; + font-size: .82rem; + color: rgba(250, 247, 252, .5); +} + +/* ========================================================= + Reveal animation + ========================================================= */ +[data-reveal] { + opacity: 0; + transform: translateY(22px); + transition: opacity .9s var(--ease), transform .9s var(--ease); + transition-delay: var(--delay, 0ms); +} +[data-reveal].is-in { + opacity: 1; + transform: translateY(0); +} + +/* ========================================================= + Responsive + ========================================================= */ +@media (max-width: 960px) { + .nav__links, .nav__cta { display: none; } + .nav__toggle { display: inline-flex; } + .nav.is-open .nav__links { + display: flex; + flex-direction: column; + gap: 1.25rem; + position: absolute; + top: 100%; left: 0; right: 0; + background: var(--mist-soft); + padding: 2rem; + border-top: 1px solid var(--line); + } + + .about__grid, + .conditions__inner, + .contact__card, + .footer__inner { grid-template-columns: 1fr; } + + .about__portrait { max-width: 480px; margin: 0 auto; } + + .approach__grid, + .services__grid, + .resources__grid { grid-template-columns: 1fr; } + .service--lg { grid-column: auto; padding: 2.25rem 1.9rem; } + + .footer__nav { justify-content: flex-start; } + + .hero__meta { grid-template-columns: 1fr 1fr; } +} + +@media (max-width: 520px) { + .hero__meta { grid-template-columns: 1fr; } + .credentials { grid-template-columns: 1fr; } +} + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.001ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.001ms !important; + } + [data-reveal] { opacity: 1; transform: none; } +} diff --git a/v3/index.html b/v3/index.html new file mode 100644 index 00000000000..173476a88ae --- /dev/null +++ b/v3/index.html @@ -0,0 +1,447 @@ + + + + + + + Alice Tran, PMHNP-BC, FNP-BC — Psychiatric Care with Heart (Harbor) + + + + + + + + + + + +
+ + +
+

A place to be heard

+

+ Psychiatric care, with heart. +

+

+ Thoughtful, whole-person mental health care for the quiet struggles and the loud ones — + delivered in English and Vietnamese, by telehealth across Northern Virginia. +

+ + + +
+
Based in
Fairfax, VA
+
Speaking
English · Tiếng Việt
+
Care model
Telehealth
+
+
+ + + + +
+ + + + + +
+
+
+
+
+ +
+
+ A quiet harbor, somewhere still +
+
+
+ +
+

About Alice

+

+ Care that listens
before it prescribes. +

+

+ I'm Alice — a dual board-certified Psychiatric Mental Health and Family Nurse + Practitioner. My work is guided by a simple belief: healing begins when someone + feels truly heard. +

+

+ I trained at Wilkes University and Frontier Nursing University, and I practice + with the Northern Virginia Psychiatric Group. I've spent my career walking + alongside international students, immigrants, and families navigating the quiet + weight of two cultures — and the courage it takes to ask for help. +

+

+ Whether your concerns are new or longstanding, you deserve a clinician who slows + down, asks the right questions, and remembers the whole of who you are. +

+ +
    +
  • PMHNP-BCPsychiatric Mental Health NP
  • +
  • FNP-BCFamily Nurse Practitioner
  • +
  • MSNWilkes University
  • +
  • MSNFrontier Nursing University
  • +
+
+
+
+ + +
+
+

The approach

+

Three quiet promises I make to every person I see.

+
+ +
+
+
01
+

I will listen, fully.

+

+ No rushed intakes. No one-size-fits-all checklists. Your first visit is an hour + because your story deserves the time. +

+
+ +
+
02
+

I will treat the whole of you.

+

+ Sleep, family, faith, food, work, loneliness, purpose. Mental health lives inside + a life — and we'll talk about all of it. +

+
+ +
+
03
+

I will honor where you come from.

+

+ Culture, language, and belonging shape how we heal. Tiếng Việt is welcome here, + and so is everything you carry. +

+
+
+
+ + +
+
+

Services

+

A small, intentional practice.
Built for depth, not volume.

+
+ +
+
+
Initial Visit
+

Comprehensive Psychiatric Evaluation

+

60 minutes · Telehealth

+

+ A spacious first appointment to understand your history, symptoms, relationships, + and goals. We'll map out what's been happening and co-create a plan that respects + your pace and values. +

+
    +
  • Diagnostic assessment
  • +
  • Personalized treatment plan
  • +
  • Psychoeducation & collaborative goal-setting
  • +
+
+ +
+
Follow-Up
+

Medication Management

+

Up to 30 minutes

+

+ Ongoing, thoughtful prescribing with close attention to how you're actually + feeling — not just what the chart says. +

+
+ +
+
Integrated
+

Supportive Psychotherapy

+

Woven into care

+

+ Brief, focused conversations that sit beside medication — because a script without + context rarely heals. +

+
+ +
+
Culturally attuned
+

Care in Tiếng Việt

+

For you & your family

+

+ Mental health support in Vietnamese — so parents, elders, and loved ones can + be part of the conversation, too. +

+
+
+
+ + +
+
+
+

What I help with

+

You don't have to name it perfectly
to be welcome here.

+

+ These are some of the experiences people bring to our first visit. You're welcome + if you see yourself in one — or in none. +

+
+ + +
+
+ + +
+
+
+ + You are not a diagnosis on a page. You are a person with a story, a family, + a future — and the bravest thing you've done this week is consider asking + for help. +
+
— Alice
+
+
+ + +
+
+

Resources

+

A small, curated library
for the in-between days.

+
+ +
+ +
Read
+

Understanding Anxiety

+

What anxiety is actually doing in the body — and five gentle things that help tonight.

+ Open article → +
+ +
Read
+

Depression, in plain language

+

Separating the clinical from the cultural, and why neither deserves silence.

+ Open article → +
+ +
Read
+

Living with Trauma

+

A compassionate primer on why your body remembers, and what healing can look like.

+ Open article → +
+ +
In crisis?
+

Call or text 988

+

The 988 Suicide & Crisis Lifeline is free, confidential, and available 24/7.

+ Get help now → +
+
+
+ + +
+
+
+

Begin here

+

+ The first step is usually
+ the hardest. +

+

+ If you're ready — or almost ready — I'd be honored to hear from you. + Reach out below and we'll find a time that feels right. +

+ +
    +
  • + Practice + Northern Virginia Psychiatric Group +
  • +
  • + Location + Fairfax, Virginia · Telehealth +
  • +
  • + Email + hello@alicetrannp.com +
  • +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +

+ This form is for general inquiries — not emergencies. If you're in crisis, + please call or text 988. +

+
+
+
+ + + + + + + diff --git a/v3/script.js b/v3/script.js new file mode 100644 index 00000000000..82a84f7fe44 --- /dev/null +++ b/v3/script.js @@ -0,0 +1,67 @@ +/* Alice Tran — modern redesign + Tiny, dependency-free interactions: reveal on scroll, nav state, mobile menu. */ + +(() => { + // Current year in footer + const year = document.getElementById('year'); + if (year) year.textContent = new Date().getFullYear(); + + // Nav: scrolled state + const nav = document.getElementById('nav'); + const setNavState = () => { + if (!nav) return; + nav.classList.toggle('is-scrolled', window.scrollY > 12); + }; + setNavState(); + window.addEventListener('scroll', setNavState, { passive: true }); + + // Mobile menu toggle + const toggle = nav?.querySelector('.nav__toggle'); + const links = nav?.querySelector('.nav__links'); + toggle?.addEventListener('click', () => { + const open = nav.classList.toggle('is-open'); + toggle.setAttribute('aria-expanded', open ? 'true' : 'false'); + }); + links?.querySelectorAll('a').forEach(a => + a.addEventListener('click', () => { + nav.classList.remove('is-open'); + toggle?.setAttribute('aria-expanded', 'false'); + }) + ); + + // Reveal on scroll — stagger siblings a touch + const revealables = document.querySelectorAll('[data-reveal]'); + if ('IntersectionObserver' in window && revealables.length) { + const io = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (!entry.isIntersecting) return; + const el = entry.target; + const siblings = Array.from(el.parentElement?.querySelectorAll(':scope > [data-reveal]') || []); + const index = Math.max(0, siblings.indexOf(el)); + el.style.setProperty('--delay', `${Math.min(index, 5) * 80}ms`); + el.classList.add('is-in'); + io.unobserve(el); + }); + }, { rootMargin: '0px 0px -8% 0px', threshold: 0.08 }); + + revealables.forEach((el) => io.observe(el)); + } else { + revealables.forEach((el) => el.classList.add('is-in')); + } + + // Contact form — friendly, no backend + const form = document.querySelector('.contact__form'); + form?.addEventListener('submit', (e) => { + e.preventDefault(); + const btn = form.querySelector('button[type="submit"]'); + if (!btn) return; + const original = btn.textContent; + btn.textContent = 'Thank you — talk soon.'; + btn.disabled = true; + form.reset(); + setTimeout(() => { + btn.textContent = original; + btn.disabled = false; + }, 3200); + }); +})(); diff --git a/v3/styles.css b/v3/styles.css new file mode 100644 index 00000000000..c61b38db561 --- /dev/null +++ b/v3/styles.css @@ -0,0 +1,973 @@ +/* ========================================================= + Alice Tran — V3: "Harbor" + Palette: warm linen, seafoam, slate ocean, driftwood, soft coral + Type: DM Serif Display + Inter + ========================================================= */ + +:root { + /* Color — harbor */ + --linen: #F4EFE6; + --linen-soft: #FAF6EE; + --shell: #EFE8DC; + --sand: #E7DDC8; + --foam: #D5DEDA; + --foam-deep: #A8B8B4; + --slate: #5C7583; + --harbor: #2F4654; + --harbor-deep: #1C2E3A; + --midnight: #101E29; + --driftwood: #B8876B; + --coral: #D4957A; + --coral-soft: #EFD2C2; + + --ink: #1B2B33; + --ink-soft: #445966; + --muted: #7A8B93; + --line: rgba(27, 43, 51, 0.12); + + /* Type */ + --serif: "DM Serif Display", "Cormorant Garamond", Georgia, serif; + --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; + + /* Layout */ + --container: 1200px; + --radius-sm: 10px; + --radius: 18px; + --radius-lg: 28px; + + /* Motion */ + --ease: cubic-bezier(.2,.7,.2,1); +} + +/* ---------- Reset ---------- */ +*, *::before, *::after { box-sizing: border-box; } +html { scroll-behavior: smooth; } +body { + margin: 0; + font-family: var(--sans); + font-size: 17px; + line-height: 1.65; + color: var(--ink); + background: var(--linen); + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + overflow-x: hidden; +} +img, svg { display: block; max-width: 100%; } +a { color: inherit; text-decoration: none; } +button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; } +ul { list-style: none; padding: 0; margin: 0; } + +/* ---------- Type ---------- */ +h1, h2, h3, h4 { + font-family: var(--serif); + font-weight: 400; + letter-spacing: -0.01em; + color: var(--harbor-deep); +} +.h2 { + font-size: clamp(2rem, 4.2vw, 3.4rem); + line-height: 1.1; + margin: 0 0 1rem; +} +.serif-i { font-style: italic; font-weight: 400; color: var(--harbor); } +.eyebrow { + font-family: var(--sans); + font-size: .78rem; + letter-spacing: .24em; + text-transform: uppercase; + color: var(--slate); + margin: 0 0 1.2rem; + display: inline-flex; + align-items: center; + gap: .6rem; + font-weight: 500; +} +.eyebrow::before { + content: ""; + width: 22px; height: 1px; + background: var(--slate); + display: inline-block; +} +.lede { + font-size: 1.15rem; + color: var(--ink-soft); + max-width: 58ch; + margin: 0 0 1.25rem; +} + +/* ---------- Container helpers ---------- */ +section { padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 4vw, 3rem); } +.section__head { max-width: var(--container); margin: 0 auto 4rem; text-align: center; } +.section__head .eyebrow { justify-content: center; } +.section__head .lede { margin-left: auto; margin-right: auto; } +.section__head--left { text-align: left; } +.section__head--left .eyebrow { justify-content: flex-start; } +.section__head--left .lede { margin-left: 0; } + +/* ---------- Buttons ---------- */ +.btn { + display: inline-flex; + align-items: center; + gap: .5rem; + padding: .95rem 1.5rem; + border-radius: 999px; + font-weight: 500; + font-size: .95rem; + letter-spacing: .01em; + transition: transform .4s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); + will-change: transform; +} +.btn--primary { + background: var(--harbor); + color: var(--linen-soft); + box-shadow: 0 12px 32px -14px rgba(47, 70, 84, .6); +} +.btn--primary:hover { background: var(--harbor-deep); transform: translateY(-2px); } +.btn--ghost { + color: var(--harbor); + border: 1px solid var(--line); + background: transparent; +} +.btn--ghost:hover { background: var(--shell); } +.btn--full { width: 100%; justify-content: center; } + +/* ========================================================= + Navigation + ========================================================= */ +.nav { + position: fixed; + top: 0; left: 0; right: 0; + z-index: 50; + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + background: rgba(244, 239, 230, 0.72); + border-bottom: 1px solid transparent; + transition: background .3s var(--ease), border-color .3s var(--ease); +} +.nav.is-scrolled { + background: rgba(244, 239, 230, 0.9); + border-bottom-color: var(--line); +} +.nav__inner { + max-width: var(--container); + margin: 0 auto; + padding: 1rem clamp(1.25rem, 4vw, 3rem); + display: grid; + grid-template-columns: auto 1fr auto; + gap: 2rem; + align-items: center; +} +.nav__brand { + display: inline-flex; + align-items: center; + gap: .75rem; + color: var(--harbor-deep); +} +.nav__mark { + display: inline-grid; + place-items: center; + width: 36px; height: 36px; + border-radius: 50%; + background: var(--shell); + color: var(--harbor); +} +.nav__name { display: grid; line-height: 1.05; } +.nav__first { + font-family: var(--serif); + font-size: 1.15rem; + color: var(--harbor-deep); +} +.nav__cred { + font-size: .68rem; + letter-spacing: .18em; + text-transform: uppercase; + color: var(--muted); + margin-top: 2px; +} +.nav__links { + display: flex; + gap: 2rem; + justify-content: center; + font-size: .92rem; + color: var(--ink-soft); +} +.nav__links a { position: relative; padding: .25rem 0; transition: color .2s var(--ease); } +.nav__links a::after { + content: ""; + position: absolute; left: 0; right: 0; bottom: -4px; + height: 1px; + background: var(--driftwood); + transform: scaleX(0); + transform-origin: right; + transition: transform .4s var(--ease); +} +.nav__links a:hover { color: var(--harbor-deep); } +.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; } + +.nav__cta { + padding: .65rem 1.2rem; + border-radius: 999px; + background: var(--harbor); + color: var(--linen-soft); + font-size: .88rem; + font-weight: 500; + transition: background .3s var(--ease), transform .3s var(--ease); +} +.nav__cta:hover { background: var(--harbor-deep); transform: translateY(-2px); } + +.nav__toggle { + display: none; + width: 40px; height: 40px; + flex-direction: column; + justify-content: center; + gap: 5px; + align-items: center; +} +.nav__toggle span { + display: block; + width: 22px; height: 1.5px; + background: var(--harbor-deep); + transition: transform .3s var(--ease), opacity .2s var(--ease); +} +.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } +.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; } +.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } + +/* ========================================================= + Hero — harbor morning + ========================================================= */ +.hero { + position: relative; + min-height: 100vh; + padding: clamp(8rem, 16vh, 12rem) clamp(1.25rem, 4vw, 3rem) clamp(5rem, 10vh, 8rem); + display: flex; + flex-direction: column; + justify-content: center; + overflow: hidden; + isolation: isolate; +} +.hero__bg { + position: absolute; inset: 0; z-index: -1; + background: + radial-gradient(1100px 500px at 80% 10%, rgba(239, 210, 194, .55), transparent 55%), + radial-gradient(900px 550px at 10% 30%, rgba(213, 222, 218, .6), transparent 60%), + linear-gradient(180deg, var(--linen-soft) 0%, var(--linen) 50%, var(--shell) 100%); +} +.hero__waves { + position: absolute; + left: 0; right: 0; bottom: 0; + width: 100%; + height: 200px; + display: block; +} +.hero__blob { + position: absolute; + border-radius: 50%; + filter: blur(60px); + opacity: .55; + animation: drift 22s ease-in-out infinite; +} +.hero__blob--1 { + width: 380px; height: 380px; + top: -60px; right: -80px; + background: radial-gradient(circle at 40% 40%, #F2C891, #D4957A); + opacity: .5; +} +.hero__blob--2 { + width: 420px; height: 420px; + bottom: 10%; left: -120px; + background: radial-gradient(circle at 60% 40%, #D5DEDA, #5C7583); + animation-delay: -10s; + opacity: .4; +} +@keyframes drift { + 0%, 100% { transform: translate(0,0) scale(1); } + 50% { transform: translate(-20px,25px) scale(1.04); } +} +.hero__grain { + position: absolute; inset: 0; + background-image: radial-gradient(rgba(27, 43, 51, .055) 1px, transparent 1px); + background-size: 3px 3px; + opacity: .5; + mix-blend-mode: multiply; +} + +.hero__inner { + max-width: var(--container); + width: 100%; + margin: 0 auto; +} +.hero__title { + font-size: clamp(2.8rem, 8vw, 6.8rem); + line-height: 1.02; + margin: .5rem 0 1.5rem; + letter-spacing: -0.02em; + font-weight: 400; + max-width: 14ch; +} +.hero__title em { + font-style: italic; + font-weight: 400; + background: linear-gradient(110deg, var(--harbor), var(--driftwood) 55%, var(--harbor)); + background-size: 200% 100%; + background-position: 0% 0; + -webkit-background-clip: text; + background-clip: text; + color: transparent; + animation: shimmer 9s linear infinite; +} +@keyframes shimmer { + 0% { background-position: 0% 0; } + 100% { background-position: 200% 0; } +} +.hero__lede { + font-size: clamp(1.05rem, 1.5vw, 1.25rem); + color: var(--ink-soft); + max-width: 52ch; + margin: 0 0 2.2rem; +} +.hero__actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 4rem; } + +.hero__meta { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + max-width: 620px; + gap: 1.5rem; + padding-top: 1.5rem; + border-top: 1px solid var(--line); + margin: 0; +} +.hero__meta > div { display: grid; gap: .15rem; } +.hero__meta dt { + font-size: .7rem; + letter-spacing: .2em; + text-transform: uppercase; + color: var(--muted); +} +.hero__meta dd { + margin: 0; + font-family: var(--serif); + font-size: 1.2rem; + color: var(--harbor-deep); +} + +.hero__scroll { + position: absolute; + bottom: 2rem; left: 50%; + transform: translateX(-50%); + width: 22px; height: 36px; + border: 1px solid var(--line); + border-radius: 999px; + display: grid; + place-items: start center; + padding-top: 6px; + z-index: 2; +} +.hero__scroll span { + display: block; + width: 2px; height: 8px; + background: var(--harbor); + border-radius: 2px; + animation: scrollhint 2s ease-in-out infinite; +} +@keyframes scrollhint { + 0%, 100% { transform: translateY(0); opacity: 1; } + 50% { transform: translateY(10px); opacity: .3; } +} + +/* ========================================================= + Marquee + ========================================================= */ +.marquee { + overflow: hidden; + padding: 1.4rem 0; + background: var(--harbor); + color: var(--shell); + border-top: 1px solid rgba(255,255,255,.08); + border-bottom: 1px solid rgba(255,255,255,.08); +} +.marquee__track { + display: inline-flex; + gap: 2.5rem; + white-space: nowrap; + animation: marquee 40s linear infinite; + font-family: var(--serif); + font-style: italic; + font-size: 1.4rem; + opacity: .9; + padding-left: 2.5rem; +} +@keyframes marquee { + 0% { transform: translateX(0); } + 100% { transform: translateX(-50%); } +} + +/* ========================================================= + About + ========================================================= */ +.about { background: var(--linen); } +.about__grid { + max-width: var(--container); + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1.1fr; + gap: clamp(2rem, 6vw, 5rem); + align-items: center; +} +.portrait { + position: relative; + padding: 1rem; +} +.portrait__frame { + position: relative; + aspect-ratio: 4 / 5; + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: + 0 30px 60px -30px rgba(47, 70, 84, .35), + 0 0 0 1px rgba(27, 43, 51, .05); + transform: rotate(-1.2deg); + transition: transform .8s var(--ease); +} +.portrait:hover .portrait__frame { transform: rotate(0deg); } +.portrait__art { width: 100%; height: 100%; object-fit: cover; } +.portrait::before { + content: ""; + position: absolute; + inset: 2rem -1rem -1rem 2rem; + border-radius: var(--radius-lg); + background: linear-gradient(135deg, var(--coral-soft), var(--foam)); + z-index: -1; + opacity: .7; +} +.portrait__caption { + position: absolute; + bottom: -1.2rem; right: -.5rem; + background: var(--linen-soft); + padding: .6rem 1rem; + border-radius: 999px; + font-size: .8rem; + color: var(--muted); + letter-spacing: .05em; + box-shadow: 0 10px 30px -10px rgba(47, 70, 84, .2); + border: 1px solid var(--line); +} + +.about__copy .h2 { margin-top: .4rem; } +.about__copy p { color: var(--ink-soft); max-width: 58ch; } + +.credentials { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: .75rem 2rem; + margin-top: 2.5rem; + padding-top: 2rem; + border-top: 1px solid var(--line); +} +.credentials li { + display: grid; + gap: .2rem; + font-size: .92rem; + color: var(--ink-soft); +} +.credentials span { + font-family: var(--serif); + font-size: 1.15rem; + color: var(--harbor-deep); + letter-spacing: .03em; +} + +/* ========================================================= + Approach + ========================================================= */ +.approach { + background: linear-gradient(180deg, var(--linen), var(--shell) 120%); +} +.approach__grid { + max-width: var(--container); + margin: 0 auto; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.25rem; +} +.promise { + background: var(--linen-soft); + padding: 2.5rem 2rem 2.2rem; + border-radius: var(--radius-lg); + border: 1px solid var(--line); + transition: transform .5s var(--ease), box-shadow .5s var(--ease); + position: relative; + overflow: hidden; +} +.promise::before { + content: ""; + position: absolute; + top: 0; left: 0; right: 0; + height: 3px; + background: linear-gradient(90deg, var(--foam-deep), var(--slate), var(--driftwood)); + transform: scaleX(0); + transform-origin: left; + transition: transform .6s var(--ease); +} +.promise:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -40px rgba(47, 70, 84, .35); } +.promise:hover::before { transform: scaleX(1); } +.promise__num { + font-family: var(--serif); + font-size: 3rem; + color: var(--foam-deep); + line-height: 1; + margin-bottom: 1.5rem; + font-style: italic; +} +.promise h3 { + font-size: 1.5rem; + margin: 0 0 .8rem; + line-height: 1.25; +} +.promise p { color: var(--ink-soft); margin: 0; } + +/* ========================================================= + Services + ========================================================= */ +.services { background: var(--linen); } +.services__grid { + max-width: var(--container); + margin: 0 auto; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: auto; + gap: 1.25rem; +} +.service { + padding: 2.25rem 1.9rem 2rem; + background: var(--linen-soft); + border: 1px solid var(--line); + border-radius: var(--radius-lg); + display: flex; + flex-direction: column; + transition: background .4s var(--ease), transform .4s var(--ease); +} +.service:hover { background: var(--shell); transform: translateY(-4px); } +.service--lg { + grid-column: span 3; + padding: 3rem; + background: + radial-gradient(500px 200px at 90% 0%, rgba(213, 222, 218, .7), transparent 70%), + radial-gradient(400px 200px at 10% 100%, rgba(239, 210, 194, .45), transparent 70%), + var(--linen-soft); +} +.service--lg h3 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.1; } +.service--accent { + background: linear-gradient(140deg, var(--harbor) 0%, var(--harbor-deep) 60%, var(--midnight) 100%); + color: var(--shell); + border-color: transparent; + position: relative; + overflow: hidden; +} +.service--accent::after { + content: ""; + position: absolute; + top: -80px; right: -80px; + width: 240px; height: 240px; + background: radial-gradient(circle, rgba(212, 149, 122, .4), transparent 70%); + pointer-events: none; +} +.service--accent h3, .service--accent .service__tag { color: var(--linen-soft); } +.service--accent .service__meta, .service--accent p { color: rgba(250, 246, 238, .78); } +.service--accent:hover { background: linear-gradient(140deg, var(--harbor-deep) 0%, var(--midnight) 100%); } + +.service__tag { + display: inline-block; + font-size: .7rem; + letter-spacing: .22em; + text-transform: uppercase; + color: var(--slate); + margin-bottom: 1rem; + font-weight: 500; +} +.service h3 { + font-size: 1.75rem; + margin: 0 0 .4rem; + line-height: 1.2; +} +.service__meta { + font-size: .88rem; + color: var(--muted); + margin: 0 0 1rem; + font-style: italic; + font-family: var(--serif); +} +.service p { color: var(--ink-soft); margin: 0 0 1rem; } +.service__list { + margin-top: auto; + display: grid; + gap: .5rem; + padding-top: 1rem; +} +.service__list li { + position: relative; + padding-left: 1.25rem; + font-size: .95rem; + color: var(--ink-soft); +} +.service__list li::before { + content: ""; + position: absolute; + left: 0; top: .65em; + width: 8px; height: 1px; + background: var(--driftwood); +} + +/* ========================================================= + Conditions + ========================================================= */ +.conditions { + background: linear-gradient(165deg, var(--harbor) 0%, var(--harbor-deep) 60%, var(--midnight) 100%); + color: var(--shell); + border-radius: clamp(0px, 3vw, 48px) clamp(0px, 3vw, 48px) 0 0; + margin-top: -1px; + position: relative; + overflow: hidden; +} +.conditions::before { + content: ""; + position: absolute; + bottom: 0; left: 0; right: 0; + height: 180px; + background: + radial-gradient(ellipse at 70% 100%, rgba(212, 149, 122, .2), transparent 60%), + radial-gradient(ellipse at 20% 100%, rgba(213, 222, 218, .15), transparent 60%); + pointer-events: none; +} +.conditions__inner { + max-width: var(--container); + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1.1fr; + gap: clamp(2rem, 6vw, 5rem); + align-items: center; + position: relative; +} +.conditions .h2 { color: var(--linen-soft); } +.conditions .eyebrow { color: var(--coral-soft); } +.conditions .eyebrow::before { background: var(--coral-soft); } +.conditions .serif-i { color: var(--coral-soft); } +.conditions .lede { color: rgba(250, 246, 238, .78); } + +.chips { + display: flex; + flex-wrap: wrap; + gap: .6rem; +} +.chips li { + padding: .7rem 1.15rem; + border: 1px solid rgba(255,255,255,.2); + border-radius: 999px; + font-size: .92rem; + color: var(--linen-soft); + transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); + cursor: default; + backdrop-filter: blur(4px); +} +.chips li:hover { + background: rgba(255,255,255,.08); + border-color: var(--coral); + transform: translateY(-2px); +} + +/* ========================================================= + Quote + ========================================================= */ +.quote { + background: linear-gradient(180deg, var(--midnight), var(--harbor-deep)); + color: var(--linen-soft); + padding-top: 4rem; + padding-bottom: 8rem; + position: relative; + overflow: hidden; +} +.quote::after { + content: ""; + position: absolute; + left: 0; right: 0; bottom: 0; + height: 1px; + background: linear-gradient(90deg, transparent, var(--driftwood), transparent); + opacity: .5; +} +.quote figure { + max-width: 900px; + margin: 0 auto; + text-align: center; + position: relative; +} +.quote blockquote { + font-family: var(--serif); + font-size: clamp(1.6rem, 3.2vw, 2.6rem); + line-height: 1.35; + font-weight: 400; + font-style: italic; + margin: 0 0 1.5rem; + color: var(--linen-soft); + position: relative; + padding-top: 3rem; +} +.quote__mark { + position: absolute; + top: -1rem; left: 50%; + transform: translateX(-50%); + font-size: 6rem; + line-height: 1; + color: var(--driftwood); + font-family: var(--serif); + opacity: .85; +} +.quote figcaption { + font-family: var(--sans); + font-size: .85rem; + letter-spacing: .22em; + text-transform: uppercase; + color: var(--foam-deep); +} + +/* ========================================================= + Resources + ========================================================= */ +.resources { background: var(--linen); } +.resources__grid { + max-width: var(--container); + margin: 0 auto; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.25rem; +} +.resource { + display: flex; + flex-direction: column; + padding: 2rem 1.75rem; + background: var(--linen-soft); + border: 1px solid var(--line); + border-radius: var(--radius); + transition: transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease); +} +.resource:hover { + transform: translateY(-4px); + background: var(--shell); + border-color: var(--foam-deep); +} +.resource__kicker { + font-size: .72rem; + letter-spacing: .22em; + text-transform: uppercase; + color: var(--slate); + margin-bottom: 1.25rem; + font-weight: 500; +} +.resource h3 { + font-size: 1.4rem; + margin: 0 0 .5rem; + line-height: 1.2; +} +.resource p { + font-size: .95rem; + color: var(--ink-soft); + margin: 0 0 1.25rem; + flex: 1; +} +.resource__link { + font-size: .88rem; + color: var(--harbor); + font-weight: 500; +} +.resource--crisis { + background: linear-gradient(160deg, var(--coral), var(--driftwood)); + color: var(--linen-soft); + border-color: transparent; +} +.resource--crisis:hover { background: linear-gradient(160deg, var(--driftwood), #8E6149); } +.resource--crisis .resource__kicker { color: var(--coral-soft); } +.resource--crisis h3 { color: var(--linen-soft); } +.resource--crisis p { color: rgba(250, 246, 238, .88); } +.resource--crisis .resource__link { color: var(--linen-soft); font-weight: 600; } + +/* ========================================================= + Contact + ========================================================= */ +.contact { background: var(--shell); } +.contact__card { + max-width: var(--container); + margin: 0 auto; + background: var(--linen-soft); + border-radius: var(--radius-lg); + padding: clamp(2rem, 5vw, 4rem); + display: grid; + grid-template-columns: 1fr 1fr; + gap: clamp(2rem, 5vw, 4rem); + box-shadow: 0 40px 80px -50px rgba(47, 70, 84, .4); + border: 1px solid var(--line); +} +.contact__left .h2 { margin-bottom: 1.2rem; } +.contact__details { + display: grid; + gap: 1rem; + margin-top: 2rem; + padding-top: 2rem; + border-top: 1px solid var(--line); +} +.contact__details li { display: grid; gap: .15rem; } +.contact__label { + font-size: .7rem; + letter-spacing: .22em; + text-transform: uppercase; + color: var(--muted); +} +.contact__details a { color: var(--harbor); border-bottom: 1px solid var(--line); } +.contact__details a:hover { color: var(--driftwood); } + +.contact__form { display: grid; gap: 1.1rem; } +.field { display: grid; gap: .4rem; } +.field label { + font-size: .75rem; + letter-spacing: .18em; + text-transform: uppercase; + color: var(--muted); + font-weight: 500; +} +.field input, +.field select, +.field textarea { + font-family: inherit; + font-size: 1rem; + color: var(--ink); + background: var(--linen); + border: 1px solid var(--line); + border-radius: var(--radius-sm); + padding: .85rem 1rem; + transition: border-color .2s var(--ease), background .2s var(--ease); + resize: vertical; +} +.field input:focus, +.field select:focus, +.field textarea:focus { + outline: none; + border-color: var(--harbor); + background: var(--linen-soft); +} +.field__note { + font-size: .82rem; + color: var(--muted); + margin: .5rem 0 0; +} +.field__note a { color: var(--harbor); border-bottom: 1px solid currentColor; } + +/* ========================================================= + Footer + ========================================================= */ +.footer { + background: var(--midnight); + color: rgba(250, 246, 238, .78); + padding: 4rem clamp(1.25rem, 4vw, 3rem) 2rem; +} +.footer__inner { + max-width: var(--container); + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + align-items: start; +} +.footer__brand { + display: flex; + align-items: center; + gap: 1rem; +} +.footer__brand .nav__mark { + background: rgba(255,255,255,.08); + color: var(--linen-soft); +} +.footer__brand div { display: grid; gap: .15rem; } +.footer__brand strong { + font-family: var(--serif); + font-weight: 400; + font-size: 1.2rem; + color: var(--linen-soft); +} +.footer__brand span { font-size: .85rem; } +.footer__nav { + display: flex; + gap: 1.5rem; + flex-wrap: wrap; + justify-content: flex-end; +} +.footer__nav a { font-size: .9rem; transition: color .2s var(--ease); } +.footer__nav a:hover { color: var(--coral-soft); } +.footer__fine { + grid-column: 1 / -1; + border-top: 1px solid rgba(255,255,255,.1); + padding-top: 1.5rem; + margin: 2rem 0 0; + font-size: .82rem; + color: rgba(250, 246, 238, .5); +} + +/* ========================================================= + Reveal animation + ========================================================= */ +[data-reveal] { + opacity: 0; + transform: translateY(22px); + transition: opacity .9s var(--ease), transform .9s var(--ease); + transition-delay: var(--delay, 0ms); +} +[data-reveal].is-in { + opacity: 1; + transform: translateY(0); +} + +/* ========================================================= + Responsive + ========================================================= */ +@media (max-width: 960px) { + .nav__links, .nav__cta { display: none; } + .nav__toggle { display: inline-flex; } + .nav.is-open .nav__links { + display: flex; + flex-direction: column; + gap: 1.25rem; + position: absolute; + top: 100%; left: 0; right: 0; + background: var(--linen-soft); + padding: 2rem; + border-top: 1px solid var(--line); + } + + .about__grid, + .conditions__inner, + .contact__card, + .footer__inner { grid-template-columns: 1fr; } + + .about__portrait { max-width: 480px; margin: 0 auto; } + + .approach__grid, + .services__grid, + .resources__grid { grid-template-columns: 1fr; } + .service--lg { grid-column: auto; padding: 2.25rem 1.9rem; } + + .footer__nav { justify-content: flex-start; } + + .hero__meta { grid-template-columns: 1fr 1fr; } +} + +@media (max-width: 520px) { + .hero__meta { grid-template-columns: 1fr; } + .credentials { grid-template-columns: 1fr; } +} + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.001ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.001ms !important; + } + [data-reveal] { opacity: 1; transform: none; } +} diff --git a/v4/index.html b/v4/index.html new file mode 100644 index 00000000000..9fdfeca45a8 --- /dev/null +++ b/v4/index.html @@ -0,0 +1,341 @@ + + + + + + + The Quiet Room, No. 01 — Alice Tran, PMHNP-BC, FNP-BC + + + + + + + + +
+
+ No. 01 + The Quiet Room — a letter from Alice Tran + Spring · 2026 +
+ +
+ + +
+

Fairfax, Virginia · by telehealth

+

+ A room + where you + are heard. +

+

+ A letter on compassionate psychiatry — in English and Vietnamese — from + Alice Tran, PMHNP-BC, FNP-BC. +

+ + + + +
+ + +
+
+

Chapter I

+

Arriving

+

On what it takes to ask, and what to expect when you do.

+
+ +
+

+ There is a particular bravery — quiet, almost invisible — in deciding that + something inside you deserves a closer look. Most of the people I meet have + been carrying their question for a long time: weeks, sometimes decades. + They arrive a little unsure, a little tired, a little hopeful. If that + is you, I want you to know: you are in the right place to put the weight down for an hour. +

+ +

+ I am Alice — a dual board-certified Psychiatric Mental Health and Family + Nurse Practitioner. My work is guided by a simple belief: healing begins + when a person feels truly heard. I trained at Wilkes University and + Frontier Nursing University, and I practice with the Northern Virginia + Psychiatric Group. Appointments are delivered by telehealth, which means + you can arrive from a place that already feels like yours. +

+ + + +

+ I have spent my career walking alongside international students, + immigrants, and families navigating the quiet weight of two cultures. + Tiếng Việt is welcome here — and so is whatever you arrive carrying, + named or unnamed. +

+
+
+ + +
+
+

Chapter II

+

What I believe

+

Three quiet promises I make to every person I see.

+
+ +
    +
  1. +

    I.

    +

    That listening comes first.

    +

    + No rushed intakes, no one-size-fits-all checklists. Your first visit is + an hour because your story is not a form to be filled in. +

    +
  2. +
  3. +

    II.

    +

    That a person is not a symptom.

    +

    + Sleep, family, faith, food, work, loneliness, purpose — mental health + lives inside a life, and we will speak about all of it. +

    +
  4. +
  5. +

    III.

    +

    That culture belongs in the room.

    +

    + Where you come from shapes how you heal. Language, ritual, family — none + of it needs to be left at the door. +

    +
  6. +
+
+ + +
+
+ You are not a diagnosis on a page. You are a person with a story, a + family, a future — and the bravest thing you may have done this week + is consider asking for help. +
+
— from the author's notebook
+
+ + +
+
+

Chapter III

+

How we work

+

A small, intentional practice — built for depth, not volume.

+
+ + +
+ + +
+
+

Chapter IV

+

What I help with

+

You do not have to name it perfectly to be welcome here.

+
+ +

+ These are some of the experiences people bring to our first visit. You are + welcome if you see yourself in one — or in none. Names on a page are + shorthand; a life rarely fits the shorthand. +

+ + +
+ + +
+
+

Chapter V

+

For the quiet days

+

A short shelf of reading for the in-between.

+
+ +
+ +

Essay

+

Understanding anxiety

+

What anxiety is actually doing in the body — and a few gentle things that help tonight.

+
+ +

Essay

+

Depression, in plain language

+

Separating the clinical from the cultural, and why neither deserves silence.

+
+ +

Essay

+

Living with trauma

+

A compassionate primer on why the body remembers — and what healing can look like.

+
+
+ + +
+ + +
+
+

Chapter VI

+

Beginning

+

If you're ready — or almost ready — I'd be honored to hear from you.

+
+ +
+

Dear reader,

+

+ The form below arrives on my desk directly. A few sentences are enough; + there is no need to polish. Write in English or Vietnamese — or both. + I will reply, personally, within a few days. +

+

— Alice

+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +

+ Not for emergencies. In crisis, please call or text 988. +

+
+
+
+ + + + + + + diff --git a/v4/script.js b/v4/script.js new file mode 100644 index 00000000000..1ff085a4431 --- /dev/null +++ b/v4/script.js @@ -0,0 +1,38 @@ +/* Alice Tran — v4 "The Quiet Room" + Editorial variant: reveal on scroll + gentle form handling. */ + +(() => { + const year = document.getElementById('year'); + if (year) year.textContent = new Date().getFullYear(); + + const revealables = document.querySelectorAll('[data-reveal]'); + if ('IntersectionObserver' in window && revealables.length) { + const io = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (!entry.isIntersecting) return; + const el = entry.target; + const siblings = Array.from(el.parentElement?.querySelectorAll(':scope > [data-reveal]') || []); + const index = Math.max(0, siblings.indexOf(el)); + el.style.setProperty('--delay', `${Math.min(index, 6) * 90}ms`); + el.classList.add('is-in'); + io.unobserve(el); + }); + }, { rootMargin: '0px 0px -8% 0px', threshold: 0.08 }); + + revealables.forEach((el) => io.observe(el)); + } else { + revealables.forEach((el) => el.classList.add('is-in')); + } + + const form = document.querySelector('.letter__form'); + form?.addEventListener('submit', (e) => { + e.preventDefault(); + const btn = form.querySelector('.btn-letter'); + if (!btn) return; + const original = btn.textContent; + btn.textContent = 'Sent — thank you.'; + btn.disabled = true; + form.reset(); + setTimeout(() => { btn.textContent = original; btn.disabled = false; }, 3200); + }); +})(); diff --git a/v4/styles.css b/v4/styles.css new file mode 100644 index 00000000000..ec9116b1061 --- /dev/null +++ b/v4/styles.css @@ -0,0 +1,672 @@ +/* ========================================================= + Alice Tran — V4: "The Quiet Room" + Editorial / quarterly-letter design language + Palette: bone paper, deep ink, rust, soft sage + Type: Playfair Display (display) + EB Garamond (body) + Inter (utility) + ========================================================= */ + +:root { + --bone: #F0EADD; + --paper: #F7F1E3; + --paper-soft: #FBF6EA; + --ecru: #E6DEC8; + --ink: #1D1A14; + --ink-soft: #3A3529; + --ink-muted: #6A6354; + --rust: #B35836; + --rust-deep: #8A3E23; + --rose: #CE9784; + --sage: #A6AF97; + --sage-deep: #7B856B; + --rule: rgba(29, 26, 20, 0.22); + --line: rgba(29, 26, 20, 0.12); + + --display: "Playfair Display", "Bodoni 72", "Didot", Georgia, serif; + --body: "EB Garamond", Georgia, serif; + --utility: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; + + --measure: 68ch; + --wide: 1040px; + --ease: cubic-bezier(.2,.7,.2,1); +} + +/* ---------- Reset ---------- */ +*, *::before, *::after { box-sizing: border-box; } +html { scroll-behavior: smooth; } +body { + margin: 0; + font-family: var(--body); + font-size: 19px; + line-height: 1.7; + color: var(--ink); + background: var(--paper); + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + overflow-x: hidden; + + /* subtle paper texture */ + background-image: + radial-gradient(rgba(29, 26, 20, .035) 1px, transparent 1px), + radial-gradient(rgba(29, 26, 20, .02) 1px, transparent 1px); + background-size: 3px 3px, 7px 7px; + background-position: 0 0, 1px 1px; +} +a { color: inherit; text-decoration: none; } +a:not(.btn-letter) { border-bottom: 1px solid var(--rule); transition: color .2s var(--ease), border-color .2s var(--ease); } +a:not(.btn-letter):hover { color: var(--rust); border-color: var(--rust); } +ul, ol { padding: 0; margin: 0; } +button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } + +/* ---------- Utility type ---------- */ +.sc, .sc-label { + font-family: var(--utility); + font-size: .72rem; + letter-spacing: .22em; + text-transform: uppercase; + color: var(--ink-muted); + font-weight: 500; +} +.sc-label { display: block; margin: 0 0 1rem; } + +/* ========================================================= + Masthead + ========================================================= */ +.masthead { + padding: 1.5rem clamp(1.25rem, 4vw, 3rem) 0; + max-width: 1240px; + margin: 0 auto; +} +.masthead__row { + display: grid; + grid-template-columns: 1fr auto 1fr; + gap: 1.5rem; + align-items: baseline; + font-family: var(--utility); + font-size: .78rem; + letter-spacing: .22em; + text-transform: uppercase; + color: var(--ink-muted); + font-weight: 500; +} +.masthead__issue { text-align: left; } +.masthead__mid { text-align: center; font-style: italic; text-transform: none; letter-spacing: .02em; font-family: var(--body); font-size: 1rem; color: var(--ink-soft); } +.masthead__season { text-align: right; } +.masthead__rule { + margin-top: 1.2rem; + height: 1px; + background: linear-gradient(90deg, transparent, var(--rule), var(--rule), transparent); +} + +/* ========================================================= + Cover + ========================================================= */ +.cover { + max-width: 1240px; + margin: 0 auto; + padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 4vw, 3rem) clamp(4rem, 8vw, 7rem); + text-align: center; + position: relative; +} +.dateline { + font-family: var(--utility); + font-size: .75rem; + letter-spacing: .24em; + text-transform: uppercase; + color: var(--ink-muted); + margin: 0 0 2.5rem; +} +.cover__title { + font-family: var(--display); + font-weight: 400; + font-size: clamp(3.5rem, 11vw, 9.5rem); + line-height: .94; + margin: 0; + letter-spacing: -0.02em; + color: var(--ink); +} +.cover__line { display: block; } +.cover__line--i em { font-style: italic; font-weight: 400; color: var(--rust); } +.cover__sub { + font-family: var(--body); + font-style: italic; + font-size: clamp(1.1rem, 1.6vw, 1.4rem); + color: var(--ink-soft); + max-width: 44ch; + margin: 2.5rem auto 0; + line-height: 1.55; +} +.cover__sub .sc { display: inline; } + +.cover__rule { + width: 48px; + height: 1px; + background: var(--rust); + margin: 3rem auto; + opacity: .7; +} + +.cover__index { + max-width: 520px; + margin: 0 auto; + text-align: left; + border-top: 1px solid var(--rule); + border-bottom: 1px solid var(--rule); + padding: 2rem 0; +} +.cover__index .sc-label { + text-align: center; +} +.cover__index ol { + list-style: none; + display: grid; + gap: .4rem; +} +.cover__index a { + display: flex; + align-items: baseline; + gap: 1rem; + padding: .35rem 0; + font-family: var(--body); + font-size: 1.1rem; + color: var(--ink); + border: 0; + transition: color .2s var(--ease), padding .4s var(--ease); +} +.cover__index a span { + font-family: var(--display); + font-style: italic; + color: var(--rust); + width: 2.4rem; + flex: none; +} +.cover__index a:hover { color: var(--rust); padding-left: .5rem; } + +/* ========================================================= + Chapter shell + ========================================================= */ +.chapter { + max-width: var(--wide); + margin: 0 auto; + padding: clamp(4rem, 8vw, 8rem) clamp(1.25rem, 4vw, 3rem); + position: relative; +} +.chapter--tinted { + max-width: none; + background: var(--bone); + border-top: 1px solid var(--rule); + border-bottom: 1px solid var(--rule); + padding-left: 0; padding-right: 0; +} +.chapter--tinted > * { + max-width: var(--wide); + margin-left: auto; + margin-right: auto; + padding-left: clamp(1.25rem, 4vw, 3rem); + padding-right: clamp(1.25rem, 4vw, 3rem); +} +.chapter--closing { background: var(--paper-soft); } + +.chapter__head { + text-align: center; + margin: 0 auto 3.5rem; + max-width: 48ch; +} +.chapter__num { + font-family: var(--utility); + font-size: .74rem; + letter-spacing: .28em; + text-transform: uppercase; + color: var(--rust); + margin: 0 0 1.2rem; + font-weight: 500; +} +.chapter__title { + font-family: var(--display); + font-weight: 400; + font-size: clamp(2.4rem, 5.2vw, 4.2rem); + line-height: 1.02; + margin: 0 0 1.25rem; + color: var(--ink); + letter-spacing: -0.015em; +} +.chapter__stand { + font-family: var(--body); + font-style: italic; + font-size: 1.15rem; + color: var(--ink-soft); + margin: 0; + line-height: 1.5; +} +.chapter__body.prose { + max-width: var(--measure); + margin: 0 auto; +} +.prose p { margin: 0 0 1.2rem; } +.prose em { color: var(--rust-deep); } + +/* Drop cap */ +.dropcap::first-letter { + font-family: var(--display); + font-size: 5.2em; + line-height: .85; + float: left; + padding: .05em .12em 0 0; + margin: .08em 0 0; + color: var(--rust); + font-weight: 400; +} + +/* Marginalia */ +.marginalia { + float: right; + width: 240px; + margin: .4rem -7rem 1.5rem 2rem; + padding: 1rem 1.1rem; + border-left: 1px solid var(--rust); + background: var(--paper-soft); + font-family: var(--body); + font-style: italic; + font-size: .98rem; + color: var(--ink-soft); + line-height: 1.5; + position: relative; +} +.marginalia__mark { + display: block; + color: var(--rust); + font-style: normal; + margin-bottom: .25rem; + font-size: .9rem; +} +.marginalia p { margin: 0; } + +/* ========================================================= + Chapter II — Tenets + ========================================================= */ +.tenets { + list-style: none; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 3rem 2.5rem; + max-width: var(--wide); + margin: 0 auto; + padding: 0 clamp(1.25rem, 4vw, 3rem); +} +.tenets li { + border-top: 1px solid var(--rust); + padding-top: 1.5rem; +} +.tenet__num { + font-family: var(--display); + font-style: italic; + font-size: 2rem; + color: var(--rust); + margin: 0 0 .6rem; + line-height: 1; +} +.tenets h3 { + font-family: var(--display); + font-weight: 400; + font-size: 1.6rem; + line-height: 1.15; + margin: 0 0 1rem; + color: var(--ink); + letter-spacing: -0.01em; +} +.tenets p { + margin: 0; + font-size: 1.02rem; + color: var(--ink-soft); + line-height: 1.6; +} + +/* ========================================================= + Pull quote + ========================================================= */ +.pullquote { + max-width: 900px; + margin: clamp(3rem, 8vw, 7rem) auto; + padding: 0 clamp(1.25rem, 4vw, 3rem); + text-align: center; +} +.pullquote blockquote { + font-family: var(--display); + font-style: italic; + font-weight: 400; + font-size: clamp(1.6rem, 3.4vw, 2.8rem); + line-height: 1.3; + color: var(--ink); + margin: 0 0 1.5rem; + letter-spacing: -0.01em; + position: relative; +} +.pullquote blockquote::before, +.pullquote blockquote::after { + content: ""; + display: block; + width: 40px; height: 1px; + background: var(--rust); + margin: 0 auto 2rem; +} +.pullquote blockquote::after { margin: 2rem auto 0; } +.pullquote figcaption { + font-family: var(--utility); + font-size: .74rem; + letter-spacing: .22em; + text-transform: uppercase; + color: var(--ink-muted); +} + +/* ========================================================= + Chapter III — Menu + ========================================================= */ +.menu { + max-width: var(--wide); + margin: 0 auto; + padding: 0 clamp(1.25rem, 4vw, 3rem); + display: grid; + gap: 0; +} +.menu__row { + display: grid; + grid-template-columns: 1fr 1.2fr; + gap: 2rem; + padding: 2rem 0; + border-top: 1px solid var(--rule); + align-items: start; + transition: padding-left .4s var(--ease); +} +.menu__row:last-child { border-bottom: 1px solid var(--rule); } +.menu__row:hover { padding-left: .75rem; } +.menu__row dt { display: grid; gap: .5rem; } +.menu__name { + font-family: var(--display); + font-size: clamp(1.4rem, 2.6vw, 2rem); + line-height: 1.15; + color: var(--ink); + letter-spacing: -0.01em; +} +.menu__meta { + font-family: var(--utility); + font-size: .72rem; + letter-spacing: .22em; + text-transform: uppercase; + color: var(--ink-muted); +} +.menu__row dd { + margin: 0; + color: var(--ink-soft); + font-size: 1.05rem; + line-height: 1.65; +} +.menu__row--accent .menu__name { color: var(--rust); font-style: italic; } + +/* ========================================================= + Chapter IV — Inline list + ========================================================= */ +.inline-list { + list-style: none; + max-width: var(--measure); + margin: 2.5rem auto 0; + padding: 2.5rem 0 0; + border-top: 1px solid var(--rule); + font-family: var(--display); + font-size: clamp(1.4rem, 2.6vw, 2.2rem); + line-height: 1.45; + text-align: center; + letter-spacing: -0.01em; + color: var(--ink); +} +.inline-list li { display: inline; } +.inline-list li::after { + content: " · "; + color: var(--rust); + font-style: italic; + margin: 0 .35rem; +} +.inline-list li:last-child::after { content: ""; } +.inline-list li:nth-child(even) { font-style: italic; color: var(--ink-soft); } + +/* ========================================================= + Chapter V — Shelf + crisis note + ========================================================= */ +.shelf { + max-width: var(--wide); + margin: 0 auto; + padding: 0 clamp(1.25rem, 4vw, 3rem); + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2.5rem; +} +.shelf__item { + display: block; + border: 0; + border-top: 1px solid var(--rust); + padding: 1.5rem 0 0; + color: var(--ink); + transition: transform .4s var(--ease); +} +.shelf__item:hover { transform: translateY(-4px); color: var(--rust); border-color: var(--rust); } +.shelf__label { + font-family: var(--utility); + font-size: .72rem; + letter-spacing: .22em; + text-transform: uppercase; + color: var(--rust); + margin: 0 0 .8rem; + font-weight: 500; +} +.shelf__item h3 { + font-family: var(--display); + font-weight: 400; + font-size: 1.5rem; + line-height: 1.2; + margin: 0 0 .75rem; + color: inherit; + letter-spacing: -0.01em; +} +.shelf__item p { + margin: 0; + font-size: 1rem; + color: var(--ink-soft); + line-height: 1.6; +} + +.crisis-note { + max-width: var(--measure); + margin: 4rem auto 0; + padding: 2rem 2.25rem; + background: var(--ink); + color: var(--paper); + border-radius: 2px; + position: relative; +} +.crisis-note::before { + content: ""; + position: absolute; + left: 0; top: 0; bottom: 0; + width: 4px; + background: var(--rust); +} +.crisis-note .sc-label { color: var(--rose); } +.crisis-note p { margin: 0; font-family: var(--body); font-size: 1.05rem; line-height: 1.6; } +.crisis-note a { color: var(--rose); border-bottom: 1px solid var(--rose); } +.crisis-note a:hover { color: var(--paper); border-color: var(--paper); } + +/* ========================================================= + Chapter VI — Letter + ========================================================= */ +.letter { + max-width: 620px; + margin: 0 auto; + background: var(--paper); + border: 1px solid var(--rule); + padding: clamp(2rem, 5vw, 3.5rem); + position: relative; + box-shadow: 0 40px 80px -60px rgba(29, 26, 20, .4); +} +.letter::before { + content: ""; + position: absolute; + top: -12px; left: -12px; right: -12px; bottom: -12px; + border: 1px solid var(--rule); + pointer-events: none; +} +.letter__salutation { + font-family: var(--display); + font-style: italic; + font-size: 1.4rem; + margin: 0 0 1.2rem; + color: var(--ink); +} +.letter p { + font-family: var(--body); + font-size: 1.08rem; + line-height: 1.65; + color: var(--ink-soft); + margin: 0 0 1rem; +} +.letter__sign { + font-family: var(--display); + font-style: italic; + font-size: 1.3rem; + margin: 1.5rem 0 2.5rem !important; + color: var(--rust); +} + +.letter__form { display: grid; gap: 1.1rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--rule); } +.field { display: grid; gap: .35rem; } +.field label { + font-family: var(--utility); + font-size: .72rem; + letter-spacing: .22em; + text-transform: uppercase; + color: var(--ink-muted); + font-weight: 500; +} +.field input, .field select, .field textarea { + font-family: var(--body); + font-size: 1.05rem; + color: var(--ink); + background: var(--paper-soft); + border: 0; + border-bottom: 1px solid var(--rule); + padding: .7rem .2rem; + transition: border-color .2s var(--ease); + resize: vertical; + border-radius: 0; +} +.field textarea { border: 1px solid var(--rule); padding: .85rem 1rem; } +.field input:focus, .field select:focus, .field textarea:focus { + outline: none; + border-color: var(--rust); +} +.btn-letter { + justify-self: start; + margin-top: .5rem; + padding: .9rem 1.6rem; + background: var(--ink); + color: var(--paper); + font-family: var(--utility); + font-size: .8rem; + letter-spacing: .22em; + text-transform: uppercase; + font-weight: 500; + transition: background .3s var(--ease), transform .3s var(--ease); + border-radius: 2px; +} +.btn-letter:hover:not(:disabled) { background: var(--rust); transform: translateY(-2px); } +.btn-letter:disabled { background: var(--sage-deep); cursor: default; } +.letter__fine { + font-family: var(--utility); + font-size: .82rem !important; + color: var(--ink-muted) !important; + margin-top: .5rem !important; +} +.letter__fine a { color: var(--rust); } + +/* ========================================================= + Colophon + ========================================================= */ +.colophon { + max-width: 1240px; + margin: 0 auto; + padding: 4rem clamp(1.25rem, 4vw, 3rem) 3rem; +} +.colophon__rule { + height: 1px; + background: var(--rule); + margin-bottom: 3rem; +} +.colophon__grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 3rem; +} +.colophon__grid p { + font-size: .98rem; + line-height: 1.6; + color: var(--ink-soft); + margin: 0; +} +.colophon__grid strong { + color: var(--ink); + font-weight: 500; + font-family: var(--display); + font-size: 1.15rem; +} +.colophon__mark { + margin-top: 3rem; + padding-top: 1.5rem; + border-top: 1px solid var(--rule); + text-align: center; +} +.colophon__mark span { + font-family: var(--utility); + font-size: .74rem; + letter-spacing: .3em; + text-transform: uppercase; + color: var(--ink-muted); +} + +/* ========================================================= + Reveal animation + ========================================================= */ +[data-reveal] { + opacity: 0; + transform: translateY(18px); + transition: opacity 1s var(--ease), transform 1s var(--ease); + transition-delay: var(--delay, 0ms); +} +[data-reveal].is-in { + opacity: 1; + transform: translateY(0); +} + +/* ========================================================= + Responsive + ========================================================= */ +@media (max-width: 860px) { + .masthead__row { grid-template-columns: 1fr; text-align: center; } + .masthead__issue, .masthead__season, .masthead__mid { text-align: center; } + + .tenets { grid-template-columns: 1fr; gap: 2rem; } + .menu__row { grid-template-columns: 1fr; gap: .6rem; } + .shelf { grid-template-columns: 1fr; gap: 2rem; } + .colophon__grid { grid-template-columns: 1fr; gap: 2rem; } + + .marginalia { + float: none; + width: auto; + margin: 2rem 0; + } + .inline-list { font-size: 1.25rem; } +} + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.001ms !important; + transition-duration: 0.001ms !important; + } + [data-reveal] { opacity: 1; transform: none; } +} diff --git a/v5/index.html b/v5/index.html new file mode 100644 index 00000000000..0177c0e4459 --- /dev/null +++ b/v5/index.html @@ -0,0 +1,262 @@ + + + + + + + Alice Tran, PMHNP-BC, FNP-BC — Psychiatric Care + + + + + + + + + + + +
+
+ + +
+

+ + Adult Psychiatry + · + Northern Virginia + · + Ages 18–65 +

+ +

+ Care that meets you + where you are + — and helps you go further. +

+ +

+ Thoughtful medication management and supportive therapy for anxiety, + depression, ADHD, burnout, and other mental-health concerns — + in English and Tiếng Việt. +

+ + + +
    +
  • + +
    Accepting new patientsTypically seen in 1–2 weeks
    +
  • +
  • + +
    In-person & virtualWhichever fits your day
    +
  • +
  • + +
    English & Tiếng ViệtCulturally attuned care
    +
  • +
+
+ + + +
+ + +
+
+ 60min + Initial evaluations, unhurried +
+
+ 2 + Master's degrees, dual-boarded +
+
+ 100% + Telehealth-friendly, private +
+
+ 5min + Booking takes about that long +
+
+
+ + +
+
+

About

+

A clinician first. A neighbor second.

+

+ I'm Alice — a dual board-certified Psychiatric Mental Health and Family + Nurse Practitioner. My work is guided by a simple belief: healing begins + when someone feels truly heard. I trained at Wilkes University and + Frontier Nursing University, and I practice with the Northern Virginia + Psychiatric Group. +

+
+
+ +
+
+

Services

+

Care built for depth, not volume.

+
+
+

Comprehensive Evaluation

+

60 min · new patients

+

A spacious first appointment to understand your history, symptoms, and goals — then a plan built with you.

+
+
+

Medication Management

+

Up to 30 min · follow-up

+

Ongoing, thoughtful prescribing with close attention to how you're actually feeling.

+
+
+

Supportive Therapy

+

Woven into care

+

Brief, focused conversations that sit beside medication — because a script without context rarely heals.

+
+
+
+
+ + +
+
+
+

Begin here

+

The first step is usually the hardest.

+

+ Call, tap Book Now, or send a short note — a few sentences is plenty. +

+
+ +
+
+ + + + + + diff --git a/v5/script.js b/v5/script.js new file mode 100644 index 00000000000..82a84f7fe44 --- /dev/null +++ b/v5/script.js @@ -0,0 +1,67 @@ +/* Alice Tran — modern redesign + Tiny, dependency-free interactions: reveal on scroll, nav state, mobile menu. */ + +(() => { + // Current year in footer + const year = document.getElementById('year'); + if (year) year.textContent = new Date().getFullYear(); + + // Nav: scrolled state + const nav = document.getElementById('nav'); + const setNavState = () => { + if (!nav) return; + nav.classList.toggle('is-scrolled', window.scrollY > 12); + }; + setNavState(); + window.addEventListener('scroll', setNavState, { passive: true }); + + // Mobile menu toggle + const toggle = nav?.querySelector('.nav__toggle'); + const links = nav?.querySelector('.nav__links'); + toggle?.addEventListener('click', () => { + const open = nav.classList.toggle('is-open'); + toggle.setAttribute('aria-expanded', open ? 'true' : 'false'); + }); + links?.querySelectorAll('a').forEach(a => + a.addEventListener('click', () => { + nav.classList.remove('is-open'); + toggle?.setAttribute('aria-expanded', 'false'); + }) + ); + + // Reveal on scroll — stagger siblings a touch + const revealables = document.querySelectorAll('[data-reveal]'); + if ('IntersectionObserver' in window && revealables.length) { + const io = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (!entry.isIntersecting) return; + const el = entry.target; + const siblings = Array.from(el.parentElement?.querySelectorAll(':scope > [data-reveal]') || []); + const index = Math.max(0, siblings.indexOf(el)); + el.style.setProperty('--delay', `${Math.min(index, 5) * 80}ms`); + el.classList.add('is-in'); + io.unobserve(el); + }); + }, { rootMargin: '0px 0px -8% 0px', threshold: 0.08 }); + + revealables.forEach((el) => io.observe(el)); + } else { + revealables.forEach((el) => el.classList.add('is-in')); + } + + // Contact form — friendly, no backend + const form = document.querySelector('.contact__form'); + form?.addEventListener('submit', (e) => { + e.preventDefault(); + const btn = form.querySelector('button[type="submit"]'); + if (!btn) return; + const original = btn.textContent; + btn.textContent = 'Thank you — talk soon.'; + btn.disabled = true; + form.reset(); + setTimeout(() => { + btn.textContent = original; + btn.disabled = false; + }, 3200); + }); +})(); diff --git a/v5/styles.css b/v5/styles.css new file mode 100644 index 00000000000..8b84c579086 --- /dev/null +++ b/v5/styles.css @@ -0,0 +1,631 @@ +/* ========================================================= + Alice Tran — V5: "The Practitioner" + Portrait-forward, editorial. Puts the clinician in the frame, + not the furniture. Warm sage/cream palette with a botanical + deep-green anchor and warm coral accents. + ========================================================= */ + +:root { + --paper: #F4EFE4; + --paper-soft: #FAF5EB; + --cream: #EEE7D6; + --sand: #E4DCC7; + --sage: #A8B39A; + --sage-deep: #6E7E6A; + --forest: #1F3A2E; + --forest-deep: #14261E; + --moss: #2C4838; + --coral: #C67552; + --coral-soft: #E4B99F; + --gold: #B08A57; + --ink: #191C18; + --ink-soft: #3E413C; + --ink-muted: #6E7268; + --line: rgba(25, 28, 24, 0.12); + + --display: "Instrument Serif", "Cormorant Garamond", Georgia, serif; + --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; + + --container: 1240px; + --radius-sm: 8px; + --radius: 18px; + --radius-lg: 24px; + --ease: cubic-bezier(.2,.7,.2,1); +} + +/* ---------- Reset ---------- */ +*, *::before, *::after { box-sizing: border-box; } +html { scroll-behavior: smooth; } +body { + margin: 0; + font-family: var(--sans); + font-size: 17px; + line-height: 1.6; + color: var(--ink); + background: var(--paper); + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + overflow-x: hidden; +} +img, svg { display: block; max-width: 100%; } +a { color: inherit; text-decoration: none; } +button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } +ul, ol { list-style: none; padding: 0; margin: 0; } + +/* ---------- Utility ---------- */ +.eyebrow { + display: inline-flex; + align-items: center; + gap: .6rem; + font-family: var(--sans); + font-size: .74rem; + letter-spacing: .22em; + text-transform: uppercase; + color: var(--sage-deep); + font-weight: 500; + margin: 0 0 1.5rem; +} +.eyebrow__dot { + width: 6px; height: 6px; + border-radius: 50%; + background: var(--coral); + display: inline-block; +} +.eyebrow__sep { color: var(--line); } +.eyebrow--light { color: var(--sage); } +.eyebrow--light .eyebrow__dot { background: var(--coral-soft); } + +.italic { + font-family: var(--display); + font-style: italic; + font-weight: 400; + color: var(--forest); +} +.lang-vn { font-style: italic; color: var(--forest); } + +/* ---------- Buttons ---------- */ +.btn { + display: inline-flex; + align-items: center; + gap: .55rem; + padding: 1rem 1.6rem; + border-radius: 999px; + font-family: var(--sans); + font-weight: 500; + font-size: .95rem; + transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); + border: 1px solid transparent; +} +.btn svg { width: 16px; height: 16px; } +.btn--sm { padding: .55rem 1.1rem; font-size: .84rem; } +.btn--lg { padding: 1.15rem 1.9rem; font-size: 1rem; } +.btn--primary { + background: var(--forest); + color: var(--paper-soft); + box-shadow: 0 14px 30px -14px rgba(31, 58, 46, .55); +} +.btn--primary:hover { background: var(--forest-deep); transform: translateY(-2px); box-shadow: 0 20px 36px -14px rgba(31, 58, 46, .65); } +.btn--ghost { + background: transparent; + color: var(--forest); + border-color: var(--line); +} +.btn--ghost:hover { background: var(--paper-soft); border-color: var(--forest); } +.btn--ghost-light { + color: var(--paper-soft); + border-color: rgba(255,255,255,.28); +} +.btn--ghost-light:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.6); } + +/* ========================================================= + Navigation + ========================================================= */ +.nav { + position: sticky; + top: 0; + z-index: 50; + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + background: rgba(244, 239, 228, 0.78); + border-bottom: 1px solid transparent; + transition: background .3s var(--ease), border-color .3s var(--ease); +} +.nav.is-scrolled { + background: rgba(244, 239, 228, 0.94); + border-bottom-color: var(--line); +} +.nav__inner { + max-width: var(--container); + margin: 0 auto; + padding: 1rem clamp(1.25rem, 4vw, 2.5rem); + display: grid; + grid-template-columns: auto 1fr auto; + gap: 2rem; + align-items: center; +} +.nav__brand { + display: inline-flex; + align-items: center; + gap: .75rem; + color: var(--forest); +} +.nav__mark { + display: inline-grid; + place-items: center; + width: 40px; height: 40px; + border-radius: 50%; + background: var(--cream); + color: var(--forest); +} +.nav__wordmark { + font-family: var(--display); + font-size: 1.4rem; + color: var(--ink); + letter-spacing: -0.01em; + line-height: 1.05; +} +.nav__wordmark span { + display: block; + font-size: .7rem; + letter-spacing: .18em; + text-transform: uppercase; + color: var(--ink-muted); + font-family: var(--sans); + margin-top: 2px; + font-weight: 500; +} +.nav__links { + display: flex; + gap: 1.75rem; + justify-content: center; + font-size: .92rem; + color: var(--ink-soft); +} +.nav__links a { position: relative; padding: .25rem 0; transition: color .2s var(--ease); } +.nav__links a::after { + content: ""; + position: absolute; left: 0; right: 0; bottom: -4px; + height: 1px; + background: var(--forest); + transform: scaleX(0); + transform-origin: right; + transition: transform .35s var(--ease); +} +.nav__links a:hover { color: var(--forest); } +.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; } +.nav__cta-group { display: inline-flex; gap: .5rem; } + +.nav__toggle { + display: none; + width: 40px; height: 40px; + flex-direction: column; + justify-content: center; + gap: 5px; + align-items: center; +} +.nav__toggle span { + display: block; + width: 22px; height: 1.5px; + background: var(--forest); + transition: transform .3s var(--ease), opacity .2s var(--ease); +} +.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } +.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; } +.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } + +/* ========================================================= + Hero — portrait-forward split + ========================================================= */ +.hero { + padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2rem, 5vw, 4rem); + background: + radial-gradient(900px 400px at 90% 10%, rgba(228, 185, 159, .28), transparent 60%), + radial-gradient(700px 500px at 5% 80%, rgba(168, 179, 154, .35), transparent 55%), + var(--paper); + position: relative; + overflow: hidden; +} +.hero::before { + content: ""; + position: absolute; + inset: 0; + background-image: radial-gradient(rgba(25, 28, 24, .04) 1px, transparent 1px); + background-size: 3px 3px; + opacity: .5; + mix-blend-mode: multiply; + pointer-events: none; +} +.hero__grid { + max-width: var(--container); + margin: 0 auto; + display: grid; + grid-template-columns: 1.15fr 1fr; + gap: clamp(2rem, 6vw, 5rem); + align-items: center; + position: relative; +} + +/* Text side */ +.hero__text { position: relative; } +.hero__title { + font-family: var(--display); + font-weight: 400; + font-size: clamp(2.6rem, 6vw, 5.2rem); + line-height: 1.02; + letter-spacing: -0.025em; + color: var(--ink); + margin: 0 0 1.75rem; + max-width: 14ch; +} +.hero__lede { + font-size: clamp(1.05rem, 1.3vw, 1.2rem); + color: var(--ink-soft); + line-height: 1.55; + max-width: 46ch; + margin: 0 0 2rem; +} +.hero__actions { + display: flex; + flex-wrap: wrap; + gap: .8rem; + margin-bottom: 2.5rem; +} +.hero__trust { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 1.25rem; + padding-top: 2rem; + border-top: 1px solid var(--line); +} +.hero__trust li { + display: flex; + gap: .7rem; + align-items: flex-start; + font-size: .9rem; +} +.hero__trust .check { + width: 22px; height: 22px; + border-radius: 50%; + background: var(--forest); + color: var(--paper-soft); + display: grid; + place-items: center; + font-size: .72rem; + flex: none; + margin-top: 2px; + font-weight: 600; +} +.hero__trust strong { + display: block; + font-family: var(--sans); + font-weight: 600; + color: var(--ink); + font-size: .95rem; + line-height: 1.25; +} +.hero__trust span:not(.check) { + color: var(--ink-muted); + font-size: .85rem; + line-height: 1.4; + display: block; + margin-top: 2px; +} + +/* Portrait card */ +.hero__portrait { + position: relative; +} +.pcard { + position: relative; + margin: 0; + aspect-ratio: 4 / 5; + max-width: 460px; + margin-left: auto; +} +.pcard__frame { + position: relative; + width: 100%; + height: 100%; + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: + 0 40px 80px -40px rgba(31, 58, 46, .35), + 0 0 0 1px rgba(25, 28, 24, .06); + transform: rotate(-1.5deg); + transition: transform .8s var(--ease); + background: var(--cream); +} +.pcard:hover .pcard__frame { transform: rotate(0); } +.pcard__art { width: 100%; height: 100%; object-fit: cover; } + +/* Behind-card decorative slab */ +.pcard::before { + content: ""; + position: absolute; + inset: 2rem -1.25rem -1.25rem 2rem; + background: linear-gradient(160deg, var(--sage) 0%, var(--sage-deep) 100%); + border-radius: var(--radius-lg); + z-index: -1; + opacity: .5; +} + +/* Floating badges */ +.pcard__badge { + position: absolute; + background: var(--paper-soft); + border: 1px solid var(--line); + border-radius: var(--radius); + padding: .85rem 1.1rem; + box-shadow: 0 20px 40px -20px rgba(25, 28, 24, .18); + display: flex; + align-items: center; + gap: .75rem; + z-index: 2; +} +.pcard__badge--top { + top: -1rem; left: -2rem; + padding: 1.1rem 1.3rem; +} +.pcard__badge-num { + font-family: var(--display); + font-size: 2.2rem; + line-height: 1; + color: var(--forest); + letter-spacing: -0.02em; +} +.pcard__badge-label { + font-size: .7rem; + letter-spacing: .16em; + text-transform: uppercase; + color: var(--ink-muted); + line-height: 1.35; + font-weight: 500; +} +.pcard__badge--bottom { + right: -1.5rem; + bottom: 2rem; +} +.pcard__badge--bottom > div { + display: grid; +} +.pcard__badge--bottom > div span:first-child { + font-family: var(--sans); + font-weight: 600; + color: var(--ink); + font-size: .85rem; +} +.pcard__badge--bottom > div span:last-child { + font-family: var(--sans); + font-size: .7rem; + letter-spacing: .16em; + text-transform: uppercase; + color: var(--ink-muted); + margin-top: 2px; + font-weight: 500; +} +.pcard__badge-icon { + width: 32px; height: 32px; + border-radius: 50%; + background: var(--coral); + color: var(--paper-soft); + display: grid; + place-items: center; +} +.pcard__badge-icon svg { width: 18px; height: 18px; } + +/* Info strip */ +.hero__strip { + max-width: var(--container); + margin: clamp(3rem, 6vw, 5rem) auto 0; + padding: 2rem clamp(1rem, 3vw, 2rem); + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.5rem; + border-top: 1px solid var(--line); + border-bottom: 1px solid var(--line); + background: rgba(250, 245, 235, .55); + border-radius: var(--radius); +} +.hero__strip > div { + display: grid; + gap: .35rem; + border-left: 1px solid var(--line); + padding-left: 1.5rem; +} +.hero__strip > div:first-child { border-left: 0; padding-left: 0; } +.hero__strip-num { + font-family: var(--display); + font-size: clamp(2.5rem, 4vw, 3.2rem); + line-height: 1; + color: var(--forest); + letter-spacing: -0.02em; +} +.hero__strip-num span { + font-size: .5em; + color: var(--sage-deep); + margin-left: 2px; + font-style: italic; +} +.hero__strip-label { + font-size: .82rem; + color: var(--ink-muted); + letter-spacing: .01em; + line-height: 1.4; +} + +/* ========================================================= + Sections + ========================================================= */ +.section { + padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 4vw, 2.5rem); +} +.section--soft { background: var(--paper-soft); } +.section--dark { + background: linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%); + color: var(--paper-soft); + position: relative; + overflow: hidden; +} +.section--dark::before { + content: ""; + position: absolute; + top: -100px; right: -100px; + width: 400px; height: 400px; + background: radial-gradient(circle, rgba(198, 117, 82, .18), transparent 70%); + pointer-events: none; +} +.section__inner { + max-width: var(--container); + margin: 0 auto; + position: relative; +} +.section__inner--split { + display: grid; + grid-template-columns: 1.4fr 1fr; + gap: clamp(2rem, 5vw, 4rem); + align-items: end; +} +.section__title { + font-family: var(--display); + font-weight: 400; + font-size: clamp(2.2rem, 4.6vw, 3.6rem); + line-height: 1.05; + letter-spacing: -0.02em; + margin: 0 0 1.5rem; + max-width: 20ch; + color: inherit; +} +.section--dark .section__title { color: var(--paper-soft); } +.section__title em { font-style: italic; color: var(--forest); font-weight: 400; } +.section--dark .section__title em { color: var(--coral-soft); } +.section__lede { + font-size: 1.1rem; + color: var(--ink-soft); + max-width: 60ch; + line-height: 1.6; + margin: 0; +} +.section--dark .section__lede { color: rgba(250, 245, 235, .78); } + +.services { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.25rem; + margin-top: 3rem; +} +.svc { + padding: 2rem 1.75rem; + background: var(--paper-soft); + border: 1px solid var(--line); + border-radius: var(--radius); + transition: transform .35s var(--ease), background .3s var(--ease); +} +.svc:hover { transform: translateY(-4px); background: var(--cream); } +.svc h3 { + font-family: var(--display); + font-weight: 400; + font-size: 1.6rem; + margin: 0 0 .4rem; + line-height: 1.15; + letter-spacing: -0.01em; + color: var(--ink); +} +.svc__meta { + font-family: var(--sans); + font-size: .74rem; + letter-spacing: .18em; + text-transform: uppercase; + color: var(--sage-deep); + margin: 0 0 1rem; + font-weight: 500; +} +.svc p { color: var(--ink-soft); margin: 0; font-size: .96rem; line-height: 1.6; } + +.cta-stack { + display: grid; + gap: .75rem; + justify-items: stretch; +} + +/* ========================================================= + Footer + ========================================================= */ +.footer { + background: var(--forest-deep); + color: rgba(250, 245, 235, .8); + padding: 3rem clamp(1.25rem, 4vw, 2.5rem); +} +.footer__inner { + max-width: var(--container); + margin: 0 auto; + display: grid; + gap: 1.5rem; +} +.footer strong { + font-family: var(--display); + font-weight: 400; + font-size: 1.15rem; + color: var(--paper-soft); +} +.footer__fine { + border-top: 1px solid rgba(255, 255, 255, .1); + padding-top: 1rem; + font-size: .82rem; + color: rgba(250, 245, 235, .5); + margin: 0; +} + +/* ========================================================= + Reveal + ========================================================= */ +[data-reveal] { + opacity: 0; + transform: translateY(20px); + transition: opacity .9s var(--ease), transform .9s var(--ease); + transition-delay: var(--delay, 0ms); +} +[data-reveal].is-in { opacity: 1; transform: translateY(0); } + +/* ========================================================= + Responsive + ========================================================= */ +@media (max-width: 1080px) { + .hero__grid { grid-template-columns: 1fr; gap: 3.5rem; } + .hero__portrait { max-width: 460px; margin: 0 auto; } + .pcard__badge--top { left: 0; } + .pcard__badge--bottom { right: 0; } + .hero__strip { grid-template-columns: repeat(2, 1fr); } + .hero__strip > div:nth-child(3) { border-left: 0; padding-left: 0; } +} +@media (max-width: 960px) { + .nav__links, .nav__cta-group { display: none; } + .nav__toggle { display: inline-flex; } + .nav.is-open .nav__links { + display: flex; + flex-direction: column; + gap: 1.25rem; + position: absolute; + top: 100%; left: 0; right: 0; + background: var(--paper-soft); + padding: 2rem; + border-top: 1px solid var(--line); + } + .hero__trust { grid-template-columns: 1fr; } + .services { grid-template-columns: 1fr; } + .section__inner--split { grid-template-columns: 1fr; } +} +@media (max-width: 560px) { + .hero__strip { grid-template-columns: 1fr; } + .hero__strip > div { border-left: 0; padding-left: 0; padding-top: 1rem; border-top: 1px solid var(--line); } + .hero__strip > div:first-child { border-top: 0; padding-top: 0; } + .pcard__badge--top { top: -.5rem; left: -.5rem; padding: .85rem 1rem; } + .pcard__badge-num { font-size: 1.7rem; } + .pcard__badge--bottom { right: -.5rem; bottom: 1rem; padding: .7rem .9rem; } +} +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.001ms !important; + transition-duration: 0.001ms !important; + } + [data-reveal] { opacity: 1; transform: none; } +} diff --git a/v6/index.html b/v6/index.html new file mode 100644 index 00000000000..db8da138917 --- /dev/null +++ b/v6/index.html @@ -0,0 +1,183 @@ + + + + + + + Alice Tran Psychiatric Care — Feel like yourself again + + + + + + + + + + + + + + +
+ + + +
+

Adult Psychiatry  ·  Virginia  ·  Ages 18–65

+ +

Feel like yourself again.

+ +

+ Thoughtful medication management and supportive therapy for anxiety, + depression, ADHD, burnout, and other mental health conditions +

+ + + + + +

+ New patients typically seen within 1–2 weeks  ·  Online booking takes about 5 minutes +

+
+ + + +
+ + + + diff --git a/v6/script.js b/v6/script.js new file mode 100644 index 00000000000..6ff1b53b00a --- /dev/null +++ b/v6/script.js @@ -0,0 +1,20 @@ +/* Alice Tran — v6: current-site recreation with new hero background. + Minimal JS: mobile menu toggle only. */ + +(() => { + const nav = document.querySelector('.nav'); + const toggle = nav?.querySelector('.nav__toggle'); + const links = nav?.querySelector('.nav__links'); + + toggle?.addEventListener('click', () => { + const open = nav.classList.toggle('is-open'); + toggle.setAttribute('aria-expanded', open ? 'true' : 'false'); + }); + + links?.querySelectorAll('a').forEach((a) => + a.addEventListener('click', () => { + nav.classList.remove('is-open'); + toggle?.setAttribute('aria-expanded', 'false'); + }) + ); +})(); diff --git a/v6/styles.css b/v6/styles.css new file mode 100644 index 00000000000..741838c9d95 --- /dev/null +++ b/v6/styles.css @@ -0,0 +1,312 @@ +/* ========================================================= + Alice Tran Psychiatric Care — V6 + Faithful recreation of the current live hero design, + with the interior photo replaced by a soft botanical + watercolor-wash background. + ========================================================= */ + +:root { + --cream: #F4F0E7; + --cream-deep: #ECE7DA; + --forest: #2B4432; + --forest-deep: #1E3324; + --sage: #8FA083; + --ink: #23291F; + --ink-soft: #3F463A; + --ink-muted: #6E7568; + --line: rgba(35, 41, 31, 0.14); + + --serif: "Cormorant Garamond", Georgia, serif; + --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; + + --ease: cubic-bezier(.2,.7,.2,1); +} + +*, *::before, *::after { box-sizing: border-box; } +html { scroll-behavior: smooth; } +body { + margin: 0; + font-family: var(--sans); + font-size: 16px; + line-height: 1.6; + color: var(--ink); + background: var(--cream); + -webkit-font-smoothing: antialiased; + overflow-x: hidden; +} +a { color: inherit; text-decoration: none; } +button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } +ul { list-style: none; margin: 0; padding: 0; } + +/* ---------- Top accent bar ---------- */ +.topbar { + height: 6px; + background: var(--forest-deep); +} + +/* ---------- Pills (buttons) ---------- */ +.pill { + display: inline-flex; + align-items: center; + justify-content: center; + gap: .5rem; + padding: .6rem 1.35rem; + border-radius: 999px; + font-size: .88rem; + font-weight: 500; + letter-spacing: .01em; + transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); + border: 1px solid transparent; + white-space: nowrap; +} +.pill--outline { + border-color: rgba(35, 41, 31, .3); + color: var(--ink); + background: transparent; +} +.pill--outline:hover { border-color: var(--forest); color: var(--forest); background: rgba(255,255,255,.5); } +.pill--solid { + background: var(--forest); + color: #F6F3EA; +} +.pill--solid:hover { background: var(--forest-deep); transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(43, 68, 50, .6); } +.pill--lg { padding: .85rem 1.7rem; font-size: .95rem; } + +/* ========================================================= + Navigation + ========================================================= */ +.nav { + background: var(--cream); + border-bottom: 1px solid var(--line); + position: sticky; + top: 0; + z-index: 40; +} +.nav__inner { + max-width: 1440px; + margin: 0 auto; + padding: .9rem clamp(1.25rem, 3.5vw, 3rem); + display: grid; + grid-template-columns: auto 1fr auto; + align-items: center; + gap: 2rem; +} +.nav__brand { + display: inline-flex; + align-items: center; + gap: .7rem; +} +.nav__mark { + width: 38px; height: 38px; + color: var(--forest); + flex: none; +} +.nav__name { + font-family: var(--serif); + font-size: 1.22rem; + font-weight: 500; + color: var(--forest-deep); + line-height: 1.15; + letter-spacing: .005em; +} +.nav__links { + display: flex; + justify-content: center; + gap: clamp(1rem, 2vw, 1.9rem); + font-size: .92rem; + color: var(--ink-soft); +} +.nav__links a { padding: .3rem 0; transition: color .2s var(--ease); } +.nav__links a:hover { color: var(--forest); } +.nav__actions { display: inline-flex; gap: .55rem; } + +.nav__toggle { + display: none; + width: 40px; height: 40px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 5px; +} +.nav__toggle span { + width: 22px; height: 1.5px; + background: var(--forest-deep); + transition: transform .3s var(--ease), opacity .2s var(--ease); +} +.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } +.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; } +.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } + +/* ========================================================= + Hero + ========================================================= */ +.hero { + position: relative; + min-height: calc(100vh - 70px); + display: flex; + align-items: center; + justify-content: center; + text-align: center; + padding: clamp(4rem, 9vh, 7rem) 1.5rem clamp(5rem, 11vh, 8rem); + overflow: hidden; + isolation: isolate; +} + +/* --- background scene --- */ +.hero__bg { position: absolute; inset: 0; z-index: -1; } +.hero__scene { width: 100%; height: 100%; display: block; } +.hero__vignette { + position: absolute; inset: 0; + background: + radial-gradient(ellipse 70% 55% at 50% 44%, rgba(246, 241, 230, .75), transparent 75%); + pointer-events: none; +} + +/* gentle sway on the fronds */ +.frond { + transform-origin: bottom center; + animation: sway 9s ease-in-out infinite; +} +.frond--left2 { animation-delay: -3s; animation-duration: 11s; } +.frond--right { animation-delay: -1.5s; animation-duration: 10s; } +.frond--right2 { animation-delay: -5s; animation-duration: 12s; } +@keyframes sway { + 0%, 100% { transform: rotate(0deg); } + 50% { transform: rotate(.8deg); } +} + +/* --- content --- */ +.hero__content { + max-width: 720px; + position: relative; +} +.hero__kicker { + font-size: .78rem; + letter-spacing: .3em; + text-transform: uppercase; + color: var(--ink-muted); + margin: 0 0 1.75rem; + font-weight: 500; +} +.hero__title { + font-family: var(--serif); + font-weight: 400; + font-size: clamp(2.9rem, 7.2vw, 5.4rem); + line-height: 1.04; + letter-spacing: -0.015em; + color: var(--ink); + margin: 0 0 1.75rem; +} +.hero__title em { + font-style: italic; + color: var(--forest); +} +.hero__sub { + font-size: clamp(.98rem, 1.3vw, 1.08rem); + color: var(--ink-soft); + line-height: 1.65; + max-width: 54ch; + margin: 0 auto 2.5rem; +} + +/* feature icons row */ +.hero__features { + display: flex; + justify-content: center; + align-items: flex-start; + gap: 0; + margin: 0 0 2.5rem; +} +.hero__features li { + display: grid; + justify-items: center; + gap: .55rem; + padding: 0 2.25rem; + border-left: 1px solid var(--line); + min-width: 150px; +} +.hero__features li:first-child { border-left: 0; } +.hero__feature-icon { + width: 26px; height: 26px; + color: var(--forest); +} +.hero__feature-icon svg { width: 100%; height: 100%; } +.hero__feature-label { + font-size: .84rem; + font-weight: 600; + color: var(--ink); + line-height: 1.35; +} + +/* CTAs */ +.hero__cta { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: .8rem; + margin-bottom: 1.5rem; +} +.hero__note { + font-size: .82rem; + color: var(--ink-muted); + margin: 0; +} + +/* chat pill */ +.chat-pill { + position: fixed; + right: 1.5rem; + bottom: 1.5rem; + display: inline-flex; + align-items: center; + gap: .5rem; + background: #FFFFFF; + border: 1px solid var(--line); + border-radius: 999px; + padding: .7rem 1.15rem; + font-size: .88rem; + font-weight: 500; + color: var(--ink); + box-shadow: 0 16px 40px -18px rgba(35, 41, 31, .35); + transition: transform .3s var(--ease), box-shadow .3s var(--ease); + z-index: 30; +} +.chat-pill:hover { transform: translateY(-2px); box-shadow: 0 22px 48px -18px rgba(35, 41, 31, .4); } +.chat-pill svg { width: 17px; height: 17px; color: var(--forest); } + +/* ========================================================= + Responsive + ========================================================= */ +@media (max-width: 1080px) { + .nav__links { display: none; } +} +@media (max-width: 780px) { + .nav__actions { display: none; } + .nav__toggle { display: inline-flex; } + .nav__inner { grid-template-columns: auto 1fr auto; } + .nav.is-open .nav__links { + display: flex; + flex-direction: column; + gap: 1.1rem; + position: absolute; + top: 100%; left: 0; right: 0; + background: var(--cream); + border-bottom: 1px solid var(--line); + padding: 1.75rem; + } + .hero__features { + flex-direction: column; + align-items: center; + gap: 1.5rem; + } + .hero__features li { + border-left: 0; + padding: 0; + } +} +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.001ms !important; + transition-duration: 0.001ms !important; + } +} diff --git a/v7/index.html b/v7/index.html new file mode 100644 index 00000000000..e0c2a990e99 --- /dev/null +++ b/v7/index.html @@ -0,0 +1,168 @@ + + + + + + + Alice Tran Psychiatric Care — Feel like yourself again + + + + + + + + + + + + + + +
+ + +
+

Adult Psychiatry  ·  Virginia  ·  Ages 18–65

+ +

Feel like yourself again.

+ +

+ Thoughtful medication management and supportive therapy for anxiety, + depression, ADHD, burnout, and other mental health conditions +

+ + + + + +

+ New patients typically seen within 1–2 weeks  ·  Online booking takes about 5 minutes +

+
+ + + +
+ + + + diff --git a/v7/script.js b/v7/script.js new file mode 100644 index 00000000000..6ff1b53b00a --- /dev/null +++ b/v7/script.js @@ -0,0 +1,20 @@ +/* Alice Tran — v6: current-site recreation with new hero background. + Minimal JS: mobile menu toggle only. */ + +(() => { + const nav = document.querySelector('.nav'); + const toggle = nav?.querySelector('.nav__toggle'); + const links = nav?.querySelector('.nav__links'); + + toggle?.addEventListener('click', () => { + const open = nav.classList.toggle('is-open'); + toggle.setAttribute('aria-expanded', open ? 'true' : 'false'); + }); + + links?.querySelectorAll('a').forEach((a) => + a.addEventListener('click', () => { + nav.classList.remove('is-open'); + toggle?.setAttribute('aria-expanded', 'false'); + }) + ); +})(); diff --git a/v7/styles.css b/v7/styles.css new file mode 100644 index 00000000000..4360612f300 --- /dev/null +++ b/v7/styles.css @@ -0,0 +1,413 @@ +/* ========================================================= + Alice Tran Psychiatric Care — V7 "Golden Hour" + Same layout as the live site; background swapped for a + memorable animated scene: breathing sun halo, flowing + ribbon currents, floating light motes. + ========================================================= */ + +:root { + --cream: #F6F0E2; + --cream-deep: #EEE6D2; + --forest: #2B4432; + --forest-deep: #1E3324; + --sage: #7E9471; + --amber: #C98A5B; + --gold: #B8A26B; + --ink: #23291F; + --ink-soft: #3F463A; + --ink-muted: #6E7568; + --line: rgba(35, 41, 31, 0.14); + + --serif: "Cormorant Garamond", Georgia, serif; + --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; + + --ease: cubic-bezier(.2,.7,.2,1); +} + +*, *::before, *::after { box-sizing: border-box; } +html { scroll-behavior: smooth; } +body { + margin: 0; + font-family: var(--sans); + font-size: 16px; + line-height: 1.6; + color: var(--ink); + background: var(--cream); + -webkit-font-smoothing: antialiased; + overflow-x: hidden; +} +a { color: inherit; text-decoration: none; } +button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } +ul { list-style: none; margin: 0; padding: 0; } + +/* ---------- Top accent bar ---------- */ +.topbar { + height: 6px; + background: linear-gradient(90deg, var(--forest-deep), var(--sage), var(--amber), var(--forest-deep)); + background-size: 300% 100%; + animation: bar-drift 14s linear infinite; +} +@keyframes bar-drift { + 0% { background-position: 0% 0; } + 100% { background-position: 300% 0; } +} + +/* ---------- Pills (buttons) ---------- */ +.pill { + display: inline-flex; + align-items: center; + justify-content: center; + gap: .5rem; + padding: .6rem 1.35rem; + border-radius: 999px; + font-size: .88rem; + font-weight: 500; + letter-spacing: .01em; + transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); + border: 1px solid transparent; + white-space: nowrap; +} +.pill--outline { + border-color: rgba(35, 41, 31, .3); + color: var(--ink); + background: rgba(255,255,255,.35); + backdrop-filter: blur(4px); +} +.pill--outline:hover { border-color: var(--forest); color: var(--forest); background: rgba(255,255,255,.65); } +.pill--solid { + background: var(--forest); + color: #F6F3EA; +} +.pill--solid:hover { background: var(--forest-deep); transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(43, 68, 50, .6); } +.pill--lg { padding: .85rem 1.7rem; font-size: .95rem; } + +/* ========================================================= + Navigation + ========================================================= */ +.nav { + background: var(--cream); + border-bottom: 1px solid var(--line); + position: sticky; + top: 0; + z-index: 40; +} +.nav__inner { + max-width: 1440px; + margin: 0 auto; + padding: .9rem clamp(1.25rem, 3.5vw, 3rem); + display: grid; + grid-template-columns: auto 1fr auto; + align-items: center; + gap: 2rem; +} +.nav__brand { + display: inline-flex; + align-items: center; + gap: .7rem; +} +.nav__mark { + width: 38px; height: 38px; + color: var(--forest); + flex: none; +} +.nav__name { + font-family: var(--serif); + font-size: 1.22rem; + font-weight: 500; + color: var(--forest-deep); + line-height: 1.15; + letter-spacing: .005em; +} +.nav__links { + display: flex; + justify-content: center; + gap: clamp(1rem, 2vw, 1.9rem); + font-size: .92rem; + color: var(--ink-soft); +} +.nav__links a { padding: .3rem 0; transition: color .2s var(--ease); } +.nav__links a:hover { color: var(--forest); } +.nav__actions { display: inline-flex; gap: .55rem; } + +.nav__toggle { + display: none; + width: 40px; height: 40px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 5px; +} +.nav__toggle span { + width: 22px; height: 1.5px; + background: var(--forest-deep); + transition: transform .3s var(--ease), opacity .2s var(--ease); +} +.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } +.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; } +.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } + +/* ========================================================= + Hero + ========================================================= */ +.hero { + position: relative; + min-height: calc(100vh - 70px); + display: flex; + align-items: center; + justify-content: center; + text-align: center; + padding: clamp(4rem, 9vh, 7rem) 1.5rem clamp(5rem, 11vh, 8rem); + overflow: hidden; + isolation: isolate; + background: + radial-gradient(1200px 700px at 50% 118%, rgba(126, 148, 113, .28), transparent 60%), + linear-gradient(180deg, #F9F3E4 0%, var(--cream) 55%, #EFE7D0 100%); +} +.hero__bg { position: absolute; inset: 0; z-index: -1; } + +/* --- breathing sun halo --- */ +.halo { + position: absolute; + top: 44%; left: 50%; + width: 0; height: 0; +} +.halo__core, +.halo__ring { + position: absolute; + top: 50%; left: 50%; + transform: translate(-50%, -50%); + border-radius: 50%; +} +.halo__core { + width: min(46vw, 560px); + height: min(46vw, 560px); + background: radial-gradient(circle, + rgba(240, 200, 145, .5) 0%, + rgba(240, 200, 145, .25) 42%, + rgba(240, 200, 145, 0) 70%); + animation: breathe 7s ease-in-out infinite; +} +.halo__ring { + border: 1px solid rgba(184, 162, 107, .5); + animation: ring-grow 9s ease-in-out infinite; +} +.halo__ring--1 { width: min(52vw, 640px); height: min(52vw, 640px); } +.halo__ring--2 { width: min(64vw, 800px); height: min(64vw, 800px); animation-delay: -3s; border-color: rgba(184, 162, 107, .34); } +.halo__ring--3 { width: min(78vw, 980px); height: min(78vw, 980px); animation-delay: -6s; border-color: rgba(184, 162, 107, .2); } + +@keyframes breathe { + 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } + 50% { transform: translate(-50%, -50%) scale(1.07); opacity: .85; } +} +@keyframes ring-grow { + 0%, 100% { transform: translate(-50%, -50%) scale(.97); opacity: .9; } + 50% { transform: translate(-50%, -50%) scale(1.04); opacity: .5; } +} + +/* --- ribbon currents --- */ +.ribbons { + position: absolute; + inset: 0; + width: 100%; + height: 100%; +} +.ribbon { + stroke-dasharray: 1200 900; + animation: current 26s linear infinite; + filter: blur(14px); +} +.ribbon--1 { animation-duration: 30s; } +.ribbon--2 { animation-duration: 24s; animation-delay: -8s; } +.ribbon--3 { animation-duration: 34s; animation-delay: -16s; } +@keyframes current { + 0% { stroke-dashoffset: 0; } + 100% { stroke-dashoffset: -2100; } +} + +/* --- floating light motes --- */ +.motes { position: absolute; inset: 0; } +.motes span { + position: absolute; + bottom: -20px; + width: 6px; height: 6px; + border-radius: 50%; + background: radial-gradient(circle, rgba(240, 200, 145, .95), rgba(240, 200, 145, 0)); + animation: rise linear infinite; + opacity: 0; +} +.motes span:nth-child(1) { left: 8%; animation-duration: 16s; animation-delay: 0s; width: 5px; height: 5px; } +.motes span:nth-child(2) { left: 18%; animation-duration: 21s; animation-delay: -4s; width: 8px; height: 8px; } +.motes span:nth-child(3) { left: 27%; animation-duration: 18s; animation-delay: -9s; width: 4px; height: 4px; } +.motes span:nth-child(4) { left: 36%; animation-duration: 24s; animation-delay: -2s; width: 7px; height: 7px; } +.motes span:nth-child(5) { left: 46%; animation-duration: 19s; animation-delay: -12s; width: 5px; height: 5px; } +.motes span:nth-child(6) { left: 55%; animation-duration: 23s; animation-delay: -6s; width: 9px; height: 9px; } +.motes span:nth-child(7) { left: 63%; animation-duration: 17s; animation-delay: -14s; width: 4px; height: 4px; } +.motes span:nth-child(8) { left: 71%; animation-duration: 25s; animation-delay: -3s; width: 6px; height: 6px; } +.motes span:nth-child(9) { left: 79%; animation-duration: 20s; animation-delay: -10s; width: 5px; height: 5px; } +.motes span:nth-child(10) { left: 86%; animation-duration: 22s; animation-delay: -7s; width: 8px; height: 8px; } +.motes span:nth-child(11) { left: 93%; animation-duration: 18s; animation-delay: -15s; width: 4px; height: 4px; } +.motes span:nth-child(12) { left: 50%; animation-duration: 27s; animation-delay: -18s; width: 6px; height: 6px; } +@keyframes rise { + 0% { transform: translateY(0) translateX(0); opacity: 0; } + 8% { opacity: .9; } + 50% { transform: translateY(-55vh) translateX(18px); opacity: .55; } + 100% { transform: translateY(-110vh) translateX(-14px); opacity: 0; } +} + +/* --- readability vignette --- */ +.hero__vignette { + position: absolute; inset: 0; + background: radial-gradient(ellipse 62% 52% at 50% 46%, rgba(249, 243, 228, .82), transparent 78%); + pointer-events: none; +} + +/* --- content --- */ +.hero__content { + max-width: 720px; + position: relative; +} +.hero__kicker { + font-size: .78rem; + letter-spacing: .3em; + text-transform: uppercase; + color: var(--ink-muted); + margin: 0 0 1.75rem; + font-weight: 500; +} +.hero__title { + font-family: var(--serif); + font-weight: 400; + font-size: clamp(2.9rem, 7.2vw, 5.4rem); + line-height: 1.04; + letter-spacing: -0.015em; + color: var(--ink); + margin: 0 0 1.75rem; +} +.hero__title em { + font-style: italic; + color: var(--forest); + position: relative; + white-space: nowrap; +} +/* hand-drawn underline flourish on "yourself" */ +.hero__title em::after { + content: ""; + position: absolute; + left: 2%; right: 2%; + bottom: .02em; + height: .14em; + background: + url('data:image/svg+xml;utf8,') + center / 100% 100% no-repeat; + opacity: .85; +} +.hero__sub { + font-size: clamp(.98rem, 1.3vw, 1.08rem); + color: var(--ink-soft); + line-height: 1.65; + max-width: 54ch; + margin: 0 auto 2.5rem; +} + +/* feature icons row */ +.hero__features { + display: flex; + justify-content: center; + align-items: flex-start; + gap: 0; + margin: 0 0 2.5rem; +} +.hero__features li { + display: grid; + justify-items: center; + gap: .55rem; + padding: 0 2.25rem; + border-left: 1px solid var(--line); + min-width: 150px; +} +.hero__features li:first-child { border-left: 0; } +.hero__feature-icon { + width: 26px; height: 26px; + color: var(--forest); +} +.hero__feature-icon svg { width: 100%; height: 100%; } +.hero__feature-label { + font-size: .84rem; + font-weight: 600; + color: var(--ink); + line-height: 1.35; +} + +/* CTAs */ +.hero__cta { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: .8rem; + margin-bottom: 1.5rem; +} +.hero__note { + font-size: .82rem; + color: var(--ink-muted); + margin: 0; +} + +/* chat pill */ +.chat-pill { + position: fixed; + right: 1.5rem; + bottom: 1.5rem; + display: inline-flex; + align-items: center; + gap: .5rem; + background: #FFFFFF; + border: 1px solid var(--line); + border-radius: 999px; + padding: .7rem 1.15rem; + font-size: .88rem; + font-weight: 500; + color: var(--ink); + box-shadow: 0 16px 40px -18px rgba(35, 41, 31, .35); + transition: transform .3s var(--ease), box-shadow .3s var(--ease); + z-index: 30; +} +.chat-pill:hover { transform: translateY(-2px); box-shadow: 0 22px 48px -18px rgba(35, 41, 31, .4); } +.chat-pill svg { width: 17px; height: 17px; color: var(--forest); } + +/* ========================================================= + Responsive + ========================================================= */ +@media (max-width: 1080px) { + .nav__links { display: none; } +} +@media (max-width: 780px) { + .nav__actions { display: none; } + .nav__toggle { display: inline-flex; } + .nav.is-open .nav__links { + display: flex; + flex-direction: column; + gap: 1.1rem; + position: absolute; + top: 100%; left: 0; right: 0; + background: var(--cream); + border-bottom: 1px solid var(--line); + padding: 1.75rem; + } + .hero__features { + flex-direction: column; + align-items: center; + gap: 1.5rem; + } + .hero__features li { + border-left: 0; + padding: 0; + } + .halo__core { width: 80vw; height: 80vw; } +} +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.001ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.001ms !important; + } +} diff --git a/v8/index.html b/v8/index.html new file mode 100644 index 00000000000..21376c2ea80 --- /dev/null +++ b/v8/index.html @@ -0,0 +1,186 @@ + + + + + + + Alice Tran Psychiatric Care — Feel like yourself again + + + + + + + + + + + + + + +
+ + +
+

Adult Psychiatry  ·  Virginia  ·  Ages 18–65

+ +

Feel like yourself again.

+ +

+ Thoughtful medication management and supportive therapy for anxiety, + depression, ADHD, burnout, and other mental health conditions +

+ + + + + +

+ New patients typically seen within 1–2 weeks  ·  Online booking takes about 5 minutes +

+
+ + + +
+ + + + diff --git a/v8/script.js b/v8/script.js new file mode 100644 index 00000000000..6ff1b53b00a --- /dev/null +++ b/v8/script.js @@ -0,0 +1,20 @@ +/* Alice Tran — v6: current-site recreation with new hero background. + Minimal JS: mobile menu toggle only. */ + +(() => { + const nav = document.querySelector('.nav'); + const toggle = nav?.querySelector('.nav__toggle'); + const links = nav?.querySelector('.nav__links'); + + toggle?.addEventListener('click', () => { + const open = nav.classList.toggle('is-open'); + toggle.setAttribute('aria-expanded', open ? 'true' : 'false'); + }); + + links?.querySelectorAll('a').forEach((a) => + a.addEventListener('click', () => { + nav.classList.remove('is-open'); + toggle?.setAttribute('aria-expanded', 'false'); + }) + ); +})(); diff --git a/v8/styles.css b/v8/styles.css new file mode 100644 index 00000000000..c0ede2ff285 --- /dev/null +++ b/v8/styles.css @@ -0,0 +1,398 @@ +/* ========================================================= + Alice Tran Psychiatric Care — V8 "Lotus Pond" + Same layout as the live site. Background evokes a calm + Vietnamese lotus pond: layered flowing water, etched + current lines, expanding raindrop ripples, and drifting + lotus blossoms on lily pads. + ========================================================= */ + +:root { + --cream: #F6F0E2; + --cream-deep: #EEE6D2; + --forest: #2B4432; + --forest-deep: #1E3324; + --pond: #5F8370; + --pond-deep: #3F5D4C; + --lotus-pink: #DFA0A6; + --lotus-gold: #E9C46A; + --ink: #23291F; + --ink-soft: #3F463A; + --ink-muted: #6E7568; + --line: rgba(35, 41, 31, 0.14); + + --serif: "Cormorant Garamond", Georgia, serif; + --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; + + --ease: cubic-bezier(.2,.7,.2,1); +} + +*, *::before, *::after { box-sizing: border-box; } +html { scroll-behavior: smooth; } +body { + margin: 0; + font-family: var(--sans); + font-size: 16px; + line-height: 1.6; + color: var(--ink); + background: var(--cream); + -webkit-font-smoothing: antialiased; + overflow-x: hidden; +} +a { color: inherit; text-decoration: none; } +button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } +ul { list-style: none; margin: 0; padding: 0; } + +/* ---------- Top accent bar ---------- */ +.topbar { + height: 6px; + background: var(--forest-deep); +} + +/* ---------- Pills ---------- */ +.pill { + display: inline-flex; + align-items: center; + justify-content: center; + gap: .5rem; + padding: .6rem 1.35rem; + border-radius: 999px; + font-size: .88rem; + font-weight: 500; + letter-spacing: .01em; + transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); + border: 1px solid transparent; + white-space: nowrap; +} +.pill--outline { + border-color: rgba(35, 41, 31, .3); + color: var(--ink); + background: rgba(255,255,255,.4); + backdrop-filter: blur(4px); +} +.pill--outline:hover { border-color: var(--forest); color: var(--forest); background: rgba(255,255,255,.7); } +.pill--solid { + background: var(--forest); + color: #F6F3EA; +} +.pill--solid:hover { background: var(--forest-deep); transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(43, 68, 50, .6); } +.pill--lg { padding: .85rem 1.7rem; font-size: .95rem; } + +/* ========================================================= + Navigation + ========================================================= */ +.nav { + background: var(--cream); + border-bottom: 1px solid var(--line); + position: sticky; + top: 0; + z-index: 40; +} +.nav__inner { + max-width: 1440px; + margin: 0 auto; + padding: .9rem clamp(1.25rem, 3.5vw, 3rem); + display: grid; + grid-template-columns: auto 1fr auto; + align-items: center; + gap: 2rem; +} +.nav__brand { display: inline-flex; align-items: center; gap: .7rem; } +.nav__mark { width: 38px; height: 38px; color: var(--forest); flex: none; } +.nav__name { + font-family: var(--serif); + font-size: 1.22rem; + font-weight: 500; + color: var(--forest-deep); + line-height: 1.15; +} +.nav__links { + display: flex; + justify-content: center; + gap: clamp(1rem, 2vw, 1.9rem); + font-size: .92rem; + color: var(--ink-soft); +} +.nav__links a { padding: .3rem 0; transition: color .2s var(--ease); } +.nav__links a:hover { color: var(--forest); } +.nav__actions { display: inline-flex; gap: .55rem; } + +.nav__toggle { + display: none; + width: 40px; height: 40px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 5px; +} +.nav__toggle span { + width: 22px; height: 1.5px; + background: var(--forest-deep); + transition: transform .3s var(--ease), opacity .2s var(--ease); +} +.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } +.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; } +.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } + +/* ========================================================= + Hero — lotus pond + ========================================================= */ +.hero { + position: relative; + min-height: calc(100vh - 70px); + display: flex; + align-items: center; + justify-content: center; + text-align: center; + padding: clamp(4rem, 9vh, 7rem) 1.5rem clamp(6rem, 13vh, 9rem); + overflow: hidden; + isolation: isolate; + background: linear-gradient(180deg, #F9F3E4 0%, var(--cream) 46%, #E4E4CF 72%, #CFDCCB 100%); +} +.hero__bg { position: absolute; inset: 0; z-index: -1; } + +/* --- water: three stacked wave bands along the bottom --- */ +.water { + position: absolute; + left: 0; right: 0; bottom: 0; + height: 46%; +} +.wave { + position: absolute; + bottom: 0; + width: 200%; + height: 100%; + animation: flow linear infinite; +} +.wave--1 { animation-duration: 38s; height: 96%; } +.wave--2 { animation-duration: 26s; height: 78%; animation-direction: reverse; } +.wave--3 { animation-duration: 19s; height: 58%; } +@keyframes flow { + 0% { transform: translateX(0); } + 100% { transform: translateX(-50%); } +} + +/* fine white current lines drifting across the water */ +.currents { + position: absolute; + bottom: 0; + width: 100%; + height: 60%; +} +.current { + stroke-dasharray: 6 14; + animation: shimmer-line linear infinite; +} +.current--a { animation-duration: 40s; } +.current--b { animation-duration: 30s; animation-direction: reverse; } +.current--c { animation-duration: 50s; } +@keyframes shimmer-line { + 0% { stroke-dashoffset: 0; } + 100% { stroke-dashoffset: -400; } +} + +/* --- raindrop ripples --- */ +.ripple { + position: absolute; + width: 0; height: 0; +} +.ripple i { + position: absolute; + top: 50%; left: 50%; + transform: translate(-50%, -50%) scale(0); + width: 140px; height: 44px; /* flattened ellipse = perspective on water */ + border: 1.4px solid rgba(246, 240, 226, .75); + border-radius: 50%; + animation: ripple 7s ease-out infinite; +} +.ripple i:nth-child(2) { animation-delay: 1.1s; } +.ripple i:nth-child(3) { animation-delay: 2.2s; } +.ripple--1 { left: 22%; bottom: 17%; } +.ripple--2 { left: 71%; bottom: 24%; } +.ripple--2 i { animation-duration: 8.5s; width: 120px; height: 36px; } +.ripple--3 { left: 47%; bottom: 9%; } +.ripple--3 i { animation-duration: 9.5s; width: 170px; height: 52px; animation-delay: .6s; } +@keyframes ripple { + 0% { transform: translate(-50%, -50%) scale(.05); opacity: 0; } + 6% { opacity: .85; } + 70% { opacity: .15; } + 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } +} + +/* --- lotus blossoms --- */ +.lotus { + position: absolute; + width: clamp(110px, 12vw, 180px); + filter: drop-shadow(0 14px 18px rgba(35, 41, 31, .18)); + animation: bob 8s ease-in-out infinite; +} +.lotus--left { left: clamp(1rem, 6vw, 7rem); bottom: 11%; } +.lotus--right { right: clamp(1rem, 7vw, 9rem); bottom: 21%; width: clamp(90px, 9.5vw, 140px); animation-delay: -3.5s; animation-duration: 10s; } +@keyframes bob { + 0%, 100% { transform: translateY(0) rotate(0deg); } + 50% { transform: translateY(-9px) rotate(1.1deg); } +} + +/* a lone lily pad drifting slowly across the pond */ +.pad { + position: absolute; + bottom: 6%; + left: -140px; + width: clamp(80px, 8vw, 120px); + opacity: .8; + animation: drift-across 70s linear infinite, bob 9s ease-in-out infinite; +} +@keyframes drift-across { + 0% { left: -10%; } + 100% { left: 110%; } +} + +/* --- readability vignette --- */ +.hero__vignette { + position: absolute; inset: 0; + background: radial-gradient(ellipse 62% 50% at 50% 40%, rgba(249, 243, 228, .85), transparent 76%); + pointer-events: none; +} + +/* --- content --- */ +.hero__content { max-width: 720px; position: relative; } +.hero__kicker { + font-size: .78rem; + letter-spacing: .3em; + text-transform: uppercase; + color: var(--ink-muted); + margin: 0 0 1.75rem; + font-weight: 500; +} +.hero__title { + font-family: var(--serif); + font-weight: 400; + font-size: clamp(2.9rem, 7.2vw, 5.4rem); + line-height: 1.04; + letter-spacing: -0.015em; + color: var(--ink); + margin: 0 0 1.75rem; +} +.hero__title em { + font-style: italic; + color: var(--forest); + position: relative; + white-space: nowrap; +} +/* soft water-line flourish under "yourself" */ +.hero__title em::after { + content: ""; + position: absolute; + left: 2%; right: 2%; + bottom: .02em; + height: .14em; + background: + url('data:image/svg+xml;utf8,') + center / 100% 100% no-repeat; + opacity: .8; +} +.hero__sub { + font-size: clamp(.98rem, 1.3vw, 1.08rem); + color: var(--ink-soft); + line-height: 1.65; + max-width: 54ch; + margin: 0 auto 2.5rem; +} + +/* feature icons row */ +.hero__features { + display: flex; + justify-content: center; + align-items: flex-start; + margin: 0 0 2.5rem; +} +.hero__features li { + display: grid; + justify-items: center; + gap: .55rem; + padding: 0 2.25rem; + border-left: 1px solid var(--line); + min-width: 150px; +} +.hero__features li:first-child { border-left: 0; } +.hero__feature-icon { width: 26px; height: 26px; color: var(--forest); } +.hero__feature-icon svg { width: 100%; height: 100%; } +.hero__feature-label { + font-size: .84rem; + font-weight: 600; + color: var(--ink); + line-height: 1.35; +} + +/* CTAs */ +.hero__cta { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: .8rem; + margin-bottom: 1.5rem; +} +.hero__note { + font-size: .82rem; + color: var(--ink-muted); + margin: 0; +} + +/* chat pill */ +.chat-pill { + position: fixed; + right: 1.5rem; + bottom: 1.5rem; + display: inline-flex; + align-items: center; + gap: .5rem; + background: #FFFFFF; + border: 1px solid var(--line); + border-radius: 999px; + padding: .7rem 1.15rem; + font-size: .88rem; + font-weight: 500; + color: var(--ink); + box-shadow: 0 16px 40px -18px rgba(35, 41, 31, .35); + transition: transform .3s var(--ease), box-shadow .3s var(--ease); + z-index: 30; +} +.chat-pill:hover { transform: translateY(-2px); box-shadow: 0 22px 48px -18px rgba(35, 41, 31, .4); } +.chat-pill svg { width: 17px; height: 17px; color: var(--forest); } + +/* ========================================================= + Responsive + ========================================================= */ +@media (max-width: 1080px) { + .nav__links { display: none; } +} +@media (max-width: 780px) { + .nav__actions { display: none; } + .nav__toggle { display: inline-flex; } + .nav.is-open .nav__links { + display: flex; + flex-direction: column; + gap: 1.1rem; + position: absolute; + top: 100%; left: 0; right: 0; + background: var(--cream); + border-bottom: 1px solid var(--line); + padding: 1.75rem; + } + .hero__features { + flex-direction: column; + align-items: center; + gap: 1.5rem; + } + .hero__features li { border-left: 0; padding: 0; } + .lotus--right { display: none; } /* keep the pond uncluttered on phones */ + .ripple--2 { display: none; } +} +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.001ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.001ms !important; + } + .ripple i { opacity: .35; transform: translate(-50%, -50%) scale(1); } + .pad { left: 70%; } +}