wip

styles/globals.css

@@ -33,6 +33,7 @@
   --animate-fade-in: fade-in 0.5s ease-out;
   --animate-slide-up: slide-up 0.6s ease-out;
   --animate-slow-zoom: slow-zoom 20s linear infinite;
+  --animate-reveal: reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 
   @keyframes fade-in {
     from { opacity: 0; }
@@ -46,15 +47,28 @@
     from { transform: scale(1); }
     to { transform: scale(1.1); }
   }
+  @keyframes reveal {
+    from { opacity: 0; transform: translateY(30px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
 }
 
 @layer base {
   body {
-    @apply text-text-primary bg-neutral-light antialiased;
+    @apply text-text-primary bg-neutral-light antialiased selection:bg-accent selection:text-primary-dark;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
   h1, h2, h3, h4, h5, h6 {
     @apply font-heading font-bold tracking-tight;
   }
+  
+  /* Mobile-first typography hierarchy */
+  h1 { @apply text-3xl md:text-6xl lg:text-7xl xl:text-8xl; }
+  h2 { @apply text-2xl md:text-5xl lg:text-6xl; }
+  h3 { @apply text-xl md:text-3xl lg:text-4xl; }
+  h4 { @apply text-lg md:text-2xl; }
 }
 
 @layer components {
@@ -62,92 +76,70 @@
     @apply bg-white/80 backdrop-blur-md border border-white/20 shadow-lg;
   }
   .image-overlay-gradient {
-    @apply absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent;
+    @apply absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent;
   }
   .premium-card {
-    @apply bg-white rounded-xl border border-neutral-medium shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
+    @apply bg-white rounded-3xl border border-neutral-medium shadow-sm transition-all duration-500 hover:shadow-2xl hover:-translate-y-1;
+  }
+  .sticky-narrative-container {
+    @apply grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20;
+  }
+  .sticky-narrative-sidebar {
+    @apply lg:col-span-4 lg:sticky lg:top-32 h-fit;
+  }
+  .sticky-narrative-content {
+    @apply lg:col-span-8;
   }
 }
 
 /* Custom Utilities */
 @utility touch-target {
-  min-height: 44px;
-  min-width: 44px;
+  min-height: 48px; /* Increased for better touch-first feel */
+  min-width: 48px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
-@utility mobile-hidden {
-  @media (max-width: 767px) {
-    display: none !important;
+@utility reveal-on-scroll {
+  opacity: 0;
+  transform: translateY(30px);
+  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+  
+  &.is-visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: opacity 0.5s ease-out;
+    transform: none !important;
   }
 }
 
-@utility tablet-hidden {
-  @media (min-width: 768px) and (max-width: 1023px) {
-    display: none !important;
-  }
-}
-
-@utility desktop-hidden {
-  @media (min-width: 1024px) {
-    display: none !important;
-  }
-}
-
-@utility mobile-only {
-  @media (min-width: 768px) {
-    display: none !important;
-  }
-}
-
-@utility tablet-only {
-  @media (max-width: 767px), (min-width: 1024px) {
-    display: none !important;
-  }
-}
-
-@utility desktop-only {
-  @media (max-width: 1023px) {
-    display: none !important;
+@utility hover-effect {
+  @media (hover: hover) {
+    @apply transition-all duration-300 hover:scale-105;
   }
 }
 
 @utility fluid-spacing {
-  padding: clamp(1rem, 3vw, 3rem);
-  margin: clamp(0.5rem, 2vw, 2rem);
-}
-
-@utility text-start-mobile {
-  @media (max-width: 767px) {
-    text-align: left;
-  }
-}
-
-@utility text-center-mobile {
-  @media (max-width: 767px) {
-    text-align: center;
-  }
-}
-
-@utility text-end-mobile {
-  @media (max-width: 767px) {
-    text-align: right;
-  }
+  padding: clamp(1.5rem, 5vw, 5rem);
+  margin: clamp(1rem, 3vw, 3rem);
 }
 
 @utility grid-mobile-stacked {
-  @media (max-width: 767px) {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
+  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 lg:gap-12;
 }
 
 @utility safe-area-p {
-  padding-top: env(safe-area-inset-top);
-  padding-bottom: env(safe-area-inset-bottom);
-  padding-left: env(safe-area-inset-left);
-  padding-right: env(safe-area-inset-right);
+  padding-top: max(1rem, env(safe-area-inset-top));
+  padding-bottom: max(1rem, env(safe-area-inset-bottom));
+  padding-left: max(1rem, env(safe-area-inset-left));
+  padding-right: max(1rem, env(safe-area-inset-right));
+}
+
+@utility content-visibility-auto {
+  content-visibility: auto;
+  contain-intrinsic-size: 1px 1000px;
 }