<section class="ccb-lgt" aria-label="Minimalist light mode editorial code block demo">
  <div class="ccb-lgt__wrap">
    <div class="ccb-lgt__block">
      <div class="ccb-lgt__head">
        <span class="ccb-lgt__name">checkout.js</span>
        <span class="ccb-lgt__lang">JavaScript</span>
      </div>
      <pre class="ccb-lgt__pre"><code><span class="ccb-lgt__c">// create a payment session</span>
<span class="ccb-lgt__k">const</span> session = <span class="ccb-lgt__k">await</span> stripe.checkout.sessions.<span class="ccb-lgt__f">create</span>({
  mode: <span class="ccb-lgt__s">'payment'</span>,
  line_items: [{ price: <span class="ccb-lgt__s">'price_1Nx'</span>, quantity: <span class="ccb-lgt__n">1</span> }],
  success_url: <span class="ccb-lgt__s">'https://codefronts.com/done'</span>,
});</code></pre>
    </div>
  </div>
</section>

/* ─── 11 Minimalist Light Mode / Editorial Theme ──────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Fraunces:opsz,[email protected],400;9..144,600;9..144,800&display=swap');

.ccb-lgt {
  --ccb-lgt-paper: #f8fafc;
  --ccb-lgt-panel: #ffffff;
  --ccb-lgt-ink: #1f2933;
  --ccb-lgt-muted: #697586;
  --ccb-lgt-line: #e7ecf2;
  --ccb-lgt-accent: #635bff;
  --ccb-lgt-green: #0a7c5a;
  --ccb-lgt-orange: #c2410c;

  width: 100%;
  min-height: 320px;
  background: var(--ccb-lgt-paper);
  color: var(--ccb-lgt-ink);
  font-family: 'Fraunces', Georgia, serif;
  display: flex; align-items: center; justify-content: center;
  padding: 36px 22px;
  box-sizing: border-box;
}
.ccb-lgt *, .ccb-lgt *::before, .ccb-lgt *::after { box-sizing: border-box; }

.ccb-lgt__wrap { width: 100%; max-width: 600px; }
.ccb-lgt__block {
  background: var(--ccb-lgt-panel);
  border: 1px solid var(--ccb-lgt-line);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 28px -16px rgba(16,24,40,.18);
}
.ccb-lgt__head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--ccb-lgt-line);
  background: #fcfdfe;
}
.ccb-lgt__name { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--ccb-lgt-muted); font-weight: 500; }
.ccb-lgt__lang {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; color: var(--ccb-lgt-accent);
  background: #eef0ff;
  padding: 3px 10px; border-radius: 6px; font-weight: 600;
}
.ccb-lgt__pre {
  margin: 0; padding: 20px 20px 24px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px; line-height: 1.8;
  color: #334155; overflow-x: auto;
}
.ccb-lgt__k { color: var(--ccb-lgt-accent); }
.ccb-lgt__f { color: #0b69c7; }
.ccb-lgt__s { color: var(--ccb-lgt-green); }
.ccb-lgt__n { color: var(--ccb-lgt-orange); }
.ccb-lgt__c { color: #9aa5b1; font-style: italic; }
.ccb-lgt__pre::-webkit-scrollbar       { height: 8px; }
.ccb-lgt__pre::-webkit-scrollbar-thumb { background: #dde3ea; border-radius: 8px; }