/* The Star Bar — shared stylesheet. Extracted from index.html 28 Jul 2026 when the Hunter Twins page was added, so the two pages cannot drift apart. Both pages link this file; edit here, not inline. */ *{margin:0;padding:0;box-sizing:border-box} /* background-color here is the CANVAS colour, not decoration: iOS Safari paints the rubber-band overscroll area (and the strip the toolbar vacates) from it, and it propagates from when has none — body is cream, the footer is wine, so iPhone showed a cream band under the footer. Both ends of this page are dark. */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background-color:#5f0000} :root{ --wine:#8b0000; --wine-deep:#5f0000; --ink:#2a2320; --muted:#6f665f; --sand:#f6efe6; --cream:#fffdf9; --line:#e7ddd0; --gold:#c8993f; } body{ background:var(--cream); color:var(--ink); font-family:'Montserrat',-apple-system,Segoe UI,Roboto,sans-serif; line-height:1.6; overflow-x:hidden; } h1,h2,h3,.serif{font-family:'Playfair Display',Georgia,serif} a{color:inherit} .wrap{max-width:1080px;margin:0 auto;padding:0 22px} .btn{ display:inline-block;text-decoration:none;font-weight:600;font-size:15px; padding:13px 26px;border-radius:999px;transition:transform .15s,box-shadow .15s; } .btn:hover{transform:translateY(-2px)} .btn-gold{background:var(--gold);color:#2a2320;box-shadow:0 6px 18px rgba(200,153,63,.35)} .btn-ghost{border:1.5px solid rgba(255,255,255,.7);color:#fff} .btn-wine{background:var(--wine);color:#fff} /* hero */ /* Hero + strip together fill the first screen (100svh — the small-viewport unit, honest about mobile toolbars). Earlier this was 64svh with the strip as a separate sibling section, so the story image below it peeked in at the bottom of the default, un-scrolled view — looked like a randomly half-cropped photo. Folding the strip INSIDE the hero as a flex child pinned to the bottom guarantees nothing below the fold is ever visible on first paint, on any device, while still surfacing the strip's facts without scrolling (the original goal that set the height in the first place). */ .hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column; background:#1a0a0a;color:#fff;text-align:center} .hero::before{content:"";position:absolute;inset:0; background:url('images/hero.jpg') center/cover;opacity:.55} .hero::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(20,6,6,.55),rgba(20,6,6,.35) 45%,rgba(20,6,6,.8))} .hero .inner{position:relative;z-index:2;width:100%;padding:60px 22px;flex:1; display:flex;flex-direction:column;align-items:center;justify-content:center} .hero .eyebrow{letter-spacing:3px;text-transform:uppercase;font-size:13px; color:var(--gold);font-weight:600;margin-bottom:14px} .hero h1{font-size:clamp(38px,8vw,74px);line-height:1.02;font-weight:700; text-shadow:0 2px 24px rgba(0,0,0,.5)} .hero .tagline{font-family:'Playfair Display',Georgia,serif;font-weight:700; font-size:clamp(24px,4.6vw,42px);line-height:1.1;color:var(--gold);margin-top:14px; text-shadow:0 2px 20px rgba(0,0,0,.55)} .hero .sub{font-size:clamp(16px,2.6vw,21px);margin:18px auto 0;max-width:560px; color:#f3e9dd} .hero .sub-sm{font-size:clamp(14px,2.1vw,17px);margin-top:10px;color:#e6d8c8} .hero .sub b{color:#ffe6b0;font-weight:600} .hero .cta{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* social proof — Google + Tripadvisor, sits under the hero CTAs (31 Aug 2026). Kept to one row on a phone by letting it wrap and shrinking the type, so it never pushes the buttons off a 600px-tall screen. */ .proof{margin-top:22px;display:flex;gap:10px 16px;justify-content:center; flex-wrap:wrap;align-items:center} .proof-item{display:inline-flex;align-items:center;gap:8px;text-decoration:none; color:#f3e9dd;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.18); border-radius:999px;padding:7px 14px;font-size:clamp(12.5px,2vw,14px); line-height:1.2;transition:border-color .2s,background .2s} .proof-item:hover{background:rgba(0,0,0,.42);border-color:var(--gold)} .proof-stars{color:var(--gold);letter-spacing:1px;font-size:12px} .proof-item b{color:#ffe6b0;font-weight:600} .proof-award b{color:var(--gold)} .proof-dim{color:#d9c9b8} /* strip */ .strip{position:relative;z-index:2;flex-shrink:0;background:var(--wine);color:#fff; text-align:center;padding:16px 22px;font-size:clamp(14px,2.3vw,17px);letter-spacing:.3px} .strip b{color:#ffe6b0} section{padding:clamp(52px,8vw,90px) 0} .lead{max-width:720px;margin:0 auto;text-align:center} .kicker{letter-spacing:2.5px;text-transform:uppercase;font-size:12px; color:var(--wine);font-weight:700;margin-bottom:12px} h2{font-size:clamp(28px,5vw,44px);color:var(--ink);margin-bottom:16px} .lead p{color:var(--muted);font-size:clamp(15px,2.4vw,18px)} .story{background:var(--sand)} .story .cols{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;margin-top:8px} /* g-club.jpg is a portrait source (960x1200) — without a capped ratio it rendered ~1.25x taller than wide, dominating the mobile fold right under the facts strip. Cropped to a consistent landscape frame like the rest of the site's imagery. */ .story img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px; box-shadow:0 18px 40px rgba(90,20,20,.18);display:block} .story h2{margin-bottom:18px} .story p{color:var(--muted);margin-bottom:14px;font-size:16px} .story .tag{display:inline-block;background:#fff;border:1px solid var(--line); border-radius:999px;padding:6px 14px;font-size:13px;color:var(--wine); font-weight:600;margin:4px 6px 0 0} /* gallery */ .tint{background:var(--sand)} /* sticky menu bar. Links WRAP on small screens — never horizontal-scroll navigation, which hides items with no cue they exist (the mistake made on the Jury's menu tabs and the GCA nav). scroll-margin-top keeps the bar from covering section headings. */ .topnav{position:sticky;top:0;z-index:50;background:var(--wine-deep); box-shadow:0 2px 12px rgba(0,0,0,.22)} .nav-inner{display:flex;align-items:center;justify-content:space-between; gap:10px 22px;padding-top:11px;padding-bottom:11px;flex-wrap:wrap} .nav-brand{font-family:'Playfair Display',Georgia,serif;font-size:17px;color:#fff; text-decoration:none;white-space:nowrap;letter-spacing:.3px} .nav-links{display:flex;flex-wrap:wrap;gap:4px 20px} .nav-links a{color:#f0dada;text-decoration:none;font-size:14px;font-weight:500; padding:3px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s} .nav-links a:hover{color:#fff;border-bottom-color:var(--gold)} section[id]{scroll-margin-top:70px} @media(max-width:600px){ .nav-inner{justify-content:center;gap:4px 16px;padding-top:9px;padding-bottom:9px} /* brand hidden on phones — the hero states the name immediately below, and a 109px sticky bar was eating 13% of the viewport on every scroll. */ .nav-brand{display:none} .nav-links{justify-content:center;gap:2px 15px} .nav-links a{font-size:13.5px} section[id]{scroll-margin-top:72px} } /* feature photo — capped in height so a portrait shot can't dominate the section */ .feature-img{display:block;width:100%;max-width:420px;margin:0 auto 34px; border-radius:14px;box-shadow:0 16px 38px rgba(90,20,20,.20);height:auto} /* shared list heading (tapas + drinks), mirrors .wine-group h3 */ .menu-group{max-width:760px;margin:38px auto 0} .menu-head{font-family:'Playfair Display',Georgia,serif;font-size:20px;color:var(--wine-deep); text-align:center;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px} .menu-rule{width:54px;height:2px;background:var(--gold);margin:0 auto 26px} /* drinks — two plain price columns, single column on phones */ .drinks-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px 46px; max-width:900px;margin:34px auto 0} .drink-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px; padding:8px 0;border-bottom:1px dotted var(--line);font-size:15px;color:var(--ink)} .drink-row b{font-weight:600;color:var(--wine);white-space:nowrap} .drink-sub{font-size:12px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase; margin:18px 0 4px;font-weight:700} @media(max-width:640px){.drinks-cols{grid-template-columns:1fr;gap:0}} /* tapas — same row pattern as the wine list; stacks on phones */ .dish{display:flex;justify-content:space-between;align-items:baseline;gap:18px; padding:16px 0;border-bottom:1px solid var(--line)} .dish:last-of-type{border-bottom:0} .dish-name{font-weight:600;color:var(--ink);font-size:17px} .dish-desc{color:var(--muted);font-size:13.5px;margin-top:3px;max-width:46ch} .dish-pair{color:var(--wine);font-size:12px;margin-top:5px;font-style:italic} .dish-prices{text-align:right;white-space:nowrap;flex-shrink:0} .dish-price{font-weight:600;color:var(--wine);font-size:16px} .dish-price span{color:var(--muted);font-weight:400;font-size:12.5px} .alt-or{text-align:center;color:var(--muted);font-size:12px;letter-spacing:2px; text-transform:uppercase;margin:18px 0;position:relative} .alt-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px 22px;margin-top:8px} @media(max-width:560px){ .dish{flex-direction:column;gap:6px} .dish-prices{text-align:left} .dish-price{display:inline-block;margin-right:14px} .alt-box{padding:4px 16px} } /* wine list — two-column price row collapses to a stacked block on phones */ .wine{background:var(--sand)} .wine-group{max-width:760px;margin:38px auto 0} .wine-group h3{font-family:'Playfair Display',Georgia,serif;font-size:20px;color:var(--wine-deep); text-align:center;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px} .wine-rule{width:54px;height:2px;background:var(--gold);margin:0 auto 26px} .wine-item{display:flex;justify-content:space-between;align-items:baseline;gap:18px; padding:16px 0;border-bottom:1px solid var(--line)} .wine-item:last-child{border-bottom:0} .wine-name{font-weight:600;color:var(--ink);font-size:17px} .wine-meta{color:var(--muted);font-size:13.5px;margin-top:3px} .wine-prices{text-align:right;white-space:nowrap;flex-shrink:0} .wine-price{font-weight:600;color:var(--wine);font-size:16px} .wine-price span{color:var(--muted);font-weight:400;font-size:12.5px} .wine-note{text-align:center;color:var(--muted);font-size:13.5px;margin-top:26px;font-style:italic} @media(max-width:560px){ .wine-item{flex-direction:column;gap:6px} .wine-prices{text-align:left} .wine-price{display:inline-block;margin-right:14px} } .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px} .card{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1/1; box-shadow:0 10px 26px rgba(90,20,20,.12)} .card img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .card:hover img{transform:scale(1.06)} .card span{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px; color:#fff;font-weight:600;font-size:15px; background:linear-gradient(180deg,transparent,rgba(20,6,6,.78))} /* evening */ .evening{position:relative;color:#fff;text-align:center;background:#1a0a0a} .evening::before{content:"";position:absolute;inset:0; background:url('images/evening.jpg') center/cover;opacity:.45} .evening::after{content:"";position:absolute;inset:0;background:rgba(25,8,8,.55)} .evening .inner{position:relative;z-index:2;padding:clamp(60px,9vw,110px) 22px} .evening h2{color:#fff} .evening p{color:#f3e9dd;max-width:640px;margin:0 auto 8px} /* find us */ .find{background:var(--sand);text-align:center} .find .box{background:#fff;border:1px solid var(--line);border-radius:18px; max-width:640px;margin:26px auto 0;padding:34px 26px;box-shadow:0 14px 36px rgba(90,20,20,.1)} .find .addr{font-size:clamp(18px,3vw,24px);font-weight:600;margin-bottom:6px} .find .muted{color:var(--muted);font-size:15px} .find .actions{margin-top:22px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap} footer{background:var(--wine-deep);color:#f3e0e0;text-align:center;padding:40px 22px} footer img{height:64px;width:auto;background:#fff;border-radius:12px;padding:8px;margin-bottom:14px} footer .fine{font-size:13px;color:#e2b9b9;margin-top:10px} footer a{color:#ffdca8;text-decoration:none;font-weight:600} @media(max-width:760px){ .story .cols{grid-template-columns:1fr;gap:26px} .story .imgwrap{order:-1} /* Story is the first section under the facts strip. Full section padding-top (52px+) left a dead cream gap before the image kicked in — tightened just here since every other section leads with text, not a photo. */ .story{padding-top:22px} .grid{grid-template-columns:repeat(2,1fr)} }