/* ============================================================================= NOXEL // PIERRE LORET — système de polarité ----------------------------------------------------------------------------- Un seul squelette, deux dialectes. La polarité est portée par . data-pol="neg" → NOXEL encre blanche sur noir, pixel, brut, rapide data-pol="pos" → PIERRE LORET encre noire sur papier, éditorial, lent RÈGLE : ne jamais écrire une couleur en dur dans une page. Tout passe par les variables ci-dessous, sinon la page ne sait plus s'inverser. ============================================================================= */ /* ============================================================================= TRANSITIONS DE PAGE NATIVES (View Transitions API) ----------------------------------------------------------------------------- Le navigateur photographie la page sortante et l'entrante, puis anime de l'une à l'autre. Ça remplace le rideau #wipe, qui reste en repli. ⚠️ Ne marche QU'EN http(s). Ouvert en file:// l'origine est opaque, le navigateur refuse la transition et common.js retombe sur le rideau. Pour la voir : `python3 -m http.server 8080` puis localhost:8080. On ne nomme QUE .field. Tout le reste (nav, #prog, #rail, #hud, #cursor) est en mix-blend-mode:difference : un élément nommé est extrait de son contexte de fusion et virerait au blanc pendant la transition. Laissés dans le fond, ils se fondent avec eux-mêmes, donc invisiblement. ============================================================================= */ @view-transition { navigation: auto; } /* le champ porte la polarité de la page : c'est lui qui morphe d'une page à l'autre */ .field { position:fixed; inset:0; z-index:0; background:var(--bg); view-transition-name:field; } ::view-transition-group(field) { animation-duration:.62s; animation-timing-function:cubic-bezier(.62,.04,.16,1); } /* le fond prend le dialecte de la page d'ARRIVÉE : c'est son CSS qui pilote */ [data-pol="pos"]::view-transition-old(root), [data-pol="pos"]::view-transition-new(root) { animation-duration:.6s; animation-timing-function:cubic-bezier(.62,.04,.16,1); } [data-pol="neg"]::view-transition-old(root), [data-pol="neg"]::view-transition-new(root) { animation-duration:.32s; animation-timing-function:steps(6); } /* le curseur ne doit pas être photographié : il resterait figé dans l'image */ .vt-out #cursor, .vt-out #focus, .vt-out .ghost { opacity:0 !important; } @property --seam { syntax:''; inherits:true; initial-value:50%; } /* ---------- polarité négative (par défaut) ---------- */ :root, [data-pol="neg"] { --bg:#0a0a0a; --bg-2:#0f0f0f; --panel:#141414; --panel-2:#1c1c1c; --line:#2b2b2b; --line-2:#3a3a3a; --ink:#f4f4f4; --dim:#9c9c9c; --dim-2:#c4c4c4; --pure:#ffffff; /* l'encre absolue de cette polarité */ --anti:#0a0a0a; /* le fond absolu : texte posé sur --pure */ --display:"Press Start 2P", monospace; --display-w:400; --display-ls:1px; --display-lh:1.12; --ds:.60; --corner:5px; /* crans pixel : signature Noxel */ --ease:cubic-bezier(.2,.9,.15,1); --dur:.26s; --dur-2:.42s; } /* ---------- polarité positive ---------- */ [data-pol="pos"] { --bg:#f2f0ec; --bg-2:#eae7e1; --panel:#e9e6e0; --panel-2:#e1ddd5; --line:#d6d2ca; --line-2:#bdb8ae; --ink:#0a0a0a; --dim:#5f5c58; --dim-2:#3c3a37; --pure:#0a0a0a; --anti:#f2f0ec; --display:"Space Grotesk", system-ui, sans-serif; --display-w:700; --display-ls:-2.5px; --display-lh:.94; --ds:1; --corner:0px; /* le pro n'est pas cranté */ --ease:cubic-bezier(.62,.04,.16,1); --dur:.5s; --dur-2:.82s; } :root { --maxw:1180px; --gut:clamp(18px,5vw,58px); } /* ============================================================================= BASE ============================================================================= */ *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; background:var(--bg); } body { font-family:"Space Grotesk", system-ui, sans-serif; background:var(--bg); color:var(--ink); line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased; cursor:none; transition:background .6s var(--ease), color .6s var(--ease); } a { color:inherit; text-decoration:none; } img { max-width:100%; display:block; } /* appearance:none est INDISPENSABLE. Sans lui, macOS garde le chrome natif du