@layer reset, base, layout, components, utilities; /* Self-hosted display face (Swiss Typefaces). Bold only — the one weight we licensed and the only one the design uses. Unlayered on purpose: @font-face is not a style rule and gains nothing from the cascade layers below. */ @font-face { font-family: "SangBleu Sunrise"; src: url("/assets/SangBleuSunrise-Bold-0c4e76c0.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ============================================ SPIN-OFF SITES — per-site theming hook -------------------------------------------- On a spin-off domain (see config/spinoff_sites.yml) the carries data-site="" and a --site-color custom property from the collection. Hand-design each site by targeting its slug — no framework needed. Example: [data-site="zion-village"] { --color-primary: var(--site-color); } [data-site="zion-village"] .hero__headline { font-style: italic; } ============================================ */ /* ============================================ RESET ============================================ */ @layer reset { *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, video, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } } /* ============================================ BASE — Design tokens & typography ============================================ */ @layer base { :root { /* Colors — extracted from mockups */ --color-primary: #1a2332; --color-primary-light: #2a3a4e; --color-primary-hover: #243044; --color-accent: #c4a265; --color-accent-light: #dbc08a; --color-accent-bg: #f5f0e4; --color-text: #1a1a1a; --color-text-secondary: #555; --color-text-tertiary: #888; --color-bg: #fafaf8; --color-bg-dark: #0f1923; --color-bg-muted: #f5f5f3; --color-border: #e5e5e2; --color-border-light: #efefed; --color-white: #fff; --color-black: #111; --color-star: #e8b34a; /* Brand warm tones — from the home hero mockup */ --color-clay: #a8512c; /* terracotta: search button, eyebrow dot, home CTAs */ --color-clay-hover: #91441f; --color-sand: #e6b68c; /* soft peach: italic headline accent */ /* Typography — DM Sans + DM Serif Display */ --font-sans: "DM Sans", system-ui, -apple-system, sans-serif; --font-serif: "DM Serif Display", Georgia, serif; /* Editorial display face for section titles. Bold-only, so anything using it must set font-weight: 700 or the browser will synthesise a fake bold. */ --font-display: "SangBleu Sunrise", Georgia, "Times New Roman", serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 0.9375rem; --font-size-lg: 1.0625rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 2rem; --font-size-4xl: 2.75rem; --font-size-5xl: 3.5rem; --line-height-tight: 1.1; --line-height-snug: 1.25; --line-height-normal: 1.55; --line-height-relaxed: 1.7; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --letter-spacing-tight: -0.02em; --letter-spacing-normal: -0.01em; /* Spacing — generous for luxury feel */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 3.5rem; --space-3xl: 5rem; --space-4xl: 7rem; --space-5xl: 10rem; /* The home page's single left edge. The nav logo, the hero copy and the property rails all used their own vw factor (4vw / 5vw / 3vw), which read as three slightly different margins stacked down the page. One token so they line up at every width. */ --page-gutter: clamp(1rem, 3vw, 4rem); /* Radius — softened */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-full: 9999px; /* Shared trip-picker tokens (see trip_picker.css) — Stay Utah palette. Only these colours differ from the spin-offs; the component is shared. */ --tp-ink: var(--color-text); --tp-mute: var(--color-text-tertiary); --tp-line: var(--color-border); --tp-tint: var(--color-bg-muted); --tp-font: var(--font-sans); --tp-accent: var(--color-accent); /* One CTA colour across the funnel — the search button, Check availability and Confirm and pay were three different reds/golds. */ --tp-cta: var(--color-clay); --tp-on-cta: var(--color-white); --tp-radius: 24px; --tp-max: 1280px; /* Shadows — subtle, layered depth */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.02); --shadow-md: 0 4px 12px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.03); --shadow-lg: 0 12px 40px rgba(0,0,0,0.07), 0 4px 12px rgba(0,0,0,0.03); --shadow-xl: 0 20px 60px rgba(0,0,0,0.08), 0 6px 16px rgba(0,0,0,0.04); --shadow-card: 0 2px 8px rgba(0,0,0,0.04); --shadow-card-hover: 0 12px 36px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.04); /* Transitions — slow and deliberate */ --transition-fast: 200ms ease; --transition-base: 300ms ease; --transition-slow: 500ms cubic-bezier(0.16, 1, 0.3, 1); } html { font-family: var(--font-sans); font-size: 16px; line-height: var(--line-height-normal); color: var(--color-text); background-color: var(--color-bg); letter-spacing: var(--letter-spacing-normal); } body { min-height: 100dvh; display: flex; flex-direction: column; } main { flex: 1; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); line-height: var(--line-height-tight); font-weight: var(--font-weight-normal); letter-spacing: var(--letter-spacing-tight); } h1 { font-size: var(--font-size-5xl); } h2 { font-size: var(--font-size-2xl); } h3 { font-size: var(--font-size-lg); } em { font-family: var(--font-serif); font-style: italic; } p { color: var(--color-text-secondary); } } /* ============================================ LAYOUT ============================================ */ @layer layout { .container { max-width: 1280px; margin-inline: auto; padding-inline: var(--space-lg); } } /* ============================================ COMPONENTS ============================================ */ @layer components { /* --- Nav --- */ .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); max-width: 1280px; margin-inline: auto; position: relative; } .nav__logo { display: flex; align-items: center; } .nav__logo-img { height: 24px; width: auto; } /* Logo: full wordmark on desktop, the Delicate Arch mark on mobile. The mark inherits `color` (fill: currentColor) so it flips white over the hero photo and dark on solid headers. Toggled in the mobile media query. */ .nav__logo-mark { display: none; color: var(--color-text); } .nav__logo-mark .logo-mark { height: 30px; width: auto; } /* Centered search slot — home only, filled via content_for :nav_search. The CTA terracotta now comes from the root token, so there is nothing to override here. */ .nav__search { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; } /* Pill sizing overrides live unlayered at the bottom of this file — trip_picker.css is unlayered, so layered overrides here would lose. */ .nav__menu { display: flex; align-items: center; gap: var(--space-xl); } .nav__links { display: flex; gap: var(--space-xl); align-items: center; } .nav__link { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); transition: color var(--transition-fast); &:hover { color: var(--color-text); } } .nav__actions { display: flex; align-items: center; gap: var(--space-lg); } .nav__user { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); } .nav__avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-full); border: 1px solid var(--color-border); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; flex-shrink: 0; } .nav__admin-link { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-primary); background: var(--color-accent-bg); padding: 4px 12px; border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.05em; &:hover { background: var(--color-accent); color: var(--color-white); } } .nav__sign-in { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); transition: color var(--transition-fast); cursor: pointer; background: none; border: none; padding: 0; &:hover { color: var(--color-text); } } .acct { position: relative; flex-shrink: 0; } /* One control for menu + account, signed in or out — the marketplace pattern. Deliberately identical at every breakpoint: the old split (avatar circle plus a separate .nav__toggle) opened different things on different pages. */ .acct-pill { display: inline-flex; align-items: center; gap: 0.55rem; padding: 4px 4px 4px 13px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-white); color: var(--color-text); cursor: pointer; transition: box-shadow var(--transition-fast), border-color var(--transition-fast); &:hover { border-color: var(--color-text-tertiary); box-shadow: var(--shadow-md); } } .acct-pill__bars { position: relative; width: 15px; height: 1.5px; border-radius: 2px; background: currentColor; &::before, &::after { content: ""; position: absolute; left: 0; width: 15px; height: 1.5px; border-radius: 2px; background: currentColor; } &::before { top: -5px; } &::after { top: 5px; } } .acct-pill__avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-white); font-size: 11px; font-weight: var(--font-weight-bold); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; overflow: hidden; } .acct-pill__avatar svg { width: 17px; height: 17px; } .acct-pill__image { width: 100%; height: 100%; object-fit: cover; } /* Owner-side CTA. Quiet by design — it must not compete with Search. */ .nav__list-home { flex-shrink: 0; white-space: nowrap; padding: 9px 14px; border: 0; border-radius: var(--radius-full); background: none; color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; transition: background var(--transition-fast); &:hover { background: var(--color-bg-muted); } } .nav__list-home-short { display: none; } .acct-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 85; min-width: 240px; background: var(--color-white); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: 6px; } .acct-menu[hidden] { display: none; } .acct-id { display: grid; gap: 1px; padding: 10px 12px 12px; border-bottom: 1px solid var(--color-border-light); margin-bottom: 6px; } .acct-id b { font-size: var(--font-size-sm); line-height: var(--line-height-snug); } .acct-id span { font-size: var(--font-size-xs); color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 12px; border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); cursor: pointer; &:hover { background: var(--color-bg-muted); } } .acct-menu form { border-top: 1px solid var(--color-border-light); margin-top: 6px; padding-top: 6px; } .acct-signout { color: #b4543f !important; } /* "List your home" / "Sign in" — the menu's promoted rows. */ .acct-host { color: var(--color-primary) !important; } .acct-div { height: 1px; margin: 6px 0; background: var(--color-border-light); } .acct-link { display: block; padding: 10px 12px; border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); &:hover { background: var(--color-bg-muted); } } .nav__cta { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-white); background-color: var(--color-primary); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-full); border: none; cursor: pointer; transition: background-color var(--transition-fast); &:hover { background-color: var(--color-primary-light); } } /* Nav — narrow screens. The account pill never collapses; only the owner-side CTA gives up room, first its label and then its place in the nav (it stays reachable inside the pill's menu). */ @media (max-width: 900px) { .nav__list-home-full { display: none; } .nav__list-home-short { display: inline; } } @media (max-width: 768px) { /* Show only the Delicate Arch mark on small screens. */ .nav__logo-full { display: none; } .nav__logo-mark { display: block; } .nav__actions { gap: 0.5rem; } } @media (max-width: 640px) { .nav__list-home { display: none; } } /* Small phones: the logo, the search pill and the account pill are all fighting for ~375px. Give the row its gutters back and take the account pill down a size so it reads as one compact control, not two crammed icons. */ @media (max-width: 480px) { .nav { gap: var(--space-sm); padding-inline: var(--space-md); } .acct-pill { gap: 0.4rem; padding-left: 10px; } .acct-pill__bars, .acct-pill__bars::before, .acct-pill__bars::after { width: 13px; } .acct-pill__avatar { width: 27px; height: 27px; font-size: 10px; } .acct-pill__avatar svg { width: 15px; height: 15px; } } /* Below 425px the search pill needs every pixel, so the account control drops the hamburger and collapses to the avatar alone. It still opens the same menu — the bars are decoration at this size, not the affordance. */ @media (max-width: 424px) { .acct-pill { gap: 0; padding: 4px; } .acct-pill__bars { display: none; } } /* --- Header --- */ .site-header { border-bottom: 1px solid var(--color-border-light); background-color: var(--color-white); position: sticky; top: 0; z-index: 50; } .site-header--transparent { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom: none; z-index: 50; } .site-header--transparent .nav__logo-img { filter: brightness(0) invert(1); } /* The home overlay header is edge-to-edge (the mockup is full-bleed), and the logo mark + avatar flip to white over the photo. Kept shallow (Wander-style) so the photo, not the chrome, owns the top of the page. */ .site-header--transparent .nav { max-width: none; padding-inline: var(--page-gutter); padding-block: clamp(0.75rem, 1.6vh, 1rem); } .site-header--transparent .nav__logo-mark { color: var(--color-white); } .site-header--transparent .nav__avatar { border-color: rgba(255, 255, 255, 0.55); color: var(--color-white); } /* The pill stays solid white over the hero rather than going translucent — a glass control reads as washed out against photography, and the dark hamburger + avatar need an opaque field to hold contrast. */ .site-header--transparent .acct-pill { border-color: transparent; background: var(--color-white); color: var(--color-text); } .site-header--transparent .nav__list-home { color: var(--color-white); } .site-header--transparent .nav__list-home:hover { background: rgba(255, 255, 255, 0.15); } .site-header--transparent .nav__link, .site-header--transparent .nav__auth-link, .site-header--transparent .nav__user { color: var(--color-white); } .site-header--transparent .nav__sign-in { color: var(--color-white); background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(8px); padding: 6px 16px; border-radius: var(--radius-full); border: none; } .site-header--transparent .nav__admin-link { color: var(--color-white); background: transparent; border: 1px solid rgba(255, 255, 255, 0.55); padding: 6px 16px; border-radius: var(--radius-full); } .site-header--transparent .nav__link:hover, .site-header--transparent .nav__auth-link:hover, .site-header--transparent .nav__user:hover, .site-header--transparent .nav__admin-link:hover, .site-header--transparent .nav__sign-in:hover { color: var(--color-white); opacity: 0.8; } /* Keep the white pill's own hover (shadow, not a white-on-white fade). */ .site-header--transparent .acct-pill:hover { border-color: transparent; } /* Footer — shared minimal bar; markup + styling in trip_picker.css (.ft). */ /* --- Hero (home) --- A contained Utah landscape rather than a full-screen takeover. The solid header keeps search/navigation stable; the image is the single expressive element and hands the page back to the homes without an extra scroll. */ .hero { position: relative; width: calc(100% - clamp(2rem, 5vw, 5rem)); max-width: 1440px; min-height: clamp(430px, 64svh, 650px); margin: clamp(0.75rem, 1.8vw, 1.5rem) auto 0; display: flex; align-items: flex-end; overflow: hidden; border-radius: clamp(18px, 2vw, 28px); text-align: left; z-index: 10; background: var(--color-primary); } .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* A focused lower wash keeps the copy readable without the heavy top fade that was only needed when the navigation overlaid the photograph. */ .hero__overlay { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(8, 12, 18, 0.76) 0%, rgba(8, 12, 18, 0.46) 42%, rgba(8, 12, 18, 0.08) 74% ); z-index: 1; pointer-events: none; } .hero__content { position: relative; z-index: 2; width: 100%; min-width: 0; /* let this flex item shrink to the viewport */ max-width: 100%; padding: clamp(2rem, 5vw, 4.5rem); } .hero__eyebrow { display: inline-flex; align-items: center; gap: 11px; color: rgba(255, 255, 255, 0.92); font-size: 0.8rem; font-weight: var(--font-weight-semibold); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: var(--space-md); } .hero__eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--color-clay); flex-shrink: 0; } .hero__headline { font-family: var(--font-serif); font-size: clamp(2.65rem, 5.5vw, 5rem); font-weight: var(--font-weight-normal); color: var(--color-white); line-height: 1; letter-spacing: -0.025em; max-width: 11ch; margin-bottom: var(--space-md); text-wrap: balance; text-shadow: 0 2px 30px rgba(8, 12, 18, 0.35); em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--color-sand); } } .hero__subtext { color: rgba(255, 255, 255, 0.85); font-size: clamp(0.95rem, 1.2vw, 1.1rem); line-height: 1.5; max-width: 43ch; margin-bottom: 0; } @media (max-width: 768px) { .hero { width: calc(100% - 1.5rem); min-height: min(68svh, 560px); margin-top: 0.75rem; border-radius: 18px; } .hero__content { padding: 1.75rem; } /* Let the eyebrow wrap instead of overflowing on narrow screens. */ .hero__eyebrow { display: flex; flex-wrap: wrap; row-gap: 4px; font-size: 0.7rem; letter-spacing: 0.1em; } .hero__headline { font-size: clamp(2.5rem, 13vw, 4rem); max-width: 9ch; } .hero__subtext { font-size: var(--font-size-base); max-width: 34ch; } } /* The main landing page uses the Utah landscape as a single, full-viewport canvas for both navigation and hero copy. This modifier deliberately leaves collection/spin-off heroes on the existing contained treatment above. */ .hero--immersive { width: 100%; max-width: none; min-height: clamp(350px, 42svh, 410px); margin: 0; align-items: center; justify-content: center; border-radius: 0; text-align: center; isolation: isolate; background: #294f61; } .hero--immersive .hero__bg { object-position: center 48%; filter: saturate(0.92) contrast(1.03) brightness(0.94); transform: scale(1.012); animation: hero-image-in 1.4s var(--transition-slow) both; } .hero--immersive .hero__overlay { background: radial-gradient(ellipse 72% 58% at 50% 54%, rgba(5, 12, 17, 0.4) 0%, rgba(5, 12, 17, 0.26) 48%, rgba(5, 12, 17, 0.08) 76%, transparent 100%), linear-gradient(180deg, rgba(6, 15, 22, 0.52) 0%, rgba(6, 15, 22, 0.2) 30%, rgba(6, 15, 22, 0.3) 64%, rgba(5, 12, 16, 0.72) 100%), linear-gradient(90deg, rgba(6, 15, 22, 0.24), transparent 34%, transparent 66%, rgba(6, 15, 22, 0.22)); } .hero--immersive .hero__content { min-height: inherit; display: flex; align-items: center; justify-content: center; padding: clamp(5.75rem, 10vh, 6.5rem) var(--page-gutter) clamp(1.5rem, 3vh, 2rem); } .hero--immersive .hero__content-inner { width: min(100%, 1240px); margin-inline: auto; animation: hero-copy-in 900ms 140ms var(--transition-slow) both; } .hero--immersive .hero__eyebrow { justify-content: center; gap: clamp(0.65rem, 1.1vw, 1rem); margin-bottom: clamp(1rem, 2vh, 1.5rem); color: rgba(255, 255, 255, 0.94); font-size: clamp(0.7rem, 0.92vw, 0.95rem); font-weight: var(--font-weight-semibold); line-height: 1.2; letter-spacing: 0.28em; text-shadow: 0 1px 16px rgba(3, 9, 13, 0.58); } .hero--immersive .hero__eyebrow::before { display: none; } .hero__eyebrow-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #d8aa49; flex: 0 0 auto; } .hero--immersive .hero__headline { max-width: none; margin: 0; color: var(--color-white); font-family: var(--font-sans); font-size: clamp(2.5rem, 3.7vw, 4rem); font-weight: var(--font-weight-semibold); line-height: 0.88; letter-spacing: -0.065em; text-wrap: balance; text-shadow: 0 2px 3px rgba(3, 8, 12, 0.3), 0 9px 38px rgba(3, 8, 12, 0.42); } .hero--immersive .hero__headline em { color: inherit; font-family: var(--font-sans); font-style: italic; font-weight: var(--font-weight-medium); } .hero--immersive .hero__subtext { max-width: 58rem; margin: clamp(1rem, 2vh, 1.5rem) auto 0; color: var(--color-white); font-size: clamp(0.95rem, 1.25vw, 1.4rem); font-weight: var(--font-weight-medium); line-height: 1.48; text-shadow: 0 1px 2px rgba(3, 8, 12, 0.42), 0 5px 24px rgba(3, 8, 12, 0.52); } .hero__actions { display: flex; align-items: stretch; justify-content: center; gap: clamp(1.25rem, 2vw, 2rem); margin-top: clamp(1.25rem, 2.5vh, 1.75rem); } /* --- Left-aligned hero --- Left-aligning takes three things, not just text-align: the copy column has to narrow (a headline set left across 1240px reads as a banner), the scrim has to move left with it, and the eyebrow/actions rows have to stop centering themselves. Kept as a modifier so collection heroes, which are still centered in their contained frame, are untouched. */ .hero--immersive.hero--left { text-align: left; } .hero--immersive.hero--left .hero__content { justify-content: flex-start; } .hero--immersive.hero--left .hero__content-inner { width: min(100%, 46rem); margin-inline: 0; } .hero--immersive.hero--left .hero__eyebrow, .hero--immersive.hero--left .hero__actions { justify-content: flex-start; } /* On phones the actions row turns into a centred column (align-items and an auto inline margin), which left the button floating under left-aligned copy. Pin it to the same edge as everything else. */ .hero--immersive.hero--left .hero__actions { align-items: flex-start; margin-inline: 0; } .hero--immersive.hero--left .hero__subtext { max-width: 34rem; margin-inline: 0; } /* The hard break in the copy is tuned for the wide centered measure; in a 34rem column it strands "retreats —" on its own line. Let it wrap. */ .hero--immersive.hero--left .hero__subtext-break { display: none; } /* Weight the scrim to the left so the copy keeps its contrast and the right of the frame opens up to the landscape. */ .hero--immersive.hero--left .hero__overlay { background: radial-gradient(ellipse 62% 62% at 22% 52%, rgba(5, 12, 17, 0.46) 0%, rgba(5, 12, 17, 0.28) 46%, rgba(5, 12, 17, 0.08) 74%, transparent 100%), linear-gradient(180deg, rgba(6, 15, 22, 0.5) 0%, rgba(6, 15, 22, 0.18) 30%, rgba(6, 15, 22, 0.28) 64%, rgba(5, 12, 16, 0.7) 100%), linear-gradient(90deg, rgba(6, 15, 22, 0.42), rgba(6, 15, 22, 0.12) 46%, transparent 70%); } .hero__cta { min-width: 15rem; min-height: 3.5rem; display: inline-flex; align-items: center; justify-content: center; gap: 1rem; color: var(--color-white); font-size: clamp(0.95rem, 1vw, 1.1rem); font-weight: var(--font-weight-semibold); text-shadow: 0 1px 14px rgba(3, 8, 12, 0.46); transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .hero__cta--primary { padding-inline: 1.75rem; border: 1px solid rgba(255, 255, 255, 0.92); border-radius: var(--radius-full); background: transparent; } .hero__cta:hover { transform: translateY(-2px); } .hero__cta--primary:hover { border-color: var(--color-white); background: rgba(255, 255, 255, 0.08); } .hero__cta:focus-visible { outline: 2px solid var(--color-white); outline-offset: 4px; } @keyframes hero-image-in { from { opacity: 0.72; transform: scale(1.05); } to { opacity: 1; transform: scale(1.012); } } @keyframes hero-copy-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 768px) { .site-header--transparent .nav { gap: 0.75rem; padding: 1rem; } .site-header--transparent .nav__admin-link { display: none; } .hero--immersive { width: 100%; min-height: clamp(340px, 43svh, 395px); margin: 0; border-radius: 0; } .hero--immersive .hero__content { padding: 5rem var(--page-gutter) 1.5rem; } .hero--immersive .hero__eyebrow { flex-wrap: wrap; justify-content: center; margin-bottom: 0.75rem; font-size: 0.6rem; letter-spacing: 0.18em; } .hero--immersive .hero__headline { font-size: clamp(1.85rem, 7.4vw, 2.5rem); line-height: 0.94; letter-spacing: -0.05em; } .hero--immersive .hero__subtext { margin-top: 0.9rem; font-size: 0.875rem; line-height: 1.45; } .hero__subtext-break { display: none; } .hero__actions { width: auto; margin: 1.1rem auto 0; flex-direction: column; align-items: center; gap: 0.65rem; } .hero__cta { width: auto; min-width: 0; min-height: 2.75rem; font-size: 0.9rem; } .hero__cta--primary { min-width: 8.5rem; min-height: 2.75rem; padding-inline: 1.25rem; } } @media (prefers-reduced-motion: reduce) { .hero--immersive .hero__bg, .hero--immersive .hero__content-inner { animation: none; } } /* --- Property Card --- */ .property-card__wrapper { position: relative; } .property-card { cursor: pointer; transition: transform var(--transition-base), box-shadow var(--transition-base); &:hover { transform: translateY(-4px); .property-card__image { box-shadow: var(--shadow-card-hover); } } } .property-card__image { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-card); transition: box-shadow var(--transition-base); img { width: 100%; height: 100%; object-fit: cover; } } .property-card__badge { position: absolute; top: var(--space-sm); left: var(--space-sm); background: var(--color-white); color: var(--color-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); } .property-card__favorite { position: absolute; top: var(--space-sm); right: var(--space-sm); z-index: 2; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(8px); border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-white); transition: transform var(--transition-fast), background var(--transition-fast); &:hover { transform: scale(1.1); } } .property-card__favorite--saved svg { fill: #e11d48; stroke: #e11d48; } .property-card__dots { position: absolute; bottom: var(--space-sm); left: 50%; transform: translateX(-50%); display: flex; gap: 4px; } .property-card__dot { width: 6px; height: 6px; border-radius: 50%; background: oklch(1 0 0 / 0.5); } .property-card__dot--active { background: var(--color-white); } .property-card__info { padding: var(--space-sm) 0; } .property-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; } .property-card__location { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); letter-spacing: -0.01em; } .property-card__rating { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); display: flex; align-items: center; gap: 2px; color: var(--color-star); } .property-card__details { font-size: var(--font-size-sm); color: var(--color-text-tertiary); margin-bottom: var(--space-xs); } .property-card__footer { display: flex; align-items: baseline; gap: 2px; } .property-card__view { display: inline-block; padding: 7px 16px; border: 1px solid var(--color-primary); border-radius: 999px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-primary); transition: all var(--transition-fast); } .property-card:hover .property-card__view { background: var(--color-primary); color: var(--color-white); } /* --- Properties Grid --- */ .properties-section { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); } /* --- Homepage property groups --- The rails run wide: title and cards share one small viewport gutter rather than the 1280px editorial column, so the section never collapses into a centered island on a large monitor. Card width follows the column count below, and the visible next card is the discovery cue: Utah's "road ahead" translated into a restrained browsing interaction. */ .homepage-groups { /* Shallow top so the first group clears the fold right under the hero. */ padding-block: clamp(1.5rem, 2vw, 2rem) clamp(3.5rem, 7vw, 6rem); overflow: hidden; background: var(--color-white); } .homepage-group { --rail-gutter: var(--page-gutter); } .homepage-group + .homepage-group { margin-top: clamp(2rem, 3.5vw, 3rem); } /* Opts the header out of .container's 1280px column so the title sits on the same left edge as the first card at every viewport. */ .homepage-group__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); max-width: none; padding-inline: var(--rail-gutter); margin-bottom: clamp(1.25rem, 2.2vw, 1.75rem); } .homepage-group__heading { min-width: 0; } .homepage-group__title { font-family: var(--font-display); /* The face ships bold only — anything lighter here is a synthesised fake. */ font-weight: 700; font-size: clamp(1.5rem, 2.3vw, 1.9rem); line-height: 1.12; letter-spacing: -0.02em; /* A title long enough to wrap should break into even lines rather than leave one orphaned word under a full one. */ text-wrap: balance; } .homepage-group__description { margin-top: 0.35rem; max-width: 52ch; color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-normal); } .homepage-group__controls { display: flex; gap: var(--space-sm); flex-shrink: 0; } .homepage-group__arrow { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid transparent; border-radius: var(--radius-full); background: var(--color-bg-muted); color: var(--color-text); cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast); } .homepage-group__arrow:hover:not(:disabled) { border-color: var(--color-border); background: var(--color-white); transform: translateY(-1px); } .homepage-group__arrow:focus-visible { outline: 2px solid var(--color-clay); outline-offset: 3px; } .homepage-group__arrow:disabled { opacity: 0.28; cursor: default; } .homepage-group__arrow svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Card width is derived from how many fit per view (Wander-style compact rails) rather than a fixed clamp, so a wider screen shows more cards at the same size instead of bigger cards. 100% is the track's content box, so the arithmetic already excludes the gutters. */ .homepage-group__track { /* Fixed 17px, not a clamp: the gap between cards is a spec'd value that should not drift with the viewport. */ --rail-gap: 17px; --rail-cols: 3; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--rail-cols) - 1) * var(--rail-gap)) / var(--rail-cols)); gap: var(--rail-gap); overflow-x: auto; overscroll-behavior-inline: contain; scroll-behavior: smooth; scroll-snap-type: inline mandatory; scroll-padding-inline: var(--rail-gutter); scrollbar-width: none; padding-inline: var(--rail-gutter); padding-bottom: 0.75rem; } .homepage-group__track::-webkit-scrollbar { display: none; } .homepage-group__item { min-width: 0; scroll-snap-align: start; } /* The same listing-card behavior, simplified into Wander-like editorial cards for rails: square photography, no floating card shell. */ .homepage-group__item .lc { overflow: visible; border-radius: 0; background: transparent; box-shadow: none; } .homepage-group__item .lc:hover { box-shadow: none; } .homepage-group__item .lc-link { border-radius: var(--radius-xl); } .homepage-group__item .lc-media { aspect-ratio: 1; border-radius: var(--radius-xl); } .homepage-group__item .lc-body { padding: 0.9rem 0.05rem 0; } .homepage-group__item .lc-title { overflow: hidden; font-family: var(--font-sans); font-size: 1rem; font-weight: var(--font-weight-semibold); text-overflow: ellipsis; white-space: nowrap; } .homepage-group__item .lc-loc, .homepage-group__item .lc-meta { font-size: 0.875rem; } /* Narrower photo means a smaller heart/arrow so they don't crowd it. */ .homepage-group__item .lc-heart { width: 34px; height: 34px; } .homepage-group__item .lc-heart svg { width: 18px; height: 18px; } /* Add a column every time there is room for another ~240px card, so the card size stays put as the viewport grows. */ @media (min-width: 1000px) { .homepage-group__track { --rail-cols: 4; } } @media (min-width: 1280px) { .homepage-group__track { --rail-cols: 5; } } @media (min-width: 1600px) { .homepage-group__track { --rail-cols: 6; } } @media (min-width: 1900px) { .homepage-group__track { --rail-cols: 7; } } @media (min-width: 2200px) { .homepage-group__track { --rail-cols: 8; } } @media (min-width: 2560px) { .homepage-group__track { --rail-cols: 9; } } @media (max-width: 700px) { .homepage-groups { padding-block: var(--space-2xl); } .homepage-group + .homepage-group { margin-top: var(--space-2xl); } .homepage-group__header { align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); } /* 7vw put a two-word title within a few pixels of the arrows on a 390px phone, so "Summer getaways" wrapped. The arrows and gutters are fixed costs that a vw-scaled title can't outrun — ease the slope instead. */ .homepage-group__title { font-size: clamp(1.3rem, 5.6vw, 1.75rem); } .homepage-group__arrow { width: 2.4rem; height: 2.4rem; } .homepage-group__arrow:disabled { visibility: hidden; } /* Phones/small tablets: hold the card near the desktop 16rem so the rail stays compact (roughly two cards plus a peek) instead of one bulky full-width card. */ .homepage-group__track { grid-auto-columns: min(56vw, 15rem); } /* Phones: a square photo made the card own the whole fold, but a full 4:3 went too wide and read as squat. 6:5 sits between them — narrower card, a little more height back in the photo. */ .homepage-group .lc-media { aspect-ratio: 6 / 5; } } @media (prefers-reduced-motion: reduce) { .homepage-group__track { scroll-behavior: auto; } } /* --- Collections Pages --- */ .collections-hero { padding: clamp(4rem, 8vw, 7rem) 0 var(--space-2xl); } .collections-hero__eyebrow, .collections-showcase__eyebrow { margin-bottom: var(--space-sm); color: var(--color-clay); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.13em; text-transform: uppercase; } .collections-hero__title { font-family: var(--font-serif); max-width: 780px; font-size: clamp(2.5rem, 5vw, 4.75rem); font-weight: var(--font-weight-normal); line-height: 0.98; } .collections-hero__subtitle { max-width: 600px; margin-top: var(--space-lg); font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); } .collections-page { padding-bottom: clamp(5rem, 10vw, 9rem); } .collections-page__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); } .collection-tile { display: block; text-decoration: none; color: var(--color-white); } .collection-tile__image { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-xl); isolation: isolate; box-shadow: 0 4px 18px rgba(15, 25, 35, 0.08); transition: transform var(--transition-base), box-shadow var(--transition-base); } .collection-tile__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .collection-tile__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(12, 18, 22, 0.08) 18%, rgba(12, 18, 22, 0.82) 100%); } .collection-tile__count { position: absolute; top: var(--space-md); left: var(--space-md); z-index: 2; padding: 0.4rem 0.7rem; border: 1px solid rgba(255,255,255,0.36); border-radius: var(--radius-full); background: rgba(15, 25, 35, 0.28); font-size: 0.68rem; font-weight: var(--font-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(8px); } .collection-tile__content { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; padding: clamp(1.25rem, 2.4vw, 1.8rem); } .collection-tile__name { margin-bottom: var(--space-sm); color: var(--color-white); font-size: clamp(1.7rem, 2.5vw, 2.25rem); } .collection-tile__description { max-width: 32ch; color: rgba(255,255,255,0.82); font-size: var(--font-size-sm); line-height: 1.5; } .collection-tile__link { display: inline-block; margin-top: var(--space-md); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.04em; } .collection-tile:hover .collection-tile__image { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(15, 25, 35, 0.16); } .collection-tile:hover .collection-tile__image img { transform: scale(1.035); } .collections-page__empty { padding: var(--space-3xl) 0; color: var(--color-text-secondary); } .collections-page__empty a { display: inline-flex; margin-top: var(--space-md); color: var(--color-primary); font-weight: var(--font-weight-semibold); } .collection-heading { padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem); background: color-mix(in srgb, var(--collection-accent) 7%, var(--color-bg)); } .collection-heading__inner { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-2xl); } .collection-heading__copy { max-width: 720px; } .collection-heading__back { display: inline-flex; gap: var(--space-sm); margin-bottom: var(--space-xl); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } .collection-heading__back:hover { color: var(--color-text); } .collection-heading__title { font-size: clamp(2.75rem, 6vw, 5.25rem); line-height: 0.95; } .collection-heading__description { max-width: 620px; margin-top: var(--space-lg); color: var(--color-text-secondary); font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); } .collection-heading__meta { flex: 0 0 auto; padding-bottom: var(--space-sm); color: var(--color-text-secondary); text-align: right; } .collection-heading__meta strong { display: block; color: var(--color-text); font-family: var(--font-serif); font-size: var(--font-size-4xl); font-weight: var(--font-weight-normal); line-height: 1; } .collection-heading__meta span { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; } .collection-properties-page { padding: clamp(3rem, 6vw, 5rem) 0 clamp(5rem, 9vw, 8rem); } .collection-properties-page__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-xl); } .collection-properties-page__header h2 { font-size: var(--font-size-3xl); } .collection-properties-page__header span { color: var(--color-text-tertiary); font-size: var(--font-size-sm); } .collection-properties-page__empty { padding: var(--space-4xl); color: var(--color-text-secondary); text-align: center; } .collections-showcase { padding: clamp(3rem, 4vw, 4rem) 0 clamp(5rem, 9vw, 8rem); } .collections-showcase__header { display: flex; justify-content: space-between; align-items: flex-end; gap: clamp(2rem, 6vw, 6rem); margin-bottom: clamp(2rem, 4vw, 2.75rem); } .collections-showcase__header > div { flex: 1; min-width: 0; } .collections-showcase__title { font-size: clamp(3.4rem, 5.6vw, 5rem); line-height: 0.9; letter-spacing: -0.055em; } .collections-showcase__intro { margin-top: var(--space-lg); color: var(--color-text-secondary); font-size: clamp(1rem, 1.45vw, 1.2rem); line-height: 1.45; } .collections-showcase__all { display: inline-flex; align-items: center; justify-content: center; gap: 1.25rem; flex: 0 0 auto; min-height: 3rem; padding: 0.75rem 1.3rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast); } .collections-showcase__all::after { content: "→"; font-size: 1.05rem; line-height: 1; } .collections-showcase__all:hover { border-color: var(--color-text); background: var(--color-white); transform: translateY(-2px); } .collections-showcase__all:focus-visible { outline: 2px solid var(--color-clay); outline-offset: 3px; } .collections-showcase__grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(20rem, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 1.35vw, 1rem); height: clamp(32rem, 47vw, 37rem); } .collections-showcase__grid > .collection-tile:first-child { grid-row: 1 / -1; } .collections-showcase .collection-tile__image { height: 100%; aspect-ratio: auto; border-radius: var(--radius-xl); box-shadow: none; } .collections-showcase .collection-tile__shade { background: linear-gradient(180deg, rgba(9, 13, 15, 0.04) 26%, rgba(9, 12, 14, 0.86) 100%), linear-gradient(90deg, rgba(9, 12, 14, 0.12), transparent 62%); } .collections-showcase .collection-tile__count { top: clamp(1rem, 1.8vw, 1.35rem); left: clamp(1rem, 1.8vw, 1.35rem); padding: 0.42rem 0.75rem; border: 0; background: rgba(19, 23, 25, 0.52); color: var(--color-white); line-height: 1; backdrop-filter: blur(10px); } .collections-showcase .collection-tile__content { padding: clamp(1.4rem, 2.8vw, 2.25rem); } .collections-showcase .collection-tile__name { margin-bottom: 0.3rem; font-size: clamp(2.1rem, 3.8vw, 3rem); line-height: 1; } .collections-showcase .collection-tile__description { color: rgba(255,255,255,0.86); font-size: var(--font-size-base); line-height: 1.45; } .collections-showcase .collection-tile__link { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: var(--space-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); letter-spacing: 0; } .collections-showcase .collection-tile__link-arrow { font-size: 1rem; line-height: 1; transition: transform var(--transition-fast); } .collections-showcase .collection-tile:hover .collection-tile__link-arrow { transform: translateX(3px); } .collections-showcase__grid > .collection-tile:not(:first-child) .collection-tile__content { padding: clamp(1.35rem, 2vw, 1.75rem) clamp(4.75rem, 6vw, 5.5rem) clamp(1.35rem, 2vw, 1.65rem) clamp(1.35rem, 2vw, 1.75rem); } .collections-showcase__grid > .collection-tile:not(:first-child) .collection-tile__name { font-size: clamp(1.7rem, 2.7vw, 2.25rem); } .collections-showcase__grid > .collection-tile:not(:first-child) .collection-tile__description { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .collections-showcase__grid > .collection-tile:not(:first-child) .collection-tile__link { position: absolute; right: clamp(1.25rem, 2vw, 1.65rem); bottom: clamp(1.25rem, 2vw, 1.5rem); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin: 0; border-radius: var(--radius-full); background: rgba(255,255,255,0.18); backdrop-filter: blur(8px); transition: background-color var(--transition-fast); } .collections-showcase__grid > .collection-tile:not(:first-child) .collection-tile__link-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .collections-showcase__grid > .collection-tile:not(:first-child):hover .collection-tile__link { background: rgba(255,255,255,0.28); } .collections-showcase .collection-tile:focus-visible { border-radius: var(--radius-xl); outline: 2px solid var(--color-clay); outline-offset: 4px; } @media (max-width: 900px) { .collections-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .collections-showcase__title { font-size: clamp(3rem, 7vw, 4.4rem); } .collections-showcase__grid { grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 1fr); height: 31rem; } } @media (max-width: 700px) { .collections-hero { padding-top: var(--space-2xl); } .collections-page__grid { grid-template-columns: 1fr; } .collections-showcase { padding-top: var(--space-2xl); } .collections-showcase__header, .collection-heading__inner { align-items: flex-start; flex-direction: column; } .collections-showcase__header { gap: var(--space-lg); } .collections-showcase__title { font-size: clamp(2.65rem, 12vw, 3.2rem); line-height: 0.92; text-wrap: balance; } .collections-showcase__title br { display: none; } .collections-showcase__intro { margin-top: var(--space-md); font-size: var(--font-size-base); } .collections-showcase__grid { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; } .collections-showcase__grid > .collection-tile, .collections-showcase__grid > .collection-tile:first-child { grid-row: auto; } .collections-showcase .collection-tile__image { height: auto; aspect-ratio: 4 / 3; } .collections-showcase__grid > .collection-tile:not(:first-child) .collection-tile__image { aspect-ratio: 16 / 10; } .collections-showcase__grid > .collection-tile:not(:first-child) .collection-tile__name { font-size: clamp(1.75rem, 8vw, 2.15rem); } .collection-heading { padding: var(--space-xl) 0 var(--space-xl); } .collection-heading__inner { gap: var(--space-lg); } .collection-heading__back { margin-bottom: var(--space-lg); } .collection-heading__meta { display: flex; align-items: baseline; gap: var(--space-sm); padding: 0; text-align: left; } .collection-heading__meta strong { font-size: var(--font-size-3xl); } .collection-tile__image { aspect-ratio: 5 / 6; } } .properties-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } .properties-grid--featured { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1024px) { .properties-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .properties-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .properties-grid { grid-template-columns: 1fr; } } /* --- Section Header --- */ .section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-lg); } .section-header__title { font-family: var(--font-serif); font-size: var(--font-size-3xl); font-weight: var(--font-weight-normal); color: var(--color-text); letter-spacing: var(--letter-spacing-tight); em { font-family: var(--font-serif); font-style: italic; font-weight: 400; } } .section-header__link { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); transition: color var(--transition-fast); &:hover { color: var(--color-text); } } /* --- Recently Added --- */ .recently-added { padding: var(--space-3xl) 0; } .recently-added__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } @media (max-width: 1024px) { .recently-added__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .recently-added__grid { grid-template-columns: 1fr; } } /* --- Explore Destinations --- */ .explore-destinations { padding: var(--space-3xl) 0; } .explore-destinations__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-lg); } .destination-tile { display: flex; align-items: flex-end; border-radius: var(--radius-xl); overflow: hidden; padding: var(--space-lg); aspect-ratio: 3 / 4; transition: transform var(--transition-base), box-shadow var(--transition-base); box-shadow: var(--shadow-md); &:hover { transform: translateY(-3px) scale(1.01); box-shadow: var(--shadow-lg); } } .destination-tile__content { position: relative; z-index: 1; } .destination-tile__name { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: var(--color-white); margin-bottom: 2px; } .destination-tile__count { font-size: var(--font-size-xs); color: oklch(1 0 0 / 0.7); } @media (max-width: 1024px) { .explore-destinations__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .explore-destinations__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } } @media (max-width: 480px) { .explore-destinations__grid { grid-template-columns: repeat(2, 1fr); } } /* --- Value Props — an asymmetric hospitality pledge, with contour lines borrowed from the Utah landscape rather than decorative step numbers. --- */ .value-props { position: relative; isolation: isolate; overflow: hidden; background: var(--color-white); color: var(--color-primary); padding: clamp(5.5rem, 9vw, 9rem) 0; margin-top: clamp(5rem, 9vw, 8rem); } .value-props::before { content: ""; position: absolute; z-index: -1; inset: 0 auto auto 0; width: clamp(7rem, 16vw, 15rem); height: 4px; background: var(--color-clay); } .value-props__contours { position: absolute; z-index: -2; inset: 0; opacity: 0.1; pointer-events: none; } .value-props__contours svg { width: 100%; height: 100%; } .value-props__contours path { fill: none; stroke: var(--color-clay); stroke-width: 1.2; vector-effect: non-scaling-stroke; } .value-props__layout { display: grid; grid-template-columns: minmax(17rem, 0.85fr) minmax(0, 1.15fr); gap: clamp(4rem, 9vw, 9rem); align-items: start; } .value-props__intro { max-width: 31rem; } .value-props__eyebrow { margin-bottom: 0.85rem; color: var(--color-clay); font-size: 0.72rem; font-weight: var(--font-weight-bold); line-height: 1.2; letter-spacing: 0.19em; text-transform: uppercase; } .value-props__headline { font-family: var(--font-serif); font-size: clamp(3.5rem, 6.3vw, 6.5rem); font-weight: var(--font-weight-normal); line-height: 0.9; letter-spacing: -0.045em; text-wrap: balance; } .value-props__headline em { color: var(--color-clay); font-style: italic; font-weight: var(--font-weight-normal); } .value-props__lede { max-width: 42ch; margin-top: clamp(1.6rem, 3vw, 2.25rem); color: var(--color-text-secondary); font-size: clamp(0.98rem, 1.25vw, 1.1rem); line-height: 1.72; } .value-props__signature { display: flex; align-items: center; gap: 0.9rem; margin-top: clamp(2.25rem, 4vw, 3.5rem); color: var(--color-primary); } .value-props__signature-mark { width: 3rem; height: 3rem; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--color-clay) 42%, transparent); border-radius: 50%; color: var(--color-clay); } .value-props__signature-mark svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .value-props__signature strong, .value-props__signature small { display: block; } .value-props__signature strong { font-size: 0.86rem; font-weight: var(--font-weight-semibold); letter-spacing: 0.01em; } .value-props__signature small { margin-top: 0.18rem; color: var(--color-text-tertiary); font-size: 0.74rem; } .value-props__grid { border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent); } .feature-block { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); align-items: start; padding: clamp(1.6rem, 3vw, 2.25rem) 0; border-top: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent); } .feature-block__icon { width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--color-clay) 30%, transparent); border-radius: 50%; color: var(--color-clay); background: color-mix(in srgb, var(--color-clay) 5%, transparent); } .feature-block__icon svg { width: 1.65rem; height: 1.65rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .feature-block__title { color: var(--color-primary); font-family: var(--font-serif); font-size: clamp(1.45rem, 2.4vw, 2rem); font-weight: var(--font-weight-normal); line-height: 1.15; letter-spacing: -0.025em; } .feature-block__description { max-width: 47ch; margin-top: 0.7rem; color: var(--color-text-secondary); font-size: 0.94rem; line-height: 1.7; } @media (max-width: 900px) { .value-props__layout { grid-template-columns: 1fr; gap: 3.75rem; } .value-props__intro { max-width: 42rem; } .value-props__lede { max-width: 50ch; } } @media (max-width: 520px) { .value-props { padding: 4.75rem 0 5rem; margin-top: 4.5rem; } .value-props__headline { font-size: clamp(3.25rem, 15vw, 4.5rem); } .value-props__layout { gap: 3rem; } .feature-block { grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1.5rem 0; } .feature-block__icon { width: 3rem; height: 3rem; } .feature-block__title { font-size: 1.4rem; } } /* ============================================= PROPERTY DETAIL PAGE ============================================= */ /* --- Detail Nav --- */ .detail-nav { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) var(--space-lg); max-width: 1280px; margin-inline: auto; } .detail-nav__left { display: flex; align-items: center; gap: var(--space-lg); } .detail-nav__logo { display: flex; align-items: center; } .detail-nav__logo-img { height: 20px; width: auto; } .detail-nav__back { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); color: var(--color-text-secondary); transition: color var(--transition-fast); &:hover { color: var(--color-text); } } .detail-nav__right { display: flex; align-items: center; gap: var(--space-lg); } .detail-nav__action { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); cursor: pointer; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-full); transition: all var(--transition-fast); &:hover { color: var(--color-text); background: var(--color-bg-muted); } } .detail-nav__action--saved svg { fill: #e11d48; stroke: #e11d48; } /* --- Property Detail Layout --- */ .property-detail { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-3xl); padding-top: var(--space-2xl); padding-bottom: var(--space-5xl); align-items: start; } .property-detail__sidebar { position: sticky; top: 80px; } @media (max-width: 1024px) { .property-detail { grid-template-columns: 1fr; gap: var(--space-2xl); } /* The inline booking card gives way to the fixed bottom bar (shared/_booking_bar). Hiding the sidebar works here, but the bar's `display` reveal + footer padding are UNLAYERED at the end of this file — they must beat trip_picker.css's unlayered `.booking-bar{display:none}`, which a layered rule can't do regardless of specificity. */ .property-detail__sidebar { display: none; } } /* --- Detail Amenities --- */ /* Moved to the shared listing_card.css (.detail-amenities* / .amenity-*), themed via --lc-* tokens, so Stay Utah and the spin-offs share one partial. See _detail_amenities.html.erb. */ /* Detail Map ("Where you'll be") now lives in the shared listing_card.css (themed via --lc-*) so it renders on the spin-offs too. */ /* Detail Rules ("Things to know") now lives in the shared listing_card.css (themed via --lc-*) so it renders on the spin-offs too. */ /* --- Guests Dropdown --- */ .guests-dropdown { position: absolute; left: 0; right: 0; top: 100%; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-md); z-index: 50; margin-top: var(--space-xs); animation: slideDown 200ms cubic-bezier(0.16, 1, 0.3, 1); } .guests-dropdown__row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border-light); &:last-of-type { border-bottom: none; } } .guests-dropdown__name { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); } .guests-dropdown__age { display: block; font-size: var(--font-size-xs); color: var(--color-text-tertiary); } .guests-dropdown__controls { display: flex; align-items: center; gap: var(--space-md); } .guests-dropdown__btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-white); font-size: var(--font-size-base); color: var(--color-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); &:hover { border-color: var(--color-text); color: var(--color-text); } } .guests-dropdown__count { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); min-width: 20px; text-align: center; } .guests-dropdown__footer { padding-top: var(--space-sm); text-align: right; } .guests-dropdown__close { background: none; border: none; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); cursor: pointer; text-decoration: underline; padding: var(--space-xs) 0; } /* --- Date Picker --- */ .datepicker__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); z-index: 9998; animation: fadeIn 200ms ease; } .datepicker { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 700px; max-width: 90vw; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08); padding: var(--space-xl); z-index: 9999; animation: scaleIn 250ms cubic-bezier(0.16, 1, 0.3, 1); } .datepicker__header { margin-bottom: var(--space-lg); } .datepicker__title { display: block; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-text); margin-bottom: 2px; } .datepicker__subtitle { font-size: var(--font-size-sm); color: var(--color-text-tertiary); } .datepicker__subtitle--error { color: #c13a3a; } .datepicker__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); } .datepicker__arrow { background: none; border: 1px solid var(--color-border); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: var(--font-size-sm); color: var(--color-text); transition: all var(--transition-fast); &:hover { background: var(--color-bg-muted); } } .datepicker__month-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); } .datepicker__grid-container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); } .datepicker__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin-bottom: var(--space-sm); span { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-tertiary); padding: var(--space-xs) 0; } } .datepicker__days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; } .datepicker__day { padding: 8px 0; font-size: var(--font-size-sm); border: none; background: none; cursor: pointer; border-radius: 50%; color: var(--color-text); transition: all var(--transition-fast); &:hover:not(:disabled) { background: var(--color-bg-muted); } } .datepicker__day--empty { cursor: default; } .datepicker__day--disabled { color: var(--color-border); cursor: not-allowed; } .datepicker__day--unavailable { color: var(--color-border); text-decoration: line-through; } /* The first booked morning after an open night — a stay can end here but not start. Rendered apart from booked nights, with a tooltip saying why. */ .datepicker__day--checkout-only { position: relative; &:disabled:not(.datepicker__day--selected) { color: var(--color-text-tertiary); text-decoration: none; } &::after { content: "Checkout only"; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); padding: 4px 10px; border-radius: var(--radius-sm); background: var(--color-text); color: var(--color-white); font-size: var(--font-size-xs); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); z-index: 1; } &:hover::after, &:focus-visible::after { opacity: 1; } } .datepicker__day--selected { background: var(--color-primary); color: var(--color-white); /* A stale URL can seed a checkout onto a night booked since — keep it looking selected, not struck-through. */ text-decoration: none; &:hover { background: var(--color-primary); } } .datepicker__day--in-range { background: var(--color-bg-muted); border-radius: 0; } .datepicker__day--check-in { border-radius: 50% 0 0 50%; } .datepicker__day--check-out { border-radius: 0 50% 50% 0; } .datepicker__footer { display: flex; justify-content: flex-end; gap: var(--space-md); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-border-light); } .datepicker__clear { background: none; border: none; font-size: var(--font-size-sm); color: var(--color-text-tertiary); cursor: pointer; padding: var(--space-sm) var(--space-md); &:hover { color: var(--color-text); text-decoration: underline; } } .datepicker__close { background: var(--color-primary); color: var(--color-white); border: none; border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); padding: var(--space-sm) var(--space-lg); cursor: pointer; transition: background var(--transition-fast); &:hover { background: var(--color-primary-hover); } } @media (max-width: 768px) { .datepicker { position: fixed; top: auto; bottom: 0; left: 0; right: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 80vh; overflow-y: auto; } .datepicker__grid-container { grid-template-columns: 1fr; } } } /* ============================================ PROMO CODES — admin + Stay Utah checkout ============================================ */ @layer components { .promo-admin { max-width: 1040px; } .promo-admin--form { max-width: 720px; } .promo-admin__grid { display: grid; gap: 14px; } .promo-ticket { display: grid; grid-template-columns: minmax(0, 1fr) 260px; overflow: hidden; background: var(--color-white); border: 1px solid var(--color-border-light); border-left: 4px solid #23845b; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: var(--color-text); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .promo-ticket:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .promo-ticket--scheduled { border-left-color: var(--color-accent); } .promo-ticket--expired { border-left-color: #b7b7b2; opacity: 0.76; } .promo-ticket__main { padding: 20px 24px; } .promo-ticket__topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .promo-ticket__code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: var(--font-size-sm); font-weight: 700; letter-spacing: 0.08em; color: var(--color-primary); } .promo-ticket__status { padding: 3px 9px; border-radius: var(--radius-full); background: #e7f4ed; color: #1f704e; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .promo-ticket--scheduled .promo-ticket__status { background: var(--color-accent-bg); color: #80642d; } .promo-ticket--expired .promo-ticket__status { background: #efefed; color: #666; } .promo-ticket__value { display: block; margin-top: 14px; font-family: var(--font-display); font-size: var(--font-size-2xl); font-weight: 400; } .promo-ticket__scope { display: inline-block; margin-top: 3px; color: var(--color-text-tertiary); font-size: var(--font-size-xs); } .promo-ticket__rules { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 20px 24px; border-left: 1px dashed #d8d8d3; background: #fbfbf9; color: var(--color-text-secondary); font-size: var(--font-size-xs); } .promo-admin__empty { padding: 56px 24px; border: 1px dashed var(--color-border); border-radius: var(--radius-lg); background: var(--color-white); text-align: center; } .promo-admin__empty strong { font-family: var(--font-display); font-size: var(--font-size-xl); } .promo-admin__empty p { margin: 8px 0 22px; color: var(--color-text-secondary); } .promo-form { display: grid; gap: 16px; } .promo-form__section { padding: 26px; background: var(--color-white); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .promo-form__eyebrow { display: block; margin-bottom: 20px; color: var(--color-text-tertiary); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .promo-form__split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .promo-form__split + .promo-form__split { margin-top: 18px; } .promo-form__field { display: grid; gap: 7px; } .promo-form__field + .promo-form__split, .promo-form__split + .promo-form__field { margin-top: 18px; } .promo-form__field label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } .promo-form__field input, .promo-form__field select { width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); color: var(--color-text); } .promo-form__field input:focus, .promo-form__field select:focus { outline: 2px solid color-mix(in srgb, var(--color-accent) 45%, transparent); outline-offset: 1px; border-color: var(--color-accent); } .promo-form__field small { color: var(--color-text-tertiary); font-size: var(--font-size-xs); } .promo-form__boundary { margin-top: 20px; padding: 12px 14px; border-left: 3px solid var(--color-accent); background: var(--color-accent-bg); color: var(--color-text-secondary); font-size: var(--font-size-sm); } .promo-form__boundary span { color: var(--color-text); font-weight: 700; } .promo-form__actions { display: flex; align-items: center; gap: 16px; } .promo-form__actions .contact-sidebar__save-btn { width: auto; padding: 11px 22px; } .promo-form__cancel { color: var(--color-text-secondary); font-size: var(--font-size-sm); } .promo-form__errors { padding: 14px 18px; border-radius: var(--radius-md); background: #fff0ed; color: #943b2d; font-size: var(--font-size-sm); } .promo-form__errors ul { margin: 6px 0 0 18px; list-style: disc; } .promo-form__danger { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--color-border); font-size: var(--font-size-sm); } .promo-form__danger p { margin-top: 3px; color: var(--color-text-tertiary); } .promo-form__danger form { flex: 0 0 auto; } .promo-form__danger .collection-form__delete-btn { margin: 0; } .promo-entry { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--color-border-light); } .promo-entry__label { display: block; margin-bottom: 7px; color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: 600; } .promo-entry__controls { display: flex; gap: 8px; } .promo-entry__input { min-width: 0; flex: 1; padding: 9px 11px; border: 1px solid var(--color-border); border-radius: var(--radius-md); text-transform: uppercase; } .promo-entry__button { padding: 9px 13px; border: 1px solid var(--color-clay); border-radius: var(--radius-md); background: var(--color-clay); color: var(--color-white); cursor: pointer; font-size: var(--font-size-xs); font-weight: 700; } .promo-entry__message { margin-top: 8px; font-size: var(--font-size-xs); line-height: 1.45; } .promo-entry__message--success, .checkout__trip-row--discount { color: #237451; } .promo-entry__message--error { color: #a13f32; } .promo-entry__remove { margin-left: 4px; text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 768px) { .promo-ticket { grid-template-columns: 1fr; } .promo-ticket__rules { border-top: 1px dashed #d8d8d3; border-left: 0; } .promo-form__split { grid-template-columns: 1fr; } .promo-form__danger { align-items: flex-start; flex-direction: column; } .promo-admin .admin-collections__header { align-items: stretch; flex-direction: column; gap: 16px; } .promo-admin .admin-collections__add-btn { align-self: flex-start; } } } /* ============================================ GIVEAWAY CAMPAIGNS — admin operations ============================================ */ @layer components { .giveaway-admin { max-width: 1120px; } .giveaway-admin--form { max-width: 1180px; } .giveaway-admin__header-actions { display: flex; align-items: center; gap: 10px; } .giveaway-admin__secondary-btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); transition: border-color var(--transition-fast), color var(--transition-fast); } .giveaway-admin__secondary-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } .giveaway-admin__grid { display: grid; gap: 14px; } .giveaway-campaign { display: grid; grid-template-columns: 138px minmax(0, 1fr) 150px; overflow: hidden; border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); color: var(--color-text); transition: box-shadow var(--transition-fast), transform var(--transition-fast); } .giveaway-campaign:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .giveaway-campaign__status { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 22px; background: #e8f4ed; color: #1d6748; } .giveaway-campaign__status span { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } .giveaway-campaign__status small { color: currentColor; font-size: var(--font-size-xs); opacity: 0.72; } .giveaway-campaign--scheduled .giveaway-campaign__status { background: #f6efd9; color: #725a23; } .giveaway-campaign--closed .giveaway-campaign__status { background: #eeeeeb; color: #66645f; } .giveaway-campaign--draft .giveaway-campaign__status { background: #e9edf0; color: #53606b; } .giveaway-campaign__body { min-width: 0; padding: 20px 24px; } .giveaway-campaign__resort { display: block; margin-bottom: 5px; color: var(--color-text-tertiary); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .giveaway-campaign__body > strong { display: block; font-family: var(--font-display); font-size: var(--font-size-xl); font-weight: 400; } .giveaway-campaign__body p { margin-top: 3px; overflow: hidden; color: var(--color-text-secondary); font-size: var(--font-size-sm); text-overflow: ellipsis; white-space: nowrap; } .giveaway-campaign__dates { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; color: var(--color-text-tertiary); font-size: var(--font-size-xs); } .giveaway-campaign__numbers { display: flex; flex-direction: column; justify-content: center; padding: 20px 22px; border-left: 1px dashed var(--color-border); background: #fbfbf9; } .giveaway-campaign__numbers strong { font-size: var(--font-size-2xl); line-height: 1; } .giveaway-campaign__numbers span, .giveaway-campaign__numbers small { color: var(--color-text-tertiary); font-size: var(--font-size-xs); } .giveaway-campaign__numbers small { margin-top: 14px; overflow: hidden; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; } .giveaway-form-admin { display: grid; gap: 18px; } .giveaway-form-admin__launch { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 22px 24px; border: 1px solid #d7dfd9; border-left: 5px solid #2b7657; border-radius: var(--radius-lg); background: #f4f8f5; } .giveaway-form-admin__launch .promo-form__eyebrow { margin-bottom: 5px; color: #4b6d5d; } .giveaway-form-admin__launch > div > strong { display: block; color: #234c39; font-size: var(--font-size-base); } .giveaway-form-admin__launch p { max-width: 650px; margin-top: 4px; color: #5f7268; font-size: var(--font-size-xs); } .giveaway-form-admin__switch { display: grid; grid-template-columns: 42px auto; align-items: center; gap: 10px; flex: 0 0 auto; cursor: pointer; font-size: var(--font-size-sm); } .giveaway-form-admin__switch input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; } .giveaway-form-admin__switch span { position: relative; width: 42px; height: 24px; border-radius: var(--radius-full); background: #b8c3bd; transition: background var(--transition-fast); } .giveaway-form-admin__switch span::after { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-white); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); content: ""; transition: transform var(--transition-fast); } .giveaway-form-admin__switch input:checked + span { background: #2b7657; } .giveaway-form-admin__switch input:checked + span::after { transform: translateX(18px); } .giveaway-form-admin__switch input:focus-visible + span { outline: 3px solid rgba(43, 118, 87, 0.25); outline-offset: 2px; } .giveaway-form-admin__layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 18px; } .giveaway-form-admin__main, .giveaway-form-admin__timing { display: grid; gap: 18px; } .giveaway-form-admin__timing { position: sticky; top: 24px; } .giveaway-form-admin .promo-form__field + .promo-form__field { margin-top: 18px; } .giveaway-form-admin .promo-form__field textarea { width: 100%; min-height: 116px; resize: vertical; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); color: var(--color-text); line-height: 1.5; } .giveaway-form-admin .promo-form__field textarea:focus { border-color: var(--color-accent); outline: 2px solid color-mix(in srgb, var(--color-accent) 45%, transparent); outline-offset: 1px; } .giveaway-form-admin__audit { display: grid; gap: 7px; padding: 22px; border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: #fbfbf9; color: var(--color-text-secondary); } .giveaway-form-admin__audit > span { color: var(--color-text-tertiary); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .giveaway-form-admin__audit > strong { font-family: var(--font-display); font-size: var(--font-size-2xl); font-weight: 400; } .giveaway-form-admin__audit a { color: var(--color-primary); font-size: var(--font-size-sm); font-weight: 600; } .giveaway-form-admin__audit small { margin-top: 7px; color: var(--color-text-tertiary); font-size: var(--font-size-xs); line-height: 1.5; } @media (max-width: 900px) { .giveaway-campaign { grid-template-columns: 112px minmax(0, 1fr); } .giveaway-campaign__numbers { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 6px; border-top: 1px dashed var(--color-border); border-left: 0; padding: 13px 20px; } .giveaway-campaign__numbers small { margin: 0 0 0 auto; } .giveaway-form-admin__layout { grid-template-columns: 1fr; } .giveaway-form-admin__timing { position: static; } } @media (max-width: 640px) { .giveaway-admin .admin-collections__header { align-items: stretch; flex-direction: column; gap: 16px; } .giveaway-admin__header-actions { align-items: stretch; flex-direction: column-reverse; } .giveaway-campaign { grid-template-columns: 1fr; } .giveaway-campaign__status { padding: 13px 20px; } .giveaway-campaign__numbers { grid-column: auto; } .giveaway-form-admin__launch { align-items: flex-start; flex-direction: column; } .giveaway-form-admin .promo-form__split { grid-template-columns: 1fr; } } } /* ============================================ ADMIN PORTAL ============================================ */ @layer components { .admin-portal__layout { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; } .admin-portal__sidebar { border-right: 1px solid var(--color-border); background: var(--color-primary); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .admin-portal__main { padding: 48px 48px 48px 56px; background: var(--color-bg-secondary, #fafafa); min-height: 100vh; min-width: 0; } .admin-portal__flash { padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: 24px; font-size: var(--font-size-sm); } .admin-portal__flash--notice { background: #e8f5e9; color: #2e7d32; } .admin-portal__flash--alert { background: #fff3e0; color: #e65100; } /* Admin sidebar overrides */ .sidebar--admin { color: rgba(255, 255, 255, 0.85); } .sidebar--admin .sidebar__logo-img { filter: brightness(0) invert(1); height: 20px; } .sidebar--admin .sidebar__avatar--admin { background: var(--color-accent); color: var(--color-primary); } .sidebar--admin .sidebar__user { border-bottom-color: rgba(255, 255, 255, 0.1); } .sidebar--admin .sidebar__user-name { color: var(--color-white); } .sidebar--admin .sidebar__user-email { color: rgba(255, 255, 255, 0.5); } .sidebar--admin .sidebar__link { color: rgba(255, 255, 255, 0.65); &:hover { background: rgba(255, 255, 255, 0.08); color: var(--color-white); } } .sidebar--admin .sidebar__link--active { background: rgba(255, 255, 255, 0.12); color: var(--color-white); } .sidebar--admin .sidebar__footer { border-top-color: rgba(255, 255, 255, 0.1); } /* Admin Dashboard */ .admin-dashboard__title { font-family: var(--font-display); font-size: var(--font-size-3xl); color: var(--color-text); margin-bottom: 4px; } .admin-dashboard__subtitle { color: var(--color-text-secondary); font-size: var(--font-size-base); margin-bottom: 32px; } .admin-dashboard__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; } .admin-dashboard__panel { background: var(--color-white); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); } .admin-dashboard__panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .admin-dashboard__panel-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text); } .admin-dashboard__panel-link { font-size: var(--font-size-sm); color: var(--color-primary); font-weight: var(--font-weight-medium); &:hover { text-decoration: underline; } } .recent-contact { display: flex; align-items: center; gap: 12px; padding: 10px 0; transition: opacity var(--transition-fast); &:not(:last-child) { border-bottom: 1px solid var(--color-border-light, #f0f0f0); } &:hover { opacity: 0.7; } } .recent-contact__info { display: flex; flex-direction: column; flex: 1; min-width: 0; } .recent-contact__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); } .recent-contact__email { font-size: var(--font-size-xs); color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recent-contact__bookings { font-size: var(--font-size-xs); color: var(--color-text-tertiary); white-space: nowrap; } /* Admin Contacts */ .admin-contacts__header { margin-bottom: 24px; } .admin-contacts__title { font-family: var(--font-display); font-size: var(--font-size-3xl); color: var(--color-text); margin-bottom: 4px; } .admin-contacts__subtitle { color: var(--color-text-secondary); font-size: var(--font-size-sm); } .admin-contacts__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin-bottom: 32px; } .stat-card { background: var(--color-white); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 4px; } .stat-card__value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); color: var(--color-text); } .stat-card__label { font-size: var(--font-size-sm); color: var(--color-text-tertiary); } .admin-contacts__toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .admin-contacts__search { flex: 1; max-width: 400px; } .admin-contacts__filters { display: flex; gap: 8px; } .admin-contacts__filter { padding: 6px 16px; border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); background: var(--color-white); border: 1px solid var(--color-border); transition: all var(--transition-fast); white-space: nowrap; &:hover { background: var(--color-bg-secondary, #f5f5f5); } } .admin-contacts__filter--active { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); } .admin-contacts__search-input { width: 100%; max-width: 400px; padding: 10px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-size-sm); background: var(--color-white); transition: border-color var(--transition-fast); &:focus { outline: none; border-color: var(--color-primary); } } /* Contacts Table */ .contacts-table { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .contacts-table__header { display: grid; grid-template-columns: 2fr 2fr 1.2fr 0.8fr 1.2fr 1.2fr; gap: 16px; padding: 12px 24px; background: var(--color-bg-secondary, #fafafa); border-bottom: 1px solid var(--color-border); } .contacts-table__th { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; } .contacts-table__th--num { text-align: right; } .contacts-table__row { display: grid; grid-template-columns: 2fr 2fr 1.2fr 0.8fr 1.2fr 1.2fr; gap: 16px; padding: 14px 24px; align-items: center; transition: background var(--transition-fast); cursor: pointer; &:not(:last-child) { border-bottom: 1px solid var(--color-border-light, #f0f0f0); } &:hover { background: var(--color-bg-secondary, #fafafa); } } .contacts-table__cell { font-size: var(--font-size-sm); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .contacts-table__cell--name { display: flex; align-items: center; gap: 12px; font-weight: var(--font-weight-medium); } .contacts-table__cell--num { text-align: right; font-weight: var(--font-weight-medium); } .contacts-table__cell--muted { color: var(--color-text-tertiary); } .contacts-table__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); flex-shrink: 0; } .contacts-table__empty { padding: 48px 24px; text-align: center; color: var(--color-text-secondary); font-size: var(--font-size-sm); } .giveaway-table .contacts-table__row { cursor: default; } .giveaway-table .contacts-table__cell small { display: block; margin-top: 2px; color: var(--color-text-tertiary); font-size: 11px; } .contact-giveaways { display: grid; gap: 10px; } .contact-giveaway { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); } .contact-giveaway > div { display: flex; flex-direction: column; } .contact-giveaway > div:last-child { text-align: right; } .contact-giveaway strong { font-size: var(--font-size-sm); } .contact-giveaway span { color: var(--color-text-tertiary); font-size: var(--font-size-xs); } /* Contact Detail */ .contact-detail__back { display: inline-flex; align-items: center; gap: 8px; font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: 24px; transition: color var(--transition-fast); &:hover { color: var(--color-text); } } .contact-detail__layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; } .contact-detail__main { display: flex; flex-direction: column; gap: 32px; } .contact-detail__header { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; } .contact-detail__avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--color-primary); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); flex-shrink: 0; } .contact-detail__name { font-family: var(--font-display); font-size: var(--font-size-2xl); color: var(--color-text); margin-bottom: 2px; } .contact-detail__email { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .contact-detail__section { background: var(--color-white); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); } .contact-detail__section-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; } .contact-detail__empty { color: var(--color-text-tertiary); font-size: var(--font-size-sm); } /* Booking row in contact detail */ .booking-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; &:not(:last-child) { border-bottom: 1px solid var(--color-border-light, #f0f0f0); } } .booking-row__image { width: 56px; height: 56px; border-radius: var(--radius-md); overflow: hidden; flex-shrink: 0; background: var(--color-bg-secondary, #f0f0f0); img { width: 100%; height: 100%; object-fit: cover; } } .booking-row__details { display: flex; flex-direction: column; gap: 2px; flex: 1; } .booking-row__property { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); } .booking-row__dates { font-size: var(--font-size-xs); color: var(--color-text-secondary); } /* Timeline */ .timeline { display: flex; flex-direction: column; gap: 16px; } .timeline__event { display: flex; align-items: flex-start; gap: 12px; } .timeline__icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--color-accent-bg); color: var(--color-primary); } .timeline__icon--booked { background: #e8f5e9; color: #2e7d32; } .timeline__icon--invited { background: #fff3e0; color: #e65100; } .timeline__content { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; } .timeline__description { font-size: var(--font-size-sm); color: var(--color-text); font-weight: var(--font-weight-medium); } .timeline__time { font-size: var(--font-size-xs); color: var(--color-text-tertiary); } /* Contact Sidebar */ .contact-sidebar { background: var(--color-white); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); position: sticky; top: 24px; } .contact-sidebar__section-title { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; &:not(:first-child) { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--color-border-light, #f0f0f0); } } .contact-sidebar__field { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; } .contact-sidebar__label { font-size: var(--font-size-xs); color: var(--color-text-tertiary); } .contact-sidebar__value { font-size: var(--font-size-sm); color: var(--color-text); font-weight: var(--font-weight-medium); word-break: break-word; } .contact-sidebar__labels { display: flex; flex-wrap: wrap; gap: 6px; } .contact-sidebar__label-form { display: inline-block; margin: 0; } .contact-sidebar__label-pill { background: var(--color-accent-bg); color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); padding: 4px 10px; border-radius: var(--radius-full); border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; &:hover { background: var(--color-accent); color: var(--color-white); } } .contact-sidebar__label-x { opacity: 0.6; font-size: 14px; line-height: 1; } .contact-sidebar__add-form { margin-top: 12px; } .contact-sidebar__input, .contact-sidebar__textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-size-sm); color: var(--color-text); font-family: inherit; transition: border-color var(--transition-fast); &:focus { outline: none; border-color: var(--color-primary); } } .contact-sidebar__textarea { resize: vertical; margin-bottom: 8px; } .contact-sidebar__save-btn { width: 100%; padding: 8px 16px; background: var(--color-primary); color: var(--color-white); border: none; border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; transition: background var(--transition-fast); &:hover { background: var(--color-primary-hover); } } .contact-sidebar__notes { font-size: var(--font-size-sm); color: var(--color-text); line-height: var(--line-height-relaxed); } .contact-sidebar__empty { font-size: var(--font-size-xs); color: var(--color-text-tertiary); font-style: italic; } } /* --- Admin Collections --- */ .admin-collections__header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-xl); } .admin-collections__add-btn { display: inline-flex; align-items: center; padding: 10px 20px; background: var(--color-primary); color: var(--color-white); border: none; border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; text-decoration: none; transition: background var(--transition-fast); &:hover { background: var(--color-primary-hover); } } .collections-table { background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .collections-table__header { display: grid; grid-template-columns: 60px 2fr 1fr 1fr; gap: var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border-light); } .collections-table__row { display: grid; grid-template-columns: 60px 2fr 1fr 1fr; gap: var(--space-md); padding: var(--space-md) var(--space-lg); text-decoration: none; color: var(--color-text); border-bottom: 1px solid var(--color-border-light); align-items: center; transition: background var(--transition-fast); &:hover { background: var(--color-bg-secondary); } &:last-child { border-bottom: none; } } .homepage-groups-table .collections-table__header, .homepage-groups-table .collections-table__row { grid-template-columns: 52px minmax(7rem, 1.35fr) minmax(6rem, 0.9fr) minmax(8rem, 1.15fr) 74px; } .homepage-groups-table__position { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-full); background: var(--color-accent-bg); color: var(--color-primary); font-weight: var(--font-weight-semibold); } .collections-table__cell { font-size: var(--font-size-sm); } .collections-table__cell--name { font-weight: var(--font-weight-medium); } .collections-table__color { width: 24px; height: 24px; border-radius: 50%; display: inline-block; } .collections-table__status { display: inline-block; padding: 2px 10px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); background: var(--color-bg-secondary); color: var(--color-text-tertiary); } .collections-table__status--active { background: #e8f5e9; color: #2e7d32; } .collection-detail__form-panel { max-width: 480px; background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-xl); margin-top: var(--space-lg); } .collection-form__image-preview { margin-bottom: var(--space-sm); border-radius: var(--radius-md); overflow: hidden; } .collection-form__preview-img { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-md); } .collection-form__file-input { width: 100%; font-size: var(--font-size-sm); color: var(--color-text-secondary); } .collection-form__color-row { display: flex; align-items: center; gap: var(--space-sm); } .collection-form__color-swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--color-border-light); cursor: pointer; padding: 0; flex-shrink: 0; -webkit-appearance: none; appearance: none; &::-webkit-color-swatch-wrapper { padding: 0; } &::-webkit-color-swatch { border: none; border-radius: 50%; } &::-moz-color-swatch { border: none; border-radius: 50%; } } .collection-form__checkbox-label { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--font-size-sm); cursor: pointer; } .collection-form__delete-btn { width: 100%; padding: 8px 16px; background: none; color: #e53935; border: 1px solid #e53935; border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; margin-top: var(--space-sm); transition: all var(--transition-fast); &:hover { background: #e53935; color: var(--color-white); } } .collection-form__errors { margin-bottom: var(--space-md); padding: var(--space-md); border: 1px solid #efb2ad; border-radius: var(--radius-md); background: #fff5f4; color: #9d2820; font-size: var(--font-size-sm); } .collection-form__errors p { font-weight: var(--font-weight-semibold); } .collection-form__errors ul { margin-top: var(--space-xs); padding-left: var(--space-md); list-style: disc; } .homepage-group-form__dates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); } .homepage-group-form__schedule-help { margin-top: calc(var(--space-sm) * -1); margin-bottom: var(--space-md); } .homepage-group-rule { max-width: 42rem; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--color-border-light); border-radius: var(--radius-xl); background: var(--color-white); box-shadow: var(--shadow-sm); } .homepage-group-rule__eyebrow { margin-bottom: var(--space-sm); color: var(--color-clay); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; } .homepage-group-rule h2 { font-size: var(--font-size-3xl); } .homepage-group-rule > p:last-child { margin-top: var(--space-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); } .collection-properties__loading { padding: var(--space-xl); text-align: center; color: var(--color-text-tertiary); font-size: var(--font-size-sm); } .collection-properties__error { padding: var(--space-xl); text-align: center; color: #e53935; font-size: var(--font-size-sm); } .collection-properties__toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); } .collection-properties__count { font-size: var(--font-size-sm); color: var(--color-text-tertiary); font-weight: var(--font-weight-medium); } .collection-properties__save-btn { padding: 8px 20px; background: var(--color-primary); color: var(--color-white); border: none; border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; transition: background var(--transition-fast); &:hover { background: var(--color-primary-hover); } } .collection-properties__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } /* Curated categories panel (collection edit page) */ .cat-admin { display: grid; gap: var(--space-md); } .cat-admin__card { background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-md); } .cat-admin__fields { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-sm); margin-bottom: var(--space-sm); } .cat-admin__props { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xs) var(--space-md); margin-bottom: var(--space-md); } .cat-admin__prop { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--font-size-sm); cursor: pointer; } .cat-admin__actions { display: flex; gap: var(--space-sm); } .cat-admin__delete { margin-top: var(--space-sm); } .cat-admin__new { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: var(--space-sm); align-items: center; } .cat-admin__empty, .cat-admin__error { font-size: var(--font-size-sm); color: var(--color-text-tertiary); } .cat-admin__error { color: #e53935; } .collection-property-card { background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; border: 2px solid transparent; transition: border-color var(--transition-fast); } .collection-property-card--selected { border-color: var(--color-primary); } .collection-property-card__image { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-bg-secondary); img { width: 100%; height: 100%; object-fit: cover; } } .collection-property-card__order { position: absolute; top: var(--space-sm); left: var(--space-sm); display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-white); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); box-shadow: var(--shadow-sm); } .collection-property-card__order[hidden] { display: none; } .collection-property-card__info { padding: var(--space-sm) var(--space-md); } .collection-property-card__name { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .collection-property-card__city { display: block; font-size: var(--font-size-xs); color: var(--color-text-tertiary); } .collection-property-card__toggle { width: 100%; padding: 6px; border: none; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; transition: all var(--transition-fast); } .collection-property-card__toggle--add { background: var(--color-bg-secondary); color: var(--color-primary); &:hover { background: var(--color-primary); color: var(--color-white); } } .collection-property-card__toggle--remove { background: #fbe9e7; color: #e53935; &:hover { background: #e53935; color: var(--color-white); } } /* --- Admin Properties --- */ .property-settings { display: flex; flex-direction: column; gap: var(--space-md); } .property-settings__row { display: grid; grid-template-columns: 180px 1fr; gap: var(--space-lg); background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-lg); @media (max-width: 640px) { grid-template-columns: 1fr; } } .property-settings__thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); background: var(--color-bg-muted); } .property-settings__thumb--empty { display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); color: var(--color-text-tertiary); } .property-settings__body { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; } .property-settings__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); } .property-settings__internal { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin: 0; } .property-settings__meta { font-size: var(--font-size-xs); color: var(--color-text-tertiary); } .property-settings__badge { color: #2e7d32; font-weight: var(--font-weight-medium); } .property-settings__view { font-size: var(--font-size-sm); color: var(--color-primary); text-decoration: none; white-space: nowrap; &:hover { text-decoration: underline; } } .property-settings__form { display: flex; flex-direction: column; gap: var(--space-md); } .property-settings__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); @media (max-width: 900px) { grid-template-columns: 1fr; } } .property-settings__field { display: flex; flex-direction: column; gap: 4px; } .property-settings__hint { font-size: var(--font-size-xs); color: var(--color-text-tertiary); } .property-settings__slug-row { display: flex; align-items: center; .contact-sidebar__input { border-top-left-radius: 0; border-bottom-left-radius: 0; } } .property-settings__slug-prefix { padding: 8px 10px; background: var(--color-bg-muted); border: 1px solid var(--color-border); border-right: none; border-radius: var(--radius-md) 0 0 var(--radius-md); font-size: var(--font-size-sm); color: var(--color-text-tertiary); white-space: nowrap; } .property-settings__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); border-top: 1px solid var(--color-border-light); padding-top: var(--space-md); @media (max-width: 640px) { flex-direction: column; align-items: flex-start; } } .property-settings__preview { font-size: var(--font-size-sm); color: var(--color-text-secondary); overflow-wrap: anywhere; } .property-settings__save-btn { padding: 8px 24px; background: var(--color-primary); color: var(--color-white); border: none; border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; transition: background var(--transition-fast); &:hover { background: var(--color-primary-hover); } } /* ============================================ GUEST PORTAL ============================================ */ @layer components { .guest-portal__layout { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; } .guest-portal__sidebar { border-right: 1px solid var(--color-border); background: var(--color-white); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .guest-portal__main { padding: 48px 48px 48px 56px; background: var(--color-bg-secondary, #fafafa); min-height: 100vh; } .guest-portal__flash { padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: 24px; font-size: var(--font-size-sm); } .guest-portal__flash--notice { background: #e8f5e9; color: #2e7d32; } .guest-portal__flash--alert { background: #fff3e0; color: #e65100; } /* Sidebar */ .sidebar { display: flex; flex-direction: column; height: 100%; padding: 24px 20px; } .sidebar__logo { margin-bottom: 32px; } .sidebar__logo-img { height: 28px; width: auto; } .sidebar__user { display: flex; align-items: center; gap: 12px; padding: 16px 0; margin-bottom: 24px; border-bottom: 1px solid var(--color-border); } .sidebar__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); flex-shrink: 0; } .sidebar__user-info { display: flex; flex-direction: column; min-width: 0; } .sidebar__user-name { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); color: var(--color-text); } .sidebar__user-email { font-size: var(--font-size-xs); color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar__nav { display: flex; flex-direction: column; gap: 4px; flex: 1; } .sidebar__link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); transition: all var(--transition-fast); &:hover { background: var(--color-bg-secondary, #f5f5f5); color: var(--color-text); } } .sidebar__link--active { background: var(--color-accent-bg); color: var(--color-primary); font-weight: var(--font-weight-semibold); } .sidebar__footer { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; border-top: 1px solid var(--color-border); margin-top: auto; } /* Trips */ .trips__title { font-family: var(--font-display); font-size: var(--font-size-3xl); color: var(--color-text); margin-bottom: 4px; } .trips__subtitle { color: var(--color-text-secondary); font-size: var(--font-size-base); margin-bottom: 40px; } .trips__section { margin-bottom: 48px; } .trips__section-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text); margin-bottom: 20px; } .trips__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; } .trips__empty { padding: 48px 24px; text-align: center; background: var(--color-white); border-radius: var(--radius-lg); border: 1px dashed var(--color-border); color: var(--color-text-secondary); } .trips__browse-link { display: inline-block; margin-top: 12px; padding: 10px 24px; background: var(--color-primary); color: var(--color-white); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); transition: background var(--transition-fast); &:hover { background: var(--color-primary-hover); } } /* Trip Card */ .trip-card { display: flex; background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: box-shadow var(--transition-fast); &:hover { box-shadow: var(--shadow-card-hover); } } .trip-card__image { width: 160px; min-height: 140px; flex-shrink: 0; background: var(--color-bg-secondary, #f0f0f0); img { width: 100%; height: 100%; object-fit: cover; } } .trip-card__details { padding: 20px; display: flex; flex-direction: column; gap: 4px; } .trip-card__property { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text); } .trip-card__location { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .trip-card__dates { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: 8px; } .trip-card__status { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); width: fit-content; } .trip-card__status--new, .trip-card__status--confirmed { background: #e8f5e9; color: #2e7d32; } .trip-card__status--checked_in { background: #e3f2fd; color: #1565c0; } .trip-card__status--checked_out, .trip-card__status--cancelled { background: #f5f5f5; color: var(--color-text-tertiary); } } /* Trip Detail */ .trip-detail__back { display: inline-flex; align-items: center; gap: 8px; font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: 24px; transition: color var(--transition-fast); &:hover { color: var(--color-text); } } .trip-detail__top { display: flex; gap: 32px; margin-bottom: 40px; } .trip-detail__hero { width: 320px; height: 220px; border-radius: var(--radius-lg); overflow: hidden; flex-shrink: 0; img { width: 100%; height: 100%; object-fit: cover; } } .trip-detail__top-info { display: flex; flex-direction: column; justify-content: center; gap: 16px; } .trip-detail__title { font-family: var(--font-display); font-size: var(--font-size-2xl); color: var(--color-text); margin-bottom: 2px; } .trip-detail__location { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .trip-detail__quick-stats { display: flex; gap: 24px; } .trip-detail__stat { display: flex; align-items: baseline; gap: 4px; } .trip-detail__stat-value { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text); } .trip-detail__stat-label { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .trip-detail__sections { display: flex; flex-direction: column; gap: 1px; background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .trip-detail__section { padding: 28px 32px; background: var(--color-white); &:not(:last-child) { border-bottom: 1px solid var(--color-border-light, #f0f0f0); } } .trip-detail__section-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); margin-bottom: 16px; } .trip-detail__dates-row { display: flex; align-items: center; gap: 32px; } .trip-detail__date-block { display: flex; flex-direction: column; gap: 2px; } .trip-detail__arrow { color: var(--color-text-tertiary); flex-shrink: 0; } .trip-detail__label { font-size: var(--font-size-xs); color: var(--color-text-tertiary); font-weight: var(--font-weight-medium); } .trip-detail__value { font-size: var(--font-size-base); color: var(--color-text); font-weight: var(--font-weight-medium); } .trip-detail__time { font-size: var(--font-size-xs); color: var(--color-text-secondary); } .trip-detail__row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; &:not(:last-child) { border-bottom: 1px solid var(--color-border-light, #f0f0f0); } } .trip-detail__row-label { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .trip-detail__row-value { font-size: var(--font-size-sm); color: var(--color-text); font-weight: var(--font-weight-medium); } .trip-detail__row-value--mono { font-family: monospace; letter-spacing: 0.02em; } .trip-detail__row-value--bold { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); } .trip-detail__description { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); } /* Guest List */ .guest-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; } .guest-list__item { display: flex; align-items: center; gap: 12px; padding: 10px 0; &:not(:last-child) { border-bottom: 1px solid var(--color-border-light, #f0f0f0); } } .guest-list__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--color-accent-bg); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); flex-shrink: 0; } .guest-list__item--booker .guest-list__avatar { background: var(--color-primary); color: var(--color-white); } .guest-list__info { display: flex; flex-direction: column; flex: 1; min-width: 0; } .guest-list__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); } .guest-list__role { font-size: var(--font-size-xs); color: var(--color-text-tertiary); } .guest-list__email { font-size: var(--font-size-xs); color: var(--color-text-tertiary); } .guest-list__badge { font-size: var(--font-size-xs); padding: 2px 8px; border-radius: var(--radius-full); font-weight: var(--font-weight-medium); } .guest-list__badge--verified { background: #e8f5e9; color: #2e7d32; } .guest-list__badge--pending { background: #fff3e0; color: #e65100; } /* Invite Link */ .invite-link { display: flex; gap: 8px; margin-top: 8px; } .invite-link__input { flex: 1; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-size-xs); color: var(--color-text-secondary); background: var(--color-bg-secondary, #f5f5f5); overflow: hidden; text-overflow: ellipsis; } .invite-link__btn { padding: 8px 20px; background: var(--color-primary); color: var(--color-white); border: none; border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; white-space: nowrap; transition: background var(--transition-fast); &:hover { background: var(--color-primary-hover); } } .invite-link__hint { font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin-top: 8px; } /* Invite Landing Page */ .invite-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-bg-secondary, #fafafa); padding: 40px 20px; } .invite-page__card { background: var(--color-white); border-radius: var(--radius-xl, 16px); box-shadow: var(--shadow-lg); max-width: 480px; width: 100%; overflow: hidden; } .invite-page__logo { display: block; padding: 24px 32px 16px; } .invite-page__logo-img { height: 24px; width: auto; } .invite-page__hero { width: 100%; height: 200px; img { width: 100%; height: 100%; object-fit: cover; } } .invite-page__info { padding: 24px 32px; } .invite-page__title { font-family: var(--font-display); font-size: var(--font-size-2xl); color: var(--color-text); margin-bottom: 8px; } .invite-page__subtitle { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); strong { color: var(--color-text); } } .invite-page__details { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .invite-page__detail { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-sm); color: var(--color-text-secondary); svg { flex-shrink: 0; color: var(--color-text-tertiary); } } .invite-page__errors { padding: 12px 32px; background: #fff3e0; color: #e65100; font-size: var(--font-size-sm); p { margin-bottom: 4px; } p:last-child { margin-bottom: 0; } } .invite-page__form-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text); padding: 0 32px; margin-bottom: 16px; } .invite-page__form { padding: 0 32px 32px; } .invite-page__login { text-align: center; font-size: var(--font-size-sm); color: var(--color-text-secondary); padding: 0 32px 24px; } .invite-page__login-link { color: var(--color-primary); font-weight: var(--font-weight-medium); &:hover { text-decoration: underline; } } /* Profile */ .profile__title { font-family: var(--font-display); font-size: var(--font-size-3xl); color: var(--color-text); margin-bottom: 4px; } .profile__subtitle { color: var(--color-text-secondary); font-size: var(--font-size-base); margin-bottom: 40px; } .profile__errors { background: #fff3e0; color: #e65100; padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: 24px; font-size: var(--font-size-sm); p { margin-bottom: 4px; } p:last-child { margin-bottom: 0; } } .profile__form { max-width: 640px; } .profile__section { background: var(--color-white); border-radius: var(--radius-lg); padding: 28px 32px; box-shadow: var(--shadow-sm); margin-bottom: 24px; } .profile__section-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text); margin-bottom: 4px; } .profile__section-hint { font-size: var(--font-size-sm); color: var(--color-text-tertiary); margin-bottom: 20px; } .profile__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .profile__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; } .profile__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); } .profile__input { padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-size-sm); color: var(--color-text); transition: border-color var(--transition-fast); &:focus { outline: none; border-color: var(--color-primary); } } .profile__input--disabled { background: var(--color-bg-secondary, #f5f5f5); color: var(--color-text-tertiary); cursor: not-allowed; } .profile__hint { font-size: var(--font-size-xs); color: var(--color-text-tertiary); } .profile__actions { display: flex; justify-content: flex-end; } .profile__submit { padding: 10px 32px; background: var(--color-primary); color: var(--color-white); border: none; border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; transition: background var(--transition-fast); &:hover { background: var(--color-primary-hover); } } } /* ============================================ UTILITIES ============================================ */ @layer utilities { .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } } /* ============================================= CHECKOUT PAGE ============================================= */ /* The proportions were backwards: a 720px form column holding one radio and a button, next to a 400px summary carrying the property, dates, guests, the price lines and the promo field — with a 112px canyon between them. Narrow the whole thing, halve the gutter, and give the width back to the column that actually has content. */ .checkout__layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--space-3xl); max-width: 1120px; padding-top: var(--space-2xl); padding-bottom: var(--space-4xl); align-items: start; } .checkout__title { font-family: var(--font-display); font-size: var(--font-size-3xl); /* Bold-only face — 400 would be a synthesised light. */ font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-2xl); } .checkout__payment-option { display: flex; gap: var(--space-md); padding: var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-2xl); } .checkout__option-radio { padding-top: 2px; input[type="radio"] { width: 18px; height: 18px; accent-color: var(--color-accent); } } .checkout__option-title { display: block; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); margin-bottom: 2px; } .checkout__option-detail { font-size: var(--font-size-sm); color: var(--color-text-secondary); } /* Placeholder that holds the payment form's shape while Stripe Elements mounts. Sized to roughly match the real form so the column does not jump when it swaps in. Removed from the DOM by payment#hideSkeleton. */ .checkout__payment-skeleton { display: grid; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-border-light); } .checkout__skeleton-line, .checkout__skeleton-field, .checkout__skeleton-button { border-radius: var(--radius-md); background: linear-gradient( 100deg, var(--color-bg-muted) 30%, color-mix(in srgb, var(--color-bg-muted) 60%, #fff) 50%, var(--color-bg-muted) 70% ); background-size: 200% 100%; animation: checkout-skeleton 1.3s ease-in-out infinite; } .checkout__skeleton-line--title { width: 6.5rem; height: 1.25rem; } .checkout__skeleton-line--note { width: 70%; height: 0.9rem; } .checkout__skeleton-field { height: 11rem; } .checkout__skeleton-button { height: 3.4rem; border-radius: var(--radius-md); } .checkout__terms { margin-top: var(--space-md); text-align: center; font-size: var(--font-size-xs); line-height: var(--line-height-normal); color: var(--color-text-tertiary); a { color: var(--color-text-secondary); text-decoration: underline; text-underline-offset: 2px; &:hover { color: var(--color-text); } } } .checkout__skeleton-status { margin-top: var(--space-sm); text-align: center; font-size: var(--font-size-xs); color: var(--color-text-tertiary); } @keyframes checkout-skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .checkout__skeleton-line, .checkout__skeleton-field, .checkout__skeleton-button { animation: none; } } .checkout__next-btn { width: 100%; padding: 16px; background: var(--color-clay); color: var(--color-white); border: none; border-radius: var(--radius-md); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all var(--transition-fast); margin-bottom: var(--space-sm); &:hover { background: color-mix(in srgb, var(--color-clay) 86%, #000); } } .checkout__note { text-align: center; font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin-bottom: var(--space-xl); } .payment-save-choice { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0; padding: 15px 16px; color: #303b35; background: #f7f6f2; border: 1px solid #dfddd4; border-radius: 12px; cursor: pointer; } .payment-save-choice input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #24493a; flex: 0 0 auto; } .payment-save-choice strong, .payment-save-choice small { display: block; } .payment-save-choice strong { font-size: 14px; line-height: 1.3; } .payment-save-choice small { margin-top: 4px; color: #6e7772; font-size: 12px; line-height: 1.45; } .checkout__payment-form { border-top: 1px solid var(--color-border-light); padding-top: var(--space-xl); } .checkout__payment-title { font-size: var(--font-size-xl); margin-bottom: var(--space-lg); } .checkout__card-element { padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-lg); min-height: 100px; } .checkout__card-errors { color: #c13a3a; font-size: var(--font-size-sm); margin-bottom: var(--space-md); padding: var(--space-sm) var(--space-md); background: #fef2f2; border-radius: var(--radius-md); } .checkout__pay-btn { width: 100%; padding: 16px; background: var(--color-clay); color: var(--color-white); border: none; border-radius: var(--radius-md); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all var(--transition-fast); &:hover:not(:disabled) { background: color-mix(in srgb, var(--color-clay) 86%, #000); } &:disabled { opacity: 0.6; cursor: not-allowed; } } /* Trip details sidebar */ .checkout__trip-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-xl); box-shadow: var(--shadow-md); position: sticky; top: var(--space-xl); } .checkout__trip-title { font-family: var(--font-display); font-size: var(--font-size-lg); /* Was 700 on DM Serif Display, which ships 400 only — the browser was faking the bold, which is what made it look smeared. */ font-weight: 700; letter-spacing: -0.01em; margin-bottom: var(--space-lg); } .checkout__trip-property { display: flex; gap: var(--space-md); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border-light); margin-bottom: var(--space-md); } .checkout__trip-image { width: 80px; height: 60px; border-radius: var(--radius-md); overflow: hidden; flex-shrink: 0; img { width: 100%; height: 100%; object-fit: cover; } } .checkout__trip-name { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } .checkout__trip-location { display: block; font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin-bottom: var(--space-xs); } .checkout__trip-stats { display: flex; gap: var(--space-md); font-size: var(--font-size-xs); color: var(--color-text-tertiary); } .checkout__trip-dates { display: grid; gap: var(--space-sm); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border-light); margin-bottom: var(--space-md); } /* "Sep 28 to Sep 30" and its Change on one line. The uppercase DATES / GUESTS eyebrows are gone — the values say what they are. */ .checkout__trip-line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); strong { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); } } .checkout__trip-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--font-size-sm); color: var(--color-text-secondary); padding: var(--space-xs) 0; } .checkout__trip-row--total { font-weight: var(--font-weight-bold); color: var(--color-text); padding-top: var(--space-md); margin-top: var(--space-sm); border-top: 1px solid var(--color-border); } .checkout__change-btn { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: #6d5322; background: var(--color-white); padding: 4px 12px; border: 1px solid color-mix(in srgb, var(--color-accent) 68%, var(--color-border)); border-radius: var(--radius-full); cursor: pointer; transition: all var(--transition-fast); &:hover { background: var(--color-accent-bg); } } .checkout__cancellation { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); padding: var(--space-md); background: var(--color-bg-muted); border-radius: var(--radius-md); svg { flex-shrink: 0; color: var(--color-text-tertiary); margin-top: 2px; } strong { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); margin-bottom: 2px; } p { font-size: var(--font-size-xs); color: var(--color-text-tertiary); } } @media (max-width: 768px) { .checkout__layout { grid-template-columns: 1fr; gap: var(--space-xl); } .checkout__sidebar { order: -1; } } } /* --- Change Booking Modal --- */ .change-modal__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 9998; animation: fadeIn 200ms ease; } .change-modal__overlay--closing { animation: fadeOut 200ms ease forwards; } .change-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 740px; max-width: 92vw; max-height: 90vh; overflow-y: auto; background: var(--color-white); border-radius: var(--radius-xl); box-shadow: 0 20px 60px rgba(0,0,0,0.2); padding: var(--space-2xl); z-index: 9999; animation: scaleIn 250ms cubic-bezier(0.16, 1, 0.3, 1); } .change-modal--closing { animation: scaleOut 200ms ease forwards; } .change-modal__close-btn { position: absolute; top: var(--space-lg); right: var(--space-lg); background: none; border: none; font-size: 1.5rem; color: var(--color-text-tertiary); cursor: pointer; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all var(--transition-fast); &:hover { background: var(--color-bg-muted); color: var(--color-text); } } .change-modal__title { font-family: var(--font-serif); font-size: var(--font-size-2xl); font-weight: 400; margin-bottom: var(--space-xl); } .change-modal__tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 3px; margin-bottom: var(--space-xl); } .change-modal__tab { padding: 10px; border: none; background: none; border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); } .change-modal__tab--active { background: var(--color-primary); color: var(--color-white); } .change-modal__date-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-lg); } .change-modal__date-label { display: block; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); } .change-modal__date-summary { display: block; font-size: var(--font-size-sm); color: var(--color-text-tertiary); } .change-modal__date-inputs { display: flex; gap: var(--space-sm); } .change-modal__date-field { padding: 8px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); min-width: 130px; } .change-modal__date-field-label { display: block; font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin-bottom: 2px; } .change-modal__max-guests { font-size: var(--font-size-sm); color: var(--color-text-tertiary); margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border-light); } .change-modal__guest-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-border-light); } .change-modal__guest-name { display: block; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); } .change-modal__guest-age { display: block; font-size: var(--font-size-xs); color: var(--color-text-tertiary); } .change-modal__footer { display: flex; justify-content: flex-end; margin-top: var(--space-xl); padding-top: var(--space-md); } .change-modal__confirm { background: var(--color-primary); color: var(--color-white); border: none; border-radius: var(--radius-full); padding: 12px 32px; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all var(--transition-fast); &:hover { background: var(--color-primary-hover); } } @media (max-width: 768px) { .change-modal { width: 100%; max-width: 100%; top: auto; bottom: 0; left: 0; transform: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 85vh; } } /* --- Confirmation Page --- */ .confirmation__nav { padding: var(--space-md) var(--space-lg); max-width: 1280px; margin-inline: auto; border-bottom: 1px solid var(--color-border-light); } .confirmation__logo-img { height: 20px; width: auto; } .confirmation__content { max-width: 600px; text-align: center; padding: var(--space-4xl) var(--space-lg); } .confirmation__icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: #ecfdf5; color: #059669; margin-bottom: var(--space-xl); } .confirmation__icon--pending { background: #fffbeb; color: #d97706; } .confirmation__title { font-family: var(--font-serif); font-size: var(--font-size-3xl); font-weight: 400; margin-bottom: var(--space-sm); } .confirmation__subtitle { font-size: var(--font-size-base); color: var(--color-text-secondary); margin-bottom: var(--space-2xl); } .confirmation__details { text-align: left; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-xl); margin-bottom: var(--space-2xl); } .confirmation__detail-row { display: flex; justify-content: space-between; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border-light); &:last-of-type { border-bottom: none; } } .confirmation__label { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .confirmation__value { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); } .confirmation__note { font-size: var(--font-size-sm); color: var(--color-text-tertiary); margin-top: var(--space-md); font-style: italic; } .confirmation__btn { display: inline-block; padding: 14px 32px; background: var(--color-primary); color: var(--color-white); border-radius: var(--radius-md); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); transition: background var(--transition-fast); &:hover { background: var(--color-primary-hover); } } /* --- Trip-invite signup form (app/views/invites/show.html.erb) --- The password auth modal (shared/_auth_modal.html.erb) was removed in favor of the passwordless OTP modal below; only these four field styles survive, still used by the invite-accept form. */ .auth-modal__field { margin-bottom: var(--space-md); } .auth-modal__input { width: 100%; padding: 14px var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-size-base); color: var(--color-text); transition: border-color var(--transition-fast); &::placeholder { color: var(--color-text-tertiary); } &:focus { outline: none; border-color: var(--color-primary); } } .auth-modal__submit { width: 100%; padding: 14px; background: var(--color-primary); color: var(--color-white); border: none; border-radius: var(--radius-md); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); cursor: pointer; transition: background var(--transition-fast); &:hover { background: var(--color-primary-hover); } } .auth-modal__name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* --- Passwordless (OTP) sign-in modal --- Shared markup + behavior with the spin-off sites (spinoff/_auth_modal + the spinoff--auth controller): email → emailed 6-digit code → full name for new accounts. Styled here in Stay Utah's own tokens so the flow looks native on the main site while reusing the exact same flow code. */ .dp-backdrop { position: fixed; inset: 0; z-index: 9998; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(3px); display: none; opacity: 0; transition: opacity 250ms ease; } .dp-backdrop.open { display: block; opacity: 1; } /* The trip-picker's backdrop must sit BELOW its modal (.dp is z-index 95), not at the 9998 used for the full-screen auth backdrop above — otherwise the blur/scrim paints over the modal itself. The auth backdrop keeps 9998. */ .dp-backdrop[data-trip-picker-target="backdrop"] { z-index: 94; } .smodal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9999; width: min(430px, calc(100vw - 32px)); max-height: 90vh; max-height: 90dvh; background: var(--color-white); color: var(--color-text); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); display: none; flex-direction: column; overflow: hidden; } .smodal.open { display: flex; animation: amIn 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.12); } .am-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-white); color: var(--color-text); font-size: 13px; cursor: pointer; display: grid; place-items: center; } .am-close:hover { background: var(--color-bg-muted); } /* --- "List your home" modal (shared/_list_your_home_modal) --- The owner-acquisition counterpart to the auth modal: same .smodal shell, a short pitch, and one field. Phone only, on purpose — the advisor call collects the rest, and every extra field costs completions. */ .lyh { width: min(440px, calc(100vw - 32px)); } .lyh-body { overflow-y: auto; overscroll-behavior: contain; padding: 32px 30px 28px; } .lyh-kicker { display: block; font-size: 11px; font-weight: var(--font-weight-bold); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-clay); } .lyh-title { font-family: var(--font-serif); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; line-height: var(--line-height-snug); margin: 10px 0 0; } .lyh-title em { font-style: italic; color: var(--color-clay); } .lyh-text { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-normal); margin: 12px 0 0; } .lyh-points { list-style: none; display: grid; gap: 9px; margin: 16px 0 0; padding: 0; } .lyh-points li { position: relative; padding-left: 24px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } .lyh-points li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: var(--font-weight-bold); color: var(--color-clay); } .lyh-field { display: block; margin-top: 18px; } .lyh-field-k { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 7px; } .lyh-field input { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 13px 16px; /* 16px keeps iOS from zooming the page on focus. */ font-size: 16px; font-family: inherit; color: var(--color-text); outline: 0; transition: border-color var(--transition-fast); } .lyh-field input:focus { border-color: var(--color-primary); } .lyh-cta { width: 100%; margin-top: 20px; padding: 14px 18px; border: 0; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-white); font-family: inherit; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); cursor: pointer; transition: opacity var(--transition-fast); } .lyh-cta:hover { opacity: 0.88; } .lyh-note { display: block; text-align: center; font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 10px; } @media (max-width: 620px) { .lyh-body { padding: 26px 22px 24px; } } .authm .sm-article { overflow-y: auto; overscroll-behavior: contain; padding: 34px 28px 26px; } .authm-title { font-family: var(--font-serif); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; margin: 0 0 6px; } .authm-sub { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-normal); margin: 0 0 16px; } .authm-sub b { color: var(--color-text); } .authm .co-field span { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 5px; } .authm .co-field input { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px; font-size: var(--font-size-base); font-family: var(--font-sans); color: var(--color-text); background: var(--color-white); outline: 0; transition: border-color 0.15s ease; } .authm .co-field input:focus { border-color: var(--color-primary); } .authm .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); border-radius: 999px; padding: 13px 24px; border: 1px solid transparent; cursor: pointer; transition: opacity 0.15s ease; } .authm .btn:hover { opacity: 0.88; } .authm .btn-dark { background: var(--color-primary); color: #fff; } .authm-cta { width: 100%; margin-top: 14px; } .authm-back { width: 100%; margin-top: 16px; background: var(--color-white); border: 1px solid var(--color-border); color: var(--color-text); } .authm-back:hover { border-color: var(--color-primary); opacity: 1; } .authm-fine { font-size: var(--font-size-xs); color: var(--color-text-tertiary); text-align: center; line-height: 1.5; margin: 14px 0 0; a { color: var(--color-text-secondary); text-decoration: underline; text-underline-offset: 2px; &:hover { color: var(--color-text); } } } .authm-error { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: #b4543f; background: #fbf0ee; border-radius: var(--radius-sm); padding: 9px 12px; margin: 12px 0 0; } .authm-code { display: flex; gap: 8px; margin-top: 4px; } .authm-code input { width: 100%; min-width: 0; aspect-ratio: 5 / 6; text-align: center; font-family: var(--font-sans); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); outline: 0; transition: border-color 0.15s ease; } .authm-code input:focus { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); } .authm-resend { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 14px 0 0; } .authm-link { background: none; border: 0; padding: 0; font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .authm-link:disabled { color: var(--color-text-tertiary); text-decoration: none; cursor: default; } .acctm { width: min(480px, calc(100vw - 32px)); } .acctm .sm-article { overflow-y: auto; overscroll-behavior: contain; padding: 30px 26px 22px; } .acctm .sm-k { font-size: 0.6875rem; font-weight: var(--font-weight-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); text-align: center; margin-bottom: 8px; } .acctm .sm-title { font-family: var(--font-serif); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; line-height: var(--line-height-tight); text-align: center; margin: 0 0 14px; } .acct-loading, .acct-empty { font-size: var(--font-size-sm); color: var(--color-text-secondary); text-align: center; padding: 14px 0; } .acctm .trips-h { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-tertiary); margin: 18px 0 8px; } .acctm .trips, .acctm .wishlist, .acctm .prof-form { display: grid; gap: 10px; } .acctm .trip, .acctm .wish { display: flex; align-items: center; gap: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 10px; } .acctm .wish { color: inherit; text-decoration: none; transition: border-color var(--transition-fast), background var(--transition-fast); &:hover { border-color: var(--color-accent); background: var(--color-bg-muted); } } .acctm .trip-img, .acctm .wish-img { width: 76px; height: 58px; border-radius: var(--radius-md); overflow: hidden; flex-shrink: 0; background: linear-gradient(145deg, #edeff3, #c7ccd6); } .acctm .trip-img img, .acctm .wish-img img { width: 100%; height: 100%; object-fit: cover; } .acctm .trip-info, .acctm .wish-info { display: grid; gap: 1px; min-width: 0; } .acctm .wish-info { flex: 1; } .acctm .trip-info b, .acctm .wish-info b { font-size: var(--font-size-sm); line-height: var(--line-height-snug); } .acctm .wish-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acctm .trip-info span, .acctm .wish-info span { font-size: var(--font-size-xs); color: var(--color-text-secondary); } .acctm .trip-status, .acctm .wish-price, .acctm .prof-saved { font-weight: var(--font-weight-semibold); color: var(--color-accent); } .acctm .wish-go { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-text-tertiary); } .acctm .co-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .acctm .co-field span { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 5px; } .acctm .co-field span em { text-transform: none; letter-spacing: 0; font-style: normal; font-weight: var(--font-weight-medium); } .acctm .co-field input { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px; font-size: var(--font-size-base); font-family: var(--font-sans); color: var(--color-text); background: var(--color-white); outline: 0; transition: border-color var(--transition-fast); } .acctm .co-field input:focus { border-color: var(--color-primary); } .acctm .prof-email { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); margin: 2px 0 0; } .acctm .prof-note { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin: 4px 0 0; } .acctm .prof-saved { font-size: var(--font-size-sm); margin: 0; } .acctm .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); border-radius: var(--radius-full); padding: 13px 24px; border: 1px solid transparent; cursor: pointer; transition: opacity var(--transition-fast); &:hover { opacity: 0.88; } } .acctm .btn-dark { background: var(--color-primary); color: var(--color-white); } @media (max-width: 520px) { .authm .co-field input, .acctm .co-field input { font-size: 16px; } .acctm .co-field-row { grid-template-columns: 1fr; } } } /* Animations (outside layers so they're globally available) */ @keyframes amIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)) scale(0.985); } to { opacity: 1; transform: translate(-50%, -50%); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes searchDropdownIn { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes searchDropdownOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-6px) scale(0.98); } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes scaleOut { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(0.97); } } @keyframes lightboxScaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .datepicker--closing { animation: scaleOut 200ms ease forwards; } .datepicker__overlay--closing { animation: fadeOut 200ms ease forwards; } /* ============================================ GUEST PORTAL MOBILE (unlayered — beats @layer) ============================================ */ /* Desktop default: hide drawer chrome */ .guest-portal .mobile-drawer__toggle { display: none; } .guest-portal .mobile-drawer__overlay { display: none; } @media (max-width: 768px) { .guest-portal .guest-portal__layout { display: block; } .guest-portal .guest-portal__sidebar { position: fixed; top: 0; left: 0; width: 280px; height: 100vh; z-index: 999; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15); } .guest-portal.drawer-open .guest-portal__sidebar { transform: translateX(0); } .guest-portal .mobile-drawer__overlay { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 998; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .guest-portal.drawer-open .mobile-drawer__overlay { opacity: 1; pointer-events: auto; } .guest-portal .mobile-drawer__toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 8px; margin-bottom: 16px; color: var(--color-text); cursor: pointer; border-radius: var(--radius-md); } .guest-portal .guest-portal__main { padding: 20px; } /* Trip detail */ .guest-portal .trip-detail__top { flex-direction: column; } .guest-portal .trip-detail__hero { width: 100%; height: 220px; } .guest-portal .trip-detail__quick-stats { flex-wrap: wrap; gap: 16px; } .guest-portal .trip-detail__title { font-size: var(--font-size-xl); } /* Profile */ .guest-portal .profile__row { grid-template-columns: 1fr; } .guest-portal .profile__section { padding: 20px; } /* Invite landing */ .guest-portal .invite-page { padding: 20px 12px; } .guest-portal .invite-page__hero { height: 160px; } .guest-portal .invite-page__info { padding: 20px 24px; } } @media (max-width: 480px) { .guest-portal .trip-card { flex-direction: column; } .guest-portal .trip-card__image { width: 100%; min-height: 180px; } .guest-portal .trips__grid { grid-template-columns: 1fr; } } /* ============================================ ADMIN PORTAL MOBILE (unlayered — beats @layer) ============================================ */ /* Desktop default: hide drawer chrome */ .admin-portal .mobile-drawer__toggle { display: none; } .admin-portal .mobile-drawer__overlay { display: none; } @media (max-width: 768px) { .admin-portal .admin-portal__layout { display: block; } .admin-portal .admin-portal__sidebar { position: fixed; top: 0; left: 0; width: 280px; height: 100vh; z-index: 999; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3); } .admin-portal.drawer-open .admin-portal__sidebar { transform: translateX(0); } .admin-portal .mobile-drawer__overlay { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 998; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .admin-portal.drawer-open .mobile-drawer__overlay { opacity: 1; pointer-events: auto; } .admin-portal .mobile-drawer__toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 8px; margin-bottom: 16px; color: var(--color-text); cursor: pointer; border-radius: var(--radius-md); } .admin-portal .admin-portal__main { padding: 20px; } .admin-portal .admin-collections__header { align-items: stretch; flex-direction: column; gap: 16px; } .admin-portal .admin-collections__add-btn { align-self: flex-start; } .admin-portal .homepage-groups-table .collections-table__header { display: none; } .admin-portal .homepage-groups-table .collections-table__row { grid-template-columns: 40px minmax(0, 1fr); gap: 6px 12px; padding: 16px; } .admin-portal .homepage-groups-table .collections-table__cell:nth-child(n + 3) { grid-column: 2; } /* Dashboard overview */ .admin-portal .admin-dashboard__grid { grid-template-columns: 1fr; } /* Contacts list page */ .admin-portal .admin-contacts__toolbar { flex-direction: column; align-items: stretch; gap: 12px; } .admin-portal .admin-contacts__search { max-width: 100%; } .admin-portal .admin-contacts__filters { overflow-x: auto; } /* Contacts table → stacked cards */ .admin-portal .contacts-table__header { display: none; } .admin-portal .contacts-table__row { grid-template-columns: 1fr; gap: 6px; padding: 16px; } .admin-portal .contacts-table__cell { white-space: normal; } .admin-portal .contacts-table__cell--name { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); margin-bottom: 4px; } .admin-portal .contacts-table__cell--num { text-align: left; } /* Contact detail page */ .admin-portal .contact-detail__layout { grid-template-columns: 1fr; } .admin-portal .contact-detail__layout > * { min-width: 0; } .admin-portal .contact-sidebar { position: static; } } @media (max-width: 480px) { .admin-portal .homepage-group-form__dates { grid-template-columns: 1fr; } /* Dashboard stat cards stack */ .admin-portal .admin-contacts__stats { grid-template-columns: 1fr; } /* Contact detail header */ .admin-portal .contact-detail__avatar { width: 48px; height: 48px; font-size: var(--font-size-lg); } .admin-portal .contact-detail__name { font-size: var(--font-size-xl); } } /* ============================================ SEARCH RESULTS PAGE (Part 2 — two-column with map) ============================================ */ .search-page { position: relative; } .search-page__layout { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 140px); } .search-page__results { padding: 32px 48px 64px; overflow-y: auto; } .search-page__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; } .search-page__title { font-family: var(--font-display); font-size: var(--font-size-2xl); color: var(--color-text); } .search-page__count { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .search-page__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } /* The bottom-sheet grip is mobile-only; the scroll wrapper collapses on desktop (display: contents) so the results column scrolls as one, exactly as before. Both are restyled inside the mobile media query below. */ .search-page__grip { display: none; } .search-page__scroll { display: contents; } .search-page__map { position: sticky; top: 32px; height: calc(100vh - 64px); background: var(--color-bg-muted, #f5f5f5); margin: 32px 32px 32px 0; border-radius: var(--radius-xl, 20px); overflow: hidden; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); border: 1px solid var(--color-border); } .search-page__map-canvas { width: 100%; height: 100%; } .search-page__map-toggle { display: none; position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 12px 20px; background: var(--color-primary); color: var(--color-white); border: none; border-radius: var(--radius-full); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; align-items: center; gap: 8px; z-index: 40; } /* --- Map pins --- */ .map-pin { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--color-white); color: var(--color-text); border-radius: 50%; /* Tight drop + a hairline ring: reads cleanly even where pins overlap, instead of the soft blurred shadow stacking into a dark blob. */ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.06); cursor: pointer; text-decoration: none; transition: transform 150ms ease, background 150ms ease, color 150ms ease, box-shadow 150ms ease; } .map-pin svg { width: 15px; height: 15px; display: block; } .map-pin:hover { transform: scale(1.15); background: var(--color-text); color: var(--color-white); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 5; } .map-pin--active { background: var(--color-primary); color: var(--color-white); transform: scale(1.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 10; } .map-pin--active:hover { background: var(--color-primary); color: var(--color-white); } .search-results__empty { background: var(--color-white); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); padding: 48px 24px; text-align: center; color: var(--color-text-secondary); } .search-results__browse-link { display: inline-block; margin-top: 16px; padding: 10px 24px; background: var(--color-primary); color: var(--color-white); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); transition: background 150ms ease; } .search-results__browse-link:hover { background: var(--color-primary-hover); } /* --- Mobile search page: draggable bottom sheet over the map --- */ @media (max-width: 1024px) { .search-page__layout { grid-template-columns: 1fr; min-height: 0; } /* Map fills the viewport as a background layer, beneath the sticky header (which paints over its top edge) and the sheet. */ .search-page__map { display: block; position: fixed; inset: 0; margin: 0; height: 100dvh; border: none; border-radius: 0; box-shadow: none; z-index: 1; } /* Results column becomes the bottom sheet. It sits in the area below the header (top offset set in JS) and is translated down to reveal the map; the pre-JS transform starts it near the "half" snap to avoid a flash. */ .search-page__results { position: fixed; left: 0; right: 0; top: var(--sheet-header-h, 0px); bottom: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--color-white); border-radius: 18px 18px 0 0; box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.16); z-index: 30; transform: translateY(46vh); touch-action: none; will-change: transform; } .search-page__grip { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; width: 100%; padding: 10px 0; background: none; border: none; cursor: grab; touch-action: none; } .search-page__grip:active { cursor: grabbing; } .search-page__grip-handle { width: 36px; height: 5px; border-radius: 999px; background: var(--color-border, #d9d9d9); } .search-page__grip-count { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); } /* Overridden back to a real block; JS toggles overflow-y at the full snap. */ .search-page__scroll { display: block; flex: 1; min-height: 0; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 16px 24px; } /* The big page title is desktop-only; the count rides in the grip. */ .search-page__header { display: none; } .search-page__grid { grid-template-columns: 1fr; gap: 18px; } .search-page__title { font-size: var(--font-size-xl); } /* Floating "Map" pill — only once the sheet has fully covered the map. */ .search-page__map-toggle { display: none; } .search-page--sheet-full .search-page__map-toggle { display: inline-flex; background: var(--color-text); color: var(--color-white); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); } } @media (max-width: 768px) { /* Property detail nav on mobile: simplify */ .detail-nav { padding: 12px 16px; } .detail-nav__logo { display: none; } .detail-nav__back { gap: 0; font-size: 0; padding: 8px; background: var(--color-bg-muted); border-radius: 50%; width: 40px; height: 40px; justify-content: center; } .detail-nav__back svg { width: 18px; height: 18px; } .detail-nav__action { gap: 0; font-size: 0; padding: 8px; width: 40px; height: 40px; justify-content: center; } .detail-nav__action svg { width: 18px; height: 18px; } .detail-nav__right { gap: 8px; } } /* ============================================================ UNIFIED LISTING CARD — this site's tokens (app/views/properties/_listing_card.html.erb) ------------------------------------------------------------ The shared structure now lives in listing_card.css (linked by both layouts). Here we only map the --lc-* tokens from Stay Utah's palette; the spin-offs map theirs in spinoff.css. ============================================================ */ @layer components { :root { --lc-card-bg: var(--color-white); --lc-ink: var(--color-text); --lc-muted: var(--color-text-secondary); --lc-line: var(--color-border); --lc-accent: var(--color-accent); --lc-accent-soft: var(--color-accent-bg); --lc-star: var(--color-star); /* Every shared heading on the property page — the title, the "Holiday home in …" line, About this place, Where you'll sleep, Amenities, Reviews, Where you'll be, Things to know — reads this token, so pointing it at the display face moves them all at once, in step with the homepage rails. (DM Serif Display ships regular only, so those 700-weight headings were being faux-bolded before; SangBleu is a real bold.) */ --lc-font-title: var(--font-display); --lc-font-body: var(--font-sans); } /* Sub-heading inside "Things to know" (Cancellation policy / House rules / Safety). It has no font-family of its own in listing_card.css, so this layered rule is enough. */ .detail-rules__col-title { font-family: var(--font-display); } } /* UNLAYERED ON PURPOSE: listing_card.css loads after this file and sets .sleep-card__name to 600. The display face is bold-only, so 600 would render as a synthesised fake bold — and an equal-specificity layered rule here would lose to the later stylesheet. */ .sleep-card__name { font-weight: 700; } /* ===== Mobile booking bar reveal — UNLAYERED ON PURPOSE ===== trip_picker.css styles `.booking-bar { display: none }` unlayered, and unlayered rules win over layered ones regardless of specificity. So the ≤1024px reveal + footer padding must live outside @layer too. :has scopes them to the property pages (the only ones that render the bar). */ @media (max-width: 1024px) { body:has(.booking-bar) .booking-bar { display: flex; } /* ~88px = bar height (~73px) + a comfortable gap so the footer never kisses it. */ body:has(.booking-bar) { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } } /* ============================================================ LEGAL — /legal hub + /legal/:slug document pages ------------------------------------------------------------ A centered reading column. The hub lists each policy with a "Read …" pill; the document page renders a Markdown body (config/legal/*.md) with an auto-generated Contents box whose links jump to the `##` section anchors kramdown emits. ============================================================ */ @layer components { .legal { max-width: 820px; margin-inline: auto; padding-inline: var(--space-lg); padding-block: clamp(var(--space-2xl), 6vw, var(--space-4xl)); } .legal__back { display: inline-block; margin-bottom: var(--space-xl); color: var(--color-clay); font-weight: var(--font-weight-medium); } .legal__back:hover { color: var(--color-clay-hover); } .legal__header { margin-bottom: var(--space-2xl); } .legal__title { font-family: var(--font-serif); font-weight: var(--font-weight-normal); font-size: clamp(var(--font-size-4xl), 7vw, var(--font-size-5xl)); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); color: var(--color-text); } .legal__intro { margin-top: var(--space-lg); max-width: 48ch; color: var(--color-text-secondary); font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); } /* --- Hub list --- */ .legal-list { margin-top: var(--space-xl); border-top: 1px solid var(--color-border); } .legal-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg); border-bottom: 1px solid var(--color-border); } .legal-row__name { font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); color: var(--color-text); } .legal-row__link { flex-shrink: 0; padding: 0.6rem 1.15rem; border-radius: var(--radius-full); background: var(--color-bg-muted); color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); white-space: nowrap; transition: background-color 0.15s ease; } .legal-row__link:hover { background: var(--color-border); } /* --- Contents (table of contents) --- */ .legal-toc { margin-block: var(--space-2xl); padding: clamp(var(--space-lg), 3vw, var(--space-xl)); background: var(--color-bg-muted); border-radius: var(--radius-lg); } .legal-toc__title { margin-bottom: var(--space-md); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text); } .legal-toc__list { display: grid; gap: var(--space-sm); } .legal-toc__list a { color: var(--color-clay); line-height: var(--line-height-snug); } .legal-toc__list a:hover { text-decoration: underline; text-underline-offset: 2px; } /* --- Rendered Markdown prose --- */ .legal-doc { color: var(--color-text-secondary); font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); } .legal-doc > * + * { margin-top: var(--space-lg); } .legal-doc h2, .legal-doc h3 { scroll-margin-top: 84px; /* clear the sticky header when jumping to an anchor */ color: var(--color-text); letter-spacing: var(--letter-spacing-normal); line-height: var(--line-height-snug); } .legal-doc h2 { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-border-light); font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); } .legal-doc h2:first-child { margin-top: 0; padding-top: 0; border-top: none; } .legal-doc h3 { margin-top: var(--space-xl); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); } .legal-doc a { color: var(--color-clay); text-decoration: underline; text-underline-offset: 2px; } .legal-doc a:hover { color: var(--color-clay-hover); } .legal-doc strong { color: var(--color-text); font-weight: var(--font-weight-semibold); } .legal-doc ul, .legal-doc ol { padding-left: 1.4rem; } .legal-doc ul { list-style: disc; } .legal-doc ol { list-style: decimal; } .legal-doc li + li { margin-top: var(--space-xs); } .legal-doc li::marker { color: var(--color-text-tertiary); } .legal-doc blockquote { padding-left: var(--space-lg); border-left: 3px solid var(--color-border); color: var(--color-text-tertiary); font-style: italic; } .legal-empty { margin-top: var(--space-2xl); padding: var(--space-2xl); background: var(--color-bg-muted); border-radius: var(--radius-lg); text-align: center; color: var(--color-text-secondary); } @media (max-width: 640px) { .legal-row { flex-direction: column; align-items: flex-start; gap: var(--space-sm); } } } /* Header search pill — compact fit for the shallow overlay header (Wander-style). Unlayered on purpose: the pill's base sizes live in trip_picker.css, which is unlayered, so any @layer override here would silently lose the cascade. */ .nav__search > [data-controller~="trip-picker"] { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; } .nav__search .nav-mini { margin: 0; max-width: 450px; } .nav__search .nm-leg { padding-block: 9px; } .nav__search .nav-mini .nm-go { width: 34px; height: 34px; } /* Center the pill on the viewport, not the leftover flex space — the wordmark is wider than the account menu, so flex centering sits visibly off-axis against the viewport-centered hero copy below. Equal 1fr flanks fix that. */ @media (min-width: 769px) { .nav:has(.nav__search) { display: grid; grid-template-columns: 1fr minmax(0, 450px) 1fr; } .nav:has(.nav__search) .nav__menu { justify-self: end; } }