/**
* grapevine-design-system.css
* ============================================================
* Grapevine Brand Design System
* Use this file in your Replit project for consistent branding.
* Import in your main CSS or index.html
* ============================================================
*/
/* ── BRAND COLORS ─────────────────────────────────────────── */
:root {
/* Primary Purples */
--gv-purple-dark: #5a4067; /* Main brand purple — logo, CTAs, headers */
--gv-purple-mid: #9E76B5; /* Medium purple — secondary elements, hover states */
--gv-purple-light: #A08BC1; /* Light purple — borders, accents, badges */
--gv-purple-pale: #e8dff0; /* Very light purple — card backgrounds, chips */
--gv-purple-ultra: #f4f0f8; /* Ultra pale purple — page section backgrounds */
/* Greens (from leaf in logo) */
--gv-green-dark: #40592F; /* Dark green — logo leaf, success states */
--gv-green-mid: #6e8c52; /* Medium green — success indicators */
--gv-green-light: #a8c97a; /* Light green — positive chips, badges */
/* Neutrals */
--gv-black: #1a1a1a; /* Primary text */
--gv-white: #ffffff; /* Backgrounds, reversed text */
--gv-gray-light: #E2E2E2; /* Borders, dividers */
--gv-gray-mid: #999999; /* Secondary text, labels */
--gv-gray-dark: #666666; /* Body text, descriptions */
--gv-gray-darker: #444444; /* Strong secondary text */
/* Brand palette from guidelines */
--gv-pure-black: #000000;
--gv-pure-white: #ffffff;
--gv-gray-1: #E2E2E2; /* 11% black */
--gv-gray-2: #CCCCCC; /* 20% black */
--gv-gray-3: #999999; /* 40% black */
--gv-gray-4: #666666; /* 60% black */
/* ── TYPOGRAPHY ───────────────────────────────────────── */
--gv-font-display: 'Nunito', 'CoolveticaRg-Regular', sans-serif; /* Headlines, hero */
--gv-font-heading: 'Nunito', 'DIN Alternate Bold', sans-serif; /* Section headings */
--gv-font-body: 'Nunito Sans', 'Myriad Variable Concept', sans-serif; /* Body text */
--gv-font-mono: 'JetBrains Mono', monospace; /* Code, labels */
/* ── SPACING SCALE ────────────────────────────────────── */
--gv-space-xs: 4px;
--gv-space-sm: 8px;
--gv-space-md: 16px;
--gv-space-lg: 24px;
--gv-space-xl: 40px;
--gv-space-2xl: 64px;
--gv-space-3xl: 100px;
/* ── BORDER RADIUS ────────────────────────────────────── */
--gv-radius-sm: 8px;
--gv-radius-md: 14px;
--gv-radius-lg: 20px;
--gv-radius-xl: 24px;
--gv-radius-pill: 50px;
/* ── SHADOWS ──────────────────────────────────────────── */
--gv-shadow-sm: 0 2px 12px rgba(90, 64, 103, 0.06);
--gv-shadow-md: 0 8px 28px rgba(90, 64, 103, 0.10);
--gv-shadow-lg: 0 16px 40px rgba(90, 64, 103, 0.14);
--gv-shadow-xl: 0 40px 80px rgba(90, 64, 103, 0.20);
/* ── Z-INDEX SCALE ────────────────────────────────────── */
--gv-z-base: 1;
--gv-z-above: 10;
--gv-z-nav: 100;
--gv-z-modal: 200;
--gv-z-toast: 300;
--gv-z-cursor: 9999;
}
/* ── TYPOGRAPHY CLASSES ───────────────────────────────────── */
.gv-display {
font-family: var(--gv-font-display);
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1.05;
}
.gv-heading {
font-family: var(--gv-font-heading);
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.2;
}
.gv-body {
font-family: var(--gv-font-body);
font-weight: 400;
line-height: 1.7;
}
.gv-label {
font-family: var(--gv-font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Type scale */
.gv-text-hero { font-size: clamp(48px, 7vw, 80px); }
.gv-text-h1 { font-size: clamp(36px, 4vw, 56px); }
.gv-text-h2 { font-size: clamp(28px, 3vw, 40px); }
.gv-text-h3 { font-size: 24px; }
.gv-text-h4 { font-size: 18px; }
.gv-text-body { font-size: 16px; }
.gv-text-sm { font-size: 14px; }
.gv-text-xs { font-size: 12px; }
/* ── BUTTON STYLES ────────────────────────────────────────── */
.gv-btn {
font-family: var(--gv-font-body);
font-weight: 800;
border-radius: var(--gv-radius-pill);
padding: 14px 32px;
font-size: 15px;
border: none;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
white-space: nowrap;
}
.gv-btn-primary {
background: var(--gv-purple-dark);
color: var(--gv-white);
box-shadow: 0 8px 24px rgba(90, 64, 103, 0.25);
}
.gv-btn-primary:hover {
background: var(--gv-purple-mid);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(90, 64, 103, 0.30);
}
.gv-btn-secondary {
background: var(--gv-white);
color: var(--gv-purple-dark);
border: 2px solid rgba(90, 64, 103, 0.25);
}
.gv-btn-secondary:hover {
border-color: var(--gv-purple-dark);
background: rgba(90, 64, 103, 0.04);
}
.gv-btn-ghost {
background: transparent;
color: var(--gv-purple-dark);
border: 2px solid var(--gv-purple-dark);
}
.gv-btn-ghost:hover {
background: var(--gv-purple-dark);
color: var(--gv-white);
}
.gv-btn-white {
background: var(--gv-white);
color: var(--gv-purple-dark);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.gv-btn-white:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.20);
}
/* Button sizes */
.gv-btn-lg { padding: 18px 48px; font-size: 17px; }
.gv-btn-sm { padding: 9px 20px; font-size: 13px; }
/* ── CARD STYLES ──────────────────────────────────────────── */
.gv-card {
background: var(--gv-white);
border: 1px solid var(--gv-gray-light);
border-radius: var(--gv-radius-xl);
padding: 28px 28px;
box-shadow: var(--gv-shadow-sm);
transition: all 0.25s ease;
}
.gv-card:hover {
box-shadow: var(--gv-shadow-lg);
transform: translateY(-4px);
}
.gv-card-featured {
border-color: var(--gv-purple-dark);
box-shadow: var(--gv-shadow-md);
}
.gv-card-purple {
background: var(--gv-purple-dark);
color: var(--gv-white);
border: none;
}
.gv-card-pale {
background: var(--gv-purple-ultra);
border-color: var(--gv-purple-pale);
}
/* ── BADGE & CHIP STYLES ──────────────────────────────────── */
.gv-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
border-radius: var(--gv-radius-pill);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* ── Light-background badge variants (default) ───────────── */
.gv-badge-purple {
background: rgba(168, 85, 247, 0.12);
border: 1px solid rgba(168, 85, 247, 0.40);
color: #7e22ce;
}
.gv-badge-green {
background: rgba(34, 197, 94, 0.12);
border: 1px solid rgba(34, 197, 94, 0.40);
color: #15803d;
}
.gv-badge-orange {
background: rgba(249, 115, 22, 0.12);
border: 1px solid rgba(249, 115, 22, 0.40);
color: #c2410c;
}
.gv-badge-red {
background: rgba(220, 38, 38, 0.12);
border: 1px solid rgba(220, 38, 38, 0.40);
color: #b91c1c;
}
.gv-badge-blue {
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.40);
color: #1d4ed8;
}
.gv-badge-amber {
background: rgba(245, 158, 11, 0.12);
border: 1px solid rgba(245, 158, 11, 0.40);
color: #b45309;
}
.gv-badge-slate {
background: rgba(71, 85, 105, 0.12);
border: 1px solid rgba(71, 85, 105, 0.40);
color: #334155;
}
/* ── Dark-background badge variants (-dk suffix) ─────────── */
.gv-badge-purple-dk {
background: rgba(168, 85, 247, 0.30);
border: 1px solid rgba(168, 85, 247, 0.50);
color: #d8b4fe;
}
.gv-badge-green-dk {
background: rgba(64, 89, 47, 0.30);
border: 1px solid rgba(64, 89, 47, 0.50);
color: #a8c97a;
}
.gv-badge-orange-dk {
background: rgba(249, 115, 22, 0.30);
border: 1px solid rgba(249, 115, 22, 0.50);
color: #fdba74;
}
.gv-badge-red-dk {
background: rgba(220, 38, 38, 0.30);
border: 1px solid rgba(220, 38, 38, 0.50);
color: #fca5a5;
}
.gv-badge-blue-dk {
background: rgba(59, 130, 246, 0.30);
border: 1px solid rgba(59, 130, 246, 0.50);
color: #93c5fd;
}
.gv-badge-amber-dk {
background: rgba(245, 158, 11, 0.30);
border: 1px solid rgba(245, 158, 11, 0.50);
color: #fbbf24;
}
.gv-badge-slate-dk {
background: rgba(71, 85, 105, 0.30);
border: 1px solid rgba(71, 85, 105, 0.50);
color: #cbd5e1;
}
.gv-badge-light {
background: var(--gv-purple-pale);
color: var(--gv-purple-dark);
}
.gv-badge-dark {
background: var(--gv-purple-dark);
color: var(--gv-white);
}
/* ── FORM ELEMENTS ────────────────────────────────────────── */
.gv-input {
width: 100%;
padding: 12px 16px;
border: 1.5px solid var(--gv-gray-light);
border-radius: var(--gv-radius-md);
font-family: var(--gv-font-body);
font-size: 15px;
color: var(--gv-black);
background: var(--gv-white);
outline: none;
transition: border-color 0.2s;
}
.gv-input:focus { border-color: var(--gv-purple-dark); }
.gv-input::placeholder { color: var(--gv-gray-mid); }
.gv-input-label {
font-size: 13px;
font-weight: 600;
color: var(--gv-gray-dark);
display: block;
margin-bottom: 6px;
}
.gv-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235a4067'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 20px;
padding-right: 40px;
cursor: pointer;
}
.gv-toggle {
position: relative;
width: 44px;
height: 26px;
border-radius: 13px;
background: var(--gv-gray-light);
border: none;
cursor: pointer;
transition: background 0.2s;
}
.gv-toggle.on { background: var(--gv-purple-dark); }
.gv-toggle::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--gv-white);
top: 3px;
left: 3px;
transition: left 0.2s;
box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.gv-toggle.on::after { left: 21px; }
/* ── SECTION BACKGROUNDS ──────────────────────────────────── */
.gv-section-white { background: var(--gv-white); }
.gv-section-pale { background: var(--gv-purple-ultra); }
.gv-section-purple { background: var(--gv-purple-dark); color: var(--gv-white); }
/* ── SECTION LABEL (the small tag above headings) ─────────── */
.gv-section-tag {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--gv-purple-dark);
margin-bottom: 14px;
}
.gv-section-tag::before {
content: '';
width: 20px;
height: 2px;
background: var(--gv-purple-dark);
border-radius: 1px;
}
.gv-section-purple .gv-section-tag {
color: rgba(255,255,255,0.5);
}
.gv-section-purple .gv-section-tag::before {
background: rgba(255,255,255,0.3);
}
/* ── STATUS INDICATORS ────────────────────────────────────── */
.gv-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.gv-status-dot.online { background: #10b981; animation: gv-pulse 2s infinite; }
.gv-status-dot.busy { background: #f59e0b; }
.gv-status-dot.offline { background: var(--gv-gray-light); }
@keyframes gv-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.9); }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ── REVEAL ANIMATION ─────────────────────────────────────── */
.gv-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.gv-reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* ── UTILITY CLASSES ──────────────────────────────────────── */
.gv-text-purple { color: var(--gv-purple-dark); }
.gv-text-mid { color: var(--gv-purple-mid); }
.gv-text-muted { color: var(--gv-gray-dark); }
.gv-text-white { color: var(--gv-white); }
.gv-text-center { text-align: center; }
.gv-text-right { text-align: right; }
.gv-mt-sm { margin-top: var(--gv-space-sm); }
.gv-mt-md { margin-top: var(--gv-space-md); }
.gv-mt-lg { margin-top: var(--gv-space-lg); }
.gv-mt-xl { margin-top: var(--gv-space-xl); }
.gv-flex { display: flex; }
.gv-flex-center { display: flex; align-items: center; justify-content: center; }
.gv-gap-sm { gap: var(--gv-space-sm); }
.gv-gap-md { gap: var(--gv-space-md); }
.gv-gap-lg { gap: var(--gv-space-lg); }
.gv-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--gv-space-lg); }
.gv-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gv-space-lg); }
.gv-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--gv-space-lg); }
/* ── LOGO USAGE ───────────────────────────────────────────── */
/*
Logo files (put in /public/assets/):
grapevine-logo-color.png — Full color on white/light backgrounds
grapevine-logo-white.png — White version on dark/purple backgrounds
grapevine-standalone.png — The "g" mark only, for small spaces/favicons
Usage rules:
✓ Use color logo on white or --gv-purple-ultra backgrounds
✓ Use white logo on --gv-purple-dark backgrounds
✓ Maintain clear space equal to the height of the "g" on all sides
✗ Do not recolor the logo
✗ Do not stretch, distort, or rotate
✗ Do not crop the logo
✗ Do not place on busy photographic backgrounds without a scrim
✗ Do not change the typeface
✗ Do not add patterns or effects to the logo
*/
/* ── FONT LOADING ─────────────────────────────────────────── */
/*
Add to your :
Font hierarchy:
Display / Hero: Nunito 900 (closest available web alternative to CoolveticaRg)
Headings: Nunito 800
Subheadings: Nunito Sans 700
Body: Nunito Sans 400
Labels/Caps: Nunito Sans 700 + letter-spacing: 0.08em + text-transform: uppercase
Code/Mono: JetBrains Mono
*/
/* ── COLOR USAGE GUIDE ────────────────────────────────────── */
/*
PRIMARY ACTIONS → --gv-purple-dark (#5a4067)
HOVER STATES → --gv-purple-mid (#9E76B5)
ACCENTS / BORDERS → --gv-purple-light (#A08BC1)
SECTION FILLS → --gv-purple-ultra (#f4f0f8)
CARD TINTS → --gv-purple-pale (#e8dff0)
SUCCESS / LEAF → --gv-green-dark (#40592F)
PRIMARY TEXT → --gv-black (#1a1a1a)
BODY TEXT → --gv-gray-dark (#666666)
LABELS → --gv-gray-mid (#999999)
DIVIDERS → --gv-gray-light (#E2E2E2)
REVERSED TEXT → --gv-white (#ffffff)
*/
/* ── ANIMATIONS ────────────────────────────────────────────── */
@keyframes gv-pulse {
0%, 100% { opacity: 0.75; }
50% { opacity: 0.25; }
}
.gv-refreshing-text {
animation: gv-pulse 1.4s ease-in-out infinite;
display: inline-block;
}
/* ── COUNTDOWN ANIMATIONS ─────────────────────────────────── */
@keyframes gv-countdown-urgent {
0%, 100% { color: #f59e0b; opacity: 1; }
50% { color: #f97316; opacity: 0.65; }
}
.gv-countdown {
display: inline-block;
transition: color 0.6s ease;
}
.gv-countdown-urgent {
animation: gv-countdown-urgent 1s ease-in-out infinite;
}
/* ── MAP REFRESH FLASH ────────────────────────────────────── */
@keyframes gv-refresh-flash-text {
0% { color: #10b981; }
60% { color: #10b981; }
100% { color: inherit; }
}
@keyframes gv-refresh-flash-border {
0% { box-shadow: 0 0 0 2px #10b981; }
70% { box-shadow: 0 0 0 2px rgba(16,185,129,0.25); }
100% { box-shadow: none; }
}
.gv-map-refreshed-text {
animation: gv-refresh-flash-text 0.75s ease-out forwards;
}
.gv-map-refreshed-border {
animation: gv-refresh-flash-border 0.75s ease-out forwards;
}
/* ── UPDATED LABEL ────────────────────────────────────────── */
@keyframes gv-updated-label {
0% { opacity: 0; transform: translateY(-4px); }
10% { opacity: 1; transform: translateY(0); }
70% { opacity: 1; }
100% { opacity: 0; }
}
.gv-updated-label {
display: inline-block;
font-size: 11px;
font-weight: 600;
font-family: var(--gv-font-mono);
color: #10b981;
animation: gv-updated-label 5s ease-out forwards;
}