/* The stylesheet for the server-rendered editorial pages: /tools, /learn, /glossary and everything under them. Every colour here is a token defined in frontend/src/index.css and loaded from the application's own bundle, which these pages link before this file. Nothing below states a colour of its own — a hex value in this file would be a second palette that drifts from the first the day either one changes. Light and dark therefore work without a single rule for them: the tokens are redefined under .dark by the application's stylesheet, and the pre-paint script in the shell puts that class on before anything renders. The layout is one column that never scrolls sideways at 375px, with the guide table of contents promoted to a sticky rail only when there is room for it. */ .ed-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--background); color: var(--foreground); font-family: var(--font-sans, system-ui, sans-serif); line-height: 1.6; } .ed-shell { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 1rem; } @media (min-width: 640px) { .ed-shell { padding-inline: 1.5rem; } } /* --- skip link ---------------------------------------------------------- */ .ed-skip { position: absolute; left: -9999px; top: 0; z-index: 50; padding: 0.625rem 1rem; border-radius: 0 0 0.5rem 0; background: var(--card); color: var(--foreground); border: 1px solid var(--border); font-size: 0.875rem; } .ed-skip:focus { left: 0; } /* --- header ------------------------------------------------------------- */ .ed-header { border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--background) 88%, transparent); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 40; } /* The same row the application's own public header draws: brand, a hairline, the reference nav, then the theme toggle and the two account buttons. The measurements are the application's, not approximations of them — a visitor moving between a guide and the landing page should see one header, not two that resemble each other. */ .ed-header-inner { display: flex; align-items: center; gap: 0.75rem; min-height: 4rem; flex-wrap: wrap; } .ed-divider { display: none; width: 1px; height: 1.25rem; margin-left: 0.5rem; background: var(--border); } .ed-spacer { flex: 1 1 auto; } @media (min-width: 1024px) { .ed-divider { display: block; } } .ed-brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.02em; color: var(--foreground); text-decoration: none; } .ed-brand img { width: 1.75rem; height: 1.75rem; object-fit: contain; } .ed-nav { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; } .ed-nav a { padding: 0.5rem 0.75rem; border-radius: var(--radius-md, 0.5rem); font-size: 0.8125rem; font-weight: 500; color: var(--muted-foreground); text-decoration: none; } .ed-nav a:hover { color: var(--foreground); background: var(--muted); } .ed-nav a[aria-current="page"] { color: var(--foreground); background: var(--muted); } /* Ghost, like the application's Sign in: the pair reads as one control with a primary and a secondary half rather than as two buttons of equal weight. */ .ed-signin { display: inline-flex; align-items: center; height: 2.25rem; padding-inline: 0.875rem; border-radius: var(--radius-md, 0.5rem); font-size: 0.8125rem; font-weight: 500; color: var(--foreground); text-decoration: none; white-space: nowrap; } .ed-signin:hover { background: var(--muted); } /* The theme toggle. It is the application's icon button: ghost, muted until hovered, and the two glyphs swap on the class the pre-paint script sets. */ .ed-theme { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: var(--radius-md, 0.5rem); background: transparent; color: var(--muted-foreground); cursor: pointer; } .ed-theme:hover { color: var(--foreground); background: var(--muted); } .ed-theme .ed-icon-sun { display: none; } .dark .ed-theme .ed-icon-sun { display: block; } .dark .ed-theme .ed-icon-moon { display: none; } .ed-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; height: 2.25rem; padding-inline: 0.875rem; border-radius: var(--radius-md, 0.5rem); /* The application's default button: --primary inverts between themes and --primary-foreground inverts with it, so the pair is legible in both. A brand-coloured fill would need a light foreground token that does not exist, and a literal white here would be a colour outside the palette. */ background: var(--primary); color: var(--primary-foreground); font-size: 0.8125rem; font-weight: 500; text-decoration: none; white-space: nowrap; } /* The nav wraps to its own line before the account buttons are squeezed out. Below `sm` the reference links are the thing a reader on a phone came for. */ @media (max-width: 639px) { .ed-nav { order: 3; width: 100%; padding-bottom: 0.5rem; } .ed-spacer { display: none; } } .ed-cta:hover { filter: brightness(1.08); } /* --- breadcrumbs -------------------------------------------------------- */ .ed-crumbs { padding-block: 1.25rem 0; font-size: 0.75rem; } .ed-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; list-style: none; margin: 0; padding: 0; color: var(--faint); } .ed-crumbs a { color: var(--muted-foreground); text-decoration: none; } .ed-crumbs a:hover { color: var(--foreground); text-decoration: underline; } .ed-crumbs li[aria-current="page"] { color: var(--foreground); } /* --- page head ---------------------------------------------------------- */ .ed-main { flex: 1; padding-bottom: 4rem; } .ed-eyebrow { display: inline-block; margin-bottom: 0.75rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--brand); } .ed-title { margin: 0; font-size: clamp(1.75rem, 1.15rem + 2.6vw, 2.75rem); line-height: 1.1; letter-spacing: -0.035em; font-weight: 600; text-wrap: balance; } .ed-standfirst { margin: 1rem 0 0; max-width: 62ch; font-size: 1.0625rem; color: var(--muted-foreground); } .ed-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 1.25rem; font-size: 0.75rem; color: var(--faint); } .ed-head { padding-block: 1.75rem 2rem; border-bottom: 1px solid var(--border); } /* --- body layout -------------------------------------------------------- */ .ed-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-top: 2.5rem; } @media (min-width: 1024px) { .ed-layout.has-toc { grid-template-columns: minmax(0, 1fr) 15rem; gap: 3.5rem; } } .ed-prose { max-width: 72ch; } .ed-prose h2 { margin: 2.75rem 0 0.875rem; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.025em; font-weight: 600; scroll-margin-top: 5rem; } .ed-prose h2:first-child { margin-top: 0; } .ed-prose h3 { margin: 2rem 0 0.625rem; font-size: 1.0625rem; font-weight: 600; scroll-margin-top: 5rem; } .ed-prose p { margin: 0 0 1rem; color: var(--foreground); font-size: 0.9375rem; } .ed-prose ul { margin: 0 0 1.25rem; padding-left: 1.125rem; } .ed-prose li { margin-bottom: 0.5rem; font-size: 0.9375rem; } .ed-prose li::marker { color: var(--faint); } /* The ancestor is wrapped in :where() so it contributes no specificity at all, leaving this rule at (0,0,1) — weaker than any class. Written the obvious way, `.ed-prose a` is (0,1,1) and outranks `.ed-cta` and `.ed-card`, which are single classes inside the same article. That is not hypothetical: it rendered the call-to-action's label in brand blue on a brand-blue background, and underlined every related-link card. Narrowing the ancestor to `p, li` did not help either, because the cards are list items. */ :where(.ed-prose :is(p, li)) a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } :where(.ed-prose :is(p, li)) a:hover { text-decoration-thickness: 2px; } /* --- code --------------------------------------------------------------- */ .ed-code { margin: 0 0 1.5rem; } /* Captions are whole sentences — "The delegation for example.com: two authoritative nameservers, with the two-day TTL registries commonly apply." — so they are set in sentence case. An uppercase transform at this size is a label treatment; applied to two lines of prose it stops being readable. */ .ed-code figcaption { margin-bottom: 0.5rem; max-width: 62ch; font-size: 0.8125rem; color: var(--muted-foreground); } .ed-code pre { margin: 0; padding: 0.875rem 1rem; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg, 0.625rem); background: var(--surface); } .ed-code code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.8125rem; line-height: 1.7; color: var(--foreground); white-space: pre; } :where(.ed-prose, .ed-card) :not(pre) > code { padding: 0.1em 0.35em; border-radius: 0.3rem; background: var(--muted); font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.875em; } /* --- table of contents -------------------------------------------------- */ .ed-toc { font-size: 0.8125rem; } @media (min-width: 1024px) { .ed-toc { position: sticky; top: 5rem; align-self: start; max-height: calc(100vh - 7rem); overflow-y: auto; } } .ed-toc h2 { margin: 0 0 0.75rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); } .ed-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); } .ed-toc li { margin: 0; } .ed-toc a { display: block; padding: 0.3125rem 0 0.3125rem 0.875rem; margin-left: -1px; border-left: 1px solid transparent; color: var(--muted-foreground); text-decoration: none; } .ed-toc a:hover { color: var(--foreground); border-left-color: var(--brand); } /* --- cards and grids ---------------------------------------------------- */ .ed-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin: 0; padding: 0; list-style: none; } @media (min-width: 640px) { .ed-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .ed-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ed-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ed-card { display: flex; flex-direction: column; gap: 0.375rem; padding: 1rem 1.125rem; border: 1px solid var(--border); border-radius: var(--radius-xl, 0.75rem); background: var(--card); text-decoration: none; color: inherit; height: 100%; } a.ed-card:hover { border-color: var(--brand-border); background: var(--surface); } .ed-card-title { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); } .ed-card-note { font-size: 0.8125rem; color: var(--muted-foreground); } .ed-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.1875rem 0.5rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.6875rem; font-weight: 500; color: var(--muted-foreground); background: var(--surface); white-space: nowrap; } /* --- sections ----------------------------------------------------------- */ .ed-section { padding-top: 2.5rem; } .ed-section > h2 { margin: 0 0 0.25rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.025em; } .ed-section > p.ed-section-note { margin: 0 0 1.25rem; max-width: 62ch; font-size: 0.875rem; color: var(--muted-foreground); } /* --- FAQ ---------------------------------------------------------------- */ .ed-faq { margin: 0; border-top: 1px solid var(--border); } .ed-faq > div { padding: 1.25rem 0; border-bottom: 1px solid var(--border); } .ed-faq dt { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; } .ed-faq dd { margin: 0.5rem 0 0; max-width: 72ch; font-size: 0.9375rem; color: var(--muted-foreground); } /* --- call to action ----------------------------------------------------- */ .ed-run { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2.5rem; padding: 1.25rem 1.375rem; border: 1px solid var(--brand-border); border-radius: var(--radius-2xl, 1rem); background: var(--brand-soft); } .ed-run p { margin: 0; flex: 1 1 18rem; font-size: 0.875rem; color: var(--foreground); } .ed-run strong { font-weight: 600; } /* --- A–Z index ---------------------------------------------------------- */ .ed-alpha { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 1.5rem 0 0; padding: 0; list-style: none; } .ed-alpha a { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; padding: 0.25rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-md, 0.5rem); font-size: 0.8125rem; font-weight: 600; color: var(--muted-foreground); text-decoration: none; } .ed-alpha a:hover { color: var(--foreground); border-color: var(--brand-border); } .ed-letter { padding-top: 2rem; scroll-margin-top: 5rem; } .ed-letter h2 { margin: 0 0 0.75rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; color: var(--faint); } /* --- footer ------------------------------------------------------------- */ /* The application's public footer, in the same three bands: what the product is and where to sign up, then the reference index, then the legal row. */ .ed-footer { border-top: 1px solid var(--border); background: var(--card); padding-block: 3rem 1.5rem; font-size: 0.8125rem; } .ed-footer-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-bottom: 3rem; } @media (min-width: 768px) { .ed-footer-top { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 2rem; } } .ed-footer-blurb { max-width: 25rem; margin: 1rem 0 0; color: var(--muted-foreground); line-height: 1.7; } .ed-footer-note { max-width: 25rem; margin: 0.75rem 0 0; color: var(--faint); font-size: 0.78125rem; line-height: 1.7; } .ed-footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.75rem 0 0; } .ed-footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; border-top: 1px solid var(--border); padding-block: 2.5rem; } @media (min-width: 640px) { .ed-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .ed-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ed-footer h2 { margin: 0 0 0.625rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); } .ed-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; } /* :where() keeps this at (0,1,0) — a single class — so the two buttons in the footer's workspace column keep their own colours. Written as `.ed-footer a` this is (0,2,0) and outranks `.ed-cta`, which rendered the call to action as muted grey text on its near-white fill: the same trap the prose links above fell into, one band lower. */ :where(.ed-footer) a { color: var(--muted-foreground); text-decoration: none; } :where(.ed-footer) a:hover { color: var(--foreground); text-decoration: underline; } /* The buttons are not footer links and must not take the hover underline. */ .ed-footer .ed-cta:hover, .ed-footer .ed-signin:hover { text-decoration: none; } .ed-colophon { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding-block: 1.5rem; border-top: 1px solid var(--border); color: var(--faint); font-size: 0.75rem; } .ed-colophon p { margin: 0; } .ed-colophon-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .ed-colophon-links a { color: var(--muted-foreground); text-decoration: none; } .ed-colophon-links a:hover { color: var(--foreground); } /* --- the checker panel -------------------------------------------------- */ /* The instrument at the top of every tool page: a domain field, a button, and the box the server-rendered result lands in. It sits above the prose because it is what the page is for. A reader who searched "check my SPF record" wants the field first; a reader who came to read scrolls past eight lines. The frame stays put while its contents change — empty, skeleton, result, error — so nothing below it jumps when an answer arrives. */ .ed-check-shell { padding-top: 2rem; } .ed-check-panel { padding: 1.125rem; border: 1px solid var(--border); border-radius: var(--radius-2xl, 1rem); background: var(--card); /* Inherited by everything in the panel and by the result inside it. Half the words here are hostnames and record values with no break points — `mail.protection.outlook.com`, a 300-character TXT record — and at 375px one of them is wider than the screen. `anywhere` rather than `break-word` because only `anywhere` shrinks the element's min-content width, which is what a grid or flex track measures itself against. */ overflow-wrap: anywhere; } @media (min-width: 640px) { .ed-check-panel { padding: 1.375rem 1.5rem; } } .ed-check-heading { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; } .ed-check-note { margin: 0.375rem 0 0; max-width: 62ch; font-size: 0.8125rem; color: var(--muted-foreground); } .ed-check { margin-top: 1.125rem; } .ed-check-row { display: flex; flex-direction: column; gap: 0.75rem; } /* The control cluster is capped while the panel is not. A field the full width of a 1180px shell reads as a page-wide search bar rather than as one input waiting for a domain — but the box below it holds an MX table seven columns wide, and that wants every pixel the shell has. */ @media (min-width: 640px) { .ed-check-row { flex-direction: row; align-items: flex-end; max-width: 40rem; } .ed-check-hint, .ed-check-examples { max-width: 40rem; } } .ed-check-field { display: flex; flex-direction: column; gap: 0.375rem; flex: 1 1 auto; min-width: 0; } @media (min-width: 640px) { .ed-check-field--narrow { flex: 0 0 10rem; } } .ed-check-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-foreground); } .ed-check-input { width: 100%; /* 2.75rem is 44px: the minimum comfortable touch target, and the height the submit button beside it is set to. */ height: 2.75rem; padding-inline: 0.875rem; border: 1px solid var(--border); border-radius: var(--radius-lg, 0.625rem); background: var(--background); color: var(--foreground); font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.9375rem; } .ed-check-input::placeholder { color: var(--muted-foreground); font-family: var(--font-mono, ui-monospace, monospace); } /* :focus rather than :focus-visible — a text field earns its ring whenever it has focus, however the reader got there. */ .ed-check-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); } .ed-check-input[aria-invalid="true"] { border-color: var(--danger); } .ed-check-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--danger-soft); } .ed-check-submit { display: inline-flex; align-items: center; justify-content: center; height: 2.75rem; padding-inline: 1.25rem; border: 0; border-radius: var(--radius-lg, 0.625rem); background: var(--primary); color: var(--primary-foreground); font-size: 0.875rem; font-weight: 500; white-space: nowrap; cursor: pointer; } .ed-check-submit:hover { filter: brightness(1.08); } /* aria-disabled rather than the disabled property: a button that is disabled while the check runs drops the focus of the reader who just clicked it. */ .ed-check-submit[aria-disabled="true"] { cursor: progress; opacity: 0.7; } .ed-check-hint { margin: 0.875rem 0 0; max-width: 62ch; font-size: 0.75rem; color: var(--muted-foreground); } .ed-check-hint code { padding: 0.1em 0.35em; border-radius: 0.3rem; background: var(--muted); font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.9em; } .ed-check-message { margin: 0.5rem 0 0; font-size: 0.75rem; font-weight: 500; color: var(--danger); } .ed-check-message[hidden] { display: none; } .ed-check-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.875rem; } .ed-check-examples-label { font-size: 0.75rem; color: var(--muted-foreground); } .ed-check-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; } .ed-check-chip { display: inline-flex; align-items: center; min-height: 2rem; padding-inline: 0.75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted-foreground); font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.75rem; cursor: pointer; } .ed-check-chip:hover { border-color: var(--brand-border); background: var(--brand-soft); color: var(--brand); } /* A finger needs more than a mouse pointer does. */ @media (pointer: coarse) { .ed-check-chip { min-height: 2.25rem; padding-inline: 0.875rem; } } /* Empty before the first run, so the panel is a form and nothing else. */ .ed-check-result:empty { display: none; } .ed-check-result { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } /* --- the waiting state -------------------------------------------------- */ /* A guest run is synchronous and can take seconds — a live SMTP conversation is not fast — so the wait is shaped like the answer rather than spun. The bars are the title, the verdict chip and four table rows, at the sizes the real result uses, so nothing below moves when it lands. */ .ed-check-skeleton { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 1.125rem; border: 1px solid var(--border); border-radius: var(--radius-lg, 0.625rem); background: var(--surface); } .ed-check-skel-head, .ed-check-skel-row { display: flex; align-items: center; gap: 0.75rem; } .ed-check-skel { display: block; height: 0.75rem; border-radius: 0.375rem; background: var(--muted); animation: ed-check-pulse 1.4s ease-in-out infinite; } .ed-check-skel--title { width: 11rem; height: 1rem; } .ed-check-skel--chip { width: 4.5rem; height: 1.25rem; border-radius: 999px; } .ed-check-skel--short { flex: 0 0 3.5rem; } .ed-check-skel--wide { flex: 1 1 auto; } .ed-check-skel--tail { flex: 0 0 4rem; } @keyframes ed-check-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { .ed-check-skel { animation: none; } } /* --- the failure states ------------------------------------------------- */ .ed-check-error { padding: 1rem 1.125rem; border: 1px solid var(--danger-border); border-radius: var(--radius-lg, 0.625rem); background: var(--danger-soft); } .ed-check-error:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .ed-check-error-title { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--foreground); } .ed-check-error-note { margin: 0.375rem 0 0; font-size: 0.8125rem; color: var(--muted-foreground); } .ed-check-countdown { font-variant-numeric: tabular-nums; } .ed-check-retry { display: inline-flex; align-items: center; min-height: 2.25rem; margin-top: 0.875rem; padding-inline: 0.875rem; border: 1px solid var(--border); border-radius: var(--radius-md, 0.5rem); background: var(--card); color: var(--foreground); font-size: 0.8125rem; font-weight: 500; cursor: pointer; } .ed-check-retry:hover { border-color: var(--brand-border); color: var(--brand); } .ed-check-retry[disabled] { opacity: 0.55; cursor: not-allowed; } .ed-check-retry[disabled]:hover { border-color: var(--border); color: var(--foreground); } /* --- no JavaScript ------------------------------------------------------ */ .ed-check-noscript { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); font-size: 0.8125rem; color: var(--muted-foreground); } .ed-check-noscript p { margin: 0 0 0.625rem; max-width: 72ch; } .ed-check-noscript p:last-child { margin-bottom: 0; } .ed-check-noscript strong { color: var(--foreground); font-weight: 600; } .ed-check-noscript code { padding: 0.1em 0.35em; border-radius: 0.3rem; background: var(--muted); font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.9em; } .ed-check-noscript a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; } /* Read by a screen reader, not by an eye: the one-sentence summary of a run, and the caption every result table carries. */ .ed-check-announce, .ed-res-caption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- the rendered result ------------------------------------------------ */ /* Everything below styles the fragment the server sends back. The class contract is stated in full at the top of templates/result.gohtml; if a class appears there and not here, the result renders unstyled. The result is not a card of its own. It is content inside the panel's frame, separated from the form by one hairline, with its inner blocks — tables, key-value panels, transcripts — sitting on --surface so they read as insets rather than as a stack of boxes. */ .ed-res-title { margin: 0; /* Inline-block so the focus ring below wraps the words rather than the whole column, where it reads as another text field. */ display: inline-block; max-width: 100%; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; } /* The island moves focus here after a run, so the ring has to exist even though a heading is not otherwise focusable. */ .ed-res-title:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 0.25rem; } .ed-res-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.625rem 0 0; } .ed-res-timing { font-size: 0.75rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; } .ed-res-error { margin-top: 1rem; padding: 0.875rem 1rem; border: 1px solid var(--danger-border); border-radius: var(--radius-lg, 0.625rem); background: var(--danger-soft); } .ed-res-error p { margin: 0; font-size: 0.875rem; color: var(--foreground); } /* --- chips -------------------------------------------------------------- */ /* Never colour alone: every chip carries its word, and the tone only tints the word it is already saying. */ .ed-res-chip { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted-foreground); font-size: 0.6875rem; font-weight: 500; white-space: nowrap; } .ed-res-chip--ok { color: var(--success); background: var(--success-soft); border-color: var(--success-border); } .ed-res-chip--warn { color: var(--warning); background: var(--warning-soft); border-color: var(--warning-border); } .ed-res-chip--bad { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-border); } .ed-res-chip--info { color: var(--info); background: var(--info-soft); border-color: var(--info-border); } .ed-res-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0 0 0.75rem; } .ed-res-group { margin-top: 0.875rem; } .ed-res-group .ed-res-chips:last-child { margin-bottom: 0; } /* --- findings ----------------------------------------------------------- */ .ed-res-findings { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-lg, 0.625rem); background: var(--surface); } .ed-res-finding { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 0.625rem; row-gap: 0.125rem; padding: 0.625rem 0.875rem; } .ed-res-finding + .ed-res-finding { border-top: 1px solid var(--border); } .ed-res-finding > .ed-res-chip { grid-column: 1; grid-row: 1; margin-top: 0.0625rem; } .ed-res-finding-title { grid-column: 2; grid-row: 1; font-size: 0.875rem; font-weight: 500; } .ed-res-finding-note { grid-column: 2; grid-row: 2; font-size: 0.8125rem; color: var(--muted-foreground); } /* --- sections ----------------------------------------------------------- */ .ed-res-section { margin-top: 1.5rem; } /* Section headings are labels rather than prose headings: a result is a dense instrument panel, and at this size they index the blocks without competing with the values, which are what the reader came for. Not uppercased, unlike the labels above them, because several of these headings carry data — "SPF record — TXT @ example.com" — and a domain set in capitals reads as shouting and loses the shape a reader recognises it by. */ .ed-res-heading { margin: 0 0 0.625rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; color: var(--muted-foreground); } .ed-res-subheading { margin: 0 0 0.375rem; font-size: 0.75rem; font-weight: 600; color: var(--muted-foreground); } .ed-res-note { margin: 0 0 0.75rem; max-width: 72ch; font-size: 0.8125rem; color: var(--muted-foreground); } /* --- blocks ------------------------------------------------------------- */ .ed-res-empty { padding: 1rem 1.125rem; border: 1px dashed var(--border); border-radius: var(--radius-lg, 0.625rem); background: var(--surface); } .ed-res-empty-title { margin: 0; font-size: 0.875rem; font-weight: 500; } .ed-res-empty-note { margin: 0.25rem 0 0; max-width: 62ch; font-size: 0.8125rem; color: var(--muted-foreground); } .ed-res-record, .ed-res-details, .ed-res-kv, .ed-res-list, .ed-res-scroll { border: 1px solid var(--border); border-radius: var(--radius-lg, 0.625rem); background: var(--surface); } .ed-res-record, .ed-res-details { overflow: hidden; } .ed-res-record-label { margin: 0; padding: 0.5rem 0.875rem; border-bottom: 1px solid var(--border); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-foreground); } .ed-res-pre { margin: 0; padding: 0.75rem 0.875rem; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.75rem; line-height: 1.7; color: var(--foreground); /* A published record is one long line with no useful break points, so it wraps rather than pushing the page sideways. */ white-space: pre-wrap; overflow-wrap: anywhere; } /* The horizontal-scroll box. A wide table scrolls inside this, never the page: at 375 px an MX table is wider than the viewport and a page that scrolled sideways would take the header and the prose with it. */ .ed-res-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; } .ed-res-table { width: 100%; /* Below this the columns compress into unreadable stacks, so the box scrolls instead. On any viewport wider than the box it has no effect. */ min-width: 30rem; border-collapse: collapse; font-size: 0.8125rem; } .ed-res-table th { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); text-align: left; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); white-space: nowrap; } .ed-res-table td { padding: 0.5rem 0.75rem; vertical-align: top; color: var(--foreground); } .ed-res-table tbody tr + tr td { border-top: 1px solid var(--border); } .ed-res-right { text-align: right; } .ed-res-mono { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.95em; overflow-wrap: anywhere; } .ed-res-muted { color: var(--muted-foreground); } .ed-res-num { font-variant-numeric: tabular-nums; } .ed-res-kv-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.125rem; padding: 0.5rem 0.875rem; } @media (min-width: 480px) { .ed-res-kv-row { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 0.25rem 1rem; } } .ed-res-kv-row + .ed-res-kv-row { border-top: 1px solid var(--border); } .ed-res-kv-key { font-size: 0.75rem; color: var(--muted-foreground); } .ed-res-kv-value { margin: 0; font-size: 0.8125rem; color: var(--foreground); overflow-wrap: anywhere; } .ed-res-kv-value--ok { color: var(--success); } .ed-res-kv-value--warn { color: var(--warning); } .ed-res-kv-value--bad { color: var(--danger); } .ed-res-kv-value--neutral { color: var(--muted-foreground); } .ed-res-list { margin: 0; padding: 0; list-style: none; } .ed-res-list-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; padding: 0.5rem 0.875rem; } .ed-res-list-row + .ed-res-list-row { border-top: 1px solid var(--border); } .ed-res-list-label { flex: 0 0 auto; min-width: 7rem; font-size: 0.8125rem; font-weight: 500; } .ed-res-list-value { flex: 1 1 8rem; min-width: 0; font-size: 0.75rem; color: var(--muted-foreground); } .ed-res-list-meta { margin-left: auto; font-size: 0.75rem; color: var(--muted-foreground); } /* --- SMTP transcript ---------------------------------------------------- */ /* Inside .ed-res-scroll, so a long banner scrolls rather than wrapping: a wrapped SMTP dialogue loses the alignment that makes it readable. */ .ed-res-transcript { white-space: pre; overflow-wrap: normal; } .ed-res-line { display: block; } .ed-res-line--meta { color: var(--muted-foreground); } .ed-res-line--server { color: var(--foreground); } .ed-res-line--client { color: var(--brand); } .ed-res-line-prefix { display: inline-block; width: 1.75rem; color: var(--muted-foreground); user-select: none; } /* --- disclosure --------------------------------------------------------- */ .ed-res-summary { padding: 0.5rem 0.875rem; font-size: 0.8125rem; font-weight: 500; color: var(--foreground); cursor: pointer; } .ed-res-details[open] .ed-res-summary { border-bottom: 1px solid var(--border); } .ed-res-details .ed-res-pre { max-height: 22rem; overflow: auto; } /* --- rail and call to action -------------------------------------------- */ .ed-res-rail { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } .ed-res-rail-title { margin: 0 0 0.625rem; font-size: 0.8125rem; font-weight: 600; color: var(--foreground); overflow-wrap: anywhere; } .ed-res-rail-links { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; } .ed-res-link { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; } /* In the rail the links are destinations, not references, so they take the chip treatment the example domains above them use. */ .ed-res-rail-links .ed-res-link { display: inline-flex; align-items: center; min-height: 2rem; padding-inline: 0.75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted-foreground); font-size: 0.75rem; font-weight: 500; text-decoration: none; } .ed-res-rail-links .ed-res-link:hover { border-color: var(--brand-border); background: var(--brand-soft); color: var(--brand); } @media (pointer: coarse) { .ed-res-rail-links .ed-res-link { min-height: 2.25rem; } } .ed-res-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem; margin-top: 1.25rem; padding: 1rem 1.125rem; border: 1px solid var(--brand-border); border-radius: var(--radius-xl, 0.75rem); background: var(--brand-soft); } .ed-res-cta-note { flex: 1 1 16rem; margin: 0; font-size: 0.8125rem; color: var(--foreground); } .ed-res-cta-link { display: inline-flex; align-items: center; justify-content: center; height: 2.25rem; padding-inline: 0.875rem; border-radius: var(--radius-md, 0.5rem); background: var(--primary); color: var(--primary-foreground); font-size: 0.8125rem; font-weight: 500; text-decoration: none; white-space: nowrap; } .ed-res-cta-link:hover { filter: brightness(1.08); } /* --- focus and motion --------------------------------------------------- */ .ed-page :where(a, button, summary):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 0.25rem; } @media (prefers-reduced-motion: reduce) { .ed-page * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* --- application pages, as a crawler reads them -------------------------- The bodies static.go renders into the shell's mount point: the home page, the legal pages, contact, status and the rest. They wear the same frame and the same cards as the corpus; the rules below are only for the shapes the corpus does not have — a row of actions under a title, a strip of facts, a gate's chips, numbered steps, two columns of plain links, and a callout. Every value is still a token from the application's stylesheet. */ .ed-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; } .ed-section .ed-actions { margin-top: 1.25rem; } .ed-micro { margin: 0 0 0.5rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); } .ed-section.is-sub { padding-top: 2rem; } .ed-section.is-sub > h3 { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; } .ed-section > p { margin: 0 0 1rem; max-width: 72ch; font-size: 0.9375rem; } .ed-bullets { margin: 0 0 1.25rem; padding-left: 1.125rem; max-width: 72ch; font-size: 0.9375rem; } .ed-bullets li { margin-bottom: 0.5rem; } .ed-bullets li::marker { color: var(--faint); } .ed-callout { margin: 0 0 1.25rem; padding: 1rem 1.25rem; max-width: 72ch; border: 1px solid var(--brand-border); border-radius: var(--radius-xl, 0.75rem); background: var(--brand-soft); font-size: 0.9375rem; } /* The prose column is the legal pages, which set their own paragraph rules through .ed-prose; the section spacing above would double them. */ .ed-static-prose .ed-section { padding-top: 0; } .ed-static-prose .ed-section > h2 { margin: 2.75rem 0 0.875rem; font-size: 1.375rem; } .ed-static-prose .ed-section:first-child > h2 { margin-top: 0; } /* The facts strip: value over label, the dividers drawn by the gap over a border-coloured background so they vanish when the cells stack. */ .ed-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 1.5rem 0 0; max-width: 60rem; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl, 0.75rem); background: var(--border); } @media (min-width: 640px) { .ed-facts { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } } .ed-facts > div { display: flex; flex-direction: column-reverse; padding: 0.875rem 1rem; background: var(--surface); } .ed-facts dt { margin-top: 0.25rem; font-size: 0.75rem; color: var(--muted-foreground); } .ed-facts dd { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; } .ed-facts dd.is-mono { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.9375rem; letter-spacing: -0.01em; } @media (min-width: 1024px) { .ed-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 640px) and (max-width: 1023px) { .ed-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } li.ed-card { gap: 0.375rem; } .ed-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.5rem 0 0; padding: 0; list-style: none; } a.ed-chip { text-decoration: none; } a.ed-chip:hover { border-color: var(--brand-border); background: var(--brand-soft); color: var(--brand); } .ed-steps { counter-reset: step; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin: 0; padding: 0; list-style: none; } @media (min-width: 640px) { .ed-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .ed-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ed-steps li { counter-increment: step; padding: 1rem 1.125rem; border: 1px solid var(--border); border-radius: var(--radius-xl, 0.75rem); background: var(--card); } .ed-steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-md, 0.5rem); background: var(--surface); font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.75rem; font-weight: 600; color: var(--muted-foreground); } .ed-steps h3 { margin: 0.75rem 0 0.25rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; } .ed-steps p { margin: 0; font-size: 0.8125rem; color: var(--muted-foreground); } .ed-lists { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 2rem; } @media (min-width: 768px) { .ed-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ed-lists h3 { margin: 0 0 0.75rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); } .ed-lists ul { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; } .ed-lists a { font-size: 0.875rem; font-weight: 500; color: var(--foreground); text-decoration: none; } .ed-lists a:hover { text-decoration: underline; } .ed-lists span { display: block; font-size: 0.8125rem; color: var(--muted-foreground); }