/* ========================================================================== Boot sequence overlay. Ships hidden. Only boot.js reveals it, so no-JS never sees it. Never shown under prefers-reduced-motion, and never twice in a session. ========================================================================== */ .boot { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; justify-content: center; gap: var(--s-2); padding: var(--gutter); background: var(--paper); font-family: var(--font-data); font-size: var(--mono-data); color: var(--muted); transition: opacity 380ms var(--ease), visibility 380ms var(--ease); } .boot[hidden] { display: none; } .boot.is-done { opacity: 0; visibility: hidden; pointer-events: none; } .boot__line { display: flex; align-items: baseline; gap: 0.8ch; max-width: none; margin: 0; opacity: 0; transform: translateY(4px); transition: opacity 180ms var(--ease), transform 180ms var(--ease); } .boot__line.is-in { opacity: 1; transform: none; } .boot__ok { color: var(--signal); } .boot__ok::before { content: "[ "; color: var(--rule); } .boot__ok::after { content: " ]"; color: var(--rule); } /* Stop the page scrolling behind the overlay while it runs. The class is on , so body alone is not enough — the document element is the scrolling box in most browsers. Both are locked, and overscroll is contained so a momentum flick cannot rubber-band the page underneath. */ .is-booting, .is-booting body { overflow: hidden; overscroll-behavior: none; touch-action: none; } .boot__dim { color: var(--rule); } /* Log scrolls as lines stream in; the overlay itself never scrolls. */ .boot__log { display: flex; flex-direction: column; gap: var(--s-2); max-height: 70vh; overflow: hidden; justify-content: flex-end; } /* Boot layout: log left, clock right. */ @media (min-width: 48em) { .boot { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-8); } .boot__log { flex: 1 1 auto; min-width: 0; } .boot__aside { flex: 0 0 auto; } .clock { text-align: right; } } /* Clock --------------------------------------------------------------------- Tabular figures throughout, or the seconds column shifts the whole block every tick. */ .clock { display: flex; flex-direction: column; gap: var(--s-2); } .clock__time { margin: 0; max-width: none; font-size: clamp(2rem, 6vw, 4.5rem); line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .clock__date { margin: 0; max-width: none; color: var(--muted); font-size: var(--mono-data); } .clock__zone { margin: 0; max-width: none; color: var(--signal); } @media (max-width: 47.99em) { .clock { margin-block-start: var(--s-6); } .clock__time { font-size: 2.25rem; } } /* Fastboot ------------------------------------------------------------------ Bottom-right of the overlay, opposite the log. Quiet until wanted: it should be findable without competing with the sequence it interrupts. */ /* The right-hand column: clock above, control below. */ .boot__aside { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-5); } .boot__skip { display: inline-flex; align-items: baseline; gap: 0.4ch; margin: 0; padding: var(--s-2) 0 var(--s-2) var(--s-3); border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--mono-data); letter-spacing: var(--track-label); cursor: pointer; transition: color var(--motion-fast) var(--ease); } .boot__skip:hover { color: var(--signal); } .boot__skip:hover .boot__skip-bracket { color: var(--signal); } .boot__skip-bracket { color: var(--rule); transition: color var(--motion-fast) var(--ease); } .boot__skip:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } @media (max-width: 47.99em) { /* Single column on a phone; the aside sits under the log, left aligned with everything else. */ .boot__aside { align-items: flex-start; gap: var(--s-4); } .clock { text-align: left; } .boot__skip { padding-inline: 0; } } /* Engaged state: the button has done its job, so it stops inviting a click. */ .boot__skip.is-engaged { color: var(--signal); pointer-events: none; } .boot__skip.is-engaged .boot__skip-bracket { color: var(--signal); }