klz-cables.com/styles/globals.css

@import 'tailwindcss';
@config "../tailwind.config.cjs";

@theme {
  --font-sans:
    var(--font-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: #001a4d;
  /* Deep Blue */
  --color-primary-dark: #000d26;
  --color-primary-light: #e6ebf5;

  --color-saturated: #011dff;
  /* Saturated Blue Accent */

  --color-secondary: #003d82;
  --color-secondary-light: #0056b3;

  --color-accent: #82ed20;
  /* Sustainability Green */
  --color-accent-dark: #14532d;
  --color-accent-light: #f0f9e6;

  --color-neutral: #f8f9fa;
  --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 {
  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;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-heading font-bold tracking-tight;
    line-height: 1.2;
  }

  /* Enhanced Mobile-first typography hierarchy with fluid sizing */
  h1 {
    @apply text-3xl md:text-5xl lg:text-6xl leading-[1.1];
  }

  h2 {
    @apply text-2xl md:text-4xl lg:text-5xl leading-[1.2];
  }

  h3 {
    @apply text-xl md:text-2xl lg:text-3xl leading-[1.3];
  }

  h4 {
    @apply text-lg md:text-xl lg:text-2xl leading-[1.4];
  }

  h5 {
    @apply text-base md:text-lg leading-[1.5];
  }

  h6 {
    @apply text-sm md:text-base leading-[1.6];
  }

  /* Paragraph and text styles */
  p {
    @apply mb-4 leading-relaxed;
  }

  /* Link styles */
  a {
    @apply no-underline 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;
  /* Increased for better touch-first feel */
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@utility reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  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 {
  @media (hover: hover) {
    @apply transition-all duration-300 hover:scale-105;
  }
}

@utility fluid-spacing {
  padding: clamp(1.5rem, 5vw, 5rem);
  margin: clamp(1rem, 3vw, 3rem);
}

@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;
}

@utility safe-area-p {
  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;
}