/* ============================================================ TARMAC · BRAND TOKENS (canonical) · LIGHT MODE ============================================================ Standalone CRM product. Daylight-runway aesthetic: warm-white surfaces, amber primary, gold accents. Direction: tower at noon · sunlit runway · operational Mood: bright, focused, instrument-panel-clear ============================================================ */ /* ── Google Fonts: Space Grotesk + JetBrains Mono ──────────── */ :root { /* ── BRAND COLORS · AMBER (primary) ────────────────────── */ --tm-amber-primary: #F59E0B; /* PRIMARY · CTAs, links, active nav */ --tm-amber-deep: #B45309; /* burnt amber · pressed states, dark amber text on light */ --tm-amber-mid: #D97706; /* hover, mid-contrast amber on light */ --tm-amber-soft: #FBBF24; /* secondary · highlights */ --tm-amber-pale: #FEF3C7; /* badge background tint */ --tm-amber-wash: #FFFBEB; /* very pale amber wash · active row tint */ --tm-amber-glow: rgba(245, 158, 11, 0.30); /* runway-light glow (subtler on light) */ /* ── BRAND COLORS · SIGNAL (status accents) ────────────── */ --tm-signal-green: #047857; /* clear/connected/healthy · darker for light bg contrast */ --tm-signal-red: #B91C1C; /* hold/error/voicemail */ --tm-signal-blue: #1D4ED8; /* in-progress/ringing */ --tm-signal-violet: #6D28D9; /* AI-generated insights */ /* ── SURFACES (LIGHT MODE — warm whites and soft slates) ─ */ --tm-bg: #FAFAF9; /* primary background · warm white */ --tm-bg-deep: #F1F5F9; /* table headers, deep accent · slate-100 */ --tm-bg-surface: #FFFFFF; /* card / panel surface · pure white */ --tm-bg-surface-2: #F8FAFC; /* card hover · barely darker than surface */ --tm-bg-rail: #FFFFFF; /* sidebar rail · pure white for clean contrast */ /* ── TEXT (on light) ───────────────────────────────────── */ --tm-text-primary: #0F172A; /* headlines, body · slate-900 */ --tm-text-secondary: #475569; /* captions, meta · slate-600 */ --tm-text-muted: #94A3B8; /* placeholders, disabled · slate-400 */ --tm-text-amber: var(--tm-amber-deep); /* amber-on-light for callouts · darker for contrast */ /* ── LINES / GRIDS ─────────────────────────────────────── */ --tm-grid: rgba(15, 23, 42, 0.05); /* taxiway grid · faint slate */ --tm-grid-amber: rgba(245, 158, 11, 0.06); /* runway-light grid · for hero areas */ --tm-border: rgba(15, 23, 42, 0.08); /* card borders */ --tm-border-strong: rgba(245, 158, 11, 0.40); /* hover/focus · amber edge */ --tm-divider: rgba(15, 23, 42, 0.06); /* horizontal dividers */ /* ── SHADOWS (soft, subtle, lifted) ────────────────────── */ --tm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --tm-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --tm-shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04); --tm-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(15, 23, 42, 0.05); --tm-shadow-amber: 0 0 18px rgba(245, 158, 11, 0.25), 0 2px 6px rgba(245, 158, 11, 0.15); --tm-shadow-press: inset 0 1px 2px rgba(15, 23, 42, 0.06); /* ── TYPOGRAPHY ─────────────────────────────────────────── */ --tm-font: 'Space Grotesk', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --tm-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'Fira Code', Menlo, Consolas, monospace; --tm-tracking-tight: -0.02em; --tm-tracking-wide: 0.12em; --tm-tracking-runway: 0.32em; /* ── SPACING ────────────────────────────────────────────── */ --tm-space-1: 4px; --tm-space-2: 8px; --tm-space-3: 12px; --tm-space-4: 16px; --tm-space-5: 24px; --tm-space-6: 32px; --tm-space-7: 48px; --tm-space-8: 64px; --tm-space-9: 96px; --tm-space-10: 128px; /* ── RADIUS ────────────────────────────────────────────── */ --tm-radius: 2px; --tm-radius-md: 4px; --tm-radius-light: 999px; /* ── MOTION ─────────────────────────────────────────────── */ --tm-ease: cubic-bezier(.4, 0, .2, 1); --tm-ease-out: cubic-bezier(.16, 1, .3, 1); --tm-duration-quick: 120ms; --tm-duration: 240ms; --tm-duration-slow: 640ms; --tm-duration-beacon: 1800ms; } /* ── Universal type stack ──────────────────────────────────── */ html, body, button, input, select, textarea { font-family: var(--tm-font); } body { color: var(--tm-text-primary); background: var(--tm-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'ss01' 1, 'ss02' 1; } /* Mono opt-in for data + numbers */ .tm-mono, pre, code, .tm-num { font-family: var(--tm-font-mono); font-feature-settings: 'zero' 1, 'ss01' 1; } /* ── Utilities ─────────────────────────────────────────────── */ .tm-text-primary { color: var(--tm-text-primary); } .tm-text-secondary { color: var(--tm-text-secondary); } .tm-text-muted { color: var(--tm-text-muted); } .tm-text-amber { color: var(--tm-text-amber); } .tm-bg { background: var(--tm-bg); } .tm-bg-surface { background: var(--tm-bg-surface); } .tm-bg-rail { background: var(--tm-bg-rail); } .tm-bg-deep { background: var(--tm-bg-deep); } .tm-border { border: 1px solid var(--tm-border); } .tm-divider { border-top: 1px solid var(--tm-divider); } .tm-shadow { box-shadow: var(--tm-shadow); } .tm-shadow-amber { box-shadow: var(--tm-shadow-amber); } .tm-tracking-tight { letter-spacing: var(--tm-tracking-tight); } .tm-tracking-wide { letter-spacing: var(--tm-tracking-wide); text-transform: uppercase; } .tm-tracking-runway { letter-spacing: var(--tm-tracking-runway); text-transform: uppercase; } /* ── Card · the standard Tarmac panel ──────────────────────── */ .tm-card { background: var(--tm-bg-surface); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); box-shadow: var(--tm-shadow-sm); transition: background var(--tm-duration) var(--tm-ease), border-color var(--tm-duration) var(--tm-ease), box-shadow var(--tm-duration) var(--tm-ease), transform var(--tm-duration) var(--tm-ease); } .tm-card:hover { box-shadow: var(--tm-shadow); } .tm-card-lift:hover { transform: translateY(-1px); border-color: var(--tm-border-strong); } /* ── Pills (status chips) ──────────────────────────────────── */ .tm-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; font-size: 10px; font-weight: 600; letter-spacing: var(--tm-tracking-wide); background: rgba(15, 23, 42, 0.06); color: var(--tm-text-secondary); text-transform: uppercase; } .tm-pill-amber { background: var(--tm-amber-pale); color: var(--tm-amber-deep); } .tm-pill-green { background: rgba(4, 120, 87, 0.10); color: var(--tm-signal-green); } .tm-pill-red { background: rgba(185, 28, 28, 0.10); color: var(--tm-signal-red); } .tm-pill-blue { background: rgba(29, 78, 216, 0.10); color: var(--tm-signal-blue); } .tm-pill-violet { background: rgba(109, 40, 217, 0.10); color: var(--tm-signal-violet); } .tm-pill-ai::before { content: '✦ '; color: var(--tm-signal-violet); } /* ── Runway · 3-light wordmark used as the Tarmac logo ─────── */ .tm-runway-mark { display: inline-flex; align-items: center; gap: 6px; font-family: var(--tm-font-mono); font-weight: 700; letter-spacing: 2px; color: var(--tm-amber-deep); } .tm-runway-mark::before { content: '▸ ▸ ▸'; color: var(--tm-amber-primary); text-shadow: 0 0 8px var(--tm-amber-glow); letter-spacing: -1px; } /* ── Runway-light pulse · the signature ambient animation ──── */ @keyframes tm-beacon-pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); } 60% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } } .tm-beacon-pulse { animation: tm-beacon-pulse var(--tm-duration-beacon) var(--tm-ease-out) infinite; border-radius: var(--tm-radius-light); } /* ── Taxiway grid · subtle background pattern for hero/empty states ── */ .tm-grid-bg { background-color: var(--tm-bg); background-image: linear-gradient(var(--tm-grid) 1px, transparent 1px), linear-gradient(90deg, var(--tm-grid) 1px, transparent 1px); background-size: 40px 40px; background-position: -1px -1px; } /* ── Amber-edge runway lighting · adds a subtle amber underline glow */ .tm-runway-edge { position: relative; } .tm-runway-edge::after { content: ''; position: absolute; inset: auto 0 0 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--tm-amber-primary) 20%, var(--tm-amber-soft) 50%, var(--tm-amber-primary) 80%, transparent 100%); opacity: 0.7; } /* ── Scrollbars (light theme) ──────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--tm-bg-deep); } ::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.18); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(245, 158, 11, 0.55); } /* ── Form fields (light-themed) ────────────────────────────── */ .tm-input { background: var(--tm-bg-surface); border: 1px solid var(--tm-border); color: var(--tm-text-primary); padding: 8px 12px; font-size: 13px; outline: none; border-radius: var(--tm-radius); transition: border-color var(--tm-duration-quick) var(--tm-ease), box-shadow var(--tm-duration-quick) var(--tm-ease); } .tm-input:focus { border-color: var(--tm-amber-primary); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.10); } .tm-input::placeholder { color: var(--tm-text-muted); } /* ── Buttons ───────────────────────────────────────────────── */ .tm-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; border: 1px solid transparent; border-radius: var(--tm-radius); cursor: pointer; transition: all var(--tm-duration-quick) var(--tm-ease); } .tm-btn-primary { background: var(--tm-amber-primary); color: #FFFFFF; box-shadow: var(--tm-shadow-sm); } .tm-btn-primary:hover { background: var(--tm-amber-mid); box-shadow: var(--tm-shadow-amber); } .tm-btn-ghost { background: var(--tm-bg-surface); color: var(--tm-text-primary); border-color: var(--tm-border); } .tm-btn-ghost:hover { border-color: var(--tm-border-strong); background: var(--tm-bg-surface-2); } /* ── Dialer · ringing pulse on line cards (cyan, 1s cadence) ── */ @keyframes tm-ring-pulse { 0% { box-shadow: 0 0 0 0 rgba(29, 78, 216, 0.45); } 60% { box-shadow: 0 0 0 12px rgba(29, 78, 216, 0); } 100% { box-shadow: 0 0 0 0 rgba(29, 78, 216, 0); } } .tm-ring-pulse { animation: tm-ring-pulse 1s ease-out infinite; } /* ── Dialer · AMD-analyzing spinner glow (violet) ──────────── */ @keyframes tm-amd-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(109, 40, 217, 0.5); } 50% { box-shadow: 0 0 0 8px rgba(109, 40, 217, 0); } } .tm-amd-pulse { animation: tm-amd-pulse 1.5s ease-in-out infinite; } /* ── Dialer · connected pulse (green, slower) ──────────────── */ @keyframes tm-connect-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(4, 120, 87, 0.4); } 50% { box-shadow: 0 0 0 14px rgba(4, 120, 87, 0); } } .tm-connect-pulse { animation: tm-connect-pulse 2s ease-in-out infinite; } /* ── Status dot · animated dot indicator on line cards ─────── */ @keyframes tm-dot-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .tm-dot-blink { animation: tm-dot-blink 1s ease-in-out infinite; } /* ── Modal + drawer animations ──────────────────────────────── */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes modalIn { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ── Reduced motion: kill all animations ────────────────────── */ @media (prefers-reduced-motion: reduce) { .tm-beacon-pulse, .tm-ring-pulse, .tm-amd-pulse, .tm-connect-pulse, .tm-dot-blink { animation: none !important; } }