@layer reset, base, layout, components, utilities; /* ============================================ 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; --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; /* 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); --tp-cta: #c13a3a; --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. Themes the shared pill's CTA terracotta for the pill and its modal. */ .nav__search { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; --tp-cta: var(--color-clay); --tp-on-cta: var(--color-white); } .nav__search .nav-mini { margin: 0; } .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; } .acct-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-white); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); line-height: 1; text-transform: uppercase; cursor: pointer; overflow: hidden; transition: opacity var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); &:hover { opacity: 0.88; } } .acct-btn__image { width: 100%; height: 100%; object-fit: cover; } .acct-signin { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: var(--color-primary); color: var(--color-white); border: 0; border-radius: var(--radius-full); padding: 9px 18px; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; transition: opacity var(--transition-fast), background var(--transition-fast); &:hover { opacity: 0.88; } } .acct-signin-ic { 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; } .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__toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--space-sm); } .nav__toggle-icon { display: block; width: 24px; height: 2px; background-color: var(--color-text); position: relative; &::before, &::after { content: ""; display: block; width: 24px; height: 2px; background-color: var(--color-text); position: absolute; } &::before { top: -7px; } &::after { top: 7px; } } /* Nav — mobile */ @media (max-width: 768px) { /* Show only the Delicate Arch mark on small screens. */ .nav__logo-full { display: none; } .nav__logo-mark { display: block; } .nav__menu { display: none; } .nav__toggle { display: block; } .nav__menu--open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-white); padding: var(--space-lg); border-top: 1px solid var(--color-border); box-shadow: var(--shadow-lg); z-index: 100; .nav__links { flex-direction: column; gap: var(--space-md); } .nav__actions { padding-top: var(--space-md); border-top: 1px solid var(--color-border-light); margin-top: var(--space-md); } } } /* --- 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. */ .site-header--transparent .nav { max-width: none; padding-inline: clamp(1.5rem, 4vw, 4rem); } .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); } .site-header--transparent .acct-btn { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.15); color: var(--color-white); backdrop-filter: blur(8px); } .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, .site-header--transparent .acct-signin { 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, .site-header--transparent .acct-signin:hover, .site-header--transparent .acct-btn:hover { color: var(--color-white); opacity: 0.8; } .site-header--transparent .nav__toggle-icon, .site-header--transparent .nav__toggle-icon::before, .site-header--transparent .nav__toggle-icon::after { background-color: var(--color-white); } /* Footer — shared minimal bar; markup + styling in trip_picker.css (.ft). */ /* --- Hero (home) --- full-bleed photo, content anchored bottom-left --- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; text-align: left; z-index: 10; } .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* A touch of darkening at the top for the header, a stronger wash at the bottom so the white headline always reads over the canyon. */ .hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8, 12, 18, 0.55) 0%, rgba(8, 12, 18, 0) 24%), linear-gradient(to top, rgba(8, 12, 18, 0.82) 0%, rgba(8, 12, 18, 0.32) 38%, rgba(8, 12, 18, 0) 68%); 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-inline: clamp(1.5rem, 4vw, 4rem); padding-top: var(--space-3xl); padding-bottom: clamp(2.5rem, 6vh, 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-lg); } .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.6rem, 7.6vw, 6.5rem); font-weight: var(--font-weight-normal); color: var(--color-white); line-height: 0.98; letter-spacing: -0.025em; margin-bottom: var(--space-lg); 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(1rem, 1.4vw, 1.2rem); line-height: 1.5; max-width: 46ch; margin-bottom: var(--space-xl); } .hero__popular { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .hero__popular-label { color: rgba(255, 255, 255, 0.78); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); margin-right: var(--space-xs); } .hero__chip { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: var(--radius-full); background: rgba(18, 20, 26, 0.42); border: 1px solid rgba(255, 255, 255, 0.22); color: var(--color-white); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); backdrop-filter: blur(6px); transition: background var(--transition-fast), border-color var(--transition-fast); } .hero__chip:hover { background: rgba(18, 20, 26, 0.72); border-color: rgba(255, 255, 255, 0.5); } @media (max-width: 768px) { .hero__content { padding-bottom: var(--space-2xl); } /* 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__subtext { font-size: var(--font-size-base); } } /* --- Location Tabs --- */ .location-tabs { display: flex; gap: var(--space-sm); padding: var(--space-xl) 0; overflow-x: auto; scrollbar-width: none; &::-webkit-scrollbar { display: none; } } .location-tabs__tab { white-space: nowrap; padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-full); border: 1px solid var(--color-border); background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(4px); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); &:hover { border-color: var(--color-text); color: var(--color-text); background: var(--color-white); } } .location-tabs__tab--active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); &:hover { background: var(--color-primary-light); border-color: var(--color-primary-light); color: var(--color-white); } } /* --- 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); } /* --- Collections Pages --- */ .collections-hero { padding: var(--space-5xl) 0 var(--space-3xl); text-align: center; } .collections-hero__title { font-family: var(--font-serif); font-size: var(--font-size-5xl); font-weight: var(--font-weight-normal); margin-bottom: var(--space-md); } .collections-hero__subtitle { font-size: var(--font-size-lg); color: var(--color-text-secondary); letter-spacing: 0.01em; } .collections-page { padding-bottom: var(--space-4xl); } .collections-page__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); } .collection-card { display: block; text-decoration: none; color: var(--color-text); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-md); transition: all var(--transition-base); &:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); .collection-card__image img { transform: scale(1.03); } } } .collection-card__image { aspect-ratio: 16 / 9; overflow: hidden; position: relative; img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } &::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 100%); } } .collection-card__info { padding: var(--space-xl) var(--space-xl) var(--space-lg); } .collection-card__name { font-family: var(--font-serif); font-size: var(--font-size-2xl); font-weight: var(--font-weight-normal); margin-bottom: var(--space-xs); } .collection-card__description { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--space-md); line-height: var(--line-height-relaxed); } .collection-card__count { font-size: var(--font-size-xs); color: var(--color-text-tertiary); font-weight: var(--font-weight-medium); letter-spacing: 0.03em; text-transform: uppercase; } .collection-hero { position: relative; min-height: 400px; display: flex; align-items: flex-end; overflow: hidden; } .collection-hero__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .collection-hero__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 100%); } .collection-hero__content { position: relative; z-index: 1; padding: var(--space-2xl) 0; color: var(--color-white); text-align: left; width: 100%; } .collection-hero__back { display: inline-flex; align-items: center; gap: var(--space-xs); color: rgba(255,255,255,0.8); font-size: var(--font-size-sm); text-decoration: none; margin-bottom: var(--space-lg); transition: color var(--transition-fast); &:hover { color: var(--color-white); } } .collection-hero__title { font-family: var(--font-serif); font-size: var(--font-size-5xl); font-weight: var(--font-weight-normal); margin-bottom: var(--space-sm); } .collection-hero__description { font-size: var(--font-size-lg); opacity: 1; max-width: 600px; line-height: var(--line-height-relaxed); margin-bottom: var(--space-sm); } .collection-hero__count { font-size: var(--font-size-sm); opacity: 0.7; font-weight: var(--font-weight-medium); } .collection-properties-page { padding: var(--space-3xl) 0; } .collection-properties-page__empty { text-align: center; padding: var(--space-4xl); color: var(--color-text-secondary); } @media (max-width: 768px) { .collections-page__grid { grid-template-columns: 1fr; } .collection-hero { min-height: 240px; } .collection-hero__title { font-size: var(--font-size-2xl); } } .collections-showcase { padding-bottom: var(--space-4xl); } .collections-showcase__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); } .showcase-card { display: block; position: relative; border-radius: var(--radius-2xl); overflow: hidden; aspect-ratio: 16 / 10; text-decoration: none; color: var(--color-white); transition: all var(--transition-base); &:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); img { transform: scale(1.05); } } } .showcase-card__image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } } .showcase-card__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.15) 100%); } .showcase-card__content { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-xl); z-index: 1; } .showcase-card__name { font-family: var(--font-serif); font-size: var(--font-size-3xl); font-weight: var(--font-weight-normal); margin-bottom: var(--space-xs); color: var(--color-white); } .showcase-card__count { font-size: var(--font-size-sm); opacity: 0.8; letter-spacing: 0.03em; text-transform: uppercase; } @media (max-width: 768px) { .collections-showcase__grid { grid-template-columns: 1fr; } } .properties-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } @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); } } /* --- Featured Collections --- */ .featured-collections { padding: var(--space-3xl) 0; } .featured-collections__grid { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--space-lg); min-height: 420px; } .collection-card { display: flex; align-items: flex-end; border-radius: var(--radius-xl); overflow: hidden; padding: var(--space-xl); position: relative; transition: transform var(--transition-base), box-shadow var(--transition-base); min-height: 180px; box-shadow: var(--shadow-md); &:hover { transform: scale(1.01); box-shadow: var(--shadow-lg); } } .collection-card--featured { grid-row: 1 / 3; } .collection-card__content { position: relative; z-index: 1; } .collection-card__label { display: inline-block; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: oklch(1 0 0 / 0.7); margin-bottom: var(--space-xs); } .collection-card__name { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-white); margin-bottom: var(--space-xs); } .collection-card--featured .collection-card__name { font-size: var(--font-size-2xl); } .collection-card__meta { font-size: var(--font-size-sm); color: oklch(1 0 0 / 0.7); } @media (max-width: 768px) { .featured-collections__grid { grid-template-columns: 1fr; grid-template-rows: auto; min-height: auto; } .collection-card--featured { grid-row: auto; min-height: 240px; } } /* --- 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 --- */ .value-props { background: var(--color-bg-dark); color: var(--color-white); padding: var(--space-3xl) 0; margin-top: var(--space-4xl); } .value-props__header { text-align: center; margin-bottom: var(--space-2xl); } .value-props__headline { font-family: var(--font-serif); font-size: var(--font-size-4xl); font-weight: var(--font-weight-normal); line-height: 1.1; letter-spacing: -0.02em; em { font-style: italic; } } .value-props__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3xl); } .feature-block { text-align: left; padding: var(--space-xl); border-left: 1px solid rgba(255,255,255,0.1); } .feature-block__number { display: block; font-family: var(--font-serif); font-size: var(--font-size-3xl); color: var(--color-accent); margin-bottom: var(--space-lg); opacity: 0.6; } .feature-block__title { font-family: var(--font-sans); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-sm); color: var(--color-white); letter-spacing: -0.01em; } .feature-block__description { font-size: var(--font-size-sm); color: rgba(255,255,255,0.55); line-height: var(--line-height-relaxed); } @media (max-width: 768px) { .value-props__headline { font-size: var(--font-size-2xl); } .value-props__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); } } @media (max-width: 480px) { .value-props__grid { grid-template-columns: 1fr; } } /* ============================================= 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-primary); border-radius: var(--radius-md); background: var(--color-primary); 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; } .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; } } .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-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 { aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-bg-secondary); img { width: 100%; height: 100%; object-fit: cover; } } .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 ============================================= */ .checkout__nav { display: flex; align-items: center; gap: var(--space-lg); padding: var(--space-md) var(--space-lg); max-width: 1280px; margin-inline: auto; border-bottom: 1px solid var(--color-border-light); } .checkout__logo-img { height: 20px; width: auto; } .checkout__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); } } .checkout__layout { display: grid; grid-template-columns: 1fr 400px; gap: var(--space-4xl); padding-top: var(--space-3xl); padding-bottom: var(--space-4xl); align-items: start; } .checkout__title { font-family: var(--font-serif); font-size: var(--font-size-3xl); font-weight: 400; letter-spacing: -0.01em; 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); } .checkout__next-btn { width: 100%; padding: 16px; background: var(--color-accent); color: #211b12; 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-accent) 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-accent); color: #211b12; 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-accent) 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-size: var(--font-size-base); font-weight: var(--font-weight-bold); 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: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border-light); margin-bottom: var(--space-md); } .checkout__trip-summary { display: grid; gap: var(--space-sm); div { display: grid; gap: 1px; } strong { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); } } .checkout__trip-label { font-size: 10px; font-weight: var(--font-weight-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-tertiary); } .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-shell { --tp-cta: var(--color-accent); --tp-on-cta: #211b12; } .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); } .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; } .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; } /* 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-sidebar { position: static; } } @media (max-width: 480px) { /* 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); --lc-font-title: var(--font-serif); --lc-font-body: var(--font-sans); } } /* ===== 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); } } }