From 1ec3b459bc0d6a7103b2ceb8939f1405a69bcf2a Mon Sep 17 00:00:00 2001
From: tony <tony@deepblack.cloud>
Date: Wed, 27 Aug 2025 20:34:54 +1000
Subject: [PATCH] Fix logo scaling and positioning across screen sizes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Enhanced responsive breakpoints for 5 screen size categories
- Fixed logo centering with flexbox at multiple container levels
- Added proper CSS centering for Three.js canvas element
- Improved logo container positioning and aspect ratio handling
- Logo now scales from 4rem (mobile) to 16rem (desktop) appropriately

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 modules/teaser/app/globals.css           | 57 +++++++++++++++++++++++-
 modules/teaser/components/TeaserHero.tsx |  8 ++--
 modules/teaser/components/ThreeLogo.tsx  | 14 ++----
 3 files changed, 64 insertions(+), 15 deletions(-)

diff --git a/modules/teaser/app/globals.css b/modules/teaser/app/globals.css
index 455456f..f1423f8 100644
--- a/modules/teaser/app/globals.css
+++ b/modules/teaser/app/globals.css
@@ -202,7 +202,7 @@ body {
 
 /* CHORUS Typography Classes */
 .text-h1 {
-  font-size: 4.768rem;
+  font-size: 4.268rem;
   line-height: 6.96rem;
   font-weight: 100;
   font-family: 'Exo', 'Inter Tight', sans-serif;
@@ -323,4 +323,59 @@ body {
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
   }
+}
+
+/* Logo scaling utilities for better responsive design */
+.logo-container {
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 1 / 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* Enhanced responsive logo sizes */
+.responsive-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+@media (max-width: 320px) {
+  .responsive-logo {
+    width: 4rem;
+    height: 4rem;
+  }
+}
+
+@media (min-width: 321px) and (max-width: 640px) {
+  .responsive-logo {
+    width: 6rem;
+    height: 6rem;
+  }
+}
+
+@media (min-width: 641px) and (max-width: 768px) {
+  .responsive-logo {
+    width: 8rem;
+    height: 8rem;
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .responsive-logo {
+    width: 12rem;
+    height: 12rem;
+  }
+}
+
+@media (min-width: 1025px) {
+  .responsive-logo {
+    width: 16rem;
+    height: 16rem;
+  }
 }
\ No newline at end of file
diff --git a/modules/teaser/components/TeaserHero.tsx b/modules/teaser/components/TeaserHero.tsx
index bf034c0..34438e9 100644
--- a/modules/teaser/components/TeaserHero.tsx
+++ b/modules/teaser/components/TeaserHero.tsx
@@ -23,14 +23,14 @@ export default function TeaserHero({ onEarlyAccess }: TeaserHeroProps) {
   return (
     <section className="min-h-screen flex flex-col items-center justify-center px-chorus-lg py-chorus-xxl bg-gradient-to-b from-white via-sand-100 to-sand-200 dark:from-carbon-950 dark:via-mulberry-950 dark:to-carbon-950 text-center relative">
       {/* CHORUS 3D Logo - Responsive sizing */}
-      <div className="animate-fade-in">
-        <div className="w-32 h-32 md:w-96 md:h-96">
-          <ThreeLogo className="mx-auto drop-shadow-2xl w-full h-full" />
+      <div className="animate-fade-in flex justify-center items-center">
+        <div className="responsive-logo">
+          <ThreeLogo className="logo-container drop-shadow-2xl" />
         </div>
       </div>
 
       {/* CHORUS Title */}
-      <h1 className="text-h1 font-logo font-thin text-carbon-950 dark:text-white mb-chorus-md animate-slide-up" style={{ animationDelay: '0.3s' }}>
+      <h1 className="text-h1 font-logo font-thin text-carbon-950 dark:text-white mt-chorus-xl mb-chorus-md animate-slide-up" style={{ animationDelay: '0.3s' }}>
         CHORUS
       </h1>
 
diff --git a/modules/teaser/components/ThreeLogo.tsx b/modules/teaser/components/ThreeLogo.tsx
index 4a40d62..14d1033 100644
--- a/modules/teaser/components/ThreeLogo.tsx
+++ b/modules/teaser/components/ThreeLogo.tsx
@@ -26,12 +26,14 @@ export default function ThreeLogo({ className = "" }: ThreeLogoProps) {
     const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
     renderer.setPixelRatio(window.devicePixelRatio);
     renderer.setClearColor(0x000000, 0); // transparent background
+    renderer.domElement.style.display = 'block';
+    renderer.domElement.style.margin = '0 auto';
     container.appendChild(renderer.domElement);
 
     // Resize handling with proper aspect ratio
     const resize = () => {
       const { clientWidth, clientHeight } = container;
-      // Ensure square aspect ratio for the logo
+      // Use the container's full dimensions while maintaining square aspect ratio
       const size = Math.min(clientWidth, clientHeight);
       renderer.setSize(size, size, false);
       camera.aspect = 1; // Always square
@@ -58,7 +60,7 @@ export default function ThreeLogo({ className = "" }: ThreeLogoProps) {
     // Load environment map from your horizon gradient image
     const expandGradient = (img: HTMLImageElement) => {
       const canvas = document.createElement('canvas');
-      const w = 512, h = 256; // safe HDRI-like size
+      const w = 256, h = 256; // safe HDRI-like size
       canvas.width = w;
       canvas.height = h;
       const ctx = canvas.getContext('2d')!;
@@ -223,14 +225,6 @@ export default function ThreeLogo({ className = "" }: ThreeLogoProps) {
     <div 
       ref={containerRef} 
       className={className}
-      style={{ 
-        width: '100%',
-        height: '100%',
-        aspectRatio: '1 / 1',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }} 
     />
   );
 }
\ No newline at end of file