/* * stay-near-hersheypark.css — paid-search landing page styles. * * SCOPE: every rule in this file is scoped under .snh-page. The page * component wraps the entire route in
, so these * rules never apply to anything else on the site. This is important * because the handoff redefines several class names that exist in * base.css (.btn, .eyebrow, .marker, .container, etc.) — scoping * prevents collisions. * * The page also runs without the main-site TopBar/MobileMenu/Footer * (see components/App.jsx isChromeless gate) — the two paths off the * page are book or call. * * Tokens (--bg, --ink, --accent, etc.) come from base.css and resolve * normally inside .snh-page. The Creek palette is the default and the * only palette this page renders against (the data-palette attribute * on can vary site-wide; we don't override it here). */ .snh-page { background: var(--bg); color: var(--ink); } .snh-page * { box-sizing: border-box; } .snh-page a { color: inherit; text-decoration: none; } .snh-container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } .snh-narrow { max-width: 920px; margin: 0 auto; padding: 0 var(--gutter); } /* ===== TOPBAR (fixed, transparent → solid on scroll) ===== */ .snh-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease; } .snh-topbar.snh-transparent { background: transparent; } .snh-topbar.snh-solid { background: color-mix(in oklab, var(--bg), transparent 6%); backdrop-filter: blur(14px) saturate(1.05); border-bottom: 1px solid var(--rule); } .snh-topbar-row { max-width: var(--max); margin: 0 auto; padding: 16px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .snh-topbar-right { display: flex; align-items: center; gap: 16px; } @media (min-width: 640px) { .snh-topbar-right { gap: 24px; } } .snh-topbar-logo-link { display: inline-flex; align-items: center; /* The logo links to https://allenberry.com/ — the single intentional navigation leak on this page, per the prompt. Gives users a small fallback affordance without putting a full nav bar back. */ } .snh-topbar-logo { height: 48px; width: auto; display: block; transition: opacity 0.3s ease; } @media (min-width: 640px) { .snh-topbar-logo { height: 56px; } } .snh-topbar-phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--body); font-weight: 500; font-size: 14px; letter-spacing: 0.04em; padding: 8px 4px; border-bottom: 1px solid transparent; transition: border-color 0.2s, color 0.3s ease; } .snh-topbar.snh-transparent .snh-topbar-phone { color: white; } .snh-topbar.snh-solid .snh-topbar-phone { color: var(--ink); } .snh-topbar-phone:hover { border-bottom-color: currentColor; } .snh-topbar-phone-label { display: none; } @media (min-width: 640px) { .snh-topbar-phone-label { display: inline; opacity: 0.7; margin-right: 6px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; } } .snh-topbar-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; font-family: var(--body); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: white; cursor: pointer; transition: background 0.2s ease, color 0.3s ease, border-color 0.3s ease; white-space: nowrap; } .snh-topbar-btn:hover { background: color-mix(in oklab, var(--accent), #000 14%); } .snh-topbar.snh-transparent .snh-topbar-btn { background: rgba(255,255,255,.95); color: var(--ink); border-color: rgba(255,255,255,.95); } .snh-topbar.snh-transparent .snh-topbar-btn:hover { background: white; } .snh-topbar-btn-short { display: inline; } .snh-topbar-btn-long { display: none; } @media (min-width: 640px) { .snh-topbar-btn-short { display: none; } .snh-topbar-btn-long { display: inline; } .snh-topbar-btn { padding: 12px 22px; font-size: 13px; } } /* The cb-book-now-button wrapper around the topbar button needs to render in line with the phone link — Cloudbeds' :defined version of the element is `display: contents` already (set in base.css), so the wrapped inner element governs layout. Nothing extra needed here. */ /* ===== BUTTONS (page-scoped, .snh- prefixed) ===== */ .snh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 26px; font-family: var(--body); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 2px; cursor: pointer; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); transition: all 0.2s ease; white-space: nowrap; text-decoration: none; } .snh-btn:hover { background: color-mix(in oklab, var(--ink), #000 18%); } .snh-btn.snh-primary { background: var(--accent); border-color: var(--accent); color: white; } .snh-btn.snh-primary:hover { background: color-mix(in oklab, var(--accent), #000 18%); } .snh-btn.snh-ghost-light { background: transparent; color: white; border-color: rgba(255,255,255,.75); } .snh-btn.snh-ghost-light:hover { background: white; color: var(--ink); border-color: white; } .snh-btn.snh-big { padding: 20px 34px; font-size: 14px; } .snh-pill { border-radius: 999px; } /* ===== TYPE UTILITIES (page-scoped) ===== */ .snh-eyebrow { font-family: var(--body); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); display: inline-block; } .snh-marker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-mute); text-transform: uppercase; } .snh-ia { font-style: italic; color: var(--accent); } /* ===== SECTION BASE ===== */ .snh-page section { padding: clamp(72px, 10vw, 140px) 0; } /* ===== HERO ===== */ .snh-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; color: white; overflow: hidden; padding: 0; /* override .snh-page section default */ } .snh-hero-bg { position: absolute; inset: 0; background-image: url("../images/snh-hero-drone-sunset.png"); background-size: cover; background-position: center; transform: scale(1.02); } .snh-hero-overlay { position: absolute; inset: 0; /* Gradient shape preserved from the handoff (top dark → middle lift → bottom dark) so the sunset still shows through, but every stop is darker than the handoff's original values for text readability over busy tree-canopy areas of the image. The middle stop in particular bumped from 0.08 → 0.30 — that's where the headline sits, and the handoff's lift left it fighting bright leaves. */ background: linear-gradient(180deg, rgba(18,24,20,0.40) 0%, rgba(18,24,20,0.30) 28%, rgba(18,24,20,0.55) 65%, rgba(18,24,20,0.88) 100%); } .snh-hero-inner { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; width: 100%; padding: 0 var(--gutter) clamp(40px, 8vw, 96px); padding-top: clamp(100px, 14vw, 140px); } .snh-hero-top-marker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: rgba(255,255,255,.92); margin-bottom: 28px; } .snh-hero-top-marker .snh-dot { width: 5px; height: 5px; background: white; border-radius: 50%; flex-shrink: 0; } .snh-hero h1 { font-family: var(--display); font-weight: 400; color: white; font-size: clamp(40px, 8vw, 108px); line-height: 0.96; letter-spacing: -0.025em; max-width: 14ch; text-shadow: 0 2px 28px rgba(0,0,0,.25); margin: 0; } .snh-hero h1 .snh-line2 { display: block; } .snh-hero-subhead { margin-top: clamp(20px, 3vw, 32px); max-width: 56ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: rgba(255,255,255,.88); font-weight: 300; } .snh-hero-ctas { margin-top: clamp(28px, 4vw, 44px); display: flex; gap: 12px; flex-wrap: wrap; } /* ===== PITCH (Section 1) ===== */ .snh-pitch .snh-eyebrow { color: var(--ink-mute); margin-bottom: 28px; } .snh-pitch-lede { font-family: var(--display); font-weight: 400; /* Handoff's original sizing. Was being overridden to body size by a specificity bug in `.snh-pitch p` until that rule was scoped with :not(.snh-pitch-lede). */ font-size: clamp(28px, 3.6vw, 48px); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 32px; } .snh-pitch-lede em { color: var(--accent); font-style: italic; } /* Body-paragraph styling for the section. Excludes .snh-pitch-lede so the lede's font-size (above) isn't outranked on specificity — `.snh-pitch p` is 0,1,1 and `.snh-pitch-lede` is 0,1,0, so without the :not() exclusion the body rule was silently dictating the lede size too. */ .snh-pitch p:not(.snh-pitch-lede) { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.65; color: var(--ink-soft); margin: 0 0 24px; max-width: 64ch; } .snh-pitch p em { font-style: italic; color: var(--accent); } .snh-pitch-turn { display: block; margin: 40px 0; font-family: var(--display); font-style: italic; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3; color: var(--accent); max-width: 30ch; } /* ===== TRIP (Section 2) ===== */ .snh-trip { background: var(--bg-elev); } .snh-trip-header { text-align: center; margin-bottom: clamp(48px, 6vw, 80px); padding: 0 var(--gutter); } .snh-trip-header .snh-eyebrow { color: var(--ink-mute); margin-bottom: 18px; } .snh-trip-header h2 { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 4.5vw, 68px); line-height: 1.02; letter-spacing: -0.02em; max-width: 22ch; margin: 0 auto; } .snh-day { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule); } .snh-day-image { position: relative; min-height: 60vh; overflow: hidden; } .snh-day-image img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .snh-day-stamp { position: absolute; top: 24px; left: 24px; background: rgba(255,255,255,.95); color: var(--ink); padding: 10px 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; } .snh-day-stamp .snh-num { font-family: var(--display); font-size: 22px; line-height: 1; color: var(--accent); font-style: italic; } .snh-day-copy { padding: clamp(40px, 6vw, 80px) var(--gutter); } .snh-day-marker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px; display: block; } .snh-day-copy h3 { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 24px; } .snh-day-copy h3 .snh-ia { color: var(--accent); } .snh-day-copy p { color: var(--ink-soft); font-size: 17px; line-height: 1.65; margin: 0 0 16px; max-width: 56ch; } .snh-day-footnote { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule); font-style: italic; color: var(--accent); font-family: var(--display); font-size: 18px; line-height: 1.5; max-width: 50ch; } /* Day 3 — flexible choice grid */ .snh-day3-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 28px; max-width: 640px; } .snh-day3-card { border: 1px solid var(--rule); background: var(--bg); padding: 24px 24px 28px; } .snh-day3-tag { display: inline-block; margin-bottom: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); padding: 3px 8px; border: 1px solid var(--rule); } .snh-day3-card h4 { font-family: var(--display); font-weight: 400; font-size: 20px; margin: 0 0 12px; line-height: 1.2; } .snh-day3-card p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; margin: 0; } @media (min-width: 900px) { .snh-day { grid-template-columns: 1fr 1fr; } .snh-day.snh-reverse .snh-day-image { order: 2; } .snh-day-image { min-height: 560px; } } .snh-day-last { border-bottom: 1px solid var(--rule); } /* ===== BOOK BAR (Section 3 — dark band) ===== */ .snh-bookbar { background: var(--ink); color: var(--bg); text-align: center; } .snh-bookbar .snh-narrow { max-width: 740px; } .snh-bookbar .snh-eyebrow { color: rgba(232,226,210,.55); margin-bottom: 22px; } .snh-bookbar h2 { font-family: var(--display); font-weight: 400; color: var(--bg); max-width: 18ch; margin: 0 auto 28px; font-size: clamp(32px, 4.2vw, 60px); line-height: 1.02; letter-spacing: -0.02em; } .snh-bookbar h2 .snh-ia { color: color-mix(in oklab, var(--accent), white 35%); } .snh-bookbar-sub { color: rgba(232,226,210,.75); font-size: 17px; line-height: 1.55; max-width: 48ch; margin: 0 auto 36px; } .snh-bookbar-cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 24px; } /* ===== DIFFERENTIATORS (Section 4) ===== */ .snh-diffs-head { text-align: center; max-width: 760px; margin: 0 auto clamp(48px, 6vw, 72px); padding: 0 var(--gutter); } .snh-diffs-head .snh-eyebrow { margin-bottom: 18px; } .snh-diffs-head h2 { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 4.5vw, 64px); line-height: 1.05; letter-spacing: -0.02em; margin: 0; } .snh-diff-grid { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); } .snh-diff-card { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 0 0 32px; display: flex; flex-direction: column; background: var(--bg); transition: background 0.2s; } .snh-diff-card:hover { background: var(--bg-elev); } .snh-diff-img-wrap { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--rule); } .snh-diff-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .snh-diff-card:hover .snh-diff-img-wrap img { transform: scale(1.03); } .snh-diff-meta { padding: 24px clamp(20px, 3vw, 32px) 0; } .snh-diff-meta .snh-marker { display: block; margin-bottom: 12px; } .snh-diff-card h3 { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 14px; } .snh-diff-card h3 .snh-ia { color: var(--accent); } .snh-diff-card p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin: 0; } @media (min-width: 700px) { .snh-diff-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .snh-diff-grid { grid-template-columns: repeat(3, 1fr); } } /* ===== PRACTICALITIES (Section 5) ===== */ .snh-practicalities { background: var(--bg-elev); } .snh-prac-grid { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 64px); } .snh-prac-right { display: flex; flex-direction: column; gap: 40px; } .snh-prac-block .snh-marker { display: block; margin-bottom: 16px; } .snh-prac-block h3 { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 18px; } .snh-prac-block h3 .snh-ia { color: var(--accent); } .snh-prac-block p { color: var(--ink-soft); font-size: 16px; line-height: 1.6; margin: 0 0 12px; max-width: 52ch; } .snh-distances { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-top: 8px; } .snh-distance { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; } .snh-distance-place { color: var(--ink); } .snh-distance-dur { font-family: var(--mono); color: var(--ink-mute); font-size: 13px; } .snh-prac-cta { margin-top: clamp(56px, 6vw, 80px); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } .snh-prac-cta-small { font-size: 13px; color: var(--ink-mute); font-family: var(--mono); letter-spacing: 0.06em; } .snh-prac-cta-small a { border-bottom: 1px solid currentColor; } @media (min-width: 900px) { .snh-prac-grid { grid-template-columns: 1fr 1fr; gap: clamp(56px, 6vw, 96px); } .snh-distances { grid-template-columns: 1fr; } } /* ===== REVIEWS (Section 6) ===== */ .snh-reviews-head { text-align: center; margin-bottom: clamp(48px, 6vw, 72px); padding: 0 var(--gutter); } .snh-reviews-head .snh-eyebrow { margin-bottom: 14px; } .snh-reviews-head h2 { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 3.8vw, 48px); line-height: 1.05; letter-spacing: -0.02em; max-width: 22ch; margin: 0 auto; } .snh-review-grid { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule); } .snh-review { padding: clamp(36px, 4vw, 56px) var(--gutter); border-bottom: 1px solid var(--rule); margin: 0; } .snh-review-quote { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 2vw, 26px); line-height: 1.4; color: var(--ink); margin: 0 0 20px; max-width: 56ch; } .snh-review-quote em { color: var(--accent); font-style: italic; } .snh-review-attrib { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); } .snh-review-attrib .snh-review-src { color: var(--ink-soft); } @media (min-width: 900px) { .snh-review-grid { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--rule); } .snh-review { border-bottom: 0; border-right: 1px solid var(--rule); padding: clamp(40px, 4vw, 56px) clamp(28px, 3vw, 40px); } .snh-review:last-child { border-right: 0; } } /* ===== FOOTER ===== */ .snh-footer { background: #1a2530; color: #e9dec8; padding: clamp(56px, 6vw, 80px) 0 32px; } .snh-footer-row { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; justify-items: center; text-align: center; } .snh-footer-logo { height: 64px; width: auto; } .snh-footer-contact { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.6; } .snh-footer-addr { color: rgba(233,222,200,.85); } .snh-footer-contact a { display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid transparent; color: #e9dec8; } .snh-footer-contact a:hover { border-bottom-color: currentColor; } .snh-footer-meta { margin-top: clamp(40px, 4vw, 56px); padding-top: 20px; border-top: 1px solid rgba(233,222,200,.12); display: flex; flex-direction: column; gap: 8px; align-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(233,222,200,.5); } @media (min-width: 700px) { .snh-footer-row { grid-template-columns: auto 1fr auto; text-align: left; justify-items: stretch; } .snh-footer-contact { align-items: center; } .snh-footer-meta { flex-direction: row; justify-content: space-between; } } /* ===== CLOUDBEDS BUTTON WRAPPER HANDLING ===== * The cb-book-now-button fallback styling lives in base.css. We just * need to make sure the fallback inside the topbar instance picks * up the topbar pill styling. The topbar button is rendered as the * fallback with class="snh-topbar-btn"; once Cloudbeds upgrades * the element, base.css hides the fallback and the upgraded button * takes over with Cloudbeds' fixed pill shape — which already matches * the topbar treatment well enough (rounded, accent background). * * The hero / bookbar / practicalities CTAs use the page's .snh-btn * styles on the fallback ; once upgraded, Cloudbeds' default pill * replaces them. The visual change at upgrade time is minor (filled * pill in both cases) and acceptable. * * Do not add display rules for cb-book-now-button here — base.css * already handles :defined / :not(:defined) globally. */