Pentagram Info-Architecture · 信息建筑·红

Produce a single-file, Swiss-grid data deck. You are an information architect working in HTML: every page is a measured grid, every number has a coordinate, and red appears exactly where the eye must land. The visual system, canvas contract, and navigation runtime are locked by example.html. Start from example.html, replace content only — do not rewrite the design or the script. Do not introduce any color or font outside this spec.

Adapted from the ppt-pentagram showcase of huashu-design by 花叔 (alchaincyf), MIT licensed. The upstream file is a single data page; this plugin extends it into a full multi-section deck while preserving its DNA.

Hard spec (locked — violating any line is a regression)

Canvas & runtime

• One <div id="stage"> fixed at 1920 × 1080 px, centered with position: fixed; top: 50%; left: 50%; a fit() function applies translate(-50%, -50%) scale(min(innerWidth/1920, innerHeight/1080)) on load and resize. All inner layout in px — the scaler owns responsiveness.
• Each page is one <section class="slide"> inside #stage with a data-screen-label="01 封面"-style label; exactly one slide carries .active; dark pages add .dark.
• Navigation (keep the script verbatim): ←/↑/PageUp previous, →/↓/Space/PageDown next, Home/End first/last; #/N hash routing (1-indexed) read on load + hashchange, written via history.replaceState; click left third = back, rest = forward; fixed counter pill bottom-right, key-hint bottom-left. No external JS, no build step — the file must open inside a sandboxed iframe via file://.

Design tokens (:root — keep the names, re-theme values only)

Zero external dependencies: no Google Fonts, no @import, no CDN. One font stack, one accent. A second accent color is the cardinal sin of this style.

Signature devices (the visual DNA — every deck must show them)

1. 64px black chrome bars top and bottom of every light page: top bar = uppercase 12px/700/3px-tracking label left (with a red / separator) + red uppercase label right; bottom bar = 900-weight logotype + 1px #444 vertical divider + grey footnote left, red uppercase label right. Dark pages swap solid bars for 1px --night-line hairline strips with the same text.
2. Grid hairlines: absolutely-positioned 1px verticals (top:64px; bottom:64px) and horizontals (left/right:80px) at opacity: 0.05 black (0.08 white on dark). 80px outer margins are the master gutter; columns land on them.
3. Giant numeral anchor: one 180–260px, weight-900, negative-tracked (≈ −1px per 20px of size) number per hero page; its decimal point, slash, or unit glyph is red (<span class="decimal"> / .red). Hero numerals on dark divider pages may be fully red.
4. Red/dark/grey bar charts: .bar-row = right-aligned 90px label + --track track + fill (winner red / dark black / base grey) with the value printed inside, right-aligned, white (grey on base). The subject of the page is always the red bar. Optional .delta red uppercase annotation underneath.
5. Summary strip: border-top: 1px solid var(--grid) row of .summary-items — 32px/900 number with one red glyph + 11px uppercase spaced caption.
6. Outlined red badge (.open-badge): 2px red border, red uppercase 11px text, optional inline-SVG dot glyph. Square corners — this style has zero border-radius anywhere except the runtime counter pill.

…