/* ========================================================================== Ts8r Studio — LA CHARTE -------------------------------------------------------------------------- Un seul fichier, charge par les six pages du parcours (les cinq etapes et la page contact). Une carte, un bouton, une couleur de texte, un voile de lisibilite : definis ICI, une fois, jamais dans une page. Regle : si une page a besoin d'une valeur, elle la prend dans une variable de ce fichier. Si la valeur n'existe pas ici, on l'ajoute ici, pas la-bas. Chargement : en DERNIER dans le , pour que ce fichier puisse corriger ce qu'une page a decide. ========================================================================== */ :root { /* ---- Papier ---------------------------------------------------------- */ --ts8r-papier: #bfd7e1; /* porcelaine, le fond du parcours */ --ts8r-papier-clair: #eef4f7; /* surface posee sur le papier */ /* ---- Encre ----------------------------------------------------------- */ /* Trois niveaux, pas un de plus. Les contrastes sont mesures sur le papier porcelaine. En dessous de --ts8r-encre-tenue, un texte n'est plus lisible sur fond anime : c'est le plancher, on n'y touche pas. */ --ts8r-encre: #2c3a44; /* titres et texte principal 7.8:1 */ --ts8r-encre-douce: #51616b; /* texte courant, legendes 4.3:1 */ --ts8r-encre-tenue: #5f717b; /* micro-libelles, chrome 3.4:1 */ /* ---- Accent ---------------------------------------------------------- */ /* Petrole. Jamais de dore, jamais de bronze : c'est la marque. */ --ts8r-accent: #1f5f6b; /* 4.8:1 sur le papier */ /* ---- Le voile de lisibilite ------------------------------------------ */ /* Ce qu'on glisse SOUS un texte pose sur une video ou une scene animee. Du verre, jamais un aplat opaque : le fond doit rester vivant dessous. */ --ts8r-voile: hsl(0 0% 100% / .14); --ts8r-flou: blur(9px) saturate(1.4); --ts8r-ombre: 0 0 2px 1px rgba(255, 255, 255, .28) inset, 0 0 10px 4px rgba(255, 255, 255, .12) inset, 0 4px 16px rgba(17, 17, 26, .18), 0 8px 24px rgba(17, 17, 26, .12); --ts8r-liseret: 1px solid rgba(255, 255, 255, .45); /* ---- Le versant nuit -------------------------------------------------- */ /* Les cinq etapes du parcours sont claires : encre sombre sur porcelaine. La page contact est le seul ecran pose sur une photographie (un bureau de nuit). On n'y eclaircit pas le fond, on l'assombrit : la photo garde sa presence et le texte redevient lisible. Contrastes mesures sur le pixel le plus clair de la zone de la carte : blanc 7,4:1 · encre douce nuit 6,9:1 · porcelaine 4,9:1. */ --ts8r-voile-nuit: rgba(20, 28, 34, .72); --ts8r-liseret-nuit: 1px solid rgba(255, 255, 255, .16); --ts8r-encre-nuit: #ffffff; /* titres */ --ts8r-encre-nuit-douce: #f4f8fb; /* texte courant */ --ts8r-encre-nuit-tenue: #bfd7e1; /* micro-libelles, liens */ /* ---- Rayons ---------------------------------------------------------- */ --ts8r-rayon-carte: 30px; --ts8r-rayon-pilule: 999px; } /* -------------------------------------------------------------------------- LA CARTE — un bloc de texte pose sur un fond anime. -------------------------------------------------------------------------- */ .ts8r-carte { background: var(--ts8r-voile); -webkit-backdrop-filter: var(--ts8r-flou); backdrop-filter: var(--ts8r-flou); border: 0; border-radius: var(--ts8r-rayon-carte); box-shadow: var(--ts8r-ombre); padding: 28px 30px; color: var(--ts8r-encre); } .ts8r-carte p { color: var(--ts8r-encre-douce); } /* La meme carte, posee sur une photographie : on assombrit au lieu d'eclaircir. */ .ts8r-carte--nuit { background: var(--ts8r-voile-nuit); -webkit-backdrop-filter: var(--ts8r-flou); backdrop-filter: var(--ts8r-flou); border: var(--ts8r-liseret-nuit); border-radius: var(--ts8r-rayon-carte); box-shadow: var(--ts8r-ombre); color: var(--ts8r-encre-nuit); } .ts8r-carte--nuit p { color: var(--ts8r-encre-nuit-douce); } /* -------------------------------------------------------------------------- LE BOUTON — une pilule. Pleine pour l'action principale, en verre sinon. -------------------------------------------------------------------------- */ .ts8r-btn { font: inherit; font-weight: 600; color: #141210; background: rgba(255, 255, 255, .92); border: 0; border-radius: var(--ts8r-rayon-pilule); padding: 11px 16px; cursor: pointer; box-shadow: 0 2px 12px rgba(0, 0, 0, .25); transition: transform .2s ease; } .ts8r-btn:hover { transform: translateY(-1px); } .ts8r-btn--verre { color: var(--ts8r-encre); background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(10px) saturate(1.45); backdrop-filter: blur(10px) saturate(1.45); border: var(--ts8r-liseret); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 4px 16px -10px rgba(27, 40, 48, .35); } .ts8r-btn--verre:hover { background: rgba(255, 255, 255, .30); } .ts8r-btn:focus-visible, .ts8r-btn--verre:focus-visible { outline: 2px solid var(--ts8r-accent); outline-offset: 3px; } /* -------------------------------------------------------------------------- LE VOILE SEUL — quand on veut juste rendre un texte lisible, sans carte. -------------------------------------------------------------------------- */ .ts8r-voile { background: var(--ts8r-voile); -webkit-backdrop-filter: var(--ts8r-flou); backdrop-filter: var(--ts8r-flou); } /* ========================================================================== MISE AU PLANCHER — corrections apportees aux pages -------------------------------------------------------------------------- Chaque page est arrivee avec ses propres valeurs de gris. Ici on remonte celles qui passaient sous le plancher de lisibilite. On ne touche a rien d'autre : ni la mise en page, ni les animations. ========================================================================== */ /* --- Page 2 (cerveau) — micro-libelles du chrome --------------------------- Le gabarit descendait jusqu'a 30 % d'encre, soit 1.6:1 sur la porcelaine : illisible. Tout ce qui etait sous 65 % remonte au plancher, la hierarchie est conservee (le chrome reste plus clair que le texte). */ .text-brain-sky\/30, .text-brain-sky\/35, .text-brain-sky\/40, .text-brain-sky\/45, .text-brain-sky\/50, .text-brain-sky\/55, .text-brain-sky\/60 { color: var(--ts8r-encre-tenue); } /* Texte courant de la page 2 : remonte au niveau « encre douce ». */ .text-brain-sky\/65, .text-brain-sky\/70, .text-brain-sky\/75 { color: var(--ts8r-encre-douce); } /* --- Page 4 (projets) — halo du chargeur ----------------------------------- Le gabarit posait un halo bronze (#a86a3f) sous le logo de chargement. Pas de dore sur la marque : on repasse en petrole. */ :root { --loader-glow: #1f5f6b8c; /* halo sous le logo de chargement */ --nav-cta: #1f5f6b; /* jeton encore inutilise, mais bronze a l'origine */ } /* --- Page 5 (bureau) — texte de la carte ----------------------------------- La carte « Parlons de votre projet » utilisait #5f7078 (3.4:1) pour du texte courant. On l'aligne sur l'encre douce. */ .reviews p { color: var(--ts8r-encre-douce); }