/* ========================================================= THRILLIDEA — design & printing Spoločný štýl pre celý web ========================================================= */ :root{ --ink:#0a0a0b; --ink-2:#141417; --ink-3:#1e1e23; --paper:#f2f1ed; --paper-2:#e4e2dc; --volt:#e9ff1f; --sky:#5fc9e3; --sky-2:#a9e5f3; --white:#fff; --mute:#8d8d95; --mute-2:#5d5d66; --line:rgba(255,255,255,.13); --line-d:rgba(10,10,11,.14); --c:#00aeef; --m:#ec008c; --pad:clamp(18px,5vw,64px); --max:1280px; /* akcent podstránky – prepisuje sa inline v */ --acc:#e9ff1f; --acc-ink:#0a0a0b; } *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--ink);color:var(--white); font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden; } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit} :focus-visible{outline:3px solid var(--volt);outline-offset:3px} .skip{position:absolute;left:-9999px;top:0;background:var(--volt);color:#000;padding:12px 18px;font-weight:700;z-index:200} .skip:focus{left:12px;top:12px} .wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- typografia ---------- */ .dsp{ font-family:'Archivo',system-ui,sans-serif;font-weight:800;text-transform:uppercase; font-variation-settings:'wdth' 112;letter-spacing:-.005em;line-height:.99; } .lbl{ font-family:'Archivo',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.18em; text-transform:uppercase;font-variation-settings:'wdth' 105; } h1,h2,h3,h4{margin:0} p{margin:0} /* ---------- tlačidlá ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:'Archivo',sans-serif;font-weight:800;font-size:13.5px;letter-spacing:.07em; text-transform:uppercase;padding:15px 26px;border:2px solid var(--volt);background:var(--volt); color:#0a0a0b;cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease; } .btn:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--sky)} .btn:active{transform:none;box-shadow:none} .btn--ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.35)} .btn--ghost:hover{border-color:var(--white);box-shadow:5px 5px 0 rgba(95,201,227,.65)} .btn--dark{background:var(--ink);color:var(--volt);border-color:var(--ink)} .btn--dark:hover{box-shadow:5px 5px 0 rgba(10,10,11,.3)} .btn--sm{padding:11px 18px;font-size:12px} /* ---------- utility lišta ---------- */ .util{background:var(--ink-2);border-bottom:1px solid var(--line);font-size:13px} .util-in{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;padding:9px 0;color:#c2c2c9} .util a{display:inline-flex;align-items:center;gap:7px} .util a:hover{color:var(--volt)} .util .sep{margin-left:auto;color:var(--mute)} .ico{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9} /* ---------- hlavička ---------- */ .hdr{position:sticky;top:0;z-index:90;background:rgba(10,10,11,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)} .hdr-in{display:flex;align-items:center;gap:20px;height:74px} .logo{display:flex;align-items:center;gap:12px;margin-right:auto} .logo img{width:34px;height:auto} .logo b{font-family:'Bodoni Moda',Georgia,serif;font-weight:500;font-size:23px;letter-spacing:.005em;display:block} .logo i{display:block;font-style:normal;font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute);margin-top:1px} .nav{display:flex;gap:2px;align-items:center} .nav>a,.nav>.drop>button{ display:inline-flex;align-items:center;gap:7px;padding:9px 13px;background:none;border:0;cursor:pointer; font-family:'Archivo',sans-serif;font-weight:600;font-size:13px;letter-spacing:.05em; text-transform:uppercase;color:#cfcfd6;position:relative; } .nav>a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;background:var(--volt);transform:scaleX(0);transform-origin:left;transition:transform .22s ease} .nav>a:hover{color:#fff} .nav>a:hover::after{transform:scaleX(1)} .nav>a[aria-current="page"]{color:#fff} .nav>a[aria-current="page"]::after{transform:scaleX(1);background:var(--sky)} .drop{position:relative} .drop>button:hover{color:#fff} .drop-menu{ position:absolute;top:100%;left:0;min-width:640px;padding:20px;background:#0f0f12; border:1px solid var(--line);display:none;grid-template-columns:repeat(3,1fr);gap:2px 20px; } .drop[data-open="true"] .drop-menu{display:grid} .drop-menu a{padding:8px 10px;font-size:14px;color:#c9c9d1} .drop-menu a:hover{background:var(--ink-3);color:var(--volt)} .caret{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)} .burger{display:none;width:46px;height:46px;border:1px solid var(--line);background:transparent;color:#fff;align-items:center;justify-content:center;cursor:pointer} .burger span{display:block;width:20px;height:2px;background:currentColor;position:relative} .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor} .burger span::before{top:-6px}.burger span::after{top:6px} .mnav{display:none;border-top:1px solid var(--line);background:var(--ink-2);max-height:72vh;overflow:auto} .mnav[data-open="true"]{display:block} .mnav a{display:block;padding:14px var(--pad);border-bottom:1px solid var(--line);font-family:'Archivo',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13.5px} .mnav .sub{font-family:'Inter Tight',sans-serif;font-weight:400;text-transform:none;letter-spacing:0;font-size:14.5px;color:#b9b9c1;padding-left:calc(var(--pad) + 16px)} /* ---------- sekcie ---------- */ .sec{padding:clamp(56px,8vw,110px) 0} .sec--paper{background:var(--paper);color:var(--ink)} .sec--soft{background:var(--ink-2)} .sec--tight{padding-top:0} .head{max-width:70ch;margin-bottom:clamp(30px,4.5vw,52px)} .head .lbl{color:var(--volt);display:inline-block;margin-bottom:14px} .sec--paper .head .lbl{color:#0a0a0b;background:var(--volt);padding:5px 10px} .head h2{font-size:clamp(27px,4.2vw,50px)} .head p{margin-top:16px;color:#bcbcc4;font-size:clamp(15px,1.5vw,17.5px);max-width:60ch} .sec--paper .head p{color:var(--mute-2)} /* ---------- hero (domov) ---------- */ .hero{position:relative;padding:clamp(44px,7vw,82px) 0 clamp(34px,5vw,54px);overflow:hidden} .hero::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(620px 400px at 8% 0%,rgba(233,255,31,.09),transparent 62%), radial-gradient(560px 420px at 96% 88%,rgba(95,201,227,.14),transparent 66%)} .hero-in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,60px);align-items:center} .hero h1{font-size:clamp(31px,5.6vw,66px)} .hero h1 .y{color:var(--volt)} .hero h1 .b{color:var(--sky)} .hero-sub{margin-top:22px;max-width:52ch;font-size:clamp(15px,1.6vw,18.5px);color:#c5c5cd;line-height:1.62} .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} .hero-facts{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)} .hero-facts div{display:flex;align-items:center;gap:9px;color:#b9b9c1;font-size:14px} .hero-facts svg{color:var(--volt)} /* podpisový prvok – sútlač CMYK */ .lockup{display:grid;gap:6px;justify-items:start;padding:clamp(20px,3vw,34px);border:1px solid var(--line);background:#0f0f12} .lockup .row{display:flex;align-items:center;gap:12px} .lockup .arw{width:16px;height:16px;flex:none;border-left:3px solid var(--volt);border-bottom:3px solid var(--volt)} .lockup .arw.b{border-color:var(--sky)} .lockup .w{ font-family:'Archivo',sans-serif;font-weight:900;font-variation-settings:'wdth' 118; text-transform:uppercase;font-size:clamp(28px,4.4vw,54px);line-height:1;position:relative;color:#fff; } .lockup .w[data-t]::before,.lockup .w[data-t]::after{ content:attr(data-t);position:absolute;left:0;top:0;mix-blend-mode:screen;pointer-events:none; transition:transform .8s cubic-bezier(.2,.8,.25,1); } .lockup .w[data-t]::before{color:var(--c);transform:translate(var(--gx,-.045em),var(--gy,.03em))} .lockup .w[data-t]::after{color:var(--m);transform:translate(calc(var(--gx,-.045em)*-1),calc(var(--gy,.03em)*-1))} .lockup.pre .w[data-t]{--gx:-.13em;--gy:.08em} .lockup:hover .w[data-t]{--gx:-.085em;--gy:.055em} .lockup .tag{margin-top:14px;color:var(--mute);font-size:12.5px} /* ---------- vzorový pás z brandových dlaždíc ---------- */ .tiles{display:grid;grid-template-columns:repeat(8,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .tile{height:clamp(66px,8.5vw,116px);background:var(--paper);color:var(--ink);display:grid;place-items:center;border-right:1px solid rgba(10,10,11,.12)} .tile:last-child{border-right:0} .tile--y{background:var(--volt)} .tile--b{background:var(--sky)} .tile--k{background:var(--ink);color:var(--paper)} .tile--acc{background:var(--acc);color:var(--acc-ink)} .tile svg{width:60%;height:60%} /* ---------- klienti ---------- */ .clients{border-block:1px solid var(--line);overflow:hidden;background:#0f0f12} .clients-track{display:flex;width:max-content;animation:marq 46s linear infinite} .clients-set{display:flex;align-items:center} .clients-set span{padding:0 30px;font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:#6f6f79;white-space:nowrap;line-height:64px} @keyframes marq{to{transform:translateX(-50%)}} .clients:hover .clients-track{animation-play-state:paused} /* ---------- prehľad služieb (domov) ---------- */ .svcs{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line)} .svc{background:var(--ink);padding:clamp(24px,3.2vw,40px);transition:background .25s ease} .svc:hover{background:#111115} .svc-top{display:flex;align-items:center;gap:14px;margin-bottom:16px} .svc-ico{width:44px;height:44px;flex:none;display:grid;place-items:center;background:var(--volt);color:#0a0a0b} .svc:nth-child(2) .svc-ico,.svc:nth-child(4) .svc-ico{background:var(--sky)} .svc-ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8} .svc h3{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(17px,2vw,22px);font-variation-settings:'wdth' 108} .svc>p{color:#b4b4bd;font-size:15px;max-width:46ch} .svc ul{list-style:none;margin:20px 0 0;padding:0} .svc li{padding:11px 0;border-top:1px solid var(--line);font-size:14.5px} .svc li a{display:flex;gap:12px;align-items:baseline;color:#d6d6dd} .svc li a:hover{color:var(--volt)} .svc li b{font-weight:600;color:#fff} .svc li a:hover b{color:var(--volt)} .svc li span{color:var(--mute);font-size:13.5px} .dash{color:var(--volt);flex:none} /* ---------- proces ---------- */ .proc{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line-d)} .sec:not(.sec--paper) .proc{border-top-color:var(--line)} .step{padding:26px 22px 8px;border-right:1px solid var(--line-d)} .sec:not(.sec--paper) .step{border-right-color:var(--line)} .step:last-child{border-right:0} .step .n{font-family:'Archivo',sans-serif;font-weight:900;font-size:12px;letter-spacing:.16em;border-bottom:3px solid var(--acc);padding-bottom:4px;display:inline-block} .step h3{margin:16px 0 8px;font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;font-size:16px} .step p{color:var(--mute-2);font-size:14px} .sec:not(.sec--paper) .step p{color:#b1b1ba} /* ---------- karty / referencie ---------- */ .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .card{background:var(--ink);color:#fff;position:relative;overflow:hidden;aspect-ratio:4/3;display:block} .card-art{position:absolute;inset:0;transition:transform .55s cubic-bezier(.2,.8,.25,1)} .card:hover .card-art{transform:scale(1.05)} .card-cap{position:absolute;inset:auto 0 0 0;padding:16px 18px;background:linear-gradient(transparent,rgba(10,10,11,.92) 58%);display:flex;justify-content:space-between;align-items:flex-end;gap:14px} .card-cap b{font-size:15px;font-weight:600} .card-cap .lbl{color:var(--volt)} .art1{background:repeating-linear-gradient(180deg,var(--volt) 0 10px,var(--ink) 10px 28px)} .art2{background:var(--ink-3);display:grid;place-items:center} .art3{background:conic-gradient(from 45deg at 50% 50%,var(--sky) 0 25%,var(--ink-2) 0 50%,var(--sky) 0 75%,var(--ink-2) 0)} .art4{background:radial-gradient(circle,var(--paper) 1.7px,transparent 2px) 0 0/13px 13px,var(--ink)} .art5{background:linear-gradient(118deg,var(--volt) 0 47%,var(--ink) 47% 53%,var(--sky) 53%)} .art6{background:var(--ink-2);display:grid;place-items:center} .art7{background:repeating-linear-gradient(45deg,var(--ink-3) 0 14px,var(--ink) 14px 28px)} .art8{background:linear-gradient(180deg,var(--sky) 0 35%,var(--paper) 35% 65%,var(--ink) 65%)} .art9{background:radial-gradient(circle at 30% 30%,var(--volt) 0 22%,transparent 22%),radial-gradient(circle at 72% 68%,var(--sky) 0 26%,transparent 26%),var(--ink-2)} .note{margin-top:18px;color:var(--mute-2);font-size:13px} .sec:not(.sec--paper) .note{color:var(--mute)} .sec--paper .card{border:1px solid var(--line-d)} /* ---------- technológie / pilulky ---------- */ .tech{display:flex;flex-wrap:wrap;gap:10px} .pill{border:1px solid var(--line-d);padding:9px 15px;font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase} .sec:not(.sec--paper) .pill{border-color:var(--line);color:#d7d7de} /* ---------- FAQ ---------- */ .faq{border-top:1px solid var(--line)} .sec--paper .faq{border-top-color:var(--line-d)} .faq details{border-bottom:1px solid var(--line)} .sec--paper .faq details{border-bottom-color:var(--line-d)} .faq summary{ list-style:none;cursor:pointer;padding:22px 46px 22px 0;position:relative; font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(16px,1.9vw,20px); } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";position:absolute;right:8px;top:50%;width:14px;height:14px;margin-top:-7px; border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(45deg) translateY(-25%);transition:transform .25s ease} .faq details[open] summary::after{transform:rotate(-135deg) translateY(-25%)} .faq p{padding:0 40px 24px 0;color:#b6b6bf;max-width:76ch} .sec--paper .faq p{color:var(--mute-2)} /* ========================================================= PODSTRÁNKY ========================================================= */ .crumbs{padding:18px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--mute)} .crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center} .crumbs a:hover{color:var(--volt)} .crumbs li+li::before{content:"›";margin-right:8px;color:#5a5a63} .crumbs [aria-current]{color:#d7d7de} .phero{position:relative;padding:clamp(38px,6vw,70px) 0 clamp(34px,5vw,56px);overflow:hidden} .phero::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(680px 420px at 92% 6%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 66%)} .phero-in{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(26px,5vw,58px);align-items:center} .phero h1{font-size:clamp(29px,5.1vw,58px)} .phero .lead{margin-top:20px;max-width:56ch;color:#c5c5cd;font-size:clamp(15px,1.6vw,18px);line-height:1.62} .phero .hero-cta{margin-top:28px} .accbar{height:8px;background:var(--acc)} .panel{border:1px solid var(--line);background:#0f0f12;padding:clamp(20px,3vw,30px)} .panel h2{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;font-size:15px;letter-spacing:.05em;margin-bottom:16px;color:var(--acc)} .panel dl{margin:0;display:grid;gap:0} .panel dt{font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);padding-top:13px;border-top:1px solid var(--line)} .panel dt:first-of-type{border-top:0;padding-top:0} .panel dd{margin:4px 0 13px;font-size:15px;color:#dcdce2} .feats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line-d)} .sec:not(.sec--paper) .feats{background:var(--line)} .feat{background:var(--paper);padding:clamp(20px,2.6vw,30px)} .sec:not(.sec--paper) .feat{background:var(--ink)} .feat h3{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;font-size:16px;margin-bottom:9px} .feat p{font-size:14.5px;color:var(--mute-2)} .sec:not(.sec--paper) .feat p{color:#b4b4bd} .feat .mk{width:26px;height:4px;background:var(--acc);margin-bottom:14px} .rel{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line)} .rel a{background:var(--ink);padding:22px;display:flex;flex-direction:column;gap:8px;transition:background .22s ease} .rel a:hover{background:#111115} .rel b{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;font-size:15px} .rel span{color:var(--mute);font-size:13.5px} .rel a:hover b{color:var(--acc)} .cta{background:var(--acc);color:var(--acc-ink);padding:clamp(40px,6vw,74px) 0} .cta-in{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between} .cta h2{font-size:clamp(24px,3.6vw,44px);max-width:20ch} .cta p{margin-top:12px;max-width:46ch;opacity:.78;font-size:16px} .cta .btn{background:var(--acc-ink);color:var(--acc);border-color:var(--acc-ink)} .cta .btn:hover{box-shadow:5px 5px 0 rgba(0,0,0,.25)} /* zoznam služieb (rozcestník) */ .slist{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)} .slist a{background:var(--ink);padding:clamp(20px,2.6vw,28px);display:grid;gap:10px;align-content:start;transition:background .22s ease} .slist a:hover{background:#111115} .slist .mk{width:30px;height:5px} .slist b{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;font-size:17px} .slist p{color:#adadb6;font-size:14.5px} .slist a:hover b{color:var(--volt)} /* obsahový text (o nás) */ .prose{max-width:70ch} .prose p{margin-bottom:18px;color:#c2c2ca;font-size:16.5px;line-height:1.72} .sec--paper .prose p{color:var(--mute-2)} .prose h2{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(20px,2.6vw,28px);margin:38px 0 14px} /* ---------- kontakt ---------- */ .sec--contact{background:var(--volt);color:var(--ink)} .sec--contact .head .lbl{background:var(--ink);color:var(--volt);padding:5px 10px} .sec--contact .head p{color:rgba(10,10,11,.72)} .ct{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,5vw,64px)} .ct-row{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:17px 0;border-top:1px solid rgba(10,10,11,.25)} .ct-row .lbl{color:rgba(10,10,11,.6)} .ct-row b{font-size:clamp(16px,2vw,21px);font-weight:700;text-align:right} .ct-note{margin-top:24px;font-size:14.5px;color:rgba(10,10,11,.75);max-width:44ch} form{display:grid;gap:14px} .f2{display:grid;grid-template-columns:1fr 1fr;gap:14px} label{display:grid;gap:7px;font-family:'Archivo',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase} input,select,textarea{ font-family:'Inter Tight',sans-serif;font-size:15.5px;padding:13px 15px;border:2px solid var(--ink); background:rgba(255,255,255,.72);color:var(--ink);width:100%; } input:focus,select:focus,textarea:focus{background:#fff;outline:3px solid var(--ink);outline-offset:2px} textarea{min-height:118px;resize:vertical} .consent{display:flex;gap:11px;align-items:flex-start;font-size:13px;letter-spacing:0;text-transform:none;font-family:'Inter Tight',sans-serif;font-weight:400} .consent input{width:20px;height:20px;flex:none;padding:0} .formnote{font-size:13px;color:rgba(10,10,11,.7)} /* ---------- pätička ---------- */ footer{background:var(--ink);padding:clamp(46px,7vw,80px) 0 30px} .ft{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:34px} .ft img{width:138px;opacity:.96} .ft h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:14px} .ft a{display:block;padding:5px 0;color:#c6c6cd;font-size:14.5px} .ft a:hover{color:var(--volt)} .ft p{color:#9a9aa3;font-size:14px;margin-top:16px;max-width:34ch} .ft-bottom{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;margin-top:48px;padding-top:20px;border-top:1px solid var(--line);color:var(--mute);font-size:13px} /* ---------- mobilná lišta ---------- */ .bar{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)} .bar a{padding:15px 10px;text-align:center;background:var(--ink);font-family:'Archivo',sans-serif;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase} .bar a.p{background:var(--volt);color:#0a0a0b} /* ---------- reveal ---------- */ .rv{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.25,1)} .rv.in{opacity:1;transform:none} /* ---------- responzívne ---------- */ @media(max-width:1080px){ .hero-in,.phero-in{grid-template-columns:1fr} .svcs{grid-template-columns:1fr} .proc{grid-template-columns:repeat(2,1fr)} .step{border-bottom:1px solid var(--line-d)} .ct{grid-template-columns:1fr} .ft{grid-template-columns:1fr 1fr} .tiles{grid-template-columns:repeat(4,1fr)} .feats,.slist{grid-template-columns:repeat(2,1fr)} .rel{grid-template-columns:repeat(2,1fr)} } @media(max-width:900px){ .nav{display:none} .burger{display:flex} .hdr-in>.btn{display:none} .util .sep{display:none} body{padding-bottom:56px} .bar{display:grid} } @media(max-width:600px){ .grid3,.feats,.slist,.rel,.proc,.f2{grid-template-columns:1fr} .ft{grid-template-columns:1fr} .ct-row{flex-direction:column;gap:4px} .ct-row b{text-align:left} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .rv{opacity:1;transform:none} html{scroll-behavior:auto} } /* ========================================================= MIESTA PRE FOTOGRAFIE ========================================================= */ figure{margin:0} figcaption{margin-top:11px;font-size:13.5px;color:var(--mute);line-height:1.5} .sec--paper figcaption{color:var(--mute-2)} .ph{ position:relative;display:block;overflow:hidden;aspect-ratio:16/10; background:var(--ink-2);border:1px solid var(--line); background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 14px,transparent 14px 28px); } .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2} .ph::before{content:"";position:absolute;inset:14px;border:1px dashed rgba(255,255,255,.2)} .ph::after{ content:attr(data-f) " · " attr(data-w);position:absolute;left:50%;top:50%; transform:translate(-50%,-50%);font-family:'Archivo',sans-serif;font-weight:700; font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#9a9aa3; background:rgba(10,10,11,.8);border:1px solid var(--line);padding:9px 13px; white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis; } .sec--paper .ph,.cta .ph{background-color:var(--paper-2);border-color:var(--line-d); background-image:repeating-linear-gradient(135deg,rgba(10,10,11,.055) 0 14px,transparent 14px 28px)} .sec--paper .ph::before{border-color:rgba(10,10,11,.22)} .sec--paper .ph::after{color:var(--mute-2);background:rgba(255,255,255,.86);border-color:var(--line-d)} .ph--tall{aspect-ratio:4/5} .ph--sq{aspect-ratio:1/1} .ph--wide{aspect-ratio:21/9} .ph--band{aspect-ratio:32/9} .gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .gal--2{grid-template-columns:1fr 1fr;gap:16px} .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.5vw,58px);align-items:center} .split--wide{grid-template-columns:1.05fr .95fr} /* pás parametrov pod hero podstránky */ .specs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);margin:0} .specs>div{background:var(--ink);padding:20px 22px} .specs dt{font-family:'Archivo',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--acc);margin-bottom:6px} .specs dd{margin:0;font-size:15px;color:#dcdce2;line-height:1.55} /* karta služby na domovskej stránke */ .svc-ph{margin-bottom:22px} /* referencie – dlaždica s fotkou */ .figlink{display:block} .figlink .ph{transition:border-color .25s ease} .figlink:hover .ph{border-color:var(--volt)} .figlink b{display:block;margin-top:12px;font-size:15.5px;font-weight:600} .figlink span{display:block;margin-top:3px;color:var(--mute);font-size:13px} .figlink:hover b{color:var(--volt)} /* čitateľnosť */ .prose p{font-size:17px;line-height:1.75;max-width:64ch} .lead{line-height:1.68} @media(max-width:1080px){ .gal{grid-template-columns:repeat(2,1fr)} .specs{grid-template-columns:repeat(2,1fr)} .split{grid-template-columns:1fr} } @media(max-width:600px){ .gal,.gal--2,.specs{grid-template-columns:1fr} .ph--band{aspect-ratio:16/9} } /* ========================================================= MASKOT KUBO + HORIZONTÁLNE LOGO ========================================================= */ .hdr .logo{gap:0} .hdr .logo img{width:clamp(148px,19vw,192px);height:auto} .mascot{display:block;height:auto} .mascot--flip{transform:scaleX(-1)} /* hero — Kubo ukazuje na sútlač */ .lockup{position:relative} .lockup-kubo{position:absolute;right:-38px;bottom:-16px;width:clamp(84px,11vw,136px);height:auto; pointer-events:none;transform:scaleX(-1);z-index:4; filter:drop-shadow(0 14px 28px rgba(0,0,0,.55))} .lockup{padding-right:clamp(20px,4.5vw,58px)} .lockup .tag{max-width:62%} @media(max-width:1080px){.lockup-kubo{right:-24px;bottom:-10px}} /* CTA pás */ .cta{position:relative;overflow:hidden} .cta-in{align-items:flex-end} .cta-kubo{flex:none;width:clamp(118px,13vw,166px);height:auto;margin-bottom:0} /* box „Kubo radí" */ .tip{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.4vw,30px);align-items:center; background:#0f0f12;border:1px solid var(--line);border-left:5px solid var(--acc); padding:clamp(18px,2.6vw,28px)} .tip img{width:clamp(84px,9vw,118px);height:auto} .tip h3{font-family:'Archivo',sans-serif;font-weight:800;font-size:12px;letter-spacing:.18em; text-transform:uppercase;color:var(--acc);margin-bottom:9px} .tip p{font-size:16.5px;line-height:1.66;color:#d4d4db;max-width:62ch} /* kartička na kontakte */ .kubo-card{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;margin-top:30px; border:2px solid rgba(10,10,11,.22);background:rgba(255,255,255,.28);padding:16px 18px} .kubo-card img{width:clamp(70px,8vw,94px);height:auto} .kubo-card p{font-size:14.5px;line-height:1.6} .kubo-card b{display:block;font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase; letter-spacing:.16em;font-size:11px;margin-bottom:6px} @media(max-width:900px){.cta-kubo{display:none}} @media(max-width:600px){ .tip{grid-template-columns:1fr} .tip img{width:96px} .kubo-card{grid-template-columns:1fr} } /* ---------- e-shopy v menu ---------- */ .drop-menu--sm{min-width:340px;grid-template-columns:1fr;gap:2px} .drop-menu--sm a{display:block;padding:12px 12px} .drop-menu--sm strong{display:block;font-family:'Archivo',sans-serif;font-weight:800; font-size:14px;color:#fff;letter-spacing:.01em} .drop-menu--sm em{display:block;font-style:normal;font-size:12.5px;color:var(--mute);margin-top:2px} .drop-menu--sm a:hover strong{color:var(--volt)} .slist .lbl{margin-top:4px} /* ---------- packa pri printdog karte ---------- */ .slist a.has-paw{position:relative;overflow:hidden;padding-right:clamp(96px,11vw,132px)} .paw{position:absolute;right:-26px;bottom:-30px;width:clamp(112px,13vw,158px);height:auto; transform:rotate(-14deg);pointer-events:none; filter:drop-shadow(0 12px 24px rgba(0,0,0,.5));transition:transform .35s cubic-bezier(.2,.8,.25,1)} .slist a.has-paw:hover .paw{transform:rotate(-6deg) translateY(-10px)} @media(max-width:600px){.slist a.has-paw{padding-right:84px}.paw{width:104px;right:-20px;bottom:-24px}} /* nepárny počet kariet služieb – posledná cez celú šírku */ .svcs>article:last-child:nth-child(odd){grid-column:1/-1} /* ---------- mapa na kontakte ---------- */ .map{position:relative;aspect-ratio:16/9;overflow:hidden;display:grid;place-items:center; background-color:var(--ink-2);border:1px solid var(--line); background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 14px,transparent 14px 28px)} .map iframe{width:100%;height:100%;border:0;display:block} .map-ph{display:grid;gap:16px;justify-items:center;text-align:center;padding:clamp(20px,4vw,40px)} .map-ph .lbl{color:var(--volt)} .map-adr{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase; font-size:clamp(18px,2.6vw,26px);line-height:1.2} .map-note{font-size:12.5px;color:var(--mute);max-width:46ch;line-height:1.55} @media(max-width:700px){.map{aspect-ratio:4/3}} /* ---------- ochrana formulára ---------- */ .hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px; overflow:hidden;opacity:0;pointer-events:none} .formerr{background:var(--ink);color:var(--volt);padding:14px 16px;font-size:14.5px; border-left:5px solid var(--ink);margin-bottom:6px}