/* ============================================================================ Cortex visuals — Introducing (tabbed switcher) + Trust & Deployment. Self-contained, scoped under .cortex-visuals so nothing leaks into the page. Tokens flip with the site's own [data-theme] attribute on . --display / --mono are mapped to the site's loaded brand faces. ============================================================================ */ .cortex-visuals { /* surfaces */ --bg: #0c111d; --panel: rgba(15, 22, 38, 0.6); --panel-2: rgba(20, 28, 44, 0.7); --inset: rgba(12, 17, 29, 0.55); /* text */ --fg: #f2f4f7; --fg-strong: #fcfcfd; --fg-muted: #98a2b3; --fg-quiet: #667488; /* lines */ --border: #1e2a3c; --border-2: #25354b; --border-bright: rgba(101, 137, 158, 0.36); /* accents */ --primary: #2D6AE7; --primary-soft: rgba(45, 106, 231, 0.14); --primary-line: rgba(45, 106, 231, 0.32); --affirm: #3dd68c; --affirm-soft: rgba(61, 214, 140, 0.08); --affirm-line: rgba(61, 214, 140, 0.24); --caution: #f5a524; --caution-soft: rgba(245, 165, 36, 0.1); --caution-line: rgba(245, 165, 36, 0.28); --agent: #b084ec; /* type — use the site's brand faces */ --display: var(--font-secondary); --mono: var(--font-mono); } :root[data-theme="light"] .cortex-visuals, .cortex-visuals[data-theme="light"] { --bg: #ffffff; --panel: #f7fafc; --panel-2: #ffffff; --inset: #f1f5f9; --fg: #16202e; --fg-strong: #0b1018; --fg-muted: #51607a; --fg-quiet: #7a8a9c; --border: #e6ecf2; --border-2: #d7e0e9; --border-bright: rgba(101, 137, 158, 0.42); --primary: #2D6AE7; --primary-soft: #eaf1fd; --primary-line: #c9dcfa; --affirm: #0e9c6e; --affirm-soft: #e4f4ee; --affirm-line: #bbe3d3; --caution: #b57514; --caution-soft: #f9efdd; --caution-line: #ecd6ae; --agent: #8b5cd6; } /* ============================================================================ INTRODUCING — tabbed feature switcher ============================================================================ */ .cortex-visuals .ifeat { display: grid; grid-template-columns: 0.84fr 1.6fr; gap: 30px; width: 100%; align-items: stretch; font-family: var(--mono), ui-monospace, monospace; } @media (max-width: 860px) { .cortex-visuals .ifeat { grid-template-columns: 1fr; gap: 18px; } } .cortex-visuals .ifeat__tabs { display: flex; flex-direction: column; gap: 12px; justify-content: center; } @media (max-width: 860px) { .cortex-visuals .ifeat__tabs { flex-direction: row; gap: 9px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } .cortex-visuals .ifeat__tabs::-webkit-scrollbar { display: none; } } .cortex-visuals .ifeat__tab { position: relative; display: flex; align-items: flex-start; gap: 13px; text-align: left; padding: 16px 40px 16px 17px; border-radius: 13px; border: 1px solid var(--border-2); background: var(--panel); cursor: pointer; font: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .cortex-visuals .ifeat__tab:hover { border-color: var(--border-bright); transform: translateX(3px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22); } .cortex-visuals .ifeat__tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .cortex-visuals .ifeat__tab.is-active { border-color: var(--primary-line); background: var(--primary-soft); } .cortex-visuals .ifeat__tab::after { content: ""; position: absolute; right: 17px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--fg-quiet); border-top: 2px solid var(--fg-quiet); transform: translateY(-50%) rotate(45deg); opacity: 0.4; transition: opacity 0.15s ease, border-color 0.15s ease; } .cortex-visuals .ifeat__tab:hover::after { opacity: 0.9; } .cortex-visuals .ifeat__tab.is-active::after { border-color: var(--primary); opacity: 1; } .cortex-visuals .ifeat__tab .ic { width: 36px; height: 36px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; } .cortex-visuals .ifeat__tab .ic svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .cortex-visuals .ifeat__tab .tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .cortex-visuals .ifeat__tab .tx b { font-family: var(--display); font-weight: 500; font-size: 18px; color: var(--fg-strong); letter-spacing: -0.01em; } .cortex-visuals .ifeat__tab .tx i { font-style: normal; font-size: 13.5px; line-height: 1.4; color: var(--fg-muted); } @media (max-width: 860px) { .cortex-visuals .ifeat__tab { flex: none; flex-direction: column; align-items: flex-start; width: 158px; gap: 9px; padding: 13px 13px 14px; scroll-snap-align: start; } .cortex-visuals .ifeat__tab:hover { transform: none; } .cortex-visuals .ifeat__tab::after { display: none; } .cortex-visuals .ifeat__tab.is-active { box-shadow: inset 0 -3px 0 var(--primary); } .cortex-visuals .ifeat__tab .tx i { display: none; } } .cortex-visuals .ifeat__panel { min-height: 438px; display: flex; } .cortex-visuals .ifeat__pane { display: none; flex: 1; } .cortex-visuals .ifeat__pane.is-active { display: flex; } .cortex-visuals .ifeat__frame { flex: 1; border: 1px solid var(--border-2); border-radius: 13px; overflow: hidden; background: var(--panel); box-shadow: 0 22px 54px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; } .cortex-visuals .ifeat__bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--inset); flex: none; } .cortex-visuals .ifeat__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-bright); display: block; flex: none; } .cortex-visuals .ifeat__bar .u { margin-left: 6px; font-family: var(--mono); font-size: 12px; color: var(--fg-quiet); } .cortex-visuals .ifeat__bar .u b { color: var(--fg-strong); font-weight: 600; } .cortex-visuals .lcapp { background: var(--bg); display: flex; flex-direction: column; flex: 1; min-height: 0; } .cortex-visuals .lcsec { display: flex; align-items: center; gap: 8px; padding: 15px 17px 11px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-quiet); flex: none; } .cortex-visuals .lclive { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--affirm); font-size: 10.5px; letter-spacing: 0.06em; } .cortex-visuals .lclive::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--affirm); box-shadow: 0 0 7px var(--affirm); } .cortex-visuals .lccount { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--fg-quiet); letter-spacing: 0.04em; } .cortex-visuals .lcrows { display: flex; flex-direction: column; padding: 0 12px 8px; flex: 1; } .cortex-visuals .lcrow { display: flex; align-items: center; gap: 13px; padding: 0 9px; flex: 1; } .cortex-visuals .lcrow + .lcrow { border-top: 1px solid var(--border); } .cortex-visuals .lclogo { width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--panel-2); border: 1px solid var(--border-2); } .cortex-visuals .lclogo img { width: 19px; height: 19px; object-fit: contain; border-radius: 4px; } .cortex-visuals .lcav { width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; font-weight: 700; color: #fff; } .cortex-visuals .lcmain { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .cortex-visuals .lcttl { font-size: 15px; font-weight: 500; color: var(--fg-strong); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--display); } .cortex-visuals .lcsub { font-family: var(--mono); font-size: 12px; color: var(--fg-quiet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cortex-visuals .lcmeta { font-family: var(--mono); font-size: 12px; color: var(--fg-muted); text-align: right; flex: none; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } .cortex-visuals .lcmeta b { color: var(--fg-strong); font-weight: 600; font-size: 13px; } .cortex-visuals .lcteam { width: 4px; align-self: stretch; border-radius: 3px; flex: none; margin: 14px 0; } .cortex-visuals .lcfaces { display: flex; } .cortex-visuals .lcfaces .lcav { width: 24px; height: 24px; font-size: 9.5px; margin-left: -7px; border: 1.5px solid var(--bg); } .cortex-visuals .lcfaces .lcav:first-child { margin-left: 0; } .cortex-visuals .lcpill { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; padding: 4px 10px; border-radius: 9999px; white-space: nowrap; flex: none; } .cortex-visuals .lcpill.prog { color: var(--primary); background: var(--primary-soft); border: 1px solid var(--primary-line); } .cortex-visuals .lcpill.done { color: var(--affirm); background: var(--affirm-soft); border: 1px solid var(--affirm-line); } .cortex-visuals .lcpill.rev { color: var(--caution); background: var(--caution-soft); border: 1px solid var(--caution-line); } .cortex-visuals .lcrank { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--fg-quiet); width: 20px; flex: none; text-align: center; } .cortex-visuals .lctag { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 5px; flex: none; align-self: flex-start; margin-bottom: 2px; width: fit-content; } .cortex-visuals .lctag.route { color: var(--primary); background: var(--primary-soft); } .cortex-visuals .lctag.cache { color: #a883f4; background: rgba(122, 63, 242, 0.16); } .cortex-visuals .lctag.verify { color: var(--caution); background: var(--caution-soft); } .cortex-visuals .lctag.build { color: var(--affirm); background: var(--affirm-soft); } .cortex-visuals .lcimp { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--affirm); flex: none; white-space: nowrap; } .cortex-visuals .lcimp.q { color: var(--primary); } /* ============================================================================ TRUST & DEPLOYMENT — 3 deployment cards + trust strip ============================================================================ */ .cortex-visuals .deploy3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; width: 100%; } @media (max-width: 860px) { .cortex-visuals .deploy3 { grid-template-columns: 1fr; } } .cortex-visuals .dcard { position: relative; border: 1px solid var(--border-2); border-radius: 4px; background: var(--panel); padding: 24px 22px 20px; display: flex; flex-direction: column; gap: 13px; } .cortex-visuals .dcard.def { border-color: var(--primary-line); background: linear-gradient(180deg, var(--primary-soft), var(--panel) 70%); } .cortex-visuals .dc-ic { width: 44px; height: 44px; border-radius: 11px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; } .cortex-visuals .dc-ic svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .cortex-visuals .dc-h { font-family: var(--display); font-size: 20px; font-weight: 500; color: var(--fg-strong); letter-spacing: -0.01em; } .cortex-visuals .dc-d { font-size: 14.5px; line-height: 1.5; color: var(--fg-muted); margin: 0; flex: 1; } .cortex-visuals .dc-meta { font-family: var(--mono); font-size: 12.5px; color: var(--fg-strong); padding-top: 13px; border-top: 1px solid var(--border); } .cortex-visuals .dc-meta span { display: block; color: var(--fg-quiet); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.07em; font-size: 10px; font-weight: 700; } .cortex-visuals .dc-tag { position: absolute; top: -11px; left: 22px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--primary); padding: 5px 11px; border-radius: 9999px; box-shadow: 0 4px 12px rgba(45, 106, 231, 0.4); } .cortex-visuals .trustbar { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; width: 100%; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); } .cortex-visuals .tb-grp { display: flex; align-items: center; gap: 16px; } .cortex-visuals .tb-lbl { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-quiet); white-space: nowrap; } .cortex-visuals .tb-coins { display: flex; } .tb-coins--seals { gap: 14px; } .cortex-visuals .tb-coin { width: 46px; height: 46px; border-radius: 46px; background: #fff; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(101, 137, 158, 0.2); } .cortex-visuals .tb-coin + .tb-coin { margin-left: -14px; } .cortex-visuals .tb-coin img { width: 28px; height: 28px; object-fit: contain; } .cortex-visuals .tb-seal { width: 50px; height: 50px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; } .cortex-visuals .tb-seal img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 680px) { .cortex-visuals .trustbar { flex-direction: column; align-items: flex-start; gap: 18px; } } .compliance { display: flex; flex-direction: column; align-items: center; justify-content: center; } .compliance .sec-head { align-items: center; justify-content: center; flex-direction: column; display: flex; text-align: center; margin-bottom: 0; } .compliance .badges .badge2 { border-radius: 40px; } .compliance .badges .badge2 svg { stroke-width: 2; }