/* ============================================================ POLARIX — jetons de marque et utilitaires du logo Repris tel quel de l'identité existante : le logo ne change pas. C'est l'élément que la refonte protège le plus. Seule évolution : l'encre au survol passe à l'ambre Polaris, pour que la marque réponde au pointeur avec la même couleur que le reste des états actifs de la page. À charger après tokens.css. Nécessite le sprite de assets/brand/polarix-sprite.html, collé une fois par page, juste après . ============================================================ */ :root { /* --- palette de marque --------------------------------------- Namespacée --px-* pour ne pas entrer en collision avec les jetons de tokens.css. */ --px-void: #060810; /* fond primaire, noir bleuté */ --px-meridian: #0c2050; /* bleu de marque, découpe une couleur*/ --px-azimuth: #2b5aa8; /* facette éclairée sur fond clair */ --px-ice: #9fc6ea; /* facette ombrée sur fond sombre */ --px-platinum: #e9eef4; /* fond clair, artwork inversé */ /* --- colorway par défaut : fond sombre ----------------------- */ --px-facet-lit: #f2f7fc; --px-facet-shade: #6e9bd0; --px-logo-ink: var(--px-platinum); --px-logo-ink-over: var(--polaris); } /* Pour tout panneau clair : poser la classe sur le wrapper ou sur le svg. Bascule les facettes ET l'encre. */ .px-on-pale { --px-facet-lit: #2b5aa8; --px-facet-shade: #0c2050; --px-logo-ink: var(--px-meridian); --px-logo-ink-over: var(--polaris-d); } /* ============================================================ Logo ============================================================ */ .px-logo { display: block; height: auto; max-width: 100%; color: var(--px-logo-ink); flex: none; } /* Rapports déclarés : rien ne se déplace avant le premier rendu. */ .px-logo--lockup-h { aspect-ratio: 776 / 132; } .px-logo--lockup-s { aspect-ratio: 600 / 336; } .px-logo--word { aspect-ratio: 600 / 104; } .px-logo--mark { aspect-ratio: 1 / 1; } .px-logo--x { aspect-ratio: 100 / 104; } /* Tailles minimales de la charte. En dessous, l'artwork casse. */ .px-logo--lockup-h { min-width: 120px; } .px-logo--lockup-s { min-width: 88px; } .px-logo--mark { min-width: 12px; } .px-brand { display: inline-flex; align-items: center; text-decoration: none; color: inherit; } .px-brand .px-logo { width: var(--px-brand-w, 148px); } .px-brand:hover .px-logo, .px-brand:focus-visible .px-logo { color: var(--px-logo-ink-over); } .px-brand:focus-visible { outline: 2px solid var(--polaris); outline-offset: 4px; } @media (prefers-reduced-motion: no-preference) { .px-brand .px-logo { transition: color var(--d-fast) ease; } } /* --- Rotation de l'étoile ---------------------------------------------- Le lockup est composé de deux dans la page plutôt que tiré entier de #pxLockH* : CSS ne sait pas sélectionner à travers l'arbre fantôme qu'un fabrique. Seul le centre de rotation vit ici. L'angle est piloté par assets/js/brand.js, qui doit terminer le tour en cours quand le pointeur s'en va — ce qu'une règle :hover ne sait pas exprimer. Les valeurs sont en unités de viewBox, ce qu'attend transform-box: view-box (la valeur par défaut en SVG). */ .px-logo--lockup-h .px-brand__mark { transform-origin: 66px 66px; } .px-logo--mark .px-brand__mark { transform-origin: 100px 100px; }