<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
<symbol id="bm-i-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6.5 6.5l11 11M17.5 6.5l-11 11"/></symbol>
<symbol id="bm-i-spark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.5l1.9 5.2 5.1 1.9-5.1 1.9L12 17.7l-1.9-5.2L5 10.6l5.1-1.9z"/><path d="M18.5 16v4M16.5 18h4"/></symbol>
<symbol id="bm-i-clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></symbol>
<symbol id="bm-i-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v11M7.5 10.5 12 15l4.5-4.5M5 19.5h14"/></symbol>
<symbol id="bm-i-send" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20.5 3.5 10 14M20.5 3.5l-6.5 17-4-6.5-6.5-4z"/></symbol>
</svg>
<div><span class="lbl">Header, body and footer</span>
<div class="btns"><button class="bm-btn is-primary" type="button" data-open="bm-release" aria-haspopup="dialog">What's new in 4.2</button></div></div>
<div><span class="lbl">Sizes: small, large, full screen</span>
<div class="btns">
<button class="bm-btn" type="button" data-open="bm-session" aria-haspopup="dialog">Session timeout</button>
<button class="bm-btn" type="button" data-open="bm-keys" aria-haspopup="dialog">Keyboard shortcuts</button>
<button class="bm-btn" type="button" data-open="bm-invoice" aria-haspopup="dialog">Invoice preview</button>
</div></div>
<div><span class="lbl">Scrollable body</span>
<div class="btns"><button class="bm-btn" type="button" data-open="bm-terms" aria-haspopup="dialog">Terms of service</button></div></div>
<!-- Default size: header, body and footer -->
<dialog class="bm" id="bm-release" aria-labelledby="bm-release-title">
<form class="bm-form" method="dialog">
<div class="bm-head">
<span class="bm-icon" aria-hidden="true"><svg><use href="#bm-i-spark"/></svg></span>
<div class="bm-titles"><h2 class="bm-title" id="bm-release-title">What's new in Ledgerly 4.2</h2><p class="bm-sub">Released 18 September 2026 · 3 changes</p></div>
<button class="bm-x" value="close" aria-label="Close"><svg aria-hidden="true"><use href="#bm-i-x"/></svg></button>
</div>
<div class="bm-body">
<ul class="bm-list">
<li><span class="bm-tag is-new">New</span><div><b>Recurring invoices</b><p>Schedule an invoice to go out weekly, monthly or on a set day.</p></div></li>
<li><span class="bm-tag is-better">Improved</span><div><b>Faster bank sync</b><p>Transactions from 1,400 banks now arrive in under a minute.</p></div></li>
<li><span class="bm-tag is-fix">Fixed</span><div><b>Currency rounding</b><p>Totals in JPY and KRW no longer show two decimal places.</p></div></li>
</ul>
</div>
<div class="bm-foot">
<a class="bm-btn" href="#">Full changelog</a>
<button class="bm-btn is-primary" value="ok">Got it</button>
</div>
</form>
</dialog>
<!-- Small -->
<dialog class="bm is-sm" id="bm-session" aria-labelledby="bm-session-title" aria-describedby="bm-session-desc">
<form class="bm-form" method="dialog">
<div class="bm-head">
<span class="bm-icon" aria-hidden="true"><svg><use href="#bm-i-clock"/></svg></span>
<div class="bm-titles"><h2 class="bm-title" id="bm-session-title">Still there?</h2></div>
</div>
<div class="bm-body"><p id="bm-session-desc">You have been inactive for 25 minutes. To protect your account we will sign you out in 2 minutes.</p></div>
<div class="bm-foot">
<button class="bm-btn is-primary" value="stay">Stay signed in</button>
<button class="bm-btn" value="signout">Sign out now</button>
</div>
</form>
</dialog>
<!-- Large -->
<dialog class="bm is-lg" id="bm-keys" aria-labelledby="bm-keys-title">
<form class="bm-form" method="dialog">
<div class="bm-head">
<div class="bm-titles"><h2 class="bm-title" id="bm-keys-title">Keyboard shortcuts</h2><p class="bm-sub">Press <kbd>?</kbd> anywhere in Ledgerly to open this list.</p></div>
<button class="bm-x" value="close" aria-label="Close"><svg aria-hidden="true"><use href="#bm-i-x"/></svg></button>
</div>
<div class="bm-body bm-keys">
<section><h3>Navigation</h3><dl>
<div><dt>Go to dashboard</dt><dd><kbd>G</kbd><kbd>D</kbd></dd></div>
<div><dt>Go to invoices</dt><dd><kbd>G</kbd><kbd>I</kbd></dd></div>
<div><dt>Search</dt><dd><kbd>/</kbd></dd></div>
<div><dt>Command menu</dt><dd><kbd>Ctrl</kbd><kbd>K</kbd></dd></div>
</dl></section>
<section><h3>Invoices</h3><dl>
<div><dt>New invoice</dt><dd><kbd>N</kbd></dd></div>
<div><dt>Duplicate</dt><dd><kbd>Shift</kbd><kbd>D</kbd></dd></div>
<div><dt>Send to client</dt><dd><kbd>Ctrl</kbd><kbd>Enter</kbd></dd></div>
<div><dt>Mark as paid</dt><dd><kbd>P</kbd></dd></div>
</dl></section>
</div>
</form>
</dialog>
<!-- Full screen -->
<dialog class="bm is-full" id="bm-invoice" aria-labelledby="bm-invoice-title">
<form class="bm-form" method="dialog">
<div class="bm-head">
<div class="bm-titles"><h2 class="bm-title" id="bm-invoice-title">Invoice INV-2048</h2><p class="bm-sub">Northwind Studio · Due 30 September 2026</p></div>
<button class="bm-x" value="close" aria-label="Close"><svg aria-hidden="true"><use href="#bm-i-x"/></svg></button>
</div>
<div class="bm-body">
<div class="bm-paper">
<div class="bm-parties">
<div><b>From</b><span>Halden & Row Design</span><span>14 Canal Street, Leeds</span></div>
<div><b>Bill to</b><span>Northwind Studio</span><span>Unit 3, Harbour Yard, Bristol</span></div>
<div><b>Issued</b><span>16 September 2026</span></div>
</div>
<div class="bm-scroll-x">
<table class="bm-table">
<thead><tr><th scope="col">Description</th><th scope="col" class="num">Qty</th><th scope="col" class="num">Rate</th><th scope="col" class="num">Amount</th></tr></thead>
<tbody>
<tr><td>Brand identity refresh</td><td class="num">1</td><td class="num">£3,200.00</td><td class="num">£3,200.00</td></tr>
<tr><td>Website design, 6 pages</td><td class="num">6</td><td class="num">£450.00</td><td class="num">£2,700.00</td></tr>
<tr><td>Copywriting (hours)</td><td class="num">12</td><td class="num">£65.00</td><td class="num">£780.00</td></tr>
</tbody>
<tfoot>
<tr><td colspan="3" class="num">Subtotal</td><td class="num">£6,680.00</td></tr>
<tr><td colspan="3" class="num">VAT 20%</td><td class="num">£1,336.00</td></tr>
<tr><td colspan="3" class="num">Total due</td><td class="num">£8,016.00</td></tr>
</tfoot>
</table>
</div>
</div>
</div>
<div class="bm-foot">
<a class="bm-btn" href="#"><svg aria-hidden="true"><use href="#bm-i-download"/></svg>Download PDF</a>
<button class="bm-btn is-primary" value="send"><svg aria-hidden="true"><use href="#bm-i-send"/></svg>Send invoice</button>
</div>
</form>
</dialog>
<!-- Scrollable body -->
<dialog class="bm is-scroll" id="bm-terms" aria-labelledby="bm-terms-title">
<form class="bm-form" method="dialog">
<div class="bm-head">
<div class="bm-titles"><h2 class="bm-title" id="bm-terms-title">Terms of Service</h2><p class="bm-sub">Last updated 1 September 2026</p></div>
<button class="bm-x" value="close" aria-label="Close"><svg aria-hidden="true"><use href="#bm-i-x"/></svg></button>
</div>
<div class="bm-body" tabindex="0" role="region" aria-label="Terms of Service text">
<h3>1. Your account</h3>
<p>You need an account to use Ledgerly. Keep your password private and tell us at once if you think someone else has used it. You are responsible for everything done under your account.</p>
<h3>2. Payments and billing</h3>
<p>Paid plans are billed monthly or yearly in advance. Prices exclude VAT, which we add where the law requires it. If a payment fails we will retry it three times over seven days before pausing your workspace.</p>
<h3>3. Your data</h3>
<p>The invoices, clients and files you add stay yours. We process them only to run the service, keep encrypted backups for 30 days, and export everything to CSV or PDF whenever you ask.</p>
<h3>4. Acceptable use</h3>
<p>Do not use Ledgerly to send spam, to bill for goods you do not supply, or to probe or overload our systems. We may suspend accounts that do, and we will tell you why.</p>
<h3>5. Cancelling</h3>
<p>You can cancel at any time from Settings, Billing. Your plan runs to the end of the period you paid for, and your data stays available to export for 90 days afterwards.</p>
<h3>6. Changes to these terms</h3>
<p>We will email you at least 30 days before a change that affects your rights. If you keep using Ledgerly after that date, the new terms apply.</p>
</div>
<div class="bm-foot">
<button class="bm-btn" value="decline">Decline</button>
<button class="bm-btn is-primary" value="accept">Accept terms</button>
</div>
</form>
</dialog>
// Open a dialog from any button with data-open="dialog-id". showModal() traps focus, closes on Esc
// and makes the page behind inert. Buttons inside <form method="dialog"> close it with no script.
document.querySelectorAll('[data-open]').forEach(function (btn) {
var dialog = document.getElementById(btn.getAttribute('data-open'));
if (!dialog) return;
btn.addEventListener('click', function () {
dialog.showModal();
dialog.addEventListener('close', function () { btn.focus(); }, { once: true }); // focus back to the trigger
});
// A click on the backdrop lands on the <dialog> itself (its form fills the box), so close it
dialog.addEventListener('click', function (e) { if (e.target === dialog) dialog.close(); });
});
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
<symbol id="bm-i-spark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.5l1.9 5.2 5.1 1.9-5.1 1.9L12 17.7l-1.9-5.2L5 10.6l5.1-1.9z"/><path d="M18.5 16v4M16.5 18h4"/></symbol>
<symbol id="bm-i-clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></symbol>
<symbol id="bm-i-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v11M7.5 10.5 12 15l4.5-4.5M5 19.5h14"/></symbol>
<symbol id="bm-i-send" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20.5 3.5 10 14M20.5 3.5l-6.5 17-4-6.5-6.5-4z"/></symbol>
</svg>
<div><span class="lbl">Header, body and footer</span>
<div class="d-flex flex-wrap gap-2"><button class="btn bm-btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#bm-release">What's new in 4.2</button></div></div>
<div><span class="lbl">Sizes: small, large, full screen</span>
<div class="d-flex flex-wrap gap-2">
<button class="btn bm-btn" type="button" data-bs-toggle="modal" data-bs-target="#bm-session">Session timeout</button>
<button class="btn bm-btn" type="button" data-bs-toggle="modal" data-bs-target="#bm-keys">Keyboard shortcuts</button>
<button class="btn bm-btn" type="button" data-bs-toggle="modal" data-bs-target="#bm-invoice">Invoice preview</button>
</div></div>
<div><span class="lbl">Scrollable body</span>
<div class="d-flex flex-wrap gap-2"><button class="btn bm-btn" type="button" data-bs-toggle="modal" data-bs-target="#bm-terms">Terms of service</button></div></div>
<!-- Default size: header, body and footer -->
<div class="modal fade bm" id="bm-release" tabindex="-1" aria-labelledby="bm-release-title" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<span class="bm-icon" aria-hidden="true"><svg><use href="#bm-i-spark"/></svg></span>
<div class="flex-grow-1"><h2 class="modal-title" id="bm-release-title">What's new in Ledgerly 4.2</h2><p class="bm-sub">Released 18 September 2026 · 3 changes</p></div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<ul class="bm-list">
<li><span class="badge rounded-pill bm-tag is-new">New</span><div><b>Recurring invoices</b><p>Schedule an invoice to go out weekly, monthly or on a set day.</p></div></li>
<li><span class="badge rounded-pill bm-tag is-better">Improved</span><div><b>Faster bank sync</b><p>Transactions from 1,400 banks now arrive in under a minute.</p></div></li>
<li><span class="badge rounded-pill bm-tag is-fix">Fixed</span><div><b>Currency rounding</b><p>Totals in JPY and KRW no longer show two decimal places.</p></div></li>
</ul>
</div>
<div class="modal-footer">
<a class="btn bm-btn" href="#">Full changelog</a>
<button type="button" class="btn bm-btn btn-primary" data-bs-dismiss="modal">Got it</button>
</div>
</div>
</div>
</div>
<!-- Small -->
<div class="modal fade bm bm-sm" id="bm-session" tabindex="-1" aria-labelledby="bm-session-title" aria-describedby="bm-session-desc" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content text-center">
<div class="modal-header">
<span class="bm-icon" aria-hidden="true"><svg><use href="#bm-i-clock"/></svg></span>
<h2 class="modal-title" id="bm-session-title">Still there?</h2>
</div>
<div class="modal-body"><p id="bm-session-desc">You have been inactive for 25 minutes. To protect your account we will sign you out in 2 minutes.</p></div>
<div class="modal-footer">
<button type="button" class="btn bm-btn btn-primary" data-bs-dismiss="modal">Stay signed in</button>
<button type="button" class="btn bm-btn" data-bs-dismiss="modal">Sign out now</button>
</div>
</div>
</div>
</div>
<!-- Large -->
<div class="modal fade bm" id="bm-keys" tabindex="-1" aria-labelledby="bm-keys-title" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<div class="flex-grow-1"><h2 class="modal-title" id="bm-keys-title">Keyboard shortcuts</h2><p class="bm-sub">Press <kbd>?</kbd> anywhere in Ledgerly to open this list.</p></div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body bm-keys">
<section><h3>Navigation</h3><dl>
<div><dt>Go to dashboard</dt><dd><kbd>G</kbd><kbd>D</kbd></dd></div>
<div><dt>Go to invoices</dt><dd><kbd>G</kbd><kbd>I</kbd></dd></div>
<div><dt>Search</dt><dd><kbd>/</kbd></dd></div>
<div><dt>Command menu</dt><dd><kbd>Ctrl</kbd><kbd>K</kbd></dd></div>
</dl></section>
<section><h3>Invoices</h3><dl>
<div><dt>New invoice</dt><dd><kbd>N</kbd></dd></div>
<div><dt>Duplicate</dt><dd><kbd>Shift</kbd><kbd>D</kbd></dd></div>
<div><dt>Send to client</dt><dd><kbd>Ctrl</kbd><kbd>Enter</kbd></dd></div>
<div><dt>Mark as paid</dt><dd><kbd>P</kbd></dd></div>
</dl></section>
</div>
</div>
</div>
</div>
<!-- Full screen -->
<div class="modal fade bm bm-full" id="bm-invoice" tabindex="-1" aria-labelledby="bm-invoice-title" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<div class="flex-grow-1"><h2 class="modal-title" id="bm-invoice-title">Invoice INV-2048</h2><p class="bm-sub">Northwind Studio · Due 30 September 2026</p></div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="bm-paper">
<div class="bm-parties">
<div><b>From</b><span>Halden & Row Design</span><span>14 Canal Street, Leeds</span></div>
<div><b>Bill to</b><span>Northwind Studio</span><span>Unit 3, Harbour Yard, Bristol</span></div>
<div><b>Issued</b><span>16 September 2026</span></div>
</div>
<div class="table-responsive">
<table class="table bm-table">
<thead><tr><th scope="col">Description</th><th scope="col" class="text-end">Qty</th><th scope="col" class="text-end">Rate</th><th scope="col" class="text-end">Amount</th></tr></thead>
<tbody>
<tr><td>Brand identity refresh</td><td class="text-end">1</td><td class="text-end text-nowrap">£3,200.00</td><td class="text-end text-nowrap">£3,200.00</td></tr>
<tr><td>Website design, 6 pages</td><td class="text-end">6</td><td class="text-end text-nowrap">£450.00</td><td class="text-end text-nowrap">£2,700.00</td></tr>
<tr><td>Copywriting (hours)</td><td class="text-end">12</td><td class="text-end text-nowrap">£65.00</td><td class="text-end text-nowrap">£780.00</td></tr>
</tbody>
<tfoot>
<tr><td colspan="3" class="text-end">Subtotal</td><td class="text-end text-nowrap">£6,680.00</td></tr>
<tr><td colspan="3" class="text-end">VAT 20%</td><td class="text-end text-nowrap">£1,336.00</td></tr>
<tr><td colspan="3" class="text-end">Total due</td><td class="text-end text-nowrap">£8,016.00</td></tr>
</tfoot>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn bm-btn" href="#"><svg aria-hidden="true"><use href="#bm-i-download"/></svg>Download PDF</a>
<button type="button" class="btn bm-btn btn-primary" data-bs-dismiss="modal"><svg aria-hidden="true"><use href="#bm-i-send"/></svg>Send invoice</button>
</div>
</div>
</div>
</div>
<!-- Scrollable body -->
<div class="modal fade bm bm-scroll" id="bm-terms" tabindex="-1" aria-labelledby="bm-terms-title" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<div class="flex-grow-1"><h2 class="modal-title" id="bm-terms-title">Terms of Service</h2><p class="bm-sub">Last updated 1 September 2026</p></div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" tabindex="0" role="region" aria-label="Terms of Service text">
<h3>1. Your account</h3>
<p>You need an account to use Ledgerly. Keep your password private and tell us at once if you think someone else has used it. You are responsible for everything done under your account.</p>
<h3>2. Payments and billing</h3>
<p>Paid plans are billed monthly or yearly in advance. Prices exclude VAT, which we add where the law requires it. If a payment fails we will retry it three times over seven days before pausing your workspace.</p>
<h3>3. Your data</h3>
<p>The invoices, clients and files you add stay yours. We process them only to run the service, keep encrypted backups for 30 days, and export everything to CSV or PDF whenever you ask.</p>
<h3>4. Acceptable use</h3>
<p>Do not use Ledgerly to send spam, to bill for goods you do not supply, or to probe or overload our systems. We may suspend accounts that do, and we will tell you why.</p>
<h3>5. Cancelling</h3>
<p>You can cancel at any time from Settings, Billing. Your plan runs to the end of the period you paid for, and your data stays available to export for 90 days afterwards.</p>
<h3>6. Changes to these terms</h3>
<p>We will email you at least 30 days before a change that affects your rights. If you keep using Ledgerly after that date, the new terms apply.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn bm-btn" data-bs-dismiss="modal">Decline</button>
<button type="button" class="btn bm-btn btn-primary" data-bs-dismiss="modal">Accept terms</button>
</div>
</div>
</div>
</div>
/* Entrance keyframes for the dialog and its backdrop (used through motion-safe:open:animate-[…]) */
@keyframes bm-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes bm-fade { from { opacity: 0; } }
/* Stop the page scrolling behind an open modal */
html:has(dialog:modal) { overflow: hidden; }
JavaScript
// Open a dialog from any button with data-open="dialog-id". showModal() traps focus, closes on Esc
// and makes the page behind inert. Buttons inside <form method="dialog"> close it with no script.
document.querySelectorAll('[data-open]').forEach(function (btn) {
var dialog = document.getElementById(btn.getAttribute('data-open'));
if (!dialog) return;
btn.addEventListener('click', function () {
dialog.showModal();
dialog.addEventListener('close', function () { btn.focus(); }, { once: true }); // focus back to the trigger
});
// A click on the backdrop lands on the <dialog> itself (its form fills the box), so close it
dialog.addEventListener('click', function (e) { if (e.target === dialog) dialog.close(); });
});
About this set
Five everyday modal dialogs for an invoicing app, grouped by what changes between them. Header, body and footer is the default 520px dialog: release notes with an icon, a title and subtitle, a close button, a list of tagged changes and a footer with a secondary link and a primary button. Sizes shows the same parts at three widths: a small 400px session-timeout prompt with stacked buttons, a large 820px keyboard-shortcuts sheet in two columns, and a full-screen invoice preview whose body scrolls between a fixed header and footer. Scrollable body keeps the header and footer in place while long terms of service scroll in between. Use the default for most messages, small for a single decision, large for reference content and full screen for documents on phones. The plain CSS and Tailwind versions use the native dialog element opened with showModal(), which puts the dialog in the top layer, keeps focus inside it, closes it on Esc and makes the page behind inert. Buttons inside a form with method=”dialog” close it without extra code, and a short script opens each dialog from its trigger, closes it on a backdrop click and returns focus to the trigger. The Bootstrap version uses Bootstrap’s Modal plugin with .modal-sm, .modal-lg, .modal-fullscreen and .modal-dialog-scrollable.
What’s included
Default, small, large, full-screen and scrollable-body dialogs
Native dialog with showModal(): focus handling, Esc and an inert page built in
Buttons in a form with method="dialog" close the dialog without extra code
Page scroll locked while open with html:has(:modal)
Bootstrap version restyled through --bs-modal-* and --bs-btn-* variables
Accessibility
Every dialog is labelled by its visible heading through aria-labelledby, and the session prompt also has aria-describedby. Focus moves into the dialog when it opens, the page behind cannot be reached, Esc closes it and focus returns to the button that opened it. Close buttons are named Close, the scrolling terms body is a focusable region so it can be scrolled from the keyboard, every control shows a 2px indigo focus outline, and the entrance animation is removed under prefers-reduced-motion.
Customise it
In plain CSS change the --bm-* custom properties on .bm (accent, ink, muted, line, soft, radius and --bm-w for the width) and the ::backdrop colour. In Bootstrap the look comes from the --bs-modal-* variables on .bm, --bs-btn-* on .bm-btn and --bs-backdrop-* on .modal-backdrop; in Tailwind edit the w-[min(520px,…)], rounded-2xl and hex colour utilities on each dialog.
