/* ==========================================================================
ndxer design system -- Orange & Graphite (owner-approved 2026-09-24).
Supersedes the original Paper & Lime palette and oversized display type.
See docs/superpowers/ledgers/2026-09-24-orange-graphite-design.md.
Tokens remain the shared source for Bootstrap, forms, and /top/ charts.
Bright accent fills use dark text; deep orange is used for text on paper.
Light theme only. No build step, external fonts, or extra framework.
========================================================================== */
/* Self-hosted variable fonts (ndxer/static/fonts/README.md -- source URLs,
versions, licences, and the subsetting command that produced them).
font-display: swap -- the fallback stack in --ndx-sans/--ndx-mono is
metric-similar enough that the swap is not a layout jolt, and a blocked
font must never blank the page (UX §8.4).
Deleting or renaming one of these files without editing the matching
url() breaks `collectstatic` in production, not just the look: whitenoise's
CompressedManifestStaticFilesStorage resolves every url() here. */
@font-face {
font-family: "Space Grotesk";
src: url("../fonts/space-grotesk-var-latin.e479274125a5.woff2") format("woff2-variations");
font-weight: 300 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("../fonts/inter-var-latin.eb083991cee7.woff2") format("woff2-variations");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("../fonts/jetbrains-mono-var-latin.9b077b9e9749.woff2") format("woff2-variations");
font-weight: 100 800;
font-style: normal;
font-display: swap;
}
/* ==========================================================================
Tokens (UX §5.1)
========================================================================== */
:root {
/* ---- surfaces & ink ---- */
--ndx-paper: #f0efeb;
--ndx-surface: #ffffff;
--ndx-sunken: #e3e2de;
--ndx-ink: #161616;
--ndx-ink-muted: #62605c;
--ndx-ink-onink: #ecebe7;
--ndx-border: #d4d2cc;
--ndx-border-strong: #827e76;
/* Orange fills, darker orange for readable text and focus on paper. */
--ndx-accent: #e74722;
--ndx-accent-hover: #ef5b38;
--ndx-accent-press: #e74722;
--ndx-accent-ink: #161616;
--ndx-accent-soft: #fbe4dc;
--ndx-accent-deep: #a83215;
--ndx-select-bg: #f9c8b8;
/* ---- semantics. The accent never signals state; these do. ---- */
--ndx-success: #106b2e;
--ndx-success-soft: #e9f6ec;
--ndx-warning: #8a5a00;
--ndx-warning-soft: #fff3cf;
--ndx-danger: #c0182a;
--ndx-danger-soft: #fce9e7;
--ndx-info: #0b5fd6;
--ndx-info-soft: #e7f1fe;
/* Class colours (owner-locked 2026-10-10,
docs/superpowers/specs/2026-10-10-row-actions-and-class-colours.md).
Okabe-Ito hues so the four classes stay apart under the common colour
vision deficiencies; -text is the darker label colour that keeps 4.5:1
on -soft. One meaning per colour everywhere: tabs, pills, menus, toasts,
facets and the graph. The brand accent is never a class colour. */
--ndx-class-subject: #009e73;
--ndx-class-subject-text: #007a58;
--ndx-class-subject-soft: #d9f2ea;
--ndx-class-review: #e69f00;
--ndx-class-review-text: #8a5a00;
--ndx-class-review-soft: #fcefd2;
--ndx-class-infrastructure: #0072b2;
--ndx-class-infrastructure-text: #005a8c;
--ndx-class-infrastructure-soft: #dceaf5;
--ndx-class-dismissed: #9a9a9a;
--ndx-class-dismissed-text: #555555;
--ndx-class-dismissed-soft: #ebebeb;
/* ---- type ---- */
--ndx-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--ndx-display: "Space Grotesk", var(--ndx-sans);
--ndx-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
/* Compact display type approved 2026-09-24; data remains the focus. */
--ndx-fs-display: clamp(2rem, 1.6rem + 1vw, 2.5rem);
--ndx-fs-h1: 2rem;
--ndx-fs-h2: 1.75rem;
--ndx-fs-h3: 1.375rem;
--ndx-fs-h4: 1.0625rem;
--ndx-fs-eyebrow: 0.75rem;
--ndx-fs-lead: 1rem;
--ndx-fs-body: 1rem;
--ndx-fs-small: 0.875rem;
--ndx-fs-table: 0.9rem;
--ndx-fs-th: 0.75rem;
--ndx-fs-code: 0.875rem;
--ndx-fs-meta: 0.8125rem;
/* One measure for all running prose (68ch ~ 600-650px at body size).
Before this token, .lead had 62ch, the footer 56ch, and .ndx-section
paragraphs nothing at all, so landing copy ran ~170 characters wide. */
--ndx-measure: 68ch;
/* ---- shape. Tight radii read as instrument, not as app-store icon. ---- */
--ndx-radius-sm: 3px;
--ndx-radius: 4px;
--ndx-radius-lg: 6px;
/* The only shadow in the system, and only for layers that float
(dropdown, modal, offcanvas). Cards never get one. */
--ndx-shadow-pop: 0 1px 2px rgb(18 22 27 / 6%), 0 8px 24px rgb(18 22 27 / 10%);
/* ================= Bootstrap 5.3 overrides ================= */
--bs-body-bg: var(--ndx-paper);
--bs-body-color: var(--ndx-ink);
--bs-body-font-family: var(--ndx-sans);
--bs-body-font-size: var(--ndx-fs-body);
--bs-body-line-height: 1.6;
--bs-font-monospace: var(--ndx-mono);
--bs-emphasis-color: var(--ndx-ink);
--bs-heading-color: var(--ndx-ink);
--bs-secondary-color: var(--ndx-ink-muted);
--bs-secondary-bg: var(--ndx-sunken);
--bs-tertiary-bg: var(--ndx-sunken);
--bs-tertiary-color: var(--ndx-ink-muted);
--bs-border-color: var(--ndx-border);
--bs-border-color-translucent: var(--ndx-border);
--bs-border-radius: var(--ndx-radius);
--bs-border-radius-sm: var(--ndx-radius-sm);
--bs-border-radius-lg: var(--ndx-radius-lg);
--bs-border-radius-xl: var(--ndx-radius-lg);
--bs-code-color: var(--ndx-ink);
--bs-highlight-bg: var(--ndx-accent-soft);
/* The --bs-*-rgb triples must stay literal: Bootstrap feeds them to
rgba(), which cannot parse a hex, so they are the one place a colour
is written twice. Keep each triple in sync with its --ndx-* token. */
--bs-primary: var(--ndx-accent);
--bs-primary-rgb: 231, 71, 34;
--bs-primary-text-emphasis: var(--ndx-accent-deep);
--bs-primary-bg-subtle: var(--ndx-accent-soft);
--bs-primary-border-subtle: var(--ndx-accent-press);
/* Links resolve to ink; the underline (§4.6) carries the affordance. */
--bs-link-color: var(--ndx-ink);
--bs-link-color-rgb: 18, 22, 27;
--bs-link-hover-color: var(--ndx-ink);
--bs-link-hover-color-rgb: 18, 22, 27;
--bs-success: var(--ndx-success);
--bs-success-rgb: 16, 107, 46;
--bs-success-bg-subtle: var(--ndx-success-soft);
--bs-success-text-emphasis: var(--ndx-success);
--bs-warning: var(--ndx-warning);
--bs-warning-rgb: 138, 90, 0;
--bs-warning-bg-subtle: var(--ndx-warning-soft);
--bs-warning-text-emphasis: var(--ndx-warning);
--bs-danger: var(--ndx-danger);
--bs-danger-rgb: 192, 24, 42;
--bs-danger-bg-subtle: var(--ndx-danger-soft);
--bs-danger-text-emphasis: var(--ndx-danger);
--bs-info: var(--ndx-info);
--bs-info-rgb: 11, 95, 214;
--bs-info-bg-subtle: var(--ndx-info-soft);
--bs-info-text-emphasis: var(--ndx-info);
--bs-focus-ring-width: 2px;
--bs-focus-ring-color: var(--ndx-accent-soft);
}
/* ==========================================================================
Base type (UX §5.2)
========================================================================== */
body {
font-size: var(--ndx-fs-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Element selectors and Bootstrap's .h1-.h6 utility classes share one
rule set. Bootstrap ships .h1-.h6 with their own (vw-clamped) font-size,
and a class selector beats an element selector no matter which
stylesheet loads second; every /app/* page writes `
` to get
a smaller page title (design system §6.7 "Dashboard <- h1, 1.5rem (not
display)"), and would otherwise escape this type scale entirely. Listing
the classes here means the class picks a SIZE, never a different scale. */
h1,
h2,
h3,
.h1,
.h2,
.h3 {
font-family: var(--ndx-display);
font-weight: 600;
}
h4,
h5,
h6,
.h4,
.h5,
.h6 {
font-family: var(--ndx-sans);
font-weight: 600;
}
h1,
.h1 {
font-size: var(--ndx-fs-h1);
line-height: 1.15;
letter-spacing: -0.02em;
}
h2,
.h2 {
font-size: var(--ndx-fs-h2);
line-height: 1.2;
letter-spacing: -0.015em;
}
h3,
.h3 {
font-size: var(--ndx-fs-h3);
line-height: 1.3;
letter-spacing: -0.01em;
}
h4,
.h4,
.h5 {
font-size: var(--ndx-fs-h4);
line-height: 1.35;
}
.h6 {
font-size: var(--ndx-fs-small);
line-height: 1.4;
}
/* Hero only. Bootstrap's .display-6 is remapped rather than a new class so
core/home.html's existing markup keeps working. */
.display-6,
.ndx-display {
font-family: var(--ndx-display);
font-size: var(--ndx-fs-display);
font-weight: 600;
line-height: 1.12;
letter-spacing: -0.035em;
text-wrap: balance;
}
.lead {
font-size: var(--ndx-fs-lead);
line-height: 1.55;
font-weight: 400;
color: var(--ndx-ink-muted);
}
/* The measure, applied once. `main` carries .ndx-prose (base.html), so
every paragraph under it is capped; wide layouts (tables, cards, the
plan grid) are unaffected because only
and the FAQ body are listed. */
.ndx-prose p,
.ndx-prose .accordion-body,
.ndx-prose .lead,
.ndx-band p,
.ndx-footer p {
max-inline-size: var(--ndx-measure);
}
/* Uppercase mono section label. Replaces a small heading, never replaces
the real
-- put it in a
above the heading or inside the h2 as a
, so the document outline stays correct for screen readers. */
.ndx-eyebrow {
font-family: var(--ndx-mono);
font-size: var(--ndx-fs-eyebrow);
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ndx-ink-muted);
}
code,
kbd,
pre,
samp {
font-family: var(--ndx-mono);
}
/* Inline is a chip, not a syntax fragment: monospace + a faint
sunken plate, never its own hue. overflow-wrap:anywhere lets a long key
prefix or IPv6 literal break mid-token at 320px instead of overflowing
(UX §8.3). */
code {
color: inherit;
font-size: var(--ndx-fs-code);
overflow-wrap: anywhere;
}
:not(pre) > code {
padding: 0.08em 0.32em;
background: var(--ndx-sunken);
border: 1px solid var(--ndx-border);
border-radius: var(--ndx-radius-sm);
}
/* ==========================================================================
Layout bands (UX §6: full-bleed sections + vertical rhythm)
========================================================================== */
/* Vertical rhythm. Sections own only their TOP space and adjacent
sections share one hairline, so two stacked sections never produce the
160px void the old "5rem bottom + 5rem top" arithmetic did (2026-08-23
polish round, craft review #5). The hairline is the section grammar:
eyebrow/heading -> content, separated by one 1px rule, every time. The
first section after the hero gets the rule too; the hero itself has no
rule above it. Templates must NOT patch spacing with pt-0/mt-* utilities
-- that was the previous arrangement and it is what made the page read
as a stack of unrelated objects. */
.ndx-section {
padding-block: 2.5rem 0;
margin-block-end: 2.5rem;
border-block-start: 1px solid var(--ndx-border);
}
/* The landing/pricing header band. Paper, no texture: the 24px grid and
the scanline overlay that used to live here were removed in the
2026-08-23 polish round as the most generic "developer tool" device on
the page (owner's call: "too cliché -- do something less obvious or do
nothing"). Nothing is the answer; whitespace and the display size carry
it. Do not reintroduce a background pattern without a new owner ruling. */
.ndx-hero {
padding-block: 3rem 2.5rem;
}
/* Copy stays readable within the compact split hero. */
.ndx-hero__copy {
max-inline-size: 44rem;
}
/* The live corpus totals under the hero banner (2026-09-17, core/home.html).
Paper and hairlines like the rest of that page: a rule above the row, a
rule between the figures, no plate, no band and no chart -- the trend line
stays on /top/, which already loads Chart.js for it. Capped to the
banner's own 960px (.ndx-term--hero) so the numbers sit under the frame
instead of running the full container width. */
.ndx-totals {
max-inline-size: 960px;
margin-block-start: 2rem;
}
.ndx-totals__figures {
display: grid;
gap: 0 1.5rem;
margin-block: 0.75rem 0.6rem;
border-block-start: 1px solid var(--ndx-border);
}
/* One figure: label over a display-size number -- the readout shape of the
app's .ndx-stat card (§6.7) without the card, since the marketing page has
no cards. Stacked with a hairline between at phone width; three columns
with the hairline between them from md up. */
.ndx-totals__figure {
padding-block: 0.9rem;
}
.ndx-totals__figure + .ndx-totals__figure {
border-block-start: 1px solid var(--ndx-border);
}
.ndx-totals__figure dt {
font-family: var(--ndx-mono);
font-size: var(--ndx-fs-eyebrow);
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ndx-ink-muted);
}
/* `tabular-nums`: three counts of different magnitudes are read as a set,
and proportional digits make them look mis-aligned in the same row. */
.ndx-totals__figure dd {
margin: 0;
font-family: var(--ndx-display);
font-size: 1.75rem;
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
/* The `~` is a marker, not an abbreviation cue: Bootstrap's dotted underline
on abbr[title] reads as a typo next to a number. */
.ndx-totals__figure abbr[title] {
text-decoration: none;
cursor: help;
}
.ndx-totals__note {
margin: 0;
font-size: var(--ndx-fs-small);
color: var(--ndx-ink-muted);
}
@media (min-width: 768px) {
.ndx-totals__figures {
grid-template-columns: repeat(3, 1fr);
}
.ndx-totals__figure + .ndx-totals__figure {
border-block-start: 0;
border-inline-start: 1px solid var(--ndx-border);
padding-inline-start: 1.5rem;
}
}
/* Ink bands group the public insights invitation and closing signup CTA. */
.ndx-band {
padding-block: 3rem;
padding-inline: 1.5rem;
background: var(--ndx-ink);
color: var(--ndx-ink-onink);
border-block-start: 3px solid var(--ndx-accent);
border-radius: var(--ndx-radius-lg);
}
.ndx-band h1,
.ndx-band h2,
.ndx-band h3 {
color: var(--ndx-paper);
}
/* Keep dark primary-button text separate from light links on ink bands. */
.ndx-band a:not(.btn) {
color: var(--ndx-paper);
text-decoration-color: var(--ndx-accent);
text-decoration-thickness: 2px;
text-underline-offset: 0.18em;
}
/* Paper callout: a statement set large with a strong rule above and
below, for the one paragraph on the site that is a promise ("what ndxer
does not claim"). Replaces the first ink band. No background, no icon:
the size and the rules are the emphasis. */
.ndx-callout {
padding-block: 2.5rem;
margin-block: 2.5rem;
border-block: 1px solid var(--ndx-border-strong);
}
.ndx-callout p {
font-size: var(--ndx-fs-lead);
line-height: 1.5;
}
/* The callout owns its bottom rule, so the section after it must not draw
a second one 2.5rem below. */
.ndx-callout + .ndx-section {
border-block-start: 0;
}
/* Three-up feature row: hairline between columns instead of three floating
paragraphs (brand review #5). Bootstrap's .row/.col-md-4 still do the
wrapping; this only draws the rule on the columns from md up. */
@media (min-width: 768px) {
.ndx-section {
padding-block: 4rem 0;
margin-block-end: 4rem;
}
.ndx-hero {
padding-block: 4rem 3rem;
}
.ndx-band {
padding-block: 4rem;
padding-inline: 2.5rem;
}
.ndx-callout {
padding-block: 3rem;
margin-block: 4rem;
}
.ndx-features > [class*="col-"] + [class*="col-"] {
border-inline-start: 1px solid var(--ndx-border);
padding-inline-start: 1.5rem;
}
}
/* ==========================================================================
Navbar (UX §5.3)
========================================================================== */
/* The 3px accent rule at the top of every page: the single loudest brand
mark on the site, and it costs no markup. Implemented as an inset shadow
so it does not disturb the navbar's own border-bottom. */
.navbar {
--bs-navbar-color: var(--ndx-ink-muted);
--bs-navbar-hover-color: var(--ndx-ink);
--bs-navbar-active-color: var(--ndx-ink);
--bs-navbar-brand-color: var(--ndx-ink);
--bs-navbar-brand-hover-color: var(--ndx-ink);
--bs-navbar-padding-y: 0.6rem;
background: var(--ndx-paper);
border-bottom: 1px solid var(--ndx-border);
box-shadow: inset 0 3px 0 var(--ndx-accent);
}
.navbar .nav-link {
position: relative;
font-size: var(--ndx-fs-small);
font-weight: 500;
padding-inline: 0.7rem;
}
/* Active page: ink text + an accent-deep rule drawn ON the navbar's bottom
edge (not inside the link's padding box, where it floated 8px above the
navbar rule -- craft review #12). Two signals (weight and underline) so it
is never colour-alone; aria-current is already on the element
(components/nav.html). The offset reaches past the link's own padding and
the navbar's padding-y to sit on the 1px border. Only from md up, where
the links are in a row; in the collapsed menu they stack and the rule
would draw between items. */
.navbar .nav-link[aria-current="page"] {
color: var(--ndx-ink);
font-weight: 600;
}
@media (min-width: 768px) {
.navbar .nav-link[aria-current="page"]::after {
content: "";
position: absolute;
inset-inline: 0.7rem;
inset-block-end: calc(-1 * var(--bs-navbar-padding-y) - 1px);
block-size: 2px;
background: var(--ndx-accent-deep);
}
}
/* Anonymous nav: "Sign up" is the one button in the bar so the route into
the product is visible without reading the link labels (UX review #11);
"Log in" stays a text link. */
.navbar .ndx-nav-cta {
margin-inline-start: 0.35rem;
}
.dropdown-menu {
--bs-dropdown-border-color: var(--ndx-border);
--bs-dropdown-border-radius: var(--ndx-radius);
--bs-dropdown-link-active-bg: var(--ndx-accent-soft);
--bs-dropdown-link-active-color: var(--ndx-ink);
--bs-dropdown-font-size: var(--ndx-fs-small);
box-shadow: var(--ndx-shadow-pop);
}
/* The account menu shows an email address -- mono, and truncated so a long
address cannot blow out the navbar at 768px. */
#ndx-account-menu {
font-family: var(--ndx-mono);
font-size: var(--ndx-fs-meta);
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
/* The ellipsis lives on an inner span so the toggle's own ::after caret is
not clipped by overflow: hidden (it rendered as a stub before). */
#ndx-account-menu > .ndx-nav-email {
max-inline-size: 22ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ==========================================================================
Buttons (UX §5.4)
========================================================================== */
/* Shared geometry. Square-ish, mono-adjacent weight, no gradient. */
.btn {
--bs-btn-border-radius: var(--ndx-radius);
--bs-btn-font-size: var(--ndx-fs-small);
--bs-btn-font-weight: 500;
--bs-btn-padding-x: 1rem;
--bs-btn-padding-y: 0.5rem;
--bs-btn-focus-shadow-rgb: 231, 71, 34;
}
.btn-lg {
--bs-btn-font-size: var(--ndx-fs-body);
--bs-btn-padding-x: 1.35rem;
--bs-btn-padding-y: 0.65rem;
}
.btn-sm {
--bs-btn-font-size: var(--ndx-fs-meta);
--bs-btn-padding-x: 0.7rem;
--bs-btn-padding-y: 0.3rem;
}
/* Primary actions: bright orange with dark text, including hover and press. */
.btn-primary {
--bs-btn-color: var(--ndx-accent-ink);
--bs-btn-bg: var(--ndx-accent);
--bs-btn-border-color: var(--ndx-accent-press);
--bs-btn-hover-color: var(--ndx-accent-ink);
--bs-btn-hover-bg: var(--ndx-accent-hover);
--bs-btn-hover-border-color: var(--ndx-accent-press);
--bs-btn-active-color: var(--ndx-accent-ink);
--bs-btn-active-bg: var(--ndx-accent-press);
--bs-btn-active-border-color: var(--ndx-accent-deep);
--bs-btn-active-shadow: none;
--bs-btn-disabled-color: var(--ndx-ink-muted);
--bs-btn-disabled-bg: var(--ndx-sunken);
--bs-btn-disabled-border-color: var(--ndx-border);
--bs-btn-focus-shadow-rgb: 231, 71, 34;
}
/* SECONDARY = ink outline. Both Bootstrap outline classes map here so the
existing templates (pricing toggle uses .btn-outline-secondary, plan_card
uses .btn-outline-primary) need no edits. */
.btn-outline-primary,
.btn-outline-secondary {
--bs-btn-color: var(--ndx-ink);
--bs-btn-border-color: var(--ndx-border-strong);
--bs-btn-bg: transparent;
--bs-btn-hover-color: var(--ndx-ink);
--bs-btn-hover-bg: var(--ndx-accent-soft);
--bs-btn-hover-border-color: var(--ndx-ink);
--bs-btn-active-color: var(--ndx-ink);
--bs-btn-active-bg: var(--ndx-accent-soft);
--bs-btn-active-border-color: var(--ndx-ink);
--bs-btn-active-shadow: none;
--bs-btn-disabled-color: var(--ndx-ink-muted);
--bs-btn-disabled-border-color: var(--ndx-border);
--bs-gradient: none;
}
/* Pressed state of the pricing cycle toggle (.btn-group > .active). */
.btn-group > .btn.active {
--bs-btn-active-bg: var(--ndx-ink);
--bs-btn-active-color: var(--ndx-paper);
--bs-btn-active-border-color: var(--ndx-ink);
}
/* TERTIARY = .btn-link, ink with the prose underline treatment. */
.btn-link {
--bs-btn-color: var(--ndx-ink);
--bs-btn-hover-color: var(--ndx-ink);
text-decoration-color: var(--ndx-accent-deep);
text-decoration-thickness: 2px;
text-underline-offset: 0.18em;
}
/* DESTRUCTIVE (revoke a key, cancel a subscription). */
.btn-danger {
--bs-btn-color: #ffffff;
--bs-btn-bg: var(--ndx-danger);
--bs-btn-border-color: var(--ndx-danger);
--bs-btn-hover-color: #ffffff;
--bs-btn-hover-bg: #a5121f;
--bs-btn-hover-border-color: #a5121f;
--bs-btn-active-bg: #8f0f1a;
--bs-btn-active-border-color: #8f0f1a;
--bs-btn-focus-shadow-rgb: 192, 24, 42;
}
/* ==========================================================================
Cards and plan cards (UX §5.5)
========================================================================== */
.card {
--bs-card-border-color: var(--ndx-border);
--bs-card-border-radius: var(--ndx-radius-lg);
--bs-card-inner-border-radius: var(--ndx-radius);
--bs-card-bg: var(--ndx-surface);
--bs-card-cap-bg: var(--ndx-sunken);
--bs-card-spacer-y: 1.15rem;
--bs-card-spacer-x: 1.15rem;
--bs-card-title-spacer-y: 0.6rem;
box-shadow: none; /* cards are bordered, never elevated */
}
.card-title {
font-family: var(--ndx-display);
letter-spacing: -0.01em;
}
/* ---- plan card ---- */
.ndx-plan {
position: relative;
block-size: 100%;
}
.ndx-plan .card-title {
font-family: var(--ndx-mono);
font-size: var(--ndx-fs-eyebrow);
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ndx-ink-muted);
}
.ndx-plan__price {
font-family: var(--ndx-display);
font-size: 3rem;
font-weight: 600;
line-height: 1;
letter-spacing: -0.03em;
}
.ndx-plan__cycle {
font-size: var(--ndx-fs-small);
color: var(--ndx-ink-muted);
}
/* Every quota number is mono; the words around it are not. Each line is
ruled so the list reads as a spec sheet, not a paragraph that happens
to wrap (craft review #7). */
.ndx-plan__limits {
font-size: var(--ndx-fs-small);
line-height: 1.5;
}
.ndx-plan__limits li {
padding-block: 0.4rem;
border-block-start: 1px solid var(--ndx-border);
}
.ndx-plan__limits li:first-child {
border-block-start: 0;
}
.ndx-plan__limits b {
font-family: var(--ndx-mono);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* 2026-08-23 round 2: the card carries three facts as a ruled
(label left, mono number right) instead of the seven-line bullet list
-- the full comparison lives only in .ndx-compare on /pricing/.
.ndx-plan__limits above is kept for any other caller; plan_card.html
no longer uses it. */
.ndx-plan__pitch {
font-size: var(--ndx-fs-small);
margin-block-end: 1rem;
}
.ndx-plan__facts {
margin: 0;
font-size: var(--ndx-fs-small);
}
.ndx-plan__facts > div {
display: flex;
justify-content: space-between;
gap: 1rem;
padding-block: 0.45rem;
border-block-start: 1px solid var(--ndx-border);
}
.ndx-plan__facts > div:last-child {
border-block-end: 1px solid var(--ndx-border);
}
.ndx-plan__facts dt {
font-weight: 400;
color: var(--ndx-ink-muted);
}
.ndx-plan__facts dd {
margin: 0;
font-family: var(--ndx-mono);
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* The featured tier uses a deep-orange border and a bright accent ribbon. */
.ndx-plan--featured {
border: 2px solid var(--ndx-accent-deep);
}
.ndx-plan__ribbon {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: 100%;
block-size: 4px;
background: var(--ndx-accent);
border-radius: var(--ndx-radius-lg) var(--ndx-radius-lg) 0 0;
}
/* "Current plan" state: sunken plate + dashed border, so it cannot be
confused with the featured tier's solid accent-deep border (craft review
#8 -- they used to be the same visual). The card also prints "You are on
this plan." where the other cards have their button, so its bottom does
not sit empty. */
.ndx-plan--current {
background: var(--ndx-sunken);
border: 1px dashed var(--ndx-border-strong);
}
.ndx-plan__current-note {
font-size: var(--ndx-fs-small);
color: var(--ndx-ink-muted);
}
/* ==========================================================================
Tables (UX §5.6)
========================================================================== */
.table {
--bs-table-bg: var(--ndx-surface);
--bs-table-color: var(--ndx-ink);
--bs-table-border-color: var(--ndx-border);
--bs-table-striped-bg: #fafbf8;
--bs-table-striped-color: var(--ndx-ink);
--bs-table-hover-bg: var(--ndx-accent-soft);
--bs-table-hover-color: var(--ndx-ink);
}
.ndx-table {
font-size: var(--ndx-fs-table);
}
/* Sample tables inside terminal cards (core/home.html): no .table-responsive
wrapper (its overflow:auto grew a vertical scrollbar around three rows --
craft review #1) and no Bootstrap .table tokens, so the geometry is set
here. */
.ndx-term__body .ndx-table {
inline-size: 100%;
margin: 0;
border-collapse: collapse;
}
.ndx-term__body .ndx-table th,
.ndx-term__body .ndx-table td {
padding: 0.3rem 0.5rem;
border-block-end: 1px solid var(--ndx-border);
text-align: start;
}
.ndx-term__body .ndx-table tbody tr:last-child td {
border-block-end: 0;
}
.ndx-term__body .ndx-table th {
font-family: var(--ndx-mono);
font-size: var(--ndx-fs-th);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ndx-ink-muted);
background: var(--ndx-sunken);
}
.ndx-term__body .ndx-table td {
font-family: var(--ndx-mono);
font-size: var(--ndx-fs-code);
}
.ndx-table code {
font-size: 0.8125rem;
}
/* Header row: mono, uppercase, muted, hairline under. */
.ndx-table > thead th {
font-family: var(--ndx-mono);
font-size: var(--ndx-fs-th);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ndx-ink-muted);
background: var(--ndx-sunken);
border-bottom: 1px solid var(--ndx-border);
white-space: nowrap;
}
.ndx-table--sticky > thead th {
position: sticky;
inset-block-start: 0;
z-index: 2;
}
.ndx-table > tbody td {
padding-block: 0.45rem;
vertical-align: middle;
}
/* Data columns render mono; add .ndx-col-data to the th/td. */
.ndx-col-data {
font-family: var(--ndx-mono);
overflow-wrap: anywhere;
}
/* Find domains uses the shared Investigations row table, with these controls
only on the discovery page. */
.ndx-find-domains__filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.ndx-find-domains__filters [aria-pressed="true"] {
background: var(--ndx-accent-soft);
color: var(--ndx-accent-deep);
border-color: var(--ndx-accent-deep);
box-shadow: inset 0 -2px 0 var(--ndx-accent-deep);
}
/* The lookup-type strip (components/lookup_modes.html): five links across the
top of every signed-in lookup page. Flex-wrap rather than a scroller so all
five stay reachable at 375px without a horizontal gesture, and the current
one is marked by weight AND an underline, never by colour alone (UX §8).
Gap and padding keep every link's hit area past the 24px floor the e2e tap
target check enforces. */
/* The lookup tab bar (components/lookup_modes.html), 2026-09-17.
It replaces a strip of five underlined text links that sat directly above a
two-button segmented toggle inside the form, which repeated Current DNS and
Inverse IP -- two navigations for overlapping things on one screen. The
owner's fix: one navigation, "nice tabs". So all five read as tabs (a plate,
a border, one hit area each) and the current one is FILLED, which is what a
strip of links could not say.
Links styled as tabs, never `role="tablist"`: five URLs, not five panels.
The markup rationale is in the template's own comment.
Wrapping, not scrolling: five labels do not fit one 375px row, and a
horizontally-scrolled tab rail hides tabs behind an edge with no affordance.
`flex-wrap` puts them on two rows at 375 and one at 1440. */
/* The shared tab bar: one set of rules, two consumers.
`components/lookup_modes.html` (the five signed-in lookup pages) and
`top/_family_tabs.html` (the four `/top/` family pages, 2026-09-18) render
the same control -- a row of links, one of them `aria-current="page"` --
so they render the same class rather than two stylesheet blocks that drift.
Renamed from `.ndx-lookup-modes` when the second consumer arrived; no alias
class was left behind, because a class no template writes is dead CSS a
later reader has to prove is unused.
`flex-wrap: wrap`, never a horizontal scroller: a tab bar that scrolls
sideways hides tabs at 375px and trips the e2e overflow check on every
page that carries one. */
.ndx-tab-bar {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
}
/* `.ndx-tab-bar` repeated on the selector, not the bare class: these
pages render inside `.ndx-prose`, whose `a:not(.btn, ...)` rule is
(0,2,1) -- one class MORE specific than a bare `.ndx-tab-bar__link`
would be -- and it paints every link with the prose underline. Scoping
alone was NOT enough when this was fixed for the lookup tab bar (2026-09-17):
`.ndx-tab-bar .ndx-tab-bar__link` is (0,2,0) and still lost, which is why
those links rendered underlined and the current one was left marked by font
weight alone. The durable half of the fix is that
`.ndx-tab-bar__link` is in that rule's own `:not()` list, beside
`.nav-link` and `.page-link` -- the same category of thing, a navigation
control rather than a link in a sentence. Both halves are kept: the
`:not()` entry is what actually wins, the repeated class is what keeps
these declarations from leaking onto any other anchor.
`min-block-size: 2.75rem` is 44px, WCAG 2.5.5's target size, not the 24px
floor UX §8.3 sets for the site: this is the primary navigation of a
section on a page people use from a phone, and tabs of different heights
would also make a wrapped second row look accidental.
`flex` + `align-items: center` rather than vertical padding so the
tabs are the same height whatever their label. */
.ndx-tab-bar .ndx-tab-bar__link {
display: inline-flex;
align-items: center;
min-block-size: 2.75rem;
padding-inline: 0.85rem;
border: 1px solid var(--ndx-border);
border-radius: var(--ndx-radius-sm);
background: var(--ndx-sunken);
font-size: 0.9375rem;
line-height: 1.2;
white-space: nowrap;
text-decoration: none;
color: var(--ndx-ink-muted);
}
.ndx-tab-bar .ndx-tab-bar__link:hover {
background: var(--ndx-surface);
border-color: var(--ndx-border-strong);
color: var(--ndx-ink);
}
/* The current tab: an ink plate with the 3px orange edge the navbar wears at
the top of every page. Three signals, never colour alone (UX §8) -- the
fill, the weight, and `aria-current="page"` in the markup, which is what a
screen reader and a forced-colours mode actually read. Orange is FILL here,
on an ink surface, which is the one place roadmap B3 allows it to be loud;
the text is --ndx-ink-onink, not orange. */
.ndx-tab-bar .ndx-tab-bar__link[aria-current="page"] {
background: var(--ndx-ink);
border-color: var(--ndx-ink);
color: var(--ndx-ink-onink);
font-weight: 600;
box-shadow: inset 0 3px 0 var(--ndx-accent);
}
.ndx-tab-bar .ndx-tab-bar__link[aria-current="page"]:hover {
background: var(--ndx-ink);
border-color: var(--ndx-ink);
color: var(--ndx-ink-onink);
}
/* D43: a single native Lookup mode menu on phones. */
.ndx-lookup-menu > summary {
display: list-item;
inline-size: fit-content;
list-style-position: inside;
}
.ndx-lookup-menu > nav {
flex-direction: column;
}
.ndx-lookup-menu .ndx-tab-bar__link {
inline-size: 100%;
}
/* The `/top/` TLD filter (2026-09-18): label, select and submit button on one
line, wrapping to three rows at 375px rather than pushing the page sideways.
`align-items: end` lines the control and the button up on their baselines
while the label sits above the select, which is where Bootstrap's
`.form-label` puts it.
`max-inline-size` on the select because a twenty-item menu of three-letter
TLDs does not need half the viewport, and an unconstrained `.form-select`
in a flex row takes whatever is left. */
.ndx-tld-filter {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: 0.5rem 0.75rem;
margin-block-end: 1.5rem;
}
.ndx-tld-filter .form-label {
margin-block-end: 0.25rem;
}
.ndx-tld-filter .form-select {
max-inline-size: 14rem;
}
/* Which TLD a filtered panel's figures are about, inside the meta strip. The
strip already separates its items with a "·"; the weight is the only thing
this adds, so the scope is not read as just another timestamp. Never
colour-alone -- it is a sentence naming the TLD. */
.ndx-scoped {
font-weight: 500;
}
/* The value column of a value-lookup result (components/name_match_table.html).
A TXT record can legitimately be 765 bytes on one row (wire-format.md: three
255-byte strings concatenated), and `overflow-wrap: anywhere` alone does not
stop a table cell asking for its max-content width -- so one long row would
push the whole table sideways inside .table-responsive and turn every other
row into a horizontal scroll. Capping the column makes the long value wrap
and leaves the name, type and date where a reader expects them. `ch` rather
than `rem`: the cell is mono, so the cap is in characters of the font that
actually renders it. */
.ndx-col-value {
max-width: 56ch;
}
/* The name column of a current-DNS result (components/dns_result_table.html),
2026-09-18 (owner's site walk, item 2). Every row of that table repeats one
hostname, and `.ndx-col-data`'s `overflow-wrap: anywhere` broke it mid-label
at 375 -- "www.a-long-name.example" came back as three lines and, because
eight rows all carry a name, tripled the height of the whole table. A
hostname has no break point a reader can use: the dot is not a hyphen, and a
name split after "www." reads as a different name. Same opt-out, same
reasoning and same shape as `.ndx-history-when` (the dashboard card's
timestamp column, 2026-09-17) -- and the sanctioned way to leave
`.ndx-col-data`: add a second class to the one cell, never weaken the base
rule, which the value column beside it still needs. The extra width is
absorbed by `.ndx-col-value` on the value cell (capped, so the long value
wraps instead of the table widening) and, past that, scrolls inside
`.table-responsive` -- so the page itself never scrolls sideways, which is
what `tests/e2e/test_pages.py`'s overflow guard holds every page to.
Verified in a browser at 375 and 1440; pinned by
`tests/e2e/test_lookup.py::test_every_result_name_is_one_line_at_375`,
because a stylesheet cannot tell you a cell rendered on two lines --
`.ndx-history-when` learned that the hard way. Measured before and after:
without this rule each name renders across THIRTEEN line boxes at 375
(`.ndx-col-data` breaks a hostname a character or two at a time), with it,
one. That test counts them with a `Range`, not with the cell's own
`getClientRects()` -- see its docstring for why the obvious form is
vacuous on a `
`. */
.ndx-col-name {
overflow-wrap: normal;
white-space: nowrap;
}
/* Numeric columns align right and use tabular figures so quota digits
line up column-wise. */
.ndx-col-num {
text-align: end;
font-variant-numeric: tabular-nums;
font-family: var(--ndx-mono);
}
/* The pricing compare table (UX §6.2). A .ndx-table with a sticky row-header
column, so the row label stays readable while the four tier columns scroll
inside .table-responsive at narrow widths. Every value cell is mono and
right-aligned: the cells hold numbers, or the literal words YES / — (never
an icon and never colour alone -- UX §8.1 greyscale rule). */
.ndx-compare {
/* Five columns over the full 1140px container put values 300px from
their labels (craft review #9); the table is capped and the row-label
column sized so the numbers sit near the words. */
max-inline-size: 760px;
}
.ndx-compare th[scope="row"] {
inline-size: 40%;
position: sticky;
inset-inline-start: 0;
z-index: 1;
background: var(--ndx-surface);
font-weight: 500;
white-space: nowrap;
}
.ndx-compare > tbody td {
text-align: end;
font-family: var(--ndx-mono);
font-variant-numeric: tabular-nums;
}
/* Row-group label (a full-width
starting "Quotas", "Limits"…). */
.ndx-compare__group th {
font-family: var(--ndx-mono);
font-size: var(--ndx-fs-th);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ndx-ink-muted);
background: var(--ndx-sunken);
}
/* ==========================================================================
code_block.html (UX §5.7)
========================================================================== */
.ndx-code-block {
margin-block-end: 1rem;
}
/* The "bash" label above the block becomes a mono chip on the block's own
top edge rather than floating text. */
.ndx-code-block__lang {
display: inline-block;
padding: 0.15rem 0.45rem;
font-family: var(--ndx-mono);
font-size: var(--ndx-fs-meta);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ndx-ink-muted);
background: var(--ndx-sunken);
border: 1px solid var(--ndx-border);
border-block-end: 0;
border-radius: var(--ndx-radius) var(--ndx-radius) 0 0;
}
.ndx-code-block__body {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.85rem 1rem;
background: var(--ndx-sunken);
border: 1px solid var(--ndx-border);
border-radius: 0 var(--ndx-radius) var(--ndx-radius) var(--ndx-radius);
}
.ndx-code-block pre {
margin: 0;
flex: 1 1 auto;
font-size: var(--ndx-fs-code);
line-height: 1.55;
overflow-x: auto; /* horizontal scroll on the block ... */
}
.ndx-code-block code {
background: none;
border: 0;
padding: 0;
}
/* ... except the shell one-liner, which wraps with a hanging indent so a
long curl stays readable at 320px instead of scrolling sideways. */
.ndx-code-block--wrap pre {
white-space: pre-wrap;
overflow-wrap: anywhere;
text-indent: -2ch;
padding-inline-start: 2ch;
}
/* Shell prompt, pseudo-element so it is never copied (see §4.3). */
.ndx-code-block--shell pre::before {
content: "$\00a0";
color: var(--ndx-accent-deep);
user-select: none;
}
/* Tap-target floor for the copy button wherever it appears (UX §8.3:
>= 24x24px, including the quiet one inside a code block). */
.js-copy {
min-inline-size: 24px;
min-block-size: 24px;
display: inline-flex;
align-items: center;
flex: none; /* never squeezed narrower than its label inside a flex row (e2e mobile pass) */
white-space: nowrap;
text-decoration: none; /* a control, not a prose link (craft review #19) */
}
/* The copy button is quiet until you approach the block; always visible on
touch, where there is no hover. */
.ndx-code-block .js-copy {
color: var(--ndx-ink-muted);
transition: color 120ms linear;
}
.ndx-code-block:hover .js-copy,
.ndx-code-block .js-copy:focus-visible {
color: var(--ndx-ink);
}
@media (hover: none) {
.ndx-code-block .js-copy {
color: var(--ndx-ink);
}
}
@media (prefers-reduced-motion: reduce) {
.ndx-code-block .js-copy {
transition: none;
}
}
/* ==========================================================================
Badges (UX §5.8)
========================================================================== */
/* House badge: mono, uppercase, square, soft fill + deep text. Never a
pill -- pills read consumer-app; squares read instrument panel. */
.badge {
--bs-badge-border-radius: var(--ndx-radius-sm);
--bs-badge-font-size: 0.6875rem;
--bs-badge-font-weight: 500;
--bs-badge-padding-x: 0.45em;
--bs-badge-padding-y: 0.3em;
font-family: var(--ndx-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
border: 1px solid transparent;
}
/* MANDATORY: Bootstrap hard-codes color:#fff!important on .text-bg-*, which
is measured contrast on the orange primary. plan_card.html already uses
.text-bg-primary for "Current plan". */
.badge.text-bg-primary {
color: var(--ndx-ink) !important;
background-color: var(--ndx-accent-soft) !important;
border-color: var(--ndx-accent-press);
}
.badge.text-bg-secondary {
color: var(--ndx-ink-muted) !important;
background-color: var(--ndx-sunken) !important;
border-color: var(--ndx-border);
}
.badge.text-bg-success {
color: var(--ndx-success) !important;
background-color: var(--ndx-success-soft) !important;
border-color: #bfe3c9;
}
.badge.text-bg-warning {
color: var(--ndx-warning) !important;
background-color: var(--ndx-warning-soft) !important;
border-color: #ecd79a;
}
.badge.text-bg-danger {
color: var(--ndx-danger) !important;
background-color: var(--ndx-danger-soft) !important;
border-color: #f2c4c0;
}
.badge.text-bg-info {
color: var(--ndx-info) !important;
background-color: var(--ndx-info-soft) !important;
border-color: #bcd8fb;
}
/* Confidence badge on the related lookup's result table
(components/related_table.html, 2026-09-26, roadmap D37).
Its own class rather than `.text-bg-success`/`.text-bg-warning`: those
three are the product's STATUS colours (a key revoked, a quota exceeded, a
payment failed) and a confidence band is not a status -- a "low" band is a
perfectly good answer, not a warning, and painting it amber would tell a
reader something went wrong. The three steps here are one hue at three
weights, which reads as a scale rather than as a traffic light.
Note `.ndx-band` is already taken in this stylesheet (the full-bleed page
bands, line ~412) and is deliberately NOT reused here. */
.ndx-confidence {
color: var(--ndx-ink-muted);
background-color: var(--ndx-sunken);
border: 1px solid var(--ndx-border);
font-weight: 500;
}
.ndx-confidence--high {
color: var(--ndx-ink);
background-color: var(--ndx-accent-soft);
border-color: var(--ndx-accent-press);
}
.ndx-confidence--medium {
color: var(--ndx-ink);
background-color: var(--ndx-sunken);
border-color: var(--ndx-border-strong);
}
/* ==========================================================================
Alerts (UX §5.9)
========================================================================== */
/* Correctness banners are the one place this product raises its voice, so
they are a left rule + soft plate + INK body text. Coloured body text on
a coloured plate is harder to read and buys nothing: the rule, the icon
and the heading already carry the level. */
.alert {
--bs-alert-border-radius: var(--ndx-radius);
--bs-alert-padding-x: 1rem;
--bs-alert-padding-y: 0.75rem;
border: 1px solid var(--ndx-border);
border-inline-start: 3px solid var(--ndx-border-strong);
color: var(--ndx-ink);
font-size: var(--ndx-fs-small);
}
.alert .alert-heading {
font-family: var(--ndx-display);
font-size: var(--ndx-fs-h4);
color: inherit;
}
.alert-success {
background: var(--ndx-success-soft);
border-inline-start-color: var(--ndx-success);
}
.alert-warning {
background: var(--ndx-warning-soft);
border-inline-start-color: var(--ndx-warning);
}
.alert-danger {
background: var(--ndx-danger-soft);
border-inline-start-color: var(--ndx-danger);
}
.alert-info {
background: var(--ndx-info-soft);
border-inline-start-color: var(--ndx-info);
}
.alert-primary {
background: var(--ndx-accent-soft);
border-inline-start-color: var(--ndx-accent-deep);
}
/* components/alert.html emits .alert-debug / .alert-error for Django's
message tags; keep them mapped (replaces the two stray rules at the
bottom of the pre-2026-08-22 project.css, which used raw Bootstrap-3
hexes). */
.alert-error {
background: var(--ndx-danger-soft);
border-inline-start-color: var(--ndx-danger);
}
.alert-debug {
background: var(--ndx-sunken);
border-inline-start-color: var(--ndx-border-strong);
}
/* ==========================================================================
Forms (UX §5.10)
========================================================================== */
.form-label {
font-family: var(--ndx-mono);
font-size: var(--ndx-fs-meta);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ndx-ink-muted);
margin-block-end: 0.3rem;
}
/* Exception: a sentence-shaped label (a terms-acceptance checkbox, a
consent line) stays in the body face at body size. Uppercase mono is for
NAMES of fields, never for prose. */
.form-check .form-label,
.form-check-label {
font-family: var(--ndx-sans);
font-size: var(--ndx-fs-body);
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--ndx-ink);
}
.form-control,
.form-select {
font-size: var(--ndx-fs-body);
color: var(--ndx-ink);
background-color: var(--ndx-surface);
border: 1px solid var(--ndx-border-strong);
border-radius: var(--ndx-radius);
padding: 0.5rem 0.7rem;
}
/* Anything you type a hostname, an IP, or a key into is mono. */
.ndx-input-data,
input[type="email"].ndx-input-data {
font-family: var(--ndx-mono);
}
.form-control::placeholder {
color: var(--ndx-ink-muted);
opacity: 1;
}
/* Bootstrap hard-codes #86b7fe + a blue glow here. */
.form-control:focus,
.form-select:focus {
border-color: var(--ndx-ink);
outline: 2px solid var(--ndx-ink);
outline-offset: 1px;
box-shadow: 0 0 0 5px var(--ndx-accent-soft);
}
.form-control.is-invalid,
.was-validated .form-control:invalid {
border-color: var(--ndx-danger);
}
.invalid-feedback {
color: var(--ndx-danger);
font-size: var(--ndx-fs-small);
}
.form-text {
color: var(--ndx-ink-muted);
font-size: var(--ndx-fs-small);
}
/* Checked inputs use a dark plate and a light glyph. */
.form-check-input {
border-color: var(--ndx-border-strong);
border-radius: var(--ndx-radius-sm);
}
.form-check-input:checked {
background-color: var(--ndx-ink);
border-color: var(--ndx-ink);
}
.form-check-input:checked[type="checkbox"] {
--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23F0EFEB' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type="radio"] {
--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23F0EFEB'/%3e%3c/svg%3e");
}
/* Large lookup input (M5). Mono, 18px, ink border -- the one oversized
control on the site. */
.ndx-lookup-input {
font-family: var(--ndx-mono);
font-size: 1.125rem;
padding: 0.7rem 0.9rem;
border-width: 2px;
border-color: var(--ndx-ink);
}
/* ==========================================================================
Accordion, progress, footer (UX §5.11)
========================================================================== */
.accordion {
--bs-accordion-border-color: var(--ndx-border);
--bs-accordion-border-radius: var(--ndx-radius);
--bs-accordion-btn-color: var(--ndx-ink);
--bs-accordion-btn-bg: var(--ndx-surface);
--bs-accordion-active-color: var(--ndx-ink);
--bs-accordion-active-bg: var(--ndx-accent-soft);
--bs-accordion-btn-focus-box-shadow: 0 0 0 5px var(--ndx-accent-soft);
--bs-accordion-body-padding-y: 0.9rem;
/* Both chevrons are recoloured: Bootstrap bakes the hex into the data
URI, and the "active" one ships as Bootstrap blue. */
--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2312161B' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A83215' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.accordion-button {
font-family: var(--ndx-display);
font-size: var(--ndx-fs-h4);
font-weight: 600;
}
/* Usage data uses the deep accent so the fill stays distinct from its track. */
.progress {
--bs-progress-bg: var(--ndx-sunken);
--bs-progress-border-radius: var(--ndx-radius-sm);
--bs-progress-height: 0.625rem;
--bs-progress-bar-bg: var(--ndx-accent-deep);
border: 1px solid var(--ndx-border-strong); /* the empty track must still read as a meter, not a divider */
}
.progress-bar.bg-warning {
background-color: var(--ndx-warning) !important;
}
.progress-bar.bg-danger {
background-color: var(--ndx-danger) !important;
}
/* Footer: the second ink band on the site. */
.ndx-footer {
margin-block-start: 4rem;
padding-block: 0.75rem;
background: var(--ndx-ink);
color: var(--ndx-ink-onink);
/* No orange rule here: the navbar and the closing .ndx-band already carry
one each, and a third in the same viewport made the accent meaningless
(brand review #7). The footer's orange is the static two-direction mark. */
border-block-start: 1px solid var(--ndx-border-strong);
font-size: var(--ndx-fs-small);
}
.ndx-footer a {
color: var(--ndx-paper);
text-decoration-color: var(--ndx-accent);
text-decoration-thickness: 2px;
text-underline-offset: 0.18em;
}
/* Bright orange remains readable on the dark footer. */
.ndx-footer a:hover {
color: var(--ndx-accent);
}
.ndx-footer .ndx-eyebrow,
.ndx-band .ndx-eyebrow {
color: #9aa3ac;
}
/* Compact footer: pronunciation beside the wordmark, navigation and brand
credit share the second row; touch targets retain their full height. */
.ndx-footer__layout {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.35rem 2rem;
}
.ndx-footer__brand {
display: flex;
align-items: center;
gap: 1.25rem;
flex-basis: 100%;
}
.ndx-footer__brand p {
margin: 0;
max-inline-size: none;
font-size: var(--ndx-fs-meta);
}
.ndx-footer__links {
display: flex;
flex-wrap: wrap;
gap: 0 1.1rem;
}
.ndx-footer__links a,
.ndx-footer__credit {
display: inline-flex;
align-items: center;
min-block-size: 44px;
}
.ndx-footer__credit {
gap: 0.55rem;
white-space: nowrap;
font-size: var(--ndx-fs-meta);
}
.ndx-footer__credit img {
flex: none;
border-radius: 2px;
}
/* ==========================================================================
Texture devices (UX §4)
========================================================================== */
/* §4.1 / §4.2 -- the 24px grid (.ndx-grid) and the scanline overlay
(.ndx-scan) were REMOVED in the 2026-08-23 polish round. Owner's ruling:
"the squared background grid is too cliché, don't do that, do something
less obvious or do nothing." All three design reviews agreed the grid +
scanlines + window dots were the generic developer-tool costume of the
period. The choice was "nothing": paper, hairlines, display type. Do not
add a background texture without a new ruling. The owner explicitly requested
the contained homepage editorial artwork on 2026-10-04; see the footer-contact-art
ledger. That exception does not authorize repeating site textures. The design document's
§4.1/§4.2 are superseded by docs/superpowers/ledgers/2026-08-23-ux-polish-
roast-ledger.md. */
/* §4.3 Terminal chrome on sample cards: the chrome bar is ink, the body is
paper. Marketing surfaces only (landing samples, "your first request" on
the docs quickstart, the error pages) -- never around a form, never around
real data. Record-shaped examples must explicitly identify themselves as
illustrative; the compact hero does this in its eyebrow.
2026-08-23 polish round: the chrome was re-cut. The ink title bar with a
lime square and two grey "window dots" was the universal "I am a dev
tool" sticker (brand review #2); it is now a hairline header on the
sunken plate -- mono label left, badge right -- and the card border is
the strong hairline rather than full ink. Orange is no longer used on this
component at all (the bar is paper, where orange may not be text), so the
badge is an ink-muted mono label on a surface chip. */
.ndx-term {
border: 1px solid var(--ndx-border-strong);
border-radius: var(--ndx-radius-lg);
overflow: hidden;
background: var(--ndx-surface);
}
.ndx-term__bar {
display: flex;
flex-wrap: wrap; /* at 375px a long label + the badge must stack, not overflow the card (mobile pass 2026-08-23) */
align-items: center;
gap: 0.25rem 0.5rem;
padding: 0.5rem 0.85rem;
background: var(--ndx-sunken);
color: var(--ndx-ink);
border-block-end: 1px solid var(--ndx-border);
font-family: var(--ndx-mono);
font-size: var(--ndx-fs-meta);
letter-spacing: 0.02em;
}
/* The hero frame (core/home.html) holds the labelled illustrative DNS
result (.ndx-preview) until the owner records the new product video. It
is capped so it does not push every proof below the fold at 1440x900
(craft review #2). */
.ndx-term--hero {
max-inline-size: 960px;
}
.ndx-term__badge {
margin-inline-start: auto;
padding: 0.05em 0.45em;
border: 1px solid var(--ndx-border);
border-radius: var(--ndx-radius-sm);
background: var(--ndx-surface);
color: var(--ndx-ink-muted);
font-size: var(--ndx-fs-eyebrow);
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.ndx-term__body {
padding: 0.9rem 1rem;
overflow-x: auto; /* a four-column sample table scrolls inside the card at 375px; the page never scrolls sideways */
}
/* Prompt. The "$ " is a pseudo-element so it is never selected when the
reader drags across the command to copy it -- copying a leading "$"
into a shell is the classic docs paper cut. */
.ndx-term__cmd {
font-family: var(--ndx-mono);
font-size: var(--ndx-fs-code);
margin: 0 0 0.6rem;
overflow-wrap: anywhere; /* a long curl must wrap at 320px, not overflow */
}
.ndx-term__cmd::before {
content: "$\00a0";
color: var(--ndx-accent-deep);
user-select: none;
}
/* Auth pages (§6.6): one 420px column holding the wordmark, the card, and
the legal/contact line. allauth/layouts/entrance.html is the only user. */
.ndx-entrance {
max-inline-size: 420px;
}
/* The auth pages sit on the sunken plate (the grid that used to be their
background is gone) so the white card still reads as an object. */
.ndx-entrance-page {
background: var(--ndx-sunken);
}
/* Every field on the auth forms is required, so crispy's "*" suffix is
noise; it is hidden visually here (the `required` attribute still
announces). */
.ndx-entrance .asteriskField {
display: none;
}
.ndx-entrance__legal {
font-size: var(--ndx-fs-small);
color: var(--ndx-ink-muted);
}
/* Error pages (§6.8): 403 / 403_csrf / 404 / users/suspended are the one
place the terminal card is the whole page. 560px so the card reads as an
object on the grid rather than a full-width slab, and the `` / `` pair at the top deliberately mirrors the
API error envelope's vocabulary (roadmap D23). 500.html cannot use these
rules -- it must render with no static files at all -- so it repeats the
same four token values inline; keep the two in sync. */
.ndx-error {
max-inline-size: 560px;
}
.ndx-error__code {
margin-block: 0.35rem 0.75rem;
font-family: var(--ndx-mono);
font-size: var(--ndx-fs-code);
color: var(--ndx-ink-muted);
}
/* §4.5 The monospace metadata strip: the house pattern for "facts about this
result/object". A readout, so it holds no links and no buttons, and never
substitutes for a real table. One strip per card. */
.ndx-meta {
display: flex;
flex-wrap: wrap;
gap: 0.15rem 0.6rem;
padding: 0.45rem 0.75rem;
background: var(--ndx-sunken);
border-top: 1px solid var(--ndx-border);
font-family: var(--ndx-mono);
font-size: var(--ndx-fs-meta);
color: var(--ndx-ink-muted);
}
.ndx-meta > * + *::before {
content: "·";
margin-inline-end: 0.6rem;
color: var(--ndx-border-strong);
}
/* A state inside the strip is never colour-alone: the word changes too. */
.ndx-meta__flag--on {
color: var(--ndx-warning);
font-weight: 500;
}
/* Text selection uses a pale orange surface with dark ink. */
::selection {
background: var(--ndx-select-bg);
color: var(--ndx-ink);
}
/* Text insertion cursors use deep orange for visibility on light surfaces. */
input,
textarea {
caret-color: var(--ndx-accent-deep);
}
.ndx-prose a:not(.btn, .nav-link, .dropdown-item, .accordion-button, .page-link, .ndx-tab-bar__link, .ndx-lookup-action, .ndx-ib) {
color: var(--ndx-ink);
text-decoration: underline;
text-decoration-color: var(--ndx-accent-deep);
text-decoration-thickness: 2px;
text-underline-offset: 0.18em;
text-decoration-skip-ink: auto;
}
.ndx-prose a:not(.btn, .nav-link, .dropdown-item, .accordion-button, .page-link, .ndx-tab-bar__link, .ndx-lookup-action, .ndx-ib):hover {
background: var(--ndx-accent-soft);
text-decoration-color: var(--ndx-accent-press);
}
:focus-visible {
outline: 2px solid var(--ndx-ink);
outline-offset: 2px;
box-shadow: 0 0 0 5px var(--ndx-accent-soft);
}
/* Bootstrap's own .btn:focus-visible (0,2,0) would beat the bare pseudo
above and paint its rgb glow instead; restate the ring at equal
specificity. */
.btn:focus-visible {
outline: 2px solid var(--ndx-ink);
outline-offset: 2px;
box-shadow: 0 0 0 5px var(--ndx-accent-soft);
}
/* On an ink surface the ring inverts so it stays visible. */
.ndx-band :focus-visible,
.ndx-footer :focus-visible {
outline-color: var(--ndx-accent);
box-shadow: 0 0 0 5px rgb(231 71 34 / 25%);
}
/* ==========================================================================
Wordmark (UX §7.1)
========================================================================== */
/* Static bidirectional wordmark; the decorative mark is aria-hidden in HTML. */
.ndx-wordmark {
font-family: var(--ndx-display);
font-weight: 600;
letter-spacing: -0.04em;
color: var(--ndx-ink);
text-decoration: none;
white-space: nowrap;
}
/* The only optical correction: mono's uniform advance makes the leading
"n" float away from the rest, so pull it back a hair. */
.ndx-wordmark__n {
margin-inline-end: -0.02em;
}
/* Compact wordmark sizes; the two-direction mark scales with the text. */
.ndx-wordmark--nav {
font-size: 1.25rem;
}
.ndx-wordmark--hero {
font-size: 1.5rem; /* auth pages: the card heading is the large element, not the mark */
}
.ndx-wordmark--footer {
font-size: 1.25rem;
color: var(--ndx-paper);
}
/* ==========================================================================
Disclosure widgets (2026-08-23 round 2): native , no JS.
.ndx-rule -- one clause of "Rules of the tokens" (components/token_rules.html)
.ndx-sample -- a folded "Sample response" JSON block (core/docs_quickstart.html)
The marker is the default triangle (never an icon font); the summary
is the whole heading line so the tap target is the full width.
========================================================================== */
.ndx-rule {
border-block-start: 1px solid var(--ndx-border);
padding-block: 0.5rem;
}
.ndx-rule:last-child {
border-block-end: 1px solid var(--ndx-border);
}
.ndx-rule > summary {
cursor: pointer;
padding-block: 0.25rem;
}
/* The
must stay inline with the marker, and keep the outline intact
for screen readers (summary > h3 is valid HTML). */
.ndx-rule > summary > h3 {
display: inline;
margin: 0;
}
.ndx-rule > p {
margin-block: 0.5rem 0.25rem;
padding-inline-start: 1.1rem; /* align with the heading text, past the marker */
}
.ndx-sample {
margin-block: 0.5rem 1rem;
}
.ndx-sample > summary {
cursor: pointer;
font-size: var(--ndx-fs-small);
color: var(--ndx-ink-muted);
margin-block-end: 0.35rem;
}
.ndx-sample[open] > summary {
color: var(--ndx-ink);
}
/* ==========================================================================
Docs page frame (core/docs_quickstart.html, 2026-08-23 round 2): a
reading column and a sticky right-rail anchor list from lg up. The
rail's links are quiet (no 2px accent underline) so the page has one
strong link style -- the prose links -- and one wayfinding style.
========================================================================== */
.ndx-docs__rail li {
padding-block: 0.2rem;
font-size: var(--ndx-fs-small);
}
.ndx-prose .ndx-docs__rail a:not(.btn, .nav-link, .dropdown-item, .accordion-button, .page-link) {
text-decoration: none;
color: var(--ndx-ink-muted);
}
.ndx-prose .ndx-docs__rail a:not(.btn, .nav-link, .dropdown-item, .accordion-button, .page-link):hover {
background: none;
color: var(--ndx-ink);
text-decoration: underline;
text-decoration-thickness: 1px;
}
.ndx-docs__next {
margin-block-start: 2.5rem;
padding-block-start: 1.5rem;
border-block-start: 1px solid var(--ndx-border);
font-weight: 500;
}
/* Anchor targets stop under the sticky-free navbar with a little air. */
.ndx-docs__body h2[id] {
scroll-margin-block-start: 1.5rem;
}
@media (min-width: 992px) {
.ndx-docs__rail {
position: sticky;
inset-block-start: 1.5rem;
}
}
/* ==========================================================================
Page frame: the footer sits at the bottom of short pages (craft review
#14 -- on /app/usage/ with one card it floated at 40% of the viewport).
entrance.html renders its own inside the same body and is fine.
========================================================================== */
body {
min-block-size: 100dvh;
display: flex;
flex-direction: column;
}
body > main {
flex: 1 0 auto;
}
/* ==========================================================================
App patterns (§6.7): stat card and empty state.
The marketing site performs; the app reports -- these are the readout
shapes for /app/*, added in the 2026-08-23 polish round so the logged-in
pages stop looking like a default Bootstrap card grid.
========================================================================== */
/* Stat card: eyebrow (the real
) could not do: several links can share one cell -- an SOA
row carries four, two on the primary nameserver and two on the mailbox
domain -- and the floor has to be met by each link individually, not once
per row. The RDAP link is in the same rule rather than a copy of it
because it is the same 24px rule on the same page; it just is not a
pivot. */
.ndx-pivot-link,
.ndx-rdap-link,
.ndx-rdap-link-wrap,
.ndx-related-link,
.ndx-related-link-wrap {
display: inline-flex;
align-items: center;
min-block-size: 24px;
}
/* The inert variant of the registration control (2026-09-21, roadmap D33):
a disabled