/* ═══════════════════════════════════════════════════════════════ BUYVIRTUALCARDS — jetons de design Direction : COMPTOIR. Blanc franc, une seule couleur d'accent, angles généreux, ombres douces. Le registre des néobanques. Ce qui porte la page, dans l'ordre d'importance : 1. LE TITRAGE. Une grotesque grasse, très resserrée (-0,038 em). C'est le levier le plus puissant de tout le système : la même page en Didone à déliés capillaires dit « certificat », en Archivo 700 serré elle dit « produit ». Rien d'autre ne change autant la perception. 2. UNE SEULE COULEUR. `--accent` remplace à lui seul l'ancien vert d'encre et l'ancien cuivre. Tout le reste est du gris. 3. L'ESPACE ET LA HIÉRARCHIE. Il n'y a plus d'ornement pour occuper le vide, donc le vide doit être juste. ─── Ce que cette direction a coûté ───────────────────────────── Le site venait d'une direction « gravure de sécurité » : papier crème, trois plaques d'encre, guilloché, filets ornementés, microtexte. Elle était reconnaissable ; celle-ci ne l'est pas. Une page BuyVirtualCards ressemble maintenant à une page de n'importe quel prestataire du secteur. C'est un arbitrage assumé, pas un oubli : il vaut mieux le savoir que le redécouvrir. Il reste du vocabulaire fiduciaire dans les NOMS DE CLASSES — `.plate`, `.stamp`, `.serial`, `.cartouche`, `.ledger`. Ils sont internes et assez génériques pour survivre ; les renommer aurait touché toutes les pages sans rien changer à l'écran. Les JETONS, eux, ont été renommés : une variable `--copper` contenant un indigo se paie à chaque relecture. ─── Règles de la maison ──────────────────────────────────────── · Le contraste du texte passe 4,5:1, celui du grand titrage 3:1. Une seule exception, décorative et assumée : le filigrane géant du pied de page. Le gris le plus clair, `--fg-faint`, porte des libellés de 10 px : il se lit, il ne décore pas. · Toutes les propriétés directionnelles sont LOGIQUES (inline-start / inline-end) : le site se retourne intégralement en arabe sans une seule règle supplémentaire. ═══════════════════════════════════════════════════════════════ */ :root { /* ── Surfaces ────────────────────────────────────────────────── Blanc franc et gris froids. Aucun crème : c'est ce qui signait le papier fiduciaire. */ --surface: #ffffff; --surface-sunk: #f4f6f8; --surface-raised: #ffffff; --surface-edge: #e3e7ec; --ink: #0d1117; --ink-deep: #0d1117; --ink-mid: #3d4753; --fg: #0d1117; /* 18,9:1 sur blanc */ --fg-muted: #58626e; /* 6,7:1 */ /* 4,9:1. Ce gris porte toutes les petites capitales du site — libellés de tableau, en-têtes de rubrique, noms de services. Il ne décore pas : il se lit, souvent à 10 px. Ne pas l'éclaircir. */ --fg-faint: #676f7b; /* ── L'accent, unique ────────────────────────────────────────── Un indigo électrique. Il tient à lui seul le rôle que la direction précédente répartissait sur trois plaques d'encre. */ --accent: #3d3ae8; --accent-deep: #2b28c4; --accent-light: #8a88f5; --accent-wash: rgba(61, 58, 232, 0.08); /* Le rouge des numéros de série et des drapeaux. */ --serial: #bd2340; /* 6,0:1 — il écrit des références */ --serial-wash: rgba(189, 35, 64, 0.08); /* ── Filets ──────────────────────────────────────────────────── */ --line: rgba(13, 17, 23, 0.14); --line-soft: rgba(13, 17, 23, 0.08); --line-faint: rgba(13, 17, 23, 0.04); --line-accent: rgba(61, 58, 232, 0.28); --hair: 1px; /* ── Statuts ─────────────────────────────────────────────────── Ces couleurs ne colorent pas des pastilles : elles écrivent des montants, des motifs de refus, des états de compte. Elles sont donc calées au-dessus de 5:1 sur blanc, pas sur ce qui « rend bien » — un vert de succès trop clair rendait le montant crédité du tableau de bord illisible à 4,2:1. */ /* Les valeurs sont données sur blanc, mais ces couleurs s'écrivent aussi SUR LEUR PROPRE LAVIS — une pastille « disponible » est du vert sur un fond vert à 9 %. Ce fond teinté rabote environ 0,7 point de contraste : calibrées à 5,1:1 sur blanc, les pastilles tombaient à 4,4:1. D'où une marge, ici, plutôt qu'un réglage au ras du seuil. */ --ok: #0a7350; /* 5,9:1 sur blanc · 5,0:1 sur son lavis */ --ok-wash: rgba(10, 115, 80, 0.09); --warn: #8f5600; /* 6,0:1 · 5,1:1 */ --warn-wash: rgba(143, 86, 0, 0.10); --danger: #bd2340; /* 6,0:1 · 5,1:1 */ --danger-wash: rgba(189, 35, 64, 0.09); --info: #3d3ae8; --info-wash: rgba(61, 58, 232, 0.08); /* ── Typographie ─────────────────────────────────────────────── Une seule grotesque pour le titrage et le texte ; la différence se fait par la graisse, la taille et le resserrement, pas par un changement de famille. Le monospace reste pour ce qui s'aligne en colonnes : montants, numéros de série, hachages. */ --font-title: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-text: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-serial: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --t-3xs: 0.625rem; --t-2xs: 0.6875rem; --t-xs: 0.75rem; --t-sm: 0.8125rem; --t-base: 0.9375rem; --t-md: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem); --t-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); --t-xl: clamp(1.3125rem, 1.2rem + 0.6vw, 1.625rem); --t-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.625rem); --t-3xl: clamp(2.25rem, 1.75rem + 2.4vw, 4rem); --t-4xl: clamp(2.75rem, 1.8rem + 4.4vw, 6.25rem); --t-5xl: clamp(3.25rem, 1.4rem + 8.4vw, 9.5rem); /* Titre du héros. La borne haute est calée pour que la plus longue traduction (≈ 20 caractères) tienne encore sur une ligne à 1216 px, largeur maximale de .wrap. */ --t-hero: clamp(2.5rem, 8.2vw, 7.75rem); --lh-tight: 1.0; --lh-snug: 1.15; --lh-body: 1.62; --tr-title: -0.038em; /* le resserrement qui fait tout */ --tr-caps: 0.08em; /* les capitales cessent d'être gravées */ --tr-micro: 0.16em; /* ── Espacement ──────────────────────────────────────────────── */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 2.5rem; --s8: 3rem; --s9: 4rem; --s10: 5.5rem; --s11: 7rem; --s12: 9.5rem; /* ── Grille ──────────────────────────────────────────────────── */ --measure: 33rem; --gutter: clamp(1.125rem, 3.6vw, 3rem); --maxw: 76rem; --maxw-wide: 90rem; --maxw-prose: 40rem; /* ── Rayons ──────────────────────────────────────────────────── */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-card: 18px; --r-pill: 999px; /* ── Ombres, jamais de noir pur ──────────────────────────────── */ --sh-xs: 0 1px 2px rgba(13, 17, 23, 0.05); --sh-sm: 0 2px 6px rgba(13, 17, 23, 0.07); --sh-md: 0 4px 14px rgba(13, 17, 23, 0.07), 0 2px 4px rgba(13, 17, 23, 0.04); --sh-lg: 0 12px 34px rgba(13, 17, 23, 0.10), 0 4px 10px rgba(13, 17, 23, 0.05); --sh-card: 0 8px 22px rgba(61, 58, 232, 0.14), 0 28px 60px rgba(13, 17, 23, 0.14); --sh-emboss: none; /* ── Mouvement ───────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.19, 1, 0.22, 1); --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1); --ease-press: cubic-bezier(0.34, 1.4, 0.64, 1); --d-fast: 130ms; --d-base: 280ms; --d-slow: 560ms; --d-print: 1100ms; /* ── Divers ──────────────────────────────────────────────────── */ --header-h: 4rem; --band-h: 1.875rem; --focus: 0 0 0 3px rgba(61, 58, 232, 0.28); --z-band: 60; --z-header: 70; --z-drawer: 80; --z-modal: 90; --z-toast: 100; } /* ── Sections sombres ────────────────────────────────────────── Un bloc quasi noir, employé pour les appels à l'action et le pied de page. Toute la palette est redéfinie ici, pas seulement le fond : les règles ne changent jamais, seuls les jetons. À retenir en cas de changement de direction — une charte qui ne surcharge que `:root` laisse ce bloc intact, et ces sections restent à l'ancienne palette au milieu du reste. */ .on-plate { --surface: #0d1117; --surface-sunk: #070a0e; --surface-raised: #171d26; --surface-edge: #2a323d; --fg: #ffffff; --fg-muted: rgba(255, 255, 255, 0.68); --fg-faint: rgba(255, 255, 255, 0.46); --line: rgba(255, 255, 255, 0.16); --line-soft: rgba(255, 255, 255, 0.09); --line-faint: rgba(255, 255, 255, 0.05); --line-accent: rgba(138, 136, 245, 0.42); /* L'accent s'éclaircit : l'indigo saturé est illisible sur du noir. */ --accent: #8a88f5; --accent-deep: #6a67f0; --accent-light: #b9b8fa; --accent-wash: rgba(138, 136, 245, 0.16); --serial: #ff7d99; --serial-wash: rgba(255, 125, 153, 0.14); --ok: #45d19a; --ok-wash: rgba(69, 209, 154, 0.14); --warn: #f0b45c; --warn-wash: rgba(240, 180, 92, 0.14); --danger: #ff7d99; --danger-wash: rgba(255, 125, 153, 0.14); --info: #8a88f5; --info-wash: rgba(138, 136, 245, 0.14); --focus: 0 0 0 3px rgba(138, 136, 245, 0.5); color: var(--fg); background-color: var(--surface); } /* ── Écritures non latines ───────────────────────────────────── Archivo ne couvre ni l'arabe, ni le cyrillique, ni les écritures d'Asie de l'Est. Le build pose une classe d'écriture sur et charge la police correspondante ; le titrage bascule alors sur une grotesque du même registre. Le point qui compte : ces blocs doivent choisir une SANS. La direction précédente titrait en Didone et prenait donc des Noto Serif ici. Les laisser en place donnerait un titrage à empattements sur la moitié des langues du site, face à une grotesque grasse sur l'autre — la direction se casserait en deux. */ html[data-script="arabic"] { --font-title: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; --font-text: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; --font-serial: "Noto Sans Arabic", ui-monospace, monospace; /* L'arabe a des hampes et des jambages plus longs, et ne se resserre pas : un crénage négatif y colle les lettres liées. */ --lh-tight: 1.32; --lh-snug: 1.5; --lh-body: 1.9; --tr-title: 0; --tr-caps: 0; --tr-micro: 0.1em; } html[data-script="sc"] { --font-title: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --font-text: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --lh-tight: 1.2; --lh-snug: 1.4; --lh-body: 1.85; --tr-title: 0; --tr-caps: 0.08em; } html[data-script="jp"] { --font-title: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif; --font-text: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif; --lh-tight: 1.22; --lh-snug: 1.45; --lh-body: 1.9; --tr-title: 0; --tr-caps: 0.08em; } html[data-script="kr"] { --font-title: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; --font-text: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; --lh-tight: 1.24; --lh-snug: 1.45; --lh-body: 1.88; --tr-title: 0; --tr-caps: 0.08em; } /* Le russe et l'ukrainien n'avaient jusqu'ici AUCUNE police de texte : seul le titrage était défini, et le corps retombait sur la fonte système du visiteur. Inter couvre le cyrillique dans le même registre qu'Archivo, et sert donc les deux rôles. */ html[data-script="cyrillic"] { --font-title: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; --font-text: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; --tr-title: -0.03em; }