Ajoute le style des bandeaux de logos sur la home (outils / partenaires)
Complète la fonctionnalité logo_banners (déjà en place côté PHP/BDD) : bandeau défilant en boucle infinie avec bords en dégradé, logos en niveaux de gris qui reprennent leur couleur au survol, sens de défilement inversé entre les deux bandeaux, et grille dédiée dans le panel admin. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Esteban
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
97caf2275c
commit
87cc4e5e9c
@@ -1293,6 +1293,179 @@ img {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ---- BANDEAUX DE LOGOS (page d'accueil) : "Outils" et "Ils m'ont fait confiance" ---- */
|
||||||
|
|
||||||
|
.logo-banner-section {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 60px auto;
|
||||||
|
padding: 0 clamp(20px, 4vw, 40px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-banner-header {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-banner-header h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: clamp(24px, 3.5vw, 34px);
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fenêtre de défilement : masque les bords en dégradé pour un effet "infini" propre */
|
||||||
|
.logo-marquee {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
|
||||||
|
mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ligne de logos animée : contient la liste dupliquée deux fois (voir listLogos.php),
|
||||||
|
la translation de -50% boucle donc exactement sur la deuxième copie => scroll infini */
|
||||||
|
.logo-track {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
width: max-content;
|
||||||
|
animation: logoScroll 32s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-marquee-reverse .logo-track {
|
||||||
|
animation-direction: reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-marquee:hover .logo-track {
|
||||||
|
animation-play-state: paused;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes logoScroll {
|
||||||
|
from {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-tile {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 160px;
|
||||||
|
height: 90px;
|
||||||
|
padding: 18px 24px;
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.logo-tile:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
border-color: var(--accent-border);
|
||||||
|
background: var(--surface-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-tile img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
filter: grayscale(1) opacity(0.6);
|
||||||
|
transition: filter 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-tile:hover img {
|
||||||
|
filter: grayscale(0) opacity(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sur mobile le survol n'existe pas : on affiche les logos en couleur directement */
|
||||||
|
@media (hover: none) {
|
||||||
|
.logo-tile img {
|
||||||
|
filter: grayscale(0) opacity(0.85);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 620px) {
|
||||||
|
.logo-tile {
|
||||||
|
width: 130px;
|
||||||
|
height: 74px;
|
||||||
|
padding: 14px 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.logo-track {
|
||||||
|
animation: none;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-marquee {
|
||||||
|
-webkit-mask-image: none;
|
||||||
|
mask-image: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Panel admin : grille des logos ---- */
|
||||||
|
.logo-admin-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||||
|
gap: 18px;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 8px clamp(16px, 4vw, 40px) 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-admin-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-admin-preview {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 90px;
|
||||||
|
padding: 16px;
|
||||||
|
background: var(--surface-2);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-admin-preview img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-admin-info {
|
||||||
|
padding: 14px 16px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-admin-info .tag {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-admin-info p {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 14.5px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-admin-item .admin-actions {
|
||||||
|
padding: 12px 16px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
/* ---- PAGE COMPÉTENCES ---- */
|
/* ---- PAGE COMPÉTENCES ---- */
|
||||||
.skills-section {
|
.skills-section {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
|
|||||||
Reference in New Issue
Block a user