/* ========================================================================== SITEK — jetons de couleur, version 1 --------------------------------------------------------------------------- CE FICHIER EST LA CHARTE GRAPHIQUE DU SITE, ET RIEN D'AUTRE. Il se charge AVANT styles.css. Changer l'identite visuelle de Sitek, c'est remplacer ce seul fichier — pas toucher a une regle de mise en page. D'OU VIENT LE BLEU Il est releve sur le logo Sitek (sitek-logo-profil.png) : le degrade y va d'un bleu clair en haut a gauche a un bleu profond en bas a droite. La teinte dominante, #2563EB, est prise au milieu de ce degrade. Elle n'est pas choisie a l'oeil : c'est celle que le prospect a deja vue sur la page Facebook et sur la photo de profil. POURQUOI LE SOMBRE PAR DEFAUT Sitek vend du travail technique a des commercants. Le sombre lit comme un outil ; et surtout, le logo bleu sur fond sombre est exactement ce qu'ils ont vu en arrivant depuis Facebook. Le theme clair existe entierement et se bascule d'un bouton — il sert aux prospects qui lisent en plein jour, sur un telephone a la luminosite au maximum. LE NOM DES VARIABLES N'A PAS CHANGE, ET C'EST VOULU css/styles.css est celui du socle, copie sans modification. Il consomme --orange, --voile-orange, --sur-orange : des noms de COULEUR, herites, la ou la methode voudrait des noms de ROLE. Les renommer obligerait a reecrire la feuille de mise en page, donc a la faire diverger du socle, donc a perdre toute mise a jour future. On garde donc les noms et on les fait pointer sur --accent : c'est le seul endroit ou le bleu est ecrit. ATTENTION : jamais --orange:var(--orange). Une variable qui se reference elle-meme devient invalide et se resout a vide, sans une erreur en console. Verification : grep -nE '^\s*--([a-z0-9-]+)\s*:\s*var\(--\1\)' css/*.css ========================================================================== */ :root{ color-scheme:dark; /* ---- L'accent Sitek : la seule teinte de marque du fichier ------------ */ --accent:#2563EB; /* l'aplat des boutons, le bleu du logo */ --accent-texte:#8AB4FF; /* le meme bleu, eclairci pour du TEXTE sur fond sombre : #2563EB sur #0B0E13 tombe a 3,1:1 et devient penible a lire en petit corps */ --accent-profond:#1B3FA0; /* le coin fonce du degrade du logo */ /* ---- Roles : fonds ---------------------------------------------------- */ --fond-0:#0A0D14; /* la page */ --fond-1:#121722; /* les bandes, l'en-tete */ --fond-2:#1A2130; /* les cartes, les champs */ /* ---- Roles : textes --------------------------------------------------- */ --texte-0:#FFFFFF; /* titres */ --texte-1:#F3F6FB; /* texte fort */ --texte-2:#C4CEDD; /* texte courant */ --texte-3:#8A95A6; /* texte secondaire */ --texte-4:#687385; /* mentions legales */ --texte-champ:#78839A; /* placeholder */ /* ---- Roles : traits et ombres ----------------------------------------- */ --ligne:rgba(196,206,221,.14); --shadow:0 10px 30px rgba(0,0,0,.45); --ombre-carte:0 12px 24px rgba(0,0,0,.5); --ombre-flottant:0 6px 18px rgba(0,0,0,.4); --ombre-image:0 24px 46px rgba(0,0,0,.55); --ombre-douce:none; /* le relief des cartes en clair */ --voile-entete:rgba(10,13,20,.82); --voile-barre:rgba(10,13,20,.92); --opacite-fond:.28; /* l'intensite du halo derriere la page */ /* LE FOND DE PAGE EST UN DEGRADE, PAS UNE PHOTO. css/styles.css pose un calque plein ecran derriere tout le monde et lit son contenu dans --fond-image. Sur les boutiques du socle c'est une photo d'ambiance floue (images/fond-salon.webp) : elle raconte l'endroit ou le produit sera utilise. Sitek ne vend pas un objet qu'on pose dans un salon, et une photo de bureau prise sur une banque d'images ne raconte rien du tout — elle coute juste une requete et 16 Ko. Un halo aux couleurs du logo, lui, ne coute rien et suit la charte. La couleur vit ici ; le branchement sur --fond-image se fait dans css/vitrine.css, qui est charge APRES styles.css. Le faire ici serait sans effet : styles.css redeclare --fond-image plus bas, et a specificite egale c'est la derniere declaration qui gagne. */ --halo-fond:radial-gradient(1100px 620px at 78% -10%, var(--accent) 0%, transparent 62%); /* ---- Les alias que styles.css consomme -------------------------------- */ --orange:var(--accent); --orange-vif:var(--accent-texte); --orange-sombre:var(--accent-profond); --sur-orange:#FFFFFF; /* le texte pose SUR l'aplat bleu : blanc sur #2563EB donne 4,6:1, lisible en gras comme le sont les boutons */ --voile-orange-fort:rgba(37,99,235,.26); --voile-orange:rgba(37,99,235,.18); --voile-orange-doux:rgba(37,99,235,.12); --shadow-accent:0 8px 28px rgba(37,99,235,.34); --voile-accent-fort:rgba(37,99,235,.38); --voile-accent-moyen:rgba(37,99,235,.20); --voile-accent-doux:rgba(37,99,235,.12); --voile-accent-tres-doux:rgba(37,99,235,.05); /* ---- Signalisation ----------------------------------------------------- * * Vert, ambre, rouge et WhatsApp ne suivent pas la marque : ce sont des * codes que tout le monde lit de la meme facon. Les repeindre en bleu ferait * disparaitre l'information qu'ils portent — et sur ce site le vert porte * les « inclus dans l'offre », qui doivent se lire d'un coup d'oeil. * ---------------------------------------------------------------------- */ --vert:#34D399; --voile-vert:rgba(52,211,153,.14); --ambre:#F5A524; --voile-ambre:rgba(245,165,36,.14); --whatsapp:#25D366; /* Le texte pose SUR l'aplat vert WhatsApp. Un vert clair ne supporte pas du blanc : #25D366 avec du blanc donne 1,9:1. Il faut un fonce. */ --sur-whatsapp:#08210F; --voile-whatsapp-fort:rgba(37,211,102,.28); --voile-whatsapp:rgba(37,211,102,.14); --alerte:#F87171; --voile-alerte:rgba(248,113,113,.14); --radius:14px; /* ---- 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 Meme methode que sur les boutiques du socle : on ne redefinit QUE les roles qui changent. Le bleu d'aplat ne bouge pas ; le bleu de TEXTE, lui, doit foncer, sinon il tombe sous 4,5:1 sur blanc. ========================================================================== */ :root[data-theme="light"]{ color-scheme:light; --fond-0:#FFFFFF; --fond-1:#F4F6FB; --fond-2:#FFFFFF; --texte-0:#101419; --texte-1:#1C2129; --texte-2:#3A4250; --texte-3:#626C7C; --texte-4:#8A93A1; --texte-champ:#9AA3B2; --ligne:#E1E6EF; --shadow:0 10px 30px rgba(16,20,25,.10); --ombre-carte:0 10px 22px rgba(16,20,25,.08); --ombre-flottant:0 6px 18px rgba(16,20,25,.16); --ombre-image:0 18px 34px rgba(16,20,25,.16); --ombre-douce:0 1px 2px rgba(16,20,25,.04),0 6px 16px rgba(16,20,25,.06); --voile-entete:rgba(255,255,255,.88); --voile-barre:rgba(255,255,255,.94); --opacite-fond:.14; /* #1D4ED8 sur blanc : 6,3:1. C'est la seule valeur de marque qui change d'un theme a l'autre. */ --accent-texte:#1D4ED8; --voile-orange-fort:rgba(37,99,235,.16); --voile-orange:rgba(37,99,235,.11); --voile-orange-doux:rgba(37,99,235,.08); --shadow-accent:0 8px 22px rgba(37,99,235,.28); --voile-accent-fort:rgba(37,99,235,.26); --voile-accent-moyen:rgba(37,99,235,.13); --voile-accent-doux:rgba(37,99,235,.08); --voile-accent-tres-doux:rgba(37,99,235,.04); --vert:#047857; --voile-vert:rgba(4,120,87,.10); --ambre:#B7791F; --voile-ambre:rgba(183,121,31,.12); --alerte:#B91C1C; --voile-alerte:rgba(185,28,28,.10); --voile-whatsapp-fort:rgba(21,128,61,.20); --voile-whatsapp:rgba(21,128,61,.10); }