v.14.1-beta/website redesign

website/styles/large.css

@@ -1,30 +1,73 @@
-section.landing .brand {
-  font-size: 3.5rem;
-  border-radius: 3.5rem;
-  letter-spacing: 5px;
+.logo {
+  font-size: 10rem;
+  transition: all ease-in-out 0.3s;
 }
-section.features feature {
-  display: flex;
-  align-items: center;
-  margin-bottom: 50px;
-}
-section.features feature img {
-  max-width: 45%;
-  margin-right: 2rem;
-}
-section.features feature div {
-  text-align: left;
-  max-width: 35%;
+.logo.stickied {
+  font-size: 2rem;
+  letter-spacing: 0.8rem;
+  position: fixed;
+  background-color: var(--primary);
+  width: 100%;
+  left: 0;
+  top: 0;
+  padding: 3rem 10rem;
 }
 
-footerline,
-footerline a {
-  font-size: 1rem;
+.supported {
+  max-width: 65%;
 }
 
-footerline a {
-  padding: 4px 7.5px;
+.features {
+  max-width: 65%;
 }
-footerline:nth-of-type(2) a {
-  padding: 4px 15px;
+.feature-card {
+  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;
 }