feat: refonte UI éditoriale — style Messager + animations boutons
Navbar : - Style éditorial : liens uppercase tracking-wide, underline slide au hover - Bouton "Devis gratuit" avec animation slide-fill - Active state par pathname Page d'accueil : - Hero split : texte gauche (clamp typography) + panneau diagonal brique droit - Services : fond navy-light, cards avec bordure top orange, emoji + arrow animée - Bande CTA : bg-orange full-width, btn-fill-white + btn-outline-light - Réalisations : grid avec overlay slide-from-bottom au hover (rouge brique) - Témoignages : dark navy, cards avec border-top - Zone intervention : split 2 cols, pills uppercase - Partenaires : grid 8 cols, grayscale → couleur au hover - FAQ : split 2 cols, accordion avec icône + rotation - Contact : split dark/light — infos gauche + formulaire droit Globals.css : - Classes .btn, .btn-fill, .btn-outline-dark/light, .btn-fill-white, .btn-arrow - Animation slide-from-left via ::before pseudo-element - .realisation-overlay (slide-up), .hero-diagonal-panel (clip-path) - .nav-link (underline grow), .service-card-dark, .faq-icon ContactForm + Footer : style éditorial squares, uppercase labels https://claude.ai/code/session_01Uec4iHjcPwB1pU41idWEdF
This commit is contained in:
Claude
127
app/globals.css
127
app/globals.css
@@ -358,3 +358,130 @@ html {
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* ================================================
|
||||
BOUTONS — animations premium slide-fill
|
||||
================================================ */
|
||||
.btn {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: transform 0.2s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
.btn:active { transform: scale(0.97) !important; }
|
||||
.btn > span, .btn > svg { position: relative; z-index: 1; }
|
||||
|
||||
/* Primaire rouge brique — slide depuis la gauche */
|
||||
.btn-fill { background: var(--color-orange); color: #fff; }
|
||||
.btn-fill::before {
|
||||
content: ""; position: absolute; inset: 0;
|
||||
background: var(--color-orange-hover);
|
||||
transform: translateX(-101%);
|
||||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 0;
|
||||
}
|
||||
.btn-fill:hover::before { transform: translateX(0); }
|
||||
.btn-fill:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(139, 26, 26, 0.40); }
|
||||
|
||||
/* Outline dark — s'inverse en navy */
|
||||
.btn-outline-dark { background: transparent; color: var(--color-navy); border: 2px solid var(--color-navy); }
|
||||
.btn-outline-dark::before {
|
||||
content: ""; position: absolute; inset: 0;
|
||||
background: var(--color-navy);
|
||||
transform: translateX(-101%);
|
||||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 0;
|
||||
}
|
||||
.btn-outline-dark:hover::before { transform: translateX(0); }
|
||||
.btn-outline-dark:hover { color: #fff; transform: translateY(-2px); }
|
||||
.btn-outline-dark > span, .btn-outline-dark > svg { position: relative; z-index: 1; }
|
||||
|
||||
/* Outline light — pour fonds sombres */
|
||||
.btn-outline-light { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.35); }
|
||||
.btn-outline-light::before {
|
||||
content: ""; position: absolute; inset: 0;
|
||||
background: rgba(255,255,255,0.12);
|
||||
transform: translateX(-101%);
|
||||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 0;
|
||||
}
|
||||
.btn-outline-light:hover::before { transform: translateX(0); }
|
||||
.btn-outline-light:hover { border-color: rgba(255,255,255,0.65); transform: translateY(-2px); }
|
||||
.btn-outline-light > span, .btn-outline-light > svg { position: relative; z-index: 1; }
|
||||
|
||||
/* Fill blanc — pour sections colorées */
|
||||
.btn-fill-white { background: #fff; color: var(--color-navy); }
|
||||
.btn-fill-white::before {
|
||||
content: ""; position: absolute; inset: 0;
|
||||
background: var(--color-bg-muted);
|
||||
transform: translateX(-101%);
|
||||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 0;
|
||||
}
|
||||
.btn-fill-white:hover::before { transform: translateX(0); }
|
||||
.btn-fill-white:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.25); }
|
||||
.btn-fill-white > span, .btn-fill-white > svg { position: relative; z-index: 1; }
|
||||
|
||||
/* Lien-flèche animé */
|
||||
.btn-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; transition: color 0.2s ease; }
|
||||
.btn-arrow .arrow-icon { display: inline-flex; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
|
||||
.btn-arrow:hover .arrow-icon { transform: translateX(7px); }
|
||||
|
||||
/* ================================================
|
||||
NAVBAR — underline animé
|
||||
================================================ */
|
||||
.nav-link { position: relative; }
|
||||
.nav-link::after {
|
||||
content: ""; position: absolute; bottom: -2px; left: 0;
|
||||
width: 0; height: 2px; background: var(--color-orange);
|
||||
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
|
||||
|
||||
/* ================================================
|
||||
RÉALISATION CARD — slide-up overlay
|
||||
================================================ */
|
||||
.realisation-overlay {
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.realisation-card:hover .realisation-overlay { transform: translateY(0); }
|
||||
|
||||
/* ================================================
|
||||
HERO — panneau diagonal brique
|
||||
================================================ */
|
||||
.hero-diagonal-panel {
|
||||
position: absolute; top: 0; right: 0;
|
||||
width: 44%; height: 100%;
|
||||
background: var(--color-orange);
|
||||
clip-path: polygon(14% 0%, 100% 0%, 100% 100%, 0% 100%);
|
||||
opacity: 0.13;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero-diagonal-border {
|
||||
position: absolute; top: 0; right: 0;
|
||||
width: 44%; height: 100%;
|
||||
clip-path: polygon(14% 0%, 100% 0%, 100% 100%, 0% 100%);
|
||||
border-left: 3px solid rgba(139,26,26,0.5);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ================================================
|
||||
SERVICE CARD — bordure top rouge brique
|
||||
================================================ */
|
||||
.service-card-dark {
|
||||
border-top: 3px solid var(--color-orange);
|
||||
transition: background 0.3s ease, transform 0.2s ease;
|
||||
}
|
||||
.service-card-dark:hover {
|
||||
background: rgba(255,255,255,0.04);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
/* ================================================
|
||||
FAQ — icône rotation
|
||||
================================================ */
|
||||
.faq-icon { transition: transform 0.3s ease; }
|
||||
details[open] .faq-icon { transform: rotate(45deg); }
|
||||
|
||||
Reference in New Issue
Block a user