/* ══════════════════════════════════════════════════════════ L & K · Mammoth Wedding Week White ground · deep green · watercolor scenes "you climb the page" ══════════════════════════════════════════════════════════ */ :root { --paper: #ffffff; --paper-deep: #f6f8f5; --ink: #1e2b21; /* deep forest green */ --ink-soft: #4d5f50; --sage: #93a690; --pine: #2c4433; --lake: #33708e; --alpine: #8fbdd4; --deep-blue: #2f5f86; --silver: #9aa6ac; --sand: #7d9a8b; /* soft sage accent (formerly warm sand) */ --rust: #3a6f57; /* green accent (formerly orange/rust) */ --link: #2b6d8c; /* one accent for every hyperlink */ --link-strong:#1c536d; --line: #e4e9e3; /* hairline borders on white */ --sky: #ffffff; /* animated by JS per act */ --serif: "Ovo", Georgia, serif; --sans: "Mulish", -apple-system, "Helvetica Neue", sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--sans); color: var(--ink); background: var(--paper); /* `clip`, not `hidden`: `hidden` would make its own scroll container, which silently breaks every #anchor jump on the page. */ overflow-x: clip; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* anchored sections shouldn't land flush against the top edge */ [id^="day"], #trails, #week { scroll-margin-top: 18px; } /* ── atmosphere: sky wash + a whisper of paper grain ────── */ .sky-wash { position: fixed; inset: 0; z-index: -2; background: var(--sky); opacity: .55; transition: background-color .15s linear; pointer-events: none; } .paper-grain { position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: .3; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.6 0 0 0 0 0.55 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E"); } ::selection { background: rgba(44,68,51,.18); } /* ── elevation badge ────────────────────────────────────── */ .elev-badge { position: fixed; right: 16px; bottom: 18px; z-index: 60; display: flex; align-items: center; gap: 9px; padding: 9px 14px 9px 10px; background: rgba(255,255,255,.9); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 4px 18px -6px rgba(30,43,33,.18); opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; } .elev-badge.on { opacity: 1; transform: none; } .elev-ticks { width: 14px; height: 36px; overflow: visible; } .elev-ticks .tick { stroke: var(--sage); stroke-width: 1.4; stroke-linecap: round; opacity: .7; } #elevDot { fill: var(--pine); transition: cy .2s linear; } .elev-text { display: flex; flex-direction: column; line-height: 1.15; } .elev-label { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); } .elev-num { font-family: var(--serif); font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--pine); } /* ── the stream (desktop margin thread) ─────────────────── */ .stream { position: fixed; left: 8px; top: 0; height: 100vh; width: 44px; z-index: 5; pointer-events: none; display: none; } @media (min-width: 1100px) { .stream { display: block; } } #streamPath { fill: none; stroke: var(--lake); stroke-width: 5; stroke-linecap: round; opacity: .22; stroke-dasharray: 8000; stroke-dashoffset: 8000; } /* ══════════ HERO ══════════ */ .hero { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; padding: 10vh 24px; overflow: hidden; /* continue the painting's pale sky upward so its top edge has no hard line */ background: linear-gradient(180deg, #ffffff 0%, #edf3f7 55%, #ffffff 96%); } /* soft watercolor wash — painted light, no line work. Fades out toward the bottom so the hero dissolves into the white intro with no seam. */ .hero-wash { position: absolute; inset: -10%; pointer-events: none; background: radial-gradient(52% 42% at 80% 56%, rgba(47,95,134,.42), transparent 70%), radial-gradient(42% 34% at 16% 50%, rgba(154,166,172,.34), transparent 70%), radial-gradient(34% 26% at 62% 14%, rgba(60,110,150,.22), transparent 70%), radial-gradient(56% 44% at 44% 66%, rgba(30,60,92,.20), transparent 72%); filter: blur(30px); -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 92%); mask-image: linear-gradient(180deg, #000 58%, transparent 92%); } /* watercolor Minarets — sits low & misty at rest, blooms up on scroll */ .hero-scene { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 0; pointer-events: none; /* feather top + bottom so the painting dissolves into the paper */ -webkit-mask-image: linear-gradient(transparent 0, #000 52%, #000 78%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 52%, #000 78%, transparent 100%); } .hr-photo { position: absolute; inset: 0; transform-origin: center 72%; transform: translateY(calc((1 - var(--hp, 0)) * 46px)) scale(calc(1.02 + (1 - var(--hp, 0)) * .05)); opacity: calc(.5 + var(--hp, 0) * .5); filter: saturate(calc(.6 + var(--hp, 0) * .4)) blur(calc((1 - var(--hp, 0)) * 1.3px)); will-change: transform, opacity, filter; } .hr-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 56%; } .hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; /* sit ~20% above true center so the painting gets more room below */ margin-top: -20vh; transform: translateY(calc(var(--hp, 0) * -34px)); opacity: calc(1 - var(--hp, 0) * .6); } .kicker { font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; position: relative; } .monogram { font-family: var(--serif); font-size: clamp(96px, 22vw, 220px); font-weight: 400; font-style: normal; line-height: .9; margin: 3vh 0 2vh; letter-spacing: .01em; position: relative; perspective: 900px; } /* letters dissolve in out of a soft 3D depth, staggered */ .mono-l, .mono-amp, .mono-k { display: inline-block; opacity: 0; filter: blur(18px); transform: translateZ(-150px) translateY(16px) rotateX(26deg) scale(1.07); animation: monoIn 1.6s cubic-bezier(.2,.7,.25,1) forwards; will-change: transform, filter, opacity; } .mono-l { color: var(--deep-blue); animation-delay: .25s; } .mono-k { color: var(--deep-blue); animation-delay: .67s; } .mono-amp { font-size: .82em; padding: 0 .18em; background: linear-gradient(160deg, #c3ccd1, #87949b 40%, #b6bfc4 70%, #7f8b93); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--silver); animation-delay: .46s; } @keyframes monoIn { to { opacity: 1; filter: blur(0); transform: none; } } /* the supporting lines settle in around the letters */ .hero-copy > .kicker, .hero-copy > .hero-sub, .hero-copy > .hero-meta { opacity: 0; animation: heroFade 1.1s ease forwards; } .hero-copy > .kicker { animation-delay: .1s; } .hero-copy > .hero-sub { animation-delay: 1s; } .hero-copy > .hero-meta { animation-delay: 1.2s; } @keyframes heroFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .hero-sub { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(19px, 3.4vw, 28px); color: var(--pine); position: relative; } .hero-meta { margin-top: 2.5vh; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-soft); position: relative; } .hero-meta .dot { color: var(--rust); margin: 0 .6em; } .scroll-cue { position: absolute; bottom: 6vh; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; animation: cue-bob 2.6s ease-in-out infinite; } .scroll-cue svg { width: 16px; height: 16px; } .scroll-cue path { fill: none; stroke: var(--pine); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @keyframes cue-bob { 50% { transform: translate(-50%, 6px); } } @media (max-height: 640px) { .scroll-cue { display: none; } } /* ══════════ INTRO ══════════ */ .intro { max-width: 760px; margin: 0 auto; padding: 12vh 24px; text-align: center; } .lede { font-family: var(--serif); font-weight: 350; font-size: clamp(21px, 3.2vw, 30px); line-height: 1.55; color: var(--ink); } .lede em { color: var(--lake); font-style: italic; } .basecamps { margin-top: 7vh; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .camp-card { display: block; text-decoration: none; padding: 24px 26px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px -14px rgba(30,43,33,.14); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .camp-card:hover { transform: translateY(-3px); border-color: var(--sage); box-shadow: 0 16px 36px -14px rgba(30,43,33,.2); } .camp-kicker { display: block; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; font-weight: 700; color: var(--pine); margin-bottom: 6px; } .camp-addr { font-family: var(--serif); font-size: 17px; color: var(--ink); } /* ══════════ DAY ACTS ══════════ */ .day-plain { max-width: 640px; margin: 0 auto; padding: 14vh 24px; position: relative; } /* quiet painted wash so the bookend days feel atmospheric, not bare */ .day-plain::before { content: ""; position: absolute; inset: 6vh 0; pointer-events: none; z-index: -1; background: radial-gradient(60% 40% at 12% 20%, rgba(143,189,212,.14), transparent 70%), radial-gradient(50% 36% at 92% 70%, rgba(147,166,144,.14), transparent 70%); filter: blur(24px); } .day-scene { position: relative; padding: 0 0 14vh; } /* the painting plane */ .scene { position: relative; height: min(86svh, 130vw); overflow: hidden; margin: 0 0 -14vh; /* card overlaps painting bottom */ /* feathered edges top AND bottom: the painting bleeds into the page like wet pigment, no hard seam where it meets the color */ -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 82%, transparent 99%); mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 82%, transparent 99%); } .scene-img { position: absolute; inset: -12% 0; /* headroom for parallax travel */ will-change: transform; } .scene-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; } .scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px 30px rgba(255,255,255,.9); mix-blend-mode: lighten; } /* ── watercolor bloom reveal ── A page-colored veil sits over each painting; its mask has a feathered irregular hole. Scaling the veil up grows the hole like wet pigment spreading. transform+opacity only — the mask rasterizes once, the animation runs on the compositor. */ .bloom-veil { position: absolute; inset: -60%; background: var(--paper); pointer-events: none; z-index: 3; -webkit-mask-image: radial-gradient(42% 34% at 47% 44%, transparent 0 34%, rgba(0,0,0,.55) 52%, #000 68%); mask-image: radial-gradient(42% 34% at 47% 44%, transparent 0 34%, rgba(0,0,0,.55) 52%, #000 68%); transform: scale(1); transform-origin: 47% 44%; transition: transform 2.4s cubic-bezier(.3,.5,.35,1), opacity 1.2s ease 1.5s; will-change: transform, opacity; } .bloom.in ~ .bloom-veil, .bloom.in .bloom-veil { transform: scale(4.5); opacity: 0; } /* the day card — clean white sheet floating over the scene */ .day-card { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; padding: clamp(28px, 5vw, 52px) clamp(22px, 5vw, 56px); background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px -22px rgba(30,43,33,.35); width: calc(100% - 32px); } /* day header */ .day-date { font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; color: var(--lake); } .main-event { display: inline-block; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; font-weight: 700; color: #fff; background: var(--pine); padding: 6px 16px 5px; margin-bottom: 14px; border-radius: 999px; } .day-title { font-family: var(--serif); font-weight: 550; font-size: clamp(30px, 5.4vw, 46px); line-height: 1.12; margin: 8px 0 4px; letter-spacing: -.01em; } .climax .day-title { font-size: clamp(38px, 7vw, 60px); font-style: italic; } /* modern accent rule — a short clean bar, no squiggle */ .rule-line { width: 44px; height: 3px; margin: 14px 0 10px; background: var(--pine); border-radius: 2px; transform-origin: left center; transform: scaleX(0); transition: transform .9s cubic-bezier(.22,.61,.36,1) .15s; } .in .rule-line, .rule-line.in { transform: scaleX(1); } .rule-line-wide { width: 72px; background: var(--rust); } .day-note { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink-soft); } /* timeline */ .timeline { list-style: none; margin-top: 4vh; } .timeline li { position: relative; padding: 18px 0 18px 110px; border-top: 1px solid var(--line); } .timeline li:first-child { border-top: none; } .tl-when { position: absolute; left: 0; top: 21px; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--lake); width: 92px; } .timeline h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(17px, 2.6vw, 21px); line-height: 1.3; margin-bottom: 4px; } .timeline p { font-size: 15.5px; color: var(--ink-soft); max-width: 52ch; } .aside { display: inline-block; margin-top: 2px; font-style: italic; color: var(--sand); } .timeline p a, .timeline h3 a { color: var(--link); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(43,109,140,.38); transition: color .25s, border-color .25s; } .timeline p a:hover:not(.trail-btn), .timeline h3 a:hover:not(.trail-btn) { color: var(--link-strong); border-color: var(--link-strong); } /* clearly-called-out activity options within a day. Scoped under .timeline so these win over the general `.timeline li` row styling (which otherwise adds dividers + tall padding here). */ .timeline .opts { list-style: none; margin-top: 12px; display: grid; gap: 14px; max-width: 52ch; } .timeline .opts > li { position: relative; border-top: none; padding: 0 0 0 22px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); } .timeline .opts > li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 50% 40% 55% 45%; background: var(--sage); } .opts a { color: var(--link); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(43,109,140,.38); transition: color .25s, border-color .25s; } /* unlinked option leads share the linked-title weight, in ink */ .opts strong { font-weight: 600; color: var(--ink); } .opts a:hover:not(.trail-btn) { color: var(--link-strong); border-color: var(--link-strong); } .opt-note { font-style: italic; color: var(--sand); } .tl-star .tl-when { color: var(--rust); } .tl-star h3 { color: var(--pine); } .tl-star::before { content: "✦"; position: absolute; left: -18px; top: 20px; color: var(--rust); font-size: 12px; } /* climax extra drama */ .climax .scene { height: min(96svh, 150vw); } .climax .day-card { border: 1px solid rgba(176,92,56,.45); box-shadow: 0 28px 70px -22px rgba(30,43,33,.45); } @media (max-width: 560px) { .timeline li { padding: 16px 0 16px 0; } .tl-when { position: static; display: block; width: auto; margin-bottom: 4px; } .tl-star::before { display: none; } } /* ══════════ REVEALS (non-painting) ══════════ */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1); } .reveal.in { opacity: 1; transform: none; } .timeline li.reveal { transition-delay: calc(var(--i, 0) * 90ms); } /* ══════════ UTILITY SECTIONS (calm) ══════════ */ .util, .map-act { max-width: 1080px; margin: 0 auto; padding: 12vh 24px; } .util-head { max-width: 640px; margin-bottom: 6vh; } .util-title { font-family: var(--serif); font-weight: 550; font-size: clamp(32px, 5vw, 44px); margin: 6px 0 2px; } .util-lede { font-size: 16.5px; color: var(--ink-soft); margin-top: 12px; max-width: 56ch; } .util-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .util-col { padding: 26px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 26px -16px rgba(30,43,33,.12); } .util-col h3 { font-family: var(--serif); font-weight: 600; font-size: 20px; margin-bottom: 12px; } .col-kicker { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; font-weight: 700; color: var(--lake); margin-bottom: 2px; } .util-col ul { list-style: none; } .util-col li { font-size: 14.5px; color: var(--ink-soft); padding: 7px 0 7px 18px; position: relative; border-top: 1px solid var(--line); } .util-col li:first-child { border-top: none; } .util-col li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 6px; height: 6px; border-radius: 50% 40% 55% 45%; background: var(--sage); } .util-col.attire { border-color: rgba(176,92,56,.35); } .util-col.attire li::before { background: var(--rust); } .favs a { color: var(--link); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(43,109,140,.38); transition: color .25s, border-color .25s; } .favs a:hover { color: var(--link-strong); border-color: var(--link-strong); } .util-tip { margin-top: 5vh; font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink-soft); max-width: 62ch; padding-left: 18px; border-left: 3px solid var(--sage); } /* ══════════ TRAILS & HIKES ══════════ */ /* jump button used throughout the itinerary */ .trail-btn { display: inline-flex; align-items: center; gap: 6px; vertical-align: baseline; margin: 0 0 0 4px; font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--link); text-decoration: none; padding: 4px 11px; border: 1px solid rgba(43,109,140,.35); border-radius: 999px; background: rgba(43,109,140,.06); transition: background .25s, border-color .25s, color .25s; } .trail-btn::after { content: "\2197"; font-size: 12px; line-height: 1; } /* teaser cards linking to the sub-page field guides */ .tease-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 1060px; } .tease-card { display: block; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px -18px rgba(30,43,33,.28); transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s; } .tease-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -20px rgba(30,43,33,.38); } .tease-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22,.61,.36,1); } .tease-card:hover img { transform: scale(1.045); } .tease-body { display: block; padding: 16px 19px 19px; } .tease-title { display: block; font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--ink); } .tease-sub { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); } .tease-cta { display: inline-block; margin-top: 12px; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--link); } .tease-cta::after { content: " \2197"; } .trail-btn:hover { background: var(--link); border-color: var(--link); color: #fff; } .opts .trail-btn { margin: 0 0 0 4px; } /* filter chips */ .hike-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 4vh; } .hf-chip { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); cursor: pointer; padding: 9px 16px; background: transparent; border: 1px solid var(--line); border-radius: 999px; transition: background .22s, color .22s, border-color .22s; } .hf-chip:hover { border-color: var(--sage); color: var(--ink); } .hf-chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; } .hf-count { opacity: .5; margin-left: 5px; font-size: 11px; } .hf-chip.is-on .hf-count { opacity: .65; } /* the card grid */ .hike-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); max-width: 1120px; } .hike-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px -18px rgba(30,43,33,.28); transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s, opacity .3s; } .hike-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(30,43,33,.36); } .hike-card.is-hidden { display: none; } /* square, clickable photo tile */ .hike-photo { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: none; cursor: zoom-in; background: var(--paper-deep); overflow: hidden; } .hike-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s cubic-bezier(.22,.61,.36,1); } .hike-photo:hover img { transform: scale(1.05); } .hike-photo img { object-position: center top; } /* difficulty badge — a colour per level */ .hike-badge { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--sans); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; backdrop-filter: blur(6px); } .hike-badge.easy { background: rgba(232,244,236,.94); color: #2c5a44; } .hike-badge.moderate { background: rgba(228,240,247,.94); color: #235c78; } .hike-badge.hard { background: rgba(245,232,225,.94); color: #8a4a2f; } .hike-body { padding: 17px 19px 20px; display: flex; flex-direction: column; flex: 1; } .hike-name { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.2; color: var(--ink); } .hike-fave { display: inline-block; vertical-align: middle; margin-left: 7px; font-family: var(--sans); font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8a4a2f; background: rgba(245,232,225,.9); padding: 4px 9px; border-radius: 999px; } /* stats — little cards inside the card */ .hike-stats { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 13px 0 0; } .hike-stats li { background: var(--paper-deep); border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px; text-align: center; } .hs-k { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); } .hs-v { display: block; margin-top: 2px; font-family: var(--serif); font-size: 14.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .hike-meta { margin-top: 9px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sage); } .hike-desc { margin-top: 11px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); } .hike-note { font-style: italic; color: var(--sage); } .hike-link { align-self: flex-start; margin-top: 15px; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--link); text-decoration: none; padding: 8px 14px; border: 1px solid rgba(43,109,140,.35); border-radius: 999px; transition: background .25s, border-color .25s, color .25s; } .hike-link::after { content: " \2197"; } .hike-link:hover { background: var(--link); border-color: var(--link); color: #fff; } .hike-caveat { margin-top: 4vh; font-size: 13px; font-style: italic; color: var(--sage); } /* ══════════ ROAD TRIP ══════════ */ .route-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); max-width: 900px; } .route-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px 24px; box-shadow: 0 10px 30px -18px rgba(30,43,33,.28); } .route-head { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; } .route-tag { font-family: var(--sans); font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: var(--ink); padding: 5px 10px; border-radius: 999px; } .route-time { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sage); } .route-name { font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1.2; } .route-desc { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); } .route-stops { list-style: none; counter-reset: stop; margin: 16px 0 0; } .route-stops > li { position: relative; counter-increment: stop; padding: 9px 0 9px 34px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; } .route-stops > li::before { content: counter(stop); position: absolute; left: 0; top: 9px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-family: var(--sans); font-size: 10.5px; font-weight: 700; color: var(--ink-soft); background: var(--paper-deep); border: 1px solid var(--line); } .route-stops > li.rs-end::before { content: "\2691"; color: #fff; background: var(--pine); border-color: var(--pine); } .route-stops > li.route-tbd { padding-left: 0; color: var(--sage); font-style: italic; } .route-stops > li.route-tbd::before { display: none; } .rs-name { display: block; font-weight: 600; color: var(--ink); } .rs-note { display: block; font-size: 12.5px; color: var(--ink-soft); } .route-link { display: inline-block; margin-top: 17px; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--link); text-decoration: none; padding: 9px 15px; border: 1px solid rgba(43,109,140,.35); border-radius: 999px; transition: background .25s, border-color .25s, color .25s; } .route-link::after { content: " \2197"; } .route-link:hover { background: var(--link); border-color: var(--link); color: #fff; } .route-link[data-needs-link] { color: var(--sage); border-color: var(--line); pointer-events: none; opacity: .6; } /* ── lightbox ── */ .lightbox[hidden] { display: none; } .lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; background: rgba(18,26,20,.9); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s ease; } .lightbox.on { opacity: 1; } .lb-figure { max-width: 1100px; max-height: 90vh; text-align: center; } .lb-figure img { max-width: 100%; max-height: 78vh; border-radius: 12px; display: block; margin: 0 auto; box-shadow: 0 30px 70px -30px rgba(0,0,0,.7); } .lb-figure figcaption { margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: 16px; color: rgba(255,255,255,.85); } .lb-close { position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); transition: background .2s; } .lb-close:hover { background: rgba(255,255,255,.26); } @media (max-width: 620px) { .hike-grid { grid-template-columns: 1fr; gap: 20px; } .hike-filters { gap: 7px; } .hf-chip { padding: 8px 13px; font-size: 11px; } } /* ══════════ MAP ══════════ */ .map-tour { position: relative; } .map-sticky { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; z-index: 2; } .map-frame { position: relative; width: 100%; height: min(78svh, 640px); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #d7e2ea; box-shadow: 0 24px 60px -24px rgba(30,43,33,.3); touch-action: pan-y; } .map-frame.free { cursor: grab; touch-action: none; } .map-frame.free:active { cursor: grabbing; } .pano-canvas { position: absolute; top: 0; left: 0; width: 100%; transform-origin: 0 0; will-change: transform; transition: transform 1.9s cubic-bezier(.66,0,.32,1); } .pano-canvas img { display: block; width: 100%; height: auto; } .map-explore { position: absolute; top: 14px; right: 14px; z-index: 5; font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: background .3s, border-color .3s; } .map-explore:hover { border-color: var(--sage); } .map-explore.active { background: var(--pine); color: #fff; border-color: var(--pine); } .map-card { position: absolute; left: 16px; bottom: 16px; z-index: 5; max-width: 340px; width: calc(100% - 32px); background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 12px 32px -14px rgba(30,43,33,.35); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); } .map-card.hidden { opacity: 0; transform: translateY(14px); pointer-events: none; } .map-card-photo { margin: 0; } .map-card-photo img { display: block; width: 100%; height: 118px; object-fit: cover; } .map-card-text { padding: 14px 18px 16px; } .map-card-kicker { font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; color: var(--rust); } .map-card.is-overview .map-card-kicker { color: var(--lake); } .map-card h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 3px 0 5px; } .map-card-addr { font-size: 13px; line-height: 1.5; color: var(--ink-soft); } .map-card-link { display: inline-block; margin-top: 10px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--lake); text-decoration: none; border-bottom: 1px solid rgba(51,112,142,.4); transition: color .25s, border-color .25s; } .map-card-link:hover { color: var(--pine); border-color: var(--pine); } /* tap-through list cards (reduced-motion / no scroll tour) */ .map-list-photo { display: block; width: 100%; max-width: 420px; height: 160px; object-fit: cover; border-radius: 12px; margin-bottom: 10px; } .map-list li > a { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--lake); text-decoration: none; border-bottom: 1px solid rgba(51,112,142,.4); } .map-list li > a:hover { color: var(--pine); border-color: var(--pine); } .map-steps { position: relative; z-index: 1; } .map-step { height: 90svh; } .map-list { display: none; list-style: none; margin-top: 4vh; } .map-list li { padding: 14px 0; border-top: 1px solid var(--line); } .map-list h3 { font-family: var(--serif); font-size: 18px; } .map-list p { font-size: 14px; color: var(--ink-soft); } .map-hint { position: absolute; top: 14px; left: 16px; z-index: 5; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); background: rgba(255,255,255,.82); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; transition: opacity .5s ease; } .map-frame.free .map-hint { opacity: 0; } @media (max-width: 620px) { .map-hint { display: none; } .map-explore { top: 12px; right: 12px; padding: 8px 13px; font-size: 11px; letter-spacing: .08em; } .map-card { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; } } body.no-map .map-tour .map-steps { display: none; } body.no-map .map-sticky { position: relative; height: auto; } body.no-map .map-frame { height: 300px; } body.no-map .map-list { display: block; } body.no-map .map-explore { display: none; } /* ══════════ SIDE NAVIGATION · white-veil overlay ══════════ */ /* The panel washes over the page like the hero's white fade — no hard edge, just a slow dissolve from paper to page. */ .daynav { position: fixed; inset: 0; z-index: 90; pointer-events: none; } .daynav-body { position: absolute; top: 0; right: 0; bottom: 0; width: min(430px, 94vw); display: flex; align-items: center; justify-content: flex-end; padding: 9vh 96px 9vh 0; background: linear-gradient(270deg, #ffffff 0%, #ffffff 46%, rgba(255,255,255,.94) 62%, rgba(255,255,255,.72) 78%, rgba(255,255,255,0) 100%); opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); pointer-events: auto; } .daynav.min .daynav-body { opacity: 0; transform: translateX(36px); pointer-events: none; } .dn-inner { text-align: right; max-height: 100%; overflow-y: auto; padding-right: 2px; } .dn-head { font-family: var(--serif); font-size: 15px; color: var(--ink); letter-spacing: .04em; margin: 0 0 14px; } .dn-head-2 { margin-top: 30px; } .dn-head::after { content: ""; display: block; margin: 8px 0 0 auto; width: 44px; height: 1px; background: rgba(30,43,33,.25); } .daynav-list { list-style: none; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; } .dn-item a { display: flex; align-items: center; gap: 12px; text-decoration: none; } .dn-label { font-family: var(--sans); font-size: 13px; letter-spacing: .01em; color: var(--ink-soft); white-space: nowrap; opacity: .62; transition: opacity .25s, color .25s; } .dn-wd { opacity: .6; } .dn-wed-tag { font-weight: 700; color: var(--pine); } .dn-dot { width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box; background: transparent; border: 1px solid rgba(30,43,33,.32); transition: transform .25s, background .25s, border-color .25s; flex: none; } .dn-item a:hover .dn-label { opacity: 1; color: var(--ink); } .dn-item a:hover .dn-dot { border-color: var(--ink); } .dn-item.passed .dn-dot { background: rgba(30,43,33,.32); border-color: transparent; } .dn-item.active .dn-dot { background: var(--ink); border-color: var(--ink); transform: scale(1.3); } .dn-item.active .dn-label { opacity: 1; color: var(--ink); } .dn-item.wed .dn-dot { border-color: var(--sage); } .dn-item.wed.passed .dn-dot { background: var(--sage); border-color: transparent; } .dn-item.wed.active .dn-dot { background: var(--ink); border-color: var(--ink); } .dn-guides { list-style: none; display: flex; flex-direction: column; gap: 10px; } .dn-guides a { font-family: var(--serif); font-size: 21px; color: var(--ink); text-decoration: none; transition: color .25s; } .dn-guides a:hover { color: var(--link); } .dn-guides .dn-current { color: var(--sage); pointer-events: none; } /* the always-there affordance — a small paper pill with a hand-drawn ridge */ .daynav-toggle { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 13px 9px 11px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; pointer-events: auto; box-shadow: 0 6px 22px -10px rgba(30,43,33,.35); transition: background .3s, border-color .3s, box-shadow .3s, opacity .5s ease, transform .5s ease; } .daynav-toggle:hover { border-color: var(--sage); box-shadow: 0 10px 26px -10px rgba(30,43,33,.45); } .dnt-glyph { width: 22px; height: 13px; } .dnt-glyph path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; } .dnt-day { font-family: var(--sans); font-size: 9.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); writing-mode: vertical-rl; transition: color .3s; } .daynav:not(.min) .daynav-toggle { background: var(--ink); border-color: var(--ink); } .daynav:not(.min) .dnt-glyph path { stroke: #fff; } .daynav:not(.min) .dnt-day { color: rgba(255,255,255,.85); } @media (max-width: 640px) { .daynav-body { width: 100vw; padding-right: 78px; } .daynav-toggle { right: 10px; } /* the pill dissolves in once you start scrolling, and dissolves away again at the top of the page — no collision with the hero copy because it simply isn't there until you've scrolled past it */ .daynav.tucked .daynav-toggle { opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(10px); } /* raise the Minarets painting so more of it shows on small screens */ .hero-scene { height: 76%; } .hr-photo img { object-position: center 62%; } } /* ── confetti burst on "The main event" ── */ .main-event { position: relative; } .cf { position: absolute; left: 50%; top: 50%; width: 7px; height: 11px; border-radius: 2px; pointer-events: none; opacity: 0; animation: cfPop 3s cubic-bezier(.16,.62,.36,1) forwards; animation-delay: var(--cfd, 0s); } @keyframes cfPop { 0% { opacity: 0; transform: translate(-50%,-50%) rotate(0) scale(.4); } 8% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--cfx)), calc(-50% + var(--cfy))) rotate(var(--cfr)) scale(1); } } /* ══════════ FOOTER ══════════ */ .footer { text-align: center; padding: 16vh 24px 12vh; position: relative; overflow: hidden; } .footer::before { content: ""; position: absolute; inset: auto -10% -20%; height: 60%; pointer-events: none; z-index: -1; background: radial-gradient(50% 60% at 30% 100%, rgba(147,166,144,.18), transparent 70%), radial-gradient(50% 60% at 74% 100%, rgba(143,189,212,.16), transparent 70%); filter: blur(26px); } .footer-mark { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 30px; color: var(--pine); margin-bottom: 3vh; } .footer-mark span { color: var(--silver); } .footer-line { font-family: var(--serif); font-style: italic; font-weight: 450; font-size: clamp(26px, 4.6vw, 40px); color: var(--pine); } .footer-meta { margin-top: 14px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); } /* ══════════ REDUCED MOTION ══════════ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .scroll-cue { animation: none; } .scene-img { transform: none !important; } .bloom { opacity: 0; transition: opacity 1s ease; } .bloom.in { opacity: 1; } .bloom-veil { display: none; } .reveal { transform: none; transition: opacity .8s ease; } .rule-line { transform: none; transition: none; } .hero-copy { transform: none !important; opacity: 1 !important; } .hr-photo { transform: none !important; opacity: 1 !important; filter: none !important; } .mono-l, .mono-amp, .mono-k, .hero-copy > .kicker, .hero-copy > .hero-sub, .hero-copy > .hero-meta { opacity: 1 !important; filter: none !important; transform: none !important; animation: none !important; } #streamPath { transition: none; } } /* ══════════ GUEST GATE ══════════ */ /* Content stays hidden until unlocked. The .gated class is set by an inline script so nothing flashes before gate.js runs. */ html.gated body > *:not(.gate) { display: none !important; } html.gated, html.gated body { overflow: hidden; } .gate { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8vh 24px; background: linear-gradient(180deg, #ffffff 0%, #edf3f7 55%, #ffffff 96%); transition: opacity .6s ease; } .gate.open { opacity: 0; pointer-events: none; transition-delay: .25s; } .gate.open .gate-copy { animation: gateOut .6s cubic-bezier(.5,0,.75,1) forwards; } .gate.open .gate-art { transition: opacity .6s ease; opacity: 0; } @keyframes gateOut { to { opacity: 0; filter: blur(14px); transform: translateY(-12px) scale(1.03); } } .gate-art { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; pointer-events: none; -webkit-mask-image: linear-gradient(transparent 0, #000 52%, #000 78%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 52%, #000 78%, transparent 100%); } .gate-art img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 56%; opacity: 0; filter: saturate(.6) blur(1px); animation: gateArtIn 1.4s ease .9s forwards; } @keyframes gateArtIn { to { opacity: .55; } } .gate-copy { position: relative; z-index: 2; } .gate-kicker { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; } .gate-mark { font-family: var(--serif); font-weight: 400; font-size: clamp(52px, 12vw, 96px); line-height: 1; margin: 2vh 0 1vh; color: var(--deep-blue); } /* the gate copy breathes in with the same blur-dissolve as the hero */ .gate-kicker, .gate-mark, .gate-note, .gate-form { opacity: 0; filter: blur(14px); animation: gateIn 1.1s cubic-bezier(.2,.7,.25,1) forwards; } .gate-kicker { animation-delay: 1.1s; } .gate-mark { animation-delay: 1.25s; } .gate-note { animation-delay: 1.5s; } .gate-form { animation-delay: 1.65s; filter: none; } @keyframes gateIn { to { opacity: 1; filter: blur(0); } } .gate-note { font-family: var(--serif); font-style: italic; font-size: clamp(16px, 2.6vw, 20px); color: var(--pine); margin-bottom: 26px; } .gate-form { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; } .gate-input { font-family: var(--sans); font-size: 15px; color: var(--ink); background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 999px; padding: 12px 20px; width: min(260px, 70vw); outline: none; transition: border-color .25s, box-shadow .25s; } .gate-input::placeholder { color: var(--sage); } .gate-input:focus { border-color: var(--deep-blue); box-shadow: 0 0 0 3px rgba(47,95,134,.12); } .gate-btn { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: var(--ink); border: 1px solid var(--ink); border-radius: 999px; padding: 12px 24px; cursor: pointer; transition: background .25s, border-color .25s; } .gate-btn:hover { background: var(--deep-blue); border-color: var(--deep-blue); } .gate-error { margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--rust); } .gate.nope .gate-copy { animation: gate-shake .4s ease; } @keyframes gate-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } } @media (prefers-reduced-motion: reduce) { .gate, .gate.nope .gate-copy, .gate.open .gate-copy { transition: none; animation: none; } .gate-kicker, .gate-mark, .gate-note, .gate-form { opacity: 1; filter: none; animation: none; } .gate-art img { opacity: .55; animation: none; } }