/* =========================================================================== Thème Qolaig pour Langfuse — injecté par nginx (sub_filter) avant . Valeurs relevées sur qolaig.com (feuille Webflow) et sur l'instance Langfuse déployée, pas inventées : Palette de marque Occurrences sur qolaig.com #28C0E0 cyan 58 -> 190 75% 52% (logo, accent principal) #F6F9FE blanc bleuté 17 -> 218 80% 98% #1F599D bleu profond 15 -> 212 67% 37% (7.06:1 sur blanc, AAA) #0D1D3F encre 14 -> 221 66% 15% #E6E9EF bordure 11 -> 220 22% 92% #F78028 orange 5 -> 26 93% 56% #D0F7FF cyan pâle 3 -> 190 100% 91% Police : Open Sauce One (auto-hébergée dans theme/fonts, 96 Ko en woff2) Langfuse v4 définit ses variables dans `:root` et `.dark` sous forme de TRIPLETS HSL nus, consommés via hsl(var(--x)) : les valeurs ci-dessous doivent rester « teinte saturation% luminosité% », sans hsl() ni virgules. Cette feuille se charge après celles de Langfuse : à spécificité égale elle l'emporte, aucun !important n'est nécessaire. Ce qui est remplacé : l'accent d'origine de Langfuse est un indigo (teintes 243 / 246). Tout bascule sur le couple cyan + bleu Qolaig. =========================================================================== */ /* --------------------------------------------------------------- Police --- Auto-hébergée : aucune requête vers un CDN tiers depuis le navigateur. font-display: swap — le texte reste lisible pendant le chargement. */ @font-face { font-family: "Open Sauce One"; src: url("/qolaig/fonts/OpenSauceOne-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sauce One"; src: url("/qolaig/fonts/OpenSauceOne-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sauce One"; src: url("/qolaig/fonts/OpenSauceOne-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sauce One"; src: url("/qolaig/fonts/OpenSauceOne-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ------------------------------------------------------------- Mode clair */ :root { /* Langfuse pilote sa typographie par --font-sans : on préfixe simplement. --font-mono n'est PAS touché, le code et les JSON gardent leur lisibilité. */ --font-sans: "Open Sauce One", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Boutons pleins : bleu profond de la marque. Le cyan #28C0E0 est écarté ici, il ne donne que 2.1:1 sous du texte blanc — sous le seuil WCAG AA. */ --primary: 212 67% 37%; /* #1F599D — était 222.2 47.4% 11.2% */ --primary-foreground: 0 0% 100%; --primary-accent: 190 75% 45%; /* était 243 75.4% 58.6% (indigo) */ --link: 212 67% 37%; /* était 246 40% 50% */ --link-hover: 221 66% 22%; /* était 246 55% 36% */ /* Anneau de focus au cyan de marque : c'est le point de contact le plus fréquent avec la couleur, et il n'a pas de contrainte de contraste texte. */ --ring: 190 75% 52%; /* #28C0E0 — était 215 20.2% 65.1% */ /* Survols et fonds secondaires : le cyan pâle de la charte */ --accent: 190 100% 93%; /* #D0F7FF — était 210 40% 96.1% */ --accent-foreground: 221 66% 20%; /* était 220 8.9% 46.1% */ /* Barre latérale */ --sidebar-primary: 212 67% 37%; /* était 240 5.9% 10% */ --sidebar-primary-foreground: 0 0% 100%; --sidebar-ring: 190 75% 52%; /* était 217.2 91.2% 59.8% */ --sidebar-accent: 190 100% 95%; /* était 210 40% 96.9% */ --sidebar-accent-foreground: 221 66% 18%; /* Graphiques : cyan et bleu de marque en tête, orange de la charte en 3e, puis des teintes distinctes pour rester lisible au-delà de 3 séries. */ --chart-1: 190 75% 52%; /* cyan #28C0E0 */ --chart-2: 212 67% 45%; /* bleu #1F599D */ --chart-3: 26 93% 56%; /* orange #F78028 */ --chart-4: 174 62% 42%; --chart-5: 262 55% 60%; --chart-6: 340 70% 55%; --chart-7: 84 55% 42%; --chart-8: 221 30% 45%; /* Jetons réutilisés par les règles hors variables, plus bas */ --qolaig-cyan: #28C0E0; --qolaig-blue: #1F599D; --qolaig-ink: #0D1D3F; } /* ------------------------------------------------------------ Mode sombre */ .dark { /* Sur fond sombre le cyan de marque passe en direct : ~7.2:1 avec l'encre. */ --primary: 190 75% 52%; /* était 0 0% 90% */ --primary-foreground: 221 66% 12%; /* encre #0D1D3F */ --primary-accent: 190 75% 62%; /* était 246 55% 70% */ --link: 190 75% 62%; /* était 246 55% 70% */ --link-hover: 190 90% 78%; /* était 246 95% 85% */ --ring: 190 75% 52%; /* était 246 55% 70% */ /* Fond de survol : gris neutre d'origine, retenté vers l'encre de la charte */ --accent: 221 40% 18%; /* était 0 0% 18% */ --accent-foreground: 190 55% 82%; /* était 0 0% 91% */ --sidebar-primary: 190 75% 52%; /* était 0 0% 90% */ --sidebar-primary-foreground: 221 66% 12%; --sidebar-ring: 190 75% 52%; --sidebar-accent: 221 40% 14%; /* était 0 0% 10% */ --sidebar-accent-foreground: 190 55% 80%; --chart-1: 190 75% 58%; --chart-2: 212 67% 60%; --chart-3: 26 93% 62%; --chart-4: 174 62% 50%; --chart-5: 262 60% 70%; --chart-6: 340 70% 66%; --chart-7: 84 55% 55%; --chart-8: 0 0% 65%; } /* =========================================================================== Logo nginx sert déjà la marque Qolaig à /icon.svg (le logo statique de Langfuse). theme.js reste un filet pour d'éventuels logos rendus en SVG inline. =========================================================================== */ .qolaig-logo { height: 26px; width: auto; max-width: 150px; object-fit: contain; display: block; } /* =========================================================================== Finitions =========================================================================== */ * { scrollbar-color: color-mix(in srgb, var(--qolaig-cyan) 55%, transparent) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--qolaig-cyan) 45%, transparent); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--qolaig-cyan) 70%, transparent); } ::selection { background: color-mix(in srgb, var(--qolaig-cyan) 30%, transparent); }