/* ── Kontakt · direction B "Guided steps" (final) ── Ports (vanilla): Wizard Steps (21st 23576) for the rail, the direction-aware crossfade (out .12s ease-in, in .42s ease-out after a .1s delay, so the two steps never overlap) and the focus intents; Icon Card Radio Group (21st 28351) for the step-1 cards; Stepper with Square Badges (21st 28546) for done/current/todo tiles; Contact Form (21st 35258) for the details column beside the card form and the pending/success states; Roadmap Card (21st 5652, as already ported in #audit) for the "Jak to proběhne" dots on a hairline. Base styles = the no-JS form (one page, native select, native validation). Everything step-like is scoped to #kontakt.kt-js, which final.js adds. Every selector starts with #kontakt; every new class and state class is kt-. Old global rules in d4/style.css that still load but are dead once this section replaces the old one (line numbers as of 91cbb9f): l.100 .contact{…} no .contact element any more l.102 .contact>div p{…} no .contact element any more l.103 form{display:grid;grid-template-columns;gap} fully overridden by #kontakt form (flex, gap:0); the lead form is the only
on the page l.104 label{…} overridden by #kontakt .kt-field label (display:block etc.) l.105 label.full{…} no label.full any more l.106 input,select,textarea{…} overridden by #kontakt input/select/textarea (no other inputs on the page) l.107 input:focus,select:focus,textarea:focus{…} overridden by #kontakt …:focus l.108 textarea{…} overridden by #kontakt textarea l.109 form small{…} overridden by #kontakt .kt-consent (grid-column is moot in flex/fieldset) l.110 form .btn{justify-self:start} moot: the buttons sit in a flex row l.111 .thanks{font-size:20px} overridden by #kontakt .thanks l.131 .head,.contact{…} (≤900px) the .contact half only; .head is still live l.141 .contact{padding:28px 20px} no .contact element any more l.142 form{grid-template-columns:1fr} moot: #kontakt form is flex l.167 .form-msg{…}.form-msg:empty{…} overridden by #kontakt .form-msg (+ its own :empty rule) Still live and relied on: .big-h (l.101, the closing headline size), .lbl, .kick, .btn/.btn-k, base.css .sr-only. */ #kontakt{--k:#141414;--m:#5c5c5c;--lb:#66655f;--l:rgba(0,0,0,.08);--l2:rgba(20,20,20,.16);--l3:rgba(20,20,20,.5);--chip:#f4f4f2;--g:#23794a;--bad:#b42318;--ease:cubic-bezier(.23,1,.32,1);--spring:cubic-bezier(.34,1.56,.64,1);--sh:0 1px 2px rgba(0,0,0,.04),0 12px 32px -16px rgba(0,0,0,.18)} /* ── frame: intro + aside on the left, the form panel on the right (DOM: intro → panel → aside) ── */ #kontakt .kt-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;grid-template-areas:"intro form" "aside form";column-gap:64px;row-gap:32px;padding:56px;border-radius:var(--r-l,28px);background:var(--paper-2)} #kontakt .kt-intro{grid-area:intro;min-width:0} #kontakt .kt-kick{margin-bottom:var(--kick-gap)} #kontakt .kt-lead{margin-top:18px;color:var(--m);max-width:34ch;font-size:17px} /* ── product-family primitives ── */ #kontakt .kt-oic svg{width:16px;height:16px;fill:none;stroke:var(--k);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s} /* ── aside: what happens next (dots on a hairline, as #audit "Roadmapa · 90 dní") + one quiet direct line ── */ #kontakt .kt-aside{grid-area:aside;align-self:end;min-width:0;padding:16px 18px 0;background:#fff;border:1px solid var(--l);border-radius:10px;box-shadow:var(--sh);font-size:14px;container:kta/inline-size} #kontakt .kt-ah{display:block;margin-bottom:16px} #kontakt .kt-tl{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0 0 16px} #kontakt .kt-tl::before,#kontakt .kt-tl::after{content:"";position:absolute;left:12.5%;right:12.5%;top:6.5px;height:1px;background:rgba(20,20,20,.14)} #kontakt .kt-tl::after{right:auto;width:25%;height:1.5px;margin-top:-.25px;background:var(--k);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease) .35s} #kontakt .kt-tl li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:24px 4px 0;text-align:center;font-size:13px;line-height:1.3} #kontakt .kt-tl i{position:absolute;left:50%;top:0;display:grid;place-items:center;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;border:1.5px solid #c9c8c2;transition:background-color .3s,border-color .3s} #kontakt .kt-tl i svg{width:9px;height:9px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .2s .2s} #kontakt .kt-tl1 i{border-color:var(--k)} #kontakt .kt-tl1 i::after,#kontakt .kt-tl2 i::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--k)} #kontakt .kt-tl2 i::after{transform:scale(0);transition:transform .35s var(--spring) .6s} #kontakt .kt-tl span{font-weight:500;font-size:13.5px;line-height:1.3;letter-spacing:-.005em;color:var(--k)} #kontakt .kt-tm{font:400 11px/1.3 var(--mono);font-style:normal;letter-spacing:.02em;color:var(--lb);white-space:nowrap} #kontakt .kt-tm span{font:inherit;color:inherit} #kontakt .kt-tm-b{display:none} #kontakt .kt-direct{margin:0 -18px;padding:12px 18px 2px;border-top:1px solid var(--l)} #kontakt .kt-direct .lbl{display:block} #kontakt .kt-direct p{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px} #kontakt .kt-direct a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:15px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--k);text-decoration:underline;text-decoration-color:rgba(20,20,20,.22);text-underline-offset:4px;transition:text-decoration-color .2s} #kontakt .kt-direct a:hover{text-decoration-color:var(--k)} #kontakt .kt-direct a:focus-visible{outline:2px solid var(--k);outline-offset:2px;border-radius:4px} #kontakt .kt-sep{color:var(--lb)} @container kta (max-width:290px){ #kontakt .kt-direct p{flex-direction:column;align-items:flex-start} #kontakt .kt-sep{display:none} } /* ── guarantee: Nabídka's band (nabidka.css .nb-vows) in a compact size, one instance per breakpoint. ≥901 .kt-vows-a, a Paper band across the aside between "Jak to proběhne" and the hairline of .kt-direct; ≤900 .kt-vows-f, fused to the bottom of the form panel under the buttons, step 3 only. Under, not above them: above, it would push "Odeslat poptávku" from y≈614 to y≈744 at 390×844, behind Safari's toolbar. ── */ #kontakt .kt-vows{display:flex;flex-direction:column;gap:8px;margin:0;padding:14px 18px;list-style:none;background:var(--paper-2);font-size:14px;line-height:1.4;color:var(--k)} #kontakt .kt-vows li{display:flex;align-items:flex-start;gap:9px;font-weight:500;letter-spacing:-.005em;text-wrap:pretty} #kontakt .kt-vows li:first-child{margin-bottom:2px} #kontakt .kt-vows b{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lb)} #kontakt .kt-vows li+li::before{content:"";flex:none;width:16px;height:16px;margin-top:1.6px;border-radius:50%;background:var(--k) var(--tick) center/11px no-repeat} #kontakt .kt-vows-a{margin:0 -18px;border-top:1px solid var(--l)} /* bleeds to the panel edges by undoing the form padding (28/24, 16/16 ≤600) */ #kontakt .kt-vows-f{display:none;order:3;margin:24px -28px -24px;padding:16px 28px 18px;border-top:1px solid var(--l);border-radius:0 0 9px 9px} /* ── form panel ── */ #kontakt .kt-panel{grid-area:form;position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--l);border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 28px 56px -32px rgba(0,0,0,.28);container:ktp/inline-size} #kontakt .kt-rail{display:none} #kontakt form{flex:1 0 auto;display:flex;flex-direction:column;gap:0;margin:0;padding:28px 28px 24px} #kontakt .kt-steps{flex:1 0 auto} #kontakt fieldset{border:0;margin:0;padding:0;min-width:0} #kontakt .kt-step+.kt-step{margin-top:28px;padding-top:24px;border-top:1px solid var(--l)} #kontakt .kt-q{display:flex;align-items:center;gap:12px;float:left;width:100%;padding:0;margin:0 0 18px;font-weight:500;font-size:22px;line-height:1.15;letter-spacing:-.02em;color:var(--k)} #kontakt .kt-step>:not(legend){clear:both} #kontakt .kt-qn{display:grid;place-items:center;min-width:28px;height:22px;padding:0 6px;border:1px solid var(--l2);border-radius:6px;font:500 11px/1 var(--mono);color:var(--lb);letter-spacing:0} /* fields (override the global label / input,select,textarea / :focus rules) */ #kontakt .kt-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} #kontakt .kt-field{min-width:0} #kontakt .kt-field label{display:block;margin:0 0 7px;font-size:13px;font-weight:500;color:#3d3d3a;line-height:1.3} #kontakt .kt-in{position:relative} #kontakt input,#kontakt select,#kontakt textarea{display:block;width:100%;margin:0;font:400 16px/1.4 var(--font);color:var(--k);background:#fff;border:1px solid var(--l3);border-radius:8px;box-shadow:none;outline:0;transition:border-color .15s,box-shadow .15s,background-color .15s} #kontakt input,#kontakt select{height:48px;padding:0 40px 0 14px} #kontakt textarea{min-height:104px;padding:12px 14px;resize:vertical} #kontakt input::placeholder,#kontakt textarea::placeholder{color:#76756f;opacity:1} #kontakt input:hover,#kontakt select:hover,#kontakt textarea:hover{border-color:rgba(20,20,20,.72)} #kontakt input:focus,#kontakt select:focus,#kontakt textarea:focus{border-color:var(--k);box-shadow:0 0 0 1px var(--k),0 0 0 5px rgba(20,20,20,.07)} #kontakt input:-webkit-autofill{-webkit-text-fill-color:var(--k);box-shadow:inset 0 0 0 40px #fff} #kontakt input:-webkit-autofill:focus{box-shadow:inset 0 0 0 40px #fff,0 0 0 1px var(--k),0 0 0 5px rgba(20,20,20,.07)} #kontakt select{appearance:none;-webkit-appearance:none;cursor:pointer} #kontakt .kt-sel>svg{position:absolute;right:14px;top:50%;width:16px;height:16px;margin-top:-8px;fill:none;stroke:var(--k);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none} #kontakt .kt-ok{position:absolute;right:14px;top:50%;width:18px;height:18px;margin-top:-9px;padding:3px;border-radius:50%;background:#e6f2ea;fill:none;stroke:var(--g);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.4);transition:opacity .2s,transform .35s var(--spring);pointer-events:none} #kontakt .kt-valid .kt-ok{opacity:1;transform:none} #kontakt .kt-err{display:block;margin:6px 0 0;font-size:12.5px;line-height:1.35;color:var(--bad)} #kontakt .kt-err:empty{display:none} #kontakt .kt-invalid input{border-color:var(--bad);background:#fffbfa} #kontakt .kt-invalid input:focus{box-shadow:0 0 0 1px var(--bad),0 0 0 5px rgba(180,35,24,.1)} #kontakt input:user-invalid{border-color:var(--bad)} #kontakt .kt-consent{display:block;margin-top:14px;font-size:12.5px;line-height:1.45;color:var(--lb)} /* step-1 cards / step-2 summary / recap / back / next are JS-only */ #kontakt .kt-opts,#kontakt .kt-recap,#kontakt .kt-back,#kontakt .kt-fwd,#kontakt .kt-kbd{display:none} /* footer + submit (yellow like "Pokračovat" in the same slot: the form's main action at every step) */ #kontakt .kt-foot{display:flex;align-items:center;gap:12px;margin-top:24px} #kontakt .kt-submit,#kontakt .kt-fwd{box-shadow:inset 0 0 0 1px rgba(20,20,20,.06)} #kontakt .kt-submit{gap:10px;padding:0 24px} #kontakt .kt-submit .arr{transition:transform .25s var(--ease)} #kontakt .kt-submit:hover .arr{transform:translate(2px,-2px)} #kontakt .kt-submit:focus-visible,#kontakt .kt-fwd:focus-visible{outline:2px solid var(--k);outline-offset:3px} #kontakt .kt-submit:disabled{cursor:progress;background:#ffe466} #kontakt .kt-submit:disabled .arr{display:none} #kontakt .kt-submit:disabled::after{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:kt-spin .7s linear infinite} #kontakt .form-msg{margin:12px 0 0;font-size:14px;line-height:1.45;color:var(--m)} #kontakt .form-msg:empty{display:none} #kontakt .form-msg.kt-failed{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:8px;background:#fdf3f2;border:1px solid rgba(180,35,24,.18);color:var(--bad)} #kontakt .form-msg.kt-failed::before{content:"!";flex:none;display:grid;place-items:center;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--bad);color:#fff;font:600 11px/1 var(--font)} /* success (main.js replaces the form's children with p.thanks; final.js adds the tick and a restating recap) */ #kontakt .thanks{position:relative;max-width:46ch;font-size:17px;line-height:1.55;color:var(--m);animation:kt-up .7s var(--ease) .12s both} #kontakt .thanks:focus{outline:0} #kontakt .thanks strong{display:block;margin-bottom:10px;font-weight:500;font-size:clamp(30px,3vw,40px);line-height:1.02;letter-spacing:-.035em;color:var(--k)} #kontakt:not(.kt-js) .thanks::before{content:"";display:block;width:52px;height:52px;margin-bottom:22px;border-radius:12px;background:var(--k) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/24px no-repeat} #kontakt .kt-tick{display:grid;place-items:center;width:52px;height:52px;margin-bottom:22px;border-radius:12px;background:var(--k);animation:kt-pop .55s var(--spring) both} #kontakt .kt-tick svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:kt-draw .45s var(--ease) .3s forwards} #kontakt .kt-done{max-width:46ch;margin:24px 0 0;border-top:1px solid var(--l);animation:kt-up .7s var(--ease) .24s both} #kontakt .kt-done div{display:grid;grid-template-columns:108px minmax(0,1fr);gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--l)} #kontakt .kt-done dt{margin:0} #kontakt .kt-done dd{display:flex;flex-wrap:wrap;margin:0;min-width:0;font-size:15px;line-height:1.4;color:var(--k);overflow-wrap:anywhere} #kontakt form:has(>.thanks){display:flex;flex-direction:column;justify-content:center} #kontakt.kt-sent form{display:flex;flex-direction:column;justify-content:center;position:relative;isolation:isolate} #kontakt.kt-sent form::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:0 0 10px 10px;background-image:radial-gradient(rgba(20,20,20,.13) 1px,transparent 1.3px);background-size:14px 14px;-webkit-mask-image:radial-gradient(ellipse 60% 75% at 88% 50%,#000 10%,transparent 72%);mask-image:radial-gradient(ellipse 60% 75% at 88% 50%,#000 10%,transparent 72%);animation:kt-fade 1.2s var(--ease) .25s both} #kontakt.kt-sent .kt-tm-a{display:none} #kontakt.kt-sent .kt-tm-b{display:inline;color:var(--g)} #kontakt.kt-sent .kt-tl::after{transform:none} #kontakt.kt-sent .kt-tl1 i{background:var(--k)} #kontakt.kt-sent .kt-tl1 i::after{display:none} #kontakt.kt-sent .kt-tl1 i svg{opacity:1} #kontakt.kt-sent .kt-tl2 i{border-color:var(--k);transition-delay:.6s} #kontakt.kt-sent .kt-tl2 i::after{transform:none} @keyframes kt-spin{to{transform:rotate(360deg)}} @keyframes kt-fade{from{opacity:0}} @keyframes kt-up{from{opacity:0;transform:translateY(12px)}} @keyframes kt-pop{from{opacity:0;transform:scale(.6)}} @keyframes kt-draw{to{stroke-dashoffset:0}} @keyframes kt-shake{0%,100%{transform:none}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}} /* ════════ JS: guided steps ════════ */ #kontakt.kt-js .kt-selw{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0} #kontakt.kt-js .kt-qn{display:none} #kontakt.kt-js .kt-step+.kt-step{margin-top:0;padding-top:0;border-top:0} #kontakt.kt-js .kt-steps{position:relative} #kontakt.kt-js .kt-steps.kt-anim{overflow:hidden} #kontakt.kt-js .kt-step{position:relative;min-width:0} #kontakt.kt-js .kt-step:not(.kt-on){position:absolute;top:0;left:0;right:0;pointer-events:none} #kontakt.kt-js .kt-step:not(.kt-on):not(.kt-out){visibility:hidden} #kontakt.kt-js .kt-step:focus{outline:0} #kontakt.kt-js .kt-err{min-height:17px} #kontakt.kt-js .kt-err:empty{display:block} #kontakt.kt-js #kt-e-zajem{min-height:0;margin-top:10px} #kontakt.kt-js #kt-e-zajem:empty{display:none} /* rail (Wizard Steps / Stepper square badges): a 5-column grid so both connectors get the same length */ #kontakt.kt-js .kt-rail{display:flex;align-items:center;gap:18px;padding:14px 20px 14px 22px;border-bottom:1px solid var(--l)} #kontakt .kt-rl{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto;align-items:center;flex:1;min-width:0;list-style:none;margin:0;padding:0} #kontakt .kt-rl li{display:contents} #kontakt .kt-rl button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:9px;min-height:44px;min-width:44px;padding:0 8px;margin:0 -8px;border-radius:9px;cursor:pointer;font:500 13px/1 var(--font);color:var(--lb);white-space:nowrap;transition:color .2s} #kontakt .kt-rl button:disabled{cursor:default} #kontakt .kt-rl button:not(:disabled):hover{color:var(--k)} #kontakt .kt-rl button:focus-visible{outline:2px solid var(--k);outline-offset:-2px} #kontakt .kt-tile{position:relative;display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:8px;border:1px solid var(--l2);background:#fff;color:var(--lb);font:500 11.5px/1 var(--mono);box-shadow:0 1px 2px rgba(28,25,23,.06),0 4px 10px -8px rgba(28,25,23,.45);transform:scale(.92);transition:transform .35s var(--spring),background-color .2s,border-color .2s,color .2s} #kontakt .kt-tile b{font-weight:500;transition:opacity .15s} #kontakt .kt-tile svg{position:absolute;inset:0;margin:auto;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:opacity .2s,transform .35s var(--spring)} #kontakt .kt-rl li[data-state=current] button{color:var(--k)} #kontakt .kt-rl li[data-state=current] .kt-tile{transform:none;border-color:var(--k);color:var(--k)} #kontakt .kt-rl li[data-state=done] button{color:var(--k)} #kontakt .kt-rl li[data-state=done] .kt-tile{transform:scale(.96);background:var(--k);border-color:var(--k);color:#fff} #kontakt .kt-rl li[data-state=done] .kt-tile b{opacity:0} #kontakt .kt-rl li[data-state=done] .kt-tile svg{opacity:1;transform:none} #kontakt .kt-rl li[data-state=todo] button:not(:disabled){color:#3d3d3a} #kontakt .kt-rl li[data-state=todo] button:not(:disabled) .kt-tile{border-color:rgba(20,20,20,.42);color:var(--k)} #kontakt .kt-bar{position:relative;display:block;height:3px;margin:0 16px;border-radius:2px;background:#f0efeb;box-shadow:inset 0 1px 2px rgba(28,25,23,.07);overflow:hidden} #kontakt .kt-bar i{position:absolute;inset:0;border-radius:2px;background:var(--k);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)} #kontakt .kt-rl li.kt-fill .kt-bar i{transform:none} #kontakt .kt-count{flex:none;padding-left:16px;border-left:1px solid var(--l);font:400 11px/28px var(--mono);letter-spacing:.06em;color:var(--lb);font-variant-numeric:tabular-nums;white-space:nowrap} /* step 1: selectable interest cards (Icon Card Radio Group) — nothing is preselected */ #kontakt.kt-js .kt-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px} #kontakt .kt-opt{all:unset;box-sizing:border-box;position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"ic . dot" "t t t" "d d d";align-items:start;align-content:start;row-gap:4px;min-height:44px;padding:14px 14px 16px 16px;border-radius:10px;background:#fff;border:1px solid var(--l2);cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent;transition:border-color .2s,box-shadow .25s,transform .25s var(--ease),background-color .2s} #kontakt .kt-oic{grid-area:ic;display:grid;place-items:center;width:32px;height:32px;margin-bottom:12px;border-radius:8px;background:var(--chip);border:1px solid var(--l);transition:background-color .25s,border-color .25s} #kontakt .kt-dot{grid-area:dot;position:relative;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--l3);transition:border-color .2s,background-color .2s} #kontakt .kt-dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .35s var(--spring)} #kontakt .kt-ot{grid-area:t;font-weight:500;font-size:15.5px;line-height:1.25;letter-spacing:-.01em;color:var(--k)} #kontakt .kt-od{grid-area:d;font-size:13px;line-height:1.4;color:var(--m)} #kontakt .kt-opt:hover{border-color:rgba(20,20,20,.34);box-shadow:0 10px 24px -18px rgba(0,0,0,.35)} #kontakt .kt-opt:active{transform:scale(.985)} #kontakt .kt-opt:focus-visible{outline:2px solid var(--k);outline-offset:2px} #kontakt .kt-opt[aria-checked=true]{border-color:var(--k);box-shadow:inset 0 0 0 .5px var(--k),0 12px 28px -20px rgba(0,0,0,.4)} #kontakt .kt-opt[aria-checked=true] .kt-oic{background:var(--k);border-color:var(--k)} #kontakt .kt-opt[aria-checked=true] .kt-oic svg{stroke:#fff} #kontakt .kt-opt[aria-checked=true] .kt-dot{border-color:var(--k);background:var(--k)} #kontakt .kt-opt[aria-checked=true] .kt-dot::after{transform:scale(1)} #kontakt .kt-step[aria-invalid=true] .kt-opt:not(:hover){border-color:rgba(180,35,24,.45)} /* step-2 summary row + step-3 recap: one language (label, value, Změnit; 44px rows, no icon) */ #kontakt.kt-js .kt-recap{display:block;margin:0 0 18px;border:1px solid var(--l);border-radius:10px;background:var(--ground)} #kontakt .kt-recap div{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:44px;padding:0 0 0 14px} #kontakt .kt-recap div+div{border-top:1px solid var(--l)} #kontakt .kt-recap dt{margin:0} #kontakt .kt-recap dd{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px;color:var(--k)} #kontakt .kt-recap .kt-rc-v{display:flex;flex-direction:column;gap:1px;padding:7px 0} #kontakt .kt-rc-a,#kontakt .kt-rc-b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px} #kontakt .kt-rc-b{min-height:20px;font-size:13px;color:var(--m)} #kontakt .kt-nw{white-space:nowrap} #kontakt .kt-sep2{color:var(--lb)} #kontakt .kt-recap .kt-rc-e{align-self:stretch;display:flex} #kontakt .kt-recap button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;min-height:44px;padding:0 14px 0 12px;border-radius:0 9px 9px 0;font-size:13px;color:var(--m);cursor:pointer;text-decoration:underline;text-decoration-color:rgba(20,20,20,.25);text-underline-offset:3px;transition:color .2s,background-color .2s} #kontakt .kt-recap button:hover{color:var(--k);background:#fff} #kontakt .kt-recap button:focus-visible{outline:2px solid var(--k);outline-offset:-2px} /* footer nav; main.js's status line sits above it (order), not below the buttons */ #kontakt.kt-js .kt-foot{order:2;margin-top:22px;padding-top:20px;border-top:1px solid var(--l)} #kontakt.kt-js .form-msg{order:1;margin:14px 0 0} #kontakt.kt-js .form-msg.kt-busy{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0} #kontakt.kt-js:not([data-kt-at="2"]) .form-msg{display:none} #kontakt.kt-js:not([data-kt-at="2"]) .kt-vows-f{display:none} #kontakt.kt-js[data-kt-at="2"] .kt-vows-f{animation:kt-fade .42s var(--ease) .1s backwards} #kontakt.kt-js .kt-back{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px 0 12px;border-radius:999px;font:500 15px/1 var(--font);color:var(--k);cursor:pointer;box-shadow:inset 0 0 0 1px var(--l3);transition:box-shadow .2s,background-color .2s} #kontakt .kt-back svg,#kontakt .kt-fwd svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)} #kontakt .kt-back:hover{box-shadow:inset 0 0 0 1px rgba(20,20,20,.8)} #kontakt .kt-back:hover svg{transform:translateX(-2px)} #kontakt .kt-back:focus-visible{outline:2px solid var(--k);outline-offset:3px} #kontakt.kt-js .kt-kbd{display:inline-flex;align-items:center;margin-left:auto} #kontakt .kt-kbd kbd{display:inline-grid;place-items:center;height:24px;padding:0 8px;border-radius:5px;border:1px solid var(--l2);border-bottom-width:2px;background:#fff;font:500 10.5px/1 var(--mono);color:#3d3d3a} #kontakt.kt-js .kt-fwd{display:inline-flex;gap:10px;padding:0 20px 0 22px} #kontakt .kt-fwd:hover svg{transform:translateX(3px)} #kontakt.kt-js .kt-submit{margin-left:auto} #kontakt.kt-js[data-kt-at="0"] .kt-back{display:none} #kontakt.kt-js:not([data-kt-at="2"]) .kt-submit{display:none} #kontakt[data-kt-at="2"] .kt-fwd,#kontakt[data-kt-at="2"] .kt-kbd{display:none} #kontakt.kt-js .kt-shake{animation:kt-shake .36s ease} #kontakt.kt-sent .kt-rl button{cursor:default} /* desktop: all three steps share one grid cell, so the panel is as tall as its tallest step on every step and the footer never moves; inactive steps stay visibility:hidden + inert */ @media (min-width:901px){ #kontakt input,#kontakt select{height:52px} #kontakt.kt-js .kt-steps{display:grid} #kontakt.kt-js .kt-step{grid-area:1/1} #kontakt.kt-js .kt-step:not(.kt-on){position:relative} @container ktp (max-width:540px){ #kontakt.kt-js .kt-step textarea{min-height:72px} } } /* ── container: wide panel → roomier cards; narrow panel → card rows, current step name only, no Enter hint ── */ @container ktp (min-width:541px){ #kontakt.kt-js #kt-e-zajem{position:absolute;top:4px;right:0;max-width:52%;margin:0;text-align:right} #kontakt .kt-opt{min-height:124px;padding:16px 16px 16px 18px} #kontakt .kt-oic{margin-bottom:14px} #kontakt .kt-grid{row-gap:6px} } @container ktp (max-width:540px){ #kontakt.kt-js .kt-opts{grid-template-columns:1fr;gap:8px} #kontakt .kt-opt{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ic t dot" "ic d dot";align-items:center;column-gap:14px;row-gap:2px;padding:12px 14px 12px 12px} #kontakt .kt-oic{margin:0} #kontakt .kt-od{font-size:12.5px} #kontakt.kt-js .kt-kbd{display:none} #kontakt.kt-js .kt-fwd{margin-left:auto} #kontakt.kt-js textarea{min-height:88px} #kontakt .kt-rc-b{display:flex;flex-direction:column;min-height:40px;white-space:normal} #kontakt .kt-rc-b .kt-nw{overflow:hidden;text-overflow:ellipsis} #kontakt .kt-rc-b .kt-sep2{display:none} #kontakt .kt-rl li:not([data-state=current]) .kt-rn{display:none} #kontakt .kt-bar{margin:0 14px} } @container ktp (max-width:420px){ #kontakt .kt-count{display:none} } @container ktp (max-width:380px){ #kontakt .kt-grid{grid-template-columns:1fr;gap:8px} } /* ── responsive ── */ @media (max-width:1100px){ #kontakt .kt-card{padding:40px;column-gap:40px} } @media (max-width:900px){ #kontakt .kt-card{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"intro" "form" "aside";row-gap:28px;padding:36px 28px 28px} #kontakt .kt-lead{max-width:44ch} #kontakt .kt-aside{align-self:start} #kontakt .kt-vows-a{display:none} #kontakt .kt-vows-f{display:flex} } @media (max-width:600px){ #kontakt .kt-card{padding:0;background:none;border-radius:0;row-gap:24px} #kontakt .kt-lead{font-size:16px} #kontakt form{padding:20px 16px 16px} #kontakt .kt-q{font-size:20px;margin-bottom:14px} #kontakt.kt-js .kt-rail{padding:6px 14px 6px 16px;gap:10px} #kontakt .kt-count{padding-left:12px} #kontakt .kt-bar{margin:0 12px} #kontakt.kt-js .kt-foot{margin-top:16px;padding-top:16px} #kontakt.kt-js .kt-back{width:48px;padding:0;justify-content:center;flex:none} #kontakt .kt-back span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} #kontakt.kt-js .kt-fwd,#kontakt .kt-submit{flex:1;margin-left:0} #kontakt:not(.kt-js) .kt-submit{width:100%} #kontakt .kt-recap div{grid-template-columns:60px minmax(0,1fr) auto;gap:8px;padding-left:12px} #kontakt .kt-vows-f{margin:16px -16px -16px;padding:14px 16px 16px} } @media (hover:none),(pointer:coarse){ #kontakt.kt-js .kt-kbd{display:none} #kontakt.kt-js .kt-fwd{margin-left:auto} } /* no-JS desktop: the aside follows the intro instead of hanging at the bottom of a tall native form */ #kontakt:not(.kt-js) .kt-aside{align-self:start} @media (prefers-reduced-motion:reduce){ #kontakt *,#kontakt *::before,#kontakt *::after{transition:none!important;animation:none!important} #kontakt .kt-tick svg{stroke-dashoffset:0} } /* Windows high contrast: the guarantee disc fill is dropped, so the tick itself is drawn in the text colour */ @media (forced-colors:active){ #kontakt .kt-vows li+li::before{forced-color-adjust:none;border-radius:0;background:CanvasText;-webkit-mask:var(--tick) center/100% no-repeat;mask:var(--tick) center/100% no-repeat} /* the ink chips turn Canvas: draw the white icon and tick in CanvasText; the no-JS tile keeps its own ink and tick */ #kontakt .kt-opt[aria-checked=true] .kt-oic svg,#kontakt .kt-tick svg{stroke:CanvasText} #kontakt:not(.kt-js) .thanks::before{forced-color-adjust:none} } /* čtvrtý krok v časové ose: nabídka až po hovoru (1. 11. 2026) */ #kontakt .kt-tl4 i{border-color:var(--line)} @media (max-width:520px){#kontakt .kt-tl{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}#kontakt .kt-tl::before,#kontakt .kt-tl::after{display:none}} /* ── layout of the new copy (1. 11. 2026): four-step timeline ── */ #kontakt .kt-lead{text-wrap:balance} /* "Jak to proběhne": 4 steps. Wide aside (tablet, ≥500 px): one row, every label on one line. Narrow aside (desktop column 290–410 px, phones): a vertical itinerary — dot on a hairline, label, time on the right. Same dots, same hairline, same "sent" progress (now drawn downwards). */ #kontakt .kt-tl li>span{white-space:nowrap} /* the progress line rests at scale(0) in both modes, so a layout switch never animates a stray segment */ #kontakt .kt-tl::after{transform:scale(0)} @container kta (max-width:499px){ #kontakt .kt-ah{margin-bottom:12px} #kontakt .kt-tl{grid-template-columns:minmax(0,1fr);row-gap:4px;padding:2px 0 14px} #kontakt .kt-tl li{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;height:22px;padding:0 0 0 26px;text-align:left} #kontakt .kt-tl i{left:0;top:4px;margin-left:0} /* hairline from the first dot's centre (2 + 11) to the last one's (bottom: 14 + 11); progress = one row pitch (22 + 4) */ #kontakt .kt-tl::before,#kontakt .kt-tl::after{display:block;left:6.5px;right:auto;top:13px;bottom:25px;width:1px;height:auto} #kontakt .kt-tl::after{bottom:auto;left:6.25px;width:1.5px;height:26px;margin:0;transform-origin:50% 0} }