/* ========================================================= * assets/css/form-additions.css * * Doplňky ke kontaktnímu formuláři. * Připoj do ZA hlavní styles.css: * * * NEBO obsah souboru zkopíruj na konec styles.css. * ========================================================= */ /* ---------- FIX: šipka selectu na .sh-page ---------- Původní .sh-page .field select použil zkrácený "background:", čímž přepsal background-image z .field select a šipka zmizela. Tady ji vracíme zpět. */ .sh-page .field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A6A56' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:42px; cursor:pointer; } /* ---------- Per-field chybové hlášky ---------- */ .field-error{ margin-top:6px; font-size:12.5px; line-height:1.4; color:#B43A1F; display:flex; align-items:flex-start; gap:5px; } .field input.is-invalid, .field select.is-invalid, .field textarea.is-invalid{ border-color:#D9472A !important; background:#FFF6F2 !important; box-shadow:0 0 0 3px rgba(217,71,42,.10) !important; } .sh-page .field input.is-invalid, .sh-page .field select.is-invalid, .sh-page .field textarea.is-invalid{ background:#FFF4ED !important; border-color:#C8431F !important; box-shadow:0 0 0 3px rgba(200,67,31,.12) !important; } /* ---------- GDPR souhlas (form-check) ---------- */ .form-check{ margin-top:14px; display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.5; color:var(--ink-700, #4E607C); } .form-check-input{ flex:none; width:18px; height:18px; margin-top:2px; border:1.5px solid var(--ink-300, #B7C1CE); border-radius:4px; background:#fff; cursor:pointer; appearance:none; -webkit-appearance:none; position:relative; transition:border-color .15s, background-color .15s; } .form-check-input:hover{ border-color:var(--ink-500, #6B7B91); } .form-check-input:focus{ outline:none; border-color:var(--ink-900, #07111D); box-shadow:0 0 0 4px rgba(207,226,204,.60); } .form-check-input:checked{ background-color:var(--cta-500, #B4532E); border-color:var(--cta-500, #B4532E); } .form-check-input:checked::after{ content:""; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:13px; } .form-check-input.is-invalid{ border-color:#C8431F !important; box-shadow:0 0 0 3px rgba(200,67,31,.14) !important; } .form-check-label{ cursor:pointer; user-select:none; margin-bottom: 20px; } .form-check-label a{ color:var(--cta-700, #8A3E20); text-decoration:underline; text-underline-offset:2px; } .form-check-label a:hover{ text-decoration:none; } /* na sh-page jen ladění barev */ .sh-page .form-check{ color:var(--stay-ink, #2A1F12); } .sh-page .form-check-input{ border-color:#C4B8A5; } .sh-page .form-check-input:checked{ background-color:var(--cta-500, #B4532E); border-color:var(--cta-500, #B4532E); } /* ---------- Server honeypot (skryté pole "website") ---------- */ .hp{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; overflow:hidden !important; } /* ---------- Spinner v submit tlačítku ---------- */ .btn-send__spinner{ display:inline-block; width:14px; height:14px; margin-right:4px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; vertical-align:-2px; animation:btnSpin .7s linear infinite; } @keyframes btnSpin{ to{transform:rotate(360deg);} } /* ---------- Success overlay (fallback pro karty bez .form-success) ---------- */ .fc-ok{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:32px 22px; background:linear-gradient(180deg, #fff 0%, #FAF7F1 100%); opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .35s ease; z-index:2; border-radius:inherit; } .fc-ok.is-visible{ opacity:1; transform:translateY(0); } .fc-ok.is-leaving{ opacity:0; transform:translateY(-8px); } .fc-ok__badge{ width:64px; height:64px; border-radius:50%; background:#1F8A4C; display:flex; align-items:center; justify-content:center; margin-bottom:18px; box-shadow:0 6px 18px rgba(31,138,76,.28); } .fc-ok__title{ font-size:20px; font-weight:600; color:var(--ink-900, #07111D); margin:0 0 10px 0; line-height:1.3; } .fc-ok__text{ font-size:14.5px; line-height:1.55; color:var(--ink-700, #4E607C); margin:0; max-width:380px; } /* ---------- Drobnosti, které mohly chybět ---------- */ /* fc__req je název hvězdičky z Ostrava-formulářů – alias na .req */ .fc__req{ color:var(--cta-500, #B4532E); margin-left:3px; } /* utility class d-none (Bootstrap-style) — pokud styles.css už neobsahuje */ .d-none{display:none !important;}