/* Boot skeleton — shimmer placeholders shaped like the Home steps, painted straight from index.html under the static navy hero while viz_data.json downloads. render() overwrites in one shot when the data lands, so this whole subtree is removed atomically (it can't flash — the narrative re-render that caused the original boot flash is need-gated away since #895). Lives in its OWN sheet (not base.css / home.css) so it stays out of the files other work streams own. Every colour is a design token so the skeleton flips with data-theme like the rest of the site; the var() fallbacks are the whitelisted --paper / --rule hexes so a first paint that somehow beat tokens.css still lands on-brand cream rather than a blinding unstyled white. Spacing / radius carry plain-px fallbacks (not colours, so no audit_css hex finding). Decorative only: the markup is aria-hidden, and the polite .boot-status live region above carries the real "loading" semantics for assistive tech. */ .boot-skeleton { padding: 0; } /* Bands mirror .fk-band's rhythm (30px 56px 34px) and its alt tint so the skeleton reads as the same banded page that's about to arrive. */ .boot-skel-band { padding: 30px 56px 34px; } .boot-skel-band--alt { background: var(--paper-2, #fbfaf6); } /* Step grid mirrors .lp-step: a fixed rail + a fluid content column, capped to the shell's 1400px measure. */ .boot-skel-step { max-width: 1400px; margin-inline: auto; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 36px; } .boot-skel-rail { display: flex; flex-direction: column; gap: var(--space-2, 8px); align-items: flex-start; } .boot-skel-content { min-width: 0; } /* Shimmer primitive. A muted --rule block with a lighter --paper sweep travelling left→right. The sweep is a decorative ::after so no extra markup is needed per block. */ .boot-skel { position: relative; overflow: hidden; border-radius: var(--r-md, 6px); background: var(--rule, #e3e0d6); } .boot-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent 0%, var(--paper, #fbfaf6) 55%, transparent 100% ); animation: boot-shimmer 1.4s ease-in-out infinite; } @keyframes boot-shimmer { 100% { transform: translateX(100%); } } /* Block shapes — a numeral chip, a title bar, two copy lines in the rail; a tall chart placeholder in the content column. */ .boot-skel-num { width: 46px; height: 46px; border-radius: var(--r-lg, 8px); } .boot-skel-title { width: 72%; height: 22px; margin-top: 4px; } .boot-skel-line { width: 100%; height: 12px; } .boot-skel-line--short { width: 60%; } .boot-skel-chart { width: 100%; height: 210px; border-radius: var(--r-lg, 8px); } @media (max-width: 900px) { .boot-skel-step { grid-template-columns: 1fr; gap: 14px; } .boot-skel-band { padding-left: var(--space-6, 24px); padding-right: var(--space-6, 24px); } .boot-skel-chart { height: 150px; } } /* Respect reduced-motion: keep the static block shapes, drop the sweep. */ @media (prefers-reduced-motion: reduce) { .boot-skel::after { animation: none; } }