/* ============================================================ ATEN v3.0 "Golden Hour" — home redesign styles Loaded on every page but INERT unless . All selectors are v3- prefixed / scoped to #atenHomeV3 so they cannot touch the existing app CSS. Theme follows the app's . Built from the signed-off demo (artifact f9d61a6a). No emoji, gold + royal-blue + steel. ============================================================ */ #atenHomeV3{ --v3-ground:#0b0d13; --v3-ink:#e9ebf2; --v3-dim:#8b91a4; --v3-hair:#232838; --v3-gold:#c99a3b; --v3-gold-hi:#e6c26a; --v3-blue:#2f66b8; position:fixed; inset:0; z-index:1200; display:none; background:#060810; overflow:hidden; overflow-y:auto; scrollbar-gutter:stable; /* reserve scrollbar space so content never re-centers when it appears */ flex-direction:column; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif; color:var(--v3-ink); -webkit-font-smoothing:antialiased; } /* v3 home shows only in the app's welcome state; when a chat opens (app removes body.show-welcome) it hides and the v2 chat view shows. */ body.home-v3.show-welcome #atenHomeV3{ display:flex; } #atenHomeV3 *{ box-sizing:border-box; margin:0; padding:0; } /* ── background + scrim + sun-rays ── */ #atenHomeV3 .v3-bg{position:absolute;inset:0;background-image:url('/backgrounds/welcome-bg.webp'); background-size:cover;background-position:center 30%;animation:v3drift 50s ease-in-out infinite alternate} @keyframes v3drift{from{transform:scale(1)}to{transform:scale(1.06)}} #atenHomeV3 .v3-scrim{position:absolute;inset:0;background: radial-gradient(90% 70% at 50% 40%, rgba(5,7,14,.16), rgba(5,7,14,.6) 70%, rgba(4,6,12,.9)), linear-gradient(180deg, rgba(5,7,14,.55), rgba(5,7,14,.12) 30%, rgba(4,6,12,.3) 60%, rgba(3,5,10,.93) 88%)} #atenHomeV3 .v3-rays{position:absolute;left:50%;top:34%;width:900px;height:900px;transform:translate(-50%,-50%);pointer-events:none; background:repeating-conic-gradient(from 0deg, rgba(212,168,74,.10) 0deg .5deg, transparent .5deg 3.6deg); -webkit-mask:radial-gradient(circle, #000 0%, rgba(0,0,0,.5) 26%, transparent 58%); mask:radial-gradient(circle, #000 0%, rgba(0,0,0,.5) 26%, transparent 58%); animation:v3rayspin 140s linear infinite;opacity:.85} @keyframes v3rayspin{to{transform:translate(-50%,-50%) rotate(360deg)}} /* ── header (the shell) ── */ #atenHomeV3 .v3-hd{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:15px 24px} #atenHomeV3 .v3-idmark{display:flex;align-items:center;gap:11px} #atenHomeV3 .v3-disk{width:34px;height:34px;border-radius:50%;box-shadow:0 0 14px rgba(201,154,59,.35), 0 2px 8px rgba(0,0,0,.5)} #atenHomeV3 .v3-wordmark{font-weight:800;font-size:17px;letter-spacing:.16em;color:#f2ecd9;line-height:1} #atenHomeV3 .v3-wordmark small{display:block;font-size:8.5px;letter-spacing:.34em;color:#b8a97e;font-weight:700;margin-top:2px} #atenHomeV3 .v3-side{display:flex;align-items:center;gap:16px;color:#aab0c2} #atenHomeV3 .v3-side .v3-iconbtn{background:none;border:0;color:inherit;cursor:pointer;display:grid;place-items:center;padding:4px;border-radius:8px} #atenHomeV3 .v3-side .v3-iconbtn:hover{background:rgba(255,255,255,.08)} #atenHomeV3 .v3-side svg{width:19px;height:19px} #atenHomeV3 .v3-online{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#9fe8b2;font-weight:600} #atenHomeV3 .v3-pulse{width:7px;height:7px;border-radius:50%;background:#2ee06a;box-shadow:0 0 0 0 rgba(46,224,106,.6);animation:v3pulse 2.4s ease-out infinite} @keyframes v3pulse{70%{box-shadow:0 0 0 7px rgba(46,224,106,0)}100%{box-shadow:0 0 0 0 rgba(46,224,106,0)}} /* explicit Home button — an obvious way back from chat / KB / the Zigbee Planner / Products. Hidden on the welcome home screen itself (redundant there); shown in shell + subpage mode. */ #atenHomeV3 .v3-homebtn{display:none;align-items:center;gap:7px;cursor:pointer;font:inherit;font-size:13px;font-weight:700; padding:7px 14px 7px 11px;border-radius:11px;color:#f2ecd9;background:rgba(201,154,59,.18);border:1px solid rgba(201,154,59,.5)} #atenHomeV3 .v3-homebtn:hover{background:rgba(201,154,59,.28);border-color:var(--v3-gold-hi)} #atenHomeV3 .v3-homebtn svg{width:17px;height:17px} body.home-v3:not(.show-welcome) #atenHomeV3 .v3-homebtn, body.home-v3.v3-subpage #atenHomeV3 .v3-homebtn{display:inline-flex} html[data-theme="light"] #atenHomeV3 .v3-homebtn{color:#7a5a12;background:rgba(201,154,59,.15);border-color:rgba(168,127,40,.55)} html[data-theme="light"] #atenHomeV3 .v3-homebtn:hover{background:rgba(201,154,59,.24)} @media (max-width:520px){ #atenHomeV3 .v3-homebtn span{display:none} #atenHomeV3 .v3-homebtn{padding:7px 9px} } /* ── hero ── */ #atenHomeV3 .v3-core{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 30px 24px;text-align:center} #atenHomeV3 .v3-greet{font-size:13.5px;color:#d6cfc0;font-weight:600;text-shadow:0 1px 12px rgba(0,0,0,.65)} #atenHomeV3 .v3-big{font-size:35px;font-weight:800;letter-spacing:-.025em;text-wrap:balance;margin:7px 0 26px;text-shadow:0 2px 24px rgba(0,0,0,.7)} #atenHomeV3 .v3-big em{font-style:normal;background:linear-gradient(100deg,#e6c26a,#c99a3b);-webkit-background-clip:text;background-clip:text;color:transparent} /* ── ask bar ── */ #atenHomeV3 .v3-ask{display:flex;align-items:center;gap:12px;width:min(680px,94%);background:rgba(8,10,17,.82);backdrop-filter:blur(20px); border:1px solid rgba(201,154,59,.55);border-radius:24px;padding:16px 16px 16px 22px; box-shadow:0 10px 40px rgba(0,0,0,.45), 0 0 0 0 rgba(201,154,59,0);transition:box-shadow .3s,border-color .3s} #atenHomeV3 .v3-ask:focus-within,#atenHomeV3 .v3-ask:hover{border-color:var(--v3-gold-hi);box-shadow:0 10px 40px rgba(0,0,0,.45), 0 0 0 5px rgba(201,154,59,.13), 0 0 34px rgba(201,154,59,.22)} #atenHomeV3 .v3-ask input{flex:1;min-width:0;background:none;border:0;outline:0;color:#f0ead9;font:inherit;font-size:15.5px} #atenHomeV3 .v3-ask input::placeholder{color:#8d8e9e} #atenHomeV3 .v3-ask .v3-micb{width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.06);display:grid;place-items:center;color:#b8ab8a;flex:none;cursor:pointer;border:1px solid rgba(255,255,255,.09)} #atenHomeV3 .v3-ask .v3-micb svg{width:17px;height:17px} #atenHomeV3 .v3-ask .v3-send{width:42px;height:42px;border-radius:13px;background:linear-gradient(160deg,#e6c26a,#b8862f);display:grid;place-items:center;color:#191204;flex:none;border:0;cursor:pointer;box-shadow:0 4px 18px rgba(201,154,59,.4)} #atenHomeV3 .v3-ask .v3-send svg{width:19px;height:19px} /* ── dock ── */ #atenHomeV3 .v3-dock{position:relative;z-index:3;margin:6px 22px 20px;border-radius:20px;border:1px solid rgba(255,255,255,.1); background:rgba(9,12,19,.66);backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px rgba(0,0,0,.4)} #atenHomeV3 .v3-dockin{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:10px;padding:14px} #atenHomeV3 .v3-tool{display:flex;flex-direction:column;align-items:center;gap:8px;padding:13px 8px 11px;border-radius:14px;border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.03);cursor:pointer;transition:transform .18s,border-color .18s,background .18s;text-align:center;text-decoration:none;color:inherit} #atenHomeV3 .v3-tool:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.065)} #atenHomeV3 .v3-tool .v3-ti{width:52px;height:52px;display:grid;place-items:center} #atenHomeV3 .v3-tool .v3-ti img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 5px 12px rgba(0,0,0,.55))} #atenHomeV3 .v3-tool .v3-tn{font-size:12px;font-weight:700} #atenHomeV3 .v3-tool .v3-td{font-size:10px;color:#868c9f} /* KB flagship tile */ #atenHomeV3 .v3-tool.v3-kbx{flex-direction:row;text-align:left;gap:13px;padding:13px 16px;align-items:center;position:relative;overflow:hidden; border-color:rgba(201,154,59,.5);background:linear-gradient(120deg,rgba(47,102,184,.22),rgba(201,154,59,.1) 70%)} #atenHomeV3 .v3-tool.v3-kbx:hover{border-color:var(--v3-gold-hi)} #atenHomeV3 .v3-tool.v3-kbx .v3-ti{width:58px;height:58px;flex:none} #atenHomeV3 .v3-tool.v3-kbx .v3-ti img{width:58px;height:58px} #atenHomeV3 .v3-tool.v3-kbx .v3-tn{font-size:19px;font-weight:800;letter-spacing:.2px;display:block;margin-bottom:2px} #atenHomeV3 .v3-tool.v3-kbx .v3-td{font-size:11px;color:#c8ad74} /* steel tiles */ #atenHomeV3 .v3-tool.v3-steel{border-color:rgba(154,164,184,.4);background:linear-gradient(120deg,rgba(154,164,184,.14),rgba(255,255,255,.02) 70%)} #atenHomeV3 .v3-tool.v3-steel:hover{border-color:#b6bfd2;box-shadow:0 6px 22px rgba(154,164,184,.2)} #atenHomeV3 .v3-newb{position:absolute;top:8px;right:10px;font-size:8.5px;font-weight:800;letter-spacing:.14em;color:#191204;background:linear-gradient(135deg,#ecc46a,#c99a3b);border-radius:8px;padding:2px 7px} /* ── footer ribbon ── */ #atenHomeV3 .v3-ribbon{position:relative;z-index:3;display:flex;justify-content:center;align-items:center;gap:14px;padding:0 20px 16px;font-size:11px;color:#7e8496;letter-spacing:.04em} #atenHomeV3 .v3-ribbon b{color:#cec9b8;font-weight:700} #atenHomeV3 .v3-ribbon span{display:inline-flex;gap:6px;align-items:center} #atenHomeV3 .v3-ribbon i{width:4px;height:4px;border-radius:50%;background:var(--v3-gold);font-style:normal} #atenHomeV3 .v3-silogo{height:15px;width:auto;opacity:.9} /* ── icon theme-swap (light asset on dark theme; navy asset on light) ── */ #atenHomeV3 img.v3-onlight{display:none} [data-theme="light"] #atenHomeV3 img.v3-ondark{display:none} [data-theme="light"] #atenHomeV3 img.v3-onlight{display:inline-block} /* ══════ LIGHT THEME ══════ */ [data-theme="light"] #atenHomeV3{background:#eef0f5} [data-theme="light"] #atenHomeV3 .v3-scrim{background: radial-gradient(90% 70% at 50% 40%, rgba(244,246,250,.18), rgba(240,243,248,.66) 70%, rgba(238,241,247,.94)), linear-gradient(180deg, rgba(244,246,250,.72), rgba(244,246,250,.2) 30%, rgba(242,245,250,.4) 60%, rgba(238,241,247,.96) 88%)} [data-theme="light"] #atenHomeV3 .v3-rays{background:repeating-conic-gradient(from 0deg, rgba(168,127,40,.13) 0deg .5deg, transparent .5deg 3.6deg)} [data-theme="light"] #atenHomeV3 .v3-wordmark{color:#2b2410} [data-theme="light"] #atenHomeV3 .v3-wordmark small{color:#8a7a4e} [data-theme="light"] #atenHomeV3 .v3-side{color:#2e3442} [data-theme="light"] #atenHomeV3 .v3-online{color:#1e8f43} [data-theme="light"] #atenHomeV3 .v3-greet{color:#4d4634;text-shadow:0 1px 10px rgba(255,255,255,.7)} [data-theme="light"] #atenHomeV3 .v3-big{color:#12151f;text-shadow:0 2px 16px rgba(255,255,255,.9)} [data-theme="light"] #atenHomeV3 .v3-big em{background:linear-gradient(100deg,#8a6410,#6e5212);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 1px 8px rgba(255,255,255,.85))} [data-theme="light"] #atenHomeV3 .v3-ask{background:rgba(255,255,255,.82);border-color:rgba(168,127,40,.6);box-shadow:0 10px 36px rgba(30,40,60,.14)} [data-theme="light"] #atenHomeV3 .v3-ask:focus-within,[data-theme="light"] #atenHomeV3 .v3-ask:hover{border-color:#a87f28;box-shadow:0 10px 36px rgba(30,40,60,.14), 0 0 0 5px rgba(201,154,59,.15)} [data-theme="light"] #atenHomeV3 .v3-ask input{color:#242a38} [data-theme="light"] #atenHomeV3 .v3-ask input::placeholder{color:#8b90a0} [data-theme="light"] #atenHomeV3 .v3-ask .v3-micb{background:rgba(20,26,40,.05);border-color:rgba(20,26,40,.12);color:#8a7a4e} [data-theme="light"] #atenHomeV3 .v3-dock{background:rgba(255,255,255,.72);border-color:rgba(20,26,40,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 18px 40px rgba(30,40,60,.12)} [data-theme="light"] #atenHomeV3 .v3-tool{border-color:rgba(20,26,40,.08);background:rgba(255,255,255,.55)} [data-theme="light"] #atenHomeV3 .v3-tool .v3-tn{color:#232838} [data-theme="light"] #atenHomeV3 .v3-tool .v3-td{color:#6d7382} [data-theme="light"] #atenHomeV3 .v3-tool.v3-kbx{border-color:rgba(168,127,40,.55);background:linear-gradient(120deg,rgba(47,102,184,.12),rgba(201,154,59,.14) 70%)} [data-theme="light"] #atenHomeV3 .v3-tool.v3-kbx .v3-td{color:#8a6f35} [data-theme="light"] #atenHomeV3 .v3-tool.v3-steel{background:linear-gradient(120deg,rgba(154,164,184,.16),rgba(255,255,255,.5) 70%)} [data-theme="light"] #atenHomeV3 .v3-tool .v3-ti img{filter:drop-shadow(0 4px 10px rgba(30,40,60,.25))} [data-theme="light"] #atenHomeV3 .v3-ribbon{color:#767c8c} [data-theme="light"] #atenHomeV3 .v3-ribbon b{color:#3c4152} /* ══════ SPLASH — the shade-rise intro ══════ */ /* fixed to the viewport (not the scroll container) so the medallion centers on the true viewport center and never re-centers when a scrollbar appears */ #atenHomeV3 .v3-splash{position:fixed;inset:0;z-index:9;background:#04050a;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translateY(0)} #atenHomeV3 .v3-splash .v3-glowfield{position:absolute;left:50%;top:50%;width:760px;height:760px;transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(201,154,59,.2), rgba(47,102,184,.1) 40%, transparent 68%);animation:v3breathe 3.2s ease-in-out infinite} @keyframes v3breathe{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}} #atenHomeV3 .v3-splash img.v3-medallion{width:min(330px,58%);height:auto;position:relative;transform-origin:center center;filter:drop-shadow(0 0 34px rgba(201,154,59,.35));animation:v3arrive 1.6s cubic-bezier(.2,.7,.2,1) both} @keyframes v3arrive{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}} #atenHomeV3 .v3-splash .v3-loadline{position:relative;margin-top:26px;width:150px;height:2px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden} #atenHomeV3 .v3-splash .v3-loadline::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--v3-gold-hi),transparent);animation:v3sweep 1.1s ease-in-out infinite} @keyframes v3sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}} #atenHomeV3 .v3-splash .v3-hem{position:absolute;left:0;right:0;bottom:-7px;height:7px;background:linear-gradient(180deg,#d9b45c,#8a6a24);box-shadow:0 4px 14px rgba(0,0,0,.6)} /* run the shade-rise when #atenHomeV3 has .v3-play */ #atenHomeV3.v3-play .v3-splash{animation:v3shadeUp 1.5s cubic-bezier(.65,0,.25,1) 2.3s forwards} @keyframes v3shadeUp{to{transform:translateY(-102%)}} /* if the splash already ran this session, don't show it at all */ #atenHomeV3.v3-nosplash .v3-splash{display:none} /* LIGHT-MODE splash — warm-paper ground + the navy/light medallion (Dan: dark AND light splash) */ [data-theme="light"] #atenHomeV3 .v3-splash{background:#eef0f5} [data-theme="light"] #atenHomeV3 .v3-splash .v3-glowfield{background:radial-gradient(circle, rgba(201,154,59,.3), rgba(47,102,184,.14) 40%, transparent 68%)} [data-theme="light"] #atenHomeV3 .v3-splash .v3-loadline{background:rgba(20,26,40,.1)} [data-theme="light"] #atenHomeV3 .v3-medallion{filter:drop-shadow(0 0 30px rgba(201,154,59,.3))} [data-theme="light"] #atenHomeV3 .v3-splash .v3-hem{background:linear-gradient(180deg,#e6c26a,#b8862f)} /* ══════ MENU DRAWER (slides from right, all screens) ══════ */ /* visibility (not display) so the panel can slide BOTH ways; hide is delayed until the slide-out finishes. Smoother easing + blurring backdrop + a staggered row reveal so the open feels alive, not a pop. */ #atenHomeV3 .v3-drawer{position:fixed;inset:0;z-index:20;visibility:hidden;pointer-events:none;transition:visibility 0s linear .45s} #atenHomeV3 .v3-drawer.v3-open{visibility:visible;pointer-events:auto;transition:visibility 0s} #atenHomeV3 .v3-drawer .v3-dim{position:absolute;inset:0;background:rgba(4,6,12,.55);opacity:0;transition:opacity .4s ease,backdrop-filter .4s ease} #atenHomeV3 .v3-drawer.v3-open .v3-dim{opacity:1;backdrop-filter:blur(4px)} #atenHomeV3 .v3-drawer .v3-panel{position:absolute;right:0;top:0;bottom:0;width:min(340px,82%);border-left:1px solid rgba(255,255,255,.09); background:rgba(10,13,20,.97);display:flex;flex-direction:column;padding:40px 0 12px;transform:translateX(100%); transition:transform .45s cubic-bezier(.22,1,.36,1);overflow-y:auto;box-shadow:-24px 0 60px rgba(0,0,0,.45)} #atenHomeV3 .v3-drawer.v3-open .v3-panel{transform:translateX(0)} #atenHomeV3 .v3-drawer .v3-panel > *{opacity:0;transform:translateX(10px);transition:opacity .32s ease,transform .32s ease} #atenHomeV3 .v3-drawer.v3-open .v3-panel > *{opacity:1;transform:none} #atenHomeV3 .v3-drawer.v3-open .v3-panel > *:nth-child(1){transition-delay:.10s} #atenHomeV3 .v3-drawer.v3-open .v3-panel > *:nth-child(2){transition-delay:.13s} #atenHomeV3 .v3-drawer.v3-open .v3-panel > *:nth-child(3){transition-delay:.16s} #atenHomeV3 .v3-drawer.v3-open .v3-panel > *:nth-child(4){transition-delay:.19s} #atenHomeV3 .v3-drawer.v3-open .v3-panel > *:nth-child(5){transition-delay:.22s} #atenHomeV3 .v3-drawer.v3-open .v3-panel > *:nth-child(6){transition-delay:.25s} #atenHomeV3 .v3-drawer.v3-open .v3-panel > *:nth-child(7){transition-delay:.28s} #atenHomeV3 .v3-drawer.v3-open .v3-panel > *:nth-child(n+8){transition-delay:.31s} #atenHomeV3 .v3-dp-prof{display:flex;align-items:center;gap:11px;padding:10px 16px 14px;border-bottom:1px solid rgba(255,255,255,.08)} #atenHomeV3 .v3-dp-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(150deg,#e0b054,#a87f28);display:grid;place-items:center;font-weight:800;font-size:14px;color:#191204;flex:none} #atenHomeV3 .v3-dp-name{font-size:13.5px;font-weight:750} #atenHomeV3 .v3-dp-org{font-size:10.5px;color:#8b91a4;margin-top:1px} #atenHomeV3 .v3-dp-sec{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#6b7182;font-weight:700;padding:13px 16px 6px} #atenHomeV3 .v3-dp-item{display:flex;align-items:center;gap:10px;padding:10px 14px 10px 16px;font-size:12.5px;font-weight:600;color:#d5d9e4;min-width:0;background:none;border:0;width:100%;text-align:left;cursor:pointer;font-family:inherit} #atenHomeV3 .v3-dp-item:hover{background:rgba(255,255,255,.05)} #atenHomeV3 .v3-dp-item>span:first-of-type{white-space:nowrap;flex:1} #atenHomeV3 .v3-dp-item svg{width:16px;height:16px;color:#9aa0b2;flex:none} #atenHomeV3 .v3-dp-item .v3-badge{margin-left:auto;font-size:8.5px;font-weight:800;letter-spacing:.1em;color:#191204;background:linear-gradient(135deg,#ecc46a,#c99a3b);border-radius:7px;padding:2px 6px} #atenHomeV3 .v3-dp-item.v3-signout{color:#f08a8a} #atenHomeV3 .v3-dp-item.v3-signout svg{color:#f08a8a} #atenHomeV3 .v3-appearance{display:flex;gap:2px;margin-left:auto;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:2px;flex:none} #atenHomeV3 .v3-appearance button{font-size:9px;font-weight:700;padding:3px 7px;border-radius:6px;color:#8b91a4;white-space:nowrap;background:none;border:0;cursor:pointer;font-family:inherit} #atenHomeV3 .v3-appearance button.v3-on{background:#c99a3b;color:#191204} #atenHomeV3 .v3-dp-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding:11px 16px 2px;font-size:9.5px;color:#6b7182;line-height:1.5} #atenHomeV3 .v3-dp-foot b{color:#9aa0b2} [data-theme="light"] #atenHomeV3 .v3-drawer .v3-panel{background:rgba(255,255,255,.98);border-color:rgba(20,26,40,.1)} [data-theme="light"] #atenHomeV3 .v3-dp-name{color:#232838} [data-theme="light"] #atenHomeV3 .v3-dp-item{color:#3c4152} [data-theme="light"] #atenHomeV3 .v3-dp-item svg{color:#6d7382} [data-theme="light"] #atenHomeV3 .v3-dp-sec,[data-theme="light"] #atenHomeV3 .v3-dp-foot{color:#8a90a0} [data-theme="light"] #atenHomeV3 .v3-dp-prof,[data-theme="light"] #atenHomeV3 .v3-dp-foot{border-color:rgba(20,26,40,.08)} /* ══════ MOBILE ══════ */ @media (max-width:680px){ #atenHomeV3 .v3-hd{padding:calc(12px + env(safe-area-inset-top,0px)) 16px 8px} #atenHomeV3 .v3-wordmark{font-size:14px} #atenHomeV3 .v3-disk{width:28px;height:28px} #atenHomeV3 .v3-core{padding:0 16px 10px} #atenHomeV3 .v3-big{font-size:23px;margin:5px 0 18px} #atenHomeV3 .v3-greet{font-size:11.5px} #atenHomeV3 .v3-ask{width:100%;padding:13px 12px 13px 16px;border-radius:20px} #atenHomeV3 .v3-ask input{font-size:14px} /* dock reflows: KB banner on its own row, then a 2×2 of steel tiles */ #atenHomeV3 .v3-dock{margin:10px 12px calc(12px + env(safe-area-inset-bottom,0px))} #atenHomeV3 .v3-dockin{display:flex;flex-direction:column;gap:9px;padding:11px} #atenHomeV3 .v3-tool.v3-kbx{order:-1} #atenHomeV3 .v3-theme-btn{display:none} /* theme lives in the drawer on phones */ #atenHomeV3 .v3-steelgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} /* 2×2 */ #atenHomeV3 .v3-tool.v3-steel{padding:10px 4px 9px} #atenHomeV3 .v3-tool.v3-steel .v3-ti{width:44px;height:44px} #atenHomeV3 .v3-tool.v3-steel .v3-ti img{width:44px;height:44px} #atenHomeV3 .v3-tool.v3-steel .v3-tn{font-size:9.5px} #atenHomeV3 .v3-tool.v3-steel .v3-td{display:none} } /* desktop: the 4 steel tiles sit inline in the grid, so the wrapper is contents */ @media (min-width:681px){ #atenHomeV3 .v3-steelgrid{display:contents} /* desktop: the hero tile label reads small at full width — scale it up */ #atenHomeV3 .v3-tool.v3-kbx .v3-tn{font-size:25px} #atenHomeV3 .v3-tool.v3-kbx .v3-td{font-size:13px} #atenHomeV3 .v3-tool.v3-kbx .v3-ti,#atenHomeV3 .v3-tool.v3-kbx .v3-ti img{width:68px;height:68px} } /* ══════ SHELL MODE — carry the v3 header + drawer into chat/KB (Dan's shell-consistency rule) ══════ When v3 is active and a chat is open (body loses show-welcome), keep #atenHomeV3 as a TRANSPARENT, click-through frame: only the header + drawer remain, the home content (bg/hero/dock/footer/splash) is hidden, and the v2 app header is replaced. */ body.home-v3 > header{display:none !important} /* replace ONLY the top-level v2 app header (not the v3

nested in #atenHomeV3) */ body.home-v3:not(.show-welcome) #atenHomeV3{display:flex !important;background:transparent !important;pointer-events:none;overflow:visible} body.home-v3:not(.show-welcome) #atenHomeV3 .v3-bg, body.home-v3:not(.show-welcome) #atenHomeV3 .v3-scrim, body.home-v3:not(.show-welcome) #atenHomeV3 .v3-rays, body.home-v3:not(.show-welcome) #atenHomeV3 .v3-core, body.home-v3:not(.show-welcome) #atenHomeV3 .v3-dock, body.home-v3:not(.show-welcome) #atenHomeV3 .v3-ribbon, body.home-v3:not(.show-welcome) #atenHomeV3 .v3-splash{display:none !important} /* the header stays a solid, interactive bar over the chat; drawer keeps its own open/close pointer logic */ body.home-v3:not(.show-welcome) #atenHomeV3 .v3-hd{pointer-events:auto;background:rgba(7,9,16,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)} html[data-theme="light"] body.home-v3:not(.show-welcome) #atenHomeV3 .v3-hd{background:rgba(248,249,252,.94);border-bottom-color:rgba(20,26,40,.08)} body.home-v3:not(.show-welcome) #atenHomeV3 .v3-idmark{cursor:pointer} /* logo = back to home */ /* push chat content below the fixed shell header */ body.home-v3:not(.show-welcome) #chat-area{padding-top:74px !important} /* sub-pages (zigbee-planner.html / products.html) — shell only, no chat. zigbee's own

is already hidden by "body.home-v3 > header" above; hide products' .top-bar too, and clear the fixed shell header. */ body.home-v3.v3-subpage .top-bar{display:none !important} body.home-v3.v3-subpage{padding-top:64px !important} /* ══════ CHAT (v3-gated: only when body.home-v3) ══════ Restyles the existing v2 chat so it matches the Golden Hour identity: eye avatar on every reply, eye + spinning gold ring while thinking, gold citation pill, gold user initials. All scoped to body.home-v3 so dealers on v2 are unaffected. eye_ondark = white eye (dark theme), eye_onlight = navy eye (light theme). */ body.home-v3 .msg-group.bot .msg-avatar{background:url('/eye_ondark.png') center/contain no-repeat !important} html[data-theme="light"] body.home-v3 .msg-group.bot .msg-avatar{background-image:url('/eye_onlight.png') !important} body.home-v3 .msg-group.bot .msg-avatar img{display:none !important} /* thinking → the gold ring spins around the SAME bot-eye avatar (no 2nd icon). Hide the in-bubble ring; draw a spinning ring around the thinking message's avatar via :has(). overflow:visible so the ring isn't clipped by the circle. */ body.home-v3 .typing-ring{display:none !important} body.home-v3 .typing-text{color:#8b91a4 !important;font-weight:600;letter-spacing:.04em} body.home-v3 .msg-group.bot:has(.typing-container) .msg-avatar{overflow:visible !important;position:relative} body.home-v3 .msg-group.bot:has(.typing-container) .msg-avatar::after{content:"";position:absolute;inset:-4px;border-radius:50%; border:2.5px solid transparent;border-top-color:#c99a3b;border-right-color:rgba(201,154,59,.4);animation:v3tspin 1.1s linear infinite} @keyframes v3tspin{to{transform:rotate(360deg)}} /* citation → gold "Pulling from:" pill */ body.home-v3 .source-citation{display:inline-flex;align-items:center;gap:7px;color:#d9b45c !important; background:rgba(201,154,59,.1) !important;border:1px solid rgba(201,154,59,.35) !important;border-radius:9px; padding:5px 10px;font-size:11px;font-weight:700;width:auto} html[data-theme="light"] body.home-v3 .source-citation{color:#8a6410 !important;background:rgba(201,154,59,.12) !important} body.home-v3 .source-citation a{color:inherit !important} /* user avatar → gold initials circle */ body.home-v3 .msg-group.user .msg-avatar{background:linear-gradient(150deg,#e0b054,#a87f28) !important;color:#191204 !important;font-weight:800 !important} /* chat input → the gold ask-bar (matches the home ask bar). Dan: in-chat it "blended in" — so it now reads as a solid, elevated surface that pops off the dark page: opaque fill, 2px gold border, resting glow. */ body.home-v3 .input-box{background:rgba(20,24,36,.94) !important;border:2px solid rgba(201,154,59,.75) !important;border-radius:22px !important;backdrop-filter:blur(12px); box-shadow:0 8px 26px rgba(0,0,0,.55), 0 0 0 1px rgba(201,154,59,.16), 0 0 20px rgba(201,154,59,.16) !important;transition:border-color .3s,box-shadow .3s} body.home-v3 .input-box:focus-within{border-color:#e6c26a !important;box-shadow:0 8px 28px rgba(0,0,0,.6), 0 0 0 4px rgba(201,154,59,.2), 0 0 32px rgba(201,154,59,.32) !important} body.home-v3 #chat-input::placeholder{color:#9a9482 !important} /* lift the composer bar so the input zone reads as its own surface, not the page */ body.home-v3 .input-area{border-top:1px solid rgba(201,154,59,.22) !important;box-shadow:0 -6px 20px rgba(0,0,0,.35) !important} html[data-theme="light"] body.home-v3 .input-box{background:rgba(255,255,255,.97) !important;border-color:rgba(168,127,40,.7) !important; box-shadow:0 8px 24px rgba(60,50,20,.14), 0 0 0 1px rgba(168,127,40,.14) !important} html[data-theme="light"] body.home-v3 .input-box:focus-within{border-color:#a87f28 !important;box-shadow:0 8px 26px rgba(60,50,20,.18), 0 0 0 4px rgba(201,154,59,.18) !important} html[data-theme="light"] body.home-v3 .input-area{border-top-color:rgba(168,127,40,.28) !important;box-shadow:0 -6px 18px rgba(60,50,20,.08) !important} html[data-theme="light"] body.home-v3 #chat-input::placeholder{color:#8a8674 !important} body.home-v3 .send-btn{background:linear-gradient(160deg,#e6c26a,#b8862f) !important;color:#191204 !important;box-shadow:0 4px 18px rgba(201,154,59,.4) !important} body.home-v3 .send-btn:hover{background:linear-gradient(160deg,#f0d080,#c9902f) !important} body.home-v3 .send-btn:disabled{opacity:.45 !important;box-shadow:none !important} body.home-v3 .send-btn svg{color:#191204 !important} /* ══════ KB LIBRARY / VIDEOS / READER — light v3 restyle (Dan: gold accents + disk mark, keep chrome) ══════ These overlays drive their toolbars/cards off var(--accent) (blue). Remap --accent to gold SCOPED to just these two modals → title gradient, focus rings, buttons, card-hover, reader link, section bar all turn gold at once. All controls (Back/Contents/Print/search) untouched. */ body.home-v3 #libModal, body.home-v3 #videosModal{ --accent:#c99a3b; --accent-soft:rgba(201,154,59,.14); } /* subtle ATEN disk mark before the Library/Videos titles */ body.home-v3 .lib-title::before, body.home-v3 .videos-title::before{content:"";width:26px;height:26px;flex:none;border-radius:50%;background:url('/home-icons/aten-disk.png') center/contain no-repeat;-webkit-text-fill-color:initial} /* gold "primary" buttons need dark text, not white */ body.home-v3 #libModal .lib-btn-sm.primary, body.home-v3 #videosModal .videos-btn.primary{color:#191204 !important} /* swap the hard-coded blue category-hover glow for gold */ body.home-v3 .lib-cat-card:hover{box-shadow:var(--shadow-lg), 0 0 26px rgba(201,154,59,.22) !important} /* MOBILE: the v3 disk mark + count pill widened .lib-title enough to push the super-admin "Arrange" button half off-screen (Dan, ~390px). Let the title shrink, drop the count pill, and shrink the disk so Arrange + close stay on. */ @media (max-width:640px){ body.home-v3 .lib-title, body.home-v3 .videos-title{min-width:0 !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} body.home-v3 .lib-title .lib-count{display:none !important} body.home-v3 .lib-title::before, body.home-v3 .videos-title::before{width:20px;height:20px} } /* Hide "Open on the web" until the WP migration is public (Dan). */ body.home-v3 .lib-reader-web{display:none !important} /* DESKTOP READER: true full-screen so the article is big (Dan: window too small). Mobile reader is already full-screen. Keeps the Ask ATEN side pane. */ @media (min-width:900px){ body.home-v3 .lib-modal{padding:0 !important} body.home-v3 .lib-panel.reader-mode{max-width:none !important;width:100vw !important;height:100vh !important;height:100dvh !important;max-height:none !important;border-radius:0 !important} } /* ══════ v3 MODAL (Saved procedures / What's new) — top-level so it works on every page ══════ */ .v3-modal{position:fixed;inset:0;z-index:1400;display:flex;align-items:center;justify-content:center;padding:20px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;opacity:0;transition:opacity .22s;pointer-events:none} .v3-modal.v3-open{opacity:1;pointer-events:auto} .v3-modal .v3-modal-dim{position:absolute;inset:0;background:rgba(4,6,12,.6);backdrop-filter:blur(5px)} .v3-modal .v3-modal-panel{position:relative;width:min(520px,100%);max-height:82vh;display:flex;flex-direction:column; background:#12141c;color:#e9ebf2;border:1px solid #262c3d;border-radius:18px;overflow:hidden; box-shadow:0 40px 90px rgba(0,0,0,.55);transform:translateY(10px) scale(.98);transition:transform .25s cubic-bezier(.22,1,.36,1)} .v3-modal.v3-open .v3-modal-panel{transform:none} .v3-modal .v3-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08);flex:none} .v3-modal .v3-modal-title{font-size:15px;font-weight:800;background:linear-gradient(135deg,#e9ebf2,#c99a3b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .v3-modal .v3-modal-close{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#e9ebf2;width:30px;height:30px;border-radius:9px;font-size:1.2rem;line-height:1;cursor:pointer;flex:none} .v3-modal .v3-modal-close:hover{background:rgba(255,255,255,.12)} .v3-modal .v3-modal-body{padding:16px 18px;overflow-y:auto} .v3-modal .v3-hint{font-size:12.5px;line-height:1.55;color:#c8ad74;background:rgba(201,154,59,.1);border:1px solid rgba(201,154,59,.3);border-radius:11px;padding:11px 13px;margin-bottom:14px} .v3-modal .v3-hint b{color:#e6c26a} .v3-modal .v3-empty{font-size:13px;color:#8b91a4;text-align:center;padding:18px 8px} .v3-modal .v3-saved-list{display:flex;flex-direction:column;gap:8px} .v3-modal .v3-saved-item{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);cursor:pointer;transition:border-color .18s,background .18s} .v3-modal .v3-saved-item:hover{border-color:rgba(201,154,59,.5);background:rgba(201,154,59,.06)} .v3-modal .v3-saved-txt{flex:1;font-size:12.5px;line-height:1.5;color:#d5d9e4} .v3-modal .v3-saved-rm{flex:none;background:none;border:0;color:#8b91a4;font-size:1.15rem;line-height:1;cursor:pointer;padding:0 2px} .v3-modal .v3-saved-rm:hover{color:#f08a8a} .v3-modal .v3-whatsnew{display:flex;flex-direction:column;gap:12px} .v3-modal .v3-wn-item{border-left:2px solid #c99a3b;padding:2px 0 2px 12px} .v3-modal .v3-wn-t{font-size:13.5px;font-weight:750;color:#f2ecd9} .v3-modal .v3-wn-d{font-size:12px;line-height:1.5;color:#9aa0b2;margin-top:2px} /* contact chooser — Sales / Support / Design Services */ .v3-modal .v3-cc-list{display:flex;flex-direction:column;gap:10px} .v3-modal .v3-cc{display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;font:inherit; padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(201,154,59,.3); transition:border-color .18s,background .18s,transform .1s} .v3-modal .v3-cc:hover{background:rgba(201,154,59,.12);border-color:#e6c26a;transform:translateY(-1px)} .v3-modal .v3-cc-t{font-size:15px;font-weight:800;color:#f2ecd9} .v3-modal .v3-cc-d{font-size:12.5px;line-height:1.45;color:#a9a692} [data-theme="light"] .v3-modal .v3-cc{background:rgba(20,26,40,.03);border-color:rgba(168,127,40,.32)} [data-theme="light"] .v3-modal .v3-cc:hover{background:rgba(201,154,59,.12)} [data-theme="light"] .v3-modal .v3-cc-t{color:#20242e} [data-theme="light"] .v3-modal .v3-cc-d{color:#5c6070} [data-theme="light"] .v3-modal .v3-modal-panel{background:#fff;color:#1a2030;border-color:rgba(20,26,40,.12)} [data-theme="light"] .v3-modal .v3-modal-title{background:linear-gradient(135deg,#1a2030,#8a6410);-webkit-background-clip:text;background-clip:text} [data-theme="light"] .v3-modal .v3-modal-close{background:rgba(20,26,40,.05);border-color:rgba(20,26,40,.12);color:#1a2030} [data-theme="light"] .v3-modal .v3-modal-head{border-bottom-color:rgba(20,26,40,.08)} [data-theme="light"] .v3-modal .v3-hint{color:#8a6410;background:rgba(201,154,59,.12);border-color:rgba(201,154,59,.35)} [data-theme="light"] .v3-modal .v3-saved-item{border-color:rgba(20,26,40,.1);background:rgba(20,26,40,.02)} [data-theme="light"] .v3-modal .v3-saved-txt{color:#3c4152} [data-theme="light"] .v3-modal .v3-wn-t{color:#1a2030} [data-theme="light"] .v3-modal .v3-wn-d{color:#6d7382} /* ══════ REDUCED MOTION ══════ */ @media (prefers-reduced-motion: reduce){ #atenHomeV3 .v3-bg,#atenHomeV3 .v3-rays,#atenHomeV3 .v3-splash .v3-glowfield,#atenHomeV3 .v3-splash .v3-loadline::before{animation:none} #atenHomeV3.v3-play .v3-splash{transition:none;animation:none;transform:translateY(-102%)} }