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

refactor(brand): décale palette bleu→mauve dégradé (b1=#7c3aed, b2=#a855f7, b3=#06b6d4 aqua) pour différencier DictIA

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
Allison
2026-04-28 15:39:09 -04:00
parent 680df39089
commit 34d40162b3
9 changed files with 151 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
static/css/marketing.css
View File

@@ -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 {

16
static/css/tailwind.config.js
View File

@@ -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)' },