maverick-wave 4.28.0 → 5.0.0

package/src/scss/components/_pricing.scss

@@ -1,277 +1,219 @@
 @use '../abstracts' as *;
 
-// The word variant is set down from the price size and then has to climb back
-// to its line box - the two numbers only work as a pair, so they are named.
-$_mw-price-line-height: 1.1;
-$_mw-price-word-scale: 0.68;
+@layer mw.components {
+  // Set down from the price size and climbing back to its line box - a pair
+  $_mw-price-line-height: 1.1;
+  $_mw-price-word-scale: 0.68;
 
-// ---------------------------------------------------------------------------
-// Price
-//
-// The figure, not the card around it: one baseline row holding the price that
-// was, the price that is, the unit and a discount tag.
-//
-// Every part is sized in `em` off a single token, so the size variants only
-// have to retune `--mw-price-size` and the whole row moves together - cents,
-// currency and struck-through original included.
-// ---------------------------------------------------------------------------
+  // The figure, not the card around it. Every part is sized in `em` off
+  // --mw-price-size, so a size variant only retunes that one token.
 
-.mw-price {
-  --mw-price-size: #{font-size('3xl')};
+  .mw-price {
+    --mw-price-size: #{font-size('3xl')};
 
-  display: flex;
-  flex-wrap: wrap;
-  // Baseline, not centre: figure and words are read as one line of text, and
-  // centring a 0.45em word against a 2.2rem number floats it in the middle of
-  // the digits instead of sitting it on them.
-  align-items: baseline;
-  gap: spacing('2') spacing('3');
-  margin: spacing('0');
-  font-size: var(--mw-price-size);
-  line-height: $_mw-price-line-height;
-  color: var(--mw-primary-text-color);
+    display: flex;
+    flex-wrap: wrap;
+    // Baseline, or a 0.45em word floats in the middle of a 2.2rem number
+    align-items: baseline;
+    gap: spacing('2') spacing('3');
+    margin: spacing('0');
+    font-size: var(--mw-price-size);
+    line-height: $_mw-price-line-height;
+    color: var(--mw-primary-text-color);
+
+    // A pill is a box, not a word - on the baseline it hangs off the digits
+    > .mw-tag,
+    > .mw-badge {
+      align-self: center;
+      flex-shrink: 0;
+    }
 
-  // A pill is a box, not a word - on the baseline it hangs off the bottom of
-  // the digits. Centre is where the eye looks for it.
-  > .mw-tag,
-  > .mw-badge {
-    align-self: center;
-    flex-shrink: 0;
-  }
+    &-amount {
+      font-weight: font-weight('bold');
+      // So a figure swapped by a billing toggle does not jump sideways
+      font-variant-numeric: tabular-nums lining-nums;
+      font-feature-settings: 'tnum', 'lnum';
+      white-space: nowrap;
+    }
 
-  &-amount {
-    font-weight: font-weight('bold');
-    // Two prices under each other line up, and a figure swapped by a billing
-    // toggle does not jump sideways on the way
-    font-variant-numeric: tabular-nums lining-nums;
-    font-feature-settings: 'tnum', 'lnum';
-    white-space: nowrap;
-  }
+    // Down and left on the baseline: cents raised to cap height are a
+    // discounter's idiom and make a service price read cheaper than it is
+    &-fraction {
+      font-size: 0.62em;
+      font-weight: font-weight('medium');
+    }
 
-  // Cents, written inside the amount. One step down and left on the baseline -
-  // cents raised to the cap height are a discounter's idiom, and a service
-  // price that borrows it reads cheaper than it is.
-  &-fraction {
-    font-size: 0.62em;
-    font-weight: font-weight('medium');
-  }
+    // The unit, not the number, so it does not carry the weight either. The floor
+    // is where the `em` chain stops helping: 0.45 of an mw-price-sm is 11px.
+    &-currency {
+      font-size: max(0.45em, #{font-size('xs')});
+      font-weight: font-weight('normal');
+    }
 
-  // "Euro", "CHF", "€" - the unit, not the number, so it does not carry the
-  // weight either.
-  //
-  // The floor is where the `em` chain stops being useful: 0.45 of an
-  // `mw-price-sm` is 11px, and that is the size most offer cards run at.
-  &-currency {
-    font-size: max(0.45em, #{font-size('xs')});
-    font-weight: font-weight('normal');
-  }
+    // Muted *and* struck - muted alone reads as a footnote. The rule is drawn
+    // explicitly because the default hairline vanishes at this size.
+    &-original {
+      // Its own line, because inline the first part to wrap away is the discount
+      // tag - the one that was there to catch the eye. `flex-basis` is the break;
+      // a wrapper element would cost an element in every price on the page.
+      flex-basis: 100%;
+      margin-bottom: spacing('-1');
+      // Floored higher than the unit: a reader has to compare it with the new price
+      font-size: max(0.5em, #{font-size('sm')});
+      font-weight: font-weight('normal');
+      color: var(--mw-text-muted-color);
+      text-decoration: line-through;
+      text-decoration-thickness: 0.09em;
+      white-space: nowrap;
+    }
 
-  // What it cost before the discount. Muted *and* struck: muted alone reads as
-  // a footnote, the line is what says "this is no longer the price".
-  //
-  // The rule is drawn explicitly, because the browser default is a hairline
-  // that vanishes at this size against a muted tone.
-  &-original {
-    // On its own line, above the new price. Inline it reads fine on a wide card
-    // and badly everywhere else: "199 Euro 159 Euro -20 %" is a long row, and
-    // the first thing to drop to the next line when the width runs out is the
-    // discount tag - the one part that was there to catch the eye. Broken here
-    // it breaks where it is meant to.
-    //
-    // `flex-basis` is the line break. A wrapper element around the rest would
-    // do the same job and cost an element in every price on the page.
-    flex-basis: 100%;
-    margin-bottom: spacing('-1');
-    // Floored higher than the unit - this one is a figure, and a reader has to
-    // be able to compare it with the one next to it
-    font-size: max(0.5em, #{font-size('sm')});
-    font-weight: font-weight('normal');
-    color: var(--mw-text-muted-color);
-    text-decoration: line-through;
-    text-decoration-thickness: 0.09em;
-    white-space: nowrap;
-  }
+    // "/ month", "per session" - what the price is per
+    &-period {
+      font-size: max(0.42em, #{font-size('xs')});
+      font-weight: font-weight('normal');
+      color: var(--mw-text-muted-color);
+    }
 
-  // "/ month", "per session" - what the price is per
-  &-period {
-    font-size: max(0.42em, #{font-size('xs')});
-    font-weight: font-weight('normal');
-    color: var(--mw-text-muted-color);
-  }
+    // Not a figure, so not set like one, but bold enough to hold the same slot.
+    // The line height matches a full-size amount, or the card sits out of line.
+    &-word {
+      font-size: $_mw-price-word-scale * 1em;
+      line-height: calc(#{$_mw-price-line-height}em / #{$_mw-price-word-scale});
+      font-weight: font-weight('bold');
+    }
 
-  // "On request", "free" - not a figure, so not set like one. Still bold, so it
-  // holds the same slot in a row of cards as a real price would.
-  //
-  // The line height is scaled back up to the one a full-size amount has: a row
-  // of offers puts "On request" next to "129", and a shorter line box would sit
-  // that card's price a few pixels out of line with its neighbours.
-  &-word {
-    font-size: $_mw-price-word-scale * 1em;
-    line-height: calc(#{$_mw-price-line-height}em / #{$_mw-price-word-scale});
-    font-weight: font-weight('bold');
+    // A *sibling* of the row: inside it, it would inherit the price size
+    &-note {
+      margin: spacing('2') spacing('0') spacing('0');
+      font-size: font-size('sm');
+      color: var(--mw-text-muted-color);
+    }
   }
 
-  // The line under a price - what it includes, what it saves. A *sibling* of
-  // the row, not a child: inside it, it would inherit the price size and be a
-  // flex item on the same baseline.
-  &-note {
-    margin: spacing('2') spacing('0') spacing('0');
-    font-size: font-size('sm');
-    color: var(--mw-text-muted-color);
+  // Size. Only the token moves - see the `em` above.
+  .mw-price-sm {
+    --mw-price-size: #{font-size('xl')};
   }
-}
-
-// Size. Only the token moves - see the `em` above.
-.mw-price-sm {
-  --mw-price-size: #{font-size('xl')};
-}
-
-.mw-price-lg {
-  --mw-price-size: #{font-size('5xl')};
-}
 
-// Old price in front of the new one instead of above it - one line, for a wide
-// card or a table row that has the width to spare. Check it at the narrow end
-// before reaching for it: the discount tag is the first thing to wrap away.
-.mw-price-inline .mw-price-original {
-  flex-basis: auto;
-  margin-bottom: spacing('0');
-}
-
-.mw-price-center {
-  justify-content: center;
-}
-
-// Body colour instead of the brand - for a table row or a list where a coloured
-// price would be the loudest thing on screen for no reason.
-.mw-price-plain {
-  color: var(--mw-text-color);
-}
-
-// ---------------------------------------------------------------------------
-// Offer card
-//
-// The card a price is sold from: what you get, what it costs, the button that
-// asks for it. Deliberately thin - shell, body and footer are `mw-card`'s, this
-// adds only what selling something needs.
-// ---------------------------------------------------------------------------
+  .mw-price-lg {
+    --mw-price-size: #{font-size('5xl')};
+  }
 
-.mw-offer {
-  // Prices in a row of offers have to sit on one line, and the feature lists
-  // are never the same length. Pushed down rather than positioned: the grid
-  // already stretches the cards to equal height, so "as far down as it goes"
-  // resolves to the same line in every card of the row.
-  > .mw-card-body > .mw-price {
-    margin-top: auto;
-    padding-top: spacing('5');
+  // One line, for a card with width to spare - check the narrow end before using
+  // it, the discount tag is the first thing to wrap away
+  .mw-price-inline .mw-price-original {
+    flex-basis: auto;
+    margin-bottom: spacing('0');
   }
 
-  // The card body already pushes its footer down the same way. Two `auto`
-  // margins in one column *share* the free space instead of collecting it above
-  // the first, which leaves the price floating somewhere in the middle and at a
-  // different height in every card - so the footer gives its own up as soon as
-  // a price stands in front of it.
-  //
-  // Bottom-aligned, note included: a card that carries a `mw-price-note` and
-  // one that does not will not have their prices on the same line. Give every
-  // card in a row a note, or none of them.
-  > .mw-card-body > .mw-price ~ .mw-card-footer {
-    margin-top: spacing('0');
+  .mw-price-center {
+    justify-content: center;
   }
 
-  // The one action on an offer card fills its row. A card footer otherwise
-  // keeps every button at its label's width - a "Details" link has no business
-  // being a band - but this is the button the whole card was built to get
-  // pressed, and an 80px target parked in a corner is not that.
-  //
-  // Only when it stands alone: with a price beside it the row is shared, and
-  // that case is at the bottom of this file.
-  //
-  // The auto margin has to go with it. An auto margin in a flex row eats the
-  // free space *before* flex-grow is ever offered any, so growing on its own
-  // leaves the button sitting exactly where it was.
-  > .mw-card-body > .mw-card-footer > .mw-btn:only-child {
-    flex: 1 1 auto;
-    margin-left: spacing('0');
+  // For a row or list where a coloured price would be the loudest thing on screen
+  .mw-price-plain {
+    color: var(--mw-text-color);
   }
 
-  // A solid band across the top carrying the name and the price - the layout
-  // for when the price is the thing being compared and the feature list is
-  // only its justification. Colour comes from `mw-card-addon-*` on the card,
-  // the same set the card badge and the ribbon read.
-  &-head {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: spacing('2');
-    padding: spacing('6') spacing('5');
-    // The card's own radius minus its border - the band sits inside it
-    border-radius: (radius('sm') - 1px) (radius('xl') - 1px) 0 0;
-    background: var(--mw-card-addon-color, var(--mw-primary-color));
-    color: var(--mw-card-addon-text-color, var(--mw-primary-accent-text-color));
-    text-align: center;
+  // The card a price is sold from. Thin on purpose: shell, body and footer are
+  // mw-card's, this adds only what selling something needs.
 
-    // On a solid fill the price cannot keep the brand colour, and the muted
-    // parts cannot keep a grey that was mixed against the page background
-    .mw-price,
-    .mw-price-original,
-    .mw-price-period {
-      color: inherit;
+  .mw-offer {
+    // Pushed down, not positioned: the grid already stretches the cards to equal
+    // height, so "as far as it goes" is the same line in every card of the row
+    > .mw-card-body > .mw-price {
+      margin-top: auto;
+      padding-top: spacing('5');
     }
 
-    .mw-price-original,
-    .mw-price-period {
-      opacity: 0.7;
+    // The card body already pushes its footer down the same way. Two `auto`
+    // margins in one column *share* the free space instead of collecting it above
+    // the first, which leaves the price floating somewhere in the middle and at a
+    // different height in every card - so the footer gives its own up as soon as
+    // a price stands in front of it.
+    //
+    // Note included, so give every card in a row a note or none - otherwise their
+    // prices do not sit on the same line
+    > .mw-card-body > .mw-price ~ .mw-card-footer {
+      margin-top: spacing('0');
     }
-  }
-
-  &-name {
-    margin: spacing('0');
-    font-size: font-size('md');
-    font-weight: font-weight('bold');
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-  }
 
-  // With a band above it the body no longer opens the card, so it does not need
-  // the air a card top usually gets
-  &-head + .mw-card-body {
-    padding-top: spacing('6');
-  }
-}
+    // The button the whole card was built to get pressed, so it fills the row -
+    // but only when it stands alone; shared with a price, see the end of the file.
+    // The auto margin goes with it: it eats the free space before flex-grow is
+    // offered any, so growing alone would leave the button where it was.
+    > .mw-card-body > .mw-card-footer > .mw-btn:only-child {
+      flex: 1 1 auto;
+      margin-left: spacing('0');
+    }
 
-// The band owns the top-right corner. An arc drawn over it either disappears
-// into the fill or fights it - the same call the coloured panel header makes.
-.mw-offer:has(> .mw-offer-head)::after {
-  @include corner-accent(1px, 'bottom');
-}
+    // For when the price is what gets compared and the feature list only justifies
+    // it. Colour comes from mw-card-addon-*, like the badge and the ribbon.
+    &-head {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: spacing('2');
+      padding: spacing('6') spacing('5');
+      // The card's own radius minus its border - the band sits inside it
+      border-radius: (radius('sm') - 1px) (radius('xl') - 1px) 0 0;
+      background: var(--mw-card-addon-color, var(--mw-primary-color));
+      color: var(
+        --mw-card-addon-text-color,
+        var(--mw-primary-accent-text-color)
+      );
+      text-align: center;
+
+      // On a solid fill neither the brand colour nor a page-mixed grey survives
+      .mw-price,
+      .mw-price-original,
+      .mw-price-period {
+        color: inherit;
+      }
+
+      .mw-price-original,
+      .mw-price-period {
+        opacity: 0.7;
+      }
+    }
 
-// A price in a card footer is a label next to an action, not a second action.
-//
-// The footer stacks its children to full width once the *card* is narrow, which
-// is right for two buttons that would otherwise squeeze into nothing on a phone
-// - and wrong here: "33 Euro" needs no width, and the one button beside it does
-// not need the whole card either. A full-bleed action under a left-aligned
-// price reads as a banner, not as the end of a card.
-//
-// So the row survives, and the action takes half of it. Lives here rather than
-// in _cards.scss because the price is the guest: the footer's own rule is
-// correct for everything that is not one.
-@container mw-card (max-width: #{$mw-card-narrow}) {
-  .mw-card-footer:has(> .mw-price) {
-    flex-direction: row;
-    align-items: center;
+    &-name {
+      margin: spacing('0');
+      font-size: font-size('md');
+      font-weight: font-weight('bold');
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
 
-    // The footer's own rule hands every child `width: 100%` for the stack. Taken
-    // back for all of them, not just the price - the second slot is a button on
-    // one card and an "Ausgebucht" tag on the next, and a full-width tag is no
-    // better than a full-width button.
-    > * {
-      width: auto;
+    // With a band above it the body no longer opens the card
+    &-head + .mw-card-body {
+      padding-top: spacing('6');
     }
+  }
+
+  // The band owns the corner - an arc over it disappears into the fill or fights it
+  .mw-offer:has(> .mw-offer-head)::after {
+    @include corner-accent(1px, 'bottom');
+  }
 
-    > .mw-btn {
-      width: 50%;
+  // A price in a footer is a label next to an action, not a second action, so the
+  // row survives the narrow-card stack and the action takes half of it. Here and
+  // not in _cards.scss because the price is the guest - the footer's own rule is
+  // right for everything that is not one.
+  @container mw-card (max-width: #{$mw-card-narrow}) {
+    .mw-card-footer:has(> .mw-price) {
+      flex-direction: row;
+      align-items: center;
+
+      // Taken back for every child, not just the price: the second slot is a button
+      // on one card and a tag on the next
+      > * {
+        width: auto;
+      }
+
+      > .mw-btn {
+        width: 50%;
+      }
     }
   }
 }