E-commerce Starter - Free HTML/CSS UI Kit
Conversion-focused storefront components including product cards with sale badges, star ratings, cart navigation, checkout forms, order tables, and trust signal elements.
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
Electric Violet
#7C3AED
Hot Orange
#F97316
Deep Ink
#0F172A
Cool Surface
#F8FAFC
Slate Muted
#64748B
Typography
Hero Sections
Promo Banner Hero
HTML
<div class="ec-promo-hero ec-card">
<div class="ec-promo-badge">
<span class="ec-badge ec-badge-sale ec-badge-lg">SEASON SALE</span>
<span class="ec-promo-discount">Get 30% OFF with code <strong>STORE30</strong></span>
</div>
<h1 class="ec-promo-title">Upgrade Your Daily Essentials</h1>
<p class="ec-promo-desc">Discover our curated collection of premium accessories, handcrafted with durable sustainable materials and designed for modern life.</p>
<div class="ec-promo-actions">
<button class="ec-btn ec-btn-accent ec-btn-lg">Shop The Collection</button>
<button class="ec-btn ec-btn-outline ec-btn-lg">View Lookbook</button>
</div>
<!-- Trust signals below -->
<div class="ec-hero-trust">
<div class="ec-trust-item">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
<span>Free Shipping over $75</span>
</div>
<div class="ec-trust-item">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
<span>Secure 256-bit Checkout</span>
</div>
<div class="ec-trust-item">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"/></svg>
<span>30-Day Moneyback Guarantee</span>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Promo Banner Hero */
/* NOTE: This component requires base.css to be included in your page. */
.ec-promo-hero {
max-width: 1100px;
margin: 0 auto;
padding: 4rem 3rem !important;
text-align: center;
background: linear-gradient(135deg, var(--ec-primary-muted), #FFFFFF);
display: flex;
flex-direction: column;
align-items: center;
gap: 1.75rem;
position: relative;
overflow: hidden;
}
.ec-promo-hero::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(124,58,237,0.06) 0%, transparent 60%);
pointer-events: none;
}
.ec-promo-badge {
display: flex;
align-items: center;
gap: 0.85rem;
flex-wrap: wrap;
justify-content: center;
}
.ec-promo-discount {
font-family: var(--ec-font-heading);
font-size: 0.9rem;
font-weight: 700;
color: var(--ec-primary-hover);
}
.ec-promo-title {
font-size: 3rem;
font-weight: 800;
max-width: 800px;
letter-spacing: -0.03em;
color: var(--ec-text);
}
.ec-promo-desc {
font-size: 1.1rem;
max-width: 680px;
color: var(--ec-text-muted);
line-height: 1.7;
}
.ec-promo-actions {
display: flex;
gap: 0.85rem;
justify-content: center;
flex-wrap: wrap;
}
.ec-hero-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
margin-top: 1.5rem;
border-top: 1px solid var(--ec-border);
padding-top: 2rem;
width: 100%;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.ec-promo-title { font-size: 2.15rem; }
.ec-promo-hero { padding: 3rem 1.5rem !important; }
.ec-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=Sora:wght@400;500;600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap');
/* ===========================
E-commerce Starter Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--ec-bg: #F8FAFC;
--ec-surface: #FFFFFF;
--ec-surface-2: #F1F5F9;
--ec-surface-dark: #0F172A;
/* Brand */
--ec-primary: #7C3AED;
--ec-primary-hover: #6D28D9;
--ec-primary-muted: #EDE9FE;
--ec-accent: #F97316;
--ec-accent-hover: #EA6C08;
--ec-accent-muted: #FFF7ED;
--ec-success: #16A34A;
--ec-success-muted: #DCFCE7;
--ec-danger: #DC2626;
--ec-danger-muted: #FEE2E2;
--ec-gold: #EAB308;
--ec-gold-muted: #FEF9C3;
/* Text */
--ec-text: #0F172A;
--ec-text-muted: #64748B;
--ec-text-light: #94A3B8;
/* Borders */
--ec-border: #E2E8F0;
--ec-border-strong: #CBD5E1;
/* Radius */
--ec-radius-sm: 8px;
--ec-radius: 12px;
--ec-radius-lg: 18px;
--ec-radius-pill: 100px;
/* Fonts */
--ec-font-heading: 'Sora', sans-serif;
--ec-font-body: 'Nunito', sans-serif;
/* Shadows */
--ec-shadow-xs: 0 1px 2px rgba(15,23,42,0.05);
--ec-shadow-sm: 0 1px 3px rgba(15,23,42,0.07), 0 4px 16px rgba(15,23,42,0.04);
--ec-shadow: 0 4px 12px rgba(15,23,42,0.08), 0 16px 40px rgba(15,23,42,0.06);
--ec-shadow-lg: 0 8px 24px rgba(15,23,42,0.12), 0 32px 64px rgba(15,23,42,0.08);
--ec-shadow-product:0 2px 8px rgba(15,23,42,0.08), 0 8px 32px rgba(15,23,42,0.08);
/* Transition */
--ec-transition: all 0.2s ease;
--ec-transition-slow: all 0.3s ease;
}
body {
margin: 0;
font-family: var(--ec-font-body);
color: var(--ec-text);
background-color: var(--ec-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.ec-card {
background-color: var(--ec-surface);
border: 1px solid var(--ec-border);
border-radius: var(--ec-radius);
box-shadow: var(--ec-shadow-sm);
padding: 1.75rem;
transition: var(--ec-transition);
}
.ec-card:hover { box-shadow: var(--ec-shadow); }
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ec-font-heading);
font-weight: 700;
margin: 0;
color: var(--ec-text);
letter-spacing: -0.02em;
line-height: 1.2;
}
p { font-family: var(--ec-font-body); color: var(--ec-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.ec-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.65rem 1.35rem;
font-family: var(--ec-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--ec-radius-sm);
border: 2px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--ec-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
letter-spacing: -0.01em;
}
.ec-btn:focus-visible { outline: 2px solid var(--ec-primary); outline-offset: 2px; }
.ec-btn-primary { background-color: var(--ec-primary); color: #fff; border-color: var(--ec-primary); }
.ec-btn-primary:hover { background-color: var(--ec-primary-hover); border-color: var(--ec-primary-hover); box-shadow: 0 4px 16px rgba(124,58,237,0.35); transform: translateY(-1px); }
.ec-btn-primary:active { transform: translateY(0); box-shadow: none; }
.ec-btn-accent { background-color: var(--ec-accent); color: #fff; border-color: var(--ec-accent); }
.ec-btn-accent:hover { background-color: var(--ec-accent-hover); border-color: var(--ec-accent-hover); box-shadow: 0 4px 16px rgba(249,115,22,0.35); transform: translateY(-1px); }
.ec-btn-outline { background-color: var(--ec-surface); color: var(--ec-text); border-color: var(--ec-border-strong); }
.ec-btn-outline:hover { background-color: var(--ec-surface-2); border-color: var(--ec-primary); color: var(--ec-primary); transform: translateY(-1px); }
.ec-btn-ghost { background-color: transparent; color: var(--ec-text-muted); border-color: transparent; }
.ec-btn-ghost:hover { background-color: var(--ec-surface-2); color: var(--ec-text); }
.ec-btn-danger { background-color: var(--ec-danger); color: #fff; border-color: var(--ec-danger); }
.ec-btn-danger:hover { background-color: #B91C1C; box-shadow: 0 4px 16px rgba(220,38,38,0.35); transform: translateY(-1px); }
.ec-btn-sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
.ec-btn-lg { padding: 0.85rem 1.85rem; font-size: 1rem; }
.ec-btn-block { width: 100%; }
.ec-btn-icon { width: 38px; height: 38px; padding: 0; border-radius: var(--ec-radius-sm); }
/* ── Form Controls ────────────── */
.ec-input {
width: 100%;
padding: 0.65rem 1rem;
border: 2px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text);
background-color: var(--ec-surface);
outline: none;
transition: var(--ec-transition);
}
.ec-input::placeholder { color: var(--ec-text-light); font-weight: 500; }
.ec-input:focus { border-color: var(--ec-primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
.ec-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--ec-font-heading);
font-weight: 700;
font-size: 0.82rem;
color: var(--ec-text);
letter-spacing: -0.01em;
}
.ec-select {
width: 100%;
padding: 0.65rem 2rem 0.65rem 1rem;
border: 2px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text);
background-color: var(--ec-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='%2364748B' 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.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--ec-transition);
}
.ec-select:focus { border-color: var(--ec-primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
/* ── Badges ───────────────────── */
.ec-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.65rem;
border-radius: var(--ec-radius-pill);
font-family: var(--ec-font-heading);
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
letter-spacing: 0.01em;
}
.ec-badge-sale { background-color: var(--ec-accent); color: #fff; }
.ec-badge-new { background-color: var(--ec-primary); color: #fff; }
.ec-badge-success { background-color: var(--ec-success-muted); color: #14532D; }
.ec-badge-danger { background-color: var(--ec-danger-muted); color: #7F1D1D; }
.ec-badge-default { background-color: var(--ec-surface-2); color: var(--ec-text-muted); border: 1px solid var(--ec-border); }
.ec-badge-pending { background-color: var(--ec-gold-muted); color: #713F12; }
/* ── Star Rating ──────────────── */
.ec-stars {
display: inline-flex;
align-items: center;
gap: 1px;
color: var(--ec-gold);
font-size: 0.85rem;
}
.ec-stars-count {
font-family: var(--ec-font-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--ec-text-muted);
margin-left: 0.3rem;
}
/* ── Price display ────────────── */
.ec-price {
font-family: var(--ec-font-heading);
font-size: 1.25rem;
font-weight: 800;
color: var(--ec-text);
letter-spacing: -0.02em;
}
.ec-price-original {
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text-light);
text-decoration: line-through;
}
.ec-price-sale { color: var(--ec-accent); }
/* ── Toggle ───────────────────── */
.ec-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.ec-toggle input { opacity: 0; width: 0; height: 0; }
.ec-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--ec-border-strong); border-radius: 24px; transition: var(--ec-transition); }
.ec-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--ec-transition); box-shadow: var(--ec-shadow-xs); }
.ec-toggle input:checked + .ec-toggle-slider { background-color: var(--ec-primary); }
.ec-toggle input:checked + .ec-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.ec-divider { border: none; border-top: 1px solid var(--ec-border); margin: 0; }
/* ── Logo ─────────────────────── */
.ec-logo {
display: inline-flex;
align-items: center;
gap: 0.55rem;
text-decoration: none;
font-family: var(--ec-font-heading);
font-weight: 800;
font-size: 1.25rem;
color: var(--ec-text);
letter-spacing: -0.03em;
}
.ec-logo-icon {
width: 34px;
height: 34px;
background: linear-gradient(135deg, #8B5CF6, #7C3AED);
border-radius: var(--ec-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.1rem;
}
/* ── Trust badges ─────────────── */
.ec-trust-strip {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.ec-trust-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--ec-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--ec-text-muted);
}
.ec-trust-item svg { color: var(--ec-primary); flex-shrink: 0; }
/* ── Utilities ────────────────── */
.text-primary { color: var(--ec-primary) !important; }
.text-accent { color: var(--ec-accent) !important; }
.text-success { color: var(--ec-success) !important; }
.text-danger { color: var(--ec-danger) !important; }
.text-muted { color: var(--ec-text-muted) !important; }
.text-light { color: var(--ec-text-light) !important; }
.ec-link-sm {
font-family: var(--ec-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--ec-primary);
text-decoration: none;
transition: var(--ec-transition);
}
.ec-link-sm:hover {
color: var(--ec-primary-hover);
}
/* --- COMPONENT STYLES --- */
.ec-promo-hero {
max-width: 1100px;
margin: 0 auto;
padding: 4rem 3rem !important;
text-align: center;
background: linear-gradient(135deg, var(--ec-primary-muted), #FFFFFF);
display: flex;
flex-direction: column;
align-items: center;
gap: 1.75rem;
position: relative;
overflow: hidden;
}
.ec-promo-hero::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(124,58,237,0.06) 0%, transparent 60%);
pointer-events: none;
}
.ec-promo-badge {
display: flex;
align-items: center;
gap: 0.85rem;
flex-wrap: wrap;
justify-content: center;
}
.ec-promo-discount {
font-family: var(--ec-font-heading);
font-size: 0.9rem;
font-weight: 700;
color: var(--ec-primary-hover);
}
.ec-promo-title {
font-size: 3rem;
font-weight: 800;
max-width: 800px;
letter-spacing: -0.03em;
color: var(--ec-text);
}
.ec-promo-desc {
font-size: 1.1rem;
max-width: 680px;
color: var(--ec-text-muted);
line-height: 1.7;
}
.ec-promo-actions {
display: flex;
gap: 0.85rem;
justify-content: center;
flex-wrap: wrap;
}
.ec-hero-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
margin-top: 1.5rem;
border-top: 1px solid var(--ec-border);
padding-top: 2rem;
width: 100%;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.ec-promo-title { font-size: 2.15rem; }
.ec-promo-hero { padding: 3rem 1.5rem !important; }
.ec-hero-trust { gap: 1rem; }
}
Product Feature Split
HTML
<div class="ec-split-hero">
<div class="ec-split-main ec-card">
<span class="ec-badge ec-badge-new">NEW ARRIVAL</span>
<h1 class="ec-split-title">The Ultimate Everyday Backpack</h1>
<p class="ec-split-desc">Engineered for commuters, travelers, and tech enthusiasts. Weatherproof fabrics, ergonomic shoulder straps, and a dedicated 16-inch laptop pocket.</p>
<!-- Product features -->
<ul class="ec-split-features">
<li>
<span class="ec-feat-icon">☔</span>
<div>
<strong>Weatherproof Cordura®</strong>
<p>Protects your gear from heavy rain and snow.</p>
</div>
</li>
<li>
<span class="ec-feat-icon">💻</span>
<div>
<strong>Tech Compartment</strong>
<p>Suspended sleeves for laptop and tablet protection.</p>
</div>
</li>
</ul>
<div class="ec-split-actions-row">
<div class="ec-split-price-box">
<span class="ec-price ec-price-sale">$129.00</span>
<span class="ec-price-original">$159.00</span>
</div>
<button class="ec-btn ec-btn-primary ec-btn-lg">Add to Cart</button>
<button class="ec-btn ec-btn-outline ec-btn-lg">Quick View</button>
</div>
</div>
<!-- Right Side: Interactive Product Widget Card -->
<div class="ec-split-sidebar">
<div class="ec-preview-widget ec-card">
<!-- Product image simulator/placeholder (gradient background block with content) -->
<div class="ec-widget-image-block">
<span class="ec-badge ec-badge-sale ec-widget-badge">SAVE $30</span>
<div class="ec-widget-bag-icon">🎒</div>
<div class="ec-widget-swatches">
<span class="ec-widget-swatch active" style="background:#0F172A;"></span>
<span class="ec-widget-swatch" style="background:#64748B;"></span>
<span class="ec-widget-swatch" style="background:#0284C7;"></span>
</div>
</div>
<div class="ec-widget-info">
<div class="ec-stars">
⭐⭐⭐⭐⭐
<span class="ec-stars-count">(142 reviews)</span>
</div>
<h4 class="ec-widget-title">Everyday Commuter Pack</h4>
<div class="ec-widget-stock">
<span class="ec-stock-dot"></span>
<span>In stock, ready to ship</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. */
.ec-split-hero {
display: grid;
grid-template-columns: 1fr 340px;
gap: 1.5rem;
max-width: 1100px;
margin: 0 auto;
align-items: start;
}
.ec-split-main {
padding: 3rem !important;
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: flex-start;
}
.ec-split-title {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.15;
}
.ec-split-desc {
font-size: 1.05rem;
color: var(--ec-text-muted);
line-height: 1.7;
}
/* Features */
.ec-split-features {
list-style: none;
padding: 0;
margin: 0.5rem 0;
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.ec-split-features li {
display: flex;
align-items: flex-start;
gap: 0.85rem;
}
.ec-feat-icon {
font-size: 1.25rem;
width: 36px;
height: 36px;
background-color: var(--ec-surface-2);
border-radius: var(--ec-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ec-split-features strong {
font-family: var(--ec-font-heading);
font-size: 0.95rem;
font-weight: 700;
color: var(--ec-text);
}
.ec-split-features p {
font-size: 0.85rem;
color: var(--ec-text-muted);
margin-top: 0.1rem;
}
.ec-split-actions-row {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
flex-wrap: wrap;
border-top: 1px solid var(--ec-border);
padding-top: 1.5rem;
margin-top: 0.5rem;
}
.ec-split-price-box {
display: flex;
flex-direction: column;
margin-right: auto;
}
/* Sidebar Product Widget */
.ec-preview-widget {
padding: 0 !important;
overflow: hidden;
}
.ec-widget-image-block {
height: 260px;
background: linear-gradient(135deg, var(--ec-primary-muted), #FFFFFF);
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.ec-widget-badge {
position: absolute;
top: 1rem;
left: 1rem;
}
.ec-widget-bag-icon {
font-size: 5rem;
filter: drop-shadow(0 8px 16px rgba(15,23,42,0.12));
transition: var(--ec-transition-slow);
}
.ec-preview-widget:hover .ec-widget-bag-icon {
transform: scale(1.08) translateY(-4px) rotate(3deg);
}
.ec-widget-swatches {
position: absolute;
bottom: 1rem;
right: 1rem;
display: flex;
gap: 0.4rem;
}
.ec-widget-swatch {
width: 12px;
height: 12px;
border-radius: 50%;
cursor: pointer;
border: 1px solid rgba(255,255,255,0.8);
box-shadow: var(--ec-shadow-xs);
transition: var(--ec-transition);
}
.ec-widget-swatch.active {
transform: scale(1.25);
outline: 2px solid var(--ec-primary);
outline-offset: 1px;
}
.ec-widget-info {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.ec-widget-title {
font-size: 1rem;
font-weight: 700;
}
.ec-widget-stock {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
font-weight: 700;
color: var(--ec-success);
}
.ec-stock-dot {
width: 6px;
height: 6px;
background-color: var(--ec-success);
border-radius: 50%;
animation: ec-pulse 2s ease infinite;
}
@keyframes ec-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
@media (max-width: 900px) {
.ec-split-hero { grid-template-columns: 1fr; }
.ec-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=Sora:wght@400;500;600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap');
/* ===========================
E-commerce Starter Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--ec-bg: #F8FAFC;
--ec-surface: #FFFFFF;
--ec-surface-2: #F1F5F9;
--ec-surface-dark: #0F172A;
/* Brand */
--ec-primary: #7C3AED;
--ec-primary-hover: #6D28D9;
--ec-primary-muted: #EDE9FE;
--ec-accent: #F97316;
--ec-accent-hover: #EA6C08;
--ec-accent-muted: #FFF7ED;
--ec-success: #16A34A;
--ec-success-muted: #DCFCE7;
--ec-danger: #DC2626;
--ec-danger-muted: #FEE2E2;
--ec-gold: #EAB308;
--ec-gold-muted: #FEF9C3;
/* Text */
--ec-text: #0F172A;
--ec-text-muted: #64748B;
--ec-text-light: #94A3B8;
/* Borders */
--ec-border: #E2E8F0;
--ec-border-strong: #CBD5E1;
/* Radius */
--ec-radius-sm: 8px;
--ec-radius: 12px;
--ec-radius-lg: 18px;
--ec-radius-pill: 100px;
/* Fonts */
--ec-font-heading: 'Sora', sans-serif;
--ec-font-body: 'Nunito', sans-serif;
/* Shadows */
--ec-shadow-xs: 0 1px 2px rgba(15,23,42,0.05);
--ec-shadow-sm: 0 1px 3px rgba(15,23,42,0.07), 0 4px 16px rgba(15,23,42,0.04);
--ec-shadow: 0 4px 12px rgba(15,23,42,0.08), 0 16px 40px rgba(15,23,42,0.06);
--ec-shadow-lg: 0 8px 24px rgba(15,23,42,0.12), 0 32px 64px rgba(15,23,42,0.08);
--ec-shadow-product:0 2px 8px rgba(15,23,42,0.08), 0 8px 32px rgba(15,23,42,0.08);
/* Transition */
--ec-transition: all 0.2s ease;
--ec-transition-slow: all 0.3s ease;
}
body {
margin: 0;
font-family: var(--ec-font-body);
color: var(--ec-text);
background-color: var(--ec-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.ec-card {
background-color: var(--ec-surface);
border: 1px solid var(--ec-border);
border-radius: var(--ec-radius);
box-shadow: var(--ec-shadow-sm);
padding: 1.75rem;
transition: var(--ec-transition);
}
.ec-card:hover { box-shadow: var(--ec-shadow); }
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ec-font-heading);
font-weight: 700;
margin: 0;
color: var(--ec-text);
letter-spacing: -0.02em;
line-height: 1.2;
}
p { font-family: var(--ec-font-body); color: var(--ec-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.ec-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.65rem 1.35rem;
font-family: var(--ec-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--ec-radius-sm);
border: 2px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--ec-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
letter-spacing: -0.01em;
}
.ec-btn:focus-visible { outline: 2px solid var(--ec-primary); outline-offset: 2px; }
.ec-btn-primary { background-color: var(--ec-primary); color: #fff; border-color: var(--ec-primary); }
.ec-btn-primary:hover { background-color: var(--ec-primary-hover); border-color: var(--ec-primary-hover); box-shadow: 0 4px 16px rgba(124,58,237,0.35); transform: translateY(-1px); }
.ec-btn-primary:active { transform: translateY(0); box-shadow: none; }
.ec-btn-accent { background-color: var(--ec-accent); color: #fff; border-color: var(--ec-accent); }
.ec-btn-accent:hover { background-color: var(--ec-accent-hover); border-color: var(--ec-accent-hover); box-shadow: 0 4px 16px rgba(249,115,22,0.35); transform: translateY(-1px); }
.ec-btn-outline { background-color: var(--ec-surface); color: var(--ec-text); border-color: var(--ec-border-strong); }
.ec-btn-outline:hover { background-color: var(--ec-surface-2); border-color: var(--ec-primary); color: var(--ec-primary); transform: translateY(-1px); }
.ec-btn-ghost { background-color: transparent; color: var(--ec-text-muted); border-color: transparent; }
.ec-btn-ghost:hover { background-color: var(--ec-surface-2); color: var(--ec-text); }
.ec-btn-danger { background-color: var(--ec-danger); color: #fff; border-color: var(--ec-danger); }
.ec-btn-danger:hover { background-color: #B91C1C; box-shadow: 0 4px 16px rgba(220,38,38,0.35); transform: translateY(-1px); }
.ec-btn-sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
.ec-btn-lg { padding: 0.85rem 1.85rem; font-size: 1rem; }
.ec-btn-block { width: 100%; }
.ec-btn-icon { width: 38px; height: 38px; padding: 0; border-radius: var(--ec-radius-sm); }
/* ── Form Controls ────────────── */
.ec-input {
width: 100%;
padding: 0.65rem 1rem;
border: 2px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text);
background-color: var(--ec-surface);
outline: none;
transition: var(--ec-transition);
}
.ec-input::placeholder { color: var(--ec-text-light); font-weight: 500; }
.ec-input:focus { border-color: var(--ec-primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
.ec-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--ec-font-heading);
font-weight: 700;
font-size: 0.82rem;
color: var(--ec-text);
letter-spacing: -0.01em;
}
.ec-select {
width: 100%;
padding: 0.65rem 2rem 0.65rem 1rem;
border: 2px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text);
background-color: var(--ec-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='%2364748B' 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.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--ec-transition);
}
.ec-select:focus { border-color: var(--ec-primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
/* ── Badges ───────────────────── */
.ec-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.65rem;
border-radius: var(--ec-radius-pill);
font-family: var(--ec-font-heading);
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
letter-spacing: 0.01em;
}
.ec-badge-sale { background-color: var(--ec-accent); color: #fff; }
.ec-badge-new { background-color: var(--ec-primary); color: #fff; }
.ec-badge-success { background-color: var(--ec-success-muted); color: #14532D; }
.ec-badge-danger { background-color: var(--ec-danger-muted); color: #7F1D1D; }
.ec-badge-default { background-color: var(--ec-surface-2); color: var(--ec-text-muted); border: 1px solid var(--ec-border); }
.ec-badge-pending { background-color: var(--ec-gold-muted); color: #713F12; }
/* ── Star Rating ──────────────── */
.ec-stars {
display: inline-flex;
align-items: center;
gap: 1px;
color: var(--ec-gold);
font-size: 0.85rem;
}
.ec-stars-count {
font-family: var(--ec-font-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--ec-text-muted);
margin-left: 0.3rem;
}
/* ── Price display ────────────── */
.ec-price {
font-family: var(--ec-font-heading);
font-size: 1.25rem;
font-weight: 800;
color: var(--ec-text);
letter-spacing: -0.02em;
}
.ec-price-original {
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text-light);
text-decoration: line-through;
}
.ec-price-sale { color: var(--ec-accent); }
/* ── Toggle ───────────────────── */
.ec-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.ec-toggle input { opacity: 0; width: 0; height: 0; }
.ec-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--ec-border-strong); border-radius: 24px; transition: var(--ec-transition); }
.ec-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--ec-transition); box-shadow: var(--ec-shadow-xs); }
.ec-toggle input:checked + .ec-toggle-slider { background-color: var(--ec-primary); }
.ec-toggle input:checked + .ec-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.ec-divider { border: none; border-top: 1px solid var(--ec-border); margin: 0; }
/* ── Logo ─────────────────────── */
.ec-logo {
display: inline-flex;
align-items: center;
gap: 0.55rem;
text-decoration: none;
font-family: var(--ec-font-heading);
font-weight: 800;
font-size: 1.25rem;
color: var(--ec-text);
letter-spacing: -0.03em;
}
.ec-logo-icon {
width: 34px;
height: 34px;
background: linear-gradient(135deg, #8B5CF6, #7C3AED);
border-radius: var(--ec-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.1rem;
}
/* ── Trust badges ─────────────── */
.ec-trust-strip {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.ec-trust-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--ec-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--ec-text-muted);
}
.ec-trust-item svg { color: var(--ec-primary); flex-shrink: 0; }
/* ── Utilities ────────────────── */
.text-primary { color: var(--ec-primary) !important; }
.text-accent { color: var(--ec-accent) !important; }
.text-success { color: var(--ec-success) !important; }
.text-danger { color: var(--ec-danger) !important; }
.text-muted { color: var(--ec-text-muted) !important; }
.text-light { color: var(--ec-text-light) !important; }
.ec-link-sm {
font-family: var(--ec-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--ec-primary);
text-decoration: none;
transition: var(--ec-transition);
}
.ec-link-sm:hover {
color: var(--ec-primary-hover);
}
/* --- COMPONENT STYLES --- */
.ec-split-hero {
display: grid;
grid-template-columns: 1fr 340px;
gap: 1.5rem;
max-width: 1100px;
margin: 0 auto;
align-items: start;
}
.ec-split-main {
padding: 3rem !important;
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: flex-start;
}
.ec-split-title {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.15;
}
.ec-split-desc {
font-size: 1.05rem;
color: var(--ec-text-muted);
line-height: 1.7;
}
/* Features */
.ec-split-features {
list-style: none;
padding: 0;
margin: 0.5rem 0;
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.ec-split-features li {
display: flex;
align-items: flex-start;
gap: 0.85rem;
}
.ec-feat-icon {
font-size: 1.25rem;
width: 36px;
height: 36px;
background-color: var(--ec-surface-2);
border-radius: var(--ec-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ec-split-features strong {
font-family: var(--ec-font-heading);
font-size: 0.95rem;
font-weight: 700;
color: var(--ec-text);
}
.ec-split-features p {
font-size: 0.85rem;
color: var(--ec-text-muted);
margin-top: 0.1rem;
}
.ec-split-actions-row {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
flex-wrap: wrap;
border-top: 1px solid var(--ec-border);
padding-top: 1.5rem;
margin-top: 0.5rem;
}
.ec-split-price-box {
display: flex;
flex-direction: column;
margin-right: auto;
}
/* Sidebar Product Widget */
.ec-preview-widget {
padding: 0 !important;
overflow: hidden;
}
.ec-widget-image-block {
height: 260px;
background: linear-gradient(135deg, var(--ec-primary-muted), #FFFFFF);
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.ec-widget-badge {
position: absolute;
top: 1rem;
left: 1rem;
}
.ec-widget-bag-icon {
font-size: 5rem;
filter: drop-shadow(0 8px 16px rgba(15,23,42,0.12));
transition: var(--ec-transition-slow);
}
.ec-preview-widget:hover .ec-widget-bag-icon {
transform: scale(1.08) translateY(-4px) rotate(3deg);
}
.ec-widget-swatches {
position: absolute;
bottom: 1rem;
right: 1rem;
display: flex;
gap: 0.4rem;
}
.ec-widget-swatch {
width: 12px;
height: 12px;
border-radius: 50%;
cursor: pointer;
border: 1px solid rgba(255,255,255,0.8);
box-shadow: var(--ec-shadow-xs);
transition: var(--ec-transition);
}
.ec-widget-swatch.active {
transform: scale(1.25);
outline: 2px solid var(--ec-primary);
outline-offset: 1px;
}
.ec-widget-info {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.ec-widget-title {
font-size: 1rem;
font-weight: 700;
}
.ec-widget-stock {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
font-weight: 700;
color: var(--ec-success);
}
.ec-stock-dot {
width: 6px;
height: 6px;
background-color: var(--ec-success);
border-radius: 50%;
animation: ec-pulse 2s ease infinite;
}
@keyframes ec-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
@media (max-width: 900px) {
.ec-split-hero { grid-template-columns: 1fr; }
.ec-split-main { padding: 2rem !important; }
}
Forms
Customer Login
HTML
<div class="ec-login-wrap">
<div class="ec-login-card ec-card">
<div class="ec-login-brand">
<a href="#" class="ec-login-logo">
<span class="ec-logo-icon" style="font-size:1rem; width:30px; height:30px;">🛍️</span>
<span>Shopvault</span>
</a>
<h2 class="ec-login-title">Welcome Back</h2>
<p class="ec-login-sub">Sign in to track orders and checkout faster.</p>
</div>
<form class="ec-login-form" onsubmit="return false;">
<div class="ec-form-group">
<label class="ec-label" for="cust-email">Email Address</label>
<input type="email" id="cust-email" class="ec-input" placeholder="[email protected]" value="[email protected]">
</div>
<div class="ec-form-group">
<div class="ec-label-row">
<label class="ec-label" for="cust-pass">Password</label>
<a href="#" class="ec-link-sm">Forgot password?</a>
</div>
<input type="password" id="cust-pass" class="ec-input" placeholder="••••••••••" value="••••••••••">
</div>
<div class="ec-login-remember">
<label class="ec-checkbox-label">
<input type="checkbox" class="ec-checkbox" checked>
<span>Keep me logged in</span>
</label>
</div>
<button type="submit" class="ec-btn ec-btn-primary ec-btn-block ec-btn-lg">Sign In</button>
</form>
<div class="ec-login-divider">
<span>or sign in with</span>
</div>
<div class="ec-social-login">
<button class="ec-btn ec-btn-outline ec-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
</button>
</div>
<div class="ec-login-signup">
<span>New customer?</span> <a href="#" class="ec-link-sm">Create an account</a>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Customer Login */
/* NOTE: This component requires base.css to be included in your page. */
.ec-login-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 560px;
background-color: var(--ec-bg);
padding: 2rem;
}
.ec-login-card {
width: 100%;
max-width: 420px;
padding: 2.5rem !important;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.ec-login-brand {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.ec-login-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--ec-font-heading);
font-weight: 800;
font-size: 1.1rem;
color: var(--ec-text);
letter-spacing: -0.02em;
}
.ec-login-title {
font-size: 1.5rem;
margin-top: 0.25rem;
}
.ec-login-sub {
font-size: 0.9rem;
color: var(--ec-text-muted);
}
.ec-login-form {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.ec-form-group {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.ec-label-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.ec-link-sm {
font-family: var(--ec-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--ec-primary);
text-decoration: none;
transition: var(--ec-transition);
}
.ec-link-sm:hover {
color: var(--ec-primary-hover);
}
.ec-login-remember {
display: flex;
align-items: center;
}
.ec-checkbox-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--ec-font-body);
font-size: 0.85rem;
font-weight: 600;
color: var(--ec-text-muted);
cursor: pointer;
user-select: none;
}
.ec-checkbox {
width: 16px;
height: 16px;
accent-color: var(--ec-primary);
cursor: pointer;
}
.ec-login-divider {
display: flex;
align-items: center;
text-align: center;
color: var(--ec-text-light);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ec-login-divider::before, .ec-login-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid var(--ec-border);
}
.ec-login-divider:not(:empty)::before { margin-right: .75em; }
.ec-login-divider:not(:empty)::after { margin-left: .75em; }
.ec-login-signup {
text-align: center;
font-size: 0.85rem;
font-weight: 600;
color: var(--ec-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=Sora:wght@400;500;600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap');
/* ===========================
E-commerce Starter Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--ec-bg: #F8FAFC;
--ec-surface: #FFFFFF;
--ec-surface-2: #F1F5F9;
--ec-surface-dark: #0F172A;
/* Brand */
--ec-primary: #7C3AED;
--ec-primary-hover: #6D28D9;
--ec-primary-muted: #EDE9FE;
--ec-accent: #F97316;
--ec-accent-hover: #EA6C08;
--ec-accent-muted: #FFF7ED;
--ec-success: #16A34A;
--ec-success-muted: #DCFCE7;
--ec-danger: #DC2626;
--ec-danger-muted: #FEE2E2;
--ec-gold: #EAB308;
--ec-gold-muted: #FEF9C3;
/* Text */
--ec-text: #0F172A;
--ec-text-muted: #64748B;
--ec-text-light: #94A3B8;
/* Borders */
--ec-border: #E2E8F0;
--ec-border-strong: #CBD5E1;
/* Radius */
--ec-radius-sm: 8px;
--ec-radius: 12px;
--ec-radius-lg: 18px;
--ec-radius-pill: 100px;
/* Fonts */
--ec-font-heading: 'Sora', sans-serif;
--ec-font-body: 'Nunito', sans-serif;
/* Shadows */
--ec-shadow-xs: 0 1px 2px rgba(15,23,42,0.05);
--ec-shadow-sm: 0 1px 3px rgba(15,23,42,0.07), 0 4px 16px rgba(15,23,42,0.04);
--ec-shadow: 0 4px 12px rgba(15,23,42,0.08), 0 16px 40px rgba(15,23,42,0.06);
--ec-shadow-lg: 0 8px 24px rgba(15,23,42,0.12), 0 32px 64px rgba(15,23,42,0.08);
--ec-shadow-product:0 2px 8px rgba(15,23,42,0.08), 0 8px 32px rgba(15,23,42,0.08);
/* Transition */
--ec-transition: all 0.2s ease;
--ec-transition-slow: all 0.3s ease;
}
body {
margin: 0;
font-family: var(--ec-font-body);
color: var(--ec-text);
background-color: var(--ec-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.ec-card {
background-color: var(--ec-surface);
border: 1px solid var(--ec-border);
border-radius: var(--ec-radius);
box-shadow: var(--ec-shadow-sm);
padding: 1.75rem;
transition: var(--ec-transition);
}
.ec-card:hover { box-shadow: var(--ec-shadow); }
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ec-font-heading);
font-weight: 700;
margin: 0;
color: var(--ec-text);
letter-spacing: -0.02em;
line-height: 1.2;
}
p { font-family: var(--ec-font-body); color: var(--ec-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.ec-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.65rem 1.35rem;
font-family: var(--ec-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--ec-radius-sm);
border: 2px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--ec-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
letter-spacing: -0.01em;
}
.ec-btn:focus-visible { outline: 2px solid var(--ec-primary); outline-offset: 2px; }
.ec-btn-primary { background-color: var(--ec-primary); color: #fff; border-color: var(--ec-primary); }
.ec-btn-primary:hover { background-color: var(--ec-primary-hover); border-color: var(--ec-primary-hover); box-shadow: 0 4px 16px rgba(124,58,237,0.35); transform: translateY(-1px); }
.ec-btn-primary:active { transform: translateY(0); box-shadow: none; }
.ec-btn-accent { background-color: var(--ec-accent); color: #fff; border-color: var(--ec-accent); }
.ec-btn-accent:hover { background-color: var(--ec-accent-hover); border-color: var(--ec-accent-hover); box-shadow: 0 4px 16px rgba(249,115,22,0.35); transform: translateY(-1px); }
.ec-btn-outline { background-color: var(--ec-surface); color: var(--ec-text); border-color: var(--ec-border-strong); }
.ec-btn-outline:hover { background-color: var(--ec-surface-2); border-color: var(--ec-primary); color: var(--ec-primary); transform: translateY(-1px); }
.ec-btn-ghost { background-color: transparent; color: var(--ec-text-muted); border-color: transparent; }
.ec-btn-ghost:hover { background-color: var(--ec-surface-2); color: var(--ec-text); }
.ec-btn-danger { background-color: var(--ec-danger); color: #fff; border-color: var(--ec-danger); }
.ec-btn-danger:hover { background-color: #B91C1C; box-shadow: 0 4px 16px rgba(220,38,38,0.35); transform: translateY(-1px); }
.ec-btn-sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
.ec-btn-lg { padding: 0.85rem 1.85rem; font-size: 1rem; }
.ec-btn-block { width: 100%; }
.ec-btn-icon { width: 38px; height: 38px; padding: 0; border-radius: var(--ec-radius-sm); }
/* ── Form Controls ────────────── */
.ec-input {
width: 100%;
padding: 0.65rem 1rem;
border: 2px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text);
background-color: var(--ec-surface);
outline: none;
transition: var(--ec-transition);
}
.ec-input::placeholder { color: var(--ec-text-light); font-weight: 500; }
.ec-input:focus { border-color: var(--ec-primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
.ec-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--ec-font-heading);
font-weight: 700;
font-size: 0.82rem;
color: var(--ec-text);
letter-spacing: -0.01em;
}
.ec-select {
width: 100%;
padding: 0.65rem 2rem 0.65rem 1rem;
border: 2px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text);
background-color: var(--ec-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='%2364748B' 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.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--ec-transition);
}
.ec-select:focus { border-color: var(--ec-primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
/* ── Badges ───────────────────── */
.ec-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.65rem;
border-radius: var(--ec-radius-pill);
font-family: var(--ec-font-heading);
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
letter-spacing: 0.01em;
}
.ec-badge-sale { background-color: var(--ec-accent); color: #fff; }
.ec-badge-new { background-color: var(--ec-primary); color: #fff; }
.ec-badge-success { background-color: var(--ec-success-muted); color: #14532D; }
.ec-badge-danger { background-color: var(--ec-danger-muted); color: #7F1D1D; }
.ec-badge-default { background-color: var(--ec-surface-2); color: var(--ec-text-muted); border: 1px solid var(--ec-border); }
.ec-badge-pending { background-color: var(--ec-gold-muted); color: #713F12; }
/* ── Star Rating ──────────────── */
.ec-stars {
display: inline-flex;
align-items: center;
gap: 1px;
color: var(--ec-gold);
font-size: 0.85rem;
}
.ec-stars-count {
font-family: var(--ec-font-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--ec-text-muted);
margin-left: 0.3rem;
}
/* ── Price display ────────────── */
.ec-price {
font-family: var(--ec-font-heading);
font-size: 1.25rem;
font-weight: 800;
color: var(--ec-text);
letter-spacing: -0.02em;
}
.ec-price-original {
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text-light);
text-decoration: line-through;
}
.ec-price-sale { color: var(--ec-accent); }
/* ── Toggle ───────────────────── */
.ec-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.ec-toggle input { opacity: 0; width: 0; height: 0; }
.ec-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--ec-border-strong); border-radius: 24px; transition: var(--ec-transition); }
.ec-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--ec-transition); box-shadow: var(--ec-shadow-xs); }
.ec-toggle input:checked + .ec-toggle-slider { background-color: var(--ec-primary); }
.ec-toggle input:checked + .ec-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.ec-divider { border: none; border-top: 1px solid var(--ec-border); margin: 0; }
/* ── Logo ─────────────────────── */
.ec-logo {
display: inline-flex;
align-items: center;
gap: 0.55rem;
text-decoration: none;
font-family: var(--ec-font-heading);
font-weight: 800;
font-size: 1.25rem;
color: var(--ec-text);
letter-spacing: -0.03em;
}
.ec-logo-icon {
width: 34px;
height: 34px;
background: linear-gradient(135deg, #8B5CF6, #7C3AED);
border-radius: var(--ec-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.1rem;
}
/* ── Trust badges ─────────────── */
.ec-trust-strip {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.ec-trust-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--ec-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--ec-text-muted);
}
.ec-trust-item svg { color: var(--ec-primary); flex-shrink: 0; }
/* ── Utilities ────────────────── */
.text-primary { color: var(--ec-primary) !important; }
.text-accent { color: var(--ec-accent) !important; }
.text-success { color: var(--ec-success) !important; }
.text-danger { color: var(--ec-danger) !important; }
.text-muted { color: var(--ec-text-muted) !important; }
.text-light { color: var(--ec-text-light) !important; }
.ec-link-sm {
font-family: var(--ec-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--ec-primary);
text-decoration: none;
transition: var(--ec-transition);
}
.ec-link-sm:hover {
color: var(--ec-primary-hover);
}
/* --- COMPONENT STYLES --- */
.ec-login-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 560px;
background-color: var(--ec-bg);
padding: 2rem;
}
.ec-login-card {
width: 100%;
max-width: 420px;
padding: 2.5rem !important;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.ec-login-brand {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.ec-login-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--ec-font-heading);
font-weight: 800;
font-size: 1.1rem;
color: var(--ec-text);
letter-spacing: -0.02em;
}
.ec-login-title {
font-size: 1.5rem;
margin-top: 0.25rem;
}
.ec-login-sub {
font-size: 0.9rem;
color: var(--ec-text-muted);
}
.ec-login-form {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.ec-form-group {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.ec-label-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.ec-link-sm {
font-family: var(--ec-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--ec-primary);
text-decoration: none;
transition: var(--ec-transition);
}
.ec-link-sm:hover {
color: var(--ec-primary-hover);
}
.ec-login-remember {
display: flex;
align-items: center;
}
.ec-checkbox-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--ec-font-body);
font-size: 0.85rem;
font-weight: 600;
color: var(--ec-text-muted);
cursor: pointer;
user-select: none;
}
.ec-checkbox {
width: 16px;
height: 16px;
accent-color: var(--ec-primary);
cursor: pointer;
}
.ec-login-divider {
display: flex;
align-items: center;
text-align: center;
color: var(--ec-text-light);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ec-login-divider::before, .ec-login-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid var(--ec-border);
}
.ec-login-divider:not(:empty)::before { margin-right: .75em; }
.ec-login-divider:not(:empty)::after { margin-left: .75em; }
.ec-login-signup {
text-align: center;
font-size: 0.85rem;
font-weight: 600;
color: var(--ec-text-muted);
margin-top: 0.5rem;
}
Shipping & Billing
HTML
<div class="ec-settings-panel">
<div class="ec-settings-header">
<div>
<h3>Shipping & Billing</h3>
<p>Manage your delivery addresses and payment configurations.</p>
</div>
<div class="ec-settings-acts">
<button class="ec-btn ec-btn-outline ec-btn-sm">Discard</button>
<button class="ec-btn ec-btn-primary ec-btn-sm">Save Changes</button>
</div>
</div>
<div class="ec-settings-body">
<section class="ec-settings-sec ec-card">
<h4>Shipping Address</h4>
<p>Where your purchases will be delivered.</p>
<hr class="ec-divider">
<div class="ec-settings-grid">
<div class="ec-form-group">
<label class="ec-label" for="shp-first">First Name</label>
<input type="text" id="shp-first" class="ec-input" value="Sarah">
</div>
<div class="ec-form-group">
<label class="ec-label" for="shp-last">Last Name</label>
<input type="text" id="shp-last" class="ec-input" value="Jenkins">
</div>
<div class="ec-form-group" style="grid-column: span 2;">
<label class="ec-label" for="shp-addr">Street Address</label>
<input type="text" id="shp-addr" class="ec-input" value="120 Cedar Lane, Apt 4B">
</div>
<div class="ec-form-group">
<label class="ec-label" for="shp-city">City</label>
<input type="text" id="shp-city" class="ec-input" value="New York">
</div>
<div class="ec-form-group">
<label class="ec-label" for="shp-zip">ZIP / Postal Code</label>
<input type="text" id="shp-zip" class="ec-input" value="10001">
</div>
</div>
<div class="ec-form-inline">
<label class="ec-checkbox-label">
<input type="checkbox" class="ec-checkbox" checked>
<span>Set as default shipping address</span>
</label>
</div>
</section>
<section class="ec-settings-sec ec-card">
<h4>Billing Preferences</h4>
<p>Manage how you pay and receive invoices.</p>
<hr class="ec-divider">
<div class="ec-toggle-list">
<div class="ec-toggle-row">
<div>
<div class="ec-toggle-label">Same as Shipping</div>
<div class="ec-toggle-desc">Set billing address identical to delivery.</div>
</div>
<label class="ec-toggle"><input type="checkbox" checked><span class="ec-toggle-slider"></span></label>
</div>
<hr class="ec-divider">
<div class="ec-toggle-row">
<div>
<div class="ec-toggle-label">Save Card for One-click Checkout</div>
<div class="ec-toggle-desc">Store credit card securely for faster purchases.</div>
</div>
<label class="ec-toggle"><input type="checkbox"><span class="ec-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. */
.ec-settings-panel {
max-width: 860px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.ec-settings-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.ec-settings-header h3 {
font-size: 1.35rem;
margin-bottom: 0.3rem;
}
.ec-settings-acts {
display: flex;
gap: 0.75rem;
flex-shrink: 0;
}
.ec-settings-body {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.ec-settings-sec {
padding: 2rem !important;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.ec-settings-sec h4 {
font-size: 1rem;
}
.ec-settings-sec > p {
font-size: 0.88rem;
margin-top: -0.75rem;
}
.ec-settings-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.ec-form-inline {
display: flex;
align-items: center;
margin-top: 0.5rem;
}
.ec-toggle-list {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.ec-toggle-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
}
.ec-toggle-label {
font-family: var(--ec-font-heading);
font-size: 0.92rem;
font-weight: 700;
color: var(--ec-text);
margin-bottom: 0.2rem;
}
.ec-toggle-desc {
font-size: 0.83rem;
color: var(--ec-text-muted);
font-weight: 500;
line-height: 1.5;
}
@media (max-width: 600px) {
.ec-settings-grid { grid-template-columns: 1fr; }
.ec-settings-grid > div { grid-column: span 1 !important; }
.ec-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=Sora:wght@400;500;600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap');
/* ===========================
E-commerce Starter Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--ec-bg: #F8FAFC;
--ec-surface: #FFFFFF;
--ec-surface-2: #F1F5F9;
--ec-surface-dark: #0F172A;
/* Brand */
--ec-primary: #7C3AED;
--ec-primary-hover: #6D28D9;
--ec-primary-muted: #EDE9FE;
--ec-accent: #F97316;
--ec-accent-hover: #EA6C08;
--ec-accent-muted: #FFF7ED;
--ec-success: #16A34A;
--ec-success-muted: #DCFCE7;
--ec-danger: #DC2626;
--ec-danger-muted: #FEE2E2;
--ec-gold: #EAB308;
--ec-gold-muted: #FEF9C3;
/* Text */
--ec-text: #0F172A;
--ec-text-muted: #64748B;
--ec-text-light: #94A3B8;
/* Borders */
--ec-border: #E2E8F0;
--ec-border-strong: #CBD5E1;
/* Radius */
--ec-radius-sm: 8px;
--ec-radius: 12px;
--ec-radius-lg: 18px;
--ec-radius-pill: 100px;
/* Fonts */
--ec-font-heading: 'Sora', sans-serif;
--ec-font-body: 'Nunito', sans-serif;
/* Shadows */
--ec-shadow-xs: 0 1px 2px rgba(15,23,42,0.05);
--ec-shadow-sm: 0 1px 3px rgba(15,23,42,0.07), 0 4px 16px rgba(15,23,42,0.04);
--ec-shadow: 0 4px 12px rgba(15,23,42,0.08), 0 16px 40px rgba(15,23,42,0.06);
--ec-shadow-lg: 0 8px 24px rgba(15,23,42,0.12), 0 32px 64px rgba(15,23,42,0.08);
--ec-shadow-product:0 2px 8px rgba(15,23,42,0.08), 0 8px 32px rgba(15,23,42,0.08);
/* Transition */
--ec-transition: all 0.2s ease;
--ec-transition-slow: all 0.3s ease;
}
body {
margin: 0;
font-family: var(--ec-font-body);
color: var(--ec-text);
background-color: var(--ec-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.ec-card {
background-color: var(--ec-surface);
border: 1px solid var(--ec-border);
border-radius: var(--ec-radius);
box-shadow: var(--ec-shadow-sm);
padding: 1.75rem;
transition: var(--ec-transition);
}
.ec-card:hover { box-shadow: var(--ec-shadow); }
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ec-font-heading);
font-weight: 700;
margin: 0;
color: var(--ec-text);
letter-spacing: -0.02em;
line-height: 1.2;
}
p { font-family: var(--ec-font-body); color: var(--ec-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.ec-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.65rem 1.35rem;
font-family: var(--ec-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--ec-radius-sm);
border: 2px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--ec-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
letter-spacing: -0.01em;
}
.ec-btn:focus-visible { outline: 2px solid var(--ec-primary); outline-offset: 2px; }
.ec-btn-primary { background-color: var(--ec-primary); color: #fff; border-color: var(--ec-primary); }
.ec-btn-primary:hover { background-color: var(--ec-primary-hover); border-color: var(--ec-primary-hover); box-shadow: 0 4px 16px rgba(124,58,237,0.35); transform: translateY(-1px); }
.ec-btn-primary:active { transform: translateY(0); box-shadow: none; }
.ec-btn-accent { background-color: var(--ec-accent); color: #fff; border-color: var(--ec-accent); }
.ec-btn-accent:hover { background-color: var(--ec-accent-hover); border-color: var(--ec-accent-hover); box-shadow: 0 4px 16px rgba(249,115,22,0.35); transform: translateY(-1px); }
.ec-btn-outline { background-color: var(--ec-surface); color: var(--ec-text); border-color: var(--ec-border-strong); }
.ec-btn-outline:hover { background-color: var(--ec-surface-2); border-color: var(--ec-primary); color: var(--ec-primary); transform: translateY(-1px); }
.ec-btn-ghost { background-color: transparent; color: var(--ec-text-muted); border-color: transparent; }
.ec-btn-ghost:hover { background-color: var(--ec-surface-2); color: var(--ec-text); }
.ec-btn-danger { background-color: var(--ec-danger); color: #fff; border-color: var(--ec-danger); }
.ec-btn-danger:hover { background-color: #B91C1C; box-shadow: 0 4px 16px rgba(220,38,38,0.35); transform: translateY(-1px); }
.ec-btn-sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
.ec-btn-lg { padding: 0.85rem 1.85rem; font-size: 1rem; }
.ec-btn-block { width: 100%; }
.ec-btn-icon { width: 38px; height: 38px; padding: 0; border-radius: var(--ec-radius-sm); }
/* ── Form Controls ────────────── */
.ec-input {
width: 100%;
padding: 0.65rem 1rem;
border: 2px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text);
background-color: var(--ec-surface);
outline: none;
transition: var(--ec-transition);
}
.ec-input::placeholder { color: var(--ec-text-light); font-weight: 500; }
.ec-input:focus { border-color: var(--ec-primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
.ec-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--ec-font-heading);
font-weight: 700;
font-size: 0.82rem;
color: var(--ec-text);
letter-spacing: -0.01em;
}
.ec-select {
width: 100%;
padding: 0.65rem 2rem 0.65rem 1rem;
border: 2px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text);
background-color: var(--ec-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='%2364748B' 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.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--ec-transition);
}
.ec-select:focus { border-color: var(--ec-primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
/* ── Badges ───────────────────── */
.ec-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.65rem;
border-radius: var(--ec-radius-pill);
font-family: var(--ec-font-heading);
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
letter-spacing: 0.01em;
}
.ec-badge-sale { background-color: var(--ec-accent); color: #fff; }
.ec-badge-new { background-color: var(--ec-primary); color: #fff; }
.ec-badge-success { background-color: var(--ec-success-muted); color: #14532D; }
.ec-badge-danger { background-color: var(--ec-danger-muted); color: #7F1D1D; }
.ec-badge-default { background-color: var(--ec-surface-2); color: var(--ec-text-muted); border: 1px solid var(--ec-border); }
.ec-badge-pending { background-color: var(--ec-gold-muted); color: #713F12; }
/* ── Star Rating ──────────────── */
.ec-stars {
display: inline-flex;
align-items: center;
gap: 1px;
color: var(--ec-gold);
font-size: 0.85rem;
}
.ec-stars-count {
font-family: var(--ec-font-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--ec-text-muted);
margin-left: 0.3rem;
}
/* ── Price display ────────────── */
.ec-price {
font-family: var(--ec-font-heading);
font-size: 1.25rem;
font-weight: 800;
color: var(--ec-text);
letter-spacing: -0.02em;
}
.ec-price-original {
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text-light);
text-decoration: line-through;
}
.ec-price-sale { color: var(--ec-accent); }
/* ── Toggle ───────────────────── */
.ec-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.ec-toggle input { opacity: 0; width: 0; height: 0; }
.ec-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--ec-border-strong); border-radius: 24px; transition: var(--ec-transition); }
.ec-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--ec-transition); box-shadow: var(--ec-shadow-xs); }
.ec-toggle input:checked + .ec-toggle-slider { background-color: var(--ec-primary); }
.ec-toggle input:checked + .ec-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.ec-divider { border: none; border-top: 1px solid var(--ec-border); margin: 0; }
/* ── Logo ─────────────────────── */
.ec-logo {
display: inline-flex;
align-items: center;
gap: 0.55rem;
text-decoration: none;
font-family: var(--ec-font-heading);
font-weight: 800;
font-size: 1.25rem;
color: var(--ec-text);
letter-spacing: -0.03em;
}
.ec-logo-icon {
width: 34px;
height: 34px;
background: linear-gradient(135deg, #8B5CF6, #7C3AED);
border-radius: var(--ec-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.1rem;
}
/* ── Trust badges ─────────────── */
.ec-trust-strip {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.ec-trust-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--ec-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--ec-text-muted);
}
.ec-trust-item svg { color: var(--ec-primary); flex-shrink: 0; }
/* ── Utilities ────────────────── */
.text-primary { color: var(--ec-primary) !important; }
.text-accent { color: var(--ec-accent) !important; }
.text-success { color: var(--ec-success) !important; }
.text-danger { color: var(--ec-danger) !important; }
.text-muted { color: var(--ec-text-muted) !important; }
.text-light { color: var(--ec-text-light) !important; }
.ec-link-sm {
font-family: var(--ec-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--ec-primary);
text-decoration: none;
transition: var(--ec-transition);
}
.ec-link-sm:hover {
color: var(--ec-primary-hover);
}
/* --- COMPONENT STYLES --- */
.ec-settings-panel {
max-width: 860px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.ec-settings-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.ec-settings-header h3 {
font-size: 1.35rem;
margin-bottom: 0.3rem;
}
.ec-settings-acts {
display: flex;
gap: 0.75rem;
flex-shrink: 0;
}
.ec-settings-body {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.ec-settings-sec {
padding: 2rem !important;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.ec-settings-sec h4 {
font-size: 1rem;
}
.ec-settings-sec > p {
font-size: 0.88rem;
margin-top: -0.75rem;
}
.ec-settings-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.ec-form-inline {
display: flex;
align-items: center;
margin-top: 0.5rem;
}
.ec-toggle-list {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.ec-toggle-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
}
.ec-toggle-label {
font-family: var(--ec-font-heading);
font-size: 0.92rem;
font-weight: 700;
color: var(--ec-text);
margin-bottom: 0.2rem;
}
.ec-toggle-desc {
font-size: 0.83rem;
color: var(--ec-text-muted);
font-weight: 500;
line-height: 1.5;
}
@media (max-width: 600px) {
.ec-settings-grid { grid-template-columns: 1fr; }
.ec-settings-grid > div { grid-column: span 1 !important; }
.ec-settings-header { flex-direction: column; }
}
Cards
Product Cards
HTML
<div class="ec-product-grid">
<!-- Product 1: Sale Item -->
<div class="ec-product-card ec-card">
<div class="ec-product-media">
<span class="ec-badge ec-badge-sale ec-product-badge">SALE −20%</span>
<div class="ec-product-placeholder">🎧</div>
<div class="ec-product-hover-actions">
<button class="ec-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="ec-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="ec-product-details">
<span class="ec-product-cat text-muted">Electronics</span>
<h4 class="ec-product-title">Noise-Cancelling Wireless Headphones</h4>
<div class="ec-stars">
⭐⭐⭐⭐⭐
<span class="ec-stars-count">(84)</span>
</div>
<div class="ec-product-price-row">
<div class="ec-price-box">
<span class="ec-price ec-price-sale">$199.00</span>
<span class="ec-price-original">$249.00</span>
</div>
<button class="ec-btn ec-btn-primary ec-btn-sm ec-btn-icon" title="Add to Cart">
<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: Sold Out Item -->
<div class="ec-product-card ec-card ec-product-soldout">
<div class="ec-product-media">
<span class="ec-badge ec-badge-default ec-product-badge">SOLD OUT</span>
<div class="ec-product-placeholder">🕶️</div>
</div>
<div class="ec-product-details">
<span class="ec-product-cat text-muted">Accessories</span>
<h4 class="ec-product-title">Polarized Retro Sunglasses</h4>
<div class="ec-stars">
⭐⭐⭐⭐☆
<span class="ec-stars-count">(42)</span>
</div>
<div class="ec-product-price-row">
<div class="ec-price-box">
<span class="ec-price">$49.00</span>
</div>
<button class="ec-btn ec-btn-outline ec-btn-sm" disabled style="cursor:not-allowed;">Out of Stock</button>
</div>
</div>
</div>
<!-- Product 3: New Arrival -->
<div class="ec-product-card ec-card">
<div class="ec-product-media">
<span class="ec-badge ec-badge-new ec-product-badge">NEW</span>
<div class="ec-product-placeholder">⌚</div>
<div class="ec-product-hover-actions">
<button class="ec-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="ec-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="ec-product-details">
<span class="ec-product-cat text-muted">Wearables</span>
<h4 class="ec-product-title">Minimalist Quartz Wristwatch</h4>
<div class="ec-stars">
⭐⭐⭐⭐⭐
<span class="ec-stars-count">(19)</span>
</div>
<div class="ec-product-price-row">
<div class="ec-price-box">
<span class="ec-price">$120.00</span>
</div>
<button class="ec-btn ec-btn-primary ec-btn-sm ec-btn-icon" title="Add to Cart">
<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. */
.ec-product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1100px;
margin: 0 auto;
}
.ec-product-card {
padding: 0 !important;
overflow: hidden;
display: flex;
flex-direction: column;
}
.ec-product-media {
height: 240px;
background-color: var(--ec-surface-2);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.ec-product-placeholder {
font-size: 5rem;
filter: drop-shadow(0 8px 16px rgba(15,23,42,0.08));
transition: var(--ec-transition-slow);
}
.ec-product-card:hover .ec-product-placeholder {
transform: scale(1.08) translateY(-4px);
}
.ec-product-badge {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 2;
}
.ec-product-hover-actions {
position: absolute;
inset: 0;
background-color: rgba(15,23,42,0.4);
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
opacity: 0;
pointer-events: none;
transition: var(--ec-transition);
}
.ec-product-card:hover .ec-product-hover-actions {
opacity: 1;
pointer-events: auto;
}
.ec-product-action-btn {
width: 42px;
height: 42px;
border-radius: 50%;
border: none;
background-color: var(--ec-surface);
color: var(--ec-text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--ec-transition);
box-shadow: var(--ec-shadow-sm);
}
.ec-product-action-btn:hover {
background-color: var(--ec-primary);
color: #fff;
transform: translateY(-2px);
}
.ec-product-details {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
flex: 1;
}
.ec-product-cat {
font-family: var(--ec-font-heading);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ec-product-title {
font-size: 0.95rem;
font-weight: 700;
color: var(--ec-text);
line-height: 1.4;
height: 2.8em;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.ec-product-price-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.5rem;
border-top: 1px solid var(--ec-border);
padding-top: 1rem;
}
.ec-price-box {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
/* Soldout State */
.ec-product-soldout .ec-product-placeholder {
opacity: 0.4;
}
.ec-product-soldout .ec-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=Sora:wght@400;500;600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap');
/* ===========================
E-commerce Starter Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--ec-bg: #F8FAFC;
--ec-surface: #FFFFFF;
--ec-surface-2: #F1F5F9;
--ec-surface-dark: #0F172A;
/* Brand */
--ec-primary: #7C3AED;
--ec-primary-hover: #6D28D9;
--ec-primary-muted: #EDE9FE;
--ec-accent: #F97316;
--ec-accent-hover: #EA6C08;
--ec-accent-muted: #FFF7ED;
--ec-success: #16A34A;
--ec-success-muted: #DCFCE7;
--ec-danger: #DC2626;
--ec-danger-muted: #FEE2E2;
--ec-gold: #EAB308;
--ec-gold-muted: #FEF9C3;
/* Text */
--ec-text: #0F172A;
--ec-text-muted: #64748B;
--ec-text-light: #94A3B8;
/* Borders */
--ec-border: #E2E8F0;
--ec-border-strong: #CBD5E1;
/* Radius */
--ec-radius-sm: 8px;
--ec-radius: 12px;
--ec-radius-lg: 18px;
--ec-radius-pill: 100px;
/* Fonts */
--ec-font-heading: 'Sora', sans-serif;
--ec-font-body: 'Nunito', sans-serif;
/* Shadows */
--ec-shadow-xs: 0 1px 2px rgba(15,23,42,0.05);
--ec-shadow-sm: 0 1px 3px rgba(15,23,42,0.07), 0 4px 16px rgba(15,23,42,0.04);
--ec-shadow: 0 4px 12px rgba(15,23,42,0.08), 0 16px 40px rgba(15,23,42,0.06);
--ec-shadow-lg: 0 8px 24px rgba(15,23,42,0.12), 0 32px 64px rgba(15,23,42,0.08);
--ec-shadow-product:0 2px 8px rgba(15,23,42,0.08), 0 8px 32px rgba(15,23,42,0.08);
/* Transition */
--ec-transition: all 0.2s ease;
--ec-transition-slow: all 0.3s ease;
}
body {
margin: 0;
font-family: var(--ec-font-body);
color: var(--ec-text);
background-color: var(--ec-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.ec-card {
background-color: var(--ec-surface);
border: 1px solid var(--ec-border);
border-radius: var(--ec-radius);
box-shadow: var(--ec-shadow-sm);
padding: 1.75rem;
transition: var(--ec-transition);
}
.ec-card:hover { box-shadow: var(--ec-shadow); }
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ec-font-heading);
font-weight: 700;
margin: 0;
color: var(--ec-text);
letter-spacing: -0.02em;
line-height: 1.2;
}
p { font-family: var(--ec-font-body); color: var(--ec-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.ec-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.65rem 1.35rem;
font-family: var(--ec-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--ec-radius-sm);
border: 2px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--ec-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
letter-spacing: -0.01em;
}
.ec-btn:focus-visible { outline: 2px solid var(--ec-primary); outline-offset: 2px; }
.ec-btn-primary { background-color: var(--ec-primary); color: #fff; border-color: var(--ec-primary); }
.ec-btn-primary:hover { background-color: var(--ec-primary-hover); border-color: var(--ec-primary-hover); box-shadow: 0 4px 16px rgba(124,58,237,0.35); transform: translateY(-1px); }
.ec-btn-primary:active { transform: translateY(0); box-shadow: none; }
.ec-btn-accent { background-color: var(--ec-accent); color: #fff; border-color: var(--ec-accent); }
.ec-btn-accent:hover { background-color: var(--ec-accent-hover); border-color: var(--ec-accent-hover); box-shadow: 0 4px 16px rgba(249,115,22,0.35); transform: translateY(-1px); }
.ec-btn-outline { background-color: var(--ec-surface); color: var(--ec-text); border-color: var(--ec-border-strong); }
.ec-btn-outline:hover { background-color: var(--ec-surface-2); border-color: var(--ec-primary); color: var(--ec-primary); transform: translateY(-1px); }
.ec-btn-ghost { background-color: transparent; color: var(--ec-text-muted); border-color: transparent; }
.ec-btn-ghost:hover { background-color: var(--ec-surface-2); color: var(--ec-text); }
.ec-btn-danger { background-color: var(--ec-danger); color: #fff; border-color: var(--ec-danger); }
.ec-btn-danger:hover { background-color: #B91C1C; box-shadow: 0 4px 16px rgba(220,38,38,0.35); transform: translateY(-1px); }
.ec-btn-sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
.ec-btn-lg { padding: 0.85rem 1.85rem; font-size: 1rem; }
.ec-btn-block { width: 100%; }
.ec-btn-icon { width: 38px; height: 38px; padding: 0; border-radius: var(--ec-radius-sm); }
/* ── Form Controls ────────────── */
.ec-input {
width: 100%;
padding: 0.65rem 1rem;
border: 2px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text);
background-color: var(--ec-surface);
outline: none;
transition: var(--ec-transition);
}
.ec-input::placeholder { color: var(--ec-text-light); font-weight: 500; }
.ec-input:focus { border-color: var(--ec-primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
.ec-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--ec-font-heading);
font-weight: 700;
font-size: 0.82rem;
color: var(--ec-text);
letter-spacing: -0.01em;
}
.ec-select {
width: 100%;
padding: 0.65rem 2rem 0.65rem 1rem;
border: 2px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text);
background-color: var(--ec-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='%2364748B' 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.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--ec-transition);
}
.ec-select:focus { border-color: var(--ec-primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
/* ── Badges ───────────────────── */
.ec-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.65rem;
border-radius: var(--ec-radius-pill);
font-family: var(--ec-font-heading);
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
letter-spacing: 0.01em;
}
.ec-badge-sale { background-color: var(--ec-accent); color: #fff; }
.ec-badge-new { background-color: var(--ec-primary); color: #fff; }
.ec-badge-success { background-color: var(--ec-success-muted); color: #14532D; }
.ec-badge-danger { background-color: var(--ec-danger-muted); color: #7F1D1D; }
.ec-badge-default { background-color: var(--ec-surface-2); color: var(--ec-text-muted); border: 1px solid var(--ec-border); }
.ec-badge-pending { background-color: var(--ec-gold-muted); color: #713F12; }
/* ── Star Rating ──────────────── */
.ec-stars {
display: inline-flex;
align-items: center;
gap: 1px;
color: var(--ec-gold);
font-size: 0.85rem;
}
.ec-stars-count {
font-family: var(--ec-font-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--ec-text-muted);
margin-left: 0.3rem;
}
/* ── Price display ────────────── */
.ec-price {
font-family: var(--ec-font-heading);
font-size: 1.25rem;
font-weight: 800;
color: var(--ec-text);
letter-spacing: -0.02em;
}
.ec-price-original {
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text-light);
text-decoration: line-through;
}
.ec-price-sale { color: var(--ec-accent); }
/* ── Toggle ───────────────────── */
.ec-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.ec-toggle input { opacity: 0; width: 0; height: 0; }
.ec-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--ec-border-strong); border-radius: 24px; transition: var(--ec-transition); }
.ec-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--ec-transition); box-shadow: var(--ec-shadow-xs); }
.ec-toggle input:checked + .ec-toggle-slider { background-color: var(--ec-primary); }
.ec-toggle input:checked + .ec-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.ec-divider { border: none; border-top: 1px solid var(--ec-border); margin: 0; }
/* ── Logo ─────────────────────── */
.ec-logo {
display: inline-flex;
align-items: center;
gap: 0.55rem;
text-decoration: none;
font-family: var(--ec-font-heading);
font-weight: 800;
font-size: 1.25rem;
color: var(--ec-text);
letter-spacing: -0.03em;
}
.ec-logo-icon {
width: 34px;
height: 34px;
background: linear-gradient(135deg, #8B5CF6, #7C3AED);
border-radius: var(--ec-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.1rem;
}
/* ── Trust badges ─────────────── */
.ec-trust-strip {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.ec-trust-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--ec-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--ec-text-muted);
}
.ec-trust-item svg { color: var(--ec-primary); flex-shrink: 0; }
/* ── Utilities ────────────────── */
.text-primary { color: var(--ec-primary) !important; }
.text-accent { color: var(--ec-accent) !important; }
.text-success { color: var(--ec-success) !important; }
.text-danger { color: var(--ec-danger) !important; }
.text-muted { color: var(--ec-text-muted) !important; }
.text-light { color: var(--ec-text-light) !important; }
.ec-link-sm {
font-family: var(--ec-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--ec-primary);
text-decoration: none;
transition: var(--ec-transition);
}
.ec-link-sm:hover {
color: var(--ec-primary-hover);
}
/* --- COMPONENT STYLES --- */
.ec-product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1100px;
margin: 0 auto;
}
.ec-product-card {
padding: 0 !important;
overflow: hidden;
display: flex;
flex-direction: column;
}
.ec-product-media {
height: 240px;
background-color: var(--ec-surface-2);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.ec-product-placeholder {
font-size: 5rem;
filter: drop-shadow(0 8px 16px rgba(15,23,42,0.08));
transition: var(--ec-transition-slow);
}
.ec-product-card:hover .ec-product-placeholder {
transform: scale(1.08) translateY(-4px);
}
.ec-product-badge {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 2;
}
.ec-product-hover-actions {
position: absolute;
inset: 0;
background-color: rgba(15,23,42,0.4);
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
opacity: 0;
pointer-events: none;
transition: var(--ec-transition);
}
.ec-product-card:hover .ec-product-hover-actions {
opacity: 1;
pointer-events: auto;
}
.ec-product-action-btn {
width: 42px;
height: 42px;
border-radius: 50%;
border: none;
background-color: var(--ec-surface);
color: var(--ec-text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--ec-transition);
box-shadow: var(--ec-shadow-sm);
}
.ec-product-action-btn:hover {
background-color: var(--ec-primary);
color: #fff;
transform: translateY(-2px);
}
.ec-product-details {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
flex: 1;
}
.ec-product-cat {
font-family: var(--ec-font-heading);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ec-product-title {
font-size: 0.95rem;
font-weight: 700;
color: var(--ec-text);
line-height: 1.4;
height: 2.8em;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.ec-product-price-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.5rem;
border-top: 1px solid var(--ec-border);
padding-top: 1rem;
}
.ec-price-box {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
/* Soldout State */
.ec-product-soldout .ec-product-placeholder {
opacity: 0.4;
}
.ec-product-soldout .ec-product-details {
opacity: 0.75;
}
Store Metrics
HTML
<div class="ec-stats-grid">
<!-- Stat 1 -->
<div class="ec-stat-card ec-card">
<div class="ec-stat-head">
<div class="ec-stat-ico" style="background:var(--ec-primary-muted); color:var(--ec-primary);">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
</div>
<span class="ec-badge ec-badge-success">▲ 12.8%</span>
</div>
<div class="ec-stat-val">$24,920</div>
<div class="ec-stat-lbl">Store Revenue</div>
<div class="ec-stat-bar-wrap">
<div class="ec-stat-bar" style="width:78%; background:var(--ec-primary);"></div>
</div>
</div>
<!-- Stat 2 -->
<div class="ec-stat-card ec-card">
<div class="ec-stat-head">
<div class="ec-stat-ico" style="background:var(--ec-success-muted); color:var(--ec-success);">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
</div>
<span class="ec-badge ec-badge-success">▲ 2.1%</span>
</div>
<div class="ec-stat-val">3.42%</div>
<div class="ec-stat-lbl">Conversion Rate</div>
<div class="ec-stat-bar-wrap">
<div class="ec-stat-bar" style="width:58%; background:var(--ec-success);"></div>
</div>
</div>
<!-- Stat 3 -->
<div class="ec-stat-card ec-card">
<div class="ec-stat-head">
<div class="ec-stat-ico" style="background:var(--ec-accent-muted); color:var(--ec-accent);">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
</div>
<span class="ec-badge ec-badge-default">Steady</span>
</div>
<div class="ec-stat-val">$84.50</div>
<div class="ec-stat-lbl">Avg Order Value</div>
<div class="ec-stat-bar-wrap">
<div class="ec-stat-bar" style="width:45%; background:var(--ec-accent);"></div>
</div>
</div>
<!-- Stat 4 -->
<div class="ec-stat-card ec-card">
<div class="ec-stat-head">
<div class="ec-stat-ico" style="background:var(--ec-danger-muted); color:var(--ec-danger);">
<svg viewBox="0 0 24 24" width="16" height="16" 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>
</div>
<span class="ec-badge ec-badge-danger">▼ 4.3%</span>
</div>
<div class="ec-stat-val">24.2%</div>
<div class="ec-stat-lbl">Cart Abandonment</div>
<div class="ec-stat-bar-wrap">
<div class="ec-stat-bar" style="width:34%; background:var(--ec-danger);"></div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Store Metrics */
/* NOTE: This component requires base.css to be included in your page. */
.ec-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
max-width: 1100px;
margin: 0 auto;
}
.ec-stat-card {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 1.5rem !important;
}
.ec-stat-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.15rem;
}
.ec-stat-ico {
width: 36px;
height: 36px;
border-radius: var(--ec-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ec-stat-val {
font-family: var(--ec-font-heading);
font-size: 1.85rem;
font-weight: 800;
color: var(--ec-text);
letter-spacing: -0.025em;
line-height: 1;
}
.ec-stat-lbl {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--ec-text-muted);
}
.ec-stat-bar-wrap {
height: 4px;
background-color: var(--ec-border);
border-radius: 4px;
overflow: hidden;
margin-top: 0.5rem;
}
.ec-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=Sora:wght@400;500;600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap');
/* ===========================
E-commerce Starter Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--ec-bg: #F8FAFC;
--ec-surface: #FFFFFF;
--ec-surface-2: #F1F5F9;
--ec-surface-dark: #0F172A;
/* Brand */
--ec-primary: #7C3AED;
--ec-primary-hover: #6D28D9;
--ec-primary-muted: #EDE9FE;
--ec-accent: #F97316;
--ec-accent-hover: #EA6C08;
--ec-accent-muted: #FFF7ED;
--ec-success: #16A34A;
--ec-success-muted: #DCFCE7;
--ec-danger: #DC2626;
--ec-danger-muted: #FEE2E2;
--ec-gold: #EAB308;
--ec-gold-muted: #FEF9C3;
/* Text */
--ec-text: #0F172A;
--ec-text-muted: #64748B;
--ec-text-light: #94A3B8;
/* Borders */
--ec-border: #E2E8F0;
--ec-border-strong: #CBD5E1;
/* Radius */
--ec-radius-sm: 8px;
--ec-radius: 12px;
--ec-radius-lg: 18px;
--ec-radius-pill: 100px;
/* Fonts */
--ec-font-heading: 'Sora', sans-serif;
--ec-font-body: 'Nunito', sans-serif;
/* Shadows */
--ec-shadow-xs: 0 1px 2px rgba(15,23,42,0.05);
--ec-shadow-sm: 0 1px 3px rgba(15,23,42,0.07), 0 4px 16px rgba(15,23,42,0.04);
--ec-shadow: 0 4px 12px rgba(15,23,42,0.08), 0 16px 40px rgba(15,23,42,0.06);
--ec-shadow-lg: 0 8px 24px rgba(15,23,42,0.12), 0 32px 64px rgba(15,23,42,0.08);
--ec-shadow-product:0 2px 8px rgba(15,23,42,0.08), 0 8px 32px rgba(15,23,42,0.08);
/* Transition */
--ec-transition: all 0.2s ease;
--ec-transition-slow: all 0.3s ease;
}
body {
margin: 0;
font-family: var(--ec-font-body);
color: var(--ec-text);
background-color: var(--ec-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.ec-card {
background-color: var(--ec-surface);
border: 1px solid var(--ec-border);
border-radius: var(--ec-radius);
box-shadow: var(--ec-shadow-sm);
padding: 1.75rem;
transition: var(--ec-transition);
}
.ec-card:hover { box-shadow: var(--ec-shadow); }
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ec-font-heading);
font-weight: 700;
margin: 0;
color: var(--ec-text);
letter-spacing: -0.02em;
line-height: 1.2;
}
p { font-family: var(--ec-font-body); color: var(--ec-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.ec-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.65rem 1.35rem;
font-family: var(--ec-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--ec-radius-sm);
border: 2px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--ec-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
letter-spacing: -0.01em;
}
.ec-btn:focus-visible { outline: 2px solid var(--ec-primary); outline-offset: 2px; }
.ec-btn-primary { background-color: var(--ec-primary); color: #fff; border-color: var(--ec-primary); }
.ec-btn-primary:hover { background-color: var(--ec-primary-hover); border-color: var(--ec-primary-hover); box-shadow: 0 4px 16px rgba(124,58,237,0.35); transform: translateY(-1px); }
.ec-btn-primary:active { transform: translateY(0); box-shadow: none; }
.ec-btn-accent { background-color: var(--ec-accent); color: #fff; border-color: var(--ec-accent); }
.ec-btn-accent:hover { background-color: var(--ec-accent-hover); border-color: var(--ec-accent-hover); box-shadow: 0 4px 16px rgba(249,115,22,0.35); transform: translateY(-1px); }
.ec-btn-outline { background-color: var(--ec-surface); color: var(--ec-text); border-color: var(--ec-border-strong); }
.ec-btn-outline:hover { background-color: var(--ec-surface-2); border-color: var(--ec-primary); color: var(--ec-primary); transform: translateY(-1px); }
.ec-btn-ghost { background-color: transparent; color: var(--ec-text-muted); border-color: transparent; }
.ec-btn-ghost:hover { background-color: var(--ec-surface-2); color: var(--ec-text); }
.ec-btn-danger { background-color: var(--ec-danger); color: #fff; border-color: var(--ec-danger); }
.ec-btn-danger:hover { background-color: #B91C1C; box-shadow: 0 4px 16px rgba(220,38,38,0.35); transform: translateY(-1px); }
.ec-btn-sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
.ec-btn-lg { padding: 0.85rem 1.85rem; font-size: 1rem; }
.ec-btn-block { width: 100%; }
.ec-btn-icon { width: 38px; height: 38px; padding: 0; border-radius: var(--ec-radius-sm); }
/* ── Form Controls ────────────── */
.ec-input {
width: 100%;
padding: 0.65rem 1rem;
border: 2px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text);
background-color: var(--ec-surface);
outline: none;
transition: var(--ec-transition);
}
.ec-input::placeholder { color: var(--ec-text-light); font-weight: 500; }
.ec-input:focus { border-color: var(--ec-primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
.ec-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--ec-font-heading);
font-weight: 700;
font-size: 0.82rem;
color: var(--ec-text);
letter-spacing: -0.01em;
}
.ec-select {
width: 100%;
padding: 0.65rem 2rem 0.65rem 1rem;
border: 2px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text);
background-color: var(--ec-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='%2364748B' 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.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--ec-transition);
}
.ec-select:focus { border-color: var(--ec-primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
/* ── Badges ───────────────────── */
.ec-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.65rem;
border-radius: var(--ec-radius-pill);
font-family: var(--ec-font-heading);
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
letter-spacing: 0.01em;
}
.ec-badge-sale { background-color: var(--ec-accent); color: #fff; }
.ec-badge-new { background-color: var(--ec-primary); color: #fff; }
.ec-badge-success { background-color: var(--ec-success-muted); color: #14532D; }
.ec-badge-danger { background-color: var(--ec-danger-muted); color: #7F1D1D; }
.ec-badge-default { background-color: var(--ec-surface-2); color: var(--ec-text-muted); border: 1px solid var(--ec-border); }
.ec-badge-pending { background-color: var(--ec-gold-muted); color: #713F12; }
/* ── Star Rating ──────────────── */
.ec-stars {
display: inline-flex;
align-items: center;
gap: 1px;
color: var(--ec-gold);
font-size: 0.85rem;
}
.ec-stars-count {
font-family: var(--ec-font-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--ec-text-muted);
margin-left: 0.3rem;
}
/* ── Price display ────────────── */
.ec-price {
font-family: var(--ec-font-heading);
font-size: 1.25rem;
font-weight: 800;
color: var(--ec-text);
letter-spacing: -0.02em;
}
.ec-price-original {
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text-light);
text-decoration: line-through;
}
.ec-price-sale { color: var(--ec-accent); }
/* ── Toggle ───────────────────── */
.ec-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.ec-toggle input { opacity: 0; width: 0; height: 0; }
.ec-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--ec-border-strong); border-radius: 24px; transition: var(--ec-transition); }
.ec-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--ec-transition); box-shadow: var(--ec-shadow-xs); }
.ec-toggle input:checked + .ec-toggle-slider { background-color: var(--ec-primary); }
.ec-toggle input:checked + .ec-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.ec-divider { border: none; border-top: 1px solid var(--ec-border); margin: 0; }
/* ── Logo ─────────────────────── */
.ec-logo {
display: inline-flex;
align-items: center;
gap: 0.55rem;
text-decoration: none;
font-family: var(--ec-font-heading);
font-weight: 800;
font-size: 1.25rem;
color: var(--ec-text);
letter-spacing: -0.03em;
}
.ec-logo-icon {
width: 34px;
height: 34px;
background: linear-gradient(135deg, #8B5CF6, #7C3AED);
border-radius: var(--ec-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.1rem;
}
/* ── Trust badges ─────────────── */
.ec-trust-strip {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.ec-trust-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--ec-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--ec-text-muted);
}
.ec-trust-item svg { color: var(--ec-primary); flex-shrink: 0; }
/* ── Utilities ────────────────── */
.text-primary { color: var(--ec-primary) !important; }
.text-accent { color: var(--ec-accent) !important; }
.text-success { color: var(--ec-success) !important; }
.text-danger { color: var(--ec-danger) !important; }
.text-muted { color: var(--ec-text-muted) !important; }
.text-light { color: var(--ec-text-light) !important; }
.ec-link-sm {
font-family: var(--ec-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--ec-primary);
text-decoration: none;
transition: var(--ec-transition);
}
.ec-link-sm:hover {
color: var(--ec-primary-hover);
}
/* --- COMPONENT STYLES --- */
.ec-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
max-width: 1100px;
margin: 0 auto;
}
.ec-stat-card {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 1.5rem !important;
}
.ec-stat-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.15rem;
}
.ec-stat-ico {
width: 36px;
height: 36px;
border-radius: var(--ec-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ec-stat-val {
font-family: var(--ec-font-heading);
font-size: 1.85rem;
font-weight: 800;
color: var(--ec-text);
letter-spacing: -0.025em;
line-height: 1;
}
.ec-stat-lbl {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--ec-text-muted);
}
.ec-stat-bar-wrap {
height: 4px;
background-color: var(--ec-border);
border-radius: 4px;
overflow: hidden;
margin-top: 0.5rem;
}
.ec-stat-bar {
height: 100%;
border-radius: 4px;
transition: width 0.6s ease;
}
Tables
Order History Table
HTML
<div class="ec-table-wrap ec-card">
<div class="ec-table-toolbar">
<div class="ec-table-toolbar-left">
<h4>Order History</h4>
<span class="ec-badge ec-badge-default">12 Orders Total</span>
</div>
<div class="ec-table-toolbar-right">
<div class="ec-search-wrap">
<svg class="ec-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="ec-input ec-search-input" placeholder="Search orders…">
</div>
<select class="ec-select" style="width:auto;">
<option>All Statuses</option>
<option>Delivered</option>
<option>In Transit</option>
<option>Processing</option>
<option>Cancelled</option>
</select>
</div>
</div>
<div class="ec-table-scroll">
<table class="ec-data-table">
<thead>
<tr>
<th>Order ID</th>
<th>Date Placed</th>
<th>Product Details</th>
<th>Quantity</th>
<th>Total Price</th>
<th>Delivery Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="ec-td-mono" style="font-weight:700;">#SV-2049</td>
<td class="ec-td-mono text-muted">18 May 2026</td>
<td>
<div class="ec-prod-cell">
<span class="ec-prod-thumb">🎧</span>
<div>
<span class="ec-prod-name">Noise-Cancelling Headphones</span>
<span class="ec-prod-meta text-muted">Color: Carbon Black</span>
</div>
</div>
</td>
<td class="ec-td-mono">1</td>
<td class="ec-td-mono" style="font-weight:800;">$199.00</td>
<td><span class="ec-badge ec-badge-success">Delivered</span></td>
<td>
<button class="ec-btn ec-btn-outline ec-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>
Invoice
</button>
</td>
</tr>
<tr>
<td class="ec-td-mono" style="font-weight:700;">#SV-2045</td>
<td class="ec-td-mono text-muted">15 May 2026</td>
<td>
<div class="ec-prod-cell">
<span class="ec-prod-thumb">🎒</span>
<div>
<span class="ec-prod-name">Everyday Commuter Pack</span>
<span class="ec-prod-meta text-muted">Size: 24 Liters</span>
</div>
</div>
</td>
<td class="ec-td-mono">1</td>
<td class="ec-td-mono" style="font-weight:800;">$129.00</td>
<td><span class="ec-badge ec-badge-pending">In Transit</span></td>
<td>
<button class="ec-btn ec-btn-outline ec-btn-sm">Track</button>
</td>
</tr>
<tr>
<td class="ec-td-mono" style="font-weight:700;">#SV-2041</td>
<td class="ec-td-mono text-muted">12 May 2026</td>
<td>
<div class="ec-prod-cell">
<span class="ec-prod-thumb">⌚</span>
<div>
<span class="ec-prod-name">Quartz Wristwatch</span>
<span class="ec-prod-meta text-muted">Material: Silver Steel</span>
</div>
</div>
</td>
<td class="ec-td-mono">2</td>
<td class="ec-td-mono" style="font-weight:800;">$240.00</td>
<td><span class="ec-badge ec-badge-default">Processing</span></td>
<td>
<button class="ec-btn ec-btn-ghost ec-btn-sm text-danger">Cancel</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="ec-table-pagination">
<span class="text-muted" style="font-size:0.85rem;">Showing 1–3 of 12 orders</span>
<div class="ec-pagination-btns">
<button class="ec-btn ec-btn-outline ec-btn-sm" disabled style="opacity:.45;">← Prev</button>
<button class="ec-btn ec-btn-primary ec-btn-sm">1</button>
<button class="ec-btn ec-btn-outline ec-btn-sm">2</button>
<button class="ec-btn ec-btn-outline ec-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. */
.ec-table-wrap {
max-width: 1000px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
}
.ec-table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--ec-border);
flex-wrap: wrap;
}
.ec-table-toolbar-left {
display: flex;
align-items: center;
gap: 0.75rem;
}
.ec-table-toolbar-left h4 {
font-size: 1rem;
font-weight: 700;
}
.ec-table-toolbar-right {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.ec-search-wrap {
position: relative;
}
.ec-search-ico {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--ec-text-light);
pointer-events: none;
}
.ec-search-input {
padding-left: 2.25rem;
width: 190px;
}
.ec-table-scroll {
overflow-x: auto;
}
.ec-data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.ec-data-table thead tr {
background-color: var(--ec-surface-2);
border-bottom: 1px solid var(--ec-border);
}
.ec-data-table th {
padding: 0.75rem 1rem;
font-family: var(--ec-font-heading);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--ec-text-muted);
text-align: left;
white-space: nowrap;
}
.ec-data-table td {
padding: 1rem;
border-bottom: 1px solid var(--ec-border);
color: var(--ec-text);
font-weight: 600;
vertical-align: middle;
}
.ec-data-table tbody tr:last-child td {
border-bottom: none;
}
.ec-data-table tbody tr:hover td {
background-color: var(--ec-surface-2);
}
.ec-td-mono {
font-family: var(--ec-font-heading);
font-size: 0.85rem;
}
.ec-prod-cell {
display: flex;
align-items: center;
gap: 0.75rem;
}
.ec-prod-thumb {
width: 38px;
height: 38px;
background-color: var(--ec-surface-2);
border-radius: var(--ec-radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.ec-prod-name {
display: block;
font-family: var(--ec-font-heading);
font-weight: 700;
color: var(--ec-text);
}
.ec-prod-meta {
font-size: 0.75rem;
font-weight: 500;
}
.ec-table-pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border-top: 1px solid var(--ec-border);
gap: 1rem;
flex-wrap: wrap;
}
.ec-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=Sora:wght@400;500;600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap');
/* ===========================
E-commerce Starter Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--ec-bg: #F8FAFC;
--ec-surface: #FFFFFF;
--ec-surface-2: #F1F5F9;
--ec-surface-dark: #0F172A;
/* Brand */
--ec-primary: #7C3AED;
--ec-primary-hover: #6D28D9;
--ec-primary-muted: #EDE9FE;
--ec-accent: #F97316;
--ec-accent-hover: #EA6C08;
--ec-accent-muted: #FFF7ED;
--ec-success: #16A34A;
--ec-success-muted: #DCFCE7;
--ec-danger: #DC2626;
--ec-danger-muted: #FEE2E2;
--ec-gold: #EAB308;
--ec-gold-muted: #FEF9C3;
/* Text */
--ec-text: #0F172A;
--ec-text-muted: #64748B;
--ec-text-light: #94A3B8;
/* Borders */
--ec-border: #E2E8F0;
--ec-border-strong: #CBD5E1;
/* Radius */
--ec-radius-sm: 8px;
--ec-radius: 12px;
--ec-radius-lg: 18px;
--ec-radius-pill: 100px;
/* Fonts */
--ec-font-heading: 'Sora', sans-serif;
--ec-font-body: 'Nunito', sans-serif;
/* Shadows */
--ec-shadow-xs: 0 1px 2px rgba(15,23,42,0.05);
--ec-shadow-sm: 0 1px 3px rgba(15,23,42,0.07), 0 4px 16px rgba(15,23,42,0.04);
--ec-shadow: 0 4px 12px rgba(15,23,42,0.08), 0 16px 40px rgba(15,23,42,0.06);
--ec-shadow-lg: 0 8px 24px rgba(15,23,42,0.12), 0 32px 64px rgba(15,23,42,0.08);
--ec-shadow-product:0 2px 8px rgba(15,23,42,0.08), 0 8px 32px rgba(15,23,42,0.08);
/* Transition */
--ec-transition: all 0.2s ease;
--ec-transition-slow: all 0.3s ease;
}
body {
margin: 0;
font-family: var(--ec-font-body);
color: var(--ec-text);
background-color: var(--ec-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.ec-card {
background-color: var(--ec-surface);
border: 1px solid var(--ec-border);
border-radius: var(--ec-radius);
box-shadow: var(--ec-shadow-sm);
padding: 1.75rem;
transition: var(--ec-transition);
}
.ec-card:hover { box-shadow: var(--ec-shadow); }
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ec-font-heading);
font-weight: 700;
margin: 0;
color: var(--ec-text);
letter-spacing: -0.02em;
line-height: 1.2;
}
p { font-family: var(--ec-font-body); color: var(--ec-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.ec-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.65rem 1.35rem;
font-family: var(--ec-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--ec-radius-sm);
border: 2px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--ec-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
letter-spacing: -0.01em;
}
.ec-btn:focus-visible { outline: 2px solid var(--ec-primary); outline-offset: 2px; }
.ec-btn-primary { background-color: var(--ec-primary); color: #fff; border-color: var(--ec-primary); }
.ec-btn-primary:hover { background-color: var(--ec-primary-hover); border-color: var(--ec-primary-hover); box-shadow: 0 4px 16px rgba(124,58,237,0.35); transform: translateY(-1px); }
.ec-btn-primary:active { transform: translateY(0); box-shadow: none; }
.ec-btn-accent { background-color: var(--ec-accent); color: #fff; border-color: var(--ec-accent); }
.ec-btn-accent:hover { background-color: var(--ec-accent-hover); border-color: var(--ec-accent-hover); box-shadow: 0 4px 16px rgba(249,115,22,0.35); transform: translateY(-1px); }
.ec-btn-outline { background-color: var(--ec-surface); color: var(--ec-text); border-color: var(--ec-border-strong); }
.ec-btn-outline:hover { background-color: var(--ec-surface-2); border-color: var(--ec-primary); color: var(--ec-primary); transform: translateY(-1px); }
.ec-btn-ghost { background-color: transparent; color: var(--ec-text-muted); border-color: transparent; }
.ec-btn-ghost:hover { background-color: var(--ec-surface-2); color: var(--ec-text); }
.ec-btn-danger { background-color: var(--ec-danger); color: #fff; border-color: var(--ec-danger); }
.ec-btn-danger:hover { background-color: #B91C1C; box-shadow: 0 4px 16px rgba(220,38,38,0.35); transform: translateY(-1px); }
.ec-btn-sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
.ec-btn-lg { padding: 0.85rem 1.85rem; font-size: 1rem; }
.ec-btn-block { width: 100%; }
.ec-btn-icon { width: 38px; height: 38px; padding: 0; border-radius: var(--ec-radius-sm); }
/* ── Form Controls ────────────── */
.ec-input {
width: 100%;
padding: 0.65rem 1rem;
border: 2px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text);
background-color: var(--ec-surface);
outline: none;
transition: var(--ec-transition);
}
.ec-input::placeholder { color: var(--ec-text-light); font-weight: 500; }
.ec-input:focus { border-color: var(--ec-primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
.ec-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--ec-font-heading);
font-weight: 700;
font-size: 0.82rem;
color: var(--ec-text);
letter-spacing: -0.01em;
}
.ec-select {
width: 100%;
padding: 0.65rem 2rem 0.65rem 1rem;
border: 2px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text);
background-color: var(--ec-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='%2364748B' 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.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--ec-transition);
}
.ec-select:focus { border-color: var(--ec-primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
/* ── Badges ───────────────────── */
.ec-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.65rem;
border-radius: var(--ec-radius-pill);
font-family: var(--ec-font-heading);
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
letter-spacing: 0.01em;
}
.ec-badge-sale { background-color: var(--ec-accent); color: #fff; }
.ec-badge-new { background-color: var(--ec-primary); color: #fff; }
.ec-badge-success { background-color: var(--ec-success-muted); color: #14532D; }
.ec-badge-danger { background-color: var(--ec-danger-muted); color: #7F1D1D; }
.ec-badge-default { background-color: var(--ec-surface-2); color: var(--ec-text-muted); border: 1px solid var(--ec-border); }
.ec-badge-pending { background-color: var(--ec-gold-muted); color: #713F12; }
/* ── Star Rating ──────────────── */
.ec-stars {
display: inline-flex;
align-items: center;
gap: 1px;
color: var(--ec-gold);
font-size: 0.85rem;
}
.ec-stars-count {
font-family: var(--ec-font-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--ec-text-muted);
margin-left: 0.3rem;
}
/* ── Price display ────────────── */
.ec-price {
font-family: var(--ec-font-heading);
font-size: 1.25rem;
font-weight: 800;
color: var(--ec-text);
letter-spacing: -0.02em;
}
.ec-price-original {
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text-light);
text-decoration: line-through;
}
.ec-price-sale { color: var(--ec-accent); }
/* ── Toggle ───────────────────── */
.ec-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.ec-toggle input { opacity: 0; width: 0; height: 0; }
.ec-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--ec-border-strong); border-radius: 24px; transition: var(--ec-transition); }
.ec-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--ec-transition); box-shadow: var(--ec-shadow-xs); }
.ec-toggle input:checked + .ec-toggle-slider { background-color: var(--ec-primary); }
.ec-toggle input:checked + .ec-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.ec-divider { border: none; border-top: 1px solid var(--ec-border); margin: 0; }
/* ── Logo ─────────────────────── */
.ec-logo {
display: inline-flex;
align-items: center;
gap: 0.55rem;
text-decoration: none;
font-family: var(--ec-font-heading);
font-weight: 800;
font-size: 1.25rem;
color: var(--ec-text);
letter-spacing: -0.03em;
}
.ec-logo-icon {
width: 34px;
height: 34px;
background: linear-gradient(135deg, #8B5CF6, #7C3AED);
border-radius: var(--ec-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.1rem;
}
/* ── Trust badges ─────────────── */
.ec-trust-strip {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.ec-trust-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--ec-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--ec-text-muted);
}
.ec-trust-item svg { color: var(--ec-primary); flex-shrink: 0; }
/* ── Utilities ────────────────── */
.text-primary { color: var(--ec-primary) !important; }
.text-accent { color: var(--ec-accent) !important; }
.text-success { color: var(--ec-success) !important; }
.text-danger { color: var(--ec-danger) !important; }
.text-muted { color: var(--ec-text-muted) !important; }
.text-light { color: var(--ec-text-light) !important; }
.ec-link-sm {
font-family: var(--ec-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--ec-primary);
text-decoration: none;
transition: var(--ec-transition);
}
.ec-link-sm:hover {
color: var(--ec-primary-hover);
}
/* --- COMPONENT STYLES --- */
.ec-table-wrap {
max-width: 1000px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
}
.ec-table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--ec-border);
flex-wrap: wrap;
}
.ec-table-toolbar-left {
display: flex;
align-items: center;
gap: 0.75rem;
}
.ec-table-toolbar-left h4 {
font-size: 1rem;
font-weight: 700;
}
.ec-table-toolbar-right {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.ec-search-wrap {
position: relative;
}
.ec-search-ico {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--ec-text-light);
pointer-events: none;
}
.ec-search-input {
padding-left: 2.25rem;
width: 190px;
}
.ec-table-scroll {
overflow-x: auto;
}
.ec-data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.ec-data-table thead tr {
background-color: var(--ec-surface-2);
border-bottom: 1px solid var(--ec-border);
}
.ec-data-table th {
padding: 0.75rem 1rem;
font-family: var(--ec-font-heading);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--ec-text-muted);
text-align: left;
white-space: nowrap;
}
.ec-data-table td {
padding: 1rem;
border-bottom: 1px solid var(--ec-border);
color: var(--ec-text);
font-weight: 600;
vertical-align: middle;
}
.ec-data-table tbody tr:last-child td {
border-bottom: none;
}
.ec-data-table tbody tr:hover td {
background-color: var(--ec-surface-2);
}
.ec-td-mono {
font-family: var(--ec-font-heading);
font-size: 0.85rem;
}
.ec-prod-cell {
display: flex;
align-items: center;
gap: 0.75rem;
}
.ec-prod-thumb {
width: 38px;
height: 38px;
background-color: var(--ec-surface-2);
border-radius: var(--ec-radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.ec-prod-name {
display: block;
font-family: var(--ec-font-heading);
font-weight: 700;
color: var(--ec-text);
}
.ec-prod-meta {
font-size: 0.75rem;
font-weight: 500;
}
.ec-table-pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border-top: 1px solid var(--ec-border);
gap: 1rem;
flex-wrap: wrap;
}
.ec-pagination-btns {
display: flex;
gap: 0.4rem;
align-items: center;
}
Lists
Order Status Feed
HTML
<div class="ec-activity-card ec-card">
<div class="ec-activity-head">
<h4>Order Status Timeline</h4>
<span class="ec-badge ec-badge-pending">Order #SV-2045</span>
</div>
<div class="ec-activity-list">
<!-- Milestone 1 -->
<div class="ec-activity-item active">
<div class="ec-act-ico" style="background:var(--ec-primary-muted); color:var(--ec-primary);">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
</div>
<div class="ec-act-content">
<div class="ec-act-top">
<span class="ec-act-label">In Transit — Shipped via UPS</span>
<span class="ec-act-time">Today, 02:40 pm</span>
</div>
<span class="ec-act-meta">Tracking number: <a href="#" class="ec-link-sm">1Z999AA10123456784</a>. Estimated delivery: Thursday, 21 May.</span>
</div>
</div>
<div class="ec-activity-line"></div>
<!-- Milestone 2 -->
<div class="ec-activity-item">
<div class="ec-act-ico" style="background:var(--ec-success-muted); color:var(--ec-success);">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><polyline points="20 6 9 17 4 12"/></svg>
</div>
<div class="ec-act-content">
<div class="ec-act-top">
<span class="ec-act-label">Payment Confirmed Securely</span>
<span class="ec-act-time">15 May, 10:15 am</span>
</div>
<span class="ec-act-meta">Authorized via Credit Card (Stripe). Auth code: #482910.</span>
</div>
</div>
<div class="ec-activity-line"></div>
<!-- Milestone 3 -->
<div class="ec-activity-item">
<div class="ec-act-ico" style="background:var(--ec-surface-2); color:var(--ec-text-muted);">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
</div>
<div class="ec-act-content">
<div class="ec-act-top">
<span class="ec-act-label">Order Received & Registered</span>
<span class="ec-act-time">15 May, 09:30 am</span>
</div>
<span class="ec-act-meta">Order details submitted and sent to fulfillment facility.</span>
</div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Order Status Feed */
/* NOTE: This component requires base.css to be included in your page. */
.ec-activity-card {
max-width: 520px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
}
.ec-activity-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--ec-border);
}
.ec-activity-head h4 {
font-size: 1rem;
font-weight: 700;
}
.ec-activity-list {
display: flex;
flex-direction: column;
padding: 1.5rem;
position: relative;
}
.ec-activity-item {
display: flex;
align-items: flex-start;
gap: 1rem;
position: relative;
z-index: 2;
padding-bottom: 1.5rem;
}
.ec-activity-item:last-of-type {
padding-bottom: 0;
}
.ec-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: 2px;
background-color: var(--ec-border);
z-index: 1;
}
.ec-act-ico {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: var(--ec-shadow-xs);
}
.ec-act-content {
flex: 1;
min-width: 0;
}
.ec-act-top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.ec-act-label {
font-family: var(--ec-font-heading);
font-size: 0.875rem;
font-weight: 700;
color: var(--ec-text);
}
.ec-act-time {
font-family: var(--ec-font-body);
font-size: 0.75rem;
font-weight: 600;
color: var(--ec-text-light);
white-space: nowrap;
}
.ec-act-meta {
font-size: 0.8rem;
color: var(--ec-text-muted);
font-weight: 500;
line-height: 1.5;
display: block;
}
/* Timeline Vertical Line */
.ec-activity-line {
display: none;
}
.ec-activity-item.active .ec-act-ico {
outline: 4px solid var(--ec-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=Sora:wght@400;500;600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap');
/* ===========================
E-commerce Starter Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--ec-bg: #F8FAFC;
--ec-surface: #FFFFFF;
--ec-surface-2: #F1F5F9;
--ec-surface-dark: #0F172A;
/* Brand */
--ec-primary: #7C3AED;
--ec-primary-hover: #6D28D9;
--ec-primary-muted: #EDE9FE;
--ec-accent: #F97316;
--ec-accent-hover: #EA6C08;
--ec-accent-muted: #FFF7ED;
--ec-success: #16A34A;
--ec-success-muted: #DCFCE7;
--ec-danger: #DC2626;
--ec-danger-muted: #FEE2E2;
--ec-gold: #EAB308;
--ec-gold-muted: #FEF9C3;
/* Text */
--ec-text: #0F172A;
--ec-text-muted: #64748B;
--ec-text-light: #94A3B8;
/* Borders */
--ec-border: #E2E8F0;
--ec-border-strong: #CBD5E1;
/* Radius */
--ec-radius-sm: 8px;
--ec-radius: 12px;
--ec-radius-lg: 18px;
--ec-radius-pill: 100px;
/* Fonts */
--ec-font-heading: 'Sora', sans-serif;
--ec-font-body: 'Nunito', sans-serif;
/* Shadows */
--ec-shadow-xs: 0 1px 2px rgba(15,23,42,0.05);
--ec-shadow-sm: 0 1px 3px rgba(15,23,42,0.07), 0 4px 16px rgba(15,23,42,0.04);
--ec-shadow: 0 4px 12px rgba(15,23,42,0.08), 0 16px 40px rgba(15,23,42,0.06);
--ec-shadow-lg: 0 8px 24px rgba(15,23,42,0.12), 0 32px 64px rgba(15,23,42,0.08);
--ec-shadow-product:0 2px 8px rgba(15,23,42,0.08), 0 8px 32px rgba(15,23,42,0.08);
/* Transition */
--ec-transition: all 0.2s ease;
--ec-transition-slow: all 0.3s ease;
}
body {
margin: 0;
font-family: var(--ec-font-body);
color: var(--ec-text);
background-color: var(--ec-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.ec-card {
background-color: var(--ec-surface);
border: 1px solid var(--ec-border);
border-radius: var(--ec-radius);
box-shadow: var(--ec-shadow-sm);
padding: 1.75rem;
transition: var(--ec-transition);
}
.ec-card:hover { box-shadow: var(--ec-shadow); }
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ec-font-heading);
font-weight: 700;
margin: 0;
color: var(--ec-text);
letter-spacing: -0.02em;
line-height: 1.2;
}
p { font-family: var(--ec-font-body); color: var(--ec-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.ec-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.65rem 1.35rem;
font-family: var(--ec-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--ec-radius-sm);
border: 2px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--ec-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
letter-spacing: -0.01em;
}
.ec-btn:focus-visible { outline: 2px solid var(--ec-primary); outline-offset: 2px; }
.ec-btn-primary { background-color: var(--ec-primary); color: #fff; border-color: var(--ec-primary); }
.ec-btn-primary:hover { background-color: var(--ec-primary-hover); border-color: var(--ec-primary-hover); box-shadow: 0 4px 16px rgba(124,58,237,0.35); transform: translateY(-1px); }
.ec-btn-primary:active { transform: translateY(0); box-shadow: none; }
.ec-btn-accent { background-color: var(--ec-accent); color: #fff; border-color: var(--ec-accent); }
.ec-btn-accent:hover { background-color: var(--ec-accent-hover); border-color: var(--ec-accent-hover); box-shadow: 0 4px 16px rgba(249,115,22,0.35); transform: translateY(-1px); }
.ec-btn-outline { background-color: var(--ec-surface); color: var(--ec-text); border-color: var(--ec-border-strong); }
.ec-btn-outline:hover { background-color: var(--ec-surface-2); border-color: var(--ec-primary); color: var(--ec-primary); transform: translateY(-1px); }
.ec-btn-ghost { background-color: transparent; color: var(--ec-text-muted); border-color: transparent; }
.ec-btn-ghost:hover { background-color: var(--ec-surface-2); color: var(--ec-text); }
.ec-btn-danger { background-color: var(--ec-danger); color: #fff; border-color: var(--ec-danger); }
.ec-btn-danger:hover { background-color: #B91C1C; box-shadow: 0 4px 16px rgba(220,38,38,0.35); transform: translateY(-1px); }
.ec-btn-sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
.ec-btn-lg { padding: 0.85rem 1.85rem; font-size: 1rem; }
.ec-btn-block { width: 100%; }
.ec-btn-icon { width: 38px; height: 38px; padding: 0; border-radius: var(--ec-radius-sm); }
/* ── Form Controls ────────────── */
.ec-input {
width: 100%;
padding: 0.65rem 1rem;
border: 2px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text);
background-color: var(--ec-surface);
outline: none;
transition: var(--ec-transition);
}
.ec-input::placeholder { color: var(--ec-text-light); font-weight: 500; }
.ec-input:focus { border-color: var(--ec-primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
.ec-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--ec-font-heading);
font-weight: 700;
font-size: 0.82rem;
color: var(--ec-text);
letter-spacing: -0.01em;
}
.ec-select {
width: 100%;
padding: 0.65rem 2rem 0.65rem 1rem;
border: 2px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text);
background-color: var(--ec-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='%2364748B' 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.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--ec-transition);
}
.ec-select:focus { border-color: var(--ec-primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
/* ── Badges ───────────────────── */
.ec-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.65rem;
border-radius: var(--ec-radius-pill);
font-family: var(--ec-font-heading);
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
letter-spacing: 0.01em;
}
.ec-badge-sale { background-color: var(--ec-accent); color: #fff; }
.ec-badge-new { background-color: var(--ec-primary); color: #fff; }
.ec-badge-success { background-color: var(--ec-success-muted); color: #14532D; }
.ec-badge-danger { background-color: var(--ec-danger-muted); color: #7F1D1D; }
.ec-badge-default { background-color: var(--ec-surface-2); color: var(--ec-text-muted); border: 1px solid var(--ec-border); }
.ec-badge-pending { background-color: var(--ec-gold-muted); color: #713F12; }
/* ── Star Rating ──────────────── */
.ec-stars {
display: inline-flex;
align-items: center;
gap: 1px;
color: var(--ec-gold);
font-size: 0.85rem;
}
.ec-stars-count {
font-family: var(--ec-font-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--ec-text-muted);
margin-left: 0.3rem;
}
/* ── Price display ────────────── */
.ec-price {
font-family: var(--ec-font-heading);
font-size: 1.25rem;
font-weight: 800;
color: var(--ec-text);
letter-spacing: -0.02em;
}
.ec-price-original {
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text-light);
text-decoration: line-through;
}
.ec-price-sale { color: var(--ec-accent); }
/* ── Toggle ───────────────────── */
.ec-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.ec-toggle input { opacity: 0; width: 0; height: 0; }
.ec-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--ec-border-strong); border-radius: 24px; transition: var(--ec-transition); }
.ec-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--ec-transition); box-shadow: var(--ec-shadow-xs); }
.ec-toggle input:checked + .ec-toggle-slider { background-color: var(--ec-primary); }
.ec-toggle input:checked + .ec-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.ec-divider { border: none; border-top: 1px solid var(--ec-border); margin: 0; }
/* ── Logo ─────────────────────── */
.ec-logo {
display: inline-flex;
align-items: center;
gap: 0.55rem;
text-decoration: none;
font-family: var(--ec-font-heading);
font-weight: 800;
font-size: 1.25rem;
color: var(--ec-text);
letter-spacing: -0.03em;
}
.ec-logo-icon {
width: 34px;
height: 34px;
background: linear-gradient(135deg, #8B5CF6, #7C3AED);
border-radius: var(--ec-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.1rem;
}
/* ── Trust badges ─────────────── */
.ec-trust-strip {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.ec-trust-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--ec-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--ec-text-muted);
}
.ec-trust-item svg { color: var(--ec-primary); flex-shrink: 0; }
/* ── Utilities ────────────────── */
.text-primary { color: var(--ec-primary) !important; }
.text-accent { color: var(--ec-accent) !important; }
.text-success { color: var(--ec-success) !important; }
.text-danger { color: var(--ec-danger) !important; }
.text-muted { color: var(--ec-text-muted) !important; }
.text-light { color: var(--ec-text-light) !important; }
.ec-link-sm {
font-family: var(--ec-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--ec-primary);
text-decoration: none;
transition: var(--ec-transition);
}
.ec-link-sm:hover {
color: var(--ec-primary-hover);
}
/* --- COMPONENT STYLES --- */
.ec-activity-card {
max-width: 520px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
}
.ec-activity-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--ec-border);
}
.ec-activity-head h4 {
font-size: 1rem;
font-weight: 700;
}
.ec-activity-list {
display: flex;
flex-direction: column;
padding: 1.5rem;
position: relative;
}
.ec-activity-item {
display: flex;
align-items: flex-start;
gap: 1rem;
position: relative;
z-index: 2;
padding-bottom: 1.5rem;
}
.ec-activity-item:last-of-type {
padding-bottom: 0;
}
.ec-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: 2px;
background-color: var(--ec-border);
z-index: 1;
}
.ec-act-ico {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: var(--ec-shadow-xs);
}
.ec-act-content {
flex: 1;
min-width: 0;
}
.ec-act-top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.ec-act-label {
font-family: var(--ec-font-heading);
font-size: 0.875rem;
font-weight: 700;
color: var(--ec-text);
}
.ec-act-time {
font-family: var(--ec-font-body);
font-size: 0.75rem;
font-weight: 600;
color: var(--ec-text-light);
white-space: nowrap;
}
.ec-act-meta {
font-size: 0.8rem;
color: var(--ec-text-muted);
font-weight: 500;
line-height: 1.5;
display: block;
}
/* Timeline Vertical Line */
.ec-activity-line {
display: none;
}
.ec-activity-item.active .ec-act-ico {
outline: 4px solid var(--ec-primary-muted);
}
Modals
Cart Confirm Dialog
HTML
<div class="ec-modal-backdrop">
<div class="ec-modal ec-card">
<div class="ec-modal-head">
<div class="ec-modal-title-row">
<div class="ec-modal-ico" style="background:var(--ec-success-muted); color:var(--ec-success);">
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2.5" fill="none"><polyline points="20 6 9 17 4 12"/></svg>
</div>
<div>
<h4>Added to Cart</h4>
<p class="ec-modal-meta">Item successfully registered to your session.</p>
</div>
</div>
<button class="ec-btn ec-btn-ghost ec-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="ec-modal-body">
<div class="ec-cart-summary">
<div class="ec-cart-prod-row">
<span class="ec-cart-prod-thumb">🎧</span>
<div class="ec-cart-prod-info">
<strong>Noise-Cancelling Headphones</strong>
<p class="text-muted" style="font-size:0.78rem; margin-top:0.1rem;">Qty: 1 · Color: Carbon Black</p>
</div>
<span class="ec-price ec-price-sale" style="font-size:1.05rem;">$199.00</span>
</div>
<hr class="ec-divider">
<div class="ec-cart-totals">
<div class="ec-total-row">
<span class="text-muted">Cart Subtotal (3 items)</span>
<span class="font-mono" style="font-weight:700;">$328.00</span>
</div>
<div class="ec-total-row text-success">
<span>Fulfillment & Shipping</span>
<span style="font-weight:700;">FREE</span>
</div>
</div>
</div>
<!-- Trust Alert/Signal Inside Modal -->
<div class="ec-modal-trust-alert">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none" style="flex-shrink:0;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
<span>Items in your cart are not reserved. Checkout now to secure stock.</span>
</div>
</div>
<div class="ec-modal-foot">
<button class="ec-btn ec-btn-outline">Continue Shopping</button>
<button class="ec-btn ec-btn-primary">Proceed to Checkout</button>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Cart Confirm Dialog */
/* NOTE: This component requires base.css to be included in your page. */
.ec-modal-backdrop {
background-color: rgba(15,23,42,0.45);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
border-radius: var(--ec-radius);
max-width: 700px;
margin: 0 auto;
}
.ec-modal {
width: 100%;
max-width: 480px;
padding: 0 !important;
overflow: hidden;
}
.ec-modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem;
border-bottom: 1px solid var(--ec-border);
}
.ec-modal-title-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.ec-modal-ico {
width: 40px;
height: 40px;
border-radius: var(--ec-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ec-modal-head h4 {
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 0.15rem;
}
.ec-modal-meta {
font-size: 0.8rem;
font-weight: 600;
}
.ec-modal-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.ec-cart-summary {
display: flex;
flex-direction: column;
gap: 1rem;
background-color: var(--ec-surface-2);
border: 1px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
padding: 1.25rem;
}
.ec-cart-prod-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.ec-cart-prod-thumb {
width: 42px;
height: 42px;
background-color: var(--ec-surface);
border: 1px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
flex-shrink: 0;
}
.ec-cart-prod-info {
flex: 1;
min-width: 0;
}
.ec-cart-prod-info strong {
font-family: var(--ec-font-heading);
font-size: 0.875rem;
font-weight: 700;
color: var(--ec-text);
}
.ec-cart-totals {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.ec-total-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
font-weight: 600;
}
.ec-modal-trust-alert {
display: flex;
align-items: center;
gap: 0.6rem;
background-color: var(--ec-accent-muted);
color: #9A3412;
border: 1px solid rgba(249,115,22,0.15);
border-radius: var(--ec-radius-sm);
padding: 0.75rem 1rem;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.4;
}
.ec-modal-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
padding: 1.25rem 1.5rem;
border-top: 1px solid var(--ec-border);
background-color: var(--ec-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=Sora:wght@400;500;600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap');
/* ===========================
E-commerce Starter Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--ec-bg: #F8FAFC;
--ec-surface: #FFFFFF;
--ec-surface-2: #F1F5F9;
--ec-surface-dark: #0F172A;
/* Brand */
--ec-primary: #7C3AED;
--ec-primary-hover: #6D28D9;
--ec-primary-muted: #EDE9FE;
--ec-accent: #F97316;
--ec-accent-hover: #EA6C08;
--ec-accent-muted: #FFF7ED;
--ec-success: #16A34A;
--ec-success-muted: #DCFCE7;
--ec-danger: #DC2626;
--ec-danger-muted: #FEE2E2;
--ec-gold: #EAB308;
--ec-gold-muted: #FEF9C3;
/* Text */
--ec-text: #0F172A;
--ec-text-muted: #64748B;
--ec-text-light: #94A3B8;
/* Borders */
--ec-border: #E2E8F0;
--ec-border-strong: #CBD5E1;
/* Radius */
--ec-radius-sm: 8px;
--ec-radius: 12px;
--ec-radius-lg: 18px;
--ec-radius-pill: 100px;
/* Fonts */
--ec-font-heading: 'Sora', sans-serif;
--ec-font-body: 'Nunito', sans-serif;
/* Shadows */
--ec-shadow-xs: 0 1px 2px rgba(15,23,42,0.05);
--ec-shadow-sm: 0 1px 3px rgba(15,23,42,0.07), 0 4px 16px rgba(15,23,42,0.04);
--ec-shadow: 0 4px 12px rgba(15,23,42,0.08), 0 16px 40px rgba(15,23,42,0.06);
--ec-shadow-lg: 0 8px 24px rgba(15,23,42,0.12), 0 32px 64px rgba(15,23,42,0.08);
--ec-shadow-product:0 2px 8px rgba(15,23,42,0.08), 0 8px 32px rgba(15,23,42,0.08);
/* Transition */
--ec-transition: all 0.2s ease;
--ec-transition-slow: all 0.3s ease;
}
body {
margin: 0;
font-family: var(--ec-font-body);
color: var(--ec-text);
background-color: var(--ec-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.ec-card {
background-color: var(--ec-surface);
border: 1px solid var(--ec-border);
border-radius: var(--ec-radius);
box-shadow: var(--ec-shadow-sm);
padding: 1.75rem;
transition: var(--ec-transition);
}
.ec-card:hover { box-shadow: var(--ec-shadow); }
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ec-font-heading);
font-weight: 700;
margin: 0;
color: var(--ec-text);
letter-spacing: -0.02em;
line-height: 1.2;
}
p { font-family: var(--ec-font-body); color: var(--ec-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.ec-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.65rem 1.35rem;
font-family: var(--ec-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--ec-radius-sm);
border: 2px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--ec-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
letter-spacing: -0.01em;
}
.ec-btn:focus-visible { outline: 2px solid var(--ec-primary); outline-offset: 2px; }
.ec-btn-primary { background-color: var(--ec-primary); color: #fff; border-color: var(--ec-primary); }
.ec-btn-primary:hover { background-color: var(--ec-primary-hover); border-color: var(--ec-primary-hover); box-shadow: 0 4px 16px rgba(124,58,237,0.35); transform: translateY(-1px); }
.ec-btn-primary:active { transform: translateY(0); box-shadow: none; }
.ec-btn-accent { background-color: var(--ec-accent); color: #fff; border-color: var(--ec-accent); }
.ec-btn-accent:hover { background-color: var(--ec-accent-hover); border-color: var(--ec-accent-hover); box-shadow: 0 4px 16px rgba(249,115,22,0.35); transform: translateY(-1px); }
.ec-btn-outline { background-color: var(--ec-surface); color: var(--ec-text); border-color: var(--ec-border-strong); }
.ec-btn-outline:hover { background-color: var(--ec-surface-2); border-color: var(--ec-primary); color: var(--ec-primary); transform: translateY(-1px); }
.ec-btn-ghost { background-color: transparent; color: var(--ec-text-muted); border-color: transparent; }
.ec-btn-ghost:hover { background-color: var(--ec-surface-2); color: var(--ec-text); }
.ec-btn-danger { background-color: var(--ec-danger); color: #fff; border-color: var(--ec-danger); }
.ec-btn-danger:hover { background-color: #B91C1C; box-shadow: 0 4px 16px rgba(220,38,38,0.35); transform: translateY(-1px); }
.ec-btn-sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
.ec-btn-lg { padding: 0.85rem 1.85rem; font-size: 1rem; }
.ec-btn-block { width: 100%; }
.ec-btn-icon { width: 38px; height: 38px; padding: 0; border-radius: var(--ec-radius-sm); }
/* ── Form Controls ────────────── */
.ec-input {
width: 100%;
padding: 0.65rem 1rem;
border: 2px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text);
background-color: var(--ec-surface);
outline: none;
transition: var(--ec-transition);
}
.ec-input::placeholder { color: var(--ec-text-light); font-weight: 500; }
.ec-input:focus { border-color: var(--ec-primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
.ec-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--ec-font-heading);
font-weight: 700;
font-size: 0.82rem;
color: var(--ec-text);
letter-spacing: -0.01em;
}
.ec-select {
width: 100%;
padding: 0.65rem 2rem 0.65rem 1rem;
border: 2px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text);
background-color: var(--ec-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='%2364748B' 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.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--ec-transition);
}
.ec-select:focus { border-color: var(--ec-primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
/* ── Badges ───────────────────── */
.ec-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.65rem;
border-radius: var(--ec-radius-pill);
font-family: var(--ec-font-heading);
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
letter-spacing: 0.01em;
}
.ec-badge-sale { background-color: var(--ec-accent); color: #fff; }
.ec-badge-new { background-color: var(--ec-primary); color: #fff; }
.ec-badge-success { background-color: var(--ec-success-muted); color: #14532D; }
.ec-badge-danger { background-color: var(--ec-danger-muted); color: #7F1D1D; }
.ec-badge-default { background-color: var(--ec-surface-2); color: var(--ec-text-muted); border: 1px solid var(--ec-border); }
.ec-badge-pending { background-color: var(--ec-gold-muted); color: #713F12; }
/* ── Star Rating ──────────────── */
.ec-stars {
display: inline-flex;
align-items: center;
gap: 1px;
color: var(--ec-gold);
font-size: 0.85rem;
}
.ec-stars-count {
font-family: var(--ec-font-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--ec-text-muted);
margin-left: 0.3rem;
}
/* ── Price display ────────────── */
.ec-price {
font-family: var(--ec-font-heading);
font-size: 1.25rem;
font-weight: 800;
color: var(--ec-text);
letter-spacing: -0.02em;
}
.ec-price-original {
font-family: var(--ec-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--ec-text-light);
text-decoration: line-through;
}
.ec-price-sale { color: var(--ec-accent); }
/* ── Toggle ───────────────────── */
.ec-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.ec-toggle input { opacity: 0; width: 0; height: 0; }
.ec-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--ec-border-strong); border-radius: 24px; transition: var(--ec-transition); }
.ec-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--ec-transition); box-shadow: var(--ec-shadow-xs); }
.ec-toggle input:checked + .ec-toggle-slider { background-color: var(--ec-primary); }
.ec-toggle input:checked + .ec-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.ec-divider { border: none; border-top: 1px solid var(--ec-border); margin: 0; }
/* ── Logo ─────────────────────── */
.ec-logo {
display: inline-flex;
align-items: center;
gap: 0.55rem;
text-decoration: none;
font-family: var(--ec-font-heading);
font-weight: 800;
font-size: 1.25rem;
color: var(--ec-text);
letter-spacing: -0.03em;
}
.ec-logo-icon {
width: 34px;
height: 34px;
background: linear-gradient(135deg, #8B5CF6, #7C3AED);
border-radius: var(--ec-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.1rem;
}
/* ── Trust badges ─────────────── */
.ec-trust-strip {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.ec-trust-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--ec-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--ec-text-muted);
}
.ec-trust-item svg { color: var(--ec-primary); flex-shrink: 0; }
/* ── Utilities ────────────────── */
.text-primary { color: var(--ec-primary) !important; }
.text-accent { color: var(--ec-accent) !important; }
.text-success { color: var(--ec-success) !important; }
.text-danger { color: var(--ec-danger) !important; }
.text-muted { color: var(--ec-text-muted) !important; }
.text-light { color: var(--ec-text-light) !important; }
.ec-link-sm {
font-family: var(--ec-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--ec-primary);
text-decoration: none;
transition: var(--ec-transition);
}
.ec-link-sm:hover {
color: var(--ec-primary-hover);
}
/* --- COMPONENT STYLES --- */
.ec-modal-backdrop {
background-color: rgba(15,23,42,0.45);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
border-radius: var(--ec-radius);
max-width: 700px;
margin: 0 auto;
}
.ec-modal {
width: 100%;
max-width: 480px;
padding: 0 !important;
overflow: hidden;
}
.ec-modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem;
border-bottom: 1px solid var(--ec-border);
}
.ec-modal-title-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.ec-modal-ico {
width: 40px;
height: 40px;
border-radius: var(--ec-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ec-modal-head h4 {
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 0.15rem;
}
.ec-modal-meta {
font-size: 0.8rem;
font-weight: 600;
}
.ec-modal-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.ec-cart-summary {
display: flex;
flex-direction: column;
gap: 1rem;
background-color: var(--ec-surface-2);
border: 1px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
padding: 1.25rem;
}
.ec-cart-prod-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.ec-cart-prod-thumb {
width: 42px;
height: 42px;
background-color: var(--ec-surface);
border: 1px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
flex-shrink: 0;
}
.ec-cart-prod-info {
flex: 1;
min-width: 0;
}
.ec-cart-prod-info strong {
font-family: var(--ec-font-heading);
font-size: 0.875rem;
font-weight: 700;
color: var(--ec-text);
}
.ec-cart-totals {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.ec-total-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
font-weight: 600;
}
.ec-modal-trust-alert {
display: flex;
align-items: center;
gap: 0.6rem;
background-color: var(--ec-accent-muted);
color: #9A3412;
border: 1px solid rgba(249,115,22,0.15);
border-radius: var(--ec-radius-sm);
padding: 0.75rem 1rem;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.4;
}
.ec-modal-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
padding: 1.25rem 1.5rem;
border-top: 1px solid var(--ec-border);
background-color: var(--ec-surface-2);
}