/* Resort spin-off design — loaded ONLY by layouts/application.html+spinoff.erb. The main Stay Utah stylesheet (application.css) is not loaded alongside this. Theming: every resort-specific color reads a custom property below. A resort overrides them inline on from config/resorts/.yml (see Resort#css_variables); the defaults here are Pecan Valley's. */ @layer reset, base, components; @layer base { :root { --ink: #111210; /* near-black, warm */ --mute: #73716B; /* stone gray */ --bg: #FFFFFF; --tint: #F6F5F2; /* whisper of warm gray */ --line: #E8E6E1; --accent: #9C8553; /* champagne brass */ --accent-soft: #CDB686; /* brass on dark backgrounds */ --grad: linear-gradient(120deg, #C8B084 0%, #A98F5C 55%, #8C744A 100%); --trend: #2F6B4F; --display: "Hanken Grotesk", system-ui, sans-serif; --body: "Hanken Grotesk", system-ui, sans-serif; /* The logo wordmark uses a serif for the resort name. */ --logo-font: "Playfair Display", Georgia, serif; --max: 1240px; --r: 20px; /* Shared trip-picker tokens (see trip_picker.css) — resort palette. */ --tp-ink: var(--ink); --tp-mute: var(--mute); --tp-line: var(--line); --tp-tint: var(--tint); --tp-font: var(--body); --tp-accent: var(--accent); --tp-cta: var(--grad); --tp-on-cta: #171511; --tp-radius: 24px; --tp-max: var(--max); /* Search (magnifier) glyph, masked to currentColor for the nav/hero prompts. */ --mag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E"); } } @layer reset { * { box-sizing: border-box; margin: 0; padding: 0; } } @layer base { html { scroll-behavior: smooth; } body { font-family: var(--body); color: var(--ink); background: var(--bg); line-height: 1.6; font-size: 15.5px; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: var(--body); } h1, h2, h3 { font-weight: 700; font-family: var(--display); } h2 { font-size: clamp(28px, 3.5vw, 42px); line-height: 1.06; letter-spacing: -.022em; } em { font-style: italic; color: var(--accent); } } @layer components { .wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; } section[id], div[id^="give"] { scroll-margin-top: 60px; } .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 0 0 12px 0; z-index: 100; font-size: 13px; font-weight: 600; } .skip:focus { left: 0; } .catc:focus-visible, .quick button:focus-visible, .opens :is(button, a):focus-visible, .search label:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 12px; } .search label:focus-within { outline-offset: -2px; } .k { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); } .section { padding: 84px 0; } .sec-head { margin-bottom: 34px; } .sec-head p { color: var(--mute); margin-top: 10px; max-width: 52ch; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14.5px; font-weight: 600; border-radius: 999px; padding: 13px 24px; border: 1px solid transparent; cursor: pointer; transition: opacity .15s ease; } .btn:hover { opacity: .88; } .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .btn-dark { background: var(--ink); color: #fff; } .btn-grad { background: var(--grad); color: #171511; box-shadow: 0 10px 22px -12px rgba(140, 116, 74, .5); } .btn-line { border-color: var(--line); background: #fff; } .btn-white { background: #fff; color: var(--ink); } .btn-sm { padding: 8px 16px; font-size: 13px; } /* ================= FLASH ================= */ .flash { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 99; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 500; border-radius: 999px; padding: 11px 22px; box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .5); } /* ================= DEAL BAR ================= */ .deal-bar { background: var(--ink); color: #fff; font-size: 13px; font-weight: 500; } .deal-bar .wrap { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 28px; flex-wrap: wrap; text-align: center; } .deal-bar .code { background: rgba(255, 255, 255, .14); border: 1px dashed rgba(255, 255, 255, .4); border-radius: 7px; padding: 2px 9px; font-weight: 700; letter-spacing: .06em; cursor: pointer; color: #fff; font-size: 13px; } .deal-bar .code:hover { background: rgba(255, 255, 255, .22); } .deal-bar .count { font-variant-numeric: tabular-nums; color: var(--accent-soft); font-weight: 600; } /* ================= TOP CONCIERGE BAR ================= Utility strip above the sticky header: concierge phone line left, quick resort links right; phones keep only the concierge line, centered. */ .top-bar { background: var(--tint); border-bottom: 1px solid var(--line); } .top-bar .tb-in { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 10px; padding-bottom: 10px; } .tb-phone { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink); } .tb-phone .tb-ic { width: 14px; height: 14px; color: var(--accent); flex: none; } .tb-phone b { color: var(--accent); font-weight: 700; } .tb-phone .tb-num { font-weight: 700; font-variant-numeric: tabular-nums; } .tb-phone:hover .tb-num { text-decoration: underline; text-underline-offset: 3px; } .tb-nav { display: flex; align-items: center; gap: 26px; } .tb-nav a { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; } .tb-nav a:hover { color: var(--accent); } .tb-give { display: inline-flex; align-items: center; gap: 7px; } .tb-give .pulse { width: 7px; height: 7px; border-radius: 50%; background: #7ED957; box-shadow: 0 0 0 0 rgba(126, 217, 87, .6); animation: pulse 1.8s infinite; } @media (max-width: 900px) { .tb-nav { display: none; } .top-bar .tb-in { justify-content: center; } } /* ================= HEADER ================= Sticky header that shrinks into a compact "mini" state on scroll (spinoff--header toggles header.mini). The search lives here as an always-visible pill — the hero no longer carries it. */ header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: box-shadow .25s ease; } header.mini { box-shadow: 0 14px 34px -22px rgba(17, 18, 16, .22); } .nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 86px; transition: height .28s cubic-bezier(.4, 0, .2, 1); } header.mini .nav { height: 64px; } .nav-left { display: flex; align-items: center; gap: 18px; min-width: 0; } /* two-line wordmark: serif resort name + "Direct by Stay Utah" subline */ .logo { display: flex; flex-direction: column; line-height: 1; white-space: nowrap; } .logo .logo-name { font-family: var(--logo-font); font-size: 23px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); transition: font-size .28s ease; } .logo .logo-sub { font-family: var(--body); font-size: 8.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); margin-top: 3px; } .logo.has-image { align-items: flex-start; gap: 3px; } .logo .logo-image { width: auto; max-width: min(230px, 28vw); height: 44px; object-fit: contain; object-position: left center; transition: width .28s ease, height .28s ease; } .logo .logo-mobile-image { display: none; object-fit: contain; } .logo.has-image .logo-sub { margin-top: 0; padding-left: 2px; } .logo.center-credit .logo-sub { align-self: center; padding-left: 0; } header.mini .logo .logo-name { font-size: 21px; } header.mini .logo .logo-image { width: auto; max-width: min(205px, 26vw); height: 34px; } /* The header search pill (.nav-mini / .nm-*) is now the shared search bar — styling lives in trip_picker.css (themed by --tp-*). Its sticky-collapse overrides are scoped under header.mini there. */ /* right cluster: List your home · account avatar · hamburger */ .nav-right { display: flex; align-items: center; gap: 10px; position: relative; } .nav-right .btn { padding: 9px 18px; font-size: 13.5px; } .list-btn { flex-shrink: 0; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--ink); background: var(--tint); border: 1px solid var(--line); border-radius: 999px; padding: 10px 20px; cursor: pointer; font-family: var(--body); transition: background .15s ease, border-color .15s ease; } .list-btn:hover { background: #fff; border-color: var(--ink); } .list-btn .lb-short { display: none; } .burger { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--tint); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: background .15s ease; flex-shrink: 0; } .burger:hover { background: var(--line); } .burger:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .burger .bl { display: block; width: 17px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .24s cubic-bezier(.4, 0, .2, 1), opacity .18s ease; } .burger[aria-expanded="true"] .bl:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .burger[aria-expanded="true"] .bl:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] .bl:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } /* hamburger dropdown (toggled via spinoff--menu, hidden-attribute pattern) */ .burger-wrap { position: relative; display: inline-flex; } .menu { position: absolute; top: calc(100% + 12px); right: 0; min-width: 268px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 70px -28px rgba(17, 18, 16, .35); padding: 10px; display: flex; flex-direction: column; z-index: 60; animation: menuIn .22s cubic-bezier(.2, .9, .3, 1.15); } .menu[hidden] { display: none; } @keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .menu a, .menu .menu-row { font-size: 14px; font-weight: 500; padding: 12px 16px; border-radius: 12px; display: flex; align-items: center; gap: 12px; } .menu a:hover, .menu-row:hover { background: var(--tint); } .menu-sec { display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); padding: 6px 16px 8px; } .menu .menu-ic { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--tint); font-size: 13px; color: var(--ink); flex-shrink: 0; } .menu .menu-ic.gold { background: linear-gradient(135deg, #efe2c4, #dcc488); color: #5e4a20; } .menu-div { height: 1px; background: var(--line); margin: 8px 6px; } .menu-row { width: 100%; text-align: left; border: 0; background: none; cursor: pointer; font-family: var(--body); } .menu-row b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.2; } .menu-row small { display: block; font-size: 11.5px; color: var(--mute); margin-top: 1px; } /* signed-in profile header + sign-out inside the menu */ .menu-id { display: grid; gap: 1px; padding: 4px 16px 10px; } .menu-id b { font-size: 14px; font-weight: 700; color: var(--ink); } .menu-id span { font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu-form { margin: 0; } .menu-signout b { color: #B4543F; } /* back link (property / checkout headers) */ .back { font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; } .back:hover { color: var(--accent); } /* responsive header */ @media (max-width: 1040px) { .logo .logo-name { font-size: 20px; letter-spacing: .18em; } .logo .logo-image { width: auto; max-width: min(200px, 28vw); height: 38px; } .nav-mini { margin: 0 12px; padding: 7px 7px 7px 18px; } } @media (max-width: 880px) { .list-btn .lb-full { display: none; } .list-btn .lb-short { display: inline; } } @media (max-width: 760px) { .nav { gap: 10px; height: 64px; } .nav-left { gap: 10px; } .logo:not(.has-mobile-mark) .logo-name { font-size: 16px; letter-spacing: .16em; } .logo:not(.has-mobile-mark) .logo-sub { font-size: 7.5px; letter-spacing: .18em; } .logo:not(.has-mobile-mark) .logo-image { width: min(150px, 38vw); height: 30px; } header.mini .logo:not(.has-mobile-mark) .logo-image { width: min(140px, 36vw); height: 28px; } .logo.has-mobile-mark { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; } .logo.has-mobile-mark .logo-name, .logo.has-mobile-mark .logo-image, .logo.has-mobile-mark .logo-sub { display: none; } .logo.has-mobile-mark .logo-mobile-image { display: block; width: auto; height: 38px; max-width: 38px; } .menu { position: fixed; left: 14px; right: 14px; top: 60px; min-width: 0; } /* The mobile search-pill collapse (combo → "Start your search" prompt) now lives in trip_picker.css, shared by both sites. */ .nav-mini { margin: 0 12px; } } @media (max-width: 640px) { .list-btn { display: none !important; } } /* ================= HERO ================= Full-bleed, edge-to-edge image with centered editorial copy. The search lives in the header pill; the hero is just the kicker + headline. */ .hero { padding: 0; max-width: none; margin: 0; } .hero-card { position: relative; overflow: hidden; color: #fff; background: radial-gradient(120% 90% at 80% 0%, #8E7649 0%, transparent 50%), radial-gradient(110% 90% at 12% 100%, #2B2D33 0%, transparent 60%), linear-gradient(165deg, #4C4538 0%, #26241F 50%, #111210 100%); } .hero-card > picture { position: absolute; inset: 0; } .hero-card > picture > img { width: 100%; height: 100%; object-fit: cover; } .hero-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 8, 6, .10) 25%, rgba(10, 8, 6, .6) 100%); } .hero-in { position: relative; z-index: 1; padding: 64px 28px 56px; animation: fade .9s ease both; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 55vh; justify-content: center; } @keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .hero-kicker { display: block; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #fff; margin-bottom: 16px; text-shadow: 0 2px 22px rgba(0, 0, 0, .7), 0 1px 5px rgba(0, 0, 0, .65); } .hero h1 { font-size: clamp(36px, 5.2vw, 76px); line-height: 1.08; letter-spacing: -.022em; max-width: 22ch; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .4), 0 1px 8px rgba(0, 0, 0, .35); } .hero h1 em { font-style: normal; color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, .45), 0 1px 8px rgba(0, 0, 0, .4); } .hero-cta { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 30px; } .hero-cta .btn { padding: 15px 34px; font-size: 15px; box-shadow: 0 14px 32px -14px rgba(0, 0, 0, .45); } .hero-link { color: #fff; font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; border-bottom: 1px solid rgba(255, 255, 255, .5); padding-bottom: 2px; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); transition: border-color .15s ease; } .hero-link:hover { border-bottom-color: #fff; } .hero-link .ar { transition: transform .2s ease; } .hero-link:hover .ar { transform: translateX(2px); } /* live-dot pulse shared by the giveaway section, stay tags, and concierge */ @keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(126, 217, 87, 0); } 100% { box-shadow: 0 0 0 0 rgba(126, 217, 87, 0); } } /* Post-search results bar: "Showing N homes for · X guests · Change dates" on the left, a Sort dropdown on the right (revealed by the search). */ .results-note { display: none; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--mute); background: var(--tint); border: 1px solid var(--line); border-radius: 12px; padding: 11px 16px; } .results-note b { color: var(--ink); } .rn-info { flex: 1; min-width: 200px; } .rn-change { background: none; border: 0; padding: 0; font-family: var(--body); font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .rn-change:hover { color: var(--accent); } .rn-sort { position: relative; margin-left: auto; } .rn-sort[hidden] { display: none; } .rn-pill { background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink); padding: 8px 16px; cursor: pointer; font-family: var(--body); white-space: nowrap; transition: border-color .15s ease; display: inline-flex; align-items: center; gap: 7px; } .rn-pill:hover { border-color: var(--ink); } .rn-caret { font-size: 10px; color: var(--mute); } .rn-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 56px -26px rgba(17, 18, 16, .4); padding: 6px; display: none; min-width: 210px; } .rn-menu.open { display: block; animation: menuIn .18s ease; } .rn-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; font-family: var(--body); font-size: 13px; font-weight: 500; color: var(--ink); padding: 10px 13px; border-radius: 9px; cursor: pointer; white-space: nowrap; } .rn-menu button:hover, .rn-menu button.on { background: var(--tint); } .rn-menu button.on { font-weight: 700; } @media (max-width: 600px) { .results-note { flex-direction: column; align-items: stretch; gap: 10px; } .rn-info { min-width: 0; } .rn-sort { margin-left: 0; width: 100%; } .rn-pill { width: 100%; justify-content: space-between; } .rn-menu { left: 0; right: 0; width: 100%; min-width: 0; } } @media (max-width: 720px) { /* phone hero: shorter, copy centered, city-only kicker */ .hero-in { padding: 48px 18px 46px; min-height: 40vh; justify-content: center; } .hero-kicker .hk-head { display: none; } .hero-cta { flex-direction: column; gap: 16px; margin-top: 24px; } .hero-cta .btn { padding: 14px 32px; } } /* ================= GIVEAWAY BAR ================= One-line light band under the hero: live dot, prize, countdown, CTA. The whole bar links to the full #giveaways section below. */ .give-bar { display: flex; align-items: center; justify-content: center; gap: 12px 22px; flex-wrap: wrap; padding: 15px 28px; background: var(--tint); border-bottom: 1px solid var(--line); color: var(--ink); } .gb-k { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .gb-k .pulse { width: 7px; height: 7px; border-radius: 50%; background: #7ED957; box-shadow: 0 0 0 0 rgba(126, 217, 87, .6); animation: pulse 1.8s infinite; } .gb-title { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; } .gb-count { font-size: 13.5px; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; } .gb-cta { font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; transition: gap .2s ease; white-space: nowrap; } .give-bar:hover .gb-cta { gap: 9px; } @media (max-width: 640px) { /* phone: kicker + prize stack on the left, CTA on the right */ .give-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k cta" "title cta"; row-gap: 3px; column-gap: 16px; align-items: center; justify-items: start; padding: 13px 18px; } .gb-k { grid-area: k; } .gb-title { grid-area: title; font-size: 15px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gb-cta { grid-area: cta; } .gb-count, .gb-where, .gb-cta .gb-free { display: none; } } /* ================= GIFT BASKET BAR ================= One-line inclusions strip; every item opens the gift-basket pop-up (spinoff--modal), which holds the photo cards + the offer details. */ .inc-bar { background: #fff; border-bottom: 1px solid var(--line); } .inc-bar .wrap { display: flex; align-items: center; justify-content: center; gap: 12px 32px; flex-wrap: wrap; padding-top: 17px; padding-bottom: 17px; } .ib-label { font-size: 14.5px; font-weight: 700; } .ib-item { display: inline-flex; align-items: baseline; gap: 7px; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--body); font-size: 14.5px; } .ib-item .v { color: var(--accent); font-weight: 700; } .ib-item .n { color: var(--mute); transition: color .15s ease; } .ib-item:hover .n { color: var(--ink); } .ib-link { background: none; border: 0; border-bottom: 1.5px solid currentColor; padding: 0 0 1px; cursor: pointer; font-family: var(--body); font-size: 14px; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; transition: gap .2s ease; white-space: nowrap; } .ib-link:hover { gap: 9px; } /* phone-only dark line docked inside the sticky header (yield :header_bar); the whole strip is one tap target for the gift-basket pop-up */ .ib-mobile { display: none; } @media (max-width: 640px) { .inc-bar { display: none; } /* the dark docked strip should sit flush on the hero — no light header rule under it */ header:has(.ib-mobile) { border-bottom: 0; } .ib-mobile { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #17150F; border: 0; padding: 15px 18px; cursor: pointer; font-family: var(--body); font-size: 14.5px; white-space: nowrap; } .ib-mobile .v { color: var(--accent-soft); font-weight: 700; } .ib-mobile .n { color: rgba(255, 255, 255, .85); } .ib-mobile .see { color: #fff; font-weight: 700; margin-left: 4px; padding-bottom: 1px; border-bottom: 1.5px solid currentColor; display: inline-flex; align-items: center; gap: 6px; } } /* ================= GIFT CARD INCLUSIONS (photo cards) ================= Short photo tiles, one row inside the gift-basket pop-up; condense by width, horizontal-scroll only when too narrow. */ .inc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; padding: 14px 0 20px; } .inc-card { position: relative; border: 0; padding: 0; border-radius: 14px; overflow: hidden; height: 168px; min-width: 0; scroll-snap-align: start; font-family: var(--body); text-align: left; display: block; background: linear-gradient(135deg, #3a3328 0%, #1a1916 70%); box-shadow: 0 14px 32px -24px rgba(17, 18, 16, .45); transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), box-shadow .3s ease; } .inc-card:hover { transform: translateY(-4px); box-shadow: 0 24px 46px -26px rgba(17, 18, 16, .5); } .inc-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; } .inc-card:hover img { transform: scale(1.07); } .inc-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 7, 5, .92) 6%, rgba(8, 7, 5, .32) 52%, transparent 82%); } .inc-kind { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .5); backdrop-filter: blur(6px); border-radius: 999px; padding: 4px 11px; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inc-body { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 13px 14px; color: #fff; } .inc-val { font-family: var(--display); font-weight: 800; font-size: clamp(20px, 2.2vw, 26px); line-height: .95; letter-spacing: -.025em; } .inc-brand { font-size: clamp(11px, 1.1vw, 13px); font-weight: 700; margin-top: 5px; line-height: 1.18; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inc-tag { font-size: 10.5px; color: rgba(255, 255, 255, .8); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inc-free { margin-top: 8px; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-soft); display: flex; align-items: center; gap: 5px; border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 8px; } .inc-free::before { content: "✓"; } .inc-card:nth-child(2) { background: linear-gradient(135deg, #2c4a3e 0%, #14201b 70%); } .inc-card:nth-child(3) { background: linear-gradient(135deg, #2f5560 0%, #15252a 70%); } .inc-card:nth-child(4) { background: linear-gradient(135deg, #4a3a55 0%, #1d1622 70%); } /* keep 4 across until a card would get too narrow, then horizontal-scroll */ @media (max-width: 920px) { .inc-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; margin-left: -28px; margin-right: -28px; padding: 14px 28px 20px; scroll-padding-left: 28px; } .inc-grid::-webkit-scrollbar { display: none; } .inc-card { flex: 0 0 230px; } } @media (max-width: 560px) { .inc-grid { margin-left: -18px; margin-right: -18px; padding: 14px 18px 20px; scroll-padding-left: 18px; } .inc-card { flex: 0 0 72%; height: 150px; } } /* ================= FLOATING CONCIERGE ================= */ .concierge { position: fixed; right: 26px; bottom: 26px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .4s ease, transform .4s cubic-bezier(.2, .9, .3, 1.2); } .concierge.show { opacity: 1; transform: none; pointer-events: auto; } .cc-fab { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border: 0; cursor: pointer; font-family: var(--body); background: var(--ink); color: #fff; border-radius: 50%; box-shadow: 0 18px 40px -14px rgba(17, 18, 16, .6); transition: transform .25s cubic-bezier(.2, .9, .3, 1.2), box-shadow .25s ease; } .cc-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 26px 56px -16px rgba(17, 18, 16, .7); } .cc-fab-svg { width: 24px; height: 24px; } .cc-fab .cc-live { position: absolute; top: 9px; right: 9px; width: 11px; height: 11px; border-radius: 50%; background: #3FC75A; border: 2px solid var(--ink); animation: ccdot 1.6s ease-in-out infinite; } @keyframes ccdot { 0%, 100% { transform: scale(.82); } 50% { transform: scale(1.12); } } .cc-live-tag { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3FC75A; animation: ccdot 1.6s ease-in-out infinite; } /* ============ LIST YOUR HOME / CONCIERGE MODALS ============ Opened by spinoff--modal (shared .dp-backdrop), like the account modals. */ .lst { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -46%); z-index: 95; width: min(440px, calc(100vw - 36px)); background: #fff; border-radius: 24px; overflow: hidden; display: none; box-shadow: 0 50px 110px -30px rgba(15, 14, 11, .6); transition: transform .35s cubic-bezier(.2, .9, .3, 1.2); } .lst.open { display: block; transform: translate(-50%, -50%); animation: amIn .3s cubic-bezier(.2, .9, .3, 1.12); } .lst-x { position: absolute; top: 14px; right: 14px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .85); font-size: 22px; line-height: 1; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background .15s ease; } .lst-x:hover { background: #fff; } .lst-body { padding: 30px 30px 28px; } .lst-k { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); } .lst-k .cc-live-tag { margin-right: 7px; vertical-align: middle; } .lst-body h3 { font-family: var(--display); font-weight: 700; font-size: 25px; letter-spacing: -.02em; line-height: 1.12; margin-top: 10px; } .lst-body h3 em { font-style: italic; color: var(--accent); } .lst-body p { font-size: 14px; color: var(--mute); line-height: 1.55; margin-top: 12px; } .lst-points { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; } .lst-points li { position: relative; padding-left: 24px; font-size: 13.5px; font-weight: 500; color: var(--ink); } .lst-points li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; } .lst-field { display: block; margin-top: 18px; } .lst-field-k { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-bottom: 7px; } .lst-field input { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; font-size: 16px; font-family: var(--body); color: var(--ink); outline: 0; transition: border-color .15s ease; } .lst-field input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(156, 133, 62, .12); } .lst-cta { margin-top: 22px; width: 100%; justify-content: center; } .lst-cta.cc-callbtn { font-variant-numeric: tabular-nums; font-size: 17px; gap: 9px; } .lst-cta.cc-callbtn .cc-phn::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 8px; vertical-align: -2px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .lst-note { display: block; text-align: center; font-size: 11.5px; color: var(--mute); margin-top: 10px; } @media (max-width: 760px) { .concierge { right: 16px; bottom: 16px; left: auto; } } @media (max-width: 620px) { .lst-body { padding: 24px; } } /* ================= CATEGORY SELECTOR ================= A row of round chips — just the label, with the active one filled. */ .cats { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 10px; } .catc { border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 13px 26px; color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; } .catc[hidden] { display: none; } /* empty category after a date search */ .catc:hover { border-color: var(--ink); } .catc.on { background: var(--ink); border-color: var(--ink); color: #fff; } .catc:focus-visible { border-radius: 999px; } @media (max-width: 640px) { /* Enough categories to wrap into a wall of rows scroll sideways instead. */ .cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scroll-padding-left: 4px; } .catc { flex: 0 0 auto; scroll-snap-align: start; padding: 12px 22px; font-size: 14px; } } /* ================= STAYS ================= */ .stays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; } .stay { position: relative; background: #fff; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); transition: transform .25s ease, box-shadow .25s ease; } /* Whole-card click target: an absolute overlay anchor covering the card. The interactive bits (open-date chips, giveaway tag, "View listing") sit above it at z-index 2, so they keep their own links; everywhere else opens the property page. */ .stay-link { position: absolute; inset: 0; z-index: 1; border-radius: var(--r); } .stay .opens a, .stay .stay-givetag, .stay-foot a { position: relative; z-index: 2; } .stay.hide, .stay.date-hide { display: none; } /* Card whose calendar is still being fetched for the searched dates. */ .stay.checking { pointer-events: none; animation: stay-checking 1.1s ease-in-out infinite alternate; } @keyframes stay-checking { from { opacity: .7; } to { opacity: .3; } } .stay:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -28px rgba(15, 16, 20, .22); } .stay-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(145deg, #EDEFF3 0%, #C7CCD6 100%); } .stay-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .stay:hover .stay-img img { transform: scale(1.04); } .stay-chips { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; flex-wrap: wrap; } .chip { background: rgba(255, 255, 255, .94); font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 999px; } /* status badge (real data: only "new" is derivable today) */ .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; margin-bottom: 7px; } .badge.pillb { border-radius: 999px; padding: 4px 11px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; } .badge.new { background: #FBF3E6; color: #8A5A12; } .stay-body { position: relative; padding: 18px 20px; } .stay-body h3 { font-size: 19px; line-height: 1.15; font-weight: 700; letter-spacing: -.015em; } .stay-meta { color: var(--mute); font-size: 13px; margin: 4px 0 10px; } /* average rating on the card (from the home design) — star + score + count */ .rating { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; margin-bottom: 10px; } .rating .star { color: var(--accent); } .rating span { color: var(--mute); font-weight: 400; font-size: 12.5px; } .opens { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; } .opens .ok { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); width: 100%; } .opens :is(button, a) { display: inline-block; font-size: 12px; font-weight: 600; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: all .15s ease; color: var(--ink); } .opens :is(button, a):hover { border-color: var(--ink); } .opens--lg { gap: 8px; margin-top: 0; } .opens--lg :is(button, a) { font-size: 13px; padding: 9px 16px; } /* Live trip total shown on each card after a date search (replaces .opens). */ .stay-price { margin-top: 12px; } .stay-price[hidden] { display: none; } .stay-price .tp { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } .stay-price .now { font-size: 19px; font-weight: 700; color: var(--ink); font-family: var(--display); letter-spacing: -.01em; } .stay-price .was { font-size: 14px; color: var(--mute); text-decoration: line-through; } .stay-price .save { font-size: 11px; font-weight: 700; color: var(--trend); background: #EAF5EF; border-radius: 999px; padding: 3px 9px; } .stay-price .lbl { font-size: 11.5px; color: var(--mute); margin-top: 2px; } .stay-foot { display: flex; align-items: center; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px; font-size: 14px; } .stay-foot a { font-weight: 600; } .stays-empty { display: none; text-align: center; color: var(--mute); padding: 50px 0; } @media (max-width: 920px) { .stays { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .stays { grid-template-columns: 1fr; } } /* highlighted giveaway home in the grid */ @keyframes cardPing { 0%, 100% { box-shadow: 0 0 0 1.5px var(--accent-soft); } 40% { box-shadow: 0 0 0 5px rgba(205, 182, 134, .55); } } .stay.ping { animation: cardPing 1s ease 2; } .stay.is-giveaway { border-color: var(--accent-soft); box-shadow: 0 0 0 1.5px var(--accent-soft); } .stay-givetag { position: absolute; top: 12px; left: 12px; background: #0F1014; color: var(--accent-soft); font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 6px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; } .stay-givetag .pulse { width: 6px; height: 6px; border-radius: 50%; background: #7ED957; box-shadow: 0 0 0 0 rgba(126, 217, 87, .6); animation: pulse 1.8s infinite; display: inline-block; } /* ================= RESORT AMENITIES ================= */ .amen-section { padding: 72px 0; background: var(--tint); } .amen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .am { position: relative; border-radius: var(--r); overflow: hidden; min-height: 300px; display: flex; align-items: flex-end; color: #fff; border: 0; padding: 0; text-align: left; cursor: pointer; font-family: var(--body); width: 100%; background: linear-gradient(160deg, #7C93A3 0%, #46586B 55%, #1F262E 100%); } .am:nth-child(2) { background: linear-gradient(160deg, #B59A6C 0%, #7D6440 55%, #332A1C 100%); } .am:nth-child(3) { background: linear-gradient(160deg, #8FA68C 0%, #56684F 55%, #232B20 100%); } .am:nth-child(4) { background: linear-gradient(160deg, #9D9890 0%, #5E5A52 55%, #26241F 100%); } .am img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .am:hover img { transform: scale(1.04); } .am::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8, 7, 5, .7) 100%); } .am-body { position: relative; z-index: 1; padding: 20px; width: 100%; } .am h3 { font-size: 21px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; } .am p { font-size: 12.5px; color: rgba(255, 255, 255, .85); margin-top: 5px; } .am .lm { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin-top: 10px; border-bottom: 1px solid rgba(255, 255, 255, .5); padding-bottom: 1px; } @media (max-width: 920px) { .amen { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .amen { grid-template-columns: 1fr; } .am { min-height: 220px; } } /* ================= GIVEAWAYS ================= */ .give-section { padding-top: 72px; } .give { position: relative; border-radius: 26px; overflow: hidden; color: #fff; isolation: isolate; background: #15140f; } /* The spotlight home's own image, doubled behind the card: scaled up, blurred, and brightened into a soft ambient wash. background-image is set inline from the live property (see home.html+spinoff.erb) — never hard-coded. */ .give-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transform: scale(1.18); filter: blur(34px) saturate(1.15) brightness(2); } .give-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 120% at 85% 5%, rgba(205, 182, 134, .28) 0%, transparent 55%), linear-gradient(135deg, rgba(15, 16, 14, .72) 0%, rgba(15, 16, 14, .84) 60%, rgba(10, 10, 9, .92) 100%); } .give::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, transparent 22%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 120px rgba(0, 0, 0, .35); } .give-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 44px; padding: 54px; } .give-col { display: flex; min-width: 0; flex-direction: column; } /* The copy column runs taller than the aside, and the slack used to sit under the timer as dead space. Both columns end level instead, with the spotlight photo absorbing it. */ .give-col--aside .give-home { display: flex; flex: 1 1 auto; flex-direction: column; } .give-col--aside .gh-img { flex: 1 1 auto; aspect-ratio: auto; min-height: 230px; } .give-col--aside .gh-body { flex: 0 0 auto; } .give-head { display: flex; align-items: center; gap: 12px; } .give .k { color: var(--accent-soft); } .give .pulse { width: 8px; height: 8px; border-radius: 50%; background: #7ED957; box-shadow: 0 0 0 0 rgba(126, 217, 87, .6); animation: pulse 1.8s infinite; display: inline-block; margin-right: 8px; } .give-left { display: none; } .give h2 { margin-top: 10px; max-width: 18ch; color: #fff; } .give h2 em { color: var(--accent-soft); } .give-text { color: rgba(255, 255, 255, .8); margin-top: 13px; max-width: 50ch; font-size: 14.5px; } .give-form { display: flex; gap: 10px; margin-top: 16px; } .give-form input { flex: 1; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .07); color: #fff; padding: 12px 20px; font-size: 14px; outline: 0; font-family: var(--body); } .give-form input::placeholder { color: rgba(255, 255, 255, .5); } .give-form input:focus-visible { outline: 2px solid var(--accent-soft); } .give-note { font-size: 11.5px; color: rgba(255, 255, 255, .5); margin-top: 10px; } .give-success { display: none; margin-top: 24px; font-size: 14.5px; font-weight: 600; color: #9FE08A; } .give-success.show { display: block; } .form-error { font-size: 12px; font-weight: 600; color: #E2A9A1; margin-top: 8px; } .up .form-error { color: #B4543F; } /* One prize per line at every width — two columns left the longer lines wrapping against their neighbour, which read as a ragged mess. */ .give-prize { min-width: 0; margin-top: 22px; } .give-prize__label { display: block; color: var(--accent-soft); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .give-prize__list { display: grid; gap: 9px; margin-top: 13px; list-style: none; font-size: 13.5px; } .give-prize__list li { display: flex; gap: 9px; color: rgba(255, 255, 255, .86); } .give-prize__list li span { color: var(--accent-soft); } /* The countdown is the spotlight card's footer, so it takes the same hairline the pass uses between its halves. Its cells drop their own boxes — a grid of boxes inside a box, under a row of chips, is too much chrome. */ .give-timer { border-top: 1px solid rgba(255, 255, 255, .12); padding: 15px 17px 17px; } .give-timer__label { display: block; color: rgba(255, 255, 255, .5); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .give-timer .timer { gap: 24px; margin-top: 12px; } .give-timer .timer div { min-width: 0; border: 0; border-radius: 0; background: none; padding: 0; text-align: left; } .timer { display: flex; gap: 10px; margin-top: 6px; } .timer div { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; padding: 14px 0; text-align: center; flex: 1; min-width: 64px; } .timer b { display: block; font-size: 27px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; } .timer span { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .55); } .timer.compact { margin-top: 10px; } .timer.compact div { padding: 10px 0; min-width: 54px; border-radius: 12px; } .timer.compact b { font-size: 21px; } /* giveaway home spotlight */ .give-home { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); border-radius: 20px; } .give-home .gh-img { position: relative; margin: 9px; border-radius: 13px; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(145deg, #8A6A45 0%, #4C3A24 100%); } .give-home .gh-img img { width: 100%; height: 100%; object-fit: cover; } .give-home .gh-tag { position: absolute; top: 11px; left: 11px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(16, 16, 13, .58); backdrop-filter: blur(8px); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; } .give-home .gh-body { padding: 7px 17px 17px; } .give-home h3 { font-size: 19px; line-height: 1.15; color: #fff; font-weight: 700; } .give-home .gh-meta { font-size: 12.5px; color: rgba(255, 255, 255, .7); margin-top: 3px; } .give-home .gh-dates { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .give-home .gh-dates span { font-size: 11.5px; font-weight: 600; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .07); border-radius: 999px; padding: 5px 12px; font-variant-numeric: tabular-nums; } .give-home .gh-dates span b { color: var(--accent-soft); font-weight: 700; } .give-home .gh-links { display: flex; align-items: center; gap: 15px; margin-top: 14px; } .gh-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent-soft); border-bottom: 1px solid rgba(205, 182, 134, .45); padding-bottom: 2px; cursor: pointer; } .gh-link:hover { border-bottom-color: var(--accent-soft); } .gh-link--details { color: rgba(255, 255, 255, .72); border-color: rgba(255, 255, 255, .28); } /* monthly notify rail */ .gb-rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 44px; } .gb-rail-head span { font-size: 12px; color: var(--mute); } .gb-rail { display: flex; gap: 12px; overflow-x: auto; padding: 16px 0 6px; scroll-snap-type: x mandatory; } .gb-rail::-webkit-scrollbar { height: 6px; } .gb-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; } .up { flex: 0 0 200px; scroll-snap-align: start; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 5px; } .up .when { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); } .up h3 { font-size: 16px; line-height: 1.15; font-weight: 700; } .up p { font-size: 12px; color: var(--mute); flex: 1; line-height: 1.45; } .up .btn { margin-top: 9px; padding: 6px 12px; font-size: 11.5px; align-self: flex-start; } .up .done { font-size: 11.5px; font-weight: 600; color: #3E8E2F; margin-top: 9px; } .notify-form { display: flex; gap: 6px; margin-top: 9px; } .notify-form input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-family: var(--body); outline: 0; } .notify-form input:focus-visible { outline: 2px solid var(--ink); } .notify-form button { border: 0; background: var(--ink); color: #fff; border-radius: 999px; width: 28px; height: 28px; cursor: pointer; font-size: 13px; flex-shrink: 0; } /* Giveaway entry, then the referral pass it turns into. One card footprint for both states so entering doesn't shove the section around. */ .give-entry-panel { margin-top: 26px; min-width: 0; } .give-card { border: 1px solid rgba(255, 255, 255, .16); border-radius: 20px; background: rgba(255, 255, 255, .06); backdrop-filter: blur(14px); box-shadow: 0 26px 60px -44px rgba(0, 0, 0, .9); } .give-entry-card { padding: 21px 23px 18px; } .give-entry-card__title { display: block; color: #fff; font-size: 15px; font-weight: 700; } .give-entry-card__text { max-width: 48ch; margin-top: 6px; color: rgba(255, 255, 255, .68); font-size: 12.5px; line-height: 1.5; } .give-entry-card__text strong { color: #fff; font-weight: 600; } .give-entry-panel .give-note a { color: rgba(255, 255, 255, .82); text-decoration: underline; text-underline-offset: 2px; } .give-entry-closed { display: flex; flex-direction: column; gap: 3px; padding: 17px 19px; } .give-entry-closed strong { color: #fff; font-size: 14px; } .give-entry-closed span { color: rgba(255, 255, 255, .62); font-size: 12.5px; } .give-pass { overflow: hidden; } .give-pass__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 18px 21px; } .give-pass__check { display: grid; place-items: center; width: 27px; height: 27px; flex-shrink: 0; border-radius: 50%; background: #9FE08A; color: #173010; font-size: 13px; font-weight: 800; } .give-pass__headline { display: flex; min-width: 0; flex-direction: column; gap: 2px; line-height: 1.3; } .give-pass__headline strong { color: #fff; font-size: 15px; } .give-pass__headline span { color: rgba(255, 255, 255, .6); font-size: 12px; } .give-pass__count { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .give-pass__count b { color: #fff; font-family: var(--display); font-size: 31px; font-weight: 700; line-height: .85; font-variant-numeric: tabular-nums; } .give-pass__count span { color: rgba(255, 255, 255, .5); font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .give-pass__share { min-width: 0; padding: 15px 21px 19px; border-top: 1px solid rgba(255, 255, 255, .12); } /* No referrals yet: the ask gets its own dashed panel instead of reading as a footnote. */ .give-pass__share--promo { margin: 0 13px 13px; border: 1px dashed rgba(255, 255, 255, .22); border-radius: 15px; padding: 16px 17px 17px; } .give-pass__share-title { display: block; margin-bottom: 5px; color: #fff; font-size: 13.5px; font-weight: 700; } .give-pass__share p { color: rgba(255, 255, 255, .66); font-size: 12px; line-height: 1.45; } .give-copy { display: flex; align-items: center; gap: 8px; margin-top: 12px; } .give-copy input { min-width: 0; flex: 1; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; outline: 0; background: rgba(0, 0, 0, .2); color: rgba(255, 255, 255, .72); padding: 9px 15px; font-family: var(--body); font-size: 11.5px; text-overflow: ellipsis; } .give-copy input:focus-visible { outline: 2px solid var(--accent-soft); } .give-copy button { flex-shrink: 0; border: 0; border-radius: 999px; background: #fff; color: var(--ink); padding: 9px 16px; font-size: 11.5px; font-weight: 700; cursor: pointer; } .give-share-actions { display: flex; align-items: center; gap: 8px; margin-top: 11px; } .give-share-actions :is(button, a) { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; } .give-share-primary { border: 0; background: var(--grad); color: #171511; padding: 8px 18px; } .give-share-secondary { border: 1px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .78); padding: 8px 16px; } .give-share-actions :is(button, a):focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ---- the giveaway on a phone ---- The two columns dissolve so the pieces can interleave: time-left moves into a pill beside the kicker, the spotlight home rides up under the headline, and the prize list folds. Once you're entered (:has(.give-pass)) the pass leads and everything explaining the giveaway folds behind it. */ @media (max-width: 880px) { /* Full-bleed on a phone. Inside the .wrap gutters the dark card was paying 28px a side for white space it didn't need, so it breaks out of them and runs edge to edge — its own padding becomes the only gutter. A dark band also can't hide the sections' vertical padding the way an inset card did, so the white either side of it shrinks to a deliberate seam. */ /* Two classes, so the narrower `.section` override further down can't win. */ .section.give-section { padding: 32px 0; } .section.amen-section { padding-bottom: 32px; } .give { margin-inline: -28px; border-radius: 0; } /* align-items must go back to stretch — the desktop grid's `start` would leave every row sized to its own content and let long labels overflow. */ .give-in { display: flex; flex-direction: column; align-items: stretch; gap: 15px; padding: 26px 20px 24px; } .give-col { display: contents; } .give-head { order: 1; justify-content: space-between; gap: 10px; } .give .k { font-size: 10.5px; } .give-left { display: inline-flex; flex-shrink: 0; align-items: center; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .07); padding: 5px 11px; color: #fff; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; } .give h2 { order: 2; max-width: none; margin-top: 0; font-size: 29px; } .give-home { order: 3; } /* The pitch is written for a desktop column. On a phone its first two lines carry it — the prize fold directly below itemises the same list, so the clamp costs nothing. */ .give-text { order: 4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 0; font-size: 13.5px; } .give-prize { order: 5; margin-top: 0; } .give-entry-panel { order: 6; margin-top: 0; } .give-timer { display: none; } .give-prize__list { gap: 8px; margin-top: 11px; } /* The spotlight home, compact: title, then beds and the listing link on one row. */ .give-home .gh-img { margin: 8px; } .give-home .gh-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding: 4px 14px 13px; } .give-home h3 { grid-column: 1 / -1; font-size: 17px; } .give-home .gh-dates { display: none; } .give-home .gh-links { margin-top: 0; justify-self: end; } .give-home .gh-link--details { display: none; } /* The home section drops the card chrome around the form — the section is already a card, and the phone needs the room. The dedicated giveaway page keeps its card, so these stay scoped. */ .give .give-entry-card { border: 0; border-radius: 0; background: none; backdrop-filter: none; box-shadow: none; padding: 0; } .give .give-entry-card__title, .give .give-entry-card__text { display: none; } .give .give-form input { text-align: center; } .give-form { flex-direction: column; gap: 9px; margin-top: 0; } .give-form input { padding: 14px 20px; } .give-form .btn { width: 100%; padding: 14px; font-size: 14px; } .give-note { margin-top: 9px; } .give-pass__head { grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; padding: 17px 17px 15px; } .give-pass__headline strong { font-size: 17px; } .give-pass__count { grid-column: 2; flex-direction: row; align-items: baseline; gap: 8px; } .give-pass__count b { font-size: 34px; } .give-pass__share { padding: 14px 17px 17px; } .give-pass__share--promo { margin: 0 11px 11px; } .give-copy input { padding: 11px 16px; font-size: 12px; } .give-copy button { padding: 11px 17px; } .give-share-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .give-share-primary { grid-column: 1 / -1; min-height: 46px; } .give-share-secondary { min-height: 44px; } /* Entered: the home you're playing for leads, the pass sits right under it, and the pitch that got you here steps aside. The two seams meet so the photo and your entry read as one card — the negative margin cancels the column gap, and the pass's top border becomes the rule between them. */ .give:has(.give-pass) .give-home { order: 2; margin-bottom: -15px; border-bottom: 0; border-end-start-radius: 0; border-end-end-radius: 0; } .give:has(.give-pass) .give-home .gh-body { padding-bottom: 11px; } .give:has(.give-pass) .give-pass { border-top-color: rgba(255, 255, 255, .12); border-start-start-radius: 0; border-start-end-radius: 0; } .give:has(.give-pass) .give-entry-panel { order: 3; } .give:has(.give-pass) .give-prize { order: 4; } .give:has(.give-pass) .give-text { display: none; } /* The headline stays for screen readers and the document outline. */ .give:has(.give-pass) .give-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* Dedicated giveaway page */ .giveaway-page { background: #fff; } .giveaway-page__hero { position: relative; isolation: isolate; overflow: hidden; background: #171612; color: #fff; } .giveaway-page__wash { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transform: scale(1.08); filter: blur(26px) saturate(.9) brightness(.5); opacity: .6; } .giveaway-page__hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgba(18, 17, 13, .94) 5%, rgba(18, 17, 13, .8) 56%, rgba(18, 17, 13, .9)); } .giveaway-page__hero-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(460px, 1.12fr); gap: clamp(48px, 7vw, 96px); align-items: center; min-height: 690px; padding-top: 72px; padding-bottom: 82px; } .giveaway-page__copy h1 { max-width: 12ch; margin-top: 12px; color: #fff; font-size: clamp(43px, 6vw, 78px); line-height: .98; letter-spacing: -.035em; } .giveaway-page__copy h1 em { color: var(--accent-soft); } .giveaway-page__copy > p { max-width: 53ch; margin-top: 18px; color: rgba(255, 255, 255, .73); font-size: 15px; line-height: 1.65; } .giveaway-page .pulse { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #7ED957; box-shadow: 0 0 0 0 rgba(126, 217, 87, .6); animation: pulse 1.8s infinite; } .giveaway-page__prizes { display: grid; gap: 8px; margin-top: 22px; list-style: none; } .giveaway-page__prizes li { display: flex; gap: 10px; color: rgba(255, 255, 255, .84); font-size: 13px; } .giveaway-page__prizes span { color: var(--accent-soft); } .giveaway-page__community { display: flex; align-items: baseline; gap: 9px; margin-top: 29px; } .giveaway-page__community strong { color: #fff; font-size: 25px; line-height: 1; font-variant-numeric: tabular-nums; } .giveaway-page__community span { color: rgba(255, 255, 255, .56); font-size: 12px; } .giveaway-page__entry { min-width: 0; } .giveaway-page__entry .give-entry-panel { max-width: none; } .giveaway-page__property { display: grid; grid-template-columns: 78px 1fr; gap: 14px; align-items: center; margin: 0 16px -1px; border: 1px solid rgba(255, 255, 255, .18); border-bottom: 0; border-radius: 16px 16px 0 0; background: rgba(255, 255, 255, .07); padding: 10px; } .giveaway-page__property img { width: 78px; height: 58px; border-radius: 10px; object-fit: cover; } .giveaway-page__property div { display: flex; min-width: 0; flex-direction: column; line-height: 1.25; } .giveaway-page__property small { color: var(--accent-soft); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .giveaway-page__property strong { overflow: hidden; color: #fff; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .giveaway-page__property span { color: rgba(255, 255, 255, .58); font-size: 11px; } .giveaway-page__details { padding: 90px 0; } .giveaway-page__details-grid { display: grid; grid-template-columns: .65fr 1.35fr; gap: 70px; align-items: start; } .giveaway-page__details h2 { max-width: 9ch; margin-top: 8px; } .giveaway-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; list-style: none; } .giveaway-steps li { display: flex; gap: 13px; padding: 4px 23px; border-left: 1px solid var(--line); } .giveaway-steps li > span { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 11px; font-weight: 700; } .giveaway-steps strong { display: block; font-size: 14px; } .giveaway-steps p { margin-top: 4px; color: var(--mute); font-size: 12.5px; line-height: 1.55; } .giveaway-page__rules { scroll-margin-top: 72px; padding: 76px 0 90px; background: var(--tint); } .giveaway-rules-card { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; } .giveaway-rules-card div { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px; border-left: 1px solid var(--line); } .giveaway-rules-card div:first-child { border-left: 0; } .giveaway-rules-card small { color: var(--mute); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .giveaway-rules-card strong { font-size: 14px; } .giveaway-page__legal { max-width: 82ch; margin-top: 18px; color: var(--mute); font-size: 11.5px; line-height: 1.7; } .giveaway-page__legal a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 920px) { .giveaway-page__hero-grid { grid-template-columns: 1fr; min-height: 0; padding-top: 56px; padding-bottom: 64px; } .giveaway-page__copy h1 { max-width: 15ch; } .giveaway-page__details-grid { grid-template-columns: 1fr; gap: 36px; } .giveaway-page__details h2 { max-width: none; } } @media (max-width: 640px) { .giveaway-page__hero-grid { gap: 38px; padding-top: 42px; } .giveaway-page__copy h1 { font-size: 43px; } .giveaway-page__entry .give-pass { margin: 0; } .giveaway-page__property { margin-right: 10px; margin-left: 10px; } .giveaway-page__details { padding: 64px 0; } .giveaway-steps { grid-template-columns: 1fr; gap: 24px; } .giveaway-steps li { padding: 0; border-left: 0; } .giveaway-rules-card { grid-template-columns: 1fr; } .giveaway-rules-card div { border-top: 1px solid var(--line); border-left: 0; } .giveaway-rules-card div:first-child { border-top: 0; } } /* ================= CROSS-SITE BANNER ================= */ .xsite { padding: 0 0 84px; } .xsite-card { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--r); padding: 28px 32px; background: #fff; } .xsite-card .xk { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--mute); } .xsite-card h3 { font-size: clamp(19px, 2.2vw, 24px); font-weight: 800; letter-spacing: -.02em; margin-top: 5px; } .xsite-card p { font-size: 13.5px; color: var(--mute); margin-top: 5px; max-width: 62ch; } .xsite-card .btn { flex-shrink: 0; } @media (max-width: 720px) { .xsite-card { padding: 22px; } } /* ================= FOOTER ================= White, divided from the page by a hairline (app/views/spinoff/_footer). Desktop: brand + concierge left, link columns right, credit row below. ≤720px: tappable call card on top, columns side by side, marks stacked. */ .sf { background: var(--bg); border-top: 1px solid var(--line); } .sf-card { max-width: var(--max); margin: 0 auto; padding: 56px 28px 26px; } .sf-k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .sf-ic { width: 15px; height: 15px; color: var(--accent); flex: none; } .sf-call { display: none; } .sf-top { display: flex; justify-content: space-between; gap: 48px; } .sf-logo { height: 46px; width: auto; display: block; } .sf-name { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.01em; } .sf-blurb { margin-top: 16px; font-size: 14px; line-height: 1.55; color: var(--mute); max-width: 30ch; } .sf-phone { margin-top: 24px; } .sf-phone a { display: inline-flex; align-items: center; gap: 9px; margin-top: 6px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); } .sf-cols { display: flex; gap: 72px; } .sf-col ul { list-style: none; margin: 15px 0 0; padding: 0; display: grid; gap: 12px; } .sf-col a { font-size: 14px; color: color-mix(in srgb, var(--ink) 72%, var(--mute)); transition: color .15s ease; } .sf-col a:hover { color: var(--ink); } .sf-div { border: 0; border-top: 1px solid var(--line); margin: 44px 0 0; } .sf-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding-top: 22px; } .sf-credit { display: flex; align-items: center; gap: 16px; } .sf-credit-resort { display: none; } .sf-su { height: 20px; width: auto; display: block; } .sf-tag { font-size: 13px; color: var(--mute); padding-left: 16px; border-left: 1px solid var(--line); } .sf-legal { font-size: 12.5px; color: var(--mute); } .sf-legal a { color: inherit; transition: color .15s ease; } .sf-legal a:hover { color: var(--ink); } @media (max-width: 720px) { .sf-card { padding: 24px 20px; } .sf-brand { display: none; } .sf-call { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--line); border-radius: 16px; padding: 13px 16px; margin-bottom: 24px; color: var(--ink); } .sf-call .sf-num { display: inline-flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; } .sf-call-cta { flex: none; font-size: 13px; font-weight: 700; color: var(--accent); } .sf-top { display: block; } .sf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .sf-col + .sf-col { border-left: 1px solid var(--line); padding-left: 20px; } .sf-col a { font-size: 13.5px; } .sf-more { display: none; } .sf-div { margin-top: 28px; } .sf-bottom { padding-top: 20px; } .sf-credit { flex-wrap: wrap; gap: 12px 14px; } .sf-credit-resort { display: flex; align-items: center; padding-right: 14px; border-right: 1px solid var(--line); } .sf-credit-resort img { height: 24px; width: auto; display: block; } .sf-su { height: 17px; } .sf-tag { flex-basis: 100%; padding-left: 0; border-left: 0; } } /* ================= PROPERTY PAGE ================= */ .cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; padding: 34px 0 70px; align-items: start; } @media (max-width: 920px) { .cols { grid-template-columns: 1fr; gap: 30px; } } .sec { padding: 26px 0; border-top: 1px solid var(--line); } .sec:first-child { border-top: 0; padding-top: 0; } .sec h2 { font-size: 22px; letter-spacing: -.02em; margin-bottom: 12px; } /* included strip */ .inc-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .inc-it { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; } .inc-it .iv { font-weight: 700; font-size: 15px; white-space: nowrap; } .inc-it .iv.gold { color: var(--accent); } .inc-it div b { display: block; font-size: 13.5px; font-weight: 600; } .inc-it div span { font-size: 12px; color: var(--mute); } @media (max-width: 560px) { .inc-strip { grid-template-columns: 1fr; } } /* Amenities now use the shared .detail-amenities* / .amenity-* rules in listing_card.css (see _detail_amenities.html.erb), so both sites match. */ /* Guest reviews now use the shared .detail-reviews / .review-card rules in listing_card.css (see _detail_reviews.html.erb), so both sites match. */ /* The booking card is now the shared .bk-card (styled in trip_picker.css, themed by --tp-*). Here we only set its sticky placement in the resort property layout — placement is the container's concern, not the card's. */ .bk-card { position: sticky; top: 64px; } @media (max-width: 920px) { /* The inline booking card gives way to the fixed bottom bar (shared/_booking_bar). Hiding the card works here, but the bar's `display` reveal, footer padding, and concierge lift 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. */ .bk-card { display: none; } } /* ================= MODALS (shared shell) ================= */ .dp-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(15, 12, 8, .35); backdrop-filter: blur(3px); display: none; opacity: 0; transition: opacity .25s ease; } .dp-backdrop.open { display: block; opacity: 1; } /* The dates + guests picker body (.dp, .dp-day, .gp-*, .step, .dp-foot …) now lives in the shared app/assets/stylesheets/trip_picker.css, themed via the --tp-* tokens mapped in :root above, so Stay Utah reuses the same modal. .dp-backdrop stays here — it's the shared shell for the account modals too. */ /* compact article pop-up (gift card inclusions) */ .smodal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 95; width: min(520px, calc(100vw - 32px)); max-height: 76vh; max-height: 76dvh; background: #fff; color: var(--ink); border-radius: 22px; box-shadow: 0 40px 90px -28px rgba(0, 0, 0, .55); display: none; flex-direction: column; overflow: hidden; } .smodal.open { display: flex; animation: amIn .3s cubic-bezier(.2, .9, .3, 1.12); } .sm-article { overflow-y: auto; overscroll-behavior: contain; padding: 30px 26px 22px; } .sm-article .sm-k { font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); text-align: center; margin-bottom: 8px; } .sm-article .sm-title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; text-align: center; line-height: 1.12; margin: 0 0 14px; } .sm-article p { font-size: 14px; color: #3E3D38; line-height: 1.65; margin: 10px 0; } .sm-article ul { margin: 10px 0 12px 18px; font-size: 13.5px; color: #3E3D38; line-height: 1.65; } .sm-article a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .sm-article .sm-note { font-size: 12px; color: var(--mute); background: var(--tint); border-radius: 12px; padding: 11px 14px; margin-top: 14px; } /* gift-basket variant: wide enough for the 4-card row, offer details stacked under */ .smodal--basket { width: min(880px, calc(100vw - 32px)); max-height: 84vh; max-height: 84dvh; } .smodal--basket .sm-article { padding: 34px 30px 26px; } .sm-offer { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; } .sm-offer h4 { font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 4px; } /* The .amodal shell + .am-kicker/.am-title/.am-rule/.am-article styling now live in the shared listing_card.css, so the main site reuses this exact modal. The gift-card / amenity extras (.am-close, .am-foot, .am-switch, .am-panel) and the .smodal/.sm-* compact pop-up stay here (spin-off only). */ .am-close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .85); backdrop-filter: blur(10px); color: var(--ink); font-size: 13px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 18px -8px rgba(17, 18, 16, .25); } .am-close:hover { background: #fff; } .am-panel[hidden] { display: none; } .am-foot { display: flex; align-items: center; justify-content: center; gap: 22px; border-top: 1px solid var(--line); padding: 13px 28px; background: #fff; } .am-foot .am-count { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); } .am-switch button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 14px; display: grid; place-items: center; transition: all .15s ease; } .am-switch button:hover { border-color: var(--ink); background: var(--tint); } @media (max-width: 720px) { .am-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); } } /* ================= REVEAL + MOBILE POLISH ================= */ .rv { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; } .rv.in { opacity: 1; transform: none; } @media (max-width: 720px) { .section { padding: 56px 0; } .deal-bar .wrap { gap: 8px; padding: 7px 14px; font-size: 12px; } /* Hero declutter on phones — the deal/giveaway countdowns stay desktop-only. */ .deal-bar .count, .hg-count { display: none; } /* iOS zooms any focused input under 16px — prevent it */ .give-form input, .notify-form input { font-size: 16px; } .timer div { min-width: 0; padding: 11px 0; } .timer b { font-size: 20px; } .give-form { flex-direction: column; align-items: stretch; } .give-form .btn { width: 100%; } .opens :is(button, a) { padding: 9px 14px; font-size: 12.5px; } .xsite-card .btn { width: 100%; } .xsite { padding-bottom: 56px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } .rv { opacity: 1; transform: none; } } } /* ================= CHECKOUT (bookings/new +spinoff) ================= */ @layer components { .co-secure { font-size: 12.5px; font-weight: 600; color: var(--mute); } .co-layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: 48px; padding: 26px 28px 70px; align-items: start; } .co-title { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.025em; margin-bottom: 10px; } .co-step { padding: 24px 0; border-top: 1px solid var(--line); } .co-step:first-of-type { border-top: 0; } .co-step-head { display: flex; align-items: center; gap: 12px; } .co-step-head h2 { font-size: 18px; letter-spacing: -.015em; } .co-step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--grad); color: #171511; font-size: 13px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; } .co-edit { margin-left: auto; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer; font-family: var(--body); color: var(--ink); } .co-step-sub { font-size: 13px; color: var(--mute); margin: 6px 0 16px 38px; } .co-trip-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0 0 38px; } .co-fact { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: #fff; text-align: left; font-family: var(--body); color: var(--ink); cursor: pointer; transition: border-color .15s ease, transform .2s cubic-bezier(.2, .9, .3, 1.3); } .co-fact:hover:not(.co-fact--static) { border-color: var(--ink); transform: translateY(-1px); } .co-fact--static { cursor: default; } .co-fact-k { display: block; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); } .co-trip-facts b { display: block; font-size: 14px; font-weight: 600; margin-top: 3px; } .co-fact-sub { font-size: 12px; color: var(--mute); } .co-fields { display: grid; gap: 12px; margin-left: 38px; } .co-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .co-field span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-bottom: 5px; } .co-field span em { text-transform: none; letter-spacing: 0; font-style: normal; font-weight: 500; } .co-field input { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 15px; font-family: var(--body); color: var(--ink); outline: 0; transition: border-color .15s ease; background: #fff; } .co-field input:focus { border-color: var(--ink); } .co-continue { justify-self: start; margin-top: 4px; } .co-continue:disabled { opacity: .45; cursor: default; } .co-guest-summary { margin-left: 38px; font-size: 14.5px; font-weight: 500; } .co-pay-locked { margin-left: 38px; border: 1px dashed var(--line); border-radius: 12px; padding: 16px; font-size: 13px; color: var(--mute); } .co-pay { display: grid; gap: 14px; margin-left: 38px; } /* display:grid would defeat the hidden attribute these sections toggle on */ .co-pay[hidden], .co-fields[hidden] { display: none; } .co-pay-btn { width: 100%; padding: 15px; font-size: 15.5px; } .co-pay-btn:disabled { opacity: .55; cursor: default; } .co-pay-errors { color: #B4543F; background: #FBF0EE; border-radius: 10px; padding: 10px 13px; font-size: 13px; font-weight: 500; } .co-pay-note { font-size: 12px; color: var(--mute); text-align: center; } .payment-save-choice--resort { margin: 2px 0 4px; color: var(--ink); background: var(--paper); border-color: var(--line); } .payment-save-choice--resort small { color: var(--mute); } .payment-save-choice--resort input { accent-color: var(--accent); } .co-card { position: sticky; top: 76px; border: 1px solid var(--line); border-radius: var(--r); padding: 22px; box-shadow: 0 28px 60px -32px rgba(17, 18, 16, .28); background: #fff; } .co-prop { display: flex; gap: 12px; align-items: center; } .co-prop-img { width: 84px; height: 64px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: linear-gradient(145deg, #EDEFF3, #C7CCD6); } .co-prop-img img { width: 100%; height: 100%; object-fit: cover; } .co-prop-info b { display: block; font-size: 15px; line-height: 1.2; } .co-prop-info span { display: block; font-size: 12.5px; color: var(--mute); margin-top: 2px; } .co-rows { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; display: grid; gap: 8px; } .co-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; } .co-row--total { font-weight: 700; font-size: 15px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 2px; } .co-row--save { color: var(--trend); font-weight: 600; } .co-perks { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; display: grid; gap: 7px; } .co-perks-k { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); } .co-perk { display: flex; gap: 9px; font-size: 13px; align-items: baseline; } .co-perk-v { font-weight: 700; color: var(--accent); min-width: 38px; } .co-cancel { background: var(--tint); border-radius: 12px; padding: 12px 14px; font-size: 12.5px; color: #3E3D38; margin-top: 14px; } .co-cancel strong { display: block; font-size: 13px; margin-bottom: 2px; } @media (max-width: 920px) { .co-layout { grid-template-columns: 1fr; gap: 24px; } .co-rail { order: -1; } .co-card { position: static; } } @media (max-width: 560px) { .co-trip-facts { grid-template-columns: 1fr; margin-left: 0; } .co-fields, .co-pay, .co-pay-locked, .co-guest-summary, .co-step-sub { margin-left: 0; } .co-field-row { grid-template-columns: 1fr; } .co-field input { font-size: 16px; } } /* ================= CONFIRMATION / PROCESSING ================= */ .cf { display: grid; place-items: center; padding: 44px 28px 90px; } .cf-card { max-width: 560px; width: 100%; border: 1px solid var(--line); border-radius: 24px; padding: 40px 36px; text-align: center; box-shadow: 0 30px 70px -35px rgba(17, 18, 16, .3); background: #fff; } .cf-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--grad); color: #171511; font-size: 28px; font-weight: 800; display: grid; place-items: center; margin: 0 auto 18px; animation: cfPop .5s cubic-bezier(.2, .9, .3, 1.4) both; } @keyframes cfPop { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } } .cf-icon--pending { background: var(--tint); border: 1px solid var(--line); } .cf-pulse { width: 12px; height: 12px; border-radius: 50%; background: #7ED957; box-shadow: 0 0 0 0 rgba(126, 217, 87, .6); animation: pulse 1.8s infinite; } .cf-card h1 { font-size: 26px; letter-spacing: -.02em; } .cf-sub { font-size: 14.5px; color: var(--mute); max-width: 40ch; margin: 8px auto 0; } .cf-details { margin-top: 22px; border: 1px solid var(--line); border-radius: 14px; padding: 4px 16px; text-align: left; } .cf-row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; } .cf-row:last-child { border-bottom: 0; } .cf-row span { color: var(--mute); } .cf-row b { font-weight: 600; text-align: right; } .cf-next { text-align: left; margin-top: 18px; display: grid; gap: 8px; } .cf-next-row { display: flex; gap: 9px; font-size: 13.5px; color: #3E3D38; align-items: baseline; } .cf-next-row .d { color: var(--accent); font-weight: 700; } .cf-note { font-size: 12.5px; color: var(--mute); margin: 10px 0; } .cf-btn { margin-top: 24px; } } /* ================= ACCOUNT + PASSWORDLESS AUTH ================= */ @layer components { /* nav account entry */ .acct { position: relative; } .acct-btn { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; font-family: var(--body); font-size: 13px; font-weight: 700; cursor: pointer; display: grid; place-items: center; transition: opacity .15s ease; } .acct-btn:hover { opacity: .85; } /* signed-out control: "Sign in" pill on desktop, compact circle on mobile */ .acct-signin { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-family: var(--body); background: var(--ink); color: #fff; border: 0; border-radius: 999px; padding: 9px 18px; font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: opacity .15s ease; } .acct-signin:hover { opacity: .85; } .acct-signin:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .acct-signin-ic { display: none; } @media (max-width: 760px) { .acct-signin { width: 36px; height: 36px; padding: 0; border-radius: 50%; } .acct-signin-text { display: none; } .acct-signin-ic { display: block; } } .acct-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 85; min-width: 240px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 28px 60px -24px rgba(17, 18, 16, .4); padding: 6px; } .acct-menu[hidden] { display: none; } .acct-id { display: grid; gap: 1px; padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .acct-id b { font-size: 13.5px; } .acct-id span { font-size: 12px; color: var(--mute); 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: 10px; font-family: var(--body); font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; } .acct-menu button:hover { background: var(--tint); } .acct-menu form { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; } .acct-signout { color: #B4543F !important; } /* auth modal (email → code → name) */ .authm { width: min(430px, calc(100vw - 32px)); } .authm .sm-article { padding: 34px 28px 26px; } .authm-title { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; } .authm-sub { font-size: 13.5px; color: var(--mute); line-height: 1.55; margin: 0 0 16px; } .authm-sub b { color: var(--ink); } .authm-cta { width: 100%; margin-top: 14px; } .authm-back { width: 100%; margin-top: 16px; background: #fff; border: 1px solid var(--line); color: var(--ink); } .authm-back:hover { border-color: var(--ink); } .authm-fine { font-size: 11.5px; color: var(--mute); text-align: center; line-height: 1.5; margin: 14px 0 0; } .authm-fine a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } .authm-error { font-size: 12.5px; font-weight: 500; color: #B4543F; background: #FBF0EE; border-radius: 10px; 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(--body); font-size: 22px; font-weight: 700; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 12px; outline: 0; transition: border-color .15s ease; } .authm-code input:focus { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .authm-resend { font-size: 13px; color: var(--mute); margin: 14px 0 0; } .authm-link { background: none; border: 0; padding: 0; font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .authm-link:disabled { color: var(--mute); text-decoration: none; cursor: default; } /* checkout sign-in gate */ .co-auth { margin-left: 38px; background: var(--tint); border-radius: 14px; padding: 18px; display: grid; gap: 12px; justify-items: start; } .co-auth p { font-size: 13.5px; color: #3E3D38; line-height: 1.55; margin: 0; } .co-input-locked { background: var(--tint) !important; color: var(--mute); cursor: default; } /* account modals (trips / profile) */ .acctm { width: min(480px, calc(100vw - 32px)); } .acct-loading, .acct-empty { font-size: 13.5px; color: var(--mute); text-align: center; padding: 14px 0; } .trips-h { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin: 18px 0 8px; } .trips { display: grid; gap: 10px; } .trip { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 10px; color: inherit; text-decoration: none; transition: border-color .15s ease, background .15s ease; } .trip:hover { border-color: var(--accent); background: var(--tint); } .trip-img { width: 76px; height: 58px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: linear-gradient(145deg, #EDEFF3, #C7CCD6); } .trip-img img { width: 100%; height: 100%; object-fit: cover; } .trip-info { display: grid; gap: 1px; min-width: 0; flex: 1; } .trip-info b { font-size: 14px; line-height: 1.25; } .trip-info span { font-size: 12.5px; color: var(--mute); } .trip-status { font-weight: 600; color: var(--accent); text-transform: capitalize; } /* A cancelled trip keeps its row — the record and the host thread live on — but stops competing with the stays that are still happening. */ .trip--off .trip-img { opacity: .5; } .trip-status--off { color: #B4543F; } .wishlist { display: grid; gap: 10px; } .wish { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 10px; color: inherit; text-decoration: none; transition: border-color .15s ease, background .15s ease; } .wish:hover { border-color: var(--accent); background: var(--tint); } .wish-img { width: 76px; height: 58px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: linear-gradient(145deg, #EDEFF3, #C7CCD6); } .wish-img img { width: 100%; height: 100%; object-fit: cover; } .wish-info { display: grid; gap: 1px; min-width: 0; flex: 1; } .wish-info b { font-size: 14px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wish-info span { font-size: 12.5px; color: var(--mute); } .wish-price { font-weight: 600; color: var(--accent); } .wish-go { width: 18px; height: 18px; flex-shrink: 0; color: var(--mute); } .prof-form { display: grid; gap: 12px; } .prof-email { font-size: 14.5px; font-weight: 500; margin: 2px 0 0; } .prof-note { font-size: 12px; color: var(--mute); margin: 4px 0 0; } .prof-saved { font-size: 13px; font-weight: 600; color: var(--accent); margin: 0; } @media (max-width: 560px) { .co-auth { margin-left: 0; } /* iOS zooms any focused input under 16px */ .authm .co-field input { font-size: 16px; } } } /* ============================================================ UNIFIED LISTING CARD — this resort'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 the resort's palette; the main site maps its own in application.css. ============================================================ */ @layer components { :root { --lc-card-bg: var(--bg); --lc-ink: var(--ink); --lc-muted: var(--mute); --lc-line: var(--line); --lc-accent: var(--accent); --lc-accent-soft: var(--tint); --lc-star: var(--accent); --lc-font-title: var(--display); --lc-font-body: var(--body); } } /* ===== 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 ≤920px reveal + footer padding + concierge lift must live outside @layer too. :has scopes them to the property pages (the only ones that render the bar). */ @media (max-width: 920px) { body:has(.booking-bar) .booking-bar { display: flex; } /* ~88px = bar height (~69px) + a comfortable gap so the footer never kisses it. */ body:has(.booking-bar) { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } body:has(.booking-bar) .concierge { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); } } /* Checkout promo code — shared markup, resort palette. */ .promo-entry { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); } .promo-entry__label { display: block; margin-bottom: 7px; color: var(--mute); font-size: 12px; 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(--line); border-radius: 9px; background: #fff; text-transform: uppercase; } .promo-entry__input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 1px; border-color: var(--accent); } .promo-entry__button { padding: 9px 13px; border: 1px solid var(--ink); border-radius: 9px; background: var(--ink); color: #fff; cursor: pointer; font-size: 12px; font-weight: 700; } .promo-entry__message { margin-top: 8px; font-size: 12px; line-height: 1.45; } .promo-entry__message--success { color: #39765a; } .promo-entry__message--error { color: #a13f32; } .promo-entry__remove { margin-left: 4px; text-decoration: underline; text-underline-offset: 2px; }