<style>
/* ---------- Modal base (applies to ALL modals) ---------- */
.wipo-modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease-out;
  z-index: 9999;
}
.wipo-modal:target { opacity: 1; pointer-events: auto; }

/* Backdrop is an anchor so clicking it navigates to '#' (closing modal) */
.wipo-modal .wipo-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.75);
  content: ""; display: block;
}

/* Modal content (shared) */
.wipo-modal .wipo-modal-content {
  position: relative;
  background: #ffffff;
  border-radius: 10px;
  max-width: 90vw; max-height: 90vh;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  overflow: hidden;
  transform: translateY(10px) scale(0.98);
  transition: transform .18s ease-out;
}
.wipo-modal:target .wipo-modal-content { transform: translateY(0) scale(1); }

/* Image fills modal */
.wipo-modal .wipo-modal-content img {
  display:block; width:100%; height:auto;
}

/* Close button */
.wipo-modal .wipo-close {
  position:absolute; top:10px; right:12px;
  font-size:22px; text-decoration:none; font-weight:700;
  color:#fff; background:rgba(0,0,0,0.55);
  padding:3px 10px; border-radius:8px;
}
.wipo-modal .wipo-close:hover { background: rgba(0,0,0,0.8); }

/* ---------- Hover preview over the words ---------- */
.wipo-hover { position: relative; display:inline-block; }
.wipo-hover .wipo-hovercard {
  position: absolute;
  top: 1.6em; left: 0;
  display: none;
  background: #ffffff; border:1px solid #cbd5e1; border-radius:8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  padding: 6px; z-index: 50;
  max-width: 520px; /* adjust preview size */
}
.wipo-hover .wipo-hovercard img { display:block; width:100%; height:auto; border-radius:6px; }
.wipo-hover:hover .wipo-hovercard { display:block; animation: wipoFade .15s ease-out; }

/* Small pointer arrow */
.wipo-hover .wipo-hovercard::before {
  content: ""; position:absolute; top:-6px; left:14px;
  border-width: 6px; border-style: solid;
  border-color: transparent transparent #ffffff transparent;
}

/* Animation */
@keyframes wipoFade {
  from { opacity:0; transform: translateY(4px) scale(0.995); }
  to   { opacity:1; transform: translateY(0)    scale(1); }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .wipo-modal .wipo-modal-content { background:#0b1220; }
  .wipo-hover .wipo-hovercard { background:#0b1220; border-color:#334155; }
  .wipo-hover .wipo-hovercard::before { border-color: transparent transparent #0b1220 transparent; }
}
</style>

<!-- Text with hover preview + click-to-open modal -->
<p>
  A
  <span class="wipo-hover">
    <a href="#wipo-modal" style="color:#005b9e; font-weight:600; cursor:pointer;">Web contact Form</a>
    <span class="wipo-hovercard" aria-hidden="true">
      <img src="https://confluence.wipo.int/confluence/download/attachments/1640667157/image-2025-11-10_9-52-53.png?api=v2" alt="">
    </span>
  </span>
  is available by clicking on the "contact us" link at the top right corner of any WIPO DAS webpage
  (<a href="https://www3.wipo.int/contact/en/area.jsp?area=das">WIPO DAS Support contact form</a>).
</p>

<p>
  While filling the form, please select which
  <span class="wipo-hover">
    <a href="#wipo-modal2" style="color:#005b9e; font-weight:600; cursor:pointer;">sub-topic</a>
    <span class="wipo-hovercard" aria-hidden="true">
      <img src="https://confluence.wipo.int/confluence/download/attachments/1640667157/image-2025-11-10_9-53-31.png?api=v2" alt="">
    </span>
  </span>
  matches your request; it will help identify the type of support that is needed.
</p>

<!-- MODAL 1 -->
<div id="wipo-modal" class="wipo-modal" role="dialog" aria-modal="true" aria-label="Contact Us preview">
  <a class="wipo-backdrop" href="#" aria-label="Close dialog"></a>
  <div class="wipo-modal-content">
    <a href="#" class="wipo-close" aria-label="Close">✕</a>
    <img src="https://confluence.wipo.int/confluence/download/attachments/1640667157/image-2025-11-10_9-52-53.png?api=v2" alt="Contact Us screenshot">
  </div>
</div>

<!-- MODAL 2 -->
<div id="wipo-modal2" class="wipo-modal" role="dialog" aria-modal="true" aria-label="Sub-topic preview">
  <a class="wipo-backdrop" href="#" aria-label="Close dialog"></a>
  <div class="wipo-modal-content">
    <a href="#" class="wipo-close" aria-label="Close">✕</a>
    <img src="https://confluence.wipo.int/confluence/download/attachments/1640667157/image-2025-11-10_9-53-31.png?api=v2" alt="Sub-topic screenshot">
  </div>
</div>

In some cases the automatic initial message is not immediate as we have to add the source email address to the "contact list" of verified addresses (this is done manually once we detect the pending request). 

After that is corrected in the system, for any new request, the notification will be automatically sent to your email.