website landing page

apps/website/app/globals.css

@@ -13,10 +13,61 @@
     --color-performance-green: #6FE37A;
     --color-warning-amber: #FFC556;
     --color-neon-aqua: #43C9E6;
+    --sat: env(safe-area-inset-top);
+    --sar: env(safe-area-inset-right);
+    --sab: env(safe-area-inset-bottom);
+    --sal: env(safe-area-inset-left);
+  }
+
+  * {
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+  }
+
+  html {
+    overscroll-behavior: none;
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
   }
 
   body {
     @apply bg-deep-graphite text-white antialiased;
+    overscroll-behavior: none;
+  }
+
+  button, a {
+    -webkit-tap-highlight-color: transparent;
+    touch-action: manipulation;
+  }
+
+  .scroll-container {
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+  }
+
+  /* Mobile typography optimization - lighter and more spacious */
+  @media (max-width: 640px) {
+    h1 {
+      font-size: clamp(1.5rem, 6vw, 2rem);
+      font-weight: 600;
+      line-height: 1.2;
+    }
+    
+    h2 {
+      font-size: clamp(1.125rem, 4.5vw, 1.5rem);
+      font-weight: 600;
+      line-height: 1.3;
+    }
+    
+    h3 {
+      font-size: 1rem;
+      font-weight: 500;
+    }
+    
+    p {
+      font-size: 0.8125rem; /* 13px */
+      line-height: 1.6;
+    }
   }
 }
 
@@ -24,4 +75,159 @@
   .animate-spring {
     transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
   }
+  
+  /* Racing stripe patterns */
+  .racing-stripes {
+    background: linear-gradient(
+      45deg,
+      transparent 25%,
+      rgba(25, 140, 255, 0.03) 25%,
+      rgba(25, 140, 255, 0.03) 50%,
+      transparent 50%,
+      transparent 75%,
+      rgba(25, 140, 255, 0.03) 75%
+    );
+    background-size: 60px 60px;
+  }
+  
+  /* Checkered flag pattern */
+  .checkered-pattern {
+    background-image:
+      linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%),
+      linear-gradient(-45deg, rgba(255,255,255,0.02) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.02) 75%),
+      linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.02) 75%);
+    background-size: 20px 20px;
+    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+  }
+  
+  /* Speed lines animation */
+  @keyframes speed-lines {
+    0% {
+      transform: translateX(0) scaleX(0);
+      opacity: 0;
+    }
+    50% {
+      opacity: 0.3;
+    }
+    100% {
+      transform: translateX(100px) scaleX(1);
+      opacity: 0;
+    }
+  }
+  
+  .animate-speed-lines {
+    animation: speed-lines 1.5s ease-out infinite;
+  }
+  
+  /* Racing accent line */
+  .racing-accent {
+    position: relative;
+  }
+  
+  .racing-accent::before {
+    content: '';
+    position: absolute;
+    left: -16px;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: linear-gradient(to bottom, #FF0000, #198CFF);
+    border-radius: 2px;
+  }
+  
+  /* Carbon fiber texture */
+  .carbon-fiber {
+    background-image:
+      linear-gradient(27deg, rgba(255,255,255,0.02) 5%, transparent 5%),
+      linear-gradient(207deg, rgba(255,255,255,0.02) 5%, transparent 5%),
+      linear-gradient(27deg, rgba(0,0,0,0.05) 5%, transparent 5%),
+      linear-gradient(207deg, rgba(0,0,0,0.05) 5%, transparent 5%);
+    background-size: 10px 10px;
+  }
+
+  /* Racing red-white-blue animated gradient */
+  @keyframes racing-gradient {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+
+  .animate-racing-gradient {
+    background: linear-gradient(
+      90deg,
+      #DC0000 0%,
+      #FFFFFF 25%,
+      #0066FF 50%,
+      #DC0000 75%,
+      #FFFFFF 100%
+    );
+    background-size: 300% 100%;
+    animation: racing-gradient 12s linear infinite;
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+
+  /* Static red-white-blue gradient (no animation) */
+  .static-racing-gradient {
+    background: linear-gradient(
+      90deg,
+      #DC0000 0%,
+      #FFFFFF 50%,
+      #2563eb 100%
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .animate-racing-gradient {
+      animation: none;
+    }
+  }
+
+  /* Entrance animations */
+  @keyframes fade-in-up {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .animate-fade-in-up {
+    animation: fade-in-up 0.6s ease-out forwards;
+  }
+
+  .animate-fade-in {
+    animation: fade-in 0.4s ease-out forwards;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .animate-fade-in-up,
+    .animate-fade-in {
+      animation: none;
+      opacity: 1;
+      transform: none;
+    }
+  }
 }