Hotel Booking — Search

:root {
  --navy: #1a2b4a;
  --navy-d: #0f1d36;
  --navy-2: #2d4570;
  --cream: #f7f3eb;
  --cream-2: #ece5d4;
  --bone: #fbf8f2;
  --gold: #c9a649;
  --gold-light: #e0c378;
  --gold-d: #a88a2e;
  --ink: #161e2c;
  --ink-2: #2e3a52;
  --warm-gray: #6c7280;
  --line: rgba(22, 30, 44, 0.1);
  --line-strong: rgba(22, 30, 44, 0.18);
  --success: #4a7752;
  --danger: #b34232;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --shadow-1: 0 1px 2px rgba(22, 30, 44, 0.06), 0 2px 8px rgba(22, 30, 44, 0.06);
  --shadow-2: 0 18px 50px rgba(15, 29, 54, 0.22);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ── Nav ── */
.nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 40px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--bone);
}
.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--gold);
  color: var(--navy-d);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.brand-name em {
  font-style: normal;
  color: var(--gold-light);
}
.nav-links {
  display: flex;
  gap: 26px;
  margin-left: auto;
}
.nav-links a {
  color: rgba(251, 248, 242, 0.86);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}
.nav-links a:hover {
  color: var(--bone);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav-link {
  color: rgba(251, 248, 242, 0.86);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}
.nav-link:hover {
  color: var(--bone);
}
.nav-cta {
  background: rgba(251, 248, 242, 0.12);
  border: 1px solid rgba(251, 248, 242, 0.3);
  color: var(--bone);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
}
.nav-cta:hover {
  background: rgba(251, 248, 242, 0.2);
}

/* ── Hero ── */
.hero {
  position: relative;
  min-height: 620px;
  padding: 150px 40px 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--bone);
  background: linear-gradient(135deg, var(--navy-d) 0%, var(--navy) 55%, var(--navy-2) 100%);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 80% 10%, rgba(201, 166, 73, 0.22), transparent 55%),
    radial-gradient(80% 80% at 0% 100%, rgba(45, 69, 112, 0.5), transparent 60%);
  pointer-events: none;
}
.hero-copy {
  position: relative;
  max-width: 640px;
  margin-bottom: 34px;
}
.eyebrow {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold-light);
  font-weight: 600;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 10px 0 16px;
}
.lede {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(251, 248, 242, 0.82);
  max-width: 520px;
}

/* ── Search card ── */
.search {
  position: relative;
  background: var(--bone);
  color: var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 16px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr auto;
  gap: 10px;
  align-items: end;
  max-width: 1040px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  padding: 4px 6px;
}
.field + .field {
  border-left: 1px solid var(--line);
}
.field label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--gold-d);
}
.field select,
.field input {
  font-family: inherit;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--navy-d);
  border: none;
  background: transparent;
  outline: none;
  padding: 4px 0;
  width: 100%;
}
.field select {
  cursor: pointer;
  appearance: none;
}
.guests-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--navy-d);
  cursor: pointer;
  padding: 4px 0;
}
.caret {
  color: var(--warm-gray);
  font-size: 0.8rem;
}
.guests-pop {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  width: 300px;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  padding: 8px 16px 16px;
  z-index: 20;
}
.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.stepper strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}
.stepper small {
  font-size: 0.74rem;
  color: var(--warm-gray);
}
.step-ctrl {
  display: flex;
  align-items: center;
  gap: 12px;
}
.step {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--navy-d);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.step:hover:not(:disabled) {
  border-color: var(--navy-2);
  background: var(--cream);
}
.step:disabled {
  opacity: 0.35;
  cursor: default;
}
.step-val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.95rem;
  min-width: 18px;
  text-align: center;
  color: var(--navy-d);
}
.guests-done {
  width: 100%;
  margin-top: 14px;
  background: var(--navy);
  color: var(--bone);
  border: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.86rem;
  padding: 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.guests-done:hover {
  background: var(--navy-d);
}

.search-btn {
  background: var(--gold);
  color: var(--navy-d);
  border: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.96rem;
  padding: 15px 26px;
  border-radius: var(--r-md);
  cursor: pointer;
  white-space: nowrap;
  align-self: stretch;
}
.search-btn:hover {
  background: var(--gold-light);
}
.search-summary {
  grid-column: 1 / -1;
  font-size: 0.84rem;
  color: var(--warm-gray);
  padding: 4px 6px 2px;
  min-height: 1.2em;
}
.search-summary strong {
  color: var(--navy-d);
  font-weight: 700;
}
.search-summary.error {
  color: var(--danger);
  font-weight: 600;
}

/* ── Perks ── */
.perks {
  max-width: 1100px;
  margin: -42px auto 0;
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 0 40px;
}
.perk {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-1);
}
.perk-ic {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: rgba(201, 166, 73, 0.16);
  color: var(--gold-d);
  font-size: 1.2rem;
  font-weight: 700;
}
.perk strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}
.perk small {
  font-size: 0.78rem;
  color: var(--warm-gray);
}

/* ── Featured ── */
.featured {
  max-width: 1100px;
  margin: 72px auto 90px;
  padding: 0 40px;
}
.featured-head {
  text-align: center;
  margin-bottom: 28px;
}
.featured-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--navy-d);
  margin-top: 4px;
}
.featured-head .eyebrow {
  color: var(--gold-d);
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.stay {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform 0.18s, box-shadow 0.18s;
}
.stay:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}
.stay-img {
  height: 180px;
  background: linear-gradient(135deg, var(--navy-2), var(--navy-d));
  position: relative;
}
.stay-img[data-room="deluxe"] {
  background: linear-gradient(135deg, #3a5180, #1a2b4a);
}
.stay-img[data-room="junior"] {
  background: linear-gradient(135deg, #6c7280, #2e3a52);
}
.stay-img[data-room="signature"] {
  background: linear-gradient(135deg, var(--gold-d), #5a4a1e);
}
.stay-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 70% 20%, rgba(255, 255, 255, 0.12), transparent 60%);
}
.stay-body {
  padding: 18px 20px 22px;
}
.stay-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--navy-d);
}
.stay-body p {
  font-size: 0.84rem;
  color: var(--warm-gray);
  margin-top: 4px;
}
.stay-price {
  margin-top: 12px !important;
  font-size: 0.86rem;
  color: var(--ink-2) !important;
}
.stay-price strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--gold-d);
}

/* ── Toast ── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy-d);
  color: var(--bone);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: var(--shadow-2);
  z-index: 50;
}

/* ── Responsive ── */
@media (max-width: 1080px) {
  .search {
    grid-template-columns: 1fr 1fr;
  }
  .field + .field {
    border-left: none;
  }
  .search-btn {
    grid-column: 1 / -1;
  }
  .perks {
    grid-template-columns: repeat(2, 1fr);
  }
  .cards {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .nav-links {
    display: none;
  }
  .nav {
    padding: 16px 20px;
  }
  .hero {
    padding: 120px 20px 80px;
  }
  .search {
    grid-template-columns: 1fr;
  }
  .perks,
  .featured {
    padding: 0 20px;
  }
  .perks {
    grid-template-columns: 1fr;
  }
  .guests-pop {
    width: 100%;
  }
}

// ── Date defaults: check-in tomorrow, check-out +2 nights ─────────────────────
const checkin = document.getElementById("checkin");
const checkout = document.getElementById("checkout");

function iso(d) {
  return d.toISOString().slice(0, 10);
}
function addDays(date, n) {
  const d = new Date(date);
  d.setDate(d.getDate() + n);
  return d;
}

const today = new Date();
today.setHours(0, 0, 0, 0);
const defIn = addDays(today, 1);
const defOut = addDays(today, 3);

checkin.value = iso(defIn);
checkout.value = iso(defOut);
checkin.min = iso(today);
checkout.min = iso(addDays(today, 1));

// Keep check-out strictly after check-in.
checkin.addEventListener("change", () => {
  const inD = new Date(checkin.value);
  const minOut = iso(addDays(inD, 1));
  checkout.min = minOut;
  if (new Date(checkout.value) <= inD) checkout.value = minOut;
  renderSummary();
});
checkout.addEventListener("change", renderSummary);
document.getElementById("dest").addEventListener("change", renderSummary);

// ── Guests & rooms popover ────────────────────────────────────────────────────
const guests = { adults: 2, children: 0, rooms: 1 };
const trigger = document.getElementById("guestsTrigger");
const pop = document.getElementById("guestsPop");
const guestsLabel = document.getElementById("guestsLabel");

function openPop(open) {
  pop.hidden = !open;
  trigger.setAttribute("aria-expanded", String(open));
}
trigger.addEventListener("click", (e) => {
  e.stopPropagation();
  openPop(pop.hidden);
});
document.getElementById("guestsDone").addEventListener("click", () => openPop(false));
document.addEventListener("click", (e) => {
  if (!pop.hidden && !pop.contains(e.target) && e.target !== trigger) openPop(false);
});

document.querySelectorAll(".stepper").forEach((row) => {
  const key = row.dataset.key;
  const min = Number(row.dataset.min);
  const max = Number(row.dataset.max);
  const valEl = row.querySelector("[data-val]");
  const [minus, plus] = row.querySelectorAll(".step");

  function sync() {
    valEl.textContent = guests[key];
    minus.disabled = guests[key] <= min;
    plus.disabled = guests[key] >= max;
  }
  row.querySelectorAll(".step").forEach((btn) =>
    btn.addEventListener("click", () => {
      const next = guests[key] + Number(btn.dataset.dir);
      if (next < min || next > max) return;
      guests[key] = next;
      sync();
      renderGuestsLabel();
      renderSummary();
    })
  );
  sync();
});

function renderGuestsLabel() {
  const ppl = guests.adults + guests.children;
  const g = `${ppl} ${ppl === 1 ? "guest" : "guests"}`;
  const r = `${guests.rooms} ${guests.rooms === 1 ? "room" : "rooms"}`;
  guestsLabel.textContent = `${g} · ${r}`;
}

// ── Summary line ──────────────────────────────────────────────────────────────
const summary = document.getElementById("summary");

function nights() {
  const ms = new Date(checkout.value) - new Date(checkin.value);
  return Math.round(ms / 86400000);
}
function fmt(isoStr) {
  return new Date(isoStr + "T00:00").toLocaleDateString("en-GB", {
    weekday: "short",
    day: "numeric",
    month: "short",
  });
}

function renderSummary() {
  const n = nights();
  if (!checkin.value || !checkout.value || n <= 0) {
    summary.classList.add("error");
    summary.textContent = "Please choose a check-out date after your check-in date.";
    return;
  }
  summary.classList.remove("error");
  const ppl = guests.adults + guests.children;
  summary.innerHTML =
    `<strong>${n}</strong> ${n === 1 ? "night" : "nights"} · ` +
    `${fmt(checkin.value)} → ${fmt(checkout.value)} · ` +
    `<strong>${ppl}</strong> ${ppl === 1 ? "guest" : "guests"}, ` +
    `<strong>${guests.rooms}</strong> ${guests.rooms === 1 ? "room" : "rooms"}`;
}

// ── Toast + submit ────────────────────────────────────────────────────────────
const toast = document.getElementById("toast");
function showToast(msg) {
  toast.textContent = msg;
  toast.hidden = false;
  clearTimeout(showToast._t);
  showToast._t = setTimeout(() => (toast.hidden = true), 2400);
}

document.getElementById("search").addEventListener("submit", (e) => {
  e.preventDefault();
  if (nights() <= 0) {
    renderSummary();
    return;
  }
  const dest = document.getElementById("dest");
  const city = dest.options[dest.selectedIndex].text;
  showToast(`Searching ${city} · ${nights()} nights · ${guests.rooms} room(s)…`);
});

renderGuestsLabel();
renderSummary();

<!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=Cormorant+Garamond:wght@600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Book your stay · Aurelia Hotels</title>
  </head>
  <body>
    <header class="nav">
      <a class="brand" href="#">
        <span class="brand-mark">A</span>
        <span class="brand-name">Aurelia <em>Hotels</em></span>
      </a>
      <nav class="nav-links">
        <a href="#">Rooms</a>
        <a href="#">Amenities</a>
        <a href="#">Offers</a>
        <a href="#">Contact</a>
      </nav>
      <div class="nav-actions">
        <a class="nav-link" href="#">Sign in</a>
        <button class="nav-cta">My booking</button>
      </div>
    </header>

    <main class="hero">
      <div class="hero-copy">
        <p class="eyebrow">Aurelia · Madrid · Barcelona · Lisbon</p>
        <h1>Stay a little<br />closer to perfect.</h1>
        <p class="lede">
          Book direct for our best available rate, free room upgrades when available, and late
          check-out on us.
        </p>
      </div>

      <form class="search" id="search" autocomplete="off">
        <div class="field field-dest">
          <label for="dest">Destination</label>
          <select id="dest" name="dest">
            <option value="mad">Aurelia · Madrid</option>
            <option value="bcn">Aurelia · Barcelona</option>
            <option value="lis">Aurelia · Lisbon</option>
            <option value="sev">Aurelia · Seville</option>
          </select>
        </div>

        <div class="field">
          <label for="checkin">Check-in</label>
          <input type="date" id="checkin" name="checkin" />
        </div>

        <div class="field">
          <label for="checkout">Check-out</label>
          <input type="date" id="checkout" name="checkout" />
        </div>

        <div class="field field-guests">
          <label>Guests &amp; rooms</label>
          <button type="button" class="guests-trigger" id="guestsTrigger" aria-expanded="false">
            <span id="guestsLabel">2 guests · 1 room</span>
            <span class="caret">▾</span>
          </button>

          <div class="guests-pop" id="guestsPop" hidden>
            <div class="stepper" data-key="adults" data-min="1" data-max="8">
              <div>
                <strong>Adults</strong>
                <small>13+ years</small>
              </div>
              <div class="step-ctrl">
                <button type="button" class="step" data-dir="-1" aria-label="Fewer adults">−</button>
                <span class="step-val" data-val>2</span>
                <button type="button" class="step" data-dir="1" aria-label="More adults">+</button>
              </div>
            </div>
            <div class="stepper" data-key="children" data-min="0" data-max="6">
              <div>
                <strong>Children</strong>
                <small>0–12 years</small>
              </div>
              <div class="step-ctrl">
                <button type="button" class="step" data-dir="-1" aria-label="Fewer children">−</button>
                <span class="step-val" data-val>0</span>
                <button type="button" class="step" data-dir="1" aria-label="More children">+</button>
              </div>
            </div>
            <div class="stepper" data-key="rooms" data-min="1" data-max="5">
              <div>
                <strong>Rooms</strong>
                <small>up to 4 guests each</small>
              </div>
              <div class="step-ctrl">
                <button type="button" class="step" data-dir="-1" aria-label="Fewer rooms">−</button>
                <span class="step-val" data-val>1</span>
                <button type="button" class="step" data-dir="1" aria-label="More rooms">+</button>
              </div>
            </div>
            <button type="button" class="guests-done" id="guestsDone">Done</button>
          </div>
        </div>

        <button type="submit" class="search-btn">Search stays</button>

        <p class="search-summary" id="summary"></p>
      </form>
    </main>

    <section class="perks">
      <article class="perk">
        <span class="perk-ic">€</span>
        <div>
          <strong>Best rate, guaranteed</strong>
          <small>Find it cheaper, we'll match it.</small>
        </div>
      </article>
      <article class="perk">
        <span class="perk-ic">✦</span>
        <div>
          <strong>Free upgrades</strong>
          <small>Room upgrade when available.</small>
        </div>
      </article>
      <article class="perk">
        <span class="perk-ic">◷</span>
        <div>
          <strong>Late check-out</strong>
          <small>Stay until 2pm, on the house.</small>
        </div>
      </article>
      <article class="perk">
        <span class="perk-ic">♡</span>
        <div>
          <strong>No booking fees</strong>
          <small>Cancel free up to 48h before.</small>
        </div>
      </article>
    </section>

    <section class="featured">
      <header class="featured-head">
        <p class="eyebrow">Most booked</p>
        <h2>Signature stays</h2>
      </header>
      <div class="cards">
        <article class="stay">
          <div class="stay-img" data-room="deluxe"></div>
          <div class="stay-body">
            <h3>Deluxe Double</h3>
            <p>City view · 28m² · King bed</p>
            <p class="stay-price">from <strong>€184</strong> / night</p>
          </div>
        </article>
        <article class="stay">
          <div class="stay-img" data-room="junior"></div>
          <div class="stay-body">
            <h3>Junior Suite</h3>
            <p>Balcony · 42m² · Lounge area</p>
            <p class="stay-price">from <strong>€268</strong> / night</p>
          </div>
        </article>
        <article class="stay">
          <div class="stay-img" data-room="signature"></div>
          <div class="stay-body">
            <h3>Signature Suite</h3>
            <p>Terrace · 64m² · Separate living</p>
            <p class="stay-price">from <strong>€412</strong> / night</p>
          </div>
        </article>
      </div>
    </section>

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

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