/* ============================================================ Cyber security tools - shared styling ============================================================ LOADED ALONGSIDE network-tools.css, NOT INSTEAD OF IT. The existing .nt-* shapes - panel, row, field, button, table, badge, spinner - are the site's security-tool vocabulary already, and eighty-four checkers use them. Redefining that here would have produced a second look for tools that sit in the same category and link to each other. So this file adds only what the new tools need on top: scores, severities, evidence, file drops, hub cards and the long-form content blocks. COLOURS ARE THE SITE'S OWN. Every value below resolves through a2z-tokens.css - the same #2583dc blue, the same warm beige card offset, the same navy headings - with local fallbacks so the file is not load-order dependent. The brief allowed a darker navy/cyan accent for this section; it is used only for the score ring and the severity scale, where a distinct colour carries meaning, and nowhere as decoration. There is no neon and no "hacker" styling: these are professional tools and a report someone might hand to a client. Dark theme follows the existing convention - .theme-dark on , tokens swapped, no rule duplicated. ============================================================ */ .cy-wrap { max-width: 1060px; margin: 0 auto 28px; } /* ---- hero: title, one-line purpose, privacy badge ---- */ .cy-hero { max-width: 780px; margin: 0 auto 18px; text-align: center; } .cy-hero p.cy-purpose { font-size: 16px; line-height: 1.55; color: var(--text-muted, #5f5b57); margin: 10px 0 14px; } /* ---- execution / privacy badge ---- Four states, and the colour is doing real work: green means the input never leaves the browser, so it must not look the same as the one that says we fetch a third party. */ .cy-exec { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid transparent; } .cy-exec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .cy-exec-local { background: #e6f6ec; color: #16653c; border-color: #bfe5cd; } .cy-exec-passive { background: var(--primary-blue-soft, #eaf3fc); color: #1a6ec0; border-color: #c4dff5; } .cy-exec-server { background: #fff4de; color: #8a5800; border-color: #f0dcb4; } .cy-exec-external { background: #f1edfd; color: #5a3fbe; border-color: #ddd4f8; } .cy-exec-note { font-size: 13px; line-height: 1.5; color: var(--text-muted, #5f5b57); margin: 10px auto 0; max-width: 620px; } /* ---- score ring ---- Drawn with conic-gradient over a masked circle so there is no SVG to ship and no layout cost. --cy-pct is set inline by the tool; the transition animates it because the custom property is registered below. */ @property --cy-pct { syntax: ""; inherits: false; initial-value: 0; } .cy-score { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .cy-ring { --cy-pct: 0; --cy-ring-color: #2583dc; position: relative; width: 128px; height: 128px; border-radius: 50%; flex: none; background: conic-gradient(var(--cy-ring-color) calc(var(--cy-pct) * 1%), var(--card-border-soft, #e8e4e0) 0); transition: --cy-pct .9s cubic-bezier(.22, .8, .3, 1); } /* The hole in the middle. A mask would be cleaner but is not universally supported for conic gradients, so this is a plain inner circle - it also gives the number a solid backdrop. */ .cy-ring::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--card-background, #fff); } .cy-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; } .cy-ring-num { font-size: 34px; font-weight: 800; line-height: 1; color: var(--heading-color, #343a52); font-variant-numeric: tabular-nums; } .cy-ring-of { font-size: 11.5px; color: var(--text-muted, #5f5b57); margin-top: 3px; } .cy-grade { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 12px; border-radius: 12px; font-size: 24px; font-weight: 800; color: #fff; } .cy-grade-a { background: #16653c; } .cy-grade-b { background: #3f7d20; } .cy-grade-c { background: #8a5800; } .cy-grade-d { background: #b45309; } .cy-grade-f { background: #b3261e; } .cy-score-meta { min-width: 200px; flex: 1 1 240px; } .cy-score-meta h2 { font-size: 19px; margin: 0 0 6px; color: var(--heading-color, #343a52); } .cy-score-meta p { font-size: 13.5px; color: var(--text-muted, #5f5b57); margin: 0; line-height: 1.5; } /* ---- category subscore bars ---- */ .cy-meters { display: grid; gap: 11px; margin-top: 18px; } .cy-meter-head { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 4px; } .cy-meter-head b { font-weight: 600; color: var(--heading-color, #343a52); } .cy-meter-head span { color: var(--text-muted, #5f5b57); font-variant-numeric: tabular-nums; } .cy-meter-track { height: 8px; border-radius: 999px; background: var(--card-border-soft, #e8e4e0); overflow: hidden; } .cy-meter-fill { height: 100%; border-radius: 999px; width: 0; background: var(--primary-blue, #2583dc); transition: width .7s cubic-bezier(.22, .8, .3, 1); } .cy-meter-fill.is-good { background: #2f9e5f; } .cy-meter-fill.is-warn { background: #d99100; } .cy-meter-fill.is-bad { background: #d1443c; } /* ---- severity + state chips ---- Five states, not three. "Unknown" and "Not applicable" are distinct from "Pass" on purpose: treating an unanswerable check as a pass is how scanners end up flattering a site. */ .cy-sev { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; } .cy-sev-critical { background: #fce8e6; color: #8c1d18; } .cy-sev-high { background: #fdeceb; color: #b3261e; } .cy-sev-medium { background: #fff4de; color: #8a5800; } .cy-sev-low { background: var(--primary-blue-soft, #eaf3fc); color: #1a6ec0; } .cy-sev-info { background: var(--card-border-soft, #eef0f5); color: #5f5b57; } .cy-sev-pass { background: #e6f6ec; color: #16653c; } .cy-sev-unknown { background: #f1edfd; color: #5a3fbe; } .cy-sev-na { background: var(--card-border-soft, #eef0f5); color: #7a756f; } /* ---- finding cards ---- Summary first, evidence underneath. The details element is the progressive disclosure the brief asks for, and it keeps the technical body out of the way without hiding it from a crawler or a screen reader. */ .cy-findings { display: grid; gap: 12px; margin-top: 16px; } .cy-finding { border: 1px solid var(--card-border, #d8d8d8); border-left: 4px solid var(--card-border, #d8d8d8); border-radius: 12px; padding: 14px 16px; background: var(--card-background, #fff); } .cy-finding.sev-critical, .cy-finding.sev-high { border-left-color: #b3261e; } .cy-finding.sev-medium { border-left-color: #d99100; } .cy-finding.sev-low { border-left-color: #2583dc; } .cy-finding.sev-pass { border-left-color: #2f9e5f; } .cy-finding.sev-unknown { border-left-color: #7c5cd6; } .cy-finding.sev-na { border-left-color: #c9c4be; } .cy-finding-top { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; justify-content: space-between; } .cy-finding h3 { font-size: 15.5px; font-weight: 700; margin: 0; color: var(--heading-color, #343a52); flex: 1 1 220px; } .cy-finding-why { font-size: 13.5px; line-height: 1.55; color: var(--text-color, #111); margin: 8px 0 0; } .cy-finding details { margin-top: 10px; } .cy-finding summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--primary-blue-strong, #1a6ec0); list-style: none; } .cy-finding summary::-webkit-details-marker { display: none; } .cy-finding summary::before { content: "\25B8 "; display: inline-block; transition: transform .15s ease; } .cy-finding details[open] summary::before { transform: rotate(90deg); } .cy-confidence { font-size: 11.5px; color: var(--text-muted, #5f5b57); font-weight: 600; } /* ---- code / evidence blocks ---- Must scroll rather than stretch the page. Long header values, CSP policies, JSON and vector strings all land here. */ .cy-code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px; line-height: 1.55; background: #f7f8fc; border: 1px solid var(--card-border-soft, #e8e4e0); border-radius: 10px; padding: 11px 13px; overflow-x: auto; white-space: pre; margin: 9px 0 0; max-width: 100%; } .cy-code-wrap { white-space: pre-wrap; word-break: break-word; } .cy-codehead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .cy-codehead b { font-size: 13px; color: var(--heading-color, #343a52); } /* ---- file drop zone ---- */ .cy-drop { border: 2px dashed var(--card-border, #d8d8d8); border-radius: 14px; padding: 26px 18px; text-align: center; background: var(--page-background-soft, #fdfbf9); cursor: pointer; transition: border-color .15s ease, background .15s ease; } .cy-drop:hover, .cy-drop:focus-visible { border-color: var(--primary-blue, #2583dc); } .cy-drop.is-over { border-color: var(--primary-blue, #2583dc); background: var(--primary-blue-soft, #eaf3fc); } .cy-drop input[type="file"] { display: none; } .cy-drop-title { font-size: 14.5px; font-weight: 600; color: var(--heading-color, #343a52); } .cy-drop-hint { font-size: 12.5px; color: var(--text-muted, #5f5b57); margin-top: 5px; } .cy-filelist { margin-top: 12px; display: grid; gap: 7px; } .cy-fileitem { display: flex; align-items: center; gap: 10px; justify-content: space-between; font-size: 13px; padding: 8px 11px; border: 1px solid var(--card-border-soft, #e8e4e0); border-radius: 9px; background: var(--card-background, #fff); } .cy-fileitem span.cy-fname { font-weight: 600; word-break: break-all; } .cy-fileitem span.cy-fsize { color: var(--text-muted, #5f5b57); white-space: nowrap; font-variant-numeric: tabular-nums; } /* ---- textarea ---- */ .cy-ta { width: 100%; min-height: 168px; padding: 11px 13px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; line-height: 1.55; border: 1px solid var(--card-border, #d8d8d8); border-radius: 10px; background: #fff; color: var(--text-color, #111); resize: vertical; } .cy-ta:focus { outline: none; border-color: var(--primary-blue, #2583dc); box-shadow: 0 0 0 3px var(--primary-blue-ring, rgb(37 131 220 / 38%)); } /* ---- tabs ---- */ .cy-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--card-border-soft, #e8e4e0); margin-bottom: 14px; } .cy-tab { border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-muted, #5f5b57); padding: 9px 13px; border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px; } .cy-tab[aria-selected="true"] { color: var(--primary-blue-strong, #1a6ec0); border-bottom-color: var(--primary-blue, #2583dc); } /* ---- key/value summary grid ---- */ .cy-kv { display: grid; grid-template-columns: minmax(130px, max-content) 1fr; gap: 7px 16px; font-size: 13.5px; margin: 0; } .cy-kv dt { font-weight: 600; color: var(--text-muted, #5f5b57); } .cy-kv dd { margin: 0; color: var(--text-color, #111); word-break: break-word; } /* ---- stat tiles ---- */ .cy-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-top: 14px; } .cy-stat { border: 1px solid var(--card-border-soft, #e8e4e0); border-radius: 11px; padding: 12px 14px; background: var(--card-background, #fff); } .cy-stat b { display: block; font-size: 22px; font-weight: 800; color: var(--heading-color, #343a52); font-variant-numeric: tabular-nums; } .cy-stat span { font-size: 12px; color: var(--text-muted, #5f5b57); } /* ---- empty + notice states ---- */ .cy-empty { text-align: center; padding: 30px 18px; color: var(--text-muted, #5f5b57); font-size: 14px; line-height: 1.6; } .cy-note { font-size: 13px; line-height: 1.55; border-radius: 10px; padding: 11px 13px; margin-top: 12px; border: 1px solid; } .cy-note-info { background: var(--primary-blue-soft, #eaf3fc); border-color: #c4dff5; color: #17456f; } .cy-note-warn { background: #fff4de; border-color: #f0dcb4; color: #6b4400; } .cy-note-danger { background: #fdeceb; border-color: #f4c6c2; color: #8c1d18; } /* ---- progress / scan strip ---- Tied to real progress. It is width-driven by the tool, so it cannot run ahead of the work or linger after it. */ .cy-progress { height: 5px; border-radius: 999px; background: var(--card-border-soft, #e8e4e0); overflow: hidden; margin-top: 12px; } .cy-progress-bar { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #2583dc, #1a6ec0); transition: width .25s linear; } .cy-step { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted, #5f5b57); padding: 3px 0; } .cy-step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--card-border, #d8d8d8); flex: none; } .cy-step.is-running .cy-step-dot { background: var(--primary-blue, #2583dc); animation: cy-pulse 1s ease-in-out infinite; } .cy-step.is-done .cy-step-dot { background: #2f9e5f; } .cy-step.is-failed .cy-step-dot { background: #d1443c; } @keyframes cy-pulse { 50% { opacity: .35; } } /* ============================================================ Hub pages ============================================================ */ .cy-hub-intro { max-width: 760px; margin: 0 auto 22px; text-align: center; } .cy-hub-intro p { font-size: 15.5px; line-height: 1.6; color: var(--text-muted, #5f5b57); } .cy-filters { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; } .cy-search { flex: 1 1 230px; min-width: 0; padding: 10px 13px; font-size: 15px; border: 1px solid var(--card-border, #d8d8d8); border-radius: 10px; background: #fff; color: var(--text-color, #111); } .cy-search:focus { outline: none; border-color: var(--primary-blue, #2583dc); box-shadow: 0 0 0 3px var(--primary-blue-ring, rgb(37 131 220 / 38%)); } .cy-chip { border: 1px solid var(--card-border, #d8d8d8); background: var(--card-background, #fff); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted, #5f5b57); cursor: pointer; } .cy-chip[aria-pressed="true"] { background: var(--primary-blue-soft, #eaf3fc); border-color: var(--primary-blue, #2583dc); color: var(--primary-blue-strong, #1a6ec0); } .cy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 16px; } .cy-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 17px; background: var(--card-background, #fff); border: 1px solid var(--card-border, #d8d8d8); border-radius: var(--h-r-md, 14px); box-shadow: var(--card-offset, 4px 4px 0 #f8f2ee); text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .cy-card:hover, .cy-card:focus-visible { transform: translate(-2px, -2px); box-shadow: var(--card-offset-hover, 6px 6px 0 #f8f2ee); border-color: var(--primary-blue, #2583dc); text-decoration: none; color: inherit; } .cy-card h3 { font-size: 15.5px; font-weight: 700; margin: 0; color: var(--heading-color, #343a52); line-height: 1.35; } .cy-card:hover h3 { color: var(--primary-blue-strong, #1a6ec0); } .cy-card p { font-size: 13px; line-height: 1.55; color: var(--text-muted, #5f5b57); margin: 0; flex: 1; } .cy-card-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cy-card .cy-exec { font-size: 11px; padding: 3px 9px; } .cy-section-head { margin: 30px 0 14px; padding-top: 6px; border-top: 1px solid var(--card-border-soft, #e8e4e0); } .cy-section-head h2 { font-size: 21px; margin: 12px 0 5px; color: var(--heading-color, #343a52); } .cy-section-head p { font-size: 13.5px; color: var(--text-muted, #5f5b57); margin: 0; } .cy-count { font-size: 13px; color: var(--text-muted, #5f5b57); margin-bottom: 12px; } /* ---- favourites / recents ---- */ .cy-fav { border: 0; background: none; cursor: pointer; font-size: 15px; line-height: 1; padding: 4px; color: var(--card-border, #d8d8d8); } .cy-fav[aria-pressed="true"] { color: #d99100; } /* ============================================================ Long-form content blocks (methodology, FAQ, limitations) ============================================================ Every tool page carries these, so they are defined once. The copy is per-tool; only the shape is shared. */ .cy-content { max-width: 800px; margin: 30px auto 0; } .cy-content h2 { font-size: 21px; margin: 26px 0 9px; color: var(--heading-color, #343a52); } .cy-content h3 { font-size: 16.5px; margin: 18px 0 7px; color: var(--heading-color, #343a52); } .cy-content p, .cy-content li { font-size: 14.5px; line-height: 1.7; color: var(--text-color, #111); } .cy-content ul, .cy-content ol { padding-left: 21px; margin-bottom: 12px; } .cy-content li { margin-bottom: 6px; } .cy-content a { color: var(--primary-blue-strong, #1a6ec0); } .cy-faq { border-top: 1px solid var(--card-border-soft, #e8e4e0); } .cy-faq details { border-bottom: 1px solid var(--card-border-soft, #e8e4e0); padding: 13px 0; } .cy-faq summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--heading-color, #343a52); list-style: none; } .cy-faq summary::-webkit-details-marker { display: none; } .cy-faq summary::after { content: "+"; float: right; font-size: 19px; line-height: 1; color: var(--text-muted, #5f5b57); } .cy-faq details[open] summary::after { content: "\2212"; } .cy-faq details p { margin: 9px 0 0; } .cy-meta-foot { margin-top: 22px; padding-top: 13px; border-top: 1px solid var(--card-border-soft, #e8e4e0); font-size: 12.5px; color: var(--text-muted, #5f5b57); line-height: 1.6; } .cy-related { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .cy-related a { font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--card-border, #d8d8d8); color: var(--primary-blue-strong, #1a6ec0); text-decoration: none; background: var(--card-background, #fff); } .cy-related a:hover { border-color: var(--primary-blue, #2583dc); background: var(--primary-blue-soft, #eaf3fc); } /* ---- breadcrumb ---- */ .cy-crumbs { font-size: 12.5px; color: var(--text-muted, #5f5b57); margin-bottom: 10px; } .cy-crumbs a { color: var(--text-muted, #5f5b57); text-decoration: none; } .cy-crumbs a:hover { color: var(--primary-blue-strong, #1a6ec0); text-decoration: underline; } .cy-crumbs span { margin: 0 6px; opacity: .6; } /* ============================================================ Responsive - must hold at 320px ============================================================ */ @media (max-width: 620px) { .cy-ring { width: 104px; height: 104px; } .cy-ring-num { font-size: 28px; } .cy-grid { grid-template-columns: 1fr; } .cy-kv { grid-template-columns: 1fr; gap: 2px 0; } .cy-kv dd { margin-bottom: 9px; } .cy-content h2 { font-size: 19px; } } @media (max-width: 380px) { .cy-score { gap: 12px; } .cy-stats { grid-template-columns: 1fr 1fr; } } /* ============================================================ Reduced motion Everything that moves is listed here rather than relying on each animation to opt out, so a new one cannot be added and forget. The score ring still fills - it just arrives at its value immediately instead of sweeping to it. ============================================================ */ @media (prefers-reduced-motion: reduce) { .cy-ring, .cy-meter-fill, .cy-progress-bar, .cy-card, .cy-finding summary::before { transition: none !important; } .cy-step.is-running .cy-step-dot { animation: none; } .cy-card:hover, .cy-card:focus-visible { transform: none; } } /* ============================================================ Dark theme ============================================================ */ .theme-dark .cy-ring::after { background: #17161a; } .theme-dark .cy-ring { background: conic-gradient(var(--cy-ring-color) calc(var(--cy-pct) * 1%), #322f2c 0); } .theme-dark .cy-ring-num, .theme-dark .cy-score-meta h2, .theme-dark .cy-finding h3, .theme-dark .cy-stat b, .theme-dark .cy-card h3, .theme-dark .cy-section-head h2, .theme-dark .cy-content h2, .theme-dark .cy-content h3, .theme-dark .cy-faq summary { color: #d7dae6; } .theme-dark .cy-meter-track, .theme-dark .cy-progress { background: #322f2c; } .theme-dark .cy-finding, .theme-dark .cy-stat, .theme-dark .cy-fileitem, .theme-dark .cy-card, .theme-dark .cy-chip, .theme-dark .cy-related a { background: #17161a; border-color: #322f2c; } .theme-dark .cy-card { box-shadow: 4px 4px 0 #232025; } .theme-dark .cy-card:hover, .theme-dark .cy-card:focus-visible { box-shadow: 6px 6px 0 #2b272d; } .theme-dark .cy-code { background: #121114; border-color: #322f2c; color: #e4e1de; } .theme-dark .cy-ta, .theme-dark .cy-search { background: #121114; border-color: #322f2c; color: #f4f2f0; } .theme-dark .cy-drop { background: #121114; border-color: #322f2c; } .theme-dark .cy-drop.is-over { background: #172533; border-color: #7ab6f0; } .theme-dark .cy-content p, .theme-dark .cy-content li { color: #e4e1de; } .theme-dark .cy-content a, .theme-dark .cy-related a { color: #7ab6f0; } .theme-dark .cy-tabs, .theme-dark .cy-faq details, .theme-dark .cy-faq, .theme-dark .cy-section-head, .theme-dark .cy-meta-foot { border-color: #26231f; } /* The status colours keep their meaning in dark mode, so they are re-stated at lower saturation rather than inherited - the light versions would glare against a dark card. */ .theme-dark .cy-exec-local { background: #12291c; color: #7fd6a0; border-color: #1e4430; } .theme-dark .cy-exec-passive { background: #152533; color: #7ab6f0; border-color: #1f3b52; } .theme-dark .cy-exec-server { background: #2e2413; color: #e5b95c; border-color: #4a3a1c; } .theme-dark .cy-exec-external { background: #211a35; color: #b49af0; border-color: #362a52; } .theme-dark .cy-sev-critical, .theme-dark .cy-sev-high { background: #2f1513; color: #ff9d94; } .theme-dark .cy-sev-medium { background: #2e2413; color: #e5b95c; } .theme-dark .cy-sev-low { background: #152533; color: #7ab6f0; } .theme-dark .cy-sev-pass { background: #12291c; color: #7fd6a0; } .theme-dark .cy-sev-unknown { background: #211a35; color: #b49af0; } .theme-dark .cy-sev-info, .theme-dark .cy-sev-na { background: #26231f; color: #a9a49f; } .theme-dark .cy-note-info { background: #152533; border-color: #1f3b52; color: #a9cff2; } .theme-dark .cy-note-warn { background: #2e2413; border-color: #4a3a1c; color: #e5b95c; } .theme-dark .cy-note-danger { background: #2f1513; border-color: #4a2222; color: #ff9d94; } /* ---- reporting tools: editable table cells and inline tags ---- The remediation plan, regression checker and comparator put form controls inside data tables. They have to shrink with the column rather than hold it open, or the table blows past the viewport on a phone - which is the one thing these pages are not allowed to do. Hence the explicit min-width: 0 and the percentage width. */ .cy-in { font: inherit; font-size: 13px; width: 100%; min-width: 0; max-width: 100%; padding: 5px 7px; border: 1px solid var(--border-color, #e3ddd7); border-radius: 6px; background: var(--body-background, #fff); color: var(--text-color, #111); } .cy-in:focus { outline: 2px solid var(--primary-blue, #2583dc); outline-offset: -1px; border-color: var(--primary-blue, #2583dc); } .cy-tag { display: inline-block; font-size: 11.5px; font-weight: 600; line-height: 1.5; padding: 1px 7px; border-radius: 999px; background: var(--card-offset-background, #f8f2ee); border: 1px solid var(--border-color, #e3ddd7); color: var(--text-muted, #5f5b57); white-space: nowrap; } .cy-steps { margin: 0; padding-left: 20px; display: grid; gap: 10px; } .cy-steps li { padding-left: 2px; } /* A delta cell: what changed between two audits. Worse is not just a different colour from better, it is the one the eye should land on first, so it carries weight as well as hue. */ .cy-delta { font-weight: 600; white-space: nowrap; } .cy-delta-worse { color: #b32020; } .cy-delta-better { color: #1d7a45; } .cy-delta-same { color: var(--text-muted, #5f5b57); font-weight: 500; } .cy-delta-unknown { color: #8a6100; } .theme-dark .cy-in { background: #1c1c22; border-color: #35353f; color: #e8e6e3; } .theme-dark .cy-tag { background: #24242c; border-color: #35353f; color: #b6b2ad; } .theme-dark .cy-delta-worse { color: #ff8a8a; } .theme-dark .cy-delta-better { color: #6ddb9b; } .theme-dark .cy-delta-unknown { color: #e5b95c; } /* A verified / succeeded note. The verifier needs a state that is visibly different from cy-note-info: "signature verified" and "here is some context" must not look the same at a glance, or the answer gets lost in the explanation around it. */ .cy-note-ok { background: #e7f6ec; border-color: #bfe3cb; color: #14612f; } .theme-dark .cy-note-ok { background: #16281c; border-color: #27492f; color: #6ddb9b; } /* Notes and step lists quote what the visitor typed - a password, a hostname, a header value - and those arrive as single unbreakable tokens. A 41-character password with no spaces pushes the note wider than a 320px screen, which is the one thing these pages are not allowed to do. "anywhere" rather than "break-word" because only the former also shrinks the element's min-content width, which is what the overflow calculation actually uses. break-word wraps the text and still reports the wide intrinsic size, so the page keeps overflowing while looking fine. */ .cy-note, .cy-steps li, .cy-finding-why { overflow-wrap: anywhere; } /* Source and freshness chips (vulnerability intelligence). Unlike the short .cy-delta labels they carry dates and messages, so they wrap rather than widen the page at 320px. */ .cy-source { display: inline-block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; border: 1px solid var(--card-border-soft, #e8e4e0); border-radius: 8px; padding: 3px 8px; margin: 2px 4px 2px 0; font-size: 12.5px; } /* Flex/grid items default to min-width:auto, so a select with long option text widens its field past a 320px viewport. */ .cy-wrap .nt-field { min-width: 0; } /* Long values (CIDR blocks, IPv6, big counts) must wrap inside a stat tile rather than widen the grid past a 320px viewport. */ .cy-stat { min-width: 0; } .cy-stat b { overflow-wrap: anywhere; } /* Visually hidden but announced: the heading that opens each tool region, so result headings (h3) sit under an h2 rather than jumping straight from the page h1. */ .cy-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }