From 3b1f035d502add080d918301cd6e76ded706f561 Mon Sep 17 00:00:00 2001
From: AdamBtech <60339324+AdamBtech@users.noreply.github.com>
Date: Fri, 23 May 2025 18:24:55 +0200
Subject: [PATCH] Changed hero text sizing on mobile

---
 .../hero-display/hero-display.component.html  | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/app/features/hero-display/hero-display.component.html b/src/app/features/hero-display/hero-display.component.html
index 6552a3e..e786911 100644
--- a/src/app/features/hero-display/hero-display.component.html
+++ b/src/app/features/hero-display/hero-display.component.html
@@ -4,26 +4,27 @@
     videoSrc="cyber_hands.mp4" />
 
   <!-- Changed from justify-center to justify-start with top padding -->
-  <div class="absolute inset-0 flex flex-col items-center justify-start pt-20 sm:pt-24 md:pt-28 lg:pt-32 xl:pt-36 2xl:pt-40 pointer-events-none px-6 sm:px-8 md:px-12 lg:px-16 xl:px-20">
+  <div class="absolute inset-0 flex flex-col items-center justify-start pt-16 sm:pt-20 md:pt-24 lg:pt-28 xl:pt-32 2xl:pt-36 pointer-events-none px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-20">
 
-    <div class="mb-8 sm:mb-12 md:mb-16 lg:mb-20 xl:mb-24 2xl:mb-32">
+    <div class="mb-6 sm:mb-8 md:mb-12 lg:mb-16 xl:mb-20 2xl:mb-24">
       <h1 class="font-terminal-nier scramble-text-glow text-cyan-200
-              text-6xl sm:text-7xl md:text-8xl lg:text-9xl xl:text-[10rem] 2xl:text-[12rem]
+              text-4xl xs:text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl 2xl:text-[10rem]
               text-center
-              leading-[1.1] sm:leading-[1.05] md:leading-[1.0] lg:leading-[0.95] xl:leading-[0.9] 2xl:leading-[0.85]
-              font-black tracking-[-0.02em] pointer-events-auto
-              drop-shadow-[0_0_30px_rgba(34,211,238,0.6)]
-              max-w-[90vw] sm:max-w-[85vw] md:max-w-[80vw] lg:max-w-none break-words whitespace-pre-line">
+              leading-[1.2] xs:leading-[1.15] sm:leading-[1.1] md:leading-[1.05] lg:leading-[1.0] xl:leading-[0.95] 2xl:leading-[0.9]
+              font-black tracking-[-0.01em] sm:tracking-[-0.02em] pointer-events-auto
+              drop-shadow-[0_0_20px_rgba(34,211,238,0.6)] sm:drop-shadow-[0_0_30px_rgba(34,211,238,0.6)]
+              max-w-[95vw] sm:max-w-[90vw] md:max-w-[85vw] lg:max-w-none break-words whitespace-pre-line">
         {{ nameText }}
       </h1>
     </div>
 
-    <div class="max-w-[95vw] sm:max-w-[90vw] md:max-w-[85vw] lg:max-w-[80vw] xl:max-w-none">
+    <div class="max-w-[98vw] sm:max-w-[95vw] md:max-w-[90vw] lg:max-w-[85vw] xl:max-w-none">
       <p class="font-terminal-nier scramble-text-glow text-cyan-100
-              text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl 2xl:text-9xl
-              text-center leading-[0.8] font-bold tracking-wide uppercase pointer-events-auto
-              drop-shadow-[0_0_25px_rgba(34,211,238,0.5)]
-              break-words px-4 sm:px-6 md:px-8 lg:px-10">
+              text-2xl xs:text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl 2xl:text-8xl
+              text-center leading-[0.9] sm:leading-[0.85] md:leading-[0.8] font-bold
+              tracking-wide uppercase pointer-events-auto
+              drop-shadow-[0_0_15px_rgba(34,211,238,0.5)] sm:drop-shadow-[0_0_25px_rgba(34,211,238,0.5)]
+              break-words px-2 sm:px-4 md:px-6 lg:px-8 xl:px-10">
         {{ displayText }}
       </p>
     </div>