/* CZKOMPLEX brand tokens — jediný zdroj pravdy pro web i appky. Web = data-theme="dark" (výchozí). Appky = data-theme="light" (pracovní prostor). Použití: + Fonty: Schibsted Grotesk (UI + nadpisy), IBM Plex Mono (čísla, štítky, lhůty, IČO). */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Schibsted+Grotesk:wght@400;500;600;700;800&display=swap'); :root{ --czk-bg:#111213; /* stránka */ --czk-bg2:#1b1c1e; /* karta / panel */ --czk-bg3:#242526; /* hover / vnořený panel */ --czk-ink:#f2f1ec; /* text */ --czk-ink2:#b7b6b0; /* sekundární text */ --czk-mute:#77766f; /* popisky, placeholder */ --czk-line:#2c2d2e; /* oddělovač */ --czk-line2:#242526; /* jemnější oddělovač */ --czk-brand:#c98a3a; /* jantar — akcent, aktivní stav, „blíží se" */ --czk-brand-ink:#111213; /* text NA jantaru */ --czk-sig:#e8552f; /* signál — chyba, po termínu, krizová linka */ --czk-ok:#6fae7c; /* v pořádku */ --czk-primary:#f2f1ec; /* hlavní tlačítko (na tmavé = krémové) */ --czk-primary-ink:#111213; --czk-fd:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; --czk-fm:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --czk-r:4px; /* jeden poloměr rohů. Žádné pilulky kromě .czk-tag */ --czk-wrap:1320px; --czk-gutter:clamp(16px,4vw,64px); } [data-theme="light"]{ --czk-bg:#f4f3ee; --czk-bg2:#ffffff; --czk-bg3:#eeece5; --czk-ink:#131211; --czk-ink2:#3d3b37; --czk-mute:#767468; --czk-line:#d6d3c8; --czk-line2:#e6e3d9; --czk-brand:#a8701f; /* jantar ztmavený kvůli kontrastu na světlé (AA na bílé) */ --czk-brand-ink:#ffffff; --czk-sig:#b23d1c; --czk-ok:#2f7a44; --czk-primary:#131211; /* hlavní tlačítko (na světlé = inkoust) */ --czk-primary-ink:#f2f1ec; } /* ── základ ─────────────────────────────────────────────── */ .czk{font-family:var(--czk-fd);background:var(--czk-bg);color:var(--czk-ink);line-height:1.4; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} .czk *,.czk *::before,.czk *::after{box-sizing:border-box} .czk a{color:inherit;text-decoration:none} .czk button{font:inherit;color:inherit} .czk-mono{font-family:var(--czk-fm);font-feature-settings:"tnum" 1} .czk-wrap{max-width:var(--czk-wrap);margin:0 auto;padding-left:var(--czk-gutter);padding-right:var(--czk-gutter)} /* nadpisy: těsné, těžké, bez ozdob */ .czk h1,.czk .czk-h1{font-weight:800;letter-spacing:-.03em;line-height:.95;margin:0} .czk h2,.czk .czk-h2{font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:0} .czk h3,.czk .czk-h3{font-weight:600;letter-spacing:-.01em;line-height:1.15;margin:0} .czk-h1{font-size:clamp(40px,7vw,112px)} .czk-h2{font-size:clamp(26px,3.6vw,48px)} .czk-h3{font-size:clamp(17px,1.6vw,22px)} .czk-lead{font-size:clamp(16px,1.5vw,20px);color:var(--czk-ink2);max-width:58ch} /* kicker / štítek nad nadpisem — vždy mono, verzálky */ .czk-kicker{font-family:var(--czk-fm);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--czk-mute);margin:0 0 10px} .czk-kicker b{color:var(--czk-brand);font-weight:600} /* ── horní lišta (web i appka — v appce VŽDY tmavá, i na light theme) ──── */ .czk-topbar{background:#111213;color:#f2f1ec;border-bottom:1px solid #2c2d2e} .czk-topbar .czk-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px} .czk-topbar .czk-logo{display:inline-flex;align-items:center;height:18px} .czk-topbar .czk-logo svg,.czk-topbar .czk-logo img{height:18px;width:auto;display:block} .czk-topbar .czk-nav{display:flex;gap:28px;font-family:var(--czk-fm);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#b7b6b0} .czk-topbar .czk-nav a{padding:4px 0;border-bottom:1px solid transparent} .czk-topbar .czk-nav a:hover,.czk-topbar .czk-nav a[aria-current]{color:#f2f1ec;border-color:#c98a3a} .czk-topbar .czk-tel{text-align:right;line-height:1.15;white-space:nowrap} .czk-topbar .czk-tel b{font-weight:700;font-size:15px;display:block;color:#f2f1ec} .czk-topbar .czk-tel small{font-family:var(--czk-fm);font-size:10.5px;color:#e8552f;letter-spacing:.06em;text-transform:uppercase} /* „fakta" lišta pod hlavičkou webu */ .czk-facts{display:flex;flex-wrap:wrap;gap:6px 0;font-family:var(--czk-fm);font-size:12px;color:var(--czk-mute);padding:12px 0;border-top:1px solid var(--czk-line);border-bottom:1px solid var(--czk-line2)} .czk-facts span::after{content:"·";margin:0 12px;color:var(--czk-line)} .czk-facts span:last-child::after{content:none} /* ── tlačítka: hranaté, jeden tvar všude ──────────────────── */ .czk .czk-btn{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:var(--czk-r);border:1px solid var(--czk-line); background:transparent;color:var(--czk-ink);font-weight:600;font-size:14px;line-height:1;cursor:pointer;white-space:nowrap; transition:background .12s,border-color .12s,color .12s} .czk .czk-btn:hover{border-color:var(--czk-ink)} .czk .czk-btn:focus-visible{outline:2px solid var(--czk-brand);outline-offset:2px} .czk .czk-btn-primary{background:var(--czk-primary);color:var(--czk-primary-ink);border-color:var(--czk-primary)} .czk .czk-btn-primary:hover{background:var(--czk-brand);border-color:var(--czk-brand);color:var(--czk-brand-ink)} .czk .czk-btn-brand{background:var(--czk-brand);border-color:var(--czk-brand);color:var(--czk-brand-ink)} .czk .czk-btn-brand:hover{filter:brightness(1.08)} .czk .czk-btn-danger{border-color:var(--czk-sig);color:var(--czk-sig)} .czk .czk-btn-danger:hover{background:var(--czk-sig);color:#fff} .czk .czk-btn-sm{padding:7px 12px;font-size:13px} .czk .czk-btn .czk-arrow{font-family:var(--czk-fm);font-weight:400} .czk .czk-btn[disabled]{opacity:.45;cursor:default;pointer-events:none} /* ── štítky značek a stavů ──────────────────────────────── */ .czk-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--czk-fm);font-size:11px;letter-spacing:.06em;text-transform:uppercase; padding:3px 8px;border:1px solid var(--czk-line);border-radius:999px;color:var(--czk-ink2);line-height:1.3;white-space:nowrap} .czk-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7} .czk-tag-czkomplex{color:var(--czk-brand);border-color:var(--czk-brand)} .czk-tag-czgroup{color:var(--czk-ink);border-color:var(--czk-ink2)} .czk-tag-polarka{color:#6fa8dc;border-color:#6fa8dc} [data-theme="light"] .czk-tag-polarka{color:#2f6ea6;border-color:#2f6ea6} .czk-tag-ok{color:var(--czk-ok);border-color:var(--czk-ok)} .czk-tag-warn{color:var(--czk-brand);border-color:var(--czk-brand)} .czk-tag-bad{color:var(--czk-sig);border-color:var(--czk-sig)} /* ── karty a tabulky ─────────────────────────────────────── */ .czk-card{background:var(--czk-bg2);border:1px solid var(--czk-line);border-radius:var(--czk-r);padding:20px} .czk-card .czk-kicker{margin-bottom:6px} .czk-stat{display:flex;flex-direction:column;gap:6px} .czk-stat b{font-family:var(--czk-fm);font-weight:600;font-size:clamp(26px,3vw,40px);letter-spacing:-.02em;line-height:1} .czk-stat span{font-size:13px;color:var(--czk-mute)} .czk-table{width:100%;border-collapse:collapse;font-size:14px} .czk-table th{font-family:var(--czk-fm);font-weight:500;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--czk-mute); text-align:left;padding:8px 12px;border-bottom:1px solid var(--czk-ink)} .czk-table td{padding:11px 12px;border-bottom:1px solid var(--czk-line2);vertical-align:middle} .czk-table tr:hover td{background:var(--czk-bg3)} .czk-table .czk-mono{font-size:13px} /* ── formuláře: jeden label, jedno pole, nápověda až na požádání ─ */ .czk-field{display:flex;flex-direction:column;gap:6px} .czk-field label{font-size:13px;font-weight:600} .czk-field label small{font-family:var(--czk-fm);font-weight:400;color:var(--czk-mute);margin-left:6px;text-transform:uppercase;font-size:10.5px;letter-spacing:.06em} .czk-input{font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--czk-line);border-radius:var(--czk-r);background:var(--czk-bg2);color:var(--czk-ink);width:100%} .czk-input:focus{outline:none;border-color:var(--czk-brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--czk-brand) 22%,transparent)} .czk-input::placeholder{color:var(--czk-mute)} .czk-help{font-size:12.5px;color:var(--czk-mute)} /* ── boční menu appky (admin) ─────────────────────────────── */ .czk-sidenav{display:flex;flex-direction:column;gap:2px;padding:8px} .czk-sidenav a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:var(--czk-r);font-size:14px;color:var(--czk-ink2)} .czk-sidenav a:hover{background:var(--czk-bg3);color:var(--czk-ink)} .czk-sidenav a[aria-current]{background:var(--czk-bg3);color:var(--czk-ink);box-shadow:inset 3px 0 0 var(--czk-brand)} .czk-sidenav .czk-badge{font-family:var(--czk-fm);font-size:11px;padding:1px 7px;border-radius:999px;background:var(--czk-brand);color:var(--czk-brand-ink)} .czk-sidenav .czk-group{font-family:var(--czk-fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--czk-mute);padding:14px 12px 6px} /* ── záložky ─────────────────────────────────────────────── */ .czk-tabs{display:flex;gap:2px;border-bottom:1px solid var(--czk-line)} .czk-tabs button{background:none;border:0;padding:10px 14px;font-weight:600;font-size:14px;color:var(--czk-mute);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer} .czk-tabs button:hover{color:var(--czk-ink)} .czk-tabs button[aria-selected="true"]{color:var(--czk-ink);border-color:var(--czk-brand)} /* ── hero s fotkou vyříznutou do písma (web) ──────────────── */ .czk-knockout{font-weight:800;letter-spacing:-.04em;line-height:.9;text-transform:uppercase; background-size:cover;background-position:center;-webkit-background-clip:text;background-clip:text;color:transparent} /* tisk: appka tiskne vždy světle, mono se zachová */ @media print{ :root{--czk-bg:#fff;--czk-bg2:#fff;--czk-bg3:#f4f3ee;--czk-ink:#000;--czk-ink2:#222;--czk-mute:#555;--czk-line:#bbb;--czk-line2:#ddd;--czk-brand:#8a5c1f;--czk-sig:#b23d1c} .czk-topbar{background:#fff;color:#000;border-bottom:2px solid #000} .czk-topbar .czk-logo svg path{fill:#000} } /* mobil: nav a telefon jdou do hamburgeru (řeší stránka), lišta zůstává logo + tlačítko */ @media(max-width:820px){ .czk-topbar .czk-nav,.czk-topbar .czk-tel{display:none} .czk-topbar .czk-wrap{min-height:56px} }