feat(footer): suppression newsletter, h3 → p.footer-label, corrections CSS mobile

- Retire la section newsletter commentée et tout son CSS associé
- Remplace les h3 par des p.footer-label (sémantique plus correcte)
- Réduit le gap des colonnes footer
- Fix divider mobile (7% width, 2px height)
- Ajoute offset margin-left pour .collection .page-scrollable-footer mobile

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-20 11:08:14 +01:00
parent 1625ee1c44
commit 517c701ab9

View file

@ -45,7 +45,7 @@
<!-- Location --> <!-- Location -->
{#if contact.address} {#if contact.address}
<div class="footer-col"> <div class="footer-col">
<h3>{t('location')}</h3> <p class="footer-label">{t('location')}</p>
<address>{@html contact.address}</address> <address>{@html contact.address}</address>
</div> </div>
{/if} {/if}
@ -53,7 +53,7 @@
<!-- Contact --> <!-- Contact -->
{#if contact.email} {#if contact.email}
<div class="footer-col"> <div class="footer-col">
<h3>{t('contact')}</h3> <p class="footer-label">{t('contact')}</p>
<a href="mailto:{contact.email}">{contact.email}</a> <a href="mailto:{contact.email}">{contact.email}</a>
</div> </div>
{/if} {/if}
@ -61,7 +61,7 @@
<!-- Follow us --> <!-- Follow us -->
{#if socials.length > 0} {#if socials.length > 0}
<div class="footer-col"> <div class="footer-col">
<h3>{t('follow_us')}</h3> <p class="footer-label">{t('follow_us')}</p>
<ul class="footer-socials" role="list"> <ul class="footer-socials" role="list">
{#each socials as social} {#each socials as social}
<li> <li>
@ -77,27 +77,6 @@
</ul> </ul>
</div> </div>
{/if} {/if}
<!-- Newsletter -->
<!-- <div class="footer-newsletter">
<h3>{t('newsletter_heading')}</h3>
<form class="footer-newsletter-form" onsubmit={handleSubscribe}>
<input
class="footer-newsletter-input"
type="email"
placeholder={t('newsletter_placeholder')}
bind:value={email}
required
/>
<button type="submit" class="button">{t('newsletter_submit')}</button>
</form>
{#if status}
<p class="footer-newsletter-status footer-newsletter-status--{status.type}">
{status.message}
</p>
{/if}
</div> -->
</div> </div>
<!-- Copyright bar --> <!-- Copyright bar -->
@ -147,18 +126,19 @@
.footer-col { .footer-col {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 0.5rem;
width: 136px; width: 136px;
text-align: left; text-align: left;
margin-bottom: .5rem;
} }
.footer-col h3 { .footer-label {
color: #fff; color: #fff;
font-family: "Danzza", sans-serif; font-family: "Danzza", sans-serif;
font-size: var(--font-size-paragraph); font-size: var(--font-size-paragraph);
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
line-height: 16px; line-height: 1.2;
} }
.footer-col address, .footer-col address,
@ -187,76 +167,11 @@
justify-content: center; justify-content: center;
} }
.footer-socials :global(svg), .footer-socials :global(svg) {
.footer-socials img {
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
/* --- Newsletter --- */
.footer-newsletter {
width: 493px;
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-newsletter h3 {
color: #fff;
font-family: "Danzza", sans-serif;
font-size: var(--font-size-paragraph);
font-weight: 500;
text-transform: uppercase;
line-height: 16px;
}
.footer-newsletter-form {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.footer-newsletter-input {
width: 315px;
height: 45px;
padding: 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid #fff;
color: #fff;
font-size: 16px;
font-family: "Danzza", sans-serif;
}
.footer-newsletter-input::placeholder {
opacity: 0.7;
color: #fff;
}
/* Override .button width for footer context */
.footer-newsletter-form :global(.button) {
width: auto;
min-width: unset;
position: static;
height: 45px;
}
.footer-newsletter-status {
padding: 8px;
border-radius: 4px;
font-size: 14px;
text-align: center;
}
.footer-newsletter-status--success {
background: #4dfca1;
color: #1e1938;
}
.footer-newsletter-status--error {
background: #ff6b6b;
color: #fff;
}
/* --- Copyright bar --- */ /* --- Copyright bar --- */
.footer-bottom { .footer-bottom {
display: flex; display: flex;
@ -292,20 +207,6 @@
padding: 16px 20px; padding: 16px 20px;
} }
.footer-newsletter {
width: 100%;
}
.footer-newsletter-input {
width: 100%;
flex-grow: 1;
}
.footer-newsletter-form :global(.button) {
width: 100%;
margin-top: 10px;
}
.footer-bottom { .footer-bottom {
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
@ -314,8 +215,12 @@
} }
.footer-divider { .footer-divider {
width: 100%; width: 7%;
height: 1px; height: 2px;
}
:global(.collection .page-scrollable-footer) {
margin-left: -6.2vw;
} }
} }
@ -328,14 +233,6 @@
padding: 20px 30px; padding: 20px 30px;
} }
.footer-newsletter {
width: 100%;
}
.footer-newsletter-input {
width: 60%;
}
.footer-bottom { .footer-bottom {
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;