ページ普通

Clinic — Mental Health / Therapy Landing

A calm, full-page landing for a mental-health and therapy practice, built around a serif hero (Support, when you need it), reassuring subcopy and a Book a session CTA. It carries a four-way services grid for individual, couples, teletherapy and group care, a three-step How it works row, a values band on our approach, a soft client testimonial, a crisis-resources note and footer — with reveal-on-scroll, a sticky bar and a mobile nav, all vanilla JS.

Labで開く

html css vanilla-js

ターゲット: JS HTML

コード

:root {
  /* Mental-health palette — sage + cream + lavender */
  --sage: #9bb6a3;
  --sage-d: #5f8270;
  --sage-700: #4a6a59;
  --sage-50: #eef4f0;
  --lav: #c9bce0;
  --lav-soft: #efeaf7;
  --cream: #f7f3ea;
  --coral: #e8917c;
  --coral-soft: #f7e3dc;
  --ink: #34303a;
  --ink-2: #524d5b;
  --muted: #837e8c;
  --bg: #faf7f1;
  --white: #ffffff;
  --line: rgba(52, 48, 58, 0.08);
  --line-2: rgba(52, 48, 58, 0.16);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow-1: 0 1px 2px rgba(52, 48, 58, 0.04), 0 8px 24px rgba(52, 48, 58, 0.05);
  --shadow-2: 0 18px 46px rgba(95, 130, 112, 0.18);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  background: var(--sage-d);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  z-index: 100;
  font-weight: 600;
  font-size: 0.9rem;
  transition: top 0.2s;
}
.skip:focus {
  top: 16px;
}

:focus-visible {
  outline: 2.5px solid var(--sage-d);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 13px 26px;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.14s ease, background 0.18s, box-shadow 0.18s, border-color 0.18s, color 0.18s;
}
.btn:active {
  transform: translateY(1px);
}
.btn.primary {
  background: var(--sage-d);
  color: #fff;
  box-shadow: 0 8px 20px rgba(95, 130, 112, 0.28);
}
.btn.primary:hover {
  background: var(--sage-700);
  box-shadow: 0 12px 26px rgba(95, 130, 112, 0.34);
}
.btn.quiet {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
}
.btn.quiet:hover {
  background: var(--white);
  border-color: var(--sage);
  color: var(--sage-700);
}
.btn.ghost-light {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.btn.ghost-light:hover {
  background: rgba(255, 255, 255, 0.26);
}
.btn.solid-coral {
  background: var(--coral);
  color: #fff;
  white-space: nowrap;
}
.btn.solid-coral:hover {
  background: #db7a63;
}

/* ── Top bar ── */
.bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250, 247, 241, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.bar.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 4px 18px rgba(52, 48, 58, 0.04);
}
.bar-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--sage-50);
  color: var(--sage-d);
  border: 1px solid var(--line);
}
.brand-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav > a {
  text-decoration: none;
  color: var(--ink-2);
  font-weight: 500;
  font-size: 0.94rem;
  padding: 9px 14px;
  border-radius: 999px;
  transition: background 0.16s, color 0.16s;
}
.nav > a:hover {
  background: var(--sage-50);
  color: var(--sage-700);
}
.nav .nav-cta {
  background: var(--sage-d);
  color: #fff;
  margin-left: 8px;
  font-weight: 600;
}
.nav .nav-cta:hover {
  background: var(--sage-700);
  color: #fff;
}

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  cursor: pointer;
}
.burger span {
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.22s, opacity 0.18s;
}
.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Reveal on scroll ── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Section scaffolding ── */
section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 84px 24px;
}
.section-head {
  max-width: 580px;
  margin: 0 auto 48px;
  text-align: center;
}
.kicker {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-d);
  margin-bottom: 14px;
}
.kicker.light {
  color: var(--lav);
}
.section-head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.section-head p {
  margin-top: 16px;
  color: var(--muted);
  font-size: 1.04rem;
}

/* ── Hero ── */
.hero {
  padding-top: 56px;
  padding-bottom: 64px;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--sage-700);
  background: var(--sage-50);
  border: 1px solid var(--line);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.hero-copy h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 6.2vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.lede {
  margin-top: 22px;
  font-size: 1.14rem;
  color: var(--ink-2);
  max-width: 38ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.hero-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 500;
}
.hero-note .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 4px var(--sage-50);
}

/* Hero floating card */
.hero-card {
  position: relative;
}
.card-soft {
  position: relative;
  z-index: 2;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 28px;
  box-shadow: var(--shadow-1);
}
.stat-row {
  display: flex;
  gap: 14px;
}
.stat {
  flex: 1;
  background: var(--cream);
  border-radius: var(--r-md);
  padding: 16px;
}
.stat strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--sage-700);
}
.stat span {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 2px;
  display: block;
}
.quote {
  margin: 22px 0;
  padding-left: 16px;
  border-left: 3px solid var(--lav);
}
.quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.06rem;
  color: var(--ink);
  line-height: 1.45;
}
.quote-by {
  display: block;
  margin-top: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}
.assure {
  list-style: none;
  display: grid;
  gap: 10px;
}
.assure li {
  position: relative;
  padding-left: 26px;
  font-size: 0.9rem;
  color: var(--ink-2);
  font-weight: 500;
}
.assure li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sage-50);
  border: 1.5px solid var(--sage);
}
.assure li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 6px;
  height: 3.5px;
  border-left: 1.8px solid var(--sage-d);
  border-bottom: 1.8px solid var(--sage-d);
  transform: rotate(-45deg);
}
.leaf {
  position: absolute;
  border-radius: 60% 40% 55% 45% / 55% 45% 60% 40%;
  z-index: 1;
  filter: blur(2px);
}
.leaf-a {
  width: 180px;
  height: 180px;
  background: var(--lav-soft);
  top: -42px;
  right: -34px;
}
.leaf-b {
  width: 130px;
  height: 130px;
  background: var(--sage-50);
  bottom: -36px;
  left: -30px;
}

/* ── Services ── */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.svc {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 22px;
  box-shadow: var(--shadow-1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
}
.svc:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-2);
  border-color: rgba(95, 130, 112, 0.3);
}
.svc-ic {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--sage-50);
  color: var(--sage-d);
  margin-bottom: 18px;
}
.svc:nth-child(2) .svc-ic {
  background: var(--lav-soft);
  color: #7a6a98;
}
.svc:nth-child(3) .svc-ic {
  background: var(--coral-soft);
  color: #c06a52;
}
.svc:nth-child(4) .svc-ic {
  background: var(--cream);
  color: var(--sage-700);
}
.svc h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.svc p {
  font-size: 0.93rem;
  color: var(--muted);
  line-height: 1.55;
}
.svc-tag {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sage-700);
  background: var(--sage-50);
  padding: 5px 11px;
  border-radius: 999px;
}

/* ── How it works ── */
.how {
  background: linear-gradient(180deg, var(--cream), #f4eee2);
  max-width: none;
  border-radius: 0;
}
.how .section-head,
.how .steps {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
.how .section-head {
  max-width: 580px;
}
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  counter-reset: none;
}
.step {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 26px;
}
.step-no {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--lav-soft);
  color: #6e5e92;
  margin-bottom: 18px;
}
.step h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.24rem;
  margin-bottom: 8px;
}
.step p {
  color: var(--muted);
  font-size: 0.96rem;
}
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 52px;
  right: -16px;
  width: 22px;
  height: 2px;
  background: var(--line-2);
}

/* ── Approach band ── */
.approach {
  max-width: none;
  background: var(--sage-d);
  background: linear-gradient(140deg, var(--sage-d), var(--sage-700));
  color: #fff;
  border-radius: 0;
}
.approach-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.approach-copy h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.approach-copy p {
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.06rem;
  max-width: 46ch;
  margin-bottom: 26px;
}
.values {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.values li {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-md);
  padding: 20px;
}
.values strong {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 6px;
}
.values span {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
}

/* ── Testimonial ── */
.voices {
  text-align: center;
}
.testimonial {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 52px 48px 40px;
  box-shadow: var(--shadow-1);
}
.mark-quote {
  position: absolute;
  top: 14px;
  left: 34px;
  font-family: var(--serif);
  font-size: 5rem;
  line-height: 1;
  color: var(--lav);
  opacity: 0.55;
}
.testimonial blockquote {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.testimonial figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}
.avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--sage-50);
  color: var(--sage-d);
  font-weight: 700;
  font-size: 0.86rem;
  border: 1px solid var(--line);
}
.who {
  text-align: left;
}
.who strong {
  display: block;
  font-size: 0.95rem;
  color: var(--ink);
}
.who span {
  font-size: 0.84rem;
  color: var(--muted);
}

/* ── Crisis note ── */
.crisis {
  display: flex;
  align-items: center;
  gap: 22px;
  background: var(--coral-soft);
  border: 1px solid rgba(232, 145, 124, 0.4);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 1072px;
}
.crisis-ic {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 14px;
  background: #fff;
  color: #c06a52;
}
.crisis-copy {
  flex: 1;
}
.crisis-copy h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.18rem;
  margin-bottom: 6px;
  color: var(--ink);
}
.crisis-copy p {
  font-size: 0.94rem;
  color: var(--ink-2);
  line-height: 1.55;
}

/* ── Footer ── */
.foot {
  background: var(--ink);
  color: #fff;
  margin-top: 84px;
}
.foot-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 24px 40px;
}
.foot-cta {
  text-align: center;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 40px;
}
.foot-cta h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -0.02em;
}
.foot-cta p {
  color: rgba(255, 255, 255, 0.7);
  margin: 12px 0 26px;
  font-size: 1.05rem;
}
.foot-cols {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.foot-brand {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3rem;
  display: block;
  margin-bottom: 12px;
}
.foot-col p {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.92rem;
  margin-top: 4px;
}
.foot-col[aria-label] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.foot-col a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 0.94rem;
  transition: color 0.16s;
}
.foot-col a:hover {
  color: #fff;
}
.foot-fine {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.45);
}

/* ── Toast ── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(8px);
  background: var(--ink);
  color: #fff;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  box-shadow: var(--shadow-2);
  z-index: 90;
  max-width: 90vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast[hidden] {
  display: block;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .hero-inner,
  .approach-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .step:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 760px) {
  .nav {
    position: fixed;
    inset: 70px 16px auto 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 14px;
    box-shadow: var(--shadow-2);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
  }
  .nav.open {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .nav > a {
    padding: 12px 14px;
  }
  .nav .nav-cta {
    margin-left: 0;
    text-align: center;
    justify-content: center;
  }
  .burger {
    display: flex;
  }
}

@media (max-width: 520px) {
  section {
    padding: 60px 18px;
  }
  .bar-inner {
    padding: 14px 18px;
  }
  .hero {
    padding-top: 40px;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .values {
    grid-template-columns: 1fr;
  }
  .card-soft {
    padding: 22px;
  }
  .stat-row {
    flex-direction: column;
  }
  .testimonial {
    padding: 44px 26px 32px;
  }
  .crisis {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 24px;
  }
  .crisis .btn.solid-coral {
    width: 100%;
  }
  .foot-cols {
    flex-direction: column;
    gap: 24px;
  }
  .leaf {
    display: none;
  }
}

// ── Toast helper ─────────────────────────────────────────────────────────────
const toast = document.getElementById("toast");
function showToast(msg) {
  toast.textContent = msg;
  toast.classList.add("show");
  clearTimeout(showToast._t);
  showToast._t = setTimeout(() => toast.classList.remove("show"), 2800);
}

// ── Sticky bar shadow on scroll ──────────────────────────────────────────────
const bar = document.getElementById("bar");
function onScroll() {
  bar.classList.toggle("is-stuck", window.scrollY > 8);
}
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });

// ── Mobile nav ───────────────────────────────────────────────────────────────
const burger = document.getElementById("burger");
const nav = document.getElementById("nav");

function setNav(open) {
  nav.classList.toggle("open", open);
  burger.setAttribute("aria-expanded", String(open));
  burger.setAttribute("aria-label", open ? "Close menu" : "Open menu");
}

burger.addEventListener("click", () => {
  setNav(!nav.classList.contains("open"));
});

// Close the menu after tapping any in-page link
nav.addEventListener("click", (e) => {
  if (e.target.tagName === "A") setNav(false);
});

// Close on Escape, or when resizing back to desktop
document.addEventListener("keydown", (e) => {
  if (e.key === "Escape" && nav.classList.contains("open")) {
    setNav(false);
    burger.focus();
  }
});
window.addEventListener("resize", () => {
  if (window.innerWidth > 760) setNav(false);
});

// ── Reveal on scroll ─────────────────────────────────────────────────────────
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const reveals = document.querySelectorAll(".reveal");

if (reduceMotion || !("IntersectionObserver" in window)) {
  reveals.forEach((el) => el.classList.add("in"));
} else {
  const io = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("in");
          io.unobserve(entry.target);
        }
      });
    },
    { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
  );
  reveals.forEach((el) => io.observe(el));
}

// ── Booking CTAs (illustrative only) ─────────────────────────────────────────
document.querySelectorAll("[data-book]").forEach((btn) => {
  btn.addEventListener("click", (e) => {
    // Allow the in-page jump to #book, but always confirm the (fictional) action.
    showToast("Thanks for reaching out — we'd guide you to a free intro call here.");
  });
});

// ── Service cards keyboard-friendly toast (gentle detail) ────────────────────
document.querySelectorAll(".svc").forEach((svc) => {
  svc.addEventListener("click", () => {
    const name = svc.querySelector("h3")?.textContent || "this service";
    showToast(`${name}: book a free intro call to see if it's the right fit.`);
  });
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Therapy &amp; Counselling · Willowmere Practice</title>
  </head>
  <body>
    <a class="skip" href="#main">Skip to content</a>

    <!-- ── Top bar ── -->
    <header class="bar" id="bar">
      <div class="bar-inner">
        <a class="brand" href="#top" aria-label="Willowmere Practice home">
          <span class="mark" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="22" height="22" fill="none">
              <path
                d="M12 21c0-5 0-9 0-9m0 0c0-2.2-1.6-4-4-4S4 9.5 4 11.5 5.8 15 8 15c1.6 0 3-.9 3.7-2.2M12 12c0-2.2 1.6-4 4-4s4 1.8 4 3.5S18.2 15 16 15c-1.6 0-3-.9-3.7-2.2"
                stroke="currentColor"
                stroke-width="1.6"
                stroke-linecap="round"
              />
            </svg>
          </span>
          <span class="brand-name">Willowmere</span>
        </a>

        <nav class="nav" id="nav" aria-label="Primary">
          <a href="#services">Services</a>
          <a href="#how">How it works</a>
          <a href="#approach">Our approach</a>
          <a href="#voices">Voices</a>
          <a class="nav-cta" href="#book" data-book>Book a session</a>
        </nav>

        <button
          class="burger"
          id="burger"
          aria-label="Open menu"
          aria-expanded="false"
          aria-controls="nav"
        >
          <span></span><span></span><span></span>
        </button>
      </div>
    </header>

    <main id="main">
      <!-- ── Hero ── -->
      <section class="hero" id="top">
        <div class="hero-inner">
          <div class="hero-copy reveal">
            <span class="eyebrow">Therapy &amp; counselling · all welcome</span>
            <h1>Support,<br />when you need it.</h1>
            <p class="lede">
              Willowmere is a small practice for unhurried, confidential
              therapy. Whatever you&rsquo;re carrying, you don&rsquo;t have to
              carry it alone — we&rsquo;ll go at a pace that feels safe for you.
            </p>
            <div class="hero-actions">
              <a class="btn primary" href="#book" data-book>Book a session</a>
              <a class="btn quiet" href="#how">How it works</a>
            </div>
            <p class="hero-note">
              <span class="dot" aria-hidden="true"></span>
              Free 15-minute intro call · no waiting list this month
            </p>
          </div>

          <aside class="hero-card reveal" aria-label="Practice at a glance">
            <div class="card-soft">
              <div class="stat-row">
                <div class="stat">
                  <strong>14 yrs</strong>
                  <span>caring for our community</span>
                </div>
                <div class="stat">
                  <strong>6</strong>
                  <span>accredited therapists</span>
                </div>
              </div>
              <div class="quote">
                <p>
                  &ldquo;The first session is just a conversation. There is no
                  script you need to follow.&rdquo;
                </p>
                <span class="quote-by">Dr. Lena Okafor · Clinical lead</span>
              </div>
              <ul class="assure">
                <li>Confidential &amp; non-judgemental</li>
                <li>Evenings &amp; weekend slots</li>
                <li>In person or online</li>
              </ul>
            </div>
            <div class="leaf leaf-a" aria-hidden="true"></div>
            <div class="leaf leaf-b" aria-hidden="true"></div>
          </aside>
        </div>
      </section>

      <!-- ── Services ── -->
      <section class="services" id="services">
        <div class="section-head reveal">
          <span class="kicker">What we offer</span>
          <h2>Ways we can work together</h2>
          <p>
            Every person arrives somewhere different. Choose the format that
            fits you now — you can always change later.
          </p>
        </div>

        <div class="grid">
          <article class="svc reveal">
            <span class="svc-ic" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none">
                <circle cx="12" cy="8" r="3.4" stroke="currentColor" stroke-width="1.6" />
                <path d="M5.5 19c.7-3.3 3.3-5 6.5-5s5.8 1.7 6.5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
              </svg>
            </span>
            <h3>Individual therapy</h3>
            <p>
              One-to-one sessions for anxiety, low mood, grief, burnout or
              simply feeling stuck. Weekly or fortnightly.
            </p>
            <span class="svc-tag">From £65 · 50 min</span>
          </article>

          <article class="svc reveal">
            <span class="svc-ic" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none">
                <circle cx="8.5" cy="9" r="2.8" stroke="currentColor" stroke-width="1.6" />
                <circle cx="15.5" cy="9" r="2.8" stroke="currentColor" stroke-width="1.6" />
                <path d="M3.5 19c.6-2.8 2.6-4.3 5-4.3M21 19c-.6-2.8-2.6-4.3-5-4.3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
              </svg>
            </span>
            <h3>Couples &amp; relationships</h3>
            <p>
              A calm space to be heard and to listen — for partners navigating
              conflict, change or reconnection.
            </p>
            <span class="svc-tag">From £90 · 60 min</span>
          </article>

          <article class="svc reveal">
            <span class="svc-ic" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none">
                <rect x="3.5" y="5.5" width="17" height="11" rx="2.2" stroke="currentColor" stroke-width="1.6" />
                <path d="M9 20h6M12 16.5V20" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
              </svg>
            </span>
            <h3>Teletherapy</h3>
            <p>
              Secure video sessions from wherever you feel most comfortable.
              Same therapists, same care, no commute.
            </p>
            <span class="svc-tag">From £60 · 50 min</span>
          </article>

          <article class="svc reveal">
            <span class="svc-ic" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none">
                <circle cx="7" cy="8" r="2.3" stroke="currentColor" stroke-width="1.6" />
                <circle cx="17" cy="8" r="2.3" stroke="currentColor" stroke-width="1.6" />
                <circle cx="12" cy="14" r="2.3" stroke="currentColor" stroke-width="1.6" />
                <path d="M4.5 18.5c.4-1.8 1.6-2.8 2.9-2.8M19.5 18.5c-.4-1.8-1.6-2.8-2.9-2.8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
              </svg>
            </span>
            <h3>Group sessions</h3>
            <p>
              Small, facilitated groups for shared experiences — grief,
              parenthood and managing anxiety together.
            </p>
            <span class="svc-tag">From £30 · weekly</span>
          </article>
        </div>
      </section>

      <!-- ── How it works ── -->
      <section class="how" id="how">
        <div class="section-head reveal">
          <span class="kicker">Gentle &amp; simple</span>
          <h2>How it works</h2>
          <p>Three small steps, at your pace. No pressure, no paperwork to wrestle with.</p>
        </div>

        <ol class="steps">
          <li class="step reveal">
            <span class="step-no">01</span>
            <h3>Say hello</h3>
            <p>
              Book a free 15-minute intro call. We&rsquo;ll listen, answer your
              questions, and there&rsquo;s no obligation to continue.
            </p>
          </li>
          <li class="step reveal">
            <span class="step-no">02</span>
            <h3>Find your fit</h3>
            <p>
              We match you with a therapist suited to what you&rsquo;re facing —
              and you choose in person or online.
            </p>
          </li>
          <li class="step reveal">
            <span class="step-no">03</span>
            <h3>Begin, gently</h3>
            <p>
              Start your first session whenever you&rsquo;re ready. Pause,
              change therapist or step away any time.
            </p>
          </li>
        </ol>
      </section>

      <!-- ── Approach / values band ── -->
      <section class="approach" id="approach">
        <div class="approach-inner">
          <div class="approach-copy reveal">
            <span class="kicker light">Our approach</span>
            <h2>Care that meets you where you are</h2>
            <p>
              We don&rsquo;t believe in one-size-fits-all. Our therapists draw on
              CBT, person-centred and trauma-informed practice — but more than
              any method, we believe healing happens in a relationship that
              feels safe.
            </p>
            <a class="btn ghost-light" href="#book" data-book>Talk to us first</a>
          </div>

          <ul class="values reveal">
            <li>
              <strong>Safety first</strong>
              <span>A confidential space, free of judgement, always at your pace.</span>
            </li>
            <li>
              <strong>You lead</strong>
              <span>You set the goals. We walk alongside, we don&rsquo;t push.</span>
            </li>
            <li>
              <strong>Whole-person</strong>
              <span>Your story, body and context — not just a symptom list.</span>
            </li>
            <li>
              <strong>No rush</strong>
              <span>Stay as long as helps, step away whenever you need to.</span>
            </li>
          </ul>
        </div>
      </section>

      <!-- ── Testimonial ── -->
      <section class="voices" id="voices">
        <figure class="testimonial reveal">
          <span class="mark-quote" aria-hidden="true">&ldquo;</span>
          <blockquote>
            For the first time in years, I felt heard rather than fixed. The
            sessions gave me room to breathe, and slowly, room to hope.
          </blockquote>
          <figcaption>
            <span class="avatar" aria-hidden="true">J&nbsp;R</span>
            <span class="who">
              <strong>A client of two years</strong>
              <span>Individual therapy · shared with consent</span>
            </span>
          </figcaption>
        </figure>
      </section>

      <!-- ── Crisis note ── -->
      <section class="crisis reveal" id="crisis" aria-label="Crisis resources">
        <span class="crisis-ic" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="22" height="22" fill="none">
            <path d="M12 3.5l8.5 15a1 1 0 0 1-.9 1.5H4.4a1 1 0 0 1-.9-1.5l8.5-15z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" />
            <path d="M12 9.5v4.2M12 16.6h.01" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
          </svg>
        </span>
        <div class="crisis-copy">
          <h3>If you need help right now</h3>
          <p>
            Willowmere isn&rsquo;t an emergency service. If you&rsquo;re in
            crisis or worried about your safety, please call <strong>988</strong>
            (Suicide &amp; Crisis Lifeline) or your local emergency number — help
            is available 24/7, and reaching out is a brave thing to do.
          </p>
        </div>
        <a class="btn solid-coral" href="tel:988">Call 988</a>
      </section>
    </main>

    <!-- ── Footer ── -->
    <footer class="foot" id="book">
      <div class="foot-inner">
        <div class="foot-cta reveal">
          <h2>Ready when you are.</h2>
          <p>Book a free intro call and take the first small step today.</p>
          <a class="btn primary" href="#" data-book>Book a session</a>
        </div>
        <div class="foot-cols">
          <div class="foot-col">
            <span class="foot-brand">Willowmere Practice</span>
            <p>14 Linden Court, Maple Heights · Mon–Sat, 8am&ndash;8pm</p>
            <p>[email protected] · (555) 248-1190</p>
          </div>
          <nav class="foot-col" aria-label="Footer">
            <a href="#services">Services</a>
            <a href="#how">How it works</a>
            <a href="#approach">Our approach</a>
            <a href="#crisis">Crisis resources</a>
          </nav>
        </div>
        <p class="foot-fine">
          © 2026 Willowmere Practice · A fictional clinic. Therapists are BACP /
          UKCP accredited where indicated.
        </p>
      </div>
    </footer>

    <div class="toast" id="toast" hidden role="status" aria-live="polite"></div>

    <script src="script.js"></script>
  </body>
</html>

Mental Health / Therapy Landing

A gentle, unhurried landing for Willowmere Practice — a fictional mental-health and therapy clinic. The page opens with a serif headline (Support, when you need it), warm reassuring subcopy and a Book a session call to action, alongside a floating glance card that surfaces years of care, accredited therapists, a clinical-lead quote and a short list of assurances. The palette is deliberately soft — sage, cream and lavender, paired serif headings with a clean sans body and plenty of whitespace to keep the tone safe and low-pressure.

Below the hero, a four-card services grid lays out individual therapy, couples and relationships, teletherapy and small group sessions, each with its own muted icon tile and a from-price tag. A three-step How it works row walks a visitor from a free intro call to finding their fit to a gentle first session, followed by an approach band that states the practice values, a soft single-client testimonial, and a clearly separated crisis-resources note so anyone in distress is pointed to immediate help.

Interactions are all vanilla JS: an IntersectionObserver reveals each block on scroll (and respects prefers-reduced-motion), the sticky top bar gains a hairline shadow once you leave the top, and a hamburger toggles an accessible mobile menu that closes on link tap, on Escape or when the viewport widens. Booking and service actions surface an empathetic toast confirmation rather than navigating away.

Illustrative UI only — not intended for real medical use.