feat(marketing): round 2 — intègre 3 sections de dictia.ca/solutions/dictai (cycle/wave/cadre)
- Cycle "Trois options. Une seule est conforme." (entre PAS Problème & Solution) 3 colonnes comparatives (humaine 315$/h / cloud US illégal / DictIA 173$/mo) Phases reveal 1→4 via IntersectionObserver + setTimeout chain Anneaux pulsants source node + horloge rotation + particules fuites cloud Overlay légal NON CONFORME sur col 2 - Wave "Onde de transformation" (entre Solution & Pipeline) Slider mouse-X interactif : 30 barres SVG morphent rouge → cyan Particules tombantes -$/-h (CSS keyframes staggered) Étiquettes douleur PAINS / SOLUTIONS flottantes Mobile : toggle button, pas de mouse interaction - Cadre réglementaire "Moniteur d'Interception" (entre Conformité & Témoignages) Mappe 6 textes officiels : Loi 25, Loi 96, Cloud Act US, Guide IA Barreau, Cadre IA MCN, CAI Liens vers sources autoritaires (legisquebec, congress.gov, barreau, tresor, cai) HUD console typing reveal + caret blink + folder QC→US transition aria-live="polite" sur verdict, role="list" sur REGS Texte 100% canonique extrait de Website-Sanity dictai-cycle/wave/contraste.tsx. Toutes animations CSS pure + Alpine.js + IntersectionObserver natif (zéro lib JS externe). prefers-reduced-motion désactive tout. +802 lignes landing.html, +119 lignes tests (6 nouveaux test_round2_*), npm run build:css exécuté. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Allison
@@ -135,6 +135,7 @@
|
||||
--leading-tight: 1.25;
|
||||
--leading-snug: 1.375;
|
||||
--leading-relaxed: 1.625;
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.375rem;
|
||||
--radius-lg: 0.5rem;
|
||||
--radius-xl: 0.75rem;
|
||||
@@ -144,6 +145,7 @@
|
||||
--animate-spin: spin 1s linear infinite;
|
||||
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
--blur-sm: 8px;
|
||||
--blur-md: 12px;
|
||||
--blur-xl: 24px;
|
||||
--blur-3xl: 64px;
|
||||
--default-transition-duration: 150ms;
|
||||
@@ -365,6 +367,9 @@
|
||||
.inset-0 {
|
||||
inset: calc(var(--spacing) * 0);
|
||||
}
|
||||
.inset-\[-8px\] {
|
||||
inset: -8px;
|
||||
}
|
||||
.inset-x-0 {
|
||||
inset-inline: calc(var(--spacing) * 0);
|
||||
}
|
||||
@@ -461,6 +466,9 @@
|
||||
.right-4 {
|
||||
right: calc(var(--spacing) * 4);
|
||||
}
|
||||
.right-\[3\%\] {
|
||||
right: 3%;
|
||||
}
|
||||
.-bottom-10 {
|
||||
bottom: calc(var(--spacing) * -10);
|
||||
}
|
||||
@@ -470,6 +478,9 @@
|
||||
.bottom-1\/4 {
|
||||
bottom: calc(1 / 4 * 100%);
|
||||
}
|
||||
.bottom-3 {
|
||||
bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
.bottom-4 {
|
||||
bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -512,12 +523,18 @@
|
||||
.left-80 {
|
||||
left: calc(var(--spacing) * 80);
|
||||
}
|
||||
.left-\[3\%\] {
|
||||
left: 3%;
|
||||
}
|
||||
.z-10 {
|
||||
z-index: 10;
|
||||
}
|
||||
.z-20 {
|
||||
z-index: 20;
|
||||
}
|
||||
.z-30 {
|
||||
z-index: 30;
|
||||
}
|
||||
.z-40 {
|
||||
z-index: 40;
|
||||
}
|
||||
@@ -674,9 +691,15 @@
|
||||
.mb-2 {
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
.mb-2\.5 {
|
||||
margin-bottom: calc(var(--spacing) * 2.5);
|
||||
}
|
||||
.mb-3 {
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
.mb-3\.5 {
|
||||
margin-bottom: calc(var(--spacing) * 3.5);
|
||||
}
|
||||
.mb-4 {
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -821,9 +844,21 @@
|
||||
.h-72 {
|
||||
height: calc(var(--spacing) * 72);
|
||||
}
|
||||
.h-\[1\.5px\] {
|
||||
height: 1.5px;
|
||||
}
|
||||
.h-\[2px\] {
|
||||
height: 2px;
|
||||
}
|
||||
.h-\[3px\] {
|
||||
height: 3px;
|
||||
}
|
||||
.h-\[17px\] {
|
||||
height: 17px;
|
||||
}
|
||||
.h-\[52px\] {
|
||||
height: 52px;
|
||||
}
|
||||
.h-\[62px\] {
|
||||
height: 62px;
|
||||
}
|
||||
@@ -833,6 +868,9 @@
|
||||
.h-\[88px\] {
|
||||
height: 88px;
|
||||
}
|
||||
.h-\[90px\] {
|
||||
height: 90px;
|
||||
}
|
||||
.h-\[95vh\] {
|
||||
height: 95vh;
|
||||
}
|
||||
@@ -917,6 +955,12 @@
|
||||
.min-h-screen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
.w-1 {
|
||||
width: calc(var(--spacing) * 1);
|
||||
}
|
||||
.w-1\.5 {
|
||||
width: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
.w-1\/2 {
|
||||
width: calc(1 / 2 * 100%);
|
||||
}
|
||||
@@ -992,12 +1036,21 @@
|
||||
.w-80 {
|
||||
width: calc(var(--spacing) * 80);
|
||||
}
|
||||
.w-\[3px\] {
|
||||
width: 3px;
|
||||
}
|
||||
.w-\[52px\] {
|
||||
width: 52px;
|
||||
}
|
||||
.w-\[68px\] {
|
||||
width: 68px;
|
||||
}
|
||||
.w-\[88px\] {
|
||||
width: 88px;
|
||||
}
|
||||
.w-\[100px\] {
|
||||
width: 100px;
|
||||
}
|
||||
.w-\[400px\] {
|
||||
width: 400px;
|
||||
}
|
||||
@@ -1016,6 +1069,9 @@
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
.w-px {
|
||||
width: 1px;
|
||||
}
|
||||
.max-w-2xl {
|
||||
max-width: var(--container-2xl);
|
||||
}
|
||||
@@ -1251,6 +1307,9 @@
|
||||
.grid-cols-7 {
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
}
|
||||
.grid-cols-\[2fr_2fr_3fr\] {
|
||||
grid-template-columns: 2fr 2fr 3fr;
|
||||
}
|
||||
.grid-cols-\[180px_1fr_170px\] {
|
||||
grid-template-columns: 180px 1fr 170px;
|
||||
}
|
||||
@@ -1311,6 +1370,9 @@
|
||||
.gap-4 {
|
||||
gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
.gap-5 {
|
||||
gap: calc(var(--spacing) * 5);
|
||||
}
|
||||
.gap-6 {
|
||||
gap: calc(var(--spacing) * 6);
|
||||
}
|
||||
@@ -1388,6 +1450,10 @@
|
||||
-moz-column-gap: calc(var(--spacing) * 6);
|
||||
column-gap: calc(var(--spacing) * 6);
|
||||
}
|
||||
.gap-x-8 {
|
||||
-moz-column-gap: calc(var(--spacing) * 8);
|
||||
column-gap: calc(var(--spacing) * 8);
|
||||
}
|
||||
.space-x-1 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-x-reverse: 0;
|
||||
@@ -1429,6 +1495,9 @@
|
||||
.gap-y-2 {
|
||||
row-gap: calc(var(--spacing) * 2);
|
||||
}
|
||||
.gap-y-3 {
|
||||
row-gap: calc(var(--spacing) * 3);
|
||||
}
|
||||
.divide-y {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-divide-y-reverse: 0;
|
||||
@@ -1480,6 +1549,9 @@
|
||||
.rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
.rounded-sm {
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.rounded-xl {
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
@@ -1622,6 +1694,21 @@
|
||||
.border-brand-b1 {
|
||||
border-color: #0062ff;
|
||||
}
|
||||
.border-brand-b1\/15 {
|
||||
border-color: color-mix(in oklab, #0062ff 15%, transparent);
|
||||
}
|
||||
.border-brand-b1\/20 {
|
||||
border-color: color-mix(in oklab, #0062ff 20%, transparent);
|
||||
}
|
||||
.border-brand-b1\/25 {
|
||||
border-color: color-mix(in oklab, #0062ff 25%, transparent);
|
||||
}
|
||||
.border-brand-b1\/30 {
|
||||
border-color: color-mix(in oklab, #0062ff 30%, transparent);
|
||||
}
|
||||
.border-brand-b1\/35 {
|
||||
border-color: color-mix(in oklab, #0062ff 35%, transparent);
|
||||
}
|
||||
.border-brand-b2\/40 {
|
||||
border-color: color-mix(in oklab, #00bdd8 40%, transparent);
|
||||
}
|
||||
@@ -1664,6 +1751,9 @@
|
||||
border-color: color-mix(in oklab, var(--color-purple-500) 30%, transparent);
|
||||
}
|
||||
}
|
||||
.border-red-100 {
|
||||
border-color: var(--color-red-100);
|
||||
}
|
||||
.border-red-200 {
|
||||
border-color: var(--color-red-200);
|
||||
}
|
||||
@@ -1703,6 +1793,12 @@
|
||||
border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
|
||||
}
|
||||
}
|
||||
.border-white\/15 {
|
||||
border-color: color-mix(in srgb, #fff 15%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
|
||||
}
|
||||
}
|
||||
.border-white\/20 {
|
||||
border-color: color-mix(in srgb, #fff 20%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
@@ -1844,12 +1940,21 @@
|
||||
.bg-amber-100 {
|
||||
background-color: var(--color-amber-100);
|
||||
}
|
||||
.bg-amber-500 {
|
||||
background-color: var(--color-amber-500);
|
||||
}
|
||||
.bg-amber-500\/10 {
|
||||
background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-amber-500\/15 {
|
||||
background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 15%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-amber-500) 15%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-amber-500\/20 {
|
||||
background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
@@ -1898,12 +2003,18 @@
|
||||
.bg-brand-b1 {
|
||||
background-color: #0062ff;
|
||||
}
|
||||
.bg-brand-b1\/5 {
|
||||
background-color: color-mix(in oklab, #0062ff 5%, transparent);
|
||||
}
|
||||
.bg-brand-b1\/10 {
|
||||
background-color: color-mix(in oklab, #0062ff 10%, transparent);
|
||||
}
|
||||
.bg-brand-b1\/15 {
|
||||
background-color: color-mix(in oklab, #0062ff 15%, transparent);
|
||||
}
|
||||
.bg-brand-b1\/\[0\.06\] {
|
||||
background-color: color-mix(in oklab, #0062ff 6%, transparent);
|
||||
}
|
||||
.bg-brand-b3\/10 {
|
||||
background-color: color-mix(in oklab, #00c896 10%, transparent);
|
||||
}
|
||||
@@ -1925,6 +2036,18 @@
|
||||
.bg-brand-navy {
|
||||
background-color: #060d1a;
|
||||
}
|
||||
.bg-brand-navy\/10 {
|
||||
background-color: color-mix(in oklab, #060d1a 10%, transparent);
|
||||
}
|
||||
.bg-brand-navy\/15 {
|
||||
background-color: color-mix(in oklab, #060d1a 15%, transparent);
|
||||
}
|
||||
.bg-brand-navy\/30 {
|
||||
background-color: color-mix(in oklab, #060d1a 30%, transparent);
|
||||
}
|
||||
.bg-brand-navy\/80 {
|
||||
background-color: color-mix(in oklab, #060d1a 80%, transparent);
|
||||
}
|
||||
.bg-brand-navy\/\[0\.97\] {
|
||||
background-color: color-mix(in oklab, #060d1a 97%, transparent);
|
||||
}
|
||||
@@ -2033,9 +2156,24 @@
|
||||
.bg-red-50 {
|
||||
background-color: var(--color-red-50);
|
||||
}
|
||||
.bg-red-50\/30 {
|
||||
background-color: color-mix(in srgb, oklch(97.1% 0.013 17.38) 30%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-red-50) 30%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-red-100 {
|
||||
background-color: var(--color-red-100);
|
||||
}
|
||||
.bg-red-100\/60 {
|
||||
background-color: color-mix(in srgb, oklch(93.6% 0.032 17.717) 60%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-red-100) 60%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-red-400 {
|
||||
background-color: var(--color-red-400);
|
||||
}
|
||||
.bg-red-500\/10 {
|
||||
background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
@@ -2169,6 +2307,14 @@
|
||||
--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, #0062ff 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-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 {
|
||||
--tw-gradient-from: var(--color-orange-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));
|
||||
@@ -2208,6 +2354,14 @@
|
||||
--tw-gradient-to: var(--color-amber-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));
|
||||
}
|
||||
.to-brand-b3\/10 {
|
||||
--tw-gradient-to: color-mix(in oklab, #00c896 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-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 {
|
||||
--tw-gradient-to: var(--color-purple-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));
|
||||
@@ -2292,6 +2446,9 @@
|
||||
.px-3 {
|
||||
padding-inline: calc(var(--spacing) * 3);
|
||||
}
|
||||
.px-3\.5 {
|
||||
padding-inline: calc(var(--spacing) * 3.5);
|
||||
}
|
||||
.px-4 {
|
||||
padding-inline: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -2331,9 +2488,15 @@
|
||||
.py-4 {
|
||||
padding-block: calc(var(--spacing) * 4);
|
||||
}
|
||||
.py-5 {
|
||||
padding-block: calc(var(--spacing) * 5);
|
||||
}
|
||||
.py-6 {
|
||||
padding-block: calc(var(--spacing) * 6);
|
||||
}
|
||||
.py-7 {
|
||||
padding-block: calc(var(--spacing) * 7);
|
||||
}
|
||||
.py-8 {
|
||||
padding-block: calc(var(--spacing) * 8);
|
||||
}
|
||||
@@ -2515,6 +2678,9 @@
|
||||
font-size: var(--text-xs);
|
||||
line-height: var(--tw-leading, var(--text-xs--line-height));
|
||||
}
|
||||
.text-\[8px\] {
|
||||
font-size: 8px;
|
||||
}
|
||||
.text-\[9px\] {
|
||||
font-size: 9px;
|
||||
}
|
||||
@@ -2524,6 +2690,9 @@
|
||||
.text-\[11px\] {
|
||||
font-size: 11px;
|
||||
}
|
||||
.text-\[12px\] {
|
||||
font-size: 12px;
|
||||
}
|
||||
.text-\[13px\] {
|
||||
font-size: 13px;
|
||||
}
|
||||
@@ -2606,6 +2775,30 @@
|
||||
--tw-tracking: 0.12em;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
.tracking-\[0\.14em\] {
|
||||
--tw-tracking: 0.14em;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
.tracking-\[0\.16em\] {
|
||||
--tw-tracking: 0.16em;
|
||||
letter-spacing: 0.16em;
|
||||
}
|
||||
.tracking-\[0\.18em\] {
|
||||
--tw-tracking: 0.18em;
|
||||
letter-spacing: 0.18em;
|
||||
}
|
||||
.tracking-\[0\.20em\] {
|
||||
--tw-tracking: 0.20em;
|
||||
letter-spacing: 0.20em;
|
||||
}
|
||||
.tracking-\[0\.22em\] {
|
||||
--tw-tracking: 0.22em;
|
||||
letter-spacing: 0.22em;
|
||||
}
|
||||
.tracking-\[0\.28em\] {
|
||||
--tw-tracking: 0.28em;
|
||||
letter-spacing: 0.28em;
|
||||
}
|
||||
.tracking-tight {
|
||||
--tw-tracking: var(--tracking-tight);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
@@ -2730,6 +2923,24 @@
|
||||
.text-brand-b1 {
|
||||
color: #0062ff;
|
||||
}
|
||||
.text-brand-b1\/45 {
|
||||
color: color-mix(in oklab, #0062ff 45%, transparent);
|
||||
}
|
||||
.text-brand-b1\/55 {
|
||||
color: color-mix(in oklab, #0062ff 55%, transparent);
|
||||
}
|
||||
.text-brand-b1\/60 {
|
||||
color: color-mix(in oklab, #0062ff 60%, transparent);
|
||||
}
|
||||
.text-brand-b1\/65 {
|
||||
color: color-mix(in oklab, #0062ff 65%, transparent);
|
||||
}
|
||||
.text-brand-b1\/70 {
|
||||
color: color-mix(in oklab, #0062ff 70%, transparent);
|
||||
}
|
||||
.text-brand-b1\/80 {
|
||||
color: color-mix(in oklab, #0062ff 80%, transparent);
|
||||
}
|
||||
.text-brand-b2 {
|
||||
color: #00bdd8;
|
||||
}
|
||||
@@ -2742,18 +2953,33 @@
|
||||
.text-brand-navy\/30 {
|
||||
color: color-mix(in oklab, #060d1a 30%, transparent);
|
||||
}
|
||||
.text-brand-navy\/35 {
|
||||
color: color-mix(in oklab, #060d1a 35%, transparent);
|
||||
}
|
||||
.text-brand-navy\/40 {
|
||||
color: color-mix(in oklab, #060d1a 40%, transparent);
|
||||
}
|
||||
.text-brand-navy\/45 {
|
||||
color: color-mix(in oklab, #060d1a 45%, transparent);
|
||||
}
|
||||
.text-brand-navy\/50 {
|
||||
color: color-mix(in oklab, #060d1a 50%, transparent);
|
||||
}
|
||||
.text-brand-navy\/55 {
|
||||
color: color-mix(in oklab, #060d1a 55%, transparent);
|
||||
}
|
||||
.text-brand-navy\/60 {
|
||||
color: color-mix(in oklab, #060d1a 60%, transparent);
|
||||
}
|
||||
.text-brand-navy\/65 {
|
||||
color: color-mix(in oklab, #060d1a 65%, transparent);
|
||||
}
|
||||
.text-brand-navy\/70 {
|
||||
color: color-mix(in oklab, #060d1a 70%, transparent);
|
||||
}
|
||||
.text-brand-navy\/75 {
|
||||
color: color-mix(in oklab, #060d1a 75%, transparent);
|
||||
}
|
||||
.text-brand-navy\/80 {
|
||||
color: color-mix(in oklab, #060d1a 80%, transparent);
|
||||
}
|
||||
@@ -2769,6 +2995,9 @@
|
||||
.text-emerald-500 {
|
||||
color: var(--color-emerald-500);
|
||||
}
|
||||
.text-emerald-600 {
|
||||
color: var(--color-emerald-600);
|
||||
}
|
||||
.text-gray-200 {
|
||||
color: var(--color-gray-200);
|
||||
}
|
||||
@@ -2832,6 +3061,36 @@
|
||||
.text-red-500 {
|
||||
color: var(--color-red-500);
|
||||
}
|
||||
.text-red-500\/60 {
|
||||
color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 60%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
color: color-mix(in oklab, var(--color-red-500) 60%, transparent);
|
||||
}
|
||||
}
|
||||
.text-red-500\/65 {
|
||||
color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 65%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
color: color-mix(in oklab, var(--color-red-500) 65%, transparent);
|
||||
}
|
||||
}
|
||||
.text-red-500\/70 {
|
||||
color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 70%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
color: color-mix(in oklab, var(--color-red-500) 70%, transparent);
|
||||
}
|
||||
}
|
||||
.text-red-500\/75 {
|
||||
color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 75%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
color: color-mix(in oklab, var(--color-red-500) 75%, transparent);
|
||||
}
|
||||
}
|
||||
.text-red-500\/80 {
|
||||
color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 80%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
color: color-mix(in oklab, var(--color-red-500) 80%, transparent);
|
||||
}
|
||||
}
|
||||
.text-red-600 {
|
||||
color: var(--color-red-600);
|
||||
}
|
||||
@@ -2880,6 +3139,12 @@
|
||||
color: color-mix(in oklab, var(--color-white) 50%, transparent);
|
||||
}
|
||||
}
|
||||
.text-white\/55 {
|
||||
color: color-mix(in srgb, #fff 55%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
color: color-mix(in oklab, var(--color-white) 55%, transparent);
|
||||
}
|
||||
}
|
||||
.text-white\/60 {
|
||||
color: color-mix(in srgb, #fff 60%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
@@ -2938,6 +3203,9 @@
|
||||
--tw-numeric-spacing: tabular-nums;
|
||||
font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
|
||||
}
|
||||
.no-underline {
|
||||
text-decoration-line: none;
|
||||
}
|
||||
.underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
@@ -3007,6 +3275,9 @@
|
||||
.opacity-100 {
|
||||
opacity: 100%;
|
||||
}
|
||||
.opacity-\[0\.02\] {
|
||||
opacity: 0.02;
|
||||
}
|
||||
.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);
|
||||
@@ -3015,6 +3286,10 @@
|
||||
--tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
|
||||
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_6px_\#F59E0B\] {
|
||||
--tw-shadow: 0 0 6px var(--tw-shadow-color, #F59E0B);
|
||||
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));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
@@ -3095,6 +3370,10 @@
|
||||
--tw-backdrop-blur: blur(8px);
|
||||
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
}
|
||||
.backdrop-blur-md {
|
||||
--tw-backdrop-blur: blur(var(--blur-md));
|
||||
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
}
|
||||
.backdrop-blur-sm {
|
||||
--tw-backdrop-blur: blur(var(--blur-sm));
|
||||
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
@@ -3215,6 +3494,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.group-hover\:opacity-60 {
|
||||
&:is(:where(.group):hover *) {
|
||||
@media (hover: hover) {
|
||||
opacity: 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.group-hover\:opacity-100 {
|
||||
&:is(:where(.group):hover *) {
|
||||
@media (hover: hover) {
|
||||
@@ -4215,6 +4501,11 @@
|
||||
outline-offset: 4px;
|
||||
}
|
||||
}
|
||||
.focus-visible\:outline-amber-500 {
|
||||
&:focus-visible {
|
||||
outline-color: var(--color-amber-500);
|
||||
}
|
||||
}
|
||||
.focus-visible\:outline-brand-b1 {
|
||||
&:focus-visible {
|
||||
outline-color: #0062ff;
|
||||
@@ -4619,11 +4910,31 @@
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
.md\:block {
|
||||
@media (width >= 48rem) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.md\:flex {
|
||||
@media (width >= 48rem) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.md\:hidden {
|
||||
@media (width >= 48rem) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.md\:h-5 {
|
||||
@media (width >= 48rem) {
|
||||
height: calc(var(--spacing) * 5);
|
||||
}
|
||||
}
|
||||
.md\:h-12 {
|
||||
@media (width >= 48rem) {
|
||||
height: calc(var(--spacing) * 12);
|
||||
}
|
||||
}
|
||||
.md\:h-48 {
|
||||
@media (width >= 48rem) {
|
||||
height: calc(var(--spacing) * 48);
|
||||
@@ -4634,11 +4945,31 @@
|
||||
min-height: 12rem;
|
||||
}
|
||||
}
|
||||
.md\:w-5 {
|
||||
@media (width >= 48rem) {
|
||||
width: calc(var(--spacing) * 5);
|
||||
}
|
||||
}
|
||||
.md\:w-12 {
|
||||
@media (width >= 48rem) {
|
||||
width: calc(var(--spacing) * 12);
|
||||
}
|
||||
}
|
||||
.md\:w-48 {
|
||||
@media (width >= 48rem) {
|
||||
width: calc(var(--spacing) * 48);
|
||||
}
|
||||
}
|
||||
.md\:w-\[42\%\] {
|
||||
@media (width >= 48rem) {
|
||||
width: 42%;
|
||||
}
|
||||
}
|
||||
.md\:w-\[58\%\] {
|
||||
@media (width >= 48rem) {
|
||||
width: 58%;
|
||||
}
|
||||
}
|
||||
.md\:grid-cols-2 {
|
||||
@media (width >= 48rem) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@@ -4654,6 +4985,11 @@
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
.md\:grid-cols-\[2fr_2fr_3fr\] {
|
||||
@media (width >= 48rem) {
|
||||
grid-template-columns: 2fr 2fr 3fr;
|
||||
}
|
||||
}
|
||||
.md\:flex-row {
|
||||
@media (width >= 48rem) {
|
||||
flex-direction: row;
|
||||
@@ -4674,6 +5010,18 @@
|
||||
gap: calc(var(--spacing) * 5);
|
||||
}
|
||||
}
|
||||
.md\:border-t-0 {
|
||||
@media (width >= 48rem) {
|
||||
border-top-style: var(--tw-border-style);
|
||||
border-top-width: 0px;
|
||||
}
|
||||
}
|
||||
.md\:border-l {
|
||||
@media (width >= 48rem) {
|
||||
border-left-style: var(--tw-border-style);
|
||||
border-left-width: 1px;
|
||||
}
|
||||
}
|
||||
.md\:p-2 {
|
||||
@media (width >= 48rem) {
|
||||
padding: calc(var(--spacing) * 2);
|
||||
@@ -4770,6 +5118,11 @@
|
||||
line-height: var(--tw-leading, var(--text-sm--line-height));
|
||||
}
|
||||
}
|
||||
.md\:text-\[10px\] {
|
||||
@media (width >= 48rem) {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
.lg\:relative {
|
||||
@media (width >= 64rem) {
|
||||
position: relative;
|
||||
|
||||
Reference in New Issue
Block a user