Organic Shape - Free HTML/CSS UI Kit
A beautiful, editorial UI Kit featuring soft organic shapes, flowing curves, fluid borders, warm clay/sage color palettes, and natural botanical aesthetics.
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
Sage Leaf
#2D6A4F
Warm Clay
#D97706
Earthy Espresso
#2A2421
Soft Sand
#FAF7F2
Dusty Rose
#F43F5E
Typography
Hero Sections
Promo Banner Hero
HTML
<div class="og-promo-hero og-card">
<div class="og-promo-badge">
<span class="og-badge og-badge-new">EST. 2026</span>
<span class="og-promo-discount">Sustainably sourced, lovingly handcrafted.</span>
</div>
<h1 class="og-promo-title">Nurture Your Skin Naturally</h1>
<p class="og-promo-desc">Deeply hydrating, nutrient-rich botanicals carefully extracted to support your skin's natural radiance and restore total balance.</p>
<div class="og-promo-actions">
<button class="og-btn og-btn-primary og-btn-lg">Explore Botanicals</button>
<button class="og-btn og-btn-outline og-btn-lg">Our Philosophy</button>
</div>
<!-- Trust signals below -->
<div class="og-hero-trust">
<div class="og-trust-item">
<span class="og-trust-icon">🌿</span>
<span>100% Organic & Vegan</span>
</div>
<div class="og-trust-item">
<span class="og-trust-icon">🐇</span>
<span>Cruelty-Free Certified</span>
</div>
<div class="og-trust-item">
<span class="og-trust-icon">♻️</span>
<span>Zero-Waste Packaging</span>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Promo Banner Hero */
/* NOTE: This component requires base.css to be included in your page. */
.og-promo-hero {
max-width: 1100px;
margin: 0 auto;
padding: 5rem 3rem !important;
text-align: center;
background: linear-gradient(135deg, #FAF7F2 0%, var(--og-primary-muted) 100%);
display: flex;
flex-direction: column;
align-items: center;
gap: 1.75rem;
position: relative;
overflow: hidden;
border-radius: var(--og-radius-lg) !important;
}
.og-promo-hero::before {
content: '';
position: absolute;
top: -40%;
left: -30%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(45,106,79,0.08) 0%, transparent 70%);
border-radius: var(--og-radius-blob);
pointer-events: none;
}
.og-promo-badge {
display: flex;
align-items: center;
gap: 0.85rem;
flex-wrap: wrap;
justify-content: center;
}
.og-promo-discount {
font-family: var(--og-font-body);
font-size: 0.95rem;
font-weight: 700;
color: var(--og-primary-hover);
}
.og-promo-title {
font-size: 3.5rem;
max-width: 800px;
letter-spacing: -0.01em;
color: var(--og-text);
}
.og-promo-desc {
font-size: 1.15rem;
max-width: 680px;
color: var(--og-text-muted);
line-height: 1.7;
}
.og-promo-actions {
display: flex;
gap: 0.85rem;
justify-content: center;
flex-wrap: wrap;
}
.og-hero-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 2.5rem;
margin-top: 1.5rem;
border-top: 1.5px solid var(--og-border);
padding-top: 2rem;
width: 100%;
flex-wrap: wrap;
}
.og-trust-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--og-font-body);
font-size: 0.85rem;
font-weight: 700;
color: var(--og-text-muted);
}
@media (max-width: 768px) {
.og-promo-title { font-size: 2.35rem; }
.og-promo-hero { padding: 3.5rem 1.5rem !important; }
.og-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=DM+Serif+Display&family=Outfit:wght@300;400;500;600;700;800&display=swap');
/* ===========================
Organic Shape Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--og-bg: #FAF7F2;
--og-surface: #FFFFFF;
--og-surface-2: #F3EEE5;
--og-surface-dark: #2A2421;
/* Brand Palette */
--og-primary: #2D6A4F;
--og-primary-hover: #1B4332;
--og-primary-muted: #D8F3DC;
--og-accent: #D97706;
--og-accent-hover: #B45309;
--og-accent-muted: #FEF3C7;
--og-success: #52B788;
--og-success-muted: #E8F5E9;
--og-danger: #F43F5E;
--og-danger-muted: #FFE4E6;
--og-gold: #EAB308;
--og-gold-muted: #FEF9C3;
/* Text */
--og-text: #2A2421;
--og-text-muted: #706259;
--og-text-light: #9E9085;
/* Borders */
--og-border: #E6DFD5;
--og-border-strong: #CDCEBF;
/* Organic Radius Shapes */
--og-radius-sm: 12px 6px 14px 8px;
--og-radius: 24px 8px 32px 12px;
--og-radius-lg: 40px 16px 48px 20px;
--og-radius-pill: 100px;
--og-radius-blob: 60% 40% 30% 70% / 60% 30% 70% 40%;
/* Fonts */
--og-font-heading: 'DM Serif Display', serif;
--og-font-body: 'Outfit', sans-serif;
/* Shadows */
--og-shadow-sm: 0 4px 20px rgba(42,36,33,0.03);
--og-shadow: 0 10px 30px rgba(42,36,33,0.06);
--og-shadow-lg: 0 20px 40px rgba(42,36,33,0.09);
/* Transition */
--og-transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body {
margin: 0;
font-family: var(--og-font-body);
color: var(--og-text);
background-color: var(--og-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.og-card {
background-color: var(--og-surface);
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius);
box-shadow: var(--og-shadow-sm);
padding: 2rem;
transition: var(--og-transition);
}
.og-card:hover {
box-shadow: var(--og-shadow);
transform: translateY(-2px);
border-color: var(--og-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--og-font-heading);
font-weight: 400;
margin: 0;
color: var(--og-text);
line-height: 1.25;
}
p { font-family: var(--og-font-body); color: var(--og-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.og-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 600;
border-radius: var(--og-radius-sm);
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--og-transition);
white-space: nowrap;
user-select: none;
}
.og-btn-primary { background-color: var(--og-primary); color: #fff; border-color: var(--og-primary); }
.og-btn-primary:hover { background-color: var(--og-primary-hover); border-color: var(--og-primary-hover); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(45,106,79,0.25); }
.og-btn-accent { background-color: var(--og-accent); color: #fff; border-color: var(--og-accent); }
.og-btn-accent:hover { background-color: var(--og-accent-hover); border-color: var(--og-accent-hover); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(217,119,6,0.25); }
.og-btn-outline { background-color: transparent; color: var(--og-text); border-color: var(--og-text); }
.og-btn-outline:hover { background-color: var(--og-surface-2); transform: translateY(-2px); }
.og-btn-ghost { background-color: transparent; color: var(--og-text-muted); border-color: transparent; }
.og-btn-ghost:hover { background-color: var(--og-surface-2); color: var(--og-text); }
.og-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.82rem; }
.og-btn-lg { padding: 0.9rem 2rem; font-size: 1rem; border-radius: var(--og-radius); }
.og-btn-block { width: 100%; }
.og-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
/* ── Form Controls ────────────── */
.og-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius-sm);
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--og-text);
background-color: var(--og-surface);
outline: none;
transition: var(--og-transition);
}
.og-input::placeholder { color: var(--og-text-light); }
.og-input:focus { border-color: var(--og-primary); background-color: #FAFBF9; }
.og-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--og-font-body);
font-weight: 700;
font-size: 0.85rem;
color: var(--og-text);
}
.og-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius-sm);
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--og-text);
background-color: var(--og-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='%23706259' 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(--og-transition);
}
.og-select:focus { border-color: var(--og-primary); }
/* ── Badges ───────────────────── */
.og-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--og-radius-pill);
font-family: var(--og-font-body);
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.og-badge-sale { background-color: var(--og-accent-muted); color: #92400E; }
.og-badge-new { background-color: var(--og-primary-muted); color: #14532D; }
.og-badge-success { background-color: var(--og-success-muted); color: #065F46; }
.og-badge-danger { background-color: var(--og-danger-muted); color: #9F1239; }
.og-badge-default { background-color: var(--og-surface-2); color: var(--og-text-muted); }
/* ── Star Rating ──────────────── */
.og-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--og-accent);
font-size: 0.85rem;
}
.og-stars-count {
font-family: var(--og-font-body);
font-size: 0.8rem;
font-weight: 500;
color: var(--og-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.og-price {
font-family: var(--og-font-heading);
font-size: 1.35rem;
color: var(--og-text);
}
.og-price-original {
font-family: var(--og-font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--og-text-light);
text-decoration: line-through;
}
.og-price-sale { color: var(--og-accent); }
/* ── Toggle Slider ────────────── */
.og-toggle { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; }
.og-toggle input { opacity: 0; width: 0; height: 0; }
.og-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--og-border); border-radius: 26px; transition: var(--og-transition); }
.og-toggle-slider::before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--og-transition); }
.og-toggle input:checked + .og-toggle-slider { background-color: var(--og-primary); }
.og-toggle input:checked + .og-toggle-slider::before { transform: translateX(22px); }
/* ── Divider ──────────────────── */
.og-divider { border: none; border-top: 1.5px solid var(--og-border); margin: 0; }
/* ── Logo ─────────────────────── */
.og-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--og-font-heading);
font-size: 1.4rem;
color: var(--og-text);
}
.og-logo-icon {
width: 38px;
height: 38px;
background-color: var(--og-primary);
border-radius: var(--og-radius-blob);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 1.25rem;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--og-primary) !important; }
.text-accent { color: var(--og-accent) !important; }
.text-success { color: var(--og-primary) !important; }
.text-danger { color: var(--og-danger) !important; }
.text-muted { color: var(--og-text-muted) !important; }
.text-light { color: var(--og-text-light) !important; }
.og-link-sm {
font-family: var(--og-font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--og-primary);
text-decoration: none;
transition: var(--og-transition);
}
.og-link-sm:hover {
color: var(--og-primary-hover);
}
/* --- COMPONENT STYLES --- */
.og-promo-hero {
max-width: 1100px;
margin: 0 auto;
padding: 5rem 3rem !important;
text-align: center;
background: linear-gradient(135deg, #FAF7F2 0%, var(--og-primary-muted) 100%);
display: flex;
flex-direction: column;
align-items: center;
gap: 1.75rem;
position: relative;
overflow: hidden;
border-radius: var(--og-radius-lg) !important;
}
.og-promo-hero::before {
content: '';
position: absolute;
top: -40%;
left: -30%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(45,106,79,0.08) 0%, transparent 70%);
border-radius: var(--og-radius-blob);
pointer-events: none;
}
.og-promo-badge {
display: flex;
align-items: center;
gap: 0.85rem;
flex-wrap: wrap;
justify-content: center;
}
.og-promo-discount {
font-family: var(--og-font-body);
font-size: 0.95rem;
font-weight: 700;
color: var(--og-primary-hover);
}
.og-promo-title {
font-size: 3.5rem;
max-width: 800px;
letter-spacing: -0.01em;
color: var(--og-text);
}
.og-promo-desc {
font-size: 1.15rem;
max-width: 680px;
color: var(--og-text-muted);
line-height: 1.7;
}
.og-promo-actions {
display: flex;
gap: 0.85rem;
justify-content: center;
flex-wrap: wrap;
}
.og-hero-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 2.5rem;
margin-top: 1.5rem;
border-top: 1.5px solid var(--og-border);
padding-top: 2rem;
width: 100%;
flex-wrap: wrap;
}
.og-trust-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--og-font-body);
font-size: 0.85rem;
font-weight: 700;
color: var(--og-text-muted);
}
@media (max-width: 768px) {
.og-promo-title { font-size: 2.35rem; }
.og-promo-hero { padding: 3.5rem 1.5rem !important; }
.og-hero-trust { gap: 1rem; }
}
Product Feature Split
HTML
<div class="og-split-hero">
<div class="og-split-main og-card">
<span class="og-badge og-badge-sale">Best Seller</span>
<h1 class="og-split-title">Golden Nectar Face Oil</h1>
<p class="og-split-desc">A rich, restorative blend of organic Jojoba, Rosehip, and Seabuckthorn oils. Rapidly absorbs to deliver absolute moisture and a healthy dew-kissed glow.</p>
<!-- Product highlights -->
<ul class="og-split-features">
<li>
<span class="og-feat-icon">✨</span>
<div>
<strong>Instantly Glowing</strong>
<p>Replenishes moisture to instantly soften dry, dull areas.</p>
</div>
</li>
<li>
<span class="og-feat-icon">🌾</span>
<div>
<strong>Anti-Inflammatory</strong>
<p>Soothes redness and calms sensitive, irritated skin barriers.</p>
</div>
</li>
</ul>
<div class="og-split-actions-row">
<div class="og-split-price-box">
<span class="og-price og-price-sale">$64.00</span>
<span class="og-price-original">$78.00</span>
</div>
<button class="og-btn og-btn-primary og-btn-lg">Add to Bag</button>
<button class="og-btn og-btn-outline og-btn-lg">Read Reviews</button>
</div>
</div>
<!-- Right Side: Organic shape illustration card -->
<div class="og-split-sidebar">
<div class="og-preview-widget og-card">
<div class="og-widget-image-block">
<span class="og-badge og-badge-new og-widget-badge">100% Pure</span>
<div class="og-widget-bot-icon">🧪</div>
<div class="og-widget-blobs">
<div class="og-blob-one"></div>
<div class="og-blob-two"></div>
</div>
</div>
<div class="og-widget-info">
<div class="og-stars">
⭐⭐⭐⭐⭐
<span class="og-stars-count">(312 reviews)</span>
</div>
<h4 class="og-widget-title">Golden Nectar (50ml)</h4>
<div class="og-widget-stock">
<span class="og-stock-dot"></span>
<span>Fresh batch made this morning</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. */
.og-split-hero {
display: grid;
grid-template-columns: 1fr 340px;
gap: 1.75rem;
max-width: 1100px;
margin: 0 auto;
align-items: start;
}
.og-split-main {
padding: 3rem !important;
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: flex-start;
}
.og-split-title {
font-size: 2.85rem;
letter-spacing: -0.01em;
line-height: 1.15;
}
.og-split-desc {
font-size: 1.05rem;
color: var(--og-text-muted);
line-height: 1.7;
}
/* Features */
.og-split-features {
list-style: none;
padding: 0;
margin: 0.5rem 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.og-split-features li {
display: flex;
align-items: flex-start;
gap: 0.85rem;
}
.og-feat-icon {
font-size: 1.25rem;
width: 38px;
height: 38px;
background-color: var(--og-surface-2);
border-radius: var(--og-radius-blob);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.og-split-features strong {
font-family: var(--og-font-body);
font-size: 0.95rem;
font-weight: 700;
color: var(--og-text);
}
.og-split-features p {
font-size: 0.85rem;
color: var(--og-text-muted);
margin-top: 0.1rem;
}
.og-split-actions-row {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
flex-wrap: wrap;
border-top: 1.5px solid var(--og-border);
padding-top: 1.5rem;
margin-top: 0.5rem;
}
.og-split-price-box {
display: flex;
flex-direction: column;
margin-right: auto;
}
/* Sidebar Product Widget */
.og-preview-widget {
padding: 0 !important;
overflow: hidden;
}
.og-widget-image-block {
height: 270px;
background: linear-gradient(135deg, var(--og-primary-muted), #FAF7F2);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.og-widget-badge {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 3;
}
.og-widget-bot-icon {
font-size: 5rem;
z-index: 2;
transition: var(--og-transition);
}
.og-preview-widget:hover .og-widget-bot-icon {
transform: scale(1.08) rotate(4deg);
}
.og-widget-blobs {
position: absolute;
inset: 0;
pointer-events: none;
}
.og-blob-one {
position: absolute;
bottom: -10%;
right: -10%;
width: 160px;
height: 160px;
background: rgba(45,106,79,0.12);
border-radius: var(--og-radius-blob);
}
.og-blob-two {
position: absolute;
top: -10%;
left: -10%;
width: 130px;
height: 130px;
background: rgba(217,119,6,0.1);
border-radius: var(--og-radius-blob);
}
.og-widget-info {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.og-widget-title {
font-size: 1.05rem;
font-weight: 700;
}
.og-widget-stock {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
font-weight: 700;
color: var(--og-primary);
}
.og-stock-dot {
width: 6px;
height: 6px;
background-color: var(--og-primary);
border-radius: 50%;
}
@media (max-width: 900px) {
.og-split-hero { grid-template-columns: 1fr; }
.og-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=DM+Serif+Display&family=Outfit:wght@300;400;500;600;700;800&display=swap');
/* ===========================
Organic Shape Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--og-bg: #FAF7F2;
--og-surface: #FFFFFF;
--og-surface-2: #F3EEE5;
--og-surface-dark: #2A2421;
/* Brand Palette */
--og-primary: #2D6A4F;
--og-primary-hover: #1B4332;
--og-primary-muted: #D8F3DC;
--og-accent: #D97706;
--og-accent-hover: #B45309;
--og-accent-muted: #FEF3C7;
--og-success: #52B788;
--og-success-muted: #E8F5E9;
--og-danger: #F43F5E;
--og-danger-muted: #FFE4E6;
--og-gold: #EAB308;
--og-gold-muted: #FEF9C3;
/* Text */
--og-text: #2A2421;
--og-text-muted: #706259;
--og-text-light: #9E9085;
/* Borders */
--og-border: #E6DFD5;
--og-border-strong: #CDCEBF;
/* Organic Radius Shapes */
--og-radius-sm: 12px 6px 14px 8px;
--og-radius: 24px 8px 32px 12px;
--og-radius-lg: 40px 16px 48px 20px;
--og-radius-pill: 100px;
--og-radius-blob: 60% 40% 30% 70% / 60% 30% 70% 40%;
/* Fonts */
--og-font-heading: 'DM Serif Display', serif;
--og-font-body: 'Outfit', sans-serif;
/* Shadows */
--og-shadow-sm: 0 4px 20px rgba(42,36,33,0.03);
--og-shadow: 0 10px 30px rgba(42,36,33,0.06);
--og-shadow-lg: 0 20px 40px rgba(42,36,33,0.09);
/* Transition */
--og-transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body {
margin: 0;
font-family: var(--og-font-body);
color: var(--og-text);
background-color: var(--og-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.og-card {
background-color: var(--og-surface);
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius);
box-shadow: var(--og-shadow-sm);
padding: 2rem;
transition: var(--og-transition);
}
.og-card:hover {
box-shadow: var(--og-shadow);
transform: translateY(-2px);
border-color: var(--og-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--og-font-heading);
font-weight: 400;
margin: 0;
color: var(--og-text);
line-height: 1.25;
}
p { font-family: var(--og-font-body); color: var(--og-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.og-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 600;
border-radius: var(--og-radius-sm);
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--og-transition);
white-space: nowrap;
user-select: none;
}
.og-btn-primary { background-color: var(--og-primary); color: #fff; border-color: var(--og-primary); }
.og-btn-primary:hover { background-color: var(--og-primary-hover); border-color: var(--og-primary-hover); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(45,106,79,0.25); }
.og-btn-accent { background-color: var(--og-accent); color: #fff; border-color: var(--og-accent); }
.og-btn-accent:hover { background-color: var(--og-accent-hover); border-color: var(--og-accent-hover); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(217,119,6,0.25); }
.og-btn-outline { background-color: transparent; color: var(--og-text); border-color: var(--og-text); }
.og-btn-outline:hover { background-color: var(--og-surface-2); transform: translateY(-2px); }
.og-btn-ghost { background-color: transparent; color: var(--og-text-muted); border-color: transparent; }
.og-btn-ghost:hover { background-color: var(--og-surface-2); color: var(--og-text); }
.og-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.82rem; }
.og-btn-lg { padding: 0.9rem 2rem; font-size: 1rem; border-radius: var(--og-radius); }
.og-btn-block { width: 100%; }
.og-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
/* ── Form Controls ────────────── */
.og-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius-sm);
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--og-text);
background-color: var(--og-surface);
outline: none;
transition: var(--og-transition);
}
.og-input::placeholder { color: var(--og-text-light); }
.og-input:focus { border-color: var(--og-primary); background-color: #FAFBF9; }
.og-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--og-font-body);
font-weight: 700;
font-size: 0.85rem;
color: var(--og-text);
}
.og-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius-sm);
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--og-text);
background-color: var(--og-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='%23706259' 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(--og-transition);
}
.og-select:focus { border-color: var(--og-primary); }
/* ── Badges ───────────────────── */
.og-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--og-radius-pill);
font-family: var(--og-font-body);
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.og-badge-sale { background-color: var(--og-accent-muted); color: #92400E; }
.og-badge-new { background-color: var(--og-primary-muted); color: #14532D; }
.og-badge-success { background-color: var(--og-success-muted); color: #065F46; }
.og-badge-danger { background-color: var(--og-danger-muted); color: #9F1239; }
.og-badge-default { background-color: var(--og-surface-2); color: var(--og-text-muted); }
/* ── Star Rating ──────────────── */
.og-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--og-accent);
font-size: 0.85rem;
}
.og-stars-count {
font-family: var(--og-font-body);
font-size: 0.8rem;
font-weight: 500;
color: var(--og-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.og-price {
font-family: var(--og-font-heading);
font-size: 1.35rem;
color: var(--og-text);
}
.og-price-original {
font-family: var(--og-font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--og-text-light);
text-decoration: line-through;
}
.og-price-sale { color: var(--og-accent); }
/* ── Toggle Slider ────────────── */
.og-toggle { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; }
.og-toggle input { opacity: 0; width: 0; height: 0; }
.og-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--og-border); border-radius: 26px; transition: var(--og-transition); }
.og-toggle-slider::before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--og-transition); }
.og-toggle input:checked + .og-toggle-slider { background-color: var(--og-primary); }
.og-toggle input:checked + .og-toggle-slider::before { transform: translateX(22px); }
/* ── Divider ──────────────────── */
.og-divider { border: none; border-top: 1.5px solid var(--og-border); margin: 0; }
/* ── Logo ─────────────────────── */
.og-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--og-font-heading);
font-size: 1.4rem;
color: var(--og-text);
}
.og-logo-icon {
width: 38px;
height: 38px;
background-color: var(--og-primary);
border-radius: var(--og-radius-blob);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 1.25rem;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--og-primary) !important; }
.text-accent { color: var(--og-accent) !important; }
.text-success { color: var(--og-primary) !important; }
.text-danger { color: var(--og-danger) !important; }
.text-muted { color: var(--og-text-muted) !important; }
.text-light { color: var(--og-text-light) !important; }
.og-link-sm {
font-family: var(--og-font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--og-primary);
text-decoration: none;
transition: var(--og-transition);
}
.og-link-sm:hover {
color: var(--og-primary-hover);
}
/* --- COMPONENT STYLES --- */
.og-split-hero {
display: grid;
grid-template-columns: 1fr 340px;
gap: 1.75rem;
max-width: 1100px;
margin: 0 auto;
align-items: start;
}
.og-split-main {
padding: 3rem !important;
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: flex-start;
}
.og-split-title {
font-size: 2.85rem;
letter-spacing: -0.01em;
line-height: 1.15;
}
.og-split-desc {
font-size: 1.05rem;
color: var(--og-text-muted);
line-height: 1.7;
}
/* Features */
.og-split-features {
list-style: none;
padding: 0;
margin: 0.5rem 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.og-split-features li {
display: flex;
align-items: flex-start;
gap: 0.85rem;
}
.og-feat-icon {
font-size: 1.25rem;
width: 38px;
height: 38px;
background-color: var(--og-surface-2);
border-radius: var(--og-radius-blob);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.og-split-features strong {
font-family: var(--og-font-body);
font-size: 0.95rem;
font-weight: 700;
color: var(--og-text);
}
.og-split-features p {
font-size: 0.85rem;
color: var(--og-text-muted);
margin-top: 0.1rem;
}
.og-split-actions-row {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
flex-wrap: wrap;
border-top: 1.5px solid var(--og-border);
padding-top: 1.5rem;
margin-top: 0.5rem;
}
.og-split-price-box {
display: flex;
flex-direction: column;
margin-right: auto;
}
/* Sidebar Product Widget */
.og-preview-widget {
padding: 0 !important;
overflow: hidden;
}
.og-widget-image-block {
height: 270px;
background: linear-gradient(135deg, var(--og-primary-muted), #FAF7F2);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.og-widget-badge {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 3;
}
.og-widget-bot-icon {
font-size: 5rem;
z-index: 2;
transition: var(--og-transition);
}
.og-preview-widget:hover .og-widget-bot-icon {
transform: scale(1.08) rotate(4deg);
}
.og-widget-blobs {
position: absolute;
inset: 0;
pointer-events: none;
}
.og-blob-one {
position: absolute;
bottom: -10%;
right: -10%;
width: 160px;
height: 160px;
background: rgba(45,106,79,0.12);
border-radius: var(--og-radius-blob);
}
.og-blob-two {
position: absolute;
top: -10%;
left: -10%;
width: 130px;
height: 130px;
background: rgba(217,119,6,0.1);
border-radius: var(--og-radius-blob);
}
.og-widget-info {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.og-widget-title {
font-size: 1.05rem;
font-weight: 700;
}
.og-widget-stock {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
font-weight: 700;
color: var(--og-primary);
}
.og-stock-dot {
width: 6px;
height: 6px;
background-color: var(--og-primary);
border-radius: 50%;
}
@media (max-width: 900px) {
.og-split-hero { grid-template-columns: 1fr; }
.og-split-main { padding: 2rem !important; }
}
Forms
Customer Login
HTML
<div class="og-login-wrap">
<div class="og-login-card og-card">
<div class="og-login-brand">
<a href="#" class="og-login-logo">
<span class="og-logo-icon" style="font-size:0.9rem; width:28px; height:28px;">🍃</span>
<span>Organica</span>
</a>
<h2 class="og-login-title">Conscious Space</h2>
<p class="og-login-sub">Sign in to nourish your soul and check your orders.</p>
</div>
<form class="og-login-form" onsubmit="return false;">
<div class="og-form-group">
<label class="og-label" for="cust-email">Your Email Address</label>
<input type="email" id="cust-email" class="og-input" placeholder="[email protected]" value="[email protected]">
</div>
<div class="og-form-group">
<div class="og-label-row">
<label class="og-label" for="cust-pass">Password</label>
<a href="#" class="og-link-sm">Seek help?</a>
</div>
<input type="password" id="cust-pass" class="og-input" placeholder="••••••••••" value="••••••••••">
</div>
<div class="og-login-remember">
<label class="og-checkbox-label">
<input type="checkbox" class="og-checkbox" checked>
<span>Remember my essence</span>
</label>
</div>
<button type="submit" class="og-btn og-btn-primary og-btn-block og-btn-lg">Enter Space</button>
</form>
<div class="og-login-divider">
<span>or sign in with</span>
</div>
<div class="og-social-login">
<button class="og-btn og-btn-outline og-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 Session
</button>
</div>
<div class="og-login-signup">
<span>New seeker?</span> <a href="#" class="og-link-sm">Begin journey</a>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Customer Login */
/* NOTE: This component requires base.css to be included in your page. */
.og-login-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 560px;
background-color: var(--og-bg);
padding: 2rem;
}
.og-login-card {
width: 100%;
max-width: 420px;
padding: 2.5rem !important;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.og-login-brand {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.og-login-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--og-font-heading);
font-size: 1.15rem;
color: var(--og-text);
}
.og-login-title {
font-size: 1.65rem;
margin-top: 0.25rem;
}
.og-login-sub {
font-size: 0.9rem;
color: var(--og-text-muted);
}
.og-login-form {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.og-form-group {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.og-label-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.og-link-sm {
font-family: var(--og-font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--og-primary);
text-decoration: none;
transition: var(--og-transition);
}
.og-link-sm:hover {
color: var(--og-primary-hover);
}
.og-login-remember {
display: flex;
align-items: center;
}
.og-checkbox-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--og-font-body);
font-size: 0.85rem;
font-weight: 600;
color: var(--og-text-muted);
cursor: pointer;
user-select: none;
}
.og-checkbox {
width: 16px;
height: 16px;
accent-color: var(--og-primary);
cursor: pointer;
}
.og-login-divider {
display: flex;
align-items: center;
text-align: center;
color: var(--og-text-light);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.og-login-divider::before, .og-login-divider::after {
content: '';
flex: 1;
border-bottom: 1.5px solid var(--og-border);
}
.og-login-divider:not(:empty)::before { margin-right: .75em; }
.og-login-divider:not(:empty)::after { margin-left: .75em; }
.og-login-signup {
text-align: center;
font-size: 0.85rem;
font-weight: 600;
color: var(--og-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=DM+Serif+Display&family=Outfit:wght@300;400;500;600;700;800&display=swap');
/* ===========================
Organic Shape Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--og-bg: #FAF7F2;
--og-surface: #FFFFFF;
--og-surface-2: #F3EEE5;
--og-surface-dark: #2A2421;
/* Brand Palette */
--og-primary: #2D6A4F;
--og-primary-hover: #1B4332;
--og-primary-muted: #D8F3DC;
--og-accent: #D97706;
--og-accent-hover: #B45309;
--og-accent-muted: #FEF3C7;
--og-success: #52B788;
--og-success-muted: #E8F5E9;
--og-danger: #F43F5E;
--og-danger-muted: #FFE4E6;
--og-gold: #EAB308;
--og-gold-muted: #FEF9C3;
/* Text */
--og-text: #2A2421;
--og-text-muted: #706259;
--og-text-light: #9E9085;
/* Borders */
--og-border: #E6DFD5;
--og-border-strong: #CDCEBF;
/* Organic Radius Shapes */
--og-radius-sm: 12px 6px 14px 8px;
--og-radius: 24px 8px 32px 12px;
--og-radius-lg: 40px 16px 48px 20px;
--og-radius-pill: 100px;
--og-radius-blob: 60% 40% 30% 70% / 60% 30% 70% 40%;
/* Fonts */
--og-font-heading: 'DM Serif Display', serif;
--og-font-body: 'Outfit', sans-serif;
/* Shadows */
--og-shadow-sm: 0 4px 20px rgba(42,36,33,0.03);
--og-shadow: 0 10px 30px rgba(42,36,33,0.06);
--og-shadow-lg: 0 20px 40px rgba(42,36,33,0.09);
/* Transition */
--og-transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body {
margin: 0;
font-family: var(--og-font-body);
color: var(--og-text);
background-color: var(--og-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.og-card {
background-color: var(--og-surface);
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius);
box-shadow: var(--og-shadow-sm);
padding: 2rem;
transition: var(--og-transition);
}
.og-card:hover {
box-shadow: var(--og-shadow);
transform: translateY(-2px);
border-color: var(--og-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--og-font-heading);
font-weight: 400;
margin: 0;
color: var(--og-text);
line-height: 1.25;
}
p { font-family: var(--og-font-body); color: var(--og-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.og-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 600;
border-radius: var(--og-radius-sm);
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--og-transition);
white-space: nowrap;
user-select: none;
}
.og-btn-primary { background-color: var(--og-primary); color: #fff; border-color: var(--og-primary); }
.og-btn-primary:hover { background-color: var(--og-primary-hover); border-color: var(--og-primary-hover); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(45,106,79,0.25); }
.og-btn-accent { background-color: var(--og-accent); color: #fff; border-color: var(--og-accent); }
.og-btn-accent:hover { background-color: var(--og-accent-hover); border-color: var(--og-accent-hover); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(217,119,6,0.25); }
.og-btn-outline { background-color: transparent; color: var(--og-text); border-color: var(--og-text); }
.og-btn-outline:hover { background-color: var(--og-surface-2); transform: translateY(-2px); }
.og-btn-ghost { background-color: transparent; color: var(--og-text-muted); border-color: transparent; }
.og-btn-ghost:hover { background-color: var(--og-surface-2); color: var(--og-text); }
.og-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.82rem; }
.og-btn-lg { padding: 0.9rem 2rem; font-size: 1rem; border-radius: var(--og-radius); }
.og-btn-block { width: 100%; }
.og-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
/* ── Form Controls ────────────── */
.og-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius-sm);
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--og-text);
background-color: var(--og-surface);
outline: none;
transition: var(--og-transition);
}
.og-input::placeholder { color: var(--og-text-light); }
.og-input:focus { border-color: var(--og-primary); background-color: #FAFBF9; }
.og-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--og-font-body);
font-weight: 700;
font-size: 0.85rem;
color: var(--og-text);
}
.og-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius-sm);
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--og-text);
background-color: var(--og-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='%23706259' 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(--og-transition);
}
.og-select:focus { border-color: var(--og-primary); }
/* ── Badges ───────────────────── */
.og-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--og-radius-pill);
font-family: var(--og-font-body);
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.og-badge-sale { background-color: var(--og-accent-muted); color: #92400E; }
.og-badge-new { background-color: var(--og-primary-muted); color: #14532D; }
.og-badge-success { background-color: var(--og-success-muted); color: #065F46; }
.og-badge-danger { background-color: var(--og-danger-muted); color: #9F1239; }
.og-badge-default { background-color: var(--og-surface-2); color: var(--og-text-muted); }
/* ── Star Rating ──────────────── */
.og-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--og-accent);
font-size: 0.85rem;
}
.og-stars-count {
font-family: var(--og-font-body);
font-size: 0.8rem;
font-weight: 500;
color: var(--og-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.og-price {
font-family: var(--og-font-heading);
font-size: 1.35rem;
color: var(--og-text);
}
.og-price-original {
font-family: var(--og-font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--og-text-light);
text-decoration: line-through;
}
.og-price-sale { color: var(--og-accent); }
/* ── Toggle Slider ────────────── */
.og-toggle { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; }
.og-toggle input { opacity: 0; width: 0; height: 0; }
.og-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--og-border); border-radius: 26px; transition: var(--og-transition); }
.og-toggle-slider::before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--og-transition); }
.og-toggle input:checked + .og-toggle-slider { background-color: var(--og-primary); }
.og-toggle input:checked + .og-toggle-slider::before { transform: translateX(22px); }
/* ── Divider ──────────────────── */
.og-divider { border: none; border-top: 1.5px solid var(--og-border); margin: 0; }
/* ── Logo ─────────────────────── */
.og-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--og-font-heading);
font-size: 1.4rem;
color: var(--og-text);
}
.og-logo-icon {
width: 38px;
height: 38px;
background-color: var(--og-primary);
border-radius: var(--og-radius-blob);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 1.25rem;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--og-primary) !important; }
.text-accent { color: var(--og-accent) !important; }
.text-success { color: var(--og-primary) !important; }
.text-danger { color: var(--og-danger) !important; }
.text-muted { color: var(--og-text-muted) !important; }
.text-light { color: var(--og-text-light) !important; }
.og-link-sm {
font-family: var(--og-font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--og-primary);
text-decoration: none;
transition: var(--og-transition);
}
.og-link-sm:hover {
color: var(--og-primary-hover);
}
/* --- COMPONENT STYLES --- */
.og-login-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 560px;
background-color: var(--og-bg);
padding: 2rem;
}
.og-login-card {
width: 100%;
max-width: 420px;
padding: 2.5rem !important;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.og-login-brand {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.og-login-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--og-font-heading);
font-size: 1.15rem;
color: var(--og-text);
}
.og-login-title {
font-size: 1.65rem;
margin-top: 0.25rem;
}
.og-login-sub {
font-size: 0.9rem;
color: var(--og-text-muted);
}
.og-login-form {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.og-form-group {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.og-label-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.og-link-sm {
font-family: var(--og-font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--og-primary);
text-decoration: none;
transition: var(--og-transition);
}
.og-link-sm:hover {
color: var(--og-primary-hover);
}
.og-login-remember {
display: flex;
align-items: center;
}
.og-checkbox-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--og-font-body);
font-size: 0.85rem;
font-weight: 600;
color: var(--og-text-muted);
cursor: pointer;
user-select: none;
}
.og-checkbox {
width: 16px;
height: 16px;
accent-color: var(--og-primary);
cursor: pointer;
}
.og-login-divider {
display: flex;
align-items: center;
text-align: center;
color: var(--og-text-light);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.og-login-divider::before, .og-login-divider::after {
content: '';
flex: 1;
border-bottom: 1.5px solid var(--og-border);
}
.og-login-divider:not(:empty)::before { margin-right: .75em; }
.og-login-divider:not(:empty)::after { margin-left: .75em; }
.og-login-signup {
text-align: center;
font-size: 0.85rem;
font-weight: 600;
color: var(--og-text-muted);
margin-top: 0.5rem;
}
Shipping & Billing
HTML
<div class="og-settings-panel">
<div class="og-settings-header">
<div>
<h3>Earthy Preferences</h3>
<p>Modify your conscious delivery and billing configuration metrics.</p>
</div>
<div class="og-settings-acts">
<button class="og-btn og-btn-outline og-btn-sm">Discard</button>
<button class="og-btn og-btn-primary og-btn-sm">Apply Sage</button>
</div>
</div>
<div class="og-settings-body">
<section class="og-settings-sec og-card">
<h4>Delivery Coordinates</h4>
<p>Where we will ship your glass botanical vials.</p>
<hr class="og-divider">
<div class="og-settings-grid">
<div class="og-form-group">
<label class="og-label" for="shp-first">First Name</label>
<input type="text" id="shp-first" class="og-input" value="Sarah">
</div>
<div class="og-form-group">
<label class="og-label" for="shp-last">Last Name</label>
<input type="text" id="shp-last" class="og-input" value="Jenkins">
</div>
<div class="og-form-group" style="grid-column: span 2;">
<label class="og-label" for="shp-addr">Natural Address</label>
<input type="text" id="shp-addr" class="og-input" value="84 Willow Springs Path, Apt 2C">
</div>
<div class="og-form-group">
<label class="og-label" for="shp-city">City</label>
<input type="text" id="shp-city" class="og-input" value="Portland">
</div>
<div class="og-form-group">
<label class="og-label" for="shp-zip">ZIP / Postal Code</label>
<input type="text" id="shp-zip" class="og-input" value="97201">
</div>
</div>
<div class="og-form-inline">
<label class="og-checkbox-label">
<input type="checkbox" class="og-checkbox" checked>
<span>Keep as default coordinate</span>
</label>
</div>
</section>
<section class="og-settings-sec og-card">
<h4>Nourish Preferences</h4>
<p>Manage how you billing is verification checked.</p>
<hr class="og-divider">
<div class="og-toggle-list">
<div class="og-toggle-row">
<div>
<div class="og-toggle-label">Billing Identical</div>
<div class="og-toggle-desc">Use coordinate profile for payment calculations.</div>
</div>
<label class="og-toggle"><input type="checkbox" checked><span class="og-toggle-slider"></span></label>
</div>
<hr class="og-divider">
<div class="og-toggle-row">
<div>
<div class="og-toggle-label">Secure One-Click Aura</div>
<div class="og-toggle-desc">Check out instantly with encrypted Stripe token.</div>
</div>
<label class="og-toggle"><input type="checkbox"><span class="og-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. */
.og-settings-panel {
max-width: 860px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.og-settings-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.og-settings-header h3 {
font-size: 1.35rem;
margin-bottom: 0.3rem;
}
.og-settings-acts {
display: flex;
gap: 0.75rem;
flex-shrink: 0;
}
.og-settings-body {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.og-settings-sec {
padding: 2rem !important;
display: flex;
flex-direction: column;
gap: 1.25rem;
border-radius: var(--og-radius-lg) !important;
}
.og-settings-sec h4 {
font-size: 1.15rem;
}
.og-settings-sec > p {
font-size: 0.88rem;
margin-top: -0.75rem;
}
.og-settings-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.og-form-inline {
display: flex;
align-items: center;
margin-top: 0.5rem;
}
.og-toggle-list {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.og-toggle-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
}
.og-toggle-label {
font-family: var(--og-font-body);
font-size: 0.92rem;
font-weight: 700;
color: var(--og-text);
margin-bottom: 0.2rem;
}
.og-toggle-desc {
font-size: 0.83rem;
color: var(--og-text-muted);
font-weight: 500;
line-height: 1.5;
}
@media (max-width: 600px) {
.og-settings-grid { grid-template-columns: 1fr; }
.og-settings-grid > div { grid-column: span 1 !important; }
.og-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=DM+Serif+Display&family=Outfit:wght@300;400;500;600;700;800&display=swap');
/* ===========================
Organic Shape Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--og-bg: #FAF7F2;
--og-surface: #FFFFFF;
--og-surface-2: #F3EEE5;
--og-surface-dark: #2A2421;
/* Brand Palette */
--og-primary: #2D6A4F;
--og-primary-hover: #1B4332;
--og-primary-muted: #D8F3DC;
--og-accent: #D97706;
--og-accent-hover: #B45309;
--og-accent-muted: #FEF3C7;
--og-success: #52B788;
--og-success-muted: #E8F5E9;
--og-danger: #F43F5E;
--og-danger-muted: #FFE4E6;
--og-gold: #EAB308;
--og-gold-muted: #FEF9C3;
/* Text */
--og-text: #2A2421;
--og-text-muted: #706259;
--og-text-light: #9E9085;
/* Borders */
--og-border: #E6DFD5;
--og-border-strong: #CDCEBF;
/* Organic Radius Shapes */
--og-radius-sm: 12px 6px 14px 8px;
--og-radius: 24px 8px 32px 12px;
--og-radius-lg: 40px 16px 48px 20px;
--og-radius-pill: 100px;
--og-radius-blob: 60% 40% 30% 70% / 60% 30% 70% 40%;
/* Fonts */
--og-font-heading: 'DM Serif Display', serif;
--og-font-body: 'Outfit', sans-serif;
/* Shadows */
--og-shadow-sm: 0 4px 20px rgba(42,36,33,0.03);
--og-shadow: 0 10px 30px rgba(42,36,33,0.06);
--og-shadow-lg: 0 20px 40px rgba(42,36,33,0.09);
/* Transition */
--og-transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body {
margin: 0;
font-family: var(--og-font-body);
color: var(--og-text);
background-color: var(--og-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.og-card {
background-color: var(--og-surface);
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius);
box-shadow: var(--og-shadow-sm);
padding: 2rem;
transition: var(--og-transition);
}
.og-card:hover {
box-shadow: var(--og-shadow);
transform: translateY(-2px);
border-color: var(--og-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--og-font-heading);
font-weight: 400;
margin: 0;
color: var(--og-text);
line-height: 1.25;
}
p { font-family: var(--og-font-body); color: var(--og-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.og-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 600;
border-radius: var(--og-radius-sm);
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--og-transition);
white-space: nowrap;
user-select: none;
}
.og-btn-primary { background-color: var(--og-primary); color: #fff; border-color: var(--og-primary); }
.og-btn-primary:hover { background-color: var(--og-primary-hover); border-color: var(--og-primary-hover); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(45,106,79,0.25); }
.og-btn-accent { background-color: var(--og-accent); color: #fff; border-color: var(--og-accent); }
.og-btn-accent:hover { background-color: var(--og-accent-hover); border-color: var(--og-accent-hover); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(217,119,6,0.25); }
.og-btn-outline { background-color: transparent; color: var(--og-text); border-color: var(--og-text); }
.og-btn-outline:hover { background-color: var(--og-surface-2); transform: translateY(-2px); }
.og-btn-ghost { background-color: transparent; color: var(--og-text-muted); border-color: transparent; }
.og-btn-ghost:hover { background-color: var(--og-surface-2); color: var(--og-text); }
.og-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.82rem; }
.og-btn-lg { padding: 0.9rem 2rem; font-size: 1rem; border-radius: var(--og-radius); }
.og-btn-block { width: 100%; }
.og-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
/* ── Form Controls ────────────── */
.og-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius-sm);
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--og-text);
background-color: var(--og-surface);
outline: none;
transition: var(--og-transition);
}
.og-input::placeholder { color: var(--og-text-light); }
.og-input:focus { border-color: var(--og-primary); background-color: #FAFBF9; }
.og-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--og-font-body);
font-weight: 700;
font-size: 0.85rem;
color: var(--og-text);
}
.og-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius-sm);
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--og-text);
background-color: var(--og-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='%23706259' 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(--og-transition);
}
.og-select:focus { border-color: var(--og-primary); }
/* ── Badges ───────────────────── */
.og-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--og-radius-pill);
font-family: var(--og-font-body);
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.og-badge-sale { background-color: var(--og-accent-muted); color: #92400E; }
.og-badge-new { background-color: var(--og-primary-muted); color: #14532D; }
.og-badge-success { background-color: var(--og-success-muted); color: #065F46; }
.og-badge-danger { background-color: var(--og-danger-muted); color: #9F1239; }
.og-badge-default { background-color: var(--og-surface-2); color: var(--og-text-muted); }
/* ── Star Rating ──────────────── */
.og-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--og-accent);
font-size: 0.85rem;
}
.og-stars-count {
font-family: var(--og-font-body);
font-size: 0.8rem;
font-weight: 500;
color: var(--og-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.og-price {
font-family: var(--og-font-heading);
font-size: 1.35rem;
color: var(--og-text);
}
.og-price-original {
font-family: var(--og-font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--og-text-light);
text-decoration: line-through;
}
.og-price-sale { color: var(--og-accent); }
/* ── Toggle Slider ────────────── */
.og-toggle { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; }
.og-toggle input { opacity: 0; width: 0; height: 0; }
.og-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--og-border); border-radius: 26px; transition: var(--og-transition); }
.og-toggle-slider::before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--og-transition); }
.og-toggle input:checked + .og-toggle-slider { background-color: var(--og-primary); }
.og-toggle input:checked + .og-toggle-slider::before { transform: translateX(22px); }
/* ── Divider ──────────────────── */
.og-divider { border: none; border-top: 1.5px solid var(--og-border); margin: 0; }
/* ── Logo ─────────────────────── */
.og-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--og-font-heading);
font-size: 1.4rem;
color: var(--og-text);
}
.og-logo-icon {
width: 38px;
height: 38px;
background-color: var(--og-primary);
border-radius: var(--og-radius-blob);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 1.25rem;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--og-primary) !important; }
.text-accent { color: var(--og-accent) !important; }
.text-success { color: var(--og-primary) !important; }
.text-danger { color: var(--og-danger) !important; }
.text-muted { color: var(--og-text-muted) !important; }
.text-light { color: var(--og-text-light) !important; }
.og-link-sm {
font-family: var(--og-font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--og-primary);
text-decoration: none;
transition: var(--og-transition);
}
.og-link-sm:hover {
color: var(--og-primary-hover);
}
/* --- COMPONENT STYLES --- */
.og-settings-panel {
max-width: 860px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.og-settings-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.og-settings-header h3 {
font-size: 1.35rem;
margin-bottom: 0.3rem;
}
.og-settings-acts {
display: flex;
gap: 0.75rem;
flex-shrink: 0;
}
.og-settings-body {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.og-settings-sec {
padding: 2rem !important;
display: flex;
flex-direction: column;
gap: 1.25rem;
border-radius: var(--og-radius-lg) !important;
}
.og-settings-sec h4 {
font-size: 1.15rem;
}
.og-settings-sec > p {
font-size: 0.88rem;
margin-top: -0.75rem;
}
.og-settings-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.og-form-inline {
display: flex;
align-items: center;
margin-top: 0.5rem;
}
.og-toggle-list {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.og-toggle-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
}
.og-toggle-label {
font-family: var(--og-font-body);
font-size: 0.92rem;
font-weight: 700;
color: var(--og-text);
margin-bottom: 0.2rem;
}
.og-toggle-desc {
font-size: 0.83rem;
color: var(--og-text-muted);
font-weight: 500;
line-height: 1.5;
}
@media (max-width: 600px) {
.og-settings-grid { grid-template-columns: 1fr; }
.og-settings-grid > div { grid-column: span 1 !important; }
.og-settings-header { flex-direction: column; }
}
Cards
Product Cards
HTML
<div class="og-product-grid">
<!-- Product 1 -->
<div class="og-product-card og-card">
<div class="og-product-media">
<span class="og-badge og-badge-sale og-product-badge">SALE −15%</span>
<div class="og-product-placeholder">🧴</div>
<div class="og-product-hover-actions">
<button class="og-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="og-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="og-product-details">
<span class="og-product-cat text-muted">Aromatherapy</span>
<h4 class="og-product-title">Rose Water Floral Aura Hydrator</h4>
<div class="og-stars">
⭐⭐⭐⭐⭐
<span class="og-stars-count">(94)</span>
</div>
<div class="og-product-price-row">
<div class="og-price-box">
<span class="og-price og-price-sale">$28.00</span>
<span class="og-price-original">$34.00</span>
</div>
<button class="og-btn og-btn-primary og-btn-sm og-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="og-product-card og-card og-product-soldout">
<div class="og-product-media">
<span class="og-badge og-badge-default og-product-badge">Harvested</span>
<div class="og-product-placeholder">🌿</div>
</div>
<div class="og-product-details">
<span class="og-product-cat text-muted">Extracts</span>
<h4 class="og-product-title">Eucalyptus Reviving Tea Extract</h4>
<div class="og-stars">
⭐⭐⭐⭐☆
<span class="og-stars-count">(51)</span>
</div>
<div class="og-product-price-row">
<div class="og-price-box">
<span class="og-price">$18.00</span>
</div>
<button class="og-btn og-btn-outline og-btn-sm" disabled style="cursor:not-allowed;">Sold Out</button>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="og-product-card og-card">
<div class="og-product-media">
<span class="og-badge og-badge-new og-product-badge">New Extract</span>
<div class="og-product-placeholder">🧪</div>
<div class="og-product-hover-actions">
<button class="og-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="og-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="og-product-details">
<span class="og-product-cat text-muted">Clay Masks</span>
<h4 class="og-product-title">French Green Clay Reviving Mask</h4>
<div class="og-stars">
⭐⭐⭐⭐⭐
<span class="og-stars-count">(24)</span>
</div>
<div class="og-product-price-row">
<div class="og-price-box">
<span class="og-price">$38.00</span>
</div>
<button class="og-btn og-btn-primary og-btn-sm og-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. */
.og-product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1100px;
margin: 0 auto;
}
.og-product-card {
padding: 0 !important;
overflow: hidden;
display: flex;
flex-direction: column;
}
.og-product-media {
height: 240px;
background-color: var(--og-surface-2);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.og-product-placeholder {
font-size: 5.5rem;
filter: drop-shadow(0 8px 16px rgba(42,36,33,0.06));
transition: var(--og-transition);
}
.og-product-card:hover .og-product-placeholder {
transform: scale(1.08) rotate(3deg);
}
.og-product-badge {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 2;
}
.og-product-hover-actions {
position: absolute;
inset: 0;
background-color: rgba(42,36,33,0.3);
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
opacity: 0;
pointer-events: none;
transition: var(--og-transition);
}
.og-product-card:hover .og-product-hover-actions {
opacity: 1;
pointer-events: auto;
}
.og-product-action-btn {
width: 44px;
height: 44px;
border-radius: var(--og-radius-blob);
border: none;
background-color: var(--og-surface);
color: var(--og-text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--og-transition);
box-shadow: var(--og-shadow-sm);
}
.og-product-action-btn:hover {
background-color: var(--og-primary);
color: #fff;
transform: translateY(-2px) rotate(5deg);
}
.og-product-details {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
flex: 1;
}
.og-product-cat {
font-family: var(--og-font-body);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.og-product-title {
font-size: 1.1rem;
color: var(--og-text);
line-height: 1.35;
height: 2.7em;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.og-product-price-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.5rem;
border-top: 1.5px solid var(--og-border);
padding-top: 1rem;
}
.og-price-box {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
/* Soldout State */
.og-product-soldout .og-product-placeholder {
opacity: 0.4;
}
.og-product-soldout .og-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=DM+Serif+Display&family=Outfit:wght@300;400;500;600;700;800&display=swap');
/* ===========================
Organic Shape Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--og-bg: #FAF7F2;
--og-surface: #FFFFFF;
--og-surface-2: #F3EEE5;
--og-surface-dark: #2A2421;
/* Brand Palette */
--og-primary: #2D6A4F;
--og-primary-hover: #1B4332;
--og-primary-muted: #D8F3DC;
--og-accent: #D97706;
--og-accent-hover: #B45309;
--og-accent-muted: #FEF3C7;
--og-success: #52B788;
--og-success-muted: #E8F5E9;
--og-danger: #F43F5E;
--og-danger-muted: #FFE4E6;
--og-gold: #EAB308;
--og-gold-muted: #FEF9C3;
/* Text */
--og-text: #2A2421;
--og-text-muted: #706259;
--og-text-light: #9E9085;
/* Borders */
--og-border: #E6DFD5;
--og-border-strong: #CDCEBF;
/* Organic Radius Shapes */
--og-radius-sm: 12px 6px 14px 8px;
--og-radius: 24px 8px 32px 12px;
--og-radius-lg: 40px 16px 48px 20px;
--og-radius-pill: 100px;
--og-radius-blob: 60% 40% 30% 70% / 60% 30% 70% 40%;
/* Fonts */
--og-font-heading: 'DM Serif Display', serif;
--og-font-body: 'Outfit', sans-serif;
/* Shadows */
--og-shadow-sm: 0 4px 20px rgba(42,36,33,0.03);
--og-shadow: 0 10px 30px rgba(42,36,33,0.06);
--og-shadow-lg: 0 20px 40px rgba(42,36,33,0.09);
/* Transition */
--og-transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body {
margin: 0;
font-family: var(--og-font-body);
color: var(--og-text);
background-color: var(--og-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.og-card {
background-color: var(--og-surface);
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius);
box-shadow: var(--og-shadow-sm);
padding: 2rem;
transition: var(--og-transition);
}
.og-card:hover {
box-shadow: var(--og-shadow);
transform: translateY(-2px);
border-color: var(--og-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--og-font-heading);
font-weight: 400;
margin: 0;
color: var(--og-text);
line-height: 1.25;
}
p { font-family: var(--og-font-body); color: var(--og-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.og-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 600;
border-radius: var(--og-radius-sm);
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--og-transition);
white-space: nowrap;
user-select: none;
}
.og-btn-primary { background-color: var(--og-primary); color: #fff; border-color: var(--og-primary); }
.og-btn-primary:hover { background-color: var(--og-primary-hover); border-color: var(--og-primary-hover); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(45,106,79,0.25); }
.og-btn-accent { background-color: var(--og-accent); color: #fff; border-color: var(--og-accent); }
.og-btn-accent:hover { background-color: var(--og-accent-hover); border-color: var(--og-accent-hover); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(217,119,6,0.25); }
.og-btn-outline { background-color: transparent; color: var(--og-text); border-color: var(--og-text); }
.og-btn-outline:hover { background-color: var(--og-surface-2); transform: translateY(-2px); }
.og-btn-ghost { background-color: transparent; color: var(--og-text-muted); border-color: transparent; }
.og-btn-ghost:hover { background-color: var(--og-surface-2); color: var(--og-text); }
.og-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.82rem; }
.og-btn-lg { padding: 0.9rem 2rem; font-size: 1rem; border-radius: var(--og-radius); }
.og-btn-block { width: 100%; }
.og-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
/* ── Form Controls ────────────── */
.og-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius-sm);
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--og-text);
background-color: var(--og-surface);
outline: none;
transition: var(--og-transition);
}
.og-input::placeholder { color: var(--og-text-light); }
.og-input:focus { border-color: var(--og-primary); background-color: #FAFBF9; }
.og-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--og-font-body);
font-weight: 700;
font-size: 0.85rem;
color: var(--og-text);
}
.og-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius-sm);
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--og-text);
background-color: var(--og-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='%23706259' 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(--og-transition);
}
.og-select:focus { border-color: var(--og-primary); }
/* ── Badges ───────────────────── */
.og-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--og-radius-pill);
font-family: var(--og-font-body);
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.og-badge-sale { background-color: var(--og-accent-muted); color: #92400E; }
.og-badge-new { background-color: var(--og-primary-muted); color: #14532D; }
.og-badge-success { background-color: var(--og-success-muted); color: #065F46; }
.og-badge-danger { background-color: var(--og-danger-muted); color: #9F1239; }
.og-badge-default { background-color: var(--og-surface-2); color: var(--og-text-muted); }
/* ── Star Rating ──────────────── */
.og-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--og-accent);
font-size: 0.85rem;
}
.og-stars-count {
font-family: var(--og-font-body);
font-size: 0.8rem;
font-weight: 500;
color: var(--og-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.og-price {
font-family: var(--og-font-heading);
font-size: 1.35rem;
color: var(--og-text);
}
.og-price-original {
font-family: var(--og-font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--og-text-light);
text-decoration: line-through;
}
.og-price-sale { color: var(--og-accent); }
/* ── Toggle Slider ────────────── */
.og-toggle { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; }
.og-toggle input { opacity: 0; width: 0; height: 0; }
.og-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--og-border); border-radius: 26px; transition: var(--og-transition); }
.og-toggle-slider::before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--og-transition); }
.og-toggle input:checked + .og-toggle-slider { background-color: var(--og-primary); }
.og-toggle input:checked + .og-toggle-slider::before { transform: translateX(22px); }
/* ── Divider ──────────────────── */
.og-divider { border: none; border-top: 1.5px solid var(--og-border); margin: 0; }
/* ── Logo ─────────────────────── */
.og-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--og-font-heading);
font-size: 1.4rem;
color: var(--og-text);
}
.og-logo-icon {
width: 38px;
height: 38px;
background-color: var(--og-primary);
border-radius: var(--og-radius-blob);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 1.25rem;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--og-primary) !important; }
.text-accent { color: var(--og-accent) !important; }
.text-success { color: var(--og-primary) !important; }
.text-danger { color: var(--og-danger) !important; }
.text-muted { color: var(--og-text-muted) !important; }
.text-light { color: var(--og-text-light) !important; }
.og-link-sm {
font-family: var(--og-font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--og-primary);
text-decoration: none;
transition: var(--og-transition);
}
.og-link-sm:hover {
color: var(--og-primary-hover);
}
/* --- COMPONENT STYLES --- */
.og-product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1100px;
margin: 0 auto;
}
.og-product-card {
padding: 0 !important;
overflow: hidden;
display: flex;
flex-direction: column;
}
.og-product-media {
height: 240px;
background-color: var(--og-surface-2);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.og-product-placeholder {
font-size: 5.5rem;
filter: drop-shadow(0 8px 16px rgba(42,36,33,0.06));
transition: var(--og-transition);
}
.og-product-card:hover .og-product-placeholder {
transform: scale(1.08) rotate(3deg);
}
.og-product-badge {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 2;
}
.og-product-hover-actions {
position: absolute;
inset: 0;
background-color: rgba(42,36,33,0.3);
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
opacity: 0;
pointer-events: none;
transition: var(--og-transition);
}
.og-product-card:hover .og-product-hover-actions {
opacity: 1;
pointer-events: auto;
}
.og-product-action-btn {
width: 44px;
height: 44px;
border-radius: var(--og-radius-blob);
border: none;
background-color: var(--og-surface);
color: var(--og-text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--og-transition);
box-shadow: var(--og-shadow-sm);
}
.og-product-action-btn:hover {
background-color: var(--og-primary);
color: #fff;
transform: translateY(-2px) rotate(5deg);
}
.og-product-details {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
flex: 1;
}
.og-product-cat {
font-family: var(--og-font-body);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.og-product-title {
font-size: 1.1rem;
color: var(--og-text);
line-height: 1.35;
height: 2.7em;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.og-product-price-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.5rem;
border-top: 1.5px solid var(--og-border);
padding-top: 1rem;
}
.og-price-box {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
/* Soldout State */
.og-product-soldout .og-product-placeholder {
opacity: 0.4;
}
.og-product-soldout .og-product-details {
opacity: 0.75;
}
Store Metrics
HTML
<div class="og-stats-grid">
<!-- Stat 1 -->
<div class="og-stat-card og-card">
<div class="og-stat-head">
<div class="og-stat-ico" style="background:var(--og-primary-muted); color:var(--og-primary);">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
</div>
<span class="og-badge og-badge-success">▲ 14.2%</span>
</div>
<div class="og-stat-val">$18,490</div>
<div class="og-stat-lbl">Botanical Revenue</div>
<div class="og-stat-bar-wrap">
<div class="og-stat-bar" style="width:78%; background:var(--og-primary);"></div>
</div>
</div>
<!-- Stat 2 -->
<div class="og-stat-card og-card">
<div class="og-stat-head">
<div class="og-stat-ico" style="background:var(--og-success-muted); color:var(--og-primary);">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
</div>
<span class="og-badge og-badge-success">▲ 1.8%</span>
</div>
<div class="og-stat-val">4.12%</div>
<div class="og-stat-lbl">Conscious CR</div>
<div class="og-stat-bar-wrap">
<div class="og-stat-bar" style="width:62%; background:var(--og-primary);"></div>
</div>
</div>
<!-- Stat 3 -->
<div class="og-stat-card og-card">
<div class="og-stat-head">
<div class="og-stat-ico" style="background:var(--og-accent-muted); color:var(--og-accent);">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
</div>
<span class="og-badge og-badge-default">Eco</span>
</div>
<div class="og-stat-val">$72.80</div>
<div class="og-stat-lbl">Average Basket</div>
<div class="og-stat-bar-wrap">
<div class="og-stat-bar" style="width:45%; background:var(--og-accent);"></div>
</div>
</div>
<!-- Stat 4 -->
<div class="og-stat-card og-card">
<div class="og-stat-head">
<div class="og-stat-ico" style="background:var(--og-danger-muted); color:var(--og-danger);">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</div>
<span class="og-badge og-badge-danger">▼ 2.4%</span>
</div>
<div class="og-stat-val">19.2%</div>
<div class="og-stat-lbl">Aura Bounce Rate</div>
<div class="og-stat-bar-wrap">
<div class="og-stat-bar" style="width:28%; background:var(--og-danger);"></div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Store Metrics */
/* NOTE: This component requires base.css to be included in your page. */
.og-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
max-width: 1100px;
margin: 0 auto;
}
.og-stat-card {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 1.5rem !important;
border-radius: var(--og-radius-lg) !important;
}
.og-stat-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.15rem;
}
.og-stat-ico {
width: 36px;
height: 36px;
border-radius: var(--og-radius-blob);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.og-stat-val {
font-family: var(--og-font-heading);
font-size: 2rem;
color: var(--og-text);
letter-spacing: -0.02em;
line-height: 1;
}
.og-stat-lbl {
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--og-text-light);
}
.og-stat-bar-wrap {
height: 4px;
background-color: var(--og-border);
border-radius: 4px;
overflow: hidden;
margin-top: 0.5rem;
}
.og-stat-bar {
height: 100%;
border-radius: 4px;
transition: width 0.6s ease;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Outfit:wght@300;400;500;600;700;800&display=swap');
/* ===========================
Organic Shape Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--og-bg: #FAF7F2;
--og-surface: #FFFFFF;
--og-surface-2: #F3EEE5;
--og-surface-dark: #2A2421;
/* Brand Palette */
--og-primary: #2D6A4F;
--og-primary-hover: #1B4332;
--og-primary-muted: #D8F3DC;
--og-accent: #D97706;
--og-accent-hover: #B45309;
--og-accent-muted: #FEF3C7;
--og-success: #52B788;
--og-success-muted: #E8F5E9;
--og-danger: #F43F5E;
--og-danger-muted: #FFE4E6;
--og-gold: #EAB308;
--og-gold-muted: #FEF9C3;
/* Text */
--og-text: #2A2421;
--og-text-muted: #706259;
--og-text-light: #9E9085;
/* Borders */
--og-border: #E6DFD5;
--og-border-strong: #CDCEBF;
/* Organic Radius Shapes */
--og-radius-sm: 12px 6px 14px 8px;
--og-radius: 24px 8px 32px 12px;
--og-radius-lg: 40px 16px 48px 20px;
--og-radius-pill: 100px;
--og-radius-blob: 60% 40% 30% 70% / 60% 30% 70% 40%;
/* Fonts */
--og-font-heading: 'DM Serif Display', serif;
--og-font-body: 'Outfit', sans-serif;
/* Shadows */
--og-shadow-sm: 0 4px 20px rgba(42,36,33,0.03);
--og-shadow: 0 10px 30px rgba(42,36,33,0.06);
--og-shadow-lg: 0 20px 40px rgba(42,36,33,0.09);
/* Transition */
--og-transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body {
margin: 0;
font-family: var(--og-font-body);
color: var(--og-text);
background-color: var(--og-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.og-card {
background-color: var(--og-surface);
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius);
box-shadow: var(--og-shadow-sm);
padding: 2rem;
transition: var(--og-transition);
}
.og-card:hover {
box-shadow: var(--og-shadow);
transform: translateY(-2px);
border-color: var(--og-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--og-font-heading);
font-weight: 400;
margin: 0;
color: var(--og-text);
line-height: 1.25;
}
p { font-family: var(--og-font-body); color: var(--og-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.og-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 600;
border-radius: var(--og-radius-sm);
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--og-transition);
white-space: nowrap;
user-select: none;
}
.og-btn-primary { background-color: var(--og-primary); color: #fff; border-color: var(--og-primary); }
.og-btn-primary:hover { background-color: var(--og-primary-hover); border-color: var(--og-primary-hover); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(45,106,79,0.25); }
.og-btn-accent { background-color: var(--og-accent); color: #fff; border-color: var(--og-accent); }
.og-btn-accent:hover { background-color: var(--og-accent-hover); border-color: var(--og-accent-hover); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(217,119,6,0.25); }
.og-btn-outline { background-color: transparent; color: var(--og-text); border-color: var(--og-text); }
.og-btn-outline:hover { background-color: var(--og-surface-2); transform: translateY(-2px); }
.og-btn-ghost { background-color: transparent; color: var(--og-text-muted); border-color: transparent; }
.og-btn-ghost:hover { background-color: var(--og-surface-2); color: var(--og-text); }
.og-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.82rem; }
.og-btn-lg { padding: 0.9rem 2rem; font-size: 1rem; border-radius: var(--og-radius); }
.og-btn-block { width: 100%; }
.og-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
/* ── Form Controls ────────────── */
.og-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius-sm);
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--og-text);
background-color: var(--og-surface);
outline: none;
transition: var(--og-transition);
}
.og-input::placeholder { color: var(--og-text-light); }
.og-input:focus { border-color: var(--og-primary); background-color: #FAFBF9; }
.og-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--og-font-body);
font-weight: 700;
font-size: 0.85rem;
color: var(--og-text);
}
.og-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius-sm);
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--og-text);
background-color: var(--og-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='%23706259' 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(--og-transition);
}
.og-select:focus { border-color: var(--og-primary); }
/* ── Badges ───────────────────── */
.og-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--og-radius-pill);
font-family: var(--og-font-body);
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.og-badge-sale { background-color: var(--og-accent-muted); color: #92400E; }
.og-badge-new { background-color: var(--og-primary-muted); color: #14532D; }
.og-badge-success { background-color: var(--og-success-muted); color: #065F46; }
.og-badge-danger { background-color: var(--og-danger-muted); color: #9F1239; }
.og-badge-default { background-color: var(--og-surface-2); color: var(--og-text-muted); }
/* ── Star Rating ──────────────── */
.og-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--og-accent);
font-size: 0.85rem;
}
.og-stars-count {
font-family: var(--og-font-body);
font-size: 0.8rem;
font-weight: 500;
color: var(--og-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.og-price {
font-family: var(--og-font-heading);
font-size: 1.35rem;
color: var(--og-text);
}
.og-price-original {
font-family: var(--og-font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--og-text-light);
text-decoration: line-through;
}
.og-price-sale { color: var(--og-accent); }
/* ── Toggle Slider ────────────── */
.og-toggle { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; }
.og-toggle input { opacity: 0; width: 0; height: 0; }
.og-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--og-border); border-radius: 26px; transition: var(--og-transition); }
.og-toggle-slider::before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--og-transition); }
.og-toggle input:checked + .og-toggle-slider { background-color: var(--og-primary); }
.og-toggle input:checked + .og-toggle-slider::before { transform: translateX(22px); }
/* ── Divider ──────────────────── */
.og-divider { border: none; border-top: 1.5px solid var(--og-border); margin: 0; }
/* ── Logo ─────────────────────── */
.og-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--og-font-heading);
font-size: 1.4rem;
color: var(--og-text);
}
.og-logo-icon {
width: 38px;
height: 38px;
background-color: var(--og-primary);
border-radius: var(--og-radius-blob);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 1.25rem;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--og-primary) !important; }
.text-accent { color: var(--og-accent) !important; }
.text-success { color: var(--og-primary) !important; }
.text-danger { color: var(--og-danger) !important; }
.text-muted { color: var(--og-text-muted) !important; }
.text-light { color: var(--og-text-light) !important; }
.og-link-sm {
font-family: var(--og-font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--og-primary);
text-decoration: none;
transition: var(--og-transition);
}
.og-link-sm:hover {
color: var(--og-primary-hover);
}
/* --- COMPONENT STYLES --- */
.og-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
max-width: 1100px;
margin: 0 auto;
}
.og-stat-card {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 1.5rem !important;
border-radius: var(--og-radius-lg) !important;
}
.og-stat-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.15rem;
}
.og-stat-ico {
width: 36px;
height: 36px;
border-radius: var(--og-radius-blob);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.og-stat-val {
font-family: var(--og-font-heading);
font-size: 2rem;
color: var(--og-text);
letter-spacing: -0.02em;
line-height: 1;
}
.og-stat-lbl {
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--og-text-light);
}
.og-stat-bar-wrap {
height: 4px;
background-color: var(--og-border);
border-radius: 4px;
overflow: hidden;
margin-top: 0.5rem;
}
.og-stat-bar {
height: 100%;
border-radius: 4px;
transition: width 0.6s ease;
}
Tables
Order History Table
HTML
<div class="og-table-wrap og-card">
<div class="og-table-toolbar">
<div class="og-table-toolbar-left">
<h4>Seeding History</h4>
<span class="og-badge og-badge-default">8 Vials Shipped</span>
</div>
<div class="og-table-toolbar-right">
<div class="og-search-wrap">
<svg class="og-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="og-input og-search-input" placeholder="Find seeds…">
</div>
<select class="og-select" style="width:auto;">
<option>All Milestones</option>
<option>Nourished</option>
<option>Fermenting</option>
<option>Shipped</option>
</select>
</div>
</div>
<div class="og-table-scroll">
<table class="og-data-table">
<thead>
<tr>
<th>Batch ID</th>
<th>Seeding Date</th>
<th>Botanical Details</th>
<th>Vials</th>
<th>Earthy Aura</th>
<th>Milestone</th>
<th>Batch Log</th>
</tr>
</thead>
<tbody>
<tr>
<td class="og-td-mono" style="font-weight:700;">#OG-9402</td>
<td class="og-td-mono text-muted">18 May 2026</td>
<td>
<div class="og-prod-cell">
<span class="og-prod-thumb">🧴</span>
<div>
<span class="og-prod-name">Rose Water Aura Hydrator</span>
<span class="og-prod-meta text-muted">Volume: 100ml</span>
</div>
</div>
</td>
<td class="og-td-mono">1</td>
<td class="og-td-mono" style="font-weight:800;">$28.00</td>
<td><span class="og-badge og-badge-success">Nourished</span></td>
<td>
<button class="og-btn og-btn-outline og-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>
Log
</button>
</td>
</tr>
<tr>
<td class="og-td-mono" style="font-weight:700;">#OG-9400</td>
<td class="og-td-mono text-muted">15 May 2026</td>
<td>
<div class="og-prod-cell">
<span class="og-prod-thumb">🧪</span>
<div>
<span class="og-prod-name">French Green Clay Mask</span>
<span class="og-prod-meta text-muted">Aroma: Lavender Mist</span>
</div>
</div>
</td>
<td class="og-td-mono">1</td>
<td class="og-td-mono" style="font-weight:800;">$38.00</td>
<td><span class="og-badge og-badge-sale">Shipped</span></td>
<td>
<button class="og-btn og-btn-outline og-btn-sm">Track Aura</button>
</td>
</tr>
<tr>
<td class="og-td-mono" style="font-weight:700;">#OG-9382</td>
<td class="og-td-mono text-muted">12 May 2026</td>
<td>
<div class="og-prod-cell">
<span class="og-prod-thumb">🌿</span>
<div>
<span class="og-prod-name">Eucalyptus Tea Extract</span>
<span class="og-prod-meta text-muted">Concentration: 100%</span>
</div>
</div>
</td>
<td class="og-td-mono">2</td>
<td class="og-td-mono" style="font-weight:800;">$36.00</td>
<td><span class="og-badge og-badge-default">Fermenting</span></td>
<td>
<button class="og-btn og-btn-ghost og-btn-sm text-danger">Revoke</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="og-table-pagination">
<span class="text-muted" style="font-size:0.85rem;">Showing 1–3 of 8 vials</span>
<div class="og-pagination-btns">
<button class="og-btn og-btn-outline og-btn-sm" disabled style="opacity:.45;">← Prev</button>
<button class="og-btn og-btn-primary og-btn-sm">1</button>
<button class="og-btn og-btn-outline og-btn-sm">2</button>
<button class="og-btn og-btn-outline og-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. */
.og-table-wrap {
max-width: 1000px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
border-radius: var(--og-radius-lg) !important;
}
.og-table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1.5px solid var(--og-border);
flex-wrap: wrap;
}
.og-table-toolbar-left {
display: flex;
align-items: center;
gap: 0.75rem;
}
.og-table-toolbar-left h4 {
font-size: 1.15rem;
}
.og-table-toolbar-right {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.og-search-wrap {
position: relative;
}
.og-search-ico {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--og-text-light);
pointer-events: none;
}
.og-search-input {
padding-left: 2.25rem;
width: 190px;
}
.og-table-scroll {
overflow-x: auto;
}
.og-data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.og-data-table thead tr {
background-color: var(--og-surface-2);
border-bottom: 1.5px solid var(--og-border);
}
.og-data-table th {
padding: 0.75rem 1rem;
font-family: var(--og-font-body);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--og-text-light);
text-align: left;
white-space: nowrap;
}
.og-data-table td {
padding: 1rem;
border-bottom: 1.5px solid var(--og-border);
color: var(--og-text);
font-weight: 600;
vertical-align: middle;
}
.og-data-table tbody tr:last-child td {
border-bottom: none;
}
.og-data-table tbody tr:hover td {
background-color: var(--og-surface-2);
}
.og-td-mono {
font-family: var(--og-font-body);
font-size: 0.85rem;
}
.og-prod-cell {
display: flex;
align-items: center;
gap: 0.75rem;
}
.og-prod-thumb {
width: 38px;
height: 38px;
background-color: var(--og-surface-2);
border-radius: var(--og-radius-blob);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.og-prod-name {
display: block;
font-family: var(--og-font-body);
font-weight: 700;
color: var(--og-text);
}
.og-prod-meta {
font-size: 0.75rem;
font-weight: 500;
}
.og-table-pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border-top: 1.5px solid var(--og-border);
gap: 1rem;
flex-wrap: wrap;
}
.og-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=DM+Serif+Display&family=Outfit:wght@300;400;500;600;700;800&display=swap');
/* ===========================
Organic Shape Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--og-bg: #FAF7F2;
--og-surface: #FFFFFF;
--og-surface-2: #F3EEE5;
--og-surface-dark: #2A2421;
/* Brand Palette */
--og-primary: #2D6A4F;
--og-primary-hover: #1B4332;
--og-primary-muted: #D8F3DC;
--og-accent: #D97706;
--og-accent-hover: #B45309;
--og-accent-muted: #FEF3C7;
--og-success: #52B788;
--og-success-muted: #E8F5E9;
--og-danger: #F43F5E;
--og-danger-muted: #FFE4E6;
--og-gold: #EAB308;
--og-gold-muted: #FEF9C3;
/* Text */
--og-text: #2A2421;
--og-text-muted: #706259;
--og-text-light: #9E9085;
/* Borders */
--og-border: #E6DFD5;
--og-border-strong: #CDCEBF;
/* Organic Radius Shapes */
--og-radius-sm: 12px 6px 14px 8px;
--og-radius: 24px 8px 32px 12px;
--og-radius-lg: 40px 16px 48px 20px;
--og-radius-pill: 100px;
--og-radius-blob: 60% 40% 30% 70% / 60% 30% 70% 40%;
/* Fonts */
--og-font-heading: 'DM Serif Display', serif;
--og-font-body: 'Outfit', sans-serif;
/* Shadows */
--og-shadow-sm: 0 4px 20px rgba(42,36,33,0.03);
--og-shadow: 0 10px 30px rgba(42,36,33,0.06);
--og-shadow-lg: 0 20px 40px rgba(42,36,33,0.09);
/* Transition */
--og-transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body {
margin: 0;
font-family: var(--og-font-body);
color: var(--og-text);
background-color: var(--og-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.og-card {
background-color: var(--og-surface);
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius);
box-shadow: var(--og-shadow-sm);
padding: 2rem;
transition: var(--og-transition);
}
.og-card:hover {
box-shadow: var(--og-shadow);
transform: translateY(-2px);
border-color: var(--og-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--og-font-heading);
font-weight: 400;
margin: 0;
color: var(--og-text);
line-height: 1.25;
}
p { font-family: var(--og-font-body); color: var(--og-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.og-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 600;
border-radius: var(--og-radius-sm);
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--og-transition);
white-space: nowrap;
user-select: none;
}
.og-btn-primary { background-color: var(--og-primary); color: #fff; border-color: var(--og-primary); }
.og-btn-primary:hover { background-color: var(--og-primary-hover); border-color: var(--og-primary-hover); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(45,106,79,0.25); }
.og-btn-accent { background-color: var(--og-accent); color: #fff; border-color: var(--og-accent); }
.og-btn-accent:hover { background-color: var(--og-accent-hover); border-color: var(--og-accent-hover); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(217,119,6,0.25); }
.og-btn-outline { background-color: transparent; color: var(--og-text); border-color: var(--og-text); }
.og-btn-outline:hover { background-color: var(--og-surface-2); transform: translateY(-2px); }
.og-btn-ghost { background-color: transparent; color: var(--og-text-muted); border-color: transparent; }
.og-btn-ghost:hover { background-color: var(--og-surface-2); color: var(--og-text); }
.og-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.82rem; }
.og-btn-lg { padding: 0.9rem 2rem; font-size: 1rem; border-radius: var(--og-radius); }
.og-btn-block { width: 100%; }
.og-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
/* ── Form Controls ────────────── */
.og-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius-sm);
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--og-text);
background-color: var(--og-surface);
outline: none;
transition: var(--og-transition);
}
.og-input::placeholder { color: var(--og-text-light); }
.og-input:focus { border-color: var(--og-primary); background-color: #FAFBF9; }
.og-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--og-font-body);
font-weight: 700;
font-size: 0.85rem;
color: var(--og-text);
}
.og-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius-sm);
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--og-text);
background-color: var(--og-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='%23706259' 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(--og-transition);
}
.og-select:focus { border-color: var(--og-primary); }
/* ── Badges ───────────────────── */
.og-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--og-radius-pill);
font-family: var(--og-font-body);
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.og-badge-sale { background-color: var(--og-accent-muted); color: #92400E; }
.og-badge-new { background-color: var(--og-primary-muted); color: #14532D; }
.og-badge-success { background-color: var(--og-success-muted); color: #065F46; }
.og-badge-danger { background-color: var(--og-danger-muted); color: #9F1239; }
.og-badge-default { background-color: var(--og-surface-2); color: var(--og-text-muted); }
/* ── Star Rating ──────────────── */
.og-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--og-accent);
font-size: 0.85rem;
}
.og-stars-count {
font-family: var(--og-font-body);
font-size: 0.8rem;
font-weight: 500;
color: var(--og-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.og-price {
font-family: var(--og-font-heading);
font-size: 1.35rem;
color: var(--og-text);
}
.og-price-original {
font-family: var(--og-font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--og-text-light);
text-decoration: line-through;
}
.og-price-sale { color: var(--og-accent); }
/* ── Toggle Slider ────────────── */
.og-toggle { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; }
.og-toggle input { opacity: 0; width: 0; height: 0; }
.og-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--og-border); border-radius: 26px; transition: var(--og-transition); }
.og-toggle-slider::before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--og-transition); }
.og-toggle input:checked + .og-toggle-slider { background-color: var(--og-primary); }
.og-toggle input:checked + .og-toggle-slider::before { transform: translateX(22px); }
/* ── Divider ──────────────────── */
.og-divider { border: none; border-top: 1.5px solid var(--og-border); margin: 0; }
/* ── Logo ─────────────────────── */
.og-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--og-font-heading);
font-size: 1.4rem;
color: var(--og-text);
}
.og-logo-icon {
width: 38px;
height: 38px;
background-color: var(--og-primary);
border-radius: var(--og-radius-blob);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 1.25rem;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--og-primary) !important; }
.text-accent { color: var(--og-accent) !important; }
.text-success { color: var(--og-primary) !important; }
.text-danger { color: var(--og-danger) !important; }
.text-muted { color: var(--og-text-muted) !important; }
.text-light { color: var(--og-text-light) !important; }
.og-link-sm {
font-family: var(--og-font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--og-primary);
text-decoration: none;
transition: var(--og-transition);
}
.og-link-sm:hover {
color: var(--og-primary-hover);
}
/* --- COMPONENT STYLES --- */
.og-table-wrap {
max-width: 1000px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
border-radius: var(--og-radius-lg) !important;
}
.og-table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1.5px solid var(--og-border);
flex-wrap: wrap;
}
.og-table-toolbar-left {
display: flex;
align-items: center;
gap: 0.75rem;
}
.og-table-toolbar-left h4 {
font-size: 1.15rem;
}
.og-table-toolbar-right {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.og-search-wrap {
position: relative;
}
.og-search-ico {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--og-text-light);
pointer-events: none;
}
.og-search-input {
padding-left: 2.25rem;
width: 190px;
}
.og-table-scroll {
overflow-x: auto;
}
.og-data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.og-data-table thead tr {
background-color: var(--og-surface-2);
border-bottom: 1.5px solid var(--og-border);
}
.og-data-table th {
padding: 0.75rem 1rem;
font-family: var(--og-font-body);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--og-text-light);
text-align: left;
white-space: nowrap;
}
.og-data-table td {
padding: 1rem;
border-bottom: 1.5px solid var(--og-border);
color: var(--og-text);
font-weight: 600;
vertical-align: middle;
}
.og-data-table tbody tr:last-child td {
border-bottom: none;
}
.og-data-table tbody tr:hover td {
background-color: var(--og-surface-2);
}
.og-td-mono {
font-family: var(--og-font-body);
font-size: 0.85rem;
}
.og-prod-cell {
display: flex;
align-items: center;
gap: 0.75rem;
}
.og-prod-thumb {
width: 38px;
height: 38px;
background-color: var(--og-surface-2);
border-radius: var(--og-radius-blob);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.og-prod-name {
display: block;
font-family: var(--og-font-body);
font-weight: 700;
color: var(--og-text);
}
.og-prod-meta {
font-size: 0.75rem;
font-weight: 500;
}
.og-table-pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border-top: 1.5px solid var(--og-border);
gap: 1rem;
flex-wrap: wrap;
}
.og-pagination-btns {
display: flex;
gap: 0.4rem;
align-items: center;
}
Lists
Order Status Feed
HTML
<div class="og-activity-card og-card">
<div class="og-activity-head">
<h4>Batch Seeding Timeline</h4>
<span class="og-badge og-badge-success">Aura #OG-9400</span>
</div>
<div class="og-activity-list">
<!-- Milestone 1 -->
<div class="og-activity-item active">
<div class="og-act-ico" style="background:var(--og-primary-muted); color:var(--og-primary);">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
</div>
<div class="og-act-content">
<div class="og-act-top">
<span class="og-act-label">Extract Shipped via USPS Green</span>
<span class="og-act-time">Today, 02:40 pm</span>
</div>
<span class="og-act-meta">Tracking number: <a href="#" class="og-link-sm">1Z999AA10123456784</a>. Estimated aura arrival: Thursday, 21 May.</span>
</div>
</div>
<div class="og-activity-line"></div>
<!-- Milestone 2 -->
<div class="og-activity-item">
<div class="og-act-ico" style="background:var(--og-success-muted); color:var(--og-primary);">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><polyline points="20 6 9 17 4 12"/></svg>
</div>
<div class="og-act-content">
<div class="og-act-top">
<span class="og-act-label">Clay Aura Ferment Verified</span>
<span class="og-act-time">15 May, 10:15 am</span>
</div>
<span class="og-act-meta">Authorized via Earthy Secure Card. Batch code: #482910.</span>
</div>
</div>
<div class="og-activity-line"></div>
<!-- Milestone 3 -->
<div class="og-activity-item">
<div class="og-act-ico" style="background:var(--og-surface-2); color:var(--og-text-light);">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
</div>
<div class="og-act-content">
<div class="og-act-top">
<span class="og-act-label">Vials Registered for Extraction</span>
<span class="og-act-time">15 May, 09:30 am</span>
</div>
<span class="og-act-meta">Batch details registered and sent to our local Oregon greenhouse.</span>
</div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Order Status Feed */
/* NOTE: This component requires base.css to be included in your page. */
.og-activity-card {
max-width: 520px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
border-radius: var(--og-radius-lg) !important;
}
.og-activity-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1.5px solid var(--og-border);
}
.og-activity-head h4 {
font-size: 1.15rem;
}
.og-activity-list {
display: flex;
flex-direction: column;
padding: 1.5rem;
position: relative;
}
.og-activity-item {
display: flex;
align-items: flex-start;
gap: 1rem;
position: relative;
z-index: 2;
padding-bottom: 1.5rem;
}
.og-activity-item:last-of-type {
padding-bottom: 0;
}
.og-activity-item:not(:last-of-type)::after {
content: '';
position: absolute;
top: 32px; /* Bottom of 32px icon */
left: 15px; /* Center of 32px icon */
bottom: 0;
width: 2px;
background-color: var(--og-border);
z-index: 1;
}
.og-act-ico {
width: 32px;
height: 32px;
border-radius: var(--og-radius-blob);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: var(--og-shadow-xs);
}
.og-act-content {
flex: 1;
min-width: 0;
}
.og-act-top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.og-act-label {
font-family: var(--og-font-body);
font-size: 0.875rem;
font-weight: 700;
color: var(--og-text);
}
.og-act-time {
font-family: var(--og-font-body);
font-size: 0.75rem;
font-weight: 600;
color: var(--og-text-light);
white-space: nowrap;
}
.og-act-meta {
font-size: 0.8rem;
color: var(--og-text-muted);
font-weight: 500;
line-height: 1.5;
display: block;
}
/* Timeline Vertical Line */
.og-activity-line {
display: none;
}
.og-activity-item.active .og-act-ico {
outline: 4px solid var(--og-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=DM+Serif+Display&family=Outfit:wght@300;400;500;600;700;800&display=swap');
/* ===========================
Organic Shape Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--og-bg: #FAF7F2;
--og-surface: #FFFFFF;
--og-surface-2: #F3EEE5;
--og-surface-dark: #2A2421;
/* Brand Palette */
--og-primary: #2D6A4F;
--og-primary-hover: #1B4332;
--og-primary-muted: #D8F3DC;
--og-accent: #D97706;
--og-accent-hover: #B45309;
--og-accent-muted: #FEF3C7;
--og-success: #52B788;
--og-success-muted: #E8F5E9;
--og-danger: #F43F5E;
--og-danger-muted: #FFE4E6;
--og-gold: #EAB308;
--og-gold-muted: #FEF9C3;
/* Text */
--og-text: #2A2421;
--og-text-muted: #706259;
--og-text-light: #9E9085;
/* Borders */
--og-border: #E6DFD5;
--og-border-strong: #CDCEBF;
/* Organic Radius Shapes */
--og-radius-sm: 12px 6px 14px 8px;
--og-radius: 24px 8px 32px 12px;
--og-radius-lg: 40px 16px 48px 20px;
--og-radius-pill: 100px;
--og-radius-blob: 60% 40% 30% 70% / 60% 30% 70% 40%;
/* Fonts */
--og-font-heading: 'DM Serif Display', serif;
--og-font-body: 'Outfit', sans-serif;
/* Shadows */
--og-shadow-sm: 0 4px 20px rgba(42,36,33,0.03);
--og-shadow: 0 10px 30px rgba(42,36,33,0.06);
--og-shadow-lg: 0 20px 40px rgba(42,36,33,0.09);
/* Transition */
--og-transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body {
margin: 0;
font-family: var(--og-font-body);
color: var(--og-text);
background-color: var(--og-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.og-card {
background-color: var(--og-surface);
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius);
box-shadow: var(--og-shadow-sm);
padding: 2rem;
transition: var(--og-transition);
}
.og-card:hover {
box-shadow: var(--og-shadow);
transform: translateY(-2px);
border-color: var(--og-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--og-font-heading);
font-weight: 400;
margin: 0;
color: var(--og-text);
line-height: 1.25;
}
p { font-family: var(--og-font-body); color: var(--og-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.og-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 600;
border-radius: var(--og-radius-sm);
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--og-transition);
white-space: nowrap;
user-select: none;
}
.og-btn-primary { background-color: var(--og-primary); color: #fff; border-color: var(--og-primary); }
.og-btn-primary:hover { background-color: var(--og-primary-hover); border-color: var(--og-primary-hover); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(45,106,79,0.25); }
.og-btn-accent { background-color: var(--og-accent); color: #fff; border-color: var(--og-accent); }
.og-btn-accent:hover { background-color: var(--og-accent-hover); border-color: var(--og-accent-hover); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(217,119,6,0.25); }
.og-btn-outline { background-color: transparent; color: var(--og-text); border-color: var(--og-text); }
.og-btn-outline:hover { background-color: var(--og-surface-2); transform: translateY(-2px); }
.og-btn-ghost { background-color: transparent; color: var(--og-text-muted); border-color: transparent; }
.og-btn-ghost:hover { background-color: var(--og-surface-2); color: var(--og-text); }
.og-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.82rem; }
.og-btn-lg { padding: 0.9rem 2rem; font-size: 1rem; border-radius: var(--og-radius); }
.og-btn-block { width: 100%; }
.og-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
/* ── Form Controls ────────────── */
.og-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius-sm);
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--og-text);
background-color: var(--og-surface);
outline: none;
transition: var(--og-transition);
}
.og-input::placeholder { color: var(--og-text-light); }
.og-input:focus { border-color: var(--og-primary); background-color: #FAFBF9; }
.og-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--og-font-body);
font-weight: 700;
font-size: 0.85rem;
color: var(--og-text);
}
.og-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius-sm);
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--og-text);
background-color: var(--og-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='%23706259' 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(--og-transition);
}
.og-select:focus { border-color: var(--og-primary); }
/* ── Badges ───────────────────── */
.og-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--og-radius-pill);
font-family: var(--og-font-body);
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.og-badge-sale { background-color: var(--og-accent-muted); color: #92400E; }
.og-badge-new { background-color: var(--og-primary-muted); color: #14532D; }
.og-badge-success { background-color: var(--og-success-muted); color: #065F46; }
.og-badge-danger { background-color: var(--og-danger-muted); color: #9F1239; }
.og-badge-default { background-color: var(--og-surface-2); color: var(--og-text-muted); }
/* ── Star Rating ──────────────── */
.og-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--og-accent);
font-size: 0.85rem;
}
.og-stars-count {
font-family: var(--og-font-body);
font-size: 0.8rem;
font-weight: 500;
color: var(--og-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.og-price {
font-family: var(--og-font-heading);
font-size: 1.35rem;
color: var(--og-text);
}
.og-price-original {
font-family: var(--og-font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--og-text-light);
text-decoration: line-through;
}
.og-price-sale { color: var(--og-accent); }
/* ── Toggle Slider ────────────── */
.og-toggle { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; }
.og-toggle input { opacity: 0; width: 0; height: 0; }
.og-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--og-border); border-radius: 26px; transition: var(--og-transition); }
.og-toggle-slider::before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--og-transition); }
.og-toggle input:checked + .og-toggle-slider { background-color: var(--og-primary); }
.og-toggle input:checked + .og-toggle-slider::before { transform: translateX(22px); }
/* ── Divider ──────────────────── */
.og-divider { border: none; border-top: 1.5px solid var(--og-border); margin: 0; }
/* ── Logo ─────────────────────── */
.og-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--og-font-heading);
font-size: 1.4rem;
color: var(--og-text);
}
.og-logo-icon {
width: 38px;
height: 38px;
background-color: var(--og-primary);
border-radius: var(--og-radius-blob);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 1.25rem;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--og-primary) !important; }
.text-accent { color: var(--og-accent) !important; }
.text-success { color: var(--og-primary) !important; }
.text-danger { color: var(--og-danger) !important; }
.text-muted { color: var(--og-text-muted) !important; }
.text-light { color: var(--og-text-light) !important; }
.og-link-sm {
font-family: var(--og-font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--og-primary);
text-decoration: none;
transition: var(--og-transition);
}
.og-link-sm:hover {
color: var(--og-primary-hover);
}
/* --- COMPONENT STYLES --- */
.og-activity-card {
max-width: 520px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
border-radius: var(--og-radius-lg) !important;
}
.og-activity-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1.5px solid var(--og-border);
}
.og-activity-head h4 {
font-size: 1.15rem;
}
.og-activity-list {
display: flex;
flex-direction: column;
padding: 1.5rem;
position: relative;
}
.og-activity-item {
display: flex;
align-items: flex-start;
gap: 1rem;
position: relative;
z-index: 2;
padding-bottom: 1.5rem;
}
.og-activity-item:last-of-type {
padding-bottom: 0;
}
.og-activity-item:not(:last-of-type)::after {
content: '';
position: absolute;
top: 32px; /* Bottom of 32px icon */
left: 15px; /* Center of 32px icon */
bottom: 0;
width: 2px;
background-color: var(--og-border);
z-index: 1;
}
.og-act-ico {
width: 32px;
height: 32px;
border-radius: var(--og-radius-blob);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: var(--og-shadow-xs);
}
.og-act-content {
flex: 1;
min-width: 0;
}
.og-act-top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.og-act-label {
font-family: var(--og-font-body);
font-size: 0.875rem;
font-weight: 700;
color: var(--og-text);
}
.og-act-time {
font-family: var(--og-font-body);
font-size: 0.75rem;
font-weight: 600;
color: var(--og-text-light);
white-space: nowrap;
}
.og-act-meta {
font-size: 0.8rem;
color: var(--og-text-muted);
font-weight: 500;
line-height: 1.5;
display: block;
}
/* Timeline Vertical Line */
.og-activity-line {
display: none;
}
.og-activity-item.active .og-act-ico {
outline: 4px solid var(--og-primary-muted);
}
Modals
Cart Confirm Dialog
HTML
<div class="og-modal-backdrop">
<div class="og-modal og-card">
<div class="og-modal-head">
<div class="og-modal-title-row">
<div class="og-modal-ico" style="background:var(--og-success-muted); color:var(--og-primary);">
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2.5" fill="none"><polyline points="20 6 9 17 4 12"/></svg>
</div>
<div>
<h4>Essence Saved</h4>
<p class="og-modal-meta">Item added to your basket safely.</p>
</div>
</div>
<button class="og-btn og-btn-ghost og-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="og-modal-body">
<div class="og-cart-summary">
<div class="og-cart-prod-row">
<span class="og-cart-prod-thumb">🧴</span>
<div class="og-cart-prod-info">
<strong>Rose Water Aura Hydrator</strong>
<p class="text-muted" style="font-size:0.78rem; margin-top:0.1rem;">Qty: 1 · Volume: 100ml</p>
</div>
<span class="og-price og-price-sale" style="font-size:1.05rem;">$28.00</span>
</div>
<hr class="og-divider">
<div class="og-cart-totals">
<div class="og-total-row">
<span class="text-muted">Total Vials (3 items)</span>
<span style="font-weight:700;">$92.00</span>
</div>
<div class="og-total-row" style="color:var(--og-primary);">
<span>Oregon Carbon Offset Shipping</span>
<span style="font-weight:700;">FREE</span>
</div>
</div>
</div>
<!-- Eco warning/trust inside modal -->
<div class="og-modal-trust-alert">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none" style="flex-shrink:0;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
<span>Small batch items sell out quickly. Secure yours today.</span>
</div>
</div>
<div class="og-modal-foot">
<button class="og-btn og-btn-outline">Nourish More</button>
<button class="og-btn og-btn-primary">Checkout Essence</button>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Cart Confirm Dialog */
/* NOTE: This component requires base.css to be included in your page. */
.og-modal-backdrop {
background-color: rgba(42,36,33,0.35);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
border-radius: var(--og-radius-lg);
max-width: 700px;
margin: 0 auto;
}
.og-modal {
width: 100%;
max-width: 480px;
padding: 0 !important;
overflow: hidden;
border-radius: var(--og-radius-lg) !important;
}
.og-modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem;
border-bottom: 1.5px solid var(--og-border);
}
.og-modal-title-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.og-modal-ico {
width: 40px;
height: 40px;
border-radius: var(--og-radius-blob);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.og-modal-head h4 {
font-size: 1.15rem;
margin-bottom: 0.15rem;
}
.og-modal-meta {
font-size: 0.8rem;
font-weight: 600;
}
.og-modal-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.og-cart-summary {
display: flex;
flex-direction: column;
gap: 1rem;
background-color: var(--og-surface-2);
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius-sm);
padding: 1.25rem;
}
.og-cart-prod-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.og-cart-prod-thumb {
width: 42px;
height: 42px;
background-color: var(--og-surface);
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius-blob);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
flex-shrink: 0;
}
.og-cart-prod-info {
flex: 1;
min-width: 0;
}
.og-cart-prod-info strong {
font-family: var(--og-font-body);
font-size: 0.875rem;
font-weight: 700;
color: var(--og-text);
}
.og-cart-totals {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.og-total-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
font-weight: 600;
}
.og-modal-trust-alert {
display: flex;
align-items: center;
gap: 0.6rem;
background-color: var(--og-accent-muted);
color: #9A4412;
border: 1.5px solid rgba(217,119,6,0.15);
border-radius: var(--og-radius-sm);
padding: 0.75rem 1rem;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.4;
}
.og-modal-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
padding: 1.25rem 1.5rem;
border-top: 1.5px solid var(--og-border);
background-color: var(--og-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=DM+Serif+Display&family=Outfit:wght@300;400;500;600;700;800&display=swap');
/* ===========================
Organic Shape Design System
=========================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--og-bg: #FAF7F2;
--og-surface: #FFFFFF;
--og-surface-2: #F3EEE5;
--og-surface-dark: #2A2421;
/* Brand Palette */
--og-primary: #2D6A4F;
--og-primary-hover: #1B4332;
--og-primary-muted: #D8F3DC;
--og-accent: #D97706;
--og-accent-hover: #B45309;
--og-accent-muted: #FEF3C7;
--og-success: #52B788;
--og-success-muted: #E8F5E9;
--og-danger: #F43F5E;
--og-danger-muted: #FFE4E6;
--og-gold: #EAB308;
--og-gold-muted: #FEF9C3;
/* Text */
--og-text: #2A2421;
--og-text-muted: #706259;
--og-text-light: #9E9085;
/* Borders */
--og-border: #E6DFD5;
--og-border-strong: #CDCEBF;
/* Organic Radius Shapes */
--og-radius-sm: 12px 6px 14px 8px;
--og-radius: 24px 8px 32px 12px;
--og-radius-lg: 40px 16px 48px 20px;
--og-radius-pill: 100px;
--og-radius-blob: 60% 40% 30% 70% / 60% 30% 70% 40%;
/* Fonts */
--og-font-heading: 'DM Serif Display', serif;
--og-font-body: 'Outfit', sans-serif;
/* Shadows */
--og-shadow-sm: 0 4px 20px rgba(42,36,33,0.03);
--og-shadow: 0 10px 30px rgba(42,36,33,0.06);
--og-shadow-lg: 0 20px 40px rgba(42,36,33,0.09);
/* Transition */
--og-transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body {
margin: 0;
font-family: var(--og-font-body);
color: var(--og-text);
background-color: var(--og-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.og-card {
background-color: var(--og-surface);
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius);
box-shadow: var(--og-shadow-sm);
padding: 2rem;
transition: var(--og-transition);
}
.og-card:hover {
box-shadow: var(--og-shadow);
transform: translateY(-2px);
border-color: var(--og-border-strong);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--og-font-heading);
font-weight: 400;
margin: 0;
color: var(--og-text);
line-height: 1.25;
}
p { font-family: var(--og-font-body); color: var(--og-text-muted); margin: 0; line-height: 1.6; }
/* ── Buttons ──────────────────── */
.og-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 600;
border-radius: var(--og-radius-sm);
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--og-transition);
white-space: nowrap;
user-select: none;
}
.og-btn-primary { background-color: var(--og-primary); color: #fff; border-color: var(--og-primary); }
.og-btn-primary:hover { background-color: var(--og-primary-hover); border-color: var(--og-primary-hover); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(45,106,79,0.25); }
.og-btn-accent { background-color: var(--og-accent); color: #fff; border-color: var(--og-accent); }
.og-btn-accent:hover { background-color: var(--og-accent-hover); border-color: var(--og-accent-hover); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(217,119,6,0.25); }
.og-btn-outline { background-color: transparent; color: var(--og-text); border-color: var(--og-text); }
.og-btn-outline:hover { background-color: var(--og-surface-2); transform: translateY(-2px); }
.og-btn-ghost { background-color: transparent; color: var(--og-text-muted); border-color: transparent; }
.og-btn-ghost:hover { background-color: var(--og-surface-2); color: var(--og-text); }
.og-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.82rem; }
.og-btn-lg { padding: 0.9rem 2rem; font-size: 1rem; border-radius: var(--og-radius); }
.og-btn-block { width: 100%; }
.og-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
/* ── Form Controls ────────────── */
.og-input {
width: 100%;
padding: 0.75rem 1.1rem;
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius-sm);
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--og-text);
background-color: var(--og-surface);
outline: none;
transition: var(--og-transition);
}
.og-input::placeholder { color: var(--og-text-light); }
.og-input:focus { border-color: var(--og-primary); background-color: #FAFBF9; }
.og-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--og-font-body);
font-weight: 700;
font-size: 0.85rem;
color: var(--og-text);
}
.og-select {
width: 100%;
padding: 0.75rem 2rem 0.75rem 1.1rem;
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius-sm);
font-family: var(--og-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--og-text);
background-color: var(--og-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='%23706259' 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(--og-transition);
}
.og-select:focus { border-color: var(--og-primary); }
/* ── Badges ───────────────────── */
.og-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.85rem;
border-radius: var(--og-radius-pill);
font-family: var(--og-font-body);
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.og-badge-sale { background-color: var(--og-accent-muted); color: #92400E; }
.og-badge-new { background-color: var(--og-primary-muted); color: #14532D; }
.og-badge-success { background-color: var(--og-success-muted); color: #065F46; }
.og-badge-danger { background-color: var(--og-danger-muted); color: #9F1239; }
.og-badge-default { background-color: var(--og-surface-2); color: var(--og-text-muted); }
/* ── Star Rating ──────────────── */
.og-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--og-accent);
font-size: 0.85rem;
}
.og-stars-count {
font-family: var(--og-font-body);
font-size: 0.8rem;
font-weight: 500;
color: var(--og-text-muted);
margin-left: 0.35rem;
}
/* ── Price Display ────────────── */
.og-price {
font-family: var(--og-font-heading);
font-size: 1.35rem;
color: var(--og-text);
}
.og-price-original {
font-family: var(--og-font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--og-text-light);
text-decoration: line-through;
}
.og-price-sale { color: var(--og-accent); }
/* ── Toggle Slider ────────────── */
.og-toggle { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; }
.og-toggle input { opacity: 0; width: 0; height: 0; }
.og-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--og-border); border-radius: 26px; transition: var(--og-transition); }
.og-toggle-slider::before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--og-transition); }
.og-toggle input:checked + .og-toggle-slider { background-color: var(--og-primary); }
.og-toggle input:checked + .og-toggle-slider::before { transform: translateX(22px); }
/* ── Divider ──────────────────── */
.og-divider { border: none; border-top: 1.5px solid var(--og-border); margin: 0; }
/* ── Logo ─────────────────────── */
.og-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-family: var(--og-font-heading);
font-size: 1.4rem;
color: var(--og-text);
}
.og-logo-icon {
width: 38px;
height: 38px;
background-color: var(--og-primary);
border-radius: var(--og-radius-blob);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 1.25rem;
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--og-primary) !important; }
.text-accent { color: var(--og-accent) !important; }
.text-success { color: var(--og-primary) !important; }
.text-danger { color: var(--og-danger) !important; }
.text-muted { color: var(--og-text-muted) !important; }
.text-light { color: var(--og-text-light) !important; }
.og-link-sm {
font-family: var(--og-font-body);
font-size: 0.8rem;
font-weight: 700;
color: var(--og-primary);
text-decoration: none;
transition: var(--og-transition);
}
.og-link-sm:hover {
color: var(--og-primary-hover);
}
/* --- COMPONENT STYLES --- */
.og-modal-backdrop {
background-color: rgba(42,36,33,0.35);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
border-radius: var(--og-radius-lg);
max-width: 700px;
margin: 0 auto;
}
.og-modal {
width: 100%;
max-width: 480px;
padding: 0 !important;
overflow: hidden;
border-radius: var(--og-radius-lg) !important;
}
.og-modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem;
border-bottom: 1.5px solid var(--og-border);
}
.og-modal-title-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.og-modal-ico {
width: 40px;
height: 40px;
border-radius: var(--og-radius-blob);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.og-modal-head h4 {
font-size: 1.15rem;
margin-bottom: 0.15rem;
}
.og-modal-meta {
font-size: 0.8rem;
font-weight: 600;
}
.og-modal-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.og-cart-summary {
display: flex;
flex-direction: column;
gap: 1rem;
background-color: var(--og-surface-2);
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius-sm);
padding: 1.25rem;
}
.og-cart-prod-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.og-cart-prod-thumb {
width: 42px;
height: 42px;
background-color: var(--og-surface);
border: 1.5px solid var(--og-border);
border-radius: var(--og-radius-blob);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
flex-shrink: 0;
}
.og-cart-prod-info {
flex: 1;
min-width: 0;
}
.og-cart-prod-info strong {
font-family: var(--og-font-body);
font-size: 0.875rem;
font-weight: 700;
color: var(--og-text);
}
.og-cart-totals {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.og-total-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
font-weight: 600;
}
.og-modal-trust-alert {
display: flex;
align-items: center;
gap: 0.6rem;
background-color: var(--og-accent-muted);
color: #9A4412;
border: 1.5px solid rgba(217,119,6,0.15);
border-radius: var(--og-radius-sm);
padding: 0.75rem 1rem;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.4;
}
.og-modal-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
padding: 1.25rem 1.5rem;
border-top: 1.5px solid var(--og-border);
background-color: var(--og-surface-2);
}