/* ============================================================ STYLES.CSS — Charleston Crab Shacks Global Stylesheet Site: crabshacks.com TABLE OF CONTENTS ----------------- 1. Reset & CSS Custom Properties (Root Variables) 2. Utility Classes (visually-hidden, skip-link) 3. Base Styles (body, img, a) 4. Hero Section (3-slide layout) 5. Hero Slides (backgrounds, overlays, content) 6. Hero Pagination Dots 7. Hero Scroll Hint 8. Nav — Main Sticky Navigation Bar 9. Locations Section (2-column grid) 10. Slide CTA Button 11. Find Us / Hours (teal section) 12. CTA Heading Section (teal continuation) 13. Parallax Image Section 14. Body Content Section (amber/sand) 15. FAQ Section (accordion, wave columns) 16. FAQ View More Button 17. FAQ CTA Transition Section 18. Photo Carousel 19. Double Image Section 20. Badge Marquee Band (yellow scrolling bar) 21. Featured In Section (press logos) 22. Hamburger Icon (CSS bars) 23. Menu Panel (slide-in navigation) 24. Menu Accordion (Menus / Locations) 25. Location Quick Links (hamburger panel) 26. Responsive Breakpoints 27. Menu Modal (Elfsight widget overlay) 28. Elfsight Widget CSS Overrides (brand colors) 29. Nav Location Bar (desktop secondary strip) 30. Footer (4-column grid, bottom bar) ============================================================ */ /* ─── RESET & ROOT ──────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --teal: #00888e; --amber: #fbaa26; --white: #ffffff; --cream: #f5ede0; --black: #0d1a1b; --font-heading: 'Lora', Georgia, serif; --font-body: 'Source Sans 3', 'Myriad Pro', Arial, sans-serif; --nav-h: 72px; } html { scroll-behavior: smooth; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -40px; left: 0; background: var(--teal); color: var(--white); padding: 8px 16px; font-size: 14px; z-index: 9999; transition: top 0.2s; } .skip-link:focus { top: 0; } body { font-family: var(--font-body); background: var(--white); color: var(--black); overflow-x: hidden; } img { display: block; max-width: 100%; } a { text-decoration: none; color: inherit; } /* ══════════════════════════════════════════════════════ PHASE 1 — HERO Exactly 100vh. No nav visible. Only background image, large logo, and scroll hint. ─ At scrollY=0 the next element (sticky nav) sits at exactly 100vh = just off the bottom of the screen. ══════════════════════════════════════════════════════ */ .hero { position: relative; width: 100%; height: 100vh; min-height: 560px; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* ══════════════════════════════════════════════════════ HERO — 3 full-height slides stacked vertically Scroll through them one by one, RR-style. Nav bar sits as next sibling after the hero wrapper. ══════════════════════════════════════════════════════ */ /* Override: hero is no longer a single 100vh section — it's a wrapper containing 3 × 100vh slides */ .hero { position: relative; width: 100%; /* Height is auto — 3 slides each 100vh tall */ height: auto; min-height: unset; display: block; overflow: visible; } /* Each individual slide — exactly 100vh */ .hero-slide { position: relative; width: 100%; height: 100vh; min-height: 560px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .slide-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; background-color: #0d2426; background-attachment: fixed; } /* ── Hero slide backgrounds: WebP with JPG fallback ────────── CSS image-set() serves WebP to modern browsers automatically; older browsers fall back to the url() declaration above it. The cascade order matters: image-set() must come AFTER url(). ─────────────────────────────────────────────────────────── */ .slide-bg--hero { background-image: url('/images/hero-bg.webp'); background-image: image-set( url('/images/hero-bg.webp') type('image/webp'), url('/images/hero-bg.jpg') type('image/jpeg') ); } .slide-bg--slide2 { background-image: url('/images/hero-slide-2.webp'); background-image: image-set( url('/images/hero-slide-2.webp') type('image/webp'), url('/images/hero-slide-2.jpg') type('image/jpeg') ); } .slide-bg--slide3 { background-image: url('/images/hero-slide-3.webp'); background-image: image-set( url('/images/hero-slide-3.webp') type('image/webp'), url('/images/hero-slide-3.jpg') type('image/jpeg') ); } /* ── Slide 1 hero image: real for a reliable LCP candidate ── Replaces slide 1's CSS background so Chrome has an eligible Largest Contentful Paint element (a viewport-filling CSS background is treated as page background and ignored for LCP). Mirrors .slide-bg positioning/z-index/base colour; slides 2 & 3 keep .slide-bg. ── */ .slide-bg-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; background-color: #0d2426; } .slide-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( to bottom, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.28) 65%, rgba(0,0,0,0.55) 100% ); } /* Slides 2–3: darker overlay + vignette so hero copy reads on busy photos */ .slide-overlay--readable { background: radial-gradient( ellipse 100% 70% at 50% 48%, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.35) 52%, transparent 72% ), linear-gradient( to bottom, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.52) 45%, rgba(0, 0, 0, 0.78) 100% ); } /* Slide inner content (text on slides 2+) */ .slide-content { position: relative; z-index: 2; text-align: center; color: var(--white); padding: 0 40px; } .slide-content .slide-eyebrow { font-family: var(--font-body); font-size: 19px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--white); margin-bottom: 20px; text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 14px rgba(0,0,0,0.55); } .slide-content .slide-title { font-family: var(--font-heading); font-size: clamp(48px, 7vw, 96px); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; text-shadow: 0 2px 4px rgba(0,0,0,0.55), 0 6px 32px rgba(0,0,0,0.65); margin-bottom: 24px; } .slide-content .slide-sub { font-family: var(--font-heading); font-size: clamp(15px, 2.6vw, 32px); font-weight: 400; font-style: italic; color: rgba(255,255,255,0.92); text-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 3px 18px rgba(0,0,0,0.5); } /* ── PAGINATION DOTS — exactly RR ── position: fixed, left: 20px, vertically centered in viewport Active: small circle r=2 + full circle ring stroke-width=1.5 Inactive: larger circle r=3.2 opacity=0.5, no ring */ .hero-pagination { position: fixed; left: 20px; top: 50%; transform: translateY(-50%); z-index: 500; list-style: none; display: flex; flex-direction: column; gap: 15px; padding: 0; margin: 0; /* Hide until hero slides are in view */ opacity: 0; transition: opacity 0.3s; pointer-events: none; } .hero-pagination.is-visible { opacity: 1; pointer-events: auto; } .hero-dot { display: block; width: 16px; height: 16px; background: none; border: none; cursor: pointer; padding: 0; } .hero-dot:hover { opacity: 0.8; } /* Shared hero entrance keyframe — fade + subtle rise */ @keyframes heroElemIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* Scroll hint needs its own keyframe to preserve the translateX(-50%) centering */ @keyframes scrollHintIn { from { opacity: 0; transform: translateX(-50%) translateY(14px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* Large hero logo — centred, fades out on scroll via JS */ .hero-logo-wrap { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; will-change: opacity, transform; opacity: 0; /* fill-mode: both → applies the from-state (opacity:0) during the delay, so the logo is invisible even before animation starts. Combined with the inline style="opacity:0" on the element, this prevents any flash of the logo before the CSS animation runs. Delay increased to 1.2s so the logo clearly "arrives" after the hero settles. */ animation: heroElemIn 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s both; } /* Warm radial glow behind the circular logo */ .hero-logo-wrap::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 115%; height: 115%; border-radius: 50%; background: radial-gradient( ellipse at center, rgba(251,170,38,0.45) 0%, rgba(251,140,20,0.22) 35%, rgba(0,136,142,0.10) 62%, transparent 75% ); filter: blur(30px); z-index: -1; pointer-events: none; } .hero-logo { width: auto; height: 62.5vh; max-height: 700px; max-width: 90vw; object-fit: contain; filter: drop-shadow(0 6px 28px rgba(0,0,0,0.6)); display: block; } /* SCROLL hint */ .hero-scroll-hint { position: absolute; bottom: 28px; left: 50%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(255,255,255,0.75); font-size: 13px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0; animation: scrollHintIn 0.7s ease 2.8s forwards; } .scroll-line { width: 2px; height: 80px; background: rgba(255,255,255,0.25); position: relative; overflow: hidden; } .scroll-line::after { content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: rgba(255,255,255,0.95); animation: scrollDrop 1.8s cubic-bezier(0.4,0,0.2,1) infinite; } @keyframes scrollDrop { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } /* Shorten scroll-line on shorter viewports (laptop screens) so the hero logo above and the scroll hint don't visually collide. */ @media (max-height: 900px) { .scroll-line { height: 56px; } } @media (max-height: 800px) { .scroll-line { height: 40px; } } @media (max-height: 700px) { .scroll-line { height: 28px; } } /* ══════════════════════════════════════════════════════ NAV — always fixed at top, Gaussian blur from load ══════════════════════════════════════════════════════ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; width: 100%; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: rgba(0, 100, 105, 0.38); backdrop-filter: blur(24px) saturate(180%) brightness(0.92); -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(0.92); box-shadow: 0 2px 32px rgba(0,0,0,0.18); border-bottom: 1px solid rgba(255,255,255,0.12); opacity: 0; animation: navFadeIn 0.8s ease 1.8s forwards; } @keyframes navFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Left: hamburger + MENU */ .nav-left { display: flex; align-items: center; gap: 16px; cursor: pointer; color: var(--white); user-select: none; flex-shrink: 0; } .nav-menu-label { font-size: 14px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; } /* Center: nav logo */ .nav-center { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; } .nav-logo { height: 52px; width: auto; max-width: 180px; object-fit: contain; } .nav-logo-fallback { color: var(--white); font-family: var(--font-heading); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; } /* Right: social icons */ .nav-right { display: flex; align-items: center; gap: 18px; flex-shrink: 0; } .nav-social { color: var(--white); display: flex; align-items: center; transition: color 0.25s ease, transform 0.25s ease, opacity 0.25s ease; min-width: 44px; min-height: 44px; justify-content: center; opacity: 0.85; } .nav-social:hover { color: var(--amber); transform: scale(1.18); opacity: 1; } .nav-social svg { width: 20px; height: 20px; } /* ══════════════════════════════════════════════════════ LOCATIONS SECTION ══════════════════════════════════════════════════════ */ .locations { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; position: relative; overflow: hidden; } .locations-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: #0a2e30; transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94); z-index: 0; background-image: url(../images/locations-bg.webp); background-image: image-set(url(../images/locations-bg.webp) type('image/webp'), url(../images/locations-bg.jpg) type('image/jpeg')); } .locations:hover .locations-bg { transform: scale(1.025); } .locations-bg::after { content: ''; position: absolute; inset: 0; background: rgba(0,20,22,0.42); } .location-card { position: relative; display: flex; align-items: center; justify-content: center; padding-bottom: 0; z-index: 1; } .location-card::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to top, rgba(0,40,42,0.82) 0%, rgba(0,60,64,0.20) 55%, transparent 100%); transition: background 0.4s; } .location-card:hover::after { background: linear-gradient(to top, rgba(0,40,42,0.92) 0%, rgba(0,80,85,0.38) 55%, transparent 100%); } .location-card:first-child { border-right: 1px solid rgba(255,255,255,0.18); } .location-content { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; } .location-tag { font-size: 19px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--amber); opacity: 0.9; } .location-name { font-family: var(--font-heading); font-size: clamp(36px,4.5vw,62px); font-weight: 600; line-height: 1.1; color: var(--white); text-shadow: 0 2px 16px rgba(0,0,0,0.5); } .location-vibe { font-family: var(--font-heading); font-size: clamp(16px,2vw,22px); font-weight: 400; font-style: italic; color: rgba(255,255,255,0.8); text-transform: capitalize; } .location-cta { font-family: 'Source Sans 3', 'Myriad Pro', Arial, sans-serif; margin-top: 12px; display: inline-block; padding: 14px 40px; background: transparent; border: 2px solid var(--white); color: var(--white); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.2s; cursor: pointer; } .location-cta:hover { background: var(--amber); border-color: var(--amber); color: var(--white); transform: translateY(-2px); } /* Slide CTA button — matches .location-cta style exactly */ .slide-cta { display: inline-block; margin-top: 24px; padding: 14px 40px; background: transparent; border: 2px solid var(--white); color: var(--white); font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.2s; cursor: pointer; } .slide-cta:hover { background: var(--amber); border-color: var(--amber); color: var(--white); transform: translateY(-2px); } /* Shown only ≤700px — line breaks for CTA / sub copy (no effect on desktop) */ .hero-br-mobile { display: none; } @media (max-width: 700px) { .hero-br-mobile { display: block; } .slide-cta { padding: 12px 28px; font-size: 12px; margin-top: 20px; } } /* Find Us section — hours block (two columns so times align vertically) */ .find-call-hours { margin-top: 20px; display: grid; grid-template-columns: max-content 1fr; column-gap: 16px; row-gap: 7px; align-items: baseline; } .find-call-hours-row { display: contents; } .find-call-hours-days { font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); opacity: 0.85; white-space: nowrap; } .find-call-hours-time { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.85); white-space: nowrap; } @media (max-width: 700px) { .find-call-hours { column-gap: 12px; } } /* Folly Beach Raw Bar subhead — separate hours block under the main one. Uses --rawbar modifier so it renders with a top divider + amber label matching the Restaurant/Raw Bar pattern on the Folly Beach detail page. */ .find-call-hours--rawbar { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.18); } .find-call-hours-row--heading { display: contents; } .find-call-hours-rawbar-label { grid-column: 1 / -1; font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--white); margin-bottom: 4px; } .featured-in { background: var(--white); padding: 100px 40px 120px; text-align: center; } /* ── FEATURED IN animations ── */ /* All animated elements start hidden, reveal on scroll via JS class */ .featured-in-inner { opacity: 1; } .featured-label { position: relative; z-index: 1; font-family: var(--font-heading); font-size: clamp(36px, 4.5vw, 62px); font-weight: 600; line-height: 1.1; color: var(--teal); margin-bottom: 80px; display: flex; align-items: center; justify-content: center; gap: 28px; } /* Arrow base — hidden until section scrolls into view */ .featured-arrow { flex-shrink: 0; opacity: 0; position: relative; top: 4px; } .featured-label-text { opacity: 0; transform: translateY(12px); transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s; } /* Left arrow draws at 0.6s */ .featured-arrow-left { transition: opacity 0.5s ease 0.2s; } .featured-arrow-left path, .featured-arrow-left line { stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1) 0.6s; } /* Right arrow draws at 0.9s */ .featured-arrow-right { transition: opacity 0.5s ease 0.5s; } .featured-arrow-right path, .featured-arrow-right line { stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1) 0.9s; } /* Logo wrappers — stagger in */ .featured-logo-wrap { display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(16px); } /* Active state — triggered by IntersectionObserver */ .featured-in.is-visible .featured-arrow { opacity: 0.75; } .featured-in.is-visible .featured-label-text { opacity: 1; transform: translateY(0); } .featured-in.is-visible .featured-arrow-left path, .featured-in.is-visible .featured-arrow-left line, .featured-in.is-visible .featured-arrow-right path, .featured-in.is-visible .featured-arrow-right line { stroke-dashoffset: 0; } /* Logos stagger — delay set inline via JS */ .featured-in.is-visible .featured-logo-wrap { opacity: 1; transform: translateY(0); transition: opacity 0.55s ease, transform 0.55s ease; } .featured-logos { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 48px 48px; max-width: 1400px; margin: 0 auto; } .featured-logo-wrap { display: flex; align-items: center; justify-content: center; } .feat-logo { width: auto; display: block; opacity: 0.90; transition: opacity 0.2s ease; } .feat-logo:hover { opacity: 1; } @media (max-width: 700px) { .featured-logos { gap: 36px 40px; } .featured-in { padding: 48px 24px; } } /* ══════════════════════════════════════════════════════ FAQ → FIND US TRANSITION CTA ══════════════════════════════════════════════════════ */ .faq-cta { background: var(--amber); text-align: center; padding: 100px 40px; position: relative; } .faq-cta::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: rgba(255,255,255,0.2); } .faq-cta-eyebrow { font-family: var(--font-body); /* Consistent with all section eyebrows: 20px/700 */ font-size: 20px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; /* White on amber — matches body content and menu-cta-section (brand design choice) */ color: var(--white); opacity: 0.85; display: block; margin-bottom: 28px; } .faq-cta-heading { font-family: var(--font-heading); font-size: clamp(36px, 4.8vw, 68px); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; } .faq-cta-heading span { display: block; font-style: normal; } /* White text on amber — consistent with body-content and menu-cta-section */ .faq-cta-line1 { color: var(--white); } .faq-cta-line2 { color: rgba(255,255,255,0.82); } .faq-cta-line3 { color: rgba(255,255,255,0.82); } @media (max-width: 700px) { .faq-cta { padding: 72px 24px; } .faq-cta-heading { font-size: clamp(26px, 5.5vw, 80px); } } /* ══════════════════════════════════════════════════════ FOOTER — centered logo, rule, 4 col grid ══════════════════════════════════════════════════════ */ .site-footer { background: #00555a; background-image: radial-gradient( ellipse 100% 60% at 50% 0%, rgba(0,200,210,0.32) 0%, rgba(0,160,170,0.16) 40%, transparent 70% ); color: rgba(255,255,255,0.75); } .footer-logo-wrap { text-align: center; padding: 80px 40px 60px; position: relative; } .footer-logo { width: 360px; height: auto; display: inline-block; } /* Contained horizontal rule — matches RR style */ .footer-rule { width: calc(100% - 120px); max-width: 1300px; margin: 0 auto; height: 1px; background: rgba(255,255,255,0.15); } /* 4-column grid — shifted right for visual centering under logo */ .footer-inner { width: calc(100% - 120px); max-width: 1300px; margin: 0 auto; padding: 56px 0 64px; padding-left: 8%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0 48px; align-items: start; } .footer-nav { list-style: none; margin: 0; padding: 0; } .footer-nav li { margin-bottom: 12px; } .footer-nav a { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.7); transition: color 0.2s; } .mobile-br { display: none;} .footer-nav a:hover { color: var(--white); } .footer-socials { display: flex; gap: 12px; margin-top: 4px; } .footer-social { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.65); transition: border-color 0.2s, color 0.2s; } .footer-social:hover { border-color: var(--amber); color: var(--amber); } .footer-social svg { width: 16px; height: 16px; display: block; } @media (max-width: 1024px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 48px 40px; padding-left: 0; width: calc(100% - 80px); } .footer-logo { width: 280px; } } @media (max-width: 700px) { .footer-logo { width: 220px; } .footer-rule { width: calc(100% - 48px); } .footer-inner { grid-template-columns: 1fr; width: calc(100% - 48px); padding: 40px 0 48px; padding-left: 0; text-align: center; } /* Center nav links, location text, and social icons */ .footer-nav { display: flex; flex-direction: column; align-items: center; } .footer-location { text-align: center; } .footer-location p { text-align: center; } .footer-socials { justify-content: center; } .footer-bottom-pipe { display: none; } } /* Location details */ .footer-location { margin-bottom: 24px; } .footer-location-name { font-family: var(--font-heading); font-size: 17px; font-weight: 400; color: var(--white); margin-bottom: 6px; display: block; } .footer-location p { font-family: var(--font-body); font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.72); margin-bottom: 4px; } .footer-location a { color: rgba(255,255,255,0.72); transition: color 0.2s; } .footer-location a:hover { color: var(--amber); } /* Bottom bar — shorter rule matching footer-rule width */ .footer-bottom { width: calc(100% - 120px); max-width: 1300px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.1); padding: 22px 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .footer-copyright { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.3); } .footer-bottom-right { display: flex; align-items: center; gap: 28px; } .footer-bottom-right a { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.3); transition: color 0.2s; } .footer-bottom-right a:hover { color: rgba(255,255,255,0.65); } .footer-bottom-tagline { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.3); } .footer-bottom-pipe { color: rgba(255,255,255,0.2); font-size: 13px; } @media (max-width: 700px) { .footer-bottom { width: calc(100% - 48px); flex-direction: column; align-items: center; padding: 24px 0; text-align: center; gap: 10px; } .footer-bottom-right { flex-direction: column; align-items: center; gap: 10px; } } .footer-col-heading { font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; color: var(--amber); margin-bottom: 20px; display: block; } /* ══════════════════════════════════════════════════════ FIND US + CALL US — bold teal full-width section ══════════════════════════════════════════════════════ */ .find-call { background: var(--teal); position: relative; overflow: hidden; } .find-call::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 120% 80% at 50% 100%, rgba(0,0,0,0.18) 0%, transparent 70%); pointer-events: none; } .find-call-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; } .find-call-card { display: block; padding: 80px 40px; border-right: 1px solid rgba(255,255,255,0.12); position: relative; overflow: hidden; text-align: left; scroll-margin-top: calc(var(--nav-h) - 10px); } .find-call-card:last-child { border-right: none; } /* Heading sits centered */ .find-call-card-label { font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--amber); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; } .find-call-card-label::after { content: ''; height: 1px; background: rgba(255,255,255,0.15); width: 60px; } .find-call-card-name { font-family: var(--font-heading); font-size: clamp(36px, 3.8vw, 56px); font-weight: 400; line-height: 1.1; color: var(--white); margin-bottom: 36px; letter-spacing: -0.01em; } /* Background building image */ .find-call-card::before { content: ''; position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.04; pointer-events: none; z-index: 0; } .find-call-card.card-folly::before { background-image: url('../images/folly-beach-building.jpg'); } .find-call-card.card-coosaw::before { background-image: url('../images/coosaw-creek-building.jpg'); } /* Centered column (desktop + mobile) — inner elements stay full-width of this shell, unchanged layout */ .find-call-card-shell { position: relative; z-index: 1; width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; box-sizing: border-box; } .find-call-card-label, .find-call-card-name, .find-call-card-inner { width: 100%; box-sizing: border-box; } .find-call-card-inner { display: flex; flex-direction: column; align-items: flex-start; } .find-call-detail { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; } .find-call-detail-icon { flex-shrink: 0; margin-top: 1px; color: var(--amber); } .find-call-detail-icon svg { width: 26px; height: 26px; display: block; } .find-call-detail-icon.icon-pin svg { width: 22px; height: 22px; } .find-call-detail-icon.icon-phone svg { width: 20px; height: 20px; } .find-call-detail.phone-row { margin-top: 20px; } .find-call-detail-text { font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: rgba(255,255,255,0.85); } .find-call-detail-text a { color: rgba(255,255,255,0.85); transition: color 0.2s; } .find-call-detail-text a:hover { color: var(--amber); } .find-call-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; color: var(--white); border-bottom: 1px solid rgba(255,255,255,0.35); padding-bottom: 5px; transition: color 0.2s, border-color 0.2s, gap 0.2s; } .find-call-btn:hover { color: var(--amber); border-color: var(--amber); gap: 14px; } .find-call-btn svg { width: 13px; height: 13px; } @media (max-width: 900px) { .find-call-inner { grid-template-columns: 1fr; } .find-call-card { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); padding: 56px 24px; box-sizing: border-box; } .find-call-card:last-child { border-bottom: none; } } @media (max-width: 700px) { .find-call-card { padding: 48px 24px; } .find-call-card-name { font-size: clamp(28px, 8vw, 56px); } .find-call-card-shell { max-width: 234px; } .loc-detail-body-partner {padding: 80px clamp(24px, 8vw, 160px) 80px;} } /* ══════════════════════════════════════════════════════ CTA HEADING — continues teal background from find-call ══════════════════════════════════════════════════════ */ .cta-heading-section { background: var(--teal); text-align: center; padding: 100px 40px 120px; position: relative; } .cta-heading-section::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: rgba(255,255,255,0.12); } .cta-eyebrow { font-family: var(--font-body); /* WCAG AA fix: white on teal = 4.28:1; at 20px/700 qualifies as large-bold text (3:1 required) */ font-size: 20px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--white); margin-bottom: 28px; display: block; } .cta-heading { font-family: var(--font-heading); font-size: clamp(40px, 5.5vw, 80px); font-weight: 400; line-height: 1.1; color: var(--white); letter-spacing: -0.02em; font-style: normal; } .cta-heading span { display: block; font-style: normal; } .cta-heading .cta-line-2 { color: rgba(255,255,255,0.75); } .cta-heading .cta-line-3 { color: rgba(255,255,255,0.75); } @media (max-width: 700px) { .cta-heading-section { padding: 72px 24px; } .cta-heading { font-size: clamp(26px, 5.5vw, 80px); } } /* ══════════════════════════════════════════════════════ PARALLAX IMAGE SECTION — fixed background, no zoom ══════════════════════════════════════════════════════ */ .parallax-section { height: 85vh; background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat; } /* ── Content overlay for interior parallax sections ────────── Home page parallax is a pure image div and uses none of these. Interior pages (e.g. menus) can add text + CTA over the image. ─────────────────────────────────────────────────────────── */ .parallax-section--content { position: relative; display: flex; align-items: center; justify-content: center; } .parallax-section-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.52) 50%, rgba(0,0,0,0.26) 100% ); z-index: 0; } .parallax-section-content { position: relative; z-index: 1; text-align: center; color: var(--white); padding: 0 40px; max-width: 820px; } .parallax-section-eyebrow { font-family: var(--font-body); font-size: 20px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 20px; text-shadow: 0 1px 6px rgba(0,0,0,0.6); } .parallax-section-heading { font-family: var(--font-heading); font-size: clamp(40px, 6vw, 78px); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; color: var(--white); text-shadow: 0 2px 8px rgba(0,0,0,0.55), 0 6px 32px rgba(0,0,0,0.45); margin-bottom: 20px; } .parallax-section-sub { font-family: var(--font-heading); font-size: clamp(16px, 2.2vw, 24px); font-weight: 400; font-style: italic; color: rgba(255,255,255,0.88); text-shadow: 0 1px 4px rgba(0,0,0,0.6); margin-bottom: 40px; } /* CTA button — transparent white border, matches home page slide CTAs */ .parallax-section-cta { display: inline-block; padding: 16px 48px; background: transparent; border: 2px solid var(--white); color: var(--white); font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; transition: background 0.25s, border-color 0.25s, transform 0.2s; } .parallax-section-cta:hover { background: var(--amber); border-color: var(--amber); transform: translateY(-2px); } @media (max-width: 700px) { .parallax-section-content { padding: 0 24px; } } @supports (-webkit-touch-callout: none) { /* iOS Safari does not support background-attachment: fixed — remove it from both hero slides and the parallax section */ .slide-bg { background-attachment: scroll; } .parallax-section { background-attachment: scroll; } } .desktop { display: block;} @media (max-width: 700px) { .desktop { display: none;} .parallax-section { height: 70vh; min-height: 320px; background-attachment: scroll; } } /* ══════════════════════════════════════════════════════ BODY CONTENT SECTION ══════════════════════════════════════════════════════ */ .body-content { background-color: var(--amber); padding: 120px 40px; text-align: center; position: relative; } /* Sand pattern — white, heavy on edges, fades to transparent in center */ .body-content::before { content: ''; position: absolute; inset: 0; background-image: url('../images/SandBackgroundPattern.svg'); background-repeat: repeat; background-size: 900px 300px; filter: brightness(10); opacity: 0.18; pointer-events: none; z-index: 0; } .body-content-inner { max-width: 960px; margin: 0 auto; position: relative; z-index: 1; } .body-icon { width: 100px; height: auto; display: block; margin: 0 auto 28px; opacity: 0; transform: translateY(12px); transition: opacity 0.7s ease 0s, transform 0.7s ease 0s; } .body-content.is-visible .body-icon { opacity: 1; transform: translateY(0); animation: crabWiggle 4s ease-in-out 1s infinite; } @keyframes crabWiggle { 0%, 100% { transform: rotate(0deg) translateY(0); } 20% { transform: rotate(-6deg) translateY(-3px); } 40% { transform: rotate(5deg) translateY(-1px); } 60% { transform: rotate(-4deg) translateY(-2px); } 80% { transform: rotate(3deg) translateY(0); } } .body-heading { font-family: var(--font-heading); font-size: clamp(36px, 4.8vw, 68px); font-weight: 400; line-height: 1.15; color: var(--white); margin-bottom: 48px; letter-spacing: -0.01em; font-style: normal; opacity: 0; transform: translateY(20px); transition: opacity 0.9s ease 0.15s, transform 0.9s ease 0.15s; } .body-content.is-visible .body-heading { opacity: 1; transform: translateY(0); } .body-heading em { font-style: normal; color: var(--white); } /* Hand-drawn divider — draws in on scroll */ .body-divider { display: block; width: 120px; height: 20px; margin: 0 auto 48px; overflow: visible; } .body-divider path { stroke-dasharray: 160; stroke-dashoffset: 160; } @keyframes dividerDraw { to { stroke-dashoffset: 0; } } .body-content.is-visible .body-divider .line-main { animation: dividerDraw 1s cubic-bezier(0.4,0,0.2,1) 0.3s forwards; } .body-content.is-visible .body-divider .line-echo { animation: dividerDraw 1s cubic-bezier(0.4,0,0.2,1) 0.6s forwards; } /* Draw the divider when menu-cta-section scrolls into view — .is-visible is added by IntersectionObserver in scripts.js, mirroring the exact same pattern as .body-content.is-visible */ .menu-cta-section .body-divider { margin-top: 24px; margin-bottom: 48px; } .menu-cta-section.is-visible .body-divider .line-main { animation: dividerDraw 1s cubic-bezier(0.4,0,0.2,1) 0.3s forwards; } .menu-cta-section.is-visible .body-divider .line-echo { animation: dividerDraw 1s cubic-bezier(0.4,0,0.2,1) 0.6s forwards; } .body-para { font-family: var(--font-body); font-size: clamp(15px, 1.5vw, 18px); font-weight: 400; line-height: 1.8; color: rgba(255,255,255,0.90); opacity: 0; transform: translateY(16px); transition: opacity 0.8s ease 0.6s, transform 0.8s ease 0.6s; } .body-content.is-visible .body-para { opacity: 1; transform: translateY(0); } .body-read-more { display: inline-block; margin-top: 48px; background: transparent; border: 2px solid rgba(255,255,255,0.85); cursor: pointer; font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--white); padding: 18px 40px; transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.8s ease 0.9s, transform 0.8s ease 0.9s; opacity: 0; transform: translateY(12px); } .body-content.is-visible .body-read-more { opacity: 1; transform: translateY(0); } .body-read-more:hover { background: var(--white); color: var(--amber); border-color: var(--white); } .body-more { max-height: 0; overflow: hidden; transition: max-height 1.1s cubic-bezier(0.4,0,0.2,1); } .body-more.is-open { max-height: 800px; } .body-more .body-para { margin-top: 28px; } @media (max-width: 700px) { .body-content { padding: 55px 24px; } .body-read-more { width: 100%; justify-content: center; } .body-heading { font-size: clamp(26px, 5.5vw, 68px); } } /* ══════════════════════════════════════════════════════ FAQ SECTION — fun accordion on white background ══════════════════════════════════════════════════════ */ .faq-eyebrow { font-family: var(--font-body); /* Consistent with all section eyebrows: 20px/700 */ font-size: 20px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); display: block; text-align: center; margin-bottom: 16px; } .faq-heading { font-family: var(--font-heading); font-size: clamp(36px, 4.5vw, 62px); font-weight: 400; line-height: 1.1; color: var(--teal); text-align: center; margin-bottom: 16px; } .faq-subhead-br { display: none; } .faq-subhead { font-family: var(--font-body); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.7; color: #006e73; text-align: center; margin-bottom: 64px; } /* Accordion items */ .faq-item { border-bottom: 1px solid rgba(0,136,142,0.15); } .faq-item:first-of-type { border-top: 1px solid rgba(0,136,142,0.15); } .faq-question { width: 100%; background: none; border: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; cursor: pointer; text-align: left; transition: color 0.2s; } .faq-question:hover { color: var(--teal); } .faq-question-text { font-family: var(--font-heading); font-size: clamp(18px, 2vw, 22px); font-weight: 400; line-height: 1.3; color: var(--teal); transition: color 0.2s; } .faq-question:hover .faq-question-text { color: #005f64; } /* Fun emoji icon on each question */ .faq-question-emoji { font-size: 22px; flex-shrink: 0; margin-right: 16px; } .faq-question-left { display: flex; align-items: center; } /* +/− toggle icon */ .faq-toggle { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(0,136,142,0.3); display: flex; align-items: center; justify-content: center; color: var(--teal); transition: background 0.2s, border-color 0.2s, transform 0.35s; } .faq-question[aria-expanded="true"] .faq-toggle { background: var(--teal); border-color: var(--teal); color: var(--white); transform: rotate(45deg); } .faq-toggle svg { width: 14px; height: 14px; } /* Answer panel */ .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.65s cubic-bezier(0.4,0,0.2,1); } .faq-answer.is-open { max-height: 1200px; } .faq-answer-inner { padding: 0 0 28px 0; font-family: var(--font-body); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.75; color: #006e73; } /* ── View More FAQs ── */ .faq-more { max-height: 0; overflow: hidden; transition: max-height 1.4s cubic-bezier(0.4,0,0.2,1); } .faq-more.is-open { max-height: 9999px; } .faq-view-more-wrap { text-align: center; padding: 32px 0 32px; } .faq-view-more-btn { display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 2px solid var(--teal); color: var(--teal); font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; padding: 15px 36px; cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; } .faq-view-more-btn:hover { background: var(--teal); color: var(--white); } .faq-view-more-btn svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.35s; } .faq-view-more-btn.is-open svg { transform: rotate(180deg); } @media (max-width: 700px) { .faq-view-more-btn { padding: 14px 24px; font-size: 12px; white-space: nowrap; } } @media (max-width: 480px) { .faq-view-more-btn { white-space: normal; } } /* ══════════════════════════════════════════════════════ FAQ SECTION + WAVE COLUMNS ══════════════════════════════════════════════════════ */ .faq-section { background: #f5f8f7; padding: 120px 0 120px; position: relative; overflow: hidden; } /* Sand pattern overlay — same technique as body content section */ .faq-section::before { content: ''; position: absolute; inset: 0; background-image: url('../images/SandBackgroundPattern.svg'); background-repeat: repeat; background-size: 600px 300px; filter: brightness(0); opacity: 0.04; pointer-events: none; z-index: 0; } .faq-inner { max-width: 860px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 1; } /* Card wraps only the accordion items */ .faq-items-card { background: rgba(255,255,255,0.72); border-radius: 4px; box-shadow: 0 2px 40px rgba(0,88,94,0.07), 0 1px 8px rgba(0,88,94,0.04); padding: 48px; margin-top: 48px; } /* Gentle float animations */ @keyframes waveFloatLeft { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-28px); } } @keyframes waveFloatRight { 0%, 100% { transform: scaleX(-1) translateY(0px); } 50% { transform: scaleX(-1) translateY(-20px); } } .faq-wave-col { position: absolute; top: 0; bottom: 0; width: 320px; pointer-events: none; z-index: 0; opacity: 0.45; } .faq-wave-col:first-child { left: 0; } .faq-wave-col:last-child { right: 0; } .faq-wave-col img { position: absolute; width: 320px; height: auto; display: block; } .faq-wave-col:first-child img { top: 160px; left: -175px; animation: waveFloatLeft 6s ease-in-out infinite; } .faq-wave-col:last-child img { top: 360px; right: -175px; animation: waveFloatRight 7.5s ease-in-out infinite; } @media (max-width: 700px) { .faq-wave-col { display: none; } .faq-section { padding: 60px 16px; } .faq-inner { padding: 0 16px; } .faq-items-card { padding: 24px 20px; } .faq-subhead-br { display: inline; } } /* ══════════════════════════════════════════════════════ PHOTO CAROUSEL — horizontal scroll, edge-to-edge 4 images visible on desktop, drag or arrow to scroll Image dimensions: 800×1200px (2:3 portrait ratio) ══════════════════════════════════════════════════════ */ .photo-carousel-wrap { background: var(--amber); padding: 0 0 16px; /* 16px bottom bar = same as gap between images */ position: relative; } .photo-carousel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; /* No padding — first/last images touch the edges */ padding: 0; } .photo-carousel::-webkit-scrollbar { display: none; } .photo-carousel.is-dragging { cursor: grabbing; } .photo-carousel-item { flex: 0 0 calc(25% - 12px); aspect-ratio: 2 / 3; overflow: hidden; scroll-snap-align: start; position: relative; } /* First item flush left, last item flush right */ .photo-carousel-item:first-child { margin-left: 0; } .photo-carousel-item:last-child { margin-right: 0; } .photo-carousel-item img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94); pointer-events: none; } .photo-carousel-item:hover img { transform: scale(1.04); } /* Arrow buttons */ .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 48px; height: 48px; background: rgba(0,136,142,0.85); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--white); transition: background 0.2s, opacity 0.2s; /* Offset to sit half inside, half outside the track */ margin-top: calc(-30px); /* half of bottom padding */ } .carousel-btn:hover { background: var(--teal); } .carousel-btn-prev { left: 12px; } .carousel-btn-next { right: 12px; } .carousel-btn svg { width: 20px; height: 20px; flex-shrink: 0; } @media (max-width: 1024px) { .photo-carousel-item { flex: 0 0 calc(33.333% - 11px); } } @media (max-width: 700px) { /* Mobile: centered slide with side peeks (client requested) */ .photo-carousel-item { flex: 0 0 calc(100% - 72px); scroll-snap-align: center; box-sizing: border-box; } .photo-carousel { gap: 12px; box-sizing: border-box; padding: 0 16px; scroll-padding: 50%; } .carousel-btn { display: flex; width: 40px; height: 40px; } } .double-image { position: relative; width: 100%; background: var(--white); /* Space above: overlay starts at top, bg starts 300px down */ /* Space below: bg extends past overlay bottom before white shows */ padding-bottom: 120px; } /* Background — absolute, starts 300px below top */ .double-image-bg { position: absolute; top: 300px; left: 0; right: 0; bottom: 0; z-index: 0; overflow: hidden; } .double-image-bg img, .double-image-bg video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .double-image-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to right, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.05) 12%, rgba(0,0,0,0.05) 88%, rgba(0,0,0,0.35) 100% ); } /* Overlay — normal flow, centered, z-index above background */ .double-image-fg { position: relative; z-index: 2; width: 78.5%; max-width: 1508px; margin: 0 auto; line-height: 0; } .double-image-fg img, .double-image-fg video { width: 100%; height: auto; display: block; object-fit: cover; box-shadow: 0 24px 80px rgba(0,0,0,0.55); } @media (max-width: 1024px) { .double-image-fg { width: 90%; } .double-image-bg { top: 200px; } } @media (max-width: 700px) { .double-image-fg { width: 65%; } .double-image-bg { top: 60px; } } /* Badge band: #c47800 background so white text achieves 3.48:1 (large-bold 19px/700 → needs 3:1) */ .badge-band { background: #c47800; padding: 14px 0; overflow: hidden; } .badge-track { display: flex; white-space: nowrap; animation: marquee 22s linear infinite; } .badge-track-inner { display: flex; gap: 0; flex-shrink: 0; align-items: center; } /* WCAG AA: white on #c47800 = 3.48:1, at 19px/700 = large-bold text (needs 3:1) ✓ */ .badge-item { font-size: 19px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--white); } .badge-sep { display: inline-flex; align-items: center; padding: 0 20px; font-size: 14px; opacity: 0.6; color: var(--white); } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ══════════════════════════════════════════════════════ HAMBURGER — CSS bars (no SVG rendering artifacts) ══════════════════════════════════════════════════════ */ .nav-left { transition: opacity 0.2s; } .nav-left:hover { opacity: 0.65; } .hamburger { width: 22px; height: 14px; display: flex; flex-direction: column; justify-content: space-between; flex-shrink: 0; } /* Three bars — all same 2px thickness */ .bar { display: block; height: 2px; background: currentColor; } .bar-top-left { width: 56%; } .bar-top-right { width: 25%; align-self: flex-end; } .bar-top { display: flex; justify-content: space-between; align-items: center; width: 100%; } .bar-mid { width: 100%; } .bar-bot { width: 100%; } /* Open state: hide bars, show X */ .hamburger-icon-close { display: none; width: 22px; height: 14px; position: relative; } .hamburger-icon-close::before, .hamburger-icon-close::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: currentColor; } .hamburger-icon-close::before { transform: translateY(-50%) rotate(45deg); } .hamburger-icon-close::after { transform: translateY(-50%) rotate(-45deg); } .nav-left.is-open .hamburger { display: none; } .nav-left.is-open .hamburger-icon-close { display: block; } .nav-menu-label { transition: opacity 0.25s; } .nav-left.is-open .nav-menu-label { opacity: 0.5; } /* ══════════════════════════════════════════════════════ MENU PANEL ══════════════════════════════════════════════════════ */ .menu-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.35); opacity: 0; pointer-events: none; transition: opacity 0.45s ease; } .menu-overlay.open { opacity: 1; pointer-events: all; } .menu-panel { position: fixed; top: 0; left: 0; bottom: 0; z-index: 400; width: 41%; background: rgba(0, 88, 94, 0.52); backdrop-filter: blur(28px) saturate(180%) brightness(0.82); -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(0.82); border-right: 1px solid rgba(255,255,255,0.08); transform: translateX(-100%); transition: transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94); display: flex; flex-direction: column; overflow-y: auto; } .menu-panel.open { transform: translateX(0); } /* Panel header — X CLOSE right-aligned to match nav link right edge */ .menu-panel-header { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(28px, 5vw, 60px); flex-shrink: 0; } /* Header logo (shown when menu is open) */ .menu-panel-logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--white); opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 0.25s ease, transform 0.25s ease; } .menu-panel-logo img { display: block; height: 32px; width: auto; } .menu-panel.open .menu-panel-logo { opacity: 1; pointer-events: auto; transform: translateY(0); } /* X CLOSE button */ .menu-panel-close { background: none; border: none; cursor: pointer; color: var(--white); display: flex; align-items: center; gap: 16px; font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; transition: opacity 0.2s; padding: 10px 0; min-height: 44px; } .menu-panel-close:hover { opacity: 0.65; } .menu-close-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Scrollable middle: nav + location rows — vertically centered between header & footer */ .menu-panel-mid { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; -webkit-overflow-scrolling: touch; } @supports (justify-content: safe center) { .menu-panel-mid { justify-content: safe center; } } /* Nav links — right-aligned */ .menu-nav { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: flex-start; padding: 0 clamp(28px, 5vw, 60px) 0; align-items: flex-end; gap: 0; } /* Top-level links */ .menu-link { display: block; font-family: var(--font-body); font-size: clamp(13px, 1.3vw, 16px); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.85); padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.10); width: 100%; text-align: right; opacity: 0; transform: translateY(24px); transition: color 0.2s; } .menu-link:first-child { border-top: 1px solid rgba(255,255,255,0.10); } /* Contact bottom line continues as quicklocs top — avoid double rule */ .menu-nav > a.menu-link:last-of-type { border-bottom: none; } .menu-link:hover { color: var(--white); } /* Sub-links — same font size, slightly dimmer color to differentiate */ .menu-sublink { display: block; font-family: var(--font-body); font-size: clamp(13px, 1.3vw, 16px); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.45); padding: 20px 25px 20px; border-bottom: 1px solid rgba(255,255,255,0.10); width: 100%; text-align: right; opacity: 0; transform: translateY(18px); transition: color 0.2s; } .menu-sublink:hover { color: rgba(255,255,255,0.80); } /* Stagger animation — bottom to top means last item animates first */ @keyframes menuLinkIn { to { opacity: 1; transform: translateY(0); } } .menu-link.animate, .menu-sublink.animate { animation: menuLinkIn 0.6s cubic-bezier(0.25,0.46,0.45,0.94) forwards; } .menu-accordion-panel .menu-sublink.animate { animation: menuLinkIn 0.78s cubic-bezier(0.33, 1, 0.68, 1) forwards; } /* ── Menu accordion groups (Menus, Locations) ── */ .menu-accordion { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.10); } .menu-accordion-trigger { display: flex; align-items: center; justify-content: flex-end; gap: 10px; width: 100%; background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: clamp(13px, 1.3vw, 16px); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.85); padding: 20px 0; text-align: right; opacity: 0; transform: translateY(24px); transition: color 0.2s; } .menu-accordion-trigger:hover { color: var(--white); } .menu-accordion-trigger.animate { animation: menuLinkIn 0.6s cubic-bezier(0.25,0.46,0.45,0.94) forwards; } .menu-accordion-arrow { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.38; transition: transform 0.75s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.38s ease; } .menu-accordion-trigger[aria-expanded="true"] .menu-accordion-arrow { transform: rotate(180deg); opacity: 0.70; } /* Height via 0fr→1fr grid (smooth); max-height feels jerky */ .menu-accordion-panel { display: grid; grid-template-rows: 0fr; opacity: 0; padding: 0; margin: 0; transition: grid-template-rows 1.2s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.05s cubic-bezier(0.33, 1, 0.68, 1) 0.14s, background 0.85s ease, box-shadow 0.85s ease; } .menu-accordion-panel.is-open { grid-template-rows: 1fr; opacity: 1; border-top: 1px solid rgba(255, 255, 255, 0.10); margin: 0; padding: 0; background: rgba(0, 0, 0, 0.10); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); } .menu-accordion-panel-inner { overflow: hidden; min-height: 0; } @media (prefers-reduced-motion: reduce) { .menu-accordion-panel { transition-duration: 0.01ms; transition-delay: 0s; } .menu-accordion-panel.is-open { grid-template-rows: 1fr; opacity: 1; } } /* Remove double bottom border on last sublink inside panel */ .menu-accordion-panel .menu-sublink:last-child { border-bottom: none; } /* Quick location rows — borders inset like .menu-link (no full-bleed strip lines) */ .menu-panel-quicklocs { flex: 0 0 auto; width: 100%; padding: 0 clamp(28px, 5vw, 60px); } .menu-quickloc-strip { width: 100%; display: flex; flex-direction: column; align-items: stretch; padding: 0; opacity: 0; transform: translateY(24px); } .menu-quickloc-strip.animate { animation: menuLinkIn 0.6s cubic-bezier(0.25,0.46,0.45,0.94) forwards; } .menu-quickloc { width: 100%; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.10); } .menu-quickloc:first-child { border-top: 1px solid rgba(255,255,255,0.10); } .menu-quickloc-heading { font-family: var(--font-body); font-size: clamp(13px, 1.3vw, 16px); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.85); margin: 0; white-space: nowrap; } .menu-quickloc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; } .menu-quickloc-sep { font-size: clamp(13px, 1.3vw, 16px); color: rgba(255,255,255,0.25); user-select: none; line-height: 1; } /* Forced line break inside a quickloc row. A zero-height, full-width flex item pushes everything after it onto the next line. Used on the Coosaw Creek row so MAP + CALL always sit on line 2 (below MENU · ORDER · GIFT CARD) rather than wrapping unpredictably. The row is right-aligned (justify-content: flex-end), so both lines align right. */ .menu-quickloc-break { flex-basis: 100%; width: 100%; height: 0; margin: 0; /* offset half the row gap so the two lines sit a touch tighter */ margin-top: -2px; } /* Match desktop .nav-loc-btn: dim default → full white on hover, same transition */ .menu-quickloc-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: clamp(13px, 1.3vw, 16px); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.68); padding: 0; min-height: 0; transition: color 0.2s ease; white-space: nowrap; } .menu-quickloc-btn:hover { color: var(--white); } .menu-quickloc-link { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-body); font-size: clamp(13px, 1.3vw, 16px); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.68); text-decoration: none; padding: 0; min-height: 0; transition: color 0.2s ease; white-space: nowrap; } .menu-quickloc-link:hover { color: var(--white); } .menu-quickloc-link svg { width: 19px; height: 19px; flex-shrink: 0; fill: currentColor; } /* Panel footer: socials — right-aligned */ .menu-panel-footer { padding: 16px clamp(28px, 5vw, 60px) 24px; display: flex; gap: 20px; align-items: center; justify-content: flex-end; flex-shrink: 0; } .menu-social { color: rgba(255,255,255,0.55); transition: color 0.2s; } .menu-social:hover { color: var(--amber); } .menu-social svg { width: 20px; height: 20px; display: block; } /* ══════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════ */ /* Desktop: RR-style 15vw inset padding */ @media (min-width: 1024px) { .nav { padding: 0 clamp(20px, 15vw, 290px); } } /* Tablet */ @media (min-width: 701px) and (max-width: 1023px) { .nav { padding: 0 32px; } .menu-panel { width: 65%; } .menu-panel-header { padding: 0 32px; } } /* Mobile */ @media (max-width: 700px) { .nav-logo { max-width: 170px;} .nav-right { margin-right: -5px; } .nav { padding: 0 20px; } .menu-panel { width: 100%; border-right: none; } .menu-panel-header { padding: 0 20px; } .menu-nav { padding: 0 20px 0; } .menu-panel-quicklocs { padding: 0 20px; } .menu-panel-footer { padding: 16px 20px 24px; } .menu-panel-logo img { height: 28px; } /* Match nav link sizes to the CLOSE label on mobile */ .menu-link, .menu-sublink, .menu-accordion-trigger { font-size: 14px; } .locations { grid-template-columns: 1fr; } .location-card { min-height: 70vh; } .location-card.first {background-image: url(../images/locations-bg.jpg); background-size: cover; background-position: center left; } .location-card:first-child { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.18); } .hero-logo { height: 50vh; } .hero-pagination { left: 10px; } /* Fix 4: Tighten social icons on mobile — remove gap and reduce touch target padding */ .nav-right { gap: 0; } .nav-social { min-width: 30px; min-height: 36px; } } /* Fix 2: Hide pagination on very narrow screens to avoid overlapping slide text */ @media (max-width: 420px) { .hero-pagination { display: none !important; } } /* ══════════════════════════════════════════════════════ MENU MODAL — Elfsight widget in a full overlay ══════════════════════════════════════════════════════ */ .menu-modal-overlay { position: fixed; inset: 0; z-index: 800; background: rgba(0, 20, 22, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; padding: 20px; } .menu-modal-overlay.is-open { opacity: 1; pointer-events: auto; } .menu-modal { position: relative; width: 92vw; max-width: 960px; max-height: 88vh; background: var(--white); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; transform: translateY(20px); transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 32px 80px rgba(0,0,0,0.5); } .menu-modal-overlay.is-open .menu-modal { transform: translateY(0); } /* ── Teal header bar ── */ .menu-modal-header { display: flex; align-items: center; justify-content: center; padding: 0 60px; height: 68px; background: var(--teal); background-image: radial-gradient(ellipse 120% 100% at 50% 0%, rgba(255,255,255,0.08) 0%, transparent 70%); border-bottom: 3px solid var(--amber); position: relative; flex-shrink: 0; } .menu-modal-title { font-family: var(--font-heading); font-size: 22px; font-weight: 600; color: var(--white); letter-spacing: -0.01em; text-align: center; } .menu-modal-close { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); border: 1.5px solid rgba(255,255,255,0.3); cursor: pointer; color: var(--white); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; transition: background 0.2s, border-color 0.2s; } .menu-modal-close:hover { background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.6); } .menu-modal-close svg { width: 16px; height: 16px; } /* ── Scrollable body ── */ .menu-modal-body { padding: 28px 32px 36px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; } /* ════════════════════════════════════════════════════════════════ ELFSIGHT RESTAURANT MENU WIDGET — CSS OVERRIDES Widget ID: elfsight-app-7f77644c-3685-4f3d-b42a-02b3f4df8398 PURPOSE: Replaces Elfsight's default orange/red brand colors (rgb(215,68,29)) with Charleston Crab Shacks teal/amber palette. HOW TO REUSE ON INTERIOR PAGES: 1. Include the Elfsight platform script in : 2. Place the widget div wherever the menu should appear:
3. Wrap it in a div with class="menu-modal-body" OR copy the rules below and swap .menu-modal-body for your own wrapper class. IMPORTANT — CLASS NAME STABILITY: Elfsight uses styled-components. Each rule below targets the STABLE semantic half of the class name (e.g. "TabsControlItem__Name-sc-d53df0ff-0"). The short utility class after it (e.g. "itSMTI") is render-generated and will change — we never target those. The stable names should survive widget updates unless Elfsight redesigns a component. ════════════════════════════════════════════════════════════════ */ /* 1. ACTIVE TAB UNDERLINE BAR The ::after pseudo-element on each tab label draws a 2px colored bar below the active tab. Default: rgb(215,68,29) red/orange. Changed to teal. */ .menu-modal-body .TabsControlItem__Name-sc-d53df0ff-0::after { background-color: var(--teal) !important; } /* 2. TAB LABELS — inactive state Navigation tabs: FOOD MENU / DRINKS MENU / DESSERT MENU etc. Default: rgb(215,68,29) orange. Changed to muted grey. */ .menu-modal-body .TabsControlItem__Name-sc-d53df0ff-0 { color: #555 !important; font-family: var(--font-body) !important; font-size: 15px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; } /* 3. TAB LABELS — active/selected state The active tab item wrapper and its label text. Changed to teal + bold. */ .menu-modal-body .TabsControlItem__TabsControlItemComponent-sc-d53df0ff-1 { color: var(--teal) !important; } .menu-modal-body .TabsControlItem__TabsControlItemComponent-sc-d53df0ff-1 .TabsControlItem__Name-sc-d53df0ff-0 { color: var(--teal) !important; font-weight: 700 !important; } /* 4. MENU GROUP HEADING Large heading displayed above each menu section tab panel, e.g. "FOOD MENU", "DRINKS MENU". Uses Lora serif heading font. */ .menu-modal-body .MenuItem__Heading-sc-ec575860-1 { color: var(--teal) !important; font-family: var(--font-heading) !important; font-size: clamp(20px, 2.5vw, 28px) !important; font-weight: 600 !important; letter-spacing: 0.02em !important; } /* 5. CATEGORY / SECTION TITLES Column titles within a menu tab panel, e.g. "Shacketizers", "Soups & Salads". Default: rgb(215,68,29) orange. */ .menu-modal-body .SectionsTitle__SectionsTitleComponent-sc-876582d5-0 { color: var(--teal) !important; font-family: var(--font-heading) !important; font-weight: 400 !important; } /* 6. MENU SECTION TITLE (the "FOOD MENU" title element with flanking lines) The Info__InfoTitle element wraps the menu title with ::before and ::after pseudo-elements that draw decorative horizontal lines. Default color: rgb(215,68,29) red/orange. Lines changed to soft teal. */ .menu-modal-body .Info__InfoTitle-sc-74677a3d-2 { color: var(--teal) !important; font-family: var(--font-body) !important; } .menu-modal-body .Info__InfoTitle-sc-74677a3d-2::before, .menu-modal-body .Info__InfoTitle-sc-74677a3d-2::after { background-color: rgba(0, 136, 142, 0.25) !important; /* soft teal line */ } /* 7. ITEM NAME The dish/item name text, e.g. "SHACKTACULAR MUSSELS". Default: near-black. Kept dark but set to site body font. */ .menu-modal-body .Name__NameComponent-sc-f71904b8-0 { color: var(--black) !important; font-family: var(--font-body) !important; } /* 8. PRICE Item price, e.g. "12.99". Default: near-black. Changed to teal + semi-bold for visual emphasis. */ .menu-modal-body .Price__PriceComponent-sc-85557d1b-0 { color: var(--teal) !important; font-family: var(--font-body) !important; font-weight: 600 !important; } /* ════════════════════════════════════════════════════════════════ END ELFSIGHT OVERRIDES ════════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { .nav-menu-label { display: none;} .menu-modal-overlay { padding: 0; align-items: flex-end; } .menu-modal { width: 100vw; max-height: 92vh; border-radius: 6px 6px 0 0; } .menu-modal-header { height: 60px; padding: 0 56px; } .menu-modal-title { font-size: 18px; } .menu-modal-body { padding: 16px 20px 28px; } } /* ══════════════════════════════════════════════════════ NAV LOCATION BAR — secondary strip below main nav Desktop only (≥ 1024px). Collapses on scroll. On mobile/tablet the hamburger panel has location info. ══════════════════════════════════════════════════════ */ /* Starts after main nav (1.8s + 0.8s); slides down + fades for a cleaner load */ @keyframes navLocSlideIn { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } } .nav-location-bar { position: fixed; top: var(--nav-h); /* sits flush below the 72px nav */ left: 0; right: 0; z-index: 199; /* one layer below nav */ height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 15vw, 290px); background: rgba(0, 72, 78, 0.52); backdrop-filter: blur(24px) saturate(180%) brightness(0.88); -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(0.88); border-top: 1px solid rgba(255,255,255,0.18); /* dividing line */ border-bottom: 1px solid rgba(255,255,255,0.07); transform: translateY(-100%); transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; /* Main nav finishes at 1.8s + 0.8s = 2.6s — this begins just after */ animation: navLocSlideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2.65s forwards; } /* Narrower desktop: the Coosaw group now carries Menu · Order · Gift Card · Map · Call, so reduce the large side padding to give both groups room before they would collide. Tighten separators slightly too. */ @media (min-width: 1024px) and (max-width: 1440px) { .nav-location-bar { padding: 0 clamp(20px, 5vw, 90px); } .nav-loc-sep { margin: 0 7px; } } @media (prefers-reduced-motion: reduce) { .nav-location-bar { animation: none; opacity: 1; transform: translateY(0); } } .nav-location-bar.is-hidden { transform: translateY(-100%); } /* Two location groups — left and right */ .nav-loc-group { display: flex; align-items: center; } .nav-loc-name { font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.95); white-space: nowrap; } .nav-loc-sep { font-size: 11px; color: rgba(255,255,255,0.25); margin: 0 9px; user-select: none; line-height: 1; } .nav-loc-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.68); text-decoration: none; padding: 0; transition: color 0.2s ease; white-space: nowrap; min-height: 36px; } .nav-loc-btn:hover { color: var(--white); } .nav-loc-btn svg { width: 14px; height: 14px; flex-shrink: 0; fill: currentColor; stroke: none; } /* Hidden on tablet and mobile */ @media (max-width: 1023px) { .nav-location-bar { display: none; } } /* ══════════════════════════════════════════════════════ INTERIOR PAGE HERO Single full-viewport hero for all interior pages. Shorter than the home page 3-slide hero (65vh). Background image set via modifier class (WebP + JPG). ══════════════════════════════════════════════════════ */ .page-hero { position: relative; width: 100%; height: 65vh; min-height: 480px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding-top: 108px; } /* Background — same pattern as .slide-bg */ .page-hero-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; background-color: #0d2426; background-attachment: fixed; } @supports (-webkit-touch-callout: none) { .page-hero-bg { background-attachment: scroll; } } @media (max-width: 700px) { .page-hero { height: 55vh; min-height: 360px; } .page-hero-bg { background-attachment: scroll; } } /* Menus page background image — WebP with JPG fallback */ .page-hero-bg--menus { background-image: url('/images/MainMenusPageHeroBgImage.jpg'); background-image: image-set( url('/images/MainMenusPageHeroBgImage.webp') type('image/webp'), url('/images/MainMenusPageHeroBgImage.jpg') type('image/jpeg') ); } /* Overlay — same as slide-overlay--readable */ .page-hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient( ellipse 100% 70% at 50% 48%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.28) 52%, transparent 72% ), linear-gradient( to bottom, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.48) 45%, rgba(0, 0, 0, 0.72) 100% ); } /* Content */ .page-hero-content { position: relative; z-index: 2; text-align: center; color: var(--white); padding: 0 40px; max-width: 860px; } .page-hero-eyebrow { font-family: var(--font-body); font-size: 20px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--white); display: block; margin-bottom: 20px; text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 14px rgba(0,0,0,0.55); } .page-hero-heading { font-family: var(--font-heading); font-size: clamp(48px, 7vw, 86px); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; color: var(--white); text-shadow: 0 2px 4px rgba(0,0,0,0.55), 0 6px 32px rgba(0,0,0,0.65); margin-bottom: 20px; } .page-hero-sub { font-family: var(--font-heading); font-size: clamp(16px, 2.4vw, 28px); font-weight: 400; font-style: italic; color: rgba(255,255,255,0.90); text-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 3px 18px rgba(0,0,0,0.5); } @media (max-width: 700px) { .page-hero-content { padding: 0 24px; } .page-hero-eyebrow { font-size: 16px; } } /* ══════════════════════════════════════════════════════ MENU LOCATION CTA SECTION Amber background with sand pattern overlay — matches the home page body content section aesthetic. Minimalist two-column layout: clean white text on amber, no image cards. Matches home page brand style. Links lead to dedicated per-location menu pages. ══════════════════════════════════════════════════════ */ .menu-cta-section { background-color: var(--amber); padding: 100px 40px 120px; text-align: center; position: relative; overflow: hidden; } /* Sand speckle overlay — same technique as home page body-content section */ .menu-cta-section::before { content: ''; position: absolute; inset: 0; background-image: url('/images/SandBackgroundPattern.svg'); background-repeat: repeat; background-size: 900px 300px; filter: brightness(10); opacity: 0.18; pointer-events: none; z-index: 0; } .menu-cta-section > * { position: relative; z-index: 1; } /* Section intro */ .menu-cta-intro { max-width: 1100px; margin: 0 auto 80px; } .menu-cta-section-eyebrow { font-family: var(--font-body); font-size: 20px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--white); display: block; margin-bottom: 20px; opacity: 0.85; } .menu-cta-section-heading { font-family: var(--font-heading); font-size: clamp(40px, 5vw, 72px); font-weight: 400; line-height: 1.1; color: var(--white); letter-spacing: -0.01em; margin-bottom: 20px; } .menu-cta-section-sub { font-family: var(--font-body); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.7; color: rgba(255,255,255,0.85); } /* Two-column minimalist grid */ .menu-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 1200px; margin: 0 auto; } .menu-cta-col:first-child { border-right: 1px solid rgba(255,255,255,0.25); padding-right: 80px; } .menu-cta-col:last-child { padding-left: 80px; } .menu-cta-col { text-align: center; display: flex; flex-direction: column; align-items: center; } .menu-cta-col-tag { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.70); display: block; margin-bottom: 16px; } .menu-cta-col-name { font-family: var(--font-heading); font-size: clamp(42px, 5vw, 68px); font-weight: 600; line-height: 1.0; color: var(--white); letter-spacing: -0.01em; margin-bottom: 20px; } .menu-cta-col-desc { font-family: var(--font-body); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.7; color: rgba(255,255,255,0.80); margin-bottom: 32px; max-width: 320px; } .menu-cta-col-btn { display: inline-block; padding: 14px 40px; background: transparent; border: 2px solid var(--white); color: var(--white); font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; transition: background 0.25s, border-color 0.25s, transform 0.2s; } .menu-cta-col-btn:hover { background: rgba(255,255,255,0.15); transform: translateY(-2px); } @media (max-width: 1024px) { .menu-cta-col:first-child { padding-right: 48px; } .menu-cta-col:last-child { padding-left: 48px; } } @media (max-width: 700px) { .menu-cta-section { padding: 72px 24px 88px; } .menu-cta-section-heading { font-size: clamp(32px, 7vw, 72px); } .menu-cta-intro { margin-bottom: 48px; } .menu-cta-grid { grid-template-columns: 1fr; gap: 60px; } .menu-cta-col:first-child { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.25); padding-right: 0; padding-bottom: 60px; } .menu-cta-col:last-child { padding-left: 0; } .page-hero {padding-top: 72px;} } /* ── Interior gallery — distinct from home page amber carousel. White background so food photos read clean against it. Home page .photo-carousel-wrap (amber) is unaffected. */ .photo-carousel-wrap--interior { background: var(--white); padding-bottom: 0; } /* ══════════════════════════════════════════════════════ INDIVIDUAL LOCATION MENU PAGES Folly Beach and Coosaw Creek dedicated menu pages. Shared patterns for hero backgrounds + menu embed section. ══════════════════════════════════════════════════════ */ /* ── Per-location hero backgrounds ── */ .page-hero-bg--folly { background-image: url('/images/FollyBeachMenuPageHeroImage.jpg'); background-image: image-set( url('/images/FollyBeachMenuPageHeroImage.webp') type('image/webp'), url('/images/FollyBeachMenuPageHeroImage.jpg') type('image/jpeg') ); } .page-hero-bg--coosaw { background-image: url('/images/CoosawCreekMenuPageHeroImage.jpg'); background-image: image-set( url('/images/CoosawCreekMenuPageHeroImage.webp') type('image/webp'), url('/images/CoosawCreekMenuPageHeroImage.jpg') type('image/jpeg') ); } .page-hero-bg--creek-location { background-image: url('/images/CoosawCreekLocationPageHeroBgImage.jpg'); background-image: image-set( url('/images/CoosawCreekLocationPageHeroBgImage.webp') type('image/webp'), url('/images/CoosawCreekLocationPageHeroBgImage.jpg') type('image/jpeg') ); } /* ── Menu embed section — white bg with subtle sand overlay ── Sand pattern at normal brightness + low opacity so it reads as a fine texture on white (amber pages use brightness(10)). The Elfsight widget renders inside this wrapper. */ .menu-embed-section { position: relative; /* Exact match to Elfsight widget internal background: rgb(253,253,248) = #fdfdf8 */ background-color: #fdfdf8; overflow: hidden; padding: 72px 40px 80px; scroll-margin-top: var(--nav-h); } .menu-embed-section::before { content: ''; position: absolute; inset: 0; background-image: url('/images/SandBackgroundPattern.svg'); background-repeat: repeat; background-size: 900px 300px; opacity: 0.07; pointer-events: none; z-index: 0; } .menu-embed-section > * { position: relative; z-index: 1; } /* Section intro — eyebrow + heading above the embed */ .menu-embed-intro { /* Wider container so the address heading fits on one line at desktop widths */ max-width: 960px; margin: 0 auto 48px; text-align: center; } .menu-embed-eyebrow { font-family: var(--font-body); font-size: 20px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 16px; } .menu-embed-heading { font-family: var(--font-heading); /* Smaller clamp — address subtitle doesn't need to be huge; at 2.8vw on 1200px+ screens this fits on one line */ font-size: clamp(22px, 2.8vw, 38px); font-weight: 400; line-height: 1.2; /* Teal matches the brand — more character than plain black on cream */ color: var(--teal); letter-spacing: -0.01em; white-space: nowrap; } /* Pick Up / Delivery CTA — sits below the address heading. Body font, muted teal text with an amber underlined link for the call to action. */ .menu-embed-cta { font-family: var(--font-body); font-size: clamp(15px, 1.5vw, 17px); line-height: 1.5; color: var(--teal); margin: 18px auto 0; max-width: 640px; } .menu-embed-cta a { color: var(--amber); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: opacity 0.2s ease; } .menu-embed-cta a:hover { opacity: 0.75; } /* Widget container — max-width so it doesn't stretch too wide */ .menu-embed-widget { max-width: 1100px; margin: 0 auto; position: relative; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 4px 12px rgba(0, 0, 0, 0.03), 0 16px 40px rgba(0, 0, 0, 0.03); } .menu-embed-widget::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 10; border-radius: 2px; box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.025); } @media (max-width: 860px) { /* Allow heading to wrap on smaller screens */ .menu-embed-heading { white-space: normal; } } @media (max-width: 700px) { .menu-embed-section { padding: 56px 20px 64px; } .menu-embed-heading { font-size: clamp(18px, 4.5vw, 28px); } } /* ══════════════════════════════════════════════════════ ADDITIONAL INTERIOR PAGE HERO BACKGROUNDS Locations and About page hero backgrounds. ══════════════════════════════════════════════════════ */ .page-hero-bg--locations { /* JPG fallback for browsers without image-set() / webp support */ background-image: url('/images/LocationPageHeroBgImage.jpg'); background-image: image-set( url('/images/LocationPageHeroBgImage.webp') type('image/webp'), url('/images/LocationPageHeroBgImage.jpg') type('image/jpeg') ); } .page-hero-bg--about { /* JPG fallback for browsers without image-set() / webp support */ background-image: url('/images/AboutPageHeroBgImage.jpg'); background-image: image-set( url('/images/AboutPageHeroBgImage.webp') type('image/webp'), url('/images/AboutPageHeroBgImage.jpg') type('image/jpeg') ); } /* ══════════════════════════════════════════════════════ LOCATIONS PAGE — LOCATION CTA CARDS Two full-bleed cards with building photo backgrounds. Each links to the dedicated location page. ══════════════════════════════════════════════════════ */ .loc-cta-section { display: grid; grid-template-columns: 1fr 1fr; } .loc-cta-card { position: relative; min-height: 80vh; display: flex; align-items: center; justify-content: center; overflow: hidden; text-decoration: none; } .loc-cta-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; background-color: #0a2e30; transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .loc-cta-bg--folly { background-image: url('/images/folly-beach-building.jpg'); background-image: image-set( url('/images/folly-beach-building.webp') type('image/webp'), url('/images/folly-beach-building.jpg') type('image/jpeg') ); } .loc-cta-bg--coosaw { background-image: url('/images/coosaw-creek-building.jpg'); background-image: image-set( url('/images/coosaw-creek-building.webp') type('image/webp'), url('/images/coosaw-creek-building.jpg') type('image/jpeg') ); } .loc-cta-card:hover .loc-cta-bg { transform: scale(1.04); } .loc-cta-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( to top, rgba(0,30,32,0.88) 0%, rgba(0,50,55,0.52) 45%, rgba(0,20,22,0.22) 100% ); transition: background 0.4s ease; } .loc-cta-card:hover .loc-cta-overlay { background: linear-gradient( to top, rgba(0,30,32,0.95) 0%, rgba(0,50,55,0.62) 45%, rgba(0,20,22,0.30) 100% ); } /* Vertical divider between cards */ .loc-cta-card:first-child { border-right: 1px solid rgba(255,255,255,0.12); } .loc-cta-content { position: relative; z-index: 2; text-align: center; padding: 60px 48px; display: flex; flex-direction: column; align-items: center; gap: 0; } .loc-cta-tag { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.30em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 20px; } .loc-cta-name { font-family: var(--font-heading); font-size: clamp(44px, 5.5vw, 76px); font-weight: 600; line-height: 1.0; color: var(--white); letter-spacing: -0.01em; text-shadow: 0 2px 16px rgba(0,0,0,0.45); margin-bottom: 16px; } .loc-cta-address { font-family: var(--font-body); font-size: clamp(14px, 1.3vw, 16px); line-height: 1.6; color: rgba(255,255,255,0.72); margin-bottom: 10px; } .loc-cta-phone { font-family: var(--font-body); font-size: clamp(14px, 1.3vw, 16px); color: rgba(255,255,255,0.60); margin-bottom: 40px; text-decoration: none; transition: color 0.2s; } .loc-cta-phone:hover { color: var(--amber); } .loc-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* Primary CTA — solid amber fill */ .loc-cta-btn { display: inline-block; padding: 13px 32px; background: transparent; border: 2px solid var(--white); color: var(--white); font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; transition: background 0.25s, border-color 0.25s, transform 0.2s; } .loc-cta-btn:hover { background: var(--amber); border-color: var(--amber); transform: translateY(-2px); } .loc-cta-btn--ghost { background: transparent; border-color: rgba(255,255,255,0.45); color: rgba(255,255,255,0.80); } .loc-cta-btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: var(--white); color: var(--white); transform: translateY(-2px); } @media (max-width: 860px) { .loc-cta-section { grid-template-columns: 1fr; } .loc-cta-card { min-height: 70vw; } .loc-cta-card:first-child { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); } .loc-cta-content { padding: 48px 32px; } } /* ══════════════════════════════════════════════════════ ABOUT PAGE — STORY SECTION Editorial magazine-style layout for the origin story. Cream background, teal accents, amber pull quotes. ══════════════════════════════════════════════════════ */ .about-story { background-color: #fdfdf8; position: relative; overflow: hidden; padding: 100px 40px 80px; } .about-story::before { content: ''; position: absolute; inset: 0; background-image: url('/images/SandBackgroundPattern.svg'); background-repeat: repeat; background-size: 900px 300px; opacity: 0.06; pointer-events: none; } .about-story > * { position: relative; z-index: 1; } /* Section intro */ .about-intro { text-align: center; max-width: 820px; margin: 0 auto 72px; } .about-eyebrow { font-family: var(--font-body); font-size: 20px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 20px; } .about-heading { font-family: var(--font-heading); font-size: clamp(44px, 5.5vw, 78px); font-weight: 400; line-height: 1.08; color: var(--amber); letter-spacing: -0.01em; margin-bottom: 0; } /* Timeline */ .about-timeline { display: flex; align-items: center; justify-content: center; gap: 0; max-width: 680px; margin: 0 auto 80px; position: relative; } .about-timeline-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--teal), transparent); opacity: 0.35; } .about-timeline-node { display: flex; flex-direction: column; align-items: center; padding: 0 32px; position: relative; } .about-timeline-year { font-family: var(--font-heading); font-size: clamp(28px, 3.2vw, 44px); font-weight: 600; color: var(--teal); line-height: 1; margin-bottom: 8px; } .about-timeline-label { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(0,85,90,0.65); text-align: center; max-width: 130px; line-height: 1.4; } .about-timeline-dot { width: 8px; height: 8px; background: var(--amber); border-radius: 50%; margin-top: 14px; } /* Story body — 2-column editorial grid */ .about-body { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 0 80px; align-items: start; } .about-para { font-family: var(--font-body); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.85; color: #004f55; margin-bottom: 32px; } /* Full-width paragraph that spans both columns */ .about-para--full { grid-column: 1 / -1; max-width: 820px; margin-left: auto; margin-right: auto; text-align: center; } /* Pull quote — large italic styled block */ .about-pullquote { grid-column: 1 / -1; text-align: center; padding: 88px 40px 80px; margin: 32px auto 64px; max-width: 820px; position: relative; border-top: 1px solid rgba(0,136,142,0.22); border-bottom: 1px solid rgba(0,136,142,0.22); } .about-pullquote::before { content: '\201C'; font-family: var(--font-heading); font-size: 160px; line-height: 0.6; color: var(--teal); opacity: 0.15; position: absolute; top: 40px; left: 50%; transform: translateX(-50%); pointer-events: none; } .about-pullquote-text { font-family: var(--font-heading); font-size: clamp(22px, 2.8vw, 38px); font-weight: 400; font-style: italic; color: var(--teal); line-height: 1.4; letter-spacing: -0.01em; position: relative; z-index: 1; } .about-pullquote-attr { display: block; font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(0,85,90,0.55); margin-top: 20px; position: relative; z-index: 1; } /* Drop cap on first paragraph */ .about-para--dropcap::first-letter { font-family: var(--font-heading); font-size: clamp(58px, 6vw, 80px); font-weight: 600; color: var(--teal); float: left; line-height: 0.78; margin: 6px 12px 0 0; } @media (max-width: 900px) { .about-story { padding: 72px 24px 64px; } .about-body { grid-template-columns: 1fr; gap: 0; } .about-para--full { grid-column: 1; } .about-intro { margin: 0 auto 44px; } .about-timeline { margin: 0 auto 44px; flex-wrap: wrap; gap: 24px; } .about-timeline-line { display: none; } /* Readability + spacing on mobile */ .about-para { font-size: 17px; line-height: 1.85; margin-bottom: 22px; } .about-para--full { max-width: 680px; text-align: left; } .about-pullquote { grid-column: 1; padding: 32px 0; margin: 18px auto 28px; } .about-pullquote::before { font-size: 120px; top: 18px; } .about-pullquote-text { font-size: 26px; line-height: 1.35; } } @media (max-width: 600px) { .about-story { padding: 56px 18px 52px; } .about-eyebrow { font-size: 16px; margin-bottom: 14px; } .about-heading { font-size: clamp(34px, 9vw, 44px); line-height: 1.08; } .about-timeline { display: block;} .about-timeline-node { padding: 0 14px 0; } .about-timeline { margin: 0 auto 44px;} .about-timeline .about-timeline-node:last-child { padding-bottom: 0; } .about-timeline-year { font-size: 34px; } .about-timeline-label { font-size: 14px; letter-spacing: 0.14em; } .about-para { font-size: 18px; line-height: 1.9; } } /* ══════════════════════════════════════════════════════ ABOUT PAGE — PHOTO GALLERY Masonry-style bento grid with lightbox. Placeholder images sized with actual dimensions noted. id="gallery" for anchor linking from other pages. ══════════════════════════════════════════════════════ */ .about-gallery { background-color: var(--teal); background-image: radial-gradient( ellipse 80% 50% at 50% 0%, rgba(0, 180, 190, 0.35) 0%, transparent 70% ), radial-gradient( ellipse 60% 40% at 20% 100%, rgba(0, 50, 55, 0.45) 0%, transparent 65% ), radial-gradient( ellipse 50% 35% at 80% 80%, rgba(0, 50, 55, 0.35) 0%, transparent 60% ); padding: 72px clamp(40px, 8vw, 160px) 60px; position: relative; } .about-gallery-intro { text-align: center; margin-bottom: 56px; } .about-gallery-eyebrow { font-family: var(--font-body); font-size: 20px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 16px; } .about-gallery-heading { font-family: var(--font-heading); font-size: clamp(36px, 4.5vw, 60px); font-weight: 400; line-height: 1.1; color: var(--white); letter-spacing: -0.01em; margin-bottom: 16px; } .about-gallery-sub { font-family: var(--font-heading); font-size: clamp(16px, 2vw, 22px); font-weight: 400; font-style: italic; color: rgba(255,255,255,0.75); } /* Gallery grid — 4 columns, 280px auto rows */ .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 480px; gap: 40px; max-width: 1400px; margin: 0 auto; } /* Uniform grid — all items same size */ .gallery-item { position: relative; overflow: hidden; cursor: pointer; background: var(--teal); } /* Gallery scroll-reveal animation .will-animate is added by JS — items start invisible. Without JS, items are fully visible (no opacity: 0 in base CSS). .is-visible added by IntersectionObserver as each row enters viewport. Stagger: right column gets 100ms delay after left column. */ .gallery-item.will-animate { opacity: 0; transform: translateY(28px); /* No transition here — removing .is-visible snaps back instantly so items are already reset before they re-enter on next scroll */ } .gallery-item.will-animate.is-visible { opacity: 1; transform: translateY(0); /* Transition only on entry — smooth in, instant out */ transition: opacity 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .gallery-item:hover img { transform: scale(1.06); } /* Hover overlay */ .gallery-item-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0,136,142,0.65) 0%, transparent 60% ); opacity: 0; transition: opacity 0.35s ease; z-index: 1; } .gallery-item:hover .gallery-item-overlay { opacity: 1; } /* Image number badge */ .gallery-item-num { position: absolute; bottom: 16px; right: 16px; z-index: 2; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.15em; color: rgba(255,255,255,0.85); opacity: 0; transition: opacity 0.35s ease; } .gallery-item:hover .gallery-item-num { opacity: 1; } /* Expand icon */ .gallery-item-expand { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); z-index: 2; width: 48px; height: 48px; border: 2px solid rgba(255,255,255,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.35s ease, transform 0.35s ease; } .gallery-item-expand svg { width: 18px; height: 18px; stroke: var(--white); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .gallery-item:hover .gallery-item-expand { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* Placeholder dimension label (shown on placeholder images) */ .gallery-item-dims { display: none; } @media (max-width: 900px) { .about-gallery { padding: 56px 20px 40px; } .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 300px; gap: 20px; } /* Uniform grid on mobile too */ } @media (max-width: 540px) { .gallery-grid { grid-auto-rows: 260px; } } /* ══════════════════════════════════════════════════════ LIGHTBOX — Full-screen gallery viewer Fixed overlay, centered image, prev/next/close controls. Opened by clicking .gallery-item, closed by ESC/click outside. ══════════════════════════════════════════════════════ */ .lightbox { position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,0); display: flex; align-items: center; justify-content: center; pointer-events: none; transition: background 0.3s ease; } .lightbox.is-open { background: rgba(0,0,0,0.95); pointer-events: auto; } .lightbox-img-wrap { position: relative; max-width: 90vw; max-height: 88vh; opacity: 0; transform: scale(0.96); transition: opacity 0.3s ease, transform 0.3s ease; } .lightbox.is-open .lightbox-img-wrap { opacity: 1; transform: scale(1); } .lightbox-img { display: block; max-width: 90vw; max-height: 80vh; object-fit: contain; border-radius: 2px; } /* Controls */ /* Lightbox controls hidden when closed — shown only when .is-open */ .lightbox-close, .lightbox-prev, .lightbox-next, .lightbox-counter { opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .lightbox.is-open .lightbox-close, .lightbox.is-open .lightbox-prev, .lightbox.is-open .lightbox-next, .lightbox.is-open .lightbox-counter { opacity: 1; pointer-events: auto; } .lightbox-close { position: fixed; top: 24px; right: 28px; width: 48px; height: 48px; background: none; border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--white); transition: border-color 0.2s, background 0.2s; z-index: 9501; } .lightbox-close:hover { border-color: var(--amber); background: rgba(251,170,38,0.12); } .lightbox-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; } .lightbox-prev, .lightbox-next { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.20); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--white); transition: background 0.2s, border-color 0.2s; z-index: 9501; } .lightbox-prev { left: 20px; } .lightbox-next { right: 20px; } .lightbox-prev:hover, .lightbox-next:hover { background: rgba(251,170,38,0.2); border-color: var(--amber); } .lightbox-prev svg, .lightbox-next svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; } .lightbox-counter { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.18em; color: rgba(255,255,255,0.55); z-index: 9501; } @media (max-width: 700px) { .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } .lightbox-prev, .lightbox-next { width: 40px; height: 40px; } } /* ══════════════════════════════════════════════════════ LOCATIONS PAGE — MODERN MINIMALIST REDESIGN Clean card layout: photo strip at top, white body below. Replaces the old full-bleed image card (.loc-cta-*) design. ══════════════════════════════════════════════════════ */ .loc-modern-section { background: var(--white); padding: 80px 40px 100px; } .loc-modern-intro { text-align: center; max-width: 680px; margin: 0 auto 64px; } .loc-modern-eyebrow { font-family: var(--font-body); font-size: 20px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 16px; } .loc-modern-intro-heading { font-family: var(--font-heading); font-size: clamp(36px, 4vw, 56px); font-weight: 400; line-height: 1.1; color: var(--black); letter-spacing: -0.01em; } .loc-modern-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1200px; margin: 0 auto; } .loc-modern-card { background: var(--white); border: 1px solid rgba(0,0,0,0.08); overflow: hidden; transition: box-shadow 0.35s ease, transform 0.35s ease; } .loc-modern-card:hover { box-shadow: 0 20px 56px rgba(0,0,0,0.11); transform: translateY(-4px); } /* Photo strip */ .loc-modern-photo { height: 280px; overflow: hidden; position: relative; } .loc-modern-photo-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .loc-modern-card:hover .loc-modern-photo-bg { transform: scale(1.04); } .loc-modern-photo-bg--folly { background-image: url('/images/folly-beach-building.jpg'); background-image: image-set( url('/images/folly-beach-building.webp') type('image/webp'), url('/images/folly-beach-building.jpg') type('image/jpeg') ); } .loc-modern-photo-bg--coosaw { background-image: url('/images/coosaw-creek-building.jpg'); background-image: image-set( url('/images/coosaw-creek-building.webp') type('image/webp'), url('/images/coosaw-creek-building.jpg') type('image/jpeg') ); } /* Card body */ .loc-modern-body { padding: 36px 40px 44px; border-top: 3px solid var(--teal); } .loc-modern-tag { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 12px; } .loc-modern-name { font-family: var(--font-heading); font-size: clamp(36px, 3.8vw, 52px); font-weight: 400; line-height: 1.05; color: var(--black); letter-spacing: -0.01em; margin-bottom: 20px; } .loc-modern-info { font-style: normal; font-family: var(--font-body); font-size: 15px; line-height: 1.75; color: rgba(13,26,27,0.62); margin-bottom: 32px; } .loc-modern-info a { color: rgba(13,26,27,0.62); transition: color 0.2s; } .loc-modern-info a:hover { color: var(--teal); } .loc-modern-actions { display: flex; flex-wrap: wrap; gap: 10px; } /* Primary button — teal fill */ .loc-modern-btn { display: inline-block; padding: 12px 24px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; text-decoration: none; background: var(--teal); border: 2px solid var(--teal); color: var(--white); transition: background 0.22s, border-color 0.22s, transform 0.18s; } .loc-modern-btn:hover { background: #006f74; border-color: #006f74; transform: translateY(-2px); } /* Ghost buttons — teal outline */ .loc-modern-btn--outline { background: transparent; color: var(--teal); } .loc-modern-btn--outline:hover { background: var(--teal); border-color: var(--teal); color: var(--white); } @media (max-width: 900px) { .loc-modern-grid { grid-template-columns: 1fr; gap: 28px; } .loc-modern-photo { height: 220px; } } @media (max-width: 700px) { .loc-modern-section { padding: 56px 20px 72px; } .loc-modern-body { padding: 28px 24px 36px; } .loc-modern-actions { gap: 8px; } } /* ══════════════════════════════════════════════════════ INTERIOR PAGE SCROLL-ENTRANCE ANIMATIONS Applied via data-anim attributes on interior pages only. Home page (index.php) has no data-anim elements — unaffected. Pattern: JS adds .will-enter (hides element); without JS, elements stay fully visible. IntersectionObserver adds .in-view on scroll. Fires once per element (section text, not the gallery which has its own repeating system). Transition lives only on .will-enter.in-view so the initial hide is instant, entry is smooth. ══════════════════════════════════════════════════════ */ /* Initial hidden states — applied by JS */ [data-anim].will-enter { opacity: 0; } [data-anim="fade-up"].will-enter { transform: translateY(30px); } [data-anim="fade-down"].will-enter { transform: translateY(-18px); } [data-anim="fade-left"].will-enter { transform: translateX(-44px); } [data-anim="fade-right"].will-enter { transform: translateX(44px); } /* Visible state — added by IntersectionObserver */ [data-anim].will-enter.in-view { opacity: 1; transform: none; transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* ── Coming Soon tooltip on Privacy Policy link ────────── CSS-only tooltip using data-tooltip attribute + ::after. Appears above the link on hover, styled to match footer. */ .footer-coming-soon { position: relative; } .footer-coming-soon::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: rgba(0, 50, 55, 0.92); color: var(--white); font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 11px; border-radius: 3px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } /* Small triangle pointing down */ .footer-coming-soon::before { content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: rgba(0, 50, 55, 0.92); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .footer-coming-soon:hover::after, .footer-coming-soon:focus::after, .footer-coming-soon:hover::before, .footer-coming-soon:focus::before { opacity: 1; } /* ══════════════════════════════════════════════════════ LOCATIONS PAGE — FULL-BLEED 50/50 REDESIGN Mirrors the home page locations aesthetic: two large side-by-side panels, building photo bg, overlay content. All 4 CTAs on one row: Location Details, View Menu, Get Directions, Call. ══════════════════════════════════════════════════════ */ .loc-full-section { display: grid; grid-template-columns: 1fr 1fr; } .loc-full-card { position: relative; min-height: 85vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .loc-full-card:first-child { /* No border — seamless join, just like home page */ } .loc-full-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: #0a2e30; transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .loc-full-card:hover .loc-full-bg { transform: scale(1.04); } .loc-full-bg--folly { background-image: url('/images/folly-beach-building.jpg'); background-image: image-set( url('/images/folly-beach-building.webp') type('image/webp'), url('/images/folly-beach-building.jpg') type('image/jpeg') ); } .loc-full-bg--coosaw { background-image: url('/images/coosaw-creek-building.jpg'); background-image: image-set( url('/images/coosaw-creek-building.webp') type('image/webp'), url('/images/coosaw-creek-building.jpg') type('image/jpeg') ); } .loc-full-overlay { position: absolute; inset: 0; background: /* Radial vignette: solid dark at text center, transparent at photo edges */ radial-gradient( ellipse 80% 70% at 50% 62%, rgba(0, 25, 28, 0.88) 0%, rgba(0, 50, 58, 0.65) 35%, rgba(0, 80, 90, 0.28) 62%, transparent 82% ), /* Blue overlay to improve text legibility on photos */ linear-gradient( rgba(0, 85, 140, 0.44), rgba(0, 85, 140, 0.44) ), /* Teal atmospheric wash — lighter so edges show the photo clearly */ linear-gradient( rgba(0, 100, 110, 0.22), rgba(0, 100, 110, 0.22) ); transition: background 0.4s ease; } .loc-full-card:hover .loc-full-overlay { background: radial-gradient( ellipse 80% 70% at 50% 62%, rgba(0, 25, 28, 0.92) 0%, rgba(0, 50, 58, 0.72) 35%, rgba(0, 80, 90, 0.32) 62%, transparent 82% ), linear-gradient( rgba(0, 85, 140, 0.52), rgba(0, 85, 140, 0.52) ), linear-gradient( rgba(0, 100, 110, 0.28), rgba(0, 100, 110, 0.28) ); } .loc-full-content { position: relative; z-index: 2; text-align: center; padding: 64px clamp(32px, 5vw, 80px); display: flex; flex-direction: column; align-items: center; gap: 10px; } .loc-full-tag { font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--amber); margin-bottom: 2px; } .loc-full-name { font-family: var(--font-heading); font-size: clamp(48px, 5.5vw, 76px); font-weight: 600; line-height: 1.0; letter-spacing: -0.01em; color: var(--white); text-shadow: 0 2px 16px rgba(0,0,0,0.45); } .loc-full-vibe { font-family: var(--font-heading); font-size: clamp(16px, 1.8vw, 22px); font-weight: 400; font-style: italic; color: rgba(255,255,255,0.78); margin-bottom: 4px; } .loc-full-address { font-family: var(--font-body); font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.60); } .loc-full-address a { color: inherit; text-decoration: none; transition: color 0.2s; } .loc-full-address a:hover { color: var(--amber); } .loc-full-phone { font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,0.50); text-decoration: none; transition: color 0.2s; margin-bottom: 8px; } .loc-full-phone:hover { color: var(--amber); } /* 4-button row — all on one line */ .loc-full-actions { display: flex; flex-wrap: nowrap; gap: 8px; justify-content: center; margin-top: 6px; } .loc-full-btn { display: inline-block; padding: 13px 20px; font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: none; /* keep Title Case from HTML */ text-decoration: none; white-space: nowrap; background: var(--white); border: 2px solid var(--white); color: var(--teal); transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.18s; } .loc-full-btn:hover { background: var(--amber); border-color: var(--amber); color: var(--white); transform: translateY(-2px); } .loc-full-btn--ghost { background: transparent; border-color: rgba(255,255,255,0.45); color: rgba(255,255,255,0.82); } .loc-full-btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: var(--white); color: var(--white); } /* Smaller desktops + laptop view → 2×2 stacked grid (font bumped for readability) */ @media (max-width: 1600px) { .loc-full-actions { flex-wrap: wrap; gap: 10px; } .loc-full-btn { flex: 0 0 calc(50% - 5px); text-align: center; font-size: 15px; padding: 15px 18px; } } @media (max-width: 860px) { .loc-full-section { grid-template-columns: 1fr; } .loc-full-card { min-height: 80vw; } .loc-full-card:first-child { border-right: none; border-bottom: none; } } @media (max-width: 540px) { .loc-full-card { min-height: 90vw; } .loc-full-content { padding: 48px 20px; } .loc-full-btn { font-size: 16px; padding: 12px 18px; letter-spacing: 0.04em; min-width: 150px; } } /* ══════════════════════════════════════════════════════ LOCATION DETAIL PAGES — folly-beach.php / coosaw-creek.php Shared CSS for all individual location detail sections. Prefix: .loc-detail-* ══════════════════════════════════════════════════════ */ /* Hero bg for Folly Beach detail page — building photo */ .page-hero-bg--folly-detail { background-image: url('/images/FollyBeachLocationPageBgImage.jpg'); background-image: image-set( url('/images/FollyBeachLocationPageBgImage.webp') type('image/webp'), url('/images/FollyBeachLocationPageBgImage.jpg') type('image/jpeg') ); background-position: center 40%; } /* ── Hours Section ──────────────────────────────────── */ .loc-detail-hours { background: #fdfdf8; padding: 80px clamp(24px, 8vw, 160px); position: relative; overflow: hidden; } .loc-detail-hours::before { content: ''; position: absolute; inset: 0; background-image: url('/images/SandBackgroundPattern.svg'); background-repeat: repeat; background-size: 900px 300px; opacity: 0.05; pointer-events: none; } .loc-detail-hours > * { position: relative; z-index: 1; } .loc-detail-hours-intro { text-align: center; margin-bottom: 56px; } .loc-detail-section-eyebrow { font-family: var(--font-body); font-size: 19px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 14px; } .loc-detail-section-heading { font-family: var(--font-heading); font-size: clamp(34px, 4vw, 52px); font-weight: 400; line-height: 1.1; color: #00555a; letter-spacing: -0.01em; } .loc-detail-hours-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 860px; margin: 0 auto; } .loc-detail-hours-card { background: var(--white); border-top: 3px solid var(--teal); padding: 32px 36px 36px; box-shadow: 0 4px 24px rgba(0,0,0,0.06); } .loc-detail-hours-card-title { font-family: var(--font-heading); font-size: 22px; font-weight: 600; color: var(--teal); margin-bottom: 20px; } .loc-detail-hours-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(0,136,142,0.10); gap: 16px; } .loc-detail-hours-row:last-child { border-bottom: none; } .loc-detail-hours-days { font-family: var(--font-body); font-size: 15px; color: #004f55; flex-shrink: 0; } .loc-detail-hours-time { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--teal); text-align: right; } @media (max-width: 700px) { .loc-detail-hours-grid { grid-template-columns: 1fr; gap: 20px; } .loc-detail-hours { padding: 64px 24px; } } /* ── Address/Map Section ────────────────────────────── */ .loc-detail-address { background: var(--teal); background-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,180,190,0.30) 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 20% 100%, rgba(0,40,45,0.40) 0%, transparent 65%); padding: 80px clamp(24px, 8vw, 160px); text-align: center; } .loc-detail-address-name { font-family: var(--font-heading); font-size: clamp(32px, 4vw, 52px); font-weight: 400; color: var(--white); margin-bottom: 16px; } .loc-detail-address-street { font-family: var(--font-body); font-size: 18px; line-height: 1.7; color: rgba(255,255,255,0.82); margin-bottom: 8px; } .loc-detail-address-phone { font-family: var(--font-body); font-size: 18px; color: rgba(255,255,255,0.70); text-decoration: none; display: inline-block; margin-bottom: 36px; transition: color 0.2s; } .loc-detail-address-phone:hover { color: var(--amber); } .loc-detail-directions-btn { display: inline-block; padding: 15px 40px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; background: var(--white); border: 2px solid var(--white); color: var(--teal); text-decoration: none; transition: background 0.22s, color 0.22s, transform 0.18s; } .loc-detail-directions-btn:hover { background: var(--amber); border-color: var(--amber); color: var(--white); transform: translateY(-2px); } /* ── Body Content Section ───────────────────────────── */ .loc-detail-body { background: #fdfdf8; padding: 88px clamp(24px, 8vw, 160px); position: relative; overflow: hidden; } .loc-detail-body::before { content: ''; position: absolute; inset: 0; background-image: url('/images/SandBackgroundPattern.svg'); background-repeat: repeat; background-size: 900px 300px; opacity: 0.05; pointer-events: none; } .loc-detail-body > * { position: relative; z-index: 1; } .loc-detail-body-inner { max-width: 900px; margin: 0 auto; } .loc-detail-body-para { font-family: var(--font-body); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.85; color: #004f55; margin-bottom: 28px; } .loc-detail-body-para:last-child { margin-bottom: 0; } .loc-detail-body-para--dropcap::first-letter { font-family: var(--font-heading); font-size: clamp(58px, 6vw, 80px); font-weight: 600; color: var(--teal); float: left; line-height: 0.78; margin: 6px 12px 0 0; } /* ── Featured In Section ────────────────────────────── */ .loc-detail-featured { background: #00555a; background-image: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0,180,190,0.22) 0%, transparent 70%); padding: 80px clamp(24px, 8vw, 160px); text-align: center; } .loc-detail-featured-intro { max-width: 720px; margin: 0 auto 48px; } .loc-detail-featured-eyebrow { font-family: var(--font-body); font-size: 19px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 14px; } .loc-detail-featured-heading { font-family: var(--font-heading); font-size: clamp(30px, 3.5vw, 48px); font-weight: 400; line-height: 1.15; color: var(--white); letter-spacing: -0.01em; margin-bottom: 16px; } .loc-detail-featured-sub { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.72); } /* Responsive YouTube embed wrapper */ .loc-detail-video-wrap { position: relative; width: 100%; max-width: 800px; margin: 0 auto; padding-bottom: calc(56.25% * 800px / 100%); /* 16:9 at max-width */ height: 0; overflow: hidden; } /* Override: since max-width constrains the container, use a simpler approach with aspect-ratio */ .loc-detail-video-wrap { padding-bottom: 0; height: auto; aspect-ratio: 16 / 9; } .loc-detail-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; border-radius: 2px; } /* ── Gift Card Section ──────────────────────────────── */ .loc-detail-giftcard { background: var(--amber); padding: 80px clamp(24px, 8vw, 160px); text-align: center; position: relative; scroll-margin-top: var(--nav-h); } .loc-detail-giftcard-eyebrow { font-family: var(--font-body); font-size: 19px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.80); display: block; margin-bottom: 16px; } .loc-detail-giftcard-heading { font-family: var(--font-heading); font-size: clamp(32px, 4vw, 54px); font-weight: 400; line-height: 1.1; color: var(--white); letter-spacing: -0.01em; margin-bottom: 14px; } .loc-detail-giftcard-sub { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.80); white-space: nowrap; margin: 0 auto 36px; } @media (max-width: 860px) { .loc-detail-giftcard-sub { white-space: normal; max-width: 480px; } } .loc-detail-giftcard-btn { display: inline-block; padding: 15px 44px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; background: var(--teal); border: 2px solid var(--teal); color: var(--white); text-decoration: none; transition: background 0.22s, color 0.22s, border-color 0.22s, transform 0.18s; } .loc-detail-giftcard-btn:hover { background: transparent; border-color: var(--white); color: var(--white); transform: translateY(-2px); } /* ── Meet the Partner Section ───────────────────────── */ .loc-detail-partner { background: #fdfdf8; padding: 88px clamp(24px, 8vw, 160px); position: relative; overflow: hidden; } .loc-detail-partner::before { content: ''; position: absolute; inset: 0; background-image: url('/images/SandBackgroundPattern.svg'); background-repeat: repeat; background-size: 900px 300px; opacity: 0.05; pointer-events: none; } .loc-detail-partner > * { position: relative; z-index: 1; } .loc-detail-partner-inner { max-width: 760px; margin: 0 auto; text-align: center; } /* Profile photo placeholder */ .loc-detail-partner-photo { width: 220px; height: 220px; border-radius: 50%; background: rgba(0,136,142,0.10); border: 3px solid rgba(0,136,142,0.20); margin: 0 auto 28px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .loc-detail-partner-photo-placeholder { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(0,136,142,0.50); text-align: center; padding: 0 16px; } /* Replace with: ... */ .loc-detail-partner-img { width: 100%; height: 100%; object-fit: cover; display: block; } .loc-detail-partner-name { font-family: var(--font-heading); font-size: clamp(28px, 3vw, 42px); font-weight: 400; color: #00555a; margin-bottom: 8px; } .loc-detail-partner-title { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); margin-bottom: 16px; display: block; } .loc-detail-partner-email { font-family: var(--font-body); font-size: 16px; color: rgba(0,79,85,0.70); text-decoration: none; transition: color 0.2s; } .loc-detail-partner-email:hover { color: var(--teal); } /* ── Events Section ─────────────────────────────────── */ .loc-detail-events { background: var(--white); padding: 88px clamp(24px, 8vw, 160px); } .loc-detail-events-intro { text-align: center; margin-bottom: 56px; } .loc-detail-events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; max-width: 1100px; margin: 0 auto; } .loc-detail-event-card { border: 1px solid rgba(0,136,142,0.15); border-left: 4px solid var(--teal); padding: 22px 24px; background: #fdfdf8; transition: box-shadow 0.25s, transform 0.25s; } .loc-detail-event-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.07); transform: translateY(-2px); } .loc-detail-event-date { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 8px; } .loc-detail-event-name { font-family: var(--font-heading); font-size: 18px; font-weight: 600; color: #00555a; line-height: 1.3; } @media (max-width: 700px) { .loc-detail-events { padding: 64px 20px; } .loc-detail-events-grid { grid-template-columns: 1fr; } } /* ── Reviews Section ────────────────────────────────── */ .loc-detail-reviews { background: #fdfdf8; padding: 88px clamp(24px, 8vw, 160px); position: relative; overflow: hidden; } .loc-detail-reviews::before { content: ''; position: absolute; inset: 0; background-image: url('/images/SandBackgroundPattern.svg'); background-repeat: repeat; background-size: 900px 300px; opacity: 0.05; pointer-events: none; } .loc-detail-reviews > * { position: relative; z-index: 1; } .loc-detail-reviews-intro { text-align: center; margin-bottom: 56px; } .loc-detail-reviews-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1100px; margin: 0 auto; } .loc-detail-reviews-widget { background: var(--white); border-top: 3px solid var(--teal); padding: 32px; box-shadow: 0 4px 24px rgba(0,0,0,0.06); min-height: 240px; } .loc-detail-reviews-widget-label { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 20px; } @media (max-width: 760px) { .loc-detail-reviews-grid { grid-template-columns: 1fr; gap: 24px; } .loc-detail-reviews { padding: 64px 20px; } } /* ══════════════════════════════════════════════════════ FOLLY BEACH PAGE — SINGLE-LOCATION FIND US BANNER Inline version of the teal find-call section for the individual location page — Folly Beach only, full width. Appears directly below the hero. ══════════════════════════════════════════════════════ */ .loc-detail-find-us { background: var(--teal); background-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,180,190,0.28) 0%, transparent 70%), radial-gradient(ellipse 70% 50% at 50% 100%, rgba(0,30,35,0.12) 0%, transparent 65%); padding: 64px clamp(24px, 8vw, 160px); text-align: center; scroll-margin-top: var(--nav-h); } .loc-detail-find-us-eyebrow { font-family: var(--font-body); font-size: 19px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 14px; } .loc-detail-find-us-heading { font-family: var(--font-heading); font-size: clamp(30px, 3.5vw, 48px); font-weight: 400; line-height: 1.1; color: var(--white); letter-spacing: -0.01em; margin-bottom: 28px; } .loc-detail-find-us-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 56px; margin-bottom: 28px; } .loc-detail-find-us-item { display: flex; align-items: flex-start; gap: 12px; text-align: left; min-width: 180px; justify-content: center; } .loc-detail-find-us-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; color: var(--amber); } .loc-detail-find-us-text { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: rgba(255,255,255,0.80); } .loc-detail-find-us-text a { color: rgba(255,255,255,0.82); text-decoration: none; transition: color 0.2s; } .loc-detail-find-us-text a:hover { color: var(--amber); } .loc-detail-find-us-divider { width: 1px; background: rgba(255,255,255,0.15); align-self: stretch; } .loc-detail-find-us a.loc-detail-directions-btn { margin-left: -34px; } @media (max-width: 700px) { .loc-detail-find-us { padding: 56px 24px; } .loc-detail-find-us-meta { flex-direction: column; align-items: center; gap: 0; } .loc-detail-find-us-item { flex-direction: column; /* icon above text */ align-items: center; text-align: center; padding: 24px 16px; gap: 8px; } .loc-detail-find-us-icon { margin-top: 0; } /* Horizontal divider lines between items on mobile */ .loc-detail-find-us-divider { width: 60%; height: 1px; align-self: auto; } } /* ══════════════════════════════════════════════════════ COMBINED BODY + PARTNER SECTION The body content paragraphs flow directly into the partner profile at the bottom — one unified section. ══════════════════════════════════════════════════════ */ .loc-detail-body-partner { background: #fdfdf8; padding: 88px clamp(24px, 8vw, 160px) 80px; position: relative; overflow: hidden; } .loc-detail-body-partner::before { content: ''; position: absolute; inset: 0; background-image: url('/images/SandBackgroundPattern.svg'); background-repeat: repeat; background-size: 900px 300px; opacity: 0.05; pointer-events: none; } .loc-detail-body-partner > * { position: relative; z-index: 1; } /* Thin teal rule divider between body text and partner block */ .loc-detail-body-partner-divider { width: 60px; height: 2px; background: var(--teal); margin: 56px auto; opacity: 0.35; } /* Partner block — centered within the same section */ .loc-detail-partner-inner--combined { max-width: 580px; margin: 0 auto; text-align: center; } /* ══════════════════════════════════════════════════════ EVENTS SECTION — FULL BACKGROUND IMAGE Building photo covers the entire section with a deep monochrome teal overlay, so event cards float over it. ══════════════════════════════════════════════════════ */ /* Events section — symmetric left/right edge shading. Both sides are always identical regardless of section height. */ .loc-detail-events { background-color: var(--white); background-image: linear-gradient(to right, rgba(245,237,224,0.52) 0%, transparent 18%, transparent 82%, rgba(245,237,224,0.52) 100% ); } /* ══════════════════════════════════════════════════════ REVIEW CAROUSEL WIDGET Handcrafted to match Elfsight's Google Reviews Carousel with Photos style. Pure CSS/JS, no external dependencies. - Platform header with logo + overall rating - Slide cards: avatar, name, date, stars, text - Prev/next arrows + dot indicators - "Write a review" CTA footer ══════════════════════════════════════════════════════ */ .review-widget { background: var(--white); border-top: 3px solid var(--teal); box-shadow: 0 4px 24px rgba(0,0,0,0.08); padding: 0; overflow: hidden; } /* Widget header */ .review-widget-header { padding: 24px 28px 16px; border-bottom: 1px solid rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .review-widget-platform { display: flex; align-items: center; gap: 10px; } .review-widget-platform-logo { width: 32px; height: 32px; flex-shrink: 0; } .review-widget-platform-name { font-family: var(--font-body); font-size: 16px; font-weight: 700; color: #004f55; } .review-widget-overall { display: flex; align-items: center; gap: 8px; } .review-widget-score { font-family: var(--font-heading); font-size: 32px; font-weight: 600; color: #004f55; line-height: 1; } .review-widget-stars { display: flex; gap: 2px; } .review-widget-stars svg { width: 18px; height: 18px; } .review-widget-count { font-family: var(--font-body); font-size: 13px; color: rgba(0,79,85,0.55); display: block; } /* Carousel viewport */ .review-carousel-viewport { overflow: hidden; position: relative; } .review-carousel-track { display: flex; transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Individual review card */ .review-card { flex: 0 0 100%; padding: 24px 28px; min-height: 200px; } .review-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .review-card-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: rgba(0,136,142,0.12); } .review-card-avatar-initials { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 18px; font-weight: 700; color: var(--white); } .review-card-meta { flex: 1; min-width: 0; } .review-card-name { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: #004f55; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .review-card-date { font-family: var(--font-body); font-size: 12px; color: rgba(0,79,85,0.50); } .review-card-stars { display: flex; gap: 2px; margin-bottom: 12px; } .review-card-stars svg { width: 16px; height: 16px; } .review-card-text { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: rgba(0,79,85,0.80); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* Widget controls */ .review-widget-controls { padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(0,0,0,0.06); } .review-carousel-dots { display: flex; gap: 6px; align-items: center; } .review-carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(0,136,142,0.22); border: none; padding: 0; cursor: pointer; transition: background 0.2s, transform 0.2s; } .review-carousel-dot.is-active { background: var(--teal); transform: scale(1.25); } .review-carousel-arrows { display: flex; gap: 8px; } .review-carousel-arrow { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(0,136,142,0.25); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--teal); transition: background 0.2s, border-color 0.2s; } .review-carousel-arrow:hover { background: var(--teal); border-color: var(--teal); color: var(--white); } .review-carousel-arrow svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; } /* Widget footer CTA */ .review-widget-footer { padding: 14px 28px; border-top: 1px solid rgba(0,0,0,0.06); text-align: center; } .review-widget-footer a { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); text-decoration: none; transition: color 0.2s; } .review-widget-footer a:hover { color: var(--amber); } /* TripAdvisor bubble rating */ .review-ta-bubbles { display: flex; gap: 3px; align-items: center; margin-bottom: 12px; } .review-ta-bubble { width: 14px; height: 14px; border-radius: 50%; background: #00aa6c; } .review-ta-bubble--empty { background: rgba(0,170,108,0.20); } /* Reviews grid adjustments */ .loc-detail-reviews-grid { display: grid; grid-template-columns: 1fr; gap: 40px; max-width: 860px; margin: 0 auto; } /* ── Pick-Up Orders Section ──────────────────────────── */ .loc-detail-pickup { background: #fdfdf8; position: relative; overflow: hidden; padding: 80px clamp(24px, 8vw, 160px); text-align: center; scroll-margin-top: var(--nav-h); } .loc-detail-pickup::before { content: ''; position: absolute; inset: 0; background-image: url('/images/SandBackgroundPattern.svg'); background-repeat: repeat; background-size: 900px 300px; opacity: 0.05; pointer-events: none; } .loc-detail-pickup > * { position: relative; z-index: 1; } .loc-detail-pickup-card { background: var(--white); display: inline-block; padding: 18px 40px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); border: 1px solid rgba(0,136,142,0.12); margin-top: 8px; } @media (max-width: 700px) { .loc-detail-pickup-card { padding: 16px 28px; display: block; width: 100%; max-width: 280px; margin-left: auto; margin-right: auto; } } .loc-detail-pickup-eyebrow { font-family: var(--font-body); font-size: 19px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 14px; } .loc-detail-pickup-heading { font-family: var(--font-heading); font-size: clamp(28px, 3.2vw, 44px); font-weight: 400; line-height: 1.2; color: #00555a; margin-bottom: 20px; max-width: 700px; margin-left: auto; margin-right: auto; } .loc-detail-pickup-sub { font-family: var(--font-body); font-size: 18px; line-height: 1.7; color: rgba(0,79,85,0.65); white-space: nowrap; /* single line on desktop */ margin: 0 auto 8px; } @media (max-width: 860px) { .loc-detail-pickup-sub { white-space: normal; max-width: 480px; } } .loc-detail-pickup-phone { display: inline-block; font-family: var(--font-body); font-size: 20px; font-weight: 700; color: var(--teal); text-decoration: none; letter-spacing: 0.04em; border-bottom: 2px solid rgba(0,136,142,0.30); padding-bottom: 2px; transition: border-color 0.2s, color 0.2s; } .loc-detail-pickup-phone:hover { color: var(--amber); border-color: var(--amber); } /* ── Reviews — Simple Logo Section ──────────────────── */ .loc-detail-reviews-logos { /* Symmetric left/right edge shading — matches the events section treatment */ background-color: #fdfdf8; background-image: linear-gradient(to right, rgba(235,225,205,0.50) 0%, transparent 18%, transparent 82%, rgba(235,225,205,0.50) 100% ); padding: 80px clamp(24px, 8vw, 160px); text-align: center; } .loc-detail-reviews-logos-intro { margin-bottom: 56px; } .loc-detail-reviews-logos-eyebrow { font-family: var(--font-body); font-size: 19px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 14px; } .loc-detail-reviews-logos-heading { font-family: var(--font-heading); font-size: clamp(32px, 3.8vw, 52px); font-weight: 400; line-height: 1.1; color: #00555a; letter-spacing: -0.01em; } .loc-detail-reviews-logos-sub { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: rgba(0,79,85,0.65); white-space: nowrap; margin: 16px auto 0; } @media (max-width: 860px) { .loc-detail-reviews-logos-sub { white-space: normal; max-width: 480px; } } /* Two-logo row */ .loc-detail-reviews-logos-row { display: flex; align-items: stretch; /* cards grow to match the tallest one */ justify-content: center; gap: clamp(40px, 10vw, 120px); flex-wrap: wrap; } .loc-detail-reviews-logo-link { display: flex; flex-direction: column; align-items: center; justify-content: center; /* vertically center content in the shared height */ gap: 20px; text-decoration: none; transition: transform 0.25s ease, opacity 0.25s ease; padding: 48px 56px; border: 1px solid rgba(0,136,142,0.12); background: var(--white); box-shadow: 0 4px 20px rgba(0,0,0,0.05); min-width: 280px; } .loc-detail-reviews-logo-link:hover { transform: translateY(-4px); box-shadow: 0 10px 36px rgba(0,0,0,0.10); } .loc-detail-reviews-logo-img { height: 44px; /* default — overridden per logo below */ width: auto; display: block; } /* Google logo is wider/shorter — reduce height slightly for visual balance */ .loc-detail-reviews-logo-link:first-child .loc-detail-reviews-logo-img { height: 38px; } /* TripAdvisor logo is more compact — increase height to visually match Google */ .loc-detail-reviews-logo-link:last-child .loc-detail-reviews-logo-img { height: 64px; } .loc-detail-reviews-logo-label { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(0,79,85,0.60); } .loc-detail-reviews-logo-cta { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--teal); letter-spacing: 0.06em; } /* Vertical divider between the two logo cards */ .loc-detail-reviews-logo-div { width: 1px; align-self: stretch; /* grows to full card height */ background: rgba(0,136,142,0.18); } @media (max-width: 1366px) { .loc-detail-find-us-meta { gap: 0 29px; } } @media (max-width: 991px) { .loc-detail-reviews-logos-row { gap: clamp(25px, 4vw, 120px); } .loc-detail-find-us-meta { gap: 0 20px; } } @media (max-width:880px) { .loc-detail-find-us-meta { gap: 0 10px; } .loc-detail-find-us a.loc-detail-directions-btn { margin-left: -35px; } .loc-detail-find-us-item { min-width: 130px; } } @media (max-width: 767px) { /* Override desktop stretch — center-align stacked cards on mobile */ .loc-detail-reviews-logos-row { flex-direction: column; align-items: center; gap: 20px; } /* Divider matches card width exactly */ .loc-detail-reviews-logo-div { width: 100%; max-width: 280px; height: 1px; align-self: auto; } .mobile-br { display: block;} } @media (max-width: 700px) { .loc-detail-find-us a.loc-detail-directions-btn { margin-left: 0; } } @media (max-width: 600px) { .loc-detail-reviews-logo-link { min-width: 0; width: 100%; max-width: 280px; } } /* Review count above logo label */ .loc-detail-reviews-logo-count { font-family: var(--font-heading); font-size: clamp(28px, 2.8vw, 38px); font-weight: 600; color: #00555a; line-height: 1; } /* ══════════════════════════════════════════════════════ COOSAW CREEK — PICK UP & DELIVERY SECTION Extends the pickup section with delivery app logos. ══════════════════════════════════════════════════════ */ .loc-detail-delivery-row { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 32px; flex-wrap: wrap; } .loc-detail-delivery-label { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 20px; } .loc-detail-delivery-app { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 32px 48px; background: var(--white); border: 1px solid rgba(0,136,142,0.12); box-shadow: 0 4px 16px rgba(0,0,0,0.06); min-width: 220px; min-height: 100px; text-decoration: none; transition: transform 0.22s, box-shadow 0.22s; } .loc-detail-delivery-app:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.10); } .loc-detail-delivery-app-logo { height: 44px; /* base height */ width: auto; display: block; } /* DoorDash icon is compact — increase height so it visually matches UberEats wordmark */ .loc-detail-delivery-app:first-child .loc-detail-delivery-app-logo { height: 40px; } /* UberEats wordmark is wider — slightly smaller height balances visual weight */ .loc-detail-delivery-app:last-child .loc-detail-delivery-app-logo { height: 36px; } .loc-detail-delivery-app-name { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(0,79,85,0.55); } /* Placeholder box shown until real logos are uploaded */ .loc-detail-delivery-placeholder { width: 120px; height: 36px; background: rgba(0,136,142,0.08); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(0,136,142,0.45); } @media (max-width: 600px) { .loc-detail-delivery-row { flex-direction: column; gap: 16px; } .loc-detail-delivery-app { width: 100%; max-width: 280px; } } /* ══════════════════════════════════════════════════════ COOSAW CREEK — HOST YOUR EVENT SECTION ══════════════════════════════════════════════════════ */ .loc-detail-host-event { background: var(--teal); background-image: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0,180,190,0.28) 0%, transparent 70%), radial-gradient(ellipse 70% 50% at 50% 100%, rgba(0,30,35,0.12) 0%, transparent 65%); padding: 80px clamp(24px, 8vw, 160px); text-align: center; } .loc-detail-host-event-eyebrow { font-family: var(--font-body); font-size: 19px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 14px; } .loc-detail-host-event-heading { font-family: var(--font-heading); font-size: clamp(30px, 3.8vw, 52px); font-weight: 400; line-height: 1.1; color: var(--white); letter-spacing: -0.01em; margin-bottom: 24px; max-width: 820px; margin-left: auto; margin-right: auto; } .loc-detail-host-event-body { font-family: var(--font-body); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.75; color: rgba(255,255,255,0.82); max-width: 680px; margin: 0 auto 36px; } .loc-detail-host-event-phone { display: inline-block; font-family: var(--font-body); font-size: 20px; font-weight: 700; color: var(--white); text-decoration: none; border-bottom: 2px solid rgba(255,255,255,0.35); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; letter-spacing: 0.04em; } .loc-detail-host-event-phone:hover { color: var(--amber); border-color: var(--amber); } /* ══════════════════════════════════════════════════════ COOSAW CREEK — EVENTS: WEEKLY + ANNUAL SUBGROUPS ══════════════════════════════════════════════════════ */ .loc-detail-events-subheading { font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--teal); display: block; margin: 0 auto 16px; text-align: center; max-width: 1100px; } .loc-detail-events-subheading + .loc-detail-events-grid { margin-bottom: 48px; } /* Weekly event cards — amber accent */ .loc-detail-event-card--weekly { border-left-color: var(--teal); background: #fdfdf8; } .loc-detail-event-card--weekly .loc-detail-event-date { color: var(--teal); } /* ══════════════════════════════════════════════════════ COOSAW CREEK — TEXT SIGN-UP SECTION ══════════════════════════════════════════════════════ */ .loc-detail-sms-signup { /* Distinct light teal tint — clearly different from white (Events above) and cream #fdfdf8 (Reviews below), stays in the brand palette */ background: #eef7f7; background-image: linear-gradient(to right, rgba(0,136,142,0.06) 0%, transparent 20%, transparent 80%, rgba(0,136,142,0.06) 100% ); padding: 88px clamp(24px, 8vw, 160px); text-align: center; position: relative; overflow: hidden; } .loc-detail-sms-signup::before { content: ''; position: absolute; inset: 0; background-image: url('/images/SandBackgroundPattern.svg'); background-repeat: repeat; background-size: 900px 300px; opacity: 0.04; pointer-events: none; } .loc-detail-sms-signup > * { position: relative; z-index: 1; } .loc-detail-sms-eyebrow { font-family: var(--font-body); font-size: 19px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 14px; } .loc-detail-sms-heading { font-family: var(--font-heading); font-size: clamp(32px, 4vw, 56px); font-weight: 400; line-height: 1.1; color: #00555a; letter-spacing: -0.01em; margin-bottom: 20px; } .loc-detail-sms-sub { font-family: var(--font-body); font-size: 18px; line-height: 1.7; color: rgba(0,79,85,0.68); max-width: 580px; margin: 0 auto 40px; } .loc-detail-sms-btn { display: inline-block; padding: 16px 52px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; background: var(--teal); border: 2px solid var(--teal); color: var(--white); text-decoration: none; transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.18s; margin-bottom: 50px; } .loc-detail-sms-btn:hover { background: transparent; border-color: var(--teal); color: var(--teal); transform: translateY(-2px); } .loc-detail-sms-disclaimer { max-width: 580px; margin: 0 auto; font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: rgba(0,79,85,0.62); } .loc-detail-sms-disclaimer a { color: rgba(0,79,85,0.72); text-underline-offset: 3px; } .loc-detail-sms-disclaimer a:hover { color: rgba(0,79,85,0.9); } @media (max-width: 600px) { .loc-detail-sms-sub { max-width: 100%; } .loc-detail-sms-btn { margin-bottom: 50px; } .loc-detail-sms-disclaimer { font-size: 11px; line-height: 1.6; } } /* ══════════════════════════════════════════════════════ EMAIL SIGN-UP SECTION — coosaw-creek.php Sits between SMS Sign-Up (light teal #eef7f7) and Reviews (cream #fdfdf8). Solid amber bg gives clear visual contrast on both edges. ══════════════════════════════════════════════════════ */ .loc-detail-email-signup { background: var(--amber); background-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,210,120,0.32) 0%, transparent 70%), radial-gradient(ellipse 70% 50% at 50% 100%, rgba(180,100,10,0.15) 0%, transparent 65%); padding: 88px clamp(24px, 8vw, 160px); text-align: center; position: relative; overflow: hidden; } .loc-detail-email-signup-eyebrow { font-family: var(--font-body); font-size: 19px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.88); display: block; margin-bottom: 14px; } .loc-detail-email-signup-heading { font-family: var(--font-heading); font-size: clamp(32px, 4vw, 56px); font-weight: 400; line-height: 1.1; color: var(--white); letter-spacing: -0.01em; margin-bottom: 20px; } .loc-detail-email-signup-sub { font-family: var(--font-body); font-size: 18px; line-height: 1.7; color: rgba(255,255,255,0.88); max-width: 900px; /* wide enough to fit the full sentence on one line at desktop/laptop */ margin: 0 auto 40px; } .loc-detail-email-signup-btn { display: inline-block; padding: 16px 52px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; background: var(--white); border: 2px solid var(--white); color: var(--amber); text-decoration: none; transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.18s; } .loc-detail-email-signup-btn:hover { background: transparent; border-color: var(--white); color: var(--white); transform: translateY(-2px); } @media (max-width: 600px) { .loc-detail-email-signup { padding: 72px 20px; } .loc-detail-email-signup-sub { max-width: 100%; } .loc-detail-email-signup-btn { padding: 16px 36px; } } /* ══════════════════════════════════════════════════════ THANK-YOU PAGE — thank-you.php Post-form-submission landing page. No hero image; the single section provides the page's full visual weight. Solid teal bg with radial gradient overlay matches the existing .loc-detail-find-us treatment for consistency. ══════════════════════════════════════════════════════ */ .thank-you-section { background: var(--teal); background-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,180,190,0.30) 0%, transparent 70%), radial-gradient(ellipse 70% 50% at 50% 100%, rgba(0,30,35,0.18) 0%, transparent 65%); /* 3-value: top / horizontal / bottom — bottom trimmed so the teal block doesn't extend too far below the CTA buttons. Top kept generous for header breathing room. */ padding: clamp(80px, 12vw, 160px) clamp(24px, 8vw, 160px) clamp(60px, 6vw, 90px); min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; } .thank-you-content { max-width: 820px; width: 100%; } .thank-you-eyebrow { font-family: var(--font-body); font-size: 19px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 18px; } .thank-you-heading { font-family: var(--font-heading); font-size: clamp(40px, 6vw, 76px); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; color: var(--white); margin: 0 0 28px; } .thank-you-sub { font-family: var(--font-body); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.7; color: rgba(255,255,255,0.92); max-width: 680px; margin: 0 auto 48px; } .thank-you-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .thank-you-btn { display: inline-block; padding: 16px 42px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; background: var(--white); border: 2px solid var(--white); color: var(--teal); text-decoration: none; transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.18s; } .thank-you-btn:hover { background: var(--amber); border-color: var(--amber); color: var(--white); transform: translateY(-2px); } .thank-you-btn--ghost { background: transparent; border-color: rgba(255,255,255,0.55); color: rgba(255,255,255,0.92); } .thank-you-btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: var(--white); color: var(--white); } @media (max-width: 600px) { /* Asymmetric top padding to clear the mobile header so the eyebrow doesn't crowd the logo. Desktop/laptop unaffected. */ .thank-you-section { min-height: 60vh; padding: 140px 22px 80px; } .thank-you-sub { margin-bottom: 36px; } .thank-you-actions { gap: 12px; flex-direction: column; align-items: stretch; } .thank-you-btn { padding: 16px 28px; text-align: center; } } /* ══════════════════════════════════════════════════════ CONTACT PAGE — contact.php Sections: hero, location cards, no-reservations, Wufoo form, Constant Contact signup. ══════════════════════════════════════════════════════ */ /* Hero bg for contact page */ .page-hero-bg--contact { /* JPG fallback for browsers without image-set() / webp support */ background-image: url('/images/ContactPageHeroBgImage.jpg'); background-image: image-set( url('/images/ContactPageHeroBgImage.webp') type('image/webp'), url('/images/ContactPageHeroBgImage.jpg') type('image/jpeg') ); background-position: center 40%; } /* ── Location Cards ─────────────────────────────────── */ .contact-locations { background: #fdfdf8; background-image: linear-gradient(to right, rgba(245,237,224,0.52) 0%, transparent 18%, transparent 82%, rgba(245,237,224,0.52) 100% ); padding: 88px clamp(24px, 8vw, 160px); position: relative; overflow: hidden; } .contact-locations::before { content: ''; position: absolute; inset: 0; background-image: url('/images/SandBackgroundPattern.svg'); background-repeat: repeat; background-size: 900px 300px; opacity: 0.05; pointer-events: none; } .contact-locations > * { position: relative; z-index: 1; } .contact-locations-intro { text-align: center; margin-bottom: 56px; } .contact-locations-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1000px; margin: 0 auto; } .contact-location-card { background: var(--white); border-top: 3px solid var(--teal); padding: 40px 44px 44px; box-shadow: 0 4px 28px rgba(0,0,0,0.06); } .contact-location-eyebrow { font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 12px; } .contact-location-name { font-family: var(--font-heading); font-size: clamp(26px, 2.8vw, 38px); font-weight: 400; color: #00555a; margin-bottom: 28px; line-height: 1.1; } .contact-location-detail { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(0,136,142,0.10); } .contact-location-detail:last-child { border-bottom: none; } .contact-location-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--amber); } .contact-location-text { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: #004f55; } .contact-location-text a { color: #004f55; text-decoration: none; transition: color 0.2s; } .contact-location-text a:hover { color: var(--teal); } .contact-location-label { font-weight: 700; display: block; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(0,79,85,0.55); margin-bottom: 4px; } @media (max-width: 760px) { .contact-signup-wrap.will-enter.in-view, .contact-form-wrap.will-enter.in-view { transform: none !important; transition: initial; } .contact-locations-grid { grid-template-columns: 1fr; gap: 24px; /*overflow-x: hidden; */} .contact-locations { padding: 64px 24px; } .contact-location-card { padding: 28px 28px 32px; } } /* ── No Reservations Notice ─────────────────────────── */ .contact-no-reservations { background: var(--teal); background-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,180,190,0.28) 0%, transparent 70%), radial-gradient(ellipse 70% 50% at 50% 100%, rgba(0,30,35,0.12) 0%, transparent 65%); padding: 56px clamp(24px, 8vw, 160px); text-align: center; } .contact-no-reservations-text { font-family: var(--font-heading); font-size: clamp(18px, 2vw, 26px); font-weight: 400; font-style: italic; color: rgba(255,255,255,0.90); max-width: 760px; margin: 0 auto 20px; line-height: 1.5; } .contact-no-reservations-phones { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 5vw, 60px); flex-wrap: wrap; margin-top: 8px; } .contact-no-reservations-phone { font-family: var(--font-body); font-size: 16px; color: rgba(255,255,255,0.80); } .contact-no-reservations-phone a { color: var(--white); text-decoration: none; font-weight: 700; transition: color 0.2s; } .contact-no-reservations-phone a:hover { color: var(--amber); } /* ── Wufoo Form Section ─────────────────────────────── */ .contact-form-section { background: var(--white); padding: 88px clamp(24px, 8vw, 160px); } .contact-section-intro { text-align: center; margin-bottom: 48px; } .contact-section-eyebrow { font-family: var(--font-body); font-size: 19px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 14px; } .contact-section-heading { font-family: var(--font-heading); font-size: clamp(32px, 4vw, 52px); font-weight: 400; line-height: 1.1; color: #00555a; letter-spacing: -0.01em; } .contact-section-sub { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: rgba(0,79,85,0.65); max-width: 600px; margin: 14px auto 0; } /* Wufoo form wrapper — same width as CC section */ /* Wufoo section sub — single line on desktop */ .contact-form-section .contact-section-sub { white-space: nowrap; } @media (max-width: 900px) { .contact-form-section .contact-section-sub { white-space: normal; max-width: 480px; } } /* ───────────────────────────────────────────── */ .contact-form-wrap { max-width: 860px; margin: 0 auto; background: var(--white); padding: 48px 64px; border-top: 3px solid var(--teal); box-shadow: 0 4px 32px rgba(0,0,0,0.07); } .contact-form-wrap iframe { width: 100%; border: none; display: block; height: 820px; /* desktop — accommodates submit + reCAPTCHA */ } @media (max-width: 700px) { .contact-form-wrap { padding: 28px 24px; } .contact-form-wrap iframe { height: 880px; } /* mobile — taller for touch targets */ } @media (max-width: 700px) { .contact-form-section { padding: 64px 20px; } .contact-form-wrap { padding: 24px 20px; } } /* ── Constant Contact Sign-Up Section ───────────────── */ .contact-signup-section { background: var(--amber); padding: 88px clamp(24px, 8vw, 160px); text-align: center; } .contact-signup-section .contact-section-eyebrow { color: rgba(255,255,255,0.80); } .contact-signup-section .contact-section-heading { color: var(--white); } .contact-signup-section .contact-section-sub { color: rgba(255,255,255,0.82); margin-bottom: 32px; white-space: nowrap; } @media (max-width: 1100px) { .contact-signup-section .contact-section-sub { white-space: normal; max-width: 560px; } } .contact-signup-note { font-family: var(--font-body); font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.65); max-width: 560px; margin: 24px auto 0; font-style: italic; } /* Constant Contact embed wrapper */ .contact-signup-wrap { max-width: 860px; margin: 0 auto; background: var(--white); padding: 36px 48px; box-shadow: 0 4px 28px rgba(0,0,0,0.12); } @media (max-width: 700px) { .contact-signup-section { padding: 64px 20px; overflow: hidden; } .contact-signup-wrap { padding: 24px 20px; } } /* ══════════════════════════════════════════════════════ CONSTANT CONTACT WIDGET — Brand overrides The CC widget loads its own stylesheet. These rules override it to match the Crab Shacks design system. Selectors target CC's injected markup inside .ctct-inline-form and .ctct-form-wrapper. ══════════════════════════════════════════════════════ */ /* Wrapper — remove CC default background and border */ .ctct-inline-form .ctct-form-wrapper, .ctct-inline-form .ctct-form-embed { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* Form header / description text */ .ctct-inline-form .ctct-form-header, .ctct-inline-form .ctct-form-description { font-family: var(--font-body) !important; color: #004f55 !important; font-size: 16px !important; text-align: center !important; } /* Labels */ .ctct-inline-form label, .ctct-inline-form .ctct-form-label { font-family: var(--font-body) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: rgba(0,79,85,0.65) !important; margin-bottom: 6px !important; display: block !important; } /* Inputs, selects, textareas */ .ctct-inline-form input[type="text"], .ctct-inline-form input[type="email"], .ctct-inline-form input[type="tel"], .ctct-inline-form select, .ctct-inline-form textarea { font-family: var(--font-body) !important; font-size: 16px !important; color: #004f55 !important; background: var(--white) !important; border: 1px solid rgba(0,136,142,0.30) !important; border-radius: 0 !important; padding: 12px 14px !important; width: 100% !important; outline: none !important; box-shadow: none !important; transition: border-color 0.2s !important; } .ctct-inline-form input:focus, .ctct-inline-form select:focus, .ctct-inline-form textarea:focus { border-color: var(--teal) !important; box-shadow: 0 0 0 2px rgba(0,136,142,0.12) !important; } /* Submit button */ .ctct-inline-form button[type="submit"], .ctct-inline-form input[type="submit"], .ctct-inline-form .ctct-form-button { display: block !important; margin: 16px auto 0 !important; font-family: var(--font-body) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.20em !important; text-transform: uppercase !important; background: var(--teal) !important; color: var(--white) !important; border: 2px solid var(--teal) !important; border-radius: 0 !important; padding: 14px 40px !important; cursor: pointer !important; width: auto !important; transition: background 0.22s, border-color 0.22s !important; } .ctct-inline-form button[type="submit"]:hover, .ctct-inline-form .ctct-form-button:hover { background: transparent !important; color: var(--teal) !important; } /* Error messages */ .ctct-inline-form .ctct-form-errorMessage, .ctct-inline-form .ctct-form-field-error { font-family: var(--font-body) !important; font-size: 13px !important; color: #c0392b !important; } /* Success message */ .ctct-inline-form .ctct-form-success { font-family: var(--font-heading) !important; font-size: 22px !important; color: var(--teal) !important; text-align: center !important; } /* CC checkbox list — 2 col grid so the birthday months don't stack forever */ .ctct-inline-form .ctct-lists-group, .ctct-inline-form .ctct-form-lists { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 4px 16px !important; text-align: left !important; } .ctct-inline-form .ctct-checkbox-field-wrapper, .ctct-inline-form .ctct-form-lists label { font-family: var(--font-body) !important; font-size: 14px !important; color: #004f55 !important; letter-spacing: normal !important; text-transform: none !important; } /* CC heading text inside widget — style to match brand */ .ctct-inline-form .ctct-form-header h2, .ctct-inline-form h2 { font-family: var(--font-heading) !important; font-size: 22px !important; color: #00555a !important; font-weight: 400 !important; text-align: center !important; } .ctct-inline-form p, .ctct-inline-form .ctct-form-description p { font-family: var(--font-body) !important; font-size: 15px !important; color: rgba(0,79,85,0.70) !important; text-align: center !important; } /* ── CC form_2 overrides — target the actual injected class name ── */ .ctct-form-embed.form_2, .ctct-inline-form .ctct-form-embed.form_2 { max-width: 100% !important; width: 100% !important; } /* All inputs full width */ .ctct-form-embed.form_2 input[type="text"], .ctct-form-embed.form_2 input[type="email"], .ctct-form-embed.form_2 input[type="tel"] { width: 100% !important; box-sizing: border-box !important; } /* Checkbox fieldset full width, two-column grid */ .ctct-form-embed.form_2 .ctct-form-lists { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 6px 16px !important; width: 100% !important; border: none !important; padding: 0 !important; margin: 0 !important; } /* Checkbox rows */ .ctct-form-embed.form_2 .ctct-form-lists .ctct-form-listitem { display: flex !important; align-items: center !important; gap: 6px !important; } /* Submit button — centered */ .ctct-form-embed.form_2 .ctct-form-button { display: block !important; margin: 20px auto 0 !important; } /* ── CC form internal text — 17px, brand aligned ── */ .ctct-inline-form .ctct-form-description, .ctct-inline-form .ctct-form-header p, .ctct-inline-form p { font-family: var(--font-body) !important; font-size: 17px !important; line-height: 1.7 !important; color: rgba(0,79,85,0.70) !important; text-align: center !important; margin-bottom: 8px !important; } /* ── CC: "Email Lists" label — match brand style ── */ .ctct-inline-form .ctct-form-lists > legend, .ctct-inline-form legend { font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: rgba(0,79,85,0.65) !important; margin-bottom: 12px !important; display: block !important; width: 100% !important; } /* ── CC: 7. Checkbox vertical alignment fix ── */ .ctct-form-embed.form_2 .ctct-form-listitem { display: flex !important; align-items: center !important; gap: 8px !important; padding: 4px 0 !important; } .ctct-form-embed.form_2 .ctct-form-listitem input[type="checkbox"] { margin: 0 !important; flex-shrink: 0 !important; width: 16px !important; height: 16px !important; accent-color: var(--teal) !important; position: relative !important; top: 0 !important; } .ctct-form-embed.form_2 .ctct-form-listitem label { font-family: var(--font-body) !important; font-size: 15px !important; font-weight: 400 !important; color: #004f55 !important; letter-spacing: normal !important; text-transform: none !important; line-height: 1.3 !important; margin: 0 !important; cursor: pointer !important; } /* ══════════════════════════════════════════════════════ CC FORM — 4 targeted fixes based on live inspection ══════════════════════════════════════════════════════ */ /* 1. Hide the redundant heading + description inside the CC embed ("Sign up for updates!" and "Get news & updates…" text) — already displayed in the amber section above the form */ .ctct-inline-form .ctct-form-defaults .ctct-form-header, .ctct-inline-form .ctct-form-custom .ctct-form-header, .ctct-inline-form .ctct-form-defaults .ctct-form-text:first-of-type { display: none !important; } /* 2. "Email Lists" legend — full width, left-aligned, brand style */ .ctct-inline-form .ctct-form-lists-legend, .ctct-inline-form legend.ctct-form-required { font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: rgba(0,79,85,0.65) !important; display: block !important; width: 100% !important; float: none !important; margin-bottom: 12px !important; padding: 0 !important; text-align: left !important; grid-column: 1 / -1; /* span all 3 grid columns so it sits above the checkboxes */ } /* 3. GDPR / legal consent text — smaller, muted */ .ctct-inline-form .ctct-gdpr-text { font-family: var(--font-body) !important; font-size: 12px !important; line-height: 1.55 !important; color: rgba(0,79,85,0.50) !important; text-align: center !important; margin-top: 16px !important; } .ctct-inline-form .ctct-gdpr-text a, .ctct-inline-form .ctct-form-footer-link a { color: var(--teal) !important; text-decoration: underline !important; font-size: inherit !important; } /* 4. Note below CC embed (birthday/unsubscribe notice) — larger */ .contact-signup-note { font-family: var(--font-body) !important; font-size: 15px !important; line-height: 1.7 !important; color: rgba(255,255,255,0.72) !important; max-width: 640px !important; margin: 28px auto 0 !important; font-style: italic !important; } /* ══════════════════════════════════════════════════════ CC SECTION — 5 precise fixes (live-inspected values) ══════════════════════════════════════════════════════ */ /* 1. Sub text centering — text is 755px wide but container was 600px. display:inline-block lets the nowrap element auto-size, and the parent text-align:center will actually center it. */ .contact-signup-section .contact-section-sub { display: inline-block !important; white-space: nowrap !important; max-width: none !important; text-align: center !important; } @media (max-width: 860px) { .contact-signup-section .contact-section-sub { display: block !important; white-space: normal !important; max-width: 480px !important; margin-left: auto !important; margin-right: auto !important; } } /* 2. "Email Lists" legend — left-aligned to match the asterisk indicator */ .ctct-inline-form .ctct-form-lists-legend, .ctct-inline-form legend.ctct-form-required { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } /* 3. Checkboxes — teal accent color, higher specificity */ .ctct-inline-form input[type="checkbox"], .ctct-form-embed.form_2 input[type="checkbox"] { accent-color: #00888e !important; } /* 4. GDPR text — 13px (was being overridden by the 17px p rule) */ .ctct-inline-form .ctct-gdpr-text, .ctct-form-embed .ctct-gdpr-text, p.ctct-gdpr-text { font-size: 15px !important; line-height: 1.55 !important; color: rgba(0,79,85,0.50) !important; text-align: center !important; } /* 5. Note below CC form — larger text */ .contact-signup-note { font-size: 17px !important; line-height: 1.75 !important; font-style: italic !important; color: rgba(255,255,255,0.80) !important; max-width: 680px !important; margin: 32px auto 0 !important; } /* Wufoo section sub — override global max-width:600px so nowrap text can center */ .contact-form-section .contact-section-sub { max-width: none !important; display: block !important; white-space: nowrap !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; } @media (max-width: 860px) { .contact-form-section .contact-section-sub { white-space: normal !important; max-width: 480px !important; } } @media (max-width: 767px) { .contact-no-reservations p.contact-no-reservations-text br { display: none; } .about-timeline {display: flex; flex-wrap: wrap;gap: 20px; } .about-timeline-node { width: 100%; } } @media (max-width: 600px) { .ctct-form-embed.form_2 .ctct-form-lists { grid-template-columns: repeat(2, 1fr) !important; } .slide-content .slide-eyebrow { font-size: 17px; } .location-tag { font-size: 17px; } .page-hero-eyebrow { margin-bottom: 10px; } .contact-no-reservations-phones { gap: clamp(10px, 1vw, 64px); } .faq-cta-eyebrow { font-size: 16px; } } @media (max-width: 480px) { .loc-detail-sms-signup .loc-detail-sms-sub br { display: none; } .parallax-section { height: 70vh; min-height: 320px; } .parallax-section-cta { padding: 16px 28px; } .ctct-form-embed.form_2 .ctct-form-lists { grid-template-columns: repeat(1, 1fr) !important; } .contact-no-reservations-phones { gap: clamp(10px, 1vw, 64px); } .faq-subhead { margin-bottom: 50px; } } /* ══════════════════════════════════════════════════════ PRIVACY POLICY — Footer Button + Slide-up Modal ──────────────────────────────────────────────────── Triggered from the footer-bottom-right "Privacy Policy" button. Drawer slides up from the bottom of the viewport to cover the page (Rolls-Royce footer FAQ pattern). ══════════════════════════════════════════════════════ */ /* ── Footer "Privacy Policy" trigger ── */ /* Reset native button styles + match the existing footer link look */ .footer-privacy-btn { font: inherit; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; color: rgba(255,255,255,0.55); font-family: var(--font-body); font-size: 13px; letter-spacing: 0.05em; text-decoration: none; transition: color 0.2s ease; } .footer-privacy-btn:hover, .footer-privacy-btn:focus-visible { color: rgba(255,255,255,0.85); outline: none; } /* ── Modal overlay (full-screen backdrop) ── */ .privacy-modal-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(0, 30, 32, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .privacy-modal-overlay.is-open { opacity: 1; pointer-events: auto; } /* ── Modal drawer (slides up from bottom) ── */ .privacy-modal { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; max-height: 100vh; background: #fdfdf8; /* cream — matches site */ display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); box-shadow: 0 -16px 60px rgba(0,0,0,0.3); } .privacy-modal-overlay.is-open .privacy-modal { transform: translateY(0); } /* ── Teal header bar with title + close ── */ .privacy-modal-header { display: flex; align-items: center; justify-content: center; padding: 0 60px; height: 72px; background: var(--teal); background-image: radial-gradient(ellipse 120% 100% at 50% 0%, rgba(255,255,255,0.08) 0%, transparent 70%); border-bottom: 3px solid var(--amber); position: relative; flex-shrink: 0; } .privacy-modal-title { font-family: var(--font-heading); font-size: 24px; font-weight: 600; color: var(--white); letter-spacing: -0.01em; text-align: center; } .privacy-modal-close { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); border: 1.5px solid rgba(255,255,255,0.3); cursor: pointer; color: var(--white); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; transition: background 0.2s, border-color 0.2s; } .privacy-modal-close:hover, .privacy-modal-close:focus-visible { background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.6); outline: none; } .privacy-modal-close svg { width: 16px; height: 16px; } /* ── Scrollable body ── */ .privacy-modal-body { padding: 56px clamp(20px, 6vw, 80px) 80px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; /* Soft top edge gradient for visual depth */ background-image: linear-gradient( to bottom, rgba(0, 136, 142, 0.04) 0%, transparent 80px ); } /* ── Article content ── */ .privacy-content { max-width: 760px; margin: 0 auto; font-family: var(--font-body); color: rgba(0, 79, 85, 0.88); line-height: 1.7; font-size: 16px; } .privacy-content .privacy-meta { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); font-weight: 700; margin: 0 0 28px; } .privacy-content .privacy-intro { font-size: 17px; line-height: 1.75; color: rgba(0, 79, 85, 0.82); margin: 0 0 36px; } .privacy-content h3 { font-family: var(--font-heading); font-size: clamp(22px, 2.4vw, 28px); font-weight: 500; color: #00555a; letter-spacing: -0.005em; margin: 40px 0 14px; line-height: 1.25; } .privacy-content h3:first-of-type { margin-top: 0; } .privacy-content p { margin: 0 0 16px; } .privacy-content ul { margin: 0 0 24px; padding-left: 22px; } .privacy-content li { margin-bottom: 8px; padding-left: 4px; } .privacy-content li::marker { color: var(--amber); } .privacy-content strong { color: #00555a; font-weight: 700; } .privacy-content a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; } .privacy-content a:hover { color: var(--amber); } .privacy-content .privacy-contact { background: rgba(0, 136, 142, 0.06); border-left: 3px solid var(--teal); padding: 18px 22px; margin-top: 12px; font-size: 15px; line-height: 1.7; } /* ── Mobile / tablet ── */ @media (max-width: 700px) { .privacy-modal-header { height: 60px; padding: 0 56px; } .privacy-modal-title { font-size: 19px; } .privacy-modal-body { padding: 36px 20px 60px; } .privacy-content { font-size: 15px; } .privacy-content .privacy-intro { font-size: 16px; } .privacy-content h3 { margin-top: 32px; } } /* ── Reduced motion: shorter, softer transition ── */ @media (prefers-reduced-motion: reduce) { .privacy-modal-overlay, .privacy-modal { transition-duration: 0.15s; } }