Initial curated CertScope source from fe2bbe3ca5c98bf64be26a09c6c58ee805a7f87e
This commit is contained in:
Public Source Publisher committed
commit
7348faf6c0
65 files changed
+12509
No files matched your search
+491
@@ -0,0 +1,491 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--surface-0: #06111f;
|
||||
--surface-1: #081a2a;
|
||||
--surface-2: #0b2235;
|
||||
--surface-3: #0d2a41;
|
||||
--surface-elevated: #102f48;
|
||||
--surface-report: rgba(7, 26, 40, .76);
|
||||
--surface-evidence: rgba(5, 22, 35, .42);
|
||||
--border-subtle: rgba(120, 179, 218, .16);
|
||||
--border-strong: rgba(91, 173, 229, .38);
|
||||
--text: #edf5fb;
|
||||
--text-soft: #c2d5e4;
|
||||
--muted: #8ca8bd;
|
||||
--blue: #4db3ff;
|
||||
--blue-strong: #218fe5;
|
||||
--blue-soft: #9dd9ff;
|
||||
--green: #54e8a1;
|
||||
--amber: #ffca52;
|
||||
--red: #ff778b;
|
||||
--status-complete: var(--green);
|
||||
--status-partial: var(--amber);
|
||||
--status-error: var(--red);
|
||||
--focus-ring: #9edcff;
|
||||
--radius-sm: 10px;
|
||||
--radius-md: 16px;
|
||||
--radius-lg: 24px;
|
||||
--shadow-1: 0 16px 44px rgba(0, 0, 0, .18);
|
||||
--shadow-2: 0 22px 64px rgba(0, 0, 0, .35);
|
||||
--ease: 160ms ease;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { min-width: 320px; min-height: 100%; overflow-x: hidden; }
|
||||
body {
|
||||
margin: 0;
|
||||
background:
|
||||
radial-gradient(circle at 18% -10%, rgba(37, 122, 184, .27), transparent 34rem),
|
||||
radial-gradient(circle at 88% 12%, rgba(23, 102, 155, .16), transparent 30rem),
|
||||
var(--surface-0);
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
}
|
||||
body::before {
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
inset: 0;
|
||||
content: "";
|
||||
opacity: .42;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(rgba(97, 164, 207, .025) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(97, 164, 207, .025) 1px, transparent 1px);
|
||||
background-size: 42px 42px;
|
||||
mask-image: linear-gradient(to bottom, black, transparent 78%);
|
||||
}
|
||||
button, input { font: inherit; }
|
||||
button { cursor: pointer; }
|
||||
button:disabled { cursor: not-allowed; opacity: .58; }
|
||||
a { color: inherit; }
|
||||
button, a, input, .finding-card, .capability-card { transition: border-color var(--ease), color var(--ease), background var(--ease), box-shadow var(--ease), transform var(--ease); }
|
||||
|
||||
.cert-app-shell { min-height: 100vh; }
|
||||
.app-topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
min-height: 72px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
padding: 0 max(24px, calc((100vw - 1360px) / 2));
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
background: rgba(5, 15, 25, .78);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
.brand-lockup { display: flex; align-items: center; gap: 11px; min-width: 220px; }
|
||||
.brand-lockup strong { display: block; letter-spacing: -.035em; font-size: 24px; line-height: 1; }
|
||||
.brand-lockup small { display: block; margin-top: 4px; color: var(--text-soft); font-size: 8px; font-weight: 800; letter-spacing: .14em; }
|
||||
.brand-mark { width: 33px; height: 37px; display: grid; place-items: center; color: var(--blue); }
|
||||
.brand-mark svg { width: 100%; height: 100%; }
|
||||
.product-context { display: flex; flex-direction: column; gap: 3px; color: var(--text-soft); font-size: 12px; }
|
||||
.product-context strong { font-size: 12px; letter-spacing: .015em; }
|
||||
.product-context span { color: var(--muted); font-size: 11px; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 13px; margin-left: auto; }
|
||||
.version-chip { padding: 5px 9px; border: 1px solid rgba(87, 181, 239, .4); border-radius: 999px; background: rgba(18, 61, 91, .66); color: var(--blue-soft); font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; }
|
||||
.repo-link { color: var(--text-soft); font-size: 12px; text-decoration: none; }
|
||||
.repo-link:hover, .repo-link:focus-visible { color: white; text-decoration: underline; }
|
||||
|
||||
.cert-main { width: min(1360px, 100%); margin: 0 auto; padding: 32px 24px 72px; }
|
||||
.hero-workspace { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(380px, .94fr); gap: clamp(28px, 5vw, 74px); align-items: center; min-height: 346px; padding: clamp(30px, 5vw, 64px); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(13, 43, 64, .78), rgba(6, 20, 33, .58) 64%, rgba(14, 53, 79, .55)); box-shadow: var(--shadow-1); overflow: hidden; }
|
||||
.hero-workspace::after { position: absolute; content: ""; width: 420px; height: 420px; margin: -310px 0 0 -220px; border: 1px solid rgba(94, 190, 246, .15); border-radius: 50%; pointer-events: none; }
|
||||
.hero-workspace { position: relative; }
|
||||
.hero-copy, .inspect-cluster { position: relative; z-index: 1; }
|
||||
.tagline { margin: 0 0 26px; color: var(--blue-soft); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
|
||||
.hero-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 13px; color: var(--blue-soft); font-size: 12px; font-weight: 700; }
|
||||
.hero-kicker span { color: var(--blue); font-size: 11px; }
|
||||
.hero-copy h1 { margin: 0; font-size: clamp(48px, 6vw, 76px); line-height: .92; letter-spacing: -.065em; }
|
||||
.hero-statement { max-width: 590px; margin: 17px 0 0; color: #d9eafb; font-size: clamp(22px, 2.3vw, 31px); line-height: 1.12; letter-spacing: -.035em; }
|
||||
.hero-description { max-width: 590px; margin: 18px 0 0; color: var(--text-soft); font-size: 15px; line-height: 1.6; }
|
||||
.hero-signals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
|
||||
.hero-signals span { padding: 6px 10px; border: 1px solid rgba(90, 175, 229, .28); border-radius: 999px; background: rgba(12, 52, 78, .46); color: #c8e4f7; font-size: 11px; font-weight: 700; }
|
||||
|
||||
.inspect-cluster { display: grid; gap: 14px; padding: 22px; border: 1px solid rgba(109, 190, 240, .31); border-radius: var(--radius-md); background: linear-gradient(160deg, rgba(10, 42, 65, .98), rgba(7, 27, 43, .96)); box-shadow: 0 20px 46px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .04); }
|
||||
.inspect-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
|
||||
.inspect-card-heading p { margin: 0 0 4px; color: var(--blue-soft); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
|
||||
.inspect-card-heading strong { font-size: 17px; }
|
||||
.inspect-card-status { padding: 5px 8px; border: 1px solid rgba(87, 213, 153, .35); border-radius: 999px; background: rgba(17, 76, 55, .68); color: var(--green); font-size: 10px; font-weight: 750; white-space: nowrap; }
|
||||
.host-field-wrap label { display: block; margin-bottom: 7px; color: #d5e6f3; font-size: 12px; font-weight: 750; }
|
||||
.host-field-wrap input { width: 100%; height: 50px; padding: 0 15px; border: 1px solid rgba(106, 177, 220, .42); border-radius: var(--radius-sm); outline: none; background: rgba(4, 18, 30, .72); color: var(--text); font-size: 16px; }
|
||||
.host-field-wrap input::placeholder { color: #6f91aa; }
|
||||
.host-field-wrap input:hover { border-color: rgba(113, 195, 243, .65); }
|
||||
.host-field-wrap input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(76, 178, 255, .16); }
|
||||
.host-field-wrap small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.4; }
|
||||
.quick-hosts { display: flex; flex-wrap: wrap; gap: 7px; }
|
||||
.quick-hosts button { padding: 5px 8px; border: 1px solid rgba(112, 177, 218, .25); border-radius: 7px; background: rgba(19, 58, 84, .48); color: #bbd8eb; font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; }
|
||||
.quick-hosts button:hover, .quick-hosts button:focus-visible { border-color: var(--blue); background: rgba(22, 86, 127, .65); color: white; }
|
||||
.inspect-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
|
||||
.primary-btn, .secondary-btn, .preview-demo-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; font-weight: 780; }
|
||||
.primary-btn { padding: 0 19px; border: 1px solid #4ab3ff; background: linear-gradient(180deg, #289cf3, #167cc7); box-shadow: 0 9px 25px rgba(23, 137, 223, .28); color: white; }
|
||||
.primary-btn:hover:not(:disabled) { border-color: #8ed3ff; background: linear-gradient(180deg, #36a7fb, #218bd7); box-shadow: 0 12px 31px rgba(23, 137, 223, .38); transform: translateY(-1px); }
|
||||
.primary-btn svg { width: 19px; }
|
||||
.secondary-btn { padding: 0 14px; border: 1px solid rgba(114, 183, 224, .4); background: rgba(10, 45, 68, .72); color: #d6e8f5; }
|
||||
.secondary-btn:hover:not(:disabled), .preview-demo-button:hover { border-color: var(--blue); background: rgba(22, 84, 124, .82); color: white; }
|
||||
.secondary-btn svg, .preview-demo-button svg { width: 17px; }
|
||||
.inspect-card-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
|
||||
.error-banner { display: grid; gap: 4px; padding: 12px; border: 1px solid rgba(255, 119, 139, .44); border-radius: var(--radius-sm); background: rgba(91, 27, 40, .48); color: #ffdce2; }
|
||||
.error-banner strong { color: #ffb9c4; font-size: 12px; }
|
||||
.error-banner span { font-size: 12px; line-height: 1.45; }
|
||||
.error-banner small { color: #e7a8b3; font-size: 11px; }
|
||||
|
||||
.inspection-progress { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 17px; align-items: center; margin-top: 22px; padding: 17px 20px; border: 1px solid rgba(78, 176, 246, .32); border-radius: var(--radius-md); background: rgba(9, 37, 56, .8); box-shadow: var(--shadow-1); }
|
||||
.progress-orb { width: 43px; height: 48px; color: var(--blue); animation: inspection-pulse 1.65s ease-in-out infinite; }
|
||||
.progress-orb svg { width: 100%; height: 100%; }
|
||||
.inspection-progress strong { font-size: 14px; }
|
||||
.inspection-progress p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
|
||||
.inspection-progress code { color: var(--blue-soft); }
|
||||
.progress-checks { display: flex; gap: 7px; }
|
||||
.progress-checks span { padding: 5px 8px; border-radius: 999px; background: rgba(27, 79, 111, .76); color: #bbddf3; font-size: 10px; font-weight: 750; }
|
||||
|
||||
.capability-section { margin-top: 32px; }
|
||||
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 2px 14px; }
|
||||
.section-heading p, .demo-preview-copy > p, .security-boundary p { margin: 0 0 7px; color: var(--blue-soft); font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
|
||||
.section-heading h2 { max-width: 700px; margin: 0; font-size: clamp(22px, 3vw, 30px); line-height: 1.16; letter-spacing: -.035em; }
|
||||
.section-heading > span { padding-bottom: 3px; color: var(--muted); font-size: 12px; white-space: nowrap; }
|
||||
.capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
|
||||
.capability-card { position: relative; min-height: 145px; padding: 20px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: linear-gradient(145deg, rgba(13, 39, 59, .84), rgba(7, 24, 38, .8)); overflow: hidden; }
|
||||
.capability-card::after { position: absolute; inset: auto -25px -50px auto; width: 130px; height: 130px; border: 1px solid rgba(83, 180, 241, .12); border-radius: 50%; content: ""; }
|
||||
.capability-card:hover { border-color: rgba(96, 186, 241, .44); background: linear-gradient(145deg, rgba(15, 51, 76, .94), rgba(7, 27, 42, .9)); transform: translateY(-2px); }
|
||||
.capability-index { display: block; color: var(--blue); font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; }
|
||||
.capability-card h3 { margin: 17px 0 7px; font-size: 18px; }
|
||||
.capability-card p { max-width: 235px; margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.5; }
|
||||
.security-boundary { display: grid; grid-template-columns: minmax(200px, .8fr) minmax(0, 2.2fr); gap: 22px; align-items: center; margin-top: 14px; padding: 18px 20px; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
|
||||
.security-boundary strong { font-size: 15px; }
|
||||
.security-boundary ul { display: flex; flex-wrap: wrap; gap: 9px 16px; margin: 0; padding: 0; list-style: none; }
|
||||
.security-boundary li { display: inline-flex; align-items: center; gap: 6px; color: var(--text-soft); font-size: 12px; }
|
||||
.security-boundary svg { width: 15px; color: var(--green); }
|
||||
.demo-preview { display: grid; grid-template-columns: minmax(0, .88fr) minmax(340px, 1.12fr); gap: 28px; align-items: center; margin-top: 34px; padding: clamp(22px, 4vw, 38px); border: 1px solid rgba(75, 159, 214, .29); border-radius: var(--radius-lg); background: radial-gradient(circle at 86% 20%, rgba(37, 125, 182, .2), transparent 23rem), linear-gradient(135deg, rgba(8, 29, 45, .92), rgba(10, 41, 62, .82)); box-shadow: var(--shadow-1); }
|
||||
.demo-preview-copy h2 { max-width: 450px; margin: 0; font-size: clamp(25px, 3vw, 36px); line-height: 1.08; letter-spacing: -.045em; }
|
||||
.demo-preview-copy > span { display: block; max-width: 450px; margin-top: 13px; color: var(--text-soft); line-height: 1.6; }
|
||||
.preview-demo-button { margin-top: 20px; padding: 0 14px; border: 1px solid rgba(101, 192, 246, .44); background: rgba(14, 57, 85, .75); color: #d9ecf9; }
|
||||
.demo-preview-report { padding: 18px; border: 1px solid rgba(113, 193, 239, .35); border-radius: var(--radius-md); background: rgba(4, 19, 31, .72); box-shadow: 0 14px 30px rgba(0,0,0,.16); }
|
||||
.demo-preview-report header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
|
||||
.demo-preview-report header > div { display: grid; gap: 4px; }
|
||||
.demo-preview-report header span { color: var(--blue-soft); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
|
||||
.demo-preview-report header strong { font: 13px ui-monospace, SFMono-Regular, Consolas, monospace; }
|
||||
.demo-preview-report header > b { color: var(--green); font-size: 34px; letter-spacing: -.05em; }
|
||||
.demo-preview-report header > b small { color: var(--muted); font-size: 12px; }
|
||||
.preview-score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 17px; }
|
||||
.preview-score-grid div { padding: 11px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: rgba(12, 43, 63, .62); }
|
||||
.preview-score-grid span { display: block; color: var(--muted); font-size: 10px; font-weight: 750; }
|
||||
.preview-score-grid strong { display: block; margin-top: 4px; font-size: 22px; font-variant-numeric: tabular-nums; }
|
||||
.preview-finding { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid rgba(255, 202, 82, .28); border-radius: var(--radius-sm); background: rgba(73, 54, 16, .28); }
|
||||
.preview-finding-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(190, 139, 24, .42); color: var(--amber); font-weight: 900; }
|
||||
.preview-finding strong { font-size: 12px; }
|
||||
.preview-finding p { margin: 4px 0 0; color: var(--text-soft); font-size: 11px; line-height: 1.45; }
|
||||
|
||||
.report-workspace { margin-top: 24px; min-width: 0; }
|
||||
.report-context-bar { display: grid; grid-template-columns: minmax(180px, .72fr) minmax(0, 2fr); gap: 24px; align-items: center; padding: 18px 20px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: rgba(7, 27, 42, .72); }
|
||||
.report-identity p { margin: 0 0 5px; color: var(--blue-soft); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
|
||||
.report-identity h2 { margin: 0; overflow-wrap: anywhere; font: 700 22px/1.12 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: -.035em; }
|
||||
.report-context-meta { display: grid; grid-template-columns: .9fr 1.5fr 1fr; gap: 16px; margin: 0; }
|
||||
.report-context-meta div { min-width: 0; }
|
||||
.report-context-meta dt { margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
|
||||
.report-context-meta dd { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
|
||||
.address-list { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px !important; }
|
||||
.workspace-host-form { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
|
||||
.workspace-host-form label { grid-column: 1 / -1; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
|
||||
.workspace-host-form input { min-width: 0; height: 37px; padding: 0 10px; border: 1px solid rgba(106, 177, 220, .42); border-radius: 8px; outline: none; background: rgba(4, 18, 30, .72); color: var(--text); }
|
||||
.workspace-host-form button { min-height: 37px; padding: 0 12px; border: 1px solid var(--blue); border-radius: 8px; background: rgba(22, 84, 124, .82); color: white; font-weight: 750; }
|
||||
.score-row { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 2.2fr); gap: 14px; margin-top: 14px; }
|
||||
.category-score-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
|
||||
.metric-card { min-width: 0; min-height: 138px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: linear-gradient(160deg, rgba(12, 40, 60, .9), rgba(6, 23, 37, .92)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); }
|
||||
.metric-card.overall { min-height: 176px; padding: 23px; border-color: rgba(91, 189, 242, .4); background: radial-gradient(circle at 88% 18%, rgba(47, 158, 221, .17), transparent 11rem), linear-gradient(145deg, rgba(13, 49, 74, .96), rgba(6, 25, 39, .94)); }
|
||||
.metric-card > div:first-child { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
|
||||
.metric-card span { color: var(--blue-soft); font-size: 12px; font-weight: 780; }
|
||||
.metric-card strong { font-size: 31px; line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
|
||||
.metric-card.overall strong { font-size: 52px; }
|
||||
.metric-card strong small { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0; }
|
||||
.metric-card em { color: var(--text-soft); font-size: 11px; font-style: normal; line-height: 1.4; }
|
||||
.metric-card.green em { color: var(--green); }
|
||||
.metric-card.amber em { color: var(--amber); }
|
||||
.metric-card.red em { color: var(--red); }
|
||||
.metric-card.muted em { color: var(--muted); }
|
||||
.gauge { position: relative; width: 62px; height: 62px; flex: 0 0 auto; border-radius: 50%; background: conic-gradient(var(--green) var(--gauge), rgba(72, 116, 140, .38) 0); }
|
||||
.metric-card.overall .gauge { width: 86px; height: 86px; }
|
||||
.gauge.amber { background: conic-gradient(var(--amber) var(--gauge), rgba(119, 92, 35, .5) 0); }
|
||||
.gauge.red { background: conic-gradient(var(--red) var(--gauge), rgba(117, 53, 68, .56) 0); }
|
||||
.gauge.muted { background: conic-gradient(#8ca8bd var(--gauge), rgba(72, 91, 109, .52) 0); }
|
||||
.gauge > div { position: absolute; inset: 7px; border-radius: 50%; background: var(--surface-1); }
|
||||
.report-status-row { min-height: 27px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 9px; color: var(--muted); font-size: 11px; }
|
||||
.status-badge, .demo-badge { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid rgba(119, 163, 191, .35); border-radius: 999px; background: rgba(39, 66, 83, .54); color: var(--text-soft); font-size: 11px; font-weight: 800; white-space: nowrap; }
|
||||
.status-badge.complete, .status-badge.green { border-color: rgba(84, 232, 161, .35); background: rgba(18, 74, 54, .72); color: var(--green); }
|
||||
.status-badge.partial, .status-badge.amber { border-color: rgba(255, 202, 82, .36); background: rgba(87, 66, 20, .6); color: var(--amber); }
|
||||
.status-badge.failed, .status-badge.red { border-color: rgba(255, 119, 139, .38); background: rgba(91, 35, 47, .65); color: #ffbdc8; }
|
||||
.status-badge.muted { color: var(--muted); }
|
||||
.demo-badge { border-color: rgba(77, 179, 255, .38); background: rgba(18, 66, 96, .66); color: var(--blue-soft); }
|
||||
.completeness-note { display: flex; gap: 8px; margin: 9px 0 0; padding: 10px 12px; border: 1px solid rgba(255, 202, 82, .3); border-radius: var(--radius-sm); background: rgba(80, 59, 18, .34); color: #ffe1a0; font-size: 12px; line-height: 1.45; }
|
||||
.completeness-note.failed { border-color: rgba(255, 119, 139, .35); background: rgba(82, 30, 43, .36); color: #ffd2da; }
|
||||
|
||||
.report-tabs-bar { position: sticky; top: 72px; z-index: 9; min-height: 60px; display: flex; align-items: stretch; gap: 12px; margin-top: 14px; border-bottom: 1px solid var(--border-subtle); min-width: 0; background: rgba(6, 17, 31, .96); backdrop-filter: blur(14px); }
|
||||
.report-tabs-bar nav { display: flex; flex: 0 1 auto; min-width: 0; overflow-x: auto; }
|
||||
.report-tabs-bar nav button { min-width: 86px; padding: 0 14px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
|
||||
.report-tabs-bar nav button:hover { color: var(--text); background: rgba(36, 88, 122, .28); }
|
||||
.report-tabs-bar nav button.active { border-bottom-color: var(--blue); background: linear-gradient(180deg, rgba(31, 105, 151, .4), rgba(12, 40, 61, .5)); color: white; }
|
||||
.report-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; }
|
||||
.report-actions button, .mobile-action-menu button { min-height: 35px; border: 1px solid rgba(96, 172, 217, .35); border-radius: 8px; background: rgba(13, 48, 72, .72); color: #d5e7f4; }
|
||||
.report-actions button:hover, .mobile-action-menu button:hover { border-color: var(--blue); background: rgba(22, 79, 113, .9); }
|
||||
.report-actions svg, .mobile-action-menu svg { width: 16px; }
|
||||
.action-reinspect, .share-btn { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; }
|
||||
.export-btn { padding: 0 9px; font-size: 11px; }
|
||||
.mobile-action-menu { display: none; position: relative; margin-left: auto; }
|
||||
.actions-toggle { min-width: 82px; padding: 0 11px; white-space: nowrap; }
|
||||
.actions-popover { position: absolute; right: 0; z-index: 5; display: grid; gap: 6px; min-width: 180px; margin-top: 6px; padding: 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-elevated); box-shadow: var(--shadow-2); }
|
||||
.actions-popover button { justify-content: flex-start; width: 100%; }
|
||||
.action-status { min-height: 18px; margin: 5px 0 0; color: var(--blue-soft); font-size: 11px; }
|
||||
.manual-copy-panel { display: grid; gap: 9px; margin-top: 9px; padding: 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-elevated); }
|
||||
.manual-copy-panel > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
|
||||
.manual-copy-panel p { margin: 0; color: var(--text-soft); font-size: 13px; }
|
||||
.manual-copy-panel button { min-height: 32px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 7px; background: rgba(13, 48, 72, .72); color: var(--text); }
|
||||
.manual-copy-panel textarea { width: 100%; min-height: 110px; padding: 10px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface-1); color: var(--text); font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; resize: vertical; }
|
||||
|
||||
.findings-panel { margin-top: 18px; padding: 17px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: rgba(7, 25, 39, .7); }
|
||||
.findings-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 2px 12px; }
|
||||
.findings-panel > header > div { display: flex; align-items: center; gap: 10px; }
|
||||
.findings-panel h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
|
||||
.findings-panel header span { padding: 3px 9px; border-radius: 999px; background: rgba(35, 83, 112, .66); color: #c1ddeb; font-size: 10px; font-weight: 750; }
|
||||
.findings-panel header button, .card-link, .show-all-button { border: 0; background: transparent; color: var(--blue-soft); font-size: 11px; font-weight: 700; }
|
||||
.findings-panel header button:hover, .card-link:hover, .show-all-button:hover { color: white; text-decoration: underline; }
|
||||
.finding-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 2px 12px; }
|
||||
.finding-filters button { padding: 5px 10px; border: 1px solid rgba(109, 174, 211, .26); border-radius: 999px; background: rgba(11, 43, 64, .66); color: var(--text-soft); font-size: 12px; }
|
||||
.finding-filters button.active { border-color: var(--blue); background: rgba(27, 104, 151, .54); color: white; }
|
||||
.findings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
|
||||
.finding-card { width: 100%; min-height: 132px; display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px; align-items: start; gap: 10px; padding: 14px; border: 1px solid rgba(103, 163, 197, .25); border-radius: var(--radius-sm); text-align: left; color: inherit; background: linear-gradient(145deg, rgba(10, 36, 54, .88), rgba(6, 23, 37, .84)); appearance: none; }
|
||||
.finding-card:hover { border-color: rgba(111, 190, 234, .5); background: linear-gradient(145deg, rgba(13, 49, 73, .94), rgba(7, 29, 45, .92)); transform: translateY(-1px); }
|
||||
.finding-card.critical { border-color: rgba(255, 119, 139, .45); }
|
||||
.finding-card.warning { border-color: rgba(255, 202, 82, .42); }
|
||||
.finding-card:focus-visible { outline: 2px solid #9edcff; outline-offset: 2px; }
|
||||
.finding-icon { width: 30px; height: 30px; display: grid; place-items: center; margin-top: 2px; border-radius: 50%; font-size: 16px; font-weight: 900; }
|
||||
.finding-icon.critical { background: rgba(150, 44, 65, .62); color: #ffd7de; }
|
||||
.finding-icon.warning { background: rgba(126, 92, 21, .66); color: #ffe08b; }
|
||||
.finding-icon.info { background: rgba(32, 105, 151, .62); color: #a5ddff; }
|
||||
.finding-icon.good { background: rgba(24, 105, 74, .64); color: #91f4bd; }
|
||||
.finding-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
|
||||
.finding-title strong { font-size: 14px; line-height: 1.28; }
|
||||
.pill { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 999px; font-size: 10px; font-weight: 850; }
|
||||
.pill.critical { background: rgba(101, 35, 49, .82); color: #ffc2cc; }
|
||||
.pill.warning { background: rgba(95, 72, 18, .85); color: #ffdb70; }
|
||||
.pill.info { background: rgba(18, 73, 108, .85); color: #7dd1ff; }
|
||||
.pill.good { background: rgba(17, 79, 55, .85); color: #67edaa; }
|
||||
.finding-body p { margin: 6px 0; color: var(--text-soft); font-size: 13px; line-height: 1.45; }
|
||||
.remedy-box { padding: 8px 9px; border: 1px solid rgba(98, 159, 194, .22); border-radius: 7px; background: rgba(4, 18, 29, .45); color: #b7d3e5; font: 11px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
|
||||
.finding-chevron { align-self: center; color: var(--blue-soft); font-size: 24px; }
|
||||
.show-all-button { display: block; margin: 12px auto 0; padding: 3px 8px; }
|
||||
.empty-findings { margin: 0; padding: 18px 8px; color: var(--muted); }
|
||||
|
||||
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; min-width: 0; }
|
||||
.detail-card, .evidence-card, .collector-state { min-width: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: linear-gradient(155deg, rgba(10, 35, 53, .85), rgba(6, 22, 35, .84)); }
|
||||
.detail-card { min-height: 278px; padding: 16px; }
|
||||
.detail-card header, .single-detail > header, .evidence-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
|
||||
.detail-card h3, .evidence-card h3 { margin: 0; font-size: 15px; }
|
||||
.evidence-card-heading p { margin: 0 0 5px; color: var(--blue-soft); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
|
||||
.summary-list { display: grid; gap: 0; margin: 13px 0 12px; }
|
||||
.summary-list > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border-subtle); }
|
||||
.summary-list b, .summary-list dt, .posture-list dt { color: var(--muted); font-size: 12px; font-weight: 650; }
|
||||
.summary-list dd, .posture-list dd { margin: 0; color: #e1ebf3; font-size: 13px; overflow-wrap: anywhere; white-space: pre-line; }
|
||||
.card-link { padding: 0; }
|
||||
.value-good { color: var(--green) !important; }
|
||||
.value-warning { color: var(--amber) !important; }
|
||||
.value-bad { color: var(--red) !important; }
|
||||
.value-muted, .value-neutral { color: var(--muted) !important; }
|
||||
|
||||
.single-detail { margin-top: 16px; padding: 20px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: rgba(7, 26, 40, .76); min-width: 0; }
|
||||
.single-detail h2 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
|
||||
.single-detail > header p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
|
||||
.evidence-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 17px; }
|
||||
.http-evidence-layout { grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); }
|
||||
.evidence-card { padding: 16px; }
|
||||
.evidence-table { margin-top: 13px; border-top: 1px solid var(--border-subtle); }
|
||||
.evidence-row { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--border-subtle); }
|
||||
.evidence-row > strong { color: #cfdfeb; font-size: 12px; }
|
||||
.evidence-value { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 7px; min-width: 0; }
|
||||
.evidence-value > span { color: #c8d6e2; font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-line; overflow-wrap: anywhere; }
|
||||
.evidence-value button, .dns-row button { width: 28px; height: 28px; padding: 5px; border: 0; border-radius: 6px; background: transparent; color: var(--blue-soft); }
|
||||
.evidence-value button:hover, .dns-row button:hover { background: rgba(55, 126, 169, .38); color: white; }
|
||||
.evidence-value svg { width: 16px; }
|
||||
.posture-list { margin: 13px 0 0; }
|
||||
.posture-list > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
|
||||
.collector-state { grid-column: 1 / -1; padding: 14px; }
|
||||
.collector-state > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
||||
.collector-state strong { font-size: 13px; }
|
||||
.collector-state ul { margin: 10px 0 0; padding-left: 18px; color: #ffcad3; font-size: 11px; line-height: 1.5; }
|
||||
.collector-state p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
|
||||
.status-good, .status-warning, .status-error, .status-neutral { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 750; }
|
||||
.status-good { color: var(--green); background: rgba(18, 74, 54, .78); }
|
||||
.status-warning { color: #ffdc77; background: rgba(92, 70, 19, .7); }
|
||||
.status-error { color: #ffc0cb; background: rgba(89, 35, 47, .78); }
|
||||
.status-neutral { color: #d1dee9; background: rgba(66, 88, 106, .72); }
|
||||
.empty-evidence { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
|
||||
.attempt-list { display: grid; gap: 7px; margin: 14px 0; padding: 0; list-style: none; }
|
||||
.attempt-list li { display: grid; gap: 4px; padding: 9px; border: 1px solid rgba(255, 119, 139, .32); border-radius: 8px; background: rgba(78, 24, 36, .4); }
|
||||
.attempt-list strong { color: #ffced6; font: 12px ui-monospace, SFMono-Regular, Consolas, monospace; }
|
||||
.attempt-list span { color: #deb3bc; font-size: 11px; }
|
||||
.redirect-flow { display: grid; gap: 0; margin: 16px 0 0; padding: 0; list-style: none; }
|
||||
.redirect-flow > li { list-style: none; }
|
||||
.redirect-hop { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid rgba(96, 168, 208, .3); border-radius: var(--radius-sm); background: rgba(8, 36, 55, .75); }
|
||||
.redirect-hop.red, .redirect-hop.error { border-color: rgba(255, 119, 139, .42); background: rgba(72, 27, 39, .56); }
|
||||
.redirect-hop.amber { border-color: rgba(255, 202, 82, .38); }
|
||||
.redirect-step { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: rgba(34, 108, 151, .7); color: #d8effe; font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; }
|
||||
.redirect-hop > div { display: grid; gap: 3px; min-width: 0; }
|
||||
.redirect-protocol { color: var(--blue-soft); font-size: 10px; font-weight: 850; letter-spacing: .08em; }
|
||||
.redirect-hop strong { color: #d9ebf7; font: 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
|
||||
.redirect-hop small { color: var(--muted); font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
|
||||
.redirect-connector { height: 20px; display: grid; place-items: center; color: var(--blue); font-size: 16px; }
|
||||
.status-chip { padding: 4px 7px; border-radius: 6px; font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; }
|
||||
.status-chip.green { color: var(--green); background: rgba(18, 86, 62, .84); }
|
||||
.status-chip.amber { color: #ffe07f; background: rgba(89, 67, 18, .84); }
|
||||
.status-chip.red, .status-chip.error { color: #ffc2cc; background: rgba(99, 37, 51, .86); }
|
||||
.status-chip.muted { color: #d1dde6; background: rgba(60, 84, 101, .84); }
|
||||
.redirect-facts { margin-top: 14px; }
|
||||
.inline-alert { margin: 13px 0 0; padding: 9px 10px; border: 1px solid rgba(255, 119, 139, .38); border-radius: 8px; background: rgba(79, 27, 40, .46); font-size: 11px; }
|
||||
.inline-alert.error { color: #ffd0d8; }
|
||||
.header-matrix { display: grid; gap: 7px; margin-top: 16px; }
|
||||
.header-matrix > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 1px solid var(--border-subtle); border-radius: 8px; background: rgba(5, 22, 35, .42); }
|
||||
.header-matrix span { color: var(--text-soft); font-size: 12px; }
|
||||
.header-matrix strong { font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; text-align: right; overflow-wrap: anywhere; }
|
||||
.header-details { margin-top: 14px; }
|
||||
.header-details summary { color: var(--blue-soft); cursor: pointer; font-size: 11px; font-weight: 700; }
|
||||
.header-details[open] summary { margin-bottom: 8px; }
|
||||
.header-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
|
||||
.header-list li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border-subtle); }
|
||||
.header-list span { color: var(--muted); font-size: 11px; }
|
||||
.header-list code { color: #cae4f4; font: 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
|
||||
.json-select { padding: 5px 9px; border: 1px solid rgba(95, 170, 215, .35); border-radius: 7px; background: rgba(12, 45, 67, .72); color: var(--text-soft); font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; }
|
||||
.single-detail > pre { max-width: 100%; max-height: 68vh; margin: 17px 0 0; padding: 16px; overflow: auto; border-radius: var(--radius-sm); white-space: pre-wrap; overflow-wrap: anywhere; background: #04121e; color: #b4daf4; font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
|
||||
.http-status-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 13px 0 0; color: var(--text-soft); font-size: 12px; }
|
||||
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
|
||||
.status-dot.green { background: var(--green); }
|
||||
.status-dot.amber { background: var(--amber); }
|
||||
.status-dot.red { background: var(--red); }
|
||||
.status-dot.muted { background: var(--muted); }
|
||||
|
||||
.drawer-backdrop { position: fixed; inset: 0; z-index: 20; display: flex; justify-content: flex-end; background: rgba(1, 7, 13, .76); backdrop-filter: blur(5px); }
|
||||
.diagnostic-drawer { width: min(500px, 100%); height: 100%; overflow-y: auto; padding: 28px; border-left: 1px solid var(--border-strong); outline: none; background: linear-gradient(180deg, #0c2639, #071a2a); box-shadow: -24px 0 60px rgba(0,0,0,.42); }
|
||||
.diagnostic-drawer > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
|
||||
.drawer-kicker { margin: 0 0 7px; color: var(--blue-soft); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
|
||||
.diagnostic-drawer h2 { margin: 0; color: white; font-size: 26px; line-height: 1.14; letter-spacing: -.035em; }
|
||||
.drawer-close { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(109, 181, 220, .4); border-radius: 9px; background: rgba(13, 48, 72, .78); color: #c5deee; }
|
||||
.drawer-close:hover { border-color: var(--blue); background: rgba(26, 79, 113, .92); }
|
||||
.drawer-close svg { width: 18px; }
|
||||
.drawer-summary { margin: 18px 0; color: var(--text-soft); line-height: 1.6; }
|
||||
.drawer-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0 0 23px; }
|
||||
.drawer-facts div { padding: 11px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: rgba(5, 22, 35, .55); }
|
||||
.drawer-facts dt { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
|
||||
.drawer-facts dd { margin: 5px 0 0; color: var(--text); font-weight: 750; }
|
||||
.diagnostic-drawer section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-subtle); }
|
||||
.diagnostic-drawer section h3 { margin: 0 0 10px; color: #dceaf4; font-size: 13px; }
|
||||
.evidence-pointers { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
|
||||
.evidence-pointers li { padding: 9px; border: 1px solid var(--border-subtle); border-radius: 7px; background: rgba(5, 22, 35, .54); }
|
||||
.evidence-pointers code { color: var(--blue-soft); font: 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
|
||||
.drawer-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
|
||||
.drawer-raw-button, .drawer-evidence-button { flex: 1; min-height: 43px; border: 1px solid #4db3ff; border-radius: 10px; background: linear-gradient(180deg, #2395e9, #167bc5); color: white; font-weight: 750; }
|
||||
.drawer-raw-button { border-color: rgba(96, 172, 217, .35); background: rgba(13, 48, 72, .72); color: #d5e7f4; }
|
||||
.drawer-actions { display: flex; gap: 9px; margin-top: 24px; }
|
||||
|
||||
/* Inspection workspace: dense evidence, one action surface and explicit state. */
|
||||
.provenance-badge { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid rgba(77, 179, 255, .38); border-radius: 999px; background: rgba(18, 66, 96, .66); color: var(--blue-soft); font-size: 10px; font-weight: 800; }
|
||||
.previous-report-banner { margin-top: 10px; }
|
||||
.inline-expand { margin-left: 7px; padding: 0; border: 0; background: transparent; color: var(--blue-soft); font-size: inherit; font-weight: 750; text-decoration: underline; }
|
||||
.inspect-another-btn { padding: 0 10px; font-size: 11px; }
|
||||
.export-control { position: relative; }
|
||||
.export-popover { position: absolute; top: calc(100% + 6px); right: 0; z-index: 12; display: grid; gap: 5px; min-width: 132px; padding: 7px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-elevated); box-shadow: var(--shadow-2); }
|
||||
.export-popover button { width: 100%; padding: 7px 9px; text-align: left; }
|
||||
.severity-counts { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
|
||||
.finding-impact { margin-left: auto; color: var(--amber); font: 700 12px ui-monospace, SFMono-Regular, Consolas, monospace; }
|
||||
.finding-body small { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
|
||||
.finding-card { min-height: 98px; }
|
||||
.finding-card .remedy-box { display: none; }
|
||||
.evidence-card { border: 0; border-radius: 10px; background: var(--surface-evidence); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); }
|
||||
.evidence-card:focus-visible, .evidence-highlight { outline: 2px solid var(--focus-ring); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(77, 179, 255, .12); }
|
||||
.header-matrix > div { display: grid; grid-template-columns: minmax(110px, .6fr) auto; align-items: start; }
|
||||
.header-matrix small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; line-height: 1.4; }
|
||||
.raw-actions { display: flex; flex-wrap: wrap; gap: 7px; }
|
||||
.raw-actions button { min-height: 33px; padding: 0 9px; border: 1px solid rgba(96, 172, 217, .35); border-radius: 8px; background: rgba(13, 48, 72, .72); color: #d5e7f4; font-size: 11px; }
|
||||
.raw-actions button:hover { border-color: var(--blue); background: rgba(22, 79, 113, .9); }
|
||||
.single-detail > pre { white-space: pre; overflow-wrap: normal; }
|
||||
.single-detail > pre.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
|
||||
|
||||
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
|
||||
button:focus-visible, input:focus-visible, a:focus-visible, [role="tab"]:focus-visible, summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
|
||||
@keyframes inspection-pulse { 50% { filter: drop-shadow(0 0 10px rgba(77, 179, 255, .65)); transform: translateY(-1px); } }
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.hero-workspace { grid-template-columns: 1fr; gap: 30px; }
|
||||
.report-context-bar { grid-template-columns: 1fr; gap: 15px; }
|
||||
.detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.detail-card:last-child { grid-column: 1 / -1; }
|
||||
}
|
||||
@media (max-width: 860px) {
|
||||
.app-topbar { padding-inline: 22px; gap: 16px; }
|
||||
.product-context { display: none; }
|
||||
.cert-main { padding-inline: 22px; }
|
||||
.report-context-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.report-context-meta div:last-child { grid-column: 1 / -1; }
|
||||
.score-row { grid-template-columns: 1fr; }
|
||||
.category-score-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.findings-grid, .evidence-layout, .http-evidence-layout { grid-template-columns: 1fr; }
|
||||
.collector-state { grid-column: auto; }
|
||||
.report-actions { display: none; }
|
||||
.mobile-action-menu { display: block; }
|
||||
.security-boundary { grid-template-columns: 1fr; gap: 14px; }
|
||||
}
|
||||
@media (max-width: 620px) {
|
||||
.app-topbar { min-height: 62px; padding-inline: 16px; }
|
||||
.brand-lockup { min-width: 0; }
|
||||
.brand-lockup strong { font-size: 21px; }
|
||||
.brand-lockup small { font-size: 7px; }
|
||||
.brand-mark { width: 29px; height: 33px; }
|
||||
.repo-link { display: none; }
|
||||
.cert-main { padding: 16px 16px 44px; }
|
||||
.hero-workspace { min-height: 0; padding: 25px 18px; border-radius: 18px; }
|
||||
.hero-copy h1 { font-size: 50px; }
|
||||
.hero-statement { font-size: 23px; }
|
||||
.hero-description { font-size: 14px; }
|
||||
.inspect-cluster { padding: 17px; }
|
||||
.inspect-actions { grid-template-columns: 1fr; }
|
||||
.secondary-btn { width: 100%; }
|
||||
.quick-hosts { gap: 6px; }
|
||||
.inspection-progress { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
|
||||
.progress-checks { grid-column: 1 / -1; }
|
||||
.section-heading { align-items: flex-start; flex-direction: column; }
|
||||
.capability-grid { grid-template-columns: 1fr; }
|
||||
.capability-card { min-height: 126px; }
|
||||
.demo-preview { grid-template-columns: 1fr; gap: 22px; padding: 22px 18px; border-radius: 18px; }
|
||||
.report-context-bar { padding: 15px; }
|
||||
.report-context-meta { grid-template-columns: 1fr; gap: 11px; }
|
||||
.report-context-meta div:last-child { grid-column: auto; }
|
||||
.workspace-host-form { grid-template-columns: 1fr; }
|
||||
.category-score-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
|
||||
.metric-card.overall { min-height: 122px; padding: 17px; }
|
||||
.category-score-grid .metric-card { min-height: 98px; padding: 12px; }
|
||||
.category-score-grid .metric-card strong { font-size: 25px; }
|
||||
.category-score-grid .metric-card strong small { font-size: 10px; }
|
||||
.category-score-grid .metric-card .gauge { display: none; }
|
||||
.category-score-grid .metric-card em { font-size: 11px; }
|
||||
.metric-card.overall strong { font-size: 44px; }
|
||||
.metric-card.overall .gauge { width: 72px; height: 72px; }
|
||||
.report-tabs-bar { top: 62px; gap: 7px; }
|
||||
.report-tabs-bar nav button { min-width: 76px; padding-inline: 10px; }
|
||||
.report-context-meta dd, .metric-card em, .summary-list dd, .posture-list dd { font-size: 13px; }
|
||||
.summary-list dt, .posture-list dt, .finding-body small { font-size: 12px; }
|
||||
.findings-panel { padding: 13px; }
|
||||
.findings-panel > header { align-items: flex-start; flex-direction: column; }
|
||||
.detail-grid { grid-template-columns: 1fr; }
|
||||
.detail-card:last-child { grid-column: auto; }
|
||||
.single-detail { padding: 15px; }
|
||||
.single-detail > header { flex-direction: column; }
|
||||
.summary-list > div, .posture-list > div { grid-template-columns: 98px minmax(0, 1fr); }
|
||||
.evidence-row { grid-template-columns: 52px minmax(0, 1fr); }
|
||||
.redirect-hop { grid-template-columns: 26px minmax(0, 1fr); }
|
||||
.redirect-hop .status-chip { grid-column: 2; justify-self: start; }
|
||||
.header-list li { grid-template-columns: 1fr; gap: 3px; }
|
||||
.diagnostic-drawer { padding: 22px; border-left: 0; }
|
||||
.diagnostic-drawer h2 { font-size: 22px; }
|
||||
.drawer-actions { flex-direction: column; }
|
||||
.header-matrix > div { grid-template-columns: 1fr auto; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
|
||||
}
|
||||
Reference in new issue
Block a user