/* ========================================================================== styl.css – spoločné štýly pre index.html a rezervacia.html (premenné, reset, typografia, hlavička, pätička, tlačidlá, FAB, modály…) Deklarácie @font-face zostávajú inline v – sú kritické. ========================================================================== */ /* ========================================================================== BRAND – prevzaté z loga a výkladu predajne ========================================================================== */ /* ########################################################################### # NASTAVENIA – tu môžeš bezpečne meniť vzhľad bez znalosti kódu. # # Zmeň číslo/farbu, ulož súbor, obnov stránku v prehliadači (Ctrl+R). # ########################################################################### --lh-nadpis riadkovanie nadpisov. Vyššie číslo = väčšia medzera medzi riadkami (dôležité pri mäkčeňoch a dĺžňoch). 1.05 = tesné, 1.35 = vzdušné. Aktuálne 1.18. --lh-text riadkovanie bežného textu. --sekcia vertikálne medzery medzi sekciami stránky. --red hlavná farba značky. Zmena tu prefarbí celý web. */ :root{ --lh-nadpis: 1.18; --lh-text: 1.68; --sekcia: clamp(54px,7.5vw,100px); --red: #E1211F; --red-dk: #B8171B; --red-soft: #FDECEB; --ink: #14100F; --ink-2: #3B3533; --ink-soft: #6B6360; --line: #E6E1E0; --bg: #FFFFFF; --bg-soft: #F7F5F4; --r: 10px; --r-lg: 16px; --shadow: 0 1px 2px rgba(20,16,15,.06), 0 14px 34px -14px rgba(20,16,15,.22); --shadow-lg: 0 28px 64px -22px rgba(20,16,15,.34); --max: 1180px; --head: 'Oswald', 'Arial Narrow', system-ui, sans-serif; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:86px;-webkit-text-size-adjust:100%} body{ margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; color:var(--ink-2);background:var(--bg);line-height:var(--lh-text);font-size:16.5px; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit} h1,h2,h3,.h{ font-family:var(--head);font-weight:600;text-transform:uppercase; letter-spacing:.015em;line-height:var(--lh-nadpis);color:var(--ink);margin:0 0 .45em; } h1{font-size:clamp(2.3rem,5.9vw,4.4rem);font-weight:700;letter-spacing:.005em;line-height:var(--lh-nadpis)} h2{font-size:clamp(1.85rem,4.1vw,2.9rem);line-height:var(--lh-nadpis)} h3{font-size:1.12rem;letter-spacing:.03em;line-height:1.28} p{margin:0 0 1em} .wrap{max-width:var(--max);margin-inline:auto;padding-inline:20px} section{padding:var(--sekcia) 0} .eyebrow{ display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-size:.85rem; font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:12px; } .eyebrow::before{content:"";width:30px;height:3px;background:var(--red)} .lead{font-size:1.06rem;color:var(--ink-soft);max-width:62ch} .sort-intro{margin-bottom:44px} .sort-intro h2{max-width:700px} .sort-intro .lead{max-width:none;text-wrap:balance} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:15px 28px;border-radius:6px;font-family:var(--head);font-weight:600; font-size:1rem;letter-spacing:.09em;text-transform:uppercase; text-decoration:none;border:2px solid transparent;cursor:pointer; transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease; white-space:nowrap;line-height:1.2; } .btn:hover{transform:translateY(-2px)} .btn-red{background:var(--red);color:#fff} .btn-red:hover{background:var(--red-dk)} .btn-white{background:#fff;color:var(--red)} .btn-white:hover{background:#F3F0EF} .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff} .btn-ghost:hover{background:rgba(255,255,255,.14)} .btn-outline{border-color:var(--ink);color:var(--ink);background:transparent} .btn-outline:hover{background:var(--ink);color:#fff} /* ---------- Header ---------- */ header{ position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:.25s; } header.scrolled{border-color:var(--line);box-shadow:0 6px 22px -16px rgba(20,16,15,.55)} .nav{display:flex;align-items:center;gap:18px;height:76px} .logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0} .logo img{width:48px;height:auto;flex-shrink:0} .logo-txt i{ display:block;font-style:normal;font-family:var(--head);font-size:.82rem;font-weight:600; color:var(--red);letter-spacing:.135em;text-transform:uppercase;line-height:1;margin-bottom:3px; } @media(max-width:420px){.logo-txt i{font-size:.68rem;letter-spacing:.1em}} .logo-txt b{ display:block;font-family:var(--head);font-weight:700;font-size:1.72rem;line-height:.86; text-transform:uppercase;letter-spacing:.13em;color:var(--red); } .nav-links{display:flex;gap:2px;margin-left:auto;align-items:center} .nav-links a{ text-decoration:none;font-family:var(--head);font-size:.94rem;font-weight:500;letter-spacing:.09em; text-transform:uppercase;color:var(--ink-2);padding:10px 13px;border-radius:6px;transition:.16s; } .nav-links a:hover{color:var(--red);background:var(--red-soft)} .nav-links a.nav-hot{color:var(--red);background:var(--red-soft)} .nav-links a.nav-hot:hover{background:#fadcdc} .nav-cta{margin-left:10px} .burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer} .burger span{display:block;width:25px;height:2.5px;background:var(--ink);transition:.25s} .burger span+span{margin-top:6px} .burger.open span:nth-child(1){transform:translateY(8.5px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)} @media(max-width:940px){ .burger{display:block} .nav-links{ position:fixed;inset:76px 0 auto 0;background:#fff;flex-direction:column;align-items:stretch; gap:0;padding:12px 20px 26px;border-bottom:3px solid var(--red);box-shadow:var(--shadow); transform:translateY(-160%);transition:transform .3s cubic-bezier(.4,0,.2,1);margin-left:0; } .nav-links.open{transform:translateY(0)} .nav-links a{padding:15px 8px;font-size:1.1rem;border-bottom:1px solid var(--line)} .nav-cta{margin:16px 0 0} .btn{width:100%} } /* ---------- Low-poly art ---------- */ .poly{stroke-linejoin:round;stroke-linecap:round;fill:none} /* ---------- Hero ---------- */ .hero{position:relative;background:var(--red);color:#fff;overflow:hidden;padding:clamp(40px,5.2vw,66px) 0 clamp(44px,6vw,78px)} .hero::before{ content:"";position:absolute;inset:0; background:radial-gradient(1000px 620px at 88% 10%, rgba(255,255,255,.12), transparent 62%); } .hero-art{position:absolute;bottom:0;opacity:.14;color:#fff;pointer-events:none;line-height:0} .hero-art.art-l{left:0} .hero-art.art-r{right:0} .hero-art svg{display:block} .ha-dog-head{width:clamp(330px,36vw,600px);aspect-ratio:1024/930;height:auto} .ha-cat-head{width:clamp(240px,26vw,430px);aspect-ratio:656/600;height:auto;transform:scaleX(-1)} .hero .wrap{position:relative;z-index:2;max-width:980px} .hero h1{color:#fff} .hero h1 span{display:block} .hero h1 u{text-decoration:none;-webkit-text-stroke:2px #fff;color:transparent;paint-order:stroke} .hero p{color:rgba(255,255,255,.9);font-size:1.14rem;max-width:54ch} .hero-badges{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:24px} .pill{ display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:5px; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28); font-family:var(--head);font-size:.82rem;font-weight:500;letter-spacing:.09em; text-transform:uppercase;color:#fff; } .pill.live{background:#fff;color:var(--red);border-color:#fff} .dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 2s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .hero-note{margin-top:26px;font-size:.94rem;color:rgba(255,255,255,.78)} .hero-claim{font-size:clamp(1.04rem,1.7vw,1.2rem);line-height:1.6;max-width:48ch; color:rgba(255,255,255,.94);margin:0} @media(max-width:900px){ .hero-art.art-r{display:none} .hero-art.art-l{left:0;right:auto;bottom:auto;top:50%;transform:translateY(-50%);opacity:.13} .ha-dog-head{width:clamp(240px,70vw,360px)} .hero-actions .btn{width:100%} } /* ---------- Fakty v hero ---------- */ .trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px clamp(14px,2.4vw,34px); margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.28)} .trust div{font-size:.85rem;color:rgba(255,255,255,.72);line-height:1.45} .trust b{display:block;font-family:var(--head);font-weight:600;text-transform:uppercase; letter-spacing:.1em;font-size:.95rem;color:#fff;margin-bottom:1px} @media(max-width:900px){.trust{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}} /* ---------- Grid / cards ---------- */ .grid{display:grid;gap:16px} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .g2{grid-template-columns:repeat(2,1fr)} @media(max-width:980px){.g4,.g3{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.g4,.g3,.g2{grid-template-columns:1fr}} .card{ background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:26px 24px; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;position:relative;overflow:hidden; } .card::after{content:"";position:absolute;left:0;top:0;width:0;height:3px;background:var(--red);transition:width .3s ease} .card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line)} .card:hover::after{width:100%} .card .ico{width:100%;height:132px;margin-bottom:14px;color:var(--red);display:block} .card .ico use{fill:currentColor} .card p{color:var(--ink-soft);font-size:.93rem;margin:0} .card h3{margin-bottom:6px} .soft{background:var(--bg-soft)} /* ---------- Foto predajne ---------- */ .shopshot{padding:clamp(40px,5vw,64px) 0} .shopshot figure{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)} .shopshot img{width:100%;height:auto;display:block} .shopshot figcaption{ position:absolute;left:0;right:0;bottom:0;padding:44px 24px 18px;color:#fff;font-size:.95rem; background:linear-gradient(transparent,rgba(20,16,15,.82)); } .shopshot figcaption b{font-family:var(--head);text-transform:uppercase;letter-spacing:.08em} @media(max-width:600px){.shopshot figcaption{font-size:.85rem;padding:36px 16px 14px}} /* ---------- Recenzie ---------- */ .rev-top{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between;margin-bottom:32px} .rev-score{display:flex;align-items:center;gap:18px} .rev-num{font-family:var(--head);font-size:3.4rem;font-weight:700;line-height:1;color:var(--ink)} .stars{display:flex;gap:3px;color:#FBBC04} .rev-score small{display:block;color:var(--ink-soft);font-size:.9rem;margin-top:4px} .rev-card{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:24px} .rev-card .stars{margin-bottom:10px} .rev-card p{font-size:.95rem;color:var(--ink-2);margin:0 0 14px} #google-reviews-widget{margin-bottom:28px} .rev-card cite{font-style:normal;font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;color:var(--ink-soft)} /* ---------- Why ---------- */ .why{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} @media(max-width:900px){.why{grid-template-columns:1fr;gap:30px}} .check{list-style:none;padding:0;margin:0;display:grid;gap:16px} .check li{display:flex;gap:14px;align-items:flex-start} .check .n{ flex-shrink:0;width:30px;height:30px;border-radius:5px;background:var(--red);color:#fff; display:grid;place-items:center;font-family:var(--head);font-weight:600;font-size:.95rem; } .check b{display:block;color:var(--ink);font-size:1rem} .check span{color:var(--ink-soft);font-size:.93rem} /* ---------- Hours ---------- */ .hours{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden} .hours-hd{padding:18px 22px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .hours-hd h3{margin:0;color:#fff} .hours ul{list-style:none;margin:0;padding:8px 10px} .hours li{display:flex;justify-content:space-between;gap:16px;padding:11px 14px;border-radius:6px;font-size:.96rem} .hours li.today{background:var(--red-soft);font-weight:600;color:var(--ink)} .hours li span:last-child{font-variant-numeric:tabular-nums;color:var(--ink-soft)} .hours li.today span:last-child{color:var(--red);font-weight:700} .hours li.off span:last-child{color:var(--ink-soft)} .contact-list{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:2px} .contact-list a{display:flex;gap:14px;align-items:center;padding:14px;border-radius:var(--r);text-decoration:none;transition:background .16s} .contact-list a:hover{background:var(--bg-soft)} .contact-list .ci{width:44px;height:44px;border-radius:8px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;flex-shrink:0} .contact-list b{display:block;font-size:.98rem;color:var(--ink)} .contact-list small{color:var(--ink-soft);font-size:.85rem} .map{border:0;width:100%;height:100%;min-height:360px} /* ---------- Cookie lišta ---------- */ .cookiebar{position:fixed;left:14px;right:14px;bottom:14px;z-index:9999;background:#fff; border:1.5px solid var(--line);border-radius:var(--r);box-shadow:0 18px 50px rgba(0,0,0,.18); padding:20px 22px;max-width:560px;display:none} .cookiebar.show{display:block;animation:riseIn .45s cubic-bezier(.22,1,.36,1) backwards} .cookiebar h4{font-family:var(--head);text-transform:uppercase;letter-spacing:.08em; font-size:1.05rem;color:var(--red);margin:0 0 8px} .cookiebar p{font-size:.9rem;color:var(--ink-soft);margin:0 0 16px;line-height:1.55} .cookiebar p a{color:var(--red)} .cookiebar .cb-actions{display:flex;flex-wrap:wrap;gap:10px} .cookiebar .btn{padding:11px 18px;font-size:.86rem} @media(max-width:620px){.cookiebar{left:10px;right:10px;bottom:10px;padding:18px} .cookiebar .cb-actions .btn{flex:1 1 auto}} .cookie-reset{background:none;border:0;padding:0;font:inherit;color:inherit; text-decoration:underline;cursor:pointer} .map-wrap{border-radius:var(--r);overflow:hidden;border:1.5px solid var(--line);height:100%;min-height:360px} .map-consent{ height:100%;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:12px;text-align:center;padding:34px 26px;background:var(--bg);color:var(--ink-soft); } .map-consent svg{color:var(--red)} .map-consent h3{margin:0} .map-consent p{margin:0;font-size:.9rem;max-width:38ch} .map-consent a{font-size:.86rem;color:var(--red);text-decoration:underline;text-underline-offset:3px} /* ---------- Form ---------- */ .form-card{background:#fff;border:1.5px solid var(--line);border-top:4px solid var(--red);border-radius:var(--r);padding:clamp(24px,4vw,38px);box-shadow:var(--shadow)} .field{margin-bottom:16px} .field label{display:block;font-family:var(--head);font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:7px} .field input,.field textarea,.field select{ width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:7px; font:inherit;font-size:.97rem;background:#fff;color:var(--ink);transition:border-color .16s,box-shadow .16s; } .field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 4px rgba(225,33,31,.1)} .field textarea{resize:vertical;min-height:112px} .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .dopyt-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start} @media(max-width:900px){.dopyt-grid{grid-template-columns:1fr;gap:32px}} .field label .opt{font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--ink-soft);font-size:.86em} @media(max-width:560px){.row2{grid-template-columns:1fr}} .consent{display:flex;gap:10px;align-items:flex-start;font-size:.83rem;color:var(--ink-soft);margin:8px 0 20px} .consent input{width:auto;margin-top:3px;flex-shrink:0} .form-msg{display:none;padding:14px 16px;border-radius:7px;font-size:.93rem;font-weight:600;margin-top:14px} .form-msg.ok{display:block;background:#E8F5EC;color:#186B36} .form-msg.err{display:block;background:var(--red-soft);color:var(--red-dk)} .hp{position:absolute;left:-9999px} /* ---------- FAQ ---------- */ .faq{max-width:840px;margin-inline:auto} details{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);margin-bottom:10px;overflow:hidden;transition:border-color .2s} details[open]{border-color:var(--red)} summary{padding:18px 22px;cursor:pointer;font-family:var(--head);font-weight:500;font-size:1.05rem;letter-spacing:.03em;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center} summary::-webkit-details-marker{display:none} summary::after{content:"+";font-size:1.6rem;font-weight:300;color:var(--red);transition:transform .2s;line-height:1} details[open] summary::after{transform:rotate(45deg)} details p{padding:0 22px 20px;margin:0;color:var(--ink-soft);font-size:.95rem} /* ---------- CTA band ---------- */ .band{background:var(--red);color:#fff;border-radius:var(--r-lg);padding:clamp(36px,5vw,60px);text-align:center;position:relative;overflow:hidden} .band-art{position:absolute;left:0;bottom:-30px;width:170px;height:280px;opacity:.18;color:#fff;pointer-events:none} .band h2{color:#fff;position:relative} .band p{color:rgba(255,255,255,.88);max-width:54ch;margin-inline:auto;position:relative} .band .hero-actions{justify-content:center;position:relative} /* ---------- Footer ---------- */ footer{background:var(--ink);color:rgba(255,255,255,.65);padding:56px 0 24px;font-size:.92rem} .f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;margin-bottom:34px} @media(max-width:760px){.f-grid{grid-template-columns:1fr;gap:26px}} footer h4{font-family:var(--head);color:#fff;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;margin:0 0 14px;font-weight:600} footer a{color:rgba(255,255,255,.65);text-decoration:none} footer a:hover{color:#fff} footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px} .socials{display:flex;gap:10px;margin-top:18px} .socials a{width:44px;height:44px;border-radius:8px;background:rgba(255,255,255,.09);display:grid;place-items:center;transition:.2s;color:#fff} .socials a:hover{background:var(--red)} .f-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.84rem} /* ---------- FAB (telefón) ---------- */ /* Telefón je najnižšie tlačidlo jedného zvislého radu v pravom dolnom rohu (zdola nahor: telefón → chat → košík). Poloha aj veľkosť sa čítajú z premenných v chat.css (v var() sú aj záložné hodnoty, keby sa štýl nenačítal), aby celý rad držal pokope na všetkých šírkach. WhatsApp a Messenger tlačidlá sme z radu odstránili, preto tu ich štýly už nie sú. */ .fab{position:fixed;right:var(--fab-okraj,18px);bottom:var(--fab-spodok,18px);z-index:70;display:flex;flex-direction:column-reverse;gap:var(--fab-medzera,12px);align-items:flex-end} .fab a{width:var(--fab-btn,56px);height:var(--fab-btn,56px);border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 8px 22px -6px rgba(0,0,0,.42);transition:transform .18s;text-decoration:none} .fab a:hover{transform:scale(1.08)} .fab .tel{background:var(--red)} @media(max-width:940px){ .fab a svg{width:24px;height:24px} } /* ---------- Animácie ---------- */ @keyframes riseIn{from{opacity:0;transform:translateY(28px)}} @keyframes fadeIn{from{opacity:0}} .js .hero .wrap > *{animation:riseIn .9s cubic-bezier(.22,1,.36,1) backwards} .js .hero-badges{animation-delay:.06s} .js .hero h1{animation-delay:.16s} .js .hero .wrap > p{animation-delay:.30s} .js .hero-actions{animation-delay:.40s} .js .hero-note{animation-delay:.50s} .js .trust{animation-delay:.60s} .js .hero-art{animation:fadeIn 1.6s ease .25s backwards} .hero-art svg{will-change:transform} .js .rv{opacity:0;transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)} .js .rv.in{opacity:1;transform:none} /* ikony sortimentu sa „nakreslia“ zhora nadol */ .js .card .ico{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s cubic-bezier(.22,1,.36,1) .1s} .js .card.in .ico{clip-path:inset(0 0 0 0)} /* číslované body v Prečo my */ .js .check .n{transform:scale(.5);opacity:0;transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .4s} .js .check li.in .n{transform:none;opacity:1} .nav-links a{position:relative} .nav-links a::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px; background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.22,1,.36,1)} .nav-links a:hover::after{transform:scaleX(1)} .nav-cta::after{display:none} @media(prefers-reduced-motion:reduce){ .js .rv,.js .hero .wrap > *,.js .hero-art,.js .card .ico,.js .check .n{ animation:none!important;transition:none!important;opacity:1!important;transform:none!important;clip-path:none!important} }