/* ============================================================ Denzl — dialog.css ------------------------------------------------------------ The one confirm / alert / prompt surface for the whole site. Replaces window.confirm / window.alert / window.prompt, whose Chrome-on-Android rendering ("denzl.co says…", blue system links, OS-grey sheet) reads as a browser artefact rather than as Denzl. Loaded on every page: consumer surfaces via base.html , admin surfaces via partials/admin_header.html (admin templates carry their own and do not extend base.html). Tokens are declared locally rather than pulled from app-shell.css: admin pages never load that stylesheet, and a dialog that looks different in admin than it does on /wardrobe is the problem this file exists to end. Values track the design-language B&W chrome (docs/brand/design-language.md). ============================================================ */ /* Own the box model rather than inheriting the host page's reset — the admin shell, the standalone Read pages and base.html each bring a different one. */ .dz-dialog, .dz-dialog *, .dz-dialog *::before, .dz-dialog *::after { box-sizing: border-box; } .dz-dialog { position: fixed; inset: 0; z-index: 2000; /* above the wardrobe editor (60) and the app drawer */ display: flex; align-items: center; justify-content: center; padding: 20px; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; } .dz-dialog[hidden] { display: none; } .dz-dialog-backdrop { position: absolute; inset: 0; background: rgba(26, 26, 26, 0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: dz-fade 140ms ease-out; } .dz-dialog-sheet { position: relative; z-index: 1; width: 100%; max-width: 380px; max-height: calc(100vh - 40px); overflow-y: auto; background: #FFFFFF; border-radius: 14px; padding: 22px 22px 18px; box-shadow: 0 18px 48px rgba(26, 26, 26, 0.22); animation: dz-rise 160ms cubic-bezier(0.2, 0.8, 0.3, 1); } /* Eyebrow — the same uppercase micro-label the rest of the shell uses to name a surface. Carries the tone (Confirm / Heads up / Careful) so the title never has to spend words on it. */ .dz-dialog-eyebrow { margin: 0 0 10px; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #888888; } .dz-dialog--danger .dz-dialog-eyebrow { color: #A33; } .dz-dialog-title { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 700; color: #1A1A1A; letter-spacing: -0.1px; } .dz-dialog-body { margin: 9px 0 0; font-size: 13.5px; line-height: 1.55; color: #555555; /* Copy handed in with \n\n paragraph breaks keeps them without the caller having to build markup. */ white-space: pre-line; } .dz-dialog-body[hidden] { display: none; } /* Collapsed fine print (DEN-1903). The summary reads like a quiet link; the open state adds the paragraph in the body's voice, nothing louder. */ .dz-dialog-details { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: #555555; } .dz-dialog-details summary { cursor: pointer; list-style: none; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #888888; } .dz-dialog-details summary::-webkit-details-marker { display: none; } .dz-dialog-details summary::before { content: "▸ "; } .dz-dialog-details[open] summary::before { content: "▾ "; } .dz-dialog-details summary:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 2px; } .dz-dialog-details p { margin: 8px 0 0; white-space: pre-line; } /* ----- typed confirmation / value entry ----- */ .dz-dialog-field { display: block; width: 100%; margin-top: 16px; padding: 11px 12px; font-family: inherit; font-size: 14px; color: #1A1A1A; background: #FFFFFF; border: 1px solid #E8E8E8; border-radius: 8px; -webkit-appearance: none; appearance: none; } .dz-dialog-field:focus { outline: none; border-color: #1A1A1A; } .dz-dialog-field[hidden] { display: none; } .dz-dialog-field::placeholder { color: #C0C0C0; } /* ----- actions ----- */ .dz-dialog-actions { display: flex; gap: 10px; margin-top: 20px; } .dz-dialog-btn { flex: 1 1 0; min-height: 44px; /* thumb target — WCAG 2.5.5 / DEN-137 rhythm */ padding: 11px 14px; font-family: inherit; font-size: 14px; font-weight: 600; border-radius: 8px; border: 1px solid #E8E8E8; background: #FFFFFF; color: #333333; cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease; } .dz-dialog-btn:hover { border-color: #1A1A1A; color: #1A1A1A; } .dz-dialog-btn:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 2px; } .dz-dialog-btn:disabled { opacity: 0.45; cursor: default; border-color: #E8E8E8; color: #888888; } /* Solid ink = the action we expect you to take. On a destructive dialog that is deliberately the SAFE one: the way out is the fat button, and the irreversible action is the quiet outlined one beside it. */ .dz-dialog-btn--primary { background: #1A1A1A; border-color: #1A1A1A; color: #FFFFFF; } .dz-dialog-btn--primary:hover { background: #333333; border-color: #333333; color: #FFFFFF; } .dz-dialog-btn--primary:disabled { background: #C0C0C0; border-color: #C0C0C0; color: #FFFFFF; opacity: 1; } /* Destructive: red is a functional state marker here, used as outline + label only — never as a filled accent (design-language "state colors"). */ .dz-dialog-btn--danger { background: #FFFFFF; border-color: #E3C3C3; color: #A33; } .dz-dialog-btn--danger:hover { background: #FFF7F7; border-color: #A33; color: #A33; } .dz-dialog-btn--danger:focus-visible { outline-color: #A33; } /* An alert has one way out, so its button spans the sheet — the same shape the button takes on a phone, and nothing to aim at. */ .dz-dialog-actions--single .dz-dialog-btn { flex: 1 1 auto; } /* ----- phone: bottom sheet ----- Centred sheets sit above the thumb on a phone. Below 520px the dialog anchors to the bottom edge and slides up, which is where the hand already is and matches the native sheet idiom the app shell uses elsewhere. */ @media (max-width: 520px) { .dz-dialog { align-items: flex-end; padding: 0; } .dz-dialog-sheet { max-width: none; border-radius: 18px 18px 0 0; /* NOT the token: dialog.css is linked by admin_header.html -> dialog_assets.html on admin pages, which do NOT load app-shell.css, so --dz-safe-bottom is undefined there and a `, 0px` fallback would silently drop the iOS home-indicator clearance this rule exists for (DEN-1987). Inline the two-source max(), exactly as a standalone-head page must. */ padding: 22px 20px calc(20px + max(env(safe-area-inset-bottom), var(--dz-inset-bottom, 0px))); animation: dz-slide-up 200ms cubic-bezier(0.2, 0.8, 0.3, 1); } .dz-dialog-actions { flex-direction: column-reverse; gap: 8px; } /* One button, so no reverse — nothing to re-order. */ .dz-dialog-actions--single { flex-direction: column; } } @keyframes dz-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes dz-rise { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes dz-slide-up { from { transform: translateY(100%); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { .dz-dialog-backdrop, .dz-dialog-sheet { animation: none; } }