serge/site-mva-global-fret
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fix uneven border on Service Commande pricing card

Browse Source 
The default .pricing-card has both a 3px gold border AND a 6px gold
gradient bar on top (::before). On the Service Commande page that
combination made the top edge look much thicker than the sides.

Add a .pricing-card--flat modifier that hides the ::before bar and
trims the border to 2px, then apply it to the commission card.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
MVA Global Fret 2026-05-04 21:02:33 +02:00
parent 4a79136525
commit 0045a7d3b2
2 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/style.css
View File

@ -687,6 +687,10 @@ p {
background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold)); background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
} }
/* Variant: pricing card without the top gold gradient bar */
.pricing-card--flat::before { display: none; }
.pricing-card--flat { border-width: 2px; }
.pricing-amount { .pricing-amount {
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: clamp(2.5rem, 6vw, 4rem); font-size: clamp(2.5rem, 6vw, 4rem);

2
service-commande.html
View File

@ -117,7 +117,7 @@
</div> </div>
<!-- Carte commission --> <!-- Carte commission -->
<div class="pricing-card animate-on-scroll" style="max-width: 720px; margin: 0 auto 32px;"> <div class="pricing-card pricing-card--flat animate-on-scroll" style="max-width: 720px; margin: 0 auto 32px;">
<div style="display:inline-flex; align-items:center; gap:8px; background: linear-gradient(135deg, var(--navy), #2a2a5e); color: var(--gold); padding: 6px 18px; border-radius: 50px; font-size: 0.85rem; font-weight: 600; margin-bottom: 24px;"> <div style="display:inline-flex; align-items:center; gap:8px; background: linear-gradient(135deg, var(--navy), #2a2a5e); color: var(--gold); padding: 6px 18px; border-radius: 50px; font-size: 0.85rem; font-weight: 600; margin-bottom: 24px;">
<i class="fa-solid fa-percent"></i> <span data-i18n="serviceCommande.commissionBadge">Commission</span> <i class="fa-solid fa-percent"></i> <span data-i18n="serviceCommande.commissionBadge">Commission</span>
</div> </div>