fizzy/app/assets/stylesheets/card-columns.css

@layer components {
  /* Columns
  /* ------------------------------------------------------------------------ */

  /* Card contents are resized via container queries. We're using #main here as
     the primary container so all cards have the same container reference */
  #main:has(.card-columns) {
    --cards-gap: min(1.7cqi, 1.7rem);
    --gradient-border: linear-gradient(to right,var(--color-canvas), var(--color-ink) 3%, var(--color-ink) 97%, var(--color-canvas));
    --reserved-bubble-space: 0;
    --bubble-gap: 0.5rem;
    --bubble-size: 3.5rem;

    container-type: inline-size;
    max-inline-size: var(--main-width);

    @media (max-width: 639px) {
      --bubble-gap: -0.5rem;
      --bubble-size: 3rem;
    }
  }

  .card-columns {
    --collapsed: 40px;
    --expanded-min: 450px;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    align-items: stretch;
    position: relative;
    transition: 200ms var(--ease-out-expo);

    &:has(.cards) {
      min-block-size: 20lh;
    }

    &:before {
      background: var(--gradient-border);
      block-size: 1px;
      content: "";
      inset: 0 -0.6em 100% -0.6em;
      opacity: 0.15;
      position: absolute;
      z-index: 1;
    }

    &:after {
      background: var(--gradient-border);
      block-size: 1px;
      content: "";
      inset: 100% -0.6em 0 -0.6em;
      opacity: 0.15;
      position: absolute;
      z-index: 1;
    }

    .left-col {
      display: flex;
      gap: calc(var(--cards-gap) / 4);
      justify-content: end;
      align-items: stretch;
    }

    .right-col {
      display: flex;
      gap: calc(var(--cards-gap) / 4);
      justify-content: start;
      align-items: stretch;
    }
  }

  /* Cards
  /* ------------------------------------------------------------------------ */

  .cards {
    --column-color: color-mix(in srgb, var(--card-color) 15%, var(--color-canvas));

    align-items: stretch;
    display: flex;
    flex: 1 0 var(--expanded-min);
    flex-direction: column;
    gap: var(--cards-gap);
    justify-content: start;
    max-inline-size: var(--expanded-min);
    min-inline-size: var(--expanded-min);
    position: relative;
    scroll-snap-align: start;
    transition: all 300ms var(--ease-out-expo);

    /* Make sure filter dialogs don't end up behind sticky headers */
    &:has([open]) {
      z-index: 3;
    }

    &.is-collapsed {
      border-radius: 0.2em;
      flex: 0 0 var(--collapsed);
      inline-size: var(--collapsed);
      min-inline-size: 0;

      .blank-slate,
      .card {
        display: none;
      }
    }

    @media (max-width: 639px) {
      padding-block-end: calc(var(--cards-gap) * 2);
      padding-inline-start: var(--cards-gap);
    }

    .cards__expander {
      flex-direction: row-reverse;
      gap: 0.5ch;
      position: relative;

      .cards.is-collapsed & {
        block-size: 100%;
        display: flex;
        flex-direction: column;
        justify-content: start;

        &:after {
          background-color: var(--column-color);
          block-size: 100%;
          content: " ";
          inline-size: 1px;
          inset: 0 auto;
          position: absolute;
          z-index: -2;
        }
      }
    }

    .cards__expander-button {
      --btn-border-radius: 2em;
      --btn-padding: 0;
      --focus-ring-size: 0;

      font-size: var(--text-x-small);
      font-weight: 500;
      letter-spacing: 0.05em;
      line-height: var(--collapsed);

      .cards.is-collapsed & {
        flex-grow: 1;
        justify-content: start;
        writing-mode: vertical-rl;
      }

      .cards:not(.is-collapsed) & {
        --btn-padding: 0;
        line-height: 1;
        margin-block-start: 0.5em;
      }
    }

    .cards__expander-count {
      background-color: var(--column-color);
      block-size: var(--collapsed);
      border-radius: 2em;
      display: none;
      font-size: var(--text-x-small);
      font-weight: 500;
      inline-size: var(--collapsed);
      line-height: var(--collapsed);

      .cards.is-collapsed & {
        display: initial;
      }
    }

    .progress {
      --max-height: 540px;

      background-color: var(--column-color);
      border-radius: 0 0 2em 2em;
      font-size: var(--text-x-small);
      inline-size: var(--collapsed);
      margin-block-start: calc(var(--btn-size) / 2);
      position: absolute;
      z-index: -1;

      .cards:not(.is-collapsed) & {
        display: none;
      }
    }

    .progress-1 { block-size: calc(var(--max-height) * 0.05); }
    .progress-2 { block-size: calc(var(--max-height) * 0.10); }
    .progress-3 { block-size: calc(var(--max-height) * 0.15); }
    .progress-4 { block-size: calc(var(--max-height) * 0.20); }
    .progress-5 { block-size: calc(var(--max-height) * 0.25); }
    .progress-6 { block-size: calc(var(--max-height) * 0.30); }
    .progress-7 { block-size: calc(var(--max-height) * 0.35); }
    .progress-8 { block-size: calc(var(--max-height) * 0.40); }
    .progress-9 { block-size: calc(var(--max-height) * 0.45); }
    .progress-10 { block-size: calc(var(--max-height) * 0.50); }
    .progress-11 { block-size: calc(var(--max-height) * 0.55); }
    .progress-12 { block-size: calc(var(--max-height) * 0.60); }
    .progress-13 { block-size: calc(var(--max-height) * 0.65); }
    .progress-14 { block-size: calc(var(--max-height) * 0.70); }
    .progress-15 { block-size: calc(var(--max-height) * 0.75); }
    .progress-16 { block-size: calc(var(--max-height) * 0.80); }
    .progress-17 { block-size: calc(var(--max-height) * 0.85); }
    .progress-18 { block-size: calc(var(--max-height) * 0.90); }
    .progress-19 { block-size: calc(var(--max-height) * 0.95); }
    .progress-20 { block-size: calc(var(--max-height) * 1.00); }

    .blank-slate--card {
      box-shadow: none !important;
      border: 2px dashed color-mix(in srgb, var(--card-color) 40%, var(--color-canvas));;
      font-weight: 600;
      rotate: 2deg;
    }

    .card {
      --block-space: 1em;
      --block-space-half: 0.5em;
      --text-xx-large: 1.6em;
      --text-x-small: 1em;

      /* Set lower limit for font size */
      font-size: clamp(0.6rem, 0.85cqi, 100px);
    }

    .card__body {
      margin-block: var(--block-space-half);
    }

    .card__footer {
      margin-block-start: var(--block-space-half);
    }

    .card__title {
      line-height: 1.2;
      pointer-events: none;
    }

    .card__link {
      z-index: 1;
    }

    .card__hide-on-index {
      display: none;
    }

    .card:has(.card__background img:not([src=""])) {
      .card__content,
      .card__meta,
      .workflow-stage:not(.workflow-stage--current) {
        opacity: 0;
        transition: opacity 0.2s ease-in-out;

        @media (any-hover: hover) {
          .card:hover & {
              opacity: 1;
            }
        }
      }
    }

    @media (any-hover: hover) {
      .card:has(.card__background img:not([src=""])):hover .card__background img:not([src=""]) {
        filter: blur(3px) brightness(1.2);
        opacity: 0.2;
      }
    }

    .card__steps {
      display: flex;
    }
  }

  .cards--related:not(:hover):not(.drag-and-drop__hover-container) {
    .card {
      box-shadow: 0 0 1px var(--color-ink-medium);
      opacity: 0.9;
      transition: box-shadow 450ms ease-in-out, opacity 150ms ease-in-out;

      @media (prefers-color-scheme: dark) {
        opacity: 0.8;
        transition: opacity 150ms ease-in-out;
      }
    }
  }

  /* Column elements
  /* ------------------------------------------------------------------------ */

  .cards__heading {
    display: flex;
    font-size: var(--text-medium);
    inset-block-start: 0;
    justify-content: center;
    margin-block-start: 1px;
    margin-inline: -8px; /* enough to cover card shadows, but avoid overlapping bubbles */
    padding-block: var(--cards-gap) 0;
    position: sticky;
    z-index: 3;

    /* Cover bubbles and cards on small viewports */
    @media (max-width: 639px) {
      &:not(.cards--closed &) {
        margin-inline: calc(-1 * var(--cards-gap) - var(--reserved-bubble-space) - var(--main-padding));
      }
    }

    &, .cards__filter {
      font-weight: bold;
      text-transform: uppercase;
    }

    .cards__filter {
      --filter-block-padding: 0.5rem;

      background-color: var(--color-canvas);
      border-radius: 99rem;
      inline-size: auto;
      margin-block: calc(-1 * var(--filter-block-padding));
      padding-block: var(--filter-block-padding);
    }

    dialog {
      font-weight: normal;
      text-transform: none;
    }
  }

  /* Considering
  /* ------------------------------------------------------------------------ */

  .cards--considering {
    background-color: var(--color-canvas);
    background-image: linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, var(--color-considering) 25%, transparent) 33%,
      color-mix(in srgb, var(--color-considering) 25%, transparent) 66%,
      transparent 100%);
    margin-block: var(--cards-gap) 0;

    @supports(mask: radial-gradient(black)) {
      &:before {
        background: linear-gradient(90deg,
          color-mix(in oklch, var(--color-considering) 0%, transparent) 0%,
          color-mix(in oklch, var(--color-considering) 20%, transparent) 25%,
          color-mix(in oklch, var(--color-considering) 20%, transparent) 50%,
          color-mix(in oklch, var(--color-considering) 0%, transparent) 100%);
        content: "";
        inset: 0;
        mask: radial-gradient(6px at 50% calc(100% + 3px), transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px,
              radial-gradient(6px at 50% -3px, transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) 50% calc(50% + 3px)/16px 6px;
        position: absolute;
        z-index: 0;
      }
    }

    @media (min-width: 640px) {
      padding-inline: var(--cards-gap);
    }

    .cards__decoration {
      --size: 4.25em;

      background-color: var(--color-canvas);
      background-image: radial-gradient(ellipse at bottom,
        color-mix(in srgb, var(--color-considering) 30%, transparent) 0%,
        transparent 70%);
      block-size: var(--size);
      inline-size: 100%;
      inset: calc(var(--size) * -1) 0 auto 0;
      position: absolute;
      z-index: -1;

      @supports(mask: radial-gradient(black)) {
        &:before {
          background: radial-gradient(ellipse at bottom,
            color-mix(in srgb, var(--color-considering) 30%, transparent) 0%,
            transparent 70%);
          content: "";
          inset: 0;
          mask: radial-gradient(6px at 50% calc(100% + 3px), transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px,
                radial-gradient(6px at 50% -3px, transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) 50% calc(50% + 3px)/16px 6px;
          position: absolute;
          z-index: 0;
        }
      }

      &.cards__decoration--end {
        inset: auto 0 calc(var(--size) * -1);
        rotate: 180deg;
      }
    }

    .card {
      --avatar-size: 2.75em;
      --text-small: 1.1em;

      background-color: var(--color-canvas);
      line-height: 1.2;

      @media (min-width: 640px) {
        --text-xx-large: 1.6em;
      }

      &:nth-child(1n) { rotate: -1deg; }
      &:nth-child(1) { rotate: 0deg; }
      &:nth-child(2n) { rotate: 1deg; }
      &:nth-child(3n) { rotate: -0.5deg; }
      &:nth-child(4n) { rotate: 0.5deg; }
    }

    .card--new {
      --border-color: var(--color-selected-dark);
      --border-size: 1px;
      --card-padding-block: var(--block-space);

      border: 1px solid var(--color-selected-dark);
      text-align: center;

      .btn {
        &.btn--link {
          font-size: 1.2em;
          margin-block-start: 0.1em;
        }

        &:not(.btn--link, .btn--circle) {
          border: 0;
          color: var(--color-link);
        }
      }

      footer {
        font-size: var(--text-x-small);
        margin-block-end: calc(var(--block-space-half) * -1);
      }

      .overflow-count {
        font-size: 1.2em;
        font-weight: 500;
        padding: 0.5em 0.3em;
      }
    }

    .card__body {
      padding-block-start: 0;
      padding-inline: 0;
    }

    .card__collection {
      background-color: transparent;
      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
    }

    .card__collection-name {
      border-inline-start: 1px solid color-mix(in srgb, var(--color-ink) 33%, var(--color-canvas));
      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
    }

    .card--drafted {
      --card-color: var(--color-ink-medium) !important;

      border-color: var(--card-color) !important;
      border-style: dashed !important;
      box-shadow: none !important;
    }

    .card__header {
      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
      margin-inline: calc(-0.5 * var(--card-padding-inline)) calc(-0.25 * var(--card-padding-inline));
    }

    .card__people-label {
      display: none;
    }

    .card__title {
      min-block-size: 0;
    }

    .card__tags {
      font-size: var(--text-small);
    }
  }

  /* On Deck (Not Now)
  /* ------------------------------------------------------------------------ */

  .cards--on-deck {
    --column-color: var(--color-ink-lighter);

    margin-block: var(--cards-gap);
    margin-inline-start: auto;

    .card {
      --card-color: var(--color-card-complete) !important;
    }

    .bubble { display: none !important; }

    @media (min-width: 640px) {
      padding-inline: var(--cards-gap);
    }
  }

  /* Doing
  /* ------------------------------------------------------------------------ */

  .cards--doing {
    margin-block: var(--cards-gap);

    @media (min-width: 640px) {
      padding-inline: var(--cards-gap);
    }
  }

  /* Closed
  /* ------------------------------------------------------------------------ */

  .cards--closed {
    --column-color: var(--color-ink-lighter);

    margin-block: var(--cards-gap);

    @media (min-width: 640px) {
      padding-inline: var(--cards-gap);
    }
  }
}