@import url("/styles/portal_tokens.css?v=9805477672"); /* NF-2057 Part 2 — self-hosted display face (Anton, OFL; licence at /fonts/OFL.txt). Single master serves the whole 100-900 weight range so the browser never synthesizes a faux bold. swap keeps text visible on the system condensed stack until the ~20 KB latin subset arrives. */ @font-face { font-family: "Anton"; src: url("/fonts/anton-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } * { box-sizing: border-box; } /* ── A CLOSED
MUST NOT LAY OUT ITS CONTENT ────────────────────────── * * 🔴 THE COLLAPSED MOBILE NAV RENDERED ON EVERY PORTAL PAGE. A user agent hides * a closed
's content at USER-AGENT origin, and an author `display` * on a direct child outranks it. `.nav-list { display: flex }` is exactly * that, so at <=1120px the closed drawer's five links were laid out — 56x268 * starting at the Menu button and running down over the hero. Measured on * / at 375x812 before this rule: `ul.nav-list` at [17,129] 56x268, its links * overlapping `h1#page-title` by up to 48x44, invisible only because later * content painted on top, and STILL IN THE TAB ORDER — the first of them * sat at index 8 of the page's 37 focusables. * * This is a CLASS of bug, not one selector: any element given a `display` * and later placed inside a
. Restoring the user agent's behaviour * at author origin closes all of them at once, and nothing legitimately * renders inside a collapsed disclosure. Every rule that opens the drawer is * `[open]`-scoped, so none of them is touched. */ details:not([open]) > *:not(summary) { display: none; } /* ── ELEMENT BASELINE ──────────────────────────────────────────────────────── * * This surface styles most of its headings through element selectors already * (`main > section > h2`, `.tour-copy h2`), which is why its sweep came back * clean — but "clean because every page happens to use a styled container" is * not a base layer. The tenant app had the same shape and shipped seven bare *

s at the user agent's 1.17em. Declared here so an unclassed heading on a * new portal page lands on the scale instead of on Chrome's defaults. * * Specificity 0-0-1: every rule already in this file outranks all of it. */ h1, h2, h3, h4, h5, h6 { margin-block: 0 var(--nf-space-2); color: inherit; } h1 { font-size: var(--nf-display-2); font-weight: var(--nf-weight-black); line-height: var(--nf-leading-none); } h2 { font-size: var(--nf-display-3); font-weight: var(--nf-weight-bold); line-height: var(--nf-leading-tight); } h3 { font-size: var(--nf-display-5); font-weight: var(--nf-weight-bold); line-height: var(--nf-leading-snug); } h4 { font-size: var(--nf-text-xl); font-weight: var(--nf-weight-semibold); line-height: var(--nf-leading-snug); } h5 { font-size: var(--nf-text-lg); font-weight: var(--nf-weight-semibold); line-height: var(--nf-leading-snug); } h6 { font-size: var(--nf-text-md); font-weight: var(--nf-weight-semibold); line-height: var(--nf-leading-snug); } p { margin-block: 0 var(--nf-space-3); line-height: var(--nf-leading-relaxed); } ul, ol, dl { margin-block: 0 var(--nf-space-3); line-height: var(--nf-leading-relaxed); } ul, ol { padding-inline-start: var(--nf-space-4); } dd { margin-inline-start: var(--nf-space-3); } hr { margin-block: var(--nf-space-4); border: 0; border-block-start: 1px solid var(--nf-border); } small { font-size: var(--nf-text-sm); } code, kbd, samp, pre { font-family: var(--nf-font-mono); font-size: var(--nf-text-sm); } figure { margin: 0 0 var(--nf-space-3); } blockquote { margin: 0 0 var(--nf-space-3); padding-inline-start: var(--nf-space-3); border-inline-start: 2px solid var(--nf-border); } h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, ul:last-child, ol:last-child, dl:last-child, figure:last-child, blockquote:last-child { margin-block-end: 0; } body { margin: 0; color: var(--nf-fg); background: var(--nf-bg); font-family: var(--nf-font-body); font-size: var(--nf-text-md); line-height: var(--nf-leading-normal); } a { color: var(--nf-accent); } /* The two-tone focus indicator, portal-wide. The outline occupies 3-5px out from the border box and the 8px shadow spread occupies 0-8px, so the halo flanks the ring on both sides. One band always clears 3:1 whatever the control sits on; --nf-focus-halo in portal_tokens.css has the measurements. 🔴 box-shadow replaces rather than accumulates. Nothing focusable on this surface currently carries a resting shadow -- checked across portal.css with comments stripped -- so nothing is flattened by this. A future focusable that does carry one must restate it here alongside the halo. */ a:focus-visible, button:focus-visible, summary:focus-visible { scroll-margin-block: var(--nf-space-2); outline: var(--nf-focus-ring-width) solid var(--nf-focus); outline-offset: var(--nf-focus-ring-offset); box-shadow: 0 0 0 8px var(--nf-focus-halo); } /* NF-782 — 44px is the floor for anything a thumb has to hit. Every non-inline interactive control below declares `min-height: 44px` explicitly rather than relying on padding plus a 15px/1.55 line box, which lands at 39–43px and drifts the moment the type scale changes. */ .skip-link { position: absolute; left: var(--nf-space-3); top: -5rem; display: inline-flex; align-items: center; min-height: 44px; padding: 0.75rem 1rem; background: var(--nf-surface); border: 1px solid var(--nf-control-border); border-radius: var(--nf-radius-ctl); z-index: var(--nf-layer-skip); color: var(--nf-fg); text-decoration: none; font-weight: var(--nf-weight-semibold); } .skip-link:focus { top: var(--nf-space-3); } .hero, .hero-inner, .band-inner, main { width: min(var(--nf-measure), calc(100% - 2rem)); margin-inline: auto; } .site-header { width: 100%; margin-inline: 0; background-color: var(--nf-surface); border-block-end: 1px solid var(--nf-border); } .site-header__inner { width: min(var(--nf-measure), calc(100% - 2rem)); min-width: 0; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; /* Compact portal chrome is intentional: controls retain the universal 44px floor while the secondary row no longer competes with the global strip. */ gap: var(--nf-space-2); padding-block: var(--nf-space-2); } .wordmark { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--nf-font-display); /* OWNER 2026-08-02: bigger wordmark, capped at the nav-button height (44px). 2.1rem renders ~34px of glyph in the display face - clearly larger, safely under the cap. */ /* A compact secondary row needs the mark to read as an identity, not a display headline. This is one scale step down while preserving its 44px target and the stronger display face. */ font-size: var(--nf-text-4xl); line-height: var(--nf-leading-none); font-weight: var(--nf-weight-bold); color: var(--nf-fg); text-decoration: none; letter-spacing: -0.02em; } .wordmark span { /* The second half of the mark is the house red on every theme (owner, 2026-09-25: gray is unacceptable; 2026-09-26: red on every theme). --nf-brand-mark-text is the brand red, not the accent-text role, so a seasonal revision that recolors accent text (Halloween Dark paints --nf-red-text orange) cannot move the mark off red. */ color: var(--nf-brand-mark-text); } .nav-primary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nf-space-2); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--nf-control-border); border-radius: var(--nf-radius-ctl); background: var(--nf-surface); color: var(--nf-fg); font: inherit; font-size: var(--nf-text-2xl); cursor: pointer; } /* OWNER 2026-08-02: "the red border around the view toggle looks bad." A control that only switches themes should not light up in the brand's loudest ink. Quiet feedback: the surface tints, the border stays put. */ .theme-toggle:hover { background: var(--nf-band); } .nav-list { display: flex; flex-wrap: wrap; /* The primary row keeps its visual hierarchy through weight, not excess gaps; a smaller consistent gap prevents an otherwise roomy desktop bar from breaking into two tall rows. */ gap: var(--nf-space-2); margin: 0; padding: 0; list-style: none; } /* The global strip stays subordinate through its lighter 13px/500 treatment; the portal row earns primary status with weight and its full 44px targets, not a larger type step that forces the secondary header to wrap. */ .nav-list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--nf-fg); text-decoration: none; font-size: var(--nf-text-md); font-weight: var(--nf-weight-semibold); letter-spacing: -0.01em; } .nav-list a:hover { color: var(--nf-accent); } .nav-list a.nav-demo { padding-inline: var(--nf-space-2); border: 1px solid var(--nf-control-border); border-radius: var(--nf-radius-ctl); font-weight: var(--nf-weight-bold); } .nav-list a[aria-current="page"] { font-weight: var(--nf-weight-bold); color: var(--nf-accent); text-decoration: underline; text-decoration-thickness: 0.15em; text-underline-offset: 0.2em; } .nav-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.5rem 0.9rem; border-radius: var(--nf-radius-ctl); /* --nf-cta-bg, not --nf-accent: the night accent is too light to hold white type at AA; the CTA fill token stays dark enough in both themes. */ background: var(--nf-cta-bg); color: var(--nf-cta-fg); text-decoration: none; font-weight: var(--nf-weight-semibold); border: 1px solid var(--nf-cta-edge); box-shadow: var(--nf-shadow-press); } .nav-cta:hover { filter: brightness(1.05); color: var(--nf-cta-fg); } .nav-toggle { display: none; border: 1px solid var(--nf-control-border); border-radius: var(--nf-radius-ctl); background: var(--nf-surface); color: var(--nf-fg); /* The padding lives on the SUMMARY, not here.
paints the box but only toggles it, so 0.75rem of padding on this element was 12px of painted-but-inert button on each side - 40% of a 64px target did nothing when tapped. Audited 2026-08-03 on all 11 pages. */ font: inherit; } .nav-toggle summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 0.75rem; } .nav-toggle summary::-webkit-details-marker { display: none; } /* Keep the public header on the same narrow-control contract as APP, TALK and Control Plane: a full 44px pointer/touch target with a quieter 40px visible plate. The details element owns the plate so Menu does not retain a second full-size border behind its summary. */ @media (max-width: 820px) { .site-header :is(.nav-toggle, .theme-toggle) { position: relative; isolation: isolate; inline-size: var(--nf-control-min); block-size: var(--nf-control-min); background: transparent; border: 0; box-shadow: none; } .site-header .nav-toggle > summary { inline-size: var(--nf-control-min); min-inline-size: var(--nf-control-min); block-size: var(--nf-control-min); min-block-size: var(--nf-control-min); padding: 0; border: 0; background: transparent; box-shadow: none; } .site-header :is(.nav-toggle, .theme-toggle)::after { content: ""; position: absolute; inset: 2px; z-index: -1; border: 1px solid var(--nf-control-border); border-radius: var(--nf-radius-ctl); background: var(--nf-surface); pointer-events: none; } .site-header :is(.nav-toggle, .theme-toggle):hover::after { background: var(--nf-band); } .site-header :is(.nav-toggle, .theme-toggle):active::after { background: var(--nf-band); } } /* The global strip stays above this header on every surface. Seasonal art is applied to `.site-header`, which deliberately spans the viewport; its navigation remains in the measured inner row. That keeps the artwork from looking like a cropped rectangle while preserving the established 44px control geometry. */ .site-header .nav-toggle-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .site-header .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .site-header .nav-subscription svg { display: none; } .site-header .nav-primary > a[data-portal-account-state="signed-in"] { display: none; } @media (max-width: 600px) { .site-header .nav-primary > .nav-subscription { width: 44px; height: 44px; padding: 0; position: relative; isolation: isolate; background: transparent; border: 0; box-shadow: none; } .site-header .nav-primary > .nav-subscription::after { content: ""; position: absolute; inset: 2px; z-index: -1; border: 1px solid var(--nf-fg); border-radius: var(--nf-radius-ctl); background: transparent; pointer-events: none; } .site-header .nav-primary > .nav-subscription:hover::after { background: var(--nf-band); } .site-header .nav-subscription span { display: none; } .site-header .nav-subscription svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } } /* Hero — the press sheet (NF-2057 Part 2, Variant B "Four-Colour"). Home is the only route with .hero-band, so the loud treatment scopes itself: halftone field behind the masthead, crop marks on the trim. */ .hero-band { position: relative; /* The home hero is a permanent dark artwork plate. Its ink must remain readable when the surrounding page switches to a light palette. */ --nf-hero-ink: var(--nf-graphic-ink); --nf-hero-ink-soft: var(--nf-graphic-ink-muted); --nf-hero-plate: var(--nf-graphic-surface); background: var(--nf-hero-band-bg); border-bottom: 1px solid var(--nf-border); padding-block: clamp(2.5rem, 7vw, 5rem); } /* Halftone field behind the hero: the four-colour tell. */ .hero-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(var(--nf-hero-dot-1) 1px, transparent 1.5px), radial-gradient(var(--nf-hero-dot-2) 1px, transparent 1.5px); background-size: 9px 9px, 9px 9px; background-position: 0 0, 4px 5px; -webkit-mask-image: radial-gradient(80% 90% at 78% 20%, #000 0%, transparent 68%); mask-image: radial-gradient(80% 90% at 78% 20%, #000 0%, transparent 68%); } /* Crop marks on the hero corners: trimmed like a printed sheet. */ .hero-band::after { content: ""; position: absolute; inset: 6px; pointer-events: none; background: linear-gradient(var(--nf-hero-ink-soft), var(--nf-hero-ink-soft)) top left / 16px 1px no-repeat, linear-gradient(var(--nf-hero-ink-soft), var(--nf-hero-ink-soft)) top left / 1px 16px no-repeat, linear-gradient(var(--nf-hero-ink-soft), var(--nf-hero-ink-soft)) top right / 16px 1px no-repeat, linear-gradient(var(--nf-hero-ink-soft), var(--nf-hero-ink-soft)) top right / 1px 16px no-repeat, linear-gradient(var(--nf-hero-ink-soft), var(--nf-hero-ink-soft)) bottom left / 16px 1px no-repeat, linear-gradient(var(--nf-hero-ink-soft), var(--nf-hero-ink-soft)) bottom left / 1px 16px no-repeat, linear-gradient(var(--nf-hero-ink-soft), var(--nf-hero-ink-soft)) bottom right / 16px 1px no-repeat, linear-gradient(var(--nf-hero-ink-soft), var(--nf-hero-ink-soft)) bottom right / 1px 16px no-repeat; opacity: 0.7; } .hero-band > .hero { position: relative; z-index: var(--nf-layer-raised); } .hero { display: grid; gap: var(--nf-space-5); align-items: center; padding-block: 0; } @media (min-width: 900px) { .hero { grid-template-columns: 1.05fr 0.95fr; } } .hero-copy h1 { font-family: var(--nf-font-display); /* OWNER 2026-08-02: "SLIGHTLY reduce" - one step down, ~10%. That step is now display-1 (48->64px), which also absorbs the two phone overrides this rule used to need. Measured before: 46.4px at 375, 66.4px at 1440. */ font-size: var(--nf-display-1); font-weight: var(--nf-weight-black); letter-spacing: 0.005em; line-height: var(--nf-leading-none); text-transform: none; text-wrap: balance; margin: 0 0 var(--nf-space-3); } /* Display headings: plain solid ink. The in-glyph halftone (candidate 6) and the plate-offset text-shadow before it were both withdrawn by the owner on 2026-08-02: "for the heading texts just make them all plain text." */ .nf-heading-halftone, .hero-copy h1, .pain-inner h2, .story-band h2, .tour-copy h2, .product-preview h2, .page-intro h1, .module-card h3, .workflow h2, .module-grid h2, .cta-heading, .prose h2 { /* OWNER VERDICT 2026-08-02: "for the heading texts just make them all plain text. The dots everywhere are too fucking much." Candidate 6 is withdrawn. Solid ink, no clip, no texture, no offset. OWNER 2026-09-11: the display face carries its own ink token so night headlines are the logo ivory while the body stays the ladder text. */ color: var(--nf-display-ink); -webkit-text-fill-color: currentColor; background-image: none; text-shadow: none; } /* Forced-colours users get the system colour back; a clipped background has no meaning there and would render the heading invisible. */ @media (forced-colors: active) { .nf-heading-halftone, .hero-copy h1, .pain-inner h2, .story-band h2, .tour-copy h2, .product-preview h2, .page-intro h1 { background-image: none; color: CanvasText; -webkit-text-fill-color: CanvasText; } } .hero-copy .lede { margin: 0 0 var(--nf-space-4); color: var(--nf-muted); font-size: var(--nf-text-xl); max-width: 36rem; } /* OWNER 2026-09-11 "navy plate": in day the hero band is a navy plate, so its copy takes the plate inks (ivory display, cool-grey lede, red eyebrow). At night these resolve to the ordinary ladder values, so one rule set serves both themes. */ .hero-band .hero-copy h1 { color: var(--nf-hero-ink); } .hero-band .hero-copy .lede { color: var(--nf-hero-ink-soft); } .hero-band .eyebrow { color: var(--nf-plate-red-text); } .hero-band .eyebrow::before { background: var(--nf-plate-red-text); } /* Outranks `.hero-actions .nav-cta-secondary` below: on the navy hero plate the outline CTA takes the plate ink, not the page ink. */ .hero-band .hero-actions .nav-cta-secondary { border-color: var(--nf-hero-ink); color: var(--nf-hero-ink); } .hero-band .hero-actions .nav-cta-secondary:hover { background: color-mix(in srgb, var(--nf-hero-ink) 12%, transparent); color: var(--nf-hero-ink); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--nf-space-3); } .hero-actions .nav-cta-secondary, .page-cta .nav-cta-secondary, .nav-cta-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.55rem 1.1rem; border-radius: var(--nf-radius-ctl); /* Press-craft secondary: inked outline on the stock, no filled pill. */ border: 1px solid var(--nf-fg); color: var(--nf-fg); text-decoration: none; font-weight: var(--nf-weight-semibold); background: transparent; } .hero-actions .nav-cta-secondary:hover, .page-cta .nav-cta-secondary:hover, .nav-cta-secondary:hover { background: var(--nf-surface); } .contact-form .nav-cta-secondary[hidden] { display: none; } /* NF-778: the box must be the shape of the art it holds. `object-fit: contain` silently letterboxes any mismatch, so a box ratio that does not track the shipped viewBox shrinks the composition instead of showing it. The width cap pairs with max-height (42.66rem / (1280/900) ≈ 30rem) so the clamp can never re-square the box on mid-width single-column layouts. */ /* --------------------------------------------------------------------------- THE PLATE-OFFSET CONTRACT (NF-2057) `box-shadow` traces the element's OWN `border-radius`. An element that takes the offset without declaring a radius therefore renders SQUARE shadow corners — even when the artwork inside it is rounded. That is not a hypothetical: `.page-index .tour-visual` had its radius deliberately removed (a CSS border was tracing straight edges around already-rounded SVG art) but kept the shadow, so every product-tour figure stamped square corners while the hero above it stayed round. The two properties are ONE decision, so they are declared in ONE place and can no longer drift apart. Take the offset by adding `.nf-plate` — never by writing the literal again. A caller may retune the corner via `--nf-plate-radius`, but cannot omit it. */ .nf-plate { border-radius: var(--nf-plate-radius, var(--nf-radius-panel)); box-shadow: var(--nf-shadow-plate); } /* Existing consumers, adopted without touching their markup. */ .hero-visual, .proof-list li, .page-index .tour-visual { border-radius: var(--nf-plate-radius, var(--nf-radius-panel)); box-shadow: var(--nf-shadow-plate); } .hero-visual { width: min(100%, 42.66rem); margin-inline: auto; height: auto; aspect-ratio: 1280 / 900; max-height: 30rem; object-fit: contain; object-position: center; background: var(--nf-surface); border: 1px solid var(--nf-stroke); display: block; } /* Proof + story + product tour */ .proof-strip { padding-block: var(--nf-space-4); } .pain-band { padding-block: var(--nf-space-5); } .pain-inner { width: min(var(--nf-measure), calc(100% - 2rem)); margin-inline: auto; max-width: 44rem; } .pain-inner h2 { font-family: var(--nf-font-display); font-weight: var(--nf-weight-bold); letter-spacing: -0.02em; line-height: var(--nf-leading-tight); margin: 0 0 var(--nf-space-3); font-size: var(--nf-display-3); } .pain-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: var(--nf-space-4) 0; padding: 0; list-style: none; } .pain-chips li { padding: 0.45rem 0.75rem; border: 2px solid var(--nf-stroke); border-radius: var(--nf-radius-ctl); background: transparent; font-family: var(--nf-font-mono); font-size: var(--nf-text-sm); font-weight: var(--nf-weight-semibold); letter-spacing: 0.06em; min-height: 44px; display: inline-flex; align-items: center; } /* OWNER 2026-08-03: the little red arrow floated on its own in the left column, pointing at nothing in particular, and the resolve box was the one container on the page wearing a 6px accent edge and a control-sized corner. Both were special cases. The arrow is gone and the box takes the same card contract as every other container here, so it reads as part of the band. */ .pain-resolve { margin: var(--nf-space-4) 0 0; padding: var(--nf-space-4); border: var(--nf-card-stroke) solid var(--nf-stroke); border-radius: var(--nf-radius-card); background: var(--nf-card); box-shadow: var(--nf-shadow-panel); color: var(--nf-fg); font-weight: var(--nf-weight-medium); } .hero-stack { position: relative; } /* Halftone imagery treatment: dots over the plate, faded on a diagonal. */ .hero-stack::after, .tour-figure::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: var(--nf-radius-panel); background-image: radial-gradient(var(--nf-halftone-dot) 1px, transparent 1.4px); background-size: 7px 7px; -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 55%); mask-image: linear-gradient(160deg, #000 0%, transparent 55%); } /* NF-782: is inline by default, so a grid item or figure child would shrink-wrap and leave the art-directed source at its intrinsic width. Every art-directed image on the portal is a block that fills its column. */ .hero-stack picture, .tour-row picture, .commerce-story picture, .diagram picture { display: block; width: 100%; } /* NF-833: art-direction lives in , not display:none siblings. */ .proof-list { display: grid; gap: var(--nf-space-3); margin: 0 auto; padding: 0; list-style: none; width: min(var(--nf-measure), calc(100% - 2rem)); } @media (min-width: 900px) { .proof-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .proof-list li { margin: 0; padding: var(--nf-space-3); background: var(--nf-card); border: 1px solid var(--nf-stroke); /* Cards keep the card corner; the offset itself comes from the contract block above, so the shadow follows this radius instead of squaring off. */ --nf-plate-radius: var(--nf-radius-card); color: var(--nf-ink-soft); font-size: var(--nf-text-lg); } .proof-list strong { display: block; margin-bottom: 0.35rem; font-family: var(--nf-font-display); font-weight: var(--nf-weight-black); font-size: var(--nf-text-lg); letter-spacing: 0.01em; color: var(--nf-display-ink); } .promo-preview { width: min(var(--nf-measure), calc(100% - 2rem)); margin-inline: auto; padding-block: var(--nf-space-5); display: grid; gap: var(--nf-space-4); align-items: center; } .promo-preview h2 { font-family: var(--nf-font-display); font-size: var(--nf-display-3); line-height: var(--nf-leading-tight); } .promo-preview__copy { max-width: 37rem; } .promo-preview__media { min-width: 0; } .promo-preview video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #11141c; border: 2px solid var(--nf-stroke); border-radius: var(--nf-radius-card); object-fit: contain; } .promo-preview__summary { margin: var(--nf-space-2) 0 0; color: var(--nf-ink-soft); font-size: var(--nf-text-sm); } @media (min-width: 900px) { .promo-preview { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); } } @media (max-width: 680px) { .promo-preview video { aspect-ratio: 9 / 16; max-height: 72vh; } } .story-band { width: min(var(--nf-measure), calc(100% - 2rem)); margin-inline: auto; padding-block: var(--nf-space-5); max-width: 42rem; } .story-band h2 { font-family: var(--nf-font-display); font-weight: var(--nf-weight-bold); letter-spacing: -0.02em; line-height: var(--nf-leading-tight); margin: 0 0 var(--nf-space-3); font-size: var(--nf-display-3); } .tour-row { display: grid; gap: var(--nf-space-4); align-items: center; width: min(var(--nf-measure), calc(100% - 2rem)); margin-inline: auto; padding-block: var(--nf-space-5); } /* NF-779: the flip/order rules must name the direct grid child. The visual now sits inside , so ordering .tour-visual would be a no-op and every band would silently collapse to copy-left/art-right. */ @media (min-width: 900px) { .tour-row { grid-template-columns: 0.95fr 1.05fr; } /* Varied scale — the lead band gives the product more room than the rest so the tour does not read as three identical rectangles. */ .tour-row-lead { grid-template-columns: 0.8fr 1.2fr; } .tour-row-flip .tour-copy { order: 2; } .tour-row-flip .tour-figure { order: 1; } } .tour-figure { position: relative; display: block; width: 100%; } .tour-copy h2 { font-family: var(--nf-font-display); font-weight: var(--nf-weight-bold); letter-spacing: -0.02em; line-height: var(--nf-leading-tight); margin: 0.35rem 0 var(--nf-space-3); font-size: var(--nf-display-4); } .tour-copy p { color: var(--nf-muted); margin: 0 0 var(--nf-space-3); } .text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: var(--nf-weight-semibold); color: var(--nf-accent); text-decoration: none; } .text-link:hover { text-decoration: underline; } .tour-visual { width: 100%; height: auto; /* The product SVGs draw their own rounded card, border and shadow. Adding a CSS border here traced a straight-edged rectangle around already-rounded art — the art's corners tucked inside the frame's square ones. The artwork is self-framing, so no CSS border/radius/fill. The plate-offset shadow below is kept: it reads as ink on the page, not as a frame. (NF-2057.) */ display: block; } /* Home carries the loud plate offsets; other pages keep the quiet press shadow. The radius comes from the contract block and is what rounds the offset to match the self-framing SVG art. It draws nothing on its own — there is still no border, background or fill here — so the square-frame problem the comment above describes does not come back. */ .page-cta { flex-direction: column; align-items: flex-start; } .cta-heading { font-family: var(--nf-font-display); font-weight: var(--nf-weight-bold); letter-spacing: -0.02em; margin: 0 0 var(--nf-space-2); font-size: var(--nf-display-5); } .cta-actions { display: flex; flex-wrap: wrap; gap: var(--nf-space-3); } /* Alternating bands */ .band { padding-block: var(--nf-space-5); } .band-alt { background: var(--nf-band); border-block: 1px solid var(--nf-border); } .band-accent { /* OWNER 2026-08-02, second pass: the 1px pink frame read as washed-out next to the ink-bordered cards above it. The CTA band is a CARD like everything else on the page - the one container contract: 2px ink border, card corner, panel shadow. The red tint stays as its identity; the chrome stops being a special case. */ background: var(--nf-tint-red-soft); border: 2px solid var(--nf-stroke); border-radius: var(--nf-radius-card); box-shadow: var(--nf-shadow-panel); } /* The conversion band gets a magenta halftone wash rising on the diagonal. */ .page-cta.band-accent { position: relative; } .page-cta.band-accent::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(var(--nf-halftone-m) 1.2px, transparent 1.7px); background-size: 8px 8px; -webkit-mask-image: linear-gradient(115deg, transparent 45%, #000 100%); mask-image: linear-gradient(115deg, transparent 45%, #000 100%); } .page-cta.band-accent > * { position: relative; } .product-preview h2, .page-intro h1, .workflow h2, .module-grid h2, .prose h2 { font-family: var(--nf-font-display); font-weight: var(--nf-weight-bold); letter-spacing: -0.02em; line-height: var(--nf-leading-tight); margin: 0 0 var(--nf-space-3); } .shot-frame { margin: var(--nf-space-3) 0 0; padding: 0; } .shot-frame figcaption { margin-top: var(--nf-space-2); color: var(--nf-muted); font-size: var(--nf-text-lg); } .product-shot { width: 100%; height: auto; max-height: 32rem; object-fit: contain; object-position: top center; /* The product SVGs draw their own rounded card + shadow. A CSS border here traces a straight-edged rectangle around that already-rounded art (the art's corners tuck inside the frame's square ones), and object-fit:contain leaves letterbox gaps the border rings in a way the fill does not touch. The artwork is self-framing — no CSS frame. (NF-2057 follow-up.) */ display: block; } main { min-height: 40vh; padding-block: 0; } .launch-notice { width: 100%; border-bottom: 1px solid var(--nf-border); /* This temporary beta rail sits directly under the header on the same ground, so the two rails read as one. Tint this rail only (the header is unchanged): a sunken tone blended from the theme's own surface and ink, so every theme, including Halloween Light/Dark, keeps the contrast. */ background: var(--nf-gutter); background: color-mix(in srgb, var(--nf-surface) 88%, var(--nf-fg)); color: var(--nf-fg); } .launch-notice p { width: min(var(--nf-measure), calc(100% - 2rem)); margin: 0 auto; padding: var(--nf-space-2) var(--nf-space-4); color: inherit; font-size: var(--nf-text-sm); line-height: var(--nf-leading-normal); text-align: center; } .launch-notice strong { color: var(--nf-red-text); } .launch-notice time { font-weight: var(--nf-weight-semibold); } .hero-availability { max-width: 27rem; margin-bottom: var(--nf-space-3); color: var(--nf-hero-ink); } /* #2977 LML S3a — launch-list signup. Both homes are dark plates (the hero navy plate and the CTA ink plate), so the form reads one local ink that each plate sets. It ships `hidden`; launch_signup.js reveals it only while capture is open, and `[hidden]` must beat the grid display below. */ .launch-signup { --launch-ink: var(--nf-hero-ink); --launch-ink-soft: var(--nf-hero-ink-soft); display: grid; gap: var(--nf-space-2); max-width: 30rem; margin: 0 0 var(--nf-space-4); } .launch-signup[hidden], [data-launch-entry][hidden] { display: none; } .page-cta.band-accent .launch-signup { --launch-ink: var(--nf-plate-ink); --launch-ink-soft: var(--nf-plate-ink-soft); margin: var(--nf-space-4) 0 0; } .launch-signup-title { margin: 0; font-size: var(--nf-text-xl); line-height: var(--nf-leading-tight); color: var(--launch-ink); } .launch-signup-label { font-size: var(--nf-text-sm); font-weight: var(--nf-weight-semibold); color: var(--launch-ink); } .launch-signup-row { display: flex; flex-wrap: wrap; gap: var(--nf-space-2); } .launch-signup-input { flex: 1 1 14rem; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 0.6rem 0.75rem; border: 1px solid var(--launch-ink); border-radius: var(--nf-radius-ctl); background: var(--nf-surface); color: var(--nf-fg); font: inherit; } .launch-signup-input:focus-visible { outline: var(--nf-focus-ring-width) solid var(--nf-focus); outline-offset: var(--nf-focus-ring-offset); box-shadow: 0 0 0 5px var(--nf-focus-halo); } .launch-signup-input[aria-invalid="true"] { border-color: var(--nf-plate-red-text); box-shadow: inset 0 0 0 1px var(--nf-plate-red-text); } .launch-signup .launch-signup-submit { flex: 0 0 auto; border-color: var(--launch-ink); cursor: pointer; font: inherit; font-weight: var(--nf-weight-semibold); } .launch-signup .launch-signup-submit[disabled] { cursor: progress; opacity: 0.8; } .launch-signup-note, .launch-signup-status { margin: 0; font-size: var(--nf-text-sm); color: var(--launch-ink-soft); } .launch-signup-status { min-block-size: 2.8em; } .launch-signup-status:empty { visibility: hidden; } .launch-signup-status:focus { outline: var(--nf-focus-ring-width) solid var(--nf-focus); outline-offset: var(--nf-focus-ring-offset); } .launch-signup-status[data-tone="ok"] { color: var(--launch-ink); font-weight: var(--nf-weight-semibold); } .launch-signup-status[data-tone="error"] { color: var(--nf-plate-red-text); font-weight: var(--nf-weight-semibold); } /* Honeypot: off-screen for people, still in the form for bots. */ .launch-signup-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; } main section.page-intro, main section.module-grid, main section.workflow, main section.prose, main section.page-cta, main section.product-preview, main section.story-band, main section.tour-row { width: min(var(--nf-measure), calc(100% - 2rem)); margin-inline: auto; max-width: min(var(--nf-measure), 100%); padding-block: var(--nf-space-5); } /* Full-bleed alternating surfaces (keep inner content on the measure) */ main section.band-alt, main section.band-accent, main section.proof-strip, main section.pain-band { width: 100%; max-width: none; margin-inline: 0; padding-inline: max(var(--nf-band-inset), calc((100% - min(var(--nf-measure), 100% - 2rem)) / 2)); box-sizing: border-box; } main section.tour-row.band-alt { width: 100%; max-width: none; margin-inline: 0; padding-inline: max(var(--nf-band-inset), calc((100% - min(var(--nf-measure), 100% - 2rem)) / 2)); display: grid; } /* OWNER/audit 2026-08-03: this was `margin-inline: auto`, so the intro block centred inside the content column while every H2, grid and button below it started at the column edge - a 192px indent between a page title and its own page, measured on 10 of 11 routes. Cap the measure, keep the left edge. */ main section.page-intro { max-width: 46rem; margin-inline: 0; } .page-intro .lede, .section-lede { color: var(--nf-muted); max-width: 40rem; } .module-cards { display: grid; gap: var(--nf-space-3); margin: var(--nf-space-4) 0 0; padding: 0; list-style: none; } @media (min-width: 720px) { .module-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .module-cards.module-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .module-card { padding: var(--nf-space-4); border: 2.5px solid var(--nf-stroke); border-radius: var(--nf-radius-card); background: var(--nf-card); box-shadow: var(--nf-shadow-panel); transition: transform var(--nf-motion) ease, box-shadow var(--nf-motion) ease; } .module-card:hover { transform: translateY(-2px); box-shadow: var(--nf-shadow-lg); } .module-card.tint-red { background: var(--nf-tint-red); } .module-card.tint-cream { background: var(--nf-surface-2); } .module-icon { width: 3rem; height: 3rem; display: block; margin: 0 0 var(--nf-space-2); } .module-card h3 { font-family: var(--nf-font-display); font-size: var(--nf-text-xl); font-weight: var(--nf-weight-bold); margin: 0.35rem 0 var(--nf-space-2); } .module-card p:last-child { margin-bottom: 0; } /* The card is an
  • with no display of its own, so its slack fell under the trailing link: a card whose copy ran one line shorter left that link 23-24px above its row-mates. Measured on all four pages that use this component -- features 23, integrations 23, pricing 24, community 23 -- and every one goes to 0 with the trailing element pushed to the end of a column flex. Flex does not collapse adjacent margins, and the icon's 8px bottom margin was collapsing with the heading's 0.35rem top margin to 8px. Left alone that gap would become 13.6px and every icon card would grow 5.6px, so the heading's top margin is dropped exactly where an icon precedes it. Card heights are then identical to the pixel on all four pages; only the link moves. */ .module-card { display: flex; flex-direction: column; } .module-card > :last-child { margin-block-start: auto; } .module-card > .module-icon + h3 { margin-block-start: 0; } /* Readiness badges (Variant B): set like print job tickets — mono, square, one ink each. Red plate = proven on the floor, cyan outline = on press, grey outline = not yet scheduled. */ .badge { display: inline-block; margin: 0; padding: 0.2rem 0.55rem; border-radius: var(--nf-radius-ctl); border: 1px solid transparent; font-family: var(--nf-font-mono); font-size: var(--nf-text-2xs); font-weight: var(--nf-weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; } /* Doubled class (.badge.badge-*): container rules like `.tour-copy p` carry (0,1,1) specificity and silently took the badge's ink otherwise. */ .badge.badge-beta { /* Tenant-reachable now: the key plate, full ink. */ background: var(--nf-ink); color: var(--nf-cream); } .badge.badge-owner-live { /* Proven on the Legacy Nexus floor: the magenta plate (per Variant B). */ background: var(--nf-cta-bg); color: var(--nf-cta-fg); } .badge.badge-in-progress { background: transparent; color: var(--nf-plate-c-text); border-color: var(--nf-plate-c-text); } .badge.badge-planned { background: transparent; color: var(--nf-muted); border-color: var(--nf-border); } /* #780 — comic-operations lifecycle rail. Long-box rhythm: a spine down the left edge of every step, a halftone wash, an issue marker, and floor-language chips (grade, quantity, box location, listing state) instead of a flat equal-card grid. */ /* NF-2057 Part 2 (Variant B): the rail is a press sheet — panels sit flat in a visible gutter grid instead of floating as six identical cards. The lead panel and the List panel take wider columns so the run has rhythm. */ .flow-rail { display: grid; gap: var(--nf-space-1); margin: var(--nf-space-4) 0 0; padding: var(--nf-space-1); list-style: none; background: var(--nf-gutter); border: 1px solid var(--nf-border); } @media (min-width: 640px) { .flow-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .flow-rail { grid-template-columns: 1.35fr 1fr 1fr; } .flow-step:nth-child(4) { grid-column: 1 / span 2; } } .flow-step { position: relative; display: flex; flex-direction: column; gap: var(--nf-space-2); margin: 0; padding: var(--nf-space-3); background: var(--nf-step-bg); } .flow-step .badge { align-self: flex-start; } .issue-marker { margin: 0; font-family: var(--nf-font-mono); font-size: var(--nf-text-2xs); font-weight: var(--nf-weight-medium); letter-spacing: 0.16em; text-transform: uppercase; color: var(--nf-muted); } .issue-marker span { display: inline-block; margin-left: 0.35rem; color: var(--nf-accent); font-size: var(--nf-text-md); font-weight: var(--nf-weight-bold); letter-spacing: 0.06em; } .flow-step h3 { margin: 0; font-family: var(--nf-font-display); font-size: var(--nf-text-xl); font-weight: var(--nf-weight-bold); letter-spacing: 0.02em; text-transform: none; } .flow-copy { margin: 0; color: var(--nf-ink-soft); font-size: var(--nf-text-lg); } .flow-chips { display: flex; flex-wrap: wrap; /* Rounded chips never touch: one 8px step between them. */ gap: var(--nf-space-2); margin: auto 0 0; padding: var(--nf-space-2) 0 0; list-style: none; } .flow-chips li { margin: 0; /* #6016 — was 0.15rem (2.4px) vertical: on no scale, and the tightest vertical padding anywhere on the portal. space-1 is the floor. */ padding: var(--nf-space-1) var(--nf-space-2); border: 2px solid var(--nf-stroke); border-radius: var(--nf-radius-ctl); background: transparent; color: var(--nf-fg); font-family: var(--nf-font-mono); font-size: var(--nf-text-xs); font-weight: var(--nf-weight-semibold); letter-spacing: 0.06em; max-width: 100%; } .readiness-legend { display: grid; gap: var(--nf-space-2); margin: var(--nf-space-3) 0 0; padding: 0; list-style: none; color: var(--nf-muted); font-size: var(--nf-text-md); } @media (min-width: 900px) { .readiness-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .readiness-legend li { margin: 0; } .readiness-legend .badge { margin-right: 0.4rem; vertical-align: baseline; } .proof-list .badge { margin-bottom: var(--nf-space-2); } .diagram { margin: var(--nf-space-4) 0 0; padding: 0; } .diagram img { width: 100%; height: auto; border: 1px solid var(--nf-stroke); border-radius: var(--nf-radius-panel); box-shadow: var(--nf-shadow-panel); background: var(--nf-card); display: block; } .diagram figcaption { margin-top: var(--nf-space-2); color: var(--nf-muted); font-size: var(--nf-text-lg); } /* #827 — compact product-led commerce stories (shared tokens only; no forked theme) */ .commerce-story { margin: var(--nf-space-4) 0 0; padding: 0; } .commerce-story img { width: 100%; height: auto; max-height: 16rem; object-fit: contain; object-position: left center; border: 1px solid var(--nf-stroke); border-radius: var(--nf-radius-panel); box-shadow: var(--nf-shadow-panel); background: var(--nf-card); display: block; } .commerce-story figcaption { margin-top: var(--nf-space-2); color: var(--nf-muted); font-size: var(--nf-text-lg); } .commerce-outcomes { margin: var(--nf-space-4) 0 0; padding-left: 1.25rem; color: var(--nf-fg); } .commerce-outcomes li { margin-bottom: var(--nf-space-2); } .commerce-outcomes strong { color: var(--nf-accent); } .commerce-mini-grid { display: grid; gap: var(--nf-space-3); margin-top: var(--nf-space-4); } @media (min-width: 768px) { .commerce-mini-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .commerce-mini { margin: 0; padding: var(--nf-space-3); background: var(--nf-card); border: 2.5px solid var(--nf-stroke); border-radius: var(--nf-radius-card); box-shadow: var(--nf-shadow-panel); } .commerce-mini h3 { margin: 0 0 var(--nf-space-2); font-size: var(--nf-text-lg); font-family: var(--nf-font-display); } .commerce-mini p { margin: 0 0 var(--nf-space-2); color: var(--nf-muted); font-size: var(--nf-text-md); } .commerce-mini-outcome { margin: 0 !important; color: var(--nf-fg) !important; font-weight: var(--nf-weight-semibold); font-size: var(--nf-text-md) !important; } .page-cta { display: flex; flex-wrap: wrap; gap: var(--nf-space-3); padding-block: var(--nf-space-5); align-items: flex-start; } .notice { max-width: 40rem; margin: var(--nf-space-4) 0 0; padding: var(--nf-space-3) var(--nf-space-4); border: 2.5px solid var(--nf-stroke); border-left: 6px solid var(--nf-accent); border-radius: var(--nf-radius-ctl); background: var(--nf-surface); box-shadow: var(--nf-shadow-panel); } .eyebrow { text-transform: uppercase; letter-spacing: 0.16em; font-family: var(--nf-font-mono); font-size: var(--nf-text-xs); font-weight: var(--nf-weight-semibold); color: var(--nf-red-text); margin: 0 0 var(--nf-space-2); } /* Registration dash: the red plate leads every eyebrow (owner 2026-09-11). */ .eyebrow::before { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--nf-red-text); vertical-align: middle; margin-right: 0.5rem; } /* Press-sheet seams: a registration rule between stacked sections on the measure. Bands carry their own border-block, so both neighbours must be band-free or the seam doubles into a 2px line. */ main > section:not(.band-alt):not(.band-accent) + section:not(.band-alt):not(.band-accent) { border-top: 1px solid var(--nf-border); } /* Preserve deliberately authored Title Case while retaining the display face. */ .page-index main h2, .page-index .cta-heading { text-transform: none; } /* #6016 — the home-only heading ramp is gone: display-3 is the section-head step everywhere, so this rule said nothing the base rule did not. It was the third of three different curves for one semantic level. */ /* Anton is condensed by design; the old negative tracking (tuned for the system stack) makes its glyphs collide. One late override wins them all. */ .wordmark, .hero-copy h1, .pain-inner h2, .story-band h2, .tour-copy h2, .cta-heading, .product-preview h2, .page-intro h1, .workflow h2, .module-grid h2, .prose h2 { letter-spacing: 0.01em; } /* The footer owns the full viewport edge; only its navigational content keeps the page measure. It cannot read as a second floating panel below main. */ .site-footer { width: 100%; border-top: 1px solid var(--nf-border); padding-block: var(--nf-space-5); margin: var(--nf-space-4) 0 0; background: var(--nf-footer-bg); color: var(--nf-footer-ink); border-radius: 0; } .site-footer nav { width: min(var(--nf-measure), calc(100% - 2rem)); margin-inline: auto; display: flex; flex-wrap: wrap; gap: var(--nf-space-3); align-items: center; } #portal-shortcut-help-slot { display: flex; margin-inline-start: auto; } .site-footer a { display: inline-flex; align-items: center; justify-content: center; /* Height was 44px but width was never constrained, so short labels ("FAQ" 28.5px, "Terms" 42.2px) failed WCAG 2.5.5 on the narrow axis. */ min-height: 44px; min-width: 44px; color: var(--nf-footer-muted); text-decoration: none; } .site-footer a:hover { color: var(--nf-footer-link); } .site-footer a[aria-current="page"] { font-weight: var(--nf-weight-bold); color: var(--nf-footer-link); text-decoration: underline; text-decoration-thickness: 0.15em; text-underline-offset: 0.2em; } @media (max-width: 720px) { #portal-shortcut-help-slot { flex-basis: 100%; margin-inline-start: 0; } .nav-toggle { display: block; } .nav-primary-desktop { display: none; } .nav-toggle[open] .nav-list { display: flex; flex-direction: column; margin-top: var(--nf-space-2); } } /* OP03: seasonal scenery belongs in the gutters while every Home section uses one outer measure and one readable panel silhouette. The page itself remains transparent, so this does not recreate the discarded giant wrapper. */ :root[data-nf-theme-family="midnight-harvest"] .page-index main > .hero-band, :root[data-nf-theme-family="midnight-harvest"] .page-index main > section { width: min(var(--nf-measure), calc(100% - 2rem)); max-width: min(var(--nf-measure), calc(100% - 2rem)); margin-inline: auto; box-sizing: border-box; } :root[data-nf-theme-family="midnight-harvest"] .page-index main > section { padding-inline: var(--nf-band-inset); border-radius: var(--nf-radius-panel); background: var(--nf-surface); } /* Rounded panels never touch (owner, 2026-09-25): every panel after the hero keeps one step of scenery between itself and the panel above, the same gap the hero band already leaves below itself. */ :root[data-nf-theme-family="midnight-harvest"] .page-index main > section:not(:first-child) { margin-block-start: var(--nf-space-4); } :root[data-nf-theme-family="midnight-harvest"] .page-index main > .hero-band > section.hero { width: 100%; } /* #11969: on Halloween Dark the hero plate, its readability scrim, the signup note plate and the secondary CTA tints follow the purple surface ladder instead of the site-chrome navy, and the panel carries a rim so it separates from the purple canvas. Halloween Light keeps the dark plate. */ :root[data-nf-theme-family="midnight-harvest"][data-theme="dark"] .page-index main > .hero-band { --nf-hero-plate: var(--nf-surface); } :root[data-nf-theme-family="midnight-harvest"][data-theme="dark"] .page-index main > .hero-band > section.hero { box-shadow: 0 0 0 1px var(--nf-border), 0 0 0 3px color-mix(in srgb, var(--nf-cta-bg) 18%, transparent), 0 28px 56px -28px color-mix(in srgb, var(--nf-cta-bg) 45%, transparent), var(--nf-shadow-panel); } @media (max-width: 720px) { :root[data-nf-theme-family="midnight-harvest"] .page-index main > .hero-band, :root[data-nf-theme-family="midnight-harvest"] .page-index main > section { width: calc(100% - 2rem); max-width: calc(100% - 2rem); } } @media (min-width: 721px) { .nav-toggle { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; /* Beta, cp and talk have always neutralised keyframe animation here; the * portal declared only transitions, so this block would have let the first * @keyframes anyone added run at full speed for someone who asked the OS * for none. There is no such animation in this file today -- that is why * nobody noticed, and why it is worth closing before there is. */ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } } /* #778 — mobile sticky Request Beta Access (44px tap) */ .mobile-sticky-cta { display: none; } /* #6016. Everything inside this block is written for a phone - safe-area insets, the iOS toolbar-animation strip, a `hover: hover` guard on the blur, thumb reach - but it ran to 1199px, which is every tablet and every small laptop window. At 1000px the bar sat over the page duplicating an "Explore the Demo" button that was plainly visible in the hero at the same moment, and `body:has(.mobile-sticky-cta)` reserved 88px of viewport for it on machines that never needed it. 720px is the portal's own mobile boundary: six rules already use `max-width: 720px` and four its `min-width: 721px` counterpart. Neither `min-width: 1200px` block in this file pairs with this one - both are tour/hero column layout - so there is no gap to leave behind. */ @media (max-width: 720px) { .mobile-sticky-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--nf-layer-chrome); justify-content: center; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0)); background: var(--nf-bg); border-top: 2.5px solid var(--nf-stroke); /* own compositor layer: momentum scroll is driven off the main thread, and a non-promoted fixed element visibly trails it on iOS */ transform: translateZ(0); backface-visibility: hidden; will-change: transform; } /* iOS positions fixed elements against the layout viewport while the browser toolbar animates, which opens a strip under the bar. This paints the bar's own background into that strip, off-screen, so the transient gap shows the bar's colour instead of the page scrolling past underneath it. */ .mobile-sticky-cta::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; /* ink, not page colour: this strip is only ever seen for the moment the iOS toolbar animates, and black continues the bar's own top border instead of reading as a second white band under the button (owner) */ background: var(--nf-fg); pointer-events: none; } /* the blur re-samples the page behind it every frame, which is what made the lag visible in the first place; keep it only where a pointer implies a device that can afford it */ @media (hover: hover) and (pointer: fine) { .mobile-sticky-cta { background: color-mix(in srgb, var(--nf-bg) 92%, transparent); backdrop-filter: blur(8px); } } /* WCAG 2.2 SC 2.4.11 Focus Not Obscured: Tab scrolls a target flush to the viewport bottom, which is where the fixed bar is. Stop the scroller short of it, or focused footer links land behind the bar. */ html { scroll-padding-bottom: 6.5rem; } .mobile-sticky-cta .nav-cta { width: min(100%, 24rem); min-height: 44px; justify-content: center; } body:has(.mobile-sticky-cta) { padding-bottom: 5.5rem; } /* #6016 CONTINUED - THE PHONE HALF OF THE OBJECTION ABOVE. Narrowing the query to 720px fixed the tablet and small-laptop case. Below 720px the bar still duplicates a demo button that is on screen at the same moment, and now it clips the row that button sits in. Measured on the live apex and against the built artifact, 2026-09-06, scrollY 0, signed OUT, as the viewport-clipped intersection of each control with the bar (a bar parked off-screen occludes nothing; a control below the fold is not covered): 390x844 bar 774..844 Explore the Demo and Sign In 765..809, 35px of a 44px control behind the bar, both of them 360x800 bar 730..800 Request Beta Access 704..748, 18px of 44 behind the bar - the PRIMARY call to action 414x896 bar 826..896 row 580..684 - clear 430x932 bar 862..932 row 581..685 - clear 375x667 bar 597..667 row 704..808 - below the fold, never in contention 320x568 bar 498..568 row 805..969 - below the fold Signed IN the numbers move: portal_identity.js rewrites the third button from Sign In to Account, and at 360 that re-wraps the row from two lines to three, which put Request Beta Access at 756..800 - the whole control behind the bar. Worse, not better, and the same defect. THE OVERLAP TRACKS TEXT WRAPPING, NOT VIEWPORT HEIGHT. The h1 and the lede wrap to fewer lines from 414px up and carry the row ~125px higher; the tall 420px-class phones are the ones that clear. So there is no padding, margin or reserved strip that can hold the row off the bar - the number it would have to be changes with how the copy happens to break. The bar has to know where the row is, which is /scripts/sticky_cta.js: an IntersectionObserver that sets data-sticky-cta on the body, dormant while the row is on screen and revealed once it has gone. That is what a sticky CTA is FOR - re-offering an action after the original scrolls away - so the bar stops being a duplicate as well as stopping being an occluder. Gated on `body:has(.hero-actions)` rather than on the route, so the eleven routes with no hero CTA row keep today's always-on bar and a route that grows one is covered without editing this block. `visibility`, not `opacity`: a bar that is merely transparent still takes the tap and still takes Tab, which is the WCAG 2.2 SC 2.4.11 failure the scroll-padding rule above exists to prevent. `translate3d` and not `translateY` because the base rule promotes this element with `translateZ(0)`, and a 2D transform here would demote it and hand back the iOS momentum-scroll trailing that promotion was added to cure. Neither the 5.5rem body padding nor the 6.5rem scroll padding is conditional: both concern the foot of the document, where the bar is always revealed. */ body:has(.hero-actions) .mobile-sticky-cta { visibility: hidden; transform: translate3d(0, 100%, 0); transition: transform var(--nf-motion-slow) ease, visibility var(--nf-motion-slow) ease; } body[data-sticky-cta="revealed"]:has(.hero-actions) .mobile-sticky-cta { visibility: visible; transform: translate3d(0, 0, 0); } /* NF-782 — the 16rem cap is a desktop density control. Against the portrait mobile source it becomes the binding constraint and scales the art down to ~205px wide, which is exactly the illegibility the art direction exists to avoid. Let the phone composition use the full column. */ .commerce-story img { max-height: none; object-position: center; } /* NF-778 — art-direct the hero BOX to match the art-directed hero SOURCE. index.html swaps in product-hero-mobile.svg at this same breakpoint, and that asset is a 720x960 portrait phone composition. Left in the desktop 16/10 box it rendered at 47% of the available width, so the purpose-built mobile art came out smaller than the desktop art it replaced. 24rem wide at 3/4 is exactly 32rem tall, so max-height never clamps the shape. 2026-08-03: the compact art now serves up to 1199px (below that the desktop mock's labels fall under 9px), so THIS BOX MOVES WITH IT. The box and the source must share one breakpoint or the portrait composition gets letterboxed into a landscape frame - which is exactly what NF-778 caught. */ .hero-visual { aspect-ratio: 3 / 4; width: min(100%, 24rem); max-height: 32rem; } } /* High browser zoom and landscape phones leave too little height for a fixed duplicate CTA. Keep the normal navigation/hero links and return that space to the document, including the footer's scroll and padding reservation. */ @media (max-width: 720px) and (max-height: 480px) { .mobile-sticky-cta { display: none; } html { scroll-padding-bottom: var(--nf-space-2); } body:has(.mobile-sticky-cta) { padding-bottom: 0; } } /* SF-037 contact form */ .contact-form { max-width: 32rem; margin-top: var(--nf-space-4); } .contact-form .field { margin: 0 0 var(--nf-space-3); } .contact-form label { display: block; font-size: var(--nf-text-md); margin-bottom: var(--nf-space-2); font-weight: var(--nf-weight-semibold); } .contact-form .optional { color: var(--nf-muted); font-weight: var(--nf-weight-regular); } .contact-form input, .contact-form select, .contact-form textarea { width: 100%; /* Native validation scrolls the first invalid field into view. Reserve its preceding label and focus halo instead of aligning the input to the edge. */ scroll-margin-block: var(--nf-space-5); /* #6016 — a form control is inline-block by default, so it sits on the text baseline and the line box keeps descender room UNDER it. That reserved strip measured 3px here: the gap below a field was 3px larger than the 8px above it, on no scale and for no reason a reader could see. Making it a block box removes the baseline entirely. */ display: block; padding: 0.6rem 0.75rem; border: 1px solid var(--nf-control-border); border-radius: var(--nf-radius-ctl); background: var(--nf-surface); color: var(--nf-fg); font: inherit; height: auto; /* NF-782: 2.25rem = 36px missed the 44px tap floor on every field. */ min-height: 44px; box-sizing: border-box; } .contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible { outline: var(--nf-focus-ring-width) solid var(--nf-focus); outline-offset: var(--nf-focus-ring-offset); /* 5px, not 8px: this ring sits at 1-3px, so the halo only needs to reach 5px to flank it. Fields sit shoulder to shoulder in this form and an 8px band would bridge the gap to the next one. */ box-shadow: 0 0 0 5px var(--nf-focus-halo); } /* #7893: a field left invalid (after a blocked send, or after the reader edits it and moves on) gets a 2px danger edge and the message contact.js writes under it. The inset shadow doubles the border without moving the layout, and the thicker edge keeps the state from resting on colour alone. contact.js sets aria-invalid, so what the eye sees and what a screen reader hears come from the same state. */ .contact-form input[aria-invalid="true"], .contact-form textarea[aria-invalid="true"] { border-color: var(--nf-t-danger); box-shadow: inset 0 0 0 1px var(--nf-t-danger); } .contact-form input[aria-invalid="true"]:focus-visible, .contact-form textarea[aria-invalid="true"]:focus-visible { box-shadow: inset 0 0 0 1px var(--nf-t-danger), 0 0 0 5px var(--nf-focus-halo); } .contact-form .field-error { display: block; margin-top: var(--nf-space-2); color: var(--nf-t-danger); font-size: var(--nf-text-sm); font-weight: var(--nf-weight-semibold); } .contact-form .field-error[hidden] { display: none; } .contact-form button[type="submit"], .contact-form .submit-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: var(--nf-cta-bg); color: var(--nf-cta-fg); border: 1px solid var(--nf-cta-edge); border-radius: var(--nf-radius-ctl); padding: 0.55rem 1.1rem; font: inherit; font-weight: var(--nf-weight-semibold); cursor: pointer; } /* ═══════════ OWNER RULING 2026-08-02: PRESS-SHEET DIES AS A VISUAL SYSTEM "P0-2: kill as visuals, keep as copy voice." The comic press sheet stays in the WORDS - "issue", "long box", "on the floor", "owner-proven". It leaves the PIXELS entirely. Every ornament rejected across this session came out of this vocabulary: registration crosshairs, Ben-Day clusters, misregistered heading plates, the two-block gutter dividers, the corner bursts. Removing them one at a time treated symptoms; this removes the source. Killed here: the hero halftone field, the crop marks on the trim, the halftone screens over imagery, the conversion-band wash, and the misregistered two-plate offset shadow. What is left is the app's own language: surface, border, corner, one shadow, colour that means something. Overrides rather than deletions, so the removed system stays legible in one place and any single piece is a one-line restore. */ /* Hero: no halftone field. The CROP MARKS STAY, restored at the owner's request: "where did the 4 corners around the top area go? I liked those, it made the very top/most important section more prominent." That is the right call and it survives the press-sheet cull on its own merits. The design skill bans hairline marks "as decoration" and then qualifies it: "use them only when they organize real content." Four corner brackets around the hero delimit the single most important region on the page. They are doing layout work, not evoking a pressroom, and they would earn their place on a page that had never heard of a press sheet. The halftone field beneath them does not clear that bar: it was texture for texture's sake, and it stays dead. */ .hero-band::before { content: none; } /* Imagery: no halftone screen over the art. */ .hero-stack::after, .tour-figure::after { content: none; } /* Conversion band: no magenta wash. */ .page-cta.band-accent::before { content: none; } /* The misregistered plate offset becomes one ordinary shadow. The offset WAS the press metaphor: two plates deliberately out of register. Without the metaphor it is just a coloured smear behind a card. */ .nf-plate, .hero-visual, .proof-list li, .page-index .tour-visual { box-shadow: var(--nf-shadow-panel); } /* ═══════ v13: IMAGERY CONTAINERS — ONE STATIC TREATMENT, OUTLINED, NO HOVER OWNER AUDIT 2026-08-02: "The stock image containers are inconsistent static designs. Some have mouseover effects, some don't. No mouseover unless it is actually a clickable link. They definitely need to be outlined instead of blending into the container." Audit findings, and the rule each one broke: - .tour-figure:hover translated and revealed a shadow; .hero-visual had no hover at all. Neither is a link (verified: no /