/* ========================================================================== Harsil Village Resort - hospitality design system -------------------------------------------------------------------------- Build-free: this file is served directly (no Vite/npm on the host). Bump asset_version in settings in partials/head.blade.php when you change it. Direction: a travel site, in the idiom travellers already know - soft cards lifted off a light ground, rounded controls, photography doing the selling, and a price visible wherever a room is. Colour is two accents doing two jobs, never swapped: --lamp amber : stars, ratings, price highlights --cta orange : booking actions, and nothing else Reserving orange for "book" means the eye finds the next step on any page, with pine teal carrying the brand everywhere else. Type: Poppins - headings and UI DM Sans - body copy and data Signature: the availability plaque. It overlaps the hero, then docks into the header once you scroll past it, so the page's single job is never more than one click away. There is no live inventory behind it - it collects dates and opens the enquiry, and it says so. Motion is opt-in: JS sets `.motion-on` on . Without it, or under prefers-reduced-motion, every animated state resolves to its finished form. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Deep pine and glacier water, the two colours a Himalayan resort actually photographs against, on a light ground so the cards can lift off it. */ --ink: #17262f; /* headings, dark surfaces */ --forest: #0f7a6b; /* pine teal - the brand colour */ --forest-d: #0b5f53; --slate: #566b78; /* body copy */ --slate-2: #8497a2; /* secondary copy */ --glacier: #9fd5cb; /* quiet type on dark ground */ --silt: #f5f8f8; /* page ground */ --silt-2: #eaf1f1; /* raised surface */ --snow: #fff; --rule: #dde7e8; /* hairlines */ --rule-soft: #ebf1f2; /* Stars, ratings, price highlights. */ --lamp: #f4a62a; --lamp-d: #d3870f; --lamp-wash: #fef4e2; /* The booking colour, and nothing else: sunset orange against the teal. */ --cta: #f4762a; --cta-d: #dd5f16; --cta-wash: #fff1e8; /* Type - Poppins carries the headings the way travel themes expect; DM Sans keeps long copy readable underneath it. */ --display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'DM Sans', system-ui, sans-serif; /* Rhythm */ --band: clamp(56px, 7vw, 104px); /* vertical band padding */ --gutter: clamp(18px, 4vw, 34px); --radius: 14px; /* soft cards, the travel-theme idiom */ --radius-lg: 22px; --radius-pill: 999px; /* Cards lift off the ground rather than being drawn on it. */ --lift: 0 2px 6px rgba(23, 38, 47, .04), 0 10px 30px rgba(23, 38, 47, .07); --lift-hi: 0 4px 10px rgba(23, 38, 47, .06), 0 20px 48px rgba(23, 38, 47, .13); /* Motion */ --ease: cubic-bezier(.2, .7, .2, 1); --dur: .5s; } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--silt); color: var(--slate); font-family: var(--sans); font-size: 16.5px; line-height: 1.72; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--display); color: var(--ink); font-weight: 600; line-height: 1.18; /* Poppins runs tall; 1.06 collided its ascenders */ letter-spacing: -.02em; margin: 0 0 .5em; } p { margin: 0 0 1.15em; } p:last-child { margin-bottom: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } hr { border: 0; border-top: 1px solid var(--rule); margin: 0; } ::selection { background: var(--lamp); color: #fff; } :focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; border-radius: 2px; } /* -------------------------------------------------------------------------- 3. Type scale -------------------------------------------------------------------------- */ .t-display { font-family: var(--display); font-size: clamp(42px, 6.8vw, 92px); line-height: 1.02; /* Base layer only - the art layer near the end of this file overrides the whole display scale. Keep them in step if you change one. */ letter-spacing: -.018em; font-weight: 600; text-wrap: balance; } .t-h1 { font-size: clamp(34px, 5.2vw, 64px); line-height: 1.0; letter-spacing: -.034em; font-weight: 600; } .t-h2 { font-size: clamp(27px, 3.4vw, 44px); letter-spacing: -.014em; font-weight: 600; line-height: 1.12; } .t-h3 { font-size: clamp(21px, 2.2vw, 28px); letter-spacing: -.01em; } .t-h4 { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.28; letter-spacing: -.006em; } /* Clash Display ships no italic, so emphasis is carried by weight, colour and a rule that draws itself in - not a slanted face. The rule is a background gradient, not an absolutely positioned ::after: an ::after needs `white-space: nowrap` to stay aligned, and that forced a ~383px minimum width that broke every layout below 400px. This wraps freely. */ .t-em { color: var(--lamp); font-weight: 400; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 94%; background-size: 0 .055em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .motion-on .t-em { animation: emRule 1.1s var(--ease) .7s forwards; } @keyframes emRule { to { background-size: 100% .055em; } } @keyframes eyebrowRule { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Without JS/motion the rule is simply already drawn. */ html:not(.motion-on) .t-em { background-size: 100% .055em; } .t-lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.66; color: var(--slate); } /* Every measurement on this site is mono. That is the rule. */ .t-data { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; font-variant-numeric: tabular-nums; } .t-label { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate-2); font-weight: 500; } .t-label--lamp { color: var(--lamp-d); } .t-label--snow { color: rgba(255, 255, 255, .82); } .t-muted { color: var(--slate-2); } /* Section opener: small-caps label over a title, left-aligned by default. */ .opener { margin-bottom: clamp(26px, 3.4vw, 44px); } .opener .t-label { display: block; margin-bottom: 12px; } .opener h2 { margin-bottom: 0; } .opener p { margin-top: 14px; max-width: 62ch; } .opener--center { text-align: center; } .opener--center p { margin-left: auto; margin-right: auto; } /* -------------------------------------------------------------------------- 4. Layout bands -------------------------------------------------------------------------- */ .band { padding: var(--band) 0; } .band--tight { padding: clamp(38px, 4.6vw, 64px) 0; } .band--snow { background: var(--snow); } .band--silt2 { background: var(--silt-2); } .band--ink { background: var(--ink); color: rgba(255, 255, 255, .74); } .band--ink h1, .band--ink h2, .band--ink h3, .band--ink h4 { color: #fff; } .shell { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 var(--gutter); } .shell--narrow { max-width: 760px; } .shell--wide { max-width: 1440px; } /* Grid - a handful of named shapes beats a 12-column framework here. */ .grid { display: grid; gap: clamp(18px, 2.4vw, 28px); } .grid--1 { grid-template-columns: minmax(0, 1fr); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .grid--aside { grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 5vw, 64px); } .grid--form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 15px; } .grid__full { grid-column: 1 / -1; } @media (max-width: 991px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--aside { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 860px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--split { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 620px) { .grid--2, .grid--3, .grid--4, .grid--form { grid-template-columns: minmax(0, 1fr); } } /* Editorial measure for long-form guide copy. */ .prose { max-width: 68ch; } .prose p { font-size: 17px; } .prose h2 { font-size: clamp(24px, 2.6vw, 32px); margin-top: 1.6em; } .prose h3 { font-size: clamp(19px, 2vw, 23px); margin-top: 1.5em; } .prose ul, .prose ol { padding-left: 1.15em; margin: 0 0 1.15em; } .prose li { margin-bottom: .4em; } .prose > :first-child { margin-top: 0; } .prose a { color: var(--lamp-d); border-bottom: 1px solid var(--lamp); } .prose a:hover { background: var(--lamp-wash); } .prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--lamp); font-family: var(--display); font-size: 20px; font-style: italic; color: var(--forest); } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .btn-lamp, .btn-line, .btn-ink { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border-radius: var(--radius-pill); border: 1px solid transparent; font-family: var(--display); font-size: 14.5px; font-weight: 600; letter-spacing: 0; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .btn-lamp:hover, .btn-ink:hover { transform: translateY(-2px); } /* The booking action. Orange is spent here and on nothing else. */ .btn-lamp { background: var(--cta); color: #fff; box-shadow: 0 8px 20px rgba(244, 118, 42, .3); } .btn-lamp:hover { background: var(--cta-d); color: #fff; box-shadow: 0 12px 26px rgba(244, 118, 42, .38); } .btn-ink { background: var(--forest); color: #fff; box-shadow: 0 8px 20px rgba(15, 122, 107, .26); } .btn-ink:hover { background: var(--forest-d); color: #fff; } .btn-line { background: transparent; color: var(--ink); border-color: var(--rule); } .btn-line:hover { border-color: var(--ink); background: var(--ink); color: #fff; } .btn-line--snow { color: #fff; border-color: rgba(255, 255, 255, .4); } .btn-line--snow:hover { background: #fff; color: var(--ink); border-color: #fff; } .btn-sm { padding: 10px 18px; font-size: 13px; } .btn-block { width: 100%; justify-content: center; } /* Quiet inline link with a moving rule - used for "Read the guide" etc. */ .link-rule { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); padding-bottom: 3px; border-bottom: 1px solid var(--rule); transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .link-rule i { transition: transform var(--dur) var(--ease); } .link-rule:hover { color: var(--lamp-d); border-bottom-color: var(--lamp); } .link-rule:hover i { transform: translateX(4px); } .link-rule--snow { color: #fff; border-bottom-color: rgba(255, 255, 255, .35); } .link-rule--snow:hover { color: #fff; border-bottom-color: #fff; } /* -------------------------------------------------------------------------- 6. Header / navigation -------------------------------------------------------------------------- */ .hdr { position: fixed; inset: 0 0 auto; z-index: 1040; background: transparent; border-bottom: 1px solid transparent; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), padding var(--dur) var(--ease); padding: 14px 0; } .hdr.is-stuck, .hdr.is-solid { background: rgba(231, 235, 230, .93); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom-color: var(--rule); padding: 9px 0; } .hdr__bar { display: flex; align-items: center; gap: 22px; } /* Brand lockup: mark + two-line wordmark. `color` is set on the anchor so the mark's currentColor linework tracks the header's light/solid states with it. */ .hdr__brand { display: flex; align-items: center; gap: 10px; flex: none; color: #fff; } .hdr__brand .mark { flex: none; display: block; overflow: visible; } .hdr__word { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .hdr__brand b { font-family: var(--display); font-size: 20px; line-height: 1.05; font-weight: 500; color: currentColor; letter-spacing: -.01em; white-space: nowrap; } .hdr__brand small { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .82); white-space: nowrap; } /* Transparent state sits straight on the photography with no scrim, and the sky in these frames is often near-white - the lockup needs its own lift. */ .hdr__brand b, .hdr__brand small { text-shadow: 0 1px 3px rgba(19, 26, 21, .45); } .hdr__brand .mark { filter: drop-shadow(0 1px 2px rgba(19, 26, 21, .4)); } .hdr.is-stuck .hdr__brand, .hdr.is-solid .hdr__brand { color: var(--ink); } .hdr.is-stuck .hdr__brand small, .hdr.is-solid .hdr__brand small { color: var(--slate-2); } .hdr.is-stuck .hdr__brand b, .hdr.is-solid .hdr__brand b, .hdr.is-stuck .hdr__brand small, .hdr.is-solid .hdr__brand small { text-shadow: none; } .hdr.is-stuck .hdr__brand .mark, .hdr.is-solid .hdr__brand .mark { filter: none; } /* The mark alone carries the brand once the bar gets tight. */ @media (max-width: 1100px) { .hdr__brand small { display: none; } } @media (max-width: 400px) { .hdr__brand b { font-size: 17px; } } .hdr__nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .hdr__link { position: relative; padding: 8px 13px; font-size: 14px; color: rgba(255, 255, 255, .88); border-radius: var(--radius); transition: color var(--dur) var(--ease); } .hdr__link::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); } .hdr__link:hover::after, .hdr__link.is-active::after { transform: scaleX(1); } .hdr.is-stuck .hdr__link, .hdr.is-solid .hdr__link { color: var(--slate); } .hdr.is-stuck .hdr__link:hover, .hdr.is-solid .hdr__link:hover, .hdr.is-stuck .hdr__link.is-active, .hdr.is-solid .hdr__link.is-active { color: var(--ink); } .hdr__cta { margin-left: 10px; flex: none; } .hdr__toggle { display: none; margin-left: auto; width: 42px; height: 42px; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(255, 255, 255, .4); border-radius: var(--radius); color: #fff; font-size: 18px; cursor: pointer; } .hdr.is-stuck .hdr__toggle, .hdr.is-solid .hdr__toggle { border-color: var(--rule); color: var(--ink); } /* Dropdown - stays list */ .hdr__drop { position: relative; } .hdr__menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 268px; background: var(--snow); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 18px 44px rgba(19, 26, 21, .14); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s; } .hdr__drop:hover .hdr__menu, .hdr__drop:focus-within .hdr__menu { opacity: 1; visibility: visible; transform: none; } .hdr__menu a { display: block; padding: 10px 13px; border-radius: var(--radius); font-size: 14px; color: var(--slate); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .hdr__menu a:hover { background: var(--silt); color: var(--ink); } .hdr__menu a small { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--slate-2); margin-top: 1px; } /* Mobile drawer */ .drawer { position: fixed; inset: 0; z-index: 1060; background: var(--ink); padding: 26px var(--gutter); display: flex; flex-direction: column; transform: translateY(-100%); transition: transform .46s var(--ease); overflow-y: auto; } .drawer.is-open { transform: none; } .drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; } .drawer__close { width: 42px; height: 42px; background: transparent; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--radius); color: #fff; font-size: 18px; cursor: pointer; } .drawer a.drawer__link { display: block; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-family: var(--display); font-size: 26px; color: #fff; } .drawer a.drawer__link small { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--glacier); margin-top: 4px; } .drawer__foot { margin-top: auto; padding-top: 30px; } /* -------------------------------------------------------------------------- 7. Hero -------------------------------------------------------------------------- */ .hero { position: relative; min-height: 92vh; min-height: 92svh; display: flex; align-items: flex-end; background: var(--ink); overflow: hidden; } .hero__media { position: absolute; inset: 0; } .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 1.6s var(--ease), transform 9s linear; } .hero__media img.is-active { opacity: 1; transform: scale(1); } .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(190deg, rgba(19, 26, 21, .58) 0%, rgba(19, 26, 21, .12) 34%, rgba(19, 26, 21, .82) 100%); } .hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(38px, 6vw, 76px); padding-top: 150px; } /* Altitude rule - the hero's first mark is a measurement, not a badge. */ .hero__alt { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--glacier); } .hero__alt::after { content: ''; flex: 1; max-width: 190px; height: 1px; background: linear-gradient(90deg, var(--glacier), transparent); } .hero .hero__title { color: #fff; max-width: 15ch; margin-bottom: 20px; } .hero__sub { color: rgba(255, 255, 255, .82); max-width: 52ch; margin-bottom: 30px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } /* Hero slide markers, bottom-right, mono-numbered */ .hero__marks { position: absolute; right: var(--gutter); bottom: clamp(38px, 6vw, 76px); z-index: 3; display: flex; gap: 10px; } .hero__marks button { width: 30px; height: 3px; border: 0; padding: 0; background: rgba(255, 255, 255, .3); cursor: pointer; transition: background var(--dur) var(--ease); } .hero__marks button.is-active { background: var(--lamp); } /* Trust strip directly under the hero - score, stays, the direct-booking promise */ .trust { background: var(--ink); color: rgba(255, 255, 255, .74); border-top: 1px solid rgba(255, 255, 255, .1); padding: 16px 0; } .trust__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; } .trust__item { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; } .trust__item i { color: var(--lamp); font-size: 13px; } .trust__item b { color: #fff; font-weight: 500; } /* Valley status bar - plain facts, dated, directly under the fold. */ .status { background: var(--lamp-wash); border-bottom: 1px solid #e6d9bd; } .status__row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; } .status__row > i { color: var(--lamp-d); font-size: 16px; margin-top: 2px; flex: none; } .status__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: #6b5423; } .status__text a { color: var(--lamp-d); border-bottom: 1px solid var(--lamp); white-space: nowrap; } .status__date { margin-left: auto; flex: none; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #9a7c3c; padding-top: 2px; } @media (max-width: 700px) { .status__date { display: none; } } /* -------------------------------------------------------------------------- 8. Signature: the valley line -------------------------------------------------------------------------- Harsil sits on one road up one valley. Everything a traveller asks is "how far from where I'm sleeping" - so distance is drawn as a spine. -------------------------------------------------------------------------- */ .valley { position: relative; padding-left: 26px; } .valley::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--rule); transform: scaleY(0); transform-origin: top; transition: transform 1.4s var(--ease); } .valley.is-drawn::before { transform: scaleY(1); } .valley__stop { position: relative; display: grid; grid-template-columns: 78px 1fr auto; align-items: baseline; gap: 0 18px; padding: 17px 0; border-bottom: 1px solid var(--rule-soft); opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .valley.is-drawn .valley__stop { opacity: 1; transform: none; } .valley__stop:last-child { border-bottom: 0; } /* The node on the spine */ .valley__stop::before { content: ''; position: absolute; left: -26px; top: 26px; width: 11px; height: 11px; border-radius: 50%; background: var(--silt); border: 1px solid var(--glacier); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .valley__stop:hover::before { background: var(--lamp); border-color: var(--lamp); } /* A stop where you can actually sleep gets a filled node. */ .valley__stop--stay::before { background: var(--forest); border-color: var(--forest); } .valley__km { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--slate-2); letter-spacing: .02em; } .valley__name { font-family: var(--display); font-size: clamp(19px, 2vw, 24px); color: var(--ink); } .valley__name small { display: block; font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--slate); margin-top: 3px; max-width: 56ch; } .valley__go { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--lamp-d); white-space: nowrap; } .valley__stop:hover .valley__name { color: var(--forest); } @media (max-width: 640px) { .valley__stop { grid-template-columns: 62px 1fr; gap: 0 14px; } .valley__go { grid-column: 2; margin-top: 8px; } } /* -------------------------------------------------------------------------- 9. Stay cards -------------------------------------------------------------------------- */ .stay { display: flex; flex-direction: column; height: 100%; background: var(--snow); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .stay:hover { border-color: var(--glacier); box-shadow: 0 20px 44px rgba(19, 26, 21, .1); transform: translateY(-3px); } .stay__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--silt-2); } .stay__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .stay:hover .stay__media img { transform: scale(1.05); } .stay__km { position: absolute; top: 12px; left: 12px; background: rgba(19, 26, 21, .82); backdrop-filter: blur(6px); color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; padding: 5px 10px; border-radius: var(--radius); } .stay__kind { position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, .93); color: var(--ink); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--radius); } .stay__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; } /* Sideways card. One property in a three-column grid leaves two thirds of the row empty, so a lone stay turns its stack on its side and takes the width. */ @media (min-width: 861px) { .stay--wide { flex-direction: row; align-items: stretch; } .stay--wide .stay__media { flex: 0 0 clamp(320px, 48%, 620px); aspect-ratio: auto; /* height comes from the row, not a ratio */ min-height: 350px; } .stay--wide .stay__body { padding: clamp(28px, 3vw, 42px); justify-content: center; } .stay--wide .stay__desc { max-width: 60ch; } /* The stacked card pins its footer to the bottom; the sideways one is vertically centred, so that push would open a gap instead. */ .stay--wide .stay__foot { margin-top: 24px; } } .stay__body h3 { font-size: 24px; margin-bottom: 6px; } .stay__where { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--slate-2); margin-bottom: 12px; } .stay__desc { font-size: 15px; line-height: 1.68; margin-bottom: 16px; } /* Facts are always visible - never behind a hover that phones cannot perform. */ .stay__facts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; } .stay__fact { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--slate); background: var(--silt); border-radius: var(--radius); padding: 5px 9px; } .stay__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule-soft); display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; } .stay__rate b { font-family: var(--display); font-size: 25px; color: var(--ink); font-weight: 500; } .stay__rate span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-2); display: block; } .stay__score { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--ink); } .stay__score i { color: var(--lamp); } /* -------------------------------------------------------------------------- 10. Room rows (comparison, not decoration) -------------------------------------------------------------------------- */ .room { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: var(--snow); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; } .room:last-child { margin-bottom: 0; } .room__media { position: relative; min-height: 300px; background: var(--silt-2); } .room__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .room__body { padding: clamp(24px, 3vw, 38px); display: flex; flex-direction: column; } .room__body h3 { font-size: clamp(23px, 2.4vw, 30px); margin-bottom: 4px; } .room__specs { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 14px 0; margin: 14px 0 16px; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); } .room__spec { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--slate); } .room__spec i { color: var(--glacier); font-size: 14px; } .room__incl { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 18px; } .room__incl li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.5; } .room__incl i { color: var(--lamp); font-size: 13px; margin-top: 4px; flex: none; } .room__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: space-between; } @media (max-width: 860px) { .room { grid-template-columns: 1fr; } .room__media { min-height: 240px; aspect-ratio: 3 / 2; } .room__incl { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 11. Narrative blocks (the experience layer, replaces the icon grid) -------------------------------------------------------------------------- */ .story { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(26px, 5vw, 70px); } .story--flip .story__media { order: 2; } .story__media { position: relative; aspect-ratio: 5 / 4; border-radius: var(--radius); overflow: hidden; background: var(--silt-2); } .story__media img { width: 100%; height: 100%; object-fit: cover; } .story__body h3 { margin-bottom: 14px; } .story + .story { margin-top: clamp(44px, 6vw, 84px); } @media (max-width: 860px) { .story { grid-template-columns: 1fr; } .story--flip .story__media { order: 0; } } /* -------------------------------------------------------------------------- 12. Facts panel - practical details, set like a timetable -------------------------------------------------------------------------- */ .facts { border-top: 1px solid var(--rule); } .facts__row { display: grid; grid-template-columns: 190px 1fr; gap: 6px 24px; padding: 15px 0; border-bottom: 1px solid var(--rule-soft); } .facts__row dt { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-2); margin: 0; } .facts__row dd { margin: 0; font-size: 15.5px; color: var(--ink); } @media (max-width: 620px) { .facts__row { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 13. Reviews - three at once, scannable, never on a timer -------------------------------------------------------------------------- */ .review { height: 100%; background: var(--snow); border: 1px solid var(--rule); border-radius: var(--radius); padding: 26px 24px; display: flex; flex-direction: column; } .review__stars { color: var(--lamp); font-size: 12px; letter-spacing: 3px; margin-bottom: 14px; } .review__text { font-family: var(--display); font-size: 18px; line-height: 1.62; color: var(--forest); margin-bottom: 20px; } .review__by { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--rule-soft); } .review__by img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; } .review__by b { display: block; font-size: 14.5px; color: var(--ink); font-weight: 500; } .review__by span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-2); } /* -------------------------------------------------------------------------- 14. Gallery -------------------------------------------------------------------------- */ .mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px; grid-auto-flow: dense; } .mosaic__tile { position: relative; overflow: hidden; border-radius: var(--radius); border: 0; padding: 0; background: var(--silt-2); cursor: zoom-in; opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .mosaic__tile.is-in { opacity: 1; transform: none; } .mosaic__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .mosaic__tile:hover img { transform: scale(1.06); } .mosaic__tile--big { grid-column: span 2; grid-row: span 2; } .mosaic__tile--tall { grid-row: span 2; } .mosaic__tile--wide { grid-column: span 2; } .mosaic__tile::after { content: ''; position: absolute; inset: 0; background: rgba(19, 26, 21, .28); opacity: 0; transition: opacity .35s var(--ease); } .mosaic__tile:hover::after { opacity: 1; } @media (max-width: 991px) { .mosaic { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 165px; } } @media (max-width: 575px) { .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 132px; gap: 8px; } } /* -- Photo reel ------------------------------------------------------------ The homepage gallery, moving. Full-bleed and masked at both ends so frames arrive and leave rather than snapping at a hard edge. Shares the ticker's clone-and-translate-50% mechanism; site.js duplicates the track. */ .reel { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } /* The 6px side padding is load-bearing, not decoration. With N tiles cloned to 2N there are 2N-1 gaps, so half the track is half a gap short of one clean set. Adding one gap's worth of padding (2 x 6px) makes 50% land exactly on the repeat, so -50% loops with no jump. Change the gap and change this too. */ .reel__track { display: flex; width: max-content; gap: 12px; padding: 0 6px; } .motion-on .reel__track { animation: reel var(--reel-time, 70s) linear infinite; } /* Hold still while someone is deciding which frame to open. */ .reel:hover .reel__track, .reel:focus-within .reel__track { animation-play-state: paused; } @keyframes reel { to { transform: translateX(-50%); } } .reel__shot { position: relative; flex: none; width: clamp(230px, 24vw, 330px); aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); border: 0; padding: 0; background: var(--silt-2); cursor: zoom-in; } .reel__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .reel__shot:hover img { transform: scale(1.06); } .reel__shot::after { content: ''; position: absolute; inset: 0; background: rgba(19, 26, 21, .28); opacity: 0; transition: opacity .35s var(--ease); } .reel__shot:hover::after { opacity: 1; } .reel__shot:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; } /* No animation to carry the frames past, so let the reader push them. */ @media (prefers-reduced-motion: reduce) { .reel { overflow-x: auto; scrollbar-width: thin; } .reel__track { animation: none; } } .lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(11, 15, 12, .96); display: none; align-items: center; justify-content: center; } .lightbox.is-open { display: flex; } .lightbox img { max-width: 90vw; max-height: 84vh; object-fit: contain; } .lightbox__btn { position: absolute; width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, .32); background: transparent; color: #fff; font-size: 18px; border-radius: var(--radius); cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .lightbox__btn:hover { background: var(--lamp); border-color: var(--lamp); } .lightbox__close { top: 20px; right: 20px; } .lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); } .lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); } .lightbox__meta { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .72); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; } @media (max-width: 600px) { .lightbox__prev { left: 8px; } .lightbox__next { right: 8px; } } /* -------------------------------------------------------------------------- 15. Page banner (inner pages) -------------------------------------------------------------------------- */ .banner { position: relative; background: var(--ink); color: #fff; padding: 168px 0 clamp(48px, 6vw, 78px); overflow: hidden; } .banner__media { position: absolute; inset: -14% 0; } .banner__media img { width: 100%; height: 100%; object-fit: cover; } .banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19, 26, 21, .72) 0%, rgba(19, 26, 21, .42) 46%, rgba(19, 26, 21, .84) 100%); } .banner__inner { position: relative; z-index: 2; } .banner h1 { color: #fff; max-width: 20ch; } .banner__crumb { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--glacier); margin-bottom: 16px; } .banner__crumb a { color: rgba(255, 255, 255, .78); } .banner__crumb a:hover { color: #fff; } .banner__sub { color: rgba(255, 255, 255, .8); max-width: 58ch; margin-top: 12px; } /* -------------------------------------------------------------------------- 16. Forms -------------------------------------------------------------------------- */ .field { margin-bottom: 15px; } .field > label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-2); margin-bottom: 6px; } .field input, .field select, .field textarea { width: 100%; background: var(--snow); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 14px; font-family: var(--sans); font-size: 15px; color: var(--ink); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--lamp); box-shadow: 0 0 0 3px rgba(192, 138, 51, .14); } .field textarea { resize: vertical; min-height: 96px; } .note { padding: 13px 16px; border-radius: var(--radius); font-size: 14.5px; margin-bottom: 18px; } .note--ok { background: #e7f2e9; color: #1f5c34; border: 1px solid #c3e0cb; } .note--bad { background: #f8ebe8; color: #8a3524; border: 1px solid #eccfc8; } /* Contact line items */ .contact-line { display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--rule-soft); } .contact-line i { color: var(--lamp); font-size: 17px; margin-top: 3px; flex: none; } .contact-line dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-2); margin: 0 0 2px; } .contact-line dd { margin: 0; font-size: 15.5px; color: var(--ink); } .contact-line a:hover { color: var(--lamp-d); } /* -------------------------------------------------------------------------- 17. Accordion (FAQ) -------------------------------------------------------------------------- */ .qa { border-top: 1px solid var(--rule); } .qa__item { border-bottom: 1px solid var(--rule); } .qa__q { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; background: transparent; border: 0; padding: 20px 0; text-align: left; font-family: var(--display); font-size: clamp(17px, 1.8vw, 20px); color: var(--ink); cursor: pointer; } .qa__q i { color: var(--lamp); font-size: 15px; margin-top: 4px; flex: none; transition: transform .35s var(--ease); } .qa__item.is-open .qa__q i { transform: rotate(45deg); } .qa__a { display: none; padding: 0 0 22px; max-width: 72ch; } .qa__item.is-open .qa__a { display: block; } /* -------------------------------------------------------------------------- 18. Modal + enquiry form -------------------------------------------------------------------------- */ .modal { position: fixed; inset: 0; z-index: 1080; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(11, 15, 12, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .modal.is-open { display: flex; } .modal__dialog { width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow-y: auto; background: var(--silt); border-radius: var(--radius-lg); box-shadow: 0 30px 70px rgba(11, 15, 12, .4); animation: modalIn .34s var(--ease) both; } @keyframes modalIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .modal__dialog { animation: none; } } .enq__head { position: relative; background: var(--ink); color: #fff; padding: 24px 26px 22px; } .enq__head { position: relative; background: var(--ink); color: #fff; padding: 24px 26px 22px; } .enq__head h2 { color: #fff; font-size: 25px; margin-bottom: 4px; } .enq__head p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .74); } .enq__close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; background: transparent; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--radius); color: #fff; font-size: 14px; cursor: pointer; } .enq__body { padding: 22px 26px 26px; } .enq__or { text-align: center; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--slate-2); margin-top: 16px; } .enq__or a { color: var(--lamp-d); border-bottom: 1px solid var(--lamp); } .enq__ok { text-align: center; padding: 26px 0; } .enq__ok i { font-size: 34px; color: var(--lamp); } /* -------------------------------------------------------------------------- 19. Sticky mobile action bar -------------------------------------------------------------------------- Most Harsil bookings close on a phone call. On a phone, the phone wins. -------------------------------------------------------------------------- */ .actionbar { position: fixed; inset: auto 0 0; z-index: 1035; display: none; background: var(--snow); border-top: 1px solid var(--rule); box-shadow: 0 -6px 24px rgba(19, 26, 21, .1); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 8px; } .actionbar a, .actionbar button { flex: 1 1 0; min-width: 0; /* let the three share a narrow viewport evenly */ display: flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 6px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--snow); color: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; } .actionbar .lbl { overflow: hidden; text-overflow: ellipsis; } @media (max-width: 359px) { .actionbar a, .actionbar button { font-size: 12.5px; gap: 5px; } } .actionbar .is-primary { background: var(--lamp); border-color: var(--lamp); color: #fff; } .actionbar i { font-size: 16px; } @media (max-width: 991px) { .actionbar { display: flex; } body { padding-bottom: 68px; } } /* -------------------------------------------------------------------------- 20. Footer -------------------------------------------------------------------------- */ .foot { background: var(--ink); color: rgba(255, 255, 255, .68); padding: clamp(48px, 6vw, 76px) 0 26px; font-size: 14.5px; } .foot h4 { color: #fff; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; margin-bottom: 16px; } .foot a { color: rgba(255, 255, 255, .68); } .foot a:hover { color: var(--lamp); } .foot ul { list-style: none; padding: 0; margin: 0; } .foot li { margin-bottom: 8px; } .foot__brand { display: flex; align-items: center; gap: 12px; color: #fff; } .foot__brand .mark { flex: none; display: block; overflow: visible; } .foot__brandtext { min-width: 0; } .foot__brand b { font-family: var(--display); font-size: 22px; line-height: 1.15; color: #fff; font-weight: 400; display: block; } /* Tagline only - a bare `span` selector here would also catch the wrapper and uppercase the whole lockup. */ .foot__brand small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--glacier); } .foot__blurb { margin-top: 16px; max-width: 42ch; line-height: 1.7; } .foot__social { display: flex; gap: 10px; margin-top: 18px; } .foot__social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius); font-size: 15px; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .foot__social a:hover { background: var(--lamp); border-color: var(--lamp); color: #fff; } .foot__base { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: rgba(255, 255, 255, .5); } /* ========================================================================== 21. Motion system - 3D scroll header, parallax, reveals -------------------------------------------------------------------------- All of it is progressive: JS adds `.motion-on` to . Without JS, or with reduced motion, everything below resolves to its finished state. ========================================================================== */ /* -- Scroll progress rail ------------------------------------------------- */ .progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 1090; background: transparent; pointer-events: none; } .progress__bar { height: 100%; width: 100%; background: linear-gradient(90deg, var(--lamp), var(--glacier)); transform: scaleX(0); transform-origin: left; will-change: transform; } /* -- 3D scrolling header -------------------------------------------------- A perspective camera with the photography stacked on separate Z planes. Scrolling dollies the camera: near layers rush, far layers drift, and the whole stage tilts back on its X axis. That is the depth cue - not a background-attachment trick. ------------------------------------------------------------------------- */ .stage { position: relative; height: 100vh; height: 100svh; background: var(--ink); /* `hidden`, not `clip`: the 3D-transformed layers are inset past the edges and only a real clipping container keeps them out of document scrollWidth. Using overflow-x on instead would break the sticky pinned panel. */ overflow: hidden; perspective: 1100px; perspective-origin: 50% 42%; } .stage__scene { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; } .stage__layer { position: absolute; inset: -12% -6%; background-size: cover; background-position: center; transform-style: preserve-3d; will-change: transform; } /* Depth planes. Scale compensates for the perspective divide so each layer still fills the frame at its own Z. */ .stage__layer--far { transform: translateZ(-620px) scale(1.62); filter: saturate(.72) brightness(.72); } .stage__layer--mid { transform: translateZ(-300px) scale(1.3); filter: saturate(.88) brightness(.86); } .stage__layer--near { transform: translateZ(-90px) scale(1.1); } /* Depth haze between planes - cheap, and it sells the distance. */ .stage__haze { position: absolute; inset: 0; transform: translateZ(-200px) scale(1.2); background: radial-gradient(120% 70% at 50% 88%, rgba(157, 178, 170, .34), transparent 62%), linear-gradient(180deg, rgba(19, 26, 21, .34) 0%, transparent 34%); pointer-events: none; } .stage::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(184deg, rgba(19, 26, 21, .58) 0%, rgba(19, 26, 21, .10) 26%, rgba(19, 26, 21, .62) 62%, rgba(19, 26, 21, .93) 100%); } /* Foreground ridge - the nearest plane, rising past the copy on scroll. Anchored to the bottom of its photograph so only the tree line shows, and stacked *below* the darkening gradient (z-index 3) so it never blows out the copy above it. */ .stage__ridge { position: absolute; left: -4%; right: -4%; bottom: -2%; height: 32%; z-index: 2; background-size: cover; background-position: center bottom; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%); mask-image: linear-gradient(180deg, transparent 0%, #000 42%); will-change: transform; pointer-events: none; } .stage__copy { position: absolute; inset: auto 0 0; z-index: 5; padding-bottom: clamp(96px, 15vh, 190px); will-change: transform, opacity; /* The photography behind this changes; the copy must not depend on it. */ text-shadow: 0 2px 24px rgba(11, 15, 12, .55), 0 1px 3px rgba(11, 15, 12, .4); } .stage__eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: #fff; } .stage__eyebrow::after { content: ''; flex: 1; max-width: 220px; height: 1px; background: linear-gradient(90deg, var(--glacier), transparent); transform-origin: left; animation: eyebrowRule 1.4s var(--ease) .5s both; } .stage h1 { color: #fff; margin: 0 0 22px; max-width: 16ch; } .stage__sub { color: rgba(255, 255, 255, .82); max-width: 50ch; margin-bottom: 30px; } .stage__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } /* Scroll hint */ .stage__hint { position: absolute; left: 50%; bottom: 26px; z-index: 7; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .55); } .stage__hint span { display: block; width: 1px; height: 42px; background: linear-gradient(180deg, transparent, var(--lamp)); } .motion-on .stage__hint span { animation: hintPulse 2.4s var(--ease) infinite; } @keyframes hintPulse { 0%, 100% { transform: scaleY(.35); opacity: .35; transform-origin: top; } 50% { transform: scaleY(1); opacity: 1; transform-origin: top; } } /* -- Word-by-word 3D headline reveal -------------------------------------- Held invisible until JS has wrapped the words, so the headline never paints once flat and then re-animates. `data-split-done` is set by the splitter. ------------------------------------------------------------------------- */ .motion-on [data-split] { opacity: 0; } .motion-on [data-split][data-split-done] { opacity: 1; } .split { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; } .split__w { display: inline-block; transform-origin: 50% 100%; } .motion-on .split__w { opacity: 0; transform: translateY(102%) rotateX(-72deg); animation: wordIn .95s cubic-bezier(.18, .84, .28, 1) both; animation-delay: calc(var(--i) * 70ms + 180ms); } @keyframes wordIn { to { opacity: 1; transform: none; } } /* Set by the splitter once the words are past due - a headline can never be left invisible because an animation was skipped or throttled. */ .motion-on [data-split].is-shown .split__w { opacity: 1; transform: none; animation: none; } /* -- Parallax utility ------------------------------------------------------ */ .par { will-change: transform; } /* -- Scroll reveals -------------------------------------------------------- */ .rise { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .rise.is-in { opacity: 1; transform: none; } /* 3D card deal-in: rotates up off its own bottom edge. */ .rise-3d { opacity: 0; transform: perspective(900px) rotateX(14deg) translateY(46px) scale(.965); transform-origin: 50% 100%; transition: opacity .9s var(--ease), transform 1s var(--ease); } .rise-3d.is-in { opacity: 1; transform: none; } /* Stagger children of a grid without writing per-item delays. */ .stagger > * { transition-delay: calc(var(--d, 0) * 90ms); } /* Image mask wipe */ .wipe { overflow: hidden; } .wipe > img, .wipe > .wipe__inner { transform: scale(1.16); transition: transform 1.4s var(--ease), clip-path 1.2s var(--ease); clip-path: inset(0 0 100% 0); } .wipe.is-in > img, .wipe.is-in > .wipe__inner { transform: scale(1); clip-path: inset(0 0 0 0); } /* -- Mouse-tracked 3D tilt ------------------------------------------------- */ .tilt { transform-style: preserve-3d; transition: transform .5s var(--ease); will-change: transform; } .tilt.is-tilting { transition: transform .12s linear; } .tilt__lift { transform: translateZ(34px); } /* -- Marquee ticker -------------------------------------------------------- */ .ticker { overflow: hidden; border-block: 1px solid var(--rule); background: var(--silt-2); padding: 15px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .ticker__track { display: flex; width: max-content; } .motion-on .ticker__track { animation: tick 46s linear infinite; } .ticker:hover .ticker__track { animation-play-state: paused; } .ticker__item { display: inline-flex; align-items: center; gap: 12px; padding: 0 26px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); white-space: nowrap; } .ticker__item b { color: var(--ink); font-weight: 500; } .ticker__item i { color: var(--lamp); font-size: 13px; } @keyframes tick { to { transform: translateX(-50%); } } /* -- Counters -------------------------------------------------------------- */ .count { font-variant-numeric: tabular-nums; } /* -- Pinned depth panel ---------------------------------------------------- */ .pin { position: relative; } .pin__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; } .pin__bg { position: absolute; inset: -8%; background-size: cover; background-position: center; will-change: transform; } .pin__sticky::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19, 26, 21, .78), rgba(19, 26, 21, .55) 50%, rgba(19, 26, 21, .88)); } .pin__copy { position: relative; z-index: 2; text-align: center; max-width: 760px; padding: 0 var(--gutter); } .pin__copy h2 { color: #fff; } .pin__copy p { color: rgba(255, 255, 255, .8); } @media (max-width: 480px) { /* The full location string wraps awkwardly at phone widths. */ .stage__eyebrow { font-size: 10.5px; letter-spacing: .16em; } .stage__eyebrow::after { display: none; } } @media (max-width: 860px) { .stage { height: 88vh; height: 88svh; perspective: 800px; } .stage__layer--far { transform: translateZ(-420px) scale(1.44); } .stage__layer--mid { transform: translateZ(-210px) scale(1.22); } .pin__sticky { height: 84vh; } } /* -- Everything above collapses to a static, finished state ---------------- */ @media (prefers-reduced-motion: reduce) { .stage__scene, .stage__layer, .stage__ridge, .stage__copy, .pin__bg, .par { transform: none !important; } .stage__layer--far { transform: scale(1.1) !important; } .split__w { opacity: 1 !important; transform: none !important; animation: none !important; } .rise-3d, .rise { opacity: 1 !important; transform: none !important; } .wipe > img, .wipe > .wipe__inner { transform: none !important; clip-path: none !important; } .ticker__track { animation: none !important; } .t-em { animation: none !important; background-size: 100% .055em !important; } .stage__eyebrow::after { animation: none; transform: scaleX(1); } } @media (max-width: 991px) { .hdr__nav, .hdr__cta { display: none; } .hdr__toggle { display: flex; } .hero { min-height: 86vh; } } @media (max-width: 575px) { body { font-size: 16px; } .hero__marks { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .rise, .valley__stop, .mosaic__tile { opacity: 1; transform: none; } .valley::before { transform: scaleY(1); } } /* ========================================================================== Hospitality layer -------------------------------------------------------------------------- Added when the site became the resort's own rather than a valley guide. Everything below serves one funnel: see the place, price a room, send dates. ========================================================================== */ /* -- Hero ------------------------------------------------------------------ Full-bleed photography with the plaque overlapping its lower edge. The bottom padding reserves room for that overlap so the copy never sits underneath it. */ .hero { position: relative; min-height: min(88vh, 780px); display: flex; flex-direction: column; justify-content: flex-end; padding: 150px 0 96px; background: var(--ink); overflow: hidden; isolation: isolate; } .hero__frames { position: absolute; inset: 0; z-index: -2; } .hero__frame { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; } /* Three frames on a 21s cycle, 7s apart: each holds fully visible for a beat and spends the rest cross-fading, so there is never a hard cut. The first frame is opaque by default in case motion is off. */ .hero__frame:first-child { opacity: 1; } .motion-on .hero__frame { opacity: 0; animation: heroFade 21s linear infinite; } /* SUPERSEDED: the art layer near the end of this file redefines heroFade without the transform keyframes, so heroDrift can own `transform` alone. Duplicate @keyframes names do not scope - the last definition in the file wins everywhere - so THIS block never takes effect. Edit the later one. */ @keyframes heroFade { 0% { opacity: 0; transform: scale(1.06); } 6%, 28% { opacity: 1; } 34% { opacity: 0; } 100% { opacity: 0; transform: scale(1); } } .hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(42, 29, 20, .58) 0%, rgba(42, 29, 20, .12) 34%, rgba(42, 29, 20, .82) 100%); } .hero__copy { color: #fff; position: relative; } .hero__eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .8); margin-bottom: 18px; } .hero__copy .hero__title { color: #fff; margin: 0; max-width: 17ch; text-shadow: 0 2px 18px rgba(42, 29, 20, .34); } .hero__sub { margin: 20px 0 0; max-width: 54ch; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.62; color: rgba(255, 255, 255, .9); } .hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 26px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: rgba(255, 255, 255, .8); } .hero__meta > span { display: inline-flex; align-items: center; gap: 7px; } .hero__score { color: #fff; font-weight: 500; } .hero__score i { color: var(--lamp); } /* Pull the plaque over the photograph's lower edge. */ .hero__dock { position: relative; margin-bottom: -150px; margin-top: 42px; } /* -- Availability plaque --------------------------------------------------- The signature. Raised off the page on a light ground so it reads as an object resting on the photograph, not a form printed onto it. */ .avail { display: grid; grid-template-columns: 1fr 1fr auto auto; align-items: stretch; background: var(--snow); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: 0 26px 60px rgba(42, 29, 20, .22); padding: 8px; } .avail__field { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 12px 18px; border-right: 1px solid var(--rule-soft); min-width: 0; } .avail__field label { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate-2); } .avail__field input, .avail__field select { border: 0; background: transparent; padding: 0; font-family: var(--sans); font-size: 15.5px; color: var(--ink); width: 100%; min-width: 0; } .avail__field input:focus-visible, .avail__field select:focus-visible { outline: 2px solid var(--cta); outline-offset: 4px; border-radius: 2px; } .avail__field--guests { border-right: 0; } .avail__go { margin-left: 10px; align-self: stretch; white-space: nowrap; } .avail__note { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; margin: 4px 8px 2px; padding-top: 12px; border-top: 1px solid var(--rule-soft); font-size: 13px; color: var(--slate-2); } .avail__note i { color: var(--lamp-d); } @media (max-width: 860px) { .avail { grid-template-columns: 1fr 1fr; padding: 6px; } .avail__field { padding: 11px 14px; } .avail__field:nth-child(2) { border-right: 0; } .avail__field--guests { grid-column: 1 / -1; border-top: 1px solid var(--rule-soft); } .avail__go { grid-column: 1 / -1; margin: 8px 0 0; justify-content: center; } } /* Docked copy: the same plaque flattened into a rail, revealed by site.js once the hero one has scrolled away. */ .availdock { position: fixed; top: 0; left: 0; right: 0; z-index: 1039; background: rgba(251, 247, 240, .96); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--rule); padding: 10px 0; transform: translateY(-100%); transition: transform .45s var(--ease); } .availdock.is-docked { transform: translateY(0); } .availdock .shell { display: flex; align-items: center; gap: 20px; } .availdock__label { font-family: var(--display); font-size: 17px; color: var(--ink); white-space: nowrap; } .avail--compact { flex: 1; box-shadow: none; border-radius: var(--radius); padding: 4px; } .avail--compact .avail__field { padding: 6px 14px; } .avail--compact .avail__go { padding: 10px 20px; } @media (max-width: 1080px) { .availdock { display: none; } } /* -- Rooms ----------------------------------------------------------------- Alternating sides so a two-room list does not read as one card repeated. */ .rooms { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 40px); } .room { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--snow); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .room:hover { border-color: var(--lamp); box-shadow: 0 22px 50px rgba(42, 29, 20, .1); } .room--flip .room__media { order: 2; } .room__media { position: relative; overflow: hidden; background: var(--silt-2); min-height: 330px; } .room__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .room:hover .room__media img { transform: scale(1.04); } .room__body { padding: clamp(24px, 2.8vw, 40px); display: flex; flex-direction: column; } .room__name { margin: 0 0 14px; } .room__name a { color: var(--ink); } .room__name a:hover { color: var(--cta); } .room__specs { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px 20px; } .room__specs li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--slate); } .room__specs i { color: var(--lamp-d); font-size: 14px; } .room__desc { font-size: 15.5px; line-height: 1.7; margin: 0 0 18px; } .room__amenities { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 6px; } .room__amenities li { font-size: 12.5px; padding: 5px 11px; background: var(--silt-2); border: 1px solid var(--rule-soft); border-radius: 999px; color: var(--slate); } .room__foot { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--rule-soft); display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .room__rate b { display: block; font-family: var(--display); font-size: 30px; line-height: 1; color: var(--ink); font-weight: 600; } .room__rate .room__rate--ask { font-size: 22px; } .room__rate span { display: block; margin-top: 5px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-2); } .room__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } @media (max-width: 860px) { .room { grid-template-columns: minmax(0, 1fr); } .room--flip .room__media { order: 0; } .room__media { min-height: 0; aspect-ratio: 4 / 3; } } /* -- Amenities ------------------------------------------------------------- */ .amen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); border-radius: var(--radius); overflow: hidden; } .amen__item { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--silt); font-size: 14.5px; color: var(--slate); } .amen__item i { color: var(--lamp-d); font-size: 17px; flex: none; } @media (max-width: 575px) { .amen { grid-template-columns: minmax(0, 1fr); } } .tags { margin-top: 30px; } .tags ul { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 7px; } .tags li { font-size: 13px; padding: 6px 13px; border: 1px solid var(--rule); border-radius: 999px; color: var(--slate); background: var(--silt); } /* -- FAQ -------------------------------------------------------------------- */ .faq { border-top: 1px solid var(--rule); } .faq__item { border-bottom: 1px solid var(--rule); } .faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 2px; cursor: pointer; list-style: none; font-family: var(--display); font-size: clamp(17px, 1.7vw, 20px); color: var(--ink); transition: color var(--dur) var(--ease); } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary:hover { color: var(--cta); } .faq__item summary:focus-visible { outline: 2px solid var(--cta); outline-offset: 3px; } .faq__item summary i { flex: none; color: var(--lamp-d); font-size: 14px; transition: transform .3s var(--ease); } .faq__item[open] summary i { transform: rotate(45deg); } .faq__a { padding: 0 2px 22px; max-width: 62ch; color: var(--slate); line-height: 1.72; font-size: 15.5px; } .faq__a p:last-child { margin-bottom: 0; } /* -- Hero corrections ------------------------------------------------------ The plaque overhangs the hero, so the hero cannot clip: the frames get their own clipping box instead, and the overhang is reserved as margin on the hero rather than pushed onto whatever section happens to follow. */ /* overflow-x: clip, not hidden. The hero must stay visible on the Y axis so the booking plaque can overhang its bottom edge - but .hero__frames sits at inset:0 and rests at scale(1.06) for the parallax overscan, so on the X axis it spills a few pixels past the viewport and gave the whole page a sideways scroll. `hidden` on one axis forces the other to `auto` and would have clipped the plaque; `clip` does not, so the two requirements can coexist. */ .hero { overflow: visible; overflow-x: clip; margin-bottom: var(--plaque-overhang); padding-bottom: 40px; } .hero__frames { overflow: hidden; } .hero__dock { position: absolute; left: 0; right: 0; bottom: calc(var(--plaque-overhang) * -1); margin: 0; } :root { --plaque-overhang: 74px; } /* A headline over a bright sky needs more than a 12% scrim in the middle. */ .hero__scrim { background: linear-gradient(180deg, rgba(42, 29, 20, .62) 0%, rgba(42, 29, 20, .3) 30%, rgba(42, 29, 20, .48) 62%, rgba(42, 29, 20, .86) 100%), linear-gradient(90deg, rgba(42, 29, 20, .5) 0%, rgba(42, 29, 20, .06) 62%); } .hero__copy .hero__title { max-width: 22ch; } /* The accent rule under the emphasised clause is an editorial device; on photography it reads as clutter, so the hero keeps the colour and drops it. */ .hero__copy .hero__title .t-em { background-image: none; animation: none; } @media (max-width: 860px) { :root { --plaque-overhang: 0px; } .hero { padding: 118px 0 34px; min-height: 0; } .hero__dock { position: static; margin-top: 30px; } } /* -- Hero corrections, second pass ----------------------------------------- */ /* `margin: 0` in the first pass killed the shell's auto-centring, so the absolutely positioned plaque hugged the viewport instead of the column. */ .hero__dock { margin: 0 auto; } /* Reserve the part of the plaque that sits inside the hero, or it covers the rating line. Plaque overhangs by --plaque-overhang; the rest is inside. */ .hero { padding-bottom: 104px; } /* 92px was set for a grotesk. Erode carries more weight per line, and the plaque needs the room more than the headline does. */ .hero__copy .hero__title { font-size: clamp(38px, 5.4vw, 72px); max-width: 19ch; } /* The copy column is the left two-thirds; darken behind it properly so the amber clause stays legible over a sunlit white building. */ .hero__scrim { background: linear-gradient(180deg, rgba(42, 29, 20, .6) 0%, rgba(42, 29, 20, .26) 26%, rgba(42, 29, 20, .5) 66%, rgba(42, 29, 20, .88) 100%), linear-gradient(90deg, rgba(42, 29, 20, .68) 0%, rgba(42, 29, 20, .42) 42%, rgba(42, 29, 20, 0) 78%); } .hero__copy { max-width: 940px; } @media (max-width: 860px) { .hero { padding-bottom: 34px; } } /* The overhang alone leaves the plaque flush against the next section. */ .hero { margin-bottom: calc(var(--plaque-overhang) + 36px); } @media (max-width: 860px) { .hero { margin-bottom: 0; } } /* ========================================================================== Travel-theme layer -------------------------------------------------------------------------- Overrides the editorial pass above. Soft cards on a light ground, rounded controls, a price wherever a room appears. Appended last so it wins on equal specificity without having to raise it. ========================================================================== */ /* -- Section openers: centred, the way travel themes signpost ---------------- */ .opener .t-label { display: inline-block; background: var(--cta-wash); color: var(--cta-d); padding: 7px 16px; border-radius: var(--radius-pill); letter-spacing: .1em; margin-bottom: 16px; } .t-label--snow { background: rgba(255, 255, 255, .16); color: #fff; } /* -- Hero -------------------------------------------------------------------- */ .hero__eyebrow { display: inline-block; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); padding: 8px 18px; border-radius: var(--radius-pill); letter-spacing: .1em; backdrop-filter: blur(6px); } .hero__copy .hero__title { letter-spacing: -.024em; line-height: 1.1; } .hero__copy .hero__title .t-em { color: var(--lamp); } .hero__meta { gap: 10px; } .hero__meta > span { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius-pill); padding: 7px 15px; backdrop-filter: blur(6px); } /* -- Availability plaque ----------------------------------------------------- */ .avail { border: 0; border-radius: var(--radius-lg); box-shadow: var(--lift-hi); padding: 10px; } .avail__field { border-right: 1px solid var(--rule-soft); } .avail__field label { letter-spacing: .1em; color: var(--slate-2); font-weight: 500; } .avail__go { border-radius: var(--radius-pill); } .avail__note { border-top: 1px solid var(--rule-soft); } .avail--compact { border-radius: var(--radius-pill); } /* -- Perks ------------------------------------------------------------------- */ .perks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); } .perk { background: var(--snow); border-radius: var(--radius); padding: 28px 24px 26px; box-shadow: var(--lift); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .perk:hover { transform: translateY(-4px); box-shadow: var(--lift-hi); } .perk__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-pill); background: var(--cta-wash); color: var(--cta); font-size: 22px; margin-bottom: 18px; } .perk__title { font-size: 17px; margin: 0 0 8px; } .perk p { font-size: 14.5px; line-height: 1.62; color: var(--slate); margin: 0; } @media (max-width: 991px) { .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .perks { grid-template-columns: minmax(0, 1fr); } } /* -- Room cards -------------------------------------------------------------- */ .rcard { display: flex; flex-direction: column; height: 100%; background: var(--snow); border-radius: var(--radius); overflow: hidden; box-shadow: var(--lift); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .rcard:hover { transform: translateY(-5px); box-shadow: var(--lift-hi); } .rcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--silt-2); } .rcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .rcard:hover .rcard__media img { transform: scale(1.06); } /* The price rides the photograph - the one number a traveller scans for. */ .rcard__price { position: absolute; right: 14px; bottom: 14px; margin: 0; background: var(--snow); border-radius: var(--radius); padding: 9px 15px; text-align: right; box-shadow: 0 6px 18px rgba(23, 38, 47, .18); } .rcard__price b { display: block; font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--cta-d); line-height: 1.1; } .rcard__price span { display: block; font-size: 11px; color: var(--slate-2); } .rcard__tag { position: absolute; left: 14px; top: 14px; background: rgba(23, 38, 47, .62); backdrop-filter: blur(6px); color: #fff; font-size: 11.5px; font-weight: 500; padding: 6px 13px; border-radius: var(--radius-pill); } .rcard__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; } .rcard__stars { display: flex; align-items: center; gap: 3px; margin: 0 0 10px; color: var(--lamp); font-size: 12px; } .rcard__stars span { margin-left: 7px; color: var(--slate); font-weight: 700; font-size: 13px; } .rcard__name { font-size: 20px; margin: 0 0 12px; } .rcard__name a { color: var(--ink); transition: color var(--dur) var(--ease); } .rcard__name a:hover { color: var(--forest); } .rcard__specs { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 7px 16px; } .rcard__specs li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--slate); } .rcard__specs i { color: var(--forest); font-size: 14px; } .rcard__desc { font-size: 14.5px; line-height: 1.66; margin: 0 0 16px; color: var(--slate); } .rcard__chips { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 6px; } .rcard__chips li { font-size: 12px; padding: 5px 12px; background: var(--silt-2); border-radius: var(--radius-pill); color: var(--slate); } .rcard__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--rule-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .rcard__incl { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--forest); } .rcard__incl i { font-size: 13px; } /* -- Cards elsewhere pick up the same treatment ------------------------------ */ .stay, .review, .room { border: 0; border-radius: var(--radius); box-shadow: var(--lift); } .stay:hover, .room:hover { box-shadow: var(--lift-hi); border: 0; } .review { padding: 26px 24px; background: var(--snow); } .amen { border: 0; border-radius: var(--radius); background: transparent; gap: 10px; } .amen__item { background: var(--snow); border-radius: var(--radius); box-shadow: var(--lift); padding: 15px 17px; } .amen__item i { color: var(--forest); } .tags li { border: 0; background: var(--silt-2); border-radius: var(--radius-pill); } .faq { border-top: 0; } .faq__item { border: 0; background: var(--snow); border-radius: var(--radius); box-shadow: var(--lift); margin-bottom: 12px; padding: 0 20px; } .faq__item summary { font-family: var(--display); font-weight: 600; font-size: 16.5px; } .faq__item summary:hover { color: var(--forest); } .faq__item summary i { color: var(--cta); } .faq__item[open] { box-shadow: var(--lift-hi); } .reel__shot { border-radius: var(--radius); } .valley__stop { border-radius: var(--radius); } /* Header: a rounded pill nav reads friendlier than hairline links. */ .hdr__link { border-radius: var(--radius-pill); } /* Chips sat on --silt-2 inside a --silt-2 band and vanished. */ .tags li { background: var(--snow); box-shadow: var(--lift); color: var(--slate); } .band--silt2 .rcard__chips li, .band--silt2 .amen__item { background: var(--snow); } /* The distance list needs more than the 340px aside once Poppins is setting the stop names - they were wrapping after one word. */ .grid--aside-wide { grid-template-columns: minmax(0, 1fr) 470px; gap: clamp(28px, 5vw, 64px); } @media (max-width: 991px) { .grid--aside-wide { grid-template-columns: minmax(0, 1fr); } } /* -- Hero layering, made explicit ------------------------------------------ The first pass stacked the photo and scrim on negative z-indexes and let everything else sit at auto. That put the hero's own --ink background above the plaque at narrow widths - the card rendered as a dark translucent panel instead of white. Negative z-index is not worth the subtlety here: every layer now gets a positive index and the order is readable at a glance. */ .hero { isolation: isolate; } .hero__frames { z-index: 1; } .hero__scrim { z-index: 2; } .hero__copy { position: relative; z-index: 3; } .hero__dock { z-index: 4; } @media (max-width: 860px) { /* static would drop it out of the z-order again */ .hero__dock { position: relative; } } /* ========================================================================== Art direction -------------------------------------------------------------------------- The travel structure below was right and stays; this layer is about craft. Three moves: 1. Panchang for display. It is an Indian Type Foundry face whose Latin is drawn off Devanagari proportions - a flat head-line, low contrast, wide counters. On a Uttarakhand resort it is a local voice rather than the Poppins every template already uses. 2. A cinematic rhythm. Light limestone sections against full-bleed near black chapters, so the page breathes in and out instead of running as one continuous card wall. 3. Orchestration. One load sequence and one scroll behaviour, both disciplined - the page arrives in an order, then gets out of the way. Colour: limestone ground, deodar dark, one jewel accent (Harsil apple) kept exclusively for booking, amber for rates and stars. ========================================================================== */ :root { --ink: #101f19; --forest: #1e3a2f; --forest-d: #14291f; --slate: #4c5a53; --slate-2: #7e8c85; --glacier: #9db3a8; --silt: #f1eee7; --silt-2: #e7e3d9; --snow: #fff; --rule: #d8d3c7; --rule-soft: #e6e1d6; --lamp: #c8892f; --lamp-d: #a86f1d; --lamp-wash: #f6eeddcc; --cta: #c2362b; --cta-d: #a22a21; --cta-wash: #f7e9e7; /* One face, everywhere: Inter, the type the brand lockup is already set in. The serif display face is gone - headlines, section titles, card titles and UI now all resolve to the same family, so the wordmark at the top of the page and the headline underneath it are the same voice rather than two. Inter's optical size axis (14-32) still does real work: at 108px it resolves to the tight display cut, at 15px to the wider text cut, which is what keeps it legible on a cheap Android screen. --display stays a separate token so the display face can diverge again without touching every rule. */ --display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'Inter', system-ui, sans-serif; /* Crisper than the template 14px; the photography carries the softness. */ --radius: 6px; --radius-lg: 10px; --lift: 0 1px 2px rgba(16, 31, 25, .04), 0 12px 34px rgba(16, 31, 25, .07); --lift-hi: 0 2px 6px rgba(16, 31, 25, .06), 0 26px 60px rgba(16, 31, 25, .14); --band: clamp(72px, 9vw, 148px); --ease-out: cubic-bezier(.16, 1, .3, 1); } body { font-family: var(--sans); font-size: 17px; } h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.02em; line-height: 1.1; } /* ---------------------------------------------------------- heading scale --- ONE KNOB. To make every heading on the site bigger or smaller, change --type-scale below and nothing else: --type-scale: .9; 10% smaller everywhere --type-scale: 1.1; 10% larger everywhere Each step is a clamp (floor, fluid, ceiling) multiplied by that scale, so the phone floor, the fluid middle and the desktop ceiling all move together and the relationships between the levels are preserved. Weight and tracking: a serif carries a headline on stroke contrast, a grotesque has none, so Inter needs 700 where the serif took 600 - the same weight as the wordmark. Inter is also spaced for text, so at display sizes the default sidebearings leave words swimming; the negative tracking scales with the size and eases off to almost nothing at card-title sizes. */ :root { --type-scale: 1; --fs-display: calc(clamp(34px, 6vw, 84px) * var(--type-scale)); --fs-h1: calc(clamp(28px, 4vw, 46px) * var(--type-scale)); --fs-h2: calc(clamp(24px, 3.3vw, 42px) * var(--type-scale)); --fs-h3: calc(clamp(19px, 1.8vw, 25px) * var(--type-scale)); --fs-h4: calc(clamp(16px, 1.4vw, 19px) * var(--type-scale)); } .t-display { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -.034em; font-weight: 700; } .t-h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -.028em; font-weight: 700; } .t-h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.026em; font-weight: 700; } .t-h3 { font-size: var(--fs-h3); line-height: 1.22; letter-spacing: -.02em; font-weight: 700; } .t-h4 { font-size: var(--fs-h4); line-height: 1.32; letter-spacing: -.014em; font-weight: 700; } .t-lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.66; color: var(--slate); max-width: 58ch; } /* Eyebrows: a hairline and small caps, not a coloured pill. */ .opener .t-label, .hero__eyebrow { display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--lamp-d); backdrop-filter: none; border-radius: 0; } .t-label--snow, .hero__eyebrow { color: rgba(255, 255, 255, .82); } .opener { margin-bottom: clamp(34px, 4vw, 58px); } /* Buttons: flat, confident, no candy shadow. */ .btn-lamp, .btn-line, .btn-ink { font-family: var(--sans); font-weight: 700; font-size: 14px; letter-spacing: .01em; padding: 17px 34px; border-radius: var(--radius-pill); } .btn-lamp { background: var(--cta); box-shadow: none; } .btn-lamp:hover { background: var(--cta-d); box-shadow: 0 12px 30px rgba(194, 54, 43, .3); } .btn-ink { background: var(--ink); box-shadow: none; } .btn-ink:hover { background: var(--forest); } /* ---------------------------------------------------------------- hero --- */ .hero { min-height: min(96vh, 940px); padding-top: 172px; } .hero__frames { z-index: 1; } .hero__scrim { z-index: 2; background: linear-gradient(180deg, rgba(16, 31, 25, .58) 0%, rgba(16, 31, 25, .18) 26%, rgba(16, 31, 25, .46) 64%, rgba(16, 31, 25, .82) 100%), linear-gradient(90deg, rgba(16, 31, 25, .72) 0%, rgba(16, 31, 25, .34) 46%, rgba(16, 31, 25, 0) 82%); } .hero__copy .hero__title { max-width: 15ch; text-shadow: 0 4px 40px rgba(16, 31, 25, .4); } .hero__copy .hero__title .t-em { color: var(--lamp); } .hero__sub { font-size: clamp(16px, 1.35vw, 19px); max-width: 46ch; color: rgba(255, 255, 255, .84); } /* Meta reads as data, not as chips. */ .hero__meta { gap: 0 28px; font-family: var(--sans); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; } .hero__meta > span { background: none; border: 0; padding: 0; backdrop-filter: none; border-radius: 0; } /* A middle dot between facts, not a rule - the same separator the eyebrow text uses, so the hero has one punctuation mark instead of two. */ .hero__meta > span + span { position: relative; padding-left: 26px; } .hero__meta > span + span::before { content: '·'; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, .5); background: none; width: auto; height: auto; margin: 0; } .hero__score i { color: var(--lamp); } /* Plaque: a precise instrument, not a floating pill. */ .avail { border-radius: var(--radius-lg); box-shadow: 0 30px 70px rgba(16, 31, 25, .26); padding: 6px; } .avail__field { padding: 15px 22px; } .avail__field label { font-size: 10px; letter-spacing: .2em; font-weight: 700; color: var(--slate-2); } .avail__field input, .avail__field select { font-family: var(--sans); font-size: 16px; font-weight: 500; } .avail__go { border-radius: var(--radius); padding: 17px 30px; } .avail__note { font-size: 12.5px; letter-spacing: .01em; } /* ------------------------------------------------------- load sequence --- The page arrives in one order: frame settles, headline lines lift, then the supporting copy and the plaque. Nothing loops; it happens once. */ .motion-on .hero__copy > *, .motion-on .hero__dock { opacity: 0; transform: translateY(26px); animation: heroIn 1.1s var(--ease-out) forwards; } .motion-on .hero__eyebrow { animation-delay: .15s; } .motion-on .hero__copy .hero__title { animation-delay: .28s; } .motion-on .hero__sub { animation-delay: .44s; } .motion-on .hero__meta { animation-delay: .56s; } .motion-on .hero__dock { animation-delay: .68s; } @keyframes heroIn { to { opacity: 1; transform: none; } } .motion-on .hero__frame:first-child { animation: heroSettle 2.4s var(--ease-out) forwards, heroFade 21s linear infinite; } @keyframes heroSettle { from { transform: scale(1.1); } to { transform: scale(1); } } /* ------------------------------------------------------------- perks --- */ .perks { gap: 0; border-top: 1px solid var(--rule); } .perk { background: none; box-shadow: none; border-radius: 0; border-right: 1px solid var(--rule); padding: 34px 30px 30px; } .perk:last-child { border-right: 0; } .perk:hover { transform: none; box-shadow: none; } .perk__icon { width: auto; height: auto; background: none; border-radius: 0; color: var(--lamp-d); font-size: 26px; margin-bottom: 20px; display: block; } .perk__title { font-family: var(--display); font-size: 19px; } @media (max-width: 991px) { .perk { border-right: 0; border-bottom: 1px solid var(--rule); } } /* ------------------------------------------------------------- rooms --- */ .rcard { background: none; box-shadow: none; border-radius: 0; } .rcard:hover { transform: none; box-shadow: none; } .rcard__media { border-radius: var(--radius); aspect-ratio: 3 / 4; } .rcard:hover .rcard__media img { transform: scale(1.05); } .rcard__price { display: none; } /* the rate belongs in the type below */ .rcard__tag { left: 16px; top: 16px; background: rgba(255, 255, 255, .92); color: var(--ink); letter-spacing: .1em; text-transform: uppercase; font-size: 10px; font-weight: 700; } .rcard__body { padding: 24px 0 0; } .rcard__name { font-size: clamp(24px, 2.4vw, 34px); margin-bottom: 14px; } .rcard__specs { gap: 6px 18px; } .rcard__specs li { font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-2); font-weight: 500; } .rcard__specs i { color: var(--lamp-d); } .rcard__desc { font-size: 15.5px; max-width: 46ch; } .rcard__chips li { background: none; border: 1px solid var(--rule); border-radius: var(--radius-pill); } .rcard__foot { border-top: 1px solid var(--rule); padding-top: 22px; align-items: flex-end; } /* The rate, set as type. This is the number a traveller is looking for, so it is the largest thing in the card after the room name. */ .rcard__rate { margin: 0 auto 0 0; } .rcard__rate b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3vw, 42px); line-height: .95; color: var(--ink); } .rcard__rate span { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate-2); } /* ----------------------------------------------------------- chapter --- */ /* A full-bleed dark pause between the light sections. */ .chapter { position: relative; min-height: min(78vh, 720px); display: grid; place-items: center; overflow: hidden; background: var(--ink); } .chapter__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .5; } .chapter__in { position: relative; text-align: center; max-width: 62ch; padding: 90px var(--gutter); } .chapter h2 { color: #fff; font-size: clamp(30px, 4.6vw, 66px); margin-bottom: 22px; } .chapter p { color: rgba(255, 255, 255, .82); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.68; margin: 0 auto 30px; max-width: 52ch; } /* ----------------------------------------------------------- details --- */ .amen { gap: 0; border-top: 1px solid var(--rule); } .amen__item { background: none; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--rule); padding: 17px 4px; } .amen__item i { color: var(--lamp-d); } .band--silt2 .amen__item { background: none; } .faq__item { background: none; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--rule); margin: 0; padding: 0; } .faq__item[open] { box-shadow: none; } .faq__item summary { font-family: var(--display); font-size: clamp(18px, 1.9vw, 23px); padding: 26px 2px; font-weight: 500; } .faq__item summary i { color: var(--cta); } .faq { border-top: 1px solid var(--rule); } .review { background: none; box-shadow: none; padding: 0; border-top: 1px solid var(--rule); padding-top: 26px; } .review__text { font-family: var(--display); font-size: clamp(17px, 1.7vw, 21px); line-height: 1.5; font-weight: 400; color: var(--ink); } .tags li { background: none; box-shadow: none; border: 1px solid var(--rule); } .stay, .room { box-shadow: none; border: 1px solid var(--rule); } .reel__shot, .valley__stop { border-radius: var(--radius); } .hdr__link { border-radius: var(--radius-pill); } /* -- Hero frames, corrected ------------------------------------------------- The first cross-fade gave each frame a window of 6%-34% of the cycle and staggered them with positive delays. Three frames x 28% covers 84% of the loop, so there were stretches with nothing on screen and the hero read as a flat dark panel. Negative delays start every frame mid-cycle instead, and the fade-out of one overlaps the fade-in of the next. Opacity only here; the slow push-in is a separate animation so the two do not fight over `transform`. */ .hero__frame { opacity: 0; transform: scale(1.04); } .hero__frame:first-child { opacity: 1; } .motion-on .hero__frame { opacity: 0; animation: heroFade 21s linear infinite, heroDrift 21s ease-in-out infinite; } .motion-on .hero__frame:nth-child(1) { animation-delay: 0s, 0s; } .motion-on .hero__frame:nth-child(2) { animation-delay: -14s, -14s; } .motion-on .hero__frame:nth-child(3) { animation-delay: -7s, -7s; } @keyframes heroFade { 0%, 28% { opacity: 1; } 38%, 95% { opacity: 0; } 100% { opacity: 1; } } @keyframes heroDrift { 0% { transform: scale(1.008); } 33% { transform: scale(1.07); } 100% { transform: scale(1.008); } } /* The one-off settle on load rides on top of the drift via the wrapper. It must NOT use `forwards`, and it must NOT end on `transform: none`. A filling animation outranks inline styles, so the previous version pinned this wrapper to identity 2.2s after load and silently swallowed every transform site.js wrote to it - the hero pointer parallax and the scroll dolly were both dead on arrival. Ending the keyframe on the resting scale(1.06) with no fill hands the transform back to JS the moment the settle finishes, and lands on the same value the base rule holds, so nothing jumps. */ The name matters: there is already a `heroSettle` further up, used by .hero__frame:first-child. Duplicate @keyframes names do not scope - the last definition in the file wins for every rule that references it - so reusing the name here silently replaced that one's values too. This has its own. */ .motion-on .hero__frames { animation: heroFramesSettle 2.2s var(--ease-out); } @keyframes heroFramesSettle { from { transform: scale(1.14); } to { transform: scale(1.06); } } /* The scrim was stacking .72 horizontal on .58 vertical and burying the photo. */ .hero__scrim { background: linear-gradient(180deg, rgba(16, 31, 25, .5) 0%, rgba(16, 31, 25, .08) 30%, rgba(16, 31, 25, .34) 66%, rgba(16, 31, 25, .78) 100%), linear-gradient(90deg, rgba(16, 31, 25, .62) 0%, rgba(16, 31, 25, .22) 48%, rgba(16, 31, 25, 0) 80%); } /* -- Contrast corrections --------------------------------------------------- Both of these only showed up against the brighter frames: a 50% image on a dark ground is still bright enough to lose white text, and the transparent header sits over whatever the hero happens to be showing. */ /* Chapter: give the copy its own scrim rather than relying on image opacity. */ .chapter__bg { opacity: .62; z-index: 0; } .chapter::after { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(16, 31, 25, .52) 0%, rgba(16, 31, 25, .8) 100%); } .chapter__in { z-index: 2; } .chapter p { color: rgba(255, 255, 255, .9); } /* Header over photography: the links had no scrim of their own. */ .hdr:not(.is-stuck):not(.is-solid) .hdr__link, .hdr:not(.is-stuck):not(.is-solid) .hdr__brand { text-shadow: 0 1px 10px rgba(16, 31, 25, .55); } /* The fact list lives in a 340px aside; two columns left the values wrapping after two words. Label above value uses the width it actually has. */ .facts__row { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 14px 0; } .facts__row dd { font-size: 16px; } /* The drawn rule under emphasised clauses was the old editorial signature. The amber alone carries the emphasis now, and two accessories on one heading is one too many - especially where the clause wraps onto a second line. */ .t-em { background-image: none; animation: none; } html:not(.motion-on) .t-em { background-size: 0 0; } /* -- Inner-page banner ------------------------------------------------------ The banner still carried the pre-palette ink (19,26,21) and a purely vertical scrim, so on the bright building photograph the subtitle sat on the lightest part of the frame. It gets the hero's treatment: current ink, a horizontal pass that darkens the side the type actually lives on, and a slow settle so an inner page opens with the same composure as the homepage. */ .banner { background: var(--ink); } .banner::after { background: linear-gradient(180deg, rgba(16, 31, 25, .66) 0%, rgba(16, 31, 25, .38) 44%, rgba(16, 31, 25, .8) 100%), linear-gradient(90deg, rgba(16, 31, 25, .74) 0%, rgba(16, 31, 25, .38) 48%, rgba(16, 31, 25, .04) 86%); } .banner__media img { transform: scale(1.04); } .motion-on .banner__media { animation: bannerSettle 2.6s var(--ease-out) forwards; } @keyframes bannerSettle { from { transform: scale(1.05); } to { transform: none; } } .banner__crumb { color: rgba(255, 255, 255, .62); } .banner h1 { text-shadow: 0 4px 34px rgba(16, 31, 25, .42); } .banner__sub { color: rgba(255, 255, 255, .9); max-width: 52ch; margin-top: 16px; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.62; text-shadow: 0 2px 20px rgba(16, 31, 25, .5); } /* The label above the title was reading as a chip; on inner pages it should be the same hairline eyebrow the homepage openers use. */ .banner .t-label { display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; border-radius: 0; backdrop-filter: none; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .82); } /* Inner pages arrive in the same order as the homepage: eyebrow, title, copy. */ .motion-on .banner__inner > * { opacity: 0; transform: translateY(20px); animation: heroIn .95s var(--ease-out) forwards; } .motion-on .banner__inner > *:nth-child(1) { animation-delay: .1s; } .motion-on .banner__inner > *:nth-child(2) { animation-delay: .2s; } .motion-on .banner__inner > *:nth-child(3) { animation-delay: .3s; } .motion-on .banner__inner > *:nth-child(4) { animation-delay: .4s; } /* -- Eyebrow ---------------------------------------------------------------- .t-label does two jobs in this markup: it opens a section, and it labels a field or a table column. Only the first wants the hairline rule - a 34px dash in front of a or in front of "Suits" is noise. So the type and the pill removal are global (the pill was the bug: on the dark CTA, .t-label--snow's translucent background stretched into a full width bar), and the rule itself is added back per eyebrow context. */ .t-label { background: none; border: 0; padding: 0; border-radius: 0; backdrop-filter: none; box-shadow: none; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; } .t-label--snow { background: none; color: rgba(255, 255, 255, .82); } .t-label--lamp { color: var(--lamp-d); } /* The eyebrow contexts: section openers, the page banner, and the two dark conversion blocks that sit outside any .opener. The leading hairline these used to carry is gone - the caps and the letterspacing carry the eyebrow on their own, and the rule read as a stray dash in front of the words. */ .opener .t-label, .band--ink > .shell > .t-label, .enq__head .t-label { display: inline-flex; align-items: center; } .opener .t-label { margin-bottom: 12px; } /* -- Booking widget, properly dressed --------------------------------------- The plaque was a white slab with three raw form controls in it. What made it read as "not a travel site" was the native date chrome: an empty date input paints the browser's own dd-mm-yyyy and calendar glyph. The markup now sends a written prompt instead, and these rules give each field an icon, a hit area and a hover state, so it behaves like a search control rather than a form row. */ .avail__input { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; } .avail__input > i { flex: none; font-size: 15px; color: var(--lamp-d); opacity: .9; } .avail__field input, .avail__field select { width: 100%; min-width: 0; border: 0; background: transparent; padding: 0; font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--ink); cursor: pointer; } /* Empty date field: hide the browser's dd-mm-yyyy and show our prompt over it. Transparent text rather than a ::-webkit- pseudo so Firefox behaves too. */ .avail__field input[type="date"]:not(.has-value) { color: transparent; } .avail__ph { position: absolute; left: 25px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 16px; font-weight: 500; color: var(--slate-2); white-space: nowrap; } .avail__field input[type="date"].has-value ~ .avail__ph { display: none; } /* The whole field opens the picker, not just a 16px glyph in the corner. */ .avail__field input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; } .avail__field input[type="date"]::-webkit-inner-spin-button, .avail__field input[type="date"]::-webkit-clear-button { display: none; } /* Our own chevron; the platform one sits too far right and looks like a form. */ .avail__field select { appearance: none; -webkit-appearance: none; padding-right: 20px; } .avail__field--guests .avail__input::after { content: ''; position: absolute; right: 2px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-right: 1.5px solid var(--slate-2); border-bottom: 1.5px solid var(--slate-2); transform: rotate(45deg); pointer-events: none; } /* A field is a target: say so on hover. */ .avail__field { border-radius: var(--radius); transition: background .2s var(--ease-out); } .avail__field:hover { background: var(--silt); } .avail__field:focus-within { background: var(--silt); } /* -- Depth ------------------------------------------------------------------ The 3D stage came out with the redesign and the page went flat with it. These put the depth back where it belongs on a travel page - in the photography - rather than in a rotating hero nobody can read. The hero frames sit on their own plane and are driven by site.js: the pointer shifts them against the copy, and scrolling dollies them toward the camera. The scale is the overscan that shift needs; without it the parallax would drag the photograph's edge into view. */ .hero__frames { will-change: transform; transform: scale(1.06); } .hero__copy { will-change: transform, opacity; } /* Cards tilt to the pointer. .tilt is the existing engine in site.js - it was only ever missing the class on the markup. */ .rcard.tilt, .stay.tilt, .acard.tilt { will-change: transform; } /* A tilting card needs a shadow to sit in, or it rotates against nothing. */ .rcard.tilt .rcard__media, .acard.tilt .acard__media { box-shadow: 0 18px 44px rgba(16, 31, 25, .16); transition: box-shadow .5s var(--ease-out); } .rcard.tilt:hover .rcard__media, .acard.tilt:hover .acard__media { box-shadow: 0 34px 80px rgba(16, 31, 25, .28); } /* Scroll parallax on the full-bleed photography. Both of these carry overscan so the drift never exposes an edge. */ .chapter__bg { inset: -12% 0; will-change: transform; } /* -- The river chapter, given some depth ------------------------------------ Three effects, deliberately separated by which property they touch so they cannot fight each other: transform - site.js (scroll parallax + data-zoom) background-position - the drift below opacity/translate - the staggered copy That separation is the whole trick. A CSS animation on `transform` would override the inline style site.js writes and silently kill the parallax, which is exactly how the hero lost its depth earlier. Animating background-position instead is also safe from edge exposure: with background-size:cover the image always fills the box, so panning only changes which part is cropped - it can never open a gap. */ .motion-on .chapter__bg { animation: chapterDrift 34s ease-in-out infinite alternate; } @keyframes chapterDrift { from { background-position: 50% 44%; } to { background-position: 50% 56%; } } /* The copy arrives in sequence rather than as one slab. The hidden start state is scoped to .motion-on, which is only set when JS runs and reduced motion is off - so with JS disabled, or motion reduced, the text is simply visible and never depends on an observer firing to be readable. */ .motion-on .chapter__in h2, .motion-on .chapter__in p, .motion-on .chapter__in .btn-line { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } .motion-on .chapter__in.is-in h2, .motion-on .chapter__in.is-in p, .motion-on .chapter__in.is-in .btn-line { opacity: 1; transform: none; } .motion-on .chapter__in.is-in h2 { transition-delay: .06s; } .motion-on .chapter__in.is-in p { transition-delay: .20s; } .motion-on .chapter__in.is-in .btn-line { transition-delay: .34s; } @media (prefers-reduced-motion: reduce) { .motion-on .chapter__bg { animation: none; } } .banner__media { will-change: transform; } @media (prefers-reduced-motion: reduce) { .hero__frames { transform: none; } .chapter__bg { inset: 0; } } /* -- Form alignment, and the phone-first pass ------------------------------- Most of this traffic is on a phone, so these are corrections found at 390px rather than at desktop width. 1. The plaque's icon used to sit inside the value row, which pushed the value about 40px past its own label - the label lined up with the icon instead of with the thing it labels. The icon now sits beside a column holding both, so they share one left edge. */ .avail__field { display: flex; flex-direction: row; align-items: center; gap: 12px; min-width: 0; } .avail__icon { flex: none; font-size: 16px; color: var(--lamp-d); opacity: .9; } .avail__col { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; } .avail__col > label { display: block; } .avail__input { position: relative; display: block; min-width: 0; } .avail__input > input, .avail__input > select { display: block; width: 100%; } /* The prompt now starts at the value's own left edge, not past an icon. */ .avail__ph { left: 0; } /* Chevron belongs to the select, which no longer shares a row with the icon. */ .avail__field--guests .avail__input::after { right: 0; } /* 2. The same written prompt on the two real forms, so a date field looks the same everywhere on the site instead of only in the hero. */ .field__date { position: relative; } .field__date input[type="date"]:not(.has-value) { color: transparent; } .field__ph { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--slate-2); font-size: 15px; } .field__date input[type="date"].has-value ~ .field__ph { display: none; } .field__date input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } /* 3. The phone bar duplicates the hero plaque and sits on top of its button. Held back until the plaque has gone. */ .actionbar { transition: transform .32s var(--ease-out); } @media (max-width: 991px) { .actionbar.is-held { transform: translateY(115%); } } @media (max-width: 700px) { /* 4. The hero facts ran together with a 28px gap and wrapped so a middle dot could start a line. Tighter, and the dot never leads. */ .hero__meta { gap: 4px 14px; font-size: 11.5px; letter-spacing: .1em; } .hero__meta > span + span { padding-left: 15px; } .hero__meta > span + span::before { left: 3px; } /* 5. Touch targets. A 16px font on the inputs is also what stops iOS Safari zooming the page when a field takes focus. */ .avail__field { padding: 13px 14px; } .avail__field input, .avail__field select, .field input, .field select, .field textarea { font-size: 16px; } .avail__go { padding: 16px 24px; font-size: 15px; } /* 6. The plaque overhangs the hero; on a phone that overlap was tight enough to crowd the status line under it. */ .hero__dock { margin-top: 26px; } } /* The label belongs over the value it names, not over the box corner. The inputs inset their text by 15px (12px padding + the 1px border + a hair), so the label takes the same offset and the column reads as one edge. This matches what the hero plaque now does. */ .field > label { padding-left: 15px; } /* -- Single-family corrections ------------------------------------------------ Display and UI are now the same face, so the rules below no longer switch families - they only carry the weight and tracking each context needs. The font-family declarations are kept rather than deleted so that if --display ever diverges from --sans again, these small-text contexts stay on the UI face instead of silently inheriting a display one. */ /* The emphasised clause is no longer italic. On the serif the italic was the point; Inter's italic is a near-oblique that goes limp at 108px and reads as a rendering fault rather than a decision. At this size the amber alone marks the phrase, so it keeps the weight of the roman and only changes colour. */ .hero__copy .hero__title .t-em, .t-em { font-style: normal; font-weight: 700; } /* Card metadata, table headers and small-caps labels stay on the UI face. */ .rcard__specs li, .amen__item, .valley__km, .stay__fact { font-family: var(--sans); } /* Rates read as figures, not as prose: Inter's tabular-ish lining numerals want the same weight and close tracking the headings get. */ .rcard__rate b { font-weight: 700; letter-spacing: -.02em; } /* The brand lockup sets the tone the rest of the type now follows. */ .hdr__word b, .foot__brandtext b { font-family: var(--sans); font-weight: 600; letter-spacing: -.01em; } /* FAQ questions are heading-sized, so they take heading tracking. The pull quote keeps its italic - at 20px Inter's italic reads as a quotation, which is exactly the job, and it is the one place the slant still earns its keep. */ .faq__item summary { font-weight: 600; letter-spacing: -.018em; } .review__text { font-style: italic; font-weight: 500; } /* -- Weightless display rules ------------------------------------------------- These set the display face but never set a weight, so they inherited 400. A serif at 400 still has stroke contrast and reads as deliberate restraint; Inter at 400 in the same slots just reads thin and unfinished next to 700 headings. Each is given the weight its size wants, and the tracking the heading scale would have applied at that size. */ .valley__name { font-weight: 600; letter-spacing: -.022em; } .drawer a.drawer__link { font-weight: 600; letter-spacing: -.024em; } .qa__q { font-weight: 600; letter-spacing: -.018em; } .availdock__label { font-weight: 600; letter-spacing: -.016em; } .perk__title { font-weight: 600; letter-spacing: -.016em; } /* The footer wordmark is the same lockup as the header one and should carry the same weight; at 400 it was the lightest thing on a dark ground. */ .foot__brand b { font-weight: 600; letter-spacing: -.02em; } /* Prices are the other place a serif's weight flattered a light setting. */ .stay__rate b { font-weight: 700; letter-spacing: -.02em; } .room__rate b { font-weight: 700; letter-spacing: -.024em; } /* Block quotes keep the italic but match the pull quote's weight. */ .prose blockquote { font-weight: 500; } /* -- Long-form article rail --------------------------------------------------- On a 12,000px article the sidebar's content ran out after a few hundred pixels and left the whole right-hand column empty. The rail sticks instead, so the contents list and the enquiry card stay with the reader the entire way down. `align-self: start` is not optional: a stretched grid item is already the full height of the row, and sticky inside it never engages. If the rail is ever taller than the screen it scrolls within itself rather than pushing the pinned card out of reach. */ .post__rail { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 124px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } @media (max-width: 991px) { /* Stacked layout - a pinned rail would just cover the article. */ .post__rail { position: static; max-height: none; overflow: visible; } } /* Anchor jumps must clear the fixed header, or the heading lands underneath it. */ .prose h2[id] { scroll-margin-top: 96px; } .post__toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; border-left: 1px solid var(--rule); } .post__toc li { counter-increment: toc; margin: 0; } .post__toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14.5px; line-height: 1.4; color: var(--slate); transition: color .2s var(--ease), border-color .2s var(--ease); } .post__toc a:hover { color: var(--ink); border-left-color: var(--rule); } /* Set by site.js as each section passes the top of the screen. */ .post__toc a.is-here { color: var(--ink); font-weight: 600; border-left-color: var(--lamp); } /* Figures inside editor content. Infographics are wider than the 68ch measure the prose column is set to, so they break out to the full column width and sit on the page background rather than floating unanchored. The caption is the UI face at small size - it is apparatus, not prose. */ .prose figure, .prose .post__fig { margin: 2.2em 0; max-width: none; } .prose figure img, .prose .post__fig img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--rule); } .prose figcaption { margin-top: 12px; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--slate-2); } /* Tables inside editor content. The prose block had no table rules at all, so a table written in a blog post rendered as unpadded columns that ran into each other. Narrow screens get a horizontal scroll on the table itself rather than on the page - a wide table must never make the body scroll. */ .prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 15.5px; display: block; overflow-x: auto; white-space: nowrap; } .prose thead th { text-align: left; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-2); border-bottom: 1px solid var(--ink); padding: 0 22px 10px 0; } .prose tbody td { padding: 13px 22px 13px 0; border-bottom: 1px solid var(--rule); vertical-align: top; } .prose tbody tr:last-child td { border-bottom: 0; } .prose tbody td:first-child { font-weight: 600; color: var(--ink); } /* Above the narrow breakpoint there is room to let long cells wrap instead. */ @media (min-width: 680px) { .prose table { display: table; white-space: normal; } } /* ============================================================================ HOMEPAGE, EXPANDED Sections added from the client's mockup - an eight-item facilities row, a distance table beside the dining block, and a three-column plan-your-stay band. Built in this site's own language rather than the mockup's green template look, which was the direction chosen. ========================================================================= */ /* -- Eight-up facilities row ------------------------------------------------- The four-item version relied on :last-child to drop the trailing divider. With eight items that leaves a stray rule hanging at the end of the first row, so the dividers are addressed by column position instead, and the row count changes with the breakpoint. Descriptions stay visible at every width: almost all of this traffic is on a phone, so hiding them would hide them from nearly everyone. */ .perks--quad { grid-template-columns: repeat(4, minmax(0, 1fr)); } .perks--quad .perk { border-bottom: 1px solid var(--rule); } .perks--quad .perk:nth-child(4n) { border-right: 0; } .perks--quad .perk:nth-last-child(-n+4) { border-bottom: 0; } @media (max-width: 991px) { .perks--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } .perks--quad .perk { padding: 26px 20px 24px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .perks--quad .perk:nth-child(2n) { border-right: 0; } .perks--quad .perk:nth-last-child(-n+2) { border-bottom: 0; } } @media (max-width: 560px) { .perks--quad { grid-template-columns: minmax(0, 1fr); } .perks--quad .perk { padding: 20px 2px; border-right: 0; border-bottom: 1px solid var(--rule); } .perks--quad .perk:last-child { border-bottom: 0; } .perks--quad .perk__icon { margin-bottom: 12px; font-size: 22px; } } /* -- Distance table --------------------------------------------------------- Figures, so they get the lining-numeral treatment and a tabular column that cannot reflow. On a narrow screen it scrolls inside itself rather than pushing the page sideways. */ .dist { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 15.5px; } .dist thead th { text-align: left; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-2); border-bottom: 1px solid var(--ink); padding: 0 16px 10px 0; } .dist tbody td { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; } .dist tbody tr:last-child td { border-bottom: 0; } .dist tbody td:first-child { font-weight: 600; color: var(--ink); } .dist tbody td:nth-child(2) { font-variant-numeric: tabular-nums; white-space: nowrap; } .dist tbody td:last-child { color: var(--slate); white-space: nowrap; } /* On a phone the journey-time column is the widest thing on the page, and nowrap turned that into real horizontal overflow once the entries got longer than "15 min". Let it wrap there; the distance column stays nowrap because "25 km" should never break across lines. */ @media (max-width: 560px) { .dist { font-size: 14.5px; } .dist tbody td:last-child { white-space: normal; } .dist thead th, .dist tbody td { padding-right: 10px; } .dist thead th:last-child, .dist tbody td:last-child { padding-right: 0; } } /* -- Tick list -------------------------------------------------------------- An amber check rather than a bullet: these are things the guest gets, and a list of inclusions should read as confirmations. */ .ticks { list-style: none; padding: 0; margin: 4px 0 18px; } .ticks li { position: relative; padding: 8px 0 8px 30px; font-size: 16px; border-bottom: 1px solid var(--rule-soft); } .ticks li:last-child { border-bottom: 0; } .ticks li::before { content: '\F26E'; /* bootstrap-icons check-lg */ font-family: 'bootstrap-icons'; position: absolute; left: 0; top: 8px; color: var(--lamp-d); font-size: 15px; line-height: 1.5; } /* Small print that qualifies a claim above it. */ .note { font-size: 14.5px; line-height: 1.6; color: var(--slate-2); max-width: 52ch; } /* -- Plan-your-stay columns ------------------------------------------------- */ .plan__head { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -.016em; color: var(--ink); padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--ink); } .plan__list { margin: 0; } .plan__list > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); } .plan__list > div:last-child { border-bottom: 0; } .plan__list dt { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lamp-d); padding-top: 3px; } .plan__list dd { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--slate); } .plan__list dd b { color: var(--ink); font-weight: 700; } .plan__who { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; } .plan__who li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; color: var(--ink); } .plan__who i { color: var(--lamp-d); font-size: 16px; flex: none; } @media (max-width: 700px) { /* The label column is set for "Nov - Mar"; below this width it steals too much from the definition, so the pair stacks instead. */ .plan__list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } .plan__list dt { padding-top: 0; } } /* -- Long-form homepage copy ------------------------------------------------- The brief's keyword-bearing sections, set as two columns of prose. Multi-column rather than a two-cell grid: a grid puts three fixed subsections in each column, and because they are different lengths one column ends well short of the other and leaves a visible void. Multi-column balances the two heights itself, so the block ends level whatever the copy does. break-inside keeps a heading with its paragraph. */ .longform { columns: 2; column-gap: clamp(28px, 4vw, 60px); } .lf__item { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; padding-bottom: 26px; } .longform h3 { font-family: var(--display); font-size: clamp(18px, 1.7vw, 21px); font-weight: 700; letter-spacing: -.016em; color: var(--ink); margin: 0 0 10px; padding-top: 22px; border-top: 1px solid var(--rule); } /* No rule above the very first one - the section opener already sits there. The item that lands at the top of the second column keeps its rule, which reads as a matching cap rather than an inconsistency. */ .lf__item:first-child h3 { padding-top: 0; border-top: 0; } .longform p { font-size: 16px; line-height: 1.72; color: var(--slate); margin: 0; max-width: 62ch; } @media (max-width: 860px) { .longform { columns: 1; } .lf__item:first-child h3 { padding-top: 0; border-top: 0; } } /* -- Places to visit -------------------------------------------------------- Eight cards on a four-across grid. The distance sits above the name rather than below it because "how far" is the first thing a reader wants here - the table above already taught them to scan for it. */ .places { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .place { display: flex; flex-direction: column; background: var(--snow, #fbfaf7); padding: 26px 24px 24px; text-decoration: none; } .place__km { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--lamp); margin-bottom: 12px; } .place__name { font-family: var(--display); font-size: clamp(17px, 1.5vw, 19px); font-weight: 700; letter-spacing: -.014em; color: var(--ink); margin: 0 0 9px; } .place p { font-size: 14.5px; line-height: 1.66; color: var(--slate); margin: 0 0 14px; } /* Pushes the link to the card's foot so the links line up across a row even though the descriptions are different lengths. */ .place__more { margin-top: auto; font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--lamp); padding-bottom: 3px; align-self: flex-start; transition: color .2s var(--ease-out); } .place__more i { font-size: .9em; transition: transform .25s var(--ease-out); display: inline-block; } .place__more:hover { color: var(--lamp); } .place__more:hover i { transform: translateX(3px); } /* The last card is the whole card a link, so it gets the hover instead. */ .place--link { background: var(--ink); } .place--link .place__km { color: var(--lamp); } .place--link .place__name { color: #fff; } .place--link p { color: rgba(255, 255, 255, .72); } .place--link .place__more { color: #fff; } .place--link:hover .place__more i { transform: translateX(3px); } @media (max-width: 991px) { .places { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .places { grid-template-columns: minmax(0, 1fr); } .place { padding: 22px 18px 20px; } } /* -- Numbered checklist ----------------------------------------------------- Things to verify before booking anywhere in the valley. Numbered rather than ticked because a tick implies "you get this" - these are questions to ask, not features we are claiming. */ .checks { list-style: none; counter-reset: chk; padding: 0; margin: 4px 0 0; } .checks li { counter-increment: chk; position: relative; padding: 10px 0 10px 38px; font-size: 15.5px; line-height: 1.55; color: var(--ink); border-bottom: 1px solid var(--rule-soft); } .checks li:last-child { border-bottom: 0; } .checks li::before { content: counter(chk, decimal-leading-zero); position: absolute; left: 0; top: 11px; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--lamp); font-variant-numeric: tabular-nums; } /* A lead-in above a list: the .note box treatment would make two tinted panels sit directly above two lists and flatten the whole section. */ .note--plain { background: none; border: 0; padding: 0; margin: 10px 0 18px; font-size: 15.5px; line-height: 1.7; color: var(--slate); } @media (max-width: 860px) { /* The two lists are independent, so stacking them is lossless. */ .grid--2 { grid-template-columns: minmax(0, 1fr); } } /* -- Homepage intro --------------------------------------------------------- The page's h1 and opening paragraphs, directly under the banner. Asymmetric rather than centred: the heading needs width to sit at display size, and the paragraphs need to stop well short of the full shell to stay readable. */ .intro { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 64px); align-items: start; } .intro__head { margin: 0; text-wrap: balance; } .intro__body p { font-size: clamp(16.5px, 1.35vw, 18.5px); line-height: 1.72; color: var(--slate); margin: 0 0 18px; max-width: 60ch; } .intro__body p:last-child { margin-bottom: 0; } /* Bold is doing keyword emphasis here, not shouting - keep it the ink colour and let weight alone carry it. */ .intro__body b { font-weight: 600; color: var(--ink); } @media (max-width: 860px) { .intro { grid-template-columns: minmax(0, 1fr); gap: 18px; } } /* Facts under the intro heading. The heading column is naturally shorter than the copy beside it; these fill that space with the three numbers every enquiry asks for rather than leaving a hole or padding the prose. */ .intro__facts { margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; max-width: 30ch; } .intro__facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-top: 1px solid var(--rule); } .intro__facts > div:last-child { border-bottom: 1px solid var(--rule); } .intro__facts dt { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--slate-2); } .intro__facts dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; } @media (max-width: 860px) { .intro__facts { max-width: none; margin-top: 20px; } }