Embed

<section class="nn-explore" aria-labelledby="whats-on-title">
  <div class="nnx-container">
    <header class="nnx-header">
      <h1 id="whats-on-title">Netball Now — What’s On?</h1>
      <p class="nnx-sub">
        Discover our current netball pathways — from first throws to friendly fixtures, 
        there’s a league for every age and every stage.
      </p>
    </header>

    <nav class="nnx-list" aria-label="Netball Now formats">
      
      <a class="nnx-item nnx--orange" href="/minis" aria-label="Minis, ages 5 to 11">
        <div class="nnx-left">
          <span class="nnx-dot" aria-hidden="true"></span>
          <div class="nnx-text">
            <span class="nnx-title">Minis</span>
            <span class="nnx-meta">Ages 5–11</span>
          </div>
        </div>
        <span class="nnx-cta" aria-hidden="true">Explore →</span>
      </a>

      
      <a class="nnx-item nnx--purple" href="/next-gen" aria-label="Next Gen, ages 12 to 16">
        <div class="nnx-left">
          <span class="nnx-dot" aria-hidden="true"></span>
          <div class="nnx-text">
            <span class="nnx-title">Next Gen</span>
            <span class="nnx-meta">Ages 12–16</span>
          </div>
        </div>
        <span class="nnx-cta" aria-hidden="true">Explore →</span>
      </a>

      
      <a class="nnx-item nnx--pink" href="/adult-social-league" aria-label="Adult Social League">
        <div class="nnx-left">
          <span class="nnx-dot" aria-hidden="true"></span>
          <div class="nnx-text">
            <span class="nnx-title">Adult League</span>
            <span class="nnx-meta">Social, inclusive weekly fixtures</span>
          </div>
        </div>
        <span class="nnx-cta" aria-hidden="true">Explore →</span>
      </a>

      
      <a class="nnx-item nnx--teal" href="/mixed-league" aria-label="Mixed League">
        <div class="nnx-left">
          <span class="nnx-dot" aria-hidden="true"></span>
          <div class="nnx-text">
            <span class="nnx-title">Mixed League</span>
            <span class="nnx-meta">Fast, friendly fixtures for everyone</span>
          </div>
        </div>
        <span class="nnx-cta" aria-hidden="true">Explore →</span>
      </a>
    </nav>
  </div>

  <style>
    /* ------- Tokens / Brand ------- */
    .nn-explore {
      --orange:#FF8A00;  /* Minis */
      --purple:#7C4DFF;  /* Next Gen */
      --pink:#FF2E86;    /* Adult */
      --teal:#12C9C2;    /* Mixed */
      --ink:#121316;
      --muted:#5B6068;
      --radius:16px;
      --gap:12px;
      background:#ffe3f0; /* soft pink wash */
      padding:clamp(20px,3vw,40px) clamp(14px,3vw,22px);
      font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial;
    }
    .nnx-container{max-width:1000px;margin:0 auto;}
    .nnx-header{margin-bottom:clamp(14px,2.5vw,22px);}
    .nnx-header h1{margin:0 0 6px;color:var(--ink);font-weight:800;letter-spacing:-.02em;font-size:clamp(1.6rem,3vw,2.2rem);}
    .nnx-sub{margin:0;color:#2b3240;opacity:.85;font-size:clamp(1rem,1.6vw,1.05rem);}

    /* ------- List ------- */
    .nnx-list{display:grid;gap:var(--gap);}
    .nnx-item{
      display:flex;align-items:center;justify-content:space-between;gap:12px;
      text-decoration:none;color:var(--ink);background:#fff;border-radius:var(--radius);
      padding:14px 16px;border:1px solid rgba(0,0,0,.06);
      box-shadow:0 8px 24px rgba(0,0,0,.05);
      transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
    }
    .nnx-item:hover{
      transform:translateY(-2px);
      box-shadow:0 14px 30px rgba(0,0,0,.08);
      border-color:rgba(0,0,0,.12);
    }
    .nnx-left{display:flex;align-items:center;gap:12px;min-width:0;}
    .nnx-dot{
      width:14px;height:14px;border-radius:999px;flex:0 0 auto;
      box-shadow:0 0 0 3px rgba(0,0,0,.05) inset;
    }
    .nnx-text{display:flex;flex-direction:column;min-width:0;}
    .nnx-title{font-weight:900;letter-spacing:-.01em;font-size:1.05rem;line-height:1.2;}
    .nnx-meta{color:var(--muted);font-size:.95rem;line-height:1.25;}
    .nnx-cta{font-weight:800;white-space:nowrap;}

    /* Colour accents */
    .nnx--orange .nnx-dot{background:var(--orange);}
    .nnx--purple .nnx-dot{background:var(--purple);}
    .nnx--pink   .nnx-dot{background:var(--pink);}
    .nnx--teal   .nnx-dot{background:var(--teal);}

    /* Small screens */
    @media (max-width:560px){
      .nnx-title{font-size:1rem;}
      .nnx-meta{font-size:.9rem;}
      .nnx-item{padding:14px;}
    }
  </style>
</section>

Netball Now