maverick-wave 4.21.0 → 4.23.0

package/src/scss/components/_media.scss

@@ -0,0 +1,26 @@
+@use '../abstracts' as *;
+
+// Self-hosted audio and video. The framework ships no player - the native
+// controls are the player, and `accent-color` on :root already brands them.
+// This only makes the element sit right: full width, block, and a video gets
+// the surface silhouette so it reads as part of the family.
+.mw-media {
+  audio,
+  video {
+    display: block;
+    width: 100%;
+  }
+
+  video {
+    height: auto;
+    border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+    box-shadow: var(--mw-elevation-2);
+  }
+}
+
+.mw-media-caption {
+  margin-top: spacing('2');
+  font-size: font-size('sm');
+  color: var(--mw-text-muted-color);
+  text-align: center;
+}

package/src/scss/components/_prose.scss

@@ -0,0 +1,42 @@
+@use '../abstracts' as *;
+
+// Long-form running text - a legal page, terms, a plain article. One class on
+// the container instead of a utility chain on every heading: the markup inside
+// stays bare h2/h3/p/ul, which is exactly what a CMS or a JSON-driven page
+// produces anyway.
+//
+// Headings are deliberately small: in a document they structure the reading,
+// they do not compete with the page title.
+.mw-prose {
+  h2 {
+    font-size: font-size('lg');
+    color: var(--mw-primary-text-color);
+    margin: spacing('8') 0 spacing('3');
+  }
+
+  h3 {
+    font-size: font-size('md');
+    color: var(--mw-primary-text-color);
+    margin: spacing('6') 0 spacing('2');
+  }
+
+  ul,
+  ol {
+    margin: 0 0 spacing('3') spacing('7');
+  }
+
+  li {
+    margin-bottom: spacing('1');
+  }
+
+  // The first heading in a card already sits on the card's padding, the last
+  // paragraph on its bottom edge - without these the container carries double
+  // spacing at both ends.
+  > :first-child {
+    margin-top: 0;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}

package/src/scss/components/_testimonial.scss

@@ -0,0 +1,58 @@
+@use '../abstracts' as *;
+
+// A voice about the product - a quote card with its source. A figure, because
+// quote and attribution belong together and that is the element that says so:
+//
+// <figure class="mw-testimonial">
+//   <blockquote>...</blockquote>
+//   <figcaption class="mw-testimonial-source">
+//     Name <span class="mw-testimonial-detail">&middot; role or occasion</span>
+//   </figcaption>
+// </figure>
+.mw-testimonial {
+  @include surface;
+  display: flex;
+  flex-direction: column;
+  padding: spacing('5');
+  background: var(--mw-card-background);
+  border: 1px solid var(--mw-border);
+  box-shadow: var(--mw-elevation-2);
+
+  // Several of these in a row, each quote on the base blockquote tint, add up
+  // to a solid colored wall nobody reads through. The card already carries the
+  // surface - inside it the quote keeps only the edge and the quotation marks
+  // as its sign.
+  blockquote {
+    background: color-mix(in srgb, var(--mw-secondary-color) 6%, transparent);
+    border-left-color: color-mix(
+      in srgb,
+      var(--mw-secondary-color) 45%,
+      transparent
+    );
+    padding-block: spacing('2');
+    font-size: font-size('base');
+    line-height: 1.6;
+  }
+}
+
+// margin-top: auto, so in a grid of equal-height cards every source line sits
+// on its card's bottom edge instead of floating under quotes of random length.
+.mw-testimonial-source {
+  margin-top: auto;
+  padding-top: spacing('5');
+  font-size: font-size('sm');
+  font-weight: font-weight('bold');
+  color: var(--mw-primary-text-color);
+}
+
+.mw-testimonial-detail {
+  font-weight: font-weight('normal');
+  color: var(--mw-text-muted-color);
+}
+
+// The one voice lifted above the grid - it may speak a size louder.
+.mw-testimonial-featured {
+  blockquote {
+    font-size: font-size('md');
+  }
+}

package/src/scss/layout/_grid.scss

@@ -220,6 +220,45 @@
   }
 }
 
+// Masonry columns - for cards of unequal height, where a row grid tears a gap
+// under every short one. CSS multi-column instead: entries flow into columns
+// and close up, the column count steps down with the viewport. break-inside
+// keeps each child whole - without it a page break lands mid-card.
+//
+// Reading order caveat: columns read top to bottom, then across. Right for
+// testimonials and galleries, wrong for anything ranked or chronological -
+// that stays in a grid.
+%columns-base {
+  column-gap: spacing('6');
+
+  > * {
+    break-inside: avoid;
+    margin-bottom: spacing('6');
+  }
+}
+
+.mw-columns-2 {
+  @extend %columns-base;
+  columns: 2;
+
+  @include media-down('sm') {
+    columns: 1;
+  }
+}
+
+.mw-columns-3 {
+  @extend %columns-base;
+  columns: 3;
+
+  @include media-down('lg') {
+    columns: 2;
+  }
+
+  @include media-down('sm') {
+    columns: 1;
+  }
+}
+
 // Base stack - items keep their natural width
 .mw-grid-stack {
   @extend %grid-base;

package/src/scss/layout/_main.scss

@@ -131,12 +131,20 @@
   flex-direction: column;
   align-items: center;
   gap: spacing('2');
-  color: color-mix(in srgb, var(--mw-hero-text-color) 45%, transparent);
+  color: color-mix(in srgb, var(--mw-hero-text-color) 72%, transparent);
   font-size: font-size('xs');
   letter-spacing: 0.08em;
   text-transform: uppercase;
   text-decoration: none;
   animation: mw-scroll-hint-float 2.2s var(--mw-ease-in-out) infinite;
+  text-shadow: 0 1px 4px rgb(0 0 0 / 65%);
+
+  // The arrow carries the meaning, the word only confirms it - so it is the
+  // arrow that gets the size, and the label stays quiet at 'xs'.
+  > i,
+  > svg {
+    font-size: font-size('lg');
+  }
 
   @include hover {
     color: var(--mw-hero-text-color);

package/src/scss/layout/_section.scss

@@ -22,6 +22,20 @@
   }
 }
 
+// The lead line under a section title. Every landing page writes this
+// paragraph, and it always wants the same four things: centred, muted,
+// narrower than the container so it reads as a line rather than a block, and
+// pulled up toward the title it belongs to - the title's gap is sized for the
+// content below, not for its own subtitle.
+.mw-section-intro {
+  max-width: 46rem;
+  margin: spacing('-3') auto spacing('9');
+  font-size: font-size('md');
+  color: var(--mw-text-muted-color);
+  text-align: center;
+  text-wrap: balance;
+}
+
 .mw-section-subtitle {
   font-size: font-size('2xl');
   margin: spacing('8') spacing('0') spacing('6') spacing('0');

package/src/scss/utilities/_index.scss

@@ -4,6 +4,7 @@
 @forward 'display';
 @forward 'elevation';
 @forward 'flex';
+@forward 'reveal';
 @forward 'spacing';
 @forward 'text';
 @forward 'touch-targets';

package/src/scss/utilities/_reveal.scss

@@ -0,0 +1,34 @@
+@use '../abstracts' as *;
+
+// Scroll entrance: a block rises briefly as it scrolls into view. Driven by
+// the browser's scroll timeline - no JavaScript, no IntersectionObserver
+// recalculating on every scroll step.
+//
+// Both guards matter. `prefers-reduced-motion` is the obvious one. The
+// @supports guard is the safety net: a browser without scroll timelines would
+// otherwise apply `both` fill on an animation that never runs and leave the
+// block invisible forever - guarded, it simply renders in place.
+//
+// The range ends well before the block reaches the middle of the screen, so
+// nothing is still moving while someone already reads it.
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    .mw-reveal {
+      animation: mw-reveal linear both;
+      animation-timeline: view();
+      animation-range: entry 2% entry 62%;
+    }
+  }
+}
+
+@keyframes mw-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(26px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/scss/utilities/_touch-targets.scss

@@ -140,10 +140,18 @@
   -webkit-overflow-scrolling: touch;
 }
 
-// Phone layout
+// Phone layout. The section rhythm steps down twice: a tablet keeps a middle
+// value, a phone drops further - every rem here is one the reader has to
+// scroll past on a screen that is already all scrolling.
 @include media-down('md') {
   :root {
-    --mw-section-padding-block: #{spacing('6')};
+    --mw-section-padding-block: #{spacing('9')};
+  }
+}
+
+@include media-down('sm') {
+  :root {
+    --mw-section-padding-block: #{spacing('7')};
   }
 }