/* ============================================================ cb-shell.css — ONE shared shell for the entire Orbit portal ------------------------------------------------------------ Single source of truth for: - design tokens (:root) - the Orrery background (.cb-bg, injected by cb-shell.js) - the brand header (.cb-header + per-product #cb-actions slot) - the footer (.cb-footer) Every page links this file. Products mount their own controls (battery, skins, reset, connection) into #cb-actions via CBShell.actions(). See docs/ORBIT-CONFIGURATOR-GUIDELINES.md. ============================================================ */ :root{ --bg:#0a0e13;--panel:#101820;--panel-2:#15202b;--panel-3:#1b2733; --line:rgba(255,255,255,.07);--line-2:rgba(255,255,255,.12); --accent:#FF9E1B;--accent-2:#ffb849;--accent-deep:#cc7a14; --text:#e9eef4;--muted:#8593a3;--muted-2:#5d6b7a;--ok:#2bb673;--err:#e5484d; --disp:"Bricolage Grotesque",sans-serif;--body:"Sora",sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace; } html{background:#06080c} /* Non-editable UI (labels, cards, buttons, device names) should not show a text I-beam or allow stray text selection; real inputs opt back in. Applies portal-wide (landing + every configurator) — previously this lived inline only on a couple pages. */ html,body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;caret-color:transparent;} input,textarea,select,[contenteditable]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;} /* Cursor hygiene (portal-wide): a universal arrow default kills the text I-beam over every label / value readout / heading / slider, regardless of inheritance quirks. Element and class rules (specificity > 0) below + the configurators own cursor:pointer rules all win over the universal *, so interactive controls stay pointer and real fields stay text. No blinking caret on non-text elements; caret + I-beam only inside actual editable fields. */ *{cursor:default;} input,textarea,[contenteditable]{cursor:text;caret-color:auto;} button,a,label,summary,select,[role="button"],[onclick],.sw,.toggle,input[type="range"],input[type="checkbox"],input[type="radio"],input[type="color"]{cursor:pointer;} /* ---- Orrery background: a fixed layer that sits behind ALL content and never intercepts clicks. Injected as the first body child. ---- */ .cb-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden; background:radial-gradient(135% 115% at 78% 8%,#121a25 0%,#0a0e13 46%,#06080c 100%)} .cb-bg-orbit{position:absolute;width:150vmax;height:150vmax;left:78%;top:8%; margin-left:-75vmax;margin-top:-75vmax;transform-origin:50% 50%; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%201200%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22core%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffe6bf%22%20stop-opacity%3D%220.95%22%2F%3E%3Cstop%20offset%3D%2222%25%22%20stop-color%3D%22%23ff9e1b%22%20stop-opacity%3D%220.55%22%2F%3E%3Cstop%20offset%3D%2255%25%22%20stop-color%3D%22%23ff9e1b%22%20stop-opacity%3D%220.10%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23ff9e1b%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22node%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220.95%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23ff9e1b%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%22600%22%20cy%3D%22600%22%20r%3D%22300%22%20fill%3D%22url(%23core)%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ff9e1b%22%20stroke-width%3D%221.1%22%3E%3Ccircle%20cx%3D%22600%22%20cy%3D%22600%22%20r%3D%22150%22%20stroke-opacity%3D%220.13%22%2F%3E%3Ccircle%20cx%3D%22600%22%20cy%3D%22600%22%20r%3D%22252%22%20stroke-opacity%3D%220.07%22%20stroke-dasharray%3D%222%2011%22%2F%3E%3Ccircle%20cx%3D%22600%22%20cy%3D%22600%22%20r%3D%22362%22%20stroke-opacity%3D%220.15%22%2F%3E%3Ccircle%20cx%3D%22600%22%20cy%3D%22600%22%20r%3D%22478%22%20stroke-opacity%3D%220.06%22%20stroke-dasharray%3D%221.5%209%22%2F%3E%3Ccircle%20cx%3D%22600%22%20cy%3D%22600%22%20r%3D%22585%22%20stroke-opacity%3D%220.10%22%2F%3E%3Ccircle%20cx%3D%22600%22%20cy%3D%22600%22%20r%3D%22540%22%20stroke-opacity%3D%220.05%22%20stroke-dasharray%3D%221%2034%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke-width%3D%221.2%22%3E%3Cellipse%20cx%3D%22600%22%20cy%3D%22600%22%20rx%3D%22430%22%20ry%3D%22150%22%20transform%3D%22rotate(27%20600%20600)%22%20stroke%3D%22%23ffc45a%22%20stroke-opacity%3D%220.12%22%2F%3E%3Cellipse%20cx%3D%22600%22%20cy%3D%22600%22%20rx%3D%22525%22%20ry%3D%22205%22%20transform%3D%22rotate(-19%20600%20600)%22%20stroke%3D%22%237f9ad6%22%20stroke-opacity%3D%220.09%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%22600%22%20cy%3D%22600%22%20r%3D%2222%22%20fill%3D%22url(%23node)%22%2F%3E%3Ccircle%20cx%3D%22600%22%20cy%3D%22600%22%20r%3D%223.6%22%20fill%3D%22%23ffe6bf%22%2F%3E%3Cg%3E%3Ccircle%20cx%3D%22750%22%20cy%3D%22600%22%20r%3D%2216%22%20fill%3D%22url(%23node)%22%2F%3E%3Ccircle%20cx%3D%22750%22%20cy%3D%22600%22%20r%3D%223.6%22%20fill%3D%22%23ff9e1b%22%2F%3E%3Ccircle%20cx%3D%22600%22%20cy%3D%22238%22%20r%3D%2214%22%20fill%3D%22url(%23node)%22%2F%3E%3Ccircle%20cx%3D%22600%22%20cy%3D%22238%22%20r%3D%223%22%20fill%3D%22%23ffc45a%22%2F%3E%3Ccircle%20cx%3D%22122%22%20cy%3D%22600%22%20r%3D%2220%22%20fill%3D%22url(%23node)%22%20opacity%3D%220.85%22%2F%3E%3Ccircle%20cx%3D%22122%22%20cy%3D%22600%22%20r%3D%223.6%22%20fill%3D%22%235fe8d6%22%2F%3E%3Ccircle%20cx%3D%221079%22%20cy%3D%22265%22%20r%3D%2211%22%20fill%3D%22url(%23node)%22%20opacity%3D%220.7%22%2F%3E%3Ccircle%20cx%3D%221079%22%20cy%3D%22265%22%20r%3D%222.2%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat; -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 30%,rgba(0,0,0,.62) 52%,transparent 76%); mask-image:radial-gradient(circle at 50% 50%,#000 30%,rgba(0,0,0,.62) 52%,transparent 76%);opacity:.95} .cb-bg-stars{position:absolute;inset:0;opacity:.92; background-image: radial-gradient(1.5px 1.5px at 12% 18%,rgba(255,255,255,.55),transparent 60%), radial-gradient(1.3px 1.3px at 79% 29%,rgba(255,255,255,.40),transparent 60%), radial-gradient(1.2px 1.2px at 33% 61%,rgba(255,255,255,.38),transparent 60%), radial-gradient(1.4px 1.4px at 63% 77%,rgba(255,212,150,.48),transparent 60%), radial-gradient(1.5px 1.5px at 91% 63%,rgba(255,255,255,.34),transparent 60%), radial-gradient(1.1px 1.1px at 47% 11%,rgba(255,255,255,.32),transparent 60%), radial-gradient(1.2px 1.2px at 24% 88%,rgba(255,255,255,.28),transparent 60%), radial-gradient(1.1px 1.1px at 68% 44%,rgba(255,255,255,.26),transparent 60%), radial-gradient(1.3px 1.3px at 6% 52%,rgba(255,255,255,.30),transparent 60%), radial-gradient(140% 125% at 78% 8%,transparent 50%,rgba(3,5,9,.62) 100%), url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'180'%20height%3D'180'%3E%3Cfilter%20id%3D'g'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.85'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D'linear'%20slope%3D'0.12'%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D'180'%20height%3D'180'%20filter%3D'url(%23g)'%2F%3E%3C%2Fsvg%3E"); background-size:auto,auto,auto,auto,auto,auto,auto,auto,auto,auto,180px 180px} @media (prefers-reduced-motion:no-preference){.cb-bg-orbit{animation:cbOrbit 240s linear infinite}} @keyframes cbOrbit{to{transform:rotate(360deg)}} /* ---- shared brand header (relative, so it never fights an app's own sticky toolbar) ---- */ .cb-header{position:relative;z-index:50;display:flex;align-items:center;gap:15px; padding:12px 22px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); background:rgba(10,14,19,.55);border-bottom:1px solid var(--line)} .cb-header .cb-brand{display:flex;align-items:center;gap:11px;cursor:pointer;text-decoration:none} .cb-header .cb-logo{width:34px;height:34px;flex:none;background:url(cb-logo.png) center/contain no-repeat;border-radius:8px} .cb-header .cb-brand-name{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:-.01em;text-transform:uppercase;color:#eef2f7} .cb-header .cb-brand-name b{color:var(--accent)} .cb-header .cb-wordmark{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(255,158,27,.4);border-radius:100px;padding:3px 8px} .cb-header .cb-hsep{width:1px;height:24px;background:var(--line-2);margin:0 3px} .cb-header .cb-back{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);text-decoration:none;white-space:nowrap} .cb-header .cb-back:hover{color:var(--accent)} .cb-header .cb-page-title{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--text);white-space:nowrap} .cb-header .cb-spacer{flex:1} .cb-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end} .cb-header .cb-btn{width:auto;flex:none;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:11px;background:var(--accent);color:#0a0e13;border:1px solid var(--accent);border-radius:100px;padding:9px 15px;cursor:pointer;transition:.16s} .cb-header .cb-btn.ghost{background:transparent;color:var(--text);border-color:var(--line-2)} .cb-header .cb-btn.ghost:hover{border-color:var(--accent);color:var(--accent)} .cb-acct{position:relative} .cb-acct-btn{display:flex;align-items:center;gap:9px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:100px;padding:6px 12px 6px 7px;cursor:pointer;color:var(--text);font-family:var(--body);font-size:13px} .cb-acct-btn:hover{border-color:var(--accent)} .cb-avatar{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#0a0e13;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:13px} .cb-acct-menu{position:absolute;right:0;top:46px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:14px;padding:8px;min-width:220px;z-index:60;box-shadow:0 24px 60px -18px rgba(0,0,0,.7)} .cb-acct-menu .who{padding:10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px} .cb-acct-menu button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--text);font-family:var(--body);font-size:13px;padding:9px 12px;border-radius:8px;cursor:pointer} .cb-acct-menu button:hover{background:var(--panel-3)} /* ---- shared footer ---- */ .cb-footer{border-top:1px solid var(--line);margin-top:48px;padding:24px 22px;display:flex; justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;color:var(--muted-2);font-size:12.5px;position:relative;z-index:1} .cb-footer a{color:var(--muted);text-decoration:none}.cb-footer a:hover{color:var(--accent)} .cb-footer .mono{font-family:var(--mono);letter-spacing:.05em} /* ============================================================ UNIFIED DEVICE TOOLBAR (shared across ALL configurators) ------------------------------------------------------------ Every configurator has its OWN .topbar that previously styled these classes independently, so the same info (mode pills, battery, device name, status) looked different per product. The shell is now the single authority for the toolbar look. !important is used deliberately to override each page's inline styles. Standard markup is documented in docs/ORBIT-CONFIGURATOR-GUIDELINES.md. Position/stickiness is intentionally NOT set here — each app keeps its own. ============================================================ */ /* de-dup vs the shared brand bar: hide the toolbar's own logo + its divider */ .topbar .cb-logo{display:none !important} .topbar > .cb-logo + .tb-sep{display:none !important} /* container */ .topbar{display:flex !important;align-items:center !important;gap:14px !important; padding:10px 20px !important;background:rgba(13,19,26,.82) !important; border-bottom:1px solid var(--line) !important; backdrop-filter:blur(10px) !important;-webkit-backdrop-filter:blur(10px) !important} .topbar .tb-sep{width:1px !important;height:26px !important;background:var(--line-2) !important;flex:none !important} .topbar .tb-spacer{flex:1 1 auto !important} /* device identity block */ .topbar .tb-device{display:flex !important;flex-direction:column !important;line-height:1.2 !important;flex:none !important} .topbar .tb-device .m{font-family:var(--disp) !important;font-weight:700 !important;font-size:14px !important; letter-spacing:-.01em !important;color:var(--text) !important;text-transform:none !important} .topbar .tb-device .m b{color:var(--accent) !important;font-weight:700 !important} .topbar .tb-device .s{font-family:var(--mono) !important;font-size:10px !important;letter-spacing:.06em !important; color:var(--muted) !important;text-transform:uppercase !important;margin-top:1px !important} /* connection-mode: a single segmented pill group */ .topbar .conn-mode{display:inline-flex !important;align-items:center !important;gap:2px !important; border:1px solid var(--line-2) !important;border-radius:100px !important;padding:3px !important; background:var(--panel-2) !important;flex:none !important} .topbar .conn-mode .cm-auto{font-family:var(--mono) !important;font-weight:700 !important;font-size:8.5px !important; letter-spacing:.14em !important;color:var(--accent) !important;background:rgba(255,158,27,.12) !important; border:1px solid rgba(255,158,27,.4) !important;padding:4px 8px !important;border-radius:100px !important;margin-right:2px !important} .topbar .conn-mode .cm{border:0 !important;background:transparent !important;color:var(--muted) !important; font-family:var(--mono) !important;font-weight:700 !important;font-size:10.5px !important;letter-spacing:.1em !important; padding:6px 13px !important;border-radius:100px !important} .topbar .conn-mode .cm.active{background:var(--accent) !important;color:#0a0e13 !important; box-shadow:0 0 14px -2px rgba(255,158,27,.5) !important} /* battery */ .topbar .battery{display:inline-flex !important;align-items:center !important;gap:8px !important; font-family:var(--mono) !important;font-size:11.5px !important;font-weight:600 !important;color:var(--text) !important;flex:none !important} .topbar .battery .batt-bolt{display:none !important;color:var(--accent) !important;flex:none !important} .topbar .battery.charging .batt-bolt{display:inline-block !important} .topbar .battery .batt-shell{width:34px !important;height:15px !important;border:1.5px solid var(--muted) !important; border-radius:3px !important;position:relative !important;padding:2px !important;flex:none !important} .topbar .battery .batt-shell::after{content:"" !important;position:absolute !important;right:-4px !important;top:4px !important; width:2.5px !important;height:6px !important;background:var(--muted) !important;border-radius:0 2px 2px 0 !important} .topbar .battery .batt-fill{height:100% !important;background:var(--ok) !important;border-radius:1px !important;transition:width .4s !important} .topbar .battery.charging .batt-shell{border-color:var(--accent) !important} .topbar .battery.charging .batt-fill{background:var(--accent) !important} .topbar .battery.low .batt-fill{background:var(--err) !important} /* skin picker label */ .topbar .cw-pick{display:inline-flex !important;align-items:center !important;gap:7px !important;flex:none !important} .topbar .cw-pick .lab{font-family:var(--mono) !important;font-size:9px !important;font-weight:700 !important; letter-spacing:.14em !important;text-transform:uppercase !important;color:var(--muted) !important} /* status pill */ .topbar .status-pill{display:inline-flex !important;align-items:center !important;gap:7px !important; font-family:var(--mono) !important;font-size:10.5px !important;font-weight:700 !important;letter-spacing:.06em !important; text-transform:uppercase !important;color:var(--ok) !important;padding:8px 14px !important; border:1px solid rgba(43,182,115,.3) !important;border-radius:100px !important;flex:none !important} .topbar .status-pill .pulse{width:8px !important;height:8px !important;border-radius:50% !important;background:var(--ok) !important;flex:none !important} /* action buttons (Refresh / Save / Reset / Disconnect) */ .topbar .tb-actions{display:inline-flex !important;gap:8px !important;flex:none !important} .topbar .tb-actions button{font-family:var(--mono) !important;font-size:10.5px !important;font-weight:700 !important; letter-spacing:.06em !important;text-transform:uppercase !important;background:transparent !important;color:var(--text) !important; border:1px solid var(--line-2) !important;border-radius:100px !important;padding:9px 14px !important;cursor:pointer !important;transition:.15s !important} .topbar .tb-actions button:hover{border-color:var(--accent) !important;color:var(--accent) !important} .topbar .tb-actions button.save{background:var(--accent) !important;color:#0a0e13 !important;border-color:var(--accent) !important} .topbar .tb-actions button.danger:hover{border-color:var(--err) !important;color:var(--err) !important}