Storefront - Free HTML/CSS UI Kit
A high-end, luxury retail storefront UI Kit featuring sleek midnight blue, warm golden bronze accents, cormorant/tenor geometric typography, and razor-sharp conversions.
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
Midnight Indigo
#0B132B
Golden Bronze
#C5A028
Soft Warm White
#FAFAFA
Basalt Slate
#1E293B
Platin Gray
#F1F5F9
Typography
Hero Sections
Promo Banner Hero
HTML
<div class="sf-promo-hero sf-card">
<div class="sf-promo-badge">
<span class="sf-badge sf-badge-sale">HAUTE COLLECTION</span>
<span class="sf-promo-discount">Sleek geometric lines, handmade in Italy.</span>
</div>
<h1 class="sf-promo-title">Modern Luxury, Redefined</h1>
<p class="sf-promo-desc">Our latest capsule collection of structured gold rings, solid brass objects, and minimal architectural vaseware. Conceived for modern sanctuaries.</p>
<div class="sf-promo-actions">
<button class="sf-btn sf-btn-primary sf-btn-lg">View Capsule</button>
<button class="sf-btn sf-btn-outline sf-btn-lg">The Philosophy</button>
</div>
<!-- Trust signals below -->
<div class="sf-hero-trust">
<div class="sf-trust-item">
<span>✨ 18k Solid Gold</span>
</div>
<div class="sf-trust-item">
<span>🇮🇹 Hand-finished in Milan</span>
</div>
<div class="sf-trust-item">
<span>🔒 Insured Courier Dispatch</span>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Promo Banner Hero */
/* NOTE: This component requires base.css to be included in your page. */
.sf-promo-hero {
max-width: 1100px;
margin: 0 auto;
padding: 5rem 3rem !important;
text-align: center;
background: linear-gradient(135deg, #FAFAFA 0%, var(--sf-primary-muted) 100%);
display: flex;
flex-direction: column;
align-items: center;
gap: 1.75rem;
position: relative;
overflow: hidden;
}
.sf-promo-hero::before {
content: '';
position: absolute;
top: -40%;
left: -30%;
width: 250px;
height: 250px;
background: radial-gradient(circle, rgba(197,160,40,0.06) 0%, transparent 75%);
pointer-events: none;
}
.sf-promo-badge {
display: flex;
align-items: center;
gap: 0.85rem;
flex-wrap: wrap;
justify-content: center;
}
.sf-promo-discount {
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 700;
color: var(--sf-primary-hover);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sf-promo-title {
font-size: 3.5rem;
max-width: 800px;
letter-spacing: 0.02em;
color: var(--sf-text);
}
.sf-promo-desc {
font-size: 1.1rem;
max-width: 680px;
color: var(--sf-text-muted);
line-height: 1.7;
font-weight: 500;
}
.sf-promo-actions {
display: flex;
gap: 0.85rem;
justify-content: center;
flex-wrap: wrap;
}
.sf-hero-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 2.5rem;
margin-top: 1.5rem;
border-top: 1px solid var(--sf-border);
padding-top: 2rem;
width: 100%;
flex-wrap: wrap;
}
.sf-trust-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--sf-font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--sf-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
@media (max-width: 768px) {
.sf-promo-title { font-size: 2.35rem; }
.sf-promo-hero { padding: 3.5rem 1.5rem !important; }
.sf-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=Montserrat:wght@300;400;500;600;700;800&family=Tenor+Sans&display=swap');
/* ===========================
Storefront Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--sf-bg: #FAFAFA;
--sf-surface: #FFFFFF;
--sf-surface-2: #F8F9FA;
--sf-surface-dark: #0B132B;
/* Brand Palette */
--sf-primary: #0B132B;
--sf-primary-hover: #1C2541;
--sf-primary-muted: #E2E8F0;
--sf-accent: #C5A028;
--sf-accent-hover: #A4821A;
--sf-accent-muted: #FCF8E3;
--sf-success: #0F766E;
--sf-success-muted: #CCFBF1;
--sf-danger: #991B1B;
--sf-danger-muted: #FEE2E2;
--sf-gold: #C5A028;
--sf-gold-muted: #FCF8E3;
/* Text */
--sf-text: #0B132B;
--sf-text-muted: #475569;
--sf-text-light: #94A3B8;
/* Borders */
--sf-border: #E2E8F0;
--sf-border-strong: #CBD5E1;
/* Geometric Radius Shapes */
--sf-radius-sm: 0px;
--sf-radius: 0px;
--sf-radius-lg: 0px;
--sf-radius-pill: 0px;
/* Fonts */
--sf-font-heading: 'Tenor Sans', sans-serif;
--sf-font-body: 'Montserrat', sans-serif;
/* Shadows */
--sf-shadow-sm: 0 2px 10px rgba(11,19,43,0.01);
--sf-shadow: 0 8px 30px rgba(11,19,43,0.03);
--sf-shadow-lg: 0 20px 50px rgba(11,19,43,0.05);
/* Transition */
--sf-transition: all 0.2s ease;
}
body {
margin: 0;
font-family: var(--sf-font-body);
color: var(--sf-text);
background-color: var(--sf-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.sf-card {
background-color: var(--sf-surface);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius);
box-shadow: var(--sf-shadow-sm);
padding: 2rem;
transition: var(--sf-transition);
}
.sf-card:hover {
box-shadow: var(--sf-shadow);
border-color: var(--sf-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--sf-font-heading);
font-weight: 400;
margin: 0;
color: var(--sf-text);
line-height: 1.2;
letter-spacing: 0.05em;
text-transform: uppercase;
}
p { font-family: var(--sf-font-body); color: var(--sf-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.sf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.75rem;
font-family: var(--sf-font-body);
font-size: 0.8rem;
font-weight: 700;
border-radius: var(--sf-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--sf-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.sf-btn-primary { background-color: var(--sf-primary); color: #fff; border-color: var(--sf-primary); }
.sf-btn-primary:hover { background-color: var(--sf-primary-hover); border-color: var(--sf-primary-hover); }
.sf-btn-accent { background-color: var(--sf-accent); color: #sf-bg; border-color: var(--sf-accent); color: #fff; }
.sf-btn-accent:hover { background-color: var(--sf-accent-hover); border-color: var(--sf-accent-hover); }
.sf-btn-outline { background-color: transparent; color: var(--sf-text); border-color: var(--sf-text); }
.sf-btn-outline:hover { background-color: var(--sf-surface-2); }
.sf-btn-ghost { background-color: transparent; color: var(--sf-text-muted); border-color: transparent; }
.sf-btn-ghost:hover { background-color: var(--sf-surface-2); color: var(--sf-text); }
.sf-btn-sm { padding: 0.5rem 1.25rem; font-size: 0.7rem; }
.sf-btn-lg { padding: 1rem 2.25rem; font-size: 0.85rem; }
.sf-btn-block { width: 100%; }
.sf-btn-icon { width: 44px; height: 44px; padding: 0; }
/* ── Form Controls ────────────── */
.sf-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text);
background-color: var(--sf-surface);
outline: none;
transition: var(--sf-transition);
}
.sf-input::placeholder { color: var(--sf-text-light); }
.sf-input:focus { border-color: var(--sf-primary); background-color: #FAFAFA; }
.sf-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--sf-font-body);
font-weight: 700;
font-size: 0.75rem;
color: var(--sf-text);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sf-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text);
background-color: var(--sf-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='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--sf-transition);
}
.sf-select:focus { border-color: var(--sf-primary); }
/* ── Badges ───────────────────── */
.sf-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.65rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.1em;
border: 1px solid transparent;
}
.sf-badge-sale { background-color: var(--sf-accent-muted); color: var(--sf-accent); border-color: var(--sf-accent); }
.sf-badge-new { background-color: var(--sf-primary-muted); color: var(--sf-primary); border-color: var(--sf-primary); }
.sf-badge-success { background-color: var(--sf-success-muted); color: var(--sf-success); border-color: var(--sf-success); }
.sf-badge-danger { background-color: var(--sf-danger-muted); color: var(--sf-danger); border-color: var(--sf-danger); }
.sf-badge-default { background-color: var(--sf-surface-2); color: var(--sf-text-muted); border-color: var(--sf-border); }
/* ── Star Rating ──────────────── */
.sf-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--sf-accent);
font-size: 0.75rem;
}
.sf-stars-count {
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 600;
color: var(--sf-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.sf-price {
font-family: var(--sf-font-body);
font-size: 1.15rem;
font-weight: 700;
color: var(--sf-text);
}
.sf-price-original {
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text-light);
text-decoration: line-through;
}
.sf-price-sale { color: var(--sf-accent); }
/* ── Toggle Slider ────────────── */
.sf-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.sf-toggle input { opacity: 0; width: 0; height: 0; }
.sf-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--sf-border-strong); border-radius: 0px; transition: var(--sf-transition); }
.sf-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 0px; transition: var(--sf-transition); }
.sf-toggle input:checked + .sf-toggle-slider { background-color: var(--sf-accent); }
.sf-toggle input:checked + .sf-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.sf-divider { border: none; border-top: 1px solid var(--sf-border); margin: 0; }
/* ── Logo ─────────────────────── */
.sf-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--sf-font-heading);
font-size: 1.35rem;
color: var(--sf-text);
font-weight: 400;
letter-spacing: 0.1em;
}
.sf-logo-icon {
width: 32px;
height: 32px;
background-color: var(--sf-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 0.95rem;
font-weight: 700;
border-radius: 0px;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--sf-primary) !important; }
.text-accent { color: var(--sf-accent) !important; }
.text-success { color: var(--sf-success) !important; }
.text-danger { color: var(--sf-danger) !important; }
.text-muted { color: var(--sf-text-muted) !important; }
.text-light { color: var(--sf-text-light) !important; }
.sf-link-sm {
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 700;
color: var(--sf-primary);
text-decoration: none;
transition: var(--sf-transition);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sf-link-sm:hover {
color: var(--sf-primary-hover);
}
/* --- COMPONENT STYLES --- */
.sf-promo-hero {
max-width: 1100px;
margin: 0 auto;
padding: 5rem 3rem !important;
text-align: center;
background: linear-gradient(135deg, #FAFAFA 0%, var(--sf-primary-muted) 100%);
display: flex;
flex-direction: column;
align-items: center;
gap: 1.75rem;
position: relative;
overflow: hidden;
}
.sf-promo-hero::before {
content: '';
position: absolute;
top: -40%;
left: -30%;
width: 250px;
height: 250px;
background: radial-gradient(circle, rgba(197,160,40,0.06) 0%, transparent 75%);
pointer-events: none;
}
.sf-promo-badge {
display: flex;
align-items: center;
gap: 0.85rem;
flex-wrap: wrap;
justify-content: center;
}
.sf-promo-discount {
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 700;
color: var(--sf-primary-hover);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sf-promo-title {
font-size: 3.5rem;
max-width: 800px;
letter-spacing: 0.02em;
color: var(--sf-text);
}
.sf-promo-desc {
font-size: 1.1rem;
max-width: 680px;
color: var(--sf-text-muted);
line-height: 1.7;
font-weight: 500;
}
.sf-promo-actions {
display: flex;
gap: 0.85rem;
justify-content: center;
flex-wrap: wrap;
}
.sf-hero-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 2.5rem;
margin-top: 1.5rem;
border-top: 1px solid var(--sf-border);
padding-top: 2rem;
width: 100%;
flex-wrap: wrap;
}
.sf-trust-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--sf-font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--sf-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
@media (max-width: 768px) {
.sf-promo-title { font-size: 2.35rem; }
.sf-promo-hero { padding: 3.5rem 1.5rem !important; }
.sf-hero-trust { gap: 1rem; }
}
Product Feature Split
HTML
<div class="sf-split-hero">
<div class="sf-split-main sf-card">
<span class="sf-badge sf-badge-new">Rare Edition</span>
<h1 class="sf-split-title">Oculus Brass Object</h1>
<p class="sf-split-desc">Hand-sculpted in Milan from premium solid golden brass. Featuring a gorgeous brushed finish and a highly structured silhouette that captures and bends ambient light.</p>
<!-- Product highlights -->
<ul class="sf-split-features">
<li>
<span class="sf-feat-icon">✨</span>
<div>
<strong>Brushed Solid Brass</strong>
<p>Subtle tactile texture that ages beautifully with a rich natural patina.</p>
</div>
</li>
<li>
<span class="sf-feat-icon">📐</span>
<div>
<strong>Precision Balanced</strong>
<p>Weighted base engineered precisely to double as a premium bookend.</p>
</div>
</li>
</ul>
<div class="sf-split-actions-row">
<div class="sf-split-price-box">
<span class="sf-price sf-price-sale">$245.00</span>
<span class="sf-price-original">$320.00</span>
</div>
<button class="sf-btn sf-btn-primary sf-btn-lg">Acquire Object</button>
<button class="sf-btn sf-btn-outline sf-btn-lg">Details</button>
</div>
</div>
<!-- Right Side: Product widget -->
<div class="sf-split-sidebar">
<div class="sf-preview-widget sf-card">
<div class="sf-widget-image-block">
<span class="sf-badge sf-badge-new og-widget-badge">1 of 100</span>
<div class="sf-widget-bot-icon">📐</div>
<div class="sf-widget-shades">
<div class="sf-shade-one"></div>
<div class="sf-shade-two"></div>
</div>
</div>
<div class="sf-widget-info">
<div class="sf-stars">
⭐⭐⭐⭐⭐
<span class="sf-stars-count">(48 collectors)</span>
</div>
<h4 class="sf-widget-title">Oculus Brass (2.4kg)</h4>
<div class="sf-widget-stock">
<span class="sf-stock-dot"></span>
<span>Numbered archive edition</span>
</div>
</div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Product Feature Split */
/* NOTE: This component requires base.css to be included in your page. */
.sf-split-hero {
display: grid;
grid-template-columns: 1fr 340px;
gap: 1.75rem;
max-width: 1100px;
margin: 0 auto;
align-items: start;
}
.sf-split-main {
padding: 3rem !important;
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: flex-start;
}
.sf-split-title {
font-size: 2.85rem;
letter-spacing: 0.02em;
line-height: 1.15;
}
.sf-split-desc {
font-size: 1.05rem;
color: var(--sf-text-muted);
line-height: 1.7;
font-weight: 500;
}
/* Features */
.sf-split-features {
list-style: none;
padding: 0;
margin: 0.5rem 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.sf-split-features li {
display: flex;
align-items: flex-start;
gap: 0.85rem;
}
.sf-feat-icon {
font-size: 1.25rem;
width: 38px;
height: 38px;
background-color: var(--sf-surface-2);
border-radius: var(--sf-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sf-split-features strong {
font-family: var(--sf-font-body);
font-size: 0.92rem;
font-weight: 700;
color: var(--sf-text);
}
.sf-split-features p {
font-size: 0.82rem;
color: var(--sf-text-muted);
margin-top: 0.1rem;
font-weight: 500;
}
.sf-split-actions-row {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
flex-wrap: wrap;
border-top: 1px solid var(--sf-border);
padding-top: 1.5rem;
margin-top: 0.5rem;
}
.sf-split-price-box {
display: flex;
flex-direction: column;
margin-right: auto;
}
/* Sidebar Product Widget */
.sf-preview-widget {
padding: 0 !important;
overflow: hidden;
}
.sf-widget-image-block {
height: 270px;
background: linear-gradient(135deg, var(--sf-primary-muted), #FAFAFA);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.sf-widget-bot-icon {
font-size: 5rem;
z-index: 2;
transition: var(--sf-transition);
}
.sf-preview-widget:hover .sf-widget-bot-icon {
transform: scale(1.08) rotate(4deg);
}
.sf-widget-shades {
position: absolute;
inset: 0;
pointer-events: none;
}
.sf-shade-one {
position: absolute;
bottom: -10%;
right: -10%;
width: 160px;
height: 160px;
background: rgba(197,160,40,0.06);
border-radius: 50%;
}
.sf-shade-two {
position: absolute;
top: -10%;
left: -10%;
width: 130px;
height: 130px;
background: rgba(11,19,43,0.04);
border-radius: 50%;
}
.sf-widget-info {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.sf-widget-title {
font-size: 1rem;
font-weight: 700;
}
.sf-widget-stock {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.75rem;
font-weight: 700;
color: var(--sf-accent);
}
.sf-stock-dot {
width: 6px;
height: 6px;
background-color: var(--sf-accent);
}
@media (max-width: 900px) {
.sf-split-hero { grid-template-columns: 1fr; }
.sf-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=Montserrat:wght@300;400;500;600;700;800&family=Tenor+Sans&display=swap');
/* ===========================
Storefront Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--sf-bg: #FAFAFA;
--sf-surface: #FFFFFF;
--sf-surface-2: #F8F9FA;
--sf-surface-dark: #0B132B;
/* Brand Palette */
--sf-primary: #0B132B;
--sf-primary-hover: #1C2541;
--sf-primary-muted: #E2E8F0;
--sf-accent: #C5A028;
--sf-accent-hover: #A4821A;
--sf-accent-muted: #FCF8E3;
--sf-success: #0F766E;
--sf-success-muted: #CCFBF1;
--sf-danger: #991B1B;
--sf-danger-muted: #FEE2E2;
--sf-gold: #C5A028;
--sf-gold-muted: #FCF8E3;
/* Text */
--sf-text: #0B132B;
--sf-text-muted: #475569;
--sf-text-light: #94A3B8;
/* Borders */
--sf-border: #E2E8F0;
--sf-border-strong: #CBD5E1;
/* Geometric Radius Shapes */
--sf-radius-sm: 0px;
--sf-radius: 0px;
--sf-radius-lg: 0px;
--sf-radius-pill: 0px;
/* Fonts */
--sf-font-heading: 'Tenor Sans', sans-serif;
--sf-font-body: 'Montserrat', sans-serif;
/* Shadows */
--sf-shadow-sm: 0 2px 10px rgba(11,19,43,0.01);
--sf-shadow: 0 8px 30px rgba(11,19,43,0.03);
--sf-shadow-lg: 0 20px 50px rgba(11,19,43,0.05);
/* Transition */
--sf-transition: all 0.2s ease;
}
body {
margin: 0;
font-family: var(--sf-font-body);
color: var(--sf-text);
background-color: var(--sf-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.sf-card {
background-color: var(--sf-surface);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius);
box-shadow: var(--sf-shadow-sm);
padding: 2rem;
transition: var(--sf-transition);
}
.sf-card:hover {
box-shadow: var(--sf-shadow);
border-color: var(--sf-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--sf-font-heading);
font-weight: 400;
margin: 0;
color: var(--sf-text);
line-height: 1.2;
letter-spacing: 0.05em;
text-transform: uppercase;
}
p { font-family: var(--sf-font-body); color: var(--sf-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.sf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.75rem;
font-family: var(--sf-font-body);
font-size: 0.8rem;
font-weight: 700;
border-radius: var(--sf-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--sf-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.sf-btn-primary { background-color: var(--sf-primary); color: #fff; border-color: var(--sf-primary); }
.sf-btn-primary:hover { background-color: var(--sf-primary-hover); border-color: var(--sf-primary-hover); }
.sf-btn-accent { background-color: var(--sf-accent); color: #sf-bg; border-color: var(--sf-accent); color: #fff; }
.sf-btn-accent:hover { background-color: var(--sf-accent-hover); border-color: var(--sf-accent-hover); }
.sf-btn-outline { background-color: transparent; color: var(--sf-text); border-color: var(--sf-text); }
.sf-btn-outline:hover { background-color: var(--sf-surface-2); }
.sf-btn-ghost { background-color: transparent; color: var(--sf-text-muted); border-color: transparent; }
.sf-btn-ghost:hover { background-color: var(--sf-surface-2); color: var(--sf-text); }
.sf-btn-sm { padding: 0.5rem 1.25rem; font-size: 0.7rem; }
.sf-btn-lg { padding: 1rem 2.25rem; font-size: 0.85rem; }
.sf-btn-block { width: 100%; }
.sf-btn-icon { width: 44px; height: 44px; padding: 0; }
/* ── Form Controls ────────────── */
.sf-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text);
background-color: var(--sf-surface);
outline: none;
transition: var(--sf-transition);
}
.sf-input::placeholder { color: var(--sf-text-light); }
.sf-input:focus { border-color: var(--sf-primary); background-color: #FAFAFA; }
.sf-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--sf-font-body);
font-weight: 700;
font-size: 0.75rem;
color: var(--sf-text);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sf-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text);
background-color: var(--sf-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='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--sf-transition);
}
.sf-select:focus { border-color: var(--sf-primary); }
/* ── Badges ───────────────────── */
.sf-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.65rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.1em;
border: 1px solid transparent;
}
.sf-badge-sale { background-color: var(--sf-accent-muted); color: var(--sf-accent); border-color: var(--sf-accent); }
.sf-badge-new { background-color: var(--sf-primary-muted); color: var(--sf-primary); border-color: var(--sf-primary); }
.sf-badge-success { background-color: var(--sf-success-muted); color: var(--sf-success); border-color: var(--sf-success); }
.sf-badge-danger { background-color: var(--sf-danger-muted); color: var(--sf-danger); border-color: var(--sf-danger); }
.sf-badge-default { background-color: var(--sf-surface-2); color: var(--sf-text-muted); border-color: var(--sf-border); }
/* ── Star Rating ──────────────── */
.sf-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--sf-accent);
font-size: 0.75rem;
}
.sf-stars-count {
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 600;
color: var(--sf-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.sf-price {
font-family: var(--sf-font-body);
font-size: 1.15rem;
font-weight: 700;
color: var(--sf-text);
}
.sf-price-original {
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text-light);
text-decoration: line-through;
}
.sf-price-sale { color: var(--sf-accent); }
/* ── Toggle Slider ────────────── */
.sf-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.sf-toggle input { opacity: 0; width: 0; height: 0; }
.sf-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--sf-border-strong); border-radius: 0px; transition: var(--sf-transition); }
.sf-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 0px; transition: var(--sf-transition); }
.sf-toggle input:checked + .sf-toggle-slider { background-color: var(--sf-accent); }
.sf-toggle input:checked + .sf-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.sf-divider { border: none; border-top: 1px solid var(--sf-border); margin: 0; }
/* ── Logo ─────────────────────── */
.sf-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--sf-font-heading);
font-size: 1.35rem;
color: var(--sf-text);
font-weight: 400;
letter-spacing: 0.1em;
}
.sf-logo-icon {
width: 32px;
height: 32px;
background-color: var(--sf-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 0.95rem;
font-weight: 700;
border-radius: 0px;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--sf-primary) !important; }
.text-accent { color: var(--sf-accent) !important; }
.text-success { color: var(--sf-success) !important; }
.text-danger { color: var(--sf-danger) !important; }
.text-muted { color: var(--sf-text-muted) !important; }
.text-light { color: var(--sf-text-light) !important; }
.sf-link-sm {
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 700;
color: var(--sf-primary);
text-decoration: none;
transition: var(--sf-transition);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sf-link-sm:hover {
color: var(--sf-primary-hover);
}
/* --- COMPONENT STYLES --- */
.sf-split-hero {
display: grid;
grid-template-columns: 1fr 340px;
gap: 1.75rem;
max-width: 1100px;
margin: 0 auto;
align-items: start;
}
.sf-split-main {
padding: 3rem !important;
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: flex-start;
}
.sf-split-title {
font-size: 2.85rem;
letter-spacing: 0.02em;
line-height: 1.15;
}
.sf-split-desc {
font-size: 1.05rem;
color: var(--sf-text-muted);
line-height: 1.7;
font-weight: 500;
}
/* Features */
.sf-split-features {
list-style: none;
padding: 0;
margin: 0.5rem 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.sf-split-features li {
display: flex;
align-items: flex-start;
gap: 0.85rem;
}
.sf-feat-icon {
font-size: 1.25rem;
width: 38px;
height: 38px;
background-color: var(--sf-surface-2);
border-radius: var(--sf-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sf-split-features strong {
font-family: var(--sf-font-body);
font-size: 0.92rem;
font-weight: 700;
color: var(--sf-text);
}
.sf-split-features p {
font-size: 0.82rem;
color: var(--sf-text-muted);
margin-top: 0.1rem;
font-weight: 500;
}
.sf-split-actions-row {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
flex-wrap: wrap;
border-top: 1px solid var(--sf-border);
padding-top: 1.5rem;
margin-top: 0.5rem;
}
.sf-split-price-box {
display: flex;
flex-direction: column;
margin-right: auto;
}
/* Sidebar Product Widget */
.sf-preview-widget {
padding: 0 !important;
overflow: hidden;
}
.sf-widget-image-block {
height: 270px;
background: linear-gradient(135deg, var(--sf-primary-muted), #FAFAFA);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.sf-widget-bot-icon {
font-size: 5rem;
z-index: 2;
transition: var(--sf-transition);
}
.sf-preview-widget:hover .sf-widget-bot-icon {
transform: scale(1.08) rotate(4deg);
}
.sf-widget-shades {
position: absolute;
inset: 0;
pointer-events: none;
}
.sf-shade-one {
position: absolute;
bottom: -10%;
right: -10%;
width: 160px;
height: 160px;
background: rgba(197,160,40,0.06);
border-radius: 50%;
}
.sf-shade-two {
position: absolute;
top: -10%;
left: -10%;
width: 130px;
height: 130px;
background: rgba(11,19,43,0.04);
border-radius: 50%;
}
.sf-widget-info {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.sf-widget-title {
font-size: 1rem;
font-weight: 700;
}
.sf-widget-stock {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.75rem;
font-weight: 700;
color: var(--sf-accent);
}
.sf-stock-dot {
width: 6px;
height: 6px;
background-color: var(--sf-accent);
}
@media (max-width: 900px) {
.sf-split-hero { grid-template-columns: 1fr; }
.sf-split-main { padding: 2rem !important; }
}
Forms
Customer Login
HTML
<div class="sf-login-wrap">
<div class="sf-login-card sf-card">
<div class="sf-login-brand">
<a href="#" class="sf-login-logo">
<div class="sf-logo-icon" style="width:28px; height:28px; font-size:0.85rem;">S</div>
<span>Stellare</span>
</a>
<h2 class="sf-login-title">Archival Login</h2>
<p class="sf-login-sub">Enter your credentials to access your private orders.</p>
</div>
<form class="sf-login-form" onsubmit="return false;">
<div class="sf-form-group">
<label class="sf-label" for="cust-email">Collector Email</label>
<input type="email" id="cust-email" class="sf-input" placeholder="[email protected]" value="[email protected]">
</div>
<div class="sf-form-group">
<div class="sf-label-row">
<label class="sf-label" for="cust-pass">Password</label>
<a href="#" class="sf-link-sm">Recover?</a>
</div>
<input type="password" id="cust-pass" class="sf-input" placeholder="••••••••••" value="••••••••••">
</div>
<div class="sf-login-remember">
<label class="sf-checkbox-label">
<input type="checkbox" class="sf-checkbox" checked>
<span>Remember my allocation</span>
</label>
</div>
<button type="submit" class="sf-btn sf-btn-primary sf-btn-block sf-btn-lg">Authenticate</button>
</form>
<div class="sf-login-divider">
<span>Or Connect With</span>
</div>
<div class="sf-social-login">
<button class="sf-btn sf-btn-outline sf-btn-block">
<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="margin-right:0.25rem;"><path d="M12.24 10.285V13.4h6.887C18.2 15.614 15.645 18 12.24 18c-3.86 0-7-3.14-7-7s3.14-7 7-7c1.7 0 3.3.6 4.6 1.8l2.4-2.4C17.3 1.7 14.9 1 12.24 1c-5.5 0-10 4.5-10 10s4.5 10 10 10c5.8 0 9.8-4.1 9.8-10 0-.6 0-1.1-.1-1.7H12.24z"/></svg>
Google Identity
</button>
</div>
<div class="sf-login-signup">
<span>New collector?</span> <a href="#" class="sf-link-sm">Request Invite</a>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Customer Login */
/* NOTE: This component requires base.css to be included in your page. */
.sf-login-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 560px;
background-color: var(--sf-bg);
padding: 2rem;
}
.sf-login-card {
width: 100%;
max-width: 420px;
padding: 2.5rem !important;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.sf-login-brand {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.sf-login-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--sf-font-heading);
font-size: 1.15rem;
color: var(--sf-text);
}
.sf-login-title {
font-size: 1.65rem;
margin-top: 0.25rem;
}
.sf-login-sub {
font-size: 0.9rem;
color: var(--sf-text-muted);
}
.sf-login-form {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.sf-form-group {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.sf-label-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.sf-login-remember {
display: flex;
align-items: center;
}
.sf-checkbox-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--sf-font-body);
font-size: 0.82rem;
font-weight: 600;
color: var(--sf-text-muted);
cursor: pointer;
user-select: none;
}
.sf-checkbox {
width: 16px;
height: 16px;
accent-color: var(--sf-primary);
cursor: pointer;
border-radius: 0px;
}
.sf-login-divider {
display: flex;
align-items: center;
text-align: center;
color: var(--sf-text-light);
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sf-login-divider::before, .sf-login-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid var(--sf-border);
}
.sf-login-divider:not(:empty)::before { margin-right: .75em; }
.sf-login-divider:not(:empty)::after { margin-left: .75em; }
.sf-login-signup {
text-align: center;
font-size: 0.85rem;
font-weight: 600;
color: var(--sf-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=Montserrat:wght@300;400;500;600;700;800&family=Tenor+Sans&display=swap');
/* ===========================
Storefront Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--sf-bg: #FAFAFA;
--sf-surface: #FFFFFF;
--sf-surface-2: #F8F9FA;
--sf-surface-dark: #0B132B;
/* Brand Palette */
--sf-primary: #0B132B;
--sf-primary-hover: #1C2541;
--sf-primary-muted: #E2E8F0;
--sf-accent: #C5A028;
--sf-accent-hover: #A4821A;
--sf-accent-muted: #FCF8E3;
--sf-success: #0F766E;
--sf-success-muted: #CCFBF1;
--sf-danger: #991B1B;
--sf-danger-muted: #FEE2E2;
--sf-gold: #C5A028;
--sf-gold-muted: #FCF8E3;
/* Text */
--sf-text: #0B132B;
--sf-text-muted: #475569;
--sf-text-light: #94A3B8;
/* Borders */
--sf-border: #E2E8F0;
--sf-border-strong: #CBD5E1;
/* Geometric Radius Shapes */
--sf-radius-sm: 0px;
--sf-radius: 0px;
--sf-radius-lg: 0px;
--sf-radius-pill: 0px;
/* Fonts */
--sf-font-heading: 'Tenor Sans', sans-serif;
--sf-font-body: 'Montserrat', sans-serif;
/* Shadows */
--sf-shadow-sm: 0 2px 10px rgba(11,19,43,0.01);
--sf-shadow: 0 8px 30px rgba(11,19,43,0.03);
--sf-shadow-lg: 0 20px 50px rgba(11,19,43,0.05);
/* Transition */
--sf-transition: all 0.2s ease;
}
body {
margin: 0;
font-family: var(--sf-font-body);
color: var(--sf-text);
background-color: var(--sf-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.sf-card {
background-color: var(--sf-surface);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius);
box-shadow: var(--sf-shadow-sm);
padding: 2rem;
transition: var(--sf-transition);
}
.sf-card:hover {
box-shadow: var(--sf-shadow);
border-color: var(--sf-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--sf-font-heading);
font-weight: 400;
margin: 0;
color: var(--sf-text);
line-height: 1.2;
letter-spacing: 0.05em;
text-transform: uppercase;
}
p { font-family: var(--sf-font-body); color: var(--sf-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.sf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.75rem;
font-family: var(--sf-font-body);
font-size: 0.8rem;
font-weight: 700;
border-radius: var(--sf-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--sf-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.sf-btn-primary { background-color: var(--sf-primary); color: #fff; border-color: var(--sf-primary); }
.sf-btn-primary:hover { background-color: var(--sf-primary-hover); border-color: var(--sf-primary-hover); }
.sf-btn-accent { background-color: var(--sf-accent); color: #sf-bg; border-color: var(--sf-accent); color: #fff; }
.sf-btn-accent:hover { background-color: var(--sf-accent-hover); border-color: var(--sf-accent-hover); }
.sf-btn-outline { background-color: transparent; color: var(--sf-text); border-color: var(--sf-text); }
.sf-btn-outline:hover { background-color: var(--sf-surface-2); }
.sf-btn-ghost { background-color: transparent; color: var(--sf-text-muted); border-color: transparent; }
.sf-btn-ghost:hover { background-color: var(--sf-surface-2); color: var(--sf-text); }
.sf-btn-sm { padding: 0.5rem 1.25rem; font-size: 0.7rem; }
.sf-btn-lg { padding: 1rem 2.25rem; font-size: 0.85rem; }
.sf-btn-block { width: 100%; }
.sf-btn-icon { width: 44px; height: 44px; padding: 0; }
/* ── Form Controls ────────────── */
.sf-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text);
background-color: var(--sf-surface);
outline: none;
transition: var(--sf-transition);
}
.sf-input::placeholder { color: var(--sf-text-light); }
.sf-input:focus { border-color: var(--sf-primary); background-color: #FAFAFA; }
.sf-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--sf-font-body);
font-weight: 700;
font-size: 0.75rem;
color: var(--sf-text);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sf-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text);
background-color: var(--sf-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='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--sf-transition);
}
.sf-select:focus { border-color: var(--sf-primary); }
/* ── Badges ───────────────────── */
.sf-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.65rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.1em;
border: 1px solid transparent;
}
.sf-badge-sale { background-color: var(--sf-accent-muted); color: var(--sf-accent); border-color: var(--sf-accent); }
.sf-badge-new { background-color: var(--sf-primary-muted); color: var(--sf-primary); border-color: var(--sf-primary); }
.sf-badge-success { background-color: var(--sf-success-muted); color: var(--sf-success); border-color: var(--sf-success); }
.sf-badge-danger { background-color: var(--sf-danger-muted); color: var(--sf-danger); border-color: var(--sf-danger); }
.sf-badge-default { background-color: var(--sf-surface-2); color: var(--sf-text-muted); border-color: var(--sf-border); }
/* ── Star Rating ──────────────── */
.sf-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--sf-accent);
font-size: 0.75rem;
}
.sf-stars-count {
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 600;
color: var(--sf-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.sf-price {
font-family: var(--sf-font-body);
font-size: 1.15rem;
font-weight: 700;
color: var(--sf-text);
}
.sf-price-original {
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text-light);
text-decoration: line-through;
}
.sf-price-sale { color: var(--sf-accent); }
/* ── Toggle Slider ────────────── */
.sf-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.sf-toggle input { opacity: 0; width: 0; height: 0; }
.sf-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--sf-border-strong); border-radius: 0px; transition: var(--sf-transition); }
.sf-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 0px; transition: var(--sf-transition); }
.sf-toggle input:checked + .sf-toggle-slider { background-color: var(--sf-accent); }
.sf-toggle input:checked + .sf-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.sf-divider { border: none; border-top: 1px solid var(--sf-border); margin: 0; }
/* ── Logo ─────────────────────── */
.sf-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--sf-font-heading);
font-size: 1.35rem;
color: var(--sf-text);
font-weight: 400;
letter-spacing: 0.1em;
}
.sf-logo-icon {
width: 32px;
height: 32px;
background-color: var(--sf-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 0.95rem;
font-weight: 700;
border-radius: 0px;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--sf-primary) !important; }
.text-accent { color: var(--sf-accent) !important; }
.text-success { color: var(--sf-success) !important; }
.text-danger { color: var(--sf-danger) !important; }
.text-muted { color: var(--sf-text-muted) !important; }
.text-light { color: var(--sf-text-light) !important; }
.sf-link-sm {
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 700;
color: var(--sf-primary);
text-decoration: none;
transition: var(--sf-transition);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sf-link-sm:hover {
color: var(--sf-primary-hover);
}
/* --- COMPONENT STYLES --- */
.sf-login-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 560px;
background-color: var(--sf-bg);
padding: 2rem;
}
.sf-login-card {
width: 100%;
max-width: 420px;
padding: 2.5rem !important;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.sf-login-brand {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.sf-login-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--sf-font-heading);
font-size: 1.15rem;
color: var(--sf-text);
}
.sf-login-title {
font-size: 1.65rem;
margin-top: 0.25rem;
}
.sf-login-sub {
font-size: 0.9rem;
color: var(--sf-text-muted);
}
.sf-login-form {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.sf-form-group {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.sf-label-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.sf-login-remember {
display: flex;
align-items: center;
}
.sf-checkbox-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--sf-font-body);
font-size: 0.82rem;
font-weight: 600;
color: var(--sf-text-muted);
cursor: pointer;
user-select: none;
}
.sf-checkbox {
width: 16px;
height: 16px;
accent-color: var(--sf-primary);
cursor: pointer;
border-radius: 0px;
}
.sf-login-divider {
display: flex;
align-items: center;
text-align: center;
color: var(--sf-text-light);
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sf-login-divider::before, .sf-login-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid var(--sf-border);
}
.sf-login-divider:not(:empty)::before { margin-right: .75em; }
.sf-login-divider:not(:empty)::after { margin-left: .75em; }
.sf-login-signup {
text-align: center;
font-size: 0.85rem;
font-weight: 600;
color: var(--sf-text-muted);
margin-top: 0.5rem;
}
Shipping & Billing
HTML
<div class="sf-settings-panel">
<div class="sf-settings-header">
<div>
<h3>Account Settings</h3>
<p>Modify your shipping coordinates and premium security options.</p>
</div>
<div class="sf-settings-acts">
<button class="sf-btn sf-btn-outline sf-btn-sm">Discard</button>
<button class="sf-btn sf-btn-primary sf-btn-sm">Save Preferences</button>
</div>
</div>
<div class="sf-settings-body">
<section class="sf-settings-sec sf-card">
<h4>Shipping Coordinates</h4>
<p>Where your high-value capsule orders will be dispatched.</p>
<hr class="sf-divider">
<div class="sf-settings-grid">
<div class="sf-form-group">
<label class="sf-label" for="shp-first">First Name</label>
<input type="text" id="shp-first" class="sf-input" value="Dominic">
</div>
<div class="sf-form-group">
<label class="sf-label" for="shp-last">Last Name</label>
<input type="text" id="shp-last" class="sf-input" value="Lowe">
</div>
<div class="sf-form-group" style="grid-column: span 2;">
<label class="sf-label" for="shp-addr">Street Address</label>
<input type="text" id="shp-addr" class="sf-input" value="18 Luxury Promenade Way, Suite 400">
</div>
<div class="sf-form-group">
<label class="sf-label" for="shp-city">City</label>
<input type="text" id="sf-city" class="sf-input" value="Beverly Hills">
</div>
<div class="sf-form-group">
<label class="sf-label" for="shp-zip">ZIP / Postal Code</label>
<input type="text" id="sf-zip" class="sf-input" value="90210">
</div>
</div>
<div class="sf-form-inline">
<label class="sf-checkbox-label">
<input type="checkbox" class="sf-checkbox" checked>
<span>Use as default shipping address</span>
</label>
</div>
</section>
<section class="sf-settings-sec sf-card">
<h4>Security & Encryption</h4>
<p>Configure automated security keys for high-value orders.</p>
<hr class="sf-divider">
<div class="sf-toggle-list">
<div class="sf-toggle-row">
<div>
<div class="sf-toggle-label">Insured Shipment Verification</div>
<div class="sf-toggle-desc">Require SMS authorization before precious metals are dispatched.</div>
</div>
<label class="sf-toggle"><input type="checkbox" checked><span class="sf-toggle-slider"></span></label>
</div>
<hr class="sf-divider">
<div class="sf-toggle-row">
<div>
<div class="sf-toggle-label">Anonymous Collection Status</div>
<div class="sf-toggle-desc">Keep your high-end collections hidden from public digital registries.</div>
</div>
<label class="sf-toggle"><input type="checkbox"><span class="sf-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. */
.sf-settings-panel {
max-width: 860px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.sf-settings-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.sf-settings-header h3 {
font-size: 1.35rem;
margin-bottom: 0.3rem;
}
.sf-settings-acts {
display: flex;
gap: 0.75rem;
flex-shrink: 0;
}
.sf-settings-body {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.sf-settings-sec {
padding: 2rem !important;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.sf-settings-sec h4 {
font-size: 1.15rem;
}
.sf-settings-sec > p {
font-size: 0.88rem;
margin-top: -0.75rem;
}
.sf-settings-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.sf-form-inline {
display: flex;
align-items: center;
margin-top: 0.5rem;
}
.sf-checkbox-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--sf-font-body);
font-size: 0.82rem;
font-weight: 600;
color: var(--sf-text-muted);
cursor: pointer;
}
.sf-checkbox {
width: 16px;
height: 16px;
accent-color: var(--sf-accent);
}
.sf-toggle-list {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.sf-toggle-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
}
.sf-toggle-label {
font-family: var(--sf-font-body);
font-size: 0.92rem;
font-weight: 700;
color: var(--sf-text);
margin-bottom: 0.2rem;
}
.sf-toggle-desc {
font-size: 0.83rem;
color: var(--sf-text-muted);
font-weight: 500;
line-height: 1.5;
}
@media (max-width: 600px) {
.sf-settings-grid { grid-template-columns: 1fr; }
.sf-settings-grid > div { grid-column: span 1 !important; }
.sf-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=Montserrat:wght@300;400;500;600;700;800&family=Tenor+Sans&display=swap');
/* ===========================
Storefront Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--sf-bg: #FAFAFA;
--sf-surface: #FFFFFF;
--sf-surface-2: #F8F9FA;
--sf-surface-dark: #0B132B;
/* Brand Palette */
--sf-primary: #0B132B;
--sf-primary-hover: #1C2541;
--sf-primary-muted: #E2E8F0;
--sf-accent: #C5A028;
--sf-accent-hover: #A4821A;
--sf-accent-muted: #FCF8E3;
--sf-success: #0F766E;
--sf-success-muted: #CCFBF1;
--sf-danger: #991B1B;
--sf-danger-muted: #FEE2E2;
--sf-gold: #C5A028;
--sf-gold-muted: #FCF8E3;
/* Text */
--sf-text: #0B132B;
--sf-text-muted: #475569;
--sf-text-light: #94A3B8;
/* Borders */
--sf-border: #E2E8F0;
--sf-border-strong: #CBD5E1;
/* Geometric Radius Shapes */
--sf-radius-sm: 0px;
--sf-radius: 0px;
--sf-radius-lg: 0px;
--sf-radius-pill: 0px;
/* Fonts */
--sf-font-heading: 'Tenor Sans', sans-serif;
--sf-font-body: 'Montserrat', sans-serif;
/* Shadows */
--sf-shadow-sm: 0 2px 10px rgba(11,19,43,0.01);
--sf-shadow: 0 8px 30px rgba(11,19,43,0.03);
--sf-shadow-lg: 0 20px 50px rgba(11,19,43,0.05);
/* Transition */
--sf-transition: all 0.2s ease;
}
body {
margin: 0;
font-family: var(--sf-font-body);
color: var(--sf-text);
background-color: var(--sf-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.sf-card {
background-color: var(--sf-surface);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius);
box-shadow: var(--sf-shadow-sm);
padding: 2rem;
transition: var(--sf-transition);
}
.sf-card:hover {
box-shadow: var(--sf-shadow);
border-color: var(--sf-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--sf-font-heading);
font-weight: 400;
margin: 0;
color: var(--sf-text);
line-height: 1.2;
letter-spacing: 0.05em;
text-transform: uppercase;
}
p { font-family: var(--sf-font-body); color: var(--sf-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.sf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.75rem;
font-family: var(--sf-font-body);
font-size: 0.8rem;
font-weight: 700;
border-radius: var(--sf-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--sf-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.sf-btn-primary { background-color: var(--sf-primary); color: #fff; border-color: var(--sf-primary); }
.sf-btn-primary:hover { background-color: var(--sf-primary-hover); border-color: var(--sf-primary-hover); }
.sf-btn-accent { background-color: var(--sf-accent); color: #sf-bg; border-color: var(--sf-accent); color: #fff; }
.sf-btn-accent:hover { background-color: var(--sf-accent-hover); border-color: var(--sf-accent-hover); }
.sf-btn-outline { background-color: transparent; color: var(--sf-text); border-color: var(--sf-text); }
.sf-btn-outline:hover { background-color: var(--sf-surface-2); }
.sf-btn-ghost { background-color: transparent; color: var(--sf-text-muted); border-color: transparent; }
.sf-btn-ghost:hover { background-color: var(--sf-surface-2); color: var(--sf-text); }
.sf-btn-sm { padding: 0.5rem 1.25rem; font-size: 0.7rem; }
.sf-btn-lg { padding: 1rem 2.25rem; font-size: 0.85rem; }
.sf-btn-block { width: 100%; }
.sf-btn-icon { width: 44px; height: 44px; padding: 0; }
/* ── Form Controls ────────────── */
.sf-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text);
background-color: var(--sf-surface);
outline: none;
transition: var(--sf-transition);
}
.sf-input::placeholder { color: var(--sf-text-light); }
.sf-input:focus { border-color: var(--sf-primary); background-color: #FAFAFA; }
.sf-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--sf-font-body);
font-weight: 700;
font-size: 0.75rem;
color: var(--sf-text);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sf-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text);
background-color: var(--sf-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='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--sf-transition);
}
.sf-select:focus { border-color: var(--sf-primary); }
/* ── Badges ───────────────────── */
.sf-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.65rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.1em;
border: 1px solid transparent;
}
.sf-badge-sale { background-color: var(--sf-accent-muted); color: var(--sf-accent); border-color: var(--sf-accent); }
.sf-badge-new { background-color: var(--sf-primary-muted); color: var(--sf-primary); border-color: var(--sf-primary); }
.sf-badge-success { background-color: var(--sf-success-muted); color: var(--sf-success); border-color: var(--sf-success); }
.sf-badge-danger { background-color: var(--sf-danger-muted); color: var(--sf-danger); border-color: var(--sf-danger); }
.sf-badge-default { background-color: var(--sf-surface-2); color: var(--sf-text-muted); border-color: var(--sf-border); }
/* ── Star Rating ──────────────── */
.sf-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--sf-accent);
font-size: 0.75rem;
}
.sf-stars-count {
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 600;
color: var(--sf-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.sf-price {
font-family: var(--sf-font-body);
font-size: 1.15rem;
font-weight: 700;
color: var(--sf-text);
}
.sf-price-original {
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text-light);
text-decoration: line-through;
}
.sf-price-sale { color: var(--sf-accent); }
/* ── Toggle Slider ────────────── */
.sf-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.sf-toggle input { opacity: 0; width: 0; height: 0; }
.sf-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--sf-border-strong); border-radius: 0px; transition: var(--sf-transition); }
.sf-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 0px; transition: var(--sf-transition); }
.sf-toggle input:checked + .sf-toggle-slider { background-color: var(--sf-accent); }
.sf-toggle input:checked + .sf-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.sf-divider { border: none; border-top: 1px solid var(--sf-border); margin: 0; }
/* ── Logo ─────────────────────── */
.sf-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--sf-font-heading);
font-size: 1.35rem;
color: var(--sf-text);
font-weight: 400;
letter-spacing: 0.1em;
}
.sf-logo-icon {
width: 32px;
height: 32px;
background-color: var(--sf-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 0.95rem;
font-weight: 700;
border-radius: 0px;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--sf-primary) !important; }
.text-accent { color: var(--sf-accent) !important; }
.text-success { color: var(--sf-success) !important; }
.text-danger { color: var(--sf-danger) !important; }
.text-muted { color: var(--sf-text-muted) !important; }
.text-light { color: var(--sf-text-light) !important; }
.sf-link-sm {
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 700;
color: var(--sf-primary);
text-decoration: none;
transition: var(--sf-transition);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sf-link-sm:hover {
color: var(--sf-primary-hover);
}
/* --- COMPONENT STYLES --- */
.sf-settings-panel {
max-width: 860px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.sf-settings-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.sf-settings-header h3 {
font-size: 1.35rem;
margin-bottom: 0.3rem;
}
.sf-settings-acts {
display: flex;
gap: 0.75rem;
flex-shrink: 0;
}
.sf-settings-body {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.sf-settings-sec {
padding: 2rem !important;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.sf-settings-sec h4 {
font-size: 1.15rem;
}
.sf-settings-sec > p {
font-size: 0.88rem;
margin-top: -0.75rem;
}
.sf-settings-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.sf-form-inline {
display: flex;
align-items: center;
margin-top: 0.5rem;
}
.sf-checkbox-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--sf-font-body);
font-size: 0.82rem;
font-weight: 600;
color: var(--sf-text-muted);
cursor: pointer;
}
.sf-checkbox {
width: 16px;
height: 16px;
accent-color: var(--sf-accent);
}
.sf-toggle-list {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.sf-toggle-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
}
.sf-toggle-label {
font-family: var(--sf-font-body);
font-size: 0.92rem;
font-weight: 700;
color: var(--sf-text);
margin-bottom: 0.2rem;
}
.sf-toggle-desc {
font-size: 0.83rem;
color: var(--sf-text-muted);
font-weight: 500;
line-height: 1.5;
}
@media (max-width: 600px) {
.sf-settings-grid { grid-template-columns: 1fr; }
.sf-settings-grid > div { grid-column: span 1 !important; }
.sf-settings-header { flex-direction: column; }
}
Cards
Product Cards
HTML
<div class="sf-product-grid">
<!-- Product 1 -->
<div class="sf-product-card sf-card">
<div class="sf-product-media">
<span class="sf-badge sf-badge-sale sf-product-badge">SALE −20%</span>
<div class="sf-product-placeholder">📐</div>
<div class="sf-product-hover-actions">
<button class="sf-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="sf-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="sf-product-details">
<span class="sf-product-cat text-muted">Maison</span>
<h4 class="sf-product-title">Oculus Brass LIGHT Object</h4>
<div class="sf-stars">
⭐⭐⭐⭐⭐
<span class="sf-stars-count">(48)</span>
</div>
<div class="sf-product-price-row">
<div class="sf-price-box">
<span class="sf-price sf-price-sale">$245.00</span>
<span class="sf-price-original">$320.00</span>
</div>
<button class="sf-btn sf-btn-primary sf-btn-sm sf-btn-icon" title="Add to Bag">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
</button>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="sf-product-card sf-card sf-product-soldout">
<div class="sf-product-media">
<span class="sf-badge sf-badge-default sf-product-badge">Out of Stock</span>
<div class="sf-product-placeholder">💍</div>
</div>
<div class="sf-product-details">
<span class="sf-product-cat text-muted">Joaillerie</span>
<h4 class="sf-product-title">Infinity Gold Dome Ring</h4>
<div class="sf-stars">
⭐⭐⭐⭐☆
<span class="sf-stars-count">(19)</span>
</div>
<div class="sf-product-price-row">
<div class="sf-price-box">
<span class="sf-price">$450.00</span>
</div>
<button class="sf-btn sf-btn-outline sf-btn-sm" disabled style="cursor:not-allowed;">Sold Out</button>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="sf-product-card sf-card">
<div class="sf-product-media">
<span class="sf-badge sf-badge-new sf-product-badge">New Edition</span>
<div class="sf-product-placeholder">💎</div>
<div class="sf-product-hover-actions">
<button class="sf-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="sf-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="sf-product-details">
<span class="sf-product-cat text-muted">Joaillerie</span>
<h4 class="sf-product-title">Elysian Solitaire Diamond Ring</h4>
<div class="sf-stars">
⭐⭐⭐⭐⭐
<span class="sf-stars-count">(31)</span>
</div>
<div class="sf-product-price-row">
<div class="sf-price-box">
<span class="sf-price">$1,850.00</span>
</div>
<button class="sf-btn sf-btn-primary sf-btn-sm sf-btn-icon" title="Add to Bag">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
</button>
</div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Product Cards */
/* NOTE: This component requires base.css to be included in your page. */
.sf-product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1100px;
margin: 0 auto;
}
.sf-product-card {
padding: 0 !important;
overflow: hidden;
display: flex;
flex-direction: column;
}
.sf-product-media {
height: 240px;
background-color: var(--sf-surface-2);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.sf-product-placeholder {
font-size: 5.5rem;
filter: drop-shadow(0 8px 16px rgba(11,19,43,0.04));
transition: var(--sf-transition);
}
.sf-product-card:hover .sf-product-placeholder {
transform: scale(1.06) rotate(2deg);
}
.sf-product-badge {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 2;
}
.sf-product-hover-actions {
position: absolute;
inset: 0;
background-color: rgba(11,19,43,0.25);
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
opacity: 0;
pointer-events: none;
transition: var(--sf-transition);
}
.sf-product-card:hover .sf-product-hover-actions {
opacity: 1;
pointer-events: auto;
}
.sf-product-action-btn {
width: 42px;
height: 42px;
border: 1px solid var(--sf-border);
background-color: var(--sf-surface);
color: var(--sf-text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--sf-transition);
box-shadow: var(--sf-shadow-sm);
border-radius: var(--sf-radius-sm);
}
.sf-product-action-btn:hover {
background-color: var(--sf-accent);
color: #fff;
transform: translateY(-2px) rotate(4deg);
border-color: var(--sf-accent);
}
.sf-product-details {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
flex: 1;
}
.sf-product-cat {
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sf-product-title {
font-size: 1.15rem;
color: var(--sf-text);
line-height: 1.35;
height: 2.7em;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.sf-product-price-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.5rem;
border-top: 1px solid var(--sf-border);
padding-top: 1rem;
}
.sf-price-box {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
/* Soldout State */
.sf-product-soldout .sf-product-placeholder {
opacity: 0.4;
}
.sf-product-soldout .sf-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=Montserrat:wght@300;400;500;600;700;800&family=Tenor+Sans&display=swap');
/* ===========================
Storefront Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--sf-bg: #FAFAFA;
--sf-surface: #FFFFFF;
--sf-surface-2: #F8F9FA;
--sf-surface-dark: #0B132B;
/* Brand Palette */
--sf-primary: #0B132B;
--sf-primary-hover: #1C2541;
--sf-primary-muted: #E2E8F0;
--sf-accent: #C5A028;
--sf-accent-hover: #A4821A;
--sf-accent-muted: #FCF8E3;
--sf-success: #0F766E;
--sf-success-muted: #CCFBF1;
--sf-danger: #991B1B;
--sf-danger-muted: #FEE2E2;
--sf-gold: #C5A028;
--sf-gold-muted: #FCF8E3;
/* Text */
--sf-text: #0B132B;
--sf-text-muted: #475569;
--sf-text-light: #94A3B8;
/* Borders */
--sf-border: #E2E8F0;
--sf-border-strong: #CBD5E1;
/* Geometric Radius Shapes */
--sf-radius-sm: 0px;
--sf-radius: 0px;
--sf-radius-lg: 0px;
--sf-radius-pill: 0px;
/* Fonts */
--sf-font-heading: 'Tenor Sans', sans-serif;
--sf-font-body: 'Montserrat', sans-serif;
/* Shadows */
--sf-shadow-sm: 0 2px 10px rgba(11,19,43,0.01);
--sf-shadow: 0 8px 30px rgba(11,19,43,0.03);
--sf-shadow-lg: 0 20px 50px rgba(11,19,43,0.05);
/* Transition */
--sf-transition: all 0.2s ease;
}
body {
margin: 0;
font-family: var(--sf-font-body);
color: var(--sf-text);
background-color: var(--sf-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.sf-card {
background-color: var(--sf-surface);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius);
box-shadow: var(--sf-shadow-sm);
padding: 2rem;
transition: var(--sf-transition);
}
.sf-card:hover {
box-shadow: var(--sf-shadow);
border-color: var(--sf-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--sf-font-heading);
font-weight: 400;
margin: 0;
color: var(--sf-text);
line-height: 1.2;
letter-spacing: 0.05em;
text-transform: uppercase;
}
p { font-family: var(--sf-font-body); color: var(--sf-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.sf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.75rem;
font-family: var(--sf-font-body);
font-size: 0.8rem;
font-weight: 700;
border-radius: var(--sf-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--sf-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.sf-btn-primary { background-color: var(--sf-primary); color: #fff; border-color: var(--sf-primary); }
.sf-btn-primary:hover { background-color: var(--sf-primary-hover); border-color: var(--sf-primary-hover); }
.sf-btn-accent { background-color: var(--sf-accent); color: #sf-bg; border-color: var(--sf-accent); color: #fff; }
.sf-btn-accent:hover { background-color: var(--sf-accent-hover); border-color: var(--sf-accent-hover); }
.sf-btn-outline { background-color: transparent; color: var(--sf-text); border-color: var(--sf-text); }
.sf-btn-outline:hover { background-color: var(--sf-surface-2); }
.sf-btn-ghost { background-color: transparent; color: var(--sf-text-muted); border-color: transparent; }
.sf-btn-ghost:hover { background-color: var(--sf-surface-2); color: var(--sf-text); }
.sf-btn-sm { padding: 0.5rem 1.25rem; font-size: 0.7rem; }
.sf-btn-lg { padding: 1rem 2.25rem; font-size: 0.85rem; }
.sf-btn-block { width: 100%; }
.sf-btn-icon { width: 44px; height: 44px; padding: 0; }
/* ── Form Controls ────────────── */
.sf-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text);
background-color: var(--sf-surface);
outline: none;
transition: var(--sf-transition);
}
.sf-input::placeholder { color: var(--sf-text-light); }
.sf-input:focus { border-color: var(--sf-primary); background-color: #FAFAFA; }
.sf-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--sf-font-body);
font-weight: 700;
font-size: 0.75rem;
color: var(--sf-text);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sf-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text);
background-color: var(--sf-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='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--sf-transition);
}
.sf-select:focus { border-color: var(--sf-primary); }
/* ── Badges ───────────────────── */
.sf-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.65rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.1em;
border: 1px solid transparent;
}
.sf-badge-sale { background-color: var(--sf-accent-muted); color: var(--sf-accent); border-color: var(--sf-accent); }
.sf-badge-new { background-color: var(--sf-primary-muted); color: var(--sf-primary); border-color: var(--sf-primary); }
.sf-badge-success { background-color: var(--sf-success-muted); color: var(--sf-success); border-color: var(--sf-success); }
.sf-badge-danger { background-color: var(--sf-danger-muted); color: var(--sf-danger); border-color: var(--sf-danger); }
.sf-badge-default { background-color: var(--sf-surface-2); color: var(--sf-text-muted); border-color: var(--sf-border); }
/* ── Star Rating ──────────────── */
.sf-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--sf-accent);
font-size: 0.75rem;
}
.sf-stars-count {
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 600;
color: var(--sf-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.sf-price {
font-family: var(--sf-font-body);
font-size: 1.15rem;
font-weight: 700;
color: var(--sf-text);
}
.sf-price-original {
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text-light);
text-decoration: line-through;
}
.sf-price-sale { color: var(--sf-accent); }
/* ── Toggle Slider ────────────── */
.sf-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.sf-toggle input { opacity: 0; width: 0; height: 0; }
.sf-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--sf-border-strong); border-radius: 0px; transition: var(--sf-transition); }
.sf-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 0px; transition: var(--sf-transition); }
.sf-toggle input:checked + .sf-toggle-slider { background-color: var(--sf-accent); }
.sf-toggle input:checked + .sf-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.sf-divider { border: none; border-top: 1px solid var(--sf-border); margin: 0; }
/* ── Logo ─────────────────────── */
.sf-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--sf-font-heading);
font-size: 1.35rem;
color: var(--sf-text);
font-weight: 400;
letter-spacing: 0.1em;
}
.sf-logo-icon {
width: 32px;
height: 32px;
background-color: var(--sf-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 0.95rem;
font-weight: 700;
border-radius: 0px;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--sf-primary) !important; }
.text-accent { color: var(--sf-accent) !important; }
.text-success { color: var(--sf-success) !important; }
.text-danger { color: var(--sf-danger) !important; }
.text-muted { color: var(--sf-text-muted) !important; }
.text-light { color: var(--sf-text-light) !important; }
.sf-link-sm {
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 700;
color: var(--sf-primary);
text-decoration: none;
transition: var(--sf-transition);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sf-link-sm:hover {
color: var(--sf-primary-hover);
}
/* --- COMPONENT STYLES --- */
.sf-product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1100px;
margin: 0 auto;
}
.sf-product-card {
padding: 0 !important;
overflow: hidden;
display: flex;
flex-direction: column;
}
.sf-product-media {
height: 240px;
background-color: var(--sf-surface-2);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.sf-product-placeholder {
font-size: 5.5rem;
filter: drop-shadow(0 8px 16px rgba(11,19,43,0.04));
transition: var(--sf-transition);
}
.sf-product-card:hover .sf-product-placeholder {
transform: scale(1.06) rotate(2deg);
}
.sf-product-badge {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 2;
}
.sf-product-hover-actions {
position: absolute;
inset: 0;
background-color: rgba(11,19,43,0.25);
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
opacity: 0;
pointer-events: none;
transition: var(--sf-transition);
}
.sf-product-card:hover .sf-product-hover-actions {
opacity: 1;
pointer-events: auto;
}
.sf-product-action-btn {
width: 42px;
height: 42px;
border: 1px solid var(--sf-border);
background-color: var(--sf-surface);
color: var(--sf-text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--sf-transition);
box-shadow: var(--sf-shadow-sm);
border-radius: var(--sf-radius-sm);
}
.sf-product-action-btn:hover {
background-color: var(--sf-accent);
color: #fff;
transform: translateY(-2px) rotate(4deg);
border-color: var(--sf-accent);
}
.sf-product-details {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
flex: 1;
}
.sf-product-cat {
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sf-product-title {
font-size: 1.15rem;
color: var(--sf-text);
line-height: 1.35;
height: 2.7em;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.sf-product-price-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.5rem;
border-top: 1px solid var(--sf-border);
padding-top: 1rem;
}
.sf-price-box {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
/* Soldout State */
.sf-product-soldout .sf-product-placeholder {
opacity: 0.4;
}
.sf-product-soldout .sf-product-details {
opacity: 0.75;
}
Store Metrics
HTML
<div class="sf-stats-grid">
<!-- Stat 1 -->
<div class="sf-stat-card sf-card">
<div class="sf-stat-head">
<div class="sf-stat-ico" style="background:var(--sf-primary-muted); color:var(--sf-primary);">
💎
</div>
<span class="sf-badge sf-badge-success">▲ 24.8%</span>
</div>
<div class="sf-stat-val">$84,920</div>
<div class="sf-stat-lbl">Capsule Sales</div>
<div class="sf-stat-bar-wrap">
<div class="sf-stat-bar" style="width:85%; background:var(--sf-primary);"></div>
</div>
</div>
<!-- Stat 2 -->
<div class="sf-stat-card sf-card">
<div class="sf-stat-head">
<div class="sf-stat-ico" style="background:var(--sf-success-muted); color:var(--sf-success);">
✓
</div>
<span class="sf-badge sf-badge-success">▲ 1.4%</span>
</div>
<div class="sf-stat-val">99.1%</div>
<div class="sf-stat-lbl">Archival Delivery Aura</div>
<div class="sf-stat-bar-wrap">
<div class="sf-stat-bar" style="width:99.1%; background:var(--sf-accent);"></div>
</div>
</div>
<!-- Stat 3 -->
<div class="sf-stat-card sf-card">
<div class="sf-stat-head">
<div class="sf-stat-ico" style="background:var(--sf-accent-muted); color:var(--sf-accent);">
📦
</div>
<span class="sf-badge sf-badge-default">Insured</span>
</div>
<div class="sf-stat-val">$482.00</div>
<div class="sf-stat-lbl">Average Archival Basket</div>
<div class="sf-stat-bar-wrap">
<div class="sf-stat-bar" style="width:68%; background:var(--sf-accent);"></div>
</div>
</div>
<!-- Stat 4 -->
<div class="sf-stat-card sf-card">
<div class="sf-stat-head">
<div class="sf-stat-ico" style="background:var(--sf-danger-muted); color:var(--sf-danger);">
⚠️
</div>
<span class="sf-badge sf-badge-danger">▼ 0.4%</span>
</div>
<div class="sf-stat-val">2</div>
<div class="sf-stat-lbl">Transit Anomalies</div>
<div class="sf-stat-bar-wrap">
<div class="sf-stat-bar" style="width:8%; background:var(--sf-danger);"></div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Store Metrics */
/* NOTE: This component requires base.css to be included in your page. */
.sf-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
max-width: 1100px;
margin: 0 auto;
}
.sf-stat-card {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 1.5rem !important;
}
.sf-stat-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.15rem;
}
.sf-stat-ico {
width: 36px;
height: 36px;
border-radius: var(--sf-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.1rem;
}
.sf-stat-val {
font-family: var(--sf-font-body);
font-size: 2rem;
font-weight: 700;
color: var(--sf-text);
letter-spacing: -0.02em;
line-height: 1;
}
.sf-stat-lbl {
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--sf-text-light);
}
.sf-stat-bar-wrap {
height: 4px;
background-color: var(--sf-border);
border-radius: 0px;
overflow: hidden;
margin-top: 0.5rem;
}
.sf-stat-bar {
height: 100%;
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=Montserrat:wght@300;400;500;600;700;800&family=Tenor+Sans&display=swap');
/* ===========================
Storefront Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--sf-bg: #FAFAFA;
--sf-surface: #FFFFFF;
--sf-surface-2: #F8F9FA;
--sf-surface-dark: #0B132B;
/* Brand Palette */
--sf-primary: #0B132B;
--sf-primary-hover: #1C2541;
--sf-primary-muted: #E2E8F0;
--sf-accent: #C5A028;
--sf-accent-hover: #A4821A;
--sf-accent-muted: #FCF8E3;
--sf-success: #0F766E;
--sf-success-muted: #CCFBF1;
--sf-danger: #991B1B;
--sf-danger-muted: #FEE2E2;
--sf-gold: #C5A028;
--sf-gold-muted: #FCF8E3;
/* Text */
--sf-text: #0B132B;
--sf-text-muted: #475569;
--sf-text-light: #94A3B8;
/* Borders */
--sf-border: #E2E8F0;
--sf-border-strong: #CBD5E1;
/* Geometric Radius Shapes */
--sf-radius-sm: 0px;
--sf-radius: 0px;
--sf-radius-lg: 0px;
--sf-radius-pill: 0px;
/* Fonts */
--sf-font-heading: 'Tenor Sans', sans-serif;
--sf-font-body: 'Montserrat', sans-serif;
/* Shadows */
--sf-shadow-sm: 0 2px 10px rgba(11,19,43,0.01);
--sf-shadow: 0 8px 30px rgba(11,19,43,0.03);
--sf-shadow-lg: 0 20px 50px rgba(11,19,43,0.05);
/* Transition */
--sf-transition: all 0.2s ease;
}
body {
margin: 0;
font-family: var(--sf-font-body);
color: var(--sf-text);
background-color: var(--sf-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.sf-card {
background-color: var(--sf-surface);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius);
box-shadow: var(--sf-shadow-sm);
padding: 2rem;
transition: var(--sf-transition);
}
.sf-card:hover {
box-shadow: var(--sf-shadow);
border-color: var(--sf-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--sf-font-heading);
font-weight: 400;
margin: 0;
color: var(--sf-text);
line-height: 1.2;
letter-spacing: 0.05em;
text-transform: uppercase;
}
p { font-family: var(--sf-font-body); color: var(--sf-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.sf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.75rem;
font-family: var(--sf-font-body);
font-size: 0.8rem;
font-weight: 700;
border-radius: var(--sf-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--sf-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.sf-btn-primary { background-color: var(--sf-primary); color: #fff; border-color: var(--sf-primary); }
.sf-btn-primary:hover { background-color: var(--sf-primary-hover); border-color: var(--sf-primary-hover); }
.sf-btn-accent { background-color: var(--sf-accent); color: #sf-bg; border-color: var(--sf-accent); color: #fff; }
.sf-btn-accent:hover { background-color: var(--sf-accent-hover); border-color: var(--sf-accent-hover); }
.sf-btn-outline { background-color: transparent; color: var(--sf-text); border-color: var(--sf-text); }
.sf-btn-outline:hover { background-color: var(--sf-surface-2); }
.sf-btn-ghost { background-color: transparent; color: var(--sf-text-muted); border-color: transparent; }
.sf-btn-ghost:hover { background-color: var(--sf-surface-2); color: var(--sf-text); }
.sf-btn-sm { padding: 0.5rem 1.25rem; font-size: 0.7rem; }
.sf-btn-lg { padding: 1rem 2.25rem; font-size: 0.85rem; }
.sf-btn-block { width: 100%; }
.sf-btn-icon { width: 44px; height: 44px; padding: 0; }
/* ── Form Controls ────────────── */
.sf-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text);
background-color: var(--sf-surface);
outline: none;
transition: var(--sf-transition);
}
.sf-input::placeholder { color: var(--sf-text-light); }
.sf-input:focus { border-color: var(--sf-primary); background-color: #FAFAFA; }
.sf-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--sf-font-body);
font-weight: 700;
font-size: 0.75rem;
color: var(--sf-text);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sf-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text);
background-color: var(--sf-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='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--sf-transition);
}
.sf-select:focus { border-color: var(--sf-primary); }
/* ── Badges ───────────────────── */
.sf-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.65rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.1em;
border: 1px solid transparent;
}
.sf-badge-sale { background-color: var(--sf-accent-muted); color: var(--sf-accent); border-color: var(--sf-accent); }
.sf-badge-new { background-color: var(--sf-primary-muted); color: var(--sf-primary); border-color: var(--sf-primary); }
.sf-badge-success { background-color: var(--sf-success-muted); color: var(--sf-success); border-color: var(--sf-success); }
.sf-badge-danger { background-color: var(--sf-danger-muted); color: var(--sf-danger); border-color: var(--sf-danger); }
.sf-badge-default { background-color: var(--sf-surface-2); color: var(--sf-text-muted); border-color: var(--sf-border); }
/* ── Star Rating ──────────────── */
.sf-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--sf-accent);
font-size: 0.75rem;
}
.sf-stars-count {
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 600;
color: var(--sf-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.sf-price {
font-family: var(--sf-font-body);
font-size: 1.15rem;
font-weight: 700;
color: var(--sf-text);
}
.sf-price-original {
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text-light);
text-decoration: line-through;
}
.sf-price-sale { color: var(--sf-accent); }
/* ── Toggle Slider ────────────── */
.sf-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.sf-toggle input { opacity: 0; width: 0; height: 0; }
.sf-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--sf-border-strong); border-radius: 0px; transition: var(--sf-transition); }
.sf-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 0px; transition: var(--sf-transition); }
.sf-toggle input:checked + .sf-toggle-slider { background-color: var(--sf-accent); }
.sf-toggle input:checked + .sf-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.sf-divider { border: none; border-top: 1px solid var(--sf-border); margin: 0; }
/* ── Logo ─────────────────────── */
.sf-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--sf-font-heading);
font-size: 1.35rem;
color: var(--sf-text);
font-weight: 400;
letter-spacing: 0.1em;
}
.sf-logo-icon {
width: 32px;
height: 32px;
background-color: var(--sf-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 0.95rem;
font-weight: 700;
border-radius: 0px;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--sf-primary) !important; }
.text-accent { color: var(--sf-accent) !important; }
.text-success { color: var(--sf-success) !important; }
.text-danger { color: var(--sf-danger) !important; }
.text-muted { color: var(--sf-text-muted) !important; }
.text-light { color: var(--sf-text-light) !important; }
.sf-link-sm {
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 700;
color: var(--sf-primary);
text-decoration: none;
transition: var(--sf-transition);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sf-link-sm:hover {
color: var(--sf-primary-hover);
}
/* --- COMPONENT STYLES --- */
.sf-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
max-width: 1100px;
margin: 0 auto;
}
.sf-stat-card {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 1.5rem !important;
}
.sf-stat-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.15rem;
}
.sf-stat-ico {
width: 36px;
height: 36px;
border-radius: var(--sf-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.1rem;
}
.sf-stat-val {
font-family: var(--sf-font-body);
font-size: 2rem;
font-weight: 700;
color: var(--sf-text);
letter-spacing: -0.02em;
line-height: 1;
}
.sf-stat-lbl {
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--sf-text-light);
}
.sf-stat-bar-wrap {
height: 4px;
background-color: var(--sf-border);
border-radius: 0px;
overflow: hidden;
margin-top: 0.5rem;
}
.sf-stat-bar {
height: 100%;
transition: width 0.6s ease;
}
Tables
Order History Table
HTML
<div class="sf-table-wrap sf-card">
<div class="sf-table-toolbar">
<div class="sf-table-toolbar-left">
<h4>Collector History</h4>
<span class="sf-badge sf-badge-default">8 Orders Authenticated</span>
</div>
<div class="sf-table-toolbar-right">
<div class="sf-search-wrap">
<svg class="sf-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="sf-input sf-search-input" placeholder="Find order…">
</div>
<select class="sf-select" style="width:auto;">
<option>All Dispatches</option>
<option>Dispatched</option>
<option>Processing</option>
<option>Authenticated</option>
</select>
</div>
</div>
<div class="sf-table-scroll">
<table class="sf-data-table">
<thead>
<tr>
<th>Order ID</th>
<th>Date Registered</th>
<th>Product Details</th>
<th>Qty</th>
<th>Total Value</th>
<th>Allocation</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sf-td-mono" style="font-weight:700;">#SF-4820</td>
<td class="sf-td-mono text-muted">18 May 2026</td>
<td>
<div class="sf-prod-cell">
<span class="sf-prod-thumb">📐</span>
<div>
<span class="sf-prod-name">Oculus Brass LIGHT Object</span>
<span class="sf-prod-meta text-muted">Capsule: Modern Maison</span>
</div>
</div>
</td>
<td class="sf-td-mono">1</td>
<td class="sf-td-mono" style="font-weight:800;">$245.00</td>
<td><span class="sf-badge sf-badge-success">Dispatched</span></td>
<td>
<button class="sf-btn sf-btn-outline sf-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="sf-td-mono" style="font-weight:700;">#SF-4819</td>
<td class="sf-td-mono text-muted">15 May 2026</td>
<td>
<div class="sf-prod-cell">
<span class="sf-prod-thumb">💎</span>
<div>
<span class="sf-prod-name">Elysian Solitaire Diamond Ring</span>
<span class="sf-prod-meta text-muted">Capsule: Haute Joaillerie</span>
</div>
</div>
</td>
<td class="sf-td-mono">1</td>
<td class="sf-td-mono" style="font-weight:800;">$1,850.00</td>
<td><span class="sf-badge sf-badge-sale">Processing</span></td>
<td>
<button class="sf-btn sf-btn-outline sf-btn-sm">Track Courier</button>
</td>
</tr>
<tr>
<td class="sf-td-mono" style="font-weight:700;">#SF-4808</td>
<td class="sf-td-mono text-muted">12 May 2026</td>
<td>
<div class="sf-prod-cell">
<span class="sf-prod-thumb">💍</span>
<div>
<span class="sf-prod-name">Infinity Gold Dome Ring</span>
<span class="sf-prod-meta text-muted">Capsule: Haute Joaillerie</span>
</div>
</div>
</td>
<td class="sf-td-mono">2</td>
<td class="sf-td-mono" style="font-weight:800;">$900.00</td>
<td><span class="sf-badge sf-badge-default">Authenticated</span></td>
<td>
<button class="sf-btn sf-btn-ghost sf-btn-sm text-danger">Revoke</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="sf-table-pagination">
<span class="text-muted" style="font-size:0.85rem;">Showing 1–3 of 8 coordinates</span>
<div class="sf-pagination-btns">
<button class="sf-btn sf-btn-outline sf-btn-sm" disabled style="opacity:.45;">← Prev</button>
<button class="sf-btn sf-btn-primary sf-btn-sm">1</button>
<button class="sf-btn sf-btn-outline sf-btn-sm">2</button>
<button class="sf-btn sf-btn-outline sf-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. */
.sf-table-wrap {
max-width: 1000px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
}
.sf-table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--sf-border);
flex-wrap: wrap;
}
.sf-table-toolbar-left {
display: flex;
align-items: center;
gap: 0.75rem;
}
.sf-table-toolbar-left h4 {
font-size: 1.15rem;
}
.sf-table-toolbar-right {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.sf-search-wrap {
position: relative;
}
.sf-search-ico {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--sf-text-light);
pointer-events: none;
}
.sf-search-input {
padding-left: 2.25rem;
width: 190px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.sf-table-scroll {
overflow-x: auto;
}
.sf-data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.sf-data-table thead tr {
background-color: var(--sf-surface-2);
border-bottom: 1px solid var(--sf-border);
}
.sf-data-table th {
padding: 0.75rem 1rem;
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--sf-text-light);
text-align: left;
white-space: nowrap;
}
.sf-data-table td {
padding: 1rem;
border-bottom: 1px solid var(--sf-border);
color: var(--sf-text);
font-weight: 600;
vertical-align: middle;
}
.sf-data-table tbody tr:last-child td {
border-bottom: none;
}
.sf-data-table tbody tr:hover td {
background-color: var(--sf-surface-2);
}
.sf-td-mono {
font-family: var(--sf-font-body);
font-size: 0.85rem;
}
.sf-prod-cell {
display: flex;
align-items: center;
gap: 0.75rem;
}
.sf-prod-thumb {
width: 38px;
height: 38px;
background-color: var(--sf-surface-2);
border-radius: var(--sf-radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.sf-prod-name {
display: block;
font-family: var(--sf-font-body);
font-weight: 700;
color: var(--sf-text);
}
.sf-prod-meta {
font-size: 0.75rem;
font-weight: 500;
}
.sf-table-pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border-top: 1px solid var(--sf-border);
gap: 1rem;
flex-wrap: wrap;
}
.sf-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=Montserrat:wght@300;400;500;600;700;800&family=Tenor+Sans&display=swap');
/* ===========================
Storefront Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--sf-bg: #FAFAFA;
--sf-surface: #FFFFFF;
--sf-surface-2: #F8F9FA;
--sf-surface-dark: #0B132B;
/* Brand Palette */
--sf-primary: #0B132B;
--sf-primary-hover: #1C2541;
--sf-primary-muted: #E2E8F0;
--sf-accent: #C5A028;
--sf-accent-hover: #A4821A;
--sf-accent-muted: #FCF8E3;
--sf-success: #0F766E;
--sf-success-muted: #CCFBF1;
--sf-danger: #991B1B;
--sf-danger-muted: #FEE2E2;
--sf-gold: #C5A028;
--sf-gold-muted: #FCF8E3;
/* Text */
--sf-text: #0B132B;
--sf-text-muted: #475569;
--sf-text-light: #94A3B8;
/* Borders */
--sf-border: #E2E8F0;
--sf-border-strong: #CBD5E1;
/* Geometric Radius Shapes */
--sf-radius-sm: 0px;
--sf-radius: 0px;
--sf-radius-lg: 0px;
--sf-radius-pill: 0px;
/* Fonts */
--sf-font-heading: 'Tenor Sans', sans-serif;
--sf-font-body: 'Montserrat', sans-serif;
/* Shadows */
--sf-shadow-sm: 0 2px 10px rgba(11,19,43,0.01);
--sf-shadow: 0 8px 30px rgba(11,19,43,0.03);
--sf-shadow-lg: 0 20px 50px rgba(11,19,43,0.05);
/* Transition */
--sf-transition: all 0.2s ease;
}
body {
margin: 0;
font-family: var(--sf-font-body);
color: var(--sf-text);
background-color: var(--sf-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.sf-card {
background-color: var(--sf-surface);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius);
box-shadow: var(--sf-shadow-sm);
padding: 2rem;
transition: var(--sf-transition);
}
.sf-card:hover {
box-shadow: var(--sf-shadow);
border-color: var(--sf-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--sf-font-heading);
font-weight: 400;
margin: 0;
color: var(--sf-text);
line-height: 1.2;
letter-spacing: 0.05em;
text-transform: uppercase;
}
p { font-family: var(--sf-font-body); color: var(--sf-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.sf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.75rem;
font-family: var(--sf-font-body);
font-size: 0.8rem;
font-weight: 700;
border-radius: var(--sf-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--sf-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.sf-btn-primary { background-color: var(--sf-primary); color: #fff; border-color: var(--sf-primary); }
.sf-btn-primary:hover { background-color: var(--sf-primary-hover); border-color: var(--sf-primary-hover); }
.sf-btn-accent { background-color: var(--sf-accent); color: #sf-bg; border-color: var(--sf-accent); color: #fff; }
.sf-btn-accent:hover { background-color: var(--sf-accent-hover); border-color: var(--sf-accent-hover); }
.sf-btn-outline { background-color: transparent; color: var(--sf-text); border-color: var(--sf-text); }
.sf-btn-outline:hover { background-color: var(--sf-surface-2); }
.sf-btn-ghost { background-color: transparent; color: var(--sf-text-muted); border-color: transparent; }
.sf-btn-ghost:hover { background-color: var(--sf-surface-2); color: var(--sf-text); }
.sf-btn-sm { padding: 0.5rem 1.25rem; font-size: 0.7rem; }
.sf-btn-lg { padding: 1rem 2.25rem; font-size: 0.85rem; }
.sf-btn-block { width: 100%; }
.sf-btn-icon { width: 44px; height: 44px; padding: 0; }
/* ── Form Controls ────────────── */
.sf-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text);
background-color: var(--sf-surface);
outline: none;
transition: var(--sf-transition);
}
.sf-input::placeholder { color: var(--sf-text-light); }
.sf-input:focus { border-color: var(--sf-primary); background-color: #FAFAFA; }
.sf-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--sf-font-body);
font-weight: 700;
font-size: 0.75rem;
color: var(--sf-text);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sf-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text);
background-color: var(--sf-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='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--sf-transition);
}
.sf-select:focus { border-color: var(--sf-primary); }
/* ── Badges ───────────────────── */
.sf-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.65rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.1em;
border: 1px solid transparent;
}
.sf-badge-sale { background-color: var(--sf-accent-muted); color: var(--sf-accent); border-color: var(--sf-accent); }
.sf-badge-new { background-color: var(--sf-primary-muted); color: var(--sf-primary); border-color: var(--sf-primary); }
.sf-badge-success { background-color: var(--sf-success-muted); color: var(--sf-success); border-color: var(--sf-success); }
.sf-badge-danger { background-color: var(--sf-danger-muted); color: var(--sf-danger); border-color: var(--sf-danger); }
.sf-badge-default { background-color: var(--sf-surface-2); color: var(--sf-text-muted); border-color: var(--sf-border); }
/* ── Star Rating ──────────────── */
.sf-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--sf-accent);
font-size: 0.75rem;
}
.sf-stars-count {
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 600;
color: var(--sf-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.sf-price {
font-family: var(--sf-font-body);
font-size: 1.15rem;
font-weight: 700;
color: var(--sf-text);
}
.sf-price-original {
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text-light);
text-decoration: line-through;
}
.sf-price-sale { color: var(--sf-accent); }
/* ── Toggle Slider ────────────── */
.sf-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.sf-toggle input { opacity: 0; width: 0; height: 0; }
.sf-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--sf-border-strong); border-radius: 0px; transition: var(--sf-transition); }
.sf-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 0px; transition: var(--sf-transition); }
.sf-toggle input:checked + .sf-toggle-slider { background-color: var(--sf-accent); }
.sf-toggle input:checked + .sf-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.sf-divider { border: none; border-top: 1px solid var(--sf-border); margin: 0; }
/* ── Logo ─────────────────────── */
.sf-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--sf-font-heading);
font-size: 1.35rem;
color: var(--sf-text);
font-weight: 400;
letter-spacing: 0.1em;
}
.sf-logo-icon {
width: 32px;
height: 32px;
background-color: var(--sf-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 0.95rem;
font-weight: 700;
border-radius: 0px;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--sf-primary) !important; }
.text-accent { color: var(--sf-accent) !important; }
.text-success { color: var(--sf-success) !important; }
.text-danger { color: var(--sf-danger) !important; }
.text-muted { color: var(--sf-text-muted) !important; }
.text-light { color: var(--sf-text-light) !important; }
.sf-link-sm {
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 700;
color: var(--sf-primary);
text-decoration: none;
transition: var(--sf-transition);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sf-link-sm:hover {
color: var(--sf-primary-hover);
}
/* --- COMPONENT STYLES --- */
.sf-table-wrap {
max-width: 1000px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
}
.sf-table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--sf-border);
flex-wrap: wrap;
}
.sf-table-toolbar-left {
display: flex;
align-items: center;
gap: 0.75rem;
}
.sf-table-toolbar-left h4 {
font-size: 1.15rem;
}
.sf-table-toolbar-right {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.sf-search-wrap {
position: relative;
}
.sf-search-ico {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--sf-text-light);
pointer-events: none;
}
.sf-search-input {
padding-left: 2.25rem;
width: 190px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.sf-table-scroll {
overflow-x: auto;
}
.sf-data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.sf-data-table thead tr {
background-color: var(--sf-surface-2);
border-bottom: 1px solid var(--sf-border);
}
.sf-data-table th {
padding: 0.75rem 1rem;
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--sf-text-light);
text-align: left;
white-space: nowrap;
}
.sf-data-table td {
padding: 1rem;
border-bottom: 1px solid var(--sf-border);
color: var(--sf-text);
font-weight: 600;
vertical-align: middle;
}
.sf-data-table tbody tr:last-child td {
border-bottom: none;
}
.sf-data-table tbody tr:hover td {
background-color: var(--sf-surface-2);
}
.sf-td-mono {
font-family: var(--sf-font-body);
font-size: 0.85rem;
}
.sf-prod-cell {
display: flex;
align-items: center;
gap: 0.75rem;
}
.sf-prod-thumb {
width: 38px;
height: 38px;
background-color: var(--sf-surface-2);
border-radius: var(--sf-radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.sf-prod-name {
display: block;
font-family: var(--sf-font-body);
font-weight: 700;
color: var(--sf-text);
}
.sf-prod-meta {
font-size: 0.75rem;
font-weight: 500;
}
.sf-table-pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border-top: 1px solid var(--sf-border);
gap: 1rem;
flex-wrap: wrap;
}
.sf-pagination-btns {
display: flex;
gap: 0.4rem;
align-items: center;
}
Lists
Order Status Feed
HTML
<div class="sf-activity-card sf-card">
<div class="sf-activity-head">
<h4>Archival Dispatch Milestones</h4>
<span class="sf-badge sf-badge-success">Batch #SF-4820</span>
</div>
<div class="sf-activity-list">
<!-- Milestone 1 -->
<div class="sf-activity-item active">
<div class="sf-act-ico" style="background:var(--sf-primary-muted); color:var(--sf-primary);">
📦
</div>
<div class="sf-act-content">
<div class="sf-act-top">
<span class="sf-act-label">Dispatched via Premium Insured Ground</span>
<span class="sf-act-time">Today, 02:40 pm</span>
</div>
<span class="sf-act-meta">Tracking coordinates: <a href="#" class="sf-link-sm">1Z999AA10123456784</a>. Estimated arrival: Friday, 22 May.</span>
</div>
</div>
<div class="sf-activity-line"></div>
<!-- Milestone 2 -->
<div class="sf-activity-item">
<div class="sf-act-ico" style="background:var(--sf-success-muted); color:var(--sf-success);">
✓
</div>
<div class="sf-act-content">
<div class="sf-act-top">
<span class="sf-act-label">Quality Hand-finish Authenticated</span>
<span class="sf-act-time">15 May, 10:15 am</span>
</div>
<span class="sf-act-meta">Verified at our Milan workshop. Brushed finish and balance checked. Passed Cone verification.</span>
</div>
</div>
<div class="sf-activity-line"></div>
<!-- Milestone 3 -->
<div class="sf-activity-item">
<div class="sf-act-ico" style="background:var(--sf-surface-2); color:var(--sf-text-light);">
📐
</div>
<div class="sf-act-content">
<div class="sf-act-top">
<span class="sf-act-label">Precision Molding Complete</span>
<span class="sf-act-time">14 May, 08:30 am</span>
</div>
<span class="sf-act-meta">Solid golden brass centered, hand-sculpted, and brushed. Allocated to capsule edition batch.</span>
</div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Order Status Feed */
/* NOTE: This component requires base.css to be included in your page. */
.sf-activity-card {
max-width: 520px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
}
.sf-activity-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--sf-border);
}
.sf-activity-head h4 {
font-size: 1.15rem;
}
.sf-activity-list {
display: flex;
flex-direction: column;
padding: 1.5rem;
position: relative;
}
.sf-activity-item {
display: flex;
align-items: flex-start;
gap: 1rem;
position: relative;
z-index: 2;
padding-bottom: 1.5rem;
}
.sf-activity-item:last-of-type {
padding-bottom: 0;
}
.sf-activity-item:not(:last-of-type)::after {
content: '';
position: absolute;
top: 32px; /* Bottom of 32px icon */
left: 15px; /* Center of 32px icon */
bottom: 0;
width: 1px;
background-color: var(--sf-border);
z-index: 1;
}
.sf-act-ico {
width: 32px;
height: 32px;
border-radius: var(--sf-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 0.95rem;
border: 1px solid var(--sf-border);
}
.sf-act-content {
flex: 1;
min-width: 0;
}
.sf-act-top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.sf-act-label {
font-family: var(--sf-font-body);
font-size: 0.875rem;
font-weight: 700;
color: var(--sf-text);
}
.sf-act-time {
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 600;
color: var(--sf-text-light);
white-space: nowrap;
}
.sf-act-meta {
font-size: 0.8rem;
color: var(--sf-text-muted);
font-weight: 500;
line-height: 1.5;
display: block;
}
/* Timeline Vertical Line */
.sf-activity-line {
display: none;
}
.sf-activity-item.active .sf-act-ico {
outline: 3px solid var(--sf-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=Montserrat:wght@300;400;500;600;700;800&family=Tenor+Sans&display=swap');
/* ===========================
Storefront Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--sf-bg: #FAFAFA;
--sf-surface: #FFFFFF;
--sf-surface-2: #F8F9FA;
--sf-surface-dark: #0B132B;
/* Brand Palette */
--sf-primary: #0B132B;
--sf-primary-hover: #1C2541;
--sf-primary-muted: #E2E8F0;
--sf-accent: #C5A028;
--sf-accent-hover: #A4821A;
--sf-accent-muted: #FCF8E3;
--sf-success: #0F766E;
--sf-success-muted: #CCFBF1;
--sf-danger: #991B1B;
--sf-danger-muted: #FEE2E2;
--sf-gold: #C5A028;
--sf-gold-muted: #FCF8E3;
/* Text */
--sf-text: #0B132B;
--sf-text-muted: #475569;
--sf-text-light: #94A3B8;
/* Borders */
--sf-border: #E2E8F0;
--sf-border-strong: #CBD5E1;
/* Geometric Radius Shapes */
--sf-radius-sm: 0px;
--sf-radius: 0px;
--sf-radius-lg: 0px;
--sf-radius-pill: 0px;
/* Fonts */
--sf-font-heading: 'Tenor Sans', sans-serif;
--sf-font-body: 'Montserrat', sans-serif;
/* Shadows */
--sf-shadow-sm: 0 2px 10px rgba(11,19,43,0.01);
--sf-shadow: 0 8px 30px rgba(11,19,43,0.03);
--sf-shadow-lg: 0 20px 50px rgba(11,19,43,0.05);
/* Transition */
--sf-transition: all 0.2s ease;
}
body {
margin: 0;
font-family: var(--sf-font-body);
color: var(--sf-text);
background-color: var(--sf-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.sf-card {
background-color: var(--sf-surface);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius);
box-shadow: var(--sf-shadow-sm);
padding: 2rem;
transition: var(--sf-transition);
}
.sf-card:hover {
box-shadow: var(--sf-shadow);
border-color: var(--sf-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--sf-font-heading);
font-weight: 400;
margin: 0;
color: var(--sf-text);
line-height: 1.2;
letter-spacing: 0.05em;
text-transform: uppercase;
}
p { font-family: var(--sf-font-body); color: var(--sf-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.sf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.75rem;
font-family: var(--sf-font-body);
font-size: 0.8rem;
font-weight: 700;
border-radius: var(--sf-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--sf-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.sf-btn-primary { background-color: var(--sf-primary); color: #fff; border-color: var(--sf-primary); }
.sf-btn-primary:hover { background-color: var(--sf-primary-hover); border-color: var(--sf-primary-hover); }
.sf-btn-accent { background-color: var(--sf-accent); color: #sf-bg; border-color: var(--sf-accent); color: #fff; }
.sf-btn-accent:hover { background-color: var(--sf-accent-hover); border-color: var(--sf-accent-hover); }
.sf-btn-outline { background-color: transparent; color: var(--sf-text); border-color: var(--sf-text); }
.sf-btn-outline:hover { background-color: var(--sf-surface-2); }
.sf-btn-ghost { background-color: transparent; color: var(--sf-text-muted); border-color: transparent; }
.sf-btn-ghost:hover { background-color: var(--sf-surface-2); color: var(--sf-text); }
.sf-btn-sm { padding: 0.5rem 1.25rem; font-size: 0.7rem; }
.sf-btn-lg { padding: 1rem 2.25rem; font-size: 0.85rem; }
.sf-btn-block { width: 100%; }
.sf-btn-icon { width: 44px; height: 44px; padding: 0; }
/* ── Form Controls ────────────── */
.sf-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text);
background-color: var(--sf-surface);
outline: none;
transition: var(--sf-transition);
}
.sf-input::placeholder { color: var(--sf-text-light); }
.sf-input:focus { border-color: var(--sf-primary); background-color: #FAFAFA; }
.sf-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--sf-font-body);
font-weight: 700;
font-size: 0.75rem;
color: var(--sf-text);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sf-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text);
background-color: var(--sf-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='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--sf-transition);
}
.sf-select:focus { border-color: var(--sf-primary); }
/* ── Badges ───────────────────── */
.sf-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.65rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.1em;
border: 1px solid transparent;
}
.sf-badge-sale { background-color: var(--sf-accent-muted); color: var(--sf-accent); border-color: var(--sf-accent); }
.sf-badge-new { background-color: var(--sf-primary-muted); color: var(--sf-primary); border-color: var(--sf-primary); }
.sf-badge-success { background-color: var(--sf-success-muted); color: var(--sf-success); border-color: var(--sf-success); }
.sf-badge-danger { background-color: var(--sf-danger-muted); color: var(--sf-danger); border-color: var(--sf-danger); }
.sf-badge-default { background-color: var(--sf-surface-2); color: var(--sf-text-muted); border-color: var(--sf-border); }
/* ── Star Rating ──────────────── */
.sf-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--sf-accent);
font-size: 0.75rem;
}
.sf-stars-count {
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 600;
color: var(--sf-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.sf-price {
font-family: var(--sf-font-body);
font-size: 1.15rem;
font-weight: 700;
color: var(--sf-text);
}
.sf-price-original {
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text-light);
text-decoration: line-through;
}
.sf-price-sale { color: var(--sf-accent); }
/* ── Toggle Slider ────────────── */
.sf-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.sf-toggle input { opacity: 0; width: 0; height: 0; }
.sf-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--sf-border-strong); border-radius: 0px; transition: var(--sf-transition); }
.sf-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 0px; transition: var(--sf-transition); }
.sf-toggle input:checked + .sf-toggle-slider { background-color: var(--sf-accent); }
.sf-toggle input:checked + .sf-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.sf-divider { border: none; border-top: 1px solid var(--sf-border); margin: 0; }
/* ── Logo ─────────────────────── */
.sf-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--sf-font-heading);
font-size: 1.35rem;
color: var(--sf-text);
font-weight: 400;
letter-spacing: 0.1em;
}
.sf-logo-icon {
width: 32px;
height: 32px;
background-color: var(--sf-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 0.95rem;
font-weight: 700;
border-radius: 0px;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--sf-primary) !important; }
.text-accent { color: var(--sf-accent) !important; }
.text-success { color: var(--sf-success) !important; }
.text-danger { color: var(--sf-danger) !important; }
.text-muted { color: var(--sf-text-muted) !important; }
.text-light { color: var(--sf-text-light) !important; }
.sf-link-sm {
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 700;
color: var(--sf-primary);
text-decoration: none;
transition: var(--sf-transition);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sf-link-sm:hover {
color: var(--sf-primary-hover);
}
/* --- COMPONENT STYLES --- */
.sf-activity-card {
max-width: 520px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
}
.sf-activity-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--sf-border);
}
.sf-activity-head h4 {
font-size: 1.15rem;
}
.sf-activity-list {
display: flex;
flex-direction: column;
padding: 1.5rem;
position: relative;
}
.sf-activity-item {
display: flex;
align-items: flex-start;
gap: 1rem;
position: relative;
z-index: 2;
padding-bottom: 1.5rem;
}
.sf-activity-item:last-of-type {
padding-bottom: 0;
}
.sf-activity-item:not(:last-of-type)::after {
content: '';
position: absolute;
top: 32px; /* Bottom of 32px icon */
left: 15px; /* Center of 32px icon */
bottom: 0;
width: 1px;
background-color: var(--sf-border);
z-index: 1;
}
.sf-act-ico {
width: 32px;
height: 32px;
border-radius: var(--sf-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 0.95rem;
border: 1px solid var(--sf-border);
}
.sf-act-content {
flex: 1;
min-width: 0;
}
.sf-act-top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.sf-act-label {
font-family: var(--sf-font-body);
font-size: 0.875rem;
font-weight: 700;
color: var(--sf-text);
}
.sf-act-time {
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 600;
color: var(--sf-text-light);
white-space: nowrap;
}
.sf-act-meta {
font-size: 0.8rem;
color: var(--sf-text-muted);
font-weight: 500;
line-height: 1.5;
display: block;
}
/* Timeline Vertical Line */
.sf-activity-line {
display: none;
}
.sf-activity-item.active .sf-act-ico {
outline: 3px solid var(--sf-primary-muted);
}
Modals
Cart Confirm Dialog
HTML
<div class="sf-modal-backdrop">
<div class="sf-modal sf-card">
<div class="sf-modal-head">
<div class="sf-modal-title-row">
<div class="sf-modal-ico" style="background:var(--sf-success-muted); color:var(--sf-primary);">
📐
</div>
<div>
<h4>Allocation Confirmed</h4>
<p class="sf-modal-meta">Piece reserved from current capsule edition.</p>
</div>
</div>
<button class="sf-btn sf-btn-ghost sf-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="sf-modal-body">
<div class="sf-cart-summary">
<div class="sf-cart-prod-row">
<span class="sf-cart-prod-thumb">📐</span>
<div class="sf-cart-prod-info">
<strong>Oculus Brass LIGHT Object</strong>
<p class="text-muted" style="font-size:0.78rem; margin-top:0.1rem;">Qty: 1 · Silhouette: Modern Maison</p>
</div>
<span class="sf-price sf-price-sale" style="font-size:1.05rem;">$245.00</span>
</div>
<hr class="sf-divider">
<div class="sf-cart-totals">
<div class="sf-total-row">
<span class="text-muted">Total Capsule Investment (1 item)</span>
<span style="font-weight:700;">$245.00</span>
</div>
<div class="sf-total-row" style="color:var(--sf-accent);">
<span>Insured Freight Packaging</span>
<span style="font-weight:700;">FREE</span>
</div>
</div>
</div>
<!-- Eco warning/trust inside modal -->
<div class="sf-modal-trust-alert">
<span>📐 Limited capsule items are prone to sellout. Secure allocations now.</span>
</div>
</div>
<div class="sf-modal-foot">
<button class="sf-btn sf-btn-outline">Add More</button>
<button class="sf-btn sf-btn-primary">Verify Reserve</button>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Cart Confirm Dialog */
/* NOTE: This component requires base.css to be included in your page. */
.sf-modal-backdrop {
background-color: rgba(11,19,43,0.3);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
max-width: 700px;
margin: 0 auto;
}
.sf-modal {
width: 100%;
max-width: 480px;
padding: 0 !important;
overflow: hidden;
}
.sf-modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem;
border-bottom: 1px solid var(--sf-border);
}
.sf-modal-title-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.sf-modal-ico {
width: 40px;
height: 40px;
border-radius: var(--sf-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.15rem;
}
.sf-modal-head h4 {
font-size: 1.15rem;
margin-bottom: 0.15rem;
}
.sf-modal-meta {
font-size: 0.8rem;
font-weight: 600;
}
.sf-modal-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.sf-cart-summary {
display: flex;
flex-direction: column;
gap: 1rem;
background-color: var(--sf-surface-2);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 1.25rem;
}
.sf-cart-prod-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.sf-cart-prod-thumb {
width: 42px;
height: 42px;
background-color: var(--sf-surface);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
flex-shrink: 0;
}
.sf-cart-prod-info {
flex: 1;
min-width: 0;
}
.sf-cart-prod-info strong {
font-family: var(--sf-font-body);
font-size: 0.875rem;
font-weight: 700;
color: var(--sf-text);
}
.sf-cart-totals {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.sf-total-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
font-weight: 600;
}
.sf-modal-trust-alert {
display: flex;
align-items: center;
gap: 0.6rem;
background-color: var(--sf-accent-muted);
color: #854D0E;
border: 1px solid rgba(197,160,40,0.15);
border-radius: var(--sf-radius-sm);
padding: 0.75rem 1rem;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.4;
}
.sf-modal-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
padding: 1.25rem 1.5rem;
border-top: 1px solid var(--sf-border);
background-color: var(--sf-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=Montserrat:wght@300;400;500;600;700;800&family=Tenor+Sans&display=swap');
/* ===========================
Storefront Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--sf-bg: #FAFAFA;
--sf-surface: #FFFFFF;
--sf-surface-2: #F8F9FA;
--sf-surface-dark: #0B132B;
/* Brand Palette */
--sf-primary: #0B132B;
--sf-primary-hover: #1C2541;
--sf-primary-muted: #E2E8F0;
--sf-accent: #C5A028;
--sf-accent-hover: #A4821A;
--sf-accent-muted: #FCF8E3;
--sf-success: #0F766E;
--sf-success-muted: #CCFBF1;
--sf-danger: #991B1B;
--sf-danger-muted: #FEE2E2;
--sf-gold: #C5A028;
--sf-gold-muted: #FCF8E3;
/* Text */
--sf-text: #0B132B;
--sf-text-muted: #475569;
--sf-text-light: #94A3B8;
/* Borders */
--sf-border: #E2E8F0;
--sf-border-strong: #CBD5E1;
/* Geometric Radius Shapes */
--sf-radius-sm: 0px;
--sf-radius: 0px;
--sf-radius-lg: 0px;
--sf-radius-pill: 0px;
/* Fonts */
--sf-font-heading: 'Tenor Sans', sans-serif;
--sf-font-body: 'Montserrat', sans-serif;
/* Shadows */
--sf-shadow-sm: 0 2px 10px rgba(11,19,43,0.01);
--sf-shadow: 0 8px 30px rgba(11,19,43,0.03);
--sf-shadow-lg: 0 20px 50px rgba(11,19,43,0.05);
/* Transition */
--sf-transition: all 0.2s ease;
}
body {
margin: 0;
font-family: var(--sf-font-body);
color: var(--sf-text);
background-color: var(--sf-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.sf-card {
background-color: var(--sf-surface);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius);
box-shadow: var(--sf-shadow-sm);
padding: 2rem;
transition: var(--sf-transition);
}
.sf-card:hover {
box-shadow: var(--sf-shadow);
border-color: var(--sf-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--sf-font-heading);
font-weight: 400;
margin: 0;
color: var(--sf-text);
line-height: 1.2;
letter-spacing: 0.05em;
text-transform: uppercase;
}
p { font-family: var(--sf-font-body); color: var(--sf-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.sf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.75rem;
font-family: var(--sf-font-body);
font-size: 0.8rem;
font-weight: 700;
border-radius: var(--sf-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--sf-transition);
white-space: nowrap;
user-select: none;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.sf-btn-primary { background-color: var(--sf-primary); color: #fff; border-color: var(--sf-primary); }
.sf-btn-primary:hover { background-color: var(--sf-primary-hover); border-color: var(--sf-primary-hover); }
.sf-btn-accent { background-color: var(--sf-accent); color: #sf-bg; border-color: var(--sf-accent); color: #fff; }
.sf-btn-accent:hover { background-color: var(--sf-accent-hover); border-color: var(--sf-accent-hover); }
.sf-btn-outline { background-color: transparent; color: var(--sf-text); border-color: var(--sf-text); }
.sf-btn-outline:hover { background-color: var(--sf-surface-2); }
.sf-btn-ghost { background-color: transparent; color: var(--sf-text-muted); border-color: transparent; }
.sf-btn-ghost:hover { background-color: var(--sf-surface-2); color: var(--sf-text); }
.sf-btn-sm { padding: 0.5rem 1.25rem; font-size: 0.7rem; }
.sf-btn-lg { padding: 1rem 2.25rem; font-size: 0.85rem; }
.sf-btn-block { width: 100%; }
.sf-btn-icon { width: 44px; height: 44px; padding: 0; }
/* ── Form Controls ────────────── */
.sf-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text);
background-color: var(--sf-surface);
outline: none;
transition: var(--sf-transition);
}
.sf-input::placeholder { color: var(--sf-text-light); }
.sf-input:focus { border-color: var(--sf-primary); background-color: #FAFAFA; }
.sf-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--sf-font-body);
font-weight: 700;
font-size: 0.75rem;
color: var(--sf-text);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sf-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text);
background-color: var(--sf-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='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--sf-transition);
}
.sf-select:focus { border-color: var(--sf-primary); }
/* ── Badges ───────────────────── */
.sf-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--sf-radius-sm);
font-family: var(--sf-font-body);
font-size: 0.65rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.1em;
border: 1px solid transparent;
}
.sf-badge-sale { background-color: var(--sf-accent-muted); color: var(--sf-accent); border-color: var(--sf-accent); }
.sf-badge-new { background-color: var(--sf-primary-muted); color: var(--sf-primary); border-color: var(--sf-primary); }
.sf-badge-success { background-color: var(--sf-success-muted); color: var(--sf-success); border-color: var(--sf-success); }
.sf-badge-danger { background-color: var(--sf-danger-muted); color: var(--sf-danger); border-color: var(--sf-danger); }
.sf-badge-default { background-color: var(--sf-surface-2); color: var(--sf-text-muted); border-color: var(--sf-border); }
/* ── Star Rating ──────────────── */
.sf-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--sf-accent);
font-size: 0.75rem;
}
.sf-stars-count {
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 600;
color: var(--sf-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.sf-price {
font-family: var(--sf-font-body);
font-size: 1.15rem;
font-weight: 700;
color: var(--sf-text);
}
.sf-price-original {
font-family: var(--sf-font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--sf-text-light);
text-decoration: line-through;
}
.sf-price-sale { color: var(--sf-accent); }
/* ── Toggle Slider ────────────── */
.sf-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.sf-toggle input { opacity: 0; width: 0; height: 0; }
.sf-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--sf-border-strong); border-radius: 0px; transition: var(--sf-transition); }
.sf-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 0px; transition: var(--sf-transition); }
.sf-toggle input:checked + .sf-toggle-slider { background-color: var(--sf-accent); }
.sf-toggle input:checked + .sf-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.sf-divider { border: none; border-top: 1px solid var(--sf-border); margin: 0; }
/* ── Logo ─────────────────────── */
.sf-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--sf-font-heading);
font-size: 1.35rem;
color: var(--sf-text);
font-weight: 400;
letter-spacing: 0.1em;
}
.sf-logo-icon {
width: 32px;
height: 32px;
background-color: var(--sf-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 0.95rem;
font-weight: 700;
border-radius: 0px;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--sf-primary) !important; }
.text-accent { color: var(--sf-accent) !important; }
.text-success { color: var(--sf-success) !important; }
.text-danger { color: var(--sf-danger) !important; }
.text-muted { color: var(--sf-text-muted) !important; }
.text-light { color: var(--sf-text-light) !important; }
.sf-link-sm {
font-family: var(--sf-font-body);
font-size: 0.75rem;
font-weight: 700;
color: var(--sf-primary);
text-decoration: none;
transition: var(--sf-transition);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sf-link-sm:hover {
color: var(--sf-primary-hover);
}
/* --- COMPONENT STYLES --- */
.sf-modal-backdrop {
background-color: rgba(11,19,43,0.3);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
max-width: 700px;
margin: 0 auto;
}
.sf-modal {
width: 100%;
max-width: 480px;
padding: 0 !important;
overflow: hidden;
}
.sf-modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem;
border-bottom: 1px solid var(--sf-border);
}
.sf-modal-title-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.sf-modal-ico {
width: 40px;
height: 40px;
border-radius: var(--sf-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.15rem;
}
.sf-modal-head h4 {
font-size: 1.15rem;
margin-bottom: 0.15rem;
}
.sf-modal-meta {
font-size: 0.8rem;
font-weight: 600;
}
.sf-modal-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.sf-cart-summary {
display: flex;
flex-direction: column;
gap: 1rem;
background-color: var(--sf-surface-2);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
padding: 1.25rem;
}
.sf-cart-prod-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.sf-cart-prod-thumb {
width: 42px;
height: 42px;
background-color: var(--sf-surface);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
flex-shrink: 0;
}
.sf-cart-prod-info {
flex: 1;
min-width: 0;
}
.sf-cart-prod-info strong {
font-family: var(--sf-font-body);
font-size: 0.875rem;
font-weight: 700;
color: var(--sf-text);
}
.sf-cart-totals {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.sf-total-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
font-weight: 600;
}
.sf-modal-trust-alert {
display: flex;
align-items: center;
gap: 0.6rem;
background-color: var(--sf-accent-muted);
color: #854D0E;
border: 1px solid rgba(197,160,40,0.15);
border-radius: var(--sf-radius-sm);
padding: 0.75rem 1rem;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.4;
}
.sf-modal-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
padding: 1.25rem 1.5rem;
border-top: 1px solid var(--sf-border);
background-color: var(--sf-surface-2);
}