Vet — Emergency Vet Landing

:root {
  --teal: #179c8e;
  --teal-d: #0f7f73;
  --teal-50: #e6f5f2;
  --coral: #ff8a5c;
  --ink: #173a36;
  --muted: #6b827e;
  --bg: #f2f8f6;
  --white: #ffffff;
  --urgent: #e23b3b;
  --urgent-d: #c42f2f;
  --line: #d7e8e4;
  --shadow: 0 12px 32px rgba(15, 127, 115, 0.12);
  --radius: 20px;
  --radius-sm: 12px;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }

.wrap { width: min(1080px, 92vw); margin-inline: auto; }

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--white);
  padding: 10px 16px;
  border-radius: 0 0 10px 0;
  z-index: 100;
}
.skip:focus { left: 0; }

:where(a, button):focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn--call {
  background: var(--urgent);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(226, 59, 59, .32);
}
.btn--call:hover { background: var(--urgent-d); transform: translateY(-1px); }
.btn--ghost {
  background: var(--white);
  color: var(--teal-d);
  border: 2px solid var(--line);
}
.btn--ghost:hover { border-color: var(--teal); color: var(--teal); }
.btn--lg { padding: 15px 28px; font-size: 1.05rem; }
.btn--sm { padding: 9px 16px; font-size: .9rem; }

/* ---- topbar ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand__mark {
  font-size: 1.5rem;
  background: var(--teal-50);
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 14px;
}
.brand__name { font-weight: 800; line-height: 1.05; display: flex; flex-direction: column; }
.brand__sub { font-size: .72rem; font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.topbar__meta { display: flex; align-items: center; gap: 14px; }
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--teal-d);
  background: var(--teal-50);
  padding: 6px 12px;
  border-radius: 999px;
}
.status--closed { color: var(--urgent-d); background: #fde9e9; }
.status__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 0 rgba(23, 156, 142, .55);
  animation: pulse 1.8s infinite;
}
.status--closed .status__dot { background: var(--urgent); animation: none; }
.clock { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted); font-size: .9rem; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(23, 156, 142, .55); }
  70% { box-shadow: 0 0 0 9px rgba(23, 156, 142, 0); }
  100% { box-shadow: 0 0 0 0 rgba(23, 156, 142, 0); }
}

/* ---- hero ---- */
.hero {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(255, 138, 92, .18), transparent 60%),
    linear-gradient(180deg, var(--teal-50), var(--bg));
  padding: 56px 0 64px;
}
.hero__inner { max-width: 760px; }
.urgent {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fde9e9;
  color: var(--urgent-d);
  font-weight: 700;
  font-size: .92rem;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid #f6c9c9;
}
.urgent__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--urgent);
  animation: blink 1.2s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: .25; } }
.hero__title {
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 18px 0 14px;
  line-height: 1.08;
}
.hero__lead { font-size: 1.12rem; color: var(--muted); max-width: 56ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 30px; }
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.hero__facts li {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
.hero__facts strong { font-size: 1.25rem; color: var(--teal-d); }
.hero__facts span { font-size: .82rem; color: var(--muted); }

/* ---- sections ---- */
.section { padding: 56px 0; }
.section--alt { background: var(--white); }
.section__title {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.01em;
}
.section__sub { color: var(--muted); margin-top: 8px; max-width: 60ch; }

/* ---- signs ---- */
.signs {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.sign {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--coral);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease;
}
.sign:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.sign__ico {
  font-size: 1.3rem;
  background: var(--teal-50);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  flex: none;
}

/* ---- service cards ---- */
.cards {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--teal); }
.card__ico {
  font-size: 1.7rem;
  background: var(--white);
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.card h3 { font-size: 1.1rem; margin: 14px 0 6px; }
.card p { color: var(--muted); font-size: .95rem; }

/* ---- steps ---- */
.steps {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  counter-reset: step;
}
.step {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  position: relative;
}
.step__num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-weight: 800;
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.step h3 { font-size: 1.1rem; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: .95rem; }

/* ---- location ---- */
.loc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.loc__addr { margin: 18px 0; color: var(--ink); }
.loc__addr strong { color: var(--teal-d); }
.loc__list { display: grid; gap: 10px; margin-bottom: 22px; }
.loc__list li { color: var(--muted); display: flex; gap: 10px; align-items: center; }
.loc__list strong { color: var(--ink); }
.loc__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.loc__map {
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, rgba(23,156,142,.06) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, var(--teal-50), #d7efe9);
  border: 1px solid var(--line);
  min-height: 280px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.loc__pin { font-size: 3rem; filter: drop-shadow(0 6px 8px rgba(15,127,115,.3)); animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.loc__maplabel {
  position: absolute;
  bottom: 16px;
  background: var(--white);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--teal-d);
  box-shadow: var(--shadow);
}

/* ---- footer ---- */
.footer {
  background: var(--ink);
  color: #d7e8e4;
  padding: 34px 0;
}
.footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}
.footer__calm { font-size: 1.08rem; font-weight: 600; max-width: 42ch; color: var(--white); }
.footer__meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer__meta small { color: #9bb6b0; }

/* ---- toast ---- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--white);
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 90;
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- responsive ---- */
@media (max-width: 820px) {
  .cards, .steps { grid-template-columns: 1fr 1fr; }
  .loc { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .clock { display: none; }
  .topbar__meta { gap: 8px; }
  .topbar .btn--call { padding: 8px 12px; }
  .hero { padding: 36px 0 44px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
  .signs, .cards, .steps { grid-template-columns: 1fr; }
  .section { padding: 40px 0; }
  .footer__row { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto; }
}

(function () {
  'use strict';

  // --- Live clock + open-now indicator -------------------------------------
  var clockEl = document.getElementById('clock');
  var pill = document.getElementById('statusPill');
  var statusText = document.getElementById('statusText');

  function tick() {
    var now = new Date();
    if (clockEl) {
      clockEl.textContent = now.toLocaleTimeString([], {
        hour: '2-digit',
        minute: '2-digit'
      });
    }
    // This hospital is open 24/7, so it is always "Open now" — but we still
    // compute it so the indicator behaves like a real hours check.
    var open = true; // 24/7
    if (pill && statusText) {
      if (open) {
        pill.classList.remove('status--closed');
        statusText.textContent = 'Open now · 24/7';
      } else {
        pill.classList.add('status--closed');
        statusText.textContent = 'Closed';
      }
    }
  }
  tick();
  setInterval(tick, 15000);

  // --- Toast helper --------------------------------------------------------
  var toast = document.getElementById('toast');
  var toastTimer;
  function showToast(msg) {
    if (!toast) return;
    toast.hidden = false;
    toast.textContent = msg;
    // force reflow so the transition runs
    void toast.offsetWidth;
    toast.classList.add('is-show');
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function () {
      toast.classList.remove('is-show');
      setTimeout(function () { toast.hidden = true; }, 250);
    }, 2600);
  }

  // --- Confirm the number on every call CTA --------------------------------
  document.querySelectorAll('.js-call').forEach(function (link) {
    link.addEventListener('click', function () {
      var num = link.getAttribute('data-number') || 'our 24/7 line';
      showToast('Connecting you to ' + num + ' …');
    });
  });

  // --- Tiny live touch: nudge the estimated wait slightly over time --------
  var waitEl = document.getElementById('waitText');
  var waits = ['~6 minutes', '~8 minutes', '~5 minutes', '~10 minutes'];
  var wi = 1;
  if (waitEl) {
    setInterval(function () {
      wi = (wi + 1) % waits.length;
      waitEl.textContent = waits[wi];
    }, 20000);
  }
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Riverbend Emergency Vet — Open 24/7</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <a class="skip" href="#main">Skip to content</a>

  <header class="topbar">
    <div class="wrap topbar__row">
      <a class="brand" href="#main" aria-label="Riverbend Emergency Vet home">
        <span class="brand__mark" aria-hidden="true">🐾</span>
        <span class="brand__name">Riverbend<span class="brand__sub">Emergency Vet</span></span>
      </a>
      <div class="topbar__meta">
        <span class="status" id="statusPill">
          <span class="status__dot" aria-hidden="true"></span>
          <span id="statusText">Checking hours…</span>
        </span>
        <span class="clock" id="clock" aria-live="polite">--:--</span>
        <a class="btn btn--call btn--sm js-call" href="tel:+15035550199" data-number="(503) 555-0199">
          <span aria-hidden="true">📞</span> Call now
        </a>
      </div>
    </div>
  </header>

  <main id="main">
    <!-- HERO -->
    <section class="hero">
      <div class="wrap hero__inner">
        <p class="urgent" role="status">
          <span class="urgent__dot" aria-hidden="true"></span>
          Pet emergency? We are open and accepting walk-ins right now.
        </p>
        <h1 class="hero__title">24/7 emergency care for the pets you love</h1>
        <p class="hero__lead">
          A calm, experienced team is here around the clock — nights, weekends and holidays. No
          appointment needed. If something feels wrong, trust your instinct and come in.
        </p>
        <div class="hero__cta">
          <a class="btn btn--call btn--lg js-call" href="tel:+15035550199" data-number="(503) 555-0199">
            <span aria-hidden="true">📞</span> Call (503) 555-0199
          </a>
          <a class="btn btn--ghost btn--lg" href="#location">Get directions</a>
        </div>
        <ul class="hero__facts">
          <li><strong>Open now</strong><span>Walk-ins welcome</span></li>
          <li><strong>~8 min</strong><span>Current wait</span></li>
          <li><strong>4.9 ★</strong><span>1,280 reviews</span></li>
        </ul>
      </div>
    </section>

    <!-- WHAT COUNTS AS AN EMERGENCY -->
    <section class="section" id="signs" aria-labelledby="signs-h">
      <div class="wrap">
        <h2 class="section__title" id="signs-h">When to come in right away</h2>
        <p class="section__sub">If your pet shows any of these signs, call us or head over — do not wait until morning.</p>
        <ul class="signs">
          <li class="sign"><span class="sign__ico" aria-hidden="true">🫁</span> Trouble breathing or choking</li>
          <li class="sign"><span class="sign__ico" aria-hidden="true">🩸</span> Bleeding that will not stop</li>
          <li class="sign"><span class="sign__ico" aria-hidden="true">🚗</span> Hit by a car or a bad fall</li>
          <li class="sign"><span class="sign__ico" aria-hidden="true">🤢</span> Repeated vomiting or diarrhea</li>
          <li class="sign"><span class="sign__ico" aria-hidden="true">⚡</span> Seizures or sudden collapse</li>
          <li class="sign"><span class="sign__ico" aria-hidden="true">🧪</span> Ate something toxic (chocolate, xylitol, meds)</li>
          <li class="sign"><span class="sign__ico" aria-hidden="true">😣</span> Bloated, hard belly or can't pee</li>
          <li class="sign"><span class="sign__ico" aria-hidden="true">🌡️</span> Heatstroke or won't stand up</li>
        </ul>
      </div>
    </section>

    <!-- SERVICES -->
    <section class="section section--alt" id="services" aria-labelledby="serv-h">
      <div class="wrap">
        <h2 class="section__title" id="serv-h">Emergency &amp; critical care</h2>
        <p class="section__sub">A full hospital on site, ready the moment you arrive.</p>
        <div class="cards">
          <article class="card">
            <span class="card__ico" aria-hidden="true">🚑</span>
            <h3>Triage &amp; stabilization</h3>
            <p>Immediate assessment and life-saving treatment the second you walk through the door.</p>
          </article>
          <article class="card">
            <span class="card__ico" aria-hidden="true">🩻</span>
            <h3>Imaging &amp; diagnostics</h3>
            <p>On-site digital X-ray, ultrasound and a 24-hour lab for fast, clear answers.</p>
          </article>
          <article class="card">
            <span class="card__ico" aria-hidden="true">🔬</span>
            <h3>Emergency surgery</h3>
            <p>Board-certified surgeons for trauma, foreign-body removal and bloat (GDV).</p>
          </article>
          <article class="card">
            <span class="card__ico" aria-hidden="true">💊</span>
            <h3>Poison &amp; toxin care</h3>
            <p>Rapid decontamination and antidotes, with the pet poison line on speed dial.</p>
          </article>
          <article class="card">
            <span class="card__ico" aria-hidden="true">🛏️</span>
            <h3>ICU &amp; monitoring</h3>
            <p>Overnight intensive care with oxygen support and continuous nurse monitoring.</p>
          </article>
          <article class="card">
            <span class="card__ico" aria-hidden="true">🐾</span>
            <h3>Comfort &amp; end-of-life</h3>
            <p>Gentle, compassionate support and humane options when they are needed most.</p>
          </article>
        </div>
      </div>
    </section>

    <!-- WHAT TO EXPECT -->
    <section class="section" id="expect" aria-labelledby="exp-h">
      <div class="wrap">
        <h2 class="section__title" id="exp-h">What to expect when you arrive</h2>
        <p class="section__sub">Take a breath — here is exactly how your visit will go.</p>
        <ol class="steps">
          <li class="step">
            <span class="step__num">1</span>
            <h3>Fast triage</h3>
            <p>The most urgent cases are seen first. A nurse checks your pet within minutes of arrival.</p>
          </li>
          <li class="step">
            <span class="step__num">2</span>
            <h3>Clear plan &amp; estimate</h3>
            <p>The doctor explains what is happening and gives you a written estimate before any treatment.</p>
          </li>
          <li class="step">
            <span class="step__num">3</span>
            <h3>Treatment &amp; updates</h3>
            <p>We treat your pet and keep you updated, then coordinate follow-up with your regular vet.</p>
          </li>
        </ol>
      </div>
    </section>

    <!-- LOCATION -->
    <section class="section section--alt" id="location" aria-labelledby="loc-h">
      <div class="wrap loc">
        <div class="loc__info">
          <h2 class="section__title" id="loc-h">Find us, day or night</h2>
          <p class="loc__addr">
            <strong>Riverbend Emergency Animal Hospital</strong><br />
            2840 Willow Creek Rd, Suite B<br />
            Portland, OR 97229
          </p>
          <ul class="loc__list">
            <li><span aria-hidden="true">🕒</span> Open <strong>24 hours</strong>, 365 days a year</li>
            <li><span aria-hidden="true">⏱️</span> Estimated wait: <strong id="waitText">~8 minutes</strong></li>
            <li><span aria-hidden="true">🅿️</span> Free parking right at the entrance</li>
            <li><span aria-hidden="true">♿</span> Wheelchair &amp; stretcher accessible</li>
          </ul>
          <div class="loc__cta">
            <a class="btn btn--call js-call" href="tel:+15035550199" data-number="(503) 555-0199">
              <span aria-hidden="true">📞</span> Call (503) 555-0199
            </a>
            <a class="btn btn--ghost" href="https://maps.google.com" target="_blank" rel="noopener">Open in Maps</a>
          </div>
        </div>
        <div class="loc__map" role="img" aria-label="Map showing Riverbend Emergency Animal Hospital near Willow Creek Rd">
          <span class="loc__pin" aria-hidden="true">📍</span>
          <span class="loc__maplabel">Willow Creek Rd &amp; NW 28th</span>
        </div>
      </div>
    </section>
  </main>

  <footer class="footer">
    <div class="wrap footer__row">
      <p class="footer__calm">
        You know your pet best. If you are worried, call us — there is never a wrong reason to check.
      </p>
      <div class="footer__meta">
        <a class="btn btn--call btn--sm js-call" href="tel:+15035550199" data-number="(503) 555-0199">
          <span aria-hidden="true">📞</span> 24/7 line
        </a>
        <small>© 2026 Riverbend Emergency Animal Hospital · Illustrative demo</small>
      </div>
    </div>
  </footer>

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

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