style: unify colors across devices and refine hero, projects and dialog layout

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/styles.scss

@@ -1,3 +1,19 @@
+@font-face {
+  font-family: 'Outfit';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('assets/optimized/fonts/outfit-latin.woff2') format('woff2');
+}
+
+// Shared by desktop and touch devices so both show the same tones. The absolute URL keeps the
+// file name stable so index.html can preload it.
+$page-background:
+  radial-gradient(circle at top left, rgba(217, 162, 140, 0.22), transparent 26%),
+  radial-gradient(circle at bottom right, rgba(127, 78, 63, 0.28), transparent 28%),
+  linear-gradient(180deg, rgba(9, 9, 12, 0.4), rgba(8, 8, 11, 0.82)),
+  url('/assets/optimized/background.webp') center / cover fixed no-repeat;
+
 :root {
   --page-max-width: 1000px;
   --content-max-width: 920px;
@@ -7,7 +23,7 @@
   --panel-background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
   --border-soft: rgba(255, 255, 255, 0.1);
   --text-primary: #f7f1ea;
-  --text-muted: rgba(247, 241, 234, 0.74);
+  --text-muted: rgba(247, 241, 234, 0.86);
   --accent: #d9a28c;
   --accent-strong: #efbf9d;
   --shadow: 0 28px 70px rgba(7, 7, 11, 0.34);
@@ -64,11 +80,7 @@ body {
   color: var(--text-primary);
   overflow-x: clip;
   background-color: #08080b;
-  background:
+  background: $page-background;
-    radial-gradient(circle at top left, rgba(217, 162, 140, 0.22), transparent 26%),
-    radial-gradient(circle at bottom right, rgba(127, 78, 63, 0.28), transparent 28%),
-    linear-gradient(180deg, rgba(9, 9, 12, 0.4), rgba(8, 8, 11, 0.82)),
-    url('assets/optimized/background.webp') center / cover fixed no-repeat;
   -webkit-overflow-scrolling: touch;
 }
 
@@ -77,6 +89,10 @@ a {
   text-decoration: none;
 }
 
+button {
+  font-family: inherit;
+}
+
 img {
   max-width: 100%;
   display: block;
@@ -221,7 +237,6 @@ hr {
 .story-detail,
 .project-copy,
 .project-title-wrap,
-.project-languages,
 .legal-contact-box,
 .language-copy,
 .language-switcher-copy {
@@ -253,7 +268,6 @@ hr {
 .legal-contact-box p,
 .legal-provider-name,
 .project-link,
-.project-language-chip,
 .portrait-caption,
 .portrait-click-hint,
 .inline-link {
@@ -270,7 +284,7 @@ hr {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-3);
-  margin-top: var(--space-5);
+  margin-top: var(--space-3);
   align-items: center;
 }
 
@@ -283,7 +297,8 @@ hr {
 
 .hero-contact-block {
   display: grid;
-  justify-items: center;
+  justify-items: start;
+  margin-top: var(--space-3);
   gap: 0.45rem;
   width: min(100%, 22rem);
 }
@@ -295,7 +310,7 @@ hr {
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--text-muted);
-  text-align: center;
+  text-align: left;
 }
 
 .hero-contact-area {
@@ -317,61 +332,6 @@ hr {
   aspect-ratio: 1;
 }
 
-.openpgp-section {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: var(--space-4);
-  align-items: center;
-  margin-top: var(--space-4);
-  padding: 1.25rem 1.4rem;
-}
-
-.openpgp-copy,
-.openpgp-actions {
-  min-width: 0;
-}
-
-.openpgp-copy {
-  display: grid;
-  gap: 0.45rem;
-}
-
-.openpgp-description,
-.openpgp-fingerprint {
-  margin: 0;
-}
-
-.openpgp-description {
-  color: var(--text-muted);
-  line-height: 1.6;
-}
-
-.openpgp-actions {
-  display: grid;
-  gap: 0.7rem;
-  justify-items: end;
-}
-
-.openpgp-download-link {
-  width: 100%;
-  min-width: min(100%, 15rem);
-}
-
-.openpgp-fingerprint {
-  display: grid;
-  gap: 0.2rem;
-  text-align: right;
-  color: var(--text-muted);
-  font-size: 0.8rem;
-}
-
-.openpgp-fingerprint strong {
-  color: var(--text-primary);
-  line-height: 1.55;
-  letter-spacing: 0.06em;
-  word-break: break-word;
-}
-
 .action-link {
   display: inline-flex;
   align-items: center;
@@ -492,6 +452,35 @@ hr {
   border-top: 1px solid var(--border-soft);
 }
 
+.hero-visual .hero-meta {
+  max-width: none;
+  margin-top: 0;
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-lg);
+  background: rgba(12, 12, 16, 0.42);
+  border: 1px solid var(--border-soft);
+  box-shadow: var(--shadow-soft);
+  justify-items: center;
+  text-align: center;
+}
+
+.hero-visual .hero-meta {
+  transition:
+    border-color var(--transition-fast),
+    background var(--transition-fast);
+}
+
+.hero-visual .hero-meta:hover,
+.hero-visual .hero-meta:focus-visible {
+  border-color: rgba(239, 191, 157, 0.34);
+  background: rgba(12, 12, 16, 0.58);
+}
+
+.hero-visual .hero-meta div {
+  padding-top: 0;
+  border-top: 0;
+}
+
 .meta-label {
   display: block;
   margin-bottom: var(--space-1);
@@ -552,32 +541,30 @@ hr {
   box-shadow: 0 20px 48px rgba(9, 9, 12, 0.34);
 }
 
-.portrait-caption {
+.portrait-caption,
+.portrait-click-hint {
   position: absolute;
+  max-width: calc(100% - 2.2rem);
+  padding: 0.45rem 0.85rem;
+  border: 1px solid rgba(239, 191, 157, 0.28);
+  border-radius: 999px;
+  background: rgba(12, 12, 16, 0.78);
+  color: var(--text-primary);
+  font-size: 0.95rem;
+  font-weight: 600;
+  line-height: 1.2;
+  backdrop-filter: blur(10px);
+}
+
+.portrait-caption {
   right: 1.1rem;
   bottom: 1.1rem;
-  max-width: calc(100% - 2.2rem);
-  padding: 0.5rem 0.9rem;
-  border-radius: 0.65rem;
-  background: #ffffff;
-  color: #000000;
-  font-size: 1.08rem;
-  font-weight: 700;
-  line-height: 1.2;
 }
 
 .portrait-click-hint {
-  position: absolute;
   left: 1.1rem;
   top: 1.1rem;
-  max-width: calc(100% - 2.2rem);
+  color: var(--accent-strong);
-  padding: 0.5rem 0.9rem;
-  border-radius: 0.65rem;
-  background: #ffffff;
-  color: #000000;
-  font-size: 1.02rem;
-  font-weight: 700;
-  line-height: 1.2;
 }
 
 .hero-note {
@@ -865,9 +852,9 @@ hr {
 
 .project-header {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
   align-items: flex-start;
-  gap: var(--space-4);
+  gap: var(--space-3);
 }
 
 .project-title-wrap {
@@ -891,31 +878,25 @@ hr {
   transition: color var(--transition-fast);
 }
 
-.project-link:hover {
+.project-entry:hover .project-link,
+.project-entry:focus-visible .project-link {
   color: var(--accent-strong);
 }
 
-.project-languages {
+.project-title-tail {
-  display: flex;
+  white-space: nowrap;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 0.45rem;
-  max-width: 22rem;
 }
 
-.project-language-chip {
+.project-arrow {
-  display: inline-flex;
+  margin-left: 0.45em;
-  align-items: center;
+  font-size: 0.6em;
-  min-height: 1.9rem;
+  vertical-align: 0.2em;
-  padding: 0.15rem 0.65rem;
+  transition: transform var(--transition-fast);
-  border-radius: 999px;
+}
-  border: 1px solid rgba(255, 255, 255, 0.14);
+
-  background: rgba(255, 255, 255, 0.04);
+.project-entry:hover .project-arrow,
-  color: var(--text-muted);
+.project-entry:focus-visible .project-arrow {
-  font-size: 0.82rem;
+  transform: translateX(4px);
-  font-weight: 600;
-  line-height: 1;
-  letter-spacing: 0.01em;
 }
 
 .project-description {
@@ -946,6 +927,11 @@ hr {
   grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr);
 }
 
+// First card on the page: starts at the same height as the home hero.
+.imprint-page .legal-hero {
+  margin-top: 0;
+}
+
 .legal-hero .back-link {
   margin-bottom: 0;
 }
@@ -1062,16 +1048,6 @@ hr {
     padding: clamp(1.1rem, 3.8vw, 1.5rem);
   }
 
-  .project-header {
-    flex-direction: column;
-    gap: var(--space-3);
-  }
-
-  .project-languages {
-    justify-content: flex-start;
-    max-width: none;
-  }
-
   .legal-hero {
     gap: var(--space-4);
   }
@@ -1100,6 +1076,15 @@ hr {
     padding: var(--space-4) 0 var(--space-6);
   }
 
+  .hero-contact-block {
+    justify-items: center;
+    margin-inline: auto;
+  }
+
+  .hero-contact-title {
+    text-align: center;
+  }
+
   .hero-section {
     padding: clamp(1rem, 4vw, 1.2rem);
   }
@@ -1168,12 +1153,9 @@ hr {
 
   .hero-actions {
     order: 3;
-    margin-top: var(--space-4);
+    // Pulls the buttons up against the section gap so they sit as close to the skills box
-  }
+    // as the skills box sits to the portrait.
-
+    margin-top: calc(var(--space-4) - var(--space-6));
-  .hero-meta {
-    order: 4;
-    margin-top: var(--space-3);
   }
 
   .hero-meta,
@@ -1232,12 +1214,6 @@ hr {
     font-size: 0.93rem;
   }
 
-  .project-language-chip {
-    min-height: 1.6rem;
-    padding: 0.08rem 0.52rem;
-    font-size: 0.74rem;
-  }
-
   .hero-actions,
   .hero-contact-area,
   .hero-action-links {
@@ -1257,19 +1233,6 @@ hr {
     text-align: center;
   }
 
-  .openpgp-section {
-    grid-template-columns: 1fr;
-    justify-items: center;
-    text-align: center;
-  }
-
-  .openpgp-actions,
-  .openpgp-fingerprint {
-    width: 100%;
-    justify-items: center;
-    text-align: center;
-  }
-
   .hero-meta div {
     width: min(100%, 24rem);
   }
@@ -1282,12 +1245,6 @@ hr {
     justify-items: center;
   }
 
-  .panel,
-  .language-overlay,
-  .language-switcher {
-    backdrop-filter: none;
-  }
-
   .projects-section,
   .story-section,
   .legal-section {
@@ -1308,11 +1265,7 @@ hr {
     inset: 0;
     z-index: -1;
     pointer-events: none;
-    background:
+    background: $page-background;
-      radial-gradient(circle at top left, rgba(217, 162, 140, 0.18), transparent 28%),
-      radial-gradient(circle at bottom right, rgba(127, 78, 63, 0.24), transparent 32%),
-      linear-gradient(180deg, rgba(9, 9, 12, 0.72), rgba(8, 8, 11, 0.96)),
-      url('assets/optimized/background.webp') center / cover fixed no-repeat;
   }
 }
 
@@ -1380,11 +1333,21 @@ hr {
     will-change: auto;
   }
 }
+html:has(.language-overlay[open]) {
+  overflow: hidden;
+}
+
 .language-overlay {
   position: fixed;
   inset: 0;
   z-index: 9999;
-  display: grid;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  max-height: none;
+  margin: 0;
+  border: 0;
+  color: inherit;
   place-items: center;
   padding: 1.25rem;
   background:
@@ -1393,6 +1356,14 @@ hr {
   backdrop-filter: blur(18px);
 }
 
+.language-overlay[open] {
+  display: grid;
+}
+
+.language-overlay::backdrop {
+  background: transparent;
+}
+
 .language-card {
   position: relative;
   display: grid;
@@ -1593,11 +1564,6 @@ hr {
   font-weight: 600;
 }
 
-.app-content[aria-hidden='true'] {
-  user-select: none;
-  pointer-events: none;
-}
-
 @media (max-width: 700px) {
   .language-card {
     width: min(100%, 440px);