/* ============================================================================ sb-exec-experience.css — SignalBoard Executive Experience (Keynote Edition) A cohesive design system: dark, premium, spacious. One accent per screen, motion that guides the eye, real a11y, responsive to laptop/tablet. Scoped under .sbx-shell / body.sbx-shell-on / .sbx-unveil. ========================================================================== */ /* ---- Retire the legacy view: hidden from FIRST PAINT. This stylesheet loads in , before the body renders, so the old dashboard NEVER flashes. Revealed only for the signed-out sign-in prompt, or by the 10s failsafe (dashboard.html) if the executive experience fails to initialize. --- */ /* The legacy dashboard view is retired from the startup path ENTIRELY — hidden unconditionally and NEVER revealed. The single startup experience is #sbxBoot (the boot/sign-in overlay) handing off to the executive shell. */ .cover-top, .cover-center{ display:none !important; } /* ---- The one and only startup experience: boot / sign-in overlay ---- */ .sbx-boot{ position:fixed; inset:0; z-index:180; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 42%, rgba(18,96,190,.16), transparent 46%), linear-gradient(180deg,#050b18 0%,#02040a 100%); transition:opacity .6s ease; } .sbx-boot.sbx-boot-gone{ opacity:0; pointer-events:none; } .sbx-boot-halo{ position:absolute; width:min(46vh,520px); height:min(46vh,520px); border-radius:50%; background:radial-gradient(circle, rgba(58,146,255,.32), rgba(58,146,255,0) 62%); filter:blur(26px); animation:sbxBootHalo 6s ease-in-out infinite; } @keyframes sbxBootHalo{ 0%,100%{ transform:scale(.96); opacity:.72; } 50%{ transform:scale(1.05); opacity:1; } } .sbx-boot-inner{ position:relative; text-align:center; width:min(560px,92vw); padding:24px; } .sbx-boot-logo{ width:clamp(120px,17vh,176px); height:auto; filter:drop-shadow(0 0 26px rgba(56,146,255,.4)) drop-shadow(0 14px 30px rgba(0,0,0,.6)); } /* Boot overlay uses the same brand-native scan animation as the reveal (not a static logo). */ .sbx-boot-scan{ position:relative; width:clamp(120px,17vh,170px); aspect-ratio:1; margin:0 auto; } .sbx-boot-scan .sbx-octa,.sbx-boot-scan .sbx-ring{ stroke:url(#sbxBootG); } .sbx-boot-scan .sbx-core{ fill:url(#sbxBootG); } .sbx-boot-brand{ margin-top:16px; font-size:26px; font-weight:800; letter-spacing:-.02em; color:#EAF0FA; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } .sbx-boot-brand span{ color:#4C8DFF; } .sbx-boot-sub{ margin-top:12px; font-size:15px; color:#A6B6D6; } .sbx-boot-dots i{ font-style:normal; opacity:0; animation:sbxDot 1.4s steps(1,end) infinite; } .sbx-boot-dots i:nth-child(2){ animation-delay:.25s; } .sbx-boot-dots i:nth-child(3){ animation-delay:.5s; } .sbx-boot-signin{ display:none; margin-top:22px; } .sbx-boot.signin .sbx-boot-sub{ display:none; } .sbx-boot.signin .sbx-boot-signin{ display:block; } /* Not-licensed terminal state (signed in, tenant has no subscription) */ .sbx-boot-notlicensed{ display:none; margin-top:22px; max-width:480px; } .sbx-boot.notlicensed .sbx-boot-sub{ display:none; } .sbx-boot.notlicensed .sbx-boot-signin{ display:none; } .sbx-boot.notlicensed .sbx-boot-notlicensed{ display:block; } .sbx-nl-title{ font-size:18px; font-weight:800; color:#EAF0FA; margin-bottom:10px; } .sbx-nl-sub{ font-size:14px; color:#A6B6D6; line-height:1.6; margin-bottom:20px; } .sbx-nl-actions{ display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; } .sbx-boot-notlicensed .sbx-boot-btn{ text-decoration:none; } .sbx-nl-alt{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16); color:#DCE7FF; font:inherit; font-size:var(--font-helper,15px); font-weight:700; border-radius:11px; padding:12px 16px; cursor:pointer; transition:border-color .15s,color .15s; } .sbx-nl-alt:hover{ border-color:rgba(76,141,255,.5); color:#fff; } .sbx-boot-signin-lead{ font-size:15px; color:#A6B6D6; margin-bottom:16px; } .sbx-boot-btn{ display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:800; color:#fff; border:0; border-radius:12px; padding:14px 26px; cursor:pointer; background:linear-gradient(100deg,#4C8DFF,#3A7BF0); box-shadow:0 10px 30px rgba(76,141,255,.45); transition:transform .16s; } .sbx-boot-btn:hover{ transform:translateY(-2px); } /* (v2.89.2) Sign-in busy state. MSAL's popup can take several seconds to surface — without this the boot gate looked locked and users clicked the button repeatedly, spawning competing popups. Busy = disabled + spinner + narrated status; a pop-up hint appears only if Microsoft is slow (3.5s). */ .sbx-boot-btn.is-busy{ cursor:progress; opacity:.9; transform:none; box-shadow:0 6px 20px rgba(76,141,255,.28); } .sbx-boot-btn.is-busy:hover{ transform:none; } .sbx-boot-btn.is-busy::before{ content:''; width:15px; height:15px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:sbxBootSpin .7s linear infinite; } @keyframes sbxBootSpin{ to{ transform:rotate(360deg); } } .sbx-boot-status{ min-height:18px; margin-top:14px; font-size:var(--dgf-metric-label,15px); font-weight:600; color:#8FD3FF; letter-spacing:.01em; } .sbx-boot-status[data-kind="err"]{ color:#F1594E; } .sbx-boot-status[data-kind="ok"]{ color:#2FBF71; } .sbx-boot-hint{ max-width:420px; margin:8px auto 0; font-size:var(--dgf-eyebrow,14px); line-height:1.55; color:#79899F; opacity:0; visibility:hidden; transition:opacity .35s ease; } .sbx-boot-hint.show{ opacity:1; visibility:visible; } @media (prefers-reduced-motion:reduce){ .sbx-boot-btn.is-busy::before{ animation:none; } } .sbx-boot-refresh{ display:none; margin:22px auto 0; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16); color:#DCE7FF; font-weight:700; font-size:var(--font-helper,15px); border-radius:10px; padding:9px 18px; cursor:pointer; } .sbx-boot.recover .sbx-boot-refresh{ display:block; } /* The dashboard forms BEHIND the unveil: blurred + dimmed, then pulls into focus. */ #sbxShell{ transition:filter 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1), opacity 1.1s ease; } /* NOTHING BEHIND THE SCAN MAY BE READ. (2026-07-14) The shell was blurred and dimmed but still LIT (brightness .5, opacity .9) under a scrim that was only 42–72% opaque. So the domain cards underneath — which during a scan say "No data" and "No data was returned for this domain on the last scan" — ghosted through, legibly, behind the words "Assembling your Executive Briefing". The product was contradicting itself mid-sentence: telling an executive we are reading everything while the last run's emptiness showed through the letters. Blur is depth. Blur is not concealment. Keep the depth; take the legibility away. */ body.sbx-unveiling #sbxShell{ filter:blur(30px) brightness(.22) saturate(.55); transform:scale(1.045); opacity:.42; pointer-events:none; } .sbx-shell{ /* palette */ --red:#F1594E; --amber:#F0A93B; --green:#2FBF71; --blue:#4C8DFF; --blue2:#8FD3FF; --purple:#8E7DE3; --ink:#ECF1FB; --muted:#A6B6D6; --muted2:#79899F; --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.055); --bg0:#070C18; --bg1:#0A1020; --card:#111d38; --card2:#0E1830; /* Domain Governance / executive type scale — SINGLE CONTROLLING SOURCE. Every dg-* / domain class points font-size at one of these tokens, so the readable scale is set in ONE place (no per-class literals, no !important). Values = the desktop GTCI recommended scale (not the bare floor). */ --dgf-metric-val:28px; /* big metric numbers */ --dgf-card-h:20px; /* card / panel heading */ --dgf-row-name:17px; /* domain row name */ --dgf-body:17px; /* primary body / risk lines */ --dgf-body2:16px; /* secondary body / values / subheads */ --dgf-status:15px; /* row status text */ --dgf-meta:15px; /* metadata / posture labels */ --dgf-metric-label:15px; /* stat labels under big numbers */ --dgf-helper:15px; /* helper / caption text */ --dgf-btn:16px; /* buttons + inputs */ --dgf-eyebrow:14px; /* uppercase overlines */ /* rhythm */ --gap:20px; --radius:16px; --radius-sm:12px; --pill:999px; --ease:cubic-bezier(.22,.61,.36,1); --ease-pop:cubic-bezier(.2,.8,.2,1.05); position:relative; min-height:100vh; color:var(--ink); background:radial-gradient(1200px 640px at 68% -8%, #16264d 0%, var(--bg1) 58%, var(--bg0) 100%); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; } .sbx-shell *{ box-sizing:border-box; } .sbx-shell h2,.sbx-shell h3,.sbx-shell h4{ margin:0; letter-spacing:-.02em; } .sbx-shell button{ font-family:inherit; } .sbx-shell .mut{ color:var(--muted2); } .sbx-eyebrow{ font-size:var(--font-helper,15px); font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--blue2); } .sbx-h2{ font-size:28px; margin-top:8px; letter-spacing:-.025em; } /* focus — keyboard only */ .sbx-shell :focus-visible,.sbx-unveil :focus-visible{ outline:2px solid var(--blue2); outline-offset:3px; border-radius:8px; } .sbx-shell :focus:not(:focus-visible){ outline:none; } /* ============================ TOPBAR ============================ */ .sbx-topbar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:16px; padding:12px 28px; background:rgba(9,15,28,.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } /* THE SIZE IS ENFORCED, NOT REQUESTED. (2026-07-14) * * Johnnie: "DO NOT MAKE the area bigger. ENFORCE THE SIZE. THIS IS A MUST." * * So the badge is PINNED at 42px — the height it already was (28px logo + 12px * padding + 2px border) — with box-sizing:border-box and overflow:hidden. The * text column is pinned to 28px, the logo's exact height. The wordmark and the * meta line share that 28px between them. * * This is a hard constraint, not a hope. If someone later bumps a font size, the * badge does NOT grow — the type gets clipped, which is visible immediately and * gets fixed. A layout that silently expands is one nobody notices until it has * pushed something else off the screen. */ .sbx-idbadge{ display:inline-flex; align-items:center; gap:11px; padding:6px 13px 6px 7px; border-radius:var(--pill); background:linear-gradient(100deg,rgba(76,141,255,.10),rgba(142,125,227,.07)); border:1px solid rgba(76,141,255,.28); box-shadow:0 2px 14px rgba(76,141,255,.14); flex:none; height:42px; box-sizing:border-box; overflow:hidden; } /* The wordmark + its build meta, stacked. Total height = 28px = the logo. */ .sbx-brandcol{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; height:28px; gap:1px; min-width:0; } .sbx-meta{ display:flex; align-items:center; gap:6px; line-height:1; } .mk{ width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--blue),var(--purple));display:grid;place-items:center;color:#fff;font-weight:900;font-size:15px;box-shadow:0 4px 16px rgba(76,141,255,.4); } /* Actual SignalBoard brand mark (navy radar icon) in place of the "S" placeholder */ .mk-logo{ background:none; object-fit:cover; box-shadow:0 4px 16px rgba(76,141,255,.32); } .sbx-seg{ font-weight:800; font-size:var(--dgf-metric-label,15px); } .sbx-seg.name{ color:var(--ink); text-transform:uppercase; letter-spacing:.15em; font-size:var(--dgf-eyebrow,14px); line-height:14px; white-space:nowrap; } .sbx-seg-div{ color:var(--line); font-weight:400; } /* Shrunk to fit the 13px left under the wordmark. Johnnie: "You can shrink the font of dev and version smaller." This is the budget it has to live in. */ .sbx-seg.env{ font-size:var(--font-eyebrow,14px); font-weight:800; letter-spacing:.09em; text-transform:uppercase; padding:1px 5px; border-radius:var(--pill); line-height:11px; } .sbx-seg.env.dev{ color:var(--amber); background:rgba(240,169,59,.14); border:1px solid rgba(240,169,59,.4); } .sbx-seg.env.production{ color:var(--green); background:rgba(47,191,113,.14); border:1px solid rgba(47,191,113,.4); } .sbx-seg.env.local{ color:var(--blue2); background:rgba(76,141,255,.14); border:1px solid rgba(76,141,255,.4); } .sbx-seg.ver{ color:var(--muted2); font-weight:700; font-size:var(--font-eyebrow,14px); line-height:11px; font-variant-numeric:tabular-nums; letter-spacing:.02em; } /* capability badges */ .sbx-caps{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; } .sbx-cap2{ font-size:var(--font-eyebrow,14px); font-weight:800; letter-spacing:.11em; text-transform:uppercase; padding:4px 11px; border-radius:var(--pill); white-space:nowrap; cursor:default; transition:.16s; } .sbx-cap2.on{ color:#DCE7FF; background:linear-gradient(100deg,rgba(76,141,255,.22),rgba(142,125,227,.16)); border:1px solid rgba(76,141,255,.5); } .sbx-cap2.on:hover{ border-color:rgba(143,211,255,.7); } .sbx-cap2.off{ color:var(--muted2); background:transparent; border:1px dashed var(--line); opacity:.72; } .sbx-cap2.off:hover{ opacity:1; color:var(--muted); border-color:rgba(76,141,255,.4); } /* right cluster — never allowed to shrink or clip; the middle rail yields first */ .sbx-top-right{ margin-left:auto; display:flex; align-items:center; gap:12px; flex:0 0 auto; } .sbx-idbadge{ min-width:0; } /* The 5-step rail duplicates the numbered tabs directly below it. Hide it as soon as the header gets tight so the brand + score + version + logo on the right never clip (2026-07-09). */ @media (max-width:1560px){ .sbx-topbar .sbx-rail{ display:none; } } .sbx-context{ font-size:var(--dgf-eyebrow,14px); font-weight:700; color:var(--muted2); white-space:nowrap; } .sbx-uicon{ display:inline-flex; align-items:center; gap:7px; font-size:var(--dgf-eyebrow,14px); font-weight:800; color:#C6D6FF; background:rgba(76,141,255,.12); border:1px solid rgba(76,141,255,.4); border-radius:var(--pill); padding:8px 14px; cursor:pointer; transition:.16s; } .sbx-uicon:hover{ background:rgba(76,141,255,.22); transform:translateY(-1px); } .sbx-scorechip{ display:flex; align-items:center; gap:9px; font-weight:800; } /* Letter-only: no trailing text to pad for. The chip IS the score. */ .sbx-scorechip:not(:has(.n)){ gap:0; } .sbx-scorechip .chip{ width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-weight:900;font-size:16px; } .sbx-scorechip .chip.red{ background:rgba(241,89,78,.16); color:var(--red); border:1px solid rgba(241,89,78,.5);} .sbx-scorechip .chip.amber{ background:rgba(240,169,59,.16); color:var(--amber); border:1px solid rgba(240,169,59,.5);} .sbx-scorechip .chip.green{ background:rgba(47,191,113,.16); color:var(--green); border:1px solid rgba(47,191,113,.5);} .sbx-scorechip .n small{ color:var(--muted2); } .sbx-vp{ height:30px; width:auto; opacity:.92; } .sbx-hambwrap{ position:relative; } .sbx-hamb{ width:40px;height:36px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.03);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; } .sbx-hamb span{ width:18px;height:2px;background:var(--ink);border-radius:2px; } .sbx-hmenu{ position:absolute; top:calc(100% + 8px); right:0; min-width:200px; background:var(--card2); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:0 18px 46px rgba(0,0,0,.55); padding:6px; display:none; z-index:60; } .sbx-hmenu.open{ display:block; animation:sbxRise .18s var(--ease); } .sbx-hmi{ display:block; width:100%; text-align:left; background:none; border:0; color:var(--ink); font-weight:700; font-size:var(--dgf-metric-label,15px); padding:10px 12px; border-radius:8px; cursor:pointer; white-space:nowrap; } .sbx-hmi:hover{ background:rgba(76,141,255,.14); } /* ---- progress rail (the 5-step briefing) ---- */ .sbx-rail{ display:flex; align-items:center; gap:0; margin:0 6px; } .sbx-rail-step{ position:relative; display:flex; align-items:center; gap:8px; background:none; border:0; cursor:pointer; padding:2px 0; color:var(--muted2); } .sbx-rail-step .dot{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.12); border:2px solid transparent; transition:.2s; flex:none; } .sbx-rail-step .lbl{ font-size:var(--dgf-eyebrow,14px); font-weight:800; letter-spacing:.04em; white-space:nowrap; } .sbx-rail-step .line{ width:26px; height:2px; background:rgba(255,255,255,.12); margin:0 10px; } .sbx-rail-step.done .dot{ background:var(--green); } .sbx-rail-step.done .line{ background:rgba(47,191,113,.5); } .sbx-rail-step.active .dot{ background:var(--blue); border-color:rgba(143,211,255,.6); box-shadow:0 0 0 4px rgba(76,141,255,.18); } .sbx-rail-step.active .lbl{ color:#fff; } .sbx-rail-step:hover .lbl{ color:#fff; } /* ============================ TABS ============================ */ .sbx-tabs{ position:sticky; top:60px; z-index:25; display:flex; flex-direction:column; align-items:stretch; gap:9px; padding:12px 28px 14px; background:rgba(9,15,28,.72); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .sbx-trow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; } /* Executive top row is ONE continuous band — never wraps Q&I / toggle to a second shelf. They share the same baseline as the numbered tabs. */ .sbx-trow-exec{ flex-wrap:nowrap; } @media (max-width:1180px){ .sbx-trow-exec{ flex-wrap:wrap; } } /* Lower governance tier — hidden until "Show Governance Modules" is toggled. */ .sbx-trow-gov{ display:none; margin-top:2px; padding:5px 0 3px; border-top:1px dashed rgba(120,140,175,.22); } .sbx-tabs.gov-open .sbx-trow-gov{ display:flex; } .sbx-trow-gov .sbx-t{ color:var(--muted); } .sbx-trow-gov .sbx-t:hover{ color:#fff; } .sbx-trow-gov .sbx-t.active{ color:#fff; } /* Insights sits right-justified at the far end of the governance (second) row. */ .sbx-trow-gov .sbx-gov-right{ margin-left:auto; display:inline-flex; align-items:center; padding-left:14px; } /* Right cluster — Questions & Insights + the toggle, pinned right as one composed group so the band reads as a single continuous control strip with no weak middle gap. */ .sbx-exec-right{ margin-left:auto; display:inline-flex; align-items:center; gap:10px; padding-left:14px; } .sbx-exec-right::before{ content:""; align-self:center; width:1px; height:18px; background:var(--line); margin-right:4px; } /* Governance toggle — meaningful, subtle, never a settings control. */ .sbx-govtoggle{ align-self:center; display:inline-flex; align-items:center; gap:7px; background:rgba(120,140,175,.08); border:1px solid rgba(120,140,175,.24); color:#AEBCCE; font-weight:800; font-size:var(--font-eyebrow,14px); letter-spacing:.02em; padding:6px 13px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:background .15s,border-color .15s,color .15s; } .sbx-govtoggle:hover{ background:rgba(76,141,255,.12); border-color:rgba(76,141,255,.42); color:#EAF0FA; } .sbx-govtoggle-chev{ font-size:var(--font-eyebrow,14px); opacity:.85; transition:transform .2s; } /* Octagon variant — icon-only, eight-segment ring + right-tucked chevron. */ .sbx-govtoggle-oct{ gap:0; padding:3px; border-radius:10px; color:#8FA4C2; } .sbx-govtoggle-oct:hover{ color:#EAF0FA; } .sbx-tabs.gov-open .sbx-govtoggle-oct{ color:#EAF0FA; } .sbx-govoct{ display:block; } .sbx-govoct-chev{ transform-box:fill-box; transform-origin:center; transition:transform .2s; } .sbx-tabs.gov-open .sbx-govtoggle{ background:rgba(76,141,255,.14); border-color:rgba(76,141,255,.46); color:#EAF0FA; } .sbx-tabs.gov-open .sbx-govtoggle-chev{ transform:rotate(180deg); } .sbx-tabs.gov-open .sbx-govoct-chev{ transform:rotate(180deg); } .sbx-tgrp{ font-size:var(--font-helper,15px); font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted2); padding:0 10px 0 4px; } .sbx-tdiv{ width:1px; height:18px; background:var(--line); margin:0 8px; } .sbx-tbreak{ flex-basis:100%; width:100%; height:0; } /* Both tab rows use the filled/contained pill (same as the Insurance .ins-tab). The module row (5 items) is roomy; the 10-item journey row uses a slightly more compact pill (below) so all ten fit one line inside the full-width pane. */ .sbx-t{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; background:rgba(18,28,50,.6); border:1px solid rgba(120,150,210,.2); color:#c2d1ea; border-radius:12px; padding:13px 22px; font-weight:700; font-size:16.5px; cursor:pointer; min-height:50px; transition:background .15s, border-color .15s, color .15s; } .sbx-t .n{ color:var(--blue2); font-size:15px; font-weight:900; } .sbx-t:hover{ background:rgba(28,42,72,.7); color:#e8eefb; border-color:rgba(120,160,230,.4); } .sbx-t.active{ background:linear-gradient(180deg,rgba(45,90,190,.32),rgba(30,60,140,.26)); border-color:rgba(91,140,255,.6); color:#fff; box-shadow:0 2px 12px rgba(31,75,216,.22),inset 0 -3px 0 #5b8cff; } .sbx-t.active .n{ color:#cfe0ff; } .sbx-t:focus-visible{ outline:2px solid #7fa8ff; outline-offset:2px; } .sbx-t.locked{ color:var(--muted2); cursor:pointer; opacity:.72; } .sbx-t.locked:hover{ color:#e8eefb; opacity:1; border-color:rgba(120,160,230,.4); } .sbx-t.locked:hover .sbx-lock{ opacity:1; } /* 10-item journey row — slightly tighter pill (still GTCI 16px) so all ten fit one line inside the widened column; verified fit at 1920 and 2180 desktop. */ .sbx-trow-exec .sbx-t{ padding:10px 16px; font-size:16px; min-height:46px; gap:7px; border-radius:11px; } .sbx-trow-exec{ gap:6px; } .sbx-lock{ margin-left:6px; font-size:var(--font-eyebrow,14px); opacity:.85; } /* ============================ PANEL + TRANSITIONS ============================ */ .sbx-panel{ max-width:1900px; margin:0 auto; padding:14px 34px 96px; } /* SHIELD NEEDS THE ROOM (v2.91.5). Two shields side by side is the entire idea — best-practice beside yours, same size, same instant. 1240px forced them to shrink to fit; at 1680 they can breathe and still sit together. Nothing else gets this width: a wide column of prose is harder to read, not easier. */ .sbx-panel.sbx-wide{ max-width:2000px; } @keyframes sbxRise{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} } @keyframes sbxFwd{ from{opacity:0; transform:translateX(26px)} to{opacity:1; transform:none} } @keyframes sbxBack{ from{opacity:0; transform:translateX(-26px)} to{opacity:1; transform:none} } .sbx-panel.sbx-anim-fwd{ animation:sbxFwd .42s var(--ease); } .sbx-panel.sbx-anim-back{ animation:sbxBack .42s var(--ease); } /* New banner format (2026-07-09): label on its own highlighted line, question bold beneath it. Height trimmed ~25% 2026-07-09 (Johnnie). */ .sbx-q{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; margin-bottom:16px; padding:9px 18px 11px; border-radius:12px; background:linear-gradient(100deg,rgba(76,141,255,.16),rgba(142,125,227,.08)); border:1px solid rgba(76,141,255,.32); } .sbx-q-lbl{ display:inline-block; font-size:var(--font-eyebrow,14px); font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:#CFE0FF; background:rgba(76,141,255,.2); border:1px solid rgba(76,141,255,.28); padding:2px 9px; border-radius:5px; } .sbx-q-txt{ font-size:19px; font-weight:900; color:#fff; letter-spacing:-.01em; line-height:1.15; } @media (max-width:640px){ .sbx-q-txt{ font-size:17px; } } /* Chapter nav folded INTO the question band — one row, compact (2026-07-09) */ .sbx-qrow{ display:flex; align-items:stretch; gap:10px; margin-bottom:22px; } .sbx-qrow .sbx-q{ flex:1 1 auto; margin-bottom:0; } .sbx-cn{ display:flex; align-items:center; gap:9px; flex:0 0 auto; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; padding:0 14px; cursor:pointer; white-space:nowrap; transition:.15s; } .sbx-cn:hover{ border-color:rgba(76,141,255,.5); background:rgba(76,141,255,.08); } .sbx-cn .d{ font-size:15px; font-weight:800; color:var(--blue2); } .sbx-cn .t{ display:flex; flex-direction:column; gap:0; line-height:1.15; text-align:left; } .sbx-cn.next .t{ text-align:right; } .sbx-cn .k{ font-size:var(--font-eyebrow,14px); font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--blue2); } .sbx-cn .n{ font-size:var(--font-helper,15px); font-weight:800; color:var(--ink); } .sbx-cn-sp{ display:none; } @media (max-width:900px){ .sbx-qrow{ flex-wrap:wrap; } .sbx-qrow .sbx-q{ flex-basis:100%; order:-1; } .sbx-cn{ flex:1 1 0; } .sbx-cn.next{ justify-content:flex-end; } } .sbx-sowhat{ margin-top:28px; padding:16px 20px; border-radius:14px; background:rgba(240,169,59,.08); border:1px solid rgba(240,169,59,.3); font-size:15px; line-height:1.5; color:#F4E4C6; } .sbx-sowhat b{ text-transform:uppercase; font-size:var(--font-eyebrow,14px); letter-spacing:.1em; color:#F1CE63; margin-right:8px; } .sbx-gapnote{ margin-top:20px; padding:12px 16px; border-radius:12px; background:rgba(142,125,227,.10); border:1px solid rgba(142,125,227,.32); color:#D9D0F7; font-size:var(--font-helper,15px); line-height:1.5; } .sbx-nav{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:26px; } .sbx-nav .pn{ display:flex; flex-direction:column; gap:2px; background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:12px; padding:11px 22px; cursor:pointer; text-align:right; } .sbx-nav .pn.back{ text-align:left; } .sbx-nav .pn:hover{ border-color:rgba(76,141,255,.5); background:rgba(76,141,255,.08); } .sbx-nav .dir{ font-size:var(--font-helper,15px); line-height:1.1; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--blue2); } .sbx-nav .name{ font-size:18.5px; line-height:1.15; font-weight:800; color:var(--ink); } /* Top chapter nav — Back / Next always visible on landing (2026-07-09) */ .sbx-topnav{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 14px; } .sbx-topnav .tn{ display:flex; flex-direction:column; gap:2px; background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:12px; padding:11px 22px; cursor:pointer; text-align:right; transition:.15s; } .sbx-topnav .tn.back{ text-align:left; } .sbx-topnav .tn:hover{ border-color:rgba(76,141,255,.5); background:rgba(76,141,255,.08); } .sbx-topnav .dir{ font-size:var(--font-helper,15px); line-height:1.1; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--blue2); } .sbx-topnav .name{ font-size:18.5px; line-height:1.15; font-weight:800; color:var(--ink); } .sbx-hmi-div{ height:1px; background:var(--line); margin:6px 8px; } /* ============================ CH.1 — THE REVEAL ============================ */ .sbx-reveal{ text-align:center; max-width:900px; margin:6px auto 0; } .sbx-reveal[data-reveal] > *{ opacity:0; animation:sbxRise .6s var(--ease) forwards; } .sbx-reveal[data-reveal] .r0{ animation-delay:.05s } .sbx-reveal[data-reveal] .r1{ animation-delay:.18s } .sbx-reveal[data-reveal] .r2{ animation-delay:.5s } .sbx-reveal[data-reveal] .r3{ animation-delay:.66s } .sbx-reveal[data-reveal] .r4{ animation-delay:.8s } .sbx-reveal[data-reveal] .r5{ animation-delay:.98s } .sbx-reveal[data-reveal] .r6{ animation-delay:1.12s } .sbx-rh-label{ font-size:14px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); } .sbx-rh-score{ display:flex; align-items:center; justify-content:center; gap:30px; margin:22px 0 8px; flex-wrap:wrap; } .sbx-grade{ width:128px;height:128px;border-radius:26px;display:grid;place-items:center;font-size:74px;font-weight:900; animation:sbxPop .7s var(--ease-pop); } @keyframes sbxPop{ from{opacity:0; transform:scale(.72)} to{opacity:1; transform:none} } .sbx-grade.red{ background:rgba(241,89,78,.14); color:var(--red); border:1.5px solid rgba(241,89,78,.55); box-shadow:0 0 70px rgba(241,89,78,.32); } .sbx-grade.amber{ background:rgba(240,169,59,.14); color:var(--amber); border:1.5px solid rgba(240,169,59,.55); box-shadow:0 0 70px rgba(240,169,59,.28); } .sbx-grade.green{ background:rgba(47,191,113,.14); color:var(--green); border:1.5px solid rgba(47,191,113,.55); box-shadow:0 0 70px rgba(47,191,113,.28); } .sbx-num{ font-size:84px; font-weight:900; letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums; } .sbx-num small{ font-size:30px; color:var(--muted2); font-weight:800; } .sbx-verdict{ font-size:25px; font-weight:800; margin-top:12px; letter-spacing:-.02em; } .sbx-sub{ color:var(--muted); font-size:16px; margin-top:12px; max-width:660px; margin-left:auto; margin-right:auto; line-height:1.5; } .sbx-concern{ font-size:var(--font-helper,15px); color:var(--muted2); margin-top:18px; } .sbx-askai{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:var(--font-helper,15px); font-weight:800; color:#C6D6FF; background:rgba(76,141,255,.1); border:1px solid rgba(76,141,255,.35); border-radius:var(--pill); padding:10px 18px; cursor:pointer; } .sbx-askai:hover{ background:rgba(76,141,255,.2); } .sbx-cta-wrap{ margin-top:26px; } .sbx-cta{ display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:800; color:#fff; border:0; border-radius:14px; padding:16px 30px; cursor:pointer; background:linear-gradient(100deg,var(--blue),#3A7BF0); box-shadow:0 10px 34px rgba(76,141,255,.45); transition:transform .16s; } .sbx-cta:hover{ transform:translateY(-2px); } .sbx-cta.glow{ animation:sbxGlow 2.6s ease-in-out infinite; } @keyframes sbxGlow{ 0%,100%{ box-shadow:0 10px 34px rgba(76,141,255,.38);} 50%{ box-shadow:0 10px 46px rgba(76,141,255,.7);} } /* cockpit */ .sbx-cockpit{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:24px; } .sbx-ck{ padding:13px 12px; border-radius:13px; background:rgba(255,255,255,.03); border:1px solid var(--line); text-align:center; border-top:3px solid var(--muted2); } .sbx-ck.red{border-top-color:var(--red)} .sbx-ck.amber{border-top-color:var(--amber)} .sbx-ck.green{border-top-color:var(--green)} .sbx-ck.blue{border-top-color:var(--blue)} .sbx-ck .l{ display:block; font-size:var(--font-eyebrow,14px); font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted2); } .sbx-ck .v{ display:block; font-size:17px; font-weight:900; margin-top:5px; color:#fff; } .sbx-ck.red .v{color:var(--red)} .sbx-ck.amber .v{color:var(--amber)} .sbx-ck.green .v{color:var(--green)} .sbx-ck.blue .v{color:var(--blue2)} /* (v3.26.0) A cockpit cell is now a DESTINATION. It must look like one — a readout that silently accepts clicks is worse than one that doesn't. The arrow is always in the layout (never appears on hover) so the cell's height can't shift under the cursor; hover only brightens it. */ .sbx-ck.go{ position:relative; width:100%; font:inherit; cursor:pointer; color:inherit; transition:transform .16s, border-color .16s, background .16s, box-shadow .16s; } .sbx-ck.go:hover{ transform:translateY(-2px); background:rgba(255,255,255,.06); border-color:rgba(76,141,255,.45); box-shadow:0 10px 26px rgba(0,0,0,.32); } .sbx-ck.go:focus-visible{ outline:2px solid var(--blue2); outline-offset:3px; } .sbx-ck .ck-go{ display:block; margin-top:6px; font-size:var(--font-eyebrow,14px); font-weight:800; color:var(--muted2); opacity:.45; transition:opacity .16s, transform .16s, color .16s; } .sbx-ck.go:hover .ck-go{ opacity:1; color:var(--blue2); transform:translateX(3px); } /* Entitlement cells only. "Available add-on" is longer than a score, so it needs a smaller size — but the headline NUMBER must never shrink, hence the .ent scope rather than a tone-based selector. It's an invitation, not a locked door: never "Owned", never "module". */ .sbx-ck.ent .v{ font-size:14px; letter-spacing:-.01em; line-height:1.25; } /* ============================ CH.2 — WHY (octagon hero) ============================ */ .sbx-octa-hero{ position:relative; max-width:620px; margin:14px auto 0; padding:20px; } .sbx-octa-hero::before{ content:""; position:absolute; inset:6% 12%; border-radius:50%; background:radial-gradient(circle, rgba(76,141,255,.22), rgba(76,141,255,0) 68%); filter:blur(6px); z-index:0; } .sbx-octa-hero svg{ position:relative; z-index:1; width:100%; height:auto; display:block; animation:sbxPop .6s var(--ease-pop); } .sbx-octa-cap{ text-align:center; color:var(--muted2); font-size:var(--font-helper,15px); margin-top:26px; } .sbx-why{ display:grid; grid-template-columns:1fr 1.05fr; gap:38px; align-items:center; } .sbx-drove{ font-size:20px; font-weight:600; line-height:1.5; margin:8px 0 20px; } .sbx-drove b{ font-weight:800; } .sbx-sr-block{ margin-top:16px; } .sbx-sr-head{ font-size:var(--font-helper,15px); font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px; } .sbx-sr-head.good{ color:var(--green);} .sbx-sr-head.risk{ color:var(--red);} .sbx-sr-item{ display:flex; gap:11px; padding:8px 0; border-top:1px solid var(--line2); font-size:15px; } .sbx-sr-item:first-of-type{ border-top:0; } .sbx-sr-item .mk{ flex:none; width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-weight:900;font-size:var(--font-helper,15px); } .sbx-sr-item .mk.good{ background:rgba(47,191,113,.16); color:var(--green);} .sbx-sr-item .mk.risk{ background:rgba(241,89,78,.16); color:var(--red);} .sbx-sr-item .mut{ color:var(--muted); } /* ============================ CH.3 — NEXT STEPS ============================ */ .sbx-plan{ display:grid; gap:14px; margin-top:18px; } .sbx-action{ display:grid; grid-template-columns:52px 1fr; gap:18px; padding:20px; border-radius:var(--radius); background:linear-gradient(180deg,var(--card),var(--card2)); border:1px solid var(--line); } .sbx-action-n{ width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-weight:900;font-size:21px;background:rgba(76,141,255,.14);color:var(--blue2);border:1px solid rgba(76,141,255,.3); } .sbx-action h3{ font-size:19px; font-weight:800; } .sbx-action .why{ color:var(--muted); font-size:15px; margin-top:7px; } /* Domain title + severity chip on one row. Chip = current state (red/amber); the green Impact line below is the reward for acting — kept semantically distinct. */ .sbx-action-head{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; } .sbx-sev{ font-size:var(--font-eyebrow,14px); font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:var(--pill); white-space:nowrap; } .sbx-sev.red{ background:rgba(241,89,78,.15); color:var(--red); border:1px solid rgba(241,89,78,.42); } .sbx-sev.amber{ background:rgba(240,169,59,.15); color:var(--amber); border:1px solid rgba(240,169,59,.42); } .sbx-action-foot{ display:flex; gap:22px; flex-wrap:wrap; margin-top:13px; padding-top:13px; border-top:1px solid var(--line2); } .sbx-action-foot .af .k{ display:block; font-size:var(--font-eyebrow,14px); font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted2); } .sbx-action-foot .af .v{ font-weight:700; font-size:var(--font-helper,15px); } .sbx-action-foot .af .v.imp{ color:var(--green); } /* (v3.18.0) Two equal-size CTAs spanning the pane: Open Workspace pinned LEFT, Open the Classic Workflow pinned RIGHT so its right edge aligns with the right edge of the pane above. min-width keeps them the same size regardless of label length, so the pair reads as one control group. */ .sbx-cta-row{ margin-top:20px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; } .sbx-cta-row .sbx-cta{ min-width:290px; justify-content:center; } .sbx-cta.sbx-cta-alt{ background:rgba(76,141,255,.12); border:1px solid rgba(76,141,255,.45); color:#DCE7FF; box-shadow:none; } .sbx-cta.sbx-cta-alt:hover{ background:rgba(76,141,255,.2); border-color:var(--blue); color:#fff; } /* === THE LONG ASSESSMENT (30s+) ========================================== Past ~30 seconds a static medallion stops reading as "working" and starts reading as "hung". Principle #3 (never an idle screen) + #4 (every wait should teach) + #5 (a longer assessment should INCREASE perceived value). Deliberately NOT a mascot or a sprite: the V3 motion spec bans bouncing, gaming effects, and entertainment, and asks for glide / settle / lock / energize — precision machinery, not a distraction. So the motion is a horizon sweep (aerospace instrumentation) and the meaning is an evidence ledger (real sections, real counts). Both are inert until .long is set. */ .sbx-sweep{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; overflow:hidden; transition:opacity 1.2s ease; } .sbx-unveil.long .sbx-sweep{ opacity:1; } .sbx-sweep::before{ content:''; position:absolute; top:0; bottom:0; left:-30%; width:26%; background:linear-gradient(90deg, transparent, rgba(143,211,255,.055) 38%, rgba(143,211,255,.10) 50%, rgba(143,211,255,.055) 62%, transparent); filter:blur(6px); animation:sbxHorizon 12s cubic-bezier(.55,0,.45,1) infinite; } @keyframes sbxHorizon{ 0%{ transform:translateX(0); } 55%,100%{ transform:translateX(520%); } } /* THE LEDGER LIVES INSIDE THE MARK (v3.25.0). Absolutely centred on .sbx-scan — dead-centre horizontally AND vertically — so the evidence accumulates in the middle of the octagon rather than below it. The octagon is at its widest across its vertical centre, so a panel at ~78% of the mark's width sits comfortably inside the shape. Compact type; the mark, not the list, is the hero. A soft radial scrim keeps the rows legible over the rings and sweep. */ .sbx-ledger{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.96); width:78%; max-width:26rem; z-index:5; text-align:left; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .9s ease, transform .9s cubic-bezier(.22,.68,.28,1), visibility .9s; background:radial-gradient(ellipse at center, rgba(4,10,22,.86) 0%, rgba(4,10,22,.72) 62%, transparent 100%); padding:14px 10px; border-radius:16px; } .sbx-unveil.long .sbx-ledger{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); } .sbx-led-h{ font-size:var(--font-eyebrow,14px); font-weight:800; letter-spacing:2px; text-transform:uppercase; text-align:center; color:rgba(143,211,255,.8); margin-bottom:9px; } .sbx-led-list{ display:flex; flex-direction:column; gap:3px; } .sbx-led-row{ display:flex; align-items:baseline; gap:8px; padding:5px 10px; border-radius:8px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06); opacity:0; transform:translateY(5px); transition:opacity .45s ease, transform .45s cubic-bezier(.22,.68,.28,1); } .sbx-led-row.in{ opacity:1; transform:translateY(0); } .sbx-led-row.out{ opacity:0; transform:translateY(-5px); } .sbx-led-row .tick{ color:#2FBF71; font-size:var(--font-eyebrow,14px); font-weight:800; } .sbx-led-row .nm{ flex:1; font-size:var(--font-eyebrow,14px); font-weight:700; color:#DCE7FF; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sbx-led-row .ct{ font-size:var(--font-eyebrow,14px); color:#8FA0BC; font-variant-numeric:tabular-nums; white-space:nowrap; } /* The closing reassurance stays in the caption, with the prose — it is not evidence. */ .sbx-led-foot{ margin-top:14px; font-size:var(--font-helper,15px); line-height:1.5; color:#6E7F98; font-style:italic; opacity:0; max-height:0; overflow:hidden; transition:opacity .9s ease, max-height .9s ease; } .sbx-unveil.long .sbx-led-foot{ opacity:1; max-height:4rem; } /* 60s escalation — Executive Insight Cards. The ledger can freeze on a stalled tenant; these keep proving liveness AND teach the misreadings the Executive Guides exist to correct. Rotates every 8s until the assessment lands. */ .sbx-insight{ max-width:min(88vw,42rem); margin:20px auto 0; padding:16px 20px; text-align:left; border-radius:13px; background:rgba(76,141,255,.07); border:1px solid rgba(76,141,255,.22); opacity:0; transform:translateY(6px); transition:opacity .5s ease, transform .5s ease; } .sbx-unveil.long60 .sbx-insight.in{ opacity:1; transform:translateY(0); } .sbx-ins-k{ font-size:14px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; color:#8FD3FF; margin-bottom:6px; } .sbx-ins-t{ font-size:15px; line-height:1.6; color:#DCE7FF; } @media (prefers-reduced-motion:reduce){ .sbx-insight{ transition:none; } } @media (prefers-reduced-motion:reduce){ .sbx-sweep::before{ animation:none; opacity:0; } .sbx-led-row{ transition:none; opacity:1; transform:none; } } /* === EXECUTIVE DOMAIN GUIDES (sb-guides.js) =============================== A graded Security & Risk card explains itself, in-app, in executive language. Never a link out to Microsoft's docs — those are written for administrators. */ .sbx-dcard.guided{ cursor:pointer; text-align:left; width:100%; font:inherit; color:inherit; position:relative; transition:border-color .16s, transform .16s, box-shadow .16s; } .sbx-dcard.guided:hover{ transform:translateY(-2px); border-color:rgba(76,141,255,.55); box-shadow:0 12px 30px rgba(0,0,0,.35); } .sbx-dcard.guided:hover .sbx-dc-guide{ color:var(--blue2); } .sbx-dc-guide{ margin-top:10px; font-size:var(--font-helper,15px); font-weight:800; letter-spacing:.02em; color:var(--blue); transition:color .16s; } .sbg-ov{ position:fixed; inset:0; z-index:210; display:grid; place-items:center; padding:24px; background:rgba(3,7,16,.80); backdrop-filter:blur(7px); } .sbg-box{ width:min(860px,100%); max-height:90vh; overflow:auto; border-radius:20px; background:linear-gradient(180deg,#0F1B33,#0A1223); border:1px solid rgba(76,141,255,.26); box-shadow:0 34px 90px rgba(0,0,0,.62); color:#ECF1FB; } .sbg-head{ position:relative; padding:28px 34px 22px; border-bottom:1px solid rgba(255,255,255,.07); background:linear-gradient(180deg,rgba(76,141,255,.10),transparent); } .sbg-head.red{ background:linear-gradient(180deg,rgba(241,89,78,.12),transparent); } .sbg-head.amber{ background:linear-gradient(180deg,rgba(240,169,59,.12),transparent); } .sbg-head.green{ background:linear-gradient(180deg,rgba(47,191,113,.12),transparent); } .sbg-x{ position:absolute; top:16px; right:18px; width:34px; height:34px; border-radius:9px; cursor:pointer; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); color:#A6B6D6; font-size:19px; line-height:1; } .sbg-x:hover{ color:#fff; border-color:rgba(76,141,255,.5); } .sbg-eyebrow{ font-size:var(--font-eyebrow,14px); font-weight:800; letter-spacing:1.8px; text-transform:uppercase; color:var(--blue2); } .sbg-head h2{ margin:6px 0 2px; font-size:29px; font-weight:800; letter-spacing:-.02em; } .sbg-sub{ font-size:var(--font-helper,15px); color:var(--muted2); } .sbg-scoreline{ display:flex; align-items:center; gap:12px; margin-top:14px; } .sbg-score{ font-size:26px; font-weight:800; letter-spacing:-.02em; } .sbg-score.red{ color:var(--red); } .sbg-score.amber{ color:var(--amber); } .sbg-score.green{ color:var(--green); } .sbg-grade{ font-size:var(--font-helper,15px); font-weight:800; padding:3px 10px; border-radius:999px; border:1px solid currentColor; } .sbg-grade.red{ color:var(--red); } .sbg-grade.amber{ color:var(--amber); } .sbg-grade.green{ color:var(--green); } .sbg-status{ font-size:var(--font-helper,15px); color:var(--muted); } .sbg-lede{ margin-top:14px; font-size:15.5px; line-height:1.6; color:#DCE7FF; max-width:64ch; } .sbg-body{ padding:8px 34px 10px; } .sbg-sec{ padding:22px 0; border-bottom:1px solid rgba(255,255,255,.06); } .sbg-sec:last-child{ border-bottom:0; } .sbg-sec h3{ margin:0 0 10px; font-size:18px; font-weight:800; letter-spacing:-.01em; color:#fff; } .sbg-sec p, .sbg-callout p, .sbg-takeaway p{ margin:9px 0; font-size:14.5px; line-height:1.65; color:#C6D3E8; } .sbg-sec ul{ margin:8px 0; padding-left:20px; } .sbg-sec li{ margin:6px 0; font-size:14.5px; line-height:1.55; color:#C6D3E8; } .sbg-q li{ color:#DCE7FF; font-weight:600; } .sbg-note{ font-size:var(--font-helper,15px) !important; color:var(--muted) !important; font-style:italic; } .sbg-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; } .sbg-chips span{ font-size:var(--font-helper,15px); font-weight:700; padding:6px 11px; border-radius:999px; color:#DCE7FF; background:rgba(76,141,255,.10); border:1px solid rgba(76,141,255,.28); } .sbg-callout{ margin:20px 0; padding:16px 18px; border-radius:12px; border-left:3px solid var(--amber); background:rgba(240,169,59,.09); border-top:1px solid rgba(240,169,59,.20); border-right:1px solid rgba(240,169,59,.20); border-bottom:1px solid rgba(240,169,59,.20); } .sbg-co-h{ font-size:var(--font-helper,15px); font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--amber); } .sbg-src{ font-size:var(--font-helper,15px) !important; color:var(--muted2) !important; font-style:italic; } .sbg-two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0; } .sbg-col{ padding:16px 18px; border-radius:12px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.02); } .sbg-col.ok{ border-color:rgba(47,191,113,.28); background:rgba(47,191,113,.06); } .sbg-col.no{ border-color:rgba(241,89,78,.26); background:rgba(241,89,78,.06); } .sbg-col-h{ font-size:var(--font-helper,15px); font-weight:800; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:9px; } .sbg-col.ok .sbg-col-h{ color:var(--green); } .sbg-col.no .sbg-col-h{ color:var(--red); } .sbg-col ul{ margin:0; padding-left:18px; } .sbg-col li{ margin:7px 0; font-size:14px; line-height:1.5; color:#C6D3E8; } .sbg-tbl{ width:100%; border-collapse:collapse; margin:16px 0 6px; font-size:14px; } .sbg-tbl th{ text-align:left; padding:11px 14px; font-size:var(--font-helper,15px); letter-spacing:1px; text-transform:uppercase; } .sbg-tbl thead th:first-child{ color:var(--muted); background:rgba(255,255,255,.04); border-radius:9px 0 0 0; } .sbg-tbl thead th:last-child{ color:var(--blue2); background:rgba(76,141,255,.12); border-radius:0 9px 0 0; } .sbg-tbl td{ padding:11px 14px; border-top:1px solid rgba(255,255,255,.06); color:#C6D3E8; } .sbg-tbl td:last-child{ color:#EAF1FF; font-weight:600; background:rgba(76,141,255,.05); } .sbg-takeaway{ margin:22px 0 8px; padding:20px 22px; border-radius:14px; background:linear-gradient(180deg,rgba(76,141,255,.12),rgba(76,141,255,.04)); border:1px solid rgba(76,141,255,.34); } .sbg-tk-h{ font-size:var(--font-helper,15px); font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--blue2); margin-bottom:8px; } .sbg-tk-you{ margin-top:12px !important; padding-top:12px; border-top:1px solid rgba(76,141,255,.24); color:#EAF1FF !important; } .sbg-foot{ padding:16px 34px 26px; } .sbg-done{ font:inherit; font-size:14px; font-weight:800; color:#DCE7FF; cursor:pointer; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); border-radius:11px; padding:11px 20px; } .sbg-done:hover{ color:#fff; border-color:rgba(76,141,255,.5); } @media (max-width:760px){ .sbg-two{ grid-template-columns:1fr; } .sbg-head,.sbg-body,.sbg-foot{ padding-left:20px; padding-right:20px; } } /* Workspace card 12 — "Ask Your Technology Team" instruction dialog. The accountability hand-off: what to ask, why it matters, then draft the email. */ .sbx-askov{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px; background:rgba(3,7,16,.78); backdrop-filter:blur(6px); } .sbx-askbox{ position:relative; width:min(660px,100%); max-height:88vh; overflow:auto; background:linear-gradient(180deg,#0F1B33,#0B1425); border:1px solid rgba(76,141,255,.28); border-radius:18px; padding:28px 30px 24px; box-shadow:0 30px 80px rgba(0,0,0,.6); color:#ECF1FB; } .sbx-askbox .sbx-h2{ margin:2px 0 10px; } .sbx-askx{ position:absolute; top:12px; right:14px; width:32px; height:32px; border-radius:8px; cursor:pointer; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); color:#A6B6D6; font-size:18px; line-height:1; } .sbx-askx:hover{ color:#fff; border-color:rgba(76,141,255,.5); } .sbx-asklab{ margin:18px 0 8px; font-size:var(--font-eyebrow,14px); font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--blue2); } .sbx-asklist{ margin:0; padding-left:20px; } .sbx-asklist li{ margin:7px 0; font-size:14.5px; line-height:1.5; color:#DCE7FF; } .sbx-askq{ margin-top:18px; padding:13px 16px; border-left:3px solid var(--amber); border-radius:0 10px 10px 0; background:rgba(240,169,59,.08); font-style:italic; font-size:14.5px; color:#F2E3C6; } .sbx-askq b{ font-style:normal; color:var(--amber); } .sbx-askfoot{ margin-top:22px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; } .sbx-askbtns{ display:flex; gap:10px; flex-wrap:wrap; } .sbx-asknote{ font-size:var(--font-helper,15px); line-height:1.5; color:#79899F; } /* From-line warning — mailto: cannot set the sender, so this is the only place the executive can catch a wrong-mailbox send before it happens. */ .sbx-askwarn{ margin-top:16px; padding:12px 15px; border-radius:11px; font-size:var(--font-helper,15px); line-height:1.55; color:#F2E3C6; background:rgba(240,169,59,.10); border:1px solid rgba(240,169,59,.32); } .sbx-askwarn b{ color:var(--amber); } /* ============================ CH.4 — WORKSPACE ============================ */ .sbx-cap-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:18px; } .sbx-cap{ text-align:left; padding:20px; border-radius:var(--radius); background:linear-gradient(180deg,var(--card),var(--card2)); border:1px solid var(--line); cursor:pointer; transition:.16s; width:100%; color:inherit; } .sbx-cap:hover{ transform:translateY(-3px); border-color:rgba(76,141,255,.5); box-shadow:0 12px 30px rgba(0,0,0,.35); } .sbx-cap.prev{ border-style:dashed; border-color:rgba(142,125,227,.4); } .sbx-cap-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .sbx-cap h4{ font-size:16px; font-weight:800; } .sbx-cap p{ font-size:var(--font-helper,15px); color:var(--muted); margin:8px 0 0; } .sbx-cap-badge{ font-size:var(--font-eyebrow,14px); font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:var(--pill); white-space:nowrap; } .sbx-cap-badge.inc{ background:rgba(47,191,113,.15); color:var(--green); border:1px solid rgba(47,191,113,.4);} .sbx-cap-badge.prv{ background:rgba(142,125,227,.15); color:#C6BAF6; border:1px solid rgba(142,125,227,.45);} .sbx-cap-stat{ display:inline-flex; align-items:center; gap:7px; margin-top:13px; font-size:var(--font-helper,15px); font-weight:700; color:var(--muted); } .sbx-cap-stat .dot{ width:8px;height:8px;border-radius:50%; } .dot.red{background:var(--red)} .dot.amber{background:var(--amber)} .dot.green{background:var(--green)} .dot.blue{background:var(--blue2)} .dot.purple{background:var(--purple)} .sbx-ws-note{ display:inline-flex; align-items:center; gap:9px; margin-top:16px; font-size:15px; color:var(--muted); background:rgba(142,125,227,.08); border:1px solid rgba(142,125,227,.3); padding:10px 15px; border-radius:11px; } /* === WORKSPACE — the centerpiece (v3.19.0) ================================ §2 promise lead + §10 cockpit + Principle #2 density. Twelve capability cards, the cockpit, and the lead line must all land in the first 1920×1080 viewport (Airplane Test), so this panel runs tighter than the others: compressed header block, 12px grid gap, 15px card padding. Nothing is removed — only spacing is bought back. */ .sbx-ws-head{ margin-bottom:14px; } .sbx-ws-lede{ max-width:62ch; margin:2px 0 0; font-size:clamp(19px,1.45vw,25px); line-height:1.32; letter-spacing:-.015em; } .sbx-ws-head .sbx-cockpit{ margin-top:14px; } .sbx-ws-grid{ margin-top:14px; gap:12px; } .sbx-ws-grid .sbx-cap{ padding:15px 16px; } .sbx-ws-grid .sbx-cap p{ margin-top:5px; } @media (min-height:1000px){ .sbx-ws-lede{ font-size:clamp(21px,1.6vw,28px); } .sbx-ws-grid{ gap:14px; } } /* Domain registrars & DNS — full section (Security & Risk) */ .sbx-domains{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); } .sbx-domains-title{ font-size:14px; font-weight:800; color:var(--text); margin-bottom:10px; } .sbx-domains-sub{ font-weight:500; color:var(--muted); font-size:15px; } .sbx-domains-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .sbx-domains-row.compact{ gap:6px; } /* Workspace utility cards (Domains & DNS, Ask AI) */ .sbx-ws-cards{ display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-top:16px; } .sbx-ws-card{ border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.02); padding:16px 18px; display:flex; flex-direction:column; gap:11px; } .sbx-ws-card.askai{ background:linear-gradient(160deg,rgba(76,141,255,.10),rgba(142,125,227,.06)); border-color:rgba(76,141,255,.28); } .sbx-ws-card-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .sbx-ws-card-h h4{ margin:0; font-size:18px; font-weight:800; color:var(--text); } .sbx-ws-card-tag{ font-size:14px; font-weight:700; color:var(--muted); background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:20px; padding:2px 10px; } .sbx-ws-card-p{ margin:0; font-size:15px; color:var(--muted); line-height:1.55; } .sbx-ws-card-cta{ align-self:flex-start; margin-top:auto; background:none; border:0; color:#4C8DFF; font-weight:800; font-size:15px; cursor:pointer; padding:4px 0; } .sbx-ws-card-cta:hover{ text-decoration:underline; } @media (max-width:900px){ .sbx-ws-cards{ grid-template-columns:1fr; } } .sbx-ws-cards.one{ grid-template-columns:minmax(0,460px); } /* card-as-button (Domain Governance mini card) */ button.sbx-ws-card{ text-align:left; cursor:pointer; font:inherit; color:inherit; transition:border-color .16s, transform .16s; } button.sbx-ws-card:hover{ border-color:rgba(76,141,255,.5); transform:translateY(-2px); } .dg-mini-score{ font-size:15px; font-weight:900; } .dg-mini-score.green{ color:var(--green); } .dg-mini-score.amber{ color:#F0A93B; } .dg-mini-score.red{ color:var(--red); } .dg-mini-stats{ display:flex; gap:16px; flex-wrap:wrap; font-size:15px; color:var(--muted); } .dg-mini-stats b{ color:var(--text); font-size:15.5px; } .dg-mini-stats .green b{ color:var(--green); } .dg-mini-stats .red b{ color:var(--red); } /* ===== Domain Governance tab (sb-domains.js) ===== */ .dg-exec{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; background:linear-gradient(135deg,rgba(76,141,255,.08),rgba(47,191,113,.05)); border:1px solid var(--line); border-radius:16px; padding:20px 24px; margin:8px 0 14px; } .dg-exec-score{ text-align:center; flex:none; } .dg-exec-ring{ width:96px; height:96px; border-radius:50%; display:grid; place-items:center; margin:0 auto 6px; background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.05),transparent 70%); border:4px solid #2FBF71; } .dg-exec-ring.amber{ border-color:#F0A93B; } .dg-exec-ring.red{ border-color:#F1594E; } .dg-exec-n{ font-size:30px; font-weight:900; color:var(--text); } .dg-exec-n i{ font-size:15px; font-style:normal; color:var(--muted); } .dg-exec-lab{ font-size:var(--dgf-eyebrow,14px); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; } .dg-exec-tier{ font-size:15px; font-weight:800; margin-top:2px; } .dg-exec-tier.green{ color:var(--green);} .dg-exec-tier.amber{ color:#F0A93B;} .dg-exec-tier.red{ color:var(--red); } .dg-exec-stats{ display:flex; gap:26px; flex-wrap:wrap; flex:1; min-width:260px; } .dg-stat{ display:flex; flex-direction:column; gap:3px; text-align:center; align-items:center; } .dg-stat.wide{ min-width:180px; text-align:left; align-items:flex-start; } .dg-stat-n{ font-size:var(--dgf-metric-val,28px); font-weight:900; color:var(--text); } .dg-stat-n.green{ color:var(--green);} .dg-stat-n.amber{ color:#F0A93B; } .dg-stat-n.red{ color:var(--red); } .dg-stat-l{ font-size:var(--dgf-metric-label,15px); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; } .dg-stat-v{ font-size:15px; font-weight:800; color:var(--text); } .dg-topnote{ font-size:var(--dgf-helper,15px); color:var(--muted); line-height:1.6; margin-bottom:16px; } .dg-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } @media (max-width:1100px){ .dg-grid{ grid-template-columns:1fr; } } .dg-card{ border:1px solid var(--line); border-left:4px solid var(--line); border-radius:14px; background:rgba(255,255,255,.02); padding:20px 22px; } .dg-card.green{ border-left-color:#2FBF71; } .dg-card.amber{ border-left-color:#F0A93B; } .dg-card.red{ border-left-color:#F1594E; } .dg-card.ms{ border-left-color:#5B8CFF; opacity:.9; } .dg-card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .dg-card-name{ font-size:var(--dgf-card-h,20px); font-weight:800; color:var(--text); word-break:break-all; } .dg-score{ display:flex; align-items:center; gap:8px; flex:none; } .dg-score-n{ font-size:18px; font-weight:900; } .dg-score-n.green{ color:var(--green);} .dg-score-n.amber{ color:#F0A93B;} .dg-score-n.red{ color:var(--red); } .dg-grade{ font-size:14px; font-weight:800; padding:2px 9px; border-radius:20px; } .dg-grade.green{ color:var(--green); background:rgba(47,191,113,.14);} .dg-grade.amber{ color:#F0A93B; background:rgba(240,169,59,.14);} .dg-grade.red{ color:var(--red); background:rgba(241,89,78,.14);} .dg-grade.grey{ color:#9FB0C8; background:rgba(120,150,200,.12); } .dg-meta{ display:flex; gap:20px; flex-wrap:wrap; margin:11px 0 4px; } .dg-meta-i{ display:flex; align-items:center; gap:7px; } .dg-k{ font-size:var(--dgf-eyebrow,14px); letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-weight:700; } .dg-v{ font-size:var(--dgf-body2,16px); color:var(--text); font-weight:600; } .dg-sub{ font-size:var(--dgf-body2,16px); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:12px 0 6px; } .dg-chips{ display:flex; flex-wrap:wrap; gap:6px; } .dg-chip{ font-size:15px; font-weight:700; padding:4px 11px; border-radius:20px; border:1px solid var(--line); white-space:nowrap; } .dg-chip.ok{ color:var(--green); border-color:rgba(47,191,113,.4); background:rgba(47,191,113,.08); } .dg-chip.warn{ color:#F0A93B; border-color:rgba(240,169,59,.4); background:rgba(240,169,59,.08); } .dg-chip.bad{ color:var(--red); border-color:rgba(241,89,78,.4); background:rgba(241,89,78,.08); } .dg-risks{ margin:2px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px; } .dg-ri{ font-size:var(--dgf-body,17px); line-height:1.45; padding-left:18px; position:relative; color:var(--text); } .dg-ri:before{ position:absolute; left:0; top:0; font-weight:900; } .dg-ri.red{ color:#F19B93; } .dg-ri.red:before{ content:'●'; color:var(--red); } .dg-ri.amber{ color:#E7C489; } .dg-ri.amber:before{ content:'●'; color:#F0A93B; } .dg-ri.green{ color:#9FD9B8; } .dg-ri.green:before{ content:'●'; color:var(--green); } .dg-pending{ margin-top:13px; padding-top:11px; border-top:1px dashed var(--line); font-size:var(--dgf-body,17px); color:var(--muted); line-height:1.55; } .dg-ms-note{ margin-top:9px; font-size:var(--dgf-body,17px); color:var(--muted); line-height:1.55; } /* Registry expiry + name servers + owner */ .dg-v.dg-exp-warn{ color:var(--red); font-weight:800; } .dg-v small{ color:var(--muted); font-weight:600; } .dg-ns{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px; } .dg-ns li{ font-size:15px; font-weight:600; color:var(--text); background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:8px; padding:3px 9px; font-family:'SF Mono',ui-monospace,Menlo,monospace; text-transform:lowercase; } .dg-exp-alert{ margin:10px 0 2px; font-size:15px; font-weight:800; color:#FFD3CE; background:rgba(241,89,78,.12); border:1px solid rgba(241,89,78,.45); border-radius:10px; padding:8px 12px; } /* Domain within 30 days of expiry — blinking red outline (Johnnie 2026-07-08) */ .dg-acc.dg-expiring{ border-color:var(--red); animation:dgExpBlink 1.15s ease-in-out infinite; } @keyframes dgExpBlink{ 0%,100%{ box-shadow:0 0 0 0 rgba(241,89,78,0); border-color:rgba(241,89,78,.45); } 50%{ box-shadow:0 0 0 3px rgba(241,89,78,.35); border-color:rgba(241,89,78,1); } } @media (prefers-reduced-motion:reduce){ .dg-acc.dg-expiring{ animation:none; box-shadow:0 0 0 2px rgba(241,89,78,.5); } } /* Self-attested classification editor */ .dg-attest{ font-size:14px; font-weight:700; letter-spacing:.04em; color:#8FB0E0; background:rgba(76,141,255,.12); border:1px solid rgba(76,141,255,.28); border-radius:20px; padding:2px 8px; margin-left:7px; text-transform:none; } .dg-class{ display:flex; gap:16px; flex-wrap:wrap; } .dg-class label{ display:flex; flex-direction:column; gap:5px; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; } .dg-sel{ font:inherit; font-size:var(--dgf-btn,16px); font-weight:600; color:var(--text); background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:9px; padding:7px 10px; cursor:pointer; min-width:170px; } .dg-sel:hover{ border-color:rgba(91,140,255,.45); } .dg-sel:focus{ outline:none; border-color:#4C8DFF; } .dg-sel option{ background:#0d1526; color:var(--text); } .dg-attest.ext{ color:#9FD9B8; background:rgba(47,191,113,.12); border-color:rgba(47,191,113,.28); } .dg-muted{ color:var(--muted); font-weight:500; font-style:italic; } /* ===== Domain Governance toolbar + accordion + posture (2026-07-08) ===== */ .dg-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0 12px; } .dg-tbtn{ font:inherit; font-size:var(--dgf-btn,16px); font-weight:800; color:var(--text); background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:10px; padding:12px 18px; cursor:pointer; transition:.15s; white-space:nowrap; } .dg-tbtn:hover{ border-color:rgba(91,140,255,.5); background:rgba(76,141,255,.1); } .dg-tbtn.primary{ color:#fff; background:linear-gradient(135deg,#4C8DFF,#2f6fe0); border-color:transparent; } .dg-tbtn.primary:hover{ filter:brightness(1.08); } .dg-tbtn:disabled{ opacity:.6; cursor:default; } .dg-check{ display:flex; gap:6px; margin-left:auto; } .dg-check-in{ font:inherit; font-size:var(--dgf-btn,16px); color:var(--text); background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:10px; padding:11px 14px; min-width:230px; } .dg-check-in:focus{ outline:none; border-color:#4C8DFF; } .dg-list{ display:flex; flex-direction:column; gap:9px; } .dg-acc{ border:1px solid var(--line); border-left:4px solid var(--line); border-radius:12px; background:rgba(255,255,255,.02); overflow:hidden; } .dg-acc.green{ border-left-color:#2FBF71; } .dg-acc.amber{ border-left-color:#F0A93B; } .dg-acc.red{ border-left-color:#F1594E; } .dg-acc.ms{ border-left-color:#5B8CFF; opacity:.92; } .dg-acc-head{ width:100%; display:flex; align-items:center; gap:12px; background:none; border:0; cursor:pointer; padding:18px 18px; text-align:left; color:var(--text); } .dg-acc-head:hover{ background:rgba(255,255,255,.02); } .dg-adot{ width:11px; height:11px; border-radius:50%; flex:none; } .dg-adot.green{ background:#2FBF71; box-shadow:0 0 0 3px rgba(47,191,113,.18); } .dg-adot.amber{ background:#F0A93B; box-shadow:0 0 0 3px rgba(240,169,59,.18); } .dg-adot.red{ background:#F1594E; box-shadow:0 0 0 3px rgba(241,89,78,.18); } .dg-adot.grey{ background:#7E93B8; } .dg-aname{ font-size:var(--dgf-row-name,17px); font-weight:800; color:var(--text); word-break:break-all; } .dg-astatus{ font-size:var(--dgf-status,15px); font-weight:800; padding:2px 11px; border-radius:20px; } .dg-astatus.green{ color:#2FBF71; background:rgba(47,191,113,.14); } .dg-astatus.amber{ color:#F0A93B; background:rgba(240,169,59,.14); } .dg-astatus.red{ color:#F1594E; background:rgba(241,89,78,.14); } .dg-atag.grey{ font-size:14px; font-weight:700; color:#9FB0C8; background:rgba(120,150,200,.12); padding:2px 10px; border-radius:20px; } .dg-ameta{ margin-left:auto; font-size:var(--dgf-meta,15px); font-weight:700; color:var(--muted); white-space:nowrap; } .dg-achev{ font-size:30px; color:var(--muted2); transition:transform .2s; flex:none; margin-left:6px; line-height:1; } .dg-acc.open .dg-achev{ transform:rotate(180deg); } /* Google-managed badge — parallel to .dg-atag.grey (Microsoft-managed). */ .dg-atag.g{ font-size:14px; font-weight:700; color:#8FE3B0; background:rgba(52,211,153,.14); padding:2px 10px; border-radius:20px; border:1px solid rgba(52,211,153,.30); } /* Per-domain rescan — re-reads ONE domain instead of the whole portfolio. */ .dg-rescan-one{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-left:10px; border-radius:10px; color:#9FB4D4; background:rgba(120,150,210,.10); border:1px solid rgba(120,160,220,.28); font-size:24px; line-height:1; cursor:pointer; transition:.15s; flex:none; } .dg-rescan-one:hover{ color:#EAF1FC; background:rgba(76,141,255,.22); border-color:rgba(76,141,255,.5); } .dg-rescan-one:focus-visible{ outline:2px solid #7fa8ff; outline-offset:2px; } /* Active rescan — the button turns blue and the glyph spins so it is unmistakable that a scan is running; the class is removed automatically when the scan (and its AI review) complete, so it turns itself off. */ .dg-rescan-one.scanning{ color:#fff; background:#2f6fe0; border-color:#4C8DFF; border-radius:50%; box-shadow:0 0 0 3px rgba(76,141,255,.25); animation:dg-rescan-spin .9s linear infinite; } @keyframes dg-rescan-spin{ to{ transform:rotate(360deg); } } @media(prefers-reduced-motion:reduce){ .dg-rescan-one.scanning{ animation:none; } } .dg-acc-body{ display:none; padding:4px 20px 18px; border-top:1px solid var(--line); } .dg-acc.open .dg-acc-body{ display:block; animation:dgFade .18s ease; } @keyframes dgFade{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:none; } } .dg-score-line{ display:flex; align-items:center; gap:9px; margin:12px 0 2px; } .dg-score-n{ font-size:18px; font-weight:900; } .dg-score-n.green{ color:var(--green);} .dg-score-n.amber{ color:#F0A93B;} .dg-score-n.red{ color:var(--red); } .dg-grade{ font-size:14px; font-weight:800; padding:2px 9px; border-radius:20px; } .dg-grade.green{ color:var(--green); background:rgba(47,191,113,.14);} .dg-grade.amber{ color:#F0A93B; background:rgba(240,169,59,.14);} .dg-grade.red{ color:var(--red); background:rgba(241,89,78,.14);} .dg-score-cap{ font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:700; } /* posture rows */ .dg-prows{ display:flex; flex-direction:column; gap:2px; } .dg-prow{ display:flex; align-items:center; gap:10px; padding:7px 2px; border-bottom:1px solid rgba(255,255,255,.04); font-size:15px; } .dg-prow:last-child{ border-bottom:0; } .dg-pdot{ width:8px; height:8px; border-radius:50%; flex:none; background:var(--muted2); } .dg-prow.ok .dg-pdot{ background:#2FBF71; } .dg-prow.warn .dg-pdot{ background:#F0A93B; } .dg-prow.bad .dg-pdot{ background:#F1594E; } .dg-prow.neutral .dg-pdot{ background:#7E93B8; } .dg-plabel{ min-width:150px; color:var(--muted); font-weight:700; font-size:var(--dgf-meta,15px); text-transform:uppercase; letter-spacing:.04em; } .dg-pval{ color:var(--text); font-weight:600; } .dg-pval small{ color:var(--muted); font-weight:600; } .dg-ind{ font-size:14px; font-weight:700; color:#8FB0E0; background:rgba(76,141,255,.12); border-radius:10px; padding:2px 7px; } .dg-deepbtn{ font:inherit; font-size:16px; font-weight:800; color:#8FB0E0; background:rgba(76,141,255,.1); border:1px solid rgba(76,141,255,.3); border-radius:8px; padding:6px 12px; cursor:pointer; margin-left:4px; } .dg-deepbtn:hover{ background:rgba(76,141,255,.2); } .dg-deepbtn:disabled{ opacity:.6; cursor:default; } .dg-deepgrade{ color:#9FD9B8; font-weight:800; } .dg-ext-empty{ font-size:var(--dgf-body,17px); color:var(--muted); line-height:1.55; background:rgba(255,255,255,.03); border:1px dashed var(--line); border-radius:10px; padding:10px 13px; } .dg-ext-unreach{ font-size:var(--dgf-body,17px); color:#E7C489; line-height:1.55; background:rgba(240,169,59,.08); border:1px solid rgba(240,169,59,.3); border-radius:10px; padding:10px 13px; margin-bottom:8px; } .dg-ext-unreach b{ color:#F0C070; } .dg-ext-when{ font-size:var(--dgf-helper,15px); color:var(--muted2); margin-top:7px; } /* Check-a-domain modal */ .dg-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; } .dg-modal-back{ position:absolute; inset:0; background:rgba(6,11,22,.72); backdrop-filter:blur(3px); } .dg-modal-card{ position:relative; width:min(620px,92vw); max-height:86vh; overflow:auto; background:#0d1526; border:1px solid var(--line); border-radius:16px; padding:22px 24px; box-shadow:0 24px 70px rgba(0,0,0,.55); } .dg-modal-x{ position:absolute; top:12px; right:14px; background:none; border:0; color:var(--muted); font-size:22px; cursor:pointer; } .dg-modal-x:hover{ color:#fff; } .dg-modal-h{ display:flex; align-items:center; gap:10px; font-size:18px; font-weight:900; color:var(--text); margin-bottom:12px; } .dg-modal-msg{ font-size:15.5px; color:var(--muted); margin-bottom:10px; line-height:1.5; } .dg-recall{ margin-top:16px; padding-top:12px; border-top:1px solid var(--line); } .dg-recall-h{ font-size:var(--dgf-eyebrow,14px); font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; } .dg-recall-chip{ font:inherit; font-size:15px; font-weight:700; color:var(--text); background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:20px; padding:5px 12px; margin:0 6px 6px 0; cursor:pointer; } .dg-recall-chip:hover{ border-color:rgba(91,140,255,.5); } /* External-scan progress overlay (domain-worded, not the exec-briefing reveal) */ .dg-scanov{ position:fixed; inset:0; z-index:210; display:flex; align-items:center; justify-content:center; background:rgba(6,11,22,.66); backdrop-filter:blur(3px); } .dg-scanov-card{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; padding:34px 40px; } .dg-scanov-ring{ width:52px; height:52px; border-radius:50%; border:3px solid rgba(76,141,255,.22); border-top-color:#4C8DFF; animation:dgSpin .9s linear infinite; } @keyframes dgSpin{ to{ transform:rotate(360deg); } } .dg-scanov-t{ font-size:18px; font-weight:900; color:var(--text); letter-spacing:.01em; } .dg-scanov-s{ font-size:15px; color:var(--muted); max-width:420px; line-height:1.5; } @media (prefers-reduced-motion:reduce){ .dg-scanov-ring{ animation:none; } } /* ===== Executive Trend Analysis (sb-trend.js) ===== */ .sbt{ margin-top:18px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.02); padding:18px 20px; } .sbt-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .sbt-head h3{ margin:0; font-size:18px; font-weight:900; color:var(--text); } .sbt-sub{ font-size:var(--font-helper,15px); color:var(--muted); margin-top:3px; } .sbt-reset{ font:inherit; font-size:var(--font-helper,15px); font-weight:800; color:#C6D6FF; background:rgba(76,141,255,.1); border:1px solid rgba(76,141,255,.35); border-radius:10px; padding:7px 12px; cursor:pointer; white-space:nowrap; } .sbt-reset:hover{ background:rgba(76,141,255,.2); } .sbt-headctl{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; } .sbt-pull{ font:inherit; font-size:var(--font-helper,15px); font-weight:800; color:#0A1020; background:linear-gradient(180deg,#8FD3FF,#4C8DFF); border:1px solid rgba(76,141,255,.6); border-radius:10px; padding:7px 13px; cursor:pointer; white-space:nowrap; box-shadow:0 2px 10px rgba(76,141,255,.28); } .sbt-pull:hover{ filter:brightness(1.06); } .sbt-pull.busy{ opacity:.7; cursor:progress; } .sbt-pullbar{ margin:10px 0 2px; font-size:var(--font-helper,15px); color:#B7C6E2; background:rgba(76,141,255,.07); border:1px solid rgba(76,141,255,.16); border-radius:10px; padding:8px 12px; } .sbt-pullbar b{ color:#EAF1FF; } .sbx-scopenote{ margin:16px 0 4px; padding:12px 15px; border:1px dashed rgba(120,140,175,.35); border-radius:12px; background:rgba(120,140,175,.06); font-size:var(--font-helper,15px); line-height:1.55; color:#9EAFC8; } .sbx-scopenote b{ color:#C6D2E6; font-weight:800; } .sbx-scopenote-h{ display:block; font-size:var(--font-eyebrow,14px); font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:#7E8FA8; margin-bottom:4px; } /* ---- Free / trial mode ---- */ .sbx-freeocta{ width:100%; max-width:320px; display:block; margin:0 auto; } .sbx-free-line{ margin-top:16px; font-size:var(--font-helper,15px); color:var(--muted); line-height:1.55; background:rgba(76,141,255,.06); border:1px solid rgba(76,141,255,.2); border-radius:12px; padding:12px 14px; } .sbx-free-line b{ color:var(--text); } .sbx-free-strip{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; justify-content:space-between; margin:18px 0 6px; padding:13px 16px; border-radius:12px; background:linear-gradient(100deg,rgba(76,141,255,.12),rgba(142,125,227,.07)); border:1px solid rgba(76,141,255,.3); font-size:var(--font-helper,15px); color:#D9E2F5; line-height:1.5; } .sbx-free-strip b{ color:#EAF0FA; } .sbx-mini-up{ flex:0 0 auto; font:inherit; font-size:var(--font-helper,15px); font-weight:800; color:#0A1020; background:linear-gradient(180deg,#8FD3FF,#4C8DFF); border:0; border-radius:999px; padding:8px 15px; cursor:pointer; white-space:nowrap; box-shadow:0 2px 12px rgba(76,141,255,.32); } .sbx-mini-up:hover{ filter:brightness(1.06); } /* ---- Legal / privacy footer (persistent, all views) ---- */ .sbx-legal-foot{ max-width:1560px; margin:0 auto; padding:16px 34px 40px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; justify-content:space-between; border-top:1px solid var(--line); } .lf-txt{ font-size:var(--font-eyebrow,14px); color:var(--muted2); line-height:1.55; max-width:900px; } .lf-txt b{ color:var(--muted); } .lf-btns{ display:inline-flex; gap:8px; flex:0 0 auto; } .lf-btn{ font:inherit; font-size:var(--font-eyebrow,14px); font-weight:800; color:#C6D2E6; background:rgba(120,140,175,.08); border:1px solid rgba(120,140,175,.28); border-radius:999px; padding:6px 13px; cursor:pointer; white-space:nowrap; text-decoration:none; display:inline-flex; align-items:center; transition:background .15s,border-color .15s,color .15s; } .lf-btn:hover{ background:rgba(76,141,255,.12); border-color:rgba(76,141,255,.4); color:#EAF0FA; } @media(max-width:760px){ .sbx-legal-foot{ padding:14px 16px 32px; } } .sbt-modes{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 6px; } .sbt-mode{ font:inherit; font-size:var(--font-helper,15px); font-weight:800; color:var(--muted2); background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:20px; padding:7px 14px; cursor:pointer; transition:.15s; } .sbt-mode:hover{ color:#fff; border-color:rgba(76,141,255,.4); } .sbt-mode.on{ color:#fff; background:linear-gradient(135deg,rgba(76,141,255,.25),rgba(76,141,255,.12)); border-color:rgba(76,141,255,.6); } /* (v2.91.7) TREND = RAIL LEFT, CHART RIGHT. The graph is the point of this page. Everything else is caption. The legend is the control surface (click a line on/off) so it leads; the board sentence sits under it as a caption to the evidence, not a headline over it. */ .sbt-body{ display:grid; grid-template-columns:260px minmax(0,1fr); gap:20px; align-items:start; margin-top:4px; } .sbt-rail{ min-width:0; position:sticky; top:8px; } .sbt-chartwrap{ min-width:0; } /* The board sentence, now a caption beside the line rather than a band above it. */ .sbt-sowhat{ margin-top:14px; padding:12px 13px; border-radius:10px; background:rgba(240,169,59,.07); border:1px solid rgba(240,169,59,.30); font-size:var(--font-helper,15px); line-height:1.6; color:#cfe3f5; } .sbt-sowhat b{ display:block; margin-bottom:5px; font-size:var(--font-eyebrow,14px); letter-spacing:1.5px; text-transform:uppercase; color:#F0A93B; } @media (max-width:1080px){ .sbt-body{ display:block; } .sbt-rail{ position:static; margin-bottom:14px; } } .sbt-svg{ width:100%; height:auto; display:block; } .sbt-pt circle{ cursor:pointer; transition:r .12s; } .sbt-pt:hover circle{ r:8.5; } .sbt-refnote{ font-size:var(--font-eyebrow,14px); color:var(--muted); line-height:1.5; margin-top:8px; } .sbt-legend{ width:100%; max-width:none; } .sbt-legend-h,.sbt-insights-h{ font-size:var(--font-eyebrow,14px); font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; } .sbt-legend-hint{ font-weight:600; letter-spacing:0; text-transform:none; color:var(--muted2); font-size:var(--font-eyebrow,14px); } .sbt-legend-items{ display:flex; flex-direction:column; gap:5px; } .sbt-lg{ display:flex; align-items:center; gap:9px; width:100%; font:inherit; font-size:var(--font-helper,15px); font-weight:700; color:var(--text); background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:9px; padding:7px 10px; cursor:pointer; text-align:left; transition:.14s; } .sbt-lg:hover{ border-color:rgba(76,141,255,.4); } .sbt-lg b{ margin-left:auto; font-size:var(--font-helper,15px); } .sbt-lg.off{ opacity:.42; } .sbt-lg.off .sbt-sw{ filter:grayscale(1); } .sbt-lg.pending{ cursor:default; opacity:.6; } .sbt-lg.pending:hover{ border-color:var(--line); } .sbt-sw{ width:12px; height:12px; border-radius:3px; flex:none; } .sbt-lg-n{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sbt-lg-pend{ margin-left:auto; font-size:var(--font-eyebrow,14px); font-weight:700; color:var(--muted); font-style:italic; } .sbt-insights{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); } .sbt-ins{ display:flex; gap:10px; align-items:flex-start; font-size:var(--font-helper,15px); line-height:1.5; color:var(--text); padding:6px 0; } .sbt-ins-dot{ width:8px; height:8px; border-radius:50%; margin-top:6px; flex:none; } .sbt-ins.green .sbt-ins-dot{ background:#2FBF71; } .sbt-ins.amber .sbt-ins-dot{ background:#F0A93B; } .sbt-ins.red .sbt-ins-dot{ background:#F1594E; } .sbt-ins.blue .sbt-ins-dot{ background:#4C8DFF; } .sbt-ins b{ color:var(--text); } @media (max-width:1080px){ .sbt-legend{ flex-basis:100%; max-width:none; } .sbt-legend-items{ flex-direction:row; flex-wrap:wrap; } .sbt-lg{ width:auto; } } /* ===== Vault Library (saved assessments) ===== */ .sbx-vault-note{ font-size:var(--font-helper,15px); color:var(--muted); line-height:1.55; max-width:820px; margin:2px 0 14px; } .sbx-vault-note b{ color:var(--text); } .sbx-vault-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; } .sbx-vault-btn{ font:inherit; font-size:var(--font-helper,15px); font-weight:800; color:var(--text); background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:11px; padding:9px 16px; cursor:pointer; transition:.15s; } .sbx-vault-btn:hover{ border-color:rgba(76,141,255,.5); background:rgba(76,141,255,.1); } .sbx-vault-btn.primary{ color:#fff; background:linear-gradient(135deg,#4C8DFF,#2f6fe0); border-color:transparent; } .sbx-vault-btn.primary:hover{ filter:brightness(1.08); } .sbx-vault-list{ display:flex; flex-direction:column; gap:8px; } .sbx-vault-lh{ font-size:var(--font-eyebrow,14px); font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:12px 0 4px; display:flex; align-items:center; gap:8px; } .sbx-vault-lh.arch{ color:var(--muted2); margin-top:20px; } .sbx-vault-count{ font-size:var(--font-eyebrow,14px); font-weight:800; color:#C6D6FF; background:rgba(76,141,255,.16); border-radius:20px; padding:1px 9px; } .sbx-vi{ display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.02); padding:12px 16px; } .sbx-vi.arch{ opacity:.6; } .sbx-vi-ic{ font-size:20px; flex:none; opacity:.85; } .sbx-vi-main{ flex:1; min-width:0; } .sbx-vi-t{ font-size:15px; font-weight:800; color:var(--text); } .sbx-vi-s{ font-size:var(--font-helper,15px); color:var(--muted); margin-top:2px; } .sbx-vi-actions{ display:flex; gap:8px; flex:none; } .sbx-vi-act{ font:inherit; font-size:var(--font-helper,15px); font-weight:800; color:var(--text); background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:9px; padding:6px 13px; cursor:pointer; transition:.15s; } .sbx-vi-act:hover{ border-color:rgba(76,141,255,.5); } .sbx-vi-act.open{ color:#fff; background:rgba(76,141,255,.2); border-color:rgba(76,141,255,.5); } .sbx-vi-act:disabled{ opacity:.6; cursor:default; } .sbx-vault-empty{ font-size:var(--font-helper,15px); color:var(--muted); line-height:1.55; background:rgba(255,255,255,.03); border:1px dashed var(--line); border-radius:12px; padding:16px 18px; } /* "Not scanned yet — scan the environment?" prompt (Service Health etc.) */ .sbx-scanprompt{ text-align:center; max-width:560px; margin:26px auto; padding:26px 28px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(135deg,rgba(76,141,255,.08),rgba(47,191,113,.04)); } .sbx-scanprompt-ic{ font-size:30px; color:#4C8DFF; margin-bottom:8px; } .sbx-scanprompt h3{ margin:0 0 8px; font-size:18px; font-weight:900; color:var(--text); } .sbx-scanprompt p{ margin:0 auto 16px; font-size:var(--font-helper,15px); color:var(--muted); line-height:1.55; max-width:460px; } .sbx-scanprompt-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; } .sbx-scanprompt-cancel{ font:inherit; font-size:var(--font-helper,15px); font-weight:800; color:var(--muted2); background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:var(--pill,20px); padding:8px 16px; cursor:pointer; } .sbx-scanprompt-cancel:hover{ color:#fff; border-color:rgba(255,255,255,.25); } /* ===== Executive Service Health (sb-servicehealth.js) ===== */ .sh-exec{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; background:linear-gradient(135deg,rgba(76,141,255,.08),rgba(47,191,113,.05)); border:1px solid var(--line); border-radius:16px; padding:18px 22px; margin:8px 0 14px; } .sh-exec-badge{ display:inline-flex; align-items:center; gap:9px; font-size:var(--dgf-body2,16px); font-weight:800; padding:8px 16px; border-radius:24px; } .sh-exec-badge.green{ color:var(--green); background:rgba(47,191,113,.12); } .sh-exec-badge.amber{ color:#F0A93B; background:rgba(240,169,59,.12); } .sh-exec-badge.red{ color:var(--red); background:rgba(241,89,78,.12); } .sh-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; } .sh-dot.green{ background:var(--green); } .sh-dot.amber{ background:#F0A93B; } .sh-dot.red{ background:var(--red); } .sh-exec-stats{ display:flex; gap:26px; flex-wrap:wrap; } .sh-stat{ display:flex; flex-direction:column; gap:2px; text-align:center; align-items:center; } .sh-stat-n{ font-size:var(--dgf-metric-val,28px); font-weight:900; color:var(--text); } .sh-stat-n.green{ color:var(--green); } .sh-stat-n.amber{ color:#F0A93B; } .sh-stat-n.red{ color:var(--red); } .sh-stat-l{ font-size:var(--dgf-metric-label,15px); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; } .sh-sub{ font-size:var(--dgf-body2,16px); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:16px 0 8px; } .sh-clear{ font-size:var(--dgf-body,17px); color:var(--green); background:rgba(47,191,113,.08); border:1px solid rgba(47,191,113,.28); border-radius:12px; padding:12px 16px; line-height:1.5; } .sh-clear.amber{ color:#F0A93B; background:rgba(240,169,59,.09); border-color:rgba(240,169,59,.32); font-weight:600; } .sh-issues{ display:flex; flex-direction:column; gap:10px; } .sh-issue{ border:1px solid var(--line); border-left:4px solid var(--line); border-radius:12px; background:rgba(255,255,255,.02); padding:14px 16px; } .sh-issue.red{ border-left-color:var(--red); } .sh-issue.amber{ border-left-color:#F0A93B; } .sh-issue-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:5px; } .sh-issue-cls{ font-size:var(--dgf-eyebrow,14px); font-weight:800; letter-spacing:.04em; padding:2px 9px; border-radius:20px; } .sh-issue-cls.red{ color:var(--red); background:rgba(241,89,78,.14); } .sh-issue-cls.amber{ color:#F0A93B; background:rgba(240,169,59,.14); } .sh-issue-svc{ font-size:var(--dgf-meta,15px); font-weight:700; color:var(--text); } .sh-issue-date{ font-size:var(--dgf-helper,15px); color:var(--muted); } .sh-issue-title{ font-size:var(--dgf-row-name,17px); font-weight:600; color:var(--text); line-height:1.45; } .sh-issue-status{ font-size:var(--dgf-helper,15px); color:var(--muted); margin-top:3px; } .sh-svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; } @media (max-width:900px){ .sh-svc-grid{ grid-template-columns:1fr; } } .sh-svc{ display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--line); border-radius:10px; padding:11px 15px; background:rgba(255,255,255,.02); } .sh-svc-name{ font-size:var(--dgf-row-name,17px); font-weight:600; color:var(--text); } .sh-svc-status{ display:inline-flex; align-items:center; gap:7px; font-size:var(--dgf-status,15px); font-weight:700; white-space:nowrap; } .sh-svc-status.green{ color:var(--green); } .sh-svc-status.amber{ color:#F0A93B; } .sh-svc-status.red{ color:var(--red); } .sh-svc-status.grey{ color:var(--muted2); } .sh-dot.grey{ background:var(--muted2); } .sh-stat-n.grey{ color:var(--muted2); } .sh-svc.grey{ opacity:.85; } .sh-exec-badge.grey{ color:var(--muted2); } .sh-note{ font-size:var(--dgf-helper,15px); color:var(--muted); line-height:1.6; margin-top:14px; } .sh-perm{ background:linear-gradient(160deg,rgba(76,141,255,.10),rgba(142,125,227,.05)); border:1px solid rgba(76,141,255,.28); border-radius:16px; padding:22px 24px; } .sh-perm-badge{ display:inline-block; font-size:var(--dgf-eyebrow,14px); font-weight:800; letter-spacing:.05em; color:#8FB0E0; background:rgba(76,141,255,.14); border:1px solid rgba(76,141,255,.3); border-radius:20px; padding:3px 12px; } .sh-perm-h{ margin:12px 0 8px; font-size:var(--dgf-card-h,20px); font-weight:800; color:var(--text); } .sh-perm-p{ margin:0 0 10px; font-size:var(--dgf-body,17px); color:var(--muted); line-height:1.6; } .sh-perm-p code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:var(--dgf-meta,15px); color:#DCE7FF; background:rgba(255,255,255,.06); padding:1px 6px; border-radius:6px; } .sh-perm-row{ margin-top:14px; } .sh-perm-btn{ background:linear-gradient(100deg,#4C8DFF,#3A7BF0); color:#fff; border:0; border-radius:11px; padding:12px 22px; font-weight:800; font-size:var(--dgf-btn,16px); cursor:pointer; box-shadow:0 8px 22px rgba(76,141,255,.4); transition:transform .16s; } .sh-perm-btn:hover{ transform:translateY(-1px); } /* Build-version self-heal banner (shown when a newer deploy is detected) */ .sbx-upd{ position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:400; display:flex; align-items:center; gap:14px; background:linear-gradient(100deg,#4C8DFF,#3A7BF0); color:#fff; border-radius:12px; padding:10px 14px 10px 18px; box-shadow:0 12px 34px rgba(0,0,0,.45); font-size:var(--font-helper,15px); font-weight:600; } .sbx-upd button{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4); color:#fff; font-weight:800; font-size:var(--font-helper,15px); border-radius:9px; padding:6px 14px; cursor:pointer; white-space:nowrap; } .sbx-upd button:hover{ background:rgba(255,255,255,.28); } /* ============================ CH.5 — IMPROVE ============================ */ .sbx-journey{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; margin:22px 0 8px; } .sbx-journey .jstep{ text-align:center; padding:0 26px; } .sbx-journey .jl{ font-size:var(--font-helper,15px); font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted2); } .sbx-journey .jv{ font-size:46px; font-weight:900; margin-top:4px; letter-spacing:-.03em; } .jv.now{color:var(--red)} .jv.bp{color:var(--amber)} .jv.nq{color:var(--blue2)} .jv.tg{color:var(--green)} .sbx-journey .jar{ color:var(--muted2); font-size:26px; } .sbx-hope{ text-align:center; font-size:22px; font-weight:800; margin-top:22px; letter-spacing:-.01em; } .sbx-hope span{ color:var(--green); } .sbx-hope-sub{ text-align:center; color:var(--muted); margin-top:8px; font-size:15px; } /* trajectory chart (Item #2) */ .sbx-trendchart{ margin-top:26px; padding:20px 22px 18px; border-radius:var(--radius); background:linear-gradient(180deg,var(--card),var(--card2)); border:1px solid var(--line); } .sbx-tc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:6px; } .sbx-tc-head h3{ font-size:16px; font-weight:800; } .sbx-tc-legend{ display:flex; gap:6px 14px; flex-wrap:wrap; } .sbx-tc-legend .lg{ font-size:var(--font-helper,15px); font-weight:700; color:var(--muted); display:inline-flex; align-items:center; gap:7px; } .sbx-tc-legend .lg::before{ content:""; width:16px; height:0; border-top-width:3px; border-top-style:solid; border-radius:2px; } .sbx-tc-legend .lg.you::before{ border-top-color:var(--lgc,#8FD3FF); border-top-style:solid; } .sbx-tc-legend .lg.bp::before{ border-top-color:var(--amber); border-top-style:dashed; } .sbx-tc-legend .lg.tg::before{ border-top-color:var(--green); border-top-style:dashed; } .sbx-tc-svg{ width:100%; height:auto; display:block; margin-top:4px; } .sbx-tc-note{ font-size:var(--font-helper,15px); color:var(--muted); margin-top:10px; line-height:1.5; } /* ============================ CH.6 — SECURITY & RISK ============================ */ .sbx-dgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px; } .sbx-dcard{ padding:18px; border-radius:15px; background:linear-gradient(180deg,var(--card),var(--card2)); border:1px solid var(--line); border-top:3px solid var(--muted2); transition:.16s; } .sbx-dcard:hover{ transform:translateY(-2px); } .sbx-dcard.red{border-top-color:var(--red)} .sbx-dcard.amber{border-top-color:var(--amber)} .sbx-dcard.green{border-top-color:var(--green)} .sbx-dc-top{ display:flex; align-items:center; justify-content:space-between; } .sbx-dc-top .nm{ font-weight:800; font-size:15px; } .sbx-dc-top .gr{ font-weight:900; font-size:14px; padding:2px 10px; border-radius:7px; } .sbx-dc-top .gr.red{ background:rgba(241,89,78,.16); color:var(--red);} .gr.amber{ background:rgba(240,169,59,.16); color:var(--amber);} .gr.green{ background:rgba(47,191,113,.16); color:var(--green);} .sbx-dc-tech{ font-size:var(--font-helper,15px); color:var(--muted2); margin-top:4px; } .sbx-dc-sw{ font-size:var(--font-helper,15px); color:var(--muted); font-style:italic; margin-top:9px; line-height:1.45; } .sbx-dc-score{ font-size:var(--font-helper,15px); color:var(--muted2); margin-top:9px; } /* ============================ GOVERNANCE CAPABILITY PANELS ============================ The rich legacy views (Licensing, Policies, Insurance, AI Governance, Trend) are relocated INTO the panel — the single element is moved here, so every id and handler is preserved; we only restyle it to sit in-flow and drop its modal chrome, so it reads as part of the same design system as the briefing tabs. */ .sbx-caphost{ margin-top:20px; } .sbx-caphost-load{ padding:22px; } .sbx-hosted{ position:static !important; inset:auto !important; display:block !important; width:auto !important; height:auto !important; max-width:none !important; max-height:none !important; background:transparent !important; box-shadow:none !important; border:0 !important; padding:0 !important; margin:0 !important; z-index:auto !important; overflow:visible !important; animation:none !important; } /* hide the legacy modal chrome — the sbx question header + back-nav replace it */ .sbx-hosted .policy-head, .sbx-hosted .lic-overlay-head, .sbx-hosted .aigov-close, .sbx-hosted .aigov-title{ display:none !important; } /* flatten the inner card boxes and strip their padding / centering */ .sbx-hosted .lic-overlay-card, .sbx-hosted .aigov-modal{ background:transparent !important; border:0 !important; box-shadow:none !important; max-width:none !important; width:100% !important; max-height:none !important; padding:0 !important; margin:0 !important; overflow:visible !important; } .sbx-hosted .policy-body, .sbx-hosted .lic-overlay-body, .sbx-hosted .aigov-body{ padding:0 !important; max-width:none !important; margin:0 !important; overflow:visible !important; } .sbx-hosted .aigov-sub{ color:var(--muted); font-size:var(--font-helper,15px); line-height:1.5; margin-bottom:16px; } /* preview panel for a capability the tenant doesn't own yet */ .sbx-cap-preview{ margin-top:20px; padding:24px; border-radius:var(--radius); background:linear-gradient(180deg,var(--card),var(--card2)); border:1px dashed rgba(142,125,227,.45); } .sbx-cap-preview-badge{ display:inline-block; font-size:var(--font-eyebrow,14px); font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#C6BAF6; background:rgba(142,125,227,.16); border:1px solid rgba(142,125,227,.5); padding:4px 12px; border-radius:var(--pill); } .sbx-cap-preview-lead{ font-size:16px; color:var(--ink); margin:14px 0 2px; line-height:1.5; } .sbx-cap-preview-list{ margin:12px 0 20px; padding:0; list-style:none; display:grid; gap:10px; } .sbx-cap-preview-list li{ position:relative; padding-left:26px; color:var(--muted); font-size:15px; line-height:1.45; } .sbx-cap-preview-list li::before{ content:"✓"; position:absolute; left:0; top:-1px; color:var(--green); font-weight:900; } /* launch cards (Board Deck / Reports) */ .sbx-launch-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:20px; } .sbx-launch{ text-align:left; padding:22px; border-radius:var(--radius); background:linear-gradient(180deg,var(--card),var(--card2)); border:1px solid var(--line); cursor:pointer; transition:.16s; color:inherit; width:100%; } .sbx-launch:hover{ transform:translateY(-3px); border-color:rgba(76,141,255,.5); box-shadow:0 12px 30px rgba(0,0,0,.35); } .sbx-launch-top{ display:flex; align-items:center; justify-content:space-between; } .sbx-launch h4{ font-size:17px; font-weight:800; } .sbx-launch-dot{ width:9px; height:9px; border-radius:50%; } .sbx-launch-dot.green{ background:var(--green); } .sbx-launch-dot.blue{ background:var(--blue2); } .sbx-launch p{ font-size:var(--font-helper,15px); color:var(--muted); margin:9px 0 16px; line-height:1.45; } .sbx-launch-cta{ font-size:var(--font-helper,15px); font-weight:800; color:#C6D6FF; } /* "More" scroll affordance — appears when the view overflows the viewport */ .sbx-more{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(10px); z-index:40; display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:var(--pill); cursor:pointer; background:rgba(76,141,255,.11); border:1px solid rgba(76,141,255,.34); color:#DCE7FF; font-weight:800; font-size:var(--font-helper,15px); letter-spacing:.05em; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 8px 22px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease, background .2s ease; } .sbx-more.show{ opacity:.55; transform:translateX(-50%) translateY(0); pointer-events:auto; } /* translucent so it doesn't obscure text behind it */ .sbx-more.show:hover{ opacity:1; background:rgba(76,141,255,.26); border-color:rgba(143,211,255,.7); } .sbx-more-arrow{ font-size:var(--font-helper,15px); line-height:1; animation:sbxMoreBounce 1.5s ease-in-out infinite; } @keyframes sbxMoreBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(3px); } } /* ============================ EXECUTIVE QUESTIONS & INSIGHTS ============================ A knowledge center accordion: collapsible topics (one open) → question cards (one expanded). Premium, calm, keyboard-accessible; matches the shell design system. */ .sbi-wrap{ margin-top:20px; } .sbi-intro{ font-size:14px; color:var(--muted); margin-bottom:16px; } .sbi-topic{ border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg,var(--card),var(--card2)); margin-bottom:12px; overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease; } .sbi-topic.open{ border-color:rgba(76,141,255,.4); box-shadow:0 10px 30px rgba(0,0,0,.28); } .sbi-thead{ display:flex; align-items:center; gap:16px; width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:18px 20px; color:inherit; } .sbi-tnum{ flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-weight:900; font-size:14px; color:var(--blue2); background:rgba(76,141,255,.12); border:1px solid rgba(76,141,255,.3); font-variant-numeric:tabular-nums; } .sbi-tmeta{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; } .sbi-ttitle{ font-size:17px; font-weight:800; letter-spacing:-.01em; } .sbi-tsub{ font-size:var(--font-helper,15px); color:var(--muted2); } .sbi-tchev{ flex:none; font-size:20px; color:var(--muted2); transition:transform .3s var(--ease), color .2s ease; } .sbi-topic.open .sbi-tchev{ transform:rotate(180deg); color:var(--blue2); } .sbi-thead:hover .sbi-ttitle{ color:#fff; } .sbi-tbody{ max-height:0; overflow:hidden; transition:max-height .32s var(--ease); } .sbi-tbody-inner{ padding:0 20px 18px 20px; } .sbi-qlist{ display:flex; flex-direction:column; gap:10px; } .sbi-qcard{ border:1px solid var(--line2); border-radius:12px; background:rgba(255,255,255,.02); overflow:hidden; transition:border-color .2s ease, background .2s ease; } .sbi-qcard.open{ border-color:rgba(76,141,255,.35); background:rgba(76,141,255,.05); } .sbi-qhead{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:13px 16px; color:inherit; } .sbi-qtext{ flex:1; font-size:14.5px; font-weight:700; color:var(--ink); } .sbi-qchev{ flex:none; font-size:16px; color:var(--muted2); transition:transform .3s var(--ease), color .2s ease; } .sbi-qcard.open .sbi-qchev{ transform:rotate(180deg); color:var(--blue2); } .sbi-qbody{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); } .sbi-qbody-inner{ padding:0 16px 16px 16px; } .sbi-answer{ margin:0; font-size:14px; line-height:1.6; color:var(--muted); } .sbi-note{ margin-top:12px; padding:12px 14px; border-radius:11px; border-left:3px solid; display:flex; flex-direction:column; gap:3px; } .sbi-note-lbl{ font-size:var(--font-eyebrow,14px); font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .sbi-note-txt{ font-size:var(--font-helper,15px); line-height:1.5; color:var(--ink); } .sbi-note.board{ background:rgba(76,141,255,.09); border-left-color:var(--blue); } .sbi-note.board .sbi-note-lbl{ color:var(--blue2); } .sbi-note.tip{ background:rgba(47,191,113,.09); border-left-color:var(--green); } .sbi-note.tip .sbi-note-lbl{ color:var(--green); } .sbi-note.why{ background:rgba(240,169,59,.09); border-left-color:var(--amber); } .sbi-note.why .sbi-note-lbl{ color:#F1CE63; } .sbi-key{ margin-top:12px; padding:14px 16px; border-radius:12px; background:linear-gradient(100deg,rgba(76,141,255,.12),rgba(142,125,227,.07)); border:1px solid rgba(76,141,255,.3); font-size:14px; line-height:1.5; color:#EAF0FA; } .sbi-key-lbl{ display:block; font-size:var(--font-eyebrow,14px); font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--blue2); margin-bottom:4px; } .sbi-reserved{ font-size:14px; color:var(--muted); line-height:1.6; } /* Planned Enhancements — restrained executive status markers (no novelty icons) */ .sbi-pe-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-bottom:11px; padding-bottom:11px; border-bottom:1px solid rgba(140,160,190,.16); } .sbi-pe-badge{ font-size:var(--font-eyebrow,14px); font-weight:800; letter-spacing:.09em; text-transform:uppercase; padding:3px 10px; border-radius:999px; border:1px solid; } .sbi-pe-badge.hz-now{ color:#8FE3B4; background:rgba(47,191,113,.1); border-color:rgba(47,191,113,.4); } .sbi-pe-badge.hz-next{ color:#B9D0FF; background:rgba(76,141,255,.1); border-color:rgba(76,141,255,.42); } .sbi-pe-badge.hz-future{ color:#D9C7F5; background:rgba(142,125,227,.12); border-color:rgba(142,125,227,.42); } .sbi-pe-badge.hz-vision{ color:#AEBCCE; background:rgba(150,168,196,.1); border-color:rgba(150,168,196,.36); } .sbi-pe-kv{ font-size:var(--font-eyebrow,14px); color:var(--muted); letter-spacing:.01em; } .sbi-pe-k{ font-weight:800; text-transform:uppercase; font-size:var(--font-eyebrow,14px); letter-spacing:.1em; color:#7E8FA8; margin-right:5px; } .sbi-pe-body{ display:block; } .sbi-reserved ul{ margin:10px 0 0; padding-left:20px; } .sbi-reserved li{ margin:5px 0; color:var(--ink); } /* ============================ THE UNVEILING (the reveal) ============================ A STATIC clip-path octagon shell with a SPINNING VerityPoint coin, wrapped in a volumetric ambient halo and a slow energy ring. The real dashboard blurs behind it (#sbxShell) and resolves into focus on completion (.clearing). */ /* (v3.25.0) STACKED, not overlaid. The octagon used to be grid-centred in the viewport while the caption was absolutely pinned near the bottom — so on a short window the two collided and the title ran straight through the mark (see Johnnie's screenshot). A flex COLUMN with a real gap makes the collision structurally impossible at any viewport height, instead of tuning an offset and hoping. */ .sbx-unveil{ position:fixed; inset:0; z-index:150; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(1.75rem, 4.5vh, 3.25rem); padding:clamp(1.5rem, 5vh, 4rem) 1.5rem; background:radial-gradient(circle at 50% 46%, rgba(18,96,190,.14), transparent 42%); } .sbx-unveil.clearing{ pointer-events:none; } .sbx-unveil-scrim{ position:absolute; inset:0; z-index:0; background:radial-gradient(circle at 50% 46%, rgba(4,9,20,.93), rgba(2,5,12,.985) 78%); transition:opacity 1.2s ease; } .sbx-unveil.clearing .sbx-unveil-scrim{ opacity:0; } /* ── The scan: SignalBoard octagon + concentric signal rings + radar sweep, drawn in the brand blue→green gradient on the deep field. Pure SVG/CSS. ── */ .sbx-scan{ position:relative; width:min(30rem,42vw); min-width:19rem; aspect-ratio:1; display:grid; place-items:center; z-index:4; transition:opacity 1s ease, transform 1s ease; } .sbx-unveil.clearing .sbx-scan{ opacity:0; transform:scale(.94); } /* ambient brand glow behind the octagon, gently breathing */ .sbx-scan-halo{ position:absolute; inset:-24%; border-radius:50%; z-index:0; transition:opacity 1s ease; background:radial-gradient(circle, rgba(76,141,255,.30) 0%, rgba(47,191,113,.15) 34%, rgba(23,141,255,.05) 56%, transparent 72%); filter:blur(26px); animation:sbxScanHalo 5.5s ease-in-out infinite; } /* radar sweep — a rotating conic beam, masked to the octagon so it stays inside */ .sbx-scan-sweep{ position:absolute; inset:0; z-index:1; overflow:hidden; opacity:.85; transition:opacity 1s ease; clip-path:polygon(30% 3%,70% 3%,97% 30%,97% 70%,70% 97%,30% 97%,3% 70%,3% 30%); } .sbx-scan-sweep::before{ content:""; position:absolute; inset:-25%; transform-origin:50% 50%; animation:sbxSweep 3.4s linear infinite; background:conic-gradient(from 0deg, transparent 0deg, transparent 296deg, rgba(76,141,255,.04) 312deg, rgba(76,141,255,.26) 344deg, rgba(47,191,113,.5) 360deg); } .sbx-unveil.clearing .sbx-scan-halo,.sbx-unveil.clearing .sbx-scan-sweep{ opacity:0; } /* the SVG: gradient octagon outline, pulsing signal rings, vertex nodes, live core */ .sbx-scan-svg{ position:relative; width:100%; height:100%; z-index:2; overflow:visible; } .sbx-octa{ fill:none; stroke:url(#sbxScanG); stroke-width:2.5; stroke-linejoin:round; filter:drop-shadow(0 0 7px rgba(76,141,255,.55)); stroke-dasharray:1360; stroke-dashoffset:1360; animation:sbxOctaDraw 1.5s cubic-bezier(.22,1,.36,1) forwards, sbxOctaBreath 4.5s ease-in-out 1.5s infinite; } .sbx-ring{ fill:none; stroke:url(#sbxScanG); stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center; animation:sbxSignal 3s cubic-bezier(.4,0,.2,1) infinite; } .sbx-ring:nth-child(2){ animation-delay:1s; } .sbx-ring:nth-child(3){ animation-delay:2s; } .sbx-node{ fill:#EAF2FF; opacity:.22; transform-box:fill-box; transform-origin:center; filter:drop-shadow(0 0 4px rgba(76,141,255,.75)); animation:sbxNode 3s ease-in-out infinite; animation-delay:var(--d,0s); } .sbx-core{ fill:url(#sbxScanG); transform-box:fill-box; transform-origin:center; filter:drop-shadow(0 0 9px rgba(47,191,113,.7)); animation:sbxCore 3s ease-in-out infinite; } /* caption */ /* Now a flow sibling of the mark (not absolutely pinned), so the gap on .sbx-unveil guarantees clear air between the octagon and the title. */ .sbx-unveil-caption{ position:relative; width:min(88vw,58rem); text-align:center; z-index:6; flex:0 0 auto; transition:opacity 1.2s ease; } .sbx-unveil.clearing .sbx-unveil-caption{ opacity:0; } .sbx-unveil-title{ font-size:clamp(2rem,3vw,3rem); font-weight:800; letter-spacing:-.03em; color:#e4eefb; /* fallback where background-clip:text is unsupported */ background:linear-gradient(100deg,#b9d0ee 0%,#b9d0ee 34%,#ffffff 50%,#b9d0ee 66%,#b9d0ee 100%); background-size:230% 100%; background-position:120% 0; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 8px 24px rgba(0,0,0,.6)); animation:sbxTitleSweep 5s ease-in-out infinite alternate; } @keyframes sbxTitleSweep{ from{ background-position:120% 0; } to{ background-position:-30% 0; } } .sbx-unveil-sub{ margin-top:.75rem; color:rgba(225,237,255,.80); font-size:clamp(1rem,1.35vw,1.2rem); line-height:1.45; } /* animated ellipsis appended to the subtitle while a scan runs — three fixed-slot dots that fade in sequentially so the sentence itself never shifts */ .sbx-dots{ display:inline-block; white-space:nowrap; } .sbx-dots i{ font-style:normal; opacity:0; animation:sbxDot 1.4s steps(1,end) infinite; } .sbx-dots i:nth-child(2){ animation-delay:.25s; } .sbx-dots i:nth-child(3){ animation-delay:.5s; } @keyframes sbxDot{ 0%{ opacity:0; } 18%,72%{ opacity:1; } 88%,100%{ opacity:0; } } @keyframes sbxSweep{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @keyframes sbxSignal{ 0%{ transform:scale(.1); opacity:0; } 10%{ opacity:.75; } 100%{ transform:scale(1); opacity:0; } } @keyframes sbxOctaDraw{ to{ stroke-dashoffset:0; } } @keyframes sbxOctaBreath{ 0%,100%{ opacity:.6; } 50%{ opacity:1; } } @keyframes sbxNode{ 0%,100%{ opacity:.2; transform:scale(.82); } 50%{ opacity:1; transform:scale(1.1); } } @keyframes sbxCore{ 0%,100%{ opacity:.72; transform:scale(.88); } 50%{ opacity:1; transform:scale(1.18); } } @keyframes sbxScanHalo{ 0%,100%{ transform:scale(.95); opacity:.7; } 50%{ transform:scale(1.06); opacity:1; } } /* ============================ RESPONSIVE ============================ */ @media (max-width:1320px){ .sbx-rail{ display:none; } } /* keep topbar clean before it crowds */ @media (max-width:1180px){ .sbx-context{ display:none; } } @media (max-width:1080px){ .sbx-cap-grid{ grid-template-columns:repeat(2,1fr); } .sbx-dgrid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:960px){ .sbx-why{ grid-template-columns:1fr; gap:22px; } .sbx-cockpit{ grid-template-columns:repeat(3,1fr); } .sbx-caps .sbx-cap2.off{ display:none; } } @media (max-width:720px){ .sbx-topbar{ padding:10px 16px; gap:10px; flex-wrap:wrap; } .sbx-tabs{ padding:12px 14px 14px; } .sbx-panel{ padding:12px 16px 80px; } .sbx-cockpit{ grid-template-columns:repeat(2,1fr); } .sbx-cap-grid,.sbx-dgrid,.sbx-launch-grid{ grid-template-columns:1fr; } .sbx-grade{ width:104px;height:104px;font-size:58px; } .sbx-num{ font-size:64px; } /* was .sbx-verwrap — that element is gone; the meta now lives in the badge. */ .sbx-meta,.sbx-vp{ display:none; } .sbx-scan{ width:74vw; min-width:15rem; } .sbx-unveil-caption{ bottom:2.4rem; } } /* ============================ REDUCED MOTION ============================ */ @media (prefers-reduced-motion:reduce){ .sbx-panel.sbx-anim-fwd,.sbx-panel.sbx-anim-back, .sbx-reveal[data-reveal] > *,.sbx-grade,.sbx-octa-hero svg, .sbx-cta.glow,.sbx-hmenu.open, .sbx-scan-sweep::before,.sbx-scan-halo,.sbx-ring,.sbx-node,.sbx-core,.sbx-octa,.sbx-more-arrow,.sbx-unveil-title{ animation:none !important; } .sbx-octa{ stroke-dashoffset:0 !important; } .sbx-ring{ opacity:.28 !important; transform:scale(.66); } .sbx-dots i{ opacity:1 !important; animation:none !important; } .sbi-tbody,.sbi-qbody,.sbi-tchev,.sbi-qchev{ transition:none !important; } .sbx-reveal[data-reveal] > *{ opacity:1 !important; } #sbxShell{ transition:none !important; } body.sbx-unveiling #sbxShell{ filter:none; transform:none; opacity:1; } } /* Partial-scan consent call-to-action (Why This Score). Empty spokes are a dead end — the fix is always the same, so the action leads. (2026-07-13) */ .sbx-consent-cta{ margin:0 0 18px; padding:16px 18px; border-radius:var(--radius); border:1px solid rgba(240,169,59,.42); background:linear-gradient(180deg,rgba(240,169,59,.10),rgba(240,169,59,.03)); } .sbx-consent-cta .sbx-cc-h{ font-size:14.5px; font-weight:900; color:var(--amber); letter-spacing:.01em; } .sbx-consent-cta .sbx-cc-b{ margin-top:7px; color:var(--muted); font-size:14px; line-height:1.5; } .sbx-consent-cta .sbx-cta{ margin-top:13px; } /* SPACING PASS (v2.91.7) — the graph is the focus, not the prose. Every horizontal band above the chart pushes the only thing that matters further below the fold. These are the bands, compressed. Nothing was deleted; it is the same content, closer together. */ .sbx-panel .sbt{ margin-top:6px; } .sbt-head{ margin-bottom:6px; } .sbt-sub{ margin-top:2px; } .sbt-pullbar{ margin:6px 0; } .sbt-modes{ margin:8px 0 6px; } .sbt-refnote{ margin-top:8px; } .sbt-insights{ margin-top:14px; } .sbx-journey{ margin:10px 0 8px; } .sbx-hope{ margin-top:8px; } .sbx-hope-sub{ margin-top:3px; margin-bottom:2px; } /* ============================================================================ EXECUTIVE MICROSOFT PORTFOLIO (v2.92.0) — sb-portfolio.js Reads as a product CATALOG, not a licence report. Tiles you scan, not rows you audit. The technical tables still live below it, unchanged. ========================================================================== */ .sbp{ margin:6px 0 22px; } .sbp-head h3{ margin:0; font-size:19px; font-weight:650; letter-spacing:-.01em; color:var(--text,#e7ecf3); } .sbp-sub{ margin-top:3px; font-size:var(--font-helper,15px); color:#93a4c4; } /* Summary — the headline an exec repeats in a meeting */ .sbp-summary{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin:14px 0 18px; } .sbp-sum{ background:rgba(14,26,51,.5); border:1px solid rgba(86,200,232,.14); border-radius:12px; padding:12px 14px; } .sbp-sum b{ display:block; font-size:26px; font-weight:700; line-height:1.1; } .sbp-sum span{ display:block; margin-top:3px; font-size:var(--font-eyebrow,14px); line-height:1.4; color:#93a4c4; } .sbp-sum.owned b{ color:#4C8DFF; } .sbp-sum.incl b{ color:#2FBF71; } .sbp-sum.sleep b{ color:#F0A93B; } .sbp-sum.none b{ color:#7e93b4; } .sbp-sum.unk b{ color:#8FA0BF; } /* THE RIBBON — the wow. Amber, because it is money already spent. */ .sbp-ribbon{ background:linear-gradient(180deg, rgba(240,169,59,.10), rgba(240,169,59,.03)); border:1px solid rgba(240,169,59,.36); border-radius:14px; padding:16px 18px; margin-bottom:20px; } .sbp-ribbon-h{ font-size:var(--font-helper,15px); font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:#F0A93B; } .sbp-ribbon-p{ margin:6px 0 12px; font-size:var(--font-helper,15px); line-height:1.6; color:#cfe3f5; max-width:76ch; } .sbp-ribbon-items{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:8px; } .sbp-rib{ display:flex; align-items:center; gap:10px; text-align:left; padding:10px 11px; cursor:pointer; background:rgba(10,18,36,.5); border:1px solid rgba(240,169,59,.26); border-radius:10px; color:#e7ecf3; font:inherit; transition:border-color .14s ease, transform .14s ease; } .sbp-rib:hover{ border-color:#F0A93B; transform:translateY(-1px); } .sbp-rib b{ display:block; font-size:var(--font-helper,15px); } .sbp-rib-b{ display:block; font-size:var(--font-eyebrow,14px); color:#93a4c4; margin-top:1px; } .sbp-rib-v{ margin-left:auto; flex-shrink:0; font-size:var(--font-eyebrow,14px); font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#F0A93B; border:1px solid rgba(240,169,59,.4); border-radius:999px; padding:2px 7px; } /* Category blocks */ .sbp-cat{ margin-bottom:22px; } .sbp-cat-h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; border-bottom:1px solid rgba(86,200,232,.14); padding-bottom:6px; } .sbp-cat-h h4{ margin:0; font-size:15px; font-weight:650; color:#e7ecf3; } .sbp-cat-n{ font-size:var(--font-eyebrow,14px); color:#7e93b4; font-variant-numeric:tabular-nums; } .sbp-cat-b{ margin:5px 0 10px; font-size:var(--font-helper,15px); color:#7e93b4; } .sbp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(252px,1fr)); gap:9px; } .sbp-tile{ display:flex; gap:11px; align-items:flex-start; text-align:left; padding:12px; background:rgba(14,26,51,.42); border:1px solid rgba(86,200,232,.13); border-radius:12px; color:#e7ecf3; font:inherit; cursor:pointer; transition:border-color .14s ease, transform .14s ease, background .14s ease; } .sbp-tile:hover{ border-color:rgba(86,200,232,.5); transform:translateY(-1px); background:rgba(14,26,51,.62); } .sbp-tile[aria-expanded="true"]{ border-color:#56c8e8; background:rgba(20,38,70,.7); } .sbp-tile:focus-visible{ outline:2px solid #56c8e8; outline-offset:2px; } .sbp-mark{ flex-shrink:0; width:34px; height:34px; border-radius:9px; border:1px solid; display:flex; align-items:center; justify-content:center; font-size:var(--font-helper,15px); font-weight:800; letter-spacing:.4px; } .sbp-body{ min-width:0; flex:1; } .sbp-name{ display:block; font-size:var(--font-helper,15px); font-weight:600; } .sbp-blurb{ display:block; font-size:var(--font-eyebrow,14px); line-height:1.45; color:#93a4c4; margin-top:2px; } .sbp-foot{ display:flex; align-items:center; gap:8px; margin-top:7px; } .sbp-status{ font-size:var(--font-eyebrow,14px); font-weight:700; letter-spacing:.5px; text-transform:uppercase; border-radius:999px; padding:2px 8px; border:1px solid; } .sbp-seats{ font-size:var(--font-eyebrow,14px); color:#7e93b4; font-variant-numeric:tabular-nums; } .sbp-included .sbp-status{ color:#2FBF71; border-color:rgba(47,191,113,.45); background:rgba(47,191,113,.10); } .sbp-licensed .sbp-status{ color:#4C8DFF; border-color:rgba(76,141,255,.45); background:rgba(76,141,255,.10); } .sbp-disabled .sbp-status{ color:#F0A93B; border-color:rgba(240,169,59,.45); background:rgba(240,169,59,.10); } .sbp-not-licensed{ opacity:.62; } .sbp-not-licensed .sbp-status{ color:#8493a8; border-color:rgba(132,147,168,.35); } .sbp-unknown{ opacity:.72; } .sbp-unknown .sbp-status{ color:#8FA0BF; border-color:rgba(143,160,191,.35); } /* Detail — expands in place, under its own category. A modal would rip the exec out of the catalog they are browsing, and browsing IS the feature. */ .sbp-slot:empty{ display:none; } .sbp-detail{ margin-top:10px; background:rgba(10,18,36,.66); border:1px solid rgba(86,200,232,.28); border-radius:12px; padding:16px 18px; } .sbp-d-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; } @media (max-width:900px){ .sbp-d-grid{ grid-template-columns:1fr; gap:14px; } } .sbp-d-h{ font-size:var(--font-eyebrow,14px); font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:#56c8e8; margin:12px 0 5px; } .sbp-d-h:first-child{ margin-top:0; } .sbp-detail p{ margin:0; font-size:var(--font-helper,15px); line-height:1.62; color:#cfe3f5; } .sbp-chips{ display:flex; flex-wrap:wrap; gap:5px; } .sbp-chip{ font-size:var(--font-eyebrow,14px); color:#cfe3f5; background:rgba(86,200,232,.10); border:1px solid rgba(86,200,232,.24); border-radius:999px; padding:3px 9px; } .sbp-verdict{ padding:10px 12px; border-radius:9px; border-left:3px solid; } .sbp-v-included{ border-color:#2FBF71; background:rgba(47,191,113,.07); } .sbp-v-licensed{ border-color:#4C8DFF; background:rgba(76,141,255,.07); } .sbp-v-disabled{ border-color:#F0A93B; background:rgba(240,169,59,.07); } .sbp-v-not-licensed,.sbp-v-unknown{ border-color:#5a6a80; background:rgba(90,106,128,.07); } .sbp-note{ margin-top:10px!important; font-size:var(--font-helper,15px)!important; color:#93a4c4!important; font-style:italic; } .sbp-doc{ display:inline-block; margin-top:12px; font-size:var(--font-helper,15px); color:#56c8e8; text-decoration:none; border-bottom:1px solid rgba(86,200,232,.35); } .sbp-doc:hover{ border-bottom-color:#56c8e8; } .sbp-basis{ margin:6px 0 0; font-size:var(--font-eyebrow,14px); line-height:1.6; color:#7e93b4; } .sbp-basis code{ background:rgba(86,200,232,.10); padding:1px 5px; border-radius:4px; font-size:var(--font-eyebrow,14px); } /* THE ONE-GLANCE REASON on a domain row (2026-07-14). "Action needed" told Johnnie seven times that something was wrong and not once WHAT. The row that mattered — a domain about to lapse — looked identical to a missing DKIM record. This is the fix: one to three words, the worst thing only. */ .dg-areason{ font-size:var(--font-helper,15px);font-weight:700;letter-spacing:.2px; padding:3px 9px;border-radius:99px;white-space:nowrap;margin-left:2px } .dg-areason.red{ background:rgba(226,85,106,.14);color:#ff9aa7;border:1px solid rgba(226,85,106,.42) } /* Expiry is a deadline, not an opinion — it gets a heartbeat nothing else has. */ .dg-areason.red{animation:dg-reason-pulse 2.6s ease-in-out infinite} @keyframes dg-reason-pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(226,85,106,0)} 50% {box-shadow:0 0 0 4px rgba(226,85,106,.13)} } .dg-areason.amber{ background:rgba(240,160,75,.12);color:#f0b978;border:1px solid rgba(240,160,75,.34); animation:none } @media(prefers-reduced-motion:reduce){ .dg-areason.red{animation:none} } /* ASSESSMENT FRESHNESS — the age of what you are looking at, always stated. Silence about freshness is not neutral: it is a claim that the data is fresh. */ .sbx-fresh{ display:inline-flex; align-items:center; gap:6px; font-size:var(--font-eyebrow,14px); font-weight:700; padding:4px 10px; border-radius:var(--pill); white-space:nowrap; letter-spacing:.01em; } .sbx-fresh .dot{ width:6px; height:6px; border-radius:50%; flex:none; } .sbx-fresh small{ font-weight:600; opacity:.72; } .sbx-fresh.fresh{ color:#7ee2b8; background:rgba(47,191,113,.10); border:1px solid rgba(47,191,113,.30); } .sbx-fresh.fresh .dot{ background:#2FBF71; } .sbx-fresh.aging{ color:#f0b978; background:rgba(240,169,59,.10); border:1px solid rgba(240,169,59,.34); } .sbx-fresh.aging .dot{ background:#F0A93B; } /* Past 90 days you are reading last quarter's picture. It should feel like it. */ .sbx-fresh.stale{ color:#ff9aa7; background:rgba(241,89,78,.12); border:1px solid rgba(241,89,78,.42); } .sbx-fresh.stale .dot{ background:#F1594E; animation:sbx-fresh-pulse 2.6s ease-in-out infinite; } @keyframes sbx-fresh-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(241,89,78,0); } 50%{ box-shadow:0 0 0 4px rgba(241,89,78,.18); } } @media(prefers-reduced-motion:reduce){ .sbx-fresh.stale .dot{ animation:none; } } @media (max-width:1180px){ .sbx-fresh small{ display:none; } } /* THE SCAN BUTTON. The primary verb of the product; it should not live in a menu. */ .sbx-scanbtn{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; font:inherit; font-size:var(--font-helper,15px); font-weight:800; letter-spacing:.02em; color:#eaf3ff; padding:7px 14px; border-radius:var(--pill); background:linear-gradient(100deg,rgba(76,141,255,.22),rgba(86,200,232,.16)); border:1px solid rgba(86,200,232,.45); white-space:nowrap; transition:background .15s ease, border-color .15s ease, transform .1s ease; } .sbx-scanbtn:hover{ background:linear-gradient(100deg,rgba(76,141,255,.34),rgba(86,200,232,.26)); border-color:rgba(86,200,232,.75); } .sbx-scanbtn:active{ transform:translateY(1px); } .sbx-scanbtn .ic{ font-size:14px; line-height:1; } /* When the data is stale, the remedy should be the brightest thing in the bar. */ .sbx-top-right:has(.sbx-fresh.stale) .sbx-scanbtn, .sbx-top-right:has(.sbx-fresh.aging) .sbx-scanbtn{ background:linear-gradient(100deg,rgba(86,200,232,.30),rgba(76,141,255,.24)); border-color:rgba(86,200,232,.85); box-shadow:0 0 0 3px rgba(86,200,232,.10); } @media (max-width:1180px){ .sbx-scanbtn{ padding:7px 10px; } } /* The freshness chip is also a button — it names the staleness, so it should cure it. */ .sbx-fresh{ font-family:inherit; } .sbx-fresh.act{ cursor:pointer; transition:filter .15s ease, transform .1s ease, box-shadow .15s ease; } .sbx-fresh.act:hover{ filter:brightness(1.22); } .sbx-fresh.act:active{ transform:translateY(1px); } .sbx-fresh.act:focus-visible{ outline:2px solid var(--blue2); outline-offset:2px; } .sbx-fresh[disabled]{ cursor:default; opacity:.75; } /* 3.1.95 — AI assistant services on Service Health */ .sh-ai-link{margin-left:7px;color:inherit;opacity:.75;text-decoration:none;font-size:var(--font-helper,15px)} .sh-ai-link:hover{opacity:1;text-decoration:underline} /* 3.1.97 — AI assistant services: tabbed presentation (same .sbx-mp-t control as the Microsoft|Google selector) + provider content panel. GTCI tokens. */ .sh-ai-wrap{margin-top:26px;padding-top:22px;border-top:1px solid rgba(120,150,210,.14);text-align:center} .sh-ai-q{font-size:22px;font-weight:800;color:#eaf1fc;margin:2px 0 14px;letter-spacing:.01em} .sh-ai-bar{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:14px} .sh-ai-bar .sbx-mp-tabs{margin:0} .sh-ai-mk{display:inline-flex;align-items:center;font-size:17px;line-height:1} .sh-recheck{font-size:var(--font-helper,15px);font-weight:700;min-height:44px;padding:8px 16px;border:1px solid rgba(120,150,210,.35);border-radius:12px;background:rgba(18,28,50,.5);color:#8fb0ff;cursor:pointer;transition:.15s} .sh-recheck:hover{border-color:#5b8cff;color:#dbe4f2} .sh-recheck:disabled{opacity:.5;cursor:default} .sh-recheck:focus-visible{outline:2px solid #5b8cff;outline-offset:2px} .sh-ai-panel{text-align:left;border:1px solid rgba(120,150,210,.18);border-radius:14px;background:rgba(16,24,39,.4);padding:22px 26px;animation:sbxRise .3s ease both} /* 3.1.99: full-width — matches the Microsoft view (exec density); 980px cap was a 3.1.97 leftover */ .sh-ai-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px} .sh-ai-chip{display:inline-flex;align-items:center;gap:8px;font-size:var(--font-helper,15px);font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:7px 15px;border-radius:999px} .sh-ai-chip.green{background:rgba(47,191,113,.14);color:#7fe0a6;border:1px solid rgba(47,191,113,.45)} .sh-ai-chip.amber{background:rgba(240,169,59,.14);color:#f0c072;border:1px solid rgba(240,169,59,.45)} .sh-ai-chip.red{background:rgba(241,89,78,.14);color:#f2938a;border:1px solid rgba(241,89,78,.5)} .sh-ai-chip.grey{background:rgba(130,150,180,.12);color:#9fb0c8;border:1px solid rgba(130,150,180,.35)} .sh-ai-cts{font-size:var(--font-eyebrow,14px);font-weight:800;color:#9db6e0;background:rgba(91,140,255,.1);border:1px solid rgba(91,140,255,.3);border-radius:999px;padding:6px 14px} .sh-ai-meta{font-size:var(--font-helper,15px);color:#7f93b2} .sh-ai-plink{margin-left:auto;font-size:var(--font-helper,15px);font-weight:700;color:#8fb0ff;text-decoration:none} .sh-ai-plink:hover{color:#dbe4f2} .sh-ai-clear{font-size:16px;color:#7fe0a6;font-weight:700;padding:14px 0 4px} .sh-ai-issueline{font-size:16px;color:#dbe4f2;line-height:1.55;padding:12px 0 2px} .sh-ai-inc{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid rgba(120,150,210,.12)} .sh-ai-inc:first-of-type{border-top:0;margin-top:8px} .sh-ai-inc-n{font-size:16px;font-weight:700;color:#eaf1fc} .sh-ai-inc.resolved .sh-ai-inc-n{color:#9fb0c8;font-weight:600} .sh-ai-inc-m{font-size:var(--font-helper,15px);color:#8397b4;white-space:nowrap} .sh-ai-subh{font-size:var(--font-eyebrow,14px);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8fa6c6;margin:16px 0 2px} .sh-ai-basis{font-size:var(--font-helper,15px);color:#7f93b2;line-height:1.55;margin-top:14px;border-top:1px solid rgba(120,150,210,.12);padding-top:12px} .sh-ai-basis b{color:#9db6e0} .sh-ai-loading{font-size:16px;color:#8397b4;padding:10px 0} .sh-ai-unavail{padding:8px 0 4px} .sh-ai-unavail-h{font-size:18px;font-weight:800;color:#c9d6ea;margin-bottom:6px} .sh-ai-unavail-b{font-size:16px;color:#8397b4;line-height:1.55;margin-bottom:12px} /* 3.1.98 — unified Service Health selector (one row: MS | Google | AI providers) */ .sh-selwrap{margin:2px 0 0} .sh-selwrap .sh-ai-bar{margin:0 0 18px} #shSelTabs .sbx-mp-t{padding:13px 20px} .sh-panelhost{animation:sbxRise .3s ease both} .sh-panelhost .sbx-gsvc-h2{display:none} /* page h2 (#sbxSvcQ) already asks the question */ /* 3.1.99 — provider component chips (curated few, GTCI 15px) */ .sh-ai-comps{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 4px} .sh-ai-comp{display:inline-flex;align-items:center;gap:8px;font-size:var(--font-helper,15px);font-weight:700;color:#dbe4f2;border:1px solid rgba(120,150,210,.2);border-radius:999px;padding:8px 15px;background:rgba(18,28,50,.45)} .sh-ai-comp i{font-style:normal;color:#8397b4;font-weight:600}