/* V10 · Polish II — V8 polished further, one decision at a time. Round 1: the hero globe is gone; the empty half of the hero now replays a Threat Story, drawn as the console draws it (see "story hero"). Based on V8 · Refresh (polish) — the production homepage, same sections in the same order, same curves, bands and hexagons, with targeted fixes: product screens, a working emergency path, proof up top, honest capability copy, grouped client logos, named testimonials, and animation that means something. Red stays in the logo and the section rule only; CTAs move to white/navy. */ :root { --hdr: #3a4a8c; --navy: #0f1c4d; --navy-2: #172863; --band: #34488a; --band-2: #2d3f7e; --peri: #7084c7; --peri-d: #4f63ad; --peri-l: #aebcef; --lav: #e3e6f2; --lav-2: #eef0f8; --ink: #1f2747; --ink-2: #4c5578; --ink-3: #7b83a3; --red: #f23e45; --font: "Gotham Pro", "Montserrat", system-ui, sans-serif; --gut: clamp(20px, 4vw, 60px); --wrap: min(1170px, 100% - 2 * var(--gut)); --wide: min(1680px, 100% - 2 * var(--gut)); --logo-net: #374b8b; --logo-security: #f23e45; --logo-reg: #7084c7; --logo-threat: #f23e45; --logo-responder: #9b9da1; } body { background: #fff; color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.65; } .wrap { width: var(--wrap); margin-inline: auto; } .wide { width: var(--wide); margin-inline: auto; } .st { text-align: center; margin-bottom: 56px; } .st h2 { font-size: clamp(32px, 3vw, 48px); font-weight: 900; letter-spacing: -.01em; line-height: 1.12; color: var(--peri-d); } .st h2::after { content: ""; display: block; width: 90px; height: 4px; background: var(--red); margin: 22px auto 0; border-radius: 2px; } .st p { max-width: 760px; margin: 22px auto 0; color: var(--ink-2); font-size: 17px; } .on-dark .st h2 { color: #fff; } .on-dark .st p { color: #c8d0ee; } .btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 30px; border-radius: 999px; font-weight: 700; font-size: 15px; transition: transform .2s, box-shadow .2s, background .2s; white-space: nowrap; } .btn .pu-i { width: 17px; height: 17px; } .btn-w { background: #fff; color: var(--navy); box-shadow: 0 0 0 6px rgba(255, 255, 255, .14); } .btn-w:hover { transform: translateY(-2px); box-shadow: 0 0 0 8px rgba(255, 255, 255, .18); } .btn-g { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); } .btn-g:hover { background: rgba(255, 255, 255, .08); } .btn-n { background: var(--hdr); color: #fff; box-shadow: 0 0 0 6px rgba(58, 74, 140, .14); } .btn-n:hover { background: var(--band-2); } .sec { padding: clamp(80px, 8vw, 120px) 0; position: relative; } /* ---------- header: same slanted white logo plate + blue bar ---------- */ .hdr { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: minmax(260px, 28%) 1fr; background: var(--hdr); box-shadow: 0 6px 20px rgba(15, 28, 77, .25); } .plate { position: relative; display: flex; align-items: center; justify-content: flex-end; padding-right: 60px; background: linear-gradient(90deg, #dfe3ef, #fff 60%); clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); } .plate [data-logo] { width: 200px; } .hbar { padding: 0 max(var(--gut), calc((100vw - 1680px) / 2)) 0 40px; } .util { display: flex; justify-content: flex-end; align-items: center; gap: 28px; height: 50px; border-bottom: 1px solid rgba(255, 255, 255, .16); font-size: 14px; color: #c9d1f0; } .util a:hover { color: #fff; } .util .ua { color: #fff; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; } .util .ua::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(242, 62, 69, .25); } .util .ua b { color: var(--peri-l); font-weight: 600; } .util .pill { padding: 7px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); color: #fff; font-weight: 600; } .menu { display: flex; justify-content: flex-end; gap: 30px; height: 56px; align-items: center; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: #fff; } .menu a { display: inline-flex; align-items: center; gap: 6px; opacity: .92; } .menu a:hover { opacity: 1; color: var(--peri-l); } .menu a.dd::after { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); } /* ---------- hero ---------- */ .hero { position: relative; overflow: hidden; background: radial-gradient(70% 90% at 75% 40%, #1f3a8a, transparent 60%), linear-gradient(180deg, var(--navy), var(--navy-2)); color: #fff; padding: clamp(70px, 7vw, 110px) 0 0; } /* story hero: the Threat Story graph (chapter 1 initial access → ignition → chapter 2 detonation field), same grammar as the console: chamfered evidence cards, numbered step pills, dashed = correlated, thick coral = the execution path. Idle, it is a whitish ghost; the replay lights one step at a time. */ @property --k { syntax: ""; inherits: true; initial-value: rgba(215, 225, 255, .5); } .tsh { position: absolute; pointer-events: none; z-index: 0; } .tsh::before { content: ""; position: absolute; inset: -20px; z-index: -1; background-image: radial-gradient(rgba(174, 188, 239, .13) 1px, transparent 1.3px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(70% 70% at 55% 50%, #000 40%, transparent 100%); mask-image: radial-gradient(70% 70% at 55% 50%, #000 40%, transparent 100%); } .tsh svg { display: block; width: 100%; height: 100%; overflow: visible; } .tsh text { font-family: var(--font); } .tsh [data-s] { --k: rgba(215, 225, 255, .5); opacity: .34; transition: --k .9s ease, opacity .9s ease; } /* lit = middle intensity: the console colour mixed toward the ghost white; only the detonation stays strong */ .tsh [data-s].lit { --k: color-mix(in srgb, var(--c) 70%, #e4e9ff); opacity: .6; } .tsh .core.lit { --k: var(--c); opacity: .9; } .tsh .tr.lit, .tsh [data-k="tr"].lit { opacity: .8; } .tsh [data-k="tr"] .ic { color: #ff5a61; } .tsh .trw { fill: none; stroke: rgba(126, 166, 255, .5); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: tsh-watch 3.2s ease-out infinite; } @keyframes tsh-watch { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } } .tsh .burst { fill: none; stroke: #7ea6ff; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; } .tsh.det .burst { animation: tsh-burst 1.8s ease-out 1; } @keyframes tsh-burst { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } } .tsh.still .trw, .tsh.still .burst { animation: none; } .tsh .rg { fill: none; stroke: rgba(255, 111, 125, .16); stroke-width: 1.2; } .tsh .rg.a { stroke: rgba(66, 212, 208, .12); } .tsh .ig { stroke: rgba(255, 111, 125, .35); stroke-width: 1.2; stroke-dasharray: 3 5; } .tsh .igc { fill: none; stroke: rgba(255, 111, 125, .6); stroke-width: 1.4; } .tsh .igp rect { fill: rgba(255, 111, 125, .1); stroke: rgba(255, 111, 125, .35); } .tsh .igp text { fill: #ff9aa5; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-anchor: middle; } .tsh .chh { opacity: .55; } .tsh .chh line { stroke-width: 2; } .tsh .chh.a line, .tsh .chh.a .k { stroke: #42d4d0; fill: #42d4d0; } .tsh .chh.b line, .tsh .chh.b .k { stroke: #ff6f7d; fill: #ff6f7d; } .tsh .chh .k { stroke: none; font-size: 11px; font-weight: 800; letter-spacing: .12em; } .tsh .chh .h { fill: #fff; font-size: 18px; font-weight: 700; } .tsh .chh .s { fill: #9aa7d0; font-size: 11.5px; } .tsh .chh rect { fill: rgba(255, 255, 255, .05); stroke: rgba(174, 188, 239, .25); } .tsh .chh .t { fill: #c9d1f0; font-size: 10.5px; font-weight: 600; text-anchor: middle; } .tsh .zn { fill: rgba(174, 188, 239, .5); font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-anchor: middle; } .tsh .ep { fill: none; stroke: var(--k); stroke-linecap: round; } .tsh .ah { fill: var(--k); } .tsh .cf { fill: rgba(10, 19, 52, .66); stroke: var(--k); stroke-width: 1.3; } .tsh .cl { stroke: var(--k); stroke-opacity: .35; } .tsh .ic { color: var(--k); } .tsh .ck { fill: var(--k); font-size: 9px; font-weight: 800; letter-spacing: .12em; } .tsh .cn { fill: #fff; font-size: 13px; font-weight: 700; } .tsh .cp { fill: #8f9cc6; font-size: 9.5px; font-family: "JetBrains Mono", Consolas, monospace; } .tsh .cd { fill: #f5b94b; transition: fill .6s; } .tsh [data-k="tr"] .cd { fill: #7ea6ff; } .tsh.done [data-k="dll"] .cd, .tsh.done [data-k="task"] .cd, .tsh.done [data-k="tr"] .cd { fill: #54d39a; } .tsh.done [data-k="task"] .cn { text-decoration: line-through; } .tsh .core .halo { fill: rgba(255, 111, 125, .1); transform-box: fill-box; transform-origin: center; } .tsh .core.lit .halo { animation: tsh-halo 2.6s ease-out infinite; } .tsh.done .core .halo, .tsh.still .core .halo { animation: none; } @keyframes tsh-halo { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } } .tsh .core .orb { fill: none; stroke: var(--k); stroke-opacity: .45; stroke-width: 1.4; } .tsh .core .hx { fill: rgba(255, 111, 125, .12); stroke: var(--k); stroke-width: 2.4; } .tsh .core .tg { fill: rgba(255, 111, 125, .12); stroke: var(--k); stroke-opacity: .6; } .tsh .core .tgt { fill: var(--k); font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-anchor: middle; } .tsh .pl rect { fill: rgba(10, 19, 52, .88); stroke: var(--k); stroke-opacity: .5; } .tsh .pl circle { fill: var(--k); } .tsh .pn { fill: #0b1433; font-size: 10px; font-weight: 800; text-anchor: middle; } .tsh .pt { fill: #dfe6ff; font-size: 11px; font-weight: 600; } .tsh .pulse { filter: drop-shadow(0 0 6px currentColor); transition: opacity .3s; } .tsh .bar { opacity: .75; } .tsh .bar rect:first-child { fill: rgba(10, 19, 52, .6); stroke: rgba(174, 188, 239, .2); } .tsh .pb { fill: #5ea8ff; opacity: .9; } .tsh .pbi { fill: #fff; } .tsh .rd { fill: rgba(174, 188, 239, .22); transition: fill .4s; } .tsh .rd.on { fill: #5ea8ff; } .tsh.done .rd { fill: #54d39a; } .tsh .bk { fill: #8f9cc6; font-size: 9px; font-weight: 800; letter-spacing: .14em; } .tsh .bc { fill: #e9edfb; font-size: 12px; font-weight: 600; } /* membrane hero: threats in from the left, the shield with the logo, capabilities out on the right. Everything faint; the threat side only carries a muted rose. */ .tsv .ttl { fill: rgba(255, 255, 255, .5); font-size: 13px; font-weight: 700; transition: fill .6s; } .tsv .tsb { fill: rgba(174, 188, 239, .36); font-size: 8.6px; font-weight: 700; letter-spacing: .14em; } .tsv .ic { color: rgba(205, 218, 255, .5); transition: color .6s; } .tsv .ring { fill: rgba(10, 19, 52, .5); stroke: rgba(174, 200, 255, .32); stroke-width: 1.2; transition: stroke .6s, fill .6s; } .tsv .th .ring { stroke: rgba(255, 158, 172, .3); } .tsv .th .ic { color: rgba(255, 178, 188, .5); } .tsv .th.on .ring { stroke: rgba(255, 170, 182, .75); } .tsv .th.on .ic { color: rgba(255, 200, 206, .9); } .tsv .th.on .ttl, .tsv .cp.on .ttl { fill: rgba(255, 255, 255, .85); } .tsv .cp.on .ring { stroke: rgba(190, 212, 255, .8); fill: rgba(40, 60, 130, .5); } .tsv .cp.on .ic { color: rgba(225, 234, 255, .95); } .tsv .tl { fill: none; stroke: rgba(255, 158, 172, .26); stroke-width: 1.2; stroke-dasharray: 4 6; animation: tsv-flow 1.8s linear infinite; } @keyframes tsv-flow { to { stroke-dashoffset: -20; } } .tsv .tend { fill: rgba(255, 170, 182, .5); } .tsv .fb path { fill: none; stroke: rgba(150, 185, 255, .13); stroke-width: 1; transition: stroke .5s; } .tsv .fb.on path { stroke: rgba(175, 205, 255, .42); } .tsv .sh-main { fill: none; stroke: rgba(210, 225, 255, .5); stroke-width: 1.6; } .tsv .sh-in { fill: none; stroke: rgba(190, 210, 255, .2); stroke-width: 1; } .tsv .mesh-p { stroke: rgba(170, 200, 255, .15); stroke-width: .7; } .tsv .mesh { animation: tsv-breathe 6s ease-in-out infinite; } @keyframes tsv-breathe { 50% { opacity: .55; } } .tsv .speck { fill: rgba(200, 220, 255, .35); } .tsv .pa { fill: #ffd9de; opacity: .85; filter: drop-shadow(0 0 5px rgba(255, 170, 185, .8)); } .tsv .pa2 { fill: #ffd9de; opacity: .35; } .tsv .pb { fill: #e4ecff; opacity: .85; filter: drop-shadow(0 0 5px rgba(170, 200, 255, .9)); } .tsv .flare { fill: url(#tsvFlare); } .tsv .sh-halo { fill: none; stroke: rgba(110, 160, 255, .07); stroke-width: 34; } .tsv .sh-ring { fill: none; stroke: #b9ccff; stroke-width: 1; } .tsv .sh-rimglow { fill: none; stroke: rgba(150, 190, 255, .5); stroke-width: 6; } .tsv.v-membrane .sh-main { stroke: rgba(228, 236, 255, .7); stroke-width: 1.5; } .tsv.v-membrane .mesh-p { stroke: rgba(175, 205, 255, .2); stroke-width: .6; } .tsv .hot { animation: tsv-breathe 7s ease-in-out infinite; } /* the logo bent along the membrane; its glyph opacity pulses from the script */ .tsv .mlogo .tr1 { fill: #ff8e98; } .tsv .mlogo .tr2 { fill: #e4eaff; } .tsv .wlbl { fill: rgba(255, 190, 200, .55); font-size: 9.5px; font-weight: 800; letter-spacing: .18em; } .tsv .chip .ttl { fill: rgba(255, 255, 255, .7); } /* Quiet: Waves one notch fainter; capabilities a touch larger */ .tsv.v-quiet .chip > * { opacity: .55; } .tsv.v-quiet .chip .ttl { fill: rgba(255, 255, 255, .55); } .tsv.v-quiet .wlbl { fill: rgba(255, 190, 200, .38); } .tsv.v-quiet .pa2, .tsv.v-quiet .amb, .tsv.v-quiet .flare, .tsv.v-quiet .pb { opacity: .65; } .tsv.v-quiet svg > g[mask] { opacity: .8; } .tsv.v-quiet .mlogo { opacity: .78; } .tsv.v-quiet .cp .ttl { fill: rgba(255, 255, 255, .38); font-size: 14.5px; } .tsv.v-quiet .cp .tsb { fill: rgba(174, 188, 239, .26); font-size: 9.2px; } .tsv.v-quiet .cp .ring { stroke: rgba(174, 200, 255, .22); } .tsv.v-quiet .cp .ic { color: rgba(205, 218, 255, .36); } .tsv.v-quiet .cp.on .ttl { fill: rgba(255, 255, 255, .66); } .tsv.v-quiet .cp.on .ring { stroke: rgba(190, 212, 255, .55); fill: rgba(40, 60, 130, .35); } .tsv.v-quiet .cp.on .ic { color: rgba(225, 234, 255, .7); } .tsv.v-quiet .fb path { stroke: rgba(150, 185, 255, .08); } .tsv.v-quiet .fb.on path { stroke: rgba(175, 205, 255, .26); } .tsv.v-quiet .nt { opacity: .7; } /* Layers: glass slabs in depth; an arriving signal lifts a layer only slightly */ .tsv .ly-v { fill: none; stroke: rgba(157, 192, 255, .11); stroke-dasharray: 3 6; } .tsv .ly { opacity: .62; transition: opacity .9s; } .tsv .ly.on { opacity: .82; } .tsv .ly-p { fill: url(#tsvLayer); stroke: rgba(155, 192, 252, .3); stroke-width: 1.1; } .tsv .ly-e { fill: rgba(159, 191, 255, .025); stroke: rgba(151, 187, 246, .14); } .tsv .ly-hi { fill: none; stroke: rgba(194, 219, 255, 0); stroke-width: 1.3; transition: stroke .9s; } .tsv .ly.on .ly-hi { stroke: rgba(194, 219, 255, .32); } .tsv .ly-g { fill: none; stroke: rgba(167, 200, 251, .075); } .tsv .ly-dot { fill: rgba(172, 207, 255, .45); } .tsv .ly-rec { opacity: .2; transition: opacity .9s; } .tsv .ly.on .ly-rec { opacity: .42; } .tsv .ly-rec path { fill: rgba(165, 198, 255, .025); stroke: rgba(190, 214, 255, .23); } .tsv .ly-rec .ln { stroke: rgba(198, 220, 255, .32); } .tsv .ly .ic { color: rgba(172, 202, 255, .56); } .tsv .ly-n { fill: rgba(205, 230, 255, .62); font-size: 8.2px; font-weight: 700; letter-spacing: .24em; } .tsv .ly-c rect { fill: rgba(25, 45, 96, .8); stroke: rgba(161, 194, 248, .22); transition: stroke .9s; } .tsv .ly-c .ttl { fill: rgba(216, 227, 255, .8); font-size: 12.8px; font-weight: 600; } .tsv .ly-c .tsb { fill: rgba(148, 171, 217, .8); font-size: 8.8px; font-weight: 400; letter-spacing: .03em; } .tsv .ly.on .ly-c rect { stroke: rgba(180, 208, 255, .38); } .tsv .ra { transform-box: fill-box; transform-origin: left center; } .tsv .ra.swap { animation: tsv-swap .7s ease-out; } @keyframes tsv-swap { 0% { opacity: 0; transform: translateY(5px); } 100% { opacity: 1; transform: none; } } /* detect: the ATT&CK id pops in a small pill; respond: the action used lights up */ .tsv .dx-pill { opacity: 0; transform-box: fill-box; transform-origin: left center; } .tsv .dx-pill.pop { animation: tsv-pop .7s cubic-bezier(.2, .9, .3, 1.3) forwards; } @keyframes tsv-pop { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } } .tsv .dx-pill rect { fill: rgba(255, 140, 152, .13); stroke: rgba(255, 160, 172, .5); } .tsv .dx-pill text { fill: rgba(255, 200, 206, .92); font-size: 8.4px; font-weight: 700; letter-spacing: .06em; font-family: "JetBrains Mono", Consolas, monospace; } .tsv .dx-pill.alert rect { fill: rgba(245, 185, 75, .12); stroke: rgba(245, 190, 95, .5); } .tsv .dx-pill.alert text { fill: rgba(250, 215, 150, .92); } .tsv .rc.on rect { fill: rgba(150, 190, 255, .14); stroke: rgba(195, 215, 255, .65); } .tsv .rc.on text { fill: rgba(235, 242, 255, .95); } /* Console: a wireframe of the Overview; blue-white glass, or faded colour (.col) */ .tsv .cs-w { fill: rgba(205, 220, 255, .035); stroke: rgba(190, 210, 255, .26); } .tsv .cs-l { fill: none; stroke: rgba(190, 210, 255, .12); } .tsv .cs-dot { fill: rgba(190, 210, 255, .22); } .tsv .cs-t { fill: rgba(223, 230, 255, .5); font-size: 11px; font-weight: 700; } .tsv .cs-t.dim { fill: rgba(174, 188, 239, .3); font-size: 9.5px; font-weight: 500; } .tsv .cs .ic { color: rgba(205, 218, 255, .3); } .tsv .kpi rect { fill: rgba(205, 220, 255, .03); stroke: rgba(190, 210, 255, .14); } .tsv .kpi .kb { fill: rgba(205, 220, 255, .3); stroke: none; } .tsv .kl { fill: rgba(174, 188, 239, .42); font-size: 9px; font-weight: 600; } .tsv .kv { fill: rgba(255, 255, 255, .55); font-size: 20px; font-weight: 800; } .tsv .cs-b { fill: rgba(205, 220, 255, .02); stroke: rgba(190, 210, 255, .12); } .tsv .cs-h { fill: rgba(174, 188, 239, .36); font-size: 8.5px; font-weight: 800; letter-spacing: .16em; } .tsv .bar { fill: rgba(175, 200, 255, .18); } .tsv .bar.b2 { fill: rgba(175, 200, 255, .27); } .tsv .bar.b3 { fill: rgba(175, 200, 255, .11); } .tsv .row rect:first-child { fill: rgba(205, 220, 255, .03); stroke: rgba(190, 210, 255, .12); } .tsv .row .rs, .tsv .toast .rs { fill: rgba(205, 220, 255, .38); stroke: none; } .tsv .row .rt { fill: rgba(255, 255, 255, .55); font-size: 11px; font-weight: 700; } .tsv .row .rd { fill: rgba(174, 188, 239, .36); font-size: 9px; font-family: "JetBrains Mono", Consolas, monospace; } .tsv .toast rect:first-child { fill: rgba(22, 38, 92, .88); stroke: rgba(190, 212, 255, .34); } .tsv .toast .rt { fill: rgba(255, 255, 255, .82); font-size: 11px; font-weight: 700; } .tsv .toast .rd { fill: rgba(200, 212, 245, .55); font-size: 9.5px; } .tsv .toast .ic { color: rgba(215, 226, 255, .7); } .tsv .toast rect:first-child { transition: stroke .9s; } .tsv .toast.fresh rect:first-child { stroke: rgba(210, 225, 255, .6); } .tsv .cs.col .cs-w { fill: rgba(9, 18, 50, .42); stroke: rgba(170, 195, 255, .24); } .tsv .cs.col .crit .kb, .tsv .cs.col .row.crit .rs, .tsv .cs.col .toast.crit .rs { fill: rgba(255, 111, 125, .6); } .tsv .cs.col .warn .kb, .tsv .cs.col .row.warn .rs, .tsv .cs.col .toast.warn .rs { fill: rgba(245, 185, 75, .6); } .tsv .cs.col .info .kb { fill: rgba(169, 130, 255, .55); } .tsv .cs.col .ok .kb, .tsv .cs.col .toast.ok .rs { fill: rgba(84, 211, 154, .6); } .tsv .cs.col .kpi.crit .kv { fill: rgba(255, 150, 160, .7); } .tsv .cs.col .bar { fill: rgba(255, 111, 125, .26); } .tsv .cs.col .bar.b2 { fill: rgba(245, 185, 75, .28); } .tsv .cs.col .bar.b3 { fill: rgba(169, 130, 255, .24); } .tsv .cs.col .toast.crit .ic { color: rgba(255, 150, 160, .85); } .tsv .cs.col .toast.warn .ic { color: rgba(245, 195, 110, .85); } .tsv .cs.col .toast.ok .ic { color: rgba(110, 220, 170, .85); } .tsv .cs.col .toast rect:first-child { fill: rgba(14, 26, 68, .9); } .tsv .amb-t { fill: #ffc4cc; } .tsv .amb-c { fill: #d4e2ff; } .tsv .nt line { stroke: rgba(174, 188, 239, .4); } .tsv .nt text { fill: rgba(174, 188, 239, .45); font-size: 9px; font-weight: 700; letter-spacing: .16em; } /* product-screen hero (?hero=screen): the Overview moves up beside the headline */ .hero-screen .hgrid { grid-template-columns: .92fr 1.08fr; align-items: center; padding-bottom: 150px; } .hero-screen .shot { margin-top: 0; } .hgrid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } .hero h1 { font-size: clamp(36px, 3.4vw, 54px); font-weight: 900; line-height: 1.12; letter-spacing: -.01em; } .hero h1 .with { display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: .78em; color: var(--peri-l); } .hero h1 .with [data-logo] { width: min(360px, 60%); --logo-threat: #ff5a61; --logo-responder: #e3e6f2; } .hero p.lead { margin: 26px 0 32px; font-size: 17.5px; color: #d3daf5; max-width: 560px; } .hero .ctas { display: flex; gap: 14px; flex-wrap: wrap; } .hero .trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; font-size: 13.5px; color: #aebbe9; } .hero .trust span { display: inline-flex; gap: 8px; align-items: center; } .hero .trust .pu-i { width: 15px; height: 15px; color: #8ee0bf; } .shot { position: relative; margin-top: 60px; z-index: 2; } .shot .browser { border-radius: 14px; background: #eef1fa; padding: 0 8px 8px; box-shadow: 0 40px 90px rgba(5, 12, 45, .55); } .browser .top { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 6px; font-size: 11.5px; color: #6f7aa3; font-family: "JetBrains Mono", Consolas, monospace; } .browser .top i { width: 9px; height: 9px; border-radius: 50%; background: #cfd5e8; } .browser .top i:nth-child(1) { background: #f4a1a4; } .browser .top i:nth-child(2) { background: #f3d18a; } .browser .top i:nth-child(3) { background: #9edbb9; } .browser .top span { margin-left: 10px; background: #fff; border-radius: 6px; padding: 3px 12px; flex: 1; max-width: 420px; } .browser .pui { --pu-frame-radius: 8px; } .shot .cap { position: absolute; z-index: 3; display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 18px 40px rgba(10, 20, 60, .3); font-size: 13.5px; font-weight: 600; opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .6s; } .shot .cap.on { opacity: 1; transform: none; } .shot .cap b { font-size: 22px; letter-spacing: -.02em; display: block; line-height: 1.1; } .shot .cap .d { width: 10px; height: 10px; border-radius: 50%; flex: none; } .wave { position: relative; z-index: 1; display: block; width: 100%; height: 150px; margin-top: -150px; } /* ---------- proof strip (moved up) ---------- */ .proof { padding: 34px 0 10px; } .proof .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .pf { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 12px; background: var(--lav-2); } .pf img, .pf .g { width: 46px; height: 46px; border-radius: 8px; flex: none; } .pf img { background: #fff; padding: 3px; } .pf .g { background: var(--hdr); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 12.5px; } .pf b { display: block; font-size: 14.5px; line-height: 1.3; } .pf span { font-size: 12.5px; color: var(--ink-3); } /* ---------- mission control stack ---------- */ .mc { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; } .stack { display: grid; gap: 12px; perspective: 1200px; } .stack .top { background: var(--navy); color: #fff; text-align: center; padding: 18px; border-radius: 10px; font-weight: 900; font-size: 24px; letter-spacing: .02em; box-shadow: 0 16px 30px rgba(15, 28, 77, .25); } .stack .top small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--peri-l); margin-top: 2px; } .mods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; position: relative; } .mods::before { content: ""; position: absolute; left: 12%; right: 12%; top: -12px; height: 12px; border: 2px dashed #b7c0e2; border-bottom: 0; border-radius: 10px 10px 0 0; } .mod { border-radius: 10px; padding: 16px 10px 14px; text-align: center; color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .05em; box-shadow: 0 12px 22px rgba(15, 28, 77, .18); transform: translateY(-24px); opacity: 0; transition: transform .7s cubic-bezier(.2, .9, .3, 1.3), opacity .5s; } .mod small { display: block; font-weight: 500; font-size: 11.5px; letter-spacing: 0; opacity: .85; margin-top: 4px; } .mod .pu-i { display: block; width: 22px; height: 22px; margin: 0 auto 6px; } .in .mod { transform: none; opacity: 1; } .mod:nth-child(1) { background: #4b62b3; transition-delay: .1s; } .mod:nth-child(2) { background: #5d6fb8; transition-delay: .2s; } .mod:nth-child(3) { background: #3e4f95; transition-delay: .3s; } .mod:nth-child(4) { background: #6b7cc0; transition-delay: .4s; } .stack .agent { position: relative; background: linear-gradient(180deg, #fff, var(--lav-2)); border: 2px solid var(--hdr); color: var(--hdr); border-radius: 10px; padding: 16px; text-align: center; font-weight: 900; letter-spacing: .08em; font-size: 15px; overflow: hidden; } .stack .agent::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; left: -30%; background: linear-gradient(90deg, transparent, rgba(112, 132, 199, .22), transparent); animation: scan 3.2s ease-in-out infinite; } @keyframes scan { to { left: 100%; } } html.poster .stack .agent::after, html.reduced .stack .agent::after { animation: none; } .stack .os { display: flex; justify-content: center; gap: 22px; font-size: 13px; color: var(--ink-3); font-weight: 600; } .mcside h3 { font-size: 30px; font-weight: 900; line-height: 1.25; color: var(--hdr); } .mcside h3 span { display: block; color: var(--peri); } .mcside ul { display: grid; gap: 14px; margin-top: 28px; } .mcside li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; color: var(--ink-2); } .mcside li .pu-i { width: 20px; height: 20px; color: var(--peri-d); margin-top: 2px; } .mcside li b { color: var(--ink); display: block; } /* ---------- yardstick (blue curved band) ---------- */ .yard { background: var(--band); color: #fff; border-radius: 50% 50% 0 0 / 70px 70px 0 0; overflow: hidden; } .yard::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.4px); background-size: 28px 28px; mask-image: linear-gradient(180deg, #000, transparent 80%); } .spine { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 120px; } .spine::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: var(--h, 0%); background: linear-gradient(#fff, rgba(255, 255, 255, .3)); transform: translateX(-50%); transition: height 1.6s ease; } .spine.in::before { --h: 100%; } .yi { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 18px 20px; border-radius: 10px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); } .yi .pu-i { width: 22px; height: 22px; color: var(--peri-l); margin-top: 3px; } .yi b { display: block; font-size: 16px; } .yi span { font-size: 14px; color: #c9d1f0; } .yi::after { content: ""; position: absolute; top: 26px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .15); } .spine .yi:nth-child(odd)::after { right: -67px; } .spine .yi:nth-child(even)::after { left: -67px; } /* ---------- hexagon cards (kept) ---------- */ .lav { background: var(--lav); } .hexes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } .hexes.eight { grid-template-columns: repeat(4, 1fr); row-gap: 70px; } .hx { position: relative; padding: 76px 18px 22px; border-radius: 14px; background: linear-gradient(180deg, #3b4f96, #2f427f); color: #fff; text-align: center; margin-top: 56px; transition: transform .35s, box-shadow .35s; } .hx:hover { transform: translateY(-6px); box-shadow: 0 24px 40px rgba(15, 28, 77, .3); } .hx .h { position: absolute; left: 50%; top: -56px; width: 110px; height: 124px; translate: -50% 0; background: #fff; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); display: grid; place-items: center; filter: drop-shadow(0 8px 16px rgba(15, 28, 77, .2)); } .hx .h .pu-i { width: 40px; height: 40px; color: var(--red); stroke-width: 1.4; } .hx b { display: block; font-size: 16px; line-height: 1.3; } .hx > span:not(.h) { display: block; font-size: 13.5px; color: #c9d1f0; margin-top: 8px; line-height: 1.5; } /* ---------- neutralize (dark tech) ---------- */ .dark { background: radial-gradient(60% 80% at 80% 20%, #213a88, transparent 60%), linear-gradient(180deg, #0f1c4d, #152560); color: #fff; overflow: hidden; } .dark::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(143, 167, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 167, 255, .07) 1px, transparent 1px); background-size: 60px 60px; transform: perspective(600px) rotateX(55deg) translateY(30%); transform-origin: bottom; } .neu { position: relative; display: grid; grid-template-columns: .8fr 1.35fr; gap: 50px; align-items: center; } .eng { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .en { background: #fff; color: var(--ink); border-radius: 12px; padding: 18px; border-top: 4px solid var(--red); } .en .pu-i { width: 26px; height: 26px; color: var(--hdr); } .en b { display: block; margin-top: 10px; font-size: 15px; color: var(--hdr); line-height: 1.3; } .en span { font-size: 13px; color: var(--ink-2); display: block; margin-top: 6px; line-height: 1.5; } .ati { grid-column: 1 / -1; margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px; border-radius: 10px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); font-weight: 800; letter-spacing: .1em; font-size: 14px; } .ati .pu-i { width: 18px; height: 18px; animation: nudge 1.6s ease-in-out infinite; } @keyframes nudge { 50% { transform: translateX(5px); } } .dark .browser { background: rgba(238, 241, 250, .12); } .dark .browser .top { color: #aab7e6; } .dark .browser .top span { background: rgba(255, 255, 255, .1); } .figcap { margin-top: 14px; font-size: 14px; color: #c9d1f0; display: flex; gap: 10px; align-items: center; } .figcap .pu-i { width: 16px; height: 16px; color: var(--peri-l); } /* ---------- investigate stats ---------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 60px; } .sx { background: #fff; border-radius: 12px; padding: 20px; text-align: center; box-shadow: 0 10px 24px rgba(15, 28, 77, .06); } .sx b { display: block; font-size: 34px; font-weight: 900; color: var(--hdr); letter-spacing: -.02em; } .sx span { font-size: 13px; color: var(--ink-3); } /* ---------- pinpoint ---------- */ .pin { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center; } .pin h3 { font-size: 22px; font-weight: 900; color: var(--hdr); line-height: 1.35; } .pin p { color: var(--ink-2); margin: 16px 0 22px; } .pin ul { display: grid; gap: 12px; } .pin li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; color: var(--ink-2); font-size: 15px; } .pin li .pu-i { width: 18px; height: 18px; color: var(--peri-d); margin-top: 3px; } /* ---------- extend (use cases replace the infinity loop) ---------- */ .extend { background: var(--lav); border-radius: 0 0 50% 50% / 0 0 80px 80px; } .uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .use { position: relative; background: #fff; border-radius: 14px; padding: 22px 20px 20px; overflow: hidden; transition: transform .3s, box-shadow .3s; } .use:hover { transform: translateY(-4px); box-shadow: 0 20px 36px rgba(15, 28, 77, .12); } .use .n { position: absolute; right: 12px; top: -6px; font-size: 76px; font-weight: 900; color: var(--lav); line-height: 1; } .use .pu-i { position: relative; width: 26px; height: 26px; color: var(--peri-d); } .use b { position: relative; display: block; font-size: 16px; margin: 12px 0 6px; line-height: 1.3; color: var(--ink); } .use span { position: relative; font-size: 13.5px; color: var(--ink-2); } /* ---------- why ---------- */ .why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .wy { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 24px; border-radius: 14px; box-shadow: 0 10px 30px rgba(15, 28, 77, .08), inset 0 0 0 1px #e8ebf5; } .wy .ic { width: 48px; height: 48px; border-radius: 12px; background: var(--lav-2); display: grid; place-items: center; color: var(--red); } .wy .ic .pu-i { width: 24px; height: 24px; } .wy b { display: block; font-size: 16.5px; line-height: 1.3; } .wy span { font-size: 14px; color: var(--ink-2); display: block; margin-top: 6px; } /* ---------- trusted (logos grouped) ---------- */ .trusted { background: linear-gradient(180deg, #5a6db1, var(--band)); color: #fff; } .counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; margin-bottom: 40px; } .counters b { display: block; font-size: 40px; font-weight: 900; letter-spacing: -.02em; } .counters span { font-size: 13.5px; color: #d6ddf8; } .lgroups { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .lg { background: #fff; border-radius: 16px; padding: 22px; color: var(--ink); } .lg h4 { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; } .lg .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .lg { min-width: 0; } .lg .tiles div { min-width: 0; height: 78px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #e8ebf5; display: flex; align-items: center; justify-content: center; padding: 10px 12px; } .lg .tiles img { max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.1); opacity: .75; transition: filter .3s, opacity .3s; } .lg .tiles div:hover img { filter: none; opacity: 1; } /* ---------- testimonials (no carousel) ---------- */ .tq { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .tcard { position: relative; border-radius: 16px; padding: 34px 32px 28px; background: #fff; box-shadow: 0 16px 40px rgba(15, 28, 77, .1), inset 0 0 0 1px #e8ebf5; } .tcard .tag { position: absolute; top: 18px; right: 20px; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--peri-d); background: var(--lav-2); padding: 4px 10px; border-radius: 999px; } .tcard blockquote { font-size: 18px; line-height: 1.55; color: var(--ink); } .tcard blockquote::before { content: "“"; display: block; font-family: Georgia, serif; font-size: 70px; line-height: .6; color: var(--peri); margin-bottom: 8px; } .tcard cite { display: flex; gap: 12px; align-items: center; margin-top: 22px; font-style: normal; font-size: 14px; color: var(--ink-2); } .tcard cite .av { width: 42px; height: 42px; border-radius: 50%; background: var(--hdr); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; } .tcard cite b { color: var(--ink); display: block; } .svcq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; } .sq { border-radius: 14px; padding: 22px; background: var(--lav-2); font-size: 14.5px; color: var(--ink-2); } .sq b { display: block; margin-top: 12px; color: var(--ink); font-size: 13.5px; } .sq small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--ink-3); margin-bottom: 8px; } /* ---------- get started ---------- */ .gs { background: linear-gradient(180deg, var(--lav-2), var(--lav)); } .gsg { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; } .gsg h3 { font-size: 24px; font-weight: 900; color: var(--hdr); line-height: 1.35; } .gsg p { color: var(--ink-2); margin: 14px 0 24px; } form.f { background: var(--hdr); border-radius: 16px; padding: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; box-shadow: 0 24px 50px rgba(15, 28, 77, .25); } form.f label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: #d6ddf8; } form.f input, form.f textarea, form.f select { font: inherit; font-size: 15px; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px; padding: 12px 14px; } form.f input::placeholder, form.f textarea::placeholder { color: rgba(255, 255, 255, .5); } form.f .full { grid-column: 1 / -1; } form.f .seg { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .1); } form.f .seg span { text-align: center; padding: 9px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #d6ddf8; cursor: pointer; } form.f .seg span.on { background: #fff; color: var(--hdr); } form.f button { grid-column: 1 / -1; border: 0; justify-self: center; margin-top: 6px; } .next { display: grid; gap: 14px; } .nx { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 16px 18px; border-radius: 12px; background: #fff; } .nx i { font-style: normal; width: 44px; height: 44px; border-radius: 50%; background: var(--lav); color: var(--hdr); font-weight: 900; display: grid; place-items: center; } .nx b { display: block; } .nx span { font-size: 14px; color: var(--ink-2); } /* ---------- about + footer ---------- */ .about { background: linear-gradient(120deg, #5f6e98, #4a5a8c); color: #fff; } .abg { display: grid; grid-template-columns: 1.4fr 1fr; gap: 50px; align-items: center; } .abg p { color: #e2e7fa; font-size: 16.5px; } .afacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .afacts div { background: rgba(255, 255, 255, .12); border-radius: 12px; padding: 16px; text-align: center; } .afacts b { display: block; font-size: 26px; font-weight: 900; } .afacts span { font-size: 12.5px; color: #dfe4f8; } footer { background: var(--band); color: #d6ddf8; padding: 60px 0 30px; font-size: 14.5px; } footer .cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; } footer h4 { color: #fff; font-size: 19px; font-weight: 900; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .18); } footer li { margin-bottom: 7px; } footer a:hover { color: #fff; } footer .contact { text-align: center; margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .15); } footer .contact b { color: #fff; font-size: 19px; display: block; margin-bottom: 6px; } .copy { background: #d9ddea; color: var(--ink-2); text-align: center; font-size: 13.5px; padding: 14px 0 90px; } @media (max-width: 1100px) { .tsh { display: none; } .hero-screen .hgrid { padding-bottom: 0; } .hero-screen .shot { margin-top: 40px; } .hdr { grid-template-columns: 1fr; } .plate { display: none; } .menu { display: none; } .hgrid, .mc, .neu, .pin, .gsg, .abg, .tq, .lgroups { grid-template-columns: 1fr; } .hexes, .hexes.eight, .uses, .why, .stats, .counters, .proof .wrap, .svcq { grid-template-columns: repeat(2, 1fr); } .spine { grid-template-columns: 1fr; } .spine::before, .yi::after { display: none; } } @media (max-width: 640px) { .util a:not(.ua) { display: none; } .hexes, .hexes.eight, .uses, .why, .proof .wrap, .svcq, .eng, .mods { grid-template-columns: 1fr; } .lg .tiles { grid-template-columns: repeat(2, 1fr); } form.f { grid-template-columns: 1fr; } footer .cols { grid-template-columns: 1fr 1fr; } } /* the ThreatResponder mark in the headline is the official logo file, in its own colours */ .hero h1 .with img { width: min(360px, 60%); height: auto; } /* ---------- header options (mockup page builder, ?header=current|evolve|command|enterprise) ---------- Current is the production header above. Evolve is V9's. Command and Enterprise are new: one a dark glass bar that sits on the hero with the original's slanted logo plate shrunk to a tab, the other a light, big-vendor bar with an announcement strip. Both share the same mega menus, built from the real site map. */ .hdx { font-family: var(--font); } .hx-in { width: var(--wide); margin-inline: auto; display: flex; align-items: center; gap: 26px; height: 100%; } .hx-grow { flex: 1; } .hx-menu { display: flex; align-items: stretch; height: 100%; } .hx-menu > a, .hx-dd > button { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 100%; padding: 0 14px; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 600; color: inherit; cursor: pointer; white-space: nowrap; } .hx-dd { display: flex; } .hx-dd > button::after { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; transition: transform .2s; } .hx-dd:hover > button::after, .hx-dd:has(:focus-visible) > button::after { transform: rotate(225deg) translate(-1px, -1px); } .hx-btn { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 8px; font-size: 14px; font-weight: 700; white-space: nowrap; transition: background .2s, box-shadow .2s, transform .2s; } .hx-btn.p { background: var(--navy); color: #fff; } .hx-btn.p:hover { background: var(--hdr); } .hx-btn.l { color: var(--navy); box-shadow: inset 0 0 0 1px #c9d0e6; } .hx-btn.l:hover { background: var(--lav-2); } .hx-btn.w { background: #fff; color: var(--navy); } .hx-btn.w:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, .25); } .hx-ua { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; white-space: nowrap; } .hx-ua::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #f5b94b; box-shadow: 0 0 0 4px rgba(245, 185, 75, .22); } .hx-link { font-size: 14px; font-weight: 600; white-space: nowrap; } .hx-right { margin-left: auto; display: flex; align-items: center; gap: 20px; } .hx-burger { display: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: inherit; cursor: pointer; } .hx-burger i { display: block; width: 18px; height: 2px; margin: auto; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; } .hx-ic { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; } .hx-ic .pu-i { width: 18px; height: 18px; } /* mega menus: open on hover or keyboard focus, full width under the bar */ .hx-mega, .hx-drop { position: absolute; top: 100%; z-index: 2; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility 0s .18s; } .hx-mega { left: 0; right: 0; } .hx-dd:hover > .hx-mega, .hx-dd:has(:focus-visible) > .hx-mega, .hx-dd:hover > .hx-drop, .hx-dd:has(:focus-visible) > .hx-drop { opacity: 1; visibility: visible; transform: none; transition: opacity .18s .06s, transform .18s .06s, visibility 0s .06s; } .hx-dd.x > .hx-mega, .hx-dd.x > .hx-drop { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s, visibility 0s; } .hx-dd.x > button::after { transform: rotate(225deg) translate(-1px, -1px); } .hx-its.c4 { grid-template-columns: repeat(4, 1fr); } .hx-mg { height: auto; align-items: stretch; gap: 36px; padding: 30px 0 34px; } .hx-intro { width: 250px; flex: none; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 14px; } .hx-intro small { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .hx-intro b { font-size: 19px; line-height: 1.3; } .hx-intro p { font-size: 13.5px; line-height: 1.55; } .hx-intro .hx-more { margin-top: auto; } .hx-more { font-size: 13.5px; font-weight: 700; } .hx-col { display: flex; flex-direction: column; gap: 2px; min-width: 170px; } .hx-col.w2 { flex: 1; } .hx-col h6 { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .hx-col > a { padding: 6px 0; font-size: 14px; font-weight: 500; } .hx-its { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; } .hx-it { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 12px; transition: background .15s; } .hx-it span:last-child { display: flex; flex-direction: column; gap: 3px; } .hx-it b { font-size: 14.5px; font-weight: 600; line-height: 1.3; } .hx-it small { font-size: 12.5px; line-height: 1.4; } .hx-feat { width: 260px; flex: none; margin-left: auto; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 14px; } .hx-feat img { width: 74px; height: auto; } .hx-feat b { font-size: 15.5px; line-height: 1.35; } .hx-feat small { font-size: 13px; line-height: 1.5; } .hx-feat .hx-more { margin-top: auto; } .hx-dd.sm { position: relative; } .hx-drop { left: -8px; min-width: 250px; padding: 10px; border-radius: 14px; display: grid; gap: 0 8px; } .hx-drop.c2 { grid-template-columns: 1fr 1fr; min-width: 440px; } .hx-drop a { padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; white-space: nowrap; } /* Evolve: V9's header, the util strip scrolls away and the white bar sticks */ .hx-evolve { position: sticky; top: -38px; z-index: 50; } .hx-evolve .hx-util { height: 38px; background: var(--navy); color: #bfc9ee; font-size: 13px; } .hx-evolve .hx-util .hx-in { gap: 22px; } .hx-evolve .hx-util a:hover { color: #fff; } .hx-evolve .hx-ua { color: #fff; } .hx-evolve .hx-ua b { color: var(--peri-l); font-weight: 600; } .hx-evolve .hx-bar { position: relative; height: 76px; background: #fff; color: var(--ink-2); box-shadow: 0 1px 0 #e3e7f2; transition: box-shadow .3s; } .hx-evolve.scrolled .hx-bar { box-shadow: 0 1px 0 #e3e7f2, 0 8px 24px rgba(15, 28, 77, .08); } .hx-brand { display: flex; align-items: center; gap: 16px; flex: none; } .hx-brand [data-logo="netsecurity"] { width: 126px; } .hx-brand i { width: 1px; height: 26px; background: #e3e7f2; } .hx-brand [data-logo="threatresponder"] { width: 180px; } .hx-evolve .hx-menu { gap: 2px; } .hx-evolve .hx-dd { align-items: center; } .hx-evolve .hx-dd > button { height: 40px; padding: 0 12px; border-radius: 8px; color: var(--ink-2); } .hx-evolve .hx-dd:hover > button, .hx-evolve .hx-dd.x > button, .hx-evolve .hx-dd:has(:focus-visible) > button { background: var(--lav-2); color: var(--navy); } .hx-evolve .hx-right { gap: 10px; } /* Command: dark glass on the hero, solid once the page scrolls or a menu opens */ .hx-command { position: sticky; top: 0; z-index: 50; height: 76px; margin-bottom: -76px; color: #fff; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); transition: background .35s, box-shadow .35s; } .hx-command.scrolled, .hx-command:has(.hx-dd:hover), .hx-command:has(.x), .hx-command:has(:focus-visible) { background: rgba(13, 24, 66, .86); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08), 0 12px 32px rgba(6, 12, 36, .28); } html[data-hdr="command"] .hero { padding-top: calc(clamp(70px, 7vw, 110px) + 76px); } .hx-tab { display: flex; align-items: center; flex: none; height: 44px; padding: 0 36px 0 18px; border-radius: 8px 0 0 8px; background: linear-gradient(90deg, #dfe3ef, #fff 55%); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); } .hx-tab [data-logo] { width: 150px; } .hx-command .hx-menu { margin-left: 6px; } .hx-command .hx-menu > a, .hx-command .hx-dd > button { font-size: 14px; color: rgba(255, 255, 255, .84); } .hx-command .hx-menu > a::before, .hx-command .hx-dd > button::before { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: var(--peri-l); transform: scaleX(0); transition: transform .2s; } .hx-command .hx-menu > a:hover, .hx-command .hx-dd:hover > button { color: #fff; } .hx-command .hx-menu > a:hover::before, .hx-command .hx-dd:hover > button::before { transform: scaleX(1); } .hx-command .hx-ua { font-size: 13.5px; color: #fff; } .hx-command .hx-ua b { color: var(--peri-l); font-weight: 600; } .hx-command .hx-link { color: rgba(255, 255, 255, .8); } .hx-command .hx-link:hover { color: #fff; } .hx-command .hx-mega, .hx-command .hx-drop { background: rgba(13, 24, 66, .96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px rgba(6, 12, 36, .45); } .hx-command .hx-drop { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 50px rgba(6, 12, 36, .45); } .hx-command .hx-intro { background: linear-gradient(160deg, rgba(112, 132, 199, .22), rgba(112, 132, 199, .06)); box-shadow: inset 0 0 0 1px rgba(174, 188, 239, .14); } .hx-command .hx-intro small, .hx-command .hx-col h6 { color: #8f9fd8; } .hx-command .hx-intro p, .hx-command .hx-it small, .hx-command .hx-feat small { color: #aebbe9; } .hx-command .hx-more { color: var(--peri-l); } .hx-command .hx-col > a, .hx-command .hx-drop a { color: #d3daf5; } .hx-command .hx-col > a:hover { color: #fff; } .hx-command .hx-drop a:hover { background: rgba(255, 255, 255, .06); color: #fff; } .hx-command .hx-it:hover { background: rgba(255, 255, 255, .06); } .hx-command .hx-ic { background: rgba(174, 188, 239, .12); color: var(--peri-l); } .hx-command .hx-feat { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } .hx-command .hx-feat img { background: #fff; border-radius: 8px; padding: 4px; } .hx-evolve .hx-mega { background: #fff; box-shadow: inset 0 1px 0 #e3e7f2, 0 30px 60px rgba(15, 28, 77, .16); } .hx-evolve .hx-drop { background: #fff; box-shadow: 0 0 0 1px #e3e7f2, 0 24px 50px rgba(15, 28, 77, .14); } .hx-evolve .hx-col h6 { color: var(--ink-3); } .hx-evolve .hx-col > a, .hx-evolve .hx-drop a { color: var(--ink-2); } .hx-evolve .hx-col > a:hover { color: var(--peri-d); } .hx-evolve .hx-drop a:hover { background: var(--lav-2); color: var(--navy); } .hx-evolve .hx-it:hover { background: var(--lav-2); } .hx-evolve .hx-it b { color: var(--ink); } .hx-evolve .hx-it small, .hx-evolve .hx-feat small { color: var(--ink-3); } .hx-evolve .hx-ic { background: var(--lav-2); color: var(--peri-d); } .hx-evolve .hx-more { color: var(--peri-d); } .hx-evolve .hx-feat { background: var(--lav-2); } .hx-evolve .hx-intro { background: var(--lav-2); } .hx-evolve .hx-intro small, .hx-evolve .hx-intro .hx-more { color: var(--peri-d); } .hx-evolve .hx-intro b { color: var(--ink); } .hx-evolve .hx-intro p { color: var(--ink-2); } /* Current: the production header keeps its look; its menus follow the live site (blue drop-downs, Services flying out per practice), with calmer type and rounded, shadowed panels */ .hx-cur .hx-dd { align-self: stretch; } .hx-cur .menu > a { text-transform: uppercase; } .hx-cur .hx-dd > button { height: 100%; padding: 0; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .92; } .hx-cur .hx-dd:hover > button, .hx-cur .hx-dd.x > button, .hx-cur .hx-dd:has(:focus-visible) > button { opacity: 1; color: var(--peri-l); } .hx-cur .hx-drop { left: -18px; min-width: 250px; padding: 8px; border-radius: 0 0 12px 12px; background: var(--hdr); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 40px rgba(15, 28, 77, .35); } .hx-cur .hx-dd.rt > .hx-drop { left: auto; right: -18px; } .hx-cur .hx-drop.c2 { grid-template-columns: 1fr 1fr; min-width: 470px; } .hx-cur .hx-drop a { display: flex; align-items: center; padding: 10px 14px; border-radius: 8px; color: #e3e8ff; font-size: 14px; font-weight: 500; letter-spacing: 0; opacity: 1; white-space: nowrap; } .hx-cur .hx-drop a:hover, .hx-cur .cm-sub:hover > .cm-st, .hx-cur .cm-sub.x > .cm-st { background: rgba(255, 255, 255, .09); color: #fff; } .cm-sub { position: relative; } .hx-cur .cm-st { justify-content: space-between; gap: 22px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .cm-st::after { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); opacity: .7; } .cm-fly { position: absolute; left: calc(100% + 8px); top: -8px; display: grid; min-width: 320px; padding: 8px; border-radius: 12px; background: var(--band-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 40px rgba(15, 28, 77, .35); opacity: 0; visibility: hidden; transform: translateX(-6px); transition: opacity .16s, transform .16s, visibility 0s .16s; } .cm-sub:hover > .cm-fly, .cm-sub:has(:focus-visible) > .cm-fly, .cm-sub.x > .cm-fly { opacity: 1; visibility: visible; transform: none; transition: opacity .16s .05s, transform .16s .05s, visibility 0s .05s; } /* Enterprise: announcement strip + light bar, a thin navy indicator under the open menu */ .hx-ent { position: sticky; top: -40px; z-index: 50; } .hx-ann { height: 40px; background: var(--lav-2); color: var(--ink-2); font-size: 13px; box-shadow: inset 0 -1px 0 #e3e7f2; } .hx-ann .hx-in { gap: 12px; } .hx-new { padding: 3px 8px; border-radius: 999px; background: var(--hdr); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; } .hx-ann .hx-more { color: var(--peri-d); font-size: 13px; } .hx-ent .hx-ua { color: var(--ink); font-size: 13px; } .hx-ent .hx-ua b { color: var(--peri-d); font-weight: 700; } .hx-ent .hx-bar { position: relative; height: 72px; background: #fff; color: var(--ink); box-shadow: 0 1px 0 #e3e7f2; transition: box-shadow .3s; } .hx-ent.scrolled .hx-bar { box-shadow: 0 1px 0 #e3e7f2, 0 10px 30px rgba(15, 28, 77, .1); } .hx-ent .hx-brand [data-logo="netsecurity"] { width: 150px; } .hx-ent .hx-menu { margin-left: 14px; } .hx-ent .hx-menu > a:hover, .hx-ent .hx-dd:hover > button { color: var(--peri-d); } .hx-ent .hx-dd > button::before { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--hdr); transform: scaleY(0); transform-origin: bottom; transition: transform .2s; } .hx-ent .hx-dd:hover > button::before, .hx-ent .hx-dd:has(:focus-visible) > button::before { transform: none; } .hx-icb { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); cursor: pointer; } .hx-icb:hover { background: var(--lav-2); color: var(--navy); } .hx-icb .pu-i { width: 19px; height: 19px; } .hx-ent .hx-link { color: var(--ink); } .hx-ent .hx-link:hover { color: var(--peri-d); } .hx-ent .hx-mega { background: #fff; box-shadow: inset 0 1px 0 #e3e7f2, 0 30px 60px rgba(15, 28, 77, .16); } .hx-ent .hx-drop { background: #fff; box-shadow: 0 0 0 1px #e3e7f2, 0 24px 50px rgba(15, 28, 77, .14); } .hx-ent .hx-intro { background: var(--navy); color: #fff; } .hx-ent .hx-intro small { color: var(--peri-l); } .hx-ent .hx-intro p { color: #c8d0ee; } .hx-ent .hx-intro .hx-more { color: #fff; } .hx-ent .hx-col h6 { color: var(--ink-3); } .hx-ent .hx-col > a, .hx-ent .hx-drop a { color: var(--ink-2); } .hx-ent .hx-col > a:hover { color: var(--peri-d); } .hx-ent .hx-drop a:hover { background: var(--lav-2); color: var(--navy); } .hx-ent .hx-it:hover { background: var(--lav-2); } .hx-ent .hx-it b { color: var(--ink); } .hx-ent .hx-it small, .hx-ent .hx-feat small { color: var(--ink-3); } .hx-ent .hx-ic { background: var(--lav-2); color: var(--peri-d); } .hx-ent .hx-more { color: var(--peri-d); } .hx-ent .hx-feat { background: var(--lav-2); } @media (max-width: 1100px) { .hx-menu, .hdx .hx-link, .hx-evolve .hx-btn.l, .hx-command .hx-ua, .hx-ann > .hx-in > span:not(.hx-new):not(.hx-grow) { display: none; } .hx-burger { display: grid; place-items: center; } .hdx.open .hx-menu { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; height: auto; padding: 8px var(--gut) 16px; background: inherit; } .hx-command.open .hx-menu { background: rgba(13, 24, 66, .96); } .hx-ent.open .hx-menu, .hx-evolve.open .hx-menu { background: #fff; box-shadow: 0 20px 40px rgba(15, 28, 77, .12); } .hdx.open .hx-menu > a, .hdx.open .hx-dd > button { height: 44px; } .hdx.open .hx-menu { max-height: calc(100vh - 90px); overflow: auto; } .hdx.open .hx-dd { flex-direction: column; align-items: stretch; height: auto; } .hdx.open .hx-dd > button { justify-content: space-between; border-radius: 8px; } .hdx.open .hx-mega, .hdx.open .hx-drop, .hdx.open .cm-fly { display: none; } .hdx.open .hx-dd.x > .hx-mega { display: block; } .hdx.open .hx-dd.x > .hx-drop, .hdx.open .cm-sub.x > .cm-fly { display: grid; } .hdx.open .hx-dd.x > .hx-mega, .hdx.open .hx-dd.x > .hx-drop, .hdx.open .cm-sub.x > .cm-fly { position: static; min-width: 0; margin: 0 0 8px; padding: 4px 0 4px 12px; border-radius: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; } .hdx.open .hx-mg { width: auto; flex-direction: column; gap: 12px; padding: 8px 0; } .hdx.open .hx-intro, .hdx.open .hx-feat { display: none; } .hdx.open .hx-its, .hdx.open .hx-its.c4, .hdx.open .hx-drop.c2 { grid-template-columns: 1fr; } .hx-cur.open .menu { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 100%; left: 0; right: 0; height: auto; max-height: calc(100vh - 60px); overflow: auto; gap: 0; padding: 8px var(--gut) 16px; background: var(--hdr); box-shadow: 0 20px 40px rgba(15, 28, 77, .3); } .hx-cur.open .hx-dd > button { height: 44px; } .hx-cur .util .hx-burger { color: #fff; } } /* ---------- page builder (mockup-only chrome) ---------- */ .cfg { position: fixed; left: 18px; bottom: 18px; z-index: 91; padding: 6px; border-radius: 18px; background: rgba(12, 16, 30, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .1); color: #fff; font: 600 12px/1 "Gotham Pro", system-ui, sans-serif; } .cfg-h { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; } .cfg-h b { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); } .cfg-h em { font-style: normal; color: rgba(255, 255, 255, .8); display: none; } .cfg.min .cfg-h em { display: inline; } .cfg-h .sp { flex: 1; min-width: 12px; } .cfg button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; } .cfg .cfg-copy { padding: 7px 12px; border-radius: 999px; background: #93a6ec; color: #0b1020; } .cfg .cfg-copy.ok { background: #fff; } .cfg .cfg-min { width: 28px; height: 28px; border-radius: 999px; color: rgba(255, 255, 255, .6); } .cfg .cfg-min:hover { background: rgba(255, 255, 255, .08); color: #fff; } .cfg-min::before { content: ""; display: block; width: 7px; height: 7px; margin: auto; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); } .cfg.min .cfg-min::before { transform: translateY(2px) rotate(225deg); } .cfg-r { display: grid; grid-template-columns: 64px auto; align-items: center; gap: 6px; padding: 3px 4px 3px 12px; } .cfg-r > span { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); } .cfg-seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .06); } .cfg-seg button { padding: 7px 11px; border-radius: 999px; color: rgba(255, 255, 255, .72); white-space: nowrap; } .cfg-seg button:hover { color: #fff; background: rgba(255, 255, 255, .08); } .cfg-seg button.on { background: #fff; color: #0b1020; } .cfg.min .cfg-r { display: none; } html.poster .cfg, html.noswitch .cfg { display: none; } @media (max-width: 900px) { .cfg { left: 8px; right: 8px; bottom: 70px; } .cfg-seg { flex-wrap: wrap; } } .cfg-mo { padding: 7px 12px; border-radius: 999px; color: rgba(255, 255, 255, .7); white-space: nowrap; } .cfg-mo:hover { background: rgba(255, 255, 255, .08); color: #fff; } .cfg-mo.play { background: rgba(147, 166, 236, .18); color: #cdd7ff; } /* ---------- hero text layouts (?copy=stack|three|accent|verbs), same words in every one ---------- The animation sits right of the text column (layout() measures it), so a wider text column simply leaves it less room; nothing overlaps. Below 1100 px every layout wraps normally. */ html[data-copy="three"] .hero:not(.hero-screen) .hgrid, html[data-copy="accent"] .hero:not(.hero-screen) .hgrid { grid-template-columns: auto 1fr; } html[data-copy="three"] .hero h1 .l1, html[data-copy="three"] .hero h1 .l2, html[data-copy="accent"] .hero h1 .l1, html[data-copy="accent"] .hero h1 .l2, html[data-copy="verbs"] .hero h1 .l1 { display: block; white-space: nowrap; } /* 3 rows: one size, a touch smaller so the threats line fits; the paragraph runs the full column (3 lines) */ html[data-copy="three"] .hero h1 { font-size: clamp(30px, 2.15vw, 46px); } html[data-copy="three"] .hero p.lead { max-width: none; width: 0; min-width: 100%; } /* 3 rows · accent: the verbs carry the line, the threats sit under them lighter and smaller */ html[data-copy="accent"] .hero h1 .l2 { margin-top: 8px; font-size: .56em; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: #c9d3f5; } html[data-copy="accent"] .hero h1 .with { margin-top: 18px; font-size: .62em; } html[data-copy="accent"] .hero p.lead { max-width: none; width: 0; min-width: 100%; } /* Verbs above: the verbs lead in, the threats are the headline */ html[data-copy="verbs"] .hero h1 .l1 { margin-bottom: 14px; font-size: .5em; font-weight: 800; letter-spacing: .01em; color: var(--peri-l); } html[data-copy="verbs"] .hero h1 .l1::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 14px; border-radius: 2px; background: rgba(174, 188, 239, .5); } html[data-copy="verbs"] .hero:not(.hero-screen) .hgrid { grid-template-columns: auto 1fr; } html[data-copy="verbs"] .hero h1 .l2 { display: block; } html[data-copy="verbs"] .hero h1 .l2a, html[data-copy="verbs"] .hero h1 .l2b { display: block; white-space: nowrap; } html[data-copy="verbs"] .hero p.lead { max-width: none; width: 0; min-width: 100%; } .hero-screen h1 .l1, .hero-screen h1 .l2, .hero-screen h1 .l2a, .hero-screen h1 .l2b { white-space: normal !important; } @media (max-width: 1100px) { .hero h1 .l1, .hero h1 .l2, .hero h1 .l2a, .hero h1 .l2b { white-space: normal !important; } } html[data-copy="three"] .hero h1 .with img { width: auto; height: 1.35em; } /* ---------- Globe hero (?hero=globe) ---------- The artwork is 1916×821; it fills a band of height --gh anchored right, the text column is centred in that band, and the product screenshot follows below. Colours at the seams are sampled from the artwork. */ .hero-globe { --gh: clamp(700px, 46vw, 940px); padding-top: 0; background: linear-gradient(180deg, #01143c 0, #011645 var(--gh), #0f1c4d calc(var(--gh) + 260px), #172863 100%); } html[data-hdr="command"] .hero-globe { padding-top: 0; } .hero-globe .hgrid { min-height: var(--gh); align-items: center; grid-template-columns: min(780px, 54%) 1fr; } .hero-globe .shot { margin-top: 0; } .glb { position: absolute; top: 0; right: 0; z-index: 0; height: var(--gh); aspect-ratio: 1916 / 821; pointer-events: none; } .glb-bg { display: block; width: 100%; height: 100%; } .glb-bg.lt, html[data-tone="light"] .glb-bg.dk { display: none; } html[data-tone="light"] .glb-bg.lt { display: block; } .glb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #01143c 0, rgba(1, 20, 60, 0) 24%), linear-gradient(0deg, #011645 0, rgba(1, 22, 69, 0) 14%); } .glb-st { position: absolute; left: 0; top: 0; z-index: 1; width: 1916px; height: 821px; transform-origin: 0 0; font-family: var(--font); } .glb-svg { position: absolute; inset: 0; overflow: visible; } .gl-links .lk { fill: none; stroke: rgba(120, 180, 255, .75); stroke-width: 2; } .gl-links .lk-f { fill: none; stroke: #dff0ff; stroke-width: 2; stroke-dasharray: 3 16; stroke-linecap: round; animation: gl-flow 1.6s linear infinite; } @keyframes gl-flow { to { stroke-dashoffset: -19; } } .gl-core .gr-o { fill: none; stroke: rgba(130, 185, 255, .85); stroke-width: 2.5; filter: drop-shadow(0 0 8px rgba(80, 150, 255, .9)); } .gl-core .gr-i { stroke: rgba(160, 205, 255, .35); stroke-width: 1; } .gl-core .gr-s { filter: drop-shadow(0 0 6px rgba(120, 190, 255, .8)); } .gl-core .gr-h { fill: rgba(255, 255, 255, .22); } .gc { position: absolute; box-sizing: border-box; padding: 14px 16px; border-radius: 12px; color: #e6ecff; background: linear-gradient(180deg, rgba(48, 88, 190, .42), rgba(18, 42, 118, .55)); box-shadow: inset 0 0 0 1px rgba(150, 192, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 26px rgba(50, 120, 255, .22); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .gc h5 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 14px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #fff; } .gc h5::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 1.6px solid currentColor; border-top: 1.6px solid currentColor; transform: rotate(45deg); opacity: .8; } .gc h5 .pu-i { width: 20px; height: 20px; color: #bcd6ff; } .gc .pu-i { width: 17px; height: 17px; flex: none; color: #c8dcff; } .gc ul, .gc ol { list-style: none; margin: 0; padding: 0; } .gc.det h5 { padding-bottom: 12px; border-bottom: 1px solid rgba(150, 192, 255, .25); } .gd { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; } .gd b { display: block; font-size: 34px; font-weight: 600; line-height: 1.1; color: #fff; } .gd small { display: block; margin-top: 4px; font-size: 13px; color: #d3dcf8; } .gd .gt { text-align: right; } .gd em { font-style: normal; font-size: 22px; font-weight: 600; color: #3fe0a0; } .gd .gt small { font-size: 11px; color: #a8b8e6; } .gc.rsp li { display: flex; align-items: center; gap: 10px; height: 28px; margin: 0 -8px; padding: 0 8px; border-radius: 7px; font-size: 13px; color: #dfe7ff; transition: background .6s, color .6s; } .gc.inv li { display: flex; align-items: center; gap: 12px; height: 30px; font-size: 13.5px; color: #dfe7ff; } .gc.inv li span { flex: 1; } .gc.inv .cv { width: 6px; height: 6px; border-right: 1.5px solid #9fb6ea; border-top: 1.5px solid #9fb6ea; transform: rotate(45deg); } .gc.evi ol { position: relative; margin-top: 4px; } .gc.evi ol::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 12px; border-left: 1.5px dotted rgba(170, 195, 255, .55); } .gc.evi li { position: relative; display: flex; align-items: center; gap: 14px; height: 28px; padding-left: 22px; font-size: 13px; color: #dfe7ff; } .gc.evi li i { position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #b7c6f2; transition: box-shadow .5s; } .gc.evi li.r i { background: #ff5a61; } .gc.evi li.g i { background: #3fe0a0; } .gc.evi time { width: 38px; color: #cdd8fa; } .gl-tag { position: absolute; left: 1325px; top: 786px; font-size: 13px; letter-spacing: .28em; color: rgba(190, 205, 245, .75); white-space: nowrap; } .gl-tag b { font-weight: 600; color: #fff; } .gl-tag i { font-style: normal; margin: 0 .5em; opacity: .7; } html.poster .gl-links .lk-f, html.reduced .gl-links .lk-f { animation: none; } @media (max-width: 1100px) { .hero-globe .hgrid { min-height: 0; padding-top: 60px; } .glb { height: auto; width: 100%; aspect-ratio: 1916 / 821; opacity: .45; } .glb-st { display: none; } } /* ---------- "Stop the attack" copy (?copy=story), after the same mock ---------- */ .st-eb img { display: block; width: auto; height: clamp(26px, 1.9vw, 38px); margin-bottom: 26px; } html[data-copy="story"] .hero h1 { font-size: clamp(38px, 3.5vw, 72px); line-height: 1.06; letter-spacing: -.02em; } html[data-copy="story"] .hero h1 .l1, html[data-copy="story"] .hero h1 .l2 { display: block; white-space: nowrap; } html[data-copy="story"] .hero p.lead { max-width: none; margin: 22px 0 30px; font-size: clamp(18px, 1.5vw, 29px); line-height: 1.38; font-weight: 400; color: #b9c6f2; } .st-feats { display: flex; flex-wrap: wrap; gap: 14px clamp(18px, 2.1vw, 40px); margin: 0 0 36px; } .st-feats span { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.35; color: #dfe5fb; } .st-feats .pu-i { width: 30px; height: 30px; stroke-width: 1.4; color: #dfe5fb; } @media (max-width: 1100px) { html[data-copy="story"] .hero h1 .l1, html[data-copy="story"] .hero h1 .l2 { white-space: normal; } .st-lb { display: none; } } /* on the globe the live site's paragraph keeps a readable measure, so the cards keep their room */ html:not([data-copy="story"]) .hero-globe p.lead { max-width: 640px; width: auto; min-width: 0; } .glb.sc::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, #01143c 0, rgba(1, 20, 60, 0) 16%), linear-gradient(0deg, #011645 0, rgba(1, 22, 69, 0) 16%), linear-gradient(90deg, #01143c 0, rgba(1, 20, 60, 0) 30%); } /* Globe fade (?fade=none|light|medium|strong): the whole composition, artwork and cards, sinks into the navy by steps, to judge how present the globe should be */ .glb { transition: opacity .4s; } html[data-fade="light"] .glb { opacity: .78; } html[data-fade="medium"] .glb { opacity: .56; } html[data-fade="strong"] .glb { opacity: .36; } /* ---------- Hero tone (?tone=blue|light) ---------- Light turns the hero and its copy whitish: the text and buttons flip to ink, the Globe uses the light artwork (edge colours sampled from it) with white-glass cards, and the Layers/Console animations get their own light palette (see "Layers and Console, light" below). */ html[data-tone="light"] .hero { color: var(--ink); background: radial-gradient(70% 90% at 75% 40%, #dcebfb, transparent 60%), linear-gradient(180deg, #eef6fd, #e3eefa); } html[data-tone="light"] .hero h1 { color: var(--navy); } html[data-tone="light"] .hero h1 .with { color: var(--peri-d); } html[data-tone="light"] .hero p.lead { color: var(--ink-2); } html[data-tone="light"] .hero .trust { color: var(--ink-3); } html[data-tone="light"] .hero .trust .pu-i { color: #13936a; } html[data-tone="light"] .hero .btn-w { background: var(--navy); color: #fff; box-shadow: 0 0 0 6px rgba(15, 28, 77, .1); } html[data-tone="light"] .hero .btn-w:hover { background: var(--hdr); box-shadow: 0 0 0 8px rgba(15, 28, 77, .12); } html[data-tone="light"] .hero .btn-g { color: var(--navy); box-shadow: inset 0 0 0 1.5px rgba(15, 28, 77, .35); } html[data-tone="light"] .hero .btn-g:hover { background: rgba(15, 28, 77, .05); } html[data-tone="light"][data-copy="accent"] .hero h1 .l2 { color: var(--peri-d); } html[data-tone="light"][data-copy="verbs"] .hero h1 .l1 { color: var(--peri-d); } html[data-tone="light"][data-copy="verbs"] .hero h1 .l1::after { background: rgba(79, 99, 173, .4); } html[data-tone="light"][data-copy="story"] .hero p.lead { color: #4a5a86; } html[data-tone="light"] .st-feats span { color: var(--ink); } html[data-tone="light"] .st-feats .pu-i { color: var(--navy); } /* Globe, light */ html[data-tone="light"] .hero-globe { background: linear-gradient(180deg, #eaf5fd 0, #eef7fd var(--gh), #eef4fb calc(var(--gh) + 260px), #e6eef9 100%); } html[data-tone="light"] .glb::after { background: linear-gradient(90deg, #eaf5fd 0, rgba(234, 245, 253, 0) 24%), linear-gradient(0deg, #eef7fd 0, rgba(238, 247, 253, 0) 14%); } html[data-tone="light"] .glb.sc::before { background: linear-gradient(180deg, #eaf5fd 0, rgba(234, 245, 253, 0) 16%), linear-gradient(0deg, #eef7fd 0, rgba(238, 247, 253, 0) 16%), linear-gradient(90deg, #eaf5fd 0, rgba(234, 245, 253, 0) 30%); } html[data-tone="light"] .gc { color: #1c2d66; background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(236, 244, 255, .7)); box-shadow: inset 0 0 0 1px rgba(80, 130, 225, .38), inset 0 1px 0 #fff, 0 12px 30px rgba(40, 90, 180, .16); } html[data-tone="light"] .gc h5 { color: var(--navy); } html[data-tone="light"] .gc h5 .pu-i, html[data-tone="light"] .gc .pu-i { color: #2f64d8; } html[data-tone="light"] .gc.det h5 { border-bottom-color: rgba(80, 130, 225, .22); } html[data-tone="light"] .gd b { color: var(--navy); } html[data-tone="light"] .gd small, html[data-tone="light"] .gd .gt small { color: #52629a; } html[data-tone="light"] .gd em { color: #0f9a62; } html[data-tone="light"] .gc.rsp li, html[data-tone="light"] .gc.inv li, html[data-tone="light"] .gc.evi li { color: #22356f; } html[data-tone="light"] .gc.inv .cv { border-color: #7d8fc4; } html[data-tone="light"] .gc.evi ol::before { border-left-color: rgba(60, 100, 200, .4); } html[data-tone="light"] .gc.evi time { color: #52629a; } html[data-tone="light"] .gc.evi li i { background: #8fa3dd; } html[data-tone="light"] .gc.evi li.r i { background: #e5484f; } html[data-tone="light"] .gc.evi li.g i { background: #13a36b; } html[data-tone="light"] .gl-links .lk { stroke: rgba(47, 100, 216, .7); } html[data-tone="light"] .gl-links .lk-f { stroke: #fff; } html[data-tone="light"] .gl-tag { color: rgba(40, 60, 120, .6); } html[data-tone="light"] .gl-tag b { color: var(--navy); } /* Command sits on the hero: over a light hero its text goes ink until it turns solid (scroll or open menu) */ html[data-tone="light"] .hx-command:not(.scrolled):not(:has(.x)):not(:has(.hx-dd:hover)):not(:has(:focus-visible)) { color: var(--navy); box-shadow: inset 0 -1px 0 rgba(15, 28, 77, .1); } html[data-tone="light"] .hx-command:not(.scrolled):not(:has(.x)):not(:has(.hx-dd:hover)):not(:has(:focus-visible)) .hx-menu > a, html[data-tone="light"] .hx-command:not(.scrolled):not(:has(.x)):not(:has(.hx-dd:hover)):not(:has(:focus-visible)) .hx-dd > button, html[data-tone="light"] .hx-command:not(.scrolled):not(:has(.x)):not(:has(.hx-dd:hover)):not(:has(:focus-visible)) .hx-ua, html[data-tone="light"] .hx-command:not(.scrolled):not(:has(.x)):not(:has(.hx-dd:hover)):not(:has(:focus-visible)) .hx-link { color: var(--navy); } html[data-tone="light"] .hx-command:not(.scrolled):not(:has(.x)):not(:has(.hx-dd:hover)):not(:has(:focus-visible)) .hx-ua b { color: var(--peri-d); } html[data-tone="light"] .hx-command:not(.scrolled):not(:has(.x)):not(:has(.hx-dd:hover)):not(:has(:focus-visible)) .hx-btn.w:not(.x) { background: var(--navy); color: #fff; } html[data-tone="light"] .hx-command:not(.scrolled):not(:has(.x)):not(:has(.hx-dd:hover)):not(:has(:focus-visible)) .hx-tab { box-shadow: 0 0 0 1px rgba(15, 28, 77, .12); } /* ---------- Layers and Console, light ---------- The same drawing in blue ink on white: strokes and fills that were pale-on-navy become blue at similar faintness, cards and toasts turn white with a soft shadow, threats keep their red, and the SVG gradients (membrane band, glow, flare, slab fill) are re-coloured through their stops. */ html[data-tone="light"] .tsh::before { background-image: radial-gradient(rgba(47, 80, 160, .13) 1px, transparent 1.3px); } html[data-tone="light"] .tsh .zn { fill: rgba(26, 48, 120, .45); } html[data-tone="light"] #tsvBandG stop:nth-child(1) { stop-color: #3f6fd8; stop-opacity: .16; } html[data-tone="light"] #tsvBandG stop:nth-child(2) { stop-color: #3f6fd8; stop-opacity: .06; } html[data-tone="light"] #tsvBandG stop:nth-child(3) { stop-color: #3f6fd8; stop-opacity: 0; } html[data-tone="light"] #tsvHot stop:nth-child(1) { stop-color: #5b8def; stop-opacity: .3; } html[data-tone="light"] #tsvHot stop:nth-child(2) { stop-color: #5b8def; stop-opacity: 0; } html[data-tone="light"] #tsvFlare stop:nth-child(1) { stop-color: #2f64d8; stop-opacity: .5; } html[data-tone="light"] #tsvFlare stop:nth-child(2) { stop-color: #5b8def; stop-opacity: .2; } html[data-tone="light"] #tsvFlare stop:nth-child(3) { stop-color: #5b8def; stop-opacity: 0; } html[data-tone="light"] #tsvLayer stop:nth-child(1) { stop-color: #4b7be0; stop-opacity: .11; } html[data-tone="light"] #tsvLayer stop:nth-child(2) { stop-color: #6597ff; stop-opacity: .05; } html[data-tone="light"] .tsv .ttl { fill: rgba(20, 36, 96, .62); } html[data-tone="light"] .tsv .tsb { fill: rgba(60, 80, 150, .5); } html[data-tone="light"] .tsv .ic { color: rgba(47, 90, 200, .55); } html[data-tone="light"] .tsv .ring { fill: rgba(255, 255, 255, .8); stroke: rgba(60, 110, 220, .35); } html[data-tone="light"] .tsv .th .ring { stroke: rgba(214, 64, 84, .35); } html[data-tone="light"] .tsv .th .ic { color: rgba(214, 64, 84, .6); } html[data-tone="light"] .tsv .th.on .ring { stroke: rgba(214, 64, 84, .75); } html[data-tone="light"] .tsv .th.on .ic { color: rgba(200, 40, 60, .9); } html[data-tone="light"] .tsv .th.on .ttl, html[data-tone="light"] .tsv .cp.on .ttl { fill: rgba(15, 28, 77, .9); } html[data-tone="light"] .tsv .cp.on .ring { stroke: rgba(47, 100, 216, .8); fill: rgba(225, 236, 255, .9); } html[data-tone="light"] .tsv .cp.on .ic { color: rgba(30, 80, 200, .95); } html[data-tone="light"] .tsv .tl { stroke: rgba(214, 64, 84, .3); } html[data-tone="light"] .tsv .tend { fill: rgba(214, 64, 84, .5); } html[data-tone="light"] .tsv .fb path { stroke: rgba(47, 100, 216, .14); } html[data-tone="light"] .tsv .fb.on path { stroke: rgba(47, 100, 216, .45); } html[data-tone="light"] .tsv .sh-main, html[data-tone="light"] .tsv.v-membrane .sh-main { stroke: rgba(47, 100, 216, .55); } html[data-tone="light"] .tsv .sh-in { stroke: rgba(47, 100, 216, .2); } html[data-tone="light"] .tsv .mesh-p, html[data-tone="light"] .tsv.v-membrane .mesh-p { stroke: rgba(47, 100, 216, .15); } html[data-tone="light"] .tsv .speck { fill: rgba(47, 100, 216, .35); } html[data-tone="light"] .tsv .pa { fill: #e5484f; filter: drop-shadow(0 0 4px rgba(229, 72, 79, .5)); } html[data-tone="light"] .tsv .pa2 { fill: #e5484f; opacity: .3; } html[data-tone="light"] .tsv .pb { fill: #2f64d8; filter: drop-shadow(0 0 4px rgba(47, 100, 216, .5)); } html[data-tone="light"] .tsv .sh-halo { stroke: rgba(47, 100, 216, .06); } html[data-tone="light"] .tsv .sh-ring { stroke: #2f64d8; } html[data-tone="light"] .tsv .sh-rimglow { stroke: rgba(80, 140, 255, .35); } html[data-tone="light"] .tsv .mlogo .tr1 { fill: #e0343c; } html[data-tone="light"] .tsv .mlogo .tr2 { fill: #8f949c; } html[data-tone="light"] .tsv .wlbl { fill: rgba(200, 50, 70, .6); } html[data-tone="light"] .tsv .chip .ttl { fill: rgba(20, 36, 96, .75); } html[data-tone="light"] .tsv.v-quiet .chip .ttl { fill: rgba(20, 36, 96, .62); } html[data-tone="light"] .tsv.v-quiet .wlbl { fill: rgba(200, 50, 70, .45); } html[data-tone="light"] .tsv .amb-t { fill: #e5484f; } html[data-tone="light"] .tsv .amb-c { fill: #2f64d8; } html[data-tone="light"] .tsv .nt line { stroke: rgba(26, 48, 120, .3); } html[data-tone="light"] .tsv .nt text { fill: rgba(26, 48, 120, .45); } /* layers */ html[data-tone="light"] .tsv .ly-v { stroke: rgba(47, 100, 216, .2); } html[data-tone="light"] .tsv .ly { opacity: .85; } html[data-tone="light"] .tsv .ly.on { opacity: 1; } html[data-tone="light"] .tsv .ly-p { stroke: rgba(47, 100, 216, .36); } html[data-tone="light"] .tsv .ly-e { fill: rgba(47, 100, 216, .05); stroke: rgba(47, 100, 216, .2); } html[data-tone="light"] .tsv .ly.on .ly-hi { stroke: rgba(47, 100, 216, .45); } html[data-tone="light"] .tsv .ly-g { stroke: rgba(47, 100, 216, .09); } html[data-tone="light"] .tsv .ly-dot { fill: rgba(47, 100, 216, .5); } html[data-tone="light"] .tsv .ly-rec path { fill: rgba(47, 100, 216, .04); stroke: rgba(47, 100, 216, .3); } html[data-tone="light"] .tsv .ly-rec .ln { stroke: rgba(47, 100, 216, .4); } html[data-tone="light"] .tsv .ly .ic { color: rgba(47, 90, 200, .7); } html[data-tone="light"] .tsv .ly-n { fill: rgba(26, 48, 120, .6); } html[data-tone="light"] .tsv .ly-c { filter: drop-shadow(0 6px 14px rgba(30, 70, 160, .12)); } html[data-tone="light"] .tsv .ly-c rect { fill: rgba(255, 255, 255, .92); stroke: rgba(47, 100, 216, .26); } html[data-tone="light"] .tsv .ly-c .ttl { fill: rgba(15, 28, 77, .88); } html[data-tone="light"] .tsv .ly-c .tsb { fill: rgba(70, 90, 150, .85); } html[data-tone="light"] .tsv .ly.on .ly-c rect { stroke: rgba(47, 100, 216, .5); } html[data-tone="light"] .tsv .dx-pill rect { fill: rgba(229, 72, 79, .1); stroke: rgba(229, 72, 79, .5); } html[data-tone="light"] .tsv .dx-pill text { fill: #c0303a; } html[data-tone="light"] .tsv .dx-pill.alert rect { fill: rgba(214, 140, 20, .12); stroke: rgba(214, 140, 20, .5); } html[data-tone="light"] .tsv .dx-pill.alert text { fill: #9a6100; } /* console */ html[data-tone="light"] .tsv .cs { filter: drop-shadow(0 16px 30px rgba(30, 70, 160, .1)); } html[data-tone="light"] .tsv .cs-w { fill: rgba(255, 255, 255, .62); stroke: rgba(47, 100, 216, .28); } html[data-tone="light"] .tsv .cs-l { stroke: rgba(47, 100, 216, .14); } html[data-tone="light"] .tsv .cs-dot { fill: rgba(47, 100, 216, .25); } html[data-tone="light"] .tsv .cs-t { fill: rgba(15, 28, 77, .7); } html[data-tone="light"] .tsv .cs-t.dim { fill: rgba(60, 80, 150, .45); } html[data-tone="light"] .tsv .cs .ic { color: rgba(47, 90, 200, .45); } html[data-tone="light"] .tsv .kpi rect { fill: rgba(255, 255, 255, .75); stroke: rgba(47, 100, 216, .18); } html[data-tone="light"] .tsv .kpi .kb { fill: rgba(47, 100, 216, .4); } html[data-tone="light"] .tsv .kl { fill: rgba(60, 80, 150, .62); } html[data-tone="light"] .tsv .kv { fill: rgba(15, 28, 77, .75); } html[data-tone="light"] .tsv .cs-b { fill: rgba(255, 255, 255, .5); stroke: rgba(47, 100, 216, .14); } html[data-tone="light"] .tsv .cs-h { fill: rgba(60, 80, 150, .5); } html[data-tone="light"] .tsv .bar { fill: rgba(47, 100, 216, .18); } html[data-tone="light"] .tsv .bar.b2 { fill: rgba(47, 100, 216, .28); } html[data-tone="light"] .tsv .bar.b3 { fill: rgba(47, 100, 216, .11); } html[data-tone="light"] .tsv .row rect:first-child { fill: rgba(255, 255, 255, .75); stroke: rgba(47, 100, 216, .14); } html[data-tone="light"] .tsv .row .rs, html[data-tone="light"] .tsv .toast .rs { fill: rgba(47, 100, 216, .45); } html[data-tone="light"] .tsv .row .rt { fill: rgba(15, 28, 77, .72); } html[data-tone="light"] .tsv .row .rd { fill: rgba(60, 80, 150, .5); } html[data-tone="light"] .tsv .toast { filter: drop-shadow(0 8px 16px rgba(30, 70, 160, .14)); } html[data-tone="light"] .tsv .toast rect:first-child { fill: rgba(255, 255, 255, .97); stroke: rgba(47, 100, 216, .3); } html[data-tone="light"] .tsv .toast.fresh rect:first-child { stroke: rgba(47, 100, 216, .6); } html[data-tone="light"] .tsv .toast .rt { fill: rgba(15, 28, 77, .9); } html[data-tone="light"] .tsv .toast .rd { fill: rgba(60, 80, 150, .7); } html[data-tone="light"] .tsv .toast .ic { color: rgba(47, 90, 200, .8); } /* ---------- Trusted by (?trust=list|marquee|off) ---------- A band between the hero copy and the product screen. The client logos are white-backed JPGs, so on navy they are greyed and inverted, and the strip is screened as a whole (the white drops out, the mark reads soft white); on the light tone they are greyed and multiplied. List shows the first eight in one row; Marquee runs all fourteen (the set is doubled so the loop is seamless), fading at the edges and pausing on hover. */ .tb { position: relative; margin-top: clamp(40px, 4vw, 64px); } .tb-l { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; font-size: 11.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(174, 188, 239, .75); } .tb-l::before { content: ""; width: 40px; height: 1px; background: currentColor; opacity: .7; } .tb-set { display: flex; align-items: center; gap: 56px; } .tb-view { mix-blend-mode: screen; } .tb-set img { flex: none; height: 46px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1) invert(1) contrast(1.15); opacity: .72; transition: opacity .3s; } .tb-set img:hover { opacity: 1; } html[data-tone="light"] .tb-l { color: var(--ink-3); } html[data-tone="light"] .tb-view { mix-blend-mode: multiply; } html[data-tone="light"] .tb-set img { filter: grayscale(1) contrast(1.1); opacity: .66; } html[data-trust="list"] .tb-set { justify-content: space-between; } html[data-trust="list"] .tb-set[aria-hidden], html[data-trust="list"] .tb-set img:nth-child(n+9) { display: none; } html[data-trust="marquee"] .tb-view { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } html[data-trust="marquee"] .tb-track { display: flex; width: max-content; animation: tb-run 60s linear infinite; } html[data-trust="marquee"] .tb-set { padding-right: 56px; } html[data-trust="marquee"] .tb-view:hover .tb-track { animation-play-state: paused; } @keyframes tb-run { to { transform: translateX(-50%); } } html.poster .tb-track, html.reduced .tb-track { animation: none !important; } html[data-trust="off"] .tb { display: none; } .tb + .shot { margin-top: clamp(36px, 3.4vw, 52px); } @media (max-width: 1100px) { html[data-trust="list"] .tb-set { flex-wrap: wrap; justify-content: center; gap: 22px 40px; } .tb-set img { height: 38px; } } /* on the Globe the band sits below the artwork, with room to breathe so it never touches the globe */ .hero-globe .tb { margin-top: clamp(32px, 3vw, 56px); } .hero-globe .tb + .shot { margin-top: clamp(40px, 3.6vw, 60px); } /* ---------- After the hero: the platform (?next=pillars|pipeline|layers|bento|screen) ---------- Replaces the product screenshot for now (and the older copy of this section lower down). The section takes the opposite tone of the hero, set once through variables: white after a blue hero, navy after a light one. It scrolls normally; Pillars and Pipeline assemble once in view and then move quietly. */ html:not([data-next="screen"]) #platform, html:not([data-next="screen"]):not([data-hero="screen"]) #heroShot { display: none; } /* the hero meets this section on a straight edge (the wave read as dated after the trust band) */ html:not([data-next="screen"]) .hero .wave { display: none; } html:not([data-next="screen"]) .hero .wide { padding-bottom: clamp(64px, 5vw, 96px); } .plx { --bg: #fff; --card: #f5f7fc; --card2: #fff; --ink: #1f2747; --head: #0f1c4d; --mut: #5c6488; --faint: #8a91ad; --line: #e2e6f1; --acc: #4f63ad; --acc-soft: rgba(79, 99, 173, .1); --ok: #13936a; padding: clamp(80px, 7vw, 120px) 0; background: var(--bg); color: var(--ink); } html[data-tone="light"] .plx { --bg: linear-gradient(180deg, #0f1c4d, #172863); --card: rgba(255, 255, 255, .05); --card2: rgba(255, 255, 255, .08); --ink: #e6ebff; --head: #fff; --mut: #b4bfe6; --faint: #8e98c4; --line: rgba(174, 188, 239, .18); --acc: #aebcef; --acc-soft: rgba(174, 188, 239, .12); --ok: #54d39a; } .plx-in { width: var(--wide); } .plx-head { text-align: center; margin-bottom: clamp(44px, 4vw, 64px); } .plx-head h2 { font-size: clamp(32px, 3vw, 48px); font-weight: 900; line-height: 1.12; letter-spacing: -.01em; color: var(--head); } .plx-head h2::after { content: ""; display: block; width: 90px; height: 4px; margin: 22px auto 0; border-radius: 2px; background: var(--red); } .plx .plx-sub { margin: 22px 0 0; font-size: clamp(18px, 1.5vw, 23px); font-weight: 600; color: var(--head); } .plx .plx-sub span { font: inherit; color: #8c90a1; } html[data-tone="light"] .plx .plx-sub span { color: #8e98c4; } .plx-logo { display: block; width: auto; height: 30px; } .plx-f { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .plx-f li { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; line-height: 1.4; color: var(--ink); } .plx-f .pu-i { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--ok); } .la-chips { display: flex; flex-wrap: wrap; gap: 8px; } .la-chips span { padding: 7px 13px; border-radius: 999px; background: var(--acc-soft); color: var(--ink); font-size: 13.5px; font-weight: 600; } /* Pillars and Pipeline: the user's two pictures, built clean. Soft shadows rather than bloom: one faint blue glow under Mission Control and one red under the agent, matching the calmer glass-and-ink of the rest of the page. Both assemble once when they come into view (.pre until .go). */ .plx-pillars, .plx-pipeline { --blue: #2f5fd0; --red2: #e0343c; --bgc: #fff; background: radial-gradient(60% 45% at 50% 38%, #eef3fd, transparent 70%), #fff; } html[data-tone="light"] .plx-pillars, html[data-tone="light"] .plx-pipeline { --blue: #8fb0ff; --red2: #ff6b72; --bgc: #13235c; background: radial-gradient(60% 45% at 50% 38%, rgba(80, 120, 230, .18), transparent 70%), linear-gradient(180deg, #0f1c4d, #172863); } .pi svg, .pp svg { display: block; } .pi-wires, .pp-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .pi-wires .w, .pp-wires .w { fill: none; stroke: #86a4e6; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.4, 0, .2, 1) 1s; } .pi-wires .nd { fill: #fff; stroke: var(--blue); stroke-width: 2.5; } .pp-wires .nd { fill: var(--blue); stroke: #fff; stroke-width: 2; } .pi-wires .dot, .pp-wires .dot { fill: var(--blue); opacity: 0; } .pp-wires .w.hop { stroke: var(--blue); } #plxArr path { fill: var(--blue); } html[data-tone="light"] .pi-wires .w, html[data-tone="light"] .pp-wires .w { stroke: rgba(143, 176, 255, .55); } html[data-tone="light"] .pi-wires .nd { fill: #13235c; } /* Pillars */ .pi { position: relative; max-width: 1260px; margin: 0 auto; } .pi-wires { z-index: 1; } .pi-mc { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 26px; margin: 0 6%; padding: 26px 30px 30px; border-radius: 18px; background: linear-gradient(180deg, #1f3c8f, #142a6c); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 22px 50px rgba(30, 60, 160, .28); } .pi-mi svg { width: 64px; height: 64px; color: #8fbaff; } .pi-mc b { display: block; font-size: clamp(28px, 2.4vw, 40px); font-weight: 800; line-height: 1.1; } .pi-mc small { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: #a9bdf0; } .pi-cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; margin-top: 64px; } .pi-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 16px 24px; border-radius: 16px; background: #fff; text-align: center; box-shadow: 0 0 0 1px #e5eaf5, 0 18px 40px rgba(20, 45, 120, .1); } .pi-ic { display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; background: #eef2fa; color: #1f3b8f; --i2: var(--red2); } .pi-ic svg { width: 44px; height: 44px; } .pi-card:first-child .pi-ic { color: var(--red2); } .pi-dash { width: 30px; height: 3px; margin: 4px 0 2px; border-radius: 2px; background: var(--blue); } .pi-card b { font-size: 16.5px; font-weight: 800; line-height: 1.25; color: var(--head); } .pi-d { font-size: 13px; line-height: 1.45; color: var(--mut); } .pi-agent { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: -36px; padding: 68px 30px 30px; border-radius: 16px; background: linear-gradient(180deg, #e8363e, #c7262e); color: #fff; box-shadow: 0 26px 60px rgba(214, 40, 48, .26); } .pi-agent::before { content: ""; position: absolute; left: 2%; right: 2%; top: -26px; height: 27px; background: linear-gradient(180deg, #fcdcdd, #ef646a); clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%); } .pi-ai svg { width: 58px; height: 58px; color: #fff; --i2: #d8262e; } .pi-sep { width: 1.5px; height: 54px; background: rgba(255, 255, 255, .45); } .pi-agent b { display: block; font-size: clamp(24px, 2vw, 32px); font-weight: 800; line-height: 1.15; } .pi-agent small { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #ffd9db; } .pi-foot { display: grid; justify-items: center; gap: 12px; margin-top: 36px; } .pi-foot .plx-logo { height: 34px; } .pi-foot small { font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--faint); } .pi-mc, .pi-card, .pi-agent, .pi-foot { transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1); } .pi-card { transition-delay: calc(.25s + var(--i) * .09s); } .pi-mc { transition-delay: .75s; } .pi-foot { transition-delay: .9s; } .plx.pre:not(.go) .pi-mc { opacity: 0; transform: translateY(-26px); } .plx.pre:not(.go) .pi-card { opacity: 0; transform: translateY(34px); } .plx.pre:not(.go) .pi-agent, .plx.pre:not(.go) .pi-foot { opacity: 0; transform: translateY(18px); } .plx.pre:not(.go) .pi-wires .w { stroke-dashoffset: 1; transition: none; } html[data-tone="light"] .pi-mc { background: linear-gradient(180deg, #2b4db6, #1c3587); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 22px 50px rgba(0, 0, 0, .3); } html[data-tone="light"] .pi-card { background: linear-gradient(180deg, #1f3378, #1a2b69); box-shadow: inset 0 0 0 1px rgba(174, 188, 239, .2), 0 18px 40px rgba(0, 0, 0, .22); } html[data-tone="light"] .pi-ic { background: rgba(255, 255, 255, .08); color: #b9cbff; } html[data-tone="light"] .pi-card:first-child .pi-ic { color: var(--red2); } /* Pipeline */ .plx-pipeline .plx-in { width: min(1600px, 100% - 2 * var(--gut)); } .pp { position: relative; display: grid; grid-template-columns: 250px 130px 196px 44px minmax(0, 1fr) 44px 280px; grid-template-areas: "in . agent . caps . mc" "steps steps steps steps steps steps steps"; align-items: center; row-gap: 70px; } .pp-wires { z-index: 0; } .pp-in, .pp-agent, .pp-caps, .pp-mc, .pp-steps { position: relative; z-index: 1; } .pp-in { grid-area: in; display: grid; gap: 22px; } .pp-src { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #e3e9f6, 0 14px 30px rgba(20, 45, 120, .07); transition: box-shadow .5s; } .pp-src.on { box-shadow: 0 0 0 1.5px var(--blue), 0 14px 30px rgba(47, 95, 208, .16); } .pp-sic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #eaf0fc; color: var(--blue); } .pp-sic svg { width: 26px; height: 26px; } .pp-src b { display: block; font-size: 15.5px; color: var(--head); } .pp-src > div > span { display: block; font-size: 12.5px; line-height: 1.4; color: var(--mut); } .pp-pill { position: absolute; z-index: 2; transform: translate(-50%, -50%); padding: 5px 14px; border-radius: 999px; background: #e7eefc; box-shadow: 0 0 0 1px #d2def7; font-size: 13px; font-weight: 700; color: #1f3b8f; } .pp-agent { grid-area: agent; display: grid; place-items: center; } .pp-ring { display: grid; align-content: center; justify-items: center; gap: 4px; width: 196px; height: 196px; padding: 18px; border-radius: 50%; background: #fff; text-align: center; box-shadow: 0 0 0 12px rgba(242, 62, 69, .06), 0 0 0 1px #f3d2d4, 0 20px 50px rgba(224, 52, 60, .18); } /* the logo's parts, cropped from the official file (563.4 × 80.5; the mark is the first 63.5, the wordmark starts just after 69) */ .tr-mark { --h: 40px; display: block; flex: none; width: calc(var(--h) * .79); height: var(--h); overflow: hidden; } .tr-word { --h: 24px; display: block; width: calc(var(--h) * 6.15); height: var(--h); overflow: hidden; } .tr-mark img, .tr-word img { display: block; width: auto; max-width: none; height: 100%; } .tr-word img { margin-left: calc(var(--h) * -.86); } .pp-ring .tr-mark { --h: 50px; margin-bottom: 6px; } .pp-ring .tr-word { --h: 20px; } html[data-tone="light"] .pp-ring .tr-word { background: #fff; box-sizing: content-box; padding: 3px 6px; border-radius: 5px; } .pi-ic .tr-mark { --h: 42px; } .pp-cic .tr-mark { --h: 30px; } .pi-ai .tr-mark { --h: 60px; border-radius: 3px; box-shadow: 0 6px 16px rgba(120, 0, 10, .25); } .pp-ring b { margin-top: 2px; font-size: 16px; line-height: 1.2; color: var(--head); } .pp-ring small { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); } .pp-caps { grid-area: caps; padding: 28px 14px 14px; border-radius: 18px; border: 1.5px dashed #c9d6f0; } .pp-lab { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 0 12px; background: var(--bgc); font-size: 11.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; color: #6b7fb8; } .pp-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .pp-cap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 10px 18px; border-radius: 14px; text-align: center; transition: transform .5s, box-shadow .5s; } .pp-cap:not(:last-child)::after { content: ""; position: absolute; right: -11px; top: 50%; width: 6px; height: 6px; border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); transform: translateY(-50%) rotate(45deg); } .pp-cap.t-b { background: linear-gradient(180deg, #f3f7ff, #e8effc); box-shadow: inset 0 0 0 1px #d6e2f8; } .pp-cap.t-r { background: linear-gradient(180deg, #fff6f6, #fdebec); box-shadow: inset 0 0 0 1px #f6d4d6; } .pp-cic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; } .pp-cic svg { width: 30px; height: 30px; } .t-b .pp-cic { color: var(--blue); --i2: var(--red2); } .t-r .pp-cic { color: var(--red2); --i2: var(--blue); } .pp-cap b { display: flex; align-items: center; min-height: 3.8em; font-size: 14px; line-height: 1.25; color: var(--head); } .pp-cap i { width: 26px; height: 3px; border-radius: 2px; } .t-b i { background: var(--blue); } .t-r i { background: var(--red2); } .pp-cap > span:last-child { font-size: 12.5px; line-height: 1.45; color: var(--mut); } .pp-cap.t-b.on { transform: translateY(-6px); box-shadow: inset 0 0 0 1.5px var(--blue), 0 16px 30px rgba(47, 95, 208, .18); } .pp-cap.t-r.on { transform: translateY(-6px); box-shadow: inset 0 0 0 1.5px var(--red2), 0 16px 30px rgba(224, 52, 60, .16); } .pp-mc { grid-area: mc; display: grid; justify-items: center; gap: 6px; padding: 24px 20px; border-radius: 18px; background: #fff; text-align: center; box-shadow: 0 0 0 1.5px #bcd0f4, 0 20px 44px rgba(30, 60, 160, .14); transition: box-shadow .5s; } .pp-mc.on { box-shadow: 0 0 0 2px var(--blue), 0 20px 44px rgba(47, 95, 208, .24); } .pp-mc > b:first-child { font-size: 24px; font-weight: 800; color: var(--head); } .pp-mc small { font-size: 11px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--faint); } .pp-screen { width: 100%; margin: 12px 0 8px; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 24px rgba(10, 20, 60, .25); } .pp-tag { font-size: 16px; color: var(--head); } .pp-steps { grid-area: steps; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; } .pp-step { display: flex; align-items: flex-start; gap: 16px; opacity: .72; transition: opacity .5s; } .pp-step.on { opacity: 1; } .pp-stic { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #cdd9f2; transition: box-shadow .5s; } .pp-stic svg { width: 28px; height: 28px; } .pp-stic.ic-b { color: var(--blue); } .pp-stic.ic-r { color: var(--red2); box-shadow: inset 0 0 0 1.5px #f3cdd0; } .pp-step.on .pp-stic.ic-b { box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 6px rgba(47, 95, 208, .12); } .pp-step.on .pp-stic.ic-r { box-shadow: inset 0 0 0 1.5px var(--red2), 0 0 0 6px rgba(224, 52, 60, .1); } .pp-step > div { flex: 1; min-width: 0; } .pp-step b { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 13px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--head); } .pp-step:not(:last-child) b::after { content: ""; flex: 1; border-top: 2px dotted #cfd9ee; } .pp-step > div > span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--mut); } .pp-in, .pp-agent, .pp-caps, .pp-mc, .pp-steps, .pp-pill { transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1); } .pp-agent { transition-delay: .2s; } .pp-caps { transition-delay: .4s; } .pp-mc { transition-delay: .6s; } .pp-steps { transition-delay: .8s; } .pp-pill { transition-delay: 1s; } .plx.pre:not(.go) .pp-in { opacity: 0; transform: translateX(-24px); } .plx.pre:not(.go) .pp-agent { opacity: 0; transform: scale(.9); } .plx.pre:not(.go) .pp-caps, .plx.pre:not(.go) .pp-mc, .plx.pre:not(.go) .pp-steps { opacity: 0; transform: translateY(20px); } .plx.pre:not(.go) .pp-pill { opacity: 0; } .plx.pre:not(.go) .pp-wires .w { stroke-dashoffset: 1; transition: none; } html[data-tone="light"] .pp-src, html[data-tone="light"] .pp-mc { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(174, 188, 239, .2), 0 14px 30px rgba(0, 0, 0, .2); } html[data-tone="light"] .pp-src.on, html[data-tone="light"] .pp-mc.on { box-shadow: inset 0 0 0 1.5px var(--blue), 0 14px 30px rgba(0, 0, 0, .25); } html[data-tone="light"] .pp-sic { background: rgba(143, 176, 255, .14); } html[data-tone="light"] .pp-pill { background: #1c3079; box-shadow: 0 0 0 1px rgba(143, 176, 255, .35); color: #dfe7ff; } html[data-tone="light"] .pp-ring { background: rgba(255, 255, 255, .07); box-shadow: 0 0 0 12px rgba(255, 107, 114, .08), 0 0 0 1px rgba(255, 150, 156, .35), 0 20px 50px rgba(0, 0, 0, .3); } html[data-tone="light"] .pp-caps { border-color: rgba(143, 176, 255, .35); } html[data-tone="light"] .pp-lab { color: #9fb2ea; } html[data-tone="light"] .pp-cap.t-b { background: rgba(80, 120, 230, .14); box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .28); } html[data-tone="light"] .pp-cap.t-r { background: rgba(230, 60, 70, .12); box-shadow: inset 0 0 0 1px rgba(255, 130, 136, .28); } html[data-tone="light"] .pp-cic, html[data-tone="light"] .pp-stic { background: rgba(255, 255, 255, .08); } html[data-tone="light"] .pp-step:not(:last-child) b::after { border-color: rgba(174, 188, 239, .3); } @media (max-width: 1500px) { .pp { grid-template-columns: 230px 110px 180px 36px minmax(0, 1fr); grid-template-areas: "in . agent . caps" "mc mc mc mc mc" "steps steps steps steps steps"; row-gap: 48px; } .pp-mc { justify-self: center; width: min(520px, 100%); } } @media (max-width: 1100px) { .pi-cards, .pp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp { grid-template-columns: 1fr; grid-template-areas: "in" "agent" "caps" "mc" "steps"; row-gap: 32px; } .pp-steps { grid-template-columns: 1fr 1fr; } .pp-pill, .pp-cap::after { display: none; } } /* Layers: console, capabilities, agent as three labelled bands */ .la { display: grid; gap: 16px; } .la-band { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: stretch; } .la-lab { display: flex; flex-direction: column; justify-content: center; padding-left: 18px; border-left: 3px solid var(--acc); } .la-lab b { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--head); } .la-lab span { margin-top: 4px; font-size: 13px; color: var(--mut); } .la-body { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; padding: 22px 26px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); } .la-console .la-body { background: var(--navy); box-shadow: none; } html[data-tone="light"] .la-console .la-body { background: rgba(255, 255, 255, .1); } .la-mc b { display: block; font-size: 22px; font-weight: 800; color: #fff; } .la-mc span { font-size: 14px; color: #b4bfe6; } .la-console .la-chips span { background: rgba(255, 255, 255, .1); color: #e6ebff; } .la-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 14px; padding: 14px; } .la-cap { padding: 20px; border-radius: 14px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); } .la-h { display: flex; align-items: center; gap: 10px; } .la-h .pu-i { width: 22px; height: 22px; color: var(--acc); } .la-h b { font-size: 17px; color: var(--head); } .la-cap p { margin: 8px 0 14px; font-size: 14px; line-height: 1.5; color: var(--mut); } .la-agent .la-body { box-shadow: inset 0 0 0 1.5px var(--red); } .la-ag { display: flex; align-items: center; gap: 16px; } .la-ag b { font-size: 18px; color: var(--head); } /* Bento: the slogan as columns, a small product-style picture in each big tile */ .bx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .bx-wide { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; padding: 22px 26px; border-radius: 18px; } .bx-mc { background: var(--navy); color: #fff; } html[data-tone="light"] .bx-mc { background: rgba(255, 255, 255, .1); } .bx-mc b { font-size: 22px; font-weight: 800; } .bx-mc > span { font-size: 14px; color: #b4bfe6; flex: 1; min-width: 220px; } .bx-mc .la-chips span { background: rgba(255, 255, 255, .1); color: #e6ebff; } .bx-ag { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--red); } .bx-ag b { display: block; font-size: 18px; color: var(--head); } .bx-ag span { font-size: 14.5px; color: var(--mut); } .bx-col { display: grid; gap: 16px; align-content: start; } .bx-col h3 { margin: 6px 0 -2px; font-size: clamp(28px, 2.4vw, 40px); font-weight: 900; letter-spacing: -.01em; color: var(--head); } .bx-big, .bx-t { padding: 20px 22px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); } .bx-big > b { display: block; font-size: 18px; color: var(--head); } .bx-big > span { display: block; margin: 4px 0 16px; font-size: 14px; color: var(--mut); } .bx-t { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; } .bx-t > i { grid-row: span 2; } .bx-t .pu-i { width: 22px; height: 22px; color: var(--acc); } .bx-t b { font-size: 15.5px; color: var(--head); } .bx-t span { font-size: 13.5px; color: var(--mut); } .bx-cve, .bx-tree, .bx-chain { display: grid; gap: 7px; padding: 12px; border-radius: 12px; background: #0f1c4d; font-size: 12.5px; color: #dfe6ff; } .bx code { font-family: "JetBrains Mono", Consolas, monospace; font-size: 12px; } .bx-cve div { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, .05); } .bx-cve span { color: #aebbe9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bx-cve em { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px; background: rgba(245, 185, 75, .16); color: #f5c46b; } .bx-cve b { color: #ff9aa2; font-weight: 800; } .bx-tree div { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; background: rgba(255, 255, 255, .05); } .bx-tree .d1 { margin-left: 16px; } .bx-tree .d2 { margin-left: 32px; } .bx-tree em { margin-left: auto; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px; background: rgba(255, 111, 125, .18); color: #ff9aa5; } .bx-tree em.q { background: rgba(245, 185, 75, .16); color: #f5c46b; } .bx-chain { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bx-chain div { position: relative; display: grid; gap: 3px; padding: 8px; border-radius: 8px; background: rgba(255, 255, 255, .06); } .bx-chain div:not(:last-child)::after { content: ""; position: absolute; right: -6px; top: 50%; width: 5px; height: 1.5px; background: #7084c7; } .bx-chain code { color: #aebcef; font-size: 11px; } .bx-chain span { font-size: 11.5px; line-height: 1.3; } html[data-tone="light"] .bx-cve, html[data-tone="light"] .bx-tree, html[data-tone="light"] .bx-chain { background: rgba(5, 12, 38, .55); } @media (max-width: 1250px) { .la-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1100px) { .bx { grid-template-columns: 1fr; } .la-band { grid-template-columns: 1fr; } .la-lab { padding-left: 12px; } .la-grid { grid-template-columns: 1fr; } } /* on the navy tone the official mark sits on a small white plate, as the live site shows it on dark */ html[data-tone="light"] .plx-logo { box-sizing: content-box; padding: 5px 9px; border-radius: 7px; background: #fff; } /* overflow-x: hidden on body makes it a scroll container and breaks position: sticky; clip hides the same overflow without that */ body { overflow-x: clip; } /* ---------- Screens (?shots=carry|orbit|off): the third part, the console itself ---------- Takes the hero's tone (the after-hero takes the opposite one), so the three parts alternate. */ .shx { --bg: radial-gradient(70% 50% at 50% 0%, rgba(80, 120, 230, .22), transparent 70%), linear-gradient(180deg, #0f1c4d, #152560); --head: #fff; --ink: #dfe6ff; --mut: #aab6e2; --line: rgba(174, 188, 239, .2); --card: rgba(255, 255, 255, .06); --card-on: #fff; --ink-on: #0f1c4d; --win: rgba(238, 241, 250, .1); --win-line: rgba(174, 188, 239, .22); --bar: #aab7e6; --url: rgba(255, 255, 255, .08); --blue: #8fb0ff; --red2: #ff6b72; --icbg: rgba(255, 255, 255, .08); position: relative; overflow: hidden; padding: clamp(80px, 7vw, 120px) 0; background: var(--bg); color: var(--ink); } html[data-tone="light"] .shx { --bg: radial-gradient(70% 50% at 50% 0%, #e8eefc, transparent 70%), #f5f7fc; --head: #0f1c4d; --ink: #1f2747; --mut: #5c6488; --line: #dfe4f0; --card: #fff; --card-on: #0f1c4d; --ink-on: #fff; --win: #e4e9f5; --win-line: #d5dcee; --bar: #6f7aa3; --url: #fff; --blue: #2f5fd0; --red2: #e0343c; --icbg: #eef2fa; } .shx-in { width: var(--wide); } .shx-head { text-align: center; margin-bottom: clamp(40px, 3.6vw, 60px); } .shx-head h2 { font-size: clamp(32px, 3vw, 48px); font-weight: 900; line-height: 1.12; letter-spacing: -.01em; color: var(--head); } .shx-head h2::after { content: ""; display: block; width: 90px; height: 4px; margin: 22px auto 0; border-radius: 2px; background: var(--red); } .shx-head p { max-width: 760px; text-wrap: balance; margin: 20px auto 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--mut); } /* the window every screen sits in */ .shx-win { border-radius: 14px; background: var(--win); padding: 0 7px 7px; box-shadow: inset 0 0 0 1px var(--win-line), 0 40px 90px rgba(5, 12, 45, .45); } html[data-tone="light"] .shx-win { box-shadow: inset 0 0 0 1px var(--win-line), 0 30px 70px rgba(15, 28, 77, .18); } .shx-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 6px; font-size: 11.5px; color: var(--bar); font-family: "JetBrains Mono", Consolas, monospace; } .shx-bar i { width: 9px; height: 9px; border-radius: 50%; background: #cfd5e8; } .shx-bar i:nth-child(1) { background: #f4a1a4; } .shx-bar i:nth-child(2) { background: #f3d18a; } .shx-bar i:nth-child(3) { background: #9edbb9; } .shx-bar span { margin-left: 10px; flex: 1; max-width: 460px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 3px 12px; border-radius: 6px; background: var(--url); } .shx-bar em { font-style: normal; } /* one screen shape for every panel (they differ a little); the panel sits at the top, navy below */ .shx-scr { position: relative; aspect-ratio: 1600 / 960; border-radius: 8px; overflow: hidden; background: #111418; } html[data-tone="light"] .shx-scr, html[data-tone="light"] .sxmg-scr { background: #f3f5f9; } .sx-img { display: block; width: 100%; height: auto; } /* the live app pages, over the pictures: 1600 x 960 iframes scaled to the window, cross-faded */ .sx-live { position: absolute; inset: 0; z-index: 3; overflow: hidden; border-radius: inherit; pointer-events: none; } .sx-live iframe { position: absolute; left: 0; top: 0; width: 1600px; height: 960px; border: 0; transform-origin: 0 0; opacity: 0; transition: opacity .35s ease; background: transparent; } .sx-live iframe.on { opacity: 1; } .shx-orbit .sx-live { opacity: 0; transition: opacity .35s ease; } .shx-orbit .sx-live.show { opacity: 1; } html[data-tone="light"] .sx-d, html:not([data-tone="light"]) .sx-l { display: none; } /* step dots for a capability shown in several screens */ .sx-steps { display: inline-flex; gap: 5px; margin-left: 10px; vertical-align: middle; } .sx-steps i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); } .sx-steps i.on { background: var(--red); } .shx .tr-mark { --h: 26px; } /* Carry: one console window whose tab strip receives the after-hero's cards */ .sxmg { position: relative; max-width: 1280px; margin: 0 auto; } .sxmg-tabs { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 0 18px; } .sxmg-tab { display: flex; align-items: center; gap: 12px; min-height: 74px; padding: 12px 16px; border: 0; border-radius: 14px 14px 0 0; text-align: left; cursor: pointer; font: inherit; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); transition: background .35s, color .35s, box-shadow .35s; will-change: transform, opacity; } .sxmg-tab b { font-size: 14.5px; font-weight: 700; line-height: 1.3; } .sxmg-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--icbg); } .sxmg-ic svg { width: 24px; height: 24px; } .sxmg-tab.ic-b .sxmg-ic { color: var(--blue); --i2: var(--red2); } .sxmg-tab.ic-r .sxmg-ic { color: var(--red2); --i2: var(--blue); } .sxmg-tab .tr-mark { --h: 26px; } .sxmg-tab.on { background: var(--card-on); color: var(--ink-on); box-shadow: inset 0 3px 0 var(--red), 0 -10px 30px rgba(5, 12, 45, .2); } html:not([data-tone="light"]) .sxmg-tab.on .sxmg-ic { background: #eef2fa; } html:not([data-tone="light"]) .sxmg-tab.on.ic-b .sxmg-ic { color: #2f5fd0; --i2: #e0343c; } html:not([data-tone="light"]) .sxmg-tab.on.ic-r .sxmg-ic { color: #e0343c; --i2: #2f5fd0; } html[data-tone="light"] .sxmg-win { --win: #fff; } html[data-tone="light"] .sxmg-tab { background: #e9edf6; box-shadow: inset 0 0 0 1px #dde3ef; } html[data-tone="light"] .sxmg-tab:hover { background: #f1f4fa; } html[data-tone="light"] .sxmg-tab.on { background: #fff; color: #0f1c4d; box-shadow: inset 0 3px 0 var(--red), inset 1px 0 0 #dde3ef, inset -1px 0 0 #dde3ef, 0 -8px 20px rgba(15, 28, 77, .08); } html[data-tone="light"] .sxmg-tab.on .sxmg-ic { background: #eef2fa; } .sxmg-stage { perspective: 2200px; } .sxmg-win { position: relative; z-index: 1; transform-origin: 50% 0; transition: box-shadow .8s; } .shx-carry.docked .sxmg-win { box-shadow: inset 0 0 0 1px var(--win-line), 0 0 0 1px rgba(143, 176, 255, .18), 0 40px 90px rgba(5, 12, 45, .45); } .sxmg-scr { position: relative; aspect-ratio: 1600 / 960; border-radius: 8px; overflow: hidden; background: #111418; } .sxmg-s { position: absolute; inset: 0 0 auto; opacity: 0; transition: opacity .6s ease; } .sxob-txt .sx-steps { display: inline-flex; margin: 10px 0 0; } .sxob-txt .sx-steps i { display: block; } .sxmg-s.on { opacity: 1; z-index: 1; } .sxmg-cap { min-height: 1.6em; margin: 22px auto 0; text-align: center; font-size: 17px; color: var(--mut); } .sxmg-cap b { color: var(--head); } /* while the cards are carried, the tabs are shown only as each card hands over (set per frame) */ .shx-carry.carry-live .sxmg-tab { opacity: 0; } /* the carried copies: the layer takes the after-hero's classes so they keep its look and tone */ .sxc-layer { position: absolute !important; left: 0; top: 0; width: 0; height: 0; margin: 0; padding: 0 !important; background: none !important; overflow: visible; z-index: 30; pointer-events: none; } .sxc-layer > * { position: absolute; left: 0; top: 0; margin: 0; box-sizing: border-box; overflow: hidden; transform-origin: 0 0; visibility: hidden; transition: none !important; animation: none !important; will-change: transform, opacity; } .sxc-layer .pp-cap::after { display: none; } html[data-tone="light"] .sxc-layer .pp-cap.t-b { background: linear-gradient(rgba(80, 120, 230, .14), rgba(80, 120, 230, .14)), #1a2b69; } html[data-tone="light"] .sxc-layer .pp-cap.t-r { background: linear-gradient(rgba(230, 60, 70, .12), rgba(230, 60, 70, .12)), #1a2b69; } /* Orbit: a 3D carousel; the chosen screen in front at full size, the others turned away behind it */ .shx-orbit .sxob-grid { display: grid; grid-template-columns: minmax(340px, 28%) 1fr; gap: clamp(24px, 3vw, 56px); align-items: center; } .sxob-side .shx-head { text-align: left; margin-bottom: 26px; } .sxob-side .shx-head h2::after { margin-left: 0; } .sxob-side .shx-head p { margin-left: 0; } /* fixed-height rows: nothing in the list moves when the carousel does */ .sxob-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .sxob-list button { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; height: 58px; padding: 0 14px; border: 0; border-radius: 12px; overflow: hidden; background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: background .35s, box-shadow .35s; } .sxob-list button:hover { background: var(--card); } .sxob-list b { font-size: 15.5px; font-weight: 700; color: var(--head); } .sxob-list button.on { background: var(--card); box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--red); } .sxob-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--icbg); } .sxob-ic svg { width: 22px; height: 22px; } .sxob-ic.ic-b { color: var(--blue); --i2: var(--red2); } .sxob-ic.ic-r { color: var(--red2); --i2: var(--blue); } /* a thin line fills under the chosen item until the carousel moves on; it waits while you point at it */ .sxob-run { position: absolute; left: 14px; right: 14px; bottom: 7px; height: 2px; border-radius: 1px; background: var(--red); opacity: 0; transform: scaleX(0); transform-origin: 0 50%; } .sxob-list.run button.on .sxob-run { opacity: .55; animation: sxob-run 4.6s linear forwards; } @keyframes sxob-run { to { transform: scaleX(1); } } /* the stage runs to the page edge on the right; on the left it fades out before the list */ .sxob { position: relative; margin-right: -12vw; perspective: 2400px; perspective-origin: 50% 35%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%); mask-image: linear-gradient(90deg, transparent 0, #000 7%); } /* each screen gets its own perspective and they stack by depth, so they never cut through each other mid-turn */ .sxob-stage { --p: 1; position: relative; perspective: 2400px; transform: translateY(calc((1 - var(--p)) * 50px)) rotateX(calc((1 - var(--p)) * 12deg)); transition: transform .2s linear; } .sxob-stage::before { content: ""; display: block; padding-top: calc(44.4% + 60px); } .sxob-t { position: absolute; left: 13%; top: 20px; width: 74%; cursor: pointer; transform-origin: 50% 50%; transition: transform 1.1s cubic-bezier(.22, .72, .18, 1), opacity 1.1s ease, filter 1.1s ease; } .sxob-t.on { cursor: default; } .sxob-t[data-a="1"] { opacity: .6; filter: brightness(.7) saturate(.7); } .sxob-t[data-a="2"] { opacity: .26; filter: brightness(.6) saturate(.6); } .sxob-t[data-a="3"], .sxob-t[data-a="4"] { opacity: 0; pointer-events: none; } html[data-tone="light"] .sxob-t[data-a="1"] { opacity: .7; filter: saturate(.75); } html[data-tone="light"] .sxob-t[data-a="2"] { opacity: .35; filter: saturate(.6); } .sxob-t .shx-win { transition: box-shadow 1.1s; } .sxob-t.on .shx-win { box-shadow: inset 0 0 0 1px var(--win-line), 0 0 0 1px rgba(255, 107, 114, .5), 0 50px 110px rgba(5, 12, 45, .55); } html[data-tone="light"] .sxob-t.on .shx-win { box-shadow: inset 0 0 0 1px var(--win-line), 0 0 0 1px rgba(224, 52, 60, .4), 0 40px 90px rgba(15, 28, 77, .25); } .shx.still .sxob-stage { transition: none; } /* caption under the front screen, with previous / next */ .sxob-cap { display: flex; align-items: center; justify-content: center; gap: 18px; width: 74%; margin: 26px 0 0 13%; } .sxob-txt { flex: 1; min-width: 0; text-align: center; } .sxob-txt b { display: block; font-size: 18px; font-weight: 800; color: var(--head); } .sxob-txt span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.45; color: var(--mut); } .sxob-nav { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--card); color: var(--head); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background .25s; } .sxob-nav:hover { background: var(--icbg); } .sxob-nav svg { width: 20px; height: 20px; } /* the band after the screens meets them on a straight edge */ .yard { border-radius: 0; } @media (max-width: 1100px) { .sxmg-tabs { grid-template-columns: repeat(3, 1fr); padding: 0; margin-bottom: 10px; } .sxmg-tab { border-radius: 12px; transform: none !important; } .sxmg-win { transform: none !important; } .shx-orbit .sxob-grid { grid-template-columns: 1fr; } .sxob { margin-right: 0; -webkit-mask-image: none; mask-image: none; perspective: none; } .sxob-stage { display: grid; gap: 28px; perspective: none; transform: none !important; } .sxob-stage::before { display: none; } .sxob-t { position: static; width: auto; transform: none !important; opacity: 1 !important; filter: none !important; } .sxob-cap { display: none; } } html[data-tone="light"] .sxmg-win .shx-bar span { background: #f1f4f9; box-shadow: inset 0 0 0 1px #e3e8f2; } .sx-steps i { display: block; } /* ---------- Predict Attacks Before they Occur (?predict=window|off) ---------- Exposure (a week of one endpoint vs a weekly scan) beside Identity (live account activity). */ html:not([data-predict="off"]) .pdx-old, html[data-predict="off"] .pdx { display: none; } .pdx { --head: #fff; --ink: #dfe6ff; --mut: #aab6e2; --card: rgba(255, 255, 255, .05); --card-line: rgba(174, 188, 239, .2); --sub: rgba(4, 12, 40, .45); --line: rgba(174, 188, 239, .16); --chip: rgba(255, 255, 255, .08); --chip-ink: #c8d3f5; --code: #9fb0e0; --bar: #ff5a61; --ok: #3ecf8e; --scan: #8fb0ff; position: relative; padding: clamp(80px, 7vw, 120px) 0; color: var(--ink); background: radial-gradient(60% 50% at 50% 0%, rgba(80, 120, 230, .2), transparent 70%), linear-gradient(180deg, #13225a, #0f1c4d); } .pdx.lt { --head: #0f1c4d; --ink: #1f2747; --mut: #5c6488; --card: #fff; --card-line: #e1e6f2; --sub: #f5f7fc; --line: #e3e8f3; --chip: #eef2fa; --chip-ink: #3a4670; --code: #5d6a93; --bar: #e0343c; --ok: #13936a; --scan: #2f5fd0; background: linear-gradient(180deg, #fff, #f4f7fc); } .pdx-in { width: var(--wide); margin-inline: auto; } .pdx-head { text-align: center; margin-bottom: clamp(44px, 3.8vw, 64px); } .pdx-kick { margin: 0 0 16px; font-size: 12px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--bar); } .pdx-head h2 { font-size: clamp(32px, 3vw, 48px); font-weight: 900; line-height: 1.12; letter-spacing: -.01em; color: var(--head); } .pdx-head h2::after { content: ""; display: block; width: 90px; height: 4px; margin: 22px auto 0; border-radius: 2px; background: var(--red); } .pdx-head > p:last-child { max-width: 780px; text-wrap: balance; margin: 20px auto 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--mut); } .pdx-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(20px, 1.8vw, 30px); } .pdx-p { display: flex; flex-direction: column; padding: clamp(22px, 1.8vw, 30px); border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); } .pdx.lt .pdx-p { box-shadow: inset 0 0 0 1px var(--card-line), 0 24px 60px rgba(15, 28, 77, .08); } .pdx-ph { display: flex; gap: 16px; align-items: flex-start; } .pdx-ic { flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #ff5a61, #d0222b); } .pdx-ic svg { width: 24px; height: 24px; } .pdx-ph h3 { font-size: clamp(19px, 1.35vw, 23px); font-weight: 800; line-height: 1.25; color: var(--head); } .pdx-ph p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--mut); } /* the week */ .pdx-wk { --lab: 124px; --tn: 0; position: relative; margin-top: 24px; padding: 14px 18px 16px; border-radius: 12px; background: var(--sub); box-shadow: inset 0 0 0 1px var(--line); } .pdx-wk-top, .pdx-lane { display: grid; grid-template-columns: var(--lab) 1fr; align-items: center; } .pdx-host { font-size: 12px; color: var(--mut); white-space: nowrap; } .pdx-host code, .pdx-w code { font: 600 11.5px "JetBrains Mono", Consolas, monospace; color: var(--code); } .pdx-days { position: relative; height: 18px; } .pdx-days i { position: absolute; top: 0; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); translate: 4px 0; } .pdx-ln { font-size: 12px; font-weight: 800; color: var(--head); } .pdx-sc .pdx-ln { font-weight: 600; color: var(--mut); } .pdx-track { position: relative; background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 13.793% 100%; } .pdx-tr .pdx-track { height: 186px; margin-top: 8px; } .pdx-sc .pdx-track { height: 46px; border-top: 1px dashed var(--line); } .pdx-x { position: absolute; left: 0; right: 0; top: calc(var(--r) * 62px + 6px); height: 54px; --w: 0%; } .pdx-bar { position: absolute; left: var(--a); width: var(--w); top: 22px; height: 8px; border-radius: 4px; background: var(--bar); box-shadow: 0 0 12px color-mix(in srgb, var(--bar) 45%, transparent); } .pdx-x.done .pdx-bar { background: color-mix(in srgb, var(--bar) 55%, var(--mut)); box-shadow: none; } .pdx-tag { position: absolute; left: var(--a); top: 0; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; opacity: 0; translate: 0 4px; transition: opacity .35s, translate .35s; } .pdx-x.on .pdx-tag { opacity: 1; translate: 0 0; } .pdx-tag b { font: 700 12px "JetBrains Mono", Consolas, monospace; color: var(--head); } .pdx-tag em { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; padding: 2px 5px; border-radius: 4px; color: #fff; background: var(--bar); } .pdx-tag small { font-size: 11.5px; color: var(--mut); } .pdx-end { position: absolute; left: calc(var(--b) + 8px); top: 17px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 11.5px; font-weight: 700; color: var(--ok); opacity: 0; transition: opacity .35s; } .pdx-end svg { width: 14px; height: 14px; } .pdx-x.done .pdx-end { opacity: 1; } .pdx-x.open .pdx-end { left: auto; right: 12px; top: 34px; color: var(--bar); } .pdx-x.open.on .pdx-end { opacity: 1; } .pdx-scan { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding-left: 8px; font-size: 11.5px; font-weight: 700; color: var(--mut); opacity: .35; transition: opacity .35s, color .35s; white-space: nowrap; } .pdx-scan:last-child { padding: 0 8px 0 0; translate: -100% 0; flex-direction: row-reverse; } .pdx-scan i { position: absolute; left: 0; top: -200px; bottom: 6px; width: 0; border-left: 1.5px dashed var(--scan); opacity: .0; transition: opacity .35s; } .pdx-scan:last-child i { left: auto; right: 0; } .pdx-scan.on { opacity: 1; color: var(--scan); } .pdx-scan.on i { opacity: .55; } .pdx-cur { position: absolute; top: 34px; bottom: 12px; left: calc(18px + var(--lab) + (100% - 36px - var(--lab)) * var(--tn)); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--head); opacity: .5; pointer-events: none; } .pdx-cur::before { content: ""; position: absolute; left: -3px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--head); } .pdx.still .pdx-cur, .pdx-wk.reset .pdx-tag, .pdx-wk.reset .pdx-end { transition: none; } .pdx.still .pdx-cur { display: none; } .pdx-note { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13.5px; font-weight: 600; opacity: .45; transition: opacity .5s; } .pdx-note.on { opacity: 1; } .pdx-note span { display: inline-flex; align-items: center; gap: 8px; } .pdx-note span::before { content: ""; width: 14px; height: 4px; border-radius: 2px; } .pdx-note-a { color: var(--head); } .pdx-note-a::before { background: var(--bar); } .pdx-note-b { color: var(--mut); } .pdx-note-b::before { background: var(--scan); } /* identity activity */ .pdx-id { margin-top: 24px; padding: 12px 14px 8px; border-radius: 12px; background: var(--sub); box-shadow: inset 0 0 0 1px var(--line); } .pdx-id-h { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 10px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); } .pdx-live { display: inline-flex; align-items: center; gap: 7px; } .pdx-live i { width: 7px; height: 7px; border-radius: 50%; background: #3ecf8e; animation: pdx-live 2s ease-out infinite; } @keyframes pdx-live { 0% { box-shadow: 0 0 0 0 rgba(62, 207, 142, .5); } 100% { box-shadow: 0 0 0 8px rgba(62, 207, 142, 0); } } .pdx.still .pdx-live i { animation: none; } .pdx-rows { display: grid; align-content: start; overflow: hidden; overflow-anchor: none; } .pdx-rw { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s cubic-bezier(.2, .7, .2, 1), opacity .55s; } .pdx-rw.shut { grid-template-rows: 0fr; opacity: 0; } .pdx-rw > .pdx-r { overflow: hidden; min-height: 0; } .pdx-r { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-bottom: 6px; padding: 10px 12px; border-radius: 9px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); transition: background 1.2s, box-shadow 1.2s; } .pdx.lt .pdx-r { background: #fff; } .pdx-rw.shut > .pdx-r { margin-bottom: 0; padding-block: 0; } .pdx-rw.fresh > .pdx-r { background: color-mix(in srgb, var(--bar) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bar) 40%, transparent); } .pdx-t { font: 600 11.5px "JetBrains Mono", Consolas, monospace; color: var(--mut); } .pdx-w { min-width: 0; } .pdx-w b { display: block; font-size: 14px; font-weight: 700; color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pdx-w > span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pdx-k { padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); } .k-new { --c: #5ea8ff; } .k-priv { --c: #ff6b72; } .k-beh { --c: #f2b634; } .k-weak { --c: #b28cff; } .k-svc { --c: #42d4d0; } .pdx.lt .k-new { --c: #2f6fd8; } .pdx.lt .k-priv { --c: #d62c35; } .pdx.lt .k-beh { --c: #a86f00; } .pdx.lt .k-weak { --c: #7a4fd6; } .pdx.lt .k-svc { --c: #0f8f8b; } /* what each half covers (the live site's five items, plus one) */ .pdx-f { list-style: none; margin: auto 0 0; padding: 26px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .pdx-f li { padding-top: 14px; border-top: 2px solid var(--card-line); } .pdx-f b { display: block; font-size: 14.5px; font-weight: 800; color: var(--head); } .pdx-f span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--mut); } @media (max-width: 1180px) { .pdx-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .pdx-f { grid-template-columns: 1fr; } .pdx-wk { --lab: 84px; } .pdx-tag small { display: none; } } /* ---- dash (default): numbers, 30-day heatmap, identity table, four cards ---- */ .pdd { --c0: rgba(255, 255, 255, .06); --c1: rgba(255, 90, 97, .3); --c2: rgba(255, 90, 97, .62); --c3: #ff4d57; --tile: rgba(255, 255, 255, .08); --kpi-ic: rgba(143, 176, 255, .14); } .pdd.lt { --c0: #eceff6; --c1: #f8d2d5; --c2: #ee8990; --c3: #d9242d; --tile: #eef2fa; --kpi-ic: #eaf0fb; } .pdd-in { width: min(1680px, 100% - 2 * var(--gut)); margin-inline: auto; } .pdd .pdx-head { margin-bottom: clamp(36px, 3vw, 52px); } .pdd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.3vw, 22px); margin-bottom: clamp(14px, 1.3vw, 22px); } .pdd-kpi { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; padding: 18px 22px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); } .pdd.lt .pdd-kpi, .pdd.lt .pdd-cards li { box-shadow: inset 0 0 0 1px var(--card-line), 0 14px 34px rgba(15, 28, 77, .06); } .pdd-ki { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--scan); background: var(--kpi-ic); } .pdd-ki.r { color: var(--bar); background: color-mix(in srgb, var(--bar) 13%, transparent); } .pdd-ki svg { width: 24px; height: 24px; } .pdd-kpi b { display: block; font-size: clamp(26px, 2vw, 32px); font-weight: 900; line-height: 1.05; color: var(--head); font-variant-numeric: tabular-nums; } .pdd-kpi div > span { display: block; margin-top: 3px; font-size: 14.5px; color: var(--ink); } .pdd-kpi small { display: block; margin-top: 2px; font-size: 13px; color: var(--mut); } .pdd-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(14px, 1.3vw, 22px); } .pdd-when { margin-left: auto; flex: none; align-self: center; padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--mut); box-shadow: inset 0 0 0 1px var(--card-line); } /* heatmap */ .pdd-hm { --app: 210px; --st: 124px; position: relative; margin-top: 20px; padding: 4px 16px 14px; border-radius: 12px; background: var(--sub); box-shadow: inset 0 0 0 1px var(--line); } .pdd-hh, .pdd-r { display: grid; grid-template-columns: var(--app) 1fr var(--st); gap: 14px; align-items: center; } .pdd-hh { padding: 12px 0 10px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); } .pdd-ax { position: relative; height: 16px; } .pdd-ax i { position: absolute; left: calc(var(--i) / var(--n) * 100%); top: 0; font-style: normal; white-space: nowrap; letter-spacing: .04em; } .pdd-ax .pdd-today { left: calc((var(--i) + .5) / var(--n) * 100%); top: -3px; translate: -85% 0; padding: 2px 7px; border-radius: 5px; background: var(--head); letter-spacing: .04em; } .pdd.lt .pdd-ax .pdd-today { color: #fff; } .pdd:not(.lt) .pdd-ax .pdd-today { color: #0f1c4d; } .pdd-hm::after { content: ""; position: absolute; top: 40px; bottom: 52px; left: calc(16px + var(--app) + 14px + (100% - 32px - var(--app) - var(--st) - 28px) * 29.5 / 30); width: 2px; margin-left: -1px; background: var(--head); opacity: .55; pointer-events: none; } .pdd-r { padding: 13px 0; border-bottom: 1px solid var(--line); } .pdd-app { display: flex; align-items: center; gap: 11px; min-width: 0; } .pdd-m { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: var(--head); background: var(--tile); box-shadow: inset 0 0 0 1px var(--line); } .pdd-app b { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: var(--head); white-space: nowrap; } .pdd-app em { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .08em; padding: 2px 5px; border-radius: 4px; color: #fff; background: var(--bar); } .pdd-app small { display: block; margin-top: 2px; font: 500 11.5px "JetBrains Mono", Consolas, monospace; color: var(--mut); white-space: nowrap; } .pdd-cells { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; } .pdd-cells i { height: 28px; border-radius: 3px; display: grid; place-items: center; transition: opacity .3s calc(var(--i) * 45ms), transform .3s calc(var(--i) * 45ms); } .pdd:not(.go) .pdd-cells i { opacity: 0; transform: scaleY(.4); } .pdd .c0 { background: var(--c0); } .pdd .c1 { background: var(--c1); } .pdd .c2 { background: var(--c2); } .pdd .c3 { background: var(--c3); } .pdd .fx { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--ok); } .pdd .fx svg { width: 13px; height: 13px; stroke-width: 2.4; } .pdd-st { font-size: 12.5px; font-weight: 800; white-space: nowrap; transition: opacity .4s 1.5s; } .pdd:not(.go) .pdd-st { opacity: 0; } .pdd-st.ok { color: var(--ok); } .pdd-st.open { color: var(--bar); } .pdd-lg { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 14px; font-size: 12.5px; color: var(--mut); } .pdd-lg span { display: inline-flex; align-items: center; gap: 7px; } .pdd-lg i { width: 13px; height: 13px; border-radius: 3px; display: grid; place-items: center; } .pdd-lg i svg { width: 10px; height: 10px; } /* identity table */ .pdd-it { margin-top: 20px; padding: 0 12px 6px; border-radius: 12px; background: var(--sub); box-shadow: inset 0 0 0 1px var(--line); } .pdd-ih, .pdd-ir { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; } .pdd-ih { padding: 13px 8px 10px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); } .pdd-rows { display: grid; align-content: start; overflow: hidden; overflow-anchor: none; } .pdd-rw { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s cubic-bezier(.2, .7, .2, 1), opacity .55s; } .pdd-rw.shut { grid-template-rows: 0fr; opacity: 0; } .pdd-rw > .pdd-ir { overflow: hidden; min-height: 0; } .pdd-ir { padding: 11px 8px; border-bottom: 1px solid var(--line); transition: background 1.2s; } .pdd-rw.shut > .pdd-ir { padding-block: 0; border-bottom-width: 0; } .pdd-rw.fresh > .pdd-ir { background: color-mix(in srgb, var(--bar) 10%, transparent); } .pdd-t { font: 600 12px "JetBrains Mono", Consolas, monospace; color: var(--mut); } .pdd-e { min-width: 0; } .pdd-e b { display: block; font-size: 14.5px; font-weight: 800; color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pdd-e > span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pdd-e code { font: 600 11.5px "JetBrains Mono", Consolas, monospace; color: var(--code); } .pdd-k { padding: 5px 11px; border-radius: 7px; font-size: 12px; font-weight: 800; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); } /* the four cards */ .pdd-cards { list-style: none; margin: clamp(14px, 1.3vw, 22px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.3vw, 22px); } .pdd-cards li { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); } .pdd-cards li > span { flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: var(--bar); background: color-mix(in srgb, var(--bar) 12%, transparent); } .pdd-cards svg { width: 24px; height: 24px; } .pdd-cards b { display: block; font-size: 16px; font-weight: 800; color: var(--head); } .pdd-cards small { display: block; margin-top: 5px; font-size: 14px; line-height: 1.45; color: var(--mut); } @media (max-width: 1700px) { .pdd-ax i.o { display: none; } } @media (max-width: 1360px) { .pdd-grid { grid-template-columns: 1fr; } .pdd-kpis, .pdd-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .pdd-kpis, .pdd-cards { grid-template-columns: 1fr; } .pdd-hm { --app: 120px; --st: 70px; } .pdd-app small, .pdd-m { display: none; } } /* ---- brief (default): copy + CTA beside a tilted summary card, four capability cards below; the full dashboard is on the platform page. Icon colours are the site's own: red, navy, periwinkle, blue. */ .pdb { --t-red: #f23e45; --t-red-2: #c9222a; --t-navy: #34488a; --t-navy-2: #0f1c4d; --t-peri: #8a9bd8; --t-peri-2: #4f63ad; --t-blue: #4b7cf0; --t-blue-2: #2250c4; --pane: rgba(255, 255, 255, .06); --pane-line: rgba(174, 188, 239, .22); --row: rgba(255, 255, 255, .05); --deco: rgba(143, 176, 255, .12); --dot: rgba(174, 188, 239, .28); overflow: hidden; isolation: isolate; padding: clamp(64px, 5.2vw, 96px) 0 clamp(56px, 4.6vw, 84px); } .pdb.lt { --pane: rgba(255, 255, 255, .92); --pane-line: #e3e8f3; --row: #fff; --deco: #e6ecf8; --dot: #cfd8ea; background: radial-gradient(50% 60% at 78% 30%, #edf2fc, transparent 70%), linear-gradient(180deg, #fff, #f6f8fc); } .pdb-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .pdb-sh { position: absolute; right: -4%; top: -6%; width: clamp(360px, 30vw, 560px); height: auto; color: var(--deco); } .pdb-sh path { stroke-width: 1.6; fill: color-mix(in srgb, var(--deco) 35%, transparent); } .pdb-dots { position: absolute; width: 150px; height: 120px; background: radial-gradient(circle, var(--dot) 1.4px, transparent 1.6px) 0 0 / 18px 18px; } .pdb-dots.a { left: calc(var(--gut) - 12px); top: 52%; } .pdb-dots.b { right: calc(var(--gut) - 12px); top: 34%; height: 150px; } .pdb-in { width: min(1560px, 100% - 2 * var(--gut)); margin-inline: auto; } .pdb-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 80px); align-items: center; } /* copy */ .pdb-copy { text-align: center; } .pdb .pdx-kick { margin: 0; color: var(--t-blue-2); letter-spacing: .3em; } .pdb:not(.lt) .pdx-kick { color: var(--peri-l); } .pdb .pdx-kick::after { content: ""; display: block; width: 48px; height: 3px; margin: 14px auto 0; border-radius: 2px; background: var(--red); } .pdb-copy h2 { margin-top: clamp(18px, 1.6vw, 26px); font-size: clamp(38px, 3.6vw, 64px); font-weight: 900; line-height: 1.04; letter-spacing: -.02em; color: var(--head); text-wrap: balance; } .pdb-copy h2 span { display: block; color: var(--red); } .pdb-lede { max-width: 640px; margin: clamp(18px, 1.5vw, 24px) auto 0; font-size: clamp(17px, 1.25vw, 21px); line-height: 1.55; color: var(--mut); text-wrap: balance; } .pdb-cta { display: inline-flex; align-items: center; gap: 14px; height: 60px; margin-top: clamp(24px, 2vw, 32px); padding: 0 34px; border-radius: 999px; font-size: 17px; font-weight: 800; color: #fff; background: linear-gradient(180deg, #1b2c6e, var(--navy)); box-shadow: 0 14px 30px rgba(15, 28, 77, .22); transition: transform .2s, box-shadow .2s; } .pdb-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(15, 28, 77, .3); } .pdb-cta svg { width: 20px; height: 20px; stroke-width: 2.2; transition: translate .2s; } .pdb-cta:hover svg { translate: 3px 0; } .pdb:not(.lt) .pdb-cta { color: var(--navy); background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .14); } .pdb-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 0; margin-top: clamp(20px, 1.7vw, 28px); font-size: 12.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--mut); } .pdb-tags span + span::before { content: "•"; margin: 0 16px; letter-spacing: 0; opacity: .7; } /* the card */ .pdb-vis { position: relative; justify-self: center; width: min(100%, 440px); perspective: 1600px; margin-right: 24px; } .pdb-card { padding: 22px 20px 20px; border-radius: 22px; background: var(--pane); box-shadow: inset 0 0 0 1px var(--pane-line), 0 40px 80px -20px rgba(15, 28, 77, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: rotateY(-11deg) rotateX(3deg) rotateZ(-.6deg); transform-origin: 40% 50%; transition: opacity .8s, transform 1s cubic-bezier(.2, .7, .2, 1); } .pdb:not(.lt) .pdb-card { box-shadow: inset 0 0 0 1px var(--pane-line), 0 40px 80px -20px rgba(0, 0, 0, .45); } .pdb:not(.go) .pdb-card { opacity: 0; transform: rotateY(-22deg) rotateX(5deg) translateX(40px); } .pdb-ch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6px 16px; } .pdb-logo { display: block; width: 190px; } .pdb-logo svg { display: block; width: 100%; height: auto; } .pdb:not(.lt) .pdb-logo { --logo-responder: #c5cbe4; } .pdb-sample { flex: none; white-space: nowrap; padding: 4px 9px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); box-shadow: inset 0 0 0 1px var(--pane-line); } .pdb-kp { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .pdb-kp li { display: grid; grid-template-columns: 48px 1fr 18px; gap: 16px; align-items: center; padding: 13px 16px; border-radius: 14px; background: var(--row); box-shadow: inset 0 0 0 1px var(--pane-line), 0 6px 16px rgba(15, 28, 77, .05); transition: opacity .5s calc(.25s + var(--r) * .12s), translate .5s calc(.25s + var(--r) * .12s); } .pdb:not(.go) .pdb-kp li { opacity: 0; translate: 16px 0; } .pdb-kp li > svg { width: 18px; height: 18px; color: var(--mut); stroke-width: 2; } .pdb-ki, .pdb-ci { display: grid; place-items: center; color: #fff; } .pdb-ki { width: 48px; height: 48px; border-radius: 13px; background: linear-gradient(150deg, var(--a), var(--b)); box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--b) 60%, transparent); } .pdb-ki svg { width: 24px; height: 24px; } .pdb .t-red { --a: var(--t-red); --b: var(--t-red-2); } .pdb .t-navy { --a: var(--t-navy); --b: var(--t-navy-2); } .pdb .t-peri { --a: var(--t-peri); --b: var(--t-peri-2); } .pdb .t-blue { --a: var(--t-blue); --b: var(--t-blue-2); } .pdb-kt b { display: block; font-size: 26px; font-weight: 900; line-height: 1.05; color: var(--head); font-variant-numeric: tabular-nums; } .pdb-kt span { display: block; margin-top: 3px; font-size: 14.5px; color: var(--mut); } .pdb-float { position: absolute; right: -40px; bottom: -26px; display: flex; align-items: center; gap: 14px; padding: 14px 20px 14px 14px; border-radius: 16px; background: var(--row); box-shadow: inset 0 0 0 1px var(--pane-line), 0 20px 44px -10px rgba(15, 28, 77, .25); transition: opacity .5s 1s, translate .5s 1s; } .pdb:not(.lt) .pdb-float { background: #1a2a63; } .pdb:not(.go) .pdb-float { opacity: 0; translate: 0 12px; } .pdb-fi { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); } .pdb-fi svg { width: 22px; height: 22px; stroke-width: 2.4; } .pdb-ft b { display: block; font-size: 15px; font-weight: 800; color: var(--head); white-space: nowrap; } .pdb-bar { display: block; width: 140px; height: 6px; margin-top: 8px; border-radius: 3px; background: color-mix(in srgb, var(--ok) 16%, transparent); overflow: hidden; } .pdb-bar i { display: block; width: 74%; height: 100%; border-radius: inherit; background: var(--ok); transform-origin: left; transition: transform 1s 1.3s cubic-bezier(.2, .7, .2, 1); } .pdb:not(.go) .pdb-bar i { transform: scaleX(0); } /* the four cards */ .pdb-cards { list-style: none; margin: clamp(48px, 4.4vw, 76px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.3vw, 22px); } .pdb-cards li { display: flex; gap: 18px; align-items: center; padding: 22px 24px; border-radius: 16px; background: var(--pane); box-shadow: inset 0 0 0 1px var(--pane-line), 0 14px 34px rgba(15, 28, 77, .05); } .pdb-ci { flex: none; width: 56px; height: 56px; border-radius: 15px; color: var(--b); background: color-mix(in srgb, var(--a) 13%, transparent); } .pdb:not(.lt) .pdb-ci { color: #fff; background: color-mix(in srgb, var(--a) 30%, transparent); } .pdb-ci svg { width: 26px; height: 26px; } .pdb-cards b { display: block; font-size: 16.5px; font-weight: 800; line-height: 1.3; color: var(--head); } .pdb-cards small { display: block; margin-top: 5px; font-size: 14px; line-height: 1.45; color: var(--mut); } .pdb.still .pdb-card, .pdb.still .pdb-kp li, .pdb.still .pdb-float, .pdb.still .pdb-bar i { transition: none; } @media (max-width: 1360px) { .pdb-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1100px) { .pdb-top { grid-template-columns: 1fr; } .pdb-vis { margin: 12px auto 30px; } .pdb-float { right: -12px; } } @media (max-width: 640px) { .pdb-cards { grid-template-columns: 1fr; } .pdb-card { transform: none; } .pdb-copy h2 { font-size: 33px; } .pdb-logo { width: 150px; } .pdb-float { right: 8px; bottom: -34px; } .pdb-tags { letter-spacing: .14em; } .pdb-tags span + span::before { margin: 0 10px; } } /* ---------- Neutralize Threats in Real Time (?engines=pair|flip|off) ---------- Six engine cards and four outcomes, over the corridor picture (dark or light). It replaces the Yardstick, the proof strip and the old Neutralize section. */ html:not([data-engines="off"]) .proof, html:not([data-engines="off"]) .sec.yard, html:not([data-engines="off"]) #neutralize, html[data-engines="off"] .ntx { display: none; } .ntx { --head: #fff; --ink: #dce4ff; --mut: #a9b6df; --card: linear-gradient(180deg, rgba(22, 44, 110, .62), rgba(7, 20, 58, .72)); --card-line: rgba(143, 176, 255, .24); --item: #eef2ff; --item-d: #9fadd6; --wire: #27427f; --wire-lit: #ff5a61; --panel: rgba(6, 18, 52, .78); --panel-line: rgba(143, 176, 255, .26); --row: rgba(255, 255, 255, .04); --row-line: rgba(143, 176, 255, .14); --chip: rgba(255, 255, 255, .07); --chip-ink: #c8d3f5; --code: #93a3d3; position: relative; overflow: hidden; padding: clamp(80px, 7vw, 120px) 0 clamp(70px, 6vw, 104px); color: var(--ink); isolation: isolate; background: #01193c; box-shadow: inset 0 1px 0 rgba(143, 176, 255, .1); } /* the corridor sits at the foot of the section, its top edge faded into the plain colour above */ .ntx::before { content: ""; position: absolute; left: 50%; bottom: 0; z-index: -1; width: max(100%, 1600px); aspect-ratio: 1916 / 821; translate: -50% 0; background: url("/shared/engines-bg-dark.webp") center / cover no-repeat; -webkit-mask-image: linear-gradient(180deg, transparent, #000 34%); mask-image: linear-gradient(180deg, transparent, #000 34%); } .ntx.lt::before { background-image: linear-gradient(180deg, rgba(246, 249, 253, .5), rgba(246, 249, 253, .15)), url("/shared/engines-bg-light.webp"); } .ntx.lt { --head: #0f1c4d; --ink: #1f2747; --mut: #4d5a82; --card: rgba(255, 255, 255, .9); --card-line: #d6e0f1; --item: #16204a; --item-d: #5c6789; --wire: #b7c7e3; --wire-lit: #e0343c; --panel: rgba(255, 255, 255, .94); --panel-line: #d6e0f1; --row: #f7f9fd; --row-line: #e3e9f4; --chip: #eef2fa; --chip-ink: #3a4670; --code: #66719a; background: linear-gradient(180deg, #e2edf8, #d4e6f5); box-shadow: inset 0 1px 0 #d0deee; } /* paired with the Screens (same tone), the surface changes instead: the corridor, a cooler colour, a hairline */ .ntx-in { width: min(1680px, 100% - 2 * var(--gut)); margin-inline: auto; position: relative; } .ntx-head { text-align: center; margin-bottom: clamp(70px, 5.4vw, 92px); } .ntx-kick { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 18px; font-size: 12px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--mut); } .ntx-kick i { width: 4px; height: 4px; border-radius: 50%; background: var(--red); } .ntx-head h2 { font-size: clamp(32px, 3vw, 48px); font-weight: 900; line-height: 1.12; letter-spacing: -.01em; color: var(--head); } .ntx-head h2::after { content: ""; display: block; width: 90px; height: 4px; margin: 22px auto 0; border-radius: 2px; background: var(--red); } .ntx-head > p:last-child { max-width: 780px; text-wrap: balance; margin: 20px auto 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--mut); } /* the six engines */ .ntx-eng { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(12px, 1.1vw, 20px); } .ntx-c { position: relative; padding: 50px clamp(14px, 1.1vw, 20px) 20px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line), inset 0 3px 0 var(--red); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .ntx.lt .ntx-c { box-shadow: inset 0 0 0 1px var(--card-line), inset 0 3px 0 var(--red), 0 18px 40px rgba(15, 28, 77, .1); } .ntx-hex { position: absolute; left: 50%; top: -34px; translate: -50% 0; width: 62px; height: 70px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #ff5a61, #d0222b); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } .ntx-c::before { content: ""; position: absolute; left: 50%; top: -38px; translate: -50% 0; width: 76px; height: 78px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 70, 80, .38), transparent); pointer-events: none; opacity: .7; } .ntx.lt .ntx-c::before { opacity: .35; } .ntx-hex svg { width: 28px; height: 28px; } .ntx-c h3 { font-size: clamp(15.5px, 1.05vw, 18px); font-weight: 800; line-height: 1.22; text-align: center; color: var(--head); text-wrap: balance; min-height: 2.44em; } .ntx-cd { margin: 8px 0 16px; font-size: 13px; line-height: 1.45; text-align: center; color: var(--mut); text-wrap: balance; min-height: 2.9em; } .ntx-c ul { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--card-line); display: grid; gap: 4px; } .ntx-c li { position: relative; padding: 6px 8px 6px 22px; } .ntx-c li::before { content: ""; position: absolute; left: 7px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); } .ntx-c li b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--item); } .ntx-c li span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--item-d); } /* the four outcomes */ .ntx-ben { list-style: none; margin: clamp(34px, 2.6vw, 46px) auto 0; padding: 34px 0 0; width: 100%; padding-inline: clamp(0px, 2vw, 40px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 1px solid var(--card-line); } .ntx-ben li { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; align-items: center; } .ntx-ben li > span { grid-row: span 2; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--head); box-shadow: inset 0 0 0 1px var(--card-line); } .ntx-ben svg { width: 27px; height: 27px; } .ntx-ben b { font-size: 15.5px; font-weight: 800; letter-spacing: .07em; white-space: nowrap; text-transform: uppercase; color: var(--head); align-self: end; } .ntx-ben small { margin-top: 2px; font-size: 16.5px; color: var(--mut); align-self: start; } /* the section after a light Engines takes the dark tone (the Predict section, drawn navy) */ .sec.lav.ntx-dk { background: radial-gradient(70% 60% at 50% 0%, rgba(80, 120, 230, .22), transparent 70%), linear-gradient(180deg, #0f1c4d, #152560); } .ntx-dk .hx { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(174, 188, 239, .24); } @media (max-width: 1360px) { .ntx-ben { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; width: min(920px, 100%); } } @media (max-width: 1180px) { .ntx-eng { grid-template-columns: repeat(3, 1fr); row-gap: 56px; } .ntx-ben { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .ntx-eng { grid-template-columns: 1fr; } .ntx-c h3, .ntx-cd { min-height: 0; } .ntx-ben { grid-template-columns: 1fr; } } /* compact (25 Sep 2026, after the user's picture): three by two engine cards, one line each (the full lists are on the platform page, linked below the cards), the headline in two lines, the outcomes on tinted tiles between hairlines */ .ntx { --t-red: #f23e45; --t-navy: #34488a; --t-peri: #6a7fcf; --t-blue: #2f63e0; padding: clamp(56px, 4.2vw, 80px) 0 clamp(48px, 3.4vw, 64px); } .ntx-head { margin-bottom: clamp(56px, 3.6vw, 64px); } .ntx-kick { margin: 0; } .ntx-rule { display: block; width: 48px; height: 3px; margin: 14px auto 0; border-radius: 2px; background: var(--red); } .ntx-head h2 { margin-top: clamp(16px, 1.4vw, 22px); font-size: clamp(36px, 3.3vw, 58px); line-height: 1.04; letter-spacing: -.02em; } .ntx-head h2 span { display: block; color: var(--red); } .ntx-head h2::after { display: none; } .ntx-head > p:last-child { max-width: 880px; margin-top: 16px; } .ntx-eng { grid-template-columns: repeat(3, 1fr); column-gap: clamp(18px, 1.8vw, 32px); row-gap: 54px; width: min(1180px, 100%); margin-inline: auto; } .ntx-c { padding: 46px clamp(18px, 1.6vw, 30px) 22px; } .ntx-c h3 { min-height: 0; } .ntx-cd { margin: 8px 0 0; font-size: 14.5px; min-height: 0; } .ntx-more { position: relative; margin-top: 24px; text-align: center; } .ntx-more a { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px; font-size: 15px; font-weight: 800; color: var(--head); border-bottom: 2px solid color-mix(in srgb, var(--red) 60%, transparent); } .ntx-more svg { width: 16px; height: 16px; stroke-width: 2.2; transition: translate .2s; } .ntx-more a:hover svg { translate: 3px 0; } .ntx-ben { width: min(1480px, 100%); margin-top: clamp(32px, 2.4vw, 42px); padding: 0; gap: 0; border-top: 0; } .ntx-ben li { grid-template-columns: 52px 1fr; padding: 4px clamp(12px, 1.4vw, 36px); } .ntx-ben li + li { border-left: 1px solid var(--card-line); } .ntx-ben li > span { width: 52px; height: 52px; border-radius: 14px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent), 0 8px 20px -8px rgba(15, 28, 77, .2); } .ntx:not(.lt) .ntx-ben li > span { color: #fff; background: color-mix(in srgb, var(--c) 35%, transparent); } .ntx-ben svg { width: 25px; height: 25px; } .ntx-ben b { font-size: 16.5px; letter-spacing: 0; white-space: normal; text-transform: none; } .ntx-ben small { font-size: 14.5px; } .ntx-ben .t-red { --c: var(--t-red); } .ntx-ben .t-navy { --c: var(--t-navy); } .ntx-ben .t-peri { --c: var(--t-peri); } .ntx-ben .t-blue { --c: var(--t-blue); } /* short desktop screens (1440×900): the whole chapter still fits one screen */ @media (max-height: 980px) and (min-width: 1181px) { .ntx { padding: 48px 0 40px; } .ntx-head { margin-bottom: 52px; } .ntx-head h2 { font-size: clamp(36px, 3vw, 46px); } .ntx-head > p:last-child { font-size: 17px; } .ntx-eng { row-gap: 50px; } .ntx-c { padding: 44px 20px 18px; } .ntx-cd { font-size: 14px; } .ntx-more { margin-top: 18px; } .ntx-ben { margin-top: 26px; } } @media (max-width: 1360px) { .ntx-ben { row-gap: 26px; } .ntx-ben li + li { border-left: 0; } } @media (max-width: 1180px) { .ntx-eng { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .ntx-eng { grid-template-columns: 1fr; } } /* ---------- Forensically Investigate at Scale (?forensics=flow|off) ---------- Five workflow steps telling one incident, four outcomes, and a line to the forensic lab. */ html:not([data-forensics="off"]) .fsx-old, html[data-forensics="off"] .fsx { display: none; } .fsx { --head: #fff; --ink: #dfe6ff; --mut: #aab6e2; --card: rgba(255, 255, 255, .05); --card-line: rgba(174, 188, 239, .2); --sub: rgba(4, 12, 40, .4); --line: rgba(174, 188, 239, .16); --tile: rgba(255, 255, 255, .08); --code: #9fb0e0; --bar: #ff5a61; --ok: #3ecf8e; --run: #8fb0ff; --dim: rgba(174, 188, 239, .35); position: relative; padding: clamp(80px, 7vw, 120px) 0; color: var(--ink); background: radial-gradient(60% 50% at 50% 0%, rgba(80, 120, 230, .2), transparent 70%), linear-gradient(180deg, #13225a, #0f1c4d); } .fsx.lt { --head: #0f1c4d; --ink: #1f2747; --mut: #5c6488; --card: #fff; --card-line: #e1e6f2; --sub: #f6f8fc; --line: #e3e8f3; --tile: #eef2fa; --code: #5d6a93; --bar: #e0343c; --ok: #13936a; --run: #2f5fd0; --dim: #c5cde0; background: linear-gradient(180deg, #fff, #f4f7fc); } .fsx-in { width: min(1680px, 100% - 2 * var(--gut)); margin-inline: auto; } .fsx-head { text-align: center; margin-bottom: clamp(40px, 3.4vw, 60px); } .fsx-kick { margin: 0 0 16px; font-size: 12px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--bar); } .fsx-head h2 { font-size: clamp(32px, 3vw, 48px); font-weight: 900; line-height: 1.12; letter-spacing: -.01em; color: var(--head); } .fsx-head h2::after { content: ""; display: block; width: 90px; height: 4px; margin: 22px auto 0; border-radius: 2px; background: var(--red); } .fsx-head > p:last-child { max-width: 900px; text-wrap: balance; margin: 20px auto 0; font-size: clamp(17px, 1.25vw, 19px); line-height: 1.6; color: var(--mut); } /* the five steps */ .fsx-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(20px, 1.6vw, 28px); } .fsx-s { position: relative; display: flex; flex-direction: column; padding: 20px 18px 18px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); transition: box-shadow .5s; } .fsx.lt .fsx-s { box-shadow: inset 0 0 0 1px var(--card-line), 0 18px 44px rgba(15, 28, 77, .07); } .fsx-s.lit { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bar) 55%, transparent), 0 0 0 4px color-mix(in srgb, var(--bar) 10%, transparent); } .fsx-s:not(:last-child)::after { content: ""; position: absolute; top: 34px; right: calc(-1 * clamp(20px, 1.6vw, 28px) / 2 - 7px); width: 14px; height: 14px; background: var(--mut); opacity: .55; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; } .fsx-n { display: flex; align-items: center; gap: 12px; } .fsx-n b { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 900; color: #fff; background: var(--bar); } .fsx-n i { flex: 1; height: 1px; background: var(--line); } .fsx-s h3 { margin-top: 16px; font-size: clamp(17px, 1.2vw, 20px); font-weight: 800; line-height: 1.25; color: var(--head); } .fsx-s > p { margin: 8px 0 18px; font-size: 14px; line-height: 1.5; color: var(--mut); } .fsx-v { margin-top: auto; height: 330px; padding: 12px; border-radius: 12px; background: var(--sub); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; font-size: 12.5px; } .fsx-vh { margin-bottom: 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); } .fsx-vh code, .fsx-hosts span, .fsx-pn small, .fsx-tl small { font-family: "JetBrains Mono", Consolas, monospace; } .fsx-vh code { font-size: 11px; color: var(--head); text-transform: none; letter-spacing: 0; } .fsx-vh2 { display: flex; justify-content: space-between; margin: 10px 0 2px; } .fsx-vh2 span { color: var(--bar); letter-spacing: .02em; text-transform: none; } /* 1 agent */ .fsx-win { display: flex; gap: 5px; margin-bottom: 14px; } .fsx-win span { width: 8px; height: 8px; border-radius: 50%; background: #f4a1a4; } .fsx-win span:nth-child(2) { background: #f3d18a; } .fsx-win span:nth-child(3) { background: #9edbb9; } .fsx-ag { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); } .fsx-agi { flex: none; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; color: var(--bar); background: color-mix(in srgb, var(--bar) 13%, transparent); } .fsx-agi svg { width: 22px; height: 22px; } .fsx-ag b { display: block; font-size: 13px; color: var(--head); } .fsx-ag small { display: block; margin-top: 2px; font-size: 12px; color: var(--mut); } .fsx-ck { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 13px; } .fsx-ck li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink); opacity: .35; transition: opacity .4s; } .fsx-ck i { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; color: #fff; background: var(--dim); transition: background .4s; } .fsx-ck i svg { width: 13px; height: 13px; stroke-width: 2.6; } .fsx-s.on .fsx-ck li { opacity: 1; } .fsx-s.on .fsx-ck i { background: var(--bar); } .fsx-s.on .fsx-ck li:nth-child(2), .fsx-s.on .fsx-ck li:nth-child(2) i { transition-delay: .2s; } .fsx-s.on .fsx-ck li:nth-child(3), .fsx-s.on .fsx-ck li:nth-child(3) i { transition-delay: .4s; } .fsx-s.on .fsx-ck li:nth-child(4), .fsx-s.on .fsx-ck li:nth-child(4) i { transition-delay: .6s; } /* 2 collection */ .fsx-sc-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--mut); } .fsx-sc-h b { font-size: 13px; color: var(--head); } .fsx-sc-h em { font-style: normal; font-weight: 800; color: var(--head); font-variant-numeric: tabular-nums; } .fsx-pb { height: 6px; margin: 10px 0 12px; border-radius: 3px; background: var(--line); overflow: hidden; } .fsx-pb i { display: block; height: 100%; width: 3%; border-radius: 3px; background: var(--bar); transition: width 3.2s cubic-bezier(.3, .6, .3, 1); } .fsx.go .fsx-s.on .fsx-pb i, .fsx.still .fsx-pb i { width: 93%; } .fsx-hosts { list-style: none; margin: 0; padding: 0; } .fsx-hosts li { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); } .fsx-hosts span { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--head); } .fsx-hosts span svg { width: 15px; height: 15px; color: var(--mut); } .fsx-hosts em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--mut); } .fsx-hosts em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); } .fsx-hosts em::after { content: "Queued"; } .fsx-hosts li[data-st="run"] em { color: var(--run); } .fsx-hosts li[data-st="run"] em::before { background: var(--run); } .fsx-hosts li[data-st="run"] em::after { content: "Collecting"; } .fsx-hosts li[data-st="done"] em { color: var(--ok); } .fsx-hosts li[data-st="done"] em::before { background: var(--ok); } .fsx-hosts li[data-st="done"] em::after { content: "Done"; } .fsx-foot { display: flex; justify-content: space-between; margin-top: 12px; padding: 9px 11px; border-radius: 8px; font-size: 11.5px; color: var(--mut); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); } /* 3 detections */ .fsx-det { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .fsx-det li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 9px; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); } .fsx-di { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--bar); background: color-mix(in srgb, var(--bar) 13%, transparent); } .fsx-di svg { width: 20px; height: 20px; } .fsx-det b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--head); } .fsx-det small { display: block; margin-top: 1px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mut); } .fsx-det em { font-style: normal; min-width: 38px; padding: 5px 8px; border-radius: 999px; text-align: center; font-size: 12.5px; font-weight: 800; color: var(--bar); background: color-mix(in srgb, var(--bar) 13%, transparent); font-variant-numeric: tabular-nums; } /* 4 process tree */ .fsx-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .fsx-tree li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: center; margin-left: calc(var(--d) * 11px); padding: 6px 8px; border-radius: 9px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); opacity: .25; transition: opacity .4s calc(var(--k) * .22s); } .fsx-s.on .fsx-tree li { opacity: 1; } .fsx-tree li:not(:first-child)::before { content: ""; position: absolute; left: -8px; top: -8px; width: 7px; height: 29px; border-left: 1.5px solid var(--dim); border-bottom: 1.5px solid var(--dim); border-bottom-left-radius: 5px; } .fsx-tree li.bad { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bar) 45%, transparent); background: color-mix(in srgb, var(--bar) 9%, var(--card)); } .fsx-pi { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--mut); background: var(--tile); } .fsx-tree li.bad .fsx-pi { color: var(--bar); background: color-mix(in srgb, var(--bar) 14%, transparent); } .fsx-pi svg { width: 15px; height: 15px; } .fsx-pn { min-width: 0; } .fsx-pn b { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--head); } .fsx-pn small { display: block; font-size: 10.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fsx-tree em { font-style: normal; font: 700 10px "JetBrains Mono", Consolas, monospace; padding: 2px 5px; border-radius: 4px; color: var(--bar); background: color-mix(in srgb, var(--bar) 13%, transparent); } /* 5 timeline + lateral movement */ .fsx-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .fsx-tl li { display: grid; grid-template-columns: 38px 12px 1fr; gap: 6px; align-items: start; opacity: .25; transition: opacity .4s calc(var(--k) * .25s); } .fsx-s.on .fsx-tl li { opacity: 1; } .fsx-tl time { font: 600 11px "JetBrains Mono", Consolas, monospace; color: var(--mut); padding-top: 1px; } .fsx-tl i { width: 9px; height: 9px; margin-top: 3px; border-radius: 50%; background: var(--bar); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bar) 18%, transparent); } .fsx-tl b { display: block; font-size: 12.5px; color: var(--head); } .fsx-tl small { display: block; font-size: 10.5px; color: var(--mut); line-height: 1.35; } .fsx-lm { display: block; width: 100%; height: 92px; overflow: visible; } .fsx-e { fill: none; stroke: var(--bar); stroke-width: 1.6; stroke-dasharray: 90; stroke-dashoffset: 90; transition: stroke-dashoffset .8s 1s; } .fsx-e.q { stroke: var(--dim); stroke-dasharray: 3 4; stroke-dashoffset: 0; opacity: 0; transition: opacity .6s 1.6s; } .fsx-s.on .fsx-e { stroke-dashoffset: 0; } .fsx-s.on .fsx-e.q { opacity: 1; } .fsx-lm marker path { fill: var(--bar); } .fsx-h circle { fill: var(--card); stroke: var(--dim); stroke-width: 1.5; } .fsx-h.z circle { fill: var(--bar); stroke: none; } .fsx-h.hit circle { stroke: var(--bar); } .fsx-h text { fill: var(--mut); font: 700 8.5px "JetBrains Mono", Consolas, monospace; text-anchor: middle; } .fsx-h.z text, .fsx-h.hit text { fill: var(--head); } .fsx-h.ok text { fill: var(--mut); } /* outcomes + the lab */ .fsx-out { list-style: none; margin: clamp(36px, 3vw, 52px) 0 0; padding: 30px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--card-line); } .fsx-out li { display: flex; gap: 16px; align-items: flex-start; padding: 0 clamp(16px, 1.6vw, 28px); } .fsx-out li + li { border-left: 1px solid var(--card-line); } .fsx-out li:first-child { padding-left: 0; } .fsx-out li > span { flex: none; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; color: var(--bar); background: color-mix(in srgb, var(--bar) 12%, transparent); } .fsx-out svg { width: 25px; height: 25px; } .fsx-out b { display: block; font-size: 16.5px; font-weight: 800; color: var(--head); } .fsx-out small { display: block; margin-top: 5px; font-size: 14.5px; line-height: 1.5; color: var(--mut); } .fsx-lab { display: flex; align-items: center; gap: 18px; margin-top: clamp(30px, 2.6vw, 44px); padding: 16px 22px; border-radius: 14px; background: color-mix(in srgb, var(--bar) 8%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bar) 25%, transparent); } .fsx-labi { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--bar); } .fsx-labi svg { width: 20px; height: 20px; } .fsx-lab p { flex: 1; font-size: 15.5px; color: var(--ink); } .fsx-lab p b { color: var(--head); } .fsx-labc { flex: none; padding: 11px 18px; border-radius: 10px; font-size: 14.5px; font-weight: 800; color: #fff; background: var(--bar); text-decoration: none; } .fsx-labt { flex: none; font-size: 15px; font-weight: 800; color: var(--head); text-decoration: none; white-space: nowrap; } /* the section after a light Forensics takes the dark tone */ .sec.fsx-dk { background: radial-gradient(70% 60% at 50% 0%, rgba(80, 120, 230, .22), transparent 70%), linear-gradient(180deg, #0f1c4d, #152560); } .fsx-dk .pin h3 { color: #fff; } .fsx-dk .pin p, .fsx-dk .pin li { color: #c8d0ee; } .fsx-dk .pin li .pu-i { color: #8fb0ff; } @media (max-width: 1500px) { .fsx-flow { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 26px; } .fsx-s { grid-column: span 2; } .fsx-s:nth-child(n+4) { grid-column: span 3; } .fsx-s::after { display: none; } .fsx-out { grid-template-columns: repeat(2, 1fr); row-gap: 26px; } .fsx-out li:nth-child(3) { border-left: 0; padding-left: 0; } } @media (max-width: 900px) { .fsx-flow { grid-template-columns: 1fr; } .fsx-out { grid-template-columns: 1fr; } .fsx-out li { border-left: 0 !important; padding-left: 0; } .fsx-lab { flex-wrap: wrap; } } /* ---------- ThreatResponder Forensics, standalone (?toolbox=on|off) ---------- The DFIR toolbox for evidence already collected: sources → analyzers → answers. */ html[data-toolbox="off"] .tbx { display: none; } .tbx { --head: #fff; --ink: #dfe6ff; --mut: #aab6e2; --card: rgba(255, 255, 255, .05); --card-line: rgba(174, 188, 239, .2); --sub: rgba(4, 12, 40, .4); --line: rgba(174, 188, 239, .16); --tile: rgba(255, 255, 255, .08); --chip: rgba(255, 255, 255, .07); --chip-ink: #c8d3f5; --bar: #ff5a61; --ok: #3ecf8e; --blue: #8fb0ff; --panel: rgba(255, 255, 255, .03); position: relative; padding: clamp(80px, 7vw, 120px) 0; color: var(--ink); background: radial-gradient(50% 40% at 80% 0%, rgba(80, 120, 230, .22), transparent 70%), linear-gradient(180deg, #13225a, #0f1c4d); } .tbx.lt { --head: #0f1c4d; --ink: #1f2747; --mut: #5c6488; --card: #fff; --card-line: #e1e6f2; --sub: #f6f8fc; --line: #e3e8f3; --tile: #eef2fa; --chip: #f1f4fa; --chip-ink: #3a4670; --bar: #e0343c; --ok: #13936a; --blue: #2f5fd0; --panel: rgba(255, 255, 255, .6); background: radial-gradient(50% 40% at 80% 0%, #e6edfb, transparent 70%), linear-gradient(180deg, #f7f9fd, #eef2f9); } .tbx-in { width: min(1680px, 100% - 2 * var(--gut)); margin-inline: auto; } /* head: text left, the evidence → analysis → findings picture right */ .tbx-head { display: grid; grid-template-columns: 1fr minmax(0, 660px); gap: clamp(40px, 4vw, 80px); align-items: center; margin-bottom: clamp(40px, 3.4vw, 60px); } .tbx-kick { margin: 0 0 16px; font-size: 12px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--bar); } .tbx-head h2, .tbw-top h2, .tbc-top h2 { font-size: clamp(34px, 3.2vw, 52px); font-weight: 900; line-height: 1.1; letter-spacing: -.01em; color: var(--head); } .tbx-head h2::after, .tbw-top h2::after, .tbc-top h2::after { content: ""; display: block; width: 90px; height: 4px; margin: 22px 0 0; border-radius: 2px; background: var(--red); } .tbx-lead { margin-top: 22px; max-width: 760px; font-size: clamp(17px, 1.25vw, 19.5px); line-height: 1.6; color: var(--mut); } .tbx-lead b { color: var(--head); font-weight: 700; } .tbx-pts { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 26px; } .tbx-pts li { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--head); } .tbx-pts span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--bar); background: color-mix(in srgb, var(--bar) 12%, transparent); } .tbx-pts svg { width: 17px; height: 17px; } .tbx-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 13px 20px; border-radius: 10px; font-size: 15px; font-weight: 800; color: #fff; background: var(--bar); text-decoration: none; } .tbx-cta svg { width: 17px; height: 17px; } /* the picture */ .tbx-pic { position: relative; } .tbx-flow { display: flex; justify-content: space-around; align-items: center; margin-bottom: 16px; } .tbx-flow div { display: grid; justify-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--mut); } .tbx-flow span { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--blue); background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); transition: color .4s, box-shadow .4s; } .tbx-flow span svg { width: 21px; height: 21px; } .tbx-flow div.on span { color: var(--bar); box-shadow: inset 0 0 0 1.5px var(--bar); } .tbx-flow i { flex: 1; max-width: 90px; height: 0; border-top: 2px dashed var(--line); } .tbx-cards { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 12px; } .tbx-pc { padding: 14px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); font-size: 12.5px; } .tbx.lt .tbx-pc { box-shadow: inset 0 0 0 1px var(--card-line), 0 18px 40px rgba(15, 28, 77, .08); } .tbx-pc h4 { margin-bottom: 10px; font-size: 12.5px; font-weight: 800; color: var(--head); } .tbx-ev { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .tbx-ev li { display: flex; align-items: center; gap: 8px; color: var(--ink); opacity: .35; transition: opacity .35s; } .tbx-ev li.on { opacity: 1; } .tbx-ev svg { width: 15px; height: 15px; color: var(--mut); } .tbx-pb { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 2px 0 12px; } .tbx-pb i { display: block; height: 100%; width: var(--p, 0%); border-radius: 3px; background: var(--blue); transition: width .6s; } .tbx-st { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .tbx-st li { display: flex; align-items: center; gap: 8px; color: var(--mut); } .tbx-st li i { width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); display: grid; place-items: center; color: #fff; } .tbx-st li.run i { box-shadow: none; border: 2px solid var(--blue); border-top-color: transparent; animation: tbx-spin .9s linear infinite; } .tbx.still .tbx-st li.run i { animation: none; } @keyframes tbx-spin { to { transform: rotate(1turn); } } .tbx-st li.done { color: var(--ink); } .tbx-st li.done i { background: var(--ok); box-shadow: none; } .tbx-st li.done i svg { width: 10px; height: 10px; stroke-width: 3; } .tbx-res { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .tbx-res li { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); } .tbx-res b { min-width: 28px; font-variant-numeric: tabular-nums; } .tbx-res .r1 { --c: var(--bar); } .tbx-res .r2 { --c: #f2a53a; } .tbx-res .r3 { --c: var(--blue); } .tbx-res .r4 { --c: var(--ok); } .tbx.lt .tbx-res .r2 { --c: #b56d00; } .tbx-res svg { width: 14px; height: 14px; } /* numbered parts */ .tbx-part { padding: clamp(22px, 1.8vw, 30px); border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--card-line); } .tbx-part + .tbx-part, .tbx-duo { margin-top: clamp(16px, 1.4vw, 24px); } .tbx-ph { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .tbx-no { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 900; color: var(--bar); background: color-mix(in srgb, var(--bar) 12%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bar) 40%, transparent); } .tbx-ph h3 { font-size: clamp(20px, 1.45vw, 25px); font-weight: 900; color: var(--head); line-height: 1.2; } .tbx-ph p { margin-top: 3px; font-size: 15px; color: var(--mut); } .tbx-ph .tbx-tags { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .tbx-tags span { padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--chip-ink); background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); } /* 1 sources */ .tbx-src { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } .tbx-sc { display: flex; flex-direction: column; padding: 18px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); transition: box-shadow .3s, transform .3s; cursor: default; } .tbx-ic { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: var(--bar); background: color-mix(in srgb, var(--bar) 11%, transparent); } .tbx-ic.b { color: var(--blue); background: color-mix(in srgb, var(--blue) 13%, transparent); } .tbx-ic svg { width: 23px; height: 23px; } .tbx-sc h4 { margin-top: 14px; font-size: 16.5px; font-weight: 800; color: var(--head); } .tbx-sc p { margin: 6px 0 14px; font-size: 14px; line-height: 1.5; color: var(--mut); } .tbx-fm { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; } .tbx-fm span { padding: 3px 8px; border-radius: 6px; font: 600 11.5px "JetBrains Mono", Consolas, monospace; color: var(--chip-ink); background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); } /* 2 analyzers + 3 answers */ .tbx-duo { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: clamp(16px, 1.4vw, 24px); } .tbx-duo .tbx-part + .tbx-part { margin-top: 0; } .tbx-an { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .tbx-a { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); transition: box-shadow .3s, opacity .3s; } .tbx-a .tbx-ic { width: 40px; height: 40px; border-radius: 11px; } .tbx-a .tbx-ic svg { width: 21px; height: 21px; } .tbx-a h4 { font-size: 15px; font-weight: 800; color: var(--head); } .tbx-a p { font-size: 13.5px; line-height: 1.5; color: var(--mut); } .tbx-ans { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .tbx-ans li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line); } .tbx-ans li:last-child { border-bottom: 0; } .tbx-ans span { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); } .tbx-ans svg { width: 19px; height: 19px; } .tbx-ans b { display: block; font-size: 14.5px; font-weight: 800; color: var(--head); } .tbx-ans small { display: block; margin-top: 2px; font-size: 13px; color: var(--mut); } .tbx-pars { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font-size: 13.5px; color: var(--mut); } .tbx-pars b { color: var(--head); margin-right: 4px; } .tbx-pars span { padding: 4px 9px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--chip-ink); background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); } .tbx-more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .tbx-more .tbx-a { gap: 10px; } .tbx-more .tbx-fm { margin-top: auto; padding-top: 4px; } /* verbs */ .tbx-foot { display: flex; align-items: center; gap: 20px; margin-top: clamp(26px, 2.2vw, 36px); } .tbx-foot p { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--head); } .tbx-foot p svg { width: 20px; height: 20px; color: var(--bar); } .tbx-verbs { margin-left: auto; display: flex; gap: 0; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); } .tbx-verbs span { padding: 0 18px; } .tbx-verbs span + span { border-left: 1px solid var(--card-line); } @media (max-width: 1500px) { .tbx-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tbx-src { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tbx-an { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1180px) { .tbx-head, .tbx-duo { grid-template-columns: 1fr; } .tbx-ph { flex-wrap: wrap; } .tbx-ph .tbx-tags { margin-left: 56px; justify-content: flex-start; } .tbx-foot { flex-wrap: wrap; } .tbx-verbs { margin-left: 0; } } @media (max-width: 760px) { .tbx-src, .tbx-an, .tbx-cards { grid-template-columns: 1fr; } .tbx-verbs { flex-wrap: wrap; } } /* download button + note (all variants) */ .tbx-dl { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 30px; } .tbx-dl .tbx-cta { margin-top: 0; } .tbx-dl small { font-size: 13.5px; color: var(--mut); } /* ---- app tour: lists around the app window ---- */ .ta-head { text-align: center; margin-bottom: clamp(30px, 2.6vw, 44px); } .ta-head h2 { font-size: clamp(34px, 3.2vw, 52px); font-weight: 900; line-height: 1.1; letter-spacing: -.01em; color: var(--head); } .ta-head h2::after { content: ""; display: block; width: 90px; height: 4px; margin: 20px auto 0; border-radius: 2px; background: var(--red); } .ta-head .tbx-lead { margin-inline: auto; max-width: 900px; } /* the download, on its own row under the outputs */ .ta-dlrow .tbx-dl { justify-content: center; margin-top: clamp(22px, 1.8vw, 30px); } .ta-grid { display: grid; grid-template-columns: minmax(230px, 270px) minmax(0, 1fr) minmax(230px, 270px); gap: clamp(14px, 1.2vw, 22px); align-items: start; } .ta-col, .ta-outs { padding: 14px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--card-line); } .ta-lh { display: flex; align-items: center; gap: 12px; padding: 4px 4px 12px; } .ta-lh .tbx-no { width: 34px; height: 34px; font-size: 15px; } .ta-lh h3 { font-size: 17px; font-weight: 900; color: var(--head); } .ta-lh p { margin-top: 2px; font-size: 13px; color: var(--mut); } .ta-li { position: relative; overflow: hidden; display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; width: 100%; margin-top: 6px; padding: 8px 12px; border: 0; border-radius: 12px; text-align: left; font: inherit; cursor: pointer; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); transition: box-shadow .3s, background .3s; } .ta-li .tbx-ic { width: 36px; height: 36px; border-radius: 10px; } .ta-li .tbx-ic svg { width: 18px; height: 18px; } .ta-li b { display: block; font-size: 14px; font-weight: 800; color: var(--head); } .ta-li small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--mut); } .ta-li.on { box-shadow: inset 0 0 0 1.5px var(--bar); background: color-mix(in srgb, var(--bar) 7%, var(--card)); } .ta-li > i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--bar); } .ta-li.run > i { animation: tbc-prog var(--t, 4.8s) linear forwards; } .ta-mid { min-width: 0; } .ta-cap { margin: 10px 0 0; text-align: center; font-size: 14px; color: var(--mut); min-height: 1.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-cap b { margin-right: 6px; color: var(--head); } .ta-outs { margin-top: clamp(12px, 1vw, 18px); display: grid; grid-template-columns: minmax(230px, 270px) 1fr; gap: 14px; align-items: center; padding-block: 10px; } .ta-outs .ta-lh { padding: 0 4px; } .ta-orow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .ta-orow .ta-li { margin-top: 0; } .ta-flogo { height: 26px; width: auto; } .tbx-app .tbx-foot p { gap: 0; } .tbx.lt .ta-flogo.lt, .tbx:not(.lt) .ta-flogo.dk { display: none; } /* side by side, each list is exactly as tall as the window: the items share the height */ @media (min-width: 1501px) { .ta-col { height: var(--wh, auto); display: flex; flex-direction: column; } .ta-col .ta-lh { flex: none; } .ta-col .ta-li { flex: 1 1 0; min-height: 0; margin-top: 5px; padding: 6px 12px; } .ta-col .ta-li small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 1px; font-size: 11.5px; line-height: 1.35; } .ta-col .ta-li b { font-size: 13.5px; line-height: 1.25; } } @media (max-width: 1500px) { .ta-cap { white-space: normal; } .ta-outs { grid-template-columns: 1fr; } .ta-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ta-mid { grid-column: 1 / -1; order: -1; } .ta-orow { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .ta-grid, .ta-orow { grid-template-columns: 1fr; } } /* ---- the app window (1280 × 760, scaled). Tokens follow the section tone: light section = the app's light mode ---- */ .ta-win { position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 0 0 1px var(--card-line), 0 40px 90px rgba(3, 10, 35, .35); } .tbx.lt .ta-win { box-shadow: 0 0 0 1px var(--card-line), 0 30px 70px rgba(15, 28, 77, .16); } .ta-app { --bg: #111827; --pn: #172033; --pn2: #1c2740; --ln: #2a3652; --ln2: #334062; --ink: #e6eaf3; --mu: #8f9bb6; --bl: #5b9dff; --rd: #ff6b6b; --or: #ff9346; --am: #f2b634; --gr: #3ecf8e; --tl: #2cc5d8; --pu: #b28cff; --pk: #f472b6; --soft: rgba(255, 255, 255, .06); --sel: rgba(91, 157, 255, .15); --mono: "JetBrains Mono", Consolas, monospace; position: absolute; left: 0; top: 0; width: 1280px; height: 760px; transform-origin: 0 0; overflow: hidden; background: var(--bg); color: var(--ink); font: 12px/1.45 Inter, "Segoe UI", system-ui, sans-serif; text-align: left; } .tbx.lt .ta-app { --bg: #f4f6f9; --pn: #fff; --pn2: #f7f9fc; --ln: #e4e8ef; --ln2: #d5dbe5; --ink: #1c2433; --mu: #6b7589; --bl: #2f7cf6; --rd: #dc2626; --or: #ea580c; --am: #c27803; --gr: #16a34a; --tl: #0891b2; --pu: #7c3aed; --pk: #db2777; --soft: #eef1f6; --sel: #e8f0fe; } .ta-app * { box-sizing: border-box; } .ta-app svg { width: 14px; height: 14px; flex: none; } .ta-app code, .ta-app pre, .ta-mono { font-family: var(--mono); } .ta-app p, .ta-app h3, .ta-app h4, .ta-app h5, .ta-app h6 { margin: 0; } .ta-v { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; } .ta-v.on { opacity: 1; visibility: visible; transition: opacity .45s; } .ta-v.src { transition: opacity .25s, visibility 0s .25s; } .ta-v.src.on { transition: opacity .25s; } .ta-top { flex: none; } .ta-sps { position: relative; flex: 1; min-height: 0; } .ta-sp { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; } .ta-sp.on { opacity: 1; visibility: visible; transition: opacity .35s; } .ta-pg { flex: 1; min-height: 0; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; } .ta-mut { color: var(--mu); } .ta-app .mu { color: var(--mu); } .ta-app :is(b, p, em, small, span).r { color: var(--rd); } .ta-app :is(b, p, em, small, span).o { color: var(--or); } .ta-app b.b, .ta-app :is(b, p, em, small, span).bl { color: var(--bl); } .ta-app :is(b, p, em, small, span).g { color: var(--gr); } .ta-app :is(b, p, em, small, span).a { color: var(--am); } .ta-app b.mu { color: var(--mu); } /* shared pieces */ .ta-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; margin-right: 4px; border-radius: 5px; font-size: 10.5px; font-weight: 600; color: var(--mu); background: var(--soft); white-space: nowrap; line-height: 1.4; } .ta-tag.m { font-family: var(--mono); font-size: 9.5px; letter-spacing: .02em; } .ta-tag.bl { color: var(--bl); background: color-mix(in srgb, var(--bl) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bl) 22%, transparent); } .ta-tag.rd { color: var(--rd); background: color-mix(in srgb, var(--rd) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rd) 22%, transparent); } .ta-tag.am { color: var(--am); background: color-mix(in srgb, var(--am) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--am) 24%, transparent); } .ta-tag.gr { color: var(--gr); background: color-mix(in srgb, var(--gr) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gr) 22%, transparent); } .ta-tag.o { color: var(--or); background: color-mix(in srgb, var(--or) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 22%, transparent); } .ta-tag.pu { color: var(--pu); background: color-mix(in srgb, var(--pu) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pu) 22%, transparent); } .ta-tag.tl { color: var(--tl); background: color-mix(in srgb, var(--tl) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tl) 22%, transparent); } .ta-tag.pk { color: var(--pk); background: color-mix(in srgb, var(--pk) 11%, transparent); } .ta-tag.o2 { color: var(--ink); background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln2); } .ta-tag.rdo { color: var(--rd); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rd) 45%, transparent); font-family: var(--mono); font-size: 9.5px; } .ta-app .ta-tag.f { color: #fff; box-shadow: none; } .ta-tag.f.rd { background: var(--rd); } .ta-tag.f.o { background: var(--or); } .ta-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .ta-chips .ta-tag { margin: 0; } .ta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 13px; border-radius: 7px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln2); white-space: nowrap; } .ta-btn.pri { color: #fff; background: var(--bl); box-shadow: none; } .ta-btn.grn { color: #fff; background: var(--gr); box-shadow: none; } .ta-btn.soft { color: var(--bl); background: var(--sel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bl) 30%, transparent); } .ta-btn.ghost { background: transparent; box-shadow: none; color: var(--mu); } .ta-btn.warn { color: var(--am); background: color-mix(in srgb, var(--am) 10%, var(--pn)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--am) 40%, transparent); } .ta-btn.out { color: var(--bl); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bl) 45%, transparent); font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; } .ta-btn.dis { color: var(--mu); opacity: .7; } .ta-btn.amb { color: #fff; background: #e89b1b; box-shadow: none; } .ta-btn.on { color: var(--bl); background: var(--sel); } .ta-btn.sm { padding: 5px 10px; font-size: 11px; } .ta-btn.xs { padding: 3px 8px; font-size: 10.5px; gap: 4px; } .ta-btn.xs svg { width: 12px; height: 12px; } .ta-in { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 10px; border-radius: 7px; color: var(--mu); background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-in.mono { font-family: var(--mono); color: var(--ink); } .ta-in.s { flex: none; } .ta-sel { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 7px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln2); font-family: var(--mono); font-size: 11px; white-space: nowrap; } .ta-sel::after { content: "⌄"; color: var(--mu); } .ta-sel.s { flex: none; } .ta-filters { display: flex; gap: 8px; align-items: center; } .ta-filters .ta-in { flex: 1; } .ta-filters .ta-sel { flex: 1; } .ta-tabs { display: flex; align-items: flex-end; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--ln); background: var(--pn); white-space: nowrap; overflow: hidden; } .ta-tabs span { display: inline-flex; align-items: center; gap: 6px; padding: 10px 10px 9px; font-size: 12.5px; font-weight: 500; color: var(--ink); border-bottom: 2px solid transparent; } .ta-tabs span svg { color: var(--mu); width: 13px; height: 13px; } .ta-tabs span.on { color: var(--bl); border-bottom-color: var(--bl); } .ta-tabs span.on svg { color: var(--bl); } .ta-tabs span > i { font-style: normal; padding: 0 5px; border-radius: 4px; font: 700 9px/1.6 var(--mono); color: var(--mu); background: var(--soft); } .ta-tabs span > i.r { color: var(--rd); background: color-mix(in srgb, var(--rd) 12%, transparent); } .ta-tabs span > i.a { color: var(--am); background: color-mix(in srgb, var(--am) 14%, transparent); } .ta-tabs span > i.b { color: var(--bl); background: color-mix(in srgb, var(--bl) 12%, transparent); } .ta-tabs.sm { padding: 0; background: transparent; } .ta-tabs.sm span { padding: 8px 10px; font-size: 12px; } .ta-tabs.pe span, .ta-tabs.inv span { padding-inline: 8px; font-size: 12px; } .ta-acts { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 16px; border-bottom: 1px dashed var(--ln); } .ta-acts .ta-btn { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; } .ta-tbl { border-radius: 9px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln); overflow: hidden; } .ta-tr { display: grid; grid-template-columns: var(--tpl); gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--ln); align-items: center; } .ta-tr:last-child { border-bottom: 0; } .ta-tr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ta-th { background: var(--pn2); font: 700 9.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mu); } .ta-tr.hl { background: var(--sel); box-shadow: inset 3px 0 0 var(--bl); } .ta-kpis { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; flex: none; } .ta-kpis > div { padding: 10px 12px; border-radius: 9px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln); min-width: 0; } .ta-kpis small { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); } .ta-kpis b { display: block; margin-top: 4px; font-size: 21px; font-weight: 700; color: var(--ink); } .ta-kpis em { display: block; font-style: normal; font-size: 10.5px; color: var(--mu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ta-kpis.mono small { font-family: var(--mono); } .ta-kpis.mono b { font-family: var(--mono); } .ta-kpis.mini > div { padding: 7px 10px; background: var(--pn2); } .ta-kpis.mini b { font-size: 12px; font-weight: 500; margin-top: 2px; } .ta-card { padding: 12px 14px; border-radius: 10px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln); min-width: 0; min-height: 0; overflow: hidden; } .ta-card.np { padding: 0; overflow: hidden; } .ta-card.np > .ta-tbl { box-shadow: none; border-radius: 0; } .ta-cardh { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .ta-cardh b { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink); } .ta-cardh b em { font-style: normal; font-weight: 400; color: var(--mu); } .ta-cardh small { margin-left: auto; font-size: 11px; color: var(--mu); } .ta-cardh small.l { margin-left: 4px; } .ta-cardh small.bl { display: block; margin: 2px 0 0; font-family: var(--mono); } .ta-cardh .ta-btn:first-of-type { margin-left: auto; } .ta-cardh.x { margin: 0; flex: none; } .ta-cardh.p { padding: 12px 14px; margin: 0; border-bottom: 1px solid var(--ln); } .ta-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 0; } .ta-kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 16px; font-size: 11.5px; } .ta-kv > span { color: var(--mu); } .ta-kv > b { font-weight: 500; font-family: var(--mono); font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ta-kv.c2 { grid-template-columns: max-content 1fr max-content 1fr; } .ta-box { flex: none; display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 3px; color: #fff; box-shadow: inset 0 0 0 1.5px var(--ln2); background: var(--pn); vertical-align: middle; } .ta-box.on { background: var(--bl); box-shadow: none; } .ta-box svg { width: 10px; height: 10px; stroke-width: 3; } .ta-si { flex: none; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--mu); background: var(--soft); } .ta-si svg { width: 17px; height: 17px; } .ta-si.g { color: var(--gr); background: color-mix(in srgb, var(--gr) 12%, transparent); } .ta-si.o { color: var(--am); background: color-mix(in srgb, var(--am) 13%, transparent); } .ta-mh { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--pn); border-bottom: 1px solid var(--ln); } .ta-mico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #38a3f5, #2f7cf6); } .ta-mico svg { width: 18px; height: 18px; } .ta-mh > div > b { display: block; font-size: 15px; font-weight: 700; } .ta-mh > div > b em { font-style: normal; color: var(--bl); font-weight: 600; } .ta-mh > div > small { display: block; color: var(--mu); font-size: 11.5px; } .ta-mhr { margin-left: auto; display: flex; align-items: center; gap: 10px; } .ta-lnk { color: var(--mu); font-size: 12px; } .ta-file { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; padding: 8px 16px; background: var(--pn); border-bottom: 1px solid var(--ln); white-space: nowrap; overflow: hidden; } .ta-file code { font-weight: 700; font-size: 11px; } .ta-file small { color: var(--mu); overflow: hidden; text-overflow: ellipsis; } .ta-file > b { font-size: 14px; } .ta-file .ta-si { width: 30px; height: 30px; } .ta-file .ta-tag:first-of-type { margin-left: auto; } .ta-sh { display: flex; align-items: baseline; gap: 8px; flex: none; } .ta-sh > i { white-space: nowrap; font: 600 11px var(--mono); color: var(--bl); font-style: normal; } .ta-sh > b { font-size: 16px; font-weight: 600; white-space: nowrap; } .ta-sh > span { color: var(--mu); font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ta-sh .ta-chips { margin-left: auto; flex-wrap: nowrap; } .ta-hunt { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 10px; border-radius: 8px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln2); color: var(--mu); } .ta-hunt > span:not(.ta-btn) { flex: 1; font-family: var(--mono); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-hunt.big { padding: 6px 6px 6px 12px; margin-bottom: 8px; } .ta-ex { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--mu); text-transform: uppercase; margin: 8px 0; } .ta-ex code { margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ln2); } .ta-rng { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ln2); margin-left: auto; } .ta-rng i { font-style: normal; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; color: var(--mu); } .ta-rng i.on { color: var(--bl); background: var(--sel); box-shadow: inset 0 0 0 1px var(--bl); } .ta-subt { display: flex; gap: 6px; padding: 7px 14px; border-bottom: 1px solid var(--ln); background: var(--pn2); flex: none; } .ta-subt span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 7px; color: var(--mu); font-size: 12px; } .ta-subt span.on { color: var(--bl); background: var(--sel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bl) 30%, transparent); } .ta-subt span i { font-style: normal; font-size: 11px; } .ta-subt span i.r { padding: 0 6px; border-radius: 999px; color: #fff; background: var(--rd); font-size: 9.5px; font-weight: 700; } .ta-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .ta-g2 > div, .ta-g1 > div { padding: 6px 9px; border-radius: 6px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); min-width: 0; } .ta-g2 small, .ta-g1 small { display: block; font-size: 8.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); } .ta-g2 span, .ta-g1 span { display: block; font-family: var(--mono); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ta-g1 { display: grid; gap: 5px; } .ta-g2.k > div { background: none; box-shadow: none; padding: 3px 0; } .ta-g2.k span { font-family: inherit; white-space: normal; } /* ---- 1. New Investigation (full page, no modal) ---- */ .ta-wz { display: flex; flex-direction: column; height: 100%; } .ta-wzb { flex: 1; min-height: 0; display: grid; grid-template-columns: 228px 1fr; } .ta-steps { display: flex; flex-direction: column; gap: 3px; padding: 16px 14px; border-right: 1px solid var(--ln); background: var(--pn2); } .ta-steps > div { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-weight: 600; color: var(--mu); } .ta-steps > div > i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; background: var(--soft); } .ta-steps > .on { color: var(--ink); background: var(--sel); box-shadow: inset 3px 0 0 var(--bl); } .ta-steps > .on > i { color: #fff; background: var(--bl); } .ta-steps > .ta-qi { display: block; padding: 12px 4px 0; border-radius: 0; font-weight: 400; color: var(--ink); background: none; box-shadow: none; } .ta-qi { margin-top: auto; padding: 12px 4px 0; border-top: 1px solid var(--ln); font-size: 11.5px; } .ta-qi h6 { margin-bottom: 6px; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mu); } .ta-qi p { display: flex; justify-content: space-between; padding: 3px 0; color: var(--mu); } .ta-qi b { color: var(--ink); } .ta-qi b.bl { color: var(--bl); } .ta-wzc { padding: 18px 26px; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden; background: var(--pn); } .ta-wzc h3 { font-size: 17px; font-weight: 700; } .ta-sub { margin-top: -6px; color: var(--mu); } .ta-srcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .ta-src { display: grid; grid-template-columns: 36px 1fr 16px; gap: 11px; align-items: center; padding: 11px 12px; border-radius: 10px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln2); } .ta-src b { font-size: 13px; font-weight: 600; } .ta-src small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--mu); font-size: 11px; line-height: 1.4; } .ta-src.on { background: var(--sel); box-shadow: inset 0 0 0 1.5px var(--bl); } .ta-src .ta-si { width: 36px; height: 36px; } .ta-src.on .ta-si { color: var(--bl); background: color-mix(in srgb, var(--bl) 14%, transparent); } .ta-radio { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ln2); } .ta-radio.on { box-shadow: inset 0 0 0 1.5px var(--bl), inset 0 0 0 4px var(--pn), inset 0 0 0 9px var(--bl); } .ta-det { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 9px; margin-top: 4px; } .ta-ready { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 10px; background: color-mix(in srgb, var(--gr) 7%, var(--pn)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gr) 28%, transparent); } .ta-ready > i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--gr); background: color-mix(in srgb, var(--gr) 15%, transparent); } .ta-ready > i svg { width: 16px; height: 16px; stroke-width: 2.4; } .ta-ready b { color: var(--gr); font-size: 13px; } .ta-ready small { display: block; color: var(--mu); } .ta-host { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px; border-radius: 10px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); } .ta-host b { font-size: 12.5px; } .ta-host small { display: flex; align-items: center; gap: 6px; color: var(--mu); font-size: 11px; } .ta-host .ta-in { width: 300px; font-family: var(--mono); color: var(--ink); background: var(--pn); } .ta-okic { display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; color: #fff; background: var(--gr); } .ta-okic svg { width: 8px; height: 8px; stroke-width: 3.5; } .ta-wic { color: var(--am); display: inline-flex; } .ta-wic svg { width: 12px; height: 12px; } .ta-brw { padding: 11px 14px; border-radius: 10px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); } .ta-brh { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .ta-brh b { font-size: 12.5px; } .ta-brh small { display: block; color: var(--mu); font-size: 11px; } .ta-brh .ta-si { width: 30px; height: 30px; color: var(--bl); background: var(--sel); } .ta-brr { display: flex; gap: 8px; align-items: stretch; } .ta-brr .ta-in { flex: 1; background: var(--pn); } .ta-in.ml { white-space: normal; align-items: flex-start; line-height: 1.6; } .ta-bcol { display: flex; flex-direction: column; gap: 6px; } .ta-hint { margin-top: 7px; font-size: 10.5px; color: var(--mu); } .ta-kbd { padding: 0 5px; border-radius: 4px; font-size: 10px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln2); } .ta-bitl { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 10px; background: color-mix(in srgb, var(--gr) 7%, var(--pn)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gr) 28%, transparent); } .ta-bitl > i { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--gr); background: color-mix(in srgb, var(--gr) 14%, transparent); } .ta-bitl > i svg { stroke-width: 2.6; } .ta-bitl b { color: var(--gr); } .ta-bitl small { display: block; color: var(--mu); font-size: 11px; } .ta-insp { display: flex; gap: 12px; padding: 11px 14px; border-radius: 10px; background: color-mix(in srgb, var(--gr) 5%, var(--pn)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gr) 26%, transparent); } .ta-insp > div { flex: 1; min-width: 0; } .ta-insp > div > b { display: block; margin-bottom: 5px; color: var(--gr); font-size: 12.5px; } .ta-okc { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--gr); background: color-mix(in srgb, var(--gr) 14%, transparent); } .ta-okc svg { stroke-width: 2.6; } .ta-insp .ta-kv { font-size: 11px; } .ta-pls { display: flex; gap: 8px; margin-top: 8px; } .ta-pls span { padding: 6px 10px; border-radius: 8px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln2); font-size: 10.5px; color: var(--mu); } .ta-pls b { display: block; font-size: 11.5px; color: var(--ink); } .ta-catp { flex: 1; min-height: 0; overflow: hidden; padding: 11px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--ln); -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), transparent); mask-image: linear-gradient(#000 calc(100% - 26px), transparent); } .ta-catph { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; } .ta-catph b { font-size: 12.5px; } .ta-catph small { color: var(--mu); font-size: 11px; } .ta-catg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .ta-catg > div { display: flex; gap: 9px; padding: 8px 10px; border-radius: 8px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); min-width: 0; } .ta-catg .ta-box { margin-top: 1px; } .ta-catg p { min-width: 0; } .ta-catg b { display: block; font-size: 11.5px; font-weight: 600; } .ta-catg small { display: block; font-size: 10.5px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-catg > div.off { opacity: .55; background: none; } .ta-cov { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--ln); } .ta-cov > small { flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); } .ta-wzf { flex: none; display: flex; justify-content: flex-end; gap: 10px; padding: 11px 18px; border-top: 1px solid var(--ln); background: var(--pn2); } /* ---- memory forensics ---- */ .ta-imgs { display: flex; gap: 10px; padding: 10px 14px; background: var(--pn); border-bottom: 1px solid var(--ln); } .ta-imgs > div { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 8px; } .ta-imgs .on { background: var(--sel); box-shadow: inset 3px 0 0 var(--bl), inset 0 0 0 1px color-mix(in srgb, var(--bl) 30%, transparent); } .ta-imgs .on .ta-si { width: 28px; height: 28px; color: var(--bl); background: var(--pn); } .ta-imgs b { display: block; font-size: 12px; font-weight: 600; } .ta-imgs small { font: 10px var(--mono); color: var(--mu); } .ta-imgs .add { box-shadow: inset 0 0 0 1px var(--ln2); border: 1px dashed transparent; color: var(--mu); } .ta-imgs .add b { color: var(--mu); font-weight: 500; } .ta-vs { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); border-radius: 10px; background: var(--pn); box-shadow: inset 3px 0 0 var(--rd), inset 0 0 0 1px var(--ln); flex: none; } .ta-vs > div { padding: 11px 16px; border-right: 1px dashed var(--ln2); min-width: 0; } .ta-vs > div:last-child { border: 0; } .ta-vs small { display: block; font: 600 9px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mu); } .ta-vs b { display: block; margin-top: 6px; font: 600 15px var(--mono); } .ta-vs b em { font-style: normal; font-weight: 400; font-size: 11px; color: var(--mu); } .ta-vs p { margin-top: 5px; font: 700 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; } .ta-vs1 > b { display: inline-block !important; font: 800 24px Inter, system-ui, sans-serif !important; color: var(--rd); margin: 4px 8px 2px 0 !important; } .ta-vs1 > p { font: 400 11.5px Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--mu); margin: 0 0 8px !important; } .ta-conf { display: flex; align-items: center; gap: 12px; } .ta-conf i { height: 3px; border-radius: 2px; background: var(--rd); } .ta-conf em { margin-left: auto; font: 700 16px var(--mono); color: var(--rd); font-style: normal; } .ta-why { padding: 9px 14px; border-radius: 10px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); flex: none; } .ta-why > p { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px dashed var(--ln); font-size: 11.5px; } .ta-why > p:last-child { border: 0; } .ta-why > p:first-child small { font: 600 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mu); margin-right: 6px; } .ta-why > p:first-child .ta-btn { margin-left: auto; } .ta-why > p > i { width: 14px; font-style: normal; color: var(--rd); font-weight: 700; } .ta-why .ta-tag { margin: 0; } .ta-split.c { flex: 1; grid-template-columns: 1.5fr 1fr; } .ta-stage { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--ln); font-size: 11.5px; } .ta-stage i { font: 10px var(--mono); color: var(--mu); font-style: normal; width: 16px; } .ta-stage > span { width: 7px; height: 7px; border-radius: 50%; background: var(--gr); } .ta-stage > span.a { background: var(--or); } .ta-stage em { margin-left: auto; font: 600 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mu); font-style: normal; } .ta-stage em.a { color: var(--or); } .ta-kv.mf { gap: 0 16px; } .ta-kv.mf > span, .ta-kv.mf > b { padding: 5px 0; border-bottom: 1px solid var(--ln); } .ta-kv.mf > span { font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; } .ta-split.p { flex: 1; grid-template-columns: 450px 1fr; } .ta-ptree { padding: 10px 0 0; overflow: hidden; } .ta-ptree .ta-cardh { padding: 0 12px; } .ta-ptree .ta-cardh .ta-in { flex: 1; font-family: var(--mono); font-size: 10px; padding: 5px 8px; } .ta-ptree .ta-cardh small { margin: 0; white-space: nowrap; } .ta-seg2 { display: inline-flex; padding: 2px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ln2); } .ta-seg2 i { font: 600 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; color: var(--mu); font-style: normal; } .ta-seg2 i.on { color: var(--bl); background: var(--sel); } .ta-pr { display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px calc(12px + var(--d) * 18px); font: 11.5px var(--mono); border-left: 1px solid transparent; } .ta-pr b { font-weight: 600; } .ta-pr > i { font-style: normal; color: var(--mu); font-size: 10.5px; } .ta-pr > span { margin-left: auto; color: var(--mu); font-size: 10px; white-space: nowrap; } .ta-pr .ta-tag { margin: 0; padding: 0 5px; } .ta-pr.sel { background: var(--sel); box-shadow: inset 3px 0 0 var(--bl); } .ta-pr.bad b { color: var(--rd); } .ta-pr.sel b { color: var(--rd); } .ta-pdet { display: flex; flex-direction: column; gap: 10px; } .ta-pdh { display: flex; align-items: flex-start; gap: 12px; } .ta-pdh > div { flex: 1; } .ta-pdh b { font-size: 16px; font-weight: 700; } .ta-pdh small { display: block; margin: 2px 0 6px; font: 11px var(--mono); color: var(--mu); } .ta-pdh small b { font-size: 11px; } .ta-pdh .ta-si { width: 40px; height: 40px; } .ta-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--ln); overflow: hidden; } .ta-g4 > div { padding: 6px 10px; border-right: 1px solid var(--ln); border-bottom: 1px solid var(--ln); min-width: 0; } .ta-g4 > div.w4 { grid-column: span 4; } .ta-g4 > div.e { background: var(--soft); } .ta-g4 small { display: block; font: 600 8.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mu); } .ta-g4 span { display: block; margin-top: 2px; font: 11px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ta-g4 .w4 span { display: flex; gap: 4px; } .ta-cardh.x > div b { display: block; } .ta-cardh.x > div { margin-right: auto; } .ta-hives { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .ta-hv { position: relative; display: flex; gap: 8px; padding: 9px 10px; border-radius: 9px; background: var(--pn); box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 1px var(--ln); min-width: 0; } .ta-hv.p { --c: var(--am); } .ta-hv.e { --c: var(--gr); } .ta-hv.n { --c: color-mix(in srgb, var(--rd) 50%, transparent); } .ta-hv.n > div { opacity: .6; } .ta-hv.on { background: var(--sel); box-shadow: inset 3px 0 0 var(--bl), inset 0 0 0 1px var(--bl); } .ta-hv > div { flex: 1; min-width: 0; } .ta-hv b { display: block; font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 92px; } .ta-hv small { display: block; margin-top: 3px; font: 9.5px var(--mono); color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-hv small em { font-style: normal; } .ta-hv p { margin-top: 2px; font-size: 10px; color: var(--am); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-hv.n p { color: var(--rd); } .ta-hv > .ta-tag { position: absolute; right: 8px; top: 8px; } .ta-tbl.ind .ta-tr { align-items: start; padding: 8px 12px; } .ta-tbl.ind .ta-tr > span { white-space: normal; font-family: var(--mono); font-size: 10.5px; line-height: 1.5; } .ta-tbl.ind .ta-tr > span em { display: block; font-style: normal; color: var(--mu); font-size: 10px; margin-top: 3px; } .ta-tbl.ind .ta-tr > span i { color: var(--mu); font-style: normal; } .ta-tbl.ind .ta-tag { margin: 0 3px 3px 0; } /* ---- registry explorer ---- */ .ta-rgx { flex: 1; min-height: 0; display: grid; grid-template-columns: 290px 1fr; } .ta-rgl { display: flex; flex-direction: column; gap: 7px; padding: 0 10px 10px; border-right: 1px solid var(--ln); background: var(--pn); overflow: hidden; } .ta-bm { margin: 0 -10px; padding: 8px 12px; border-bottom: 1px solid var(--ln); } .ta-bm h6 { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; } .ta-bm h6 svg { color: var(--am); fill: var(--am); } .ta-bm p { display: flex; align-items: center; gap: 8px; padding: 3px 4px; font-size: 11.5px; color: var(--mu); } .ta-bm p svg { width: 11px; height: 11px; color: var(--or); fill: var(--or); } .ta-rgn { display: flex; gap: 7px; padding: 7px 9px; border-radius: 7px; font-size: 10.5px; line-height: 1.4; background: var(--sel); } .ta-rgn svg { color: var(--bl); margin-top: 1px; } .ta-rgl .ta-in { flex: none; } .ta-hive { flex: none; display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 7px; box-shadow: inset 3px 0 0 var(--tl), inset 0 0 0 1px var(--ln); font-size: 11px; white-space: nowrap; overflow: hidden; } .ta-hive svg { color: var(--tl); } .ta-hive small { color: var(--mu); font-size: 9.5px; overflow: hidden; text-overflow: ellipsis; } .ta-key { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px calc(4px + var(--d) * 16px); border-radius: 6px; font-size: 12px; white-space: nowrap; } .ta-key > i { width: 10px; font-style: normal; color: var(--mu); font-size: 10px; text-align: center; } .ta-key svg { width: 13px; height: 13px; color: #e3902a; fill: #e3a33e; } .ta-key em { margin-left: auto; font-style: normal; font-size: 9.5px; padding: 0 6px; border-radius: 999px; background: var(--soft); color: var(--mu); } .ta-key.on { color: #fff; background: var(--bl); } .ta-key.on svg { color: #fff; fill: rgba(255, 255, 255, .5); } .ta-key.on > i { color: #fff; } .ta-key.on em { color: #fff; background: rgba(255, 255, 255, .25); } .ta-rgr { display: flex; flex-direction: column; min-width: 0; background: var(--pn2); } .ta-rgp { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--pn); border-bottom: 1px solid var(--ln); font-size: 11.5px; } .ta-rgp svg { color: var(--tl); } .ta-rgp em { color: var(--am); font-style: normal; } .ta-tabs.rg { background: var(--pn); padding: 4px 10px 0; } .ta-tabs.rg span { padding: 6px 12px; font-size: 11.5px; } .ta-tbl.rg { border-radius: 0; box-shadow: none; } .ta-tbl.rg .ta-tr { padding: 8px 14px; } .ta-tbl.rg .ta-tr > span { font-size: 11.5px; } .ta-tbl.rg .ta-tr > span:nth-child(3) { font-family: var(--mono); font-size: 11px; } .ta-vic { display: inline-flex; margin-right: 8px; vertical-align: -2px; color: var(--bl); } .ta-vic svg { width: 12px; height: 12px; } .ta-rgd { margin-top: auto; border-top: 1px solid var(--ln); background: var(--pn); } .ta-rgd .ta-tabs { background: transparent; } .ta-rgd2 { display: grid; grid-template-columns: 300px 1fr; min-height: 170px; } .ta-rgd2 > div { padding: 10px 14px; } .ta-rgd2 > div:first-child { border-right: 1px solid var(--ln); } .ta-rgd2 h6 { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); } .ta-rgd2 h6 small { letter-spacing: 0; text-transform: none; font-weight: 400; } .ta-kv.rg { gap: 6px 14px; } .ta-kv.rg b { white-space: normal; } .ta-hex { font: 11px/1.75 var(--mono); } .ta-hex p { display: grid; grid-template-columns: 76px 390px 1fr; } .ta-hex i { font-style: normal; color: var(--mu); } .ta-hex em { font-style: normal; color: var(--bl); } .ta-hex.sm p { grid-template-columns: 42px 262px 1fr; } .ta-hex.sm { padding: 8px 10px; border-radius: 7px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); font-size: 9.5px; } .ta-rgs { flex: none; display: flex; align-items: center; gap: 18px; padding: 6px 14px; border-top: 1px solid var(--ln); background: var(--pn); font-size: 10.5px; color: var(--mu); white-space: nowrap; overflow: hidden; } .ta-rgs span { display: inline-flex; align-items: center; gap: 5px; } .ta-rgs span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ta-rgs svg { color: var(--bl); width: 12px; } .ta-rgs .r { margin-left: auto; color: var(--tl) !important; } /* ---- filesystem explorer ---- */ .ta-seg { display: inline-flex; align-items: center; gap: 4px; padding: 4px; margin-right: 8px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--ln2); font-size: 11.5px; color: var(--mu); } .ta-seg i { display: none; } .ta-segbar { display: flex; justify-content: center; gap: 4px; padding: 8px; background: var(--pn); border-bottom: 1px solid var(--ln); } .ta-segbar span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 7px; color: var(--mu); } .ta-segbar span.on { color: #fff; background: var(--bl); } .ta-mh .ta-seg { display: none; } .ta-disks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px 14px; background: var(--pn); border-bottom: 1px solid var(--ln); } .ta-disk { display: grid; grid-template-columns: 34px 1fr auto; gap: 4px 10px; align-items: start; padding: 9px 10px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--ln2); } .ta-disk.on { box-shadow: inset 0 0 0 1.5px var(--bl); background: var(--sel); } .ta-disk b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-disk small { color: var(--mu); font-size: 10px; } .ta-disk p { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .ta-fsx { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px 1fr; } .ta-fst { padding: 10px; border-right: 1px solid var(--ln); background: var(--pn); overflow: hidden; } .ta-fst h6 { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 12px; } .ta-fst h6 svg { color: var(--bl); } .ta-fsm { display: flex; flex-direction: column; min-width: 0; } .ta-fsb { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--pn); border-bottom: 1px solid var(--ln); } .ta-fsb code { margin-left: 8px; font-size: 10.5px; color: var(--mu); } .ta-fsb small { margin-left: auto; color: var(--mu); font-size: 10.5px; } .ta-tbl.fs { flex: 1; border-radius: 0; box-shadow: none; } .ta-tbl.fs .ta-tr { padding: 6px 12px; font-size: 11px; } .ta-tbl.fs .ta-tr > span:nth-child(2), .ta-tbl.fs .ta-tr > span:nth-child(n+5) { font-family: var(--mono); font-size: 10.5px; } .ta-tbl.fs b.n { font-weight: 500; } .ta-tbl.fs b.n.mu { color: var(--mu); } .ta-tbl.fs.del .ta-tr > span:nth-child(4) i { color: var(--mu); font-style: normal; } .ta-fsf { flex: none; display: flex; gap: 14px; padding: 7px 14px; border-top: 1px solid var(--ln); background: var(--pn); font-size: 10.5px; color: var(--mu); } .ta-fsf b { color: var(--ink); } .ta-fsf span { margin-left: auto; } .ta-vssn { display: flex; gap: 10px; margin: 10px 14px 0; padding: 9px 12px; border-radius: 9px; background: var(--sel); font-size: 11.5px; } .ta-vssn b { display: block; } .ta-vssn small { color: var(--mu); } .ta-vssn svg { color: var(--bl); } .ta-vols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 10px 14px; } .ta-vol { padding: 8px; border-radius: 9px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln2); min-width: 0; } .ta-vol.on { box-shadow: inset 0 0 0 2px var(--bl); } .ta-volh { display: flex; gap: 7px; } .ta-volh > div { min-width: 0; } .ta-volh .ta-si { width: 26px; height: 26px; color: var(--bl); background: var(--sel); } .ta-volh .ta-si.o { color: var(--am); background: color-mix(in srgb, var(--am) 14%, transparent); } .ta-volh b { font-size: 11.5px; margin-right: 4px; } .ta-volh .ta-tag { padding: 0 4px; font-size: 8.5px; margin-right: 2px; } .ta-volh small { display: block; font-size: 9px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-vn { display: grid; grid-template-columns: repeat(3, 1fr); margin: 7px 0; padding: 5px 0; border-radius: 6px; background: var(--pn2); text-align: center; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--mu); } .ta-vn b { display: block; font-size: 11px; letter-spacing: 0; color: var(--ink); } .ta-vol p { display: flex; gap: 4px; } .ta-vol .ta-btn { flex: 1; padding: 4px 4px; font-size: 10px; } .ta-sp > .ta-cardh.x { padding: 4px 14px 8px; } .ta-cardh b.dl svg { color: var(--rd); } .ta-sp > .ta-tbl.fs { margin: 0; border-top: 1px solid var(--ln); } /* ---- event logs ---- */ .ta-bnr { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 11.5px; background: var(--sel); border-bottom: 1px solid color-mix(in srgb, var(--bl) 25%, transparent); } .ta-bnr > svg { color: #fff; background: var(--bl); border-radius: 50%; padding: 2px; } .ta-bnr .ta-btn { margin-left: auto; } .ta-elx { flex: 1; min-height: 0; display: grid; grid-template-columns: 230px 1fr 290px; } .ta-elb { padding: 10px 12px; border-right: 1px solid var(--ln); background: var(--pn); overflow: hidden; } .ta-elb h6 { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); } .ta-elb h6 i { font-style: normal; } .ta-elb .ta-in { margin-bottom: 6px; font-size: 11px; } .ta-elb h5 { margin: 8px 0 3px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); font-weight: 700; } .ta-elb p { display: flex; align-items: center; gap: 8px; padding: 3px 0 3px 12px; font-size: 11.5px; } .ta-elb p svg { width: 11px; height: 11px; color: var(--or); fill: color-mix(in srgb, var(--or) 30%, transparent); } .ta-elm .ta-filters .ta-sel { flex: none; } .ta-elm .ta-filters .ta-in.s { width: 110px; } .ta-elm { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; min-width: 0; overflow: hidden; } .ta-etl { flex: none; } .ta-etl .ta-cardh > div b { display: block; font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; } .ta-etl .ta-cardh small.l { margin: 0; } .ta-ebars { display: flex; align-items: flex-end; gap: 2px; height: 96px; padding: 4px 6px 0; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ln); } .ta-ebars i { flex: 1; height: var(--h); min-height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(#2ec5e6, #1ea6d8); } .ta-ax { display: flex; justify-content: space-between; margin-top: 4px; font-size: 9.5px; color: var(--mu); } .ta-tbl.el { flex: 1; } .ta-tbl.el .ta-tr { padding: 7px 12px; font-size: 11px; } .ta-tbl.el .ta-tr > span:first-child { font-family: var(--mono); font-size: 10.5px; } .ta-elm .ta-fsf { border: 0; background: none; padding: 0 2px; } .ta-eld { padding: 12px 14px; border-left: 1px solid var(--ln); background: var(--pn); overflow: hidden; } .ta-eld h4 { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 15px; } .ta-eld h4 i { font-style: normal; color: var(--mu); } .ta-eld h6 { margin: 10px 0 5px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; } .ta-kv.ev { grid-template-columns: 1fr auto; gap: 0; font-size: 10.5px; } .ta-kv.ev > span, .ta-kv.ev > b { padding: 5px 0; border-bottom: 1px solid var(--ln); } .ta-kv.ev > b { text-align: right; max-width: 190px; font-size: 10px; } .ta-kpis.el b { font-size: 22px; } .ta-mitre { display: grid; gap: 8px; } .ta-mitre.n8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .ta-mitre.n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .ta-tac { border-radius: 8px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); overflow: hidden; padding-bottom: 4px; } .ta-tac > b { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 7px 9px; font-size: 11px; color: #fff; background: var(--c); } .ta-tac > b i { font-style: normal; font-size: 9.5px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .25); } .ta-tac.big > b { flex-wrap: wrap; font-size: 12px; } .ta-tac.big > b small { order: 3; flex-basis: 100%; font: 9px var(--mono); opacity: .8; } .ta-tac p { position: relative; margin: 5px 5px 0; padding: 5px 20px 5px 7px; border-radius: 6px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln); font-size: 10.5px; line-height: 1.3; } .ta-tac code { display: block; margin-bottom: 1px; font-size: 9px; color: var(--mu); } .ta-tac em { position: absolute; right: 5px; top: 6px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center; font: 700 9px sans-serif; font-style: normal; color: #fff; background: var(--bl); } .ta-tac.big em { color: var(--bl); background: var(--sel); } .ta-tac.k-ia { --c: #ef4444; } .ta-tac.k-ex { --c: #f97316; } .ta-tac.k-pe { --c: #eab308; } .ta-tac.k-pr { --c: #84cc16; } .ta-tac.k-st { --c: #22c55e; } .ta-tac.k-ca { --c: #14b8a6; } .ta-tac.k-lm { --c: #3b82f6; } .ta-tac.k-cc { --c: #a855f7; } .ta-tac.k-im { --c: #ec4899; } .ta-threat { display: flex; align-items: flex-start; gap: 6px; padding: 10px 14px; border-radius: 9px; background: var(--pn); box-shadow: inset 3px 0 0 var(--or), inset 0 0 0 1px var(--ln); flex: none; } .ta-threat > div { flex: 1; } .ta-threat b { font-size: 12.5px; font-weight: 600; } .ta-threat p { margin: 3px 0; color: var(--bl); font-size: 11px; } .ta-threat small { display: flex; align-items: center; gap: 5px; color: var(--mu); font-size: 10.5px; } .ta-threat small svg { width: 11px; height: 11px; } .ta-h2 b { font-size: 16px; font-weight: 600; } .ta-h2 p { color: var(--mu); font-size: 11.5px; } .ta-qbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .ta-qbar .ta-chips { margin-right: auto; } .ta-qbar small { color: var(--mu); font-size: 10.5px; } .ta-tbl.plain { box-shadow: inset 0 0 0 1px var(--ln); } .ta-tbl.plain .ta-tr { padding: 6px 12px; font-size: 11px; } .ta-tbl.plain .ta-th { font-family: inherit; font-size: 10px; } /* ---- pcap ---- */ .ta-pc-x {} .ta-kpis.pc b { font-size: 20px; } .ta-lbl { display: flex; align-items: center; gap: 6px; font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mu); margin-bottom: 4px; } .ta-dets { flex: 1; display: flex; flex-direction: column; gap: 7px; overflow: hidden; } .ta-pills { display: flex; gap: 6px; padding-bottom: 4px; } .ta-pills span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 7px; font-size: 11px; box-shadow: inset 0 0 0 1px var(--ln2); } .ta-pills span.on { color: var(--tl); background: color-mix(in srgb, var(--tl) 9%, var(--pn)); box-shadow: inset 0 0 0 1px var(--tl); } .ta-fnd { display: flex; gap: 10px; padding: 9px 12px; border-radius: 9px; background: color-mix(in srgb, var(--am) 6%, var(--pn)); box-shadow: inset 3px 0 0 var(--am), inset 0 0 0 1px color-mix(in srgb, var(--am) 22%, var(--ln)); flex: none; } .ta-fnd > i { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--am); background: color-mix(in srgb, var(--am) 14%, transparent); } .ta-fnd > div { flex: 1; min-width: 0; } .ta-fnd b { font-size: 12.5px; font-weight: 700; } .ta-fnd p { margin: 2px 0 5px; font-size: 10.5px; color: var(--mu); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ta-hb { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; box-shadow: inset 3px 0 0 var(--bl), inset 0 0 0 1px var(--ln); } .ta-flt { flex-wrap: nowrap; overflow: hidden; } .ta-flt span { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 11px; box-shadow: inset 0 0 0 1px var(--ln2); background: var(--pn); } .ta-flt span i { font-style: normal; font-size: 9.5px; padding: 0 5px; border-radius: 999px; background: var(--soft); } .ta-flt span.on { color: var(--bl); background: var(--sel); box-shadow: inset 0 0 0 1px var(--bl); } .ta-split.f { flex: 1; grid-template-columns: 1fr 370px; } .ta-tbl.pcf .ta-tr { align-items: start; padding: 8px 12px; } .ta-tbl.pcf .ta-tr > span { white-space: normal; font-size: 11px; } .ta-tbl.pcf code { font-size: 10px; color: var(--mu); } .ta-tbl.pcf small { display: block; font: 9.5px var(--mono); color: var(--mu); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-tbl.pcf .ta-tr > span:nth-child(2) b { font-weight: 500; margin-right: 8px; } .ta-bb { display: block; height: 4px; margin-top: 4px; width: 80%; border-radius: 2px; background: var(--tl); } .ta-sig { display: block; margin-bottom: 3px; padding: 1px 8px; border-radius: 999px; font: 600 9.5px var(--mono); font-style: normal; background: var(--soft); } .ta-fd { display: flex; flex-direction: column; gap: 7px; overflow: hidden; } .ta-fd h6 { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); } .ta-fdh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; } .ta-fdh b { font: 700 13px var(--mono); color: var(--bl); } .ta-fdh small { flex-basis: 100%; order: 3; font: 10px var(--mono); color: var(--mu); } .ta-fdh i { margin-left: auto; font-style: normal; color: var(--mu); } .ta-carve { padding: 9px 12px; border-radius: 9px; background: color-mix(in srgb, var(--rd) 6%, var(--pn)); box-shadow: inset 3px 0 0 var(--rd), inset 0 0 0 1px color-mix(in srgb, var(--rd) 25%, var(--ln)); } .ta-carve b { display: block; } .ta-carve small { display: block; margin-bottom: 6px; color: var(--mu); font-size: 10.5px; } .ta-colsel { display: flex; align-items: center; gap: 12px; font-size: 11px; } .ta-colsel span { display: inline-flex; align-items: center; gap: 5px; } .ta-split.k { flex: 1; grid-template-columns: 1.55fr .9fr 1fr; } .ta-tbl.pk .ta-tr { padding: 6px 12px; } .ta-tbl.pk .ta-tr > span { font-size: 10.5px; } .ta-tbl.pk code { font-size: 10px; } .ta-links { display: flex; gap: 6px; margin-top: 8px; } .ta-lay { margin-top: 6px; } .ta-lay > b { display: block; margin-bottom: 4px; font: 700 11px var(--mono); } .ta-lay > b small { font-weight: 400; color: var(--mu); } .ta-kv.pk { padding-left: 14px; font-size: 10px; gap: 3px 12px; } .ta-kv.pk b { font-size: 10px; white-space: normal; text-align: right; } /* ---- script analyzer ---- */ .ta-scb { display: flex; align-items: center; gap: 14px; padding: 8px 14px; background: var(--pn2); border-bottom: 1px solid var(--ln); font-size: 11px; white-space: nowrap; overflow: hidden; } .ta-scb > b { font-size: 12.5px; } .ta-scb small { color: var(--mu); font-size: 9.5px; letter-spacing: .06em; } .ta-scb small b { color: var(--ink); font-size: 11px; letter-spacing: 0; } .ta-scb code { font-size: 10px; color: var(--ink); letter-spacing: 0; } .ta-scb .ta-btn { margin-left: auto; } .ta-scx { flex: 1; min-height: 0; display: grid; grid-template-columns: 230px 1fr 410px; } .ta-lys { padding: 10px; border-right: 1px solid var(--ln); background: var(--pn); overflow: hidden; } .ta-lys h6 { margin: 6px 0; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mu); font-weight: 600; } .ta-ly { position: relative; padding: 7px 10px; margin-bottom: 6px; border-radius: 8px; } .ta-ly.on { background: var(--sel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bl) 30%, transparent); } .ta-ly.c { box-shadow: inset 0 0 0 1px var(--ln2); } .ta-ly b { display: block; font-size: 11.5px; font-weight: 600; } .ta-ly small { color: var(--mu); font-size: 10px; } .ta-ly.on:first-of-type b { color: var(--bl); } .ta-ly em { float: left; margin: 3px 10px 0 0; font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--ln2); } .ta-ly.d { padding-left: 22px; } .ta-ly .dt { position: absolute; left: 8px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--mu); } .ta-ly .dt.b { background: var(--bl); } .ta-code { position: relative; margin: 0; padding: 6px 0; overflow: hidden; font-size: 11.5px; line-height: 1.62; background: var(--pn); } .ta-code > span { display: block; white-space: pre; padding-right: 10px; } .ta-code > span > i { display: inline-block; width: 38px; margin-right: 12px; padding-right: 8px; text-align: right; font-style: normal; color: var(--mu); border-right: 1px solid var(--ln); } .ta-code > span.cur { background: var(--sel); } .ta-code .cm { color: var(--mu); } .ta-code .st { color: color-mix(in srgb, var(--ink) 85%, var(--bl)); } .ta-code mark { padding: 1px 6px; border-radius: 999px; font-size: 10.5px; color: var(--ink); background: var(--pn); box-shadow: inset 0 0 0 1px var(--bl); } .ta-code mark em { font-style: normal; color: var(--mu); } .ta-code mark u { text-decoration: none; padding: 0 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ln2); color: var(--mu); } .ta-code mark u.g { color: var(--gr); box-shadow: none; } .ta-code mark.t { padding: 0 6px; font-size: 9.5px; color: var(--mu); box-shadow: inset 0 0 0 1px var(--ln2); } .ta-code mark.x.on { box-shadow: inset 0 0 0 1.5px var(--gr); } .ta-code u.enc { text-decoration: underline; text-decoration-color: var(--bl); text-underline-offset: 3px; } .ta-pop { position: absolute; left: 230px; top: 260px; width: 430px; padding: 10px 12px; border-radius: 9px; background: var(--pn); box-shadow: 0 14px 34px rgba(0, 0, 0, .22), inset 0 0 0 1px var(--ln2); white-space: normal; line-height: 1.5; font-family: Inter, system-ui, sans-serif; } .ta-pop > b { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--ln); font-size: 12.5px; } .ta-pop > b small { margin-left: auto; font: 9.5px var(--mono); color: var(--mu); } .ta-pop > b i { font-style: normal; color: var(--mu); } .ta-pop code { display: block; margin: 4px 0; padding: 6px 8px; border-radius: 6px; background: var(--pn2); font-size: 10px; white-space: nowrap; overflow: hidden; } .ta-pop p { font-size: 10.5px; } .ta-pop p:last-child { display: flex; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ln); } .ta-insr { padding: 10px 14px; border-left: 1px solid var(--ln); background: var(--pn); overflow: hidden; display: flex; flex-direction: column; gap: 6px; } .ta-insr h6 { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); font-weight: 600; } .ta-insr h6 small { text-transform: none; letter-spacing: 0; } .ta-icard { padding: 9px 11px; border-radius: 9px; box-shadow: inset 3px 0 0 var(--or), inset 0 0 0 1px var(--ln); } .ta-icard > p:first-child { display: flex; align-items: center; gap: 8px; } .ta-icard > p:first-child b { font-size: 12px; } .ta-icard > p:first-child .ta-tag, .ta-icard > p:first-child em { margin-left: auto; } .ta-icard em { font: 10px var(--mono); color: var(--mu); font-style: normal; } .ta-icard .ta-mut { font-size: 10.5px; margin: 2px 0 5px; } .ta-icard h6 { margin: 4px 0; } .ta-nd { padding: 7px 9px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--ln); } .ta-nd b { font-size: 11.5px; } .ta-nd em { float: right; font-style: normal; font-size: 10.5px; } .ta-nd p { font-size: 10.5px; margin-top: 2px; } .ta-hh { display: flex; align-items: center; gap: 8px; } .ta-hh b { font-size: 12.5px; } .ta-hh + .ta-mut { font-size: 10.5px; } .ta-chain { padding: 8px 10px; border-radius: 7px; font-size: 11px; background: color-mix(in srgb, var(--rd) 8%, var(--pn)); box-shadow: inset 3px 0 0 var(--rd); } .ta-chain small { display: block; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--rd); } .ta-nds { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 7px; box-shadow: inset 3px 0 0 var(--bl), inset 0 0 0 1px var(--ln); } .ta-nds > small { font-size: 8.5px; color: var(--mu); letter-spacing: .08em; text-transform: uppercase; } .ta-nds b { display: block; font: 700 11px var(--mono); } .ta-nds small { font-size: 10px; color: var(--mu); } .ta-nds .ta-btn { margin-left: auto; } .ta-obf { display: block; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--rd) 16%, var(--soft) 16%); } .ta-sink { display: grid; grid-template-columns: 80px 1fr auto; gap: 8px; font-size: 11px; } .ta-sink small { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; } .ta-sink small.bl { color: var(--bl); } .ta-sink small.pu { color: var(--pu); } .ta-sink small.rd { color: var(--rd); } .ta-sink small.am { color: var(--am); } .ta-sink b { font: 600 11px var(--mono); } .ta-sink em { font: 9.5px var(--mono); color: var(--mu); font-style: normal; } .ta-big { font-size: 14px; } .ta-btns { display: flex; flex-wrap: wrap; gap: 5px; } .ta-kv.sc { font-size: 11px; } .ta-kv.sc b { white-space: normal; word-break: break-all; font-size: 10px; } /* ---- document analyzer ---- */ .ta-dah { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--pn); border-bottom: 1px solid var(--ln); white-space: nowrap; overflow: hidden; } .ta-dah > div { min-width: 0; flex: 1; } .ta-dah b { display: block; font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; } .ta-dah small { display: block; font: 10px var(--mono); color: var(--mu); overflow: hidden; text-overflow: ellipsis; } .ta-dah .ta-si { width: 30px; height: 30px; background: var(--sel); color: var(--bl); } .ta-dah .ta-tag { border-radius: 999px; } .ta-banner { flex: none; padding: 10px 16px; border-radius: 10px; background: color-mix(in srgb, var(--rd) 6%, var(--pn)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rd) 22%, transparent); } .ta-banner small { color: var(--rd); font: 700 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; } .ta-banner b { display: block; margin: 2px 0; font-size: 17px; font-weight: 800; } .ta-banner b em { font-style: normal; color: var(--rd); } .ta-banner p { color: var(--mu); font-size: 11px; margin-bottom: 6px; } .ta-pd { display: flex; gap: 10px; padding: 8px 10px; margin-top: 6px; border-radius: 8px; background: color-mix(in srgb, var(--rd) 5%, var(--pn)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rd) 22%, transparent); } .ta-pd > i { flex: none; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--rd); background: color-mix(in srgb, var(--rd) 12%, transparent); } .ta-pd > div { min-width: 0; } .ta-pd p { margin-bottom: 4px; font-size: 11px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-pd p b { color: var(--ink); font-size: 12px; } .ta-pd .ta-tag { margin: 0 3px 0 0; } .ta-comp { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 7px 10px; border-radius: 8px; box-shadow: inset 3px 0 0 var(--tl), inset 0 0 0 1px var(--ln); white-space: nowrap; overflow: hidden; } .ta-comp svg { color: var(--tl); } .ta-comp code { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; } .ta-comp em { font-family: Inter, sans-serif; font-style: normal; color: var(--mu); font-size: 10px; } .ta-ac { display: flex; gap: 10px; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--am) 6%, var(--pn)); box-shadow: inset 3px 0 0 var(--am), inset 0 0 0 1px var(--ln); } .ta-ac > i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--am); background: color-mix(in srgb, var(--am) 14%, transparent); } .ta-ac > div { min-width: 0; } .ta-ac p { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-ac code { font-size: 10.5px; } .ta-ac small { display: block; font-size: 9.5px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-pays { display: grid; gap: 10px; } .ta-pays.c2 { grid-template-columns: 1fr 1fr; } .ta-pays.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .ta-pay { padding: 9px 10px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--ln2); background: var(--pn); min-width: 0; } .ta-pay > p:first-child { display: flex; align-items: center; gap: 6px; } .ta-pay > p:first-child b { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ta-pay > p:first-child .ta-tag { margin: 0 0 0 auto; font-size: 8.5px; padding: 1px 5px; } .ta-pay > small { display: block; font-size: 10px; color: var(--mu); margin-bottom: 5px; } .ta-pf { margin-top: 5px; padding: 5px 8px; border-radius: 6px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ta-pf small { display: block; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); } .ta-pay > p:last-child { display: flex; gap: 4px; margin-top: 7px; } .ta-pays.c5 .ta-pay > p:last-child .ta-btn { padding: 3px 6px; font-size: 9.5px; } .ta-pays.c5 .ta-pay > p:last-child .ta-btn:last-child { flex: 1; min-width: 0; overflow: hidden; } /* ---- pe analyzer ---- */ .ta-pefs { display: flex; gap: 10px; padding: 10px 14px; background: var(--pn); border-bottom: 1px solid var(--ln); } .ta-pefs > div { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 8px; box-shadow: inset 3px 0 0 var(--rd), inset 0 0 0 1px var(--ln2); min-width: 0; } .ta-pefs > div.g { box-shadow: inset 3px 0 0 var(--gr), inset 0 0 0 1px var(--ln2); } .ta-pefs > div.on { background: var(--sel); box-shadow: inset 3px 0 0 var(--rd), inset 0 0 0 1px var(--bl); } .ta-pefs .ta-si { width: 28px; height: 28px; color: var(--bl); background: color-mix(in srgb, var(--bl) 14%, transparent); } .ta-pefs b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-pefs small { font: 10px var(--mono); color: var(--mu); } .ta-pefs .add { justify-content: center; flex-direction: column; gap: 2px; box-shadow: inset 0 0 0 1px var(--ln2) !important; color: var(--mu); padding: 5px 22px; } .ta-pefs .add b { color: var(--mu); font-weight: 500; } .ta-peh { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--pn2); border-bottom: 1px solid var(--ln); } .ta-peh svg { color: var(--bl); } .ta-peh b { font-size: 14px; font-weight: 600; } .ta-peh .ta-btn { margin-left: auto; padding: 5px 12px; } .ta-mono.mu { font-size: 10px; flex: none; } .ta-warnb { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 9px; background: color-mix(in srgb, var(--am) 8%, var(--pn)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--am) 25%, transparent); flex: none; } .ta-warnb > svg { color: var(--am); } .ta-pdt { display: flex; align-items: flex-start; gap: 10px; margin-top: 6px; padding: 8px 12px; border-radius: 8px; box-shadow: inset 3px 0 0 var(--tl), inset 0 0 0 1px var(--ln); } .ta-pdt.l { box-shadow: inset 3px 0 0 var(--gr), inset 0 0 0 1px var(--ln); } .ta-pdt > div { flex: 1; } .ta-pdt b { font-size: 12px; font-weight: 600; } .ta-pdt p { font-size: 11px; color: var(--mu); margin: 1px 0 4px; } .ta-pdt > em { font: 10px var(--mono); color: var(--mu); font-style: normal; } .ta-api { display: flex; gap: 12px; padding: 8px 12px; margin-top: 6px; border-radius: 8px; background: var(--pn2); } .ta-api svg { color: var(--am); margin-top: 2px; } .ta-api b { font-size: 12px; font-weight: 600; } .ta-api p { font-size: 11px; color: var(--mu); margin-bottom: 3px; } .ta-split.t3 { flex: 1; grid-template-columns: 1fr 1fr 1fr; } .ta-tbl.imp { border-radius: 0; box-shadow: none; } .ta-tbl.imp .ta-tr { padding: 12px 14px; } .ta-tbl.imp code { font-size: 10.5px; } .ta-empty { padding: 0; display: flex; flex-direction: column; background: var(--pn2); } .ta-empty > div:last-child { flex: 1; display: flex; flex-direction: column; align-items: center; padding-top: 40px; text-align: center; } .ta-empty > div:last-child i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--mu); box-shadow: inset 0 0 0 2px var(--ln2); margin-bottom: 10px; } .ta-empty > div:last-child i svg { width: 20px; height: 20px; } .ta-empty > div:last-child b { font-size: 13px; font-weight: 600; } .ta-empty > div:last-child p { color: var(--mu); font-size: 11px; } .ta-big2 { display: block; font-size: 24px; font-weight: 800; } .ta-h5 { font-size: 13px; font-weight: 600; flex: none; } .ta-ent { display: flex; align-items: flex-end; gap: 3px; height: 70px; flex: none; } .ta-ent i { flex: 1; height: var(--h); } .ta-ent .o { background: #f59e0b; } .ta-ent .g { background: #22c55e; } .ta-ent .r { background: #ef4444; } .ta-tbl.ent .ta-tr { padding: 12px 16px; } .ta-eb { display: inline-block; width: 100px; height: 5px; margin-right: 12px; border-radius: 3px; vertical-align: middle; background: linear-gradient(90deg, var(--c) var(--w), var(--soft) var(--w)); } .ta-eb.am { --c: #f59e0b; } .ta-eb.gr { --c: #22c55e; } .ta-eb.rd { --c: #ef4444; } /* ---- outputs ---- */ .ta-invh { display: flex; justify-content: space-between; gap: 20px; padding: 12px 18px; background: var(--pn); } .ta-invh p { display: flex; align-items: center; gap: 8px; } .ta-invh code { font-size: 10px; color: var(--mu); } .ta-invh p small { color: var(--mu); font-size: 10.5px; } .ta-invh h4 { margin: 4px 0 6px; font-size: 19px; font-weight: 800; } .ta-invb { display: flex; gap: 6px; align-items: flex-start; } .ta-view { display: flex; justify-content: flex-end; align-items: center; gap: 4px; padding: 6px 14px; background: var(--pn2); border-top: 1px solid var(--ln); font-size: 11px; } .ta-view small { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); margin-right: 6px; } .ta-view span { padding: 4px 10px; border-radius: 6px; color: var(--mu); } .ta-view span.on { color: var(--bl); background: var(--sel); } .ta-split.d3 { grid-template-columns: 1fr 1fr 1fr; flex: none; } .ta-rows > small { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); } .ta-rows > b { display: block; margin: 4px 0; font-size: 28px; font-weight: 800; } .ta-rows > b.s { font-size: 14px; font-weight: 600; margin: 12px 0 6px; } .ta-rows > p.ta-mut { font-size: 11px; margin-bottom: 4px; } .ta-rows p.bl { font-size: 11px; font-weight: 600; margin-top: 8px; } .ta-rows p:not(.ta-mut):not(.bl) { display: grid; grid-template-columns: 56px 1fr 30px; gap: 8px; align-items: center; font-size: 10.5px; color: var(--mu); } .ta-rows p i { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--c) var(--w), var(--soft) var(--w)); } .ta-rows i.r { --c: var(--rd); } .ta-rows i.o { --c: var(--or); } .ta-rows i.b { --c: var(--tl); } .ta-pth { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--pn); border-bottom: 1px solid var(--ln); } .ta-pth > svg { color: var(--bl); width: 17px; height: 17px; } .ta-pth b { font-size: 14px; } .ta-pth code { font-size: 10px; color: var(--mu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ta-pth i { margin-left: auto; font-style: normal; color: var(--mu); } .ta-ptc { position: relative; flex: 1; background: var(--pn) radial-gradient(circle, var(--ln) 1px, transparent 1.2px) 0 0 / 22px 22px; } .ta-ptc > svg { position: absolute; left: 0; top: 0; width: 1280px; height: 740px; } .ta-ptc > svg path { fill: none; stroke: var(--bl); stroke-width: 2; } .ta-ptc > svg circle { fill: var(--pn); stroke: var(--ln2); } .ta-ptz { position: absolute; left: 16px; top: 14px; z-index: 1; display: flex; gap: 6px; padding: 6px; border-radius: 10px; background: var(--pn); box-shadow: 0 6px 16px rgba(0, 0, 0, .08), inset 0 0 0 1px var(--ln); } .ta-ptz i { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: 15px; box-shadow: inset 0 0 0 1px var(--ln2); } .ta-pthint { position: absolute; right: 18px; top: 14px; font-size: 10.5px; color: var(--mu); } .ta-ptc > svg { top: 30px; height: 700px; } .ta-ptc > svg path { stroke: color-mix(in srgb, var(--mu) 45%, transparent); stroke-width: 1.3; } .ta-ptc > svg path.ch { stroke: var(--bl); stroke-width: 2.2; } .ta-tn { position: absolute; margin-top: 30px; width: 206px; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 6px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln2); } .ta-tn > span { flex: none; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; color: #fff; } .ta-tn > span svg { width: 13px; height: 13px; stroke-width: 2.4; } .ta-tn > div { min-width: 0; } .ta-tn b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-tn small { display: block; font-size: 10.5px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-tn.ok > span { background: var(--gr); border-radius: 50%; width: 20px; height: 20px; margin: 0 3px; } .ta-tn.ok > span svg { width: 11px; height: 11px; stroke-width: 3.2; } .ta-tn.tgt { box-shadow: inset 0 0 0 2px var(--bl), 0 0 0 4px color-mix(in srgb, var(--bl) 16%, transparent); } .ta-tn.tgt > span { color: var(--rd); background: color-mix(in srgb, var(--rd) 12%, transparent); } .ta-tn.tgt > span svg { width: 15px; height: 15px; stroke-width: 1.8; } .ta-tn.file { background: color-mix(in srgb, var(--rd) 9%, var(--pn)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rd) 55%, transparent); } .ta-tn.file > span { background: var(--rd); } .ta-tn.net > span { background: var(--pu); border-radius: 50%; } .ta-tn.more { background: none; box-shadow: none; outline: 1.5px dashed color-mix(in srgb, var(--or) 70%, transparent); outline-offset: -1.5px; } .ta-tn.more > span { background: var(--or); border-radius: 50%; } .ta-tn.hid { justify-content: space-between; flex-wrap: wrap; align-content: center; gap: 0 10px; background: repeating-linear-gradient(135deg, var(--pn) 0 6px, var(--pn2) 6px 12px); box-shadow: none; outline: 1.5px dashed var(--ln2); outline-offset: -1.5px; } .ta-tn.hid i { font-style: normal; color: var(--mu); font-size: 15px; } .ta-tn.hid em { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; color: var(--mu); background: var(--soft); } .ta-tn.hid small { display: none; } .ta-leg { position: absolute; left: 16px; bottom: 16px; padding: 10px 14px; border-radius: 9px; background: var(--pn); box-shadow: 0 6px 16px rgba(0, 0, 0, .08), inset 0 0 0 1px var(--ln); font-size: 11px; } .ta-leg b { display: block; margin-bottom: 4px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; } .ta-leg p { display: flex; align-items: center; gap: 8px; padding: 1px 0; } .ta-leg i { width: 9px; height: 9px; border-radius: 50%; } .ta-leg i.g { background: var(--gr); } .ta-leg i.b { background: var(--bl); } .ta-leg i.o { background: var(--or); } .ta-leg i.r { background: var(--rd); } .ta-leg i.p { background: var(--pu); } .ta-story2 { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr auto; gap: 10px; } .ta-phs { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px; border-radius: 10px; background: var(--pn); box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 1px var(--ln); overflow: hidden; min-height: 0; } .ta-phs.am { --c: var(--am); background: color-mix(in srgb, var(--am) 4%, var(--pn)); } .ta-phs.bl { --c: var(--tl); } .ta-phh { display: flex; gap: 10px; } .ta-phh .ta-si { width: 28px; height: 28px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); } .ta-phh b { font-size: 13px; font-weight: 700; } .ta-phh p { margin: 2px 0 5px; font-size: 10.5px; color: var(--mu); } .ta-phs .ta-fnd { margin-left: 38px; } .ta-evs { margin-left: 38px; } .ta-evs p { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 10.5px; white-space: nowrap; overflow: hidden; } .ta-evs p span { overflow: hidden; text-overflow: ellipsis; color: var(--mu); } .ta-evs code { font-size: 10px; color: var(--mu); } .ta-evs .ta-tag { flex: none; } .ta-art { color: var(--mu); } .ta-art svg { width: 12px; } .ta-art small { color: var(--mu); } .ta-none { margin-left: 38px; padding: 9px; border-radius: 7px; text-align: center; font-size: 11px; color: var(--mu); box-shadow: inset 0 0 0 1px var(--ln2); background-image: none; border: 1px dashed transparent; } .ta-fl { color: var(--mu) !important; } .ta-fl { font-family: var(--mono); font-size: 10px !important; padding-left: 8px !important; } .ta-lib { position: absolute; left: 340px; top: 170px; z-index: 2; width: 540px; padding: 8px; border-radius: 10px; background: var(--pn); box-shadow: 0 18px 40px rgba(0, 0, 0, .2), inset 0 0 0 1px var(--ln2); } .ta-lib > div { padding: 7px 8px; border-bottom: 1px solid var(--ln); } .ta-lib > div:last-child { border: 0; } .ta-lib > div p { display: flex; justify-content: space-between; } .ta-lib > div b { font-size: 12px; font-weight: 600; } .ta-lib code { display: block; font-size: 10.5px; color: var(--bl); } .ta-lib small { color: var(--mu); font-size: 10.5px; } .ta-lib .ta-tag { font-size: 8.5px; text-transform: uppercase; letter-spacing: .08em; } .ta-lg { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ln2); font-size: 10.5px; color: var(--bl); } .ta-lg em { font: 9px var(--mono); color: var(--mu); font-style: normal; } .ta-lg i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--mu)); } .ta-lg.bl { --c: var(--bl); } .ta-lg.gr { --c: var(--gr); } .ta-lg.pk { --c: var(--pk); } .ta-lg.am { --c: var(--am); } .ta-lg.rd { --c: var(--rd); } .ta-lg.pu { --c: var(--pu); } .ta-card .ta-filters { margin-bottom: 6px; } .ta-card .ta-filters .ta-in, .ta-card .ta-filters .ta-sel { flex: none; } .ta-card .ta-filters .ta-rng { margin-left: auto; } .ta-tchart { position: relative; display: grid; grid-template-columns: 70px 1fr; grid-template-rows: 150px auto; margin-top: 8px; } .ta-yax { display: flex; flex-direction: column; justify-content: space-between; padding-right: 8px; text-align: right; font-size: 9.5px; color: var(--mu); } .ta-tbars { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--ln2); background: repeating-linear-gradient(0deg, transparent 0 29px, var(--ln) 29px 30px); } .ta-tbars i { flex: 1; height: 100%; display: flex; flex-direction: column-reverse; } .ta-tbars b { height: var(--h); } .ta-tbars .c0 { background: #a78bfa; } .ta-tbars .c1 { background: #ef4444; } .ta-tbars .c2 { background: #3b82f6; } .ta-tbars .c3 { background: #f59e0b; } .ta-xax { grid-column: 2; display: flex; justify-content: space-between; padding-top: 3px; font-size: 9.5px; color: var(--mu); } .ta-az { display: inline-flex; padding: 2px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ln2); margin-left: auto; } .ta-az i { font-style: normal; padding: 2px 8px; font-size: 10.5px; color: var(--mu); } .ta-az i.on { color: var(--bl); background: var(--sel); border-radius: 4px; } .ta-tbl.tl .ta-tr { align-items: start; padding: 10px 12px; } .ta-tbl.tl .ta-tr > span { white-space: normal; font-size: 11px; } .ta-tbl.tl .ta-tr > span b { display: block; margin-bottom: 4px; font-size: 12px; } .ta-tbl.tl small { display: block; margin-top: 4px; font-size: 10.5px; color: var(--mu); } .ta-kv.tl { font-size: 10.5px; gap: 2px 12px; } .ta-kv.tl b { font-size: 10px; white-space: normal; word-break: break-all; } .ta-stx { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; overflow: hidden; background: var(--pn2); } .ta-sth { display: flex; justify-content: space-between; gap: 20px; } .ta-sth > div > small { font: 600 10px var(--mono); color: var(--am); letter-spacing: .12em; text-transform: uppercase; } .ta-sth h4 { margin-top: 6px; font: 400 27px/1.15 Georgia, "Times New Roman", serif; max-width: 460px; } .ta-hosts { max-width: 470px; text-align: right; font: 10px var(--mono); } .ta-hosts p { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; margin-bottom: 4px; } .ta-hosts code { padding: 2px 6px; border-radius: 4px; font-size: 10px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln2); } .ta-hosts > small { display: block; font-size: 8.5px; color: var(--mu); letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; } .ta-hosts > b { display: block; font-weight: 400; font-size: 10.5px; } .ta-stc { display: flex; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--ln); } .ta-stc span { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 4px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln2); font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mu); } .ta-stc b { font: 400 18px Georgia, serif; color: var(--ink); letter-spacing: 0; } .ta-stc .o b { color: var(--or); } .ta-stb { display: flex; gap: 6px; } .ta-stb .amb { margin-left: auto; } .ta-seg3 { display: inline-flex; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ln2); background: var(--pn); margin-right: 8px; } .ta-seg3 i { font-style: normal; padding: 5px 12px; font-size: 11px; color: var(--mu); } .ta-seg3 i.on { color: var(--or); background: color-mix(in srgb, var(--or) 9%, var(--pn)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 45%, transparent); border-radius: 6px; } .ta-seg3 sup { font-size: 7px; } .ta-stg { flex: 1; min-height: 0; display: grid; grid-template-columns: 290px 1fr; gap: 16px; } .ta-chap { border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ln2); background: var(--pn); overflow: hidden; } .ta-chap h6 { display: flex; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--ln); font: 600 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mu); } .ta-chap > div { border-bottom: 1px solid var(--ln); box-shadow: inset 3px 0 0 var(--c); } .ta-chap > div.on { background: var(--sel); } .ta-chap > div > p:first-child { display: flex; gap: 10px; padding: 7px 12px 5px; } .ta-chap > div > p:first-child i { width: 26px; font: italic 17px Georgia, serif; color: var(--c); } .ta-chap > div > p:first-child b { flex: 1; font: 400 13.5px Georgia, serif; } .ta-chap b small { display: block; font: 8.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mu); } .ta-chap em { font: 10px var(--mono); color: var(--mu); font-style: normal; } .ta-chap p.ev { display: flex; gap: 8px; padding: 2px 12px 5px 44px; font-size: 10.5px; line-height: 1.35; } .ta-chap p.ev small { flex: none; font: 9px var(--mono); color: var(--mu); } .ta-chap p.ev .ta-tag { padding: 0 4px; font-size: 8px; } .ta-chap .g { --c: #94a3b8; } .ta-chap .o { --c: #f97316; } .ta-chap .b { --c: #38bdf8; } .ta-chap .gr { --c: #22c55e; } .ta-chap .y { --c: #eab308; } .ta-chd { border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ln2); background: var(--pn); overflow: hidden; } .ta-chh { display: flex; gap: 22px; align-items: flex-start; padding: 12px 20px; box-shadow: inset 3px 0 0 var(--c); } .ta-chh.g { --c: #94a3b8; background: var(--pn2); } .ta-chh.o { --c: #f97316; background: color-mix(in srgb, #f97316 6%, var(--pn)); } .ta-chh > i { font: italic 44px/1 Georgia, serif; color: var(--c); width: 40px; } .ta-chh > div { flex: 1; } .ta-chh small { font: 600 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c); } .ta-chh b { display: block; font: 400 22px Georgia, serif; } .ta-chh b em { font-style: italic; color: var(--mu); } .ta-chh p { font: italic 12px Georgia, serif; color: var(--mu); margin-top: 3px; } .ta-chh > span { text-align: right; } .ta-chh > span b { font: italic 22px Georgia, serif; } .ta-chh > span small { display: block; color: var(--mu); font-size: 8.5px; margin-top: 2px; } .ta-ev { display: flex; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--ln); } .ta-ev > small.t { flex: none; width: 56px; font: 9px var(--mono); color: var(--mu); text-align: right; text-transform: uppercase; } .ta-ev > div > small { font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mu); } .ta-ev > div > b { display: block; margin: 3px 0; font: 400 16px Georgia, serif; } .ta-ev > div > b em { color: var(--mu); font-size: 14px; } .ta-ev > div > p { max-width: 560px; margin-bottom: 6px; font: 12.5px/1.5 Georgia, serif; } .ta-ev .ta-btn { margin-right: 4px; } .ta-ev .ta-mut { font: 9.5px var(--mono); } .ta-chf { display: flex; justify-content: space-between; padding: 8px 20px; border-top: 1px solid var(--ln); background: var(--pn2); font: 9.5px var(--mono); color: var(--mu); } .ta-anote { margin-top: 8px; max-width: 520px; padding: 8px 12px; font: italic 12px Georgia, serif; background: color-mix(in srgb, var(--am) 10%, var(--pn)); box-shadow: inset 3px 0 0 var(--am); } .ta-anote small { font: 700 8.5px var(--mono); font-style: normal; color: var(--am); letter-spacing: .1em; text-transform: uppercase; } /* ---------- ThreatResponder for MSSPs + Integrations (after the DFIR toolbox) ---------- */ .igx { --head: #fff; --ink: #dfe6ff; --mut: #aab6e2; --card: rgba(255, 255, 255, .05); --card-line: rgba(174, 188, 239, .18); --line: rgba(174, 188, 239, .16); --tile: rgba(255, 255, 255, .07); --acc: #6ea0ff; --bar: #ff5a61; --ok: #3ecf8e; --warn: #f2b634; --app: #0f1a3d; --app2: #142150; --app-line: rgba(174, 188, 239, .16); position: relative; padding: clamp(70px, 5.6vw, 100px) 0; color: var(--ink); background: radial-gradient(45% 55% at 85% 20%, rgba(70, 110, 230, .22), transparent 70%), linear-gradient(180deg, #13225a, #0f1c4d); } .igx.lt { --head: #0f1c4d; --ink: #1f2747; --mut: #5c6488; --card: #fff; --card-line: #e1e6f2; --line: #e3e8f3; --tile: #eef2fa; --acc: #2f6fed; --bar: #e0343c; --ok: #13936a; --warn: #b7791f; --app: #fff; --app2: #f6f8fc; --app-line: #e4e8f1; background: radial-gradient(45% 55% at 85% 20%, #e3ebfb, transparent 70%), linear-gradient(180deg, #f7f9fd, #eef2f9); } .igx-in { width: min(1680px, 100% - 2 * var(--gut)); margin-inline: auto; } .igx svg { width: 18px; height: 18px; } .igx-top { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 3.4vw, 64px); align-items: start; } /* left: the MSSP story */ .igx-kick { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-size: 12px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--acc); } .igx-kick::before { content: ""; width: 44px; height: 2px; background: currentColor; } .igx h2 { font-size: clamp(34px, 2.6vw, 48px); font-weight: 900; line-height: 1.06; letter-spacing: -.015em; color: var(--head); } .igx h2 em { font-style: normal; color: var(--acc); } .igx-lead { margin-top: 20px; max-width: 600px; font-size: clamp(16px, 1.15vw, 18.5px); line-height: 1.6; color: var(--mut); } .igx-pills { display: grid; gap: 10px; margin-top: 26px; } .igx-pills > div { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); } .igx-pills span { flex: none; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); } .igx-pills b { display: block; font-size: 15px; font-weight: 800; color: var(--head); } .igx-pills small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--mut); } .igx-ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin-top: 26px; } .igx-cta { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 10px; font-size: 15px; font-weight: 800; color: #fff; background: var(--bar); text-decoration: none; } .igx-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--acc); text-decoration: none; } .igx-cta svg, .igx-link svg { width: 17px; height: 17px; } /* right: flow, the Integrations page, destinations */ .igx-flow { display: flex; align-items: stretch; margin-bottom: 16px; } .igx-node { flex: 1 1 0; min-width: 0; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 14px 8px 12px; border-radius: 12px; text-align: center; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); transition: box-shadow .35s, background .35s; } .igx-node > span { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--acc); background: color-mix(in srgb, var(--acc) 13%, transparent); } .igx-node.tr > span { background: none; } .igx-node .tr-mark { --h: 34px; } .igx-node b { font-size: 13px; font-weight: 800; color: var(--head); line-height: 1.25; } .igx-node small { font-size: 11.5px; color: var(--mut); } .igx-node.lit { box-shadow: inset 0 0 0 1.5px var(--acc), 0 10px 26px color-mix(in srgb, var(--acc) 22%, transparent); background: color-mix(in srgb, var(--acc) 8%, var(--card)); } .igx-wire { position: relative; flex: 0 0 clamp(14px, 1.4vw, 26px); align-self: center; height: 2px; background: var(--line); overflow: hidden; } .igx-wire b { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: var(--acc); opacity: 0; } .igx-wire.run b { opacity: 1; animation: igx-run .45s linear forwards; } @keyframes igx-run { to { left: 100%; } } .igx-app { border-radius: 14px; padding: 14px 18px 12px; background: var(--app); box-shadow: inset 0 0 0 1px var(--app-line), 0 28px 60px rgba(3, 10, 35, .28); } .igx.lt .igx-app { box-shadow: inset 0 0 0 1px var(--app-line), 0 22px 50px rgba(15, 28, 77, .1); } .igx-ah { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .igx-ah b { display: block; font-size: 19px; font-weight: 800; color: var(--head); } .igx-ah small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--mut); } .igx-ctx { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, transparent); } .igx-ctx svg { width: 14px; height: 14px; } .igx-tabs { display: flex; gap: 4px; margin: 10px 0 10px; border-bottom: 1px solid var(--app-line); } .igx-tabs span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--mut); border-bottom: 2px solid transparent; margin-bottom: -1px; } .igx-tabs span svg { width: 14px; height: 14px; } .igx-tabs span.on { color: var(--acc); border-bottom-color: var(--acc); } .igx-tabs i { font-style: normal; font-size: 10px; font-weight: 800; padding: 0 6px; border-radius: 999px; background: var(--tile); } .igx-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .igx-bar b { display: block; font-size: 13.5px; color: var(--head); } .igx-bar small { display: block; font-size: 11.5px; color: var(--mut); } .igx-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; font-size: 12px; font-weight: 800; color: #fff; background: #2f6fed; } .igx-btn svg { width: 14px; height: 14px; } .igx-search { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; padding: 7px 10px; border-radius: 8px; font-size: 12px; color: var(--mut); background: var(--app2); box-shadow: inset 0 0 0 1px var(--app-line); } .igx-search svg { width: 14px; height: 14px; } .igx-row { position: relative; display: grid; grid-template-columns: 30px 1fr auto 104px; gap: 2px 12px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--app-line); border-radius: 8px; transition: background .35s; } .igx-row:last-child { border-bottom: 0; } .igx-row p b { display: block; font-size: 13px; font-weight: 700; color: var(--head); } .igx-row p small { display: block; font-size: 11.5px; color: var(--mut); } .igx-scope { font-size: 11.5px; color: var(--mut); padding: 2px 8px; border-radius: 6px; background: var(--tile); white-space: nowrap; } .igx-st { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--ok); } .igx-st i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); } .igx-st.pause { color: var(--warn); } .igx-ev { grid-column: 2 / -1; font-style: normal; font: 11px "JetBrains Mono", Consolas, monospace; color: var(--acc); height: 0; overflow: hidden; opacity: 0; transition: height .35s, opacity .35s; } .igx-row.hit { background: color-mix(in srgb, var(--acc) 8%, transparent); } .igx-row.hit .igx-ev { height: 16px; opacity: 1; } .igx-note { margin-top: 8px; font-size: 11.5px; color: var(--mut); } .igx-mono { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font: 800 12px/1 Inter, system-ui, sans-serif; font-style: normal; color: #fff; background: var(--c); } .igx-mono svg { width: 15px; height: 15px; } .igx-dh { margin: clamp(24px, 2vw, 34px) 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--acc); } .igx-dest { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; } .igx-dest > div { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); min-width: 0; } .igx-dest b { display: block; font-size: 13px; font-weight: 800; color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .igx-dest small { display: block; font-size: 11.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* four cards */ .igx-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 20px); margin-top: clamp(14px, 1.2vw, 20px); } .igx-cards article { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; padding: 18px 22px 20px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); } .igx-cards span { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--acc); background: color-mix(in srgb, var(--acc) 13%, transparent); } .igx-cards span svg { width: 22px; height: 22px; } .igx-cards em { position: absolute; right: 20px; top: 20px; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--mut); } .igx-cards h3 { margin: 2px 30px 0 0; font-size: 17px; font-weight: 800; color: var(--head); } .igx-cards p { font-size: 14px; line-height: 1.55; color: var(--mut); } @media (max-width: 1500px) { .igx-dest { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1280px) { .igx-top { grid-template-columns: 1fr; } .igx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .igx-flow { flex-wrap: wrap; gap: 8px; } .igx-wire { display: none; } .igx-node { flex-basis: 30%; } .igx-dest { grid-template-columns: repeat(2, minmax(0, 1fr)); } .igx-cards { grid-template-columns: 1fr; } .igx-row { grid-template-columns: 30px 1fr; } .igx-scope, .igx-st { grid-column: 2; } } @media (prefers-reduced-motion: reduce) { .igx-wire.run b { animation: none; } } /* ---------- Why Organizations Choose ThreatResponder® + Testimonials (replace the legacy Pinpoint, Extend, Why, Trusted-by and Testimonials sections) ---------- */ .sec.wyx-old { display: none; } .wyx, .tmx { --head: #fff; --ink: #dfe6ff; --mut: #aab6e2; --card: rgba(255, 255, 255, .05); --card-line: rgba(174, 188, 239, .18); --tile: rgba(255, 255, 255, .07); --acc: #6ea0ff; --bar: #ff5a61; --ok: #3ecf8e; position: relative; padding: clamp(80px, 6.4vw, 110px) 0; color: var(--ink); overflow: hidden; background: radial-gradient(55% 50% at 15% 0%, rgba(80, 120, 230, .2), transparent 70%), linear-gradient(180deg, #13225a, #0f1c4d); } .wyx.lt, .tmx.lt { --head: #0f1c4d; --ink: #1f2747; --mut: #5c6488; --card: #fff; --card-line: #e1e6f2; --tile: #eef2fa; --acc: #2f6fed; --bar: #e0343c; --ok: #13936a; background: radial-gradient(55% 50% at 15% 0%, #e6edfb, transparent 70%), linear-gradient(180deg, #f7f9fd, #eef2f9); } .wyx-in, .tmx-in { width: min(1680px, 100% - 2 * var(--gut)); margin-inline: auto; } .wyx svg, .tmx svg { width: 20px; height: 20px; } .wyx-head, .tmx-head { text-align: center; margin-bottom: clamp(30px, 2.6vw, 46px); } .wyx-kick, .tmx-kick { margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--bar); } .wyx h2, .tmx h2 { font-size: clamp(34px, 3vw, 50px); font-weight: 900; line-height: 1.1; letter-spacing: -.01em; color: var(--head); } .wyx h2::after, .tmx h2::after { content: ""; display: block; width: 90px; height: 4px; margin: 20px auto 0; border-radius: 2px; background: var(--bar); } /* why: Save Money beside a 2 × 3 grid */ .wyx-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: clamp(12px, 1.1vw, 18px); } .wyx-save { grid-row: span 2; display: flex; flex-direction: column; padding: 26px 26px 22px; border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 16%, var(--card)), var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 35%, var(--card-line)); } .wyx-ic { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); } .wyx-save .wyx-ic { width: 52px; height: 52px; } .wyx-save .wyx-ic svg { width: 26px; height: 26px; } .wyx-save h3 { margin-top: 16px; font-size: clamp(22px, 1.6vw, 27px); font-weight: 900; color: var(--head); } .wyx-save ul { flex: 1; list-style: none; margin: 18px 0 0; padding: 0; display: grid; align-content: space-evenly; gap: 14px; } .wyx-save li { display: flex; gap: 12px; font-size: 16px; line-height: 1.45; color: var(--ink); } .wyx-save li i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); } .wyx-save li i svg { width: 13px; height: 13px; stroke-width: 2.6; } .wyx-c { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 22px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); transition: transform .3s, box-shadow .3s; } .wyx-c:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 45%, var(--card-line)), 0 16px 34px rgba(3, 10, 35, .16); } .wyx-c h3 { font-size: 17px; font-weight: 800; line-height: 1.3; color: var(--head); } .wyx-c p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--mut); } .wyx-reg { display: flex; flex-wrap: wrap; gap: 6px; } .wyx-reg i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 3px 8px; border-radius: 6px; color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, transparent); } @media (max-width: 1280px) { .wyx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wyx-save { grid-row: auto; grid-column: 1 / -1; } } @media (max-width: 700px) { .wyx-grid { grid-template-columns: 1fr; } } /* testimonials: the two product quotes large, the services quotes in a ribbon */ .tmx-prod { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.4vw, 24px); } .tmx-p { position: relative; margin: 0; display: flex; flex-direction: column; padding: 30px 32px 26px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); } .tmx-q { position: absolute; right: 28px; top: 26px; width: 46px !important; height: 37px !important; fill: color-mix(in srgb, var(--acc) 30%, transparent); } .tmx-tag { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; color: var(--bar); background: color-mix(in srgb, var(--bar) 12%, transparent); } .tmx-p blockquote { margin: 18px 0 22px; font-size: clamp(17px, 1.2vw, 19.5px); line-height: 1.6; color: var(--head); } .tmx-p figcaption { margin-top: auto; display: flex; align-items: center; gap: 14px; } .tmx-p figcaption i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 15px; font-weight: 800; color: #fff; background: linear-gradient(150deg, #3b82f6, #1e3a8a); } .tmx-p figcaption b { display: block; font-size: 15.5px; font-weight: 800; color: var(--head); } .tmx-p figcaption small { font-size: 13.5px; color: var(--mut); } .tmx-sub { margin: clamp(28px, 2.4vw, 40px) 0 14px; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--mut); } .tmx-rib { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .tmx-track { display: flex; gap: 16px; width: max-content; animation: tmx-drift 70s linear infinite; animation-play-state: paused; } .tmx.run .tmx-track { animation-play-state: running; } .tmx-rib:hover .tmx-track { animation-play-state: paused; } @keyframes tmx-drift { to { transform: translateX(calc(-50% - 8px)); } } .tmx-s { margin: 0; width: 400px; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); } .tmx-s small { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); } .tmx-s blockquote { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); } .tmx-s figcaption { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--mut); } .tmx.still .tmx-track { animation: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: auto; } .tmx.still .tmx-s { width: auto; } @media (max-width: 1280px) { .tmx.still .tmx-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .tmx.still .tmx-s[aria-hidden] { display: none; } .tmx.still .tmx-rib { -webkit-mask-image: none; mask-image: none; } @media (max-width: 1000px) { .tmx-prod { grid-template-columns: 1fr; } } /* ---------- Get started + About + footer (replace the legacy .gs / .about / footer / .copy; same content) ---------- */ .gsx, .abx { --head: #fff; --ink: #dfe6ff; --mut: #aab6e2; --card: rgba(255, 255, 255, .05); --card-line: rgba(174, 188, 239, .18); --tile: rgba(255, 255, 255, .07); --acc: #6ea0ff; --bar: #ff5a61; --ok: #3ecf8e; --field: rgba(255, 255, 255, .06); --field-line: rgba(174, 188, 239, .26); position: relative; color: var(--ink); overflow: hidden; background: radial-gradient(50% 60% at 88% 10%, rgba(80, 120, 230, .2), transparent 70%), linear-gradient(180deg, #13225a, #0f1c4d); } .gsx.lt, .abx.lt { --head: #0f1c4d; --ink: #1f2747; --mut: #5c6488; --card: #fff; --card-line: #e1e6f2; --tile: #eef2fa; --acc: #2f6fed; --bar: #e0343c; --ok: #13936a; --field: #f6f8fc; --field-line: #dfe4f0; background: radial-gradient(50% 60% at 88% 10%, #e3ebfb, transparent 70%), linear-gradient(180deg, #f7f9fd, #eef2f9); } .gsx svg, .abx svg, .ftx svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gsx-in, .abx-in, .ftx-in { width: min(1680px, 100% - 2 * var(--gut)); margin-inline: auto; } .gsx-kick, .abx-kick { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-size: 12px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--bar); } .gsx-kick::before, .abx-kick::before { content: ""; width: 44px; height: 2px; background: currentColor; } .gsx h2, .abx h2 { font-size: clamp(34px, 2.6vw, 48px); font-weight: 900; line-height: 1.08; letter-spacing: -.015em; color: var(--head); } /* the official ThreatResponder® logo file in place of the name (its lettering cannot be reproduced in type), as in the hero */ .gsx-logo { display: inline-block; margin-right: .12em; vertical-align: -.16em; } .gsx-logo img { display: block; width: auto; height: 1.02em; } /* get started: the pitch and three steps beside the request form */ .gsx { padding: clamp(80px, 6.4vw, 110px) 0; } .gsx-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 4.4vw, 84px); align-items: center; } .gsx-sub { margin-top: 22px; font-size: clamp(19px, 1.35vw, 23px); font-weight: 800; line-height: 1.35; color: var(--head); } .gsx-lead { margin-top: 10px; max-width: 640px; font-size: clamp(16px, 1.1vw, 18px); line-height: 1.6; color: var(--mut); } .gsx-steps { position: relative; list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; max-width: 680px; } .gsx-steps::before { content: ""; position: absolute; left: 37px; top: 30px; bottom: 30px; width: 2px; background: linear-gradient(var(--acc), color-mix(in srgb, var(--acc) 20%, transparent)); } .gsx-steps li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; padding: 14px 18px 14px 16px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); } .gsx-steps i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 16px; font-weight: 900; color: #fff; background: linear-gradient(150deg, #4f86f7, #2f55c8); box-shadow: 0 0 0 5px color-mix(in srgb, var(--acc) 14%, transparent); } .gsx-steps b { display: block; font-size: 16px; font-weight: 800; color: var(--head); } .gsx-steps span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--mut); } .gsx-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: clamp(24px, 2vw, 34px); border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line), 0 28px 60px rgba(3, 10, 35, .28); } .gsx.lt .gsx-form { box-shadow: inset 0 0 0 1px var(--card-line), 0 24px 54px rgba(15, 28, 77, .1); } .gsx-seg { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--tile); } .gsx-seg button { font: inherit; font-size: 14px; font-weight: 800; padding: 11px; border: 0; border-radius: 9px; color: var(--mut); background: none; cursor: pointer; transition: background .2s, color .2s; } .gsx-seg button.on { color: #fff; background: #2f6fed; box-shadow: 0 6px 16px rgba(47, 111, 237, .3); } .gsx-form label { display: grid; gap: 7px; font-size: 13px; font-weight: 700; color: var(--mut); } .gsx-form .full { grid-column: 1 / -1; } .gsx-form input, .gsx-form textarea { font: inherit; font-size: 15px; color: var(--head); padding: 12px 14px; border-radius: 10px; border: 0; background: var(--field); box-shadow: inset 0 0 0 1px var(--field-line); resize: vertical; transition: box-shadow .2s; } .gsx-form input::placeholder, .gsx-form textarea::placeholder { color: color-mix(in srgb, var(--mut) 70%, transparent); } .gsx-form input:focus, .gsx-form textarea:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--acc); } .gsx-go { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 4px; } .gsx-btn { font: inherit; font-size: 16px; font-weight: 800; padding: 14px 26px; border: 0; border-radius: 10px; color: #fff; background: var(--bar); cursor: pointer; box-shadow: 0 10px 24px color-mix(in srgb, var(--bar) 30%, transparent); } .gsx-ua { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--mut); text-decoration: none; } .gsx-ua i { width: 8px; height: 8px; border-radius: 50%; background: var(--bar); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bar) 20%, transparent); } .gsx-ua b { color: var(--head); } /* about: one compact band */ .abx { padding: clamp(64px, 5vw, 90px) 0; } .abx-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(36px, 4.4vw, 84px); align-items: center; } .abx-l > p:not(.abx-kick) { margin-top: 20px; max-width: 760px; font-size: clamp(16px, 1.15vw, 18.5px); line-height: 1.65; color: var(--mut); } .abx-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 24px; } .abx-links a { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--acc); text-decoration: none; } .abx-links svg { width: 16px; height: 16px; transition: transform .2s; } .abx-links a:hover svg { transform: translateX(3px); } .abx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.1vw, 18px); } .abx-facts > div { display: grid; justify-items: start; gap: 4px; padding: 22px 22px 20px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); } .abx-facts span { width: 44px; height: 44px; margin-bottom: 12px; border-radius: 12px; display: grid; place-items: center; color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); } .abx-facts span svg { width: 22px; height: 22px; } .abx-facts b { font-size: clamp(26px, 2vw, 34px); font-weight: 900; line-height: 1.05; color: var(--head); } .abx-facts small { font-size: 14px; line-height: 1.4; color: var(--mut); } /* footer: always the deepest navy, below whichever tone About takes */ footer.ftx { padding: clamp(56px, 4.4vw, 76px) 0 90px; font-size: 14.5px; color: #aab6e2; background: #0a1438; box-shadow: inset 0 1px 0 rgba(174, 188, 239, .12); } .ftx-top { display: grid; grid-template-columns: minmax(260px, 1.1fr) minmax(0, 3.4fr); gap: clamp(36px, 4vw, 80px); } .ftx-logo { display: inline-block; --logo-net: #fff; --logo-reg: #aab6e2; } .ftx-logo svg { display: block; width: 200px; height: auto; fill: initial; stroke: none; } .ftx-h { margin-top: 30px; font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #ff5a61; } .ftx address { margin-top: 12px; font-style: normal; font-size: 15px; line-height: 1.6; color: #dfe6ff; } .ftx-tel { display: inline-flex; align-items: center; gap: 9px; margin-top: 10px; font-size: 17px; font-weight: 800; color: #fff; text-decoration: none; } .ftx-tel svg { color: #6ea0ff; } .ftx-cta { display: table; margin-top: 22px; padding: 12px 20px; border-radius: 10px; font-size: 15px; font-weight: 800; color: #fff; background: #ff5a61; text-decoration: none; } .ftx-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; } footer.ftx h4 { margin: 0 0 16px; padding: 0; border: 0; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #fff; } footer.ftx ul { list-style: none; margin: 0; padding: 0; } footer.ftx li { margin-bottom: 10px; } footer.ftx a { color: inherit; text-decoration: none; transition: color .2s; } footer.ftx .ftx-cols a:hover, .ftx-bot a:hover { color: #fff; } footer.ftx .ftx-tel, footer.ftx .ftx-cta, footer.ftx .ftx-social a { color: #fff; } .ftx-bot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin-top: clamp(40px, 3.4vw, 60px); padding-top: 24px; border-top: 1px solid rgba(174, 188, 239, .14); font-size: 13.5px; color: #8793c4; } @media (max-width: 1280px) { .gsx-in, .abx-in { grid-template-columns: 1fr; } .ftx-top { grid-template-columns: 1fr; } } @media (max-width: 760px) { .gsx-form { grid-template-columns: 1fr; } .abx-facts { grid-template-columns: 1fr; } .ftx-cols { grid-template-columns: 1fr 1fr; } } /* socials: each platform's own glyph, one colour (white on the navy, as their brand guides allow when linking to your own profile) */ .ftx-social { display: flex; gap: 10px; margin-top: 22px; } .ftx-social a { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(174, 188, 239, .18); transition: background .2s, box-shadow .2s; } .ftx-social a:hover, .ftx-social a:focus-visible { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(174, 188, 239, .4); } .ftx .ftx-social svg { width: 18px; height: 18px; fill: currentColor; stroke: none; } /* ---------- Product tour: the console in a window over the page ---------- */ html.ptx-open { overflow: hidden; } /* as large as the screen allows: 96% of the width (no cap, so ultrawide goes wide) and 95% of the height */ .ptx { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 2.5vh 2vw; background: rgba(6, 12, 36, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .22s; } .ptx.in { opacity: 1; } .ptx[hidden] { display: none; } .ptx-win { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; border-radius: 16px; overflow: hidden; background: #0e1524; box-shadow: 0 0 0 1px rgba(174, 188, 239, .18), 0 40px 100px rgba(0, 0, 0, .5); transform: translateY(14px) scale(.985); transition: transform .28s cubic-bezier(.2, .8, .2, 1); } .ptx.in .ptx-win { transform: none; } .ptx-bar { flex: none; display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 12px 0 18px; color: #aab6e2; background: #131c33; box-shadow: inset 0 -1px 0 rgba(174, 188, 239, .14); } .ptx-bar > i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .ptx-bar > i:nth-of-type(2) { background: #febc2e; } .ptx-bar > i:nth-of-type(3) { background: #28c840; } .ptx-url { margin-left: 12px; padding: 6px 14px; border-radius: 8px; font: 12.5px "JetBrains Mono", Consolas, monospace; color: #aab6e2; background: rgba(255, 255, 255, .05); white-space: nowrap; } .ptx-url em { font-style: normal; color: #fff; } .ptx-tag { margin-left: 6px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: #6ea0ff; background: rgba(110, 160, 255, .12); white-space: nowrap; } .ptx-sp { flex: 1; } .ptx-re { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13.5px; font-weight: 700; padding: 8px 12px; border: 0; border-radius: 9px; color: #dfe6ff; background: rgba(255, 255, 255, .06); cursor: pointer; } .ptx-re:hover { background: rgba(255, 255, 255, .12); } .ptx-re svg, .ptx-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ptx-demo { padding: 8px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 800; color: #fff; background: #ff5a61; text-decoration: none; white-space: nowrap; } .ptx-x { width: 38px; height: 38px; margin-left: 4px; display: grid; place-items: center; border: 0; border-radius: 9px; color: #dfe6ff; background: none; cursor: pointer; } .ptx-x:hover { background: rgba(255, 255, 255, .1); } .ptx-re:focus-visible, .ptx-x:focus-visible, .ptx-demo:focus-visible { outline: 2px solid #6ea0ff; outline-offset: 2px; } .ptx-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; } .ptx-stage iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; opacity: 0; transition: opacity .3s; } .ptx.ok .ptx-stage iframe { opacity: 1; } .ptx-load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; font-size: 14px; color: #aab6e2; transition: opacity .3s; } .ptx-load i { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(110, 160, 255, .25); border-top-color: #6ea0ff; animation: ptx-spin .8s linear infinite; } .ptx.ok .ptx-load { opacity: 0; pointer-events: none; } @keyframes ptx-spin { to { transform: rotate(360deg); } } .ptx-toast { position: absolute; left: 50%; bottom: 22px; z-index: 2; max-width: min(560px, 90%); padding: 12px 18px; border-radius: 12px; font-size: 14px; line-height: 1.45; color: #dfe6ff; background: #1b2744; box-shadow: 0 0 0 1px rgba(174, 188, 239, .22), 0 16px 40px rgba(0, 0, 0, .4); transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; } .ptx-toast.on { opacity: 1; transform: translate(-50%, 0); } .ptx-toast b { color: #fff; } @media (max-width: 900px) { .ptx-tag, .ptx-url { display: none; } } @media (prefers-reduced-motion: reduce) { .ptx, .ptx-win { transition: none; } } /* the modules the tour walks through; the ones not in it yet are marked soon */ .ptx-mods { display: flex; gap: 4px; margin-left: 12px; padding: 4px; border-radius: 11px; background: rgba(255, 255, 255, .04); } .ptx-mods button { display: inline-flex; align-items: baseline; gap: 6px; font: inherit; font-size: 13px; font-weight: 700; padding: 6px 12px; border: 0; border-radius: 8px; color: #aab6e2; background: none; cursor: pointer; white-space: nowrap; } .ptx-mods button:hover { color: #fff; background: rgba(255, 255, 255, .07); } .ptx-mods button.on { color: #fff; background: #2f6fed; } .ptx-mods button.soon { color: #6f7ba6; cursor: default; } .ptx-mods button.soon:hover { background: none; color: #8793c4; } .ptx-mods small { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6f7ba6; } .ptx-mods button:focus-visible { outline: 2px solid #6ea0ff; outline-offset: 1px; } @media (max-width: 1400px) { .ptx-url { display: none; } } @media (max-width: 1100px) { .ptx-mods small { display: none; } .ptx-re { font-size: 0; gap: 0; } }