/* ============================================================ digiscimap design system Sdílený základ pro všechny nástroje v tomto repozitáři (dashboard, tools/hub, …). Viz design/AGENTS.md pro filozofii a pravidla použití. Fonty jsou self-hosted (žádný hotlinking na Google Fonts) — soubory design/fonts/inter-*.woff2 jsou součástí repozitáře. Vzdušný, bezrámečkový vzhled: hierarchie stojí na typografii a bílém prostoru, ne na boxech a linkách. Rámečky/pozadí, které zůstávají, jsou buď funkční (vstupní pole, aktivní stav v menu), nebo explicitní součást definice loga (viz .title-bar-rule). ============================================================ */ @font-face { font-family: "Inter"; src: url("fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ---------------------------------------------------------------- tokeny */ :root { /* Základní dvojice manifestu: černá (text) + modrá (odkazy, akcent) — přesně #0000FF, barva výchozího HTML hypertextového odkazu. */ --foreground: #000000; --background: #ffffff; --gray: rgba(0, 0, 0, 0.04); --gray-mid: rgba(0, 0, 0, 0.14); --gray-strong: rgba(0, 0, 0, 0.5); --blue: #0000FF; --flag: #0000FF; /* Stavová paleta — sémantické signály (hotovo/čeká/urgentní), ne dekorace. Používá se výhradně v malých plochách (tečka, badge, progress), nikdy jako barva textu nebo velké plochy. Viz design/AGENTS.md. */ --green: #4ade80; --orange: #fbbf24; --red: #f87171; } html[data-theme="dark"] { --foreground: #ffffff; --background: #0a0a0a; --gray: rgba(255, 255, 255, 0.06); --gray-mid: rgba(255, 255, 255, 0.18); --gray-strong: rgba(255, 255, 255, 0.6); /* Čisté #0000FF má na tmavém pozadí špatný kontrast — použij světlejší tón téže modré, ne jinou barvu. */ --blue: #6266FF; --flag: #6266FF; --green: #4ade80; --orange: #fbbf24; --red: #fca5a5; } /* ---------------------------------------------------------------- reset */ /* Bez !important: výchozí je 0 (ostré hrany), ale konkrétní komponenty (aktivní pill v tree menu) si radius smí zapnout zpátky. */ * { box-sizing: border-box; border-radius: 0; } /* ---------------------------------------------------------------- typografie */ body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.55; background: var(--background); color: var(--foreground); margin: 0; padding: 0; } /* Puntíková mřížka na pozadí (z PhD dashboardu) — volitelná, zapíná se atributem na , stejně jako [data-theme]. Viz design/AGENTS.md. background-attachment: fixed drží vzor ukotvený k viewportu, takže navazuje beze švu i přes header a sidebar (mají vlastní neprůhledné pozadí kvůli sticky pozicování). */ html[data-grid="on"] body, html[data-grid="on"] header, html[data-grid="on"] .sidebar, html[data-grid="on"] .sidebar-arrow { background-image: radial-gradient(circle, var(--gray-mid) 0.8px, transparent 0.8px); background-size: 14px 14px; background-attachment: fixed; } a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; } a:hover { text-decoration-thickness: 2px; } strong { font-weight: 600; } em { font-style: italic; } code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85em; background: var(--gray); padding: 0 4px; } del { color: var(--gray-strong); } h1 { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; } h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); } h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; } /* ---------------------------------------------------------------- header / title bar */ header { background-color: var(--background); padding: 22px 32px 26px; position: sticky; top: 0; z-index: 10; } .header-row { display: flex; align-items: center; gap: 20px; } .header-actions { display: flex; gap: 8px; flex-shrink: 0; } /* Rámující linky title baru — jediné "rámečky" v celém systému, protože jsou explicitní součástí definice loga (viz LaTeX \DigiScimaptitlebar). */ .title-bar-rule { flex: 1 1 auto; height: 1px; background: var(--gray-strong); opacity: 0.5; min-width: 20px; } .title-row { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .flag-logo { flex-shrink: 0; width: 30px; height: 30px; } .flag-logo .flag-fill { fill: var(--flag); } .flag-logo .flag-stroke { stroke: var(--foreground); } .meta { display: flex; gap: 22px; font-size: 13px; color: var(--gray-strong); flex-wrap: wrap; margin-top: 6px; } .meta strong { color: var(--foreground); font-weight: 600; } .source-badge { padding: 1px 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-strong); } /* Pill styl podle Angular Material chips — obrys + zaoblení (další výjimka ze sharp-corners resetu, viz design/AGENTS.md). */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border: 1px solid var(--gray-mid); border-radius: 999px; background: transparent; color: var(--foreground); font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; } .chip:hover { background: var(--gray); } .chip.active { background: var(--blue); border-color: var(--blue); color: #fff; } /* ---------------------------------------------------------------- horizontální menu */ .nav-h { display: flex; flex-wrap: wrap; gap: 26px; } .nav-h a { color: var(--foreground); text-decoration: none; font-size: 15px; padding-bottom: 4px; border-bottom: 1px solid transparent; } .nav-h a:hover { color: var(--blue); } .nav-h a.active { color: var(--blue); border-bottom-color: var(--blue); } /* ---------------------------------------------------------------- breadcrumbs */ .breadcrumb { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-size: 13px; } .breadcrumb-item { display: flex; align-items: center; } .breadcrumb-item + .breadcrumb-item::before { content: "/"; margin: 0 8px; color: var(--gray-strong); } .breadcrumb-item a { color: var(--blue); text-decoration: none; } .breadcrumb-item a:hover { text-decoration: underline; } .breadcrumb-item.active { color: var(--gray-strong); } /* ---------------------------------------------------------------- taby (Material-styl, posuvný indikátor) */ .tabs-list { position: relative; display: flex; border-bottom: 1px solid var(--gray-mid); } .tab { border: none; background: none; cursor: pointer; padding: 13px 20px; font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; color: var(--gray-strong); white-space: nowrap; } .tab:hover { color: var(--foreground); } .tab.active { color: var(--blue); } .tab-indicator { position: absolute; bottom: -1px; left: 0; height: 2px; width: 0; background: var(--blue); transition: left 0.2s ease, width 0.2s ease; } .tab-panel { padding-top: 20px; } /* ---------------------------------------------------------------- filtry / hledání */ .filters { padding: 14px 32px; } .search { width: 100%; padding: 6px 2px; border: none; border-bottom: 1px solid var(--gray-mid); background: transparent; color: var(--foreground); font-family: inherit; font-size: 15px; } .search:focus { outline: none; border-bottom-color: var(--blue); } .search::placeholder { color: var(--gray-strong); } /* ---------------------------------------------------------------- layout skeleton */ .layout { display: flex; align-items: flex-start; } main { flex: 1; padding: 36px 40px; max-width: 900px; min-width: 0; } /* vertikální menu (sidebar) */ .sidebar { width: 190px; background-color: var(--background); padding: 36px 0; flex-shrink: 0; position: sticky; top: 0; align-self: stretch; min-height: 100vh; overflow: hidden; transition: width 0.18s ease, padding 0.18s ease; } .sidebar.collapsed, html[data-sidebar="collapsed"] .sidebar { width: 0; padding: 0; } .sidebar-section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gray-strong); padding: 0 32px 12px; margin: 0; font-weight: 400; white-space: nowrap; } .sidebar-item { display: block; padding: 6px 32px; cursor: pointer; font-size: 14px; color: var(--foreground); user-select: none; position: relative; white-space: nowrap; } .sidebar-item:hover { color: var(--blue); } .sidebar-item.active { color: var(--blue); font-weight: 600; } .sidebar-note { padding: 16px 32px 0; margin: 0; font-size: 12px; color: var(--gray-strong); font-style: italic; white-space: nowrap; } /* Volitelný sbalovací sloupek se šipkou vedle sidebaru (viz tools/hub) */ .sidebar-arrow { flex-shrink: 0; width: 18px; align-self: stretch; position: sticky; top: 0; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding-top: 40px; margin: 0; border: none; background-color: var(--background); color: var(--gray-strong); font-family: inherit; font-size: 11px; line-height: 1; cursor: pointer; } .sidebar-arrow:hover { color: var(--blue); } /* Skládací (accordion) tree menu — vnořené položky s expand/collapse, aktivní/hover stav jako zaoblený "pill" (jediné místo v systému se zaoblením — viz design/AGENTS.md). */ .tree-nav { padding: 10px 10px; } .tree-group { margin-bottom: 2px; } .tree-item { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; text-align: left; cursor: pointer; padding: 9px 10px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--foreground); } .tree-item:hover, .tree-item.active { background: var(--gray); border-radius: 8px; } .tree-chevron { width: 12px; height: 12px; flex-shrink: 0; color: var(--gray-strong); transition: transform 0.15s ease; } .tree-item.expanded .tree-chevron { transform: rotate(90deg); } .tree-children { display: flex; flex-direction: column; padding-left: 30px; } .tree-children.collapsed { display: none; } .tree-child { display: block; padding: 7px 10px; font-size: 14px; font-weight: 400; color: var(--foreground); text-decoration: none; cursor: pointer; border: none; background: none; text-align: left; width: 100%; font-family: inherit; } .tree-child:hover { color: var(--blue); } .tree-child.active { color: var(--blue); font-weight: 500; } .tree-divider { border: none; border-top: 1px solid var(--gray-mid); margin: 10px 10px; } .section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; gap: 12px; } .count { font-size: 13px; color: var(--gray-strong); font-weight: 400; } /* ---------------------------------------------------------------- formuláře */ fieldset { border: none; margin: 0 0 32px; padding: 0; } legend { padding: 0 0 8px; margin-bottom: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-strong); border-bottom: 1px solid var(--gray-mid); width: 100%; } label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-strong); margin: 14px 0 5px; } input[type=text], input[type=number], input[type=search], input[type=email], input[type=password], input[type=date], select, textarea { width: 100%; background: transparent; color: var(--foreground); border: none; border-bottom: 1px solid var(--gray-mid); padding: 6px 2px; font-size: 14px; font-family: inherit; } textarea { min-height: 120px; resize: vertical; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13.5px; border: 1px solid var(--gray-mid); padding: 10px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); } select { cursor: pointer; } .inline-options { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 6px; } .inline-options label, .checkbox-row { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--foreground); cursor: pointer; margin: 4px 0; } .inline-options input, .checkbox-row input { width: auto; accent-color: var(--blue); } /* ---------------------------------------------------------------- tlačítka */ /* Plné, vyplněné (Bootstrap styl), ale hranaté — žádný border-radius. Jen tři varianty: primary (naše modrá), secondary (šedá), dark (pevně černá, nezávisle na tématu — jako Bootstrap .btn-dark). */ .btn-row { display: flex; gap: 10px; align-items: center; margin: 20px 0 24px; flex-wrap: wrap; } button { font-family: inherit; } .btn { display: inline-block; border: 1px solid transparent; padding: 8px 18px; font-size: 14px; font-weight: 500; line-height: 1.4; cursor: pointer; transition: filter 0.1s ease; } .btn:disabled { opacity: 0.5; cursor: default; filter: none; } .btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; } .btn-primary:hover { filter: brightness(0.88); } .btn-secondary { background: var(--gray-strong); border-color: var(--gray-strong); color: #fff; } .btn-secondary:hover { filter: brightness(0.88); } .btn-dark { background: #111111; border-color: #111111; color: #fff; } .btn-dark:hover { filter: brightness(1.3); } /* ---------------------------------------------------------------- rámeček */ /* Orámovaný box (černý 1px border, bílé/tmavé pozadí), volitelně se stínem — vzor z PhD dashboardu (.timeline-card / .postup-text). Další záměrná výjimka z "žádné rámečky" — na rozdíl od karet zůstává hranatý, žádné zaoblení. */ .box { border: 1px solid var(--foreground); background: var(--background); padding: 22px 26px 26px; } .box.shadow { box-shadow: 8px 8px var(--gray-mid); } .box-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--gray-mid); } .box-title { font-size: 18px; font-weight: 700; } .box-badge { background: var(--foreground); color: var(--background); padding: 3px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .box-label { margin: 20px 0 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-strong); } .box-label:first-child { margin-top: 0; } .box p { margin: 0 0 14px; line-height: 1.6; } .box p:last-child { margin-bottom: 0; } .box ul { margin: 0; padding-left: 20px; } .box li { margin-bottom: 8px; line-height: 1.5; } .box-checklist { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .box-checklist label { display: flex; align-items: center; gap: 10px; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--foreground); margin: 0; cursor: pointer; } .box-checklist input { accent-color: var(--blue); } .box-checklist .done { color: var(--gray-strong); text-decoration: line-through; } /* ---------------------------------------------------------------- stepper */ /* Vzor podle Angular Material stepper — jen vizuální, neklikací. Tečka (s číslem) + propojovací linka, vedle ní titulek a volitelný popisek pod ním. Modrá tečka je další jmenovitá výjimka ze sharp-corners resetu (kruh), stejně jako .chip / .tree-item pill. */ .stepper { display: flex; flex-direction: column; } .step { display: flex; gap: 14px; align-items: stretch; } .step-marker { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; } .step-dot { width: 28px; height: 28px; border-radius: 999px; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; } .step-line { flex: 1; width: 2px; min-height: 16px; background: var(--gray-mid); margin: 4px 0; } .step:last-child .step-line { display: none; } .step-content { flex: 1; padding: 3px 0 24px; } .step:last-child .step-content { padding-bottom: 0; } .step-title { font-size: 15px; font-weight: 600; } .step-desc { font-size: 13px; color: var(--gray-strong); line-height: 1.5; margin-top: 4px; } /* ---------------------------------------------------------------- poster (zkušební) */ /* Náhled akademického posteru — experimentální komponenta, tvar se ještě může měnit. Znovupoužívá .box vzhled (rámeček, hranaté) pro jednotlivé sloupce, aby to sedělo se zbytkem systému. Poster samotný má jen obyčejný rámeček bez stínu — stín je vyhrazený pro sloupce uvnitř (.box.shadow), aby vynikly jako samostatné bloky. */ .poster { position: relative; border: 1px solid var(--foreground); background-color: var(--background); padding: 40px 44px; overflow: hidden; } /* Síť na pozadí jako samostatná vrstva (ne přímo .poster background), aby šla vymaskovat — pod titulkem není vidět vůbec, od dělicí linky hlavičky se postupně zesiluje na plnou sílu. */ .poster::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(circle, var(--gray-mid) 1px, transparent 1px); background-size: 14px 14px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 150px, black 230px); mask-image: linear-gradient(to bottom, transparent 0, transparent 150px, black 230px); } .poster-header, .poster-rows, .poster-footer { position: relative; z-index: 1; } .poster-header { display: flex; align-items: flex-start; gap: 20px; padding-bottom: 24px; margin-bottom: 28px; border-bottom: 2px solid var(--foreground); } .poster-header .flag-logo { width: 76px; height: 76px; flex-shrink: 0; margin-top: 4px; } .poster-title { font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0 0 6px; } .poster-subtitle { font-size: 15px; color: var(--gray-strong); font-weight: 500; margin: 0 0 14px; } .poster-authors { font-size: 13px; font-weight: 600; margin: 0 0 4px; } .poster-affil { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--gray-strong); margin: 0; } /* Řádky (ne sloupce) — každý blok přes celou šířku posteru, hlavička jako v .box-header (výrazný titulek + dělicí linka), stejně jako "2025 / 2026" v Rámečku. */ .poster-rows { display: flex; flex-direction: column; gap: 32px; } .poster-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } .poster-row { padding: 22px 26px 26px; } .poster-row p { font-size: 14px; line-height: 1.6; } .poster-row ul { font-size: 14px; padding-left: 20px; } .poster-row li { margin-bottom: 6px; line-height: 1.55; } .poster-row .box-label { font-size: 11px; } /* Karty se vejdou vedle sebe — řádek je přes celou šířku posteru. Zmenšené oproti běžné .card (samostatná Karty záložka), ať nejsou tak vysoké. */ .poster-row .cards { overflow: visible; padding-bottom: 0; justify-content: center; } .poster-row .card { flex-basis: 190px; padding: 16px 16px 14px; } .poster-row .card-icon { width: 36px; height: 36px; margin: 0 auto 10px; } .poster-row .card-title { font-size: 13px; margin-bottom: 4px; } .poster-row .card-desc { font-size: 11.5px; line-height: 1.45; } /* Šedý mockup místo obrázku/QR kódu, dokud není hotový skutečný. */ .poster-placeholder { background: var(--gray); aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; margin-top: 14px; color: var(--gray-strong); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; } .poster-qr { background: var(--gray); width: 92px; height: 92px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--gray-strong); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; } .poster-footer { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--gray-mid); font-size: 11px; color: var(--gray-strong); line-height: 1.6; } /* ---------------------------------------------------------------- karty */ /* Vzor podle NYT "Puzzles & Games" shelf — horizontální řada karet s ikonou, titulkem, popiskem a odkazem dole. Barevné podklady nahrazené šedou (žádné brand barvy mimo černou/modrou); hranaté, žádná výjimka ze sharp-corners resetu. */ .cards { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 4px; } .card { flex: 0 0 220px; display: flex; flex-direction: column; background: var(--gray); padding: 26px 22px 20px; text-align: center; text-decoration: none; color: var(--foreground); } .card:hover { background: var(--gray-mid); } .card-icon { width: 56px; height: 56px; margin: 4px auto 18px; display: flex; align-items: center; justify-content: center; } .card-icon svg { width: 100%; height: 100%; } .card-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; } .card-desc { font-size: 13px; color: var(--gray-strong); line-height: 1.5; flex: 1; } .card-cta { font-size: 12px; font-weight: 600; color: var(--blue); margin-top: 22px; } /* ---------------------------------------------------------------- tabulky */ table { width: 100%; border-collapse: collapse; font-size: 14px; font-family: inherit; } th, td { text-align: left; padding: 8px 14px 8px 0; border-bottom: 1px solid var(--gray-mid); vertical-align: top; } th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-strong); font-weight: 600; border-bottom: 1px solid var(--foreground); } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--gray); } .table-scroll { max-height: 380px; overflow: auto; } .table-scroll table { font-size: 14px; } .table-scroll th { position: sticky; top: 0; background: var(--background); } /* ---------------------------------------------------------------- footer */ footer { padding: 0 32px 40px; text-align: center; font-size: 12px; color: var(--gray-strong); } /* Stejná linka jako v title baru (.title-bar-rule), ale tady stojí samostatně přes celou šířku patičky, ne po stranách loga. */ footer .title-bar-rule { display: block; width: 100%; margin: 0 0 24px; } footer .flag-logo { display: block; margin: 0 auto 14px; } footer p { margin: 0; } footer a { color: var(--gray-strong); } footer a:hover { color: var(--blue); } /* ---------------------------------------------------------------- utility */ .empty { color: var(--gray-strong); padding: 24px 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; } .hint { color: var(--gray-strong); font-size: 14px; margin: 6px 0 0; } .hidden { display: none !important; }