/* ========================================================================== MENU DESKTOP OUVRANT / FERMANT A GAUCHE (>= 960px) -------------------------------------------------------------------------- Le theme affiche normalement la sidebar #header-wrapper en permanence sur desktop (>=960px). Ce fichier la transforme en panneau qui se cache par defaut et coulisse depuis la gauche via un bouton hamburger, comme sur les maquettes. En dessous de 960px, rien ne change cote comportement : le menu mobile existant (accordeon, cf. js/common.js) continue de fonctionner normalement. Charger ce fichier APRES tous les autres CSS du theme. L'etat ouvert/ferme (desktop) est memorise (localStorage) et restitue d'une page a l'autre. La classe "desktop-nav-open" est posee sur (et non ) car un petit script inline dans le de chaque page (cf. README-menu-desktop.txt) l'applique avant meme le premier rendu, pour eviter tout flash "ferme -> ouvert" au chargement. Layout "push" (desktop uniquement) : #content-wrapper et #footer-wrapper se decalent de la largeur du panneau (variable --desktop-sidebar-width, differente selon le palier desktop) au lieu de rester sous un panneau qui les recouvre. Le slider plein ecran de la page d'accueil (.epic-slider.fullscreen) est en position:fixed sur tout le viewport : il n'est pas concerne par ce decalage et reste intentionnellement plein cadre, comme sur la maquette. js/desktop-menu-toggle.js redeclenche un evenement "resize" une fois la transition terminee, pour que les scripts qui calculent une largeur en JS (bandeau defilant, slider, soulignes du menu, etc.) se remettent a jour. ========================================================================== */ /* -------------------------------------------------------------------------- ICONE HAMBURGER / CROIX EN CSS PUR (mobile, tablette ET desktop) -------------------------------------------------------------------------- Remplace le sprite bitmap images/ui/mobileMenu-toggle.png par 3 barres (spans .pl-menu-bar-top/-mid/-bottom, injectees en JS par js/desktop-menu-toggle.js dans le bouton desktop ET dans l'ancre .mobile-menu-toggle a existante) qui morphent en croix avec une transition fluide, au lieu du saut instantane du sprite. Le blanc + mix-blend-mode:difference garde l'icone lisible sur n'importe quel fond (hero sombre, panneau clair, header mobile...) sans avoir a gerer une couleur differente par etat ou par page. -------------------------------------------------------------------------- */ .desktop-menu-toggle-btn, .mobile-menu-toggle a { position: relative; background: none !important; /* neutralise le sprite d'origine (style.css) */ isolation: isolate; /* le bouton entier forme un groupe compose a part */ mix-blend-mode: difference; /* ... puis CE groupe (deja aplati) est inverse sur le fond */ } .pl-menu-bar { position: absolute; left: 50%; top: 50%; width: 27.2px; /* 32px x 85% */ height: 1px; margin-top: -0.5px; background: #fff; transform: translate(-50%, 0); transition: transform .35s cubic-bezier(.65,0,.35,1), opacity .35s ease; } .pl-menu-bar-top { transform: translate(-50%, -8.55px); } /* 10.06px x 85% */ .pl-menu-bar-bottom { transform: translate(-50%, 8.55px); } /* 10.06px x 85% */ /* Icone du bouton DESKTOP uniquement (jamais mobile/tablette, qui garde le style ci-dessus) : lignes plus fines et plus longues, 25% plus grandes au total (24px -> 30px de large, 2px -> 1px d'epaisseur, ecartement 7px -> 8.75px). */ .desktop-menu-toggle-btn .pl-menu-bar { width: 34px; /* 40px x 85% */ height: 1px; margin-top: -0.5px; } .desktop-menu-toggle-btn .pl-menu-bar-top { transform: translate(-50%, -10.69px); } /* 12.58px x 85% */ .desktop-menu-toggle-btn .pl-menu-bar-bottom { transform: translate(-50%, 10.69px); } /* 12.58px x 85% */ /* Etat "ouvert" : desktop -> html.desktop-nav-open, mobile/tablette -> classe "open" posee par js/common.js sur l'ancre elle-meme au clic. */ html.desktop-nav-open .desktop-menu-toggle-btn .pl-menu-bar-top, .mobile-menu-toggle a.open .pl-menu-bar-top { transform: translate(-50%, 0) rotate(45deg); } html.desktop-nav-open .desktop-menu-toggle-btn .pl-menu-bar-mid, .mobile-menu-toggle a.open .pl-menu-bar-mid { opacity: 0; transform: translate(-50%, 0) scaleX(0); } html.desktop-nav-open .desktop-menu-toggle-btn .pl-menu-bar-bottom, .mobile-menu-toggle a.open .pl-menu-bar-bottom { transform: translate(-50%, 0) rotate(-45deg); } /* -------------------------------------------------------------------------- PANNEAU DESKTOP (>= 960px) -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- ICONES DE NAVIGATION PROJET (precedent / grille / suivant) EN CSS PUR -------------------------------------------------------------------------- Remplace les 3 sprites bitmap d'origine (images/ui/projects-direction-nav.png, images/ui/projects-close.png), utilises par les 3 barres de navigation projet (.video-nav-bar, .folio-navigation-top, #folio-navigation), par des icones dessinees en CSS pur (chevrons + grille de points) : meme langage visuel que le bouton hamburger/croix ci-dessus -- traits fins blancs + mix-blend-mode:difference (lisibles sur n'importe quel fond, sombre ou clair, sans gerer de couleur par etat/page), memes transitions douces. S'applique a toutes les largeurs d'ecran (mobile, tablette, desktop), comme les sprites qu'elle remplace. -------------------------------------------------------------------------- */ .video-nav-bar ul li.closeProject a, .video-nav-bar ul li.nextProject a, .video-nav-bar ul li.prevProject a, .folio-navigation-top ul li.closeProject a, .folio-navigation-top ul li.nextProject a, .folio-navigation-top ul li.prevProject a, #folio-navigation ul li#closeProject a, #folio-navigation ul li#nextProject a, #folio-navigation ul li#prevProject a, #folio-navigation ul li#nextProject.disabled, #folio-navigation ul li#prevProject.disabled { background-image: none !important; isolation: isolate; mix-blend-mode: difference; } /* Chevrons (precedent/suivant) : meme epaisseur de trait (1px) que les barres du hamburger, formes via 2 cotes d'un carre pivote -- technique CSS classique du chevron, pas d'image. */ .video-nav-bar ul li.nextProject a::before, .video-nav-bar ul li.prevProject a::before, .folio-navigation-top ul li.nextProject a::before, .folio-navigation-top ul li.prevProject a::before, #folio-navigation ul li#nextProject a::before, #folio-navigation ul li#prevProject a::before, #folio-navigation ul li#nextProject.disabled::before, #folio-navigation ul li#prevProject.disabled::before { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; border-style: solid; border-color: #fff; border-width: 0 1px 1px 0; transition: transform .35s cubic-bezier(.65,0,.35,1); } /* nextProject = fleche GAUCHE (<), prevProject = fleche DROITE (>) -- voir le commentaire HTML "ATTENTION" plus haut sur l'inversion volontaire des noms de classe/id. */ .video-nav-bar ul li.nextProject a::before, .folio-navigation-top ul li.nextProject a::before, #folio-navigation ul li#nextProject a::before, #folio-navigation ul li#nextProject.disabled::before { transform: translate(-50%, -50%) rotate(135deg); } .video-nav-bar ul li.prevProject a::before, .folio-navigation-top ul li.prevProject a::before, #folio-navigation ul li#prevProject a::before, #folio-navigation ul li#prevProject.disabled::before { transform: translate(-50%, -50%) rotate(-45deg); } /* Icone "grille" (retour a la liste des projets) : 3x3 points en CSS pur (1 point + 8 ombres portees), meme logique de traits fins blancs. */ .video-nav-bar ul li.closeProject a::before, .folio-navigation-top ul li.closeProject a::before, #folio-navigation ul li#closeProject a::before { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 2px; background: #fff; transform: translate(-50%, -50%); transition: transform .35s cubic-bezier(.65,0,.35,1); box-shadow: -10.2px -10.2px 0 0 #fff, 0px -10.2px 0 0 #fff, 10.2px -10.2px 0 0 #fff, -10.2px 0px 0 0 #fff, 10.2px 0px 0 0 #fff, -10.2px 10.2px 0 0 #fff, 0px 10.2px 0 0 #fff, 10.2px 10.2px 0 0 #fff; } /* Survol : un leger mouvement (chevrons se decalent dans leur direction, grille se dilate legerement) remplace l'ancien "opacity:0.7" du sprite, coherent avec l'animation du bouton hamburger. */ .video-nav-bar ul li.nextProject a:hover::before, .folio-navigation-top ul li.nextProject a:hover::before, #folio-navigation ul li#nextProject a:hover::before { transform: translate(calc(-50% - 5px), -50%) rotate(135deg); } .video-nav-bar ul li.prevProject a:hover::before, .folio-navigation-top ul li.prevProject a:hover::before, #folio-navigation ul li#prevProject a:hover::before { transform: translate(calc(-50% + 5px), -50%) rotate(-45deg); } .video-nav-bar ul li.closeProject a:hover::before, .folio-navigation-top ul li.closeProject a:hover::before, #folio-navigation ul li#closeProject a:hover::before { transform: translate(-50%, -50%) scale(1.15); } /* Etat desactive (chaine de projets, premier/dernier de la liste) : icone attenuee, pas d'effet de survol. */ #folio-navigation ul li#nextProject.disabled, #folio-navigation ul li#prevProject.disabled { opacity: 0.35; } .desktop-menu-toggle-btn { display: none; } @media only screen and (min-width: 960px) { :root { --desktop-sidebar-width: 250px; /* correspond a la largeur de #header-wrapper a ce palier (style.css) */ } /* Filtres du portfolio (TOUS / CONTENU VIDEO / ACTIVATION / DIGITAL / AI) centres horizontalement, pour correspondre a la grille en dessous plutot que d'etre alignes a gauche (justify-content: flex-start dans le theme d'origine, cf. style.css). Desktop uniquement -- mobile/tablette inchanges. */ .portfolio-filter-wrapper { justify-content: center; } /* Le panneau est cache hors-champ a gauche par defaut */ #header-wrapper { position: fixed !important; transform: translateX(-100%); transition: transform .45s cubic-bezier(.65,0,.35,1); } html.desktop-nav-open #header-wrapper { transform: translateX(0); } /* Contenu decale (et non recouvert) : il "pousse" en meme temps que le panneau coulisse, avec la meme transition. */ #content-wrapper, #footer-wrapper { margin-left: 0 !important; transition: margin-left .45s cubic-bezier(.65,0,.35,1); } html.desktop-nav-open #content-wrapper, html.desktop-nav-open #footer-wrapper { margin-left: var(--desktop-sidebar-width) !important; } /* Bouton hamburger, position fixe a gauche, centre verticalement sur la hauteur de la fenetre (et non plus sous le bandeau defilant). */ .desktop-menu-toggle-btn { display: block; position: fixed; top: 50%; left: 40px; width: 44px; height: 44px; padding: 0; border: none; background: none; cursor: pointer; z-index: 1100; transform: translateY(-50%); transition: left .45s cubic-bezier(.65,0,.35,1); } /* Panneau ouvert : le bouton reste visible (icone deja morphee en croix via les regles .pl-menu-bar-* plus haut) et se decale juste apres le bord du panneau, avec le meme retrait de 40px que le bouton hamburger a l'etat ferme -- meme hauteur (top/transform inchanges), comme sur la maquette. */ html.desktop-nav-open .desktop-menu-toggle-btn { left: calc(var(--desktop-sidebar-width) + 40px); } /* Les pages projet ont jusqu'a 3 barres de navigation precedent/suivant (.video-nav-bar en haut de page pour les projets sans video d'intro, .folio-navigation-top plus bas, #folio-navigation tout en bas). Leur bouton "gauche" (classe/id nextProject, cf. commentaire dans les pages projet) est positionne a 50px du bord reel de la page dans le theme d'origine, qui supposait une sidebar TOUJOURS visible de 250/210px poussant deja le contenu d'autant. Notre sidebar etant desormais masquee par defaut, ce bouton se retrouve a ~50px du bord ecran, en plein sur le bouton menu (40-84px). Formule UNIQUE et generique, valable pour TOUTE largeur >=960px (et pour .video-nav-bar comme #folio-navigation) : le bouton se decale d'une distance fixe --nav-arrow-left par rapport au bord de la barre. Pas de calcul par palier d'ecran : une seule valeur, simple, fiable, identique partout, plutot que plusieurs formules calees sur la largeur de colonne de texte (fragile et difficile a maintenir). Menu ouvert : meme principe avec --nav-arrow-left-open (46px), la barre partant alors du bord du panneau plutot que du bord ecran. */ :root { --nav-arrow-left: 180px; --nav-arrow-left-open: 46px; } .video-nav-bar ul li.nextProject a, #folio-navigation ul li#nextProject a, #folio-navigation ul li#nextProject.disabled { left: var(--nav-arrow-left); } html.desktop-nav-open .video-nav-bar ul li.nextProject a, html.desktop-nav-open #folio-navigation ul li#nextProject a, html.desktop-nav-open #folio-navigation ul li#nextProject.disabled { left: var(--nav-arrow-left-open); } /* Le bouton GRID (closeProject) du theme est centre sur la barre entiere (left:50%), ce qui le centrait AUSSI entre les 2 fleches tant qu'elles etaient symetriques (<-50px du bord droit, prevProject -50px du bord gauche a l'origine). Comme on vient de deplacer nextProject (la fleche gauche) pour degager le bouton menu, sans toucher prevProject (fleche droite, restee a right:50px), le vrai milieu entre les deux fleches n'est plus le milieu de la barre. On recalcule donc GRID au milieu EXACT entre les centres des deux fleches : (nextProject_center + prevProject_center) / 2, avec nextProject_center = nextProject_left + 15px (moitie de sa largeur, 30px) et prevProject_center = largeur_barre - 65px (right:50px, boite 30px) -- d'ou le "-50px" ci-dessous (15 - 65 = -50). Le "left" resultant equivaut directement au centre voulu grace au margin-left:-15px deja pose par le theme (cf. style.css). Largeur de barre = 100vw ferme, (100vw - largeur du panneau) ouvert. */ .video-nav-bar ul li.closeProject a, #folio-navigation ul li.closeProject a, #folio-navigation ul li#closeProject a { left: calc((var(--nav-arrow-left) + 100vw - 50px) / 2); } html.desktop-nav-open .video-nav-bar ul li.closeProject a, html.desktop-nav-open #folio-navigation ul li.closeProject a, html.desktop-nav-open #folio-navigation ul li#closeProject a { left: calc((var(--nav-arrow-left-open) + (100vw - var(--desktop-sidebar-width)) - 50px) / 2); } /* Entre 960px et 1199px, le theme centre #folio-navigation sur la colonne de texte (640/734px, cf. udt_media_queries.css) alors que .video-nav-bar s'etend toujours bord a bord -- ce qui donnait deux barres a des positions differentes. On annule cette contrainte pour que les deux barres partagent toujours la meme largeur/position, a toute largeur d'ecran desktop. */ #folio-navigation { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* .folio-navigation-top (la 3e barre, juste sous le texte d'intro) a sa propre formule d'origine dans le theme pour s'etendre bord a bord depuis l'interieur de section.pages (qui, lui, reste centre). On la neutralise et on la remplace par le "full-bleed trick" CSS classique (left:50% + margin-left:-50vw + width:100vw), qui donne toujours une boite de 0 a 100vw quelle que soit la largeur/position du parent centre -- sans jamais avoir besoin de connaitre sa largeur de colonne. Menu ouvert : meme principe, juste decale de la largeur du panneau (--desktop-sidebar-width) plutot que de 0, pour correspondre a #content-wrapper qui est lui-meme pousse d'autant. */ .folio-navigation-top { position: relative; left: 50%; margin-left: -50vw; width: 100vw; } html.desktop-nav-open .folio-navigation-top { margin-left: calc(var(--desktop-sidebar-width) / 2 - 50vw); width: calc(100vw - var(--desktop-sidebar-width)); } /* Les 3 barres (.video-nav-bar, .folio-navigation-top, #folio-navigation) partagent maintenant exactement les memes coordonnees x pour leurs 3 boutons, a n'importe quelle largeur d'ecran desktop et dans les deux etats du menu. */ .folio-navigation-top ul li.nextProject a { left: var(--nav-arrow-left); } html.desktop-nav-open .folio-navigation-top ul li.nextProject a { left: var(--nav-arrow-left-open); } .folio-navigation-top ul li.closeProject a { left: calc((var(--nav-arrow-left) + 100vw - 50px) / 2); } html.desktop-nav-open .folio-navigation-top ul li.closeProject a { left: calc((var(--nav-arrow-left-open) + (100vw - var(--desktop-sidebar-width)) - 50px) / 2); } } @media only screen and (min-width: 960px) { /* Aligne verticalement la barre precedent/grille/suivant du haut de page (.video-nav-bar, visible uniquement sur les pages projet sans video d'intro) sur le bouton menu : le theme d'origine ne prevoyait pas de bouton menu a cote de cette barre, donc pas besoin de les aligner. Reduit uniquement l'espace au-dessus de la barre (66px a la base) ; l'espace en dessous, vers le titre du projet, ne change pas. */ .portfolio-project:not(.has-video-intro) .video-nav-bar { margin-top: 38px; } } @media only screen and (min-width: 960px) and (max-width: 1199px) { :root { --desktop-sidebar-width: 210px; /* correspond a la largeur de #header-wrapper a ce palier (udt_media_queries.css) */ } }