feat(brand): logo officiel DictIA + palette blue/cyan/fuchsia (matche le logo)
Logos officiels installés : - static/images/dictia-logo.png (28 KB optimisé 256×256) - static/images/dictia-logo-128.png (10 KB retina) - static/images/dictia-logo-fullres.png (originaux conservés OG/social) - static/images/dictia-logo.svg + dictia-logo-nom.svg (cleaned C2PA metadata) - Header marketing/base.html : <img> 40×40 + wordmark "DictIA" + tagline "Transcription" - Footer marketing/_footer.html : <img> 36×36 + wordmark - Favicon mis à jour vers logo PNG Note : SVG sources sont des PNG base64 wrappés (pas de vrais paths) — PNG utilisé en production (8× plus léger), SVG conservé pour fallback. Palette canonique alignée sur le logo : - brand-b1 : #7c3aed (mauve) → #2563eb (blue-600 vibrant — primary) - brand-b2 : #a855f7 (mauve clair) → #06b6d4 (cyan-500 — aqua mid) - brand-b3 : #06b6d4 (aqua) → #c026d3 (fuchsia-600 — magenta accent) - Gradient signature : linear-gradient(118deg, #2563eb, #06b6d4 52%, #c026d3) - Box shadow CTA : rgba(37,99,235,0.28/0.42) - 72 remplacements hex/rgba dans 5 templates marketing/legal + email service Tests : 81 passed / 3 failed (3 échecs pré-existants /blog + trust-bar phrasing, non liés à ce changement). 0 régression. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Allison
@@ -1703,31 +1703,31 @@
|
||||
}
|
||||
}
|
||||
.border-brand-b1 {
|
||||
border-color: #7c3aed;
|
||||
border-color: #2563eb;
|
||||
}
|
||||
.border-brand-b1\/15 {
|
||||
border-color: color-mix(in oklab, #7c3aed 15%, transparent);
|
||||
border-color: color-mix(in oklab, #2563eb 15%, transparent);
|
||||
}
|
||||
.border-brand-b1\/20 {
|
||||
border-color: color-mix(in oklab, #7c3aed 20%, transparent);
|
||||
border-color: color-mix(in oklab, #2563eb 20%, transparent);
|
||||
}
|
||||
.border-brand-b1\/25 {
|
||||
border-color: color-mix(in oklab, #7c3aed 25%, transparent);
|
||||
border-color: color-mix(in oklab, #2563eb 25%, transparent);
|
||||
}
|
||||
.border-brand-b1\/30 {
|
||||
border-color: color-mix(in oklab, #7c3aed 30%, transparent);
|
||||
border-color: color-mix(in oklab, #2563eb 30%, transparent);
|
||||
}
|
||||
.border-brand-b1\/35 {
|
||||
border-color: color-mix(in oklab, #7c3aed 35%, transparent);
|
||||
border-color: color-mix(in oklab, #2563eb 35%, transparent);
|
||||
}
|
||||
.border-brand-b2\/40 {
|
||||
border-color: color-mix(in oklab, #a855f7 40%, transparent);
|
||||
border-color: color-mix(in oklab, #06b6d4 40%, transparent);
|
||||
}
|
||||
.border-brand-b3\/15 {
|
||||
border-color: color-mix(in oklab, #06b6d4 15%, transparent);
|
||||
border-color: color-mix(in oklab, #c026d3 15%, transparent);
|
||||
}
|
||||
.border-brand-b3\/60 {
|
||||
border-color: color-mix(in oklab, #06b6d4 60%, transparent);
|
||||
border-color: color-mix(in oklab, #c026d3 60%, transparent);
|
||||
}
|
||||
.border-brand-border {
|
||||
border-color: #e6ebf2;
|
||||
@@ -2030,28 +2030,28 @@
|
||||
background-color: var(--color-blue-600);
|
||||
}
|
||||
.bg-brand-b1 {
|
||||
background-color: #7c3aed;
|
||||
background-color: #2563eb;
|
||||
}
|
||||
.bg-brand-b1\/5 {
|
||||
background-color: color-mix(in oklab, #7c3aed 5%, transparent);
|
||||
background-color: color-mix(in oklab, #2563eb 5%, transparent);
|
||||
}
|
||||
.bg-brand-b1\/10 {
|
||||
background-color: color-mix(in oklab, #7c3aed 10%, transparent);
|
||||
background-color: color-mix(in oklab, #2563eb 10%, transparent);
|
||||
}
|
||||
.bg-brand-b1\/15 {
|
||||
background-color: color-mix(in oklab, #7c3aed 15%, transparent);
|
||||
background-color: color-mix(in oklab, #2563eb 15%, transparent);
|
||||
}
|
||||
.bg-brand-b1\/\[0\.06\] {
|
||||
background-color: color-mix(in oklab, #7c3aed 6%, transparent);
|
||||
background-color: color-mix(in oklab, #2563eb 6%, transparent);
|
||||
}
|
||||
.bg-brand-b3 {
|
||||
background-color: #06b6d4;
|
||||
background-color: #c026d3;
|
||||
}
|
||||
.bg-brand-b3\/10 {
|
||||
background-color: color-mix(in oklab, #06b6d4 10%, transparent);
|
||||
background-color: color-mix(in oklab, #c026d3 10%, transparent);
|
||||
}
|
||||
.bg-brand-b3\/60 {
|
||||
background-color: color-mix(in oklab, #06b6d4 60%, transparent);
|
||||
background-color: color-mix(in oklab, #c026d3 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, #7c3aed 15%, transparent);
|
||||
--tw-gradient-from: color-mix(in oklab, #2563eb 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, #7c3aed 6%, transparent);
|
||||
--tw-gradient-from: color-mix(in oklab, #2563eb 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: #06b6d4;
|
||||
--tw-gradient-from: #c026d3;
|
||||
--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: #7c3aed;
|
||||
--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-b3\/10 {
|
||||
--tw-gradient-to: color-mix(in oklab, #06b6d4 10%, transparent);
|
||||
--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));
|
||||
}
|
||||
.to-brand-b3\/\[0\.04\] {
|
||||
--tw-gradient-to: color-mix(in oklab, #06b6d4 4%, transparent);
|
||||
--tw-gradient-to: color-mix(in oklab, #c026d3 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 {
|
||||
@@ -2998,31 +2998,31 @@
|
||||
color: var(--color-blue-900);
|
||||
}
|
||||
.text-brand-b1 {
|
||||
color: #7c3aed;
|
||||
color: #2563eb;
|
||||
}
|
||||
.text-brand-b1\/45 {
|
||||
color: color-mix(in oklab, #7c3aed 45%, transparent);
|
||||
color: color-mix(in oklab, #2563eb 45%, transparent);
|
||||
}
|
||||
.text-brand-b1\/55 {
|
||||
color: color-mix(in oklab, #7c3aed 55%, transparent);
|
||||
color: color-mix(in oklab, #2563eb 55%, transparent);
|
||||
}
|
||||
.text-brand-b1\/60 {
|
||||
color: color-mix(in oklab, #7c3aed 60%, transparent);
|
||||
color: color-mix(in oklab, #2563eb 60%, transparent);
|
||||
}
|
||||
.text-brand-b1\/65 {
|
||||
color: color-mix(in oklab, #7c3aed 65%, transparent);
|
||||
color: color-mix(in oklab, #2563eb 65%, transparent);
|
||||
}
|
||||
.text-brand-b1\/70 {
|
||||
color: color-mix(in oklab, #7c3aed 70%, transparent);
|
||||
color: color-mix(in oklab, #2563eb 70%, transparent);
|
||||
}
|
||||
.text-brand-b1\/80 {
|
||||
color: color-mix(in oklab, #7c3aed 80%, transparent);
|
||||
color: color-mix(in oklab, #2563eb 80%, transparent);
|
||||
}
|
||||
.text-brand-b2 {
|
||||
color: #a855f7;
|
||||
color: #06b6d4;
|
||||
}
|
||||
.text-brand-b3 {
|
||||
color: #06b6d4;
|
||||
color: #c026d3;
|
||||
}
|
||||
.text-brand-navy {
|
||||
color: #060d1a;
|
||||
@@ -3324,7 +3324,7 @@
|
||||
}
|
||||
}
|
||||
.accent-brand-b1 {
|
||||
accent-color: #7c3aed;
|
||||
accent-color: #2563eb;
|
||||
}
|
||||
.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\(124\,58\,237\,0\.35\)\] {
|
||||
--tw-shadow: 0 0 28px var(--tw-shadow-color, rgba(124,58,237,0.35));
|
||||
.shadow-\[0_0_28px_rgba\(37\,99\,235\,0\.35\)\] {
|
||||
--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\)\] {
|
||||
@@ -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(124, 58, 237, 0.28));
|
||||
--tw-shadow: 0 4px 20px var(--tw-shadow-color, rgba(37, 99, 235, 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: #7c3aed;
|
||||
color: #2563eb;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3789,14 +3789,14 @@
|
||||
.hover\:border-brand-b1 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
border-color: #7c3aed;
|
||||
border-color: #2563eb;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:border-brand-b1\/30 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
border-color: color-mix(in oklab, #7c3aed 30%, transparent);
|
||||
border-color: color-mix(in oklab, #2563eb 30%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -4150,7 +4150,7 @@
|
||||
.hover\:from-brand-b1 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
--tw-gradient-from: #7c3aed;
|
||||
--tw-gradient-from: #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));
|
||||
}
|
||||
}
|
||||
@@ -4190,7 +4190,7 @@
|
||||
.hover\:to-brand-b3 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
--tw-gradient-to: #06b6d4;
|
||||
--tw-gradient-to: #c026d3;
|
||||
--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: #7c3aed;
|
||||
color: #2563eb;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -4426,7 +4426,7 @@
|
||||
.hover\:shadow-cta {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
--tw-shadow: 0 4px 20px var(--tw-shadow-color, rgba(124, 58, 237, 0.28));
|
||||
--tw-shadow: 0 4px 20px var(--tw-shadow-color, rgba(37, 99, 235, 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(124, 58, 237, 0.42));
|
||||
--tw-shadow: 0 8px 32px var(--tw-shadow-color, rgba(37, 99, 235, 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: #7c3aed;
|
||||
outline-color: #2563eb;
|
||||
}
|
||||
}
|
||||
.focus-visible\:outline-red-700 {
|
||||
@@ -5890,13 +5890,13 @@
|
||||
}
|
||||
@layer utilities {
|
||||
.grad-text {
|
||||
background-image: linear-gradient(118deg, #7c3aed, #a855f7 52%, #06b6d4);
|
||||
background-image: linear-gradient(118deg, #2563eb, #06b6d4 52%, #c026d3);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.grad-bg {
|
||||
background-image: linear-gradient(118deg, #7c3aed, #a855f7 52%, #06b6d4);
|
||||
background-image: linear-gradient(118deg, #2563eb, #06b6d4 52%, #c026d3);
|
||||
color: var(--color-white);
|
||||
}
|
||||
.eyebrow {
|
||||
|
||||
Reference in New Issue
Block a user