/*
* Trip Cart — web client styling (L5).
*
* The demo audience is an Expedia SVP, so the look-and-feel deliberately
* echoes a familiar large-OTA search experience: a dark-navy header, a
* tabbed search bar, and card-based result tiles. Layout/typography/colour
* only — NO Expedia logos, wordmarks, or other trademarked assets.
*
* Day 2-3 scope: the Start and Results screens. Cart / package screens
* follow Day 4-5; the cart rail here is a visible placeholder.
*/
/*
* Color tokens — Day 6-7 polish for the Expedia SVP demo.
*
* Warren's literal direction: primary CTA "suspiciously like Expedia". Their
* 2025-era primary action is a saturated mid-blue (#1668E3-ish) against a
* deep-navy header (#191E3B), with a warm-yellow accent (#FFC72C). We pin
* those token values verbatim — they're industry-standard CTA-blue territory,
* not trademarked assets. NO Expedia logos, wordmarks, or icons in the build.
*/
:root {
--navy: #191e3b; /* header / hero — Expedia-suspicious deep navy */
--navy-deep: #11152c;
--blue: #1668e3; /* primary CTA — Expedia-suspicious action blue */
--blue-dark: #0e54bf;
--accent: #ffc72c; /* warm-yellow accent — logo mark + hero highlight */
--accent-deep: #f5a623;
--ink: #1a1a2e;
--muted: #5a6478;
--line: #e3e6ed;
--bg: #f4f5f8;
--card: #ffffff;
--ok: #1c7a45;
--radius: 12px;
--shadow: 0 1px 3px rgba(20, 30, 60, 0.12), 0 6px 18px rgba(20, 30, 60, 0.08);
--shadow-hover: 0 2px 6px rgba(20, 30, 60, 0.16), 0 12px 28px rgba(20, 30, 60, 0.14);
}
* { box-sizing: border-box; }
/* Several .tc-* classes set `display: flex|grid|block`, which overrides the
implicit `display: none` from the HTML `hidden` attribute. Re-assert it
globally so any element marked `hidden` is reliably invisible — otherwise
empty enrich/savings/cart-rail panels leak as blank white boxes. */
[hidden] { display: none !important; }
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif;
color: var(--ink);
background: var(--bg);
line-height: 1.45;
}
a { color: var(--blue); }
/* --- Header ------------------------------------------------------------- */
.tc-header {
background: var(--navy);
color: #fff;
padding: 0;
}
.tc-header__bar {
max-width: 1120px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 16px;
padding: 14px 20px;
}
.tc-logo {
display: flex;
align-items: center;
gap: 9px;
font-weight: 700;
font-size: 20px;
letter-spacing: -0.2px;
color: #fff;
text-decoration: none;
}
.tc-logo:hover { color: #fff; }
.tc-logo:visited { color: #fff; }
/* T84 wordmark — rendered inline via 
. The SVG viewBox is 360x80; rendering at 40px tall
keeps it readable in a 14px-padded header bar without overwhelming the
nav. The legacy `.tc-logo__mark` chip below stays defined so any leftover
reference (or fallback when the SVG fails to load) still renders. */
.tc-logo__wordmark {
height: 40px;
width: auto;
display: block;
}
/* Legacy geometric mark — superseded by .tc-logo__wordmark (T84) but kept
defined so a fallback render or a small-screen variant has the token. */
.tc-logo__mark {
width: 26px;
height: 26px;
border-radius: 7px;
background: linear-gradient(135deg, var(--accent), var(--accent-deep));
display: inline-block;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}
.tc-header__spacer { flex: 1; }
.tc-header__account {
font-size: 13px;
color: #c7d0e4;
}
/* --- Search-tabs bar ---------------------------------------------------- */
.tc-tabs {
max-width: 1120px;
margin: 0 auto;
display: flex;
gap: 4px;
padding: 0 20px;
/* T117 mobile fix (#2871): on narrow viewports the four tabs
* (Flights / Stays / Cars / Things to do) cannot fit on a single row at
* 393 px and the rightmost label gets clipped by the viewport edge. Allow
* horizontal scroll with scroll-snap so each tab snaps into place; hide
* the scrollbar chrome so the tab strip still reads as a nav bar, not a
* scroller. Tabs themselves get flex-shrink:0 (below) so the labels stay
* legible instead of squeezing. */
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
}
.tc-tabs::-webkit-scrollbar { display: none; } /* Chromium / WebKit */
.tc-tab {
appearance: none;
background: transparent;
border: none;
color: #c7d0e4;
font: inherit;
font-size: 15px;
font-weight: 600;
padding: 12px 16px 14px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 3px solid transparent;
/* T117 (#2871): keep labels intact while the tab strip scrolls horizontally
* on phone-class viewports. */
flex: 0 0 auto;
white-space: nowrap;
scroll-snap-align: start;
}
.tc-tab:hover { color: #fff; }
.tc-tab[aria-selected="true"] {
color: #fff;
border-bottom-color: var(--accent);
}
.tc-tab__icon { font-size: 17px; line-height: 1; }
/* --- Search panel ------------------------------------------------------- */
.tc-searchwrap {
background: var(--navy);
padding: 12px 0 22px;
}
/* T114 Expedia UX-match: lift the search card so it visually straddles the
* boundary between the navy hero and the page body — every measured OTA
* (Expedia, Kayak, Hotels.com lockup) floats the search wizard so part of
* the card sits over the hero gradient and part over the page background.
* The negative margin only applies on the results screen (.tc-searchwrap
* inside .tc-header followed by .tc-main); the landing-page wizard stays
* inside the hero because the landing has the destination-chip row
* directly below and a value-prop trio after that. */
.tc-header .tc-searchwrap + * { /* no-op anchor for the rule above */ }
.tc-results-lift .tc-searchwrap {
padding-bottom: 0;
}
.tc-results-lift .tc-search {
margin-bottom: -32px;
position: relative;
z-index: 2;
}
.tc-results-lift + .tc-main {
padding-top: 56px;
}
.tc-search {
max-width: 1120px;
margin: 0 auto;
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 14px;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: flex-end;
}
.tc-field {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1 1 150px;
}
.tc-field label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--muted);
}
.tc-field input,
.tc-field select {
font: inherit;
font-size: 14px;
padding: 10px 11px;
border: 1px solid var(--line);
border-radius: 8px;
background: #fff;
color: var(--ink);
}
.tc-field input:focus,
.tc-field select:focus {
outline: 2px solid var(--blue);
outline-offset: -1px;
border-color: var(--blue);
}
/* Primary CTA — "suspiciously like Expedia" (Warren's brief). Saturated
action-blue with a subtle press-lift and a hairline focus ring so the
button reads as the obvious next step in every screen. */
.tc-btn {
appearance: none;
border: none;
font: inherit;
font-weight: 700;
font-size: 15px;
border-radius: 8px;
padding: 11px 26px;
cursor: pointer;
background: var(--blue);
color: #fff;
/* Defend against `` inheriting the global underline +
visited-purple from the `a { color: ... }` rule — buttons must look
like buttons regardless of underlying element. */
text-decoration: none;
display: inline-block;
text-align: center;
transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.tc-btn:hover { background: var(--blue-dark); box-shadow: 0 2px 6px rgba(22, 104, 227, 0.32); color: #fff; }
.tc-btn:visited { color: #fff; }
.tc-btn:active { transform: translateY(1px); }
.tc-btn:focus-visible {
outline: 3px solid rgba(22, 104, 227, 0.35);
outline-offset: 2px;
}
.tc-btn--search { flex: 0 0 auto; }
.tc-btn--ghost {
background: #fff;
color: var(--blue);
border: 1px solid var(--blue);
}
.tc-btn--ghost:hover { background: #eef4fe; color: var(--blue); }
.tc-btn--ghost:visited { color: var(--blue); }
.tc-btn--added {
background: #e7f3ec;
color: var(--ok);
border: 1px solid #b6dcc4;
cursor: default;
}
/* --- Page layout -------------------------------------------------------- */
.tc-main {
max-width: 1120px;
margin: 0 auto;
padding: 24px 20px 64px;
display: grid;
grid-template-columns: 1fr 320px;
gap: 24px;
}
@media (max-width: 880px) {
.tc-main { grid-template-columns: 1fr; }
.tc-search { flex-direction: column; align-items: stretch; }
}
/* T117 mobile fix (#2870): on phone-class viewports (iPhone 13 Pro = 393 px,
* Pixel 7 = 412 px) the desktop two-column Results grid was overflowing
* (scrollWidth 511 > viewport 393). The 880 px breakpoint above already
* collapses the grid to a single column, but the header bar, search wizard,
* results title, and card rows still need tightening at phone widths so
* nothing pushes the body wider than 100vw. Everything below is CSS-only.
*
* Cart rail behaviour at phone+tablet-portrait widths (#2872, follow-up to
* T112 mobile review): Expedia, Booking, and Airbnb all use a bottom-sheet
* pattern on mobile rather than a desktop-derived side rail. The earlier
* triage tried to make the rail a stacked block below the cards, but
* `.tc-cart { position: sticky }` declared after the `@media` block won
* the cascade, so on phones the rail still sat at viewport scroll-bottom
* with no anchor. The real fix lives in the `@media (max-width: 768px)`
* block further down (search for `#2872`): we promote `.tc-cart` to a
* single fixed bottom bar that collapses its hint/items/note content into
* a one-line CTA. The existing ``
* anchor already provides the full-screen cart navigation, so this fix
* is CSS-only — no JS restructure, no overlay state machine.
*/
@media (max-width: 480px) {
/* Header: tighter horizontal padding so the wordmark + account chip
* never push the bar wider than the viewport. */
.tc-header__bar { padding: 14px 14px 6px; }
.tc-tabs { padding: 0 14px; }
.tc-searchwrap { padding: 8px 0 14px; }
/* Search wizard: full-width stacked fields. .tc-field defaults to
* `flex: 1 1 150px` which at 393 px caused two-up rows that wrapped
* awkwardly; force a single column. */
.tc-search { padding: 12px; gap: 8px; margin: 0 12px; }
.tc-field { flex: 1 1 100%; }
.tc-btn--search { width: 100%; padding: 12px; }
/* On the results screen the search card lifts -32 px to overlap the
* navy band; on phones that overlap reads as floating, so trim. */
.tc-results-lift .tc-search { margin-bottom: -16px; }
.tc-results-lift + .tc-main { padding-top: 32px; }
/* Main grid: tighter side padding, single column already from 880 px. */
.tc-main { padding: 16px 12px 96px; gap: 16px; }
/* Result cards: stack thumb on top, body in the middle, foot below — the
* desktop horizontal card was the second overflow culprit. */
.tc-card { flex-direction: column; }
.tc-card__thumb { flex: 0 0 120px; }
.tc-card__body { padding: 14px 16px; }
.tc-card__foot {
flex: 0 0 auto;
border-left: none;
border-top: 1px solid var(--line);
padding: 12px 16px;
flex-direction: row;
align-items: center;
justify-content: space-between;
text-align: left;
}
/* Cart rail bottom-bar styling lives in the @media (max-width: 768px)
* block below (#2872). The earlier `.tc-cart { position: static }` rule
* here was overridden by the unconditional `position: sticky` declared
* later in the cascade and never took effect, so it was removed when
* #2872 landed the real bottom-sheet pattern. */
/* Results header: keep title + count on the same line but allow wrap. */
.tc-results__head { flex-wrap: wrap; gap: 6px; }
.tc-results__title { font-size: 19px; }
}
.tc-results__head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin: 0 0 14px;
}
.tc-results__title { font-size: 21px; margin: 0; }
.tc-results__count { font-size: 13px; color: var(--muted); }
/* --- Result cards ------------------------------------------------------- */
.tc-cards { display: flex; flex-direction: column; gap: 16px; }
.tc-card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
display: flex;
overflow: hidden;
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.tc-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.tc-card__thumb {
flex: 0 0 168px;
background: linear-gradient(135deg, #cfe0fb, #eaf1fd);
display: flex;
align-items: center;
justify-content: center;
font-size: 44px;
}
/* T79 Expedia-fidelity pass — per-type thumbnail gradients. The card thumbs
* were a single pale-blue rectangle regardless of type; CSS-only gradients
* keyed by type give each card a coherent visual class without taking a
* dependency on stock photos. The Hawaii palette is deliberate:
* turquoise/sand for stays, tropical-sky blue for flights, warm-tan for
* cars, sunset coral for activities.
*/
.tc-card__thumb--hotel {
background: linear-gradient(135deg, #f5e8c7, #7ac4c2 70%, #2d8c8a);
}
.tc-card__thumb--flight {
background: linear-gradient(135deg, #e9f3ff, #7fb5f0 60%, #2069c7);
}
.tc-card__thumb--car {
background: linear-gradient(135deg, #f7e9d0, #cf9b66 70%, #8a5827);
}
.tc-card__thumb--activity {
background: linear-gradient(135deg, #ffe2c4, #ff9b6c 60%, #d8462b);
}
.tc-card__body {
flex: 1;
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.tc-card__title { font-size: 16px; font-weight: 700; margin: 0; }
.tc-card__meta {
font-size: 13px;
color: var(--muted);
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
.tc-badge {
display: inline-block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
padding: 2px 7px;
border-radius: 5px;
}
.tc-badge--gds { background: #e7f0ff; color: var(--blue-dark); }
.tc-badge--agent { background: #fdeccc; color: #946000; }
.tc-badge--seeded { background: #ebedf1; color: var(--muted); }
.tc-card__foot {
flex: 0 0 198px;
border-left: 1px solid var(--line);
padding: 18px 20px;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 10px;
text-align: right;
}
.tc-price { font-size: 22px; font-weight: 800; }
.tc-price__unit { font-size: 12px; color: var(--muted); font-weight: 600; }
/* --- Trip Cart rail ----------------------------------------------------- */
.tc-cart {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 16px;
position: sticky;
top: 20px;
align-self: start;
}
.tc-cart__head {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 800;
margin-bottom: 4px;
}
.tc-cart__count {
font-size: 12px;
font-weight: 700;
background: var(--blue);
color: #fff;
border-radius: 999px;
padding: 1px 8px;
}
.tc-cart__hint { font-size: 12px; color: var(--muted); margin: 0 0 12px; }
.tc-cart__items { list-style: none; margin: 0 0 12px; padding: 0; }
.tc-cart__item {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 13px;
padding: 8px 0;
border-bottom: 1px solid var(--line);
}
.tc-cart__item-title { color: var(--ink); }
.tc-cart__item-price { font-weight: 700; white-space: nowrap; }
.tc-cart__empty {
font-size: 13px;
color: var(--muted);
text-align: center;
padding: 18px 0;
}
.tc-cart__total {
display: flex;
justify-content: space-between;
font-size: 14px;
font-weight: 800;
padding-top: 6px;
}
/* Cart/package conversion lands Day 4-5 — surfaced, not yet wired. */
.tc-cart__note {
margin-top: 12px;
font-size: 11px;
color: var(--muted);
background: var(--bg);
border-radius: 8px;
padding: 8px 10px;
}
/* --- Mobile cart bottom-bar (#2872) ------------------------------------- *
* Mobile T112 review (apps/tripcart/exec/mobile-review-2026-05-24.md) found
* the desktop-derived sticky side rail loses its anchor on phones and reads
* as a buried block well below the cards. Expedia, Booking, and Airbnb all
* pin a single bottom bar on mobile that summarises cart state and tap-
* opens the full cart view. This block converts `.tc-cart` to that pattern
* at <=768px (covers iPhone 13 Pro 393x852, Pixel 7 412x915, and tablet-
* portrait). Pure CSS — the existing ``
* inside `.tc-cart` already handles the "open full cart" navigation, so no
* JS slide-up animation is wired here (filed as #2872-followup if wanted).
*
* Desktop (>768px) is untouched: the rail keeps its `position: sticky;
* top: 20px;` side-rail behaviour from the base `.tc-cart` rule above.
*/
@media (max-width: 768px) {
/* Promote the rail to a full-width fixed bar pinned to the viewport
* bottom. Override the unconditional `position: sticky` from the base
* `.tc-cart` rule. */
.tc-cart {
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: auto;
z-index: 50;
border-radius: 0;
border: none;
border-top: 1px solid var(--line);
box-shadow: 0 -2px 12px rgba(20, 30, 60, 0.12);
padding: 8px 12px;
/* Single-row inline layout: cart-head pill on the left, total + CTA on
* the right. Children (`__head`, `__total`, `__review`) are laid out
* with flexbox here; the empty-state `__hint` and the `__note` block
* are hidden via display:none below to keep the bar to ~56px tall.
* `overflow: hidden` clamps any child that exceeds bar width so the
* CTA cannot escape the viewport edge on a 393 px screen. */
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
min-height: 56px;
overflow: hidden;
}
/* Hide the verbose elements that only make sense in the desktop side
* rail. The empty-state hint and the long explanatory note do not fit
* a 56px bar; the per-item list collapses into the count pill + total. */
.tc-cart__hint,
.tc-cart__items,
.tc-cart__note {
display: none;
}
/* Cart head ("[icon] Your cart [N]") sits on the left and stays visible
* in empty state so the bar always reads as "Your cart 0". Allow it to
* shrink so the dollar + CTA always have room on a 393 px viewport. */
.tc-cart__head {
margin: 0;
flex: 0 1 auto;
min-width: 0;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Total row (hidden when cart is empty via the existing `hidden`
* attribute) sits inline between head and CTA. When visible, it
* collapses its label + value into a tight $-only chip — the
* "A la carte total" label is implicit on a phone bottom bar. */
.tc-cart__total {
margin: 0;
padding: 0;
flex: 1 1 auto;
justify-content: flex-end;
font-size: 15px;
font-weight: 800;
gap: 4px;
min-width: 0;
}
.tc-cart__total > span:first-child {
/* "A la carte total" label — drop on phones, keep just the dollar
* figure so the bar can fit the CTA in 393 px. */
display: none;
}
/* Review-cart CTA: compact pill on the right. When the cart is empty
* the anchor is `hidden` (the global `[hidden]{display:none}` rule
* still applies) so the bar shows only "Your cart 0". The `.tc-cart`
* compound selector bumps specificity above the base `.tc-cart__review`
* rule (declared later in source under "Cart screen (Day 4-5)") so the
* `display: block; width: 100%` desktop styling does not pull the CTA
* to full-bar width on phones. */
.tc-cart .tc-cart__review {
display: inline-block;
width: auto;
margin: 0;
flex: 0 0 auto;
padding: 9px 14px;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
}
/* Push the page bottom-padding so the last result card never sits
* underneath the fixed bar. 96px = ~56px bar + 40px breathing room. */
.tc-main { padding-bottom: 96px; }
}
/* --- States ------------------------------------------------------------- */
.tc-state {
background: var(--card);
border: 1px dashed var(--line);
border-radius: var(--radius);
padding: 32px;
text-align: center;
color: var(--muted);
font-size: 14px;
}
.tc-state--error {
border-color: #e6b8b8;
background: #fdf2f2;
color: #9a3434;
}
/* --- Cart screen (Day 4-5) --------------------------------------------- */
/* Slightly wider summary rail on the cart screen than on Results. */
.tc-main--cart { grid-template-columns: 1fr 360px; }
@media (max-width: 880px) {
.tc-main--cart { grid-template-columns: 1fr; }
}
.tc-cartpage { display: flex; flex-direction: column; gap: 16px; }
/* Per-card action row inside the card foot (Swap + Remove). */
.tc-card--cart .tc-card__foot { gap: 12px; }
.tc-card__actions {
display: flex;
gap: 6px;
margin-top: 4px;
justify-content: flex-end;
}
.tc-btn--small {
padding: 7px 12px;
font-size: 13px;
}
.tc-btn--danger {
color: #9a3434;
border-color: #e6b8b8;
}
.tc-btn--danger:hover { background: #fdf2f2; }
.tc-cart__review {
display: block;
width: 100%;
margin: 4px 0 12px;
text-align: center;
text-decoration: none;
}
/* Summary rail — the single opaque package price + savings. */
.tc-summary {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 18px;
position: sticky;
top: 20px;
align-self: start;
display: flex;
flex-direction: column;
gap: 8px;
}
.tc-summary__head {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--muted);
margin: 0;
}
.tc-summary__price {
font-size: 36px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.5px;
margin: 2px 0;
}
.tc-summary__strike {
font-size: 13px;
color: var(--muted);
}
.tc-summary__strike span { text-decoration: line-through; }
.tc-summary__save {
display: inline-block;
background: #e7f3ec;
color: var(--ok);
font-size: 13px;
font-weight: 700;
border-radius: 6px;
padding: 4px 8px;
margin-top: 2px;
align-self: flex-start;
}
.tc-summary__quotemeta {
font-size: 11px;
color: var(--muted);
margin: 4px 0 4px;
min-height: 14px;
transition: color 0.6s ease;
}
.tc-summary__quotemeta--pulse {
color: var(--ok);
font-weight: 700;
}
/* Enrich block on the cart screen. */
.tc-enrich {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.tc-enrich__name { font-size: 18px; margin: 0; }
.tc-enrich__narrative {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--ink);
}
.tc-enrich__upsell {
font-size: 13px;
color: var(--muted);
margin: 0;
}
.tc-enrich__verdict {
font-size: 13px;
padding: 8px 10px;
border-radius: 6px;
}
.tc-enrich__verdict--flagged {
background: #fff5e0;
color: #946000;
border: 1px solid #f0d68a;
}
/* Swap dialog (native