Modals

CTA consultation form rendered as a centred dialog over a blurred full-screen overlay — same form card design as the CTA section, adapted for popup context.

The modal component wraps a two-column layout inside a floating dialog. The backdrop uses backdrop-filter: blur(14px) with a dark semi-transparent overlay. Two variants: full two-column CTA in blue or dark. The form side stays minimal — title, short subtitle, name / email / phone, submit, and reassurance chips.

Design structure

Variant A · Blue .modal-blue

Variant A · Blue .modal-blue
Free consultation

Find your optimal EU
citizenship program

Leave your contact details and a specialist will select the best program for you — personally and free of charge.

Or chat
Get a free consultation
We’ll contact you within 2 hours — no obligation.
Free
Confidential
Official programs

Variant B · Dark .modal-dark

Variant B · Dark .modal-dark
🛡️ Legal experts

Get a free legal
consultation

Fill out a short form to connect with one of our EU citizenship lawyers — no obligation, completely free.

Or chat
Book a free consultation
We’ll call you back within 2 hours.
Free
Confidential
Official programs

Mobile · Blue .section-mobile

Mobile · Blue .section-mobile
Free consultation

Find your optimal EU program

Leave your details and a specialist will call you back — free.

Get free consultation
Reply within 2 hours.

Anatomy

.modal-overlay
Full-screen container. Uses position: fixed + backdrop-filter: blur(14px) + semi-transparent dark fill. Set to position: absolute inside previews.
.modal-dialog
The floating card — max-width 900px, border-radius 20px, entrance scale animation. Modifier classes: .modal-blue, .modal-dark.
.modal-close
Frosted-glass close button, top-right corner. Rotates 90° on hover.
.modal-left
Content panel — photo + gradient overlay (blue or dark), eyebrow, headline, subline, WhatsApp / Telegram direct links.
.modal-right
White form card — title, subtitle, name / email / phone fields, submit button, reassurance row.

Usage

<!-- Trigger button -->
<button type="button" onclick="document.getElementById('ctaModal').classList.add('open')">
  Get Free Consultation
</button>

<!-- Modal (hidden by default) -->
<div id="ctaModal" class="modal-overlay" style="display:none; position:fixed;">
  <div class="modal-dialog modal-blue">
    <button class="modal-close" onclick="document.getElementById('ctaModal').style.display='none'">
      ×
    </button>
    <div class="modal-cta">
      <div class="modal-left"> <!-- ... --> </div>
      <div class="modal-right"> <!-- form card --> </div>
    </div>
  </div>
</div>

<script>
  // Close on overlay click
  document.getElementById('ctaModal').addEventListener('click', function(e) {
    if (e.target === this) this.style.display = 'none';
  });
</script>