@font-face{ font-family:"Anton";font-style:normal;font-weight:400;font-display:swap; src:url("../fonts/anton.woff2") format("woff2"); } @font-face{ font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap; src:url("../fonts/archivo.woff2") format("woff2"); } /* Houston Bike Bar — 2026 site Brand: navy #0F2B4E / red #BB2025 / bone #F6F1E7 (sampled from the logo) */ :root{ --navy:#0F2B4E; --navy-deep:#091C34; --red:#BB2025; --red-hot:#D9272C; --bone:#F6F1E7; --bone-2:#EDE5D6; --ink:#16181C; --muted:#5C6472; --line:rgba(15,43,78,.14); --shadow:0 18px 50px -20px rgba(9,28,52,.45); --wrap:1180px; --r:14px; --star:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); /* Real rendered height of the fixed .mobile-cta bar (52px tap target + 10px top/ bottom padding + the home-indicator safe area). Anything that can land at the bottom of a phone screen on load — like the homepage hero — needs to reserve at least this much clearance so the bar never sits on top of it. */ --mcta-h:calc(72px + env(safe-area-inset-bottom)); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--bone); color:var(--ink); font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:17.5px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* Fixed film-grain texture over the whole page — the cheap trick that makes a flat color/photo site read as considered and premium instead of plain, same technique austinbarbike.com uses. Pure SVG noise, no image request, low enough opacity it never fights actual content. */ .grain{ position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.045; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,"); } /* Sections quietly fade + rise into place as they're scrolled to, instead of just snapping into view — the difference between a static page and one that feels considered. Every section starts revealed (no JS = no broken page); site.js adds .reveal to sections after the first on load, then .in once each one crosses the viewport. Respects reduced-motion. */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} } /* height:auto is mandatory alongside the width/height attributes on every . Those attributes reserve space so nothing reflows while images load, but without this the browser honours the literal height and stretches the picture once max-width scales it down. */ img{max-width:100%;height:auto;display:block} a{color:var(--red);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,.display{ font-family:"Anton","Archivo Black",Impact,sans-serif; font-weight:400; letter-spacing:.012em; line-height:.98; text-transform:uppercase; margin:0 0 .5em; } h1{font-size:clamp(2.6rem,7vw,5.2rem)} h2{font-size:clamp(2rem,4.4vw,3.4rem)} h3{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.1} p{margin:0 0 1.1em} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} .narrow{max-width:760px} section{padding:clamp(58px,8vw,110px) 0} /* ---------- preview banner ---------- */ .preview-bar{ background:var(--red);color:#fff;text-align:center; font-size:.82rem;letter-spacing:.08em;text-transform:uppercase; font-weight:600;padding:9px 16px; } .preview-bar a{color:#fff;text-decoration:underline} /* ---------- header ---------- */ .site-header{ position:sticky;top:0;z-index:60; background:rgba(246,241,231,.94); backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line); transition:box-shadow .3s ease; } .site-header.is-scrolled{box-shadow:0 8px 24px -18px rgba(9,28,52,.35)} .nav{display:flex;align-items:center;gap:28px;height:82px} .brand{display:flex;align-items:center;gap:12px;flex-shrink:0} .brand img{height:54px;width:auto} .brand b{ font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase; font-size:1.06rem;line-height:.95;color:var(--navy);letter-spacing:.02em; display:block;max-width:96px; } .nav-links{display:flex;gap:26px;margin-left:auto;align-items:center} .nav-links a{ color:var(--navy);font-weight:600;font-size:.94rem; letter-spacing:.01em;text-decoration:none; } .nav-links a:hover{color:var(--red)} /* .nav-links a (0-1-1) outranks .btn (0-1-0), which was rendering the primary CTA navy-on-red at 2.25:1. Restate it at matching specificity. */ .nav-links a.btn{color:#fff} .nav-links a.btn:hover{color:#fff} .nav-phone{ color:var(--navy);font-weight:700;white-space:nowrap; font-variant-numeric:tabular-nums; } .nav-toggle{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer} .nav-toggle span{display:block;width:26px;height:2.5px;background:var(--navy);margin:5px 0;border-radius:2px} .nav-links a[aria-current="page"]{color:var(--red)} /* Fifteen pages needs grouping, so Tours / Occasions / Guides each get a menu. The parent is a real page too, so it stays a link — the menu opens on hover and on keyboard focus rather than on click. */ .has-menu{position:relative} .has-menu > a{display:inline-flex;align-items:center;gap:6px} .caret{width:9px;height:6px;flex:none;transition:transform .18s ease} .has-menu:hover > a .caret, .has-menu:focus-within > a .caret{transform:rotate(180deg)} .menu{ position:absolute;top:100%;left:50%;transform:translate(-50%,8px); min-width:250px;padding:8px;margin-top:14px; background:#fff;border:1px solid var(--line);border-radius:12px; box-shadow:0 22px 46px -22px rgba(9,28,52,.45); display:flex;flex-direction:column;gap:2px; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .16s ease,transform .16s ease,visibility .16s; z-index:70; } /* bridges the gap so the menu doesn't close as the pointer travels to it */ .menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px} .has-menu:hover > .menu, .has-menu:focus-within > .menu{ opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0); } .menu a{ padding:10px 14px;border-radius:8px;font-size:.92rem;font-weight:600; color:var(--navy);white-space:nowrap; } .menu a:hover{background:var(--bone-2);color:var(--red);text-decoration:none} /* ---------- buttons ---------- */ .btn{ display:inline-block; background:var(--red);color:#fff; font-weight:700;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase; padding:16px 30px;border-radius:100px;border:0;cursor:pointer; text-decoration:none; transition:transform .25s cubic-bezier(.2,.7,.2,1),background .2s ease,box-shadow .25s cubic-bezier(.2,.7,.2,1); box-shadow:0 10px 24px -12px rgba(187,32,37,.8); } .btn:hover{background:var(--red-hot);transform:translateY(-2px);text-decoration:none;color:#fff} .btn-ghost{ background:transparent;color:var(--navy); border:2px solid rgba(15,43,78,.28);box-shadow:none; } .btn-ghost:hover{background:var(--navy);border-color:var(--navy);color:#fff} .btn-light{background:#fff;color:var(--navy)} .btn-light:hover{background:#fff;color:var(--red)} .btn-sm{padding:12px 22px;font-size:.84rem} .btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center} /* ---------- hero ---------- */ .hero{ position:relative;color:#fff; min-height:clamp(560px,82vh,820px); display:flex;align-items:flex-end; padding:0;overflow:hidden; } .hero-bg{position:absolute;inset:0} .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%} /* Two layers, not one. The old single vertical gradient was thinnest at 38% down — exactly where the bike's white phone-number banner sits in most of these photos — so headlines were rendering white-on-white. The horizontal scrim guarantees the text column always sits on navy while the right of the photo stays open. */ .hero-bg::after{ content:"";position:absolute;inset:0; background: linear-gradient(90deg,rgba(9,28,52,.80) 0%,rgba(9,28,52,.55) 40%,rgba(9,28,52,0) 72%), linear-gradient(180deg,rgba(9,28,52,.55) 0%,rgba(9,28,52,.34) 42%,rgba(9,28,52,.92) 100%); } @media (max-width:780px){ /* text runs full width on a phone, so the scrim has to cover the whole frame */ .hero-bg::after{ background: linear-gradient(90deg,rgba(9,28,52,.72) 0%,rgba(9,28,52,.58) 60%,rgba(9,28,52,.42) 100%), linear-gradient(180deg,rgba(9,28,52,.58) 0%,rgba(9,28,52,.42) 40%,rgba(9,28,52,.94) 100%); } } .hero-inner{position:relative;z-index:2;width:100%;padding:0 0 clamp(48px,7vw,84px)} .hero h1{ color:#fff;max-width:14ch; text-shadow:0 3px 30px rgba(0,0,0,.4); margin-bottom:.35em; } .hero h1 em{font-style:normal;color:#FF9EA1} .eyebrow{ display:inline-block;font-size:.78rem;font-weight:700; letter-spacing:.2em;text-transform:uppercase; color:var(--red);margin-bottom:1.1em; } .hero .eyebrow{color:#fff;opacity:.92} .hero-sub{ font-size:clamp(1.05rem,1.7vw,1.28rem);max-width:52ch; color:rgba(255,255,255,.92);margin-bottom:1.8em; } .hero-facts{ display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:28px; font-size:.86rem;letter-spacing:.06em;text-transform:uppercase; font-weight:600;color:rgba(255,255,255,.82); } /* Homepage hero's one secondary action — plain link, not a second button, so it doesn't compete with the real CTA (the floating Book bar). */ .hero-link{margin:1.4em 0 0} .hero-link a{ display:inline-flex;align-items:center;min-height:44px; color:#fff;font-weight:700;font-size:.95rem;letter-spacing:.02em; text-decoration:underline;text-underline-offset:4px; text-decoration-color:rgba(255,255,255,.45); } .hero-link a:hover{text-decoration-color:#fff} .hero-facts span{display:flex;align-items:center;gap:9px} .hero-facts span::before{ content:"";width:11px;height:11px;flex:none; background:var(--red-hot);clip-path:var(--star); } /* ---------- homepage hero, mobile ---------- Rebuilt as two stacked blocks instead of text-over-photo. Overlaying a full paragraph + two buttons + a facts row on a photo meant heavy scrim everywhere just to keep text legible, which buried the actual product — "too text heavy, I want an image to dominate about half the screen." Now: a clean, mostly-unobscured photo block on top (real screen real estate, not fighting for legibility), and a solid navy content panel below it carrying all the text. Desktop keeps the original overlay treatment — this only applies under 780px. */ @media (max-width:780px){ .hero-home{display:block;min-height:0} .hero-home .hero-bg{position:relative;inset:auto;height:36vh;min-height:240px;max-height:340px} .hero-home .hero-bg::after{ background:linear-gradient(180deg,rgba(9,28,52,0) 68%,rgba(9,28,52,.6) 100%); } .hero-home .hero-skyline{display:none} .hero-home .hero-inner{ position:relative;z-index:auto; background:var(--navy-deep); /* Removing the solid mobile-cta bar meant the fixed Call/Book buttons no longer visually block whatever sits underneath them at the bottom of the screen — so real content needs its own clearance again, same footprint the bar used to occupy. Safe now instead of reading as dead space, because this panel is solid navy already; the reserved area is just panel padding, not empty photo. */ padding:18px 0 calc(16px + var(--mcta-h)); } /* Cut down instead of just padded around — the full stack (photo + eyebrow + h1 + subhead + link + facts row) doesn't fit above the fixed Call/Book bar on shorter phones, so content collided with it no matter how much padding sat below. Trimming the subhead to 2 lines is part of that fix, and also directly answers "too text heavy." */ .hero-home .hero-sub{ margin-bottom:1.05em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } /* hero-bike-tight.webp is already framed on the bike — no object-position fighting needed now that the photo isn't being cropped down to make room for overlaid text. */ .hero-home .hero-bg img{object-position:center 22%} } /* Short phones (iPhone SE class, ~667px tall) — the 780px-wide breakpoint above was tuned against a 844px-tall viewport and left the facts row (price/capacity/BYOB/21+) overlapping the fixed Call/Book bar on anything shorter, confirmed by UX review measuring actual overlapping pixel rects. Trim further specifically by viewport height, not width, since that's the actual constraint. */ @media (max-width:780px) and (max-height:700px){ .hero-home .hero-bg{height:19vh;min-height:130px} .hero-home .hero-inner{padding-top:10px} .hero-home .hero-sub{margin-bottom:.7em} .hero-home .hero-link{margin-top:.6em} .hero-home .hero-facts{margin-top:10px;gap:5px 16px;font-size:.74rem} } /* Skyline silhouette pinned to the bottom of the hero */ .hero-skyline{ position:absolute;left:0;right:0;bottom:-1px;z-index:1; line-height:0;pointer-events:none;color:var(--navy-deep);opacity:.55; } .hero-skyline svg{display:block;width:100%;height:clamp(90px,12vw,170px)} /* ---------- ticker / trust strip ---------- */ .strip{background:var(--navy);color:#fff;padding:22px 0} .strip .wrap{ display:flex;flex-wrap:wrap;gap:14px 44px;justify-content:center;align-items:center; font-size:.85rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:rgba(255,255,255,.85);text-align:center; } /* ---------- bold stat band ---------- Replaces a row of small uppercase text (read as fine print, not a flex) with a real numbers-first credibility block — verified facts only, no review-count/star-rating claim invented since we don't have one to back. */ .stat-band{background:var(--navy-deep);padding:clamp(40px,5vw,64px) 0} .stat-band .wrap{ display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center; } .stat-band .stat .sn{ font-family:"Anton",sans-serif;font-weight:400; font-size:clamp(2.2rem,4.2vw,3.2rem);line-height:1;color:#fff; } .stat-band .stat .sl{ margin-top:8px;font-size:.72rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:rgba(255,255,255,.55); } @media (max-width:780px){ .stat-band .wrap{grid-template-columns:repeat(2,1fr);row-gap:34px} } /* ---------- H-Town flair ---------- */ /* Houston skyline band between sections */ .skyline{display:block;line-height:0;color:var(--navy)} .skyline svg{display:block;width:100%;height:clamp(72px,9vw,120px)} .skyline.flip svg{transform:scaleY(-1)} .skyline.pale{color:rgba(15,43,78,.13)} .skyline.light{color:var(--bone)} /* Faint star texture over a section */ .stars{position:relative} .stars::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.055; background-image: radial-gradient(circle at 12% 22%, var(--navy) 1.6px, transparent 1.7px), radial-gradient(circle at 68% 12%, var(--navy) 1.6px, transparent 1.7px), radial-gradient(circle at 38% 74%, var(--navy) 1.6px, transparent 1.7px), radial-gradient(circle at 88% 62%, var(--navy) 1.6px, transparent 1.7px); background-size:230px 210px; } .stars > *{position:relative;z-index:1} /* Eyebrow with a lone star in front */ .eyebrow.star::before{ content:"";display:inline-block;width:11px;height:11px;margin-right:9px; background:currentColor;clip-path:var(--star); } /* Neighborhood chips */ .hoods{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} .hood{ display:inline-flex;align-items:center;gap:8px; border:2px solid rgba(15,43,78,.22);border-radius:8px; padding:8px 15px;font-size:.76rem;font-weight:700; letter-spacing:.11em;text-transform:uppercase;color:var(--navy); background:rgba(255,255,255,.6); } .hood::before{content:"";width:9px;height:9px;flex:none;background:var(--red);clip-path:var(--star)} .bg-navy .hood{border-color:rgba(255,255,255,.32);color:#fff;background:rgba(255,255,255,.07)} .bg-navy .hood::before{background:#FF9EA1} /* Divider rule with a lone star in the middle */ .star-rule{display:flex;align-items:center;gap:18px;margin:clamp(38px,5vw,64px) 0;color:var(--line)} .star-rule::before,.star-rule::after{content:"";flex:1;height:2px;background:currentColor} .star-rule i{width:20px;height:20px;flex:none;background:var(--red);clip-path:var(--star)} .bg-navy .star-rule{color:rgba(255,255,255,.18)} /* ---------- generic layout bits ---------- */ .lede{font-size:clamp(1.08rem,1.6vw,1.3rem);color:var(--muted);max-width:60ch} .section-head{max-width:720px;margin-bottom:clamp(34px,5vw,58px)} .split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,72px);align-items:center} .split-media{position:relative} .split-media img{border-radius:var(--r);box-shadow:var(--shadow)} /* little lone-star badge on photos */ .split-media::after{ content:"";position:absolute;top:-16px;right:-16px; width:64px;height:64px;background:var(--red);clip-path:var(--star); opacity:.9; } .bg-navy{background:var(--navy);color:#fff} .bg-navy h2,.bg-navy h3{color:#fff} .bg-navy .lede,.bg-navy p{color:rgba(255,255,255,.82)} .bg-bone2{background:var(--bone-2)} /* ---------- cards ---------- */ .grid{display:grid;gap:26px} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .card{ background:#fff;border-radius:var(--r);overflow:hidden; border:1px solid var(--line); display:flex;flex-direction:column; transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s cubic-bezier(.2,.7,.2,1),border-color .3s ease; } .card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(15,43,78,.24)} .card-img{aspect-ratio:4/3;overflow:hidden;background:var(--navy)} .card-img img{width:100%;height:100%;object-fit:cover} .card-body{padding:26px 26px 30px;flex:1;display:flex;flex-direction:column} .card-body h3{color:var(--navy);margin-bottom:.45em} .card-body p{color:var(--muted);font-size:.98rem;margin-bottom:1.2em} .card-body .card-cta{font-weight:700;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase} /* Hub cards used to hand off a description with no direct path to book. This row carries both: the descriptive link and a real booking action. Two links, 8px apart, one internal and one an external checkout — without real hit-area padding the text line-box alone was ~23px tall, an easy fat-finger miss between "read more" and "book now" on a phone. */ .card-body .card-ctas{margin-top:auto;display:flex;flex-direction:column;gap:4px} .card-body .card-ctas .card-cta{margin:0;min-height:44px;display:flex;align-items:center} .tag{ display:inline-flex;align-items:center;gap:7px; font-size:.7rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--red);margin-bottom:.9em; } .tag::before{content:"";width:9px;height:9px;flex:none;background:currentColor;clip-path:var(--star)} /* numbered steps */ .step{position:relative;padding-left:70px} .step .num{ position:absolute;left:0;top:2px; width:52px;height:52px; background:var(--red);color:#fff;clip-path:var(--star); display:flex;align-items:center;justify-content:center; font-family:"Anton",sans-serif;font-size:1.15rem;padding-bottom:6px; } .step h3{color:var(--navy);margin-bottom:.35em} .bg-navy .step h3{color:#fff} .step p{color:var(--muted);font-size:.98rem;margin:0} .bg-navy .step p{color:rgba(255,255,255,.78)} /* ---------- price ---------- */ .price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:840px} .price-card{ background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:36px 32px;text-align:center;position:relative;overflow:hidden; } .price-card::after{ content:"";position:absolute;right:-26px;bottom:-26px; width:110px;height:110px;background:var(--navy);opacity:.05;clip-path:var(--star); } .price-card.feature{background:var(--navy);border-color:var(--navy);color:#fff} .price-card.feature::after{background:#fff;opacity:.09} .price-card .when{ font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--red);margin-bottom:.7em; } .price-card.feature .when{color:#FF9EA1} .price-card .amt{ font-family:"Anton",sans-serif;font-size:clamp(3rem,6vw,4.2rem); line-height:1;color:var(--navy);position:relative; } .price-card.feature .amt{color:#fff} .price-card .per{font-size:.92rem;color:var(--muted);margin-top:.6em;position:relative} .price-card.feature .per{color:rgba(255,255,255,.75)} /* ---------- keyboard focus ---------- One global indicator, flipped to white on the dark surfaces so it stays visible everywhere. */ :where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{ outline:3px solid var(--navy); outline-offset:3px; border-radius:6px; } .bg-navy :focus-visible, .hero :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible, .btn:focus-visible{outline-color:#fff} .btn-light:focus-visible, .mcta-call:focus-visible{outline-color:var(--navy)} /* ---------- gallery ---------- A uniform 3x2 grid. The old masonry left a wide gap mid-column and an empty bottom-right cell, which read as broken rather than as an intentional mosaic. */ .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .gallery figure{margin:0;overflow:hidden;border-radius:10px;background:var(--navy);aspect-ratio:4/3} .gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .gallery figure:hover img{transform:scale(1.06)} /* ---------- FAQ ---------- */ .faq-list{max-width:840px;border-top:1px solid var(--line)} .faq-list details{border-bottom:1px solid var(--line)} .faq-list summary{ cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative; font-weight:700;font-size:1.06rem;color:var(--navy); } .faq-list summary::-webkit-details-marker{display:none} .faq-list summary::after{ content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%); font-family:"Anton",sans-serif;font-size:1.7rem;color:var(--red);line-height:1; } .faq-list details[open] summary::after{content:"–"} .faq-list .answer{padding:0 44px 26px 0;color:var(--muted)} .faq-list .answer p:last-child{margin-bottom:0} /* ---------- policy blocks ---------- */ .policy{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px 34px} .policy h3{color:var(--navy)} .policy ul{margin:0;padding-left:1.15em;color:var(--muted)} .policy li{margin-bottom:.6em} .policy li:last-child{margin-bottom:0} .callout{ border-left:5px solid var(--red);background:#fff; padding:22px 26px;border-radius:0 var(--r) var(--r) 0; } .callout strong{color:var(--navy)} /* ---------- big CTA ---------- */ .cta-band{position:relative;color:#fff;text-align:center;overflow:hidden;padding:clamp(70px,10vw,130px) 0} .cta-band .bg{position:absolute;inset:0} .cta-band .bg img{width:100%;height:100%;object-fit:cover} .cta-band .bg::after{content:"";position:absolute;inset:0;background:rgba(9,28,52,.82)} .cta-band .wrap{position:relative;z-index:2} .cta-band h2{color:#fff} .cta-band p{color:rgba(255,255,255,.86);max-width:52ch;margin:0 auto 2em} .cta-band .btn-row{justify-content:center} .cta-band .eyebrow{color:#FF9EA1} /* ---------- persistent mobile action bar ---------- On a phone both the Book button and the phone number live inside the hamburger, and below the fold of the opened menu — so there was no visible way to book or call from any page. This puts both on screen permanently. Phone-only; desktop already has them in the header. */ .mobile-cta{display:none} @media (max-width:780px){ /* No bar background — the buttons float directly over the page as their own pills, each carrying its own shadow for legibility, instead of sitting inside a solid white strip. Still fixed/always-present while scrolling, same as before. */ .mobile-cta{ display:grid;grid-template-columns:1fr 1.6fr;gap:10px; position:fixed;left:0;right:0;bottom:0;z-index:80; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); } .mcta{ display:flex;align-items:center;justify-content:center; min-height:52px;padding:10px 16px;border-radius:100px; font-weight:700;font-size:.9rem;letter-spacing:.06em; text-transform:uppercase;text-decoration:none; box-shadow:0 10px 26px -10px rgba(9,28,52,.55); } .mcta:hover{text-decoration:none} .mcta-call{background:#fff;color:var(--navy);border:2px solid rgba(15,43,78,.28)} .mcta-book{background:var(--red);color:#fff} /* keep the last footer row clear of the bar */ .site-footer{padding-bottom:104px} /* This bar now stays visible while the mobile menu is open (it used to hide here, which is why the menu grew its own — buggy — sticky Book button; see the .nav-links > .btn note above). Sit it above the menu panel. */ body.menu-open .mobile-cta{z-index:90} } /* ---------- interactive tools (drink calculator, cost splitter) ---------- */ .tool{ background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:clamp(24px,4vw,38px);max-width:720px; box-shadow:0 14px 40px -28px rgba(9,28,52,.5); } .bg-navy .tool{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)} .tool + .tool{margin-top:24px} .tool-row{margin-bottom:26px} .tool-row:last-of-type{margin-bottom:0} .tool-label{ display:block;font-size:.78rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--navy);margin-bottom:10px; } .bg-navy .tool-label{color:#fff} /* number field — big enough to tap and read on a phone */ .tool-num{ width:100%;max-width:200px;min-height:52px; padding:12px 16px;border:2px solid var(--line);border-radius:10px; background:#fff;color:var(--ink); font-family:"Anton",sans-serif;font-size:1.6rem;line-height:1.2; font-variant-numeric:tabular-nums; } .tool-num:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(15,43,78,.14)} /* segmented control */ .seg{display:flex;flex-wrap:wrap;gap:8px} .seg button{ flex:1 1 auto;min-width:104px;min-height:48px; padding:12px 18px;cursor:pointer; border:2px solid rgba(15,43,78,.24);border-radius:100px;background:transparent; font-family:inherit;font-size:.86rem;font-weight:700; letter-spacing:.08em;text-transform:uppercase;color:var(--navy); transition:background .15s ease,border-color .15s ease,color .15s ease; } .seg button:hover{border-color:var(--navy)} .seg button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff} .bg-navy .seg button{border-color:rgba(255,255,255,.3);color:#fff} .bg-navy .seg button[aria-pressed="true"]{background:var(--red);border-color:var(--red)} /* result */ .tool-out{ margin-top:28px;padding:22px 24px; background:var(--bone-2);border-left:5px solid var(--red);border-radius:0 10px 10px 0; } .bg-navy .tool-out{background:rgba(255,255,255,.08)} .tool-out .big{ font-family:"Anton",sans-serif;font-size:clamp(1.5rem,3.4vw,2.1rem); line-height:1.15;color:var(--navy);margin:0 0 .4em; } .bg-navy .tool-out .big{color:#fff} .tool-out .note{margin:0;font-size:.95rem;color:var(--muted)} .bg-navy .tool-out .note{color:rgba(255,255,255,.78)} .tool-out .big em{font-style:normal;color:var(--red)} .bg-navy .tool-out .big em{color:#FF9EA1} /* share box */ .share-box{margin-top:24px} .share-box textarea{ width:100%;min-height:96px;resize:vertical; padding:14px 16px;border:2px solid var(--line);border-radius:10px; background:var(--bone);color:var(--ink); font-family:inherit;font-size:1rem;line-height:1.5; } .share-box textarea:focus{outline:none;border-color:var(--navy)} .copy-row{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap} /* .btn-sm alone lands at ~42px — under the 44px minimum tap target */ .copy-row .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center} .copy-ok{font-size:.86rem;font-weight:700;color:var(--red);opacity:0;transition:opacity .2s ease} .copy-ok.show{opacity:1} @media (max-width:560px){ .seg button{flex:1 1 100%} .tool-num{max-width:100%} } /* ---------- contact ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px)} .field{margin-bottom:20px} .field label{ display:block;font-size:.78rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--navy);margin-bottom:8px; } .field input,.field select,.field textarea{ width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:10px; background:#fff;font-family:inherit;font-size:1rem;color:var(--ink); } .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(15,43,78,.5); } .field textarea{min-height:150px;resize:vertical} .contact-line{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)} .contact-line:last-child{border-bottom:0} .contact-line .k{ min-width:100px;font-size:.76rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);padding-top:4px; } .contact-line .v{font-weight:600;color:var(--navy)} .contact-line .v small{display:block;font-weight:400;color:var(--muted);font-size:.9rem} /* ---------- footer ---------- */ .site-footer{background:var(--navy-deep);color:rgba(255,255,255,.7);padding:0 0 32px} .footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px;margin-bottom:44px;padding-top:56px} .site-footer h4{ font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase; color:#fff;font-size:.95rem;letter-spacing:.08em;margin:0 0 16px; } .site-footer a{color:rgba(255,255,255,.72);text-decoration:none} .site-footer a:hover{color:#fff;text-decoration:underline} .site-footer ul{list-style:none;margin:0;padding:0} .site-footer li{margin-bottom:0;font-size:.94rem} .site-footer li a{display:flex;align-items:center;min-height:46px;padding:4px 0} /* IG/FB icons live outside the