/* ========================================================= Sitero — loader.css Trois choses, dans cet ordre : 1. le nouveau logo (sa mise en forme dans la page) 2. l'écran de chargement où le logo se construit 3. la correction du clignotement des textes au chargement À charger dans le JUSTE APRÈS style.css, et AVANT loader.js. Aucune règle de style.css n'est réécrite ici : tout est préfixé « ld- » pour éviter toute collision de nom de classe. ========================================================= */ /* ========================================================= 1. LE LOGO DANS LA PAGE La taille est donnée en « em » : le logo suit donc la taille du texte « Sitero » à côté de lui. Une seule règle sert à la fois l'en-tête (1,12 rem) et le pied de page (1,2 rem), sans toucher à style.css. ========================================================= */ .ld-logo{ display:block;flex:none; width:1.15em;height:1.15em; /* ≈ 20 px dans l'en-tête, 22 px en pied */ overflow:visible; /* le trait ne doit pas être rogné */ fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round;stroke-linejoin:round; } /* L'accent turquoise. Il est en « stroke » (un trait) sur la proposition A et en « fill » (une pastille pleine) sur la proposition B : deux classes séparées, sinon l'une écrase l'autre. */ .ld-logo__a{stroke:var(--tint,#0A8FA8);transition:stroke .4s var(--e,cubic-bezier(.22,.61,.36,1))} .ld-logo__d{fill:var(--tint,#0A8FA8);stroke:none;transition:fill .4s var(--e,cubic-bezier(.22,.61,.36,1))} .logo:hover .ld-logo__a{stroke:var(--tint-h,#0BA6C2)} .logo:hover .ld-logo__d{fill:var(--tint-h,#0BA6C2)} /* Sur fond noir (en-tête inversée au-dessus d'une section sombre) le turquoise « plein » devient sourd : on passe à la version claire. Attention : le pied de page est clair (.sec--paper), il n'est donc PAS concerné — sinon le turquoise clair y deviendrait illisible. Ces règles sont volontairement les DERNIÈRES du bloc pour l'emporter aussi au survol. */ .hdr.on-dark .ld-logo__a,.sec--dark .ld-logo__a{stroke:var(--tint-l,#2ECFE6)} .hdr.on-dark .ld-logo__d,.sec--dark .ld-logo__d{fill:var(--tint-l,#2ECFE6)} /* ========================================================= 2. L'ÉCRAN DE CHARGEMENT POURQUOI DEUX COUCHES (un pseudo-élément + un vrai bloc) ? loader.js s'exécute dans le , à un moment où n'existe pas encore : impossible d'y insérer quoi que ce soit. Il pose donc juste une classe sur , et c'est le CSS ci-dessous qui peint le voile blanc AVANT le tout premier affichage — aucun clignotement possible. Le bloc #ld (le logo animé) est ajouté quelques millisecondes plus tard, dès que existe. S'il n'arrive jamais, il reste un voile blanc propre que le filet de sécurité retire : le site n'est jamais bloqué. ========================================================= */ /* le voile — peint dès la première image, sans JavaScript supplémentaire */ /* Le voile blanc a été supprimé : voir la note dans loader.js. */ /* le bloc qui porte le logo animé */ #ld{ position:fixed;inset:0;z-index:9999; display:grid;place-items:center; background:var(--white,#fff); transition:opacity .5s linear,transform .75s var(--e-out,cubic-bezier(.16,1,.3,1)); } /* le voile se lève : fondu + très léger zoom, comme un rideau qui s'écarte */ #ld.is-off{opacity:0;transform:scale(1.06);pointer-events:none} /* --------------------------------------------------------------- LE MOT QUI PREND FORME Trois temps, sur environ deux secondes : 1. un contour en pointillés gris, comme un tracé de découpe ; 2. les pointillés se resserrent jusqu'au trait plein ; 3. la couleur remplit la lettre et le contour s'efface. Le remplissage est retardé sur chaque temps pour qu'on VOIE les trois étapes ; tout en même temps ne raconterait rien. --------------------------------------------------------------- */ #ld .ld-mk{width:min(340px,64vw);height:auto;overflow:visible} #ld .ld-mk__t{ font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; font-size:62px;font-weight:700;letter-spacing:-.045em; fill:var(--tint,#0090b0); stroke:#c3c3ca;stroke-width:1.1; stroke-dasharray:1.6 5; /* le pointillé de départ */ fill-opacity:0; animation: ld-trait 1.05s cubic-bezier(.4,0,.2,1) .12s both, ld-remplir .85s cubic-bezier(.22,.61,.36,1) 1.02s both, ld-effacer .5s ease .95s both; } /* 2. les pointillés se referment en trait plein */ @keyframes ld-trait{ from{stroke-dasharray:1.6 5;stroke-width:1.1} to {stroke-dasharray:9 0;stroke-width:1.5} } /* 3. la couleur monte dans la lettre */ @keyframes ld-remplir{from{fill-opacity:0}to{fill-opacity:1}} /* et le contour gris s'efface pendant que la couleur arrive */ @keyframes ld-effacer{from{stroke-opacity:1}to{stroke-opacity:0}} /* .h2 est désormais géré par le mécanisme « vu » de style.css. Le laisser ici le rendait impossible à révéler : « html.js .h2 » est plus spécifique que « .h2.vu » et gagnait toujours. */ html.js .op, html.js .mock__frame{opacity:0} /* Filet existant du site : main.js pose « js-off » quand GSAP manque. Ces règles arrivent après les précédentes, elles l'emportent donc et rendent tout de suite le contenu visible. */ html.js-off .op, html.js-off .mock__frame{opacity:1} @media (prefers-reduced-motion:reduce){ .op,.mock__frame{opacity:1!important} }