/* Theme Name: Jeanne Child Theme URI: https://tavaresgomes.com Description: Thème enfant du thème Jeanne (UXBARN) — reprend la signature graphique du thème Tumblr tavaresgomes.com : style épuré, fondu d'entrée, menu fin et espacé, titre flottant, révélation fluide des photos. Author: seba Template: jeanne Version: 1.1.0 Text Domain: jeanne-child */ /* ========================================================================== 1. Fondu d'entrée global (1,4s) — signature reprise du thème Tumblr ========================================================================== */ /* Le conteneur principal démarre invisible... */ #root-container { opacity: 0; } /* ...puis apparaît en fondu dès que jeanne-child.js ajoute la classe "jeanne-loaded" sur le , une fois le DOM prêt. */ body.jeanne-loaded #root-container { opacity: 1; transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1); } /* Si JavaScript est désactivé, on ne bloque jamais l'affichage du site. */ .no-js #root-container { opacity: 1; } /* ========================================================================== 2. Menu principal — lettres plus fines, plus espacées Ne touche QUE le menu du header (.site-menu), rien d'autre. ========================================================================== */ .site-menu .menu-style > li > a { font-weight: 400; letter-spacing: 2.4px; font-size: 11px; } .site-menu .sub-menu a, .site-menu .children a { letter-spacing: 1.2px; } /* ========================================================================== 3. Titre du site — effet flottant à l'arrivée sur la page Le titre monte doucement en place en même temps que le fondu général, puis se met à flotter très légèrement, en continu, une fois installé. ========================================================================== */ .site-title-heading, .logo-tagline-wrapper .site-title { display: inline-block; opacity: 0; transform: translateY(16px); will-change: transform, opacity; } body.jeanne-loaded .site-title-heading, body.jeanne-loaded .logo-tagline-wrapper .site-title { animation: jeanne-title-rise 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards, jeanne-title-float 7s ease-in-out 2.2s infinite; } @keyframes jeanne-title-rise { to { opacity: 1; transform: translateY(0); } } @keyframes jeanne-title-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* Les visiteurs qui préfèrent moins de mouvement gardent un simple fondu. */ @media (prefers-reduced-motion: reduce) { .site-title-heading, .logo-tagline-wrapper .site-title { transform: none; } body.jeanne-loaded .site-title-heading, body.jeanne-loaded .logo-tagline-wrapper .site-title { animation: none; opacity: 1; } } /* ========================================================================== 4. Révélation fluide des photos au défilement Fondu + léger déplacement vers le haut, très sobre, déclenché par jeanne-child.js (IntersectionObserver) quand chaque image entre à l'écran. ========================================================================== */ .jeanne-reveal-img { opacity: 0; transform: translateY(28px); transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; } .jeanne-reveal-img.jeanne-revealed { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .jeanne-reveal-img { opacity: 1; transform: none; transition: none; } } /* ========================================================================== 5. Personnalisations du site (police, séparateurs, filtres de catégories) ========================================================================== */ .site-title-heading a, .site-title { font-family: 'centurygothic' !important; } .portfolio-category-wrapper, .active-portfolio-category-title, .portfolio-category-wrapper a { font-family: 'centurygothic' !important; } .vc_separator.vc_sep_color_grey .vc_sep_line { border: 0; text-align: center; width: 89%; height: 0.5px; margin: auto; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); } .portfolio-categories a { display: none; } hr { border: 0; text-align: center; width: 89%; height: 0.5px; margin: auto; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); } @media only screen and (max-width: 767px) { .portfolio-categories li { display: none; } } /* ========================================================================== Ajoute ici tes autres ajustements de style (child theme = zone de travail sûre, jamais écrasée par une mise à jour du thème parent Jeanne). ========================================================================== */