/* ============================================================================ Lepší maso — design systém ---------------------------------------------------------------------------- Jeden soubor pro VŠECHNY plochy. Před tímhle měla appka čtyři nesouvisející vizuální systémy (tmavá hnědá konzole, tmavý slate customer_card, světlá krémová veřejná stránka, vlastní paleta v date_pickeru) a 4377 řádků duplikovaného CSS. Cokoliv se tu změní, změní se všude. PALETA: hluboká lesní zelená + chladné papírové neutrály. Vědomě NE béžová/terakotová. Lepší maso prodává masO z pastvy na předplatné a jeho skutečný argument je pastva a dohledatelnost (VS, porážkové dny, doručovací okna), ne řemeslná nostalgie. Takže paleta má být „pole a denní světlo", ne „kůže v řeznictví". Teplo na zákaznických stránkách nese fotografie, ne CSS. TVARY: jedno pravidlo, platí všude — ovládací prvky (tlačítka, inputy) 4px, kontejnery (karty) 6px, štítky stavů plný radius. Nic jiného se nezakulacuje. PÍSMA: Geist + Geist Mono, self-hostovaná ze static/fonts/ (viz komentář u STATICFILES_DIRS v settings.py — hotlink na Google je problém s GDPR). Mono se používá na VŠECHNA čísla, ne na ozdobu: konzole je hustá tabulková plocha a proporcionální číslice v ní neseřadí sloupec. HUSTOTA: = hustý provozní režim (operátor v tom sedí celý den), = vzdušný zákaznický režim. Paleta stejná. ============================================================================ */ /* ---------- Písma ---------------------------------------------------------- */ /* @font-face je v samostatnem static/css/lm-fonts.css, protoze ho potrebuje i Django admin, ktery si ale zbytek tohohle souboru vzit nemuze. Sablony linkuji lm-fonts.css PRED lm.css. */ /* ---------- Tokeny: světlý režim ------------------------------------------ */ :root { --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace; --bg: #f2f5f2; --bg-elevated: #fbfdfb; --panel: #ffffff; --surface: #ffffff; /* alias pro zákaznické šablony */ --panel-2: #e9eee9; --border: #bec7bf; --border-soft: #d3dcd4; /* Hranice OVLÁDACÍCH prvků (input, select, textarea, tlačítko). --border je vlasová linka kontejnerů a dělítek — na papírovém pozadí má 1,7:1, což je na kontejner v pořádku, ale na inputu ne: WCAG 1.4.11 chce 3:1 pro obrys, podle kterého se prvek vůbec pozná. Ve světlém režimu bez toho pole splývala s kartou a formulář vypadal jako plocha textu. 3,3:1 na bílé. */ --border-strong: #7b857d; --text: #0d120f; --text-muted: #38403a; /* Vysoký kontrast 7.8:1 na bílé */ --text-faint: #4c544e; /* 5.8:1 na bílé — zaručená čitelnost */ --accent: #174227; /* hluboká lesní zelená, 11:1 na bílé */ --accent-hover: #0f2c1a; --accent-soft: #e0eee2; --accent-text: #113820; --accent-on: #ffffff; /* text NA plné akcentní ploše */ --success: #205e34; --success-soft: #def3e3; --danger: #9c1f14; --danger-soft: #fee4e2; --warning: #7a4604; --warning-soft: #fef0d2; --info: #343c39; /* zřetelná tmavší neutrální */ --info-soft: #e4e7e5; /* aliasy, na kterých stojí zákaznické šablony */ --forest: var(--accent); --forest-soft: var(--accent-soft); --radius: 4px; /* ovládací prvky */ --radius-lg: 6px; /* kontejnery */ --shadow: 0 1px 2px rgba(20, 24, 21, 0.05); --shadow-lift: 0 4px 14px rgba(20, 24, 21, 0.08); --speed: 140ms; --ease: cubic-bezier(0.16, 1, 0.3, 1); /* hustota — přepisuje ji .console / .portal na body */ --base-size: 15px; --cell-y: 0.6rem; --cell-x: 0.85rem; color-scheme: light dark; } /* ---------- Tokeny: tmavý režim ------------------------------------------- */ /* Ne čistá čerň (#000 zabíjí hloubku) a ne modrý slate. Neutrální off-black, akcent se rozsvětlí, aby na tmavé prošel na kontrast. */ @media (prefers-color-scheme: dark) { :root { --bg: #101211; --bg-elevated: #161918; --panel: #191d1b; --surface: #191d1b; --panel-2: #222726; --border: #2e3432; --border-soft: #242927; --border-strong: #6b746e; /* 3,5:1 na tmavé kartě — stejné pravidlo jako ve světlém */ --text: #e8ebe9; --text-muted: #9aa39d; --text-faint: #8b948d; --accent: #6fbe8b; --accent-hover: #87cf9f; --accent-soft: rgba(111, 190, 139, 0.14); --accent-text: #8fd0a5; --accent-on: #0e1210; --success: #6fbe8b; --success-soft: rgba(111, 190, 139, 0.14); --danger: #e2857a; --danger-soft: rgba(226, 133, 122, 0.14); --warning: #d9ac5c; --warning-soft: rgba(217, 172, 92, 0.14); --info: #9aa39d; --info-soft: rgba(154, 163, 157, 0.12); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-lift: 0 4px 14px rgba(0, 0, 0, 0.5); } } /* ---------- Základ -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); font-size: var(--base-size); line-height: 1.55; background: var(--bg); color: var(--text); min-height: 100dvh; /* ne 100vh — na iOS Safari skáče o výšku lišty */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.console { --base-size: 14px; --cell-y: 0.45rem; --cell-x: 0.7rem; } body.portal { --base-size: 16px; --cell-y: 0.7rem; --cell-x: 1rem; line-height: 1.6; } h1, h2, h3, h4 { margin: 0; font-family: var(--sans); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: var(--text); text-wrap: balance; /* zabíjí osamocená slova na poslední řádce */ } h1 { font-size: 1.55rem; } h2 { font-size: 1.12rem; } h3 { font-size: 0.98rem; } body.portal h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.025em; } body.portal h2 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); } p { margin: 0 0 0.85rem; max-width: 68ch; text-wrap: pretty; } p:last-child { margin-bottom: 0; } body.portal p { color: var(--text-muted); } a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--accent); } strong { font-weight: 600; } hr { border: none; border-top: 1px solid var(--border-soft); margin: 1.5rem 0; } code, kbd, samp, .mono { font-family: var(--mono); font-size: 0.92em; font-variant-numeric: tabular-nums; } code { color: var(--accent-text); } /* Čísla musí být tabulární, jinak se sloupec v tabulce nezarovná. */ .num, td, th, .count, input[type="number"], input[type="date"] { font-variant-numeric: tabular-nums; } ::selection { background: var(--accent-soft); color: var(--accent-text); } /* ---------- Přístupnost --------------------------------------------------- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 0.5rem; top: -3rem; z-index: 100; background: var(--accent); color: var(--accent-on); padding: 0.5rem 0.9rem; border-radius: var(--radius); font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: top var(--speed) var(--ease); } .skip-link:focus { top: 0.5rem; color: var(--accent-on); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ---------- Layout ------------------------------------------------------- */ .shell { max-width: 1240px; margin: 0 auto; padding: 1.5rem 1.5rem 3.5rem; } .wrap { max-width: 1080px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; } .wrap-narrow { max-width: 420px; margin: 0 auto; padding: 3.5rem 1.5rem; } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; } .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; } .row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; } .row-between { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; } .stack > * + * { margin-top: 0.75rem; } .muted { color: var(--text-muted); } .faint { color: var(--text-faint); } .right { text-align: right; } /* ---------- Horní lišta (konzole) ---------------------------------------- */ /* Výška 52px. Nav musí zůstat na JEDNOM řádku do 1024px; pod tím se sroluje vodorovně, což je lepší než dvouřádková lišta žrající výšku. Skrytá za tenký (0,5 cm) vodorovný proužek s šipkou uprostřed (.topbar-handle) — kliknutím se lišta vysune dolů (max-height), místo aby zabírala místo trvale. */ .topbar-handle { position: sticky; top: 0; z-index: 21; height: 0.5cm; display: flex; align-items: center; justify-content: center; background: var(--panel); border-bottom: 1px solid var(--border-soft); cursor: pointer; color: var(--text-faint); user-select: none; } .topbar-handle:hover { color: var(--text); background: var(--panel-2); } .topbar-handle .chevron { display: inline-block; font-size: 0.7rem; line-height: 1; transition: transform var(--speed) var(--ease); } .topbar-handle[aria-expanded="true"] .chevron { transform: rotate(180deg); } .topbar { background: var(--panel); border-bottom: 1px solid transparent; margin-bottom: 0; position: sticky; top: 0.5cm; z-index: 20; max-height: 0; overflow: hidden; transition: max-height var(--speed) var(--ease), border-color var(--speed) var(--ease); } .topbar.open { max-height: 80px; border-bottom-color: var(--border); } .topbar-inner { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 52px; } .brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; flex-shrink: 0; } .brand-mark { width: 24px; height: 24px; border-radius: var(--radius); background: var(--accent); color: var(--accent-on); font-weight: 700; font-size: 0.8rem; letter-spacing: -0.03em; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brand-name { font-weight: 600; font-size: 0.95rem; color: var(--text); letter-spacing: -0.02em; white-space: nowrap; } .brand-sub { font-size: 0.68rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.07em; padding-left: 0.55rem; margin-left: 0.05rem; border-left: 1px solid var(--border); white-space: nowrap; } .nav-links { display: flex; gap: 0.15rem; overflow-x: auto; scrollbar-width: none; } .nav-links::-webkit-scrollbar { display: none; } .nav-item { padding: 0.35rem 0.7rem; border-radius: var(--radius); color: var(--text-muted); text-decoration: none; font-size: 0.85rem; font-weight: 500; white-space: nowrap; transition: background var(--speed) var(--ease), color var(--speed) var(--ease); } .nav-item:hover { color: var(--text); background: var(--panel-2); } .nav-item.active { color: var(--accent-text); background: var(--accent-soft); font-weight: 600; } @media (max-width: 720px) { .brand-sub { display: none; } .topbar-inner { gap: 0.75rem; } } /* ---------- Hlavička (zákaznická) --------------------------------------- */ .site-header { border-bottom: 1px solid var(--border); background: var(--panel); } .site-header-inner { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .site-header .brand-mark { width: 30px; height: 30px; font-size: 0.95rem; } .site-header .brand-name { font-size: 1.08rem; } .header-link { font-size: 0.88rem; font-weight: 600; color: var(--text-muted); text-decoration: none; } .header-link:hover { color: var(--accent); } /* ---------- Nadpisové drobnosti ----------------------------------------- */ /* .eyebrow je malý kapitálkový štítek nad nadpisem. V konzoli je to legitimní označení sekce v hustém rozhraní. Na zákaznických stránkách se drží na minimu — tam z toho jinak vznikne ta typická „každá sekce má nálepku" šablonovitost. */ .eyebrow { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.3rem; } .lead { font-size: 1.05rem; color: var(--text-muted); max-width: 60ch; } body.portal .lead { font-size: 1.12rem; } /* ---------- Karty ------------------------------------------------------- */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.15rem 1.3rem; margin-bottom: 1.25rem; } body.portal .card { padding: 1.6rem 1.8rem; margin-bottom: 1.5rem; box-shadow: var(--shadow); } .card > :last-child { margin-bottom: 0; } .card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.9rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--border-soft); } .card-header:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .card-note { font-size: 0.85rem; color: var(--text-muted); margin: 0.35rem 0 0; } .card-flush { padding: 0; overflow: hidden; } .card-flush .card-header { padding: 1.15rem 1.3rem 0.8rem; margin-bottom: 0; } /* ---------- Nápověda / kroky -------------------------------------------- */ details.guide { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 0.85rem 1.1rem; margin-bottom: 1.5rem; } details.guide summary { font-weight: 600; font-size: 0.95rem; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--text); } details.guide summary::-webkit-details-marker { display: none; } details.guide summary::after { content: "+"; font-family: var(--mono); color: var(--text-faint); font-size: 1.1rem; line-height: 1; } details.guide[open] summary::after { content: "\2212"; } .guide-hint { font-size: 0.78rem; font-weight: 400; color: var(--text-faint); } .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.75rem; margin-top: 1rem; } .step { background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 0.8rem 0.9rem; } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-family: var(--mono); font-weight: 700; font-size: 0.7rem; margin-bottom: 0.45rem; } .step strong { display: block; margin-bottom: 0.15rem; font-size: 0.9rem; } .step p { font-size: 0.82rem; color: var(--text-muted); margin: 0; } /* ---------- Tlačítka ---------------------------------------------------- */ /* :active posune o 1px dolů — hmatová odezva, aby kliknutí mělo fyzický pocit. */ button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.45rem 0.85rem; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--panel); color: var(--text); font-family: var(--sans); font-size: 0.85rem; font-weight: 600; line-height: 1.25; cursor: pointer; text-decoration: none; white-space: nowrap; /* text v CTA se nesmí zlomit na dva řádky */ transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease), transform var(--speed) var(--ease); } body.portal button, body.portal .btn { padding: 0.65rem 1.2rem; font-size: 0.92rem; } button:hover, .btn:hover { background: var(--panel-2); border-color: var(--text-faint); color: var(--text); } button:active, .btn:active { transform: translateY(1px); } button[disabled], .btn[disabled], button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on); } button.primary:hover, .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-on); } button.success, .btn.success { background: var(--success); border-color: var(--success); color: var(--accent-on); } button.success:hover, .btn.success:hover { filter: brightness(1.08); color: var(--accent-on); } button.danger, .btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); } button.danger:hover, .btn.danger:hover { background: var(--danger-soft); color: var(--danger); } button.ghost, .btn.ghost { background: transparent; border-color: var(--border-strong); color: var(--text-muted); } button.ghost:hover, .btn.ghost:hover { background: var(--panel-2); color: var(--text); } button.block, .btn.block { width: 100%; } button.sm, .btn.sm { padding: 0.28rem 0.6rem; font-size: 0.78rem; } .btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; } /* Textový odkaz jako terciární akce — ubere vizuální šum tam, kde by dvě tlačítka vedle sebe soupeřila. */ .btn-link { background: none; border: none; padding: 0; color: var(--accent-text); font-weight: 600; font-size: 0.85rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } /* ---------- Formuláře --------------------------------------------------- */ /* Label VŽDY nad inputem, chybová hláška pod ním. Placeholder není label. */ input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], input[type="password"], input[type="search"], select, textarea { width: 100%; padding: 0.45rem 0.65rem; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text); font-family: inherit; font-size: 0.88rem; line-height: 1.4; transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease); } body.portal input[type="text"], body.portal input[type="email"], body.portal input[type="tel"], body.portal select, body.portal textarea { padding: 0.6rem 0.8rem; font-size: 0.95rem; } textarea { resize: vertical; min-height: 5rem; } input:hover, select:hover, textarea:hover { border-color: var(--text-faint); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } input::placeholder, textarea::placeholder { color: var(--text-faint); opacity: 1; } input[aria-invalid="true"], .field-error input, .field-error textarea, .field-error select { border-color: var(--danger); } select { appearance: none; background-image: linear-gradient(45deg, transparent 49%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 51%); background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size: 5px 5px, 5px 5px; /* Bez `no-repeat` se ty dva pětipixelové trojúhelníčky, ze kterých je složená šipka, vydláždí po CELÉ ploše seznamu. Výsledkem je šrafovaná tapeta přes text, takže vybraná hodnota nejde přečíst — a protože je to tady v základním stylu, platilo to na všech rozbalovacích seznamech v portálu, konzoli operátora i v provozní sekci. */ background-repeat: no-repeat; padding-right: 1.8rem; } select option, select optgroup { background-color: var(--surface, #191d1b); color: var(--text, #e8ebe9); padding: 0.5rem 0.75rem; font-size: 0.95rem; } label.field-label, .field > label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text); margin-bottom: 0.3rem; } .field { margin-bottom: 0.9rem; } .field-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.25rem; } .field-msg { font-size: 0.78rem; color: var(--danger); margin-top: 0.25rem; font-weight: 500; } fieldset { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 1rem 1.1rem; margin: 0 0 1rem; } legend { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); padding: 0 0.4rem; } form.inline-form { display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap; margin-top: 0.85rem; } form.inline-form label { font-size: 0.8rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 0.25rem; } form.inline-form input, form.inline-form select { width: auto; min-width: 9rem; } /* ---------- Tabulky ----------------------------------------------------- */ /* Hustý režim: jen spodní vlasová linka mezi řádky, žádné rámečky okolo každé buňky. Hlavička se lepí, protože provozní tabulky jsou dlouhé. */ .table-wrap { overflow-x: auto; margin-top: 0.85rem; } table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .card > table:first-child, .table-wrap > table { margin-top: 0; } th { text-align: left; color: var(--text-faint); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.5rem var(--cell-x); border-bottom: 1px solid var(--border); background: var(--panel); position: sticky; top: 0; z-index: 1; white-space: nowrap; } td { padding: var(--cell-y) var(--cell-x); border-bottom: 1px solid var(--border-soft); vertical-align: top; } tbody tr:last-child td { border-bottom: none; } tbody tr { transition: background var(--speed) var(--ease); } tbody tr:hover { background: var(--bg-elevated); } td.num, th.num, td.right, th.right { text-align: right; font-family: var(--mono); } table caption { text-align: left; font-size: 0.8rem; color: var(--text-muted); padding-bottom: 0.5rem; } /* ---------- Dlaždice ---------------------------------------------------- */ .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; } .tile { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 0.8rem 0.9rem; text-decoration: none; color: var(--text); transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease); } a.tile:hover { border-color: var(--accent); background: var(--panel); color: var(--text); } .tile .count { font-family: var(--mono); font-size: 1.45rem; font-weight: 600; letter-spacing: -0.03em; display: block; color: var(--text); line-height: 1.1; } .tile .count.zero { color: var(--text-faint); font-weight: 400; } .tile .label { font-size: 0.76rem; color: var(--text-muted); display: block; margin-top: 0.15rem; } /* ---------- Štítky stavů ------------------------------------------------ */ /* Plný radius je vyhrazený VÝHRADNĚ štítkům stavu. Nic jiného v systému není pilulka, takže kulatý tvar sám nese informaci „tohle je stav". */ .pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; line-height: 1.6; white-space: nowrap; } .pill-ok, .pill-active { background: var(--success-soft); color: var(--success); } .pill-fail { background: var(--danger-soft); color: var(--danger); } .pill-warn { background: var(--warning-soft); color: var(--warning); } .pill-wait, .pill-muted { background: var(--info-soft); color: var(--info); } .pill-accent { background: var(--accent-soft); color: var(--accent-text); } /* ---------- Hlášky ------------------------------------------------------ */ .messages { list-style: none; margin: 0 0 1.25rem; padding: 0; } .messages li, .notice { padding: 0.6rem 0.9rem; border-radius: var(--radius); margin-bottom: 0.45rem; font-size: 0.86rem; font-weight: 500; border-left: 3px solid var(--border); background: var(--bg-elevated); color: var(--text); } .messages li:last-child { margin-bottom: 0; } .messages .success, .notice.success { background: var(--success-soft); border-left-color: var(--success); } .messages .error, .notice.danger { background: var(--danger-soft); border-left-color: var(--danger); } .messages .warning, .notice.warning { background: var(--warning-soft); border-left-color: var(--warning); } .messages .info, .notice.info { background: var(--info-soft); border-left-color: var(--info); } /* ---------- Prázdné a načítací stavy ------------------------------------ */ /* Prázdný stav není „nic tu není" — má říct, co se má stát dál. */ .empty { text-align: center; padding: 2.25rem 1.5rem; border: 1px dashed var(--border); border-radius: var(--radius-lg); background: var(--bg-elevated); } .empty-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.3rem; color: var(--text); } .empty p { font-size: 0.86rem; color: var(--text-muted); margin: 0 auto; max-width: 44ch; } .empty .btn-row { justify-content: center; margin-top: 1rem; } /* Skeleton kopíruje tvar výsledku, ne kolečko doprostřed. */ .skeleton { background: var(--panel-2); border-radius: var(--radius); height: 0.85rem; position: relative; overflow: hidden; } .skeleton + .skeleton { margin-top: 0.45rem; } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--border-soft), transparent); animation: lm-shimmer 1.4s infinite; } @keyframes lm-shimmer { 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } } /* ---------- Vstup na scénu ---------------------------------------------- */ /* Jediná animace obsahu v celém systému a má důvod: pořadí příchodu drží hierarchii čtení na zákaznické stránce. V konzoli se nepoužívá vůbec — provozní nástroj má být hned celý, ne se skládat. */ @media (prefers-reduced-motion: no-preference) { body.portal .rise { animation: lm-rise 0.5s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); } @keyframes lm-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } } /* ---------- Obrázky ----------------------------------------------------- */ img { max-width: 100%; height: auto; display: block; } /* Místo pro fotku drží poměr stran, takže se stránka po dotažení obrázku neposune (CLS). Dokud fotka nedorazí, je vidět klidná plocha, ne prázdno. */ .photo { background: var(--panel-2); border-radius: var(--radius-lg); overflow: hidden; position: relative; } .photo > img { width: 100%; height: 100%; object-fit: cover; } .photo-4x3 { aspect-ratio: 4 / 3; } .photo-3x2 { aspect-ratio: 3 / 2; } .photo-1x1 { aspect-ratio: 1 / 1; } .photo-wide { aspect-ratio: 16 / 9; } .photo-todo::after { content: attr(data-note); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; text-align: center; font-family: var(--mono); font-size: 0.72rem; line-height: 1.5; color: var(--text-faint); } /* ---------- Tisk -------------------------------------------------------- */ @media print { .topbar, .topbar-handle, .site-header, .skip-link, .btn-row, button, .btn { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } .card { border-color: #ccc; box-shadow: none; break-inside: avoid; } a { text-decoration: none; color: #000; } }