fix(marketing): WCAG 2.3.3 reduced-motion + defensible social proof + em-spacing

- Add @media (prefers-reduced-motion: reduce) override to disable animations
  for vestibular-sensitive users (covers hero + future scroll/infinite anims)
- Replace 5-star icon + '27 cabinets' claim with shield + 'Conçu avec 9
  ordres professionnels' + 'Pré-inscription ouverte' (LPC art. 219 +
  Competition Act s. 52 compliance — pre-launch claims must be factual)
- Convert H1/H2/H3 letter-spacing from absolute px to em-relative (-3px →
  -0.028em on H1) so tracking scales correctly with clamp font-size on mobile
- Update test_hero_has_social_proof_microcopy to assert new copy

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Allison
2026-04-27 17:19:16 -04:00
parent 03af2a516d
commit b24a0f064d
4 changed files with 28 additions and 9 deletions

View File

@@ -17,8 +17,8 @@
body {
@apply font-sans bg-white text-brand-navy antialiased;
}
h1, h2, h3 { @apply font-black; letter-spacing: -2.5px; }
h1 { letter-spacing: -3px; }
h1, h2, h3 { @apply font-black; letter-spacing: -0.022em; }
h1 { letter-spacing: -0.028em; }
}
@layer utilities {
@@ -32,3 +32,15 @@
@apply text-[11px] uppercase font-bold tracking-[0.18em];
}
}
/* WCAG 2.3.3 — respect user's motion preference */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

File diff suppressed because one or more lines are too long

View File

@@ -1,7 +1,7 @@
{% extends 'marketing/base.html' %}
{% block title %}Transcription IA conforme Loi 25 — DictIA pour avocats, CPA, secteur public{% endblock %}
{% block description %}DictIA transcrit vos réunions confidentielles 100% au Québec. Conforme Loi 25, Barreau, CPA, ChAD. Lancement printemps 2026 — 27 cabinets pilotes.{% endblock %}
{% block description %}DictIA transcrit vos réunions confidentielles 100% au Québec. Conforme Loi 25, Barreau, CPA, ChAD. Conçu avec 9 ordres professionnels — lancement printemps 2026.{% endblock %}
{% block content %}
{# ===== HERO ===== #}
@@ -50,10 +50,16 @@
{{ button('Voir les tarifs →', href='/tarifs', variant='ghost', size='lg') }}
</div>
{# Social proof microcopy — above-the-fold trust signal #}
{# Social proof microcopy — defensible: refers to pre-launch waitlist + factual ordres pros count #}
<p class="mt-8 text-sm text-white/50 animate-tc-fade-in-up" style="animation-delay: 400ms; animation-fill-mode: backwards;">
<span class="text-yellow-400" aria-hidden="true">★★★★★</span>
<span class="ml-2">27 cabinets québécois nous font confiance</span>
<span class="inline-flex items-center gap-1.5">
<svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor" class="text-brand-b3" aria-hidden="true">
<path d="M10 2L3 5v5.5c0 4.04 2.84 7.85 7 8.5 4.16-.65 7-4.46 7-8.5V5l-7-3z"/>
</svg>
<span>Conçu avec 9 ordres professionnels québécois</span>
</span>
<span class="mx-2 text-white/30">·</span>
<span>Pré-inscription ouverte</span>
<span class="mx-2 text-white/30">·</span>
<span>Lancement printemps 2026</span>
</p>

View File

@@ -112,10 +112,11 @@ def test_hero_has_cosmic_orbs_background():
def test_hero_has_social_proof_microcopy():
"""Hero has '27 cabinets' social proof + Lancement printemps 2026."""
"""Hero has defensible social proof: 9 ordres pros + waitlist + launch date."""
client = app.test_client()
body = client.get('/').data.decode('utf-8')
assert '27 cabinets' in body, "Missing social proof '27 cabinets'"
assert '9 ordres professionnels' in body, "Missing factual ordres pros count"
assert 'Pré-inscription' in body or 'Pr&eacute;-inscription' in body, "Missing waitlist mention"
assert 'Lancement printemps 2026' in body, "Missing launch date"