/* ==================================================================== Tmavý režim – přepíná se atributem data-theme="dark" na . Měníme jen barevné tokeny, rozvržení zůstává stejné. ==================================================================== */ html[data-theme="dark"] { color-scheme: dark; --brand: #4d86ff; --brand-dark: #6f9dff; --brand-soft: #16233d; --green: #35c46f; --red: #ff5a6e; --orange: #f0a33c; --text: #e9ecf1; --muted: #98a1ad; --bg: #14161a; --bg-2: #1b1e24; --bg-3: #23272f; --border: #2c313a; --dark: #0e1014; } html[data-theme="dark"] body { background: var(--bg); color: var(--text); } /* prvky, které měly barvu napevno */ html[data-theme="dark"] .header { background: var(--bg); } html[data-theme="dark"] .logo-text { color: var(--text); } html[data-theme="dark"] .btn-outline { background: transparent; color: var(--text); border-color: #3a414d; } html[data-theme="dark"] .btn-outline:hover { border-color: var(--text); } html[data-theme="dark"] .btn-white { background: var(--bg-3); color: var(--text); } html[data-theme="dark"] .btn-white:hover { background: var(--border); } html[data-theme="dark"] .product, html[data-theme="dark"] .buy-box, html[data-theme="dark"] .part, html[data-theme="dark"] .spec-group, html[data-theme="dark"] .accord details, html[data-theme="dark"] .rev, html[data-theme="dark"] .rev-form, html[data-theme="dark"] .qa-form, html[data-theme="dark"] .stav-card, html[data-theme="dark"] .acc-card, html[data-theme="dark"] .order, html[data-theme="dark"] .usp-mini > div { background: var(--bg-2); border-color: var(--border); } html[data-theme="dark"] .product-img { background: #f4f5f7; } /* fotky jsou na bílém pozadí */ html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--bg-3); color: var(--text); border-color: #3a414d; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #6d7683; } html[data-theme="dark"] input:disabled { background: var(--bg-2); color: var(--muted); } html[data-theme="dark"] .search input, html[data-theme="dark"] .search select { background: var(--bg-3); } html[data-theme="dark"] .desc-main p, html[data-theme="dark"] .desc-p, html[data-theme="dark"] .part p, html[data-theme="dark"] .accord p, html[data-theme="dark"] .cat-text p, html[data-theme="dark"] .grade-box p, html[data-theme="dark"] .stav-note p, html[data-theme="dark"] .stav-card > p, html[data-theme="dark"] .rev p, html[data-theme="dark"] .box-list, html[data-theme="dark"] .lead-intro, html[data-theme="dark"] .desc-lead { color: #c3cad4; } html[data-theme="dark"] .desc-for { background: var(--brand-soft); color: #cfdcf7; } html[data-theme="dark"] .grade-box { background: #241d12; } html[data-theme="dark"] .grade-box.big { background: var(--bg-2); } html[data-theme="dark"] .notice { background: #241d12; border-color: #4a3a1c; } html[data-theme="dark"] .notice b { color: var(--orange); } html[data-theme="dark"] .feat-list li { background: var(--bg-3); } html[data-theme="dark"] table.mini .hl { background: var(--brand-soft); color: var(--brand); } html[data-theme="dark"] .empty-soft { border-color: #3a414d; } html[data-theme="dark"] .footer { background: #0e1014; } html[data-theme="dark"] .ratebox { background: var(--bg-2); } html[data-theme="dark"] .cmp-table tr.grp th { background: var(--bg-3); } html[data-theme="dark"] .qa .a { background: var(--bg-3); } html[data-theme="dark"] .toast { background: var(--bg-3); color: var(--text); } html[data-theme="dark"] .modal-card, html[data-theme="dark"] .cmp-bar { background: var(--bg-2); border-color: var(--border); } /* přepínač motivu */ .theme-toggle { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 999px; padding: 6px 12px; font-size: .8rem; font-weight: 600; } .theme-toggle:hover { color: var(--text); border-color: var(--muted); } .theme-toggle svg { width: 15px; height: 15px; } .icon-link.theme-btn { background: none; border: 0; } /* dvojice přepínačů v nastavení účtu */ .pref { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); } .pref:last-child { border-bottom: 0; } .pref-txt { flex: 1; } .pref-txt b { display: block; font-size: .95rem; } .pref-txt span { font-size: .84rem; color: var(--muted); } .switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; } .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .switch i { position: absolute; inset: 0; background: var(--bg-3); border: 1px solid var(--border); border-radius: 999px; transition: background .15s; pointer-events: none; } .switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; } .switch input:checked + i { background: var(--brand); border-color: var(--brand); } .switch input:checked + i::after { transform: translateX(20px); } .switch input:focus-visible + i { outline: 2px solid var(--brand); outline-offset: 2px; } /* volba tří stavů motivu */ .theme-choice { display: flex; gap: 8px; flex-wrap: wrap; } .theme-choice button { border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 8px; padding: 8px 14px; font-size: .85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; } .theme-choice button svg { width: 15px; height: 15px; } .theme-choice button.on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); } /* přepínač vzhledu v patičce */ .theme-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, .12); padding: 18px 0 4px; margin-top: 8px; } .theme-bar b { display: block; font-size: .9rem; color: #fff; } .theme-bar span { font-size: .8rem; color: #97a1ae; } .footer .theme-choice button { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #d5dae2; } .footer .theme-choice button:hover { border-color: rgba(255, 255, 255, .4); color: #fff; } .footer .theme-choice button.on { background: var(--brand); border-color: var(--brand); color: #fff; } @media (max-width: 640px) { .theme-bar { flex-direction: column; align-items: flex-start; } } /* ---------- zbylé napevno bílé plochy ---------- */ html[data-theme="dark"] .catnav { background: var(--bg); border-bottom-color: var(--border); } html[data-theme="dark"] .catnav a { color: var(--text); } html[data-theme="dark"] .catnav a:hover, html[data-theme="dark"] .catnav a.active { background: var(--bg-3); color: var(--brand); } html[data-theme="dark"] .catnav a.pill { border-color: #3a414d; } html[data-theme="dark"] .topbar { background: var(--bg-2); border-bottom-color: var(--border); } html[data-theme="dark"] .search { background: var(--bg-3); border-color: #3a414d; } html[data-theme="dark"] .cmp-bar, html[data-theme="dark"] .cookie-bar, html[data-theme="dark"] .modal, html[data-theme="dark"] .rv, html[data-theme="dark"] .rstrip .list div, html[data-theme="dark"] .post .go, html[data-theme="dark"] .cmp-table .rm { background: var(--bg-2); color: var(--text); border-color: var(--border); } html[data-theme="dark"] .cookie-bar { border-top-color: var(--brand); } html[data-theme="dark"] .cmp-table tr.diff td { background: #241f12; } html[data-theme="dark"] .bts .pricetag { background: var(--bg-2); } html[data-theme="dark"] .toolbar select, html[data-theme="dark"] .chip { background: var(--bg-3); border-color: #3a414d; color: var(--text); } html[data-theme="dark"] .chip:hover { border-color: var(--muted); } html[data-theme="dark"] .chip.active { background: var(--brand); border-color: var(--brand); color: #fff; } html[data-theme="dark"] .htile { background: var(--bg-2); border-color: var(--border); } html[data-theme="dark"] .brandbar { color: #6d7683; } html[data-theme="dark"] .usp b { text-decoration-color: #2f4a7d; } /* barevné štítky mají v tmavém režimu tlumenější podklad */ html[data-theme="dark"] .lbl-new { background: #12261a; color: #6bd394; } html[data-theme="dark"] .lbl-used { background: #2a2011; color: #eaa54c; } html[data-theme="dark"] .lbl-best { background: #16233d; color: #7ba6ff; } html[data-theme="dark"] .lbl-water { background: #10233f; color: #6fa3f5; } html[data-theme="dark"] .lbl-gift { background: #2a1418; color: #ff8b99; } html[data-theme="dark"] .tag-new { background: #12261a; color: #6bd394; } html[data-theme="dark"] .tag-used { background: #2a2011; color: #eaa54c; } html[data-theme="dark"] .tag-best { background: #16233d; color: #7ba6ff; } html[data-theme="dark"] .tag-water { background: #10233f; color: #6fa3f5; } html[data-theme="dark"] .tag-school { background: #292311; color: #e2c455; } /* fotky produktů jsou vyfocené na bílém pozadí; ať v tmavém režimu nesvítí, dáme je na tlumenou světlou dlaždici a mírně ztlumíme jas */ html[data-theme="dark"] .product-img, html[data-theme="dark"] .main-img, html[data-theme="dark"] .thumbs button, html[data-theme="dark"] .order-line img, html[data-theme="dark"] .rv-prod img, html[data-theme="dark"] .cmp-table img, html[data-theme="dark"] .ci-img { background: #dfe3e9; border-color: var(--border); } html[data-theme="dark"] .product-img img, html[data-theme="dark"] .main-img img, html[data-theme="dark"] .thumbs img, html[data-theme="dark"] .order-line img, html[data-theme="dark"] .cmp-table img { filter: brightness(.93) saturate(1.05); } html[data-theme="dark"] .product-img { border-bottom: 1px solid var(--border); } /* ---------- doladění tmavého režimu ---------- */ html[data-theme="dark"] .qty { background: var(--bg-2); border-color: #3a414d; } html[data-theme="dark"] .qty button { background: var(--bg-3); color: var(--text); } html[data-theme="dark"] .qty button:hover:not(:disabled) { background: #333a45; } /* v tmavém režimu nechceme svítivě bílé plochy formulářů */ html[data-theme="dark"] .fld input, html[data-theme="dark"] .fld select, html[data-theme="dark"] .fld textarea { background: #1f232a; border-color: #333a45; } html[data-theme="dark"] .fld input:focus, html[data-theme="dark"] .fld textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(77, 134, 255, .18); } html[data-theme="dark"] .auth-switch { background: var(--bg-3); } html[data-theme="dark"] .auth-aside { background: #1a1d23; } html[data-theme="dark"] .acc-user { background: #1a1d23; } html[data-theme="dark"] .pw-meter { background: #2b313a; } /* zvýraznění řádků a hlaviček tabulek */ html[data-theme="dark"] table th { color: var(--muted); } html[data-theme="dark"] .info table tr:nth-child(even) td { background: var(--bg-2); } html[data-theme="dark"] .inv-page { background: var(--bg-2); } html[data-theme="dark"] .inv-body { background: var(--bg); } /* modrá je na tmavém pozadí čitelnější o něco světlejší */ html[data-theme="dark"] .btn-primary { background: #3b78f0; } html[data-theme="dark"] .btn-primary:hover { background: #5a8ff5; } /* ---------- mapa výdejních míst a košík ---------- */ html[data-theme="dark"] { --map-bg: #171a1f; --map-land: #252a33; --map-line: #39414d; --map-dot-edge: #171a1f; } html[data-theme="dark"] .map-legend { background: rgba(27, 30, 36, .94); border-color: var(--border); color: var(--text); } html[data-theme="dark"] .pickup-list button { background: var(--bg-2); color: var(--text); border-bottom-color: var(--border); } html[data-theme="dark"] .pickup-list button:hover, html[data-theme="dark"] .pickup-list button.on { background: var(--brand-soft); color: var(--text); } html[data-theme="dark"] .pickup-search { background: var(--bg-2); } html[data-theme="dark"] .pickup-head { background: var(--bg-2); } html[data-theme="dark"] .stepbar b { background: var(--bg-3); border-color: var(--border); color: var(--text); } html[data-theme="dark"] .stepbar div.on b { background: var(--brand); color: #fff; border-color: var(--brand); } html[data-theme="dark"] .cart-item, html[data-theme="dark"] .summary, html[data-theme="dark"] .options label { background: var(--bg-2); border-color: var(--border); } html[data-theme="dark"] .options label:hover { border-color: var(--muted); } html[data-theme="dark"] .options input:checked + span, html[data-theme="dark"] .options label.on { border-color: var(--brand); } html[data-theme="dark"] .success { background: var(--bg-2); border-color: var(--border); } /* ---------- krok platby ---------- */ .paywrap { display: grid; grid-template-columns: 1.4fr .8fr; gap: 26px; align-items: start; margin: 18px 0 60px; } .paycard { border: 1px solid var(--border); border-radius: 14px; padding: 26px 28px 30px; background: var(--bg); } .paycard h2 { font-size: 1.35rem; margin-bottom: 6px; } .paylead { font-size: .9rem; margin-bottom: 20px; } .payload-box { display: grid; place-items: center; gap: 12px; padding: 40px 0; } #sumup-card { min-height: 220px; } .paysum { border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; background: var(--bg-2); position: sticky; top: 100px; } .paysum h3 { font-size: 1rem; margin-bottom: 12px; } .paysum-total { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .paysum-total b { font-size: 1.5rem; } .paysum-note { font-size: .8rem; color: var(--muted); margin-top: 10px; } .paysum-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; font-size: .83rem; color: var(--muted); } .paysum-list li { display: flex; gap: 8px; align-items: flex-start; } .paysum-list svg { width: 14px; height: 14px; color: var(--green); flex-shrink: 0; margin-top: 3px; } .paysum-help { font-size: .82rem; color: var(--muted); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } html[data-theme="dark"] .paycard { background: var(--bg-2); } html[data-theme="dark"] .paysum { background: #1a1d23; } /* ---------- načítání ---------- */ .spin { display: inline-block; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; } .spin.big { width: 30px; height: 30px; border-width: 3px; color: var(--brand); } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2s; } } @media (max-width: 900px) { .paywrap { grid-template-columns: 1fr; } .paysum { position: static; order: -1; } .paycard { padding: 20px 18px 24px; } } /* texty v obchodních podmínkách, GDPR a cookies */ html[data-theme="dark"] { --doc-text: #c3cad4; } html[data-theme="dark"] .doc table th { background: var(--bg-2); } html[data-theme="dark"] .doc table td { border-color: var(--border); } html[data-theme="dark"] .qa .a { color: #c3cad4; } html[data-theme="dark"] .stav-hero p { color: #c3cad4; } html[data-theme="dark"] .star-pick button { color: #4a515c; } /* viditelné zaměření klávesnicí – dřív se obrys jen vypínal */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } .search input:focus-visible, .search select:focus-visible { outline-offset: -2px; } /* odkaz na přeskočení navigace */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; font-weight: 600; } .skip-link:focus { left: 0; }