/* ============================================================================ Voyscout — app.css Single, self-contained, framework-agnostic stylesheet for the Cloudflare Worker. Drop this one file in; theme via CSS variables + prefers-color-scheme with a manual [data-theme] override on . No web fonts, no build step. (This is the productionized form of the design-system tokens in /tokens.) ============================================================================ */ /* ── 1. Design tokens ─────────────────────────────────────────────────────── */ :root { color-scheme: light dark; /* iOS safe-area insets, read through CSS vars so the visual harness can SHIM them. Headless Chromium resolves env() to 0, and the env() fallback arg fires only when env() is UNSUPPORTED (never at a real 0), so raw env() is untestable. Every consumer uses var(--sa-*) — NEVER raw env() — and guards with max(token, var) so a 0 inset is a strict no-op. Prod resolves each to the real device inset; desktop / non-notched → 0px → zero visual change. */ --sa-top: env(safe-area-inset-top, 0px); --sa-right: env(safe-area-inset-right, 0px); --sa-bottom: env(safe-area-inset-bottom, 0px); --sa-left: env(safe-area-inset-left, 0px); /* neutral ramp (Apple grays) */ --c-white: #ffffff; --c-gray-50: #f5f5f7; --c-gray-100:#ebebef; --c-gray-150:#dcdce1; --c-gray-200:#d2d2d7; --c-ink: #1d1d1f; --c-ink-2: #6e6e73; --c-ink-3: #86868b; --c-ink-4: #a1a1a6; /* accent */ --c-blue: #0071e3; --c-blue-2: #2997ff; /* verdict */ --c-green: #1d8a4e; --c-green-fill:#e3f5ea; --c-amber: #9a6700; --c-amber-fill:#fff4d6; --c-red: #d70015; --c-red-fill: #ffe5e7; /* ── semantic aliases — LIGHT (default) ── */ --bg: #ffffff; --bg-elevated: #ffffff; --surface: #f5f5f7; /* cards, fills */ --surface-2: #ebebef; --sidebar-bg: #fbfbfd; --border: #d2d2d7; --hairline: #e3e3e8; --text: #1d1d1f; --text-2: #6e6e73; --text-3: #86868b; --text-4: #a1a1a6; --accent: #0071e3; --accent-soft: rgba(0,113,227,0.10); --on-accent: #ffffff; --buy: #1d8a4e; --buy-fill: #e3f5ea; --wait: #9a6700; --wait-fill:#fff4d6; /* re-scan NOTICE semantic (light) — saturated amber accent (stripe/icon/border) + warm-dark body text readable on the cream fill. Distinct from the verdict --wait, which has no contrast on light. */ --notice:#c77a00; --notice-fill:#fdf1cd; --notice-border:#ecc56a; --notice-text:#5c4608; --watch: #6e6e73; --watch-fill:#ebebef; --alert: #d70015; --alert-fill:#ffe5e7; --skeleton: linear-gradient(90deg,#ececf0 25%,#f5f5f7 37%,#ececf0 63%); /* type */ --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --font-mono: var(--mono); /* alias used by §27/§28 (analytics dtable mono cells) */ /* radii */ --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 18px; --r-pill: 980px; /* spacing */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:30px; --s8:40px; /* depth — restrained */ --shadow-pop: 0 4px 24px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06); --shadow-raise: 0 1px 2px rgba(0,0,0,.06); --shadow-seg: 0 1px 3px rgba(0,0,0,.12); /* motion */ --ease: cubic-bezier(.4,0,.2,1); --dur: 200ms; --dur-fast: 120ms; /* layout */ --sidebar-w: 248px; --rail-w: 312px; --focus: 0 0 0 3px var(--accent-soft); } /* dark token set, shared by forced-dark and system-dark */ :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root[data-theme="system"] { color-scheme: dark; } } :root[data-theme="dark"], :root[data-theme="system"] { /* values applied in the two rules below */ } :root[data-theme="dark"] { --bg: #000000; --bg-elevated: #1c1c1e; --surface: #1c1c1e; --surface-2: #2c2c2e; --sidebar-bg: #0a0a0b; --border: #38383a; --hairline: #2a2a2c; --text: #f5f5f7; --text-2: #a1a1a6; --text-3: #8e8e93; --text-4: #6e6e73; --accent: #2997ff; --accent-soft: rgba(41,151,255,0.16); --buy: #30d158; --buy-fill: rgba(48,209,88,.16); --wait: #ffd60a; --wait-fill:rgba(255,214,10,.16); --notice:#ffd60a; --notice-fill:rgba(255,214,10,.13); --notice-border:rgba(255,214,10,.30); --notice-text:#f1e7c4; --watch:#a1a1a6; --watch-fill:#2c2c2e; --alert:#ff453a; --alert-fill:rgba(255,69,58,.16); --skeleton: linear-gradient(90deg,#1c1c1e 25%,#2a2a2c 37%,#1c1c1e 63%); --shadow-pop: 0 4px 24px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); --shadow-raise: none; --shadow-seg: 0 1px 2px rgba(0,0,0,.5); } @media (prefers-color-scheme: dark) { :root[data-theme="system"] { --bg:#000000; --bg-elevated:#1c1c1e; --surface:#1c1c1e; --surface-2:#2c2c2e; --sidebar-bg:#0a0a0b; --border:#38383a; --hairline:#2a2a2c; --text:#f5f5f7; --text-2:#a1a1a6; --text-3:#8e8e93; --text-4:#6e6e73; --accent:#2997ff; --accent-soft:rgba(41,151,255,0.16); --buy:#30d158; --buy-fill:rgba(48,209,88,.16); --wait:#ffd60a; --wait-fill:rgba(255,214,10,.16); --notice:#ffd60a; --notice-fill:rgba(255,214,10,.13); --notice-border:rgba(255,214,10,.30); --notice-text:#f1e7c4; --watch:#a1a1a6; --watch-fill:#2c2c2e; --alert:#ff453a; --alert-fill:rgba(255,69,58,.16); --skeleton: linear-gradient(90deg,#1c1c1e 25%,#2a2a2c 37%,#1c1c1e 63%); --shadow-pop: 0 4px 24px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); --shadow-raise:none; --shadow-seg:0 1px 2px rgba(0,0,0,.5); } } /* ── 2. Base / reset ──────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: none; opacity: .8; } button { font-family: inherit; } h1,h2,h3,p { margin: 0; } :focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-3); } .muted { color: var(--text-3); } .tnum { font-variant-numeric: tabular-nums; } /* ── 3. App shell (the BASE LAYOUT: sidebar | main[ topbar + content + rail ]) ── */ .app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0,1fr); min-height: 100vh; } .main { display: flex; flex-direction: column; min-width: 0; } .content-wrap { display: grid; grid-template-columns: minmax(0,1fr) var(--rail-w); gap: var(--s8); align-items: start; /* right/bottom insets for landscape-notch + home indicator (desktop → the original --s8). The ≤860 block re-pads all sides to --s5 and overrides padding-bottom to 66px + var(--sa-bottom) for the fixed tab bar, so this base rule only bites on wide (desktop / iPad-landscape) viewports. */ padding: var(--s7) max(var(--s8), var(--sa-right)) max(var(--s8), var(--sa-bottom)) var(--s8); max-width: 1280px; width: 100%; } .content-wrap.no-rail { grid-template-columns: minmax(0,1fr); max-width: 920px; } .content { min-width: 0; } /* ── 4. Sidebar ───────────────────────────────────────────────────────────── */ .sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--hairline); display: flex; flex-direction: column; /* landscape-notch safe area: pad the LEFT (wordmark + nav + account row) past a left-edge cutout, and top/bottom past the island / home indicator — the mobile drawer (≤860, position:fixed left:0 top:0) inherits this so its brand clears the notch too. Right stays the interior --s4 edge (never against a cutout). All max()'d so non-notched → the original var(--s5)/var(--s4). */ padding: max(var(--s5), var(--sa-top)) var(--s4) max(var(--s5), var(--sa-bottom)) max(var(--s4), var(--sa-left)); position: sticky; top: 0; height: 100vh; overflow: hidden; } /* faint breathing accent glow behind the wordmark — ambient, never loud */ .sidebar::before { content: ""; position: absolute; left: -25%; top: -8%; width: 150%; height: 280px; background: radial-gradient(58% 60% at 42% 0%, var(--accent) 0%, transparent 70%); opacity: .05; filter: blur(22px); pointer-events: none; z-index: 0; } .sidebar > * { position: relative; z-index: 1; } @media (prefers-reduced-motion: no-preference) { .sidebar::before { animation: tb-breathe 14s ease-in-out infinite; } } @keyframes tb-breathe { 0%,100% { opacity: .045; transform: translateY(0); } 50% { opacity: .10; transform: translateY(10px); } } /* functional emoji that gently "breathes" (Sledované meta row) — subtle scale/opacity, never loud. Display-inline-block so the transform applies to the emoji glyph. */ .breathe { display: inline-block; transform-origin: 50% 60%; } @media (prefers-reduced-motion: no-preference) { .breathe { animation: vs-breathe 4.5s ease-in-out infinite; } } @keyframes vs-breathe { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.12); opacity: 1; } } /* date + party meta items (Sledované watch-meta) sit on a subtle rounded pill — mirrors the DS alerts.html .watch-meta .chip (surface-2 / r-pill). Inline-flex so the breathing emoji + text share one pill. */ .meta-pill { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-2); border-radius: var(--r-pill); padding: 5px 11px; } .brand { display: flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 600; letter-spacing: -.3px; color: var(--text); padding: 8px 10px 18px; } .brand .glyph { width: 26px; height: 26px; border-radius: 7px; flex: none; background: url("/assets/logo/voyscout-favicon.svg") center / 100% 100% no-repeat; color: transparent; font-size: 0; } .nav { display: flex; flex-direction: column; gap: 2px; } .nav-label { padding: 14px 10px 6px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--r-md); color: var(--text-2); font-size: 14px; font-weight: 500; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .nav-item .ni-ico { width: 18px; text-align: center; opacity: .85; font-size: 15px; display: inline-block; transition: transform var(--dur-fast) var(--ease); } .nav-item .ni-badge { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-3); background: var(--surface-2); border-radius: var(--r-pill); padding: 1px 8px; } /* amber "needs a fresh scan" dot on the Letenky nav item — same cue as the glowing Skenovat-teď button, shown only when the active profile's party differs from the 2A+2C scan (flightsMismatch). */ .nav-item .ni-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: middle; background: var(--notice); box-shadow: 0 0 0 3px var(--notice-fill); } .nav-item:hover { background: var(--surface); color: var(--text); } .nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .nav-item.active .ni-ico { opacity: 1; } .sidebar-foot { margin-top: auto; padding-top: var(--s4); } .account { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-md); cursor: pointer; border: 1px solid var(--hairline); } .account:hover { background: var(--surface); } .avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--surface-2); color: var(--text-2); display: grid; place-items: center; font-size: 13px; font-weight: 600; } .account .acc-email { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account .acc-sub { font-size: 11px; color: var(--text-3); } .account .chev { margin-left: auto; color: var(--text-4); } /* ── 5. Topbar ────────────────────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; gap: var(--s4); /* iOS standalone-PWA safe area. With apple-mobile-web-app-status-bar-style=black-translucent + viewport-fit=cover (ui.js ), web content extends under the status bar / Dynamic Island. Add the TOP inset ON TOP of the 60px bar (height bumped by the same var(--sa-top)) so the blurred bar background fills the notch region edge-to-edge while the row — hamburger, crumb, centered profile picker, CS/theme toggles — sits below it and stays tappable. Under box-sizing:border-box the padding+height cancel, keeping the usable content height at 60px. var(--sa-top) resolves to 0 on desktop / non-notched devices → zero visual change there. padding-right is max()'d with the right inset for landscape-notch phones. Mirrors the .tabbar bottom-inset idiom (§30). Sticky top:0 still pins the bar (now taller) flush to the viewport top, so it stays covering the status-bar region on scroll — no detach, no gap. */ padding: var(--sa-top) max(var(--s8), var(--sa-right)) 0 var(--s8); height: calc(60px + var(--sa-top)); border-bottom: 1px solid var(--hairline); position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } .topbar .crumb { font-size: 15px; font-weight: 600; color: var(--text); } .topbar .crumb .sep { color: var(--text-4); font-weight: 400; margin: 0 8px; } .topbar .spacer { flex: 1; } .topbar-actions { display: flex; align-items: center; gap: var(--s3); } /* lang + theme toggle group. Lives in the topbar on desktop/landscape (>860px); on phones (≤860) it is hidden here and re-shown in the sidebar/drawer footer (.sidebar-toggles) so the narrow bar keeps only [☰ · crumb · profile pill] (Option-B declutter). */ .topbar-toggles { display: inline-flex; align-items: center; gap: var(--s3); } .sidebar-toggles { display: none; } .hamburger { display: none; background: none; border: 0; color: var(--text-2); cursor: pointer; font-size: 20px; padding: 4px; } .helplink { color: var(--text-2); font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: var(--r-md); } .helplink:hover { background: var(--surface); color: var(--text); opacity: 1; } /* search */ .search { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid transparent; border-radius: var(--r-md); padding: 7px 12px; min-width: 220px; color: var(--text-3); } .search:focus-within { border-color: var(--accent); background: var(--bg-elevated); box-shadow: var(--focus); } .search input { border: 0; background: none; outline: none; font: inherit; color: var(--text); width: 100%; } .search .kbd { font-size: 11px; color: var(--text-4); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; } /* ── 6. Theme toggle (segmented, tiny) ────────────────────────────────────── */ .seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface); border-radius: var(--r-pill); } .seg button { border: 0; cursor: pointer; background: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--text-3); padding: 6px 14px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 6px; transition: color var(--dur-fast) var(--ease); } .seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--bg-elevated); color: var(--text); box-shadow: var(--shadow-seg); } .seg.icononly button { padding: 6px 10px; } /* ── 6b. Profile switch — global active-profile picker (topbar, right) ───────── Switch the active profile from anywhere, no trip to Account settings. Shows the current profile + a dropdown of the rest; picking one switches instantly. */ .pp { position: relative; } .pp-trigger { display: inline-flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 5px 10px 5px 6px; cursor: pointer; font: inherit; color: var(--text); max-width: 230px; } .pp-trigger:hover { background: var(--surface-2); } .pp-trigger .pp-flag { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 14px; background: var(--accent-soft); } .pp-trigger .pp-cur { min-width: 0; text-align: left; line-height: 1.25; } .pp-trigger .pp-cur b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pp-trigger .pp-cur small { font-size: 10.5px; color: var(--text-3); letter-spacing: .2px; } .pp-trigger .pp-caret { color: var(--text-4); font-size: 12px; margin-left: 2px; flex: none; } .pp-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 320px; max-width: calc(100vw - 32px); background: var(--bg-elevated); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 7px; opacity: 0; transform: translateY(-4px) scale(.99); transform-origin: top right; pointer-events: none; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .pp.is-open .pp-menu { opacity: 1; transform: none; pointer-events: auto; } .pp.is-open .pp-caret { color: var(--text-2); } .pp-menu-head { display: flex; align-items: baseline; justify-content: space-between; padding: 7px 9px 9px; gap: 8px; } .pp-menu-head .ppm-title { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--text-3); } .pp-menu-head .ppm-tier { font-size: 11px; color: var(--text-4); font-variant-numeric: tabular-nums; } .pp-item { display: flex; align-items: center; gap: 11px; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; padding: 9px 9px; border-radius: var(--r-md); font: inherit; color: var(--text); } .pp-item:hover { background: var(--surface); } .pp-item .pp-flag { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 15px; background: var(--surface-2); } .pp-item.is-active .pp-flag { background: var(--accent-soft); } .pp-item .pp-body { min-width: 0; flex: 1; } .pp-item .pp-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 7px; } .pp-item .pp-meta { font-size: 12px; color: var(--text-3); margin-top: 1px; font-variant-numeric: tabular-nums; } .pp-item .pp-check { flex: none; color: var(--buy); font-size: 15px; opacity: 0; } .pp-item.is-active .pp-check { opacity: 1; } .pp-item.is-active .pp-name { color: var(--accent); } .pp-badge-active { font-size: 10px; font-weight: 600; letter-spacing: .3px; color: var(--buy); background: var(--buy-fill); border-radius: var(--r-pill); padding: 1px 7px; } .pp-hint { font-size: 11.5px; color: var(--text-4); padding: 4px 10px 9px; line-height: 1.45; } .pp-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; border-top: 1px solid var(--hairline); padding: 8px 6px 4px; } .pp-foot a { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text-2); padding: 8px 9px; border-radius: var(--r-md); } .pp-foot a:hover { background: var(--surface); color: var(--text); } .pp-foot a .ppf-ico { color: var(--text-4); } /* each .pp-item is its own POST form so the switch works without JS — keep the wrapper transparent */ .pp-form { margin: 0; display: block; } /* ── 7. Buttons ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .btn:active { transform: scale(.98); } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { filter: brightness(.94); } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background: var(--surface-2); } .btn-ghost { background: none; color: var(--accent); padding: 8px 10px; } .btn-ghost:hover { background: var(--accent-soft); } .btn-sm { padding: 7px 13px; font-size: 13px; } .btn-lg { padding: 13px 22px; font-size: 15px; } .btn-full { width: 100%; } .btn:disabled { opacity: .4; cursor: default; } /* ── 8. Inputs / forms ────────────────────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: 7px; } .field > label { font-size: 13px; font-weight: 600; color: var(--text); } .field .hint { font-size: 12px; color: var(--text-3); } .input, select.input { width: 100%; font: inherit; font-size: 15px; color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: 11px 13px; outline: none; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .input::placeholder { color: var(--text-4); } .input:focus { border-color: var(--accent); box-shadow: var(--focus); } .input.invalid { border-color: var(--alert); } /* required fields glow red ONLY while EMPTY (invalid) — a filled required field looks normal, not alarming. Focus still wins (accent) so typing is calm. */ .input:required:invalid { border-color: var(--alert); box-shadow: 0 0 0 2px color-mix(in srgb, var(--alert) 18%, transparent); } .input:required:invalid:focus { border-color: var(--accent); box-shadow: var(--focus); } select.input { appearance: none; -webkit-appearance: none; background-image: none; cursor: pointer; } .select-wrap { position: relative; } .select-wrap::after { content: "⌄"; position: absolute; right: 13px; top: 46%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; } /* ── 9. Cards & generic surfaces ──────────────────────────────────────────── */ .card { background: var(--surface); border-radius: var(--r-xl); padding: var(--s7); } .card.raised { background: var(--bg-elevated); border: 1px solid var(--hairline); box-shadow: var(--shadow-raise); } .panel { background: var(--bg-elevated); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: 22px 24px; } .divider { height: 1px; background: var(--hairline); border: 0; margin: var(--s5) 0; } /* ── 10. Page header (title + actions) ────────────────────────────────────── */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); } .page-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -.8px; } .page-head .lede { font-size: 16px; color: var(--text-2); margin-top: 6px; max-width: 52ch; } /* ── 11. Segmented control (profile switch) ───────────────────────────────── */ .profile-seg { /* alias of .seg for larger control */ } .seg.lg button { font-size: 14px; padding: 8px 16px; } /* ── 12. Filter bar ───────────────────────────────────────────────────────── */ .filters { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: var(--s5) 0; } .chip-select { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid transparent; border-radius: var(--r-pill); padding: 7px 14px; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; } .chip-select:hover { background: var(--surface-2); } .chip-select .cs-label { color: var(--text-3); } .chip-select .cs-caret { color: var(--text-4); margin-left: 2px; } /* ── 13. Deal list / cards ────────────────────────────────────────────────── */ .deal-list { display: flex; flex-direction: column; gap: var(--s4); } .deal { background: var(--surface); border-radius: var(--r-xl); padding: var(--s6) var(--s7); border: 1px solid transparent; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: var(--s5); align-items: start; transition: background var(--dur-fast) var(--ease); } .deal:hover { background: var(--surface-2); } .deal.is-emergency { background: var(--alert-fill); } .deal .rank { width: 30px; height: 30px; border-radius: 50%; margin-top: 2px; background: var(--surface-2); color: var(--text); display: grid; place-items: center; font-size: 13px; font-weight: 600; } .deal.is-emergency .rank { background: var(--alert); color: #fff; } .deal-body { min-width: 0; } .deal-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .deal-title { font-size: 21px; font-weight: 700; letter-spacing: -.4px; color: var(--text); } .deal-place { font-size: 14px; color: var(--text-2); margin-top: 3px; } .deal-place b { color: var(--text); font-weight: 600; } .deal-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; } .deal-aside { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 150px; } .price-big { font-size: 28px; font-weight: 700; letter-spacing: -1px; color: var(--text); white-space: nowrap; } .price-base { font-size: 13px; color: var(--text-3); white-space: nowrap; } .price-base s { color: var(--text-4); } .deal-aside .btn { margin-top: 4px; } /* meta chips */ .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--text-2); background: var(--bg-elevated); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 4px 11px; white-space: nowrap; } .deal.is-emergency .chip { background: color-mix(in srgb, var(--bg-elevated) 70%, transparent); } /* verdict pill */ .verdict { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; letter-spacing: .3px; border-radius: var(--r-pill); padding: 5px 12px; white-space: nowrap; } .verdict .dot { width: 8px; height: 8px; border-radius: 50%; } .verdict.buy { background: var(--buy-fill); color: var(--buy); } .verdict.buy .dot { background: var(--buy); } .verdict.wait { background: var(--wait-fill); color: var(--wait); } .verdict.wait .dot { background: var(--wait); } .verdict.watch { background: var(--watch-fill); color: var(--watch); } .verdict.watch .dot { background: var(--watch); } /* re-scan NOTICE — its OWN semantic, NOT the verdict --wait token (which is muted brown #9a6700 on the cream light surface = no contrast). Yellow lives in the stripe/icon/border; the body text stays warm-dark for AA on the fill. On dark it keeps the bright-yellow glow. Source: Voyscout Design System (.notice). */ .notice { display: flex; align-items: flex-start; gap: 11px; padding: 13px 16px; background: var(--notice-fill); border: 1px solid var(--notice-border); border-left: 3px solid var(--notice); border-radius: var(--r-md); color: var(--notice-text); font-size: 13.5px; line-height: 1.5; max-width: 640px; } .notice .notice-ico { flex: none; color: var(--notice); font-size: 15px; line-height: 1.4; } .notice .notice-body { min-width: 0; } .notice b, .notice strong { color: var(--notice-text); font-weight: 700; } .notice a { color: var(--notice); font-weight: 600; text-decoration: none; } .notice a:hover { text-decoration: underline; } .notice .notice-actions { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* inline "?" chip in the notice body, revealing a one-line detail on hover/focus — amber OUTLINE (legible on both themes; a filled chip would swallow its glyph against the dark bright-yellow). */ .pax-mismatch-q { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; font-size: 11px; font-weight: 700; cursor: help; position: relative; border: 1px solid var(--notice); color: var(--notice); background: transparent; } .pax-mismatch-q[data-tip]:hover::after, .pax-mismatch-q[data-tip]:focus::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: normal; width: max-content; max-width: 280px; z-index: 50; background: var(--surface-2, #222); color: var(--text, #fff); border: 1px solid var(--border, #444); border-radius: var(--r-sm); padding: 7px 10px; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0; box-shadow: 0 6px 22px rgba(0,0,0,.28); } /* attention CTA — the re-scan button wears an amber RING (notice accent), not a solid fill. Replaces the old pulsing scan-glow; same DS notice tokens, so it reads correctly on both themes. */ .btn.btn-attention { background: var(--notice-fill); color: var(--notice-text); border-color: var(--notice); } .btn.btn-attention:hover { background: color-mix(in srgb, var(--notice) 18%, var(--notice-fill)); } .btn.btn-attention .lead { color: var(--notice); } /* quota / count pill that needs attention (e.g. scans 3/10) */ .quota-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--notice-text); background: var(--notice-fill); border: 1px solid var(--notice-border); border-radius: var(--r-pill); padding: 4px 11px; font-variant-numeric: tabular-nums; } .quota-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--notice); } .emergency-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; letter-spacing: .3px; color: var(--alert); background: color-mix(in srgb, var(--alert) 14%, transparent); border-radius: var(--r-pill); padding: 4px 10px; } /* ── 14. Deal table (the alternative row presentation) ────────────────────── */ .deal-table { width: 100%; border-collapse: collapse; font-size: 14px; } .deal-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--text-3); padding: 0 14px 12px; border-bottom: 1px solid var(--hairline); } .deal-table th.r, .deal-table td.r { text-align: right; } .deal-table td { padding: 14px; border-bottom: 1px solid var(--hairline); vertical-align: middle; } .deal-table tr:last-child td { border-bottom: 0; } .deal-table tbody tr { transition: background var(--dur-fast) var(--ease); } .deal-table tbody tr:hover { background: var(--surface); } .deal-table .t-dest { font-weight: 600; color: var(--text); } .deal-table .t-sub { color: var(--text-3); font-size: 12.5px; } .deal-table .t-price { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } /* ── 15. Stat row (UPPERCASE label + big value) ───────────────────────────── */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: var(--s2); } .stat { padding: var(--s4) var(--s5); } .stat .stat-label { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-3); } .stat .stat-value { font-size: 26px; font-weight: 700; letter-spacing: -.6px; margin-top: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; } .stat .stat-sub { font-size: 12.5px; color: var(--text-3); margin-top: 4px; } /* ── 16. Right-rail explainer (the resend pattern) ────────────────────────── */ .rail { position: sticky; top: 84px; display: flex; flex-direction: column; gap: var(--s4); } .explainer { background: var(--surface); border-radius: var(--r-xl); padding: var(--s6); } .explainer.raised { background: var(--bg-elevated); border: 1px solid var(--hairline); } .explainer h3 { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; } .explainer p { font-size: 13px; line-height: 1.6; color: var(--text-2); margin-bottom: 12px; } .explainer p:last-child { margin-bottom: 0; } .explainer b { color: var(--text); font-weight: 600; } .explainer .formula { font-family: var(--mono); font-size: 12px; color: var(--text); background: var(--bg-elevated); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 8px 10px; display: block; margin-bottom: 12px; } .explainer.raised .formula { background: var(--surface); } .exp-verdict { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 12px; } .exp-verdict .verdict { flex: none; } .exp-verdict span { font-size: 12.5px; color: var(--text-2); line-height: 1.5; } .exp-foot { font-size: 12px; color: var(--text-3); line-height: 1.6; padding: 0 2px; } .dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13px; } .dl dt { font-weight: 600; color: var(--text); } .dl dd { margin: 0; color: var(--text-2); } /* ── 17. Sparkline ────────────────────────────────────────────────────────── */ .spark { display: block; width: 100%; height: 56px; } .spark .line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; } .spark .area { fill: var(--accent-soft); } .spark .pt { fill: var(--accent); } .spark .now { fill: var(--buy); } /* sparkline hover: vertical guide + focus dot + price/date tooltip (nearest sample) — ported from DS-6 deal-detail.html */ .spark .sp-guide { stroke: var(--text-4); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; vector-effect: non-scaling-stroke; } .spark .sp-focus { fill: var(--accent); stroke: var(--surface); stroke-width: 2; opacity: 0; } .spark.is-hover .sp-guide, .spark.is-hover .sp-focus { opacity: 1; } .sp-tip { position: absolute; pointer-events: none; z-index: 5; opacity: 0; transform: translate(-50%, -100%); transition: opacity var(--dur-fast) var(--ease); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-raise); padding: 7px 11px; white-space: nowrap; text-align: center; } .sp-tip.show { opacity: 1; } .sp-tip .sp-tip-price { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.2px; } .sp-tip .sp-tip-date { font-size: 11px; font-weight: 500; color: var(--text-3); margin-top: 2px; } /* ── 17b. „Další termíny v okně" — per-row horizontal bar chart (flight detail + Letenky, DS-7 §7) ─── */ /* date + price-proportional bar + price + →; bar length grows with price (cheapest = shortest, 54% floor); cheapest tinted green with the ✓ tag inside; hover → price + Δ-vs-cheapest tooltip (app.client.txt). */ .terms { position: relative; } .term-row { display: grid; grid-template-columns: 104px 1fr auto 16px; align-items: center; gap: 16px; padding: 13px 8px; border-radius: var(--r-md); text-decoration: none; color: inherit; transition: background var(--dur-fast) var(--ease); } .term-row + .term-row { box-shadow: 0 -1px 0 var(--hairline); } .term-row:hover { background: var(--surface-2); } .term-date { font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; } /* origin chip under the date in a flight strip row (flag + IATA; hover title = "odlet z ") */ .term-origin { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--text-3); letter-spacing: .01em; white-space: nowrap; cursor: default; } .term-track { position: relative; height: 28px; background: var(--surface-2); border-radius: var(--r-sm); overflow: hidden; } .term-row:hover .term-track { background: var(--surface); } .term-fill { height: 100%; border-radius: var(--r-sm); background: var(--accent); display: flex; align-items: center; padding: 0 11px; transition: filter var(--dur-fast) var(--ease); } .term-fill.cheapest { background: var(--buy); } /* the user's preferred (or nearest-available) departure day — ringed so it reads even on a cheapest bar */ .term-fill.pref { box-shadow: inset 0 0 0 2px var(--accent); } .term-fill.cheapest.pref { box-shadow: inset 0 0 0 2px var(--accent); } .term-row:hover .term-fill { filter: brightness(1.06); } .term-tag { font-size: 11px; font-weight: 600; letter-spacing: .2px; white-space: nowrap; color: #04130a; } .term-price { font-size: 14px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .term-price.cheapest { color: var(--buy); } .term-go { color: var(--text-4); font-size: 15px; text-align: right; transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .term-row:hover .term-go { color: var(--text-2); transform: translateX(2px); } .term-tip { position: absolute; pointer-events: none; z-index: 5; opacity: 0; transform: translate(-50%, -100%); transition: opacity var(--dur-fast) var(--ease); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-raise); padding: 8px 12px; white-space: nowrap; text-align: center; } .term-tip.show { opacity: 1; } .term-tip .tt-price { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.2px; } .term-tip .tt-delta { font-size: 11px; font-weight: 500; margin-top: 2px; } .term-tip .tt-delta.cheapest { color: var(--buy); } .term-tip .tt-delta.more { color: var(--text-3); } @media (max-width: 720px) { .term-row { grid-template-columns: 80px 1fr auto; gap: 12px; } .term-go { display: none; } } a.ss-row:hover .ss-go { color: var(--accent); } .ss-tag { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; vertical-align: middle; } .ss-tag.low { background: var(--buy-fill); color: var(--buy); } .ss-tag.hero { background: var(--accent-soft); color: var(--accent); } /* ── 18. Breakdown bars ───────────────────────────────────────────────────── */ .breakdown { display: flex; flex-direction: column; gap: 12px; } .bd-row { display: grid; grid-template-columns: 178px 1fr auto; gap: 12px; align-items: center; font-size: 13px; } /* min-width:0 lets the label shrink to its 178px track (grid items default to min-content = the full nowrap string, which overflowed a long label like "Doprava na letiště Praha (PRG)" straight over the bar). The text now WRAPS inside the track — the chip (.bd-ico flex:none) never shrinks, the bar stays put. overflow-wrap guards a hypothetical unbreakable token. */ .bd-row .bd-label { display: flex; align-items: center; gap: 10px; color: var(--text-2); min-width: 0; overflow-wrap: anywhere; } /* category chip — tint + glyph share the row's bar-fill hue via currentColor (same pattern as .emergency-badge); colours are 1:1 with .bd-fill.* below so the chip and the bar always speak the same colour. */ .bd-ico { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--text-3); background: color-mix(in srgb, currentColor 15%, transparent); } .bd-ico svg { width: 15px; height: 15px; display: block; } .bd-ico.catalog { color: var(--accent); } .bd-ico.transport { color: #5e5ce6; } .bd-ico.food { color: #ff9f0a; } .bd-ico.bags { color: var(--text-3); } /* subtle neutral track so the proportional COLOURED fill is what reads (a prominent track looked like a full bar → "all the same"); min-width keeps a small segment visible without faking its proportion. */ .bd-track { height: 8px; background: rgba(128,128,128,0.16); border-radius: var(--r-pill); overflow: hidden; } /* display:block is load-bearing: width/height are IGNORED on inline spans, so without it the coloured fill rendered 0px and only the grey track showed (persona finding 2026-07-10). */ .bd-fill { display: block; height: 100%; min-width: 3px; border-radius: var(--r-pill); background: var(--accent); } .bd-fill.catalog { background: var(--accent); } .bd-fill.transport { background: #5e5ce6; } .bd-fill.food { background: #ff9f0a; } .bd-fill.bags { background: var(--text-3); } .bd-row .bd-val { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; } /* total row: no chip — indent the label by 36px (26 chip + 10 gap) so "Reálně celkem" lines up with the item TEXT */ .bd-row.bd-total .bd-label { padding-left: 36px; } /* zero-cost line (e.g. transfer already in the price) reads muted: dim the chip + soften the amount, still documented */ .bd-row.is-zero .bd-ico { opacity: .55; } .bd-row.is-zero .bd-val { color: var(--text-3); font-weight: 500; } /* narrow viewport: a 178px label column starves the bar (it collapsed to a sliver on phones), so stack — the label takes its own full-width line ABOVE the bar+amount. The bar then spans the row. */ @media (max-width: 560px) { .bd-row { grid-template-columns: 1fr auto; row-gap: 5px; } .bd-row .bd-label { grid-column: 1 / -1; } .bd-row.bd-total .bd-label { padding-left: 0; } } /* ── 19. States: empty / loading / error ──────────────────────────────────── */ .state { text-align: center; padding: var(--s8) var(--s6); max-width: 420px; margin: 40px auto; } .state .state-ico { font-size: 40px; margin-bottom: 14px; } .state h2 { font-size: 19px; font-weight: 600; margin-bottom: 8px; } .state p { font-size: 14px; color: var(--text-2); line-height: 1.6; margin-bottom: 18px; } /* out-of-window package offers shown on the date-filtered empty state */ .offwin-list { list-style: none; padding: 0; margin: 12px 0 0; text-align: left; } .offwin-list li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--hairline); font-size: 13px; } .offwin-list .ow-title { font-weight: 600; } .offwin-list .ow-date { color: var(--text-2); } .offwin-list .ow-price { margin-left: auto; color: var(--text-2); } .skeleton { background: var(--skeleton); background-size: 400% 100%; border-radius: var(--r-sm); animation: shimmer 1.4s infinite linear; } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .skel-deal { background: var(--surface); border-radius: var(--r-xl); padding: var(--s6) var(--s7); display: grid; grid-template-columns: 34px 1fr auto; gap: var(--s5); align-items: center; } .skel-line { height: 12px; } .banner-error { display: flex; align-items: flex-start; gap: 12px; background: var(--alert-fill); border-radius: var(--r-lg); padding: 14px 16px; font-size: 13.5px; color: var(--text); } .banner-error .be-ico { color: var(--alert); font-size: 16px; } .banner-error b { color: var(--alert); } /* ── 20. Pagination ───────────────────────────────────────────────────────── */ .pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: var(--s7); } .pager a, .pager span { min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; color: var(--text-2); } .pager a:hover { background: var(--surface); color: var(--text); opacity: 1; } .pager .current { background: var(--accent); color: #fff; } .pager .gap { color: var(--text-4); } /* ── 21. Modal ────────────────────────────────────────────────────────────── */ .modal-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.4); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; } [data-theme="dark"] .modal-scrim { background: rgba(0,0,0,.6); } .modal { background: var(--bg-elevated); border: 1px solid var(--hairline); border-radius: var(--r-xl); box-shadow: var(--shadow-pop); width: 100%; max-width: 440px; padding: var(--s7); } .modal h2 { font-size: 20px; font-weight: 700; letter-spacing: -.4px; margin-bottom: 8px; } .modal p { font-size: 14px; color: var(--text-2); line-height: 1.6; margin-bottom: 20px; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; } /* ── 22. Auth / centered layout ───────────────────────────────────────────── */ .auth { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 24px; } .auth-card { width: 100%; max-width: 360px; text-align: center; } .auth .brand { flex-direction: column; gap: 16px; padding: 0 0 8px; font-size: 30px; letter-spacing: -.5px; } .auth .brand .glyph { width: 66px; height: 66px; border-radius: 16px; } .auth .auth-tag { font-size: 14px; color: var(--text-3); margin-bottom: 28px; } .auth form { display: flex; flex-direction: column; gap: 12px; text-align: left; } .auth .auth-note { font-size: 13px; color: var(--text-3); text-align: center; margin-top: 2px; } /* ── 23. Travel ambient background (login) ───────────────────────────────────── Heavily-blurred drifting glow + flowing dotted flight routes + pulsing "found" blips. Ambient only — sits behind content, low opacity, slow. Reduced-motion freezes it to a calm still. */ .travel-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .tb-blob { position: absolute; border-radius: 50%; filter: blur(64px); will-change: transform; } .tb-blob.b1 { width: 46vmax; height: 46vmax; left: -10vmax; top: -14vmax; opacity: .36; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); } .tb-blob.b2 { width: 40vmax; height: 40vmax; right: -12vmax; top: 18vmax; opacity: .24; background: radial-gradient(circle, #1f8a5b 0%, transparent 70%); } .tb-blob.b3 { width: 38vmax; height: 38vmax; left: 22vmax; bottom: -16vmax; opacity: .22; background: radial-gradient(circle, #5e5ce6 0%, transparent 70%); } .tb-arcs { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(.5px); } .tb-arc { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 2 16; opacity: .28; vector-effect: non-scaling-stroke; } .tb-blip { fill: var(--accent); opacity: .5; transform-box: fill-box; transform-origin: center; } .tb-blip.g { fill: #1f8a5b; } :root[data-theme="dark"] .tb-arc, :root[data-theme="system"] .tb-arc { opacity: .34; } :root[data-theme="dark"] .tb-blob.b1 { opacity: .5; } :root[data-theme="dark"] .tb-blob.b2 { opacity: .34; } :root[data-theme="dark"] .tb-blob.b3 { opacity: .3; } @media (prefers-color-scheme: dark) { :root[data-theme="system"] .tb-blob.b1 { opacity: .5; } :root[data-theme="system"] .tb-blob.b2 { opacity: .34; } :root[data-theme="system"] .tb-blob.b3 { opacity: .3; } } @media (prefers-reduced-motion: no-preference) { .tb-blob.b1 { animation: tb-drift1 34s ease-in-out infinite; } .tb-blob.b2 { animation: tb-drift2 44s ease-in-out infinite; } .tb-blob.b3 { animation: tb-drift3 52s ease-in-out infinite; } .tb-arc { animation: tb-flow linear infinite; } .tb-arc.a1 { animation-duration: 9s; } .tb-arc.a2 { animation-duration: 13s; animation-direction: reverse; } .tb-arc.a3 { animation-duration: 16s; } .tb-blip { animation: tb-pulse 3.4s ease-in-out infinite; } .tb-blip.d { animation-delay: 1.1s; } .tb-blip.e { animation-delay: 2.2s; } } @keyframes tb-drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vmax,4vmax) scale(1.12); } } @keyframes tb-drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5vmax,5vmax) scale(1.1); } } @keyframes tb-drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(4vmax,-5vmax) scale(1.08); } } @keyframes tb-flow { to { stroke-dashoffset: -180; } } @keyframes tb-pulse { 0%,100% { transform: scale(.6); opacity: .25; } 50% { transform: scale(1.5); opacity: .7; } } /* contained + soft variant — for embedding ambient inside a panel (e.g. empty state) */ .travel-bg.contained { position: absolute; border-radius: inherit; } .travel-bg.soft .tb-blob { filter: blur(46px); } .travel-bg.soft .tb-blob.b1 { opacity: .16; } .travel-bg.soft .tb-blob.b2 { opacity: .12; } .travel-bg.soft .tb-blob.b3 { opacity: .10; } .travel-bg.soft .tb-arc { opacity: .18; } .travel-bg.soft .tb-blip { opacity: .35; } :root[data-theme="dark"] .travel-bg.soft .tb-blob.b1 { opacity: .26; } :root[data-theme="dark"] .travel-bg.soft .tb-arc { opacity: .24; } @media (prefers-color-scheme: dark) { :root[data-theme="system"] .travel-bg.soft .tb-blob.b1 { opacity: .26; } :root[data-theme="system"] .travel-bg.soft .tb-arc { opacity: .24; } } /* ── 24. Settings tabs + usage rings (adapted from resend.com Usage) ───────── */ .tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 28px; } .tab { padding: 8px 15px; border-radius: var(--r-md); font-size: 14px; font-weight: 500; color: var(--text-2); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .tab:hover { background: var(--surface); color: var(--text); opacity: 1; } .tab.active { background: var(--surface-2); color: var(--text); font-weight: 600; } .usage-section { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 48px; padding: 34px 0; } .usage-section + .usage-section { border-top: 1px solid var(--hairline); } .usage-section h2 { font-size: 21px; font-weight: 700; letter-spacing: -.4px; } .usage-section .us-desc { font-size: 14px; color: var(--text-2); margin-top: 8px; line-height: 1.5; max-width: 32ch; } .usage-section .us-cta { margin-top: 18px; display: flex; gap: 10px; align-items: center; } .us-free { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; } .usage-row { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--hairline); } .usage-row:last-child { border-bottom: 0; } .usage-row .ur-label { font-size: 14px; color: var(--text); } .usage-row .ur-val { margin-left: auto; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .usage-row .ur-caret { color: var(--text-4); margin-left: 4px; } .ring { width: 18px; height: 18px; flex: none; } .ring circle { fill: none; stroke-width: 3; } .ring .track { stroke: var(--surface-2); } .ring .meter { stroke: var(--accent); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 10px 10px; } .ring.full .meter { stroke: var(--buy); } .ring.warn .meter { stroke: var(--wait); } @media (max-width: 760px) { .usage-section { grid-template-columns: 1fr; gap: 20px; } } /* On-demand scan quota ring on the Letenky board: green <25% / yellow >=25% / red >=75% (used/limit). Scoped to .scan-quota so the settings/usage rings keep their own blue/yellow/green palette. */ .scan-quota { display: inline-flex; align-items: center; gap: 6px; } .scan-quota .sq-label { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; } .scan-quota .ring .meter { stroke: var(--buy); } .scan-quota .ring.warn .meter { stroke: var(--wait); } .scan-quota .ring.full .meter { stroke: var(--alert); } /* DS-5 indeterminate "scan in progress" — fixed arc, whole ring spins (overrides the used/limit meter so an in-flight scan reads as motion, not a stuck gauge). Reduced-motion → gentle opacity pulse. */ .ring.scanning .track { stroke: var(--surface-2); } .ring.scanning .meter { stroke: var(--accent); stroke-dasharray: 14 36.3 !important; } @media (prefers-reduced-motion: no-preference) { .ring.scanning { animation: vs-ringspin .85s linear infinite; transform-origin: 50% 50%; } } @media (prefers-reduced-motion: reduce) { .ring.scanning .meter { animation: vs-ringpulse 1.6s ease-in-out infinite; } } @keyframes vs-ringspin { to { transform: rotate(360deg); } } @keyframes vs-ringpulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } } /* /account "Limity" overview — two big ring gauges (scans X/Y · profiles X/Y). Same track/meter palette as the small scan-quota ring (green <25% / yellow >=25% / red >=75%), scaled up with the value inside. */ .lim-grid { display: flex; gap: 28px; flex-wrap: wrap; } .lim-gauge { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 110px; } .ring.gauge { width: 88px; height: 88px; } .ring.gauge circle { stroke-width: 6; } /* the -90° meter rotate must pivot around THIS gauge's center (40,40), not the small ring's 10,10 inherited from `.ring .meter` — otherwise the arc is displaced into a broken partial sliver. */ .ring.gauge .meter { stroke: var(--buy); transform-origin: 40px 40px; } .ring.gauge.warn .meter { stroke: var(--wait); } .ring.gauge.full .meter { stroke: var(--alert); } .ring.gauge .gauge-val { fill: var(--text); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; transform: none; /* keep the label upright (the -90° rotate is meter-only via the circle rule above) */ } .lim-label { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--text); } .lim-sub { font-size: 11.5px; margin-top: 2px; } /* ── 25. Logo lockup helper ───────────────────────────────────────────────── */ .wordmark { height: 26px; display: inline-block; vertical-align: middle; color: var(--text); } /* ── 26. Motion: compass settle on load + nav-icon liveliness ──────────────── */ .brand .glyph svg { display: block; width: 100%; height: 100%; } .brand .glyph .vs-needle { transform-box: view-box; transform-origin: 16px 16px; } @media (prefers-reduced-motion: no-preference) { /* compass needle settles like a real compass when the page loads */ .brand .glyph .vs-needle { animation: vs-compass 1.25s cubic-bezier(.34,1.4,.64,1) both; } /* replay on hover of the wordmark */ .brand:hover .glyph .vs-needle { animation: vs-compass 1.1s cubic-bezier(.34,1.4,.64,1); } /* nav icons spring to life on hover */ .ni-ico.i-compass { transform-origin: 50% 50%; } .ni-ico.i-plane { transform-origin: 50% 50%; } .ni-ico.i-bell { transform-origin: 50% 12%; } .ni-ico.i-beach { transform-origin: 50% 88%; } .ni-ico.i-gear { transform-origin: 50% 50%; } /* compass settles like a real compass when its page is active (load) + re-settles on hover — reuses the shared vs-compass keyframe (same motion as the brand-glyph needle) */ .nav-item.active .i-compass { animation: vs-compass 1.1s cubic-bezier(.34,1.4,.64,1) both; } .nav-item:hover .i-compass { animation: vs-compass 1s cubic-bezier(.34,1.4,.64,1); } .nav-item:hover .i-plane { animation: vs-plane .6s var(--ease); } .nav-item:hover .i-bell { animation: vs-bell .65s var(--ease); } .nav-item:hover .i-beach { animation: vs-beach .7s var(--ease); } .nav-item:hover .i-gear { animation: vs-gear .6s var(--ease); } .nav-item:hover .i-help { transform: translateX(3px); } } @keyframes vs-compass { 0% { transform: rotate(-17deg); } 35% { transform: rotate(11deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } 100% { transform: rotate(0deg); } } @keyframes vs-plane { 0% { transform: translate(0,0) rotate(0); } 45% { transform: translate(3px,-3px) rotate(10deg); } 100% { transform: translate(0,0) rotate(0); } } @keyframes vs-bell { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-15deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(4deg); } } @keyframes vs-beach { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-11deg); } 65% { transform: rotate(9deg); } } @keyframes vs-gear { from { transform: rotate(0); } to { transform: rotate(90deg); } } @media (max-width: 1100px) { .content-wrap { grid-template-columns: minmax(0,1fr); } .rail { position: static; flex-direction: row; flex-wrap: wrap; } .rail .explainer { flex: 1 1 280px; } /* user-sim MUST #1 (2026-07-15, Franta/mobil): on the profile FORM pages the "V dosahu z…" airport-reach preview lives in the rail, which stacks AFTER the form on a narrow viewport — so it landed BELOW the submit and an impatient user hit "Dokončit" before ever seeing the reach tuning. Hoist the reach rail ABOVE the form (order:-1) so it's visible before the submit. Scoped by :has(#reach-preview) so ONLY the account/onboard reach rail reorders — a plain rail (e.g. /alerts) is untouched. Desktop (>1100) keeps the sticky right rail. */ .content-wrap:has(#reach-preview) .rail { order: -1; } } @media (max-width: 860px) { .app { grid-template-columns: 1fr; } .sidebar { position: fixed; z-index: 50; left: 0; top: 0; width: 280px; transform: translateX(-100%); transition: transform var(--dur) var(--ease); box-shadow: var(--shadow-pop); } body.nav-open .sidebar { transform: translateX(0); } body.nav-open::after { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.4); } .hamburger { display: inline-flex; } /* keep the safe-area top inset (base .topbar) — only the horizontal padding tightens on phones; each side is max()'d with the landscape-notch inset so a rotated iPhone clears the cutout, and the installed PWA under the Dynamic Island keeps its top inset (portrait) here too */ .topbar { padding: var(--sa-top) max(var(--s5), var(--sa-right)) 0 max(var(--s5), var(--sa-left)); } /* Option-B mobile declutter: the narrow bar keeps ONLY [☰ · crumb · compact profile pill]. Relocate lang+theme into the drawer footer; drop the redundant Nápověda link (it's in the drawer nav) and the pill's "aktivní profil" sub-caption (redundant with the overview's active-profile banner). Cap the pill so a long profile name ellipsizes instead of pushing the row wide. */ .topbar-toggles { display: none; } .topbar .helplink { display: none; } .sidebar-toggles { display: flex; align-items: center; gap: var(--s3); margin-top: 12px; flex-wrap: wrap; } .pp-trigger { max-width: 190px; } .pp-trigger .pp-cur small { display: none; } .content-wrap { padding: var(--s5); gap: var(--s5); } .search { display: none; } .deal { grid-template-columns: 30px minmax(0,1fr); } .deal-aside { grid-column: 1 / -1; text-align: left; align-items: flex-start; flex-direction: row; justify-content: space-between; width: 100%; flex-wrap: wrap; } .page-head h1 { font-size: 26px; } } /* ── cookie-consent bar (full-mode only; injected by the Worker) ────────────────────────────── */ .consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70; display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; justify-content: space-between; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 14px 18px; max-width: 880px; margin: 0 auto; } .consent-text { font-size: 13px; color: var(--text-2); line-height: 1.5; flex: 1 1 320px; } .consent-actions { display: flex; gap: 10px; } @media (max-width: 480px) { .rail .explainer { flex-basis: 100%; } .deal-table .hide-sm { display: none; } /* .topbar .helplink is already hidden at ≤860 (Option-B declutter, above) */ } /* ── 27. Overview dashboard ─────────────────────────────────────────────────── FIX: the active-profile badge used to float inline against the lede and collide with it. It's now its own full-width banner row below the intro. */ .ov-head { margin-bottom: 24px; } .ov-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -.8px; } .ov-head .lede { font-size: 16px; color: var(--text-2); margin-top: 8px; max-width: 56ch; line-height: 1.5; } .profile-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 30px; padding: 13px 16px; border-radius: var(--r-lg); background: var(--buy-fill); border: 1px solid color-mix(in srgb, var(--buy) 28%, transparent); } .profile-banner .pb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--buy); flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--buy) 18%, transparent); } .profile-banner .pb-text { font-size: 14px; font-weight: 600; color: var(--buy); } .profile-banner .pb-text b { color: var(--text); } .profile-banner .pb-action { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--accent); } .ov-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; } .ov-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: 22px 24px; position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 220px; } .ov-card .ovc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; position: relative; z-index: 1; } .ov-card .ovc-eyebrow { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); font-weight: 600; } .ov-card .ovc-link { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--accent); } .ov-card.full { grid-column: 1 / -1; min-height: 0; } .ov-card ul { position: relative; z-index: 1; } /* mini ambient "scanning" empty state inside a card — map motif + WHY text */ .ov-empty { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 18px 8px; } .ov-empty h3 { font-size: 15px; font-weight: 600; color: var(--text); } .ov-empty p { font-size: 13px; color: var(--text-2); line-height: 1.55; max-width: 34ch; } @media (max-width: 760px) { .ov-grid { grid-template-columns: 1fr; } } /* ── 28. Admin · Analytics ──────────────────────────────────────────────────── FIX: "Prokliky podle dne" used to render as one solid blue block. It's now a real per-day bar chart (one rounded bar per day, gaps, baseline, peak accent). */ .metric-strip { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xl); overflow: hidden; } .metric { padding: 18px 22px; border-right: 1px solid var(--hairline); } .metric:last-child { border-right: 0; } .metric .m-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); font-weight: 600; line-height: 1.3; } .metric .m-val { font-size: 30px; font-weight: 700; letter-spacing: -.5px; margin-top: 12px; font-variant-numeric: tabular-nums; color: var(--text); } .metric .m-sub { font-size: 12px; color: var(--text-3); margin-top: 6px; line-height: 1.4; } @media (max-width: 900px) { .metric-strip { grid-template-columns: repeat(2, 1fr); } .metric:nth-child(2n){border-right:0;} } .panel-h { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); font-weight: 600; margin-bottom: 18px; } .panel-sub { font-size: 12px; color: var(--text-4); font-weight: 500; } .barchart { display: flex; align-items: flex-end; gap: 4px; height: 180px; padding-top: 8px; border-bottom: 1px solid var(--hairline); } .barchart .bar { flex: 1; min-width: 0; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 4px; opacity: .55; transition: opacity var(--dur-fast) var(--ease); } .barchart .bar:hover { opacity: 1; } .barchart .bar.peak { opacity: 1; } .barchart-axis { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; color: var(--text-4); font-variant-numeric: tabular-nums; } /* bar chart hover number (Apple-style "count · day" label above the bar) — ported from DS-6 analytics.html */ .barchart .bar { cursor: default; } .bc-tip { position: absolute; pointer-events: none; z-index: 5; opacity: 0; transform: translate(-50%, -100%); transition: opacity var(--dur-fast) var(--ease); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-raise); padding: 6px 10px; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .bc-tip.show { opacity: 1; } .bc-tip .bc-tip-sub { font-size: 11px; font-weight: 500; color: var(--text-3); margin-left: 6px; } /* ── Line chart (up to 3 toggleable series) — ported from DS-6 analytics.html ─── */ .linechart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: 16px; flex-wrap: wrap; } .linechart-legend { display: flex; flex-wrap: wrap; gap: var(--s2); } .lc-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-2); padding: 5px 11px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid transparent; transition: color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); user-select: none; } .lc-toggle .lc-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--lc-color); } .lc-toggle[aria-pressed="true"] { color: var(--text); } .lc-toggle[aria-pressed="false"] { opacity: .45; } .lc-toggle[aria-pressed="false"] .lc-swatch { background: var(--text-4); } .linechart { display: block; width: 100%; height: 220px; overflow: visible; } .linechart .lc-grid { stroke: var(--hairline); stroke-width: 1; vector-effect: non-scaling-stroke; } .linechart .lc-area { opacity: .10; transition: opacity var(--dur) var(--ease); } .linechart .lc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: opacity var(--dur) var(--ease); } .linechart .lc-dot { transition: opacity var(--dur) var(--ease); } .linechart .lc-series.off .lc-line, .linechart .lc-series.off .lc-area, .linechart .lc-series.off .lc-dot { opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .linechart .lc-line { stroke-dasharray: var(--lc-len); stroke-dashoffset: var(--lc-len); animation: vs-draw 1.1s var(--ease) forwards; } } @keyframes vs-draw { to { stroke-dashoffset: 0; } } .lc-wrap { position: relative; } .lc-ticks { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; color: var(--text-4); font-variant-numeric: tabular-nums; } /* hover guide + focus dots + tooltip */ .linechart .lc-guide { stroke: var(--text-4); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; vector-effect: non-scaling-stroke; } .linechart .lc-focus { opacity: 0; } .linechart .lc-focus circle { stroke: var(--bg-elevated); stroke-width: 2; } .linechart.is-hover .lc-guide, .linechart.is-hover .lc-focus { opacity: 1; } .lc-tip { position: absolute; pointer-events: none; z-index: 5; opacity: 0; transform: translate(-50%, -100%); transition: opacity var(--dur-fast) var(--ease); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-raise); padding: 9px 12px; min-width: 124px; } .lc-tip.show { opacity: 1; } .lc-tip .lc-tip-date { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 7px; } .lc-tip .lc-tip-row { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.5; } .lc-tip .lc-tip-row .lc-swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; } .lc-tip .lc-tip-row .lc-tip-name { color: var(--text-2); } .lc-tip .lc-tip-row .lc-tip-val { margin-left: auto; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .lc-tip .lc-tip-row.off { display: none; } .dtable { width: 100%; border-collapse: collapse; } .dtable th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); text-align: left; font-weight: 600; padding-bottom: 6px; } .dtable th.num, .dtable td.num { text-align: right; font-variant-numeric: tabular-nums; } .dtable td { padding: 12px 0; border-top: 1px solid var(--hairline); font-size: 14px; color: var(--text); } .dtable td.num { font-weight: 600; } .dtable .mono { font-family: var(--font-mono); font-size: 13px; color: var(--text-2); } /* admin "Zdraví systému" signal dots — green ok / amber warn (same --notice cue as the nav ni-dot) / grey n/a (subsystem never enabled, e.g. no invia_feed rows yet). */ .hs-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 5px; background: var(--c-green); } .hs-dot.warn { background: var(--notice); box-shadow: 0 0 0 3px var(--notice-fill); } .hs-dot.na { background: var(--text-3); } .hs-dot.bad { background: var(--c-red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-red) 22%, transparent); } .kpi-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .kpi-pair .kp .kp-val { font-size: 28px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; } .kpi-pair .kp .kp-label { font-size: 12px; color: var(--text-3); margin-top: 4px; } .analytics-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; } @media (max-width: 900px) { .analytics-grid { grid-template-columns: 1fr; } } /* Live airport-reach preview (Account "Odkud létáš") — Resend-style: which airports a drive radius unlocks, lit up live. Tokens only; from Voyscout Design System (ui_kits/web/ucet.html). */ .live-preview { position: relative; } .lp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .lp-head h3 { margin-bottom: 0; } .lp-count { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; } .lp-count b { color: var(--buy); font-weight: 700; } .lp-sub { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin-bottom: 10px; } .lp-sub b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } /* the exclude instruction sits AT the clickable list (not in the far-away form group) + doubles as the "these rows are interactive" cue — a quiet accent-soft chip, present on every breakpoint. */ .lp-hint { font-size: 11.5px; color: var(--text-3); line-height: 1.45; margin: 0 0 12px; padding: 7px 9px; background: var(--accent-soft); border-radius: var(--r-sm, 8px); } .reach-list { display: flex; flex-direction: column; } /* non-home rows are