/* ===================================================================== AtLogic – MOTYW JASNY (perła + srebro + turkusowy laser) Ładuj PO bundle.css. Działa tylko przy (ustawia components/theme.js). Ciemny motyw (domyślny) nie jest tu zmieniany – każda reguła wymaga [data-theme="light"], poza ikonką przełącznika motywu (.al-theme-ico), która w ciemnym nie istnieje bez theme.js. Mapowanie: złoto → srebro/chrom, laser pomarańcz → turkus, granat → perłowe szkło, biały tekst → granat. Światło nadal z PRAWEGO GÓRNEGO rogu, cienie w lewo-dół – tylko mocniejsze, żeby odcinały od jasnego tła. ===================================================================== */ /* ---------- TOKENY ---------- */ html[data-theme="light"]{ color-scheme: light; --bg-950: #d9e1ec; --bg-900: #edf1f6; --bg-800: #e2e8f0; --bg-700: #f7f9fc; --bg-600: #ffffff; --wall-1: #cdd5e0; --wall-2: #b0bbca; --wall-3: #8d99ab; --grid-line: rgba(52,82,128,.075); /* „złoto” w jasnym = srebro (nazwy zostają, żeby komponenty działały bez zmian) */ --gold-100: #ffffff; --gold-300: #c3cad4; --gold-500: #929cab; --gold-700: #667181; --gold-900: #3f4856; --laser: #19d3c5; --laser-glow: #19d3c580; --ink: #0f1d36; --ink-muted: #3b4a66; --ink-faint: #52627e; /* neon przyciemniony – ten sam odcień, mniejsza jasność: linie, słupki i duże liczby ≥ 3:1 na najciemniejszym szkle (#e2e8f0) */ --data-blue: #218bb4; --data-green: #169360; --data-yellow: #9a7e22; --data-orange: #c4691e; --data-red: #e64562; --data-pink: #d24dad; --data-violet: #8b6de3; /* wersje do MAŁEGO tekstu (delty KPI, statusy, liczby w tabeli) ≥ 4.5:1 */ --data-blue-text: #186d8e; --data-green-text: #0f744b; --data-yellow-text: #7a6319; --data-orange-text: #9c5215; --data-red-text: #b7354c; --data-pink-text: #a63b88; --data-violet-text: #6e55b4; --data-blue-strong: #397eef; --data-green-strong: #179545; --data-yellow-strong: #9c7e09; --data-orange-strong: #d26011; --data-red-strong: #eb4343; --data-pink-strong: #e04491; --shadow-float: -8px 13px 18px rgba(16,30,58,.30), -3px 5px 5px rgba(16,30,58,.28); --shadow-lift: -12px 20px 26px rgba(16,30,58,.34), -4px 7px 7px rgba(16,30,58,.30); --shadow-panel: -12px 18px 34px rgba(16,30,58,.20), -3px 5px 10px rgba(16,30,58,.16); --shadow-pressed: inset -2px 3px 6px rgba(16,30,58,.28); --shadow-laser: 0 0 6px 1px rgba(25,211,197,.95), 0 0 20px 5px rgba(25,211,197,.55); --al-gold-grad: linear-gradient(225deg, #ffffff 0%, #e4e8ee 16%, #aeb6c1 38%, #6e7886 62%, #d3d9e1 84%, #59626f 100%); --al-silver-text: linear-gradient(225deg, #7d8897 0%, #3f4957 28%, #1d2531 55%, #4b5664 80%, #262e3a 100%); --al-face-grad: linear-gradient(225deg, #ffffff 0%, #f4f7fb 46%, #dfe6ef 100%); --al-dome: radial-gradient(120% 95% at 78% 12%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 36%, transparent 60%), radial-gradient(90% 70% at 40% 62%, rgba(214,228,255,.30), transparent 70%), radial-gradient(120% 110% at 18% 105%, rgba(70,92,128,.22) 0%, transparent 58%); --al-panel-grad: linear-gradient(225deg, rgba(255,255,255,.90) 0%, rgba(247,250,253,.80) 50%, rgba(234,240,247,.86) 100%); --al-face-light: inset -1px 1px 0 #ffffff, inset 3px -4px 8px rgba(70,92,128,.16); --al-glow-rim: linear-gradient(225deg, #f0fffd 0%, #9ff5ec 22%, #3ee0d2 48%, #19d3c5 72%, #0fb3a7 100%); --al-glow: 0 0 0 1px rgba(25,211,197,.9), 0 0 18px 2px rgba(25,211,197,.6), 0 0 46px 8px rgba(25,211,197,.32), 0 0 110px 20px rgba(25,211,197,.16); --al-glow-in: inset 0 0 26px rgba(25,211,197,.20), inset 0 0 6px rgba(180,250,244,.5); --al-ink-shadow: drop-shadow(-1px 1.5px .5px rgba(16,30,58,.30)); } /* ---------- TŁO: perłowe szkło + srebrna siatka i obwody ---------- */ html[data-theme="light"] .al-bg{ background-color: var(--bg-900); background-image: radial-gradient(1100px 650px at 100% 0%, rgba(255,255,255,.95), transparent 62%), radial-gradient(900px 600px at 0% 100%, rgba(120,145,185,.24), transparent 70%), linear-gradient(115deg, transparent 0 36%, rgba(255,255,255,.55) 45%, transparent 53%, transparent 70%, rgba(255,255,255,.35) 76%, transparent 82%), url("../assets/Backgrounds/tlo-obwody-light.svg"), url("../assets/Backgrounds/tlo-siatka-light.svg"); background-size: auto, auto, auto, 240px 240px, 240px 240px; } /* ---------- SREBRNY TEKST, IKONY ---------- */ html[data-theme="light"] .al-gold-text, html[data-theme="light"] :is(.al-navbtn,.al-btn,.al-select) .al-label{ background: var(--al-silver-text); -webkit-background-clip: text; background-clip: text; filter: var(--al-ink-shadow); } html[data-theme="light"] .al-ico{ stroke: url(#al-silver) var(--gold-700); filter: drop-shadow(-1px 1.5px 0 #2f3742) drop-shadow(-1.5px 2.5px 1.5px rgba(16,30,58,.45)); } html[data-theme="light"] .al-ico .fill{ fill: url(#al-silver) var(--gold-700); } html[data-theme="light"] :is(.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-hover):is(:hover,:focus-visible,.is-hover) .al-ico{ filter: brightness(1.08) drop-shadow(-1px 1.5px 0 #2f3742) drop-shadow(-2px 4px 2px rgba(16,30,58,.5)) drop-shadow(0 0 6px rgba(25,211,197,.55)); } /* ---------- BLOK 3D: biała perła, srebrna obręcz, mocny cień ---------- */ html[data-theme="light"] :is(.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-tile)::after{ background: linear-gradient(90deg, #0fb8ab, #19d3c5 30%, #6af2e6 50%, #19d3c5 70%, #0fb8ab); } html[data-theme="light"] :is(.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-tile,.al-switch,.al-arrow):focus-visible{ outline-color: var(--gold-700); } html[data-theme="light"] .al-tile::before{ background: radial-gradient(260px circle at var(--mx,70%) var(--my,20%), rgba(255,255,255,.22), transparent 60%); } /* refleks leży NAD treścią – mocniejszy rozmywa ikonę */ html[data-theme="light"] .al-tile .al-tile__label{ text-shadow: 0 1px 0 rgba(255,255,255,.8), -1px 2px 4px rgba(16,30,58,.22); } html[data-theme="light"] :is(.al-tile:hover,.al-tile.is-hover,.al-tile:focus-visible){ box-shadow: var(--al-face-light), var(--al-wall-up), var(--shadow-lift), 0 0 26px rgba(25,211,197,.20); } /* ---------- MENU ---------- */ html[data-theme="light"] .al-sidebar .al-brand{ filter: drop-shadow(-2px 3px 2px rgba(16,30,58,.45)); } html[data-theme="light"] .al-sidebar--bottom{ background: linear-gradient(to top, rgba(217,225,236,.97), rgba(255,255,255,.84)); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 -8px 20px rgba(16,30,58,.14); } @media (max-width: 720px){ html[data-theme="light"] .al-sidebar[data-responsive]{ background: linear-gradient(to top, rgba(217,225,236,.97), rgba(255,255,255,.84)); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 -8px 20px rgba(16,30,58,.14); } } /* ---------- KONTROLKI SREBRNE ---------- */ html[data-theme="light"] .al-switch{ box-shadow: inset -2px 3px 5px rgba(16,30,58,.45), -3px 5px 8px rgba(16,30,58,.32); } html[data-theme="light"] .al-switch::before{ box-shadow: -2px 3px 4px rgba(16,30,58,.45), inset -1px 1px 1px #fff; } html[data-theme="light"] .al-switch:checked{ box-shadow: inset -2px 3px 5px rgba(16,30,58,.30), -3px 5px 8px rgba(16,30,58,.32), 0 0 12px rgba(25,211,197,.35); } html[data-theme="light"] .al-range{ background: linear-gradient(90deg, #4c5664 0 var(--p,50%), #cdd4dd var(--p,50%) 100%); box-shadow: inset -1px 2px 3px rgba(16,30,58,.35), -2px 3px 5px rgba(16,30,58,.25); } html[data-theme="light"] .al-range::-webkit-slider-thumb{ box-shadow: -2px 3px 5px rgba(16,30,58,.5), inset -1px 1px 1px #fff; } html[data-theme="light"] .al-range::-moz-range-thumb{ box-shadow: -2px 3px 5px rgba(16,30,58,.5); } html[data-theme="light"] .al-arrow{ box-shadow: -1px 1.5px 0 var(--gold-700), -2px 3px 0 var(--gold-900), -4px 7px 9px rgba(16,30,58,.42), inset -1px 1px 1px #fff; } html[data-theme="light"] .al-arrow svg, html[data-theme="light"] .al-fab svg{ stroke: #1b2330; } html[data-theme="light"] .al-arrow:active{ box-shadow: inset -2px 3px 5px rgba(16,30,58,.4); } html[data-theme="light"] .al-segment{ background: rgba(255,255,255,.72); box-shadow: inset -1px 2px 4px rgba(16,30,58,.18); } html[data-theme="light"] .al-segment button{ color: var(--gold-900); } html[data-theme="light"] .al-segment button[aria-pressed="true"]{ background: linear-gradient(225deg, #ffffff, #e3e8ee 40%, #b9c1cc 75%, #9aa4b1); color: #111a28; box-shadow: -2px 3px 5px rgba(16,30,58,.35), inset -1px 1px 0 #fff; } /* ---------- PANEL: przezroczyste szkło ---------- */ html[data-theme="light"] .al-panel{ -webkit-backdrop-filter: blur(12px) saturate(1.25); backdrop-filter: blur(12px) saturate(1.25); box-shadow: inset -1px 1px 0 rgba(255,255,255,.95), -1px 1.5px 0 var(--wall-2), -2px 3px 0 var(--wall-3), var(--shadow-panel); } html[data-theme="light"] .al-panel::before{ background: linear-gradient(225deg, rgba(255,255,255,.6), transparent 32%); } html[data-theme="light"] .al-panel::after{ background: radial-gradient(420px circle at var(--mx,80%) var(--my,10%), rgba(255,255,255,.55), transparent 55%); box-shadow: inset 0 0 0 1px rgba(110,122,138,.45); } html[data-theme="light"] .al-panel:is(.is-lifted,.is-hover){ box-shadow: inset -1px 1px 0 #fff, -1px 1.5px 0 var(--wall-2), -2px 3px 0 var(--wall-2), -3px 4.5px 0 var(--wall-3), -16px 26px 40px rgba(16,30,58,.28), 0 0 24px rgba(25,211,197,.10); } html[data-theme="light"] .al-panel.is-lifted:not([data-static]){ box-shadow: inset -1px 1px 0 #fff, -1px 1.5px 0 var(--wall-2), -2px 3px 0 var(--wall-2), -3px 4.5px 0 var(--wall-3), -16px 26px 40px rgba(16,30,58,.28), 0 9px 0 -6px var(--laser), 0 14px 22px -8px var(--laser); } /* ---------- KPI, WYKRESY, LEGENDA ---------- */ html[data-theme="light"] .al-kpi__value{ text-shadow: 0 0 14px color-mix(in srgb, var(--c) 26%, transparent); } html[data-theme="light"] .al-kpi.is-lifted .al-kpi__value{ text-shadow: 0 0 18px color-mix(in srgb, var(--c) 40%, transparent); } /* mały tekst w kolorze danych → wariant -text (≥ 4.5:1) */ html[data-theme="light"] .al-c-blue{ --ct: var(--data-blue-text); } html[data-theme="light"] .al-c-green{ --ct: var(--data-green-text); } html[data-theme="light"] .al-c-yellow{ --ct: var(--data-yellow-text); } html[data-theme="light"] .al-c-orange{ --ct: var(--data-orange-text); } html[data-theme="light"] .al-c-red{ --ct: var(--data-red-text); } html[data-theme="light"] .al-c-pink{ --ct: var(--data-pink-text); } html[data-theme="light"] .al-c-violet{ --ct: var(--data-violet-text); } html[data-theme="light"] .al-kpi__delta{ color: var(--ct, var(--c)); opacity: 1; } html[data-theme="light"] .al-kpi--sm .al-kpi__value{ color: var(--ct, var(--c)); } html[data-theme="light"] [style*="color:var(--data-blue)"]{ color: var(--data-blue-text) !important; } html[data-theme="light"] :is([style*="color:var(--data-green)"],[style*="color:var(--status-ok)"]){ color: var(--data-green-text) !important; } html[data-theme="light"] :is([style*="color:var(--data-yellow)"],[style*="color:var(--status-warn)"]){ color: var(--data-yellow-text) !important; } html[data-theme="light"] [style*="color:var(--data-orange)"]{ color: var(--data-orange-text) !important; } html[data-theme="light"] :is([style*="color:var(--data-red)"],[style*="color:var(--status-error)"]){ color: var(--data-red-text) !important; } html[data-theme="light"] [style*="color:var(--data-pink)"]{ color: var(--data-pink-text) !important; } html[data-theme="light"] [style*="color:var(--data-violet)"]{ color: var(--data-violet-text) !important; } html[data-theme="light"] .al-chart .grid{ stroke: rgba(30,50,90,.12); } html[data-theme="light"] .al-chart .track{ stroke: rgba(30,50,90,.08); } html[data-theme="light"] .al-chart :is(.line,.ring){ filter: drop-shadow(0 0 3px color-mix(in srgb, var(--c) 55%, transparent)); } html[data-theme="light"] .al-chart .bar{ filter: drop-shadow(-1px 2px 2px rgba(16,30,58,.18)) drop-shadow(0 0 4px color-mix(in srgb, var(--c) 45%, transparent)); } html[data-theme="light"] .al-chart .stack:hover .total{ fill: var(--gold-900); } html[data-theme="light"] .al-legend i{ box-shadow: 0 0 6px color-mix(in srgb, var(--c) 45%, transparent); } /* ---------- TABELA, STATUSY ---------- */ html[data-theme="light"] .al-table td{ border-bottom-color: rgba(30,50,90,.09); } html[data-theme="light"] .al-table tbody tr:nth-child(odd) td{ background: rgba(30,50,90,.035); } html[data-theme="light"] .al-table tbody tr:hover td{ background: rgba(11,152,214,.08); } html[data-theme="light"] .al-table tbody tr.is-active td{ background: rgba(25,211,197,.13); } html[data-theme="light"] .al-chip{ color: var(--ct, var(--ink)); background: color-mix(in srgb, var(--c, var(--ink)) 12%, rgba(255,255,255,.6)); border-color: color-mix(in srgb, var(--c, var(--ink)) 50%, transparent); } /* ---------- LOGO (pliki + animowane) ---------- */ html[data-theme="light"] img[src$="atlogic-mark-gold.svg"]{ content: url("../assets/Logos/atlogic-mark-silver.svg"); } html[data-theme="light"] img[src$="atlogic-logo-dark.svg"]{ content: url("../assets/Logos/atlogic-logo-silver.svg"); } html[data-theme="light"] :is(.al-logo img, .al-topbar img){ filter: drop-shadow(-2px 3px 2px rgba(16,30,58,.45)); } html[data-theme="light"] img[style*="drop-shadow(-2px 3px 2px rgba(0,0,0"]{ filter: drop-shadow(-2px 3px 2px rgba(16,30,58,.45)) !important; } html[data-theme="light"] .al-logo__rest{ text-shadow: 0 0 6px rgba(15,29,54,.30); } html[data-theme="light"] .al-logoanim .lg-mark{ filter: drop-shadow(-3px 5px 3px rgba(16,30,58,.45)); } html[data-theme="light"] .al-logoanim .lg-base{ fill: url(#al-silver-logo) var(--gold-500); stroke: url(#al-silver-logo) var(--gold-500); } html[data-theme="light"] .al-logoanim .lg-guides > g{ stroke: #6f7b8a; } html[data-theme="light"] .al-logoanim .lg-word > g[filter]{ filter: drop-shadow(0 0 5px rgba(15,29,54,.32)); } html[data-theme="light"] .al-logoanim[data-anim="shine"].is-playing .lg-mark{ animation-name: lg-flash-light; } @keyframes lg-flash-light{ 0%,100%{ filter: drop-shadow(-3px 5px 3px rgba(16,30,58,.45)); } 45%{ filter: brightness(1.2) drop-shadow(-3px 5px 3px rgba(16,30,58,.45)) drop-shadow(0 0 12px rgba(25,211,197,.7)); } } /* ---------- IKONY BOHATERÓW (64 px) ---------- */ html[data-theme="light"] .al-hico .base{ stroke: url(#al-silver64) var(--gold-700); filter: drop-shadow(-1.5px 2px 0 #2f3742) drop-shadow(-2px 4px 3px rgba(16,30,58,.45)) drop-shadow(0 0 3px rgba(120,140,165,.35)); } html[data-theme="light"] .al-hico .base .f{ fill: url(#al-silver64) var(--gold-700); } html[data-theme="light"] .al-hico .ink{ stroke: #20262f !important; } html[data-theme="light"] :is(.al-tile,.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-hover):is(:hover,:focus-visible,.is-hover) .al-hico .base, html[data-theme="light"] .al-play .al-hico .base{ filter: brightness(1.12) drop-shadow(-2px 3px 0 #2f3742) drop-shadow(-3px 6px 4px rgba(16,30,58,.5)) drop-shadow(0 0 9px rgba(25,211,197,.55)); } /* ---------- WARIANT „GLOW” (cały kafel świeci turkusem) ---------- */ html[data-theme="light"] [data-al-hover="glow"] :is(.al-navbtn,.al-iconbtn,.al-btn,.al-select):is(:hover,.is-hover,.is-active,[aria-current="page"]), html[data-theme="light"] [data-al-hover="glow"] .al-tile:is(:hover,.is-hover,:focus-visible), html[data-theme="light"][data-al-hover="glow"] :is(.al-navbtn,.al-iconbtn,.al-btn,.al-select):is(:hover,.is-hover,.is-active,[aria-current="page"]), html[data-theme="light"][data-al-hover="glow"] .al-tile:is(:hover,.is-hover,:focus-visible){ background: radial-gradient(120% 90% at 50% 0%, rgba(25,211,197,.16), transparent 60%) padding-box, var(--al-dome) padding-box, var(--al-face-grad) padding-box, var(--al-glow-rim) border-box; filter: saturate(1.1); } html[data-theme="light"] :is([data-al-hover="glow"] .al-tile, [data-al-hover="glow"].al-tile):is(:hover,.is-hover) .al-tile__label, html[data-theme="light"][data-al-hover="glow"] .al-tile:is(:hover,.is-hover) .al-tile__label{ color: var(--ink); text-shadow: 0 0 10px rgba(25,211,197,.7), 0 1px 0 #fff; } html[data-theme="light"] [data-al-hover="glow"] .al-tile:is(:hover,.is-hover) .al-hico .base, html[data-theme="light"][data-al-hover="glow"] .al-tile:is(:hover,.is-hover) .al-hico .base{ filter: brightness(1.15) drop-shadow(-2px 3px 0 #2f3742) drop-shadow(0 0 12px rgba(25,211,197,.85)); } html[data-theme="light"] [data-al-hover="glow"] .al-panel:is(.is-lifted,.is-hover), html[data-theme="light"][data-al-hover="glow"] .al-panel:is(.is-lifted,.is-hover), html[data-theme="light"] [data-al-hover="glow"] .al-panel.is-lifted:not([data-static]), html[data-theme="light"][data-al-hover="glow"] .al-panel.is-lifted:not([data-static]){ box-shadow: inset -1px 1px 0 #fff, inset 0 0 30px rgba(25,211,197,.10), -1px 1.5px 0 var(--wall-2), -2px 3px 0 var(--wall-3), 0 30px 60px rgba(16,30,58,.30), 0 0 0 1px rgba(25,211,197,.85), 0 0 24px 3px rgba(25,211,197,.40), 0 0 64px 10px rgba(25,211,197,.16); } html[data-theme="light"] [data-al-hover="glow"] .al-panel:is(.is-lifted,.is-hover)::after, html[data-theme="light"][data-al-hover="glow"] .al-panel:is(.is-lifted,.is-hover)::after{ box-shadow: inset 0 0 0 1px rgba(25,211,197,.9); } /* ---------- TELEFON / TABLET ---------- */ html[data-theme="light"] .al-topbar{ background: linear-gradient(to bottom, rgba(255,255,255,.92), rgba(226,232,240,.86)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 6px 16px rgba(16,30,58,.12); } html[data-theme="light"] .al-fab{ box-shadow: -1px 1.5px 0 var(--gold-700), -3px 4px 0 var(--gold-900), -6px 12px 16px rgba(16,30,58,.42), inset -1px 1px 1px #fff; } /* ---------- WSKAŹNIK ---------- */ html[data-theme="light"] .al-gauge .g-track{ stroke: rgba(30,50,90,.10); } html[data-theme="light"] .al-gauge .g-val{ filter: drop-shadow(0 0 4px color-mix(in srgb, var(--c) 55%, transparent)); } html[data-theme="light"] .al-gauge .g-tick{ stroke: #3f4856; } html[data-theme="light"] .al-gauge .g-ticks{ stroke: rgba(30,50,90,.30); } html[data-theme="light"] .al-gauge__value{ text-shadow: 0 0 12px color-mix(in srgb, var(--c) 28%, transparent); } /* ---------- TABELA EDYTOWALNA ---------- */ html[data-theme="light"] .al-etable :is(input,select){ background-color: rgba(255,255,255,.78); border-color: rgba(30,50,90,.20); } html[data-theme="light"] .al-etable :is(input,select):hover{ border-color: rgba(102,113,129,.65); } html[data-theme="light"] .al-etable :is(input,select):focus{ border-color: var(--gold-700); background-color: #fff; box-shadow: 0 0 0 3px rgba(102,113,129,.20), 0 3px 0 -1px var(--laser); } html[data-theme="light"] .al-etable select{ background-image: linear-gradient(45deg, transparent 50%, var(--gold-700) 50%), linear-gradient(135deg, var(--gold-700) 50%, transparent 50%); } html[data-theme="light"] .al-etable tfoot td{ color: var(--gold-900); } html[data-theme="light"] .al-etable select[data-v="ok"]{ color: var(--data-green-text); } html[data-theme="light"] .al-etable select[data-v="warn"]{ color: var(--data-yellow-text); } html[data-theme="light"] .al-etable select[data-v="err"]{ color: var(--data-red-text); } html[data-theme="light"] .al-etable tr.is-new td{ animation-name: al-rowin-light; } @keyframes al-rowin-light{ from{ background: rgba(25,211,197,.22); } to{ background: transparent; } } /* ---------- MAPA ---------- */ html[data-theme="light"] .al-map .m-land circle{ fill: #6f86ab; opacity: .5; } html[data-theme="light"] .al-map .m-arc{ filter: drop-shadow(0 0 3px var(--laser)) drop-shadow(0 0 7px rgba(25,211,197,.5)); } html[data-theme="light"] .al-map .m-node .m-dot{ fill: #12b5a9; filter: drop-shadow(0 0 4px #19d3c5); } html[data-theme="light"] .al-map .m-node.is-hub .m-dot{ fill: #ffffff; stroke: var(--gold-700); filter: drop-shadow(-1px 2px 2px rgba(16,30,58,.45)); } html[data-theme="light"] .al-map .m-halo{ stroke: #19d3c5; } html[data-theme="light"] .al-map .m-node:hover .m-dot{ fill: #0e8f86; } /* ===================================================================== PRZEŁĄCZNIK MOTYWU – [data-theme-toggle] (ikonę wstawia theme.js) Pokazuje motyw, na który się przełączy: w ciemnym słońce (złote), w jasnym księżyc (srebrny). ===================================================================== */ .al-theme-ico .al-moon{ display: none; } html[data-theme="light"] .al-theme-ico .al-sun{ display: none; } html[data-theme="light"] .al-theme-ico .al-moon{ display: inline; } :is(.al-navbtn,.al-iconbtn,.al-btn):is(:hover,:focus-visible,.is-hover) .al-theme-ico .al-sun{ transform-box: fill-box; transform-origin: center; animation: al-spin 1.2s var(--al-ease); } @media (prefers-reduced-motion: reduce){ .al-theme-ico *{ animation: none !important; } }