/* Shared modal shell — newsletter signup and the homepage shop. Used by index.html, shop.html and tour.html. Assumes the host page defines 'EB Garamond' and a light-on-dark palette. */ .modal[hidden] { display: none; } .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; } .modal-backdrop { position: absolute; inset: 0; background: rgba(24, 10, 28, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: modal-fade 0.22s ease-out; } .modal-panel { position: relative; z-index: 1; display: flex; flex-direction: column; /* Set explicitly rather than inherited: index.html declares no colour on , so anything in here would otherwise fall back to the browser default black and be unreadable on the dark panel. */ color: #fff; width: min(92vw, 560px); max-height: 88vh; background: rgba(34, 16, 38, 0.9); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; backdrop-filter: blur(20px) saturate(1.1); -webkit-backdrop-filter: blur(20px) saturate(1.1); box-shadow: 0 24px 70px rgba(24, 10, 28, 0.55); animation: modal-rise 0.24s ease-out; } /* The newsletter form is an iframe that sizes to its container, so that variant needs a real height rather than shrink-to-fit. */ .modal-panel.is-frame { height: min(78vh, 620px); } @keyframes modal-fade { from { opacity: 0 } to { opacity: 1 } } @keyframes modal-rise { from { opacity: 0; transform: translateY(10px) scale(0.99) } to { opacity: 1; transform: none } } @media (prefers-reduced-motion: reduce) { .modal-backdrop, .modal-panel { animation: none; } } .modal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.35rem 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .modal-title { margin: 0; font-family: inherit; font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 400; letter-spacing: 0.03em; text-transform: lowercase; color: #fff; } button.modal-close { flex-shrink: 0; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; font: inherit; font-size: 1.35rem; line-height: 1; color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 100px; cursor: pointer; opacity: 0.8; transition: opacity 0.2s, background 0.2s; } button.modal-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); } button.modal-close:focus-visible, .modal a:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: 2px; } .modal-body { flex: 1 1 auto; min-height: 0; /* lets the iframe shrink inside flex */ overflow-y: auto; padding: 1.1rem 1.35rem 1.35rem; } /* The signup iframe fills the panel edge-to-edge, no padding of its own */ .modal-body.is-frame { padding: 0; overflow: hidden; } .modal-body.is-frame iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 0 0 8px 8px; } .modal-note { margin-top: 0.9rem; font-size: 0.82rem; letter-spacing: 0.03em; line-height: 1.6; text-align: center; opacity: 0.72; color: #fff; } .modal-note a { color: #fff; text-decoration: underline; text-underline-offset: 2px; } /* Loading / failure states for lazily-injected third-party embeds */ .modal-status { padding: 2.5rem 1rem; text-align: center; font-size: 0.95rem; letter-spacing: 0.03em; opacity: 0.7; color: #fff; } .modal-status a { color: #fff; text-decoration: underline; text-underline-offset: 2px; } /* Stop the page behind the modal from scrolling while it's open */ body.modal-open { overflow: hidden; } /* Nav/hero entries that open a modal are buttons, not links — strip the default button chrome so they match the surrounding anchors exactly. */ button.as-link { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }