/* ============================================================ AERL Documentation — Rendered-doc styling Applied to outputs: datasheet / manual / warranty / protocol pages rendered as standalone HTML. Imports tokens.css. ============================================================ */ @import url("./tokens.css"); * { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: var(--fs-16); line-height: var(--lh-normal); color: var(--fg-1); background: var(--bg-canvas); margin: 0; } /* ---------------- Page shell ---------------- */ .doc { max-width: var(--doc-page-max); margin: 0 auto; padding: var(--space-16) var(--space-6) var(--space-24); background: var(--bg-surface); box-shadow: var(--shadow-md); } .doc__eyebrow { font-size: var(--fs-12); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-accent); margin-bottom: var(--space-3); } .doc__title { font-size: var(--fs-48); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 700; margin: 0 0 var(--space-2); text-wrap: balance; } .doc__subtitle { font-size: var(--fs-20); color: var(--fg-2); font-weight: 400; margin: 0 0 var(--space-8); text-wrap: balance; } .doc__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-family: var(--font-mono); font-size: var(--fs-13); color: var(--fg-3); padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-10); } .doc__meta strong { color: var(--fg-1); font-weight: 600; } /* ---------------- Headings ---------------- */ h1, .h1 { font-family: var(--font-display); font-size: var(--fs-36); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 700; color: var(--fg-1); margin: 0 0 var(--space-4); text-wrap: balance; } h2, .h2 { font-size: var(--fs-30); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: 700; margin: var(--space-12) 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-subtle); } h3, .h3 { font-size: var(--fs-24); line-height: var(--lh-snug); font-weight: 600; margin: var(--space-10) 0 var(--space-2); } h4, .h4 { font-size: var(--fs-20); line-height: var(--lh-snug); font-weight: 600; margin: var(--space-6) 0 var(--space-2); } h5, .h5 { font-size: var(--fs-14); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-2); margin: var(--space-6) 0 var(--space-2); } p, li { font-size: var(--fs-16); line-height: var(--lh-normal); text-wrap: pretty; } p { margin: 0 0 var(--space-4); } ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); } li + li { margin-top: var(--space-1); } small, .caption { font-size: var(--fs-13); color: var(--fg-3); } a { color: var(--fg-accent); text-decoration: none; border-bottom: 1px solid transparent; transition: color 120ms ease, border-color 120ms ease; } a:hover { color: var(--fg-accent); border-bottom-color: currentColor; } code, kbd, samp, .mono { font-family: var(--font-mono); font-size: 0.93em; background: var(--bg-sunken); padding: 0.1em 0.35em; border-radius: var(--radius-sm); color: var(--fg-1); } pre { font-family: var(--font-mono); font-size: var(--fs-14); line-height: var(--lh-snug); background: var(--gray-950); color: var(--gray-100); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); overflow-x: auto; } pre code { background: transparent; padding: 0; color: inherit; } hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-8) 0; } img, figure { max-width: 100%; } figure { margin: var(--space-6) 0; } figcaption { font-size: var(--fs-13); color: var(--fg-3); margin-top: var(--space-2); text-align: center; } /* ---------------- Spec table ---------------- */ table.spec, .spec-table, table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); background: var(--bg-surface); margin: var(--space-5) 0 var(--space-6); } .spec th, .spec td, .spec-table th, .spec-table td, table th, table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); vertical-align: top; } .spec thead th, .spec-table thead th, table thead th { background: var(--gray-900); color: var(--white); font-weight: 600; font-size: var(--fs-13); letter-spacing: var(--tracking-wide); text-transform: uppercase; border-bottom: 2px solid var(--gray-900); } .spec tbody tr:nth-child(even) td, .spec-table tbody tr:nth-child(even) td, table tbody tr:nth-child(even) td { background: var(--gray-50); } /* ---------------- Callouts ---------------- */ .callout { border-left: 4px solid var(--primary-500); background: var(--bg-surface); padding: var(--space-4) var(--space-5); margin: var(--space-5) 0; border-radius: 0 var(--radius-md) var(--radius-md) 0; box-shadow: var(--shadow-sm); } .callout--important { border-left-color: var(--status-info); background: var(--status-info-bg); } .callout--caution { border-left-color: var(--status-danger); background: var(--status-danger-bg); } .callout--warn { border-left-color: var(--status-warn); background: var(--status-warn-bg); } .callout--note { border-left-color: var(--gray-700); } .callout__label { font-size: var(--fs-12); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-2); display: block; margin-bottom: var(--space-1); } .callout--important .callout__label { color: var(--status-info); } .callout--caution .callout__label { color: var(--status-danger); } .callout--warn .callout__label { color: var(--status-warn); } /* ============================================================ Screen helpers — hidden in print ============================================================ */ .no-print { /* nothing on screen; hidden by @media print rules below */ } /* "Download PDF" pill — sits in the page header on screen, vanishes in print. */ .download-pdf { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; background: var(--primary-500); color: var(--gray-950) !important; border: 0; border-radius: var(--radius-md); text-decoration: none !important; box-shadow: var(--shadow-sm); transition: background 120ms ease, transform 80ms ease; white-space: nowrap; } .download-pdf:hover { background: var(--primary-600); border-bottom: 0 !important; } .download-pdf:active { transform: translateY(1px); } .download-pdf svg { width: 13px; height: 13px; flex-shrink: 0; } .download-pdf .rev { opacity: 0.85; font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 2px; } /* ============================================================ Print / PDF — A4 page contract ------------------------------------------------------------ • A4 page size, uniform 18mm top/bottom, 16mm left/right margins. • Running header: product + doc title. • Running footer: AERL mark + "Page N of M". • Cover page (first) suppresses the running header via @page :first. • h1/h2/table/figure protected from awkward page splits. • All site chrome (.no-print, nav, aside, tweaks panel) hidden. • Single source: same HTML + CSS the site renders is what the PDF build step (chromium --headless --print-to-pdf or WeasyPrint) consumes — no separate authoring path. ============================================================ */ @page { size: A4; margin: 18mm 16mm; @top-left { content: string(doc-product); font-family: var(--font-sans); font-size: 9pt; color: #545454; letter-spacing: 0.06em; text-transform: uppercase; } @top-right { content: string(doc-title); font-family: var(--font-sans); font-size: 9pt; color: #545454; } @bottom-left { content: "AERL · aerl.com.au"; font-family: var(--font-mono); font-size: 8pt; color: #767676; } @bottom-right { content: "Page " counter(page) " of " counter(pages); font-family: var(--font-mono); font-size: 8pt; color: #767676; } } /* Suppress running header on cover page; keep footer for pagination. */ @page :first { @top-left { content: none; } @top-right { content: none; } } /* String-set hooks — populated by the doc's product / title elements. */ .ph__product, .doc__product { string-set: doc-product content(); } .hero__title, h1.doc__title, h1.h1, h1 { string-set: doc-title content(); } @media print { /* Repaint background white; the site wraps pages in a gray canvas. */ html, body { background: #fff !important; color: #111 !important; } /* Hide screen-only chrome */ nav, aside, .no-print, .download-pdf, [data-no-print], #tweaks-root, tweaks-panel { display: none !important; } /* Body baseline ≥ 10pt at print scale */ body { font-size: 10pt; line-height: 1.45; } /* Per-page "sheet" wrappers shouldn't add their own padding/shadow in print */ .sheet { padding: 0 !important; margin: 0 !important; background: transparent !important; gap: 0 !important; display: block !important; } /* Each
becomes one printed page. Booklet and brochure documents print their pages at exact A4 size instead; see "Full-bleed sheets" below. :where() keeps the original specificity so per-doc print overrides still win as before. */ :where(body:not(.booklet):not(.brochure)) .page, :where(body:not(.booklet):not(.brochure)) article.page { width: auto !important; height: auto !important; min-height: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; background: transparent !important; overflow: visible !important; break-after: page; page-break-after: always; } :where(body:not(.booklet):not(.brochure)) .page:last-child, :where(body:not(.booklet):not(.brochure)) article.page:last-child { break-after: auto; page-break-after: auto; } /* Print-legible headings at 100% zoom */ h1, .h1 { font-size: 22pt; } h2, .h2 { font-size: 16pt; } h3, .h3 { font-size: 13pt; } h4, .h4 { font-size: 11pt; } h5, .h5 { font-size: 9pt; } /* Page-break protection */ h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; break-inside: avoid; page-break-inside: avoid; } figure, table, pre, blockquote, .callout, .panel, .specs, .order, .standards, .apps, .hero, .kv { break-inside: avoid; page-break-inside: avoid; } tr, td, th { break-inside: avoid; page-break-inside: avoid; } /* First-level section headings break onto a new page when marked */ .page-break, .break-before, section[data-break="before"] { break-before: page; page-break-before: always; } /* Fit the print margin box */ img { max-width: 100% !important; height: auto; } table { width: 100% !important; max-width: 100% !important; } /* Wrap long code/mono lines instead of overflow */ pre, code, .mono, samp, kbd { white-space: pre-wrap !important; word-break: break-word; overflow: visible !important; } /* Links: keep brand colour, drop underline noise */ a { color: var(--fg-accent) !important; text-decoration: none !important; border-bottom: 0 !important; } } /* ============================================================ Full-bleed sheets — booklet (manuals) and brochure (datasheets) ------------------------------------------------------------ or . Every
is an exact A4 trim (210 x 297 mm) on screen AND in print: the @page margin is zero, so colour runs to the trim edge and the in-page header/folio replace the @page running header/footer. Layout lives in booklet.css / brochure.css. Press output: open the doc with ?bleed (scripts/docs.sh press) and each sheet grows by 3 mm bleed + crop marks on a 236 x 323 mm page. Anything meant to bleed is positioned with `inset: calc(-1 * var(--bleed))` (or the .bleed-* helpers) so it extends past the trim only when bleed is on. Web output: open the doc with ?web (scripts/docs.sh build) and a booklet or folded brochure prints single-sided: html.web lays every page out as a recto (booklet.css, brochure.css) and hides [data-pad] (the Notes pages, and their contents entry, that only exist to make the booklet a multiple of 4 pages). Same HTML, same A4 trim. ============================================================ */ :root { --bleed: 0mm; --slug: 0mm; --sheet-charcoal: #101216; /* cover ground: AERL Cloud's page slate */ --sheet-ink: var(--gray-800); /* text on orange: 7.6:1 */ } html.bleed { --bleed: 3mm; --slug: 13mm; } html.web :is(body.booklet, body.brochure) [data-pad] { display: none !important; } body.booklet, body.brochure { background: var(--gray-200); -webkit-print-color-adjust: exact; print-color-adjust: exact; } body.booklet .sheet, body.brochure .sheet { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 32px 16px 64px; } body.booklet .page, body.brochure .page { page: exact; width: 210mm; height: 297mm; position: relative; overflow: clip; overflow-clip-margin: var(--bleed); background: var(--white); box-shadow: var(--shadow-lg); break-after: page; } body.booklet .page:last-child, body.brochure .page:last-child { break-after: auto; } /* Press mode: the .page border box becomes the whole press sheet. A 13 mm transparent border is the slug, so the padding box is still the 210 x 297 mm trim and every absolutely positioned element keeps its place. Crop marks are the border image, offset 3 mm from the trim; overflow-clip-margin lets bleed elements paint 3 mm into the slug. (Chrome clips anything outside the page box, so the slug cannot be an @page margin.) */ html.bleed :is(body.booklet, body.brochure) .page { page: press; width: calc(210mm + 2 * var(--slug)); height: calc(297mm + 2 * var(--slug)); border: var(--slug) solid transparent; background-clip: padding-box !important; /* covers set the background shorthand */ border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='236' height='323' viewBox='0 0 236 323'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='12.9' width='10' height='0.1'/%3E%3Crect x='12.9' y='0' width='0.1' height='10'/%3E%3Crect x='226' y='12.9' width='10' height='0.1'/%3E%3Crect x='223' y='0' width='0.1' height='10'/%3E%3Crect x='0' y='310' width='10' height='0.1'/%3E%3Crect x='12.9' y='313' width='0.1' height='10'/%3E%3Crect x='226' y='310' width='10' height='0.1'/%3E%3Crect x='223' y='313' width='0.1' height='10'/%3E%3C/g%3E%3C/svg%3E"); border-image-slice: 13; border-image-width: var(--slug); border-image-repeat: stretch; } /* No @page running header/footer: the sheets carry their own. */ @page exact { size: A4; margin: 0; @top-left { content: none; } @top-right { content: none; } @bottom-left { content: none; } @bottom-right { content: none; } } @page press { size: 236mm 323mm; margin: 0; @top-left { content: none; } @top-right { content: none; } @bottom-left { content: none; } @bottom-right { content: none; } } @media print { body.booklet, body.brochure { background: #fff !important; } body.booklet .sheet, body.brochure .sheet { display: block; padding: 0; gap: 0; } body.booklet .page, body.brochure .page { box-shadow: none; margin: 0; } } /* ------------------------------------------------------------ Trace covers — shared by booklet front/back covers and brochure (datasheet) front pages. The Trace system is one orange monoline drawn with the aerl wordmark's geometry (even stroke, rounded right angles). On the covers it is the test pulse (a square wave) and a guard ring round the product that ends in a test node; the back cover's line enters from the spine at the same height, so the outside spread reads as one line. Inside the booklet it is the rail down the outside margin (booklet.css). The line's only gradient: graphite warming to orange. The drawings are SVG data URIs below (source: local_scripts/trace-covers.py), so per-doc markup carries no SVG:
charcoal + light + the trace
logo, download button, .cover__kind

(no lede: DESIGN_NOTES § Cover content) transparent product render, inside the ring

model/name (booklet) or .keyfigs (brochure)