Enlarge legal dialogs and footer with solid white popup borders

assets/styles.css

@@ -22,7 +22,6 @@
   --color-sand: #e5cd9c;
   --color-announcement: #f2e6cc;
   --color-focus: #ffc300;
-  --color-accent: #ef3a57;
   --color-dialog: #721a3d;
   --color-overlay: rgb(24 8 16 / 72%);
   --color-shadow: rgb(24 8 16 / 45%);
@@ -289,17 +288,18 @@ address {
 }
 
 .site-footer {
-  margin-block-start: 28px;
+  inline-size: min(100%, calc(454.02 * var(--unit)));
+  margin-block-start: max(28px, calc(20 * var(--unit)));
   border-block-start: 1px solid color-mix(in srgb, var(--color-sand) 35%, transparent);
-  padding-block-start: 8px;
+  padding-block-start: max(8px, calc(8 * var(--unit)));
   color: var(--color-sand);
-  font-size: 14px;
+  font-size: max(16px, calc(10 * var(--unit)));
 }
 
 .site-footer nav {
   display: flex;
   justify-content: center;
-  gap: 24px;
+  gap: max(24px, calc(24 * var(--unit)));
 }
 
 .site-footer a {
@@ -314,20 +314,23 @@ html:has(.legal-dialog:target) {
 }
 
 .legal-dialog {
+  --dialog-unit: max(1px, var(--unit));
+  --dialog-gap: calc(16 * var(--dialog-unit));
+  --dialog-border: calc(2 * var(--dialog-unit));
   position: fixed;
   inset: 0;
-  inline-size: min(48rem, calc(100% - 32px));
+  inline-size: min(calc(900 * var(--dialog-unit)), calc(100% - 2 * var(--dialog-gap)));
   max-inline-size: none;
-  max-block-size: calc(100svh - 32px);
+  max-block-size: calc(100svh - 2 * var(--dialog-gap));
   margin: auto;
-  border: 1px solid color-mix(in srgb, var(--color-sand) 45%, transparent);
-  border-block-start: 4px solid var(--color-accent);
-  border-radius: 12px;
+  border: var(--dialog-border) solid var(--color-white);
+  border-radius: calc(12 * var(--dialog-unit));
   padding: 0;
   overflow: hidden;
   background: var(--color-dialog);
   color: var(--color-cream);
-  box-shadow: 0 24px 80px var(--color-shadow);
+  font-size: calc(18 * var(--dialog-unit));
+  box-shadow: 0 calc(24 * var(--dialog-unit)) calc(80 * var(--dialog-unit)) var(--color-shadow);
 }
 
 .legal-dialog::backdrop {
@@ -345,7 +348,7 @@ html:has(.legal-dialog:target) {
 .legal-shell {
   display: flex;
   flex-direction: column;
-  max-block-size: min(54rem, calc(100svh - 38px));
+  max-block-size: calc(100svh - 2 * var(--dialog-gap) - 2 * var(--dialog-border));
 }
 
 .legal-header {
@@ -353,26 +356,26 @@ html:has(.legal-dialog:target) {
   flex: none;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
+  gap: calc(16 * var(--dialog-unit));
   border-block-end: 1px solid color-mix(in srgb, var(--color-sand) 25%, transparent);
-  padding: 12px clamp(18px, 4vw, 36px);
+  padding: calc(12 * var(--dialog-unit)) calc(20 * var(--dialog-unit));
 }
 
 .legal-header img {
-  inline-size: 48px;
-  block-size: 38px;
+  inline-size: calc(64 * var(--dialog-unit));
+  block-size: calc(51 * var(--dialog-unit));
 }
 
 .legal-close {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 12px;
-  min-block-size: 44px;
-  border-radius: 6px;
-  padding-inline: 12px;
+  gap: calc(12 * var(--dialog-unit));
+  min-block-size: calc(44 * var(--dialog-unit));
+  border-radius: calc(6 * var(--dialog-unit));
+  padding-inline: calc(12 * var(--dialog-unit));
   color: var(--color-sand);
-  font-size: 14px;
+  font-size: calc(16 * var(--dialog-unit));
 }
 
 .legal-close:hover {
@@ -381,62 +384,62 @@ html:has(.legal-dialog:target) {
 }
 
 .legal-close span {
-  font-size: 28px;
+  font-size: calc(28 * var(--dialog-unit));
   line-height: 1;
 }
 
 .legal-copy {
   min-block-size: 0;
-  padding: clamp(20px, 4vw, 36px);
+  padding: calc(24 * var(--dialog-unit));
   overflow: auto;
   overscroll-behavior: contain;
   text-align: start;
   overflow-wrap: anywhere;
-  font-size: 16px;
+  font-size: inherit;
   font-style: normal;
   line-height: 1.65;
   scrollbar-color: var(--color-sand) var(--color-dialog);
 }
 
 .legal-copy h1 {
-  margin: 0 0 24px;
+  margin: 0 0 calc(24 * var(--dialog-unit));
   color: var(--color-cream);
-  font-size: clamp(26px, 4vw, 34px);
+  font-size: calc(36 * var(--dialog-unit));
   font-style: italic;
   line-height: 1.2;
 }
 
 .legal-copy h2 {
-  margin: 32px 0 16px;
+  margin: calc(32 * var(--dialog-unit)) 0 calc(16 * var(--dialog-unit));
   color: var(--color-sand);
-  font-size: 22px;
+  font-size: calc(24 * var(--dialog-unit));
   line-height: 1.35;
 }
 
 .legal-copy h3 {
-  margin: 24px 0 12px;
+  margin: calc(24 * var(--dialog-unit)) 0 calc(12 * var(--dialog-unit));
   color: var(--color-sand);
-  font-size: 18px;
+  font-size: calc(20 * var(--dialog-unit));
   line-height: 1.4;
 }
 
 .legal-copy h4 {
-  margin: 20px 0 10px;
-  font-size: 16px;
+  margin: calc(20 * var(--dialog-unit)) 0 calc(10 * var(--dialog-unit));
+  font-size: inherit;
   line-height: 1.5;
 }
 
 .legal-copy p,
 .legal-copy ul {
-  margin-block: 0 16px;
+  margin-block: 0 calc(16 * var(--dialog-unit));
 }
 
 .legal-copy ul {
-  padding-inline-start: 24px;
+  padding-inline-start: calc(24 * var(--dialog-unit));
 }
 
 .legal-copy li + li {
-  margin-block-start: 8px;
+  margin-block-start: calc(8 * var(--dialog-unit));
 }
 
 .legal-copy a {
@@ -504,6 +507,10 @@ html:has(.legal-dialog:target) {
     line-height: 1.5;
   }
 
+  .site-footer {
+    inline-size: min(100%, 620px);
+  }
+
   .announcement {
     margin-block-start: 30px;
   }