v.14.1-beta/website redesign

website/index.html

@@ -23,104 +23,67 @@
     <title>Watch Party</title>
   </head>
   <body>
-    <header data-header-visible="false">
+    <div class="landing">
-      <brand data-font="serif">WATCH PARTY</brand>
+      <div class="logo-circle"></div>
-      <spacer></spacer>
+      <div class="logo-circle"></div>
-      <a href="./beta/#request" data-font="sans">GET CHROME EXTENSION</a>
+      <div class="logo-circle"></div>
-      <a href="https://www.paypal.me/Ayushya" data-font="sans">SUPPORT WATCH PARTY</a>
+      <h1 data-font="sans-bold" class="logo">WATCH PARTY</h1>
-    </header>
+      <h5 data-font="sans" class="logo-tag">
-    <section class="landing">
+        WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
-      <a href="./beta/#request" class="get" data-font="sans">GET CHROME EXTENSION</a>
+      </h5>
-      <a href="#" class="brand" data-font="serif">
+      <p data-font="sans" class="works-title">WORKS WITH</p>
-        <span>
+      <div class="supported">
-          WATCH PARTY
+        <div class="supported-logo" id="netflix"></div>
-        </span>
+        <div class="supported-logo" id="hulu"></div>
-      </a>
+        <div class="supported-logo" id="disney"></div>
-    </section>
+        <div class="supported-logo" id="prime"></div>
-    <section class="intro">
+        <div class="supported-logo" id="youtube"></div>
-      <div class="inner">
+        <div class="supported-logo" id="hbonow"></div>
-        <img src="./media/intro.gif" />
+        <div class="supported-logo" id="hbomax"></div>
-        <div class="supports" data-font="sans">Watch your favorites, with your favorite people</div>
+      </div>
-        <div class="supports" data-font="sans">Watch Party Works With</div>
+      <p data-font="sans" class="works-title">FREE. NO SIGNUP. NO BS.</p>
-        <div class="supported" data-font="sans">
+      <a data-font="sans" href="./beta/" class="link-button">Get Chrome Extension</a>
-          <div class="netflix"></div>
+    </div>
-          <div class="hulu"></div>
+    <div class="features">
-          <div class="disney"></div>
+      <div class="feature-card">
-          <div class="prime"></div>
+        <div class="feature-icon" id="phone"></div>
-          <div class="youtube"></div>
+        <p data-font="sans" class="feature-text">
-          <div class="hbonow"></div>
+          Free group voice calls - for when text and GIFs just won't do.
-          <div class="hbomax"></div>
+        </p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon" id="phone"></div>
+        <p data-font="sans" class="feature-text">
+          Free group voice calls - for when text and GIFs just won't do.
+        </p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon" id="phone"></div>
+        <p data-font="sans" class="feature-text">
+          Free group voice calls - for when text and GIFs just won't do.
+        </p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon" id="phone"></div>
+        <p data-font="sans" class="feature-text">
+          Free group voice calls - for when text and GIFs just won't do.
+        </p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon" id="phone"></div>
+        <p data-font="sans" class="feature-text">
+          Free group voice calls - for when text and GIFs just won't do.
+        </p>
       </div>
     </div>
-    </section>
-    <section class="features">
-      <div class="inner" data-font="sans">
-        <feature>
-          <img src="./media/hideable.gif" data-color="rgb(100,100,100)" />
-          <div>
-            Hide the chat - focus on the show, while staying synced. Built to not be in your way
-            but, also be there when you need it.
-          </div>
-        </feature>
-        <feature>
-          <img src="./media/voice.gif" data-color="rgb(100,100,100)" />
-          <div>
-            Messages and gifs not doing it? Get on a voice call!
-          </div>
-        </feature>
-        <feature>
-          <img src="./media/noauth.gif" />
-          <div>
-            No signup or login required. Just ready to go.
-          </div>
-        </feature>
-        <feature>
-          <img src="./media/giphy.gif" />
-          <div>
-            When words aren't enough, use a GIF from Giphy
-          </div>
-        </feature>
-        <feature>
-          <img src="./media/timed.gif" />
-          <div>
-            What happens in Watch Party, stays in Watch Party - for 24 hours - then it's gone.
-          </div>
-        </feature>
-        <feature>
-          <img src="./media/beforeorafter.gif" />
-          <div>
-            Start the party before the show, or after the show. Just do what you want.
-          </div>
-        </feature>
-        <feature>
-          <img src="./media/track.jpeg" />
-          <div>
-            Watch Party syncs your video with your party. Know when they pause and play.
-          </div>
-        </feature>
-      </div>
-    </section>
     <footer data-font="sans">
-      <div class="inner">
+      <p class="works-title">© AYUSHYA AMITABH, 2020</p>
-        <footerline>
+      <p class="works-title built-with">
-          <div>
+        BUILT WITH ❤ FOR <a>GOOGLE CHROME</a> USING <a>FIREBASE</a>, <a>MATERIAL-UI</a>,
-            © Ayushya Amitabh, 2020
+        <a>REACT JS</a>, <a>NODE JS</a>, & <a>GIPHY</a>.
-          </div>
+      </p>
-          <spacer></spacer>
+      <a data-font="sans" href="./beta/" class="link-button">Support Watch Party</a>
-          <div>
+      <a data-font="sans" href="./beta/" class="link-button">Get Chrome Extension</a>
-            Built with ❤️ for <a href="https://www.google.com/chrome/">Google Chrome</a> using
-            <a href="https://firebase.google.com/">Firebase</a>,
-            <a href="https://material-ui.com/">Material-UI</a>,
-            <a href="https://reactjs.org/">React JS</a> ,
-            <a href="https://nodejs.org/en/">Node.js</a> & <a href="https://giphy.com/">Giphy</a>
-          </div>
-        </footerline>
-        <footerline>
-          <a href="./beta/#request" data-font="sans">GET CHROME EXTENSION</a>
-          <spacer></spacer>
-          <a href="https://www.paypal.me/Ayushya" data-font="sans">SUPPORT WATCH PARTY</a>
-        </footerline>
-      </div>
     </footer>
   </body>
 </html>

website/scripts/Stickied.js

@@ -1,18 +1,16 @@
+var LOGO_INIT = 0;
 function handleSticky() {
-  if (window.scrollY >= window.innerHeight * 0.65) {
+  const logo = document.querySelector('.logo');
-    document.querySelector('header').setAttribute('data-header-visible', true);
+  const logoCircle = document.querySelector('.logo-circle');
+  if (window.scrollY >= LOGO_INIT) {
+    logo.classList.add('stickied');
+    logoCircle.classList.add('stickied');
   } else {
-    document.querySelector('header').setAttribute('data-header-visible', false);
+    logo.classList.remove('stickied');
-  }
+    logoCircle.classList.remove('stickied');
-  if (document.querySelector('.intro')) {
-    const intro = document.querySelector('.intro');
-    intro.style = `--percentIntroScroll : ${window.scrollY / intro.offsetTop - 0.2}`;
-  }
-  if (document.querySelector('.features')) {
-    const features = document.querySelector('.features');
-    features.style = `--percentFeatureScroll : ${window.scrollY / features.offsetTop - 0.4}`;
   }
 }
 window.onload = function () {
+  LOGO_INIT = document.querySelector('.logo').offsetTop;
   window.addEventListener('scroll', this.handleSticky);
 };

website/styles/extralarge.css

@@ -1,4 +1,7 @@
-section.intro .inner,
+html {
-section.features .inner {
+  font-size: 11.5px !important;
-  max-width: 50%;
+}
+
+body {
+  font-size: 11.5px !important;
 }

website/styles/extrasmall.css

@@ -1,218 +1,154 @@
+@keyframes circleFloat {
+  0% {
+    top: -12.5rem;
+    left: -12.5rem;
+  }
+  25% {
+    top: -14rem;
+    left: -13rem;
+  }
+  50% {
+    left: -11rem;
+  }
+  75% {
+    top: -11rem;
+  }
+  100% {
+    top: -12.5rem;
+    left: -12.5rem;
+  }
+}
+
+* {
+  margin: 0em;
+  padding: 0em;
+}
+
+html {
+  font-size: 10px;
+}
+
 body {
-  background-color: rgb(var(--primary));
+  font-size: 10px;
-  background: url('../media/static.gif');
+  background-color: var(--primary);
-  margin: 0;
+}
-  max-width: 100vw;
+
-  height: 100vh;
+.landing {
+  padding-top: 17.5rem;
+  padding-left: 10rem;
+}
+
+.logo-circle {
+  border-radius: 100%;
+  width: 60rem;
+  height: 60rem;
+  position: absolute;
+  top: -12.5rem;
+  left: -12.5rem;
+  z-index: -1 !important;
+  background-color: var(--primary-light);
+  animation: circleFloat 3s ease-in-out 0s infinite;
+}
+.logo-circle:nth-of-type(2) {
+  animation-delay: 0.5s;
+}
+.logo-circle:nth-of-type(3) {
+  animation-delay: 1.5s;
+}
+
+.logo {
+  color: var(--cta);
+  font-size: 7.2rem;
+  letter-spacing: 2.2rem;
+}
+
+.logo-tag {
+  color: var(--primary-text);
+  font-size: 3.2rem;
+  letter-spacing: 1.375rem;
+  margin: 6rem 0;
+}
+
+.works-title {
+  font-size: 2.4rem;
+  color: var(--primary-text);
+  letter-spacing: 0.75rem;
+  margin: 3rem 0;
+  display: inline-block;
 }
-a {
+
+.supported-logo {
+  display: inline-block;
+  padding: 10rem;
+  margin: 2.5rem;
+  background-position: center !important;
+  background-size: contain !important;
+  background-repeat: no-repeat !important;
+  transition: all ease-in-out 0.2s;
+}
+
+.supported-logo:hover {
+  transform: scale(1.2);
+}
+
+.link-button {
+  display: table;
   text-decoration: none;
-}
+  padding: 1rem 7.5rem;
-header {
+  color: var(--primary);
-  opacity: 0;
+  background-color: var(--cta);
-  z-index: -1;
+  font-size: 4rem;
-  transition: all ease-in-out 0.3s;
+  border-radius: 4rem;
-  position: fixed;
+}
-  top: 0;
+
-  left: 0;
+.features {
-  width: calc(100% - 20px);
+  margin: 6rem 0;
-  height: fit-content;
+  padding-left: 10rem;
-  display: flex;
+}
-  flex-direction: row;
+
-  align-items: center;
+.feature-card {
-  padding: 5px 10px;
+  background-color: var(--primary-light);
-  background-color: rgba(var(--primary) 0.5);
+  padding: 6rem 10rem;
-  backdrop-filter: blur(4px);
+  margin: 10rem 0;
-}
+}
-header brand {
+
-  font-size: 1rem;
+.feature-icon {
-  padding: 5px 15px;
+  padding: 5rem;
+  background-position: center !important;
+  background-size: contain !important;
+  background-repeat: no-repeat !important;
+  margin: 2.5rem;
+}
+
+.feature-text {
+  color: var(--primary-text);
+  font-size: 2.8rem;
   text-align: center;
-  background-color: rgb(var(--secondary));
-  color: rgb(var(--primary));
-  border-radius: 13px;
-}
-header a {
-  display: none;
-}
-spacer {
-  flex: 1;
-}
-header[data-header-visible='true'] {
-  opacity: 1;
-  z-index: 9999;
-}
-section {
-  max-width: 100%;
-  height: 100%;
-  margin: 0;
-  background-color: rgba(var(--primary), 1);
-}
-section:nth-of-type(1) {
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    180deg,
-    rgba(var(--primary), 0) 0%,
-    rgba(var(--primary), 0.3) 25%,
-    rgba(var(--primary), 0.7) 100%
-  );
-}
-section:nth-of-type(2) {
-  background: linear-gradient(
-    180deg,
-    rgba(var(--primary), 0.7) 0%,
-    rgba(var(--primary), 0.85) 50%,
-    rgba(var(--primary), 1) 100%
-  );
-}
-section.landing {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-section.landing .brand {
-  font-size: 2rem;
-  letter-spacing: 2.5px;
-  border-radius: 2rem;
-  border: 2px solid rgb(var(--primary));
-  padding: 10px 26px;
-  color: rgb(var(--secondary));
-  transition: all ease-in-out 0.3s;
-}
-section.landing .brand:hover {
-  background-color: rgb(var(--primary));
-}
-section.landing .brand span {
-  filter: drop-shadow(-5px 5px 0px rgb(var(--primary)));
-  text-align: center;
-  display: flex;
-}
-section.landing .get {
-  font-weight: 700;
-  background-color: rgb(var(--primary));
-  letter-spacing: 3.5px;
-  color: rgb(var(--secondary));
-  margin-bottom: 5px;
-  font-size: 0.75rem;
-  padding: 5px 13px;
-  border-radius: 13px;
-}
-section.intro,
-section.features {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-section.intro .inner,
-section.features .inner {
-  max-width: 75%;
-}
-section.intro .inner img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 26px;
-  transition: all ease-out 0.3s;
-  border: 2px solid rgba(var(--secondary), var(--percentIntroScroll));
-  filter: drop-shadow(0 0 40px rgba(var(--tertiary), var(--percentIntroScroll)));
-}
-section.intro .inner .supported {
-  display: flex;
-}
-section.intro .inner .supports {
-  color: rgb(var(--secondary));
-  text-align: center;
-  margin-top: 5px;
-  font-variant: all-small-caps;
-  letter-spacing: 1.5px;
-  font-weight: 600;
-  font-size: 0.8rem;
-}
-section.intro .inner .supported div {
-  flex: 1;
-  height: 50px;
-  background-size: 75%;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-section.features,
-section.beta {
-  height: fit-content;
-  min-height: 100%;
-}
-section.features img {
-  position: relative;
-  max-width: 100%;
-  width: 100%;
-  border-radius: 26px;
-  transition: all ease-in-out 0.3s;
-  filter: drop-shadow(-200px 0px 5rem rgba(var(--tertiary-complement), 0.1));
-}
-section.features div {
-  color: rgb(var(--primary-complement));
-  font-size: 0.75rem;
-  text-align: center;
-  margin-top: 5px;
-  margin-bottom: 20px;
-  font-variant: all-small-caps;
-  letter-spacing: 2.5px;
-}
-section.features feature {
-  margin-bottom: 50px;
-}
-section.features feature:nth-of-type(1):hover img {
-  filter: drop-shadow(0px 0px 7rem rgb(var(--secondary)));
-}
-section.features feature:nth-of-type(2):hover img {
-  filter: drop-shadow(0px 0px 7rem rgb(var(--tertiary-complement)));
-}
-section.features feature:nth-of-type(3):hover img {
-  filter: drop-shadow(0px 0px 7rem yellow);
-}
-section.features feature:nth-of-type(4):hover img {
-  filter: drop-shadow(0px 0px 7rem red);
-}
-section.features feature:nth-of-type(5):hover img {
-  filter: drop-shadow(0px 0px 7rem rgb(var(--tertiary)));
-}
-section.features feature:nth-of-type(6):hover img {
-  filter: drop-shadow(0px 0px 7rem rgb(var(--primary-complement)));
-}
-section.features feature:nth-of-type(7):hover img {
-  filter: drop-shadow(0px 0px 7rem rgb(var(--secondary)));
-}
-footer {
-  background-color: rgb(var(--primary));
-  color: rgb(var(--primary-complement));
-  padding: 5px 10px;
-}
-footerline {
-  font-size: 10px;
-}
-footerline a {
-  display: inline-block;
-  color: rgb(var(--secondary));
-  padding: 0px 5px;
-  border: 1px solid;
-  border-radius: 2rem;
-  margin: 10px 2.5px;
 }
 
-header,
 footer {
-  user-select: none;
+  background-color: var(--primary-medium);
+  padding: 6rem 10rem;
 }
-/*
+
-  G O O G L E     F O R M S
+footer .works-title {
-  C U S T O M I Z A T I O N
+  width: 100%;
-*/
+  color: white;
-.freebirdFormviewerViewHeaderThemeStripe {
-  display: none;
 }
-.freebirdFormviewerViewFooterEmbeddedBackground {
+
-  display: none;
+.built-with {
+  line-height: 4rem;
 }
-.freebirdFormviewerViewResponseThemeStripe {
+
-  display: none;
+.built-with a {
+  color: var(--cta);
+  text-decoration: underline;
+  text-underline-offset: 0.3rem;
+}
+
+footer .link-button {
+  margin: 3rem 0;
+  position: relative;
+  width: calc(100% - 15rem);
+  text-align: center;
 }

website/styles/index.css

@@ -2,7 +2,7 @@
 @import './variables-dark.css' screen and (prefers-color-scheme: dark);
 
 @import './extrasmall.css';
-@import './small.css' only screen and (min-width: 411px) and (max-width: 823px);
+@import './small.css' only screen and (min-width: 768px);
-@import './medium.css' only screen and (min-width: 768px) and (max-width: 1024px);
+@import './medium.css' only screen and (min-width: 1024px);
-@import './large.css' only screen and (min-width: 1024px) and (max-width: 1366px);
+@import './large.css' only screen and (min-width: 1366px);
-@import './extralarge.css' only screen and (min-width: 1440px);
+@import './extralarge.css' only screen and (min-width: 1921px);

website/styles/large.css

@@ -1,30 +1,73 @@
-section.landing .brand {
+.logo {
-  font-size: 3.5rem;
+  font-size: 10rem;
-  border-radius: 3.5rem;
+  transition: all ease-in-out 0.3s;
-  letter-spacing: 5px;
 }
-section.features feature {
+.logo.stickied {
-  display: flex;
+  font-size: 2rem;
-  align-items: center;
+  letter-spacing: 0.8rem;
-  margin-bottom: 50px;
+  position: fixed;
-}
+  background-color: var(--primary);
-section.features feature img {
+  width: 100%;
-  max-width: 45%;
+  left: 0;
-  margin-right: 2rem;
+  top: 0;
-}
+  padding: 3rem 10rem;
-section.features feature div {
-  text-align: left;
-  max-width: 35%;
 }
 
-footerline,
+.supported {
-footerline a {
+  max-width: 65%;
-  font-size: 1rem;
 }
 
-footerline a {
+.features {
-  padding: 4px 7.5px;
+  max-width: 65%;
 }
-footerline:nth-of-type(2) a {
+.feature-card {
-  padding: 4px 15px;
+  background-color: var(--primary-medium);
+  z-index: 1;
+  width: 30rem;
+  height: 30rem;
+  margin: -1px;
+  display: inline-block;
+  padding: 3rem;
+  transition: all ease-in-out 0.3s;
+}
+.feature-icon {
+  z-index: 1;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  background-size: 30% !important;
+  transition: all ease-in-out 0.3s;
+}
+.feature-card .feature-text {
+  z-index: 1;
+  display: none;
+}
+.feature-card:hover {
+  background-color: var(--primary-light);
+  box-shadow: -5px 5px 100px #000000;
+  z-index: 100;
+  transform: scale(1.1);
+}
+.feature-card:hover .feature-icon {
+  height: 50%;
+}
+.feature-card:hover .feature-text {
+  display: table;
+}
+footer {
+  padding-right: 55%;
+}
+footer .works-title {
+  font-size: 2rem;
+}
+footer .built-with {
+  display: block;
+}
+footer .link-button {
+  max-width: fit-content;
+  display: inline-table;
+  margin-right: 3rem;
+  padding: 0.8rem 3.375rem;
+  font-size: 2.5rem;
 }

website/styles/medium.css

@@ -1,19 +1,11 @@
-section.landing .brand {
+html {
-  font-size: 3rem;
+  font-size: 7.5px !important;
-  border-radius: 3rem;
-  letter-spacing: 2.5px;
 }
 
-section.intro .inner .supported {
+body {
-  margin-top: 10px;
+  font-size: 7.5px !important;
 }
 
-section.intro .inner .supported div {
+.supported {
-  height: 75px;
+  max-width: 85%;
-}
-
-footerline {
-  display: flex;
-  align-items: center;
-  font-size: 0.75rem;
 }

website/styles/small.css

@@ -1,27 +0,0 @@
-header a {
-  color: rgb(var(--secondary));
-  display: block;
-  text-decoration: none;
-  font-size: 0.75rem;
-  background-color: rgb(var(--primary));
-  padding: 5px 10px;
-  font-weight: 700;
-  letter-spacing: 1.5px;
-  margin-left: 5px;
-  padding: 5px 13px;
-  border-radius: 13px;
-}
-section.intro .inner .supports {
-  font-size: 1.2rem;
-}
-section.features div {
-  font-size: 1rem;
-}
-footerline:nth-of-type(2) {
-  display: flex;
-  align-items: center;
-  font-size: 0.75rem;
-}
-footerline:nth-of-type(2) a {
-  margin: 10px 0px;
-}

website/styles/variables-dark.css

@@ -1,86 +1,25 @@
 :root {
-  --primary: 0, 0, 0;
+  --primary: black;
-  --primary-complement: 251, 248, 239;
+  --primary-medium: #232323;
-  --secondary: 192, 243, 0;
+  --primary-light: #454545;
-  --secondary-complement: 125, 163, 41;
+  --cta: #c0f300;
-  --tertiary: 4, 221, 217;
+  --primary-text: white;
-  --tertiary-complement: 2, 161, 159;
 }
-
+.supported-logo#disney {
-section.landing .brand {
+  background: url('../media/Disney.png');
-  background-color: transparent;
 }
-
+.supported-logo#prime {
-section.intro .inner .supported div.netflix {
+  background: url('../media/Prime.png');
-  background-image: url('../media/Netflix.png');
 }
-section.intro .inner .supported div.hulu {
+.supported-logo#youtube {
-  background-image: url('../media/Hulu.png');
+  background: url('../media/Youtube.png');
 }
-section.intro .inner .supported div.disney {
+.supported-logo#hbonow {
-  background-image: url('../media/Disney.png');
+  background: url('../media/HBONowWhite.png');
 }
-section.intro .inner .supported div.prime {
+.supported-logo#hbomax {
-  background-image: url('../media/Prime.png');
+  background: url('../media/HBOMaxWhite.png');
 }
-section.intro .inner .supported div.youtube {
+.feature-icon#phone {
-  background-image: url('../media/Youtube.png');
+  background: url('../media/PhoneWhite.png');
-}
-section.intro .inner .supported div.hbonow {
-  background-image: url('../media/HBONowWhite.png');
-}
-section.intro .inner .supported div.hbomax {
-  background-image: url('../media/HBOMaxWhite.png');
-}
-
-.freebirdFormviewerViewHeaderTitle {
-  color: white !important;
-}
-.freebirdFormviewerViewHeaderDescription {
-  color: #848484 !important;
-}
-.freebirdFormviewerViewHeaderHeader {
-  border: none !important;
-  background-color: black !important;
-}
-.freebirdFormviewerViewItemsItemItem {
-  background-color: black !important;
-  border: none !important;
-}
-.freebirdFormviewerViewItemsItemItem a {
-  font-family: 'Glacial';
-  color: cornflowerblue;
-}
-.freebirdFormviewerViewItemsItemItemTitle {
-  color: white !important;
-}
-.freebirdFormviewerViewItemsItemItemHelpText {
-  color: #848484 !important;
-}
-.docssharedWizToggleLabeledLabelWrapper * {
-  color: #848484 !important;
-}
-.quantumWizTextinputPaperinputContentArea input {
-  color: white !important;
-}
-.quantumWizTextinputPapertextareaInput {
-  color: white !important;
-}
-.freebirdThemedFilledButtonM2 {
-  font-family: 'PixelSplitter' !important;
-  background-color: #c0f300 !important;
-}
-.freebirdThemedFilledButtonM2 * {
-  color: black !important;
-  letter-spacing: 2px;
-}
-.freebirdFormviewerViewResponseConfirmContentContainer {
-  background-color: black !important;
-  border: none !important;
-}
-.freebirdFormviewerViewResponsePageTitle {
-  color: white !important;
-}
-.freebirdFormviewerViewResponseMessage {
-  color: #c0f300 !important;
 }

website/styles/variables.css

@@ -1,33 +1,32 @@
 :root {
-  --primary: 251, 248, 239;
+  --primary: white;
-  --primary-complement: 0, 0, 0;
+  --primary-medium: #6f8d00;
-  --secondary: 125, 163, 41;
+  --primary-light: #c0f300;
-  --secondary-complement: 154, 203, 52;
+  --cta: black;
-  --tertiary: 2, 161, 159;
+  --primary-text: black;
-  --tertiary-complement: 4, 221, 217;
+  font-size: 10px;
 }
-
+.supported-logo#netflix {
-section.landing .brand {
+  background: url('../media/Netflix.png');
-  background-color: rgb(var(--primary));
 }
-section.intro .inner .supported div.netflix {
+.supported-logo#hulu {
-  background-image: url('../media/Netflix.png');
+  background: url('../media/Hulu.png');
 }
-section.intro .inner .supported div.hulu {
+.supported-logo#disney {
-  background-image: url('../media/Hulu.png');
+  background: url('../media/DisneyColor.png');
 }
-section.intro .inner .supported div.disney {
+.supported-logo#prime {
-  background-image: url('../media/DisneyColor.png');
+  background: url('../media/PrimeColor.png');
 }
-section.intro .inner .supported div.prime {
+.supported-logo#youtube {
-  background-image: url('../media/PrimeColor.png');
+  background: url('../media/YoutubeColor.png');
 }
-section.intro .inner .supported div.youtube {
+.supported-logo#hbonow {
-  background-image: url('../media/YoutubeColor.png');
+  background: url('../media/HBONowBlack.png');
 }
-section.intro .inner .supported div.hbonow {
+.supported-logo#hbomax {
-  background-image: url('../media/HBONowBlack.png');
+  background: url('../media/HBOMax.png');
 }
-section.intro .inner .supported div.hbomax {
+.feature-icon#phone {
-  background-image: url('../media/HBOMax.png');
+  background: url('../media/PhoneBlack.png');
 }