/* ============================================================ Soft UI Evolution — motyw aplikacji Konkursy Light + dark (sterowane atrybutem data-theme na ). Bootstrap 5.3 recoloring przez nadpisanie zmiennych --bs-*. ============================================================ */ :root { /* — promienie / ruch / typografia — */ --kk-radius: 10px; --kk-radius-sm: 8px; --kk-anim: 240ms; --kk-ease: cubic-bezier(.22, .61, .36, 1); --kk-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --kk-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* — paleta jasna (pastele o lepszym kontraście, WCAG AA) — */ --kk-bg: #eef2f7; --kk-surface: #ffffff; --kk-surface-2: #f5f8fc; --kk-text: #1f2733; /* off-black, nie #000 */ --kk-text-muted: #5b6675; --kk-border: #e2e8f1; --kk-accent: #2d7db5; /* Soft Blue dociągnięty do AA na tekst/link */ --kk-accent-strong: #246a9c; --kk-accent-soft: #d8edf8; /* pastelowe wypełnienie */ --kk-pink: #c95f86; --kk-pink-soft: #ffe1ea; --kk-green: #2f8f5b; --kk-green-soft: #d6f0df; --kk-orange: #c4711f; --kk-orange-soft: #fce7cf; --kk-gray: #6b7686; --kk-gray-soft: #e7ecf3; /* — miękkie cienie (mocniejsze niż flat, subtelniejsze niż neumorfizm) — */ --kk-shadow: 0 1px 2px rgba(31, 39, 51, .04), 0 2px 12px rgba(31, 39, 51, .06); --kk-shadow-lift: 0 2px 4px rgba(31, 39, 51, .06), 0 8px 24px rgba(31, 39, 51, .10); --kk-shadow-inset: inset 0 0 0 1px var(--kk-border); } :root[data-theme="dark"] { --kk-bg: #151a21; --kk-surface: #1e252f; --kk-surface-2: #232b37; --kk-text: #e7ecf3; --kk-text-muted: #9aa6b6; --kk-border: #2d3744; --kk-accent: #6bb8e0; --kk-accent-strong: #8ccbef; --kk-accent-soft: #1f3a4d; --kk-pink: #e993b1; --kk-pink-soft: #3d2630; --kk-green: #74c79a; --kk-green-soft: #1f3a2c; --kk-orange: #e0a463; --kk-orange-soft: #3a2e1c; --kk-gray: #9aa6b6; --kk-gray-soft: #2a323d; --kk-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 12px rgba(0, 0, 0, .4); --kk-shadow-lift: 0 2px 4px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .5); --kk-shadow-inset: inset 0 0 0 1px var(--kk-border); } /* — most do zmiennych Bootstrapa, by komponenty BS przejęły paletę — */ :root { --bs-body-bg: var(--kk-bg); --bs-body-color: var(--kk-text); --bs-border-color: var(--kk-border); --bs-primary: var(--kk-accent); --bs-link-color: var(--kk-accent); --bs-link-hover-color: var(--kk-accent-strong); --bs-border-radius: var(--kk-radius); --bs-emphasis-color: var(--kk-text); } /* ============================================================ Baza ============================================================ */ body { background: var(--kk-bg); color: var(--kk-text); font-family: var(--kk-font-ui); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, .fw-bold { letter-spacing: -.01em; } a { color: var(--kk-accent); text-decoration: none; } a:hover { color: var(--kk-accent-strong); text-decoration: underline; } code, kbd, .kk-mono, .text-monospace { font-family: var(--kk-font-mono); } /* Widoczny focus (WCAG) na wszystkim interaktywnym */ a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .nav-link:focus-visible { outline: 2px solid var(--kk-accent); outline-offset: 2px; box-shadow: none; } /* ============================================================ Navbar ============================================================ */ .kk-nav, .navbar.kk-nav { background: var(--kk-surface) !important; border-bottom: 1px solid var(--kk-border); box-shadow: var(--kk-shadow); } .kk-nav .navbar-brand { color: var(--kk-accent) !important; } .kk-nav .nav-link { color: var(--kk-text-muted) !important; font-weight: 500; border-radius: var(--kk-radius-sm); padding: .35rem .6rem; transition: background var(--kk-anim) var(--kk-ease), color var(--kk-anim) var(--kk-ease); } .kk-nav .nav-link:hover { color: var(--kk-text) !important; background: var(--kk-surface-2); } .kk-nav .nav-link.active { color: var(--kk-accent) !important; background: var(--kk-accent-soft); } .kk-nav .navbar-text { color: var(--kk-text-muted) !important; } .kk-theme-toggle { background: transparent; border: 1.5px solid var(--kk-border); color: var(--kk-text-muted); border-radius: var(--kk-radius-sm); width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; transition: all var(--kk-anim) var(--kk-ease); } .kk-theme-toggle:hover { color: var(--kk-accent); border-color: var(--kk-accent); } /* ============================================================ Karty ============================================================ */ .kk-card, .card { background: var(--kk-surface); color: var(--kk-text); border: 1px solid var(--kk-border); border-radius: var(--kk-radius); box-shadow: var(--kk-shadow); transition: box-shadow var(--kk-anim) var(--kk-ease), transform var(--kk-anim) var(--kk-ease); } a.kk-card:hover, .kk-card-hover:hover { box-shadow: var(--kk-shadow-lift); transform: translateY(-2px); } .kk-stat { font-family: var(--kk-font-mono); font-size: 2rem; font-weight: 700; letter-spacing: -.02em; color: var(--kk-text); } /* ============================================================ Przyciski ============================================================ */ .btn { border-radius: var(--kk-radius-sm); font-weight: 600; transition: all var(--kk-anim) var(--kk-ease); } .btn-primary { background: var(--kk-accent); border-color: var(--kk-accent); color: #fff; box-shadow: var(--kk-shadow); } .btn-primary:hover { background: var(--kk-accent-strong); border-color: var(--kk-accent-strong); box-shadow: var(--kk-shadow-lift); } .btn-primary:active { transform: translateY(1px); } .btn-outline-primary, .btn-outline-secondary, .btn-outline-light { border-width: 1.5px; } .btn-outline-primary { color: var(--kk-accent); border-color: var(--kk-accent); } .btn-outline-primary:hover { background: var(--kk-accent-soft); color: var(--kk-accent-strong); border-color: var(--kk-accent); } .btn-success { background: var(--kk-green); border-color: var(--kk-green); } .btn-success:active { transform: translateY(1px); } /* ============================================================ Formularze ============================================================ */ .form-label { font-weight: 500; color: var(--kk-text); margin-bottom: .35rem; } .form-control, .form-select { background: var(--kk-surface); color: var(--kk-text); border: 1px solid var(--kk-border); border-radius: var(--kk-radius-sm); transition: border-color var(--kk-anim) var(--kk-ease), box-shadow var(--kk-anim) var(--kk-ease); } .form-control:focus, .form-select:focus { background: var(--kk-surface); color: var(--kk-text); border-color: var(--kk-accent); outline: 2px solid var(--kk-accent); outline-offset: 2px; box-shadow: none; } .form-control::placeholder { color: var(--kk-text-muted); opacity: .7; } /* ============================================================ Odznaki / statusy ============================================================ */ .badge { font-weight: 600; border-radius: 999px; padding: .35em .7em; } .badge-status-NOWE { background: var(--kk-gray-soft); color: var(--kk-text); } .badge-status-ROZWIAZANE { background: var(--kk-accent-soft); color: var(--kk-accent-strong); } .badge-status-W_TRENINGU { background: var(--kk-orange-soft); color: var(--kk-orange); } .badge-status-OPANOWANE { background: var(--kk-green-soft); color: var(--kk-green); } /* ============================================================ Zdjęcia ============================================================ */ .task-photo { max-width: 100%; border-radius: var(--kk-radius-sm); border: 1px solid var(--kk-border); box-shadow: var(--kk-shadow); cursor: zoom-in; } .attempt-photo { max-width: 180px; border-radius: var(--kk-radius-sm); border: 1px solid var(--kk-border); cursor: zoom-in; } /* ============================================================ Treść Markdown / LaTeX ============================================================ */ .md-content { line-height: 1.6; color: var(--kk-text); } .md-content table { border-collapse: collapse; margin: .5rem 0; } .md-content td, .md-content th { border: 1px solid var(--kk-border); padding: .25rem .5rem; } /* ============================================================ Boksy wskazówek / rozwiązania ============================================================ */ .hint-box { border-left: 4px solid var(--kk-accent); background: var(--kk-accent-soft); color: var(--kk-text); border-radius: 0 var(--kk-radius-sm) var(--kk-radius-sm) 0; padding: .75rem 1rem; margin-bottom: .75rem; } .solution-box { border-left: 4px solid var(--kk-green); background: var(--kk-green-soft); color: var(--kk-text); border-radius: 0 var(--kk-radius-sm) var(--kk-radius-sm) 0; padding: .75rem 1rem; } /* ============================================================ Alerty ============================================================ */ .alert { border-radius: var(--kk-radius); border: 1px solid var(--kk-border); } .alert-success { background: var(--kk-green-soft); color: var(--kk-green); } .alert-danger { background: var(--kk-pink-soft); color: var(--kk-pink); } /* ============================================================ Animacje wejścia (tylko transform/opacity) ============================================================ */ @media (prefers-reduced-motion: no-preference) { .kk-enter { animation: kkFadeUp 420ms var(--kk-ease) both; } /* kaskada dla list kart: 80ms odstępu */ .kk-stagger > * { animation: kkFadeUp 420ms var(--kk-ease) both; } .kk-stagger > *:nth-child(1) { animation-delay: 0ms; } .kk-stagger > *:nth-child(2) { animation-delay: 80ms; } .kk-stagger > *:nth-child(3) { animation-delay: 160ms; } .kk-stagger > *:nth-child(4) { animation-delay: 240ms; } .kk-stagger > *:nth-child(5) { animation-delay: 320ms; } .kk-stagger > *:nth-child(6) { animation-delay: 400ms; } .kk-stagger > *:nth-child(n+7) { animation-delay: 480ms; } } @keyframes kkFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ Telefon: większe przyciski dotykowe ============================================================ */ @media (max-width: 576px) { .btn { padding: .5rem .9rem; } }