/* ============================================================================ * Influence design system — colors & type * Drop this stylesheet on top of any HTML page to inherit the brand. * * ============================================================================ */ /* ---------- Webfonts (Google Fonts — substitution; see README caveats) ----- */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Major+Mono+Display&display=swap"); /* ---------- Tokens --------------------------------------------------------- */ :root { /* ----- Base palette (neon nightlife) ----- */ --ink-0: #0a0410; /* canvas */ --ink-1: #14091e; /* panel */ --ink-2: #1d1029; /* panel-elev / input bg on panel */ --ink-3: #2b1840; /* border */ --ink-4: #3a2257; /* border-strong */ --fg-1: #f4ecff; /* primary text */ --fg-2: #c9b6e0; /* secondary text */ --fg-3: #8a7aa3; /* muted */ --fg-4: #5a4d70; /* placeholder, disabled label */ /* ----- Brand neons ----- */ --magenta: #ff2bd6; /* receive / source / yours-going-out */ --magenta-soft: #ff6fe1; /* hover/lift */ --magenta-deep: #b21494; /* pressed/bg-tint */ --magenta-glow: rgba(255, 43, 214, 0.45); --magenta-wash: rgba(255, 43, 214, 0.08); --cyan: #22e3ff; /* send / sink / arriving-to-Droid */ --cyan-soft: #6cefff; --cyan-deep: #0a96b3; --cyan-glow: rgba(34, 227, 255, 0.45); --cyan-wash: rgba(34, 227, 255, 0.08); --lime: #9dff5e; /* online / connected / success */ --lime-glow: rgba(157, 255, 94, 0.4); --lime-wash: rgba(157, 255, 94, 0.08); /* ----- Semantic ----- */ --warn: #ffb74d; --warn-wash: rgba(255, 183, 77, 0.12); --error: #ff5577; --error-wash: rgba(255, 85, 119, 0.10); --success: var(--lime); --highlight: var(--warn); /* ----- Mapped to original codebase var names so older CSS keeps working ----- */ --bg: var(--ink-0); --fg: var(--fg-1); --muted: var(--fg-3); --panel: var(--ink-1); --border: var(--ink-3); --accent: var(--magenta); /* was a green in the original */ /* ----- Type families ----- */ --font-display: "Major Mono Display", ui-monospace, SFMono-Regular, Menlo, monospace; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ----- Type scale (in px so tokens stay legible at any root size) ----- */ --fs-display: 22px; --fs-h1: 20px; --fs-h2: 17px; --fs-h3: 15px; --fs-body: 15px; --fs-body-sm: 13px; --fs-detail: 12px; --fs-label: 11px; --fs-tiny: 10px; --lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.5; /* ----- Spacing (4px grid) ----- */ --space-0: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ----- Radii — biased ORGANIC. Asymmetric values produce pebble/bean silhouettes. ----- */ --radius-1: 6px; --radius-2: 14px; /* small chips, badges */ --radius-3: 18px; /* rows */ --radius-4: 28px; /* cards, panels */ --radius-pill: 999px; /* asymmetric "pebble" radii — drop these on any rectangular surface to make it organic */ --radius-pebble: 22px 30px 26px 18px / 26px 20px 28px 22px; --radius-pebble-r: 30px 22px 18px 26px / 20px 26px 22px 28px; /* mirrored — alternate rows */ --radius-bean: 40px 60px 40px 60px / 60px 40px 60px 40px; --radius-blob: 48% 52% 60% 40% / 50% 56% 44% 50%; /* ----- Borders ----- */ --bw-1: 1px; --bw-2: 2px; /* ----- Elevation (glow, not material depth) ----- */ --shadow-card: 0 4px 24px -8px rgba(0, 0, 0, 0.6); --shadow-modal: 0 24px 64px -16px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 43, 214, 0.18); --glow-magenta: 0 0 0 1px rgba(255, 43, 214, 0.35) inset, 0 0 24px -4px rgba(255, 43, 214, 0.5); --glow-cyan: 0 0 0 1px rgba(34, 227, 255, 0.35) inset, 0 0 24px -4px rgba(34, 227, 255, 0.5); --glow-lime: 0 0 0 1px rgba(157, 255, 94, 0.35) inset, 0 0 18px -4px rgba(157, 255, 94, 0.4); --glow-text: 0 0 12px rgba(255, 43, 214, 0.6), 0 0 28px rgba(34, 227, 255, 0.25); /* ----- Motion ----- */ --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 80ms; --dur-base: 150ms; --dur-slow: 300ms; } /* ---------- Base type resets ---------------------------------------------- */ html { font-size: 16px; } body { margin: 0; background: var(--ink-0); color: var(--fg-1); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-feature-settings: "ss01", "cv11"; /* Inter: nicer single-storey a, etc */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Organic multi-blob canvas — pools of magenta + cyan light bleeding through the dark. */ body.djs-canvas { background: radial-gradient(38% 30% at 18% 22%, rgba(255, 43, 214, 0.18), transparent 70%), radial-gradient(32% 26% at 82% 14%, rgba(34, 227, 255, 0.14), transparent 72%), radial-gradient(46% 34% at 72% 88%, rgba(255, 43, 214, 0.10), transparent 70%), radial-gradient(28% 22% at 12% 86%, rgba(34, 227, 255, 0.12), transparent 75%), radial-gradient(18% 14% at 50% 50%, rgba(157, 255, 94, 0.05), transparent 80%), var(--ink-0); background-attachment: fixed; } h1, .h1 { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 400; letter-spacing: 0.02em; line-height: var(--lh-tight); margin: 0; color: var(--fg-1); text-shadow: var(--glow-text); } h2, .h2 { font-family: var(--font-sans); font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-snug); margin: 0; color: var(--fg-1); } h3, .h3, .section-label { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin: 0; } p, .p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); } small, .small { font-size: var(--fs-body-sm); color: var(--fg-3); } .muted { color: var(--fg-3); } code, .mono, .code { font-family: var(--font-mono); font-size: var(--fs-detail); letter-spacing: 0; } code { background: var(--ink-2); padding: 2px 6px; border-radius: var(--radius-1); color: var(--fg-1); } /* Inline neon-tinted strong tokens, used inside body copy occasionally. */ .djs-mag { color: var(--magenta); text-shadow: 0 0 12px var(--magenta-glow); } .djs-cyan { color: var(--cyan); text-shadow: 0 0 12px var(--cyan-glow); } .djs-lime { color: var(--lime); text-shadow: 0 0 12px var(--lime-glow); } /* ---------- Common element resets used across previews and UI kit -------- */ button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } ::selection { background: var(--magenta); color: var(--ink-0); } /* Focus ring — visible against the canvas. */ :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }