/* Motyw jasny — Plonk It po Polsku */
html[data-theme="light"] {
color-scheme: light;
}
/* --- Strona glowna (index.html) — zmienne --- */
html[data-theme="light"] {
--bg: #f1f5f9;
--bg-soft: #e8eef6;
--panel: #ffffff;
--panel-2: #f8fafc;
--text: #0f172a;
--muted: #64748b;
--border: #cbd5e1;
--accent: #4f6fd8;
--accent-2: #0d9488;
--ok: #059669;
--shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] body {
background:
radial-gradient(900px 420px at 0% -10%, rgba(79, 111, 216, 0.12) 0%, transparent 58%),
var(--bg);
color: var(--text);
}
html[data-theme="light"] .hero {
background: linear-gradient(160deg, rgba(79, 111, 216, 0.1), rgba(13, 148, 136, 0.06));
border-color: var(--border);
}
html[data-theme="light"] h1 {
color: #1e3a8a;
}
html[data-theme="light"] .stat {
background: rgba(255, 255, 255, 0.85);
}
html[data-theme="light"] .toolbar {
background: rgba(255, 255, 255, 0.92);
border-color: var(--border);
box-shadow: var(--shadow);
}
html[data-theme="light"] .toolbar-btn {
background: #f8fafc;
color: #475569;
}
html[data-theme="light"] .toolbar-btn:hover {
color: #0f172a;
border-color: #94a3b8;
background: #fff;
}
html[data-theme="light"] .search {
background: #fff;
color: var(--text);
border-color: var(--border);
}
html[data-theme="light"] .search::placeholder {
color: #94a3b8;
}
html[data-theme="light"] .chip {
background: #fff;
color: #64748b;
}
html[data-theme="light"] .chip:hover {
color: #0f172a;
border-color: #94a3b8;
}
html[data-theme="light"] .recent-section,
html[data-theme="light"] .highlights,
html[data-theme="light"] .map-section {
background: rgba(255, 255, 255, 0.88);
border-color: var(--border);
}
html[data-theme="light"] .recent-list a {
background: #fff;
color: var(--text);
}
html[data-theme="light"] .recent-section h2 {
color: #64748b;
}
html[data-theme="light"] .recent-clear-btn {
background: #fff;
color: #334155;
border-color: #94a3b8;
}
html[data-theme="light"] .recent-clear-btn:hover {
color: #b91c1c;
border-color: #f87171;
background: #fef2f2;
}
html[data-theme="light"] .map-title h2 {
color: #1e3a8a;
}
html[data-theme="light"] .guide-map {
background: #e8eef6;
border-color: #b8c5d9;
}
html[data-theme="light"] .map-zoom-controls button {
background: rgba(255, 255, 255, 0.95);
color: #334155;
border-color: #cbd5e1;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}
html[data-theme="light"] .map-zoom-controls button:hover {
background: #4f6fd8;
color: #fff;
}
html[data-theme="light"] .map-country-tooltip {
background: rgba(255, 255, 255, 0.97);
color: #0f172a;
border-color: #cbd5e1;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}
html[data-theme="light"] .card {
background: linear-gradient(170deg, #fff, #f8fafc);
box-shadow: var(--shadow);
color: var(--text);
}
html[data-theme="light"] .card:hover {
border-color: #94a3b8;
}
html[data-theme="light"] .lang-badge {
background: #f1f5f9;
border-color: #cbd5e1;
color: #475569;
}
html[data-theme="light"] .status-badge.added {
color: #047857;
border-color: rgba(5, 150, 105, 0.35);
background: rgba(5, 150, 105, 0.1);
}
html[data-theme="light"] .status-badge.missing {
color: #b45309;
border-color: rgba(180, 83, 9, 0.35);
background: rgba(245, 158, 11, 0.12);
}
html[data-theme="light"] .open {
color: #047857;
}
html[data-theme="light"] .open.missing {
color: #b45309;
}
html[data-theme="light"] .latest-card {
background: rgba(5, 150, 105, 0.08);
border-color: rgba(5, 150, 105, 0.35);
color: var(--text);
}
html[data-theme="light"] .latest-card .label {
color: #047857;
}
/* --- Poradniki ze zmiennymi CSS (:root / body) --- */
html[data-theme="light"] body {
--bg: #f8fafc;
--card: #ffffff;
--a: #4f46e5;
--t: #0f172a;
--s: #64748b;
--b: #cbd5e1;
--ok: #059669;
--w: #b45309;
--e: #dc2626;
background: var(--bg);
color: var(--t);
}
html[data-theme="light"] .sec,
html[data-theme="light"] .tip,
html[data-theme="light"] .note,
html[data-theme="light"] .warn,
html[data-theme="light"] .tag {
background: var(--card);
border-color: var(--b);
color: var(--t);
}
html[data-theme="light"] h1 {
color: #4338ca;
border-color: #a5b4fc;
}
html[data-theme="light"] .sec h2,
html[data-theme="light"] .step h2 {
color: #b45309;
}
html[data-theme="light"] h3 {
color: #047857;
}
html[data-theme="light"] .tip {
background: rgba(79, 70, 229, 0.06);
border-left-color: #6366f1;
}
html[data-theme="light"] .note {
background: rgba(245, 158, 11, 0.08);
border-left-color: #f59e0b;
color: #475569;
}
html[data-theme="light"] .warn {
background: rgba(239, 68, 68, 0.06);
border-left-color: #ef4444;
}
html[data-theme="light"] .img,
html[data-theme="light"] .media {
background: #f1f5f9;
border-color: var(--b);
}
html[data-theme="light"] .img .cap,
html[data-theme="light"] .cap {
color: var(--s);
}
html[data-theme="light"] a {
color: #4338ca;
}
html[data-theme="light"] .f,
html[data-theme="light"] .foot {
color: var(--s);
border-color: var(--b);
}
html[data-theme="light"] .navbtn {
background: #e2e8f0;
border-color: #cbd5e1;
color: #1e293b;
}
html[data-theme="light"] .navbtn:hover {
background: #cbd5e1;
}
html[data-theme="light"] .hero {
border-color: var(--b);
background: #f1f5f9;
}
/* --- Poradniki import (hardcoded kolory, np. USA) --- */
html[data-theme="light"] body:not(:has(.wrap)) {
background: #f8fafc !important;
color: #0f172a !important;
}
html[data-theme="light"] body:not(:has(.wrap)) h1 {
color: #4338ca !important;
}
html[data-theme="light"] body:not(:has(.wrap)) .sec {
background: #fff !important;
border-color: #cbd5e1 !important;
color: #0f172a !important;
}
html[data-theme="light"] body:not(:has(.wrap)) .sec h2 {
color: #b45309 !important;
}
html[data-theme="light"] body:not(:has(.wrap)) .sub {
color: #047857 !important;
}
html[data-theme="light"] body:not(:has(.wrap)) .divi {
color: #6d28d9 !important;
border-top-color: #cbd5e1 !important;
}
html[data-theme="light"] body:not(:has(.wrap)) .tip {
background: #f8fafc !important;
border-color: #cbd5e1 !important;
color: #0f172a !important;
}
html[data-theme="light"] body:not(:has(.wrap)) .tag {
background: #fff !important;
border-color: #cbd5e1 !important;
color: #64748b !important;
}
html[data-theme="light"] body:not(:has(.wrap)) .centered {
color: #475569 !important;
}
html[data-theme="light"] body:not(:has(.wrap)) a {
color: #4338ca !important;
}
html[data-theme="light"] body:not(:has(.wrap)) .foot {
color: #64748b !important;
border-top-color: #cbd5e1 !important;
}
html[data-theme="light"] body:not(:has(.wrap)) .navbtn {
background: #e2e8f0 !important;
border-color: #cbd5e1 !important;
color: #1e293b !important;
}
html[data-theme="light"] body:not(:has(.wrap)) .navbtn:hover {
background: #cbd5e1 !important;
}
html[data-theme="light"] body:not(:has(.wrap)) .hero {
border-color: #cbd5e1 !important;
background: #f1f5f9 !important;
}
/* --- Przewodnik dla poczatkujacych --- */
html[data-theme="light"] .page-beginners-guide,
html[data-theme="light"] .page-beginners-guide body {
--bg: #f8fafc;
--panel: #ffffff;
--panel2: #f1f5f9;
--text: #0f172a;
--muted: #64748b;
--border: #cbd5e1;
--accent: #4f46e5;
background: radial-gradient(900px 420px at 0% -10%, rgba(79, 111, 216, 0.1) 0%, transparent 58%), var(--bg) !important;
color: var(--text) !important;
}
html[data-theme="light"] .page-beginners-guide .hero {
background: linear-gradient(160deg, rgba(79, 111, 216, 0.1), rgba(13, 148, 136, 0.06));
border-color: var(--border);
}
html[data-theme="light"] .page-beginners-guide .step {
background: linear-gradient(165deg, #fff, #f8fafc);
border-color: var(--border);
}
html[data-theme="light"] .page-beginners-guide .note {
background: rgba(79, 111, 216, 0.06);
border-color: rgba(142, 162, 255, 0.35);
color: #334155;
}
html[data-theme="light"] .page-beginners-guide .item-title {
color: #1e40af;
}
html[data-theme="light"] .page-beginners-guide .sub-title {
color: #047857;
}
html[data-theme="light"] .page-beginners-guide .p,
html[data-theme="light"] .page-beginners-guide .list,
html[data-theme="light"] .page-beginners-guide .list li {
color: #334155;
}
html[data-theme="light"] .page-beginners-guide .media {
background: #f1f5f9;
border-color: #cbd5e1;
}
html[data-theme="light"] .page-beginners-guide .cap {
color: #64748b;
}
html[data-theme="light"] .page-beginners-guide a {
color: #4338ca;
}
/* --- Nawigacja i linki powrotu --- */
html[data-theme="light"] .guide-home a,
html[data-theme="light"] .top-links a,
html[data-theme="light"] .hero-link,
html[data-theme="light"] a.back[href="./"] {
background: #fff;
border-color: #cbd5e1;
color: #475569;
}
html[data-theme="light"] .guide-home a:hover,
html[data-theme="light"] .top-links a:hover,
html[data-theme="light"] .hero-link:hover,
html[data-theme="light"] a.back[href="./"]:hover {
color: #0f172a;
border-color: #6366f1;
background: rgba(99, 102, 241, 0.08);
}
/* --- Przycisk motywu --- */
.plonkit-theme-toggle {
position: fixed;
bottom: 18px;
right: 18px;
z-index: 9000;
border-radius: 999px;
border: 1px solid var(--border, #334155);
background: rgba(30, 41, 59, 0.92);
color: var(--muted, #94a3b8);
padding: 8px 12px;
font-size: 0.82rem;
font-weight: 500;
cursor: pointer;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(6px);
font-family: inherit;
line-height: 1.3;
}
.plonkit-theme-toggle:hover {
color: var(--text, #f1f5f9);
border-color: var(--a, #6366f1);
}
html[data-theme="light"] .plonkit-theme-toggle {
background: #fff;
border-color: #cbd5e1;
color: #475569;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}
html[data-theme="light"] .plonkit-theme-toggle:hover {
color: #0f172a;
border-color: #6366f1;
}
/* --- Nawigacja sasiednich krajow --- */
.guide-sibling-nav {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: space-between;
margin: 24px 0 8px;
padding-top: 16px;
border-top: 1px solid var(--border, #334155);
}
.guide-sibling-nav a {
display: inline-block;
border-radius: 999px;
border: 1px solid var(--border, #334155);
background: rgba(30, 41, 59, 0.45);
color: var(--muted, #94a3b8);
text-decoration: none;
padding: 6px 12px;
font-size: 0.82rem;
max-width: min(100%, 280px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.guide-sibling-nav a:hover {
color: var(--text, #f1f5f9);
border-color: var(--a, #6366f1);
}
html[data-theme="light"] .guide-sibling-nav {
border-top-color: #cbd5e1;
}
html[data-theme="light"] .guide-sibling-nav a {
background: #fff;
border-color: #cbd5e1;
color: #475569;
}
html[data-theme="light"] .guide-sibling-nav a:hover {
color: #0f172a;
border-color: #6366f1;
}