/* =========================================================================== G&G Hosting Service — thème enfant « gg-dark », couches de couleur --------------------------------------------------------------------------- Parent : twenty-one (WHMCS 9.1.0) Bootstrap 4.5.3 Smarty 4 AVERTISSEMENT DE STRUCTURE Un fichier de thème enfant REMPLACE le fichier homonyme du parent. Ce fichier remplace donc templates/twenty-one/css/custom.css en entier — et celui-ci n'est pas vide : il porte tout le jeu de jetons du Nexus Cart. Le bloc « JETONS HÉRITÉS » ci-dessous en est la reprise fidèle. Ne pas l'élaguer : si le formulaire de commande Nexus Cart est activé un jour, ces jetons redeviennent vivants. CE QUE LA CHARTE SE TROMPE À DIRE La charte annonce « le site est gris, injecter #FF6C3A dans --primary-* : correction de quelques lignes ». Vérifié dans le CSS réel du thème 9.1.0 : - le site n'est pas gris, il est BLEU #336699 ; - ce bleu est codé en dur dans 36 groupes de règles du CSS compilé ; - var(--primary-*) n'est consommé que 3 fois dans tout theme.css, et les --primary-* neutres ne servent en réalité qu'aux pages Nexus Cart. Remapper les variables ne change donc presque rien. Il faut surcharger les règles compilées, ce que fait la seconde moitié de ce fichier. Tous les contrastes annotés sont CALCULÉS (WCAG 2.1) par ../../rampe.py. =========================================================================== */ html { font-size: 14px; /* repris du parent — ne pas retirer, le thème s'y accorde */ } /* =========================================================================== 1. JETONS HÉRITÉS DU PARENT Repris de templates/twenty-one/css/custom.css (WHMCS 9.1.0) pour ne pas les perdre. Seul le bloc --primary-* et le trio --primary/-lifted/-accented sont modifiés ; tout le reste est à l'identique. =========================================================================== */ :root { --white: #fff; /* Nuances neutres — inchangées */ --neutral-50: #fbf9fa; --neutral-100: #f4f5f7; --neutral-200: #e4e4e7; --neutral-300: #d0d5dd; --neutral-400: #9ca3af; --neutral-500: #6b7280; --neutral-600: #4b5563; --neutral-700: #374151; --neutral-800: #1f2937; --neutral-900: #111827; --neutral-950: #030712; /* ----- MODIFIÉ : la rampe de marque remplace les alias neutres ----- Générée par rampe.py, ancrée sur #FF6C3A et #E04E18 (logo), interpolée en OKLCh à teinte constante. Ne pas éditer à la main. */ --primary-50: #FFD0A7; --primary-100: #FFC299; --primary-200: #FFAF85; --primary-300: #FF9B6F; --primary-400: #FF8456; --primary-500: #FF6C3A; /* orange de marque */ --primary-600: #E04E18; /* orange profond */ --primary-700: #AF3905; --primary-800: #902400; --primary-900: #791200; --primary-950: #791200; /* le parent aliase aussi 950 sur 900 */ /* ----- MODIFIÉ : trio primaire ----- Ces trois jetons portent du texte blanc dans le Nexus Cart. On part donc du palier 700 (blanc : 6,16) et non du 600, sur lequel AUCUNE couleur de texte ne passe AA — blanc 3,98, anthracite 4,37. */ --primary: var(--primary-700); --primary-lifted: var(--primary-800); --primary-accented: var(--primary-900); /* Secondaires — inchangés */ --secondary: var(--neutral-500); --secondary-lifted: var(--neutral-600); --secondary-accented: var(--neutral-700); /* Succès — inchangés */ --success: #00a63e; --success-lifted: #008236; --success-accented: #016630; /* Information — inchangés */ --info: #155dfc; --info-lifted: #1447e6; --info-accented: #193cb8; /* Avis — inchangés */ --notice: #7f22fe; --notice-lifted: #7008e7; --notice-accented: #5d0ec0; /* Avertissement — inchangés */ --warning: #f54a00; --warning-lifted: #ca3500; --warning-accented: #9f2d00; /* Erreur — inchangés */ --error: #e7000b; --error-lifted: #c10007; --error-accented: #9f0712; /* Niveaux de gris — inchangés */ --grayscale: var(--neutral-900); --grayscale-lifted: var(--neutral-800); --grayscale-accented: var(--neutral-700); --neutral: var(--neutral-500); --neutral-lifted: var(--neutral-600); --neutral-accented: var(--neutral-700); --text-inverted: var(--white); --text-muted: var(--neutral-400); --text-lifted: var(--neutral-500); --text-accented: var(--neutral-600); --text: var(--neutral-900); --border-muted: var(--neutral-200); --border: var(--neutral-300); --border-lifted: var(--neutral-400); --border-accented: var(--neutral-600); --bg: var(--white); --bg-muted: var(--neutral-50); --bg-lifted: var(--neutral-100); --bg-accented: var(--neutral-200); --bg-inverted: var(--neutral-900); --yellow-200: #fff085; --yellow-300: #ffdf20; --teal-300: #46edd5; --teal-400: #00d5be; --emerald-300: #5ee9b5; --pink-400: #fb64b6; --text-xs: 0.625rem; --text-sm: 0.75rem; --text-md: 0.875rem; --text-lg: 1rem; --outline-sm: 1px; --outline-md: 2px; --outline-lg: 3px; --rounding-sm: 0.25rem; --rounding-md: 0.5rem; --rounding-lg: 0.75rem; --letter-spacing: 0em; --disabled-opacity: 25%; /* Variable exportée par Bootstrap 4. Peu consommée, remappée par cohérence si un module tiers s'en sert. */ --primary: var(--primary-700); } /* =========================================================================== 2. REMPLACEMENT DU BLEU #336699 Les 36 groupes de règles de theme.css qui codent le bleu en dur. Recensés exhaustivement par extraction du CSS compilé, pas devinés. Règle de lisibilité tenue partout : l'orange de marque #FF6C3A porte du texte ANTHRACITE (6,18) et jamais du blanc (2,82). Les surfaces qui doivent porter du blanc descendent au palier 700 (6,16). =========================================================================== */ /* --- Liens ---------------------------------------------------------------- */ a { color: var(--primary-700); /* 6,16 sur blanc */ } a:hover { color: var(--primary-800); /* 8,61 */ } /* --- Bouton primaire ------------------------------------------------------ theme.css impose color:#fff — il faut donc aussi surcharger la couleur du texte, pas seulement le fond. */ .btn-primary { color: #1A1A1A; background-color: var(--primary-500); border-color: var(--primary-500); } .btn-primary:hover, .btn-primary:focus, .btn-primary.focus { color: #fff; background-color: var(--primary-700); border-color: var(--primary-800); } .btn-primary.disabled, .btn-primary:disabled { color: #1A1A1A; background-color: var(--primary-500); border-color: var(--primary-500); } .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { color: #fff; background-color: var(--primary-800); border-color: var(--primary-900); } /* --- Bouton primaire en contour ------------------------------------------- */ .btn-outline-primary { color: var(--primary-700); border-color: var(--primary-600); } .btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle { color: #1A1A1A; background-color: var(--primary-500); border-color: var(--primary-500); } .btn-outline-primary.disabled, .btn-outline-primary:disabled { color: var(--primary-700); } /* --- Bouton-lien ---------------------------------------------------------- */ .btn-link { color: var(--primary-700); } .btn-link:hover { color: var(--primary-800); } /* --- Menus déroulants ----------------------------------------------------- */ .dropdown-item.active, .dropdown-item:active { color: #1A1A1A; background-color: var(--primary-500); } /* --- Cases à cocher, boutons radio, curseurs ------------------------------ Aplats sans texte : l'orange de marque convient directement. */ .custom-control-input:checked ~ .custom-control-label::before, .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { border-color: var(--primary-500); background-color: var(--primary-500); } .custom-range::-webkit-slider-thumb { background-color: var(--primary-500); } .custom-range::-moz-range-thumb { background-color: var(--primary-500); } .custom-range::-ms-thumb { background-color: var(--primary-500); } /* --- Onglets en pilules --------------------------------------------------- */ .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #1A1A1A; background-color: var(--primary-500); } /* --- Pagination ----------------------------------------------------------- theme.css contient `.pagination > li > a { color: #444 }`, de spécificité (0,1,2), qui bat un simple `.page-link` (0,1,0). Il faut donc viser au moins aussi précis, sinon la règle est silencieusement perdue. */ .pagination > li > a.page-link, .pagination > .page-item > .page-link { color: var(--primary-700); } .pagination > li > a.page-link:hover, .pagination > .page-item > .page-link:hover { color: var(--primary-800); } .page-item.active .page-link { color: #1A1A1A; background-color: var(--primary-500); border-color: var(--primary-500); } /* --- Étiquettes ----------------------------------------------------------- */ .badge-primary { color: #1A1A1A; background-color: var(--primary-500); } a.badge-primary:hover, a.badge-primary:focus { color: #fff; background-color: var(--primary-700); } /* --- Barres de progression ------------------------------------------------ Bootstrap met `color:#fff` sur .progress-bar. Sur l'orange de marque cela donne 2,82 — il faut surcharger la couleur du texte, pas seulement le fond. Visible dès qu'une barre affiche son pourcentage en clair. */ .progress-bar { color: #1A1A1A; background-color: var(--primary-500); } /* --- Listes --------------------------------------------------------------- */ .list-group-item.active { color: #1A1A1A; background-color: var(--primary-500); border-color: var(--primary-500); } /* --- Utilitaires ---------------------------------------------------------- */ .bg-primary { background-color: var(--primary-500) !important; color: #1A1A1A !important; } a.bg-primary:hover, a.bg-primary:focus, button.bg-primary:hover, button.bg-primary:focus { background-color: var(--primary-700) !important; color: #fff !important; } .border-primary { border-color: var(--primary-500) !important; } .text-primary { color: var(--primary-700) !important; /* et non 500 : fond clair */ } a.text-primary:hover, a.text-primary:focus { color: var(--primary-800) !important; } /* --- Divers propres à twenty-one ------------------------------------------ */ .input-group .btn-reveal-pw:hover, .input-group .btn-reveal-pw:active { color: var(--primary-700); } .domain-pricing .tld-pricing-header div:nth-child(odd) { border-color: var(--primary-500); } /* =========================================================================== 3. PASTILLES D'ÉTAT — correction d'un défaut du thème parent --------------------------------------------------------------------------- Les couleurs de FOND ne sont pas repeintes en orange : ces pastilles encodent un ÉTAT, pas la marque. Les basculer en orange ferait ressembler vingt-huit statuts distincts au bouton d'action principal. La couleur sémantique est un registre séparé de la couleur d'accent. En revanche le parent a ici un vrai défaut d'accessibilité : les classes `.status-*` ne posent qu'un `background-color`, jamais de couleur de texte. Le blanc n'est appliqué que dans le contexte `.div-service-status` ; partout ailleurs la pastille hérite du texte sombre du corps de page, ce qui tombe à 2,57 sur le bleu d'attente. Le bloc ci-dessous est GÉNÉRÉ depuis le CSS réel du parent, parce qu'il y a 28 classes et que la version écrite à la main n'en couvrait que 19 — il a fallu un banc d'essai pour s'en apercevoir. =========================================================================== */ /* 28 pastilles d'etat — GENERE par « rampe.py --statuts ». Ne pas editer a la main : relancer apres une montee de version. */ /* Fonds sombres ou satures : texte blanc */ .label.status-answered, /* #7B4F9D 6.09 */ .label.status-collections, /* #2C3E50 10.98 */ .label.status-dead, /* #000000 21.00 */ .label.status-delivered, /* #336699 6.00 */ .label.status-expired, /* #004258 10.94 */ .label.status-fraud, /* #000000 21.00 */ .label.status-inprogress, /* #C0392B 5.44 */ .label.status-lost, /* #000000 21.00 */ .label.status-onhold, /* #336699 6.00 */ .label.status-payment-pending, /* #336699 6.00 */ .label.status-terminated, /* #666666 5.74 */ .label.status-transferred-away { /* #004258 10.94 */ color: #FFFFFF; } /* Fonds clairs : texte anthracite */ .label.status-accepted, /* #5CB85C 7.02 */ .label.status-active, /* #5CB85C 7.02 */ .label.status-cancelled, /* #87939F 5.56 */ .label.status-closed, /* #87939F 5.56 */ .label.status-completed, /* #5CB85C 7.02 */ .label.status-customer-reply, /* #FF6600 5.93 */ .label.status-grace, /* #FF6600 5.93 */ .label.status-open, /* #5CB85C 7.02 */ .label.status-paid, /* #5CB85C 7.02 */ .label.status-pending-registration, /* #FF6600 5.93 */ .label.status-pending-transfer, /* #F0AD4E 8.94 */ .label.status-redemption, /* #FF6600 5.93 */ .label.status-refunded, /* #F0AD4E 8.94 */ .label.status-suspended { /* #F0AD4E 8.94 */ color: #1A1A1A; } /* Fonds sur lesquels AUCUNE couleur de texte ne passe AA : le fond est assombri d'un cran, teinte et chroma OKLCh conservees. */ .label.status-pending { /* #D9534F : blanc 3.96, anthracite 4.39 */ background-color: #CE4946; /* blanc 4.50 */ color: #FFFFFF; } .label.status-unpaid { /* #D9534F : blanc 3.96, anthracite 4.39 */ background-color: #CE4946; /* blanc 4.50 */ color: #FFFFFF; } /* =========================================================================== 4. FOCUS CLAVIER twenty-one s'appuie sur le focus Bootstrap, teinté du bleu du thème. =========================================================================== */ :focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; } .form-control:focus, .custom-select:focus { border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(255, 108, 58, 0.22); } .btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 3px rgba(255, 108, 58, 0.35); }