/* ============================================================ VA Shoreline Events — Redesign 2026 Design system grafted from the approved homepage template (deep coastal navy · electric cyan #00d9ff · lime #a3e635) onto the production markup vocabulary. One CSS system. ============================================================ */ :root{ color-scheme: dark; --bg:#061820; --bg2:#0a2431; --card:#0c2a3a; --card2:#11384d; --ink:#f0faff; --muted:#b7d9e6; --faint:#84a9ba; --gold:#00d9ff; --gold2:#8df0ff; --gold-text:#8df0ff; --coral:#a3e635; --coral2:#c6f26d; --coral-btn:#a3e635; --coral-btn-hover:#bef264; --teal:#2dd4bf; --line:rgba(240,250,255,.14); --shadow:0 24px 60px rgba(0,10,18,.5); --head:"Bricolage Grotesque",system-ui,sans-serif; --body:"Outfit",system-ui,sans-serif; --hand:"Caveat",cursive; /* — legacy variable bridge: production inline styles reference these — */ --dark:#061820; --dark-mid:#0a2431; --navy:#04141c; --navy-mid:#0a2431; --navy-light:#11384d; --ocean:#00d9ff; --electric:#00d9ff; --electric-dark:#007d93; --sky-light:#eef2f9; --off-white:#f2fafd; --white:#ffffff; --border:rgba(240,250,255,.14); --border-dark:rgba(240,250,255,.14); --font-display:"Bricolage Grotesque",system-ui,sans-serif; --font-body:"Outfit",system-ui,sans-serif; --radius-lg:20px; --radius:14px; --lime:#a3e635; --muted-lt:#b7d9e6; } @media (prefers-color-scheme: light){ :root{ color-scheme: light; --bg:#f2fafd; --bg2:#e0f3fa; --card:#ffffff; --card2:#eef9fd; --ink:#072633; --muted:#3c5c6a; --faint:#52707f; --gold-text:#006a7d; --ocean:#007d93; --coral:#65a30d; --teal:#0f766e; --line:rgba(7,38,51,.14); --shadow:0 24px 50px rgba(0,80,110,.16); --dark:#072633; --dark-mid:#0c2a3a; --navy:#072633; --navy-mid:#11384d; --navy-light:#1d4258; --border:rgba(7,38,51,.14); --border-dark:rgba(7,38,51,.16); --muted-lt:#3c5c6a; } } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:var(--body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%} a{color:inherit} h1,h2,h3,h4{font-family:var(--head);line-height:1.05;letter-spacing:-.01em} ::selection{background:var(--gold);color:#04222e} :focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px} .container{width:min(1180px,100% - 40px);margin-inline:auto} .wrap{width:min(1180px,100% - 40px);margin-inline:auto} section[id],div[id]{scroll-margin-top:96px} .text-center{text-align:center} .hl{color:var(--gold-text)} .check{color:var(--teal);font-weight:800} .em-text{font-style:italic;color:var(--gold-text)} /* reveal: content must never stay hidden — visible by default, animation is progressive */ .fade-up,.fade-in,.slide-left,.slide-right{opacity:1;transform:none} @media (prefers-reduced-motion: no-preference){ .fade-up.in-view,.fade-in.in-view{animation:rvIn .55s ease both} @keyframes rvIn{from{opacity:.25;transform:translateY(14px)}to{opacity:1;transform:none}} } /* buttons — production vocabulary mapped to the new design */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;text-decoration:none;font-family:var(--body);font-weight:700;font-size:1rem;padding:15px 26px;border-radius:999px;transition:transform .18s ease, box-shadow .18s ease, background .18s ease;line-height:1.2} .btn:active{transform:scale(.97)} .btn-sunset,.btn-primary{background:var(--coral-btn)!important;color:#04222e!important;box-shadow:0 12px 28px rgba(132,204,22,.35)} .btn-sunset:hover,.btn-primary:hover{background:var(--coral-btn-hover)!important;transform:translateY(-2px)} .btn-ocean,.btn-gold,.btn-ghost-electric{background:var(--gold)!important;color:#04222e!important;box-shadow:0 12px 28px rgba(0,217,255,.3)} .btn-ocean:hover,.btn-gold:hover,.btn-ghost-electric:hover{background:var(--gold2)!important;transform:translateY(-2px)} .btn-ghost{background:transparent!important;color:var(--ink)!important;border:1.5px solid var(--line)} .btn-ghost:hover{border-color:var(--gold);color:var(--gold-text)!important} .btn-ghost-white{background:rgba(4,20,28,.35)!important;color:#fff!important;border:1.5px solid rgba(240,250,255,.45);backdrop-filter:blur(6px)} .btn-ghost-white:hover{border-color:var(--gold2);color:#fff!important} .btn-sand{background:var(--card2)!important;color:var(--ink)!important;border:1.5px solid var(--line)} /* section scaffolding */ .section-pad{padding:84px 0} .section-pad-sm{padding:52px 0} .section-light,.section-white,.section-on-white,.section-on-light{background:var(--bg2)} .section-title.dark{color:var(--ink)} .section-sub.dark{color:var(--muted)} .section-tag.dark{color:var(--gold-text)} .section-tag{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)!important;background:transparent!important;border:0!important} .section-tag::before{content:"";width:26px;height:2px;background:var(--coral)} .section-title{font-size:clamp(2rem,5.2vw,3.4rem);font-weight:800;margin:12px 0 12px;color:var(--ink)} .section-title em{font-style:normal;color:var(--gold-text)} .section-title.light{color:var(--ink)} .section-sub{color:var(--muted);font-size:1.08rem;line-height:1.6;margin:0;max-width:760px} .text-center .section-sub{margin-inline:auto} .scroll-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--coral));z-index:200;width:0} /* ======================= CHROME: header / nav ======================= */ .nav-wrap{position:sticky;top:0;z-index:90;background:rgba(4,20,28,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(240,250,255,.14);transition:box-shadow .25s} .nav-wrap.scrolled{box-shadow:0 14px 34px rgba(0,10,18,.45)} .nav{width:min(1180px,100% - 40px);margin-inline:auto;display:flex;align-items:center;gap:18px;padding:12px 0} .nav-logo{display:flex;align-items:center;flex:none;text-decoration:none} .nav-logo img{height:42px;width:auto;display:block} .nav-links{display:none;list-style:none;margin:0 0 0 auto;padding:0;gap:24px;align-items:center} .nav-links li{position:relative} .nav-links a{text-decoration:none;font-weight:600;font-size:.95rem;color:#b7d9e6;display:inline-block;padding:8px 0} .nav-links a:hover{color:#fff} .nav-dropdown{position:absolute;top:100%;left:-14px;min-width:230px;background:#0c2a3a;border:1px solid rgba(240,250,255,.16);border-radius:16px;padding:10px;box-shadow:0 24px 50px rgba(0,10,18,.5);opacity:0;visibility:hidden;transform:translateY(6px);transition:all .18s} .has-dropdown:hover .nav-dropdown,.has-dropdown:focus-within .nav-dropdown{opacity:1;visibility:visible;transform:none} .nav-dropdown a{display:block;padding:9px 12px;border-radius:10px;color:#d7edf6} .nav-dropdown a:hover{background:rgba(0,217,255,.12);color:#fff} .nav-actions{margin-left:auto;display:flex;gap:10px;align-items:center} @media(min-width:920px){.nav-links{display:flex}.nav-actions{margin-left:0}} .nav-phone{display:none;font-weight:700;text-decoration:none;color:#f0faff;white-space:nowrap} @media(min-width:1100px){.nav-phone{display:inline}} .nav-login{font-weight:600;font-size:.92rem;color:#b7d9e6;text-decoration:none;display:none} @media(min-width:1100px){.nav-login{display:inline}} .nav-login:hover{color:#fff} .nav-book{background:var(--coral-btn);color:#04222e!important;font-weight:800;text-decoration:none;padding:11px 20px;border-radius:999px;font-size:.95rem;white-space:nowrap;box-shadow:0 10px 24px rgba(132,204,22,.35)} .nav-book:hover{background:var(--coral-btn-hover)} .nav-hamburger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1.5px solid rgba(240,250,255,.25);background:transparent;color:#f0faff;cursor:pointer;flex:none} .nav-hamburger svg{width:22px;height:22px;stroke:#f0faff} @media(min-width:920px){.nav-hamburger{display:none}} .mobile-menu{display:none;background:#04141c;border-bottom:1px solid rgba(240,250,255,.14);padding:10px 0 18px} .mobile-menu.open{display:block} .mobile-menu .mobile-main{display:block;width:min(1180px,100% - 40px);margin-inline:auto;padding:12px 4px;font-weight:700;font-size:1.05rem;text-decoration:none;color:#f0faff;border-bottom:1px solid rgba(240,250,255,.1);background:none;border-top:0;border-left:0;border-right:0;text-align:left;cursor:pointer;font-family:var(--body)} .mobile-dropdown-btn{width:min(1180px,100% - 40px)} .mobile-sub-group{overflow:hidden;transition:max-height .3s ease} .mobile-sub{display:block;width:min(1180px,100% - 40px);margin-inline:auto;padding:10px 4px 10px 18px;font-weight:600;color:#b7d9e6;text-decoration:none;border-bottom:1px solid rgba(240,250,255,.06)} .mobile-cta{width:min(1180px,100% - 40px);margin:16px auto 0;display:flex;flex-wrap:wrap;gap:10px} .mobile-cta .btn{flex:1;justify-content:center} .mobile-menu .btn-ghost{color:#f0faff!important;border-color:rgba(240,250,255,.3)} /* ======================= FOOTER ======================= */ footer{background:#04141c;color:#b7d9e6;padding:56px 0 110px;font-size:.95rem;border-top:1px solid rgba(240,250,255,.12)} @media(min-width:920px){footer{padding-bottom:44px}} .footer-top{display:grid;gap:30px} @media(min-width:820px){.footer-top{grid-template-columns:1.4fr 1fr 1fr 1fr}} .footer-brand img{height:44px;width:auto;margin-bottom:14px} .footer-brand p{line-height:1.6;margin:0 0 14px;max-width:36ch} .footer-contact{display:grid;gap:7px} .footer-contact a{color:var(--gold2);font-weight:600;text-decoration:none} .footer-contact a:hover{text-decoration:underline} .footer-col h3{color:#f0faff;font-size:1rem;margin:0 0 12px;font-family:var(--head)} .footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px} .footer-col a{color:#b7d9e6;text-decoration:none;display:block;padding:3px 0} .footer-col a:hover{color:var(--gold2)} .footer-cities-check{position:absolute;opacity:0;pointer-events:none} .footer-cities-label{cursor:pointer;display:block} .footer-bottom,.footer-legal{margin-top:34px;border-top:1px solid rgba(240,250,255,.12);padding-top:18px;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;line-height:1.6} .footer-legal a,.footer-bottom a{color:#b7d9e6;font-weight:600;text-decoration:none} .footer-legal a:hover,.footer-bottom a:hover{color:var(--gold2)} .footer-social{display:flex;gap:12px;margin-top:14px} .footer-social a{color:#b7d9e6;text-decoration:none;font-weight:600} /* sticky mobile call bar (new design element) */ .callbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:95;display:flex;gap:10px;transform:translateY(140%);transition:transform .3s ease} .callbar.show{transform:none} .callbar a{flex:1;text-align:center;padding:14px;border-radius:999px;font-weight:800;text-decoration:none;font-size:.98rem} .callbar .call{background:#11384d;color:#f0faff;border:1.5px solid rgba(240,250,255,.25);backdrop-filter:blur(8px)} .callbar .book{background:var(--coral-btn);color:#04222e;box-shadow:0 12px 26px rgba(132,204,22,.4)} @media(min-width:920px){.callbar{display:none}} /* ======================= HERO (homepage, from approved template) ======================= */ .hero{position:relative;padding:0;overflow:hidden;background:#04141c;color:#f0faff} .hero .hero-bg{position:absolute;inset:0} .hero .hero-bg video{width:100%;height:100%;object-fit:cover;opacity:.6} .hero .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,17,25,.46) 0%,rgba(3,17,25,.22) 38%,rgba(4,22,31,.95) 96%),linear-gradient(95deg,rgba(3,17,25,.82) 0%,rgba(3,17,25,.18) 62%)} .hero-in{position:relative;z-index:2;padding:58px 0 0} .hero .badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;align-items:center} .military-badge{display:inline-flex;align-items:center;gap:9px;background:rgba(4,20,28,.55);border:1px solid rgba(240,250,255,.3);backdrop-filter:blur(6px);padding:8px 14px;border-radius:999px;font-size:.8rem;font-weight:600;color:#f0faff;text-decoration:none;line-height:1.25} .military-badge strong{color:var(--gold2)} .military-badge-icon{color:var(--gold2)} .badge{display:inline-flex;align-items:center;gap:7px;background:rgba(4,20,28,.55);border:1px solid rgba(240,250,255,.3);backdrop-filter:blur(6px);padding:7px 13px;border-radius:999px;font-size:.8rem;font-weight:600} .badge .dot{width:8px;height:8px;border-radius:50%;background:var(--teal)} .hero h1{font-size:clamp(2.1rem,5.6vw,4rem);font-weight:800;max-width:22ch;margin:0} .hero h1 em{font-style:normal;color:var(--gold2)} .hero-display{font-family:var(--head);font-weight:800;font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1.05;margin-top:16px;color:#fff} .hero-display em{font-style:normal;color:var(--coral2)} .hero-sub{font-size:clamp(1.02rem,2.2vw,1.22rem);line-height:1.55;color:#dcedf5;max-width:58ch;margin:14px 0 24px} .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px} .hero-badges,.hero-proof{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.92rem;color:#c2dde9;margin-bottom:34px} .hero-badge{display:inline-flex;gap:7px;align-items:center} .hero-badge .check{color:var(--gold2)} /* date checker (homepage graft) */ .checker{position:relative;z-index:3;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:22px;margin-bottom:-58px} @media (prefers-color-scheme: light){.checker{background:#fff}} .checker h3{font-size:1.3rem;margin:0 0 4px;font-family:var(--head)} .checker p.sub{color:var(--muted);margin:0 0 16px;font-size:.95rem} .check-grid{display:grid;gap:12px} .field label{display:block;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:6px} .field input,.field select{width:100%;font-family:var(--body);font-size:1rem;padding:13px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg2);color:var(--ink)} .field input:focus,.field select:focus{outline:2px solid var(--gold);border-color:transparent} @media(min-width:820px){.check-grid{grid-template-columns:1.1fr 1fr 1fr auto;align-items:end}} .check-result{display:none;margin-top:16px;border-radius:14px;padding:14px 16px;font-size:.98rem;line-height:1.55} .check-result.show{display:block} .check-result.good{background:rgba(45,212,191,.13);border:1px solid rgba(45,212,191,.45)} .check-result.hot{background:rgba(163,230,53,.13);border:1px solid rgba(163,230,53,.55)} .check-result .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px} .check-result .btn{padding:11px 20px;font-size:.94rem} /* marquee */ .marquee{background:var(--gold);color:#03222e;overflow:hidden;padding:13px 0;transform:rotate(-1.1deg) scale(1.02)} .marquee.in-hero{margin-top:58px} .marquee-track{display:flex;gap:0;width:max-content;animation:scrollx 26s linear infinite;font-family:var(--head);font-weight:800;font-size:1.02rem;letter-spacing:.06em;white-space:nowrap} .marquee-track span{padding:0 14px} @keyframes scrollx{to{transform:translateX(-50%)}} @media (prefers-reduced-motion: reduce){.marquee-track{animation:none}.strip-rail{animation:none}} /* stats */ .stats-sec{padding:104px 0 6px} .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} @media(min-width:820px){.stats{grid-template-columns:repeat(4,1fr)}} .stat{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px} .stat b{font-family:var(--head);font-size:1.9rem;display:block;color:var(--gold-text)} .stat span{color:var(--muted);font-size:.94rem;line-height:1.45;display:block;margin-top:4px} /* ======================= PAGE HERO (service / city / blog) ======================= */ .page-hero{position:relative;overflow:hidden;background:#04141c;color:#f0faff;padding:104px 0 84px} .page-hero-bg{position:absolute;inset:0} .page-hero-bg video,.page-hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.55} .page-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,17,25,.55) 0%,rgba(3,17,25,.34) 40%,rgba(4,22,31,.94) 97%),linear-gradient(95deg,rgba(3,17,25,.88) 0%,rgba(3,17,25,.36) 62%)} .page-hero .container{position:relative;z-index:2} .page-hero-content{max-width:820px} .page-hero-seo{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold2);margin:0 0 16px} .page-hero-seo::before{content:"";width:26px;height:2px;background:var(--coral)} .page-hero-title{font-size:clamp(2.1rem,5.4vw,3.9rem);font-weight:800;margin:0;max-width:22ch} .page-hero-title em{font-style:normal;color:var(--gold2)} .page-hero-sub{font-size:clamp(1.02rem,2.2vw,1.22rem);line-height:1.55;color:#dcedf5;max-width:58ch;margin:16px 0 0} .page-hero-content .btn{margin-top:26px} .page-hero-content div[style*="display:flex"] .btn,.page-hero-content div[style*="display: flex"] .btn{margin-top:0} /* coastal strip → cyan band */ .coastal-strip{background:var(--gold);color:#03222e;overflow:hidden;padding:12px 0} .coastal-strip-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;width:min(1180px,100% - 40px);margin-inline:auto;font-family:var(--head);font-weight:800;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase} .strip-item{white-space:nowrap} .strip-dot{opacity:.55} /* ======================= FEATURE SECTIONS ======================= */ .beach-feature-inner,.about-main-grid{display:grid;gap:34px;align-items:center} @media(min-width:920px){.beach-feature-inner{grid-template-columns:1fr 1.1fr}.about-main-grid{grid-template-columns:1fr 1fr}} .beach-feature-visual img,.about-photo-col img{border-radius:22px;box-shadow:var(--shadow);width:100%;height:auto;display:block} .beach-feature-visual video{border-radius:22px;box-shadow:var(--shadow);width:100%;display:block} .features-list{display:grid;gap:14px} .feature-item{display:flex;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px} .feature-icon{width:48px;height:48px;flex:none;border-radius:14px;background:var(--bg2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1.35rem} .feature-text strong{display:block;font-family:var(--head);font-size:1.08rem;margin-bottom:4px;color:var(--ink)} .feature-text span{color:var(--muted);line-height:1.55;font-size:.97rem} /* event / occasion cards */ .events-grid,.city-events-grid{display:grid;gap:16px;margin-top:44px} @media(min-width:900px){.events-grid,.city-events-grid{grid-template-columns:repeat(3,1fr)}} .event-card,.city-evt-card{border-radius:22px;overflow:hidden;position:relative;min-height:380px;display:flex;align-items:flex-end;text-decoration:none;color:#fff;box-shadow:var(--shadow);background:#0c2a3a} .event-card img,.city-evt-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease} .event-card:hover img,.city-evt-card:hover img{transform:scale(1.05)} .event-card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(3,16,24,.9))} .event-card-content{position:relative;z-index:2;padding:24px} .event-card-tag{font-family:var(--hand);font-size:1.45rem;color:var(--gold2);display:block;margin-bottom:2px} .event-card-name{font-family:var(--head);font-size:1.6rem;font-weight:800;margin:0 0 6px} .event-card-content p{margin:0 0 10px;color:#d7edf6;line-height:1.55;font-size:.97rem} .event-card-cta{font-weight:700;color:var(--gold2);font-size:.95rem} /* ======================= PACKAGE CARDS ======================= */ .packages-grid{display:grid;gap:16px;align-items:stretch;margin-top:44px} @media(min-width:960px){.packages-grid{grid-template-columns:repeat(3,1fr)}} .pkg-card{background:var(--card);border:1.5px solid var(--line);border-radius:24px;padding:28px;display:flex;flex-direction:column;position:relative;color:var(--ink)} .pkg-card.featured{border-color:var(--gold);background:var(--card2);box-shadow:var(--shadow)} @media(min-width:960px){.pkg-card.featured{transform:translateY(-12px)}} .pkg-popular{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--coral-btn);color:#04222e;font-weight:800;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;border-radius:999px;white-space:nowrap} .pkg-name{font-family:var(--head);font-size:1.55rem;font-weight:800;margin:0} .pkg-tagline{color:var(--muted);margin:6px 0 0;line-height:1.5} .pkg-price{font-family:var(--head);font-weight:800;font-size:2.6rem;line-height:1;margin:14px 0 2px} .pkg-price small{font-size:1rem;font-weight:600;color:var(--faint);font-family:var(--body)} .pkg-duration{color:var(--gold-text);font-weight:700;margin:6px 0 16px} .pkg-features{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px} .pkg-features li{display:flex;gap:10px;line-height:1.45;font-size:.98rem;align-items:flex-start} .pkg-features .check{flex:none} .pkg-deposit{font-size:.83rem;color:var(--faint);text-align:center;margin-top:10px} .pkg-card .btn{margin-top:auto} /* ======================= GALLERY (gm) + LIGHTBOX ======================= */ .gallery-section{padding:84px 0} .gallery-header{width:min(1180px,100% - 40px);margin-inline:auto;text-align:center;margin-bottom:36px} .gallery-header .section-sub{margin-inline:auto} .gm-wrap{max-width:1440px;margin:0 auto;padding:0 20px} .gm-wall{--rh:250px;display:flex;flex-wrap:wrap;gap:10px;transition:opacity .2s ease} .gm-wall::after{content:"";flex-grow:1000000} .gm-item{position:relative;flex-grow:calc(var(--ar) * 100);flex-basis:calc(var(--ar) * var(--rh));overflow:hidden;border-radius:14px;cursor:zoom-in;background:linear-gradient(135deg,#0c2a3a,#11384d);transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s,opacity .6s ease} .gm-item::before{content:"";display:block;padding-bottom:calc(100% / var(--ar))} .gm-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.16,1,.3,1),filter .4s;filter:saturate(1.05)} .gm-item::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(248,250,255,.06);pointer-events:none} .gm-item:focus-visible{outline:3px solid var(--gold);outline-offset:3px} .gm-cap{position:absolute;left:10px;bottom:10px;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .4s cubic-bezier(.16,1,.3,1)} .gm-cap span{display:inline-flex;align-items:center;gap:.4rem;font:700 .6rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(8,15,26,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:.45rem .7rem;border-radius:50px} .gm-cap span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,var(--gold))} @media(hover:hover){ .gm-item:hover{transform:translateY(-4px);box-shadow:0 22px 44px -16px rgba(0,217,255,.45),0 0 0 2px rgba(0,217,255,.35)} .gm-item:hover img{transform:scale(1.06);filter:saturate(1.2) brightness(1.04)} .gm-item:hover .gm-cap,.gm-item:focus-visible .gm-cap{opacity:1;transform:none} } .gm-js .gm-item{opacity:0;transform:translateY(22px) scale(.98)} .gm-js .gm-item.gm-in{opacity:1;transform:none} .gm-js .gm-item.gm-in:hover{transform:translateY(-4px)} @media(max-width:1024px){.gm-wall{--rh:220px}} @media(max-width:640px){.gm-wrap{padding:0 12px}.gm-wall{--rh:112px;gap:6px}.gm-item{border-radius:10px}} @media(max-width:400px){.gm-wall{--rh:104px}} @media(prefers-reduced-motion:reduce){.gm-js .gm-item{opacity:1;transform:none}.gm-item,.gm-item img,.gm-wall{transition:none}} .lightbox{position:fixed;inset:0;z-index:300;background:rgba(3,14,20,.94);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center} .lightbox.open{display:flex} .lightbox-img{max-width:min(92vw,1100px);max-height:84vh;border-radius:14px;box-shadow:var(--shadow)} .lightbox-close,.lightbox-nav{position:absolute;background:rgba(17,56,77,.85);color:#f0faff;border:1px solid rgba(240,250,255,.3);width:48px;height:48px;border-radius:50%;font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center} .lightbox-close{top:18px;right:18px} .lightbox-prev{left:14px;top:50%;transform:translateY(-50%)} .lightbox-next{right:14px;top:50%;transform:translateY(-50%)} .lightbox-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#c2dde9;font-weight:600;font-size:.9rem} /* ======================= FAQ ======================= */ .faq-list,.faq-section .container>.faq-item{max-width:820px} .faq-list{display:grid;gap:10px} .faq-item{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:10px} .faq-q{width:100%;background:none;border:0;color:var(--ink);font-family:var(--body);font-weight:700;font-size:1.02rem;text-align:left;padding:18px 20px;cursor:pointer;display:flex;justify-content:space-between;gap:14px;align-items:center} .faq-icon{color:var(--coral);font-size:1.3rem;transition:transform .2s;flex:none;font-style:normal} .faq-item.open .faq-icon{transform:rotate(45deg)} .faq-a{display:none;padding:0 20px 18px;color:var(--muted);line-height:1.6} .faq-item.open .faq-a{display:block} .faq-a p{margin:0 0 10px} .faq-a a{color:var(--gold-text);font-weight:600} /* ======================= CITIES ======================= */ .cities-grid{display:grid;gap:10px} @media(min-width:640px){.cities-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.cities-grid{grid-template-columns:repeat(4,1fr)}} .city-card{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:16px;padding:18px;text-decoration:none;background:var(--card);transition:border-color .18s,background .18s} .city-card:hover{border-color:var(--gold)} .city-icon{font-size:1.5rem;line-height:1} .city-name{font-family:var(--head);font-weight:800;font-size:1.12rem;color:var(--ink)} .city-sub{color:var(--muted);font-size:.9rem;line-height:1.45} .city-arrow{margin-left:auto;color:var(--gold-text);font-weight:700} .city-related-grid,.related-cities{display:grid;gap:10px;margin-top:26px} @media(min-width:640px){.city-related-grid,.related-cities{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.city-related-grid,.related-cities{grid-template-columns:repeat(4,1fr)}} .related-city-card{display:block;border:1px solid var(--line);border-radius:16px;padding:16px 18px;text-decoration:none;background:var(--card);font-weight:700;transition:border-color .18s} .related-city-card:hover{border-color:var(--gold);color:var(--gold-text)} .venue-pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px} .venue-pill{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 15px;font-size:.9rem;font-weight:600;color:var(--muted)} /* ======================= CTA ======================= */ .cta-section{padding:84px 0} .cta-inner{position:relative;border-radius:28px;overflow:hidden;background:#071e2a;color:#f0faff;padding:52px 34px;box-shadow:var(--shadow)} .cta-inner::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 15% 0%,rgba(0,217,255,.26),transparent 60%),radial-gradient(600px 320px at 88% 100%,rgba(163,230,53,.28),transparent 60%)} .cta-inner>*{position:relative} .cta-text h2{font-size:clamp(2.1rem,6vw,3.4rem);margin:0 0 14px;max-width:20ch} .cta-text h2 em{font-style:normal;color:var(--gold2)} .cta-text p{color:#c4e2ee;max-width:52ch;line-height:1.6;margin:0} .cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} /* ======================= REVIEWS ======================= */ .reviews-grid{display:grid;gap:14px} @media(min-width:900px){.reviews-grid{grid-template-columns:repeat(3,1fr)}} .review-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column} .review-text{line-height:1.6;font-size:1.02rem;margin:0 0 14px;flex:1} .review-author{color:var(--faint);font-size:.9rem;font-weight:600;margin:0} .review-author .review-event{color:var(--faint)} .elfsight-wrapper{margin-top:26px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px} /* ======================= STEPS / WHY ======================= */ .hiw-steps{display:grid;gap:14px;counter-reset:step;margin-top:44px} @media(min-width:900px){.hiw-steps{grid-template-columns:repeat(3,1fr)}} .hiw-step{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px} .hiw-num{font-family:var(--head);font-weight:800;font-size:2.6rem;color:transparent;-webkit-text-stroke:1.6px var(--gold)} .hiw-step-emoji{font-size:1.8rem} .hiw-step h3{font-size:1.35rem;margin:10px 0 8px} .hiw-step p{color:var(--muted);line-height:1.6;margin:0} .why-grid{display:grid;gap:14px;margin-top:44px} @media(min-width:700px){.why-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1020px){.why-grid{grid-template-columns:repeat(4,1fr)}} .why-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px} .why-icon{width:48px;height:48px;border-radius:14px;background:var(--bg2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1.35rem;margin-bottom:16px} .why-card h3{font-size:1.22rem;margin:0 0 8px} .why-card p{color:var(--muted);line-height:1.6;margin:0;font-size:.97rem} /* ======================= BLOG ======================= */ .blog-search-wrap{max-width:620px;margin:0 auto 36px} .blog-search{display:flex;align-items:center;gap:10px;background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:6px 6px 6px 18px} .blog-search-input{flex:1;background:none;border:0;color:var(--ink);font-family:var(--body);font-size:1rem;outline:none} .blog-search-clear{background:var(--bg2);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:9px 16px;font-weight:700;cursor:pointer;font-family:var(--body)} .blog-search-count{color:var(--faint);font-size:.9rem} .blog-grid{display:grid;gap:20px} @media(min-width:700px){.blog-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1020px){.blog-grid{grid-template-columns:repeat(3,1fr)}} .blog-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;text-decoration:none;transition:transform .25s,box-shadow .25s} .blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .blog-card-img{aspect-ratio:16/9;overflow:hidden;background:var(--bg2)} .blog-card-img img{width:100%;height:100%;object-fit:cover;display:block} .blog-card-body{padding:20px 22px} .blog-card-tag{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text);margin-bottom:8px} .blog-card-body h3{font-size:1.22rem;margin:0 0 8px;color:var(--ink)} .blog-card-body p{color:var(--muted);font-size:.95rem;line-height:1.55;margin:0 0 10px} .blog-card-meta{color:var(--faint);font-size:.83rem;display:flex;gap:12px;flex-wrap:wrap} .blog-card-arrow{color:var(--gold-text);font-weight:700} /* single post */ .blog-post-grid{display:grid;gap:40px} @media(min-width:1000px){.blog-post-grid{grid-template-columns:minmax(0,1fr) 320px}} .blog-post-grid article{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:clamp(22px,4vw,44px);min-width:0} .blog-post-grid article h2{font-size:clamp(1.5rem,3vw,2rem);margin:34px 0 12px} .blog-post-grid article h3{font-size:1.25rem;margin:26px 0 10px} .blog-post-grid article p{color:var(--muted);line-height:1.75;margin:0 0 18px} .blog-post-grid article p b,.blog-post-grid article p strong{color:var(--ink)} .blog-post-grid article ul,.blog-post-grid article ol{color:var(--muted);line-height:1.7;margin:0 0 18px;padding-left:22px;display:grid;gap:8px} .blog-post-grid article img{border-radius:16px;margin:8px 0} .blog-post-grid article a{color:var(--gold-text);font-weight:600} .blog-post-grid article blockquote{border-left:3px solid var(--gold);padding:6px 0 6px 18px;color:var(--ink);font-size:1.1rem;margin:24px 0} .blog-post-sidebar{display:grid;gap:16px;align-content:start} .blog-post-sidebar .blog-card{font-size:.9rem} /* ======================= CONTACT ======================= */ .contact-main-grid{display:grid;gap:36px} @media(min-width:960px){.contact-main-grid{grid-template-columns:1fr 1.1fr}} .contact-info-item,.who-item{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:12px} .contact-info-item b,.who-item b{display:block;font-family:var(--head);margin-bottom:3px} .contact-info-item a,.who-item a{color:var(--gold-text);font-weight:600;text-decoration:none} .contact-form-wrap{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px;min-height:420px} .cc-embed iframe{width:100%;border:0;border-radius:12px;min-height:640px} .sk{border-radius:12px;background:linear-gradient(90deg,var(--card2),var(--bg2));animation:skp 1.4s ease-in-out infinite} @keyframes skp{50%{opacity:.55}} /* ======================= PRICING EXTRAS ======================= */ .ao-pkg-tabs{display:flex;gap:10px;margin-bottom:2rem;flex-wrap:wrap} .ao-tab{font-family:var(--body);font-size:.85rem;font-weight:700;padding:9px 20px;border-radius:50px;border:1.5px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;transition:all .18s} .ao-tab:hover{border-color:var(--gold);color:var(--ink)} .ao-tab.active-selfie{background:rgba(163,230,53,.12);border-color:var(--coral);color:var(--coral2)} .ao-tab.active-party{background:rgba(0,217,255,.12);border-color:var(--gold);color:var(--gold2)} .ao-tab.active-vip{background:rgba(141,240,255,.08);border-color:var(--gold2);color:var(--gold2)} .ao-panel{display:none} .ao-panel.visible{display:block} .ao-grid{display:grid;gap:14px} @media(min-width:820px){.ao-grid{grid-template-columns:repeat(2,1fr)}} .ao-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px} .ao-card-top{display:flex;gap:12px;align-items:center;margin-bottom:8px} .ao-chip-icon{width:40px;height:40px;flex:none;border-radius:12px;background:var(--bg2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center} .ao-card-name{font-family:var(--head);font-weight:800;font-size:1.05rem} .ao-card-desc{color:var(--muted);font-size:.93rem;line-height:1.55;margin:0 0 10px} .ao-card-cost{font-family:var(--head);font-weight:800;font-size:1.35rem;color:var(--gold-text)} .ao-section-label{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:26px 0 12px} .ao-na-note{color:var(--muted);font-size:.9rem} .bd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;border-radius:20px;overflow:hidden} @media(min-width:820px){.bd-grid{grid-template-columns:repeat(5,1fr)}} .bd-card{position:relative;overflow:hidden;aspect-ratio:1/1;cursor:pointer} .bd-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s} .bd-card:hover img{transform:scale(1.07)} .bd-lightbox{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;background:rgba(3,14,20,.93)} .bd-lightbox.open{display:flex} .bd-lb-inner{position:relative;max-width:520px;width:88%;border-radius:20px;overflow:hidden} .bd-lb-inner img{width:100%;display:block} .bd-lb-close{position:absolute;top:10px;right:10px;background:rgba(6,24,32,.8);color:#fff;border:1px solid var(--line);width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:1.2rem} .bd-lb-info{padding:16px 18px;background:#0c2a3a;color:#eaf7fd} .bd-lb-name{font-family:var(--head);font-weight:800;font-size:1.15rem} .bd-lb-desc{color:#b7d9e6;font-size:.93rem;margin-top:4px;line-height:1.5} .bd-lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(6,24,32,.8);color:#fff;border:1px solid var(--line);width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:1.2rem} .bd-lb-prev{left:10px}.bd-lb-next{right:10px} /* ======================= MILITARY / GLAM / CORPORATE FAMILIES ======================= */ .mil-hero,.gb-hero{position:relative;overflow:hidden;background:#04141c;color:#f0faff;padding:96px 0 80px;border-radius:0} .mil-hero-inner{max-width:820px} .mil-hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold2)} .mil-hero h1,.gb-hero h1{font-size:clamp(2rem,5vw,3.6rem);margin:14px 0 12px} .mil-hero-sub{color:#dcedf5;line-height:1.6;max-width:60ch} .mil-hero-stats{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:22px} .mil-stat b{font-family:var(--head);font-size:1.6rem;color:var(--gold2);display:block} .mil-stat span{color:#c2dde9;font-size:.9rem} .mil-event-card,.gb-backdrop-card,.gb-look-card{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden} .mil-event-img{aspect-ratio:16/10;overflow:hidden} .mil-event-img img,.gb-backdrop-img img,.gb-look-img-wrap img{width:100%;height:100%;object-fit:cover;display:block} .mil-event-body,.gb-backdrop-body,.gb-look-body{padding:20px 22px} .mil-event-tag,.gb-backdrop-tag,.gb-look-badge{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text);margin-bottom:8px} .mil-events-grid,.gb-backdrop-grid,.gb-look-grid{display:grid;gap:18px;margin-top:36px} @media(min-width:820px){.mil-events-grid,.gb-backdrop-grid{grid-template-columns:repeat(3,1fr)}.gb-look-grid{grid-template-columns:repeat(3,1fr)}} .discount-section{background:#06222f;border:1px solid var(--line);border-radius:24px;padding:36px;margin-top:44px} .discount-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(163,230,53,.12);border:1.5px solid var(--coral);color:var(--coral2);font-weight:800;padding:8px 16px;border-radius:999px;font-size:.85rem;margin-bottom:14px} .discount-body p{color:#c4e2ee;line-height:1.65;margin:0 0 14px} .promo-code{display:inline-flex;gap:10px;align-items:center;background:rgba(0,217,255,.1);border:1.5px dashed var(--gold);border-radius:14px;padding:10px 18px;margin-top:6px} .promo-code-value{font-family:var(--head);font-weight:800;font-size:1.3rem;color:var(--gold2);letter-spacing:.08em} /* branded (corporate) */ .branded-inner{display:grid;gap:30px;align-items:center} @media(min-width:920px){.branded-inner{grid-template-columns:1fr 1fr}} .branded-eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)} .branded-title{font-size:clamp(1.9rem,4.4vw,3rem);margin:12px 0} .branded-desc{color:var(--muted);line-height:1.65} .branded-features{display:grid;gap:12px;margin-top:22px} .branded-feature{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px} .branded-feature-num{font-family:var(--head);font-weight:800;font-size:1.5rem;color:var(--gold-text);flex:none} .branded-feature-title{font-weight:800;font-family:var(--head)} .branded-feature-desc{color:var(--muted);font-size:.94rem;line-height:1.55} .branded-photo-frame img{border-radius:22px;box-shadow:var(--shadow);width:100%} .branded-cta{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px} /* glam guide */ .gb-guide-grid{display:grid;gap:14px;margin-top:36px} @media(min-width:820px){.gb-guide-grid{grid-template-columns:repeat(3,1fr)}} .gb-guide-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px} .gb-guide-emoji{font-size:1.7rem} .gb-guide-card h3{margin:10px 0 8px} .gb-guide-card p{color:var(--muted);line-height:1.6;margin:0} .gb-callout{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;margin-top:22px} .gb-callout p{color:var(--muted);line-height:1.65;margin:0} .gb-cta-section .gb-cta-inner,.gb-cta-inner{position:relative;border-radius:28px;background:#071e2a;padding:52px 34px;text-align:center;overflow:hidden} .gb-backdrop-words{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} /* city pages */ .city-intro-section .container,.city-events-section .container{max-width:min(1180px,100% - 40px)} /* ======================= MAP / MISC ======================= */ section iframe[title*="Virginia Beach"]{border:0;border-radius:22px;width:100%;height:320px;display:block;box-shadow:var(--shadow)} .float-icon,.float-text{display:none} .wave-anim,.wave-anim-1,.wave-anim-2,.wave-anim-3{display:none} /* ======================= 404 ======================= */ .nf-wrap{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 20px;background:#04141c;color:#f0faff} .nf-eyebrow{font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold2)} .nf-wrap h1{font-size:clamp(2.4rem,7vw,4.5rem);margin:16px 0 12px} .nf-wrap p{color:#c2dde9;max-width:52ch;line-height:1.6} .nf-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px} .nf-brand{margin-top:40px;color:#84a9ba;font-size:.9rem} /* ======================= GENERIC CONTENT ======================= */ main p,main li{line-height:1.65} main h2 em{font-style:normal;color:var(--gold-text)} table{width:100%;border-collapse:collapse;margin:18px 0;background:var(--card);border-radius:16px;overflow:hidden} th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line)} th{font-family:var(--head);color:var(--ink)} td{color:var(--muted)} hr{border:0;border-top:1px solid var(--line);margin:30px 0} /* testimonial sliders / misc grids */ .testimonials-grid{display:grid;gap:14px;margin-top:36px} @media(min-width:900px){.testimonials-grid{grid-template-columns:repeat(3,1fr)}} .faq-layout{display:grid;gap:30px} @media(min-width:1000px){.faq-layout{grid-template-columns:320px minmax(0,1fr)}} .faq-sticky{position:sticky;top:110px;align-self:start} /* small helpers */ .delay-1,.delay-2,.delay-3,.delay-4{animation-delay:.12s} /* ——— QA fixes (round 1) ——— */ /* /gallery/ page: its own kept CSS gives the section a dark base in both schemes */ body[data-page="gallery"] .gallery-section .section-title{color:#f0faff} body[data-page="gallery"] .gallery-section .section-title em{color:var(--gold2)} body[data-page="gallery"] .gallery-section .section-tag{color:var(--gold2)!important} body[data-page="gallery"] .gallery-section .section-sub{color:#b7d9e6} /* pricing featured (Party) card carries a light inline background in both schemes */ .pkg-card.featured .pkg-tagline{color:#3c5c6a!important} .pkg-card.featured .pkg-deposit{color:#5b7c8a!important} /* homepage hero: the badge belongs in the badges row (its legacy absolute positioning collides with the H1 on mobile) */ .hero .military-badge{position:static} /* ——— QA fixes (round 2) ——— */ /* beach-feature visual must be a positioned frame (glam's img is absolute inline) */ .beach-feature-visual{position:relative;border-radius:22px;overflow:hidden} .beach-feature-visual:has(> img[style*="position:absolute"]){min-height:520px;height:100%} /* military hero — ported from the page's own design block (removed with the old base) */ .mil-hero{min-height:90vh;position:relative;display:flex;align-items:flex-end;background:#04141c;padding:0} .mil-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .mil-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.58;filter:saturate(1.15) contrast(1.05)} .mil-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(8,15,26,.92) 0%,rgba(8,15,26,.5) 50%,rgba(8,15,26,.12) 100%)} .mil-hero-inner{position:relative;z-index:2;width:min(1280px,100% - 40px);margin:0 auto;padding:7rem 0 6rem;max-width:none} .mil-hero-eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2);margin-bottom:1.2rem;background:rgba(0,217,255,.1);border:1px solid rgba(0,217,255,.3);padding:.35rem 1rem;border-radius:50px} .mil-hero h1{font-family:var(--head);font-size:clamp(2.8rem,5.5vw,5.5rem);font-weight:800;line-height:1.05;color:#fff;margin:0 0 1.4rem;letter-spacing:-.025em;max-width:14ch} .mil-hero h1 em{font-style:italic;color:var(--gold2);display:block} .mil-hero-sub{font-size:1.1rem;color:rgba(248,250,255,.82);line-height:1.8;max-width:50ch;margin:0 0 2.5rem} .mil-hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:3rem} .mil-hero-stats{display:flex;gap:3rem;flex-wrap:wrap;border-top:1px solid rgba(0,217,255,.25);padding-top:2rem} .mil-stat strong{font-family:var(--head);font-size:2rem;color:var(--gold2);display:block;line-height:1.1} .mil-stat span{color:rgba(248,250,255,.75);font-size:.9rem} .mil-gallery-grid{display:grid;gap:10px;margin-top:36px} @media(min-width:700px){.mil-gallery-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1020px){.mil-gallery-grid{grid-template-columns:repeat(4,1fr)}} .mil-gallery-grid img{width:100%;height:100%;object-fit:cover;border-radius:14px;display:block} .mil-cta-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px} /* mobile nav: keep logo + Book Now + hamburger inside the viewport */ @media(max-width:560px){ .nav{gap:10px} .nav-logo img{height:33px} .nav-actions{flex:none} .nav-book{padding:9px 14px;font-size:.88rem} } /* wide tables inside blog articles scroll within the card instead of stretching the page */ .blog-post-grid article table{display:block;overflow-x:auto;max-width:100%} .blog-post-grid article{overflow-wrap:break-word} /* ——— QA fixes (round 3) ——— */ /* blog posts: force single column below desktop (a kept page block re-imposes 2 cols) */ @media(max-width:999px){.blog-post-grid{grid-template-columns:minmax(0,1fr)!important}.blog-post-sidebar{position:static}} /* near-me comparison grid: stack the package columns on phones */ @media(max-width:700px){body[data-page="near-me"] div[style*="grid-template-columns"]{grid-template-columns:1fr!important}} /* === QA round 3: contrast reconciliation (dark-in-both-schemes components + navy bands) === */ .pkg-card.featured{background:#0d2f42;color:#f0faff} .pkg-card.featured .pkg-tagline{color:#b7d9e6!important} .pkg-card.featured .pkg-deposit{color:#a9c6d4!important} .pkg-card.featured .pkg-features li{color:#d7ecf4!important} .pkg-card.featured .btn{background:var(--lime)!important;color:#12303f!important} .pkg-popular{background:#c22e12!important} .ao-card{background:#0e2c3e;color:#e8f6fb} .ao-tab{color:#b7d9e6} .ao-section-label{color:#8fb8c9} .ao-na-note{color:#b7d9e6} .city-evt-card{background:#ffffff;color:#072633} .related-city-card{background:#ffffff;color:#072633} .related-city-card span[style*="rgba(8,15,26,0.5)"]{color:#5a646e!important} section[style*="--navy"] .section-title.light,.gb-cta-section .section-title.light{color:#f0faff} section[style*="--navy"] .section-title.light em,.gb-cta-section .section-title.light em{color:#8df0ff} section[style*="--navy"] .section-tag.light,section[style*="--navy"] .section-tag{color:#8df0ff} section[style*="--navy"] .section-sub.light,section[style*="--navy"] .section-sub{color:#b7d9e6} .slide-left .feature-item{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#d7ecf4} .slide-left .feature-item strong,.slide-left .feature-text strong{color:#ffffff} .btn-ghost-white{background:rgba(6,24,32,.5)} @media (prefers-color-scheme: light){ .pkg-card[style*="background"] [style*="--ocean"]{color:#57c8e8!important} a[style*="color:var(--electric)"]{color:#007d93!important} p[style*="color:rgba(248,250,255,0.75)"]{color:#3c5c6a!important} } /* === QA round 4: contrast reconciliation (cont.) === */ .pkg-card.featured .pkg-name{color:#ff9d85!important} .pkg-card.featured .pkg-duration{color:#8df0ff!important} .pkg-popular{color:#ffffff!important} .ao-card-desc{color:#b7d9e6} .btn-ghost-white{background:rgba(6,24,32,.55)!important} span[style*="color:rgba(248,250,255,0.45)"]{color:#9fc3d4!important} section[style*="background:var(--dark"] .section-title.light{color:#f0faff} section[style*="background:var(--dark"] .section-title.light em{color:#8df0ff} section[style*="background:var(--dark"] .section-tag,section[style*="background:var(--dark"] .section-tag.light{color:#8df0ff!important} section[style*="background:var(--dark"] .section-sub,section[style*="background:var(--dark"] .section-sub.light{color:#b7d9e6} section[style*="--navy"] .section-tag,section[style*="--navy"] .section-tag.light{color:#8df0ff!important} section[style*="--navy"] .section-title.light em{color:#8df0ff} .btn-ghost-white{background:rgba(6,24,32,.68)!important} /* === QA round 5: dark-scheme reconciliation (pale sections + dark-inline card texts) === */ @media (prefers-color-scheme: dark){ section[style*="background:var(--white"] .section-title,section[style*="background:var(--off-white"] .section-title,section[style*="background:#f4f7fb"] .section-title, section[style*="background:var(--white"] .section-title.light,section[style*="background:var(--off-white"] .section-title.light,section[style*="background:#f4f7fb"] .section-title.light{color:#072633} section[style*="background:var(--white"] .section-title em,section[style*="background:var(--off-white"] .section-title em,section[style*="background:#f4f7fb"] .section-title em{color:#007d93} section[style*="background:var(--white"] .section-tag,section[style*="background:var(--off-white"] .section-tag,section[style*="background:#f4f7fb"] .section-tag{color:#006a7d!important} section[style*="background:var(--white"] .section-sub,section[style*="background:var(--off-white"] .section-sub,section[style*="background:#f4f7fb"] .section-sub{color:#3c5c6a} section[style*="background:var(--white"] .section-sub a,section[style*="background:var(--off-white"] .section-sub a,section[style*="background:#f4f7fb"] .section-sub a{color:#007d93} .section-sub a{color:#8df0ff!important} .pkg-card [style*="color:var(--dark)"]{color:#f0faff!important} .pkg-card [style*="color:rgba(8,15,26"]{color:#b7d9e6!important} .contact-form-wrap{background:#ffffff;color:#072633} section[style*="background:var(--white"] .btn-ghost,section[style*="background:var(--off-white"] .btn-ghost,section[style*="background:#f4f7fb"] .btn-ghost{color:#072633;border-color:rgba(7,38,51,.4)} section[style*="background:var(--white"] .section-sub a,section[style*="background:var(--off-white"] .section-sub a,section[style*="background:#f4f7fb"] .section-sub a{color:#007d93!important} a.pkg-card [style*="color:#0A5C7A"]{color:#8df0ff!important} } @media (prefers-color-scheme: dark){ section[style*="background:var(--white"] .btn-ghost,section[style*="background:var(--off-white"] .btn-ghost,section[style*="background:#f4f7fb"] .btn-ghost{color:#072633!important} } /* === QA round 6: blog article package-comparison grids stack on phones === */ @media(max-width:700px){.blog-post-grid article div[style*="grid-template-columns"]{grid-template-columns:1fr!important}} .mil-hero .btn-ghost{color:#f0faff!important;border-color:rgba(240,250,255,.45)} /* ============================================================ MOBILE OPTIMIZATION PASS — 2026-10-14 (owner iPhone review) 1) Mobile menu panel: #mobileMenu is a sibling AFTER the sticky .nav-wrap in document flow, so after scrolling it opened at the top of the document (invisible) while body scroll locked. Pin it beneath the sticky header (measured height: 69px). 2) Checker: prevent grid blowout; iOS Safari's native date input ignores width constraints and broke out of the card — render it as a standard field on small screens so it matches the selects exactly. Desktop checker bar untouched. 3) Sticky call bar: respect the iPhone safe-area inset. 4) Chat button/window: the injected #sandy-btn sat on top of the call bar's Book Now button. Raise both above the bar on mobile (script styles use bare #id selectors; body #id wins). 5) Tap targets under 44px on mobile. 6) Spacing: legal pages carry an inline padding-top:10rem (160px) that leaves an off-rhythm void under the header on phones — normalize to the site's standard 84px section rhythm. ============================================================ */ @media (max-width:919px){ .mobile-menu{position:fixed;top:69px;left:0;right:0;z-index:96;max-height:calc(100dvh - 69px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:20px;box-shadow:0 34px 44px rgba(0,10,18,.45)} .mobile-menu .mobile-main{font-size:1rem;line-height:1.35;min-height:46px} .mobile-sub{font-size:.94rem;min-height:44px;padding-top:9px;padding-bottom:9px} .mobile-cta{flex-direction:column;gap:8px;margin-top:12px} .mobile-cta .btn{flex:none;width:100%;min-height:46px;padding:12px 18px;font-size:.95rem} body #sandy-btn{transition:transform .2s,box-shadow .2s,opacity .2s} body:has(.mobile-menu.open) #sandy-btn{opacity:0!important;pointer-events:none} body #sandy-btn{bottom:calc(80px + env(safe-area-inset-bottom, 0px))} body #sandy-win{bottom:calc(150px + env(safe-area-inset-bottom, 0px));max-height:min(540px, calc(100dvh - 168px))} body #sandy-close{min-width:40px;min-height:40px;padding:8px} body .s-prompt{padding-top:13px;padding-bottom:13px} .nav-book{padding:15px 20px} .ao-tab{min-height:44px} button.faq-question{min-height:44px} #smsOptIn{width:24px;height:24px} .section-pad[style*="padding-top:10rem"]{padding-top:84px!important} } @media (min-width:920px){.mobile-menu{display:none}} .field{min-width:0} .field input,.field select{min-width:0;max-width:100%} @media (max-width:819px){ .check-grid{grid-template-columns:minmax(0,1fr)} .field input[type="date"]{-webkit-appearance:none;appearance:none;text-align:left;min-height:50px} .field input[type="date"]::-webkit-date-and-time-value{text-align:left} } .callbar{bottom:max(12px, env(safe-area-inset-bottom, 0px))} /* === Homepage portfolio as photo prints (owner request, mockup treatment) === Homepage only (body[data-page="home"]): the portfolio wall becomes a set of photo prints — white frame, photo inset, handwritten Caveat caption on the print's bottom border, alternating slight rotation, straighten on hover. Same photos, order, captions, alts and lightbox — presentation only. */ body[data-page="home"] .gm-item{background:#fff;border-radius:6px;box-shadow:0 16px 34px rgba(0,0,0,.35)} body[data-page="home"] .gm-item::before{padding-bottom:calc(100% / var(--ar) + 34px)} body[data-page="home"] .gm-item img{top:10px;right:10px;bottom:44px;left:10px;width:auto;height:auto;border-radius:3px} body[data-page="home"] .gm-item::after{box-shadow:inset 0 0 0 1px rgba(7,38,51,.08)} body[data-page="home"] .gm-item:nth-child(odd){transform:rotate(-1.5deg)} body[data-page="home"] .gm-item:nth-child(even){transform:rotate(1.3deg)} body[data-page="home"] .gm-cap{position:absolute;left:0;right:0;bottom:0;height:44px;display:flex;align-items:center;justify-content:center;opacity:1;transform:none} body[data-page="home"] .gm-cap span{font-family:var(--hand);font-size:1.35rem;font-weight:600;letter-spacing:0;text-transform:none;color:#26343d;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;border-radius:0} body[data-page="home"] .gm-cap span::before{display:none} @media (hover:hover){ body[data-page="home"] .gm-item:hover{box-shadow:0 26px 44px rgba(0,0,0,.45)} body[data-page="home"] .gm-item:hover img{transform:none;filter:saturate(1.08)} } @media(max-width:640px){ body[data-page="home"] .gm-item:nth-child(odd){transform:rotate(-1deg)} body[data-page="home"] .gm-item:nth-child(even){transform:rotate(.9deg)} body[data-page="home"] .gm-cap span{font-size:1.15rem} } @media(prefers-reduced-motion:reduce){ body[data-page="home"] .gm-item:nth-child(odd),body[data-page="home"] .gm-item:nth-child(even){transform:none} } /* ═══ Fix Round 2 (2026-10-14) ═══ 1) Global lightbox: the inline script toggles .active (its .active{display:flex} rule lived in styles.min.css, whose only link is inside