Alex Dunmow 2f7239b76a fix(noir): reveal race, light-mode legibility, spacing, media, SVG guard
- Reveal: shorten scroll-reveal safety timeout below the capture settle and
  reveal-all when viewport height is unknown (headless), so main content is no
  longer stranded mid-fade at ~0.25 opacity in both modes; give the article
  template the robust reveal script it was missing. Fixes the washed-out
  light-mode body/quote copy AND the H1-over-first-line overlap (the translateY
  mid-transition was dropping the heading onto the body).
- Headings: add bottom margin per level so H1 no longer butts the first paragraph.
- Article: collapse the aside rail (and its divider border) when empty; populate
  each case article's aside with case-file marginalia.
- Light mode: bump muted-foreground contrast across all five presets (~L38->L30)
  for comfortable AA on secondary text; dark palettes untouched.
- Media: wire 6 licensed noir stock shots as seed media — harbour-night hero
  (with readable light-on-scrim hero text in both modes), per-article lead
  photos, typewriter on About.
- SVG geometry guard: explicit width/height on 26 <use> icon SVGs; replace 15
  unsized ::icon:: shortcodes with sized <svg><use> markup.
- Declare required_icon_packs (lucide, simple-icons).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-06 19:47:59 +08:00

19 lines
1.4 KiB
Plaintext

{# noir override — faq; preserves heading, intro, variant, items[].question/.answer. Chevron svg + details/summary markup verbatim. #}
<section data-block-override="noir:faq" class="py-16 md:py-24 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
<div class="mx-auto max-w-3xl px-4">
{% if heading %}<h2 class="noir-heading text-center text-3xl md:text-4xl" style="color:hsl(var(--foreground));">{{ heading }}</h2>{% endif %}
{% if intro %}<p class="noir-body mx-auto mt-4 max-w-2xl text-center text-lg" style="color:hsl(var(--muted-foreground));">{{ intro }}</p>{% endif %}
<div class="mt-10 divide-y divide-border border-y border-border">
{% for item in items %}
<details class="group py-2"{% if variant == "open-list" %} open{% endif %}>
<summary class="noir-heading flex cursor-pointer list-none items-center justify-between gap-4 py-3 text-lg marker:content-none [&::-webkit-details-marker]:hidden" style="color:hsl(var(--foreground));">
<span>{{ item.question }}</span>
<svg width="20" height="20" class="h-5 w-5 shrink-0 text-primary transition-transform duration-200 group-open:rotate-180" aria-hidden="true"><use href="/icons/lucide.svg#chevron-down"></use></svg>
</summary>
<div class="noir-body pb-4 [&_a]:text-primary [&_a]:underline" style="color:hsl(var(--muted-foreground));">{{ item.answer|safe }}</div>
</details>
{% endfor %}
</div>
</div>
</section>