/* ===================================================================== AURI.sk – KONTAKT v1.1 Súbor: /user/documents/auri-kontakt.css Písmo, nadpisy, odseky, tip a tlačidlá berie stránka z auri-blog.css, rovnako ako články. Tento súbor iba: 1) zúži stránku na šírku článkov, 2) rozloží e-mail a formulár vedľa seba, 3) zladí natívny formulár Shoptetu s dizajnom AURI, 4) vytvorí odkazy Rýchlej pomoci a blok s firemnými údajmi. Platí iba vnútri #auri-kontakt, iné stránky nemení. ===================================================================== */ /* 1. Šírka stĺpca ako v článkoch */ #auri-kontakt{max-width:788px;margin:0 auto 48px} #auri-kontakt h2.ak-hello{font-size:30px;margin:8px 0 12px} /* 2. E-mail + formulár */ #auri-kontakt .ak-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:stretch;margin:24px 0 40px} #auri-kontakt .ak-mail{display:flex;flex-direction:column;background:var(--ab-cream);border-radius:16px;padding:28px 26px} #auri-kontakt .ak-mail > *:last-child{margin-bottom:0} #auri-kontakt .ak-ico{display:block;width:48px;height:48px;border-radius:50%;background:#fff;position:relative;margin:0 0 16px} #auri-kontakt .ak-ico:after{content:"";position:absolute;inset:0;margin:auto;width:24px;height:24px;background:var(--ab-gold); -webkit-mask:var(--ak-ico) center/contain no-repeat;mask:var(--ak-ico) center/contain no-repeat} #auri-kontakt p.ak-label{font-size:12px!important;line-height:1.3!important;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ab-gold);margin:0 0 6px!important} #auri-kontakt p.ak-email{font-size:22px!important;line-height:1.3!important;font-weight:700;margin:0 0 14px!important;word-break:break-word} #auri-kontakt p.ak-email a{color:#000;text-decoration:none} #auri-kontakt p.ak-email a:hover,#auri-kontakt p.ak-email a:focus-visible{color:var(--ab-gold)} #auri-kontakt .ak-mail .ab-cta{justify-content:flex-start;margin:auto 0 0;padding-top:20px} #auri-kontakt .ak-mail .ab-cta .btn{width:100%} #auri-kontakt .ak-form{border:1px solid var(--ab-line);border-radius:16px;padding:24px 24px 8px;background:#fff} #auri-kontakt .ak-form h3{margin:0 0 6px} #auri-kontakt .ak-form > p{font-size:15px!important;color:var(--ab-muted);margin:0 0 12px!important} /* 3. Natívny formulár Shoptetu – iba vzhľad, funkcia ostáva Shoptetu */ #auri-kontakt .ak-form form{margin:0} #auri-kontakt .ak-form fieldset{border:0;margin:0;padding:0;min-width:0} #auri-kontakt .ak-form .form-legend{font-size:12px!important;color:var(--ab-muted);margin:0 0 8px!important} #auri-kontakt .ak-form .form-group{margin:0 0 12px} #auri-kontakt .ak-form label{display:block;font-size:14px;line-height:1.4;font-weight:700;color:#000;margin:0 0 4px} #auri-kontakt .ak-form .form-control, #auri-kontakt .ak-form input[type=text], #auri-kontakt .ak-form input[type=email], #auri-kontakt .ak-form input[type=tel], #auri-kontakt .ak-form textarea{ width:100%;max-width:100%;box-sizing:border-box;font:inherit;font-size:16px;line-height:1.5;color:#000; background:#fff;border:1px solid var(--ab-line);border-radius:10px;padding:9px 14px;box-shadow:none; transition:border-color .2s ease-out,box-shadow .2s ease-out} #auri-kontakt .ak-form textarea{height:110px;min-height:110px;resize:vertical} #auri-kontakt .ak-form .form-control:focus, #auri-kontakt .ak-form input:focus, #auri-kontakt .ak-form textarea:focus{outline:0;border-color:var(--ab-gold);box-shadow:0 0 0 3px rgba(174,141,63,.18)} #auri-kontakt .ak-form .consents,#auri-kontakt .ak-form .consents p{font-size:12px!important;line-height:1.45!important;color:var(--ab-muted);margin-bottom:0!important} #auri-kontakt .ak-form .consents a{color:var(--ab-gold)} #auri-kontakt .ak-form .submit-wrapper{margin-top:4px} #auri-kontakt .ak-form button[type=submit],#auri-kontakt .ak-form .btn{width:100%;margin:0} #auri-kontakt .ak-form button[type=submit]{background:var(--ab-gold);border-color:var(--ab-gold);color:#fff;transition:background-color .3s ease-out,border-color .3s ease-out} #auri-kontakt .ak-form button[type=submit]:hover,#auri-kontakt .ak-form button[type=submit]:focus-visible{background:var(--ab-pink);border-color:var(--ab-pink);color:#fff} /* chybové hlásenia validácie Shoptetu ostávajú viditeľné */ #auri-kontakt .ak-form .msg-error,#auri-kontakt .ak-form .error,#auri-kontakt .ak-form .js-validator-msg{font-size:13px;color:#C0392B} /* 4. Rýchla pomoc */ #auri-kontakt .ak-help{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0 40px;padding:0} #auri-kontakt .ak-help a{position:relative;display:flex;align-items:center;gap:14px;min-height:72px;padding:14px 40px 14px 16px; border:1px solid var(--ab-line);border-radius:12px;background:#fff;color:#000;text-decoration:none!important; transition:border-color .3s ease-out,background-color .3s ease-out} #auri-kontakt .ak-help a:hover,#auri-kontakt .ak-help a:focus-visible{border-color:var(--ab-gold);background:var(--ab-cream)} #auri-kontakt .ak-help a:after{content:"→";position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--ab-gold);font-size:18px;line-height:1} #auri-kontakt .ak-help .ak-ico{flex:none;width:40px;height:40px;margin:0;background:var(--ab-cream)} #auri-kontakt .ak-help .ak-ico:after{width:20px;height:20px} #auri-kontakt .ak-help strong{font-size:16px;line-height:1.35} /* 5. Firemné údaje */ #auri-kontakt .ak-company{background:var(--ab-cream);border-radius:16px;padding:28px 28px 8px;margin:24px 0 40px} #auri-kontakt .ak-company p{margin:0 0 14px} #auri-kontakt p.ak-company__name{font-size:18px!important;font-weight:700;margin-bottom:6px!important} #auri-kontakt .ak-company dl{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;row-gap:8px;margin:16px 0 20px;padding:16px 0 0;border-top:1px solid var(--ab-line)} #auri-kontakt .ak-company dt{font-size:14px;line-height:1.5;font-weight:700;color:var(--ab-muted)} #auri-kontakt .ak-company dd{margin:0;font-size:15px;line-height:1.5;color:#000;word-break:break-word} #auri-kontakt .ak-company .ab-tip{background:#fff;margin:8px 0 20px} /* Ikonky (trieda na .ak-ico) */ #auri-kontakt .ak-ico--mail{--ak-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%225.5%22 width=%2218%22 height=%2213%22 rx=%221.5%22/%3E%3Cpath d=%22m3.5 6.5 8.5 7 8.5-7%22/%3E%3C/svg%3E")} #auri-kontakt .ak-ico--faq{--ak-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.5%22/%3E%3Cpath d=%22M9.6 9.4a2.5 2.5 0 0 1 4.8.9c0 1.7-2.4 2.2-2.4 3.7%22/%3E%3Cpath d=%22M12 16.8v.2%22/%3E%3C/svg%3E")} #auri-kontakt .ak-ico--truck{--ak-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2.5 6.5h11v9h-11z%22/%3E%3Cpath d=%22M13.5 9.5h4l3 3.2v2.8h-7%22/%3E%3Ccircle cx=%226.5%22 cy=%2217.5%22 r=%221.8%22/%3E%3Ccircle cx=%2217%22 cy=%2217.5%22 r=%221.8%22/%3E%3C/svg%3E")} #auri-kontakt .ak-ico--return{--ak-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M8.5 5.5 4.5 9.5l4 4%22/%3E%3Cpath d=%22M4.5 9.5h10a5 5 0 0 1 0 10h-4%22/%3E%3C/svg%3E")} #auri-kontakt .ak-ico--ring{--ak-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2214.5%22 r=%226%22/%3E%3Cpath d=%22M9.5 5.5 12 3l2.5 2.5L12 8.5z%22/%3E%3C/svg%3E")} /* ---------- MOBIL ---------- */ @media (max-width:767px){ #auri-kontakt h2.ak-hello{font-size:25px} #auri-kontakt .ak-grid{grid-template-columns:minmax(0,1fr);gap:16px;margin:20px 0 32px} #auri-kontakt .ak-mail,#auri-kontakt .ak-form{padding:22px 18px} #auri-kontakt .ak-form{padding-bottom:6px} #auri-kontakt p.ak-email{font-size:20px!important} #auri-kontakt .ak-mail .ab-cta .btn{width:100%} #auri-kontakt .ak-help{grid-template-columns:minmax(0,1fr);gap:10px} #auri-kontakt .ak-company{padding:22px 18px 4px} #auri-kontakt .ak-company dl{grid-template-columns:1fr;row-gap:0} #auri-kontakt .ak-company dd{margin:0 0 10px} } /* ===================== koniec AURI KONTAKT v1.1 ===================== */