/* ═══════════════════════════════════════════════════════════════════════════ MFXT — design system v2 (vitrine) --------------------------------------------------------------------------- UNE seule source de vérité pour landing / buy / checkout / login / signup / pages légales. Avant ce fichier, le bloc :root était recopié 6 fois avec des valeurs qui avaient divergé (4 typographies, rayons de 6 à 20 px). DIRECTION « ECOSYSTEM » (choisie par l'owner 2026-08-11, alignée sur millionairefxtrading.netlify.app dont les valeurs ont été relevées dans le DOM) : 1. Fond très profond #020304, puis des relevés successifs du même noir bleuté (void → obsidian → graphite → carbon → slate). 2. Deux voix typographiques : Inter en graisse 900 très serrée pour les titres, Instrument Serif EN ITALIQUE pour la ligne qui porte l'idée. C'est le contraste entre les deux qui fait l'identité — n'utilise jamais le serif pour du texte courant. 3. Le vert « ember » assume le halo : bouton principal en dégradé #34D39C → #0D6E4F, ombre portée verte, liseré interne clair, en pilule. 4. Les filets sont teintés CHROME rgba(221,227,234,…), pas blanc pur. Le dashboard (Dashboard.html) garde son propre bloc pour l'instant — il sera aligné quand la couche de primitives src-tz/ui.jsx arrivera. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* Base — « void → slate », relevés successifs du même noir bleuté */ --mx-bg:#020304; --mx-surface:#06080A; --mx-surface-2:#0C0E11; --mx-surface-3:#13161A; --mx-surface-4:#1C2026; /* Filets teintés CHROME (et non blanc pur) : plus froids, moins laiteux */ --mx-hair:rgba(221,227,234,.07); --mx-hair-2:rgba(221,227,234,.14); --mx-hair-3:rgba(221,227,234,.05); /* Encre */ --mx-ink:#F0F3F8; --mx-ink-2:#9AA3AD; --mx-ink-3:#6A7078; --mx-ink-4:#5D646B; --mx-chrome:#DDE3EA; /* Sémantique — « ember » */ --mx-up:#34D39C; --mx-up-bright:#5FFFB8; --mx-up-deep:#0D6E4F; --mx-up-ink:#04140D; --mx-dn:#F43F5E; --mx-warn:#FBBF24; --mx-info:#5B8CFF; --mx-up-soft:rgba(52,211,156,.06); --mx-up-line:rgba(52,211,156,.22); --mx-up-line-2:rgba(52,211,156,.40); --mx-up-glow:rgba(52,211,156,.50); /* Géométrie — plus généreuse, et la pilule redevient un citoyen de plein droit */ --mx-r-sm:10px; --mx-r:14px; --mx-r-lg:20px; --mx-r-xl:28px; --mx-r-pill:9999px; --mx-sh:0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.35); --mx-sh-lg:0 2px 4px rgba(0,0,0,.5), 0 28px 72px rgba(0,0,0,.5); --mx-sh-ember:0 6px 28px rgba(52,211,156,.30), inset 0 1px 0 rgba(255,255,255,.18); /* Mouvement */ --mx-ease:cubic-bezier(.16,1,.3,1); --mx-ease-soft:cubic-bezier(.22,.61,.21,1); --mx-t-fast:.18s; --mx-t-md:.32s; --mx-t-slow:.55s; --mx-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --mx-serif:'Instrument Serif',ui-serif,Georgia,serif; --mx-mono:'JetBrains Mono','SF Mono',Menlo,ui-monospace,monospace; color-scheme:dark; } /* ── Reset ────────────────────────────────────────────────────────────────── */ *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} html,body{ color:var(--mx-ink);min-height:100%;overflow-x:hidden; font-family:var(--mx-font);line-height:1.5; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } /* La couleur de fond appartient à , qui la propage au canvas, et body reste TRANSPARENT. Ce n'est pas cosmétique : dans l'ordre de peinture CSS, le fond d'un descendant en flux passe APRÈS les enfants à z-index négatif. Un body opaque recouvrait donc intégralement toutes les couches d'ambiance (.amb, .bg, .bg-flow, .bg-spot, .grid-veil) — elles étaient écrites, chargées, et invisibles. Ne remets pas de fond sur body. */ html{background:var(--mx-bg)} body{background:transparent} img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit;color:inherit} ::selection{background:rgba(52,211,156,.26)} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:var(--mx-bg)} ::-webkit-scrollbar-thumb{background:#22262B;border-radius:8px;border:2px solid var(--mx-bg)} ::-webkit-scrollbar-thumb:hover{background:#2E3339} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* ── Layout ───────────────────────────────────────────────────────────────── */ .mx-wrap{max-width:1120px;margin:0 auto;padding:0 28px} .mx-wrap-sm{max-width:640px;margin:0 auto;padding:0 24px} @media(max-width:560px){.mx-wrap,.mx-wrap-sm{padding:0 18px}} /* ── Typographie ──────────────────────────────────────────────────────────── */ /* Inter en graisse 900, interlettrage très serré : c'est la signature du titrage. */ .mx-d1{font-size:clamp(38px,6vw,68px);font-weight:900;letter-spacing:-.05em;line-height:.98} .mx-d2{font-size:clamp(28px,4vw,44px);font-weight:900;letter-spacing:-.045em;line-height:1.02} .mx-h3{font-size:clamp(20px,2.2vw,26px);font-weight:800;letter-spacing:-.03em;line-height:1.18} /* La seconde voix : Instrument Serif en italique. À réserver aux lignes qui portent l'idée, jamais au texte courant — c'est ce contraste qui fait l'effet. */ .mx-serif{font-family:var(--mx-serif);font-style:italic;font-weight:400; letter-spacing:-.02em;line-height:1.02} .mx-lead{font-size:16.5px;font-weight:400;color:var(--mx-ink-2);line-height:1.65} .mx-body{font-size:15px;font-weight:400;color:var(--mx-ink-2);line-height:1.65} .mx-small{font-size:13px;color:var(--mx-ink-3);line-height:1.6} .mx-num{font-family:var(--mx-mono);font-variant-numeric:tabular-nums} .mx-up{color:var(--mx-up)} .mx-dn{color:var(--mx-dn)} /* Libellé de section — petit, mono, très espacé */ .mx-eyebrow{ display:inline-block;font-family:var(--mx-mono);font-size:11px;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--mx-ink-3); } /* ── Boutons ──────────────────────────────────────────────────────────────── */ .mx-btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; border:1px solid transparent;border-radius:var(--mx-r-pill); padding:14px 28px;font-size:14.5px;font-weight:700;letter-spacing:-.005em; cursor:pointer;white-space:nowrap; transition:background var(--mx-t-md) var(--mx-ease),border-color var(--mx-t-md) var(--mx-ease), color var(--mx-t-md) var(--mx-ease),transform var(--mx-t-md) var(--mx-ease), box-shadow var(--mx-t-md) var(--mx-ease); } .mx-btn:active{transform:scale(.985)} .mx-btn:focus-visible{outline:2px solid var(--mx-up);outline-offset:3px} .mx-btn[disabled]{opacity:.45;pointer-events:none} /* Principal = dégradé « ember » avec halo et liseré interne clair. */ .mx-btn-p{ background:linear-gradient(135deg,var(--mx-up),var(--mx-up-deep)); color:var(--mx-up-ink);box-shadow:var(--mx-sh-ember); } .mx-btn-p:hover{transform:translateY(-2px); box-shadow:0 10px 38px rgba(52,211,156,.42), inset 0 1px 0 rgba(255,255,255,.2)} .mx-btn-s{background:transparent;color:var(--mx-chrome);border-color:var(--mx-hair-2)} .mx-btn-s:hover{background:rgba(221,227,234,.05);border-color:rgba(221,227,234,.24);transform:translateY(-2px)} .mx-btn-g{background:transparent;color:var(--mx-ink-2)} .mx-btn-g:hover{background:var(--mx-surface-2);color:var(--mx-ink)} .mx-btn-lg{padding:18px 38px;font-size:15.5px} .mx-btn-sm{padding:10px 18px;font-size:13px} /* Un bouton pleine largeur porte souvent un libellé long (« Continue — $1,499.50 »). nowrap le ferait déborder de sa propre boîte sur mobile : ici on autorise le retour. */ .mx-btn-block{width:100%;white-space:normal;text-align:center;line-height:1.35} /* Sur téléphone les pilules faisaient 57 px de haut. On descend à ~45 px, soit le PLANCHER : en dessous de 44 px une cible tactile devient difficile à viser, surtout pour un CTA. Le gain de légèreté restant vient de la largeur, pas de la hauteur — voir `.hctas` dans landing.html. */ @media(max-width:560px){ .mx-btn{padding:11px 18px;font-size:13.5px} .mx-btn-lg{padding:12px 22px;font-size:14px} } /* ── Puce d'état — seul endroit où la pilule survit ───────────────────────── */ .mx-chip{ display:inline-flex;align-items:center;gap:7px;border-radius:999px; padding:5px 11px;font-size:11.5px;font-weight:500; border:1px solid var(--mx-hair);background:var(--mx-surface-2);color:var(--mx-ink-2); } .mx-chip-live{border-color:var(--mx-up-line-2);background:var(--mx-up-soft);color:var(--mx-up)} .mx-chip i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none} .mx-chip-live i{animation:mx-blip 2.4s ease-in-out infinite} @keyframes mx-blip{0%,100%{opacity:.5}50%{opacity:1}} /* ── Cartes ───────────────────────────────────────────────────────────────── */ .mx-card{ background:var(--mx-surface);border:1px solid var(--mx-hair);border-radius:var(--mx-r); transition:border-color .4s var(--mx-ease),background .4s var(--mx-ease); } .mx-card-pad{padding:20px 22px} .mx-card-lg{border-radius:var(--mx-r-lg)} a.mx-card:hover,.mx-card-hover:hover{border-color:var(--mx-hair-2);background:var(--mx-surface-2)} .mx-card .mx-lab{ font-family:var(--mx-mono);font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--mx-ink-3); } .mx-card .mx-val{ margin-top:9px;font-size:25px;font-weight:600;letter-spacing:-.022em; font-variant-numeric:tabular-nums; } /* ── Champs ───────────────────────────────────────────────────────────────── */ .mx-field{display:block;margin-bottom:16px} .mx-label{ display:block;margin-bottom:8px;font-family:var(--mx-mono);font-size:10.5px; letter-spacing:.1em;text-transform:uppercase;color:var(--mx-ink-3); } .mx-input{ width:100%;background:var(--mx-surface);border:1px solid var(--mx-hair); border-radius:var(--mx-r);padding:13px 15px;color:var(--mx-ink); /* 16px minimum : sous ce seuil, iOS zoome sur le champ au focus et casse la mise en page — y compris quand user-scalable=no (ignoré depuis iOS 10). */ font-size:16px; transition:border-color .3s var(--mx-ease),background .3s var(--mx-ease); } .mx-input::placeholder{color:var(--mx-ink-4)} .mx-input:hover{border-color:var(--mx-hair-2)} .mx-input:focus{outline:none;border-color:var(--mx-up-line);background:var(--mx-surface-2)} .mx-input[aria-invalid="true"]{border-color:rgba(255,77,106,.5)} .mx-hint{margin-top:7px;font-size:12.5px;color:var(--mx-ink-3)} .mx-err{margin-top:7px;font-size:12.5px;color:var(--mx-dn)} /* ── Tableau ──────────────────────────────────────────────────────────────── */ .mx-table{width:100%;border-collapse:collapse;font-size:13.5px} .mx-table th{ text-align:left;padding:0 0 11px;font-family:var(--mx-mono);font-size:10.5px; font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--mx-ink-3); } .mx-table td{padding:13px 0;border-top:1px solid var(--mx-hair-3);font-variant-numeric:tabular-nums} .mx-table .num{text-align:right} /* ── Séparateur ───────────────────────────────────────────────────────────── */ .mx-rule{height:1px;background:var(--mx-hair-3);border:0} /* ── Apparition au scroll ─────────────────────────────────────────────────── */ .mx-rv{ opacity:0;transform:translateY(18px); transition:opacity .8s var(--mx-ease),transform .8s var(--mx-ease); } .mx-rv.in{opacity:1;transform:none} .mx-rv.d1{transition-delay:.06s} .mx-rv.d2{transition-delay:.12s} .mx-rv.d3{transition-delay:.2s} .mx-rv.d4{transition-delay:.28s} @media(prefers-reduced-motion:reduce){.mx-rv{opacity:1;transform:none}} /* ── Barre de navigation flottante ────────────────────────────────────────── */ .mx-nav{ position:fixed;top:0;left:0;right:0;z-index:50; display:flex;justify-content:center;padding:18px 16px 0;pointer-events:none; } .mx-nav-pill{ pointer-events:auto;display:flex;align-items:center;gap:4px; border-radius:var(--mx-r-pill);padding:6px 6px 6px 18px; background:rgba(221,227,234,.05);border:1px solid var(--mx-hair); backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4); box-shadow:var(--mx-sh); } /* ── Signature animée du logo ───────────────────────────────────────────────── Le PNG sert de MASQUE à un reflet mobile : la lumière épouse donc exactement la silhouette du « M » au lieu de balayer un rectangle. On ne peut pas animer l'intérieur d'une image ; le masque contourne la limite. Le balayage occupe un cinquième du cycle et se repose le reste du temps — un reflet permanent devient du bruit dans une barre de navigation. */ .mx-mark{position:relative;display:block;flex:none; animation:mx-mark-glow 5.5s ease-in-out infinite} .mx-mark img{width:100%;height:100%;object-fit:contain;display:block} .mx-mark::after{ content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(102deg,transparent 40%,rgba(255,255,255,.9) 50%,transparent 60%); background-size:280% 100%;background-repeat:no-repeat; -webkit-mask:url(/assets/mfxt-logo-tight.png) center/contain no-repeat; mask:url(/assets/mfxt-logo-tight.png) center/contain no-repeat; animation:mx-mark-shine 6.5s ease-in-out infinite} @keyframes mx-mark-shine{ 0%,70% {background-position:190% 0} 92%,100% {background-position:-90% 0} } @keyframes mx-mark-glow{ 0%,100%{filter:drop-shadow(0 0 3px rgba(52,211,156,.22))} 50% {filter:drop-shadow(0 0 11px rgba(52,211,156,.5))} } /* ── Reflet balayant au survol ──────────────────────────────────────────────── ::after porte le reflet d'AMBIANCE, lent et discret, qui tourne en boucle. ::before porte le reflet de SURVOL : une lumière dure, plus étroite et plus franche, qui traverse la marque une fois — et une seule. C'est une TRANSITION, pas une animation. Une animation redémarrerait au milieu de son cycle selon le moment où la souris arrive, donc le reflet sauterait. Une transition part toujours du bord et revient en arrière quand on retire le curseur : le geste est identique à chaque fois. Au repos le dégradé est garé à 200 % (hors du cadre, sans répétition) : rien n'est visible, aucune couche parasite ne dort par-dessus le logo. */ .mx-mark::before{ content:'';position:absolute;inset:0;pointer-events:none;z-index:1; background:linear-gradient(104deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%); background-size:300% 100%;background-repeat:no-repeat;background-position:200% 0; -webkit-mask:url(/assets/mfxt-logo-tight.png) center/contain no-repeat; mask:url(/assets/mfxt-logo-tight.png) center/contain no-repeat; transition:background-position .78s cubic-bezier(.2,.7,.2,1)} /* La marque se soulève pendant le passage de la lumière. Le halo renforcé va sur l'IMG et non sur .mx-mark : ce dernier porte déjà l'animation de lueur, et une animation en cours l'emporte sur toute déclaration de filtre. */ .mx-mark{transition:transform var(--mx-t-md) var(--mx-ease)} .mx-mark img{transition:filter var(--mx-t-md) var(--mx-ease)} .mx-nav-brand:hover .mx-mark::before, .foot-brand:hover .mx-mark::before, .brand:hover .mx-mark::before{background-position:-120% 0} .mx-nav-brand:hover .mx-mark, .foot-brand:hover .mx-mark, .brand:hover .mx-mark{transform:translateY(-2px) scale(1.05)} .mx-nav-brand:hover .mx-mark img, .foot-brand:hover .mx-mark img, .brand:hover .mx-mark img{filter:drop-shadow(0 3px 9px rgba(0,0,0,.6)) drop-shadow(0 0 9px rgba(52,211,156,.45))} @media(prefers-reduced-motion:reduce){ .mx-mark,.mx-mark::after{animation:none} .mx-mark::before{display:none} .mx-nav-brand:hover .mx-mark, .foot-brand:hover .mx-mark, .brand:hover .mx-mark{transform:none} .mx-mark{filter:drop-shadow(0 0 5px rgba(52,211,156,.3))} } .mx-nav-brand{display:flex;align-items:center;gap:11px;margin-right:14px} .mx-nav-brand .mx-mark{width:34px;height:34px} .mx-nav-brand b{font-size:17px;font-weight:600;letter-spacing:.22em} .mx-nav-links{display:flex;align-items:center;gap:1px} .mx-nav-links a{ padding:8px 13px;border-radius:var(--mx-r-sm);font-size:13.5px;font-weight:500; color:var(--mx-ink-2);transition:color .3s var(--mx-ease),background .3s var(--mx-ease); } .mx-nav-links a:hover{color:var(--mx-ink);background:var(--mx-surface-2)} /* Sous le desktop, la pastille flottante devient une VRAIE barre : elle prend la largeur, marque à gauche, actions à droite. Une petite pastille centrée sur un écran de tablette paraît perdue. */ /* Le padding horizontal suit celui de .mx-wrap pour que la barre s'aligne EXACTEMENT sur le contenu en dessous, à toutes les largeurs. */ @media(max-width:1023px){ .mx-nav{padding:14px 28px 0} .mx-nav-pill{ width:100%;max-width:1120px;justify-content:space-between; border-radius:var(--mx-r-pill);padding:6px 6px 6px 16px; } .mx-nav-brand{margin-right:auto} } @media(max-width:767px){ .mx-nav-pill{padding:7px 7px 7px 13px} .mx-nav-brand .mx-mark{width:30px;height:30px} .mx-nav-brand b{font-size:15.5px} } @media(max-width:560px){ .mx-nav{padding:12px 18px 0} } /* ── Pied de page ─────────────────────────────────────────────────────────── */ .mx-foot{border-top:1px solid var(--mx-hair-3);padding:48px 0 56px;margin-top:0} .mx-foot-links{display:flex;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--mx-ink-3)} .mx-foot-links a{transition:color .3s var(--mx-ease)} .mx-foot-links a:hover{color:var(--mx-ink)} .mx-risk{color:var(--mx-ink-4);font-size:12px;line-height:1.85}