/* ========================================================================== Room & Co. Hotels — design system Palette + type sampled from the brand mood board. ========================================================================== */ /* --- Fonts (self-hosted: no third-party requests, GDPR-friendly) --------- */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('/fonts/cormorant-garamond-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('/fonts/cormorant-garamond-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('/fonts/jost-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('/fonts/jost-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- Tokens -------------------------------------------------------------- */ :root { --ink: #141e19; /* deep green-black — sampled from the board */ --ink-2: #1c2a24; /* lifted surface on dark */ --ink-3: #2a3a33; /* hairline on dark */ --cream: #efeae2; /* page ground */ --cream-2: #e6ded3; /* warm alternate band */ --cream-3: #d8cec1; /* hairline on cream */ --brass: #a98d62; /* key-fob numerals */ --clay: #6b5e4e; /* leather / secondary */ --muted: #7a7469; /* body-secondary on cream */ --muted-dark: #a9a49a; /* body-secondary on dark */ --serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif; --sans: 'Jost', 'Futura', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif; --shell: 1320px; --gutter: clamp(1.25rem, 5vw, 4.5rem); --section: clamp(4.5rem, 11vw, 9.5rem); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* --- Reset --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body { background: var(--cream); color: var(--ink); font-family: var(--serif); font-size: clamp(1.16rem, 0.4vw + 1.07rem, 1.3rem); line-height: 1.75; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* `clip`, not `hidden`: `overflow-x: hidden` computes overflow-y to `auto`, which makes its own scroll container — that stops window scroll events firing and can break the sticky header. `clip` contains stray horizontal overflow without creating a scroll box. */ overflow-x: clip; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; } button, input, textarea, select { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 1px; } /* --- Layout -------------------------------------------------------------- */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } .shell--narrow { max-width: 800px; } .shell--mid { max-width: 1040px; } .section { padding-block: var(--section); } .section--tight { padding-block: clamp(3rem, 7vw, 5.5rem); } .section--dark { background: var(--ink); color: var(--cream); } .section--warm { background: var(--cream-2); } .section--dark .eyebrow { color: var(--brass); } .section--dark .lede, .section--dark .prose { color: var(--muted-dark); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: var(--cream); padding: 0.85rem 1.4rem; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; } .skip-link:focus { left: 0.5rem; top: 0.5rem; } /* --- Type ---------------------------------------------------------------- */ .eyebrow { font-family: var(--sans); font-size: clamp(0.63rem, 0.2vw + 0.6rem, 0.72rem); font-weight: 400; letter-spacing: 0.26em; text-transform: uppercase; color: var(--clay); line-height: 1.4; margin: 0; } .eyebrow--rule { display: flex; align-items: center; gap: 1rem; } .eyebrow--rule::after { content: ''; flex: 1; height: 1px; background: var(--cream-3); } .section--dark .eyebrow--rule::after { background: var(--ink-3); } .display { font-family: var(--serif); font-weight: 300; line-height: 1.02; letter-spacing: 0.01em; text-wrap: balance; } .display--xl { font-size: clamp(3.1rem, 10.5vw, 8.5rem); } .display--l { font-size: clamp(2.5rem, 6.2vw, 5rem); } .display--m { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.08; } .display--s { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.14; } .lede { font-size: clamp(1.28rem, 0.9vw + 1.05rem, 1.75rem); line-height: 1.55; font-weight: 300; color: var(--ink); text-wrap: pretty; max-width: 34ch; } .lede--wide { max-width: 46ch; } .prose { max-width: 62ch; } .prose p + p { margin-top: 1.15em; } .prose a { text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; } .caps { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 400; } .rule-short { width: 46px; height: 1px; background: currentColor; opacity: 0.5; margin: 0; } /* --- Wordmark ------------------------------------------------------------ */ .wordmark { display: inline-flex; flex-direction: column; align-items: center; gap: 0.34em; text-decoration: none; line-height: 1; } .wordmark__name { font-family: var(--serif); font-weight: 400; letter-spacing: 0.055em; text-transform: uppercase; white-space: nowrap; line-height: 1; } .wordmark__rule { width: 1.55em; height: 1px; background: currentColor; opacity: 0.85; } .wordmark__sub { font-family: var(--sans); font-weight: 400; letter-spacing: 0.42em; text-transform: uppercase; text-indent: 0.42em; line-height: 1; } .wordmark--sm .wordmark__name { font-size: 1.16rem; } .wordmark--sm .wordmark__sub { font-size: 0.46rem; } .wordmark--md .wordmark__name { font-size: 2rem; } .wordmark--md .wordmark__sub { font-size: 0.62rem; } .wordmark--lg .wordmark__name { font-size: clamp(2.6rem, 7vw, 5.2rem); } .wordmark--lg .wordmark__sub { font-size: clamp(0.66rem, 1.3vw, 1rem); } /* --- Buttons / links ----------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.7em; font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 400; padding: 1.05em 2.1em; border: 1px solid var(--ink); background: var(--ink); color: var(--cream); text-decoration: none; cursor: pointer; transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease); } .btn:hover { background: transparent; color: var(--ink); } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--cream); } .btn--light { background: var(--cream); border-color: var(--cream); color: var(--ink); } .btn--light:hover { background: transparent; color: var(--cream); } .btn--ghost-light { background: transparent; border-color: var(--cream); color: var(--cream); } .btn--ghost-light:hover { background: var(--cream); color: var(--ink); } .btn[disabled] { opacity: 0.45; pointer-events: none; } .link-caps { display: inline-flex; align-items: center; gap: 0.65em; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; padding-bottom: 0.4em; border-bottom: 1px solid currentColor; transition: gap 0.35s var(--ease), opacity 0.35s var(--ease); } .link-caps:hover { gap: 1.1em; opacity: 0.65; } .link-caps__arrow { transition: transform 0.35s var(--ease); } /* --- Header -------------------------------------------------------------- */ .header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--cream) 92%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--cream-3); transition: background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease); } .header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; min-height: 78px; } .header__nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.4rem); } .header__nav--end { justify-content: flex-end; } .nav-link { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; position: relative; padding-block: 0.35rem; white-space: nowrap; transition: opacity 0.3s var(--ease); } .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); } .nav-link:hover::after, .nav-link[aria-current='page']::after { transform: scaleX(1); } .nav-link[aria-current='page'] { opacity: 1; } .header__brand { justify-self: center; text-decoration: none; color: inherit; } .header__cta { padding: 0.85em 1.6em; font-size: 0.68rem; } /* Transparent header over a dark hero */ .header--over { background: transparent; border-color: transparent; color: var(--cream); } .header--over .btn--ghost { border-color: var(--cream); color: var(--cream); } .header--over .btn--ghost:hover { background: var(--cream); color: var(--ink); } .header.is-stuck { background: color-mix(in srgb, var(--cream) 94%, transparent); border-color: var(--cream-3); color: var(--ink); } .header.is-stuck .btn--ghost { border-color: var(--ink); color: var(--ink); } .header.is-stuck .btn--ghost:hover { background: var(--ink); color: var(--cream); } /* Mobile nav */ .nav-toggle { display: none; background: none; border: 0; padding: 0.5rem; cursor: pointer; align-items: center; gap: 0.6rem; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; } .nav-toggle__bars { display: block; width: 22px; height: 9px; position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform 0.35s var(--ease); } .nav-toggle__bars::before { top: 0; } .nav-toggle__bars::after { bottom: 0; } .nav-toggle[aria-expanded='true'] .nav-toggle__bars::before { transform: translateY(4px) rotate(45deg); } .nav-toggle[aria-expanded='true'] .nav-toggle__bars::after { transform: translateY(-4px) rotate(-45deg); } .mobile-nav { position: fixed; inset: 0; z-index: 99; background: var(--ink); color: var(--cream); padding: 6.5rem var(--gutter) 3rem; display: flex; flex-direction: column; gap: 0.4rem; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-1.5rem); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s; } .mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; } .mobile-nav a { font-family: var(--serif); font-size: clamp(1.9rem, 8vw, 2.9rem); font-weight: 300; text-decoration: none; padding-block: 0.42rem; border-bottom: 1px solid var(--ink-3); } .mobile-nav__foot { margin-top: auto; padding-top: 2.5rem; } @media (max-width: 900px) { .header__nav { display: none; } .nav-toggle { display: inline-flex; } .header__inner { grid-template-columns: 1fr auto 1fr; min-height: 66px; } .header__cta { display: none; } .header__nav--end { display: flex; } .header__nav--end .nav-link { display: none; } } /* --- Hero ---------------------------------------------------------------- */ .hero { position: relative; min-height: min(94svh, 900px); display: grid; align-items: end; background: var(--ink); color: var(--cream); margin-top: -78px; padding-top: 78px; overflow: hidden; } @media (max-width: 900px) { .hero { margin-top: -66px; padding-top: 66px; } } .hero__media { position: absolute; inset: 0; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero__media::after { content: ''; position: absolute; inset: 0; /* Darken left-of-centre so the headline sits on a clean ground, and keep the right of the photograph readable. */ background: linear-gradient(to right, rgba(15,22,19,0.86) 0%, rgba(15,22,19,0.58) 40%, rgba(15,22,19,0.22) 78%), linear-gradient(to top, rgba(15,22,19,0.9) 0%, rgba(15,22,19,0.34) 52%, rgba(15,22,19,0.6) 100%); } @media (max-width: 700px) { .hero__media::after { background: linear-gradient(to top, rgba(15,22,19,0.88) 0%, rgba(15,22,19,0.42) 58%, rgba(15,22,19,0.5) 100%); } } .hero__body { position: relative; padding-block: clamp(3rem, 8vw, 6rem); display: grid; gap: clamp(1.5rem, 3vw, 2.4rem); } .hero__title { color: var(--cream); } .hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.2rem, 3vw, 2.5rem); } .hero__scroll { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); display: grid; justify-items: center; gap: 0.7rem; font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream); opacity: 0.75; text-decoration: none; } .hero__scroll svg { animation: nudge 2.6s var(--ease) infinite; } /* On phones the hero copy stacks and reaches the bottom of the viewport, where the cue would sit on top of the button. */ @media (max-width: 760px) { .hero__scroll { display: none; } } @keyframes nudge { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(6px); opacity: 1; } } /* Page hero (interior pages) */ .page-hero { background: var(--ink); color: var(--cream); margin-top: -78px; padding-top: calc(78px + clamp(4.5rem, 10vw, 8rem)); padding-bottom: clamp(3.5rem, 8vw, 6.5rem); position: relative; overflow: hidden; } @media (max-width: 900px) { .page-hero { margin-top: -66px; padding-top: calc(66px + clamp(4rem, 10vw, 7rem)); } } .page-hero__inner { display: grid; gap: clamp(1.2rem, 2.5vw, 1.9rem); position: relative; } .page-hero .eyebrow { color: var(--brass); } .page-hero .lede { color: var(--muted-dark); } /* --- Statement ----------------------------------------------------------- */ .statement { display: grid; gap: clamp(1.6rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .statement--split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 6rem); } } .statement__title { text-wrap: balance; } /* --- Hotel cards --------------------------------------------------------- */ .hotels { display: grid; gap: clamp(2.5rem, 5vw, 4rem); } @media (min-width: 820px) { .hotels--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .hotel-card { display: grid; gap: 1.5rem; text-decoration: none; color: inherit; } .hotel-card__media { position: relative; overflow: hidden; background: var(--ink); aspect-ratio: 4 / 3; } .hotel-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter 0.7s var(--ease); } .hotel-card:hover .hotel-card__media img { transform: scale(1.045); } .hotel-card__badge { position: absolute; top: 1.1rem; left: 1.1rem; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.5em 0.95em; } .hotel-card__body { display: grid; gap: 0.75rem; } .hotel-card__name { font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; } .hotel-card__loc { color: var(--clay); } .hotel-card__desc { color: var(--muted); max-width: 46ch; } .section--dark .hotel-card__desc { color: var(--muted-dark); } .section--dark .hotel-card__loc { color: var(--brass); } .hotel-card__more { margin-top: 0.35rem; } /* Placeholder art for hotels without photography yet */ .plate { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.75rem 1.5rem 3.25rem; /* keep centred content clear of the note */ background: radial-gradient(120% 90% at 30% 15%, rgba(169,141,98,0.22), transparent 62%), linear-gradient(155deg, #1d2a24 0%, #141e19 48%, #0f1714 100%); color: var(--cream); overflow: hidden; } .plate::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(239,234,226,0.05) 0 1px, transparent 1px 74px), repeating-linear-gradient(0deg, rgba(239,234,226,0.05) 0 1px, transparent 1px 74px); mask-image: radial-gradient(80% 70% at 50% 45%, #000 25%, transparent 100%); } .plate__mark { position: relative; text-align: center; opacity: 0.92; } .plate__note { position: absolute; bottom: 0.9rem; right: 1rem; font-family: var(--sans); font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(239,234,226,0.4); } @media (max-width: 560px) { .plate__note { bottom: 0.65rem; right: 0.75rem; font-size: 0.48rem; letter-spacing: 0.14em; } } /* A short, wide plate needs more height on a phone or its content collides. */ .feature__media--wide { aspect-ratio: 16 / 7; } @media (max-width: 820px) { .feature__media--wide { aspect-ratio: 5 / 4; } } /* --- Approach (circular icons) ------------------------------------------- */ .approach { display: grid; gap: clamp(2.2rem, 4vw, 3.2rem); } @media (min-width: 760px) { .approach { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .approach__item { display: grid; gap: 1.15rem; align-content: start; } .approach__icon { width: 68px; height: 68px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; opacity: 0.9; } .approach__icon svg { width: 30px; height: 30px; } .approach__title { letter-spacing: 0.22em; } .approach__text { color: var(--muted); font-size: 1.12rem; line-height: 1.65; } .section--dark .approach__text { color: var(--muted-dark); } /* --- Feature (alternating image + text) ---------------------------------- */ .feature { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } @media (min-width: 900px) { .feature { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature--flip .feature__media { order: 2; } } .feature__media { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: var(--ink); } .feature__media img { width: 100%; height: 100%; object-fit: cover; } .feature__body { display: grid; gap: 1.35rem; align-content: center; } /* --- Applications strip -------------------------------------------------- */ .strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--cream-3); } @media (min-width: 760px) { .strip { grid-template-columns: repeat(4, 1fr); } } .strip__item { background: var(--cream); } .strip__item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; } .strip__cap { padding: 1rem 1.1rem 1.25rem; font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--clay); } /* --- Quotes -------------------------------------------------------------- */ .quotes { display: grid; gap: clamp(2rem, 4vw, 3rem); } @media (min-width: 860px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .quote { display: grid; gap: 1.2rem; align-content: start; } .quote__text { font-size: 1.2rem; line-height: 1.6; font-weight: 300; } .quote__by { color: var(--brass); letter-spacing: 0.22em; } /* --- Trio (utility links) ------------------------------------------------ */ .trio { display: grid; gap: 1px; background: var(--ink-3); } @media (min-width: 780px) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .trio__item { background: var(--ink); color: var(--cream); padding: clamp(2.2rem, 4vw, 3.2rem); display: grid; gap: 1rem; align-content: start; text-decoration: none; transition: background 0.45s var(--ease); } .trio__item:hover { background: var(--ink-2); } .trio__text { color: var(--muted-dark); font-size: 1.1rem; } /* --- Facts / spec list --------------------------------------------------- */ .facts { display: grid; gap: 0; border-top: 1px solid var(--cream-3); } .section--dark .facts { border-color: var(--ink-3); } .fact { display: grid; gap: 0.35rem 2rem; padding-block: 1.15rem; border-bottom: 1px solid var(--cream-3); } .section--dark .fact { border-color: var(--ink-3); } @media (min-width: 640px) { .fact { grid-template-columns: 190px minmax(0, 1fr); align-items: baseline; } } .fact__k { color: var(--clay); } .section--dark .fact__k { color: var(--brass); } .fact__v { font-size: 1.14rem; } /* --- Neighbourhood list -------------------------------------------------- */ .places { display: grid; gap: 0; } .place { display: grid; gap: 0.3rem; padding-block: 1.3rem; border-bottom: 1px solid var(--cream-3); } .section--dark .place { border-color: var(--ink-3); } @media (min-width: 700px) { .place { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0.3rem 2rem; } } .place__name { font-size: 1.32rem; font-weight: 400; } .place__note { color: var(--muted); font-size: 1.05rem; grid-column: 1 / -1; max-width: 62ch; } .section--dark .place__note { color: var(--muted-dark); } .place__dist { color: var(--clay); white-space: nowrap; } .section--dark .place__dist { color: var(--brass); } /* --- Journal ------------------------------------------------------------- */ .journal { display: grid; gap: clamp(2rem, 4vw, 3rem); } @media (min-width: 800px) { .journal { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .entry { display: grid; gap: 0.9rem; align-content: start; text-decoration: none; color: inherit; } .entry__meta { color: var(--clay); } .entry__title { font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.2; font-weight: 400; } .entry__excerpt { color: var(--muted); font-size: 1.08rem; } /* --- Newsletter / forms -------------------------------------------------- */ .form { display: grid; gap: 1.1rem; max-width: 620px; } .form--wide { max-width: 100%; } .field { display: grid; gap: 0.5rem; } .field__label { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--clay); } .section--dark .field__label { color: var(--brass); } .field input, .field textarea, .field select { background: transparent; border: 0; border-bottom: 1px solid var(--cream-3); padding: 0.75rem 0 0.7rem; font-family: var(--serif); font-size: 1.1rem; border-radius: 0; transition: border-color 0.35s var(--ease); } .section--dark .field input, .section--dark .field textarea, .section--dark .field select { border-color: var(--ink-3); color: var(--cream); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brass); } .field textarea { resize: vertical; min-height: 110px; } .field select { -webkit-appearance: none; appearance: none; cursor: pointer; } .section--dark .field select option { background: var(--ink); color: var(--cream); } .form__row { display: grid; gap: 1.1rem; } @media (min-width: 640px) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 0.6rem; } .form__note { font-family: var(--sans); font-size: 0.74rem; color: var(--muted); line-height: 1.6; max-width: 46ch; } .section--dark .form__note { color: var(--muted-dark); } .form__status { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.04em; min-height: 1.4em; } .form__status[data-state='ok'] { color: var(--brass); } .form__status[data-state='error'] { color: #c0674f; } /* honeypot */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* --- Footer -------------------------------------------------------------- */ .footer { background: var(--ink); color: var(--cream); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem; } .footer__top { display: grid; gap: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 3.5rem); border-bottom: 1px solid var(--ink-3); } @media (min-width: 900px) { .footer__top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); } } .footer__cols { display: grid; gap: 2.2rem; } @media (min-width: 560px) { .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .footer__col { display: grid; gap: 0.85rem; align-content: start; } .footer__col h3 { font: inherit; } .footer__col .eyebrow { color: var(--brass); margin-bottom: 0.35rem; } .footer__col a { font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.04em; text-decoration: none; color: var(--muted-dark); transition: color 0.3s var(--ease); } .footer__col a:hover { color: var(--cream); } .footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; padding-top: 2.2rem; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--muted-dark); } .footer__bottom a { text-decoration: none; } .footer__bottom a:hover { color: var(--cream); } .footer__legal { display: flex; flex-wrap: wrap; gap: 1.4rem; } /* --- Booking bar --------------------------------------------------------- */ .booking { background: var(--cream-2); border-block: 1px solid var(--cream-3); padding-block: clamp(1.6rem, 3vw, 2.2rem); } .booking__form { display: grid; gap: 1.3rem; align-items: end; } @media (min-width: 900px) { .booking__form { grid-template-columns: 1.3fr 1fr 1fr 0.8fr auto; gap: 2rem; } } /* --- Misc ---------------------------------------------------------------- */ .stack { display: grid; gap: clamp(1.1rem, 2vw, 1.6rem); align-content: start; } .stack--lg { gap: clamp(1.8rem, 3.5vw, 2.8rem); } .cluster { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; } .center { text-align: center; justify-items: center; } .center .lede, .center .prose { margin-inline: auto; } .mt-auto { margin-top: auto; } .seal { width: clamp(112px, 15vw, 158px); height: auto; } /* Reveal on scroll. The safety animation reveals everything after 4s, so a failed or blocked app.js can never leave the page looking empty. app.js sets .js-reveal on the moment it runs, which cancels the safety net and hands control to the observer — otherwise the timer would pre-reveal everything below the fold and there would be nothing left to animate. */ .reveal { opacity: 0; transform: translateY(22px); animation: reveal-safety 1ms linear 4s forwards; } .js-reveal .reveal { animation: none; } @keyframes reveal-safety { to { opacity: 1; transform: none; } } .reveal.is-in { animation: none; opacity: 1; transform: none; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; animation: none; } } .no-js .reveal { opacity: 1; transform: none; animation: none; }