/* ===================================================================== M-CSC · contact-modal.css — global multi-step contact wizard popup. Requires base.css (design tokens). Markup is injected by contact-modal.js and lives at end; everything is scoped under .cm-* to avoid colliding with the page (incl. the /kontakt fallback form). ===================================================================== */ /* ---------------------------------------------------------------- Overlay */ .cm-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: clamp(12px, 4vw, 28px); background: color-mix(in srgb, var(--ink) 52%, transparent); backdrop-filter: blur(7px) saturate(1.1); -webkit-backdrop-filter: blur(7px) saturate(1.1); opacity: 0; visibility: hidden; transition: opacity 0.32s var(--ease), visibility 0.32s var(--ease); } .cm-overlay.is-open { opacity: 1; visibility: visible; } body.cm-locked { overflow: hidden; } /* ---------------------------------------------------------------- Dialog */ .cm-dialog { position: relative; width: min(560px, 100%); max-height: min(92dvh, 760px); display: flex; flex-direction: column; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); overflow: hidden; transform: translateY(16px) scale(0.975); opacity: 0; transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out); } .cm-overlay.is-open .cm-dialog { transform: none; opacity: 1; } .cm-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: color 0.18s var(--ease), background 0.18s var(--ease); } .cm-close:hover { color: var(--text); background: var(--hover-tint); } .cm-close svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } /* ---------------------------------------------------------------- Header */ .cm-head { padding: clamp(24px, 4vw, 34px) clamp(22px, 4vw, 34px) 0; flex-shrink: 0; } .cm-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-strong); font-weight: 600; } .cm-eyebrow::before { content: ""; width: 16px; height: 1px; background: var(--brand); opacity: 0.6; } .cm-title { margin: 12px 0 0; font-size: clamp(1.4rem, 1.1rem + 1.3vw, 1.8rem); letter-spacing: -0.02em; } .cm-sub { margin: 7px 0 0; color: var(--muted); font-size: 0.96rem; } /* progress dots */ .cm-progress { display: flex; gap: 7px; margin-top: 20px; } .cm-progress span { height: 4px; flex: 1; border-radius: var(--r-pill); background: var(--border); overflow: hidden; position: relative; } .cm-progress span::after { content: ""; position: absolute; inset: 0; background: var(--brand-gradient); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease-out); } .cm-progress span.is-done::after { transform: scaleX(1); } /* ---------------------------------------------------------------- Body / steps */ .cm-body { padding: clamp(18px, 3vw, 26px) clamp(22px, 4vw, 34px) 4px; overflow-y: auto; flex: 1; } .cm-step { display: none; animation: cm-step-in 0.4s var(--ease-out); } .cm-step.is-active { display: block; } @keyframes cm-step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .cm-field { margin-bottom: 16px; } .cm-field:last-child { margin-bottom: 0; } .cm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 480px) { .cm-row { grid-template-columns: 1fr; } } .cm-label { display: block; margin-bottom: 7px; font-size: 0.88rem; font-weight: 600; color: var(--text); } .cm-label .cm-opt { color: var(--muted); font-weight: 400; } .cm-input, .cm-textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); padding: 12px 14px; font-size: 1rem; line-height: 1.4; outline: none; transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease); } .cm-input::placeholder, .cm-textarea::placeholder { color: var(--dim); } .cm-input:focus, .cm-textarea:focus { border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px var(--brand-tint); } .cm-textarea { min-height: 128px; resize: vertical; } .cm-input.cm-invalid, .cm-textarea.cm-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-tint); } .cm-err { display: none; margin-top: 6px; font-size: 0.82rem; color: var(--danger); } .cm-err.is-shown { display: block; } /* theme picker (step 1) */ .cm-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 480px) { .cm-themes { grid-template-columns: 1fr; } } .cm-theme { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 0.95rem; font-weight: 500; text-align: left; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.12s var(--ease); } .cm-theme:hover { border-color: var(--border-strong); background: var(--surface); } .cm-theme:active { transform: scale(0.985); } .cm-theme.is-selected { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-strong); } .cm-theme .cm-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); color: var(--brand); flex-shrink: 0; } .cm-theme.is-selected .cm-ic { background: var(--surface); border-color: var(--brand); } .cm-theme .cm-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .cm-theme.cm-theme-sos { border-color: rgba(197, 48, 45, 0.32); background: var(--danger-tint); grid-column: 1 / -1; } .cm-theme.cm-theme-sos .cm-ic { color: var(--danger); border-color: rgba(197, 48, 45, 0.3); } .cm-theme.cm-theme-sos:hover { border-color: var(--danger); } /* consent */ .cm-check { display: flex; gap: 11px; align-items: flex-start; color: var(--text-soft); font-size: 0.9rem; margin-top: 4px; } .cm-check input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--brand); cursor: pointer; } .cm-check a { color: var(--brand-strong); text-decoration: none; border-bottom: 1px solid rgba(75, 95, 214, 0.35); } .cm-check a:hover { border-bottom-color: var(--brand); } /* review line on last step */ .cm-review { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .cm-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--border); } .cm-chip b { color: var(--brand-strong); font-weight: 600; } /* emergency + success states */ .cm-emergency p { margin: 0 0 14px; color: var(--text-soft); } .cm-emergency .cm-sos-note { padding: 14px 16px; border-radius: var(--r-md); border: 1px solid rgba(197, 48, 45, 0.3); background: var(--danger-tint); color: #7a2320; font-size: 0.94rem; margin-bottom: 16px; } [data-theme="dark"] .cm-emergency .cm-sos-note { color: #ffb4b0; } .cm-tips { margin: 16px 0 0; padding-left: 18px; color: var(--text-soft); display: grid; gap: 7px; font-size: 0.92rem; } .cm-success { text-align: center; padding: 18px 0 8px; } .cm-success .cm-check-mark { width: 64px; height: 64px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; background: var(--ok-tint); color: var(--ok); } .cm-success .cm-check-mark svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .cm-success h3 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); margin-bottom: 8px; } .cm-success p { color: var(--muted); } /* ---------------------------------------------------------------- Footer / nav */ .cm-foot { display: flex; align-items: center; gap: 12px; padding: 16px clamp(22px, 4vw, 34px) clamp(20px, 4vw, 28px); border-top: 1px solid var(--border-soft); flex-shrink: 0; } .cm-foot .cm-spacer { flex: 1; } .cm-foot .btn { flex-shrink: 0; } .cm-back { background: transparent; color: var(--text-soft); border: 0; padding: 10px 6px; font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: color 0.18s var(--ease); } .cm-back:hover { color: var(--text); } .cm-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .cm-back[hidden] { display: none; } /* hidden helper */ .cm-hidden { display: none !important; } /* ---------------------------------------------------------------- Mobile sheet */ @media (max-width: 540px) { .cm-overlay { padding: 0; place-items: end stretch; } .cm-dialog { width: 100%; max-height: 94dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; transform: translateY(100%); } .cm-overlay.is-open .cm-dialog { transform: none; } } /* ---------------------------------------------------------------- Reduced motion */ @media (prefers-reduced-motion: reduce) { .cm-overlay, .cm-dialog, .cm-progress span::after { transition: opacity 0.001ms; } .cm-dialog { transform: none; } .cm-step { animation: none; } }