fix(embed): fix post-pr #2863 merge offline banner text color

web/components/ui/Content/Content.module.scss

@@ -1,18 +1,18 @@
 @import '../../../styles/mixins.scss';
 
-  .lowerSection {
-    padding: var(--content-padding);
-  }
+.lowerSection {
+  padding: var(--content-padding);
+}
 
-  .lowerSectionMobile {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    flex-shrink: 0;
-    padding: 0.3em;
-    position: absolute;
-    bottom: 0;
-    width: 100%;
+.lowerSectionMobile {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 0;
+  padding: 0.3em;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
 
   @include screen(tablet) {
     //sets the position of tabbed content for online mode
@@ -21,10 +21,9 @@
 
   @include screen(mobile) {
     //sets the position of tabbed content for online mode
-  top: 280px;
-  }
-      
+    top: 280px;
   }
+}
 
 .mobileNoTabs {
   padding-top: 20px;
@@ -76,3 +75,6 @@
     margin-top: unset;
   }
 }
+.offlineBanner {
+  color: var(--theme-color-background-main);
+}

web/components/ui/Content/Content.tsx

@@ -210,7 +210,7 @@ export const Content: FC = () => {
                   lastLive={lastDisconnectTime}
                   onNotifyClick={() => setShowNotifyModal(true)}
                   onFollowClick={() => setShowFollowModal(true)}
-                  className={styles.topSectionElement}
+                  className={classnames([styles.topSectionElement, styles.offlineBanner])}
                 />
               </div>
             )}

web/components/ui/OfflineBanner/OfflineBanner.module.scss

@@ -6,10 +6,10 @@
   align-items: center;
 
   @include screen(tablet) {
-      height: 430px;
+    height: 430px;
   }
 
-  @include screen (mobile) {
+  @include screen(mobile) {
     height: 280px;
   }
 }
@@ -20,7 +20,6 @@
   flex-direction: column;
   margin: 3rem auto;
   padding: 2.4em;
-  color: var(--color-owncast-palette-3);
 
   @include screen(tablet) {
     font-size: 1.2rem;