/* ============================================================================= * MCPWing Design System v4 — "Atmospheric" * Cool slate surfaces + electric sky-blue accent (#38BDF8). * Cinematic dark + hacker/terminal energy. Semantic match to wings/flight/sky. * One IBM Plex family (Sans + Serif Italic + Mono). Toggle dark/light via * `data-theme="dark"` or `data-theme="light"` on . * =========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Serif:ital,wght@1,400;1,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap"); /* ============================================================================= * MODE — DARK (default) * Deep cool slate. Electric sky-blue accent. Cinematic + technical. * =========================================================================== */ :root, :root[data-theme="dark"] { /* Brand accent — electric sky-blue. */ --brand-50: #F0F9FF; --brand-100: #E0F2FE; --brand-200: #BAE6FD; --brand-300: #7DD3FC; --brand-400: #38BDF8; /* ★ canonical accent */ --brand-500: #0EA5E9; /* hover / pressed */ --brand-600: #0284C7; --brand-700: #075985; --brand-tint-04: rgba(56,189,248,0.04); --brand-tint-08: rgba(56,189,248,0.08); --brand-tint-12: rgba(56,189,248,0.12); --brand-tint-20: rgba(56,189,248,0.20); --brand-tint-40: rgba(56,189,248,0.40); /* Surfaces — cool slate. Deep midnight, cinematic. */ --bg: #0A0E14; /* page — deep slate, hint of blue */ --bg-elevated: #0F141C; /* sections */ --surface: #131925; /* cards */ --surface-2: #1A2230; /* nested, hover */ --surface-3: #1F2937; /* inputs, tags, sidebar */ --line: #283448; /* default border */ --line-soft: #131925; /* hairline separators */ /* Text — cool whites + slate */ --ink: #F1F5F9; --ink-muted: #94A3B8; --ink-quiet: #64748B; --ink-faint: #334155; /* Status — readable on slate */ --ok: #4ADE80; --ok-tint: rgba(74,222,128,0.14); --ok-border: rgba(74,222,128,0.32); --warn: #FBBF24; --warn-tint: rgba(251,191,36,0.14); --warn-border: rgba(251,191,36,0.32); --err: #F87171; --err-tint: rgba(248,113,113,0.14); --err-border: rgba(248,113,113,0.32); --info: #38BDF8; --info-tint: rgba(56,189,248,0.14); --info-border: rgba(56,189,248,0.32); /* Role colors for multi-tenant pills */ --role-super: #FBBF24; /* amber */ --role-admin: var(--brand-400); --role-lead: #A78BFA; /* violet — distinct from brand */ --role-member: var(--ink-muted); /* Atmosphere gradients — sky-at-altitude, cinematic */ --grad-sky: radial-gradient( ellipse 80% 60% at 50% 0%, rgba(56,189,248,0.20) 0%, rgba(125,211,252,0.10) 25%, rgba(10,14,20,0) 60% ); --grad-aurora: linear-gradient( 105deg, rgba(56,189,248,0.16) 0%, rgba(125,211,252,0.10) 40%, rgba(167,139,250,0.08) 80% ); --grad-brand-fill: linear-gradient(135deg, #7DD3FC 0%, #38BDF8 50%, #0284C7 100%); /* Glass */ --glass: rgba(15,25,37,0.65); --glass-strong: rgba(15,25,37,0.86); --glass-border: rgba(241,245,249,0.07); /* Shadows — cinematic, deeper */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.5); --shadow-sm: 0 4px 12px rgba(0,0,0,0.45); --shadow-md: 0 8px 28px rgba(0,0,0,0.55); --shadow-lg: 0 16px 56px rgba(0,0,0,0.65); --shadow-brand: 0 8px 32px rgba(56,189,248,0.32); --shadow-brand-lg: 0 12px 48px rgba(56,189,248,0.50); --grain-color: 241,245,249; --grain-strength: 0.020; } /* ============================================================================= * TYPOGRAPHY — ONE FAMILY SYSTEM (IBM Plex) * =========================================================================== */ :root { --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-serif: "IBM Plex Serif", "Iowan Old Style", Georgia, serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --font-display: var(--font-sans); --t-eyebrow: 11px; --t-caption: 12px; --t-body-sm: 13.5px; --t-body: 15px; --t-body-lg: 17px; --t-h4: 20px; --t-h3: 24px; --t-h2: clamp(32px, 4vw, 48px); --t-h1: clamp(44px, 6vw, 80px); --t-mega: clamp(56px, 8vw, 112px); --lh-display: 1.05; --lh-tight: 1.18; --lh-snug: 1.35; --lh-normal: 1.55; --lh-loose: 1.75; --tr-mega: -0.035em; --tr-display: -0.025em; --tr-tight: -0.015em; --tr-normal: 0; --tr-eyebrow: 0.14em; --tr-mono: 0.02em; } /* ============================================================================= * SPACING · RADII · MOTION * =========================================================================== */ :root { --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; --s-40: 160px; --r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px; --container: 1280px; --container-prose: 720px; --pad-x: clamp(20px, 4vw, 48px); --ease-glide: cubic-bezier(0.22, 1, 0.36, 1); --ease-air: cubic-bezier(0.16, 1, 0.3, 1); --ease-arc: cubic-bezier(0.65, 0, 0.35, 1); --dur-snap: 120ms; --dur-quick: 200ms; --dur-base: 320ms; --dur-reveal: 680ms; --dur-drift: 24s; } /* ============================================================================= * BASE * =========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: dark; -webkit-text-size-adjust: 100%; } :root[data-theme="light"] { color-scheme: light; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: var(--brand-tint-40); color: var(--ink); } * { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--r-pill); } *::-webkit-scrollbar-track { background: transparent; } /* ============================================================================= * SEMANTIC TYPE CLASSES * =========================================================================== */ .t-mega { font-family: var(--font-sans); font-size: var(--t-mega); font-weight: 600; line-height: var(--lh-display); letter-spacing: var(--tr-mega); color: var(--ink); text-wrap: balance; } .t-h1 { font-family: var(--font-sans); font-size: var(--t-h1); font-weight: 600; line-height: var(--lh-display); letter-spacing: var(--tr-display); color: var(--ink); text-wrap: balance; margin: 0; } .t-h2 { font-family: var(--font-sans); font-size: var(--t-h2); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--tr-display); color: var(--ink); text-wrap: balance; margin: 0; } .t-h3 { font-family: var(--font-sans); font-size: var(--t-h3); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--tr-tight); color: var(--ink); margin: 0; } .t-h4 { font-family: var(--font-sans); font-size: var(--t-h4); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--tr-tight); color: var(--ink); margin: 0; } .t-body { font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-normal); color: var(--ink-muted); } .t-body-sm{ font-family: var(--font-sans); font-size: var(--t-body-sm); line-height: var(--lh-normal); color: var(--ink-muted); } .t-eyebrow{ font-family: var(--font-mono); font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--brand-400); } .t-mono { font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: var(--tr-mono); color: var(--ink-muted); } .t-quiet { font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: var(--tr-mono); color: var(--ink-quiet); } .t-italic { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.005em; color: var(--brand-400); } /* ============================================================================= * MOTION KEYFRAMES * =========================================================================== */ @keyframes mcpw-drift { 0% { transform: translate3d(-12%, 0, 0) rotate(var(--streak-rot, 0deg)); opacity: var(--streak-opacity, 0.5); } 50% { transform: translate3d( 12%, 0, 0) rotate(var(--streak-rot, 0deg)); opacity: calc(var(--streak-opacity, 0.5) + 0.15); } 100% { transform: translate3d(-12%, 0, 0) rotate(var(--streak-rot, 0deg)); opacity: var(--streak-opacity, 0.5); } } @keyframes mcpw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @keyframes mcpw-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes mcpw-rise { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes mcpw-particle-rise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: var(--p-opacity, 0.5); } 90% { opacity: var(--p-opacity, 0.5); } 100% { transform: translateY(-100vh) translateX(var(--p-drift, 20px)); opacity: 0; } } @keyframes mcpw-flow-dot { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } } @keyframes mcpw-type { from { width: 0; } to { width: 100%; } } @keyframes mcpw-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ============================================================================= * AMBIENT UTILITIES * =========================================================================== */ .grain { position: relative; isolation: isolate; } .grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); background-size: 220px; opacity: var(--grain-strength); mix-blend-mode: overlay; z-index: 0; } .grain > * { position: relative; z-index: 1; } .glass { background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); } .hairline { background: var(--line); height: 1px; } .streak { position: absolute; pointer-events: none; filter: blur(40px); animation: mcpw-drift var(--dur-drift) var(--ease-arc) infinite; will-change: transform, opacity; }