/* ============================================================ VYBRÁNO — design systém v2 (profesionální dark editorial) Fonty: Sora (display) + Inter (text) — načítány v ============================================================ */ :root{ --bg:#070b16; --bg-soft:#0b1122; --card:#0e1630; --card-2:#111a38; --line:rgba(148,163,210,.13); --line-strong:rgba(148,163,210,.26); --text:#eef2fc; --muted:#96a2c5; --brand:#7c93ff; --brand-2:#a78bfa; --accent:#2dd9a8; --grad:linear-gradient(92deg,var(--brand),var(--brand-2)); --radius:18px; --maxw:1180px; --font-d:'Sora','Segoe UI',system-ui,sans-serif; --font-b:'Inter','Segoe UI',system-ui,sans-serif; --shadow-lg:0 24px 60px rgba(2,6,18,.55); --glow:0 12px 40px rgba(124,147,255,.28); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:var(--font-b); background: radial-gradient(1100px 520px at 85% -8%, rgba(124,147,255,.14) 0%, transparent 60%), radial-gradient(900px 460px at -10% 30%, rgba(167,139,250,.10) 0%, transparent 55%), var(--bg); color:var(--text); line-height:1.65; -webkit-font-smoothing:antialiased; } /* jemná značková linka přes celý web */ body::before{content:"";position:fixed;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--accent));z-index:120} .container{max-width:var(--maxw);margin:0 auto;padding:0 24px} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--font-d);line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em} img,svg{max-width:100%} ::selection{background:rgba(124,147,255,.35)} :focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px} /* ===== Hlavička ===== */ .site-header{position:sticky;top:0;z-index:100;backdrop-filter:blur(14px);background:rgba(7,11,22,.72);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;height:70px} .logo{font-family:var(--font-d);font-weight:800;font-size:1.45rem;letter-spacing:-.5px} .logo span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .menu{display:flex;align-items:center;gap:6px} .menu a{color:var(--muted);font-weight:600;font-size:.95rem;padding:9px 14px;border-radius:10px;transition:.18s} .menu a:hover{color:var(--text);background:rgba(148,163,210,.08)} .menu a.nav-cta{background:var(--grad);color:#fff;font-weight:700;padding:10px 18px;margin-left:8px;box-shadow:var(--glow)} .menu a.nav-cta:hover{transform:translateY(-1px);background:var(--grad);color:#fff} /* ===== Hero ===== */ .hero{position:relative;padding:96px 0 84px;overflow:hidden} .hero::before{content:"";position:absolute;inset:0; background-image:radial-gradient(rgba(150,162,197,.16) 1px,transparent 1px); background-size:26px 26px; -webkit-mask-image:radial-gradient(75% 65% at 50% 30%,#000 25%,transparent 78%); mask-image:radial-gradient(75% 65% at 50% 30%,#000 25%,transparent 78%); pointer-events:none} .hero .container{position:relative} .hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center} .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:700;letter-spacing:2.2px;text-transform:uppercase;font-size:.74rem;margin:0 0 18px} .eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px} .hero h1{font-size:clamp(2.6rem,5.2vw,4.3rem);font-weight:800;line-height:1.06;letter-spacing:-.025em;margin:0 0 22px;max-width:15ch} .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .lead{color:var(--muted);font-size:1.13rem;max-width:52ch;margin:0 0 30px} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px} .trust{color:var(--muted);font-size:.86rem} .hero-points{list-style:none;display:flex;gap:22px;flex-wrap:wrap;padding:0;margin:0;color:var(--muted);font-size:.92rem;font-weight:500} .hero-points li{display:flex;align-items:center;gap:8px} .hero-points svg{width:17px;height:17px;color:var(--accent);flex:none} /* Hero panel (žebříček) */ .hero-panel{position:relative;min-height:380px} .panel-card{position:relative;background:linear-gradient(160deg,var(--card-2),var(--card));border:1px solid var(--line-strong);border-radius:22px;padding:26px;box-shadow:var(--shadow-lg)} .panel-card.ghost{position:absolute;inset:22px -18px -18px 22px;z-index:-1;opacity:.5;transform:rotate(2.4deg);padding:0;background:var(--card);border-color:var(--line)} .panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px} .panel-head h3{margin:0;font-size:1.18rem} .panel-tag{background:rgba(45,217,168,.14);color:var(--accent);font-size:.7rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;padding:5px 12px;border-radius:30px} .panel-row{display:flex;align-items:center;gap:14px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:rgba(7,11,22,.45);transition:.18s} .panel-row:hover{border-color:var(--line-strong);transform:translateX(3px)} .panel-row .rank{flex:none;width:30px;height:30px;border-radius:9px;background:var(--grad);color:#fff;font-family:var(--font-d);font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center} .panel-row div{flex:1;min-width:0;line-height:1.3} .panel-row strong{display:block;font-size:.96rem} .panel-row span{color:var(--muted);font-size:.8rem} .panel-row svg{width:18px;height:18px;color:var(--accent);flex:none} .panel-link{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;color:var(--brand);font-weight:700;font-size:.94rem} .panel-link svg{width:17px;height:17px;transition:.18s} .panel-link:hover svg{transform:translateX(4px)} /* ===== Tlačítka ===== */ .btn{display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:14px;font-weight:700;font-size:1rem;font-family:var(--font-b);cursor:pointer;border:1px solid transparent;transition:.2s} .btn svg{width:18px;height:18px} .btn-primary{background:var(--grad);color:#fff;box-shadow:var(--glow)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 50px rgba(124,147,255,.4)} .btn-ghost{background:rgba(148,163,210,.05);border-color:var(--line-strong);color:var(--text)} .btn-ghost:hover{border-color:var(--brand);background:rgba(124,147,255,.08)} .btn-sm{padding:11px 18px;font-size:.93rem} .btn small{font-weight:500;opacity:.75;font-size:.78em} /* ===== Sekce ===== */ .section{padding:88px 24px} .section-eyebrow{display:block;text-align:center;color:var(--accent);font-weight:700;font-size:.74rem;letter-spacing:2.4px;text-transform:uppercase;margin-bottom:12px} .section h2{font-size:clamp(1.7rem,3.4vw,2.5rem);text-align:center;letter-spacing:-.02em} .section-sub{color:var(--muted);text-align:center;max-width:62ch;margin:10px auto 48px;font-size:1.04rem} .section-sub a{color:var(--brand)} .narrow{max-width:780px} .narrow p{color:var(--muted)} /* ===== Ikonové chipy (SVG místo emoji) ===== */ .icon-chip{flex:none;width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,rgba(124,147,255,.16),rgba(167,139,250,.14)); border:1px solid rgba(124,147,255,.32);color:var(--brand)} .icon-chip svg{width:25px;height:25px} .chip-lg{width:70px;height:70px;border-radius:20px;margin:0 auto 18px} .chip-lg svg{width:32px;height:32px} /* ===== Kategorie (2×2 premium karty) ===== */ .cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px} .cat-card{position:relative;display:flex;gap:20px;align-items:flex-start;background:linear-gradient(160deg,var(--card-2),var(--card));border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;transition:.22s} .cat-card:hover{transform:translateY(-5px);border-color:rgba(124,147,255,.5);box-shadow:var(--shadow-lg)} .cat-card .cat-num{position:absolute;top:22px;right:24px;font-family:var(--font-d);font-weight:700;font-size:.82rem;letter-spacing:1.5px;color:var(--muted);opacity:.6} .cat-body{flex:1;min-width:0} .cat-card h3{margin:2px 0 8px;font-size:1.3rem} .cat-card p{color:var(--muted);font-size:.97rem;margin:0 0 16px} .cat-card .go{display:inline-flex;align-items:center;gap:8px;color:var(--brand);font-weight:700;font-size:.93rem} .cat-card .go svg{width:16px;height:16px;transition:.18s} .cat-card:hover .go svg{transform:translateX(4px)} .cat-card .soon{position:absolute;top:-11px;left:26px;background:rgba(45,217,168,.95);color:#06281f;font-size:.68rem;font-weight:800;padding:4px 12px;border-radius:20px;text-transform:uppercase;letter-spacing:.8px} /* ===== Metodika ===== */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .stepbox{position:relative;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;transition:.2s} .stepbox:hover{border-color:var(--line-strong);transform:translateY(-3px)} .stepbox .n{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:var(--grad);color:#fff;font-family:var(--font-d);font-weight:700;margin-bottom:14px;box-shadow:var(--glow)} .stepbox h3{font-size:1.07rem;margin:0 0 8px} .stepbox p{color:var(--muted);font-size:.93rem;margin:0} /* ===== Články / karty obsahu ===== */ .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .post{position:relative;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:.22s;display:flex;flex-direction:column} .post:hover{transform:translateY(-5px);border-color:rgba(124,147,255,.5);box-shadow:var(--shadow-lg)} .post-tag{align-self:flex-start;background:rgba(124,147,255,.13);color:var(--brand);font-size:.72rem;font-weight:800;padding:5px 12px;border-radius:20px;text-transform:uppercase;letter-spacing:.6px} .post h3{margin:14px 0 8px;font-size:1.12rem;line-height:1.35} .post p{color:var(--muted);font-size:.94rem;margin:0 0 16px;flex:1} .post-more{color:var(--brand);font-weight:700;font-size:.9rem} .soon-card{opacity:.8} .soon-card .post-tag{background:rgba(45,217,168,.13);color:var(--accent)} /* ===== Žebříček karty (hub AI) ===== */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .card{position:relative;background:linear-gradient(160deg,var(--card-2),var(--card));border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;display:flex;flex-direction:column;transition:.22s} .card:hover{transform:translateY(-4px);border-color:rgba(124,147,255,.45);box-shadow:var(--shadow-lg)} .card-rank{position:absolute;top:-14px;left:22px;background:var(--grad);color:#fff;font-family:var(--font-d);font-weight:700;padding:5px 14px;border-radius:20px;font-size:.88rem;box-shadow:var(--glow)} .card h3{margin-top:10px;font-size:1.18rem} .card-cat{color:var(--accent);font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.8px;margin:0 0 10px} .card p{color:var(--muted);font-size:.95rem} .pros{list-style:none;padding:0;margin:12px 0 20px;color:var(--text)} .pros li{padding:4px 0;font-size:.93rem} .card .btn{margin-top:auto;justify-content:center} .card-review{display:block;text-align:center;margin-top:14px;color:var(--brand);font-weight:700;font-size:.92rem} /* ===== Hub stránky ===== */ .crumbs{font-size:.85rem;color:var(--muted);padding:20px 0 0} .crumbs a{color:var(--brand)} .hub-hero{padding:56px 0 26px;text-align:center} .hub-hero h1{font-size:clamp(2rem,4.6vw,3.1rem);font-weight:800;margin:.25em auto;letter-spacing:-.02em} .hub-hero .lead{margin:0 auto 6px;text-align:center} .badge{display:inline-block;background:rgba(124,147,255,.13);color:var(--brand);font-size:.72rem;font-weight:800;padding:5px 14px;border-radius:20px;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:14px} /* Hodnotové bloky (huby) */ .features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:10px 24px 0} .feature{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;transition:.2s} .feature:hover{border-color:var(--line-strong);transform:translateY(-3px)} .feature .ico{font-size:1.7rem} .feature h3{margin:14px 0 8px;font-size:1.1rem} .feature p{color:var(--muted);font-size:.94rem;margin:0} /* ===== CTA box ===== */ .cta-box{position:relative;background:linear-gradient(135deg,rgba(124,147,255,.13),rgba(167,139,250,.10));border:1px solid var(--line-strong);border-radius:22px;padding:42px 34px;text-align:center;margin:52px 0 8px} .cta-box h3{font-size:1.4rem;margin:0 0 8px} .cta-box p{color:var(--muted);margin:0 0 22px} /* ===== Newsletter ===== */ .newsletter{padding:92px 24px} .nl-card{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:center;background:linear-gradient(135deg,rgba(124,147,255,.13),rgba(167,139,250,.09));border:1px solid var(--line-strong);border-radius:26px;padding:52px} .nl-card h2{font-size:clamp(1.5rem,3vw,2.1rem);text-align:left;margin:0 0 10px;letter-spacing:-.02em} .nl-card>div>p{color:var(--muted);margin:0 0 24px;max-width:50ch} .signup{display:flex;gap:12px;flex-wrap:wrap} .signup input{flex:1;min-width:240px;padding:15px 18px;border-radius:13px;border:1px solid var(--line-strong);background:rgba(7,11,22,.6);color:var(--text);font-size:1rem;font-family:var(--font-b)} .signup input:focus{outline:none;border-color:var(--brand)} .nl-perks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px} .nl-perks li{display:flex;align-items:center;gap:12px;color:var(--text);font-weight:500;font-size:.97rem;background:rgba(7,11,22,.45);border:1px solid var(--line);border-radius:14px;padding:14px 16px} .nl-perks svg{width:19px;height:19px;color:var(--accent);flex:none} .newsletter .trust{margin-top:14px} /* ===== Patička ===== */ .site-footer{border-top:1px solid var(--line);background:rgba(7,11,22,.6);padding:64px 0 0;margin-top:20px} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding-bottom:40px} .footer-grid h4{font-size:.8rem;text-transform:uppercase;letter-spacing:1.6px;color:var(--muted);margin-bottom:14px} .footer-grid a{display:block;color:var(--muted);padding:5px 0;font-size:.95rem;transition:.18s} .footer-grid a:hover{color:var(--brand)} .muted{color:var(--muted)} .disclosure{border-top:1px solid var(--line);padding:22px 24px;font-size:.86rem;color:var(--muted)} .disclosure strong{color:var(--text)} /* ===== Cookie lišta ===== */ .cookiebar{position:fixed;bottom:18px;left:18px;right:18px;max-width:620px;margin:0 auto;background:var(--card-2);border:1px solid var(--line-strong);border-radius:16px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px;box-shadow:var(--shadow-lg);font-size:.9rem;z-index:110} .cookiebar[hidden]{display:none} .cookiebar span{color:var(--muted)} .cookiebar span a{color:var(--brand)} .cb-actions{display:flex;gap:10px;flex-shrink:0} .cb-btn{background:var(--grad);color:#fff;border:none;padding:10px 16px;border-radius:11px;font-weight:700;font-family:var(--font-b);font-size:.85rem;cursor:pointer;white-space:nowrap;transition:.18s} .cb-btn:hover{transform:translateY(-1px)} .cb-ghost{background:transparent;border:1px solid var(--line-strong);color:var(--text)} .cb-ghost:hover{border-color:var(--brand)} @media(max-width:560px){.cookiebar{flex-direction:column;align-items:stretch;text-align:center}.cb-actions{justify-content:center}} /* ===== Responzivita ===== */ @media(max-width:1020px){ .hero-grid{grid-template-columns:1fr;gap:44px} .hero h1{max-width:none} .hero-panel{max-width:480px;margin:0 auto;width:100%} .nl-card{grid-template-columns:1fr;padding:40px 30px} } @media(max-width:860px){ .menu a:not(.nav-cta){display:none} .cat-grid{grid-template-columns:1fr} .steps{grid-template-columns:1fr 1fr} .posts,.cards,.features{grid-template-columns:1fr 1fr} .footer-grid{grid-template-columns:1fr 1fr} .hero{padding:72px 0 60px} } @media(max-width:600px){ .steps,.posts,.cards,.features,.footer-grid{grid-template-columns:1fr} .section{padding:64px 20px} .panel-card.ghost{display:none} } /* ===== Vendor loga na kartách ===== */ .brand-row{display:flex;align-items:center;gap:14px;margin-bottom:10px} .brand-row h2,.brand-row h3{margin:0} .brand-logo{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:#fff;padding:9px;flex:none;box-shadow:0 4px 14px rgba(0,0,0,.28)} .brand-logo img{width:100%;height:100%;object-fit:contain;display:block} .brand-logo svg{width:26px;height:26px;color:#6c8cff} .disclosure-mini{font-size:.78rem;color:var(--muted);opacity:.85} /* ===== Vendor branding: každý prvek dědí barvu svého prodejce ===== */ .vendorcard{--vendor:var(--brand)} .vendorcard::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--vendor);border-top-left-radius:inherit;border-top-right-radius:inherit;z-index:1} .vendorcard:hover{border-color:color-mix(in srgb,var(--vendor) 55%,var(--line))} .vendorcard .card-rank{background:var(--vendor);box-shadow:0 8px 22px color-mix(in srgb,var(--vendor) 45%,transparent);z-index:2} .vendorcard .card-cat{color:var(--vendor)} .vendorcard .brand-logo{box-shadow:0 0 0 2px var(--vendor),0 6px 16px rgba(0,0,0,.30)} .vendorcard .pros li{display:flex;gap:9px;align-items:flex-start} .vendorcard .pros li::before{content:"✔";color:var(--vendor);font-weight:800;flex:none} .vendorcard .btn-primary{background:linear-gradient(135deg,var(--vendor),color-mix(in srgb,var(--vendor) 68%,#0a0a12));box-shadow:0 12px 30px color-mix(in srgb,var(--vendor) 38%,transparent)} .vendorcard .btn-primary:hover{box-shadow:0 16px 42px color-mix(in srgb,var(--vendor) 50%,transparent)} .vendorcard .card-review{color:var(--vendor)} /* sekce nesoucí barvu jednoho prodejce (např. Kurzy pro radost) */ .vendor-scope{--vendor:var(--brand)} .vendor-scope .section-eyebrow{color:var(--vendor)} .vendor-scope .brand-logo{box-shadow:0 0 0 2px var(--vendor),0 6px 16px rgba(0,0,0,.30)} .vendor-scope .btn-primary{background:linear-gradient(135deg,var(--vendor),color-mix(in srgb,var(--vendor) 68%,#0a0a12));box-shadow:0 12px 30px color-mix(in srgb,var(--vendor) 38%,transparent)} .vendor-scope .cat-card:hover{border-color:color-mix(in srgb,var(--vendor) 55%,var(--line))}