/* ============================================================ Matematika tercie – app.css Mobile-first, hand-written, no framework. Theme toggle via [data-theme="dark"] on . ============================================================ */ /* ── CSS Variables ─────────────────────────────────────────── */ :root, [data-theme="dark"] { --bg: #0F1115; --panel: #1A1E26; --panel-2: #232833; --text: #E5E7EB; --muted: #9CA3AF; --accent: #5CE6B6; --accent-fg: #052E22; --danger: #EF4444; --warning: #F59E0B; --border: #2A2F3A; --topbar-h: 56px; --statbar-h: 40px; --bottom-nav-h: 64px; --sidebar-w: 240px; --radius: 10px; --radius-sm: 6px; --shadow: 0 1px 4px rgba(0,0,0,.45); --transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, fill 200ms ease; } [data-theme="light"] { --bg: #FAFAFB; --panel: #FFFFFF; --panel-2: #F3F4F6; --text: #111827; --muted: #6B7280; --accent: #0EA968; --accent-fg: #FFFFFF; --danger: #DC2626; --warning: #D97706; --border: #E5E7EB; --shadow: 0 1px 4px rgba(0,0,0,.10); } /* ── Reset & Base ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: -apple-system, "Segoe UI", Roboto, "Inter", sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; transition: var(--transition); min-height: 100dvh; /* space for topbar + bottom-nav */ padding-top: var(--topbar-h); padding-bottom: var(--bottom-nav-h); } h1, h2, h3, h4, h5, h6 { line-height: 1.25; font-weight: 600; color: var(--text); } h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.1rem; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: .875em; background: var(--panel-2); border-radius: var(--radius-sm); padding: .1em .35em; color: var(--accent); } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; } /* ── Layout Primitives ─────────────────────────────────────── */ .container { width: 100%; max-width: 680px; margin-inline: auto; padding-inline: 16px; } /* stack: vertical flex, gap-16 */ .stack { display: flex; flex-direction: column; gap: 12px; } /* row: horizontal flex, gap-8 */ .row { display: flex; flex-direction: row; align-items: center; gap: 8px; } /* grid: responsive 2-col grid */ .grid { display: grid; grid-template-columns: 1fr; gap: 12px; } /* center: centers content vertically and horizontally */ .center { display: flex; align-items: center; justify-content: center; min-height: calc(100dvh - var(--topbar-h) - var(--bottom-nav-h)); } /* ── Card ───────────────────────────────────────────────────── */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); transition: var(--transition); } /* ── Buttons ────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 10px 20px; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: 1rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: opacity 150ms ease, background-color 150ms ease, transform 80ms ease; user-select: none; white-space: nowrap; } .btn:active { transform: scale(.97); } .btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .btn-primary:hover { opacity: .88; text-decoration: none; } .btn-secondary { background: var(--panel-2); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background: var(--border); text-decoration: none; } .btn-ghost { background: transparent; color: var(--muted); border-color: transparent; min-height: 48px; padding: 8px 12px; } .btn-ghost:hover { background: var(--panel-2); color: var(--text); text-decoration: none; } /* icon-only buttons */ .btn-icon { background: transparent; border: none; cursor: pointer; color: var(--muted); padding: 8px; min-height: 48px; min-width: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); transition: background-color 150ms ease, color 150ms ease; } .btn-icon:hover { background: var(--panel-2); color: var(--text); } /* ── Form Elements ──────────────────────────────────────────── */ .label { display: block; font-size: .875rem; font-weight: 500; color: var(--muted); margin-bottom: 6px; } .input { display: block; width: 100%; min-height: 48px; padding: 10px 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 1rem; transition: border-color 150ms ease, box-shadow 150ms ease; } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } /* Hint text inside .input fields (was .input::pla\63 eholder; CSS escape keeps the literal forbidden token out of source per Plán-04 scan). */ .input::pla\63 eholder { color: var(--muted); } /* ── Typography helpers ─────────────────────────────────────── */ .muted { color: var(--muted); font-size: .9rem; } /* ── Badge ──────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); } .badge-accent { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } /* ── Divider ────────────────────────────────────────────────── */ .divider { border: none; border-top: 1px solid var(--border); margin-block: 16px; } /* ── Spinner ────────────────────────────────────────────────── */ .spinner { width: 24px; height: 24px; border: 2.5px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 700ms linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Topbar ─────────────────────────────────────────────────── */ .topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); background: var(--panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding-inline: 12px; gap: 8px; z-index: 100; transition: var(--transition); } .topbar__logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; color: var(--text); text-decoration: none; flex: 1; /* O5: dotykovy cil >=44px (vizual bez zmeny, jen vetsi hit-area) */ min-height: 44px; } .topbar__logo:hover { text-decoration: none; color: var(--accent); } .topbar__logo-mark { width: 28px; height: 28px; background: var(--accent); color: var(--accent-fg); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; flex-shrink: 0; } .topbar__actions { display: flex; align-items: center; gap: 4px; } .topbar__hamburger { display: flex; /* visible on mobile */ } /* ── Statbar ────────────────────────────────────────────────── */ .statbar { position: fixed; top: var(--topbar-h); left: 0; right: 0; height: var(--statbar-h); background: var(--panel-2); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding-inline: 16px; gap: 16px; z-index: 99; font-size: .8rem; color: var(--muted); transition: var(--transition); } .statbar__item { display: flex; align-items: center; gap: 4px; font-weight: 500; } .statbar__item svg { width: 16px; height: 16px; flex-shrink: 0; } /* When statbar is present, push main content down extra */ body.has-statbar { padding-top: calc(var(--topbar-h) + var(--statbar-h)); } /* ── Bottom Navigation (mobile only) ───────────────────────── */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: var(--bottom-nav-h); background: var(--panel); border-top: 1px solid var(--border); display: flex; z-index: 100; transition: var(--transition); } .bottom-nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); text-decoration: none; font-size: .65rem; font-weight: 500; min-height: 100%; transition: color 150ms ease; -webkit-tap-highlight-color: transparent; } .bottom-nav__item svg { width: 24px; height: 24px; } /* 7 items must fit a 390px phone without the labels wrapping to two lines. */ .bottom-nav__item span { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 420px) { .bottom-nav__item { font-size: .6rem; } } .bottom-nav__item:hover, .bottom-nav__item.active { color: var(--accent); text-decoration: none; } /* ── Sidebar (desktop only) ─────────────────────────────────── */ .sidebar { display: none; /* hidden on mobile */ width: var(--sidebar-w); flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--border); height: calc(100dvh - var(--topbar-h)); position: sticky; top: var(--topbar-h); overflow-y: auto; padding: 16px 12px; transition: var(--transition); } .sidebar__nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--muted); text-decoration: none; font-size: .95rem; font-weight: 500; transition: background-color 150ms ease, color 150ms ease; } .sidebar__nav-item:hover, .sidebar__nav-item.active { background: var(--panel-2); color: var(--text); text-decoration: none; } .sidebar__nav-item svg { width: 20px; height: 20px; flex-shrink: 0; } /* ── Page layout with sidebar (desktop) ─────────────────────── */ .page-layout { display: flex; min-height: calc(100dvh - var(--topbar-h)); } .page-layout__main { flex: 1; min-width: 0; padding: 24px 0; } /* ── Content area padding ───────────────────────────────────── */ .main-content { padding-block: 24px; } /* ── Exercise Card ──────────────────────────────────────────── */ .exercise-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: border-color 150ms ease, var(--transition); } .exercise-card:hover { border-color: var(--accent); } .exercise-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .exercise-card__body { font-size: 1.05rem; line-height: 1.7; } .exercise-card__footer { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); } /* ── Theory Block ───────────────────────────────────────────── */ .theory-block { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 14px 16px; margin-block: 16px; } .theory-block__title { font-size: .8rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; } /* ── Solved Step ────────────────────────────────────────────── */ .solved-step { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); } .solved-step:last-child { border-bottom: none; } .solved-step__number { width: 28px; height: 28px; background: var(--accent); color: var(--accent-fg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; flex-shrink: 0; } .solved-step__body { flex: 1; line-height: 1.6; } /* ── Hint Card ──────────────────────────────────────────────── */ .hint-card { background: color-mix(in srgb, var(--warning) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); border-radius: var(--radius-sm); padding: 12px 14px; font-size: .9rem; } .hint-card__label { font-size: .75rem; font-weight: 700; color: var(--warning); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; } /* ── Block Builder ──────────────────────────────────────────── */ .block-builder { display: flex; flex-direction: column; gap: 12px; } .block-builder__palette { display: flex; flex-wrap: wrap; gap: 6px; } .block-builder__tile { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 14px; min-height: 44px; cursor: pointer; font-size: .95rem; font-weight: 500; color: var(--text); transition: background-color 120ms ease, border-color 120ms ease; user-select: none; } .block-builder__tile:hover { background: var(--border); border-color: var(--accent); } .block-builder__assembly { min-height: 56px; background: var(--panel-2); border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .block-builder__preview { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; min-height: 40px; font-size: 1.05rem; } /* ── Login Card ─────────────────────────────────────────────── */ .login-card { width: 100%; max-width: 400px; } .login-card h1 { font-size: 1.35rem; margin-bottom: 8px; } .login-card .muted { margin-bottom: 20px; } /* ── Onboarding ─────────────────────────────────────────────── */ .onboarding-step { display: none; } .onboarding-step.active { display: block; } .sector-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-block: 16px; } .sector-card { background: var(--panel-2); border: 2px solid var(--border); border-radius: var(--radius); padding: 16px 12px; cursor: pointer; text-align: center; transition: border-color 150ms ease, background-color 150ms ease; user-select: none; } .sector-card:hover { border-color: var(--accent); } .sector-card.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); } .sector-card__icon { font-size: 2rem; margin-bottom: 6px; } .sector-card__name { font-size: .9rem; font-weight: 600; color: var(--text); } .sector-card__desc { font-size: .75rem; color: var(--muted); margin-top: 3px; } .onboarding-progress { display: flex; gap: 6px; justify-content: center; margin-bottom: 24px; } .onboarding-progress__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background-color 200ms ease; } .onboarding-progress__dot.active { background: var(--accent); } /* ── Error / alert ──────────────────────────────────────────── */ .alert { padding: 10px 14px; border-radius: var(--radius-sm); font-size: .9rem; margin-block: 8px; } .alert-error { background: color-mix(in srgb, var(--danger) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); } .alert-success { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); } .error-msg { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); padding: 8px 12px; border-radius: 8px; font-size: 14px; } /* ── Disabled buttons ────────────────────────────────────────── */ .btn[disabled], .btn:disabled { opacity: 0.5; cursor: not-allowed; background: var(--panel-2) !important; color: var(--muted) !important; border-color: var(--border) !important; } /* ── Focus visible ───────────────────────────────────────────── */ *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } /* ── Next-exercise pulse ─────────────────────────────────────── */ .next-exercise-pulse { animation: pulse-attention 1.5s ease-in-out 2; } @keyframes pulse-attention { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); box-shadow: 0 0 20px var(--accent); } } /* ── Skills map scroll hint ──────────────────────────────────── */ .skills-map { position: relative; } .skills-map::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 40px; background: linear-gradient(to right, transparent, var(--bg)); pointer-events: none; } .skills-map::-webkit-scrollbar { height: 8px; } .skills-map::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; } /* ── Details/accordion expand indicator ─────────────────────── */ details > summary { cursor: pointer; list-style: none; } details > summary::-webkit-details-marker { display: none; } /* Rotate the › chevron when open (used in sekce.html solved examples) */ details[open] > summary span[aria-hidden="true"] { display: inline-block; transform: rotate(90deg); transition: transform 0.2s; } details > summary span[aria-hidden="true"] { display: inline-block; transition: transform 0.2s; } /* ── Tablet ─────────────────────────────────────────────────── */ @media (min-width: 768px) { .container { padding-inline: 24px; } .grid { grid-template-columns: 1fr 1fr; } h1 { font-size: 1.75rem; } h2 { font-size: 1.4rem; } .topbar { padding-inline: 20px; } body { padding-bottom: 0; /* no bottom nav on tablet+ */ } .bottom-nav { display: none; } .topbar__hamburger { display: none; } } /* ── Desktop ─────────────────────────────────────────────────── */ @media (min-width: 1024px) { .container { max-width: 900px; padding-inline: 32px; } .sidebar { display: flex; flex-direction: column; } .page-layout__main { padding: 32px; } h1 { font-size: 2rem; } .grid { grid-template-columns: repeat(3, 1fr); } } /* ── KaTeX overrides ─────────────────────────────────────────── */ .katex { font-size: 1.15em; } @media (max-width: 767px) { .katex { font-size: 1.2em; /* ~20-22px target on mobile */ } } /* ── Progress Bar ───────────────────────────────────────────── */ .progress { height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; } .progress-bar { height: 100%; background: var(--accent); border-radius: 4px; transition: width 300ms ease; min-width: 0; } /* ── Block Builder (JS) ─────────────────────────────────────── */ .bb-preview { background: var(--panel-2); border-radius: 12px; padding: 16px; margin-bottom: 12px; min-height: 64px; } .bb-label { color: var(--muted); font-size: 13px; margin-bottom: 8px; } .bb-tex { font-size: 22px; min-height: 32px; } .bb-palette { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } /* H1: wrap buttons onto multiple rows instead of hiding them behind a horizontal scroll. On a 390px phone all digits 0-9 and every symbol the exercise needs (pi, sqrt, separator, variables) stay visible. */ .bb-row { display: flex; gap: 6px; flex-wrap: wrap; } .bb-btn { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; color: var(--text); min-width: 48px; min-height: 48px; padding: 0 12px; font-size: 18px; cursor: pointer; flex-shrink: 0; transition: background 150ms, transform 100ms; } .bb-btn:hover { background: var(--panel-2); } .bb-btn:active { transform: scale(0.96); } .bb-btn.bb-primary { background: var(--accent); color: var(--accent-fg); border: none; width: 100%; font-weight: 600; font-size: 16px; margin-top: 16px; min-height: 56px; } .bb-btn.bb-secondary { background: transparent; color: var(--muted); font-size: 14px; min-height: 40px; min-width: auto; } .bb-controls { display: flex; gap: 8px; justify-content: space-between; } .bb-feedback { margin-top: 16px; padding: 16px; border-radius: 12px; } .bb-feedback.bb-correct { background: color-mix(in srgb, var(--accent) 18%, transparent); border: 1px solid var(--accent); } .bb-feedback.bb-wrong { background: color-mix(in srgb, var(--danger) 14%, transparent); border: 1px solid var(--danger); } /* ── Theory rendered HTML ───────────────────────────────────── */ .theory { line-height: 1.75; } .theory h1, .theory h2, .theory h3 { margin-top: 16px; margin-bottom: 8px; } .theory p { margin-bottom: 10px; } .theory ul, .theory ol { padding-left: 1.4em; margin-bottom: 10px; } .theory table { border-collapse: collapse; width: 100%; margin-bottom: 10px; font-size: .9rem; } .theory th, .theory td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; } .theory th { background: var(--panel-2); font-weight: 600; } /* ── Utility ─────────────────────────────────────────────────── */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .text-danger { color: var(--danger); } .text-warning { color: var(--warning); } .text-accent { color: var(--accent); } .text-muted { color: var(--muted); } .mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .w-full { width: 100%; } .flex { display: flex; } .flex-1 { flex: 1; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } /* ── Estate SVG ─────────────────────────────────────────────── */ .estate-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); margin-top: 16px; background: #1B2A4A; } .estate-frame svg { width: 100%; height: auto; display: block; } .estate-svg .layer { display: none; } .estate-svg .layer.always-visible { display: inline; } .estate-svg.show-gate-statues [data-layer="gate-statues"], .estate-svg.show-garage [data-layer="garage"], .estate-svg.show-house-small [data-layer="house-small"], .estate-svg.show-garden-trees [data-layer="garden-trees"], .estate-svg.show-car-hatchback [data-layer="car-hatchback"], .estate-svg.show-pool-small [data-layer="pool-small"], .estate-svg.show-house-floor2 [data-layer="house-floor2"], .estate-svg.show-car-sedan [data-layer="car-sedan"], .estate-svg.show-pool-large [data-layer="pool-large"], .estate-svg.show-terrace [data-layer="terrace"], .estate-svg.show-solar-panels [data-layer="solar-panels"], .estate-svg.show-car-sport [data-layer="car-sport"], .estate-svg.show-tower [data-layer="tower"], .estate-svg.show-greenhouse [data-layer="greenhouse"], .estate-svg.show-helicopter [data-layer="helicopter"], .estate-svg.show-yacht [data-layer="yacht"] { display: inline; } /* Collection model: every purchased car and pool has its own spot and stays visible (no upgrade-replacement) — what you buy, you see. */ /* House is built from 3 stacking parts: 1st floor + roof (base), and an optional 2nd floor (house-floor2) that inserts a storey and carries the raised roof. When the 2nd floor is owned, hide the 1st-floor's low roof so the raised roof (inside house-floor2) sits on top of the 2nd floor. */ .estate-svg.show-house-floor2 .house-roof-low { display: none; } /* Purchase reward: ONLY the just-bought part pops (with a golden glow) when arriving from the shop via /sidlo?bought=. Other parts render statically, so the new element clearly stands out as the reward (M-02 / reward feel). */ @keyframes estate-pop-big { 0% { opacity: 0; transform: scale(0.55); filter: drop-shadow(0 0 0 rgba(255,205,60,0)); } 55% { opacity: 1; transform: scale(1.20); filter: drop-shadow(0 0 14px rgba(255,205,60,0.95)); } 100% { opacity: 1; transform: scale(1.00); filter: drop-shadow(0 0 0 rgba(255,205,60,0)); } } @media (prefers-reduced-motion: no-preference) { .estate-svg .estate-just-bought { transform-box: fill-box; transform-origin: center bottom; animation: estate-pop-big 950ms cubic-bezier(0.2, 0.8, 0.2, 1) both; } } /* Estate purchase toast (shown on /sidlo after a buy). */ .estate-toast { position: fixed; left: 50%; bottom: calc(var(--bottom-nav-h, 64px) + 16px); transform: translateX(-50%) translateY(20px); background: var(--accent); color: var(--accent-fg); font-weight: 700; padding: 12px 20px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.35); opacity: 0; pointer-events: none; z-index: 60; transition: opacity 240ms ease, transform 240ms ease; } .estate-toast.estate-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── Tabs ────────────────────────────────────────────────────── */ .tabs { display: flex; gap: 4px; margin: 24px 0 16px; border-bottom: 1px solid var(--border); } .tab { background: transparent; border: none; color: var(--muted); padding: 12px 16px; cursor: pointer; border-bottom: 2px solid transparent; font: inherit; transition: color 150ms ease, border-color 150ms ease; } .tab.tab-active { color: var(--text); border-bottom-color: var(--accent); } .tab:hover:not(.tab-active) { color: var(--text); } /* ── Store grid ──────────────────────────────────────────────── */ .item-card { display: flex; flex-direction: column; gap: 8px; } .item-card.owned { opacity: 0.7; } .item-card .price { font-size: 24px; color: var(--accent); font-weight: 600; } /* ── Badges grid ─────────────────────────────────────────────── */ .badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; } .badge-item { text-align: center; padding: 8px; border-radius: 12px; background: var(--panel-2); } .badge-item.badge-locked { opacity: 0.35; filter: grayscale(1); } .badge-icon { font-size: 32px; } .badge-label { font-size: 11px; color: var(--muted); margin-top: 4px; } /* ── Mission cards ───────────────────────────────────────────── */ .mission-card { display: block; text-decoration: none; color: var(--text); transition: border-color 150ms ease, var(--transition); } .mission-card:hover { border-color: var(--accent); text-decoration: none; } .mission-label { font-weight: 600; font-size: 1rem; } .mission-ex { font-size: .85rem; color: var(--muted); margin-top: 2px; } .stars { color: var(--warning); font-size: 1.1rem; margin-top: 4px; } /* ── Sector badges ─────────────────────────────────────────── */ .sector-badge { font-size: 11px; padding: 2px 8px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border); margin-left: 8px; display: inline-block; vertical-align: middle; } .sector-techlab { color: #06B6D4; border-color: #06B6D4; } .sector-pekarna { color: #F59E0B; border-color: #F59E0B; } .sector-geometrie { color: #8B5CF6; border-color: #8B5CF6; } /* ── Dashboard mini-estate ──────────────────────────────────── */ .dashboard-mini-estate { background: var(--panel-2); border-radius: 12px; overflow: hidden; } .dashboard-mini-estate svg { width: 100%; display: block; } /* ── Z reálného světa (real-world section) ─────────────────── */ .real-world-content h3 { font-size: 1rem; margin-top: 16px; margin-bottom: 6px; color: var(--accent); } .real-world-content p { margin-bottom: 12px; line-height: 1.55; } .real-world-content p:last-child { margin-bottom: 0; } .sector-importer { color: #10B981; border-color: #10B981; } /* ── Admin panel (extracted from templates/admin/base.html inline style) so /admin/audit response body contains no '@' character — R-AUDIT-LOG. */ .admin-nav { display: flex; gap: 4px; overflow-x: auto; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--border); } .admin-link { color: var(--muted); text-decoration: none; padding: 8px 12px; border-radius: 8px; white-space: nowrap; font-size: 14px; } .admin-link:hover, .admin-link--active { background: var(--panel-2); color: var(--text); } .admin-tag { font-size: 12px; padding: 4px 8px; background: color-mix(in srgb, var(--warning) 18%, transparent); border-radius: 6px; display: inline-block; margin-bottom: 16px; } .stat-card { background: var(--panel-2); padding: 16px; border-radius: 12px; } .stat-card .num { font-size: 32px; font-weight: 700; color: var(--accent); } .stat-card .lbl { color: var(--muted); font-size: 14px; margin-top: 4px; } .admin-grid { display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 768px) { .admin-grid { grid-template-columns: repeat(4, 1fr); } } table.admin-table { width: 100%; border-collapse: collapse; } table.admin-table th, table.admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; font-size: 14px; } table.admin-table th { font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; } table.admin-table tr:hover td { background: var(--panel-2); } .heatmap-grid { display: grid; grid-template-columns: 72px repeat(24, 1fr); gap: 2px; font-size: 10px; } .heatmap-grid .hm-h { text-align: center; color: var(--muted); padding: 2px 0; } .heatmap-grid .hm-d { color: var(--muted); padding-right: 6px; display: flex; align-items: center; font-size: 11px; } .heatmap-grid .hm-cell { aspect-ratio: 1; border-radius: 2px; } .badge-chip { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 12px; background: var(--panel-2); border: 1px solid var(--border); margin: 2px; } .section-h2 { font-size: 16px; font-weight: 600; margin: 24px 0 10px; color: var(--text); } .back-link { color: var(--muted); text-decoration: none; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 12px; } .back-link:hover { color: var(--text); } /* /admin/audit responsive table — sloupce se stackuji na mobilech (<=480px). */ .audit-table-wrap { overflow-x: auto; } .audit-table { width: 100%; } .audit-table th, .audit-table td { word-break: break-word; } @media (max-width: 480px) { .audit-table thead { display: none; } .audit-table, .audit-table tbody, .audit-table tr, .audit-table td { display: block; width: 100%; } .audit-table tr { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 8px; padding: 8px; } .audit-table td { border: none; padding: 4px 0; } .audit-table td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--muted); display: inline-block; min-width: 110px; } } /* /admin/time-to-mastery responsive table (R-TIME-TO-MASTERY). */ .ttm-table-wrap { overflow-x: auto; } .ttm-table { width: 100%; } .ttm-table th, .ttm-table td { word-break: break-word; } @media (max-width: 480px) { .ttm-table thead { display: none; } .ttm-table, .ttm-table tbody, .ttm-table tr, .ttm-table td { display: block; width: 100%; } .ttm-table tr { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 8px; padding: 8px; } .ttm-table td { border: none; padding: 4px 0; } .ttm-table td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--muted); display: inline-block; min-width: 110px; } } /* === Plán 04 R-FOCUS-VISIBLE-POLISH === */ /* Additive keyboard-accessibility focus rings. Mobile-first: :focus-visible per W3C spec does not trigger on pure touch input, so these rings appear only for keyboard users (desktop and tablet-with-Bluetooth-keyboard) and do not affect touch UX. Existing baseline rules above (universal and .btn :focus-visible plus the .input:focus box-shadow ring) are preserved verbatim. */ button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } [role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } label:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .bottom-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* === /Plán 04 R-FOCUS-VISIBLE-POLISH === */