perf: migrate to native Tailwind v4 @theme and disable inlineCss for optimal LCP

next.config.mjs

@@ -15,7 +15,7 @@ const nextConfig = {
     pagesBufferLength: 2,
   },
   experimental: {
-    inlineCss: true,
+    inlineCss: false,
     staleTimes: {
       dynamic: 0,
       static: 30,

styles/globals.css

@@ -1,378 +1,267 @@
-@import 'tailwindcss';
+@import "tailwindcss";
-@config "../tailwind.config.cjs";
+
+
+
 
 @theme {
-  --font-sans:
+  /* Breakpoints */
-    var(--font-inter), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+  --breakpoint-xs: 475px;
-    'Helvetica Neue', Arial, sans-serif;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1400px;
+  --breakpoint-3xl: 1600px;
+
+  /* Brand Colors */
+  --color-primary: #0e7a5c;
+  --color-primary-dark: #0a5742;
+  --color-primary-light: #149d76;
+
+  --color-secondary: #194f3b;
+  --color-secondary-light: #20654c;
+  --color-secondary-dark: #13392a;
+
+  --color-accent: #0e7a5c;
+  --color-accent-light: #149d76;
+
+  --color-neutral: #fafafa;
+  --color-neutral-light: #ffffff;
+  --color-neutral-dark: #333333;
+  --color-neutral-black: #1a1a1a;
+
+  /* Text Colors */
+  --color-text-primary: #1a1a1a;
+  --color-text-secondary: #6c757d;
+  --color-text-light: #adb5bd;
+
+  /* Semantic Colors */
+  --color-success: #28a745;
+  --color-warning: #ffc107;
+  --color-danger: #dc3545;
+  --color-info: #17a2b8;
+
+  /* Fonts */
+  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   --font-heading: 'Inter', system-ui, sans-serif;
   --font-body: 'Inter', system-ui, sans-serif;
 
-  --color-primary: #0e7a5c;
+  /* Typography */
-  /* Deep Teal/Green */
+  --text-xs: 0.75rem;
-  --color-primary-dark: #084c39;
+  --text-xs--line-height: 1.6;
-  --color-primary-light: #e6f5f0;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.6;
+  --text-base: 1rem;
+  --text-base--line-height: 1.7;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.7;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.6;
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: 1.5;
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: 1.4;
+  --text-4xl: 2.25rem;
+  --text-4xl--line-height: 1.3;
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 1.25;
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1.2;
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1.15;
+  --text-8xl: 6rem;
+  --text-8xl--line-height: 1.1;
 
-  --color-saturated: #10a379;
+  /* Font Weights */
-  /* Saturated Teal Accent */
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
 
-  --color-secondary: #003d82;
+  /* Border Radius */
-  --color-secondary-light: #0056b3;
+  --radius-sm: 0.25rem;
+  --radius: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
 
-  --color-accent: #10a379;
+  /* Box Shadow */
-  /* Brand Aligned Accent */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --color-accent-dark: #0e7a5c;
+  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-  --color-accent-light: #e6f5f0;
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  --color-neutral: #f8f9fa;
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  --color-neutral-light: #ffffff;
-  --color-neutral-dark: #0a0a0a;
-  --color-neutral-medium: #e5e7eb;
-
-  --color-text-primary: #111827;
-  --color-text-secondary: #4b5563;
-  --color-text-light: #9ca3af;
-
-  --color-success: #10b981;
-  --color-warning: #f59e0b;
-  --color-danger: #ef4444;
-  --color-destructive: #ef4444;
-  --color-destructive-foreground: #ffffff;
-  --color-info: #3b82f6;
-
-  --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;
-  --animate-slight-fade-in-from-bottom: slight-fade-in-from-bottom 0.8s
-    cubic-bezier(0.16, 1, 0.3, 1) forwards;
-  --animate-gradient-x: gradient-x 15s ease infinite;
-  --animate-draw-stroke: draw-stroke 1.8s ease-in-out 0.5s forwards;
-
-  @keyframes draw-stroke {
-    from {
-      stroke-dasharray: 1;
-      stroke-dashoffset: 1;
-    }
-
-    to {
-      stroke-dasharray: 1;
-      stroke-dashoffset: 0;
-    }
-  }
-
-  @keyframes gradient-x {
-    0%,
-    100% {
-      background-position: 0% 50%;
-    }
-
-    50% {
-      background-position: 100% 50%;
-    }
-  }
-
-  @keyframes fade-in {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes slide-up {
-    from {
-      opacity: 0;
-      transform: translateY(20px);
-    }
-
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes slow-zoom {
-    from {
-      transform: scale(1);
-    }
-
-    to {
-      transform: scale(1.1);
-    }
-  }
-
-  @keyframes reveal {
-    from {
-      opacity: 0;
-      transform: translateY(20px);
-      filter: blur(8px);
-    }
-
-    to {
-      opacity: 1;
-      transform: translateY(0);
-      filter: blur(0);
-    }
-  }
-
-  @keyframes slight-fade-in-from-bottom {
-    from {
-      opacity: 0;
-      transform: translateY(10px);
-      filter: blur(4px);
-    }
-
-    to {
-      opacity: 1;
-      transform: translateY(0);
-      filter: blur(0);
-    }
-  }
-
-  @keyframes float {
-    0% {
-      transform: translate(0, 0) scale(1);
-    }
-
-    33% {
-      transform: translate(2%, 4%) scale(1.1);
-    }
-
-    66% {
-      transform: translate(-3%, 2%) scale(0.9);
-    }
-
-    100% {
-      transform: translate(0, 0) scale(1);
-    }
-  }
-
-  @keyframes spin-slow {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  @keyframes flow {
-    to {
-      stroke-dashoffset: 0;
-    }
-  }
-
-  @keyframes solar-pulse {
-    0%,
-    100% {
-      fill-opacity: 0.2;
-    }
-
-    50% {
-      fill-opacity: 0.5;
-    }
-  }
 }
 
-@layer base {
+/* Custom Utilities (from JS plugins) */
-  html {
-    /* Scale text down slightly on mobile (87.5% of 16px = 14px) */
-    font-size: 87.5%;
-  }
-
-  @media (min-width: 768px) {
-    html {
-      /* Normal scaling on tablet and desktop (100% = 16px) */
-      font-size: 100%;
-    }
-  }
-
-  .bg-primary a,
-  .bg-primary-dark a {
-    @apply text-white/90 hover:text-white transition-colors;
-  }
-
-  body {
-    @apply text-base md:text-lg antialiased;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    line-height: 1.7;
-  }
-
-  *:focus-visible {
-    outline: 3px solid var(--color-primary);
-    outline-offset: 3px;
-    border-radius: 2px;
-  }
-
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    @apply font-heading font-bold tracking-tight;
-  }
-
-  /* Enhanced Mobile-first typography hierarchy with fluid sizing */
-  h1 {
-    @apply text-3xl md:text-5xl lg:text-6xl;
-  }
-
-  h2 {
-    @apply text-2xl md:text-4xl lg:text-5xl;
-  }
-
-  h3 {
-    @apply text-xl md:text-2xl lg:text-3xl;
-  }
-
-  h4 {
-    @apply text-lg md:text-xl lg:text-2xl;
-  }
-
-  h5 {
-    @apply text-base md:text-lg;
-  }
-
-  h6 {
-    @apply text-sm md:text-base;
-  }
-
-  /* Paragraph and text styles */
-  p {
-    @apply mb-4 leading-relaxed;
-  }
-
-  /* Link styles */
-  a {
-    @apply transition-all duration-200;
-  }
-
-  /* List styles */
-  ul,
-  ol {
-    @apply my-4 ml-6;
-  }
-
-  li {
-    @apply mb-2 leading-relaxed;
-  }
-
-  /* Small text */
-  small {
-    @apply text-sm md:text-base;
-  }
-
-  /* Strong and emphasis */
-  strong {
-    @apply font-bold;
-  }
-
-  em {
-    @apply italic;
-  }
-
-  /* Blockquote */
-  blockquote {
-    @apply border-l-4 pl-6 my-6 italic;
-  }
-
-  /* Code */
-  code {
-    @apply px-2 py-1 rounded font-mono text-sm;
-  }
-
-  /* Horizontal rule */
-  hr {
-    @apply my-8;
-  }
-}
-
-@layer components {
-  .glass-panel {
-    @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/90 via-black/40 to-transparent;
-  }
-
-  .premium-card {
-    @apply bg-white rounded-3xl 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: 48px;
+  min-height: 44px;
-  /* Increased for better touch-first feel */
+  min-width: 44px;
-  min-width: 48px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
-@utility reveal-on-scroll {
+@utility mobile-hidden {
-  opacity: 0;
+  @media (max-width: 767px) {
-  transform: translateY(20px);
+    display: none !important;
-  filter: blur(8px);
-  transition:
-    opacity 0.6s ease-out,
-    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
-    filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
-
-  &.is-visible {
-    opacity: 1;
-    transform: translateY(0);
-    filter: blur(0);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    opacity: 1;
-    transform: none !important;
-    filter: none !important;
-    transition: opacity 0.3s ease-out;
   }
 }
 
-@utility hover-effect {
+@utility tablet-hidden {
-  @media (hover: hover) {
+  @media (min-width: 768px) and (max-width: 1023px) {
-    @apply transition-all duration-300 hover:scale-105;
+    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 fluid-spacing {
-  padding: clamp(1.5rem, 5vw, 5rem);
+  padding: clamp(1rem, 3vw, 3rem);
-  margin: 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;
+  }
 }
 
 @utility grid-mobile-stacked {
-  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 lg:gap-12;
+  @media (max-width: 767px) {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
 }
 
 @utility safe-area-p {
-  padding-top: max(1rem, env(safe-area-inset-top));
+  padding-top: env(safe-area-inset-top);
-  padding-bottom: max(1rem, env(safe-area-inset-bottom));
+  padding-bottom: env(safe-area-inset-bottom);
-  padding-left: max(1rem, env(safe-area-inset-left));
+  padding-left: env(safe-area-inset-left);
-  padding-right: max(1rem, env(safe-area-inset-right));
+  padding-right: env(safe-area-inset-right);
 }
 
-@utility content-visibility-auto {
+/* E-TIB Custom Utilities (from previous globals.css) */
-  content-visibility: auto;
+@layer utilities {
-  contain-intrinsic-size: 1px 1000px;
+  .text-balance {
+    text-wrap: balance;
+  }
+  
+  .hide-scrollbar {
+    -ms-overflow-style: none !important;  /* IE and Edge */
+    scrollbar-width: none !important;  /* Firefox */
+  }
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none !important; /* Chrome, Safari and Opera */
+    width: 0 !important;
+    height: 0 !important;
+  }
+
+  @keyframes bg-pulse-15 {
+    0%, 90%, 100% { opacity: 0.04; }
+    95% { opacity: 0.10; filter: brightness(1.2); }
+  }
+  @keyframes bg-pulse-20 {
+    0%, 90%, 100% { opacity: 0.07; }
+    95% { opacity: 0.14; filter: brightness(1.2); }
+  }
+  .animate-bg-pulse-15 { animation: bg-pulse-15 12s infinite ease-in-out; }
+  .animate-bg-pulse-20 { animation: bg-pulse-20 12s infinite ease-in-out; }
+
+  @keyframes hero-fade-in-up {
+    from { opacity: 0; transform: translateY(30px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  .animate-hero-fade-in-up {
+    animation: hero-fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  }
+
+  @keyframes hero-zoom-out {
+    from { transform: scale(1.05); }
+    to { transform: scale(1); }
+  }
+  .animate-hero-zoom-out {
+    animation: hero-zoom-out 1.5s ease-out forwards;
+  }
+}
+
+/* Base Styles */
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+  body {
+    @apply bg-neutral font-sans text-neutral-dark antialiased;
+  }
+  
+  /* Interactive elements pointer */
+  a, button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], select, summary, label[for] {
+    cursor: pointer;
+  }
+
+  /* Ensure disabled elements don't show pointer */
+  button:disabled, [role="button"]:disabled, input:disabled, select:disabled, button[disabled] {
+    cursor: not-allowed;
+  }
+
+  /* Custom Modern Scrollbar */
+  ::-webkit-scrollbar {
+    width: 14px;
+    height: 14px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(14, 122, 92, 0.4);
+    border-radius: 10px;
+    border: 4px solid transparent;
+    background-clip: padding-box;
+    transition: background-color 0.2s ease;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(14, 122, 92, 0.8);
+  }
+
+  /* Firefox */
+  html {
+    scrollbar-color: rgba(14, 122, 92, 0.5) transparent;
+    scrollbar-width: thin;
+  }
 }