Innova-AI/dictia-public
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

refactor(marketing): Cycle cinematic PRO — palette brand uniformisée + USA map + Quebec outline + halo brand

Browse Source 
Round 5 cinématique de la section "Trois options. Une seule est conforme." :
- Palette brand uniformisée (blue/cyan/fuchsia) — col 3 passe de emerald/green à brand-b1+brand-b2 + accents fuchsia
- Connecting horizontal beam progressive 0→33→66→100% entre les 3 colonnes (gris→rouge→cyan)
- Spotlight active column (opacity 0.65 inactif, 1 actif + scale 1.02)
- Col 1 : stack papiers stagger reveal 180ms + horloge 2.5s + counter \$315
- Col 2 : USA map silhouette subtle bg + server rack 3-leds + 12 paquets data .wav/.aac flying vers top-right + screen shake + flash red + chevrons + sound icon pulse
- Col 3 : Quebec province outline subtle + mini logo DictIA + halo multi-couches blue+cyan+fuchsia + drawn ring SVG (fuchsia accent) + shield-with-microphone + checkmark cyan + badge Loi 25 conforme gradient brand + big 173 \$ en grad-text
- Section Économies : counters en grad-text + save chips "+économies" + chips contextuels + icônes distinctives (loutre/Teams T/sténographe humain)
- Phase delays cinématiques 400/1100/2000/3100ms + cubic-bezier overshoot
- Vignette ambiante + grid pattern 40×40 + orbes décoratifs blur

WCAG : aria-labels préservés + prefers-reduced-motion désactive radar/particles/screen-shake/halo/beam.
Mobile : leak particles + orbes + halo heavy + screen shake désactivés via @media (max-width: 768px).
Performance : will-change GPU hints sur stamp/halo/leak.

Tests cycle round 4 (3) toujours passants. 65/68 tests pass (3 failures pré-existantes : /blog nav).
HTTP 200 vérifié sur http://127.0.0.1:8899/.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Allison
2026-04-28 17:07:59 -04:00
parent 575db5e342
commit e8c7e5cd43
2 changed files with 541 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
static/css/marketing.css
View File

@@ -398,6 +398,9 @@
.-top-12 {
top: calc(var(--spacing) * -12);
}
.-top-20 {
top: calc(var(--spacing) * -20);
}
.top-0 {
top: calc(var(--spacing) * 0);
}
@@ -449,6 +452,9 @@
.-right-12 {
right: calc(var(--spacing) * -12);
}
.-right-24 {
right: calc(var(--spacing) * -24);
}
.right-0 {
right: calc(var(--spacing) * 0);
}
@@ -482,6 +488,9 @@
.right-\[6\%\] {
right: 6%;
}
.-bottom-24 {
bottom: calc(var(--spacing) * -24);
}
.bottom-0 {
bottom: calc(var(--spacing) * 0);
}
@@ -497,6 +506,9 @@
.bottom-full {
bottom: 100%;
}
.-left-20 {
left: calc(var(--spacing) * -20);
}
.left-0 {
left: calc(var(--spacing) * 0);
}
@@ -854,17 +866,17 @@
.h-\[1\.5px\] {
height: 1.5px;
}
.h-\[1px\] {
height: 1px;
}
.h-\[2px\] {
height: 2px;
}
.h-\[3px\] {
height: 3px;
}
.h-\[17px\] {
height: 17px;
}
.h-\[52px\] {
height: 52px;
.h-\[56px\] {
height: 56px;
}
.h-\[62px\] {
height: 62px;
@@ -881,9 +893,15 @@
.h-\[95vh\] {
height: 95vh;
}
.h-\[360px\] {
height: 360px;
}
.h-\[400px\] {
height: 400px;
}
.h-\[420px\] {
height: 420px;
}
.h-\[450px\] {
height: 450px;
}
@@ -1043,11 +1061,8 @@
.w-80 {
width: calc(var(--spacing) * 80);
}
.w-\[3px\] {
width: 3px;
}
.w-\[52px\] {
width: 52px;
.w-\[56px\] {
width: 56px;
}
.w-\[68px\] {
width: 68px;
@@ -1061,9 +1076,15 @@
.w-\[100px\] {
width: 100px;
}
.w-\[360px\] {
width: 360px;
}
.w-\[400px\] {
width: 400px;
}
.w-\[420px\] {
width: 420px;
}
.w-\[450px\] {
width: 450px;
}
@@ -1389,6 +1410,9 @@
.gap-\[1\.5px\] {
gap: 1.5px;
}
.gap-\[3px\] {
gap: 3px;
}
.space-y-0\.5 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
@@ -1541,6 +1565,9 @@
.rounded {
border-radius: 0.75rem;
}
.rounded-\[2px\] {
border-radius: 2px;
}
.rounded-full {
border-radius: calc(infinity * 1px);
}
@@ -1705,9 +1732,6 @@
.border-brand-b1 {
border-color: #2563eb;
}
.border-brand-b1\/15 {
border-color: color-mix(in oklab, #2563eb 15%, transparent);
}
.border-brand-b1\/20 {
border-color: color-mix(in oklab, #2563eb 20%, transparent);
}
@@ -1717,12 +1741,27 @@
.border-brand-b1\/30 {
border-color: color-mix(in oklab, #2563eb 30%, transparent);
}
.border-brand-b1\/35 {
border-color: color-mix(in oklab, #2563eb 35%, transparent);
.border-brand-b1\/40 {
border-color: color-mix(in oklab, #2563eb 40%, transparent);
}
.border-brand-b2\/20 {
border-color: color-mix(in oklab, #06b6d4 20%, transparent);
}
.border-brand-b2\/25 {
border-color: color-mix(in oklab, #06b6d4 25%, transparent);
}
.border-brand-b2\/30 {
border-color: color-mix(in oklab, #06b6d4 30%, transparent);
}
.border-brand-b2\/40 {
border-color: color-mix(in oklab, #06b6d4 40%, transparent);
}
.border-brand-b2\/45 {
border-color: color-mix(in oklab, #06b6d4 45%, transparent);
}
.border-brand-b2\/50 {
border-color: color-mix(in oklab, #06b6d4 50%, transparent);
}
.border-brand-b3\/15 {
border-color: color-mix(in oklab, #c026d3 15%, transparent);
}
@@ -1732,21 +1771,6 @@
.border-brand-border {
border-color: #e6ebf2;
}
.border-emerald-100 {
border-color: var(--color-emerald-100);
}
.border-emerald-500\/40 {
border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 40%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-emerald-500) 40%, transparent);
}
}
.border-emerald-500\/45 {
border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 45%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-emerald-500) 45%, transparent);
}
}
.border-gray-300 {
border-color: var(--color-gray-300);
}
@@ -1786,6 +1810,12 @@
.border-red-200 {
border-color: var(--color-red-200);
}
.border-red-200\/70 {
border-color: color-mix(in srgb, oklch(88.5% 0.062 18.334) 70%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-red-200) 70%, transparent);
}
}
.border-red-300 {
border-color: var(--color-red-300);
}
@@ -2032,17 +2062,17 @@
.bg-brand-b1 {
background-color: #2563eb;
}
.bg-brand-b1\/5 {
background-color: color-mix(in oklab, #2563eb 5%, transparent);
}
.bg-brand-b1\/10 {
background-color: color-mix(in oklab, #2563eb 10%, transparent);
}
.bg-brand-b1\/15 {
background-color: color-mix(in oklab, #2563eb 15%, transparent);
.bg-brand-b1\/\[0\.08\] {
background-color: color-mix(in oklab, #2563eb 8%, transparent);
}
.bg-brand-b1\/\[0\.06\] {
background-color: color-mix(in oklab, #2563eb 6%, transparent);
.bg-brand-b2 {
background-color: #06b6d4;
}
.bg-brand-b2\/20 {
background-color: color-mix(in oklab, #06b6d4 20%, transparent);
}
.bg-brand-b3 {
background-color: #c026d3;
@@ -2065,6 +2095,9 @@
.bg-brand-border {
background-color: #e6ebf2;
}
.bg-brand-border\/60 {
background-color: color-mix(in oklab, #e6ebf2 60%, transparent);
}
.bg-brand-navy {
background-color: #060d1a;
}
@@ -2086,21 +2119,6 @@
.bg-brand-navy2 {
background-color: #0b1525;
}
.bg-emerald-50 {
background-color: var(--color-emerald-50);
}
.bg-emerald-500\/12 {
background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 12%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-emerald-500) 12%, transparent);
}
}
.bg-emerald-500\/15 {
background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 15%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-emerald-500) 15%, transparent);
}
}
.bg-emerald-600 {
background-color: var(--color-emerald-600);
}
@@ -2209,6 +2227,12 @@
background-color: color-mix(in oklab, var(--color-red-50) 40%, transparent);
}
}
.bg-red-50\/80 {
background-color: color-mix(in srgb, oklch(97.1% 0.013 17.38) 80%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-red-50) 80%, transparent);
}
}
.bg-red-100 {
background-color: var(--color-red-100);
}
@@ -2218,6 +2242,12 @@
background-color: color-mix(in oklab, var(--color-red-100) 60%, transparent);
}
}
.bg-red-300\/60 {
background-color: color-mix(in srgb, oklch(80.8% 0.114 19.571) 60%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-red-300) 60%, transparent);
}
}
.bg-red-400 {
background-color: var(--color-red-400);
}
@@ -2369,12 +2399,12 @@
--tw-gradient-from: var(--color-blue-600);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-brand-b1\/15 {
--tw-gradient-from: color-mix(in oklab, #2563eb 15%, transparent);
.from-brand-b1\/20 {
--tw-gradient-from: color-mix(in oklab, #2563eb 20%, transparent);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-brand-b1\/\[0\.06\] {
--tw-gradient-from: color-mix(in oklab, #2563eb 6%, transparent);
.from-brand-b1\/\[0\.07\] {
--tw-gradient-from: color-mix(in oklab, #2563eb 7.000000000000001%, transparent);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-brand-b3 {
@@ -2389,6 +2419,10 @@
--tw-gradient-from: var(--color-red-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-transparent {
--tw-gradient-from: transparent;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-violet-500 {
--tw-gradient-from: var(--color-violet-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -2400,6 +2434,26 @@
}
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.via-brand-b1\/30 {
--tw-gradient-via: color-mix(in oklab, #2563eb 30%, transparent);
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
.via-brand-b2\/15 {
--tw-gradient-via: color-mix(in oklab, #06b6d4 15%, transparent);
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
.via-brand-b2\/\[0\.04\] {
--tw-gradient-via: color-mix(in oklab, #06b6d4 4%, transparent);
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
.via-brand-b3\/30 {
--tw-gradient-via: color-mix(in oklab, #c026d3 30%, transparent);
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
.via-purple-500\/10 {
--tw-gradient-via: color-mix(in srgb, oklch(62.7% 0.265 303.9) 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -2424,6 +2478,10 @@
--tw-gradient-to: #2563eb;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-brand-b2\/30 {
--tw-gradient-to: color-mix(in oklab, #06b6d4 30%, transparent);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-brand-b3\/10 {
--tw-gradient-to: color-mix(in oklab, #c026d3 10%, transparent);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -2582,6 +2640,9 @@
.py-24 {
padding-block: calc(var(--spacing) * 24);
}
.py-px {
padding-block: 1px;
}
.pt-0 {
padding-top: calc(var(--spacing) * 0);
}
@@ -2751,6 +2812,12 @@
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
.text-\[6px\] {
font-size: 6px;
}
.text-\[7px\] {
font-size: 7px;
}
.text-\[8px\] {
font-size: 8px;
}
@@ -2848,9 +2915,9 @@
--tw-tracking: 0.2em;
letter-spacing: 0.2em;
}
.tracking-\[0\.14em\] {
--tw-tracking: 0.14em;
letter-spacing: 0.14em;
.tracking-\[0\.10em\] {
--tw-tracking: 0.10em;
letter-spacing: 0.10em;
}
.tracking-\[0\.16em\] {
--tw-tracking: 0.16em;
@@ -3000,15 +3067,6 @@
.text-brand-b1 {
color: #2563eb;
}
.text-brand-b1\/45 {
color: color-mix(in oklab, #2563eb 45%, transparent);
}
.text-brand-b1\/55 {
color: color-mix(in oklab, #2563eb 55%, transparent);
}
.text-brand-b1\/60 {
color: color-mix(in oklab, #2563eb 60%, transparent);
}
.text-brand-b1\/65 {
color: color-mix(in oklab, #2563eb 65%, transparent);
}
@@ -3018,6 +3076,9 @@
.text-brand-b1\/80 {
color: color-mix(in oklab, #2563eb 80%, transparent);
}
.text-brand-b1\/85 {
color: color-mix(in oklab, #2563eb 85%, transparent);
}
.text-brand-b2 {
color: #06b6d4;
}
@@ -3072,18 +3133,6 @@
.text-emerald-500 {
color: var(--color-emerald-500);
}
.text-emerald-600 {
color: var(--color-emerald-600);
}
.text-emerald-600\/70 {
color: color-mix(in srgb, oklch(59.6% 0.145 163.225) 70%, transparent);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-emerald-600) 70%, transparent);
}
}
.text-emerald-700 {
color: var(--color-emerald-700);
}
.text-gray-200 {
color: var(--color-gray-200);
}
@@ -3356,12 +3405,18 @@
.opacity-90 {
opacity: 90%;
}
.opacity-95 {
opacity: 95%;
}
.opacity-100 {
opacity: 100%;
}
.opacity-\[0\.02\] {
opacity: 0.02;
}
.opacity-\[0\.04\] {
opacity: 0.04;
}
.shadow {
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3382,8 +3437,8 @@
--tw-shadow: 0 0 28px var(--tw-shadow-color, rgba(37,99,235,0.35));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-\[0_8px_30px_-6px_rgba\(239\,68\,68\,0\.55\)\] {
--tw-shadow: 0 8px 30px -6px var(--tw-shadow-color, rgba(239,68,68,0.55));
.shadow-\[0_12px_40px_-6px_rgba\(239\,68\,68\,0\.65\)\] {
--tw-shadow: 0 12px 40px -6px var(--tw-shadow-color, rgba(239,68,68,0.65));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-cta {