:root{ /* Background */ --bg-root:#0E1116; --bg-surface:#141A22; --bg-surface-2:#1A2230; /* Text */ --text-primary:#E6EAF0; --text-secondary:#9AA4B2; --text-muted:#6B7280; /* Lines */ --border-subtle:rgba(255,255,255,0.04); --border-default:rgba(255,255,255,0.08); /* Accent */ --accent:#C6A96A; --accent-hover:#D8BE84; --accent-muted:rgba(198,169,106,0.18); /* Status */ --positive:#2FBF8F; --negative:#E5533D; --neutral:#4F7EFF; /* Radius / Shadow */ --r-card:12px; --shadow-soft:0 8px 24px rgba(0,0,0,0.25); /* Layout */ --maxw:1240px; --pad:96px; /* desktop side padding */ } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background: radial-gradient(900px 500px at 25% 15%, rgba(198,169,106,0.06), transparent 60%), radial-gradient(700px 420px at 80% 20%, rgba(255,255,255,0.04), transparent 55%), var(--bg-root); color:var(--text-primary); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; letter-spacing:0.01em; } a{color:inherit; text-decoration:none} .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); } /* Header */ header{ position:sticky; top:0; z-index:10; backdrop-filter: blur(10px); background: rgba(14,17,22,0.65); border-bottom:1px solid var(--border-subtle); } .nav{ height:96px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .brand{ display:flex; align-items:center; gap:14px; min-width:180px; } .mark{ width:38px;height:38px; display:grid;place-items:center; border:1px solid var(--border-subtle); border-radius:10px; background: rgba(255,255,255,0.02); box-shadow: var(--shadow-soft); } .mark span{ font-family: "Playfair Display", serif; font-weight:600; font-size:18px; color:var(--accent); letter-spacing:0.02em; } .brand-name{ display:flex; flex-direction:column; line-height:1.05; } .brand-name b{ font-weight:600; letter-spacing:0.06em; } .brand-name small{ color:var(--text-muted); letter-spacing:0.08em; text-transform:uppercase; font-size:11px; margin-top:4px; } nav ul{ list-style:none; display:flex; gap:26px; padding:0;margin:0; align-items:center; } nav a{ color:var(--text-secondary); font-weight:500; font-size:14px; letter-spacing:0.08em; text-transform:uppercase; padding:10px 0; border-bottom:1px solid transparent; } nav a:hover{ color:var(--text-primary); border-bottom-color: rgba(198,169,106,0.35); } .menu-pill{ display:inline-flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border-subtle); border-radius:12px; background: rgba(255,255,255,0.02); color:var(--text-secondary); } .menu-pill:hover{ border-color: rgba(198,169,106,0.25); color:var(--text-primary); } .hamb{width:18px;height:12px; position:relative; display:inline-block} .hamb:before,.hamb:after,.hamb i{ content:""; position:absolute; left:0; right:0; height:1px; background: rgba(230,234,240,0.55); } .hamb:before{top:0} .hamb i{top:5.5px} .hamb:after{bottom:0} /* Hero */ .hero{ padding:84px 0 56px; border-bottom:1px solid var(--border-subtle); } .hero-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; } .kicker{ color:var(--text-muted); text-transform:uppercase; letter-spacing:0.22em; font-size:12px; } h1{ margin:0; font-family:"Playfair Display", serif; font-weight:600; letter-spacing:-0.01em; font-size: clamp(36px, 4vw, 56px); } .lead{ max-width:680px; color:var(--text-secondary); font-size:18px; line-height:1.65; margin:0; } .lead{ max-width:760px; } .signature{ margin-top:6px; font-family: "Playfair Display", serif; font-style: italic; font-weight:500; color: rgba(230,234,240,0.85); letter-spacing:0.02em; } .sig-line{ display:inline-block; position:relative; padding:8px 6px 2px; } .sig-line:after{ content:""; position:absolute; left:0; right:-18px; bottom:0; height:1px; background: linear-gradient(90deg, rgba(198,169,106,0.0), rgba(198,169,106,0.6), rgba(198,169,106,0.0)); opacity:0.8; } /* Sections */ section{ padding:54px 0; border-bottom:1px solid var(--border-subtle); } .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:20px; } .section-title{ margin:0; font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:var(--text-muted); } .section-rule{ flex:1; height:1px; background: var(--border-subtle); margin-left:18px; transform: translateY(-6px); } /* Grid */ .grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; } .grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap:18px; } /* Card */ .card{ background: rgba(20,26,34,0.92); border:1px solid var(--border-subtle); border-radius: var(--r-card); box-shadow: var(--shadow-soft); padding:22px 22px 18px; position:relative; overflow:hidden; } .card:before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background: rgba(198,169,106,0.18); } .card h3{ margin:0 0 10px; font-family:"Playfair Display", serif; font-weight:600; letter-spacing:-0.005em; font-size:22px; } .card p{ margin:0 0 16px; color:var(--text-secondary); line-height:1.65; font-size:14px; } .card .meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; border-top:1px solid var(--border-subtle); color:var(--text-muted); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; } .link{ color:var(--accent); border-bottom:1px solid rgba(198,169,106,0.3); padding-bottom:2px; } .link:hover{border-bottom-color: var(--accent); color: var(--accent-hover)} /* Callout */ .callout{ background: rgba(255,255,255,0.02); border:1px solid var(--border-subtle); border-left:2px solid var(--accent); border-radius: 12px; padding:18px 18px 16px; } .callout .label{ color:var(--text-muted); text-transform:uppercase; letter-spacing:0.22em; font-size:11px; margin-bottom:10px; } .callout .text{ color:var(--text-primary); line-height:1.65; font-size:15px; margin:0; } /* Stat cards */ .stat{ padding:22px; } .stat .k{ color:var(--text-muted); text-transform:uppercase; letter-spacing:0.22em; font-size:11px; margin-bottom:14px; } .stat .v{ font-family:"Playfair Display", serif; font-weight:600; font-size:34px; letter-spacing:-0.01em; color:var(--accent); margin:0 0 10px; } .stat .d{ margin:0; color:var(--text-secondary); font-size:13px; line-height:1.5; } .delta{ display:inline-block; margin-top:10px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--positive); } .delta.pos{color:var(--positive)} .delta.neg{color:var(--negative)} .delta.neu{color:var(--neutral)} /* ===== About page additions (rozšíření CSS) ===== */ /* Hero side "project snapshot" */ .snapshot{ padding:18px 18px 16px; border:1px solid var(--border-subtle); border-radius:12px; background: rgba(255,255,255,0.02); } .snapshot .k{ color:var(--text-muted); text-transform:uppercase; letter-spacing:0.22em; font-size:11px; margin-bottom:12px; } .snapshot .row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--border-subtle); } .snapshot .row:first-of-type{border-top:0} .snapshot .label{ color:var(--text-secondary); font-size:13px; } .snapshot .value{ color:var(--text-primary); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap; } /* Quote block (editorial) */ .quote{ padding:22px; border-radius:12px; border:1px solid var(--border-subtle); background: linear-gradient(0deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02)), radial-gradient(420px 200px at 25% 40%, rgba(198,169,106,0.10), transparent 60%), rgba(20,26,34,0.92); box-shadow: var(--shadow-soft); position:relative; overflow:hidden; } .quote p{ margin:0; font-family:"Playfair Display", serif; font-size:24px; line-height:1.35; letter-spacing:-0.01em; color: rgba(230,234,240,0.92); } .quote .by{ margin-top:14px; color:var(--text-muted); font-size:12px; letter-spacing:0.22em; text-transform:uppercase; } /* Principles cards */ .principle .tag{ display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px; } /* Timeline */ .timeline{ border:1px solid var(--border-subtle); border-radius:12px; overflow:hidden; background: rgba(255,255,255,0.02); } .t-item{ display:grid; grid-template-columns: 160px 1fr; gap:18px; padding:18px 22px; border-top:1px solid var(--border-subtle); } .t-item:first-child{border-top:0} .t-date{ color:var(--text-muted); text-transform:uppercase; letter-spacing:0.22em; font-size:11px; } .t-body h3{ margin:0 0 8px; font-family:"Playfair Display", serif; font-weight:600; font-size:20px; letter-spacing:-0.005em; } .t-body p{ margin:0; color:var(--text-secondary); line-height:1.65; font-size:14px; } /* FAQ */ details{ border:1px solid var(--border-subtle); border-radius:12px; background: rgba(255,255,255,0.02); padding:14px 16px; } details + details{margin-top:12px} summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:14px; color:var(--text-primary); font-weight:600; letter-spacing:0.02em; } summary::-webkit-details-marker{display:none} .chev{ width:10px;height:10px; border-right:1px solid rgba(230,234,240,0.6); border-bottom:1px solid rgba(230,234,240,0.6); transform: rotate(45deg); margin-left:auto; transition: transform .15s ease; opacity:0.8; } details[open] .chev{transform: rotate(225deg)} details p{ margin:12px 0 0; color:var(--text-secondary); line-height:1.65; font-size:14px; max-width:780px; } /* ===== Team / Values / Partners additions ===== */ .split{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:start;} /* Team cards */ .team-card{ display:flex; gap:16px; align-items:flex-start;} .avatar{ width:44px;height:44px; border-radius:14px; border:1px solid var(--border-subtle); background: radial-gradient(24px 24px at 30% 30%, rgba(198,169,106,0.22), transparent 60%), rgba(255,255,255,0.02); box-shadow: var(--shadow-soft); flex:0 0 auto;} .person{ flex:1;} .person .name{ font-family:"Playfair Display", serif; font-weight:600; font-size:20px; letter-spacing:-0.005em; margin:0 0 4px;} .person .role{ color:var(--text-muted); font-size:12px; letter-spacing:0.18em; text-transform:uppercase; margin:0 0 10px;} .person .bio{ color:var(--text-secondary); font-size:14px; line-height:1.65; margin:0;} /* Values list (editorial bullets) */ .values{ margin:0; padding:0; list-style:none; display:grid; gap:12px;} .value-item{ padding:14px 16px; border:1px solid var(--border-subtle); border-radius:12px; background: rgba(255,255,255,0.02);} .value-item .k{ color:var(--text-primary); font-weight:600; letter-spacing:0.02em; margin:0 0 6px;} .value-item .d{ margin:0; color:var(--text-secondary); font-size:14px; line-height:1.65;} /* Partners grid */ .partners{ display:grid; grid-template-columns: repeat(4, 1fr); gap:12px;} .partner{ display:flex; align-items:center; justify-content:center; min-height:64px; border-radius:12px; border:1px solid var(--border-subtle); background: rgba(255,255,255,0.02); color: rgba(230,234,240,0.75); font-size:12px; letter-spacing:0.18em; text-transform:uppercase;} .partner:hover{ border-color: rgba(198,169,106,0.25); color: rgba(230,234,240,0.92);} .article-layout{ display:grid; grid-template-columns: 1.2fr 0.8fr; gap:18px; align-items:start; } /* Article body typography */ .prose{ max-width: 740px; } .prose p{ color:var(--text-secondary); font-size:17px; line-height:1.7; margin:0 0 18px; } .prose h2{ margin:34px 0 14px; font-family:"Playfair Display", serif; font-weight:600; letter-spacing:-0.005em; font-size:28px; line-height:1.2; } .prose h3{ margin:26px 0 12px; font-family:"Playfair Display", serif; font-weight:600; letter-spacing:-0.005em; font-size:22px; line-height:1.25; } .prose ul{ margin:0 0 18px; padding:0; list-style:none; display:grid; gap:10px; } .prose li{ color:var(--text-secondary); font-size:16px; line-height:1.65; padding-left:18px; position:relative; } .prose li:before{ content:"—"; position:absolute; left:0; color: rgba(198,169,106,0.65); } /* Blockquote */ blockquote{ margin:26px 0; padding:18px 18px 16px; border-radius:12px; border:1px solid var(--border-subtle); border-left:2px solid var(--accent); background: rgba(255,255,255,0.02); } blockquote p{ margin:0; font-family:"Playfair Display", serif; color: rgba(230,234,240,0.92); font-size:20px; line-height:1.4; } /* Callout */ .callout{ margin:22px 0; padding:18px 18px 16px; border-radius:12px; border:1px solid var(--border-subtle); border-left:2px solid var(--accent); background: rgba(255,255,255,0.02); } .callout .label{ color:var(--text-muted); text-transform:uppercase; letter-spacing:0.22em; font-size:11px; margin-bottom:10px; } .callout p{ margin:0; color:var(--text-primary); line-height:1.65; font-size:15px; } /* Sidebar */ .sidebar{ display:grid; gap:18px; } .side-item .k{ color:var(--text-muted); text-transform:uppercase; letter-spacing:0.22em; font-size:11px; margin-bottom:12px; } .side-item .v{ color:var(--text-secondary); font-size:14px; line-height:1.65; } .toc a{ display:block; padding:10px 0; border-top:1px solid var(--border-subtle); color:var(--text-secondary); font-size:13px; letter-spacing:0.06em; } .toc a:first-child{border-top:0} .toc a:hover{color:var(--text-primary)} .hr{ height:1px; background: var(--border-subtle); margin:14px 0 0; } /* Footer */ footer{ padding:56px 0 40px; text-align:center; } .footer-quote{ color:var(--text-secondary); max-width:740px; margin:0 auto 18px; font-size:16px; line-height:1.7; } .footer-sig{ display:inline-block; margin:0 auto 12px; font-family:"Playfair Display", serif; font-style:italic; color: rgba(230,234,240,0.8); letter-spacing:0.02em; padding:6px 10px 2px; border-bottom:1px solid rgba(198,169,106,0.25); } .copyright{ color:var(--text-muted); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; } /* Contact layout */ .contact-grid{ display:grid; grid-template-columns: 1.3fr 0.7fr; gap:18px; align-items:start; } /* Form */ .form{ display:grid; gap:14px; margin-top:8px; } .row{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; } label{ display:block; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px; } input, textarea{ width:100%; border-radius:12px; border:1px solid var(--border-subtle); background: rgba(255,255,255,0.02); color:var(--text-primary); padding:12px 12px; outline:none; font: inherit; letter-spacing:0.01em; } textarea{min-height:140px; resize:vertical} input:focus, textarea:focus{ border-color: rgba(198,169,106,0.30); box-shadow: 0 0 0 1px rgba(198,169,106,0.35); } .hint{ color:var(--text-muted); font-size:12px; line-height:1.5; margin-top:8px; } /* Button (quiet) */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 20px; border-radius:12px; border:1px solid rgba(198,169,106,0.55); background: transparent; color: var(--accent); letter-spacing:0.14em; text-transform:uppercase; font-size:12px; cursor:pointer; } .btn:hover{ border-color: rgba(198,169,106,0.85); color: var(--accent-hover); } /* Contact details blocks */ .meta-list{ display:grid; gap:14px; } .meta-item{ padding:16px 16px 14px; border:1px solid var(--border-subtle); border-radius:12px; background: rgba(255,255,255,0.02); } .meta-item .k{ color:var(--text-muted); text-transform:uppercase; letter-spacing:0.22em; font-size:11px; margin-bottom:10px; } .meta-item .v{ color:var(--text-primary); font-size:14px; line-height:1.6; } /* Map placeholder (optional) */ .map{ margin-top:14px; height:180px; border-radius:12px; border:1px solid var(--border-subtle); background: linear-gradient(0deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02)), radial-gradient(400px 160px at 40% 50%, rgba(198,169,106,0.10), transparent 60%), rgba(20,26,34,0.92); position:relative; overflow:hidden; } .map:after{ content:"Map / Location"; position:absolute; left:16px; bottom:14px; color: rgba(230,234,240,0.55); font-size:12px; letter-spacing:0.18em; text-transform:uppercase; } /* ===== Stats page additions (rozšíření CSS) ===== */ /* Filters bar */ .filters{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border:1px solid var(--border-subtle); border-radius:12px; background: rgba(255,255,255,0.02); } .filters .left, .filters .right{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .pill{ display:inline-flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--border-subtle); background: rgba(20,26,34,0.60); color:var(--text-secondary); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; } .pill strong{ color:var(--text-primary); font-weight:600; letter-spacing:0.10em; } .select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; border-radius:12px; border:1px solid var(--border-subtle); background: rgba(255,255,255,0.02); color:var(--text-primary); padding:10px 36px 10px 12px; font: inherit; font-size:13px; line-height:1; outline:none; background-image: linear-gradient(45deg, transparent 50%, rgba(230,234,240,0.55) 50%), linear-gradient(135deg, rgba(230,234,240,0.55) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; } .select:focus{ border-color: rgba(198,169,106,0.30); box-shadow: 0 0 0 1px rgba(198,169,106,0.35); } .search{ border-radius:12px; border:1px solid var(--border-subtle); background: rgba(255,255,255,0.02); color:var(--text-primary); padding:10px 12px; outline:none; font: inherit; font-size:13px; min-width: 240px; } .search:focus{ border-color: rgba(198,169,106,0.30); box-shadow: 0 0 0 1px rgba(198,169,106,0.35); } /* Table */ .table-card{ padding:0; } .table-head{ padding:18px 22px 16px; display:flex; align-items:flex-end; justify-content:space-between; gap:14px; border-bottom:1px solid var(--border-subtle); } .table-head .title{ font-family:"Playfair Display", serif; font-weight:600; font-size:22px; margin:0; } .table-head .sub{ color:var(--text-muted); font-size:12px; letter-spacing:0.18em; text-transform:uppercase; margin-top:6px; } table{ width:100%; border-collapse:collapse; } th, td{ text-align:left; padding:14px 22px; border-bottom:1px solid var(--border-subtle); font-size:14px; } th{ color:var(--text-muted); font-size:12px; letter-spacing:0.18em; text-transform:uppercase; font-weight:600; } tr:hover td{ background: rgba(255,255,255,0.02); } .num{ font-variant-numeric: tabular-nums; } .badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid var(--border-subtle); background: rgba(255,255,255,0.02); color:var(--text-secondary); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap; } .dot{ width:6px;height:6px;border-radius:999px; background: rgba(230,234,240,0.45); } .dot.pos{background: var(--positive)} .dot.neg{background: var(--negative)} .dot.neu{background: var(--neutral)} /* Responsive */ @media (max-width: 1100px){ :root{ --pad:48px; } } @media (max-width: 900px){ .split{grid-template-columns: 1fr;} .partners{grid-template-columns: repeat(2, 1fr);} } @media (max-width: 860px){ :root{ --pad:22px; } nav ul{display:none;} .grid-3{grid-template-columns: 1fr;} .grid-2{grid-template-columns: 1fr;} .hero{padding:64px 0 42px;} .section-head{flex-direction:column; align-items:flex-start} .section-rule{width:100%; margin-left:0; transform:none} .contact-grid{grid-template-columns: 1fr;} .row{grid-template-columns: 1fr;} .hero-grid{grid-template-columns: 1fr;} .t-item{grid-template-columns: 1fr;} } /* okna */ #lastywin, #lastywin2, #lastywinbg, #kalendar{display:none;}