:root{ --v-forest:#26312a; /* hluboká lesní zeleň – text, tmavé plochy */ --v-moss:#4a5a42; /* mech */ --v-sage:#8b9a80; /* šalvěj – akcent */ --v-water:#41595a; /* voda */ --v-bark:#6d5a46; /* dřevo, kůra */ --v-cream:#f6f3ec; /* krémová – hlavní pozadí */ --v-sand:#e9e3d6; /* písek – tónované sekce */ --v-line:#ddd6c6; --v-muted:#6f7568; --v-serif:"Fraunces",Georgia,serif; --v-sans:"Inter",system-ui,sans-serif; --v-wrap:1200px; } *,*::before,*::after{box-sizing:border-box} body{margin:0;background:var(--v-cream);color:var(--v-forest); font-family:var(--v-sans);font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} .w{max-width:var(--v-wrap);margin:0 auto;padding:0 28px} .eyebrow{font-family:var(--v-sans);font-weight:500;font-size:.72rem;letter-spacing:.22em; text-transform:uppercase;color:var(--v-sage);margin:0 0 14px} h1,h2,h3{font-family:var(--v-serif);font-weight:400;letter-spacing:-.015em;line-height:1.12;margin:0} .h2{font-size:clamp(1.9rem,3.8vw,2.9rem);margin:0 0 18px} .lead{font-size:clamp(1.05rem,1.7vw,1.24rem);line-height:1.7;color:var(--v-muted);margin:0} .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--v-sans);font-weight:500; font-size:.96rem;text-decoration:none;padding:14px 28px;border-radius:2px;border:1px solid transparent; transition:.2s;cursor:pointer} .btn-p{background:var(--v-forest);color:var(--v-cream);border-color:var(--v-forest)} .btn-p:hover{background:transparent;color:var(--v-forest)} .btn-l{background:var(--v-cream);color:var(--v-forest);border-color:var(--v-cream)} .btn-l:hover{background:transparent;color:var(--v-cream)} .btn-g{background:transparent;color:var(--v-cream);border-color:rgba(246,243,236,.45)} .btn-g:hover{background:var(--v-cream);color:var(--v-forest)} /* hlavička */ .hdr{position:fixed;top:0;left:0;right:0;z-index:40;padding:22px 0;transition:padding .3s,background .3s} /* jemné ztmavení pod hlavičkou – aby bylo menu čitelné i na světlé fotce */ .hdr::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;pointer-events:none; background:linear-gradient(rgba(18,24,20,.55),rgba(18,24,20,0));opacity:1;transition:opacity .3s} .hdr .w{position:relative;z-index:2;display:flex;align-items:center;gap:30px} .brand{font-family:var(--v-serif);font-size:1.28rem;letter-spacing:.16em;text-transform:uppercase; color:var(--v-cream);text-decoration:none;margin-right:auto;line-height:1.1} .brand small{display:block;font-family:var(--v-sans);font-size:.6rem;letter-spacing:.24em; color:rgba(246,243,236,.6);margin-top:4px} .nav{display:flex;gap:30px;align-items:center} .nav a{position:relative;color:rgba(246,243,236,.78);text-decoration:none; font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;padding:8px 0;transition:color .2s} /* hover: linka vyjede zleva + text zesvětlá */ .nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--v-sage); transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.4,0,.2,1)} .nav a:hover{color:var(--v-cream)} .nav a:hover::after{transform:scaleX(1)} .nav a.is-active{color:var(--v-cream)} .nav a.is-active::after{transform:scaleX(1);background:rgba(246,243,236,.45)} /* po odscrollování: hlavička dostane pevné pozadí, ať menu nezaniká na světlých sekcích */ .hdr.pinned{background:rgba(30,39,33,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); padding:12px 0;box-shadow:0 1px 0 rgba(246,243,236,.1)} .hdr.pinned::before{opacity:0} .hdr.pinned .brand{font-size:1.1rem} /* hero */ .hero{position:relative;min-height:min(94vh,880px);display:flex;align-items:flex-end; padding:0 0 clamp(48px,7vw,88px);overflow:hidden} .hero-img{position:absolute;inset:0} .hero-img img{width:100%;height:100%;object-fit:cover} .hero-img::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(20,26,22,.62) 0%,rgba(20,26,22,.18) 42%,rgba(20,26,22,.86) 100%)} .hero .w{position:relative;z-index:2} .hero h1{color:var(--v-cream);font-size:clamp(2.4rem,6.4vw,4.6rem);max-width:16ch;margin:0 0 20px} .hero .lead{color:rgba(246,243,236,.9);max-width:52ch;margin:0 0 32px} .hero-actions{display:flex;flex-wrap:wrap;gap:12px} .hero-note{position:absolute;left:28px;bottom:28px;z-index:3; font-size:.75rem;letter-spacing:.13em;text-transform:uppercase; color:rgba(246,243,236,.5)} /* sekce */ .sec{padding:clamp(64px,9vw,120px) 0} .sec-sand{background:var(--v-sand)} .sec-dark{background:var(--v-forest);color:var(--v-cream)} .sec-dark .h2{color:var(--v-cream)} .sec-dark .lead{color:rgba(246,243,236,.75)} .head{max-width:660px;margin:0 0 clamp(34px,5vw,54px)} /* citát */ .quote{max-width:900px;margin:0 auto;text-align:center} .quote p{font-family:var(--v-serif);font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.35; color:var(--v-forest);margin:0 0 18px} .quote cite{font-family:var(--v-sans);font-style:normal;font-size:.8rem;letter-spacing:.18em; text-transform:uppercase;color:var(--v-sage)} /* dvojice text + obraz */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center} .split-r{direction:rtl}.split-r>*{direction:ltr} .split figure{margin:0;overflow:hidden} .split figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3} .rich p{margin:0 0 1.15em;color:var(--v-muted)} .rich p:first-of-type{color:var(--v-forest);font-size:1.1rem} /* programy */ .prog{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px; background:var(--v-line);border:1px solid var(--v-line)} .prog-i{background:var(--v-cream);padding:34px 28px;transition:.2s} .prog-i:hover{background:#fff} .prog-i h3{font-size:1.32rem;margin:0 0 10px} .prog-i p:not(.prog-n){margin:0;color:var(--v-muted);font-size:.96rem;line-height:1.65} /* místo – mozaika */ .mos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .mos figure{margin:0;position:relative;overflow:hidden} .mos img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease} .mos figure:hover img{transform:scale(1.04)} .mos figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px; background:linear-gradient(transparent,rgba(20,26,22,.8));color:var(--v-cream); font-family:var(--v-serif);font-size:1.15rem} .mos .big{grid-column:span 2;grid-row:span 2} .mos figure{min-height:190px} .mos .big{min-height:394px} /* firmy */ .two{display:grid;grid-template-columns:1fr 1fr;gap:18px} .card{border:1px solid rgba(246,243,236,.18);padding:34px 30px} .card h3{font-size:1.5rem;margin:0 0 12px;color:var(--v-cream)} .card p{color:rgba(246,243,236,.72);margin:0 0 18px;font-size:.98rem} .tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none} .tags li{font-size:.82rem;color:rgba(246,243,236,.8);border:1px solid rgba(246,243,236,.24); padding:5px 12px;border-radius:999px} .link-c{color:var(--v-cream);text-decoration:none;font-size:.94rem;border-bottom:1px solid rgba(246,243,236,.4);padding-bottom:2px} .link-c:hover{border-bottom-color:var(--v-cream)} /* podpora */ .sup{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .sup-i{background:var(--v-cream);border:1px solid var(--v-line);padding:30px 26px} .sup-i h3{font-size:1.2rem;margin:0 0 10px} .sup-i p{margin:0;color:var(--v-muted);font-size:.94rem} /* patička */ .ftr{background:var(--v-forest);color:rgba(246,243,236,.72);padding:clamp(52px,7vw,80px) 0 0} .ftr-g{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;padding-bottom:40px} .ftr h4{font-family:var(--v-sans);font-weight:500;font-size:.72rem;letter-spacing:.2em; text-transform:uppercase;color:var(--v-sage);margin:0 0 14px} .ftr p{margin:0 0 8px;font-size:.94rem} .ftr a{color:rgba(246,243,236,.8);text-decoration:none} .ftr a:hover{color:var(--v-cream)} .ftr-b{border-top:1px solid rgba(246,243,236,.14);padding:20px 0;font-size:.82rem; display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap} .ftr-name{font-family:var(--v-serif);font-size:1.4rem;letter-spacing:.14em;text-transform:uppercase; color:var(--v-cream);margin:0 0 8px} @media (max-width:900px){ .hdr{padding:16px 0} .split,.two,.sup{grid-template-columns:1fr} .split-r{direction:ltr} .mos{grid-template-columns:repeat(2,1fr)} .mos .big{grid-column:span 2;grid-row:span 1;min-height:240px} .nav{display:none} .ftr-g{grid-template-columns:1fr;gap:26px} .hero-note{display:none} } /* termíny */ .terms{background:var(--v-forest);color:var(--v-cream);padding:clamp(64px,8vw,96px) 0;position:relative;overflow:hidden} .terms-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin:0 0 26px} .terms-head .eyebrow{color:rgba(246,243,236,.6);margin:0} .terms-t{font-family:var(--v-serif);font-size:clamp(1.5rem,2.6vw,2rem);color:var(--v-cream);margin:0} .terms-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px} .term{background:rgba(246,243,236,.07);border:1px solid rgba(246,243,236,.16);padding:24px 22px; display:flex;flex-direction:column;gap:8px;transition:.2s} .term:hover{background:rgba(246,243,236,.12);border-color:rgba(246,243,236,.4)} .term-d{margin:0;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,243,236,.6)} .term-day{font-family:var(--v-serif);font-size:1.5rem;letter-spacing:0;text-transform:none; color:var(--v-cream);margin-right:6px} .term h3{font-size:1.3rem;color:var(--v-cream);margin:0} .term-x{margin:0;font-size:.94rem;color:rgba(246,243,236,.72);flex:1} .term-f{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 0; padding-top:14px;border-top:1px solid rgba(246,243,236,.14)} .free,.last{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase; display:inline-flex;align-items:center;gap:7px} .free{color:#a9c893}.last{color:#e0b273} .free::before,.last::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .term-a{color:var(--v-cream);text-decoration:none;font-size:.9rem; border-bottom:1px solid rgba(246,243,236,.4);padding-bottom:2px;transition:.16s} .term-a:hover{border-bottom-color:var(--v-cream)} .terms-n{margin:24px 0 0;font-size:.9rem;color:rgba(246,243,236,.6)} /* štítek stavu v hero */ .badge{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(246,243,236,.4); border-radius:999px;padding:7px 16px;margin:0 0 20px; font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--v-cream)} .badge .dot{width:7px;height:7px;border-radius:50%;background:#9fc08a; box-shadow:0 0 0 3px rgba(159,192,138,.25)} /* pruh: co už teď funguje */ .now{background:var(--v-moss);color:var(--v-cream);padding:26px 0} .now .w{display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px} .now-l{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,243,236,.65)} .now-i{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0;list-style:none} .now-i li{display:flex;align-items:center;gap:9px;font-size:.96rem} .now-i li::before{content:"";width:5px;height:5px;border-radius:50%;background:#9fc08a} .now-note{margin-left:auto;font-size:.86rem;color:rgba(246,243,236,.62)} /* obnova – poctivá poznámka uvnitř příběhu */ .note{border-left:2px solid var(--v-sage);padding:4px 0 4px 20px;margin:26px 0 0} .note p{margin:0;font-size:.96rem;color:var(--v-muted)} /* závěrečná výzva */ .cta{background:var(--v-forest);color:var(--v-cream);padding:clamp(56px,8vw,96px) 0} .cta .w{display:flex;flex-wrap:wrap;gap:30px;align-items:center;justify-content:space-between} .cta h2{font-size:clamp(1.8rem,3.6vw,2.7rem);color:var(--v-cream);margin:0 0 10px;max-width:18ch} .cta p{margin:0;color:rgba(246,243,236,.75);max-width:46ch} .cta-a{display:flex;flex-wrap:wrap;gap:12px} @media (max-width:900px){ .now-note{margin-left:0;width:100%} } /* ---------- Potlačení Astry (používáme vlastní rozvržení) ---------- */ .ast-container,.site-content .ast-container{max-width:none;padding:0} #primary,.site-main{margin:0;padding:0} .ast-separate-container .ast-article-single, .ast-separate-container #primary{background:transparent;padding:0;border:0} .ast-primary-header-bar,.site-header,.ast-above-header,.ast-below-header, .site-footer,.ast-small-footer,.ast-primary-footer-bar{display:none!important} .entry-header,.ast-single-post-order,.page-links{display:none} body.ast-separate-container{background:var(--v-cream)} /* ---------- Vnitřní stránka ---------- */ .p-head{position:relative;background:var(--v-forest);color:var(--v-cream); padding:calc(clamp(96px,12vw,140px)) 0 clamp(40px,6vw,64px);overflow:hidden} .p-head::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(80% 100% at 90% 0%,rgba(139,154,128,.22),transparent 60%)} .p-head .w{position:relative;z-index:2} .crumbs{display:flex;flex-wrap:wrap;gap:9px;font-size:.78rem;color:rgba(246,243,236,.55);margin:0 0 14px} .crumbs a{color:rgba(246,243,236,.75);text-decoration:none} .crumbs a:hover{color:var(--v-cream)} .p-title{font-family:var(--v-serif);font-weight:400;font-size:clamp(2rem,4.6vw,3.2rem); color:var(--v-cream);margin:0;letter-spacing:-.02em} .p-body{padding:clamp(48px,7vw,84px) 0} .p-rich h2{font-family:var(--v-serif);font-weight:400;font-size:clamp(1.5rem,2.8vw,2rem);margin:1.8em 0 .5em} .p-rich h3{font-family:var(--v-serif);font-weight:400;font-size:1.3rem;margin:1.6em 0 .4em} .p-rich p{margin:0 0 1.2em;color:var(--v-muted)} .p-rich a{color:var(--v-forest);text-decoration:underline;text-underline-offset:3px; text-decoration-color:var(--v-sage)} .p-rich a:hover{text-decoration-color:var(--v-forest)} .p-rich img{margin:1.6em 0} .p-rich ul,.p-rich ol{margin:0 0 1.2em;padding-left:1.2em;color:var(--v-muted)} .p-rich li{margin:.35em 0} .p-rich blockquote{margin:1.8em 0;padding:0 0 0 22px;border-left:2px solid var(--v-sage)} .p-rich blockquote p{font-family:var(--v-serif);font-size:1.25rem;color:var(--v-forest)} .p-rich figure{margin:1.6em 0} .p-rich figcaption{font-size:.85rem;color:var(--v-muted);margin-top:8px} /* profil: obrázek vedle textu */ .p-split{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start} .p-split figure{margin:0;position:sticky;top:100px} .p-split figure img{width:100%;height:auto} /* podstránky */ .subs{margin-top:clamp(40px,6vw,64px);padding-top:34px;border-top:1px solid var(--v-line)} .subs h3{font-family:var(--v-serif);font-weight:400;font-size:1.3rem;margin:0 0 18px} .subs-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px} .sub{display:block;background:#fff;border:1px solid var(--v-line);padding:22px 20px; text-decoration:none;color:var(--v-forest);transition:.18s} .sub:hover{border-color:var(--v-sage);transform:translateY(-2px)} .sub b{display:block;font-family:var(--v-serif);font-weight:400;font-size:1.12rem;margin-bottom:6px} .sub span{font-size:.9rem;color:var(--v-muted)} /* galerie */ .gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px} .gal a{display:block;overflow:hidden;aspect-ratio:4/3} .gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .gal a:hover img{transform:scale(1.05)} @media (max-width:900px){ .p-split{grid-template-columns:1fr} .p-split figure{position:static;max-width:280px} } /* ---------- Doplňky tématu ---------- */ .hero-fallback{background:linear-gradient(160deg,#3a4a3c,#1e2620)} .term-p{margin:0;font-family:var(--v-serif);font-size:1.05rem;color:var(--v-cream)} .nav-list{display:flex;gap:30px;align-items:center;list-style:none;margin:0;padding:0} .nav-list a{position:relative;color:rgba(246,243,236,.78);text-decoration:none; font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;padding:8px 0;transition:color .2s;display:inline-block} .nav-list a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--v-sage); transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.4,0,.2,1)} .nav-list a:hover{color:var(--v-cream)} .nav-list a:hover::after{transform:scaleX(1)} .nav-list .is-active,.nav-list .current-menu-item > a{color:var(--v-cream)} .nav-list .is-active::after,.nav-list .current-menu-item > a::after{transform:scaleX(1);background:rgba(246,243,236,.45)} .nav-list .sub-menu{display:none} /* hamburger */ .burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px} .burger span{display:block;width:22px;height:1.5px;background:var(--v-cream);transition:.25s} .burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} @media (max-width:980px){ .burger{display:flex} .hdr-cta{display:none} .nav{position:fixed;inset:64px 0 auto;background:rgba(30,39,33,.98); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); padding:22px 28px 28px;display:none;border-top:1px solid rgba(246,243,236,.12)} .nav.open{display:block} .nav-list{flex-direction:column;align-items:flex-start;gap:2px} .nav-list li{width:100%;border-bottom:1px solid rgba(246,243,236,.08)} .nav-list a{display:block;padding:14px 0;font-size:.86rem} .nav-list a::after{display:none} } /* ---------- Sedm prvků ---------- */ .elems{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px} .elems li{position:relative;display:flex;gap:16px;align-items:flex-start; background:#fff;border:1px solid var(--v-line);padding:24px 24px 24px 22px; font-size:1.06rem;line-height:1.45;color:var(--v-forest);overflow:hidden; transition:transform .18s,border-color .18s,box-shadow .18s} /* barevný proužek u hrany – drží prvky pohromadě jako jednu metodu */ .elems li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:var(--v-sage);opacity:.55;transition:opacity .18s} .elems li:hover{transform:translateY(-3px);border-color:var(--v-sage); box-shadow:0 18px 34px -26px rgba(20,26,22,.5)} .elems li:hover::before{opacity:1} .sec-sand .elems li{background:var(--v-cream)} .elems-n{font-family:var(--v-serif);font-size:1.7rem;line-height:1;color:var(--v-sage); min-width:34px;flex:0 0 auto;padding-top:2px} /* ---------- Ceník ---------- */ .price-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px; background:var(--v-line);border:1px solid var(--v-line)} .price{background:var(--v-cream);padding:30px 26px;display:flex;flex-direction:column;gap:10px;transition:.2s} .price:hover{background:#fff} .price h3{font-family:var(--v-serif);font-weight:400;font-size:1.24rem;margin:0} .price-v{font-family:var(--v-serif);font-size:1.9rem;color:var(--v-moss);margin:0;line-height:1} .price-n{margin:0;font-size:.92rem;color:var(--v-muted);line-height:1.6;flex:1} .price-a{margin-top:6px;font-size:.9rem;color:var(--v-forest);text-decoration:none; border-bottom:1px solid var(--v-sage);padding-bottom:2px;align-self:flex-start;transition:.16s} .price-a:hover{border-bottom-color:var(--v-forest)} /* ---------- Logo ---------- */ .brand{display:flex;align-items:center;gap:12px} .brand-logo{height:38px;width:auto;flex:0 0 auto;transition:height .3s} .brand-text{display:flex;flex-direction:column;line-height:1.1} .brand-name{font-family:var(--v-serif);font-size:1.28rem;letter-spacing:.16em;text-transform:uppercase;color:var(--v-cream)} .hdr.pinned .brand-logo{height:30px} .hdr.pinned .brand-name{font-size:1.1rem} .ftr-logo{height:52px;width:auto;margin:0 0 14px;opacity:.9} @media (max-width:640px){ .brand-logo{height:32px} .brand-name{font-size:1.05rem} .brand small{display:none} } /* ---------- Sazba obsahu (vnitřní stránky) ---------- */ /* Text drží čitelnou šířku, obrázky z ní vystupují – aby stránka nebyla jeden dlouhý sloupec „nadpis, odstavec, fotka“. Šířka je v pixelech: jednotka „ch“ se odvíjí od velikosti písma, takže u velkého nadpisu by omezení fakticky nefungovalo. */ .p-rich{max-width:none} .p-rich > p, .p-rich > h2, .p-rich > h3, .p-rich > h4, .p-rich > h5, .p-rich > h6, .p-rich > ul, .p-rich > ol, .p-rich > blockquote, .p-rich > table, .p-rich > dl{max-width:640px;margin-left:0;margin-right:0} /* podnadpis nad hlavním nadpisem → prostrkaný popisek */ .p-rich > h5{font-family:var(--v-sans);font-weight:500;font-size:.72rem;letter-spacing:.22em; text-transform:uppercase;color:var(--v-sage);margin:2.6em 0 .5em} .p-rich > h5 + h2{margin-top:0} .p-rich > h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:1.9em 0 .5em;letter-spacing:-.02em} .p-rich > h3{font-size:1.28rem;margin:1.7em 0 .4em} .p-rich > h2:first-child,.p-rich > h5:first-child{margin-top:0} /* první odstavec po velkém nadpisu čteme jako úvodní */ .p-rich > h2 + p{font-size:1.14rem;color:var(--v-forest);line-height:1.7} /* obrázky: vystoupí z textového sloupce, ale nepřerostou obrazovku */ .p-rich > figure{margin:2.4em 0;max-width:100%} .p-rich > figure img{width:100%;height:auto;max-height:78vh;object-fit:cover; border-radius:2px;box-shadow:0 30px 60px -36px rgba(20,26,22,.5)} /* vysoké obrázky (plakáty, schémata) nesmí urvat celou stránku */ .p-rich > figure img[height]{max-height:78vh;width:auto;max-width:100%} .p-rich > figure figcaption{margin-top:10px;font-size:.86rem;color:var(--v-muted)} /* samotný krátký odstavec mezi nadpisy působí jako motto */ .p-rich > p em:only-child{font-family:var(--v-serif);font-style:italic;font-size:1.2rem;color:var(--v-moss)} /* obrázek je vždy výrazně širší než textový sloupec – v tom je ten rytmus */ .p-rich > figure{max-width:960px} @media (min-width:1240px){ .p-rich > figure{width:calc(100% + 80px);max-width:none;margin-left:-40px} } /* v profilovém rozvržení nemá text nést omezení počítané pro plnou šířku */ .p-split .p-rich > p, .p-split .p-rich > h2, .p-split .p-rich > h3, .p-split .p-rich > h4, .p-split .p-rich > h5, .p-split .p-rich > ul, .p-split .p-rich > ol, .p-split .p-rich > blockquote{max-width:none} .p-split .p-rich > figure{max-width:100%;width:auto;margin-left:0} /* ---------- Strukturovaná stránka s programy ---------- */ .p-sub{margin:14px 0 0;color:rgba(246,243,236,.7);font-size:1.05rem;font-family:var(--v-serif);font-style:italic} .head-l{max-width:720px} .head-l .h2{margin:0} .sec-text{max-width:none} .sec-text > p{max-width:640px;margin:0 0 1.1em;color:var(--v-muted)} .sec-text > p:first-child{font-size:1.14rem;color:var(--v-forest)} .sec-text > h3{max-width:640px;font-family:var(--v-serif);font-weight:400;font-size:1.3rem;margin:1.6em 0 .4em} /* karty programů */ .pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px} .pcard{background:#fff;border:1px solid var(--v-line);display:flex;flex-direction:column; overflow:hidden;transition:transform .2s,border-color .2s} .pcard:hover{transform:translateY(-3px);border-color:var(--v-sage)} .sec-sand .pcard{background:var(--v-cream)} .pcard-img{aspect-ratio:16/10;overflow:hidden} .pcard-img img{width:100%;height:100%;object-fit:cover;display:block} .pcard-b{padding:28px 26px;display:flex;flex-direction:column;gap:9px;flex:1} .pcard h3{font-family:var(--v-serif);font-weight:400;font-size:1.5rem;margin:0;color:var(--v-forest)} .pcard-s{margin:0;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--v-sage)} .pcard-t{margin:0;color:var(--v-muted);line-height:1.68;font-size:.97rem} /* jedna podsekce → vedle obrázku */ .split.one{align-items:center} .one-t{font-family:var(--v-serif);font-weight:400;font-size:1.7rem;margin:0 0 6px;color:var(--v-forest)} /* pás obrázků pod sekcí */ .strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px} .strip figure{margin:0;overflow:hidden;aspect-ratio:4/3} .strip img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s} .strip figure:hover img{transform:scale(1.04)} .strip-1{grid-template-columns:1fr;max-width:960px} .strip-1 figure{aspect-ratio:21/9} @media (max-width:640px){ .pcard-b{padding:22px 20px} .strip{grid-template-columns:1fr} } /* ---------- Verše / výčty (sled krátkých odstavců) ---------- */ .verse{margin:1.6em 0;padding:22px 26px;border-left:2px solid var(--v-sage);background:rgba(139,154,128,.07);max-width:640px} .verse p{margin:0;line-height:1.95;color:var(--v-forest);font-family:var(--v-serif);font-size:1.05rem} .sec-text .verse{max-width:640px} .subs-plain{margin-top:0;padding-top:0;border-top:0} /* ---------- Mezery mezi bloky uvnitř sekce ---------- Každý blok (text, karty, seznam prvků, pás fotek) si dřív mezeru řešil sám, takže některé dvojice se lepily na sebe. Řeší to jedno pravidlo. */ .sec > .w > .head, .sec > .w > .head-l, .sec > .w > .p-rich, .sec > .w > .sec-text, .sec > .w > .elems, .sec > .w > .pcards, .sec > .w > .split, .sec > .w > .strip, .sec > .w > .gal, .sec > .w > .subs{margin-bottom:clamp(38px,5vw,58px)} .sec > .w > :last-child{margin-bottom:0} /* karty programů a prvků mají k dalšímu bloku o něco víc místa */ .elems + .split, .elems + .pcards, .pcards + .split, .split + .split{margin-top:clamp(10px,1.5vw,18px)} /* ===================================================================== * NÁVRH B — kruh a tah * Značka (V v kruhu) je nosný prvek: kroužky u čísel, kruhové výřezy * u fotek, vodoznak v hero a v kartách, plně zaoblená tlačítka. * ===================================================================== */ .mark{width:1em;height:1em;fill:currentColor;overflow:visible;flex:0 0 auto} /* --- tlačítka zaoblená do kruhu --- */ .btn{border-radius:100px} /* --- hlavička: značka místo obrázku --- */ .brand-logo{display:none} .brand .mark{font-size:40px;color:var(--v-cream);transition:font-size .3s} .hdr.pinned .brand .mark{font-size:31px} /* --- hero: značka jako vodoznak --- */ .hero-mark{position:absolute;right:-6%;top:50%;transform:translateY(-50%);z-index:2; font-size:min(78vh,720px);color:var(--v-cream);opacity:.09;pointer-events:none;line-height:0} /* --- popisek sekce se značkou --- */ .eyebrow{display:inline-flex;align-items:center;gap:9px} .eyebrow .mark{font-size:15px;opacity:.85} /* --- soustředné kružnice v tmavých sekcích --- */ .ring{position:absolute;border:1px solid currentColor;border-radius:50%;opacity:.16;pointer-events:none} /* --- citát v dvojitém kruhu --- */ .quote{display:grid;place-items:center;padding:0;border:0;text-align:center} /* Padding v procentech se počítá ze šířky RODIČE, ne prvku – na širokém okně z toho vycházel odsazení přes 260 px a z kruhu byla elipsa. Proto pevné hodnoty. */ .quote-c{position:relative;width:min(560px,86vw);aspect-ratio:1;border:1px solid var(--v-line); border-radius:50%;display:grid;place-items:center;padding:clamp(34px,5vw,62px)} .quote-c::before{content:"";position:absolute;inset:16px;border:1px solid var(--v-line);border-radius:50%;opacity:.5} .quote-c .mark{font-size:34px;color:var(--v-sage);margin:0 auto 18px} .quote-c p{font-family:var(--v-serif);font-size:clamp(1.2rem,2.4vw,1.7rem);line-height:1.45;font-style:italic;margin:0} .quote-c cite{display:block;margin-top:18px;font-style:normal;font-size:.72rem;letter-spacing:.2em; text-transform:uppercase;color:var(--v-muted)} /* --- čísla v kroužcích: program i sedm prvků --- */ .prog-i .prog-n{width:42px;height:42px;border:1px solid var(--v-sage);border-radius:50%; display:grid;place-items:center;font-family:var(--v-serif);font-size:.9rem;color:var(--v-moss); margin:0 0 22px} .elems li{padding:30px 26px 30px 82px;border-radius:18px;align-items:flex-start;gap:0} .elems li::before{display:none} .elems-n{position:absolute;left:24px;top:26px;width:42px;height:42px;border-radius:50%; border:1px solid var(--v-sage);display:grid;place-items:center;font-family:var(--v-serif); font-size:.92rem;color:var(--v-moss);min-width:0;padding:0;transition:.2s} .elems li:hover .elems-n{background:var(--v-sage);color:var(--v-cream)} /* --- karty a pruhy zaoblené --- */ .term,.price,.pcard,.card,.sub{border-radius:18px} .pcard-img{border-radius:18px 18px 0 0} .strip figure,.mos figure,.gal a,.p-rich > figure img,.story figure{border-radius:14px} .price{position:relative;overflow:hidden} .price .mark{position:absolute;right:-26px;bottom:-26px;font-size:120px;color:var(--v-sage);opacity:.07} /* --- fotky v kruhových výřezech --- */ .places{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(20px,3vw,34px)} .place-c{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden} .place-c img{width:100%;height:100%;object-fit:cover;transition:transform .6s} .place:hover .place-c img{transform:scale(1.06)} .place-c::after{content:"";position:absolute;inset:0;border-radius:50%; box-shadow:inset 0 0 0 8px rgba(38,49,42,.08);border:1px solid rgba(246,243,236,.35)} /* --- časová osa příběhu --- */ .tl{list-style:none;position:relative;padding-left:36px;margin:0} .tl::before{content:"";position:absolute;left:14px;top:8px;bottom:8px;width:1px;background:var(--v-line)} .tl li{position:relative;padding:0 0 28px} .tl li::before{content:"";position:absolute;left:-29px;top:6px;width:11px;height:11px;border-radius:50%; border:1px solid var(--v-sage);background:var(--v-cream)} .tl li:last-child::before{background:var(--v-sage)} .tl li:last-child{padding-bottom:0} .tl b{font-family:var(--v-serif);font-weight:400;font-size:1.3rem;display:block;margin-bottom:4px} .tl p{color:var(--v-muted);font-size:.96rem;margin:0} .sec-sand .tl li::before{background:var(--v-sand)} .sec-sand .tl li:last-child::before{background:var(--v-sage)} /* --- výzva se značkou na pozadí --- */ .cta{position:relative;overflow:hidden} .cta-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); font-size:min(60vh,460px);opacity:.07;color:var(--v-cream);pointer-events:none;line-height:0} .cta .w{position:relative;z-index:2} /* --- patička --- */ .ftr-logo{display:none} .ftr .mark{font-size:46px;color:var(--v-cream);opacity:.9;margin-bottom:14px} .place{text-align:center} .place b{display:block;margin-top:16px;font-family:var(--v-serif);font-weight:400;font-size:1.06rem} /* --- příběh: osa vedle fotky (úvodka i stránka Historie) --- */ .story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center} .story figure{border-radius:20px;overflow:hidden;aspect-ratio:4/5;margin:0} .story figure img{width:100%;height:100%;object-fit:cover} @media (max-width:900px){ .story{grid-template-columns:1fr} .story figure{aspect-ratio:16/10} } /* ===================================================================== * Odkazy – přebití Astry * * Astra barví KAŽDÝ odkaz při najetí vlastní barvou (a:focus, a:hover). * Naše pravidla řešila jen podtržení, takže barvu si při najetí vzala * Astra a odkaz zmodral. Tímhle se barva vrací tomu, kdo ji má řídit – * našim vlastním pravidlům níže. * ===================================================================== */ a:hover, a:focus{color:inherit} /* odkazy si barvu drží samy, i při najetí */ .link-c,.link-c:hover,.link-c:focus{color:var(--v-cream)} .term-a,.term-a:hover,.term-a:focus{color:var(--v-cream)} .price-a,.price-a:hover,.price-a:focus{color:var(--v-forest)} .sub,.sub:hover,.sub:focus{color:var(--v-forest)} .crumbs a:hover,.crumbs a:focus{color:var(--v-cream)} .p-rich a,.p-rich a:hover,.p-rich a:focus{color:var(--v-forest)} .sec-dark .p-rich a,.sec-dark .p-rich a:hover{color:var(--v-cream)} .ftr a:hover,.ftr a:focus{color:var(--v-cream)} .nav-list a:hover,.nav-list a:focus{color:var(--v-cream)} /* tlačítka barvu neřešíme – prohazují pozadí i text a mají to vyřešené výše */ .brand,.brand:hover,.brand:focus{color:var(--v-cream)} /* odkaz na soubor ke stažení (plakát, dokument) */ .p-rich a[href$=".pdf"], .p-rich a[href$=".doc"], .p-rich a[href$=".docx"]{display:inline-flex;align-items:center;gap:9px; border:1px solid var(--v-line);border-radius:100px;padding:9px 18px; text-decoration:none;font-size:.9rem;transition:.18s} .p-rich a[href$=".pdf"]::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--v-sage)} .p-rich a[href$=".pdf"]:hover{border-color:var(--v-sage);background:rgba(139,154,128,.08)} /* obsah termínů nad soustřednými kružnicemi */ .terms > .w{position:relative;z-index:2} /* ===================================================================== * Kontakt * ===================================================================== */ .k-main{position:relative;overflow:hidden} .k-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(34px,5vw,72px);align-items:start} /* údaje */ .k-info .h2{margin:0 0 30px} .k-list{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:22px} .k-list li{display:flex;gap:18px;align-items:flex-start} .k-ico{width:46px;height:46px;flex:0 0 auto;border:1px solid var(--v-sage);border-radius:50%; display:grid;place-items:center;color:var(--v-moss)} .k-ico svg{width:21px;height:21px} .k-list b{display:block;font-family:var(--v-serif);font-weight:400;font-size:1.14rem;margin-bottom:3px} .k-list p{margin:0;color:var(--v-muted);line-height:1.6} .k-list a{color:var(--v-forest);text-decoration:none;border-bottom:1px solid var(--v-sage)} .k-list a:hover{border-bottom-color:var(--v-forest)} .k-map{display:inline-block;margin-top:8px;font-size:.88rem;border-bottom:1px solid var(--v-sage)} .k-note{border-left:2px solid var(--v-sage);padding:4px 0 4px 18px} .k-note p{margin:0;color:var(--v-muted);font-size:.94rem;line-height:1.6} /* formulář */ .k-form{background:#fff;border:1px solid var(--v-line);border-radius:22px;padding:clamp(26px,3vw,40px)} .sec-sand .k-form{background:var(--v-cream)} .k-form h3{font-family:var(--v-serif);font-weight:400;font-size:1.5rem;margin:0 0 22px} .k-row{margin-bottom:16px} .k-row label{display:block;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase; color:var(--v-muted);margin-bottom:7px} .k-row label span{color:var(--v-sage)} .k-row input,.k-row select,.k-row textarea{width:100%;padding:13px 16px;border:1px solid var(--v-line); border-radius:12px;background:var(--v-cream);font-family:var(--v-sans);font-size:1rem; color:var(--v-forest);transition:border-color .18s,box-shadow .18s} .k-form textarea{resize:vertical;min-height:120px} .k-row input:focus,.k-row select:focus,.k-row textarea:focus{outline:none;border-color:var(--v-sage); box-shadow:0 0 0 3px rgba(139,154,128,.18)} .k-two{display:grid;grid-template-columns:1fr 1fr;gap:14px} .k-form .btn{margin-top:8px;border:0;cursor:pointer;font-family:var(--v-sans)} .k-gdpr{margin:14px 0 0;font-size:.82rem;color:var(--v-muted)} .k-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .k-err{background:rgba(197,90,60,.08);border-left:2px solid #b3341c;padding:12px 16px;border-radius:8px;margin-bottom:18px} .k-err p{margin:0 0 4px;font-size:.92rem;color:#8f2c17} .k-err p:last-child{margin:0} /* poděkování */ .k-done{text-align:center;padding:clamp(38px,5vw,60px)} .k-done-m{display:block;font-size:52px;color:var(--v-sage);margin-bottom:18px} .k-done-m .mark{margin:0 auto} .k-done h3{margin-bottom:10px} .k-done p{color:var(--v-muted);margin:0 0 8px} .k-done-alt{font-size:.92rem} .k-done a{color:var(--v-forest);border-bottom:1px solid var(--v-sage);text-decoration:none} /* cesta */ .k-cesta{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px} .k-krok{background:#fff;border:1px solid var(--v-line);border-radius:18px;padding:26px 24px} .k-krok b{display:block;font-family:var(--v-serif);font-weight:400;font-size:1.16rem; color:var(--v-moss);margin-bottom:8px} .k-krok p{margin:0;color:var(--v-muted);font-size:.96rem;line-height:1.68} .k-cesta-n{margin:24px 0 0;font-size:.94rem;color:var(--v-muted)} /* odkaz na historii */ .k-hist{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap} .k-hist .lead{margin-top:12px;max-width:52ch} .k-hist p:last-child{margin:0} @media (max-width:900px){ .k-grid{grid-template-columns:1fr} .k-two{grid-template-columns:1fr} } .k-cesta-n a{color:var(--v-forest);text-decoration:none;border-bottom:1px solid var(--v-sage)} /* ===================================================================== * Formulářové prvky – přebití Astry * * Astra stylu je