/* VibeHub design tokens & utility components. * * One file, two purposes: * 1. Tokens (--vh-*) : the canonical palette, spacing, radius and * shadow scales. Every new component should consume these instead * of hard-coding hex values. * 2. Utility classes (.vh-*) : a small set of composable bricks * (button, card, input, badge, pill, modal overlay) that feel the * same across every app. * * Existing per-app classes (.vd-*, .vs-*, .vc-*…) keep working — this * file is additive. New code should prefer .vh-* so the platform looks * like one product, not seventeen. * * Dark mode follows the .dark class set on by base.html (already * the case across the codebase) and prefers-color-scheme as a fallback. */ :root { /* ── Palette — single source of truth ──────────────────────────── */ --vh-primary: #6366F1; --vh-primary-hover: #4F46E5; --vh-primary-soft: #EEF2FF; --vh-primary-on: #FFFFFF; --vh-success: #10B981; --vh-success-soft: #ECFDF5; --vh-warning: #F59E0B; --vh-warning-soft: #FFFBEB; --vh-danger: #EF4444; --vh-danger-hover: #DC2626; --vh-danger-soft: #FEF2F2; --vh-info: #3B82F6; --vh-info-soft: #EFF6FF; --vh-text: #111827; --vh-text-secondary: #4B5563; --vh-text-muted: #9CA3AF; --vh-text-inverse: #FFFFFF; --vh-bg: #FFFFFF; --vh-bg-subtle: #F9FAFB; --vh-bg-elevated: #FFFFFF; --vh-border: rgba(229, 231, 235, 0.8); --vh-border-strong: #D1D5DB; /* ── Spacing scale (4 px grid) ─────────────────────────────────── */ --vh-space-1: 4px; --vh-space-2: 8px; --vh-space-3: 12px; --vh-space-4: 16px; --vh-space-5: 24px; --vh-space-6: 32px; --vh-space-7: 48px; /* ── Radius ────────────────────────────────────────────────────── */ --vh-radius-sm: 6px; --vh-radius-md: 8px; --vh-radius-lg: 12px; --vh-radius-xl: 16px; --vh-radius-pill: 999px; /* ── Shadows ───────────────────────────────────────────────────── */ --vh-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --vh-shadow-md: 0 2px 8px rgba(15, 23, 42, 0.06); --vh-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10); --vh-shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.20); /* ── Motion ────────────────────────────────────────────────────── */ --vh-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --vh-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); /* ── Typography ────────────────────────────────────────────────── */ --vh-font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif; --vh-font-display: "Fraunces", Georgia, "Times New Roman", serif; --vh-font-mono: "JetBrains Mono", "SF Mono", Monaco, Consolas, monospace; /* ── Editorial palette (overrides hero/marketing surfaces) ───── */ --vh-paper: #FBFAF6; /* warm off-white, "paper" */ --vh-paper-deep: #F2EFE7; /* card surface on paper bg */ --vh-ink: #0E0E10; /* nearly-black text */ --vh-ink-soft: #4A4A4D; /* secondary copy */ --vh-ink-mute: #8A8985; --vh-rule: #DAD5C8; /* hairline rules */ --vh-forest: #0F4C36; /* primary accent — saturated forest */ --vh-forest-deep: #0A3528; --vh-forest-soft: #E5EFEA; --vh-marigold: #C97B2C; /* secondary accent for tags / pills */ } .dark, [data-theme="dark"] { --vh-primary-soft: rgba(99, 102, 241, 0.15); --vh-success-soft: rgba(16, 185, 129, 0.12); --vh-warning-soft: rgba(245, 158, 11, 0.12); --vh-danger-soft: rgba(239, 68, 68, 0.12); --vh-info-soft: rgba(59, 130, 246, 0.12); --vh-text: #E5E7EB; --vh-text-secondary: #9CA3AF; --vh-text-muted: #6B7280; --vh-bg: #1C1A17; --vh-bg-subtle: #23201C; --vh-bg-elevated: #23201C; --vh-border: rgba(58, 53, 48, 0.8); --vh-border-strong: #4A4540; --vh-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --vh-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35); --vh-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45); } /* ────────────────────────────────────────────────────────────────── */ /* UTILITY COMPONENTS */ /* ────────────────────────────────────────────────────────────────── */ /* ── Button ─────────────────────────────────────────────────────── */ .vh-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--vh-space-2); padding: var(--vh-space-2) var(--vh-space-4); font: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; border: 1px solid transparent; border-radius: var(--vh-radius-md); background: transparent; color: inherit; cursor: pointer; user-select: none; white-space: nowrap; transition: background var(--vh-transition-fast), border-color var(--vh-transition-fast), color var(--vh-transition-fast), box-shadow var(--vh-transition-fast), transform var(--vh-transition-fast); } .vh-btn:focus-visible { outline: none; box-shadow: var(--vh-shadow-focus); } .vh-btn:active:not(:disabled) { transform: translateY(1px); } .vh-btn:disabled, .vh-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .vh-btn-primary { background: var(--vh-primary); color: var(--vh-primary-on); } .vh-btn-primary:hover:not(:disabled) { background: var(--vh-primary-hover); } .vh-btn-secondary { background: var(--vh-bg-elevated); color: var(--vh-text); border-color: var(--vh-border); } .vh-btn-secondary:hover:not(:disabled) { border-color: var(--vh-border-strong); } .vh-btn-ghost { background: transparent; color: var(--vh-text-secondary); } .vh-btn-ghost:hover:not(:disabled) { background: var(--vh-bg-subtle); color: var(--vh-text); } .vh-btn-danger { background: var(--vh-danger); color: #fff; } .vh-btn-danger:hover:not(:disabled) { background: var(--vh-danger-hover); } .vh-btn-sm { padding: var(--vh-space-1) var(--vh-space-3); font-size: 12.5px; } .vh-btn-lg { padding: var(--vh-space-3) var(--vh-space-5); font-size: 15px; } /* ── Input ─────────────────────────────────────────────────────── */ .vh-input, .vh-textarea, .vh-select { width: 100%; padding: var(--vh-space-2) var(--vh-space-3); font: inherit; font-size: 14px; color: var(--vh-text); background: var(--vh-bg-elevated); border: 1px solid var(--vh-border); border-radius: var(--vh-radius-md); transition: border-color var(--vh-transition-fast), box-shadow var(--vh-transition-fast); } .vh-input:focus, .vh-textarea:focus, .vh-select:focus { outline: none; border-color: var(--vh-primary); box-shadow: var(--vh-shadow-focus); } .vh-input:disabled, .vh-textarea:disabled, .vh-select:disabled { opacity: 0.6; cursor: not-allowed; background: var(--vh-bg-subtle); } .vh-input::placeholder { color: var(--vh-text-muted); } .vh-textarea { resize: vertical; min-height: 80px; } /* ── Card ──────────────────────────────────────────────────────── */ .vh-card { background: var(--vh-bg-elevated); border: 1px solid var(--vh-border); border-radius: var(--vh-radius-lg); box-shadow: var(--vh-shadow-sm); } .vh-card-padded { padding: var(--vh-space-5); } .vh-card-hover { transition: border-color var(--vh-transition), box-shadow var(--vh-transition); } .vh-card-hover:hover { border-color: var(--vh-border-strong); box-shadow: var(--vh-shadow-md); } /* ── Badge / pill ──────────────────────────────────────────────── */ .vh-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 11.5px; font-weight: 600; line-height: 1.4; border-radius: var(--vh-radius-pill); background: var(--vh-bg-subtle); color: var(--vh-text-secondary); } .vh-badge-primary { background: var(--vh-primary-soft); color: var(--vh-primary); } .vh-badge-success { background: var(--vh-success-soft); color: var(--vh-success); } .vh-badge-warning { background: var(--vh-warning-soft); color: var(--vh-warning); } .vh-badge-danger { background: var(--vh-danger-soft); color: var(--vh-danger); } .vh-badge-info { background: var(--vh-info-soft); color: var(--vh-info); } /* ── Empty state ───────────────────────────────────────────────── */ .vh-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--vh-space-7) var(--vh-space-5); text-align: center; color: var(--vh-text-muted); gap: var(--vh-space-3); } .vh-empty-icon { width: 48px; height: 48px; border-radius: var(--vh-radius-xl); background: var(--vh-bg-subtle); display: inline-flex; align-items: center; justify-content: center; color: var(--vh-text-muted); } .vh-empty-title { color: var(--vh-text); font-weight: 600; font-size: 15px; margin: 0; } .vh-empty-desc { font-size: 13px; max-width: 28em; line-height: 1.5; margin: 0; } /* ── Modal overlay ─────────────────────────────────────────────── */ .vh-modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 50; padding: var(--vh-space-4); } .vh-modal-card { background: var(--vh-bg-elevated); border: 1px solid var(--vh-border); border-radius: var(--vh-radius-xl); box-shadow: var(--vh-shadow-lg); max-width: 100%; max-height: calc(100vh - 2 * var(--vh-space-4)); overflow: auto; } /* ── Loading skeleton ──────────────────────────────────────────── */ @keyframes vh-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .vh-skeleton { background: var(--vh-bg-subtle); border-radius: var(--vh-radius-md); animation: vh-skeleton-pulse 1.4s ease-in-out infinite; } /* ── Spinner ───────────────────────────────────────────────────── */ @keyframes vh-spin { to { transform: rotate(360deg); } } .vh-spinner { width: 1em; height: 1em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: vh-spin 0.6s linear infinite; } /* ── Toast ─────────────────────────────────────────────────────── */ .vh-toast { display: inline-flex; align-items: center; gap: var(--vh-space-2); padding: var(--vh-space-3) var(--vh-space-4); font-size: 13px; border-radius: var(--vh-radius-md); background: var(--vh-text); color: var(--vh-text-inverse); box-shadow: var(--vh-shadow-lg); } .vh-toast-success { background: var(--vh-success); } .vh-toast-danger { background: var(--vh-danger); } /* ── Reduced motion respect ────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .vh-btn, .vh-input, .vh-card-hover { transition: none; } .vh-skeleton, .vh-spinner { animation: none; } } /* ── A11y: visible focus on every keyboard-focusable control ───── */ /* Tailwind/Alpine apps often suppress :focus rings ; this restores * them for keyboard users without affecting click/tap focus. Targets * elements whose existing styles didn't already define a custom ring * via :focus-visible (browsers respect later cascade). */ button:focus-visible, [role="button"]:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--vh-primary); outline-offset: 2px; border-radius: var(--vh-radius-sm); } /* Don't double-ring the components that already define their own */ .vh-btn:focus-visible, .vh-input:focus, .vh-textarea:focus, .vh-select:focus { outline: none; } /* ────────────────────────────────────────────────────────────────── */ /* LEGACY ALIASES */ /* ────────────────────────────────────────────────────────────────── */ /* Each app shipped its own .{prefix}-btn / -input / -card system. We * align them with the tokens above so the primary action looks the * same everywhere without rewriting every template. New code MUST use * .vh-* directly — this section is transitional. */ /* Per-app button primaries → all flow through --vh-primary */ .vd-btn-primary, .vc-btn-primary, .vi-btn-primary, .vmg-btn-primary, .vg-btn-primary, .vs-btn-primary, .vk-btn-primary { background: var(--vh-primary) !important; color: var(--vh-primary-on) !important; } .vd-btn-primary:hover, .vc-btn-primary:hover, .vi-btn-primary:hover, .vmg-btn-primary:hover, .vg-btn-primary:hover, .vs-btn-primary:hover, .vk-btn-primary:hover { background: var(--vh-primary-hover) !important; } /* Danger across apps */ .vd-btn-danger, .vc-btn-danger, .vi-btn-danger, .vmg-btn-danger, .vg-btn-danger, .vs-btn-danger { background: var(--vh-danger) !important; color: #fff !important; } .vd-btn-danger:hover, .vc-btn-danger:hover, .vi-btn-danger:hover, .vmg-btn-danger:hover, .vg-btn-danger:hover, .vs-btn-danger:hover { background: var(--vh-danger-hover) !important; } /* Marketplace's "btn-accent" used across the home / pricing / landing * pages — points at the primary token now. No-op for callsites that * already used indigo. */ .btn-accent { background: var(--vh-primary) !important; color: var(--vh-primary-on) !important; } .btn-accent:hover { background: var(--vh-primary-hover) !important; } /* Input focus ring — homogeneous across apps */ .vd-input:focus, .vc-input:focus, .vi-input:focus, .vmg-input:focus, .vg-input:focus, .vs-input:focus, .vk-input:focus { border-color: var(--vh-primary) !important; box-shadow: var(--vh-shadow-focus) !important; outline: none !important; } /* ───────────────────────────────────────────────────────────────── Editorial header overrides — applied on body.editorial only. Marketing, auth, onboarding, legal pages get a paper-themed header instead of the purple gradient. App pages keep purple. ───────────────────────────────────────────────────────────────── */ body.editorial .vh-header { background: var(--vh-paper, #FBFAF6) !important; border-bottom: 1px solid var(--vh-rule, #DAD5C8) !important; box-shadow: none !important; } body.editorial .vh-header .vh-logo-icon { background: var(--vh-paper, #FBFAF6); color: var(--vh-ink, #0E0E10); border: 1px solid var(--vh-ink, #0E0E10); font-family: var(--vh-font-display, "Fraunces"), serif; font-weight: 500; letter-spacing: -0.02em; } body.editorial .vh-header .vh-logo-icon:hover { background: var(--vh-ink, #0E0E10); color: var(--vh-paper, #FBFAF6); } body.editorial .vh-header span { color: var(--vh-ink, #0E0E10) !important; } body.editorial .vh-header .vh-search-trigger, body.editorial .vh-header .vh-search-input { background: transparent; border: 1px solid var(--vh-rule, #DAD5C8); color: var(--vh-ink-soft, #4A4A4D); } body.editorial .vh-header .vh-search-trigger:hover { background: var(--vh-paper-deep, #F2EFE7); color: var(--vh-ink, #0E0E10); } body.editorial .vh-header .vh-search-trigger kbd, body.editorial .vh-header .vh-search-kbd { background: var(--vh-paper-deep, #F2EFE7); color: var(--vh-ink-mute, #8A8985); } body.editorial .vh-header .vh-catalogue-btn { background: transparent; border: 1px solid var(--vh-ink, #0E0E10); color: var(--vh-ink, #0E0E10); } body.editorial .vh-header .vh-catalogue-btn:hover { background: var(--vh-ink, #0E0E10); color: var(--vh-paper, #FBFAF6); } body.editorial .vh-header .vh-action-btn { color: var(--vh-ink-soft, #4A4A4D); } body.editorial .vh-header .vh-action-btn:hover { background: var(--vh-paper-deep, #F2EFE7); color: var(--vh-ink, #0E0E10); } body.editorial .vh-header .w-px[class*="bg-white"] { background: var(--vh-rule, #DAD5C8) !important; } /* Anonymous CTAs (Connexion / Inscription) */ body.editorial .vh-header a[href*="connexion"], body.editorial .vh-header a[href*="inscription"] { color: var(--vh-ink, #0E0E10) !important; } /* Avatar — keep its gradient since it's a user identity element, but soften */ body.editorial .vh-header .vh-avatar { border-color: var(--vh-rule, #DAD5C8); } body.editorial .vh-header .vh-notif-badge { box-shadow: 0 0 0 2px var(--vh-paper, #FBFAF6); } /* Dark mode editorial: keep the chrome readable */ .dark body.editorial .vh-header { background: #1A1815 !important; border-bottom-color: #3A3530 !important; } .dark body.editorial .vh-header .vh-logo-icon { background: #1A1815; color: #E8E4DE; border-color: #E8E4DE; } .dark body.editorial .vh-header span { color: #E8E4DE !important; } /* Editorial: Inscription CTA in the header — switch from indigo gradient btn-accent to black cta-primary equivalent so it matches the editorial system (and matches the .cta-primary on /tarifs etc.). */ body.editorial .vh-header a[href*="inscription"].btn-accent { background: var(--vh-ink, #0E0E10) !important; color: var(--vh-paper, #FBFAF6) !important; border-radius: 0; font-weight: 500; } body.editorial .vh-header a[href*="inscription"].btn-accent:hover { background: var(--vh-forest, #0F4C36) !important; transform: translate(2px, -2px); }