/* ============================================================================ * base.css — DEMO v2 · Cofoundy design system * ---------------------------------------------------------------------------- * Design tokens extracted from @cofoundy/ui (packages/ui/src/styles/index.css) * + the Cofoundy Brand Book. Replaces the WhatsApp-derived palette of v1 * with the actual brand: #46A0D0 primary on #020b1b midnight, Space Grotesk * for display, Inter for body, JetBrains Mono for tabular numbers. * ============================================================================ */ :root { /* ============================================================================ * COLOR — Cofoundy palette * ============================================================================ */ /* Surfaces (midnight stack with subtle warm undertone) */ --bg-primary: #020b1b; /* midnight canvas */ --bg-secondary: #0a1426; /* card surface (one step up) */ --bg-tertiary: #11203a; /* elevated panels, table headers */ --bg-elevated: #18294a; /* hover, inputs, segmented controls */ --bg-overlay: rgba(2, 11, 27, 0.78); /* Glass surfaces (used over imagery/gradients) */ --glass-card: rgba(255, 255, 255, 0.04); --glass-card-hover: rgba(255, 255, 255, 0.07); --glass-border: rgba(255, 255, 255, 0.08); --glass-border-soft: rgba(255, 255, 255, 0.04); /* Text */ --text-primary: #f8fafc; /* slate-50 */ --text-secondary: #cbd5e1; /* slate-300 */ --text-muted: #94a3b8; /* slate-400 */ --text-faint: #64748b; /* slate-500 */ --text-inverse: #020b1b; /* Borders */ --border-subtle: rgba(255, 255, 255, 0.06); --border-strong: rgba(255, 255, 255, 0.10); --border-accent: rgba(255, 255, 255, 0.16); /* Brand · primary blue (Cofoundy) */ --cofoundy-primary: #46A0D0; --cofoundy-primary-hi: #6BB8DD; --cofoundy-primary-lo: #2984AD; --cofoundy-deep: #1B577E; --cofoundy-midnight: #020b1b; /* Brand · semantic accents (legacy aliases — keep for unchanged JS) */ --cofoundy-accent: var(--cofoundy-primary); --cofoundy-accent-hi: var(--cofoundy-primary-hi); --cofoundy-purple: #9333ea; /* Tier colors — distinct, subdued, sit well on midnight */ --tier-a: #8B5CF6; /* violet (premium / strategic) */ --tier-b: #46A0D0; /* brand blue (medium) */ --tier-c: #94a3b8; /* slate (small / standard) */ /* Status — semantic, brand-aligned */ --status-regular: #10B981; /* emerald-500 */ --status-amarillo: #F59E0B; /* amber-500 */ --status-rojo: #EF4444; /* red-500 */ --status-success: var(--status-regular); --status-warning: var(--status-amarillo); --status-error: var(--status-rojo); --status-info: var(--cofoundy-primary); /* Channel colors */ --channel-whatsapp: #25D366; --channel-email: #94a3b8; /* Convenience semantic aliases (used by v1 CSS — keep) */ --color-success: var(--status-regular); --color-warning: var(--status-amarillo); --color-danger: var(--status-rojo); --color-info: var(--cofoundy-primary); /* ============================================================================ * TYPOGRAPHY — Cofoundy brand fonts (loaded via Google Fonts in ) * ============================================================================ */ --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif; --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* Type scale (refined — more contrast between steps) */ --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px; --fs-3xl: 36px; --fs-4xl: 52px; --fs-5xl: 72px; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.5; --lh-loose: 1.65; /* Letter spacing for display type */ --tracking-tight: -0.02em; --tracking-tighter: -0.03em; --tracking-wide: 0.06em; --tracking-wider: 0.12em; /* ============================================================================ * SPACING — 4px base, generous rhythm * ============================================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 64px; --space-10: 80px; --space-12: 96px; /* ============================================================================ * RADII — slightly larger, more "designed" * ============================================================================ */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-pill: 999px; /* ============================================================================ * SHADOWS — layered for elevation * ============================================================================ */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-elevated: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-modal: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 64px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 0 1px rgba(70, 160, 208, 0.4), 0 8px 32px rgba(70, 160, 208, 0.18); /* ============================================================================ * MOTION — Cofoundy easings ("Velocidad con Propósito") * ============================================================================ */ --ease-default: cubic-bezier(0.19, 1, 0.22, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1); --t-fast: 140ms var(--ease-default); --t-base: 200ms var(--ease-default); --t-slow: 320ms var(--ease-default); /* ============================================================================ * LAYOUT * ============================================================================ */ --topbar-h: 64px; --sidebar-w: 232px; --content-max: 1440px; --z-topbar: 50; --z-sidebar: 40; --z-modal: 200; --z-toast: 300; } /* ============================================================================ * Reset * ============================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--text-primary); background-color: var(--bg-primary); background-image: radial-gradient(ellipse at 0% 0%, rgba(70, 160, 208, 0.08), transparent 45%), radial-gradient(ellipse at 100% 100%, rgba(27, 87, 126, 0.10), transparent 45%); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11', 'ss01'; overflow-x: hidden; } a { color: var(--cofoundy-primary-hi); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--cofoundy-primary); text-decoration: none; } button { font: inherit; cursor: pointer; } img, svg { display: block; max-width: 100%; } /* Scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: var(--radius-pill); border: 2px solid var(--bg-primary); } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.16); } ::selection { background: rgba(70, 160, 208, 0.35); color: var(--text-primary); } /* ============================================================================ * App shell — topbar + sidebar + main * ============================================================================ */ .app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; grid-template-areas: "topbar topbar" "sidebar main"; min-height: 100vh; } /* --- Topbar -------------------------------------------------------------- */ .topbar { grid-area: topbar; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: 0 var(--space-6); background: rgba(2, 11, 27, 0.72); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid var(--border-strong); z-index: var(--z-topbar); position: sticky; top: 0; } .topbar__brand { display: flex; align-items: center; gap: var(--space-4); } .topbar__logo { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.16), transparent 60%), linear-gradient(135deg, var(--cofoundy-primary), var(--cofoundy-deep)); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.04em; box-shadow: 0 4px 12px rgba(70, 160, 208, 0.35), inset 0 1px 0 rgba(255,255,255,0.2); flex-shrink: 0; } .topbar__title { color: var(--text-primary); font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .topbar__title-suffix { color: var(--text-muted); font-weight: 400; margin-left: 4px; } .topbar__breadcrumb { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500; padding-left: var(--space-4); margin-left: var(--space-2); border-left: 1px solid var(--border-strong); } .topbar__meta { display: flex; align-items: center; gap: var(--space-5); font-size: var(--fs-sm); } .topbar__date { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: var(--space-2); } .topbar__date::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--status-regular); box-shadow: 0 0 8px rgba(16, 185, 129, 0.6); } .topbar__user { display: inline-flex; align-items: center; gap: var(--space-3); padding-left: var(--space-5); border-left: 1px solid var(--border-strong); } .topbar__user-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--cofoundy-primary), var(--cofoundy-deep)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 11px; flex-shrink: 0; } .topbar__user-info { display: flex; flex-direction: column; line-height: 1.2; } .topbar__user-name { color: var(--text-primary); font-size: var(--fs-sm); font-weight: 600; } .topbar__user-role { color: var(--text-faint); font-size: var(--fs-2xs); font-weight: 500; } /* --- Sidebar ------------------------------------------------------------- */ .sidebar-nav { grid-area: sidebar; display: flex; flex-direction: column; background: rgba(10, 20, 38, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-right: 1px solid var(--border-strong); padding: var(--space-5) var(--space-3); gap: 2px; position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto; z-index: var(--z-sidebar); } .sidebar-nav__section-label { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: var(--tracking-wider); padding: var(--space-2) var(--space-3) var(--space-2); margin-top: var(--space-2); } .sidebar-nav__section-label:first-child { margin-top: 0; } .sidebar-nav .nav-link { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-3); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; transition: background var(--t-fast), color var(--t-fast); position: relative; } .sidebar-nav .nav-link__icon { width: 18px; height: 18px; flex-shrink: 0; color: currentColor; opacity: 0.7; } .sidebar-nav .nav-link:hover { background: rgba(255, 255, 255, 0.04); color: var(--text-primary); text-decoration: none; } .sidebar-nav .nav-link:hover .nav-link__icon { opacity: 1; } .sidebar-nav .nav-link--active { background: linear-gradient(90deg, rgba(70, 160, 208, 0.18), rgba(70, 160, 208, 0.04)); color: var(--cofoundy-primary-hi); font-weight: 600; } .sidebar-nav .nav-link--active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cofoundy-primary); box-shadow: 0 0 8px rgba(70, 160, 208, 0.6); } .sidebar-nav .nav-link--active .nav-link__icon { opacity: 1; color: var(--cofoundy-primary-hi); } .sidebar-nav .nav-link__badge { margin-left: auto; background: var(--status-rojo); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-pill); min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; } .sidebar-nav__footer { margin-top: auto; padding: var(--space-4) var(--space-3) var(--space-2); border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 2px; } .sidebar-nav__footer small { color: var(--text-faint); font-size: var(--fs-2xs); font-family: var(--font-mono); letter-spacing: 0.02em; } .sidebar-nav__footer small.tag-demo { color: var(--cofoundy-primary-hi); font-weight: 600; } /* --- Main ---------------------------------------------------------------- */ .main-content { grid-area: main; padding: var(--space-6) var(--space-7) var(--space-8); min-width: 0; max-width: var(--content-max); } .main-content > * + * { margin-top: var(--space-6); } /* --- Page header --------------------------------------------------------- */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-subtle); } .page-header__title { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; color: var(--text-primary); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-2); } .page-header__subtitle { color: var(--text-muted); font-size: var(--fs-md); font-weight: 400; max-width: 720px; line-height: var(--lh-loose); } .page-header__actions { display: flex; gap: var(--space-2); flex-shrink: 0; } /* --- Section ------------------------------------------------------------- */ .section { display: flex; flex-direction: column; gap: var(--space-4); } .section__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .section__title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; color: var(--text-primary); letter-spacing: var(--tracking-tight); display: inline-flex; align-items: center; gap: var(--space-3); } .section__subtitle { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; } /* --- Utility primitives -------------------------------------------------- */ .stack { display: flex; flex-direction: column; gap: var(--space-3); } .stack--sm { gap: var(--space-2); } .stack--lg { gap: var(--space-5); } .row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .row--between { justify-content: space-between; } .grid { display: grid; gap: var(--space-4); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .muted { color: var(--text-muted); } .faint { color: var(--text-faint); } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .text-2xs { font-size: var(--fs-2xs); } .text-xs { font-size: var(--fs-xs); } .text-sm { font-size: var(--fs-sm); } .text-lg { font-size: var(--fs-lg); } .text-xl { font-size: var(--fs-xl); } .text-2xl { font-size: var(--fs-2xl); } .weight-medium { font-weight: 500; } .weight-semibold { font-weight: 600; } .weight-bold { font-weight: 700; } .display { font-family: var(--font-display); letter-spacing: var(--tracking-tight); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* --- Demo banner --------------------------------------------------------- */ .demo-banner { position: sticky; top: 0; z-index: 60; background: linear-gradient(90deg, rgba(245, 158, 11, 0.14), rgba(245, 158, 11, 0.04)); border-bottom: 1px solid rgba(245, 158, 11, 0.25); color: #FCD34D; font-size: var(--fs-2xs); font-weight: 500; text-align: center; padding: 6px var(--space-4); letter-spacing: 0.04em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: var(--space-2); } .demo-banner::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #FCD34D; animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }