Chore/dark video

src/components/Headline/Headline.module.scss

@@ -206,7 +206,21 @@
 
 .darkTheme {
   .serenityBtn {
-    color: #252626;
+    color: #fafafa;
+  }
+
+  .leaf {
+    filter: brightness(0) invert(1);
+  }
+
+  .headlineInfo {
+    .contributors {
+      color: #fafafa;
+
+      &::after {
+        filter: brightness(0) invert(1);
+      }
+    }
   }
 
   .contentWrapper {
@@ -215,15 +229,20 @@
       p,
       a,
       span {
-        color: rgb(0, 0, 0);
+        color: #fafafa;
       }
     }
   }
 
   .socialMedia {
     .btn {
       background-color: unset;
-      color: rgb(0, 0, 0);
+      color: #fafafa;
+      border: 1px solid #fafafa;
+    }
+
+    a img {
+      filter: invert(1);
     }
   }
 }
@@ -369,23 +388,27 @@
         p,
         a,
         span {
-          color: #ffffffd9;
+          color: #fafafa;
         }
       }
     }
 
     .socialMedia {
       .btn {
         background-color: unset;
-        color: #ffffffd9;
-        border: 1px solid #ffffffd9;
+        color: #fafafa;
+        border: 1px solid #fafafa;
 
         &:hover {
-          background: #ffffffd9;
+          background: #fafafa;
           color: #000000;
-          border: 1px solid #ffffffd9;
+          border: 1px solid #fafafa;
         }
       }
+
+      a img {
+        filter: invert(1);
+      }
     }
   }
 }

src/components/Headline/Headline.tsx

@@ -47,8 +47,12 @@ const Headline: FC<HeadlineProps> = ({ headline, darkTheme, russianView }) => {
 
   const [desktopVideoReady, setDesktopVideoReady] = useState(false);
   const [mobileVideoReady, setMobileVideoReady] = useState(false);
+  const [desktopVideoDarkReady, setDesktopVideoDarkReady] = useState(false);
+  const [mobileVideoDarkReady, setMobileVideoDarkReady] = useState(false);
   const desktopVideoRef = useRef<HTMLVideoElement>(null);
   const mobileVideoRef = useRef<HTMLVideoElement>(null);
+  const desktopVideoDarkRef = useRef<HTMLVideoElement>(null);
+  const mobileVideoDarkRef = useRef<HTMLVideoElement>(null);
 
   const loadVideo = useCallback(
     (
@@ -81,6 +85,16 @@ const Headline: FC<HeadlineProps> = ({ headline, darkTheme, russianView }) => {
         '/keepsimple_/assets/home-page/Mobile-Leaves-Compressed1.mp4',
         setMobileVideoReady,
       );
+      loadVideo(
+        desktopVideoDarkRef,
+        '/keepsimple_/assets/home-page/leaves-dark.mp4',
+        setDesktopVideoDarkReady,
+      );
+      loadVideo(
+        mobileVideoDarkRef,
+        '/keepsimple_/assets/home-page/leaves-mobile-dark.mp4',
+        setMobileVideoDarkReady,
+      );
     };
 
     if (document.readyState === 'complete') {
@@ -235,7 +249,19 @@ const Headline: FC<HeadlineProps> = ({ headline, darkTheme, russianView }) => {
             muted
             loop
             className={cn(styles.video, {
-              [styles.videoVisible]: desktopVideoReady,
+              [styles.videoVisible]: desktopVideoReady && !darkTheme,
+            })}
+            height={600}
+          />
+          <video
+            ref={desktopVideoDarkRef}
+            controls={false}
+            playsInline
+            autoPlay
+            muted
+            loop
+            className={cn(styles.video, {
+              [styles.videoVisible]: desktopVideoDarkReady && darkTheme,
             })}
             height={600}
           />
@@ -348,7 +374,19 @@ const Headline: FC<HeadlineProps> = ({ headline, darkTheme, russianView }) => {
             muted
             loop
             className={cn(styles.video, {
-              [styles.videoVisible]: mobileVideoReady,
+              [styles.videoVisible]: mobileVideoReady && !darkTheme,
+            })}
+            height={600}
+          />
+          <video
+            ref={mobileVideoDarkRef}
+            controls={false}
+            playsInline
+            autoPlay
+            muted
+            loop
+            className={cn(styles.video, {
+              [styles.videoVisible]: mobileVideoDarkReady && darkTheme,
             })}
             height={600}
           />

src/components/longevity/WhyDoThisTooltip/WhyDoThisTooltip.module.scss

@@ -4,9 +4,17 @@
   z-index: 999;
   padding-bottom: 20px;
   position: relative;
+  background-color: #ecdbba;
 
-  .img {
+  .video {
     position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 300px;
+    height: 100%;
+    object-fit: cover;
+    z-index: 1;
   }
   .heading {
     padding-top: 20px;
@@ -51,8 +59,9 @@
     width: unset;
     height: unset;
     padding-bottom: unset;
+    background-color: transparent;
 
-    .img {
+    .video {
       display: none;
     }
     .heading {

src/components/longevity/WhyDoThisTooltip/WhyDoThisTooltip.tsx

@@ -1,4 +1,3 @@
-import Image from 'next/image';
 import { FC } from 'react';
 
 import { sanitizeHtml } from '@lib/sanitizeHtml';
@@ -52,13 +51,12 @@ const WhyDoThisTooltip: FC<WhyDoThisTooltipProps> = ({
   return (
     <div className={styles.whyDoThisTooltip} data-cy="why-do-this-content">
       <div>
-        <Image
-          src={'/keepsimple_/assets/longevity/habits/what-is-this-bg.png'}
-          alt="Background"
-          width={700}
-          height={300}
-          priority
-          className={styles.img}
+        <video
+          src="/assets/longevity/habits/brain-vid.mp4"
+          autoPlay
+          muted
+          playsInline
+          className={styles.video}
         />
         {headline && (
           <Heading