feat: flatten routes and merge marketing and onboarding directories
This commit is contained in:
@@ -0,0 +1,189 @@
|
||||
/* ============================================================
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user