/* ============================================================ NEOSEN - Thèmes du site vitrine ------------------------------------------------------------ Chaque thème redéfinit les variables de couleur. Le thème actif est appliqué via l'attribut data-theme sur , piloté depuis le back-office (Apparence). Le thème par défaut "Sombre" est défini dans variables.css. ============================================================ */ /* ---- CLAIR ------------------------------------------------- */ [data-theme="light"]{ --black:#EEF2F7; --night:#E2E8F0; --s1:#FFFFFF; --s2:#F1F5F9; --glass:rgba(255,255,255,.78); --white:#0F172A; --muted:#47556A; --dim:#8C99AC; --bd:rgba(15,23,42,.09); --bd-st:rgba(15,23,42,.15); --bd-cy:rgba(8,145,178,.40); --cyan:#0E7490; --cyan-br:#0891B2; --cyan-dp:#0E7490; --accent-ink:#FFFFFF; --grid-line:rgba(15,23,42,.05); --fx-dot:8,145,178; --fx-line:14,116,144; --fx-dim:100,116,139; } /* ---- MI-CLAIR ---------------------------------------------- */ [data-theme="semi-light"]{ --black:#DCE3EC; --night:#CFD8E3; --s1:#EBEFF5; --s2:#FFFFFF; --glass:rgba(235,239,245,.82); --white:#1E293B; --muted:#4B5A70; --dim:#7E8CA0; --bd:rgba(30,41,59,.11); --bd-st:rgba(30,41,59,.19); --bd-cy:rgba(14,116,144,.42); --cyan:#0E7490; --cyan-br:#0891B2; --cyan-dp:#155E75; --accent-ink:#FFFFFF; --grid-line:rgba(30,41,59,.055); --fx-dot:14,116,144; --fx-line:21,94,117; --fx-dim:110,124,148; } /* ---- MI-SOMBRE --------------------------------------------- */ [data-theme="semi-dark"]{ --black:#1A2336; --night:#222C42; --s1:#232E45; --s2:#2E3B57; --glass:rgba(26,35,54,.82); --white:#EAF0F8; --muted:#A6B2C6; --dim:#73809A; --bd:rgba(170,182,202,.13); --bd-st:rgba(170,182,202,.23); --bd-cy:rgba(34,211,238,.40); --cyan:#22D3EE; --cyan-br:#38E0F5; --cyan-dp:#0E7490; --accent-ink:#0B1120; --grid-line:rgba(170,182,202,.07); --fx-dot:56,224,245; --fx-line:34,211,238; --fx-dim:150,170,195; } /* ---- TRANSITION (crépuscule animé) ------------------------- */ [data-theme="transition"]{ --black:#13112A; --night:#1B1840; --s1:#1E1B3D; --s2:#2A2655; --glass:rgba(30,27,61,.80); --white:#ECEAFF; --muted:#ABA4D4; --dim:#736C9F; --bd:rgba(171,164,212,.14); --bd-st:rgba(171,164,212,.25); --bd-cy:rgba(129,140,248,.45); --cyan:#A5B4FC; --cyan-br:#818CF8; --cyan-dp:#22D3EE; --accent-ink:#13112A; --grid-line:rgba(171,164,212,.07); --fx-dot:129,140,248; --fx-line:99,102,241; --fx-dim:165,180,252; } [data-theme="transition"] body{ background:linear-gradient(135deg,#0d0b1f 0%,#161433 32%,#0c2436 64%,#1a1240 100%); background-size:300% 300%; animation:neosenAurora 26s ease infinite; } @keyframes neosenAurora{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} } /* ---- OCÉAN ------------------------------------------------- */ [data-theme="ocean"]{ --black:#04141C; --night:#062430; --s1:#072530; --s2:#0B3543; --glass:rgba(7,37,48,.82); --white:#E4F6F9; --muted:#8FB6BF; --dim:#5B7F88; --bd:rgba(143,182,191,.13); --bd-st:rgba(143,182,191,.23); --bd-cy:rgba(45,212,191,.40); --cyan:#2DD4BF; --cyan-br:#5EEAD4; --cyan-dp:#0D9488; --accent-ink:#04141C; --grid-line:rgba(143,182,191,.07); --fx-dot:94,234,212; --fx-line:45,212,191; --fx-dim:143,182,191; } /* ---- CRÉPUSCULE (chaud) ------------------------------------ */ [data-theme="sunset"]{ --black:#1A0F1E; --night:#241430; --s1:#241526; --s2:#331E38; --glass:rgba(36,21,38,.82); --white:#FBEEF5; --muted:#CBA9C2; --dim:#8E6E89; --bd:rgba(203,169,194,.14); --bd-st:rgba(203,169,194,.24); --bd-cy:rgba(244,114,182,.40); --cyan:#F472B6; --cyan-br:#FB923C; --cyan-dp:#E11D8F; --accent-ink:#1A0F1E; --grid-line:rgba(203,169,194,.07); --fx-dot:251,146,60; --fx-line:244,114,182; --fx-dim:203,169,194; } /* ---- CONTRASTE ÉLEVÉ --------------------------------------- */ [data-theme="contrast"]{ --black:#000000; --night:#0A0A0A; --s1:#0C0C0C; --s2:#1A1A1A; --glass:rgba(0,0,0,.90); --white:#FFFFFF; --muted:#D8D8D8; --dim:#A6A6A6; --bd:rgba(255,255,255,.28); --bd-st:rgba(255,255,255,.50); --bd-cy:rgba(34,211,238,.70); --cyan:#22D3EE; --cyan-br:#67E8F9; --cyan-dp:#06B6D4; --accent-ink:#000000; --grid-line:rgba(255,255,255,.12); --fx-dot:103,232,249; --fx-line:34,211,238; --fx-dim:210,210,210; }