Restaurant Website - Free HTML/CSS UI Kit
A premium Michelin-starred culinary fine dining UI Kit featuring gold accents, elegant Cormorant Garamond typography, responsive menu showcase cards, and custom table reservation forms.
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
Champagne Gold
#D4AF37
Deep Wine Red
#8B0000
Obsidian Velvet
#0B0A09
Dark Ebony
#141210
Warm Ivory
#F5F5F4
Typography
Hero Sections
Chef Spotlight Reservation Engine
HTML
<section class="rst-hero-centered">
<span class="rst-badge rst-badge-primary">Michelin Three Stars</span>
<h1 class="rst-hero-title">A Symphony of Fine Culinary Art & Vintages</h1>
<p class="rst-hero-subtitle">Indulge in a meticulously choreographed degustation voyage curated by Executive Chef Antoine Laurent in our warm, gilded salon chambers.</p>
<!-- Centered Spotlight Reservation Engine Form Panel -->
<div class="rst-booking-panel">
<form class="rst-booking-form" onsubmit="return false;">
<!-- Column 1: Date -->
<div class="rst-booking-field">
<label for="res-date" class="rst-label">Dining Date</label>
<input type="date" id="res-date" class="rst-input" value="2026-06-15">
</div>
<!-- Column 2: Time Slot -->
<div class="rst-booking-field">
<label for="res-time" class="rst-label">Dining Time</label>
<select id="res-time" class="rst-select">
<option value="1800" selected>06:00 PM Tasting</option>
<option value="1930">07:30 PM Tasting</option>
<option value="2100">09:00 PM Tasting</option>
</select>
</div>
<!-- Column 3: Party Size -->
<div class="rst-booking-field">
<label for="res-size" class="rst-label">Guests</label>
<select id="res-size" class="rst-select">
<option value="1">1 Guest</option>
<option value="2" selected>2 Guests</option>
<option value="4">4 Guests</option>
<option value="vip">Chef's Table (6 guests)</option>
</select>
</div>
<!-- Column 4: Salon Seating -->
<div class="rst-booking-field">
<label for="res-zone" class="rst-label">Salon Zone</label>
<select id="res-zone" class="rst-select">
<option value="grand">The Grand Salon</option>
<option value="wine">The Cellar Library</option>
<option value="counter">Chef's Counter</option>
</select>
</div>
<!-- Action submit -->
<button type="submit" class="rst-btn rst-btn-primary rst-booking-btn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="width:16px;height:16px;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
Secure Table
</button>
</form>
</div>
</section>
CSS (Component Only)
/* Component: Chef Spotlight Reservation Engine */
/* NOTE: This component requires base.css to be included in your page. */
.rst-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(--rst-surface);
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius-lg);
box-shadow: var(--rst-shadow);
}
.rst-hero-title {
font-family: var(--rst-font-heading);
font-size: 3.75rem;
font-weight: 600;
color: var(--rst-primary);
line-height: 1.15;
letter-spacing: 0.02em;
margin-top: 1rem;
margin-bottom: 1.25rem;
max-width: 850px;
}
.rst-hero-subtitle {
font-size: 1.05rem;
color: var(--rst-text-muted);
line-height: 1.6;
margin-bottom: 3.5rem;
max-width: 720px;
}
/* Reservation form panel overlapping card */
.rst-booking-panel {
width: 100%;
max-width: 980px;
background-color: var(--rst-surface-2);
border: 1px solid var(--rst-border-strong);
border-radius: var(--rst-radius-lg);
padding: 1.5rem;
box-shadow: var(--rst-shadow), 0 20px 50px rgba(214, 175, 55, 0.05);
}
.rst-booking-form {
display: grid;
grid-template-columns: 1.1fr 1fr 1fr 1.1fr auto;
gap: 1rem;
align-items: flex-end;
}
.rst-booking-field {
display: flex;
flex-direction: column;
text-align: left;
}
.rst-booking-field label {
margin-bottom: 0.35rem;
}
.rst-booking-btn {
height: 46px;
align-self: flex-end;
}
@media (max-width: 992px) {
.rst-booking-form {
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.rst-booking-btn {
grid-column: span 2;
width: 100%;
}
}
@media (max-width: 768px) {
.rst-hero-title {
font-size: 2.75rem;
}
.rst-booking-form {
grid-template-columns: 1fr;
}
.rst-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=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Restaurant Fine Dining Design System (rst-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Warm dark velvet background */
--rst-bg: #0B0A09; /* Obsidian Velvet */
--rst-surface: #141210; /* Dark Ebony */
--rst-surface-2: #1D1A17; /* Muted Gold Slate */
/* Premium Palette */
--rst-primary: #D4AF37; /* Champagne Gold */
--rst-primary-hover: #C59B27;
--rst-primary-muted: rgba(212, 175, 55, 0.08);
--rst-accent: #8B0000; /* Deep Wine Crimson */
--rst-accent-hover: #700000;
--rst-accent-muted: rgba(139, 0, 0, 0.15);
--rst-gold: #E6C65A;
/* Text warm shades */
--rst-text: #F5F5F4; /* Warm Ivory */
--rst-text-muted: #A8A29E; /* Stone Gray */
--rst-text-light: #78716C;
/* Borders */
--rst-border: #2D2924; /* Gilded Border */
--rst-border-strong: #443E37;
--rst-border-glow: rgba(212, 175, 55, 0.15);
/* Rounded Shapes */
--rst-radius-sm: 4px;
--rst-radius: 8px;
--rst-radius-lg: 16px;
--rst-radius-pill: 999px;
/* Fonts */
--rst-font-heading: 'Cormorant Garamond', serif;
--rst-font-sub: 'Outfit', sans-serif;
--rst-font-body: 'Outfit', sans-serif;
/* Shadows */
--rst-shadow-sm: 0 2px 10px rgba(0,0,0,0.4);
--rst-shadow: 0 15px 40px rgba(0,0,0,0.6);
--rst-shadow-glow: 0 0 25px rgba(212, 175, 55, 0.06);
/* Transition */
--rst-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--rst-font-body);
color: var(--rst-text);
background-color: var(--rst-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.rst-card {
background-color: var(--rst-surface);
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius-lg);
box-shadow: var(--rst-shadow);
padding: 2.25rem;
transition: var(--rst-transition);
}
.rst-card:hover {
border-color: var(--rst-primary);
box-shadow: 0 12px 45px rgba(212, 175, 55, 0.04);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--rst-font-heading);
font-weight: 600;
margin: 0;
color: var(--rst-text);
line-height: 1.25;
}
p {
font-family: var(--rst-font-body);
color: var(--rst-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.rst-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.6rem;
font-family: var(--rst-font-sub);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--rst-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--rst-transition);
white-space: nowrap;
user-select: none;
}
.rst-btn-primary {
background-color: var(--rst-primary);
color: #0B0A09;
border-color: var(--rst-primary);
}
.rst-btn-primary:hover {
background-color: var(--rst-primary-hover);
border-color: var(--rst-primary-hover);
transform: translateY(-1px);
}
.rst-btn-accent {
background-color: var(--rst-accent);
color: #fff;
border-color: var(--rst-accent);
}
.rst-btn-accent:hover {
background-color: var(--rst-accent-hover);
border-color: var(--rst-accent-hover);
transform: translateY(-1px);
}
.rst-btn-outline {
background-color: transparent;
color: var(--rst-primary);
border-color: var(--rst-border-strong);
}
.rst-btn-outline:hover {
background-color: var(--rst-primary-muted);
border-color: var(--rst-primary);
color: var(--rst-text);
}
.rst-btn-ghost {
background-color: transparent;
color: var(--rst-text-muted);
border-color: transparent;
}
.rst-btn-ghost:hover {
background-color: var(--rst-surface-2);
color: var(--rst-text);
}
.rst-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.8rem; }
.rst-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--rst-radius-lg); }
.rst-btn-block { width: 100%; }
.rst-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--rst-radius); }
/* ── Form Controls ────────────── */
.rst-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius);
font-family: var(--rst-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--rst-text);
background-color: var(--rst-bg);
outline: none;
transition: var(--rst-transition);
}
.rst-input::placeholder { color: var(--rst-text-light); }
.rst-input:focus {
border-color: var(--rst-primary);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.rst-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--rst-font-sub);
font-weight: 600;
font-size: 0.8rem;
color: var(--rst-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Custom select */
.rst-select {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius);
font-family: var(--rst-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--rst-text);
background-color: var(--rst-bg);
outline: none;
transition: var(--rst-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='%23D4AF37' 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;
}
.rst-select:focus {
border-color: var(--rst-primary);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
/* ── Badges ───────────────────── */
.rst-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--rst-radius-pill);
font-family: var(--rst-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.rst-badge-primary { background-color: var(--rst-primary-muted); color: var(--rst-primary); border-color: rgba(212, 175, 55, 0.15); }
.rst-badge-accent { background-color: var(--rst-accent-muted); color: var(--rst-text); border-color: var(--rst-accent); }
.rst-badge-default { background-color: var(--rst-surface-2); color: var(--rst-text-muted); border-color: var(--rst-border); }
/* ── Divider ──────────────────── */
.rst-divider { border: none; border-top: 1px solid var(--rst-border); margin: 0; }
/* ── Logo ─────────────────────── */
.rst-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--rst-font-heading);
font-size: 1.65rem;
color: var(--rst-primary);
font-weight: 700;
letter-spacing: 0.05em;
}
.rst-logo-icon {
width: 32px;
height: 32px;
background-color: var(--rst-primary-muted);
border: 1px solid var(--rst-primary);
display: flex;
align-items: center;
justify-content: center;
color: var(--rst-primary);
border-radius: var(--rst-radius);
box-shadow: var(--rst-shadow-glow);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--rst-primary) !important; }
.text-accent { color: var(--rst-accent) !important; }
.text-muted { color: var(--rst-text-muted) !important; }
.text-light { color: var(--rst-text-light) !important; }
/* --- COMPONENT STYLES --- */
.rst-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(--rst-surface);
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius-lg);
box-shadow: var(--rst-shadow);
}
.rst-hero-title {
font-family: var(--rst-font-heading);
font-size: 3.75rem;
font-weight: 600;
color: var(--rst-primary);
line-height: 1.15;
letter-spacing: 0.02em;
margin-top: 1rem;
margin-bottom: 1.25rem;
max-width: 850px;
}
.rst-hero-subtitle {
font-size: 1.05rem;
color: var(--rst-text-muted);
line-height: 1.6;
margin-bottom: 3.5rem;
max-width: 720px;
}
/* Reservation form panel overlapping card */
.rst-booking-panel {
width: 100%;
max-width: 980px;
background-color: var(--rst-surface-2);
border: 1px solid var(--rst-border-strong);
border-radius: var(--rst-radius-lg);
padding: 1.5rem;
box-shadow: var(--rst-shadow), 0 20px 50px rgba(214, 175, 55, 0.05);
}
.rst-booking-form {
display: grid;
grid-template-columns: 1.1fr 1fr 1fr 1.1fr auto;
gap: 1rem;
align-items: flex-end;
}
.rst-booking-field {
display: flex;
flex-direction: column;
text-align: left;
}
.rst-booking-field label {
margin-bottom: 0.35rem;
}
.rst-booking-btn {
height: 46px;
align-self: flex-end;
}
@media (max-width: 992px) {
.rst-booking-form {
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.rst-booking-btn {
grid-column: span 2;
width: 100%;
}
}
@media (max-width: 768px) {
.rst-hero-title {
font-size: 2.75rem;
}
.rst-booking-form {
grid-template-columns: 1fr;
}
.rst-booking-btn {
grid-column: span 1;
}
}
Degustation Menu Split Planner
HTML
<section class="rst-hero-split">
<!-- Left column: Info -->
<div class="rst-split-left">
<div class="rst-badge-row">
<span class="rst-badge rst-badge-primary">Bespoke Gastronomy</span>
<span class="rst-badge rst-badge-accent">Grand Reserve 2026</span>
</div>
<h2 class="rst-split-title">Craft Your Private Degustation Journey</h2>
<p class="rst-split-desc">
Assemble your custom tasting layout. Pair legendary Grand Cru vintages with seasonal white truffles, slow-braised wagyu fillets, and hand-dived coastal scallops.
</p>
<!-- Advantage bullet lists -->
<ul class="rst-split-features">
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" class="rst-bullet-icon"><polyline points="20 6 9 17 4 12"></polyline></svg>
Dedicated tableside personal Sommelier guidelines.
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" class="rst-bullet-icon"><polyline points="20 6 9 17 4 12"></polyline></svg>
Hand-harvested farm-to-table organic ingredients.
</li>
</ul>
<!-- Triggers -->
<div class="rst-split-actions">
<button class="rst-btn rst-btn-primary">
Design Tasting Menu
</button>
<button class="rst-btn rst-btn-outline">
Consult Sommelier
</button>
</div>
</div>
<!-- Right column: Interactive Degustation Loop Preview Card -->
<div class="rst-split-right">
<div class="rst-itinerary-preview-card">
<div class="rst-itinerary-preview-header">
<span class="rst-itinerary-tag">Your Curated Degustation</span>
<h4 class="rst-itinerary-title">Chef's Signature Flight</h4>
<span class="rst-itinerary-dates">5 Courses • Wine Pairing Active</span>
</div>
<!-- Steps list -->
<div class="rst-itinerary-preview-steps">
<!-- Step 1 -->
<div class="rst-itinerary-preview-step">
<span class="rst-step-num">01</span>
<div class="rst-step-details">
<span class="rst-step-label">Oscietra Caviar Royale</span>
<span class="rst-step-resort">Paired with Dom Pérignon Brut 2012</span>
</div>
<span class="rst-badge rst-badge-primary">Amuse</span>
</div>
<!-- Step 2 -->
<div class="rst-itinerary-preview-step">
<span class="rst-step-num">02</span>
<div class="rst-step-details">
<span class="rst-step-label">Glazed Blue Lobster</span>
<span class="rst-step-resort">Paired with Montrachet Grand Cru 2015</span>
</div>
<span class="rst-badge rst-badge-primary">Entrée</span>
</div>
<!-- Step 3 -->
<div class="rst-itinerary-preview-step">
<span class="rst-step-num">03</span>
<div class="rst-step-details">
<span class="rst-step-label">Golden Champagne Soufflé</span>
<span class="rst-step-resort">Paired with Château d'Yquem 2008</span>
</div>
<span class="rst-badge rst-badge-accent">Dessert</span>
</div>
</div>
</div>
</div>
</section>
CSS (Component Only)
/* Component: Degustation Menu Split Planner */
/* NOTE: This component requires base.css to be included in your page. */
.rst-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(--rst-surface);
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius-lg);
box-shadow: var(--rst-shadow);
align-items: center;
}
/* Left Column */
.rst-split-left {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.rst-badge-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.rst-split-title {
font-family: var(--rst-font-heading);
font-size: 2.85rem;
font-weight: 600;
line-height: 1.2;
color: var(--rst-primary);
}
.rst-split-desc {
font-size: 0.95rem;
color: var(--rst-text-muted);
line-height: 1.65;
}
/* Advantage lists */
.rst-split-features {
list-style: none;
padding: 0;
margin: 0.5rem 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.rst-split-features li {
font-size: 0.9rem;
color: var(--rst-text-muted);
display: flex;
align-items: center;
gap: 0.75rem;
}
.rst-bullet-icon {
width: 16px;
height: 16px;
color: var(--rst-primary);
flex-shrink: 0;
}
/* Actions */
.rst-split-actions {
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
}
/* Right column: itinerary preview card */
.rst-split-right {
display: flex;
flex-direction: column;
}
.rst-itinerary-preview-card {
background-color: var(--rst-surface-2);
border: 1px solid var(--rst-border-strong);
border-radius: var(--rst-radius-lg);
padding: 2rem;
box-shadow: var(--rst-shadow), 0 20px 45px rgba(214, 175, 55, 0.04);
}
.rst-itinerary-preview-header {
display: flex;
flex-direction: column;
gap: 0.35rem;
border-bottom: 1px solid var(--rst-border-strong);
padding-bottom: 1.25rem;
margin-bottom: 1.5rem;
}
.rst-itinerary-tag {
font-family: var(--rst-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--rst-primary);
}
.rst-itinerary-title {
font-family: var(--rst-font-heading);
font-size: 1.65rem;
font-weight: 600;
color: var(--rst-text);
}
.rst-itinerary-dates {
font-size: 0.8rem;
color: var(--rst-text-muted);
font-weight: 500;
}
/* Steps list */
.rst-itinerary-preview-steps {
display: flex;
flex-direction: column;
gap: 1rem;
}
.rst-itinerary-preview-step {
background-color: var(--rst-surface);
border: 1px solid var(--rst-border);
padding: 1rem;
border-radius: var(--rst-radius);
display: flex;
align-items: center;
gap: 1rem;
}
.rst-step-num {
font-family: var(--rst-font-sub);
font-size: 1.15rem;
font-weight: 800;
color: var(--rst-primary);
background-color: var(--rst-primary-muted);
border: 1px solid rgba(214, 175, 55, 0.2);
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.rst-step-details {
display: flex;
flex-direction: column;
gap: 0.15rem;
flex: 1;
min-width: 0;
}
.rst-step-label {
font-family: var(--rst-font-sub);
font-size: 0.85rem;
font-weight: 700;
color: var(--rst-text);
}
.rst-step-resort {
font-size: 0.75rem;
color: var(--rst-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 992px) {
.rst-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=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Restaurant Fine Dining Design System (rst-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Warm dark velvet background */
--rst-bg: #0B0A09; /* Obsidian Velvet */
--rst-surface: #141210; /* Dark Ebony */
--rst-surface-2: #1D1A17; /* Muted Gold Slate */
/* Premium Palette */
--rst-primary: #D4AF37; /* Champagne Gold */
--rst-primary-hover: #C59B27;
--rst-primary-muted: rgba(212, 175, 55, 0.08);
--rst-accent: #8B0000; /* Deep Wine Crimson */
--rst-accent-hover: #700000;
--rst-accent-muted: rgba(139, 0, 0, 0.15);
--rst-gold: #E6C65A;
/* Text warm shades */
--rst-text: #F5F5F4; /* Warm Ivory */
--rst-text-muted: #A8A29E; /* Stone Gray */
--rst-text-light: #78716C;
/* Borders */
--rst-border: #2D2924; /* Gilded Border */
--rst-border-strong: #443E37;
--rst-border-glow: rgba(212, 175, 55, 0.15);
/* Rounded Shapes */
--rst-radius-sm: 4px;
--rst-radius: 8px;
--rst-radius-lg: 16px;
--rst-radius-pill: 999px;
/* Fonts */
--rst-font-heading: 'Cormorant Garamond', serif;
--rst-font-sub: 'Outfit', sans-serif;
--rst-font-body: 'Outfit', sans-serif;
/* Shadows */
--rst-shadow-sm: 0 2px 10px rgba(0,0,0,0.4);
--rst-shadow: 0 15px 40px rgba(0,0,0,0.6);
--rst-shadow-glow: 0 0 25px rgba(212, 175, 55, 0.06);
/* Transition */
--rst-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--rst-font-body);
color: var(--rst-text);
background-color: var(--rst-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.rst-card {
background-color: var(--rst-surface);
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius-lg);
box-shadow: var(--rst-shadow);
padding: 2.25rem;
transition: var(--rst-transition);
}
.rst-card:hover {
border-color: var(--rst-primary);
box-shadow: 0 12px 45px rgba(212, 175, 55, 0.04);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--rst-font-heading);
font-weight: 600;
margin: 0;
color: var(--rst-text);
line-height: 1.25;
}
p {
font-family: var(--rst-font-body);
color: var(--rst-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.rst-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.6rem;
font-family: var(--rst-font-sub);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--rst-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--rst-transition);
white-space: nowrap;
user-select: none;
}
.rst-btn-primary {
background-color: var(--rst-primary);
color: #0B0A09;
border-color: var(--rst-primary);
}
.rst-btn-primary:hover {
background-color: var(--rst-primary-hover);
border-color: var(--rst-primary-hover);
transform: translateY(-1px);
}
.rst-btn-accent {
background-color: var(--rst-accent);
color: #fff;
border-color: var(--rst-accent);
}
.rst-btn-accent:hover {
background-color: var(--rst-accent-hover);
border-color: var(--rst-accent-hover);
transform: translateY(-1px);
}
.rst-btn-outline {
background-color: transparent;
color: var(--rst-primary);
border-color: var(--rst-border-strong);
}
.rst-btn-outline:hover {
background-color: var(--rst-primary-muted);
border-color: var(--rst-primary);
color: var(--rst-text);
}
.rst-btn-ghost {
background-color: transparent;
color: var(--rst-text-muted);
border-color: transparent;
}
.rst-btn-ghost:hover {
background-color: var(--rst-surface-2);
color: var(--rst-text);
}
.rst-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.8rem; }
.rst-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--rst-radius-lg); }
.rst-btn-block { width: 100%; }
.rst-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--rst-radius); }
/* ── Form Controls ────────────── */
.rst-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius);
font-family: var(--rst-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--rst-text);
background-color: var(--rst-bg);
outline: none;
transition: var(--rst-transition);
}
.rst-input::placeholder { color: var(--rst-text-light); }
.rst-input:focus {
border-color: var(--rst-primary);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.rst-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--rst-font-sub);
font-weight: 600;
font-size: 0.8rem;
color: var(--rst-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Custom select */
.rst-select {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius);
font-family: var(--rst-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--rst-text);
background-color: var(--rst-bg);
outline: none;
transition: var(--rst-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='%23D4AF37' 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;
}
.rst-select:focus {
border-color: var(--rst-primary);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
/* ── Badges ───────────────────── */
.rst-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--rst-radius-pill);
font-family: var(--rst-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.rst-badge-primary { background-color: var(--rst-primary-muted); color: var(--rst-primary); border-color: rgba(212, 175, 55, 0.15); }
.rst-badge-accent { background-color: var(--rst-accent-muted); color: var(--rst-text); border-color: var(--rst-accent); }
.rst-badge-default { background-color: var(--rst-surface-2); color: var(--rst-text-muted); border-color: var(--rst-border); }
/* ── Divider ──────────────────── */
.rst-divider { border: none; border-top: 1px solid var(--rst-border); margin: 0; }
/* ── Logo ─────────────────────── */
.rst-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--rst-font-heading);
font-size: 1.65rem;
color: var(--rst-primary);
font-weight: 700;
letter-spacing: 0.05em;
}
.rst-logo-icon {
width: 32px;
height: 32px;
background-color: var(--rst-primary-muted);
border: 1px solid var(--rst-primary);
display: flex;
align-items: center;
justify-content: center;
color: var(--rst-primary);
border-radius: var(--rst-radius);
box-shadow: var(--rst-shadow-glow);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--rst-primary) !important; }
.text-accent { color: var(--rst-accent) !important; }
.text-muted { color: var(--rst-text-muted) !important; }
.text-light { color: var(--rst-text-light) !important; }
/* --- COMPONENT STYLES --- */
.rst-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(--rst-surface);
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius-lg);
box-shadow: var(--rst-shadow);
align-items: center;
}
/* Left Column */
.rst-split-left {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.rst-badge-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.rst-split-title {
font-family: var(--rst-font-heading);
font-size: 2.85rem;
font-weight: 600;
line-height: 1.2;
color: var(--rst-primary);
}
.rst-split-desc {
font-size: 0.95rem;
color: var(--rst-text-muted);
line-height: 1.65;
}
/* Advantage lists */
.rst-split-features {
list-style: none;
padding: 0;
margin: 0.5rem 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.rst-split-features li {
font-size: 0.9rem;
color: var(--rst-text-muted);
display: flex;
align-items: center;
gap: 0.75rem;
}
.rst-bullet-icon {
width: 16px;
height: 16px;
color: var(--rst-primary);
flex-shrink: 0;
}
/* Actions */
.rst-split-actions {
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
}
/* Right column: itinerary preview card */
.rst-split-right {
display: flex;
flex-direction: column;
}
.rst-itinerary-preview-card {
background-color: var(--rst-surface-2);
border: 1px solid var(--rst-border-strong);
border-radius: var(--rst-radius-lg);
padding: 2rem;
box-shadow: var(--rst-shadow), 0 20px 45px rgba(214, 175, 55, 0.04);
}
.rst-itinerary-preview-header {
display: flex;
flex-direction: column;
gap: 0.35rem;
border-bottom: 1px solid var(--rst-border-strong);
padding-bottom: 1.25rem;
margin-bottom: 1.5rem;
}
.rst-itinerary-tag {
font-family: var(--rst-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--rst-primary);
}
.rst-itinerary-title {
font-family: var(--rst-font-heading);
font-size: 1.65rem;
font-weight: 600;
color: var(--rst-text);
}
.rst-itinerary-dates {
font-size: 0.8rem;
color: var(--rst-text-muted);
font-weight: 500;
}
/* Steps list */
.rst-itinerary-preview-steps {
display: flex;
flex-direction: column;
gap: 1rem;
}
.rst-itinerary-preview-step {
background-color: var(--rst-surface);
border: 1px solid var(--rst-border);
padding: 1rem;
border-radius: var(--rst-radius);
display: flex;
align-items: center;
gap: 1rem;
}
.rst-step-num {
font-family: var(--rst-font-sub);
font-size: 1.15rem;
font-weight: 800;
color: var(--rst-primary);
background-color: var(--rst-primary-muted);
border: 1px solid rgba(214, 175, 55, 0.2);
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.rst-step-details {
display: flex;
flex-direction: column;
gap: 0.15rem;
flex: 1;
min-width: 0;
}
.rst-step-label {
font-family: var(--rst-font-sub);
font-size: 0.85rem;
font-weight: 700;
color: var(--rst-text);
}
.rst-step-resort {
font-size: 0.75rem;
color: var(--rst-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 992px) {
.rst-hero-split {
grid-template-columns: 1fr;
gap: 3rem;
}
}
Forms
Diner Club Access Portal
HTML
<div class="rst-login-card">
<div class="rst-login-header">
<span class="rst-logo-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px;"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
</span>
<h2 class="rst-login-title">Diner Club Lounge</h2>
<p class="rst-login-desc">Access your private reservation history, bespoke tasting notes, and personal Sommelier correspondence.</p>
</div>
<form class="rst-login-form" onsubmit="return false;">
<div class="rst-form-group">
<label for="rst-email" class="rst-label">Member Email</label>
<input type="email" id="rst-email" class="rst-input" placeholder="[email protected]" required>
</div>
<div class="rst-form-group">
<div class="rst-label-row">
<label for="rst-password" class="rst-label">Club Passcode</label>
<a href="#" class="rst-form-link">Forgot Code?</a>
</div>
<input type="password" id="rst-password" class="rst-input" placeholder="••••••••••••" required>
</div>
<div class="rst-form-remember">
<label class="rst-checkbox-wrapper">
<input type="checkbox" name="remember" class="rst-checkbox" checked>
<span class="rst-checkbox-label">Keep my dining session active</span>
</label>
</div>
<button type="submit" class="rst-btn rst-btn-primary rst-btn-block">
Enter Club Lounge
</button>
<div class="rst-login-footer">
<span class="rst-signup-prompt">Not a club member? <a href="#" class="rst-signup-link">Apply for membership.</a></span>
</div>
</form>
</div>
CSS (Component Only)
/* Component: Diner Club Access Portal */
/* NOTE: This component requires base.css to be included in your page. */
.rst-login-card {
max-width: 420px;
margin: 0 auto;
background-color: var(--rst-surface);
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius-lg);
box-shadow: var(--rst-shadow);
padding: 3rem 2.5rem;
}
.rst-login-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 2rem;
}
.rst-login-header .rst-logo-icon {
margin-bottom: 1rem;
width: 48px;
height: 48px;
border-radius: 50%;
}
.rst-login-title {
font-family: var(--rst-font-heading);
font-size: 2rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--rst-primary);
}
.rst-login-desc {
font-size: 0.825rem;
color: var(--rst-text-muted);
line-height: 1.5;
}
.rst-login-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.rst-form-group {
display: flex;
flex-direction: column;
align-items: stretch;
}
.rst-label-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.45rem;
}
.rst-label-row .rst-label {
margin-bottom: 0;
}
.rst-form-link {
font-size: 0.75rem;
font-weight: 600;
color: var(--rst-text-muted);
text-decoration: none;
transition: var(--rst-transition);
}
.rst-form-link:hover {
color: var(--rst-primary);
text-decoration: underline;
}
/* Custom Checkbox */
.rst-form-remember {
display: flex;
align-items: center;
}
.rst-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
}
.rst-checkbox {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--rst-border-strong);
border-radius: var(--rst-radius-sm);
outline: none;
background-color: var(--rst-bg);
cursor: pointer;
transition: var(--rst-transition);
position: relative;
flex-shrink: 0;
}
.rst-checkbox:checked {
background-color: var(--rst-primary);
border-color: var(--rst-primary);
}
.rst-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid #0B0A09;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.rst-checkbox-label {
font-size: 0.8rem;
color: var(--rst-text-muted);
}
/* Footer sign up prompt */
.rst-login-footer {
border-top: 1px solid var(--rst-border);
padding-top: 1.25rem;
margin-top: 0.5rem;
text-align: center;
}
.rst-signup-prompt {
font-size: 0.8rem;
color: var(--rst-text-muted);
}
.rst-signup-link {
color: var(--rst-primary);
font-weight: 700;
text-decoration: none;
transition: var(--rst-transition);
}
.rst-signup-link:hover {
color: var(--rst-primary-hover);
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=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Restaurant Fine Dining Design System (rst-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Warm dark velvet background */
--rst-bg: #0B0A09; /* Obsidian Velvet */
--rst-surface: #141210; /* Dark Ebony */
--rst-surface-2: #1D1A17; /* Muted Gold Slate */
/* Premium Palette */
--rst-primary: #D4AF37; /* Champagne Gold */
--rst-primary-hover: #C59B27;
--rst-primary-muted: rgba(212, 175, 55, 0.08);
--rst-accent: #8B0000; /* Deep Wine Crimson */
--rst-accent-hover: #700000;
--rst-accent-muted: rgba(139, 0, 0, 0.15);
--rst-gold: #E6C65A;
/* Text warm shades */
--rst-text: #F5F5F4; /* Warm Ivory */
--rst-text-muted: #A8A29E; /* Stone Gray */
--rst-text-light: #78716C;
/* Borders */
--rst-border: #2D2924; /* Gilded Border */
--rst-border-strong: #443E37;
--rst-border-glow: rgba(212, 175, 55, 0.15);
/* Rounded Shapes */
--rst-radius-sm: 4px;
--rst-radius: 8px;
--rst-radius-lg: 16px;
--rst-radius-pill: 999px;
/* Fonts */
--rst-font-heading: 'Cormorant Garamond', serif;
--rst-font-sub: 'Outfit', sans-serif;
--rst-font-body: 'Outfit', sans-serif;
/* Shadows */
--rst-shadow-sm: 0 2px 10px rgba(0,0,0,0.4);
--rst-shadow: 0 15px 40px rgba(0,0,0,0.6);
--rst-shadow-glow: 0 0 25px rgba(212, 175, 55, 0.06);
/* Transition */
--rst-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--rst-font-body);
color: var(--rst-text);
background-color: var(--rst-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.rst-card {
background-color: var(--rst-surface);
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius-lg);
box-shadow: var(--rst-shadow);
padding: 2.25rem;
transition: var(--rst-transition);
}
.rst-card:hover {
border-color: var(--rst-primary);
box-shadow: 0 12px 45px rgba(212, 175, 55, 0.04);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--rst-font-heading);
font-weight: 600;
margin: 0;
color: var(--rst-text);
line-height: 1.25;
}
p {
font-family: var(--rst-font-body);
color: var(--rst-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.rst-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.6rem;
font-family: var(--rst-font-sub);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--rst-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--rst-transition);
white-space: nowrap;
user-select: none;
}
.rst-btn-primary {
background-color: var(--rst-primary);
color: #0B0A09;
border-color: var(--rst-primary);
}
.rst-btn-primary:hover {
background-color: var(--rst-primary-hover);
border-color: var(--rst-primary-hover);
transform: translateY(-1px);
}
.rst-btn-accent {
background-color: var(--rst-accent);
color: #fff;
border-color: var(--rst-accent);
}
.rst-btn-accent:hover {
background-color: var(--rst-accent-hover);
border-color: var(--rst-accent-hover);
transform: translateY(-1px);
}
.rst-btn-outline {
background-color: transparent;
color: var(--rst-primary);
border-color: var(--rst-border-strong);
}
.rst-btn-outline:hover {
background-color: var(--rst-primary-muted);
border-color: var(--rst-primary);
color: var(--rst-text);
}
.rst-btn-ghost {
background-color: transparent;
color: var(--rst-text-muted);
border-color: transparent;
}
.rst-btn-ghost:hover {
background-color: var(--rst-surface-2);
color: var(--rst-text);
}
.rst-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.8rem; }
.rst-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--rst-radius-lg); }
.rst-btn-block { width: 100%; }
.rst-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--rst-radius); }
/* ── Form Controls ────────────── */
.rst-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius);
font-family: var(--rst-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--rst-text);
background-color: var(--rst-bg);
outline: none;
transition: var(--rst-transition);
}
.rst-input::placeholder { color: var(--rst-text-light); }
.rst-input:focus {
border-color: var(--rst-primary);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.rst-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--rst-font-sub);
font-weight: 600;
font-size: 0.8rem;
color: var(--rst-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Custom select */
.rst-select {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius);
font-family: var(--rst-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--rst-text);
background-color: var(--rst-bg);
outline: none;
transition: var(--rst-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='%23D4AF37' 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;
}
.rst-select:focus {
border-color: var(--rst-primary);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
/* ── Badges ───────────────────── */
.rst-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--rst-radius-pill);
font-family: var(--rst-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.rst-badge-primary { background-color: var(--rst-primary-muted); color: var(--rst-primary); border-color: rgba(212, 175, 55, 0.15); }
.rst-badge-accent { background-color: var(--rst-accent-muted); color: var(--rst-text); border-color: var(--rst-accent); }
.rst-badge-default { background-color: var(--rst-surface-2); color: var(--rst-text-muted); border-color: var(--rst-border); }
/* ── Divider ──────────────────── */
.rst-divider { border: none; border-top: 1px solid var(--rst-border); margin: 0; }
/* ── Logo ─────────────────────── */
.rst-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--rst-font-heading);
font-size: 1.65rem;
color: var(--rst-primary);
font-weight: 700;
letter-spacing: 0.05em;
}
.rst-logo-icon {
width: 32px;
height: 32px;
background-color: var(--rst-primary-muted);
border: 1px solid var(--rst-primary);
display: flex;
align-items: center;
justify-content: center;
color: var(--rst-primary);
border-radius: var(--rst-radius);
box-shadow: var(--rst-shadow-glow);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--rst-primary) !important; }
.text-accent { color: var(--rst-accent) !important; }
.text-muted { color: var(--rst-text-muted) !important; }
.text-light { color: var(--rst-text-light) !important; }
/* --- COMPONENT STYLES --- */
.rst-login-card {
max-width: 420px;
margin: 0 auto;
background-color: var(--rst-surface);
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius-lg);
box-shadow: var(--rst-shadow);
padding: 3rem 2.5rem;
}
.rst-login-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 2rem;
}
.rst-login-header .rst-logo-icon {
margin-bottom: 1rem;
width: 48px;
height: 48px;
border-radius: 50%;
}
.rst-login-title {
font-family: var(--rst-font-heading);
font-size: 2rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--rst-primary);
}
.rst-login-desc {
font-size: 0.825rem;
color: var(--rst-text-muted);
line-height: 1.5;
}
.rst-login-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.rst-form-group {
display: flex;
flex-direction: column;
align-items: stretch;
}
.rst-label-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.45rem;
}
.rst-label-row .rst-label {
margin-bottom: 0;
}
.rst-form-link {
font-size: 0.75rem;
font-weight: 600;
color: var(--rst-text-muted);
text-decoration: none;
transition: var(--rst-transition);
}
.rst-form-link:hover {
color: var(--rst-primary);
text-decoration: underline;
}
/* Custom Checkbox */
.rst-form-remember {
display: flex;
align-items: center;
}
.rst-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
}
.rst-checkbox {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--rst-border-strong);
border-radius: var(--rst-radius-sm);
outline: none;
background-color: var(--rst-bg);
cursor: pointer;
transition: var(--rst-transition);
position: relative;
flex-shrink: 0;
}
.rst-checkbox:checked {
background-color: var(--rst-primary);
border-color: var(--rst-primary);
}
.rst-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid #0B0A09;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.rst-checkbox-label {
font-size: 0.8rem;
color: var(--rst-text-muted);
}
/* Footer sign up prompt */
.rst-login-footer {
border-top: 1px solid var(--rst-border);
padding-top: 1.25rem;
margin-top: 0.5rem;
text-align: center;
}
.rst-signup-prompt {
font-size: 0.8rem;
color: var(--rst-text-muted);
}
.rst-signup-link {
color: var(--rst-primary);
font-weight: 700;
text-decoration: none;
transition: var(--rst-transition);
}
.rst-signup-link:hover {
color: var(--rst-primary-hover);
text-decoration: underline;
}
Diner Dietary Configurator
HTML
<div class="rst-dispatch-card">
<div class="rst-dispatch-header">
<span class="rst-dispatch-tag">Dietary Preferences</span>
<h2 class="rst-dispatch-title">Diner Configurator</h2>
<p class="rst-dispatch-desc">Personalise your tasting experience by selecting dietary requirements, allergen needs, and preferred wine pairing styles.</p>
</div>
<form class="rst-dispatch-form" onsubmit="return false;">
<!-- Selection dropdown -->
<div class="rst-form-group">
<label for="rst-plan-tier" class="rst-label">Active Dining Tier</label>
<select id="rst-plan-tier" class="rst-select">
<option value="standard">Classic Tasting (5 Courses)</option>
<option value="premium" selected>Grand Degustation (9 Courses – Active)</option>
<option value="chefs">Chef's Counter Experience (12 Courses)</option>
</select>
</div>
<div class="rst-form-group">
<label class="rst-label">Dietary Requirements</label>
<div class="rst-checkbox-grid">
<label class="rst-checkbox-wrapper">
<input type="checkbox" class="rst-checkbox" checked>
<span class="rst-checkbox-label">Gluten-Free Options</span>
</label>
<label class="rst-checkbox-wrapper">
<input type="checkbox" class="rst-checkbox">
<span class="rst-checkbox-label">Vegan Substitutes</span>
</label>
<label class="rst-checkbox-wrapper">
<input type="checkbox" class="rst-checkbox" checked>
<span class="rst-checkbox-label">Nut Allergy Safe</span>
</label>
<label class="rst-checkbox-wrapper">
<input type="checkbox" class="rst-checkbox">
<span class="rst-checkbox-label">Shellfish Exclusion</span>
</label>
</div>
</div>
<button type="submit" class="rst-btn rst-btn-primary rst-btn-block">
Save Dining Profile
</button>
<span class="rst-form-privacy">Your preferences are shared securely with the Head Chef prior to your reservation.</span>
</form>
</div>
CSS (Component Only)
/* Component: Diner Dietary Configurator */
/* NOTE: This component requires base.css to be included in your page. */
.rst-dispatch-card {
max-width: 480px;
margin: 0 auto;
background-color: var(--rst-surface);
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius-lg);
box-shadow: var(--rst-shadow);
padding: 3rem 2.5rem;
}
.rst-dispatch-header {
text-align: center;
margin-bottom: 2rem;
}
.rst-dispatch-tag {
font-family: var(--rst-font-sub);
font-size: 0.75rem;
font-weight: 700;
color: var(--rst-primary);
text-transform: uppercase;
letter-spacing: 0.08em;
display: inline-block;
margin-bottom: 0.5rem;
}
.rst-dispatch-title {
font-family: var(--rst-font-heading);
font-size: 2rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: var(--rst-primary);
}
.rst-dispatch-desc {
font-size: 0.85rem;
color: var(--rst-text-muted);
line-height: 1.6;
}
.rst-dispatch-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.rst-checkbox-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
background-color: var(--rst-surface-2);
border: 1px solid var(--rst-border);
padding: 1.25rem;
border-radius: var(--rst-radius);
margin-top: 0.25rem;
}
.rst-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
}
.rst-checkbox {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--rst-border-strong);
border-radius: var(--rst-radius-sm);
outline: none;
background-color: var(--rst-bg);
cursor: pointer;
transition: var(--rst-transition);
position: relative;
flex-shrink: 0;
}
.rst-checkbox:checked {
background-color: var(--rst-primary);
border-color: var(--rst-primary);
}
.rst-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid #0B0A09;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.rst-checkbox-label {
font-size: 0.8rem;
color: var(--rst-text-muted);
line-height: 1.2;
}
.rst-form-privacy {
font-size: 0.725rem;
color: var(--rst-text-light);
text-align: center;
display: block;
line-height: 1.4;
}
@media (max-width: 576px) {
.rst-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=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Restaurant Fine Dining Design System (rst-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Warm dark velvet background */
--rst-bg: #0B0A09; /* Obsidian Velvet */
--rst-surface: #141210; /* Dark Ebony */
--rst-surface-2: #1D1A17; /* Muted Gold Slate */
/* Premium Palette */
--rst-primary: #D4AF37; /* Champagne Gold */
--rst-primary-hover: #C59B27;
--rst-primary-muted: rgba(212, 175, 55, 0.08);
--rst-accent: #8B0000; /* Deep Wine Crimson */
--rst-accent-hover: #700000;
--rst-accent-muted: rgba(139, 0, 0, 0.15);
--rst-gold: #E6C65A;
/* Text warm shades */
--rst-text: #F5F5F4; /* Warm Ivory */
--rst-text-muted: #A8A29E; /* Stone Gray */
--rst-text-light: #78716C;
/* Borders */
--rst-border: #2D2924; /* Gilded Border */
--rst-border-strong: #443E37;
--rst-border-glow: rgba(212, 175, 55, 0.15);
/* Rounded Shapes */
--rst-radius-sm: 4px;
--rst-radius: 8px;
--rst-radius-lg: 16px;
--rst-radius-pill: 999px;
/* Fonts */
--rst-font-heading: 'Cormorant Garamond', serif;
--rst-font-sub: 'Outfit', sans-serif;
--rst-font-body: 'Outfit', sans-serif;
/* Shadows */
--rst-shadow-sm: 0 2px 10px rgba(0,0,0,0.4);
--rst-shadow: 0 15px 40px rgba(0,0,0,0.6);
--rst-shadow-glow: 0 0 25px rgba(212, 175, 55, 0.06);
/* Transition */
--rst-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--rst-font-body);
color: var(--rst-text);
background-color: var(--rst-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.rst-card {
background-color: var(--rst-surface);
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius-lg);
box-shadow: var(--rst-shadow);
padding: 2.25rem;
transition: var(--rst-transition);
}
.rst-card:hover {
border-color: var(--rst-primary);
box-shadow: 0 12px 45px rgba(212, 175, 55, 0.04);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--rst-font-heading);
font-weight: 600;
margin: 0;
color: var(--rst-text);
line-height: 1.25;
}
p {
font-family: var(--rst-font-body);
color: var(--rst-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.rst-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.6rem;
font-family: var(--rst-font-sub);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--rst-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--rst-transition);
white-space: nowrap;
user-select: none;
}
.rst-btn-primary {
background-color: var(--rst-primary);
color: #0B0A09;
border-color: var(--rst-primary);
}
.rst-btn-primary:hover {
background-color: var(--rst-primary-hover);
border-color: var(--rst-primary-hover);
transform: translateY(-1px);
}
.rst-btn-accent {
background-color: var(--rst-accent);
color: #fff;
border-color: var(--rst-accent);
}
.rst-btn-accent:hover {
background-color: var(--rst-accent-hover);
border-color: var(--rst-accent-hover);
transform: translateY(-1px);
}
.rst-btn-outline {
background-color: transparent;
color: var(--rst-primary);
border-color: var(--rst-border-strong);
}
.rst-btn-outline:hover {
background-color: var(--rst-primary-muted);
border-color: var(--rst-primary);
color: var(--rst-text);
}
.rst-btn-ghost {
background-color: transparent;
color: var(--rst-text-muted);
border-color: transparent;
}
.rst-btn-ghost:hover {
background-color: var(--rst-surface-2);
color: var(--rst-text);
}
.rst-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.8rem; }
.rst-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--rst-radius-lg); }
.rst-btn-block { width: 100%; }
.rst-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--rst-radius); }
/* ── Form Controls ────────────── */
.rst-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius);
font-family: var(--rst-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--rst-text);
background-color: var(--rst-bg);
outline: none;
transition: var(--rst-transition);
}
.rst-input::placeholder { color: var(--rst-text-light); }
.rst-input:focus {
border-color: var(--rst-primary);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.rst-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--rst-font-sub);
font-weight: 600;
font-size: 0.8rem;
color: var(--rst-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Custom select */
.rst-select {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius);
font-family: var(--rst-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--rst-text);
background-color: var(--rst-bg);
outline: none;
transition: var(--rst-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='%23D4AF37' 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;
}
.rst-select:focus {
border-color: var(--rst-primary);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
/* ── Badges ───────────────────── */
.rst-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--rst-radius-pill);
font-family: var(--rst-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.rst-badge-primary { background-color: var(--rst-primary-muted); color: var(--rst-primary); border-color: rgba(212, 175, 55, 0.15); }
.rst-badge-accent { background-color: var(--rst-accent-muted); color: var(--rst-text); border-color: var(--rst-accent); }
.rst-badge-default { background-color: var(--rst-surface-2); color: var(--rst-text-muted); border-color: var(--rst-border); }
/* ── Divider ──────────────────── */
.rst-divider { border: none; border-top: 1px solid var(--rst-border); margin: 0; }
/* ── Logo ─────────────────────── */
.rst-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--rst-font-heading);
font-size: 1.65rem;
color: var(--rst-primary);
font-weight: 700;
letter-spacing: 0.05em;
}
.rst-logo-icon {
width: 32px;
height: 32px;
background-color: var(--rst-primary-muted);
border: 1px solid var(--rst-primary);
display: flex;
align-items: center;
justify-content: center;
color: var(--rst-primary);
border-radius: var(--rst-radius);
box-shadow: var(--rst-shadow-glow);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--rst-primary) !important; }
.text-accent { color: var(--rst-accent) !important; }
.text-muted { color: var(--rst-text-muted) !important; }
.text-light { color: var(--rst-text-light) !important; }
/* --- COMPONENT STYLES --- */
.rst-dispatch-card {
max-width: 480px;
margin: 0 auto;
background-color: var(--rst-surface);
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius-lg);
box-shadow: var(--rst-shadow);
padding: 3rem 2.5rem;
}
.rst-dispatch-header {
text-align: center;
margin-bottom: 2rem;
}
.rst-dispatch-tag {
font-family: var(--rst-font-sub);
font-size: 0.75rem;
font-weight: 700;
color: var(--rst-primary);
text-transform: uppercase;
letter-spacing: 0.08em;
display: inline-block;
margin-bottom: 0.5rem;
}
.rst-dispatch-title {
font-family: var(--rst-font-heading);
font-size: 2rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: var(--rst-primary);
}
.rst-dispatch-desc {
font-size: 0.85rem;
color: var(--rst-text-muted);
line-height: 1.6;
}
.rst-dispatch-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.rst-checkbox-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
background-color: var(--rst-surface-2);
border: 1px solid var(--rst-border);
padding: 1.25rem;
border-radius: var(--rst-radius);
margin-top: 0.25rem;
}
.rst-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
}
.rst-checkbox {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--rst-border-strong);
border-radius: var(--rst-radius-sm);
outline: none;
background-color: var(--rst-bg);
cursor: pointer;
transition: var(--rst-transition);
position: relative;
flex-shrink: 0;
}
.rst-checkbox:checked {
background-color: var(--rst-primary);
border-color: var(--rst-primary);
}
.rst-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid #0B0A09;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.rst-checkbox-label {
font-size: 0.8rem;
color: var(--rst-text-muted);
line-height: 1.2;
}
.rst-form-privacy {
font-size: 0.725rem;
color: var(--rst-text-light);
text-align: center;
display: block;
line-height: 1.4;
}
@media (max-width: 576px) {
.rst-checkbox-grid {
grid-template-columns: 1fr;
}
}
Cards
Signature Culinary Dish Cards
HTML
<div class="rst-cards-grid">
<!-- Card 1: Wagyu -->
<article class="rst-topic-card rst-card">
<div class="rst-card-img-wrapper">
<img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?auto=format&fit=crop&w=600&q=80" alt="Wagyu Beef Medallions with Truffle Emulsion" class="rst-card-img">
<span class="rst-card-price-tag">$185</span>
</div>
<div class="rst-card-body">
<div class="rst-card-meta">
<span class="rst-card-tag text-primary">Main Course</span>
<span class="rst-meta-bull">•</span>
<span class="rst-card-chef">Chef Laurent</span>
</div>
<h3 class="rst-card-title">
<a href="#" class="rst-card-link">Wagyu Medallions with Black Truffle Emulsion</a>
</h3>
<p class="rst-card-excerpt">A4 Wagyu seared to perfection alongside Périgord black truffle emulsion, bone marrow jus, and compressed heirloom heritage beetroot.</p>
<div class="rst-card-allergens">
<span class="rst-allergen-pill">Dairy</span>
<span class="rst-allergen-pill">Contains: Gluten</span>
</div>
<div class="rst-card-footer">
<span class="rst-card-path">Wine: Pomerol 2015</span>
<span class="rst-watch-cta">Add to Menu</span>
</div>
</div>
</article>
<!-- Card 2: Lobster -->
<article class="rst-topic-card rst-card">
<div class="rst-card-img-wrapper">
<img src="https://images.unsplash.com/photo-1559847844-5315695dadae?auto=format&fit=crop&w=600&q=80" alt="Blue Lobster Medallion with Champagne Beurre Blanc" class="rst-card-img">
<span class="rst-card-price-tag">$145</span>
</div>
<div class="rst-card-body">
<div class="rst-card-meta">
<span class="rst-card-tag text-accent">Entrée</span>
<span class="rst-meta-bull">•</span>
<span class="rst-card-chef">Chef Laurent</span>
</div>
<h3 class="rst-card-title">
<a href="#" class="rst-card-link">Blue Lobster & Champagne Beurre Blanc</a>
</h3>
<p class="rst-card-excerpt">Brittany blue lobster tail poached in Nantua bisque, plated with Champagne beurre blanc, oscietra pearls and micro tarragon fennel.</p>
<div class="rst-card-allergens">
<span class="rst-allergen-pill">Shellfish</span>
<span class="rst-allergen-pill">Dairy</span>
</div>
<div class="rst-card-footer">
<span class="rst-card-path">Wine: Meursault 2016</span>
<span class="rst-watch-cta">Add to Menu</span>
</div>
</div>
</article>
</div>
CSS (Component Only)
/* Component: Signature Culinary Dish Cards */
/* NOTE: This component requires base.css to be included in your page. */
.rst-cards-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
max-width: 1100px;
margin: 0 auto;
}
.rst-topic-card {
display: flex;
flex-direction: column;
overflow: hidden;
background-color: var(--rst-surface);
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius-lg);
box-shadow: var(--rst-shadow-sm);
padding: 0 !important;
transition: var(--rst-transition);
}
.rst-topic-card:hover {
border-color: var(--rst-primary);
box-shadow: var(--rst-shadow);
transform: translateY(-2px);
}
/* Image wrapper */
.rst-card-img-wrapper {
position: relative;
width: 100%;
height: 240px;
overflow: hidden;
background-color: var(--rst-surface-2);
}
.rst-card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--rst-transition);
filter: brightness(0.9);
}
.rst-topic-card:hover .rst-card-img {
transform: scale(1.05);
filter: brightness(1);
}
.rst-card-price-tag {
position: absolute;
bottom: 1rem;
right: 1rem;
background-color: var(--rst-primary);
color: #0B0A09;
padding: 0.45rem 1rem;
border-radius: var(--rst-radius-pill);
font-family: var(--rst-font-sub);
font-size: 1.1rem;
font-weight: 800;
box-shadow: var(--rst-shadow-sm);
}
/* Body */
.rst-card-body {
display: flex;
flex-direction: column;
gap: 0.85rem;
flex: 1;
padding: 2rem;
}
.rst-card-meta {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.rst-meta-bull {
color: var(--rst-border-strong);
}
.rst-card-chef {
color: var(--rst-text-light);
}
.rst-card-title {
font-family: var(--rst-font-heading);
font-size: 1.45rem;
font-weight: 600;
line-height: 1.3;
}
.rst-card-link {
color: var(--rst-text);
text-decoration: none;
transition: var(--rst-transition);
}
.rst-card-link:hover {
color: var(--rst-primary);
}
.rst-card-excerpt {
font-size: 0.85rem;
color: var(--rst-text-muted);
line-height: 1.55;
}
/* Allergen pills */
.rst-card-allergens {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.rst-allergen-pill {
background-color: var(--rst-surface-2);
border: 1px solid var(--rst-border);
padding: 0.2rem 0.6rem;
font-size: 0.7rem;
font-weight: 600;
color: var(--rst-text-muted);
border-radius: var(--rst-radius-sm);
font-family: var(--rst-font-sub);
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* Footer */
.rst-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--rst-border);
padding-top: 1.25rem;
margin-top: auto;
}
.rst-card-path {
font-family: var(--rst-font-sub);
font-size: 0.75rem;
font-weight: 600;
color: var(--rst-text-light);
font-style: italic;
}
.rst-watch-cta {
font-family: var(--rst-font-sub);
font-size: 0.75rem;
font-weight: 700;
color: var(--rst-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
transition: var(--rst-transition);
}
.rst-topic-card:hover .rst-watch-cta {
color: var(--rst-primary-hover);
}
@media (max-width: 992px) {
.rst-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=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Restaurant Fine Dining Design System (rst-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Warm dark velvet background */
--rst-bg: #0B0A09; /* Obsidian Velvet */
--rst-surface: #141210; /* Dark Ebony */
--rst-surface-2: #1D1A17; /* Muted Gold Slate */
/* Premium Palette */
--rst-primary: #D4AF37; /* Champagne Gold */
--rst-primary-hover: #C59B27;
--rst-primary-muted: rgba(212, 175, 55, 0.08);
--rst-accent: #8B0000; /* Deep Wine Crimson */
--rst-accent-hover: #700000;
--rst-accent-muted: rgba(139, 0, 0, 0.15);
--rst-gold: #E6C65A;
/* Text warm shades */
--rst-text: #F5F5F4; /* Warm Ivory */
--rst-text-muted: #A8A29E; /* Stone Gray */
--rst-text-light: #78716C;
/* Borders */
--rst-border: #2D2924; /* Gilded Border */
--rst-border-strong: #443E37;
--rst-border-glow: rgba(212, 175, 55, 0.15);
/* Rounded Shapes */
--rst-radius-sm: 4px;
--rst-radius: 8px;
--rst-radius-lg: 16px;
--rst-radius-pill: 999px;
/* Fonts */
--rst-font-heading: 'Cormorant Garamond', serif;
--rst-font-sub: 'Outfit', sans-serif;
--rst-font-body: 'Outfit', sans-serif;
/* Shadows */
--rst-shadow-sm: 0 2px 10px rgba(0,0,0,0.4);
--rst-shadow: 0 15px 40px rgba(0,0,0,0.6);
--rst-shadow-glow: 0 0 25px rgba(212, 175, 55, 0.06);
/* Transition */
--rst-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--rst-font-body);
color: var(--rst-text);
background-color: var(--rst-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.rst-card {
background-color: var(--rst-surface);
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius-lg);
box-shadow: var(--rst-shadow);
padding: 2.25rem;
transition: var(--rst-transition);
}
.rst-card:hover {
border-color: var(--rst-primary);
box-shadow: 0 12px 45px rgba(212, 175, 55, 0.04);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--rst-font-heading);
font-weight: 600;
margin: 0;
color: var(--rst-text);
line-height: 1.25;
}
p {
font-family: var(--rst-font-body);
color: var(--rst-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.rst-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.6rem;
font-family: var(--rst-font-sub);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--rst-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--rst-transition);
white-space: nowrap;
user-select: none;
}
.rst-btn-primary {
background-color: var(--rst-primary);
color: #0B0A09;
border-color: var(--rst-primary);
}
.rst-btn-primary:hover {
background-color: var(--rst-primary-hover);
border-color: var(--rst-primary-hover);
transform: translateY(-1px);
}
.rst-btn-accent {
background-color: var(--rst-accent);
color: #fff;
border-color: var(--rst-accent);
}
.rst-btn-accent:hover {
background-color: var(--rst-accent-hover);
border-color: var(--rst-accent-hover);
transform: translateY(-1px);
}
.rst-btn-outline {
background-color: transparent;
color: var(--rst-primary);
border-color: var(--rst-border-strong);
}
.rst-btn-outline:hover {
background-color: var(--rst-primary-muted);
border-color: var(--rst-primary);
color: var(--rst-text);
}
.rst-btn-ghost {
background-color: transparent;
color: var(--rst-text-muted);
border-color: transparent;
}
.rst-btn-ghost:hover {
background-color: var(--rst-surface-2);
color: var(--rst-text);
}
.rst-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.8rem; }
.rst-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--rst-radius-lg); }
.rst-btn-block { width: 100%; }
.rst-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--rst-radius); }
/* ── Form Controls ────────────── */
.rst-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius);
font-family: var(--rst-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--rst-text);
background-color: var(--rst-bg);
outline: none;
transition: var(--rst-transition);
}
.rst-input::placeholder { color: var(--rst-text-light); }
.rst-input:focus {
border-color: var(--rst-primary);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.rst-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--rst-font-sub);
font-weight: 600;
font-size: 0.8rem;
color: var(--rst-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Custom select */
.rst-select {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius);
font-family: var(--rst-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--rst-text);
background-color: var(--rst-bg);
outline: none;
transition: var(--rst-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='%23D4AF37' 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;
}
.rst-select:focus {
border-color: var(--rst-primary);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
/* ── Badges ───────────────────── */
.rst-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--rst-radius-pill);
font-family: var(--rst-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.rst-badge-primary { background-color: var(--rst-primary-muted); color: var(--rst-primary); border-color: rgba(212, 175, 55, 0.15); }
.rst-badge-accent { background-color: var(--rst-accent-muted); color: var(--rst-text); border-color: var(--rst-accent); }
.rst-badge-default { background-color: var(--rst-surface-2); color: var(--rst-text-muted); border-color: var(--rst-border); }
/* ── Divider ──────────────────── */
.rst-divider { border: none; border-top: 1px solid var(--rst-border); margin: 0; }
/* ── Logo ─────────────────────── */
.rst-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--rst-font-heading);
font-size: 1.65rem;
color: var(--rst-primary);
font-weight: 700;
letter-spacing: 0.05em;
}
.rst-logo-icon {
width: 32px;
height: 32px;
background-color: var(--rst-primary-muted);
border: 1px solid var(--rst-primary);
display: flex;
align-items: center;
justify-content: center;
color: var(--rst-primary);
border-radius: var(--rst-radius);
box-shadow: var(--rst-shadow-glow);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--rst-primary) !important; }
.text-accent { color: var(--rst-accent) !important; }
.text-muted { color: var(--rst-text-muted) !important; }
.text-light { color: var(--rst-text-light) !important; }
/* --- COMPONENT STYLES --- */
.rst-cards-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
max-width: 1100px;
margin: 0 auto;
}
.rst-topic-card {
display: flex;
flex-direction: column;
overflow: hidden;
background-color: var(--rst-surface);
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius-lg);
box-shadow: var(--rst-shadow-sm);
padding: 0 !important;
transition: var(--rst-transition);
}
.rst-topic-card:hover {
border-color: var(--rst-primary);
box-shadow: var(--rst-shadow);
transform: translateY(-2px);
}
/* Image wrapper */
.rst-card-img-wrapper {
position: relative;
width: 100%;
height: 240px;
overflow: hidden;
background-color: var(--rst-surface-2);
}
.rst-card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--rst-transition);
filter: brightness(0.9);
}
.rst-topic-card:hover .rst-card-img {
transform: scale(1.05);
filter: brightness(1);
}
.rst-card-price-tag {
position: absolute;
bottom: 1rem;
right: 1rem;
background-color: var(--rst-primary);
color: #0B0A09;
padding: 0.45rem 1rem;
border-radius: var(--rst-radius-pill);
font-family: var(--rst-font-sub);
font-size: 1.1rem;
font-weight: 800;
box-shadow: var(--rst-shadow-sm);
}
/* Body */
.rst-card-body {
display: flex;
flex-direction: column;
gap: 0.85rem;
flex: 1;
padding: 2rem;
}
.rst-card-meta {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.rst-meta-bull {
color: var(--rst-border-strong);
}
.rst-card-chef {
color: var(--rst-text-light);
}
.rst-card-title {
font-family: var(--rst-font-heading);
font-size: 1.45rem;
font-weight: 600;
line-height: 1.3;
}
.rst-card-link {
color: var(--rst-text);
text-decoration: none;
transition: var(--rst-transition);
}
.rst-card-link:hover {
color: var(--rst-primary);
}
.rst-card-excerpt {
font-size: 0.85rem;
color: var(--rst-text-muted);
line-height: 1.55;
}
/* Allergen pills */
.rst-card-allergens {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.rst-allergen-pill {
background-color: var(--rst-surface-2);
border: 1px solid var(--rst-border);
padding: 0.2rem 0.6rem;
font-size: 0.7rem;
font-weight: 600;
color: var(--rst-text-muted);
border-radius: var(--rst-radius-sm);
font-family: var(--rst-font-sub);
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* Footer */
.rst-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--rst-border);
padding-top: 1.25rem;
margin-top: auto;
}
.rst-card-path {
font-family: var(--rst-font-sub);
font-size: 0.75rem;
font-weight: 600;
color: var(--rst-text-light);
font-style: italic;
}
.rst-watch-cta {
font-family: var(--rst-font-sub);
font-size: 0.75rem;
font-weight: 700;
color: var(--rst-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
transition: var(--rst-transition);
}
.rst-topic-card:hover .rst-watch-cta {
color: var(--rst-primary-hover);
}
@media (max-width: 992px) {
.rst-cards-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
}
Accolades & Stars Dashboard
HTML
<div class="rst-stats-row">
<!-- Stat 1: Michelin Stars -->
<div class="rst-stat-card rst-card">
<div class="rst-stat-icon-wrapper rst-badge-primary">
<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="rst-stat-details">
<span class="rst-stat-label">Michelin Stars</span>
<div class="rst-stat-value-group">
<span class="rst-stat-value">★★★</span>
<span class="rst-stat-change positive">Awarded</span>
</div>
<span class="rst-stat-desc">Three Michelin stars awarded consecutively since 2018 by the French Michelin Guide selection committee.</span>
</div>
</div>
<!-- Stat 2: Covers Per Week -->
<div class="rst-stat-card rst-card">
<div class="rst-stat-icon-wrapper rst-badge-default">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</div>
<div class="rst-stat-details">
<span class="rst-stat-label">Covers Per Evening</span>
<div class="rst-stat-value-group">
<span class="rst-stat-value">48</span>
<span class="rst-stat-change positive">Seated</span>
</div>
<span class="rst-stat-desc">Maximum intimate covers served per evening across the Grand Salon and Chef's Counter seating zones.</span>
</div>
</div>
<!-- Stat 3: Wait List -->
<div class="rst-stat-card rst-card">
<div class="rst-stat-icon-wrapper rst-badge-accent">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
</div>
<div class="rst-stat-details">
<span class="rst-stat-label">Waitlist Position</span>
<div class="rst-stat-value-group">
<span class="rst-stat-value">6 Wks</span>
<span class="rst-stat-change positive">Priority</span>
</div>
<div class="rst-stat-progress-wrapper">
<div class="rst-stat-progress-bar" style="width: 78%;"></div>
</div>
<span class="rst-stat-desc">Average table waitlist lead time for prime weekend tasting service slots and Chef's Counter reservations.</span>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Accolades & Stars Dashboard */
/* NOTE: This component requires base.css to be included in your page. */
.rst-stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
max-width: 1100px;
margin: 0 auto;
}
.rst-stat-card {
display: flex;
align-items: flex-start;
gap: 1.25rem;
}
.rst-stat-icon-wrapper {
width: 44px;
height: 44px;
border-radius: var(--rst-radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.rst-stat-icon-wrapper svg {
width: 20px;
height: 20px;
}
.rst-badge-primary {
background-color: var(--rst-primary-muted);
color: var(--rst-primary);
border: 1px solid rgba(212, 175, 55, 0.2);
}
.rst-badge-default {
background-color: var(--rst-surface-2);
color: var(--rst-text-muted);
border: 1px solid var(--rst-border);
}
.rst-badge-accent {
background-color: var(--rst-accent-muted);
color: #E87070;
border: 1px solid rgba(139, 0, 0, 0.3);
}
.rst-stat-details {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
min-width: 0;
}
.rst-stat-label {
font-family: var(--rst-font-sub);
font-size: 0.725rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--rst-text-light);
}
.rst-stat-value-group {
display: flex;
align-items: baseline;
gap: 0.75rem;
flex-wrap: wrap;
}
.rst-stat-value {
font-family: var(--rst-font-heading);
font-size: 1.75rem;
font-weight: 600;
color: var(--rst-primary);
line-height: 1;
}
.rst-stat-change {
font-size: 0.75rem;
font-weight: 700;
border-radius: var(--rst-radius-sm);
font-family: var(--rst-font-sub);
}
.rst-stat-change.positive {
color: var(--rst-primary);
}
.rst-stat-desc {
font-size: 0.725rem;
color: var(--rst-text-muted);
line-height: 1.4;
}
/* Progress Bar */
.rst-stat-progress-wrapper {
width: 100%;
height: 3px;
background-color: var(--rst-surface-2);
border-radius: var(--rst-radius-pill);
overflow: hidden;
margin: 0.25rem 0;
}
.rst-stat-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--rst-primary), var(--rst-gold));
border-radius: var(--rst-radius-pill);
}
@media (max-width: 992px) {
.rst-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=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Restaurant Fine Dining Design System (rst-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Warm dark velvet background */
--rst-bg: #0B0A09; /* Obsidian Velvet */
--rst-surface: #141210; /* Dark Ebony */
--rst-surface-2: #1D1A17; /* Muted Gold Slate */
/* Premium Palette */
--rst-primary: #D4AF37; /* Champagne Gold */
--rst-primary-hover: #C59B27;
--rst-primary-muted: rgba(212, 175, 55, 0.08);
--rst-accent: #8B0000; /* Deep Wine Crimson */
--rst-accent-hover: #700000;
--rst-accent-muted: rgba(139, 0, 0, 0.15);
--rst-gold: #E6C65A;
/* Text warm shades */
--rst-text: #F5F5F4; /* Warm Ivory */
--rst-text-muted: #A8A29E; /* Stone Gray */
--rst-text-light: #78716C;
/* Borders */
--rst-border: #2D2924; /* Gilded Border */
--rst-border-strong: #443E37;
--rst-border-glow: rgba(212, 175, 55, 0.15);
/* Rounded Shapes */
--rst-radius-sm: 4px;
--rst-radius: 8px;
--rst-radius-lg: 16px;
--rst-radius-pill: 999px;
/* Fonts */
--rst-font-heading: 'Cormorant Garamond', serif;
--rst-font-sub: 'Outfit', sans-serif;
--rst-font-body: 'Outfit', sans-serif;
/* Shadows */
--rst-shadow-sm: 0 2px 10px rgba(0,0,0,0.4);
--rst-shadow: 0 15px 40px rgba(0,0,0,0.6);
--rst-shadow-glow: 0 0 25px rgba(212, 175, 55, 0.06);
/* Transition */
--rst-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--rst-font-body);
color: var(--rst-text);
background-color: var(--rst-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.rst-card {
background-color: var(--rst-surface);
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius-lg);
box-shadow: var(--rst-shadow);
padding: 2.25rem;
transition: var(--rst-transition);
}
.rst-card:hover {
border-color: var(--rst-primary);
box-shadow: 0 12px 45px rgba(212, 175, 55, 0.04);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--rst-font-heading);
font-weight: 600;
margin: 0;
color: var(--rst-text);
line-height: 1.25;
}
p {
font-family: var(--rst-font-body);
color: var(--rst-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.rst-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.6rem;
font-family: var(--rst-font-sub);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--rst-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--rst-transition);
white-space: nowrap;
user-select: none;
}
.rst-btn-primary {
background-color: var(--rst-primary);
color: #0B0A09;
border-color: var(--rst-primary);
}
.rst-btn-primary:hover {
background-color: var(--rst-primary-hover);
border-color: var(--rst-primary-hover);
transform: translateY(-1px);
}
.rst-btn-accent {
background-color: var(--rst-accent);
color: #fff;
border-color: var(--rst-accent);
}
.rst-btn-accent:hover {
background-color: var(--rst-accent-hover);
border-color: var(--rst-accent-hover);
transform: translateY(-1px);
}
.rst-btn-outline {
background-color: transparent;
color: var(--rst-primary);
border-color: var(--rst-border-strong);
}
.rst-btn-outline:hover {
background-color: var(--rst-primary-muted);
border-color: var(--rst-primary);
color: var(--rst-text);
}
.rst-btn-ghost {
background-color: transparent;
color: var(--rst-text-muted);
border-color: transparent;
}
.rst-btn-ghost:hover {
background-color: var(--rst-surface-2);
color: var(--rst-text);
}
.rst-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.8rem; }
.rst-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--rst-radius-lg); }
.rst-btn-block { width: 100%; }
.rst-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--rst-radius); }
/* ── Form Controls ────────────── */
.rst-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius);
font-family: var(--rst-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--rst-text);
background-color: var(--rst-bg);
outline: none;
transition: var(--rst-transition);
}
.rst-input::placeholder { color: var(--rst-text-light); }
.rst-input:focus {
border-color: var(--rst-primary);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.rst-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--rst-font-sub);
font-weight: 600;
font-size: 0.8rem;
color: var(--rst-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Custom select */
.rst-select {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius);
font-family: var(--rst-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--rst-text);
background-color: var(--rst-bg);
outline: none;
transition: var(--rst-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='%23D4AF37' 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;
}
.rst-select:focus {
border-color: var(--rst-primary);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
/* ── Badges ───────────────────── */
.rst-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--rst-radius-pill);
font-family: var(--rst-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.rst-badge-primary { background-color: var(--rst-primary-muted); color: var(--rst-primary); border-color: rgba(212, 175, 55, 0.15); }
.rst-badge-accent { background-color: var(--rst-accent-muted); color: var(--rst-text); border-color: var(--rst-accent); }
.rst-badge-default { background-color: var(--rst-surface-2); color: var(--rst-text-muted); border-color: var(--rst-border); }
/* ── Divider ──────────────────── */
.rst-divider { border: none; border-top: 1px solid var(--rst-border); margin: 0; }
/* ── Logo ─────────────────────── */
.rst-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--rst-font-heading);
font-size: 1.65rem;
color: var(--rst-primary);
font-weight: 700;
letter-spacing: 0.05em;
}
.rst-logo-icon {
width: 32px;
height: 32px;
background-color: var(--rst-primary-muted);
border: 1px solid var(--rst-primary);
display: flex;
align-items: center;
justify-content: center;
color: var(--rst-primary);
border-radius: var(--rst-radius);
box-shadow: var(--rst-shadow-glow);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--rst-primary) !important; }
.text-accent { color: var(--rst-accent) !important; }
.text-muted { color: var(--rst-text-muted) !important; }
.text-light { color: var(--rst-text-light) !important; }
/* --- COMPONENT STYLES --- */
.rst-stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
max-width: 1100px;
margin: 0 auto;
}
.rst-stat-card {
display: flex;
align-items: flex-start;
gap: 1.25rem;
}
.rst-stat-icon-wrapper {
width: 44px;
height: 44px;
border-radius: var(--rst-radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.rst-stat-icon-wrapper svg {
width: 20px;
height: 20px;
}
.rst-badge-primary {
background-color: var(--rst-primary-muted);
color: var(--rst-primary);
border: 1px solid rgba(212, 175, 55, 0.2);
}
.rst-badge-default {
background-color: var(--rst-surface-2);
color: var(--rst-text-muted);
border: 1px solid var(--rst-border);
}
.rst-badge-accent {
background-color: var(--rst-accent-muted);
color: #E87070;
border: 1px solid rgba(139, 0, 0, 0.3);
}
.rst-stat-details {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
min-width: 0;
}
.rst-stat-label {
font-family: var(--rst-font-sub);
font-size: 0.725rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--rst-text-light);
}
.rst-stat-value-group {
display: flex;
align-items: baseline;
gap: 0.75rem;
flex-wrap: wrap;
}
.rst-stat-value {
font-family: var(--rst-font-heading);
font-size: 1.75rem;
font-weight: 600;
color: var(--rst-primary);
line-height: 1;
}
.rst-stat-change {
font-size: 0.75rem;
font-weight: 700;
border-radius: var(--rst-radius-sm);
font-family: var(--rst-font-sub);
}
.rst-stat-change.positive {
color: var(--rst-primary);
}
.rst-stat-desc {
font-size: 0.725rem;
color: var(--rst-text-muted);
line-height: 1.4;
}
/* Progress Bar */
.rst-stat-progress-wrapper {
width: 100%;
height: 3px;
background-color: var(--rst-surface-2);
border-radius: var(--rst-radius-pill);
overflow: hidden;
margin: 0.25rem 0;
}
.rst-stat-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--rst-primary), var(--rst-gold));
border-radius: var(--rst-radius-pill);
}
@media (max-width: 992px) {
.rst-stats-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
Tables
Chef Tasting Course Ledger
HTML
<div class="rst-table-wrapper rst-card">
<div class="rst-table-header">
<h3 class="rst-table-title">Chef's Tasting Course Ledger</h3>
<p class="rst-table-desc">Grand Degustation sequence — nine harmonious courses paired with a bespoke Sommelier wine flight selection.</p>
</div>
<div class="rst-table-scroll">
<table class="rst-table">
<thead>
<tr>
<th>Course</th>
<th>Dish Name</th>
<th>Key Ingredients</th>
<th>Wine Pairing</th>
<th>Dietary</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<!-- Row 1 -->
<tr>
<td>
<span class="rst-course-num">01</span>
<span class="rst-course-type">Amuse-Bouche</span>
</td>
<td>
<span class="rst-dish-name">Oscietra Caviar Royale</span>
</td>
<td class="rst-ingredients">Caviar, crème fraîche, blini</td>
<td>
<span class="rst-wine">Dom Pérignon 2012</span>
</td>
<td><span class="rst-badge rst-badge-default">Dairy</span></td>
<td><span class="rst-dish-price">$95</span></td>
</tr>
<!-- Row 2 -->
<tr>
<td>
<span class="rst-course-num">02</span>
<span class="rst-course-type">Entrée</span>
</td>
<td>
<span class="rst-dish-name">Blue Lobster & Champagne Beurre Blanc</span>
</td>
<td class="rst-ingredients">Brittany lobster, bisque, oscietra pearls</td>
<td>
<span class="rst-wine">Montrachet Grand Cru 2015</span>
</td>
<td><span class="rst-badge rst-badge-default">Shellfish</span></td>
<td><span class="rst-dish-price">$145</span></td>
</tr>
<!-- Row 3 -->
<tr>
<td>
<span class="rst-course-num">03</span>
<span class="rst-course-type">Main</span>
</td>
<td>
<span class="rst-dish-name">Wagyu Medallion & Black Truffle</span>
</td>
<td class="rst-ingredients">A4 Wagyu, Périgord truffle, bone marrow jus</td>
<td>
<span class="rst-wine">Pétrus, Pomerol 2015</span>
</td>
<td><span class="rst-badge rst-badge-default">Dairy, Gluten</span></td>
<td><span class="rst-dish-price">$185</span></td>
</tr>
<!-- Row 4 -->
<tr>
<td>
<span class="rst-course-num">09</span>
<span class="rst-course-type">Dessert</span>
</td>
<td>
<span class="rst-dish-name">Golden Champagne Soufflé</span>
</td>
<td class="rst-ingredients">Valrhona gold chocolate, champagne reduction</td>
<td>
<span class="rst-wine">Château d'Yquem 2008</span>
</td>
<td><span class="rst-badge rst-badge-default">Dairy, Eggs</span></td>
<td><span class="rst-dish-price">$65</span></td>
</tr>
</tbody>
</table>
</div>
</div>
CSS (Component Only)
/* Component: Chef Tasting Course Ledger */
/* NOTE: This component requires base.css to be included in your page. */
.rst-table-wrapper {
max-width: 1100px;
margin: 0 auto;
width: 100%;
}
.rst-table-header {
margin-bottom: 1.5rem;
}
.rst-table-title {
font-family: var(--rst-font-heading);
font-size: 1.65rem;
font-weight: 600;
margin-bottom: 0.35rem;
color: var(--rst-primary);
}
.rst-table-desc {
font-size: 0.85rem;
color: var(--rst-text-muted);
font-style: italic;
}
.rst-table-scroll {
width: 100%;
overflow-x: auto;
}
.rst-table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-family: var(--rst-font-body);
}
.rst-table th {
font-family: var(--rst-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--rst-text-light);
border-bottom: 1px solid var(--rst-border-strong);
padding: 1rem;
background-color: var(--rst-surface-2);
}
.rst-table td {
padding: 1.25rem 1rem;
border-bottom: 1px solid var(--rst-border);
font-size: 0.85rem;
color: var(--rst-text-muted);
vertical-align: middle;
}
.rst-table tr:hover td {
background-color: var(--rst-surface-2);
}
/* Specific cells */
.rst-course-num {
display: block;
font-family: var(--rst-font-sub);
font-size: 1.25rem;
font-weight: 800;
color: var(--rst-primary);
line-height: 1;
}
.rst-course-type {
font-size: 0.7rem;
font-weight: 600;
color: var(--rst-text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.rst-dish-name {
font-family: var(--rst-font-heading);
font-size: 1.1rem;
font-weight: 600;
color: var(--rst-text);
}
.rst-ingredients {
font-size: 0.8rem;
color: var(--rst-text-light);
font-style: italic;
max-width: 200px;
}
.rst-wine {
font-size: 0.8rem;
font-weight: 600;
color: var(--rst-text-muted);
}
.rst-dish-price {
font-family: var(--rst-font-sub);
font-size: 1.05rem;
font-weight: 800;
color: var(--rst-primary);
white-space: nowrap;
}
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=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Restaurant Fine Dining Design System (rst-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Warm dark velvet background */
--rst-bg: #0B0A09; /* Obsidian Velvet */
--rst-surface: #141210; /* Dark Ebony */
--rst-surface-2: #1D1A17; /* Muted Gold Slate */
/* Premium Palette */
--rst-primary: #D4AF37; /* Champagne Gold */
--rst-primary-hover: #C59B27;
--rst-primary-muted: rgba(212, 175, 55, 0.08);
--rst-accent: #8B0000; /* Deep Wine Crimson */
--rst-accent-hover: #700000;
--rst-accent-muted: rgba(139, 0, 0, 0.15);
--rst-gold: #E6C65A;
/* Text warm shades */
--rst-text: #F5F5F4; /* Warm Ivory */
--rst-text-muted: #A8A29E; /* Stone Gray */
--rst-text-light: #78716C;
/* Borders */
--rst-border: #2D2924; /* Gilded Border */
--rst-border-strong: #443E37;
--rst-border-glow: rgba(212, 175, 55, 0.15);
/* Rounded Shapes */
--rst-radius-sm: 4px;
--rst-radius: 8px;
--rst-radius-lg: 16px;
--rst-radius-pill: 999px;
/* Fonts */
--rst-font-heading: 'Cormorant Garamond', serif;
--rst-font-sub: 'Outfit', sans-serif;
--rst-font-body: 'Outfit', sans-serif;
/* Shadows */
--rst-shadow-sm: 0 2px 10px rgba(0,0,0,0.4);
--rst-shadow: 0 15px 40px rgba(0,0,0,0.6);
--rst-shadow-glow: 0 0 25px rgba(212, 175, 55, 0.06);
/* Transition */
--rst-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--rst-font-body);
color: var(--rst-text);
background-color: var(--rst-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.rst-card {
background-color: var(--rst-surface);
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius-lg);
box-shadow: var(--rst-shadow);
padding: 2.25rem;
transition: var(--rst-transition);
}
.rst-card:hover {
border-color: var(--rst-primary);
box-shadow: 0 12px 45px rgba(212, 175, 55, 0.04);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--rst-font-heading);
font-weight: 600;
margin: 0;
color: var(--rst-text);
line-height: 1.25;
}
p {
font-family: var(--rst-font-body);
color: var(--rst-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.rst-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.6rem;
font-family: var(--rst-font-sub);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--rst-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--rst-transition);
white-space: nowrap;
user-select: none;
}
.rst-btn-primary {
background-color: var(--rst-primary);
color: #0B0A09;
border-color: var(--rst-primary);
}
.rst-btn-primary:hover {
background-color: var(--rst-primary-hover);
border-color: var(--rst-primary-hover);
transform: translateY(-1px);
}
.rst-btn-accent {
background-color: var(--rst-accent);
color: #fff;
border-color: var(--rst-accent);
}
.rst-btn-accent:hover {
background-color: var(--rst-accent-hover);
border-color: var(--rst-accent-hover);
transform: translateY(-1px);
}
.rst-btn-outline {
background-color: transparent;
color: var(--rst-primary);
border-color: var(--rst-border-strong);
}
.rst-btn-outline:hover {
background-color: var(--rst-primary-muted);
border-color: var(--rst-primary);
color: var(--rst-text);
}
.rst-btn-ghost {
background-color: transparent;
color: var(--rst-text-muted);
border-color: transparent;
}
.rst-btn-ghost:hover {
background-color: var(--rst-surface-2);
color: var(--rst-text);
}
.rst-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.8rem; }
.rst-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--rst-radius-lg); }
.rst-btn-block { width: 100%; }
.rst-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--rst-radius); }
/* ── Form Controls ────────────── */
.rst-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius);
font-family: var(--rst-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--rst-text);
background-color: var(--rst-bg);
outline: none;
transition: var(--rst-transition);
}
.rst-input::placeholder { color: var(--rst-text-light); }
.rst-input:focus {
border-color: var(--rst-primary);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.rst-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--rst-font-sub);
font-weight: 600;
font-size: 0.8rem;
color: var(--rst-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Custom select */
.rst-select {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius);
font-family: var(--rst-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--rst-text);
background-color: var(--rst-bg);
outline: none;
transition: var(--rst-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='%23D4AF37' 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;
}
.rst-select:focus {
border-color: var(--rst-primary);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
/* ── Badges ───────────────────── */
.rst-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--rst-radius-pill);
font-family: var(--rst-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.rst-badge-primary { background-color: var(--rst-primary-muted); color: var(--rst-primary); border-color: rgba(212, 175, 55, 0.15); }
.rst-badge-accent { background-color: var(--rst-accent-muted); color: var(--rst-text); border-color: var(--rst-accent); }
.rst-badge-default { background-color: var(--rst-surface-2); color: var(--rst-text-muted); border-color: var(--rst-border); }
/* ── Divider ──────────────────── */
.rst-divider { border: none; border-top: 1px solid var(--rst-border); margin: 0; }
/* ── Logo ─────────────────────── */
.rst-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--rst-font-heading);
font-size: 1.65rem;
color: var(--rst-primary);
font-weight: 700;
letter-spacing: 0.05em;
}
.rst-logo-icon {
width: 32px;
height: 32px;
background-color: var(--rst-primary-muted);
border: 1px solid var(--rst-primary);
display: flex;
align-items: center;
justify-content: center;
color: var(--rst-primary);
border-radius: var(--rst-radius);
box-shadow: var(--rst-shadow-glow);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--rst-primary) !important; }
.text-accent { color: var(--rst-accent) !important; }
.text-muted { color: var(--rst-text-muted) !important; }
.text-light { color: var(--rst-text-light) !important; }
/* --- COMPONENT STYLES --- */
.rst-table-wrapper {
max-width: 1100px;
margin: 0 auto;
width: 100%;
}
.rst-table-header {
margin-bottom: 1.5rem;
}
.rst-table-title {
font-family: var(--rst-font-heading);
font-size: 1.65rem;
font-weight: 600;
margin-bottom: 0.35rem;
color: var(--rst-primary);
}
.rst-table-desc {
font-size: 0.85rem;
color: var(--rst-text-muted);
font-style: italic;
}
.rst-table-scroll {
width: 100%;
overflow-x: auto;
}
.rst-table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-family: var(--rst-font-body);
}
.rst-table th {
font-family: var(--rst-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--rst-text-light);
border-bottom: 1px solid var(--rst-border-strong);
padding: 1rem;
background-color: var(--rst-surface-2);
}
.rst-table td {
padding: 1.25rem 1rem;
border-bottom: 1px solid var(--rst-border);
font-size: 0.85rem;
color: var(--rst-text-muted);
vertical-align: middle;
}
.rst-table tr:hover td {
background-color: var(--rst-surface-2);
}
/* Specific cells */
.rst-course-num {
display: block;
font-family: var(--rst-font-sub);
font-size: 1.25rem;
font-weight: 800;
color: var(--rst-primary);
line-height: 1;
}
.rst-course-type {
font-size: 0.7rem;
font-weight: 600;
color: var(--rst-text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.rst-dish-name {
font-family: var(--rst-font-heading);
font-size: 1.1rem;
font-weight: 600;
color: var(--rst-text);
}
.rst-ingredients {
font-size: 0.8rem;
color: var(--rst-text-light);
font-style: italic;
max-width: 200px;
}
.rst-wine {
font-size: 0.8rem;
font-weight: 600;
color: var(--rst-text-muted);
}
.rst-dish-price {
font-family: var(--rst-font-sub);
font-size: 1.05rem;
font-weight: 800;
color: var(--rst-primary);
white-space: nowrap;
}
Lists
Degustation Course Timeline
HTML
<div class="rst-activity-wrapper rst-card">
<div class="rst-activity-header">
<h3 class="rst-activity-title">Degustation Course Timeline</h3>
<p class="rst-activity-desc">Follow the choreographed journey through each act of the Grand Degustation experience.</p>
</div>
<div class="rst-timeline">
<!-- Course 1 -->
<div class="rst-timeline-item">
<div class="rst-timeline-icon rst-timeline-gold">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
</div>
<div class="rst-timeline-content">
<div class="rst-timeline-meta">
<span class="rst-activity-user">Course 01</span>
<span class="rst-activity-action">Amuse-Bouche</span>
<span class="rst-activity-timestamp">Arrival</span>
<span class="rst-activity-time">6:15 PM</span>
</div>
<div class="rst-timeline-text">
<strong>Oscietra Caviar Royale</strong> — A single golden spoonful of Oscietra caviar nested atop hand-piped crème fraîche and a warm blini, garnished with micro chervil and lemon zest oil.
</div>
</div>
</div>
<!-- Course 2 -->
<div class="rst-timeline-item">
<div class="rst-timeline-icon rst-timeline-muted">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 2H3v16h5l3 3 3-3h5V2z"></path><line x1="12" y1="7" x2="12" y2="13"></line><line x1="9" y1="10" x2="15" y2="10"></line></svg>
</div>
<div class="rst-timeline-content">
<div class="rst-timeline-meta">
<span class="rst-activity-user">Course 04</span>
<span class="rst-activity-action">Poisson</span>
<span class="rst-activity-timestamp">Fish</span>
<span class="rst-activity-time">7:45 PM</span>
</div>
<div class="rst-timeline-text">
<strong>Glazed Blue Lobster & Champagne Beurre Blanc</strong> — Brittany blue lobster tail poached in bisque, crowned with a champagne beurre blanc and scattered oscietra pearls over micro tarragon.
</div>
</div>
</div>
<!-- Course 3 -->
<div class="rst-timeline-item">
<div class="rst-timeline-icon rst-timeline-gold">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
</div>
<div class="rst-timeline-content">
<div class="rst-timeline-meta">
<span class="rst-activity-user text-primary">Course 07</span>
<span class="rst-activity-action">Pièce de Résistance</span>
<span class="rst-activity-timestamp">Main</span>
<span class="rst-activity-time">9:00 PM</span>
</div>
<div class="rst-timeline-text">
<strong>A4 Wagyu Medallion & Périgord Black Truffle</strong> — Served with Bordelaise bone marrow jus, compressed heritage beetroot, and a tableside shaved black truffle finishing that perfumes the entire salon.
</div>
</div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Degustation Course Timeline */
/* NOTE: This component requires base.css to be included in your page. */
.rst-activity-wrapper {
max-width: 720px;
margin: 0 auto;
width: 100%;
}
.rst-activity-header {
margin-bottom: 2rem;
}
.rst-activity-title {
font-family: var(--rst-font-heading);
font-size: 1.65rem;
font-weight: 600;
margin-bottom: 0.35rem;
color: var(--rst-primary);
}
.rst-activity-desc {
font-size: 0.85rem;
color: var(--rst-text-muted);
font-style: italic;
}
/* Timeline Wrapper */
.rst-timeline {
position: relative;
display: flex;
flex-direction: column;
}
.rst-timeline-item {
position: relative;
padding-left: 3rem;
padding-bottom: 2.25rem;
}
.rst-timeline-item:last-child {
padding-bottom: 0;
}
/* Bulletproof vertical connector line */
.rst-timeline-item::before {
content: '';
position: absolute;
left: 1rem;
top: 2rem;
bottom: 0;
width: 1px;
background: linear-gradient(to bottom, var(--rst-primary), var(--rst-border));
}
.rst-timeline-item:last-child::before {
display: none;
}
/* Icons */
.rst-timeline-icon {
position: absolute;
left: 0;
top: 0;
width: 32px;
height: 32px;
border-radius: var(--rst-radius-pill);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.rst-timeline-icon svg {
width: 14px;
height: 14px;
}
.rst-timeline-gold {
background-color: var(--rst-primary-muted);
color: var(--rst-primary);
border: 1px solid rgba(212, 175, 55, 0.3);
}
.rst-timeline-muted {
background-color: var(--rst-surface-2);
color: var(--rst-text-muted);
border: 1px solid var(--rst-border);
}
/* Contents */
.rst-timeline-content {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.rst-timeline-meta {
font-size: 0.8rem;
color: var(--rst-text-muted);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.rst-activity-user {
font-family: var(--rst-font-sub);
font-weight: 700;
color: var(--rst-text);
}
.rst-activity-action {
color: var(--rst-text-light);
font-weight: 500;
font-style: italic;
}
.rst-activity-timestamp {
font-family: var(--rst-font-sub);
font-weight: 700;
font-size: 0.7rem;
color: var(--rst-primary);
background-color: var(--rst-primary-muted);
padding: 0.15rem 0.45rem;
border-radius: var(--rst-radius-sm);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.rst-activity-time {
color: var(--rst-text-light);
font-size: 0.725rem;
margin-left: auto;
font-weight: 600;
}
.rst-timeline-text {
font-size: 0.85rem;
color: var(--rst-text-muted);
line-height: 1.55;
background-color: var(--rst-surface-2);
border: 1px solid var(--rst-border);
padding: 1rem 1.25rem;
border-radius: var(--rst-radius-lg);
margin: 0;
}
.rst-timeline-text strong {
color: var(--rst-text);
font-weight: 700;
}
@media (max-width: 576px) {
.rst-activity-time {
margin-left: 0;
width: 100%;
}
}
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=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Restaurant Fine Dining Design System (rst-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Warm dark velvet background */
--rst-bg: #0B0A09; /* Obsidian Velvet */
--rst-surface: #141210; /* Dark Ebony */
--rst-surface-2: #1D1A17; /* Muted Gold Slate */
/* Premium Palette */
--rst-primary: #D4AF37; /* Champagne Gold */
--rst-primary-hover: #C59B27;
--rst-primary-muted: rgba(212, 175, 55, 0.08);
--rst-accent: #8B0000; /* Deep Wine Crimson */
--rst-accent-hover: #700000;
--rst-accent-muted: rgba(139, 0, 0, 0.15);
--rst-gold: #E6C65A;
/* Text warm shades */
--rst-text: #F5F5F4; /* Warm Ivory */
--rst-text-muted: #A8A29E; /* Stone Gray */
--rst-text-light: #78716C;
/* Borders */
--rst-border: #2D2924; /* Gilded Border */
--rst-border-strong: #443E37;
--rst-border-glow: rgba(212, 175, 55, 0.15);
/* Rounded Shapes */
--rst-radius-sm: 4px;
--rst-radius: 8px;
--rst-radius-lg: 16px;
--rst-radius-pill: 999px;
/* Fonts */
--rst-font-heading: 'Cormorant Garamond', serif;
--rst-font-sub: 'Outfit', sans-serif;
--rst-font-body: 'Outfit', sans-serif;
/* Shadows */
--rst-shadow-sm: 0 2px 10px rgba(0,0,0,0.4);
--rst-shadow: 0 15px 40px rgba(0,0,0,0.6);
--rst-shadow-glow: 0 0 25px rgba(212, 175, 55, 0.06);
/* Transition */
--rst-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--rst-font-body);
color: var(--rst-text);
background-color: var(--rst-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.rst-card {
background-color: var(--rst-surface);
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius-lg);
box-shadow: var(--rst-shadow);
padding: 2.25rem;
transition: var(--rst-transition);
}
.rst-card:hover {
border-color: var(--rst-primary);
box-shadow: 0 12px 45px rgba(212, 175, 55, 0.04);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--rst-font-heading);
font-weight: 600;
margin: 0;
color: var(--rst-text);
line-height: 1.25;
}
p {
font-family: var(--rst-font-body);
color: var(--rst-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.rst-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.6rem;
font-family: var(--rst-font-sub);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--rst-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--rst-transition);
white-space: nowrap;
user-select: none;
}
.rst-btn-primary {
background-color: var(--rst-primary);
color: #0B0A09;
border-color: var(--rst-primary);
}
.rst-btn-primary:hover {
background-color: var(--rst-primary-hover);
border-color: var(--rst-primary-hover);
transform: translateY(-1px);
}
.rst-btn-accent {
background-color: var(--rst-accent);
color: #fff;
border-color: var(--rst-accent);
}
.rst-btn-accent:hover {
background-color: var(--rst-accent-hover);
border-color: var(--rst-accent-hover);
transform: translateY(-1px);
}
.rst-btn-outline {
background-color: transparent;
color: var(--rst-primary);
border-color: var(--rst-border-strong);
}
.rst-btn-outline:hover {
background-color: var(--rst-primary-muted);
border-color: var(--rst-primary);
color: var(--rst-text);
}
.rst-btn-ghost {
background-color: transparent;
color: var(--rst-text-muted);
border-color: transparent;
}
.rst-btn-ghost:hover {
background-color: var(--rst-surface-2);
color: var(--rst-text);
}
.rst-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.8rem; }
.rst-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--rst-radius-lg); }
.rst-btn-block { width: 100%; }
.rst-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--rst-radius); }
/* ── Form Controls ────────────── */
.rst-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius);
font-family: var(--rst-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--rst-text);
background-color: var(--rst-bg);
outline: none;
transition: var(--rst-transition);
}
.rst-input::placeholder { color: var(--rst-text-light); }
.rst-input:focus {
border-color: var(--rst-primary);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.rst-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--rst-font-sub);
font-weight: 600;
font-size: 0.8rem;
color: var(--rst-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Custom select */
.rst-select {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius);
font-family: var(--rst-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--rst-text);
background-color: var(--rst-bg);
outline: none;
transition: var(--rst-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='%23D4AF37' 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;
}
.rst-select:focus {
border-color: var(--rst-primary);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
/* ── Badges ───────────────────── */
.rst-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--rst-radius-pill);
font-family: var(--rst-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.rst-badge-primary { background-color: var(--rst-primary-muted); color: var(--rst-primary); border-color: rgba(212, 175, 55, 0.15); }
.rst-badge-accent { background-color: var(--rst-accent-muted); color: var(--rst-text); border-color: var(--rst-accent); }
.rst-badge-default { background-color: var(--rst-surface-2); color: var(--rst-text-muted); border-color: var(--rst-border); }
/* ── Divider ──────────────────── */
.rst-divider { border: none; border-top: 1px solid var(--rst-border); margin: 0; }
/* ── Logo ─────────────────────── */
.rst-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--rst-font-heading);
font-size: 1.65rem;
color: var(--rst-primary);
font-weight: 700;
letter-spacing: 0.05em;
}
.rst-logo-icon {
width: 32px;
height: 32px;
background-color: var(--rst-primary-muted);
border: 1px solid var(--rst-primary);
display: flex;
align-items: center;
justify-content: center;
color: var(--rst-primary);
border-radius: var(--rst-radius);
box-shadow: var(--rst-shadow-glow);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--rst-primary) !important; }
.text-accent { color: var(--rst-accent) !important; }
.text-muted { color: var(--rst-text-muted) !important; }
.text-light { color: var(--rst-text-light) !important; }
/* --- COMPONENT STYLES --- */
.rst-activity-wrapper {
max-width: 720px;
margin: 0 auto;
width: 100%;
}
.rst-activity-header {
margin-bottom: 2rem;
}
.rst-activity-title {
font-family: var(--rst-font-heading);
font-size: 1.65rem;
font-weight: 600;
margin-bottom: 0.35rem;
color: var(--rst-primary);
}
.rst-activity-desc {
font-size: 0.85rem;
color: var(--rst-text-muted);
font-style: italic;
}
/* Timeline Wrapper */
.rst-timeline {
position: relative;
display: flex;
flex-direction: column;
}
.rst-timeline-item {
position: relative;
padding-left: 3rem;
padding-bottom: 2.25rem;
}
.rst-timeline-item:last-child {
padding-bottom: 0;
}
/* Bulletproof vertical connector line */
.rst-timeline-item::before {
content: '';
position: absolute;
left: 1rem;
top: 2rem;
bottom: 0;
width: 1px;
background: linear-gradient(to bottom, var(--rst-primary), var(--rst-border));
}
.rst-timeline-item:last-child::before {
display: none;
}
/* Icons */
.rst-timeline-icon {
position: absolute;
left: 0;
top: 0;
width: 32px;
height: 32px;
border-radius: var(--rst-radius-pill);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.rst-timeline-icon svg {
width: 14px;
height: 14px;
}
.rst-timeline-gold {
background-color: var(--rst-primary-muted);
color: var(--rst-primary);
border: 1px solid rgba(212, 175, 55, 0.3);
}
.rst-timeline-muted {
background-color: var(--rst-surface-2);
color: var(--rst-text-muted);
border: 1px solid var(--rst-border);
}
/* Contents */
.rst-timeline-content {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.rst-timeline-meta {
font-size: 0.8rem;
color: var(--rst-text-muted);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.rst-activity-user {
font-family: var(--rst-font-sub);
font-weight: 700;
color: var(--rst-text);
}
.rst-activity-action {
color: var(--rst-text-light);
font-weight: 500;
font-style: italic;
}
.rst-activity-timestamp {
font-family: var(--rst-font-sub);
font-weight: 700;
font-size: 0.7rem;
color: var(--rst-primary);
background-color: var(--rst-primary-muted);
padding: 0.15rem 0.45rem;
border-radius: var(--rst-radius-sm);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.rst-activity-time {
color: var(--rst-text-light);
font-size: 0.725rem;
margin-left: auto;
font-weight: 600;
}
.rst-timeline-text {
font-size: 0.85rem;
color: var(--rst-text-muted);
line-height: 1.55;
background-color: var(--rst-surface-2);
border: 1px solid var(--rst-border);
padding: 1rem 1.25rem;
border-radius: var(--rst-radius-lg);
margin: 0;
}
.rst-timeline-text strong {
color: var(--rst-text);
font-weight: 700;
}
@media (max-width: 576px) {
.rst-activity-time {
margin-left: 0;
width: 100%;
}
}
Modals
Table Reservation Payment Modal
HTML
<div class="rst-modal-overlay">
<div class="rst-modal-card">
<!-- Close Button -->
<button class="rst-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="rst-modal-body">
<!-- Icon Badge -->
<div class="rst-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="rst-modal-tag">Secure Reservation Confirmation</span>
<h2 class="rst-modal-title">Confirm Your Table</h2>
<p class="rst-modal-desc">
Review your reservation details below. Your Diner Club membership grants complimentary amuse-bouche and a personalised welcome from Chef Laurent.
</p>
<!-- Reservation summary box -->
<div class="rst-plan-box">
<div class="rst-plan-details">
<span class="rst-plan-name">The Grand Salon</span>
<span class="rst-plan-desc">June 15, 2026 • 7:30 PM • 2 Guests</span>
</div>
<div class="rst-plan-price-block">
<span class="rst-plan-price">$490</span>
<span class="rst-plan-fees">Deposit Required</span>
</div>
</div>
<!-- Course tier selected -->
<div class="rst-plan-tier-row">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="rst-tier-icon"><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 class="rst-tier-label">Grand Degustation — 9 Courses + Sommelier Wine Flight</span>
</div>
<div class="rst-modal-actions">
<button class="rst-btn rst-btn-primary rst-btn-block">
Confirm & Secure Table
</button>
<button class="rst-btn rst-btn-outline rst-btn-block">
Modify Reservation Details
</button>
</div>
<a href="#" class="rst-modal-cancel">Cancel and Return</a>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Table Reservation Payment Modal */
/* NOTE: This component requires base.css to be included in your page. */
.rst-modal-overlay {
width: 100%;
max-width: 500px;
margin: 0 auto;
background-color: var(--rst-surface);
border: 1px solid var(--rst-border-strong);
border-radius: var(--rst-radius-lg);
box-shadow: var(--rst-shadow);
position: relative;
overflow: hidden;
}
.rst-modal-card {
padding: 3rem 2.5rem;
}
.rst-modal-close {
position: absolute;
top: 1.25rem;
right: 1.25rem;
background: none;
border: none;
cursor: pointer;
color: var(--rst-text-light);
display: flex;
align-items: center;
justify-content: center;
padding: 0.35rem;
border-radius: var(--rst-radius);
transition: var(--rst-transition);
}
.rst-modal-close:hover {
background-color: var(--rst-surface-2);
color: var(--rst-text);
}
.rst-modal-close svg {
width: 18px;
height: 18px;
}
.rst-modal-body {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.25rem;
}
.rst-modal-badge-wrapper {
width: 56px;
height: 56px;
border-radius: var(--rst-radius-pill);
background-color: var(--rst-primary-muted);
color: var(--rst-primary);
border: 1px solid rgba(212, 175, 55, 0.2);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
box-shadow: 0 0 30px rgba(212, 175, 55, 0.08);
}
.rst-modal-badge-wrapper svg {
width: 24px;
height: 24px;
}
.rst-modal-tag {
font-family: var(--rst-font-sub);
font-size: 0.75rem;
font-weight: 700;
color: var(--rst-primary);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.rst-modal-title {
font-family: var(--rst-font-heading);
font-size: 2.25rem;
font-weight: 600;
line-height: 1.2;
margin: 0;
color: var(--rst-primary);
}
.rst-modal-desc {
font-size: 0.85rem;
color: var(--rst-text-muted);
line-height: 1.6;
margin: 0;
}
/* Reservation summary box */
.rst-plan-box {
width: 100%;
background-color: var(--rst-surface-2);
border: 1px solid var(--rst-border-strong);
padding: 1.25rem 1.5rem;
border-radius: var(--rst-radius-lg);
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
gap: 1rem;
}
.rst-plan-details {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.rst-plan-name {
font-family: var(--rst-font-heading);
font-size: 1.25rem;
font-weight: 600;
color: var(--rst-text);
}
.rst-plan-desc {
font-size: 0.75rem;
color: var(--rst-text-light);
font-weight: 500;
}
.rst-plan-price-block {
display: flex;
flex-direction: column;
align-items: flex-end;
flex-shrink: 0;
}
.rst-plan-price {
font-family: var(--rst-font-sub);
font-size: 1.5rem;
font-weight: 800;
color: var(--rst-primary);
}
.rst-plan-fees {
font-size: 0.65rem;
color: var(--rst-text-light);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Course tier row */
.rst-plan-tier-row {
width: 100%;
display: flex;
align-items: center;
gap: 0.65rem;
background-color: var(--rst-primary-muted);
border: 1px solid rgba(212, 175, 55, 0.15);
border-radius: var(--rst-radius);
padding: 0.75rem 1rem;
text-align: left;
}
.rst-tier-icon {
width: 16px;
height: 16px;
color: var(--rst-primary);
flex-shrink: 0;
}
.rst-tier-label {
font-family: var(--rst-font-sub);
font-size: 0.8rem;
font-weight: 600;
color: var(--rst-primary);
}
/* Actions */
.rst-modal-actions {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-top: 0.5rem;
}
.rst-modal-cancel {
font-size: 0.8rem;
font-weight: 600;
color: var(--rst-text-light);
text-decoration: none;
transition: var(--rst-transition);
}
.rst-modal-cancel:hover {
color: var(--rst-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=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================
Restaurant Fine Dining Design System (rst-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Warm dark velvet background */
--rst-bg: #0B0A09; /* Obsidian Velvet */
--rst-surface: #141210; /* Dark Ebony */
--rst-surface-2: #1D1A17; /* Muted Gold Slate */
/* Premium Palette */
--rst-primary: #D4AF37; /* Champagne Gold */
--rst-primary-hover: #C59B27;
--rst-primary-muted: rgba(212, 175, 55, 0.08);
--rst-accent: #8B0000; /* Deep Wine Crimson */
--rst-accent-hover: #700000;
--rst-accent-muted: rgba(139, 0, 0, 0.15);
--rst-gold: #E6C65A;
/* Text warm shades */
--rst-text: #F5F5F4; /* Warm Ivory */
--rst-text-muted: #A8A29E; /* Stone Gray */
--rst-text-light: #78716C;
/* Borders */
--rst-border: #2D2924; /* Gilded Border */
--rst-border-strong: #443E37;
--rst-border-glow: rgba(212, 175, 55, 0.15);
/* Rounded Shapes */
--rst-radius-sm: 4px;
--rst-radius: 8px;
--rst-radius-lg: 16px;
--rst-radius-pill: 999px;
/* Fonts */
--rst-font-heading: 'Cormorant Garamond', serif;
--rst-font-sub: 'Outfit', sans-serif;
--rst-font-body: 'Outfit', sans-serif;
/* Shadows */
--rst-shadow-sm: 0 2px 10px rgba(0,0,0,0.4);
--rst-shadow: 0 15px 40px rgba(0,0,0,0.6);
--rst-shadow-glow: 0 0 25px rgba(212, 175, 55, 0.06);
/* Transition */
--rst-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--rst-font-body);
color: var(--rst-text);
background-color: var(--rst-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.rst-card {
background-color: var(--rst-surface);
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius-lg);
box-shadow: var(--rst-shadow);
padding: 2.25rem;
transition: var(--rst-transition);
}
.rst-card:hover {
border-color: var(--rst-primary);
box-shadow: 0 12px 45px rgba(212, 175, 55, 0.04);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--rst-font-heading);
font-weight: 600;
margin: 0;
color: var(--rst-text);
line-height: 1.25;
}
p {
font-family: var(--rst-font-body);
color: var(--rst-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.rst-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.6rem;
font-family: var(--rst-font-sub);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--rst-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--rst-transition);
white-space: nowrap;
user-select: none;
}
.rst-btn-primary {
background-color: var(--rst-primary);
color: #0B0A09;
border-color: var(--rst-primary);
}
.rst-btn-primary:hover {
background-color: var(--rst-primary-hover);
border-color: var(--rst-primary-hover);
transform: translateY(-1px);
}
.rst-btn-accent {
background-color: var(--rst-accent);
color: #fff;
border-color: var(--rst-accent);
}
.rst-btn-accent:hover {
background-color: var(--rst-accent-hover);
border-color: var(--rst-accent-hover);
transform: translateY(-1px);
}
.rst-btn-outline {
background-color: transparent;
color: var(--rst-primary);
border-color: var(--rst-border-strong);
}
.rst-btn-outline:hover {
background-color: var(--rst-primary-muted);
border-color: var(--rst-primary);
color: var(--rst-text);
}
.rst-btn-ghost {
background-color: transparent;
color: var(--rst-text-muted);
border-color: transparent;
}
.rst-btn-ghost:hover {
background-color: var(--rst-surface-2);
color: var(--rst-text);
}
.rst-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.8rem; }
.rst-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--rst-radius-lg); }
.rst-btn-block { width: 100%; }
.rst-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--rst-radius); }
/* ── Form Controls ────────────── */
.rst-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius);
font-family: var(--rst-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--rst-text);
background-color: var(--rst-bg);
outline: none;
transition: var(--rst-transition);
}
.rst-input::placeholder { color: var(--rst-text-light); }
.rst-input:focus {
border-color: var(--rst-primary);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.rst-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--rst-font-sub);
font-weight: 600;
font-size: 0.8rem;
color: var(--rst-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Custom select */
.rst-select {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--rst-border);
border-radius: var(--rst-radius);
font-family: var(--rst-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--rst-text);
background-color: var(--rst-bg);
outline: none;
transition: var(--rst-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='%23D4AF37' 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;
}
.rst-select:focus {
border-color: var(--rst-primary);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
/* ── Badges ───────────────────── */
.rst-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--rst-radius-pill);
font-family: var(--rst-font-sub);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.rst-badge-primary { background-color: var(--rst-primary-muted); color: var(--rst-primary); border-color: rgba(212, 175, 55, 0.15); }
.rst-badge-accent { background-color: var(--rst-accent-muted); color: var(--rst-text); border-color: var(--rst-accent); }
.rst-badge-default { background-color: var(--rst-surface-2); color: var(--rst-text-muted); border-color: var(--rst-border); }
/* ── Divider ──────────────────── */
.rst-divider { border: none; border-top: 1px solid var(--rst-border); margin: 0; }
/* ── Logo ─────────────────────── */
.rst-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--rst-font-heading);
font-size: 1.65rem;
color: var(--rst-primary);
font-weight: 700;
letter-spacing: 0.05em;
}
.rst-logo-icon {
width: 32px;
height: 32px;
background-color: var(--rst-primary-muted);
border: 1px solid var(--rst-primary);
display: flex;
align-items: center;
justify-content: center;
color: var(--rst-primary);
border-radius: var(--rst-radius);
box-shadow: var(--rst-shadow-glow);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--rst-primary) !important; }
.text-accent { color: var(--rst-accent) !important; }
.text-muted { color: var(--rst-text-muted) !important; }
.text-light { color: var(--rst-text-light) !important; }
/* --- COMPONENT STYLES --- */
.rst-modal-overlay {
width: 100%;
max-width: 500px;
margin: 0 auto;
background-color: var(--rst-surface);
border: 1px solid var(--rst-border-strong);
border-radius: var(--rst-radius-lg);
box-shadow: var(--rst-shadow);
position: relative;
overflow: hidden;
}
.rst-modal-card {
padding: 3rem 2.5rem;
}
.rst-modal-close {
position: absolute;
top: 1.25rem;
right: 1.25rem;
background: none;
border: none;
cursor: pointer;
color: var(--rst-text-light);
display: flex;
align-items: center;
justify-content: center;
padding: 0.35rem;
border-radius: var(--rst-radius);
transition: var(--rst-transition);
}
.rst-modal-close:hover {
background-color: var(--rst-surface-2);
color: var(--rst-text);
}
.rst-modal-close svg {
width: 18px;
height: 18px;
}
.rst-modal-body {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.25rem;
}
.rst-modal-badge-wrapper {
width: 56px;
height: 56px;
border-radius: var(--rst-radius-pill);
background-color: var(--rst-primary-muted);
color: var(--rst-primary);
border: 1px solid rgba(212, 175, 55, 0.2);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
box-shadow: 0 0 30px rgba(212, 175, 55, 0.08);
}
.rst-modal-badge-wrapper svg {
width: 24px;
height: 24px;
}
.rst-modal-tag {
font-family: var(--rst-font-sub);
font-size: 0.75rem;
font-weight: 700;
color: var(--rst-primary);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.rst-modal-title {
font-family: var(--rst-font-heading);
font-size: 2.25rem;
font-weight: 600;
line-height: 1.2;
margin: 0;
color: var(--rst-primary);
}
.rst-modal-desc {
font-size: 0.85rem;
color: var(--rst-text-muted);
line-height: 1.6;
margin: 0;
}
/* Reservation summary box */
.rst-plan-box {
width: 100%;
background-color: var(--rst-surface-2);
border: 1px solid var(--rst-border-strong);
padding: 1.25rem 1.5rem;
border-radius: var(--rst-radius-lg);
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
gap: 1rem;
}
.rst-plan-details {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.rst-plan-name {
font-family: var(--rst-font-heading);
font-size: 1.25rem;
font-weight: 600;
color: var(--rst-text);
}
.rst-plan-desc {
font-size: 0.75rem;
color: var(--rst-text-light);
font-weight: 500;
}
.rst-plan-price-block {
display: flex;
flex-direction: column;
align-items: flex-end;
flex-shrink: 0;
}
.rst-plan-price {
font-family: var(--rst-font-sub);
font-size: 1.5rem;
font-weight: 800;
color: var(--rst-primary);
}
.rst-plan-fees {
font-size: 0.65rem;
color: var(--rst-text-light);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Course tier row */
.rst-plan-tier-row {
width: 100%;
display: flex;
align-items: center;
gap: 0.65rem;
background-color: var(--rst-primary-muted);
border: 1px solid rgba(212, 175, 55, 0.15);
border-radius: var(--rst-radius);
padding: 0.75rem 1rem;
text-align: left;
}
.rst-tier-icon {
width: 16px;
height: 16px;
color: var(--rst-primary);
flex-shrink: 0;
}
.rst-tier-label {
font-family: var(--rst-font-sub);
font-size: 0.8rem;
font-weight: 600;
color: var(--rst-primary);
}
/* Actions */
.rst-modal-actions {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-top: 0.5rem;
}
.rst-modal-cancel {
font-size: 0.8rem;
font-weight: 600;
color: var(--rst-text-light);
text-decoration: none;
transition: var(--rst-transition);
}
.rst-modal-cancel:hover {
color: var(--rst-text-muted);
text-decoration: underline;
}