/* ============================================================ EION — theme layer. Loaded AFTER style.css. It only overrides design tokens and the two surfaces the kinetic theme is allowed to touch: 1. the composer beam (red and electric blue meeting at centre) 2. the Upgrade control (a pulse tracing its rounded edge) Themes are selected by an attribute on : theme.js sets it. Nothing here uses inline styles, so a theme can be swapped without a reload and without leaking values. Admin sees the same themes. Admin does not see Upgrade — there is nothing above full access to sell. ============================================================ */ /* ---------- user: clean white (default, matches style.css) ---- */ html[data-theme="clean"]{ --bg:#ffffff; --panel:#f9f9f9; --ink:#0d0d0d; --ink-2:#5d5d5d; --ink-3:#9b9b9b; --line:#ececec; --line-2:#e3e3e3; --bubble:#f4f4f4; --hover:#f0f0f0; --beam:#2185FA; --beam-2:#29BDFF; --beam-3:#14D8D0; --key:#6A4BE0; } /* ---------- user: soft slate --------------------------------- */ html[data-theme="soft"]{ --bg:#f6f3ef; --panel:#f1ece6; --ink:#1f1b17; --ink-2:#5c534a; --ink-3:#948a7d; --line:#e2d8ca; --line-2:#ddd1c2; --bubble:#fbf8f4; --hover:#ece5db; --beam:#8b5e3c; --beam-2:#c08457; --beam-3:#6f8f7a; --key:#8b5e3c; } /* ---------- admin: midnight command -------------------------- */ html[data-theme="midnight"]{ --bg:#090909; --panel:#0f0f0f; --ink:#f7f7f7; --ink-2:#a9a9a9; --ink-3:#6f6f6f; --line:#242424; --line-2:#2c2c2c; --bubble:#141414; --hover:#1b1b1b; --beam:#d4af37; --beam-2:#f0d484; --beam-3:#8c6f21; --key:#d4af37; } /* ---------- admin: obsidian luxe ----------------------------- */ html[data-theme="obsidian"]{ --bg:#111111; --panel:#171717; --ink:#f6f6f6; --ink-2:#a5a5a5; --ink-3:#6c6c6c; --line:#282828; --line-2:#333333; --bubble:#1e1e1e; --hover:#242424; --beam:#caad68; --beam-2:#e6d3a0; --beam-3:#7d6a3c; --key:#caad68; } /* ---------- admin: silver grid ------------------------------- */ html[data-theme="silver"]{ --bg:#f4f7fb; --panel:#eaeff6; --ink:#10151f; --ink-2:#4a5568; --ink-3:#8593a8; --line:#dbe4f0; --line-2:#cfdaea; --bubble:#ffffff; --hover:#e2e9f4; --beam:#5c7dff; --beam-2:#8aa5ff; --beam-3:#3f5bd6; --key:#5c7dff; } /* ============================================================ KINETIC BEAM — navy hull, electric blue and vibrant red. Available to users and to admin. The colour is spent in exactly two places; the rest of the shell stays navy and quiet, or the beam stops reading as a signal and starts reading as noise. ============================================================ */ html[data-theme="kinetic"]{ --navy:#050B1C; --navy-2:#0A1730; --navy-3:#12233F; --volt:#00f2ff; /* electric blue */ --crimson:#ff003c; /* vibrant red */ --bg:var(--navy); --panel:var(--navy-2); --ink:#EAF4FF; --ink-2:#93A9C7; --ink-3:#5E738F; --line:#16264180; --line-2:#1B3054; --bubble:#0E1D38; --hover:#152945; --field:#02060F; --field-2:#081428; --live-ink:#EAF4FF; --beam:var(--volt); --beam-2:#5AF8FF; --beam-3:var(--crimson); --key:var(--volt); } /* Dark themes need the shell to stop assuming a white page. */ html[data-theme="kinetic"] body, html[data-theme="midnight"] body, html[data-theme="obsidian"] body{ color-scheme:dark; } html[data-theme="kinetic"] .composer, html[data-theme="kinetic"] .composer-wrap, html[data-theme="kinetic"] .topbar{ background:var(--bg); } html[data-theme="kinetic"] .sheet-card, html[data-theme="kinetic"] .slash-menu{ background:var(--navy-2); border-color:var(--line-2); box-shadow:0 24px 60px rgba(0,0,0,.55); } html[data-theme="kinetic"] .panel{ background:var(--navy-2); border-right:1px solid var(--line-2); } html[data-theme="kinetic"] .starter, html[data-theme="kinetic"] .row:hover{ background:var(--hover); } /* ------------------------------------------------------------ The signature: two beams travelling the input bar from opposite ends and meeting in the middle. Red enters from the left, volt from the right, and the meeting point is the brightest pixel on the screen. The composer's own rounded rect is the track. ------------------------------------------------------------ */ html[data-theme="kinetic"] .beam{ background: linear-gradient(90deg, rgba(255,0,60,0) 0%, var(--crimson) 26%, #FFE9EE 46%, #FFFFFF 50%, #E9FDFF 54%, var(--volt) 74%, rgba(0,242,255,0) 100%), linear-gradient(180deg, var(--line-2), var(--line-2)); background-size:100% 100%, 100% 100%; animation:none; } html[data-theme="kinetic"] .beam .composer{ background:var(--navy-2); } /* the meeting flare, centred on the seam */ html[data-theme="kinetic"] .beam::before{ background: radial-gradient(38% 160% at 50% 50%, rgba(255,255,255,.30), transparent 70%), radial-gradient(70% 180% at 22% 50%, rgba(255,0,60,.42), transparent 72%), radial-gradient(70% 180% at 78% 50%, rgba(0,242,255,.42), transparent 72%); opacity:.42; } /* state escalates the travel, not the palette */ html[data-theme="kinetic"] .beam[data-state="ready"], html[data-theme="kinetic"] .beam:focus-within{ background-size:280% 100%, 100% 100%; animation:kinetic-converge 6s ease-in-out infinite; } html[data-theme="kinetic"] .beam[data-state="ready"]::before, html[data-theme="kinetic"] .beam:focus-within::before{ opacity:.72; } html[data-theme="kinetic"] .beam[data-state="listening"]{ background-size:280% 100%, 100% 100%; animation:kinetic-converge 2.4s ease-in-out infinite; } html[data-theme="kinetic"] .beam[data-state="listening"]::before{ opacity:1; animation:kinetic-flare 1.1s ease-in-out infinite; } html[data-theme="kinetic"] .beam[data-state="thinking"]{ background-size:280% 100%, 100% 100%; animation:kinetic-converge 1.35s linear infinite; } html[data-theme="kinetic"] .beam[data-state="thinking"]::before{ opacity:.9; animation:kinetic-flare .7s ease-in-out infinite; } @keyframes kinetic-converge{ 0% { background-position: 0% 0, 0 0; } 50% { background-position:140% 0, 0 0; } 100% { background-position:280% 0, 0 0; } } @keyframes kinetic-flare{ 50%{ opacity:.38 } } /* ------------------------------------------------------------ Upgrade control — a pulse tracing the rounded edge. Hidden entirely for admin (see [data-role="admin"] below). ------------------------------------------------------------ */ .upgrade{ position:relative; display:inline-flex; align-items:center; gap:7px; padding:7px 15px; border-radius:var(--r-pill); font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--ink); background:var(--bubble); border:1px solid var(--line-2); cursor:pointer; isolation:isolate; } .upgrade:hover{ background:var(--hover); } .upgrade:focus-visible{ outline:2px solid var(--beam); outline-offset:3px; } .upgrade .upgrade-dot{ width:6px; height:6px; border-radius:50%; background:var(--beam); box-shadow:0 0 8px var(--beam); } /* the tracing pulse: a conic sweep clipped to a 1.5px ring */ .upgrade::before{ content:""; position:absolute; inset:-1.5px; border-radius:inherit; z-index:-1; background:conic-gradient(from 0turn, transparent 0deg, transparent 264deg, var(--beam) 318deg, #ffffff 344deg, var(--beam-2) 352deg, transparent 360deg); animation:upgrade-trace 3.6s linear infinite; } .upgrade::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; background:var(--bg); } @keyframes upgrade-trace{ to{ transform:rotate(1turn) } } /* kinetic gives the trace both signal colours */ html[data-theme="kinetic"] .upgrade{ background:var(--navy-2); border-color:transparent; color:#EAF4FF; } html[data-theme="kinetic"] .upgrade::before{ background:conic-gradient(from 0turn, transparent 0deg, transparent 200deg, var(--crimson) 252deg, #FFFFFF 300deg, var(--volt) 340deg, transparent 360deg); animation-duration:2.8s; } html[data-theme="kinetic"] .upgrade::after{ background:var(--navy-2); } /* ------------------------------------------------------------ Admin. Same themes, no commerce. theme.js writes data-role. ------------------------------------------------------------ */ html[data-role="admin"] .upgrade, html[data-role="admin"] [data-billing], html[data-role="admin"] .wordmark-badge{ display:none !important; } html[data-role="admin"] .admin-flag{ display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:var(--r-pill); font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--beam); border:1px solid color-mix(in srgb, var(--beam) 40%, transparent); background:color-mix(in srgb, var(--beam) 10%, transparent); } .admin-flag{ display:none; } /* ------------------------------------------------------------ Theme picker cards (settings sheet) ------------------------------------------------------------ */ .theme-block{ display:grid; gap:18px; grid-template-columns:1fr; } @media (min-width:620px){ .theme-block{ grid-template-columns:1fr 1fr } } .theme-column h4{ margin:0 0 8px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); } .theme-card{ width:100%; display:flex; flex-direction:column; gap:2px; text-align:left; padding:11px 13px; margin-bottom:7px; border-radius:var(--r-md); border:1px solid var(--line-2); background:var(--bg); cursor:pointer; } .theme-card:hover{ background:var(--hover); } .theme-card[aria-pressed="true"]{ border-color:var(--beam); box-shadow:inset 0 0 0 1px var(--beam); } .theme-name{ font-weight:600; font-size:14px; } .theme-desc{ font-size:12px; color:var(--ink-2); } .theme-swatch{ display:flex; gap:4px; margin-top:7px; } .theme-swatch i{ width:16px; height:16px; border-radius:4px; border:1px solid rgba(0,0,0,.14); } /* ------------------------------------------------------------ Quality floor ------------------------------------------------------------ */ @media (prefers-reduced-motion:reduce){ html[data-theme="kinetic"] .beam, html[data-theme="kinetic"] .beam::before, .upgrade::before{ animation:none !important; } }