gw-svelte/src/lib/components/PricingPlanCard.svelte

<script lang="ts">
  import Icon from '$lib/components/Icon.svelte';

  export let plan: {
    title: string;
    price: string;
    period: string;
    features: string[];
    isPopular: boolean;
    mobileOrder: number;
  };
  export let variant: 'pricing' | 'service' = 'service';

  $: featured = plan.isPopular;
  const ctaLabel = 'Book a Meet & Greet';
</script>

<article
  class="plan-card"
  class:plan-card--featured={featured}
  class:plan-card--supporting={!featured}
  class:plan-card--pricing={variant === 'pricing'}
  class:plan-card--service={variant === 'service'}
  style="--mobile-order:{plan.mobileOrder};"
>
  {#if featured}
    <span class="plan-card__ribbon" aria-label="Most chosen routine">
      <Icon name="fas fa-paw" className="plan-card__ribbon-icon" />
      Goodwalk favourite
    </span>
  {/if}

  <header class="plan-card__header">
    <h3 class="plan-card__title">{plan.title}</h3>

    <div class="plan-card__price-block">
      <span class="plan-card__price">{plan.price}</span>
      <span class="plan-card__period">{plan.period}</span>
    </div>
  </header>

  <ul class="plan-card__features">
    {#each plan.features as feature}
      <li>
        <Icon name="fas fa-check" className="plan-card__feature-icon" />
        <span>{feature}</span>
      </li>
    {/each}
  </ul>

  <a class="btn btn-yellow plan-card__cta" href="#newlead">
    {ctaLabel}
    <Icon name="fas fa-arrow-right" />
  </a>
</article>

<style>
  /* ── Base ── */
  .plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 26px;
    padding: 30px 26px 28px;
    overflow: hidden;
    isolation: isolate;
    transition:
      transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.28s ease,
      border-color 0.22s ease;
  }

  /* ── Supporting plans (white on cream page) ── */
  .plan-card--supporting {
    background: var(--surface-panel);
    border: 1px solid rgba(33, 48, 33, 0.10);
    color: var(--text-heading);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.7) inset,
      0 10px 24px rgba(17, 20, 24, 0.08),
      0 2px 6px rgba(17, 20, 24, 0.05);
  }

  /* ── Featured plan (green-drenched, brand-true) ── */
  .plan-card--featured {
    background-color: var(--gw-green);
    background-image: none;
    border: 1px solid rgba(255, 209, 0, 0.22);
    color: rgba(255, 248, 230, 0.96);
    box-shadow:
      0 1px 0 rgba(255, 248, 230, 0.08) inset,
      0 22px 46px rgba(33, 48, 33, 0.30),
      0 4px 10px rgba(33, 48, 33, 0.18);
    padding-top: 44px;
  }

  .plan-card--featured .plan-card__header,
  .plan-card--featured .plan-card__features {
    background: transparent;
  }

  /* ── Pricing variant: featured can grow taller on desktop for hierarchy ── */
  .plan-card--pricing.plan-card--featured {
    padding: 48px 28px 32px;
  }

  /* ── Ribbon (featured only) — hand-pinned stamp ── */
  .plan-card__ribbon {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    position: absolute;
    top: 16px;
    left: 22px;
    padding: 5px 11px 5px 9px;
    border-radius: 999px;
    background: var(--yellow);
    color: var(--gw-green);
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transform: rotate(-3deg);
    transform-origin: 12px 50%;
    box-shadow:
      0 1px 0 rgba(33, 48, 33, 0.10),
      0 8px 18px rgba(255, 209, 0, 0.32);
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .plan-card--featured:hover .plan-card__ribbon {
    transform: rotate(-1deg) translateY(-1px);
  }

  @media (prefers-reduced-motion: reduce) {
    .plan-card__ribbon,
    .plan-card--featured:hover .plan-card__ribbon {
      transform: none;
      transition: none;
    }
  }

  :global(.plan-card__ribbon-icon) {
    font-size: 10px;
  }

  /* ── Header ── */
  .plan-card__header {
    /* Override the global `header { ... }` in layout.css (page chrome only).
       Without this, every card inherits a background band and box-shadow. */
    background: transparent;
    box-shadow: none;
    z-index: 1;
    isolation: auto;
    overflow: visible;
    position: relative;
  }

  .plan-card__title {
    margin: 0;
    font-family: var(--font-head);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.005em;
  }

  .plan-card--featured .plan-card__title {
    color: rgba(255, 248, 230, 0.96);
  }

  .plan-card--supporting .plan-card__title {
    color: var(--text-heading);
  }

  /* ── Price block ── */
  .plan-card__price-block {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 4px;
    margin-top: 18px;
    min-width: 0;
  }

  .plan-card__price {
    font-family: var(--font-head);
    font-size: 50px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.035em;
  }

  .plan-card--featured .plan-card__price {
    color: var(--yellow);
    position: relative;
    display: inline-block;
  }

  .plan-card--supporting .plan-card__price {
    color: var(--text-heading);
    font-size: 48px;
  }

  .plan-card__period {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .plan-card--featured .plan-card__period {
    color: rgba(255, 248, 230, 0.78);
  }

  .plan-card--supporting .plan-card__period {
    color: var(--text-muted);
  }

  /* ── Features ── */
  .plan-card__features {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    margin: 24px 0 0;
    padding: 20px 0 0;
    list-style: none;
    border-top: 1px solid currentColor;
  }

  .plan-card--featured .plan-card__features {
    border-top-color: rgba(255, 248, 230, 0.24);
  }

  .plan-card--supporting .plan-card__features {
    border-top-color: rgba(33, 48, 33, 0.10);
  }

  .plan-card__features li {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    font-size: 14px;
    line-height: 1.55;
  }

  .plan-card__features li + li {
    margin-top: 10px;
  }

  .plan-card--featured .plan-card__features li {
    color: rgba(255, 248, 230, 0.94);
  }

  .plan-card--supporting .plan-card__features li {
    color: var(--text-heading-soft);
  }

  :global(.plan-card__feature-icon) {
    margin-top: 4px;
    font-size: 11px;
  }

  :global(.plan-card--featured .plan-card__feature-icon) {
    color: var(--yellow);
  }

  :global(.plan-card--supporting .plan-card__feature-icon) {
    color: var(--gw-green);
  }

  /* ── CTA ── */
  .plan-card__cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
    align-self: center;
    width: auto;
    min-width: 180px;
    padding-inline: 22px;
    font-family: var(--font-head);
  }

  /* ── Hover ── */
  @media (hover: hover) {
    .plan-card--supporting:hover {
      transform: translateY(-2px);
      border-color: rgba(33, 48, 33, 0.28);
    }

    .plan-card--featured:hover {
      transform: translateY(-3px);
      box-shadow:
        inset 0 1px 0 rgba(255, 248, 230, 0.10),
        0 26px 52px rgba(33, 48, 33, 0.26);
    }

  }

  .plan-card:active {
    transform: translateY(-1px);
  }

  /* ── Pricing variant alignment overrides ── */
  .plan-card--pricing {
    text-align: left;
  }

  /* ── Mobile ── */
  @media (max-width: 768px) {
    .plan-card {
      order: var(--mobile-order, 0);
      width: 100%;
      margin-inline: auto;
      padding: 22px 18px 20px;
      border-radius: 22px;
    }

    .plan-card--featured {
      padding-top: 36px;
    }

    .plan-card--pricing.plan-card--featured {
      padding: 36px 18px 20px;
    }

    .plan-card__price {
      font-size: 36px;
    }

    .plan-card--supporting .plan-card__price {
      font-size: 34px;
    }

    .plan-card__title {
      font-size: 17px;
    }

    .plan-card__price-block {
      margin-top: 14px;
    }

    .plan-card__features {
      margin-top: 18px;
      padding-top: 16px;
    }

    .plan-card__features li {
      gap: 8px;
      font-size: 13px;
      line-height: 1.45;
    }

    .plan-card__features li + li {
      margin-top: 8px;
    }

    .plan-card__cta {
      margin-top: 20px;
      padding-inline: 16px;
    }

    .plan-card__ribbon {
      top: 12px;
      left: 16px;
      padding: 4px 9px 4px 8px;
      font-size: 10px;
    }

    .plan-card__cta {
      width: 100%;
      min-width: 0;
    }
  }
</style>