dialog::backdrop { background-image: linear-gradient( 45deg, magenta, rebeccapurple, dodgerblue, green ); opacity: 0.75; } /* A modal locks the page scroll, whatever closes it (button, Esc, backdrop, Turbo cache). On , never on : body has height: 100% (root.css), so locking it cuts the page to one screen and resets the scroll to the top. */ html:has(dialog:modal) { overflow: hidden; } .modal-dialog { max-width: 600px; margin: auto; padding: 0; text-align: center; background-color: var(--white-blue); border-radius: 2rem; } .modal-header { user-select: none; position: relative; padding: 1rem 6rem; background: var(--bg-radial-circle); font-family: var(--font-title); color: var(--blue-dark); border-top-left-radius: 2rem; border-top-right-radius: 2rem; } .modal-title { font-size: 2.4rem; font-weight: 700; } .modal-close { cursor: pointer; position: absolute; top: 0; right: 1rem; font-size: 6rem; line-height: 0.85; border: none; } .modal-body { padding: 2rem 1.25rem 3rem; border-bottom-left-radius: 2rem; border-bottom-right-radius: 2rem; }