changes

src/components/Footer.astro

@@ -72,7 +72,7 @@ function getCurrentYear() {
     max-width: var(--max-content-width);
     margin-inline: auto;
     padding-block: 8rem 5.5rem;
-    padding-inline: 5rem;
+    padding-inline: var(--padding-x);
   }
 
   nav,
@@ -154,7 +154,7 @@ function getCurrentYear() {
       gsap.from(footer, {
         scrollTrigger: {
           trigger: footer,
-          start: "top bottom",
+          // start: "top bottom",
         },
         duration: 2,
         opacity: 0,

src/components/GlobalStyles.astro

@@ -2,16 +2,38 @@
   @import url("../styles/poppins.css");
 
   :root {
+    --clr-light-400: oklch(100% 0.00011 271.152);
+    --clr-light-500: oklch(from var(--clr-light-400) calc(l - 0.1) c h);
+    --clr-light-600: oklch(from var(--clr-light-400) calc(l - 0.3) c h);
+    --clr-dark-400: oklch(13.306% 0.006 17.794);
+    --clr-ts-red-400: oklch(65.135% 0.21964 28.111);
+
+    --gradient-heading: linear-gradient(
+      to bottom,
+      oklch(from var(--clr-light-400) calc(l - 0.05) c h),
+      oklch(from var(--clr-light-400) calc(l - 0.1) c h) 30%,
+      oklch(from var(--clr-light-400) calc(l - 0.1) c h) 70%,
+      /* oklch(from var(--clr-light-400) calc(l - 0.5) c h) 95%, */
+      oklch(from var(--clr-light-400) calc(l - 0.7) c h) 100%
+    );
+
+    --gradient-overlay: linear-gradient(
+      to bottom,
+      oklch(0% 0 0 / 0.3) 0%,
+      oklch(0% 0 0 / 0) 40%,
+      oklch(0% 0 0 / 0.3) 100%
+    );
+
     --font-sans:
       "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
       Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
       sans-serif;
 
-    /* --fs-md: clamp(1.25rem, 0.25vw + 1rem, 2.5rem); */
+    --fs-page-title: clamp(3rem, 5vw + 1rem, 5.625rem);
-    --fs-md: 1.25rem;
 
-    /* --fs-page-title: 5.625rem; */
+    --fs-md: clamp(1.125rem, 2vw, 1.25rem);
-    --fs-page-title: clamp(3rem, 5.5vw + 1rem, 8rem);
+    --fs-lg: clamp(1.25rem, 2vw, 1.5rem);
+    --fs-xl: clamp(2.5rem, 2.5vw + 2.5rem, 4.75rem);
 
     --leading-title: 1.1;
     --leading-subtitle: 1.2;
@@ -22,39 +44,15 @@
 
     --base-grid: repeat(12, 1fr);
     --max-content-width: 1920px;
+    --padding-x: 1.5rem;
 
-    --clr-light-400: oklch(100% 0.00011 271.152);
+    @media screen and (min-width: 50rem) {
-    --clr-light-500: oklch(from var(--clr-light-400) calc(l - 0.1) c h);
+      --padding-x: 3rem;
-    --clr-light-600: oklch(from var(--clr-light-400) calc(l - 0.3) c h);
+    }
-    --clr-dark-400: oklch(13.306% 0.006 17.794);
-    --clr-ts-red-400: oklch(65.135% 0.21964 28.111);
 
-    --gradient-page-title: linear-gradient(
+    @media screen and (min-width:64rem) {
-      to bottom,
+      --padding-x: 5rem;
-      oklch(from var(--clr-light-400) l c h),
+    }
-      oklch(from var(--clr-light-400) calc(l - 0.05) c h),
-      oklch(from var(--clr-light-400) calc(l - 0.15) c h),
-      oklch(from var(--clr-light-400) calc(l - 0.15) c h),
-      oklch(from var(--clr-light-400) calc(l - 0.15) c h),
-      oklch(from var(--clr-light-400) calc(l - 0.35) c h),
-      oklch(from var(--clr-light-400) calc(l - 0.75) c h)
-    );
-
-    --gradient-heading: linear-gradient(
-      to bottom,
-      oklch(from var(--clr-light-400) calc(l - 0.05) c h),
-      oklch(from var(--clr-light-400) calc(l - 0.1) c h) 30%,
-      oklch(from var(--clr-light-400) calc(l - 0.1) c h) 70%,
-      /* oklch(from var(--clr-light-400) calc(l - 0.5) c h) 80%, */
-      oklch(from var(--clr-light-400) calc(l - 0.7) c h) 100%
-    );
-
-    --gradient-overlay: linear-gradient(
-      to bottom,
-      oklch(0% 0 0 / 0.3) 0%,
-      oklch(0% 0 0 / 0) 40%,
-      oklch(0% 0 0 / 0.3) 100%
-    );
   }
 
   body {

src/components/Header.astro

@@ -27,7 +27,7 @@ import SkipNavLink from "./SkipNavLink.astro";
     display: grid;
     grid-template-columns: var(--base-grid);
     align-items: center;
-    padding-inline: 5rem;
+    padding-inline: var(--padding-x);
     padding-block: 1rem;
     max-width: var(--max-content-width);
     margin-inline: auto;
@@ -53,7 +53,7 @@ import SkipNavLink from "./SkipNavLink.astro";
     grid-column: -1 / -3;
     justify-self: end;
 
-    font-size: 1.25rem;
+    font-size: var(--fs-md);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: var(--tracking-tight);

src/components/Menu.astro

@@ -106,7 +106,7 @@ const { class: classname, ...rest } = Astro.props;
   .menu-content {
     display: grid;
     grid-template-rows: max-content 1fr max-content;
-    padding-inline: 5rem;
+    padding-inline: var(--padding-x);
     padding-block: 1rem 2rem;
     height: 100%;
   }
@@ -129,7 +129,7 @@ const { class: classname, ...rest } = Astro.props;
       gap: 0.5rem;
       grid-column: -2 / -4;
       justify-self: end;
-      font-size: 1.25rem;
+      font-size: var(--fs-md);
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: var(--tracking-tight);

src/components/SkipNavLink.astro

@@ -31,7 +31,7 @@ const { contentId } = Astro.props;
   }
 
   a:focus-visible {
-    left: 5rem;
+    left: var(--padding-x);
     width: auto;
     height: auto;
     opacity: 1;

src/components/landing/AboutSection.astro

@@ -52,7 +52,7 @@ import { Picture } from "astro:assets";
         max-width: var(--max-content-width);
         margin-inline: auto;
         padding-block: 8rem 5.5rem;
-        padding-inline: 5rem;
+        padding-inline: var(--padding-x);
 
         & h2 {
             grid-column: 1 / 6;
@@ -73,7 +73,7 @@ import { Picture } from "astro:assets";
             line-height: var(--leading-paragraph);
 
             > p {
-                margin-top: 1.25rem;
+                margin-top: var(--fs-md);
             }
         }
     }

src/components/landing/ContactSection.astro

@@ -34,16 +34,20 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
     max-width: var(--max-content-width);
     margin-inline: auto;
     padding-block: 8rem 10rem;
-    padding-inline: 5rem;
+    padding-inline: var(--padding-x);
   }
 
   picture {
     display: block;
-    width: calc(100% + 5rem);
+    width: calc(100% + var(--padding-x));
-    grid-column: 1 / 5;
+    grid-column: 1 / 8;
-    /* TODO substitute horizontal spacing with var */
+    grid-row: 1;
-    transform: translate3d(-5rem, 0, 0);
+    transform: translate3d(calc(-1 * var(--padding-x)), 0, 0);
     z-index: -1;
+
+    @media screen and (min-width: 50rem) {
+      grid-column: 1 / 5;
+    }
   }
 
   .image {
@@ -53,8 +57,13 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
   }
 
   .content {
-    grid-column: 6 / -1;
+    grid-column: 3 / 12;
+    grid-row: 1;
     align-content: center;
+
+    @media screen and (min-width: 50rem) {
+      grid-column: 6 / -1;
+    }
   }
 
   h2 {
@@ -82,7 +91,7 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
 
     margin-top: 15rem;
 
-    font-size: 6.25rem;
+    font-size: clamp(3rem, 3vw + 3rem, 6.25rem);
     font-weight: 600;
     text-transform: uppercase;
 

src/components/landing/HeroSection.astro

@@ -37,9 +37,13 @@ import ArrowDown from "../icons/ArrowDown.astro";
     display: grid;
     grid-template-columns: var(--base-grid);
     height: 100svh;
-    padding-inline: 5rem;
+    padding-inline: var(--padding-x);
     max-width: var(--max-content-width);
     margin-inline: auto;
+
+    @media screen (min-width: 21rem) {
+
+    }
   }
 
   .image-wrapper {

src/components/landing/ServicesCard.astro

@@ -33,12 +33,15 @@ const { title, image, items } = Astro.props;
     .card {
         display: grid;
         grid-template-rows: auto 1fr auto;
-        /* padding: 2.5rem; */
+        min-height: 12rem;
-        min-height: 36rem;
 
         & > * {
             grid-column: 1;
         }
+
+        @media screen and (min-width: 64rem) {
+            min-height: 36rem;
+        }
     }
 
     @media (prefers-reduced-motion: no-preference) and (hover: hover) {

src/components/landing/ServicesSection.astro

@@ -59,19 +59,21 @@ const services: Array<ComponentProps<typeof ServicesCard>> = [
         max-width: var(--max-content-width);
         margin-inline: auto;
         padding-block: 8rem;
-        padding-inline: 5rem;
+        padding-inline: var(--padding-x);
     }
 
     .heading {
-        display: grid;
+        @media (min-width: 50rem) {
-        grid-template-columns: subgrid;
+            display: grid;
-        grid-column: 1 / -1;
+            grid-template-columns: subgrid;
+            grid-column: 1 / -1;
+        }
 
         & h2 {
             grid-column: 1 / 6;
             height: max-content;
 
-            font-size: 4.75rem;
+            font-size: var(--fs-xl);
             line-height: var(--leading-title);
             letter-spacing: var(--tracking-narrow);
         }
@@ -80,22 +82,26 @@ const services: Array<ComponentProps<typeof ServicesCard>> = [
             grid-column: -1 / -6;
             justify-self: end;
 
-            max-width: 32ch;
+            font-size: var(--fs-lg);
-            font-size: 1.5rem;
             line-height: var(--leading-paragraph);
+
+            @media (min-width: 50rem) {
+                max-width: 32ch;
+            }
         }
     }
 
     .cards {
         display: grid;
-        grid-template-columns: repeat(3, 1fr);
         gap: 2rem;
 
         grid-column: 1 / -1;
-
         list-style: none;
-
         margin-top: 7rem;
+
+        @media (min-width: 50rem) {
+            grid-template-columns: repeat(3, 1fr);
+        }
     }
 </style>
 

src/components/landing/ValuesSection.astro

@@ -49,7 +49,7 @@ function formatIndex(index: number) {
         max-width: var(--max-content-width);
         margin-inline: auto;
         padding-block: 8rem 5.5rem;
-        padding-inline: 5rem;
+        padding-inline: var(--padding-x);
     }
 
     h2 {

src/pages/imprint.astro

@@ -32,7 +32,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
 
 <style>
     .imprint {
-        padding-inline: 5rem;
+        padding-inline: var(--padding-x);
         max-width: var(--max-content-width);
         margin-inline: auto;
 

src/pages/privacy.astro

@@ -99,7 +99,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
 
 <style>
     .privacy {
-        padding-inline: 5rem;
+        padding-inline: var(--padding-x);
         max-width: var(--max-content-width);
         margin-inline: auto;
 

src/styles/archivo.css

@@ -1,52 +0,0 @@
-/**
-* @license
-*
-* Font Family: Archivo
-* Designed by: Omnibus-Type
-* URL: https://www.fontshare.com/fonts/archivo
-* © 2025 Indian Type Foundry
-*
-* Archivo Light 
-* Archivo Regular 
-* Archivo Italic 
-* Archivo SemiBold 
-
-*
-*/
-@font-face {
-  font-family: 'Archivo';
-  src: url('../assets/fonts/archivo/Archivo-Light.woff2') format('woff2'),
-       url('../assets/fonts/archivo/Archivo-Light.woff') format('woff'),
-       url('../assets/fonts/archivo/Archivo-Light.ttf') format('truetype');
-  font-weight: 300;
-  font-display: swap;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'Archivo';
-  src: url('../assets/fonts/archivo/Archivo-Regular.woff2') format('woff2'),
-       url('../assets/fonts/archivo/Archivo-Regular.woff') format('woff'),
-       url('../assets/fonts/archivo/Archivo-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-display: swap;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'Archivo';
-  src: url('../assets/fonts/archivo/Archivo-Italic.woff2') format('woff2'),
-       url('../assets/fonts/archivo/Archivo-Italic.woff') format('woff'),
-       url('../assets/fonts/archivo/Archivo-Italic.ttf') format('truetype');
-  font-weight: 400;
-  font-display: swap;
-  font-style: italic;
-}
-@font-face {
-  font-family: 'Archivo';
-  src: url('../assets/fonts/archivo/Archivo-SemiBold.woff2') format('woff2'),
-       url('../assets/fonts/archivo/Archivo-SemiBold.woff') format('woff'),
-       url('../assets/fonts/archivo/Archivo-SemiBold.ttf') format('truetype');
-  font-weight: 600;
-  font-display: swap;
-  font-style: normal;
-}
-

src/styles/clash-display.css

@@ -1,42 +0,0 @@
-/**
-* @license
-*
-* Font Family: Clash Display
-* Designed by: Indian Type Foundry
-* URL: https://www.fontshare.com/fonts/clash-display
-* © 2025 Indian Type Foundry
-*
-* Clash Display Regular 
-* Clash Display Semibold 
-* Clash Display Bold 
-
-*
-*/
-@font-face {
-  font-family: 'Clash Display';
-  src: url('../assets/fonts/clash/ClashDisplay-Regular.woff2') format('woff2'),
-       url('../assets/fonts/clash/ClashDisplay-Regular.woff') format('woff'),
-       url('../assets/fonts/clash/ClashDisplay-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-display: swap;
-  font-style: normal;
-}
-@font-face { 
-  font-family: 'Clash Display';
-  src: url('../assets/fonts/clash/ClashDisplay-Semibold.woff2') format('woff2'),
-       url('../assets/fonts/clash/ClashDisplay-Semibold.woff') format('woff'),
-       url('../assets/fonts/clash/ClashDisplay-Semibold.ttf') format('truetype');
-  font-weight: 600;
-  font-display: swap;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'Clash Display';
-  src: url('../assets/fonts/clash/ClashDisplay-Bold.woff2') format('woff2'),
-       url('../assets/fonts/clash/ClashDisplay-Bold.woff') format('woff'),
-       url('../assets/fonts/clash/ClashDisplay-Bold.ttf') format('truetype');
-  font-weight: 700;
-  font-display: swap;
-  font-style: normal;
-}
-

src/styles/main.css

@@ -1,32 +0,0 @@
-@import url('./archivo.css');
-@import url('./clash-display.css');
-
-:root {
-    --clr-ts-warm-red: hsl(3, 94%, 60%);
-    --clr-ts-dark: hsl(7, 18%, 10%);
-    --clr-ts-light: hsl(349, 57%, 91%);
-
-    --ff-heading: "Clash Display", sans-serif;
-    --ff-body: "Archivo", sans-serif;
-
-    --fs-xl: clamp(3.75rem, 12vw + 1rem, 6rem);
-    --fs-600: 1.5rem;
-    --fs-500: 1.25rem;
-    --fs-400: 1rem;
-}
-
-html,
-body {
-    margin: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--clr-ts-dark);
-    color: var(--clr-ts-light);
-    font-family: var(--ff-body);
-    font-size: var(--fs-400);
-}
-
-h1 {
-    font-family: var(--ff-heading);
-    font-size: var(--fs-xl);
-}