/** * jonmick.ai - Neuro-atlas theme (JON-1424) * ========================================= * A scoped "paper" theme for the atlas pages (homepage + career record). * Loaded AFTER styles.css on those pages only. * * SCOPE RULE: every rule in this file is scoped under `body.atlas`. * Nothing here may reach the other 107 pages. Opting a page in is one * body class; opting out is removing it. * * Source of truth: docs/design/2026-09-04-neuro-atlas/README.md plus the two * design references (homepage-neuro-atlas.dc.html, career.dc.html). * Plan: docs/plans/active/2026-09-04-neuro-atlas-homepage.md * * --------------------------------------------------------------------------- * MARKUP CONTRACT * --------------------------------------------------------------------------- * Phases 2 and 3 build markup against these classes. Shapes below are the * expected nesting; anything marked (opt) may be omitted. * * PAGE * * shared nav.html, restyled here *
*
* Atlas of a personal AI system * v2.77 · updated live *
*
* *
...plates...
*
*
* shared footer.html, restyled here * * RAIL * * * PLATE *
*

real heading, mono label pair * Plate I * The system *

*
positioning ctx for the portrait * *
...
or a real

*

...

*

*
*
Fig. 1aright-hand note
* ...content... *
* Fig. 1. caption text *
*
*
* Plates are separated by 64px automatically (.atlas-plate + .atlas-plate). * * FIGURE CONTENT * .atlas-chips grid of .atlas-chip { .atlas-chip-name, .atlas-chip-meta } * .atlas-connector 1x18px ink rule between figure stages * .atlas-box (+ --accent | --dashed | --tint | --surface) * { .atlas-box-label, .atlas-box-display, .atlas-box-lead, .atlas-box-text } * .atlas-tiles grid of .atlas-tile (+ --public for the two public surfaces) * { .atlas-tile-name, .atlas-tile-meta }; use for --public * .atlas-fig-row + .atlas-fig-col + .atlas-fig-img Plate II three-up layout * .atlas-kv
rows:
label
mono value
* .atlas-numbered grid of .atlas-numbered-item (+ --active) * { .atlas-numbered-idx, .atlas-numbered-val, .atlas-numbered-label } * .atlas-bars 3-column grid, THREE children per row: * , , * .atlas-cards grid of .atlas-card { .atlas-card-eyebrow, .atlas-card-title, * .atlas-card-text, .atlas-card-link } * .atlas-org-grid grid of .atlas-org { .atlas-org-logo>img, .atlas-org-name, .atlas-org-meta } * .atlas-metrics Whoop strip: with * + , * then .atlas-metric { .atlas-metric-val, .atlas-metric-label } * .atlas-covers grid of .atlas-cover { , .atlas-cover-title, .atlas-cover-date } * .atlas-index two-column list of .atlas-index-row * { .atlas-index-label, .atlas-index-leader, .atlas-index-value } * .atlas-link (+ --back) accent link; the arrow glyph is supplied by markup * * HOMEPAGE (section 12, JON-1426) * Hero + intro * header.atlas-hero.atlas-hero--top hero above the plates, not inside one * p.atlas-intro 15.5px plate intro under the .atlas-h2 * Fig. 1 "The system - flow" * .atlas-families 5-col grid of .atlas-family * { .atlas-family-head, .atlas-family-how, .atlas-family-items > * .atlas-sense { .atlas-sense-name > a.atlas-sense-link, * .atlas-sense-meta, .atlas-sense-links > a } } * .atlas-dots > .atlas-dot 5 ink dots aligned to the family columns * svg.atlas-flow > path.atlas-flow-path * (+ --drift with one of --d6/--d7/--d8/--d9/--d11, or --authored) * .atlas-chevron (+ --tight | --flow | --drop | --accent) 14x8 chevron row * .atlas-box--ink ink slab; second column is .atlas-box-ink-col * .atlas-split (+ --h26 | --h24 | --top) 1fr 210px private/public split * .atlas-line (+ --stub) { .atlas-line-dot (+ --public), svg.atlas-line-svg, * .atlas-line-solid } * .atlas-gate (+ --public) { .atlas-gate-bar > .atlas-gate-title, * .atlas-gate-pass (+ --public) > * .atlas-gate-label } * .atlas-surfaces-label (+ --public), .atlas-surfaces, .atlas-public-stack * .atlas-tile--strong 1.5px public tile used in .atlas-public-stack * .atlas-connector--mobile plain rule shown below 820px in place of the flow * Fig. 2 "Inside the Memory Palace - floor plan" * .atlas-plan-grid > .atlas-plan (+ --wing | --wide) * .atlas-plan-head { .atlas-plan-title, .atlas-plan-meta } * .atlas-plan-box (+ --surface | --white), .atlas-plan-row * .atlas-plan-pair > .atlas-plan-cell * { .atlas-plan-cell-title, .atlas-plan-dashed > * .atlas-plan-dashed-sub, .atlas-plan-chips > .atlas-plan-chip } * .atlas-plan-note > .atlas-plan-note-label * .atlas-chips--wrap > .atlas-chip--sm * .atlas-wing-text, .atlas-rooms > .atlas-room * { .atlas-room-name, .atlas-room-holds } * .atlas-shelves > .atlas-shelf { .atlas-shelf-name, .atlas-shelf-rows > * .atlas-shelf-row > span > a.atlas-shelf-link, .atlas-shelf-value }, * .atlas-shelf-summary * Shared * .atlas-cards--theory | --career | --further card-grid widths per plate * .atlas-box--column + .atlas-links--bottom equal-height box with a * link row pinned to the floor * .atlas-legend { .atlas-legend-swatch, .atlas-legend-marker }, .atlas-legend-dot * .atlas-bar-link, .atlas-bar-more, .atlas-bar-value--muted * .atlas-metrics-hero, .atlas-metrics-list, .atlas-metrics-source, .atlas-puck * .atlas-cover-fallback 1:1 title tile for an article with no cover image * .atlas-num (+ --sm) mono tabular figure inside prose * .atlas-links (+ --split | --bottom) { .atlas-links-strong, .atlas-links-mono } * .atlas-fine--gap-b | --gap-t | --between | --right * .atlas-fig--tight, .atlas-figcaption--tight, .atlas-anchor * * CAREER PAGE *
*

* 01 * How to read this *

*
(+ --wide for the 760px column) *
*
*
* *

Liquidity Services

*
* 2024 - present *
*
Senior Product Owner
*

...

*
    *
  1. a...
    2. *
*
*
*
* 2024 - present * * Org, detail *
*
*
*
Title.Body copy.
*
...
*
*
*
* Page-scoped additions (section 14, folded from career.html's own