/* * VibesNearby Design System — Component Layer * Sits on top of vibes-shared-site-shell.css * Harmonizes ALL card, profile, event, CTA, and animation styles * across every page type: discover, city hubs, artists, venues, * events, featured pages, activation, creator hub, radio, etc. * * LOAD ORDER (in every page ): * 1. vibes-shared-site-shell.css (tokens, body bg, base nav) * 2. vibes-design-system.css (this file — all components) * 3. page-specific CSS if needed (only for unique layouts) */ /* ── TOKEN ALIASES ────────────────────────────────── * Map legacy --vn-* tokens to the homepage design system * so pages using vibes-activation-assets.css auto-inherit * the correct colors without editing their HTML. */ :root { /* Activation / legacy aliases */ --vn-bg: var(--bg); --vn-panel: var(--sf); --vn-panel-2: var(--sf2); --vn-text: var(--text); --vn-muted: var(--muted2); --vn-line: var(--bd); --vn-accent: var(--cyan); --vn-accent2: var(--hot); --vn-gold: var(--gold); /* Shell aliases */ --vn-shell-bg: var(--bg); --vn-shell-card: var(--sf); --vn-shell-line: var(--bd); --vn-shell-text: var(--text); --vn-shell-muted: var(--muted2); --vn-shell-accent: var(--cyan); --vn-shell-accent-2: var(--hot); --vn-shell-gold: var(--gold); /* Animation timing */ --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-smooth: cubic-bezier(.22, 1, .36, 1); --dur-fast: .18s; --dur-med: .28s; --dur-slow: .45s; } /* ── FONT OVERRIDE ─────────────────────────────────── * Force Syne + DM Sans everywhere — kills Inter fallback */ body, .vn-body, .vn-wrap, .vn-hero, .vn-card, .vn-event-card, .vn-profile-card, .discover-hero, .discover-card, .city-hub-hero, .city-card, h1, h2, h3, h4 { font-family: var(--fb); } h1, h2, h3, h4, .vn-hero h1, .vn-hero h2, .discover-hero h1, .city-hub-hero h1, .vn-kicker, .discover-kicker, .city-kicker { font-family: var(--fd); } /* ── HERO BLOCKS ───────────────────────────────────── * discover-hero, city-hub-hero, vn-hero, etc. * All inherit the same premium card treatment */ .vn-hero, .discover-hero, .city-hub-hero, .program-hero, .creator-hero, .radio-hero { background: radial-gradient(circle at 15% 10%, rgba(255,45,120,.14), transparent 38%), radial-gradient(circle at 85% 15%, rgba(124,63,255,.16), transparent 36%), rgba(255,255,255,.06) !important; border: 1px solid var(--bd2) !important; border-radius: 28px !important; box-shadow: var(--shadow-l) !important; padding: 52px 40px !important; position: relative; overflow: hidden; } .vn-hero::after, .discover-hero::after, .city-hub-hero::after { content: ''; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,45,120,.2), transparent 68%); pointer-events: none; } /* Kicker / eyebrow label inside heroes */ .vn-kicker, .discover-kicker, .city-kicker, .program-kicker { color: var(--gold) !important; font-family: var(--fd) !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: .14em !important; text-transform: uppercase !important; margin-bottom: 14px; display: inline-block; } /* Hero h1 */ .vn-hero h1, .discover-hero h1, .city-hub-hero h1 { font-size: clamp(36px, 5vw, 68px) !important; line-height: 1.02 !important; letter-spacing: -1.8px !important; margin: 12px 0 18px !important; color: var(--text) !important; } /* Hero body text */ .vn-hero p, .discover-hero p, .city-hub-hero p { font-size: 17px !important; line-height: 1.7 !important; color: var(--muted2) !important; max-width: 820px; font-weight: 300; } /* ── CARD GRID CONTAINERS ────────────────────────────*/ .vn-grid, .discover-grid, .city-grid, .program-grid, .vn-directory-list, .artists-grid, .venues-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; margin-top: 28px; } .vn-grid.two, .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } @media (max-width: 980px) { .vn-grid, .discover-grid, .city-grid, .program-grid, .vn-directory-list, .artists-grid, .venues-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 600px) { .vn-grid, .discover-grid, .city-grid, .program-grid, .vn-directory-list, .artists-grid, .venues-grid, .vn-grid.two { grid-template-columns: 1fr !important; } } /* ── BASE CARD ─────────────────────────────────────── * Applies to every card type across every page */ .vn-card, .card, .asset-card, .page-card, .feature-card, .offer-card, .discover-card, .city-card, .program-card, .creator-card, .radio-card, .vn-event-card, .vn-profile-card, .panel { background: var(--sf) !important; border: 1px solid var(--bd) !important; border-radius: var(--rl) !important; box-shadow: var(--shadow-m) !important; padding: 24px !important; position: relative; overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur-med) var(--ease-spring), border-color var(--dur-med) ease, box-shadow var(--dur-med) ease !important; } /* Inner glow orb on cards (replaces each card's ::before) */ .vn-card::before, .discover-card::before, .city-card::before, .program-card::before, .vn-event-card::before, .vn-profile-card::before { content: ''; position: absolute; right: -40px; bottom: -40px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(255,45,120,.12), transparent 68%); pointer-events: none; } /* Card hover */ .vn-card:hover, .card:hover, .asset-card:hover, .page-card:hover, .feature-card:hover, .offer-card:hover, .discover-card:hover, .city-card:hover, .program-card:hover, .vn-event-card:hover, .vn-profile-card:hover { transform: translateY(-6px) !important; border-color: rgba(255,45,120,.28) !important; box-shadow: var(--shadow-l), var(--glow-hot) !important; } /* Card icon badge */ .discover-icon, .city-icon, .program-icon, .creator-icon, .vn-card-icon { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, rgba(255,45,120,.22), rgba(124,63,255,.18)); display: grid; place-items: center; font-size: 22px; margin-bottom: 18px; flex-shrink: 0; border: 1px solid rgba(255,45,120,.15); } /* Card headings */ .vn-card h2, .vn-card h3, .discover-card h3, .city-card h3, .program-card h3, .vn-event-card h3, .vn-profile-card h3, .panel h2, .panel h3 { font-family: var(--fd) !important; font-size: 20px !important; font-weight: 800 !important; letter-spacing: -.4px !important; margin: 0 0 10px !important; color: var(--text) !important; } /* Card body text */ .vn-card p, .vn-card li, .discover-card p, .city-card p, .program-card p, .vn-event-card p, .vn-profile-card p { font-size: 14px !important; line-height: 1.65 !important; color: var(--muted2) !important; font-weight: 300 !important; } /* ── PROFILE CARDS (Artists / Venues) ────────────────*/ .vn-profile-card { gap: 0; } .vn-profile-card h3 { font-size: 19px !important; margin-bottom: 6px !important; } .vn-profile-meta, .vn-event-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 !important; } .vn-profile-meta span, .vn-event-meta span { border: 1px solid var(--bd) !important; border-radius: 999px !important; padding: 5px 12px !important; color: var(--muted2) !important; background: var(--sf) !important; font-size: 12px !important; font-weight: 500 !important; } /* Featured badge */ .vn-featured-badge { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, var(--gold), #ffef9a) !important; color: #16120a !important; font-family: var(--fd) !important; font-weight: 900 !important; border-radius: 999px !important; padding: 5px 12px !important; font-size: 11px !important; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; } .vn-featured-badge::before { content: '★'; font-size: 10px; } /* Empty state */ .vn-empty { padding: 32px 24px; border: 1px dashed var(--bd2) !important; border-radius: var(--rl) !important; color: var(--muted) !important; text-align: center; background: var(--sf); } /* ── EVENT CARDS ─────────────────────────────────────*/ .vn-events-list { display: grid; gap: 16px; margin-top: 22px; } .vn-event-card { display: grid !important; grid-template-columns: auto 1fr; gap: 20px; align-items: start; border-left: 3px solid var(--hot) !important; padding: 20px 24px !important; } .vn-event-date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 56px; padding: 8px; background: rgba(255,45,120,.1); border: 1px solid rgba(255,45,120,.2); border-radius: var(--rs); text-align: center; } .vn-event-date .month { font-size: 11px; font-weight: 700; color: var(--hot); text-transform: uppercase; letter-spacing: .08em; } .vn-event-date .day { font-family: var(--fd); font-size: 26px; font-weight: 800; line-height: 1; color: var(--text); } .vn-event-body { flex: 1; } .vn-event-body h3 { font-size: 18px !important; } /* ── FILTER / SEARCH TOOLS ───────────────────────────*/ .vn-directory-tools, .vn-events-tools { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; margin: 24px 0 !important; } .vn-directory-tools input, .vn-directory-tools select, .vn-events-tools input, .vn-events-tools select { width: 100% !important; padding: 12px 16px !important; border-radius: var(--rs) !important; border: 1px solid var(--bd) !important; background: rgba(255,255,255,.05) !important; color: var(--text) !important; font-family: var(--fb) !important; font-size: 14px !important; transition: border-color .2s, background .2s; } .vn-directory-tools input:focus, .vn-events-tools input:focus, .vn-directory-tools select:focus, .vn-events-tools select:focus { border-color: var(--hot) !important; background: rgba(255,255,255,.08) !important; outline: none; } /* ── BUTTONS ───────────────────────────────────────── * Override the legacy teal-on-dark buttons from activation * to use the homepage hot-pink/violet gradient */ .vn-btn, a.vn-btn, button.vn-btn, .vn-nav a, .discover-cta, .city-cta, .program-cta, .creator-cta { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-height: 48px !important; padding: 0 22px !important; border-radius: var(--rm) !important; font-family: var(--fd) !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: .02em !important; text-decoration: none !important; cursor: pointer !important; transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) ease !important; white-space: nowrap; border: 1px solid transparent !important; /* Default: primary */ background: linear-gradient(135deg, var(--hot), var(--violet)) !important; color: #fff !important; box-shadow: 0 8px 28px rgba(255,45,120,.38) !important; text-shadow: none !important; } .vn-btn:hover, a.vn-btn:hover, .discover-cta:hover, .city-cta:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 36px rgba(255,45,120,.52) !important; filter: none !important; } /* Secondary / ghost variant */ .vn-btn.secondary, a.vn-btn.secondary, .discover-cta.secondary, .city-cta.secondary, .btn.secondary { background: var(--sf) !important; border-color: var(--bd) !important; color: var(--text) !important; box-shadow: none !important; } .vn-btn.secondary:hover { background: var(--sf2) !important; border-color: var(--bd2) !important; } /* Gold accent CTA */ .vn-btn.gold, a.vn-btn.gold, .discover-cta.gold, .btn.gold { background: linear-gradient(135deg, var(--gold), #ffef9a) !important; color: #181008 !important; box-shadow: 0 8px 28px rgba(255,179,71,.38) !important; } /* Amazon CTA */ .btn-amazon, .vn-btn-amazon { background: linear-gradient(135deg, #00a8e0, #0066cc) !important; color: #fff !important; box-shadow: 0 8px 28px rgba(0,168,224,.35) !important; } /* Event-specific CTA (gold) */ .vn-event-card a, #vnEventsList a { background: linear-gradient(135deg, var(--gold), #fff2b0) !important; color: #181008 !important; box-shadow: 0 8px 24px rgba(255,179,71,.32) !important; margin-top: 14px; min-height: 42px !important; } /* Focus ring */ .vn-btn:focus-visible, a.vn-btn:focus-visible, .btn:focus-visible, .discover-cta:focus-visible { outline: 3px solid rgba(255,45,120,.7) !important; outline-offset: 3px !important; } /* ── CTA STRIP / CALLOUT BAND ────────────────────────*/ .events-cta-strip, .vn-events-cta-strip, .cta-band, .vn-cta-band { margin: 28px 0; padding: 28px 32px; border-radius: var(--rl); border: 1px solid rgba(255,45,120,.18) !important; background: linear-gradient(135deg, rgba(255,45,120,.07), rgba(124,63,255,.07)) !important; position: relative; overflow: hidden; } .events-cta-strip::before, .vn-cta-band::before { content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255,45,120,.15), transparent 65%); pointer-events: none; } .events-cta-strip h2, .vn-events-cta-strip h2, .cta-band h2 { font-family: var(--fd) !important; margin: 0 0 10px !important; color: var(--text) !important; } /* ── NAV (activation pages use .vn-nav) ─────────────*/ .vn-nav { display: flex; flex-wrap: wrap; gap: 6px; } .vn-nav a { font-size: 14px !important; font-weight: 500 !important; color: var(--muted2) !important; padding: 8px 14px !important; border-radius: var(--rs) !important; background: transparent !important; border: none !important; box-shadow: none !important; text-decoration: none !important; transition: color .2s, background .2s !important; letter-spacing: .01em !important; } .vn-nav a:hover { color: var(--text) !important; background: var(--sf) !important; } /* ── FORMS ───────────────────────────────────────────*/ .vn-form, .vn-form-group, form.vn-form { display: grid; gap: 16px; margin-top: 20px; } .vn-form label, .vn-form-label { font-family: var(--fd); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted2); margin-bottom: 6px; display: block; } .vn-form input, .vn-form textarea, .vn-form select { width: 100%; padding: 13px 16px; border-radius: var(--rm); border: 1px solid var(--bd); background: rgba(255,255,255,.05); color: var(--text); font-family: var(--fb); font-size: 15px; transition: border-color .2s, background .2s; } .vn-form input:focus, .vn-form textarea:focus, .vn-form select:focus { border-color: var(--hot); background: rgba(255,255,255,.08); outline: none; } .vn-form textarea { min-height: 130px; resize: vertical; } /* ── PILL TAGS ───────────────────────────────────────*/ .vn-pill, .tag-pill { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--bd) !important; border-radius: 999px !important; padding: 5px 12px !important; color: var(--muted2) !important; background: var(--sf) !important; font-size: 12px !important; font-weight: 500 !important; transition: border-color .2s, background .2s; } .vn-pill:hover { border-color: var(--bd2) !important; background: var(--sf2) !important; } /* ── TABLE ───────────────────────────────────────────*/ .vn-table, .table { width: 100%; border-collapse: collapse; border-radius: var(--rm); overflow: hidden; } .vn-table th, .vn-table td, .table th, .table td { padding: 14px 16px; border-bottom: 1px solid var(--bd); text-align: left; font-size: 14px; } .vn-table th, .table th { background: var(--sf); font-family: var(--fd); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted2); } .vn-table td, .table td { color: var(--muted2); } .vn-table tr:last-child td, .table tr:last-child td { border-bottom: none; } /* ── PAGE SECTION WRAPPER ────────────────────────────*/ .vn-section, .vn-wrap section, .vn-content section { padding: 48px 0; position: relative; z-index: 1; } .vn-section h2 { font-family: var(--fd) !important; font-size: clamp(26px, 3vw, 40px) !important; font-weight: 800 !important; letter-spacing: -0.8px !important; margin-bottom: 10px !important; } /* ── LOAD-IN ANIMATIONS ──────────────────────────────*/ @keyframes vnRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes vnFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes vnPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.75); } } /* Staggered card entrances */ .vn-card, .discover-card, .city-card, .program-card, .vn-event-card, .vn-profile-card, .feature-card, .asset-card, .page-card, .offer-card { animation: vnRise var(--dur-slow) var(--ease-smooth) both; } .vn-card:nth-child(2), .discover-card:nth-child(2), .city-card:nth-child(2), .vn-event-card:nth-child(2), .vn-profile-card:nth-child(2) { animation-delay: .06s; } .vn-card:nth-child(3), .discover-card:nth-child(3), .city-card:nth-child(3), .vn-event-card:nth-child(3), .vn-profile-card:nth-child(3) { animation-delay: .12s; } .vn-card:nth-child(4), .discover-card:nth-child(4), .city-card:nth-child(4), .vn-event-card:nth-child(4), .vn-profile-card:nth-child(4) { animation-delay: .18s; } .vn-card:nth-child(5), .vn-profile-card:nth-child(5) { animation-delay: .24s; } .vn-card:nth-child(6), .vn-profile-card:nth-child(6) { animation-delay: .28s; } /* Hero entrance */ .vn-hero, .discover-hero, .city-hub-hero { animation: vnFadeIn .6s var(--ease-smooth) both; } /* Live dot pulse */ .dot { animation: vnPulse 1.6s ease-in-out infinite; } /* ── FOOTER (activation pages use .vn-footer) ────────*/ .vn-footer, footer.vn-footer { border-top: 1px solid var(--bd) !important; margin-top: 48px; padding: 40px 0 60px !important; color: var(--muted) !important; } /* ── MOBILE RESPONSIVE ───────────────────────────────*/ @media (max-width: 760px) { .vn-hero, .discover-hero, .city-hub-hero { padding: 36px 24px !important; } .vn-event-card { grid-template-columns: 1fr !important; } .vn-directory-tools, .vn-events-tools { grid-template-columns: 1fr 1fr !important; } .events-cta-strip, .vn-cta-band { padding: 20px !important; } } @media (max-width: 480px) { .vn-directory-tools, .vn-events-tools { grid-template-columns: 1fr !important; } } /* ── REDUCED MOTION ──────────────────────────────────*/ @media (prefers-reduced-motion: reduce) { .vn-card, .discover-card, .city-card, .program-card, .vn-event-card, .vn-profile-card, .vn-hero, .discover-hero, .city-hub-hero, .feature-card, .asset-card, .page-card, .offer-card, .vn-btn, a.vn-btn, button.vn-btn, .btn, a.btn, button.btn, .discover-cta, .city-cta { animation: none !important; transition: none !important; transform: none !important; } }