/* ============================================================================ ONBOARDING — « c'est quoi HOMIES, qu'est-ce qu'on fait ici » ---------------------------------------------------------------------------- Maquette validée : brandnew/drafts/onboarding-decouverte.html (recopiée). Trois écrans, un APLAT par écran (bleu, rouge, vert), habillés de formes brutalistes qui mordent les bords. Pas de light/dark ici : l'onboarding a ses trois couleurs. ⚠ Toutes les classes sont préfixées `obx-` : `.ob-grid` et `.ob-screen` existent DÉJÀ dans app.css (l'écran de création de profil) et recouvraient les fonds colorés. Montré par public/js/app.js › onboard(), aux NOUVEAUX joueurs seulement. ========================================================================== */ #onboard-decouverte { position:fixed; inset:0; z-index:910; overflow:hidden; } #onboard-decouverte.hide { opacity:0; pointer-events:none; transition:opacity var(--dur-m) var(--ease-out); } /* le latin-ext d'Anton : sans lui, « TÉLÉPHONE » perdait son É (le fichier latin seul ne porte pas toutes les capitales accentuées). */ /* ══ LE FOND COLORÉ ═══════════════════════════════════════════════════ Un écran = une couleur. En light c'est un aplat plein ; en NÉON c'est l'encre, et la couleur revient en rayons + bande de signature. */ #onboard-decouverte .obx-wrap { position:fixed; inset:0; overflow:hidden; } #onboard-decouverte .obx-page { position:absolute; inset:0; display:flex; flex-direction:column; padding:0; background:var(--ob); color:#0A0A0A; } #onboard-decouverte .obx-page[hidden] { display:none; } /* un aplat par écran, rien d'autre : pas de rayons, pas de trame. */ #onboard-decouverte .obx-page.c1 { --ob:#4D7CFF; } /* bleu */ #onboard-decouverte .obx-page.c2 { --ob:#FF5252; } /* rouge */ #onboard-decouverte .obx-page.c3 { --ob:#5BE885; } /* vert */ /* la bande de signature, en haut : c'est elle qui dit la couleur en néon */ /* ══ LE FOND EST HABILLÉ ═══════════════════════════════════════════════ Edwin : « c'est pas juste des fonds rouges, il faut que ce soit habillé, qu'il y ait des éléments dans le fond ». Des FORMES BRUTALISTES — aplats, bord encre 4 px, rayon 0, aucune ombre floue, aucun dégradé. Elles vivent derrière le contenu (z-index 0) et dépassent des bords : c'est ce qui donne la profondeur sans manger la place. ──────────────────────────────────────────────────────────────────── */ #onboard-decouverte .obx-deco { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; } #onboard-decouverte .obx-deco > * { position:absolute; border:4px solid var(--ink); } /* la teinte sourde du même ton : le fond n'est plus un aplat mort */ #onboard-decouverte .obx-page.c1 { --ob2:#3A63D6; } #onboard-decouverte .obx-page.c2 { --ob2:#D63F3F; } #onboard-decouverte .obx-page.c3 { --ob2:#3FC46B; } .d-circ { border-radius:50%; } .d-tri { border:0 !important; width:0 !important; height:0 !important; } /* la croix et le plus, tracés — jamais le glyphe */ .d-cross { border:0 !important; } .d-cross i { position:absolute; inset:0; background:var(--ink); } .d-cross i:first-child { top:42%; bottom:42%; } .d-cross i:last-child { left:42%; right:42%; } /* le grand mot en creux, derrière tout : la signature de l'écran */ .d-word { border:0 !important; font-family:var(--font-d); line-height:.8; color:transparent; -webkit-text-stroke:3px rgba(10,10,10,.30); letter-spacing:-2px; white-space:nowrap; } /* les barres de la grille de fond */ .d-bar { border:0 !important; background:rgba(10,10,10,.07); } /* ══ LA GOUTTIÈRE UNIQUE ══════════════════════════════════════════════ Le titre, le visuel et les cartes commencent TOUS à 18 px. Avant, le titre était à gauche et le visuel centré : ça décalait. */ #onboard-decouverte .obx-in { position:relative; z-index:2; display:flex; flex-direction:column; height:100%; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); } #onboard-decouverte .obx-head { display:flex; align-items:center; gap:10px; } /* le logo n'est PAS encadré : il se suffit. */ #onboard-decouverte .obx-logo { width:42px; height:42px; display:block; } #onboard-decouverte .obx-skip { margin-left:auto; font-family:var(--font-m); font-weight:800; font-size:10px; letter-spacing:1.6px; background:var(--paper); color:#0A0A0A; cursor:pointer; border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); padding:7px 11px; } #onboard-decouverte .obx-eye { font-family:var(--font-m); font-weight:800; font-size:10px; letter-spacing:2.2px; margin-top:14px; opacity:.8; } #onboard-decouverte .obx-h { font-family:var(--font-d); font-size:44px; line-height:.9; letter-spacing:.4px; text-transform:uppercase; margin-top:6px; } #onboard-decouverte .obx-h em { font-style:normal; display:inline-block; } /* le corps prend TOUT ce qui reste : plus de trou en bas */ /* Edwin : « il y a trop d'espace entre les éléments, j'aime pas ». Le corps démarre juste sous le titre et descend jusqu'au pied. */ /* le corps OCCUPE la hauteur : les blocs se répartissent, il ne reste pas 180 px de vide en bas. Écarts réguliers, pas de trou. */ #onboard-decouverte .obx-body { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:flex-start; gap:13px; margin:12px 0 10px; } /* ⚠ ON N'ÉTIRE PAS LES CARTES. L'essai d'avant leur donnait flex:1 pour « remplir » : une carte de 150 px pour une ligne de texte, le vide était juste passé à l'intérieur. Chaque bloc garde sa hauteur naturelle, les écarts restent serrés, et le groupe est centré dans la hauteur. */ /* ── ① LA BANDE DE POTES, alignée à gauche comme le titre ───────────── */ #onboard-decouverte .obx-crew { display:flex; gap:9px; } #onboard-decouverte .obx-guy { flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; } #onboard-decouverte .obx-guy .av { aspect-ratio:1; width:100%; border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); background:var(--paper); overflow:hidden; } #onboard-decouverte .obx-guy .av img { width:100%; height:100%; display:block; } #onboard-decouverte .obx-tap { font-family:var(--font-d); font-size:22px; letter-spacing:1px; line-height:1; text-align:center; padding:7px 0; border:4px solid var(--ink); box-shadow:4px 4px 0 var(--ink); color:#0A0A0A; } #onboard-decouverte .obx-tap.a { background:var(--yellow); } .obx-tap.b { background:var(--cyan); } #onboard-decouverte .obx-tap.c { background:var(--magenta); color:#FFFEF7; } .obx-tap.d { background:var(--green); } /* la question au-dessus des potes : on voit à quoi ça ressemble vraiment */ #onboard-decouverte .obx-q { border:4px solid var(--ink); box-shadow:6px 6px 0 var(--ink); background:var(--paper); padding:15px 14px; font-family:var(--font-d); font-size:23px; line-height:1.05; color:#0A0A0A; } #onboard-decouverte .obx-chrono { display:flex; align-items:center; gap:9px; font-family:var(--font-m); font-weight:800; font-size:10px; letter-spacing:1.6px; } #onboard-decouverte .obx-chrono .bar { flex:1; height:12px; border:3px solid var(--ink); background:var(--paper); overflow:hidden; } #onboard-decouverte .obx-chrono .bar i { display:block; height:100%; width:62%; background:var(--yellow); } /* ── ② LE CODE : à gauche, TOUTE la largeur, même gouttière ─────────── */ #onboard-decouverte .obx-code { display:flex; gap:10px; } #onboard-decouverte .obx-cell { flex:1; aspect-ratio:.86; display:grid; place-items:center; font-family:var(--font-d); font-size:52px; line-height:1; border:5px solid var(--ink); box-shadow:7px 7px 0 var(--ink); background:var(--paper); color:#0A0A0A; } #onboard-decouverte .obx-step { display:flex; align-items:center; gap:12px; padding:17px 13px; border:4px solid var(--ink); box-shadow:6px 6px 0 var(--ink); background:var(--paper); color:#0A0A0A; } #onboard-decouverte .obx-step .n { font-family:var(--font-d); font-size:34px; line-height:1; width:34px; text-align:center; flex:none; color:var(--ob); } #onboard-decouverte .obx-step .tx { flex:1; min-width:0; } #onboard-decouverte .obx-step .nm { display:block; font-family:var(--font-d); font-size:19px; letter-spacing:.5px; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #onboard-decouverte .obx-step .ds { display:block; font-family:var(--font-m); font-weight:700; font-size:10px; letter-spacing:1.2px; margin-top:5px; opacity:.72; } #onboard-decouverte .obx-step .em { width:38px; height:38px; flex:none; } #onboard-decouverte .obx-step .em img, .obx-step .em span { width:100%; height:100%; display:block; } /* ── ③ LES TROIS GAINS ─────────────────────────────────────────────── */ #onboard-decouverte .obx-gain { display:flex; align-items:center; gap:13px; padding:17px 13px; border:4px solid var(--ink); box-shadow:6px 6px 0 var(--ink); color:#0A0A0A; } #onboard-decouverte .obx-gain .em { width:54px; height:54px; flex:none; border:4px solid var(--ink); background:var(--paper); padding:3px; } #onboard-decouverte .obx-gain .em img, .obx-gain .em span { width:100%; height:100%; display:block; } #onboard-decouverte .obx-gain .tx { flex:1; min-width:0; } #onboard-decouverte .obx-gain .nm { display:block; font-family:var(--font-d); font-size:26px; letter-spacing:.6px; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #onboard-decouverte .obx-gain .ds { display:block; font-family:var(--font-m); font-weight:700; font-size:10px; letter-spacing:1.2px; margin-top:6px; opacity:.76; } /* ── LE PIED ───────────────────────────────────────────────────────── */ #onboard-decouverte .obx-foot { display:flex; flex-direction:column; gap:11px; } #onboard-decouverte .obx-dots { display:flex; gap:7px; } #onboard-decouverte .obx-dots i { width:30px; height:9px; border:3px solid var(--ink); background:transparent; display:block; } #onboard-decouverte .obx-dots i.on { background:var(--paper); } #onboard-decouverte .obx-cta { display:block; width:100%; text-align:center; font-family:var(--font-d); font-size:23px; letter-spacing:1px; padding:11px 12px; border:4px solid var(--ink); box-shadow:6px 6px 0 var(--ink); background:var(--paper); color:#0A0A0A; cursor:pointer; } /* les emojis qui flottent — JAMAIS dans la colonne du logo ni du texte */ /* ══ GRAND ÉCRAN (≥1024) ═══════════════════════════════════════════════ 1) L'accueil et les tableaux de bord web sont en position fixe, z 1200 : l'onboarding (910/900) passait DESSOUS — le nouveau joueur voyait l'accueil, puis la découverte resurgissait derrière les autres écrans. 2) Le contenu reste en colonne de 560 px (comme la création de profil, saison2-entree.css) : sinon les avatars s'étiraient sur 1900 px. Le fond coloré et ses formes, eux, couvrent tout l'écran. */ @media (min-width: 1024px) { #onboard-decouverte { z-index: 1310; } #onboard-screen { z-index: 1300; } /* 19/10 — plus de colonne de téléphone : un écran large, l'exemple à gauche (question, chrono, potes / le code / les gains), les explications à droite. */ #onboard-decouverte .obx-in { max-width: min(1240px, 92vw); margin-inline: auto; width: 100%; } #onboard-decouverte .obx-h { font-size: clamp(44px, 4vw, 76px) !important; } #onboard-decouverte .obx-body { display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 40px; row-gap: 14px; align-content: center; grid-auto-flow: row dense; align-items: start; } #onboard-decouverte .obx-body > :not(.obx-step) { grid-column: 1; } #onboard-decouverte .obx-body > .obx-step { grid-column: 2; } #onboard-decouverte .obx-foot { max-width: 560px; width: 100%; margin-inline: auto; } }