Travel Booking - Free HTML/CSS UI Kit
A premium luxury travel & resort booking UI Kit featuring elegant typography, custom check-in forms, responsive destination card grids, and high-fidelity itinerary controls.
Download Full Kit (.zip)
Complete kit with all components & styles
Just need one component?
Download base.css and add the following line to your HTML:
<link rel="stylesheet" href="base.css">
Then grab a component below and add it to your HTML.
Color Palette
Resort Teal
#0D9488
Coral Rose
#F43F5E
Sand White
#F9FAF9
Pure White
#FFFFFF
Dark Charcoal
#1F2937
Typography
Hero Sections
Luxury Spotlight Booking Engine
HTML
<section class="trv-hero-centered">
<span class="trv-badge trv-badge-primary">Bespoke Travel Planners</span>
<h1 class="trv-hero-title">Your Journey of a Lifetime Begins Here</h1>
<p class="trv-hero-subtitle">Discover secluded private ocean fronts, alpine chalet escapes, and curated historic boutiques tailored for seasoned wanderers.</p>
<!-- Centered Spotlight Booking Engine Form Panel -->
<div class="trv-booking-panel">
<form class="trv-booking-form" onsubmit="return false;">
<!-- Column 1: Destination -->
<div class="trv-booking-field">
<label for="dest" class="trv-label">Destination</label>
<select id="dest" class="trv-select">
<option value="amalfi">Amalfi Coast, Italy</option>
<option value="swiss">Swiss Alps, Switzerland</option>
<option value="kyoto">Kyoto Historic Villa, Japan</option>
<option value="serengeti">Serengeti Luxury Lodge, Tanzania</option>
</select>
</div>
<!-- Column 2: Check-in -->
<div class="trv-booking-field">
<label for="checkin" class="trv-label">Check In</label>
<input type="date" id="checkin" class="trv-input" value="2026-06-12">
</div>
<!-- Column 3: Check-out -->
<div class="trv-booking-field">
<label for="checkout" class="trv-label">Check Out</label>
<input type="date" id="checkout" class="trv-input" value="2026-06-19">
</div>
<!-- Column 4: Guests -->
<div class="trv-booking-field">
<label for="guests" class="trv-label">Guests</label>
<select id="guests" class="trv-select">
<option value="1">1 Guest</option>
<option value="2" selected>2 Guests</option>
<option value="4">4 Guests</option>
<option value="large">6+ Guests</option>
</select>
</div>
<!-- Action submit -->
<button type="submit" class="trv-btn trv-btn-primary trv-booking-btn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="width:16px;height:16px;"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
Find Haven
</button>
</form>
</div>
</section>
CSS (Component Only)
/* Component: Luxury Spotlight Booking Engine */
/* NOTE: This component requires base.css to be included in your page. */
.trv-hero-centered {
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 5rem 2rem;
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius-lg);
box-shadow: var(--trv-shadow);
}
.trv-hero-title {
font-family: var(--trv-font-heading);
font-size: 3.5rem;
font-weight: 700;
color: var(--trv-text);
line-height: 1.15;
letter-spacing: -0.02em;
margin-top: 1rem;
margin-bottom: 1.25rem;
max-width: 850px;
}
.trv-hero-subtitle {
font-size: 1.05rem;
color: var(--trv-text-muted);
line-height: 1.6;
margin-bottom: 3.5rem;
max-width: 720px;
}
/* Booking form panel overlapping card */
.trv-booking-panel {
width: 100%;
max-width: 950px;
background-color: var(--trv-surface);
border: 1px solid var(--trv-border-strong);
border-radius: var(--trv-radius-lg);
padding: 1.5rem;
box-shadow: 0 20px 45px rgba(13, 148, 136, 0.08);
}
.trv-booking-form {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr 0.8fr auto;
gap: 1rem;
align-items: flex-end;
}
.trv-booking-field {
display: flex;
flex-direction: column;
text-align: left;
}
.trv-booking-field label {
margin-bottom: 0.35rem;
}
.trv-booking-btn {
height: 46px;
align-self: flex-end;
}
@media (max-width: 992px) {
.trv-booking-form {
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.trv-booking-btn {
grid-column: span 2;
width: 100%;
}
}
@media (max-width: 768px) {
.trv-hero-title {
font-size: 2.5rem;
}
.trv-booking-form {
grid-template-columns: 1fr;
}
.trv-booking-btn {
grid-column: span 1;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Travel Booking Design System (trv-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--trv-bg: #F9FAF9; /* Sand White */
--trv-surface: #FFFFFF; /* Pure White */
--trv-surface-2: #F3F5F3; /* Linen Gray */
/* Brand Palette */
--trv-primary: #0D9488; /* Sea Teal */
--trv-primary-hover: #0F766E;
--trv-primary-muted: rgba(13, 148, 136, 0.08);
--trv-accent: #F43F5E; /* Coral Rose */
--trv-accent-hover: #E11D48;
--trv-accent-muted: rgba(244, 63, 94, 0.08);
--trv-gold: #F59E0B; /* Star Rating Gold */
/* Text */
--trv-text: #1F2937; /* Dark Charcoal */
--trv-text-muted: #4B5563; /* Slate grey */
--trv-text-light: #9CA3AF;
/* Borders */
--trv-border: #E5E7EB; /* Muted light border */
--trv-border-strong: #D1D5DB;
--trv-border-glow: rgba(13, 148, 136, 0.25);
/* Rounded Shapes */
--trv-radius-sm: 4px;
--trv-radius: 8px;
--trv-radius-lg: 16px;
--trv-radius-pill: 999px;
/* Fonts */
--trv-font-heading: 'Playfair Display', serif;
--trv-font-sub: 'Outfit', sans-serif;
--trv-font-body: 'Inter', sans-serif;
/* Shadows */
--trv-shadow-sm: 0 2px 8px rgba(0,0,0,0.02);
--trv-shadow: 0 10px 35px rgba(13, 148, 136, 0.04);
--trv-shadow-glow: 0 0 20px rgba(13, 148, 136, 0.08);
/* Transition */
--trv-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--trv-font-body);
color: var(--trv-text);
background-color: var(--trv-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.trv-card {
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius-lg);
box-shadow: var(--trv-shadow);
padding: 2.25rem;
transition: var(--trv-transition);
}
.trv-card:hover {
border-color: var(--trv-border-strong);
box-shadow: 0 12px 40px rgba(13, 148, 136, 0.07);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--trv-font-heading);
font-weight: 700;
margin: 0;
color: var(--trv-text);
line-height: 1.25;
}
p {
font-family: var(--trv-font-body);
color: var(--trv-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.trv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.6rem;
font-family: var(--trv-font-sub);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--trv-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--trv-transition);
white-space: nowrap;
user-select: none;
}
.trv-btn-primary {
background-color: var(--trv-primary);
color: #fff;
border-color: var(--trv-primary);
}
.trv-btn-primary:hover {
background-color: var(--trv-primary-hover);
border-color: var(--trv-primary-hover);
transform: translateY(-1px);
}
.trv-btn-accent {
background-color: var(--trv-accent);
color: #fff;
border-color: var(--trv-accent);
}
.trv-btn-accent:hover {
background-color: var(--trv-accent-hover);
border-color: var(--trv-accent-hover);
transform: translateY(-1px);
}
.trv-btn-outline {
background-color: var(--trv-surface);
color: var(--trv-text-muted);
border-color: var(--trv-border);
}
.trv-btn-outline:hover {
background-color: var(--trv-surface-2);
border-color: var(--trv-border-strong);
color: var(--trv-text);
}
.trv-btn-ghost {
background-color: transparent;
color: var(--trv-text-muted);
border-color: transparent;
}
.trv-btn-ghost:hover {
background-color: var(--trv-surface-2);
color: var(--trv-text);
}
.trv-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.8rem; }
.trv-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--trv-radius-lg); }
.trv-btn-block { width: 100%; }
.trv-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--trv-radius); }
/* ── Form Controls ────────────── */
.trv-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius);
font-family: var(--trv-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--trv-text);
background-color: var(--trv-surface);
outline: none;
transition: var(--trv-transition);
}
.trv-input::placeholder { color: var(--trv-text-light); }
.trv-input:focus {
border-color: var(--trv-primary);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
.trv-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--trv-font-sub);
font-weight: 600;
font-size: 0.8rem;
color: var(--trv-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Custom select */
.trv-select {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius);
font-family: var(--trv-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--trv-text);
background-color: var(--trv-surface);
outline: none;
transition: var(--trv-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1.1rem center;
background-size: 1rem;
cursor: pointer;
}
.trv-select:focus {
border-color: var(--trv-primary);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
/* ── Badges ───────────────────── */
.trv-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--trv-radius-pill);
font-family: var(--trv-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.trv-badge-primary { background-color: var(--trv-primary-muted); color: var(--trv-primary); border-color: rgba(13, 148, 136, 0.15); }
.trv-badge-accent { background-color: var(--trv-accent-muted); color: var(--trv-accent); border-color: rgba(244, 63, 94, 0.15); }
.trv-badge-gold { background-color: rgba(245, 158, 11, 0.08); color: var(--trv-gold); border-color: rgba(245, 158, 11, 0.15); }
.trv-badge-default { background-color: var(--trv-surface-2); color: var(--trv-text-muted); border-color: var(--trv-border); }
/* ── Star Ratings ─────────────── */
.trv-rating {
display: flex;
align-items: center;
gap: 0.25rem;
color: var(--trv-gold);
}
.trv-rating svg {
width: 14px;
height: 14px;
fill: currentColor;
}
/* ── Divider ──────────────────── */
.trv-divider { border: none; border-top: 1px solid var(--trv-border); margin: 0; }
/* ── Logo ─────────────────────── */
.trv-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--trv-font-heading);
font-size: 1.5rem;
color: var(--trv-text);
font-weight: 800;
letter-spacing: -0.01em;
}
.trv-logo-icon {
width: 32px;
height: 32px;
background-color: var(--trv-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: var(--trv-radius);
box-shadow: var(--trv-shadow-glow);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--trv-primary) !important; }
.text-accent { color: var(--trv-accent) !important; }
.text-muted { color: var(--trv-text-muted) !important; }
.text-light { color: var(--trv-text-light) !important; }
/* --- COMPONENT STYLES --- */
.trv-hero-centered {
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 5rem 2rem;
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius-lg);
box-shadow: var(--trv-shadow);
}
.trv-hero-title {
font-family: var(--trv-font-heading);
font-size: 3.5rem;
font-weight: 700;
color: var(--trv-text);
line-height: 1.15;
letter-spacing: -0.02em;
margin-top: 1rem;
margin-bottom: 1.25rem;
max-width: 850px;
}
.trv-hero-subtitle {
font-size: 1.05rem;
color: var(--trv-text-muted);
line-height: 1.6;
margin-bottom: 3.5rem;
max-width: 720px;
}
/* Booking form panel overlapping card */
.trv-booking-panel {
width: 100%;
max-width: 950px;
background-color: var(--trv-surface);
border: 1px solid var(--trv-border-strong);
border-radius: var(--trv-radius-lg);
padding: 1.5rem;
box-shadow: 0 20px 45px rgba(13, 148, 136, 0.08);
}
.trv-booking-form {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr 0.8fr auto;
gap: 1rem;
align-items: flex-end;
}
.trv-booking-field {
display: flex;
flex-direction: column;
text-align: left;
}
.trv-booking-field label {
margin-bottom: 0.35rem;
}
.trv-booking-btn {
height: 46px;
align-self: flex-end;
}
@media (max-width: 992px) {
.trv-booking-form {
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.trv-booking-btn {
grid-column: span 2;
width: 100%;
}
}
@media (max-width: 768px) {
.trv-hero-title {
font-size: 2.5rem;
}
.trv-booking-form {
grid-template-columns: 1fr;
}
.trv-booking-btn {
grid-column: span 1;
}
}
Interactive Trip Planner Split
HTML
<section class="trv-hero-split">
<!-- Left column: Info -->
<div class="trv-split-left">
<div class="trv-badge-row">
<span class="trv-badge trv-badge-primary">Tailor-Made Route Planners</span>
<span class="trv-badge trv-badge-accent">Summer 2026</span>
</div>
<h2 class="trv-split-title">Craft Your Bespoke Luxury Itinerary Loop</h2>
<p class="trv-split-desc">
We handle flights, private yacht transfers, resort accommodations, and customized alpine excursions. Coordinate with a dedicated local concierge to structure your dream escape loop.
</p>
<!-- Advantage bullet lists -->
<ul class="trv-split-features">
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" class="trv-bullet-icon"><polyline points="20 6 9 17 4 12"></polyline></svg>
Dedicated 24/7 personal travel concierges.
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" class="trv-bullet-icon"><polyline points="20 6 9 17 4 12"></polyline></svg>
Verified resort properties with premium tier luxury ratings.
</li>
</ul>
<!-- Triggers -->
<div class="trv-split-actions">
<button class="trv-btn trv-btn-primary">
Design My Custom Trip
</button>
<button class="trv-btn trv-btn-outline">
Speak with a Planner
</button>
</div>
</div>
<!-- Right column: Interactive Trip Route Planner Mockup -->
<div class="trv-split-right">
<div class="trv-itinerary-preview-card">
<div class="trv-itinerary-preview-header">
<span class="trv-itinerary-tag">Your Custom Itinerary</span>
<h4 class="trv-itinerary-title">Amalfi & Capri Escape</h4>
<span class="trv-itinerary-dates">7 Days • June 12 - June 19</span>
</div>
<!-- Steps list -->
<div class="trv-itinerary-preview-steps">
<!-- Step 1 -->
<div class="trv-itinerary-preview-step">
<span class="trv-step-num">01</span>
<div class="trv-step-details">
<span class="trv-step-label">Ocean Suite Reservation</span>
<span class="trv-step-resort">Belmond Hotel Caruso, Ravello</span>
</div>
<span class="trv-badge trv-badge-gold">Confirmed</span>
</div>
<!-- Step 2 -->
<div class="trv-itinerary-preview-step">
<span class="trv-step-num">02</span>
<div class="trv-step-details">
<span class="trv-step-label">Helicopter Air Shuttle</span>
<span class="trv-step-resort">Naples Gateway to Ravello Heliport</span>
</div>
<span class="trv-badge trv-badge-primary">Scheduled</span>
</div>
<!-- Step 3 -->
<div class="trv-itinerary-preview-step">
<span class="trv-step-num">03</span>
<div class="trv-step-details">
<span class="trv-step-label">Sunset Yacht Charter</span>
<span class="trv-step-resort">Riva Rivamare Luxury Day Cruise</span>
</div>
<span class="trv-badge trv-badge-accent">Exclusive</span>
</div>
</div>
</div>
</div>
</section>
CSS (Component Only)
/* Component: Interactive Trip Planner Split */
/* NOTE: This component requires base.css to be included in your page. */
.trv-hero-split {
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 3.5rem;
padding: 4rem 2rem;
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius-lg);
box-shadow: var(--trv-shadow);
align-items: center;
}
/* Left Column */
.trv-split-left {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.trv-badge-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.trv-split-title {
font-family: var(--trv-font-heading);
font-size: 2.75rem;
font-weight: 700;
line-height: 1.25;
color: var(--trv-text);
}
.trv-split-desc {
font-size: 0.95rem;
color: var(--trv-text-muted);
line-height: 1.65;
}
/* Advantage lists */
.trv-split-features {
list-style: none;
padding: 0;
margin: 0.5rem 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.trv-split-features li {
font-size: 0.9rem;
color: var(--trv-text-muted);
display: flex;
align-items: center;
gap: 0.75rem;
}
.trv-bullet-icon {
width: 16px;
height: 16px;
color: var(--trv-primary);
flex-shrink: 0;
}
/* Actions */
.trv-split-actions {
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
}
/* Right column: itinerary preview card */
.trv-split-right {
display: flex;
flex-direction: column;
}
.trv-itinerary-preview-card {
background-color: var(--trv-surface-2);
border: 1px solid var(--trv-border-strong);
border-radius: var(--trv-radius-lg);
padding: 2rem;
box-shadow: var(--trv-shadow), 0 20px 45px rgba(13, 148, 136, 0.06);
}
.trv-itinerary-preview-header {
display: flex;
flex-direction: column;
gap: 0.35rem;
border-bottom: 1px solid var(--trv-border-strong);
padding-bottom: 1.25rem;
margin-bottom: 1.5rem;
}
.trv-itinerary-tag {
font-family: var(--trv-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--trv-primary);
}
.trv-itinerary-title {
font-family: var(--trv-font-heading);
font-size: 1.5rem;
font-weight: 700;
color: var(--trv-text);
}
.trv-itinerary-dates {
font-size: 0.8rem;
color: var(--trv-text-muted);
font-weight: 500;
}
/* Steps list */
.trv-itinerary-preview-steps {
display: flex;
flex-direction: column;
gap: 1rem;
}
.trv-itinerary-preview-step {
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
padding: 1rem;
border-radius: var(--trv-radius);
display: flex;
align-items: center;
gap: 1rem;
}
.trv-step-num {
font-family: var(--trv-font-sub);
font-size: 1.25rem;
font-weight: 800;
color: var(--trv-primary-hover);
background-color: var(--trv-primary-muted);
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.trv-step-details {
display: flex;
flex-direction: column;
gap: 0.15rem;
flex: 1;
min-width: 0;
}
.trv-step-label {
font-family: var(--trv-font-sub);
font-size: 0.85rem;
font-weight: 700;
color: var(--trv-text);
}
.trv-step-resort {
font-size: 0.75rem;
color: var(--trv-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 992px) {
.trv-hero-split {
grid-template-columns: 1fr;
gap: 3rem;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Travel Booking Design System (trv-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--trv-bg: #F9FAF9; /* Sand White */
--trv-surface: #FFFFFF; /* Pure White */
--trv-surface-2: #F3F5F3; /* Linen Gray */
/* Brand Palette */
--trv-primary: #0D9488; /* Sea Teal */
--trv-primary-hover: #0F766E;
--trv-primary-muted: rgba(13, 148, 136, 0.08);
--trv-accent: #F43F5E; /* Coral Rose */
--trv-accent-hover: #E11D48;
--trv-accent-muted: rgba(244, 63, 94, 0.08);
--trv-gold: #F59E0B; /* Star Rating Gold */
/* Text */
--trv-text: #1F2937; /* Dark Charcoal */
--trv-text-muted: #4B5563; /* Slate grey */
--trv-text-light: #9CA3AF;
/* Borders */
--trv-border: #E5E7EB; /* Muted light border */
--trv-border-strong: #D1D5DB;
--trv-border-glow: rgba(13, 148, 136, 0.25);
/* Rounded Shapes */
--trv-radius-sm: 4px;
--trv-radius: 8px;
--trv-radius-lg: 16px;
--trv-radius-pill: 999px;
/* Fonts */
--trv-font-heading: 'Playfair Display', serif;
--trv-font-sub: 'Outfit', sans-serif;
--trv-font-body: 'Inter', sans-serif;
/* Shadows */
--trv-shadow-sm: 0 2px 8px rgba(0,0,0,0.02);
--trv-shadow: 0 10px 35px rgba(13, 148, 136, 0.04);
--trv-shadow-glow: 0 0 20px rgba(13, 148, 136, 0.08);
/* Transition */
--trv-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--trv-font-body);
color: var(--trv-text);
background-color: var(--trv-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.trv-card {
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius-lg);
box-shadow: var(--trv-shadow);
padding: 2.25rem;
transition: var(--trv-transition);
}
.trv-card:hover {
border-color: var(--trv-border-strong);
box-shadow: 0 12px 40px rgba(13, 148, 136, 0.07);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--trv-font-heading);
font-weight: 700;
margin: 0;
color: var(--trv-text);
line-height: 1.25;
}
p {
font-family: var(--trv-font-body);
color: var(--trv-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.trv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.6rem;
font-family: var(--trv-font-sub);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--trv-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--trv-transition);
white-space: nowrap;
user-select: none;
}
.trv-btn-primary {
background-color: var(--trv-primary);
color: #fff;
border-color: var(--trv-primary);
}
.trv-btn-primary:hover {
background-color: var(--trv-primary-hover);
border-color: var(--trv-primary-hover);
transform: translateY(-1px);
}
.trv-btn-accent {
background-color: var(--trv-accent);
color: #fff;
border-color: var(--trv-accent);
}
.trv-btn-accent:hover {
background-color: var(--trv-accent-hover);
border-color: var(--trv-accent-hover);
transform: translateY(-1px);
}
.trv-btn-outline {
background-color: var(--trv-surface);
color: var(--trv-text-muted);
border-color: var(--trv-border);
}
.trv-btn-outline:hover {
background-color: var(--trv-surface-2);
border-color: var(--trv-border-strong);
color: var(--trv-text);
}
.trv-btn-ghost {
background-color: transparent;
color: var(--trv-text-muted);
border-color: transparent;
}
.trv-btn-ghost:hover {
background-color: var(--trv-surface-2);
color: var(--trv-text);
}
.trv-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.8rem; }
.trv-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--trv-radius-lg); }
.trv-btn-block { width: 100%; }
.trv-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--trv-radius); }
/* ── Form Controls ────────────── */
.trv-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius);
font-family: var(--trv-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--trv-text);
background-color: var(--trv-surface);
outline: none;
transition: var(--trv-transition);
}
.trv-input::placeholder { color: var(--trv-text-light); }
.trv-input:focus {
border-color: var(--trv-primary);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
.trv-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--trv-font-sub);
font-weight: 600;
font-size: 0.8rem;
color: var(--trv-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Custom select */
.trv-select {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius);
font-family: var(--trv-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--trv-text);
background-color: var(--trv-surface);
outline: none;
transition: var(--trv-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1.1rem center;
background-size: 1rem;
cursor: pointer;
}
.trv-select:focus {
border-color: var(--trv-primary);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
/* ── Badges ───────────────────── */
.trv-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--trv-radius-pill);
font-family: var(--trv-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.trv-badge-primary { background-color: var(--trv-primary-muted); color: var(--trv-primary); border-color: rgba(13, 148, 136, 0.15); }
.trv-badge-accent { background-color: var(--trv-accent-muted); color: var(--trv-accent); border-color: rgba(244, 63, 94, 0.15); }
.trv-badge-gold { background-color: rgba(245, 158, 11, 0.08); color: var(--trv-gold); border-color: rgba(245, 158, 11, 0.15); }
.trv-badge-default { background-color: var(--trv-surface-2); color: var(--trv-text-muted); border-color: var(--trv-border); }
/* ── Star Ratings ─────────────── */
.trv-rating {
display: flex;
align-items: center;
gap: 0.25rem;
color: var(--trv-gold);
}
.trv-rating svg {
width: 14px;
height: 14px;
fill: currentColor;
}
/* ── Divider ──────────────────── */
.trv-divider { border: none; border-top: 1px solid var(--trv-border); margin: 0; }
/* ── Logo ─────────────────────── */
.trv-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--trv-font-heading);
font-size: 1.5rem;
color: var(--trv-text);
font-weight: 800;
letter-spacing: -0.01em;
}
.trv-logo-icon {
width: 32px;
height: 32px;
background-color: var(--trv-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: var(--trv-radius);
box-shadow: var(--trv-shadow-glow);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--trv-primary) !important; }
.text-accent { color: var(--trv-accent) !important; }
.text-muted { color: var(--trv-text-muted) !important; }
.text-light { color: var(--trv-text-light) !important; }
/* --- COMPONENT STYLES --- */
.trv-hero-split {
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 3.5rem;
padding: 4rem 2rem;
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius-lg);
box-shadow: var(--trv-shadow);
align-items: center;
}
/* Left Column */
.trv-split-left {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.trv-badge-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.trv-split-title {
font-family: var(--trv-font-heading);
font-size: 2.75rem;
font-weight: 700;
line-height: 1.25;
color: var(--trv-text);
}
.trv-split-desc {
font-size: 0.95rem;
color: var(--trv-text-muted);
line-height: 1.65;
}
/* Advantage lists */
.trv-split-features {
list-style: none;
padding: 0;
margin: 0.5rem 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.trv-split-features li {
font-size: 0.9rem;
color: var(--trv-text-muted);
display: flex;
align-items: center;
gap: 0.75rem;
}
.trv-bullet-icon {
width: 16px;
height: 16px;
color: var(--trv-primary);
flex-shrink: 0;
}
/* Actions */
.trv-split-actions {
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
}
/* Right column: itinerary preview card */
.trv-split-right {
display: flex;
flex-direction: column;
}
.trv-itinerary-preview-card {
background-color: var(--trv-surface-2);
border: 1px solid var(--trv-border-strong);
border-radius: var(--trv-radius-lg);
padding: 2rem;
box-shadow: var(--trv-shadow), 0 20px 45px rgba(13, 148, 136, 0.06);
}
.trv-itinerary-preview-header {
display: flex;
flex-direction: column;
gap: 0.35rem;
border-bottom: 1px solid var(--trv-border-strong);
padding-bottom: 1.25rem;
margin-bottom: 1.5rem;
}
.trv-itinerary-tag {
font-family: var(--trv-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--trv-primary);
}
.trv-itinerary-title {
font-family: var(--trv-font-heading);
font-size: 1.5rem;
font-weight: 700;
color: var(--trv-text);
}
.trv-itinerary-dates {
font-size: 0.8rem;
color: var(--trv-text-muted);
font-weight: 500;
}
/* Steps list */
.trv-itinerary-preview-steps {
display: flex;
flex-direction: column;
gap: 1rem;
}
.trv-itinerary-preview-step {
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
padding: 1rem;
border-radius: var(--trv-radius);
display: flex;
align-items: center;
gap: 1rem;
}
.trv-step-num {
font-family: var(--trv-font-sub);
font-size: 1.25rem;
font-weight: 800;
color: var(--trv-primary-hover);
background-color: var(--trv-primary-muted);
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.trv-step-details {
display: flex;
flex-direction: column;
gap: 0.15rem;
flex: 1;
min-width: 0;
}
.trv-step-label {
font-family: var(--trv-font-sub);
font-size: 0.85rem;
font-weight: 700;
color: var(--trv-text);
}
.trv-step-resort {
font-size: 0.75rem;
color: var(--trv-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 992px) {
.trv-hero-split {
grid-template-columns: 1fr;
gap: 3rem;
}
}
Forms
Traveler Access Portal
HTML
<div class="trv-login-card">
<div class="trv-login-header">
<span class="trv-logo-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" style="width:14px;height:14px;"><path d="M12 2L2 22h20L12 2z"></path></svg>
</span>
<h2 class="trv-login-title">Traveler Club Lounge</h2>
<p class="trv-login-desc">Access your bespoke itinerary portals, rewards stats, and local concierge chat channels.</p>
</div>
<form class="trv-login-form" onsubmit="return false;">
<div class="trv-form-group">
<label for="email" class="trv-label">Member Email</label>
<input type="email" id="email" class="trv-input" placeholder="[email protected]" required>
</div>
<div class="trv-form-group">
<div class="trv-label-row">
<label for="password" class="trv-label">Lounge Passcode</label>
<a href="#" class="trv-form-link">Forgot Code?</a>
</div>
<input type="password" id="password" class="trv-input" placeholder="••••••••••••" required>
</div>
<div class="trv-form-remember">
<label class="trv-checkbox-wrapper">
<input type="checkbox" name="remember" class="trv-checkbox" checked>
<span class="trv-checkbox-label">Keep club lounge session active</span>
</label>
</div>
<button type="submit" class="trv-btn trv-btn-primary trv-btn-block">
Enter Club Lounge
</button>
<div class="trv-login-footer">
<span class="trv-signup-prompt">Not a club member? <a href="#" class="trv-signup-link">Apply for membership.</a></span>
</div>
</form>
</div>
CSS (Component Only)
/* Component: Traveler Access Portal */
/* NOTE: This component requires base.css to be included in your page. */
.trv-login-card {
max-width: 420px;
margin: 0 auto;
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius-lg);
box-shadow: var(--trv-shadow);
padding: 3rem 2.5rem;
}
.trv-login-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 2rem;
}
.trv-login-header .trv-logo-icon {
margin-bottom: 1rem;
width: 44px;
height: 44px;
font-size: 1.25rem;
}
.trv-login-title {
font-family: var(--trv-font-heading);
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--trv-text);
}
.trv-login-desc {
font-size: 0.825rem;
color: var(--trv-text-muted);
line-height: 1.5;
}
.trv-login-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.trv-form-group {
display: flex;
flex-direction: column;
align-items: stretch;
}
.trv-label-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.45rem;
}
.trv-label-row .trv-label {
margin-bottom: 0;
}
.trv-form-link {
font-size: 0.75rem;
font-weight: 600;
color: var(--trv-text-muted);
text-decoration: none;
transition: var(--trv-transition);
}
.trv-form-link:hover {
color: var(--trv-primary);
text-decoration: underline;
}
/* Custom Checkbox */
.trv-form-remember {
display: flex;
align-items: center;
}
.trv-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
}
.trv-checkbox {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--trv-border-strong);
border-radius: var(--trv-radius-sm);
outline: none;
background-color: var(--trv-surface-2);
cursor: pointer;
transition: var(--trv-transition);
position: relative;
flex-shrink: 0;
}
.trv-checkbox:checked {
background-color: var(--trv-primary);
border-color: var(--trv-primary);
}
.trv-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.trv-checkbox-label {
font-size: 0.8rem;
color: var(--trv-text-muted);
}
/* Footer sign up prompt */
.trv-login-footer {
border-top: 1px solid var(--trv-border);
padding-top: 1.25rem;
margin-top: 0.5rem;
text-align: center;
}
.trv-signup-prompt {
font-size: 0.8rem;
color: var(--trv-text-muted);
}
.trv-signup-link {
color: var(--trv-text);
font-weight: 700;
text-decoration: none;
transition: var(--trv-transition);
}
.trv-signup-link:hover {
color: var(--trv-primary);
text-decoration: underline;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Travel Booking Design System (trv-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--trv-bg: #F9FAF9; /* Sand White */
--trv-surface: #FFFFFF; /* Pure White */
--trv-surface-2: #F3F5F3; /* Linen Gray */
/* Brand Palette */
--trv-primary: #0D9488; /* Sea Teal */
--trv-primary-hover: #0F766E;
--trv-primary-muted: rgba(13, 148, 136, 0.08);
--trv-accent: #F43F5E; /* Coral Rose */
--trv-accent-hover: #E11D48;
--trv-accent-muted: rgba(244, 63, 94, 0.08);
--trv-gold: #F59E0B; /* Star Rating Gold */
/* Text */
--trv-text: #1F2937; /* Dark Charcoal */
--trv-text-muted: #4B5563; /* Slate grey */
--trv-text-light: #9CA3AF;
/* Borders */
--trv-border: #E5E7EB; /* Muted light border */
--trv-border-strong: #D1D5DB;
--trv-border-glow: rgba(13, 148, 136, 0.25);
/* Rounded Shapes */
--trv-radius-sm: 4px;
--trv-radius: 8px;
--trv-radius-lg: 16px;
--trv-radius-pill: 999px;
/* Fonts */
--trv-font-heading: 'Playfair Display', serif;
--trv-font-sub: 'Outfit', sans-serif;
--trv-font-body: 'Inter', sans-serif;
/* Shadows */
--trv-shadow-sm: 0 2px 8px rgba(0,0,0,0.02);
--trv-shadow: 0 10px 35px rgba(13, 148, 136, 0.04);
--trv-shadow-glow: 0 0 20px rgba(13, 148, 136, 0.08);
/* Transition */
--trv-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--trv-font-body);
color: var(--trv-text);
background-color: var(--trv-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.trv-card {
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius-lg);
box-shadow: var(--trv-shadow);
padding: 2.25rem;
transition: var(--trv-transition);
}
.trv-card:hover {
border-color: var(--trv-border-strong);
box-shadow: 0 12px 40px rgba(13, 148, 136, 0.07);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--trv-font-heading);
font-weight: 700;
margin: 0;
color: var(--trv-text);
line-height: 1.25;
}
p {
font-family: var(--trv-font-body);
color: var(--trv-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.trv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.6rem;
font-family: var(--trv-font-sub);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--trv-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--trv-transition);
white-space: nowrap;
user-select: none;
}
.trv-btn-primary {
background-color: var(--trv-primary);
color: #fff;
border-color: var(--trv-primary);
}
.trv-btn-primary:hover {
background-color: var(--trv-primary-hover);
border-color: var(--trv-primary-hover);
transform: translateY(-1px);
}
.trv-btn-accent {
background-color: var(--trv-accent);
color: #fff;
border-color: var(--trv-accent);
}
.trv-btn-accent:hover {
background-color: var(--trv-accent-hover);
border-color: var(--trv-accent-hover);
transform: translateY(-1px);
}
.trv-btn-outline {
background-color: var(--trv-surface);
color: var(--trv-text-muted);
border-color: var(--trv-border);
}
.trv-btn-outline:hover {
background-color: var(--trv-surface-2);
border-color: var(--trv-border-strong);
color: var(--trv-text);
}
.trv-btn-ghost {
background-color: transparent;
color: var(--trv-text-muted);
border-color: transparent;
}
.trv-btn-ghost:hover {
background-color: var(--trv-surface-2);
color: var(--trv-text);
}
.trv-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.8rem; }
.trv-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--trv-radius-lg); }
.trv-btn-block { width: 100%; }
.trv-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--trv-radius); }
/* ── Form Controls ────────────── */
.trv-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius);
font-family: var(--trv-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--trv-text);
background-color: var(--trv-surface);
outline: none;
transition: var(--trv-transition);
}
.trv-input::placeholder { color: var(--trv-text-light); }
.trv-input:focus {
border-color: var(--trv-primary);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
.trv-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--trv-font-sub);
font-weight: 600;
font-size: 0.8rem;
color: var(--trv-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Custom select */
.trv-select {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius);
font-family: var(--trv-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--trv-text);
background-color: var(--trv-surface);
outline: none;
transition: var(--trv-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1.1rem center;
background-size: 1rem;
cursor: pointer;
}
.trv-select:focus {
border-color: var(--trv-primary);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
/* ── Badges ───────────────────── */
.trv-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--trv-radius-pill);
font-family: var(--trv-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.trv-badge-primary { background-color: var(--trv-primary-muted); color: var(--trv-primary); border-color: rgba(13, 148, 136, 0.15); }
.trv-badge-accent { background-color: var(--trv-accent-muted); color: var(--trv-accent); border-color: rgba(244, 63, 94, 0.15); }
.trv-badge-gold { background-color: rgba(245, 158, 11, 0.08); color: var(--trv-gold); border-color: rgba(245, 158, 11, 0.15); }
.trv-badge-default { background-color: var(--trv-surface-2); color: var(--trv-text-muted); border-color: var(--trv-border); }
/* ── Star Ratings ─────────────── */
.trv-rating {
display: flex;
align-items: center;
gap: 0.25rem;
color: var(--trv-gold);
}
.trv-rating svg {
width: 14px;
height: 14px;
fill: currentColor;
}
/* ── Divider ──────────────────── */
.trv-divider { border: none; border-top: 1px solid var(--trv-border); margin: 0; }
/* ── Logo ─────────────────────── */
.trv-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--trv-font-heading);
font-size: 1.5rem;
color: var(--trv-text);
font-weight: 800;
letter-spacing: -0.01em;
}
.trv-logo-icon {
width: 32px;
height: 32px;
background-color: var(--trv-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: var(--trv-radius);
box-shadow: var(--trv-shadow-glow);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--trv-primary) !important; }
.text-accent { color: var(--trv-accent) !important; }
.text-muted { color: var(--trv-text-muted) !important; }
.text-light { color: var(--trv-text-light) !important; }
/* --- COMPONENT STYLES --- */
.trv-login-card {
max-width: 420px;
margin: 0 auto;
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius-lg);
box-shadow: var(--trv-shadow);
padding: 3rem 2.5rem;
}
.trv-login-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 2rem;
}
.trv-login-header .trv-logo-icon {
margin-bottom: 1rem;
width: 44px;
height: 44px;
font-size: 1.25rem;
}
.trv-login-title {
font-family: var(--trv-font-heading);
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--trv-text);
}
.trv-login-desc {
font-size: 0.825rem;
color: var(--trv-text-muted);
line-height: 1.5;
}
.trv-login-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.trv-form-group {
display: flex;
flex-direction: column;
align-items: stretch;
}
.trv-label-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.45rem;
}
.trv-label-row .trv-label {
margin-bottom: 0;
}
.trv-form-link {
font-size: 0.75rem;
font-weight: 600;
color: var(--trv-text-muted);
text-decoration: none;
transition: var(--trv-transition);
}
.trv-form-link:hover {
color: var(--trv-primary);
text-decoration: underline;
}
/* Custom Checkbox */
.trv-form-remember {
display: flex;
align-items: center;
}
.trv-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
}
.trv-checkbox {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--trv-border-strong);
border-radius: var(--trv-radius-sm);
outline: none;
background-color: var(--trv-surface-2);
cursor: pointer;
transition: var(--trv-transition);
position: relative;
flex-shrink: 0;
}
.trv-checkbox:checked {
background-color: var(--trv-primary);
border-color: var(--trv-primary);
}
.trv-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.trv-checkbox-label {
font-size: 0.8rem;
color: var(--trv-text-muted);
}
/* Footer sign up prompt */
.trv-login-footer {
border-top: 1px solid var(--trv-border);
padding-top: 1.25rem;
margin-top: 0.5rem;
text-align: center;
}
.trv-signup-prompt {
font-size: 0.8rem;
color: var(--trv-text-muted);
}
.trv-signup-link {
color: var(--trv-text);
font-weight: 700;
text-decoration: none;
transition: var(--trv-transition);
}
.trv-signup-link:hover {
color: var(--trv-primary);
text-decoration: underline;
}
Travel Itinerary Configurator
HTML
<div class="trv-dispatch-card">
<div class="trv-dispatch-header">
<span class="trv-dispatch-tag">Itinerary Config</span>
<h2 class="trv-dispatch-title">Itinerary Configurator</h2>
<p class="trv-dispatch-desc">Configure active reservation tiers, airline alerts, local ground shuttles, and luxury villa scopes.</p>
</div>
<form class="trv-dispatch-form" onsubmit="return false;">
<!-- Selection dropdown -->
<div class="trv-form-group">
<label for="plan-tier" class="trv-label">Selected Travel Tier Plan</label>
<select id="plan-tier" class="trv-select">
<option value="basic">Terraluxe Club Standard</option>
<option value="premium" selected>Bespoke Elite Ambassador Tier (Active)</option>
<option value="fellow">Private Jet Residence Charter</option>
</select>
</div>
<div class="trv-form-group">
<label class="trv-label">Active Amenities & Alarams</label>
<div class="trv-checkbox-grid">
<label class="trv-checkbox-wrapper">
<input type="checkbox" class="trv-checkbox" checked>
<span class="trv-checkbox-label">Live Flight Updates</span>
</label>
<label class="trv-checkbox-wrapper">
<input type="checkbox" class="trv-checkbox" checked>
<span class="trv-checkbox-label">Private Airport Shuttles</span>
</label>
<label class="trv-checkbox-wrapper">
<input type="checkbox" class="trv-checkbox">
<span class="trv-checkbox-label">Villa Concierge Support</span>
</label>
<label class="trv-checkbox-wrapper">
<input type="checkbox" class="trv-checkbox">
<span class="trv-checkbox-label">Resort Health Insurance</span>
</label>
</div>
</div>
<button type="submit" class="trv-btn trv-btn-primary trv-btn-block">
Save Trip Coordinates
</button>
<span class="trv-form-privacy">All Terraluxe villas include complimentary cancelations up to 14 days prior.</span>
</form>
</div>
CSS (Component Only)
/* Component: Travel Itinerary Configurator */
/* NOTE: This component requires base.css to be included in your page. */
.trv-dispatch-card {
max-width: 480px;
margin: 0 auto;
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius-lg);
box-shadow: var(--trv-shadow);
padding: 3rem 2.5rem;
}
.trv-dispatch-header {
text-align: center;
margin-bottom: 2rem;
}
.trv-dispatch-tag {
font-family: var(--trv-font-sub);
font-size: 0.75rem;
font-weight: 700;
color: var(--trv-primary);
text-transform: uppercase;
letter-spacing: 0.08em;
display: inline-block;
margin-bottom: 0.5rem;
}
.trv-dispatch-title {
font-family: var(--trv-font-heading);
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--trv-text);
}
.trv-dispatch-desc {
font-size: 0.85rem;
color: var(--trv-text-muted);
line-height: 1.6;
}
.trv-dispatch-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.trv-checkbox-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
background-color: var(--trv-surface-2);
border: 1px solid var(--trv-border);
padding: 1.25rem;
border-radius: var(--trv-radius);
margin-top: 0.25rem;
}
/* Custom checkbox styling same as login */
.trv-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
}
.trv-checkbox {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--trv-border-strong);
border-radius: var(--trv-radius-sm);
outline: none;
background-color: var(--trv-surface);
cursor: pointer;
transition: var(--trv-transition);
position: relative;
flex-shrink: 0;
}
.trv-checkbox:checked {
background-color: var(--trv-primary);
border-color: var(--trv-primary);
}
.trv-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.trv-checkbox-label {
font-size: 0.8rem;
color: var(--trv-text-muted);
line-height: 1.2;
}
.trv-form-privacy {
font-size: 0.725rem;
color: var(--trv-text-light);
text-align: center;
display: block;
line-height: 1.4;
}
@media (max-width: 576px) {
.trv-checkbox-grid {
grid-template-columns: 1fr;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Travel Booking Design System (trv-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--trv-bg: #F9FAF9; /* Sand White */
--trv-surface: #FFFFFF; /* Pure White */
--trv-surface-2: #F3F5F3; /* Linen Gray */
/* Brand Palette */
--trv-primary: #0D9488; /* Sea Teal */
--trv-primary-hover: #0F766E;
--trv-primary-muted: rgba(13, 148, 136, 0.08);
--trv-accent: #F43F5E; /* Coral Rose */
--trv-accent-hover: #E11D48;
--trv-accent-muted: rgba(244, 63, 94, 0.08);
--trv-gold: #F59E0B; /* Star Rating Gold */
/* Text */
--trv-text: #1F2937; /* Dark Charcoal */
--trv-text-muted: #4B5563; /* Slate grey */
--trv-text-light: #9CA3AF;
/* Borders */
--trv-border: #E5E7EB; /* Muted light border */
--trv-border-strong: #D1D5DB;
--trv-border-glow: rgba(13, 148, 136, 0.25);
/* Rounded Shapes */
--trv-radius-sm: 4px;
--trv-radius: 8px;
--trv-radius-lg: 16px;
--trv-radius-pill: 999px;
/* Fonts */
--trv-font-heading: 'Playfair Display', serif;
--trv-font-sub: 'Outfit', sans-serif;
--trv-font-body: 'Inter', sans-serif;
/* Shadows */
--trv-shadow-sm: 0 2px 8px rgba(0,0,0,0.02);
--trv-shadow: 0 10px 35px rgba(13, 148, 136, 0.04);
--trv-shadow-glow: 0 0 20px rgba(13, 148, 136, 0.08);
/* Transition */
--trv-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--trv-font-body);
color: var(--trv-text);
background-color: var(--trv-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.trv-card {
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius-lg);
box-shadow: var(--trv-shadow);
padding: 2.25rem;
transition: var(--trv-transition);
}
.trv-card:hover {
border-color: var(--trv-border-strong);
box-shadow: 0 12px 40px rgba(13, 148, 136, 0.07);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--trv-font-heading);
font-weight: 700;
margin: 0;
color: var(--trv-text);
line-height: 1.25;
}
p {
font-family: var(--trv-font-body);
color: var(--trv-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.trv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.6rem;
font-family: var(--trv-font-sub);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--trv-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--trv-transition);
white-space: nowrap;
user-select: none;
}
.trv-btn-primary {
background-color: var(--trv-primary);
color: #fff;
border-color: var(--trv-primary);
}
.trv-btn-primary:hover {
background-color: var(--trv-primary-hover);
border-color: var(--trv-primary-hover);
transform: translateY(-1px);
}
.trv-btn-accent {
background-color: var(--trv-accent);
color: #fff;
border-color: var(--trv-accent);
}
.trv-btn-accent:hover {
background-color: var(--trv-accent-hover);
border-color: var(--trv-accent-hover);
transform: translateY(-1px);
}
.trv-btn-outline {
background-color: var(--trv-surface);
color: var(--trv-text-muted);
border-color: var(--trv-border);
}
.trv-btn-outline:hover {
background-color: var(--trv-surface-2);
border-color: var(--trv-border-strong);
color: var(--trv-text);
}
.trv-btn-ghost {
background-color: transparent;
color: var(--trv-text-muted);
border-color: transparent;
}
.trv-btn-ghost:hover {
background-color: var(--trv-surface-2);
color: var(--trv-text);
}
.trv-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.8rem; }
.trv-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--trv-radius-lg); }
.trv-btn-block { width: 100%; }
.trv-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--trv-radius); }
/* ── Form Controls ────────────── */
.trv-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius);
font-family: var(--trv-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--trv-text);
background-color: var(--trv-surface);
outline: none;
transition: var(--trv-transition);
}
.trv-input::placeholder { color: var(--trv-text-light); }
.trv-input:focus {
border-color: var(--trv-primary);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
.trv-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--trv-font-sub);
font-weight: 600;
font-size: 0.8rem;
color: var(--trv-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Custom select */
.trv-select {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius);
font-family: var(--trv-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--trv-text);
background-color: var(--trv-surface);
outline: none;
transition: var(--trv-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1.1rem center;
background-size: 1rem;
cursor: pointer;
}
.trv-select:focus {
border-color: var(--trv-primary);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
/* ── Badges ───────────────────── */
.trv-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--trv-radius-pill);
font-family: var(--trv-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.trv-badge-primary { background-color: var(--trv-primary-muted); color: var(--trv-primary); border-color: rgba(13, 148, 136, 0.15); }
.trv-badge-accent { background-color: var(--trv-accent-muted); color: var(--trv-accent); border-color: rgba(244, 63, 94, 0.15); }
.trv-badge-gold { background-color: rgba(245, 158, 11, 0.08); color: var(--trv-gold); border-color: rgba(245, 158, 11, 0.15); }
.trv-badge-default { background-color: var(--trv-surface-2); color: var(--trv-text-muted); border-color: var(--trv-border); }
/* ── Star Ratings ─────────────── */
.trv-rating {
display: flex;
align-items: center;
gap: 0.25rem;
color: var(--trv-gold);
}
.trv-rating svg {
width: 14px;
height: 14px;
fill: currentColor;
}
/* ── Divider ──────────────────── */
.trv-divider { border: none; border-top: 1px solid var(--trv-border); margin: 0; }
/* ── Logo ─────────────────────── */
.trv-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--trv-font-heading);
font-size: 1.5rem;
color: var(--trv-text);
font-weight: 800;
letter-spacing: -0.01em;
}
.trv-logo-icon {
width: 32px;
height: 32px;
background-color: var(--trv-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: var(--trv-radius);
box-shadow: var(--trv-shadow-glow);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--trv-primary) !important; }
.text-accent { color: var(--trv-accent) !important; }
.text-muted { color: var(--trv-text-muted) !important; }
.text-light { color: var(--trv-text-light) !important; }
/* --- COMPONENT STYLES --- */
.trv-dispatch-card {
max-width: 480px;
margin: 0 auto;
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius-lg);
box-shadow: var(--trv-shadow);
padding: 3rem 2.5rem;
}
.trv-dispatch-header {
text-align: center;
margin-bottom: 2rem;
}
.trv-dispatch-tag {
font-family: var(--trv-font-sub);
font-size: 0.75rem;
font-weight: 700;
color: var(--trv-primary);
text-transform: uppercase;
letter-spacing: 0.08em;
display: inline-block;
margin-bottom: 0.5rem;
}
.trv-dispatch-title {
font-family: var(--trv-font-heading);
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--trv-text);
}
.trv-dispatch-desc {
font-size: 0.85rem;
color: var(--trv-text-muted);
line-height: 1.6;
}
.trv-dispatch-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.trv-checkbox-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
background-color: var(--trv-surface-2);
border: 1px solid var(--trv-border);
padding: 1.25rem;
border-radius: var(--trv-radius);
margin-top: 0.25rem;
}
/* Custom checkbox styling same as login */
.trv-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
}
.trv-checkbox {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--trv-border-strong);
border-radius: var(--trv-radius-sm);
outline: none;
background-color: var(--trv-surface);
cursor: pointer;
transition: var(--trv-transition);
position: relative;
flex-shrink: 0;
}
.trv-checkbox:checked {
background-color: var(--trv-primary);
border-color: var(--trv-primary);
}
.trv-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.trv-checkbox-label {
font-size: 0.8rem;
color: var(--trv-text-muted);
line-height: 1.2;
}
.trv-form-privacy {
font-size: 0.725rem;
color: var(--trv-text-light);
text-align: center;
display: block;
line-height: 1.4;
}
@media (max-width: 576px) {
.trv-checkbox-grid {
grid-template-columns: 1fr;
}
}
Cards
Luxury Resort Showcase Cards
HTML
<div class="trv-cards-grid">
<!-- Card 1: Beachfront Villa -->
<article class="trv-topic-card trv-card">
<div class="trv-card-img-wrapper">
<img src="https://images.unsplash.com/photo-1540555700478-4be289fbecef?auto=format&fit=crop&w=600&q=80" alt="Villa Belmond Caruso, Amalfi Coast" class="trv-card-img">
<span class="trv-card-price-tag">$1,250<small>/night</small></span>
</div>
<div class="trv-card-body">
<div class="trv-card-meta">
<span class="trv-card-tag text-primary">Oceanfront Haven</span>
<span class="trv-bullet">•</span>
<div class="trv-rating">
<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<span>4.9</span>
</div>
</div>
<h3 class="trv-card-title">
<a href="#" class="trv-card-link">Villa Belmond Caruso, Amalfi</a>
</h3>
<p class="trv-card-excerpt">Suspended between the sky and sea, experience private cliffside gardens, dedicated wait staff, and 11th-century mosaic pools.</p>
<div class="trv-card-amenities">
<span class="trv-amenity-pill">Infinity Pool</span>
<span class="trv-amenity-pill">Private Yacht Access</span>
<span class="trv-amenity-pill">Wine Cellar</span>
</div>
<div class="trv-card-footer">
<span class="trv-card-path">Amalfi Coast, Italy</span>
<span class="trv-watch-cta">Reserve Haven</span>
</div>
</div>
</article>
<!-- Card 2: Swiss Chalet -->
<article class="trv-topic-card trv-card">
<div class="trv-card-img-wrapper">
<img src="https://images.unsplash.com/photo-1502784444187-359ac186c5bb?auto=format&fit=crop&w=600&q=80" alt="Chalet Zermatt Peak, Switzerland" class="trv-card-img">
<span class="trv-card-price-tag">$1,850<small>/night</small></span>
</div>
<div class="trv-card-body">
<div class="trv-card-meta">
<span class="trv-card-tag text-accent">Alpine Sanctuary</span>
<span class="trv-bullet">•</span>
<div class="trv-rating">
<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<span>5.0</span>
</div>
</div>
<h3 class="trv-card-title">
<a href="#" class="trv-card-link">Chalet Zermatt Peak, Zermatt</a>
</h3>
<p class="trv-card-excerpt">A premium luxury retreat overlooking the Matterhorn, boasting in-house massage spas, outdoor hot tubs, and direct ski in/out passes.</p>
<div class="trv-card-amenities">
<span class="trv-amenity-pill">Ski In/Out</span>
<span class="trv-amenity-pill">Private Spa</span>
<span class="trv-amenity-pill">Helipad</span>
</div>
<div class="trv-card-footer">
<span class="trv-card-path">Zermatt, Switzerland</span>
<span class="trv-watch-cta">Reserve Haven</span>
</div>
</div>
</article>
</div>
CSS (Component Only)
/* Component: Luxury Resort Showcase Cards */
/* NOTE: This component requires base.css to be included in your page. */
.trv-cards-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
max-width: 1100px;
margin: 0 auto;
}
/* Common Card Base styles */
.trv-topic-card {
display: flex;
flex-direction: column;
overflow: hidden;
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius-lg);
box-shadow: var(--trv-shadow-sm);
padding: 0 !important; /* override default card padding to let image bleed */
transition: var(--trv-transition);
}
.trv-topic-card:hover {
border-color: var(--trv-primary);
box-shadow: var(--trv-shadow);
transform: translateY(-2px);
}
/* Image wrapper */
.trv-card-img-wrapper {
position: relative;
width: 100%;
height: 240px;
overflow: hidden;
background-color: var(--trv-surface-2);
}
.trv-card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--trv-transition);
}
.trv-topic-card:hover .trv-card-img {
transform: scale(1.05);
}
.trv-card-price-tag {
position: absolute;
bottom: 1rem;
right: 1rem;
background-color: var(--trv-surface);
color: var(--trv-text);
padding: 0.45rem 1rem;
border-radius: var(--trv-radius-pill);
font-family: var(--trv-font-sub);
font-size: 1.1rem;
font-weight: 800;
box-shadow: var(--trv-shadow);
}
.trv-card-price-tag small {
font-size: 0.7rem;
font-weight: 500;
color: var(--trv-text-muted);
}
/* Body */
.trv-card-body {
display: flex;
flex-direction: column;
gap: 0.85rem;
flex: 1;
padding: 2rem;
}
.trv-card-meta {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--trv-text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.trv-bullet {
color: var(--trv-border);
}
.trv-card-title {
font-family: var(--trv-font-heading);
font-size: 1.35rem;
font-weight: 700;
line-height: 1.3;
}
.trv-card-link {
color: var(--trv-text);
text-decoration: none;
transition: var(--trv-transition);
}
.trv-card-link:hover {
color: var(--trv-primary);
}
.trv-card-excerpt {
font-size: 0.85rem;
color: var(--trv-text-muted);
line-height: 1.5;
margin-bottom: 0.5rem;
}
/* Amenities list */
.trv-card-amenities {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-bottom: 0.5rem;
}
.trv-amenity-pill {
background-color: var(--trv-surface-2);
border: 1px solid var(--trv-border);
padding: 0.25rem 0.65rem;
font-size: 0.725rem;
font-weight: 600;
color: var(--trv-text-muted);
border-radius: var(--trv-radius-sm);
font-family: var(--trv-font-sub);
}
/* Footer info */
.trv-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--trv-border);
padding-top: 1.25rem;
margin-top: auto;
}
.trv-card-path {
font-family: var(--trv-font-sub);
font-size: 0.75rem;
font-weight: 600;
color: var(--trv-text-light);
}
.trv-watch-cta {
font-family: var(--trv-font-sub);
font-size: 0.75rem;
font-weight: 700;
color: var(--trv-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
transition: var(--trv-transition);
}
.trv-topic-card:hover .trv-watch-cta {
color: var(--trv-primary-hover);
}
@media (max-width: 992px) {
.trv-cards-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Travel Booking Design System (trv-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--trv-bg: #F9FAF9; /* Sand White */
--trv-surface: #FFFFFF; /* Pure White */
--trv-surface-2: #F3F5F3; /* Linen Gray */
/* Brand Palette */
--trv-primary: #0D9488; /* Sea Teal */
--trv-primary-hover: #0F766E;
--trv-primary-muted: rgba(13, 148, 136, 0.08);
--trv-accent: #F43F5E; /* Coral Rose */
--trv-accent-hover: #E11D48;
--trv-accent-muted: rgba(244, 63, 94, 0.08);
--trv-gold: #F59E0B; /* Star Rating Gold */
/* Text */
--trv-text: #1F2937; /* Dark Charcoal */
--trv-text-muted: #4B5563; /* Slate grey */
--trv-text-light: #9CA3AF;
/* Borders */
--trv-border: #E5E7EB; /* Muted light border */
--trv-border-strong: #D1D5DB;
--trv-border-glow: rgba(13, 148, 136, 0.25);
/* Rounded Shapes */
--trv-radius-sm: 4px;
--trv-radius: 8px;
--trv-radius-lg: 16px;
--trv-radius-pill: 999px;
/* Fonts */
--trv-font-heading: 'Playfair Display', serif;
--trv-font-sub: 'Outfit', sans-serif;
--trv-font-body: 'Inter', sans-serif;
/* Shadows */
--trv-shadow-sm: 0 2px 8px rgba(0,0,0,0.02);
--trv-shadow: 0 10px 35px rgba(13, 148, 136, 0.04);
--trv-shadow-glow: 0 0 20px rgba(13, 148, 136, 0.08);
/* Transition */
--trv-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--trv-font-body);
color: var(--trv-text);
background-color: var(--trv-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.trv-card {
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius-lg);
box-shadow: var(--trv-shadow);
padding: 2.25rem;
transition: var(--trv-transition);
}
.trv-card:hover {
border-color: var(--trv-border-strong);
box-shadow: 0 12px 40px rgba(13, 148, 136, 0.07);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--trv-font-heading);
font-weight: 700;
margin: 0;
color: var(--trv-text);
line-height: 1.25;
}
p {
font-family: var(--trv-font-body);
color: var(--trv-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.trv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.6rem;
font-family: var(--trv-font-sub);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--trv-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--trv-transition);
white-space: nowrap;
user-select: none;
}
.trv-btn-primary {
background-color: var(--trv-primary);
color: #fff;
border-color: var(--trv-primary);
}
.trv-btn-primary:hover {
background-color: var(--trv-primary-hover);
border-color: var(--trv-primary-hover);
transform: translateY(-1px);
}
.trv-btn-accent {
background-color: var(--trv-accent);
color: #fff;
border-color: var(--trv-accent);
}
.trv-btn-accent:hover {
background-color: var(--trv-accent-hover);
border-color: var(--trv-accent-hover);
transform: translateY(-1px);
}
.trv-btn-outline {
background-color: var(--trv-surface);
color: var(--trv-text-muted);
border-color: var(--trv-border);
}
.trv-btn-outline:hover {
background-color: var(--trv-surface-2);
border-color: var(--trv-border-strong);
color: var(--trv-text);
}
.trv-btn-ghost {
background-color: transparent;
color: var(--trv-text-muted);
border-color: transparent;
}
.trv-btn-ghost:hover {
background-color: var(--trv-surface-2);
color: var(--trv-text);
}
.trv-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.8rem; }
.trv-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--trv-radius-lg); }
.trv-btn-block { width: 100%; }
.trv-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--trv-radius); }
/* ── Form Controls ────────────── */
.trv-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius);
font-family: var(--trv-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--trv-text);
background-color: var(--trv-surface);
outline: none;
transition: var(--trv-transition);
}
.trv-input::placeholder { color: var(--trv-text-light); }
.trv-input:focus {
border-color: var(--trv-primary);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
.trv-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--trv-font-sub);
font-weight: 600;
font-size: 0.8rem;
color: var(--trv-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Custom select */
.trv-select {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius);
font-family: var(--trv-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--trv-text);
background-color: var(--trv-surface);
outline: none;
transition: var(--trv-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1.1rem center;
background-size: 1rem;
cursor: pointer;
}
.trv-select:focus {
border-color: var(--trv-primary);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
/* ── Badges ───────────────────── */
.trv-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--trv-radius-pill);
font-family: var(--trv-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.trv-badge-primary { background-color: var(--trv-primary-muted); color: var(--trv-primary); border-color: rgba(13, 148, 136, 0.15); }
.trv-badge-accent { background-color: var(--trv-accent-muted); color: var(--trv-accent); border-color: rgba(244, 63, 94, 0.15); }
.trv-badge-gold { background-color: rgba(245, 158, 11, 0.08); color: var(--trv-gold); border-color: rgba(245, 158, 11, 0.15); }
.trv-badge-default { background-color: var(--trv-surface-2); color: var(--trv-text-muted); border-color: var(--trv-border); }
/* ── Star Ratings ─────────────── */
.trv-rating {
display: flex;
align-items: center;
gap: 0.25rem;
color: var(--trv-gold);
}
.trv-rating svg {
width: 14px;
height: 14px;
fill: currentColor;
}
/* ── Divider ──────────────────── */
.trv-divider { border: none; border-top: 1px solid var(--trv-border); margin: 0; }
/* ── Logo ─────────────────────── */
.trv-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--trv-font-heading);
font-size: 1.5rem;
color: var(--trv-text);
font-weight: 800;
letter-spacing: -0.01em;
}
.trv-logo-icon {
width: 32px;
height: 32px;
background-color: var(--trv-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: var(--trv-radius);
box-shadow: var(--trv-shadow-glow);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--trv-primary) !important; }
.text-accent { color: var(--trv-accent) !important; }
.text-muted { color: var(--trv-text-muted) !important; }
.text-light { color: var(--trv-text-light) !important; }
/* --- COMPONENT STYLES --- */
.trv-cards-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
max-width: 1100px;
margin: 0 auto;
}
/* Common Card Base styles */
.trv-topic-card {
display: flex;
flex-direction: column;
overflow: hidden;
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius-lg);
box-shadow: var(--trv-shadow-sm);
padding: 0 !important; /* override default card padding to let image bleed */
transition: var(--trv-transition);
}
.trv-topic-card:hover {
border-color: var(--trv-primary);
box-shadow: var(--trv-shadow);
transform: translateY(-2px);
}
/* Image wrapper */
.trv-card-img-wrapper {
position: relative;
width: 100%;
height: 240px;
overflow: hidden;
background-color: var(--trv-surface-2);
}
.trv-card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--trv-transition);
}
.trv-topic-card:hover .trv-card-img {
transform: scale(1.05);
}
.trv-card-price-tag {
position: absolute;
bottom: 1rem;
right: 1rem;
background-color: var(--trv-surface);
color: var(--trv-text);
padding: 0.45rem 1rem;
border-radius: var(--trv-radius-pill);
font-family: var(--trv-font-sub);
font-size: 1.1rem;
font-weight: 800;
box-shadow: var(--trv-shadow);
}
.trv-card-price-tag small {
font-size: 0.7rem;
font-weight: 500;
color: var(--trv-text-muted);
}
/* Body */
.trv-card-body {
display: flex;
flex-direction: column;
gap: 0.85rem;
flex: 1;
padding: 2rem;
}
.trv-card-meta {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--trv-text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.trv-bullet {
color: var(--trv-border);
}
.trv-card-title {
font-family: var(--trv-font-heading);
font-size: 1.35rem;
font-weight: 700;
line-height: 1.3;
}
.trv-card-link {
color: var(--trv-text);
text-decoration: none;
transition: var(--trv-transition);
}
.trv-card-link:hover {
color: var(--trv-primary);
}
.trv-card-excerpt {
font-size: 0.85rem;
color: var(--trv-text-muted);
line-height: 1.5;
margin-bottom: 0.5rem;
}
/* Amenities list */
.trv-card-amenities {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-bottom: 0.5rem;
}
.trv-amenity-pill {
background-color: var(--trv-surface-2);
border: 1px solid var(--trv-border);
padding: 0.25rem 0.65rem;
font-size: 0.725rem;
font-weight: 600;
color: var(--trv-text-muted);
border-radius: var(--trv-radius-sm);
font-family: var(--trv-font-sub);
}
/* Footer info */
.trv-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--trv-border);
padding-top: 1.25rem;
margin-top: auto;
}
.trv-card-path {
font-family: var(--trv-font-sub);
font-size: 0.75rem;
font-weight: 600;
color: var(--trv-text-light);
}
.trv-watch-cta {
font-family: var(--trv-font-sub);
font-size: 0.75rem;
font-weight: 700;
color: var(--trv-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
transition: var(--trv-transition);
}
.trv-topic-card:hover .trv-watch-cta {
color: var(--trv-primary-hover);
}
@media (max-width: 992px) {
.trv-cards-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
}
Loyalty Status Stats Dashboard
HTML
<div class="trv-stats-row">
<!-- Stat 1 -->
<div class="trv-stat-card trv-card">
<div class="trv-stat-icon-wrapper trv-badge-primary">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</div>
<div class="trv-stat-details">
<span class="trv-stat-label">Nights Stayed</span>
<div class="trv-stat-value-group">
<span class="trv-stat-value">42</span>
<span class="trv-stat-change positive">Nights</span>
</div>
<span class="trv-stat-desc">Total nights checked in across our luxury retreat villas and elite boutique hotels.</span>
</div>
</div>
<!-- Stat 2 -->
<div class="trv-stat-card trv-card">
<div class="trv-stat-icon-wrapper trv-badge-gold">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</div>
<div class="trv-stat-details">
<span class="trv-stat-label">Loyalty Club Tier</span>
<div class="trv-stat-value-group">
<span class="trv-stat-value">Ambassador</span>
<span class="trv-stat-change positive">Elite</span>
</div>
<span class="trv-stat-desc">Your verified Terraluxe club level grants premium airport lounges and free upgrades.</span>
</div>
</div>
<!-- Stat 3 -->
<div class="trv-stat-card trv-card">
<div class="trv-stat-icon-wrapper trv-badge-accent">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 2L11 13"></path><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
</div>
<div class="trv-stat-details">
<span class="trv-stat-label">Upcoming Flights</span>
<div class="trv-stat-value-group">
<span class="trv-stat-value">3</span>
<span class="trv-stat-change positive">Active</span>
</div>
<!-- Progress mini bar representing proportion of successful matches -->
<div class="trv-stat-progress-wrapper">
<div class="trv-stat-progress-bar" style="width: 75%;"></div>
</div>
<span class="trv-stat-desc">Synchronized flight legs with companion airline updates in active itinerary sheets.</span>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Loyalty Status Stats Dashboard */
/* NOTE: This component requires base.css to be included in your page. */
.trv-stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
max-width: 1100px;
margin: 0 auto;
}
.trv-stat-card {
display: flex;
align-items: flex-start;
gap: 1.25rem;
}
.trv-stat-icon-wrapper {
width: 44px;
height: 44px;
border-radius: var(--trv-radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.trv-stat-icon-wrapper svg {
width: 20px;
height: 20px;
}
.trv-stat-details {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
min-width: 0;
}
.trv-stat-label {
font-family: var(--trv-font-sub);
font-size: 0.725rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--trv-text-light);
}
.trv-stat-value-group {
display: flex;
align-items: baseline;
gap: 0.75rem;
flex-wrap: wrap;
}
.trv-stat-value {
font-family: var(--trv-font-heading);
font-size: 1.75rem;
font-weight: 700;
color: var(--trv-text);
line-height: 1;
}
.trv-stat-change {
font-size: 0.75rem;
font-weight: 700;
border-radius: var(--trv-radius-sm);
font-family: var(--trv-font-sub);
}
.trv-stat-change.positive {
color: var(--trv-primary);
}
.trv-stat-desc {
font-size: 0.725rem;
color: var(--trv-text-muted);
line-height: 1.4;
}
/* Progress Bar */
.trv-stat-progress-wrapper {
width: 100%;
height: 4px;
background-color: var(--trv-surface-2);
border-radius: var(--trv-radius-pill);
overflow: hidden;
margin: 0.25rem 0;
}
.trv-stat-progress-bar {
height: 100%;
background-color: var(--trv-primary);
border-radius: var(--trv-radius-pill);
box-shadow: 0 0 8px rgba(13, 148, 136, 0.3);
}
@media (max-width: 992px) {
.trv-stats-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Travel Booking Design System (trv-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--trv-bg: #F9FAF9; /* Sand White */
--trv-surface: #FFFFFF; /* Pure White */
--trv-surface-2: #F3F5F3; /* Linen Gray */
/* Brand Palette */
--trv-primary: #0D9488; /* Sea Teal */
--trv-primary-hover: #0F766E;
--trv-primary-muted: rgba(13, 148, 136, 0.08);
--trv-accent: #F43F5E; /* Coral Rose */
--trv-accent-hover: #E11D48;
--trv-accent-muted: rgba(244, 63, 94, 0.08);
--trv-gold: #F59E0B; /* Star Rating Gold */
/* Text */
--trv-text: #1F2937; /* Dark Charcoal */
--trv-text-muted: #4B5563; /* Slate grey */
--trv-text-light: #9CA3AF;
/* Borders */
--trv-border: #E5E7EB; /* Muted light border */
--trv-border-strong: #D1D5DB;
--trv-border-glow: rgba(13, 148, 136, 0.25);
/* Rounded Shapes */
--trv-radius-sm: 4px;
--trv-radius: 8px;
--trv-radius-lg: 16px;
--trv-radius-pill: 999px;
/* Fonts */
--trv-font-heading: 'Playfair Display', serif;
--trv-font-sub: 'Outfit', sans-serif;
--trv-font-body: 'Inter', sans-serif;
/* Shadows */
--trv-shadow-sm: 0 2px 8px rgba(0,0,0,0.02);
--trv-shadow: 0 10px 35px rgba(13, 148, 136, 0.04);
--trv-shadow-glow: 0 0 20px rgba(13, 148, 136, 0.08);
/* Transition */
--trv-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--trv-font-body);
color: var(--trv-text);
background-color: var(--trv-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.trv-card {
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius-lg);
box-shadow: var(--trv-shadow);
padding: 2.25rem;
transition: var(--trv-transition);
}
.trv-card:hover {
border-color: var(--trv-border-strong);
box-shadow: 0 12px 40px rgba(13, 148, 136, 0.07);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--trv-font-heading);
font-weight: 700;
margin: 0;
color: var(--trv-text);
line-height: 1.25;
}
p {
font-family: var(--trv-font-body);
color: var(--trv-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.trv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.6rem;
font-family: var(--trv-font-sub);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--trv-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--trv-transition);
white-space: nowrap;
user-select: none;
}
.trv-btn-primary {
background-color: var(--trv-primary);
color: #fff;
border-color: var(--trv-primary);
}
.trv-btn-primary:hover {
background-color: var(--trv-primary-hover);
border-color: var(--trv-primary-hover);
transform: translateY(-1px);
}
.trv-btn-accent {
background-color: var(--trv-accent);
color: #fff;
border-color: var(--trv-accent);
}
.trv-btn-accent:hover {
background-color: var(--trv-accent-hover);
border-color: var(--trv-accent-hover);
transform: translateY(-1px);
}
.trv-btn-outline {
background-color: var(--trv-surface);
color: var(--trv-text-muted);
border-color: var(--trv-border);
}
.trv-btn-outline:hover {
background-color: var(--trv-surface-2);
border-color: var(--trv-border-strong);
color: var(--trv-text);
}
.trv-btn-ghost {
background-color: transparent;
color: var(--trv-text-muted);
border-color: transparent;
}
.trv-btn-ghost:hover {
background-color: var(--trv-surface-2);
color: var(--trv-text);
}
.trv-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.8rem; }
.trv-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--trv-radius-lg); }
.trv-btn-block { width: 100%; }
.trv-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--trv-radius); }
/* ── Form Controls ────────────── */
.trv-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius);
font-family: var(--trv-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--trv-text);
background-color: var(--trv-surface);
outline: none;
transition: var(--trv-transition);
}
.trv-input::placeholder { color: var(--trv-text-light); }
.trv-input:focus {
border-color: var(--trv-primary);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
.trv-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--trv-font-sub);
font-weight: 600;
font-size: 0.8rem;
color: var(--trv-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Custom select */
.trv-select {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius);
font-family: var(--trv-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--trv-text);
background-color: var(--trv-surface);
outline: none;
transition: var(--trv-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1.1rem center;
background-size: 1rem;
cursor: pointer;
}
.trv-select:focus {
border-color: var(--trv-primary);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
/* ── Badges ───────────────────── */
.trv-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--trv-radius-pill);
font-family: var(--trv-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.trv-badge-primary { background-color: var(--trv-primary-muted); color: var(--trv-primary); border-color: rgba(13, 148, 136, 0.15); }
.trv-badge-accent { background-color: var(--trv-accent-muted); color: var(--trv-accent); border-color: rgba(244, 63, 94, 0.15); }
.trv-badge-gold { background-color: rgba(245, 158, 11, 0.08); color: var(--trv-gold); border-color: rgba(245, 158, 11, 0.15); }
.trv-badge-default { background-color: var(--trv-surface-2); color: var(--trv-text-muted); border-color: var(--trv-border); }
/* ── Star Ratings ─────────────── */
.trv-rating {
display: flex;
align-items: center;
gap: 0.25rem;
color: var(--trv-gold);
}
.trv-rating svg {
width: 14px;
height: 14px;
fill: currentColor;
}
/* ── Divider ──────────────────── */
.trv-divider { border: none; border-top: 1px solid var(--trv-border); margin: 0; }
/* ── Logo ─────────────────────── */
.trv-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--trv-font-heading);
font-size: 1.5rem;
color: var(--trv-text);
font-weight: 800;
letter-spacing: -0.01em;
}
.trv-logo-icon {
width: 32px;
height: 32px;
background-color: var(--trv-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: var(--trv-radius);
box-shadow: var(--trv-shadow-glow);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--trv-primary) !important; }
.text-accent { color: var(--trv-accent) !important; }
.text-muted { color: var(--trv-text-muted) !important; }
.text-light { color: var(--trv-text-light) !important; }
/* --- COMPONENT STYLES --- */
.trv-stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
max-width: 1100px;
margin: 0 auto;
}
.trv-stat-card {
display: flex;
align-items: flex-start;
gap: 1.25rem;
}
.trv-stat-icon-wrapper {
width: 44px;
height: 44px;
border-radius: var(--trv-radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.trv-stat-icon-wrapper svg {
width: 20px;
height: 20px;
}
.trv-stat-details {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
min-width: 0;
}
.trv-stat-label {
font-family: var(--trv-font-sub);
font-size: 0.725rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--trv-text-light);
}
.trv-stat-value-group {
display: flex;
align-items: baseline;
gap: 0.75rem;
flex-wrap: wrap;
}
.trv-stat-value {
font-family: var(--trv-font-heading);
font-size: 1.75rem;
font-weight: 700;
color: var(--trv-text);
line-height: 1;
}
.trv-stat-change {
font-size: 0.75rem;
font-weight: 700;
border-radius: var(--trv-radius-sm);
font-family: var(--trv-font-sub);
}
.trv-stat-change.positive {
color: var(--trv-primary);
}
.trv-stat-desc {
font-size: 0.725rem;
color: var(--trv-text-muted);
line-height: 1.4;
}
/* Progress Bar */
.trv-stat-progress-wrapper {
width: 100%;
height: 4px;
background-color: var(--trv-surface-2);
border-radius: var(--trv-radius-pill);
overflow: hidden;
margin: 0.25rem 0;
}
.trv-stat-progress-bar {
height: 100%;
background-color: var(--trv-primary);
border-radius: var(--trv-radius-pill);
box-shadow: 0 0 8px rgba(13, 148, 136, 0.3);
}
@media (max-width: 992px) {
.trv-stats-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
Tables
Itinerary Flight Ledger Table
HTML
<div class="trv-table-wrapper trv-card">
<div class="trv-table-header">
<h3 class="trv-table-title">Flight Itinerary & Flight Ledger</h3>
<p class="trv-table-desc">Confirmed flight connections, private jet charters, transfer statuses, and boarding access vouchers.</p>
</div>
<div class="trv-table-scroll">
<table class="trv-table">
<thead>
<tr>
<th>Flight Leg</th>
<th>Carrier / Flight No.</th>
<th>Departure / Origin</th>
<th>Arrival / Destination</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<!-- Row 1 -->
<tr>
<td class="trv-title-cell">
<span class="trv-parameter-title">Naples Connection</span>
</td>
<td>
<span class="trv-carrier-name">ITA Airways</span>
<code class="trv-flight-no">AZ-2042</code>
</td>
<td>
<span class="trv-airport">LHR • London</span>
<span class="trv-time">June 12, 08:30 AM</span>
</td>
<td>
<span class="trv-airport">NAP • Naples</span>
<span class="trv-time">June 12, 11:45 AM</span>
</td>
<td><span class="trv-badge trv-badge-gold">Boarding</span></td>
<td>
<button class="trv-btn trv-btn-outline trv-btn-sm">Download ticket</button>
</td>
</tr>
<!-- Row 2 -->
<tr>
<td class="trv-title-cell">
<span class="trv-parameter-title">Zurich Alpine Express</span>
</td>
<td>
<span class="trv-carrier-name">Swiss International</span>
<code class="trv-flight-no">LX-1610</code>
</td>
<td>
<span class="trv-airport">ZHR • Zurich</span>
<span class="trv-time">June 19, 02:15 PM</span>
</td>
<td>
<span class="trv-airport">LHR • London</span>
<span class="trv-time">June 19, 03:55 PM</span>
</td>
<td><span class="trv-badge trv-badge-primary">Scheduled</span></td>
<td>
<button class="trv-btn trv-btn-outline trv-btn-sm">Download ticket</button>
</td>
</tr>
<!-- Row 3 -->
<tr>
<td class="trv-title-cell">
<span class="trv-parameter-title">Safari Safari Air Link</span>
</td>
<td>
<span class="trv-carrier-name">Terraluxe Air Charter</span>
<code class="trv-flight-no">TX-005</code>
</td>
<td>
<span class="trv-airport">ARK • Arusha</span>
<span class="trv-time">July 04, 09:00 AM</span>
</td>
<td>
<span class="trv-airport">SEU • Serengeti</span>
<span class="trv-time">July 04, 10:15 AM</span>
</td>
<td><span class="trv-badge trv-badge-accent">Exclusive</span></td>
<td>
<button class="trv-btn trv-btn-outline trv-btn-sm">Download ticket</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS (Component Only)
/* Component: Itinerary Flight Ledger Table */
/* NOTE: This component requires base.css to be included in your page. */
.trv-table-wrapper {
max-width: 1100px;
margin: 0 auto;
width: 100%;
}
.trv-table-header {
margin-bottom: 1.5rem;
}
.trv-table-title {
font-family: var(--trv-font-heading);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.35rem;
color: var(--trv-text);
}
.trv-table-desc {
font-size: 0.85rem;
color: var(--trv-text-muted);
}
.trv-table-scroll {
width: 100%;
overflow-x: auto;
}
.trv-table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-family: var(--trv-font-body);
}
.trv-table th {
font-family: var(--trv-font-sub);
font-size: 0.725rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--trv-text-light);
border-bottom: 2px solid var(--trv-border);
padding: 1rem;
}
.trv-table td {
padding: 1.25rem 1rem;
border-bottom: 1px solid var(--trv-border);
font-size: 0.85rem;
color: var(--trv-text-muted);
vertical-align: middle;
}
.trv-table tr:hover td {
background-color: var(--trv-surface-2);
}
/* Specific Cells */
.trv-title-cell {
white-space: nowrap;
}
.trv-parameter-title {
font-family: var(--trv-font-heading);
font-size: 1.1rem;
font-weight: 700;
color: var(--trv-text);
}
.trv-carrier-name {
display: block;
font-weight: 600;
color: var(--trv-text-muted);
}
.trv-flight-no {
font-family: var(--trv-font-sub);
font-size: 0.725rem;
background-color: var(--trv-surface-2);
padding: 0.15rem 0.35rem;
border-radius: var(--trv-radius-sm);
color: var(--trv-primary);
border: 1px solid var(--trv-border);
font-weight: 700;
}
.trv-airport {
display: block;
font-weight: 700;
color: var(--trv-text);
}
.trv-time {
font-size: 0.75rem;
color: var(--trv-text-light);
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Travel Booking Design System (trv-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--trv-bg: #F9FAF9; /* Sand White */
--trv-surface: #FFFFFF; /* Pure White */
--trv-surface-2: #F3F5F3; /* Linen Gray */
/* Brand Palette */
--trv-primary: #0D9488; /* Sea Teal */
--trv-primary-hover: #0F766E;
--trv-primary-muted: rgba(13, 148, 136, 0.08);
--trv-accent: #F43F5E; /* Coral Rose */
--trv-accent-hover: #E11D48;
--trv-accent-muted: rgba(244, 63, 94, 0.08);
--trv-gold: #F59E0B; /* Star Rating Gold */
/* Text */
--trv-text: #1F2937; /* Dark Charcoal */
--trv-text-muted: #4B5563; /* Slate grey */
--trv-text-light: #9CA3AF;
/* Borders */
--trv-border: #E5E7EB; /* Muted light border */
--trv-border-strong: #D1D5DB;
--trv-border-glow: rgba(13, 148, 136, 0.25);
/* Rounded Shapes */
--trv-radius-sm: 4px;
--trv-radius: 8px;
--trv-radius-lg: 16px;
--trv-radius-pill: 999px;
/* Fonts */
--trv-font-heading: 'Playfair Display', serif;
--trv-font-sub: 'Outfit', sans-serif;
--trv-font-body: 'Inter', sans-serif;
/* Shadows */
--trv-shadow-sm: 0 2px 8px rgba(0,0,0,0.02);
--trv-shadow: 0 10px 35px rgba(13, 148, 136, 0.04);
--trv-shadow-glow: 0 0 20px rgba(13, 148, 136, 0.08);
/* Transition */
--trv-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--trv-font-body);
color: var(--trv-text);
background-color: var(--trv-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.trv-card {
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius-lg);
box-shadow: var(--trv-shadow);
padding: 2.25rem;
transition: var(--trv-transition);
}
.trv-card:hover {
border-color: var(--trv-border-strong);
box-shadow: 0 12px 40px rgba(13, 148, 136, 0.07);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--trv-font-heading);
font-weight: 700;
margin: 0;
color: var(--trv-text);
line-height: 1.25;
}
p {
font-family: var(--trv-font-body);
color: var(--trv-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.trv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.6rem;
font-family: var(--trv-font-sub);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--trv-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--trv-transition);
white-space: nowrap;
user-select: none;
}
.trv-btn-primary {
background-color: var(--trv-primary);
color: #fff;
border-color: var(--trv-primary);
}
.trv-btn-primary:hover {
background-color: var(--trv-primary-hover);
border-color: var(--trv-primary-hover);
transform: translateY(-1px);
}
.trv-btn-accent {
background-color: var(--trv-accent);
color: #fff;
border-color: var(--trv-accent);
}
.trv-btn-accent:hover {
background-color: var(--trv-accent-hover);
border-color: var(--trv-accent-hover);
transform: translateY(-1px);
}
.trv-btn-outline {
background-color: var(--trv-surface);
color: var(--trv-text-muted);
border-color: var(--trv-border);
}
.trv-btn-outline:hover {
background-color: var(--trv-surface-2);
border-color: var(--trv-border-strong);
color: var(--trv-text);
}
.trv-btn-ghost {
background-color: transparent;
color: var(--trv-text-muted);
border-color: transparent;
}
.trv-btn-ghost:hover {
background-color: var(--trv-surface-2);
color: var(--trv-text);
}
.trv-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.8rem; }
.trv-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--trv-radius-lg); }
.trv-btn-block { width: 100%; }
.trv-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--trv-radius); }
/* ── Form Controls ────────────── */
.trv-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius);
font-family: var(--trv-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--trv-text);
background-color: var(--trv-surface);
outline: none;
transition: var(--trv-transition);
}
.trv-input::placeholder { color: var(--trv-text-light); }
.trv-input:focus {
border-color: var(--trv-primary);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
.trv-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--trv-font-sub);
font-weight: 600;
font-size: 0.8rem;
color: var(--trv-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Custom select */
.trv-select {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius);
font-family: var(--trv-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--trv-text);
background-color: var(--trv-surface);
outline: none;
transition: var(--trv-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1.1rem center;
background-size: 1rem;
cursor: pointer;
}
.trv-select:focus {
border-color: var(--trv-primary);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
/* ── Badges ───────────────────── */
.trv-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--trv-radius-pill);
font-family: var(--trv-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.trv-badge-primary { background-color: var(--trv-primary-muted); color: var(--trv-primary); border-color: rgba(13, 148, 136, 0.15); }
.trv-badge-accent { background-color: var(--trv-accent-muted); color: var(--trv-accent); border-color: rgba(244, 63, 94, 0.15); }
.trv-badge-gold { background-color: rgba(245, 158, 11, 0.08); color: var(--trv-gold); border-color: rgba(245, 158, 11, 0.15); }
.trv-badge-default { background-color: var(--trv-surface-2); color: var(--trv-text-muted); border-color: var(--trv-border); }
/* ── Star Ratings ─────────────── */
.trv-rating {
display: flex;
align-items: center;
gap: 0.25rem;
color: var(--trv-gold);
}
.trv-rating svg {
width: 14px;
height: 14px;
fill: currentColor;
}
/* ── Divider ──────────────────── */
.trv-divider { border: none; border-top: 1px solid var(--trv-border); margin: 0; }
/* ── Logo ─────────────────────── */
.trv-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--trv-font-heading);
font-size: 1.5rem;
color: var(--trv-text);
font-weight: 800;
letter-spacing: -0.01em;
}
.trv-logo-icon {
width: 32px;
height: 32px;
background-color: var(--trv-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: var(--trv-radius);
box-shadow: var(--trv-shadow-glow);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--trv-primary) !important; }
.text-accent { color: var(--trv-accent) !important; }
.text-muted { color: var(--trv-text-muted) !important; }
.text-light { color: var(--trv-text-light) !important; }
/* --- COMPONENT STYLES --- */
.trv-table-wrapper {
max-width: 1100px;
margin: 0 auto;
width: 100%;
}
.trv-table-header {
margin-bottom: 1.5rem;
}
.trv-table-title {
font-family: var(--trv-font-heading);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.35rem;
color: var(--trv-text);
}
.trv-table-desc {
font-size: 0.85rem;
color: var(--trv-text-muted);
}
.trv-table-scroll {
width: 100%;
overflow-x: auto;
}
.trv-table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-family: var(--trv-font-body);
}
.trv-table th {
font-family: var(--trv-font-sub);
font-size: 0.725rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--trv-text-light);
border-bottom: 2px solid var(--trv-border);
padding: 1rem;
}
.trv-table td {
padding: 1.25rem 1rem;
border-bottom: 1px solid var(--trv-border);
font-size: 0.85rem;
color: var(--trv-text-muted);
vertical-align: middle;
}
.trv-table tr:hover td {
background-color: var(--trv-surface-2);
}
/* Specific Cells */
.trv-title-cell {
white-space: nowrap;
}
.trv-parameter-title {
font-family: var(--trv-font-heading);
font-size: 1.1rem;
font-weight: 700;
color: var(--trv-text);
}
.trv-carrier-name {
display: block;
font-weight: 600;
color: var(--trv-text-muted);
}
.trv-flight-no {
font-family: var(--trv-font-sub);
font-size: 0.725rem;
background-color: var(--trv-surface-2);
padding: 0.15rem 0.35rem;
border-radius: var(--trv-radius-sm);
color: var(--trv-primary);
border: 1px solid var(--trv-border);
font-weight: 700;
}
.trv-airport {
display: block;
font-weight: 700;
color: var(--trv-text);
}
.trv-time {
font-size: 0.75rem;
color: var(--trv-text-light);
}
Lists
Trip Route Map Timeline
HTML
<div class="trv-activity-wrapper trv-card">
<div class="trv-activity-header">
<h3 class="trv-activity-title">Bespoke Trip Route Timeline</h3>
<p class="trv-activity-desc">Track confirmed resort check-ins, helicopter flight logs, and luxury sailboat day excursions.</p>
</div>
<div class="trv-timeline">
<!-- Step 1 -->
<div class="trv-timeline-item">
<div class="trv-timeline-icon trv-timeline-comment">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</div>
<div class="trv-timeline-content">
<div class="trv-timeline-meta">
<span class="trv-activity-user">Day 01</span>
<span class="trv-activity-action">Naples Gateway Landing</span>
<span class="trv-activity-timestamp">Arrival</span>
<span class="trv-activity-time">Naples Airport (NAP)</span>
</div>
<div class="trv-timeline-text">
Arrive at Naples Capodichino International Airport. Your dedicated Terraluxe club driver will welcome you at the baggage gate with custom luxury terminal shuttle transfers.
</div>
</div>
</div>
<!-- Step 2 -->
<div class="trv-timeline-item">
<div class="trv-timeline-icon trv-timeline-bookmark">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 2L11 13"></path><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
</div>
<div class="trv-timeline-content">
<div class="trv-timeline-meta">
<span class="trv-activity-user">Day 02</span>
<span class="trv-activity-action">Helicopter Transit to Ravello</span>
<span class="trv-activity-timestamp">Transfer</span>
<span class="trv-activity-time">Elite Air Heliport</span>
</div>
<div class="trv-timeline-text">
Board private helicopter air shuttle for a 15-minute panoramic transfer directly to Caruso Cliff Heliport, avoiding active coastal highway congestion loops.
</div>
</div>
</div>
<!-- Step 3 -->
<div class="trv-timeline-item">
<div class="trv-timeline-icon trv-timeline-reply">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
</div>
<div class="trv-timeline-content">
<div class="trv-timeline-meta">
<span class="trv-activity-user text-primary">Day 04</span>
<span class="trv-activity-action">Sunset Sailing Charter</span>
<span class="trv-activity-timestamp">Excursion</span>
<span class="trv-activity-time">Positano Marina</span>
</div>
<div class="trv-timeline-text">
Embark on an exclusive day charter aboard a Riva Rivamare luxury day cruiser. Explore Capri's Blue Grotto with custom onboard champagne dinner guides.
</div>
</div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Trip Route Map Timeline */
/* NOTE: This component requires base.css to be included in your page. */
.trv-activity-wrapper {
max-width: 720px;
margin: 0 auto;
width: 100%;
}
.trv-activity-header {
margin-bottom: 2rem;
}
.trv-activity-title {
font-family: var(--trv-font-heading);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.35rem;
color: var(--trv-text);
}
.trv-activity-desc {
font-size: 0.85rem;
color: var(--trv-text-muted);
}
/* Timeline Wrapper */
.trv-timeline {
position: relative;
display: flex;
flex-direction: column;
}
.trv-timeline-item {
position: relative;
padding-left: 3rem;
padding-bottom: 2.25rem;
}
.trv-timeline-item:last-child {
padding-bottom: 0;
}
/* Perfect bulletproof timeline vertical connecting line */
.trv-timeline-item::before {
content: '';
position: absolute;
left: 1rem;
top: 2rem; /* Start right below the icon center */
bottom: 0;
width: 2px;
background-color: var(--trv-border);
}
.trv-timeline-item:last-child::before {
display: none; /* Hide line below the bottom element */
}
/* Icons */
.trv-timeline-icon {
position: absolute;
left: 0;
top: 0;
width: 32px;
height: 32px;
border-radius: var(--trv-radius-pill);
display: flex;
align-items: center;
justify-content: center;
color: var(--trv-text);
border: 1px solid var(--trv-border);
background-color: var(--trv-surface);
z-index: 2;
}
.trv-timeline-icon svg {
width: 14px;
height: 14px;
}
/* Icon specific color shifts */
.trv-timeline-comment {
background-color: var(--trv-primary-muted);
color: var(--trv-primary);
border-color: var(--trv-primary);
}
.trv-timeline-bookmark {
background-color: var(--trv-accent-muted);
color: var(--trv-accent);
border-color: var(--trv-accent);
}
.trv-timeline-reply {
background-color: var(--trv-primary-muted);
color: var(--trv-primary);
border-color: var(--trv-primary);
}
/* Contents */
.trv-timeline-content {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.trv-timeline-meta {
font-size: 0.8rem;
color: var(--trv-text-muted);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.trv-activity-user {
font-family: var(--trv-font-sub);
font-weight: 700;
color: var(--trv-text);
}
.trv-activity-action {
color: var(--trv-text-light);
font-weight: 500;
}
.trv-activity-timestamp {
font-family: var(--trv-font-sub);
font-weight: 700;
font-size: 0.75rem;
color: var(--trv-primary);
background-color: var(--trv-primary-muted);
padding: 0.15rem 0.45rem;
border-radius: var(--trv-radius-sm);
}
.trv-activity-time {
color: var(--trv-text-light);
font-size: 0.725rem;
margin-left: auto;
font-weight: 600;
}
.trv-timeline-text {
font-size: 0.85rem;
color: var(--trv-text-muted);
line-height: 1.5;
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
padding: 1rem 1.25rem;
border-radius: var(--trv-radius-lg);
margin: 0;
}
.trv-timeline-text code {
font-family: var(--trv-font-sub);
font-size: 0.75rem;
background-color: var(--trv-surface-2);
padding: 0.15rem 0.35rem;
border-radius: var(--trv-radius-sm);
color: var(--trv-text);
border: 1px solid var(--trv-border);
}
@media (max-width: 576px) {
.trv-activity-time {
margin-left: 0;
width: 100%;
margin-top: 0.15rem;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Travel Booking Design System (trv-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--trv-bg: #F9FAF9; /* Sand White */
--trv-surface: #FFFFFF; /* Pure White */
--trv-surface-2: #F3F5F3; /* Linen Gray */
/* Brand Palette */
--trv-primary: #0D9488; /* Sea Teal */
--trv-primary-hover: #0F766E;
--trv-primary-muted: rgba(13, 148, 136, 0.08);
--trv-accent: #F43F5E; /* Coral Rose */
--trv-accent-hover: #E11D48;
--trv-accent-muted: rgba(244, 63, 94, 0.08);
--trv-gold: #F59E0B; /* Star Rating Gold */
/* Text */
--trv-text: #1F2937; /* Dark Charcoal */
--trv-text-muted: #4B5563; /* Slate grey */
--trv-text-light: #9CA3AF;
/* Borders */
--trv-border: #E5E7EB; /* Muted light border */
--trv-border-strong: #D1D5DB;
--trv-border-glow: rgba(13, 148, 136, 0.25);
/* Rounded Shapes */
--trv-radius-sm: 4px;
--trv-radius: 8px;
--trv-radius-lg: 16px;
--trv-radius-pill: 999px;
/* Fonts */
--trv-font-heading: 'Playfair Display', serif;
--trv-font-sub: 'Outfit', sans-serif;
--trv-font-body: 'Inter', sans-serif;
/* Shadows */
--trv-shadow-sm: 0 2px 8px rgba(0,0,0,0.02);
--trv-shadow: 0 10px 35px rgba(13, 148, 136, 0.04);
--trv-shadow-glow: 0 0 20px rgba(13, 148, 136, 0.08);
/* Transition */
--trv-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--trv-font-body);
color: var(--trv-text);
background-color: var(--trv-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.trv-card {
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius-lg);
box-shadow: var(--trv-shadow);
padding: 2.25rem;
transition: var(--trv-transition);
}
.trv-card:hover {
border-color: var(--trv-border-strong);
box-shadow: 0 12px 40px rgba(13, 148, 136, 0.07);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--trv-font-heading);
font-weight: 700;
margin: 0;
color: var(--trv-text);
line-height: 1.25;
}
p {
font-family: var(--trv-font-body);
color: var(--trv-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.trv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.6rem;
font-family: var(--trv-font-sub);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--trv-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--trv-transition);
white-space: nowrap;
user-select: none;
}
.trv-btn-primary {
background-color: var(--trv-primary);
color: #fff;
border-color: var(--trv-primary);
}
.trv-btn-primary:hover {
background-color: var(--trv-primary-hover);
border-color: var(--trv-primary-hover);
transform: translateY(-1px);
}
.trv-btn-accent {
background-color: var(--trv-accent);
color: #fff;
border-color: var(--trv-accent);
}
.trv-btn-accent:hover {
background-color: var(--trv-accent-hover);
border-color: var(--trv-accent-hover);
transform: translateY(-1px);
}
.trv-btn-outline {
background-color: var(--trv-surface);
color: var(--trv-text-muted);
border-color: var(--trv-border);
}
.trv-btn-outline:hover {
background-color: var(--trv-surface-2);
border-color: var(--trv-border-strong);
color: var(--trv-text);
}
.trv-btn-ghost {
background-color: transparent;
color: var(--trv-text-muted);
border-color: transparent;
}
.trv-btn-ghost:hover {
background-color: var(--trv-surface-2);
color: var(--trv-text);
}
.trv-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.8rem; }
.trv-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--trv-radius-lg); }
.trv-btn-block { width: 100%; }
.trv-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--trv-radius); }
/* ── Form Controls ────────────── */
.trv-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius);
font-family: var(--trv-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--trv-text);
background-color: var(--trv-surface);
outline: none;
transition: var(--trv-transition);
}
.trv-input::placeholder { color: var(--trv-text-light); }
.trv-input:focus {
border-color: var(--trv-primary);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
.trv-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--trv-font-sub);
font-weight: 600;
font-size: 0.8rem;
color: var(--trv-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Custom select */
.trv-select {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius);
font-family: var(--trv-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--trv-text);
background-color: var(--trv-surface);
outline: none;
transition: var(--trv-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1.1rem center;
background-size: 1rem;
cursor: pointer;
}
.trv-select:focus {
border-color: var(--trv-primary);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
/* ── Badges ───────────────────── */
.trv-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--trv-radius-pill);
font-family: var(--trv-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.trv-badge-primary { background-color: var(--trv-primary-muted); color: var(--trv-primary); border-color: rgba(13, 148, 136, 0.15); }
.trv-badge-accent { background-color: var(--trv-accent-muted); color: var(--trv-accent); border-color: rgba(244, 63, 94, 0.15); }
.trv-badge-gold { background-color: rgba(245, 158, 11, 0.08); color: var(--trv-gold); border-color: rgba(245, 158, 11, 0.15); }
.trv-badge-default { background-color: var(--trv-surface-2); color: var(--trv-text-muted); border-color: var(--trv-border); }
/* ── Star Ratings ─────────────── */
.trv-rating {
display: flex;
align-items: center;
gap: 0.25rem;
color: var(--trv-gold);
}
.trv-rating svg {
width: 14px;
height: 14px;
fill: currentColor;
}
/* ── Divider ──────────────────── */
.trv-divider { border: none; border-top: 1px solid var(--trv-border); margin: 0; }
/* ── Logo ─────────────────────── */
.trv-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--trv-font-heading);
font-size: 1.5rem;
color: var(--trv-text);
font-weight: 800;
letter-spacing: -0.01em;
}
.trv-logo-icon {
width: 32px;
height: 32px;
background-color: var(--trv-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: var(--trv-radius);
box-shadow: var(--trv-shadow-glow);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--trv-primary) !important; }
.text-accent { color: var(--trv-accent) !important; }
.text-muted { color: var(--trv-text-muted) !important; }
.text-light { color: var(--trv-text-light) !important; }
/* --- COMPONENT STYLES --- */
.trv-activity-wrapper {
max-width: 720px;
margin: 0 auto;
width: 100%;
}
.trv-activity-header {
margin-bottom: 2rem;
}
.trv-activity-title {
font-family: var(--trv-font-heading);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.35rem;
color: var(--trv-text);
}
.trv-activity-desc {
font-size: 0.85rem;
color: var(--trv-text-muted);
}
/* Timeline Wrapper */
.trv-timeline {
position: relative;
display: flex;
flex-direction: column;
}
.trv-timeline-item {
position: relative;
padding-left: 3rem;
padding-bottom: 2.25rem;
}
.trv-timeline-item:last-child {
padding-bottom: 0;
}
/* Perfect bulletproof timeline vertical connecting line */
.trv-timeline-item::before {
content: '';
position: absolute;
left: 1rem;
top: 2rem; /* Start right below the icon center */
bottom: 0;
width: 2px;
background-color: var(--trv-border);
}
.trv-timeline-item:last-child::before {
display: none; /* Hide line below the bottom element */
}
/* Icons */
.trv-timeline-icon {
position: absolute;
left: 0;
top: 0;
width: 32px;
height: 32px;
border-radius: var(--trv-radius-pill);
display: flex;
align-items: center;
justify-content: center;
color: var(--trv-text);
border: 1px solid var(--trv-border);
background-color: var(--trv-surface);
z-index: 2;
}
.trv-timeline-icon svg {
width: 14px;
height: 14px;
}
/* Icon specific color shifts */
.trv-timeline-comment {
background-color: var(--trv-primary-muted);
color: var(--trv-primary);
border-color: var(--trv-primary);
}
.trv-timeline-bookmark {
background-color: var(--trv-accent-muted);
color: var(--trv-accent);
border-color: var(--trv-accent);
}
.trv-timeline-reply {
background-color: var(--trv-primary-muted);
color: var(--trv-primary);
border-color: var(--trv-primary);
}
/* Contents */
.trv-timeline-content {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.trv-timeline-meta {
font-size: 0.8rem;
color: var(--trv-text-muted);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.trv-activity-user {
font-family: var(--trv-font-sub);
font-weight: 700;
color: var(--trv-text);
}
.trv-activity-action {
color: var(--trv-text-light);
font-weight: 500;
}
.trv-activity-timestamp {
font-family: var(--trv-font-sub);
font-weight: 700;
font-size: 0.75rem;
color: var(--trv-primary);
background-color: var(--trv-primary-muted);
padding: 0.15rem 0.45rem;
border-radius: var(--trv-radius-sm);
}
.trv-activity-time {
color: var(--trv-text-light);
font-size: 0.725rem;
margin-left: auto;
font-weight: 600;
}
.trv-timeline-text {
font-size: 0.85rem;
color: var(--trv-text-muted);
line-height: 1.5;
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
padding: 1rem 1.25rem;
border-radius: var(--trv-radius-lg);
margin: 0;
}
.trv-timeline-text code {
font-family: var(--trv-font-sub);
font-size: 0.75rem;
background-color: var(--trv-surface-2);
padding: 0.15rem 0.35rem;
border-radius: var(--trv-radius-sm);
color: var(--trv-text);
border: 1px solid var(--trv-border);
}
@media (max-width: 576px) {
.trv-activity-time {
margin-left: 0;
width: 100%;
margin-top: 0.15rem;
}
}
Modals
Resort Booking Payment Modal
HTML
<div class="trv-modal-overlay">
<div class="trv-modal-card">
<!-- Close Button -->
<button class="trv-modal-close" aria-label="Close dialog">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
<div class="trv-modal-body">
<!-- Key Badge -->
<div class="trv-modal-badge-wrapper">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
</div>
<span class="trv-modal-tag">Secure Reservation Checkout</span>
<h2 class="trv-modal-title">Confirm Your Custom Haven</h2>
<p class="trv-modal-desc">
Review your luxury booking ledger details below. Your elite club benefits include automatic suite upgrades and complimentary ground airport shuttles.
</p>
<!-- Key display -->
<div class="trv-plan-box">
<div class="trv-plan-details">
<span class="trv-plan-name">Villa Belmond Caruso, Amalfi</span>
<span class="trv-plan-desc">June 12 - June 19 • 7 Nights</span>
</div>
<div class="trv-plan-price-block">
<span class="trv-plan-price">$8,750</span>
<span class="trv-plan-fees">Fees Included</span>
</div>
</div>
<div class="trv-modal-actions">
<button class="trv-btn trv-btn-primary trv-btn-block">
Confirm & Secure Booking
</button>
<button class="trv-btn trv-btn-outline trv-btn-block">
Modify Guest List Scopes
</button>
</div>
<a href="#" class="trv-modal-cancel">Cancel and Return</a>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Resort Booking Payment Modal */
/* NOTE: This component requires base.css to be included in your page. */
.trv-modal-overlay {
width: 100%;
max-width: 500px;
margin: 0 auto;
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius-lg);
box-shadow: var(--trv-shadow);
position: relative;
overflow: hidden;
}
.trv-modal-card {
padding: 3rem 2.5rem;
}
.trv-modal-close {
position: absolute;
top: 1.25rem;
right: 1.25rem;
background: none;
border: none;
cursor: pointer;
color: var(--trv-text-light);
display: flex;
align-items: center;
justify-content: center;
padding: 0.35rem;
border-radius: var(--trv-radius);
transition: var(--trv-transition);
}
.trv-modal-close:hover {
background-color: var(--trv-surface-2);
color: var(--trv-text);
}
.trv-modal-close svg {
width: 18px;
height: 18px;
}
.trv-modal-body {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.25rem;
}
.trv-modal-badge-wrapper {
width: 56px;
height: 56px;
border-radius: var(--trv-radius-pill);
background-color: var(--trv-primary-muted);
color: var(--trv-primary);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
box-shadow: var(--trv-shadow-glow);
}
.trv-modal-badge-wrapper svg {
width: 24px;
height: 24px;
}
.trv-modal-tag {
font-family: var(--trv-font-sub);
font-size: 0.75rem;
font-weight: 700;
color: var(--trv-primary);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.trv-modal-title {
font-family: var(--trv-font-heading);
font-size: 1.85rem;
font-weight: 700;
line-height: 1.2;
margin: 0;
color: var(--trv-text);
}
.trv-modal-desc {
font-size: 0.85rem;
color: var(--trv-text-muted);
line-height: 1.6;
margin: 0;
}
/* Plan Box */
.trv-plan-box {
width: 100%;
background-color: var(--trv-surface-2);
border: 1px solid var(--trv-border);
padding: 1.25rem 1.5rem;
border-radius: var(--trv-radius-lg);
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
gap: 1rem;
}
.trv-plan-details {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.trv-plan-name {
font-family: var(--trv-font-heading);
font-size: 1.1rem;
font-weight: 700;
color: var(--trv-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.trv-plan-desc {
font-size: 0.75rem;
color: var(--trv-text-light);
font-weight: 500;
}
.trv-plan-price-block {
display: flex;
flex-direction: column;
align-items: flex-end;
flex-shrink: 0;
}
.trv-plan-price {
font-family: var(--trv-font-sub);
font-size: 1.35rem;
font-weight: 800;
color: var(--trv-primary-hover);
}
.trv-plan-fees {
font-size: 0.65rem;
color: var(--trv-text-light);
font-weight: 600;
text-transform: uppercase;
}
/* Actions */
.trv-modal-actions {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-top: 0.5rem;
}
.trv-modal-cancel {
font-size: 0.8rem;
font-weight: 600;
color: var(--trv-text-light);
text-decoration: none;
transition: var(--trv-transition);
}
.trv-modal-cancel:hover {
color: var(--trv-text-muted);
text-decoration: underline;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Travel Booking Design System (trv-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--trv-bg: #F9FAF9; /* Sand White */
--trv-surface: #FFFFFF; /* Pure White */
--trv-surface-2: #F3F5F3; /* Linen Gray */
/* Brand Palette */
--trv-primary: #0D9488; /* Sea Teal */
--trv-primary-hover: #0F766E;
--trv-primary-muted: rgba(13, 148, 136, 0.08);
--trv-accent: #F43F5E; /* Coral Rose */
--trv-accent-hover: #E11D48;
--trv-accent-muted: rgba(244, 63, 94, 0.08);
--trv-gold: #F59E0B; /* Star Rating Gold */
/* Text */
--trv-text: #1F2937; /* Dark Charcoal */
--trv-text-muted: #4B5563; /* Slate grey */
--trv-text-light: #9CA3AF;
/* Borders */
--trv-border: #E5E7EB; /* Muted light border */
--trv-border-strong: #D1D5DB;
--trv-border-glow: rgba(13, 148, 136, 0.25);
/* Rounded Shapes */
--trv-radius-sm: 4px;
--trv-radius: 8px;
--trv-radius-lg: 16px;
--trv-radius-pill: 999px;
/* Fonts */
--trv-font-heading: 'Playfair Display', serif;
--trv-font-sub: 'Outfit', sans-serif;
--trv-font-body: 'Inter', sans-serif;
/* Shadows */
--trv-shadow-sm: 0 2px 8px rgba(0,0,0,0.02);
--trv-shadow: 0 10px 35px rgba(13, 148, 136, 0.04);
--trv-shadow-glow: 0 0 20px rgba(13, 148, 136, 0.08);
/* Transition */
--trv-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--trv-font-body);
color: var(--trv-text);
background-color: var(--trv-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.trv-card {
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius-lg);
box-shadow: var(--trv-shadow);
padding: 2.25rem;
transition: var(--trv-transition);
}
.trv-card:hover {
border-color: var(--trv-border-strong);
box-shadow: 0 12px 40px rgba(13, 148, 136, 0.07);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--trv-font-heading);
font-weight: 700;
margin: 0;
color: var(--trv-text);
line-height: 1.25;
}
p {
font-family: var(--trv-font-body);
color: var(--trv-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.trv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.6rem;
font-family: var(--trv-font-sub);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--trv-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--trv-transition);
white-space: nowrap;
user-select: none;
}
.trv-btn-primary {
background-color: var(--trv-primary);
color: #fff;
border-color: var(--trv-primary);
}
.trv-btn-primary:hover {
background-color: var(--trv-primary-hover);
border-color: var(--trv-primary-hover);
transform: translateY(-1px);
}
.trv-btn-accent {
background-color: var(--trv-accent);
color: #fff;
border-color: var(--trv-accent);
}
.trv-btn-accent:hover {
background-color: var(--trv-accent-hover);
border-color: var(--trv-accent-hover);
transform: translateY(-1px);
}
.trv-btn-outline {
background-color: var(--trv-surface);
color: var(--trv-text-muted);
border-color: var(--trv-border);
}
.trv-btn-outline:hover {
background-color: var(--trv-surface-2);
border-color: var(--trv-border-strong);
color: var(--trv-text);
}
.trv-btn-ghost {
background-color: transparent;
color: var(--trv-text-muted);
border-color: transparent;
}
.trv-btn-ghost:hover {
background-color: var(--trv-surface-2);
color: var(--trv-text);
}
.trv-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.8rem; }
.trv-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--trv-radius-lg); }
.trv-btn-block { width: 100%; }
.trv-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--trv-radius); }
/* ── Form Controls ────────────── */
.trv-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius);
font-family: var(--trv-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--trv-text);
background-color: var(--trv-surface);
outline: none;
transition: var(--trv-transition);
}
.trv-input::placeholder { color: var(--trv-text-light); }
.trv-input:focus {
border-color: var(--trv-primary);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
.trv-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--trv-font-sub);
font-weight: 600;
font-size: 0.8rem;
color: var(--trv-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Custom select */
.trv-select {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius);
font-family: var(--trv-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--trv-text);
background-color: var(--trv-surface);
outline: none;
transition: var(--trv-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1.1rem center;
background-size: 1rem;
cursor: pointer;
}
.trv-select:focus {
border-color: var(--trv-primary);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
/* ── Badges ───────────────────── */
.trv-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--trv-radius-pill);
font-family: var(--trv-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.trv-badge-primary { background-color: var(--trv-primary-muted); color: var(--trv-primary); border-color: rgba(13, 148, 136, 0.15); }
.trv-badge-accent { background-color: var(--trv-accent-muted); color: var(--trv-accent); border-color: rgba(244, 63, 94, 0.15); }
.trv-badge-gold { background-color: rgba(245, 158, 11, 0.08); color: var(--trv-gold); border-color: rgba(245, 158, 11, 0.15); }
.trv-badge-default { background-color: var(--trv-surface-2); color: var(--trv-text-muted); border-color: var(--trv-border); }
/* ── Star Ratings ─────────────── */
.trv-rating {
display: flex;
align-items: center;
gap: 0.25rem;
color: var(--trv-gold);
}
.trv-rating svg {
width: 14px;
height: 14px;
fill: currentColor;
}
/* ── Divider ──────────────────── */
.trv-divider { border: none; border-top: 1px solid var(--trv-border); margin: 0; }
/* ── Logo ─────────────────────── */
.trv-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--trv-font-heading);
font-size: 1.5rem;
color: var(--trv-text);
font-weight: 800;
letter-spacing: -0.01em;
}
.trv-logo-icon {
width: 32px;
height: 32px;
background-color: var(--trv-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: var(--trv-radius);
box-shadow: var(--trv-shadow-glow);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--trv-primary) !important; }
.text-accent { color: var(--trv-accent) !important; }
.text-muted { color: var(--trv-text-muted) !important; }
.text-light { color: var(--trv-text-light) !important; }
/* --- COMPONENT STYLES --- */
.trv-modal-overlay {
width: 100%;
max-width: 500px;
margin: 0 auto;
background-color: var(--trv-surface);
border: 1px solid var(--trv-border);
border-radius: var(--trv-radius-lg);
box-shadow: var(--trv-shadow);
position: relative;
overflow: hidden;
}
.trv-modal-card {
padding: 3rem 2.5rem;
}
.trv-modal-close {
position: absolute;
top: 1.25rem;
right: 1.25rem;
background: none;
border: none;
cursor: pointer;
color: var(--trv-text-light);
display: flex;
align-items: center;
justify-content: center;
padding: 0.35rem;
border-radius: var(--trv-radius);
transition: var(--trv-transition);
}
.trv-modal-close:hover {
background-color: var(--trv-surface-2);
color: var(--trv-text);
}
.trv-modal-close svg {
width: 18px;
height: 18px;
}
.trv-modal-body {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.25rem;
}
.trv-modal-badge-wrapper {
width: 56px;
height: 56px;
border-radius: var(--trv-radius-pill);
background-color: var(--trv-primary-muted);
color: var(--trv-primary);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
box-shadow: var(--trv-shadow-glow);
}
.trv-modal-badge-wrapper svg {
width: 24px;
height: 24px;
}
.trv-modal-tag {
font-family: var(--trv-font-sub);
font-size: 0.75rem;
font-weight: 700;
color: var(--trv-primary);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.trv-modal-title {
font-family: var(--trv-font-heading);
font-size: 1.85rem;
font-weight: 700;
line-height: 1.2;
margin: 0;
color: var(--trv-text);
}
.trv-modal-desc {
font-size: 0.85rem;
color: var(--trv-text-muted);
line-height: 1.6;
margin: 0;
}
/* Plan Box */
.trv-plan-box {
width: 100%;
background-color: var(--trv-surface-2);
border: 1px solid var(--trv-border);
padding: 1.25rem 1.5rem;
border-radius: var(--trv-radius-lg);
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
gap: 1rem;
}
.trv-plan-details {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.trv-plan-name {
font-family: var(--trv-font-heading);
font-size: 1.1rem;
font-weight: 700;
color: var(--trv-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.trv-plan-desc {
font-size: 0.75rem;
color: var(--trv-text-light);
font-weight: 500;
}
.trv-plan-price-block {
display: flex;
flex-direction: column;
align-items: flex-end;
flex-shrink: 0;
}
.trv-plan-price {
font-family: var(--trv-font-sub);
font-size: 1.35rem;
font-weight: 800;
color: var(--trv-primary-hover);
}
.trv-plan-fees {
font-size: 0.65rem;
color: var(--trv-text-light);
font-weight: 600;
text-transform: uppercase;
}
/* Actions */
.trv-modal-actions {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-top: 0.5rem;
}
.trv-modal-cancel {
font-size: 0.8rem;
font-weight: 600;
color: var(--trv-text-light);
text-decoration: none;
transition: var(--trv-transition);
}
.trv-modal-cancel:hover {
color: var(--trv-text-muted);
text-decoration: underline;
}