/** * Book a demo window, from design/01 Wolke Book a Demo/demo-modal-snippet.html. * Every rule is anchored on #wolke-demo so the theme (pink buttons) and the Elementor kit (Urbanist * headings, button colours) cannot reach inside it. Values are the designer's, unchanged. */ #wolke-demo { --wd-ink:#191919; --wd-cream:#FFFEFA; --wd-rule:#B6CAFF; --wd-blue:#0131FF; --wd-indigo:#3F59E4; --wd-orange:#E87142; --wd-body:rgba(0,0,0,.66); --wd-muted:#6B665F; --wd-line:#C9C3B8; --wd-err:#B42318; padding:0; border:0; margin:auto; background:transparent; color:var(--wd-ink); width:min(920px, calc(100vw - 48px)); max-width:none; max-height:calc(100dvh - 48px); overflow:visible; font-family:'Inter',system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; } #wolke-demo::backdrop { background:rgba(21,17,25,.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); } #wolke-demo[open] { animation:wd-in .22s cubic-bezier(.2,.7,.2,1); } #wolke-demo[open]::backdrop { animation:wd-fade .22s ease; } @keyframes wd-in { from { opacity:0; transform:translateY(14px) scale(.985); } to { opacity:1; transform:none; } } @keyframes wd-fade { from { opacity:0; } to { opacity:1; } } #wolke-demo .wd-shell { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); border-radius:20px; overflow:hidden; background:var(--wd-cream); box-shadow:0 30px 80px -20px rgba(20,10,60,.55); max-height:calc(100dvh - 48px); } #wolke-demo .wd-side { position:relative; padding:44px 38px; color:#fff; overflow:hidden; background:radial-gradient(120% 90% at 100% 0%, rgba(232,113,66,.55) 0%, rgba(232,113,66,0) 55%), linear-gradient(155deg,#7B5CF0 0%,#4A2EA8 48%,#151119 100%); } #wolke-demo .wd-eyebrow { font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72); margin:0 0 18px; } #wolke-demo .wd-title { font-family:'Newsreader',Georgia,serif; font-weight:400; letter-spacing:-.015em; font-size:34px; line-height:1.12; margin:0 0 16px; text-wrap:balance; } #wolke-demo .wd-lede { font-size:15.5px; line-height:1.6; color:rgba(255,255,255,.86); margin:0 0 30px; text-wrap:pretty; } #wolke-demo .wd-covers-h { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); margin:0 0 14px; } #wolke-demo .wd-covers { list-style:none; margin:0; padding:0; } #wolke-demo .wd-covers li { position:relative; padding-left:22px; margin:0 0 13px; font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.92); } #wolke-demo .wd-covers li::before { content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--wd-orange); } #wolke-demo .wd-main { position:relative; padding:40px 40px 34px; overflow-y:auto; overscroll-behavior:contain; } #wolke-demo .wd-close { position:absolute; top:14px; right:14px; width:44px; height:44px; border:0; border-radius:50%; background:transparent; cursor:pointer; display:grid; place-items:center; color:var(--wd-ink); } #wolke-demo .wd-close:hover { background:rgba(0,0,0,.06); } #wolke-demo .wd-close:focus-visible, #wolke-demo .wd-btn:focus-visible, #wolke-demo .wd-field input:focus-visible, #wolke-demo .wd-field select:focus-visible, #wolke-demo .wd-field textarea:focus-visible, #wolke-demo .wd-link:focus-visible { outline:2px solid var(--wd-blue); outline-offset:2px; } #wolke-demo .wd-form-h { font-size:20px; font-weight:600; letter-spacing:-.01em; margin:0 0 22px; padding-right:40px; } #wolke-demo .wd-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 16px; } #wolke-demo .wd-field { display:flex; flex-direction:column; min-width:0; } #wolke-demo .wd-field.wd-wide { grid-column:1 / -1; } #wolke-demo .wd-field label { font-size:13.5px; font-weight:600; margin:0 0 7px; } #wolke-demo .wd-field label .wd-opt { font-weight:400; color:var(--wd-muted); } #wolke-demo .wd-field input, #wolke-demo .wd-field select, #wolke-demo .wd-field textarea { font:inherit; font-size:16px; color:var(--wd-ink); background:#fff; width:100%; border:1px solid var(--wd-line); border-radius:8px; padding:12px 14px; min-height:48px; transition:border-color .15s, box-shadow .15s; -webkit-appearance:none; appearance:none; } #wolke-demo .wd-field select { padding-right:40px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23191919' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; } #wolke-demo .wd-field textarea { min-height:92px; resize:vertical; line-height:1.5; } #wolke-demo .wd-field input:focus, #wolke-demo .wd-field select:focus, #wolke-demo .wd-field textarea:focus { border-color:var(--wd-indigo); box-shadow:0 0 0 3px rgba(63,89,228,.16); outline:none; } #wolke-demo .wd-field [aria-invalid="true"], #wolke-demo .wd-field [aria-invalid="true"]:focus { border-color:var(--wd-err); } #wolke-demo .wd-field [aria-invalid="true"]:focus { box-shadow:0 0 0 3px rgba(180,35,24,.14); } #wolke-demo .wd-err { display:none; font-size:13px; color:var(--wd-err); margin:6px 0 0; } #wolke-demo .wd-field.wd-bad .wd-err { display:block; } #wolke-demo .wd-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin:22px 0 0; min-height:52px; border:0; border-radius:8px; background:var(--wd-ink); color:var(--wd-cream); font:inherit; font-size:16px; font-weight:600; cursor:pointer; transition:background .15s; } #wolke-demo .wd-btn:hover { background:#000; } #wolke-demo .wd-btn[disabled] { opacity:.6; cursor:progress; } #wolke-demo .wd-note { font-size:12.5px; line-height:1.55; color:var(--wd-muted); margin:14px 0 0; } #wolke-demo .wd-note a, #wolke-demo .wd-link { color:var(--wd-ink); text-decoration:underline; text-underline-offset:3px; } #wolke-demo .wd-done { display:none; padding:30px 0 6px; } #wolke-demo .wd-done:focus { outline:none; } #wolke-demo.wd-sent .wd-form { display:none; } #wolke-demo.wd-sent .wd-done { display:block; } #wolke-demo .wd-tick { width:52px; height:52px; border-radius:50%; background:#EEF2FF; display:grid; place-items:center; margin:0 0 22px; } #wolke-demo .wd-done h3 { font-family:'Newsreader',Georgia,serif; font-weight:400; font-size:30px; line-height:1.15; letter-spacing:-.015em; margin:0 0 12px; } #wolke-demo .wd-done p { font-size:15.5px; line-height:1.6; color:var(--wd-body); margin:0 0 22px; max-width:40ch; } #wolke-demo .wd-done .wd-btn { width:auto; padding:0 28px; margin:0 0 16px; } html.wd-lock, html.wd-lock body { overflow:hidden !important; } @media (max-width:860px) { #wolke-demo .wd-shell { display:block; position:relative; } #wolke-demo .wd-main { position:static; } #wolke-demo .wd-side { padding:30px 30px 26px; } #wolke-demo .wd-title { font-size:28px; margin-bottom:10px; } #wolke-demo .wd-lede { margin:0; } #wolke-demo .wd-covers-h, #wolke-demo .wd-covers { display:none; } #wolke-demo .wd-main { padding:30px 30px 28px; } #wolke-demo .wd-close { color:#fff; top:12px; right:12px; } #wolke-demo .wd-close:hover { background:rgba(255,255,255,.14); } #wolke-demo .wd-shell { overflow-y:auto; } #wolke-demo .wd-main { overflow:visible; } } @media (max-width:639px) { #wolke-demo { width:100vw; max-height:100dvh; height:100dvh; margin:0; } #wolke-demo[open] { animation:wd-up .26s cubic-bezier(.2,.7,.2,1); } @keyframes wd-up { from { transform:translateY(24px); opacity:0; } to { transform:none; opacity:1; } } #wolke-demo .wd-shell { border-radius:0; height:100dvh; max-height:100dvh; } #wolke-demo .wd-side { padding:22px 20px 22px; padding-top:max(22px, env(safe-area-inset-top)); } #wolke-demo .wd-eyebrow { margin-bottom:12px; } #wolke-demo .wd-title { font-size:26px; padding-right:44px; } #wolke-demo .wd-lede { font-size:15px; } #wolke-demo .wd-main { padding:24px 20px; padding-bottom:max(28px, env(safe-area-inset-bottom)); } #wolke-demo .wd-form-h { display:none; } #wolke-demo .wd-grid { grid-template-columns:1fr; gap:14px; } #wolke-demo .wd-close { top:max(10px, env(safe-area-inset-top)); right:8px; } } @media (prefers-reduced-motion: reduce) { #wolke-demo[open], #wolke-demo[open]::backdrop { animation:none; } #wolke-demo .wd-field input, #wolke-demo .wd-field select, #wolke-demo .wd-field textarea, #wolke-demo .wd-btn { transition:none; } } /* Additions for WordPress: theme resets inside the window, the honeypot, and the send error. */ /* The design inherits line-height 1.5 from its page body; the Elementor kit sets 20px and labels 1.0. */ #wolke-demo { line-height: 1.5; } #wolke-demo .wd-field label, #wolke-demo .wd-form-h { line-height: 1.5; } #wolke-demo :is(h2, h3, p, ul, li, label) { letter-spacing: normal; text-transform: none; } /* The theme pads every