fix "Page" not displaying on homepage on chrome

https://issues.chromium.org/issues/389084438

Author: lovasoa

examples/official-site/sqlpage/templates/shell-home.handlebars

@@ -227,23 +227,8 @@
             font-size: 4rem;
             margin-bottom: 15px;
             font-weight: 800;
-            color: transparent;
-            background:
-                linear-gradient(180deg,
-                    rgba(255, 255, 255, .8) 0%,
-                    rgba(172, 179, 211, 0.9) 100%),
-                linear-gradient(135deg,
-                    #ccc 0%,
-                    #ccc 45%,
-                    #fff 50%,
-                    #ccc 55%,
-                    #ccc 100%);
-            background-blend-mode: multiply;
-            background-size: 100% 100%, 400% 100%;
-            background-clip: text;
             letter-spacing: -1px;
             transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-            animation: shimmer 25s linear infinite;
             transform: scale(1) translateX(0) translateY(0) translateZ(0);
         }
 
@@ -859,6 +844,36 @@
                 grid-template-columns: 1fr;
             }
         }
+
+        /* SWORD METAL EFFECT */
+        .sword {
+            color: transparent;
+            background:
+                linear-gradient(180deg,
+                    rgba(255, 255, 255, .8) 0%,
+                    rgba(172, 179, 211, 0.9) 100%),
+                linear-gradient(135deg,
+                    #ccc 0%,
+                    #ccc 45%,
+                    #fff 50%,
+                    #ccc 55%,
+                    #ccc 100%);
+            background-blend-mode: multiply;
+            background-size: 100% 100%, 400% 100%;
+            background-clip: text;
+            -webkit-background-clip: text;
+            animation: shimmer 25s linear infinite;
+        }
+
+        @keyframes shimmer {
+            0% {
+                background-position: 400% 0;
+            }
+
+            100% {
+                background-position: -400% 0;
+            }
+        }
     </style>
 </head>
 
@@ -877,7 +892,7 @@
         </div>
 
         <div class="text-content">
-            <h1><span>SQL</span><span class="words"><span>Page</span><span>
+            <h1 class="sword"><span>SQL</span><span class="words"><span class="sword">Page</span><span>
                         Website</span><span>
                         App</span><span>
                         Tools</span><span>
@@ -1003,7 +1018,8 @@
                 </a>
                 <a href="https://youtube.com/@sqlpage" aria-label="YouTube">
                     <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-                        <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
+                        <path
+                            d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z" />
                     </svg>
                 </a>
             </div>