/* ============================================= Tag One Motorsport — CSS Global (Slater) ⚠️ Ce fichier n'est PAS servi en ligne à date (session 62). Le CSS de la navbar ci-dessous vit dans un <style> inline du composant natif Webflow ; il est conservé ici comme référence locale. NOUVEAU session 62 : le bloc « Liens externes » en fin de fichier, LUI, doit être déployé (voir note de session). ============================================= */ /*Two-step Scaling Navigation*/ [data-twostep-nav]{ --cubic-default: cubic-bezier(0.625, 0.05, 0, 1); --animation-ease: 0.2s ease; --duration-default: 0.5s; --duration-default-long: 0.75s; --duration-default-half: 0.25s; --animation-default: var(--duration-default) var(--cubic-default); --animation-default-long: var(--duration-default-long) var(--cubic-default); --animation-default-half: var(--duration-default-half) var(--cubic-default); } /* Menu button */ .twostep-nav__toggle-bar{ transition: transform var(--animation-default); transform: translateY(-0.25em) rotate(0.001deg); } .twostep-nav__toggle:hover .twostep-nav__toggle-bar { transform: translateY(0.25em) rotate(0.001deg); } .twostep-nav__toggle .twostep-nav__toggle-bar:nth-child(2) { transform: translateY(0.15em) rotate(0.001deg); } .twostep-nav__toggle:hover .twostep-nav__toggle-bar:nth-child(2) { transform: translateY(-0.15em) rotate(0.001deg); } [data-nav-status="active"] .twostep-nav__toggle .twostep-nav__toggle-bar { transform: translateY(0em) rotate(45deg); } [data-nav-status="active"] .twostep-nav__toggle .twostep-nav__toggle-bar:nth-child(2) { transform: translateY(0em) rotate(-45deg); } /* Page dark overlay */ .twostep-nav__bg { transition: opacity var(--animation-default), visibility var(--animation-default); } [data-nav-status="active"] .twostep-nav__bg { opacity: 1; visibility: visible; } /* Inner bar grow */ .twostep-nav__bar { transition: max-width var(--animation-default-long) 0.2s; } [data-nav-status="active"] .twostep-nav__bar { transition: max-width var(--animation-default) 0s; max-width: 100%; } /* Thin line in nav bar */ .twostep-nav__top-line { transition: all var(--animation-default) 0s; opacity: 0; } [data-nav-status="active"] .twostep-nav__top-line { transition: all var(--animation-default) 0.1s; opacity: 1; } @media screen and (max-width: 767px) { .twostep-nav__top-line { inset: auto 1em -0.5em; } [data-nav-status="active"] .twostep-nav__top-line { transition: all var(--animation-default) 0.2s; inset: auto 0em -0.5em; } } /* Nav bar background */ .twostep-nav__bar__bg, [data-nav-status="active"] .twostep-nav__back-bg{ transition: background-color var(--animation-ease); } .twostep-nav__back{ transition: all var(--animation-default); inset: 0em; } [data-nav-status="active"] .twostep-nav__back { inset: -0.25em; } @media screen and (max-width: 767px) { [data-nav-status="active"] .twostep-nav__back { inset: -1.25em; } } /* Nav bottom */ .twostep-nav__bottom { transition: grid-template-rows var(--animation-default) 0s; } [data-nav-status="active"] .twostep-nav__bottom { transition: grid-template-rows var(--animation-default-long) 0.25s; grid-template-rows: 1fr; } @media screen and (max-width: 767px) { .twostep-nav__bottom { transition: grid-template-rows var(--animation-default) 0s, transform var(--animation-default) 0s; transform: translateY(-0.625em); } [data-nav-status="active"] .twostep-nav__bottom { transition: grid-template-rows var(--animation-default-long) 0.25s, transform var(--animation-default) 0.25s; transform: translateY(0em); } } /* Nav columns reveal */ .twostep-nav__bottom-row > * { transition: all var(--animation-default) 0s; transform: translateY(2em); opacity: 0; } .twostep-nav__bottom-row > *:nth-child(2) { transition-delay: 0.075s; } [data-nav-status="active"] .twostep-nav__bottom-row > * { transition: all var(--animation-default-long) 0.5s; transform: translateY(0em); opacity: 1; } [data-nav-status="active"] .twostep-nav__bottom-row > *:nth-child(2) { transition-delay: 0.575s; } /* ============================================= Liens externes — indicateur ↗ (session 62) Posé par initExternalLinks() dans le Global JS, qui ajoute [data-external] sur chaque lien sortant. Pourquoi : un nouvel onglet non annoncé est une faute d'accessibilité reconnue. La flèche est la contrepartie VISUELLE de l'aria-label — elle prévient l'utilisateur voyant, exactement comme l'aria-label prévient le lecteur d'écran. C'est elle qui rend le choix du nouvel onglet défendable. v2 : le glyphe Unicode « ↗ » est REMPLACÉ par l'icône standard « flèche sortant d'un carré » (Bootstrap box-arrow-up-right / Font Awesome external-link-alt), en SVG. Deux raisons : 1. SENS — une flèche nue signifie aussi « vers le haut à droite » (bouton, tendance, lien interne). La flèche qui SORT D'UNE BOÎTE dit spécifiquement « ça quitte le site ». C'est la convention de Wikipédia, Bootstrap, Font Awesome. 2. TAILLE — le glyphe faisait 12,6px sur un texte de 14px, alors que la référence CSS recommande ~11px. Trop lourd, d'autant qu'un caractère de police est plus gras qu'un trait SVG. Le SVG à 0.72em donne 9,06px, stroke 1.8/16. Technique : `mask` + `background-color: currentColor`, et NON `background-image`. C'est ce qui permet à l'icône de prendre la couleur du texte (or #D2B461 ici) sans SVG par contexte. ⚠️ `vertical-align: middle` et NON `baseline` : mesuré en direct sur le libellé en MAJUSCULES, middle centre l'icône à 0,19px du milieu des capitales, baseline à 1,66px. Sur du texte bas-de-casse, baseline redeviendrait le bon choix. ⚠️ `text-bottom` est à proscrire : il fait grandir la ligne de 16,8 à 19px (l'icône dépasse sous la baseline). Tokens relevés en direct sur .t1-part-visit : Saira 14px, uppercase, letter-spacing 2px, or #D2B461. ============================================= */ :root { --t1-ext-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2H2.5A1.5 1.5 0 0 0 1 3.5v10A1.5 1.5 0 0 0 2.5 15h10a1.5 1.5 0 0 0 1.5-1.5V10'/%3E%3Cpath d='M9.5 1.5h5v5M14 2L7 9'/%3E%3C/svg%3E"); } a[data-external]::after { content: ""; display: inline-block; width: 0.72em; height: 0.72em; margin-left: 0.35em; vertical-align: middle; background-color: currentColor; -webkit-mask: var(--t1-ext-icon) center / contain no-repeat; mask: var(--t1-ext-icon) center / contain no-repeat; transition: transform 0.25s cubic-bezier(0.625, 0.05, 0, 1); } /* Léger décollage au survol, dans l'axe de la flèche. */ a[data-external]:hover::after { transform: translate(0.15em, -0.15em); } @media (prefers-reduced-motion: reduce) { a[data-external]::after, a[data-external]:hover::after { transition: none; transform: none; } } /* Exceptions — liens dont le contenu est une IMAGE ou une icône : la flèche n'a pas de sens à côté d'un logo ou d'un pictogramme social, elle casserait le cadrage. Vérifié en direct : icônes sociales du footer (.social-media-icon-wrapper-dark) et logos cliquables. */ a[data-external].social-media-icon-wrapper-dark::after, a[data-external].w-inline-block:not(.twostep-nav__link)::after, a[data-external]:has(> img:only-child)::after, a[data-external]:has(> svg:only-child)::after { content: none; }