439 lines
25 KiB
HTML
439 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Kaito Sushi — Omakase & Izakaya</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;600;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Playfair+Display:ital,wght@1,400&display=swap" rel="stylesheet">
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
:root {
|
||
--ink: #0a0a0a;
|
||
--paper: #f5f0e8;
|
||
--wood: #8b6b4a;
|
||
--wood-dark: #5c3d2e;
|
||
--cream: #faf8f4;
|
||
--text: #1a1a1a;
|
||
--muted: #7a6a5a;
|
||
--gold: #c9a055;
|
||
--red: #b83b3b;
|
||
}
|
||
html { scroll-behavior: smooth; }
|
||
body { font-family: 'Noto Sans JP', sans-serif; background: var(--ink); color: var(--cream); line-height: 1.7; overflow-x: hidden; }
|
||
|
||
/* SLIDE-UP REVEAL */
|
||
.reveal { opacity: 0; transform: translateY(40px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
|
||
.reveal.visible { opacity: 1; transform: translateY(0); }
|
||
|
||
/* NAV */
|
||
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1.5rem 3rem; display: flex; justify-content: space-between; align-items: center; transition: background 0.4s; }
|
||
nav.scrolled { background: rgba(10,10,10,0.92); backdrop-filter: blur(12px); }
|
||
.nav-logo { font-family: 'Noto Serif JP', serif; font-size: 1.3rem; color: var(--cream); font-weight: 300; letter-spacing: 0.2em; text-decoration: none; }
|
||
.nav-links { display: flex; gap: 2.5rem; list-style: none; }
|
||
.nav-links a { color: rgba(250,248,244,0.5); text-decoration: none; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; transition: color 0.3s; }
|
||
.nav-links a:hover { color: var(--cream); }
|
||
.nav-cta { border: 1px solid rgba(201,160,85,0.5); color: var(--gold); padding: 0.4rem 1.2rem; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; transition: all 0.3s; }
|
||
.nav-cta:hover { background: var(--gold); color: var(--ink); }
|
||
|
||
/* HERO — Full screen, centered, very minimal */
|
||
.hero { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; }
|
||
.hero-bg { position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1553621042-f6e147245754?w=1600&q=80') center/cover no-repeat; filter: brightness(0.35) saturate(0.6); }
|
||
.hero-rule { width: 1px; height: 60px; background: var(--gold); margin: 0 auto 2rem; opacity: 0; animation: fadeIn 1s 0.3s forwards; }
|
||
.hero-eyebrow { font-size: 0.65rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 1s 0.4s forwards; }
|
||
.hero h1 { font-family: 'Noto Serif JP', serif; font-size: clamp(3rem, 8vw, 7rem); font-weight: 300; color: var(--cream); letter-spacing: 0.3em; line-height: 1.1; margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 1s 0.6s forwards; }
|
||
.hero-sub { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(0.9rem, 2vw, 1.2rem); color: rgba(250,248,244,0.5); letter-spacing: 0.2em; margin-bottom: 2.5rem; opacity: 0; animation: fadeUp 1s 0.8s forwards; }
|
||
.hero-btns { display: flex; gap: 1.2rem; justify-content: center; opacity: 0; animation: fadeUp 1s 1s forwards; }
|
||
.btn-primary { background: var(--gold); color: var(--ink); padding: 0.8rem 2.5rem; text-decoration: none; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; transition: all 0.3s; }
|
||
.btn-primary:hover { background: var(--cream); }
|
||
.btn-ghost { border: 1px solid rgba(250,248,244,0.25); color: var(--cream); padding: 0.8rem 2.5rem; text-decoration: none; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; transition: all 0.3s; }
|
||
.btn-ghost:hover { border-color: var(--cream); }
|
||
|
||
/* KANJI DECORATION */
|
||
.kanji-strip { background: var(--wood-dark); padding: 1.2rem; text-align: center; }
|
||
.kanji-strip span { font-family: 'Noto Serif JP', serif; font-size: 1.2rem; color: rgba(250,248,244,0.4); letter-spacing: 0.5em; margin: 0 1rem; }
|
||
|
||
/* NARRATIVE / ABOUT — very editorial */
|
||
.editorial { padding: 8rem 3rem; max-width: 860px; margin: 0 auto; }
|
||
.editorial-eyebrow { font-size: 0.65rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; }
|
||
.editorial h2 { font-family: 'Noto Serif JP', serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 300; color: var(--cream); line-height: 1.3; margin-bottom: 2rem; }
|
||
.editorial p { color: rgba(250,248,244,0.6); font-size: 0.95rem; line-height: 2; margin-bottom: 1.5rem; font-weight: 300; }
|
||
.editorial p:last-child { margin-bottom: 0; }
|
||
|
||
/* HORIZONTAL MENU — full width horizontal scrolling panels */
|
||
.menu-scroll { background: var(--paper); color: var(--text); overflow-x: auto; }
|
||
.menu-scroll-inner { display: flex; min-width: max-content; }
|
||
.menu-panel { min-width: 320px; max-width: 360px; padding: 3rem 2.5rem; border-right: 1px solid rgba(0,0,0,0.08); flex-shrink: 0; }
|
||
.menu-panel:last-child { border-right: none; }
|
||
.menu-panel-tag { font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--wood); margin-bottom: 1.5rem; }
|
||
.menu-panel-title { font-family: 'Noto Serif JP', serif; font-size: 1.8rem; font-weight: 400; color: var(--text); margin-bottom: 0.3rem; }
|
||
.menu-panel-sub { font-size: 0.75rem; color: var(--muted); margin-bottom: 2rem; font-style: italic; }
|
||
.menu-dish { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
|
||
.menu-dish:last-child { border-bottom: none; }
|
||
.menu-dish-name { font-size: 0.9rem; color: var(--text); }
|
||
.menu-dish-desc { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }
|
||
.menu-dish-price { font-size: 0.9rem; color: var(--wood); font-weight: 600; white-space: nowrap; }
|
||
|
||
/* OMAKASE FEATURE — asymmetric layout */
|
||
.omakase { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; }
|
||
.omakase-img { background: url('https://images.unsplash.com/photo-1617196034796-73dfa7b1fd56?w=900&q=80') center/cover no-repeat; min-height: 400px; }
|
||
.omakase-text { background: var(--wood-dark); padding: 4rem 3.5rem; display: flex; flex-direction: column; justify-content: center; }
|
||
.omakase-tag { font-size: 0.6rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; }
|
||
.omakase-title { font-family: 'Noto Serif JP', serif; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 300; color: var(--cream); margin-bottom: 1.5rem; line-height: 1.4; }
|
||
.omakase-desc { color: rgba(250,248,244,0.6); font-size: 0.9rem; line-height: 1.9; margin-bottom: 2rem; font-weight: 300; }
|
||
.omakase-price { font-size: 0.8rem; color: var(--gold); letter-spacing: 0.1em; margin-bottom: 0.3rem; }
|
||
.omakase-amount { font-family: 'Noto Serif JP', serif; font-size: 2.5rem; color: var(--cream); font-weight: 300; margin-bottom: 2rem; }
|
||
.omakase-link { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(201,160,85,0.3); padding-bottom: 0.2rem; transition: border-color 0.3s; }
|
||
.omakase-link:hover { border-color: var(--gold); }
|
||
|
||
/* IZAKAYA / DRINKS — dark section */
|
||
.izakaya { background: var(--ink); padding: 6rem 3rem; }
|
||
.izakaya-inner { max-width: 1100px; margin: 0 auto; }
|
||
.izakaya-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; flex-wrap: wrap; gap: 1rem; }
|
||
.izakaya-title { font-family: 'Noto Serif JP', serif; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 300; color: var(--cream); }
|
||
.izakaya-title span { display: block; font-size: 0.6rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; font-family: 'Noto Sans JP', sans-serif; }
|
||
.drinks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
|
||
.drink-item { border: 1px solid rgba(201,160,85,0.1); padding: 1.5rem; border-radius: 2px; }
|
||
.drink-item .drink-name { font-family: 'Noto Serif JP', serif; font-size: 1rem; color: var(--cream); margin-bottom: 0.2rem; }
|
||
.drink-item .drink-style { font-size: 0.72rem; color: var(--muted); margin-bottom: 0.5rem; }
|
||
.drink-item .drink-price { font-size: 0.85rem; color: var(--gold); }
|
||
|
||
/* REVIEWS — 3 columns, minimal */
|
||
.reviews-section { background: var(--paper); padding: 6rem 3rem; }
|
||
.reviews-inner { max-width: 1100px; margin: 0 auto; }
|
||
.reviews-header { text-align: center; margin-bottom: 3rem; }
|
||
.reviews-header h2 { font-family: 'Noto Serif JP', serif; font-size: 2rem; font-weight: 300; color: var(--text); margin-bottom: 0.5rem; }
|
||
.reviews-header p { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
|
||
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(0,0,0,0.08); }
|
||
.review-item { background: var(--paper); padding: 2.5rem 2rem; }
|
||
.review-stars { color: var(--gold); font-size: 0.8rem; letter-spacing: 0.1em; margin-bottom: 1rem; }
|
||
.review-text { font-family: 'Playfair Display', serif; font-style: italic; font-size: 0.95rem; color: var(--muted); line-height: 1.8; margin-bottom: 1.2rem; }
|
||
.review-author { font-size: 0.75rem; color: var(--text); font-weight: 500; letter-spacing: 0.05em; }
|
||
|
||
/* LOCATION — very minimal, 2 columns */
|
||
.location { background: var(--ink); padding: 6rem 3rem; border-top: 1px solid rgba(201,160,85,0.08); }
|
||
.location-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
|
||
.location-block h3 { font-family: 'Noto Serif JP', serif; font-size: 1.3rem; font-weight: 300; color: var(--cream); margin-bottom: 1.5rem; }
|
||
.hours-row { display: flex; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.85rem; }
|
||
.hours-row span:first-child { color: rgba(250,248,244,0.4); }
|
||
.hours-row span:last-child { color: var(--cream); }
|
||
.contact-line { font-size: 0.85rem; color: rgba(250,248,244,0.4); margin-bottom: 0.5rem; }
|
||
.contact-line a { color: var(--gold); text-decoration: none; }
|
||
.map-placeholder { border: 1px solid rgba(201,160,85,0.15); overflow: hidden; border-radius: 2px; }
|
||
.map-placeholder iframe { width: 100%; height: 100%; min-height: 300px; border: none; display: block; filter: brightness(0.8) saturate(0.5); }
|
||
|
||
/* FOOTER */
|
||
footer { background: #050505; padding: 3rem; text-align: center; border-top: 1px solid rgba(201,160,85,0.08); }
|
||
.footer-logo { font-family: 'Noto Serif JP', serif; font-size: 1.5rem; color: var(--cream); font-weight: 300; letter-spacing: 0.4em; margin-bottom: 1rem; }
|
||
footer p { font-size: 0.72rem; color: rgba(250,248,244,0.25); letter-spacing: 0.1em; }
|
||
|
||
/* ANIMATIONS */
|
||
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
|
||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||
|
||
/* RESPONSIVE */
|
||
@media (max-width: 768px) {
|
||
nav { padding: 1rem 1.5rem; }
|
||
.nav-links { display: none; }
|
||
.hero h1 { letter-spacing: 0.15em; }
|
||
.omakase { grid-template-columns: 1fr; }
|
||
.reviews-grid { grid-template-columns: 1fr; }
|
||
.location-inner { grid-template-columns: 1fr; }
|
||
.editorial { padding: 5rem 1.5rem; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<nav id="navbar">
|
||
<a href="#" class="nav-logo">KAITO</a>
|
||
<ul class="nav-links">
|
||
<li><a href="#about">About</a></li>
|
||
<li><a href="#menu">Menu</a></li>
|
||
<li><a href="#omakase">Omakase</a></li>
|
||
<li><a href="#drinks">Izakaya</a></li>
|
||
<li><a href="#location" class="nav-cta">Reserve</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<!-- HERO -->
|
||
<section class="hero">
|
||
<div class="hero-bg"></div>
|
||
<div class="hero-rule"></div>
|
||
<p class="hero-eyebrow">Omakase · Izakaya · Benalmádena Costa</p>
|
||
<h1>KAITO</h1>
|
||
<p class="hero-sub">Sushi & Japanese Kitchen</p>
|
||
<div class="hero-btns">
|
||
<a href="#menu" class="btn-primary">View Menu</a>
|
||
<a href="#omakase" class="btn-ghost">Omakase Experience</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- KANJI STRIP -->
|
||
<div class="kanji-strip">
|
||
<span>壽司</span>
|
||
<span>職人の技</span>
|
||
<span>巻物</span>
|
||
<span>味</span>
|
||
</div>
|
||
|
||
<!-- ABOUT -->
|
||
<section class="editorial" id="about">
|
||
<p class="editorial-eyebrow reveal">Our Philosophy</p>
|
||
<h2 class="reveal">Every piece tells a story of the sea</h2>
|
||
<p class="reveal">Kaito opened in 2018 with a single mission: to bring the discipline and beauty of Japanese sushi craft to the Costa del Sol. Our head chef, Kenji Tanaka, trained for 12 years in Tokyo's Ginza district before bringing his knife and his philosophy to Spain.</p>
|
||
<p class="reveal">We buy from the same suppliers as the best sushi bars in Barcelona — bluefin tuna from the Strait of Gibraltar, wild salmon from Norway, otoro from Tsukiji's successor markets. Every morning our fish arrives in ice, every evening it becomes art on your plate.</p>
|
||
<p class="reveal">Omakase means "I leave it up to you." When you sit at our counter, you surrender to the chef's judgement. This is the highest form of sushi dining — trust, technique, and a meal that changes with the seasons.</p>
|
||
</section>
|
||
|
||
<!-- HORIZONTAL SCROLLING MENU -->
|
||
<section class="menu-scroll" id="menu">
|
||
<div class="menu-scroll-inner">
|
||
<div class="menu-panel">
|
||
<p class="menu-panel-tag">前菜 / Starters</p>
|
||
<h3 class="menu-panel-title">Starters</h3>
|
||
<p class="menu-panel-sub">Small dishes, big flavour</p>
|
||
<div class="menu-dish">
|
||
<div><div class="menu-dish-name">Edamame</div><div class="menu-dish-desc">Sea salt, yuzu chili</div></div>
|
||
<div class="menu-dish-price">€5</div>
|
||
</div>
|
||
<div class="menu-dish">
|
||
<div><div class="menu-dish-name">Miso Soup</div><div class="menu-dish-desc">Dashi, silken tofu, wakame</div></div>
|
||
<div class="menu-dish-price">€4</div>
|
||
</div>
|
||
<div class="menu-dish">
|
||
<div><div class="menu-dish-name">Gyoza (6pc)</div><div class="menu-dish-desc">Pork & chive, ponzu dip</div></div>
|
||
<div class="menu-dish-price">€8</div>
|
||
</div>
|
||
<div class="menu-dish">
|
||
<div><div class="menu-dish-name">Tako Wasabi</div><div class="menu-dish-desc">Octopus, wasabi mayo, tobiko</div></div>
|
||
<div class="menu-dish-price">€12</div>
|
||
</div>
|
||
<div class="menu-dish">
|
||
<div><div class="menu-dish-name"> Agedashi Tofu</div><div class="menu-dish-desc">Fried tofu, dashi broth, katsuobushi</div></div>
|
||
<div class="menu-dish-price">€7</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="menu-panel">
|
||
<p class="menu-panel-tag">握り / Nigiri</p>
|
||
<h3 class="menu-panel-title">Nigiri</h3>
|
||
<p class="menu-panel-sub">Two pieces per order</p>
|
||
<div class="menu-dish">
|
||
<div><div class="menu-dish-name">Salmon</div><div class="menu-dish-desc">Wild Norwegian, sea salt</div></div>
|
||
<div class="menu-dish-price">€7</div>
|
||
</div>
|
||
<div class="menu-dish">
|
||
<div><div class="menu-dish-name">Bluefin Tuna</div><div class="menu-dish-desc">Gibraltar Strait, wasabi</div></div>
|
||
<div class="menu-dish-price">€9</div>
|
||
</div>
|
||
<div class="menu-dish">
|
||
<div><div class="menu-dish-name">Otoro</div><div class="menu-dish-desc">Fatty tuna belly, pickled ginger</div></div>
|
||
<div class="menu-dish-price">€14</div>
|
||
</div>
|
||
<div class="menu-dish">
|
||
<div><div class="menu-dish-name">Sea Bass</div><div class="menu-dish-desc">Yellowtail, ponzu, chive</div></div>
|
||
<div class="menu-dish-price">€8</div>
|
||
</div>
|
||
<div class="menu-dish">
|
||
<div><div class="menu-dish-name">Ebi</div><div class="menu-dish-desc">Tiger prawn, yuzu mayo</div></div>
|
||
<div class="menu-dish-price">€7</div>
|
||
</div>
|
||
<div class="menu-dish">
|
||
<div><div class="menu-dish-name">Ikura</div><div class="menu-dish-desc">Salmon roe, shiso, nori</div></div>
|
||
<div class="menu-dish-price">€12</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="menu-panel">
|
||
<p class="menu-panel-tag">巻き物 / Rolls</p>
|
||
<h3 class="menu-panel-title">Rolls</h3>
|
||
<p class="menu-panel-sub">8 pieces per roll</p>
|
||
<div class="menu-dish">
|
||
<div><div class="menu-dish-name">Rainbow Roll</div><div class="menu-dish-desc">Salmon, tuna, avocado, cucumber</div></div>
|
||
<div class="menu-dish-price">€16</div>
|
||
</div>
|
||
<div class="menu-dish">
|
||
<div><div class="menu-dish-name">Dragon Roll</div><div class="menu-dish-desc">Eel, cucumber, avocado, unagi sauce</div></div>
|
||
<div class="menu-dish-price">€17</div>
|
||
</div>
|
||
<div class="menu-dish">
|
||
<div><div class="menu-dish-name">Spicy Tuna</div><div class="menu-dish-desc">Tuna, sriracha mayo, cucumber, crispy shallot</div></div>
|
||
<div class="menu-dish-price">€14</div>
|
||
</div>
|
||
<div class="menu-dish">
|
||
<div><div class="menu-dish-name">California Roll</div><div class="menu-dish-desc">Crab stick, avocado, cucumber, tobiko</div></div>
|
||
<div class="menu-dish-price">€12</div>
|
||
</div>
|
||
<div class="menu-dish">
|
||
<div><div class="menu-dish-name">Vegetable Roll</div><div class="menu-dish-desc">Avocado, cucumber, carrot, asparagus</div></div>
|
||
<div class="menu-dish-price">€9</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="menu-panel">
|
||
<p class="menu-panel-tag">メイン / Mains</p>
|
||
<h3 class="menu-panel-title">Mains</h3>
|
||
<p class="menu-panel-sub">Rice bowls & cooked dishes</p>
|
||
<div class="menu-dish">
|
||
<div><div class="menu-dish-name">Salmon Teriyaki</div><div class="menu-dish-desc">Grilled salmon, teriyaki, steamed rice, salad</div></div>
|
||
<div class="menu-dish-price">€18</div>
|
||
</div>
|
||
<div class="menu-dish">
|
||
<div><div class="menu-dish-name">Chicken Katsu</div><div class="menu-dish-desc">Breaded chicken, katsu curry, jasmine rice</div></div>
|
||
<div class="menu-dish-price">€16</div>
|
||
</div>
|
||
<div class="menu-dish">
|
||
<div><div class="menu-dish-name">Tonkotsu Ramen</div><div class="menu-dish-desc">12-hour broth, chashu pork, soft egg, nori, noodles</div></div>
|
||
<div class="menu-dish-price">€17</div>
|
||
</div>
|
||
<div class="menu-dish">
|
||
<div><div class="menu-dish-name">Vegetable Tempura</div><div class="menu-dish-desc">Seasonal vegetables, light batter, tentsuyu dip</div></div>
|
||
<div class="menu-dish-price">€14</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- OMAKASE FEATURE -->
|
||
<section class="omakase" id="omakase">
|
||
<div class="omakase-img reveal"></div>
|
||
<div class="omakase-text reveal">
|
||
<p class="omakase-tag">体験 / Omakase Experience</p>
|
||
<h3 class="omakase-title">Let the chef decide your meal</h3>
|
||
<p class="omakase-desc">Sit at the counter. Watch the knife. Surrender to the seasons. Our omakase menu changes every week — whatever is freshest, most seasonal, most exceptional. Typically 12–15 courses over 90 minutes.</p>
|
||
<p class="omakase-desc">The chef will guide you through each piece — its origin, its character, why it was chosen today. This is sushi as meditation.</p>
|
||
<p class="omakase-price">FROM</p>
|
||
<p class="omakase-amount">€65 per person</p>
|
||
<a href="#location" class="omakase-link">Reserve your omakase seat →</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- IZAKAYA / DRINKS -->
|
||
<section class="izakaya" id="drinks">
|
||
<div class="izakaya-inner">
|
||
<div class="izakaya-header">
|
||
<div>
|
||
<p style="font-size:0.6rem;letter-spacing:0.4em;text-transform:uppercase;color:var(--gold);margin-bottom:0.5rem;">居酒屋 / Drinks</p>
|
||
<h2 class="izakaya-title">Izakaya</h2>
|
||
</div>
|
||
</div>
|
||
<div class="drinks-grid">
|
||
<div class="drink-item">
|
||
<div class="drink-name">Sake Toko</div>
|
||
<div class="drink-style">Junmai, chilled, 300ml</div>
|
||
<div class="drink-price">from €18</div>
|
||
</div>
|
||
<div class="drink-item">
|
||
<div class="drink-name">Sake Daiginjo</div>
|
||
<div class="drink-style">Premium, floral notes</div>
|
||
<div class="drink-price">from €28</div>
|
||
</div>
|
||
<div class="drink-item">
|
||
<div class="drink-name">Asahi Draft</div>
|
||
<div class="drink-style">Japanese lager, 330ml</div>
|
||
<div class="drink-price">€4.50</div>
|
||
</div>
|
||
<div class="drink-item">
|
||
<div class="drink-name">Sapporo</div>
|
||
<div class="drink-style">Japanese lager, 330ml</div>
|
||
<div class="drink-price">€4.50</div>
|
||
</div>
|
||
<div class="drink-item">
|
||
<div class="drink-name"> plum wine</div>
|
||
<div class="drink-style">Umeshu, on the rocks</div>
|
||
<div class="drink-price">€7</div>
|
||
</div>
|
||
<div class="drink-item">
|
||
<div class="drink-name">Yuzu Highball</div>
|
||
<div class="drink-style">Whiskey, yuzu, soda</div>
|
||
<div class="drink-price">€9</div>
|
||
</div>
|
||
<div class="drink-item">
|
||
<div class="drink-name">Japanese Whisky</div>
|
||
<div class="drink-style">Suntory Toki, on the rocks</div>
|
||
<div class="drink-price">€10</div>
|
||
</div>
|
||
<div class="drink-item">
|
||
<div class="drink-name">Green Tea</div>
|
||
<div class="drink-style">Matcha hot, house blend</div>
|
||
<div class="drink-price">€4</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- REVIEWS -->
|
||
<section class="reviews-section" id="reviews">
|
||
<div class="reviews-inner">
|
||
<div class="reviews-header">
|
||
<h2 class="reveal">What guests say</h2>
|
||
<p class="reveal">★★★★★ Google · TripAdvisor · TheFork</p>
|
||
</div>
|
||
<div class="reviews-grid">
|
||
<div class="review-item reveal">
|
||
<div class="review-stars">★★★★★</div>
|
||
<p class="review-text">"The omakase experience was the best meal of my life. Chef Kenji's knife work is mesmerising. The otoro melted on my tongue. An absolute must in Benalmádena."</p>
|
||
<div class="review-author">— Marco T., Google</div>
|
||
</div>
|
||
<div class="review-item reveal">
|
||
<div class="review-stars">★★★★★</div>
|
||
<p class="review-text">"We did the omakase for our anniversary. The chef explained every piece. The attention to detail, the seasonality, the presentation — this is Michelin-starred quality without the pretension."</p>
|
||
<div class="review-author">— Laura & David, TripAdvisor</div>
|
||
</div>
|
||
<div class="review-item reveal">
|
||
<div class="review-stars">★★★★★</div>
|
||
<p class="review-text">"As someone who has eaten sushi in Tokyo, this is the real thing. The fish quality is exceptional, the rice has perfect seasoning, and the sake list is impressive. Kaito is exceptional."</p>
|
||
<div class="review-author">— Yuki N., TheFork</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- LOCATION -->
|
||
<section class="location" id="location">
|
||
<div class="location-inner">
|
||
<div class="location-block reveal">
|
||
<h3>Visit Us</h3>
|
||
<div class="hours-row"><span>Monday</span><span>Closed</span></div>
|
||
<div class="hours-row"><span>Tuesday — Thursday</span><span>18:00 — 23:00</span></div>
|
||
<div class="hours-row"><span>Friday — Saturday</span><span>18:00 — 00:00</span></div>
|
||
<div class="hours-row"><span>Sunday</span><span>13:00 — 22:00</span></div>
|
||
<div style="margin-top:2rem;">
|
||
<p class="contact-line">📍 Av. Antonio Machado, 128<br>29630 Benalmádena Costa, Spain</p>
|
||
<p class="contact-line" style="margin-top:0.8rem;">📞 <a href="tel:+34952572001">+34 952 572 001</a></p>
|
||
<p class="contact-line">✉️ <a href="mailto:info@kaitosushi.es">info@kaitosushi.es</a></p>
|
||
</div>
|
||
</div>
|
||
<div class="map-placeholder reveal">
|
||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3190.0!2d-4.57!3d36.60!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1=s0xd72fd3a050f50eb%3A0x5233479452a1f903!2sCasa%20Alberto!5e0!3m2!1sen!2ses!4v1" allowfullscreen="" loading="lazy"></iframe>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<p class="footer-logo">KAITO</p>
|
||
<p>Av. Antonio Machado, 128 · 29630 Benalmádena Costa · +34 952 572 001</p>
|
||
<p style="margin-top:0.5rem;opacity:0.3;">© 2026 Kaito Sushi. All rights reserved.</p>
|
||
</footer>
|
||
|
||
<script>
|
||
const nav = document.getElementById('navbar');
|
||
window.addEventListener('scroll', () => nav.classList.toggle('scrolled', window.scrollY > 60));
|
||
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
||
a.addEventListener('click', e => { e.preventDefault();
|
||
const t = document.querySelector(a.getAttribute('href'));
|
||
if(t) t.scrollIntoView({behavior:'smooth',block:'start'});
|
||
});
|
||
});
|
||
const revealEls = document.querySelectorAll('.reveal');
|
||
const observer = new IntersectionObserver(entries => {
|
||
entries.forEach(entry => {
|
||
if(entry.isIntersecting){ entry.target.classList.add('visible'); observer.unobserve(entry.target); }
|
||
});
|
||
}, {threshold: 0.1});
|
||
revealEls.forEach(el => observer.observe(el));
|
||
</script>
|
||
</body>
|
||
</html>
|