klz case study

app/globals.css

@@ -7,14 +7,19 @@
   html {
     scroll-behavior: smooth;
   }
-  
+
   body {
     @apply bg-white text-slate-800 font-serif antialiased selection:bg-slate-900 selection:text-white;
     line-height: 1.6;
   }
-  
+
   /* Typography */
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     @apply font-sans font-bold text-slate-900 tracking-tighter;
   }
 
@@ -42,27 +47,28 @@
     @apply text-xl md:text-2xl text-slate-600 mb-6 leading-relaxed;
     font-weight: 400;
   }
-  
+
   a {
     @apply text-slate-900 hover:text-slate-700 transition-colors no-underline;
   }
-  
-  ul, ol {
+
+  ul,
+  ol {
     @apply ml-5 mb-4;
   }
-  
+
   li {
     @apply mb-1;
   }
-  
+
   code:not([class*='language-']) {
     @apply bg-slate-50 px-1.5 py-0.5 rounded-md font-mono text-[0.9em] text-slate-800 border border-slate-100;
   }
-  
+
   blockquote {
     @apply border-l-4 border-slate-900 pl-6 italic text-slate-700 my-8 text-xl md:text-2xl font-serif;
   }
-  
+
   /* Focus states */
   a:focus,
   button:focus,
@@ -80,6 +86,7 @@
 
 /* Components - Tailwind utility classes */
 @layer components {
+
   /* Legacy hooks required by tests */
   .file-example {
     @apply w-full;
@@ -104,7 +111,7 @@
 
   .search-box {
     @apply w-full px-6 py-4 border border-slate-200 rounded-2xl focus:outline-none focus:border-slate-400 transition-all duration-300;
-    background: rgba(255,255,255,0.9);
+    background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(10px);
   }
 
@@ -133,40 +140,40 @@
   .article-header {
     @apply mb-12;
   }
-  
+
   .article-title {
     @apply text-4xl md:text-5xl font-bold mb-3;
   }
-  
+
   .article-meta {
     @apply text-sm text-slate-500 font-sans mb-5;
   }
-  
+
   .article-content {
     @apply text-lg leading-relaxed;
   }
-  
+
   .article-content p {
     @apply mb-5;
   }
-  
+
   .article-content h2 {
     @apply text-2xl font-bold mt-8 mb-3;
   }
-  
+
   .article-content h3 {
     @apply text-xl font-bold mt-6 mb-2;
   }
-  
+
   .article-content ul,
   .article-content ol {
     @apply ml-6 mb-5;
   }
-  
+
   .article-content li {
     @apply mb-1;
   }
-  
+
   .article-content blockquote {
     @apply border-l-2 border-slate-400 pl-4 italic text-slate-600 my-5 text-lg;
   }
@@ -184,14 +191,16 @@
     @apply border-slate-200 text-slate-500 hover:border-slate-400 hover:text-slate-900;
   }
 
-  /* Hide scrollbars */
-  .hide-scrollbar::-webkit-scrollbar {
+  /* Hide scrollbars but keep functionality */
+  .no-scrollbar::-webkit-scrollbar {
     display: none;
   }
 
-  .hide-scrollbar {
+  .no-scrollbar {
     -ms-overflow-style: none;
+    /* IE and Edge */
     scrollbar-width: none;
+    /* Firefox */
   }
 
   /* Empty state */
@@ -265,7 +274,7 @@
     html {
       scroll-behavior: auto;
     }
-    
+
     * {
       animation-duration: 0.01ms !important;
       animation-iteration-count: 1 !important;
@@ -275,6 +284,7 @@
 
   /* Print styles */
   @media print {
+
     .floating-back-to-top,
     .reading-progress-bar {
       display: none !important;
@@ -325,6 +335,7 @@
     opacity: 0;
     transform: scale(0.8) translateY(10px);
   }
+
   to {
     opacity: 1;
     transform: scale(1) translateY(0);
@@ -384,18 +395,15 @@
   z-index: -1;
 
   background:
-    linear-gradient(
-      180deg,
+    linear-gradient(180deg,
       rgba(255, 255, 255, 0) 0%,
       rgba(255, 255, 255, 0) 20%,
       rgba(253, 230, 138, 0.70) 20%,
-      rgba(253, 230, 138, 0.70) 100%
-    );
+      rgba(253, 230, 138, 0.70) 100%);
 
   transform-origin: left center;
   transform:
-    rotate(calc((var(--marker-seed, 0) - 3) * 0.45deg))
-    skewX(calc((var(--marker-seed, 0) - 3) * -0.25deg));
+    rotate(calc((var(--marker-seed, 0) - 3) * 0.45deg)) skewX(calc((var(--marker-seed, 0) - 3) * -0.25deg));
 
   filter: saturate(1.05);
 }
@@ -411,30 +419,26 @@
   z-index: -1;
 
   background:
-    linear-gradient(
-      90deg,
+    linear-gradient(90deg,
       rgba(253, 230, 138, 0.00) 0%,
       rgba(253, 230, 138, 0.60) 8%,
       rgba(253, 230, 138, 0.55) 60%,
-      rgba(253, 230, 138, 0.35) 100%
-    );
+      rgba(253, 230, 138, 0.35) 100%);
 
   opacity: 0.75;
   mix-blend-mode: multiply;
   transform:
-    rotate(calc((var(--marker-seed, 0) - 3) * 0.45deg))
-    translateY(0.02em);
+    rotate(calc((var(--marker-seed, 0) - 3) * 0.45deg)) translateY(0.02em);
 
   mask-image:
-    linear-gradient(
-      180deg,
+    linear-gradient(180deg,
       rgba(0, 0, 0, 0) 0%,
       rgba(0, 0, 0, 1) 20%,
-      rgba(0, 0, 0, 1) 100%
-    );
+      rgba(0, 0, 0, 1) 100%);
 }
 
 @media (prefers-reduced-motion: no-preference) {
+
   .post-link:hover .marker-title::before,
   .post-link:hover .marker-title::after {
     filter: saturate(1.08) contrast(1.02);
@@ -496,7 +500,7 @@
   --bg-color: #ffffff;
   --border-color: #e2e8f0;
   --shadow: none;
-  
+
   margin: 1.5rem 0;
   width: 100%;
   max-width: var(--max-width);
@@ -515,7 +519,8 @@
 .generic-embed[data-type="video"] .embed-wrapper {
   aspect-ratio: 16/9;
   height: 0;
-  padding-bottom: 56.25%; /* 16:9 */
+  padding-bottom: 56.25%;
+  /* 16:9 */
 }
 
 .generic-embed[data-type="video"] .embed-wrapper iframe {
@@ -577,11 +582,11 @@
   .generic-embed {
     margin: 1rem 0;
   }
-  
+
   .embed-fallback {
     padding: 1rem;
   }
-  
+
   .embed-wrapper:hover {
     box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   }
@@ -684,4 +689,4 @@ pre:has(code[class*='language-']) {
 .token.important,
 .token.variable {
   color: #db2777;
-}
+}