/* JS2Mail — Soft Technical design tokens. Dark is the default theme (no attribute / data-theme="dark"); a light variant lives below as a [data-theme="light"] override block. The early bootstrap script in _AuthLayout / _DashboardLayout sets the attribute before first paint so we never flash the wrong palette. */ :root, [data-theme="dark"] { /* Backgrounds */ --bg: #0B1020; --surface-1: #11182D; --surface-2: #151D36; --surface-3: #1A2340; /* Borders */ --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14); --border-soft: rgba(255,255,255,0.04); /* Translucent overlays — for hover states, chips, sticky bars. Kept as semantic tokens (not hardcoded rgba) so the light theme can flip them to dark-on-light without touching every component CSS rule. */ --hover-bg: rgba(255,255,255,0.04); --chip-bg: rgba(255,255,255,0.06); --row-stripe: rgba(255,255,255,0.02); --topbar-bg: rgba(11,16,32,0.6); --landing-topbar-bg: rgba(11,16,32,0.7); /* Accents */ --accent: #6E7BFF; --accent-2: #8B5CF6; --accent-soft: rgba(110,123,255,0.14); --accent-glow: rgba(110,123,255,0.35); /* Status */ --success: #22C55E; --warning: #F59E0B; --error: #EF4444; /* Text */ --text: #F5F7FF; --text-2: #94A3B8; --text-3: #64748B; /* Type */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Radii */ --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-pill: 999px; /* Shadows / glow */ --elev-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px -12px rgba(0,0,0,0.5); --elev-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 48px -16px rgba(0,0,0,0.6); --glow-accent: 0 0 0 1px var(--border-strong), 0 12px 40px -10px var(--accent-glow); } /* Light theme — slate-tinted neutrals + same accent. Keep the .j-editor code-frame, .j-prov tiles, and status palettes as-is across themes (developer convention is "code stays dark"; status colors are tone-stable enough on white). */ [data-theme="light"] { --bg: #F8FAFC; --surface-1: #FFFFFF; --surface-2: #F1F5F9; --surface-3: #E2E8F0; --border: rgba(15,23,42,0.10); --border-strong: rgba(15,23,42,0.18); --border-soft: rgba(15,23,42,0.06); --hover-bg: rgba(15,23,42,0.05); --chip-bg: rgba(15,23,42,0.06); --row-stripe: rgba(15,23,42,0.025); --topbar-bg: rgba(248,250,252,0.85); --landing-topbar-bg: rgba(248,250,252,0.85); --accent: #4F5BE8; --accent-2: #7C3AED; --accent-soft: rgba(79,91,232,0.10); --accent-glow: rgba(79,91,232,0.20); --text: #0F172A; --text-2: #475569; --text-3: #94A3B8; --elev-1: 0 1px 0 rgba(15,23,42,0.03) inset, 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -12px rgba(15,23,42,0.12); --elev-2: 0 1px 0 rgba(15,23,42,0.04) inset, 0 18px 48px -16px rgba(15,23,42,0.16); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-feature-settings: "ss01","cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button { font-family: inherit; } /* ───── Atomic primitives ───── */ .j-card { background: linear-gradient(180deg, var(--surface-1), var(--surface-1) 60%, color-mix(in oklab, var(--surface-1), #000 6%)); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--elev-1); } .j-card-flat { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); } .j-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; font-size: 14px; font-weight: 500; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; transition: background 180ms ease, border-color 180ms ease, transform 120ms ease; white-space: nowrap; } .j-btn-primary { background: var(--accent); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset, 0 8px 22px -8px var(--accent-glow); } .j-btn-primary:hover { background: color-mix(in oklab, var(--accent), #fff 8%); } .j-btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .j-btn-ghost:hover { background: var(--hover-bg); } .j-btn-text { background: transparent; color: var(--text-2); height: 32px; padding: 0 8px; } .j-btn-text:hover { color: var(--text); } .j-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; font-weight: 500; border-radius: var(--r-pill); background: var(--chip-bg); border: 1px solid var(--border); color: var(--text-2); } .j-status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; position: relative; } .j-status-dot.is-success { background: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,0.15); } .j-status-dot.is-warning { background: var(--warning); box-shadow: 0 0 0 3px rgba(245,158,11,0.15); } .j-status-dot.is-error { background: var(--error); box-shadow: 0 0 0 3px rgba(239,68,68,0.15); } .j-status-dot.is-pending { background: var(--text-3); box-shadow: 0 0 0 3px rgba(100,116,139,0.15); } .j-pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: jPulse 1.6s ease-out infinite; } @keyframes jPulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(3.2); opacity: 0; } } .j-mono { font-family: var(--font-mono); font-feature-settings: "calt", "ss01"; font-size: 12.5px; letter-spacing: -0.01em; } .j-grid-bg { background-image: linear-gradient(var(--border-soft) 1px, transparent 1px), linear-gradient(90deg, var(--border-soft) 1px, transparent 1px); background-size: 32px 32px; } /* ───── Provider monogram tiles (no real logos) ───── */ .j-prov { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; font-family: var(--font-sans); font-weight: 600; font-size: 14px; letter-spacing: -0.02em; color: #fff; flex: none; } .j-prov.is-gmail { background: linear-gradient(135deg, #E4564B, #C73B33); } .j-prov.is-ms { background: linear-gradient(135deg, #2A6FDB, #1E5BC0); } .j-prov.is-exchange { background: linear-gradient(135deg, #2D8DBE, #1F6F95); } .j-prov.is-smtp { background: linear-gradient(135deg, #4A5568, #2D3748); } /* Code editor frame */ .j-editor { background: linear-gradient(180deg, #0E1530, #0B1226); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--elev-2); } .j-editor-tab { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); color: rgba(255,255,255,0.65); } .j-editor-dots { display: flex; gap: 6px; } .j-editor-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.12); } .j-editor-body { padding: 16px 18px; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: #C7CCDB; } /* Syntax */ .tk-keyword { color: #C792EA; } .tk-string { color: #95E6A8; } .tk-prop { color: #82AAFF; } .tk-fn { color: #FFCB6B; } .tk-comment { color: #5A6585; font-style: italic; } .tk-num { color: #F78C6C; } .tk-punc { color: #7E869C; } /* Send line animation */ .j-sendline { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .j-sendline::before { content: ""; position: absolute; top: 50%; left: -10%; width: 30%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); filter: blur(0.4px); animation: jSend 2.4s cubic-bezier(.5,0,.5,1) infinite; } @keyframes jSend { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(380%); opacity: 0; } } .no-motion .j-sendline::before, .no-motion .j-pulse::after, .no-motion .j-stream-row { animation: none !important; } /* Hide scrollbars in showcase */ .j-noscroll::-webkit-scrollbar { display: none; } .j-noscroll { scrollbar-width: none; } /* Themed scrollbar — used by the Logs table and other scrollable surfaces. */ .js2-scroll { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .js2-scroll::-webkit-scrollbar { width: 10px; height: 10px; } .js2-scroll::-webkit-scrollbar-track { background: transparent; } .js2-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 2px solid var(--surface-1); } .js2-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-3); } .js2-scroll::-webkit-scrollbar-corner { background: transparent; } /* Heading micro-tracker */ .j-eyebrow { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); font-weight: 500; } /* Faint vignette behind hero */ .j-vignette::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 70% 0%, var(--accent-soft), transparent 60%), radial-gradient(ellipse 50% 50% at 0% 100%, rgba(139,92,246,0.08), transparent 60%); pointer-events: none; }