/* ============================================================ Fishin' With Paul — marketing site layer Builds on theme.css (booking design system). Variations are driven by data-attributes: data-hero = immersive | split | spotlight data-nav = overlay | solid | float data-pricing = cards | table | stacked data-flow = waves | clean ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap'); html { scroll-behavior: smooth; } body { overflow-x: hidden; } /* Slightly stronger hairlines/borders than the booking default so cards, pills and inputs read more clearly on the marketing pages. */ :root { --line: #c5d4e8; --line-soft: #d8e3f1; } /* anchor offset so sticky nav doesn't cover section tops on #jump */ [id] { scroll-margin-top: 88px; } /* ---------------------------------------------------------------- Section scaffolding ---------------------------------------------------------------- */ .section { padding: clamp(2.5rem, 5vw, 4.25rem) 0; position: relative; } .section-tight { padding: clamp(2rem, 4vw, 3rem) 0; } .sec-head { max-width: 60ch; } .sec-head.center { margin-inline: auto; text-align: center; } .sec-title { font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.08; margin: .35rem 0 0; } .lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-soft); } .kicker-line { display:inline-flex; align-items:center; gap:.6rem; } .kicker-line::before { content:""; width:26px; height:2px; background:var(--gold); border-radius:2px; } /* ---------------------------------------------------------------- Navigation — base ---------------------------------------------------------------- */ .site-nav { position: sticky; top: 0; z-index: 1000; transition: background .25s ease, box-shadow .25s ease, padding .25s ease; } .site-nav .nav-inner { display: flex; align-items: center; gap: 1.25rem; padding: .85rem 0; } .site-nav .nav-links { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; } .site-nav .nav-links a { display: block; padding: .5rem .85rem; border-radius: var(--r-pill); font-weight: 700; font-size: .95rem; text-decoration: none; color: var(--ink); transition: background .15s ease, color .15s ease; } .site-nav .nav-links a:hover { background: var(--line-soft); color: var(--navy); } .site-nav .nav-links a.active { color: var(--navy); } .site-nav .nav-cta { display: inline-flex; align-items: center; gap: .9rem; } .nav-phone { display:inline-flex; align-items:center; gap:.4rem; font-weight:800; color:var(--navy); text-decoration:none; font-size:.92rem; white-space:nowrap; } .nav-phone:hover { color: var(--cyan-ink); } .nav-toggle { display: none; width: 44px; height: 44px; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; color: var(--navy); cursor: pointer; align-items: center; justify-content: center; } .nav-toggle svg { width: 22px; height: 22px; } /* solid (default look) */ .site-nav { background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } /* float — detached pill bar */ body[data-nav="float"] .site-nav { background: transparent; border-bottom: 0; backdrop-filter: none; padding-top: .85rem; } body[data-nav="float"] .site-nav .nav-inner { background: rgba(255,255,255,.82); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255,255,255,.7); box-shadow: var(--shadow); border-radius: var(--r-pill); padding: .6rem .7rem .6rem 1.1rem; } /* overlay — transparent over a dark immersive hero, solidifies on scroll */ body[data-nav="overlay"] .site-nav { background: transparent; border-bottom: 0; backdrop-filter: none; } body[data-nav="overlay"] .site-nav::before { content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(15,28,52,.55), transparent); } body[data-nav="overlay"] .site-nav .nav-links a, body[data-nav="overlay"] .nav-phone { color: #fff; } body[data-nav="overlay"] .site-nav .nav-links a:hover { background: rgba(255,255,255,.16); color:#fff; } body[data-nav="overlay"] .brandmark .bm-text b { color: #fff; } body[data-nav="overlay"] .brandmark .bm-text span { color: var(--gold-soft); } body[data-nav="overlay"] .nav-toggle { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color:#fff; } /* scrolled state for overlay */ body[data-nav="overlay"] .site-nav.scrolled { background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } body[data-nav="overlay"] .site-nav.scrolled::before { display:none; } body[data-nav="overlay"] .site-nav.scrolled .nav-links a, body[data-nav="overlay"] .site-nav.scrolled .nav-phone { color: var(--ink); } body[data-nav="overlay"] .site-nav.scrolled .nav-links a:hover { background: var(--line-soft); color: var(--navy); } body[data-nav="overlay"] .site-nav.scrolled .brandmark .bm-text b { color: var(--navy); } body[data-nav="overlay"] .site-nav.scrolled .brandmark .bm-text span { color: var(--gold); } body[data-nav="overlay"] .site-nav.scrolled .nav-toggle { background:#fff; border-color:var(--line); color:var(--navy); } /* On inner (non-immersive) pages, overlay would be invisible over light bg — force solid */ body[data-nav="overlay"]:not([data-hero="immersive"]) .site-nav { background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } body[data-nav="overlay"]:not([data-hero="immersive"]) .site-nav::before { display:none; } body[data-nav="overlay"]:not([data-hero="immersive"]) .site-nav .nav-links a, body[data-nav="overlay"]:not([data-hero="immersive"]) .nav-phone { color: var(--ink); } body[data-nav="overlay"]:not([data-hero="immersive"]) .brandmark .bm-text b { color: var(--navy); } body[data-nav="overlay"]:not([data-hero="immersive"]) .brandmark .bm-text span { color: var(--gold); } body[data-nav="overlay"]:not([data-hero="immersive"]) .nav-toggle { background:#fff; border-color:var(--line); color:var(--navy); } /* Mobile menu */ @media (max-width: 860px) { .site-nav .nav-links, .site-nav .nav-phone { display: none; } .nav-toggle { display: inline-flex; } .site-nav.menu-open .nav-links { display: flex; flex-direction: column; align-items: stretch; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); padding: .6rem 1rem 1rem; gap: .15rem; box-shadow: var(--shadow); } body[data-nav="float"] .site-nav.menu-open .nav-links { margin: .5rem 12px 0; border-radius: var(--r); border: 1px solid var(--line); } .site-nav.menu-open .nav-links a { color: var(--ink) !important; padding: .8rem 1rem; } .site-nav.menu-open .nav-links a:hover { background: var(--line-soft) !important; } } /* ---------------------------------------------------------------- HERO — shared ---------------------------------------------------------------- */ .hero { position: relative; } .hero-eyebrow { color: var(--gold); } .hero h1 { font-size: clamp(2.3rem, 6vw, 4.1rem); line-height: 1.02; letter-spacing: -.02em; } .hero .hero-sub { font-size: clamp(1.1rem, 1.8vw, 1.3rem); } .hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; } .hero-figure { position: relative; } .hero-figure img { display:block; width:100%; height:100%; object-fit: cover; } /* the three hero blocks live in the DOM; show only the active one */ .hero-variant { display: none; } body[data-hero="immersive"] .hero-variant[data-variant="immersive"], body[data-hero="split"] .hero-variant[data-variant="split"], body[data-hero="spotlight"] .hero-variant[data-variant="spotlight"] { display: block; } /* --- Immersive: full-bleed photo, dark scrim, centered text --- */ .hero-immersive { position: relative; min-height: min(88vh, 760px); display: flex; align-items: center; } .hero-immersive .hero-bg { position: absolute; inset: 0; overflow: hidden; } .hero-immersive .hero-bg img { width: 100%; height: 100%; object-fit: cover; } .hero-immersive .hero-bg::after { content:""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,24,44,.62) 0%, rgba(13,24,44,.5) 45%, rgba(13,24,44,.9) 100%); } .hero-immersive .container { position: relative; z-index: 2; text-shadow: 0 2px 16px rgba(12,22,42,.55), 0 1px 3px rgba(12,22,42,.5); } .hero-immersive, .hero-immersive h1 { color: #fff; } .hero-immersive .hero-sub { color: rgba(255,255,255,.92); } .hero-immersive .hero-eyebrow { color: var(--yellow); text-shadow: 0 1px 2px rgba(0,0,0,.92), 0 2px 14px rgba(0,0,0,.65); } .hero-immersive .hero-stats { display:flex; flex-wrap:wrap; gap: 1.6rem 2.4rem; margin-top: 2.2rem; } .hero-immersive .hstat b { display:block; font-family:'Farro',sans-serif; font-size: 1.9rem; color:#fff; line-height:1; } .hero-immersive .hstat span { font-size:.82rem; color: rgba(255,255,255,.75); letter-spacing:.04em; } /* --- Split: text on soft blue, photo card on the right --- */ .hero-split { background: radial-gradient(900px 460px at 88% -10%, #e6f4ff 0%, transparent 60%), var(--bg-blue); padding: clamp(2.5rem,6vw,5rem) 0 clamp(3rem,7vw,5.5rem); } .hero-split .hero-figure { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/5; max-height: 560px; } .hero-split .figure-badge { position:absolute; left:1rem; bottom:1rem; right:1rem; display:flex; align-items:center; gap:.7rem; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-radius: var(--r); padding: .7rem .9rem; box-shadow: var(--shadow-sm); } .hero-split .figure-badge .fb-ico { width:38px; height:38px; flex:none; display:grid; place-items:center; background:var(--navy); color:var(--yellow); border-radius:10px; } .hero-split .figure-badge b { display:block; color:var(--navy); font-family:'Farro',sans-serif; font-size:.95rem; line-height:1.1; } .hero-split .figure-badge small { color: var(--ink-soft); } /* --- Spotlight: centered text, framed photo beneath, floating chips --- */ .hero-spotlight { background: radial-gradient(1100px 520px at 50% -12%, #e7f4ff 0%, transparent 58%), var(--bg-blue); padding: clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,7vw,5rem); text-align:center; } .hero-spotlight .hero-cta { justify-content: center; } .hero-spotlight .spot-figure { position: relative; margin: clamp(2rem,5vw,3.2rem) auto 0; max-width: 1000px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 16/8; } .hero-spotlight .spot-chip { position: absolute; display:flex; align-items:center; gap:.55rem; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-radius: var(--r-pill); padding: .5rem .9rem; box-shadow: var(--shadow); font-weight: 800; color: var(--navy); font-size: .9rem; } .hero-spotlight .spot-chip .sc-dot { width:9px; height:9px; border-radius:50%; } .hero-spotlight .spot-chip.c1 { top: 12%; left: -8px; } .hero-spotlight .spot-chip.c2 { bottom: 14%; right: -8px; } @media (max-width: 640px){ .hero-spotlight .spot-chip { display:none; } } /* ---------------------------------------------------------------- Trust strip ---------------------------------------------------------------- */ .trust-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; } .trust-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem 2rem; padding: 1.1rem 0; } .trust-item { display:flex; align-items:center; gap:.6rem; color: var(--ink-soft); font-weight:700; font-size:.92rem; } .trust-item svg { width:22px; height:22px; color: var(--gold); flex:none; } .trust-item b { color: var(--navy); } /* badges (license / insurance) */ .badge-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1rem; } .trust-badge { display:flex; align-items:center; gap:.9rem; background:#fff; border:1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); } .trust-badge .tb-seal { width:52px; height:52px; flex:none; border-radius:14px; display:grid; place-items:center; background: var(--bg-blue); color: var(--navy); border:1.5px solid var(--line); } .trust-badge .tb-seal svg { width:26px; height:26px; } .trust-badge.gold .tb-seal { background:#f4f1e0; color:#6f6829; border-color:#e7e1c2; } .trust-badge.cyan .tb-seal { background:#e2f6fd; color:var(--cyan-ink); border-color:#c7ecf6; } .trust-badge b { display:block; color: var(--navy); font-family:'Farro',sans-serif; font-size:1rem; } .trust-badge small { color: var(--ink-soft); font-size:.84rem; } /* ---------------------------------------------------------------- Welcome / feature media ---------------------------------------------------------------- */ .media-figure { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); } .media-figure img { display:block; width:100%; height:100%; object-fit: cover; } .fish-list { list-style: none; padding: 0; margin: 1.3rem 0 0; display:grid; gap:.7rem; } .fish-list li { display:flex; align-items:flex-start; gap:.7rem; color: var(--ink); } .fish-list .fl-ico { width:26px; height:26px; flex:none; border-radius:8px; display:grid; place-items:center; background:var(--bg-blue); color:var(--cyan-ink); margin-top:1px; } .fish-list .fl-ico svg { width:15px; height:15px; } .contact-card { display:flex; align-items:center; gap:1rem; margin-top:1.6rem; background: var(--bg-blue); border:1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem; } .contact-card img { width:58px; height:58px; border-radius:50%; object-fit: cover; flex:none; } .contact-card .cc-num { font-family:'Farro',sans-serif; color:var(--navy); font-size:1.25rem; text-decoration:none; } /* ---------------------------------------------------------------- How it works ---------------------------------------------------------------- */ .steps-grid { display:grid; gap: 1.1rem; grid-template-columns: repeat(3, 1fr); counter-reset: step; } @media (max-width: 820px){ .steps-grid { grid-template-columns: 1fr; } } .step-card { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem; box-shadow: var(--shadow-sm); position:relative; } .step-card .step-n { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-family:'Farro',sans-serif; font-weight:700; font-size:1.15rem; background: var(--navy); color:#fff; margin-bottom: 1rem; } .step-card h4 { margin: 0 0 .35rem; } .step-card p { color: var(--ink-soft); margin: 0; } .step-card .step-ico { position:absolute; top:1.5rem; right:1.5rem; color: var(--line); } .step-card .step-ico svg { width:30px; height:30px; } /* ---------------------------------------------------------------- Pricing — three layouts ---------------------------------------------------------------- */ .pricing-variant { display: none; } body[data-pricing="cards"] .pricing-variant[data-variant="cards"], body[data-pricing="table"] .pricing-variant[data-variant="table"], body[data-pricing="stacked"] .pricing-variant[data-variant="stacked"] { display: block; } .price-note { display:inline-flex; flex-wrap:wrap; gap:.5rem 1.4rem; justify-content:center; margin-top:1.4rem; color:var(--ink-soft); font-weight:700; font-size:.92rem; } .price-note span { display:inline-flex; align-items:center; gap:.4rem; } .price-note .pn-dot { width:7px; height:7px; border-radius:50%; background:var(--gold); } /* cards */ /* Four packages (1–2 / 3 / 4 / 5): 4-up on desktop, 2×2 on tablet, single column on phones — always balanced (no orphan card). */ .price-cards { display:grid; gap:1.2rem; grid-template-columns: repeat(4,1fr); align-items: stretch; } @media (max-width: 1080px){ .price-cards { grid-template-columns: repeat(2,1fr); max-width: 760px; margin-inline:auto; } } @media (max-width: 620px){ .price-cards { grid-template-columns: 1fr; max-width: 460px; } } .price-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 1.8rem; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; } .price-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .price-card.featured { border-color: var(--gold); box-shadow: var(--shadow); position: relative; } .price-card.featured::before { content: "Most popular"; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background: var(--gold); color:#fff; font-weight:800; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; padding:.3rem .8rem; border-radius: var(--r-pill); white-space:nowrap; } .price-card .pc-name { font-family:'Farro',sans-serif; color:var(--navy); font-size:1.2rem; } .price-card .pc-sub { color: var(--ink-faint); font-size:.84rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; } .price-card .pc-amt { font-family:'Farro',sans-serif; font-size: 2.9rem; color: var(--navy); line-height:1; margin: 1rem 0 .25rem; } .price-card .pc-amt small { font-size: .9rem; color: var(--ink-soft); font-family:'Nunito Sans',sans-serif; font-weight:700; } .price-card ul { list-style:none; padding:0; margin: 1.1rem 0 1.6rem; display:grid; gap:.6rem; } .price-card ul li { display:flex; gap:.55rem; align-items:flex-start; color: var(--ink); font-size:.95rem; } .price-card ul li svg { width:18px; height:18px; color: var(--ok); flex:none; margin-top:1px; } .price-card .btn { margin-top: auto; } /* table */ .price-table-wrap { overflow-x: auto; border-radius: var(--r-lg); border:1px solid var(--line); box-shadow: var(--shadow-sm); background:#fff; } .price-table { width:100%; border-collapse: collapse; min-width: 620px; } .price-table th, .price-table td { padding: 1.05rem 1.2rem; text-align:left; border-bottom: 1px solid var(--line-soft); } .price-table thead th { background: var(--bg-blue); font-family:'Farro',sans-serif; color: var(--navy); font-weight:700; } .price-table tbody tr:last-child td { border-bottom: 0; } .price-table tbody tr.featured { background: #fbfaf2; } .price-table .pt-name { font-family:'Farro',sans-serif; color:var(--navy); font-size:1.05rem; } .price-table .pt-name small { display:block; color:var(--ink-faint); font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; } .price-table .pt-amt { font-family:'Farro',sans-serif; color:var(--navy); font-size:1.5rem; white-space:nowrap; } .price-table td .btn { white-space:nowrap; } /* stacked */ .price-stack { display:grid; gap: .9rem; max-width: 760px; margin-inline:auto; } .price-row { display:grid; grid-template-columns: auto 1fr auto auto; align-items:center; gap: 1.2rem; background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 1.2rem 1.4rem; box-shadow: var(--shadow-sm); } .price-row.featured { border-color: var(--gold); } .price-row .pr-amt { font-family:'Farro',sans-serif; font-size:1.9rem; color: var(--navy); line-height:1; } .price-row .pr-emblem { width:54px; height:54px; flex:none; border-radius:14px; background:var(--bg-blue); color:var(--navy); display:grid; place-items:center; font-family:'Farro',sans-serif; font-weight:700; } .price-row .pr-name { font-family:'Farro',sans-serif; color:var(--navy); font-size:1.1rem; } .price-row .pr-meta { color: var(--ink-soft); font-size:.9rem; } @media (max-width: 720px){ .price-row { grid-template-columns: auto 1fr; row-gap:.8rem; } .price-row .pr-amt { grid-column: 1 / -1; } .price-row .btn { grid-column: 1 / -1; } } /* ---------------------------------------------------------------- What's included vs bring-your-own ---------------------------------------------------------------- */ .split-cols { display:grid; gap:1.2rem; grid-template-columns: 1fr 1fr; } @media (max-width: 820px){ .split-cols { grid-template-columns: 1fr; } } .incl-card { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 1.8rem; box-shadow: var(--shadow-sm); } .incl-card .ic-head { display:flex; align-items:center; gap:.7rem; margin-bottom: 1.1rem; } .incl-card .ic-badge { width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center; } .incl-card.provide .ic-badge { background: var(--ok-soft); color:#1c6b46; } .incl-card.bring .ic-badge { background:#f4f1e0; color:#6f6829; } .incl-card .ic-badge svg { width:22px; height:22px; } .incl-card h4 { margin:0; } .incl-card .ic-sub { color: var(--ink-faint); font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; } .incl-list { list-style:none; padding:0; margin:0; display:grid; gap:.65rem; } .incl-list li { display:flex; gap:.6rem; align-items:flex-start; color: var(--ink); } .incl-list li svg { width:18px; height:18px; flex:none; margin-top:2px; } .incl-card.provide .incl-list li svg { color: var(--ok); } .incl-card.bring .incl-list li svg { color: var(--gold); } /* ---------------------------------------------------------------- FAQ ---------------------------------------------------------------- */ .faq-wrap { max-width: 760px; margin-inline:auto; display:grid; gap:.7rem; } .faq-item { background:#fff; border:1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow:hidden; } .faq-q { display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; text-align:left; border:0; background:transparent; cursor:pointer; padding: 1.15rem 1.3rem; font-family:'Farro',sans-serif; font-weight:700; color: var(--navy); font-size:1.05rem; } .faq-q .faq-pm { width:30px; height:30px; flex:none; border-radius:9px; background:var(--bg-blue); color:var(--navy); display:grid; place-items:center; transition: transform .2s ease, background .2s ease; } .faq-q .faq-pm svg { width:16px; height:16px; } .faq-item.open .faq-q .faq-pm { transform: rotate(45deg); background: var(--navy); color:#fff; } .faq-a { max-height: 0; overflow:hidden; transition: max-height .28s ease; } .faq-a-inner { padding: 0 1.3rem 1.25rem; color: var(--ink-soft); } .faq-item.open .faq-a { max-height: 320px; } /* ---------------------------------------------------------------- Service cards (excursion) ---------------------------------------------------------------- */ .svc-grid { display:grid; gap:1.2rem; grid-template-columns: repeat(3,1fr); } @media (max-width: 820px){ .svc-grid { grid-template-columns: 1fr; } } .svc-card { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; } .svc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .svc-card .svc-img { aspect-ratio: 16/10; overflow:hidden; } .svc-card .svc-img img { width:100%; height:100%; object-fit: cover; transition: transform .4s ease; } .svc-card:hover .svc-img img { transform: scale(1.05); } .svc-card .svc-body { padding: 1.4rem 1.5rem 1.6rem; } .svc-card h4 { margin: 0 0 .4rem; } .svc-card h4 a { color: var(--navy); text-decoration: none; } .svc-card p { color: var(--ink-soft); margin:0; } /* ---------------------------------------------------------------- General question form ---------------------------------------------------------------- */ .q-form-card { max-width: 720px; margin-inline:auto; } .q-form .form-row { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 620px){ .q-form .form-row { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------- CTA band ---------------------------------------------------------------- */ .cta-band { position: relative; overflow: hidden; background: linear-gradient(135deg, #2a4d80 0%, var(--navy-deep) 100%); color:#fff; } .cta-band .container { position: relative; z-index: 2; } .cta-band h2 { color:#fff; font-size: clamp(1.8rem, 4vw, 2.8rem); } .cta-band p { color: rgba(255,255,255,.82); } .cta-band .cta-fish { position:absolute; right:-30px; bottom:-30px; width: 260px; color: rgba(255,255,255,.06); z-index:1; } .cta-band .btn-cyan { color:#06384a; } /* ---------------------------------------------------------------- Page header band (inner pages) ---------------------------------------------------------------- */ .page-band { position: relative; background: linear-gradient(135deg, #2a4d80 0%, var(--navy-deep) 100%); color:#fff; padding: clamp(3rem,7vw,5rem) 0 clamp(3.5rem,8vw,5.5rem); overflow:hidden; } .page-band h1 { color:#fff; font-size: clamp(2.1rem, 5vw, 3.4rem); } .page-band .pb-crumb { color: var(--gold-soft); font-weight:800; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; } .page-band .pb-wave { position:absolute; left:0; right:0; bottom:-1px; height:42px; background:url("data:image/svg+xml;utf8,") no-repeat; background-size:cover; } /* ---------------------------------------------------------------- Footer ---------------------------------------------------------------- */ .site-footer { background: var(--navy-deep); color: rgba(255,255,255,.82); position: relative; overflow:hidden; } .site-footer a { color: rgba(255,255,255,.82); text-decoration: none; } .site-footer a:hover { color: #fff; } .site-footer .foot-top { padding: clamp(3rem,6vw,4.5rem) 0 2.5rem; display:grid; gap:2.4rem; grid-template-columns: 1.4fr 1fr 1.2fr; } @media (max-width: 880px){ .site-footer .foot-top { grid-template-columns: 1fr; gap:2rem; } } .site-footer h5 { color:#fff; font-size:.95rem; letter-spacing:.02em; margin-bottom: 1rem; } .foot-brand .bm-text b { color:#fff; } .foot-brand .bm-text span { color: var(--gold-soft); } .foot-contact-num { font-family:'Farro',sans-serif; color:#fff; font-size:1.4rem; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; } .foot-list { list-style:none; padding:0; margin:0; display:grid; gap:.6rem; } .foot-loc { display:grid; gap:1rem; } .foot-loc .fl { display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; line-height:1.45; } .foot-loc .fl svg { width:18px; height:18px; color: var(--gold-soft); flex:none; margin-top:2px; } .foot-news input { background: rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.16); color:#fff; } .foot-news input::placeholder { color: rgba(255,255,255,.5); } .foot-news input:focus { border-color: var(--cyan); background: rgba(255,255,255,.12); color:#fff; box-shadow: 0 0 0 3px rgba(1,193,241,.18); } .foot-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 1.4rem 0; display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; align-items:center; justify-content:space-between; font-size:.85rem; } .site-footer .foot-fish { position:absolute; right:2%; top:10%; width:160px; color: rgba(255,255,255,.05); } /* ---------------------------------------------------------------- Scroll reveal (only when data-flow="waves") ---------------------------------------------------------------- */ .reveal { opacity: 1; transform: none; } body[data-flow="waves"] .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } body[data-flow="waves"] .reveal.in { opacity: 1; transform: none; } /* section wave dividers (only when data-flow="waves") */ .flow-wave { display: none; } body[data-flow="waves"] .flow-wave { display:block; width:100%; height: 40px; line-height:0; } body[data-flow="waves"] .flow-wave svg { width:100%; height:100%; display:block; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body[data-flow="waves"] .reveal { opacity:1; transform:none; transition:none; } .ft-marquee { animation: none !important; } } /* ---------------------------------------------------------------- Real logo — base rules live in the shared theme.css (used by the booking app bar too); only the marketing-nav size variant is here. ---------------------------------------------------------------- */ body[data-nav="float"] .site-logo img { height: 48px; } .foot-logo { display:inline-flex; align-items:center; gap:.9rem; text-decoration:none; } .foot-logo .fl-badge { width:88px; height:88px; flex:none; border-radius:50%; background:#fff; display:grid; place-items:center; padding:9px; box-shadow: 0 6px 18px rgba(0,0,0,.18); } .foot-logo .fl-badge img { width:100%; height:100%; object-fit:contain; } .foot-logo .fl-word { line-height:1.1; } .foot-logo .fl-word b { color:#fff; font-family:'Farro',sans-serif; font-size:1.05rem; display:block; } .foot-logo .fl-word span { color: var(--gold-soft); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:800; } /* ---------------------------------------------------------------- Fish ticker (kokanee / trout / king salmon marquee) ---------------------------------------------------------------- */ .fish-ticker { background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding: .85rem 0; overflow:hidden; } .ft-row { overflow:hidden; display:flex; } .ft-row + .ft-row { margin-top: -.15rem; } .ft-marquee { display:flex; flex:none; width:max-content; animation: tickerMove 36s linear infinite; } .ft-marquee.rev { animation-direction: reverse; } .ft-set { display:flex; flex:none; } .ft-item { font-family:'Oswald', 'Nunito Sans', system-ui, sans-serif; font-weight:600; text-transform:uppercase; font-size: clamp(1.75rem, 5vw, 3.3rem); line-height:1.05; letter-spacing:.02em; padding: 0; white-space:nowrap; color: var(--navy); transform: skewX(-9deg); } .ft-item::after { content:"•"; color: var(--gold); -webkit-text-stroke:0; font-size:.4em; margin: 0 1.5rem; vertical-align: .28em; opacity:.85; } .ft-outline .ft-item { color: transparent; -webkit-text-stroke: 1.5px #9cb4d9; } @keyframes tickerMove { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------------------------------------------------------------- About — value props, story, the boat ---------------------------------------------------------------- */ .value-grid { display:grid; gap:1.1rem; grid-template-columns: repeat(3,1fr); } @media (max-width: 820px){ .value-grid { grid-template-columns: 1fr; } } .value-card { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem; box-shadow: var(--shadow-sm); } .value-card .v-ico { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background: var(--bg-blue); color: var(--navy); margin-bottom: 1rem; } .value-card.gold .v-ico { background:#f4f1e0; color:#6f6829; } .value-card.cyan .v-ico { background:#e2f6fd; color: var(--cyan-ink); } .value-card .v-ico svg { width:24px; height:24px; } .value-card h4 { margin: 0 0 .35rem; } .value-card p { color: var(--ink-soft); margin: 0; } .boat-spec-list { list-style:none; padding:0; margin: 1.3rem 0 0; display:grid; gap:.9rem; } .boat-spec-list li { display:flex; gap:.8rem; align-items:flex-start; } .boat-spec-list .bs-ico { width:40px; height:40px; flex:none; border-radius:11px; display:grid; place-items:center; background: var(--bg-blue); color: var(--cyan-ink); } .boat-spec-list .bs-ico svg { width:20px; height:20px; } .boat-spec-list b { color: var(--navy); display:block; } .boat-spec-list span { color: var(--ink-soft); font-size:.92rem; } /* ---------------------------------------------------------------- Excursion — hour-by-hour day timeline + lakes/species ---------------------------------------------------------------- */ .day-timeline { max-width: 720px; margin-inline:auto; } .day-step { display:grid; grid-template-columns: 92px 1fr; gap: 1.2rem; } .day-time { font-family:'Farro',sans-serif; color: var(--navy); font-weight:700; text-align:right; font-size:.98rem; padding-top:.05rem; } .day-body { position:relative; padding: 0 0 1.8rem 1.7rem; border-left:2px solid var(--line); } .day-step:last-child .day-body { border-left-color: transparent; padding-bottom:0; } .day-body::before { content:""; position:absolute; left:-9px; top:2px; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--gold); } .day-step:first-child .day-body::before { border-color: var(--navy); } .day-body h4 { margin: 0 0 .25rem; } .day-body p { margin: 0; color: var(--ink-soft); } @media (max-width: 560px){ .day-step { grid-template-columns: 64px 1fr; gap:.8rem; } .day-time { font-size:.84rem; } } .lakes-grid { display:grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; } @media (max-width: 820px){ .lakes-grid { grid-template-columns: 1fr; } } .lake-card { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-sm); } .lake-card .lc-top { padding: 1.4rem 1.6rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; } .lake-card.shaver .lc-top { background: var(--bg-blue); } .lake-card.pine .lc-top { background: #f4f1e0; } .lake-card .lc-top h3 { margin:0; font-size: 1.3rem; } .lake-card .lc-season { font-weight:800; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-soft); white-space:nowrap; } .lake-card .lc-body { padding: 1.4rem 1.6rem 1.6rem; } .lake-card .lc-body p { color: var(--ink-soft); margin: 0 0 1rem; } .species-row { display:flex; gap:.5rem; flex-wrap:wrap; } .species-tag { display:inline-flex; align-items:center; gap:.4rem; background: var(--bg-off); border:1px solid var(--line); border-radius: var(--r-pill); padding:.4rem .85rem; font-weight:700; font-size:.88rem; color: var(--navy); } .species-tag .st-dot { width:8px; height:8px; border-radius:50%; }