Service Commande: redesign 'Et le transport ?' card
Avant : layout row asymétrique, icône en coin haut-gauche, bouton outline qui flotte, hiérarchie visuelle plate. Maintenant : - Carte centrée 560px max, padding plus respirant, bordure or 6px en haut - Icône 84px navy/or avec drop-shadow → gros pop visuel - Prix éclaté : '70 000' en gros chiffre, 'Ar / kg' en doré accent - Description plus compacte, contenue à 440px - Bouton primary (or solide) avec flèche animée au hover - Variant mobile (<480px) avec tailles réduites Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MVA Global Fret
parent
0ef9f01fd9
commit
e1032b1405
@ -737,60 +737,90 @@ p {
|
||||
|
||||
/* --- Transport card (page Service Commande) --- */
|
||||
.transport-card {
|
||||
max-width: 720px;
|
||||
position: relative;
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
background: var(--white);
|
||||
border-radius: 16px;
|
||||
padding: var(--space-xl);
|
||||
box-shadow: 0 10px 30px rgba(26, 26, 62, 0.08);
|
||||
border-radius: 20px;
|
||||
padding: var(--space-2xl) var(--space-xl) var(--space-xl);
|
||||
text-align: center;
|
||||
box-shadow: 0 16px 40px rgba(26, 26, 62, 0.10);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.transport-card-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: var(--space-md);
|
||||
.transport-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 6px;
|
||||
background: linear-gradient(90deg, var(--gold) 0%, #e0c98a 50%, var(--gold) 100%);
|
||||
}
|
||||
|
||||
.transport-card-icon {
|
||||
flex-shrink: 0;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, var(--navy), #2a2a5e);
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
margin: 0 auto var(--space-lg);
|
||||
border-radius: 22px;
|
||||
background: linear-gradient(135deg, var(--navy) 0%, #2a2a5e 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--gold);
|
||||
font-size: 1.5rem;
|
||||
font-size: 2rem;
|
||||
box-shadow: 0 12px 28px rgba(26, 26, 62, 0.25);
|
||||
}
|
||||
|
||||
.transport-card-body h3 {
|
||||
.transport-card-price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-bottom: var(--space-md);
|
||||
font-family: 'Poppins', var(--font-heading), sans-serif;
|
||||
}
|
||||
|
||||
.transport-card-amount {
|
||||
font-size: clamp(2.4rem, 5vw, 3.2rem);
|
||||
font-weight: 800;
|
||||
color: var(--navy);
|
||||
margin-bottom: var(--space-sm);
|
||||
letter-spacing: -1px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.transport-card-body p {
|
||||
.transport-card-unit {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.transport-card-desc {
|
||||
color: var(--text-light);
|
||||
margin: 0 0 var(--space-md);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.65;
|
||||
max-width: 440px;
|
||||
margin: 0 auto var(--space-lg);
|
||||
}
|
||||
|
||||
.transport-card-cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.transport-card-row {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
gap: var(--space-lg);
|
||||
.transport-card-cta i {
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
.transport-card-cta {
|
||||
margin-top: var(--space-sm);
|
||||
.transport-card-cta:hover i {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.transport-card { padding: var(--space-xl) var(--space-lg); }
|
||||
.transport-card-icon { width: 72px; height: 72px; font-size: 1.7rem; margin-bottom: var(--space-md); }
|
||||
.transport-card-desc { font-size: 0.92rem; }
|
||||
}
|
||||
|
||||
/* --- About section preview --- */
|
||||
|
||||
@ -161,16 +161,18 @@
|
||||
</div>
|
||||
|
||||
<div class="animate-on-scroll transport-card">
|
||||
<div class="transport-card-row">
|
||||
<div class="transport-card-icon">
|
||||
<div class="transport-card-icon" aria-hidden="true">
|
||||
<i class="fa-solid fa-plane"></i>
|
||||
</div>
|
||||
<div class="transport-card-body">
|
||||
<h3 data-i18n="serviceCommande.transportCardTitle">70 000 Ar par kilo</h3>
|
||||
<p data-i18n="serviceCommande.transportCardDesc">Une fois le colis arrivé à Madagascar, vous payez le transport au tarif standard de fret aérien : 70 000 Ar par kilo, à régler à la réception après contre-pesée. Comme pour tous nos envois.</p>
|
||||
<a href="tarifs.html" class="btn btn-secondary transport-card-cta" data-i18n="serviceCommande.transportCardCta">Voir nos tarifs détaillés</a>
|
||||
</div>
|
||||
<div class="transport-card-price">
|
||||
<span class="transport-card-amount">70 000</span>
|
||||
<span class="transport-card-unit">Ar / kg</span>
|
||||
</div>
|
||||
<p class="transport-card-desc" data-i18n="serviceCommande.transportCardDesc">Une fois le colis arrivé à Madagascar, vous payez le transport au tarif standard de fret aérien : 70 000 Ar par kilo, à régler à la réception après contre-pesée. Comme pour tous nos envois.</p>
|
||||
<a href="tarifs.html" class="btn btn-primary transport-card-cta" data-i18n="serviceCommande.transportCardCta">
|
||||
<span>Voir nos tarifs détaillés</span>
|
||||
<i class="fa-solid fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user