190 lines
6.6 KiB
CSS
190 lines
6.6 KiB
CSS
/* ============================================================
|
|
vibn-marketplace · marketplace-tokens.css
|
|
------------------------------------------------------------
|
|
Extends vibn-ai-templates/tokens.css with marketplace-specific
|
|
tokens + a new theme ("atlas" — warm-editorial, Airbnb school).
|
|
Load AFTER tokens.css.
|
|
============================================================ */
|
|
|
|
:root {
|
|
/* Marketplace-specific tokens (added to base) */
|
|
--listing-radius: 14px; /* photo cards */
|
|
--listing-shadow: 0 6px 24px -12px rgba(0,0,0,0.12);
|
|
--listing-hover-shadow: 0 12px 32px -10px rgba(0,0,0,0.18);
|
|
--rating: #f6c560; /* star color */
|
|
--rating-empty: rgba(0,0,0,0.12);
|
|
--map-pin: var(--text);
|
|
--map-pin-active: var(--accent);
|
|
--price-emphasis: var(--text);
|
|
}
|
|
|
|
/* ============================================================
|
|
THEME · atlas
|
|
Warm editorial marketplace — Airbnb / Marriott Bonvoy / Sonder
|
|
school. Cream paper, deep ink, terracotta accent, sage support.
|
|
============================================================ */
|
|
.theme-atlas {
|
|
--font-display: 'DM Serif Display', 'Times New Roman', serif;
|
|
|
|
--bg: #fbf7f0;
|
|
--surface: #ffffff;
|
|
--surface-2: #f7f1e6;
|
|
--surface-alt: #efe7d6;
|
|
--border: #e8dcc6;
|
|
--border-strong:#c9b894;
|
|
--divider: #efe7d6;
|
|
|
|
--text: #1a1612;
|
|
--text-2: #5a4a3a;
|
|
--text-3: #8a7a66;
|
|
--text-on-accent: #fbf7f0;
|
|
|
|
--accent: #c4592c; /* terracotta */
|
|
--accent-2: #8a6c30; /* ochre */
|
|
--accent-soft: #f5e8db;
|
|
--accent-ring: rgba(196,89,44,0.22);
|
|
|
|
--success: #5d8054; /* sage */
|
|
--success-soft: #e3eadc;
|
|
--warn: #c08a2a;
|
|
--warn-soft: #f5ebd0;
|
|
--danger: #a32a1e;
|
|
--danger-soft: #f3d8d2;
|
|
|
|
--button-radius: 999px; /* pill buttons everywhere */
|
|
--field-radius: 10px;
|
|
--card-radius: 14px;
|
|
--modal-radius: 18px;
|
|
|
|
--shadow-sm: 0 1px 2px rgba(26,22,18,0.04);
|
|
--shadow: 0 2px 8px rgba(26,22,18,0.06), 0 1px 2px rgba(26,22,18,0.04);
|
|
--shadow-lg: 0 24px 50px -20px rgba(26,22,18,0.20), 0 2px 8px rgba(26,22,18,0.05);
|
|
--shadow-modal: 0 40px 80px -20px rgba(26,22,18,0.30);
|
|
|
|
--button-bg: #1a1612;
|
|
--button-fg: #fbf7f0;
|
|
--button-border: #1a1612;
|
|
--button-hover: #2a2218;
|
|
--button-press: #000000;
|
|
|
|
--button-secondary-bg: #ffffff;
|
|
--button-secondary-fg: #1a1612;
|
|
--button-secondary-border: #1a1612;
|
|
--button-secondary-hover: rgba(26,22,18,0.05);
|
|
|
|
--button-ghost-fg: var(--text);
|
|
--button-ghost-hover: rgba(26,22,18,0.05);
|
|
|
|
--field-bg: #ffffff;
|
|
--field-border: var(--border);
|
|
--field-placeholder: var(--text-3);
|
|
|
|
/* Marketplace overrides */
|
|
--listing-radius: 14px;
|
|
--listing-shadow: 0 8px 28px -14px rgba(26,22,18,0.18);
|
|
--rating: #c4592c; /* terracotta stars feel ownable */
|
|
--rating-empty: rgba(26,22,18,0.10);
|
|
--map-pin-active: var(--accent);
|
|
}
|
|
|
|
/* Small atlas-specific niceties: ".accent-script" turns body
|
|
copy into the display serif italic — used for hero pulls. */
|
|
.theme-atlas .accent-script {
|
|
font-family: var(--font-display);
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
THEME · flux
|
|
The most-now marketplace aesthetic: deep black surfaces with
|
|
subtle glass tint, vibrant violet→fuchsia aurora behind a
|
|
frosted UI, Inter Tight for displays. Think v0 / Cursor /
|
|
Linear, applied to a stays product.
|
|
============================================================ */
|
|
.theme-flux {
|
|
--font-display: 'Inter Tight', 'Inter', -apple-system, sans-serif;
|
|
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
|
|
|
--bg: #08080c;
|
|
--surface: rgba(20,20,26,0.72);
|
|
--surface-2: rgba(28,28,36,0.55);
|
|
--surface-alt: rgba(255,255,255,0.04);
|
|
--border: rgba(255,255,255,0.08);
|
|
--border-strong:rgba(255,255,255,0.18);
|
|
--divider: rgba(255,255,255,0.06);
|
|
|
|
--text: #fafafa;
|
|
--text-2: rgba(255,255,255,0.72);
|
|
--text-3: rgba(255,255,255,0.48);
|
|
--text-on-accent: #08080c;
|
|
|
|
--accent: #8b7cff; /* electric violet */
|
|
--accent-2: #ff5cd8; /* fuchsia */
|
|
--accent-soft: rgba(139,124,255,0.16);
|
|
--accent-ring: rgba(139,124,255,0.40);
|
|
|
|
--success: #4ade80;
|
|
--success-soft: rgba(74,222,128,0.14);
|
|
--warn: #f6c560;
|
|
--warn-soft: rgba(246,197,96,0.14);
|
|
--danger: #ff5b6b;
|
|
--danger-soft: rgba(255,91,107,0.14);
|
|
|
|
--button-radius: 10px;
|
|
--field-radius: 10px;
|
|
--card-radius: 14px;
|
|
--modal-radius: 18px;
|
|
|
|
--surface-blur: 24px;
|
|
--backdrop: radial-gradient(60% 50% at 10% 5%, rgba(139,124,255,0.35), transparent 60%),
|
|
radial-gradient(55% 60% at 95% 30%, rgba(255,92,216,0.30), transparent 60%),
|
|
radial-gradient(70% 60% at 50% 105%, rgba(74,222,200,0.18), transparent 60%);
|
|
|
|
--shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
|
|
--shadow: 0 8px 32px -8px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
|
|
--shadow-lg: 0 30px 60px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);
|
|
--shadow-modal: 0 40px 100px -30px rgba(0,0,0,0.85);
|
|
|
|
--button-bg: #ffffff;
|
|
--button-fg: #08080c;
|
|
--button-border: #ffffff;
|
|
--button-hover: rgba(255,255,255,0.90);
|
|
--button-press: rgba(255,255,255,0.82);
|
|
|
|
--button-secondary-bg: rgba(255,255,255,0.06);
|
|
--button-secondary-fg: #ffffff;
|
|
--button-secondary-border: rgba(255,255,255,0.14);
|
|
--button-secondary-hover: rgba(255,255,255,0.12);
|
|
|
|
--button-ghost-fg: #ffffff;
|
|
--button-ghost-hover: rgba(255,255,255,0.06);
|
|
|
|
--field-bg: rgba(255,255,255,0.04);
|
|
--field-border: rgba(255,255,255,0.12);
|
|
--field-placeholder: rgba(255,255,255,0.45);
|
|
|
|
/* Marketplace specifics */
|
|
--listing-radius: 14px;
|
|
--listing-shadow: 0 10px 36px -12px rgba(0,0,0,0.7);
|
|
--listing-hover-shadow: 0 18px 50px -10px rgba(139,124,255,0.30);
|
|
--rating: #f6c560;
|
|
--rating-empty: rgba(255,255,255,0.16);
|
|
--map-pin: #ffffff;
|
|
--map-pin-active: var(--accent);
|
|
}
|
|
|
|
/* `.accent-script` in flux becomes a tight italic with the
|
|
violet→fuchsia gradient — replaces atlas's serif italic. */
|
|
.theme-flux .accent-script {
|
|
font-family: var(--font-display);
|
|
font-style: italic;
|
|
font-weight: 300;
|
|
background: linear-gradient(95deg, var(--accent), var(--accent-2));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
color: transparent;
|
|
}
|