/* ===== Czech Data Hub (cz-data) — TechTools.cz ===== Public tabbed tool, account:none, bilingual EN/CS. Dark, mobile-first. Loaded AFTER /shared-topnav.css so this :root seeds --tt-topnav-h. */ :root { --primary-bg: #0a0a0f; --secondary-bg: #141419; --card-bg: #1a1a24; --card-bg-2: #20202c; --border-color: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.18); --accent-primary: #6366f1; --accent-secondary: #8b5cf6; --accent-gradient: linear-gradient(135deg,#6366f1,#8b5cf6); --ok: #34d399; --ok-bg: rgba(52,211,153,.12); --warn: #fbbf24; --warn-bg: rgba(251,191,36,.12); --danger: #f87171; --danger-bg: rgba(248,113,113,.12); --text-primary: #fff; --text-secondary: rgba(255,255,255,.72); --text-muted: rgba(255,255,255,.50); --radius-sm:.45rem; --radius-md:.7rem; --radius-lg:1.1rem; --transition:.2s ease; --tt-topnav-h: 64px; } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; padding: 0; overflow-x: clip; } body { font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background: var(--primary-bg); color: var(--text-primary); line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--accent-secondary); } .page { min-height: calc(100vh - var(--tt-topnav-h)); } .app { max-width: 900px; margin: 0 auto; padding: 1.4rem 1rem 3rem; } /* hero */ .hero { text-align: center; padding: 1rem 0 1.2rem; } .hero-badge { display:inline-flex; align-items:center; gap:.45rem; font-size:.78rem; font-weight:600; color: var(--accent-secondary); background: rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.3); padding:.32rem .75rem; border-radius:999px; margin-bottom:.9rem; } .hero h1 { font-size: clamp(1.7rem,5vw,2.5rem); font-weight:800; letter-spacing:-.02em; margin:0 0 .5rem; background: linear-gradient(120deg,#fff 30%,#c7d2fe 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .lead { color: var(--text-secondary); font-size:1rem; max-width:40rem; margin:0 auto; } /* tabs */ .tabs { display:flex; gap:.4rem; overflow-x:auto; padding-bottom:.4rem; margin-bottom:1.4rem; border-bottom:1px solid var(--border-color); scrollbar-width:thin; } .tab { flex:0 0 auto; display:inline-flex; align-items:center; gap:.5rem; background:transparent; border:1px solid transparent; color: var(--text-secondary); font-family:inherit; font-size:.9rem; font-weight:600; padding:.6rem .9rem; border-radius:var(--radius-sm); cursor:pointer; min-height:44px; white-space:nowrap; transition: all var(--transition); } .tab:hover { color: var(--text-primary); background: var(--card-bg); } .tab.active { color:#fff; background: var(--card-bg); border-color: var(--border-strong); box-shadow: inset 0 -2px 0 var(--accent-primary); } .tab i { color: var(--accent-secondary); } .panel { animation: fade .25s ease; } @keyframes fade { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform:none; } } /* generic fields / buttons */ .field { display:flex; flex-direction:column; gap:.35rem; } .field.grow { flex:1 1 12rem; min-width:0; } .field label { font-size:.74rem; color: var(--text-muted); font-weight:600; } .field input, .field select { width:100%; background: var(--card-bg-2); color: var(--text-primary); border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:.7rem .8rem; font-size:1rem; font-family:inherit; min-height:48px; transition: border-color var(--transition); color-scheme: dark; } .field input:focus, .field select:focus { outline:none; border-color: var(--accent-primary); } .field select { cursor:pointer; appearance:none; padding-right:2rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .7rem center; } .btn-primary { display:inline-flex; align-items:center; gap:.5rem; background: var(--accent-gradient); color:#fff; border:none; border-radius:var(--radius-sm); padding:0 1.3rem; min-height:48px; font-size:.95rem; font-weight:600; font-family:inherit; cursor:pointer; transition: filter var(--transition); } .btn-primary:hover { filter: brightness(1.1); } /* search (firmy) */ .search { display:flex; align-items:center; gap:.5rem; background: var(--card-bg); border:1px solid var(--border-strong); border-radius:999px; padding:.4rem .4rem .4rem 1rem; max-width:40rem; margin:0 auto; transition: border-color var(--transition), box-shadow var(--transition); } .search:focus-within { border-color: var(--accent-primary); box-shadow:0 0 0 4px rgba(99,102,241,.18); } .search-icon { color: var(--text-muted); } .search input { flex:1; min-width:0; background:transparent; border:none; outline:none; color: var(--text-primary); font-size:1rem; font-family:inherit; padding:.5rem 0; } .search input::placeholder { color: var(--text-muted); } .search button { flex-shrink:0; background: var(--accent-gradient); color:#fff; border:none; border-radius:999px; padding:.7rem 1.4rem; font-size:.95rem; font-weight:600; font-family:inherit; cursor:pointer; min-height:44px; } .search button:hover { filter: brightness(1.1); } .examples { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.45rem; margin-top:1rem; font-size:.85rem; } .examples-label { color: var(--text-muted); } .chip { background: var(--card-bg); border:1px solid var(--border-color); color: var(--text-secondary); border-radius:999px; padding:.34rem .8rem; font-size:.83rem; font-family:inherit; cursor:pointer; min-height:32px; transition: all var(--transition); } .chip:hover { border-color: var(--accent-primary); color: var(--text-primary); background: var(--card-bg-2); } /* status / spinner */ .status { text-align:center; margin:1.3rem auto 0; max-width:40rem; padding:1rem 1.2rem; border-radius:var(--radius-md); font-size:.95rem; } .status.loading { color: var(--text-secondary); } .status.error { color: var(--danger); background: var(--danger-bg); border:1px solid rgba(248,113,113,.3); } .spinner { display:inline-block; width:1.1em; height:1.1em; border:2px solid rgba(255,255,255,.25); border-top-color: var(--accent-secondary); border-radius:50%; margin-right:.5rem; vertical-align:-.18em; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* results list (firmy) */ .results { margin-top:1.4rem; display:grid; gap:.6rem; } .result-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; text-align:left; background: var(--card-bg); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:.85rem 1rem; color:inherit; font-family:inherit; cursor:pointer; transition: all var(--transition); } .result-row:hover { border-color: var(--accent-primary); background: var(--card-bg-2); } .result-row[disabled] { opacity:.5; cursor:default; } .result-name { font-weight:600; font-size:.96rem; } .result-meta { color: var(--text-muted); font-size:.8rem; margin-top:.15rem; } /* profile + verdict cards (firmy / dph) */ .profile, .result { margin-top:1.4rem; } .card { background: var(--card-bg); border:1px solid var(--border-color); border-radius:var(--radius-lg); overflow:hidden; } .card-head { padding:1.3rem 1.4rem 1.1rem; background: linear-gradient(160deg, rgba(99,102,241,.16), rgba(139,92,246,.05)); border-bottom:1px solid var(--border-color); } .card-head .form-badge { display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--accent-secondary); background: rgba(139,92,246,.14); border:1px solid rgba(139,92,246,.3); padding:.22rem .6rem; border-radius:999px; margin-bottom:.55rem; } .card-head h2 { margin:0; font-size: clamp(1.2rem,3.5vw,1.7rem); font-weight:700; } .card-head .subline { color: var(--text-secondary); font-size:.88rem; margin-top:.3rem; } .flag-warn { display:inline-flex; align-items:center; gap:.4rem; margin-top:.6rem; color: var(--warn); background: var(--warn-bg); border:1px solid rgba(251,191,36,.35); border-radius:var(--radius-sm); padding:.4rem .7rem; font-size:.84rem; font-weight:600; } .flag-warn.danger { color: var(--danger); background: var(--danger-bg); border-color: rgba(248,113,113,.4); } .card-body { padding:1.1rem 1.4rem 1.3rem; display:grid; gap:1.1rem; } .facts { display:grid; gap:.1rem; } .fact { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid var(--border-color); } .fact:last-child { border-bottom:none; } .fact-k { color: var(--text-muted); font-size:.85rem; display:flex; align-items:center; gap:.5rem; flex-shrink:0; } .fact-k i { width:1rem; text-align:center; } .fact-v { text-align:right; font-size:.92rem; font-weight:500; word-break:break-word; } .fact-v .yes { color: var(--ok); font-weight:600; } .fact-v .no { color: var(--text-muted); } .copy-btn { background:none; border:none; color: var(--text-muted); cursor:pointer; font-size:.82rem; padding:.15rem .35rem; margin-left:.35rem; border-radius:.3rem; transition: color var(--transition); } .copy-btn:hover { color: var(--accent-secondary); } .copy-btn.copied { color: var(--ok); } .section-title { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--text-muted); margin:1.4rem 0 .6rem; } .registers { display:flex; flex-wrap:wrap; gap:.45rem; } .reg { display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:500; padding:.35rem .7rem; border-radius:999px; background: var(--ok-bg); color: var(--ok); border:1px solid rgba(52,211,153,.3); } .reg.inactive { background: rgba(255,255,255,.04); color: var(--text-muted); border-color: var(--border-color); } .reg.danger { background: var(--danger-bg); color: var(--danger); border-color: rgba(248,113,113,.4); } .nace-list { display:grid; gap:.4rem; } .nace-item { display:flex; gap:.7rem; padding:.5rem .7rem; background: var(--card-bg-2); border-radius:var(--radius-sm); font-size:.88rem; } .nace-code { color: var(--accent-secondary); font-weight:600; flex-shrink:0; min-width:3.2rem; font-variant-numeric: tabular-nums; } .nace-name { color: var(--text-secondary); } .members { display:grid; gap:.5rem; } .member { display:flex; align-items:center; gap:.7rem; padding:.55rem .7rem; background: var(--card-bg-2); border-radius:var(--radius-sm); } .member-ic { width:2rem; height:2rem; border-radius:50%; flex-shrink:0; display:grid; place-items:center; background: rgba(99,102,241,.15); color: var(--accent-secondary); font-size:.85rem; } .member-main { min-width:0; flex:1; display:flex; flex-direction:column; } .member-name { font-weight:600; font-size:.9rem; } .member-name a { color:inherit; text-decoration:none; border-bottom:1px dotted var(--text-muted); } .member-name a:hover { color: var(--accent-secondary); } .member-share { color: var(--text-muted); font-size:.8rem; margin-top:.1rem; } .card-actions { display:flex; flex-wrap:wrap; gap:.5rem; padding-top:.2rem; } .btn { display:inline-flex; align-items:center; gap:.45rem; font-size:.88rem; font-weight:600; font-family:inherit; padding:.6rem 1rem; border-radius:var(--radius-sm); cursor:pointer; text-decoration:none; min-height:44px; transition: all var(--transition); } .btn.btn-primary { padding:.6rem 1rem; } .btn-ghost { background: var(--card-bg-2); color: var(--text-secondary); border:1px solid var(--border-color); } .btn-ghost:hover { border-color: var(--accent-primary); color: var(--text-primary); } /* dph verdict */ .verdict { display:flex; align-items:center; gap:1rem; padding:1.2rem 1.4rem; border-radius:var(--radius-lg) var(--radius-lg) 0 0; border:1px solid var(--border-color); border-bottom:none; } .verdict-icon { width:3rem; height:3rem; border-radius:50%; display:grid; place-items:center; font-size:1.4rem; flex-shrink:0; } .verdict-text h2 { margin:0; font-size:1.2rem; font-weight:700; } .verdict-text p { margin:.2rem 0 0; font-size:.86rem; color: var(--text-secondary); } .verdict.valid { background: linear-gradient(160deg, var(--ok-bg), transparent); } .verdict.valid .verdict-icon { background: var(--ok-bg); color: var(--ok); } .verdict.invalid { background: linear-gradient(160deg, var(--danger-bg), transparent); } .verdict.invalid .verdict-icon { background: var(--danger-bg); color: var(--danger); } .verdict.unknown { background: linear-gradient(160deg, var(--warn-bg), transparent); } .verdict.unknown .verdict-icon { background: var(--warn-bg); color: var(--warn); } .verdict + .card-body { border:1px solid var(--border-color); border-top:none; border-radius:0 0 var(--radius-lg) var(--radius-lg); background: var(--card-bg); } .sources { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; } .src-chip { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:600; padding:.3rem .65rem; border-radius:999px; background: var(--ok-bg); color: var(--ok); border:1px solid rgba(52,211,153,.3); } .src-note { color: var(--text-muted); font-size:.82rem; } .vat-form { display:flex; flex-wrap:wrap; gap:.6rem; align-items:flex-end; } .vat-form .field.country { flex:0 0 8.5rem; } /* converter (kurzy) */ .converter { background: var(--card-bg); border:1px solid var(--border-strong); border-radius:var(--radius-lg); padding:1.2rem; margin-bottom:1.4rem; } .conv-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.7rem; } .conv-row .field { flex:1 1 8rem; min-width:0; } .swap-btn { flex:0 0 auto; width:48px; height:48px; border-radius:50%; background: var(--accent-gradient); color:#fff; border:none; cursor:pointer; font-size:1rem; display:grid; place-items:center; align-self:flex-end; transition: filter var(--transition); } .swap-btn:hover { filter: brightness(1.1); } .conv-result { margin-top:1rem; font-size: clamp(1.3rem,4vw,1.9rem); font-weight:700; word-break:break-word; } .conv-result .res-num { color: var(--ok); } .conv-rate { margin-top:.4rem; color: var(--text-muted); font-size:.84rem; } .filter-field { position:relative; display:flex; align-items:center; max-width:16rem; } .filter-field i { position:absolute; left:.7rem; color: var(--text-muted); font-size:.85rem; pointer-events:none; } .filter-field input { width:100%; background: var(--card-bg-2); color: var(--text-primary); border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:.5rem .7rem .5rem 2rem; font-family:inherit; font-size:.9rem; min-height:40px; } .filter-field input:focus { outline:none; border-color: var(--accent-primary); } .table-wrap { overflow-x:auto; border:1px solid var(--border-color); border-radius:var(--radius-md); margin-top:.6rem; } .rate-table { width:100%; border-collapse:collapse; font-size:.9rem; } .rate-table th, .rate-table td { padding:.55rem .8rem; text-align:left; white-space:nowrap; } .rate-table thead th { color: var(--text-muted); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background: var(--card-bg-2); border-bottom:1px solid var(--border-color); } .rate-table th.num, .rate-table td.num { text-align:right; font-variant-numeric: tabular-nums; } .rate-table tbody tr { border-bottom:1px solid var(--border-color); } .rate-table tbody tr:last-child { border-bottom:none; } .code-badge { display:inline-block; font-weight:700; color: var(--accent-secondary); background: rgba(139,92,246,.12); border-radius:.3rem; padding:.1rem .4rem; font-size:.82rem; } .ccy-country { color: var(--text-muted); font-size:.8rem; } /* validators */ .privacy-note { display:flex; align-items:center; gap:.5rem; color: var(--ok); font-size:.85rem; margin:0 0 1.2rem; } .val-grid { display:grid; grid-template-columns: 1fr; gap:1rem; } .val-card { background: var(--card-bg); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:1rem 1.1rem; } .val-card > label { display:block; font-size:.9rem; font-weight:600; margin-bottom:.5rem; color: var(--text-primary); } .val-card > label i { color: var(--accent-secondary); } .val-card input { width:100%; background: var(--card-bg-2); color: var(--text-primary); border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:.65rem .8rem; font-size:1rem; font-family:inherit; min-height:46px; } .val-card input:focus { outline:none; border-color: var(--accent-primary); } .val-out { margin-top:.6rem; font-size:.88rem; min-height:1.2em; } .val-out:empty { display:none; } .val-out.ok { color: var(--ok); } .val-out.bad { color: var(--danger); } .val-out.info { color: var(--text-secondary); } .val-out .vsub { color: var(--text-muted); display:block; margin-top:.2rem; font-size:.82rem; } .val-out code { background: var(--card-bg-2); padding:.1rem .35rem; border-radius:.3rem; color: var(--text-primary); } /* big card (svatky today, electricity now) */ .big-card { background: var(--card-bg); border:1px solid var(--border-strong); border-radius:var(--radius-lg); padding:1.4rem; margin-bottom:1.2rem; text-align:center; } .big-card .bc-label { color: var(--text-muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; } .big-card .bc-main { font-size: clamp(1.6rem,5vw,2.3rem); font-weight:800; margin:.3rem 0; } .big-card .bc-main.ok { color: var(--ok); } .big-card .bc-main.warn { color: var(--warn); } .big-card .bc-main.danger { color: var(--danger); } .big-card .bc-sub { color: var(--text-secondary); font-size:.9rem; } .sv-row, .calc-row { display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; margin-bottom:1.1rem; } .sv-row .field, .calc-row .field { flex:1 1 10rem; } .sv-row .val-out, .calc-row .val-out { flex:1 1 12rem; } .holidays { display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap:.5rem; } .holiday { display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem; background: var(--card-bg-2); border-radius:var(--radius-sm); font-size:.85rem; } .holiday .h-date { color: var(--accent-secondary); font-weight:600; font-variant-numeric: tabular-nums; flex-shrink:0; } .holiday .h-name { color: var(--text-secondary); } /* electricity hours */ .hours { display:grid; grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); gap:.4rem; } .hour { display:flex; flex-direction:column; gap:.2rem; padding:.5rem .6rem; background: var(--card-bg-2); border-radius:var(--radius-sm); border-left:3px solid var(--border-color); } .hour.low { border-left-color: var(--ok); } .hour.medium { border-left-color: var(--warn); } .hour.high { border-left-color: var(--danger); } .hour.now { box-shadow:0 0 0 2px var(--accent-primary); } .hour .h-hr { color: var(--text-muted); font-size:.78rem; } .hour .h-price { font-weight:700; font-size:.95rem; font-variant-numeric: tabular-nums; } .hour .h-cheap { color: var(--ok); font-size:.72rem; font-weight:600; } .muted { color: var(--text-muted); font-size:.82rem; } .foot { margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--border-color); color: var(--text-muted); font-size:.82rem; text-align:center; } .foot a { color: var(--text-secondary); } /* toast */ .toast { position:fixed; bottom:1.2rem; left:50%; transform: translateX(-50%) translateY(1rem); background: var(--card-bg-2); color: var(--text-primary); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:.7rem 1.1rem; font-size:.88rem; font-weight:500; box-shadow:0 12px 32px rgba(0,0,0,.5); opacity:0; pointer-events:none; transition: all var(--transition); z-index: calc(var(--tt-z-toast,1100) + 10); } .toast.show { opacity:1; transform: translateX(-50%) translateY(0); } .toast i { color: var(--ok); margin-right:.4rem; } /* responsive */ @media (min-width:640px){ .facts { grid-template-columns:1fr 1fr; gap:0 2rem; } .val-grid { grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .app { padding:1rem .85rem 2.5rem; } .search { flex-wrap:wrap; border-radius:var(--radius-lg); padding:.6rem; } .search input { flex-basis:100%; } .search-icon { display:none; } .search button { flex:1; } .conv-row .field, .vat-form .field { flex-basis:100%; } .swap-btn { align-self:center; transform: rotate(90deg); } .fact { flex-direction:column; gap:.15rem; align-items:flex-start; } .fact-v { text-align:left; } .vat-form .btn-primary { flex:1 1 100%; justify-content:center; } } @media (prefers-reduced-motion: reduce){ * { animation:none !important; transition:none !important; } } /* Dark-theme dropdown fix (fleet sweep 2026-06-30): native