header

src/App/App.css

@@ -265,7 +265,7 @@ color: var(--text-primary);
   max-width: 100% !important; 
 }
 .header-container{
-  padding-top: 100px;
+  padding-top: 0;
   padding-bottom: 10px;
   background-color: var(--ourbeige);
 }
@@ -421,7 +421,6 @@ margin-bottom: 10vw !important;
 }
 
 .header-title{
-  color: var(--text-primary) !important;
   text-align: center;
   align-items: center;
   margin: auto !important;
@@ -4031,11 +4030,19 @@ figure img{
 }
 
 #hphead{
-  background-image: url("https://static.igem.wiki/teams/5247/photos/header/human-practices.webp");
+  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/human-practices.webp");
+ 
+}
+
+#hphead{
   background-size: 1650px auto;
   background-repeat: no-repeat;
 }
 
+.header-title{
+  min-height: 900px;
+}
+
 .download-butt span {
   display: inline-block;
   padding: 10px;

src/components/Headings.tsx

@@ -150,7 +150,7 @@ export function Hwave({text, id}:{text: string, id?: string}){
         idtext = stringToSlug(text); 
     }
     return(
-        <svg id={idtext} className="bigtitle" viewBox="0 0 100 20">
+       /*  <svg id={idtext} className="bigtitle" viewBox="0 0 100 20">
         <defs>
             <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
             <stop offset="5%" stopColor="#850F78"/>
@@ -169,9 +169,32 @@ export function Hwave({text, id}:{text: string, id?: string}){
             </path>
             </pattern>
         </defs>
-        <text textAnchor="middle" x="50" y="15" fontSize="13" fill="url(#wave)"  fillOpacity="0.6">{text}</text>
-        <text textAnchor="middle" x="50" y="15" fontSize="13" fill="url(#gradient)" fillOpacity="0.3">{text}</text>
-        </svg>
+        <text textAnchor="middle" x="50" y="15" fontSize="13" fill="white"  fillOpacity="1">{text}</text>
+        <text textAnchor="middle" x="50" y="15" fontSize="13" fill="url(#wave)"  fillOpacity="0.7">{text}</text>
+        <text textAnchor="middle" x="50" y="15" fontSize="13" fill="url(#gradient)" fillOpacity="0.9">{text}</text>
+        </svg> */
+        <svg id={idtext} className="bigtitle" viewBox="0 0 100 20">
+    <defs>
+        <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
+            <stop offset="5%" stopColor="#850F78" />
+            <stop offset="95%" stopColor="#A0A7F3" />
+        </linearGradient>
+        <pattern id="wave" x="0" y="0" width="120" height="20" patternUnits="userSpaceOnUse">
+            <path id="wavePath" d="M-40 9 Q-30 7 -20 9 T0 9 T20 9 T40 9 T60 9 T80 9 T100 9 T120 9 V20 H-40z" fill="url(#gradient)">
+                <animateTransform
+                    attributeName="transform"
+                    begin="0s"
+                    dur="3s"
+                    type="translate"
+                    from="0,0"
+                    to="40,0"
+                    repeatCount="indefinite" />
+            </path>
+        </pattern>
+    </defs>
+    <text textAnchor="middle" x="50" y="15" fontSize="13"  stroke="var(--ourbeige)" strokeWidth={"0.2px"}  fill="url(#gradient)">{text}</text>
+    <text textAnchor="middle" x="50" y="15" fontSize="13" fill="url(#wave)"stroke="var(--ourbeige)" strokeWidth={"0.2px"}   fillOpacity="1">{text}</text>
+</svg>
     )
 }