/* Brand tokens (from the platform's brand_tokens.cfm fallback, 2026-09-19 values) */ :root{--bd:#0a2a4a;--bm:#1a5276;--bl:#2980b9;--bp:#3498db;--bpa:#d6eaf8; --bul:#eaf4fb;--bdr:#ccd8e0;--wh:#fff;--g1:#f2f3f4;--g3:#aab7b8; --g5:#5d6d7e;--g7:#2c3e50;--g9:#1c2833;--grn:#27ae60;--ora:#e67e22; --red:#c0392b;--pur:#7d3c98;--teal:#1abc9c; --grn-bg:#d4edda;--grn-tx:#155724;--ora-bg:#fff3cd;--ora-tx:#856404; --red-bg:#f8d7da;--red-tx:#721c24;--pur-bg:#f3e5f5;--pur-tx:#4a148c; --teal-bg:#d1ecf1;--teal-tx:#0c5460;--bl-tx:#0c5460; --fs:'IBM Plex Sans','Segoe UI',sans-serif;--fm:'IBM Plex Mono',monospace;} /* ============================================================ TRILIVY OPERATIONS PORTAL -- presentation layer Sits on top of brand_tokens.cfm. Defines nothing the platform palette already defines; every value here is portal chrome. ============================================================ */ /* ---- per-section accent. Set on ---- */ body[data-accent="home"] {--acc:#0a2a4a;--acc2:#3498db;--accw:#eaf4fb;--acct:#0a2a4a} body[data-accent="servers"] {--acc:#154360;--acc2:#2980b9;--accw:#e8f2fa;--acct:#154360} body[data-accent="access"] {--acc:#4a235a;--acc2:#8e44ad;--accw:#f4ecf7;--acct:#4a235a} body[data-accent="llm"] {--acc:#0b5345;--acc2:#16a085;--accw:#e3f5f1;--acct:#0b5345} body[data-accent="emails"] {--acc:#7e4b00;--acc2:#e67e22;--accw:#fdf1e3;--acct:#7e4b00} body[data-accent="git"] {--acc:#212f3d;--acc2:#5d6d7e;--accw:#eef1f4;--acct:#212f3d} body[data-accent="tips"] {--acc:#0b4f63;--acc2:#17a2b8;--accw:#e4f4f8;--acct:#0b4f63} body[data-accent="launch"] {--acc:#78281f;--acc2:#e74c3c;--accw:#fdeceb;--acct:#78281f} body[data-accent="peperly"] {--acc:#145a32;--acc2:#27ae60;--accw:#e8f6ed;--acct:#145a32} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;font-family:var(--fs);color:var(--g7);line-height:1.62;font-size:15px; background: radial-gradient(1100px 520px at 88% -8%, var(--accw) 0%, rgba(255,255,255,0) 62%), linear-gradient(180deg,#fafbfc 0%, var(--g1) 100%); background-attachment:fixed; } .wrap{max-width:1180px;margin:0 auto;padding:0 24px 72px} /* ---------------- hero ---------------- */ .hero{ position:relative;overflow:hidden;color:#fff;margin-bottom:30px; background:linear-gradient(120deg,var(--acc) 0%, var(--acc2) 100%); } .hero::after{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(520px 300px at 92% 12%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 70%), repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 2px, rgba(255,255,255,0) 2px 11px); } .hero-in{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:30px 24px 32px} .crumb{ font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:600; opacity:.82;margin-bottom:12px;display:flex;align-items:center;gap:9px;flex-wrap:wrap } .crumb a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)} .crumb a:hover{border-bottom-color:#fff} .crumb i{opacity:.55;font-size:9px} .hero h1{ margin:0;font-size:31px;line-height:1.18;font-weight:600;letter-spacing:-.015em; display:flex;align-items:center;gap:15px } .hero h1 .hicon{ flex:0 0 auto;width:52px;height:52px;border-radius:14px;display:grid;place-items:center; background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);font-size:22px; box-shadow:inset 0 1px 0 rgba(255,255,255,.25) } .hero .kicker{margin:12px 0 0 67px;font-size:15px;opacity:.9;font-weight:300;max-width:74ch} @media(max-width:640px){.hero .kicker{margin-left:0}.hero h1{font-size:24px}} .hero-tools{ position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 24px 20px; display:flex;gap:10px;flex-wrap:wrap } .tool{ appearance:none;cursor:pointer;font-family:var(--fs);font-size:12.5px;font-weight:500; color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3); padding:7px 14px;border-radius:999px;transition:background .15s, transform .15s; display:inline-flex;align-items:center;gap:7px;text-decoration:none } .tool:hover{background:rgba(255,255,255,.26);transform:translateY(-1px)} /* ---------------- section headings ---------------- */ h2.sec{ margin:42px 0 16px;font-size:13px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--acct); display:flex;align-items:center;gap:12px } h2.sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--bdr),transparent)} h2.sec i{font-size:14px;opacity:.75} h3.sub{margin:26px 0 10px;font-size:17px;font-weight:600;color:var(--g9)} p.lede{font-size:16px;color:var(--g5);max-width:80ch;margin:0 0 22px} /* ---------------- cards ---------------- */ .grid{display:grid;gap:18px} .g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))} .card{ background:var(--wh);border:1px solid var(--bdr);border-radius:13px;padding:22px; box-shadow:0 1px 2px rgba(16,42,67,.05), 0 8px 24px -14px rgba(16,42,67,.22); position:relative;transition:box-shadow .18s, transform .18s } .card:hover{box-shadow:0 1px 2px rgba(16,42,67,.06), 0 18px 40px -18px rgba(16,42,67,.34)} .card.flush{padding:0;overflow:hidden} .card-h{display:flex;align-items:flex-start;gap:13px;margin-bottom:6px} .card-h .ci{ flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:grid;place-items:center; background:var(--accw);color:var(--acct);font-size:17px;border:1px solid var(--bdr) } .card-h h4{margin:0;font-size:16.5px;font-weight:600;color:var(--g9);line-height:1.34} .card-h .csub{margin:2px 0 0;font-size:12.5px;color:var(--g5);font-family:var(--fm)} .card p{margin:8px 0 0;font-size:14px;color:var(--g5)} .card > :last-child{margin-bottom:0} /* a card that is itself a link (section tiles, launch tiles) */ a.card{display:block;text-decoration:none;color:inherit} a.card::after{ content:"\f061";font-family:"Font Awesome 6 Free";font-weight:900;font-size:12px; position:absolute;right:20px;bottom:18px;color:var(--acc2);opacity:0;transform:translateX(-6px); transition:opacity .18s, transform .18s } a.card:hover::after{opacity:1;transform:translateX(0)} a.card:hover{transform:translateY(-2px)} /* accent stripe on the left of a card */ .card.stripe{padding-left:25px} .card.stripe::before{ content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0; background:linear-gradient(180deg,var(--acc),var(--acc2)) } /* ---------------- stat tiles ---------------- */ .stat{ background:var(--wh);border:1px solid var(--bdr);border-radius:12px;padding:16px 18px; box-shadow:0 1px 2px rgba(16,42,67,.05) } .stat .sv{font-size:26px;font-weight:600;color:var(--acct);line-height:1.1;font-family:var(--fm)} .stat .sl{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--g5);margin-top:5px;font-weight:600} .stat .sn{font-size:12.5px;color:var(--g5);margin-top:6px} /* ---------------- credential table ---------------- */ .cred{width:100%;border-collapse:separate;border-spacing:0;margin:14px 0 0;font-size:14px} .cred caption{ caption-side:top;text-align:left;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase; font-weight:600;color:var(--g5);padding:0 0 9px } .cred th,.cred td{padding:10px 13px;text-align:left;vertical-align:top;border-bottom:1px solid var(--g1)} .cred tr:last-child th,.cred tr:last-child td{border-bottom:0} .cred th{ width:210px;font-weight:500;color:var(--g5);font-size:13px;white-space:nowrap; background:linear-gradient(90deg,var(--accw),rgba(255,255,255,0)) } .cred td{font-family:var(--fm);font-size:13.2px;color:var(--g9);word-break:break-word} .cred td a{color:var(--bl);text-decoration:none;border-bottom:1px solid var(--bpa)} .cred td a:hover{border-bottom-color:var(--bl)} .cred tr:hover th{background:linear-gradient(90deg,var(--bpa),rgba(255,255,255,0))} /* value chrome: reveal + copy, injected by the script below */ .vwrap{display:inline-flex;align-items:center;gap:7px;max-width:100%} .secret{ font-family:var(--fm);background:var(--g1);border:1px solid var(--bdr);border-radius:6px; padding:2px 9px;display:inline-block;word-break:break-all;color:var(--g9) } /* hidden = genuinely empty, not a row of filler glyphs. min-width keeps the box visible so the field still reads as "a value lives here". */ .secret.hidden{min-width:96px;min-height:1.35em;user-select:none;background:var(--g1)} .mini{ appearance:none;cursor:pointer;border:1px solid var(--bdr);background:var(--wh);color:var(--g5); width:26px;height:26px;border-radius:7px;display:inline-grid;place-items:center;font-size:11px; flex:0 0 auto;transition:all .14s;padding:0 } .mini:hover{background:var(--acc2);border-color:var(--acc2);color:#fff} .mini.done{background:var(--grn);border-color:var(--grn);color:#fff} /* ---------------- badges ---------------- */ .badge{ display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; padding:3px 9px;border-radius:999px;border:1px solid;vertical-align:middle;white-space:nowrap; font-family:var(--fs) } .b-ok {background:var(--grn-bg);color:var(--grn-tx);border-color:#b7dfc3} .b-info {background:var(--bul); color:var(--bl-tx); border-color:var(--bpa)} .b-warn {background:var(--ora-bg);color:var(--ora-tx);border-color:#f0dca6} .b-danger{background:var(--red-bg);color:var(--red-tx);border-color:#eeb9bd} .b-pur {background:var(--pur-bg);color:var(--pur-tx);border-color:#e0c8e8} .b-tbc{ background:repeating-linear-gradient(135deg,#fff3cd 0 7px,#ffe9ae 7px 14px); color:#7a5600;border-color:#e6c979 } /* ---------------- callouts ---------------- */ .note{ border-radius:11px;padding:15px 18px;margin:18px 0;font-size:14px;line-height:1.62; border:1px solid;border-left-width:4px } .note :first-child{margin-top:0} .note :last-child{margin-bottom:0} .note strong{font-weight:600} .n-info {background:var(--bul); border-color:var(--bpa); border-left-color:var(--bp); color:var(--bl-tx)} .n-ok {background:var(--grn-bg);border-color:#b7dfc3; border-left-color:var(--grn); color:var(--grn-tx)} .n-warn {background:var(--ora-bg);border-color:#f0dca6; border-left-color:var(--ora); color:var(--ora-tx)} .n-danger{background:var(--red-bg);border-color:#eeb9bd; border-left-color:var(--red); color:var(--red-tx)} .note code{background:rgba(255,255,255,.72)} /* ---------------- code ---------------- */ code{ font-family:var(--fm);font-size:.9em;background:var(--g1);border:1px solid var(--bdr); border-radius:5px;padding:1px 6px } pre.code{ background:#0f2233;color:#dde8f2;border-radius:11px;padding:16px 18px;overflow-x:auto; font-family:var(--fm);font-size:12.8px;line-height:1.66;margin:14px 0; border:1px solid #0a1a28;box-shadow:inset 0 1px 0 rgba(255,255,255,.05) } pre.code code{background:none;border:0;padding:0;font-size:inherit;color:inherit} pre.code .c{color:#7f9bb3} /* comment */ pre.code .k{color:#7fd1b9} /* keyword */ pre.code .s{color:#f0c987} /* string */ /* ---------------- lists ---------------- */ ul.tick,ul.plain{list-style:none;padding:0;margin:12px 0} ul.tick li,ul.plain li{position:relative;padding-left:26px;margin:9px 0;font-size:14px} ul.tick li::before{ content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;font-size:10px; position:absolute;left:0;top:4px;color:var(--grn) } ul.plain li::before{ content:"";position:absolute;left:7px;top:10px;width:5px;height:5px;border-radius:50%; background:var(--acc2) } ol.steps{counter-reset:s;list-style:none;padding:0;margin:16px 0} ol.steps > li{ counter-increment:s;position:relative;padding:0 0 0 44px;margin:0 0 20px;font-size:14.5px } ol.steps > li::before{ content:counter(s);position:absolute;left:0;top:-2px;width:29px;height:29px;border-radius:9px; display:grid;place-items:center;font-family:var(--fm);font-size:13px;font-weight:600; color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc2)) } ol.steps > li > strong{display:block;color:var(--g9);font-size:15px;margin-bottom:3px} /* ---------------- misc ---------------- */ hr.rule{border:0;border-top:1px solid var(--bdr);margin:34px 0} .foot{ margin-top:48px;padding-top:18px;border-top:1px solid var(--bdr); font-size:12.5px;color:var(--g3);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap } .foot a{color:var(--g5);text-decoration:none} .foot a:hover{color:var(--acc2)} .tagrow{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 0} a.plink{color:var(--bl);text-decoration:none;border-bottom:1px solid var(--bpa);font-weight:500} a.plink:hover{border-bottom-color:var(--bl)} /* Printing never reveals a secret: a hidden value is empty in the DOM, so there is nothing to bleed onto paper. */ @media print{.hero-tools,.mini{display:none}} /* ============================================================ mng_portal additions (2026-09-28): sidebar layout, sign-in, forms. Everything above is the Windows portal's _head.cfm CSS, copied verbatim. ============================================================ */ body{margin:0} .layout{display:flex;min-height:100vh} .side{ flex:0 0 272px;background:#0d2238;color:#cfdbe7;position:sticky;top:0;height:100vh; overflow-y:auto;display:flex;flex-direction:column;border-right:1px solid #0a1a28 } .side .brand{ display:flex;align-items:center;gap:10px;padding:20px 20px 16px;color:#fff;text-decoration:none; font-weight:600;letter-spacing:.02em;border-bottom:1px solid rgba(255,255,255,.08) } .side .brand i{font-size:18px;color:#5dade2} .side nav{flex:1;padding:10px 0} .nav-sec summary{ list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px; padding:9px 20px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:#9fb6cb;user-select:none } .nav-sec summary::-webkit-details-marker{display:none} .nav-sec summary:hover{color:#fff;background:rgba(255,255,255,.04)} .nav-sec summary i{width:16px;text-align:center;opacity:.8} .nav-sec[open] summary{color:#fff} .nav-sec ul{list-style:none;margin:0 0 6px;padding:0} .nav-sec li a{ display:flex;align-items:center;gap:10px;padding:7px 20px 7px 47px;font-size:13.5px; color:#cfdbe7;text-decoration:none;border-left:3px solid transparent } .nav-sec li a i{width:14px;text-align:center;font-size:12px;opacity:.7} .nav-sec li a:hover{background:rgba(255,255,255,.05);color:#fff} .nav-sec li a.cur{background:rgba(93,173,226,.14);color:#fff;border-left-color:#5dade2} .side-foot{border-top:1px solid rgba(255,255,255,.08);padding:14px 20px;font-size:12.5px} .side-foot .me{color:#fff;margin-bottom:8px;word-break:break-all} .side-foot a{display:block;color:#9fb6cb;text-decoration:none;padding:4px 0} .side-foot a:hover{color:#fff} .side-foot i{width:16px;opacity:.8} .main{flex:1;min-width:0} .navtoggle{ display:none;appearance:none;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12); color:#fff;border-radius:7px;padding:4px 8px;cursor:pointer } @media(max-width:900px){ .side{position:fixed;left:0;z-index:20;transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 40px rgba(0,0,0,.4)} body.nav-open .side{transform:none} .navtoggle{display:inline-block} } /* sign-in */ .login-body{display:grid;place-items:center;min-height:100vh;padding:16px} .login{width:100%;max-width:410px} .login-card{ background:var(--wh);border:1px solid var(--bdr);border-radius:16px;padding:30px; box-shadow:0 1px 2px rgba(16,42,67,.05), 0 24px 60px -24px rgba(16,42,67,.35) } .login-head{display:flex;align-items:center;gap:14px;margin-bottom:22px} .login-head .hicon{ width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:20px;color:#fff; background:linear-gradient(120deg,var(--acc),var(--acc2)) } .login-head h1{margin:0;font-size:21px;color:var(--g9)} .login-head p{margin:2px 0 0;font-size:13px;color:var(--g5)} .login form label,.pwform label{display:block;font-size:13px;font-weight:500;color:var(--g5);margin:0 0 14px} .login input,.pwform input{ display:block;width:100%;margin-top:6px;padding:10px 12px;font:inherit;font-size:15px;color:var(--g9); border:1px solid var(--bdr);border-radius:9px;background:#fff } .login input:focus,.pwform input:focus{outline:2px solid var(--bp);outline-offset:0;border-color:var(--bp)} .login button[type=submit],.pwform .btn{ appearance:none;cursor:pointer;width:100%;padding:11px;border:0;border-radius:9px;font:inherit;font-weight:600; color:#fff;background:linear-gradient(120deg,var(--acc),var(--acc2));margin-top:6px } .pwform .btn{width:auto;padding:10px 18px} .pwwrap{position:relative;display:block;margin-top:6px} .pwwrap input{margin-top:0;padding-right:44px} .login .pweye,.pwform .pweye,.pweye{ position:absolute;right:6px;top:50%;transform:translateY(-50%);appearance:none;border:0;background:none; cursor:pointer;color:var(--g5);font-size:15px;padding:6px 8px;border-radius:7px;width:auto;margin:0 } .pweye:hover{color:var(--acc2);background:var(--g1)} .msg{border-radius:9px;padding:10px 13px;font-size:13.5px;margin-bottom:16px;border:1px solid} .msg.err{background:var(--red-bg);color:var(--red-tx);border-color:#eeb9bd} .msg.ok{background:var(--grn-bg);color:var(--grn-tx);border-color:#b7dfc3}