/* ========================================================================== EL MODE — jetons de couleur (charte V1) --------------------------------------------------------------------------- CE FICHIER EST LA CHARTE GRAPHIQUE DU SITE, ET RIEN D'AUTRE. Il se charge AVANT styles.css. Changer l'identite visuelle de la boutique, c'est remplacer ce seul fichier — pas toucher a une regle de mise en page. C'est aussi ce qui rend le retour en arriere possible : on garde les versions precedentes et on repose celle qu'on veut. REGLE ABSOLUE : aucune couleur ecrite en dur ailleurs. Une valeur hex posee dans une regle de styles.css echappera au prochain changement d'identite et restera seule de son espece, souvent sur le theme ou personne ne regarde. Les noms decrivent un ROLE (--fond-1, --texte-2), pas une couleur. C'est ce qui permet au meme nom de porter du noir en sombre et du blanc en clair sans qu'aucune regle de mise en page ne s'en apercoive. LE PARTI PRIS D'EL MODE : AUCUNE COULEUR DE MARQUE Le logo est noir sur blanc, sans une teinte. Une boutique de mode vend des photos de produits : toute couleur posee autour d'elles entre en concurrence avec le sac ou la robe qu'on essaie de vendre. L'accent de la marque est donc l'encre elle-meme — noir sur fond clair, blanc sur fond sombre. LES NOMS --orange* SONT CONSERVES. Ce sont les noms de role du socle : une centaine de regles de styles.css et d'admin.css les appellent. Les renommer pour la seule beaute du mot aurait voulu dire relire deux feuilles entieres, pour un resultat identique a l'ecran. Ils portent ici de l'encre. ========================================================================== */ :root{ color-scheme:dark; /* ---- Roles : fonds ---------------------------------------------------- */ --fond-0:#0A0A0A; /* la page */ --fond-1:#131313; /* les bandes, l'en-tete */ --fond-2:#191919; /* les cartes, les champs */ /* ---- Roles : textes --------------------------------------------------- */ --texte-0:#FFFFFF; /* titres */ --texte-1:#F2F2F2; /* texte fort */ --texte-2:#D2D2D2; /* texte courant */ --texte-3:#9A9A9A; /* texte secondaire */ --texte-4:#777777; /* mentions legales */ --texte-champ:#7E7E7E; /* placeholder */ /* ---- Roles : traits et ombres ----------------------------------------- */ --ligne:rgba(255,255,255,.14); --shadow:0 10px 30px rgba(0,0,0,.55); --ombre-carte:0 12px 24px rgba(0,0,0,.6); --ombre-flottant:0 6px 18px rgba(0,0,0,.5); --ombre-image:0 24px 46px rgba(0,0,0,.6); --ombre-douce:none; /* le relief des cartes en clair */ --voile-entete:rgba(10,10,10,.86); --voile-barre:rgba(10,10,10,.94); --opacite-fond:.30; /* ---- Accent : l'encre -------------------------------------------------- * * --orange l'aplat des boutons * --sur-orange ce qui s'ecrit dessus — il INVERSE avec le theme, parce que * l'aplat passe du blanc au noir d'un theme a l'autre. C'est * la seule paire du socle qui se croise ainsi : une boutique * dont l'accent est une couleur garde le meme aplat partout. * --orange-vif l'accent en TEXTE. Il doit rester a 4,5:1 sur son fond : * blanc pur sur le noir, encre pleine sur le blanc. * ---------------------------------------------------------------------- */ --orange:#F2F2F2; --orange-vif:#FFFFFF; --orange-sombre:#C9C9C9; --sur-orange:#0A0A0A; --voile-orange-fort:rgba(255,255,255,.16); --voile-orange:rgba(255,255,255,.12); --voile-orange-doux:rgba(255,255,255,.08); --shadow-accent:0 8px 28px rgba(0,0,0,.55); /* ---- La bande d'engagements ------------------------------------------- * * LA SEULE COULEUR DE LA BOUTIQUE, ET C'EST UN CHOIX DE LA CLIENTE. * Elle a demande la bande moutarde d'un visuel de reference ; la valeur est * relevee au pixel dessus, pas approchee a l'oeil (#C9A84B). * * Elle NE SUIT PAS LE THEME. Un aplat de marque garde sa teinte en sombre * comme en clair — sinon la bande change de couleur quand la visiteuse * bascule le theme, et ce n'est plus une signature. * * L'ECRITURE EST A L'ENCRE, PAS EN BLANC. Du blanc sur ce moutarde donne * 2,29:1, tres loin des 4,5:1 exiges pour du texte de 12 px : sur un * telephone en plein soleil, la bande devient une barre doree illisible. * L'encre y est a 8,26:1. Pour ecrire en blanc, il faudrait descendre le * fond vers #8A6D1F — ce ne serait plus la couleur du visuel. * ---------------------------------------------------------------------- */ --bande:#C9A84B; --sur-bande:#111111; /* Le dore eclairci du survol. Il existe parce que les boutons d'achat de la page Pack portent desormais la couleur de la bande : sans variante, un bouton dore n'aurait aucune reaction au survol. 10,68:1 sur l'encre. */ --bande-vif:#DFC067; /* ---- Signalisation ----------------------------------------------------- * * Vert, ambre et WhatsApp ne suivent pas la marque : ce sont des codes que * tout le monde lit de la meme facon. Les repeindre en noir et blanc ferait * disparaitre l'information qu'ils portent. * ---------------------------------------------------------------------- */ --vert:#34D399; --voile-vert:rgba(52,211,153,.14); --ambre:#F5A524; --voile-ambre:rgba(245,165,36,.14); --whatsapp:#25D366; /* Le logo WhatsApp en source d'image, pour servir de masque a une icone coloree par --whatsapp (css/styles.css, .lien-wa). Le meme trace que le du bouton flottant ; ici il faut une URL, pas une balise. */ --icone-wa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.297-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/%3E%3C/svg%3E"); /* Des angles nets : c'est le code visuel de la mode, et celui du logo. */ --radius:4px; /* Les vignettes de rayon font exception : la cliente les veut arrondies. Un jeton a part plutot qu'une valeur dans la mise en page — le jour ou on revient a des angles nets, c'est une ligne ici et rien d'autre. */ --radius-bloc:18px; /* ---- Statuts de commande — DASHBOARD UNIQUEMENT ------------------------ * * Ambre, bleu, violet, vert, rouge, sarcelle et gris : un jeu que l'oeil * distingue d'un coup. CES COULEURS NE SUIVENT PAS LA MARQUE — les * repeindre en gris rendrait les sept statuts indiscernables. * ---------------------------------------------------------------------- */ --st-attente:#F5A524; --st-injoignable:#2DD4BF; --st-confirmee:#4C9AFF; --st-livraison:#A78BFA; --st-livree:#34D399; --st-annulee:#F87171; --st-retour:#94A3B8; --alerte:#F87171; --voile-alerte:rgba(248,113,113,.14); /* Voiles d'accent : l'encre de la marque, tres diluee. */ --voile-accent-fort:rgba(255,255,255,.22); --voile-accent-moyen:rgba(255,255,255,.12); --voile-accent-doux:rgba(255,255,255,.08); --voile-accent-tres-doux:rgba(255,255,255,.04); --voile-whatsapp-fort:rgba(37,211,102,.28); --voile-whatsapp:rgba(37,211,102,.14); /* La vignette qui montre a quoi ressemble l'AUTRE theme, dans l'Editeur. Ses couleurs ne suivent pas le theme courant — c'est une illustration — mais elles suivent la MARQUE. */ --apercu-sombre-fond:#0A0A0A; --apercu-sombre-trait:#F2F2F2; --apercu-clair-fond:#FFFFFF; --apercu-clair-trait:#111111; --pulse-vert-plein:rgba(52,211,153,.55); --pulse-vert-vide:rgba(52,211,153,0); /* ---- Alias historiques : ne portent plus de couleur en propre ---------- */ --noir:var(--fond-0); --graphite:var(--fond-1); --graphite-clair:var(--fond-2); --blanc-pur:var(--texte-0); --blanc:var(--texte-1); --argent:var(--texte-2); --gris:var(--texte-3); --gris-sourd:var(--texte-4); --gris-champ:var(--texte-champ); } /* ========================================================================== Theme clair — le theme de vitrine d'El Mode : blanc, encre, et rien d'autre. C'est celui du logo, et celui sur lequel une photo de sac se detache le mieux. Seuls les roles qui changent sont redefinis. ========================================================================== */ :root[data-theme="light"]{ color-scheme:light; --fond-0:#FFFFFF; --fond-1:#F5F4F2; --fond-2:#FFFFFF; --texte-0:#0D0D0D; --texte-1:#161616; --texte-2:#3A3A3A; --texte-3:#6A6A6A; --texte-4:#8E8E8E; --texte-champ:#A5A5A5; --ligne:#E4E2DE; --shadow:0 10px 30px rgba(13,13,13,.10); --ombre-carte:0 10px 22px rgba(13,13,13,.08); --ombre-flottant:0 6px 18px rgba(13,13,13,.16); --ombre-image:0 18px 34px rgba(13,13,13,.14); --ombre-douce:0 1px 2px rgba(13,13,13,.04),0 6px 16px rgba(13,13,13,.05); --voile-entete:rgba(255,255,255,.90); --voile-barre:rgba(255,255,255,.95); --opacite-fond:.16; /* L'aplat et son texte se croisent : noir plein, ecriture blanche. */ --orange:#111111; --orange-vif:#111111; --orange-sombre:#000000; --sur-orange:#FFFFFF; --voile-orange-fort:rgba(17,17,17,.12); --voile-orange:rgba(17,17,17,.08); --voile-orange-doux:rgba(17,17,17,.05); --shadow-accent:0 8px 22px rgba(13,13,13,.18); --vert:#047857; --voile-vert:rgba(4,120,87,.10); --ambre:#B7791F; --voile-ambre:rgba(183,121,31,.12); --st-attente:#B7791F; --st-injoignable:#0F766E; --st-confirmee:#1D4ED8; --st-livraison:#6D28D9; --st-livree:#047857; --st-annulee:#B91C1C; --st-retour:#64748B; --alerte:#B91C1C; --voile-alerte:rgba(185,28,28,.10); --voile-accent-fort:rgba(17,17,17,.18); --voile-accent-moyen:rgba(17,17,17,.10); --voile-accent-doux:rgba(17,17,17,.06); --voile-accent-tres-doux:rgba(17,17,17,.03); --voile-whatsapp-fort:rgba(21,128,61,.20); --voile-whatsapp:rgba(21,128,61,.10); --pulse-vert-plein:rgba(4,120,87,.45); --pulse-vert-vide:rgba(4,120,87,0); /* WHATSAPP NE SUIT PAS LE THEME, ET C'EST POUR CA QU'IL EST ICI. Le rond vert et son glyphe blanc sont ceux de WhatsApp : les repeindre aux couleurs de la boutique ferait disparaitre ce que le bouton signifie. Ils ne sont donc PAS redefinis dans le bloc clair — mais ils vivent dans ce fichier comme toutes les autres couleurs, sans quoi ils echapperaient au prochain changement d'identite sans que personne ne les retrouve. */ --wa-vert:#25D366; --wa-encre:#FFFFFF; /* Les deux blancs du theme clair. Ce ne sont pas --fond-1 : l'un est le haut d'un degrade, l'autre le fond des champs, tous deux legerement plus chauds que la page pour que les bords se voient sans trait. */ --blanc-degrade:#FFFFFF; --blanc-chaud:#FBF8F4; --blanc-champ:#FBFAF8; }