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

<script lang="ts">
  export let plan: {
    title: string;
    price: string;
    period: string;
    features: string[];
    isPopular: boolean;
    mobileOrder: number;
  };
  export let variant: 'pricing' | 'service' = 'service';
</script>

<article
  class="plan-card"
  class:plan-card--popular={plan.isPopular}
  class:plan-card--pricing={variant === 'pricing'}
  class:plan-card--service={variant === 'service'}
  style="--mobile-order:{plan.mobileOrder};"
>
  {#if plan.isPopular}
    <span class="plan-card__ribbon">Popular</span>
  {/if}
  <h3>{plan.title}</h3>
  <div class="plan-card__price">{plan.price}</div>
  <p class="plan-card__period">{plan.period}</p>
  <ul class="plan-card__features">
    {#each plan.features as feature}
      <li>{feature}</li>
    {/each}
  </ul>
  <a class="btn btn-yellow plan-card__cta" href="#newlead">Book a Meet &amp; Greet</a>
</article>

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

  .plan-card--popular {
    border: 2px solid var(--yellow);
  }

  /* ── Service variant ── */
  .plan-card--service {
    align-items: stretch;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 248, 246, 0.98) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(17, 20, 24, 0.045),
      0 8px 40px rgba(0, 0, 0, 0.06);
  }

  /* ── Pricing variant ── */
  .plan-card--pricing {
    align-items: center;
    text-align: center;
    background: #fff;
    box-shadow: 0 14px 34px rgba(17, 20, 24, 0.05);
  }

  /* ── Ribbon ── */
  .plan-card__ribbon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--yellow);
    color: #000;
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* ── Heading ── */
  .plan-card h3 {
    margin: 0;
    font-family: var(--font-head);
    font-size: 22px;
    line-height: 1.2;
    color: #000;
  }

  /* ── Price ── */
  .plan-card__price {
    font-family: var(--font-head);
    line-height: 1;
  }

  .plan-card--service .plan-card__price {
    margin-top: 20px;
    font-size: 44px;
    color: var(--gw-green);
  }

  .plan-card--pricing .plan-card__price {
    margin-top: 22px;
    font-size: 52px;
    line-height: 0.95;
    letter-spacing: -0.05em;
    color: #000;
  }

  /* ── Period ── */
  .plan-card__period {
    margin: 8px 0 0;
    font-size: 14px;
    text-transform: uppercase;
  }

  .plan-card--service .plan-card__period {
    color: #5d6166;
    font-weight: 600;
    letter-spacing: 0.06em;
  }

  .plan-card--pricing .plan-card__period {
    color: #5e6167;
    letter-spacing: 0.08em;
  }

  /* ── Features ── */
  .plan-card__features {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
  }

  .plan-card--service .plan-card__features {
    flex: 1 1 auto;
  }

  /* Service: bullet style */
  .plan-card--service .plan-card__features li {
    position: relative;
    padding-left: 24px;
    color: #34363a;
    font-size: 15px;
    line-height: 1.5;
  }

  .plan-card--service .plan-card__features li + li {
    margin-top: 12px;
  }

  .plan-card--service .plan-card__features li::before {
    content: '•';
    position: absolute;
    left: 6px;
    top: 0;
    color: var(--yellow);
    font-size: 20px;
    line-height: 1;
  }

  /* Pricing: divider style */
  .plan-card--pricing .plan-card__features {
    width: 100%;
  }

  .plan-card--pricing .plan-card__features li {
    padding: 15px 0;
    border-top: 1px solid rgba(17, 20, 24, 0.08);
    color: #34363a;
    font-size: 16px;
    line-height: 1.5;
  }

  /* ── CTA ── */
  .plan-card__cta {
    display: flex;
    width: fit-content;
    margin: 28px auto 0;
    font-family: var(--font-head);
  }

  /* ── Hover ── */
  @media (hover: hover) {
    .plan-card--service:hover {
      transform: translateY(-2px);
      box-shadow:
        inset 0 0 0 1px rgba(17, 20, 24, 0.055),
        0 10px 40px rgba(0, 0, 0, 0.08);
      filter: brightness(1.015);
    }

    .plan-card--pricing:hover {
      transform: translateY(-6px) scale(1.012);
      box-shadow: 0 22px 44px rgba(17, 20, 24, 0.1);
    }
  }

  .plan-card:active {
    transform: translateY(-2px) scale(0.992);
  }

  /* ── Mobile ── */
  @media (max-width: 768px) {
    .plan-card {
      order: var(--mobile-order, 0);
      padding: 28px 22px;
    }

    .plan-card--pricing .plan-card__price {
      font-size: 46px;
    }

    .plan-card__cta {
      display: none;
    }
  }
</style>