[RZB-250099]: fixed varnmala heading

Author: recursivezero

src/assets/styles/globals.css

@@ -1,5 +1,7 @@
 @import "./custom-fonts.css";
 
+@import "./common.css";
+
 @layer base {
   :root {
     --primary: #3b82f6;
@@ -225,4 +227,4 @@
     appearance: base-select;
     border: none;
   }
-}
+}

src/assets/styles/varnmala/index.css

@@ -3,15 +3,38 @@
   max-width: 1200px;
   margin: 0 auto;
 
-  & .list__alphabets {
+  &.varnmala__header {
+    text-align: center;
+    margin: 1rem;
+
+    &.title {
+      font-size: clamp(2.5rem, 4vw, 3rem);
+      font-weight: 800;
+      padding-bottom: 0.5rem;
+      background: linear-gradient(135deg, var(--primary), var(--primary-light));
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      margin: 0;
+    }
+
+    &.subtitle {
+      color: var(--secondary);
+      font-size: 1.1rem;
+      max-width: 600px;
+      margin: 0 auto;
+    }
+  }
+
+  &.list__alphabets {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
     padding: 0;
     list-style: none;
   }
 
-  & .alphabets__header h1 {
+  &.alphabets__header h1 {
     font-size: clamp(2.5rem, 4vw, 3rem);
     font-weight: 800;
     padding-bottom: 2rem;
@@ -21,13 +44,13 @@
     color: transparent;
   }
 
-  & .card {
+  &.card {
     opacity: 0;
     animation: fadeInUp 0.6s ease forwards;
     transform: translateY(20px);
   }
 
-  & .card__link {
+  &.card__link {
     display: block;
     text-decoration: none;
     background: linear-gradient(145deg, var(--background), color-mix(in srgb, var(--background) 97%, var(--text) 3%));
@@ -38,33 +61,33 @@
     height: 100%;
   }
 
-  & .card__link:hover {
+  &.card__link:hover {
     transform: translateY(-5px);
     box-shadow:
       0 20px 30px rgba(0, 0, 0, 0.1),
       0 0 0 1px rgba(var(--primary-rgb, 44, 62, 80), 0.1);
   }
 
-  & .card__content {
+  &.card__content {
     position: relative;
   }
 
-  & .category__title {
+  &.category__title {
     font-size: 1.5rem;
     font-weight: 700;
     color: var(--text);
     margin: 0 0 1rem 0;
     transition: color 0.3s ease;
   }
 
-  & .category__description {
+  &.category__description {
     color: var(--secondary);
     font-size: 0.95rem;
     line-height: 1.6;
     margin: 0;
   }
 
-  & .card__arrow {
+  &.card__arrow {
     position: absolute;
     top: 0;
     right: 0;
@@ -75,14 +98,14 @@
     transform: translateX(-10px);
   }
 
-  & .card__link:hover .category__title {
+  &.card__link:hover .category__title {
     background: linear-gradient(135deg, var(--primary), var(--primary-light));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
   }
 
-  & .card__link:hover .card__arrow {
+  &.card__link:hover .card__arrow {
     opacity: 1;
     transform: translateX(0);
   }
@@ -113,4 +136,4 @@
   .card__link {
     padding: 1.5rem;
   }
-}
+}

src/pages/varnmala/index.astro

@@ -35,12 +35,16 @@ const sections = [
     href: "play"
   }
 ];
+
+const title = "Varnmala";
 ---
 
 <BaseLayout meta={{ title: "Varnmala" }}>
   <Back />
-  <h2 class="txt__center m-0">Varnmala</h2>
   <div class="container__varnmala">
+    <div class="varnmala__header">
+      <h2 class="title">{title}</h2>
+    </div>
     <ul class="list__alphabets">
       {
         sections.map((section, index) => (