/* Recipe Modal */ .recipe-modal[hidden] { display: none; } .recipe-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; } .recipe-modal-backdrop { position: absolute; inset: 0; background: rgba(35, 32, 29, 0.45); } .recipe-modal-dialog { position: relative; display: flex; background: var(--surface); border-radius: 14px; width: 100%; max-width: 840px; /* dvh: mobile browsers resolve vh against the URL-bar-hidden viewport, which pushes the bottom of the dialog under the browser chrome. */ max-height: 88vh; max-height: 88dvh; /* Capped so the floor can never exceed the ceiling on short viewports. */ min-height: min(340px, 88vh); min-height: min(340px, 88dvh); overflow: hidden; box-shadow: 0 30px 70px rgba(35, 32, 29, 0.25); animation: modalIn 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); } @keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } } .recipe-modal-image { flex: 0 0 42%; width: 42%; align-self: stretch; object-fit: cover; background: #f3ede5; display: block; } .recipe-modal-body { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 30px 32px 34px; } .recipe-modal-body h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.7rem; line-height: 1.25; margin: 0 0 4px; padding-right: 32px; } .recipe-modal-body .tags { margin: 0 0 16px; } .recipe-description { margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6; } .recipe-description b { color: var(--ink); font-weight: 600; } .recipe-steps[hidden] { display: none; } /* The divider sits on the steps rather than under the description so it disappears with them on dishes that have no instructions yet. */ .recipe-steps { margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); list-style: none; counter-reset: step; } .recipe-steps li { counter-increment: step; position: relative; padding-left: 38px; margin-bottom: 16px; color: #4a443e; font-size: 0.95rem; } .recipe-steps li:last-child { margin-bottom: 0; } .recipe-steps li::before { content: counter(step); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: #f3ece3; color: var(--accent); font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; justify-content: center; } .recipe-steps li b { color: var(--ink); font-weight: 600; } .recipe-modal-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(35, 32, 29, 0.15); transition: transform 0.2s ease; z-index: 1; } .recipe-modal-close:hover { transform: scale(1.08); } .recipe-modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Pinned rather than just `overflow: hidden`, which iOS Safari ignores on . js/modal.js holds the scroll offset in the `top` inline style. */ body.modal-open { position: fixed; left: 0; right: 0; overflow: hidden; } /* Stack the layout on narrow screens */ @media (max-width: 720px) { .recipe-modal-dialog { flex-direction: column; } .recipe-modal-image { flex: none; width: 100%; /* Scales with the viewport so the recipe keeps room on short screens, instead of a fixed height that eats half the sheet. */ height: clamp(120px, 28vh, 230px); height: clamp(120px, 28dvh, 230px); } .recipe-modal-body { padding: 22px; } .recipe-modal-body h2 { font-size: 1.4rem; } }