/* =====================================================================
TripMate homepage.
===================================================================== */
/* ---- Hero ---------------------------------------------------------
Deep-navy field built from layered CSS only: no hero photograph to
download, no dependency on a destination having a cover image, and
nothing that can shift once the page has painted. Depth comes from two
off-centre colour pools plus a faint contour motif.
------------------------------------------------------------------- */
.hero {
background:
/* Sky glow top-right, sunset warmth bottom-left, deep navy underneath:
a horizon rather than a flat brand-blue panel. The blue pool is kept
well under half opacity so the field stays navy and premium instead
of turning into saturated corporate blue. */
radial-gradient(ellipse 85% 65% at 82% 2%, rgba(86, 156, 250, .38), transparent 58%),
radial-gradient(ellipse 60% 55% at 4% 104%, rgba(255, 145, 90, .22), transparent 60%),
radial-gradient(ellipse 50% 40% at 30% 100%, rgba(255, 201, 120, .10), transparent 62%),
linear-gradient(160deg, #081A38 0%, #0F2D5B 48%, #13366B 100%);
color: #fff;
padding: calc(var(--sp-8) + 1rem) 0 var(--sp-8);
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Contour-map motif, decorative only. */
.hero::after {
content: ""; position: absolute; inset: -20% -10%; z-index: -1;
background-image:
repeating-radial-gradient(circle at 88% 22%, transparent 0 46px, rgba(255,255,255,.05) 46px 47px),
repeating-radial-gradient(circle at 6% 84%, transparent 0 58px, rgba(255,255,255,.035) 58px 59px);
-webkit-mask-image: radial-gradient(ellipse 80% 80% at 70% 30%, #000 20%, transparent 78%);
mask-image: radial-gradient(ellipse 80% 80% at 70% 30%, #000 20%, transparent 78%);
pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; }
.hero__content { max-width: 46rem; }
.hero h1 {
color: #fff; font-size: var(--fs-4xl); margin-bottom: var(--sp-4);
letter-spacing: -0.022em; line-height: 1.05; max-width: 15ch;
}
.hero p { color: rgba(255,255,255,.78); font-size: var(--fs-lg); max-width: 56ch; line-height: 1.6; }
.hero .eyebrow { color: var(--sky-400); }
/* ---- Hero search --------------------------------------------------
One raised pill rather than a field with a button parked beside it, so
the primary discovery action reads as a single object. The wrapper is
the visible control; the real keep their own
names, ids and form behaviour untouched inside it.
------------------------------------------------------------------- */
.hero__search {
display: flex; align-items: center; gap: var(--sp-2);
margin: var(--sp-6) 0 var(--sp-5);
max-width: 34rem;
background: rgba(255, 255, 255, .97);
border-radius: var(--r-pill);
padding: .4rem .4rem .4rem 1.15rem;
box-shadow: 0 1px 2px rgba(10, 34, 71, .18), 0 18px 40px -16px rgba(10, 34, 71, .6);
transition: box-shadow var(--transition), transform var(--transition);
}
.hero__search:focus-within {
box-shadow: 0 1px 2px rgba(10, 34, 71, .18), 0 22px 46px -16px rgba(10, 34, 71, .68),
0 0 0 3px rgba(147, 184, 251, .6);
transform: translateY(-1px);
}
/* A magnifier drawn on the wrapper, so no markup or icon request is added. */
.hero__search::before {
content: ""; width: 19px; height: 19px; flex-shrink: 0;
background: var(--ink-400);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hero__search .input {
flex: 1; min-width: 0;
background: transparent; border: 0; box-shadow: none;
padding: .55rem .25rem; min-height: 42px;
font-size: var(--fs-base);
}
.hero__search .input:focus { border: 0; box-shadow: none; }
.hero__search .input::placeholder { color: var(--ink-400); }
.hero__search .input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hero__search .btn { border-radius: var(--r-pill); padding-inline: 1.4rem; flex-shrink: 0; }
.hero__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-7); }
.hero__actions .btn--outline { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); }
.hero__actions .btn--outline:hover { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.6); }
/* ---- Hero statistics ----------------------------------------------
A hairline-divided band reading as one trust statement, not four
loose counters. */
.hero__stats {
list-style: none; padding: var(--sp-5) 0 0; margin: 0;
border-top: 1px solid rgba(255,255,255,.16);
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--sp-4);
}
.hero__stats li { position: relative; padding-left: var(--sp-5); }
.hero__stats li:first-child { padding-left: 0; }
.hero__stats li::before {
content: ""; position: absolute; left: 0; top: .15em; bottom: .15em;
width: 1px; background: rgba(255,255,255,.16);
}
.hero__stats li:first-child::before { display: none; }
.hero__stats strong {
display: block; font-family: var(--font-display); font-weight: 600;
font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
color: #fff; line-height: 1.05; letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.hero__stats span {
font-size: var(--fs-xs); color: rgba(255,255,255,.62);
text-transform: uppercase; letter-spacing: .09em; font-weight: 600;
}
/* ---- How it works -------------------------------------------------
Four numbered stops on one continuous line rather than four identical
boxes. The connector is drawn per step and trimmed at both ends of the
row, so it works with however many steps the page renders.
------------------------------------------------------------------- */
.step {
text-align: center; padding: 0 var(--sp-3);
position: relative;
}
.step__number {
display: inline-flex; align-items: center; justify-content: center;
position: relative; z-index: 1;
width: 52px; height: 52px; border-radius: 50%;
background: var(--surface); color: var(--tm-accent-text);
border: 1px solid var(--coral-100);
box-shadow: 0 0 0 5px var(--surface-2), 0 2px 8px rgba(15, 45, 91, .07);
font-family: var(--font-display); font-weight: 600;
font-size: var(--fs-xl); line-height: 1; margin-bottom: var(--sp-4);
}
/* The rule runs left from each marker to the previous one. */
.step::before {
content: ""; position: absolute; top: 26px; right: 50%; width: 100%; height: 1px;
background: linear-gradient(90deg, transparent, var(--line-300) 18%, var(--line-300) 82%, transparent);
margin-right: 34px;
}
.step:first-child::before { display: none; }
.step h3 { font-size: var(--fs-base); margin-bottom: var(--sp-2); }
.step p { color: var(--ink-500); font-size: var(--fs-sm); margin: 0; line-height: 1.6; }
/* Stacked steps get a vertical connector instead of a horizontal one. */
@media (max-width: 900px) {
.step { display: grid; grid-template-columns: 52px 1fr; gap: 0 var(--sp-4); text-align: left; padding: 0; }
.step__number { grid-row: span 2; margin-bottom: 0; }
.step h3 { align-self: center; margin-bottom: var(--sp-1); }
.step::before {
top: 52px; bottom: calc(var(--sp-5) * -1); left: 26px; right: auto;
width: 1px; height: auto; margin: 0;
background: linear-gradient(180deg, var(--line-300), transparent);
}
.step:first-child::before { display: block; }
.step:last-child::before { display: none; }
}
/* ---- Feature split sections --------------------------------------- */
.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: center; }
.feature-split--reverse .feature-visual { order: -1; }
.tick-list { list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.tick-list li {
position: relative; padding-left: 1.9rem; margin-bottom: var(--sp-3);
font-size: var(--fs-sm); color: var(--ink-700);
}
.tick-list li::before {
content: ""; position: absolute; left: 0; top: .2em;
width: 18px; height: 18px; border-radius: 50%;
background: var(--sky-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12'%3E%3Cpath fill='%233882F6' d='M4.6 9.4 1.2 6l1.1-1.1 2.3 2.2 5-5L10.8 3z'/%3E%3C/svg%3E") center/11px no-repeat;
}
/* ---- Product previews ---------------------------------------------
The itinerary and budget examples are styled to read as a slice of the
real TripMate interface: a titled surface with its own header rule,
rows that behave like the planner's rows, and a footer note. Content
stays exactly as the page renders it.
------------------------------------------------------------------- */
.feature-visual__card {
background: var(--surface); border: 1px solid var(--line-200);
border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
padding: 0; overflow: hidden;
position: relative;
}
/* Window chrome: three dots on a tinted title bar. */
.feature-visual__card > strong {
display: flex; align-items: center; gap: var(--sp-3);
margin: 0; padding: var(--sp-4) var(--sp-5);
color: var(--navy-900); font-size: var(--fs-sm);
background: var(--surface-2); border-bottom: 1px solid var(--line-200);
}
.feature-visual__card > strong::before {
content: ""; flex-shrink: 0;
width: 8px; height: 8px; border-radius: 50%;
background: var(--coral-500);
box-shadow: 13px 0 0 var(--line-300), 26px 0 0 var(--line-300);
margin-right: 22px;
}
.feature-visual__card > .text-xs {
display: block; padding: var(--sp-3) var(--sp-5);
border-top: 1px solid var(--line-200); background: var(--surface-2);
}
.visual-list { list-style: none; padding: var(--sp-2) var(--sp-5); margin: 0; }
.visual-list li {
display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-200);
font-size: var(--fs-sm); color: var(--ink-700);
}
.visual-list li:last-child { border-bottom: 0; }
.visual-list .badge { flex-shrink: 0; min-width: 5.5rem; justify-content: center; }
.visual-list em {
margin-left: auto; font-style: normal; color: var(--ink-500);
font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums;
}
.budget-preview {
display: grid; grid-template-columns: minmax(0, auto) 1fr auto;
gap: var(--sp-3); align-items: center;
font-size: var(--fs-sm); color: var(--ink-700);
padding: var(--sp-5) var(--sp-5) var(--sp-4);
}
.budget-preview > span:nth-child(3n + 1) { color: var(--ink-700); }
.budget-preview .bar { height: 6px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.budget-preview .bar i {
display: block; height: 100%; border-radius: var(--r-pill);
background: linear-gradient(90deg, var(--teal-700), var(--sky-500));
}
/* Amounts right-aligned and lining, so the column reads as money. */
.budget-preview > span:nth-child(3n) {
text-align: right; font-weight: 700; color: var(--navy-900);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* ---- Assistant promo ----------------------------------------------- */
.assistant-promo {
display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: center;
/* Warm cream, so the assistant reads as the friendly corner of the page. */
background: var(--tm-surface-warm); border: 1px solid #F5E2D0;
border-radius: var(--r-xl); padding: var(--sp-7) var(--sp-6); box-shadow: var(--shadow-sm);
position: relative; overflow: hidden;
}
.assistant-promo::before {
content: ""; position: absolute; inset: auto -10% -40% 40%; height: 80%;
background: radial-gradient(ellipse at center, rgba(255, 201, 120, .3), transparent 68%);
pointer-events: none;
}
.assistant-promo > * { position: relative; }
.assistant-promo__chat { display: flex; flex-direction: column; gap: var(--sp-3); }
.assistant-promo__chat .msg { max-width: 100%; margin: 0; }
/* ---- Category tiles ------------------------------------------------
Tactile, quiet tiles: the arrow only commits on hover, so eight of them
in a grid do not turn into eight competing calls to action. */
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-3); }
.category-tile {
display: block; position: relative; padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-4);
background: var(--surface); border: 1px solid var(--line-200);
border-radius: var(--r-md); color: var(--ink-700);
border-left: 3px solid var(--line-200);
transition: border-color var(--transition), transform var(--transition),
box-shadow var(--transition), background var(--transition);
}
.category-tile::after {
content: "→"; position: absolute; right: var(--sp-4); top: var(--sp-5);
color: var(--tm-link); font-size: var(--fs-base); line-height: 1;
opacity: 0; transform: translateX(-5px);
transition: opacity var(--transition), transform var(--transition);
}
.category-tile:hover {
border-color: var(--line-300); border-left-color: var(--coral-600);
transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--ink-700);
}
.category-tile:hover::after { opacity: 1; transform: none; }
.category-tile strong { display: block; color: var(--navy-900); margin-bottom: var(--sp-1); padding-right: var(--sp-5); }
.category-tile span { font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.55; }
@media (max-width: 900px) {
.feature-split, .assistant-promo { grid-template-columns: 1fr; }
.feature-split--reverse .feature-visual { order: 0; }
.hero { padding: var(--sp-7) 0 var(--sp-7); }
}
@media (max-width: 640px) {
/* Two by two keeps every figure legible instead of squeezing four
columns into 360px; the dividers move with them. */
.hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
.hero__stats li:nth-child(odd) { padding-left: 0; }
.hero__stats li:nth-child(odd)::before { display: none; }
.hero__stats li:nth-child(even)::before { display: block; }
}
@media (max-width: 560px) {
.hero h1 { max-width: none; }
/* The pill cannot hold a full-width button, so the search collapses to a
stacked field + button while keeping the same rounded card. */
.hero__search {
flex-wrap: wrap; border-radius: var(--r-lg);
padding: var(--sp-3) var(--sp-4) var(--sp-3);
gap: var(--sp-1) var(--sp-2);
}
.hero__search .input { flex: 1 1 60%; }
.hero__search .btn { width: 100%; border-radius: var(--r-md); margin-top: var(--sp-2); }
.hero__actions .btn { width: 100%; }
.assistant-promo { padding: var(--sp-5) var(--sp-4); }
}