Earth Tone - Free HTML/CSS UI Kit
A sophisticated, tactile UI Kit featuring warm desert sands, rich terracotta clay, deep olive greens, and premium timeless typography for luxury retail storefronts.
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
Desert Terracotta
#C2410C
Olive Grove
#3E4A24
Earthy Ochre
#D97706
Desert Sand
#FDFBF7
Basalt Charcoal
#1C1917
Typography
Hero Sections
Promo Banner Hero
HTML
<div class="et-promo-hero et-card">
<div class="et-promo-badge">
<span class="et-badge et-badge-sale">ARCHIVAL GOODS</span>
<span class="et-promo-discount">Hand-thrown stoneware from the high desert.</span>
</div>
<h1 class="et-promo-title">Warmth for the Timeless Home</h1>
<p class="et-promo-desc">Our latest collection of textured sandstone vases, raw linen throws, and cold-pressed apothecary oil. Ethically made to last generations.</p>
<div class="et-promo-actions">
<button class="et-btn et-btn-accent et-btn-lg">Shop The Archive</button>
<button class="et-btn et-btn-outline et-btn-lg">Our Story</button>
</div>
<!-- Trust signals below -->
<div class="et-hero-trust">
<div class="et-trust-item">
<span>🏺 Hand-thrown Stoneware</span>
</div>
<div class="et-trust-item">
<span>🌿 Naturally Dyed Fibers</span>
</div>
<div class="et-trust-item">
<span>📦 Carbon Neutral Fulfillment</span>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Promo Banner Hero */
/* NOTE: This component requires base.css to be included in your page. */
.et-promo-hero {
max-width: 1100px;
margin: 0 auto;
padding: 5rem 3rem !important;
text-align: center;
background: linear-gradient(135deg, #FDFBF7 0%, var(--et-primary-muted) 100%);
display: flex;
flex-direction: column;
align-items: center;
gap: 1.75rem;
position: relative;
overflow: hidden;
}
.et-promo-hero::before {
content: '';
position: absolute;
top: -40%;
left: -30%;
width: 250px;
height: 250px;
background: radial-gradient(circle, rgba(194,65,12,0.06) 0%, transparent 75%);
pointer-events: none;
}
.et-promo-badge {
display: flex;
align-items: center;
gap: 0.85rem;
flex-wrap: wrap;
justify-content: center;
}
.et-promo-discount {
font-family: var(--et-font-body);
font-size: 0.95rem;
font-weight: 700;
color: var(--et-primary-hover);
}
.et-promo-title {
font-size: 3.5rem;
max-width: 800px;
letter-spacing: -0.01em;
color: var(--et-text);
}
.et-promo-desc {
font-size: 1.15rem;
max-width: 680px;
color: var(--et-text-muted);
line-height: 1.7;
}
.et-promo-actions {
display: flex;
gap: 0.85rem;
justify-content: center;
flex-wrap: wrap;
}
.et-hero-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 2.5rem;
margin-top: 1.5rem;
border-top: 1px solid var(--et-border);
padding-top: 2rem;
width: 100%;
flex-wrap: wrap;
}
.et-trust-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--et-font-body);
font-size: 0.82rem;
font-weight: 700;
color: var(--et-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
@media (max-width: 768px) {
.et-promo-title { font-size: 2.35rem; }
.et-promo-hero { padding: 3.5rem 1.5rem !important; }
.et-hero-trust { gap: 1rem; }
}
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=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* ===========================
Earth Tone Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--et-bg: #FDFBF7;
--et-surface: #FFFFFF;
--et-surface-2: #F7F4EE;
--et-surface-dark: #1C1917;
/* Brand Palette */
--et-primary: #C2410C;
--et-primary-hover: #9A3412;
--et-primary-muted: #FFECE3;
--et-accent: #3E4A24;
--et-accent-hover: #2D361A;
--et-accent-muted: #F0F3E8;
--et-success: #3E4A24;
--et-success-muted: #EBF0DE;
--et-danger: #991B1B;
--et-danger-muted: #FEE2E2;
--et-gold: #C2410C;
--et-gold-muted: #FFF5F0;
/* Text */
--et-text: #1C1917;
--et-text-muted: #6E6760;
--et-text-light: #A39C94;
/* Borders */
--et-border: #E7E3DC;
--et-border-strong: #CDC6BD;
/* Tactile Radius Shapes */
--et-radius-sm: 2px;
--et-radius: 4px;
--et-radius-lg: 6px;
--et-radius-pill: 100px;
/* Fonts */
--et-font-heading: 'Playfair Display', serif;
--et-font-body: 'Plus Jakarta Sans', sans-serif;
/* Shadows */
--et-shadow-sm: 0 2px 8px rgba(28,25,23,0.02);
--et-shadow: 0 8px 24px rgba(28,25,23,0.04);
--et-shadow-lg: 0 16px 40px rgba(28,25,23,0.06);
/* Transition */
--et-transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body {
margin: 0;
font-family: var(--et-font-body);
color: var(--et-text);
background-color: var(--et-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.et-card {
background-color: var(--et-surface);
border: 1px solid var(--et-border);
border-radius: var(--et-radius);
box-shadow: var(--et-shadow-sm);
padding: 2rem;
transition: var(--et-transition);
}
.et-card:hover {
box-shadow: var(--et-shadow);
border-color: var(--et-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--et-font-heading);
font-weight: 400;
margin: 0;
color: var(--et-text);
line-height: 1.2;
}
p { font-family: var(--et-font-body); color: var(--et-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.et-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--et-font-body);
font-size: 0.85rem;
font-weight: 700;
border-radius: var(--et-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--et-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.et-btn-primary { background-color: var(--et-primary); color: #fff; border-color: var(--et-primary); }
.et-btn-primary:hover { background-color: var(--et-primary-hover); border-color: var(--et-primary-hover); transform: translateY(-1px); }
.et-btn-accent { background-color: var(--et-accent); color: #fff; border-color: var(--et-accent); }
.et-btn-accent:hover { background-color: var(--et-accent-hover); border-color: var(--et-accent-hover); transform: translateY(-1px); }
.et-btn-outline { background-color: transparent; color: var(--et-text); border-color: var(--et-text); }
.et-btn-outline:hover { background-color: var(--et-surface-2); transform: translateY(-1px); }
.et-btn-ghost { background-color: transparent; color: var(--et-text-muted); border-color: transparent; }
.et-btn-ghost:hover { background-color: var(--et-surface-2); color: var(--et-text); }
.et-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.75rem; }
.et-btn-lg { padding: 0.9rem 2rem; font-size: 0.9rem; }
.et-btn-block { width: 100%; }
.et-btn-icon { width: 42px; height: 42px; padding: 0; }
/* ── Form Controls ────────────── */
.et-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--et-border);
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--et-text);
background-color: var(--et-surface);
outline: none;
transition: var(--et-transition);
}
.et-input::placeholder { color: var(--et-text-light); }
.et-input:focus { border-color: var(--et-primary); background-color: #FAF9F6; }
.et-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--et-font-body);
font-weight: 700;
font-size: 0.8rem;
color: var(--et-text);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.et-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--et-border);
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--et-text);
background-color: var(--et-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6760' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--et-transition);
}
.et-select:focus { border-color: var(--et-primary); }
/* ── Badges ───────────────────── */
.et-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.et-badge-sale { background-color: var(--et-primary-muted); color: var(--et-primary); }
.et-badge-new { background-color: var(--et-accent-muted); color: var(--et-accent); }
.et-badge-success { background-color: var(--et-success-muted); color: var(--et-success); }
.et-badge-danger { background-color: var(--et-danger-muted); color: var(--et-danger); }
.et-badge-default { background-color: var(--et-surface-2); color: var(--et-text-muted); }
/* ── Star Rating ──────────────── */
.et-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--et-primary);
font-size: 0.8rem;
}
.et-stars-count {
font-family: var(--et-font-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--et-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.et-price {
font-family: var(--et-font-body);
font-size: 1.25rem;
font-weight: 700;
color: var(--et-text);
}
.et-price-original {
font-family: var(--et-font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--et-text-light);
text-decoration: line-through;
}
.et-price-sale { color: var(--et-primary); }
/* ── Toggle Slider ────────────── */
.et-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.et-toggle input { opacity: 0; width: 0; height: 0; }
.et-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--et-border-strong); border-radius: 24px; transition: var(--et-transition); }
.et-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--et-transition); }
.et-toggle input:checked + .et-toggle-slider { background-color: var(--et-accent); }
.et-toggle input:checked + .et-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.et-divider { border: none; border-top: 1px solid var(--et-border); margin: 0; }
/* ── Logo ─────────────────────── */
.et-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--et-font-heading);
font-size: 1.4rem;
color: var(--et-text);
font-weight: 700;
}
.et-logo-icon {
width: 34px;
height: 34px;
background-color: var(--et-accent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 1rem;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--et-primary) !important; }
.text-accent { color: var(--et-accent) !important; }
.text-success { color: var(--et-success) !important; }
.text-danger { color: var(--et-danger) !important; }
.text-muted { color: var(--et-text-muted) !important; }
.text-light { color: var(--et-text-light) !important; }
.et-link-sm {
font-family: var(--et-font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--et-primary);
text-decoration: none;
transition: var(--et-transition);
}
.et-link-sm:hover {
color: var(--et-primary-hover);
}
/* --- COMPONENT STYLES --- */
.et-promo-hero {
max-width: 1100px;
margin: 0 auto;
padding: 5rem 3rem !important;
text-align: center;
background: linear-gradient(135deg, #FDFBF7 0%, var(--et-primary-muted) 100%);
display: flex;
flex-direction: column;
align-items: center;
gap: 1.75rem;
position: relative;
overflow: hidden;
}
.et-promo-hero::before {
content: '';
position: absolute;
top: -40%;
left: -30%;
width: 250px;
height: 250px;
background: radial-gradient(circle, rgba(194,65,12,0.06) 0%, transparent 75%);
pointer-events: none;
}
.et-promo-badge {
display: flex;
align-items: center;
gap: 0.85rem;
flex-wrap: wrap;
justify-content: center;
}
.et-promo-discount {
font-family: var(--et-font-body);
font-size: 0.95rem;
font-weight: 700;
color: var(--et-primary-hover);
}
.et-promo-title {
font-size: 3.5rem;
max-width: 800px;
letter-spacing: -0.01em;
color: var(--et-text);
}
.et-promo-desc {
font-size: 1.15rem;
max-width: 680px;
color: var(--et-text-muted);
line-height: 1.7;
}
.et-promo-actions {
display: flex;
gap: 0.85rem;
justify-content: center;
flex-wrap: wrap;
}
.et-hero-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 2.5rem;
margin-top: 1.5rem;
border-top: 1px solid var(--et-border);
padding-top: 2rem;
width: 100%;
flex-wrap: wrap;
}
.et-trust-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--et-font-body);
font-size: 0.82rem;
font-weight: 700;
color: var(--et-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
@media (max-width: 768px) {
.et-promo-title { font-size: 2.35rem; }
.et-promo-hero { padding: 3.5rem 1.5rem !important; }
.et-hero-trust { gap: 1rem; }
}
Product Feature Split
HTML
<div class="et-split-hero">
<div class="et-split-main et-card">
<span class="et-badge et-badge-new">Rare Harvest</span>
<h1 class="et-split-title">Ochre Clay Water Amphora</h1>
<p class="et-split-desc">Hand-sculpted in Spain from premium ochre riverbed clay. Designed to naturally cool liquids through porous vaporization while providing an organic centerpiece.</p>
<!-- Product highlights -->
<ul class="et-split-features">
<li>
<span class="et-feat-icon">🏺</span>
<div>
<strong>Porous Sandstone</strong>
<p>Allows natural vaporization to keep liquids perfectly chilled.</p>
</div>
</li>
<li>
<span class="et-feat-icon">✨</span>
<div>
<strong>Natural Mineral Glaze</strong>
<p>Lead-free protective wash utilizing organic plant ashes.</p>
</div>
</li>
</ul>
<div class="et-split-actions-row">
<div class="et-split-price-box">
<span class="et-price et-price-sale">$185.00</span>
<span class="et-price-original">$240.00</span>
</div>
<button class="et-btn et-btn-accent et-btn-lg">Reserve Amphora</button>
<button class="et-btn et-btn-outline et-btn-lg">Batch Registry</button>
</div>
</div>
<!-- Right Side: Product widget -->
<div class="et-split-sidebar">
<div class="et-preview-widget et-card">
<div class="et-widget-image-block">
<span class="et-badge et-badge-new og-widget-badge">1 of 50</span>
<div class="et-widget-bot-icon">🏺</div>
<div class="et-widget-shades">
<div class="et-shade-one"></div>
<div class="et-shade-two"></div>
</div>
</div>
<div class="et-widget-info">
<div class="et-stars">
⭐⭐⭐⭐⭐
<span class="et-stars-count">(89 collectors)</span>
</div>
<h4 class="et-widget-title">Ochre Clay Amphora (4L)</h4>
<div class="et-widget-stock">
<span class="et-stock-dot"></span>
<span>Numbered archive edition</span>
</div>
</div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Product Feature Split */
/* NOTE: This component requires base.css to be included in your page. */
.et-split-hero {
display: grid;
grid-template-columns: 1fr 340px;
gap: 1.75rem;
max-width: 1100px;
margin: 0 auto;
align-items: start;
}
.et-split-main {
padding: 3rem !important;
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: flex-start;
}
.et-split-title {
font-size: 2.85rem;
letter-spacing: -0.01em;
line-height: 1.15;
}
.et-split-desc {
font-size: 1.05rem;
color: var(--et-text-muted);
line-height: 1.7;
}
/* Features */
.et-split-features {
list-style: none;
padding: 0;
margin: 0.5rem 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.et-split-features li {
display: flex;
align-items: flex-start;
gap: 0.85rem;
}
.et-feat-icon {
font-size: 1.25rem;
width: 38px;
height: 38px;
background-color: var(--et-surface-2);
border-radius: var(--et-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.et-split-features strong {
font-family: var(--et-font-body);
font-size: 0.95rem;
font-weight: 700;
color: var(--et-text);
}
.et-split-features p {
font-size: 0.85rem;
color: var(--et-text-muted);
margin-top: 0.1rem;
}
.et-split-actions-row {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
flex-wrap: wrap;
border-top: 1px solid var(--et-border);
padding-top: 1.5rem;
margin-top: 0.5rem;
}
.et-split-price-box {
display: flex;
flex-direction: column;
margin-right: auto;
}
/* Sidebar Product Widget */
.et-preview-widget {
padding: 0 !important;
overflow: hidden;
}
.et-widget-image-block {
height: 270px;
background: linear-gradient(135deg, var(--et-primary-muted), #FDFBF7);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.et-widget-bot-icon {
font-size: 5rem;
z-index: 2;
transition: var(--et-transition);
}
.et-preview-widget:hover .et-widget-bot-icon {
transform: scale(1.08) rotate(4deg);
}
.et-widget-shades {
position: absolute;
inset: 0;
pointer-events: none;
}
.et-shade-one {
position: absolute;
bottom: -10%;
right: -10%;
width: 160px;
height: 160px;
background: rgba(194,65,12,0.06);
border-radius: 50%;
}
.et-shade-two {
position: absolute;
top: -10%;
left: -10%;
width: 130px;
height: 130px;
background: rgba(62,74,36,0.05);
border-radius: 50%;
}
.et-widget-info {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.et-widget-title {
font-size: 1.05rem;
font-weight: 700;
}
.et-widget-stock {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
font-weight: 700;
color: var(--et-accent);
}
.et-stock-dot {
width: 6px;
height: 6px;
background-color: var(--et-accent);
border-radius: 50%;
}
@media (max-width: 900px) {
.et-split-hero { grid-template-columns: 1fr; }
.et-split-main { padding: 2rem !important; }
}
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=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* ===========================
Earth Tone Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--et-bg: #FDFBF7;
--et-surface: #FFFFFF;
--et-surface-2: #F7F4EE;
--et-surface-dark: #1C1917;
/* Brand Palette */
--et-primary: #C2410C;
--et-primary-hover: #9A3412;
--et-primary-muted: #FFECE3;
--et-accent: #3E4A24;
--et-accent-hover: #2D361A;
--et-accent-muted: #F0F3E8;
--et-success: #3E4A24;
--et-success-muted: #EBF0DE;
--et-danger: #991B1B;
--et-danger-muted: #FEE2E2;
--et-gold: #C2410C;
--et-gold-muted: #FFF5F0;
/* Text */
--et-text: #1C1917;
--et-text-muted: #6E6760;
--et-text-light: #A39C94;
/* Borders */
--et-border: #E7E3DC;
--et-border-strong: #CDC6BD;
/* Tactile Radius Shapes */
--et-radius-sm: 2px;
--et-radius: 4px;
--et-radius-lg: 6px;
--et-radius-pill: 100px;
/* Fonts */
--et-font-heading: 'Playfair Display', serif;
--et-font-body: 'Plus Jakarta Sans', sans-serif;
/* Shadows */
--et-shadow-sm: 0 2px 8px rgba(28,25,23,0.02);
--et-shadow: 0 8px 24px rgba(28,25,23,0.04);
--et-shadow-lg: 0 16px 40px rgba(28,25,23,0.06);
/* Transition */
--et-transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body {
margin: 0;
font-family: var(--et-font-body);
color: var(--et-text);
background-color: var(--et-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.et-card {
background-color: var(--et-surface);
border: 1px solid var(--et-border);
border-radius: var(--et-radius);
box-shadow: var(--et-shadow-sm);
padding: 2rem;
transition: var(--et-transition);
}
.et-card:hover {
box-shadow: var(--et-shadow);
border-color: var(--et-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--et-font-heading);
font-weight: 400;
margin: 0;
color: var(--et-text);
line-height: 1.2;
}
p { font-family: var(--et-font-body); color: var(--et-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.et-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--et-font-body);
font-size: 0.85rem;
font-weight: 700;
border-radius: var(--et-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--et-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.et-btn-primary { background-color: var(--et-primary); color: #fff; border-color: var(--et-primary); }
.et-btn-primary:hover { background-color: var(--et-primary-hover); border-color: var(--et-primary-hover); transform: translateY(-1px); }
.et-btn-accent { background-color: var(--et-accent); color: #fff; border-color: var(--et-accent); }
.et-btn-accent:hover { background-color: var(--et-accent-hover); border-color: var(--et-accent-hover); transform: translateY(-1px); }
.et-btn-outline { background-color: transparent; color: var(--et-text); border-color: var(--et-text); }
.et-btn-outline:hover { background-color: var(--et-surface-2); transform: translateY(-1px); }
.et-btn-ghost { background-color: transparent; color: var(--et-text-muted); border-color: transparent; }
.et-btn-ghost:hover { background-color: var(--et-surface-2); color: var(--et-text); }
.et-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.75rem; }
.et-btn-lg { padding: 0.9rem 2rem; font-size: 0.9rem; }
.et-btn-block { width: 100%; }
.et-btn-icon { width: 42px; height: 42px; padding: 0; }
/* ── Form Controls ────────────── */
.et-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--et-border);
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--et-text);
background-color: var(--et-surface);
outline: none;
transition: var(--et-transition);
}
.et-input::placeholder { color: var(--et-text-light); }
.et-input:focus { border-color: var(--et-primary); background-color: #FAF9F6; }
.et-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--et-font-body);
font-weight: 700;
font-size: 0.8rem;
color: var(--et-text);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.et-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--et-border);
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--et-text);
background-color: var(--et-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6760' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--et-transition);
}
.et-select:focus { border-color: var(--et-primary); }
/* ── Badges ───────────────────── */
.et-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.et-badge-sale { background-color: var(--et-primary-muted); color: var(--et-primary); }
.et-badge-new { background-color: var(--et-accent-muted); color: var(--et-accent); }
.et-badge-success { background-color: var(--et-success-muted); color: var(--et-success); }
.et-badge-danger { background-color: var(--et-danger-muted); color: var(--et-danger); }
.et-badge-default { background-color: var(--et-surface-2); color: var(--et-text-muted); }
/* ── Star Rating ──────────────── */
.et-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--et-primary);
font-size: 0.8rem;
}
.et-stars-count {
font-family: var(--et-font-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--et-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.et-price {
font-family: var(--et-font-body);
font-size: 1.25rem;
font-weight: 700;
color: var(--et-text);
}
.et-price-original {
font-family: var(--et-font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--et-text-light);
text-decoration: line-through;
}
.et-price-sale { color: var(--et-primary); }
/* ── Toggle Slider ────────────── */
.et-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.et-toggle input { opacity: 0; width: 0; height: 0; }
.et-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--et-border-strong); border-radius: 24px; transition: var(--et-transition); }
.et-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--et-transition); }
.et-toggle input:checked + .et-toggle-slider { background-color: var(--et-accent); }
.et-toggle input:checked + .et-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.et-divider { border: none; border-top: 1px solid var(--et-border); margin: 0; }
/* ── Logo ─────────────────────── */
.et-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--et-font-heading);
font-size: 1.4rem;
color: var(--et-text);
font-weight: 700;
}
.et-logo-icon {
width: 34px;
height: 34px;
background-color: var(--et-accent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 1rem;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--et-primary) !important; }
.text-accent { color: var(--et-accent) !important; }
.text-success { color: var(--et-success) !important; }
.text-danger { color: var(--et-danger) !important; }
.text-muted { color: var(--et-text-muted) !important; }
.text-light { color: var(--et-text-light) !important; }
.et-link-sm {
font-family: var(--et-font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--et-primary);
text-decoration: none;
transition: var(--et-transition);
}
.et-link-sm:hover {
color: var(--et-primary-hover);
}
/* --- COMPONENT STYLES --- */
.et-split-hero {
display: grid;
grid-template-columns: 1fr 340px;
gap: 1.75rem;
max-width: 1100px;
margin: 0 auto;
align-items: start;
}
.et-split-main {
padding: 3rem !important;
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: flex-start;
}
.et-split-title {
font-size: 2.85rem;
letter-spacing: -0.01em;
line-height: 1.15;
}
.et-split-desc {
font-size: 1.05rem;
color: var(--et-text-muted);
line-height: 1.7;
}
/* Features */
.et-split-features {
list-style: none;
padding: 0;
margin: 0.5rem 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.et-split-features li {
display: flex;
align-items: flex-start;
gap: 0.85rem;
}
.et-feat-icon {
font-size: 1.25rem;
width: 38px;
height: 38px;
background-color: var(--et-surface-2);
border-radius: var(--et-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.et-split-features strong {
font-family: var(--et-font-body);
font-size: 0.95rem;
font-weight: 700;
color: var(--et-text);
}
.et-split-features p {
font-size: 0.85rem;
color: var(--et-text-muted);
margin-top: 0.1rem;
}
.et-split-actions-row {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
flex-wrap: wrap;
border-top: 1px solid var(--et-border);
padding-top: 1.5rem;
margin-top: 0.5rem;
}
.et-split-price-box {
display: flex;
flex-direction: column;
margin-right: auto;
}
/* Sidebar Product Widget */
.et-preview-widget {
padding: 0 !important;
overflow: hidden;
}
.et-widget-image-block {
height: 270px;
background: linear-gradient(135deg, var(--et-primary-muted), #FDFBF7);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.et-widget-bot-icon {
font-size: 5rem;
z-index: 2;
transition: var(--et-transition);
}
.et-preview-widget:hover .et-widget-bot-icon {
transform: scale(1.08) rotate(4deg);
}
.et-widget-shades {
position: absolute;
inset: 0;
pointer-events: none;
}
.et-shade-one {
position: absolute;
bottom: -10%;
right: -10%;
width: 160px;
height: 160px;
background: rgba(194,65,12,0.06);
border-radius: 50%;
}
.et-shade-two {
position: absolute;
top: -10%;
left: -10%;
width: 130px;
height: 130px;
background: rgba(62,74,36,0.05);
border-radius: 50%;
}
.et-widget-info {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.et-widget-title {
font-size: 1.05rem;
font-weight: 700;
}
.et-widget-stock {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
font-weight: 700;
color: var(--et-accent);
}
.et-stock-dot {
width: 6px;
height: 6px;
background-color: var(--et-accent);
border-radius: 50%;
}
@media (max-width: 900px) {
.et-split-hero { grid-template-columns: 1fr; }
.et-split-main { padding: 2rem !important; }
}
Forms
Customer Login
HTML
<div class="et-login-wrap">
<div class="et-login-card et-card">
<div class="et-login-brand">
<a href="#" class="et-login-logo">
<div class="et-logo-icon" style="width:28px; height:28px; font-size:0.85rem;">🏺</div>
<span>Terre</span>
</a>
<h2 class="et-login-title">Archival Portal</h2>
<p class="et-login-sub">Access your personal vault and order histories.</p>
</div>
<form class="et-login-form" onsubmit="return false;">
<div class="et-form-group">
<label class="et-label" for="cust-email">Collector Email</label>
<input type="email" id="cust-email" class="et-input" placeholder="[email protected]" value="[email protected]">
</div>
<div class="et-form-group">
<div class="et-label-row">
<label class="et-label" for="cust-pass">Access Code</label>
<a href="#" class="et-link-sm">Recover Code?</a>
</div>
<input type="password" id="cust-pass" class="et-input" placeholder="••••••••••" value="••••••••••">
</div>
<div class="et-login-remember">
<label class="et-checkbox-label">
<input type="checkbox" class="et-checkbox" checked>
<span>Keep me authenticated</span>
</label>
</div>
<button type="submit" class="et-btn et-btn-accent et-btn-block et-btn-lg">Authenticate</button>
</form>
<div class="et-login-divider">
<span>Or Connect With</span>
</div>
<div class="et-social-login">
<button class="et-btn et-btn-outline et-btn-block">
<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="margin-right:0.25rem;"><path d="M12.24 10.285V13.4h6.887C18.2 15.614 15.645 18 12.24 18c-3.86 0-7-3.14-7-7s3.14-7 7-7c1.7 0 3.3.6 4.6 1.8l2.4-2.4C17.3 1.7 14.9 1 12.24 1c-5.5 0-10 4.5-10 10s4.5 10 10 10c5.8 0 9.8-4.1 9.8-10 0-.6 0-1.1-.1-1.7H12.24z"/></svg>
Google Identity
</button>
</div>
<div class="et-login-signup">
<span>New collector?</span> <a href="#" class="et-link-sm">Request Invitation</a>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Customer Login */
/* NOTE: This component requires base.css to be included in your page. */
.et-login-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 560px;
background-color: var(--et-bg);
padding: 2rem;
}
.et-login-card {
width: 100%;
max-width: 420px;
padding: 2.5rem !important;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.et-login-brand {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.et-login-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--et-font-heading);
font-size: 1.15rem;
color: var(--et-text);
}
.et-login-title {
font-size: 1.65rem;
margin-top: 0.25rem;
}
.et-login-sub {
font-size: 0.9rem;
color: var(--et-text-muted);
}
.et-login-form {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.et-form-group {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.et-label-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.et-login-remember {
display: flex;
align-items: center;
}
.et-checkbox-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--et-font-body);
font-size: 0.85rem;
font-weight: 600;
color: var(--et-text-muted);
cursor: pointer;
user-select: none;
}
.et-checkbox {
width: 16px;
height: 16px;
accent-color: var(--et-primary);
cursor: pointer;
}
.et-login-divider {
display: flex;
align-items: center;
text-align: center;
color: var(--et-text-light);
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.et-login-divider::before, .et-login-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid var(--et-border);
}
.et-login-divider:not(:empty)::before { margin-right: .75em; }
.et-login-divider:not(:empty)::after { margin-left: .75em; }
.et-login-signup {
text-align: center;
font-size: 0.85rem;
font-weight: 600;
color: var(--et-text-muted);
margin-top: 0.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=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* ===========================
Earth Tone Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--et-bg: #FDFBF7;
--et-surface: #FFFFFF;
--et-surface-2: #F7F4EE;
--et-surface-dark: #1C1917;
/* Brand Palette */
--et-primary: #C2410C;
--et-primary-hover: #9A3412;
--et-primary-muted: #FFECE3;
--et-accent: #3E4A24;
--et-accent-hover: #2D361A;
--et-accent-muted: #F0F3E8;
--et-success: #3E4A24;
--et-success-muted: #EBF0DE;
--et-danger: #991B1B;
--et-danger-muted: #FEE2E2;
--et-gold: #C2410C;
--et-gold-muted: #FFF5F0;
/* Text */
--et-text: #1C1917;
--et-text-muted: #6E6760;
--et-text-light: #A39C94;
/* Borders */
--et-border: #E7E3DC;
--et-border-strong: #CDC6BD;
/* Tactile Radius Shapes */
--et-radius-sm: 2px;
--et-radius: 4px;
--et-radius-lg: 6px;
--et-radius-pill: 100px;
/* Fonts */
--et-font-heading: 'Playfair Display', serif;
--et-font-body: 'Plus Jakarta Sans', sans-serif;
/* Shadows */
--et-shadow-sm: 0 2px 8px rgba(28,25,23,0.02);
--et-shadow: 0 8px 24px rgba(28,25,23,0.04);
--et-shadow-lg: 0 16px 40px rgba(28,25,23,0.06);
/* Transition */
--et-transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body {
margin: 0;
font-family: var(--et-font-body);
color: var(--et-text);
background-color: var(--et-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.et-card {
background-color: var(--et-surface);
border: 1px solid var(--et-border);
border-radius: var(--et-radius);
box-shadow: var(--et-shadow-sm);
padding: 2rem;
transition: var(--et-transition);
}
.et-card:hover {
box-shadow: var(--et-shadow);
border-color: var(--et-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--et-font-heading);
font-weight: 400;
margin: 0;
color: var(--et-text);
line-height: 1.2;
}
p { font-family: var(--et-font-body); color: var(--et-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.et-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--et-font-body);
font-size: 0.85rem;
font-weight: 700;
border-radius: var(--et-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--et-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.et-btn-primary { background-color: var(--et-primary); color: #fff; border-color: var(--et-primary); }
.et-btn-primary:hover { background-color: var(--et-primary-hover); border-color: var(--et-primary-hover); transform: translateY(-1px); }
.et-btn-accent { background-color: var(--et-accent); color: #fff; border-color: var(--et-accent); }
.et-btn-accent:hover { background-color: var(--et-accent-hover); border-color: var(--et-accent-hover); transform: translateY(-1px); }
.et-btn-outline { background-color: transparent; color: var(--et-text); border-color: var(--et-text); }
.et-btn-outline:hover { background-color: var(--et-surface-2); transform: translateY(-1px); }
.et-btn-ghost { background-color: transparent; color: var(--et-text-muted); border-color: transparent; }
.et-btn-ghost:hover { background-color: var(--et-surface-2); color: var(--et-text); }
.et-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.75rem; }
.et-btn-lg { padding: 0.9rem 2rem; font-size: 0.9rem; }
.et-btn-block { width: 100%; }
.et-btn-icon { width: 42px; height: 42px; padding: 0; }
/* ── Form Controls ────────────── */
.et-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--et-border);
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--et-text);
background-color: var(--et-surface);
outline: none;
transition: var(--et-transition);
}
.et-input::placeholder { color: var(--et-text-light); }
.et-input:focus { border-color: var(--et-primary); background-color: #FAF9F6; }
.et-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--et-font-body);
font-weight: 700;
font-size: 0.8rem;
color: var(--et-text);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.et-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--et-border);
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--et-text);
background-color: var(--et-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6760' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--et-transition);
}
.et-select:focus { border-color: var(--et-primary); }
/* ── Badges ───────────────────── */
.et-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.et-badge-sale { background-color: var(--et-primary-muted); color: var(--et-primary); }
.et-badge-new { background-color: var(--et-accent-muted); color: var(--et-accent); }
.et-badge-success { background-color: var(--et-success-muted); color: var(--et-success); }
.et-badge-danger { background-color: var(--et-danger-muted); color: var(--et-danger); }
.et-badge-default { background-color: var(--et-surface-2); color: var(--et-text-muted); }
/* ── Star Rating ──────────────── */
.et-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--et-primary);
font-size: 0.8rem;
}
.et-stars-count {
font-family: var(--et-font-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--et-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.et-price {
font-family: var(--et-font-body);
font-size: 1.25rem;
font-weight: 700;
color: var(--et-text);
}
.et-price-original {
font-family: var(--et-font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--et-text-light);
text-decoration: line-through;
}
.et-price-sale { color: var(--et-primary); }
/* ── Toggle Slider ────────────── */
.et-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.et-toggle input { opacity: 0; width: 0; height: 0; }
.et-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--et-border-strong); border-radius: 24px; transition: var(--et-transition); }
.et-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--et-transition); }
.et-toggle input:checked + .et-toggle-slider { background-color: var(--et-accent); }
.et-toggle input:checked + .et-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.et-divider { border: none; border-top: 1px solid var(--et-border); margin: 0; }
/* ── Logo ─────────────────────── */
.et-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--et-font-heading);
font-size: 1.4rem;
color: var(--et-text);
font-weight: 700;
}
.et-logo-icon {
width: 34px;
height: 34px;
background-color: var(--et-accent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 1rem;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--et-primary) !important; }
.text-accent { color: var(--et-accent) !important; }
.text-success { color: var(--et-success) !important; }
.text-danger { color: var(--et-danger) !important; }
.text-muted { color: var(--et-text-muted) !important; }
.text-light { color: var(--et-text-light) !important; }
.et-link-sm {
font-family: var(--et-font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--et-primary);
text-decoration: none;
transition: var(--et-transition);
}
.et-link-sm:hover {
color: var(--et-primary-hover);
}
/* --- COMPONENT STYLES --- */
.et-login-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 560px;
background-color: var(--et-bg);
padding: 2rem;
}
.et-login-card {
width: 100%;
max-width: 420px;
padding: 2.5rem !important;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.et-login-brand {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.et-login-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--et-font-heading);
font-size: 1.15rem;
color: var(--et-text);
}
.et-login-title {
font-size: 1.65rem;
margin-top: 0.25rem;
}
.et-login-sub {
font-size: 0.9rem;
color: var(--et-text-muted);
}
.et-login-form {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.et-form-group {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.et-label-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.et-login-remember {
display: flex;
align-items: center;
}
.et-checkbox-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--et-font-body);
font-size: 0.85rem;
font-weight: 600;
color: var(--et-text-muted);
cursor: pointer;
user-select: none;
}
.et-checkbox {
width: 16px;
height: 16px;
accent-color: var(--et-primary);
cursor: pointer;
}
.et-login-divider {
display: flex;
align-items: center;
text-align: center;
color: var(--et-text-light);
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.et-login-divider::before, .et-login-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid var(--et-border);
}
.et-login-divider:not(:empty)::before { margin-right: .75em; }
.et-login-divider:not(:empty)::after { margin-left: .75em; }
.et-login-signup {
text-align: center;
font-size: 0.85rem;
font-weight: 600;
color: var(--et-text-muted);
margin-top: 0.5rem;
}
Shipping & Billing
HTML
<div class="et-settings-panel">
<div class="et-settings-header">
<div>
<h3>Vault Configurations</h3>
<p>Modify your shipping coordinates and archival subscription tiers.</p>
</div>
<div class="et-settings-acts">
<button class="et-btn et-btn-outline et-btn-sm">Discard</button>
<button class="et-btn et-btn-accent et-btn-sm">Save Changes</button>
</div>
</div>
<div class="et-settings-body">
<section class="et-settings-sec et-card">
<h4>Vault Location</h4>
<p>Where your physical stoneware pieces will be dispatched.</p>
<hr class="et-divider">
<div class="et-settings-grid">
<div class="et-form-group">
<label class="et-label" for="shp-first">First Name</label>
<input type="text" id="shp-first" class="et-input" value="Marcus">
</div>
<div class="et-form-group">
<label class="et-label" for="shp-last">Last Name</label>
<input type="text" id="shp-last" class="et-input" value="Vance">
</div>
<div class="et-form-group" style="grid-column: span 2;">
<label class="et-label" for="shp-addr">Street Address</label>
<input type="text" id="shp-addr" class="et-input" value="74 Desert Mesa Parkway, Suite 100">
</div>
<div class="et-form-group">
<label class="et-label" for="shp-city">City</label>
<input type="text" id="shp-city" class="et-input" value="Santa Fe">
</div>
<div class="et-form-group">
<label class="et-label" for="shp-zip">ZIP / Postal Code</label>
<input type="text" id="shp-zip" class="et-input" value="87501">
</div>
</div>
<div class="et-form-inline">
<label class="et-checkbox-label">
<input type="checkbox" class="et-checkbox" checked>
<span>Use as default vault address</span>
</label>
</div>
</section>
<section class="et-settings-sec et-card">
<h4>Security & Encryption</h4>
<p>Configure automated security keys for high-value orders.</p>
<hr class="et-divider">
<div class="et-toggle-list">
<div class="et-toggle-row">
<div>
<div class="et-toggle-label">Double-Key Verification</div>
<div class="et-toggle-desc">Require SMS authorization before firing ceramic shipments.</div>
</div>
<label class="et-toggle"><input type="checkbox" checked><span class="et-toggle-slider"></span></label>
</div>
<hr class="et-divider">
<div class="et-toggle-row">
<div>
<div class="et-toggle-label">Anonymous Collection Status</div>
<div class="et-toggle-desc">Keep your high-desert art collections hidden from public registries.</div>
</div>
<label class="et-toggle"><input type="checkbox"><span class="et-toggle-slider"></span></label>
</div>
</div>
</section>
</div>
</div>
CSS (Component Only)
/* Component: Shipping & Billing */
/* NOTE: This component requires base.css to be included in your page. */
.et-settings-panel {
max-width: 860px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.et-settings-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.et-settings-header h3 {
font-size: 1.35rem;
margin-bottom: 0.3rem;
}
.et-settings-acts {
display: flex;
gap: 0.75rem;
flex-shrink: 0;
}
.et-settings-body {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.et-settings-sec {
padding: 2rem !important;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.et-settings-sec h4 {
font-size: 1.15rem;
}
.et-settings-sec > p {
font-size: 0.88rem;
margin-top: -0.75rem;
}
.et-settings-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.et-form-inline {
display: flex;
align-items: center;
margin-top: 0.5rem;
}
.et-checkbox-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--et-font-body);
font-size: 0.85rem;
font-weight: 600;
color: var(--et-text-muted);
cursor: pointer;
}
.et-checkbox {
width: 16px;
height: 16px;
accent-color: var(--et-accent);
}
.et-toggle-list {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.et-toggle-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
}
.et-toggle-label {
font-family: var(--et-font-body);
font-size: 0.92rem;
font-weight: 700;
color: var(--et-text);
margin-bottom: 0.2rem;
}
.et-toggle-desc {
font-size: 0.83rem;
color: var(--et-text-muted);
font-weight: 500;
line-height: 1.5;
}
@media (max-width: 600px) {
.et-settings-grid { grid-template-columns: 1fr; }
.et-settings-grid > div { grid-column: span 1 !important; }
.et-settings-header { flex-direction: column; }
}
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=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* ===========================
Earth Tone Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--et-bg: #FDFBF7;
--et-surface: #FFFFFF;
--et-surface-2: #F7F4EE;
--et-surface-dark: #1C1917;
/* Brand Palette */
--et-primary: #C2410C;
--et-primary-hover: #9A3412;
--et-primary-muted: #FFECE3;
--et-accent: #3E4A24;
--et-accent-hover: #2D361A;
--et-accent-muted: #F0F3E8;
--et-success: #3E4A24;
--et-success-muted: #EBF0DE;
--et-danger: #991B1B;
--et-danger-muted: #FEE2E2;
--et-gold: #C2410C;
--et-gold-muted: #FFF5F0;
/* Text */
--et-text: #1C1917;
--et-text-muted: #6E6760;
--et-text-light: #A39C94;
/* Borders */
--et-border: #E7E3DC;
--et-border-strong: #CDC6BD;
/* Tactile Radius Shapes */
--et-radius-sm: 2px;
--et-radius: 4px;
--et-radius-lg: 6px;
--et-radius-pill: 100px;
/* Fonts */
--et-font-heading: 'Playfair Display', serif;
--et-font-body: 'Plus Jakarta Sans', sans-serif;
/* Shadows */
--et-shadow-sm: 0 2px 8px rgba(28,25,23,0.02);
--et-shadow: 0 8px 24px rgba(28,25,23,0.04);
--et-shadow-lg: 0 16px 40px rgba(28,25,23,0.06);
/* Transition */
--et-transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body {
margin: 0;
font-family: var(--et-font-body);
color: var(--et-text);
background-color: var(--et-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.et-card {
background-color: var(--et-surface);
border: 1px solid var(--et-border);
border-radius: var(--et-radius);
box-shadow: var(--et-shadow-sm);
padding: 2rem;
transition: var(--et-transition);
}
.et-card:hover {
box-shadow: var(--et-shadow);
border-color: var(--et-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--et-font-heading);
font-weight: 400;
margin: 0;
color: var(--et-text);
line-height: 1.2;
}
p { font-family: var(--et-font-body); color: var(--et-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.et-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--et-font-body);
font-size: 0.85rem;
font-weight: 700;
border-radius: var(--et-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--et-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.et-btn-primary { background-color: var(--et-primary); color: #fff; border-color: var(--et-primary); }
.et-btn-primary:hover { background-color: var(--et-primary-hover); border-color: var(--et-primary-hover); transform: translateY(-1px); }
.et-btn-accent { background-color: var(--et-accent); color: #fff; border-color: var(--et-accent); }
.et-btn-accent:hover { background-color: var(--et-accent-hover); border-color: var(--et-accent-hover); transform: translateY(-1px); }
.et-btn-outline { background-color: transparent; color: var(--et-text); border-color: var(--et-text); }
.et-btn-outline:hover { background-color: var(--et-surface-2); transform: translateY(-1px); }
.et-btn-ghost { background-color: transparent; color: var(--et-text-muted); border-color: transparent; }
.et-btn-ghost:hover { background-color: var(--et-surface-2); color: var(--et-text); }
.et-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.75rem; }
.et-btn-lg { padding: 0.9rem 2rem; font-size: 0.9rem; }
.et-btn-block { width: 100%; }
.et-btn-icon { width: 42px; height: 42px; padding: 0; }
/* ── Form Controls ────────────── */
.et-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--et-border);
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--et-text);
background-color: var(--et-surface);
outline: none;
transition: var(--et-transition);
}
.et-input::placeholder { color: var(--et-text-light); }
.et-input:focus { border-color: var(--et-primary); background-color: #FAF9F6; }
.et-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--et-font-body);
font-weight: 700;
font-size: 0.8rem;
color: var(--et-text);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.et-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--et-border);
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--et-text);
background-color: var(--et-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6760' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--et-transition);
}
.et-select:focus { border-color: var(--et-primary); }
/* ── Badges ───────────────────── */
.et-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.et-badge-sale { background-color: var(--et-primary-muted); color: var(--et-primary); }
.et-badge-new { background-color: var(--et-accent-muted); color: var(--et-accent); }
.et-badge-success { background-color: var(--et-success-muted); color: var(--et-success); }
.et-badge-danger { background-color: var(--et-danger-muted); color: var(--et-danger); }
.et-badge-default { background-color: var(--et-surface-2); color: var(--et-text-muted); }
/* ── Star Rating ──────────────── */
.et-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--et-primary);
font-size: 0.8rem;
}
.et-stars-count {
font-family: var(--et-font-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--et-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.et-price {
font-family: var(--et-font-body);
font-size: 1.25rem;
font-weight: 700;
color: var(--et-text);
}
.et-price-original {
font-family: var(--et-font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--et-text-light);
text-decoration: line-through;
}
.et-price-sale { color: var(--et-primary); }
/* ── Toggle Slider ────────────── */
.et-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.et-toggle input { opacity: 0; width: 0; height: 0; }
.et-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--et-border-strong); border-radius: 24px; transition: var(--et-transition); }
.et-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--et-transition); }
.et-toggle input:checked + .et-toggle-slider { background-color: var(--et-accent); }
.et-toggle input:checked + .et-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.et-divider { border: none; border-top: 1px solid var(--et-border); margin: 0; }
/* ── Logo ─────────────────────── */
.et-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--et-font-heading);
font-size: 1.4rem;
color: var(--et-text);
font-weight: 700;
}
.et-logo-icon {
width: 34px;
height: 34px;
background-color: var(--et-accent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 1rem;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--et-primary) !important; }
.text-accent { color: var(--et-accent) !important; }
.text-success { color: var(--et-success) !important; }
.text-danger { color: var(--et-danger) !important; }
.text-muted { color: var(--et-text-muted) !important; }
.text-light { color: var(--et-text-light) !important; }
.et-link-sm {
font-family: var(--et-font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--et-primary);
text-decoration: none;
transition: var(--et-transition);
}
.et-link-sm:hover {
color: var(--et-primary-hover);
}
/* --- COMPONENT STYLES --- */
.et-settings-panel {
max-width: 860px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.et-settings-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.et-settings-header h3 {
font-size: 1.35rem;
margin-bottom: 0.3rem;
}
.et-settings-acts {
display: flex;
gap: 0.75rem;
flex-shrink: 0;
}
.et-settings-body {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.et-settings-sec {
padding: 2rem !important;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.et-settings-sec h4 {
font-size: 1.15rem;
}
.et-settings-sec > p {
font-size: 0.88rem;
margin-top: -0.75rem;
}
.et-settings-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.et-form-inline {
display: flex;
align-items: center;
margin-top: 0.5rem;
}
.et-checkbox-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--et-font-body);
font-size: 0.85rem;
font-weight: 600;
color: var(--et-text-muted);
cursor: pointer;
}
.et-checkbox {
width: 16px;
height: 16px;
accent-color: var(--et-accent);
}
.et-toggle-list {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.et-toggle-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
}
.et-toggle-label {
font-family: var(--et-font-body);
font-size: 0.92rem;
font-weight: 700;
color: var(--et-text);
margin-bottom: 0.2rem;
}
.et-toggle-desc {
font-size: 0.83rem;
color: var(--et-text-muted);
font-weight: 500;
line-height: 1.5;
}
@media (max-width: 600px) {
.et-settings-grid { grid-template-columns: 1fr; }
.et-settings-grid > div { grid-column: span 1 !important; }
.et-settings-header { flex-direction: column; }
}
Cards
Product Cards
HTML
<div class="et-product-grid">
<!-- Product 1 -->
<div class="et-product-card et-card">
<div class="et-product-media">
<span class="et-badge et-badge-sale et-product-badge">SALE −20%</span>
<div class="et-product-placeholder">🏺</div>
<div class="et-product-hover-actions">
<button class="et-product-action-btn" title="Add to Wishlist">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><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"/></svg>
</button>
<button class="et-product-action-btn" title="Quick View">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
</button>
</div>
</div>
<div class="et-product-details">
<span class="et-product-cat text-muted">Stoneware</span>
<h4 class="et-product-title">Raw Ochre Hand-Thrown Clay Bowl</h4>
<div class="et-stars">
⭐⭐⭐⭐⭐
<span class="et-stars-count">(42)</span>
</div>
<div class="et-product-price-row">
<div class="et-price-box">
<span class="et-price et-price-sale">$78.00</span>
<span class="et-price-original">$98.00</span>
</div>
<button class="et-btn et-btn-accent et-btn-sm et-btn-icon" title="Add to Bag">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
</button>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="et-product-card et-card et-product-soldout">
<div class="et-product-media">
<span class="et-badge et-badge-default et-product-badge">Out of Kiln</span>
<div class="et-product-placeholder">🪵</div>
</div>
<div class="et-product-details">
<span class="et-product-cat text-muted">Apothecary</span>
<h4 class="et-product-title">Desert Juniper Cold-Pressed Oil Vials</h4>
<div class="et-stars">
⭐⭐⭐⭐☆
<span class="et-stars-count">(19)</span>
</div>
<div class="et-product-price-row">
<div class="et-price-box">
<span class="et-price">$34.00</span>
</div>
<button class="et-btn et-btn-outline et-btn-sm" disabled style="cursor:not-allowed;">Sold Out</button>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="et-product-card et-card">
<div class="et-product-media">
<span class="et-badge et-badge-new et-product-badge">New Firing</span>
<div class="et-product-placeholder">🏺</div>
<div class="et-product-hover-actions">
<button class="et-product-action-btn" title="Add to Wishlist">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><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"/></svg>
</button>
<button class="et-product-action-btn" title="Quick View">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
</button>
</div>
</div>
<div class="et-product-details">
<span class="et-product-cat text-muted">Vases</span>
<h4 class="et-product-title">Tall Sandstone Minimalist Bud Vase</h4>
<div class="et-stars">
⭐⭐⭐⭐⭐
<span class="et-stars-count">(31)</span>
</div>
<div class="et-product-price-row">
<div class="et-price-box">
<span class="et-price">$120.00</span>
</div>
<button class="et-btn et-btn-accent et-btn-sm et-btn-icon" title="Add to Bag">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
</button>
</div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Product Cards */
/* NOTE: This component requires base.css to be included in your page. */
.et-product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1100px;
margin: 0 auto;
}
.et-product-card {
padding: 0 !important;
overflow: hidden;
display: flex;
flex-direction: column;
}
.et-product-media {
height: 240px;
background-color: var(--et-surface-2);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.et-product-placeholder {
font-size: 5.5rem;
filter: drop-shadow(0 8px 16px rgba(28,25,23,0.04));
transition: var(--et-transition);
}
.et-product-card:hover .et-product-placeholder {
transform: scale(1.06) rotate(2deg);
}
.et-product-badge {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 2;
}
.et-product-hover-actions {
position: absolute;
inset: 0;
background-color: rgba(28,25,23,0.25);
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
opacity: 0;
pointer-events: none;
transition: var(--et-transition);
}
.et-product-card:hover .et-product-hover-actions {
opacity: 1;
pointer-events: auto;
}
.et-product-action-btn {
width: 42px;
height: 42px;
border: 1px solid var(--et-border);
background-color: var(--et-surface);
color: var(--et-text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--et-transition);
box-shadow: var(--et-shadow-sm);
border-radius: var(--et-radius-sm);
}
.et-product-action-btn:hover {
background-color: var(--et-primary);
color: #fff;
transform: translateY(-2px) rotate(4deg);
border-color: var(--et-primary);
}
.et-product-details {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
flex: 1;
}
.et-product-cat {
font-family: var(--et-font-body);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.et-product-title {
font-size: 1.15rem;
color: var(--et-text);
line-height: 1.35;
height: 2.7em;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.et-product-price-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.5rem;
border-top: 1px solid var(--et-border);
padding-top: 1rem;
}
.et-price-box {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
/* Soldout State */
.et-product-soldout .et-product-placeholder {
opacity: 0.4;
}
.et-product-soldout .et-product-details {
opacity: 0.75;
}
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=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* ===========================
Earth Tone Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--et-bg: #FDFBF7;
--et-surface: #FFFFFF;
--et-surface-2: #F7F4EE;
--et-surface-dark: #1C1917;
/* Brand Palette */
--et-primary: #C2410C;
--et-primary-hover: #9A3412;
--et-primary-muted: #FFECE3;
--et-accent: #3E4A24;
--et-accent-hover: #2D361A;
--et-accent-muted: #F0F3E8;
--et-success: #3E4A24;
--et-success-muted: #EBF0DE;
--et-danger: #991B1B;
--et-danger-muted: #FEE2E2;
--et-gold: #C2410C;
--et-gold-muted: #FFF5F0;
/* Text */
--et-text: #1C1917;
--et-text-muted: #6E6760;
--et-text-light: #A39C94;
/* Borders */
--et-border: #E7E3DC;
--et-border-strong: #CDC6BD;
/* Tactile Radius Shapes */
--et-radius-sm: 2px;
--et-radius: 4px;
--et-radius-lg: 6px;
--et-radius-pill: 100px;
/* Fonts */
--et-font-heading: 'Playfair Display', serif;
--et-font-body: 'Plus Jakarta Sans', sans-serif;
/* Shadows */
--et-shadow-sm: 0 2px 8px rgba(28,25,23,0.02);
--et-shadow: 0 8px 24px rgba(28,25,23,0.04);
--et-shadow-lg: 0 16px 40px rgba(28,25,23,0.06);
/* Transition */
--et-transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body {
margin: 0;
font-family: var(--et-font-body);
color: var(--et-text);
background-color: var(--et-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.et-card {
background-color: var(--et-surface);
border: 1px solid var(--et-border);
border-radius: var(--et-radius);
box-shadow: var(--et-shadow-sm);
padding: 2rem;
transition: var(--et-transition);
}
.et-card:hover {
box-shadow: var(--et-shadow);
border-color: var(--et-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--et-font-heading);
font-weight: 400;
margin: 0;
color: var(--et-text);
line-height: 1.2;
}
p { font-family: var(--et-font-body); color: var(--et-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.et-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--et-font-body);
font-size: 0.85rem;
font-weight: 700;
border-radius: var(--et-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--et-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.et-btn-primary { background-color: var(--et-primary); color: #fff; border-color: var(--et-primary); }
.et-btn-primary:hover { background-color: var(--et-primary-hover); border-color: var(--et-primary-hover); transform: translateY(-1px); }
.et-btn-accent { background-color: var(--et-accent); color: #fff; border-color: var(--et-accent); }
.et-btn-accent:hover { background-color: var(--et-accent-hover); border-color: var(--et-accent-hover); transform: translateY(-1px); }
.et-btn-outline { background-color: transparent; color: var(--et-text); border-color: var(--et-text); }
.et-btn-outline:hover { background-color: var(--et-surface-2); transform: translateY(-1px); }
.et-btn-ghost { background-color: transparent; color: var(--et-text-muted); border-color: transparent; }
.et-btn-ghost:hover { background-color: var(--et-surface-2); color: var(--et-text); }
.et-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.75rem; }
.et-btn-lg { padding: 0.9rem 2rem; font-size: 0.9rem; }
.et-btn-block { width: 100%; }
.et-btn-icon { width: 42px; height: 42px; padding: 0; }
/* ── Form Controls ────────────── */
.et-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--et-border);
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--et-text);
background-color: var(--et-surface);
outline: none;
transition: var(--et-transition);
}
.et-input::placeholder { color: var(--et-text-light); }
.et-input:focus { border-color: var(--et-primary); background-color: #FAF9F6; }
.et-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--et-font-body);
font-weight: 700;
font-size: 0.8rem;
color: var(--et-text);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.et-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--et-border);
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--et-text);
background-color: var(--et-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6760' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--et-transition);
}
.et-select:focus { border-color: var(--et-primary); }
/* ── Badges ───────────────────── */
.et-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.et-badge-sale { background-color: var(--et-primary-muted); color: var(--et-primary); }
.et-badge-new { background-color: var(--et-accent-muted); color: var(--et-accent); }
.et-badge-success { background-color: var(--et-success-muted); color: var(--et-success); }
.et-badge-danger { background-color: var(--et-danger-muted); color: var(--et-danger); }
.et-badge-default { background-color: var(--et-surface-2); color: var(--et-text-muted); }
/* ── Star Rating ──────────────── */
.et-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--et-primary);
font-size: 0.8rem;
}
.et-stars-count {
font-family: var(--et-font-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--et-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.et-price {
font-family: var(--et-font-body);
font-size: 1.25rem;
font-weight: 700;
color: var(--et-text);
}
.et-price-original {
font-family: var(--et-font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--et-text-light);
text-decoration: line-through;
}
.et-price-sale { color: var(--et-primary); }
/* ── Toggle Slider ────────────── */
.et-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.et-toggle input { opacity: 0; width: 0; height: 0; }
.et-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--et-border-strong); border-radius: 24px; transition: var(--et-transition); }
.et-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--et-transition); }
.et-toggle input:checked + .et-toggle-slider { background-color: var(--et-accent); }
.et-toggle input:checked + .et-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.et-divider { border: none; border-top: 1px solid var(--et-border); margin: 0; }
/* ── Logo ─────────────────────── */
.et-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--et-font-heading);
font-size: 1.4rem;
color: var(--et-text);
font-weight: 700;
}
.et-logo-icon {
width: 34px;
height: 34px;
background-color: var(--et-accent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 1rem;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--et-primary) !important; }
.text-accent { color: var(--et-accent) !important; }
.text-success { color: var(--et-success) !important; }
.text-danger { color: var(--et-danger) !important; }
.text-muted { color: var(--et-text-muted) !important; }
.text-light { color: var(--et-text-light) !important; }
.et-link-sm {
font-family: var(--et-font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--et-primary);
text-decoration: none;
transition: var(--et-transition);
}
.et-link-sm:hover {
color: var(--et-primary-hover);
}
/* --- COMPONENT STYLES --- */
.et-product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1100px;
margin: 0 auto;
}
.et-product-card {
padding: 0 !important;
overflow: hidden;
display: flex;
flex-direction: column;
}
.et-product-media {
height: 240px;
background-color: var(--et-surface-2);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.et-product-placeholder {
font-size: 5.5rem;
filter: drop-shadow(0 8px 16px rgba(28,25,23,0.04));
transition: var(--et-transition);
}
.et-product-card:hover .et-product-placeholder {
transform: scale(1.06) rotate(2deg);
}
.et-product-badge {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 2;
}
.et-product-hover-actions {
position: absolute;
inset: 0;
background-color: rgba(28,25,23,0.25);
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
opacity: 0;
pointer-events: none;
transition: var(--et-transition);
}
.et-product-card:hover .et-product-hover-actions {
opacity: 1;
pointer-events: auto;
}
.et-product-action-btn {
width: 42px;
height: 42px;
border: 1px solid var(--et-border);
background-color: var(--et-surface);
color: var(--et-text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--et-transition);
box-shadow: var(--et-shadow-sm);
border-radius: var(--et-radius-sm);
}
.et-product-action-btn:hover {
background-color: var(--et-primary);
color: #fff;
transform: translateY(-2px) rotate(4deg);
border-color: var(--et-primary);
}
.et-product-details {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
flex: 1;
}
.et-product-cat {
font-family: var(--et-font-body);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.et-product-title {
font-size: 1.15rem;
color: var(--et-text);
line-height: 1.35;
height: 2.7em;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.et-product-price-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.5rem;
border-top: 1px solid var(--et-border);
padding-top: 1rem;
}
.et-price-box {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
/* Soldout State */
.et-product-soldout .et-product-placeholder {
opacity: 0.4;
}
.et-product-soldout .et-product-details {
opacity: 0.75;
}
Store Metrics
HTML
<div class="et-stats-grid">
<!-- Stat 1 -->
<div class="et-stat-card et-card">
<div class="et-stat-head">
<div class="et-stat-ico" style="background:var(--et-primary-muted); color:var(--et-primary);">
🏺
</div>
<span class="et-badge et-badge-success">▲ 18.5%</span>
</div>
<div class="et-stat-val">$24,980</div>
<div class="et-stat-lbl">Stoneware Sales</div>
<div class="et-stat-bar-wrap">
<div class="et-stat-bar" style="width:82%; background:var(--et-primary);"></div>
</div>
</div>
<!-- Stat 2 -->
<div class="et-stat-card et-card">
<div class="et-stat-head">
<div class="et-stat-ico" style="background:var(--et-success-muted); color:var(--et-success);">
🔥
</div>
<span class="et-badge et-badge-success">▲ 2.1%</span>
</div>
<div class="et-stat-val">96.8%</div>
<div class="et-stat-lbl">Firing Success Aura</div>
<div class="et-stat-bar-wrap">
<div class="et-stat-bar" style="width:96.8%; background:var(--et-accent);"></div>
</div>
</div>
<!-- Stat 3 -->
<div class="et-stat-card et-card">
<div class="et-stat-head">
<div class="et-stat-ico" style="background:var(--et-accent-muted); color:var(--et-accent);">
📦
</div>
<span class="et-badge et-badge-default">Safe</span>
</div>
<div class="et-stat-val">$148.50</div>
<div class="et-stat-lbl">Average Firing Basket</div>
<div class="et-stat-bar-wrap">
<div class="et-stat-bar" style="width:58%; background:var(--et-accent);"></div>
</div>
</div>
<!-- Stat 4 -->
<div class="et-stat-card et-card">
<div class="et-stat-head">
<div class="et-stat-ico" style="background:var(--et-danger-muted); color:var(--et-danger);">
⚠️
</div>
<span class="et-badge et-badge-danger">▼ 1.2%</span>
</div>
<div class="et-stat-val">4</div>
<div class="et-stat-lbl">Stoneware Fractures</div>
<div class="et-stat-bar-wrap">
<div class="et-stat-bar" style="width:12%; background:var(--et-danger);"></div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Store Metrics */
/* NOTE: This component requires base.css to be included in your page. */
.et-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
max-width: 1100px;
margin: 0 auto;
}
.et-stat-card {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 1.5rem !important;
}
.et-stat-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.15rem;
}
.et-stat-ico {
width: 36px;
height: 36px;
border-radius: var(--et-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.1rem;
}
.et-stat-val {
font-family: var(--et-font-body);
font-size: 2rem;
font-weight: 700;
color: var(--et-text);
letter-spacing: -0.02em;
line-height: 1;
}
.et-stat-lbl {
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--et-text-light);
}
.et-stat-bar-wrap {
height: 4px;
background-color: var(--et-border);
border-radius: 4px;
overflow: hidden;
margin-top: 0.5rem;
}
.et-stat-bar {
height: 100%;
border-radius: 4px;
transition: width 0.6s ease;
}
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=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* ===========================
Earth Tone Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--et-bg: #FDFBF7;
--et-surface: #FFFFFF;
--et-surface-2: #F7F4EE;
--et-surface-dark: #1C1917;
/* Brand Palette */
--et-primary: #C2410C;
--et-primary-hover: #9A3412;
--et-primary-muted: #FFECE3;
--et-accent: #3E4A24;
--et-accent-hover: #2D361A;
--et-accent-muted: #F0F3E8;
--et-success: #3E4A24;
--et-success-muted: #EBF0DE;
--et-danger: #991B1B;
--et-danger-muted: #FEE2E2;
--et-gold: #C2410C;
--et-gold-muted: #FFF5F0;
/* Text */
--et-text: #1C1917;
--et-text-muted: #6E6760;
--et-text-light: #A39C94;
/* Borders */
--et-border: #E7E3DC;
--et-border-strong: #CDC6BD;
/* Tactile Radius Shapes */
--et-radius-sm: 2px;
--et-radius: 4px;
--et-radius-lg: 6px;
--et-radius-pill: 100px;
/* Fonts */
--et-font-heading: 'Playfair Display', serif;
--et-font-body: 'Plus Jakarta Sans', sans-serif;
/* Shadows */
--et-shadow-sm: 0 2px 8px rgba(28,25,23,0.02);
--et-shadow: 0 8px 24px rgba(28,25,23,0.04);
--et-shadow-lg: 0 16px 40px rgba(28,25,23,0.06);
/* Transition */
--et-transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body {
margin: 0;
font-family: var(--et-font-body);
color: var(--et-text);
background-color: var(--et-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.et-card {
background-color: var(--et-surface);
border: 1px solid var(--et-border);
border-radius: var(--et-radius);
box-shadow: var(--et-shadow-sm);
padding: 2rem;
transition: var(--et-transition);
}
.et-card:hover {
box-shadow: var(--et-shadow);
border-color: var(--et-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--et-font-heading);
font-weight: 400;
margin: 0;
color: var(--et-text);
line-height: 1.2;
}
p { font-family: var(--et-font-body); color: var(--et-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.et-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--et-font-body);
font-size: 0.85rem;
font-weight: 700;
border-radius: var(--et-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--et-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.et-btn-primary { background-color: var(--et-primary); color: #fff; border-color: var(--et-primary); }
.et-btn-primary:hover { background-color: var(--et-primary-hover); border-color: var(--et-primary-hover); transform: translateY(-1px); }
.et-btn-accent { background-color: var(--et-accent); color: #fff; border-color: var(--et-accent); }
.et-btn-accent:hover { background-color: var(--et-accent-hover); border-color: var(--et-accent-hover); transform: translateY(-1px); }
.et-btn-outline { background-color: transparent; color: var(--et-text); border-color: var(--et-text); }
.et-btn-outline:hover { background-color: var(--et-surface-2); transform: translateY(-1px); }
.et-btn-ghost { background-color: transparent; color: var(--et-text-muted); border-color: transparent; }
.et-btn-ghost:hover { background-color: var(--et-surface-2); color: var(--et-text); }
.et-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.75rem; }
.et-btn-lg { padding: 0.9rem 2rem; font-size: 0.9rem; }
.et-btn-block { width: 100%; }
.et-btn-icon { width: 42px; height: 42px; padding: 0; }
/* ── Form Controls ────────────── */
.et-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--et-border);
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--et-text);
background-color: var(--et-surface);
outline: none;
transition: var(--et-transition);
}
.et-input::placeholder { color: var(--et-text-light); }
.et-input:focus { border-color: var(--et-primary); background-color: #FAF9F6; }
.et-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--et-font-body);
font-weight: 700;
font-size: 0.8rem;
color: var(--et-text);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.et-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--et-border);
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--et-text);
background-color: var(--et-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6760' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--et-transition);
}
.et-select:focus { border-color: var(--et-primary); }
/* ── Badges ───────────────────── */
.et-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.et-badge-sale { background-color: var(--et-primary-muted); color: var(--et-primary); }
.et-badge-new { background-color: var(--et-accent-muted); color: var(--et-accent); }
.et-badge-success { background-color: var(--et-success-muted); color: var(--et-success); }
.et-badge-danger { background-color: var(--et-danger-muted); color: var(--et-danger); }
.et-badge-default { background-color: var(--et-surface-2); color: var(--et-text-muted); }
/* ── Star Rating ──────────────── */
.et-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--et-primary);
font-size: 0.8rem;
}
.et-stars-count {
font-family: var(--et-font-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--et-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.et-price {
font-family: var(--et-font-body);
font-size: 1.25rem;
font-weight: 700;
color: var(--et-text);
}
.et-price-original {
font-family: var(--et-font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--et-text-light);
text-decoration: line-through;
}
.et-price-sale { color: var(--et-primary); }
/* ── Toggle Slider ────────────── */
.et-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.et-toggle input { opacity: 0; width: 0; height: 0; }
.et-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--et-border-strong); border-radius: 24px; transition: var(--et-transition); }
.et-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--et-transition); }
.et-toggle input:checked + .et-toggle-slider { background-color: var(--et-accent); }
.et-toggle input:checked + .et-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.et-divider { border: none; border-top: 1px solid var(--et-border); margin: 0; }
/* ── Logo ─────────────────────── */
.et-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--et-font-heading);
font-size: 1.4rem;
color: var(--et-text);
font-weight: 700;
}
.et-logo-icon {
width: 34px;
height: 34px;
background-color: var(--et-accent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 1rem;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--et-primary) !important; }
.text-accent { color: var(--et-accent) !important; }
.text-success { color: var(--et-success) !important; }
.text-danger { color: var(--et-danger) !important; }
.text-muted { color: var(--et-text-muted) !important; }
.text-light { color: var(--et-text-light) !important; }
.et-link-sm {
font-family: var(--et-font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--et-primary);
text-decoration: none;
transition: var(--et-transition);
}
.et-link-sm:hover {
color: var(--et-primary-hover);
}
/* --- COMPONENT STYLES --- */
.et-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
max-width: 1100px;
margin: 0 auto;
}
.et-stat-card {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 1.5rem !important;
}
.et-stat-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.15rem;
}
.et-stat-ico {
width: 36px;
height: 36px;
border-radius: var(--et-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.1rem;
}
.et-stat-val {
font-family: var(--et-font-body);
font-size: 2rem;
font-weight: 700;
color: var(--et-text);
letter-spacing: -0.02em;
line-height: 1;
}
.et-stat-lbl {
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--et-text-light);
}
.et-stat-bar-wrap {
height: 4px;
background-color: var(--et-border);
border-radius: 4px;
overflow: hidden;
margin-top: 0.5rem;
}
.et-stat-bar {
height: 100%;
border-radius: 4px;
transition: width 0.6s ease;
}
Tables
Order History Table
HTML
<div class="et-table-wrap et-card">
<div class="et-table-toolbar">
<div class="et-table-toolbar-left">
<h4>Kiln Logs</h4>
<span class="et-badge et-badge-default">12 Vessels Fired</span>
</div>
<div class="et-table-toolbar-right">
<div class="et-search-wrap">
<svg class="et-search-ico" viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input type="text" class="et-input et-search-input" placeholder="Find vessel…">
</div>
<select class="et-select" style="width:auto;">
<option>All Firing Milestones</option>
<option>Fired</option>
<option>Glazing</option>
<option>Pre-heating</option>
</select>
</div>
</div>
<div class="et-table-scroll">
<table class="et-data-table">
<thead>
<tr>
<th>Firing ID</th>
<th>Date Fired</th>
<th>Vessel Details</th>
<th>Vessels</th>
<th>Clay Aura</th>
<th>Milestone</th>
<th>Kiln Cert</th>
</tr>
</thead>
<tbody>
<tr>
<td class="et-td-mono" style="font-weight:700;">#ET-9842</td>
<td class="et-td-mono text-muted">18 May 2026</td>
<td>
<div class="et-prod-cell">
<span class="et-prod-thumb">🏺</span>
<div>
<span class="et-prod-name">Raw Ochre Hand-Thrown Clay Bowl</span>
<span class="et-prod-meta text-muted">Clay: Spanish Ochre</span>
</div>
</div>
</td>
<td class="et-td-mono">1</td>
<td class="et-td-mono" style="font-weight:800;">$78.00</td>
<td><span class="et-badge et-badge-success">Fired</span></td>
<td>
<button class="et-btn et-btn-outline et-btn-sm">
<svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" stroke-width="2.5" fill="none" style="margin-right:0.2rem;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
Cert
</button>
</td>
</tr>
<tr>
<td class="et-td-mono" style="font-weight:700;">#ET-9840</td>
<td class="et-td-mono text-muted">15 May 2026</td>
<td>
<div class="et-prod-cell">
<span class="et-prod-thumb">🏺</span>
<div>
<span class="et-prod-name">Tall Sandstone Minimalist Bud Vase</span>
<span class="et-prod-meta text-muted">Clay: Mojave Sand</span>
</div>
</div>
</td>
<td class="et-td-mono">1</td>
<td class="et-td-mono" style="font-weight:800;">$120.00</td>
<td><span class="et-badge et-badge-sale">Glazing</span></td>
<td>
<button class="et-btn et-btn-outline et-btn-sm">Track Firing</button>
</td>
</tr>
<tr>
<td class="et-td-mono" style="font-weight:700;">#ET-9830</td>
<td class="et-td-mono text-muted">12 May 2026</td>
<td>
<div class="et-prod-cell">
<span class="et-prod-thumb">🪵</span>
<div>
<span class="et-prod-name">Desert Juniper Oil Vials</span>
<span class="et-prod-meta text-muted">Wood: Juniper Berry</span>
</div>
</div>
</td>
<td class="et-td-mono">2</td>
<td class="et-td-mono" style="font-weight:800;">$68.00</td>
<td><span class="et-badge et-badge-default">Pre-heating</span></td>
<td>
<button class="et-btn et-btn-ghost et-btn-sm text-danger">Revoke</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="et-table-pagination">
<span class="text-muted" style="font-size:0.85rem;">Showing 1–3 of 12 vessels</span>
<div class="et-pagination-btns">
<button class="et-btn et-btn-outline et-btn-sm" disabled style="opacity:.45;">← Prev</button>
<button class="et-btn et-btn-accent et-btn-sm">1</button>
<button class="et-btn et-btn-outline et-btn-sm">2</button>
<button class="et-btn et-btn-outline et-btn-sm">Next →</button>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Order History Table */
/* NOTE: This component requires base.css to be included in your page. */
.et-table-wrap {
max-width: 1000px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
}
.et-table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--et-border);
flex-wrap: wrap;
}
.et-table-toolbar-left {
display: flex;
align-items: center;
gap: 0.75rem;
}
.et-table-toolbar-left h4 {
font-size: 1.15rem;
}
.et-table-toolbar-right {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.et-search-wrap {
position: relative;
}
.et-search-ico {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--et-text-light);
pointer-events: none;
}
.et-search-input {
padding-left: 2.25rem;
width: 190px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.et-table-scroll {
overflow-x: auto;
}
.et-data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.et-data-table thead tr {
background-color: var(--et-surface-2);
border-bottom: 1px solid var(--et-border);
}
.et-data-table th {
padding: 0.75rem 1rem;
font-family: var(--et-font-body);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--et-text-light);
text-align: left;
white-space: nowrap;
}
.et-data-table td {
padding: 1rem;
border-bottom: 1px solid var(--et-border);
color: var(--et-text);
font-weight: 600;
vertical-align: middle;
}
.et-data-table tbody tr:last-child td {
border-bottom: none;
}
.et-data-table tbody tr:hover td {
background-color: var(--et-surface-2);
}
.et-td-mono {
font-family: var(--et-font-body);
font-size: 0.85rem;
}
.et-prod-cell {
display: flex;
align-items: center;
gap: 0.75rem;
}
.et-prod-thumb {
width: 38px;
height: 38px;
background-color: var(--et-surface-2);
border-radius: var(--et-radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.et-prod-name {
display: block;
font-family: var(--et-font-body);
font-weight: 700;
color: var(--et-text);
}
.et-prod-meta {
font-size: 0.75rem;
font-weight: 500;
}
.et-table-pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border-top: 1px solid var(--et-border);
gap: 1rem;
flex-wrap: wrap;
}
.et-pagination-btns {
display: flex;
gap: 0.4rem;
align-items: center;
}
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=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* ===========================
Earth Tone Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--et-bg: #FDFBF7;
--et-surface: #FFFFFF;
--et-surface-2: #F7F4EE;
--et-surface-dark: #1C1917;
/* Brand Palette */
--et-primary: #C2410C;
--et-primary-hover: #9A3412;
--et-primary-muted: #FFECE3;
--et-accent: #3E4A24;
--et-accent-hover: #2D361A;
--et-accent-muted: #F0F3E8;
--et-success: #3E4A24;
--et-success-muted: #EBF0DE;
--et-danger: #991B1B;
--et-danger-muted: #FEE2E2;
--et-gold: #C2410C;
--et-gold-muted: #FFF5F0;
/* Text */
--et-text: #1C1917;
--et-text-muted: #6E6760;
--et-text-light: #A39C94;
/* Borders */
--et-border: #E7E3DC;
--et-border-strong: #CDC6BD;
/* Tactile Radius Shapes */
--et-radius-sm: 2px;
--et-radius: 4px;
--et-radius-lg: 6px;
--et-radius-pill: 100px;
/* Fonts */
--et-font-heading: 'Playfair Display', serif;
--et-font-body: 'Plus Jakarta Sans', sans-serif;
/* Shadows */
--et-shadow-sm: 0 2px 8px rgba(28,25,23,0.02);
--et-shadow: 0 8px 24px rgba(28,25,23,0.04);
--et-shadow-lg: 0 16px 40px rgba(28,25,23,0.06);
/* Transition */
--et-transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body {
margin: 0;
font-family: var(--et-font-body);
color: var(--et-text);
background-color: var(--et-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.et-card {
background-color: var(--et-surface);
border: 1px solid var(--et-border);
border-radius: var(--et-radius);
box-shadow: var(--et-shadow-sm);
padding: 2rem;
transition: var(--et-transition);
}
.et-card:hover {
box-shadow: var(--et-shadow);
border-color: var(--et-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--et-font-heading);
font-weight: 400;
margin: 0;
color: var(--et-text);
line-height: 1.2;
}
p { font-family: var(--et-font-body); color: var(--et-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.et-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--et-font-body);
font-size: 0.85rem;
font-weight: 700;
border-radius: var(--et-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--et-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.et-btn-primary { background-color: var(--et-primary); color: #fff; border-color: var(--et-primary); }
.et-btn-primary:hover { background-color: var(--et-primary-hover); border-color: var(--et-primary-hover); transform: translateY(-1px); }
.et-btn-accent { background-color: var(--et-accent); color: #fff; border-color: var(--et-accent); }
.et-btn-accent:hover { background-color: var(--et-accent-hover); border-color: var(--et-accent-hover); transform: translateY(-1px); }
.et-btn-outline { background-color: transparent; color: var(--et-text); border-color: var(--et-text); }
.et-btn-outline:hover { background-color: var(--et-surface-2); transform: translateY(-1px); }
.et-btn-ghost { background-color: transparent; color: var(--et-text-muted); border-color: transparent; }
.et-btn-ghost:hover { background-color: var(--et-surface-2); color: var(--et-text); }
.et-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.75rem; }
.et-btn-lg { padding: 0.9rem 2rem; font-size: 0.9rem; }
.et-btn-block { width: 100%; }
.et-btn-icon { width: 42px; height: 42px; padding: 0; }
/* ── Form Controls ────────────── */
.et-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--et-border);
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--et-text);
background-color: var(--et-surface);
outline: none;
transition: var(--et-transition);
}
.et-input::placeholder { color: var(--et-text-light); }
.et-input:focus { border-color: var(--et-primary); background-color: #FAF9F6; }
.et-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--et-font-body);
font-weight: 700;
font-size: 0.8rem;
color: var(--et-text);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.et-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--et-border);
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--et-text);
background-color: var(--et-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6760' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--et-transition);
}
.et-select:focus { border-color: var(--et-primary); }
/* ── Badges ───────────────────── */
.et-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.et-badge-sale { background-color: var(--et-primary-muted); color: var(--et-primary); }
.et-badge-new { background-color: var(--et-accent-muted); color: var(--et-accent); }
.et-badge-success { background-color: var(--et-success-muted); color: var(--et-success); }
.et-badge-danger { background-color: var(--et-danger-muted); color: var(--et-danger); }
.et-badge-default { background-color: var(--et-surface-2); color: var(--et-text-muted); }
/* ── Star Rating ──────────────── */
.et-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--et-primary);
font-size: 0.8rem;
}
.et-stars-count {
font-family: var(--et-font-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--et-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.et-price {
font-family: var(--et-font-body);
font-size: 1.25rem;
font-weight: 700;
color: var(--et-text);
}
.et-price-original {
font-family: var(--et-font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--et-text-light);
text-decoration: line-through;
}
.et-price-sale { color: var(--et-primary); }
/* ── Toggle Slider ────────────── */
.et-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.et-toggle input { opacity: 0; width: 0; height: 0; }
.et-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--et-border-strong); border-radius: 24px; transition: var(--et-transition); }
.et-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--et-transition); }
.et-toggle input:checked + .et-toggle-slider { background-color: var(--et-accent); }
.et-toggle input:checked + .et-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.et-divider { border: none; border-top: 1px solid var(--et-border); margin: 0; }
/* ── Logo ─────────────────────── */
.et-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--et-font-heading);
font-size: 1.4rem;
color: var(--et-text);
font-weight: 700;
}
.et-logo-icon {
width: 34px;
height: 34px;
background-color: var(--et-accent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 1rem;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--et-primary) !important; }
.text-accent { color: var(--et-accent) !important; }
.text-success { color: var(--et-success) !important; }
.text-danger { color: var(--et-danger) !important; }
.text-muted { color: var(--et-text-muted) !important; }
.text-light { color: var(--et-text-light) !important; }
.et-link-sm {
font-family: var(--et-font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--et-primary);
text-decoration: none;
transition: var(--et-transition);
}
.et-link-sm:hover {
color: var(--et-primary-hover);
}
/* --- COMPONENT STYLES --- */
.et-table-wrap {
max-width: 1000px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
}
.et-table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--et-border);
flex-wrap: wrap;
}
.et-table-toolbar-left {
display: flex;
align-items: center;
gap: 0.75rem;
}
.et-table-toolbar-left h4 {
font-size: 1.15rem;
}
.et-table-toolbar-right {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.et-search-wrap {
position: relative;
}
.et-search-ico {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--et-text-light);
pointer-events: none;
}
.et-search-input {
padding-left: 2.25rem;
width: 190px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.et-table-scroll {
overflow-x: auto;
}
.et-data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.et-data-table thead tr {
background-color: var(--et-surface-2);
border-bottom: 1px solid var(--et-border);
}
.et-data-table th {
padding: 0.75rem 1rem;
font-family: var(--et-font-body);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--et-text-light);
text-align: left;
white-space: nowrap;
}
.et-data-table td {
padding: 1rem;
border-bottom: 1px solid var(--et-border);
color: var(--et-text);
font-weight: 600;
vertical-align: middle;
}
.et-data-table tbody tr:last-child td {
border-bottom: none;
}
.et-data-table tbody tr:hover td {
background-color: var(--et-surface-2);
}
.et-td-mono {
font-family: var(--et-font-body);
font-size: 0.85rem;
}
.et-prod-cell {
display: flex;
align-items: center;
gap: 0.75rem;
}
.et-prod-thumb {
width: 38px;
height: 38px;
background-color: var(--et-surface-2);
border-radius: var(--et-radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.et-prod-name {
display: block;
font-family: var(--et-font-body);
font-weight: 700;
color: var(--et-text);
}
.et-prod-meta {
font-size: 0.75rem;
font-weight: 500;
}
.et-table-pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border-top: 1px solid var(--et-border);
gap: 1rem;
flex-wrap: wrap;
}
.et-pagination-btns {
display: flex;
gap: 0.4rem;
align-items: center;
}
Lists
Order Status Feed
HTML
<div class="et-activity-card et-card">
<div class="et-activity-head">
<h4>Vessel Firing Milestones</h4>
<span class="et-badge et-badge-success">Batch #ET-9840</span>
</div>
<div class="et-activity-list">
<!-- Milestone 1 -->
<div class="et-activity-item active">
<div class="et-act-ico" style="background:var(--et-primary-muted); color:var(--et-primary);">
🏺
</div>
<div class="et-act-content">
<div class="et-act-top">
<span class="et-act-label">Vessel Dispatched via Mesa Ground</span>
<span class="et-act-time">Today, 04:12 pm</span>
</div>
<span class="et-act-meta">Tracking number: <a href="#" class="et-link-sm">1Z999AA10123456784</a>. Estimated arrival in Santa Fe: Saturday, 23 May.</span>
</div>
</div>
<div class="et-activity-line"></div>
<!-- Milestone 2 -->
<div class="et-activity-item">
<div class="et-act-ico" style="background:var(--et-success-muted); color:var(--et-success);">
🔥
</div>
<div class="et-act-content">
<div class="et-act-top">
<span class="et-act-label">Kiln Glaze Vitrification Verified</span>
<span class="et-act-time">15 May, 11:30 am</span>
</div>
<span class="et-act-meta">Verified at our New Mexico studio. Firing temp achieved: 2300°F (Cone 10).</span>
</div>
</div>
<div class="et-activity-line"></div>
<!-- Milestone 3 -->
<div class="et-activity-item">
<div class="et-act-ico" style="background:var(--et-surface-2); color:var(--et-text-light);">
🪵
</div>
<div class="et-act-content">
<div class="et-act-top">
<span class="et-act-label">Sandstone Clay Molding Complete</span>
<span class="et-act-time">14 May, 09:00 am</span>
</div>
<span class="et-act-meta">Clay thrown, centered, and hand-molded. Placed in drying rack for pre-firing.</span>
</div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Order Status Feed */
/* NOTE: This component requires base.css to be included in your page. */
.et-activity-card {
max-width: 520px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
}
.et-activity-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--et-border);
}
.et-activity-head h4 {
font-size: 1.15rem;
}
.et-activity-list {
display: flex;
flex-direction: column;
padding: 1.5rem;
position: relative;
}
.et-activity-item {
display: flex;
align-items: flex-start;
gap: 1rem;
position: relative;
z-index: 2;
padding-bottom: 1.5rem;
}
.et-activity-item:last-of-type {
padding-bottom: 0;
}
.et-activity-item:not(:last-of-type)::after {
content: '';
position: absolute;
top: 32px; /* Bottom of 32px icon */
left: 15px; /* Center of 32px icon */
bottom: 0;
width: 1px;
background-color: var(--et-border);
z-index: 1;
}
.et-act-ico {
width: 32px;
height: 32px;
border-radius: var(--et-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 0.95rem;
border: 1px solid var(--et-border);
}
.et-act-content {
flex: 1;
min-width: 0;
}
.et-act-top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.et-act-label {
font-family: var(--et-font-body);
font-size: 0.875rem;
font-weight: 700;
color: var(--et-text);
}
.et-act-time {
font-family: var(--et-font-body);
font-size: 0.75rem;
font-weight: 600;
color: var(--et-text-light);
white-space: nowrap;
}
.et-act-meta {
font-size: 0.8rem;
color: var(--et-text-muted);
font-weight: 500;
line-height: 1.5;
display: block;
}
/* Timeline Vertical Line */
.et-activity-line {
display: none;
}
.et-activity-item.active .et-act-ico {
outline: 3px solid var(--et-primary-muted);
}
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=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* ===========================
Earth Tone Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--et-bg: #FDFBF7;
--et-surface: #FFFFFF;
--et-surface-2: #F7F4EE;
--et-surface-dark: #1C1917;
/* Brand Palette */
--et-primary: #C2410C;
--et-primary-hover: #9A3412;
--et-primary-muted: #FFECE3;
--et-accent: #3E4A24;
--et-accent-hover: #2D361A;
--et-accent-muted: #F0F3E8;
--et-success: #3E4A24;
--et-success-muted: #EBF0DE;
--et-danger: #991B1B;
--et-danger-muted: #FEE2E2;
--et-gold: #C2410C;
--et-gold-muted: #FFF5F0;
/* Text */
--et-text: #1C1917;
--et-text-muted: #6E6760;
--et-text-light: #A39C94;
/* Borders */
--et-border: #E7E3DC;
--et-border-strong: #CDC6BD;
/* Tactile Radius Shapes */
--et-radius-sm: 2px;
--et-radius: 4px;
--et-radius-lg: 6px;
--et-radius-pill: 100px;
/* Fonts */
--et-font-heading: 'Playfair Display', serif;
--et-font-body: 'Plus Jakarta Sans', sans-serif;
/* Shadows */
--et-shadow-sm: 0 2px 8px rgba(28,25,23,0.02);
--et-shadow: 0 8px 24px rgba(28,25,23,0.04);
--et-shadow-lg: 0 16px 40px rgba(28,25,23,0.06);
/* Transition */
--et-transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body {
margin: 0;
font-family: var(--et-font-body);
color: var(--et-text);
background-color: var(--et-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.et-card {
background-color: var(--et-surface);
border: 1px solid var(--et-border);
border-radius: var(--et-radius);
box-shadow: var(--et-shadow-sm);
padding: 2rem;
transition: var(--et-transition);
}
.et-card:hover {
box-shadow: var(--et-shadow);
border-color: var(--et-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--et-font-heading);
font-weight: 400;
margin: 0;
color: var(--et-text);
line-height: 1.2;
}
p { font-family: var(--et-font-body); color: var(--et-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.et-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--et-font-body);
font-size: 0.85rem;
font-weight: 700;
border-radius: var(--et-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--et-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.et-btn-primary { background-color: var(--et-primary); color: #fff; border-color: var(--et-primary); }
.et-btn-primary:hover { background-color: var(--et-primary-hover); border-color: var(--et-primary-hover); transform: translateY(-1px); }
.et-btn-accent { background-color: var(--et-accent); color: #fff; border-color: var(--et-accent); }
.et-btn-accent:hover { background-color: var(--et-accent-hover); border-color: var(--et-accent-hover); transform: translateY(-1px); }
.et-btn-outline { background-color: transparent; color: var(--et-text); border-color: var(--et-text); }
.et-btn-outline:hover { background-color: var(--et-surface-2); transform: translateY(-1px); }
.et-btn-ghost { background-color: transparent; color: var(--et-text-muted); border-color: transparent; }
.et-btn-ghost:hover { background-color: var(--et-surface-2); color: var(--et-text); }
.et-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.75rem; }
.et-btn-lg { padding: 0.9rem 2rem; font-size: 0.9rem; }
.et-btn-block { width: 100%; }
.et-btn-icon { width: 42px; height: 42px; padding: 0; }
/* ── Form Controls ────────────── */
.et-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--et-border);
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--et-text);
background-color: var(--et-surface);
outline: none;
transition: var(--et-transition);
}
.et-input::placeholder { color: var(--et-text-light); }
.et-input:focus { border-color: var(--et-primary); background-color: #FAF9F6; }
.et-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--et-font-body);
font-weight: 700;
font-size: 0.8rem;
color: var(--et-text);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.et-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--et-border);
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--et-text);
background-color: var(--et-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6760' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--et-transition);
}
.et-select:focus { border-color: var(--et-primary); }
/* ── Badges ───────────────────── */
.et-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.et-badge-sale { background-color: var(--et-primary-muted); color: var(--et-primary); }
.et-badge-new { background-color: var(--et-accent-muted); color: var(--et-accent); }
.et-badge-success { background-color: var(--et-success-muted); color: var(--et-success); }
.et-badge-danger { background-color: var(--et-danger-muted); color: var(--et-danger); }
.et-badge-default { background-color: var(--et-surface-2); color: var(--et-text-muted); }
/* ── Star Rating ──────────────── */
.et-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--et-primary);
font-size: 0.8rem;
}
.et-stars-count {
font-family: var(--et-font-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--et-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.et-price {
font-family: var(--et-font-body);
font-size: 1.25rem;
font-weight: 700;
color: var(--et-text);
}
.et-price-original {
font-family: var(--et-font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--et-text-light);
text-decoration: line-through;
}
.et-price-sale { color: var(--et-primary); }
/* ── Toggle Slider ────────────── */
.et-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.et-toggle input { opacity: 0; width: 0; height: 0; }
.et-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--et-border-strong); border-radius: 24px; transition: var(--et-transition); }
.et-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--et-transition); }
.et-toggle input:checked + .et-toggle-slider { background-color: var(--et-accent); }
.et-toggle input:checked + .et-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.et-divider { border: none; border-top: 1px solid var(--et-border); margin: 0; }
/* ── Logo ─────────────────────── */
.et-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--et-font-heading);
font-size: 1.4rem;
color: var(--et-text);
font-weight: 700;
}
.et-logo-icon {
width: 34px;
height: 34px;
background-color: var(--et-accent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 1rem;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--et-primary) !important; }
.text-accent { color: var(--et-accent) !important; }
.text-success { color: var(--et-success) !important; }
.text-danger { color: var(--et-danger) !important; }
.text-muted { color: var(--et-text-muted) !important; }
.text-light { color: var(--et-text-light) !important; }
.et-link-sm {
font-family: var(--et-font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--et-primary);
text-decoration: none;
transition: var(--et-transition);
}
.et-link-sm:hover {
color: var(--et-primary-hover);
}
/* --- COMPONENT STYLES --- */
.et-activity-card {
max-width: 520px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
}
.et-activity-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--et-border);
}
.et-activity-head h4 {
font-size: 1.15rem;
}
.et-activity-list {
display: flex;
flex-direction: column;
padding: 1.5rem;
position: relative;
}
.et-activity-item {
display: flex;
align-items: flex-start;
gap: 1rem;
position: relative;
z-index: 2;
padding-bottom: 1.5rem;
}
.et-activity-item:last-of-type {
padding-bottom: 0;
}
.et-activity-item:not(:last-of-type)::after {
content: '';
position: absolute;
top: 32px; /* Bottom of 32px icon */
left: 15px; /* Center of 32px icon */
bottom: 0;
width: 1px;
background-color: var(--et-border);
z-index: 1;
}
.et-act-ico {
width: 32px;
height: 32px;
border-radius: var(--et-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 0.95rem;
border: 1px solid var(--et-border);
}
.et-act-content {
flex: 1;
min-width: 0;
}
.et-act-top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.et-act-label {
font-family: var(--et-font-body);
font-size: 0.875rem;
font-weight: 700;
color: var(--et-text);
}
.et-act-time {
font-family: var(--et-font-body);
font-size: 0.75rem;
font-weight: 600;
color: var(--et-text-light);
white-space: nowrap;
}
.et-act-meta {
font-size: 0.8rem;
color: var(--et-text-muted);
font-weight: 500;
line-height: 1.5;
display: block;
}
/* Timeline Vertical Line */
.et-activity-line {
display: none;
}
.et-activity-item.active .et-act-ico {
outline: 3px solid var(--et-primary-muted);
}
Modals
Cart Confirm Dialog
HTML
<div class="et-modal-backdrop">
<div class="et-modal et-card">
<div class="et-modal-head">
<div class="et-modal-title-row">
<div class="et-modal-ico" style="background:var(--et-success-muted); color:var(--et-primary);">
🏺
</div>
<div>
<h4>Stoneware Allocated</h4>
<p class="et-modal-meta">Piece reserved from current kiln batch.</p>
</div>
</div>
<button class="et-btn et-btn-ghost et-btn-icon" aria-label="Close">
<svg viewBox="0 0 24 24" width="15" height="15" stroke="currentColor" stroke-width="2.5" fill="none"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="et-modal-body">
<div class="et-cart-summary">
<div class="et-cart-prod-row">
<span class="et-cart-prod-thumb">🏺</span>
<div class="et-cart-prod-info">
<strong>Raw Ochre Hand-Thrown Clay Bowl</strong>
<p class="text-muted" style="font-size:0.78rem; margin-top:0.1rem;">Qty: 1 · Clay: Spanish Ochre</p>
</div>
<span class="et-price et-price-sale" style="font-size:1.05rem;">$78.00</span>
</div>
<hr class="et-divider">
<div class="et-cart-totals">
<div class="et-total-row">
<span class="text-muted">Total Archive Investment (3 items)</span>
<span style="font-weight:700;">$318.00</span>
</div>
<div class="et-total-row" style="color:var(--et-accent);">
<span>Insured Freight Packaging</span>
<span style="font-weight:700;">FREE</span>
</div>
</div>
</div>
<!-- Eco warning/trust inside modal -->
<div class="et-modal-trust-alert">
<span>🏺 Limited batch stoneware is prone to sellout. Secure allocations now.</span>
</div>
</div>
<div class="et-modal-foot">
<button class="et-btn et-btn-outline">Add More</button>
<button class="et-btn et-btn-accent">Complete Reserve</button>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Cart Confirm Dialog */
/* NOTE: This component requires base.css to be included in your page. */
.et-modal-backdrop {
background-color: rgba(28,25,23,0.3);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
max-width: 700px;
margin: 0 auto;
}
.et-modal {
width: 100%;
max-width: 480px;
padding: 0 !important;
overflow: hidden;
}
.et-modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem;
border-bottom: 1px solid var(--et-border);
}
.et-modal-title-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.et-modal-ico {
width: 40px;
height: 40px;
border-radius: var(--et-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.15rem;
}
.et-modal-head h4 {
font-size: 1.15rem;
margin-bottom: 0.15rem;
}
.et-modal-meta {
font-size: 0.8rem;
font-weight: 600;
}
.et-modal-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.et-cart-summary {
display: flex;
flex-direction: column;
gap: 1rem;
background-color: var(--et-surface-2);
border: 1px solid var(--et-border);
border-radius: var(--et-radius-sm);
padding: 1.25rem;
}
.et-cart-prod-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.et-cart-prod-thumb {
width: 42px;
height: 42px;
background-color: var(--et-surface);
border: 1px solid var(--et-border);
border-radius: var(--et-radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
flex-shrink: 0;
}
.et-cart-prod-info {
flex: 1;
min-width: 0;
}
.et-cart-prod-info strong {
font-family: var(--et-font-body);
font-size: 0.875rem;
font-weight: 700;
color: var(--et-text);
}
.et-cart-totals {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.et-total-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
font-weight: 600;
}
.et-modal-trust-alert {
display: flex;
align-items: center;
gap: 0.6rem;
background-color: var(--et-primary-muted);
color: #9A3412;
border: 1px solid rgba(194,65,12,0.15);
border-radius: var(--et-radius-sm);
padding: 0.75rem 1rem;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.4;
}
.et-modal-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
padding: 1.25rem 1.5rem;
border-top: 1px solid var(--et-border);
background-color: var(--et-surface-2);
}
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=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* ===========================
Earth Tone Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--et-bg: #FDFBF7;
--et-surface: #FFFFFF;
--et-surface-2: #F7F4EE;
--et-surface-dark: #1C1917;
/* Brand Palette */
--et-primary: #C2410C;
--et-primary-hover: #9A3412;
--et-primary-muted: #FFECE3;
--et-accent: #3E4A24;
--et-accent-hover: #2D361A;
--et-accent-muted: #F0F3E8;
--et-success: #3E4A24;
--et-success-muted: #EBF0DE;
--et-danger: #991B1B;
--et-danger-muted: #FEE2E2;
--et-gold: #C2410C;
--et-gold-muted: #FFF5F0;
/* Text */
--et-text: #1C1917;
--et-text-muted: #6E6760;
--et-text-light: #A39C94;
/* Borders */
--et-border: #E7E3DC;
--et-border-strong: #CDC6BD;
/* Tactile Radius Shapes */
--et-radius-sm: 2px;
--et-radius: 4px;
--et-radius-lg: 6px;
--et-radius-pill: 100px;
/* Fonts */
--et-font-heading: 'Playfair Display', serif;
--et-font-body: 'Plus Jakarta Sans', sans-serif;
/* Shadows */
--et-shadow-sm: 0 2px 8px rgba(28,25,23,0.02);
--et-shadow: 0 8px 24px rgba(28,25,23,0.04);
--et-shadow-lg: 0 16px 40px rgba(28,25,23,0.06);
/* Transition */
--et-transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body {
margin: 0;
font-family: var(--et-font-body);
color: var(--et-text);
background-color: var(--et-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.et-card {
background-color: var(--et-surface);
border: 1px solid var(--et-border);
border-radius: var(--et-radius);
box-shadow: var(--et-shadow-sm);
padding: 2rem;
transition: var(--et-transition);
}
.et-card:hover {
box-shadow: var(--et-shadow);
border-color: var(--et-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--et-font-heading);
font-weight: 400;
margin: 0;
color: var(--et-text);
line-height: 1.2;
}
p { font-family: var(--et-font-body); color: var(--et-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.et-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--et-font-body);
font-size: 0.85rem;
font-weight: 700;
border-radius: var(--et-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--et-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.et-btn-primary { background-color: var(--et-primary); color: #fff; border-color: var(--et-primary); }
.et-btn-primary:hover { background-color: var(--et-primary-hover); border-color: var(--et-primary-hover); transform: translateY(-1px); }
.et-btn-accent { background-color: var(--et-accent); color: #fff; border-color: var(--et-accent); }
.et-btn-accent:hover { background-color: var(--et-accent-hover); border-color: var(--et-accent-hover); transform: translateY(-1px); }
.et-btn-outline { background-color: transparent; color: var(--et-text); border-color: var(--et-text); }
.et-btn-outline:hover { background-color: var(--et-surface-2); transform: translateY(-1px); }
.et-btn-ghost { background-color: transparent; color: var(--et-text-muted); border-color: transparent; }
.et-btn-ghost:hover { background-color: var(--et-surface-2); color: var(--et-text); }
.et-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.75rem; }
.et-btn-lg { padding: 0.9rem 2rem; font-size: 0.9rem; }
.et-btn-block { width: 100%; }
.et-btn-icon { width: 42px; height: 42px; padding: 0; }
/* ── Form Controls ────────────── */
.et-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--et-border);
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--et-text);
background-color: var(--et-surface);
outline: none;
transition: var(--et-transition);
}
.et-input::placeholder { color: var(--et-text-light); }
.et-input:focus { border-color: var(--et-primary); background-color: #FAF9F6; }
.et-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--et-font-body);
font-weight: 700;
font-size: 0.8rem;
color: var(--et-text);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.et-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--et-border);
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--et-text);
background-color: var(--et-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6760' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--et-transition);
}
.et-select:focus { border-color: var(--et-primary); }
/* ── Badges ───────────────────── */
.et-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--et-radius-sm);
font-family: var(--et-font-body);
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.et-badge-sale { background-color: var(--et-primary-muted); color: var(--et-primary); }
.et-badge-new { background-color: var(--et-accent-muted); color: var(--et-accent); }
.et-badge-success { background-color: var(--et-success-muted); color: var(--et-success); }
.et-badge-danger { background-color: var(--et-danger-muted); color: var(--et-danger); }
.et-badge-default { background-color: var(--et-surface-2); color: var(--et-text-muted); }
/* ── Star Rating ──────────────── */
.et-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--et-primary);
font-size: 0.8rem;
}
.et-stars-count {
font-family: var(--et-font-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--et-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.et-price {
font-family: var(--et-font-body);
font-size: 1.25rem;
font-weight: 700;
color: var(--et-text);
}
.et-price-original {
font-family: var(--et-font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--et-text-light);
text-decoration: line-through;
}
.et-price-sale { color: var(--et-primary); }
/* ── Toggle Slider ────────────── */
.et-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.et-toggle input { opacity: 0; width: 0; height: 0; }
.et-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--et-border-strong); border-radius: 24px; transition: var(--et-transition); }
.et-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--et-transition); }
.et-toggle input:checked + .et-toggle-slider { background-color: var(--et-accent); }
.et-toggle input:checked + .et-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.et-divider { border: none; border-top: 1px solid var(--et-border); margin: 0; }
/* ── Logo ─────────────────────── */
.et-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--et-font-heading);
font-size: 1.4rem;
color: var(--et-text);
font-weight: 700;
}
.et-logo-icon {
width: 34px;
height: 34px;
background-color: var(--et-accent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 1rem;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--et-primary) !important; }
.text-accent { color: var(--et-accent) !important; }
.text-success { color: var(--et-success) !important; }
.text-danger { color: var(--et-danger) !important; }
.text-muted { color: var(--et-text-muted) !important; }
.text-light { color: var(--et-text-light) !important; }
.et-link-sm {
font-family: var(--et-font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--et-primary);
text-decoration: none;
transition: var(--et-transition);
}
.et-link-sm:hover {
color: var(--et-primary-hover);
}
/* --- COMPONENT STYLES --- */
.et-modal-backdrop {
background-color: rgba(28,25,23,0.3);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
max-width: 700px;
margin: 0 auto;
}
.et-modal {
width: 100%;
max-width: 480px;
padding: 0 !important;
overflow: hidden;
}
.et-modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem;
border-bottom: 1px solid var(--et-border);
}
.et-modal-title-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.et-modal-ico {
width: 40px;
height: 40px;
border-radius: var(--et-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.15rem;
}
.et-modal-head h4 {
font-size: 1.15rem;
margin-bottom: 0.15rem;
}
.et-modal-meta {
font-size: 0.8rem;
font-weight: 600;
}
.et-modal-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.et-cart-summary {
display: flex;
flex-direction: column;
gap: 1rem;
background-color: var(--et-surface-2);
border: 1px solid var(--et-border);
border-radius: var(--et-radius-sm);
padding: 1.25rem;
}
.et-cart-prod-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.et-cart-prod-thumb {
width: 42px;
height: 42px;
background-color: var(--et-surface);
border: 1px solid var(--et-border);
border-radius: var(--et-radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
flex-shrink: 0;
}
.et-cart-prod-info {
flex: 1;
min-width: 0;
}
.et-cart-prod-info strong {
font-family: var(--et-font-body);
font-size: 0.875rem;
font-weight: 700;
color: var(--et-text);
}
.et-cart-totals {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.et-total-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
font-weight: 600;
}
.et-modal-trust-alert {
display: flex;
align-items: center;
gap: 0.6rem;
background-color: var(--et-primary-muted);
color: #9A3412;
border: 1px solid rgba(194,65,12,0.15);
border-radius: var(--et-radius-sm);
padding: 0.75rem 1rem;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.4;
}
.et-modal-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
padding: 1.25rem 1.5rem;
border-top: 1px solid var(--et-border);
background-color: var(--et-surface-2);
}