:root { --t-transition-fluid: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); --t-transition-spring: all 0.75s cubic-bezier(0.34, 1.56, 0.64, 1); --t-shadow-ambient: 0 4px 30px rgba(54, 43, 36, 0.02); --t-shadow-soft: 0 12px 40px -10px rgba(54, 43, 36, 0.05), 0 1px 2px rgba(54, 43, 36, 0.02); --t-shadow-vip: 0 32px 64px -16px rgba(54, 43, 36, 0.08), 0 1px 3px rgba(54, 43, 36, 0.02); --t-border-hairline: 1px solid rgba(54, 43, 36, 0.08); } body.page-tannersville { background-color: var(--ss-bg); color: var(--ss-text); font-family: "Plus Jakarta Sans", "Lexend", system-ui, -apple-system, sans-serif; overflow-x: hidden; position: relative; } body.page-tannersville::before { content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: 0.022; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); } .ss-section-premium { position: relative; padding: clamp(5rem, 10vw, 10rem) 0; } .ss-eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1.5rem; padding: 0.4rem 0.85rem; border: 1px solid rgba(17, 106, 66, 0.12); border-radius: 999px; background: rgba(17, 106, 66, 0.05); color: var(--ss-green); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; } .page-tannersville h1 { font-size: clamp(2.5rem, 6vw, 4.75rem); line-height: 0.96; letter-spacing: 0; color: var(--ss-ink); font-weight: 800; } .page-tannersville h2 { font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.05; letter-spacing: 0; color: var(--ss-ink); font-weight: 800; } .page-tannersville h3 { font-size: clamp(1.4rem, 2.5vw, 1.85rem); line-height: 1.15; letter-spacing: 0; color: var(--ss-ink); font-weight: 700; } .page-tannersville .ss-serif, .page-tannersville h1 span, .page-tannersville h2 span, .page-tannersville h3 span { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; color: var(--ss-green); letter-spacing: 0; } .page-tannersville .lead-text, .page-programs .lead-text { font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.6; color: var(--ss-muted); max-width: 58ch; text-wrap: pretty; } .btn-premium { display: inline-flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.5rem 0.5rem 2rem; border-radius: 9999px; font-weight: 700; font-size: 0.95rem; line-height: 1; text-decoration: none; transition: var(--t-transition-fluid); position: relative; overflow: hidden; border: 1px solid transparent; cursor: pointer; } .btn-premium:not(:has(.btn-icon-circle)) { justify-content: center; padding: 0.65rem 1.35rem; text-align: center; } .ss-card-high-end { background: var(--ss-surface, #ffffff); border: 1px solid var(--ss-border, rgba(54, 43, 36, 0.14)); border-radius: 1.25rem; box-shadow: var(--t-shadow-ambient, 0 4px 30px rgba(54, 43, 36, 0.02)); transition: var(--t-transition-fluid, all 0.6s cubic-bezier(0.16, 1, 0.3, 1)); } .ss-card-high-end:hover { transform: translateY(-4px); box-shadow: var(--t-shadow-soft, 0 12px 40px -10px rgba(54, 43, 36, 0.05)); border-color: rgba(54, 43, 36, 0.22); } .btn-premium:active { transform: scale(0.97); } .btn-premium--primary { background-color: var(--ss-green); color: var(--ss-surface); border-color: var(--ss-green); box-shadow: 0 10px 30px -8px rgba(17, 106, 66, 0.3); } .btn-premium--primary:hover { background-color: #0d5233; border-color: #0d5233; box-shadow: 0 15px 35px -8px rgba(17, 106, 66, 0.45); transform: translateY(-2px); } .btn-premium--secondary { background-color: transparent; color: var(--ss-text); border-color: var(--ss-border); } .btn-premium--secondary:hover { background-color: var(--ss-surface2); border-color: var(--ss-muted); transform: translateY(-2px); } .btn-premium .btn-icon-circle { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; margin-left: 1.25rem; transition: var(--t-transition-fluid); flex-shrink: 0; } .btn-premium--primary .btn-icon-circle { background-color: rgba(255, 255, 255, 0.16); color: var(--ss-surface); } .btn-premium--secondary .btn-icon-circle { background-color: rgba(54, 43, 36, 0.06); color: var(--ss-text); } .btn-premium:hover .btn-icon-circle { transform: translateX(4px) scale(1.05); } .db-card { padding: 0.65rem; border: var(--t-border-hairline); border-radius: 2.25rem; background-color: rgba(54, 43, 36, 0.03); box-shadow: var(--t-shadow-ambient); transition: var(--t-transition-fluid); height: 100%; } .db-card:hover { transform: translateY(-6px); box-shadow: var(--t-shadow-vip); background-color: rgba(54, 43, 36, 0.05); } .db-card-inner { display: flex; flex-direction: column; height: 100%; padding: 2.5rem 2rem; border-radius: calc(2.25rem - 0.65rem); background: linear-gradient(180deg, var(--ss-surface) 0%, #FAF8F5 100%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), 0 8px 24px -10px rgba(54, 43, 36, 0.04); } .bento-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 992px) { .bento-grid-2x2 { display: grid; grid-template-columns: 1.3fr 0.7fr; grid-template-rows: auto auto; gap: 2rem; } } .bento-stat-card { padding: 2.25rem; background-color: var(--ss-surface); border: var(--t-border-hairline); border-radius: 1.75rem; box-shadow: var(--t-shadow-ambient); transition: var(--t-transition-fluid); display: flex; flex-direction: column; justify-content: space-between; min-height: 160px; } .bento-stat-card:hover { transform: translateY(-4px); border-color: rgba(17, 106, 66, 0.25); box-shadow: var(--t-shadow-soft); } .bento-stat-card .stat-value { font-family: "Lexend", sans-serif; font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 800; color: var(--ss-green); line-height: 1; margin-bottom: 0.75rem; } .bento-stat-card .stat-label { font-size: 0.85rem; font-weight: 700; color: var(--ss-muted); text-transform: uppercase; letter-spacing: 0.12em; } .steps-container { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .steps-container { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px) { .steps-container { grid-template-columns: repeat(4, 1fr); padding-bottom: 3rem; } .step-card:nth-child(even) { transform: translateY(2.5rem); } } .step-card { padding: 0.5rem; border: var(--t-border-hairline); border-radius: 2rem; background-color: rgba(54, 43, 36, 0.03); box-shadow: var(--t-shadow-ambient); transition: var(--t-transition-fluid); height: 100%; } .step-card:hover { transform: translateY(-4px); box-shadow: var(--t-shadow-soft); } @media (min-width: 1200px) { .step-card:nth-child(even):hover { transform: translateY(2rem); } } .step-card-inner { padding: 2.25rem 1.75rem; background-color: var(--ss-surface); border-radius: calc(2rem - 0.5rem); height: 100%; display: flex; flex-direction: column; } .step-number { font-size: 2.5rem; font-weight: 400; color: var(--ss-green); line-height: 1; margin-bottom: 1rem; } .step-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--ss-ink); } .step-desc { font-size: 0.9rem; line-height: 1.5; color: var(--ss-muted); margin-bottom: 0; } .editorial-split { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; } @media (min-width: 992px) { .editorial-split { grid-template-columns: 0.85fr 1.15fr; gap: 5rem; } .editorial-split-sticky { position: sticky; top: 6rem; } } .schedule-preview-list { display: flex; flex-direction: column; gap: 0.75rem; } .schedule-row { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.75rem; background-color: var(--ss-surface); border: var(--t-border-hairline); border-radius: 1.25rem; box-shadow: var(--t-shadow-ambient); transition: var(--t-transition-fluid); } .schedule-row:hover { transform: translateX(6px); border-color: rgba(40, 159, 161, 0.25); box-shadow: var(--t-shadow-soft); background-color: var(--ss-surface2); } .schedule-day { font-family: "Lexend", sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--ss-ink); } .schedule-time { font-size: 0.95rem; color: var(--ss-muted); font-weight: 500; text-align: right; } @media (max-width: 576px) { .schedule-row { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1rem 1.25rem; } .schedule-time { text-align: left; } } .recreation-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } .recreation-item { padding: 1.5rem; border-left: 3px solid var(--ss-green); background-color: rgba(17, 106, 66, 0.03); border-radius: 0 1.25rem 1.25rem 0; transition: var(--t-transition-fluid); } .recreation-item:nth-child(2) { border-left-color: var(--ss-teal); background-color: rgba(40, 159, 161, 0.03); } .recreation-item:nth-child(3) { border-left-color: var(--ss-brown); background-color: rgba(139, 82, 46, 0.03); } .recreation-item:hover { transform: translateX(4px); } .recreation-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 0.25rem; color: var(--ss-ink); } .recreation-desc { font-size: 0.9rem; line-height: 1.5; color: var(--ss-muted); margin-bottom: 0; } .road-bridge-box { padding: 2.25rem; border: var(--t-border-hairline); border-radius: 1.75rem; background-color: var(--ss-surface); box-shadow: var(--t-shadow-ambient); } .pricing-card-highlight { position: relative; z-index: 1; } .pricing-card-highlight::after { content: ""; position: absolute; inset: 0.65rem; border-radius: calc(2.25rem - 0.65rem); box-shadow: 0 0 0 2px var(--ss-green); pointer-events: none; z-index: 2; } .pricing-badge { position: absolute; top: 1.5rem; right: 1.5rem; background-color: var(--ss-green); color: var(--ss-surface); font-size: 0.7rem; font-weight: 700; padding: 0.35rem 0.75rem; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.1em; z-index: 3; } .pricing-track-title { font-family: "Lexend", sans-serif; font-weight: 800; font-size: 1.35rem; margin-bottom: 1rem; } .pricing-track-item { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 0; border-bottom: 1px dashed rgba(54, 43, 36, 0.1); } .pricing-track-item:last-child { border-bottom: none; } .pricing-track-label { font-weight: 600; color: var(--ss-muted); } .pricing-track-cost { font-family: "Lexend", sans-serif; font-weight: 800; color: var(--ss-ink); font-size: 1.25rem; } .pricing-card-highlight .pricing-track-cost { color: var(--ss-green); } .btn-link-pill { display: inline-flex; align-items: center; padding: 0.5rem 1.25rem; border: 1px solid var(--ss-border); border-radius: 9999px; font-size: 0.85rem; font-weight: 600; color: var(--ss-muted); text-decoration: none; transition: var(--t-transition-fluid); background-color: var(--ss-surface); } .btn-link-pill:hover { border-color: var(--ss-green); color: var(--ss-green); background-color: rgba(17, 106, 66, 0.03); transform: translateY(-1px); } .hero-trust-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 3.5rem; padding: 1.25rem 2rem; background-color: rgba(54, 43, 36, 0.03); border: var(--t-border-hairline); border-radius: 9999px; } @media (max-width: 991px) { .hero-trust-points { border-radius: 1.5rem; flex-direction: column; align-items: center; gap: 0.75rem; } } .hero-trust-point { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 700; color: var(--ss-muted); } .hero-trust-point i { color: var(--ss-green); font-size: 1rem; } .reveal-on-scroll { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { .reveal-on-scroll.is-revealed { opacity: 1; transform: translateY(0); } } .ss-time-badge { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.15rem; border-radius: 9999px; background-color: var(--ss-surface, #ffffff); border: 1px solid rgba(54, 43, 36, 0.12); color: var(--ss-ink, #362B24); font-size: 0.95rem; width: 100%; box-shadow: 0 2px 6px rgba(54, 43, 36, 0.04); } .ss-time-badge i { color: var(--ss-green, #116A42); font-size: 1.15rem; flex-shrink: 0; } .ss-time-badge strong { color: var(--ss-ink, #362B24); font-weight: 700; } body.page-tannersville { --ss-body-font: "Lexend", "Sora", ui-sans-serif, system-ui, sans-serif; --ss-display-font: "Instrument Serif", Georgia, serif; --ss-ease-premium: cubic-bezier(0.32, 0.72, 0, 1); --ss-shadow-soft: 0 16px 44px rgba(33, 29, 24, 0.09); --ss-shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.72); } body.page-tannersville :where(.hero-card, .trust-card, .local-card, .schedule-card, .proof-card, .cta-card, .faq-card) { border-color: var(--ss-border, rgba(33, 29, 24, 0.11)); border-radius: clamp(22px, 3vw, 34px); box-shadow: var(--ss-shadow-soft), var(--ss-shadow-inner); transition: transform 700ms var(--ss-ease-premium), box-shadow 700ms var(--ss-ease-premium), border-color 700ms var(--ss-ease-premium); } body.page-tannersville :where(.btn, .ss-btn, .hero-cta, .cta-button) { border-radius: 999px; min-height: 44px; transition: transform 650ms var(--ss-ease-premium), box-shadow 650ms var(--ss-ease-premium), background-color 650ms var(--ss-ease-premium), border-color 650ms var(--ss-ease-premium); }