Savora — Restaurant Landing

<nav class="sv-nav" data-rv><span class="sv-logo">Savora</span><div class="sv-links d-none d-md-flex"><a href="#menu">Menu</a><a href="#hours">Hours</a><a href="#book">Reserve</a></div></nav>
<header class="sv-hero"><div class="sv-hero-bg" id="svBg"></div><div class="sv-hero-in"><span class="sv-eye" data-rv>· Fine dining · est. 2021 ·</span><h1 data-rv>A taste worth<br>remembering</h1><p data-rv>Seasonal plates, natural wines and slow evenings. A demo restaurant template by <strong>ConvertAtlas</strong>.</p><a href="#book" class="sv-btn" data-rv>Reserve a table</a></div></header>
<section id="menu" class="sv-menu">
  <div class="sv-head" data-rv><span class="sv-kick">/ the menu</span><h2>Crafted with care</h2></div>
  <div class="sv-tabs" id="svTabs" data-rv><button class="active" data-t="0">Starters</button><button data-t="1">Mains</button><button data-t="2">Dessert</button></div>
  <div class="sv-list" id="svList" data-rv></div>
</section>
<section id="hours" class="sv-hours" data-rv>
  <div class="sv-hours-card"><h3>Opening hours</h3>
    <div class="sv-row"><span>Mon — Thu</span><b>17:00 — 23:00</b></div>
    <div class="sv-row"><span>Fri — Sat</span><b>17:00 — 01:00</b></div>
    <div class="sv-row"><span>Sunday</span><b>Closed</b></div>
  </div>
  <div class="sv-hours-note"><h3>Find us</h3><p>14 Tērbatas iela, Riga<br>+371 2000 0000<br>hello@convertatlas.org</p></div>
</section>
<section id="book" class="sv-book" data-rv><h2>Join us this evening</h2><a href="mailto:hello@convertatlas.org" class="sv-btn">Reserve a table</a></section>
<footer class="sv-foot">Savora © 2026 · Template by <a href="https://convertatlas.org">ConvertAtlas</a></footer>

*{box-sizing:border-box}body{margin:0;background:#16100c;color:#f0e6d8;font-family:Georgia,serif;overflow-x:hidden}a{text-decoration:none}
.sv-sans{font-family:system-ui,sans-serif}
.sv-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:20px 34px}
.sv-logo{font-size:1.4rem;letter-spacing:.04em;color:#e9d8b8}
.sv-links{gap:28px;font-family:system-ui}.sv-links a{color:#cbb89a;font-size:.85rem;text-transform:uppercase;letter-spacing:.1em}.sv-links a:hover{color:#b8860b}
.sv-hero{position:relative;height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.sv-hero-bg{position:absolute;inset:-15% 0;background:linear-gradient(rgba(22,16,12,.55),rgba(22,16,12,.85)),linear-gradient(135deg,#3a2a18,#1a120b);background-size:cover;will-change:transform}
.sv-hero-in{position:relative;max-width:640px;padding:0 24px}
.sv-eye{font-family:system-ui;letter-spacing:.2em;font-size:.78rem;color:#b8860b;text-transform:uppercase}
.sv-hero h1{font-size:clamp(2.6rem,8vw,5.2rem);font-weight:400;line-height:1.04;margin:16px 0 18px}
.sv-hero p{font-family:system-ui;color:#cbb89a;font-size:1.05rem;line-height:1.7;max-width:440px;margin:0 auto 28px}
.sv-btn{display:inline-block;font-family:system-ui;border:1px solid #b8860b;color:#e9d8b8;padding:13px 30px;border-radius:2px;letter-spacing:.08em;text-transform:uppercase;font-size:.82rem;transition:.2s}
.sv-btn:hover{background:#b8860b;color:#16100c}
.sv-menu{max-width:760px;margin:0 auto;padding:80px 24px}
.sv-kick{font-family:system-ui;text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;color:#8a7355}
.sv-head{text-align:center;margin-bottom:30px}.sv-head h2{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:400;margin:8px 0 0}
.sv-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:28px}
.sv-tabs button{font-family:system-ui;background:transparent;border:1px solid #3a2e20;color:#cbb89a;padding:9px 22px;border-radius:2px;cursor:pointer;letter-spacing:.06em;font-size:.82rem;text-transform:uppercase;transition:.2s}
.sv-tabs button.active{background:#b8860b;color:#16100c;border-color:#b8860b}
.sv-item{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-bottom:1px dotted #3a2e20;gap:14px}
.sv-item h4{margin:0;font-weight:400;font-size:1.2rem}
.sv-item p{font-family:system-ui;color:#998363;font-size:.85rem;margin:4px 0 0}
.sv-item b{color:#b8860b;font-size:1.1rem;white-space:nowrap}
.sv-hours{max-width:820px;margin:0 auto;padding:40px 24px 70px;display:grid;grid-template-columns:1.2fr 1fr;gap:24px}
.sv-hours-card,.sv-hours-note{border:1px solid #3a2e20;border-radius:4px;padding:28px}
.sv-hours h3{font-weight:400;font-size:1.4rem;margin:0 0 18px;color:#e9d8b8}
.sv-row{display:flex;justify-content:space-between;font-family:system-ui;padding:9px 0;border-bottom:1px dotted #3a2e20;font-size:.92rem}.sv-row span{color:#998363}
.sv-hours-note p{font-family:system-ui;color:#cbb89a;line-height:1.9}
.sv-book{text-align:center;padding:80px 24px}.sv-book h2{font-size:clamp(2rem,5vw,3rem);font-weight:400;margin:0 0 24px}
.sv-foot{font-family:system-ui;text-align:center;padding:28px;color:#7a684f;font-size:.82rem;border-top:1px solid #2a2015}.sv-foot a{color:#b8860b}
@media(max-width:680px){.sv-hours{grid-template-columns:1fr}.sv-links{display:none}}
[data-rv]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}[data-rv].in{opacity:1;transform:none}

var menu=[[['Burrata & heirloom tomato','San Marzano, basil oil','€14'],['Tuna tartare','Citrus, avocado, sesame','€16'],['Wild mushroom soup','Truffle cream','€11']],[['Dry-aged ribeye','Bone marrow, jus','€34'],['Seared sea bass','Fennel, saffron broth','€28'],['Wild mushroom risotto','Aged parmesan','€22']],[['Dark chocolate fondant','Salted caramel','€10'],['Vanilla crème brûlée','Seasonal berries','€9'],['Affogato','Espresso, gelato','€7']]];
var list=document.getElementById('svList');
function render(i){list.innerHTML=menu[i].map(function(m){return '<div class="sv-item"><div><h4>'+m[0]+'</h4><p>'+m[1]+'</p></div><b>'+m[2]+'</b></div>'}).join('')}
document.querySelectorAll('#svTabs button').forEach(function(b){b.addEventListener('click',function(){document.querySelectorAll('#svTabs button').forEach(function(x){x.classList.remove('active')});b.classList.add('active');render(+b.dataset.t)})});
render(0);
var bg=document.getElementById('svBg');window.addEventListener('scroll',function(){bg.style.transform='translateY('+(window.scrollY*.4)+'px)'});
var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}})},{threshold:.12});
document.querySelectorAll('[data-rv]').forEach(function(el,i){el.style.transitionDelay=(i%3*70)+'ms';io.observe(el)});