/* ========================= Clean "editee-like" landing ========================= */ :root{ --bg: #ffffff; --surface: #ffffff; --muted-surface: #f6f7f9; --text: #0f172a; --muted: #475569; --muted2: #64748b; --border: rgba(15, 23, 42, .10); --primary: #2563eb; --primary-2: #0ea5e9; --ring: rgba(37, 99, 235, .25); --radius: 18px; --shadow: 0 18px 50px rgba(2,6,23,.08); } /* ========================= THEME: Dark (zapneš přidáním class na ) Zapnutí: ========================= */ body.theme-dark{ --bg: #0B1220; --surface: #0F1A2B; --muted-surface: #141F33; --text: #E6ECF5; --muted: #9FB0D1; --muted2: #7F93B8; --border: rgba(230,236,245,.10); --primary: #2F7CF6; /* tmavě modrá */ --primary-2: #38D9A9; /* mint */ --ring: rgba(47,124,246,.28); --shadow: 0 18px 60px rgba(0,0,0,.35); } *{ box-sizing: border-box; } html, body{ height:100%; } body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji"; color: var(--text); background: radial-gradient(900px 700px at 10% 0%, rgba(37,99,235,.10), transparent 55%), radial-gradient(900px 700px at 90% 10%, rgba(14,165,233,.10), transparent 55%), var(--bg); line-height: 1.55; } a{ color: inherit; text-decoration: none; } p{ margin: 0; } ul{ margin:0; padding-left: 18px; } li{ margin: 6px 0; } .container{ width: min(1100px, calc(100% - 40px)); margin: 0 auto; } .header{ position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.80); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } /* Dark: header nesmí být bílý */ body.theme-dark .header{ background: rgba(11,18,32,.75); } .header__inner{ display:flex; align-items:center; justify-content:space-between; gap: 14px; padding: 14px 0; } .brand{ display:flex; align-items:center; gap: 12px; } .logo{ width: 42px; height: 42px; border-radius: 14px; display:grid; place-items:center; font-weight: 900; letter-spacing: .4px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: 0 10px 30px rgba(37,99,235,.18); } .brand__txt{ display:flex; flex-direction:column; line-height:1.1; } .brand__title{ font-weight: 850; font-size: 14px; } .brand__sub{ font-size: 12px; color: var(--muted2); } .nav{ display:flex; align-items:center; gap: 12px; } .nav a{ font-size: 13px; color: var(--muted); padding: 8px 10px; border-radius: 12px; } .nav .btn--primary, .nav .btn--primary:visited, .nav .btn--primary:hover, .nav .btn--primary:active{ color: #ffffff; } .nav a:hover{ background: rgba(15,23,42,.04); } .btn{ display:inline-flex; align-items:center; justify-content:center; gap: 10px; padding: 12px 14px; border-radius: 14px; font-weight: 800; font-size: 14px; border: 1px solid transparent; cursor:pointer; transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; user-select:none; white-space: nowrap; } .btn:active{ transform: translateY(1px); } .btn--primary{ background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #ffffff; box-shadow: 0 18px 50px rgba(37,99,235,.20); } .btn--primary:visited, .btn--primary:hover, .btn--primary:active{ color: #ffffff; } .btn--primary:hover{ filter: brightness(1.03); } .btn--ghost{ background: rgba(15,23,42,.03); border-color: rgba(15,23,42,.08); color: var(--text); } .btn--ghost:hover{ background: rgba(15,23,42,.05); } .badges{ display:flex; flex-wrap:wrap; gap: 10px; } .badge{ font-size: 12px; color: var(--muted); background: rgba(15,23,42,.03); border: 1px solid rgba(15,23,42,.08); padding: 8px 10px; border-radius: 999px; } .hero{ padding: 62px 0 22px; } .hero__grid{ display:grid; grid-template-columns: 1.25fr .75fr; gap: 28px; align-items:start; } .h1{ margin: 14px 0 12px; font-size: clamp(34px, 5vw, 54px); letter-spacing: -0.03em; line-height: 1.05; } .h1 span{ display:block; margin-top: 10px; color: var(--muted); font-weight: 800; font-size: clamp(16px, 2.0vw, 20px); line-height: 1.35; } .lead{ margin: 0; color: var(--muted); font-size: 16px; max-width: 64ch; } .ctaRow{ display:flex; flex-wrap:wrap; gap: 12px; margin-top: 18px; } .meta{ margin-top: 12px; color: var(--muted2); font-size: 13px; } .card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .cardPad{ padding: 18px; } .sideCard h3{ margin: 0; font-size: 14px; color: var(--text); letter-spacing: .01em; } .sideCard p{ margin-top: 10px; color: var(--muted); font-size: 13px; } .mini{ margin-top: 14px; display:grid; gap: 10px; } .miniRow{ display:flex; gap: 10px; align-items:flex-start; padding: 12px; border-radius: 16px; background: rgba(15,23,42,.03); border: 1px solid rgba(15,23,42,.08); } .ico{ width: 34px; height: 34px; border-radius: 12px; display:grid; place-items:center; font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-2)); } .miniRow b{ font-size: 13px; display:block; } .miniRow span{ font-size: 12px; color: var(--muted2); display:block; margin-top: 2px; } .section{ padding: 56px 0; } .sectionHead{ max-width: 820px; margin: 0 auto 26px; text-align: center; } .kicker{ display:inline-block; font-size: 12px; color: var(--muted); background: rgba(15,23,42,.03); border: 1px solid rgba(15,23,42,.08); padding: 8px 12px; border-radius: 999px; } .h2{ margin: 14px 0 10px; font-size: 30px; letter-spacing: -0.02em; } .sub{ margin: 0 auto; color: var(--muted); max-width: 70ch; } .grid{ display:grid; gap: 14px; } .grid--4{ grid-template-columns: repeat(4, 1fr); } .grid--3{ grid-template-columns: repeat(3, 1fr); } .soft{ background: var(--muted-surface); border-top: 1px solid rgba(15,23,42,.06); border-bottom: 1px solid rgba(15,23,42,.06); } .box{ background: rgba(255,255,255,.85); border: 1px solid rgba(15,23,42,.08); border-radius: 16px; padding: 16px; color: var(--muted); box-shadow: 0 10px 30px rgba(2,6,23,.05); } /* Dark: boxy nesmí být bílé + text musí být čitelný */ body.theme-dark .box{ background: rgba(230,236,245,.06); border: 1px solid rgba(230,236,245,.12); color: var(--text); box-shadow: 0 18px 60px rgba(0,0,0,.25); } /* Dark: text uvnitř boxů (listy a malé texty) */ body.theme-dark .box li, body.theme-dark .box ul, body.theme-dark .box span{ color: var(--muted); } .panel{ margin-top: 16px; padding: 18px; border-radius: 20px; background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(14,165,233,.08), rgba(255,255,255,.85)); border: 1px solid rgba(37,99,235,.16); } /* Dark: panel nesmí přecházet do bílé */ body.theme-dark .panel{ background: linear-gradient( 135deg, rgba(47,124,246,.16), rgba(56,217,169,.10), rgba(15,26,43,.92) ); border: 1px solid rgba(230,236,245,.12); } .panel h3{ margin: 0; font-size: 16px; } .panel p{ margin-top: 10px; color: var(--muted); font-size: 14px; } .split{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items:start; } .steps{ display:grid; gap: 12px; } .step { display: flex; align-items: center; /* 🔥 klíčová věc */ gap: 14px; padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); } .stepNum { min-width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 800; background: rgba(47,124,246,.18); border: 1px solid rgba(47,124,246,.30); color: var(--text); } .stepTitle{ font-weight: 900; } .stepText{ margin-top: 6px; color: var(--muted); font-size: 14px; } .note{ padding: 14px 16px; border-radius: 16px; background: rgba(37,99,235,.06); border: 1px solid rgba(37,99,235,.14); color: var(--muted); font-size: 14px; } .tile{ background: rgba(255,255,255,.9); border: 1px solid rgba(15,23,42,.08); border-radius: 16px; padding: 14px; color: var(--muted); } /* Dark: lepší kontrast pro "tile" boxy */ body.theme-dark .tile{ background: rgba(230,236,245,.06); border: 1px solid rgba(230,236,245,.12); color: var(--text); } .faq{ max-width: 900px; margin: 0 auto; display:grid; gap: 12px; } details{ background: rgba(255,255,255,.9); border: 1px solid rgba(15,23,42,.08); border-radius: 16px; padding: 14px 16px; } summary{ cursor: pointer; font-weight: 900; } details p{ margin-top: 10px; color: var(--muted); font-size: 14px; } /* Dark: FAQ nesmí být bílé */ body.theme-dark details{ background: rgba(230,236,245,.06); border: 1px solid rgba(230,236,245,.12); } body.theme-dark summary{ color: var(--text); } body.theme-dark details p{ color: var(--muted); } .cta{ border-radius: 26px; padding: 22px; background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(14,165,233,.08), rgba(255,255,255,.95)); border: 1px solid rgba(37,99,235,.16); box-shadow: var(--shadow); display:grid; gap: 14px; } /* Dark: CTA box bez bílé "mlhy" */ body.theme-dark .cta{ background: linear-gradient( 135deg, rgba(47,124,246,.14), rgba(56,217,169,.08), rgba(15,26,43,.92) ); border: 1px solid rgba(230,236,245,.12); } .priceBox{ background: rgba(255,255,255,.9); border: 1px solid rgba(15,23,42,.08); border-radius: 18px; padding: 16px; } .priceBox b{ font-size: 28px; display:block; margin-top: 6px; } .priceBox span{ color: var(--muted2); font-size: 13px; display:block; margin-top: 6px; } /* Dark: priceBox nesmí být bílý + text musí být čitelný */ body.theme-dark .priceBox{ background: rgba(230,236,245,.06); border: 1px solid rgba(230,236,245,.12); } body.theme-dark .priceBox b{ color: var(--text); } body.theme-dark .priceBox span{ color: var(--muted); } .footer{ padding: 22px 0 34px; color: var(--muted2); font-size: 12px; text-align:center; border-top: 1px solid rgba(15,23,42,.08); } /* SimpleShop: necháme vnitřek světlý, ale zasadíme to do dark designu */ body.theme-dark .ssWrap{ background: #ffffff; color: #0f172a; border-radius: 18px; border: 1px solid rgba(15,23,42,.10); padding: 12px; } /* odkazy uvnitř formuláře ať nejsou "neviditelné" */ body.theme-dark .ssWrap a{ color: #2563eb; text-decoration: underline; } /* Responsive */ @media (max-width: 980px){ .hero__grid{ grid-template-columns: 1fr; } .grid--4{ grid-template-columns: repeat(2, 1fr); } .grid--3{ grid-template-columns: repeat(2, 1fr); } .split{ grid-template-columns: 1fr; } } @media (max-width: 560px){ /* horní navigace */ .nav .nav__link{ display:none; } /* gridy vždy na jeden sloupec */ .grid--4, .grid--3{ grid-template-columns: 1fr; } /* velká tlačítka pro palec */ .btn{ width: 100%; min-height: 52px; padding: 14px 16px; font-size: 16px; border-radius: 16px; } /* CTA vždy pod sebe */ .ctaRow{ flex-direction: column; align-items: stretch; } /* zklidnění badge */ .badges{ justify-content: flex-start; gap: 8px; } .badge{ font-size: 12px; padding: 8px 10px; } /* HERO zjednodušení */ .hero__grid{ grid-template-columns: 1fr; } .sideCard{ display: none; } /* typografie pro mobil */ .h1{ font-size: 32px; line-height: 1.1; } .h1 span{ font-size: 16px; } .lead{ font-size: 15px; }