/* ═══════════════════════════════════════════════════════════════════════════ GenPix AI — design tokens + shared components. CYBERPUNK. Two themes that are not inversions of each other but ROLE SWAPS: the same three hues (acid yellow, cold cyan, hot crimson) play different parts. Dark = night: black field, yellow signal. Light = the poster: acid yellow field, black ink. Every colour goes through a token — nothing in a page file hardcodes a hex. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ Display faces — Chakra Petch (system) + Warriot Tech Italic (wordmark). Chosen by MEASUREMENT, then by reading the result on screen. Eleven candidate cyberpunk faces were opened with fontTools and every glyph of the real French charset was drawn to a bounds pen. A character present in the cmap is not the same as a character that DRAWS: Warriot Tech and Valorax both claim é, è and € and render all three as empty boxes; Robotron has no accented vowel at all (110 glyphs); SD Glitch and cyberpunk-regular have no digits, so "0,15 €" fell back to Times mid-word. Exactly one face passed the whole set — Cyberwar — and it then failed on screen for a reason no charset audit can catch: its N is drawn as П and its X as H, so the brand name itself read "GEПPIH" in the header. The conclusion is the architecture: a poster face cannot run a UI. So the two jobs are split, and each face is confined to the strings it can survive. Chakra Petch → --display headings, nav, labels, prices, French. Semi-condensed, clipped corners, flat terminals — an instrument panel that happens to own every accent and the euro. Glitch Goblin → --display-loud the WORDMARK, and nothing else. Slanted, heavy, and cut through by a horizontal glitch step — the torn edge of the Cyberpunk 2077 logo itself. It cannot draw à, ù, û, ô, î or ï, which is survivable only because "GENPIX AI" is pure ASCII and is never translated. Subset to A–Z a–z 0–9 alone: 3.9 KB. Licensing decided this, not taste. genpix-ai.com takes payments, so it is a commercial use, and most of the folder cannot legally ship: Robotron, Dirt- chunk and SD Glitch are personal-use-only, Valorax is explicitly non-commercial, and Cyberwar, Bazer and cyberpunk-regular carry "All Rights Reserved" with no grant (cyberpunk-regular has no metadata at all). Glitch Goblin is the only face in the folder under the SIL Open Font License, with the licence written into the font's own name table. Self-hosted on purpose, not linked from fonts.googleapis.com: the CNIL and the Munich ruling both treat that CDN as sending a French visitor's IP to Google without consent. Body copy stays Inter — an angular face at 15px over a paragraph is where "cyberpunk" turns into "hard to read". ═══════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/chakrapetch-500-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/chakrapetch-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/chakrapetch-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/chakrapetch-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/chakrapetch-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/chakrapetch-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Glitch Goblin"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/glitchgoblin-mark.woff2) format("woff2"); } /* Cyberpunk Regular — the poster face, kept OFF the reading path on purpose. Its charset is 56 glyphs: A–Z, a–z, space. No digit, no comma, no accent, no euro. And the drawing itself refuses to be read — put the alphabet on screen and C comes out as an angle, P loses its bowl and turns into Γ, Q reads as a question mark, U as a check mark, G as an F. "GENPIX" renders "GENΓIX": the exact failure that disqualified Cyberwar in the audit above. So it is not a heading face — it is a GLITCH ALPHABET, and that is a job it does better than any legible font could. Two uses, both of them deliberate: · the hero watermark, at 200 px, where the eye reads texture not words (the string is chosen from the letters that survive: N O L I M I T S) ; · the corrupted letters thrown by js/mosh.js — for 80 ms a character in a button label is redrawn in this face, which is why the glitch reads as a transmission fault instead of a font swap. The unicode-range is a FENCE, not an optimisation: anything outside A–Z a–z falls through to Chakra Petch by itself, so no string can ever hit a missing glyph. Subset to those 56: 9.8 KB. Provenance: the file carries no licence, no copyright, no vendor and no designer in its name table — Version 001.001 and nothing else. It is fenced into decoration partly for that reason too; see the note in the deploy audit before this ships anywhere commercial. */ @font-face { font-family: "Cyberpunk Poster"; font-style: normal; font-weight: 400; font-display: block; src: url(/fonts/cyberpunk-poster.woff2) format("woff2"); unicode-range: U+0020, U+0041-005A, U+0061-007A; } :root { /* ── NIGHT ── poster 3: the black field, the yellow signal. The floor drops from #0f1113 to #08090a. That is not "darker for the sake of it": the accent moved from a red-orange to CP2077's acid yellow (#fcee0a), and yellow only reads as a light SOURCE if the field behind it is genuinely night. On #08090a the yellow measures 17.6:1 — versus 5.9:1 for the orange it replaces. That single number is the whole renovation: nothing on this site is "too dark to see" any more. Plane separation stays a surface step of ~6 points, never a drawn line. */ --bg-0: #08090a; --bg-1: #0e1013; --bg-2: #14171a; --bg-3: #1c2025; /* Hairlines carry a trace of the cold hue rather than being neutral grey — it is what makes a dark panel read as machined instead of just dim. */ --line: #222a2f; --line-soft: #171d21; /* Ink is cooled a few points toward the cyan structure. Never pure white: #e8edef on #08090a is ~16.8:1 and still calm. */ --fg: #e8edef; --fg-dim: #939ba0; --fg-faint: #676f74; /* ── The three hues. One signal, one structure, one alarm. ── Yellow is the ONLY loud thing on the page — the poster fires it and nothing else. Cyan is never loud: it is the cold line that organises. Crimson is reserved for failure, so it must not be reachable by anything decorative. */ --accent: #fcee0a; --accent-ink: #000000; /* On night, the yellow is already at maximum contrast — big type needs no lifted variant, so accent-hi is the same colour. The token stays because the light theme genuinely needs it. */ --accent-hi: #fcee0a; --cold: #00e5ff; --ok: #22e38a; /* Warn cannot be yellow any more — yellow is the brand. It moves to a warm orange, which is now free. */ --warn: #ff8a3d; --bad: #ff003c; /* Form controls sit ABOVE the page, never below it — a darker well on a dark floor reads as a hole. */ --field: #14171a; --field-focus: #1b2025; /* Cyberpunk corners are CUT, not rounded. 2px is the largest radius that still reads as a chamfer rather than a pill. */ --radius: 2px; --radius-lg: 3px; --shadow: 0 18px 50px -26px rgb(0 0 0 / 0.9); --grid: rgb(255 255 255 / 0.022); /* The accent in parts, for the places that need it with an alpha. */ --accent-rgb: 252 238 10; /* The colour of the floating dust drawn on #dust by js/landing.js. */ --dust-ink: #fcee0a; /* ── LA COULEUR ÉTRANGÈRE — le tiers manquant des affiches ──────────────── Sur les trois affiches, le jaune ne travaille jamais seul : il y a toujours une surface qui n'est ni le champ ni l'encre — un cyan (le col de l'affiche 1, l'autocollant « NEXT-GEN UPDATE » de l'affiche 2), un rouge (les panneaux de fond de l'affiche 3, le bandeau PEGI de l'affiche 1). Sans ça, la page est bicolore et l'œil lit un thème bien réglé, pas une affiche. LA DOSE, ET C'EST TOUT LE SUJET : on la voit UNE FOIS PAR PAGE au maximum, et beaucoup de pages n'en ont pas du tout. La première version peignait 10 % du cadre de chaque section — vérifié à l'œil : ça recouvrait le titre du hero. Un décor qui mange le contenu n'est plus un décor. · --focus : le CYAN, et il ne décore rien — il suit le curseur. Un document n'a qu'un focus à la fois, donc le « une fois par page » est garanti par la STRUCTURE et pas par la discipline. Au repos, la page est strictement noir + jaune ; l'accroc n'existe que pendant qu'on s'en sert. Pourquoi pas --accent : le jaune est le SIGNAL (ce sur quoi il faut cliquer) ; si le champ actif est jaune aussi, le regard a deux destinations et n'en a plus aucune. · --focus-ring : le même cyan quand il sert d'ANNEAU au lieu de bord. Deux jetons parce que les deux rôles n'ont pas les mêmes contraintes de contraste — l'explication est dans le bloc du thème jour. · --rouge : la marque, posée à la main sur UN bouton d'UNE page (`.mark-red`, cf. css/landing.css). Elle ne porte aucune information, exactement comme le rouge de l'affiche. LA RÈGLE QUI ÉVITE LA COLLISION AVEC L'ALARME : --rouge ne fait que CERNER (outline), il n'encre jamais un texte ; --bad ne fait que l'inverse. Un rouge de décor et un rouge d'erreur ne peuvent donc pas être confondus, parce qu'ils n'occupent jamais le même type de surface. */ --focus: #00e5ff; --focus-ring: #00e5ff; --rouge: #e8112d; /* Every stack ends with the symbol/emoji faces. Not decoration: Inter and Chakra Petch carry no pictographs at all, so a glyph outside their coverage (🌳, ⛉, ✦) fell through to the browser's LAST-RESORT font — which on some machines draws the empty box Phil saw. Naming the emoji faces gives the glyph a real home before that happens. It costs nothing for text: a face is only consulted for a codepoint the ones before it do not have. The truly rare symbols (the power sign for Sign out) are drawn as SVG instead — no font anywhere is guaranteed to have them. */ --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Apple Symbols", "Symbola"; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Apple Symbols"; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Apple Symbols", sans-serif; /* Everything large or bold. Never body copy. */ --display: "Chakra Petch", "Inter", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Apple Symbols", sans-serif; /* The wordmark, and nothing else. Pure-ASCII controlled string only: this face has no accent, no euro, no period. */ --display-loud: "Glitch Goblin", "Chakra Petch", "Inter", sans-serif; /* The glitch alphabet. Decoration and corrupted letters only — never a string the reader has to read. See the @font-face note above. */ --display-poster: "Cyberpunk Poster", "Glitch Goblin", "Chakra Petch", sans-serif; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 260ms; } [data-theme="light"] { /* ── DAY ── poster 1 taken at its word: APLAT INTÉGRAL. ONE yellow, not four. The first pass stepped the planes down into deeper yellows (#f2e400 → #d8ca00), the way a dark theme steps up — and that is precisely what went soft on screen: pack cards and the prompt bar sat yellow-on-yellow with a mushy seam, and a mustard halo bled around every gallery thumbnail. The poster never does that. It holds ONE field and it CUTS into it with pure black. So separation stops being a matter of surface and becomes a matter of INK. Three devices, and no fifth yellow: · every rule is black → --line · what must LIFT casts a hard offset, no blur → --shadow · what must STAND APART becomes a black plate → .plate, at the foot A tint would have been a fourth device, and it is the one the poster refuses. */ --bg-0: #fcee0a; --bg-1: #fcee0a; --bg-2: #fcee0a; --bg-3: #fcee0a; /* The rule IS the structure now, so it is ink and not a darker yellow. `--line-soft` is that same ink screened back, never a colour of its own: a grey hairline on acid reads as dirt on the print. */ --line: #000000; --line-soft: rgb(0 0 0 / 0.34); /* Pure black ink, which the dark theme never uses. On the acid field it is 20.9:1 — the loudest legible pair that exists, and the reason this theme answers "too dark to see" better than any grey ever could. The dim and faint steps are the FIELD darkened, not black lightened: on a saturated yellow, a neutral grey turns muddy within two steps. */ --fg: #000000; --fg-dim: #4a4400; --fg-faint: #6b6400; /* The accent cannot be yellow here (it is the field) and must not be black: 106 rules in this codebase use --accent as TEXT colour, and a black accent would silently flatten every one of them into body copy. So the cold hue takes the lead role, burnt down until it reads on acid — #006f80 is 4.7:1 on the field, and still unmistakably the same cyan as the night theme. Full-strength cyan is not lost: it is allowed INSIDE a black plate, and only there — which is exactly where the posters put it. */ --accent: #006f80; --accent-ink: #fcee0a; --accent-hi: #00505d; --cold: #00404a; --ok: #0a6b2e; --warn: #8a3d00; --bad: #c4002e; /* An input is no longer a well: there is no second surface left to sink into. It is a rectangle of the field with ink drawn round it. */ --field: #fcee0a; --field-focus: #fcee0a; /* No blur, no colour, no spread — a printed offset. This one token turns every lifted thing on the site (menus, the prompt bar, tooltips, panels, the lightbox) into a plate laid on the poster rather than a soft UI card floating over paper. */ --shadow: 5px 5px 0 rgb(0 0 0 / 0.9); --grid: rgb(0 0 0 / 0.055); --accent-rgb: 0 111 128; /* Le cyan ne touche JAMAIS le champ directement : les affiches ne posent jamais du cyan sur du jaune sans une encre entre les deux, et l'aplat intégral dit la même chose — ici la séparation est une affaire d'encre. Le rouge, lui, ne bouge pas d'un thème à l'autre : rouge sur jaune est un couple d'imprimerie, il tient tel quel. Les deux rôles du cyan, en revanche, divergent ici, et c'est mesuré, pas choisi : · en BORD, il doit SÉPARER — donc il lui faut le contraste d'une encre. #00e5ff sur #fcee0a fait 1,3:1, c'est-à-dire rien ; le même cyan poussé jusqu'à l'encre (#00414f) fait 8,9:1, et il reste franchement plus froid que le teal de l'accent (#006f80), sinon le focus et le signal se ressembleraient. · en ANNEAU, il est déjà bordé de noir des deux côtés — il n'a donc plus à séparer, il n'a plus qu'à se faire voir : le cyan vif reprend sa place. */ --focus: #00414f; --focus-ring: #00c2de; --rouge: #e8112d; /* Print grain, not neon: on the aplat the dust is ink like everything else. */ --dust-ink: #000000; } @media (prefers-reduced-motion: reduce) { :root { --dur: 1ms; } * { animation-duration: 1ms !important; animation-iteration-count: 1 !important; } } /* ── Base ─────────────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } /* min-height, NOT height. With `height: 100%` the body's box is exactly one viewport tall however long the page is — and a `position: sticky` element is bounded by its containing block, so the header stopped sticking the moment you scrolled past the first screen. Measured on the landing page: header getBoundingClientRect().top = -78 at scrollY 700. It looked fine only because nobody had scrolled that far while watching the top of the screen. */ html { height: 100%; } body { min-height: 100%; } /* ── L'ÉCHELLE DE LA PAGE, SUR TÉLÉPHONE (Phil, 15/09) ─────────────────────── « désactive le zoom à deux doigts, la page sort du cadre de l'iPhone, surtout après avoir envoyé un message ». `touch-action: manipulation` retire le double-tap-zoom (et, au passage, le délai de 300 ms sur le clic) sans toucher au défilement. Le pincement, lui, se refuse en JS (js/nozoom.js) : aucune propriété CSS ne l'arrête sur iOS. `-webkit-text-size-adjust: 100%` empêche Safari de regrossir le texte tout seul en paysage — un agrandissement qu'on n'a pas demandé est un débordement qu'on n'a pas vu. */ html { touch-action: manipulation; -webkit-text-size-adjust: 100%; } /* Et la page ne se TIRE plus non plus sur le côté : mesuré sur /app.html, on pouvait la faire glisser de 26 px vers la droite — l'animation de changement de vue déplace la section par `transform`, et un élément transformé compte dans la zone défilable. Le zoom coupé, ce glissement DEVIENT le « ça sort du cadre ». `clip` plutôt que `hidden` : `hidden` ferait de la racine un conteneur de défilement (les en-têtes `sticky` s'y recollent mal), `clip` coupe sans rien devenir. */ html, body { overflow-x: clip; } body { overscroll-behavior-y: none; } /* LA cause du « après avoir envoyé un message » : Safari iOS agrandit la page entière dès qu'un champ reçoit le focus avec une police < 16 px, et il ne la remet jamais à 1 ensuite. Ce n'est pas un réglage, c'est une règle du moteur : le seul remède est de ne jamais descendre sous 16 px sur un écran tactile. `(pointer: coarse)` vise le doigt, pas la largeur — un écran étroit à la souris garde ses tailles d'origine. */ @media (pointer: coarse) { input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=tel], input[type=url], input[type=date], input:not([type]), textarea, select { font-size: 16px !important; } } body { margin: 0; background: var(--bg-0); color: var(--fg); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* A faint grid, always there, never noticed — the "instrument panel" floor. */ background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 44px 44px, 44px 44px; } a { color: inherit; text-decoration: none; } /* Headings carry the display face. Note the letter-spacing flips sign: a grotesk wants tightening at display size, an angular semi-condensed face wants the opposite — its flat terminals collide when you pull them together. Sizes go up ~6 % because Chakra Petch's x-height is lower than Inter's, so the same px value reads smaller. */ h1, h2, h3 { margin: 0 0 .4em; font-family: var(--display); font-weight: 600; letter-spacing: 0.005em; line-height: 1.12; } h1 { font-size: clamp(32px, 5.4vw, 62px); font-weight: 700; } h2 { font-size: clamp(21px, 2.7vw, 30px); } p { margin: 0 0 1em; color: var(--fg-dim); } code, .mono { font-family: var(--mono); font-size: .92em; } hr { border: 0; border-top: 1px solid var(--line-soft); margin: 22px 0; } ::selection { background: var(--accent); color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* ── Layout ───────────────────────────────────────────────────────────────── */ .wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; } .stack > * + * { margin-top: var(--gap, 16px); } .row { display: flex; gap: 12px; align-items: center; } .row.wrap-row { flex-wrap: wrap; } .spacer { flex: 1; } .muted { color: var(--fg-dim); } .faint { color: var(--fg-faint); } .small { font-size: 13px; } .tiny { font-family: var(--display); font-weight: 600; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-faint); } /* Le seul accent TEXTE de la feuille. `.badge.gold` existait déjà, mais une pastille est un objet : quand le chiffre doit rester un chiffre (« 24 unused » sous un compteur), il lui faut la couleur sans la boîte, sinon la mention part en gris et se lit comme du décor. */ .gold { color: var(--accent); } /* ── Header ───────────────────────────────────────────────────────────────── */ .top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 18px; padding: 12px 20px; background: color-mix(in oklab, var(--bg-0) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line-soft); } .brand { display: flex; align-items: center; gap: 9px; font-family: var(--display-loud); font-weight: 700; font-size: 17.5px; letter-spacing: .015em; text-transform: uppercase; } .brand .glyph { width: 22px; height: 22px; flex: none; border: 1px solid var(--accent); border-radius: 50%; position: relative; transition: transform 600ms var(--ease); } .brand .glyph::before, .brand .glyph::after { content: ""; position: absolute; inset: 4px; border: 1px solid var(--accent); border-radius: 50%; opacity: .55; } .brand .glyph::after { inset: 8px; opacity: .9; background: var(--accent); } .brand:hover .glyph { transform: rotate(180deg); } .nav { display: flex; gap: 2px; } .nav a, .nav button { position: relative; padding: 7px 12px; border: 0; background: none; color: var(--fg-dim); font: 600 13px/1 var(--display); letter-spacing: .04em; cursor: pointer; border-radius: var(--radius); transition: color var(--dur) var(--ease); } .nav a:hover, .nav button:hover { color: var(--fg); } .nav a.on, .nav button.on { color: var(--accent); } .nav a.on::after, .nav button.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1px; background: var(--accent); } /* Le produit sœur en PASTILLE ROSE (Phil, 14/09 : « bgcolor pink so it make more attractive ») — l'accent de companion (#c94f7c), pas une teinte de ce thème, présent sur la home ET dans le studio (theme.css est partagé). */ .nav a.nav-companion, .nav a.nav-companion:hover { background: #c94f7c; color: #fff; border-radius: 999px; padding: 7px 14px; margin-left: 4px; box-shadow: 0 2px 10px rgba(201, 79, 124, .35); transition: filter var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .nav a.nav-companion:hover { filter: brightness(1.12); box-shadow: 0 3px 14px rgba(201, 79, 124, .5); } /* ── Header menu + account strip ──────────────────────────────────────────── */ /* A dropdown, not a link: "What it does" was one word pointing at a section halfway down the page. This lists the actual jobs the site does, so the menu answers the question instead of promising an answer further down. It is fed from /seo/index.json, the same manifest the SEO pages are built from. */ .menu { position: relative; } .menu-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; background: none; color: var(--fg-dim); font: 600 13px/1 var(--display); letter-spacing: .04em; cursor: pointer; border-radius: var(--radius); transition: color var(--dur) var(--ease); } .menu-btn:hover, .menu[data-open] .menu-btn { color: var(--fg); } .menu-btn .caret { font-size: 9px; opacity: .65; transition: transform 220ms var(--ease); } .menu[data-open] .menu-btn .caret { transform: rotate(180deg); } .menu-pop { position: absolute; top: calc(100% + 9px); left: -8px; z-index: 50; width: min(560px, 88vw); padding: 12px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); animation: pop-in 180ms var(--ease) both; } @keyframes pop-in { from { opacity: 0; transform: translateY(-6px); } } .menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .menu-grid a { display: block; padding: 8px 10px; border-radius: var(--radius); color: var(--fg-dim); font-size: 13.5px; line-height: 1.3; border-left: 2px solid transparent; transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease); } .menu-grid a:hover { background: var(--bg-2); color: var(--fg); border-left-color: var(--accent); } .menu-all { display: block; margin-top: 8px; padding: 9px 10px 3px; border-top: 1px solid var(--line-soft); font: 600 12px/1 var(--display); letter-spacing: .07em; text-transform: uppercase; color: var(--accent); } @media (max-width: 720px) { .menu-pop { width: min(340px, 92vw); } .menu-grid { grid-template-columns: 1fr; } } /* The right-hand strip. Empty until /api/auth/me answers - see index.html. */ .acct { display: flex; align-items: center; gap: 8px; } /* ── Un seul bouton pour les réglages (15/09) ────────────────────────────── Phil : « fusion every setting in one buttom that will save me more space on the header ». Le bandeau garde ce qui porte une décision d'argent (le crédit, le « + » qui recharge) ; le nom, le studio, la bibliothèque, le guide, le thème, le « ? » et la déconnexion passent derrière la silhouette — le même tracé que `#btn-profile` côté companion. */ .acct .acct-plus { padding: 0; width: 28px; height: 28px; display: grid; place-items: center; font-size: 16px; line-height: 1; font-weight: 700; } .acct-prof { position: relative; } .acct .btn-icon { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border-radius: 9px; border: 1px solid var(--line); background: none; color: inherit; cursor: pointer; } .acct .btn-icon:hover { border-color: var(--accent); color: var(--accent); } .acct .btn-icon[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); } .acct-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 200; min-width: 246px; padding: 6px; display: grid; gap: 1px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-1, #14121a); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); } .acct-menu.hidden { display: none; } .am-id { padding: 8px 10px 9px; display: grid; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .am-id b { font-size: 13.5px; } .am-sub { font-size: 11px; opacity: .55; overflow: hidden; text-overflow: ellipsis; } /* Une seule ligne pour le libellé et le montant, la phrase en dessous. En `grid-template-columns: 1fr auto` le montant se retrouvait comprimé et « 71,93 € » passait à la ligne AU MILIEU du nombre. */ .am-credit { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; padding: 7px 10px; border-radius: 8px; text-decoration: none; color: inherit; } .am-credit b { color: var(--accent); white-space: nowrap; justify-self: end; } .am-credit.low b { color: var(--bad); } .am-credit i { grid-column: 1 / -1; font-style: normal; opacity: .5; font-size: 11px; } .acct-menu > a, .am-out { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; text-decoration: none; color: inherit; font: inherit; font-size: 13px; background: none; border: 0; text-align: left; width: 100%; cursor: pointer; } .acct-menu > a:hover, .am-out:hover, .am-credit:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); } .am-companion:hover { background: color-mix(in srgb, #ff4d9d 22%, transparent); } .am-tools { display: flex; gap: 6px; padding: 6px 8px; margin-top: 4px; border-top: 1px solid var(--line); } /* Les deux boutons ADOPTÉS depuis le
: mêmes éléments, nouveau parent, donc rien à recâbler — seulement une boîte à leur donner. */ .am-tool { width: 30px; height: 30px; display: grid !important; place-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 0; } .am-out { margin-top: 2px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; } .am-out:hover { color: var(--bad); } @media (max-width: 560px) { .acct .credit .lbl { display: none; } .acct-menu { min-width: 208px; } } .acct .credit { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--bg-1); font-family: var(--mono); font-size: 13px; color: var(--fg); } .acct .credit b { color: var(--accent); font-weight: 600; } .acct .credit.low b { color: var(--bad); } /* The chip pulses when the composer spends or refunds — you see the number move even if you were looking at the picture. Keyframes live here rather than in app.css because the landing header uses them too. */ .acct .credit.bump { animation: bump 620ms var(--ease); } @keyframes bump { 30% { transform: scale(1.09); border-color: var(--accent); } 100% { transform: none; } } .acct .who { max-width: 148px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--fg-faint); } /* 860 was too low: with the address visible the bar measures 952px, so between 861 and 960 it still ran off the right edge (the theme toggle landed at x=931 in an 885px window). The address is the first thing that can go — you know which account you are in. */ @media (max-width: 960px) { .acct .who, .acct .credit .lbl { display: none; } } /* ── The header on a phone ───────────────────────────────────────────────── `.top` is one flex row that never wrapped, and its contents don't compress: the nav links, the credit chip and the buttons all refuse to shrink past their text. Intrinsic width came to 744px, so on a 375px screen the account block started at x=409 — Top up, Studio and sign-out sat entirely off the right edge, and every page scrolled sideways. Measured 17/08, all 11 pages that use `.top`. It folds in two stages instead of hiding behind a burger: no page needs new markup, and nothing ends up more than one tap away. */ @media (max-width: 760px) { .top { flex-wrap: wrap; gap: 10px; padding: 10px 14px; } /* Sent to its own second line. No `overflow` here on purpose — the "What you can make" panel is absolutely positioned inside it and a scroll container would clip it. It measures 215px, so it fits even a 320px screen. */ .top .nav { order: 10; width: 100%; } } @media (max-width: 430px) { /* The glyph already says the name; it keeps its own 22px box. */ .brand { font-size: 0; gap: 0; } /* Top up and the credit chip point at the same place, so the button is the one that can go: tapping the amount still lands on the wallet. Matched by href rather than by `.ghost`, because a low balance swaps the ghost and primary classes between Top up and Studio. */ .acct .btn[href="/app.html#wallet"] { display: none; } /* 27px short of fitting at 320, which pushed the theme toggle onto a third row. Help goes rather than the toggle: it is a keyboard affordance ("or press ?") on a device with no such key, and /guide.html says the same thing. The light/dark switch stays — both themes are the product. */ .top [data-help-toggle] { display: none; } } /* At 320 the first row came to 277px for 277px of room — the theme toggle was thrown onto a line of its own and the bar grew to three rows. Nothing needs to be removed to gain the missing 38px: the gaps and the button padding were sized for a mouse. */ @media (max-width: 360px) { .top { gap: 8px; padding: 10px; } .acct { gap: 6px; } .acct .btn { padding-left: 10px; padding-right: 10px; } } /* ── Buttons ──────────────────────────────────────────────────────────────── */ /* ── `hidden` doit vouloir dire hidden ────────────────────────────────────── `display: inline-flex` ci-dessous est une valeur EXPLICITE : elle bat le `[hidden] { display: none }` de la feuille du navigateur, qui n'a aucune spécificité. Résultat, un `btn.hidden = true` en JS ne cachait rien — et la maison avait déjà rustiné ce même défaut trois fois localement (admin-talent.css ×2, app.css). On le corrige donc à la SOURCE, une fois, pour tous les boutons de toutes les pages. */ .btn[hidden] { display: none !important; } .btn { --btn-bg: var(--bg-3); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; min-height: 38px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--btn-bg); color: var(--fg); font: 600 13.5px/1 var(--display); letter-spacing: .03em; cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); } .btn:hover:not(:disabled) { border-color: color-mix(in oklab, var(--accent) 55%, var(--line)); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn.ghost { background: transparent; } /* Un bouton qui ne porte qu'un glyphe n'a pas besoin de 16 px de marge de chaque côté : c'est de la place prise à ce qu'il y a à côté, et à côté il y a souvent un nom écrit par l'utilisateur. Carré, à la hauteur d'un `.pk-btn` pour que la rangée reste une ligne droite. */ .btn.sq { flex: none; width: 34px; min-width: 34px; min-height: 34px; padding: 0; font-size: 15px; } .btn.link { background: none; border-color: transparent; color: var(--fg-dim); padding-inline: 6px; } .btn.link:hover { color: var(--accent); } /* The primary button answers the cursor: the light inside it follows the pointer (--mx/--my are written by js/ui.js). Not a hover state — a surface that is lit from where you are. */ .btn.primary { position: relative; overflow: hidden; background: var(--accent); color: var(--accent-ink); border-color: color-mix(in oklab, var(--accent) 70%, #000); font-weight: 600; /* The accent is a LIGHT SOURCE on the dark theme, not a paint swatch — it spills onto the floor around it (higgsfield does the same with a flat 0 0 8px). Two layers: a tight rim that reads as emission, a wide bloom that only exists as a gradient in the eye. Warms on hover instead of moving. */ box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 22%, transparent), 0 0 18px -4px color-mix(in oklab, var(--accent) 45%, transparent); transition: box-shadow 320ms var(--ease); } .btn.primary:hover:not(:disabled) { box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 34%, transparent), 0 0 26px -2px color-mix(in oklab, var(--accent) 60%, transparent); } /* No glow to be had on paper — the light theme keeps the cut. */ [data-theme="light"] .btn.primary, [data-theme="light"] .btn.primary:hover:not(:disabled) { box-shadow: none; } .btn.primary::before { content: ""; position: absolute; inset: -60%; background: radial-gradient(38% 38% at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .5), transparent 70%); opacity: 0; transition: opacity 320ms var(--ease); pointer-events: none; } .btn.primary:hover::before { opacity: 1; } .btn.danger { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 40%, var(--line)); } /* ═══ Hold to fire ═══ Driven by public/js/hold.js — the ORBITE gesture. Everything here is painted in `currentColor`, so a .danger button charges red and a plain one charges ink without this file knowing which is which. ═══════════════════════════════════════════════════════════════════════════ */ .holdable { position: relative; touch-action: none; -webkit-user-select: none; user-select: none; } .holdable .hold-lbl { position: relative; z-index: 5; display: inline-flex; align-items: center; gap: inherit; } /* width/height EXPLICIT, not inset:0 alone: an is a REPLACED element — inset:0 with width:auto does not stretch it, it keeps its intrinsic 300×150 and the contour draws at an unrelated scale in the middle of the button. */ .hold-trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 4; } .hold-trace path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .92; transition: stroke-width .2s, filter .2s; } /* The last 15 %. Dark carries it as LIGHT (constant stroke, a glow appears), paper carries it as WEIGHT (no glow to be had on paper — the stroke thickens). Same rule as .btn.primary above, and as ORBITE's two themes. */ .hold-trace.close path { filter: drop-shadow(0 0 7px currentColor); } [data-theme="light"] .hold-trace.close path { filter: none; stroke-width: 3.4; } /* The charge advances by MASK, never scaleX: a scaled layer gives a hard vertical edge — a shutter crossing the button instead of a light rising in it — and its feather would grow with the charge. The mask keeps a constant 44 px trailing edge, and starts at -44px so nothing shows at rest. */ .hold-fill { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: currentColor; opacity: .16; z-index: 1; --hold-u: -44px; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 var(--hold-u), transparent calc(var(--hold-u) + 44px)); mask-image: linear-gradient(90deg, #000 0, #000 var(--hold-u), transparent calc(var(--hold-u) + 44px)); } /* The lock is not a flash on the button: the contour DETACHES from it — grows a little, goes out. The light leaves the object rather than lighting it. */ .hold-lock { animation: hold-lock 320ms cubic-bezier(.16, .84, .12, 1) both; } @keyframes hold-lock { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.055); } } /* The sentence under a wipe button: what it is about to take, and what lives. It is not help text — it is the only place the blast radius is written. */ .wipe-note { font-size: 11.5px; line-height: 1.45; color: var(--fg-faint); max-width: 56ch; } /* ═══ The prompt bar ═══ Shared by the front page and the studio, which is why it lives here and not in landing.css. It is the same component in both: the same markup, the same docking, the same keys. Someone who made their first image in the hero opens the studio and the tool is exactly where they left it. ═══════════════════════════════════════════════════════════════════════════ */ /* ── The prompt bar ───────────────────────────────────────────────────────── */ /* This is the page. It sits directly under the headline with nothing between them, because every sentence we could put there is a sentence that delays the only action that matters. */ .composer { position: relative; max-width: 880px; margin-top: clamp(24px, 4vh, 40px); } .hero-in > .cmp-slot > .composer { max-width: 880px; } /* ── Docking ──────────────────────────────────────────────────────────────── */ /* The slot holds the bar's height open so the page does not collapse upward by ~120px at the exact moment the bar leaves it. Measured at dock time by js/dock.js rather than hardcoded, because the bar's height depends on how many reference photos are sitting in it. */ .cmp-slot { position: relative; } .composer.docked { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); width: min(820px, calc(100% - 28px)); max-width: none; margin-top: 0; z-index: 60; transform: translateX(-50%); animation: dock-in 420ms var(--ease) both; /* Docked, the stack inverts: the state line goes ABOVE the bar. In the hero it sits underneath because there is page below it to read into; at the foot of the screen there is nothing below but the edge, and the pill was being clipped by it. Flex order, not a DOM move — the markup stays one form. */ display: flex; flex-direction: column; } .composer.docked .cmp-note { order: -1; } /* The trial chip goes above the state line, not below it: the promise is the standing fact, the note is what just happened. Reading order follows. */ .composer.docked .cmp-trial { order: -2; } /* It arrives from the bottom edge, not from where it was. That is the whole message: the bar did not move down the page, it came back from off-screen to be within reach. Reversed on undock so the gesture is symmetrical. */ @keyframes dock-in { from { transform: translateX(-50%) translateY(58px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } } .composer.undocking { animation: dock-out 260ms var(--ease) both; } @keyframes dock-out { from { transform: translateX(-50%) translateY(0); opacity: 1; } to { transform: translateX(-50%) translateY(58px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .composer.docked, .composer.undocking { animation: none; } } /* Docked, the bar is a floating instrument: opaque enough to sit over pictures, lit from under so it reads as hovering rather than pasted on. */ .composer.docked .cmp-bar { background: color-mix(in oklab, var(--bg-1) 94%, transparent); backdrop-filter: blur(18px) saturate(1.25); border-color: color-mix(in oklab, var(--accent) 22%, var(--line)); box-shadow: 0 22px 60px -22px rgb(0 0 0 / .78), 0 0 0 1px color-mix(in oklab, var(--accent) 9%, transparent); } /* Opaque, and cut in ink. Translucency was the right answer when the bar floated over a dark gallery on a dark page: the blur read as glass. Over BLACK-MOUNTED pictures on an acid field it reads as a dirty yellow smear — 96 % of the field mixed with whatever photograph happens to be underneath. A poster has no glass. The bar is a plate of the paper, laid on top. */ [data-theme="light"] .composer.docked .cmp-bar { background: var(--bg-0); backdrop-filter: none; border-color: var(--line); /* La première couche est transparente EXPRÈS, et ce n'est pas décoratif : `.cmp-bar` a un `transition: box-shadow`, et le focus ajoute un anneau — donc on passait d'une ombre à UNE couche à une ombre à DEUX. Mesuré au navigateur : la transition restait bloquée sur l'image de départ et l'anneau cyan n'apparaissait jamais (le calcul, lui, était juste — c'est l'interpolation entre deux listes de longueurs différentes qui coinçait). Les deux états déclarent maintenant le même nombre de couches, dans le même ordre : l'anneau naît de rien au lieu de naître d'un décalage. */ box-shadow: 0 0 0 3px transparent, 5px 5px 0 rgb(0 0 0 / 0.9); } /* The explanation line and the drop veil belong to the hero, not to a floating bar over the gallery - docked, the bar is a tool, not a pitch. */ .composer.docked .cmp-note { display: none; } .composer.docked.has-msg .cmp-note { display: block; margin: 0 0 9px; text-align: center; padding: 6px 12px; border-radius: 999px; background: color-mix(in oklab, var(--bg-1) 92%, transparent); border: 1px solid var(--line-soft); width: fit-content; margin-inline: auto; } /* Two lines can occupy that slot (the error, and the lane counter) and either can be empty — an empty pill is a floating grey capsule with nothing in it. */ .composer.docked.has-msg .cmp-note:empty { display: none; } /* Docked, the chip picks up the same floating-pill treatment as the note — over a gallery of pictures a flat translucent background is unreadable. */ .composer.docked .cmp-trial { background: color-mix(in oklab, var(--bg-1) 92%, transparent); backdrop-filter: blur(14px) saturate(1.2); } [data-theme="light"] .composer.docked .cmp-trial { background: var(--bg-0); backdrop-filter: none; border: 1px solid var(--line); } .composer.docked .cmp-refs { justify-content: center; } .composer.docked .cmp-ref { width: 40px; height: 40px; } /* Room at the foot of the page so the docked bar never covers the last row of the footer. Set on only while something is actually docked. */ body.has-dock { padding-bottom: 104px; } @media (prefers-reduced-motion: reduce) { .cmp-ref { animation: none; } } .cmp-bar { display: flex; align-items: flex-end; gap: 8px; padding: 9px 9px 9px 11px; background: color-mix(in oklab, var(--bg-1) 90%, transparent); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } /* The bar lights from inside when it has the caret — the panel is live, not a field that changed colour. */ .composer:focus-within .cmp-bar { border-color: var(--focus); box-shadow: 0 0 0 1px color-mix(in oklab, var(--focus) 34%, transparent), 0 0 44px -18px color-mix(in oklab, var(--focus) 75%, transparent), var(--shadow); } /* Le curseur lui-même. C'est le détail qui fait que ce n'est pas « un champ qui a changé de couleur » mais « le cyan est entré dans la page par le curseur » : la barre clignotante est cyan, donc la couleur BOUGE. */ .cmp-bar textarea:focus, .cmp-bar input:focus { caret-color: var(--focus); } /* JOUR — mesuré, pas déduit : `[data-theme="light"] .composer.docked .cmp-bar` (plus haut) pèse 0-4-0 et écrasait le focus à 0-3-0 ; la barre restait encrée en noir avec le curseur dedans. Il faut donc redire la règle au même poids, pas juste plus bas dans le fichier. Et le cyan du jour est presque noir (#00414f) exprès : sur l'aplat, la séparation reste de l'encre — simplement une encre FROIDE. Un cyan vif sur l'acide ferait 1,3:1, c'est-à-dire rien. */ [data-theme="light"] .composer:focus-within .cmp-bar, [data-theme="light"] .composer.docked:focus-within .cmp-bar { /* Le filet noir NE BOUGE PAS. C'est la doctrine de l'aplat : ce qui sépare est de l'encre, jamais une nuance. Premier essai — passer la bordure en cyan sombre (#00414f) — vu à l'œil : indiscernable du noir, donc rien du tout. Le cyan se pose donc À CÔTÉ de l'encre, en anneau extérieur. Et c'est le noir qui le rend lisible : cyan contre jaune acide, seul, n'a pas de bord ; cyan collé à un filet noir en a un. */ border-color: var(--line); box-shadow: 0 0 0 3px var(--focus-ring), 5px 5px 0 rgb(0 0 0 / 0.9); } /* Scoped by structure, not by id. The bar is shared between two pages that name their textarea differently (#cmpPrompt on the landing, #prompt in the studio) — an id selector here left the studio's box on the global `textarea { min-height: 96px }` and it opened three lines tall. */ .cmp-bar textarea { flex: 1; min-width: 0; /* 176 px = cinq lignes, puis la boite defile. Le plafond etait a 40vh, soit 325 px sur un portable : charger un look a phrase longue faisait monter la barre par-dessus DEUX rangees de la grille, exactement le reproche du plan. La regle et l'autogrow de js/app.js portent le meme nombre — deux plafonds qui divergent, c'est la barre qui saute au premier caractere. */ min-height: 42px; max-height: min(23vh, 176px); padding: 10px 4px; margin: 0; background: none; border: 0; outline: none; resize: none; color: var(--fg); font: 400 16px/1.45 var(--sans); scrollbar-width: thin; } .cmp-bar textarea::placeholder { color: var(--fg-faint); } /* Narrow: the sentence takes the whole first line and the controls sit under it. `order: -1` targets the textarea by element, not by id, because the two pages give it two different ids (#cmpPrompt, #prompt) for the same job. This block has to sit AFTER `.cmp-bar textarea` above, not before it: same specificity, so the later rule wins. It used to live 30 lines higher, which left `flex: 1` in charge and squeezed the prompt field to 57px on a 375px phone — the bar looked fine, it just had nowhere to type. */ @media (max-width: 620px) { .cmp-bar { flex-wrap: wrap; } .cmp-bar textarea { flex: 1 1 100%; order: -1; } .cmp-go { margin-left: auto; } } .cmp-clip, .cmp-pick, .cmp-go { flex: none; } /* Les TROIS pastilles de la barre partagent ce gabarit — le trombone, le lot et le look. Mesure du 13/09 : le lot etait a 34x28 alors que son propre commentaire annoncait « meme gabarit que le trombone ». Un commentaire n'est pas une regle : la classe est maintenant dans le selecteur. */ .cmp-clip, .cmp-multi, .cmp-look { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 2px; background: none; border: 1px solid transparent; border-radius: 9px; color: var(--fg-faint); cursor: pointer; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .cmp-clip:hover { color: var(--accent); border-color: var(--line); transform: rotate(-12deg); } /* ── L'interrupteur du lot ──────────────────────────────────────────────────── Même gabarit que le trombone : ce sont deux frères dans la même barre, et un bouton qui aurait sa propre taille dirait qu'il appartient à un autre outil. Ce qui change en revanche quand il est ARMÉ n'est pas une couleur de survol : le trait du milieu de l'icône se met à respirer et le badge compte les phrases. Le geste porte l'information — combien de tours on est en train d'écrire — pas seulement « tu as cliqué ». */ .cmp-multi { flex: none; position: relative; } .cmp-multi:hover { color: var(--accent); border-color: var(--line); transform: none; } .cmp-multi[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, var(--line-soft)); background: color-mix(in oklab, var(--accent) 8%, transparent); } .cmp-multi[aria-pressed="true"] svg path { stroke-dasharray: 0; animation: multi-stack 2.8s var(--ease) infinite; } @keyframes multi-stack { 0%, 100% { opacity: 1; transform: translateY(0); } 45% { opacity: .55; transform: translateY(1.2px); } } @media (prefers-reduced-motion: reduce) { .cmp-multi[aria-pressed="true"] svg path { animation: none; } } /* ── Le look, dans la barre ─────────────────────────────────────────────────── Meme gabarit que le trombone et l'interrupteur du lot : trois freres dans la meme barre, et un bouton qui aurait sa propre taille dirait qu'il appartient a un autre outil. Il ne grandit QUE quand un look est charge — il cesse d'etre une icone pour devenir une etiquette qui dit sous quel nom on travaille. Meme principe que le badge du lot : l'etat se lit sur le bouton, jamais dans une phrase posee a cote. */ .cmp-look { flex: none; } .cmp-look:hover { color: var(--accent); border-color: var(--line); transform: none; } .cmp-look.named { grid-auto-flow: column; align-items: center; gap: 7px; width: auto; max-width: 196px; padding: 0 10px 0 8px; color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, var(--line-soft)); background: color-mix(in oklab, var(--accent) 8%, transparent); } .cmp-look-name { max-width: 142px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; } /* Sur un telephone la barre s'enroule deja (voir `.cmp-bar` plus haut) : le nom se coupe plutot que de pousser la forme et le compte sur une ligne de plus. */ @media (max-width: 560px) { .cmp-look.named { max-width: 124px; } .cmp-look-name { max-width: 76px; } } /* ── La file, rendue visible ────────────────────────────────────────────────── Une pastille par phrase, dans l'ordre où elles partiront. C'est la seule façon honnête de dessiner une file : un pourcentage dit « ça avance », une rangée de pastilles dit LAQUELLE avance et combien attendent encore. */ .batch-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--fg-faint); letter-spacing: .04em; } .batch-count { color: var(--fg-dim); } .batch-chips { display: flex; gap: 3px; flex-wrap: wrap; } .batch-chip { width: 14px; height: 5px; border-radius: 2px; background: var(--line); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); } .batch-chip.run { background: var(--accent); animation: batch-pulse 1.4s var(--ease) infinite; } .batch-chip.done { background: color-mix(in oklab, var(--good, #4caf7d) 80%, transparent); } .batch-chip.bad { background: var(--bad); } .batch-chip.off { background: transparent; box-shadow: inset 0 0 0 1px var(--line-soft); } @keyframes batch-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { .batch-chip.run { animation: none; } } .batch-why { color: var(--accent); } .batch-bar .btn.tiny { padding: 2px 8px; font-size: 11px; height: auto; min-height: 0; } /* `.btn` pose `display: inline-flex`, qui l'emporte sur le `[hidden] { display: none }` du navigateur (règle d'agent utilisateur, spécificité nulle). Sans cette ligne, REPRENDRE reste affiché sur un lot qui tourne — vu à l'écran le 11/09/2026, `hidden` était bien posé et le bouton bien visible. Le même piège est déjà noté trois fois ailleurs (app.css §compte, §lightbox, theme.css §cmp-trial) : c'est le bug qu'on refait à chaque nouveau bandeau. */ .batch-bar .btn[hidden] { display: none; } /* width:auto beats the global `select { width: 100% }` from theme.css — as a flex item that rule made the shape picker eat the whole bar. */ .cmp-pick { width: auto; height: 38px; margin-bottom: 2px; padding: 0 8px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 9px; color: var(--fg-dim); font: 500 12px var(--mono); cursor: pointer; } /* The resolution picker. Standard is a picker like any other; Max is the one choice on this bar that changes what the job costs, so it says so on itself instead of leaving the price on the button to explain it after the fact — accent text, and a hairline that runs along the bottom edge only, so the control reads as "charged" rather than as "selected". */ .cmp-tier { transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .composer[data-tier="max"] .cmp-tier { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, var(--line-soft)); box-shadow: inset 0 -2px 0 -1px color-mix(in oklab, var(--accent) 60%, transparent); } /* Not on the acid field. There the accent is the cold hue, and the rule this theme sets for itself is that cyan never touches the yellow without an ink between — a teal "Max" on the field is exactly the mushy pair the token block refuses. So the day theme says it the way the poster does: pure ink, and the printed offset that lifts a thing off the page. Seen in both themes before this was written down. */ [data-theme="light"] .composer[data-tier="max"] .cmp-tier { color: var(--fg); border-color: var(--line); box-shadow: 3px 3px 0 rgb(0 0 0 / .9); } /* And the price it moved, on the button that takes it: the number redraws in place, so the eye is told WHERE the change landed rather than left to notice a different figure later. */ .cmp-go .cost { display: inline-block; } /* The composer's one message slot says two different things. `.err` is the default — a run that failed, a style that needs a photo — and it is red because those are failures. `.ask` is the other one: the video confirm, where nothing has gone wrong and the button is simply quoting a price. Same slot so the layout never shifts, same warm accent as the armed button so the two halves of one question read as one thing. */ .cmp-note.ask { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 45%, transparent); } /* ── Armed: the button has quoted a price and is waiting to be pressed again ── Only ever on video (see `armed` in js/app.js). It has to read as a DIFFERENT state and not as an error — nothing has gone wrong, the button is simply holding a bigger number than usual. So it borrows the warm accent rather than the red, and it breathes: a static colour change is the one thing the eye skips, and this is the one press that must not be automatic. */ .cmp-go.armed { background: color-mix(in oklab, var(--warn, #d98a2b) 82%, var(--bg-0)); border-color: color-mix(in oklab, var(--warn, #d98a2b) 60%, var(--line-soft)); color: #fff; animation: goArmed 1.6s var(--ease) infinite; } @keyframes goArmed { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--warn, #d98a2b) 45%, transparent); } 55% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--warn, #d98a2b) 0%, transparent); } } @media (prefers-reduced-motion: reduce) { .cmp-go.armed { animation: none; } } .cmp-go .cost.bump { animation: costBump 340ms var(--ease) both; } @keyframes costBump { 0% { transform: translateY(-4px); opacity: 0; } 60% { transform: translateY(1px); } 100% { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .cmp-go .cost.bump { animation: none; } } .cmp-go { min-height: 38px; margin-bottom: 2px; padding-inline: 20px; border-radius: 9px; } /* Reference thumbs, numbered. The number is not decoration: it is the handle you use in the sentence — "the face from 1, the jacket from 2". */ .cmp-refs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 9px; } .cmp-ref { position: relative; width: 62px; height: 62px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); animation: refIn 320ms var(--ease) both; } @keyframes refIn { from { opacity: 0; transform: translateY(6px) scale(.94); } } .cmp-ref img { width: 100%; height: 100%; object-fit: cover; display: block; } .cmp-ref.pending img { opacity: .4; filter: grayscale(1); } .cmp-ref .n { position: absolute; left: 4px; top: 4px; min-width: 16px; height: 16px; padding: 0 3px; display: grid; place-items: center; border-radius: 4px; background: color-mix(in oklab, var(--bg-0) 78%, transparent); color: var(--accent); font: 600 10px/1 var(--mono); } .cmp-ref .x { position: absolute; right: 3px; top: 3px; width: 17px; height: 17px; display: grid; place-items: center; border: 0; border-radius: 4px; cursor: pointer; background: color-mix(in oklab, var(--bg-0) 78%, transparent); color: var(--fg-dim); font-size: 11px; opacity: 0; transition: opacity var(--dur) var(--ease); } .cmp-ref:hover .x, .cmp-ref:focus-within .x { opacity: 1; } .cmp-ref .x:hover { color: var(--bad); } /* How far the photo has got. Thin, at the foot of the thumbnail, and only while it is moving — the point is that a wait now has a SHAPE instead of a grey square that may or may not be broken. */ .cmp-prog { position: absolute; inset: auto 0 0 0; height: 4px; background: color-mix(in oklab, var(--bg-0) 70%, transparent); } .cmp-prog i { position: absolute; inset: 0 auto 0 0; display: block; background: var(--accent); transition: width 220ms var(--ease); } /* A photo the server refused. It stays in the strip — nothing removes it but the person who dropped it — and carries its own retry. */ .cmp-ref.failed { border-color: var(--bad); } .cmp-ref.failed img { filter: grayscale(1) brightness(.5); } .cmp-retry { position: absolute; inset: auto 0 0 0; height: 18px; border: 0; cursor: pointer; background: var(--bad); color: #fff; font: 600 11px/18px var(--sans); } /* The trial chip. Sits above the bar, reads as a stamp rather than a banner: the moment it looks like an ad, it stops being read. Same accent as the "on us" wording in the note under the bar, so the two are obviously the same promise said twice — once before you type, once after. */ .cmp-trial { margin: 0 auto 10px; width: fit-content; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px; font-size: 12.5px; color: var(--fg-dim); border: 1px solid color-mix(in oklab, var(--accent) 34%, transparent); background: color-mix(in oklab, var(--accent) 8%, transparent); } /* `display: flex` above beats the browser's `[hidden] { display: none }`, so without this the chip stays on screen as an empty pill with a dot in it once the visitor has an account. Caught by looking at the page, not at the CSS. */ .cmp-trial[hidden] { display: none; } .cmp-trial::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); } .cmp-trial b { color: var(--accent); font-weight: 600; } .cmp-trial a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); } /* Spent: the promise is over, so the chip stops shouting and becomes a label. Keeping the accent here would keep advertising something that is gone. */ .cmp-trial.spent { border-color: var(--line); background: none; color: var(--fg-faint); } .cmp-trial.spent::before { background: var(--fg-faint); box-shadow: none; } @media (prefers-reduced-motion: no-preference) { .cmp-trial { animation: trial-in 420ms var(--ease) both; } } @keyframes trial-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .cmp-note { margin: 10px 2px 0; min-height: 18px; font-size: 12.5px; color: var(--fg-faint); } .cmp-note b { color: var(--fg-dim); font-weight: 600; } .cmp-note .free { color: var(--accent); } .cmp-note .bad { color: var(--bad); } .cmp-note a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); } .dotty::after { content: "…"; animation: dotty 1.4s steps(4) infinite; } @keyframes dotty { 0% { opacity: .3 } 50% { opacity: 1 } 100% { opacity: .3 } } /* Drag anywhere on the page: the veil appears over the bar, so the answer to "where do I drop it" is the same place you were already looking. */ /* 94 %, not 80 %. At 80 % the placeholder ("Describe your image — Cmd+Enter to generate") and the Generate button read straight THROUGH the veil and collided with its own caption — two sentences on the same line of pixels, neither legible. Seen on screen at 1512 px in both themes, which is the only way that kind of fault ever gets noticed. The blur is what keeps it from looking like a flat panel dropped on the page: the bar stays present underneath as a shape, just not as words competing with the message. */ .cmp-veil { position: absolute; inset: -6px; z-index: 3; display: grid; place-items: center; border: 1px dashed color-mix(in oklab, var(--accent) 60%, transparent); border-radius: 16px; background: color-mix(in oklab, var(--bg-0) 94%, transparent); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease); } .cmp-veil span { font: 500 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } .composer.dragging .cmp-veil { opacity: 1; } /* ── Cards & panels ───────────────────────────────────────────────────────── */ .card { background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 18px; } .card.tight { padding: 13px 14px; } .panel { background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); } .panel > header { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); font: 600 12px/1.2 var(--display); letter-spacing: .09em; text-transform: uppercase; color: var(--fg-faint); } .panel > .body { padding: 14px; } /* ── Forms ────────────────────────────────────────────────────────────────── */ label.field, .field { display: block; } /* `.field` as well as `label.field`: a group of controls that is not one input (the saved-sets row is a select plus two buttons) still needs the same caption voice, and a