/* === Theme system v2 (smooth) === * - Uses CSS custom properties for styling and smooth transitions. * - Adds View Transitions API crossfade for theme changes (Chrome, Edge). * - Respects prefers-reduced-motion. */ /* Base tokens (fallback theme) */ :root { --bg: #0b0f17; --text: #eef2f7; --muted: #9aa4b2; --card: #121827; --line: #223047; --accent: #60a5fa; --accent-contrast: #061120; --radius: 14px; --shadow: 0 6px 24px rgba(0,0,0,.25); --font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial; --transition: 220ms ease; } /* Apply tokens to common elements */ html, body { background: var(--bg); color: var(--text); font-family: var(--font); } a { color: var(--accent); } hr, .divider { border-color: var(--line); } .card, .panel, .section-surface { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .cta, .btn-primary { background: var(--accent); color: var(--accent-contrast); border: 1px solid transparent; border-radius: calc(var(--radius) - 4px); padding: .8rem 1rem; font-weight: 800; cursor: pointer; transition: transform var(--transition); } .cta:hover, .btn-primary:hover { transform: translateY(-1px); } .btn, .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: calc(var(--radius) - 4px); padding: .8rem 1rem; } /* Smooth transitions for design tokens */ * { transition: background-color var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), outline-color var(--transition); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* Slightly extend transitions during a theme switch */ body.is-theming * { transition-duration: 420ms !important; } /* View Transitions API crossfade */ html { view-transition-name: root; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 1ms; } } /* === Theme variants (data-theme on ) === */ body[data-theme="duveryhodny"] { --bg: #0d1116; --text: #ecf1f7; --muted: #a5b1c2; --card: #131a24; --line: #253248; --accent: #3b82f6; --accent-contrast: #071225; --radius: 12px; --shadow: 0 6px 26px rgba(34,56,88,.35); --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial; } body[data-theme="moderni"] { --bg: #0c0f14; --text: #f3f6fb; --muted: #9aa4b2; --card: #141922; --line: #2a3245; --accent: #22d3ee; --accent-contrast: #03151a; --radius: 16px; --shadow: 0 10px 28px rgba(2, 182, 212, .12); --font: "Satoshi", system-ui, -apple-system, Segoe UI, Roboto; } body[data-theme="minimalisticky"] { --bg: #0e1116; --text: #f5f7fb; --muted: #b3bcc9; --card: #10151e; --line: #1f2736; --accent: #94a3b8; --accent-contrast: #0b0f17; --radius: 10px; --shadow: none; --font: "Helvetica Now", system-ui, -apple-system, Segoe UI, Roboto; } body[data-theme="luxusni"] { --bg: #0a0a0a; --text: #f7f3ea; --muted: #c7baa6; --card: #111111; --line: #2a2a2a; --accent: #d4af37; --accent-contrast: #1a1200; --radius: 18px; --shadow: 0 10px 32px rgba(212, 175, 55, .15); --font: "Gotham", system-ui, -apple-system, Segoe UI, Roboto; } body[data-theme="technicky"] { --bg: #0b0f13; --text: #e8f5ff; --muted: #96a8b9; --card: #0f1520; --line: #1e2a3a; --accent: #00e5ff; --accent-contrast: #001118; --radius: 10px; --shadow: 0 8px 26px rgba(0, 229, 255, .12); --font: "Eurostile Next", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; } body[data-theme="pratelsky"] { --bg: #0e0f0a; --text: #fff9f1; --muted: #f0d6c3; --card: #15160f; --line: #2b2c1d; --accent: #ffb703; --accent-contrast: #1b1200; --radius: 20px; --shadow: 0 10px 28px rgba(255, 183, 3, .18); --font: "Baloo 2", system-ui, -apple-system, Segoe UI, Roboto; } body[data-theme="hravy"] { --bg: #0b0d17; --text: #f1f5ff; --muted: #b1c0ff; --card: #121738; --line: #222a5a; --accent: #a78bfa; --accent-contrast: #140a2a; --radius: 22px; --shadow: 0 12px 30px rgba(167, 139, 250, .18); --font: "Fredoka", system-ui, -apple-system, Segoe UI, Roboto; } body[data-theme="tradicni"] { --bg: #0e0e0b; --text: #f2efe9; --muted: #c7c0b5; --card: #14130f; --line: #2b2a22; --accent: #8b5e34; --accent-contrast: #120a04; --radius: 8px; --shadow: 0 6px 22px rgba(139, 94, 52, .16); --font: "Merriweather", Georgia, "Times New Roman", serif; } body[data-theme="seriozni"] { --bg: #0a0e12; --text: #eef3f7; --muted: #a2b0bd; --card: #121922; --line: #243041; --accent: #0ea5e9; --accent-contrast: #04151f; --radius: 12px; --shadow: 0 8px 24px rgba(14, 165, 233, .12); --font: "Libre Baskerville", Georgia, "Times New Roman", serif; } body[data-theme="dynamicky"] { --bg: linear-gradient(180deg, #0b0f17, #0a0d14); --text: #f1f6ff; --muted: #a6b9ce; --card: #101827; --line: #203049; --accent: #06b6d4; --accent-contrast: #04131a; --radius: 16px; --shadow: 0 12px 28px rgba(6, 182, 212, .16); --font: "Urbanist", system-ui, -apple-system, Segoe UI, Roboto; } /* Pill UI */ .style-pills { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; background: transparent; border-radius: var(--radius); padding: .6rem .7rem; position: relative; top: auto; left: auto; transform: none; z-index: 10; max-width: 100%; width: auto; box-sizing: border-box; justify-content: center; } .style-pills .pill { border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); color: white; border-radius: 999px; padding: .45rem .75rem; font-size: .95rem; font-weight: 600; cursor: pointer; transition: transform var(--transition), background-color var(--transition); user-select: none; white-space: nowrap; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .style-pills .pill:hover { transform: translateY(-1px); } .style-pills .pill[aria-pressed="true"] { background: var(--accent); color: var(--accent-contrast); border-color: transparent; font-weight: 800; box-shadow: 0 0 20px rgba(34, 211, 238, 0.3); } /* Mobile styles for pills */ @media (max-width: 768px) { .style-pills { padding: 6px 0 10px; gap: 4px; flex-wrap: nowrap; justify-content: center; overflow-x: visible; display: flex !important; visibility: visible !important; opacity: 1 !important; position: relative !important; } .style-pills .pill { font-size: 11px !important; padding: 5px 8px !important; border-radius: 12px !important; display: inline-block !important; white-space: nowrap; flex: 0 0 auto; min-width: 0; } /* Skrýt všechny styly kromě důvěryhodný, moderní, minimalistický */ .style-pills .pill:not([data-theme="duveryhodny"]):not([data-theme="moderni"]):not([data-theme="minimalisticky"]) { display: none !important; } } @media (max-width: 480px) { .style-pills { padding: 4px 0 6px; gap: 3px; flex-wrap: nowrap; justify-content: center; overflow-x: visible; } .style-pills .pill { font-size: 10px; padding: 4px 6px; white-space: nowrap; flex: 0 0 auto; min-width: 0; } } @media (max-width: 350px) { .style-pills { padding: 3px 0 5px; gap: 2px; flex-wrap: nowrap; justify-content: center; } .style-pills .pill { font-size: 9px; padding: 3px 5px; white-space: nowrap; flex: 0 0 auto; min-width: 0; } }