/* ========================================================= studio PM cuts & shave — stylesheet (tmavá varianta) Paleta: lesní zeleň + mosaz + krémová (dle značky PM) Písmo: Jost (geometrický grotesk dle loga a ceníku PM) ========================================================= */ :root{ --bg: #0c1613; --bg-2: #102019; --surface: #15281f; --surface-2: #1c3328; --line: rgba(217,180,106,.18); --line-soft: rgba(120,200,170,.10); --gold: #d9b46a; --gold-2: #c79c52; --green: #248a6e; --green-deep:#16493d; --txt: #f3efe6; --txt-soft: #c7cbc6; --muted: #8b938e; --serif: 'Cormorant Garamond', Georgia, serif; --head: 'Jost', 'Century Gothic', system-ui, sans-serif; --body: 'Inter', system-ui, -apple-system, sans-serif; --maxw: 1180px; --r: 14px; --shadow: 0 24px 60px rgba(0,0,0,.45); --ease: cubic-bezier(.22,.61,.36,1); } /* ---------- Reset ---------- */ *{margin:0;padding:0;box-sizing:border-box} /* overflow-x i na — zavřené off-canvas menu jinak roztahuje stránku do šířky */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden} body{ font-family:var(--body); background: radial-gradient(1200px 700px at 100% 0%, rgba(36,138,110,.10), transparent 55%), radial-gradient(900px 600px at 0% 100%, rgba(22,73,61,.16), transparent 55%), var(--bg); background-attachment:fixed; color:var(--txt); line-height:1.7; font-size:16px; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul{list-style:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} section{position:relative} .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px} /* ---------- Typografie ---------- */ .eyebrow{ display:inline-block; font-family:var(--head); text-transform:uppercase; letter-spacing:.32em; font-size:.72rem; font-weight:400; color:var(--gold); margin-bottom:18px; position:relative; padding-left:42px; } .eyebrow::before{ content:"";position:absolute;left:0;top:50%; width:30px;height:1px;background:var(--gold);transform:translateY(-50%); } .eyebrow--plain{padding-left:0} .eyebrow--plain::before{display:none} .h2{ font-family:var(--head); font-weight:300; font-size:clamp(2rem,4.5vw,3.1rem); line-height:1.08; text-transform:uppercase; letter-spacing:.1em; margin-bottom:18px; } .section{padding:104px 0} .section__head{max-width:700px;margin:0 auto 56px;text-align:center} .section__head .eyebrow{padding-left:0} .section__head .eyebrow::before{display:none} .section__sub{color:var(--muted);font-size:1.05rem} .ic{width:1em;height:1em;fill:currentColor;display:inline-block;vertical-align:middle} /* nadpis jen pro čtečky a vyhledávače (drží správnou hierarchii H1→H2→H3) */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ---------- Tlačítka ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-family:var(--head);text-transform:uppercase;letter-spacing:.18em; font-weight:400;font-size:.82rem; padding:14px 30px;border-radius:50px; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s; white-space:nowrap; } .btn--lg{padding:17px 40px;font-size:.88rem} .btn--gold{ background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#1a1407; box-shadow:0 10px 26px rgba(217,180,106,.28); } .btn--gold:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(217,180,106,.42)} .btn--ghost{border:1px solid rgba(255,255,255,.28);color:var(--txt)} .btn--ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)} .link-arrow{ font-family:var(--head);text-transform:uppercase;letter-spacing:.2em; font-size:.78rem;color:var(--gold);transition:gap .25s,color .25s; display:inline-flex;align-items:center;gap:.4em; } .link-arrow:hover{color:var(--txt);gap:.7em} /* ---------- Topbar ---------- */ .topbar{ background:#08100d; border-bottom:1px solid var(--line-soft); font-size:.8rem;color:var(--muted); } .topbar__inner{display:flex;align-items:center;gap:16px;height:42px;justify-content:center;flex-wrap:wrap} .topbar__item{display:inline-flex;align-items:center;gap:7px} .topbar__item .ic{color:var(--gold);font-size:.95rem} .topbar__sep{opacity:.4} .topbar__phone{transition:color .2s} .topbar__phone:hover{color:var(--gold)} /* ---------- Header ---------- */ .header{ position:sticky;top:0;z-index:100; border-bottom:1px solid var(--line-soft); transition:box-shadow .3s; } /* Pozadí + rozostření na pseudoelementu: backdrop-filter přímo na .header by z hlavičky udělal containing block pro position:fixed a off-canvas menu uvnitř by se pozicovalo vůči hlavičce místo vůči oknu. */ .header::before{ content:"";position:absolute;inset:0;z-index:-1; background:rgba(12,22,19,.84); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:background .3s; } .header.is-scrolled::before{background:rgba(8,16,13,.97)} .header.is-scrolled{box-shadow:0 10px 30px rgba(0,0,0,.4)} .header__inner{display:flex;align-items:center;justify-content:space-between;height:82px;transition:height .3s var(--ease)} .header.is-scrolled .header__inner{height:70px} /* ---------- Logo (dle značky PM) ---------- */ .brand{display:inline-flex;align-items:center} .brand__lock{display:flex;flex-direction:column;align-items:center;line-height:1} .brand__top,.brand__bottom{ font-family:var(--head);font-weight:300; text-transform:lowercase;color:var(--txt); font-size:.6rem;letter-spacing:.62em; text-indent:.62em; } .brand__pm{ font-family:var(--head);font-weight:500; font-size:1.72rem;letter-spacing:.02em;line-height:1; color:var(--txt);margin:.12em 0 .16em; } .brand__bottom{font-size:.53rem;letter-spacing:.46em;text-indent:.46em} .header.is-scrolled .brand__pm{font-size:1.5rem} .brand--footer .brand__top,.brand--footer .brand__bottom,.brand--footer .brand__pm{color:var(--txt)} .nav{display:flex;align-items:center;gap:4px} .nav__link{ font-family:var(--head);text-transform:uppercase;letter-spacing:.16em; font-size:.78rem;font-weight:400;color:var(--txt-soft);padding:10px 13px;border-radius:8px; transition:color .2s; } .nav__link:hover{color:var(--gold)} .nav__cta{margin-left:12px} .burger{display:none;width:42px;height:42px;flex-direction:column;justify-content:center;gap:5px;align-items:center} .burger span{display:block;width:24px;height:2px;background:var(--txt);transition:transform .3s,opacity .3s} .burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.is-open span:nth-child(2){opacity:0} .burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---------- Hero ---------- */ .hero{ min-height:calc(100vh - 124px); display:flex;align-items:center; overflow:hidden; background:#0a120f; } .hero__bg{ position:absolute;inset:0; background:url("../images/hero.jpg") center/cover no-repeat; transform:scale(1.04); filter:saturate(.9); } .hero__overlay{ position:absolute;inset:0; background: linear-gradient(100deg, rgba(8,16,13,.95) 0%, rgba(10,20,16,.88) 42%, rgba(12,28,22,.62) 70%, rgba(12,28,22,.5) 100%), radial-gradient(900px 520px at 12% 110%, rgba(22,73,61,.5), transparent 60%); } .hero__deco{ position:absolute;z-index:1;pointer-events:none; right:6%;top:50%;transform:translateY(-50%) rotate(-12deg); width:min(42vw,520px);color:var(--gold); opacity:.14; filter:drop-shadow(0 0 40px rgba(0,0,0,.5)); } .hero__deco svg{width:100%;height:auto} .hero__inner{position:relative;z-index:2;padding-top:40px;padding-bottom:40px} .hero__content{max-width:700px} .hero__title{ font-family:var(--head);font-weight:200; text-transform:uppercase; font-size:clamp(2.6rem,7.4vw,5.2rem); line-height:1.02;letter-spacing:.06em;margin-bottom:26px; } .hero__title span{ color:var(--gold); font-family:var(--serif); font-style:italic; text-transform:none; font-weight:500; letter-spacing:0; display:inline-block; } .hero__lead{font-size:1.15rem;color:var(--txt-soft);max-width:560px;margin-bottom:36px} .hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:42px} .hero__rating{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .stars{color:var(--gold);letter-spacing:.12em;font-size:1.1rem} .hero__rating strong{font-family:var(--head);font-size:1.25rem;letter-spacing:.06em;font-weight:400} .hero__rating-sub{color:var(--muted);font-size:.88rem} .hero__scroll{ position:absolute;left:50%;bottom:26px;transform:translateX(-50%); width:26px;height:42px;border:2px solid rgba(255,255,255,.3);border-radius:14px;z-index:2; } .hero__scroll span{ position:absolute;left:50%;top:8px;width:4px;height:8px;border-radius:3px;background:var(--gold); transform:translateX(-50%);animation:scroll 1.8s infinite; } @keyframes scroll{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,14px)}100%{opacity:0}} /* ---------- Pruh výhod ---------- */ .strip{background:linear-gradient(180deg,#11231b,#0f1d17);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)} .strip__grid{display:grid;grid-template-columns:repeat(4,1fr)} .strip__item{padding:42px 28px;border-right:1px solid var(--line-soft);transition:background .3s} .strip__item:last-child{border-right:none} .strip__item:hover{background:var(--surface)} .strip__ic{width:36px;height:36px;fill:var(--gold);margin-bottom:16px} .strip__item h3{font-family:var(--head);font-weight:400;text-transform:uppercase;letter-spacing:.14em;font-size:.95rem;margin-bottom:10px} .strip__item p{color:var(--muted);font-size:.92rem;line-height:1.6} /* ---------- O studiu ---------- */ .about__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .about__media{position:relative;height:520px} .about__photo{ position:absolute;border-radius:var(--r);box-shadow:var(--shadow); object-fit:cover; } .about__photo--1{width:66%;height:78%;top:0;left:0} .about__photo--2{width:56%;height:56%;bottom:0;right:0;border:6px solid var(--bg)} .about__badge{ position:absolute;left:2%;bottom:6%;z-index:3; background:var(--surface);border:1px solid var(--line); border-radius:14px;padding:16px 22px;box-shadow:var(--shadow); display:flex;flex-direction:column; } .about__badge-num{font-family:var(--head);font-size:1.6rem;color:var(--gold);line-height:1;font-weight:400} .about__badge-txt{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.14em} .about__text p{color:var(--txt-soft);margin-bottom:16px} .ticklist{margin:24px 0 28px;display:grid;gap:12px} .ticklist li{position:relative;padding-left:34px;color:var(--txt-soft)} .ticklist li::before{ content:"";position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%; background:var(--green); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat; } /* ---------- Služby ---------- */ .services{background: radial-gradient(800px 400px at 90% 0%, rgba(36,138,110,.10), transparent 60%), var(--bg-2)} .services__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .scard{ background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r); padding:36px 28px;transition:transform .3s var(--ease),border-color .3s,background .3s; position:relative;overflow:hidden;display:flex;flex-direction:column; } .scard::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--gold);transition:width .35s var(--ease)} .scard:hover{transform:translateY(-6px);border-color:var(--line);background:var(--surface-2)} .scard:hover::after{width:100%} .scard__ic{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;background:rgba(36,138,110,.18);margin-bottom:20px} .scard__ic svg{width:26px;height:26px;fill:var(--gold)} .scard h3{font-family:var(--head);font-weight:400;text-transform:uppercase;letter-spacing:.12em;font-size:1.02rem;margin-bottom:12px} .scard p{color:var(--muted);font-size:.92rem;margin-bottom:20px;flex:1} .scard__link{ font-family:var(--head);text-transform:uppercase;letter-spacing:.16em; font-size:.72rem;color:var(--gold);transition:gap .25s,color .25s; display:inline-flex;align-items:center;gap:.35em; } .scard__link:hover{color:var(--txt);gap:.6em} /* ---------- Rezervace / ceník ---------- */ .booking__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:940px;margin:0 auto} .bstep{ background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r); padding:34px 28px;position:relative;transition:border-color .3s,transform .3s var(--ease); } .bstep:hover{border-color:var(--line);transform:translateY(-4px)} .bstep__num{ font-family:var(--head);font-size:2.4rem;font-weight:200; color:var(--gold);opacity:.5;line-height:1;display:block;margin-bottom:14px; } .bstep h3{font-family:var(--head);font-weight:400;text-transform:uppercase;letter-spacing:.12em;font-size:1rem;margin-bottom:8px} .bstep p{color:var(--muted);font-size:.92rem} .booking__cta{text-align:center;margin-top:46px} .booking__note{color:var(--muted);font-size:.9rem;margin-top:20px} .booking__note a{color:var(--gold);transition:color .2s} .booking__note a:hover{color:var(--txt)} /* ---------- Tým ---------- */ .team{background:var(--bg-2)} .team__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;max-width:820px;margin:0 auto} .tcard{ display:flex;gap:24px;align-items:center; background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r); padding:28px;transition:transform .3s var(--ease),border-color .3s; } .tcard:hover{transform:translateY(-5px);border-color:var(--line)} .tcard__photo{ width:112px;height:112px;flex-shrink:0;border-radius:14px; display:grid;place-items:center;position:relative;overflow:hidden; border:1px solid var(--line); } .tcard__photo--p{background:linear-gradient(135deg,var(--green),var(--green-deep))} .tcard__photo--m{background:linear-gradient(135deg,#26342f,#10211c)} .tcard__initial{font-family:var(--head);font-size:2.6rem;color:var(--gold);font-weight:300} .tcard__body h3{font-family:var(--head);font-weight:400;text-transform:uppercase;letter-spacing:.16em;font-size:1.2rem} .tcard__role{display:block;color:var(--gold);font-size:.74rem;text-transform:uppercase;letter-spacing:.2em;margin:6px 0 10px} .tcard__body p{color:var(--muted);font-size:.92rem;margin-bottom:12px} .tcard__phone{font-family:var(--head);letter-spacing:.1em;color:var(--txt);transition:color .2s} .tcard__phone:hover{color:var(--gold)} /* ---------- Galerie ---------- */ .gallery{background: radial-gradient(800px 420px at 10% 0%, rgba(36,138,110,.10), transparent 60%), var(--bg-2)} .gallery__grid{ display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:14px; grid-auto-flow:dense; } .gallery__item{ border-radius:var(--r);overflow:hidden;position:relative;padding:0; border:1px solid var(--line-soft);cursor:pointer; background:var(--surface);display:block; } .gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .4s} .gallery__item:hover img{transform:scale(1.06);filter:brightness(1.06)} .gallery__item:focus-visible{outline:2px solid var(--gold);outline-offset:3px} /* lupa při najetí */ .gallery__item[data-full]::after{ content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s; background:rgba(8,16,13,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d9b46a'%3E%3Cpath d='M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 13 14.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/%3E%3C/svg%3E") center/34px no-repeat; } .gallery__item[data-full]:hover::after{opacity:1} .gallery__item--tall{grid-row:span 2} .gallery__item--wide{grid-column:span 2} .gallery__ig{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px; background:linear-gradient(135deg,var(--green),var(--green-deep));color:var(--txt); font-family:var(--head);text-align:center;padding:18px;transition:filter .3s; } .gallery__ig:hover{filter:brightness(1.12)} .gallery__ig-ic{width:34px;height:34px;fill:var(--gold)} .gallery__ig span{font-size:.9rem;letter-spacing:.04em} .gallery__ig em{font-style:normal;font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.6)} /* ---------- Lightbox ---------- */ .lightbox{ position:fixed;inset:0;z-index:200;display:none; align-items:center;justify-content:center;padding:6vh 84px; background:rgba(6,12,10,.95);backdrop-filter:blur(6px); } .lightbox.is-open{display:flex} .lightbox__figure{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%;max-height:100%} .lightbox img{ max-width:100%;max-height:78vh;border-radius:10px; box-shadow:var(--shadow);object-fit:contain; animation:lbIn .35s var(--ease); } @keyframes lbIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}} .lightbox figcaption{ color:var(--txt-soft);font-size:.92rem;text-align:center;max-width:70ch; } .lightbox__close{ position:absolute;top:18px;right:26px;font-size:2.6rem;line-height:1; color:var(--txt);opacity:.7;transition:opacity .2s;z-index:2; } .lightbox__close:hover{opacity:1} .lightbox__nav{ position:absolute;top:50%;transform:translateY(-50%); width:56px;height:56px;border-radius:50%; display:grid;place-items:center; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16); transition:background .25s,border-color .25s,transform .25s;z-index:2; } .lightbox__nav svg{width:30px;height:30px;fill:var(--txt)} .lightbox__nav:hover{background:var(--gold);border-color:var(--gold)} .lightbox__nav:hover svg{fill:#1a1407} .lightbox__nav--prev{left:16px} .lightbox__nav--next{right:16px} .lightbox__counter{ position:absolute;bottom:20px;left:50%;transform:translateX(-50%); font-family:var(--head);letter-spacing:.2em;font-size:.8rem;color:var(--muted); } /* ---------- Recenze ---------- */ /* posuvný pás recenzí */ .reviews__marquee{ position:relative;overflow:hidden; /* změkčení okrajů */ -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .reviews__track{ display:flex;gap:24px;width:max-content; animation:marquee 60s linear infinite; will-change:transform; } .reviews__marquee:hover .reviews__track, .reviews__marquee:focus-within .reviews__track{animation-play-state:paused} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 12px))}} .review{ background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r); padding:32px 28px;position:relative; flex:0 0 clamp(280px,32vw,380px); display:flex;flex-direction:column; } .review blockquote{flex:1} .review::before{ content:"\201C";position:absolute;right:22px;top:6px; font-family:var(--serif);font-size:5rem;color:rgba(217,180,106,.18);line-height:1; } .review__stars{color:var(--gold);letter-spacing:.1em;margin-bottom:16px} .review blockquote{font-family:var(--serif);font-size:1.18rem;line-height:1.55;color:var(--txt);margin-bottom:22px} .review__name{display:block;font-family:var(--head);text-transform:uppercase;letter-spacing:.14em;font-size:.88rem} .review__src{color:var(--muted);font-size:.8rem} .reviews__cta{text-align:center;margin-top:44px} /* ---------- CTA banner ---------- */ .cta-banner{ padding:84px 0;text-align:center;position:relative;overflow:hidden; background: radial-gradient(800px 400px at 50% 120%, rgba(36,138,110,.42), transparent 70%), linear-gradient(180deg,#0a120f,#11231b); border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft); } .cta-banner__pole{ position:absolute;inset:0;opacity:.5;pointer-events:none; background:repeating-linear-gradient(115deg,rgba(217,180,106,.07) 0 18px,transparent 18px 50px); } .cta-banner__inner{position:relative;z-index:2} .cta-banner__title{font-family:var(--head);font-weight:200;text-transform:uppercase;font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:.1em;margin-bottom:12px} .cta-banner p{color:var(--txt-soft);margin-bottom:28px;font-size:1.06rem} /* ---------- Kontakt ---------- */ .contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} .contact__list{margin:28px 0 32px;display:grid;gap:20px} .contact__list li{display:flex;gap:16px;align-items:flex-start} .ic--gold{width:22px;height:22px;fill:var(--gold);flex-shrink:0;margin-top:4px} .contact__label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);margin-bottom:2px;font-family:var(--head)} .contact__list a{transition:color .2s} .contact__list a:hover{color:var(--gold)} .hours{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);padding:24px 26px;margin-bottom:28px} .hours__title{font-family:var(--head);font-weight:400;text-transform:uppercase;letter-spacing:.2em;font-size:.92rem;margin-bottom:14px;color:var(--gold)} .hours__list li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:.95rem} .hours__list li:last-child{border-bottom:none} .hours__list .is-closed{color:var(--muted)} .contact__map{height:100%;min-height:480px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)} .contact__map iframe{width:100%;height:100%;min-height:480px;border:0;filter:grayscale(.3) contrast(1.05)} /* ---------- Patička ---------- */ .footer{background:#08100d;border-top:1px solid var(--line-soft);padding-top:56px} .footer__inner{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px} .brand--footer{margin-bottom:18px} .footer__brand p{color:var(--muted);font-size:.92rem;max-width:320px} .footer__nav{display:flex;flex-direction:column;gap:10px} .footer__nav a,.footer__contact a{color:var(--txt-soft);font-size:.92rem;transition:color .2s} .footer__nav a:hover,.footer__contact a:hover{color:var(--gold)} .footer__contact{display:flex;flex-direction:column;gap:10px} .footer__bottom{border-top:1px solid var(--line-soft);padding:22px 0} .footer__bottom-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.84rem} .footer__bottom a{color:var(--gold)} /* ---------- Plovoucí tlačítko ---------- */ .fab{ position:fixed;right:22px;bottom:22px;z-index:90; display:none;align-items:center;gap:9px; background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1a1407; font-family:var(--head);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem; padding:13px 22px;border-radius:50px;box-shadow:0 12px 28px rgba(217,180,106,.4); transform:translateY(120px);transition:transform .4s var(--ease); } .fab svg{width:18px;height:18px;fill:#1a1407} .fab.is-visible{transform:translateY(0)} /* ---------- Reveal ---------- */ [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .7s var(--ease),transform .7s var(--ease)} [data-reveal].is-in{opacity:1;transform:none} /* ========================================================= Responzivita ========================================================= */ @media (max-width:980px){ .strip__grid{grid-template-columns:repeat(2,1fr)} .strip__item:nth-child(2){border-right:none} .strip__item{border-bottom:1px solid var(--line-soft)} .services__grid{grid-template-columns:repeat(2,1fr)} .about__grid,.contact__grid{grid-template-columns:1fr;gap:48px} .about__media{max-width:480px;margin:0 auto;width:100%;height:440px} .footer__inner{grid-template-columns:1fr 1fr} .booking__steps{grid-template-columns:1fr;max-width:480px} .hero__deco{opacity:.09;right:-4%;width:56vw} .gallery__grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:200px} } /* Navigace se do řádku nevejde dřív než ostatní prvky → vlastní breakpoint */ @media (max-width:1000px){ .nav{ position:fixed;inset:0 0 0 auto;width:min(82vw,340px); /* zavřené menu musí být mimo layout — odsunuté fixed prvky jinak roztahují stránku do šířky a vzniká vodorovné posouvání */ display:none; background:var(--bg-2);flex-direction:column;align-items:stretch;justify-content:flex-start; padding:96px 28px 40px;gap:4px; border-left:1px solid var(--line);box-shadow:var(--shadow);z-index:99; overflow-y:auto; } .nav.is-open{display:flex;animation:navIn .35s var(--ease)} .nav.is-closing{display:flex;animation:navOut .28s var(--ease) forwards} @keyframes navIn{from{transform:translateX(100%)}to{transform:translateX(0)}} @keyframes navOut{from{transform:translateX(0)}to{transform:translateX(100%)}} .nav__link{padding:14px 6px;font-size:.95rem;border-bottom:1px solid var(--line-soft)} .nav__cta{margin:18px 0 0;text-align:center} .burger{display:flex;z-index:101} .fab{display:flex} } @media (max-width:780px){ .topbar{display:none} .section{padding:76px 0} /* pohodlné dotykové plochy (doporučení 44 px) u telefonů, e-mailu a odkazů */ .contact__list a,.tcard__phone,.footer__nav a,.footer__contact a, .booking__note a,.footer__bottom a{ display:inline-block;min-height:44px;line-height:44px; } .contact__list li{align-items:center} .link-arrow,.scard__link{min-height:44px;align-items:center} /* na mobilu je text přes celou šířku → svislý překryv místo vodorovného */ .hero__overlay{ background: linear-gradient(180deg, rgba(8,16,13,.92) 0%, rgba(9,19,15,.86) 45%, rgba(8,16,13,.94) 100%), radial-gradient(600px 400px at 50% 100%, rgba(22,73,61,.45), transparent 65%); } .hero{min-height:auto;padding:56px 0 72px} .hero__scroll{display:none} /* překrývalo by hodnocení */ .hero__deco{opacity:.07} .team__grid{grid-template-columns:1fr;max-width:460px} .gallery__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px} .gallery__item--wide{grid-column:span 2} .gallery__item--tall{grid-row:span 2} /* lightbox — šipky dolů, aby nepřekrývaly fotku */ .lightbox{padding:8vh 12px 96px} .lightbox img{max-height:66vh} .lightbox__nav{top:auto;bottom:16px;transform:none;width:50px;height:50px} .lightbox__nav--prev{left:calc(50% - 74px)} .lightbox__nav--next{right:calc(50% - 74px)} .lightbox__counter{bottom:78px} .reviews__track{animation-duration:42s} } @media (max-width:520px){ .container{padding:0 18px} .services__grid{grid-template-columns:1fr} /* pruh výhod do jednoho sloupce — ve dvou se text na úzkých mobilech nevejde */ .strip__grid{grid-template-columns:1fr} .strip__item{border-right:none;padding:34px 22px} /* dlouhé popisky tlačítek se musí zalomit, jinak přetečou */ .btn{white-space:normal;text-align:center;letter-spacing:.12em} .btn--lg{padding:15px 22px;font-size:.8rem} .booking__cta .btn,.cta-banner .btn,.contact__btn,.reviews__cta .btn{width:100%} .footer__inner{grid-template-columns:1fr;gap:28px} .tcard{flex-direction:column;text-align:center} .hero__actions .btn{width:100%} .about__media{height:380px} .gallery__grid{grid-auto-rows:150px} .review{flex-basis:78vw} .lightbox figcaption{font-size:.82rem} } /* Omezení pohybu */ @media (prefers-reduced-motion:reduce){ *{animation:none!important;scroll-behavior:auto!important} [data-reveal]{opacity:1;transform:none} /* bez animace musí pás recenzí zůstat ručně posuvný */ .reviews__marquee{overflow-x:auto} .reviews__track{width:auto} }