Restore pre-PR glass landing layout

index.html

@@ -31,6 +31,10 @@
     <link rel="icon" type="image/png" href="/favicon.png" />
     <link rel="apple-touch-icon" type="image/png" href="/favicon.png" />
     <link rel="canonical" href="https://ever-guild.net/" />
+    <link rel="preload" href="/fonts/tilt-warp-400-latin.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="/fonts/hanken-grotesk-400-latin.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="/fonts/hanken-grotesk-600-latin.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="/fonts/jetbrains-mono-500-latin.woff2" as="font" type="font/woff2" crossorigin />
 
     <style>html,body,#root{background:#001D25;margin:0;min-height:100vh;}</style>
 

src/components/sections/Footer.scss

@@ -12,22 +12,23 @@
     gap: $space-md;
     padding-block: $space-lg;
 
-    @media (min-width: 1100px) {
-      flex-direction: row;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: $space-lg $space-xl;
-    }
-
     @include desktop-up {
-      grid-template-columns: 1fr auto auto auto 1fr;
+      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+      grid-template-areas: "brand copyright socials";
+      align-items: center;
+      column-gap: clamp(1.5rem, 4vw, 3rem);
     }
   }
 
   &__brand {
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
+
+    @include desktop-up {
+      grid-area: brand;
+      justify-self: start;
+    }
   }
 
   &__wordmark {
@@ -96,12 +97,14 @@
   &__meta {
     display: flex;
     align-items: center;
+    justify-content: center;
     gap: $space-md;
+    text-align: center;
 
-    @media (min-width: 1100px) {
-      flex: 0 0 auto;
-      flex-direction: column;
-      gap: 0.4rem;
+    @include desktop-up {
+      grid-area: copyright;
+      align-self: center;
+      justify-self: center;
     }
   }
 
@@ -111,6 +114,8 @@
     gap: 0.625rem;
 
     @include desktop-up {
+      grid-area: socials;
+      justify-self: end;
       justify-content: flex-end;
     }
 

src/components/sections/Navbar.scss

@@ -7,15 +7,10 @@
   left: 0;
   right: 0;
   z-index: $z-fixed;
-  border-bottom: 1px solid transparent;
-  background: rgba(1, 24, 28, 0.94);
-  transition:
-    background-color $transition-base,
-    border-color $transition-base;
 
   // Blur-only backdrop (no darkening tint) with a feathered bottom edge.
   // Lives on a pseudo-element so the logo/links stay crisp and unmasked.
-  &__backdrop {
+  &::before {
     content: "";
     position: absolute;
     inset: 0 0 -24px 0;
@@ -32,16 +27,12 @@
     transition: opacity 320ms ease;
   }
 
-  &--scrolled &__backdrop {
+  &--scrolled::before {
     opacity: 1;
   }
 
-  &--scrolled {
-    border-color: $color-border;
-    background: rgba(1, 24, 28, 0.98);
-  }
-
   &__container {
+    position: relative;
     @include container;
     display: flex;
     align-items: center;
@@ -78,8 +69,9 @@
     @media (max-width: #{$bp-desktop - 1px}) {
       position: fixed;
       inset: 68px 0 0 0;
-      background: $color-bg;
-      border-top: 1px solid $color-border;
+      background: rgba(0, 22, 29, 0.97);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
       display: flex;
       flex-direction: column;
       align-items: stretch;

src/components/sections/Services.scss

@@ -1,28 +1,22 @@
 @use '../../styles/variables' as *;
 @use '../../styles/mixins' as *;
 
-#services.section {
-  padding-bottom: clamp(2.5rem, 4vw, 4rem);
-
-  .sec-head {
-    margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
-  }
-}
-
 .services {
   &__grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
-    gap: clamp(0.9rem, 1.5vw, 1.25rem);
-    max-width: 54rem;
+    grid-template-columns: 1fr;
+    gap: $space-md;
+
+    @include mobile-up {
+      grid-template-columns: repeat(2, 1fr);
+    }
   }
 
   &__card {
     position: relative;
     @include engineered-panel(30px);
-    min-height: clamp(11.25rem, 14vw, 12.75rem);
-    padding: clamp(1.35rem, 2vw, 1.75rem);
-    padding-right: clamp(4.75rem, 7vw, 6rem);
+    padding: $space-lg;
+    padding-right: clamp(5.25rem, 10vw, 7rem);
 
     &:hover {
       border-color: $color-glass-edge;
@@ -66,23 +60,21 @@
 
   &__title {
     @include display;
-    font-size: clamp(1.45rem, 2vw, 1.65rem);
+    font-size: $text-2xl;
     line-height: 1.04;
     letter-spacing: $tracking-tight;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.65rem;
     transition: color $transition-base;
   }
 
   &__desc {
-    margin: 0;
-    max-width: 36ch;
-    font-size: clamp(0.92rem, 1.1vw, 0.98rem);
-    line-height: 1.48;
+    font-size: $text-sm;
+    line-height: $leading-normal;
     color: $color-text-2;
   }
 
   &__marquee {
-    margin-top: clamp(1.75rem, 3vw, 2.75rem);
+    margin-top: $space-xl;
     overflow: hidden;
     mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%);
     -webkit-mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%);
@@ -139,7 +131,6 @@
     }
 
     &__card {
-      min-height: auto;
       padding: 1.35rem;
       padding-right: 4rem;
     }
@@ -161,7 +152,7 @@
     }
 
     &__marquee {
-      margin-top: 1.5rem;
+      margin-top: 2rem;
     }
 
     &__tag {

src/components/sections/Team.scss

@@ -15,24 +15,21 @@
 
   &__card {
     position: relative;
-    border: 1px solid $color-border-2;
-    border-radius: 30px;
-    background: $color-surface;
-    box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.06),
-      0 12px 36px rgba(0, 0, 0, 0.24);
+    @include engineered-panel(30px);
     overflow: hidden;
     display: flex;
     flex-direction: column;
+    scroll-margin-top: 5.75rem;
     width: 100%;
     transition:
       border-color $transition-base,
       background-color $transition-base,
       transform 300ms $ease-spring;
 
     &:hover {
-      border-color: $color-border-2;
-      background: $color-surface-2;
+      border-color: $color-glass-edge;
+      background: $color-glass-2;
+      transform: translateY(-4px);
 
       .team__avatar { filter: grayscale(0) contrast(1); }
 
@@ -50,6 +47,8 @@
 
   &__photo {
     position: relative;
+    aspect-ratio: 1 / 1;
+    overflow: hidden;
     border-bottom: 1px solid $color-glass-border;
   }
 
@@ -92,6 +91,7 @@
     font-size: clamp(0.82rem, 2.8vw, $text-sm);
     line-height: 1.48;
     color: $color-text-2;
+    flex: 1;
   }
 
   &__github {
@@ -124,8 +124,6 @@
   }
 
   &__github-arrow {
-    margin-left: 0.15rem;
-    color: $color-text-3;
     transition: transform $transition-base, color $transition-base;
   }
 }

src/components/ui/Button.scss

@@ -1,6 +1,7 @@
 @use '../../styles/variables' as *;
 
 .btn {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;

src/styles/_mixins.scss

@@ -129,8 +129,8 @@
 // Display type (headlines) — Tilt Warp
 @mixin display {
   font-family: $font-display;
-  font-weight: 600;
-  letter-spacing: $tracking-tight;
+  font-weight: 400;
+  letter-spacing: 0;
   line-height: 1.08;
   color: $color-text;
 }

src/styles/_reset.scss

@@ -17,6 +17,7 @@ html {
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-synthesis-weight: none;
   text-rendering: optimizeLegibility;
 }
 

tests/acceptance/content.spec.ts

@@ -136,4 +136,44 @@ test.describe('landing page content', () => {
       await expect(footer.locator(`a[href="${url}"]`)).toBeVisible();
     }
   });
+
+  test('footer layout keeps copyright centered and socials on the right', async ({ page }) => {
+    await page.goto('/');
+    await page.locator('.footer').scrollIntoViewIfNeeded();
+
+    const layout = await page.evaluate(() => {
+      const rect = (selector: string) => {
+        const element = document.querySelector(selector);
+        const box = element?.getBoundingClientRect();
+
+        if (!box) return null;
+
+        return {
+          left: box.left,
+          right: box.right,
+          center: box.left + box.width / 2,
+        };
+      };
+
+      return {
+        viewportCenter: window.innerWidth / 2,
+        viewportWidth: window.innerWidth,
+        copyright: rect('.footer__copyright'),
+        socials: rect('.footer__socials'),
+        firstSocial: rect('.footer__socials .social-icon'),
+      };
+    });
+
+    expect(layout.copyright).not.toBeNull();
+    expect(layout.socials).not.toBeNull();
+    expect(layout.firstSocial).not.toBeNull();
+    expect(Math.abs((layout.copyright?.center ?? 0) - layout.viewportCenter)).toBeLessThanOrEqual(1);
+
+    if (layout.viewportWidth >= 1024) {
+      expect(layout.socials?.left).toBeGreaterThan((layout.copyright?.right ?? 0) + 32);
+      expect(layout.socials?.right).toBeGreaterThanOrEqual(layout.viewportWidth - 96);
+    } else {
+      expect(layout.firstSocial?.left).toBeLessThanOrEqual(32);
+    }
+  });
 });