/* Moved from websites/templates/websites/_crawler_access_styles.html (redesign checklist: local CSS out of the templates). Loaded only by the pages that include that partial. */ /* Page-local one-offs only — everything else comes from akoore.css and the shared report styles (DOC_DESIGN_UI_KIT.md, css-no-bare-hex rule). */ .bot-ua { font-size: 11px; word-break: break-all; max-width: 34ch; display: inline-block; color: var(--color-text-muted); } .bot-gate { font-size: 12px; white-space: nowrap; } /* The NAME must not break; the operator's note under it must. Nowrap on the whole cell let a 140-character note set the column width — one group's name column measured 1151px, which squeezed "What stopped it" to 73. */ .bot-name { white-space: normal; max-width: 30ch; } .bot-name strong { white-space: nowrap; } .bot-note { font-size: 11px; white-space: normal; } .bot-why { font-size: 12px; min-width: 22ch; max-width: 34ch; color: var(--color-neutral-700); } /* ---- The report's own ground ------------------------------------------- One set of tokens for the whole report, declared on the wrapper that holds the Overview and every framed section, so no block can find itself outside the palette. --cra4-card is the Evidence column's paper, which the groups grid cuts its cell gaps in. */ .cra-page { --cra-open: var(--mint-text); --cra-shut: var(--color-neutral-800); --cra-unknown: var(--color-neutral-400); --cra-bad: var(--coral-text); --cra-warn: var(--amber-text); --cra4-card: var(--rs-paper, var(--row-tint)); } .cra4-todo { margin: var(--space-2) 0 var(--space-3); } .cra4-tone--good { color: var(--cra-open); } .cra4-tone--warn { color: var(--cra-warn); } .cra4-tone--bad { color: var(--cra-bad); } .cra4-tone--info { color: var(--color-neutral-600); } /* ---- The groups grid: one row per group, one column per outcome ---- A cell's shade is the share of its group (--shade, from the server); the colour is its column's. In the informational groups a shut door is ink, never red — the same palette rule as the flow. */ .cra4-heat { width: 100%; border-collapse: collapse; font-size: 14px; } .cra4-heat thead th { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-700); text-align: center; padding: 6px 4px; border-bottom: 2px solid var(--color-text); } .cra4-heat thead th:first-child { text-align: left; } .cra4-heat tbody th { text-align: left; font-weight: 600; padding: 0 10px 0 0; white-space: nowrap; } .cra4-heat a { color: inherit; text-decoration: none; } .cra4-heat tr:hover th a { text-decoration: underline; } .cra4-heat td { text-align: center; height: 38px; font-weight: 700; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--cra4-card); border-right: 1px solid var(--cra4-card); } .cra4-heat .cra4-heat-sub th { padding: 12px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-700); } .cra4-heat-score { font-weight: 800; } .cra4-heat-score.cra4-tone--info { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; } .cra4-heat-cell { --heat-ink: var(--color-neutral-600); background: color-mix(in srgb, var(--heat-ink) var(--shade, 0%), transparent); print-color-adjust: exact; -webkit-print-color-adjust: exact; } .cra4-heat-cell--served { --heat-ink: var(--cra-open); } .cra4-heat-cell--blocked, .cra4-heat-cell--wall, .cra4-heat-cell--refused { --heat-ink: var(--cra-bad); } .cra4-heat-row--info .cra4-heat-cell--blocked, .cra4-heat-row--info .cra4-heat-cell--wall, .cra4-heat-row--info .cra4-heat-cell--refused { --heat-ink: var(--cra-shut); } .cra4-heat-cell.is-dark { color: var(--color-neutral-100); } .cra4-heat-zero { color: var(--color-neutral-400); font-weight: 400; } /* Inside a section the Evidence column is ~700px, too narrow for the two gates side by side: gate 1 sits above gate 2, the population count spans both. */ .cra-page .cra-gates { grid-template-columns: 130px minmax(0, 1fr); } .cra-page .cra-in { grid-row: span 2; } .cra-page .cra-gate { border-right: 0; } .cra-page .cra-gate + .cra-gate { border-top: 1px solid var(--color-neutral-300); } /* ---- The reference card: glossary beside the questions ---- */ .cra4-ref { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); } .cra4-ref-title { font-size: 18px; margin: 0 0 var(--space-3); } /* ---- The masthead under the verdict: the facts that frame it ---- */ .cra-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); border-top: 1px solid var(--color-neutral-400); border-bottom: 1px solid var(--color-neutral-400); padding: var(--space-2) 0; margin: 0; font-size: 12.5px; color: var(--color-neutral-700); } .cra-meta b { font-family: var(--font-heading); font-weight: var(--font-heading-weight); color: var(--color-text); font-variant-numeric: tabular-nums; } .cra-meta-bad { color: var(--cra-bad); } .cra-meta-warn { color: var(--cra-warn); } /* Every explanatory line in this report takes one class. Never a boxed card: a note that needs a box is a note nobody asked for. */ .cra-note { font-size: 12.5px; color: var(--color-neutral-700); max-width: 88ch; margin: var(--space-3) 0 0; } .cra-note--bad { color: var(--cra-bad); } .cra-block-title { font-size: 22px; margin: 0 0 var(--space-3); } /* ---- The instrument check: the control request under the verdict ---- */ .cra-instrument { border-left: 2px solid var(--color-text); padding-left: var(--space-3); } .cra-instrument-head { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-600); margin: 0 0 var(--space-2); } .cra-instrument-state { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px; line-height: 1.25; margin: 0 0 var(--space-2); } .cra-instrument-state--good { color: var(--cra-open); } .cra-instrument-state--warn { color: var(--cra-warn); } .cra-instrument-state--bad { color: var(--cra-bad); } .cra-instrument-body { font-size: 12.5px; color: var(--color-neutral-700); margin: 0 0 var(--space-2); } .cra-instrument-ua { font-size: 11px; color: var(--color-neutral-600); margin: 0; } /* ---- The six figures: counts, ruled, not pastel tiles ---- */ .cra-figures { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .cra-figure { border-top: 3px solid var(--color-neutral-400); border-right: 1px solid var(--color-neutral-300); padding: var(--space-2) var(--space-3) var(--space-2) 0; } .cra-figure:last-child { border-right: 0; } .cra-figure b { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; } .cra-figure span { display: block; font-size: 11.5px; margin-top: 2px; color: var(--color-neutral-700); } .cra-figure--good { border-top-color: var(--cra-open); } .cra-figure--good b { color: var(--cra-open); } .cra-figure--warn { border-top-color: var(--cra-warn); } .cra-figure--warn b { color: var(--cra-warn); } .cra-figure--bad { border-top-color: var(--cra-bad); } .cra-figure--bad b { color: var(--cra-bad); } /* ---- Access standing: a score is a position, so it is drawn as one ---- */ .cra-standing { display: grid; grid-template-columns: 1fr 200px; gap: var(--space-6); align-items: start; margin-bottom: var(--space-4); } .cra-scale-value { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 44px; line-height: 1; letter-spacing: -0.03em; margin: 0 0 var(--space-2); font-variant-numeric: tabular-nums; } .cra-scale-value span { font-size: 18px; color: var(--color-neutral-600); } /* The condition badge (§4.19) beside the score, and the numbers under the three-band rule (0 · 50 · 80 · 100) now that the bands carry no words. */ .cra-scale-value .badge { vertical-align: middle; margin-left: var(--space-2); font-size: 13px; letter-spacing: 0; } .cra-scale-legend { display: flex; justify-content: space-between; font-size: 10px; color: var(--color-neutral-600); margin-top: 8px; font-variant-numeric: tabular-nums; } .cra-scale-legend i { font-style: normal; } .cra-find-head .badge, .cra4-heat-score .badge { vertical-align: middle; } .cra4-heat-score .badge { margin-left: 6px; } .cra-scale { position: relative; display: flex; height: 30px; border: 1px solid var(--color-text); } .cra-scale-band { display: flex; align-items: center; justify-content: center; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-100); overflow: hidden; print-color-adjust: exact; -webkit-print-color-adjust: exact; } .cra-scale-band--bad { flex: 50; background: var(--cra-bad); } .cra-scale-band--warn { flex: 30; background: var(--cra-warn); } .cra-scale-band--good { flex: 20; background: var(--cra-open); } .cra-scale-mark { position: absolute; top: -6px; bottom: -6px; width: 3px; background: var(--color-text); transform: translateX(-1px); } .cra-tally { margin: 0; border-top: 2px solid var(--color-text); } .cra-tally > div { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--color-neutral-300); padding: var(--space-1) 0; } .cra-tally dt { font-size: 12.5px; color: var(--color-neutral-700); } .cra-tally dd { margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; font-variant-numeric: tabular-nums; } /* ---- The posture: a reading, set as a ledger of two columns ---- */ .cra-posture { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-6); } .cra-posture-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-600); margin: 0; } .cra-posture-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 var(--space-2); } .cra-posture-desc { font-size: 13.5px; margin: 0; } .cra-ledger { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .cra-ledger-head { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--color-text); padding-bottom: var(--space-1); margin: 0 0 var(--space-2); } .cra-ledger ul { margin: 0; padding-left: 1.2em; font-size: 13px; } .cra-ledger li { margin-bottom: var(--space-1); } .cra-contra { margin-top: var(--space-4); border-top: 1px solid var(--color-neutral-400); padding-top: var(--space-3); } .cra-contra-head { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; margin: 0 0 var(--space-2); } .cra-contra-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* Accent, and only here: a contradiction between the two rulebooks is the one thing on this page that is a finding whatever your policy is. */ .cra-contra-item { border-left: 4px solid var(--color-accent); padding-left: var(--space-3); } .cra-contra-item b { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; } .cra-contra-label { display: block; font-size: 12px; font-weight: 700; margin-bottom: var(--space-1); } .cra-contra-item p { font-size: 12.5px; color: var(--color-neutral-700); margin: 0; } .cra-contra-none { font-size: 13px; color: var(--color-neutral-700); margin: var(--space-4) 0 0; } /* ---- Work orders: severity in the margin, the change in the column ---- */ .cra-plan-group { border-left: 4px solid var(--color-neutral-400); padding-left: var(--space-3); margin: var(--space-6) 0; } .cra-plan-group--bad { border-left-color: var(--cra-bad); } .cra-plan-group--warn { border-left-color: var(--cra-warn); } .cra-plan-group--dismissed { border-left-color: var(--color-neutral-300); color: var(--color-neutral-600); } .cra-plan-group h3 { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; font-size: 18px; margin: 0 0 var(--space-1); } .cra-plan-count { font-family: var(--font-body); font-weight: 400; font-size: 12px; border: 1px solid var(--color-neutral-400); padding: 1px 7px; } /* One work order per rule, and a readable measure on every part of it: the shared list runs to the full body width, which is ~130 characters here. */ .cra-plan .seo-plan { margin-top: var(--space-3); padding-left: 1.5em; } /* The measure is capped on the order itself, not on each of its parts: capping the parts sets each one by its own font size, and the four blocks of a work order then end at four different right edges. */ .cra-plan .seo-plan > li { border-top: 1px solid var(--color-neutral-300); padding-top: var(--space-2); margin-bottom: var(--space-4); max-width: 78ch; } .cra-plan .seo-plan-meta { font-size: 12.5px; } .cra-plan .seo-mark-form { margin-top: var(--space-2); } /* ---- One group: stamp and summary above its doors ---- */ .cra-sec-stamp { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-neutral-600); margin: 0; } .cra-sec-stamp--warn { color: var(--cra-warn); } .cra-sec-summary { font-size: 13.5px; color: var(--color-neutral-800); margin: var(--space-2) 0 0; max-width: 84ch; } /* ---- A finding is a record, not a row (§4.7.1 point 4) ---- Every check here ends in a recommendation, and a recommendation is a paragraph. Three labelled parts, always in that order, at full measure. */ .cra-find-title { font-size: 18px; margin-top: var(--space-6); } .cra-finds { display: grid; gap: var(--space-3); } .cra-find { border-top: 1px solid var(--color-neutral-400); border-left: 4px solid var(--color-neutral-400); padding: var(--space-2) 0 var(--space-2) var(--space-3); } .cra-find--good { border-left-color: var(--cra-open); } .cra-find--warn { border-left-color: var(--cra-warn); } .cra-find--bad { border-left-color: var(--cra-bad); } .cra-find--info { border-left-color: var(--color-neutral-400); } .cra-find-head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 var(--space-2); } .cra-find-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 16px; } .cra-find-score { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; } .cra-find-meter { display: block; width: 90px; height: 6px; background: var(--color-neutral-300); } .cra-find-meter i { display: block; height: 100%; background: var(--color-neutral-700); print-color-adjust: exact; -webkit-print-color-adjust: exact; } .cra-find--good .cra-find-meter i { background: var(--cra-open); } .cra-find--warn .cra-find-meter i { background: var(--cra-warn); } .cra-find--bad .cra-find-meter i { background: var(--cra-bad); } .cra-find-part { max-width: 92ch; margin: 0 0 var(--space-2); font-size: 13px; color: var(--color-neutral-700); } .cra-find-label { display: block; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-neutral-500); } /* The only part about THIS website, so the only one set in ink. */ .cra-find-part--found { color: var(--color-text); } .cra-find-part--do { border-left: 3px solid var(--color-accent); padding-left: var(--space-3); margin-bottom: 0; } /* ---- The roster: the group bot by bot ---- */ .cra-roster-title { font-size: 18px; margin-top: var(--space-6); } /* Same palette rule as the flow: the row rules go red only in the groups where a shut door is a fault, ink everywhere else. */ .cra-roster--scored { --cra-shut: var(--cra-bad); } .cra-roster .cra-row td:first-child { border-left: 3px solid transparent; } .cra-roster .cra-row--good td:first-child { border-left-color: var(--cra-open); } .cra-roster .cra-row--bad td:first-child { border-left-color: var(--cra-shut); } .cra-roster .cra-row--warn td:first-child { border-left-color: var(--cra-warn); } /* ---- The conclusion, set as a letter ---- */ .cra-letter { max-width: 78ch; } .cra-letter-stamp { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-600); margin: 0 0 var(--space-3); } .cra-letter-stamp--stale { color: var(--cra-warn); text-transform: none; letter-spacing: 0; font-size: 12.5px; border-left: 3px solid var(--cra-warn); padding-left: var(--space-2); } /* ---- The glossary and the FAQ ---- */ .cra-glossary { display: grid; gap: 0; margin: 0; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .cra-glossary > div { border-top: 1px solid var(--color-neutral-300); padding: var(--space-2) var(--space-4) var(--space-2) 0; } .cra-glossary dt { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 13px; margin-bottom: 2px; } .cra-glossary dd { margin: 0; font-size: 12.5px; color: var(--color-neutral-700); } .cra-faq details { border: 0; border-bottom: 1px solid var(--color-neutral-300); background: none; border-radius: 0; padding: var(--space-2) 0; margin: 0; } .cra-faq summary { cursor: pointer; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; } .cra-faq summary strong { font-weight: inherit; } .cra-faq details p { font-size: 13px; max-width: 88ch; margin: var(--space-2) 0 var(--space-1); } @media (max-width: 1100px) { .cra-standing, .cra-posture, .cra4-ref { grid-template-columns: 1fr; } } @media (max-width: 560px) { .cra-posture-title { font-size: 22px; } .cra-scale-band { font-size: 9px; letter-spacing: 0; } } @media print { .cra-standing, .cra-posture, .cra-figures, .cra-contra-item, .cra-letter, .cra4-heat { break-inside: avoid; } } /* ---- The two doors ---------------------------------------------------- One group drawn as the sequence a crawler lives: the robots.txt bar, the live-server bar, then the outcome bins. The palette is the point. A shut door is INK, not red: in the informational groups (scrapers, SEO tools, cloud services, the leftovers) blocking a bot is a decision the owner is entitled to have made, and red would be this report taking a side. In the four scored groups .cra-flow--scored swaps that ink for the report's critical red, because there the same result really is a fault. Good/critical are the DOC_DESIGN_UI_KIT.md §4.7 verdict colours. */ .cra-flow { --cra-open: var(--mint-text); --cra-shut: var(--color-neutral-800); --cra-unknown: var(--color-neutral-400); margin: var(--space-3) 0 var(--space-4); } .cra-flow--scored { --cra-shut: var(--coral-text); } .cra-verdict { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 26px; line-height: 1.18; letter-spacing: -0.02em; max-width: 30ch; margin: 0 0 var(--space-3); } .cra-verdict em { font-style: normal; color: var(--color-accent); } .cra-flow--scored .cra-verdict em { color: var(--coral-text); } .cra-gates { display: grid; grid-template-columns: 140px 1fr 1fr; border: 2px solid var(--color-text); margin-bottom: var(--space-3); } .cra-in, .cra-gate { padding: var(--space-3); border-right: 1px solid var(--color-neutral-300); } .cra-gate:last-child { border-right: 0; } .cra-in { background: var(--color-neutral-100); text-align: center; display: flex; flex-direction: column; justify-content: center; min-width: 0; } /* The population's name sits here — a domain on the cover, a group title in a section — and a domain does not break at a space. */ .cra-in .helptext { overflow-wrap: anywhere; line-height: 1.3; } .cra-in-count { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 40px; line-height: 1; letter-spacing: -0.03em; } .cra-in-label { font-size: 12px; font-weight: 700; } .cra-gate-head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 var(--space-2); } .cra-gate-num { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--color-text); color: var(--color-bg); padding: 3px 7px; } .cra-gate-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 16px; } .cra-bar { display: flex; height: 44px; border: 1px solid var(--color-text); margin-bottom: var(--space-2); } .cra-seg { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 12px; font-weight: 700; color: var(--color-neutral-100); print-color-adjust: exact; -webkit-print-color-adjust: exact; } .cra-seg--allowed, .cra-seg--served { background: var(--cra-open); } /* Allowed with exceptions: the open colour, hatched — the door is open but the file has an opinion about this bot, and the note under the bar says what its exceptions close. */ .cra-seg--partial { background: var(--cra-open); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.28) 0 6px, transparent 6px 12px); } .cra-seg--blocked, .cra-seg--refused { background: var(--cra-shut); } /* Hatching = "a wall stands here" and, lighter, "we could not measure". Neither is a plain colour, because neither is a plain verdict. */ .cra-seg--wall { background: var(--cra-shut); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.24) 0 6px, transparent 6px 12px); } .cra-seg--error, .cra-seg--rate-limited { background: var(--cra-unknown); color: var(--color-neutral-900); } .cra-seg--not-indicated, .cra-seg--not-probed { background: var(--color-neutral-200); color: var(--color-neutral-700); background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(45,43,43,.10) 6px 12px); } .cra-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: 12px; color: var(--color-neutral-700); margin: 0; } .cra-legend span { display: inline-flex; align-items: center; gap: 6px; } .cra-key { width: 12px; height: 12px; flex: 0 0 12px; border: 1px solid var(--color-neutral-600); print-color-adjust: exact; -webkit-print-color-adjust: exact; } .cra-gate-note { font-size: 12px; color: var(--color-neutral-700); margin: var(--space-2) 0 0; } .cra-bins { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .cra-bin { background: var(--color-neutral-100); padding: var(--space-3); border-top: 4px solid var(--color-neutral-300); } .cra-bin--open { border-top-color: var(--cra-open); } .cra-bin--shut { border-top-color: var(--cra-shut); } .cra-bin b { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 24px; line-height: 1; } .cra-bin-title { display: block; font-size: 12px; font-weight: 700; margin: 2px 0 var(--space-2); } .cra-chips { display: flex; flex-wrap: wrap; gap: 4px; } .cra-chip { font-size: 11px; background: var(--color-bg); border: 1px solid var(--color-neutral-300); padding: 2px 7px; } .cra-bin-note { font-size: 11px; color: var(--color-neutral-600); margin: var(--space-2) 0 0; } @media (max-width: 860px) { .cra-gates { grid-template-columns: 1fr; } .cra-in, .cra-gate { border-right: 0; border-bottom: 1px solid var(--color-neutral-300); } .cra-verdict { font-size: 21px; } }