/* ========================================================================= Heaven Peak — Nag Tibba Weekend Trek LP Four switchable palettes (data-theme on ), type system, components. ========================================================================= */ /* ---- Theme: Bold Alpine (default) — deep forest green + summit orange ---- */ :root, :root[data-theme="alpine"] { --bg: #FAF6EE; --surface: #FFFFFF; --surface-2: #F1EADB; --ink: #14342A; --ink-soft: #45564E; --muted: #6B7A72; --accent: #E85C2B; --accent-press: #CC4A1E; --accent-2: #1E5E45; --on-accent: #FFFFFF; --rule: #E4DBC9; --halo: rgba(232, 92, 43, 0.16); --hero-1: #16352A; --hero-2: #0C2018; } /* ---- Theme: Adventure Sunset — charcoal + terracotta/amber ---- */ :root[data-theme="sunset"] { --bg: #F7F1EA; --surface: #FFFFFF; --surface-2: #F0E6DA; --ink: #221C19; --ink-soft: #4A413B; --muted: #7A6E64; --accent: #C8682F; --accent-press: #A8531F; --accent-2: #9C6B33; --on-accent: #FFFFFF; --rule: #E6D9C8; --halo: rgba(200, 104, 47, 0.16); --hero-1: #3A2A20; --hero-2: #211712; } /* ---- Theme: Trust Mountain — deep navy + glacier teal ---- */ :root[data-theme="mountain"] { --bg: #F3F6F8; --surface: #FFFFFF; --surface-2: #E9EFF3; --ink: #0E2A47; --ink-soft: #3A4F66; --muted: #6A7A8C; --accent: #14A39B; --accent-press: #0F857E; --accent-2: #0E2A47; --on-accent: #FFFFFF; --rule: #D8E2EA; --halo: rgba(20, 163, 155, 0.16); --hero-1: #103456; --hero-2: #081B2E; } /* ---- Theme: High-contrast Conversion — near-black + electric saffron ---- */ :root[data-theme="conversion"] { --bg: #F6F5F2; --surface: #FFFFFF; --surface-2: #EFEDE7; --ink: #141414; --ink-soft: #3A3A38; --muted: #6E6E68; --accent: #F5A300; --accent-press: #D88E00; --accent-2: #141414; --on-accent: #1A1405; --rule: #E2DFD7; --halo: rgba(245, 163, 0, 0.22); --hero-1: #20201E; --hero-2: #0B0B0A; } /* ----------------------------- Reset ----------------------------------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } img { display: block; max-width: 100%; } body { background: var(--bg); color: var(--ink); font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: color 0.25s ease; } h1, h2, h3, h4 { font-family: "Archivo", system-ui, sans-serif; line-height: 1.02; letter-spacing: -0.02em; font-weight: 800; color: var(--ink); text-wrap: balance; } p { text-wrap: pretty; } a { color: inherit; text-decoration: none; } /* --------------------------- Layout helpers ---------------------------- */ .wrap { width: min(1180px, 92vw); margin-inline: auto; } .section { padding: clamp(56px, 8vw, 110px) 0; } .eyebrow { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 9px; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); display: inline-block; } .accent-word { color: var(--accent); } .lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--ink-soft); } /* ------------------------------ Buttons -------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: "Archivo", sans-serif; font-weight: 700; font-size: 1rem; line-height: 1; padding: 17px 26px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.2s ease; white-space: nowrap; } .btn svg { width: 19px; height: 19px; } .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 14px 30px var(--halo); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 40px var(--halo); } .btn-primary:active { background: var(--accent-press); transform: translateY(0); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); } .btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); } .btn-wa { background: #1FAE54; color: #fff; box-shadow: 0 14px 30px rgba(31,174,84,0.22); } .btn-wa:hover { transform: translateY(-2px); } .btn-lg { padding: 20px 34px; font-size: 1.08rem; } .btn-light { background: #fff; color: #16352A; } .btn-light:hover { transform: translateY(-2px); } /* ------------------------------- Nav ----------------------------------- */ header.nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 74px; } .brand { display: flex; align-items: center; gap: 11px; } .brand-mark { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(150deg, var(--accent), var(--accent-2)); display: grid; place-items: center; flex: none; box-shadow: 0 6px 16px var(--halo); } .brand-mark svg { width: 22px; height: 22px; } .brand-name { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.18rem; letter-spacing: -0.02em; } .brand-name span { color: var(--accent); } .brand-sub { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .nav-links { display: flex; align-items: center; gap: 26px; } .nav-links a.navlink { font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); transition: color 0.15s; } .nav-links a.navlink:hover { color: var(--accent); } .nav-cta { display: flex; align-items: center; gap: 12px; } .nav-phone { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.02rem; color: var(--ink); white-space: nowrap; text-align: right; } .nav-phone small { display: block; font-family: "Hanken Grotesk"; font-weight: 600; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } @media (max-width: 1150px) { .nav-phone { display: none; } } @media (max-width: 1040px) { .nav-links { gap: 18px; } } @media (max-width: 900px) { .nav-links { display: none; } } /* ------------------------------ Hero (full-bleed photo) ---------------- */ .hero { position: relative; overflow: hidden; min-height: clamp(580px, 90vh, 880px); display: flex; align-items: flex-end; color: #fff; } .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; z-index: 0; } .hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(8,18,14,0.86) 0%, rgba(8,18,14,0.42) 40%, rgba(8,18,14,0.18) 70%, rgba(8,18,14,0.32) 100%), linear-gradient(to right, rgba(8,18,14,0.55), transparent 60%); } .hero-inner { position: relative; z-index: 2; margin: 0 auto; padding: clamp(40px, 7vh, 90px) 0 clamp(34px, 5vh, 64px); width: min(1180px, 92vw); } .hero-copy { max-width: 760px; } .hero-badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 8px 16px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: #fff; margin-bottom: 22px; } .hero-badge b { color: #fff; } .hero h1 { font-size: clamp(2.5rem, 6.4vw, 4.8rem); color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,0.35); } .hero h1 .thin { display: block; font-weight: 600; color: rgba(255,255,255,0.9); font-size: 0.42em; letter-spacing: 0; margin-top: 16px; text-shadow: none; } .hero p.lead { margin-top: 22px; max-width: 46ch; color: rgba(255,255,255,0.92); font-size: clamp(1.05rem, 1.6vw, 1.28rem); } .hero-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; align-items: center; } .hero-price-pill { display: inline-flex; align-items: baseline; gap: 8px; background: rgba(255,255,255,0.96); color: var(--ink); border-radius: 999px; padding: 13px 22px; font-family: "Archivo", sans-serif; box-shadow: 0 14px 34px rgba(0,0,0,0.28); } .hero-price-pill b { font-size: 1.5rem; font-weight: 800; line-height: 1; } .hero-price-pill s { color: var(--muted); font-size: 0.92rem; font-weight: 600; } .hero-price-pill span { font-size: 0.78rem; color: var(--accent-2); font-weight: 700; letter-spacing: 0.02em; } .hero-meta { display: flex; gap: 30px; margin-top: 34px; flex-wrap: wrap; } .hero-meta .hm { display: flex; flex-direction: column; } .hero-meta .hm b { font-family: "Archivo", sans-serif; font-size: 1.5rem; font-weight: 800; color: #fff; } .hero-meta .hm span { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.75); font-weight: 600; } body.hp-noprice .hero-price-pill { display: none; } @media (max-width: 600px) { .hero h1 { font-size: clamp(2.1rem, 9vw, 3rem); } .hero-meta { gap: 22px; } } /* ----------------------------- Vista band ------------------------------ */ .vista { position: relative; min-height: clamp(320px, 48vh, 460px); display: flex; align-items: center; color: #fff; overflow: hidden; } .vista img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .vista .vscrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(8,18,14,0.78), rgba(8,18,14,0.32) 70%, transparent); } .vista .wrap { position: relative; z-index: 2; } .vista .veyebrow { color: #fff; } .vista .veyebrow::before { background: #fff; } .vista h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.8rem); max-width: 20ch; margin-top: 14px; text-shadow: 0 2px 24px rgba(0,0,0,0.4); } .vista p { color: rgba(255,255,255,0.9); max-width: 46ch; margin-top: 14px; font-size: 1.08rem; } /* Overview lead image */ .ov-img { width: 100%; border-radius: 16px; aspect-ratio: 16/9; object-fit: cover; margin-bottom: 26px; border: 1px solid var(--rule); } /* ----------------------------- Trust bar ------------------------------- */ .trust { background: var(--ink); color: #fff; } .trust-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding: 22px 0; } .trust-item { display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: 0.95rem; color: rgba(255,255,255,0.92); } .trust-item svg { width: 22px; height: 22px; flex: none; color: var(--accent); } .trust .accent-c { color: var(--accent); } /* --------------------------- Quick info grid --------------------------- */ .qi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .qi { background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; padding: 24px 22px; transition: transform 0.15s, box-shadow 0.2s; } .qi:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,0.06); } .qi .qi-ico { width: 34px; height: 34px; color: var(--accent); margin-bottom: 14px; } .qi .qi-k { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .qi .qi-v { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.22rem; margin-top: 5px; } @media (max-width: 860px) { .qi-grid { grid-template-columns: repeat(2, 1fr); } } /* ------------------------------ Why ------------------------------------ */ .why-head { max-width: 720px; margin-bottom: 48px; } .why-head h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-top: 16px; } .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .why-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; padding: 30px 28px; } .why-card .wc-num { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 0.9rem; color: var(--accent); letter-spacing: 0.1em; } .why-card h3 { font-size: 1.32rem; margin: 14px 0 10px; } .why-card p { color: var(--ink-soft); font-size: 1rem; } @media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; } } /* ---------------------------- Overview --------------------------------- */ .ov-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(30px, 5vw, 70px); align-items: start; } .ov-body h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 16px 0 22px; } .ov-body h3 { font-size: 1.3rem; margin: 30px 0 10px; color: var(--ink); } .ov-body p { color: var(--ink-soft); margin-bottom: 16px; } .ov-body ul { list-style: none; margin: 8px 0 18px; } .ov-body ul li { position: relative; padding-left: 30px; margin-bottom: 12px; color: var(--ink-soft); } .ov-body ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--halo); } .ov-aside { position: sticky; top: 96px; background: var(--surface-2); border: 1px solid var(--rule); border-radius: 18px; padding: 28px 26px; } .ov-aside h4 { font-size: 1.05rem; letter-spacing: -0.01em; } .ov-aside .oa-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--rule); font-size: 0.95rem; } .ov-aside .oa-row:last-of-type { border-bottom: 0; } .ov-aside .oa-row span { color: var(--muted); } .ov-aside .oa-row b { font-weight: 700; text-align: right; } .ov-aside .btn { width: 100%; justify-content: center; margin-top: 18px; } @media (max-width: 880px) { .ov-grid { grid-template-columns: 1fr; } .ov-aside { position: static; } } /* ---------------------------- Itinerary -------------------------------- */ .iti { display: grid; gap: 14px; } .day { border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; background: var(--surface); } .day-head { width: 100%; text-align: left; cursor: pointer; background: none; border: 0; display: flex; align-items: center; gap: 20px; padding: 24px 26px; font-family: inherit; } .day-tag { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: 7px 13px; border-radius: 999px; flex: none; } .day-head h3 { font-size: 1.2rem; flex: 1; } .day-head .chev { width: 22px; height: 22px; color: var(--muted); transition: transform 0.25s; flex: none; } .day.open .day-head .chev { transform: rotate(180deg); color: var(--accent); } .day-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .day.open .day-body { max-height: 600px; } .day-body-inner { padding: 0 26px 26px 26px; color: var(--ink-soft); } .day-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .day-stats span { background: var(--surface-2); border: 1px solid var(--rule); border-radius: 8px; padding: 6px 12px; font-size: 0.82rem; font-weight: 600; color: var(--ink); } /* ---------------------------- Included --------------------------------- */ .inc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .inc-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; padding: 32px 30px; } .inc-card.exc { background: var(--surface-2); } .inc-card h3 { display: flex; align-items: center; gap: 11px; font-size: 1.3rem; margin-bottom: 18px; } .inc-card h3 svg { width: 26px; height: 26px; } .inc-card.inc h3 svg { color: var(--accent-2); } .inc-card.exc h3 svg { color: var(--muted); } .inc-list { list-style: none; } .inc-list li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule); color: var(--ink-soft); font-size: 1rem; } .inc-list li:last-child { border-bottom: 0; } .inc-list li svg { width: 19px; height: 19px; flex: none; margin-top: 3px; } .inc-list.yes li svg { color: var(--accent-2); } .inc-list.no li svg { color: var(--muted); } @media (max-width: 760px) { .inc-grid { grid-template-columns: 1fr; } } /* ---------------------------- Gallery ---------------------------------- */ .gal-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; gap: 14px; } .gal-grid .ph { width: 100%; height: 100%; } .gal-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block; border: 1px solid var(--rule); } .gal-grid .g-tall { grid-row: span 2; } .gal-grid .g-wide { grid-column: span 2; } @media (max-width: 760px) { .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; } .gal-grid .g-wide { grid-column: span 2; } } /* ---------------------------- Reviews ---------------------------------- */ .rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .rev { background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; padding: 28px 26px; display: flex; flex-direction: column; } .rev .stars { color: var(--accent); letter-spacing: 2px; font-size: 1rem; margin-bottom: 12px; } .rev p { color: var(--ink); font-size: 1rem; flex: 1; } .rev .who { display: flex; align-items: center; gap: 12px; margin-top: 18px; } .rev .who .av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(150deg, var(--accent-2), var(--accent)); flex: none; display: grid; place-items: center; color: #fff; font-family: "Archivo"; font-weight: 800; font-size: 0.95rem; } .rev .who b { font-size: 0.95rem; } .rev .who span { display: block; font-size: 0.78rem; color: var(--muted); } @media (max-width: 860px) { .rev-grid { grid-template-columns: 1fr; } } /* ------------------------------ FAQ ------------------------------------ */ .faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(30px, 5vw, 60px); align-items: start; } .faq { display: grid; gap: 12px; } .qa { border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); overflow: hidden; } .qa-q { width: 100%; text-align: left; cursor: pointer; background: none; border: 0; font-family: "Archivo", sans-serif; font-weight: 700; font-size: 1.04rem; color: var(--ink); display: flex; justify-content: space-between; gap: 16px; padding: 20px 22px; } .qa-q .pm { width: 22px; height: 22px; flex: none; color: var(--accent); transition: transform 0.25s; } .qa.open .qa-q .pm { transform: rotate(45deg); } .qa-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .qa.open .qa-a { max-height: 400px; } .qa-a p { padding: 0 22px 22px; color: var(--ink-soft); } @media (max-width: 820px) { .faq-grid { grid-template-columns: 1fr; } } /* ------------------------- Final CTA ----------------------------------- */ .cta-band { position: relative; color: #fff; border-radius: 26px; padding: clamp(40px, 6vw, 78px); text-align: center; overflow: hidden; } .cta-band .cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .cta-band .cta-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(150deg, rgba(8,18,14,0.82), rgba(8,18,14,0.62)); } .cta-band > * { position: relative; z-index: 2; } .cta-band h2 { color: #fff; font-size: clamp(2rem, 4.5vw, 3.2rem); text-shadow: 0 2px 24px rgba(0,0,0,0.4); } .cta-band p { color: rgba(255,255,255,0.9); max-width: 50ch; margin: 18px auto 0; font-size: 1.1rem; } .cta-band .hero-cta { justify-content: center; margin-top: 32px; } /* ------------------------------ Footer --------------------------------- */ footer.ftr { background: var(--ink); color: rgba(255,255,255,0.8); margin-top: 0; } .ftr-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; padding: 64px 0 40px; } .ftr .brand-name { color: #fff; } .ftr-col h5 { font-family: "Archivo", sans-serif; color: #fff; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 16px; } .ftr-col a, .ftr-col p { display: block; color: rgba(255,255,255,0.72); font-size: 0.94rem; margin-bottom: 10px; transition: color 0.15s; } .ftr-col a:hover { color: var(--accent); } .ftr-blurb { color: rgba(255,255,255,0.66); font-size: 0.94rem; margin: 16px 0; max-width: 32ch; } .ftr-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: 22px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.84rem; color: rgba(255,255,255,0.55); } @media (max-width: 860px) { .ftr-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .ftr-inner { grid-template-columns: 1fr; } } /* --------------------------- Sticky call bar --------------------------- */ .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--surface); border-top: 1px solid var(--rule); box-shadow: 0 -8px 30px rgba(0,0,0,0.12); display: none; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap: 10px; } .callbar .cb-info { flex: 1; display: flex; flex-direction: column; justify-content: center; } .callbar .cb-info b { font-family: "Archivo"; font-weight: 800; font-size: 1.05rem; line-height: 1; } .callbar .cb-info span { font-size: 0.72rem; color: var(--muted); font-weight: 600; } .callbar .btn { padding: 14px 20px; font-size: 0.95rem; } @media (max-width: 900px) { .callbar { display: flex; } body { padding-bottom: 78px; } } /* ------------------------------- Misc ---------------------------------- */ /* Tweak-driven visibility */ body.hp-noprice .price-badge { display: none; } body.hp-nowa .wa-btn { display: none; } .section.tint { background: var(--surface-2); } .sec-head { max-width: 680px; margin-bottom: 44px; } .sec-head h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-top: 16px; } .sec-head p { margin-top: 14px; } .center { text-align: center; margin-inline: auto; } .divider-note { font-size: 0.8rem; color: var(--muted); margin-top: 14px; font-style: italic; }