`public/versions/hermes.html`

146 lines
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>FantaSea Yachts — Hermès Concept</title>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Jost:wght@300;400;500&family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet">
<style>
:root{--bg:#141210;--panel:#1c1813;--ink:#f6ead9;--gold:#e8611f;--line:rgba(232,97,31,.30)}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:'Jost', system-ui, sans-serif;font-weight:400;font-size:18px;letter-spacing:.012em;line-height:1.75;-webkit-font-smoothing:antialiased}
.disp{font-family:'Cormorant Garamond', Georgia, serif}
a{color:inherit;text-decoration:none}
/* top bar */
.bar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:22px 40px;mix-blend-mode:difference}
.brand{font-family:'Cormorant Garamond', Georgia, serif;font-size:22px;letter-spacing:.34em;text-transform:uppercase}
.burger{width:34px;height:22px;position:relative;cursor:pointer;background:none;border:0}
.burger span{position:absolute;left:0;right:0;height:1.4px;background:var(--ink);transition:.35s}
.burger span:nth-child(1){top:2px}.burger span:nth-child(2){top:10px}.burger span:nth-child(3){top:18px}
body.nav .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.nav .burger span:nth-child(2){opacity:0}
body.nav .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* full-screen elegant menu */
.menu{position:fixed;inset:0;z-index:39;background:var(--bg);opacity:0;pointer-events:none;transition:.5s;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}
body.nav .menu{opacity:1;pointer-events:auto}
.menu a{font-family:'Cormorant Garamond', Georgia, serif;font-size:clamp(30px,6vw,64px);letter-spacing:.04em;padding:6px 0;position:relative;opacity:.82;transition:.3s}
.menu a:hover{opacity:1;color:var(--gold)}
.menu .sub{margin-top:34px;font-family:'Jost', system-ui, sans-serif;font-size:12px;letter-spacing:.3em;text-transform:uppercase;opacity:.5}
.menu .houses{margin-top:12px;display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-family:'Jost', system-ui, sans-serif!important;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.menu .houses a{font-size:12px!important;font-family:'Jost', system-ui, sans-serif!important;opacity:.55}
.menu .cinfo{margin-top:28px;font-family:'Jost', system-ui, sans-serif;font-size:12px;letter-spacing:.05em;line-height:1.95;opacity:.6;text-align:center;text-transform:none}
.menu .cinfo a{font-size:12px!important;font-family:'Jost', system-ui, sans-serif!important;color:var(--gold);opacity:.9}
/* hero */
.hero{height:100vh;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .ytbg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#141210}
.hero .ytbg iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;transform:translate(-50%,-50%);border:0;pointer-events:none}
.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.15) 40%,var(--bg));z-index:1}
.hero .in{position:relative;z-index:2;padding:0 24px}
.kicker{font-size:12px;letter-spacing:.42em;text-transform:uppercase;opacity:.85;margin-bottom:22px}
.hero h1{font-family:'Cormorant Garamond', Georgia, serif;font-weight:400;font-size:clamp(46px,9vw,120px);line-height:.98;letter-spacing:.01em}
.hero .tag{font-family:'Cormorant Garamond', Georgia, serif;font-style:italic;font-size:clamp(18px,2.4vw,26px);opacity:.9;margin-top:20px}
.cta{display:inline-block;margin-top:40px;padding:15px 40px;border:1px solid var(--gold);color:var(--ink);font-family:'Jost', system-ui, sans-serif;font-size:12px;letter-spacing:.28em;text-transform:uppercase;transition:.35s}
.cta:hover{background:var(--gold);color:var(--bg)}
/* sections */
section{padding:clamp(70px,11vw,150px) clamp(24px,7vw,120px);border-top:1px solid var(--line)}
.eyebrow{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
h2{font-family:'Cormorant Garamond', Georgia, serif;font-weight:400;font-size:clamp(32px,5vw,60px);line-height:1.05;letter-spacing:.01em;max-width:15ch}
.lead{max-width:62ch;opacity:.82;margin-top:26px;font-size:20px;line-height:1.7}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);margin-top:60px}
.card{background:var(--bg);padding:44px 34px}
.card .n{font-family:'Cormorant Garamond', Georgia, serif;font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.card h3{font-family:'Cormorant Garamond', Georgia, serif;font-weight:400;font-size:26px;margin:16px 0 12px}
.card p{opacity:.72;font-size:15px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-top:60px}
.split>div{background:var(--bg);padding:56px 44px}
.stat{font-family:'Cormorant Garamond', Georgia, serif;font-size:clamp(40px,6vw,72px);color:var(--gold);line-height:1}
.stat+small{display:block;margin-top:10px;letter-spacing:.24em;text-transform:uppercase;font-size:11px;opacity:.6}
.contact{display:flex;flex-wrap:wrap;gap:60px;margin-top:48px;font-size:15px}
.contact b{display:block;font-family:'Cormorant Garamond', Georgia, serif;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;font-weight:400}
footer{padding:70px clamp(24px,7vw,120px);border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.badge{position:fixed;left:20px;bottom:18px;z-index:50;font-family:'Jost', system-ui, sans-serif;font-size:10px;letter-spacing:.24em;text-transform:uppercase;background:var(--gold);color:var(--bg);padding:7px 14px;border-radius:2px}
@media(max-width:720px){.split,.split>div{grid-template-columns:1fr}.bar{padding:18px 22px}}
</style></head>
<body>
<a class="badge" href="/#suggested">◀ Concept · Hermès palette</a>
<header class="bar">
  <a class="brand" href="#">FantaSea</a>
  <button class="burger" onclick="document.body.classList.toggle('nav')" aria-label="Menu"><span></span><span></span><span></span></button>
</header>
<nav class="menu" onclick="if(event.target.tagName==='A')document.body.classList.remove('nav')">
  <a href="#fleet">The Fleet</a>
  <a href="#weddings">Weddings</a>
  <a href="#corporate">Corporate</a>
  <a href="#dining">Sunset Dining</a>
  <a href="#story">Our Story</a>
  <a href="#contact">Charter Now</a>
  <div class="sub">Palette study — Hermès</div>
  <div class="houses"><a href="/versions/gucci.html">Gucci</a><a href="/versions/chanel.html">Chanel</a><a href="/versions/tiffany.html">Tiffany & Co.</a><a href="/versions/lv.html">Louis Vuitton</a><a href="/versions/dior.html">Dior</a></div>
  <div class="cinfo">4215 Admiralty Way, Marina del Rey, CA 90292<br><a href="tel:+13108272220">(310) 827-2220</a> · Family-owned since 1980<br>12–250 guests · Events from $6,000</div>
</nav>

<div class="hero">
  <div class="ytbg"><iframe src="https://www.youtube.com/embed/C8QAvZJKhQ0?autoplay=1&mute=1&loop=1&playlist=C8QAvZJKhQ0&controls=0&showinfo=0&modestbranding=1&rel=0&playsinline=1&disablekb=1&fs=0" allow="autoplay; encrypted-media" title="FantaSea One aerial film" frameborder="0"></iframe></div>
  <div class="in">
    <div class="kicker">Marina del Rey · Est. 1980</div>
    <h1 class="disp">FantaSea</h1>
    <div class="tag">Craft, carried across the water.</div>
    <a class="cta" href="#contact">Begin your charter</a>
  </div>
</div>

<section id="fleet">
  <div class="eyebrow">The Fleet</div>
  <h2 class="disp">Three yachts. One unrepeatable evening on the water.</h2>
  <p class="lead">A private fleet accommodating 12–250 guests, from intimate proposals to 250-guest galas — impeccably crewed, chef-driven, and yours alone for the night.</p>
  <div class="grid3">
    <div class="card"><div class="n">I</div><h3 class="disp">The Grand</h3><p>Up to 250 guests. Ballroom weddings and corporate galas beneath the open sky.</p></div>
    <div class="card"><div class="n">II</div><h3 class="disp">The Intimate</h3><p>40–90 guests. Rehearsal dinners, milestone celebrations, sunset receptions.</p></div>
    <div class="card"><div class="n">III</div><h3 class="disp">The Private</h3><p>12–24 guests. Proposals, anniversaries, quiet luxury on the bay.</p></div>
  </div>
</section>

<section id="weddings">
  <div class="eyebrow">Weddings</div>
  <h2 class="disp">Say “I do” where the water meets the light.</h2>
  <div class="split">
    <div><p class="lead" style="margin-top:0">Ceremony, cocktails and dinner-dancing aboard — one seamless evening, one dedicated coordinator, zero logistics for you. Preferred florists, chefs and photographers on call.</p></div>
    <div><div class="stat">10,000+</div><small>Celebrations hosted since 1980</small><div class="stat" style="margin-top:34px">4.75★</div><small>Across 300+ reviews</small></div>
  </div>
</section>

<section id="corporate">
  <div class="eyebrow">Corporate</div>
  <h2 class="disp">Board dinners, product launches, holiday galas — offshore.</h2>
  <p class="lead">Impress clients and reward teams with a venue that ends the night on the water. Full AV, plated or station dining, and a crew that makes it effortless.</p>
</section>

<section id="dining">
  <div class="eyebrow">Sunset Dining</div>
  <h2 class="disp">A chef’s table that sails into the sunset.</h2>
  <p class="lead">Seasonal menus, sommelier pairings, and the California coast gliding past the window. The most quietly romantic reservation in Marina del Rey.</p>
</section>

<section id="story">
  <div class="eyebrow">Our Story</div>
  <h2 class="disp">Family-owned. Forty-odd years. One coastline.</h2>
  <p class="lead">Since 1980, FantaSea has hosted more than 10,000 events on the waters of Southern California — the same family, the same care, the same horizon.</p>
</section>

<section id="contact">
  <div class="eyebrow">Charter Now</div>
  <h2 class="disp">Reserve the sea.</h2>
  <div class="contact">
    <div><b>Marina</b>4215 Admiralty Way, Marina del Rey, CA 90292</div>
    <div><b>Reservations</b>(310) 827-2220</div>
    <div><b>Online</b>fantaseayachts.com</div>
    <div><b>From</b>$6,000 · 12–250 guests</div>
  </div>
  <a class="cta" href="tel:+13108272220" style="margin-top:44px">Call to charter</a>
</section>

<footer>
  <span>FantaSea Yachts · Marina del Rey</span>
  <span>Hermès palette concept — for discussion</span>
  <span>© 1980–2026</span>
</footer>
</body></html>