/* ============================================================ TS KRISTIAN, ukázka redesignu Jedna sada stylů, dvě varianty. Varianta B se zapíná třídou .varb na a jen přepisuje proměnné a pár komponent. ============================================================ */ :root{ --gold:#c9a227; --gold-soft:#d8bd6a; --ink:#1c1a17; --paper:#faf8f4; --paper-2:#f2ede4; --text:#2b2724; --muted:#6b635a; --line:#e3dbcd; --maxw:1180px; --serif: Georgia, "Iowan Old Style", "Times New Roman", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans); font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased; padding-bottom:var(--bottom-pad,62px)} img{max-width:100%;display:block} a{color:inherit} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} section{padding:74px 0} .band{background:var(--paper-2)} /* ---------- lišta ukázky ---------- */ .demobar{position:fixed;left:0;right:0;bottom:0;z-index:100;background:#15130f;color:#e8e2d6; border-top:1px solid #322c22;box-shadow:0 -8px 22px rgba(0,0,0,.22)} .demobar .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap; padding-top:11px;padding-bottom:11px} .demobar b{font-weight:600;font-size:14px;letter-spacing:.02em} .demobar small{color:#9c9384;font-size:12.5px} .switch{display:flex;gap:4px;background:#241f18;padding:4px;border-radius:999px;margin-left:auto} .switch button,.switch a{appearance:none;border:0;background:transparent;color:#b4ab9b; font:inherit;font-size:14px;padding:7px 16px;border-radius:999px;cursor:pointer; text-decoration:none;white-space:nowrap} .switch button[aria-pressed="true"]{background:var(--gold);color:#1a1610;font-weight:600} .switch a:hover{color:#e8e2d6} /* ---------- hlavička ---------- */ .nav{position:sticky;top:0;z-index:60;background:rgba(250,248,244,.94); backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line)} .nav .wrap{display:flex;align-items:center;gap:24px;padding-top:14px;padding-bottom:14px} .logo{font-family:var(--serif);font-size:20px;letter-spacing:.16em;text-decoration:none;white-space:nowrap} .nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0;font-size:15px} .nav ul a{text-decoration:none;color:var(--text);padding-bottom:2px; border-bottom:1px solid transparent} .nav ul a:hover,.nav ul a[aria-current="page"]{border-color:var(--gold)} .nav .cta{margin-left:auto;display:flex;align-items:center;gap:16px} .tel{font-size:15px;color:var(--muted);text-decoration:none;white-space:nowrap} /* ---------- tlačítka ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer; font:inherit;font-size:15px;font-weight:600;line-height:1.25; padding:13px 22px;border-radius:2px;text-decoration:none;text-align:center; background:var(--gold);color:#1a1610;transition:background .15s} .btn:hover{background:#b08f1c} .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff;font-weight:500} .btn-ghost:hover{background:rgba(255,255,255,.12)} .btn-line{background:transparent;border:1px solid var(--gold);color:var(--text);font-weight:500} .btn-line:hover{background:rgba(201,162,39,.1)} /* ---------- hero ---------- */ .hero{position:relative;background:#151310;color:#fff;overflow:hidden} .hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:center 38%;opacity:.62} .hero:after{content:"";position:absolute;inset:0; background:linear-gradient(100deg,rgba(12,10,8,.88) 0%,rgba(12,10,8,.72) 42%,rgba(12,10,8,.25) 78%)} .hero .wrap{position:relative;z-index:2;padding-top:112px;padding-bottom:106px} .hero .inner{max-width:660px} .kicker{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 18px} .hero h1{font-family:var(--serif);font-weight:400;font-size:52px;line-height:1.14;margin:0 0 18px} .hero p{font-size:19px;line-height:1.6;color:#e6e0d5;margin:0 0 30px;max-width:52ch} .hero .actions{display:flex;gap:14px;flex-wrap:wrap} .hero .note{margin:24px 0 0;font-size:14.5px;color:#b3aa9b} /* menší hero na podstránkách */ .hero.small .wrap{padding-top:70px;padding-bottom:64px} .hero.small h1{font-size:40px} .hero.small p{font-size:18px;margin-bottom:0} /* ---------- typografie sekcí ---------- */ .sec-head{max-width:64ch;margin-bottom:34px} .sec-head h2{font-family:var(--serif);font-weight:400;font-size:33px;line-height:1.2;margin:0 0 10px} .sec-head p{margin:0;color:var(--muted);font-size:17px} .prose{max-width:68ch} .prose p{margin:0 0 16px} .prose h3{font-family:var(--serif);font-weight:400;font-size:23px;margin:30px 0 10px} /* ---------- mřížky ---------- */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:34px} /* pobočky */ .place{background:#fff;border:1px solid var(--line);padding:26px 24px 24px;display:flex; flex-direction:column;gap:10px} .place h3{font-family:var(--serif);font-weight:400;font-size:23px;margin:0} .place .addr{font-size:15.5px;color:var(--muted);margin:0;line-height:1.5} .place .what{font-size:15px;margin:0} .place .links{margin-top:auto;padding-top:16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap} .place .links a{font-size:15px;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:1px} .todo{border:1px dashed #c8b06a;background:#fdf8e9;color:#7a6114;font-size:13.5px; padding:7px 10px;line-height:1.45} /* kroky */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;counter-reset:s} .step{counter-increment:s} .step:before{content:counter(s);font-family:var(--serif);font-size:34px;color:var(--gold); display:block;line-height:1;margin-bottom:12px} .step h3{font-size:18px;margin:0 0 6px;font-weight:600} .step p{margin:0;color:var(--muted);font-size:16px} /* karty kurzů */ .courses{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .course{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column} .course img{aspect-ratio:4/3;object-fit:cover;width:100%} .course .body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1} .course h3{font-family:var(--serif);font-weight:400;font-size:21px;margin:0} .course p{margin:0;font-size:15.5px;color:var(--muted)} .course .meta{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between; align-items:center;gap:12px;border-top:1px solid var(--line);font-size:15px} .price{font-weight:600} .course .meta a{text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:1px} /* ceník */ .tarify{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .tarif{background:#fff;border:1px solid var(--line);padding:22px 20px;display:flex; flex-direction:column;gap:8px} .tarif h4{margin:0;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted); font-weight:600} .tarif .cena{font-family:var(--serif);font-size:29px;line-height:1.1} .tarif p{margin:0;font-size:15px;color:var(--muted)} .tarif.hlavni{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset} table.cenik{width:100%;border-collapse:collapse;font-size:16px} table.cenik th,table.cenik td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line)} table.cenik th{font-weight:600;color:var(--muted);font-size:14px;letter-spacing:.06em; text-transform:uppercase} table.cenik td:last-child{text-align:right;white-space:nowrap;font-weight:600} /* rozvrh */ .rozvrh{list-style:none;margin:0;padding:0;columns:2;column-gap:40px} .rozvrh li{padding:9px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between; gap:16px;break-inside:avoid;font-size:16px} .rozvrh b{font-weight:600} .rozvrh span{color:var(--muted)} /* tým */ .tym{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .clen{background:#fff;border:1px solid var(--line);padding:24px 22px} .clen h3{margin:0 0 2px;font-size:18px;font-weight:600} .clen .role{margin:0 0 10px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)} .clen p{margin:0;font-size:15.5px;color:var(--muted)} /* citace */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .quote{background:#fff;border:1px solid var(--line);padding:24px 22px} .quote p{margin:0 0 14px;font-size:16px;line-height:1.6} .quote cite{font-style:normal;font-size:14.5px;color:var(--muted)} /* partneři */ .partneri{display:flex;flex-wrap:wrap;gap:10px 12px;list-style:none;margin:0;padding:0} .partneri li{border:1px solid var(--line);background:#fff;padding:9px 16px;font-size:15px; border-radius:2px;color:var(--muted)} /* rezervace v rámu */ .rezervace{background:#fff;border:1px solid var(--line);padding:10px} .rezervace iframe{width:100%;height:820px;border:0;display:block;background:#fff} .rezervace-pozn{font-size:14px;color:var(--muted);margin:10px 2px 0;display:flex; justify-content:space-between;gap:14px;flex-wrap:wrap} .rezervace-pozn a{text-decoration:none;border-bottom:1px solid var(--gold)} /* kontakt */ .contact{background:var(--ink);color:#efe9dd} .contact h2{font-family:var(--serif);font-weight:400;font-size:32px;margin:0 0 14px} .contact p{color:#c3bbac;margin:0 0 20px;max-width:46ch} .clist{list-style:none;margin:0;padding:0;font-size:17px} .clist li{padding:11px 0;border-bottom:1px solid #38322a} .clist a{text-decoration:none;border-bottom:1px solid var(--gold-soft)} .clist small{display:block;font-size:13px;color:#9a9182;letter-spacing:.04em; text-transform:uppercase;margin-bottom:2px} .map{background:#241f19;border:1px solid #38322a;aspect-ratio:16/10;display:flex; align-items:center;justify-content:center;color:#8d8474;font-size:14.5px;text-align:center;padding:20px} footer{background:#100e0b;color:#8d8474;font-size:14px;padding:24px 0} footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} footer a{color:#b6ac99;text-decoration:none;border-bottom:1px solid #3a342b} /* soupis změn na konci úvodní stránky */ .why{background:#fff;border-top:1px solid var(--line)} .why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 44px} .why-grid div{padding:15px 0;border-top:1px solid var(--line)} .why-grid b{display:block;font-weight:600;margin-bottom:3px} .why-grid span{color:var(--muted);font-size:15.5px} body.varb .why{background:#fbf7ef} /* mobilní CTA */ .mobcta{display:none} /* ============================================================ VARIANTA B: původní vzor a barevné schéma ============================================================ */ body.varb{ --gold:#c2a259; --gold-soft:#e0c98f; --paper:#efe7d8; --paper-2:#e4d8bf; --ink:#2b2724; --text:#312c26; --muted:#6d6353; --line:#d5c7ab; } body.varb .nav{background:rgba(239,231,216,.95)} body.varb .logo, body.varb .sec-head h2, body.varb .contact h2{font-family:var(--sans);font-weight:500;letter-spacing:.12em; text-transform:uppercase} body.varb .sec-head h2,body.varb .contact h2{font-size:25px;line-height:1.3} body.varb .place h3,body.varb .course h3,body.varb .prose h3{font-family:var(--sans); font-weight:600;letter-spacing:.02em;font-size:19px;text-transform:none} body.varb .btn{border-radius:999px;padding:14px 28px;letter-spacing:.04em} body.varb .tarif .cena{font-family:var(--sans);font-weight:600;font-size:26px} body.varb .hero{background:var(--paper-2);color:var(--text)} body.varb .hero img.bg{opacity:1;object-position:center 50%} body.varb .hero:after{background:linear-gradient(100deg,rgba(239,231,216,.93) 0%, rgba(239,231,216,.82) 46%,rgba(239,231,216,.42) 84%)} body.varb .hero h1{font-family:var(--sans);font-weight:300;letter-spacing:.01em;font-size:44px} body.varb .hero p{color:#4a4238} body.varb .kicker{color:#8a6f33} body.varb .hero .note{color:#6d6353} body.varb .btn-ghost{border-color:rgba(49,44,38,.45);color:var(--text)} body.varb .btn-ghost:hover{background:rgba(49,44,38,.08)} .bg-b{display:none} body.varb .bg-a{display:none} body.varb .bg-b{display:block} body.varb .band, body.varb .contact{background-image:linear-gradient(rgba(43,39,36,.93),rgba(43,39,36,.93)), url("img/pozadi.jpeg");background-size:auto,cover;background-position:center; color:#f0e9dc} body.varb .band .sec-head h2{color:var(--gold-soft)} body.varb .band .sec-head p,body.varb .band .step p,body.varb .band .prose p{color:#c5bcac} body.varb .band .step h3,body.varb .band .prose h3{color:#f0e9dc} body.varb .band .step:before{color:var(--gold)} body.varb .band .quote,body.varb .band .clen,body.varb .band .tarif, body.varb .band .partneri li{background:rgba(255,255,255,.06);border-color:#4a4238;color:#f0e9dc} body.varb .band .quote cite,body.varb .band .clen p,body.varb .band .tarif p{color:#b9ae9b} body.varb .band table.cenik th,body.varb .band table.cenik td{border-color:#4a4238} body.varb .band table.cenik th{color:#b9ae9b} body.varb .place,body.varb .course{background:#fbf7ef;border-color:var(--line)} /* tlačítko s obrysem stojí ve variantě B na tmavém pásu, musí zesvětlat */ body.varb .band .btn-line,body.varb .contact .btn-line{border-color:var(--gold-soft); color:#f4eee2} body.varb .band .btn-line:hover,body.varb .contact .btn-line:hover{ background:rgba(224,201,143,.16)} body.varb .band .rezervace-pozn{color:#c5bcac} body.varb .band .rezervace-pozn a{color:#f0e9dc;border-bottom-color:var(--gold-soft)} body.varb .map{background:rgba(255,255,255,.06);border-color:#4a4238;color:#b9ae9b} body.varb footer{background:#241f1b} @media (max-width:900px){ .grid-3,.grid-2,.steps,.courses,.quotes,.tym,.tarify{grid-template-columns:1fr} .rozvrh{columns:1} .hero h1{font-size:36px} .hero.small h1{font-size:30px} .hero .wrap{padding-top:70px;padding-bottom:72px} .nav ul,.nav .tel{display:none} .nav .cta{margin-left:auto} section{padding:52px 0} .rezervace iframe{height:640px} .mobcta{display:block;position:fixed;left:0;right:0;bottom:var(--demobar-h,58px);z-index:80; background:#fff;border-top:1px solid var(--line);padding:10px 16px; box-shadow:0 -6px 18px rgba(0,0,0,.07)} .mobcta .btn{display:block;width:100%} body.varb .mobcta{background:#fbf7ef} } @media (max-width:700px){ .demobar small{display:none} .demobar b{font-size:13px} .demobar .wrap{gap:10px} .switch button,.switch a{padding:7px 12px;font-size:13.5px} }