/* ============================================================ 22 Pyramid Road — site.css (v4, Figma system) Type, colour and shape from the owner's Figma file: Geist for headings, labels and navigation, DM Sans for reading text, Geist Mono for calls to action, and Instrument Serif only for the home hero title. Gold-brown, navy, sky and oxblood accents on warm ivory; pills and glass. Spacing scale and motion carried over from v3. ============================================================ */ /* ---------- Fonts (self-hosted, latin subset; was Google Fonts) ---------- */ @font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/instrument-serif-400.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: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/instrument-serif-400i.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: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/geist-var.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: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("/fonts/dm-sans-var.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: "Geist Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/geist-mono-600.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; } :root { /* Type: Geist for headings, labels and navigation (SemiBold uppercase titles, Medium links), DM Sans for reading text, Geist Mono SemiBold for calls to action. Instrument Serif is reserved for the home hero title. */ --font-display: "Geist", Helvetica, system-ui, -apple-system, sans-serif; --font-sans: "Geist", Helvetica, system-ui, -apple-system, sans-serif; --font-body: "DM Sans", Helvetica, system-ui, -apple-system, sans-serif; --font-hero: "Instrument Serif", Georgia, serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --display-size: clamp(2.25rem, 1rem + 4.4vw, 5rem); --display-lh: 1.02; --display-ls: -0.03em; --heading-size: clamp(2rem, 1rem + 2.2vw, 3rem); --heading-lh: 1.08; --heading-ls: -0.02em; --sub-size: 1.5rem; --body-size: 1rem; --body-lh: 1.55; --body-ls: 0; --small-size: 0.875rem; --xs-size: 0.8125rem; --weight: 400; --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px; --s-32: 32px; --s-36: 36px; --s-48: 48px; --s-52: 52px; --s-60: 60px; --s-128: 128px; /* Shape, from the Figma: pills for anything you press, 20px photos, 25px glass cards. */ --r-btn: 12px; --r-pill: 999px; --r-photo: 20px; --r-badge: 999px; --r-card: 25px; --dur: 200ms; --ease: ease; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --ivory: #f6f2ea; --ivory-deep: #ede7db; --white: #fcfbf8; --charcoal: #1f1d1a; --ink-soft: #5c5750; --ink-mute: #6a645b; /* 4.7:1 on ivory-deep, 5.2:1 on ivory; was #857e74 (3.6:1) */ /* Colour, from the Figma: oxblood display type, gold-brown actions, navy and sky for depth. */ --oxblood: #650404; --gold: #7a520b; --gold-hi: #8a5d0d; --navy: #0b3466; --sky: #3d89c3; --sky-soft: #a9cdea; --hair: rgba(31, 29, 26, 0.12); --hair-strong: rgba(31, 29, 26, 0.24); --gutter: clamp(16px, 4vw, 60px); --edge: clamp(20px, 5vw, 96px); /* header logo/menu and hero title share this inset from the viewport edge */ --measure: 34rem; --head-h: 68px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + var(--s-16)); overscroll-behavior-y: none; } /* No light band when a phone bounces past the top of the home hero: the root behind the page is dark there (the page itself stays ivory, painted by body). */ html:has(> body.has-hero) { background: #1d1a17; } body { -webkit-tap-highlight-color: transparent; } a, button, summary, input, select, textarea { touch-action: manipulation; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .photo img { transition: none !important; } .btn, .btn:active { transform: none; } } body { margin: 0; background: var(--ivory); color: var(--charcoal); font-family: var(--font-body); font-size: var(--body-size); line-height: var(--body-lh); letter-spacing: var(--body-ls); font-weight: var(--weight); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, p, dl, dd, figure, ul, ol { margin: 0; font-weight: var(--weight); } ul, ol { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } picture { display: contents; } button, input, textarea, select { font: inherit; letter-spacing: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: var(--s-16); top: -48px; background: var(--charcoal); color: var(--ivory); padding: var(--s-8) var(--s-16); border-radius: var(--r-btn); z-index: 50; transition: top var(--dur) var(--ease); } .skip:focus { top: var(--s-16); } .wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .wrap-narrow { max-width: 900px; } /* ---------- Type ---------- */ .display { font-family: var(--font-display); font-weight: 600; font-size: var(--display-size); line-height: var(--display-lh); letter-spacing: var(--display-ls); text-wrap: balance; color: var(--oxblood); } /* Location page title: black, kept on one line (size tracks the viewport so it never wraps; ~33 chars at 0.5em avg). */ #loc-h { color: var(--charcoal); white-space: nowrap; text-wrap: nowrap; font-size: min(var(--display-size), 4.6vw, 4.5rem); } .display-sm { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.25rem, 1rem + 3.4vw, 3.75rem); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; color: var(--oxblood); } .heading { font-family: var(--font-display); font-weight: 500; font-size: var(--heading-size); line-height: var(--heading-lh); letter-spacing: var(--heading-ls); text-wrap: balance; } .sub { font-family: var(--font-display); font-weight: 500; font-size: var(--sub-size); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; } .lede { font-size: 1.125rem; line-height: 1.5; color: var(--ink-soft); max-width: var(--measure); } .small { font-size: var(--small-size); line-height: 1.5; color: var(--ink-mute); } .kicker { font-family: var(--font-sans); font-size: var(--xs-size); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); } .ital { font-style: italic; } .measure { max-width: var(--measure); } .copy { color: var(--ink-soft); max-width: var(--measure); } .copy + .copy { margin-top: var(--s-16); } /* ---------- Buttons: the Figma Inquire CTA everywhere. Flat pills, Geist Mono SemiBold. ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8); min-height: 48px; padding: 0 var(--s-24); border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer; white-space: nowrap; line-height: 1; font-family: var(--font-mono); font-weight: 600; font-size: 0.9375rem; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 160ms var(--ease-out); } .btn:active { transform: scale(0.97); } .btn-sm { min-height: 40px; padding: 0 var(--s-16); font-size: var(--small-size); } .btn-primary { color: #fff; background: var(--gold); } @media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--gold-hi); } } .btn-ghost { border-color: var(--hair-strong); color: var(--charcoal); background: transparent; } .btn-ghost:hover { border-color: var(--charcoal); background: rgba(31,29,26,0.04); } .btn-light { background: var(--ivory); color: var(--charcoal); } .btn-light:hover { background: var(--white); } .btn-glass { border-color: rgba(255, 255, 255, 0.35); color: #fff; background: rgba(0, 0, 0, 0.36); -webkit-backdrop-filter: blur(4px) saturate(1.4); backdrop-filter: blur(4px) saturate(1.4); } .btn-glass:hover { background: rgba(0, 0, 0, 0.48); border-color: rgba(255, 255, 255, 0.6); } .btn[disabled], .btn[aria-busy="true"] { opacity: 0.6; cursor: progress; transform: none; } .textlink { font-family: var(--font-sans); color: var(--charcoal); font-weight: 500; border-bottom: 1px solid var(--hair-strong); padding: 10px 0 2px; margin-top: -10px; display: inline-block; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .textlink:hover { color: var(--navy); border-color: var(--navy); } /* ---------- Badges ---------- */ .badges { display: flex; flex-wrap: wrap; gap: var(--s-8); } .badge { font-family: var(--font-sans); display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 1px solid rgba(31,29,26,0.1); border-radius: var(--r-badge); font-size: var(--xs-size); font-weight: 500; line-height: 1; color: var(--ink-soft); background: var(--ivory-deep); white-space: nowrap; } .badge[data-icon]::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; opacity: 0.8; } .badge[data-icon="bed"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 11V6a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v5'/%3E%3Cpath d='M1 11h14v3H1z'/%3E%3Cpath d='M4 8h3v3H4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 11V6a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v5'/%3E%3Cpath d='M1 11h14v3H1z'/%3E%3Cpath d='M4 8h3v3H4z'/%3E%3C/svg%3E"); } .badge[data-icon="bath"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9h12v2a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3z'/%3E%3Cpath d='M4 9V4a1.5 1.5 0 0 1 3 0'/%3E%3Cpath d='M5 14v1M11 14v1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9h12v2a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3z'/%3E%3Cpath d='M4 9V4a1.5 1.5 0 0 1 3 0'/%3E%3Cpath d='M5 14v1M11 14v1'/%3E%3C/svg%3E"); } .badge[data-icon="tub"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12v3a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3z'/%3E%3Cpath d='M5 5c0-1 1-1 1-2M8 5c0-1 1-1 1-2M11 5c0-1 1-1 1-2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12v3a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3z'/%3E%3Cpath d='M5 5c0-1 1-1 1-2M8 5c0-1 1-1 1-2M11 5c0-1 1-1 1-2'/%3E%3C/svg%3E"); } .badge[data-icon="fire"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 14c-2.5 0-4-1.7-4-4 0-2 1.5-3 2-4.5.8 1 1 2 1 2s1.5-2 1-4.5c2 1.5 4 3.5 4 7 0 2.3-1.5 4-4 4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 14c-2.5 0-4-1.7-4-4 0-2 1.5-3 2-4.5.8 1 1 2 1 2s1.5-2 1-4.5c2 1.5 4 3.5 4 7 0 2.3-1.5 4-4 4z'/%3E%3C/svg%3E"); } .badge[data-icon="tv"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='12' height='8' rx='1'/%3E%3Cpath d='M5 14h6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='12' height='8' rx='1'/%3E%3Cpath d='M5 14h6'/%3E%3C/svg%3E"); } .badge[data-icon="closet"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='2' width='10' height='12' rx='1'/%3E%3Cpath d='M8 2v12M6.5 8h0M9.5 8h0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='2' width='10' height='12' rx='1'/%3E%3Cpath d='M8 2v12M6.5 8h0M9.5 8h0'/%3E%3C/svg%3E"); } .badge[data-icon="seat"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v4'/%3E%3Cpath d='M3 9h10v3H3z'/%3E%3Cpath d='M4 12v2M12 12v2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v4'/%3E%3Cpath d='M3 9h10v3H3z'/%3E%3Cpath d='M4 12v2M12 12v2'/%3E%3C/svg%3E"); } .badge[data-icon="pan"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='9' r='4.5'/%3E%3Cpath d='M11 7l4-3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='9' r='4.5'/%3E%3Cpath d='M11 7l4-3'/%3E%3C/svg%3E"); } .badge[data-icon="knife"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l6-6'/%3E%3Cpath d='M9 7l4-4 1 1-4 4z'/%3E%3Cpath d='M6 10l1 1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l6-6'/%3E%3Cpath d='M9 7l4-4 1 1-4 4z'/%3E%3Cpath d='M6 10l1 1'/%3E%3C/svg%3E"); } .badge[data-icon="coffee"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h8v4a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3z'/%3E%3Cpath d='M11 7h1.5a1.5 1.5 0 0 1 0 3H11'/%3E%3Cpath d='M6 3v1.5M8 3v1.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h8v4a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3z'/%3E%3Cpath d='M11 7h1.5a1.5 1.5 0 0 1 0 3H11'/%3E%3Cpath d='M6 3v1.5M8 3v1.5'/%3E%3C/svg%3E"); } .badge[data-icon="desk"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h12'/%3E%3Cpath d='M3 6v7M13 6v7'/%3E%3Cpath d='M5 9h6v2H5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h12'/%3E%3Cpath d='M3 6v7M13 6v7'/%3E%3Cpath d='M5 9h6v2H5z'/%3E%3C/svg%3E"); } .badge[data-icon="chair"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h6v6H5z'/%3E%3Cpath d='M4 9h8'/%3E%3Cpath d='M5 9v4M11 9v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h6v6H5z'/%3E%3Cpath d='M4 9h8'/%3E%3Cpath d='M5 9v4M11 9v4'/%3E%3C/svg%3E"); } .badge[data-icon="feather"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3c-4 0-8 3-9 8l-1 2 2-1c5-1 8-5 8-9z'/%3E%3Cpath d='M4 12l5-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3c-4 0-8 3-9 8l-1 2 2-1c5-1 8-5 8-9z'/%3E%3Cpath d='M4 12l5-5'/%3E%3C/svg%3E"); } .badge[data-icon="door"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='8' height='12' rx='1'/%3E%3Cpath d='M10 8h0.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='8' height='12' rx='1'/%3E%3Cpath d='M10 8h0.01'/%3E%3C/svg%3E"); } .badge[data-icon="steam"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 2c0 1.5-1 1.5-1 3s1 1.5 1 3M8 2c0 1.5-1 1.5-1 3s1 1.5 1 3M11 2c0 1.5-1 1.5-1 3s1 1.5 1 3'/%3E%3Cpath d='M3 11h10v3H3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 2c0 1.5-1 1.5-1 3s1 1.5 1 3M8 2c0 1.5-1 1.5-1 3s1 1.5 1 3M11 2c0 1.5-1 1.5-1 3s1 1.5 1 3'/%3E%3Cpath d='M3 11h10v3H3z'/%3E%3C/svg%3E"); } .badge[data-icon="game"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='12' height='7' rx='3'/%3E%3Cpath d='M5 7.5v2M4 8.5h2M11 8h0.01M12 9.5h0.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='12' height='7' rx='3'/%3E%3Cpath d='M5 7.5v2M4 8.5h2M11 8h0.01M12 9.5h0.01'/%3E%3C/svg%3E"); } .badge[data-icon="gym"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12'/%3E%3Cpath d='M4 5v6M12 5v6M6 6v4M10 6v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12'/%3E%3Cpath d='M4 5v6M12 5v6M6 6v4M10 6v4'/%3E%3C/svg%3E"); } .badge[data-icon="water"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2s4 4.5 4 7.5a4 4 0 0 1-8 0C4 6.5 8 2 8 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2s4 4.5 4 7.5a4 4 0 0 1-8 0C4 6.5 8 2 8 2z'/%3E%3C/svg%3E"); } .badge[data-icon="mountain"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 13l4-7 3 4 2-3 3 6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 13l4-7 3 4 2-3 3 6z'/%3E%3C/svg%3E"); } .badge[data-icon="car"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10l1.5-4h9L14 10v3H2z'/%3E%3Cpath d='M4.5 13v1M11.5 13v1'/%3E%3Cpath d='M4 10h8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10l1.5-4h9L14 10v3H2z'/%3E%3Cpath d='M4.5 13v1M11.5 13v1'/%3E%3Cpath d='M4 10h8'/%3E%3C/svg%3E"); } .badge[data-icon="paw"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='6' r='1.2'/%3E%3Ccircle cx='11' cy='6' r='1.2'/%3E%3Ccircle cx='3.5' cy='9' r='1'/%3E%3Ccircle cx='12.5' cy='9' r='1'/%3E%3Cpath d='M8 8.5c2 0 3.5 2 3.5 3.5 0 1-1 1.5-2 1-1-.5-2-.5-3 0-1 .5-2 0-2-1 0-1.5 1.5-3.5 3.5-3.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='6' r='1.2'/%3E%3Ccircle cx='11' cy='6' r='1.2'/%3E%3Ccircle cx='3.5' cy='9' r='1'/%3E%3Ccircle cx='12.5' cy='9' r='1'/%3E%3Cpath d='M8 8.5c2 0 3.5 2 3.5 3.5 0 1-1 1.5-2 1-1-.5-2-.5-3 0-1 .5-2 0-2-1 0-1.5 1.5-3.5 3.5-3.5z'/%3E%3C/svg%3E"); } .badge[data-icon="piano"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='12' height='8' rx='1'/%3E%3Cpath d='M5 4v5M8 4v5M11 4v5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='12' height='8' rx='1'/%3E%3Cpath d='M5 4v5M8 4v5M11 4v5'/%3E%3C/svg%3E"); } .badge[data-icon="mirror"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='8' cy='7' rx='4' ry='5'/%3E%3Cpath d='M8 12v2M6 14h4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='8' cy='7' rx='4' ry='5'/%3E%3Cpath d='M8 12v2M6 14h4'/%3E%3C/svg%3E"); } .badge[data-icon="calendar"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='12' height='11' rx='1'/%3E%3Cpath d='M2 7h12M5 2v2M11 2v2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='12' height='11' rx='1'/%3E%3Cpath d='M2 7h12M5 2v2M11 2v2'/%3E%3C/svg%3E"); } .badge[data-icon="people"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='5' r='2'/%3E%3Ccircle cx='11' cy='6' r='1.5'/%3E%3Cpath d='M2 13c0-2.5 2-4 4-4s4 1.5 4 4'/%3E%3Cpath d='M10 13c0-1.5 1-3 3-3s2 1.5 2 3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='5' r='2'/%3E%3Ccircle cx='11' cy='6' r='1.5'/%3E%3Cpath d='M2 13c0-2.5 2-4 4-4s4 1.5 4 4'/%3E%3Cpath d='M10 13c0-1.5 1-3 3-3s2 1.5 2 3'/%3E%3C/svg%3E"); } .badge[data-icon="home"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8l6-5 6 5'/%3E%3Cpath d='M4 7v7h8V7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8l6-5 6 5'/%3E%3Cpath d='M4 7v7h8V7'/%3E%3C/svg%3E"); } .badge[data-icon="laundry"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='2' width='10' height='12' rx='1'/%3E%3Ccircle cx='8' cy='9' r='3'/%3E%3Cpath d='M5 4h0.01M7 4h2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='2' width='10' height='12' rx='1'/%3E%3Ccircle cx='8' cy='9' r='3'/%3E%3Cpath d='M5 4h0.01M7 4h2'/%3E%3C/svg%3E"); } .badge[data-icon="towel"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2h8v12H4z'/%3E%3Cpath d='M4 6h8M4 10h8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2h8v12H4z'/%3E%3Cpath d='M4 6h8M4 10h8'/%3E%3C/svg%3E"); } .badge[data-icon="grill"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h10a5 5 0 0 1-10 0z'/%3E%3Cpath d='M8 11v3M5 14h6M4 3v1M8 2v2M12 3v1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h10a5 5 0 0 1-10 0z'/%3E%3Cpath d='M8 11v3M5 14h6M4 3v1M8 2v2M12 3v1'/%3E%3C/svg%3E"); } .badge[data-icon="fence"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5v9M8 4v10M13 5v9'/%3E%3Cpath d='M2 8h12M2 11h12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5v9M8 4v10M13 5v9'/%3E%3Cpath d='M2 8h12M2 11h12'/%3E%3C/svg%3E"); } .badge[data-icon="trampoline"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='8' cy='8' rx='6' ry='2'/%3E%3Cpath d='M3 10v4M13 10v4M8 10v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='8' cy='8' rx='6' ry='2'/%3E%3Cpath d='M3 10v4M13 10v4M8 10v4'/%3E%3C/svg%3E"); } .badge[data-icon="snow"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v12M3 5l10 6M3 11l10-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v12M3 5l10 6M3 11l10-6'/%3E%3C/svg%3E"); } .badge[data-icon="leaf"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3C7 3 3 7 3 13c6 0 10-4 10-10z'/%3E%3Cpath d='M3 13l6-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3C7 3 3 7 3 13c6 0 10-4 10-10z'/%3E%3Cpath d='M3 13l6-6'/%3E%3C/svg%3E"); } .badge[data-icon="sun"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Cpath d='M8 1v2M8 13v2M1 8h2M13 8h2M3 3l1.5 1.5M11.5 11.5L13 13M3 13l1.5-1.5M11.5 4.5L13 3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Cpath d='M8 1v2M8 13v2M1 8h2M13 8h2M3 3l1.5 1.5M11.5 11.5L13 13M3 13l1.5-1.5M11.5 4.5L13 3'/%3E%3C/svg%3E"); } .badge[data-icon="wifi"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7a9 9 0 0 1 12 0M4.5 9.5a5.5 5.5 0 0 1 7 0'/%3E%3Ccircle cx='8' cy='12' r='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7a9 9 0 0 1 12 0M4.5 9.5a5.5 5.5 0 0 1 7 0'/%3E%3Ccircle cx='8' cy='12' r='1'/%3E%3C/svg%3E"); } .badge[data-icon="photo"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='12' height='10' rx='1'/%3E%3Ccircle cx='6' cy='7' r='1.5'/%3E%3Cpath d='M14 11l-4-4-5 5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='12' height='10' rx='1'/%3E%3Ccircle cx='6' cy='7' r='1.5'/%3E%3Cpath d='M14 11l-4-4-5 5'/%3E%3C/svg%3E"); } .badge[data-icon="stairs"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 14h3v-3h3V8h3V5h3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 14h3v-3h3V8h3V5h3'/%3E%3C/svg%3E"); } .badge[data-icon="gift"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='12' height='8' rx='1'/%3E%3Cpath d='M8 6v8M2 9h12'/%3E%3Cpath d='M8 6c-2 0-3.5-1-3.5-2s1-1.5 1.5-1 1.5 2 2 3c.5-1 1.5-2.5 2-3s1.5 0 1.5 1-1.5 2-3.5 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='12' height='8' rx='1'/%3E%3Cpath d='M8 6v8M2 9h12'/%3E%3Cpath d='M8 6c-2 0-3.5-1-3.5-2s1-1.5 1.5-1 1.5 2 2 3c.5-1 1.5-2.5 2-3s1.5 0 1.5 1-1.5 2-3.5 2z'/%3E%3C/svg%3E"); } .badge-solid { background: #e4dccb; border-color: transparent; color: var(--charcoal); } .badge-dark { background: rgba(246,242,234,0.92); border-color: rgba(255,255,255,0.5); color: var(--charcoal); } .badge-spruce { background: var(--navy); border-color: var(--navy); color: #e8efe9; } /* ---------- Header: anchored, translucent ---------- */ .site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 30; color: var(--charcoal); transition: color var(--dur) var(--ease); } /* The wordmark stays anchored with the menu pill. Over the home hero it reads ivory; once scrolled it turns charcoal so it holds against the ivory pages. */ .has-hero .site-head:not(.scrolled):not(.open) .wordmark, .site-head.over-dark:not(.open) .wordmark { color: var(--ivory); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); } .wordmark { transition: color 200ms var(--ease-out), text-shadow 200ms var(--ease-out); } .head-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--head-h); gap: var(--s-24); padding-top: 14px; max-width: none; padding-left: var(--edge); padding-right: var(--edge); } /* Logo: "22" in the hero serif beside a solid peak (the pyramid), the peak as tall as the digits and sitting on their baseline. */ .wordmark { display: inline-flex; align-items: baseline; gap: 0.28em; padding: 6px 0; font-family: var(--font-hero); font-weight: 400; font-size: 2.5rem; line-height: 1; letter-spacing: 0; white-space: nowrap; } .logo-peak { width: auto; height: 0.66em; flex: none; } /* Figma Component 1 (closed) and Menu Expanded 27:151 (open), both at half the Figma size. Closed: a 196x57 pill, Inquire on the left and the menu on the right. Open: the same glass grows from its top-right corner into a 568x440 card; the menu settles top-right and becomes an X, Inquire rides the left edge to the top-left, then the links fade up in turn. Closing runs a little faster. The closed pill also widens to the left to show short facts (weather, Wi-Fi, hot tub, pets, parking): once per visit as a tour, and on demand from [data-pill] links. Glass after Rectangle 4 / Rectangle 5: 36% black, drop shadow 0 4 4 25%, GLASS (frost 4, light 45deg, intensity 0.8, dispersion 0.5). CSS cannot refract, so it is a 4px backdrop blur, a rim lit from the top-left and a faint colour fringe. */ .head-right { position: relative; flex: none; width: 196px; height: 57px; } .head-glass { position: absolute; top: 0; right: 0; width: 196px; height: 57px; border-radius: 28.5px; overflow: hidden; background: rgba(0, 0, 0, 0.36); -webkit-backdrop-filter: blur(4px) saturate(1.4); backdrop-filter: blur(4px) saturate(1.4); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25), inset 1px 0 0 rgba(255, 120, 120, 0.1), inset -1px 0 0 rgba(120, 180, 255, 0.12), inset 0 0 10px rgba(255, 255, 255, 0.06); transition: width 360ms var(--ease-drawer), height 360ms var(--ease-drawer), border-radius 360ms var(--ease-drawer); } .head-glass::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.18) 28%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.12) 72%, rgba(255, 255, 255, 0.45)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } .site-head.open .head-glass { width: min(568px, calc(100vw - 2 * var(--gutter))); height: min(536px, calc(100svh - 28px)); border-radius: 25px; transition-duration: 460ms; } .menu-toggle { position: absolute; top: 6px; right: 6px; z-index: 2; display: block; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform 360ms var(--ease-drawer), scale 160ms var(--ease-out), filter var(--dur) var(--ease); } .site-head.open .menu-toggle { transform: translate(-18.5px, 18px); transition-duration: 460ms, 160ms, 200ms; } .menu-icon { display: block; width: 47px; height: 45px; } .menu-line { transform-box: fill-box; transform-origin: center; transition: transform 420ms var(--ease-drawer), opacity 200ms var(--ease-out); } .site-head.open .menu-line:nth-of-type(1) { transform: translateY(12px) rotate(45deg); } .site-head.open .menu-line:nth-of-type(2) { opacity: 0; transform: scaleX(0.2); } .site-head.open .menu-line:nth-of-type(3) { transform: translateY(-12px) rotate(-45deg); } .inquire-cta { position: absolute; top: 6px; left: calc(100% - 190px); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 124px; height: 45px; border-radius: 20px; background: var(--gold); color: #fff; font-family: var(--font-mono); font-weight: 600; font-size: 20px; line-height: 1; transition: background-color var(--dur) var(--ease), left 360ms var(--ease-drawer), transform 360ms var(--ease-drawer), scale 160ms var(--ease-out); } .site-head.open .inquire-cta { left: 24px; transform: translateY(18px); transition-duration: 200ms, 460ms, 460ms, 160ms; } .menu-toggle:active, .inquire-cta:active { scale: 0.96; } @media (hover: hover) and (pointer: fine) { .menu-toggle:hover { filter: brightness(1.15); } .inquire-cta:hover { background: var(--gold-hi); } } /* Info chips: the pill widens leftward to the active chip's width; chips crossfade with a touch of blur so one change reads as a single morph rather than two labels swapping. Exits are quicker than entrances. */ .site-head.info-on:not(.open) .head-glass { width: calc(196px + var(--info-w, 112px)); transition-duration: 560ms; } .head-info { position: absolute; top: 0; left: 0; z-index: 2; height: 57px; pointer-events: none; } .head-chip { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 7px; height: 57px; padding: 0 4px 0 18px; color: #fff; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; opacity: 0; transform: translateX(10px); filter: blur(3px); transition: opacity 160ms var(--ease-out), transform 240ms var(--ease-out), filter 160ms var(--ease-out); } .head-chip b { font-weight: 600; font-variant-numeric: tabular-nums; } .head-chip-icon { width: 17px; height: 17px; flex: none; } .head-chip-label { color: rgba(255, 255, 255, 0.82); } .site-head.info-on:not(.open) .head-chip.is-active { opacity: 1; transform: none; filter: none; transition: opacity 320ms var(--ease-out) 180ms, transform 520ms var(--ease-drawer) 120ms, filter 320ms var(--ease-out) 180ms; } @media (max-width: 480px) { .head-weather-place { display: none; } } /* Menu contents, after new.studio: a muted "Menu" label, large left-aligned links with open line spacing, then a two-column foot (Visit: the address; Inquire: email and form) with muted labels. Everything rises in turn on open. */ .menu { position: absolute; inset: 81px 32px 28px; z-index: 2; display: flex; flex-direction: column; font-family: var(--font-sans); color: #fff; visibility: hidden; transition: visibility 0s linear 200ms; } .site-head.open .menu { visibility: visible; transition: visibility 0s; } .menu-label { margin: 0; font-size: 0.9375rem; font-weight: 500; line-height: 1.3; color: rgba(255, 255, 255, 0.55); } .menu-links { display: flex; flex-direction: column; align-items: flex-start; margin-top: 14px; } .menu-links a { font-size: clamp(2rem, 8.4vw, 2.75rem); font-weight: 500; line-height: 1.36; letter-spacing: -0.01em; color: #fff; white-space: nowrap; transition: color var(--dur) var(--ease); } .menu-info { display: grid; grid-template-columns: 1fr auto; column-gap: var(--s-24); margin-top: auto; padding-top: var(--s-32); } .menu-info .menu-label { margin-bottom: 10px; font-size: 0.9375rem; font-weight: 500; color: rgba(255, 255, 255, 0.55); } .menu-info p, .menu-info a { display: block; margin: 0; font-size: 1.0625rem; font-weight: 400; line-height: 1.6; color: #fff; transition: color var(--dur) var(--ease); } .menu > *, .menu-links > a { opacity: 0; transform: translateY(10px); transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out); } .menu-links > a { transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out), color var(--dur) var(--ease); } .site-head.open .menu > *, .site-head.open .menu-links > a { opacity: 1; transform: none; transition: opacity 360ms var(--ease-out), transform 460ms var(--ease-drawer), color var(--dur) var(--ease); } .site-head.open .menu > .menu-label { transition-delay: 120ms, 120ms, 0ms; } .site-head.open .menu-links > a:nth-child(1) { transition-delay: 160ms, 160ms, 0ms; } .site-head.open .menu-links > a:nth-child(2) { transition-delay: 210ms, 210ms, 0ms; } .site-head.open .menu-links > a:nth-child(3) { transition-delay: 260ms, 260ms, 0ms; } .site-head.open .menu-links > a:nth-child(4) { transition-delay: 310ms, 310ms, 0ms; } .site-head.open .menu > .menu-info { transition-delay: 380ms, 380ms, 0ms; } .menu-links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; } @media (hover: hover) and (pointer: fine) { .menu-links a:hover, .menu-info a:hover { color: rgba(255, 255, 255, 0.7); } } @media (max-width: 480px) { .site-head.open .head-glass { height: min(470px, calc(100svh - 28px)); } .menu { inset: 81px 24px 24px; } .menu-info p, .menu-info a { font-size: 0.9375rem; } } @media (prefers-reduced-motion: reduce) { .head-glass, .menu-toggle, .inquire-cta, .menu-line { transition-duration: 0ms !important; } .head-chip, .site-head.info-on:not(.open) .head-chip.is-active { transform: none; filter: none; transition: opacity 200ms var(--ease) !important; } .menu > *, .menu-links > a, .site-head.open .menu > *, .site-head.open .menu-links > a { transform: none; transition: opacity 200ms var(--ease) !important; } } @media (max-width: 480px) { .wordmark { font-size: 2.125rem; } } /* ---------- Sections ---------- */ section { padding-top: var(--s-128); padding-bottom: var(--s-128); } @media (max-width: 767px) { section { padding-top: 72px; padding-bottom: 72px; } figcaption, .caption { flex-direction: column; gap: 2px; } .foot-grid .col { gap: 0; } .foot-grid .col a { display: block; margin: 0; } .slide { flex-basis: min(78vw, 320px); } .floor { padding: var(--s-48) 0; } .cta { padding: 80px 0; } .hero-full { padding-bottom: var(--s-24); } .hero-inner h1 { max-width: 12ch; } .heading { font-size: clamp(1.625rem, 1rem + 2vw, 2.5rem); } } .section-head { display: grid; gap: var(--s-12); max-width: 44rem; } .section-head .lede { margin-top: var(--s-4); } .band { background: var(--ivory-deep); } .band-dark { background: var(--navy); color: #fff; } .band-dark .lede, .band-dark .copy { color: rgba(246, 242, 234, 0.78); } .band-dark .small { color: rgba(246, 242, 234, 0.6); } .band-dark .kicker { color: var(--sky-soft); } .band-dark .textlink { color: var(--ivory); border-color: rgba(246,242,234,0.35); } .band-dark .textlink:hover { color: var(--ivory); border-color: var(--ivory); } .band-dark :focus-visible { outline-color: var(--ivory); } .rule { height: 1px; background: var(--hair); border: 0; margin: 0; } .intro { padding-top: calc(var(--head-h) + var(--s-60)); padding-bottom: var(--s-60); } .intro h1 { max-width: 18ch; } .intro .lede { margin-top: var(--s-16); } .intro .wrap { display: grid; gap: var(--s-12); } /* 12-column editorial grid */ .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-24); align-items: start; } .c1 { grid-column-end: span 1; } .c2 { grid-column-end: span 2; } .c3 { grid-column-end: span 3; } .c4 { grid-column-end: span 4; } .c5 { grid-column-end: span 5; } .c6 { grid-column-end: span 6; } .c7 { grid-column-end: span 7; } .c8 { grid-column-end: span 8; } .c9 { grid-column-end: span 9; } .c10 { grid-column-end: span 10; } .c12 { grid-column-end: span 12; } .off1 { grid-column-start: 2; } .off2 { grid-column-start: 3; } .off3 { grid-column-start: 4; } .off4 { grid-column-start: 5; } .off5 { grid-column-start: 6; } .off6 { grid-column-start: 7; } .off7 { grid-column-start: 8; } .off8 { grid-column-start: 9; } .sticky { position: sticky; top: calc(var(--head-h) + var(--s-24)); } @media (max-width: 1023px) { .grid > * { grid-column: 1 / -1 !important; } .sticky { position: static; } } /* ---------- Photography ---------- */ .photo { position: relative; overflow: hidden; border-radius: var(--r-photo); background: var(--ivory-deep); display: block; } .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { a.photo:hover img { transform: scale(1.02); } } .r-3x2 { aspect-ratio: 3 / 2; } .r-4x3 { aspect-ratio: 4 / 3; } .r-4x5 { aspect-ratio: 4 / 5; } .r-16x9 { aspect-ratio: 16 / 9; } .r-21x9 { aspect-ratio: 21 / 9; } .r-1x1 { aspect-ratio: 1; } @media (max-width: 767px) { .r-21x9 { aspect-ratio: 4 / 3; } .r-4x5 { aspect-ratio: 4 / 3; } } figcaption, .caption { margin-top: var(--s-12); font-size: var(--small-size); color: var(--ink-mute); display: flex; justify-content: space-between; gap: var(--s-16); } .caption .n { color: var(--gold); } /* ---------- Hero ---------- */ .hero-full { position: relative; min-height: 100svh; display: grid; align-items: end; padding: 0 0 var(--s-36); isolation: isolate; color: var(--ivory); overflow: hidden; } .hero-media, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; } .hero-media { z-index: -2; } .hero-media img { object-fit: cover; object-position: center 60%; z-index: -2; } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; z-index: -2; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .hero-video { display: none; } } .hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(20,18,15,0.9) 0%, rgba(20,18,15,0.7) 30%, rgba(20,18,15,0.4) 55%, rgba(20,18,15,0.12) 75%, rgba(20,18,15,0.35) 100%); } .hero-layout { display: grid; gap: var(--s-48); } .hero-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-24); align-items: center; } .hero-label { grid-column: 1 / span 1; margin: 0; font-size: var(--small-size); line-height: 1.4; color: rgba(246,242,234,0.95); text-shadow: 0 1px 3px rgba(0,0,0,0.5); } .hero-label-wide { grid-column: 2 / span 2; max-width: 26rem; } .scroll-cue { grid-column: 4; justify-self: end; display: inline-flex; align-items: center; gap: var(--s-12); font-size: var(--small-size); color: var(--ivory); text-decoration: none; text-shadow: 0 1px 3px rgba(0,0,0,0.5); } .scroll-cue-ring { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(246,242,234,0.7); border-radius: 50%; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .scroll-cue:hover .scroll-cue-ring { background: var(--ivory); color: var(--charcoal); } } .hero-title { font-size: clamp(3rem, 0.5rem + 7.4vw, 8.25rem); line-height: 0.98; max-width: 11ch; color: var(--ivory); text-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 2px 32px rgba(0,0,0,0.5); } @media (max-width: 767px) { .hero-layout { gap: var(--s-32); } .hero-meta { grid-template-columns: 1fr auto; } .hero-label { grid-column: 1; } .hero-label-wide { display: none; } .scroll-cue { grid-column: 2; } } .hero-inner { display: grid; gap: var(--s-16); } .hero-inner .kicker { color: rgba(246,242,234,0.95); text-shadow: 0 1px 3px rgba(0,0,0,0.5); } .hero-inner h1 { font-size: clamp(2.5rem, 1rem + 5.4vw, 5.5rem); max-width: 20ch; color: var(--ivory); text-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 2px 32px rgba(0,0,0,0.5); } .hero-sub { font-size: 1.125rem; line-height: 1.5; color: rgba(246,242,234,0.96); max-width: 30rem; text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 1px 14px rgba(0,0,0,0.4); } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-12); margin-top: var(--s-8); } .hero-facts { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: var(--s-36); padding-top: var(--s-24); border-top: 1px solid rgba(246,242,234,0.2); } .rise { animation: rise 700ms var(--ease-out) both; } .rise[data-d="1"] { animation-delay: 90ms; } .rise[data-d="2"] { animation-delay: 180ms; } .rise[data-d="3"] { animation-delay: 270ms; } .rise[data-d="4"] { animation-delay: 360ms; } @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* Hero title, per Figma (23:105 / 23:108): Instrument Serif, var(--oxblood), 200px on a 2250px-wide frame = 8.89vw. */ .hero-title { position: absolute; left: var(--edge); bottom: 5.6%; z-index: 0; margin: 0; font-family: var(--font-hero); font-weight: 400; font-size: max(3.25rem, 8.89vw); line-height: 0.99; letter-spacing: 0.02em; color: var(--oxblood); max-width: none; text-shadow: none; } .hero-title span, .hero-title em { display: block; } /* A soft scrim along the top keeps the logo and the glass legible over bright sky. */ .hero-full::after { content: ""; position: absolute; inset: 0 0 auto; height: 180px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0)); } /* Phones: the portrait crop puts the title over busy foliage, so lift it with a warm wash and give it more size. */ @media (max-width: 767px) { .hero-full::before { content: ""; position: absolute; inset: auto 0 0; height: 45%; z-index: -1; pointer-events: none; background: linear-gradient(rgba(246, 242, 234, 0), rgba(246, 242, 234, 0.72)); } .hero-title { font-size: 4.25rem; left: var(--edge); bottom: 6%; } } .hero-title em { font-style: italic; } /* ---------- Home: hero + room panels in one pinned row (after lpas.com) ---------- site.js adds .is-pinned on wide screens without reduced motion; otherwise everything simply stacks. */ .hero-dim { position: absolute; inset: 0; z-index: 1; background: #14120f; opacity: 0; pointer-events: none; } .panel { position: relative; display: grid; grid-template-rows: 60% 1fr; height: auto; aspect-ratio: 4 / 5; max-height: 92svh; color: var(--ivory); container-type: inline-size; } .panel-1 { background: var(--gold); } .panel-2 { background: var(--oxblood); } .panel-3 { background: var(--navy); } .panel-4 { background: var(--gold); } .panel-5 { background: var(--oxblood); } .panel-6 { background: var(--navy); } .panel-media { display: block; overflow: hidden; } .panel-media img { width: 100%; height: 100%; object-fit: cover; } /* Room panels follow the location card: Geist, uppercase titles, and the same 4.42cqw inset from every edge. */ .panel-body { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto auto; column-gap: var(--s-24); padding: 4.42cqw; font-family: var(--font-sans); } .panel-icon { grid-column: 1; grid-row: 1; align-self: center; display: block; width: 5.2cqw; min-width: 28px; height: auto; color: #fff; } .panel-plus { grid-column: 2; grid-row: 1; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(246, 242, 234, 0.7); border-radius: 50%; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform 160ms var(--ease-out); } .panel-plus:active { transform: scale(0.96); } @media (hover: hover) and (pointer: fine) { .panel-plus:hover { background: var(--ivory); color: var(--charcoal); } } .panel-title { grid-column: 1; grid-row: 3; font-size: max(6.03cqw, 1.75rem); font-weight: 600; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; } .panel-note { grid-column: 2; grid-row: 3; align-self: end; text-align: right; font-size: max(2.57cqw, 0.8125rem); font-weight: 500; line-height: 1.3; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.85); } .panel-count { grid-column: 1; grid-row: 4; margin-top: 1.6cqw; font-size: max(2.57cqw, 0.8125rem); font-weight: 500; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.75); font-variant-numeric: tabular-nums; } .hscroll.is-pinned .hscroll-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; } .hscroll.is-pinned .hscroll-track { display: flex; height: 100%; will-change: transform; } .hscroll.is-pinned .hero-full { flex: none; width: 100vw; height: 100%; min-height: 0; } .hscroll.is-pinned .panel { flex: none; width: clamp(420px, 44vw, 760px); height: 100%; aspect-ratio: auto; max-height: none; } .hscroll.is-pinned .panel-media img { will-change: transform; } .hscroll.is-pinned .panel-title { filter: blur(10px); opacity: 0.35; transition: filter 700ms var(--ease-out), opacity 700ms var(--ease-out); } .hscroll.is-pinned .panel.is-in .panel-title { filter: none; opacity: 1; } /* Phones: no colour blocks. Each panel is its photo with the text laid over a soft scrim, and the hero stays put (sticky) while the panels scroll up over it. With motion allowed (.is-stacked), site.js adds parallax to every photo and dims the hero as it is covered; titles sharpen from a blur as each panel arrives. */ @media (max-width: 899px) { .hscroll .hero-full { position: sticky; top: 0; height: 100svh; z-index: 0; } .hscroll .panel { position: relative; z-index: 1; display: block; aspect-ratio: 4 / 5; max-height: 86svh; overflow: hidden; background: #1a1714; } .hscroll .panel-media { position: absolute; inset: 0; height: 100%; } .hscroll .panel-body { position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.74)); } .hscroll .loc-panel { --pi: 1; --pb: 1; } .hscroll .loc-media { height: 100%; clip-path: none; } .hscroll .loc-blue { inset: 0; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.74)); clip-path: none; } .hscroll .loc-links { top: 64cqh; opacity: 1; transform: none; } } .hscroll.is-stacked .panel-media img, .hscroll.is-stacked .loc-media img { will-change: transform; } /* Phones with scroll-driven animations: the parallax and the hero dim run on the browser's own scroll timeline, in step with the finger, instead of in script a frame behind. Each photo drifts up through its panel the whole time the panel is on screen; the hero darkens as the first panel slides over it. (site.js handles browsers without this.) */ @supports (animation-timeline: view()) { @media (max-width: 899px) and (prefers-reduced-motion: no-preference) { /* Each panel carries its own view timeline (its photo frame clips, so the photo cannot use view() directly); the first panel's timeline is also shared up to the hero for the dim. */ .hscroll { timeline-scope: --first-panel; } .hscroll .panel { view-timeline-name: --panel; view-timeline-axis: block; } .hscroll .hscroll-track > .panel:first-of-type { view-timeline-name: --panel, --first-panel; view-timeline-axis: block, block; } .hscroll .panel-media img, .hscroll .loc-media img { animation: panel-parallax linear both; animation-timeline: --panel; animation-range: cover 0% cover 100%; } .hscroll .hero-dim { animation: hero-cover-dim linear both; animation-timeline: --first-panel; animation-range: entry 0% entry 100%; } } } @keyframes panel-parallax { from { transform: translate3d(0, 8%, 0) scale(1.18); } to { transform: translate3d(0, -8%, 0) scale(1.18); } } @keyframes hero-cover-dim { from { opacity: 0; } to { opacity: 0.6; } } .hscroll.is-stacked .panel-title { filter: blur(10px); opacity: 0.35; transition: filter 700ms var(--ease-out), opacity 700ms var(--ease-out); } .hscroll.is-stacked .panel.is-in .panel-title { filter: none; opacity: 1; } @media (max-width: 767px) { .panel-plus { width: 44px; height: 44px; } } /* Location card, per Figma: collapsed (23:112 navy strip, 23:94 blue, LOCATION top-left) to expanded (23:116 blue fills to the photo, links in, LOCATION bottom-right). Sizes are Figma px / 1244 (card width) in cqw. --pi drives the photo sliding in from the side, --pb the blue expanding; site.js sets both from the row position. Without the pinned row both stay 1, so the card shows expanded. */ .loc-panel { --pi: 1; --pb: 1; display: block; position: relative; overflow: hidden; background: var(--navy); container-type: inline-size; } .loc-media { position: absolute; inset: 0 0 auto; height: 55.2%; overflow: hidden; clip-path: inset(0 0 0 calc((1 - var(--pi)) * 100%)); } .loc-media img { width: 100%; height: 100%; object-fit: cover; transform: translateX(calc((1 - var(--pi)) * 30%)); } .loc-blue { position: absolute; inset: auto 0 0; height: 44.8%; background: var(--sky); color: #fff; font-family: var(--font-sans); container-type: size; clip-path: inset(calc((1 - var(--pb)) * 31.8%) 0 0 0); } .loc-links { position: absolute; top: 10.6cqh; left: 4.42cqw; display: flex; gap: 9.4cqw; opacity: clamp(0, (var(--pb) - 0.6) * 2.5, 1); transform: translateY(calc((1 - var(--pb)) * 12px)); } .loc-links a { display: inline-flex; align-items: center; gap: 2.25cqw; font-size: max(3.86cqw, 1rem); font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.2; } .loc-links img { width: 2cqw; height: auto; transform: rotate(-45deg); transition: transform 200ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .loc-links a:hover img { transform: rotate(-45deg) translateX(3px); } } .loc-address { position: absolute; left: 4.42cqw; bottom: 6.1cqh; display: flex; align-items: center; gap: 1.6cqw; margin: 0; font-size: max(2.57cqw, 0.8125rem); font-weight: 500; line-height: 1; letter-spacing: 0.02em; } .loc-pin { position: relative; display: block; width: 1.93cqw; flex: none; } .loc-pin img { display: block; width: 100%; height: auto; } .loc-pin .loc-pin-dot { position: absolute; left: 32%; top: 24%; width: 38%; } .loc-title { position: absolute; left: 4.42cqw; top: 39.4cqh; margin: 0; font-size: max(6.03cqw, 1.75rem); font-weight: 600; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; transform: translate(calc(var(--pb) * (100cqw - 100% - 8.84cqw)), calc(var(--pb) * (54.5cqh - 100%))); } @media (prefers-reduced-motion: reduce) { .loc-panel { --pi: 1; --pb: 1; } } /* Scroll reveal (after lpas.com): components glide in from the right, photos wipe open from their right edge. Fires once via IntersectionObserver. Groups stagger 70ms. */ main { overflow-x: clip; } .reveal { opacity: 0; transform: translateX(56px); transition: opacity 600ms var(--ease-out), transform 900ms var(--ease-out); } .reveal.in { opacity: 1; transform: none; } .reveal.done, .reveal-group.done > * { transition: none; } .reveal-group > * { opacity: 0; transform: translateX(48px); transition: opacity 500ms var(--ease-out), transform 800ms var(--ease-out); } .reveal-group.in > * { opacity: 1; transform: none; } .reveal-group.in > :nth-child(2) { transition-delay: 70ms; } .reveal-group.in > :nth-child(3) { transition-delay: 140ms; } .reveal-group.in > :nth-child(4) { transition-delay: 210ms; } .reveal-group.in > :nth-child(n+5) { transition-delay: 280ms; } .wipe { clip-path: inset(0 0 0 100%); transition: clip-path 1100ms var(--ease-drawer) var(--wd, 0ms); } .wipe.in { clip-path: inset(0); } .wipe img { transform: scale(1.12) translateX(6%); transition: transform 1400ms var(--ease-out) var(--wd, 0ms); } .wipe.in img { transform: none; } .wipe.done { transition: none; } .wipe.done img { transition: transform 600ms var(--ease-out); } .no-io .reveal, .no-io .reveal-group > * { opacity: 1; transform: none; } .no-io .wipe { clip-path: none; } .no-io .wipe img { transform: none; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-group > * { transform: none; transition: opacity 200ms var(--ease); } .wipe { clip-path: none; opacity: 0; transition: opacity 300ms var(--ease); } .wipe.in { opacity: 1; } .wipe img, .wipe.in img { transform: none; transition: none; } .rise { animation: rise-fade 300ms var(--ease) both; } } @keyframes rise-fade { from { opacity: 0; } to { opacity: 1; } } /* ---------- Bento (the house) ---------- */ .bento { display: grid; grid-template-columns: 1fr 1.15fr 1fr; grid-template-rows: clamp(220px, 23vw, 320px) clamp(220px, 23vw, 320px) clamp(200px, 19vw, 270px); gap: var(--s-16); } .bento > * { border-radius: var(--r-photo); overflow: hidden; min-height: 0; position: relative; } .bento a.photo { transition: transform 200ms var(--ease-out); } .bento a.photo:active { transform: scale(0.99); } .bento .photo { height: 100%; aspect-ratio: auto; } .bento .photo img { height: 100%; } .bento { --bgap: var(--s-16); --bR: 72px; } /* The tall photo extends under the key card and is masked so it fills the card's rounded corner and hugs its edge, then leaves the normal gap below the curve. */ .b-tall { grid-column: 1; grid-row: 1 / 3; margin-right: calc(-1 * (var(--bgap) + var(--bR))); -webkit-mask-image: linear-gradient(#000, #000), radial-gradient(circle at 100% 100%, transparent calc(var(--bR) + var(--bgap) - 0.5px), #000 calc(var(--bR) + var(--bgap) + 0.5px)); mask-image: linear-gradient(#000, #000), radial-gradient(circle at 100% 100%, transparent calc(var(--bR) + var(--bgap) - 0.5px), #000 calc(var(--bR) + var(--bgap) + 0.5px)); -webkit-mask-size: calc(100% - var(--bgap) - var(--bR)) 100%, calc(var(--bgap) + var(--bR)) var(--bR); mask-size: calc(100% - var(--bgap) - var(--bR)) 100%, calc(var(--bgap) + var(--bR)) var(--bR); -webkit-mask-position: 0 0, 100% 0; mask-position: 0 0, 100% 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .b-tall .b-cap { right: calc(var(--bgap) + var(--bR) + var(--s-16)); } .b-key { grid-column: 2; grid-row: 1; border-top-left-radius: var(--bR); background: var(--white); padding: var(--s-32) var(--s-32) var(--s-24) var(--s-36); display: grid; align-content: space-between; gap: var(--s-16); box-shadow: inset 0 0 0 1px var(--hair); } .b-key .sub { font-size: clamp(1.375rem, 1rem + 1vw, 1.75rem); } .b-key .acts { display: flex; flex-wrap: wrap; gap: var(--s-8); } .b-tr { grid-column: 3; grid-row: 1; } .b-wide { grid-column: 2 / 4; grid-row: 2; } .b-bottom { grid-column: 1 / 3; grid-row: 3; } .b-br { grid-column: 3; grid-row: 3; background: var(--charcoal); color: var(--ivory); padding: var(--s-24); display: grid; align-content: space-between; gap: var(--s-12); } .b-br .n { font-family: var(--font-display); font-size: clamp(2rem, 1rem + 2vw, 3rem); line-height: 1; } .b-br .small { color: rgba(246,242,234,0.65); } .b-cap { position: absolute; left: var(--s-16); right: var(--s-16); bottom: var(--s-16); display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: end; justify-content: space-between; z-index: 1; pointer-events: none; } .b-cap .t { font-family: var(--font-display); font-size: 1.25rem; color: var(--ivory); text-shadow: 0 1px 12px rgba(0,0,0,0.5); } .b-cap .badges { gap: 6px; } .bento .photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,18,15,0.55), rgba(20,18,15,0) 45%); pointer-events: none; } @media (max-width: 900px) { .bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .bento > * { grid-column: auto !important; grid-row: auto !important; } .bento .photo { aspect-ratio: 4 / 3; height: auto; } .b-key { grid-column: 1 / -1 !important; border-top-left-radius: 40px; } .b-tall { margin-right: 0; -webkit-mask-image: none; mask-image: none; } .b-tall .b-cap { right: var(--s-16); } .b-tall, .b-wide, .b-bottom { grid-column: 1 / -1 !important; } .b-tall .photo, .b-tall, .b-wide, .b-bottom { aspect-ratio: 3 / 2; } } /* ---------- Carousel (rooms) ---------- */ .carousel { position: relative; } .car-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-24); margin-bottom: var(--s-36); } .car-nav { display: flex; gap: var(--s-8); flex: none; } .car-nav .btn { width: 48px; padding: 0; font-size: 1.25rem; } .track { display: flex; gap: var(--s-16); overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: var(--s-4); } .track::-webkit-scrollbar { display: none; } .slide { flex: 0 0 clamp(280px, 30vw, 400px); scroll-snap-align: start; display: grid; gap: var(--s-12); align-content: start; } .slide .photo { aspect-ratio: 4 / 3; } .slide .sub { font-size: 1.25rem; } .slide .why { color: var(--ink-soft); font-size: var(--small-size); } .slide .photo .badge { position: absolute; top: var(--s-12); left: var(--s-12); z-index: 1; } .track-edge { position: absolute; top: 0; bottom: 0; width: var(--gutter); pointer-events: none; z-index: 1; } @media (max-width: 767px) { .car-head { flex-direction: column; align-items: start; } } /* ---------- Statement ---------- */ .statement-text { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.75rem, 1rem + 2.6vw, 3rem); line-height: 1.12; letter-spacing: 0; text-wrap: balance; } .statement-text .dim { color: var(--ink-mute); } /* ---------- Room index (hairline rows) ---------- */ .index { border-top: 1px solid var(--hair); } .index-row { display: grid; grid-template-columns: 3rem 1fr auto; gap: var(--s-16); align-items: center; padding: var(--s-16) 0; border-bottom: 1px solid var(--hair); } .index-row > * { transition: transform var(--dur) var(--ease); } a.index-row:hover > * { transform: translateX(var(--s-8)); } .index-row .n { font-size: var(--xs-size); color: var(--gold); font-variant-numeric: tabular-nums; } .index-row .t { font-family: var(--font-display); font-size: 1.375rem; letter-spacing: 0; } .index-row .badges { justify-content: end; } @media (max-width: 767px) { .index-row { grid-template-columns: 2.5rem 1fr; } .index-row .badges { grid-column: 2; justify-content: start; } } /* ---------- Cards ---------- */ .cards { display: grid; gap: var(--s-48) var(--s-24); } @media (min-width: 768px) { .cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .cards.three { grid-template-columns: repeat(3, 1fr); } } .card { display: grid; gap: var(--s-16); align-content: start; } .card-body { display: grid; gap: var(--s-12); } .card p { color: var(--ink-soft); } .card .btn { justify-self: start; } /* Room card */ .room { display: grid; gap: var(--s-16); align-content: start; scroll-margin-top: calc(var(--head-h) + var(--s-24)); } .room-head { display: grid; gap: var(--s-8); } .room-head .sub { font-size: 1.375rem; } .room p { color: var(--ink-soft); } .room .note { font-size: var(--small-size); color: var(--ink-mute); } /* Floor spreads */ .floor { padding: var(--s-60) 0; border-top: 1px solid var(--hair); } .floor:first-of-type { border-top: 0; padding-top: 0; } .floor-label { display: grid; gap: var(--s-8); } .floor-label .heading { font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem); } /* Feature spread (photo + copy) */ .spread { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-24); align-items: center; } .spread > .media { grid-column: span 7; } .spread > .text { grid-column: 9 / span 4; display: grid; gap: var(--s-12); } .spread.flip > .media { grid-column: 6 / span 7; order: 2; } .spread.flip > .text { grid-column: 1 / span 4; order: 1; } .spread + .spread { margin-top: var(--s-60); } .spread .text p { color: var(--ink-soft); } @media (max-width: 1023px) { .spread > .media, .spread > .text, .spread.flip > .media, .spread.flip > .text { grid-column: 1 / -1; order: initial; } } /* Details */ details { border-top: 1px solid var(--hair); } details:last-child { border-bottom: 1px solid var(--hair); } summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-16); padding: var(--s-16) 0; color: var(--charcoal); } summary::-webkit-details-marker { display: none; } summary::after { content: "+"; font-family: var(--font-display); font-size: 1.5rem; color: var(--ink-mute); transition: transform var(--dur) var(--ease); flex: none; } details[open] summary::after { transform: rotate(45deg); } details .answer { padding: 0 0 var(--s-24); color: var(--ink-soft); max-width: var(--measure); } /* Seasons: tall editorial panels */ .seasons { display: grid; gap: var(--s-16); } @media (min-width: 768px) { .seasons { grid-template-columns: repeat(3, 1fr); } } .season { position: relative; display: grid; align-content: end; gap: var(--s-8); min-height: 420px; padding: var(--s-24); border-radius: var(--r-photo); color: var(--ivory); overflow: hidden; isolation: isolate; background: var(--navy); transition: transform var(--dur) var(--ease); } .season img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 600ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .season:hover img { transform: scale(1.03); } } .season:hover { transform: translateY(-2px); } .season::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(20,18,15,0.72), rgba(20,18,15,0.1) 60%); } .season .sub { color: var(--ivory); font-size: 1.75rem; } .season .small { color: rgba(246,242,234,0.78); } .season .badge { position: absolute; top: var(--s-12); left: var(--s-12); } /* Spec / point lists */ .spec-list { display: grid; } .spec { display: grid; grid-template-columns: 1fr auto; gap: var(--s-24); padding: var(--s-12) 0; border-bottom: 1px solid var(--hair); align-items: baseline; } .spec:first-child { border-top: 1px solid var(--hair); } .spec dt { color: var(--ink-soft); } .spec dd { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0; text-align: right; } .band-dark .spec { border-color: rgba(246,242,234,0.15); } .band-dark .spec dt { color: rgba(246,242,234,0.7); } .band-dark .badge, .b-br .badge { background: rgba(246,242,234,0.88); color: var(--charcoal); border-color: transparent; } /* Mountains list */ .mountains { display: grid; } .mountains li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--s-16); padding: var(--s-16) 0; border-bottom: 1px solid rgba(246,242,234,0.15); font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem); letter-spacing: 0; padding: var(--s-12) 0; } .mountains li:first-child { border-top: 1px solid rgba(246,242,234,0.15); } .mountains li span { font-family: var(--font-sans); font-size: var(--small-size); color: rgba(246,242,234,0.6); letter-spacing: 0; } /* Map */ .map { border: 1px solid var(--hair); border-radius: var(--r-photo); overflow: hidden; aspect-ratio: 16 / 10; background: var(--ivory-deep); } .band-dark .map { border-color: rgba(246,242,234,0.15); } .map-note { margin-top: var(--s-12); } .map iframe { width: 100%; height: 100%; border: 0; display: block; } /* CTA band with image */ .cta { position: relative; isolation: isolate; color: var(--ivory); padding: var(--s-128) 0; overflow: hidden; } .cta .bg, .cta .bg img { position: absolute; inset: 0; width: 100%; height: 100%; } .cta .bg { z-index: -2; } .cta .bg img { object-fit: cover; } .cta .shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgba(20,18,15,0.8), rgba(20,18,15,0.5) 60%, rgba(20,18,15,0.3)); } .cta-inner { display: grid; gap: var(--s-24); } @media (min-width: 1024px) { .cta-inner { grid-template-columns: 7fr 5fr; align-items: end; gap: var(--s-60); } } .cta h2 { color: var(--ivory); white-space: nowrap; font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem); } @media (max-width: 640px) { .cta h2 { white-space: normal; } } .cta .lede { color: rgba(246,242,234,0.82); } .cta .kicker { color: rgba(246,242,234,0.75); } .cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-12); align-items: center; } /* Form */ .form { display: grid; gap: var(--s-48); } .form-main { display: grid; gap: var(--s-48); } .fieldset { border: 0; padding: 0; margin: 0; display: block; min-width: 0; } .fieldset > * + * { margin-top: var(--s-24); } .fieldset .legend { font-family: var(--font-display); font-size: 1.375rem; letter-spacing: 0; margin: 0 0 var(--s-16); } .field { display: grid; gap: var(--s-8); min-width: 0; } .field label { font-size: var(--small-size); color: var(--ink-soft); } .field input, .field textarea, .field select { width: 100%; background: rgba(255,255,255,0.5); border: 1px solid var(--hair-strong); padding: var(--s-12); border-radius: var(--r-btn); color: var(--charcoal); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); appearance: none; -webkit-appearance: none; } .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235c5750' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: var(--s-32); } .field textarea { resize: vertical; min-height: 110px; } .field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(11,52,102,0.15); } .field.invalid input, .field.invalid textarea, .field.invalid select { border-color: #b4553f; } .field .err { font-size: var(--small-size); color: #9c4631; display: none; } .field.invalid .err { display: block; } .row-2 { display: grid; gap: var(--s-24); } @media (min-width: 640px) { .row-2 { grid-template-columns: 1fr 1fr; } } .check { display: flex; gap: var(--s-12); align-items: flex-start; color: var(--ink-soft); min-height: 44px; padding: 10px 0; } .check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--navy); flex: none; } .check.invalid { color: #9c4631; } .check .err { display: none; font-size: var(--small-size); color: #9c4631; } .check.invalid .err { display: block; } .cond { display: none; } .cond.on { display: grid; gap: var(--s-24); } .form-foot { display: grid; gap: var(--s-16); justify-items: start; } .form-state { display: none; border-top: 1px solid var(--hair-strong); padding-top: var(--s-24); } .form.done .form-state.ok { display: grid; gap: var(--s-12); } .form.failed .form-state.fail { display: grid; gap: var(--s-12); } .form.done .form-main { display: none; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* ---------- Calendar (inquiry form) ---------- */ .stay-dates { position: relative; display: grid; gap: var(--s-12); } .cal-btn { width: 100%; text-align: left; background: rgba(255,255,255,0.5); border: 1px solid var(--hair-strong); border-radius: var(--r-btn); padding: var(--s-12); min-height: 48px; color: var(--ink-mute); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .cal-btn::after { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; opacity: 0.7; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='2' y='3' width='12' height='11' rx='1'/%3E%3Cpath d='M2 7h12M5 2v2M11 2v2'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='2' y='3' width='12' height='11' rx='1'/%3E%3Cpath d='M2 7h12M5 2v2M11 2v2'/%3E%3C/svg%3E") no-repeat center / contain; } .cal-btn.has { color: var(--charcoal); } .cal-btn[aria-expanded="true"], .cal-btn:focus-visible { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(11,52,102,0.15); } .field.invalid .cal-btn { border-color: #b4553f; } .cal-pop { position: absolute; top: calc(100% + var(--s-8)); left: 0; z-index: 20; width: min(100%, 640px); background: var(--white); border: 1px solid var(--hair); border-radius: 8px; padding: var(--s-16); box-shadow: 0 1px 2px rgba(31,29,26,0.06), 0 24px 48px -24px rgba(31,29,26,0.35); animation: cal-in 200ms var(--ease-out); } @keyframes cal-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); margin-bottom: var(--s-12); } .cal-head .btn { width: 40px; padding: 0; } .cal-months { display: grid; gap: var(--s-24); } @media (min-width: 640px) { .cal-months { grid-template-columns: 1fr 1fr; } } .cal-title { font-family: var(--font-display); font-size: 1.125rem; letter-spacing: 0; margin: 0 0 var(--s-8) 4px; } .cal-title span { color: var(--ink-mute); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; } .cal-dow { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); text-align: center; padding: 6px 0 8px; } .cal-cell { position: relative; aspect-ratio: 1; min-height: 40px; display: grid; place-items: center; border: 0; background: transparent; color: var(--charcoal); font-size: var(--small-size); font-variant-numeric: tabular-nums; cursor: pointer; padding: 0; } .cal-cell span { position: relative; z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-btn); transition: background-color 120ms var(--ease), color 120ms var(--ease); } @media (hover: hover) and (pointer: fine) { .cal-cell:not([disabled]):hover span { background: var(--ivory-deep); } } .cal-cell.today span { box-shadow: inset 0 0 0 1px var(--hair-strong); } .cal-cell.past, .cal-cell[disabled] { color: var(--ink-mute); opacity: 0.45; cursor: default; } .cal-cell.mid::before, .cal-cell.start.ranged::before, .cal-cell.end::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); height: 36px; left: 0; right: 0; background: var(--ivory-deep); } .cal-cell.mid::before { left: 0; right: 0; } .cal-cell.end::before { right: 50%; } .cal-cell.start span, .cal-cell.end span { background: var(--gold); color: #fff; } .cal-cell.start.ranged::before { left: 50%; } .cal-cell:focus-visible { outline: none; } .cal-cell:focus-visible span { box-shadow: 0 0 0 2px var(--navy); } .cal-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); margin-top: var(--s-12); padding-top: var(--s-12); border-top: 1px solid var(--hair); } .cal-clear { background: none; border: 0; padding: 0; padding-bottom: 2px; cursor: pointer; font-size: var(--small-size); } @media (max-width: 639px) { .cal-pop { left: 0; right: 0; width: auto; padding: var(--s-12); } .cal-cell span { width: 100%; height: 40px; } } @media (prefers-reduced-motion: reduce) { .cal-pop { animation: none; } } /* Footer */ .site-foot { display: flex; flex-direction: column; min-height: 100vh; min-height: 100lvh; border-top: 1px solid var(--hair); padding: var(--s-60) 0 var(--s-36); } /* The footer fills the screen and shares the header's edge inset; site.js sets its top padding so its logo sits at exactly the header logo's height. Scrolling to the end, the footer logo rises naturally onto the fixed header logo; when they meet the header copy hides, leaving one logo anchored there. */ .site-foot .wrap { flex: 1; display: flex; flex-direction: column; max-width: none; padding-left: var(--edge, var(--gutter)); padding-right: var(--edge, var(--gutter)); } .site-foot .foot-bottom { margin-top: auto; } /* The link columns start below the header strip, so the floating menu pill never sits on them. */ @media (min-width: 768px) { .site-foot .foot-grid > .col:not(:first-child) { padding-top: calc(var(--head-h) + var(--s-24)); } } .site-head.logo-merged .wordmark { visibility: hidden; } .site-foot .wordmark { justify-self: start; } .foot-grid { display: grid; gap: var(--s-32); } @media (min-width: 768px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-48); } } .foot-grid .col { display: grid; gap: var(--s-8); font-size: var(--small-size); color: var(--ink-mute); align-content: start; } .foot-grid .col a { color: var(--ink-soft); transition: color var(--dur) var(--ease); display: inline-block; padding: 10px 0; margin: -10px 0; } .foot-grid .col a:hover { color: var(--navy); } .foot-grid .col .label { color: var(--charcoal); margin-bottom: var(--s-4); } .foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-12); margin-top: var(--s-48); align-self: stretch; padding-top: var(--s-24); border-top: 1px solid var(--hair); font-size: var(--small-size); color: var(--ink-mute); } .foot-legal { font-size: var(--small-size); color: var(--ink-mute); max-width: 44rem; margin-top: var(--s-16); } /* Gallery + lightbox */ .gallery { display: grid; gap: var(--s-16); } @media (min-width: 768px) { .gallery { grid-template-columns: repeat(3, 1fr); } .gallery .wide { grid-column: span 2; } } .gallery button { padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; width: 100%; } .lightbox { position: fixed; inset: 0; background: rgba(31,29,26,0.94); display: none; align-items: center; justify-content: center; z-index: 60; padding: var(--s-24); } .lightbox.on { display: flex; animation: lb-in 200ms var(--ease-out); } @keyframes lb-in { from { opacity: 0; } to { opacity: 1; } } .lightbox figure { display: grid; gap: var(--s-12); max-width: 1400px; } .lightbox img { max-width: 100%; max-height: 84vh; width: auto; margin: 0 auto; border-radius: var(--r-photo); object-fit: contain; } .lightbox figcaption { color: rgba(246,242,234,0.75); justify-content: center; } .lightbox .close { position: absolute; top: var(--s-16); right: var(--s-16); } .lightbox .prev, .lightbox .next { position: absolute; top: 50%; transform: translateY(-50%); } .lightbox .prev { left: var(--s-16); } .lightbox .next { right: var(--s-16); } @media (max-width: 640px) { .lightbox .prev, .lightbox .next { top: auto; bottom: var(--s-16); transform: none; } }