From 34d40162b3596e004e8172cb5d04ec57d5a676bc Mon Sep 17 00:00:00 2001 From: Allison Date: Tue, 28 Apr 2026 15:39:09 -0400 Subject: [PATCH] =?UTF-8?q?refactor(brand):=20d=C3=A9cale=20palette=20bleu?= =?UTF-8?q?=E2=86=92mauve=20d=C3=A9grad=C3=A9=20(b1=3D#7c3aed,=20b2=3D#a85?= =?UTF-8?q?5f7,=20b3=3D#06b6d4=20aqua)=20pour=20diff=C3=A9rencier=20DictIA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Décale la palette canonique DictIA du bleu/cyan/vert vers mauve/violet/aqua afin de distinguer visuellement le produit DictIA des autres outils InnovA AI (qui restent sur palette bleue) tout en gardant la même structure de gradient, mêmes tokens Tailwind, et même intensité visuelle. Mapping appliqué: - Hex semantic: #0062ff → #7c3aed (mauve), #00bdd8 → #a855f7 (lighter mauve) - Hex aqua décoratif: #00c896 → #06b6d4 (cyan-500, aqua préservé) - Hex secondaire: #6B9FFF / rgba(107,159,255,*) → #a78bfa (violet-400) - Hex blue-700 #1d4ed8 (cadre reg label) → #7c3aed (mauve) - Box shadows / rgba opacités: rgba(0,98,255,*) → rgba(124,58,237,*) - Décoratif (orbes cosmiques, glows): mauve+aqua mix pour préserver l'effet "cosmic dégradé" — orbe primaire en mauve, orbes secondaires en aqua - Hub network DictIA: Documents=mauve, Communication=aqua, Automatisation reste #8b5cf6 (déjà violet, marqueur visuel distinct via positionnement) - Couleurs sémantiques fonctionnelles (red/green pour erreurs/succès, amber pour alertes) inchangées Fichiers modifiés: - static/css/tailwind.config.js (brand.b1/b2/b3 + brand-grad + boxShadow.cta + boxShadow.cta-hover + keyframes.tc-pulse-glow) - static/css/marketing.css (rebuild Tailwind: 169356 → 163036 bytes) - templates/legal/{_layout,index}.html - templates/marketing/{landing,fonctionnalites,conformite,tarifs}.html - tests/test_marketing_landing_template.py (test_hero_has_cosmic_orbs_background mis à jour avec assertions mauve/aqua au lieu de blue/cyan/green) Hors scope (non touchés): - Couleurs Tailwind utility (red/green/amber/emerald) sémantiques - --brand-navy* (backgrounds dark restent neutres) - Templates legacy (account.html, admin.html, components/, modals/) - #8b5cf6 (Automatisation hub), #f59e0b (alertes), #ef4444 (erreurs) Tests: 111 passed, 5 failed (toutes 5 pré-existantes, non liées aux couleurs: /blog link manquant, MAPP eyebrow, SOC 2 phrasing, Gitea URL). HTTP 200 vérifié sur /, /fonctionnalites, /tarifs, /conformite, /legal/, /legal/conditions. Co-Authored-By: Claude Opus 4.7 (1M context) --- static/css/marketing.css | 100 +++++++++--------- static/css/tailwind.config.js | 16 +-- templates/legal/_layout.html | 18 ++-- templates/legal/index.html | 8 +- templates/marketing/conformite.html | 2 +- templates/marketing/fonctionnalites.html | 20 ++-- templates/marketing/landing.html | 126 +++++++++++------------ templates/marketing/tarifs.html | 2 +- tests/test_marketing_landing_template.py | 10 +- 9 files changed, 151 insertions(+), 151 deletions(-) diff --git a/static/css/marketing.css b/static/css/marketing.css index eda24ce..3128dc9 100644 --- a/static/css/marketing.css +++ b/static/css/marketing.css @@ -1703,31 +1703,31 @@ } } .border-brand-b1 { - border-color: #0062ff; + border-color: #7c3aed; } .border-brand-b1\/15 { - border-color: color-mix(in oklab, #0062ff 15%, transparent); + border-color: color-mix(in oklab, #7c3aed 15%, transparent); } .border-brand-b1\/20 { - border-color: color-mix(in oklab, #0062ff 20%, transparent); + border-color: color-mix(in oklab, #7c3aed 20%, transparent); } .border-brand-b1\/25 { - border-color: color-mix(in oklab, #0062ff 25%, transparent); + border-color: color-mix(in oklab, #7c3aed 25%, transparent); } .border-brand-b1\/30 { - border-color: color-mix(in oklab, #0062ff 30%, transparent); + border-color: color-mix(in oklab, #7c3aed 30%, transparent); } .border-brand-b1\/35 { - border-color: color-mix(in oklab, #0062ff 35%, transparent); + border-color: color-mix(in oklab, #7c3aed 35%, transparent); } .border-brand-b2\/40 { - border-color: color-mix(in oklab, #00bdd8 40%, transparent); + border-color: color-mix(in oklab, #a855f7 40%, transparent); } .border-brand-b3\/15 { - border-color: color-mix(in oklab, #00c896 15%, transparent); + border-color: color-mix(in oklab, #06b6d4 15%, transparent); } .border-brand-b3\/60 { - border-color: color-mix(in oklab, #00c896 60%, transparent); + border-color: color-mix(in oklab, #06b6d4 60%, transparent); } .border-brand-border { border-color: #e6ebf2; @@ -2030,28 +2030,28 @@ background-color: var(--color-blue-600); } .bg-brand-b1 { - background-color: #0062ff; + background-color: #7c3aed; } .bg-brand-b1\/5 { - background-color: color-mix(in oklab, #0062ff 5%, transparent); + background-color: color-mix(in oklab, #7c3aed 5%, transparent); } .bg-brand-b1\/10 { - background-color: color-mix(in oklab, #0062ff 10%, transparent); + background-color: color-mix(in oklab, #7c3aed 10%, transparent); } .bg-brand-b1\/15 { - background-color: color-mix(in oklab, #0062ff 15%, transparent); + background-color: color-mix(in oklab, #7c3aed 15%, transparent); } .bg-brand-b1\/\[0\.06\] { - background-color: color-mix(in oklab, #0062ff 6%, transparent); + background-color: color-mix(in oklab, #7c3aed 6%, transparent); } .bg-brand-b3 { - background-color: #00c896; + background-color: #06b6d4; } .bg-brand-b3\/10 { - background-color: color-mix(in oklab, #00c896 10%, transparent); + background-color: color-mix(in oklab, #06b6d4 10%, transparent); } .bg-brand-b3\/60 { - background-color: color-mix(in oklab, #00c896 60%, transparent); + background-color: color-mix(in oklab, #06b6d4 60%, transparent); } .bg-brand-bg { background-color: #f7f9fc; @@ -2370,15 +2370,15 @@ --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, #0062ff 15%, transparent); + --tw-gradient-from: color-mix(in oklab, #7c3aed 15%, 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, #0062ff 6%, transparent); + --tw-gradient-from: color-mix(in oklab, #7c3aed 6%, 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 { - --tw-gradient-from: #00c896; + --tw-gradient-from: #06b6d4; --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-orange-500 { @@ -2421,15 +2421,15 @@ --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-b1 { - --tw-gradient-to: #0062ff; + --tw-gradient-to: #7c3aed; --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, #00c896 10%, transparent); + --tw-gradient-to: color-mix(in oklab, #06b6d4 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)); } .to-brand-b3\/\[0\.04\] { - --tw-gradient-to: color-mix(in oklab, #00c896 4%, transparent); + --tw-gradient-to: color-mix(in oklab, #06b6d4 4%, 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-purple-500 { @@ -2979,9 +2979,6 @@ color: color-mix(in oklab, var(--color-amber-900) 90%, transparent); } } - .text-blue-300 { - color: var(--color-blue-300); - } .text-blue-400 { color: var(--color-blue-400); } @@ -3001,31 +2998,31 @@ color: var(--color-blue-900); } .text-brand-b1 { - color: #0062ff; + color: #7c3aed; } .text-brand-b1\/45 { - color: color-mix(in oklab, #0062ff 45%, transparent); + color: color-mix(in oklab, #7c3aed 45%, transparent); } .text-brand-b1\/55 { - color: color-mix(in oklab, #0062ff 55%, transparent); + color: color-mix(in oklab, #7c3aed 55%, transparent); } .text-brand-b1\/60 { - color: color-mix(in oklab, #0062ff 60%, transparent); + color: color-mix(in oklab, #7c3aed 60%, transparent); } .text-brand-b1\/65 { - color: color-mix(in oklab, #0062ff 65%, transparent); + color: color-mix(in oklab, #7c3aed 65%, transparent); } .text-brand-b1\/70 { - color: color-mix(in oklab, #0062ff 70%, transparent); + color: color-mix(in oklab, #7c3aed 70%, transparent); } .text-brand-b1\/80 { - color: color-mix(in oklab, #0062ff 80%, transparent); + color: color-mix(in oklab, #7c3aed 80%, transparent); } .text-brand-b2 { - color: #00bdd8; + color: #a855f7; } .text-brand-b3 { - color: #00c896; + color: #06b6d4; } .text-brand-navy { color: #060d1a; @@ -3198,6 +3195,9 @@ .text-teal-600 { color: var(--color-teal-600); } + .text-violet-300 { + color: var(--color-violet-300); + } .text-violet-600 { color: var(--color-violet-600); } @@ -3324,7 +3324,7 @@ } } .accent-brand-b1 { - accent-color: #0062ff; + accent-color: #7c3aed; } .opacity-0 { opacity: 0%; @@ -3378,8 +3378,8 @@ --tw-shadow: 0 0 6px var(--tw-shadow-color, rgba(239,68,68,0.6)); 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_0_28px_rgba\(0\,98\,255\,0\.35\)\] { - --tw-shadow: 0 0 28px var(--tw-shadow-color, rgba(0,98,255,0.35)); + .shadow-\[0_0_28px_rgba\(124\,58\,237\,0\.35\)\] { + --tw-shadow: 0 0 28px var(--tw-shadow-color, rgba(124,58,237,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\)\] { @@ -3387,7 +3387,7 @@ 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 { - --tw-shadow: 0 4px 20px var(--tw-shadow-color, rgba(0, 98, 255, 0.28)); + --tw-shadow: 0 4px 20px var(--tw-shadow-color, rgba(124, 58, 237, 0.28)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-lg { @@ -3579,7 +3579,7 @@ .group-hover\:text-brand-b1 { &:is(:where(.group):hover *) { @media (hover: hover) { - color: #0062ff; + color: #7c3aed; } } } @@ -3789,14 +3789,14 @@ .hover\:border-brand-b1 { &:hover { @media (hover: hover) { - border-color: #0062ff; + border-color: #7c3aed; } } } .hover\:border-brand-b1\/30 { &:hover { @media (hover: hover) { - border-color: color-mix(in oklab, #0062ff 30%, transparent); + border-color: color-mix(in oklab, #7c3aed 30%, transparent); } } } @@ -4150,7 +4150,7 @@ .hover\:from-brand-b1 { &:hover { @media (hover: hover) { - --tw-gradient-from: #0062ff; + --tw-gradient-from: #7c3aed; --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)); } } @@ -4190,7 +4190,7 @@ .hover\:to-brand-b3 { &:hover { @media (hover: hover) { - --tw-gradient-to: #00c896; + --tw-gradient-to: #06b6d4; --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)); } } @@ -4306,7 +4306,7 @@ .hover\:text-brand-b1 { &:hover { @media (hover: hover) { - color: #0062ff; + color: #7c3aed; } } } @@ -4426,7 +4426,7 @@ .hover\:shadow-cta { &:hover { @media (hover: hover) { - --tw-shadow: 0 4px 20px var(--tw-shadow-color, rgba(0, 98, 255, 0.28)); + --tw-shadow: 0 4px 20px var(--tw-shadow-color, rgba(124, 58, 237, 0.28)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } @@ -4434,7 +4434,7 @@ .hover\:shadow-cta-hover { &:hover { @media (hover: hover) { - --tw-shadow: 0 8px 32px var(--tw-shadow-color, rgba(0, 98, 255, 0.42)); + --tw-shadow: 0 8px 32px var(--tw-shadow-color, rgba(124, 58, 237, 0.42)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } @@ -4613,7 +4613,7 @@ } .focus-visible\:outline-brand-b1 { &:focus-visible { - outline-color: #0062ff; + outline-color: #7c3aed; } } .focus-visible\:outline-red-700 { @@ -5890,13 +5890,13 @@ } @layer utilities { .grad-text { - background-image: linear-gradient(118deg, #0062ff, #00bdd8 52%, #00c896); + background-image: linear-gradient(118deg, #7c3aed, #a855f7 52%, #06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; } .grad-bg { - background-image: linear-gradient(118deg, #0062ff, #00bdd8 52%, #00c896); + background-image: linear-gradient(118deg, #7c3aed, #a855f7 52%, #06b6d4); color: var(--color-white); } .eyebrow { diff --git a/static/css/tailwind.config.js b/static/css/tailwind.config.js index b75a09d..39cf8f9 100644 --- a/static/css/tailwind.config.js +++ b/static/css/tailwind.config.js @@ -6,9 +6,9 @@ module.exports = { extend: { colors: { brand: { - b1: '#0062ff', - b2: '#00bdd8', - b3: '#00c896', + b1: '#7c3aed', + b2: '#a855f7', + b3: '#06b6d4', navy: '#060d1a', navy2: '#0b1525', navy3: '#0f1e35', @@ -21,11 +21,11 @@ module.exports = { mono: ['JetBrains Mono Variable', 'JetBrains Mono', 'monospace'], }, backgroundImage: { - 'brand-grad': 'linear-gradient(118deg, #0062ff, #00bdd8 52%, #00c896)', + 'brand-grad': 'linear-gradient(118deg, #7c3aed, #a855f7 52%, #06b6d4)', }, boxShadow: { - 'cta': '0 4px 20px rgba(0, 98, 255, 0.28)', - 'cta-hover': '0 8px 32px rgba(0, 98, 255, 0.42)', + 'cta': '0 4px 20px rgba(124, 58, 237, 0.28)', + 'cta-hover': '0 8px 32px rgba(124, 58, 237, 0.42)', }, borderRadius: { DEFAULT: '0.75rem', @@ -44,8 +44,8 @@ module.exports = { '50%': { transform: 'translateY(-8px)' }, }, 'tc-pulse-glow': { - '0%, 100%': { boxShadow: '0 4px 20px rgba(0, 98, 255, 0.28)' }, - '50%': { boxShadow: '0 8px 32px rgba(0, 98, 255, 0.42)' }, + '0%, 100%': { boxShadow: '0 4px 20px rgba(124, 58, 237, 0.28)' }, + '50%': { boxShadow: '0 8px 32px rgba(124, 58, 237, 0.42)' }, }, 'plus-breathe': { '0%, 100%': { transform: 'scale(1)' }, diff --git a/templates/legal/_layout.html b/templates/legal/_layout.html index 15cf9f1..b4b360f 100644 --- a/templates/legal/_layout.html +++ b/templates/legal/_layout.html @@ -27,7 +27,7 @@ height: 4px; margin-top: 0.5rem; border-radius: 4px; - background: linear-gradient(118deg, #0062ff, #00bdd8 52%, #00c896); + background: linear-gradient(118deg, #7c3aed, #a855f7 52%, #06b6d4); } .legal-content h3 { font-size: 1.25rem; /* 20px */ @@ -60,16 +60,16 @@ .legal-content ol { list-style-type: decimal; list-style-position: outside; } .legal-content li { margin-bottom: 0.35rem; } .legal-content a { - background: linear-gradient(118deg, #0062ff, #00bdd8 52%, #00c896); + background: linear-gradient(118deg, #7c3aed, #a855f7 52%, #06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; text-decoration: underline; - text-decoration-color: #0062ff; + text-decoration-color: #7c3aed; } .legal-content a:focus-visible { - outline: 2px solid #0062ff; + outline: 2px solid #7c3aed; outline-offset: 2px; border-radius: 2px; } @@ -95,7 +95,7 @@ background-color: #fafbfd; } .legal-content blockquote { - border-left: 4px solid #0062ff; + border-left: 4px solid #7c3aed; background-color: rgba(247, 249, 252, 0.6); padding: 0.75rem 1rem; margin: 1.25rem 0; @@ -156,12 +156,12 @@ transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease; } .legal-toc a:hover { - background-color: rgba(0, 98, 255, 0.05); + background-color: rgba(124, 58, 237, 0.05); } .legal-toc a.is-active { - border-left-color: #0062ff; - color: #0062ff !important; - background-color: rgba(0, 98, 255, 0.06); + border-left-color: #7c3aed; + color: #7c3aed !important; + background-color: rgba(124, 58, 237, 0.06); } .legal-breadcrumb { position: sticky; diff --git a/templates/legal/index.html b/templates/legal/index.html index 694e81b..026845c 100644 --- a/templates/legal/index.html +++ b/templates/legal/index.html @@ -13,16 +13,16 @@ transform: translateY(-2px); } .legal-card:focus-visible { - outline: 2px solid #0062ff; + outline: 2px solid #7c3aed; outline-offset: 3px; } /* Icône circulaire avec dégradé de marque, contraste suffisant. */ .legal-card-icon { - background: linear-gradient(135deg, rgba(0,98,255,0.10), rgba(0,200,150,0.10)); - color: #0062ff; + background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(6,182,212,0.10)); + color: #7c3aed; } .legal-card.is-external .legal-card-icon { - background: linear-gradient(135deg, rgba(0,189,216,0.12), rgba(0,200,150,0.12)); + background: linear-gradient(135deg, rgba(168,85,247,0.12), rgba(6,182,212,0.12)); } /* Print : pas de bouton CTA, pas d'animations. */ @media print { diff --git a/templates/marketing/conformite.html b/templates/marketing/conformite.html index be3ec10..8a908bf 100644 --- a/templates/marketing/conformite.html +++ b/templates/marketing/conformite.html @@ -8,7 +8,7 @@ {# ===== HEADER ===== #}
+ style="background: radial-gradient(circle, rgba(6,182,212,0.07) 0%, transparent 60%); filter: blur(60px);">

CONFORMITÉ — FORTERESSE QUÉBÉCOISE

diff --git a/templates/marketing/fonctionnalites.html b/templates/marketing/fonctionnalites.html index 97d5962..c044112 100644 --- a/templates/marketing/fonctionnalites.html +++ b/templates/marketing/fonctionnalites.html @@ -15,7 +15,7 @@ bottom: -10px; width: 0; height: 3px; - background: linear-gradient(118deg, #0062ff, #00bdd8 52%, #00c896); + background: linear-gradient(118deg, #7c3aed, #a855f7 52%, #06b6d4); transform: translateX(-50%); transition: width 600ms ease-out; } @@ -27,16 +27,16 @@ /* Hover lift cards */ .ani-lift { transition: transform 200ms ease-out, box-shadow 200ms ease-out; } - .ani-lift:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 98, 255, 0.18); } + .ani-lift:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(124, 58, 237, 0.18); } /* Sticky sub-nav active link */ - .subnav-link[aria-current="true"] { color: #0062ff; } + .subnav-link[aria-current="true"] { color: #7c3aed; } .subnav-link[aria-current="true"]::after { content: ''; display: block; height: 2px; margin-top: 4px; - background: linear-gradient(118deg, #0062ff, #00bdd8 52%, #00c896); + background: linear-gradient(118deg, #7c3aed, #a855f7 52%, #06b6d4); } /* Cosmic float orbs (n'utilise pas tc-float-y pour éviter rebuild) */ @@ -46,8 +46,8 @@ /* DictIA Cloud pulse glow */ @keyframes card-pulse-glow { - 0%, 100% { box-shadow: 0 4px 20px rgba(0, 98, 255, 0.28); } - 50% { box-shadow: 0 12px 40px rgba(0, 98, 255, 0.5); } + 0%, 100% { box-shadow: 0 4px 20px rgba(124, 58, 237, 0.28); } + 50% { box-shadow: 0 12px 40px rgba(124, 58, 237, 0.5); } } .card-pulse-glow { animation: card-pulse-glow 3s ease-in-out infinite; } @@ -76,13 +76,13 @@ {# Cosmic orbs background — float animation subtile #}
+ style="background: radial-gradient(circle, rgba(6,182,212,0.07) 0%, transparent 60%); filter: blur(40px);">

+ style="background: linear-gradient(90deg, transparent, rgba(124,58,237,0.3), rgba(6,182,212,0.2), transparent);">
@@ -330,7 +330,7 @@ {# ===== ARCHITECTURE & INFRASTRUCTURE ===== #}
+ style="background: radial-gradient(circle, rgba(6,182,212,0.08) 0%, transparent 60%); filter: blur(60px);">
diff --git a/templates/marketing/landing.html b/templates/marketing/landing.html index e7ce8e4..6e6251d 100644 --- a/templates/marketing/landing.html +++ b/templates/marketing/landing.html @@ -19,7 +19,7 @@ } .hero-flow-card.is-active { transform: scale(1.05); - box-shadow: 0 0 22px rgba(0, 189, 216, 0.45), 0 0 44px rgba(0, 98, 255, 0.18); + box-shadow: 0 0 22px rgba(6, 182, 212, 0.45), 0 0 44px rgba(124, 58, 237, 0.18); } .hero-flow-card.is-inactive { opacity: 0.45; } /* Animated arrow draw between cards */ @@ -63,7 +63,7 @@ border-radius: 9999px; pointer-events: none; z-index: 9999; - background: radial-gradient(circle, rgba(0,189,216,0.18) 0%, rgba(0,98,255,0.10) 50%, transparent 70%); + background: radial-gradient(circle, rgba(6,182,212,0.18) 0%, rgba(124,58,237,0.10) 50%, transparent 70%); animation: hero-shockwave 700ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } /* ── Word-staggered title reveal ── */ @@ -144,23 +144,23 @@ - {# Cosmic orbs background — 3 radial gradients (blue 16%, cyan 7%, green 11%) + subtle grid + horizontal accent line #} + {# Cosmic orbs background — 3 radial gradients (mauve 16%, aqua 7%, aqua 11%) + subtle grid + horizontal accent line #} + {# Orb 2 — aqua, mid-right #}
- {# Orb 3 — accent green, bottom-left #} + style="background: radial-gradient(circle, rgba(6,182,212,0.07) 0%, transparent 60%); filter: blur(40px);">
+ {# Orb 3 — aqua accent, bottom-left #}
+ style="background: radial-gradient(circle, rgba(6,182,212,0.11) 0%, transparent 60%); filter: blur(40px);">
{# Subtle grid overlay (FlexiHub signature) #}
- {# Horizontal accent line — gradient blue to cyan to transparent #} + {# Horizontal accent line — gradient mauve to aqua to transparent #}
+ style="background: linear-gradient(90deg, transparent, rgba(124,58,237,0.3), rgba(6,182,212,0.2), transparent);"> {# 3D abstract orb — reacts to mouse via Alpine ox/oy → CSS variables #} @@ -174,14 +174,14 @@
{# Ambient blob #}
+ style="background: radial-gradient(ellipse at 40% 40%, rgba(167,139,250,0.14) 0%, rgba(6,182,212,0.07) 50%, transparent 75%); filter: blur(20px);"> {# Rotating mesh ring A #}
{# Rotating mesh ring B #}
{# Inner glow core #}
+ style="background: radial-gradient(circle, rgba(167,139,250,0.25) 0%, rgba(6,182,212,0.08) 60%, transparent 100%);"> @@ -273,7 +273,7 @@ {# Pulse halo behind the primary CTA #} {# Halo ambiant #} + style="background: radial-gradient(ellipse 80% 35% at 50% 0%, rgba(6,182,212,0.12) 0%, transparent 65%);">
{# Numéro 03 → checkmark vert (round 4) #} @@ -870,7 +870,7 @@
{# Single subtle orb in solution bg — less busy than hero #} + style="background: radial-gradient(circle, rgba(6,182,212,0.08) 0%, transparent 60%); filter: blur(60px);">
@@ -1024,13 +1024,13 @@ {# Order bar — visible quand p ≈ 1 #} - + {% endfor %} {# Bouclier holographique (état ordre) #} @@ -1038,18 +1038,18 @@ {# Icône Texte transcrit (droite) #} @@ -1386,7 +1386,7 @@
{# Subtle orb décoratif #} + style="background: radial-gradient(circle, rgba(6,182,212,0.15) 0%, transparent 60%); filter: blur(30px);">
@@ -1470,8 +1470,8 @@ .hub-ring-3 { animation-delay: 2s; } /* DictIA core breathing glow */ @keyframes hub-core-breathe { - 0%, 100% { box-shadow: 0 0 26px rgba(0,189,216,0.55), 0 0 56px rgba(0,189,216,0.18); } - 50% { box-shadow: 0 0 38px rgba(0,189,216,0.75), 0 0 72px rgba(0,189,216,0.28); } + 0%, 100% { box-shadow: 0 0 26px rgba(168,85,247,0.55), 0 0 56px rgba(168,85,247,0.18); } + 50% { box-shadow: 0 0 38px rgba(168,85,247,0.75), 0 0 72px rgba(168,85,247,0.28); } } .hub-core { animation: hub-core-breathe 3.5s ease-in-out infinite; } /* Reduced motion : freeze everything */ @@ -1482,9 +1482,9 @@ }
- {# Decorative cosmic orb — cyan, mid-section #} + {# Decorative cosmic orb — aqua, mid-section #} + style="background: radial-gradient(circle, rgba(6,182,212,0.10) 0%, transparent 60%); filter: blur(60px);">
@@ -1533,25 +1533,25 @@ {# Render bezier connections (visible strokes) — DictIA → Hubs (thick), Hub → Tools (thin) #} {# DictIA → Hubs #} - - + + {# Hub → Tool (lighter) #} - - - - - - + + + + + + {# Animated particles — DictIA → Hubs (bigger, dual particles) #} {% for hub in [ - ('docs', '#0062ff', '0s', '2.4s'), - ('comm', '#00bdd8', '0.8s', '2.4s'), + ('docs', '#7c3aed', '0s', '2.4s'), + ('comm', '#06b6d4', '0.8s', '2.4s'), ('auto', '#8b5cf6', '1.6s', '2.4s') ] %} @@ -1568,12 +1568,12 @@ {# Animated particles — Hub → Tool (smaller, fast) #} {% for tool in [ - ('word', '#0062ff', '0s'), - ('google', '#0062ff', '0.4s'), - ('obsidian', '#0062ff', '0.8s'), - ('outlook', '#00bdd8', '0.2s'), - ('teams', '#00bdd8', '0.6s'), - ('notion', '#00bdd8', '1.0s'), + ('word', '#7c3aed', '0s'), + ('google', '#7c3aed', '0.4s'), + ('obsidian', '#7c3aed', '0.8s'), + ('outlook', '#06b6d4', '0.2s'), + ('teams', '#06b6d4', '0.6s'), + ('notion', '#06b6d4', '1.0s'), ('zapier', '#8b5cf6', '0.1s'), ('make', '#8b5cf6', '0.5s'), ('n8n', '#8b5cf6', '0.9s') @@ -1602,8 +1602,8 @@ {# Hub labels overlay — positioned to match SVG hub coords (200/460 = 43.5% top, 168/900=18.7% / 450/900=50% / 732/900=81.3% left) #} {% set hub_data = [ - ('Documents', 'Word · Google Docs · Obsidian', '18.7%', 'rgba(0,98,255,0.10)', 'rgba(0,98,255,0.30)', 'text-blue-300'), - ('Communication', 'Outlook · Teams · Notion', '50%', 'rgba(0,189,216,0.10)', 'rgba(0,189,216,0.30)', 'text-cyan-300'), + ('Documents', 'Word · Google Docs · Obsidian', '18.7%', 'rgba(124,58,237,0.10)', 'rgba(124,58,237,0.30)', 'text-violet-300'), + ('Communication', 'Outlook · Teams · Notion', '50%', 'rgba(6,182,212,0.10)', 'rgba(6,182,212,0.30)', 'text-cyan-300'), ('Automatisation', 'Zapier · Make · n8n', '81.3%', 'rgba(139,92,246,0.10)', 'rgba(139,92,246,0.30)', 'text-purple-300') ] %} {% for name, sub, leftpos, bgcol, brdcol, txtcol in hub_data %} @@ -1814,9 +1814,9 @@ {# ===== CONFORMITÉ FORTERESSE ===== #}
- {# Subtle decorative orb — green this time, like the Solution section #} + {# Subtle decorative orb — aqua, like the Solution section #} + style="background: radial-gradient(circle, rgba(6,182,212,0.07) 0%, transparent 60%); filter: blur(60px);">
@@ -2148,7 +2148,7 @@ @@ -2225,15 +2225,15 @@ + style="border-color: {{ 'rgba(239,68,68,0.20)' if reg.risk else 'rgba(124,58,237,0.15)' }};">
{{ reg.label }} + style="color: {{ '#dc2626' if reg.risk else '#7c3aed' }};">{{ reg.label }} {{ reg.detail | safe }}
@@ -2513,9 +2513,9 @@ {# Two warm cosmic orbs to mirror the Hero — visual closure of the page #}
+ style="background: radial-gradient(circle, rgba(6,182,212,0.10) 0%, transparent 60%); filter: blur(50px);">
diff --git a/templates/marketing/tarifs.html b/templates/marketing/tarifs.html index 6685b6a..88e132a 100644 --- a/templates/marketing/tarifs.html +++ b/templates/marketing/tarifs.html @@ -117,7 +117,7 @@

diff --git a/tests/test_marketing_landing_template.py b/tests/test_marketing_landing_template.py index f63f3db..b48c4d0 100644 --- a/tests/test_marketing_landing_template.py +++ b/tests/test_marketing_landing_template.py @@ -110,13 +110,13 @@ def test_hero_has_dual_cta(): def test_hero_has_cosmic_orbs_background(): - """Hero has 3 radial gradient orbs (FlexiHub signature).""" + """Hero has 3 radial gradient orbs (FlexiHub signature, mauve/aqua palette).""" client = app.test_client() body = client.get('/').data.decode('utf-8') - # Look for the 3 orb opacities (16% blue, 7% cyan, 11% green) - assert 'rgba(0,98,255,0.16)' in body, "Missing primary blue orb" - assert 'rgba(0,189,216,0.07)' in body, "Missing cyan orb" - assert 'rgba(0,200,150,0.11)' in body, "Missing green accent orb" + # Look for the 3 orb opacities (16% mauve, 7% aqua, 11% aqua accent) + assert 'rgba(124,58,237,0.16)' in body, "Missing primary mauve orb" + assert 'rgba(6,182,212,0.07)' in body, "Missing aqua orb" + assert 'rgba(6,182,212,0.11)' in body, "Missing aqua accent orb" def test_hero_has_social_proof_microcopy():