Restaurant About / Our Story

:root {
  --cream: #f5f0e8;
  --cream-2: #ece4d4;
  --bone: #faf7f1;
  --terracotta: #c1714a;
  --terracotta-d: #a05a38;
  --forest: #2d4a3e;
  --forest-d: #1e3329;
  --gold: #c9a84c;
  --gold-light: #e6c97a;
  --ink: #2c1a0e;
  --ink-2: #4a3828;
  --warm-gray: #7a6a58;
  --success: #4f7a3a;
  --danger: #b3432a;
  --warning: #d99020;
  --font-display: "Playfair Display", 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(44, 26, 14, 0.08), 0 2px 6px rgba(44, 26, 14, 0.06);
  --shadow-2: 0 8px 24px rgba(44, 26, 14, 0.12);
}

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

/* Nav */
.nav {
  padding: 18px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(44, 26, 14, 0.08);
  background: var(--bone);
}
.nav-brand {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
}
.nav-back {
  font-size: 0.84rem;
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 600;
}
.nav-back:hover {
  color: var(--terracotta-d);
}

/* Intro pull-quote */
.intro {
  max-width: 920px;
  margin: 0 auto;
  padding: 84px 28px 56px;
  text-align: center;
}
.kicker {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: 12px;
}
.intro h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.intro h1 em {
  font-style: italic;
  color: var(--terracotta-d);
}
.byline {
  margin-top: 28px;
  font-size: 0.86rem;
  color: var(--warm-gray);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Chef */
.chef {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 28px 80px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 720px) {
  .chef {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
.chef-portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.portrait-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(193, 113, 74, 0.5), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(45, 74, 62, 0.4), transparent 55%),
    linear-gradient(135deg, var(--cream-2) 0%, var(--gold-light) 100%);
}
.portrait-glyph {
  position: relative;
  font-size: 6rem;
  filter: drop-shadow(0 8px 16px rgba(44, 26, 14, 0.25));
}
.chef-portrait figcaption {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  font-size: 0.74rem;
  font-style: italic;
  color: var(--ink);
  background: rgba(250, 247, 241, 0.86);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  backdrop-filter: blur(6px);
}
.chef-body p {
  font-size: 1.02rem;
  color: var(--ink-2);
  margin-bottom: 16px;
}
.chef-body p:last-child {
  margin-bottom: 0;
}

/* Section base */
.section,
.press {
  max-width: 1080px;
  margin: 0 auto;
  padding: 72px 28px;
}
.section-head {
  text-align: center;
  margin-bottom: 36px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Timeline */
.timeline {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(90deg, var(--terracotta), var(--gold), var(--forest));
  border-radius: 999px;
  opacity: 0.4;
}
.timeline li {
  background: var(--bone);
  border: 1px solid rgba(44, 26, 14, 0.08);
  border-radius: var(--r-md);
  padding: 22px 18px 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.timeline li::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 22px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--terracotta);
  border: 3px solid var(--bone);
  box-shadow: 0 0 0 1px var(--terracotta);
}
.timeline li:nth-child(2)::before {
  background: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}
.timeline li:nth-child(3)::before {
  background: var(--success);
  box-shadow: 0 0 0 1px var(--success);
}
.timeline li:nth-child(4)::before {
  background: var(--forest);
  box-shadow: 0 0 0 1px var(--forest);
}
.year {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--warm-gray);
  letter-spacing: 0.06em;
}
.timeline h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
}
.timeline p {
  font-size: 0.88rem;
  color: var(--ink-2);
}
@media (max-width: 880px) {
  .timeline {
    grid-template-columns: 1fr;
  }
  .timeline::before {
    display: none;
  }
}

/* Team */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.member {
  text-align: center;
  background: var(--bone);
  border: 1px solid rgba(44, 26, 14, 0.08);
  border-radius: var(--r-md);
  padding: 22px 16px 18px;
}
.avatar {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  color: var(--bone);
}
.avatar-a {
  background: linear-gradient(135deg, var(--terracotta), var(--terracotta-d));
}
.avatar-b {
  background: linear-gradient(135deg, var(--forest), var(--forest-d));
}
.avatar-c {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--ink);
}
.avatar-d {
  background: linear-gradient(135deg, var(--warm-gray), var(--ink-2));
}
.member h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
}
.member p {
  font-size: 0.82rem;
  color: var(--warm-gray);
  margin-top: 2px;
}

/* Values */
.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.value {
  background: var(--bone);
  border: 1px solid rgba(44, 26, 14, 0.08);
  border-radius: var(--r-md);
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.value-icon {
  font-size: 1.8rem;
}
.value h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
}
.value p {
  font-size: 0.92rem;
  color: var(--ink-2);
}

/* Press */
.press {
  text-align: center;
  border-top: 1px solid rgba(44, 26, 14, 0.08);
  border-bottom: 1px solid rgba(44, 26, 14, 0.08);
  background: var(--bone);
  max-width: none;
}
.press-grid {
  max-width: 1080px;
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.press-card {
  background: var(--cream);
  border-radius: var(--r-md);
  padding: 22px 22px 20px;
  text-align: left;
}
.press-pub {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--terracotta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.press-quote {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ink);
  line-height: 1.45;
}

/* CTA strip */
.cta-strip {
  text-align: center;
  padding: 60px 28px 80px;
}
.cta-strip h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  margin-bottom: 18px;
}
.btn-primary {
  display: inline-block;
  background: var(--forest);
  color: var(--bone);
  text-decoration: none;
  border-radius: 999px;
  padding: 13px 26px;
  font-weight: 700;
}
.btn-primary:hover {
  background: var(--forest-d);
}

/* Footer */
.footer {
  border-top: 1px solid rgba(44, 26, 14, 0.08);
  background: var(--bone);
  text-align: center;
  padding: 32px 28px;
}
.footer-brand {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.005em;
}
.footer-meta {
  font-size: 0.84rem;
  color: var(--warm-gray);
  margin-top: 4px;
}

/* Reveal on scroll */
.timeline li,
.member,
.value,
.press-card {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.timeline li.is-in,
.member.is-in,
.value.is-in,
.press-card.is-in {
  opacity: 1;
  transform: none;
}

// CSS-only fade is handled by the .is-in class; we just observe and toggle.
const targets = document.querySelectorAll(".timeline li, .member, .value, .press-card");

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

<!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=Playfair+Display:wght@400;500;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Our story · Casa Olivar</title>
  </head>
  <body>
    <header class="nav">
      <a class="nav-brand" href="#">Casa Olivar</a>
      <a class="nav-back" href="#">← Back to home</a>
    </header>

    <main>
      <!-- Pulled-quote intro -->
      <section class="intro">
        <p class="kicker">Our story</p>
        <h1>
          “We cook the garden, not the menu —<br />
          <em>the menu just follows.”</em>
        </h1>
        <p class="byline">
          Aitor Mendizabal · Chef &amp; co-founder
        </p>
      </section>

      <!-- Chef portrait + story -->
      <section class="chef">
        <figure class="chef-portrait" aria-label="Chef Aitor Mendizabal">
          <div class="portrait-bg"></div>
          <span class="portrait-glyph">👨‍🍳</span>
          <figcaption>Aitor in the kitchen, Tuesday morning prep.</figcaption>
        </figure>
        <div class="chef-body">
          <p>
            Casa Olivar started as a thirty-cover dining room in a converted
            carriage house on Calle del Olivar in late 2017. Aitor had spent
            six years cooking in San Sebastián and a year in a friend's
            wood-fired bakery; Iria, the floor's quiet engine, came back to
            Madrid from a wine bar in Porto.
          </p>
          <p>
            What the room had then is what it has now: one hearth, twelve
            tables, three people on the line, and a half-hectare garden in
            Aravaca that produces seventy percent of our vegetables May to
            October.
          </p>
          <p>
            The menu changes weekly. The constants are bread made daily,
            hand-cut pasta on Wednesdays, a whole grilled fish on weekends,
            and a dry-aged steak that runs the year. Everything else is a
            conversation with the garden.
          </p>
        </div>
      </section>

      <!-- Timeline -->
      <section class="section">
        <header class="section-head">
          <p class="kicker">Milestones</p>
          <h2>Seven seasons in.</h2>
        </header>
        <ol class="timeline">
          <li>
            <span class="year">2017</span>
            <h3>The lease</h3>
            <p>
              Aitor signs a five-year lease on a former carriage house. The
              kitchen has one wood-fired hearth and no walk-in.
            </p>
          </li>
          <li>
            <span class="year">2019</span>
            <h3>The garden</h3>
            <p>
              We take over a neglected half-hectare in Aravaca. The first
              harvest is fourteen kilos of cherry tomatoes — they last six
              days on the menu.
            </p>
          </li>
          <li>
            <span class="year">2021</span>
            <h3>The wine list</h3>
            <p>
              Iria builds a 140-bottle natural-wine list across Spain,
              Portugal, and the Loire. Two by-the-glass producers stay on
              year-round.
            </p>
          </li>
          <li>
            <span class="year">2024</span>
            <h3>The second sitting</h3>
            <p>
              We add a 21:30 sitting Thursday–Saturday. The kitchen still
              closes at midnight; the bar stays open until one.
            </p>
          </li>
        </ol>
      </section>

      <!-- Team -->
      <section class="section section-team">
        <header class="section-head">
          <p class="kicker">The team</p>
          <h2>Twelve people. One hearth.</h2>
        </header>
        <div class="team">
          <article class="member">
            <div class="avatar avatar-a">A</div>
            <h3>Aitor Mendizabal</h3>
            <p>Chef · co-founder</p>
          </article>
          <article class="member">
            <div class="avatar avatar-b">I</div>
            <h3>Iria Costa</h3>
            <p>Floor · wine · co-founder</p>
          </article>
          <article class="member">
            <div class="avatar avatar-c">L</div>
            <h3>Lina Mendoza</h3>
            <p>Sous-chef</p>
          </article>
          <article class="member">
            <div class="avatar avatar-d">S</div>
            <h3>Sofía Reyes</h3>
            <p>Floor lead · pastry</p>
          </article>
        </div>
      </section>

      <!-- Values -->
      <section class="section section-values">
        <header class="section-head">
          <p class="kicker">What we believe</p>
          <h2>Three things, mostly.</h2>
        </header>
        <div class="values">
          <article class="value">
            <span class="value-icon">🌱</span>
            <h3>Garden first</h3>
            <p>
              The menu starts in Aravaca on Monday morning. If a thing isn't
              ready, it doesn't go on the menu — substitutions over forcing.
            </p>
          </article>
          <article class="value">
            <span class="value-icon">🔥</span>
            <h3>Live fire</h3>
            <p>
              The hearth runs olive and oak. The grill cools to coal-only by
              second service so the room stays calm.
            </p>
          </article>
          <article class="value">
            <span class="value-icon">🤝</span>
            <h3>Honest pricing</h3>
            <p>
              No platform fees on direct reservations, no minimum spend, no
              corkage on bottles you bring under €40 retail.
            </p>
          </article>
        </div>
      </section>

      <!-- Press -->
      <section class="press">
        <p class="kicker">In the press</p>
        <div class="press-grid">
          <article class="press-card">
            <p class="press-pub">El País · 2024</p>
            <p class="press-quote">
              "A room where the garden does the talking and the chef
              listens."
            </p>
          </article>
          <article class="press-card">
            <p class="press-pub">Eater Madrid · 2023</p>
            <p class="press-quote">
              "The dry-aged ribeye is worth the trip — the bread is worth the
              wait."
            </p>
          </article>
          <article class="press-card">
            <p class="press-pub">World of Fine Wine · 2024</p>
            <p class="press-quote">
              "One of the best small wine lists on the Peninsula, hands
              down."
            </p>
          </article>
        </div>
      </section>

      <section class="cta-strip">
        <h2>See you Tuesday?</h2>
        <a class="btn-primary" href="#reserve">Reserve a table</a>
      </section>
    </main>

    <footer class="footer">
      <p class="footer-brand">Casa Olivar</p>
      <p class="footer-meta">42 Calle del Olivar · Madrid · +34 910 555 042</p>
      <p class="footer-meta">© 2026 · Crafted with stone and fire</p>
    </footer>

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