/*! * Mode sombre du site UPS in Space / OJBT — feuille generee, ne pas editer a la main. * Source : generer_mode_sombre.py * * Le theme Avada declare sa palette globale sur :root sous forme de variables * --awb-colorN, avec leurs composantes -h, -s, -l et -a que le theme recombine * dans des expressions hsla(). Redefinir les douze couleurs et leurs composantes * sous une portee plus specifique que :root bascule donc l'ensemble du theme, * sans modifier son CSS compile ni aucun reglage Fusion. * * Portee 1 : le visiteur a choisi explicitement (attribut data-theme sur ). * Portee 2 : le visiteur n'a rien choisi, on suit le reglage de son systeme. */ /* Le choix explicite du clair doit aussi aligner les widgets natifs. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { /* fond des surfaces et du contenu — #ffffff en clair */ --awb-color1: #101726; --awb-color1-h: 221; --awb-color1-s: 41%; --awb-color1-l: 11%; --awb-color1-a: 100%; /* bandeaux sombres, pied de page, survols — #1a1632 en clair */ --awb-color2: #1c1832; --awb-color2-h: 249; --awb-color2-s: 35%; --awb-color2-l: 15%; --awb-color2-a: 100%; /* filets, bordures et fonds secondaires — #b0c1d9 en clair */ --awb-color3: #2b3247; --awb-color3-h: 225; --awb-color3-s: 25%; --awb-color3-l: 22%; --awb-color3-a: 100%; /* bleu intermediaire, inchange : il tient sur les deux fonds — #5a90bf en clair */ --awb-color4: #5a90bf; --awb-color4-h: 208; --awb-color4-s: 44%; --awb-color4-l: 55%; --awb-color4-a: 100%; /* bleu des boutons, inchange pour la meme raison — #4393d9 en clair */ --awb-color5: #4393d9; --awb-color5-h: 208; --awb-color5-s: 66%; --awb-color5-l: 56%; --awb-color5-a: 100%; /* ocre d'accent, eclairci pour rester lisible — #a66a21 en clair */ --awb-color6: #d9a35a; --awb-color6-h: 34; --awb-color6-s: 63%; --awb-color6-l: 60%; --awb-color6-a: 100%; /* titres et textes appuyes — #101726 en clair */ --awb-color7: #f2f3f5; --awb-color7-h: 220; --awb-color7-s: 13%; --awb-color7-l: 95%; --awb-color7-a: 100%; /* texte courant, un cran en dessous des titres — #141126 en clair */ --awb-color8: #e8eaf0; --awb-color8-h: 225; --awb-color8-s: 21%; --awb-color8-l: 93%; --awb-color8-a: 100%; /* gris des mentions discretes — #c1c1c1 en clair */ --awb-custom_color_1: #838ba0; --awb-custom_color_1-h: 223; --awb-custom_color_1-s: 13%; --awb-custom_color_1-l: 57%; --awb-custom_color_1-a: 100%; /* bleu de lecture, eclairci pour tenir sur fond sombre — #2c4873 en clair */ --awb-custom_color_2: #8fb3d8; --awb-custom_color_2-h: 210; --awb-custom_color_2-s: 48%; --awb-custom_color_2-l: 70%; --awb-custom_color_2-a: 100%; /* fond tres clair, devient surface surelevee — #f2f3f5 en clair */ --awb-custom_color_3: #1a2135; --awb-custom_color_3-h: 226; --awb-custom_color_3-s: 31%; --awb-custom_color_3-l: 13%; --awb-custom_color_3-a: 100%; /* vert des etats favorables — #60c49f en clair */ --awb-custom_color_4: #6fce9f; --awb-custom_color_4-h: 150; --awb-custom_color_4-s: 49%; --awb-custom_color_4-l: 62%; --awb-custom_color_4-a: 100%; /* Aligne widgets natifs, ascenseurs et champs de formulaire. */ color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* fond des surfaces et du contenu — #ffffff en clair */ --awb-color1: #101726; --awb-color1-h: 221; --awb-color1-s: 41%; --awb-color1-l: 11%; --awb-color1-a: 100%; /* bandeaux sombres, pied de page, survols — #1a1632 en clair */ --awb-color2: #1c1832; --awb-color2-h: 249; --awb-color2-s: 35%; --awb-color2-l: 15%; --awb-color2-a: 100%; /* filets, bordures et fonds secondaires — #b0c1d9 en clair */ --awb-color3: #2b3247; --awb-color3-h: 225; --awb-color3-s: 25%; --awb-color3-l: 22%; --awb-color3-a: 100%; /* bleu intermediaire, inchange : il tient sur les deux fonds — #5a90bf en clair */ --awb-color4: #5a90bf; --awb-color4-h: 208; --awb-color4-s: 44%; --awb-color4-l: 55%; --awb-color4-a: 100%; /* bleu des boutons, inchange pour la meme raison — #4393d9 en clair */ --awb-color5: #4393d9; --awb-color5-h: 208; --awb-color5-s: 66%; --awb-color5-l: 56%; --awb-color5-a: 100%; /* ocre d'accent, eclairci pour rester lisible — #a66a21 en clair */ --awb-color6: #d9a35a; --awb-color6-h: 34; --awb-color6-s: 63%; --awb-color6-l: 60%; --awb-color6-a: 100%; /* titres et textes appuyes — #101726 en clair */ --awb-color7: #f2f3f5; --awb-color7-h: 220; --awb-color7-s: 13%; --awb-color7-l: 95%; --awb-color7-a: 100%; /* texte courant, un cran en dessous des titres — #141126 en clair */ --awb-color8: #e8eaf0; --awb-color8-h: 225; --awb-color8-s: 21%; --awb-color8-l: 93%; --awb-color8-a: 100%; /* gris des mentions discretes — #c1c1c1 en clair */ --awb-custom_color_1: #838ba0; --awb-custom_color_1-h: 223; --awb-custom_color_1-s: 13%; --awb-custom_color_1-l: 57%; --awb-custom_color_1-a: 100%; /* bleu de lecture, eclairci pour tenir sur fond sombre — #2c4873 en clair */ --awb-custom_color_2: #8fb3d8; --awb-custom_color_2-h: 210; --awb-custom_color_2-s: 48%; --awb-custom_color_2-l: 70%; --awb-custom_color_2-a: 100%; /* fond tres clair, devient surface surelevee — #f2f3f5 en clair */ --awb-custom_color_3: #1a2135; --awb-custom_color_3-h: 226; --awb-custom_color_3-s: 31%; --awb-custom_color_3-l: 13%; --awb-custom_color_3-a: 100%; /* vert des etats favorables — #60c49f en clair */ --awb-custom_color_4: #6fce9f; --awb-custom_color_4-h: 150; --awb-custom_color_4-s: 49%; --awb-custom_color_4-l: 62%; --awb-custom_color_4-a: 100%; /* Aligne widgets natifs, ascenseurs et champs de formulaire. */ color-scheme: dark; } } /* ── Reglages qui ne decoulent pas de la palette ───────────────────────────── */ /* Le fond du site ne vient pas de la palette mais d'une option distincte, que le theme expose elle aussi en variable (`--bg_color`, #1f4363 ici) et consomme en `background-color`. Redefinir la variable suffit, et vaut mieux que de disputer la regle `body` d'Avada : le bleu du pourtour suivrait sinon le mode clair et cernerait la page sombre. */ :root[data-theme="dark"] { --bg_color: #101726; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg_color: #101726; } } /* Le conteneur du pied de page tire son fond de `hsla(var(--awb-color7-h), …, calc(var(--awb-color7-l) + 4%), …)`, soit la couleur 7 eclaircie de 4 %. Or la couleur 7 est surchargee : elle sert de navy de bandeau ICI, et de couleur de texte ailleurs (titres, fil d'Ariane, texte de bouton). Inversee pour rester lisible en texte, elle transformait le pied en bande blanche eclatante sur une page sombre, exactement la lueur qu'un mode sombre doit eviter : 11 % + 4 % = #172036 en clair, mais 95 % + 4 % = #fcfcfd en sombre. Le fond du pied est donc repris ici sur la couleur 2, le jeton des bandeaux sombres, laisse sombre a dessein. Corriger la palette plutot que ce conteneur aurait rendu invisible tout texte servi par la couleur 7. */ :root[data-theme="dark"] .fusion-footer .fusion-footer-widget-area .fusion-fullwidth { background-color: var(--ojbt-fond-pied); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fusion-footer .fusion-footer-widget-area .fusion-fullwidth { background-color: var(--ojbt-fond-pied); } } /* ── Bouton de bascule ────────────────────────────────────────────────────── */ /* L'element de menu qui porte le bouton : Avada met ses menus en flex, l'entree ajoutee doit s'y aligner sans heriter des puces de liste. */ .ojbt-item-theme { display: flex; align-items: center; list-style: none; } /* Le bouton s'insère comme dernier élément du menu, juste après l'enveloppe de Contact : il en reprend donc les deux couleurs et le gabarit, pour que la ligne se lise d'un bloc. WHY plus de bordure : elle faisait du seul bouton du menu un objet encadré au milieu de mots nus, et depuis que les commandes du site sont en pilule, un cadre à angles presque vifs y détonnait deux fois. WHY plus d'opacité au repos : elle abaissait le contraste de l'icône sans que rien ne l'exige, et le survol ne se signalait que par le retour à l'opacité pleine, un écart trop faible pour se remarquer. WHY des jetons de la palette plutôt que « inherit » : la couleur de survol du menu est posée par Avada sur le lien, or ce bouton n'en est pas un et n'en héritait rien. Les deux jetons suivent la bascule clair/sombre d'eux-mêmes, et un changement de charte fait dans Avada les atteint sans revenir ici. */ .ojbt-bascule-theme { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; border-radius: 999px; color: var(--awb-color7); font: inherit; line-height: 1; /* WHY 13 px tout autour : le lien de l'enveloppe voisine mesure 44 px de haut, hauteur que lui donnent l'interligne de son glyphe et les marges réglées dans Avada. Le bouton, lui, n'a pas d'interligne à 1, et son glyphe mesure 18 px. Ces 13 px portent sa zone cliquable à 44 px sur 44, carrée comme le veut le repère retenu pour le site. */ padding: 13px; cursor: pointer; transition: color 0.15s ease; } .ojbt-bascule-theme:hover, .ojbt-bascule-theme:focus-visible { color: var(--awb-custom_color_2); } .ojbt-bascule-theme:focus-visible { outline: 2px solid var(--awb-custom_color_2); outline-offset: 3px; } /* WHY 18 px : l'enveloppe voisine est réglée à 22 px dans Avada et sort un glyphe d'environ 16 px de large, un caractère d'icône étant plus compact que sa taille nominale. Un tracé vectoriel, lui, occupe toute sa boîte. */ .ojbt-bascule-theme svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* Repli lorsqu'aucun menu n'a pu accueillir le bouton : il flotte alors en bas a droite, au-dessus du contenu, sur un fond pris dans la palette courante. */ .ojbt-bascule-theme--flottante { position: fixed; right: 16px; bottom: 16px; z-index: 9999; background: var(--awb-color1); color: var(--awb-color7); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); opacity: 1; } /* Le fondu de couleur au survol n'a pas lieu d'être pour qui demande moins de mouvement. */ @media (prefers-reduced-motion: reduce) { .ojbt-bascule-theme { transition: none; } } /* -- Agenda : deux couleurs figées par le greffon --------------------------- The Events Calendar écrit ces deux couleurs en dur, alors que ses propres variables basculent correctement avec le mode. Mesuré au navigateur, sur le site, dans les deux modes : - le titre d'un évènement sur plusieurs jours sortait exactement dans la couleur de son fond, 1,00:1, aussi bien en clair qu'en sombre. La pastille du 25 août était vide à l'œil ; - l'heure d'un évènement sortait en rgb(93, 93, 93), soit 2,72:1 sur le fond sombre, là où 4,5:1 est requis. On rebranche sur les variables du greffon plutôt que de poser une valeur : --tec-color-text-primary vaut #f2f3f5 en sombre et #101726 en clair, --tec-color-text-secondary #838ba0 et #5e6475. Les deux suivent donc le mode sans qu'aucune règle n'ait à le savoir. Le préfixe .tribe-common n'est pas décoratif : les règles du greffon portent deux classes, et une règle à une seule classe perdait malgré un chargement postérieur. Pour la pastille, on redéfinit la variable que le greffon lit vraiment plutôt que de surenchérir sur le sélecteur : `.tribe-events .tribe-events-calendar-month__multiday-event-bar-title` vaut `color: var(--tec-color-text-events-title-month-multiday)`, et déclare cette variable SUR CE MÊME SÉLECTEUR. La redéfinir sur `:root` ne suffit donc pas, une déclaration à deux classes l'emporte. On la redéfinit au même endroit, à spécificité égale : notre feuille charge après la leur. */ .tribe-events .tribe-events-calendar-month__multiday-event-bar-title { --tec-color-text-events-title-month-multiday: var(--tec-color-text-primary); /* WHY `!important` ici et nulle part ailleurs : la variable arrive bien sur l'élément, vérifié au navigateur, mais la couleur effective ne vient d'aucune règle qui le vise. Aucune des dix-neuf feuilles chargées ne déclare `color` pour lui : elle est HÉRITÉE d'un parent que le greffon colore. Une déclaration héritée ne se bat pas à la spécificité, elle se remplace. La valeur reste une variable, ce n'est pas une couleur figée. */ color: var(--tec-color-text-primary) !important; } /* Un évènement passé prend chez eux `var(--global-palette3)`, une variable de thème par blocs qui n'existe pas ici : la couleur retombait alors sur celle du parent, illisible elle aussi. */ .tribe-events .tribe-events-calendar-month__multiday-event--past .tribe-events-calendar-month__multiday-event-bar-title { color: var(--tec-color-text-secondary); } .tribe-common .tribe-events-calendar-month__calendar-event-datetime, .tribe-common .tribe-events-calendar-month__calendar-event-datetime time { color: var(--tec-color-text-secondary); } /* -- Boîte de partage des fiches d'évènement -------------------------------- Son fond ne bascule pas avec le mode : blanc en sombre, ce qui pose un bandeau clair au milieu d'une page sombre, et une teinte pâle en clair sur laquelle le texte disparaissait, mesuré à 1,29:1. La couleur du texte et celle des icônes se règlent dans Avada et y ont été corrigées. Le fond, lui, n'est pas un réglage : d'où cette règle, branchée sur le jeton de surface qui, lui, suit le mode, #1a2135 en sombre et #eaecf1 en clair. Le contraste avec var(--awb-color7) dépasse 14:1 des deux côtés. */ .fusion-sharing-box { /* WHY la priorité : le CSS dynamique d'Avada est compilé dans un fichier chargé APRÈS cette feuille, et fixe ce fond en blanc. À spécificité égale, l'ordre le lui donne. La valeur reste un jeton de la palette, pas une couleur figée. */ background-color: var(--awb-custom_color_3) !important; } /* ── Une image par mode ────────────────────────────────────────────────────── WHY deux images et non une : un logo dessiné pour un fond clair perd ses contours sur un fond sombre, et l'inverse. Le fournisseur livre les deux versions ; il ne reste qu'à servir la bonne. WHY `display` et non `opacity` : une image transparente reste dans le flux et laisse un trou de sa hauteur sous celle qui s'affiche. WHY `revert` et non `block` : l'élément d'Avada qui porte la classe n'est pas toujours un bloc, et lui en imposer un casserait son alignement. `revert` lui rend ce qu'il aurait eu sans cette règle. WHY les trois états : le visiteur qui n'a rien choisi ne porte aucun attribut, et seul `prefers-color-scheme` le sépare du mode clair. */ .ojbt-si-sombre { display: none; } :root[data-theme="dark"] .ojbt-si-clair { display: none; } :root[data-theme="dark"] .ojbt-si-sombre { display: revert; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ojbt-si-clair { display: none; } :root:not([data-theme="light"]) .ojbt-si-sombre { display: revert; } }