/* ═══════════════════════════════════════════════════════════════ LaikaSuite — Base layer Reset, document typography, focus policy, accessibility primitives. Loaded by every application immediately after tokens.css. ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { /* The suite is a set of application shells, not scrolling documents: the page itself never scrolls, individual panes do. */ height: 100%; overflow: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { height: 100%; overflow: hidden; font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--leading-body); color: var(--text); background: var(--field); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis-weight: none; /* Chrome fires this on changes, so the frost↔obsidian switch cross-fades instead of snapping. */ transition: background-color var(--duration-slow) var(--ease-out); } /* The launcher is the one surface that scrolls like a page. The marker has to sit on , not on : the root element owns the viewport's scrollbar, so leaving `overflow: hidden` there clips the document however the body is styled. It is written directly into the markup rather than set by script, so scrolling never depends on JS. */ html[data-scroll="page"] { height: auto; overflow-x: hidden; overflow-y: auto; } html[data-scroll="page"] body { height: auto; min-height: 100%; overflow: visible; } /* ── Typography ────────────────────────────────────────────── astralaika.com sets h1, h2 and h3 in Anton, uppercase, at 1.02 leading and 0.01em tracking, and leaves everything below h3 in the body face. That rule is copied here verbatim, so a heading written by any of the fifteen applications comes out in the company's poster voice without the application having to ask for it. The scripts Anton cannot set are handled where the display recipe lives, in components.css. */ h1, h2, h3, h4, h5, h6 { text-wrap: balance; color: var(--text); } h1, h2, h3 { font-family: var(--font-display); font-weight: var(--font-display-weight); text-transform: uppercase; line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-synthesis: none; } h4, h5, h6 { font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-snug); } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-lg); } h5 { font-size: var(--text-md); } h6 { font-size: var(--text-sm); } p { text-wrap: pretty; } a { color: var(--accent); text-decoration: none; text-underline-offset: 0.18em; transition: color var(--duration-fast) var(--ease-out); } a:hover { color: var(--accent-hover); text-decoration: underline; } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.94em; } kbd { display: inline-block; min-width: 1.6em; padding: 0.15em 0.42em; font-size: var(--text-2xs); line-height: 1.45; text-align: center; color: var(--text-secondary); background: var(--surface-inset); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--radius-xs); } hr { height: 1px; border: 0; background: var(--border); } ul, ol { padding-inline-start: 1.35em; } /* ── Form controls inherit the system, never the platform ───── */ button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: none; border-radius: 0; } button { cursor: pointer; -webkit-tap-highlight-color: transparent; } button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: 0.45; } textarea { resize: vertical; } select { cursor: pointer; } img, svg, video, canvas { display: block; max-width: 100%; } svg { flex: none; } /* ── Focus policy ──────────────────────────────────────────── Focus is never removed — only rendered as a ring that matches the product accent. :focus-visible keeps it off mouse interactions. */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* Inside editable canvases the ring would follow the caret around; those surfaces opt out explicitly and show selection instead. */ [data-focus-ring="none"]:focus-visible { outline: none; } /* astralaika.com: `::selection { background: var(--red); color: var(--paper) }`. Solid, not a wash — the company marks a selection the way a printer marks a correction. */ ::selection { /* La couleur du service, pas celle de la company : on surligne dans Write, pas sur astralaika.com. Le geste reste celui du site — un aplat franc, comme un imprimeur marque une correction — mais il est bleu dans Write, turquoise dans Whiteboard, corail dans Vault. */ background: var(--accent); color: var(--accent-contrast, var(--ls-sand-0)); } /* ── Scrollbars — the company's, tinted poster red ─────────── astralaika.com sets `scrollbar-color: var(--red) var(--paper-2)` and leaves the track at the OS's own width. Same here, and square: a rounded thumb is the one piece of the old geometry that would have survived on every scrolling pane in the suite. */ * { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--ls-ember-600); border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--ls-ember-500); background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; } /* ── Accessibility primitives ───────────────────────────────── */ /* Visually hidden but announced. `!important`, comme toutes les variantes canoniques de sr-only : la classe se pose sur des éléments qui ont déjà leur propre géométrie — le `