From ef073da5dec6697a317e49ddedcc7626f815a171 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 17 Apr 2026 03:16:56 +0000 Subject: [PATCH 1/4] Redesign alicetrannp.com as modern, elegant practice site Builds a single-page experience inspired by the original psychiatric NP site, with a warmer, calmer feel: sage/ivory/forest palette, serif display type, whitespace-forward layout, and gentle scroll-reveal motion. Sections cover hero, about, three-promise approach, services, conditions, a quiet pull-quote, curated resources with a visible crisis card, and a contact card with a non-binding form. Responsive down to phones, reduced-motion friendly, no dependencies beyond Google Fonts. https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7 --- index.html | 429 +++++++++++++++++++++++++ script.js | 67 ++++ styles.css | 911 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 1407 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css 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. +

+ +
+ Schedule a Consultation + How I practice +
+ +
+
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. +

+
+ +
    +
  • Anxiety
    • +
  • Depression
    • +
  • Trauma & PTSD
    • +
  • Burnout
    • +
  • Grief & loss
    • +
  • Insomnia
    • +
  • ADHD
    • +
  • OCD
    • +
  • Panic
    • +
  • Life transitions
    • +
  • Identity & belonging
    • +
  • Relationship stress
    • +
  • Perinatal mood
    • +
  • Cultural & intergenerational pressure
    • +
+
+
+ + +
+
+
+ + 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; } +} From a6ad2f83caaed308392ec6f69cd2ae3389a2497f Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 18 Apr 2026 15:23:32 +0000 Subject: [PATCH 2/4] Add v2 'twilight' color variant in /v2/ Alternative palette option, preserving v1 at the repo root. Shifts from the warm sage/forest/terracotta of v1 to a cooler evening mood: mist, dusty lavender, deep plum, and champagne-gold accents. Fraunces replaces Cormorant for a slightly softer, more rounded serif. Layout, copy, and interactions are identical so the two can be compared side-by-side. View at /v2/ alongside v1 at /. https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7 --- v2/index.html | 442 +++++++++++++++++++++++ v2/script.js | 67 ++++ v2/styles.css | 954 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 1463 insertions(+) create mode 100644 v2/index.html create mode 100644 v2/script.js create mode 100644 v2/styles.css 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. +

+ +
+ Schedule a Consultation + How I practice +
+ +
+
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. +

+
+ +
    +
  • Anxiety
    • +
  • Depression
    • +
  • Trauma & PTSD
    • +
  • Burnout
    • +
  • Grief & loss
    • +
  • Insomnia
    • +
  • ADHD
    • +
  • OCD
    • +
  • Panic
    • +
  • Life transitions
    • +
  • Identity & belonging
    • +
  • Relationship stress
    • +
  • Perinatal mood
    • +
  • Cultural & intergenerational pressure
    • +
+
+
+ + +
+
+
+ + 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. +

+
+
+
+ + +
+
+
+ +
+ Alice Tran, PMHNP-BC, FNP-BC + Psychiatric Mental Health & Family Nurse Practitioner +
+
+ + + +

+ © Alice Tran. Care is individualized; this site is informational and not a substitute for clinical advice. +

+
+
+ + + + 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; } +} From 1a5a7b56fc34331f789f9d4f2c6b5a6c254ae891 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 18 Apr 2026 15:32:01 +0000 Subject: [PATCH 3/4] Add v3 'harbor' coastal color variant in /v3/ MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Third palette option sitting alongside v1 (grove) and v2 (twilight). Warm linen paper with seafoam, slate ocean, and driftwood/soft-coral accents — meant to feel like a quiet morning at the water. Uses DM Serif Display for a slightly crisper, more architectural masthead, plus a subtle layered wave graphic in the hero. Layout, copy, and interactions match v1 and v2 for fair comparison. View at /v3/. https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7 --- v3/index.html | 447 +++++++++++++++++++++++ v3/script.js | 67 ++++ v3/styles.css | 973 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 1487 insertions(+) create mode 100644 v3/index.html create mode 100644 v3/script.js create mode 100644 v3/styles.css 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. +

+ +
+ Schedule a Consultation + How I practice +
+ +
+
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. +

+
+ +
    +
  • Anxiety
    • +
  • Depression
    • +
  • Trauma & PTSD
    • +
  • Burnout
    • +
  • Grief & loss
    • +
  • Insomnia
    • +
  • ADHD
    • +
  • OCD
    • +
  • Panic
    • +
  • Life transitions
    • +
  • Identity & belonging
    • +
  • Relationship stress
    • +
  • Perinatal mood
    • +
  • Cultural & intergenerational pressure
    • +
+
+
+ + +
+
+
+ + 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. +

+
+
+
+ + +
+
+
+ +
+ Alice Tran, PMHNP-BC, FNP-BC + Psychiatric Mental Health & Family Nurse Practitioner +
+
+ + + +

+ © Alice Tran. Care is individualized; this site is informational and not a substitute for clinical advice. +

+
+
+ + + + 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; } +} From d89c9c49237bbd553e7283c51673785f38912ed2 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 18 Apr 2026 17:04:46 +0000 Subject: [PATCH 4/4] =?UTF-8?q?Add=20v4=20'The=20Quiet=20Room'=20=E2=80=94?= =?UTF-8?q?=20editorial/quarterly=20design=20direction?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A distinct alternative to v1-v3. Instead of a hero-plus-cards layout, this variant reads like a small literary quarterly: a printed masthead, a tall typographic cover with an index, numbered chapters, drop caps on opening paragraphs, a margin note, a full-width pull quote, a menu-style services list, an inline serif list of conditions, an essay-shelf for resources, a black crisis block, and a closing letter with a stamped contact form. Playfair Display for display, EB Garamond for body, Inter for small-caps utility. Warm bone-paper palette with rust and muted sage accents, plus a subtle paper-texture background. View at /v4/. https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7 --- v4/index.html | 341 +++++++++++++++++++++++++ v4/script.js | 38 +++ v4/styles.css | 672 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 1051 insertions(+) create mode 100644 v4/index.html create mode 100644 v4/script.js create mode 100644 v4/styles.css 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. +
  2. +

    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. +

    +
    3. +
  3. +

    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. +

    +
    4. +
+
+ + +
+
+ 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.

+
+ +
+
+
+ Comprehensive Psychiatric Evaluation + First visit · 60 minutes · telehealth +
+
+ A spacious first appointment to understand your history, symptoms, + relationships, and goals. We will map what has been happening and + co-author a plan that respects your pace. +
+
+
+
+ Medication Management + Follow-up · up to 30 minutes +
+
+ Ongoing, thoughtful prescribing with close attention to how you are + actually feeling — not just what the chart says. +
+
+
+
+ Supportive Psychotherapy + Integrated · woven into care +
+
+ Brief, focused conversations that sit beside medication. A prescription + without context rarely heals. +
+
+
+
+ Care in Tiếng Việt + Culturally attuned · for you & family +
+
+ Mental health support in Vietnamese — so parents, elders, and loved + ones can be part of the conversation, too. +
+
+
+
+ + +
+
+

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. +

+ +
    +
  • Anxiety
    • +
  • Depression
    • +
  • Trauma & PTSD
    • +
  • Burnout
    • +
  • Grief & loss
    • +
  • Insomnia
    • +
  • ADHD
    • +
  • OCD
    • +
  • Panic
    • +
  • Life transitions
    • +
  • Identity & belonging
    • +
  • Relationship stress
    • +
  • Perinatal mood
    • +
  • Cultural & intergenerational pressure
    • +
+
+ + +
+
+

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. +

+
+
+
+ + +
+ +
+
+

The author

+

+ Alice Tran, PMHNP-BC, FNP-BC
+ Psychiatric Mental Health & Family Nurse Practitioner
+ Dual MSN, Wilkes University & Frontier Nursing University +

+
+
+

The practice

+

+ Northern Virginia Psychiatric Group
+ Fairfax, Virginia · Telehealth across NOVA
+ hello@alicetrannp.com +

+
+
+

The fine print

+

+ © Alice Tran. This letter is informational + and is not a substitute for clinical advice. Care is individualized. +

+
+
+
+ The Quiet Room · No. 01 · Spring 2026 +
+
+ + + + 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; } +}