done landing page

app/globals.css

@@ -1,26 +1,154 @@
 @import "tailwindcss";
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@font-face {
+  font-family: "Switzer Variable";
+  src: url("/font/Switzer-Variable.ttf") format("truetype");
+  font-weight: 100 900; /* Full variable range */
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Mium Regular";
+  src: url("/font/miumAccess-Regular.ttf") format("truetype");
+  font-weight: 300; /* Full variable range */
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Playfair Display";
+  src: url("/font/PlayfairDisplay-Italic-VariableFont_wght.ttf")
+    format("truetype");
+  font-weight: 300; /* Full variable range */
+  font-style: normal;
+  font-display: swap;
 }
-
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-switzer: "Switzer Variable", system-ui, sans-serif;
+  --font-mium-reg: "Mium Regular", system-ui, sans-serif;
+  --font-playfair: "Playfair Display", Georgia, serif;
+
+  /* === HEADINGS === */
+  --text-h-1-96: 96px;
+  --text-h-2-60: 60px;
+  --text-h-3-40: 40px;
+  --text-h-4-34: 34px;
+  --text-h-5-28: 28px;
+  --text-h-6-38: 38px;
+  --text-h-7-24: 24px;
+  --text-h-mobile-30: 30px;
+  --text-hero-mobile: 56px;
+
+  --leading-h1: 90px;
+  --leading-h2: 63px;
+  --leading-h3: 48px;
+  --leading-h4: 42px;
+  --leading-h5: 30px;
+  --leading-mobile: 38px;
+
+  /* === BODY TEXT === */
+  --text-b-1-20: 20px;
+  --text-b-2-17: 17px;
+  --text-b-3-16: 16px;
+  --text-b-4-14: 14px;
+
+  --leading-b1: 25px;
+  --leading-b2: 26px;
+  --leading-b3: 23px;
+  --leading-b4: 16px;
+
+  --color-background: #f8f8ff;
+  --color-light-100: #d5ffdc;
+  --color-light-200: #ecf9db;
+  --color-light-300: #d5ffdc33;
+  --color-brand: #274b2d;
+  --color-hover: #2f5a36;
+  --color-btn: #274b2d;
+
+  --color-border: #3a6f43;
+
+  --color-secondary: #636369;
+  --color-gray: #423f3f;
+
+  --breakpoint-xl: 1600px;
+  --breakpoint-lg: 1400px;
+  --breakpoint-md: 1024px;
+  --breakpoint-tab: 767px;
+  --breakpoint-sm: 320px;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+@keyframes marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(calc(-100% - var(--gap)));
   }
 }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+/* Base marquee container */
+.marquee {
+  display: flex;
+  gap: var(--gap);
+  animation: marquee var(--duration) linear infinite;
+}
+
+@keyframes marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+.marquee {
+  display: flex;
+  gap: var(--gap);
+  animation: marquee var(--duration) linear infinite;
+}
+
+/* Reverse direction support */
+.marquee.reverse {
+  animation-direction: reverse;
+}
+
+/* Pause on hover */
+.group:hover .marquee.pause {
+  animation-play-state: paused;
+}
+/* === PAGE TRANSITION FIX === */
+
+.overlay {
+  grid-area: 1 / 1 / 2 / 2;
+  position: fixed; /* instead of relative — ensures full viewport coverage */
+  top: 0;
+  left: 0;
+  width: 100vw; /* use viewport units explicitly */
+  height: 100vh;
+  z-index: 1000;
+  pointer-events: none;
+}
+
+.overlay__path {
+  fill: var(--color-brand, #274b2d);
+  stroke: none;
+  vector-effect: non-scaling-stroke;
+}
+
+.view {
+  position: relative;
+  grid-area: 1 / 1 / 2 / 2;
+  display: grid;
+  place-items: center;
+}
+
+.view--2 {
+  background: var(--color-bg-view-2, #cbb37e);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+
+.view--open {
+  pointer-events: auto;
+  opacity: 1;
 }