/* base.css — reset, zmienne motywu, typografia, elementy wspolne */ @font-face { font-family: "Geist"; src: url("../assets/fonts/Geist-Variable.woff2") format("woff2-variations"); font-style: normal; font-weight: 100 900; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("../assets/fonts/GeistMono-Variable.woff2") format("woff2-variations"); font-style: normal; font-weight: 100 900; font-display: swap; } *, *::before, *::after { box-sizing: border-box; } :root { /* skala odstepow */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --font-ui: "Geist", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace; /* szachownica — 3 zestawy kolorow (Faza 7), przelaczane przez [data-board-theme] na . Podswietlenie "active" liczone automatycznie z bazowych kolorow (color-mix), wiec kazdy nowy zestaw dostaje je za darmo, spojnie. */ --sq-light: #e9ddc7; --sq-dark: #9a7b56; --sq-check: #d8483f; --mark-green: #17a34a; /* podswietlenia dydaktyczne (Milestone 2) — kazdy rodzaj ma tez wlasny KSZTALT w css/board.css, wiec kolor jest wzmocnieniem, nie jedynym nosnikiem znaczenia */ --hl-attacker: #2f8fd6; --hl-target: #d8483f; --hl-weak: #d4a017; --hl-path: #2f8fd6; --hl-idea: #17a34a; /* klasyfikacja ruchow w analizie (Faza 4) — spojne z ikonami, strzalkami, wykresem */ --cls-best: #17a34a; --cls-good: #6b9080; --cls-inaccuracy: #d4a017; --cls-mistake: #e08a3c; --cls-blunder: #d8483f; --pc-white-fill: #f7f5f0; --pc-white-edge: #2a2d34; --pc-black-fill: #33383f; --pc-black-edge: #14171b; --ease: cubic-bezier(.22,.61,.36,1); } /* podswietlenie ostatniego ruchu — pochodna kolorow pol, dziala dla kazdego zestawu */ :root { --sq-light-active: color-mix(in srgb, var(--sq-light) 55%, #ffe45e 45%); --sq-dark-active: color-mix(in srgb, var(--sq-dark) 60%, #e0b13a 40%); } /* ---- zestawy kolorow szachownicy (Faza 7) ---- Selektor NIE jest ograniczony do :root — te same reguly obsluguja plansze na zywo (atrybut na ) ORAZ podglady kolorow w modalu ustawien (atrybut wprost na przycisku swatcha, patrz modal.css) z jednego zrodla prawdy, bez osobnej kopii kolorow. */ [data-board-theme="classic"] { --sq-light: #e9ddc7; --sq-dark: #9a7b56; } [data-board-theme="forest"] { --sq-light: #ebecd0; --sq-dark: #739552; } [data-board-theme="ocean"] { --sq-light: #e8edf1; --sq-dark: #5b83a6; } /* ---- motyw ciemny (domyslny) ---- */ [data-theme="dark"] { --bg: #14171c; --bg-raised: #1c2027; --bg-sunken: #101318; --border: #2b313a; --text: #e7eaef; --text-dim: #98a1af; --accent: #4ea3a0; --accent-strong: #67c0bc; --accent-contrast: #08110f; --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--bg-raised)); --danger: #e0625a; --shadow: 0 10px 30px rgba(0,0,0,.45); /* klasyfikacja ruchow rozjasniona pod ciemne tlo — bazowe odcienie z :root sa dobrane pod jasny motyw i na #1c2027 nie domykaja kontrastu 4.5:1 */ --cls-best: #3ecf6e; --cls-good: #8fb8a4; --cls-inaccuracy: #e5bb45; --cls-mistake: #ef9d4a; --cls-blunder: #f0685c; } /* ---- motyw jasny ---- */ [data-theme="light"] { --bg: #f4f2ee; --bg-raised: #ffffff; --bg-sunken: #eae7e1; --border: #d8d3ca; --text: #1d2127; --text-dim: #626b78; --accent: #0b7a75; --accent-strong: #0a615d; --accent-contrast: #ffffff; --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--bg-raised)); --danger: #c0392b; --shadow: 0 8px 24px rgba(30,25,15,.12); } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } h1, h2, h3 { margin: 0; font-weight: 650; line-height: 1.25; } button { font: inherit; color: inherit; } /* kontener sprite'a z figurami — poza widokiem, ale nie display:none (display:none w niektorych przegladarkach psuje referencje ) */ .svg-sprite-host { position: absolute; width: 0; height: 0; overflow: hidden; } /* ---- przyciski ---- */ .btn { appearance: none; border: 1px solid var(--border); background: var(--bg-raised); color: var(--text); padding: 10px var(--sp-3); border-radius: var(--radius); cursor: pointer; font-size: 14px; font-weight: 550; transition: background .15s var(--ease), border-color .15s var(--ease), transform .08s var(--ease); } .btn:hover:not(:disabled) { border-color: var(--accent); } .btn:active:not(:disabled) { transform: translateY(1px); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .btn-primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); } .btn-ghost { background: transparent; color: var(--text-dim); } .btn-ghost:hover:not(:disabled) { color: var(--text); } .icon-btn { appearance: none; border: 1px solid var(--border); background: var(--bg-raised); width: 38px; height: 38px; border-radius: var(--radius); cursor: pointer; display: grid; place-items: center; } .icon-btn:hover { border-color: var(--accent); } /* ikona motywu rysowana czysto w CSS: kolo (slonce) / polksiezyc */ .theme-icon { width: 16px; height: 16px; border-radius: 50%; background: currentColor; box-shadow: inset -5px -3px 0 0 var(--bg-raised); } [data-theme="light"] .theme-icon { box-shadow: none; background: transparent; border: 2px solid currentColor; } :where(button, a, [tabindex]):focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: var(--radius-sm); } /* ---- toast ---- */ .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px); background: var(--bg-raised); border: 1px solid var(--border); color: var(--text); padding: 10px 18px; border-radius: 999px; box-shadow: var(--shadow); font-size: 14px; z-index: 200; opacity: 0; transition: opacity .18s var(--ease), transform .18s var(--ease); } .toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---- blad krytyczny (np. figury niedostepne przez file://) ---- */ /* [hidden] przegrywa z .fatal-error{display:grid} bez tej reguly (rowna specyficznosc, ale oba to reguly autora — kolejnosc/specyficznosc w ramach jednego pochodzenia decyduje, nie UA vs autor). */ .fatal-error[hidden] { display: none; } .fatal-error { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: var(--sp-4); background: color-mix(in srgb, var(--bg-sunken) 92%, transparent); backdrop-filter: blur(2px); } .fatal-error-box { max-width: 480px; background: var(--bg-raised); border: 1px solid var(--danger); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow); color: var(--text); font-size: 14px; line-height: 1.65; text-align: center; } .fatal-error-box code { font-family: var(--font-mono); background: var(--bg-sunken); padding: 2px 6px; border-radius: 4px; } /* ---- wejscie siatek kart (DESIGN.md pkt 4) ---- Krotkie i male celowo: te siatki (home/rozdzialy/poziomy/kategorie treningu) wracaja na ekran czesto przy powtarzalnym uzyciu apki — subtelne "osiadanie na miejscu", nie efektowne wejscie, zeby nie meczylo przy setnym powrocie do przegladu. Stopniowanie tylko dla pierwszych 8 elementow (nizej w liscie roznica juz niezauwazalna, a kazdy dodatkowy selektor to koszt). */ @keyframes card-settle { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .home-grid > *, .chapter-grid > *, .lesson-list > *, .level-grid > *, .practice-grid > * { animation: card-settle .22s var(--ease) backwards; } .home-grid > *:nth-child(1), .chapter-grid > *:nth-child(1), .lesson-list > *:nth-child(1), .level-grid > *:nth-child(1), .practice-grid > *:nth-child(1) { animation-delay: 0ms; } .home-grid > *:nth-child(2), .chapter-grid > *:nth-child(2), .lesson-list > *:nth-child(2), .level-grid > *:nth-child(2), .practice-grid > *:nth-child(2) { animation-delay: 25ms; } .home-grid > *:nth-child(3), .chapter-grid > *:nth-child(3), .lesson-list > *:nth-child(3), .level-grid > *:nth-child(3), .practice-grid > *:nth-child(3) { animation-delay: 50ms; } .home-grid > *:nth-child(4), .chapter-grid > *:nth-child(4), .lesson-list > *:nth-child(4), .level-grid > *:nth-child(4), .practice-grid > *:nth-child(4) { animation-delay: 75ms; } .home-grid > *:nth-child(5), .chapter-grid > *:nth-child(5), .lesson-list > *:nth-child(5), .level-grid > *:nth-child(5), .practice-grid > *:nth-child(5) { animation-delay: 100ms; } .home-grid > *:nth-child(6), .chapter-grid > *:nth-child(6), .lesson-list > *:nth-child(6), .level-grid > *:nth-child(6), .practice-grid > *:nth-child(6) { animation-delay: 125ms; } .home-grid > *:nth-child(7), .chapter-grid > *:nth-child(7), .lesson-list > *:nth-child(7), .level-grid > *:nth-child(7), .practice-grid > *:nth-child(7) { animation-delay: 150ms; } .home-grid > *:nth-child(8), .chapter-grid > *:nth-child(8), .lesson-list > *:nth-child(8), .level-grid > *:nth-child(8), .practice-grid > *:nth-child(8) { animation-delay: 175ms; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }