/* GENERATED FILE -- DO NOT EDIT. Source: tools/njforms.css File-sha256: 42a14967057ea79e5237aadc09d7489dee0b2464602fd2a46df24f3601505b56 prettify.py rewrites this on every deploy; an edit here is silently discarded and the deploy still reports PASS. See njcourtforms-issues#45. */ /* ========================================================================== NJ Court Form Walkthroughs — stylesheet (v2 redesign) A calm, authoritative civic-tech look for self-represented litigants. Warm paper + deep judicial navy + a single brass accent. SELF-HOSTED fonts (still CSP-safe: same-origin woff2, no external host, no Google Fonts — a third-party font request on a site taking restraining-order intake is a privacy leak, so the faces are served from this package). Source Serif 4 for display AND body; JetBrains Mono for labels only. Mobile-first. Theme-aware. WCAG AA. THIS FILE IS THE SOURCE. prettify.py:140 reads it and WRITES data/static/njforms.css — editing that copy looks like it works and is silently reverted by the next deploy. (Learned the hard way 2026-08-21.) Loaded by docassemble over Bootstrap 5; overrides via class + id selectors. ========================================================================== */ /* ---- Faces --------------------------------------------------------------- The same three files jacobrakai.org serves, copied into this package rather than linked from fonts.googleapis.com. Self-hosting is the whole point: a font CDN sees the IP of every person who opens a restraining-order form. font-display:swap so text paints in Charter immediately, never blocking on the download. -------------------------------------------------------------------------- */ @font-face { font-family:'Source Serif 4'; src:url('source-serif-regular.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; } @font-face { font-family:'Source Serif 4'; src:url('source-serif-italic.woff2') format('woff2'); font-weight:400 700; font-style:italic; font-display:swap; } @font-face { font-family:'JetBrains Mono'; src:url('jetbrains-mono-regular.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; } /* ---- Design tokens ------------------------------------------------------- */ :root { /* Type — one deliberate scale (~1.25 major third), base 17px ------------- */ /* Body copy moved from the system sans stack to Source Serif 4 on 2026-08-21. The old pairing — system-ui sans + rounded drop-shadow cards — is the default output of every UI framework, which is exactly why the site read as assembled rather than written. Charter stays as the fallback: it ships on most Apple devices and is metrically close, so a failed font load degrades quietly. --nj-sans is deliberately GONE rather than repointed at a serif; a token named "sans" holding a serif stack is a trap for the next reader. */ --nj-serif: 'Source Serif 4', Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, "Noto Serif", serif; --nj-body: var(--nj-serif); --nj-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-xs: .78rem; /* 13 — badges, meta */ --fs-sm: .875rem; /* 15 — help text, chips */ --fs-base: 1rem; /* 17 — body */ --fs-md: 1.15rem; /* 20 — lead paragraph */ --fs-lg: 1.4rem; /* 24 — section / summary */ --fs-xl: 1.75rem; /* 30 — question H1 */ --fs-2xl: 2.15rem; /* 37 — hero display */ /* Spacing — 8px-ish rhythm ---------------------------------------------- */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; /* Shape — restrained, document-like ------------------------------------- */ --nj-radius: 6px; --nj-radius-sm: 4px; --nj-pill: 999px; --nj-shadow: 0 1px 2px rgba(24,30,38,.05); --nj-shadow-stuck:0 6px 14px rgba(24,30,38,.10); --nj-tap: 48px; /* Color — warm paper, judicial navy, one brass accent -------------------- */ --nj-paper: #f5f2ec; /* warm off-white, reads like paper not template */ --nj-surface: #ffffff; --nj-surface-2: #faf7f1; /* subtle raised / hover */ --nj-line: #e4dfd4; /* warm hairline */ --nj-line-2: #d0c9ba; /* stronger divider */ --nj-ink: #201d17; /* near-black, warm */ --nj-ink-2: #443f37; --nj-muted: #5c554a; /* AA on paper */ /* --nj-ink-soft was used in 8 selectors and defined NOWHERE, so light mode's #5c554a fallback won in dark mode too. Measured on prod 2026-08-24: .nj-legend at 2.00:1 against #26282e, where AA needs 4.5:1. Aliasing --nj-muted fixes both schemes at once, because --nj-muted is already redefined in both dark blocks (#9a9388). .nj-cat-count measured 4.84:1 and passed only because a dark rule happens to override its colour -- the blast radius is every one of the 8 NOT separately overridden. */ --nj-ink-soft: var(--nj-muted); --nj-navy: #123a5e; /* brand / primary action */ --nj-navy-strong: #0d2b46; --nj-navy-tint: #eaeff4; /* faint navy wash for row hover */ --nj-link: #124a73; /* ~7:1 on white */ --nj-brass: #9a6b1a; /* signature accent — used sparingly */ /* The focus ring is a non-text UI component: it needs 3:1 against whatever it sits on (WCAG 2.1 SC 1.4.11). At .32 it composited to #acb7bf on the paper = 1.83:1. At .55 it is 3.09:1 on --nj-paper and 3.20:1 on a white card. */ --nj-focus: rgba(18,58,94,.55); /* Form controls */ --nj-field-bg: #ffffff; --nj-field-ink: #201d17; --nj-field-line: #b9b1a2; /* Status */ --nj-ok: #1f6b45; --nj-ok-bg: #e7f2ea; --nj-warn-bg:#fbf1de; --nj-warn-ln:#e0c184; } /* ---- Base ---------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; } body { background: var(--nj-paper); color: var(--nj-ink); font-family: var(--nj-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- Container width ----------------------------------------------------- Direction A, 2026-08-21. 760px used ~63% of a 1200px window and less of a wider one, which is most of why the page read as a component-library demo rather than a document. THE TRAP, found by injecting the naive fix on the live page: Bootstrap's .container is shared by nav.navbar, so simply raising the cap widens the header too and the Quick exit button collides with "How this works". The nav therefore gets its OWN inner width below, independent of this one. Reading measure is NOT widened by this: #daquestion keeps its 42rem cap, so question prose stays at a readable line length. What gets the extra room is the catalog, the guided-path list and the filters — the scannable material, which is exactly what benefits from it. ---------------------------------- */ .container { max-width: 1200px; } /* THE NAV MUST RESERVE THE QUICK-EXIT ZONE, and this is where I got it wrong the first time: I widened the nav container to 1200 and wrote a comment claiming it "keeps the old measure", which it did not. Verify the property, not the comment. .nj-qexit is position:fixed against the VIEWPORT (top:10px right:12px, ~152px wide), while the nav container is centred and capped. At a 1200px viewport the widened nav's right edge lands at ~1188 and the button starts at ~1036 — a 150px overlap that the old 760px container had accidentally avoided. The existing padding-right:150px at .danavbar-title does NOT cover this: that element is display:none in the bar. So the room is reserved on the nav container itself, at every width. */ nav.navbar > .container, nav.navbar > .container-fluid { max-width: 1200px; margin-inline: auto; /* 152px button + 12px viewport offset + 36px air. Measured: at a 1200px viewport 176px left only 12px of gap, which one longer nav label would eat. Clearance at 1200/1440/1920 is now 36/132/372px. */ padding-right: 200px; } @media (max-width: 767.98px) { /* Below the collapse breakpoint the button becomes a full-width bar under the header (see the .nj-qexit block), so the reservation is not needed and would just squeeze the brand. */ nav.navbar > .container, nav.navbar > .container-fluid { padding-right: var(--sp-4); } } /* Serif display headings — the single biggest "not-a-template" signal */ h1, h2, h3, h4, .nj-hero h2, #daquestion h1 { font-family: var(--nj-serif); color: var(--nj-ink); font-weight: 700; letter-spacing: -.005em; line-height: 1.18; } #daquestion h1 { font-size: var(--fs-xl); margin: .1rem 0 var(--sp-4); } #dabody { padding-top: var(--sp-5); padding-bottom: var(--sp-7); } /* Interview question body: bounded measure, generous rhythm */ #daquestion { max-width: 42rem; } #daquestion p, #dasubquestion p { max-width: 40rem; } #daquestion hr { border: 0; border-top: 1px solid var(--nj-line); margin: var(--sp-4) 0; } a { color: var(--nj-link); text-underline-offset: 2px; } a:hover { color: var(--nj-navy-strong); } /* Keyboard focus, everywhere */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, .nj-chip:focus-visible { outline: 3px solid var(--nj-focus); outline-offset: 2px; border-radius: var(--nj-radius-sm); } /* ---- Top navigation ------------------------------------------------------ */ nav.navbar { background: var(--nj-navy-strong) !important; border: 0; border-bottom: 3px solid var(--nj-brass); /* thin brass rule = the signature */ box-shadow: none; } nav.navbar .navbar-brand, nav.navbar a, nav.navbar .navbar-text { color: #fff !important; } nav.navbar .navbar-brand { font-family: var(--nj-serif); font-weight: 700; letter-spacing: -.005em; } /* ---- Buttons ------------------------------------------------------------- */ .btn { border-radius: var(--nj-radius); font-weight: 600; min-height: var(--nj-tap); padding: .65rem 1.4rem; } .btn-primary { background: var(--nj-navy); border-color: var(--nj-navy); font-size: 1.05rem; } .btn-primary:hover, .btn-primary:focus { background: var(--nj-navy-strong); border-color: var(--nj-navy-strong); } .btn-primary:active { transform: translateY(1px); } .btn-secondary, .btn-outline-secondary { background: var(--nj-surface); color: var(--nj-ink); border-color: var(--nj-line-2); } /* The main Continue action: give it real presence. */ #dabottomcontent { margin-top: var(--sp-5); } #dabottomcontent .btn-primary { min-height: 52px; padding-left: 1.7rem; padding-right: 1.7rem; } @media (max-width: 575px) { #dabottomcontent .btn-primary, #dasource + * .btn-primary { width: 100%; } } /* ---- Form controls (interview pages) ------------------------------------- */ label { font-weight: 600; color: var(--nj-ink); margin-bottom: .3rem; } .form-group, .da-field-container { margin-bottom: var(--sp-5); } input.form-control, select.form-control, textarea.form-control { background: var(--nj-field-bg); color: var(--nj-field-ink); border: 1px solid var(--nj-field-line); border-radius: var(--nj-radius-sm); padding: .7rem .85rem; min-height: var(--nj-tap); font-size: 16px; /* stops iOS focus-zoom */ line-height: 1.4; } textarea.form-control { min-height: 6rem; } input.form-control::placeholder, textarea.form-control::placeholder { color: var(--nj-muted); opacity: .85; } input.form-control:focus, select.form-control:focus, textarea.form-control:focus { border-color: var(--nj-navy); box-shadow: 0 0 0 3px var(--nj-focus); outline: none; } .form-check, .da-field-checkboxes .form-check { padding: .4rem 0 .4rem 1.95rem; } .form-check-input { width: 1.2rem; height: 1.2rem; margin-top: .28rem; } .form-check-input:checked { background-color: var(--nj-navy); border-color: var(--nj-navy); } .form-check-label { font-weight: 500; } .help-block, small, .dahelp, .form-text { color: var(--nj-muted); font-size: var(--fs-sm); } /* Progress bar — quiet, brand-tinted */ .progress { height: .4rem; border-radius: var(--nj-pill); background: var(--nj-line); } .progress-bar { background: var(--nj-navy); } /* "Step 4 of 13" (njcourtforms-issues#20). These rules were written long before anything emitted the markup; the bar above was styled and unused. Wiring, not rebuilding. */ .nj-progress { margin: 0 0 1rem; } .nj-progress-label { margin: 0 0 .35rem; font-size: var(--fs-sm); color: var(--nj-muted); font-variant-numeric: tabular-nums; } /* The bar must never push the first question below the fold on a phone -- the whole point is orientation, and an indicator that costs her the question it is orienting her to is a net loss. */ @media (max-width: 480px) { .nj-progress { margin-bottom: .6rem; } } /* ========================================================================== Landing page ========================================================================== */ /* The landing repeats its title twice: docassemble renders the `question` text as an H1, and the hero

says nearly the same thing. Keep the H1 for screen readers / the tab, but hide it visually so the hero is the one, strong headline. Scoped by :has() so interview-page H1s are untouched. */ #daquestion:has(.nj-hero) > h1:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- Hero: the page's TOP, not a card floating on it --------------------- Direction A, 2026-08-21. A rounded navy box with a shadow, sitting on cream with margin all round, reads as a template slot that got filled — it is the single most generated-looking element on the page. The same navy, run full width to the viewport edges with the brass rule beneath it, reads as a masthead: the page HAS a top instead of CONTAINING a banner. Negative margins rather than markup surgery: this element is generated by prettify.py inside docassemble's own container, so the full-bleed trick is the honest way to reach the edges without restructuring a page that also renders 2,185 interviews. ------------------------------------------------ */ .nj-hero { position: relative; background: var(--nj-navy-strong); color: #fff; border-radius: 0; padding: var(--sp-7) var(--sp-5) var(--sp-6); margin: 0 calc(50% - 50vw) var(--sp-6); padding-left: max(var(--sp-5), calc(50vw - 600px + var(--sp-5))); padding-right: max(var(--sp-5), calc(50vw - 600px + var(--sp-5))); overflow: hidden; } .nj-hero::before { /* the brass signature rule, now the seam */ content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--nj-brass); } .nj-hero h2 { color: #fff; margin: 0 0 var(--sp-4); font-size: clamp(2.15rem, 1.4rem + 2.2vw, 3.05rem); line-height: 1.08; letter-spacing: -.022em; font-weight: 600; max-width: 17ch; /* a statement, not a paragraph in bold */ text-wrap: pretty; } /* Mono eyebrow above the headline. The one place a label is allowed to shout, and it does it by being small and set in letterspaced caps, not by colour. */ .nj-hero h2::before { content: "Free · No account · Answers erased after 30 minutes"; display: block; font-family: var(--nj-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; color: var(--nj-brass); margin-bottom: var(--sp-4); max-width: none; } .nj-hero p { margin: 0; color: #e9eef4; font-size: var(--fs-md); max-width: 34rem; } .nj-hero .nj-trust { margin-top: var(--sp-4); font-size: var(--fs-sm); color: #cdd8e4; display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; } .nj-hero .nj-trust span { white-space: nowrap; } .nj-hero .nj-trust span::before { content: "✓ "; color: var(--nj-brass); font-weight: 700; } /* ---- Sticky search: the primary way in ---------------------------------- */ /* top must CLEAR the fixed chrome, not sit under it. Measured on prod 2026-08-24 at 360/390px: once actually stuck, elementFromPoint at the search's own centre returned `container danavcontainer` -- the fixed navbar -- so the "primary way in" was not merely obscured, it was unreachable. body carries padding-top:106px (66 navbar + 40 exit bar); .nj-qexit occupies y 56..96. top:0 lands underneath all of it. */ .nj-searchwrap { position: sticky; top: 56px; z-index: 20; background: var(--nj-paper); padding: var(--sp-3) 0 var(--sp-3); margin: 0 0 var(--sp-4); } /* subtle shadow only once it's actually stuck under content */ .nj-searchwrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--nj-line); } #njsearch { width: 100%; font-size: 16px; min-height: 52px; padding: .85rem 1rem .85rem 2.8rem; border-radius: var(--nj-radius); border: 1.5px solid var(--nj-field-line); background-color: var(--nj-surface); color: var(--nj-field-ink); box-shadow: var(--nj-shadow); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235c554a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: .95rem center; } #njsearch:focus { outline: none; border-color: var(--nj-navy); box-shadow: 0 0 0 3px var(--nj-focus); } /* ---- Category jump chips: quiet secondary nav, not a wall of buttons ----- */ .nj-chips { display: flex; flex-wrap: wrap; justify-content: center; /* all 35 visible, centred, wrapping */ gap: .4rem; margin: 0 0 var(--sp-5); } .nj-chip { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); padding: .3rem .7rem; border-radius: var(--nj-pill); background: transparent; border: 1px solid var(--nj-line-2); color: var(--nj-ink-2); text-decoration: none; line-height: 1.3; } .nj-chip:hover { border-color: var(--nj-navy); color: var(--nj-navy); background: var(--nj-navy-tint); } .nj-chip b { color: var(--nj-muted); font-weight: 600; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; } /* ---- Category accordions ------------------------------------------------- */ details.nj-cat { background: var(--nj-surface); border: 1px solid var(--nj-line); border-radius: var(--nj-radius); margin: 0 0 var(--sp-3); overflow: hidden; } details.nj-cat[open] { border-color: var(--nj-line-2); } details.nj-cat > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; padding: var(--sp-4) var(--sp-4); min-height: 56px; user-select: none; } details.nj-cat > summary::-webkit-details-marker { display: none; } .nj-cat-name { font-family: var(--nj-serif); font-size: var(--fs-lg); font-weight: 700; color: var(--nj-ink); letter-spacing: -.005em; } details.nj-cat[open] > summary .nj-cat-name { color: var(--nj-navy); } .nj-cat-count { font-size: var(--fs-xs); font-weight: 600; color: var(--nj-muted); font-variant-numeric: tabular-nums; background: var(--nj-surface-2); border: 1px solid var(--nj-line); border-radius: var(--nj-pill); padding: .1rem .55rem; margin-left: auto; } details.nj-cat > summary::after { content: ""; flex: none; width: 11px; height: 11px; margin-left: .1rem; border-right: 2px solid var(--nj-muted); border-bottom: 2px solid var(--nj-muted); transform: rotate(45deg) translateY(-2px); transition: transform .18s; } details.nj-cat[open] > summary::after { transform: rotate(-135deg) translateY(-2px); } details.nj-cat > summary:hover { background: var(--nj-surface-2); } /* ---- Form rows: a scannable directory, single column, no ragged cards ---- */ details.nj-cat > ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--nj-line); } details.nj-cat > ul li { display: flex; align-items: stretch; gap: 0; border-bottom: 1px solid var(--nj-line); } details.nj-cat > ul li:last-child { border-bottom: 0; } details.nj-cat > ul li a { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: var(--nj-tap); padding: .8rem var(--sp-4) .8rem .9rem; color: var(--nj-ink); text-decoration: none; line-height: 1.35; border-left: 3px solid transparent; transition: background .12s, border-color .12s; } details.nj-cat > ul li a:hover, details.nj-cat > ul li a:focus { background: var(--nj-navy-tint); border-left-color: var(--nj-navy); color: var(--nj-navy-strong); } details.nj-cat > ul li a .nj-cn { flex: none; color: var(--nj-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--nj-surface-2); border: 1px solid var(--nj-line); border-radius: var(--nj-pill); padding: .12rem .55rem; } .nj-empty { color: var(--nj-muted); font-style: italic; display: none; padding: var(--sp-3) 0; } /* Legacy non-details category header (fallback, if markup ever reverts) */ .nj-cat > h3 { font-family: var(--nj-serif); font-size: var(--fs-lg); font-weight: 700; color: var(--nj-ink); border-bottom: 2px solid var(--nj-line-2); padding-bottom: .4rem; margin: 0 0 var(--sp-3); text-transform: none; letter-spacing: -.005em; } /* ---- Packet: per-form checkbox + floating build bar --------------------- */ /* 24px is the floor for a pointer target (WCAG 2.2 SC 2.5.8). These measured 22x22 and axe-core 4.13.0 flagged all 438 of them; the row is already 48px tall so the extra 2px costs no layout. The spacer must track the checkbox or the packet column stops lining up between rows that have one and rows that do not. */ .nj-pick { width: 24px; height: 24px; margin: 0 0 0 var(--sp-4); flex: 0 0 auto; align-self: center; accent-color: var(--nj-navy); cursor: pointer; } .nj-pick-spacer { width: 24px; margin-left: var(--sp-4); flex: 0 0 auto; } #njpacket { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 40; display: none; align-items: center; gap: .6rem; background: var(--nj-navy-strong); color: #fff; padding: .6rem .8rem .6rem 1.1rem; border-radius: var(--nj-pill); border-top: 2px solid var(--nj-brass); box-shadow: 0 6px 18px rgba(13,43,70,.35); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; max-width: calc(100vw - 24px); } #njpacket.show { display: flex; } #njpacket #njpacketn { font-weight: 700; } #njpacketgo { background: #fff; color: var(--nj-navy-strong); border: 0; border-radius: var(--nj-pill); padding: .45rem .9rem; font-weight: 700; cursor: pointer; min-height: 42px; } #njpacketgo:hover { background: #f0ede6; } #njpacketclear { background: transparent; color: #cdd8e4; border: 0; font-size: 1rem; cursor: pointer; padding: .2rem .5rem; min-height: 42px; } #njpacketclear:hover { color: #fff; } /* Back-to-top and the packet bar are BOTH bottom:18px, and the packet bar is centred at up to 100vw-24px with z-index 40 against back-to-top's 30, so they overlap on every phone-width viewport and the packet bar wins the tap. Measured on prod 2026-08-24: a tap at the exact centre of Back-to-top hit #njpacketgo at 360px and 390px and #njpacket at 430px -- a filer reaching for "Top" is navigated INTO the packet interview, losing their place in a 2,160-row catalog. (Filed as 360-390px; it is also 430.) Lift rather than hide: a control that vanishes the moment a selection exists is its own surprise. 92px clears the bar's measured 63px height plus its 18px offset. */ body:has(#njpacket.show) #njtop { bottom: 92px; } /* ---- Back to top --------------------------------------------------------- */ #njtop { position: fixed; right: 16px; bottom: 18px; z-index: 30; opacity: 0; pointer-events: none; transition: opacity .2s; background: var(--nj-surface); color: var(--nj-navy); border: 1px solid var(--nj-line-2); border-radius: var(--nj-pill); padding: .55rem .9rem; font-weight: 600; font-size: var(--fs-sm); box-shadow: var(--nj-shadow-stuck); cursor: pointer; } #njtop.show { opacity: 1; pointer-events: auto; } #njtop:hover { border-color: var(--nj-navy); background: var(--nj-navy-tint); } /* ---- Motion / accessibility --------------------------------------------- */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ========================================================================== Dark mode — warm-neutral dark (not cold gray). Every value is a token override; the hero stays navy with white + brass, so it needs no changes. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.nj-light) { --nj-paper: #17181b; --nj-surface: #1e2024; --nj-surface-2: #26282e; --nj-line: #31343b; --nj-line-2: #3d4048; --nj-ink: #ece8df; --nj-ink-2: #cbc5b9; --nj-muted: #9a9388; --nj-navy: #6ea8d8; /* lifted for contrast on dark surfaces */ --nj-navy-strong: #0d2b46; /* hero + bars stay deep */ --nj-navy-tint: #23303c; --nj-link: #7cb4e0; --nj-brass: #cc9a3a; /* .38 composited to #384f63 on the dark paper = 2.08:1. .70 gives 4.06:1 on --nj-paper, 3.86:1 on --nj-surface, 3.60:1 on --nj-surface-2. */ --nj-focus: rgba(110,168,216,.7); --nj-field-bg: #24262b; --nj-field-ink: #ece8df; --nj-field-line: #444852; --nj-ok-bg: #163122; --nj-warn-bg: #322818; --nj-warn-ln: #6a5323; --nj-shadow: 0 1px 2px rgba(0,0,0,.4); --nj-shadow-stuck:0 6px 16px rgba(0,0,0,.55); } /* Accordion open + summary hover use lifted navy for the name; keep readable */ :root:not([data-theme="light"]):not(.nj-light) details.nj-cat[open] > summary .nj-cat-name, :root:not([data-theme="light"]):not(.nj-light) details.nj-cat > ul li a:hover { color: var(--nj-navy); } /* --nj-navy is lifted to #6ea8d8 for text ON dark. .btn-primary uses it as a BACKGROUND under white text, so in dark mode Continue — the control on every screen of every form — rendered white-on-#6ea8d8 = 2.54:1. Keep the button deep, like the navbar and hero, which already stay #0d2b46 here. */ :root:not([data-theme="light"]):not(.nj-light) .btn-primary { background: var(--nj-navy-strong); border-color: var(--nj-navy-strong); color: #fff; } :root:not([data-theme="light"]):not(.nj-light) .btn-primary:hover, :root:not([data-theme="light"]):not(.nj-light) .btn-primary:focus { background: #14456e; border-color: #14456e; /* 9.97:1 with white */ } /* search magnifier stroke to match muted */ :root:not([data-theme="light"]):not(.nj-light) #njsearch { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239a9388' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); } } /* Same palette when the host explicitly marks a dark theme */ :root[data-theme="dark"], .nj-dark { --nj-paper:#17181b; --nj-surface:#1e2024; --nj-surface-2:#26282e; --nj-line:#31343b; --nj-line-2:#3d4048; --nj-ink:#ece8df; --nj-ink-2:#cbc5b9; --nj-muted:#9a9388; --nj-navy:#6ea8d8; --nj-navy-strong:#0d2b46; --nj-navy-tint:#23303c; --nj-link:#7cb4e0; --nj-brass:#cc9a3a; --nj-focus:rgba(110,168,216,.7); --nj-field-bg:#24262b; --nj-field-ink:#ece8df; --nj-field-line:#444852; } /* Same Continue-button repair for the explicit dark theme (see the note in the prefers-color-scheme block above). */ :root[data-theme="dark"] .btn-primary, .nj-dark .btn-primary { background: var(--nj-navy-strong); border-color: var(--nj-navy-strong); color: #fff; } :root[data-theme="dark"] .btn-primary:hover, .nj-dark .btn-primary:hover, :root[data-theme="dark"] .btn-primary:focus, .nj-dark .btn-primary:focus { background: #14456e; border-color: #14456e; } /* Suppress docassemble's duplicate question H1 on the landing page only (the page that carries the hero); every other interview keeps its heading. VISUALLY hidden, not display:none — display:none also removes the element from the accessibility tree, and this is the page's only

. With it gone the 667-form index opened on an

and had no level-one heading at all (axe-core 4.13.0: page-has-heading-one). The clip rule 80 lines up was written for exactly this but never matched: the h1 is inside .da-page-header, not a direct child of #daquestion. */ #daquestion:has(.nj-hero) .da-page-header { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* site footer — quote on every page (image slot added when founder.jpg ships) */ #dabody::after { content: "amor deinot\0101tis f\0101t\012B"; display: block; text-align: center; font-style: italic; font-family: Charter, Georgia, "Times New Roman", serif; font-size: 1.05rem; letter-spacing: .02em; color: var(--nj-brass); /* was var(--nj-accent,#b08d57): --nj-accent is undefined. Brass is darker (#9a6b1a), which also lifts this italic motto off its 2.77:1 reading. */ padding: 1.8rem 1rem 2.4rem; margin-top: 2.5rem; border-top: 1px solid rgba(176,141,87,.35); } /* about / privacy link under the hero */ .nj-about { margin: 0 0 1rem; text-align: center; } /* --nj-accent / --nj-accent-dark are not defined anywhere in this file, so both of these always fell through to the hardcoded light-mode navy. On the dark paper that is #123a5e on #17181b = 1.52:1 — the privacy link, unreadable for anyone in dark mode. --nj-link/--nj-navy are the tokens that actually flip: 8.34:1 light / 8.0:1 dark, and 12.95:1 / 6.98:1 on hover. */ .nj-about a { color: var(--nj-link); font-weight: 600; font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; } .nj-about a:hover { color: var(--nj-navy); } /* ---- navbar as a clean site header (not an app bar) ---- */ nav.navbar { background: var(--nj-navy) !important; /* was var(--nj-accent,#123a5e); --nj-navy IS #123a5e in light, so light mode is unchanged. */ border-bottom: 3px solid var(--nj-brass, #b08d57); box-shadow: 0 1px 6px rgba(0,0,0,.18); } nav.navbar .navbar-brand { font-family: Charter, Georgia, serif; font-weight: 700; font-size: 1.15rem; color: #fff !important; letter-spacing: -.01em; } /* prefix a persistent site mark before the (form-title) brand */ nav.navbar .navbar-brand::before { content: "\2696 NJ Court Forms"; } nav.navbar .danavbar-title { display: none; } /* hide the per-form title in the bar */ nav.navbar .nav-link, nav.navbar .navbar-text { color: #fff !important; font-weight: 600; } nav.navbar .navbar-toggler { border-color: rgba(255,255,255,.4); } /* Jacob's note under the hero subtitle */ .nj-hero .nj-why { font-family: var(--nj-body); font-style: italic; color: rgba(255,255,255,.85); margin: .6rem 0 0; font-size: .98rem; } /* ---- Desktop width ------------------------------------------------------ */ /* docassemble wraps the question in `offset-lg-3 col-lg-6`, i.e. half of .container. With .container capped at 760px that left ~360px of content on a 1440px screen. Reclaim the full container at lg and up; the 42rem cap on #daquestion still governs line length. */ @media (min-width: 992px) { #daquestion.offset-lg-3 { margin-left: 0 !important; } #daquestion.col-lg-6 { flex: 0 0 100% !important; max-width: 100% !important; } } /* 2026-08-21: the rule above reclaims the full container for #daquestion, which was right when .container was 760px. At 1200px it would stretch question prose to 1200px and undo the reading measure, so the 42rem cap is restated here AFTER it — the catalog page overrides this for its own wide content. */ @media (min-width: 992px) { #daquestion { max-width: 42rem !important; } #daquestion:has(.nj-hero) { max-width: 100% !important; } } @media (min-width: 768px) and (max-width: 991.98px) { #daquestion.offset-md-2 { margin-left: 0 !important; } #daquestion.col-md-8 { flex: 0 0 100% !important; max-width: 100% !important; } } /* /list renders a Sign in link even with `show login: false` (that key does not govern that page). Belt: hide it; suspenders: nginx 404s /list. */ a[href*="/user/sign-in"] { display: none !important; } /* ---- Header: match the static landing (navy bar, serif brand) ---------- The landing at / has a navy-strong header with a serif brand; docassemble's stock navbar rendered white, which made the click-through jarring. Same hex as the landing's --navy-strong. */ .navbar.fixed-top { background: #0d2b46 !important; border-bottom: 0; box-shadow: none; } .navbar-brand.danavbar-title, #dapagetitle { font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif !important; font-weight: 700 !important; color: #fff !important; font-size: 1.12rem; letter-spacing: .01em; } .navbar-toggler { border-color: rgba(255,255,255,.35) !important; } .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(1.6); } /* ---- Quick exit --------------------------------------------------------- Domestic-violence safety control, injected on every interview page by njforms.js. Fixed and high-contrast so it is findable without scrolling and never inside a menu. Room is reserved in the navbar so it cannot cover the form title. */ .nj-qexit{ position:fixed; top:10px; right:12px; z-index:9999; display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 15px; border:0; border-radius:var(--nj-pill,999px); background:#a4161a; color:#fff; cursor:pointer; /* Explicit, not var(--nj-sans,...) — that fallback form survives a token rename and would have left THIS button, the one control that must never look like an afterthought, in system sans while every other word on the page turned serif. */ font:600 .88rem/1 var(--nj-body); box-shadow:0 2px 10px rgba(0,0,0,.32); } .nj-qexit:hover,.nj-qexit:focus{ background:#8c1216; } .nj-qexit .k{ font-size:.72rem; font-weight:500; opacity:.85; border:1px solid rgba(255,255,255,.5); border-radius:3px; padding:1px 4px; } .danavbar-title, #dapagetitle{ padding-right:150px; } /* Below 768px docassemble collapses its menu into a right-aligned toggle — the same corner this button occupies. Measured overlap was 96-99% of the toggle at 320-640px: the exit button was eating the menu. Below the breakpoint the exit drops UNDER the fixed navbar (56px + gap) instead of shrinking, which keeps both controls whole. */ @media (max-width:767.98px){ /* FULL-WIDTH BAR ON MOBILE, not a floating pill. As a fixed pill at top:64 it sat OVER the page and covered whatever scrolled beneath it — measured live, it hid the card titles "Someone died — what do I file?" at scrollY 600 and "Someone owes you money?" at 1200. A safety control that obscures the words a frightened person is reading is the wrong failure mode. It cannot go in the navbar either: docassemble's menu toggle is visible there at 320-640px (measured, right-aligned at x=252-378), which is the collision the top:64 offset was introduced to avoid in the first place. So it gets its own full-width lane directly under the navbar, and body padding grows to match, so no content ever renders beneath it. */ .nj-qexit{ top:56px; left:0; right:0; width:100%; min-height:40px; padding:0 12px; font-size:.82rem; border-radius:0; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.28); } body{ padding-top:106px !important; } /* 66 navbar + 40 exit bar */ /* On mobile the exit bar sits at y 56..96, so the sticky search must start below IT, not below the navbar alone. */ .nj-searchwrap{ top:96px; } .nj-qexit .k{ display:none; } /* ---- expanded nav must not open UNDER the quick-exit bar ---- The mobile hamburger is the only navigation on a phone, and the collapse drops down at ~48px — directly beneath .nj-qexit, which is fixed at top:56px, full-width, z-index:9999. Result: the menu rendered but every link in it was unreachable, because the exit bar intercepted the tap. Playwright reported it exactly: "#njQuickExit intercepts pointer events". QUICK EXIT DOES NOT MOVE AND DOES NOT GO BEHIND ANYTHING. It is a safety control for someone whose abuser may walk in; its position is muscle memory and its z-index is deliberate. So the MENU moves below it instead: open it as its own fixed panel starting at 96px (56 exit-bar top + 40 exit-bar height), just under the bar, with a solid background so the page does not show through and its own scroll if it ever grows. */ #danavbar-collapse.show{ position:fixed; top:96px; left:0; right:0; z-index:9998; /* below .nj-qexit's 9999, on purpose */ background:var(--nj-navy); /* same substitution as nav.navbar above */ padding:4px 12px 8px; box-shadow:0 6px 14px rgba(0,0,0,.28); max-height:calc(100vh - 96px); overflow-y:auto; } #danavbar-collapse.show .navbar-nav{ width:100%; } #danavbar-collapse.show .nav-link{ display:block; padding:12px 4px; /* >=44px touch target */ border-bottom:1px solid rgba(255,255,255,.18); } #danavbar-collapse.show .nav-item:last-child .nav-link{ border-bottom:0; } .danavbar-title, #dapagetitle{ padding-right:0; } } /* Touch targets: chips measured ~31.6px (14.96 text + 19.4 line-height + 10.2 padding + 2 border). WCAG 2.5.5 asks 44x44. Adjacent chips here are "Domestic Violence & Restraining Orders" and "Money, Debt & Small Claims", so a mis-tap is not cosmetic. Coarse pointer = finger. */ @media (pointer:coarse){ .nj-chip{ min-height:44px; padding:.45rem .8rem; } .nj-chips{ gap:10px; } } /* ---- Guided-path card (triage entry) ------------------------------------ Sits between the hero and the search box: the person it serves doesn't know a form name to search for. One card for now; becomes a strip as more verticals ship (landlord/tenant, DV, small claims). */ /* ---- The guided paths: a ruled list, not a stack of cards ----------------- Direction A, 2026-08-21. Six identical boxes — same fill, same radius, same left accent bar, same shadow — give every entry equal visual weight, so nothing reads as more important than anything else and the whole block reads as one component looped six times. That is the "AI slop" tell Jacob named. A hairline-ruled list with a brass numeral does the same job with typography: the eye gets a scannable index, the numbers imply an order worth reading in, and the page stops looking assembled. Counters mean NO markup change — the generated + stays exactly as it is. ---- */ .nj-guides { margin: 0 0 var(--sp-6); border-top: 2px solid var(--nj-ink); counter-reset: njguide; } .nj-guide { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); column-gap: var(--sp-5); align-items: baseline; background: none; border: 0; border-bottom: 1px solid var(--nj-line); border-radius: 0; padding: var(--sp-5) 0; text-decoration: none; color: inherit; counter-increment: njguide; } .nj-guide::before { content: counter(njguide, decimal-leading-zero); font-family: var(--nj-mono); font-size: .72rem; letter-spacing: .12em; color: var(--nj-brass); padding-top: .45rem; /* optical: mono cap-height vs serif baseline */ grid-column: 1; grid-row: 1; } /* BOTH text children belong in column 2. Without this, grid auto-placement puts ::before in cell 1, in cell 2, and then wraps onto the next row's cell 1 — the 3.2rem numeral column — so every description rendered one word per line. The mobile gate PASSED that, because it measures horizontal overflow and a one-word column does not overflow. Caught by looking. */ .nj-guide > strong { grid-column: 2; grid-row: 1; } .nj-guide > span { grid-column: 2; grid-row: 2; } /* Hover moves the TITLE, not the box — there is no box to move any more. */ .nj-guide:hover strong, .nj-guide:focus-visible strong { color: var(--nj-navy-strong); text-decoration: underline; } .nj-guide strong { display: block; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; color: var(--nj-navy); margin-bottom: .3rem; text-wrap: pretty; } .nj-guide span { color: var(--nj-muted); font-size: var(--fs-base); max-width: 68ch; display: block; text-wrap: pretty; } /* THE RULE IS THE STRUCTURE IN DARK MODE, so it cannot be a whisper. Measured 2026-08-21: --nj-line (#31343b) sits at 1.42:1 on the dark paper (#17181b). That was fine while these entries were CARDS — the fill and the left accent bar carried the separation and the border was decoration. Direction A removed the fill, so the hairline is now the only thing dividing six entries; at 1.42:1 the list collapses into an undifferentiated run of text on a dark screen. Not a WCAG failure (a decorative divider is exempt from 1.4.11), which is exactly why it would have shipped unnoticed. #6b6f79 measures 3.53:1 on --nj-paper — visible as a rule, still quiet enough to read as a hairline rather than a border. Scoped to this list on purpose: --nj-line is used in dozens of places where the old weight is correct. */ :root:not([data-theme="light"]):not(.nj-light) .nj-guide { border-bottom-color: #6b6f79; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.nj-light) .nj-guide { border-bottom-color: #6b6f79; } } /* ---- FontAwesome replacements ------------------------------------------- The FA script tag is patched out of base.html (645 KiB for three icons). docassemble's chrome still emits elements; give the three that actually appear a unicode glyph so nothing renders as an empty box. If an upgrade restores FA these rules are harmlessly overridden by the real font. */ i.fa-chevron-left::before { content: "\2039"; font-style: normal; font-weight: 700; } i.fa-phone::before { content: "\260E"; font-style: normal; } i.fa-comment-alt::before { content: "\1F4AC"; font-style: normal; } /* --------------------------------------------------------------------------- Narrowing controls: county + audience. Added after the 2026-08-17 grouping review. Matter-type grouping alone put 490 forms — 26% of the corpus — inside "Wills, Estates & Guardianship", because 21 county surrogates each publish their own version of the same dozen probate forms. Matter type answers "what kind of problem this is"; only county answers "which of these 490 do I actually file". Both narrowings compose with the search box rather than replacing it. --------------------------------------------------------------------------- */ .nj-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: .6rem 0 1rem; } .nj-filt-lab { font-family: var(--nj-body); font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--nj-ink-soft, #5c554a); } .nj-filt { font-size: 16px; /* 16px or iOS zooms the page on focus */ min-height: var(--nj-tap); flex: 1 1 15rem; max-width: 100%; padding: .55rem .75rem; border-radius: var(--nj-radius); border: 1.5px solid var(--nj-field-line); background-color: var(--nj-surface); color: var(--nj-field-ink); box-shadow: var(--nj-shadow); } .nj-filt-check { display: flex; align-items: center; gap: .5rem; min-height: var(--nj-tap); /* full tap target, not just the 16px box */ font-family: var(--nj-body); font-size: .92rem; color: var(--nj-ink-soft, #5c554a); cursor: pointer; } .nj-filt-check input { width: 18px; height: 18px; } .nj-filt:focus-visible, .nj-filt-check input:focus-visible { outline: 3px solid var(--nj-focus, #2f6f4f); outline-offset: 2px; } @media (max-width: 30rem) { .nj-filters { gap: .4rem; } .nj-filt { flex-basis: 100%; } } /* Shown when AND matched nothing and we fell back to OR. Explains WHY rather than just showing fewer-quality results: the usual cause is that the court's word for the thing differs from the user's. */ .nj-loose { display: none; font-family: var(--nj-body); font-size: .9rem; line-height: 1.5; margin: .4rem 0 .9rem; padding: .7rem .9rem; border-left: 3px solid var(--nj-brass); /* retires #2f6f4f, a leftover green from the pre-navy palette that painted the "loosened your search" notice */ border-radius: var(--nj-radius-sm); background: var(--nj-surface-2); color: var(--nj-ink-soft, #5c554a); } /* Index footer: provenance + version + changelog. Same three facts as the landing so a reader who arrives directly at the index (the expected path from AI search) gets them too, rather than only people who came via /. */ .nj-foot { margin: 2.5rem 0 1rem; padding-top: 1.2rem; border-top: 1px solid var(--nj-line); font-family: var(--nj-body); /* .9rem to match the landing footer exactly. Same content, same role, two sizes was the only real inconsistency the computed-style audit found — and the larger of the two is the more readable one. */ font-size: .9rem; line-height: 1.6; color: var(--nj-ink-soft, #5c554a); } .nj-foot p { margin: 0 0 .5rem; } .nj-foot a { color: inherit; text-decoration: underline; } /* Row metadata: what you get, and whether it is your county ------------------ 2,150 rows all looked the same. Two facts decide whether a row is worth opening: does it fill the PDF for you or hand you a blank, and is it a county form for a county other than yours. Both now ride on the row. */ .nj-kind, .nj-cty { display: inline-block; font-family: var(--nj-body); font-size: .72rem; font-weight: 600; letter-spacing: .02em; padding: .1rem .42rem; margin-left: .4rem; border-radius: var(--nj-pill); vertical-align: middle; white-space: nowrap; } .nj-kind-fill { background: var(--nj-navy-tint); color: var(--nj-navy); } .nj-kind-blank { background: var(--nj-surface-2); color: var(--nj-ink-soft, #5c554a); border: 1px solid var(--nj-line); } .nj-cty { background: transparent; color: var(--nj-ink-soft, #5c554a); border: 1px dashed var(--nj-line); font-weight: 500; } @media (max-width: 30rem) { /* On a phone the title needs the width more than the badges do. */ .nj-kind, .nj-cty { font-size: .68rem; margin-left: .3rem; } } /* County sub-headings inside oversized categories --------------------------- */ li.nj-sub { list-style: none; display: flex; justify-content: space-between; align-items: baseline; margin: 1rem 0 .3rem; padding: .35rem .1rem .3rem; border-bottom: 1px solid var(--nj-line); font-family: var(--nj-body); font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--nj-ink-soft, #5c554a); } li.nj-sub:first-child { margin-top: .2rem; } .nj-sub-n { font-weight: 600; opacity: .75; } /* Responsive form rows ------------------------------------------------------- A row is title + CN badge + county tag + kind badge. Inline, that overflows the moment a title is long — and county probate titles routinely are ("Somerset County — Affidavit of Surviving Spouse Case Information"). Laying the row out as a wrapping flex line lets the badges drop beneath the title instead of pushing it off-screen, at every width, without a media query guessing where the break should fall. */ #njlist li:not(.nj-sub) > a { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .1rem; min-width: 0; /* lets the title actually shrink in a flex row */ } #njlist li:not(.nj-sub) > a > span { flex: 0 0 auto; /* badges keep their size; the title yields */ } #njlist li:not(.nj-sub) > a { hyphens: auto; overflow-wrap: anywhere; /* a 60-character title cannot force a scrollbar */ } @media (max-width: 34rem) { /* Below this the badges get their own line rather than crowding the title. */ #njlist li:not(.nj-sub) > a { gap: .3rem .35rem; } .nj-kind, .nj-cty { margin-left: 0; } } /* Chip row density on small screens ----------------------------------------- All 35 chips stay visible and centred, but at full size they stacked 1,351px tall on a 320px screen — roughly 2.4 screens of chips before the search box. Shrinking type, padding and gap on narrow viewports keeps every category discoverable while getting search back near the fold. Tap targets stay above the 44px minimum via padding rather than font size. */ @media (max-width: 34rem) { .nj-chips { gap: .3rem .28rem; } .nj-chip { font-size: .78rem; padding: .34rem .5rem; line-height: 1.15; } .nj-chip b { font-weight: 700; margin-left: .18rem; } } @media (max-width: 22rem) { .nj-chip { font-size: .74rem; padding: .3rem .42rem; } } /* Two-mode legend above the list. The badges are compact by design, so the distinction gets stated once in full before a reader meets it on a row. */ .nj-legend { font-family: var(--nj-body); font-size: .85rem; line-height: 1.7; margin: .2rem 0 1rem; padding: .7rem .9rem; border-left: 3px solid var(--nj-line); border-radius: var(--nj-radius-sm); background: var(--nj-surface-2); color: var(--nj-ink-soft, #5c554a); } .nj-legend .nj-kind { margin-left: 0; margin-right: .15rem; } /* Crawlable category links (njcourtforms-issues#42). These are 35 real elements, added so search engines and filers have a path to /forms// that the client-side