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

fix(marketing): phone shell border/shadow/glow STATIC (ne morphe plus entre modes)

Browse Source 
Le perception "le contour change" venait de 4 propriétés tintées par activeColor
sur le phone-shell : border (${activeColor}40), box-shadow (${activeColor}30),
ambient overlay (${activeColor}08), external glow ring (${activeColor}28).

À chaque switch de mode, ces 4 valeurs s'animaient en couleur → halo qui morphe
visuellement même si width/height restent fixes.

Fix : verrouille border/shadow/glow ring/ambient à des valeurs STATIQUES
(white/[0.10] border, brand-b1 0.20 shadow halo, white/[0.015] ambient,
brand-b1 0.18 glow ring) — comme un vrai téléphone, le bezel ne change
JAMAIS de couleur. Seul le contenu interne (modes, feature info card,
boutons feature) reste tinté par activeColor.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Allison
2026-04-29 10:32:25 -04:00
parent 199b315bc2
commit d6ff71640a
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
templates/marketing/fonctionnalites.html
View File

@@ -511,18 +511,18 @@
{# Phone shell (bezel, glow ring, drop shadow) — LARGEUR/HAUTEUR FIXES pour stabilité du cadre #}
<div class="relative mx-auto dictia-phone-wrap" style="width: 280px; max-width: 100%;">
{# External glow ring (pulse) #}
{# External glow ring (pulse) — STATIC brand-b1 halo, ne change PAS selon mode pour stabilité visuelle du contour #}
<div class="absolute -inset-2 pointer-events-none dictia-phone-glow-ring"
:style="`border-radius: 52px; background: radial-gradient(ellipse 80% 90% at 50% 50%, ${activeColor}28 0%, transparent 60%); transition: background 0.4s;`"
style="border-radius: 52px; background: radial-gradient(ellipse 80% 90% at 50% 50%, rgba(37,99,235,0.18) 0%, transparent 60%);"
aria-hidden="true"></div>
{# Phone shell — bezel/border/shadow STATIQUES (couleur ne change jamais entre modes — comme un vrai téléphone) #}
<div class="dictia-phone-shell flex flex-col overflow-hidden relative"
style="width: 280px; height: 580px;"
:style="`border: 1.5px solid ${activeColor}40; background: rgba(8,12,24,0.88); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 12px 32px -8px ${activeColor}30, inset 0 0 32px ${activeColor}10; transition: border-color 0.4s, box-shadow 0.4s;`">
style="width: 280px; height: 580px; border: 1.5px solid rgba(255,255,255,0.10); background: rgba(8,12,24,0.88); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 12px 32px -8px rgba(37,99,235,0.20), inset 0 0 32px rgba(255,255,255,0.04);">
{# Ambient color tint overlay #}
{# Ambient overlay — STATIC subtle (pas de tint par mode) #}
<div class="absolute inset-0 pointer-events-none"
:style="`border-radius: 44px; background-color: ${activeColor}08; transition: background-color 0.4s;`"
style="border-radius: 44px; background-color: rgba(255,255,255,0.015);"
aria-hidden="true"></div>
{# Notch / Dynamic Island (desktop only via mobile media) #}