:root { --accent2-rgb: 34, 211, 238; --accent3-rgb: 251, 191, 36; } body.light-theme, body.bento-theme { --accent2-rgb: 8, 145, 178; --accent3-rgb: 217, 119, 6; } /* ═══════════════════════════════════════════════════════════════════════════ Initial app boot — single source of truth for the cinematic lifecycle. The contract : - `` starts with class `ct-loading`. The class STAYS forever ; it's a permanent state marker. `ct-ready` is added on top when the SPA shell is ready (see app.js → _ctMarkReady). - Until `ct-ready` is set : #ctInitLoader visible at full opacity, and TIER 2 wheels (per-section .ct-loader without --brand) are muted so they don't pop in underneath the overlay. - Once `ct-ready` is set : #ctInitLoader fades out over 480 ms, and the TIER 2 muting rule lifts (no longer matches the selector). The fade covers the moment per-section wheels appear, so the user sees a single continuous visual. This is intentionally NOT a 2-class combo like `ct-loading.ct-ready`. That combo broke previously when something removed `ct-loading` after the fade — the selector stopped matching and the loader fell back to its default `opacity:1`, popping back into view indefinitely. ═══════════════════════════════════════════════════════════════════════════ */ /* Landing + mainApp are invisible during the pre-ready phase to prevent the auth-check flash where a page renders before refreshMe() resolves. */ body.ct-loading #landing, body.ct-loading #mainApp { opacity: 0; transition: opacity var(--duration-fast) var(--ease-default); } body.ct-ready #landing, body.ct-ready #mainApp { opacity: 1; } /* If the user was authed in a previous session, skip the landing fade and hide it immediately ; the SPA shell is what they're expecting. */ body.ct-was-authed.ct-loading #landing { display: none; } /* #ctInitLoader — visible from first paint, fades out when ct-ready fires. Animation : 480 ms opacity, with visibility queued to flip after the fade so the element no longer captures pointer events. */ #ctInitLoader { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4, 16px); z-index: var(--z-spotlight, 99999); background: color-mix(in srgb, var(--bg0, #050810) 62%, transparent); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 480ms ease, visibility 0s linear 480ms; } body.ct-ready #ctInitLoader { opacity: 0; visibility: hidden; pointer-events: none; } /* Mute TIER 2 wheels (default .ct-loader instances without --brand / --in-overlay) until ct-ready fires. The brand loaders inside the centralised overlay (.ct-loader--in-overlay) and the redirect/init overlays (.ct-loader--brand) stay visible — they ARE the visual that covers the boot. */ body:not(.ct-ready) .ct-loader:not(.ct-loader--brand):not(.ct-loader--in-overlay) { opacity: 0 !important; visibility: hidden !important; } #ctInitLoader__caption { max-width: 320px; text-align: center; font-size: var(--text-lg, 16px); font-weight: 500; letter-spacing: 0.02em; color: var(--text, #f1f5f9); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); padding: 0 var(--space-4, 16px); opacity: 0.92; } /* The first-paint snippet at top of can't set a localStorage-driven theme class on #ctInitLoader, so reuse :root tokens directly via the transparent backdrop above — picks up Bento warm-lavande or Obsidian dark automatically. */ @media (prefers-reduced-motion: reduce) { #ctInitLoader { transition: none; } } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; max-width: 100%; overflow-x: hidden; } html { background-color: var(--bg0, #050810); } body { background-color: var(--bg0, #050810); } body.light-theme { background-color: var(--bg0); } body.bento-theme { background-color: var(--bg0); } body.atsiq-theme { background-color: var(--bg0); } body { font-family: var(--font-body); color: var(--text); background: radial-gradient(ellipse 1200px 600px at 20% 5%, rgba(var(--primary-rgb),0.18), transparent 55%), radial-gradient(ellipse 900px 450px at 80% 15%, rgba(var(--accent2-rgb),0.10), transparent 50%), radial-gradient(ellipse 700px 350px at 50% 85%, rgba(var(--accent3-rgb),0.06), transparent 50%), linear-gradient(170deg, var(--bg2) 0%, var(--bg1) 35%, var(--bg0) 100%); background-attachment: fixed; background-size: 100% 100%; min-height: 100vh; min-height: 100dvh; line-height: 1.6; overflow-x: hidden; } /* Skip navigation link (accessibility) */ .skip-nav { position: absolute; top: -40px; left: 0; background: var(--accent); color: var(--text-inverse); padding: var(--space-2) var(--space-4); z-index: var(--z-spotlight); transition: top var(--duration-base); text-decoration: none; font-weight: 600; font-size: var(--text-base); } .skip-nav:focus { top: 0; } /* Focus ring standardization */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* Custom interactive components — ensure keyboard focus ring */ .assistant-shell-choice:focus-visible, .tag-filter-btn:focus-visible, .kanbanCard:focus-visible, .bento-tile:focus-visible, .tool-card:focus-visible, .statCard:focus-visible, [role="button"]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ══════════════════════════════════════════════════════════════════════════════════════════ 🟠 `C48` — `color-scheme` ÉTAIT DÉCLARÉ « dark » GLOBALEMENT, SUR LES CONTRÔLES ────────────────────────────────────────────────────────────────────────────────────────── Ce qui était écrit ici : `select, input, textarea { color-scheme: dark; }` Deux défauts en une ligne, et ils sont TRANSVERSES — d'où l'escalade de FIX-R L2/L4/L5 (« ⛔ une passe de lot ne doit pas repeindre les contrôles de tout le produit en catimini », §5 n°4) : ① LA VALEUR EST UNE CONSTANTE DANS UN PRODUIT À QUATRE THÈMES (`G3` — la contradiction). Trois d'entre eux sont CLAIRS. Chacun a donc dû écrire sa CONTRE-déclaration pour défaire celle-ci — `atsiq-theme.css:412` (« force UA light rendering — évite dark-mode OS sur form elements ») et `variables.css:971` pour Slate Mist et Ink & Gold. Une règle fausse en global + deux règles pour l'annuler : c'est `G4`, le doublon, dans sa forme la plus coûteuse — la prochaine feuille de thème devra elle aussi se souvenir d'annuler. ② ELLE EST POSÉE SUR LES CONTRÔLES, PAS SUR LE DOCUMENT (`G5` — mesuré). `color-scheme` est une propriété HÉRITÉE dont la portée est la PAGE : elle gouverne aussi la barre de défilement du document, le fond des menus `