/** * /tools/cpc/cpc-intro.css * * Animation d'intro CPC (ecran de chargement) : le C, le P puis le C * partent du centre du logo, grossissent doucement jusqu'a leur taille * finale, la phrase "Creative Production Control" apparait en fondu, * puis logo + phrase disparaissent ensemble en fondu. Boucle en continu * tant que la section reste affichee. * * Fichier lie dans le de cpc_fr.php et cpc_en.php : * * * Le HTML correspondant vit dans cpc-intro.php (inclus dans * #screen-loading), pour ne pas dupliquer les tracés SVG dans les deux * pages de langue. * * Toutes les classes et animations sont prefixees "cpc-intro" pour * eviter tout conflit avec le reste de style.css. */ .cpc-intro { display: flex; justify-content: center; padding: 40px 0; } .cpc-intro-card { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 220px; background: #0B0D10; border-radius: 16px; padding: 34px 26px; } .cpc-intro-stage { position: relative; width: 100%; } .cpc-intro-stage svg { width: 100%; height: auto; display: block; overflow: visible; shape-rendering: geometricPrecision; } .cpc-intro-subtitle { margin: 0; width: 100%; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 9.6px; font-weight: 500; letter-spacing: 1px; color: rgba(255, 255, 255, .7); text-transform: uppercase; text-align: center; opacity: 0; animation: cpcTextIn 5s cubic-bezier(.33, 1, .4, 1) infinite; white-space: nowrap; } @keyframes cpcTextIn { 0%, 34% { opacity: 0; } 39% { opacity: 1; } 60% { opacity: 1; } 78%,100% { opacity: 0; } } .cpc-intro-letter { transform-box: fill-box; transform-origin: center; will-change: transform, opacity; } .cpc-intro-c-left { fill: #ffffff; animation: cpcLeftIn 5s cubic-bezier(.33, 1, .4, 1) infinite; } .cpc-intro-p-mid { fill: #2196f3; animation: cpcMidIn 5s cubic-bezier(.33, 1, .4, 1) infinite; } .cpc-intro-c-right { fill: #ffffff; animation: cpcRightIn 5s cubic-bezier(.33, 1, .4, 1) infinite; } /* Toutes les lettres partent du centre du logo (le milieu du P), grossissent et glissent doucement vers leur place finale, restent affichees le temps de la lecture, puis disparaissent en fondu en meme temps que la phrase. */ @keyframes cpcLeftIn { 0% { transform: translate(212px,-1px) scale(.06); opacity:0; } 5.3% { opacity:0; } 9.3% { opacity:1; } 20% { transform: translate(0,0) scale(1); opacity:1; } 60% { transform: translate(0,0) scale(1); opacity:1; } 78% { transform: translate(0,0) scale(1); opacity:0; } 100% { transform: translate(0,0) scale(1); opacity:0; } } @keyframes cpcMidIn { 0% { transform: translate(2px,0) scale(.06); opacity:0; } 13.3% { opacity:0; } 17.3% { opacity:1; } 28% { transform: translate(0,0) scale(1); opacity:1; } 60% { transform: translate(0,0) scale(1); opacity:1; } 78% { transform: translate(0,0) scale(1); opacity:0; } 100% { transform: translate(0,0) scale(1); opacity:0; } } @keyframes cpcRightIn { 0% { transform: translate(-211px,1px) scale(.06); opacity:0; } 21.3% { opacity:0; } 25.3% { opacity:1; } 36% { transform: translate(0,0) scale(1); opacity:1; } 60% { transform: translate(0,0) scale(1); opacity:1; } 78% { transform: translate(0,0) scale(1); opacity:0; } 100% { transform: translate(0,0) scale(1); opacity:0; } } .cpc-intro-glow { animation: cpcGlowBreathe 5s ease-in-out infinite; } @keyframes cpcGlowBreathe { 0%, 36% { filter: drop-shadow(0 0 0px rgba(33,150,243,0)); } 40% { filter: drop-shadow(0 0 14px rgba(33,150,243,.55)); } 60% { filter: drop-shadow(0 0 4px rgba(33,150,243,.2)); } 78%,100% { filter: drop-shadow(0 0 0px rgba(33,150,243,0)); } } /* ============================================================ Variante "page complete" : intro plein ecran type generique de film (fond noir, logo au milieu, plus petit), jouee une seule fois. Utilisee par index.php, qui redirige ensuite en JS vers la page CPC (fr/en) une fois l'animation terminee. ============================================================ */ body.cpc-intro-fullpage { margin: 0; height: 100vh; background: #000000; display: flex; align-items: center; justify-content: center; overflow: hidden; } body.cpc-intro-fullpage .cpc-intro { padding: 0; } body.cpc-intro-fullpage .cpc-intro-card { background: transparent; padding: 0; max-width: 170px; } body.cpc-intro-fullpage .cpc-intro-c-left, body.cpc-intro-fullpage .cpc-intro-p-mid, body.cpc-intro-fullpage .cpc-intro-c-right, body.cpc-intro-fullpage .cpc-intro-subtitle { animation-iteration-count: 1; animation-fill-mode: forwards; }