v1.2.0-beta/website redesign done

website/styles/extrasmall.css

@@ -21,6 +21,8 @@ header {
   flex-direction: row;
   align-items: center;
   padding: 5px 10px;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
 }
 header brand {
   font-size: 1rem;
@@ -71,8 +73,9 @@ section.landing {
   align-items: center;
 }
 section.landing .brand {
-  font-size: 1.75rem;
-  border-radius: 1.75rem;
+  font-size: 2rem;
+  letter-spacing: 2.5px;
+  border-radius: 2rem;
   border: 2px solid rgb(var(--primary));
   padding: 10px 26px;
   color: rgb(var(--secondary));
@@ -89,31 +92,30 @@ section.landing .brand span {
 section.landing .get {
   font-weight: 700;
   background-color: rgb(var(--primary));
-  letter-spacing: 1.5px;
+  letter-spacing: 3.5px;
   color: rgb(var(--secondary));
   margin-bottom: 5px;
   font-size: 0.75rem;
   padding: 5px 13px;
   border-radius: 13px;
 }
-section.intro {
+section.intro,
+section.features {
   display: flex;
   justify-content: center;
   align-items: center;
 }
-section.intro .inner {
+section.intro .inner,
+section.features .inner {
   max-width: 75%;
 }
 section.intro .inner img {
   max-width: 100%;
   height: auto;
   border-radius: 26px;
-  transition: all ease-in-out 0.3s;
-  border: 2px solid transparent;
-}
-section.intro .inner img:hover {
-  border: 2px solid rgb(var(--secondary));
-  filter: drop-shadow(0 0 40px rgba(var(--tertiary), 0.5));
+  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;
@@ -125,6 +127,7 @@ section.intro .inner .supports {
   font-variant: all-small-caps;
   letter-spacing: 1.5px;
   font-weight: 400;
+  font-size: 0.8rem;
 }
 section.intro .inner .supported div {
   flex: 1;
@@ -148,3 +151,128 @@ section.intro .inner .supported div.prime {
 section.intro .inner .supported div.youtube {
   background-image: url('../media/Youtube.png');
 }
+section.features,
+section.beta {
+  height: fit-content;
+  min-height: 100%;
+}
+section.features img {
+  position: relative;
+  max-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: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)));
+}
+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;
+}
+
+/*
+  G O O G L E     F O R M S
+  C U S T O M I Z A T I O N
+*/
+.freebirdFormviewerViewHeaderTitle {
+  color: white !important;
+}
+.freebirdFormviewerViewHeaderDescription {
+  color: #848484 !important;
+}
+.freebirdFormviewerViewHeaderHeader {
+  border: none !important;
+  background-color: black !important;
+}
+.freebirdFormviewerViewHeaderThemeStripe {
+  display: none;
+}
+.freebirdFormviewerViewItemsItemItem {
+  background-color: black !important;
+  border: none !important;
+}
+.freebirdFormviewerViewItemsItemItem a {
+  font-family: 'Glacial';
+  color: cornflowerblue;
+}
+.freebirdFormviewerViewItemsItemItemTitle {
+  color: white !important;
+}
+.freebirdFormviewerViewFooterEmbeddedBackground {
+  display: none;
+}
+.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;
+}
+.freebirdFormviewerViewResponseThemeStripe {
+  display: none;
+}
+.freebirdFormviewerViewResponseConfirmContentContainer {
+  background-color: black !important;
+  border: none !important;
+}
+.freebirdFormviewerViewResponsePageTitle {
+  color: white !important;
+}
+.freebirdFormviewerViewResponseMessage {
+  color: #c0f300 !important;
+}