/* GENERATED by bin/build-css.py. Do not edit. The source is web/travelscowt-web.css in the Travelscowt Design System. Change it there, then run bin/sync-css.sh. What the build changes and why is at the top of bin/build-css.py. */ html:not(#ts) :where(.ts-page) :where(*:not(svg, svg *)) { all: revert; } /* Travelscowt web elements. One plain stylesheet for travelscowt.com. What this is: direction A, flow 1, Figtree, picked by Ian Archer on 2026-10-04, written down as elements. The booking prototype and the staging site both load this one file. Nothing here needs a build step, React or Tailwind. Source of the values: ../tokens/tokens.json. The :root block below repeats the ones the web uses, under the same names as ../tokens/tokens.css, so this file works alone. If a value changes, change tokens.json first, then here. Rules of use: ../applications/web.md, web-booking.md and web-mobile.md. Every element on one page: element-sheet.html in this folder. Every class starts with ts- so nothing collides with Elementor or MotoPress. Phone layer starts below 768px. Tablet adjustments start below 1024px. Load Figtree 400, 500, 600 and 700 before this file: https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap */ :root { /* teal, the one primary */ --ts-brand-50: #ECF9F9; --ts-brand-100: #D3F0F5; --ts-brand-600: #006C84; --ts-brand-700: #045A6D; --ts-brand-900: #00384B; /* orange, one per screen, always with ink-900 text */ --ts-accent-500: #FFAE42; --ts-accent-600: #F49B30; /* ink */ --ts-ink-50: #F5F6F7; --ts-ink-100: #EAECEF; --ts-ink-200: #D7DBE0; --ts-ink-300: #B4BAC2; --ts-ink-400: #8A929C; --ts-ink-500: #69727D; --ts-ink-600: #4D5866; --ts-ink-700: #384250; --ts-ink-800: #1F2A37; --ts-ink-900: #111927; --ts-canvas: #FCFCFC; --ts-canvas-raised: #FFFFFF; --ts-success: #067647; --ts-warning: #B54708; --ts-error: #B42318; --ts-font-web: "Figtree", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --ts-font-web-adjust: 0.53; --ts-text-title: 40px; /* web only: a Vacation guide post's title on a laptop, 32 (h2) on a phone; Airbnb's article title 40/46, read 2026-10-07 */ --ts-text-h1: 48px; --ts-text-h2: 32px; --ts-text-h3: 24px; --ts-text-h4: 20px; --ts-text-body-lg: 18px; --ts-text-body: 16px; --ts-text-body-sm: 14px; --ts-text-caption: 13px; --ts-text-overline: 12px; --ts-text-micro: 11px; --ts-text-nano: 10px; --ts-space-1: 4px; --ts-space-2: 8px; --ts-space-3: 12px; --ts-space-4: 16px; --ts-space-4-5: 20px; --ts-space-5: 24px; --ts-space-6: 32px; --ts-space-7: 40px; --ts-space-8: 48px; --ts-space-8-5: 56px; --ts-space-9: 64px; --ts-space-10: 80px; --ts-radius-sm: 6px; --ts-radius-md: 12px; --ts-radius-lg: 16px; --ts-radius-pill: 38px; --ts-radius-full: 9999px; --ts-shadow-md: 0 2px 12px rgba(0, 0, 0, 0.07); --ts-shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.18); --ts-duration-fast: 160ms; --ts-duration-normal: 240ms; --ts-ease-standard: cubic-bezier(0.2, 0, 0, 1); --ts-container: 1200px; --ts-gutter: 24px; --ts-measure: 68ch; /* the longest line of text that is read: posts, legal pages, a question's answer */ --ts-section: 48px; --ts-section-tight: 32px; /* a page head: 32 from the site header to its band or title, 40 from the band to the title, 64 from its last line to the first section (Ian, 2026-10-06: "a little bit more space from the picture to 'What is Marriott Vacation Club,' and then also a little bit more space from the bottom of that description to that picture") */ --ts-head-top: 32px; --ts-head-band: 40px; --ts-head-after: 64px; /* the flat wash over a photo that carries words (the hero, a state tile), and the dim behind a panel */ --ts-photo-wash: rgba(6, 26, 35, 0.43); --ts-scrim: rgba(17, 25, 39, 0.5); } @media (max-width: 767px) { :root { --ts-gutter: 16px; --ts-section: 32px; --ts-section-tight: 24px; --ts-head-top: 24px; --ts-head-band: 32px; --ts-head-after: 40px; } } /* ---------- Base ---------- One dark ink for nearly all text. Body is ink-800, values and headings ink-900, secondary lines ink-700 at weight 500. Nothing lighter than ink-700 carries words a guest has to read. That is what made the old setting read cold. */ html:not(#ts):not(#ts) .ts-page { margin: 0; background: var(--ts-canvas); color: var(--ts-ink-800); font: 400 var(--ts-text-body)/1.6 var(--ts-font-web); font-size-adjust: var(--ts-font-web-adjust); -webkit-font-smoothing: antialiased; } html:not(#ts):not(#ts) .ts-page h1, html:not(#ts):not(#ts) .ts-page h2, html:not(#ts):not(#ts) .ts-page h3, html:not(#ts):not(#ts) .ts-page h4 { margin: 0; color: var(--ts-ink-900); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; text-wrap: balance; } html:not(#ts):not(#ts) .ts-page :focus-visible { outline: 2px solid var(--ts-brand-600); outline-offset: 2px; } html:not(#ts):not(#ts) .ts-wrap { max-width: var(--ts-container); margin-inline: auto; padding-inline: var(--ts-gutter); } html:not(#ts):not(#ts) .ts-num { font-variant-numeric: tabular-nums; } /* Section rhythm. A page section gets 48 above and below (32 on a phone). Sections divided by a line inside the resort page get 32 (24 on a phone). */ html:not(#ts):not(#ts) .ts-section { padding-block: var(--ts-section); } html:not(#ts):not(#ts) .ts-section--tight { padding-block: var(--ts-section-tight); border-bottom: 1px solid var(--ts-ink-200); } html:not(#ts):not(#ts) .ts-section--tight:last-child { border-bottom: 0; } html:not(#ts):not(#ts) .ts-section > h2, html:not(#ts):not(#ts) .ts-section--tight > h2 { font-size: var(--ts-text-h3); margin-bottom: var(--ts-space-4); } /* 24 on a laptop, inside Airbnb 22 to Vrbo 26 (F-146, phase 11b); 20 on a phone */ /* ---------- Button ---------- One shape: a 48px pill. Three fills. Orange is the next step and appears once per screen. Teal confirms inside a panel that sits over the page. Line is everything else. */ html:not(#ts):not(#ts) .ts-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ts-space-2); box-sizing: border-box; height: 48px; padding: 0 var(--ts-space-5); border: 1px solid transparent; border-radius: var(--ts-radius-pill); font: 600 var(--ts-text-body)/1 var(--ts-font-web); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--ts-duration-fast) var(--ts-ease-standard), border-color var(--ts-duration-fast) var(--ts-ease-standard), color var(--ts-duration-fast) var(--ts-ease-standard), transform 100ms var(--ts-ease-standard); } html:not(#ts):not(#ts) .ts-btn--accent { background: var(--ts-accent-500); color: var(--ts-ink-900); } html:not(#ts):not(#ts) .ts-btn--accent:hover { background: var(--ts-accent-600); } html:not(#ts):not(#ts) .ts-btn--teal { background: var(--ts-brand-600); color: #fff; } html:not(#ts):not(#ts) .ts-btn--teal:hover { background: var(--ts-brand-700); } html:not(#ts):not(#ts) .ts-btn--line { background: var(--ts-canvas-raised); border-color: var(--ts-ink-300); color: var(--ts-ink-900); } html:not(#ts):not(#ts) .ts-btn--line:hover { border-color: var(--ts-brand-600); color: var(--ts-brand-600); } html:not(#ts):not(#ts) .ts-btn--sm { height: 44px; padding: 0 var(--ts-space-4); } html:not(#ts):not(#ts) .ts-btn--block { width: 100%; } html:not(#ts):not(#ts) .ts-btn:disabled { opacity: 0.4; cursor: default; } html:not(#ts):not(#ts) .ts-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ts-brand-600); font: 600 var(--ts-text-body)/1.4 var(--ts-font-web); text-decoration: underline; text-underline-offset: 3px; } html:not(#ts):not(#ts) .ts-link:hover { color: var(--ts-brand-700); } /* Round icon button: carousel arrows, calendar month arrows, close. 44px. */ html:not(#ts):not(#ts) .ts-icon-btn { box-sizing: border-box; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 1px solid var(--ts-ink-200); border-radius: 50%; background: var(--ts-canvas-raised); color: var(--ts-ink-900); cursor: pointer; transition: border-color var(--ts-duration-fast) var(--ts-ease-standard), transform 100ms var(--ts-ease-standard); } html:not(#ts):not(#ts) .ts-icon-btn:hover { border-color: var(--ts-ink-900); } html:not(#ts):not(#ts) .ts-icon-btn:disabled { opacity: 0.35; cursor: default; } /* ---------- Field ---------- One field. Label always visible above it. 48px tall, radius-sm, ink-500 border. */ html:not(#ts):not(#ts) .ts-field { display: grid; gap: var(--ts-space-1); } html:not(#ts):not(#ts) .ts-field > label { font-size: var(--ts-text-body-sm); font-weight: 600; color: var(--ts-ink-900); line-height: 18px; } /* 18, both sites' label line (F-142) */ html:not(#ts):not(#ts) .ts-field input, html:not(#ts):not(#ts) .ts-field select, html:not(#ts):not(#ts) .ts-field textarea { box-sizing: border-box; width: 100%; min-width: 0; height: 56px; padding: 0 var(--ts-space-3); /* 56, Airbnb's (Vrbo 60) (F-142) */ border: 1px solid var(--ts-ink-500); border-radius: var(--ts-radius-sm); background: var(--ts-canvas-raised); color: var(--ts-ink-900); font: 400 var(--ts-text-body)/1.4 var(--ts-font-web); font-size-adjust: var(--ts-font-web-adjust); transition: border-color var(--ts-duration-fast) var(--ts-ease-standard), box-shadow var(--ts-duration-fast) var(--ts-ease-standard); } html:not(#ts):not(#ts) .ts-field textarea { height: auto; min-height: 120px; padding-block: var(--ts-space-3); line-height: 1.6; resize: vertical; } html:not(#ts):not(#ts) .ts-field input:focus, html:not(#ts):not(#ts) .ts-field select:focus, html:not(#ts):not(#ts) .ts-field textarea:focus { outline: 0; border-color: var(--ts-brand-600); box-shadow: 0 0 0 1px var(--ts-brand-600); } html:not(#ts):not(#ts) .ts-field__hint { font-size: var(--ts-text-body-sm); font-weight: 500; color: var(--ts-ink-700); line-height: 1.4; } html:not(#ts):not(#ts) .ts-field--error input, html:not(#ts):not(#ts) .ts-field--error select, html:not(#ts):not(#ts) .ts-field--error textarea { border-color: var(--ts-error); box-shadow: 0 0 0 1px var(--ts-error); } html:not(#ts):not(#ts) .ts-field--error .ts-field__hint { color: var(--ts-error); font-weight: 600; } /* ---------- Status chip ---------- Where a request stands. A dot and words on white, so it never fights the orange button. */ html:not(#ts):not(#ts) .ts-status-chip { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--ts-space-2); height: 32px; padding: 0 var(--ts-space-3); border: 1px solid var(--ts-ink-200); border-radius: var(--ts-radius-pill); background: var(--ts-canvas-raised); font-size: var(--ts-text-body-sm); font-weight: 600; color: var(--ts-ink-900); line-height: 1; white-space: nowrap; } html:not(#ts):not(#ts) .ts-status-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ts-brand-600); } html:not(#ts):not(#ts) .ts-status-chip--done::before { background: var(--ts-success); } html:not(#ts):not(#ts) .ts-status-chip--wait::before { background: var(--ts-warning); } html:not(#ts):not(#ts) .ts-status-chip--off::before { background: var(--ts-ink-400); } /* Filter chip: month, state, villa size. 36px. */ html:not(#ts):not(#ts) .ts-chip { flex: none; height: 36px; padding: 0 var(--ts-space-4); border: 1px solid var(--ts-ink-300); border-radius: var(--ts-radius-pill); background: var(--ts-canvas-raised); color: var(--ts-ink-900); font: 500 var(--ts-text-body-sm)/1 var(--ts-font-web); white-space: nowrap; cursor: pointer; } html:not(#ts):not(#ts) .ts-chip[aria-pressed="true"] { background: var(--ts-brand-600); border-color: var(--ts-brand-600); color: #fff; } /* ---------- Resort card ---------- The whole card is the link. Border, no shadow at rest. On hover it lifts the way the card on the live site does: scale 1.02 and shadow-md over 240ms, measured on travelscowt.com/resorts/ on 2026-10-04 (Ian, same day: "match how the cards interact on the live site"). Nothing moves on a touch screen. This replaces the still card with an underlined name. The card stays raised (z-index 3) until it has shrunk back: z-index waits out the 240ms on the way out, from 0 at rest, since auto cannot wait. Without that a card flush on the next section lost its bottom edge under it while shrinking (Ian, 2026-10-13, 0.3.74). Same for .ts-state and .ts-team li. */ html:not(#ts):not(#ts) .ts-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-card { position: relative; z-index: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0; text-align: left; text-decoration: none; cursor: pointer; background: var(--ts-canvas-raised); border: 1px solid var(--ts-ink-200); border-radius: var(--ts-radius-lg); color: var(--ts-ink-800); font: inherit; transition: transform var(--ts-duration-normal) var(--ts-ease-standard), box-shadow var(--ts-duration-normal) var(--ts-ease-standard), z-index 0s linear var(--ts-duration-normal); } @media (hover: hover) { html:not(#ts):not(#ts) .ts-card:hover { z-index: 3; transform: scale(1.02); box-shadow: var(--ts-shadow-md); transition-delay: 0s; } } html:not(#ts):not(#ts) .ts-card__photo { display: block; aspect-ratio: 3 / 2; width: 100%; overflow: hidden; background: var(--ts-ink-50); } html:not(#ts):not(#ts) .ts-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; } html:not(#ts):not(#ts) .ts-card__body { display: flex; flex-direction: column; flex: 1; gap: var(--ts-space-1); padding: var(--ts-space-4) var(--ts-space-4-5) var(--ts-space-4-5); } html:not(#ts):not(#ts) .ts-card__name { font-size: var(--ts-text-body-lg); font-weight: 600; color: var(--ts-ink-900); line-height: 1.3; } /* The place and the guests line are one line each: 1.2, as Airbnb's 15/19 (F-166, batch F 2026-10-05, was 1.5). A post card's first line can run to three, so it keeps 1.5 under its own name. */ html:not(#ts):not(#ts) .ts-card__place, html:not(#ts):not(#ts) .ts-card__facts, html:not(#ts):not(#ts) .ts-card__text { font-weight: 500; line-height: 1.2; } html:not(#ts):not(#ts) .ts-card__text { line-height: 1.5; } html:not(#ts):not(#ts) .ts-card__facts { margin-bottom: var(--ts-space-2); } /* A post card (the Vacation guide, "Recent posts"): what kind of post over its name, three words at most, and when it was written and how long it takes to read at the foot, level across a row as the price line is (Ian, 2026-10-07, F-215) */ html:not(#ts):not(#ts) .ts-card__over { margin-bottom: var(--ts-space-1); font-size: var(--ts-text-overline); font-weight: 700; letter-spacing: 0.08em; line-height: 1.6; text-transform: uppercase; color: var(--ts-brand-600); } html:not(#ts):not(#ts) .ts-card__meta { margin-top: auto; padding-top: var(--ts-space-2); font-size: var(--ts-text-body-sm); font-weight: 500; line-height: 1.6; color: var(--ts-ink-700); } html:not(#ts):not(#ts) .ts-nobr { white-space: nowrap; } /* a word that must not break at its hyphen: "check-in" (the 2026-10-06 walk: "check-" and "in." on two lines) */ html:not(#ts):not(#ts) .ts-card__price, html:not(#ts):not(#ts) .ts-card__closed { margin-top: auto; padding-top: var(--ts-space-3); border-top: 1px solid var(--ts-ink-100); } html:not(#ts):not(#ts) .ts-card__price { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ts-space-3); } html:not(#ts):not(#ts) .ts-card__price b { font-size: var(--ts-text-body-lg); font-weight: 600; color: var(--ts-ink-900); } /* 600: Vrbo and Airbnb draw 500, the brand keeps one step more (F-170, was 700). 18, the resort name's size, on every resort card (Ian, 2026-10-06: "make the 'from $850' font size match the resort name ... for every resort card"; it was h4, 20) */ html:not(#ts):not(#ts) .ts-card__price small, html:not(#ts):not(#ts) .ts-card__price span { font-size: var(--ts-text-body-sm); font-weight: 500; color: var(--ts-ink-700); } html:not(#ts):not(#ts) .ts-card__price span { text-align: right; line-height: 1.4; } html:not(#ts):not(#ts) .ts-card__closed { display: grid; gap: 0; font-size: var(--ts-text-body-sm); } html:not(#ts):not(#ts) .ts-card__closed b { font-weight: 600; color: var(--ts-ink-900); } html:not(#ts):not(#ts) .ts-card__closed span { font-weight: 600; color: var(--ts-brand-600); text-decoration: underline; text-underline-offset: 3px; } /* ---------- Search bar ---------- Three parts and one button. The button is the word alone, no icon. */ html:not(#ts):not(#ts) .ts-search { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; align-items: center; padding: var(--ts-space-2); background: var(--ts-canvas-raised); border: 1px solid var(--ts-ink-200); border-radius: var(--ts-radius-pill); box-shadow: var(--ts-shadow-md); } html:not(#ts):not(#ts) .ts-search__part { display: flex; align-items: center; gap: var(--ts-space-3); min-height: 48px; padding: var(--ts-space-1) var(--ts-space-4-5); background: none; border: 0; border-right: 1px solid var(--ts-ink-200); text-align: left; cursor: pointer; font: inherit; color: inherit; min-width: 0; } html:not(#ts):not(#ts) .ts-search__part:nth-of-type(3) { border-right: 0; } html:not(#ts):not(#ts) .ts-search__part svg { flex: none; color: var(--ts-brand-600); } html:not(#ts):not(#ts) .ts-search__part small { display: block; font-size: var(--ts-text-caption); font-weight: 600; color: var(--ts-ink-900); line-height: 1.3; } /* the label dark, the empty value gray under it, as the booking box draws them (Ian, 2026-10-07: "the add date is gray and the label is bold"); was ink-700 */ html:not(#ts):not(#ts) .ts-search__part b { display: block; font-weight: 500; color: var(--ts-ink-900); line-height: 1.3; } /* 500, the weight of an empty row, so "2 guests" does not read bold beside "State or resort" and "Dates" (Ian, 2026-10-06); was 600. Vrbo and Airbnb draw 400 (F-171); Ian kept the heavier look */ /* Hover as Airbnb draws it (read on airbnb.com on 2026-10-08, the pointer on "When"): the part under the pointer fills with a flat gray pill the bar's full height, no shadow, and the lines beside it go. ink-100, the system's nearest gray to Airbnb's #EBEBEB. The bar is 66 high with 8 of padding and each part 48, so the pill reaches 8 above and below the part, and the first part's reaches the bar's inner left edge. Only where a pointer hovers: a tap would leave it stuck, and a phone has the stacked box. The home hero and the results page alike (root rule 24); "Finish your request" under the home bar does the same (ts-resume.css in the plugin). */ @media (hover: hover) and (min-width: 768px) { html:not(#ts):not(#ts) .ts-search__part { position: relative; isolation: isolate; transition: border-color var(--ts-duration-fast) var(--ts-ease-standard); } html:not(#ts):not(#ts) .ts-search__part::before { content: ""; position: absolute; inset: calc(-1 * var(--ts-space-2)) 0; z-index: -1; border-radius: var(--ts-radius-pill); background: var(--ts-ink-100); opacity: 0; transition: opacity var(--ts-duration-fast) var(--ts-ease-standard); pointer-events: none; } html:not(#ts):not(#ts) .ts-search__part:nth-of-type(1)::before { left: calc(-1 * var(--ts-space-2)); } html:not(#ts):not(#ts) .ts-search__part:hover::before { opacity: 1; } html:not(#ts):not(#ts) .ts-search__part:hover, html:not(#ts):not(#ts) .ts-search__part:has(+ .ts-search__part:hover) { border-right-color: transparent; } } /* ---------- Booking box ---------- One raised card, pinned beside the resort page. Top to bottom: status or "from" price, dates, guests, price summary, one orange button, fine print, the scout. */ html:not(#ts):not(#ts) .ts-book { box-sizing: border-box; padding: var(--ts-space-5); background: var(--ts-canvas-raised); border: 1px solid var(--ts-ink-200); border-radius: var(--ts-radius-lg); box-shadow: var(--ts-shadow-md); } html:not(#ts):not(#ts) .ts-book--pinned { position: sticky; top: 72px; } html:not(#ts):not(#ts) .ts-book__status { display: flex; align-items: flex-start; gap: var(--ts-space-2); margin: 0 0 var(--ts-space-4); font-weight: 600; color: var(--ts-ink-900); line-height: 1.35; text-wrap: balance; } html:not(#ts):not(#ts) .ts-book__status svg { flex: none; margin-top: 1px; color: var(--ts-brand-600); } html:not(#ts):not(#ts) .ts-book__status--no svg { color: var(--ts-warning); } html:not(#ts):not(#ts) .ts-book__from { margin: 0 0 var(--ts-space-4); font-size: var(--ts-text-h3); font-weight: 700; color: var(--ts-ink-900); line-height: 1.2; } html:not(#ts):not(#ts) .ts-book__from small { font-size: var(--ts-text-body); font-weight: 500; color: var(--ts-ink-700); } html:not(#ts):not(#ts) .ts-book__text { margin: var(--ts-space-4) 0 0; } html:not(#ts):not(#ts) .ts-book .ts-btn--accent { width: 100%; margin-top: var(--ts-space-4-5); } html:not(#ts):not(#ts) .ts-fine { margin: var(--ts-space-3) 0 0; font-size: var(--ts-text-body-sm); font-weight: 500; color: var(--ts-ink-700); line-height: 1.5; text-align: center; } html:not(#ts):not(#ts) .ts-dates { display: grid; grid-template-columns: 1fr 1fr; width: 100%; padding: 0; overflow: hidden; text-align: left; cursor: pointer; background: var(--ts-canvas-raised); border: 1px solid var(--ts-ink-500); border-radius: var(--ts-radius-md); font: inherit; color: inherit; } html:not(#ts):not(#ts) .ts-dates > span { display: block; padding: var(--ts-space-2) var(--ts-space-4); } /* 56 high with the lines, Airbnb's (F-164) */ html:not(#ts):not(#ts) .ts-dates > span + span { border-left: 1px solid var(--ts-ink-200); } html:not(#ts):not(#ts) .ts-dates[aria-expanded="true"] { border-color: var(--ts-brand-600); box-shadow: 0 0 0 1px var(--ts-brand-600); } html:not(#ts):not(#ts) .ts-guests { display: flex; align-items: center; justify-content: space-between; margin-top: var(--ts-space-3); padding: var(--ts-space-2) var(--ts-space-2) var(--ts-space-2) var(--ts-space-4); border: 1px solid var(--ts-ink-500); border-radius: var(--ts-radius-md); } /* Label over value, as Airbnb draws its booking box and in the search bar's own sizes and weights: the label 13/600 in the dark ink, the value 16/500, gray (ink-700, the lightest ink a guest reads) while it is empty (Ian, 2026-10-07: "do it how they do it, where the add date is gray and the label is bold"). It was a gray label over a 600 "Add date". */ html:not(#ts):not(#ts) .ts-dates small, html:not(#ts):not(#ts) .ts-guests small { display: block; font-size: var(--ts-text-caption); font-weight: 600; color: var(--ts-ink-900); line-height: 1.3; } html:not(#ts):not(#ts) .ts-dates b, html:not(#ts):not(#ts) .ts-guests b { display: block; font-weight: 500; color: var(--ts-ink-900); line-height: 1.3; } html:not(#ts):not(#ts) .ts-dates b.is-empty { color: var(--ts-ink-700); } html:not(#ts):not(#ts) .ts-stepper { display: flex; align-items: center; gap: var(--ts-space-1); } html:not(#ts):not(#ts) .ts-stepper .ts-icon-btn { border-color: var(--ts-ink-300); } /* ---------- Price summary ---------- One row per price line, then the total. A row for tax or a fee, if there is one, sits above the total as another .ts-price__row. */ html:not(#ts):not(#ts) .ts-price { display: grid; gap: var(--ts-space-2); margin-top: var(--ts-space-4-5); } html:not(#ts):not(#ts) .ts-price__row { display: flex; justify-content: space-between; gap: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-price__total { padding-top: var(--ts-space-3); border-top: 1px solid var(--ts-ink-200); font-size: var(--ts-text-body-lg); font-weight: 700; color: var(--ts-ink-900); } /* ---------- Open-stay row ---------- A stay the guest can request, one row each: dates, total, one action. Used under "Closest options available" and for open weeks. */ html:not(#ts):not(#ts) .ts-stays { margin-top: var(--ts-space-4-5); } html:not(#ts):not(#ts) .ts-stays h3 { font-size: var(--ts-text-body); font-weight: 600; margin-bottom: var(--ts-space-1); } html:not(#ts):not(#ts) .ts-stays ul { list-style: none; margin: 0; padding: 0; } html:not(#ts):not(#ts) .ts-stay { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--ts-space-3); min-height: 48px; border-bottom: 1px solid var(--ts-ink-100); } html:not(#ts):not(#ts) .ts-stay:last-child { border-bottom: 0; } html:not(#ts):not(#ts) .ts-stay b { font-weight: 600; color: var(--ts-ink-900); } html:not(#ts):not(#ts) .ts-stay span { font-weight: 500; } /* ---------- Scout block ---------- Question line, photo, name and email read as one group: 12 between its parts, 24 above it. */ html:not(#ts):not(#ts) .ts-scout { display: grid; gap: var(--ts-space-3); margin-top: var(--ts-space-5); padding-top: var(--ts-space-5); border-top: 1px solid var(--ts-ink-200); text-align: center; justify-items: center; } /* centered (Ian, 2026-10-05) */ html:not(#ts):not(#ts) .ts-scout h3 { font-size: var(--ts-text-body); font-weight: 600; } html:not(#ts):not(#ts) .ts-scout__who { display: inline-grid; grid-template-columns: 48px minmax(0, auto); max-width: 100%; align-items: center; gap: var(--ts-space-3); text-align: left; } /* never wider than the box: at 320 danielle@travelscowt.com ran 16 past it and pushed the button off center (2026-10-06) */ /* In the resort page's booking box "Have a question?" starts where the name starts (Ian, 2026-10-06: "always in line with the name and the email"), and the photo, the name and the email sit centered in the box as one block, as "Booking request sent" centers its own (.ts-scout__help). The middle column is as wide as the block's widest line, so the space to spare falls evenly on both sides. A fixed column 268 wide (228 on a phone) left it all on the right and set the block 3 to 21 left of the box's middle, by scowt (Ian, 2026-10-08: "Donald, your scowt" looked "slightly to the left"; "Fix looks good. Add that."). Send message spans the box. */ html:not(#ts):not(#ts) .ts-book .ts-scout { grid-template-columns: 1fr minmax(0, max-content) 1fr; justify-items: stretch; } html:not(#ts):not(#ts) .ts-book .ts-scout > * { grid-column: 2; } html:not(#ts):not(#ts) .ts-book .ts-scout > .ts-btn { grid-column: 1 / -1; } html:not(#ts):not(#ts) .ts-book .ts-scout h3, html:not(#ts):not(#ts) .ts-book .ts-scout__who { box-sizing: border-box; width: auto; text-align: left; } html:not(#ts):not(#ts) .ts-book .ts-scout h3 { padding-left: calc(48px + var(--ts-space-3)); } html:not(#ts):not(#ts) .ts-book .ts-scout:not(:has(.ts-scout__who img)) h3 { padding-left: 0; } /* no photo: the name starts at the edge, so the question line does too */ html:not(#ts):not(#ts) .ts-book .ts-scout__who { display: grid; grid-template-columns: 48px minmax(0, 1fr); } html:not(#ts):not(#ts) .ts-book .ts-scout__who > span:only-child { grid-column: 1 / -1; } /* "Send message" sits as far under the name and email as "Have a question?" sits under the line, 24 each, so the group is centered between them (Ian, 2026-10-07: the gap "is off or not centered"; it was 24 above and 12 below, 4 on a phone) */ html:not(#ts):not(#ts) .ts-book .ts-scout > .ts-btn { margin-top: var(--ts-space-3); } html:not(#ts):not(#ts) .ts-scout__who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--ts-ink-100); } html:not(#ts):not(#ts) .ts-scout__who b { display: block; font-weight: 600; color: var(--ts-ink-900); line-height: 1.3; } html:not(#ts):not(#ts) .ts-scout__who a { font-weight: 500; color: var(--ts-brand-600); text-decoration: underline; text-underline-offset: 3px; } /* the scout's email, a mailto link that breaks after the @ (a ) only where one line does not fit (Ian, 2026-10-06: "have the email address link be clickable"; it was a span that only looked like a link) */ /* ---------- Calendar ---------- One calendar for the whole site. Two months in a popover on desktop, a full sheet on a phone. The heading says what to pick, then counts the nights. Numerals are set at their drawn size, so font-size-adjust is off in here. */ html:not(#ts):not(#ts) .ts-pop { box-sizing: border-box; width: 700px; max-width: calc(100vw - 2 * var(--ts-gutter)); padding: var(--ts-space-5); background: var(--ts-canvas-raised); border: 1px solid var(--ts-ink-200); border-radius: var(--ts-radius-lg); box-shadow: var(--ts-shadow-xl); } html:not(#ts):not(#ts) .ts-pop__head { display: grid; gap: 2px; min-height: 52px; margin-bottom: var(--ts-space-2); } html:not(#ts):not(#ts) .ts-pop__head h3 { font-size: var(--ts-text-h4); } html:not(#ts):not(#ts) .ts-pop__head p { margin: 0; font-weight: 500; color: var(--ts-ink-900); } /* --one: the title alone, no line under it, and the box as short as that. The resort page's calendar (Ian Archer, 2026-10-05: "get rid of 'The price for each night is under the date' and resize accordingly"). The title says what to pick next and then the stay, so nothing changes height between clicks. On a phone the sheet's bar keeps its 68. */ html:not(#ts):not(#ts) .ts-pop__head--one { min-height: 0; } html:not(#ts):not(#ts) .ts-pop__close { display: none; } html:not(#ts):not(#ts) .ts-pop__foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--ts-space-4); padding-top: var(--ts-space-4); border-top: 1px solid var(--ts-ink-200); } html:not(#ts):not(#ts) .ts-pop__note { margin: var(--ts-space-4) 0 0; font-size: var(--ts-text-body-sm); font-weight: 500; color: var(--ts-ink-700); text-align: center; } html:not(#ts):not(#ts) .ts-cal { position: relative; font-size-adjust: none; } html:not(#ts):not(#ts) .ts-cal__nav { position: absolute; inset: 0 0 auto 0; z-index: 2; display: flex; justify-content: space-between; pointer-events: none; } html:not(#ts):not(#ts) .ts-cal__nav .ts-icon-btn { pointer-events: auto; } html:not(#ts):not(#ts) .ts-cal__months { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ts-space-6); } html:not(#ts):not(#ts) .ts-cal__title { height: 44px; line-height: 44px; text-align: center; font-size: var(--ts-text-body-lg); font-weight: 600; color: var(--ts-ink-900); } html:not(#ts):not(#ts) .ts-cal__dow, html:not(#ts):not(#ts) .ts-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); } html:not(#ts):not(#ts) .ts-cal__dow span { padding-block: var(--ts-space-1); text-align: center; font-size: var(--ts-text-body-sm); font-weight: 500; color: var(--ts-ink-700); } html:not(#ts):not(#ts) .ts-day { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1 / 1.05; padding: 0; border: 0; border-radius: 50%; background: none; line-height: 1.15; cursor: pointer; font-family: var(--ts-font-web); } html:not(#ts):not(#ts) .ts-day b { font-size: var(--ts-text-body-sm); font-weight: 500; color: var(--ts-ink-900); } /* 14, as Vrbo and Airbnb print the day (F-169) */ html:not(#ts):not(#ts) .ts-day small { font-size: var(--ts-text-nano); font-weight: 500; color: var(--ts-ink-700); } /* 10 under the 14 day, as Vrbo's listing calendar draws its nightly price (Ian, 2026-10-06, with a picture of Vrbo's: "update the rate size in the calendars to match this size"; it was 14, the day's size). A phone keeps 11 (below) */ @media (hover: hover) { html:not(#ts):not(#ts) .ts-day:not(:disabled):not(.is-start):not(.is-end):hover { box-shadow: inset 0 0 0 1px var(--ts-ink-900); } } html:not(#ts):not(#ts) .ts-day:disabled { cursor: default; } html:not(#ts):not(#ts) .ts-day.is-past b, html:not(#ts):not(#ts) .ts-day.is-norate b { color: var(--ts-ink-300); font-weight: 400; } html:not(#ts):not(#ts) .ts-day.is-taken b { color: var(--ts-ink-400); text-decoration: line-through; } html:not(#ts):not(#ts) .ts-day.is-in { background: var(--ts-brand-50); border-radius: 0; } html:not(#ts):not(#ts) .ts-day.is-start, html:not(#ts):not(#ts) .ts-day.is-end { background: var(--ts-brand-600); } html:not(#ts):not(#ts) .ts-day.is-start b, html:not(#ts):not(#ts) .ts-day.is-end b, html:not(#ts):not(#ts) .ts-day.is-start small, html:not(#ts):not(#ts) .ts-day.is-end small { color: #fff; } /* ---------- Timeline ---------- "What happens next", four steps. Ours alone: no reference site has it. */ html:not(#ts):not(#ts) .ts-timeline { list-style: none; margin: 0; padding: 0; display: grid; } html:not(#ts):not(#ts) .ts-timeline li { position: relative; display: grid; gap: 2px; padding: 0 0 var(--ts-space-5) var(--ts-space-7); } html:not(#ts):not(#ts) .ts-timeline li:last-child { padding-bottom: 0; } html:not(#ts):not(#ts) .ts-timeline li::before { content: ""; position: absolute; left: 4px; top: 2px; box-sizing: border-box; width: 20px; height: 20px; border: 2px solid var(--ts-ink-300); border-radius: 50%; background: var(--ts-canvas-raised); } html:not(#ts):not(#ts) .ts-timeline li::after { content: ""; position: absolute; left: 13px; top: 26px; bottom: 2px; width: 2px; background: var(--ts-ink-200); } html:not(#ts):not(#ts) .ts-timeline li:last-child::after { display: none; } html:not(#ts):not(#ts) .ts-timeline li.is-done::before { border-color: var(--ts-brand-600); background: var(--ts-brand-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; } html:not(#ts):not(#ts) .ts-timeline li.is-done::after { background: var(--ts-brand-600); } html:not(#ts):not(#ts) .ts-timeline li.is-now::before { border-color: var(--ts-brand-600); box-shadow: inset 0 0 0 4px var(--ts-canvas-raised); background: var(--ts-brand-600); } html:not(#ts):not(#ts) .ts-timeline b { font-weight: 600; color: var(--ts-ink-900); line-height: 1.4; } html:not(#ts):not(#ts) .ts-timeline span { font-weight: 500; color: var(--ts-ink-700); line-height: 1.5; } /* ---------- Lists on the resort page ---------- */ /* Highlights: icon, short title, one plain line. Three per resort, no heading. */ html:not(#ts):not(#ts) .ts-highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-highlights li { display: grid; grid-template-columns: 24px 1fr; gap: var(--ts-space-4); align-items: start; } html:not(#ts):not(#ts) .ts-highlights svg { margin-top: 2px; color: var(--ts-brand-600); } html:not(#ts):not(#ts) .ts-highlights b { display: block; font-weight: 600; color: var(--ts-ink-900); line-height: 1.4; } html:not(#ts):not(#ts) .ts-highlights li > span { color: var(--ts-ink-700); line-height: 1.5; } /* Facts: "Your villa", "Good to know". Two columns, one on a phone. */ html:not(#ts):not(#ts) .ts-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--ts-space-2) var(--ts-space-6); } html:not(#ts):not(#ts) .ts-facts li { display: flex; align-items: center; gap: var(--ts-space-3); } html:not(#ts):not(#ts) .ts-facts svg { flex: none; color: var(--ts-brand-600); } html:not(#ts):not(#ts) .ts-facts b { font-weight: 600; color: var(--ts-ink-900); } /* Review card, in a row that swipes. The row's parent must be held to the screen width (min-width: 0). */ html:not(#ts):not(#ts) .ts-reviews { display: flex; gap: var(--ts-space-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } html:not(#ts):not(#ts) .ts-reviews::-webkit-scrollbar { display: none; } html:not(#ts):not(#ts) .ts-review { box-sizing: border-box; flex: 0 0 calc(50% - 8px); scroll-snap-align: start; padding: var(--ts-space-4-5); background: var(--ts-canvas-raised); border: 1px solid var(--ts-ink-200); border-radius: var(--ts-radius-lg); } html:not(#ts):not(#ts) .ts-review b { color: var(--ts-ink-900); } html:not(#ts):not(#ts) .ts-review p { margin: var(--ts-space-2) 0; } html:not(#ts):not(#ts) .ts-review span { font-weight: 500; } /* a long review shows 4 lines and "Read more", which opens it in place, as the home reviews do; so a row of cards is as tall as its tallest 4 lines, not its longest review (Ian, 2026-10-06, Barony Beach Club: "the review cards are way too tall", 570 high for 3 lines of words). The script adds the button only where the words are cut */ html:not(#ts):not(#ts) .ts-reviews .ts-review p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } html:not(#ts):not(#ts) .ts-reviews .ts-review.is-open p { display: block; } html:not(#ts):not(#ts) .ts-review .ts-link { display: flex; align-items: center; width: fit-content; margin: calc(-1 * var(--ts-space-1)) 0 var(--ts-space-2); font-size: var(--ts-text-body-sm); } /* its own line, above the name; 44 high on a phone from the .ts-link rule there */ /* ---------- Phone bar ---------- Fixed to the bottom of the resort page on a phone. Price left, the orange button right. */ html:not(#ts):not(#ts) .ts-bar { display: none; } /* ---------- Below 1024 ---------- */ @media (max-width: 1023px) { html:not(#ts):not(#ts) .ts-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } html:not(#ts):not(#ts) .ts-facts { grid-template-columns: 1fr; } html:not(#ts):not(#ts) .ts-review { flex-basis: 85%; } html:not(#ts):not(#ts) .ts-pop { width: 640px; } } /* ---------- Phone, below 768 ---------- */ @media (max-width: 767px) { html:not(#ts):not(#ts) .ts-section > h2, html:not(#ts):not(#ts) .ts-section--tight > h2 { font-size: var(--ts-text-h4); } html:not(#ts):not(#ts) .ts-cards { grid-template-columns: 1fr; gap: var(--ts-space-4-5); } html:not(#ts):not(#ts) .ts-search { grid-template-columns: 1fr; padding: 0; border-radius: var(--ts-radius-lg); box-shadow: none; } html:not(#ts):not(#ts) .ts-search__part { min-height: 56px; padding: var(--ts-space-3) var(--ts-space-4); border-right: 0; border-bottom: 1px solid var(--ts-ink-200); } html:not(#ts):not(#ts) .ts-search__part:nth-of-type(3) { border-bottom: 0; } /* One line a row, as Vrbo's mobile site draws it (Ian, 2026-10-05): the icon, then the value, gray while it is empty, and no small label above it. An empty dates row says "Dates", its label, where a laptop says "Add dates". Rows 56 tall, Vrbo's height measured against its 48px Search button. The 68 used before was read from a screen recording as if Ian's iPhone were 390 wide; it draws pages 320 wide (Display Zoom), so every figure was 22% large. */ html:not(#ts):not(#ts) .ts-search__part small { display: none; } html:not(#ts):not(#ts) .ts-search__part:nth-of-type(2):has(b.is-empty) small { display: block; font-size: var(--ts-text-body); font-weight: 500; color: var(--ts-ink-700); line-height: 1.3; } html:not(#ts):not(#ts) .ts-search__part:nth-of-type(2):has(b.is-empty) b { display: none; } html:not(#ts):not(#ts) .ts-search .ts-btn { margin: var(--ts-space-1) var(--ts-space-3) var(--ts-space-3); } /* The box sits in the page under the title. Its button and fine print move to the bar. */ html:not(#ts):not(#ts) .ts-book { padding: var(--ts-space-4-5); box-shadow: none; } html:not(#ts):not(#ts) .ts-book--pinned { position: static; } html:not(#ts):not(#ts) .ts-book--pinned > .ts-btn--accent, html:not(#ts):not(#ts) .ts-book--pinned > .ts-fine { display: none; } /* 24 read too big on a phone (Ian, 2026-10-04). 20 there, the size of the price on a resort card. */ html:not(#ts):not(#ts) .ts-book__from { font-size: var(--ts-text-h4); } html:not(#ts):not(#ts) .ts-stay { min-height: 52px; } /* a text link is still a 44px target under a thumb */ html:not(#ts):not(#ts) .ts-link { display: inline-flex; align-items: center; min-height: 44px; } /* The calendar is a full sheet: months stacked and scrolling, footer held at the bottom. */ html:not(#ts):not(#ts) .ts-pop { width: auto; max-width: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; } html:not(#ts):not(#ts) .ts-pop--sheet { position: fixed; inset: 0; z-index: 90080; } html:not(#ts):not(#ts) .ts-pop__head { position: relative; align-content: center; min-height: 68px; margin: 0; padding: calc(8px + env(safe-area-inset-top, 0px)) var(--ts-space-4) var(--ts-space-3) var(--ts-space-9); border-bottom: 1px solid var(--ts-ink-200); } /* z-index: the header below is positioned too and would cover the X, so it could not be pressed */ html:not(#ts):not(#ts) .ts-pop__close { display: grid; place-items: center; position: absolute; z-index: 2; left: 8px; top: calc(12px + env(safe-area-inset-top, 0px)); width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ts-ink-900); cursor: pointer; } html:not(#ts):not(#ts) .ts-pop__body { flex: 1; overflow-y: auto; padding: var(--ts-space-2) var(--ts-space-4) var(--ts-space-5); } html:not(#ts):not(#ts) .ts-pop__foot { margin: 0; padding: var(--ts-space-3) var(--ts-space-4) calc(12px + env(safe-area-inset-bottom, 0px)); } html:not(#ts):not(#ts) .ts-cal__nav { display: none; } html:not(#ts):not(#ts) .ts-cal__months { grid-template-columns: 1fr; gap: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-cal__title { text-align: left; } /* Vrbo's phone calendar: a 14px date over an 11px price */ html:not(#ts):not(#ts) .ts-day b { font-size: var(--ts-text-body-sm); } html:not(#ts):not(#ts) .ts-day small { font-size: var(--ts-text-micro); } /* on the narrowest phones the sheet gives up side padding so each day stays 44px wide */ @media (max-width: 359px) { html:not(#ts):not(#ts) .ts-pop__body { padding-inline: var(--ts-space-2); } } /* At 320 (Ian's iPhone, Display Zoom) 8 a side left days 43 wide; 4 a side keeps them at 44 (2026-10-05). */ @media (max-width: 339px) { html:not(#ts):not(#ts) .ts-pop__body { padding-inline: var(--ts-space-1); } } html:not(#ts):not(#ts) .ts-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90050; display: flex; align-items: center; justify-content: space-between; gap: var(--ts-space-3); padding: var(--ts-space-3) var(--ts-space-4) calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--ts-canvas-raised); border-top: 1px solid var(--ts-ink-200); min-height: calc(80px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; /* Vrbo 86, Airbnb 97 (F-168) */ } html:not(#ts):not(#ts) .ts-bar b { display: block; font-size: var(--ts-text-body-lg); font-weight: 700; color: var(--ts-ink-900); line-height: 1.25; } html:not(#ts):not(#ts) .ts-bar b small { font-size: var(--ts-text-body-sm); font-weight: 500; color: var(--ts-ink-700); } html:not(#ts):not(#ts) .ts-bar span { display: block; font-size: var(--ts-text-body-sm); font-weight: 500; color: var(--ts-ink-700); line-height: 1.3; } html:not(#ts):not(#ts) .ts-bar .ts-btn { flex: none; padding: 0 var(--ts-space-4-5); } html:not(#ts):not(#ts) .ts-bar > span:first-child { flex: 1; min-width: 0; } /* Narrow phones, Ian's at 320 among them (2026-10-05): the price keeps to one line, the dates may take two, and the button gives up some side room. At 320 "From $325 a night" had broken over four lines (F-54). */ @media (max-width: 359px) { html:not(#ts):not(#ts) .ts-bar b { font-size: var(--ts-text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html:not(#ts):not(#ts) .ts-bar span { font-size: var(--ts-text-caption); } html:not(#ts):not(#ts) .ts-bar .ts-btn { padding: 0 var(--ts-space-3); } } } @media (prefers-reduced-motion: reduce) { html:not(#ts):not(#ts) .ts-btn, html:not(#ts):not(#ts) .ts-icon-btn, html:not(#ts):not(#ts) .ts-field input, html:not(#ts):not(#ts) .ts-field select, html:not(#ts):not(#ts) .ts-field textarea, html:not(#ts):not(#ts) .ts-card { transition-duration: 0.01ms; } html:not(#ts):not(#ts) .ts-card:hover { transform: none; } } /* ==================================================================================================== Page parts What a page is built from around the elements above: the header, the hero, the home page sections, the results page, the resort page shell, the panels the search bar opens, "Ask Ian", the footer. Drawn in the booking prototype (Projects/Travelscowt-Website/prototypes/booking) and approved by Ian Archer on 2026-10-04 in phases 6 and 6b of the booking journey plan, then moved here unchanged. Each part is shown on element-sheet.html. Put the class ts-page on the wrapper of a page built from these parts. It gives them the base they were drawn on: border-box sizing, paragraphs without margins, block images, buttons in the page font. The base has no weight of its own, so any class rule still wins over it. ==================================================================================================== */ html:not(#ts):not(#ts) :where(.ts-page) [hidden] { display: none !important; } html:not(#ts):not(#ts) .ts-page, html:not(#ts):not(#ts) :where(.ts-page) *, html:not(#ts):not(#ts) :where(.ts-page) *::before, html:not(#ts):not(#ts) :where(.ts-page) *::after { box-sizing: border-box; } html:not(#ts):not(#ts) :where(.ts-page) img { display: block; max-width: 100%; } html:not(#ts):not(#ts) :where(.ts-page) p { margin: 0; } html:not(#ts):not(#ts) :where(.ts-page) button { font: inherit; color: inherit; } /* ---- site header ---- */ html:not(#ts):not(#ts) .ts-site { background: var(--ts-canvas-raised); border-bottom: 1px solid var(--ts-ink-200); } html:not(#ts):not(#ts) .ts-site .ts-wrap { display: flex; align-items: center; gap: var(--ts-space-6); height: 80px; } html:not(#ts):not(#ts) .ts-site__logo { padding: 0; border: 0; background: none; cursor: pointer; } html:not(#ts):not(#ts) .ts-site__logo img { width: 180px; height: auto; } html:not(#ts):not(#ts) .ts-site nav { display: flex; gap: var(--ts-space-6); margin-left: auto; } html:not(#ts):not(#ts) .ts-site nav button { padding: 0; border: 0; background: none; font-weight: 600; color: var(--ts-ink-900); cursor: pointer; } html:not(#ts):not(#ts) .ts-site nav button:hover { color: var(--ts-brand-600); } html:not(#ts):not(#ts) .ts-site__menu { display: none; margin-left: auto; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ts-ink-900); cursor: pointer; place-items: center; } /* ---- home ---- The live homepage, kept (Ian, 2026-10-04: "that's the best one"): the Crystal Shores photo edge to edge with the same dark wash live puts on it, the header laid over it in white, the headline, one line under it, the search bar. What changed from live: Figtree, sentence case at every width, the one search component, and no second orange button in the header. Sizes are live's own: 68px on a laptop (the display token), 36px centered on a phone. */ html:not(#ts):not(#ts) .ts-site.is-over { position: relative; z-index: 5; background: none; border-bottom-color: transparent; } html:not(#ts):not(#ts) .ts-site__logo img + img, html:not(#ts):not(#ts) .ts-site.is-over .ts-site__logo img { display: none; } html:not(#ts):not(#ts) .ts-site.is-over .ts-site__logo img + img { display: block; } html:not(#ts):not(#ts) .ts-site.is-over nav button, html:not(#ts):not(#ts) .ts-site.is-over .ts-site__menu { color: var(--ts-canvas-raised); } html:not(#ts):not(#ts) .ts-site.is-over nav button:hover { color: var(--ts-brand-100); } /* the photo fills the first screen and touches its bottom edge, as on live (Ian, 2026-10-04). The -81px lays it under the 80px header and its border */ html:not(#ts):not(#ts) .ts-hero { position: relative; display: flex; align-items: center; min-height: max(560px, 100vh); margin-top: -81px; padding-block: 128px var(--ts-space-9); } html:not(#ts):not(#ts) .ts-hero__bg { position: absolute; inset: 0; } html:not(#ts):not(#ts) .ts-hero__bg img { width: 100%; height: 100%; object-fit: cover; } /* The wash sits on the photo itself and the words carry no z-index. A z-index on the words made a layer of its own, which trapped the search sheet under the header on a phone: the logo showed through "Where to" (Ian, 2026-10-04). */ html:not(#ts):not(#ts) .ts-hero__bg::after { content: ""; position: absolute; inset: 0; background: var(--ts-photo-wash); opacity: 0.5; } html:not(#ts):not(#ts) .ts-hero__in { position: relative; width: 100%; } html:not(#ts):not(#ts) .ts-hero h1 { font-size: 68px; font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; color: var(--ts-canvas-raised); } html:not(#ts):not(#ts) .ts-hero__sub { margin-top: var(--ts-space-3); font-weight: 500; color: var(--ts-brand-50); } html:not(#ts):not(#ts) .ts-hero .ts-mount { margin-top: var(--ts-space-6); } /* ---- home, under the hero (phase 6b) ---- The live homepage's sections in live's order, each in the system's elements. One alignment: every heading starts at the left edge of the 1200px wrap. Two things carry a photo with words on it, the hero and the state tiles, and they share one flat wash. One illustration, the scout, in a section of its own. Two orange buttons, never on one screen together: Search in the hero and Subscribe in the band above the footer (Ian, 2026-10-04). */ html:not(#ts):not(#ts) .ts-home .ts-section h2 { font-size: var(--ts-text-h3); margin-bottom: 0; } /* One rhythm down the page. The space above every section is the same, 80 on a laptop and 56 on a phone, measured against Vrbo's mobile site on 2026-10-05 (Ian: "how they're spaced out is perfect, that's what I want to replicate"). The first section under the hero sits closer, 48 and 16, so the page goes straight into it as Vrbo's does. A band has the section space inside it, top and bottom. Two bands that touch have nothing between them. A heading sits 24 above its content at every width. Before: 64 and 40 for every section, the first included (2026-10-04, "make sure spacing is unified"), and before that each section carried its own padding, so two in a row sat 96 apart. */ html:not(#ts):not(#ts) .ts-home { --ts-section-gap: var(--ts-space-10); --ts-section-first: var(--ts-space-8); } html:not(#ts):not(#ts) .ts-home > .ts-section, html:not(#ts):not(#ts) .ts-faq .ts-faq__in { padding-block: 0; } html:not(#ts):not(#ts) .ts-home > section + section { margin-top: var(--ts-section-gap); } html:not(#ts):not(#ts) .ts-home > .ts-hero + section { margin-top: var(--ts-section-first); } html:not(#ts):not(#ts) .ts-home > .ts-faq { padding-block: var(--ts-section-gap); } html:not(#ts):not(#ts) .ts-home > .ts-signup { margin-top: 0; } html:not(#ts):not(#ts) .ts-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ts-space-4); margin-bottom: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-head > span { display: flex; gap: var(--ts-space-2); } /* direct from owners: words beside the one illustration */ html:not(#ts):not(#ts) .ts-owners { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--ts-space-9); } html:not(#ts):not(#ts) .ts-home .ts-owners h2 { font-size: var(--ts-text-h2); } html:not(#ts):not(#ts) .ts-owners p { margin-block: var(--ts-space-4) var(--ts-space-5); max-width: 52ch; } html:not(#ts):not(#ts) .ts-owners__art { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--ts-radius-lg); } /* why book: six reasons. They are not links, so they are not cards */ html:not(#ts):not(#ts) .ts-reasons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ts-space-6) var(--ts-space-8); } html:not(#ts):not(#ts) .ts-reasons li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--ts-space-4); align-items: start; font-weight: 600; color: var(--ts-ink-900); line-height: 1.4; } html:not(#ts):not(#ts) .ts-reasons svg { color: var(--ts-brand-600); } /* explore: six state tiles. The whole tile is the link. On hover it lifts exactly as a resort card does, scale 1.02 and shadow-md over 240ms: one hover for every card on the site (Ian, 2026-10-04). Live zooms the photo to 1.2 instead. */ html:not(#ts):not(#ts) .ts-states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-state { position: relative; z-index: 0; display: block; overflow: hidden; aspect-ratio: 3 / 2; padding: 0; border: 0; border-radius: var(--ts-radius-lg); background: var(--ts-brand-900); text-align: left; cursor: pointer; transition: transform var(--ts-duration-normal) var(--ts-ease-standard), box-shadow var(--ts-duration-normal) var(--ts-ease-standard), z-index 0s linear var(--ts-duration-normal); } html:not(#ts):not(#ts) .ts-state img { width: 100%; height: 100%; object-fit: cover; } html:not(#ts):not(#ts) .ts-state::after { content: ""; position: absolute; inset: 0; background: var(--ts-photo-wash); } html:not(#ts):not(#ts) .ts-state b { position: absolute; z-index: 1; left: var(--ts-space-4-5); bottom: var(--ts-space-4); font-size: var(--ts-text-h3); font-weight: 600; line-height: 1.2; color: var(--ts-canvas-raised); } @media (hover: hover) { html:not(#ts):not(#ts) .ts-state:hover { z-index: 3; transform: scale(1.02); box-shadow: var(--ts-shadow-md); transition-delay: 0s; } } /* reviews: Google reviews, drawn the way the Google review widget on live draws them (Ian, 2026-10-04: "like actually from Google"). Initial in a circle, name with the verified tick, how long ago "on Google", five gold stars, the words. The blue, red, yellow and green here are Google's own colors, not ours, and are used nowhere else. */ html:not(#ts):not(#ts) .ts-said .ts-review { flex-basis: calc((100% - 3 * var(--ts-space-4)) / 4); display: flex; flex-direction: column; align-items: flex-start; gap: var(--ts-space-3); } html:not(#ts):not(#ts) .ts-greview__who { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: var(--ts-space-3); width: 100%; } html:not(#ts):not(#ts) .ts-greview__av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #AB47BC; color: var(--ts-canvas-raised); font-size: var(--ts-text-body-lg); font-weight: 500; line-height: 1; } html:not(#ts):not(#ts) .ts-greview__av.is-c1 { background: #00897B; } html:not(#ts):not(#ts) .ts-greview__av.is-c2 { background: #8D6E63; } html:not(#ts):not(#ts) .ts-greview__av.is-c3 { background: #EC407A; } html:not(#ts):not(#ts) .ts-greview__av.is-c4 { background: #5C6BC0; } html:not(#ts):not(#ts) .ts-greview__av.is-c5 { background: #455A64; } html:not(#ts):not(#ts) .ts-greview__who b { display: flex; align-items: center; gap: var(--ts-space-1); font-weight: 600; line-height: 1.3; } html:not(#ts):not(#ts) .ts-greview__who b span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } html:not(#ts):not(#ts) .ts-greview__who b svg { flex: none; color: #4285F4; } html:not(#ts):not(#ts) .ts-greview__who small { display: block; font-size: var(--ts-text-caption); font-weight: 500; color: var(--ts-ink-700); line-height: 1.4; white-space: nowrap; } html:not(#ts):not(#ts) .ts-google { font-size: var(--ts-text-body); font-weight: 500; letter-spacing: -0.02em; } html:not(#ts):not(#ts) .ts-google i { font-style: normal; color: #4285F4; } html:not(#ts):not(#ts) .ts-google i:nth-child(2), html:not(#ts):not(#ts) .ts-google i:nth-child(6) { color: #EA4335; } html:not(#ts):not(#ts) .ts-google i:nth-child(3) { color: #FBBC05; } html:not(#ts):not(#ts) .ts-google i:nth-child(5) { color: #34A853; } html:not(#ts):not(#ts) .ts-greview__stars { font-size: var(--ts-text-h4); line-height: 1; letter-spacing: 1px; color: #FBBC04; } html:not(#ts):not(#ts) .ts-said .ts-review p { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; color: var(--ts-ink-900); } html:not(#ts):not(#ts) .ts-said .ts-review.is-open p { display: block; } html:not(#ts):not(#ts) .ts-said .ts-review .ts-link { font-size: var(--ts-text-body-sm); } html:not(#ts):not(#ts) .ts-said__all { margin-top: var(--ts-space-4); } /* 16 under the reviews, the one button under them, as Vrbo's "See all 4 verified reviews" (Ian, 2026-10-06: "do it how VRBO does it"). Was 32 under Elfsight's "Load More", which the plugin now hides where this button follows it */ /* questions: a pale teal band, the heading beside the list */ html:not(#ts):not(#ts) .ts-faq { background: var(--ts-brand-50); } html:not(#ts):not(#ts) .ts-faq__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--ts-space-9); align-items: start; } html:not(#ts):not(#ts) .ts-faq__in > div:first-child p { margin-top: var(--ts-space-3); font-weight: 500; } html:not(#ts):not(#ts) .ts-qs details { border-bottom: 1px solid var(--ts-brand-100); } html:not(#ts):not(#ts) .ts-qs details:first-child { border-top: 1px solid var(--ts-brand-100); } html:not(#ts):not(#ts) .ts-qs summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ts-space-4); min-height: 56px; padding-block: var(--ts-space-3); font-weight: 600; color: var(--ts-ink-900); line-height: 1.4; cursor: pointer; list-style: none; } html:not(#ts):not(#ts) .ts-qs summary::-webkit-details-marker { display: none; } html:not(#ts):not(#ts) .ts-qs summary svg { flex: none; color: var(--ts-brand-600); transition: transform var(--ts-duration-fast) var(--ts-ease-standard); } html:not(#ts):not(#ts) .ts-qs details[open] summary svg { transform: rotate(45deg); } html:not(#ts):not(#ts) .ts-qs details p { max-width: 65ch; padding-bottom: var(--ts-space-2); } html:not(#ts):not(#ts) .ts-qs details p:last-child { padding-bottom: var(--ts-space-4-5); } html:not(#ts):not(#ts) .ts-qs details a { color: var(--ts-brand-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* a link in an answer, as on Renters (phase 10b) */ html:not(#ts):not(#ts) .ts-faq__more { margin-top: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-faq__closing { margin-top: var(--ts-space-6); max-width: 65ch; font-size: var(--ts-text-body-sm); font-weight: 500; color: var(--ts-ink-700); } /* sign-up band and footer */ html:not(#ts):not(#ts) .ts-signup { background: var(--ts-brand-900); color: var(--ts-canvas-raised); } /* Stacked and centered at every width, as a Mailchimp band (Ian, 2026-10-08: "Stack: 1. Get first dibs on timeshare offers and deals 2. email address and Subscribe button"), then the field and Subscribe 24 under the heading, side by side from a tablet up. Sized as Airbnb and Vrbo size a section (Ian, the same night: 32 was too big, 20 "too small-looking", "do it like how Airbnb or VRBO would do it"): the site's section heading, 24 (20 on a phone, inside Airbnb's 22 to Vrbo's 26), and the section's own 48 above and below (32 on a phone). It was one row, the heading left and the form right. */ html:not(#ts):not(#ts) .ts-signup .ts-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--ts-space-5); padding-block: var(--ts-space-8); text-align: center; } html:not(#ts):not(#ts) .ts-signup h2 { font-size: var(--ts-text-h3); color: var(--ts-canvas-raised); text-wrap: balance; } html:not(#ts):not(#ts) .ts-signup form { display: flex; align-items: flex-end; gap: var(--ts-space-3); text-align: left; } html:not(#ts):not(#ts) .ts-signup .ts-field { width: 360px; } html:not(#ts):not(#ts) .ts-signup .ts-btn { height: 56px; } /* Subscribe as tall as the email field beside it, 56 (F-194, Ian's pick A, 2026-10-06) */ html:not(#ts):not(#ts) .ts-signup .ts-field > label { color: var(--ts-canvas-raised); } html:not(#ts):not(#ts) .ts-signup .ts-field__hint { color: var(--ts-brand-100); } html:not(#ts):not(#ts) .ts-signup .ts-field--error .ts-field__hint { color: var(--ts-canvas-raised); } /* The footer, redrawn with Ian on 2026-10-07 (prototypes/header-footer in the website project): on ink-50 so it reads apart from the page, "Top resorts" in three columns, the logo at 180 with the blurb, two labelled link columns, the disclaimer and the legal row. On a phone "Top resorts" is one 56-high row that opens. Words are the site's own. .ts-footer is the full-width band; .ts-foot inside it is the 1200 column. */ html:not(#ts):not(#ts) .ts-footer { background: var(--ts-ink-50); color: var(--ts-ink-700); } html:not(#ts):not(#ts) .ts-foot { padding-block: 0; font-size: var(--ts-text-body-sm); line-height: 1.6; color: var(--ts-ink-700); } html:not(#ts):not(#ts) .ts-foot h2 { margin: 0 0 var(--ts-space-3); font-size: var(--ts-text-body-sm); font-weight: 600; line-height: 18px; color: var(--ts-ink-900); } html:not(#ts):not(#ts) .ts-foot :is(a, button) { padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--ts-ink-700); text-decoration: none; transition: color var(--ts-duration-fast) var(--ts-ease-standard), font-weight var(--ts-duration-normal) var(--ts-ease-standard); } /* Hover turns a link bold, 600 in 240 ms, in ink-900, with no teal and no underline, as the header's words (Ian, 2026-10-08: "it actually becomes bold, but it's very smooth"). Figtree loads as one 300 to 900 file, so the weight moves through the steps between. Each link holds the width of its bold self, from a hidden bold copy of its own words (data-ts-label, set by the site's script), so the links beside it never move. */ html:not(#ts):not(#ts) .ts-foot :is(a, button):hover { color: var(--ts-ink-900); font-weight: 600; } @media (hover: hover) { html:not(#ts):not(#ts) .ts-foot :is(.ts-foot__top, .ts-foot__main li, .ts-foot__legal) a[data-ts-label] { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: fit-content; } html:not(#ts):not(#ts) .ts-foot :is(.ts-foot__top, .ts-foot__main li, .ts-foot__legal) a[data-ts-label]::before { content: attr(data-ts-label); content: attr(data-ts-label) / ""; display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; pointer-events: none; user-select: none; } } html:not(#ts):not(#ts) .ts-foot__topbox { padding-block: var(--ts-space-8) var(--ts-space-7); border-bottom: 1px solid var(--ts-ink-200); } html:not(#ts):not(#ts) .ts-foot__topbox summary { display: block; list-style: none; pointer-events: none; cursor: default; } /* a heading on a laptop; the row that opens is the phone's */ html:not(#ts):not(#ts) .ts-foot__topbox summary::-webkit-details-marker { display: none; } html:not(#ts):not(#ts) .ts-foot__topbox summary svg { display: none; } html:not(#ts):not(#ts) .ts-foot__top { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--ts-space-6); } html:not(#ts):not(#ts) .ts-foot__top li, html:not(#ts):not(#ts) .ts-foot__main li { padding: 0; } html:not(#ts):not(#ts) .ts-foot__top :is(a, button), html:not(#ts):not(#ts) .ts-foot__main li :is(a, button) { display: block; padding-block: 7px; line-height: 18px; } /* 32 a link, as Airbnb's 36 and Vrbo's 28 */ html:not(#ts):not(#ts) .ts-foot__more { display: none; } html:not(#ts):not(#ts) .ts-foot__main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--ts-space-8); padding-block: var(--ts-space-7); } html:not(#ts):not(#ts) .ts-foot__main img { display: block; width: 180px; height: auto; } html:not(#ts):not(#ts) .ts-foot__main p { margin: var(--ts-space-4) 0 0; max-width: 40ch; } html:not(#ts):not(#ts) .ts-foot__main ul { list-style: none; margin: 0; padding: 0; } html:not(#ts):not(#ts) .ts-foot__not { margin: 0; padding-block: var(--ts-space-5) var(--ts-space-4); border-top: 1px solid var(--ts-ink-200); font-size: var(--ts-text-caption); font-weight: 500; color: var(--ts-ink-700); line-height: 1.6; } /* small print above the copyright row, as KOALA sets its own (Ian, 2026-10-04) */ html:not(#ts):not(#ts) .ts-foot__not :is(b, strong) { font-weight: 600; color: var(--ts-ink-900); } html:not(#ts):not(#ts) .ts-foot__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ts-space-2) var(--ts-space-5); padding-bottom: var(--ts-space-6); font-size: var(--ts-text-body-sm); color: var(--ts-ink-700); } html:not(#ts):not(#ts) .ts-foot__legal > span { margin-right: auto; } /* The request form and "Booking request sent": the disclaimer and the legal row alone, nothing that leads away from the form (Ian, 2026-10-07, F-205; web-booking.md step 6; prototypes/header-footer/request-form-logo-only.html). 24 above, the row's own 32 under it (24 on a phone). */ html:not(#ts):not(#ts) .ts-foot--slim { padding-top: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-foot--slim .ts-foot__not { padding-top: 0; border-top: 0; } /* ---- search bar panels ---- */ html:not(#ts):not(#ts) .ts-searchbox { position: relative; } html:not(#ts):not(#ts) .ts-searchbox .ts-search__part b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html:not(#ts):not(#ts) .ts-searchbox .ts-search__part > span:last-child { min-width: 0; } html:not(#ts):not(#ts) .ts-searchbox .ts-search__part b.is-empty { font-weight: 500; color: var(--ts-ink-700); } html:not(#ts):not(#ts) .ts-opts { list-style: none; margin: var(--ts-space-3) 0 0; padding: 0; } html:not(#ts):not(#ts) .ts-opt { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: var(--ts-space-3); width: 100%; min-height: 56px; padding: var(--ts-space-2); border: 0; border-radius: var(--ts-radius-md); background: none; text-align: left; cursor: pointer; } html:not(#ts):not(#ts) .ts-opt:focus-visible { background: var(--ts-brand-50); } @media (hover: hover) { html:not(#ts):not(#ts) .ts-opt:hover { background: var(--ts-brand-50); } } /* a tap must not leave a row lit on a phone */ html:not(#ts):not(#ts) .ts-opt > span:first-child { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--ts-radius-md); background: var(--ts-ink-50); color: var(--ts-brand-600); } html:not(#ts):not(#ts) .ts-opt b { display: block; font-weight: 600; color: var(--ts-ink-900); line-height: 1.3; } html:not(#ts):not(#ts) .ts-opt small { display: block; font-size: var(--ts-text-body-sm); font-weight: 500; color: var(--ts-ink-700); line-height: 1.4; } html:not(#ts):not(#ts) .ts-opts__none { padding: var(--ts-space-2) var(--ts-space-2) var(--ts-space-3); } html:not(#ts):not(#ts) .ts-opts__none b { display: block; font-weight: 600; color: var(--ts-ink-900); } html:not(#ts):not(#ts) .ts-opts__none span { font-size: var(--ts-text-body-sm); font-weight: 500; color: var(--ts-ink-700); } html:not(#ts):not(#ts) .ts-pop--guests .ts-guests { margin-top: 0; } /* ---- calendar parts the stylesheet does not have yet ---- */ html:not(#ts):not(#ts) .ts-month { position: relative; } html:not(#ts):not(#ts) .ts-day.is-off b, html:not(#ts):not(#ts) .ts-day.is-off small { color: var(--ts-ink-400); } html:not(#ts):not(#ts) .ts-cal-ask { position: absolute; inset: 128px var(--ts-space-2) auto; padding: var(--ts-space-4); border: 1px solid var(--ts-ink-200); border-radius: var(--ts-radius-md); background: var(--ts-canvas-raised); box-shadow: var(--ts-shadow-md); text-align: center; font-size-adjust: var(--ts-font-web-adjust); } html:not(#ts):not(#ts) .ts-cal-ask p { font-size: var(--ts-text-body-sm); font-weight: 500; color: var(--ts-ink-900); } html:not(#ts):not(#ts) .ts-cal-ask .ts-link { min-height: 44px; } /* ---- results ---- */ html:not(#ts):not(#ts) .ts-results { padding-block: var(--ts-space-5) var(--ts-space-9); } html:not(#ts):not(#ts) .ts-rhead { margin-block: var(--ts-space-6) var(--ts-space-4-5); } html:not(#ts):not(#ts) .ts-rhead h1 { font-size: var(--ts-text-h4); } /* ---- resort page ---- */ html:not(#ts):not(#ts) .ts-back { display: inline-flex; align-items: center; gap: var(--ts-space-1); min-height: 44px; margin-block: var(--ts-space-2) var(--ts-space-1); padding: 0; border: 0; background: none; font-size: var(--ts-text-body-sm); font-weight: 600; color: var(--ts-ink-700); cursor: pointer; } html:not(#ts):not(#ts) .ts-back:hover { color: var(--ts-brand-600); } html:not(#ts):not(#ts) .ts-gal { position: relative; } html:not(#ts):not(#ts) .ts-gal__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--ts-space-2); height: 440px; overflow: hidden; border-radius: var(--ts-radius-lg); } html:not(#ts):not(#ts) .ts-gal__grid img { width: 100%; height: 100%; object-fit: cover; } html:not(#ts):not(#ts) .ts-gal__grid img:first-child { grid-row: 1 / 3; } html:not(#ts):not(#ts) .ts-gal__grid.is-one { grid-template-columns: 1fr; grid-template-rows: 1fr; } html:not(#ts):not(#ts) .ts-gal__all { position: absolute; right: var(--ts-space-4); bottom: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-gal__count { display: none; } /* every photo is in the strip for the phone's swipe; a laptop's grid keeps the first five, or the one (0.3.72) */ @media (min-width: 768px) { html:not(#ts):not(#ts) .ts-gal__grid img:nth-child(n+6), html:not(#ts):not(#ts) .ts-gal__grid.is-one img:nth-child(n+2) { display: none; } } html:not(#ts):not(#ts) .ts-title { padding-top: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-title h1 { font-size: var(--ts-text-h2); } html:not(#ts):not(#ts) .ts-title__place { margin-top: var(--ts-space-1); font-size: var(--ts-text-body-lg); font-weight: 500; } html:not(#ts):not(#ts) .ts-title__facts { margin-top: var(--ts-space-2); font-weight: 500; color: var(--ts-ink-900); } /* Phase 11b (2026-10-05): the title's three lines are the grid's first three rows, and the booking box starts on the second, so its "From $850 a night" sits on the line of the resort's place ("Marco Island, Florida"), not on its name (Ian's recording, 2026-10-05). A name that wraps to two lines takes the box down with it. The -23: the place's baseline is 4 + 20.7 under the row's top (margin, then 18px Figtree on a 28.8 line), the price's is 1 + 24 + 22.8 under the box's top (border, padding, 24px on a 28.8 line), so the box starts 23 above the row. */ html:not(#ts):not(#ts) .ts-cols { display: grid; grid-template-columns: minmax(0, 1fr) 392px; grid-template-rows: auto auto auto 1fr; gap: 0 var(--ts-space-9); align-items: start; padding-bottom: var(--ts-space-9); } html:not(#ts):not(#ts) .ts-cols .ts-title { display: contents; } html:not(#ts):not(#ts) .ts-cols .ts-title h1 { grid-column: 1; grid-row: 1; padding-top: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-cols .ts-title__place { grid-column: 1; grid-row: 2; } html:not(#ts):not(#ts) .ts-cols .ts-title__facts { grid-column: 1; grid-row: 3; } html:not(#ts):not(#ts) .ts-main { min-width: 0; grid-column: 1; grid-row: 4; } html:not(#ts):not(#ts) .ts-cols .ts-book { grid-column: 2; grid-row: 2 / 5; margin-top: -23px; } html:not(#ts):not(#ts) .ts-dateswrap { position: relative; } html:not(#ts):not(#ts) .ts-dateswrap .ts-pop { position: absolute; right: 0; top: calc(100% + var(--ts-space-2)); z-index: 40; } html:not(#ts):not(#ts) .ts-near { list-style: none; margin: var(--ts-space-4) 0 0; padding: 0; } html:not(#ts):not(#ts) .ts-near li { display: flex; justify-content: space-between; gap: var(--ts-space-4); padding-block: var(--ts-space-3); border-bottom: 1px solid var(--ts-ink-100); } html:not(#ts):not(#ts) .ts-near li:last-child { border-bottom: 0; padding-bottom: 0; } html:not(#ts):not(#ts) .ts-near span { font-weight: 500; white-space: nowrap; } html:not(#ts):not(#ts) .ts-revhead { display: flex; align-items: center; justify-content: space-between; gap: var(--ts-space-4); margin-bottom: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-revhead h2 { font-size: var(--ts-text-h4); } html:not(#ts):not(#ts) .ts-revhead span { display: flex; gap: var(--ts-space-2); } html:not(#ts):not(#ts) .ts-other { display: block; margin: var(--ts-space-4) auto 0; } html:not(#ts):not(#ts) .ts-facts li > span:only-child { display: block; } /* Phase 9 (2026-10-05): the resort's own amenities in two groups, its own questions, and a map link. Lists reuse .ts-facts and .ts-qs; these rules only space the group titles and the "Show all" buttons under a list. */ html:not(#ts):not(#ts) .ts-amen h3 { margin: var(--ts-space-6) 0 var(--ts-space-3); font-size: var(--ts-text-body); font-weight: 600; color: var(--ts-ink-900); } html:not(#ts):not(#ts) .ts-amen h2 + h3 { margin-top: 0; } html:not(#ts):not(#ts) .ts-more { margin-top: var(--ts-space-3); } html:not(#ts):not(#ts) .ts-more::after, html:not(#ts):not(#ts) .ts-faq__more::after { content: " \203A"; } /* a right chevron after every Show more, the link's own size and color (Ian, 2026-10-05) */ html:not(#ts):not(#ts) .ts-map { margin-top: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-map__frame { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 420px; border: 0; border-radius: var(--ts-radius-lg); background: var(--ts-ink-50); } html:not(#ts):not(#ts) .ts-map .ts-link { display: inline-flex; margin-top: var(--ts-space-3); } html:not(#ts):not(#ts) .ts-title__facts span { white-space: nowrap; } /* a fact never breaks on its dot at 320 (F-162) */ /* A field only a script fills in. Off screen, not display:none, so a script still finds it. */ html:not(#ts):not(#ts) .ts-ask__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---- ask Ian and photos: panels over the page ---- */ html:not(#ts):not(#ts) .ts-scrim { position: fixed; inset: 0; z-index: 90070; background: var(--ts-scrim); } html:not(#ts):not(#ts) .ts-pop--ask { position: fixed; left: 50%; top: 50%; z-index: 90080; width: 520px; max-height: calc(100% - 48px); overflow-y: auto; transform: translate(-50%, -50%); } html:not(#ts):not(#ts) .ts-pop--ask .ts-pop__head { min-height: 0; margin-bottom: var(--ts-space-4); padding-right: var(--ts-space-8); } html:not(#ts):not(#ts) .ts-ask__x { position: absolute; right: var(--ts-space-4); top: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-ask { display: grid; gap: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-ask__stay { padding: var(--ts-space-3) var(--ts-space-4); border-radius: var(--ts-radius-md); background: var(--ts-brand-50); font-weight: 500; color: var(--ts-ink-900); } html:not(#ts):not(#ts) .ts-ask__stay b { font-weight: 600; } html:not(#ts):not(#ts) .ts-ask__two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ts-space-3); } html:not(#ts):not(#ts) .ts-ask__sent { display: grid; gap: var(--ts-space-4); justify-items: start; } html:not(#ts):not(#ts) .ts-photos { position: fixed; inset: 0; z-index: 90085; overflow-y: auto; background: var(--ts-canvas); } html:not(#ts):not(#ts) .ts-photos__bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--ts-space-3); padding: calc(var(--ts-space-3) + env(safe-area-inset-top, 0px)) var(--ts-gutter) var(--ts-space-3); background: var(--ts-canvas); border-bottom: 1px solid var(--ts-ink-200); } html:not(#ts):not(#ts) .ts-photos__bar b { font-weight: 600; color: var(--ts-ink-900); } html:not(#ts):not(#ts) .ts-photos__list { display: grid; gap: var(--ts-space-2); max-width: 880px; margin: 0 auto; padding: var(--ts-space-5) var(--ts-gutter) var(--ts-space-9); } html:not(#ts):not(#ts) .ts-photos__list img { width: 100%; border-radius: var(--ts-radius-md); } /* ---- laptop: the search bar's panels hang under the bar ---- */ @media (min-width: 768px) { html:not(#ts):not(#ts) .ts-searchbox > .ts-pop { position: absolute; top: calc(100% + var(--ts-space-2)); z-index: 40; } html:not(#ts):not(#ts) .ts-pop--where { left: 0; width: 440px; padding: var(--ts-space-4); } /* the box stops at the bottom of the screen and its list scrolls, the field stays put (Ian, 2026-10-09) */ html:not(#ts):not(#ts) .ts-pop--where { display: flex; flex-direction: column; } html:not(#ts):not(#ts) .ts-pop--where .ts-pop__body { display: flex; flex-direction: column; min-height: 0; } html:not(#ts):not(#ts) .ts-pop--where .ts-opts { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* six rows at most, then it scrolls, with the scroll bar always showing so the rest is easy to find (Ian, 2026-10-11) */ html:not(#ts):not(#ts) .ts-pop--where .ts-opts.is-capped { padding-right: var(--ts-space-1); } html:not(#ts):not(#ts) .ts-pop--where .ts-opts.is-capped::-webkit-scrollbar { width: 6px; } html:not(#ts):not(#ts) .ts-pop--where .ts-opts.is-capped::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--ts-ink-300); } html:not(#ts):not(#ts) .ts-pop--where .ts-opts.is-capped::-webkit-scrollbar-track { background: transparent; } html:not(#ts):not(#ts) .ts-pop--dates { left: 50%; transform: translateX(-50%); } html:not(#ts):not(#ts) .ts-pop--guests { right: 0; width: 360px; padding: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-pop--where .ts-pop__head, html:not(#ts):not(#ts) .ts-pop--guests .ts-pop__head { display: none; } html:not(#ts):not(#ts) .ts-pop--guests .ts-pop__foot { justify-content: flex-end; } html:not(#ts):not(#ts) .ts-pop--ask .ts-pop__foot { gap: var(--ts-space-4); } } @media (max-width: 1023px) { html:not(#ts):not(#ts) .ts-site nav { display: none; } html:not(#ts):not(#ts) .ts-site__menu { display: grid; } html:not(#ts):not(#ts) .ts-owners { gap: var(--ts-space-6); } html:not(#ts):not(#ts) .ts-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } html:not(#ts):not(#ts) .ts-said .ts-review { flex-basis: calc((100% - var(--ts-space-4)) / 2); } html:not(#ts):not(#ts) .ts-faq__in { grid-template-columns: minmax(0, 1fr); gap: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } html:not(#ts):not(#ts) .ts-cols { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--ts-space-6); } } /* ---- phone ---- */ @media (max-width: 767px) { html:not(#ts):not(#ts) .ts-site .ts-wrap { height: 56px; } html:not(#ts):not(#ts) .ts-site__logo img { width: 140px; } /* live on a phone: headline centered, no line under it, a white card of three rows, the Search button on its own below */ html:not(#ts):not(#ts) .ts-hero { display: block; min-height: 0; margin-top: -57px; padding-block: 86px var(--ts-space-6); } /* the headline's capitals about 36 under the header, as on Vrbo's mobile site */ html:not(#ts):not(#ts) .ts-hero h1 { font-size: 36px; line-height: 1.15; text-align: center; } html:not(#ts):not(#ts) .ts-hero__sub { display: none; } html:not(#ts):not(#ts) .ts-hero .ts-mount { margin-top: var(--ts-space-7); } /* the headline's last line sits about 47 above the search card, as on Vrbo's mobile site */ html:not(#ts):not(#ts) .ts-hero .ts-search, html:not(#ts):not(#ts) .ts-page.ts-mount .ts-search { border: 0; border-radius: 0; background: none; } html:not(#ts):not(#ts) .ts-hero .ts-search__part, html:not(#ts):not(#ts) .ts-page.ts-mount .ts-search__part { background: var(--ts-canvas-raised); } html:not(#ts):not(#ts) .ts-hero .ts-search__part:nth-of-type(1), html:not(#ts):not(#ts) .ts-page.ts-mount .ts-search__part:nth-of-type(1) { border-radius: var(--ts-radius-lg) var(--ts-radius-lg) 0 0; } html:not(#ts):not(#ts) .ts-hero .ts-search__part:nth-of-type(3), html:not(#ts):not(#ts) .ts-page.ts-mount .ts-search__part:nth-of-type(3) { border-radius: 0 0 var(--ts-radius-lg) var(--ts-radius-lg); } html:not(#ts):not(#ts) .ts-hero .ts-search .ts-btn, html:not(#ts):not(#ts) .ts-page.ts-mount .ts-search .ts-btn { margin: var(--ts-space-4) 0 0; } html:not(#ts):not(#ts) .ts-home { --ts-section-gap: var(--ts-space-8-5); --ts-section-first: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-home .ts-section h2 { font-size: var(--ts-text-h4); } html:not(#ts):not(#ts) .ts-head > span { display: none; } html:not(#ts):not(#ts) .ts-owners { grid-template-columns: minmax(0, 1fr); gap: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-owners .ts-btn { display: flex; width: fit-content; margin-inline: auto; } /* centered on a phone (Ian, 2026-10-04) */ html:not(#ts):not(#ts) .ts-home .ts-owners h2 { font-size: var(--ts-text-h3); } html:not(#ts):not(#ts) .ts-reasons { grid-template-columns: minmax(0, 1fr); gap: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-states { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ts-space-3); } html:not(#ts):not(#ts) .ts-state b { left: var(--ts-space-3); bottom: var(--ts-space-3); font-size: var(--ts-text-body-lg); } html:not(#ts):not(#ts) .ts-said .ts-review { flex-basis: 85%; } html:not(#ts):not(#ts) .ts-said__all { display: flex; width: fit-content; margin-inline: auto; } /* centered on a phone, as "About us" is (Ian, 2026-10-05; kept 2026-10-06: "Center the button on mobile") */ html:not(#ts):not(#ts) .ts-signup .ts-wrap { align-items: stretch; padding-block: var(--ts-space-6); } html:not(#ts):not(#ts) .ts-signup h2 { font-size: var(--ts-text-h4); } html:not(#ts):not(#ts) .ts-signup form { flex-direction: column; align-items: stretch; } html:not(#ts):not(#ts) .ts-signup .ts-field { width: auto; } /* every link a 44-high row; "Top resorts" one 56-high row that opens, the chevron turning */ html:not(#ts):not(#ts) .ts-foot__topbox { padding-block: var(--ts-space-2); } html:not(#ts):not(#ts) .ts-foot__topbox summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; pointer-events: auto; cursor: pointer; } html:not(#ts):not(#ts) .ts-foot__topbox summary h2 { margin: 0; font-size: var(--ts-text-body); } html:not(#ts):not(#ts) .ts-foot__topbox summary svg { display: block; width: 20px; height: 20px; color: var(--ts-ink-700); transition: transform var(--ts-duration-normal) var(--ts-ease-standard); } html:not(#ts):not(#ts) .ts-foot__topbox[open] summary svg { transform: rotate(180deg); } html:not(#ts):not(#ts) .ts-foot__topbox .ts-foot__top { padding-bottom: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-foot__top { grid-template-columns: minmax(0, 1fr); } html:not(#ts):not(#ts) .ts-foot__top :is(a, button), html:not(#ts):not(#ts) .ts-foot__main li :is(a, button), html:not(#ts):not(#ts) .ts-foot__legal :is(a, button) { display: flex; align-items: center; min-height: 44px; padding-block: 0; } html:not(#ts):not(#ts) .ts-foot__main li :is(a, button) { font-size: 15px; } html:not(#ts):not(#ts) .ts-foot__top.is-short li:nth-child(n+7) { display: none; } html:not(#ts):not(#ts) .ts-foot__more { display: inline-flex; margin-bottom: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-foot__main { grid-template-columns: minmax(0, 1fr); gap: var(--ts-space-5); padding-block: var(--ts-space-6) var(--ts-space-5); } html:not(#ts):not(#ts) .ts-foot__main img { width: 140px; } html:not(#ts):not(#ts) .ts-foot__main h2 { margin-bottom: var(--ts-space-1); } html:not(#ts):not(#ts) .ts-foot__legal { flex-direction: column; align-items: flex-start; gap: 0; padding-bottom: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-foot__legal > span { order: 2; margin: var(--ts-space-3) 0 0; } /* the resort row swipes, with the next card showing at the edge */ html:not(#ts):not(#ts) .ts-row { display: flex; gap: var(--ts-space-4); margin-inline: calc(-1 * var(--ts-gutter)); padding-inline: var(--ts-gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ts-gutter); scrollbar-width: none; overscroll-behavior-x: contain; } html:not(#ts):not(#ts) .ts-row::-webkit-scrollbar { display: none; } html:not(#ts):not(#ts) .ts-row .ts-card { flex: 0 0 85%; scroll-snap-align: start; } html:not(#ts):not(#ts) .ts-results { padding-block: var(--ts-space-4) var(--ts-space-8); } html:not(#ts):not(#ts) .ts-rhead { margin-block: var(--ts-space-5) var(--ts-space-4); } /* in a full sheet the three panels share the calendar's header and footer; their own parts get the sheet's side padding */ html:not(#ts):not(#ts) .ts-pop--guests .ts-pop__body { flex: none; } html:not(#ts):not(#ts) .ts-pop--guests .ts-pop__foot { margin-top: auto; justify-content: flex-end; border-top: 1px solid var(--ts-ink-200); } html:not(#ts):not(#ts) .ts-pop--where .ts-pop__body { padding-top: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-cal-ask { inset: 96px var(--ts-space-2) auto; } html:not(#ts):not(#ts) .ts-back { margin-block: 0; } html:not(#ts):not(#ts) .ts-gal__grid, html:not(#ts):not(#ts) .ts-gal__grid.is-one { display: flex; height: auto; gap: 0; margin-inline: calc(-1 * var(--ts-gutter)); border-radius: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } html:not(#ts):not(#ts) .ts-gal__grid::-webkit-scrollbar { display: none; } html:not(#ts):not(#ts) .ts-gal__grid img { flex: 0 0 100%; height: auto; aspect-ratio: 4 / 3; scroll-snap-align: start; scroll-snap-stop: always; } html:not(#ts):not(#ts) .ts-gal__all { display: none; } html:not(#ts):not(#ts) .ts-gal__count { display: block; position: absolute; right: var(--ts-space-3); bottom: var(--ts-space-3); padding: 2px var(--ts-space-3); border-radius: var(--ts-radius-pill); background: var(--ts-ink-900); color: var(--ts-canvas-raised); font-size: var(--ts-text-caption); font-weight: 600; } html:not(#ts):not(#ts) .ts-title { padding-top: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-title h1 { font-size: 26px; } /* Vrbo 28, Airbnb 26 (F-167) */ /* the swiping reviews row must not widen the column: stretch the items and hold the text column to the screen */ html:not(#ts):not(#ts) .ts-cols { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 120px; } html:not(#ts):not(#ts) .ts-cols .ts-title { display: block; order: -2; } html:not(#ts):not(#ts) .ts-cols .ts-title h1 { padding-top: 0; } html:not(#ts):not(#ts) .ts-main { max-width: 100%; } html:not(#ts):not(#ts) .ts-cols .ts-book { order: -1; width: 100%; margin-top: var(--ts-space-4-5); } html:not(#ts):not(#ts) .ts-map__frame { aspect-ratio: 4 / 3; } html:not(#ts):not(#ts) .ts-dateswrap .ts-pop { position: fixed; inset: 0; top: 0; right: 0; z-index: 90080; } html:not(#ts):not(#ts) .ts-revhead span { display: none; } html:not(#ts):not(#ts) .ts-other { margin-top: var(--ts-space-1); } html:not(#ts):not(#ts) .ts-scrim { display: none; } html:not(#ts):not(#ts) .ts-pop--ask { inset: 0; left: 0; top: 0; width: auto; max-height: none; transform: none; } html:not(#ts):not(#ts) .ts-pop--ask .ts-pop__head { min-height: 68px; margin: 0; padding-right: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-ask__x { display: none; } html:not(#ts):not(#ts) .ts-pop--ask .ts-pop__body { padding-top: var(--ts-space-4-5); } html:not(#ts):not(#ts) .ts-pop--ask .ts-pop__foot { gap: var(--ts-space-3); } html:not(#ts):not(#ts) .ts-pop--ask .ts-fine { text-align: left; margin: 0; } } @media (prefers-reduced-motion: reduce) { html:not(#ts):not(#ts) .ts-state, html:not(#ts):not(#ts) .ts-qs summary svg, html:not(#ts):not(#ts) .ts-foot :is(a, button), html:not(#ts):not(#ts) .ts-foot__topbox summary svg { transition-duration: 0.01ms; } html:not(#ts):not(#ts) .ts-state:hover { transform: none; } } /* ---- request form and request sent ---- Drawn in phase 7 of the booking journey plan and approved by Ian Archer on 2026-10-04, then moved here unchanged. The form is one page: the fields in a 640px column, the stay in a card pinned beside it. On a phone the stay comes first, then the fields. The header is the logo alone (.ts-site.is-bare), as Vrbo strips it, so nothing leads away from the form. "Request sent" is the stay as a card (.ts-staycard, since .ts-stay is the open-stay row) beside the status and the scout. No orange on it: the guest has nothing left to press. Fields, buttons, the timeline, the status chip, the price summary and the scout block are the elements above. 2026-10-07 (Ian, from Airbnb's Request to book and "Your stay is pending"): the form's three parts are panels, the site's white box with its border (the Pros and Cons box, the closing box), and "What happens next" is a gray one; the message panel names the scout with the scout row; "Request sent" keeps the vital facts and drops the timeline. */ html:not(#ts):not(#ts) .ts-panel { padding: var(--ts-space-5); background: var(--ts-canvas-raised); border: 1px solid var(--ts-ink-200); border-radius: var(--ts-radius-lg); } html:not(#ts):not(#ts) .ts-panel--muted { background: var(--ts-ink-50); border-color: var(--ts-ink-100); } html:not(#ts):not(#ts) .ts-panel > h2 { font-size: var(--ts-text-h3); margin-bottom: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-panel > .ts-field__hint { margin: 0; } html:not(#ts):not(#ts) .ts-panel > .ts-field__hint + .ts-scout__who { margin-top: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-panel > .ts-scout__who + .ts-field { margin-top: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-site.is-bare nav, html:not(#ts):not(#ts) .ts-site.is-bare .ts-site__menu { display: none; } /* The site's 1200 container, as every page: the stay card is the resort page's booking box, 392 wide at the container's right edge, so it stays where it was when the guest presses "Request this stay", and the title starts under the logo. Checked on 2026-10-07 against Airbnb's Confirm and pay (974 wide: 523, 82, 370; research/journey-capture/06-request-to-book/ airbnb-web-live-06-confirm-and-pay.jpg) when Ian asked whether the card was too wide; kept, since the site's own pattern wins (root rule 33). */ html:not(#ts):not(#ts) .ts-req { padding-bottom: var(--ts-space-9); } /* The head's heading and request line are cells of the two-column grid, so the stay card's top sits level with "This is a request, not a booking" on a laptop (Ian, 2026-10-05, phase 11b). Since 2026-10-08 the request line is the one teal note, 16 under the title, in the box "Booking request sent" uses, and the card's top is level with the box; the flights note left the box: it is the small line under "What happens next" (0.3.54) and stays on "Booking request sent" and in its email. */ html:not(#ts):not(#ts) .ts-req__head { display: contents; } html:not(#ts):not(#ts) .ts-req__head h1 { grid-column: 1; grid-row: 1; font-size: var(--ts-text-h2); } html:not(#ts):not(#ts) .ts-req__head p { grid-column: 1; grid-row: 2; margin-top: var(--ts-space-3); } html:not(#ts):not(#ts) .ts-req__head .ts-note { margin-top: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-req__cols > .ts-req__preview { grid-column: 1; grid-row: 3; margin-top: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-req__cols > .ts-form { grid-column: 1; grid-row: 4; margin-top: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-req__cols > .ts-sum { grid-column: 2; grid-row: 2 / 5; margin-top: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-req__head b, html:not(#ts):not(#ts) .ts-sent__head b, html:not(#ts):not(#ts) .ts-note b { font-weight: 600; color: var(--ts-ink-900); } html:not(#ts):not(#ts) .ts-req__cols { display: grid; grid-template-columns: minmax(0, 640px) 392px; grid-template-rows: auto auto auto 1fr; justify-content: space-between; gap: 0 var(--ts-space-9); align-items: start; } html:not(#ts):not(#ts) .ts-form { display: grid; gap: var(--ts-space-5); min-width: 0; } /* panels 24 apart, as the booking box keeps 24 inside; was one column of parts between lines */ html:not(#ts):not(#ts) .ts-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-form__grid + .ts-check { margin-top: var(--ts-space-3); } html:not(#ts):not(#ts) .ts-form__guest { display: grid; gap: var(--ts-space-2); margin-top: var(--ts-space-2); } html:not(#ts):not(#ts) .ts-form__fine { margin-top: var(--ts-space-4); font-size: var(--ts-text-body-sm); font-weight: 500; color: var(--ts-ink-700); text-align: center; } /* the line centered under the steps of "What happens next" on the request form (Ian, 2026-10-06; F-200): since 2026-10-08 (0.3.54) the flights note, in place of "The resort assigns your exact villa at check-in", which the stay card keeps */ html:not(#ts):not(#ts) .ts-form__send { padding-top: 0; } /* under the panels, outside them, as Airbnb sets its button: the form's 24 gap above it */ /* The terms box over Send, centered with its words as one line that wraps, as the line under Send is (Ian, 2026-10-06: "center ... with the checkmark"; F-200). The row stays 44 tall and the whole row is still the target. */ html:not(#ts):not(#ts) .ts-form__send .ts-check { display: block; padding-block: 10px; text-align: center; } html:not(#ts):not(#ts) .ts-form__send .ts-check__box { display: inline-grid; margin-right: var(--ts-space-2); vertical-align: -4px; } html:not(#ts):not(#ts) .ts-form__send .ts-btn--accent { margin-top: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-form__err { display: block; font-size: var(--ts-text-body-sm); font-weight: 600; color: var(--ts-error); line-height: 1.4; } /* tick box: the whole row is the target, 44px tall. The real input lies over the row, unseen, so a keyboard and a screen reader still get it */ html:not(#ts):not(#ts) .ts-check { position: relative; display: flex; align-items: center; gap: var(--ts-space-3); min-height: 44px; font-weight: 500; color: var(--ts-ink-900); line-height: 1.4; } html:not(#ts):not(#ts) .ts-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } html:not(#ts):not(#ts) .ts-check__box { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--ts-ink-500); border-radius: var(--ts-radius-sm); background: var(--ts-canvas-raised); color: var(--ts-canvas-raised); } html:not(#ts):not(#ts) .ts-check input:checked + .ts-check__box { border-color: var(--ts-brand-600); background: var(--ts-brand-600); } html:not(#ts):not(#ts) .ts-check input:focus-visible + .ts-check__box { outline: 2px solid var(--ts-brand-600); outline-offset: 2px; } html:not(#ts):not(#ts) .ts-check .ts-link { position: relative; z-index: 1; } html:not(#ts):not(#ts) .ts-note { padding: var(--ts-space-3) var(--ts-space-4); border-radius: var(--ts-radius-md); background: var(--ts-brand-50); font-weight: 500; color: var(--ts-ink-900); } /* the rows of a stay: a label and its value, used in the summary card and on the request sent card */ html:not(#ts):not(#ts) .ts-rows { margin: var(--ts-space-4) 0 0; border-top: 1px solid var(--ts-ink-200); } html:not(#ts):not(#ts) .ts-rows div { display: flex; justify-content: space-between; gap: var(--ts-space-4); padding-block: var(--ts-space-3); border-bottom: 1px solid var(--ts-ink-100); } html:not(#ts):not(#ts) .ts-rows dt { font-weight: 500; white-space: nowrap; } /* a label never breaks, "Check-out" least of all. The value beside it wraps */ html:not(#ts):not(#ts) .ts-rows dd { margin: 0; font-weight: 600; color: var(--ts-ink-900); text-align: right; } html:not(#ts):not(#ts) .ts-sum { position: sticky; top: 72px; } html:not(#ts):not(#ts) .ts-sum__stay { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-sum__stay img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--ts-radius-md); } html:not(#ts):not(#ts) .ts-sum__stay b, html:not(#ts):not(#ts) .ts-staycard__body > b { display: block; font-size: var(--ts-text-body-lg); font-weight: 600; color: var(--ts-ink-900); line-height: 1.3; } html:not(#ts):not(#ts) .ts-sum__stay span span, html:not(#ts):not(#ts) .ts-staycard__body > span { display: block; font-weight: 500; line-height: 1.5; } html:not(#ts):not(#ts) .ts-sum .ts-link { margin-top: var(--ts-space-3); } html:not(#ts):not(#ts) .ts-sum .ts-fine { text-align: left; } html:not(#ts):not(#ts) .ts-sent { padding-block: var(--ts-space-8) var(--ts-space-9); } /* The words sit in the middle of the card's height, as Airbnb's "Your stay is pending" sets them beside its card: the two 1fr rows above and below take what the card has to spare (2026-10-07, once the timeline left this page). */ html:not(#ts):not(#ts) .ts-sent__cols { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 520px); grid-template-rows: 1fr auto auto 1fr; justify-content: center; column-gap: var(--ts-space-9); align-items: start; } html:not(#ts):not(#ts) .ts-sent__head, html:not(#ts):not(#ts) .ts-sent__rest { grid-column: 2; display: grid; gap: var(--ts-space-4-5); } html:not(#ts):not(#ts) .ts-sent__head { grid-row: 2; } html:not(#ts):not(#ts) .ts-sent__rest { grid-row: 3; gap: var(--ts-space-6); margin-top: var(--ts-space-6); } html:not(#ts):not(#ts) .ts-sent__head h1 { font-size: var(--ts-text-h1); } /* 48, Airbnb's (F-147); 32 on a phone */ html:not(#ts):not(#ts) .ts-sent__lead { font-size: var(--ts-text-body-lg); } html:not(#ts):not(#ts) .ts-sent__rest h2 { font-size: var(--ts-text-h4); margin-bottom: var(--ts-space-4); } /* The scout as Airbnb names a host: the line, the question, then the photo with the name and email beside it, all from the left edge of the words above (Ian, 2026-10-07: "format it as Airbnb might do it with the host"); it was centered. */ html:not(#ts):not(#ts) .ts-sent__rest .ts-scout { margin-top: 0; text-align: left; justify-items: start; } /* Then the photo row and "Back to the home page" centered under the question line, the block as wide as that line (Ian, 2026-10-08: "center the profile picture ... and back to the home page, to the center of questions before replying"). The button 24 under the row, as "Send message" in the booking box. */ html:not(#ts):not(#ts) .ts-scout__help { display: grid; justify-items: center; gap: var(--ts-space-3); width: fit-content; max-width: 100%; } html:not(#ts):not(#ts) .ts-scout__help h3 { justify-self: stretch; } html:not(#ts):not(#ts) .ts-scout__help > .ts-btn { margin-top: var(--ts-space-3); } html:not(#ts):not(#ts) .ts-staycard { grid-column: 1; grid-row: 1 / 5; overflow: hidden; background: var(--ts-canvas-raised); border: 1px solid var(--ts-ink-200); border-radius: var(--ts-radius-lg); box-shadow: var(--ts-shadow-md); } html:not(#ts):not(#ts) .ts-staycard__photo { position: relative; aspect-ratio: 3 / 2; } html:not(#ts):not(#ts) .ts-staycard__photo img { width: 100%; height: 100%; object-fit: cover; } html:not(#ts):not(#ts) .ts-staycard__photo .ts-status-chip { position: absolute; left: var(--ts-space-4); top: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-staycard__body { padding: var(--ts-space-4-5) var(--ts-space-5) var(--ts-space-2); } html:not(#ts):not(#ts) .ts-staycard .ts-rows div:last-child { border-bottom: 0; } @media (max-width: 1023px) { html:not(#ts):not(#ts) .ts-req__cols { grid-template-columns: minmax(0, 1fr) 340px; gap: 0 var(--ts-space-6); } html:not(#ts):not(#ts) .ts-sent__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--ts-space-6); } } @media (max-width: 767px) { html:not(#ts):not(#ts) .ts-req { padding-bottom: var(--ts-space-8); } html:not(#ts):not(#ts) .ts-req__head h1 { font-size: var(--ts-text-h3); order: -3; } html:not(#ts):not(#ts) .ts-req__head p { order: -2; } html:not(#ts):not(#ts) .ts-sent__head h1 { font-size: var(--ts-text-h2); } /* Vrbo iOS 36, 32 to 40 (F-147) */ html:not(#ts):not(#ts) .ts-req__cols { display: flex; flex-direction: column; align-items: stretch; gap: 0; } html:not(#ts):not(#ts) .ts-req__cols > .ts-req__preview { order: -2; } html:not(#ts):not(#ts) .ts-req__cols > .ts-sum { order: -1; position: static; margin-top: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-req__cols > .ts-form { margin-top: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-form { gap: var(--ts-space-4-5); } /* 20 between panels on a phone, the gap between resort cards there */ html:not(#ts):not(#ts) .ts-panel { padding: var(--ts-space-4-5); } /* 20, the booking box's padding on a phone */ html:not(#ts):not(#ts) .ts-panel > h2 { font-size: var(--ts-text-h4); } html:not(#ts):not(#ts) .ts-form__grid { grid-template-columns: 1fr; } html:not(#ts):not(#ts) .ts-sent { padding-block: var(--ts-space-5) var(--ts-space-8); } /* status first on a phone, then the stay, then what happens next */ html:not(#ts):not(#ts) .ts-sent__cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-sent__head, html:not(#ts):not(#ts) .ts-sent__rest, html:not(#ts):not(#ts) .ts-staycard { grid-column: 1; grid-row: auto; } html:not(#ts):not(#ts) .ts-sent__rest { margin-top: var(--ts-space-2); } /* a phone: the question centered over its row (root rule 27), 4 to the photo as in the booking box (F-199), the button full width 24 under it */ html:not(#ts):not(#ts) .ts-scout__help { width: auto; row-gap: var(--ts-space-1); } html:not(#ts):not(#ts) .ts-scout__help h3 { text-align: center; } html:not(#ts):not(#ts) .ts-scout__help > .ts-btn { justify-self: stretch; margin-top: var(--ts-space-4-5); } html:not(#ts):not(#ts) .ts-staycard { box-shadow: none; } } /* ---- site pages (phase 10b) ---- The pages outside the booking journey: About us, Renters, Owners, Contact us and its thank-you, Testimonials, the Marriott Vacation Club guide, the Vacation guide and its posts, the questions, the legal pages, the 404 and the booking messages. Built straight on live with no prototype (Ian Archer, 2026-10-05, root CLAUDE.md rule 25), from the elements above and one Vrbo or Airbnb screen per page type (Projects/Travelscowt-Website/research/journey-capture/ 11-site-pages). Each page has one H1, in its page head. The sections under it are the home page's own, spaced the home page's way: a section is 80 under the one before on a laptop and 56 on a phone, a heading 24 above what it heads. One illustration to a page, either the band at the top of the page head or beside its words in a split, and never with a price (applications/web.md, "Illustration on the website"). A guide or a question is read in one column of 720 that starts at the same left edge as every heading. */ /* page head: an optional band, then the page's one H1 and the line under it. The band is an illustration on a page about us or an idea (Airbnb's "Go Near" page, sent by Ian on 2026-10-05) or a photo where live has one. The words sit under the band in plain ink, never on it, so they keep their contrast at 320. */ /* Phase 11b (2026-10-05): an illustration band shows the whole drawing on a laptop, in the band's rounded box, instead of a 3:1 crop (Testimonials, Contact us, the Vacation Guide). A photo band keeps the 3:1 crop. The H1, its line and its button are one block in the middle of the page, and their lines are left-aligned inside it, on every page with a head. Ian, the same evening, after 0.3.10 centered the text and 0.3.12 moved the block to the left edge: "when I said left-aligned, I just meant how the text is. Just have what our customers are saying in the center of the page ... but still, how it looks or is formatted now". Then: "center the title to be above the under line", so the H1 is centered inside the block and its line stays left-aligned. The block is as wide as its longest line (the H1 at most 30ch, the line under it 65ch), so a short head sits as centered as a long one. Contact us takes this band too ("so that it matches the design aspects of Marriott Vacation Club and Vacation Guide"). */ html:not(#ts):not(#ts) .ts-pagehead { padding-top: var(--ts-head-top); } html:not(#ts):not(#ts) .ts-pagehead__band { width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; border-radius: var(--ts-radius-lg); margin-bottom: var(--ts-head-band); background: var(--ts-ink-50); } /* flat gray round a drawing (Testimonials, the Vacation Guide); a photo or a painted scene covers it. A pale blue ombre was here for a day; Ian took it off on 2026-10-06: "Remove the ombre color from everything" */ html:not(#ts):not(#ts) .ts-pagehead__band[src*="/img/art/"] { object-fit: contain; } /* every band one size, 3:1 and 384 high at 1152 (16:9 on a phone), photo or drawing: a drawing shows whole inside the box on the wash (Ian, 2026-10-06: "the bubbles for Contact Us, Testimonials, Vacation Guide, and Marriott Vacation Club are all different sizes ... just make them a uniform size"). Was its own width and height up to 360, so Testimonials and the Vacation Guide drew 360 high and the overlook 330 */ html:not(#ts):not(#ts) .ts-pagehead__band[src*="/img/art/hero-scout-overlook"] { object-fit: cover; } /* the overlook is a scene painted edge to edge, 3.49:1: it fills the 3:1 box as a photo does, 7% off each side, the scout kept */ html:not(#ts):not(#ts) .ts-pagehead h1 { font-size: var(--ts-text-h2); max-width: 30ch; } html:not(#ts):not(#ts) .ts-pagehead__lead { margin-top: var(--ts-space-3); max-width: 65ch; font-size: var(--ts-text-body-lg); } html:not(#ts):not(#ts) .ts-pagehead__words { width: fit-content; max-width: 100%; margin-inline: auto; } html:not(#ts):not(#ts) .ts-pagehead__words h1 { margin-inline: auto; text-align: center; } /* the title centered over its line, the line left-aligned (Ian, 2026-10-05: "center the title to be above the under line") */ /* The lines centered under the title: a paragraph's box is its 65ch cap, not its longest line, so left-aligned lines that stop short of it sat left of the title's center (Owners and Renters 35 at 1440; Ian, 2026-10-06: "bring the underline over to the right ... not exactly centered"). The plugin's ts-sitewide.js sets --ts-lines to the longest line; the lines are capped at it and centered, still left-aligned, and on a laptop the button keeps their left edge. Without the script nothing changes. */ html:not(#ts):not(#ts) .ts-pagehead__words[style*="--ts-lines"] > .ts-pagehead__lead { max-width: var(--ts-lines); margin-inline: auto; } html:not(#ts):not(#ts) .ts-pagehead > h1 + .ts-prose[style*="--ts-lines"] { max-width: min(720px, var(--ts-measure), var(--ts-lines)); } /* an FAQ question's answer, centered under its question the same way */ @media (min-width: 768px) { html:not(#ts):not(#ts) .ts-pagehead__words[style*="--ts-lines"] > .ts-btn { margin-left: max(0px, calc((100% - var(--ts-lines)) / 2)); } } html:not(#ts):not(#ts) .ts-pagehead__lead + .ts-pagehead__lead { margin-top: var(--ts-space-2); } /* align="center" on one page head: its line centered under the title as well, which shows where the line wraps, on a phone. Ian picked it for Resorts only on 2026-10-06 ("Resorts B"); Marriott Vacation Club and the Vacation Guide keep the line left. */ html:not(#ts):not(#ts) .ts-pagehead__words--center .ts-pagehead__lead { text-align: center; } html:not(#ts):not(#ts) .ts-pagehead__words--center .ts-btn { display: flex; width: fit-content; margin-inline: auto; } html:not(#ts):not(#ts) .ts-pagehead .ts-btn { margin-top: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-pagehead h1 + .ts-prose { margin-top: var(--ts-space-4); } /* Pages that are read (legal pages, a FAQ question, a Vacation guide post): one 720 column in the middle of the page, the title centered over it and the text left-aligned inside it, as the page heads (Ian, 2026-10-05: "this is going to be for any title that has to be centered"; his pick: posts, legal and FAQ question pages. Booking pages and section headings stay left). */ html:not(#ts):not(#ts) .ts-pagehead > .ts-prose { margin-inline: auto; } html:not(#ts):not(#ts) .ts-pagehead > .ts-prose:not([style*="--ts-lines"]) { max-width: min(720px, var(--ts-measure)); } /* legal pages and a question's answer never run past the measure. In Figtree 68ch is 739 at 16 and 831 at 18, so today the 720 column binds first and lines run 72 to 78 characters, posts included; a true 68-character line (about 620 at 16, 600 at 18, Airbnb's column) would be a visible change for Ian (2026-10-07) */ html:not(#ts):not(#ts) .ts-pagehead > h1, html:not(#ts):not(#ts) .ts-pagehead > .ts-prose > h1:first-child, html:not(#ts):not(#ts) .ts-article h1 { margin-inline: auto; text-align: center; } html:not(#ts):not(#ts) .ts-section:has(> .ts-qlinks) > * { max-width: 720px; margin-inline: auto; } /* split: words beside one picture, the home page's "direct from owners" block for any section. An illustration keeps its own shape. A photo is 3:2. --flip puts the picture first on a laptop; on a phone the words always come first. */ html:not(#ts):not(#ts) .ts-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--ts-space-9); } html:not(#ts):not(#ts) .ts-split--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } /* the picture keeps the wider column when it moves left, so every split's picture is one size (Ian, 2026-10-05: Marriott Vacation Club's "How does it work?" picture was larger than "Points explained") */ html:not(#ts):not(#ts) .ts-split--flip > :first-child { order: 2; } html:not(#ts):not(#ts) .ts-split > img { order: 0; } html:not(#ts):not(#ts) .ts-split--text { grid-template-columns: minmax(0, 1fr); } html:not(#ts):not(#ts) .ts-split--text > div { max-width: 720px; } html:not(#ts):not(#ts) .ts-section.ts-split h2 { margin-bottom: var(--ts-space-4); } /* outweighs ".ts-home .ts-section h2", which sets 0 */ html:not(#ts):not(#ts) .ts-split p, html:not(#ts):not(#ts) .ts-split ul, html:not(#ts):not(#ts) .ts-split ol { max-width: 65ch; } html:not(#ts):not(#ts) .ts-split p + p, html:not(#ts):not(#ts) .ts-split p + ul, html:not(#ts):not(#ts) .ts-split ul + p, html:not(#ts):not(#ts) .ts-split p + ol { margin-top: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-split ul, html:not(#ts):not(#ts) .ts-split ol { margin-block: var(--ts-space-3) 0; padding-left: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-split li + li { margin-top: var(--ts-space-2); } html:not(#ts):not(#ts) .ts-split b, html:not(#ts):not(#ts) .ts-split strong { font-weight: 600; color: var(--ts-ink-900); } html:not(#ts):not(#ts) .ts-split a:not(.ts-btn) { color: var(--ts-brand-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } html:not(#ts):not(#ts) .ts-split .ts-btn, html:not(#ts):not(#ts) .ts-split .ts-reasons { margin-top: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-split .ts-qs { margin-top: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-split .ts-qs details { border-color: var(--ts-ink-200); } html:not(#ts):not(#ts) .ts-split:has(details) { align-items: start; } /* a split that holds questions starts both columns at the top, so opening an answer only pushes down what is under it and the picture beside it stays still (Ian, 2026-10-06: the Marriott Vacation Club "Points explained" photo slid 36 down when "Do points expire?" opened, then back up on close) */ html:not(#ts):not(#ts) .ts-split__photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--ts-radius-lg); } html:not(#ts):not(#ts) .ts-split__art { width: 100%; height: auto; max-height: 520px; object-fit: contain; border-radius: var(--ts-radius-lg); } /* a section's own line under its heading, as "Marriott Vacation Club resorts are located in..." */ html:not(#ts):not(#ts) .ts-head > div p { margin-top: var(--ts-space-2); max-width: 65ch; font-weight: 500; } html:not(#ts):not(#ts) .ts-reasons--one { grid-template-columns: minmax(0, 1fr); gap: var(--ts-space-4); } /* steps: how a thing works in three numbered rows divided by a hairline, the heading beside them (Airbnb's "It's easy to get started"). Not links, so not cards. */ html:not(#ts):not(#ts) .ts-steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--ts-space-9); align-items: start; } html:not(#ts):not(#ts) .ts-steps ol { list-style: none; margin: 0; padding: 0; } html:not(#ts):not(#ts) .ts-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--ts-space-4); padding-block: var(--ts-space-5); border-bottom: 1px solid var(--ts-ink-200); } html:not(#ts):not(#ts) .ts-steps li:first-child { padding-top: 0; } html:not(#ts):not(#ts) .ts-steps li > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ts-brand-50); color: var(--ts-brand-700); font-weight: 700; line-height: 1; } html:not(#ts):not(#ts) .ts-steps b { display: block; font-size: var(--ts-text-body-lg); font-weight: 600; color: var(--ts-ink-900); line-height: 1.3; } html:not(#ts):not(#ts) .ts-steps li p { margin-top: var(--ts-space-1); } html:not(#ts):not(#ts) .ts-steps .ts-btn { margin-top: var(--ts-space-5); } /* ways to reach a person: one card each, icon, what it is, one line, then the address or number as a link (Airbnb's "We're here to help") */ html:not(#ts):not(#ts) .ts-ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-ways li { padding: var(--ts-space-5); background: var(--ts-canvas-raised); border: 1px solid var(--ts-ink-200); border-radius: var(--ts-radius-lg); text-align: center; } /* centered (Ian, 2026-10-05) */ html:not(#ts):not(#ts) .ts-ways svg { color: var(--ts-brand-600); } html:not(#ts):not(#ts) .ts-ways b { display: block; margin-top: var(--ts-space-4); font-size: var(--ts-text-body-lg); font-weight: 600; color: var(--ts-ink-900); line-height: 1.3; } html:not(#ts):not(#ts) .ts-ways span { display: block; margin-top: var(--ts-space-1); font-weight: 500; } html:not(#ts):not(#ts) .ts-ways a { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--ts-space-1); color: var(--ts-brand-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; } /* 44 tall, a tap target on a phone */ /* the team: a round photo, the name, the role, one line */ /* About us, the team (Ian, 2026-10-09): each person on the site's card (white, ink-200 border, corners 16, the resort cards' columns 24 apart), the photo round at 144, the name and role beside it centred on it as one block, 4 apart, and their line under both, 24 below the photo. The resort cards' hover without the pointer, since a team card is not a link. Photos stay round and small everywhere else (the scowt row, the request form, the emails, the bylines). */ html:not(#ts):not(#ts) .ts-team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-team li { position: relative; z-index: 0; display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 0 var(--ts-space-4); align-items: start; align-content: start; padding: var(--ts-space-5); background: var(--ts-canvas-raised); border: 1px solid var(--ts-ink-200); border-radius: var(--ts-radius-lg); transition: transform var(--ts-duration-normal) var(--ts-ease-standard), box-shadow var(--ts-duration-normal) var(--ts-ease-standard), z-index 0s linear var(--ts-duration-normal); } @media (hover: hover) { html:not(#ts):not(#ts) .ts-team li:hover { z-index: 3; transform: scale(1.02); box-shadow: var(--ts-shadow-md); transition-delay: 0s; } } html:not(#ts):not(#ts) .ts-team li > div { display: contents; } /* the name, the role and the line take their own places in the card's grid */ html:not(#ts):not(#ts) .ts-team img, html:not(#ts):not(#ts) .ts-team li > i { grid-column: 1; grid-row: 1 / span 2; width: 144px; height: 144px; border-radius: var(--ts-radius-full); object-fit: cover; } html:not(#ts):not(#ts) .ts-team li > i { display: grid; place-items: center; background: var(--ts-brand-100); color: var(--ts-brand-700); font-size: var(--ts-text-h1); font-style: normal; font-weight: 600; } html:not(#ts):not(#ts) .ts-team b { grid-column: 2; grid-row: 1; align-self: end; display: block; font-size: var(--ts-text-body-lg); font-weight: 600; color: var(--ts-ink-900); line-height: 1.3; } html:not(#ts):not(#ts) .ts-team small { grid-column: 2; grid-row: 2; align-self: start; display: block; margin-top: var(--ts-space-1); font-size: var(--ts-text-body-sm); font-weight: 500; color: var(--ts-ink-700); line-height: 1.4; } html:not(#ts):not(#ts) .ts-team p { grid-column: 1 / -1; grid-row: 3; margin-top: var(--ts-space-5); } /* quotes from guests and owners: the review card, two across (Airbnb's reviews) */ html:not(#ts):not(#ts) .ts-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-quotes .ts-review { margin: 0; display: flex; flex-direction: column; gap: var(--ts-space-3); } html:not(#ts):not(#ts) .ts-quotes blockquote { margin: 0; display: grid; gap: var(--ts-space-2); } html:not(#ts):not(#ts) .ts-quotes blockquote b { font-size: var(--ts-text-body-lg); font-weight: 600; line-height: 1.4; } html:not(#ts):not(#ts) .ts-quotes figcaption { margin-top: auto; font-size: var(--ts-text-body-sm); font-weight: 600; color: var(--ts-ink-700); } /* one next step at the end of a page, in a card, so it never touches the questions band */ html:not(#ts):not(#ts) .ts-cta { display: flex; flex-direction: column; align-items: center; gap: var(--ts-space-5); padding: var(--ts-space-6); background: var(--ts-canvas-raised); border: 1px solid var(--ts-ink-200); border-radius: var(--ts-radius-lg); text-align: center; } /* one centered block, title, line, then the button, as Vrbo's and Airbnb's owner and host pages end (Ian, 2026-10-06: "center that button ... Vrbo/Airbnb style"); was words left, button right; white with its border again, the pale blue ombre taken off (Ian, 2026-10-06: "Get rid of it from the 'Ready to book your next vacation'") */ html:not(#ts):not(#ts) .ts-cta p { margin: var(--ts-space-2) auto 0; max-width: 65ch; } /* reading: a guide, a question's answer, the legal pages. One column of 720, the system's headings, teal links. */ html:not(#ts):not(#ts) .ts-prose { max-width: 720px; overflow-wrap: break-word; } html:not(#ts):not(#ts) .ts-prose > :first-child { margin-top: 0; } html:not(#ts):not(#ts) .ts-prose h1 { font-size: var(--ts-text-h2); margin-bottom: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-prose h2 { font-size: var(--ts-text-h3); margin-top: var(--ts-space-8); } html:not(#ts):not(#ts) .ts-prose h3 { font-size: var(--ts-text-h4); margin-top: var(--ts-space-6); } html:not(#ts):not(#ts) .ts-prose h4 { font-size: var(--ts-text-body-lg); margin-top: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-prose p, html:not(#ts):not(#ts) .ts-prose ul, html:not(#ts):not(#ts) .ts-prose ol, html:not(#ts):not(#ts) .ts-prose table, html:not(#ts):not(#ts) .ts-prose blockquote, html:not(#ts):not(#ts) .ts-prose figure, html:not(#ts):not(#ts) .ts-prose form, html:not(#ts):not(#ts) .ts-prose dl { margin: var(--ts-space-4) 0 0; } html:not(#ts):not(#ts) .ts-prose h2 + *, html:not(#ts):not(#ts) .ts-prose h3 + *, html:not(#ts):not(#ts) .ts-prose h4 + * { margin-top: var(--ts-space-3); } html:not(#ts):not(#ts) .ts-prose ul, html:not(#ts):not(#ts) .ts-prose ol { padding-left: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-prose li + li { margin-top: var(--ts-space-2); } html:not(#ts):not(#ts) .ts-prose li > ul, html:not(#ts):not(#ts) .ts-prose li > ol { margin-top: var(--ts-space-2); } html:not(#ts):not(#ts) .ts-prose b, html:not(#ts):not(#ts) .ts-prose strong { font-weight: 600; color: var(--ts-ink-900); } html:not(#ts):not(#ts) .ts-prose a { color: var(--ts-brand-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } html:not(#ts):not(#ts) .ts-prose a:hover { color: var(--ts-brand-700); } html:not(#ts):not(#ts) .ts-prose hr { margin: var(--ts-space-6) 0 0; border: 0; border-top: 1px solid var(--ts-ink-200); } html:not(#ts):not(#ts) .ts-prose img { height: auto; border-radius: var(--ts-radius-lg); } html:not(#ts):not(#ts) .ts-prose blockquote { padding-left: var(--ts-space-4); border-left: 2px solid var(--ts-brand-100); } html:not(#ts):not(#ts) .ts-prose table { width: 100%; border-collapse: collapse; font-size: var(--ts-text-body-sm); } html:not(#ts):not(#ts) .ts-prose th, html:not(#ts):not(#ts) .ts-prose td { padding: var(--ts-space-2) var(--ts-space-3); border-bottom: 1px solid var(--ts-ink-200); text-align: left; vertical-align: top; } html:not(#ts):not(#ts) .ts-prose input[type="submit"], html:not(#ts):not(#ts) .ts-prose button, html:not(#ts):not(#ts) .ts-prose .button { box-sizing: border-box; height: 48px; padding: 0 var(--ts-space-5); border: 1px solid var(--ts-ink-300); border-radius: var(--ts-radius-pill); background: var(--ts-canvas-raised); color: var(--ts-ink-900); font: 600 var(--ts-text-body)/1 var(--ts-font-web); cursor: pointer; } html:not(#ts):not(#ts) .ts-article { max-width: 720px; margin-inline: auto; } html:not(#ts):not(#ts) .ts-article h1 { max-width: none; } html:not(#ts):not(#ts) .ts-article .ts-pagehead__lead { max-width: none; } html:not(#ts):not(#ts) .ts-article__photo { width: 100%; max-width: 720px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--ts-radius-lg); margin-top: var(--ts-space-6); } html:not(#ts):not(#ts) .ts-article .ts-prose { margin-top: var(--ts-space-6); } /* A Vacation guide post, as Ian approved it on 2026-10-07 (F-214, prototypes/site-pages/post.html): "Vacation guide" over the title, the title 40 (32 on a phone), the byline under it, the post at 18/1.6 in the measure with paragraphs 20 apart, the resort's own card in the story, Pros and Cons as two lists in one box. Measured against Airbnb's article on 2026-10-07: a 600 column, body 18/28, title 40/46, subheads 32. */ html:not(#ts):not(#ts) .ts-article h1 { font-size: var(--ts-text-title); } html:not(#ts):not(#ts) .ts-article__crumb { margin: 0 0 var(--ts-space-3); text-align: center; font-size: var(--ts-text-body-sm); font-weight: 500; line-height: 1.6; color: var(--ts-ink-700); } html:not(#ts):not(#ts) .ts-article__crumb a { display: inline-block; padding-block: 11px; margin-block: -11px; color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color var(--ts-duration-fast) var(--ts-ease-standard); } /* 44 to tap, with no room taken */ html:not(#ts):not(#ts) .ts-article__crumb a:hover { color: var(--ts-brand-600); } html:not(#ts):not(#ts) .ts-article__meta { margin-top: var(--ts-space-4); } /* The byline: "By", the writer's photo round at 32, the name, then the date and the minutes, one row that wraps between its parts. On a post and on the guide's featured story. */ html:not(#ts):not(#ts) .ts-byline { font-size: var(--ts-text-body-sm); font-weight: 500; line-height: 1.6; color: var(--ts-ink-700); text-align: left; } html:not(#ts):not(#ts) .ts-byline img { display: inline-block; width: var(--ts-space-6); height: var(--ts-space-6); margin: 0 var(--ts-space-1); border-radius: var(--ts-radius-full); object-fit: cover; vertical-align: middle; background: var(--ts-ink-100); } html:not(#ts):not(#ts) .ts-byline b { font-weight: 600; color: var(--ts-ink-900); } html:not(#ts):not(#ts) .ts-byline > span { white-space: nowrap; } /* "Published May 30, 2023" never splits; the row wraps after a dot */ html:not(#ts):not(#ts) .ts-article .ts-prose { max-width: var(--ts-measure); margin-inline: auto; font-size: var(--ts-text-body-lg); line-height: 1.6; } html:not(#ts):not(#ts) .ts-article .ts-prose p + p { margin-top: var(--ts-space-4-5); } html:not(#ts):not(#ts) .ts-article .ts-prose h2 { font-size: var(--ts-text-h2); margin-top: var(--ts-space-8); } html:not(#ts):not(#ts) .ts-article .ts-prose blockquote { margin-block: var(--ts-space-8); padding-left: var(--ts-space-5); border-left: 2px solid var(--ts-brand-600); font-size: var(--ts-text-h3); font-weight: 600; line-height: 1.35; color: var(--ts-ink-900); } /* The resort the post is about, as its card on the results page: in a row on a laptop (the photo two fifths, the words three fifths), stacked on a phone. Teal and ink only; the post's one action is reading on. */ html:not(#ts):not(#ts) .ts-prose a.ts-card, html:not(#ts):not(#ts) .ts-prose a.ts-card:hover { color: var(--ts-ink-800); font-weight: 400; text-decoration: none; } html:not(#ts):not(#ts) .ts-prose .ts-card img { height: 100%; border-radius: 0; } html:not(#ts):not(#ts) .ts-prose .ts-card--inline { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); margin-block: var(--ts-space-6); font-size: var(--ts-text-body); line-height: 1.6; } html:not(#ts):not(#ts) .ts-prose .ts-card--inline .ts-card__photo { aspect-ratio: auto; height: 100%; min-height: 180px; } /* Pros and Cons: two lists side by side in one box; one list alone takes the box's width */ html:not(#ts):not(#ts) .ts-pc { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--ts-space-5); margin-block: var(--ts-space-6); padding: var(--ts-space-5); background: var(--ts-canvas-raised); border: 1px solid var(--ts-ink-200); border-radius: var(--ts-radius-lg); } html:not(#ts):not(#ts) .ts-prose .ts-pc h2 { margin: 0 0 var(--ts-space-2); font-size: var(--ts-text-body-lg); line-height: 1.3; } html:not(#ts):not(#ts) .ts-prose .ts-pc ul { margin: 0; padding-left: var(--ts-space-4-5); font-size: var(--ts-text-body); } html:not(#ts):not(#ts) .ts-prose > :is(.ts-card--inline, .ts-pc):last-child { margin-bottom: 0; } /* a post that ends on its resort card keeps the page head's 64 to "Recent posts", not 96 */ /* The guide's featured story: the sticky post, else the newest. The photo seven columns of twelve, 16:9; beside it the kind, the title 32 (24 on a phone), the post's first lines at 18 and the byline. Stacked on a phone. */ html:not(#ts):not(#ts) .ts-feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--ts-space-7); color: var(--ts-ink-800); text-decoration: none; } html:not(#ts):not(#ts) .ts-feature__photo { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--ts-radius-lg); background: var(--ts-ink-50); } html:not(#ts):not(#ts) .ts-feature__photo img { display: block; width: 100%; height: 100%; object-fit: cover; } html:not(#ts):not(#ts) .ts-feature__words { display: flex; flex-direction: column; } html:not(#ts):not(#ts) .ts-feature__title { font-size: var(--ts-text-h2); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--ts-ink-900); text-wrap: balance; transition: color var(--ts-duration-fast) var(--ts-ease-standard); } html:not(#ts):not(#ts) .ts-feature:hover .ts-feature__title { color: var(--ts-brand-600); } html:not(#ts):not(#ts) .ts-feature__text { margin-top: var(--ts-space-3); font-size: var(--ts-text-body-lg); line-height: 1.6; } html:not(#ts):not(#ts) .ts-feature__meta { margin-top: var(--ts-space-2); } @media (max-width: 767px) { html:not(#ts):not(#ts) .ts-pagehead.ts-article h1 { font-size: var(--ts-text-h2); } /* outweighs the page head's 24 on a phone */ html:not(#ts):not(#ts) .ts-article .ts-prose h2 { font-size: var(--ts-text-h3); margin-top: var(--ts-space-6); } html:not(#ts):not(#ts) .ts-prose .ts-card--inline { grid-template-columns: minmax(0, 1fr); } html:not(#ts):not(#ts) .ts-prose .ts-card--inline .ts-card__photo { aspect-ratio: 3 / 2; height: auto; min-height: 0; } html:not(#ts):not(#ts) .ts-pc { grid-auto-flow: row; } html:not(#ts):not(#ts) .ts-feature { grid-template-columns: minmax(0, 1fr); gap: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-feature__title { font-size: var(--ts-text-h3); } } /* a list of questions that each open their own page */ html:not(#ts):not(#ts) .ts-qlinks { list-style: none; margin: 0; padding: 0; max-width: 720px; } html:not(#ts):not(#ts) .ts-qlinks li { border-bottom: 1px solid var(--ts-ink-200); } html:not(#ts):not(#ts) .ts-qlinks li:first-child { border-top: 1px solid var(--ts-ink-200); } html:not(#ts):not(#ts) .ts-qlinks a { display: flex; align-items: center; justify-content: space-between; gap: var(--ts-space-4); min-height: 56px; padding-block: var(--ts-space-3); font-weight: 600; color: var(--ts-ink-900); line-height: 1.4; text-decoration: none; } html:not(#ts):not(#ts) .ts-qlinks a:hover { color: var(--ts-brand-600); } html:not(#ts):not(#ts) .ts-qlinks svg { flex: none; color: var(--ts-brand-600); } html:not(#ts):not(#ts) .ts-tag { margin-top: var(--ts-space-5); } /* a message page: the 404, the thank-you after the contact form, the booking messages. One column in the middle, the illustration over the words where the page has one (Airbnb's empty state), one button. */ html:not(#ts):not(#ts) .ts-message { display: flex; flex-direction: column; align-items: center; max-width: 560px; margin-inline: auto; padding-top: var(--ts-space-8); text-align: center; } html:not(#ts):not(#ts) .ts-message__art { width: 100%; max-width: 320px; height: auto; margin-bottom: var(--ts-space-6); border-radius: var(--ts-radius-lg); } html:not(#ts):not(#ts) .ts-message h1 { font-size: var(--ts-text-h2); } html:not(#ts):not(#ts) .ts-message > p { margin-top: var(--ts-space-3); font-size: var(--ts-text-body-lg); } html:not(#ts):not(#ts) .ts-message .ts-prose { width: 100%; margin-top: var(--ts-space-5); text-align: left; } html:not(#ts):not(#ts) .ts-message .ts-btn { margin-top: var(--ts-space-6); } @media (max-width: 1023px) { html:not(#ts):not(#ts) .ts-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } html:not(#ts):not(#ts) .ts-team { gap: var(--ts-space-4); } /* still three across, so Ian stays under Donald */ html:not(#ts):not(#ts) .ts-team li { grid-template-columns: 112px minmax(0, 1fr); column-gap: var(--ts-space-3); padding: var(--ts-space-4-5); } html:not(#ts):not(#ts) .ts-team img, html:not(#ts):not(#ts) .ts-team li > i { width: 112px; height: 112px; } } @media (max-width: 767px) { html:not(#ts):not(#ts) .ts-pagehead__band { aspect-ratio: 16 / 9; } html:not(#ts):not(#ts) .ts-pagehead__band[src*="/img/art/"] { aspect-ratio: 16 / 9; max-height: none; object-fit: cover; } /* a phone shows the 16:9 crop, which fits the drawings (Ian, 2026-10-05) */ html:not(#ts):not(#ts) .ts-pagehead__band[src*="/img/art/hero-scout-overlook"] { object-position: 60% 50%; } /* the overlook's phone crop sits 60% across, not in the middle, so the dark bush in its bottom-left corner stays out of the frame and the scowt stays whole; 58% is the least that clears it (Ian, 2026-10-08: "move this image slightly to the right so that the black corner is out of the frame") */ html:not(#ts):not(#ts) .ts-pagehead__band--tall[src*="/img/art/"] { object-fit: contain; } /* a drawing narrower than 3:2 shows whole inside the same 16:9 box, on the wash (the Vacation Guide's; was its own height up to 320, 303 at 390: Ian, 2026-10-06, one size for every band) */ html:not(#ts):not(#ts) .ts-split > img { order: -1; margin-bottom: var(--ts-space-5); } /* the picture above its heading on a phone (Ian, 2026-10-05, Marriott Vacation Club) */ html:not(#ts):not(#ts) .ts-quotes { grid-template-columns: 1fr; } html:not(#ts):not(#ts) .ts-pagehead h1, html:not(#ts):not(#ts) .ts-prose h1, html:not(#ts):not(#ts) .ts-message h1 { font-size: var(--ts-text-h3); } html:not(#ts):not(#ts) .ts-pagehead__lead, html:not(#ts):not(#ts) .ts-message > p { font-size: var(--ts-text-body); } html:not(#ts):not(#ts) .ts-split, html:not(#ts):not(#ts) .ts-steps { grid-template-columns: minmax(0, 1fr); gap: var(--ts-space-5); } html:not(#ts):not(#ts) .ts-split--flip > :first-child { order: 0; } html:not(#ts):not(#ts) .ts-split .ts-btn, html:not(#ts):not(#ts) .ts-steps .ts-btn, html:not(#ts):not(#ts) .ts-pagehead .ts-btn { display: flex; width: fit-content; margin-inline: auto; } /* centered on a phone, as "About us" is on the home page; the page head's too (Ian, 2026-10-06: "where it says 'Contact Us.' Can you center those?") */ /* Section titles centered on a phone over their left-aligned text, the page head's pattern (rule 27), wherever a title sits over words, a list or a picture: splits, steps, reasons, questions, the team, quotes and the contact cards, home included. A title over a row of resort cards or state tiles stays left, as Vrbo and Airbnb draw it (Ian, 2026-10-06: "just center the titles on mobile ... for all the titles on that page and any other pages that have similar setups"). */ html:not(#ts):not(#ts) .ts-split h2, html:not(#ts):not(#ts) .ts-steps h2, html:not(#ts):not(#ts) .ts-owners h2, html:not(#ts):not(#ts) .ts-faq__in > div:first-child h2, html:not(#ts):not(#ts) .ts-head:has(+ .ts-reasons, + .ts-ways, + .ts-team, + .ts-quotes, + .ts-qlinks) h2 { text-align: center; } html:not(#ts):not(#ts) .ts-head:has(+ .ts-reasons, + .ts-ways, + .ts-team, + .ts-quotes, + .ts-qlinks) { justify-content: center; } /* the head is a flex row that would hold the title at the left */ html:not(#ts):not(#ts) .ts-head:has(+ .ts-reasons, + .ts-ways, + .ts-team, + .ts-quotes, + .ts-qlinks) > div { width: 100%; } html:not(#ts):not(#ts) .ts-pagehead .ts-btn, html:not(#ts):not(#ts) .ts-split .ts-btn, html:not(#ts):not(#ts) .ts-steps .ts-btn, html:not(#ts):not(#ts) .ts-message .ts-btn { max-width: 100%; height: auto; min-height: 48px; padding-block: var(--ts-space-3); white-space: normal; text-align: center; line-height: 1.3; } /* a long label wraps, never runs off a 320 screen */ html:not(#ts):not(#ts) .ts-ways, html:not(#ts):not(#ts) .ts-team, html:not(#ts):not(#ts) .ts-quotes { grid-template-columns: minmax(0, 1fr); gap: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-team li { grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--ts-space-4); padding: var(--ts-space-4); } /* 96 and 16 in, so no name wraps at 320 */ html:not(#ts):not(#ts) .ts-team img, html:not(#ts):not(#ts) .ts-team li > i { width: 96px; height: 96px; } html:not(#ts):not(#ts) .ts-team li > i { font-size: var(--ts-text-h2); } html:not(#ts):not(#ts) .ts-team p { margin-top: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-cta { padding: var(--ts-space-5); gap: var(--ts-space-4); } html:not(#ts):not(#ts) .ts-scout__who a { display: none; } /* a phone shows the photo, "Danielle, your scout" and "Send message", no email (Ian, 2026-10-06: "get rid of the email and the link ... Only on mobile"); a laptop keeps the email as a link */ html:not(#ts):not(#ts) .ts-scout { row-gap: var(--ts-space-1); } /* with no email the name sits in the middle of the 48 photo, 25 under "Have a question?" where a laptop has 12; 4 above the photo brings it to 17 (Ian, 2026-10-06: "the gap is too wide"; F-199) */ html:not(#ts):not(#ts) .ts-book .ts-scout > .ts-btn { margin-top: var(--ts-space-4-5); } /* 4 plus 20: 24 under the photo, as under the line */ html:not(#ts):not(#ts) .ts-cta .ts-btn { max-width: 100%; height: auto; min-height: 48px; padding-block: var(--ts-space-3); white-space: normal; text-align: center; line-height: 1.3; } /* a long label wraps, never runs off a 320 screen */ html:not(#ts):not(#ts) .ts-prose h2 { font-size: var(--ts-text-h4); margin-top: var(--ts-space-6); } html:not(#ts):not(#ts) .ts-prose h3 { font-size: var(--ts-text-body-lg); } html:not(#ts):not(#ts) .ts-message { padding-top: var(--ts-space-6); } html:not(#ts):not(#ts) .ts-message__art { max-width: 240px; margin-bottom: var(--ts-space-5); } } /* WordPress only: [ts_search] sits on the hero photo, so its wrapper paints no background of its own. */ html:not(#ts):not(#ts):not(#ts) .ts-page.ts-mount { background: none; } /* WordPress only: the home hero on a phone, Elementor's containers and widgets on page 4347 (note 12). From the old Custom Code 37274, with its values and its !important. */ @media (max-width: 767px) { html:not(#ts):not(#ts):not(#ts) .elementor-element.elementor-element-7ee6b99, html:not(#ts):not(#ts):not(#ts) .elementor-element.elementor-element-9d5320c { min-height: 0 !important; } html:not(#ts):not(#ts):not(#ts) .elementor-element.elementor-element-9d5320c { padding-top: 184px !important; padding-bottom: 28px !important; gap: 36px !important; justify-content: flex-start !important; } html:not(#ts):not(#ts):not(#ts) .elementor-element.elementor-element-9d5320c > .e-con-inner { gap: 36px !important; row-gap: 36px !important; } html:not(#ts):not(#ts):not(#ts) .elementor-element.elementor-element-74a1a2b, html:not(#ts):not(#ts):not(#ts) .elementor-element.elementor-element-74a1a2b > .elementor-widget-container { padding: 0 !important; margin: 0 !important; } html:not(#ts):not(#ts):not(#ts) .elementor-element.elementor-element-74a1a2b { width: 100% !important; max-width: 100% !important; align-self: stretch !important; text-align: center !important; } html:not(#ts):not(#ts):not(#ts) .elementor-element.elementor-element-74a1a2b .elementor-heading-title { font-size: min(36px, calc((100vw - 40px) / 9.6)) !important; line-height: 1.15 !important; letter-spacing: -0.015em !important; white-space: normal !important; text-wrap: balance !important; text-align: center !important; overflow-wrap: normal; text-transform: lowercase; } html:not(#ts):not(#ts):not(#ts) .elementor-element.elementor-element-74a1a2b .elementor-heading-title::first-letter { text-transform: uppercase; } html:not(#ts):not(#ts):not(#ts) .elementor-element.elementor-element-9ce491c, html:not(#ts):not(#ts):not(#ts) .elementor-element.elementor-element-9ce491c > .elementor-widget-container { height: auto !important; min-height: 0 !important; } html:not(#ts):not(#ts):not(#ts) .elementor-element.elementor-element-c5efc44 { display: none !important; } } /* WordPress only: a signed-in admin on a phone. The toolbar is at 99999 and would cover a sheet's X. */ @media (max-width: 767px) { html:not(#ts):not(#ts):not(#ts) .admin-bar .ts-pop--sheet, html:not(#ts):not(#ts):not(#ts) .admin-bar .ts-dateswrap .ts-pop, html:not(#ts):not(#ts):not(#ts) .admin-bar .ts-photos { z-index: 100080; } } /* WordPress only: each home page section is a widget of its own, so the space above it is the wrapper's. The Elementor container that holds the widget is set to full width with no padding. */ html:not(#ts):not(#ts):not(#ts) .ts-page.ts-home { padding-top: var(--ts-section-gap); } html:not(#ts):not(#ts):not(#ts) .e-con:has(.ts-searchbox):not(:has(.ts-results)) + .e-con .ts-page.ts-home { padding-top: var(--ts-section-first); } /* the home hero's search bar, not the results' (/resorts/ carries [ts_results]) */ @media (max-width: 767px) { html:not(#ts):not(#ts):not(#ts) .ts-page.ts-mount:has(> .ts-searchbox) { margin-top: var(--ts-space-1); } } html:not(#ts):not(#ts):not(#ts) .ts-page.ts-home .ts-state { color: inherit; text-decoration: none; } /* WordPress only: on a phone the resort page's booking bar is fixed to the bottom of the screen, and the site's footer comes after the page, so the page's last lines would sit under the bar. */ @media (max-width: 767px) { html:not(#ts):not(#ts):not(#ts) body:has(.ts-resortpage) { padding-bottom: 88px; } } /* WordPress only: the site pages of phase 10b. The top of a page sits under the site header with its own space, and the last section keeps the section space under it before the footer, unless it is a band that touches the footer. */ html:not(#ts):not(#ts):not(#ts) .ts-page.ts-home.ts-top { padding-top: 0; } html:not(#ts):not(#ts):not(#ts) .e-con:has(.ts-top) + .e-con .ts-page.ts-home, html:not(#ts):not(#ts):not(#ts) .e-con:has(.ts-top) + .e-con.ts-elform { padding-top: 0; } /* the section after a page head sits one section space under it, not two (Ian, 2026-10-05: the Vacation Guide and Testimonials gaps) */ /* only the last section of the last container: the Vacation guide's one shortcode prints the head, the featured story and two rows, and each row kept 80 under it on top of the next one's 80 (0.3.46) */ html:not(#ts):not(#ts):not(#ts) .elementor > .e-con:last-child .ts-page.ts-home:not(:has(> .ts-faq)):not(:has(~ .ts-page.ts-home)), html:not(#ts):not(#ts):not(#ts) .ts-page.ts-home.ts-top:has(.ts-message) { padding-bottom: var(--ts-section-gap); } /* The first section sits one page-section space under the head's last line, 48 on a laptop and 32 on a phone (spacing.md, from Airbnb's listing sections), on every page with a head. Ian, 2026-10-05: Testimonials' quotes touched the line above them (0) and the Vacation Guide's cards sat 160 under it; Marriott Vacation Club 20, Renters and Owners 0 to the section's box. The Vacation Guide's head and cards share one shortcode in the archive template, so its cards are the head's own sibling. */ html:not(#ts):not(#ts):not(#ts) .e-con:has(.ts-top):not(:last-child) .ts-page.ts-home.ts-top:not(:has(.ts-message)), html:not(#ts):not(#ts):not(#ts) .elementor .e-con .ts-page.ts-home.ts-top:has(+ .ts-page.ts-home) { padding-bottom: var(--ts-head-after); } /* 64 and 40 since 2026-10-06 (Ian: "spread out just a tiny bit"), was 48 and 32 */ html:not(#ts):not(#ts):not(#ts) .ts-page.ts-home.ts-top + .ts-page.ts-home { padding-top: 0; } /* Resorts: the search bar belongs to the head, so it sits as far under the head's line as the title sits under the site header, 32 and 24 (Ian, 2026-10-06: "the gap from that to the header and then from the underline to the search bar is not equal ... raise it up a little bit, maybe, and then even it out"; it was 32 over the title and 72 under the line). And the results end one section space above the next section, 80 and 56, not the results page's own 64 plus it (144, Ian: "the gap from here to the resort card is larger than it is from the picture to 'Timeshare rentals in top U.S. destinations'"). */ html:not(#ts):not(#ts):not(#ts) .e-con:has(.ts-top):has(+ .e-con .ts-results) .ts-page.ts-home.ts-top:not(:has(.ts-message)) { padding-bottom: var(--ts-head-top); } html:not(#ts):not(#ts):not(#ts) .e-con:has(.ts-top) + .e-con .ts-results { padding-top: 0; } html:not(#ts):not(#ts):not(#ts) .e-con:has(.ts-results):not(:last-child) .ts-results { padding-bottom: 0; } /* WordPress only: the site header (Elementor's container 5a91f1b) is fixed at the top, 80 high from 768 up since the header redraw of 2026-10-07 (it was 100, 97 at 1024, 92 at 800), and 32 lower under the admin toolbar. The pinned booking box and the request form's stay card stop 24 under it; at 72 the old header covered "From $850 a night" (Ian's recording, 2026-10-05). */ html:not(#ts):not(#ts):not(#ts) .ts-book--pinned, html:not(#ts):not(#ts):not(#ts) .ts-sum { top: calc(80px + var(--ts-space-5)); } html:not(#ts):not(#ts):not(#ts) .admin-bar .ts-book--pinned, html:not(#ts):not(#ts):not(#ts) .admin-bar .ts-sum { top: calc(112px + var(--ts-space-5)); } /* WordPress only: "More resorts in " sits one page-section space under the resort page's grid, 48 on a laptop and 32 on a phone, not the grid's 64 plus a home section's 80 (185 under "Show all 10 questions", Ian's recording, 2026-10-05). */ html:not(#ts):not(#ts):not(#ts) .ts-resortpage:has(> .ts-page.ts-home) .ts-cols { padding-bottom: 0; } html:not(#ts):not(#ts):not(#ts) .ts-resortpage > .ts-page.ts-home { padding-top: var(--ts-section); } /* WordPress only: the home reviews. Elfsight's Google reviews widget draws its own "Load More" under its cards, and our "Read all reviews" ([ts_button], in the next container) sat under that, so there were two buttons for one job, one centred and one 86 under the cards. Vrbo's listing has one, "See all 4 verified reviews", about 16 under the cards and no load more (Ian, 2026-10-06: "do it how VRBO does it"). Wherever our button follows the widget, the widget's Load More goes. Testimonials runs the same widget (6a15ea0e) with no button after it, so it keeps its own. */ html:not(#ts):not(#ts):not(#ts) .e-con:has(+ .e-con .ts-said__all) .es-load-more-button-container { display: none; } /* WordPress only: the footer (template 135) opens with an empty container, 6edfdd9, 20 high, so the sign-up band sat 100 under every page's last section on a laptop and 76 on a phone, not one section space (80 and 56). Ian's item 7d, "the spacing between the Email, Office and Phone details and the email signup banner" (batch F, 0.3.16). Hidden only while it holds nothing. */ .elementor-location-footer > .elementor-element-6edfdd9:not(:has(.elementor-widget)) { display: none; } /* WordPress only: Elementor's contact form, in a container with the class ts-elform, in the system's field and button. */ html:not(#ts):not(#ts):not(#ts) .ts-elform { box-sizing: border-box; width: 100%; max-width: var(--ts-container); margin-inline: auto; padding: var(--ts-space-6) var(--ts-gutter) 0; } html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-widget-form { width: 100%; max-width: 640px; margin-inline: auto; } /* centred (Ian, 2026-10-05) */ /* Elementor pads each field box 5px a side and pulls the wrapper out by the same, so the boxes overhang the form by 8px and iPhone Safari cut the Send pill flat at the right edge (Ian's screenshot, 2026-10-05). No overhang: the boxes sit inside the form, two half-width boxes keep a 16px gap, and the button can never be wider than the form. */ html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-form-fields-wrapper { margin-inline: 0; margin-bottom: calc(-1 * var(--ts-space-4)); column-gap: var(--ts-space-4); } /* the bottom margin matches the field gap: Elementor's -20 under fields 16 apart let the next section paint over Send's last 4px (the 2026-10-06 walk) */ html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-field-group { padding-inline: 0; margin-bottom: var(--ts-space-4); } html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-field-group.elementor-col-50 { width: calc(50% - var(--ts-space-2)); flex-basis: calc(50% - var(--ts-space-2)); } html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-field-group.elementor-col-100 { width: 100%; flex-basis: 100%; } html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-button { box-sizing: border-box; max-width: 100%; } html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-field-label { padding: 0; margin-bottom: var(--ts-space-1); font: 600 var(--ts-text-body-sm)/1.4 var(--ts-font-web); color: var(--ts-ink-900); } html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-field-group .elementor-field-textual { box-sizing: border-box; width: 100%; height: 56px; min-height: 56px; padding: 0 var(--ts-space-3); /* 56, as the site's own fields (F-142) */ border: 1px solid var(--ts-ink-500); border-radius: var(--ts-radius-sm); background: var(--ts-canvas-raised); color: var(--ts-ink-900); font: 400 var(--ts-text-body)/1.4 var(--ts-font-web); font-size-adjust: var(--ts-font-web-adjust); } html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-field-group textarea.elementor-field-textual { height: auto; min-height: 120px; padding-block: var(--ts-space-3); line-height: 1.6; } html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-field-group .elementor-field-textual:focus { outline: 0; border-color: var(--ts-brand-600); box-shadow: 0 0 0 1px var(--ts-brand-600); } html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-field-group .elementor-field-textual::placeholder { color: var(--ts-ink-500); opacity: 1; } html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-field-group.elementor-error .elementor-field-textual { border-color: var(--ts-error); box-shadow: 0 0 0 1px var(--ts-error); } html:not(#ts):not(#ts):not(#ts) .ts-elform .e-form__buttons { justify-content: center; } /* Google's reCAPTCHA badge ("protected by reCAPTCHA", 256 wide) sat on the form's left edge under the centred Send pill. Centred under it (Ian, 2026-10-06: "can you center Protected by Recaptcha"). */ html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-field-type-recaptcha_v3 > .elementor-field { display: flex; justify-content: center; width: 100%; } html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-button { box-sizing: border-box; height: 48px; min-height: 48px; padding: 0 var(--ts-space-5); border: 0; border-radius: var(--ts-radius-pill); background: var(--ts-accent-500); color: var(--ts-ink-900); font: 600 var(--ts-text-body)/1 var(--ts-font-web); } html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-button:hover, html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-button:focus { background: var(--ts-accent-600); color: var(--ts-ink-900); } html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-message { margin-top: var(--ts-space-2); font: 600 var(--ts-text-body-sm)/1.4 var(--ts-font-web); color: var(--ts-error); } html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-message.elementor-message-success { color: var(--ts-success); } html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-message::before { display: none; } /* ── The press and open pass (0.3.72, Ian, 2026-10-13, motion-pass.md in the vault) ────────────────────────────────── Airbnb's feedback moves, in the system's own durations. A button presses in to 0.96 for 100ms (buttons only, never a card: Ian). A popover, the photos sheet and an FAQ answer arrive with the system's fade-up or fade-in, 240ms. A photo fades in as it loads instead of popping (assets/js/ts-sitewide.js marks each one). A button that is sending shows three dots pulsing in turn in place of its label; the label stays in the DOM for a screen reader, with aria-busy. */ @keyframes ts-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes ts-fade-in { from { opacity: 0; } to { opacity: 1; } } html:not(#ts):not(#ts) .ts-btn:active:not(:disabled):not([aria-busy="true"]), html:not(#ts):not(#ts) .ts-icon-btn:active:not(:disabled), html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-button:active:not([aria-busy="true"]) { transform: scale(0.96); } html:not(#ts):not(#ts) .ts-pop:not(.ts-pop--ask):not([hidden]) { animation: ts-fade-up var(--ts-duration-normal) var(--ts-ease-standard) 1 both; } html:not(#ts):not(#ts) .ts-pop--ask:not([hidden]), html:not(#ts):not(#ts) .ts-photos:not([hidden]) { animation: ts-fade-in var(--ts-duration-normal) var(--ts-ease-standard) 1 both; } html:not(#ts):not(#ts) .ts-qs details[open] > p { animation: ts-fade-up var(--ts-duration-normal) var(--ts-ease-standard) 1 both; } html:not(#ts):not(#ts) img.ts-fade { opacity: 0; transition: opacity var(--ts-duration-normal) var(--ts-ease-standard); } html:not(#ts):not(#ts) img.ts-fade.is-loaded { opacity: 1; } /* sending: the three dots take the label's colour; a line button's dots are ink, an orange button's ink, a teal button's white */ html:not(#ts):not(#ts) .ts-btn, html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-button { --ts-dot: var(--ts-ink-900); --ts-dot-dim: rgba(17, 25, 39, 0.3); } html:not(#ts):not(#ts) .ts-btn--teal { --ts-dot: #fff; --ts-dot-dim: rgba(255, 255, 255, 0.4); } html:not(#ts):not(#ts) .ts-btn[aria-busy="true"], html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-button[aria-busy="true"] { position: relative; color: transparent !important; cursor: progress; } html:not(#ts):not(#ts) .ts-btn[aria-busy="true"]:disabled { opacity: 1; } html:not(#ts):not(#ts) .ts-btn[aria-busy="true"]::after, html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-button[aria-busy="true"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--ts-dot-dim); box-shadow: -12px 0 0 var(--ts-dot), 12px 0 0 var(--ts-dot-dim); animation: ts-dots 1.2s linear infinite; } @keyframes ts-dots { 0%, 100% { background: var(--ts-dot-dim); box-shadow: -12px 0 0 var(--ts-dot), 12px 0 0 var(--ts-dot-dim); } 33% { background: var(--ts-dot); box-shadow: -12px 0 0 var(--ts-dot-dim), 12px 0 0 var(--ts-dot-dim); } 66% { background: var(--ts-dot-dim); box-shadow: -12px 0 0 var(--ts-dot-dim), 12px 0 0 var(--ts-dot); } } @media (prefers-reduced-motion: reduce) { html:not(#ts):not(#ts) .ts-btn:active, html:not(#ts):not(#ts) .ts-icon-btn:active, html:not(#ts):not(#ts):not(#ts) .ts-elform .elementor-button:active { transform: none; } html:not(#ts):not(#ts) .ts-pop:not([hidden]), html:not(#ts):not(#ts) .ts-photos:not([hidden]), html:not(#ts):not(#ts) .ts-qs details[open] > p { animation: none; } html:not(#ts):not(#ts) img.ts-fade { opacity: 1; transition: none; } }