/* ========================================================================== Limuzína Transport — sdílený design systém Externí (nekritická) vrstva. Kritické CSS je inline v každé stránky. Produkce: tento soubor minifikovat (site.min.css). Cíl < 50 kB (bez obrázků). Paleta a typografie navazují na stávající web (zlatá + charcoal). ========================================================================== */ /* --- Tokens (duplikováno i v inline kritickém CSS pro první paint) --------- */ :root{ --gold:#BD8445; /* akcenty, CTA, linky na tmavém pozadí */ --gold-light:#D4A85C; /* hover */ --gold-text:#8C5A25; /* zlatý TEXT na světlém pozadí (kontrast ≥ 4,5:1) */ --charcoal:#0F1419; /* tmavé sekce, overlay */ --surface:#161B22; /* tmavý povrch (karty na tmavém) */ --cream:#F5F2EE; /* světlé pozadí */ --white:#FFFFFF; --ink:#182433; /* text na světlém */ --muted:rgba(60,72,84,.82); /* sekundární text na světlém */ --muted-dark:rgba(245,242,238,.72); /* sekundární text na tmavém */ --hair:rgba(212,168,92,.30); /* zlatá vlasová linka na tmavém */ --hair-ink:rgba(24,36,51,.14);/* jemná linka na světlém */ --maxw:1320px; --pad:clamp(1.25rem,5vw,4rem); --r:2px; /* rádius – luxus = ostré, minimální zaoblení */ --ease:cubic-bezier(.22,.61,.36,1); --shadow:0 24px 60px -28px rgba(15,20,25,.55); --serif:'Playfair Display','Playfair Fallback',Georgia,'Times New Roman',serif /* FIX2: I4 */; --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; } /* --- View Transitions (cross-document filmový střih) ----------------------- */ @view-transition{ navigation:auto; } ::view-transition-old(root),::view-transition-new(root){ animation-duration:.5s; } @media (prefers-reduced-motion:reduce){ ::view-transition-old(root),::view-transition-new(root){ animation:none; } } /* --- Reset / base (nekritická část) --------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } img,picture,video{ display:block; max-width:100%; } ul[class]{ list-style:none; margin:0; padding:0; } a{ color:var(--gold-text); text-decoration:none; } a:hover{ color:var(--gold); } :focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; } ::selection{ background:var(--gold); color:var(--charcoal); } .visually-hidden{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } .skip-link{ position:absolute;left:1rem;top:-3rem;z-index:200;background:var(--gold);color:var(--charcoal);padding:.6rem 1rem;border-radius:var(--r);font:600 .9rem/1 var(--sans);transition:top .2s; } .skip-link:focus{ top:1rem;color:var(--charcoal); } /* --- Layout --------------------------------------------------------------- */ .container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); } .section{ padding-block:clamp(4rem,8vw,8rem); position:relative; } .section--dark{ background:var(--charcoal); color:var(--cream); } .section--surface{ background:var(--surface); color:var(--cream); } .section--cream{ background:var(--cream); color:var(--ink); } .section--light{ background:var(--white); color:var(--ink); } .section--tight{ padding-block:clamp(3rem,5vw,5rem); } /* zlatá vertikální linka „kreslící se" podél scrollu (scroll-driven) */ .thread{ position:absolute; left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); background:linear-gradient(var(--hair),transparent); transform-origin:top; pointer-events:none; opacity:.5; } @supports (animation-timeline:scroll()){ @media (prefers-reduced-motion:no-preference){ .thread{ scale:1 0; animation:thread-draw linear both; animation-timeline:scroll(root block); } } } @keyframes thread-draw{ to{ scale:1 1; } } /* --- Typografie ----------------------------------------------------------- */ .eyebrow{ font:600 .75rem/1 var(--sans); text-transform:uppercase; letter-spacing:.14em; color:var(--gold-text); margin:0 0 1rem; display:inline-flex; align-items:center; gap:.6rem; } .section--dark .eyebrow,.section--surface .eyebrow{ color:var(--gold-light); } .eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.6; } .hero .eyebrow{ color:var(--gold-light); font-size:.82rem; letter-spacing:.16em; text-shadow:0 1px 14px rgba(15,20,25,.55); } .hero .eyebrow::before{ width:34px; opacity:.9; } .h2{ font:500 clamp(1.75rem,3.5vw,3.25rem)/1.08 var(--serif); letter-spacing:-.02em; margin:0 0 1rem; text-wrap:balance; font-feature-settings:"liga" 1; } .h3{ font:500 clamp(1.25rem,2vw,1.75rem)/1.2 var(--serif); letter-spacing:-.01em; margin:0 0 .6rem; } .lead{ font:400 clamp(1.05rem,1.3vw,1.2rem)/1.65 var(--sans); color:var(--muted); max-width:60ch; text-wrap:pretty; } .section--dark .lead,.section--surface .lead{ color:var(--muted-dark); } .em{ font-style:italic; color:var(--gold-text); } .section--dark .em,.section--surface .em,.hero .em{ color:var(--gold-light); } .section-head{ max-width:70ch; margin-bottom:clamp(2.5rem,4vw,3.75rem); } .section-head--center{ margin-inline:auto; text-align:center; } .section-head--center .lead{ margin-inline:auto; } /* --- Buttons -------------------------------------------------------------- */ .btn{ --btn-bg:var(--gold); --btn-fg:var(--charcoal); --btn-bd:var(--gold); display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:52px; padding:.9rem 1.75rem; border:1px solid var(--btn-bd); border-radius:var(--r); background:var(--btn-bg); color:var(--btn-fg); font:600 .95rem/1 var(--sans); letter-spacing:.02em; cursor:pointer; transition:transform .35s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .3s; text-align:center; } .btn:hover{ color:var(--btn-fg); transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(189,132,69,.7); } .btn--primary:hover{ --btn-bg:var(--gold-light); --btn-bd:var(--gold-light); } .btn--ghost{ --btn-bg:transparent; --btn-fg:var(--cream); --btn-bd:rgba(245,242,238,.4); } .btn--ghost:hover{ --btn-bd:var(--gold-light); --btn-fg:var(--gold-light); box-shadow:none; } .btn--ghost-ink{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--hair-ink); } .btn--ghost-ink:hover{ --btn-fg:var(--gold-text); --btn-bd:var(--gold); box-shadow:none; } .btn--block{ width:100%; } .btn--lg{ min-height:58px; padding:1.05rem 2.2rem; font-size:1rem; } .btn__arrow{ transition:transform .35s var(--ease); } .btn:hover .btn__arrow{ transform:translateX(4px); } /* --- Header / navigace ---------------------------------------------------- */ .site-header{ position:sticky; top:0; z-index:100; view-transition-name:site-header; background:color-mix(in srgb,var(--charcoal) 60%,transparent); -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); border-bottom:1px solid rgba(212,168,92,.16); transition:background .4s,border-color .4s; } .site-header--solid{ background:color-mix(in srgb,var(--charcoal) 90%,transparent); } .nav{ display:flex; align-items:center; gap:1.75rem; min-height:92px; } .nav__logo{ view-transition-name:site-logo; display:inline-flex; flex-direction:column; line-height:1; color:var(--cream); margin-right:auto; } .nav__logo:hover{ color:var(--cream); } .nav__logo b{ font:500 1.2rem/1 var(--serif); letter-spacing:.02em; } .nav__logo span{ font:600 .62rem/1 var(--sans); text-transform:uppercase; letter-spacing:.28em; color:var(--gold-light); margin-top:.4rem; } .nav__links{ display:flex; align-items:center; gap:.35rem; } .nav__links a{ color:var(--muted-dark); font:500 .92rem/1 var(--sans); padding:.7rem 1rem; border-radius:var(--r); transition:color .25s; position:relative; white-space:nowrap; } .nav__links a:hover,.nav__links a[aria-current="page"]{ color:var(--cream); } .nav__links a::after{ content:""; position:absolute; left:.8rem; right:.8rem; bottom:.35rem; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); } .nav__links a:hover::after,.nav__links a[aria-current="page"]::after{ transform:scaleX(1); } .nav__cta{ margin-left:.5rem; } .nav__toggle{ display:none; width:48px; height:48px; border:1px solid rgba(245,242,238,.25); background:transparent; border-radius:var(--r); cursor:pointer; padding:0; align-items:center; justify-content:center; } .nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{ content:""; display:block; width:20px; height:1.5px; background:var(--cream); transition:transform .3s var(--ease),opacity .2s; } .nav__toggle span::before{ transform:translateY(-6px); } .nav__toggle span::after{ transform:translateY(4.5px); } .nav__toggle[aria-expanded="true"] span{ background:transparent; } .nav__toggle[aria-expanded="true"] span::before{ transform:rotate(45deg); } .nav__toggle[aria-expanded="true"] span::after{ transform:rotate(-45deg) translateY(-1px); } /* --- Hero ----------------------------------------------------------------- */ .hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; color:var(--cream); isolation:isolate; } .hero__media{ position:absolute; inset:0; z-index:-2; } .hero__media img,.hero__media video{ width:100%; height:100%; object-fit:cover; } .hero__media video{ position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; } .hero__media video.is-playing{ opacity:1; } .hero__media img{ view-transition-name:hero-image; } /* Ken-Burns i kinetická maska nadpisu jsou definovány POUZE v kritickém CSS v každé stránky — jeden mechanismus, aby se animace při async načtení tohoto souboru neopakovala. */ .hero__scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(15,20,25,.55) 0%,rgba(15,20,25,.25) 38%,rgba(15,20,25,.72) 82%,rgba(15,20,25,.94) 100%); } .hero__inner{ padding-block:clamp(3rem,8vh,7rem) clamp(6rem,10vh,8rem); } .hero__title{ font:500 clamp(2.5rem,6vw,8rem)/1.04 var(--serif); letter-spacing:-.02em; margin:0 0 1.4rem; max-width:16ch; text-wrap:balance; } .hero__title .line{ display:block; overflow:hidden; } .hero__title .line>span{ display:block; padding-block:.16em; } .hero__sub{ font:400 clamp(1.05rem,1.4vw,1.3rem)/1.6 var(--sans); color:var(--muted-dark); max-width:56ch; margin:0 0 2rem; text-wrap:pretty; } .hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:clamp(2.5rem,5vh,4rem); } .hero__metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(212,168,92,.22); border:1px solid rgba(212,168,92,.22); } .metric{ background:color-mix(in srgb,var(--charcoal) 78%,transparent); padding:1.25rem 1.4rem; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); } .metric b{ display:block; font:500 clamp(1.15rem,1.7vw,1.55rem)/1 var(--serif); color:var(--cream); margin-bottom:.4rem; } .metric span{ font:600 .68rem/1.2 var(--sans); text-transform:uppercase; letter-spacing:.12em; color:var(--gold-light); } /* --- Služby (karty) ------------------------------------------------------- */ .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,2vw,2rem); } .card{ position:relative; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--hair-ink); border-radius:var(--r); overflow:hidden; transition:transform .45s var(--ease),box-shadow .45s,border-color .45s; } .section--dark .card,.section--surface .card{ background:var(--surface); border-color:rgba(212,168,92,.16); } .card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); border-color:var(--gold); } .card__media{ position:relative; aspect-ratio:4/5; overflow:hidden; } .card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); } .card:hover .card__media img{ transform:scale(1.05); } .card__tag{ position:absolute; top:1rem; left:1rem; background:rgba(15,20,25,.72); color:var(--gold-light); font:600 .68rem/1 var(--sans); text-transform:uppercase; letter-spacing:.12em; padding:.5rem .75rem; border-radius:var(--r); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); } .card__body{ padding:clamp(1.5rem,2vw,2rem); display:flex; flex-direction:column; flex:1; } .card__body .h3{ margin-bottom:.5rem; } .card__desc{ font:400 1rem/1.6 var(--sans); color:var(--muted); margin:0 0 1.5rem; text-wrap:pretty; } .section--dark .card__desc,.section--surface .card__desc{ color:var(--muted-dark); } .card__foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:auto; padding-top:1.25rem; border-top:1px solid var(--hair-ink); } .section--dark .card__foot,.section--surface .card__foot{ border-color:rgba(212,168,92,.16); } .card__price{ font:500 1.35rem/1 var(--serif); color:var(--ink); } .section--dark .card__price,.section--surface .card__price{ color:var(--cream); } .card__price small{ display:block; font:600 .64rem/1 var(--sans); text-transform:uppercase; letter-spacing:.1em; color:var(--gold-text); margin-bottom:.35rem; } .section--dark .card__price small,.section--surface .card__price small{ color:var(--gold-light); } .card__link{ font:600 .9rem/1 var(--sans); color:var(--gold-text); display:inline-flex; align-items:center; gap:.4rem; } .section--dark .card__link,.section--surface .card__link{ color:var(--gold-light); } .card__link .btn__arrow{ transition:transform .35s var(--ease); } .card:hover .card__link .btn__arrow{ transform:translateX(4px); } .card__link::after{ content:""; position:absolute; inset:0; } /* celá karta klikatelná */ /* --- Vůz + signature pan -------------------------------------------------- */ .vehicle__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,4.5rem); align-items:center; } .vehicle__media{ position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:3/2; } .vehicle__media img{ width:100%; height:100%; object-fit:cover; } .vehicle__media::after{ content:""; position:absolute; inset:0; border:1px solid rgba(212,168,92,.25); pointer-events:none; } .features{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(212,168,92,.18); border:1px solid rgba(212,168,92,.18); margin-top:2rem; } .feature{ display:flex; gap:.9rem; align-items:flex-start; padding:1.15rem 1.2rem; background:var(--charcoal); } .section--surface .feature{ background:var(--surface); } .feature__ic{ flex:none; width:34px; height:34px; color:var(--gold-light); } .feature__ic svg{ width:100%; height:100%; } .feature b{ display:block; font:500 1rem/1.3 var(--sans); color:var(--cream); margin-bottom:.15rem; } .feature span{ font:400 .85rem/1.4 var(--sans); color:var(--muted-dark); } /* Signature: full-bleed cinematický profil vozu + kóta 8,6 m */ .signature{ margin-top:clamp(3.5rem,7vw,7rem); } .signature__head{ margin-bottom:clamp(1.5rem,3vw,2.5rem); max-width:44ch; } .signature__head .eyebrow{ color:var(--gold-light); } .signature__lead{ font:500 clamp(1.4rem,2.6vw,2.4rem)/1.15 var(--serif); color:var(--cream); margin:.4rem 0 0; letter-spacing:-.01em; text-wrap:balance; } /* FIX E6: full-bleed bez transform/left – žádný horizontální přesah (overflow-x:clip na html/body dorazí zbytek za scrollbarem) */ .signature__stage{ position:relative; width:auto; max-width:none; margin-inline:calc(-1*((100vw - 100%)/2)); overflow:hidden; border-block:1px solid rgba(212,168,92,.28); background:#07090c; } .signature__img{ display:block; width:100%; height:auto; } .signature__stage::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 clamp(60px,12vw,180px) clamp(20px,5vw,60px) rgba(7,9,12,.6); background:linear-gradient(180deg,rgba(7,9,12,.4),transparent 20%,transparent 72%,rgba(7,9,12,.5)); } .signature__dim{ display:flex; align-items:center; gap:clamp(1rem,2vw,1.75rem); margin-top:clamp(1.5rem,3vw,2.25rem); color:var(--gold-light); } .signature__dim::before,.signature__dim::after{ content:""; height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--gold)); } .signature__dim::after{ background:linear-gradient(90deg,var(--gold),transparent); } .signature__dim span{ font:500 clamp(1.15rem,1.8vw,1.6rem)/1 var(--serif); letter-spacing:.06em; white-space:nowrap; } /* --- Social proof --------------------------------------------------------- */ .platforms{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.75rem); margin-bottom:clamp(2.5rem,4vw,4rem); } .platform{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.85rem; padding:clamp(1.75rem,3vw,2.75rem) 1.5rem; background:var(--surface); border:1px solid rgba(212,168,92,.18); border-radius:var(--r); transition:transform .4s var(--ease),box-shadow .4s,border-color .4s; color:var(--cream); } .platform:hover{ transform:translateY(-6px); border-color:var(--gold); box-shadow:var(--shadow); color:var(--cream); } .platform__logo{ height:30px; display:flex; align-items:center; justify-content:center; color:var(--cream); } .platform__logo img,.platform__logo svg{ height:100%; width:auto; display:block; } .stars{ display:inline-flex; gap:3px; color:var(--gold-light); } .stars svg{ width:19px; height:19px; } .platform__score{ font:500 clamp(2.5rem,4vw,3.4rem)/1 var(--serif); color:var(--cream); letter-spacing:-.01em; } .platform__count{ font:600 .74rem/1 var(--sans); text-transform:uppercase; letter-spacing:.12em; color:var(--muted-dark); } .platform__go{ margin-top:.15rem; font:600 .72rem/1 var(--sans); text-transform:uppercase; letter-spacing:.1em; color:var(--gold-light); display:inline-flex; gap:.4rem; align-items:center; } .platform:hover .platform__go .btn__arrow{ transform:translateX(4px); } .reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); } .review{ display:flex; flex-direction:column; gap:1rem; padding:clamp(1.5rem,2.2vw,2rem); background:var(--white); border:1px solid var(--hair-ink); border-radius:var(--r); } .section--dark .review,.section--surface .review{ background:var(--surface); border-color:rgba(212,168,92,.16); } .review__text{ font:400 1.02rem/1.65 var(--sans); color:var(--ink); margin:0; text-wrap:pretty; } .section--dark .review__text,.section--surface .review__text{ color:var(--cream); } .review__meta{ margin-top:auto; display:flex; align-items:center; gap:.85rem; } .review__avatar{ width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none; background:var(--surface); border:1px solid rgba(212,168,92,.2); } .review__who{ display:flex; flex-direction:column; gap:.15rem; min-width:0; } .review__name{ font:600 .95rem/1.2 var(--sans); color:var(--ink); } .section--dark .review__name,.section--surface .review__name{ color:var(--cream); } .review__src{ font:400 .8rem/1.2 var(--sans); color:var(--muted); } .section--dark .review__src,.section--surface .review__src{ color:var(--muted-dark); } .reviews__more{ margin-top:2.5rem; text-align:center; } .reviews-pair{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2vw,1.5rem); max-width:980px; margin-inline:auto; } @media (max-width:760px){ .reviews-pair{ grid-template-columns:1fr; } } /* --- Video (lite-embed fasáda) -------------------------------------------- */ .video__frame{ position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; border:1px solid rgba(212,168,92,.22); cursor:pointer; background:#0a0d11; } .video__frame img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease),opacity .4s; } .video__frame:hover img{ transform:scale(1.04); opacity:.85; } .video__play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border:0; background:transparent; cursor:pointer; } .video__play span{ width:clamp(72px,8vw,96px); height:clamp(72px,8vw,96px); border-radius:50%; background:color-mix(in srgb,var(--charcoal) 55%,transparent); border:1px solid var(--gold-light); display:grid; place-items:center; transition:transform .4s var(--ease),background .3s; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); } .video__frame:hover .video__play span{ transform:scale(1.08); background:var(--gold); } .video__play svg{ width:34%; height:34%; fill:var(--cream); margin-left:6%; transition:fill .3s; } .video__frame:hover .video__play svg{ fill:var(--charcoal); } .video__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } /* --- Jak to probíhá ------------------------------------------------------- */ .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.75rem); counter-reset:step; } .step{ position:relative; padding-top:2.5rem; } .step__num{ font:500 1rem/1 var(--serif); color:var(--charcoal); background:var(--gold); width:44px; height:44px; border-radius:50%; display:grid; place-items:center; margin-bottom:1.25rem; } .step .h3{ font-size:clamp(1.15rem,1.6vw,1.4rem); } .step p{ font:400 .96rem/1.6 var(--sans); color:var(--muted); margin:0; text-wrap:pretty; } .section--dark .step p,.section--surface .step p{ color:var(--muted-dark); } .step::before{ content:""; position:absolute; top:1.25rem; left:calc(44px + 1rem); right:-1rem; height:1px; background:var(--hair); } .step:last-child::before{ display:none; } /* --- Galerie -------------------------------------------------------------- */ .gallery__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.6rem,1.2vw,1rem); } .gallery__item{ position:relative; overflow:hidden; border-radius:var(--r); cursor:pointer; aspect-ratio:4/3; background:var(--surface); border:0; padding:0; } .gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); } .gallery__item:hover img{ transform:scale(1.06); } .gallery__item::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(15,20,25,.5)); opacity:0; transition:opacity .4s; } .gallery__item:hover::after{ opacity:1; } .gallery__cta{ text-align:center; margin-top:clamp(2.5rem,4vw,3.5rem); } /* FIX E5: mezistupeň 3 sloupce pro 1024–1439px (2 sloupce do 1023, 4 od 1440) */ @media (min-width:1024px) and (max-width:1439.98px){ .gallery__grid{ grid-template-columns:repeat(3,1fr); } } /* Kurátorský 4sloupcový vzor (široká + vysoká + zrcadlově), dokonale vyplněný, bez děr */ @media (min-width:1440px){ /* FIX3: robustní jednotná mřížka – žádné spany, nemůže se překrýt */ .gallery__grid{ grid-template-columns:repeat(4,1fr); } } /* Lightbox */ .lightbox{ position:fixed; inset:0; z-index:300; background:rgba(9,12,16,.94); display:flex; align-items:center; justify-content:center; padding:clamp(1rem,4vw,4rem); opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s; } .lightbox.is-open{ opacity:1; visibility:visible; } .lightbox__img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--r); box-shadow:0 30px 80px rgba(0,0,0,.6); } .lightbox__btn{ position:absolute; background:transparent; border:1px solid rgba(245,242,238,.3); color:var(--cream); width:56px; height:56px; border-radius:50%; cursor:pointer; display:grid; place-items:center; transition:background .3s,border-color .3s,transform .3s; } .lightbox__btn:hover{ background:var(--gold); border-color:var(--gold); color:var(--charcoal); } .lightbox__btn svg{ width:22px; height:22px; } .lightbox__close{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); } .lightbox__prev{ left:clamp(1rem,3vw,2rem); top:50%; transform:translateY(-50%); } .lightbox__next{ right:clamp(1rem,3vw,2rem); top:50%; transform:translateY(-50%); } .lightbox__prev:hover,.lightbox__next:hover{ transform:translateY(-50%) scale(1.05); } .lightbox__count{ position:absolute; bottom:clamp(1rem,3vw,2rem); left:50%; transform:translateX(-50%); font:600 .8rem/1 var(--sans); letter-spacing:.1em; color:var(--muted-dark); } /* --- O nás ---------------------------------------------------------------- */ .about__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:center; } .about__stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hair); border:1px solid var(--hair); margin-top:2rem; } .about__stat{ background:var(--charcoal); padding:1.5rem; } .section--surface .about__stat{ background:var(--surface); } .about__stat b{ display:block; font:500 clamp(1.6rem,2.4vw,2.2rem)/1 var(--serif); color:var(--gold-light); margin-bottom:.4rem; } .about__stat span{ font:400 .9rem/1.4 var(--sans); color:var(--muted-dark); } .leaders{ display:flex; flex-wrap:wrap; gap:2rem; margin-top:2rem; } .leader b{ display:block; font:500 1.1rem/1.3 var(--serif); color:var(--cream); } .leader span{ font:600 .74rem/1 var(--sans); text-transform:uppercase; letter-spacing:.1em; color:var(--gold-light); } /* --- Rezervační formulář -------------------------------------------------- */ .booking__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,4vw,4.5rem); align-items:start; } .booking__aside .h2{ margin-bottom:1.25rem; } .booking__micro{ display:flex; align-items:flex-start; gap:.75rem; margin-top:1.5rem; padding:1rem 1.25rem; border:1px solid var(--hair); border-radius:var(--r); background:color-mix(in srgb,var(--gold) 8%,transparent); } .booking__micro svg{ flex:none; width:22px; height:22px; color:var(--gold-light); margin-top:.1rem; } .booking__micro p{ margin:0; font:400 .95rem/1.5 var(--sans); color:var(--muted-dark); } .booking__contactline{ margin-top:2rem; display:flex; flex-direction:column; gap:1rem; } .contactrow{ display:flex; align-items:center; gap:1rem; color:var(--cream); } .contactrow svg{ flex:none; width:22px; height:22px; color:var(--gold-light); } .contactrow b{ font:500 1.15rem/1.2 var(--serif); } .contactrow a{ color:var(--cream); } .contactrow a:hover{ color:var(--gold-light); } .form{ background:var(--white); border:1px solid var(--hair-ink); border-radius:var(--r); padding:clamp(1.5rem,2.5vw,2.5rem); box-shadow:var(--shadow); } .form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.25rem; } .field{ display:flex; flex-direction:column; gap:.45rem; } .field--full{ grid-column:1/-1; } .field label{ font:600 .78rem/1 var(--sans); text-transform:uppercase; letter-spacing:.08em; color:var(--ink); } .field .req{ color:var(--gold-text); } .field input,.field select,.field textarea{ font:400 16px/1.4 var(--sans); color:var(--ink); background:var(--cream); border:1px solid var(--hair-ink); border-radius:var(--r); padding:.85rem 1rem; width:100%; transition:border-color .25s,box-shadow .25s; -webkit-appearance:none; appearance:none; } .field select{ background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%238C5A25' stroke-width='1.6' d='M1 1l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem; } .field textarea{ min-height:110px; resize:vertical; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(189,132,69,.16); } .field--invalid input,.field--invalid select,.field--invalid textarea{ border-color:#b5443a; box-shadow:0 0 0 3px rgba(181,68,58,.14); } .field__err{ font:500 .8rem/1.3 var(--sans); color:#b5443a; min-height:0; } .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .form__trust{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem; margin-top:1.25rem; font:500 .82rem/1.4 var(--sans); color:var(--muted); } .form__trust .dot{ width:4px; height:4px; border-radius:50%; background:var(--gold); } .form__trust .stars svg{ width:15px; height:15px; } .form__gdpr{ margin-top:1rem; font:400 .8rem/1.5 var(--sans); color:var(--muted); } .form__submit{ margin-top:1.5rem; } .form__success{ display:none; text-align:center; padding:clamp(1.5rem,3vw,2.5rem) 1rem; } .form.is-sent .form__body{ display:none; } .form.is-sent .form__success{ display:block; } .form__success .tick{ width:64px; height:64px; margin:0 auto 1.25rem; border-radius:50%; background:color-mix(in srgb,var(--gold) 18%,transparent); border:1px solid var(--gold); display:grid; place-items:center; color:var(--gold-text); } .form__success .tick svg{ width:30px; height:30px; } .form__success h3{ font:500 1.5rem/1.2 var(--serif); color:var(--ink); margin:0 0 .5rem; } .form__success p{ font:400 1rem/1.6 var(--sans); color:var(--muted); margin:0 auto 1.5rem; max-width:44ch; } .form__summary{ text-align:left; max-width:420px; margin:0 auto 1.5rem; border:1px solid var(--hair-ink); border-radius:var(--r); } .form__summary dl{ margin:0; display:grid; grid-template-columns:auto 1fr; } .form__summary dt{ font:600 .78rem/1.4 var(--sans); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:.6rem 1rem; border-bottom:1px solid var(--hair-ink); background:var(--cream); } .form__summary dd{ font:400 .95rem/1.4 var(--sans); color:var(--ink); padding:.6rem 1rem; border-bottom:1px solid var(--hair-ink); margin:0; } .form__summary .row:last-child dt,.form__summary .row:last-child dd{ border-bottom:0; } .form__callbtn{ font:500 1.3rem/1 var(--serif); } /* --- Breadcrumbs (landing) ------------------------------------------------ */ .breadcrumbs{ padding-block:1.25rem; } .breadcrumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; list-style:none; margin:0; padding:0; font:500 .82rem/1 var(--sans); } .breadcrumbs li{ display:flex; align-items:center; gap:.5rem; color:var(--muted-dark); } .breadcrumbs a{ color:var(--muted-dark); } .breadcrumbs a:hover{ color:var(--gold-light); } .breadcrumbs li[aria-current]{ color:var(--gold-light); } .breadcrumbs .sep{ opacity:.5; } /* --- Balíčky (landing) ---------------------------------------------------- */ .packages{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.75rem); } .pkg{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--hair-ink); border-radius:var(--r); padding:clamp(2rem,2.6vw,2.6rem); position:relative; transition:transform .4s var(--ease),box-shadow .4s,border-color .4s; } .section--dark .pkg,.section--surface .pkg{ background:var(--surface); border-color:rgba(212,168,92,.16); } .pkg:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--gold); } .pkg--featured{ border-color:var(--gold); box-shadow:0 18px 50px -30px rgba(189,132,69,.5); } .pkg__flag{ position:absolute; top:0; left:50%; transform:translate(-50%,-50%); margin:0; background:var(--gold); color:var(--charcoal); border:0; border-radius:100px; padding:.5rem 1rem; font:600 .64rem/1 var(--sans); text-transform:uppercase; letter-spacing:.14em; white-space:nowrap; box-shadow:0 6px 18px -6px rgba(189,132,69,.7); } .section--dark .pkg__flag,.section--surface .pkg__flag{ color:var(--charcoal); } .pkg__name{ font:500 1.35rem/1.2 var(--serif); margin:0 0 .5rem; min-height:2.4em; } .pkg__price{ font:500 clamp(1.9rem,3vw,2.5rem)/1 var(--serif); color:var(--ink); margin-bottom:.35rem; } .section--dark .pkg__price,.section--surface .pkg__price{ color:var(--cream); } .pkg__price small{ font:600 .68rem/1 var(--sans); text-transform:uppercase; letter-spacing:.1em; color:var(--gold-text); display:block; margin-bottom:.5rem; } .section--dark .pkg__price small,.section--surface .pkg__price small{ color:var(--gold-light); } .pkg__note{ font:400 .95rem/1.55 var(--sans); color:var(--muted); margin:.35rem 0 1.9rem; min-height:3.1em; text-wrap:pretty; } .section--dark .pkg__note,.section--surface .pkg__note{ color:var(--muted-dark); } .pkg__list{ display:flex; flex-direction:column; gap:.85rem; } .pkg .pkg__list{ margin:0 0 2.4rem; padding-top:1.9rem; border-top:1px solid var(--hair-ink); } .section--dark .pkg .pkg__list,.section--surface .pkg .pkg__list{ border-color:rgba(212,168,92,.18); } .pkg__list li{ display:flex; gap:.6rem; align-items:flex-start; font:400 .92rem/1.45 var(--sans); color:var(--muted); } .section--dark .pkg__list li,.section--surface .pkg__list li{ color:var(--muted-dark); } .pkg__list svg{ flex:none; width:17px; height:17px; color:var(--gold-text); margin-top:.15rem; } .section--dark .pkg__list svg,.section--surface .pkg__list svg{ color:var(--gold-light); } .pkg .btn{ margin-top:auto; } .pkg--wide{ grid-column:1/-1; flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; } .pkg--wide .pkg__name{ margin:0; min-height:0; } .pkg--wide .pkg__note{ min-height:0; margin:.35rem 0 0; } /* Ceník list (mnoho položek – zážitky) */ .pricelist{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--hair-ink); border:1px solid var(--hair-ink); border-radius:var(--r); overflow:hidden; } .section--dark .pricelist,.section--surface .pricelist{ background:rgba(212,168,92,.16); border-color:rgba(212,168,92,.16); } .pricelist__row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.05rem 1.4rem; background:var(--white); transition:background .3s; } .section--dark .pricelist__row,.section--surface .pricelist__row{ background:var(--surface); } .pricelist__row:hover{ background:var(--cream); } .section--dark .pricelist__row:hover,.section--surface .pricelist__row:hover{ background:#1c222b; } .pricelist__name{ font:400 1rem/1.35 var(--sans); color:var(--ink); } .section--dark .pricelist__name,.section--surface .pricelist__name{ color:var(--cream); } .pricelist__price{ display:flex; align-items:center; gap:1rem; flex:none; } .pricelist__price b{ font:500 1.15rem/1 var(--serif); color:var(--ink); white-space:nowrap; } .section--dark .pricelist__price b,.section--surface .pricelist__price b{ color:var(--cream); } .pricelist__book{ font:600 .72rem/1 var(--sans); text-transform:uppercase; letter-spacing:.08em; color:var(--gold-text); border:1px solid var(--hair-ink); background:transparent; border-radius:var(--r); padding:.55rem .8rem; cursor:pointer; white-space:nowrap; transition:background .3s,color .3s,border-color .3s; } .pricelist__book:hover{ background:var(--gold); border-color:var(--gold); color:var(--charcoal); } .section--dark .pricelist__book,.section--surface .pricelist__book{ color:var(--gold-light); border-color:rgba(212,168,92,.28); } /* Vždy v ceně */ .included{ display:flex; flex-wrap:wrap; gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; } .included__item{ flex:1 1 220px; display:flex; gap:.9rem; align-items:center; padding:1.4rem 1.5rem; background:var(--charcoal); } .section--surface .included__item{ background:var(--surface); } .included__item svg{ flex:none; width:28px; height:28px; color:var(--gold-light); } .included__item b{ font:500 1.02rem/1.3 var(--sans); color:var(--cream); } .included__item span{ display:block; font:400 .85rem/1.4 var(--sans); color:var(--muted-dark); margin-top:.15rem; } /* --- Prozaická sekce (unikátní obsah) ------------------------------------- */ .packages--two{ grid-template-columns:repeat(2,minmax(0,1fr)); } /* --- Prozaická sekce – max-width --- */ .prose{ max-width:72ch; } .prose p{ font:400 clamp(1.02rem,1.2vw,1.14rem)/1.75 var(--sans); color:var(--muted); margin:0 0 1.25rem; text-wrap:pretty; } .section--dark .prose p,.section--surface .prose p{ color:var(--muted-dark); } .prose p:last-child{ margin-bottom:0; } .answer-block{ position:relative; padding-left:1.5rem; border-left:2px solid var(--gold); } .answer-block p:first-child{ color:var(--ink); font-weight:400; } .section--dark .answer-block p:first-child,.section--surface .answer-block p:first-child{ color:var(--cream); } /* --- FAQ ------------------------------------------------------------------ */ .faq{ max-width:860px; margin-inline:auto; } .faq__item{ border-bottom:1px solid var(--hair-ink); } .section--dark .faq__item,.section--surface .faq__item{ border-color:rgba(212,168,92,.18); } .faq__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; text-align:left; background:transparent; border:0; cursor:pointer; padding:1.5rem 0; font:500 clamp(1.1rem,1.6vw,1.35rem)/1.35 var(--serif); color:var(--ink); } .section--dark .faq__q,.section--surface .faq__q{ color:var(--cream); } .faq__q:hover{ color:var(--gold-text); } .section--dark .faq__q:hover,.section--surface .faq__q:hover{ color:var(--gold-light); } .faq__icon{ flex:none; width:26px; height:26px; position:relative; } .faq__icon::before,.faq__icon::after{ content:""; position:absolute; top:50%; left:50%; width:14px; height:1.5px; background:var(--gold); transform:translate(-50%,-50%); transition:transform .3s var(--ease); } .faq__icon::after{ transform:translate(-50%,-50%) rotate(90deg); } .faq__item.is-open .faq__icon::after{ transform:translate(-50%,-50%) rotate(0); } .faq__a{ overflow:hidden; height:0; transition:height .35s var(--ease); } .faq__a-inner{ padding:0 0 1.5rem; font:400 clamp(1rem,1.2vw,1.08rem)/1.7 var(--sans); color:var(--muted); max-width:70ch; text-wrap:pretty; } .section--dark .faq__a-inner,.section--surface .faq__a-inner{ color:var(--muted-dark); } .faq__a-inner strong{ color:var(--ink); font-weight:600; } .section--dark .faq__a-inner strong,.section--surface .faq__a-inner strong{ color:var(--cream); } /* --- Kontakt / Footer ----------------------------------------------------- */ .contact__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,4vw,4rem); } .contact__list{ display:flex; flex-direction:column; gap:1.5rem; margin-top:2rem; } .contact__item{ display:flex; gap:1rem; align-items:flex-start; } .contact__item svg{ flex:none; width:24px; height:24px; color:var(--gold-text); margin-top:.15rem; } .contact__item b{ display:block; font:600 .74rem/1 var(--sans); text-transform:uppercase; letter-spacing:.1em; color:var(--gold-text); margin-bottom:.4rem; } .contact__item a,.contact__item p{ font:500 1.2rem/1.4 var(--serif); color:var(--ink); margin:0; } .contact__item a{ transition:color .25s; } .contact__item a:hover{ color:var(--gold-text); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--gold); } .contact__map{ border:1px solid rgba(212,168,92,.22); border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; background:var(--surface); position:relative; } .contact__map .placeholder-stripe{ position:absolute; inset:0; } .site-footer{ position:relative; background:#0a0d11; color:var(--muted-dark); padding-block:clamp(3.5rem,6vw,5.5rem) 2.25rem; border-top:1px solid rgba(212,168,92,.16); } .site-footer::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,rgba(212,168,92,.55),transparent); } .footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(2rem,4vw,3.5rem); padding-bottom:3rem; border-bottom:1px solid rgba(212,168,92,.14); } .footer__brand b{ font:500 1.3rem/1 var(--serif); color:var(--cream); display:block; margin-bottom:.75rem; } .footer__logo{ height:46px; width:auto; display:block; margin-bottom:1.1rem; } .nav__logo-img{ height:40px; width:auto; display:block; } .footer__brand p{ font:400 .95rem/1.7 var(--sans); margin:0; max-width:38ch; } .footer__group{ font:400 .85rem/1.6 var(--sans); color:rgba(245,242,238,.5); margin:.9rem 0 0; max-width:38ch; } .footer__col h4{ font:600 .74rem/1 var(--sans); text-transform:uppercase; letter-spacing:.14em; color:var(--gold-light); margin:0 0 1.5rem; padding-bottom:.85rem; position:relative; } .footer__col h4::after{ content:""; position:absolute; left:0; bottom:0; width:26px; height:1px; background:var(--gold); } .footer__col ul{ display:flex; flex-direction:column; gap:.7rem; list-style:none; margin:0; padding:0; } .footer__col a{ color:var(--muted-dark); font:400 .95rem/1.4 var(--sans); } .footer__col a:hover{ color:var(--gold-light); } .footer__nap{ font-style:normal; display:flex; flex-direction:column; gap:.8rem; } .footer__nap a,.footer__nap span{ display:flex; align-items:center; gap:.6rem; color:var(--muted-dark); font:400 .95rem/1.35 var(--sans); } .footer__nap a:hover{ color:var(--gold-light); } .footer__nap svg{ flex:none; width:16px; height:16px; color:var(--gold-light); } .footer__bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding-top:2rem; font:400 .82rem/1.5 var(--sans); } .footer__bottom a{ color:var(--muted-dark); } .footer__bottom a:hover{ color:var(--gold-light); } /* --- Sticky mobile bar ---------------------------------------------------- */ .sticky-bar{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; gap:.6rem; padding:.6rem .6rem calc(.6rem + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--charcoal) 92%,transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid rgba(212,168,92,.2); transform:translateY(120%); transition:transform .4s var(--ease); } .sticky-bar.is-visible{ transform:translateY(0); } .sticky-bar .btn{ flex:1; min-height:50px; } /* --- Obrázkový placeholder (jen mapa/fallback) ---------------------------- */ .placeholder-stripe{ background: repeating-linear-gradient(135deg,rgba(212,168,92,.08) 0 10px,transparent 10px 20px), var(--surface); display:grid; place-items:center; color:var(--muted-dark); font:600 .72rem/1.4 ui-monospace,'SFMono-Regular',Menlo,monospace; text-transform:uppercase; letter-spacing:.1em; text-align:center; padding:1rem; } /* --- Scroll-reveal -------------------------------------------------------- */ @media (prefers-reduced-motion:no-preference){ html.js .reveal{ opacity:0; transform:translateY(28px); } html.js .reveal.is-visible{ opacity:1; transform:none; transition:opacity .8s var(--ease),transform .8s var(--ease); } } /* Pozn.: reveal řídí výhradně IntersectionObserver (site.js) — scroll-driven view() timeline způsobovala zaseknutí prvků dole na stránce na částečné opacitě. */ /* --- Responsivita --------------------------------------------------------- */ @media (max-width:1279.98px){ /* FIX2: U1 – hamburger režim už pod 1280px (nav přetékala 961–1280) */ .nav__links{ display:none; } .nav__toggle{ display:inline-flex; } .site-header--open .nav__links{ display:flex; position:fixed; inset:92px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:var(--charcoal); border-bottom:1px solid rgba(212,168,92,.2); padding:1rem var(--pad) 1.5rem; max-height:calc(100svh - 92px); overflow:auto; } .site-header--open .nav__links a{ padding:1rem .25rem; border-bottom:1px solid rgba(212,168,92,.12); font-size:1.05rem; white-space:normal; } .site-header--open .nav__links a::after{ display:none; } .nav__phone{ display:none; } /* FIX B5: telefon v nav jen na desktopu */ } @media (max-width:960px){ .sticky-bar{ display:flex; } /* FIX B6: sticky bar už od 960px */ .site-footer{ padding-bottom:88px; } /* FIX B7: aby sticky bar nepřekrýval footer */ } @media (max-width:1024px){ .booking__grid,.vehicle__grid,.about__grid,.contact__grid{ grid-template-columns:1fr; } .steps{ grid-template-columns:repeat(2,1fr); } .step::before{ display:none; } .cards,.platforms,.reviews,.packages{ grid-template-columns:repeat(2,1fr); } .reviews .review:last-child{ grid-column:1/-1; } } @media (max-width:760px){ .hero__metrics{ grid-template-columns:1fr 1fr; } .cards,.platforms,.reviews,.packages,.packages--two,.pricelist,.form__grid,.about__stats{ grid-template-columns:1fr; } .reviews .review:last-child{ grid-column:auto; } .features{ grid-template-columns:1fr; } .steps{ grid-template-columns:1fr; } .footer__top{ grid-template-columns:1fr; gap:2.5rem; } .pkg--wide{ flex-direction:column; align-items:flex-start; } .gallery__grid{ gap:.6rem; } .pricelist__book{ min-height:44px; } } @media (max-width:420px){ .hero__actions .btn{ width:100%; } /* FIX3: M4 – metriky zůstávají 2×2 i pod 420px (pravidlo 1 sloupce zrušeno) */ } /* galerie: 3 sloupce 1024–1439px, kurátorský 4sloupcový vzor od 1440px výše */ @media (min-width:2560px){ :root{ --maxw:1560px; } .gallery__grid{ grid-template-columns:repeat(4,1fr); } /* pasparta na velmi velkých displejích */ body{ box-shadow:inset 0 0 0 1px rgba(212,168,92,.12); } .section{ border-left:1px solid rgba(212,168,92,.06); border-right:1px solid rgba(212,168,92,.06); } } /* --- Print (zásady / 404 čitelné) ----------------------------------------- */ @media print{ .site-header,.sticky-bar,.hero__media video,.video__play{ display:none!important; } *{ color:#000!important; background:#fff!important; } } /* ========================================================================== FIX blok (konsolidace auditů 22.7.2026) ========================================================================== */ /* FIX A4: počítadla bez poskakování šířky číslic */ [data-count-to]{ font-variant-numeric:tabular-nums; } /* FIX B5: klikatelný telefon v desktop navigaci (skryto pod 960px v media bloku výše) */ .nav__phone{ font:600 .9rem/1 var(--sans); color:#F5F2EE; white-space:nowrap; padding:.7rem .5rem; } .nav__phone:hover{ color:var(--gold-light); } /* FIX C1: chybový stav odeslání formuláře (endpoint selhal) */ .form__error{ margin-top:1rem; font:500 .92rem/1.5 var(--sans); color:#b5443a; } .form__error a{ color:#b5443a; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; } /* FIX C5: sekundární Rezervovat na kartách služeb – musí být nad overlay .card__link::after */ .card__book{ position:relative; z-index:1; margin-top:1rem; } /* FIX C6: trust mikrořádek pod gridem balíčků */ .packages__trust{ margin:1.5rem 0 0; text-align:center; font:500 .85rem/1.4 var(--sans); color:var(--muted); } .section--dark .packages__trust,.section--surface .packages__trust{ color:var(--muted-dark); } .packages__trust .star{ color:var(--gold-text); } .section--dark .packages__trust .star,.section--surface .packages__trust .star{ color:var(--gold-light); } /* FIX D4: zvýrazněný řádek ceníku (Statek Bernard) */ .pricelist__row--highlight{ border-left:3px solid var(--gold); } /* FIX D5: rozbalovací detail řádků ceníku (accordion vzor FAQ, sdílí JS .faq__item/.faq__q/.faq__a) */ .pricelist__item{ background:var(--white); } .section--dark .pricelist__item,.section--surface .pricelist__item{ background:var(--surface); } .pricelist__item.faq__item{ border-bottom:0; } /* 1px linky dodává grid ceníku */ .pricelist__item .pricelist__row{ background:transparent; } .pricelist__item .faq__q{ width:auto; flex:1; min-width:0; padding:0; justify-content:flex-start; gap:.75rem; font:400 1rem/1.35 var(--sans); color:var(--ink); } .section--dark .pricelist__item .faq__q,.section--surface .pricelist__item .faq__q{ color:var(--cream); } .pricelist__item .faq__icon{ width:20px; height:20px; } .pricelist__item .faq__a-inner{ padding:0 1.4rem 1.15rem; font-size:.92rem; } .pricelist__item .faq__a-inner ul{ margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.3rem; } .pricelist__item .faq__a-inner li{ list-style:disc; } .pricelist__item .faq__a-inner li::marker{ color:var(--gold-text); } .section--dark .pricelist__item .faq__a-inner li::marker,.section--surface .pricelist__item .faq__a-inner li::marker{ color:var(--gold-light); } .pricelist__item .faq__a-inner .pricelist__book{ margin-top:.9rem; display:inline-block; } /* FIX E4: dotyková plocha Rezervovat v ceníku globálně */ .pricelist__book{ min-height:44px; } /* FIX4: průřezová pravidla balíčků (osoby, dárkový poukaz) – jemný caption pod gridem/ceníkem */ .packages__meta{ margin:1.25rem 0 0; text-align:center; font:400 .85rem/1.55 var(--sans); color:var(--muted); } .section--dark .packages__meta,.section--surface .packages__meta{ color:var(--muted-dark); } /* FIX E8: portrétní fotky galerie neořezávat na 4:3 */ /* FIX2: U1 – CTA Rezervovat mimo .nav__links (viditelné i v hamburger režimu); doladění malých šířek */ @media (max-width:479.98px){ .nav{ gap:.9rem; } .nav__cta{ padding:.8rem 1.1rem; min-height:46px; } } /* FIX2: U2 – karta „Kde nás najdete" místo mapového placeholderu */ .map-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.85rem; text-align:center; min-height:100%; padding:clamp(2rem,4vw,3.5rem) clamp(1.5rem,3vw,2.5rem); background:var(--cream); border:1px solid var(--hair-ink); border-radius:var(--r); } .map-card__pin{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:var(--gold-text); background:color-mix(in srgb,var(--gold) 14%,transparent); border:1px solid var(--gold); } .map-card__pin svg{ width:26px; height:26px; } .map-card .h3{ margin:0; } .map-card__addr{ font:400 1.02rem/1.5 var(--sans); color:var(--muted); margin:0 0 .5rem; } /* FIX2: U3c – pojistka reveal, když site.js nenaběhne (html.js-late přidá inline skript po 2,5 s) */ html.js-late .reveal{ opacity:1; transform:none; } /* FIX2: U7 + I10 – plynulé ztlumení obrázku lightboxu při přepínání */ .lightbox__img{ transition:opacity .25s; } /* FIX2: K1 – Momentky na landing pages (3 fotky v řadě, sdílí .gallery__item + lightbox) */ .moments{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.6rem,1.2vw,1rem); } @media (max-width:760px){ .moments{ grid-template-columns:1fr; } } /* FIX2: K3 – footer CTA řádek nad footer__bottom */ .footer__cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding-block:1.5rem; border-bottom:1px solid rgba(212,168,92,.14); } .footer__cta p{ margin:0; font:400 .95rem/1.5 var(--sans); color:var(--muted-dark); } /* FIX2: K6 – disclosure nepovinných polí formuláře */ .form__more{ grid-column:1/-1; } .form__more summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; font:600 .85rem/1.3 var(--sans); letter-spacing:.02em; color:var(--gold-text); padding:.25rem 0; border-bottom:1px dashed var(--hair-ink); transition:color .25s,border-color .25s; } .form__more summary::-webkit-details-marker{ display:none; } .form__more summary:hover{ color:var(--gold); border-color:var(--gold); } .form__more[open] summary{ margin-bottom:1.1rem; } .form__more .form__grid{ margin-top:0; } /* FIX2: K7 – noscript hláška ve formuláři */ .form__noscript{ margin:1rem 0 0; font:500 .95rem/1.5 var(--sans); color:var(--ink); } /* FIX2: K8 – odkaz „Ověřit termín" pod počítadlem lightboxu */ .lightbox__count{ bottom:calc(clamp(1rem,3vw,2rem) + 2.1rem); } .lightbox__cta{ position:absolute; bottom:clamp(1rem,3vw,2rem); left:50%; transform:translateX(-50%); font:600 .78rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; color:var(--gold-light); padding-bottom:.3rem; border-bottom:1px solid rgba(212,168,92,.45); } .lightbox__cta:hover{ color:var(--gold); border-color:var(--gold); } /* FIX2: I5 – focus kontrast na světlých sekcích (zlatá --gold má na bílé/cream slabý kontrast) */ .section--light :focus-visible,.section--cream :focus-visible{ outline-color:var(--gold-text); } /* FIX2: I7 – placeholder na cream inputech. Pozn.: zadaná hodnota .55 vychází ~3,5:1, proto zvýšeno na .65 ≈ 4,7:1 na pozadí #F5F2EE (požadavek ≥ 4,5:1). */ .field input::placeholder,.field textarea::placeholder{ color:rgba(24,36,51,.65); } /* ========================================================================== FIX3 blok (mobilní TOP zážitek + luxury telefon a recenze, 23.7.2026) ========================================================================== */ /* FIX3: M2 – ceník na úzkém displeji: cena + tlačítko Rezervovat na vlastní řádek */ @media (max-width:520px){ .pricelist__row{ flex-wrap:wrap; } .pricelist__price{ width:100%; justify-content:space-between; padding-top:.5rem; } } /* FIX3: M4 – kompaktnější hero metriky na mobilu (mřížka 2×2 zůstává) */ @media (max-width:760px){ .metric{ padding:.9rem 1rem; } } /* FIX3: M5 – signature pan na mobilu: fixní výška, horizontální pan prstem */ @media (max-width:760px){ .signature__stage{ height:46vw; overflow-x:auto; -webkit-overflow-scrolling:touch; } .signature__img{ width:auto; height:100%; max-width:none; } } /* FIX3: M6+L1 – telefon bez duplicity: desktop = zlatá pill vedle CTA (mimo #nav-links), mobil = textová položka .nav__phone viditelná JEN v otevřeném menu */ .nav__phone{ display:none; } @media (max-width:1279.98px){ .site-header--open .nav__phone{ display:block; font-size:1.05rem; padding:1rem .25rem; } } /* FIX3: M7 – lightbox CTA + počítadlo nad home indicator (safe area) */ .lightbox__cta{ bottom:calc(clamp(1rem,3vw,2rem) + env(safe-area-inset-bottom)); } .lightbox__count{ bottom:calc(clamp(1rem,3vw,2rem) + 2.1rem + env(safe-area-inset-bottom)); } /* FIX3: M8 – mikrotexty: všechny font-size pod .75rem zvednuty na min .75rem */ .nav__logo span,.metric span,.card__tag,.card__price small,.platform__count,.platform__go, .leader span,.pkg__flag,.pkg__price small,.pricelist__book,.contact__item b,.footer__col h4, .placeholder-stripe{ font-size:.75rem; } /* FIX3: M9 – mobilní header 68 px (stejné hodnoty drží inline kritické CSS všech 6 stránek) */ @media (max-width:760px){ .nav{ min-height:68px; } .site-header--open .nav__links{ inset:68px 0 auto 0; max-height:calc(100svh - 68px); } [id]{ scroll-margin-top:84px; } } /* FIX3: M10 – breadcrumbs na mobilu skrýt (JSON-LD BreadcrumbList zůstává) */ @media (max-width:760px){ .breadcrumbs{ display:none; } } /* FIX3: M11 – platform karty na mobilu jako kompaktní řádky */ @media (max-width:760px){ .platform{ flex-direction:row; align-items:center; justify-content:space-between; text-align:left; gap:.85rem; padding:1.1rem 1.25rem; } .platform__score{ font-size:1.6rem; } .platform__go{ display:none; } } /* FIX3: L1 – desktopová telefonní pill v hlavičce (skryta pod 1280 px) */ .nav__phone-pill{display:inline-flex;align-items:center;gap:.55rem;min-height:46px;padding:.6rem 1.2rem;border:1px solid rgba(212,168,92,.38);border-radius:999px;color:var(--cream);font:600 .88rem/1 var(--sans);letter-spacing:.03em;font-variant-numeric:tabular-nums;white-space:nowrap;transition:border-color .3s,background .3s,color .3s}.nav__phone-pill svg{width:15px;height:15px;color:var(--gold-light);flex:none}.nav__phone-pill:hover{border-color:var(--gold-light);background:rgba(212,168,92,.1);color:var(--gold-light)}@media (max-width:1279.98px){.nav__phone-pill{display:none}} /* FIX3: L2A – hero trust badge (4 hlavní stránky) */ .hero__trust{display:inline-flex;align-items:center;gap:.65rem;margin:1.1rem 0 2rem;padding:.6rem 1.1rem;border:1px solid rgba(212,168,92,.32);border-radius:999px;background:color-mix(in srgb,var(--charcoal) 55%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:600 .74rem/1.3 var(--sans);text-transform:uppercase;letter-spacing:.09em;color:var(--muted-dark);transition:border-color .3s}.hero__trust-stars{color:var(--gold-light);font-size:.9rem;letter-spacing:.14em}.hero__trust b{font:500 1.05rem/1 var(--serif);color:var(--cream)}.hero__trust:hover{border-color:var(--gold-light);color:var(--cream)}@media (max-width:420px){.hero__trust-txt{white-space:normal}} /* FIX3: L2B – souhrnné hodnocení nad platformami (sekce Reference, index) */ .proof-total{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin:0 auto clamp(2.25rem,3.5vw,3.5rem)}.proof-total b{font:500 clamp(4rem,7vw,5.75rem)/1 var(--serif);letter-spacing:-.02em;color:var(--ink)}.proof-total__meta{display:flex;flex-direction:column;gap:.5rem;text-align:left;padding-left:1.4rem;border-left:1px solid var(--hair-ink)}.proof-total__stars{color:var(--gold);font-size:1.05rem;letter-spacing:.18em}.proof-total__meta span:last-child{font:600 .74rem/1.5 var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)} /* FIX3: L2C – mikrocitace u sekce Vůz (index) */ .microquote{margin:2.5rem 0 0;padding-left:1.5rem;border-left:2px solid var(--gold)}.microquote blockquote{margin:0;font:italic 500 clamp(1.1rem,1.6vw,1.35rem)/1.55 var(--serif);color:var(--cream);text-wrap:pretty}.microquote figcaption{margin-top:.75rem;font:600 .72rem/1 var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--muted-dark)}.microquote__stars{color:var(--gold-light);letter-spacing:.16em;margin-right:.6rem} /* FIX5: mobil overflow pojistky (trust badge zalamovani + grid blowout) */ .hero__trust{max-width:100%;flex-wrap:wrap;row-gap:.3rem} .hero__trust-txt{white-space:normal} .hero__content,.hero__inner{max-width:100%;min-width:0} .hero__metrics{grid-template-columns:repeat(4,minmax(0,1fr))} .metric{min-width:0} @media (max-width:760px){.hero__metrics{grid-template-columns:repeat(2,minmax(0,1fr))}} /* FIX5b: kompaktni mobilni hlavicka (soucet sirek prvku prekracoval 390px) */ @media (max-width:480px){.nav{gap:.7rem;min-height:62px}.nav__cta{padding:.65rem .95rem;min-height:42px;font-size:.82rem}.nav__logo img{height:28px}.nav__toggle{width:42px;height:42px;flex:none}.container{padding-inline:1rem}}