Use a dialog

docs_overrides/index.html

 
 #pay {
   display: flex;
-  flex-flow: row wrap;
+  flex-flow: column wrap;
   justify-content: center;
   align-items: center;
   align-content: center;
   text-align: center;
   font-size: 1.2rem;
   line-height: 2.5;
-  margin: 0 auto 1rem auto;
-  padding: 18px 3px;
-  max-width: var(--max-width);
-  background-color: rgba(255, 255, 255, 0.2);
-  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
-  border-radius: var(--border-radius);
 }
-#pay > *:nth-child(2) {
-  width: 45%;
+#pay > * {
+  width: 100%;
   min-width: 320px;
 }
-#pay > *:last-child {
-  margin-top: 0.7rem;
-  margin-bottom: 0.7rem;
+#pay > p {
+  font-size: 1.0rem;
+}
+#pay input[type="submit"] {
+  font-size: 1.0rem;
+  margin: 1.0rem 0 0 0;
+}
+#pay > h1 {
+  margin: 0.5rem 0 0 0;
+  font-size: 1.4rem;
 }
 #pay #amounts {
   display: flex;
 #pay #currencies input[type="radio"] + label {
   margin: 0 !important;
 }
-#pay input[type="submit"] {
-  font-size: 1.0rem;
-}
 #pay input[type="radio"] {
   -webkit-appearance: none;
   appearance: none;
 
 
 
+#donation-dialog {
+  max-width: var(--max-width);
+  background-color: whitesmoke;
+  color: var(--md-default-fg-color--light);
+  text-align: center;
+  padding: 1.5rem;
+  border: 0;
+  border-radius: 24px;
+  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
+  transition: opacity 0.5s ease;
+}
+
+#donation-dialog[open] {
+  opacity: 1;
+}
+
+#donation-dialog:not([open]) {
+  opacity: 0;
+  pointer-events: none;
+}
+
+#donation-dialog::backdrop {
+  backdrop-filter: blur(8px);
+  transition: backdrop-filter 0.5s ease;
+}
+
+#donation-dialog-close {
+  position: absolute;
+  top: 0.3rem;
+  right: 0.8rem;
+  font-size: 1.35rem;
+  color: var(--md-default-fg-color--light);
+  cursor: pointer;
+}
+
+html:has(#donation-dialog[open]) {
+  overflow: hidden;
+}
+
+
+
+
 .reveal {
   opacity: 1;
   transition: transform 0.5s ease-out, opacity 0.5s ease-out;
 
 @media screen and (min-width: 768px) {
   /*#pay { justify-content: space-around; }*/
-  #pay > *:nth-child(2) { position: relative; top: 18px; }
   #title h1 { font-size: 4.0rem; }
   #title h2 { font-size: 1.6rem; }
   #topics { text-align: justify; }
     <source src="img/aframe-cat.mp4" type="video/mp4" />
     <source src="img/aframe-cat.webm" type="video/webm" />
   </video>
-  <form id="pay" method="post" action="https://api.encantar.dev/v1/pay" autocomplete="off" onsubmit="return this.tier.value != 'custom' || this['custom-amount'].value != ''">
-    <span>Pay What You Can:</span>
-    <span>
-      <div id="amounts" class="euro">
-        <input type="radio" id="custom-tier" name="tier" value="custom" data-goatcounter-click onchange="this.checked && document.getElementById('custom-amount').focus()">
-        <label for="custom-tier"><span class="dollar-sign"></span>X</label>
-        <input type="radio" id="first-tier" name="tier" value="first" data-goatcounter-click>
-        <label for="first-tier"><span class="dollar-sign"></span>29</label>
-        <input type="radio" id="second-tier" name="tier" value="second" checked data-goatcounter-click>
-        <label for="second-tier"><span class="dollar-sign"></span>49</label>
-        <input type="radio" id="third-tier" name="tier" value="third" data-goatcounter-click>
-        <label for="third-tier"><span class="dollar-sign"></span>99</label>
-        <input type="radio" id="fourth-tier" name="tier" value="fourth" data-goatcounter-click>
-        <label for="fourth-tier"><span class="dollar-sign"></span>199</label>
-        <label for="custom-amount" id="custom-amount-wrapper">
-          <span class="dollar-sign"></span>
-          <input type="number" id="custom-amount" name="custom-amount" value="" placeholder="Enter a fair amount" min="0" max="999999" step="1">
-        </label>
-      </div>
-      <div id="currencies">
-        <input type="radio" id="currency-usd" name="currency" value="usd" data-goatcounter-click onchange="this.checked && document.getElementById('amounts').classList.remove('euro')">
-        <label for="currency-usd">&#x1F1FA;&#x1F1F8; USD</label>
-        <input type="radio" id="currency-eur" name="currency" value="eur" checked data-goatcounter-click onchange="this.checked && document.getElementById('amounts').classList.add('euro')">
-        <label for="currency-eur">&#x1F1EA;&#x1F1FA; EUR</label>
-      </div>
-    </span>
-    <input type="submit" value="Get encantar.js" class="md-button md-button--primary" id="get-encantar" data-goatcounter-click>
-  </form>
 </header>
 
 
 
 <section id="download">
   <article>
-    <h1>Download encantar.js</h1>
-    <p>encantar.js is a WebAR framework created independently by <a href="contact/" target="_blank" id="author-name" data-goatcounter-click>Alexandre Martins</a> and released as libre and open source software under the LGPL v3. Your support is much appreciated!</p>
+    <h1>Download</h1>
+    <p>encantar.js is a WebAR framework created independently by <a href="contact/" target="_blank" id="author-name" data-goatcounter-click>Alexandre Martins</a> and released as open source software under the LGPL. Your support is much appreciated!</p>
     <footer>
-      <a href="#pay" class="md-button md-button--primary" id="download-pay" data-goatcounter-click>Pay What You Can</a>
+      <button class="md-button md-button--primary" id="download-button" data-goatcounter-click onclick="document.getElementById('donation-dialog').showModal()">Download encantar.js</button>
       <a href="https://github.com/sponsors/alemart" target="_blank" class="md-button" id="download-sponsor" data-goatcounter-click>Sponsor on GitHub</a>
     </footer>
   </article>
 
 
 
+<dialog id="donation-dialog">
+  <form id="pay" method="post" action="https://api.encantar.dev/v1/pay" autocomplete="off" onsubmit="return this.tier.value != 'custom' || this['custom-amount'].value != ''">
+    <h1>Download and donate <span class="heart">&#x1f496;</span></h1>
+    <p>Support the project with an amount:</p>
+    <span>
+      <div id="amounts" class="euro">
+        <input type="radio" id="custom-tier" name="tier" value="custom" data-goatcounter-click onchange="this.checked && document.getElementById('custom-amount').focus()">
+        <label for="custom-tier"><span class="dollar-sign"></span>X</label>
+        <input type="radio" id="first-tier" name="tier" value="first" data-goatcounter-click>
+        <label for="first-tier"><span class="dollar-sign"></span>29</label>
+        <input type="radio" id="second-tier" name="tier" value="second" checked data-goatcounter-click>
+        <label for="second-tier"><span class="dollar-sign"></span>49</label>
+        <input type="radio" id="third-tier" name="tier" value="third" data-goatcounter-click>
+        <label for="third-tier"><span class="dollar-sign"></span>99</label>
+        <input type="radio" id="fourth-tier" name="tier" value="fourth" data-goatcounter-click>
+        <label for="fourth-tier"><span class="dollar-sign"></span>199</label>
+        <label for="custom-amount" id="custom-amount-wrapper">
+          <span class="dollar-sign"></span>
+          <input type="number" id="custom-amount" name="custom-amount" value="" placeholder="Enter the amount" min="0" max="999999" step="1">
+        </label>
+      </div>
+      <div id="currencies">
+        <input type="radio" id="currency-usd" name="currency" value="usd" data-goatcounter-click onchange="this.checked && document.getElementById('amounts').classList.remove('euro')">
+        <label for="currency-usd">&#x1F1FA;&#x1F1F8; USD</label>
+        <input type="radio" id="currency-eur" name="currency" value="eur" checked data-goatcounter-click onchange="this.checked && document.getElementById('amounts').classList.add('euro')">
+        <label for="currency-eur">&#x1F1EA;&#x1F1FA; EUR</label>
+      </div>
+    </span>
+    <input type="submit" value="Download" class="md-button md-button--primary" id="get-encantar" data-goatcounter-click>
+  </form>
+  <button id="donation-dialog-close" onclick="document.getElementById('donation-dialog').close()">&times;</button>
+</dialog>
+
+
+
+
 <footer class="md-footer">
   <div class="md-copyright">
     encantar.js: GPU-accelerated Augmented Reality framework for the web. Copyright &copy; 2022 &ndash; present Alexandre Martins