/* ========================================================= SIHAM LAKE HOME — quiet luxury / Italian editorial Palette: forest #13361C · black #161616 · olive #212717 brown #826343 · gold #CC9A48 · cream #FEF9F1 Motion tiers (set on before paint): .m-full desktop, motion allowed → pinned / horizontal / giant type .m-lite mobile, motion allowed → vertical storytelling, shorter pins .m-none reduced motion / no JS → static, all content visible ========================================================= */ :root { --forest: #13361C; --black: #161616; --olive: #212717; --brown: #826343; --gold: #CC9A48; --cream: #FEF9F1; --serif: "Billie Eilish", "Times New Roman", serif; --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --gutter: clamp(20px, 4vw, 64px); --nav-h: 76px; --ease: cubic-bezier(.22, .7, .1, 1); --nav-fg: var(--cream); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/Manrope-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: "Manrope"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/Manrope-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: "Billie Eilish"; src: url("../fonts/BillieEilish-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { background: var(--black); -webkit-text-size-adjust: 100%; scroll-behavior: auto; overflow-anchor: none; } /* while the preload sequence shows, the page is physically unable to scroll — by any mechanism (a real scroll, GSAP recalculating a pinned section, browser scroll restoration, anything) — so nothing can ever be mistaken for the user asking to leave it. The first genuine gesture lifts this (see main.js). */ html.intro-lock, html.intro-lock body { overflow: hidden !important; height: 100%; } body { font-family: var(--sans); font-size: 1rem; line-height: 1.65; font-weight: 400; color: var(--black); background: var(--cream); overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } address { font-style: normal; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--cream); color: var(--black); padding: .7em 1em; font-size: .8rem; transition: top .2s; } .skip:focus { top: 12px; } /* ---------- type ---------- */ .display { font-family: var(--serif); font-weight: 400; font-size: clamp(2.7rem, 6.1vw, 6.8rem); line-height: 1.02; letter-spacing: -.006em; } .display em, .final__title em, .hero__title em, .sc-title em, .hero__reserve-title em { font-style: italic; } .lede { font-size: clamp(1rem, 1.1vw, 1.12rem); font-weight: 300; max-width: 40ch; opacity: .85; } .lede--strong { opacity: 1; font-weight: 400; } /* word-split reveal (see splitWords in main.js) */ .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .06em .18em; margin: -.1em -.06em -.18em; } .wi { display: inline-block; } .m-full .split, .m-lite .split { visibility: hidden; } .m-full .reveal-fade, .m-lite .reveal-fade { opacity: 0; } .frame { overflow: hidden; background: var(--olive); position: relative; } .frame img { width: 100%; height: 100%; object-fit: cover; } /* ---------- CTA ---------- */ .cta, .link-cta { display: inline-flex; align-items: center; gap: 1em; font: 500 .7rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: inherit; cursor: pointer; } .cta { padding: 1.15em 1.7em; border: 1px solid currentColor; background: transparent; transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); } .cta:hover { background: var(--gold); border-color: var(--gold); color: var(--black); } .cta--solid { background: var(--forest); border-color: var(--forest); color: var(--cream); } .cta--solid:hover { background: var(--gold); border-color: var(--gold); color: var(--black); } .cta--big { padding: 1.5em 2.3em; font-size: .8rem; } .cta__arrow { display: inline-block; width: 1.9em; height: 1px; background: currentColor; position: relative; transition: width .4s var(--ease); } .cta__arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); } .cta:hover .cta__arrow, .link-cta:hover .cta__arrow { width: 2.7em; } .link-cta { margin-top: 2.2rem; padding-bottom: .9em; border-bottom: 1px solid rgba(254, 249, 241, .35); transition: border-color .3s; } .link-cta:hover { border-color: var(--gold); } .link-cta--dark { border-bottom-color: rgba(22, 22, 22, .3); } /* ---------- NAV ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--gutter); color: var(--nav-fg); background: var(--nav-bg, transparent); transition: color .45s var(--ease), background-color .25s linear; } .nav__logo { position: relative; display: block; width: clamp(104px, 9vw, 138px); opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); } .nav__logo .logo { width: 100%; height: auto; transition: opacity .45s var(--ease); } .nav__logo .logo--dark { position: absolute; inset: 0; opacity: 0; } body[data-nav="on-light"] .nav__logo .logo--light { opacity: 0; } body[data-nav="on-light"] .nav__logo .logo--dark { opacity: 1; } body[data-nav="on-light"] { --nav-fg: var(--black); } body:not(.is-intro) .nav__logo { opacity: 1; pointer-events: auto; } /* the rest of the nav (links, language, reserve button, burger) — hidden through the preloader, revealed together with the docked logo the moment the first phrase takes over */ .nav__links, .nav__right { opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); } body:not(.is-intro) .nav__links, body:not(.is-intro) .nav__right { opacity: 1; pointer-events: auto; } .nav__links { display: flex; gap: clamp(20px, 2.6vw, 44px); } .nav__links a { font-size: .66rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; text-decoration: none; position: relative; padding: .5em 0; } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); } .nav__links a:hover::after { transform: scaleX(1); } .nav__right { display: flex; align-items: center; justify-content: flex-end; gap: clamp(14px, 1.8vw, 28px); } .lang { display: flex; align-items: center; gap: .35em; font-size: .68rem; font-weight: 600; letter-spacing: .18em; } .lang button { padding: .4em .1em; opacity: .55; transition: opacity .25s; } .lang button[aria-pressed="true"], .lang button:hover { opacity: 1; } .lang span { opacity: .35; } .cta--nav { padding: .95em 1.35em; font-size: .64rem; } .cta__swap { display: grid; overflow: hidden; } .cta__label { grid-area: 1 / 1; white-space: nowrap; transition: transform .6s var(--ease), opacity .6s var(--ease); } .cta__label--table { transform: translateY(120%); opacity: 0; } .nav.is-table .cta__label--stay { transform: translateY(-120%); opacity: 0; } .nav.is-table .cta__label--table { transform: none; opacity: 1; } /* nav CTA appears as the hero CTA leaves */ .m-full .cta--nav, .m-lite .cta--nav { opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease), background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); } .m-full .nav.cta-on .cta--nav, .m-lite .nav.cta-on .cta--nav { opacity: 1; transform: none; pointer-events: auto; } .nav__burger { display: none; width: 40px; height: 40px; position: relative; } .nav__burger span { position: absolute; left: 9px; right: 9px; height: 1px; background: currentColor; transition: transform .45s var(--ease); } .nav__burger span:first-child { top: 16px; } .nav__burger span:last-child { top: 23px; } .nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); } .menu { position: fixed; inset: 0; z-index: 90; background: var(--forest); color: var(--cream); display: flex; flex-direction: column; justify-content: center; padding: var(--nav-h) var(--gutter) 40px; clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease); } .menu[hidden] { display: flex; visibility: hidden; } .menu.is-open { clip-path: inset(0); visibility: visible; } .menu nav { display: flex; flex-direction: column; gap: .2em; } .menu nav a { font-family: var(--serif); font-size: clamp(2.6rem, 12vw, 4.4rem); line-height: 1.05; text-decoration: none; } .lang--menu { margin-top: 2.4rem; font-size: .8rem; } .menu:not(.is-open) { pointer-events: none; } body.menu-open { overflow: hidden; --nav-fg: var(--cream) !important; } @media (max-width: 899px) { :root { --nav-h: 64px; } .nav { grid-template-columns: 1fr auto; } .nav__links, .nav__right > .lang { display: none; } .nav__burger { display: block; margin-right: -9px; } .cta--nav { padding: .85em 1em; font-size: .58rem; letter-spacing: .16em; } } /* ---------- 01 HERO — one film, driven by the scroll ---------- */ .hero { position: relative; color: var(--cream); background: var(--black); } .hero__stage { position: relative; height: 100svh; min-height: 520px; overflow: hidden; background: var(--black); } .hero__media, .hero__scrim { position: absolute; inset: 0; } .hero__still, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } .hero__video { opacity: 0; transition: opacity 1s var(--ease); } .hero.has-video .hero__video { opacity: 1; } .hero__scrim { pointer-events: none; background: linear-gradient(to top, rgba(22,22,22,.36) 0%, rgba(22,22,22,0) 40%), linear-gradient(to bottom, rgba(22,22,22,.26) 0%, rgba(22,22,22,0) 18%); } .hero__end { position: absolute; inset: 0; background: var(--cream); opacity: 0; pointer-events: none; z-index: 5; } /* preload mark: centred, huge, deep-blurred; comes into focus as video/hero.mp4 downloads (see loadFilm), then travels to dock exactly over the nav logo the moment the user scrolls (see dockLogo in main.js) */ .hero__logo-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 150; pointer-events: none; } .hero__logo { width: clamp(327px, 40.15vw, 594px); height: auto; opacity: 0; filter: blur(48px); transform-origin: 0 0; transition: opacity .6s var(--ease); } .hero.is-intro .hero__logo { opacity: 1; } .m-none .hero__logo-wrap { display: none; } /* % counter + loading bar: a separate group, roughly midway between the logo and the bottom edge */ .hero__loadgroup { position: absolute; left: 50%; top: 94%; translate: -50% -50%; z-index: 150; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; transition: opacity .6s var(--ease); } .hero.is-intro .hero__loadgroup { opacity: 1; } .hero__loadgroup.is-done { opacity: 0 !important; } /* fades away once it reaches 100%, doesn't linger */ .m-none .hero__loadgroup { display: none; } .hero__pct { font: 500 .72rem/1 var(--sans); letter-spacing: .28em; color: var(--cream); opacity: .85; font-variant-numeric: tabular-nums; } .hero__loader { width: clamp(267px, 32.85vw, 486px); height: 2px; background: rgba(254, 249, 241, .22); } .hero__loader i { display: block; height: 100%; background: var(--cream); transform: scaleX(0); transform-origin: left; } /* intro film: plain autoplay, fades away once the scroll film takes over */ .hero__intro { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s var(--ease); pointer-events: none; } .hero.is-intro .hero__intro { opacity: 1; } .m-none .hero__intro { display: none; } /* four phrases — centred, two lines: a light roman line, then a larger italic line. Soft fade in / out only. */ .hero__phrases { position: absolute; inset: 0; pointer-events: none; } .phrase { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: max-content; max-width: min(92vw, 26ch); margin: 0; text-align: center; opacity: 0; visibility: hidden; font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 6.9vw, 7.4rem); line-height: 1; letter-spacing: .002em; text-shadow: 0 0 34px rgba(22, 22, 22, .4), 0 1px 3px rgba(22, 22, 22, .16); will-change: opacity; } .phrase .l1, .phrase .l2 { display: block; } .phrase .l2 { font-style: italic; font-size: 1.46em; line-height: .98; margin-top: .04em; text-transform: uppercase; } .m-none .hero__video { display: none; } .hero__booker { position: absolute; left: 0; right: 0; bottom: clamp(28px, 6vh, 64px); display: flex; justify-content: center; padding: 0 var(--gutter); opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); } .hero:not(.is-intro) .hero__booker { opacity: 1; pointer-events: auto; } .m-none .hero__booker { position: static; opacity: 1; pointer-events: auto; padding: 0 var(--gutter) 48px; } .m-none .hero__phrases { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; } .m-none .phrase { position: static; translate: none; opacity: 1; visibility: visible; font-size: clamp(1.6rem, 3vw, 2.8rem); } @media (max-width: 899px) { .phrase { font-size: clamp(2rem, 9.4vw, 3.4rem); max-width: 92vw; } } /* booking bar (hero + final) */ /* fixed width, always — computed purely from the viewport, never from the length of the text inside */ .booker { display: grid; grid-template-columns: 1fr 1fr 1.25fr auto; width: min(920px, calc(100vw - var(--gutter) * 2)); background: var(--cream); color: var(--black); text-align: left; box-shadow: 0 30px 80px -30px rgba(0,0,0,.55); } .bk-f { display: flex; flex-direction: column; gap: .4em; padding: 1.05rem 1.6rem 1.1rem; border-right: 1px solid rgba(22,22,22,.12); transition: background-color .3s var(--ease); text-align: left; } .bk-f:hover, .bk-f:focus-visible { background: #f5eddf; } .bk-l { font-size: .6rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--brown); } .bk-v { font-family: var(--serif); font-size: 1.4rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; } .bk-v.is-empty { opacity: .42; } .bk-go { display: inline-flex; align-items: center; gap: 1em; padding: 0 2.2rem; background: var(--forest); color: var(--cream); font: 500 .7rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; transition: background-color .4s var(--ease), color .4s var(--ease); } .bk-go:hover { background: var(--gold); color: var(--black); } .bk-go:hover .cta__arrow { width: 2.7em; } @media (max-width: 899px) { .booker { grid-template-columns: 1fr 1fr; } .bk-f { padding: .85rem 1.1rem .9rem; } .bk-f:nth-child(2) { border-right: 0; } .bk-f:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid rgba(22,22,22,.12); border-right: 0; } .bk-go { grid-column: 1 / -1; justify-content: center; padding: 1.15rem 1rem; } .bk-v { font-size: 1.2rem; } .hero__cue { display: none; } .hero__title { font-size: clamp(3.4rem, 17vw, 8rem); } } /* ---------- 02 THE HOUSE — horizontal cinematic sequence ---------- */ .house { background: var(--cream); color: var(--black); } .house .frame { background: #EFE7DA; } .house__phrase { font-family: var(--serif); font-weight: 400; line-height: 1.3; letter-spacing: -.005em; text-wrap: balance; } /* mobile / no-motion: a simple stacked column, normal document flow */ .house__track { display: flex; flex-direction: column; gap: 15vw; padding: 18vw var(--gutter); } .house__slot { display: flex; flex-direction: column; gap: 1.1rem; } .house__fig { aspect-ratio: 3 / 4; width: 100%; max-width: 420px; } .house__phrase { font-size: 1.15rem; max-width: 34ch; } .house__text[data-size="lg"] .house__phrase { font-size: 1.4rem; } .house__text[data-size="xl"] .house__phrase { font-size: 1.85rem; } .house__text[data-size="xxl"] .house__phrase { font-size: 2.2rem; } .house__text[data-size="banner"] { text-align: center; } .house__text[data-size="banner"] .house__phrase { font-size: 1.3rem; max-width: 26ch; margin: 0 auto; } .house__detail { display: block; aspect-ratio: 3 / 4; width: 55%; max-width: 240px; margin: 0 auto 12vw; } @media (min-width: 900px) { .m-none .house__track { max-width: 640px; margin: 0 auto; } } /* desktop: one pinned stage — heroes ride a horizontally scrubbed track; details float independently */ .m-full .house__stage, .m-lite .house__stage { position: relative; height: 100svh; overflow: hidden; } .m-full .house__track, .m-lite .house__track { position: absolute; inset: 0; flex-direction: row; align-items: center; gap: 7vw; padding: 0; will-change: transform; } .m-full .house__slot, .m-lite .house__slot { flex: none; flex-direction: row; align-items: center; gap: 2.6vw; padding: 0 2vw; } .m-full .house__fig, .m-lite .house__fig { max-width: none; transform-origin: 50% 50%; position: relative; z-index: 1; } .m-full .house__slot--hero .house__fig { height: 72vh; width: auto; flex: none; } .m-full .house__text { flex: none; width: 25vw; align-self: center; } .m-full .house__phrase { font-size: clamp(1.05rem, 1.25vw, 1.35rem); max-width: 26ch; } .m-full .house__text[data-size="lg"] .house__phrase { font-size: clamp(1.5rem, 2vw, 2.1rem); max-width: 20ch; } .m-full .house__text[data-size="xl"] { width: 34vw; } .m-full .house__text[data-size="xl"] .house__phrase { font-size: clamp(2.1rem, 2.9vw, 3.1rem); max-width: 20ch; line-height: 1.14; } .m-full .house__text[data-size="xxl"] { width: 40vw; } .m-full .house__text[data-size="xxl"] .house__phrase { font-size: clamp(3rem, 4.4vw, 5rem); max-width: 15ch; line-height: 1.06; } /* position variety so beats don't all sit at the same height, like a slider would */ .m-full .house__text[data-pos="high"] { align-self: flex-start; margin-top: 7vh; } .m-full .house__text[data-pos="low"] { align-self: flex-end; margin-bottom: 9vh; } .m-full .house__text[data-pos="overlay"] { margin-left: -1.4vw; z-index: 0; mix-blend-mode: difference; color: #fff; } /* banner beats: no photo, one wide line, a breath of space between rooms */ .m-full .house__slot--banner { width: 94vw; justify-content: center; } .m-full .house__text[data-size="banner"] { width: auto; text-align: center; } .m-full .house__text[data-size="banner"] .house__phrase { font-size: clamp(4.8rem, 6.9vw, 7.2rem); line-height: 1.05; max-width: none; white-space: nowrap; margin: 0 auto; } .m-lite .house__track { gap: 12vw; } .m-lite .house__slot { flex-direction: column; gap: 3svh; padding: 0 4vw; } .m-lite .house__slot--hero .house__fig { height: 50svh; width: auto; flex: none; } .m-lite .house__text { flex: none; width: 82vw; text-align: center; } .m-lite .house__phrase { font-size: clamp(1.25rem, 5.4vw, 1.7rem); max-width: none; margin: 0 auto; line-height: 1.25; } .m-lite .house__text[data-size="xl"] .house__phrase, .m-lite .house__text[data-size="xxl"] .house__phrase { font-size: clamp(1.45rem, 6.2vw, 2rem); } .m-lite .house__slot--banner { width: 100vw; justify-content: center; } .m-lite .house__text[data-size="banner"] { width: 84vw; } .m-lite .house__text[data-size="banner"] .house__phrase { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.1; } .m-lite .house__detail { display: none; } .m-full .house__detail { position: absolute; width: auto; max-width: none; margin: 0; transform-origin: 50% 50%; } /* all zones sit in the top/bottom bands, clear of the vertically-centred hero + text row */ .m-full .house__detail[data-zone="topLeft"] { left: 5vw; top: 9vh; } .m-full .house__detail[data-zone="topRight"] { right: 5vw; top: 6vh; } .m-full .house__detail[data-zone="bottomLeft"] { left: 7vw; bottom: 10vh; } .m-full .house__detail[data-zone="bottomRight"] { right: 6vw; bottom: 9vh; } .m-full .house__detail[data-zone="farLeft"] { left: 1.5vw; top: 5vh; } .m-full .house__detail[data-zone="farRight"] { right: 4vw; bottom: 20vh; } /* ---------- 04 GIANT TYPE I — the real photo sits full-screen behind everything; an SVG mask shaped like the words is the only thing hiding most of it, so growing the words widens the hole onto it ---------- */ .giant1 { background: var(--cream); color: var(--black); } .giant1__stage { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 72svh; padding: 12vh var(--gutter); } .giant1__img { position: relative; z-index: 1; aspect-ratio: 4 / 5; width: 100%; grid-area: 2 / 1; margin-top: 8vh; } .giant1__svg { display: none; } .giant1__mtext { font-family: var(--serif); font-weight: 400; } .giant1__mtext--2 { font-style: italic; } .giant1__text { position: relative; z-index: 2; grid-area: 1 / 1; text-align: center; font-family: var(--serif); font-weight: 400; font-size: clamp(3.6rem, 15vw, 16rem); line-height: .95; letter-spacing: -.02em; white-space: nowrap; color: var(--black); } .giant1__text span { display: block; } .giant1__text .l2 { font-style: italic; text-transform: uppercase; } .m-full .giant1__stage, .m-lite .giant1__stage { height: 100svh; padding: 0; grid-template: 1fr / 1fr; } .m-full .giant1__img, .m-lite .giant1__img { position: absolute; inset: 0; aspect-ratio: auto; margin: 0; grid-area: auto; z-index: 3; opacity: 0; } .m-full .giant1__img img, .m-lite .giant1__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; } .m-full .giant1__svg, .m-lite .giant1__svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; } .m-full .giant1__text, .m-lite .giant1__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* phase two, same section: the statement is laid out below the photo (photo, gap, text) and the scroll carries both up together, the photo (with the phrase riding on it) leaving as the text arrives; ten views then climb the full width of the screen, always in front of everything, never touching the edges or each other, each a different size and growing larger near the centre — nothing here fades, it all simply moves */ .giant1__whitebg { display: none; } .giant1__phrase { grid-area: 3 / 1; margin: 6vh 0 0; text-align: center; font-family: var(--serif); font-weight: 400; line-height: 1; font-size: clamp(2.2rem, 8vw, 4rem); } .giant1__phrase .l1, .giant1__phrase .l2 { display: block; } .giant1__phrase .l2 { font-style: italic; text-transform: uppercase; margin-top: .3em; } .giant1__rise { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2vh 2vw; margin-top: 6vh; } .giant1__rise--back { grid-area: 4 / 1; } .giant1__rise--front { grid-area: 6 / 1; } .giant1__risefig { aspect-ratio: 3 / 4; margin: 0; overflow: hidden; } .giant1__risefig img { width: 100%; height: 100%; object-fit: cover; } .giant1__statement { grid-area: 5 / 1; margin-top: 6vh; text-align: left; max-width: 60ch; } .giant1__big { font-family: var(--serif); font-weight: 400; line-height: 1.1; font-size: clamp(2rem, 7vw, 3rem); } .giant1__small { font-family: var(--sans); font-weight: 300; line-height: 1.45; opacity: .85; margin-top: 1.2rem; font-size: 1rem; } .m-full .giant1__whitebg, .m-lite .giant1__whitebg { display: block; position: absolute; inset: 0; z-index: 0; background: var(--cream); } .m-full .giant1__phrase, .m-lite .giant1__phrase { position: absolute; inset: 0; z-index: 4; grid-area: auto; margin: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: clamp(2.5rem, 6.9vw, 7.4rem); color: var(--cream); opacity: 0; pointer-events: none; } .m-full .giant1__phrase .l2, .m-lite .giant1__phrase .l2 { font-size: 1.46em; line-height: .98; margin-top: .04em; } .m-full .giant1__rise, .m-lite .giant1__rise { position: absolute; inset: 0; display: block; margin: 0; pointer-events: none; } .m-full .giant1__rise--back, .m-lite .giant1__rise--back { z-index: 6; } .m-full .giant1__rise--front, .m-lite .giant1__rise--front { z-index: 6; } .m-full .giant1__risefig, .m-lite .giant1__risefig { position: absolute; top: 50%; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); } .m-full .giant1__statement, .m-lite .giant1__statement { position: absolute; left: var(--gutter); top: 50%; z-index: 1; grid-area: auto; width: auto; max-width: none; margin: 0; pointer-events: none; } .m-lite .giant1__phrase { font-size: clamp(1.8rem, 7.4vw, 3rem); } .m-lite .giant1__statement .giant1__big { font-size: clamp(1.7rem, 7.4vw, 3rem); } .m-lite .giant1__statement .giant1__small { font-size: clamp(.85rem, 3.5vw, 1.15rem); } .m-full .giant1__big, .m-lite .giant1__big { font-size: clamp(3rem, 4.4vw, 5rem); line-height: 1.06; color: var(--black); white-space: nowrap; } .m-full .giant1__small, .m-lite .giant1__small { font-size: clamp(.95rem, 1.1vw, 1.15rem); color: var(--black); white-space: nowrap; margin-top: 1.2rem; } /* ---------- 05 AROUND SIHAM — a right-aligned statement, then five places to look at one at a time: one big photo on the right, the others as small ones on the left; click a small one and it trades places with the big one (positions live here, keyed on data-slot; main.js only says who sits where) ---------- */ .around { background: var(--cream); padding: 2vh 0 24vh; } .around__statement { padding: 0 var(--gutter) 12vh; text-align: right; } .around__big { font-family: var(--serif); font-weight: 400; line-height: 1.06; font-size: clamp(2.1rem, 8vw, 3rem); } .around__small { font-family: var(--sans); font-weight: 300; line-height: 1.45; margin-top: 1.2rem; font-size: 1rem; } .around__big br, .around__small br { display: none; } .cf { padding: 0 var(--gutter); } .cf__stage { container-type: inline-size; position: relative; } .cf__item { position: absolute; padding: 0; border: 0; overflow: hidden; background: var(--olive); cursor: pointer; box-shadow: 0 22px 44px -22px rgba(22, 22, 22, .4); transition: left .9s var(--ease), top .9s var(--ease), width .9s var(--ease), height .9s var(--ease); } .cf__item img { width: 100%; height: 100%; object-fit: cover; } .cf__item[data-slot="big"] { cursor: default; } .m-none .cf__item { transition: none; } /* narrow: big photo on top, the small ones in a row beneath it, the words under those */ .cf__item[data-slot="big"] { left: 0; top: 0; width: 100cqw; height: 125cqw; } .cf__item[data-slot^="t"] { top: 128cqw; width: 18.4cqw; height: 22cqw; } .cf__item[data-slot="t0"] { left: 0; } .cf__item[data-slot="t1"] { left: 20.4cqw; } .cf__item[data-slot="t2"] { left: 40.8cqw; } .cf__item[data-slot="t3"] { left: 61.2cqw; } .cf__item[data-slot="t4"] { left: 81.6cqw; } .cf__texts { padding-top: 158cqw; } .cf__text { display: flex; flex-direction: column; align-items: flex-start; } .cf__text[hidden] { display: none; } .cf__name { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 9vw, 3.4rem); line-height: 1.02; letter-spacing: -.008em; margin-bottom: 1rem; } .cf__sub { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 4.6vw, 1.7rem); line-height: 1.15; margin-bottom: 1rem; } .cf__desc { max-width: 42ch; font-size: clamp(1rem, 1.1vw, 1.12rem); opacity: .82; } .cf__text .cta { margin-top: 1.8rem; } @media (min-width: 900px) { .around__big { font-size: clamp(3rem, 4.4vw, 5rem); white-space: nowrap; } .around__small { font-size: clamp(.95rem, 1.1vw, 1.15rem); white-space: nowrap; } .around__big br, .around__small br { display: inline; } .around__statement { padding-bottom: 14vh; } .cf__stage { --bh: min(82svh, 60vw); --bw: calc(var(--bh) * .78); --th: calc(var(--bh) * .175); --tw: calc(var(--th) * .9); --tg: calc(var(--bh) * .02); --t0: calc((var(--bh) - 5 * var(--th) - 4 * var(--tg)) / 2); height: var(--bh); } .cf__item[data-slot="big"] { left: calc(100% - var(--bw)); top: 0; width: var(--bw); height: var(--bh); } .cf__item[data-slot^="t"] { left: 0; width: var(--tw); height: var(--th); } .cf__item[data-slot="t0"] { top: var(--t0); } .cf__item[data-slot="t1"] { top: calc(var(--t0) + (var(--th) + var(--tg))); } .cf__item[data-slot="t2"] { top: calc(var(--t0) + 2 * (var(--th) + var(--tg))); } .cf__item[data-slot="t3"] { top: calc(var(--t0) + 3 * (var(--th) + var(--tg))); } .cf__item[data-slot="t4"] { top: calc(var(--t0) + 4 * (var(--th) + var(--tg))); } .cf__texts { position: absolute; left: calc(var(--tw) + 5vw); right: calc(var(--bw) + 3vw); top: 50%; translate: 0 -50%; padding-top: 0; } .cf__name { font-size: clamp(2rem, 3.4vw, 4rem); } .cf__sub { font-size: clamp(1.15rem, 1.6vw, 1.7rem); } } /* ---------- 06/07 GIANT TYPE II → SIHAM ---------- */ .chapter { background: var(--cream); } .chapter__stage { position: relative; background: var(--cream); } .giant2 { background: var(--forest); color: var(--cream); display: grid; place-items: center; overflow: hidden; min-height: 70svh; padding: 10vh var(--gutter); } .giant2__text { font-family: var(--serif); font-weight: 400; text-align: center; font-size: clamp(2.5rem, 6.9vw, 7.4rem); line-height: 1; letter-spacing: .002em; white-space: nowrap; color: var(--cream); } .giant2__text span { display: block; } .giant2__text .accent { font-style: italic; text-transform: uppercase; font-size: 1.46em; line-height: .98; margin-top: .04em; } @media (max-width: 899px) { .giant2__text { font-size: clamp(2rem, 9.4vw, 3.4rem); } } .portrait { aspect-ratio: 3 / 4; width: calc(100% - var(--gutter) * 2); margin: 56px var(--gutter) 0; } .owner { padding: 36px var(--gutter) 90px; display: flex; flex-direction: column; align-items: flex-start; } .owner__name { font-family: var(--serif); font-weight: 400; font-size: clamp(2.8rem, 12vw, 4.2rem); line-height: 1; letter-spacing: -.008em; margin: 1.1rem 0 1.6rem; } .owner__body p, .owner__close { max-width: 50ch; font-size: clamp(.98rem, 1.5vh + .3vw, 1.06rem); opacity: .86; } .owner__body p + p { margin-top: .9em; } .owner__quote { margin: 3.2rem 0; max-width: 30ch; } .owner__quote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 2.3vw, 2.5rem); line-height: 1.12; } .m-full .chapter__stage { height: 100svh; overflow: hidden; } .m-full .giant2 { position: absolute; inset: 0; z-index: 2; min-height: 0; padding: 0; } .m-full .giant2__text { will-change: transform; } .m-full .portrait { position: absolute; z-index: 3; left: var(--gutter); top: calc(50% + var(--nav-h) / 4); margin: 0; width: auto; height: min(80vh, 46vw * 1.333); transform: translateY(-50%); } .m-full .owner { position: absolute; z-index: 4; left: calc(var(--gutter) + min(80vh, 46vw * 1.333) * .75 + 5vw); right: var(--gutter); top: calc(50% + var(--nav-h) / 4); padding: 0; transform: translateY(-50%); } .m-full .owner__name { font-size: min(4.2vw, 8.6vh); margin: .9rem 0 1.2rem; } .m-full .owner__quote { margin: clamp(1.8rem, 5vh, 3.4rem) 0; } .m-full .owner__quote p { font-size: min(2.1vw, 4vh); } .m-full .owner__body p, .m-full .owner__close { font-size: min(1.05rem, 1.95vh); line-height: 1.6; } .m-full .owner__body, .m-full .owner__quote, .m-full .owner__close { opacity: 0; } .m-lite .owner__body, .m-lite .owner__quote, .m-lite .owner__close { opacity: 0; } /* ---------- 08 FINAL — one line of type, black on cream, slid in from the right edge by the scroll ---------- */ .final { position: relative; background: var(--cream); color: var(--black); min-height: 100svh; display: grid; align-items: center; overflow: hidden; padding: 0 var(--gutter); } .final__title { font-family: var(--serif); font-weight: 400; font-size: clamp(4.4rem, 17.2vw, 18.8rem); line-height: .95; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; width: max-content; } .m-none .final__title { white-space: normal; width: auto; } @media (max-width: 899px) { .final { min-height: 34svh; padding: 2vh var(--gutter); } .final__title { font-size: clamp(5.6rem, 32vw, 11rem); } .owner { padding-bottom: 48px; } } /* ---------- closing line above the footer ---------- */ .closing { background: var(--cream); color: var(--black); padding: 14vh var(--gutter) 16vh; } .closing__text { font-family: var(--serif); font-weight: 400; line-height: 1.06; font-size: clamp(2.2rem, 9vw, 3.4rem); } @media (min-width: 900px) { .closing__text { font-size: clamp(3rem, 4.4vw, 5rem); } } /* ---------- 09 FOOTER ---------- */ .footer { background: var(--forest); color: var(--cream); padding: clamp(48px, 9vh, 96px) var(--gutter) clamp(40px, 7vh, 72px); display: grid; grid-template-columns: .7fr .7fr 1fr 360px; gap: 40px var(--gutter); align-items: start; } .footer__brand img { width: 150px; margin-bottom: 1.4rem; } .footer address { font-size: .82rem; letter-spacing: .04em; opacity: .7; line-height: 1.8; } .footer__nav { display: flex; flex-direction: column; gap: .9rem; } .footer__nav a, .footer__h { font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; } .footer__nav a { transition: color .3s; } .footer__nav a:hover, .footer__ig:hover { color: var(--gold); } .footer__h { margin: 0 0 1rem; } .footer__contact { display: flex; flex-direction: column; align-items: flex-start; } .footer__mail { padding: .95em 1.4em; font-size: .62rem; } .footer__ig { display: inline-flex; margin-top: 1.4rem; color: var(--cream); transition: color .3s; } .footer__ig[hidden] { display: none; } .footer__legal { grid-column: 1 / -1; margin-top: clamp(28px, 8vh, 90px); display: flex; justify-content: space-between; align-items: flex-end; gap: 32px 48px; flex-wrap: wrap; } .footer__copy { font-size: .7rem; line-height: 1.7; opacity: .7; } .footer__credit { margin-top: .8rem; font-size: .7rem; line-height: 1.7; opacity: .7; } .footer__credit a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color .3s; } .footer__credit a:hover { color: var(--gold); } .footer__policies { display: flex; gap: 1.6rem; font-size: .7rem; opacity: .7; } .footer__policies a, .footer__policies button { font: inherit; color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color .3s; } .footer__policies a:hover, .footer__policies button:hover { color: var(--gold); } @media (max-width: 899px) { .footer { grid-template-columns: 1fr; } } /* ---------- location map (footer, bottom-right) — square corners, opens on click ---------- */ .lmap { --spr: cubic-bezier(.34, 1.2, .5, 1); position: relative; width: 240px; height: 140px; justify-self: end; transition: height .7s var(--spr); } .lmap.is-open { height: 280px; } .lmap__card { position: absolute; right: 0; top: 0; width: 240px; height: 140px; overflow: hidden; cursor: pointer; user-select: none; background: rgba(254, 249, 241, .06); border: 1px solid rgba(254, 249, 241, .22); color: var(--cream); transition: width .7s var(--spr), height .7s var(--spr), transform .2s ease-out; will-change: transform; } .lmap.is-open .lmap__card { width: 360px; height: 280px; cursor: default; } .lmap__card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .lmap__grid { position: absolute; inset: 0; opacity: .07; transition: opacity .3s; background-image: linear-gradient(rgba(254, 249, 241, 1) 1px, transparent 1px), linear-gradient(90deg, rgba(254, 249, 241, 1) 1px, transparent 1px); background-size: 20px 20px; } .lmap.is-open .lmap__grid { opacity: 0; } .lmap__map { position: absolute; inset: 0; background: #0d2814; opacity: 0; transition: opacity .4s ease .1s; pointer-events: none; } .lmap.is-open .lmap__map { opacity: 1; } .lmap__map::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13, 40, 20, .9), transparent 62%); } .lmap__streets { position: absolute; inset: 0; width: 100%; height: 100%; } .lmap__l { stroke: var(--cream); stroke-dasharray: 500; stroke-dashoffset: 500; transition: stroke-dashoffset .7s ease; } .lmap.is-open .lmap__l { stroke-dashoffset: 0; } .lmap__l--a { stroke-opacity: .28; stroke-width: 4; } .lmap__l--b { stroke-opacity: .22; stroke-width: 3; } .lmap__l--c { stroke-opacity: .1; stroke-width: 1.5; } .lmap__l.d1 { transition-delay: .2s; } .lmap__l.d2 { transition-delay: .3s; } .lmap__l.d3 { transition-delay: .4s; } .lmap__l.d4 { transition-delay: .5s; } .lmap__l.d5 { transition-delay: .6s; } .lmap__l.d6 { transition-delay: .7s; } .lmap__l.d7 { transition-delay: .8s; } .lmap__l.d8 { transition-delay: .7s; } .lmap__l.d9 { transition-delay: .8s; } .lmap__l.d10 { transition-delay: .9s; } .lmap__l.d11 { transition-delay: 1s; } .lmap__b { position: absolute; background: rgba(254, 249, 241, .13); border: 1px solid rgba(254, 249, 241, .12); opacity: 0; transform: scale(.8); transition: opacity .4s, transform .4s; } .lmap.is-open .lmap__b { opacity: 1; transform: none; } .lmap__b.b1 { top: 40%; left: 10%; height: 20%; width: 15%; transition-delay: .5s; } .lmap__b.b2 { top: 15%; left: 35%; height: 15%; width: 12%; transition-delay: .6s; } .lmap__b.b3 { top: 70%; left: 75%; height: 18%; width: 18%; transition-delay: .7s; } .lmap__b.b4 { top: 20%; right: 10%; height: 25%; width: 10%; transition-delay: .55s; } .lmap__b.b5 { top: 55%; left: 5%; height: 12%; width: 8%; transition-delay: .65s; } .lmap__b.b6 { top: 8%; left: 75%; height: 10%; width: 14%; transition-delay: .75s; } .lmap__pin { position: absolute; left: 50%; top: 50%; margin: -16px 0 0 -16px; filter: drop-shadow(0 0 10px rgba(204, 154, 72, .55)); transform: translateY(-20px) scale(0); transition: transform .5s var(--spr) .3s; } .lmap.is-open .lmap__pin { transform: none; } .lmap__ico { position: absolute; left: 20px; top: 20px; color: var(--gold); transition: opacity .3s; filter: drop-shadow(0 0 4px rgba(204, 154, 72, .35)); } .lmap.is-open .lmap__ico { opacity: 0; } .lmap__txt { position: absolute; left: 20px; right: 20px; bottom: 18px; display: block; } .lmap__loc { display: block; font-size: .85rem; font-weight: 500; letter-spacing: .01em; transition: transform .4s var(--spr); } .lmap__card:hover .lmap__loc { transform: translateX(4px); } .lmap__coord { display: block; max-height: 0; overflow: hidden; opacity: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .72rem; opacity: 0; transition: max-height .3s ease, opacity .25s; } .lmap.is-open .lmap__coord { max-height: 1.6em; opacity: .7; margin-top: .25rem; } .lmap__rule { display: block; height: 1px; margin-top: .5rem; background: linear-gradient(90deg, rgba(204, 154, 72, .7), rgba(204, 154, 72, .25), transparent); transform: scaleX(.3); transform-origin: left; transition: transform .4s ease-out; } .lmap__card:hover .lmap__rule, .lmap.is-open .lmap__rule { transform: none; } .lmap__hint { position: absolute; right: 0; top: 100%; margin-top: 10px; font-size: .65rem; white-space: nowrap; } .lmap__h1, .lmap__h2 { position: absolute; right: 0; top: 0; opacity: 0; transition: opacity .25s; } .lmap__h2 { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; pointer-events: none; } .lmap__card:hover ~ .lmap__hint .lmap__h1 { opacity: .7; } .lmap.is-open .lmap__h1 { opacity: 0 !important; } .lmap.is-open .lmap__h2 { opacity: .85; pointer-events: auto; } .lmap__h2:hover { color: var(--gold); } @media (max-width: 899px) { .footer__legal { flex-direction: column; align-items: flex-start; } .lmap { width: min(100%, 360px); justify-self: start; } .lmap__card { left: 0; right: auto; top: 0; bottom: auto; width: 100%; } .lmap.is-open .lmap__card { width: 100%; } .lmap__hint { position: relative; top: auto; height: 1.2em; margin-top: 10px; } .lmap__h1, .lmap__h2 { position: absolute; left: 0; right: auto; } } /* ---------- compact reservation bar (bottom-left, after the hero) ---------- */ .mini-booker { position: fixed; left: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2.4vh, 28px); z-index: 80; transform: translateY(170%); transition: transform .8s var(--ease); pointer-events: none; } .mini-booker.is-on { transform: none; pointer-events: auto; } .mini-booker .booker { width: auto; grid-template-columns: repeat(3, auto) auto; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .55); } .mini-booker .bk-f { padding: .55rem .95rem .6rem; gap: .15em; } .mini-booker .bk-l { font-size: .5rem; } .mini-booker .bk-v { font-size: 1rem; } .mini-booker .bk-go { padding: 0 1.2rem; font-size: .6rem; } @media (max-width: 899px) { .mini-booker .bk-f { display: none; } .mini-booker .booker { grid-template-columns: auto; } .mini-booker .bk-go { padding: 1.05rem 1.5rem; } } /* ---------- cookie banner (bottom-right, first visit) ---------- */ .cookie { position: fixed; right: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2.4vh, 28px); z-index: 250; width: min(410px, calc(100vw - 28px)); background: var(--cream); color: var(--black); padding: 1.7rem 1.8rem 1.5rem; border: 1px solid rgba(22, 22, 22, .12); box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .55); transform: translateY(150%); transition: transform .9s var(--ease); } .cookie.is-on { transform: none; } .cookie[hidden] { display: none; } .cookie__t { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; line-height: 1; margin-bottom: .8rem; } .cookie__p { font-size: .82rem; line-height: 1.6; opacity: .82; } .cookie__p a { text-decoration: underline; text-underline-offset: 3px; } .cookie__p a:hover { color: var(--brown); } .cookie__b { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .7rem; margin-top: 1.3rem; } .cookie__b .cta { padding: .95em 1.3em; font-size: .6rem; } .cookie__b .cta:not(.cta--solid) { color: var(--black); } .cookie__m { font: 500 .6rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; padding: .95em .4em; border-bottom: 1px solid currentColor; margin-left: auto; transition: color .3s; } .cookie__m:hover { color: var(--brown); } .cookie__pref { display: none; } .cookie.is-manage .cookie__main { display: none; } .cookie.is-manage .cookie__pref { display: block; } .cookie__row { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: .9rem 0; border-top: 1px solid rgba(22, 22, 22, .1); cursor: pointer; } .cookie__row b { display: block; font-size: .8rem; font-weight: 600; } .cookie__row i { display: block; font-style: normal; font-size: .74rem; line-height: 1.45; opacity: .7; margin-top: .15rem; } .cookie__row input { position: absolute; opacity: 0; pointer-events: none; } .cookie__row em { flex: none; position: relative; width: 38px; height: 22px; border-radius: 22px; background: rgba(22, 22, 22, .2); transition: background-color .3s; } .cookie__row em::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--cream); transition: transform .3s var(--ease); } .cookie__row input:checked + em { background: var(--forest); } .cookie__row input:checked + em::after { transform: translateX(16px); } .cookie__row input:disabled + em { opacity: .55; } .cookie__row input:focus-visible + em { outline: 2px solid var(--gold); outline-offset: 2px; } /* ---------- legal pages (privacy.html) ---------- */ .legal-page { background: var(--cream); } .legal__top { display: flex; align-items: center; justify-content: space-between; padding: 28px var(--gutter); } .legal__top img { width: 130px; } .legal__back { font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; } .legal__back:hover { color: var(--brown); } .legal { max-width: 780px; margin: 0 auto; padding: 6vh var(--gutter) 14vh; } .legal h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.02; margin-bottom: 1rem; } .legal h2 { font-weight: 600; font-size: clamp(1.05rem, 1.5vw, 1.25rem); letter-spacing: .04em; line-height: 1.3; margin: 3rem 0 1rem; scroll-margin-top: 24px; } .legal h3 { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin: 1.8rem 0 .7rem; } .legal p, .legal li { font-size: 1rem; line-height: 1.7; opacity: .88; } .legal p { margin-bottom: 1rem; } .legal ul { padding-left: 1.2rem; margin-bottom: 1rem; } .legal li { margin-bottom: .35rem; } .legal a { text-decoration: underline; text-underline-offset: 3px; } /* ---------- cursor (real mouse only — see js/cursor.js) ---------- */ html.has-cursor, html.has-cursor * { cursor: none !important; } html.has-cursor input:not([type="checkbox"]):not([type="radio"]), html.has-cursor textarea { cursor: text !important; } .cur { position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none; opacity: 0; will-change: transform; transition: opacity .25s; } .cur.is-on { opacity: 1; } .cur.is-text { opacity: 0; } .cur svg { display: block; margin: -3px 0 0 -3px; overflow: visible; transform-origin: 3px 3px; transition: transform .4s var(--ease); fill: none; stroke-width: 1.6; stroke-linejoin: miter; stroke-miterlimit: 12; } .cur--inv { mix-blend-mode: difference; } .cur--inv svg { stroke: #fff; } .cur--grey { mix-blend-mode: saturation; } .cur--grey svg { stroke: #808080; } .cur.is-link svg { transform: scale(1.6); } .cur.is-down svg { transform: scale(.88); } .cur.is-link.is-down svg { transform: scale(1.35); } /* ---------- reduced motion: keep content, drop transforms ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .menu { transition: none; } } /* ---------- tablet: keep editorial proportions in the stacked layout ---------- */ @media (min-width: 600px) and (max-width: 899px) { .portrait, .owner { max-width: 560px; margin-inline: auto; width: 100%; } .owner { padding-inline: 0; } .portrait { width: calc(100% - var(--gutter) * 2); } .giant1__text { font-size: clamp(4rem, 16vw, 9rem); } } /* ========================================================= RESERVATION PANEL ========================================================= */ html.rsv-open { overflow: hidden; } .rsv { position: fixed; inset: 0; z-index: 300; display: flex; } .rsv[hidden] { display: none; } .rsv__scrim { position: absolute; inset: 0; background: rgba(22, 22, 22, .74); opacity: 0; transition: opacity .6s var(--ease); } .rsv.is-open .rsv__scrim { opacity: 1; } .rsv__panel { position: relative; margin: auto; width: min(1200px, calc(100% - var(--gutter) * 2)); height: min(780px, calc(100svh - var(--gutter) * 2)); display: grid; grid-template-columns: minmax(280px, .82fr) 1.6fr; background: var(--cream); color: var(--black); clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease); } .rsv.is-open .rsv__panel { clip-path: inset(0 0 0 0); } .rsv__aside { position: relative; background: var(--forest); color: var(--cream); overflow: hidden; display: flex; } .rsv__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; } .rsv__aside::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(19,54,28,.96) 8%, rgba(19,54,28,.25) 60%, rgba(19,54,28,.45)); } .rsv__aside-in { position: relative; z-index: 1; margin-top: auto; padding: clamp(24px, 3vw, 44px); width: 100%; } .rsv__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 3.2vw, 3.4rem); line-height: 1.02; margin: .7rem 0 1.6rem; } .rsv__title em { font-style: italic; color: var(--gold); } .rsv__sum { display: grid; gap: .1rem; margin-bottom: 1.6rem; } .rsv__sum > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid rgba(254,249,241,.2); font-size: .9rem; } .rsv__sum dt { font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; opacity: .7; padding-top: .2rem; } .rsv__sum dd { font-family: var(--serif); font-size: 1.15rem; text-align: right; } .rsv__host { font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; opacity: .65; } .rsv:not([data-mode="table"]) [data-only="table"], .rsv[data-mode="table"] [data-only="stay"] { display: none !important; } .rsv__main { display: flex; flex-direction: column; min-height: 0; } .rsv__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(18px, 2.2vw, 30px) clamp(20px, 3vw, 44px); border-bottom: 1px solid rgba(22,22,22,.1); } .rsv__steps { display: flex; gap: clamp(14px, 2.4vw, 34px); list-style: none; padding: 0; font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; } .rsv__steps li { opacity: .38; transition: opacity .4s; display: flex; gap: .7em; } .rsv__steps li span:first-child { color: var(--brown); } .rsv__steps li.is-on { opacity: 1; } .rsv__close { position: relative; width: 40px; height: 40px; flex: none; } .rsv__close i { position: absolute; left: 10px; right: 10px; top: 19px; height: 1px; background: currentColor; } .rsv__close i:first-child { transform: rotate(45deg); } .rsv__close i:last-child { transform: rotate(-45deg); } .rsv__body { flex: 1; overflow-y: auto; padding: clamp(20px, 3vw, 44px); } .rsv__step { animation: rsvIn .7s var(--ease) both; } .rsv__step[hidden] { display: none; } @keyframes rsvIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .rsv__h { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1.1; margin-bottom: 1.6rem; } .rsv__h--xl { font-size: clamp(2.6rem, 4.4vw, 4.6rem); margin: 1rem 0 1.2rem; } .cal { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); position: relative; } .cal__m { min-width: 0; } .cal__head { display: flex; align-items: center; justify-content: space-between; height: 38px; margin-bottom: .6rem; font-family: var(--serif); font-size: 1.35rem; text-transform: capitalize; } .cal__nav { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(22,22,22,.18); transition: background-color .3s, color .3s; } .cal__nav:hover:not(:disabled) { background: var(--forest); color: var(--cream); border-color: var(--forest); } .cal__nav:disabled { opacity: .25; cursor: default; } .cal__nav.is-ghost { visibility: hidden; } .cal__wd, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); } .cal__wd span { text-align: center; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brown); padding: .5rem 0; } .cal__d { position: relative; height: 44px; display: grid; place-items: center; font-size: .92rem; font-weight: 400; z-index: 0; transition: color .25s; } .cal__d::before { content: ""; position: absolute; inset: 3px; z-index: -1; border: 1px solid transparent; transition: border-color .25s, background-color .25s; } .cal__d:hover:not(:disabled)::before { border-color: var(--forest); } .cal__d:disabled { opacity: .28; cursor: default; } .cal__d.is-today::after { content: ""; position: absolute; bottom: 6px; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); } .cal__d.is-range::before, .cal__d.is-hover::before { inset: 3px 0; background: rgba(19,54,28,.09); border-color: transparent; } .cal__d.is-in::before, .cal__d.is-out::before, .cal__d.is-single::before { background: var(--forest); inset: 3px; border-color: var(--forest); } .cal__d.is-in, .cal__d.is-out, .cal__d.is-single { color: var(--cream); } .cal__d.is-in.has-out::before { inset: 3px 0 3px 3px; } .cal__d.is-out::before { inset: 3px 3px 3px 0; } .cal__blank { height: 44px; } .rsv__extras { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; align-items: center; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid rgba(22,22,22,.1); } .stepper { display: flex; align-items: center; gap: .8rem; } .stepper__l { font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--brown); min-width: 6.5em; } .stepper button { width: 34px; height: 34px; border: 1px solid rgba(22,22,22,.2); font-size: 1.1rem; line-height: 1; transition: background-color .3s, color .3s; } .stepper button:hover { background: var(--forest); color: var(--cream); border-color: var(--forest); } .stepper output { min-width: 1.6em; text-align: center; font-family: var(--serif); font-size: 1.4rem; } .rsv__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; } .field { display: flex; flex-direction: column; gap: .5rem; } .field--wide { grid-column: 1 / -1; } .field--inline { flex-direction: row; align-items: center; gap: 1rem; } .field span { font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--brown); } .field input, .field textarea { font: 400 1.05rem/1.4 var(--sans); background: transparent; color: var(--black); border: 0; border-bottom: 1px solid rgba(22,22,22,.25); padding: .55rem 0; border-radius: 0; resize: none; transition: border-color .3s; } .field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--forest); } .field input.is-bad { border-bottom-color: #a4372b; } .rsv__hint { min-height: 1.4em; margin-top: 1.2rem; font-size: .85rem; color: #a4372b; } .rsv__hint.is-ok { color: var(--forest); } .rsv__msg { white-space: pre-wrap; font: 400 .98rem/1.7 var(--sans); padding: 1.4rem 1.6rem; border: 1px solid rgba(22,22,22,.14); background: #f7f0e3; } .rsv__donetxt { max-width: 46ch; font-weight: 300; margin-bottom: 1.8rem; } .rsv__foot[hidden] { display: none; } .rsv__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(16px, 2vw, 26px) clamp(20px, 3vw, 44px); border-top: 1px solid rgba(22,22,22,.1); } .rsv__mini { display: none; font-size: .8rem; opacity: .7; } .rsv__back { font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; padding: .8em 0; border-bottom: 1px solid transparent; transition: border-color .3s; } .rsv__back:hover { border-color: currentColor; } .rsv__back[hidden], .rsv__foot .cta[hidden] { display: none; } .rsv__foot .cta:disabled { opacity: .35; cursor: default; pointer-events: none; } .rsv__foot .cta--solid { background: var(--forest); border-color: var(--forest); color: var(--cream); } .rsv__foot .cta--solid:hover { background: var(--gold); border-color: var(--gold); color: var(--black); } @media (max-width: 899px) { .rsv__panel { width: 100%; height: 100svh; grid-template-columns: 1fr; } .rsv__aside { display: none; } .cal { grid-template-columns: 1fr; } .cal__d { height: 46px; } .rsv__form { grid-template-columns: 1fr; } .rsv__steps li span:last-child { display: none; } .rsv__mini { display: block; } .rsv__foot { flex-wrap: wrap; } }