/** * C2S — Header CSS (Twostep Scaling Navigation) * * Basé sur le composant Osmo Twostep Nav. * Utilise les variables du design system (global.css). */ /* ============================================ Base structure ============================================ */ .twostep-nav { z-index: var(--z-header); pointer-events: none; position: fixed; inset: 0; } .twostep-nav__bg { z-index: 0; opacity: 0; pointer-events: auto; visibility: hidden; background-color: var(--color-overlay); width: 100%; height: 100%; position: absolute; inset: 0% auto auto 0%; } .twostep-nav__wrap { justify-content: center; align-items: stretch; width: 100%; display: flex; position: absolute; top: 0; left: 0; } .twostep-nav__width { --_col: calc((var(--size-container) - 19.5em) / 12); flex-flow: column; flex: none; justify-content: flex-start; align-items: flex-start; padding-top: 0; margin-top: calc((var(--_col) - 45px) / 2); display: flex; } /* ============================================ Header row — nav bar | logo (center) | links ============================================ */ .twostep-nav__header-row { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; position: relative; } /* ============================================ Nav bar (2 cols fermé → 6 cols ouvert) ============================================ */ .twostep-nav__bar { pointer-events: auto; color: var(--color-heading); width: 100%; max-width: 13.25em; position: relative; } .twostep-nav__back { z-index: 0; position: absolute; inset: 0%; } .twostep-nav__top { z-index: 1; justify-content: space-between; align-items: center; width: 100%; height: 45px; padding: 0.5em 1em; display: flex; position: relative; background: var(--white); } .twostep-nav__bottom { grid-template-rows: 0fr; width: 100%; display: grid; position: relative; overflow: hidden; } /* ============================================ Menu label (remplace le logo dans la bar) ============================================ */ .twostep-nav__menu-label { font-size: var(--16px-size); font-weight: 500; line-height: 1; color: var(--color-heading); white-space: nowrap; } /* ============================================ Logo (centré sur la page, hors de la bar) ============================================ */ .twostep-nav__logo { position: absolute; left: 50%; transform: translateX(-50%); top: 0; height: 45px; display: flex; align-items: center; justify-content: center; text-decoration: none; pointer-events: auto; } .twostep-nav__logo-img { height: auto; max-height: 40px; width: auto; max-width: 12em; display: block; object-fit: contain; margin-top: -1px; /* Pas de transition `filter` au tout premier paint : sinon, sur les pages dark (single article), on voit le logo passer de NOIR à BLANC au load alors que SSR a déjà posé `is--dark`. La transition est réactivée par JS après le 1er rendu via `data-theme-init="ready"` sur . */ } [data-theme-init="ready"] .twostep-nav__logo-img { transition: filter var(--duration-base) var(--ease-in-out); } /* ============================================ Header — variant DARK Activé via JS (header-theme.js) quand le header chevauche une section marquée `data-header-theme="dark"`. Le logo PNG (noir) est inversé en blanc via filter, et le sélecteur de langue passe en blanc. ============================================ */ #c2s-header.is--dark .twostep-nav__logo-img { filter: brightness(0) invert(1); } #c2s-header.is--dark .twostep-nav__lang-item { color: var(--white); opacity: 0.5; } #c2s-header.is--dark .twostep-nav__lang-item.is--active, #c2s-header.is--dark .twostep-nav__lang-item:hover { color: var(--white); opacity: 1; } #c2s-header.is--dark .twostep-nav__lang-sep { color: var(--white); opacity: 0.4; } /* Quand le menu burger est ouvert, on revient toujours au thème clair : la bar est sur fond blanc, peu importe la section sous le header. */ #c2s-header.is--dark[data-nav-status="active"] .twostep-nav__logo-img { filter: none; } #c2s-header.is--dark[data-nav-status="active"] .twostep-nav__lang-item, #c2s-header.is--dark[data-nav-status="active"] .twostep-nav__lang-sep { color: var(--color-heading); } .twostep-nav__logo-svg { height: 100%; } /* ============================================ Header links (droite) ============================================ */ .twostep-nav__header-links { pointer-events: auto; display: flex; align-items: center; gap: var(--space-6); height: 45px; } .twostep-nav__header-links .c2s-btn--header { --c2s-btn-height: 45px; } /* ============================================ Background ============================================ */ .twostep-nav__back-bg { background-color: var(--color-bg-alt); border-radius: .5em; width: 100%; height: 100%; position: absolute; inset: 0%; } /* ============================================ Toggle button (hamburger) ============================================ */ .twostep-nav__toggle { pointer-events: auto; cursor: pointer; background-color: transparent; border: none; justify-content: center; align-items: center; width: 1.5em; height: 1.5em; padding: 0; display: flex; position: relative; } .twostep-nav__toggle-bar { background-color: var(--color-heading); width: 1.25em; height: .1em; position: absolute; } /* ============================================ Bottom panel (menu content) ============================================ */ .twostep-nav__bottom-overflow { flex-flow: column; justify-content: flex-start; align-items: center; height: 100%; display: flex; position: relative; overflow: hidden; } .twostep-nav__bottom-inner { flex-flow: column; justify-content: flex-start; align-items: center; width: 100%; padding: var(--space-6); display: flex; position: relative; } .twostep-nav__bottom-row { justify-content: flex-start; align-items: flex-start; width: 100%; display: flex; } .twostep-nav__bottom-col { flex: 1; min-height: 100%; display: flex; } .twostep-nav__bottom-col.is--visual { flex: 0 0 calc(100% + var(--space-6) - 2 * var(--col) - 3em); } /* ============================================ Nav links ============================================ */ .twostep-nav__ul { flex-flow: column; justify-content: flex-start; align-items: stretch; width: 100%; margin-bottom: 0; padding-left: 0; list-style: none; display: flex; } .twostep-nav__ul.is--small { column-gap: var(--space-4); row-gap: var(--space-1); flex-flow: wrap; justify-content: flex-start; align-items: flex-start; } .twostep-nav__link { color: inherit; width: 100%; padding-top: .375em; padding-bottom: .375em; text-decoration: none; position: relative; display: block; } .twostep-nav__link-span { letter-spacing: -.04em; font-size: var(--34px-size); font-weight: 500; line-height: 1; } .twostep-nav__link-eyebrow { opacity: .7; letter-spacing: -.02em; font-size: var(--16px-size); font-weight: 400; line-height: 1; } .twostep-nav__info { gap: var(--space-8); flex-flow: column; justify-content: space-between; align-items: flex-start; width: 100%; display: flex; } /* ============================================ Visual (image/placeholder) ============================================ */ .twostep-nav__visual { aspect-ratio: 1; border-radius: .375em; width: 100%; overflow: hidden; } .twostep-nav__visual-img { object-fit: cover; width: 100%; height: 100%; } .twostep-nav__visual-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); color: var(--white); font-size: var(--40px-size); font-weight: 700; letter-spacing: -0.04em; } /* ============================================ Top line separator ============================================ */ .twostep-nav__top-line { z-index: 2; background-color: var(--color-separator); height: 1px; position: absolute; bottom: 0; left: .5em; right: .5em; } @media screen and (max-width: 767px) { .twostep-nav__bottom-col.is--visual { display: none; } .twostep-nav__top-line { bottom: -.5em; left: 1em; right: 1em; } } /* ============================================ Rounded-div curve (Dennis Snellenberg technique) Bottom leading edge for the dropdown expansion. GSAP drives height 0→peak→0. Invisible at rest. ============================================ */ .twostep-nav__curve { position: absolute; bottom: 0; left: -0.25em; right: -0.25em; height: 0; overflow: hidden; transform: translateY(100%); pointer-events: none; z-index: 1; visibility: hidden; } .twostep-nav__curve-circle { position: absolute; width: 150%; height: 750%; left: 50%; border-radius: 50%; transform: translate(-50%, -86.666%); background-color: var(--color-bg-alt); opacity: 1; } /* ============================================ CSS Animations (Twostep transitions) ============================================ */ [data-twostep-nav] { --cubic-default: cubic-bezier(0.625, 0.05, 0, 1); --duration-nav: 0.5s; --duration-nav-long: 0.75s; --duration-nav-half: 0.25s; --animation-nav: var(--duration-nav) var(--cubic-default); --animation-nav-long: var(--duration-nav-long) var(--cubic-default); --animation-nav-half: var(--duration-nav-half) var(--cubic-default); } /* Toggle bars animation */ .twostep-nav__toggle-bar { transition: transform var(--animation-nav); 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-nav), visibility var(--animation-nav); } [data-nav-status="active"] .twostep-nav__bg { opacity: 1; visibility: visible; } /* Inner bar grow (2 cols → 6 cols) */ .twostep-nav__bar { transition: max-width var(--animation-nav-long) 0.2s; } [data-nav-status="active"] .twostep-nav__bar { transition: max-width var(--animation-nav) 0s; max-width: 35.1em; } /* Thin line in nav bar */ .twostep-nav__top-line { transition: all var(--animation-nav) 0s; opacity: 0; } [data-nav-status="active"] .twostep-nav__top-line { transition: all var(--animation-nav) 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-nav) 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(--duration-fast) var(--ease-in-out); } .twostep-nav__back { transition: all var(--animation-nav); 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 panel */ .twostep-nav__bottom { transition: grid-template-rows var(--animation-nav) 0s; } [data-nav-status="active"] .twostep-nav__bottom { transition: grid-template-rows var(--animation-nav-long) 0.25s; grid-template-rows: 1fr; } @media screen and (max-width: 767px) { .twostep-nav__bottom { transition: grid-template-rows var(--animation-nav) 0s, transform var(--animation-nav) 0s; transform: translateY(-0.625em); } [data-nav-status="active"] .twostep-nav__bottom { transition: grid-template-rows var(--animation-nav-long) 0.25s, transform var(--animation-nav) 0.25s; transform: translateY(0em); } } /* Nav columns reveal */ .twostep-nav__bottom-row>* { transition: all var(--animation-nav) 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-nav-long) 0.5s; transform: translateY(0em); opacity: 1; } [data-nav-status="active"] .twostep-nav__bottom-row>*:nth-child(2) { transition-delay: 0.575s; } /* ============================================ Language switcher ============================================ */ .twostep-nav__lang { display: flex; align-items: center; gap: var(--space-2); font-size: var(--16px-size); font-weight: 500; line-height: 1; } .twostep-nav__lang-item { text-decoration: none; color: var(--darklighter); opacity: 0.4; /* Pas de transition au 1er paint pour éviter le flash NOIR → BLANC sur les pages dark (cf. .twostep-nav__logo-img). Réactivée après init JS via [data-theme-init="ready"]. */ } [data-theme-init="ready"] .twostep-nav__lang-item { transition: color var(--duration-fast) var(--ease-in-out), opacity var(--duration-fast) var(--ease-in-out); } .twostep-nav__lang-item.is--active { color: var(--color-heading); opacity: 1; } .twostep-nav__lang-item:hover { color: var(--color-heading); opacity: 1; } .twostep-nav__lang-sep { color: var(--darklighter); opacity: 0.4; } .twostep-nav__lang-item [data-button-animate-chars] { overflow: hidden; position: relative; display: inline-block; } .twostep-nav__lang-item [data-button-animate-chars] span { display: inline-block; position: relative; text-shadow: 0px 1.3em currentColor; transform: translateY(0em) rotate(0.001deg); transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1); } @media (hover: hover) and (pointer: fine) { .twostep-nav__lang-item:hover [data-button-animate-chars] span { transform: translateY(-1.3em) rotate(0.001deg); } } /* ============================================ Nav link character stagger (même système que bouton-min) ============================================ */ .twostep-nav__link [data-button-animate-chars] { overflow: hidden; position: relative; display: inline-block; } .twostep-nav__link [data-button-animate-chars] span { display: inline-block; position: relative; text-shadow: 0px 1.3em currentColor; transform: translateY(0em) rotate(0.001deg); transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1); } /* Fix bug "Consultant SEO" qui se dédouble en taille laptop (≥992px) : initButtonCharacterStagger() transforme chaque caractère en , donc le wrapper peut wrapper ENTRE 2 caractères au redimensionnement de la fenêtre (notamment quand le placeholder C2S pousse la colonne des liens). Or chaque porte un text-shadow 0 1.3em currentColor (le « clone fantôme » utilisé par l'anim de hover translateY(-1.3em)). Quand "Consultant SE" tient ligne 1 et "O" tombe ligne 2, le text-shadow des chars de la ligne 1 apparaît 1.3em plus bas, soit pile sur la ligne 2 → on lit "onsultant SE" en doublon. Solution : interdire le wrap du wrapper, comme c'est déjà fait pour .c2s-btn__label. L'overflow:hidden existant clippe le débordement si jamais le texte ne tenait pas (jamais en pratique, le menu est dimensionné pour les libellés FR/EN les plus longs). Desktop only — sur ≤991px le menu est sur sa propre grille verticale et le bug n'apparaît pas. */ @media screen and (min-width: 992px) { .twostep-nav__link [data-button-animate-chars], .twostep-nav__lang-item [data-button-animate-chars] { white-space: nowrap; } } @media (hover: hover) and (pointer: fine) { .twostep-nav__link:hover [data-button-animate-chars] span { transform: translateY(-1.3em) rotate(0.001deg); } } /* Sur mobile/tactile (pas de :hover réel), l'animation translateY ne joue jamais, donc le text-shadow 1.3em sert juste à dupliquer le texte sous chaque lien → liens superposés et illisibles dans le menu hamburger. On utilise plusieurs queries équivalentes pour couvrir tous les cas (anciens browsers, devices hybrides, simulateurs DevTools…). */ @media (hover: none), (pointer: coarse), not all and (hover: hover), screen and (max-width: 991px) { .twostep-nav__link [data-button-animate-chars] span, .twostep-nav__lang-item [data-button-animate-chars] span, [data-twostep-nav] [data-button-animate-chars] span { text-shadow: none !important; } } /* ============================================ Responsive ============================================ */ @media screen and (max-width: 991px) { .twostep-nav__header-links { gap: var(--space-4); } /* Décale tout le wrap nav sous la safe-area du device + gap visuel, pour que la barre fixed ne mange pas le hero des pages dark. */ .twostep-nav__wrap { margin-top: 42px; } /* Liens menu mobile/tablette : on descend de --34px-size fixe vers --display-xs (1.75em, scalé Osmo). Palier le plus fin du DS, reste lisible et imposant (~26-33px selon viewport) sans encombrer le panel mobile. */ .twostep-nav__link-span { font-size: var(--display-xs); } /* Mobile/tablette — barre nav callée pile sur la grille visuelle du grid-overlay (Shift+G). Tablette = 6 cols, gap 1.5em. Formule générique : N cols visuelles + (N-1) gaps, avec le grid actif sur 100% du parent (- gaps internes). Fermée = 2/6 cols + 1 gap. Ouverte = 3/6 cols + 2 gaps. */ .twostep-nav__bar { max-width: calc((100% - 5 * 1.5em) / 3 + 1.5em); } [data-nav-status="active"] .twostep-nav__bar { max-width: calc((100% - 5 * 1.5em) / 2 + 3em); } /* Contrairement au desktop (back qui « grossit » avec inset:-0.25em), sur mobile on garde la barre à sa taille initiale (carrée, non gonflée) à l'ouverture. Override l'inset:-1.25em défini plus haut au 767. */ [data-nav-status="active"] .twostep-nav__back { inset: 0; } } @media screen and (max-width: 767px) { /* Mobile portrait — grid-overlay = 4 cols, gap 1.5em. Fermée = 2/4 cols + 1 gap = exactement la moitié de la grille visible. Ouverte = 3/4 cols + 2 gaps = 3 cols visuelles pile poil. */ .twostep-nav__bar { max-width: calc((100% - 3 * 1.5em) / 2 + 1.5em); } [data-nav-status="active"] .twostep-nav__bar { max-width: calc((100% - 3 * 1.5em) * 3 / 4 + 3em); } } @media screen and (max-width: 767px) { .twostep-nav__header-links { display: none; } .twostep-nav__logo { position: static; transform: none; height: 45px; } .twostep-nav__header-row { justify-content: space-between; } }