/** * FSE Sitewide CTA Hierarchy * -------------------------- * Single source of truth for the booking-first CTA system. * Loaded on every page. Edit here once; propagates everywhere. * * Components: * - .nav-book-feature Book Online button injected at right edge of nav (desktop) * - .mobile-book-feature Book Online featured link in the mobile slide-out menu * - .book-fab Sticky bottom-right Book Online button on mobile * - .btn-book-hero / sub Big primary hero booking button + subline * - .btn-hero-sec / quiet Secondary hero buttons (View Pricing, Call or Text) * - nav .nav-cta override Demotes the legacy Call/Text orange button to a quiet ghost * * Suppress on the booking page itself by adding `data-page="book"` to . */ /* ============================================================ TOP BAR REMOVAL OVERRIDE Top bar is no longer injected by nav.js (removed 2026-05-01). Per-page CSS still places

at top:38px to clear it; pull nav back up. ============================================================ */ nav { top: 0 !important; } /* ============================================================ FEATURED NAV BOOK BUTTON — desktop, sits at right of nav-links ============================================================ */ .nav-book-feature a { font-family: 'Barlow Condensed', sans-serif !important; font-weight: 900 !important; font-size: 0.92rem !important; letter-spacing: 0.14em !important; text-transform: uppercase; background: var(--orange); color: var(--black) !important; padding: 11px 26px 11px 28px !important; text-decoration: none; clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%); position: relative; display: inline-flex !important; align-items: center; gap: 10px; transition: background 0.2s, transform 0.15s, box-shadow 0.2s; animation: fseBookPulse 2.6s ease-in-out infinite; } .nav-book-feature a::before { content: ''; width: 7px; height: 7px; background: var(--black); border-radius: 50%; box-shadow: 0 0 0 3px rgba(0,0,0,0.18); } .nav-book-feature a:hover { background: var(--orange-hot); color: var(--black) !important; transform: translateY(-1px); } @keyframes fseBookPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(244,96,10,0.55), 0 4px 14px rgba(244,96,10,0.20); } 50% { box-shadow: 0 0 0 8px rgba(244,96,10,0.00), 0 4px 18px rgba(244,96,10,0.32); } } @media (prefers-reduced-motion: reduce) { .nav-book-feature a { animation: none; } } /* DEMOTE the legacy Call/Text button — was an orange clip-path block, now a ghost link. */ nav .nav-cta { background: transparent !important; color: var(--smoke) !important; border: 1px solid rgba(255,255,255,0.16); clip-path: none !important; padding: 9px 16px !important; font-weight: 700 !important; font-size: 0.78rem !important; letter-spacing: 0.12em !important; transition: color 0.2s, border-color 0.2s, background 0.2s; } nav .nav-cta:hover { background: transparent !important; color: var(--white) !important; border-color: rgba(255,255,255,0.35); } /* On the booking page itself, hide the Book Online nav button + FAB so we don't point at the page from itself. The demoted Call/Text stays visible as fallback. */ body[data-page="book"] .nav-book-feature, body[data-page="book"] .book-fab, body[data-page="book"] .mobile-book-feature { display: none !important; } /* ============================================================ MOBILE SLIDE-OUT MENU — Book Online featured link ============================================================ */ .mobile-book-feature { display: block; margin: 0 0 6px 0; padding: 14px 0 !important; color: var(--white) !important; font-weight: 900 !important; border-bottom: 1px solid rgba(244,96,10,0.35) !important; } .mobile-book-feature::before { content: '\25CF'; color: var(--orange); margin-right: 10px; font-size: 0.7rem; vertical-align: middle; } /* ============================================================ STICKY MOBILE FAB — Book Online (≤900px only) ============================================================ */ .book-fab { display: none; position: fixed; right: 16px; bottom: 16px; z-index: 150; background: var(--orange); color: var(--black); font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; padding: 14px 20px; clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%); box-shadow: 0 6px 20px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.2); transition: background 0.2s, transform 0.15s; } .book-fab:hover { background: var(--orange-hot); transform: translateY(-2px); } .book-fab .arrow { margin-left: 6px; } @media (max-width: 900px) { .book-fab { display: inline-block; } } /* ============================================================ HERO CTA STACK — used on index + every subpage hero Markup pattern:

View Services & Pricing Call or Text (226) 777-6995

============================================================ */ .hero-actions, .subhero-actions { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; } .hero-actions-row { display: flex; gap: 10px; flex-wrap: wrap; } /* PRIMARY — the dominant booking action above the fold */ .btn-book-hero { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-decoration: none; background: var(--orange); color: var(--black); font-family: 'Barlow Condensed', sans-serif; padding: 22px 56px; min-width: 320px; clip-path: polygon(14px 0%, 100% 0%, calc(100% - 14px) 100%, 0% 100%); box-shadow: 0 8px 28px rgba(244,96,10,0.32), 0 0 0 1px rgba(0,0,0,0.15); transition: background 0.2s, transform 0.15s, box-shadow 0.2s; animation: fseBookHeroPulse 2.8s ease-in-out infinite; } .btn-book-hero:hover { background: var(--orange-hot); transform: translateY(-2px); box-shadow: 0 12px 34px rgba(244,96,10,0.42), 0 0 0 1px rgba(0,0,0,0.15); } .btn-book-hero-label { font-weight: 900; font-size: 1.55rem; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; } .btn-book-hero-sub { margin-top: 6px; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.78; } @keyframes fseBookHeroPulse { 0%, 100% { box-shadow: 0 8px 28px rgba(244,96,10,0.32), 0 0 0 0 rgba(244,96,10,0.45); } 50% { box-shadow: 0 10px 32px rgba(244,96,10,0.42), 0 0 0 12px rgba(244,96,10,0.00); } } @media (prefers-reduced-motion: reduce) { .btn-book-hero { animation: none; } } /* SECONDARIES — View Pricing (left, white) and Call or Text (right, quiet) */ .btn-hero-sec { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-decoration: none; background: transparent; color: var(--white); font-family: 'Barlow Condensed', sans-serif; padding: 11px 22px; border: 1px solid rgba(255,255,255,0.20); transition: border-color 0.2s, color 0.2s, background 0.2s; min-width: 155px; } .btn-hero-sec:hover { border-color: var(--orange); color: var(--orange); background: rgba(244,96,10,0.04); } .btn-hero-sec-top { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; } .btn-hero-sec-bot { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.08em; margin-top: 2px; } .btn-hero-sec-quiet { border-color: rgba(255,255,255,0.10); color: var(--smoke); } .btn-hero-sec-quiet .btn-hero-sec-top { opacity: 0.6; } /* ============================================================ MOBILE — collapse hero stack to full width ============================================================ */ @media (max-width: 900px) { .hero-actions, .subhero-actions { align-items: center !important; gap: 14px !important; width: 100%; } .hero-actions-row { width: 100%; max-width: 340px; justify-content: center; gap: 8px; } .btn-book-hero { width: 100%; max-width: 340px; min-width: 0; padding: 18px 28px; } .btn-book-hero-label { font-size: 1.3rem; letter-spacing: 0.14em; } .btn-book-hero-sub { font-size: 0.72rem; } .btn-hero-sec { flex: 1 1 0; min-width: 0; padding: 9px 10px; } .btn-hero-sec-top { font-size: 0.68rem; letter-spacing: 0.1em; } .btn-hero-sec-bot { font-size: 0.85rem; letter-spacing: 0.04em; } }