first pass - kryz inspired

2026-06-10 18:34:23 +00:00
parent 3063d01ec5
commit 771e1e166f
53 changed files with 10521 additions and 0 deletions
@@ -0,0 +1,132 @@
+@use '../../styles/variables' as *;
+@use '../../styles/mixins' as *;
+
+.footer {
+  background: var(--color-primary-dark);
+  color: rgba(255, 255, 255, 0.8);
+  padding: $spacing-3xl 0 $spacing-lg;
+}
+
+.footer-top {
+  display: grid;
+  grid-template-columns: 1.2fr 2fr;
+  gap: $spacing-2xl;
+  padding-bottom: $spacing-2xl;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.footer-brand {
+  .footer-flower {
+    width: 40px;
+    height: 40px;
+    margin-bottom: $spacing-sm;
+    filter: brightness(1.1);
+  }
+
+  h3 {
+    font-size: 1.4rem;
+    color: var(--color-white);
+    margin-bottom: $spacing-sm;
+    line-height: 1.2;
+
+    .brand-m {
+      color: var(--color-white);
+      font-weight: 700;
+    }
+
+    .brand-a {
+      @include gradient-text(var(--color-accent-light), var(--color-accent));
+    }
+  }
+
+  .footer-tagline {
+    font-size: 0.95rem;
+    line-height: 1.6;
+    margin-bottom: $spacing-md;
+  }
+
+  .footer-legal {
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.5);
+    line-height: 1.5;
+  }
+}
+
+.footer-links {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: $spacing-xl;
+  align-self: start;
+}
+
+.footer-col {
+  h4 {
+    color: var(--color-accent-light);
+    font-size: 1rem;
+    margin-bottom: $spacing-md;
+    font-weight: 600;
+  }
+
+  ul {
+    list-style: none;
+
+    li {
+      margin-bottom: $spacing-xs;
+
+      a {
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 0.9rem;
+        transition: color $transition-fast;
+
+        &:hover {
+          color: var(--color-accent-light);
+        }
+      }
+    }
+  }
+}
+
+.social-links {
+  display: flex;
+  gap: $spacing-sm;
+
+  .social-link {
+    font-size: 1.5rem;
+    text-decoration: none;
+    transition: transform $transition-fast;
+
+    &:hover {
+      transform: scale(1.15);
+    }
+  }
+}
+
+.footer-bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: $spacing-lg;
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.5);
+
+  .footer-made {
+    font-style: italic;
+    color: rgba(255, 255, 255, 0.4);
+  }
+}
+
+@media (max-width: #{$bp-md - 1px}) {
+  .footer-top {
+    grid-template-columns: 1fr;
+  }
+
+  .footer-links {
+    grid-template-columns: 1fr;
+  }
+
+  .footer-bottom {
+    flex-direction: column;
+    gap: $spacing-sm;
+    text-align: center;
+  }
+}