maverick-wave 3.0.0

package/src/scss/layout/_header.scss

@@ -0,0 +1,441 @@
+@use '../abstracts' as *;
+
+.mw-header {
+  position: fixed;
+  top: spacing('0');
+  left: spacing('0');
+  width: 100%;
+  z-index: z-index('header');
+  background: var(--mw-header-background);
+  backdrop-filter: blur(7px);
+  border-bottom: 1px solid var(--mw-header-border);
+  padding: spacing('3') spacing('0');
+  transition: var(--mw-transition);
+
+  .mw-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .mw-logo {
+    display: flex;
+    align-items: center;
+    z-index: z-index('header') + 5;
+    position: relative;
+    flex-shrink: 0;
+
+    button {
+      display: inline-block;
+      text-decoration: none;
+    }
+
+    img {
+      height: 42px;
+      width: auto;
+      max-width: 100%;
+      display: block;
+    }
+  }
+
+  .mw-header-actions {
+    display: flex;
+    align-items: center;
+    gap: spacing('2');
+  }
+
+  // Login button styling
+  .mw-login-btn {
+    background: var(--mw-primary-color);
+    color: var(--mw-primary-text-color);
+    border: none;
+    border-radius: radius('md');
+    font-size: font-size('md');
+    cursor: pointer;
+    transition: var(--mw-transition);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    width: 50px;
+    flex-shrink: 0;
+
+    &:hover:not(:disabled) {
+      background: var(--mw-primary-color-hover);
+      transform: translateY(-1px);
+    }
+
+    &:disabled {
+      color: var(--mw-text-muted-color);
+      cursor: not-allowed;
+    }
+  }
+
+  // Updated burger button to look like primary button
+  .mw-menu-btn {
+    background: var(--mw-primary-color);
+    border: none;
+    cursor: pointer;
+    outline: none;
+    border-radius: radius('md');
+    transition: var(--mw-transition);
+    height: 40px;
+    width: 50px;
+    display: none;
+    position: relative;
+    flex-shrink: 0;
+
+    // iOS
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    user-select: none;
+    touch-action: manipulation;
+
+    &:hover {
+      background: var(--mw-primary-color-hover);
+      transform: translateY(-1px);
+    }
+
+    &:active {
+      transform: translateY(0);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--mw-primary-color);
+      outline-offset: 2px;
+    }
+
+    &.open {
+      background: var(--mw-secondary-color);
+      position: fixed;
+      top: 14px;
+      right: 6%;
+      z-index: z-index('header') + 10;
+
+      &:hover {
+        background: var(--mw-secondary-color-hover);
+      }
+
+      // Transform the burger to X
+      .mw-menu-btn-burger {
+        background: transparent;
+
+        &::before {
+          top: 0;
+          transform: rotate(45deg);
+        }
+
+        &::after {
+          bottom: 0;
+          transform: rotate(-45deg);
+        }
+      }
+    }
+  }
+
+  .mw-menu-btn-burger {
+    width: 18px;
+    height: 2px;
+    background: var(--mw-primary-text-color);
+    border-radius: 1px;
+    position: relative;
+    transition: all 0.3s ease;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      width: 18px;
+      height: 2px;
+      background: var(--mw-primary-text-color);
+      border-radius: 1px;
+      transition: all 0.3s ease;
+    }
+
+    &::before {
+      top: -6px;
+    }
+
+    &::after {
+      bottom: -6px;
+    }
+  }
+}
+
+// Navbar with built-in auto-detection
+.mw-navbar {
+  display: flex;
+
+  &-list {
+    display: flex;
+    list-style: none;
+    margin: spacing('0');
+    padding: spacing('0');
+    gap: spacing('4');
+    align-items: center;
+    flex-wrap: nowrap;
+    overflow: visible;
+
+    @include media-down('lg') {
+      gap: spacing('2');
+    }
+  }
+
+  &-item {
+    position: relative;
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+
+  &-link {
+    position: relative;
+    font-weight: font-weight('medium');
+    font-size: inherit;
+    transition: var(--mw-transition);
+    color: var(--mw-header-navbar-list-color);
+    padding-bottom: 3px;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 10%;
+      bottom: 0;
+      width: 80%;
+      height: 2px;
+      background: currentColor;
+      transform: scaleX(0);
+      transform-origin: center;
+      transition:
+        transform 0.2s,
+        opacity 0.2s;
+      opacity: 0;
+    }
+
+    &:hover,
+    &.active {
+      color: var(--mw-header-navbar-list-active-color);
+    }
+
+    &:hover::after,
+    &.active::after {
+      transform: scaleX(1) !important;
+      opacity: 1 !important;
+    }
+  }
+
+  // Auto-responsive behavior based on nav item count
+  // Default behavior (1-3 items): collapse at md
+  @include media-down('md') {
+    .mw-navbar-list {
+      display: none;
+    }
+
+    &.open {
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 80%;
+      max-width: 280px;
+      height: 100dvh;
+      background: var(--mw-header-background);
+      transform: translateX(0);
+      transition: transform 0.3s ease;
+      z-index: z-index('header') + 3;
+      border-left: 1px solid var(--mw-header-border);
+
+      .mw-navbar-list {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: spacing('0');
+        padding-top: 80px;
+        padding-left: spacing('3');
+        padding-right: spacing('3');
+        height: 100%;
+        overflow-y: auto;
+      }
+
+      .mw-navbar-item {
+        width: 100%;
+        margin: spacing('0');
+      }
+
+      .mw-navbar-link {
+        display: block;
+        padding: spacing('3') spacing('0');
+        border-bottom: 1px solid var(--mw-header-border);
+        width: 100%;
+        text-align: left;
+
+        &::after {
+          display: none;
+        }
+
+        &.active {
+          color: var(--mw-header-navbar-list-active-color);
+          font-weight: font-weight('medium');
+        }
+      }
+    }
+  }
+
+  // Medium (4-5 items): collapse at lg
+  &.mw-navbar-medium {
+    @include media-down('lg') {
+      .mw-navbar-list {
+        display: none;
+      }
+
+      &.open {
+        position: fixed;
+        top: 0;
+        right: 0;
+        width: 80%;
+        max-width: 280px;
+        height: 100dvh;
+        background: var(--mw-header-background);
+        transform: translateX(0);
+        transition: transform 0.3s ease;
+        z-index: z-index('header') + 3;
+        border-left: 1px solid var(--mw-header-border);
+
+        .mw-navbar-list {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: spacing('0');
+          padding-top: 80px;
+          padding-left: spacing('3');
+          padding-right: spacing('3');
+          height: 100%;
+          overflow-y: auto;
+        }
+
+        .mw-navbar-item {
+          width: 100%;
+          margin: spacing('0');
+        }
+
+        .mw-navbar-link {
+          display: block;
+          padding: spacing('3') spacing('0');
+          border-bottom: 1px solid var(--mw-header-border);
+          width: 100%;
+          text-align: left;
+
+          &::after {
+            display: none;
+          }
+
+          &.active {
+            color: var(--mw-header-navbar-list-active-color);
+            font-weight: font-weight('medium');
+          }
+        }
+      }
+    }
+  }
+
+  // Large (6+ items): collapse at xl
+  &.mw-navbar-large {
+    @include media-down('xl') {
+      .mw-navbar-list {
+        display: none;
+      }
+
+      &.open {
+        position: fixed;
+        top: 0;
+        right: 0;
+        width: 80%;
+        max-width: 280px;
+        height: 100dvh;
+        background: var(--mw-header-background);
+        transform: translateX(0);
+        transition: transform 0.3s ease;
+        z-index: z-index('header') + 3;
+        border-left: 1px solid var(--mw-header-border);
+
+        .mw-navbar-list {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: spacing('0');
+          padding-top: 80px;
+          padding-left: spacing('3');
+          padding-right: spacing('3');
+          height: 100%;
+          overflow-y: auto;
+        }
+
+        .mw-navbar-item {
+          width: 100%;
+          margin: spacing('0');
+        }
+
+        .mw-navbar-link {
+          display: block;
+          padding: spacing('3') spacing('0');
+          border-bottom: 1px solid var(--mw-header-border);
+          width: 100%;
+          text-align: left;
+
+          &::after {
+            display: none;
+          }
+
+          &.active {
+            color: var(--mw-header-navbar-list-active-color);
+            font-weight: font-weight('medium');
+          }
+        }
+      }
+    }
+  }
+}
+
+// Show burger button based on navbar size
+.mw-navbar {
+  // Default (1-3 items): show burger at md
+  @include media-down('md') {
+    ~ .mw-menu-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  &.mw-navbar-medium {
+    // 4-5 items: show burger at lg
+    @include media-down('lg') {
+      ~ .mw-menu-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+
+  &.mw-navbar-large {
+    // 6+ items: show burger at xl
+    @include media-down('xl') {
+      ~ .mw-menu-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/scss/layout/_home.scss

@@ -0,0 +1,40 @@
+@use '../abstracts' as *;
+
+.mw-home {
+  justify-items: center;
+  align-items: center;
+  text-align: center;
+
+  &-content {
+    padding: spacing('6') spacing('4');
+    @include media-down('sm') {
+      padding: spacing('9') spacing('3');
+    }
+
+    // choose mw-home-content or mw-home-content-fade
+    &-fade {
+      @extend .mw-home-content;
+      animation: fadeIn 1.7s ease-in;
+    }
+  }
+
+  &-text {
+    width: min(75%, 700px);
+    position: relative;
+    margin: spacing('0') auto spacing('4');
+    @include media-down('sm') {
+      width: 85%;
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateX(-8px) translateY(-23px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/scss/layout/_index.scss

@@ -0,0 +1,6 @@
+@forward 'footer';
+@forward 'grid';
+@forward 'header';
+@forward 'home';
+@forward 'main';
+@forward 'section';

package/src/scss/layout/_main.scss

@@ -0,0 +1,116 @@
+@use '../abstracts' as *;
+
+.mw-main {
+  margin: spacing('0');
+  padding: spacing('0');
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+}
+
+.mw-container {
+  width: min(1200px, 89%);
+  margin: spacing('0') auto;
+  padding: spacing('0');
+
+  // add a hero part for a full size background picture
+  @supports (selector(:has(.mw-hero))) {
+    // if it has *any* descendant .mw-hero
+    &:has(.mw-hero) {
+      position: relative;
+      width: 100%;
+      min-height: 100dvh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-size: cover;
+      background-position: center;
+      background-image: var(--mw-hero-background);
+
+      // the “overlay”
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: var(--mw-hero-overlay-background);
+        backdrop-filter: blur(2px);
+        z-index: z-index('lift');
+        pointer-events: none;
+      }
+
+      // your actual content should sit above the overlay
+      > * {
+        position: relative;
+        z-index: z-index('card');
+      }
+    }
+  }
+}
+
+.mw-content {
+  flex: 1;
+  padding-top: spacing('7');
+}
+
+.mw-content-centered {
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+// tooltip - use it everywhere you want
+[data-tooltip] {
+  position: relative;
+
+  &::before {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-10px);
+    background: var(--mw-gray-color);
+    color: var(--mw-white-color);
+    padding: spacing('1') spacing('2');
+    font-size: font-size('xs');
+    border-radius: radius('xs');
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity 0.2s,
+      transform 0.2s;
+    margin-bottom: spacing('2');
+    z-index: z-index('tooltip');
+    box-shadow: 0 2px 5px var(--mw-shadow);
+  }
+
+  // small triangle on the bottom
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-10px);
+    border: 6px solid transparent;
+    border-top-color: var(--mw-gray-color);
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity 0.2s,
+      transform 0.2s;
+    margin-bottom: -4px;
+    z-index: z-index('tooltip');
+  }
+
+  // Hover effect
+  &:hover {
+    &::before,
+    &::after {
+      opacity: 1;
+      visibility: visible;
+      transform: translateX(-50%) translateY(0);
+    }
+  }
+}

package/src/scss/layout/_section.scss

@@ -0,0 +1,89 @@
+@use '../abstracts' as *;
+
+.mw-section-title {
+  font-size: font-size('3xl');
+  margin-bottom: spacing('7');
+  text-align: center;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: spacing('-2');
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80px;
+    height: 5px;
+    background: var(--mw-primary-color);
+  }
+
+  @include media-down('sm') {
+    font-size: font-size('2xl');
+  }
+}
+
+.mw-section-subtitle {
+  font-size: font-size('2xl');
+  margin: spacing('8') spacing('0') spacing('6') spacing('0');
+  text-align: center;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: spacing('-2');
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100px;
+    height: 2px;
+    background: var(--mw-secondary-color);
+  }
+
+  @include media-down('sm') {
+    font-size: font-size('xl');
+  }
+}
+
+.mw-section-nav {
+  max-width: 90%;
+  margin: spacing('-3') auto spacing('-5') auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: spacing('3');
+}
+
+// Responsive adjustments
+@include media-down('sm') {
+  .mw-section-nav {
+    flex-direction: column;
+    width: 100%;
+    max-width: 300px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .mw-section-btn {
+    width: 90%;
+    margin: spacing('0') auto;
+    text-align: center;
+  }
+}
+
+// additional spacing for the whole section
+// Pattern variants for sections
+section {
+  padding: spacing('7') spacing('0');
+  position: relative;
+
+  &.mw-section-alternate {
+    --s: 5px; // size
+    --c1: var(--mw-page-background);
+    --c2: var(--mw-section-alternate-pattern);
+    --g: var(--c2) -5% 5%, var(--c1) 0 45%;
+    background:
+      linear-gradient(0deg, #0000 10%, var(--c1) 0 40%, #0000 0),
+      repeating-linear-gradient(-45deg, var(--g)) var(--c1);
+    background-size: var(--s) var(--s);
+  }
+}

package/src/scss/main.scss

@@ -0,0 +1,5 @@
+@use 'base';
+@use 'components';
+@use 'form-elements';
+@use 'layout';
+@use 'utilities';