/* ESCAPE shared site stylesheet — extracted from the homepage so every page is identical. Lives at escape-assets/site.css; font url()s are relative to THIS file, so it works for both root pages (escape-assets/site.css) and /en/ pages (../escape-assets/site.css). */ /* ---------- Brand fonts (real) ---------- */ @font-face{font-family:'Candara';src:url('fonts/Candara.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Candara';src:url('fonts/Candara-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Luxurious Script';src:url('fonts/LuxuriousScript-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} :root{ --mocha:#ad8f78; /* primary brand */ --mocha-deep:#927259; --brown:#866450; --mocha-light:#c9b3a1; --cream:#efe9e3; /* warm background */ --cream-soft:#f6f2ee; --charcoal:#3a3631; /* text */ --ink:#2e2a25; /* strongest headings/emphasis (articles) */ --brown-ink:#5b4a3b; /* warm dark brown for callouts/quotes */ --muted:#6f6155; /* secondary text — darkened for WCAG AA on cream/white (was #8a7d70 = 3.3:1) */ --line:#e6ded6; --line-2:#d9cec2; /* slightly stronger hairline (link underlines) */ --white:#fff; --shadow:0 30px 70px -38px rgba(58,54,49,.45); --shadow-soft:0 18px 44px -30px rgba(58,54,49,.4); --radius:6px; --maxw:1180px; --ease:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} [id]{scroll-margin-top:120px} body{ font-family:'Candara','Segoe UI',Lato,Arial,sans-serif; color:var(--charcoal);background:var(--white); line-height:1.72;font-weight:400;font-size:1.02rem; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden; } h1,h2,h3,h4{font-family:'Candara','Segoe UI',Lato,sans-serif;font-weight:700;line-height:1.16;color:var(--charcoal);letter-spacing:-.006em} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} /* keep the review count "2 287" and rating "4,9" from breaking across lines on narrow screens */ .rev-count,.rev-rating{white-space:nowrap} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} /* the cute brand script — reserved for a few warm moments only */ /* Eyebrow kicker — was cursive 'Luxurious Script' but illegible at small sizes (esp. Czech diacritics). Unified to a clean uppercase label site-wide. Large decorative cursive (hero greeting, founder signature, 4,9 rating number, gift-voucher card, 404 number, price numbers) uses the font directly, not this class, so it stays cursive. */ .script{font-family:'Candara','Segoe UI',sans-serif!important;font-style:normal!important;text-transform:uppercase!important;letter-spacing:.2em!important;font-weight:700!important;font-size:.74rem!important;color:var(--mocha-deep);line-height:1.35} /* section-head eyebrow had NO explicit size → inherited ~1rem → cursive was illegible. Give it a readable size everywhere. */ .section-head .script{font-size:clamp(1.45rem,2.4vw,1.9rem);display:block;margin-bottom:4px;line-height:1.1} /* lotus mark — the recurring boutique signature above section titles */ .lotus-mark{width:46px;height:auto;margin:0 auto 16px;opacity:.92} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55em; font-family:'Candara',sans-serif;font-weight:700;font-size:.78rem; letter-spacing:.2em;text-transform:uppercase; padding:16px 34px;border-radius:var(--radius);cursor:pointer;border:1px solid transparent; transition:transform .45s var(--ease),background .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease); white-space:nowrap; } .btn-primary{background:var(--mocha);color:#fff;box-shadow:var(--shadow-soft)} .btn-primary:hover{background:var(--brown)} .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)} .btn-ghost:hover{background:#fff;color:var(--charcoal)} .btn-outline{background:transparent;color:var(--cta);border-color:var(--mocha)} .btn-outline:hover{background:var(--mocha);color:#fff} @media(hover:hover){.btn-primary:hover,.btn-ghost:hover,.btn-outline:hover{transform:translateY(-3px)}} .btn:active{transform:scale(.97);transition-duration:.12s} .btn:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--mocha);outline-offset:3px;border-radius:3px} /* ---------- Announcement + Header ---------- */ .announce{background:var(--brown);color:#fff;text-align:center;font-size:.82rem;letter-spacing:.06em;padding:9px 16px} .announce strong{font-weight:700} header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .45s var(--ease),box-shadow .45s var(--ease)} header.scrolled{background:rgba(44,38,34,.95);box-shadow:0 10px 34px -22px rgba(0,0,0,.7)} header.scrolled::before{content:'';position:absolute;inset:0;z-index:-1;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);pointer-events:none} /* Light editorial hero pages (blog, guides, landing): white nav text needs a solid header from the top */ body:has(.art-hero) header{background:rgba(44,38,34,.95);box-shadow:0 10px 34px -22px rgba(0,0,0,.7)} body:has(.art-hero) header::before{content:'';position:absolute;inset:0;z-index:-1;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);pointer-events:none} .nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0;transition:padding .45s var(--ease)} header.scrolled .nav{padding:11px 0} .logo img{height:48px;width:auto;transition:height .45s var(--ease)} header.scrolled .logo img{height:40px} .nav-links{display:flex;align-items:center;gap:30px;list-style:none} .nav-links a{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:700;position:relative;transition:color .35s var(--ease)} .nav-links a::after{content:'';position:absolute;left:0;bottom:-7px;width:0;height:1.5px;background:var(--mocha-light);transition:width .35s var(--ease)} .nav-links a:hover{color:var(--mocha-light)} .nav-links a:hover::after,.nav-links a.active::after{width:100%} .nav-links a.active{color:var(--mocha-light)} .nav-right{display:flex;align-items:center;gap:18px} .lang{display:flex;align-items:center;gap:9px} .lang a{display:flex;align-items:center;gap:6px;font-size:.7rem;letter-spacing:.1em;font-weight:700;color:rgba(255,255,255,.6);transition:color .3s var(--ease)} .lang a img{width:21px;height:auto;border-radius:2px;display:block;opacity:.55;transition:opacity .3s var(--ease);box-shadow:0 0 0 1px rgba(255,255,255,.25)} .lang a.active{color:#fff} .lang a.active img,.lang a:hover img{opacity:1} .lang a:hover{color:#fff} .nav-cta{padding:12px 24px;font-size:.7rem} .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;position:relative}.burger::before{content:"";position:absolute;inset:-9px -10px} .burger span{width:26px;height:2px;background:#fff;transition:.3s} /* ---------- Hero ---------- */ .hero{position:relative;min-height:100vh;display:flex;align-items:center;color:#fff;text-align:center;overflow:hidden;background:#2a201a} .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .hero::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(rgba(34,27,21,.30),rgba(28,22,17,.52))} .hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(120% 80% at 50% 40%,transparent 46%,rgba(24,18,13,.5))} .hero-inner{position:relative;z-index:2;max-width:820px;margin:0 auto;padding:130px 28px 96px} .hero-inner>*{animation:heroIn 1s var(--ease) both} .hero .script{animation-delay:.1s} .hero h1{animation-delay:.26s} .hero p{animation-delay:.46s} .hero-cta{animation-delay:.62s} @keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} /* hero greeting stays as the big cursive signature (large = legible + on-brand) */ .hero .script{font-family:'Luxurious Script',cursive!important;text-transform:none!important;letter-spacing:.01em!important;font-weight:400!important;font-size:clamp(1.9rem,4.4vw,2.9rem)!important;display:block;margin-bottom:10px;color:var(--mocha-light);text-shadow:0 2px 20px rgba(0,0,0,.3)} .hero h1{font-size:clamp(2.1rem,5vw,3.5rem);font-weight:700;color:#fff;margin:0 auto 24px;max-width:14ch;text-shadow:0 2px 30px rgba(0,0,0,.4);letter-spacing:-.01em} .hero p{font-size:1.1rem;max-width:540px;margin:0 auto 38px;opacity:.94;line-height:1.65} .hero-cta{display:flex;gap:15px;justify-content:center;flex-wrap:wrap} .scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;opacity:.7;animation:bob 2.4s ease-in-out infinite} @keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}} /* ---------- Intro tiles (original custom icons) ---------- */ .intro{margin-top:-72px;position:relative;z-index:5} .intro .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .tile{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:44px 30px 40px;text-align:center;transition:transform .5s var(--ease)} @media(hover:hover){ .tile.tile:hover{transform:translateY(-8px)} .card.card:hover{transform:translateY(-9px);box-shadow:var(--shadow)} .card:hover .card-img{transform:scale(1.06)} .why-img:hover img,.voucher-img:hover img{transform:scale(1.04)} .gallery-item:hover img{transform:scale(1.07)} } .tile .tic{height:62px;width:auto;margin:0 auto 20px;display:block} .tile h3{font-size:1.42rem;margin-bottom:8px} .tile p{color:var(--muted);font-size:.97rem;margin-bottom:20px;line-height:1.6} .tile a{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mocha-deep);font-weight:700} .tile a:hover{color:var(--brown)} /* ---------- Sections + section heads ---------- */ section{padding:clamp(72px,9vw,118px) 0} .section-head{text-align:center;max-width:620px;margin:0 auto 58px} .section-head h2{font-size:clamp(1.95rem,3.6vw,2.7rem);margin-bottom:14px} .section-head p{color:var(--muted);font-size:1.05rem;line-height:1.6} /* ---------- Massage cards ---------- */ .massages{background:var(--cream)} .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-soft);transition:transform .5s var(--ease),box-shadow .5s var(--ease);display:flex;flex-direction:column} .card-img{width:100%;height:210px;object-fit:cover;background-size:cover;background-position:center;display:block;transition:transform .8s var(--ease)} .card-body{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1} .card h3{font-size:1.24rem;margin-bottom:10px} .card p{font-size:.92rem;color:var(--muted);margin-bottom:18px;flex:1;line-height:1.6} .card .price{font-size:1.02rem;color:var(--brown);font-weight:700;margin-bottom:18px;letter-spacing:.01em} .card .price span{font-size:.8rem;color:var(--muted);font-weight:400} /* Whole card clickable → detail (bigger tap target = higher CTR). Overlay is anchored to the single CTA that is a DIRECT child of .card-body; dual-CTA cards keep their buttons inside .card-actions, so they are naturally excluded. position:relative also anchors the .badge. */ .cards .card{position:relative;isolation:isolate} .cards .card .card-body > a.btn{cursor:pointer} .cards .card .card-body > a.btn::after{content:'';position:absolute;inset:0;z-index:4;cursor:pointer} /* Dual-CTA cards (outline "detail" + primary "Rezervovat"): the whole card → detail via the outline CTA's overlay; the primary button is lifted above so it keeps its own action. */ .cards .card .card-cta a.btn-outline::after{content:'';position:absolute;inset:0;z-index:4;cursor:pointer} .cards .card .card-cta a.btn-primary{position:relative;z-index:5} @media(hover:hover){.cards .card:hover .card-body > a.btn-outline,.cards .card:hover .card-cta a.btn-outline{background:var(--mocha);color:#fff;border-color:var(--mocha)}} /* ---------- Why Escape ---------- */ .why-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:66px;align-items:center} .why-img{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5} .why-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)} .why-text .script{font-size:clamp(1.7rem,3vw,2.2rem);display:block;margin-bottom:2px} .why-text h2{font-size:clamp(1.85rem,3.4vw,2.5rem);margin:0 0 14px} .why-text>p{color:var(--muted);font-size:1.05rem;line-height:1.7} .features{list-style:none;margin-top:26px} .feature{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)} .feature:last-child{border-bottom:0} .feature .mk{flex:0 0 auto;width:11px;height:11px;margin-top:9px;background:var(--mocha);transform:rotate(45deg);border-radius:2px} .feature h4{font-size:1.16rem;margin-bottom:3px} .feature p{color:var(--muted);font-size:.96rem;line-height:1.6} /* ---------- Testimonials ---------- */ .testimonials{background:var(--cream-soft)} .t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .t-card{background:var(--white);border-radius:var(--radius);padding:34px 30px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column} /* the review stars sat at 3.0:1 on white — too pale to read on a phone in daylight; mocha-deep is the same brand family at 4.4:1 */ .stars{color:var(--mocha-deep);letter-spacing:3px;margin-bottom:16px;font-size:1rem} .t-card p{font-size:1rem;line-height:1.7;margin-bottom:20px;flex:1} .t-card .who{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brown);font-weight:700} .t-rating{background:var(--mocha);color:#fff;justify-content:center;align-items:center;text-align:center;gap:6px} .t-rating .num{font-family:'Luxurious Script',cursive;font-size:3.4rem;line-height:1;color:#fff} .t-rating p{flex:none;opacity:.95;margin:0;font-size:.98rem} /* ---------- Gallery (clean, organised tiling) ---------- */ .gallery{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:228px;gap:14px} .gallery-item{overflow:hidden;border-radius:var(--radius);grid-column:span 2} .gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)} .gallery-item.feature{grid-column:span 2;grid-row:span 2} /* ---------- Voucher / gift (with picture) ---------- */ .gift{background:var(--mocha);color:#fff;position:relative;overflow:hidden} .gift-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .gift .script{color:rgba(255,255,255,.92);font-size:clamp(1.7rem,3vw,2.2rem);display:block;margin-bottom:2px} .gift h2{font-size:clamp(1.9rem,3.6vw,2.6rem);margin-bottom:16px;color:#fff} .gift p{font-size:1.06rem;opacity:.94;margin-bottom:18px;line-height:1.7} .gift .perk{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em;margin-bottom:26px} .gift .perk img{width:26px;filter:brightness(0) invert(1)} .gift .btn-ghost{border-color:#fff} .voucher-img{border-radius:var(--radius);overflow:hidden} .voucher-img img{width:100%;height:auto;display:block;transition:transform .9s var(--ease)} /* ---------- Contact ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:stretch} .info-row{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)} .info-row:last-of-type{border-bottom:0} .info-row .ic{flex:0 0 22px;width:22px;height:auto;color:var(--mocha);margin-top:5px} .info-row .lbl{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cta);font-weight:700;margin-bottom:2px} .info-row .val{font-size:1.08rem} .info-row .val a:hover{color:var(--mocha)} .map{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);min-height:420px} .map iframe{width:100%;height:100%;min-height:420px;border:0;display:block;filter:grayscale(.25)} /* ---------- FAQ ---------- */ .faq{max-width:760px;margin:0 auto} .faq details{border-bottom:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;padding:22px 4px;display:flex;justify-content:space-between;align-items:center;gap:18px;font-family:'Candara',sans-serif;font-weight:700;font-size:1.12rem;color:var(--charcoal)} .faq summary::-webkit-details-marker{display:none} .faq summary .plus{flex:0 0 auto;width:22px;height:22px;position:relative;transition:transform .25s var(--ease)} .faq summary .plus::before,.faq summary .plus::after{content:'';position:absolute;background:var(--mocha);border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%)} .faq summary .plus::before{width:13px;height:2px} .faq summary .plus::after{width:2px;height:13px;transition:transform .25s var(--ease)} .faq details[open] summary .plus::after{transform:translate(-50%,-50%) scaleY(0)} .faq .ans{color:var(--muted);padding:0 4px 22px;max-width:660px;line-height:1.7} /* Smooth expand/collapse — unified site-wide. Scoped interpolate-size lets block-size animate to auto; degrades to instant open on browsers without ::details-content. */ .faq{interpolate-size:allow-keywords} .faq details::details-content{block-size:0;overflow:clip;transition:block-size .32s var(--ease),content-visibility .32s var(--ease) allow-discrete} .faq details[open]::details-content{block-size:auto} .faq .ans a{color:var(--mocha-deep);font-weight:700;border-bottom:1px solid var(--line)} /* ---------- Newsletter ---------- */ .news{background:var(--charcoal);color:#efe7df;text-align:center;position:relative;overflow:hidden} .news .script{font-size:clamp(1.7rem,3vw,2.2rem);display:block;color:var(--mocha-light);margin-bottom:2px} .news h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:12px} .news p{opacity:.82;margin-bottom:26px;line-height:1.65} .news form{display:flex;gap:12px;max-width:480px;margin:0 auto;flex-wrap:wrap;justify-content:center} .news input{flex:1;min-width:220px;padding:15px 20px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;border-radius:var(--radius);font-family:inherit;font-size:16px} .news input::placeholder{color:rgba(255,255,255,.55)} /* ---------- Footer (full sitemap — real multi-page structure) ---------- */ footer{background:#2b2521;color:#b7a99b;padding:64px 0 30px} .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:46px} .foot-brand img{height:50px;margin-bottom:18px} .foot-brand p{font-size:.95rem;line-height:1.7;color:#a0917f;max-width:260px} .foot-col h4{color:#fff;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px;font-weight:700} .foot-col ul{list-style:none} .foot-col li{margin-bottom:11px} .foot-col a,.foot-contact a{font-size:.95rem;color:#c2b3a2;transition:color .3s var(--ease)} .foot-col a:hover,.foot-contact a:hover{color:var(--mocha-light)} .foot-contact div{font-size:.95rem;line-height:1.7;color:#c2b3a2;margin-bottom:14px} .social{display:flex;gap:12px;margin-top:18px} .social a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);transition:background .3s var(--ease),transform .3s var(--ease)} .social a:hover{background:rgba(173,143,120,.3)} @media(hover:hover){.social a:hover{transform:translateY(-3px)}} .social img{width:19px;height:19px;object-fit:contain;margin:0} .foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;font-size:.8rem;opacity:.7;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} .foot-bottom a:hover{color:var(--mocha-light)} /* ---------- Lotus watermarks (floral personality) ---------- */ .lotus-bg{position:absolute;pointer-events:none;z-index:0;opacity:.16} .massages,.why-section,.gift,.news{position:relative;overflow:hidden} .massages .wrap,.why-section .wrap,.gift .wrap,.news .wrap{position:relative;z-index:1} .lotus-tr{top:-90px;right:-90px;width:360px} .lotus-bl{bottom:-100px;left:-90px;width:340px} .lotus-white{filter:brightness(0) invert(1);opacity:.12} @media(max-width:760px){.lotus-bg{display:none}} /* ---------- Floating actions ---------- */ .float{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;flex-direction:column;align-items:center;gap:12px} .fab{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--shadow);transition:transform .3s var(--ease),opacity .3s var(--ease)} @media(hover:hover){.fab:hover{transform:scale(1.08)}} .fab img{width:54px;height:54px;border-radius:50%} .fab.gift{background:#efe4d6;color:#8c6f5a}.fab.gift svg{width:23px;height:23px} /* primary = the money action: bigger, gradient-filled, more elevated so it clearly leads */ .fab.book{background:linear-gradient(145deg,var(--mocha),var(--brown));color:#fff;width:60px;height:60px;box-shadow:0 10px 26px -8px rgba(102,74,56,.6)} .fab.book svg{width:26px;height:26px} .fab.call{background:var(--brown);color:#fff}.fab.call svg{width:24px;height:24px} /* WhatsApp in our own palette: the bright green square was the single loudest thing on the page and fought every CTA. Same instantly-recognisable glyph, brand circle. */ .fab[aria-label="WhatsApp"]{background:var(--mocha-deep)} .fab[aria-label="WhatsApp"] img{display:none} .fab[aria-label="WhatsApp"]::after{content:'';width:27px;height:27px;background:#fff; -webkit-mask:url(img/whatsapp-glyph.svg) center/contain no-repeat; mask:url(img/whatsapp-glyph.svg) center/contain no-repeat} /* ---------- Reveal ---------- */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.in{opacity:1;transform:none} .cards .card:nth-child(2),.t-grid .t-card:nth-child(2),.intro .tile:nth-child(2){transition-delay:.06s} .cards .card:nth-child(3),.t-grid .t-card:nth-child(3),.intro .tile:nth-child(3){transition-delay:.12s} .cards .card:nth-child(4),.t-grid .t-card:nth-child(4){transition-delay:.18s} .t-grid .t-card:nth-child(5){transition-delay:.24s} .t-grid .t-card:nth-child(6){transition-delay:.3s} .gallery-item:nth-child(2){transition-delay:.06s} .gallery-item:nth-child(3){transition-delay:.12s} .gallery-item:nth-child(4){transition-delay:.18s} .gallery-item:nth-child(5){transition-delay:.24s} /* ---------- Responsive ---------- */ @media(max-width:980px){ /* Collapse to a clean full-screen menu early enough that tablets never cram the nav */ .nav .logo,.nav .nav-right{position:relative;z-index:2} .nav-links{position:fixed;inset:0;z-index:1;background:#28211c;flex-direction:column;justify-content:center;gap:30px;transform:translateX(100%);transition:transform .4s var(--ease)} .nav-links.open{transform:none} .nav-links a{display:block;padding:11px 20px;text-align:center} .burger{display:flex} .nav-cta{display:none} .cards{grid-template-columns:repeat(2,1fr)} .t-grid{grid-template-columns:1fr} .why-grid,.contact-grid,.gift-grid{grid-template-columns:1fr;gap:40px} .why-img{aspect-ratio:16/11;max-height:460px} .gift-grid{gap:32px} .intro .wrap{grid-template-columns:1fr;gap:18px;max-width:420px} .intro{margin-top:-54px} .foot-top{grid-template-columns:1fr 1fr;gap:34px} } @media(max-width:760px){ .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px} .gallery-item,.gallery-item.feature{grid-column:span 2;grid-row:span 1} } @media(max-width:680px){ .cards{grid-template-columns:1fr;max-width:360px;margin:0 auto} /* ---- mobile rhythm: the same sections with air that fits a 390px screen ---- */ section{padding:54px 0} .section-head{margin-bottom:34px} /* ---- guest reviews: a swipe row, like the recommendations ---- */ .testimonials .t-grid{display:flex;margin:0 -28px;padding:4px 28px 16px;gap:14px; overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none} .testimonials .t-grid::-webkit-scrollbar{display:none} .testimonials .t-grid > *{flex:0 0 82%;scroll-snap-align:center} .testimonials .t-grid > *:last-child{margin-right:28px} .testimonials .t-card{padding:26px 24px} .testimonials .t-grid .reveal{opacity:1;transform:none} /* ---- footer: was an endless ladder of links with a hole in the middle. On a phone each list folds into its heading — tap to open. Contact stays open, because a phone number and an address are what people actually come down here for. ---- */ footer{padding:44px 0 26px} .foot-top{grid-template-columns:1fr;gap:0;margin-bottom:26px} .foot-brand{margin-bottom:26px} .foot-brand p{max-width:none} .foot-col{border-top:1px solid rgba(255,255,255,.09)} .foot-col:not(.foot-contact) h4{margin:0;padding:17px 34px 17px 0;position:relative;cursor:pointer; -webkit-tap-highlight-color:transparent} .foot-col:not(.foot-contact) h4::after,.foot-col:not(.foot-contact) h4::before{content:'';position:absolute;right:4px;top:50%; background:var(--mocha-light);opacity:.85;transition:transform .3s var(--ease)} .foot-col:not(.foot-contact) h4::after{width:13px;height:1.5px;margin-top:-.75px} .foot-col:not(.foot-contact) h4::before{width:1.5px;height:13px;margin-top:-6.5px;right:9.75px} .foot-col.open h4::before{transform:rotate(90deg);opacity:0} .foot-col:not(.foot-contact) ul{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)} .foot-col.open ul{max-height:520px} .foot-col li{margin:0} .foot-col li:last-child{padding-bottom:16px} .foot-col:not(.foot-contact) a{display:block;padding:9px 0;font-size:.95rem} .foot-col.foot-contact{border-top:1px solid rgba(255,255,255,.09);padding-top:20px} .foot-contact h4{margin-bottom:14px} /* the last row fell apart into three ragged lines with the cookie link orphaned: the three links now read as one row with · separators, the copyright sits under it */ .foot-bottom{justify-content:center;text-align:center;margin-top:4px;font-size:.72rem; gap:4px 8px;padding-top:18px;align-items:center} .foot-bottom > span{order:2;flex-basis:100%;opacity:.75;margin-top:2px} .foot-bottom > a{order:1} .foot-bottom > a + a::before{content:'·';margin-right:8px;opacity:.55} /* footer brand: a whisper, not a paragraph */ .foot-brand img{height:38px;margin-bottom:12px} .foot-brand p{font-size:.87rem;line-height:1.55;opacity:.82} .social{gap:10px;margin-top:14px} .social a{width:44px;height:44px} /* contact: one tight block with even rows — it was ragged and stretched */ .foot-col.foot-contact h4{margin-bottom:11px} .foot-contact div{margin-bottom:7px;line-height:1.5;font-size:.92rem} .foot-contact div:last-child{margin-bottom:0} .foot-contact a{display:inline;padding:0} /* ---------------- density: the same words, less scrolling ---------------- */ body{font-size:.97rem;line-height:1.62} .hero p{font-size:1.01rem;line-height:1.5;margin-bottom:26px} .section-head .script{font-size:1.3rem} .section-head h2{font-size:1.68rem;margin-bottom:9px} .section-head p{font-size:.93rem;line-height:1.5} body .t-card > p{font-size:.93rem;line-height:1.58} body .bm-ben p,body .features .feature p{font-size:.88rem;line-height:1.5} body .bm-sub{margin:26px 0 14px;padding-top:20px} body .fineprint{font-size:.85rem;line-height:1.5;margin-top:16px} /* long-tail SEO text: two dense paragraphs folded behind "Číst dál" (JS adds the button) */ body section.tight .wrap > p{line-height:1.6!important;font-size:.94rem} .fold{position:relative;max-height:14.5em;overflow:hidden} .fold::after{content:'';position:absolute;left:0;right:0;bottom:0;height:5em;pointer-events:none; background:linear-gradient(to bottom,rgba(248,245,240,0),var(--cream-soft))} .fold.open{max-height:none} .fold.open::after{display:none} .fold-more{display:block;margin:14px auto 0;background:none;border:0;padding:8px 4px; font-family:inherit;font-size:.85rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--mocha-deep);cursor:pointer;-webkit-tap-highlight-color:transparent} .fold-more::after{content:'';display:inline-block;width:6px;height:6px;margin:0 0 2px 8px; border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg)} .fold-more[aria-expanded="true"]::after{transform:rotate(-135deg);margin-bottom:-2px} /* "Mohlo by se vám líbit" is a suggestion, not the main course: four full-width cards stacked cost ~2000px of scrolling before the FAQ. On a phone it becomes one swipe row with the next card peeking, so the guest can see there is more without scrolling past it. */ .related-sec .cards{display:flex;max-width:none;margin:0 -28px;padding:4px 28px 16px; gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none} .related-sec .cards::-webkit-scrollbar{display:none} .related-sec .cards .card{flex:0 0 78%;scroll-snap-align:center;max-width:none} .related-sec .cards .card:last-child{margin-right:28px} .related-sec .cards .card .card-img{height:180px;object-fit:cover} .related-sec .cards .card .reveal,.related-sec .cards .card.reveal{opacity:1;transform:none} } @media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}} /* breadcrumb + sticky mobile book-bar (detail pages) */ .crumbs{background:var(--cream-soft);border-bottom:1px solid var(--line)} .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 0;margin:0;font-size:.82rem} .crumbs li{display:flex;align-items:center;gap:8px;color:var(--muted)} .crumbs li+li::before{content:"\203A";color:var(--mocha);opacity:.75} .crumbs a{color:var(--brown);font-weight:600} .crumbs a:hover{color:var(--brown)} .crumbs li[aria-current]{color:var(--charcoal)} .bookbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;justify-content:space-between;gap:14px; padding:11px max(18px,env(safe-area-inset-right,0px)) calc(11px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -8px 24px -18px rgba(58,54,49,.5);transform:translateY(115%);transition:transform .3s cubic-bezier(0.23,1,0.32,1)} .bookbar.show{transform:translateY(0)} .bookbar .bb-price{display:flex;flex-direction:column;min-width:0} .bookbar .bb-price span{font-size:.71rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw} .bookbar .bb-price strong{font-size:1.02rem;color:var(--brown)} .bookbar .btn{padding:11px 22px;flex-shrink:0} @media(max-width:760px){ .bookbar{display:flex} /* hide the float's book ONLY where the sticky booking bar already carries booking; on pages without a bar (home, blog, hub, contact) keep the book fab as the always-on CTA — on mobile the header's Rezervovat is behind the burger, so this is the one-tap path */ body:has(.bookbar) .float .book{display:none} /* 80 % of our guests read this on a phone. A tall column of circles sat on top of the text they were reading, so on mobile the floats become one short row above the booking bar and slide away while the page scrolls down — they return the moment it stops or scrolls up. */ /* 78px of clearance is for the booking bar — while it is still hidden (the hero) the buttons just hovered in mid-air. Sit low, rise only when the bar is really there. */ .float{flex-direction:row;align-items:center;gap:10px;right:14px;bottom:18px; transition:transform .35s var(--ease),opacity .3s var(--ease),bottom .3s var(--ease)} body:has(.bookbar.show) .float{bottom:78px} .float .fab{width:46px;height:46px} .float .fab.book{width:56px;height:56px} .float .fab img{width:46px;height:46px} .float .fab[aria-label="WhatsApp"]::after{width:24px;height:24px} /* tuck only the secondary contacts while reading down — the primary book stays put */ .float.tuck .fab:not(.book){transform:translateX(120px);opacity:0;pointer-events:none} /* No reserved strip for the booking bar: it already slides away over the last 170px of the page, so this only ever showed up as dead space under the legal line. */ } /* ============ BLOG / ARTICLES ============ */ .art-hero{position:relative;padding:120px 0 34px;background:var(--cream-soft);border-bottom:1px solid var(--line);overflow:hidden} .art-hero .lotus-bg{opacity:.05} .art-hero .wrap{max-width:800px} .crumbs+.art-hero{padding-top:34px} .art-eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mocha-deep);font-weight:700} .art-hero h1{font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:1.12;margin:12px 0 14px;max-width:20ch} .art-meta{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--muted);font-size:.86rem} .art-meta span{display:inline-flex;align-items:center;gap:7px} .art-meta .dot{width:5px;height:5px;border-radius:50%;background:var(--mocha)} .article{max-width:720px;margin:0 auto;padding:44px 24px 20px;font-size:1.06rem;line-height:1.75;color:var(--charcoal)} .article>p:first-of-type{font-size:1.16rem;line-height:1.7;color:var(--ink)} .article h2{font-family:'Candara',sans-serif;font-size:1.5rem;color:var(--ink);margin:38px 0 12px;line-height:1.25;letter-spacing:-.01em} .article h3{font-size:1.16rem;color:var(--brown);margin:26px 0 8px} .article p{margin:0 0 16px} .article ul,.article ol{margin:0 0 18px;padding-left:22px;display:flex;flex-direction:column;gap:8px} .article li{line-height:1.65} .article a{color:var(--mocha-deep);font-weight:600;border-bottom:1px solid var(--line-2)} .article a:hover{color:var(--brown);border-color:var(--mocha)} .article strong{color:var(--ink)} .article blockquote{margin:22px 0;padding:14px 22px;border-left:3px solid var(--mocha);background:var(--cream-soft);border-radius:0 8px 8px 0;color:var(--brown-ink);font-style:italic} .article .lead-note{background:var(--cream-soft);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;font-size:.97rem;color:var(--muted);margin:0 0 26px} /* in-article book CTA */ .book-cta{max-width:720px;margin:36px auto;padding:26px 28px;background:var(--mocha);color:#fff;border-radius:var(--radius);display:flex;gap:22px;align-items:center;flex-wrap:wrap;box-shadow:0 16px 40px -26px rgba(58,54,49,.6)} .book-cta .bc-txt{flex:1;min-width:220px} .book-cta h3{color:#fff;font-size:1.28rem;margin:0 0 4px} .book-cta p{margin:0;color:rgba(255,255,255,.9);font-size:.95rem} .book-cta .btn{background:#fff;color:var(--brown);flex:none} .book-cta .btn:hover{background:var(--cream)} /* recommended reading */ .recommended{max-width:960px;margin:10px auto 0;padding:0 24px} .recommended .rc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:760px){.recommended .rc-grid{grid-template-columns:1fr}} .rc{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;transition:transform .2s ease,box-shadow .2s ease} .rc.rc:hover{transform:translateY(-3px);box-shadow:0 16px 34px -26px rgba(58,54,49,.5)} .rc .rc-tag{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mocha);font-weight:700} .rc h4{font-size:1rem;color:var(--ink);margin:7px 0 5px;line-height:1.3} .rc p{font-size:.86rem;color:var(--muted);margin:0} /* elevated landing pages: immersive photo hero + photo recommended cards (opt-in via .photo) */ .art-hero.photo{padding:0;min-height:clamp(360px,46vh,480px);display:flex;align-items:flex-end;background-color:#1c1512;background-size:cover;background-position:center;border-bottom:0} /* serve the portrait/mobile hero variant on phones (80% of traffic) — half the bytes of the landscape file */ @media(max-width:700px){.art-hero.photo{background-image:var(--hero-p,var(--hero-l))!important}} /* the middle of the gradient was almost clear, so an eyebrow landing on a bright part of the photo (a white robe, a towel) washed out — hold a floor of contrast all the way down */ .art-hero.photo::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(24,18,14,.5) 0%,rgba(24,18,14,.3) 40%,rgba(24,18,14,.88) 100%)} .art-hero.photo .wrap{position:relative;z-index:2;padding:106px 24px 40px} .art-hero.photo .art-eyebrow{color:var(--mocha-light)} .art-hero.photo h1{color:#fff} .art-hero.photo .art-meta{color:rgba(255,255,255,.82)} .art-hero.photo .art-meta .dot{background:var(--mocha-light)} .rc.photo{padding:0;overflow:hidden} .rc.photo .rc-img{height:152px;background-size:cover;background-position:center;transition:transform .6s var(--ease)} .rc.photo:hover .rc-img{transform:scale(1.05)} .rc.photo .rc-body{padding:16px 20px 20px} /* editorial: inline article figure */ .art-fig{margin:32px auto;max-width:820px;border-radius:var(--radius);overflow:hidden;box-shadow:0 22px 54px -34px rgba(58,54,49,.55)} .art-fig img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover} .art-fig figcaption{font-size:.82rem;color:var(--muted);text-align:center;padding:11px 16px 0;font-style:italic} /* ===== BLOG editorial refinement — global, all articles; light palette, no per-file edits ===== */ /* warmer, intentional hero (text stays dark — safe in light mode) */ .art-hero:not(.photo){padding:116px 0 42px;background: radial-gradient(1100px 360px at 50% -46%, rgba(173,143,120,.16), transparent 72%), linear-gradient(180deg, var(--cream-soft) 0%, #fbf9f6 100%)} .crumbs+.art-hero:not(.photo){padding-top:30px} .art-hero:not(.photo) .art-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(173,143,120,.13); padding:6px 14px;border-radius:100px} .art-hero:not(.photo) .art-eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--mocha)} .art-hero:not(.photo) h1{margin-top:18px} .art-hero:not(.photo) .art-meta{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)} /* signature "key takeaway" callout (the Ve zkratce / In short box) */ .article .lead-note{position:relative;background:linear-gradient(180deg,var(--cream-soft),#faf6f2); border:1px solid var(--line);border-left:3px solid var(--mocha);border-radius:0 var(--radius) var(--radius) 0; padding:18px 22px 18px 24px;color:var(--brown-ink);font-size:1rem;box-shadow:0 16px 38px -30px rgba(58,54,49,.55)} /* section scan-rhythm: small accent rule above each h2 */ .article h2{position:relative} .article h2::before{content:'';display:block;width:34px;height:3px;border-radius:2px;background:var(--mocha);opacity:.85;margin-bottom:15px} .article h2:first-of-type::before{margin-top:4px} /* branded diamond list markers (matches the site .mk motif) */ .article ul{list-style:none;padding-left:2px} .article ul li{position:relative;padding-left:26px} .article ul li::before{content:'';position:absolute;left:3px;top:.6em;width:8px;height:8px;background:var(--mocha);transform:rotate(45deg);border-radius:1px} /* richer in-article CTA */ .book-cta{background:linear-gradient(135deg,var(--mocha) 0%,var(--brown) 100%)} /* cinematic band shared (landings + articles) */ .exp{position:relative;min-height:clamp(400px,52vh,540px);display:flex;align-items:center;background:#1c1512;overflow:hidden;padding:0;margin:8px 0} .exp-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0} .exp::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(24,18,14,.92) 0%,rgba(24,18,14,.72) 38%,rgba(24,18,14,.3) 68%,rgba(24,18,14,.05) 100%)} .exp .wrap{position:relative;z-index:2} .exp-text{max-width:560px} .exp-text .script{color:var(--mocha-light);font-size:clamp(1.5rem,2.6vw,2rem);display:block;line-height:1.05} .exp-text h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.16;margin:6px 0 18px} .exp-text p{color:rgba(255,255,255,.88);font-size:clamp(1.02rem,1.6vw,1.18rem);line-height:1.8} @media(max-width:820px){.exp::after{background:linear-gradient(180deg,rgba(24,18,14,.5) 0%,rgba(24,18,14,.8) 60%,rgba(24,18,14,.92) 100%)}.exp-photo{object-position:70% center}} /* article continuation after a full-bleed band */ .article.cont{padding-top:40px} .article.cont>p:first-of-type{font-size:1.06rem;line-height:1.75;color:var(--charcoal)} /* premium landing: two-column body with sticky booking rail */ .art-wrap{max-width:1080px;margin:0 auto;padding:46px 24px 24px;display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:52px;align-items:start} @media(max-width:920px){.art-wrap{grid-template-columns:1fr;gap:4px;padding-top:36px}} .art-wrap>.article{max-width:none;margin:0;padding:0} .art-rail{position:sticky;top:96px} @media(max-width:920px){.art-rail{position:static;margin:16px 0 6px}} .rail-card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--mocha);border-radius:var(--radius);box-shadow:0 26px 60px -38px rgba(58,54,49,.5);padding:26px 24px} .rail-card .rc-price{font-size:1.5rem;font-weight:700;color:var(--brown);line-height:1} .rail-card h3{font-size:1.12rem;margin:5px 0 16px} .rail-facts{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:10px} .rail-facts li{display:flex;gap:10px;font-size:.9rem;color:var(--charcoal);line-height:1.4} .rail-facts li::before{content:'';flex:none;width:17px;height:17px;margin-top:1px;border-radius:50%;background:var(--mocha) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/10px no-repeat} .rail-card .btn{width:100%} .rail-proof{text-align:center;font-size:.82rem;color:var(--muted);margin-top:14px} .rail-proof .st{color:var(--mocha);letter-spacing:.08em} .rail-kicker{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mocha-deep);font-weight:700;display:block} .rail-card h3{font-size:1.1rem;margin:5px 0 16px;line-height:1.28} .rail-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;transition:border-color .2s,background .2s,box-shadow .2s,transform .15s var(--ease)} @media(hover:hover){.rail-opt:hover{border-color:var(--mocha);background:#fbf8f5;box-shadow:0 8px 20px -14px rgba(58,54,49,.5)}} .rail-opt:active{transform:scale(.99)} .rail-opt .ro-info{display:flex;flex-direction:column;gap:2px;min-width:0} .rail-opt .ro-nm{font-weight:700;font-size:.92rem;color:var(--charcoal);line-height:1.25} .rail-opt .ro-price{font-size:.82rem;font-weight:700;color:var(--brown)} .rail-opt .ro-go{flex:none;width:30px;height:30px;border-radius:50%;background:var(--mocha);display:grid;place-items:center;transition:background .2s,transform .2s} .rail-opt .ro-go svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round} @media(hover:hover){.rail-opt:hover .ro-go{background:var(--brown);transform:translateX(2px)}} .rail-facts-mini{font-size:.79rem;color:var(--muted);text-align:center;margin:15px 0 2px;line-height:1.55} /* internal linking: related guides (topical cluster) */ .related-guides{max-width:960px;margin:0 auto;padding:6px 24px 8px} .rg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:760px){.rg-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}} .rg{display:block;background:var(--cream-soft);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease} @media(hover:hover){.rg.rg:hover{transform:translateY(-3px);box-shadow:0 16px 34px -26px rgba(58,54,49,.5);border-color:var(--mocha-light)}} .rg h4{font-size:1rem;color:var(--charcoal);margin:0 0 5px;line-height:1.3} .rg h4::after{content:' →';color:var(--mocha-deep)} .rg p{font-size:.86rem;color:var(--muted);margin:0;line-height:1.5} .art-toc{max-width:720px;margin:0 auto 8px;padding:16px 24px} /* header gutter: per-page `.nav{padding:Xpx 0}` zeroed the .wrap side padding → logo + burger sat flush on the screen edge below ~1240px (mobile/tablet/small laptops). Restore the gutter (matches homepage). */ header .nav.wrap,header.scrolled .nav.wrap{padding-left:28px;padding-right:28px} @media(max-width:400px){header .nav.wrap,header.scrolled .nav.wrap{padding-left:20px;padding-right:20px}} /* ESCAPE Club account shortcut in every header (13 Sep) — icon + "Účet" on desktop, icon only on mobile */ .nav-acct{display:flex;align-items:center;gap:6px;font-size:.7rem;letter-spacing:.1em;font-weight:700;text-transform:uppercase;color:rgba(255,255,255,.78);transition:color .3s var(--ease)}.nav-acct svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}.nav-acct:hover{color:#fff}@media(max-width:980px){.nav-acct span{display:none}.nav-acct svg{width:22px;height:22px}} /* hero rating line: score + claim as two unbreakable groups; stacked on phones (13 Sep) */ div.hero-trust{column-gap:10px;row-gap:5px}div.hero-trust .ht-score{white-space:nowrap;display:inline}div.hero-trust .ht-score .st{margin-right:4px}div.hero-trust .ht-sep{opacity:.7}div.hero-trust .ht-claim{text-align:center}@media(max-width:560px){div.hero-trust{flex-direction:column;align-items:center}div.hero-trust .ht-sep{display:none}} /* article/landing heroes are left-aligned → keep the rating on the same left edge */ .art-hero div.hero-trust .ht-claim{text-align:left}@media(max-width:560px){.art-hero div.hero-trust{align-items:flex-start}} /* phones: the nowrap hero CTA ("Rezervovat online — od 2 190 Kč") was wider than the screen and pushed the whole hero 24px off-centre → let it wrap and keep the hero column inside the viewport (13 Sep) */ @media(max-width:480px){.hero .hero-inner{min-width:0;max-width:100%}.hero .btn{white-space:normal;text-align:center;padding-left:20px;padding-right:20px;letter-spacing:.14em;line-height:1.45}} /* photo article-hero is a flex container → its .wrap shrank to its content and centred itself (text indented ~50px on phones) */ .art-hero.photo .wrap{width:100%} .art-hero .hero-cta{justify-content:flex-start} /* the img height attribute (e.g. 1013) won over aspect-ratio → article figures rendered 338×1013 on phones (zoomed chin shot) */ .art-fig img{height:auto} /* portrait article photo (e.g. reflexni-masaz oil-over-feet): narrower, 4:5 instead of a harsh 16:9 crop */ .art-fig.portrait{max-width:440px}.art-fig.portrait img{aspect-ratio:4/5} /* ── visual QA 18 Sep ── */ .related-guides{padding-bottom:72px!important} .recommended{padding-bottom:72px!important} .hero .script{text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 24px rgba(0,0,0,.55)!important} p.reveal + p.reveal{margin-top:1em} .htable .p{white-space:nowrap} @media(max-width:600px){.htable .hrow{grid-template-columns:minmax(0,1fr) 74px 74px!important;gap:8px!important;padding:14px 14px!important}} .art-meta{align-items:center} @media(max-width:600px){.art-meta .dot{display:none}.art-meta{gap:4px 16px}} /* ── contrast 19 Sep: white text on the brand mocha (#ad8f78) was 3.01:1; WCAG AA needs 4.5:1 for small text. Same hue, a step darker (#8c6c55 = 4.78:1). Only surfaces that carry WHITE TEXT change — accents, icons and lines keep --mocha. */ :root{--cta:#8c6c55} .btn-primary{background:var(--cta)!important} .btn-primary:hover{background:var(--brown)!important} .btn-outline:hover,.card:hover a.btn-outline{background:var(--cta)!important;border-color:var(--cta)!important;color:#fff!important} .card .badge,.vt-badge,.pbadge,.feat-tag,.tl-n,.stack-card.plus .stack-tag,.steps3 .tile .num, .ptable-head .dl.pop .tag,.pcell.m-pop .mtag,.t-rating{background-color:var(--cta)!important} .book-cta{background:linear-gradient(135deg,var(--cta) 0%,var(--brown) 100%)!important} /* headings break evenly instead of leaving one word alone on the last line; paragraphs avoid a lone last word */ h1,h2,h3,h4,.hero h1{text-wrap:balance} p,li,.lead{text-wrap:pretty} /* iOS Safari paints button text system-blue unless a colour is set */ button{color:inherit} /* 19 Sep: page-hero pages (ceník, Escape Club, o nás) — hero kicker in the same script face as every other hero */ .page-hero .ph-inner>.script{font-family:'Luxurious Script',cursive!important;text-transform:none!important;letter-spacing:.01em!important;font-weight:400!important;font-size:clamp(1.9rem,4.4vw,2.9rem)!important;display:block;margin-bottom:10px;color:var(--mocha-light);text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 24px rgba(0,0,0,.55)} /* 20 Sep (owner: uppercase kickers felt soulless) — section kickers back in the script face, at a size where Czech diacritics stay legible. Hero kickers keep their own larger rule. */ .script{font-family:'Luxurious Script',cursive!important;text-transform:none!important;letter-spacing:.01em!important;font-weight:400!important;font-size:clamp(2.05rem,3.2vw,2.6rem)!important;color:var(--mocha);line-height:1!important;display:block;margin-bottom:4px} .hero .script,.page-hero .ph-inner>.script{font-size:clamp(1.9rem,4.4vw,2.9rem)!important;color:var(--mocha-light)} /* 20 Sep mobile pass (90 % of guests are on phones) */ @media(max-width:760px){ /* header: 44px thumb targets without changing the look */ .lang a,.nav-acct{position:relative} .lang a::after,.nav-acct::after{content:'';position:absolute;inset:-15px -8px} /* massage cards: the two buttons side by side → each card ~60px shorter */ .cards .card .card-cta{flex-direction:row!important} .cards .card .card-cta .btn{padding:12px 6px;font-size:.68rem;letter-spacing:.06em} } /* ============================================================ PREMIUM BLOG COMPONENTS (v2 elite) — quick-answer, callouts, key-takeaways. On-brand mocha/cream, calm, mobile-first. Used across blog articles + landing article bodies. ============================================================ */ .article .qa{position:relative;margin:0 0 30px;padding:20px 22px 20px 24px; background:linear-gradient(180deg,var(--cream-soft),#faf6f2); border:1px solid var(--line);border-left:3px solid var(--mocha); border-radius:0 12px 12px 0;box-shadow:0 14px 32px -28px rgba(58,54,49,.5)} .article .qa .qa-l{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase; color:var(--mocha-deep);font-weight:700;margin-bottom:7px} .article .qa p{margin:0;font-size:1.02rem;line-height:1.72;color:var(--brown-ink)} .article .qa p+p{margin-top:9px} .article .qa strong{color:var(--brown)} /* callouts: tip / caution / note */ .article .cal{display:flex;gap:14px;align-items:flex-start;margin:24px 0; padding:16px 18px;border-radius:12px;border:1px solid var(--line); background:var(--cream-soft);font-size:.97rem;line-height:1.66;color:var(--brown-ink)} .article .cal .cal-b{flex:1;min-width:0} .article .cal .cal-b>*:first-child{margin-top:0}.article .cal .cal-b>*:last-child{margin-bottom:0} .article .cal .cal-b strong{color:var(--brown)} .article .cal::before{flex:none;width:26px;height:26px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:Georgia,serif;font-weight:700;font-size:.95rem;color:#fff;margin-top:1px} .article .cal.tip{background:linear-gradient(180deg,#f4efe8,#faf6f1);border-color:var(--line-2)} .article .cal.tip::before{content:'\2713';background:var(--mocha)} /* ✓ */ .article .cal.warn{background:linear-gradient(180deg,#fbf3e7,#fdf8f0);border-color:#eeddc3} .article .cal.warn::before{content:'!';background:#a86518} /* caution amber */ .article .cal.note{background:var(--cream-soft);border-color:var(--line)} .article .cal.note::before{content:'i';font-family:Georgia,serif;font-style:italic;background:var(--brown)} /* key-takeaways card */ .article .kt{margin:30px 0;padding:22px 24px;background:#fff;border:1px solid var(--line); border-radius:14px;box-shadow:0 18px 40px -32px rgba(58,54,49,.5)} .article .kt h3{margin:0 0 12px;font-size:1.08rem;color:var(--brown)} .article .kt h3::after{content:'';display:block;width:30px;height:2px;background:var(--mocha); border-radius:2px;margin-top:9px;opacity:.85} .article .kt ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .article .kt li{position:relative;padding-left:28px;font-size:.98rem;line-height:1.6;color:var(--brown-ink)} .article .kt li::before{content:'\2713';position:absolute;left:0;top:0; width:19px;height:19px;border-radius:50%;background:var(--cream);color:var(--mocha-deep); font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center; border:1px solid var(--line-2)} .article .kt li strong{color:var(--brown)} @media(max-width:520px){ .article .qa{padding:16px 18px} .article .cal{padding:14px 15px;gap:11px} .article .kt{padding:18px 18px} } /* ============================================================ BLOG v2 — readability & component polish (universal) ============================================================ */ /* airier, calmer body rhythm */ .art-shell .article{font-size:1.04rem} .art-shell .article>p{line-height:1.8;margin:0 0 20px} .art-shell .article h2{margin-top:52px} .art-shell .article h2+p{margin-top:0} /* softer, more elegant list marker (overrides the heavy diamond) */ .article ul li{padding-left:24px} .article ul li::before{content:'';position:absolute;left:4px;top:.66em;width:6px;height:6px; background:var(--mocha);border-radius:50%;transform:none;opacity:.9} .article ul li::marker{content:''} /* lists inside callouts: quieter markers, tighter */ .article .cal .cal-b ul{margin:10px 0 0;padding-left:2px;gap:9px} .article .cal .cal-b li{padding-left:20px} .article .cal .cal-b li::before{width:5px;height:5px;top:.6em;left:3px;opacity:.85} .article .cal.warn .cal-b li::before{background:#c98a3a} .article .cal .cal-b strong:first-child{display:inline-block;margin-bottom:2px} /* key-takeaways: a touch more air */ .article .kt li{line-height:1.62} /* ============================================================ BLOG v2 — byline, mobile jump-nav, sticky action bar, callout labels ============================================================ */ /* trust byline */ .article .art-byline{margin:0 0 24px;padding-bottom:15px;border-bottom:1px solid var(--line); font-size:.85rem;line-height:1.5;color:var(--muted)} .article .art-byline .by-n{color:var(--brown);font-weight:700} .article .art-byline .by-note::before{content:'·';margin:0 7px;color:var(--mocha)} /* callout eyebrow labels (language-aware, no HTML needed) */ .article .cal .cal-b::before{display:block;font-size:.62rem;letter-spacing:.15em;text-transform:uppercase; font-weight:700;margin-bottom:5px} html[lang="cs"] .article .cal.tip .cal-b::before{content:'Tip';color:var(--mocha-deep)} html[lang="cs"] .article .cal.warn .cal-b::before{content:'Pozor';color:#b3781f} html[lang="cs"] .article .cal.note .cal-b::before{content:'Poznámka';color:var(--brown)} html[lang="en"] .article .cal.tip .cal-b::before{content:'Tip';color:var(--mocha-deep)} html[lang="en"] .article .cal.warn .cal-b::before{content:'Caution';color:#b3781f} html[lang="en"] .article .cal.note .cal-b::before{content:'Note';color:var(--brown)} /* mobile jump-nav (desktop uses the sticky rail TOC instead) */ .art-jump{display:none} @media(max-width:960px){ .art-jump{display:block;margin:2px 0 28px;background:var(--cream-soft);border:1px solid var(--line);border-radius:12px;overflow:hidden} .art-jump summary{list-style:none;cursor:pointer;padding:14px 16px;font-family:'Candara','Segoe UI',sans-serif; font-weight:700;color:var(--brown);font-size:.95rem;display:flex;justify-content:space-between;align-items:center} .art-jump summary::-webkit-details-marker{display:none} .art-jump summary::after{content:'+';color:var(--mocha);font-size:1.25rem;font-weight:400;line-height:1} .art-jump[open] summary::after{content:'\2013'} .art-jump ul{list-style:none;margin:0;padding:0 16px 10px} .art-jump li{padding:0;margin:0} .art-jump li::before{display:none} .art-jump a{display:block;padding:10px 0;color:var(--brown-ink);font-size:.93rem;border-top:1px solid var(--line)} .art-jump li:first-child a{border-top:0} } /* sticky mobile action bar */ .mbar{display:none} @media(max-width:960px){ body.has-mbar .float{display:none} /* avoid duplicate booking CTAs on articles */ .mbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:130;display:flex;gap:10px;align-items:stretch; transform:translateY(150%);transition:transform .32s var(--ease);pointer-events:none} .mbar.show{transform:translateY(0);pointer-events:auto} .mbar-wa{flex:none;width:54px;display:flex;align-items:center;justify-content:center;background:var(--mocha-deep);color:#fff; border-radius:14px;box-shadow:0 12px 28px -12px rgba(58,54,49,.5)} .mbar-wa svg{width:26px;height:26px} .mbar-book{flex:1;display:flex;align-items:center;justify-content:center;padding:16px 20px;border-radius:14px; background:linear-gradient(135deg,var(--cta),var(--brown));color:#fff;font-weight:700;font-size:1rem; letter-spacing:.05em;text-transform:uppercase;box-shadow:0 14px 30px -12px rgba(58,54,49,.75)} } /* ── desktop fix 1 Oct 2026 — mobile untouched ── DESKTOP-ONLY fixes 1 Oct 2026 — phones/tablets untouched. Every block below is a min-width query of 900 px or more, so the phone layout (<=760 float row, <=960 mbar / jump-nav, <=980 burger) cannot change. */ /* [NAV] HH-1 + products-nav-wrap + blog-4 + other-5 (merged). From 981 to 1199 px the desktop row (logo, 5 links, CZ/EN, Účet, CTA) needs about 1200 px, so labels wrapped onto 2 lines, the logo was squeezed and the EN flag sat over CZ. Pre-existing since 9bd38ff. The #header prefix is REQUIRED: cenik-masazi, o-nas, escape-club, en/about-us, en/escape-club and en/massage-price-list repeat .nav / .nav-links / .nav-links a in their own inline