/* Custom Elements - Mr. Black: shared styles — inline frames (Carousel) and the modal (appended to ; colors / sizes come from CSS variables set per payload). */ .cemrb-frame { position: relative; width: 100%; max-width: 100%; overflow: hidden; } .cemrb-frame iframe { display: block; width: 100%; border: 0; } /* Branding cover: a solid block over the "Powered by Mr. Black" footer that Mr. Black renders at the bottom of every frame. */ .cemrb-frame__cover, .cemrb-modal__cover { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: auto; } .cemrb-modal__cover[hidden] { display: none !important; } /* Only once the frame has been sized to its content (Mr. Black's frameHeight message) — before that the bottom of the frame is form, not footer. */ .cemrb-frame:not([data-cemrb-sized]) .cemrb-frame__cover, .cemrb-modal:not(.is-sized) .cemrb-modal__cover { display: none !important; } .cemrb-modal { --cemrb-overlay: rgba(0, 0, 0, 0.92); --cemrb-panel: #111111; --cemrb-text: #ffffff; --cemrb-accent: #d4af37; --cemrb-max: 1100px; --cemrb-radius: 16px; --cemrb-iframe-h: 640px; position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; color: var(--cemrb-text); opacity: 0; transition: opacity 0.2s ease; } .cemrb-modal[hidden] { display: none !important; } html.cemrb-lock, html.cemrb-lock body { overflow: hidden !important; } .cemrb-modal.is-open { opacity: 1; } .cemrb-modal *, .cemrb-modal *::before, .cemrb-modal *::after { box-sizing: border-box; } .cemrb-modal [hidden] { display: none !important; } .cemrb-modal__backdrop { position: absolute; inset: 0; background: var(--cemrb-overlay); } .cemrb-modal__dialog { position: relative; width: 100%; max-width: var(--cemrb-max); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: auto; -webkit-overflow-scrolling: touch; background: var(--cemrb-panel); color: var(--cemrb-text); border-radius: var(--cemrb-radius); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); transform: translateY(12px) scale(0.985); transition: transform 0.25s ease; } .cemrb-modal.is-open .cemrb-modal__dialog { transform: none; } .cemrb-modal__close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 36px; height: 36px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; } .cemrb-modal__close:hover { background: rgba(0, 0, 0, 0.85); transform: scale(1.05); } .cemrb-modal__close:focus-visible { outline: 2px solid var(--cemrb-accent); outline-offset: 2px; } /* ---- Body layout ---------------------------------------------------- */ .cemrb-modal__body { display: flex; flex-direction: column; min-height: 0; } .cemrb-modal.is-layout-split.is-mode-full.has-booking .cemrb-modal__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } @media (max-width: 900px) { .cemrb-modal.is-layout-split.is-mode-full.has-booking .cemrb-modal__body { display: flex; } } /* ---- Details -------------------------------------------------------- */ .cemrb-modal__details { min-width: 0; } .cemrb-modal__hero { overflow: hidden; background: rgba(255, 255, 255, 0.04); } .cemrb-modal__hero img { display: block; width: 100%; height: auto; max-height: 46vh; object-fit: cover; } .cemrb-modal.is-layout-split.is-mode-full.has-booking .cemrb-modal__hero img { max-height: 340px; } .cemrb-modal__content { padding: 28px 32px 32px; } .cemrb-modal .cemrb-modal__title { margin: 0 0 8px; padding: 0; font-family: var(--cemrb-title-font, inherit); font-size: var(--cemrb-title-size, clamp(22px, 3vw, 32px)); font-weight: var(--cemrb-title-weight, 700); font-style: var(--cemrb-title-style, normal); line-height: var(--cemrb-title-lh, 1.15); letter-spacing: var(--cemrb-title-ls, normal); text-transform: var(--cemrb-title-transform, none); text-decoration-line: var(--cemrb-title-decoration, none); color: var(--cemrb-text); } .cemrb-modal .cemrb-modal__price { margin: 0 0 18px; font-family: var(--cemrb-price-font, inherit); font-size: var(--cemrb-price-size, 20px); font-weight: var(--cemrb-price-weight, 600); font-style: var(--cemrb-price-style, normal); line-height: var(--cemrb-price-lh, 1.3); letter-spacing: var(--cemrb-price-ls, 0.02em); text-transform: var(--cemrb-price-transform, none); color: var(--cemrb-accent); } .cemrb-modal .cemrb-modal__desc, .cemrb-modal .cemrb-modal__features { font-family: var(--cemrb-text-font, inherit); font-weight: var(--cemrb-text-weight, 400); font-style: var(--cemrb-text-style, normal); letter-spacing: var(--cemrb-text-ls, normal); text-transform: var(--cemrb-text-transform, none); } .cemrb-modal .cemrb-modal__desc { font-size: var(--cemrb-text-size, 15px); line-height: var(--cemrb-text-lh, 1.65); opacity: 0.92; } .cemrb-modal .cemrb-modal__desc p { margin: 0 0 12px; } .cemrb-modal .cemrb-modal__desc p:last-child { margin-bottom: 0; } .cemrb-modal__features { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; } .cemrb-modal .cemrb-modal__features li { position: relative; padding-left: 24px; font-size: var(--cemrb-text-size, 15px); line-height: var(--cemrb-text-lh, 1.5); } .cemrb-modal__features li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 12px; height: 7px; border-left: 2px solid var(--cemrb-accent); border-bottom: 2px solid var(--cemrb-accent); transform: rotate(-45deg); } /* ---- Booking frame -------------------------------------------------- */ .cemrb-modal__booking { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 28px 32px 32px; } .cemrb-modal.is-layout-split.is-mode-full.has-booking .cemrb-modal__booking { position: sticky; top: 0; padding-right: 64px; /* room for the close button */ border-left: 1px solid rgba(255, 255, 255, 0.08); min-height: 100%; } .cemrb-modal.is-layout-stacked .cemrb-modal__booking, .cemrb-modal.is-mode-full:not(.has-booking) .cemrb-modal__booking { border-top: 1px solid rgba(255, 255, 255, 0.08); } @media (max-width: 900px) { .cemrb-modal.is-layout-split.is-mode-full.has-booking .cemrb-modal__booking { position: static; padding-right: 32px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); } } .cemrb-modal .cemrb-modal__booking-label { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; } .cemrb-modal__frame { position: relative; flex: 1 1 auto; min-height: var(--cemrb-iframe-h); border-radius: calc(var(--cemrb-radius) * 0.6); overflow: hidden; background: #fff; } .cemrb-modal__frame iframe { display: block; width: 100%; height: 100%; min-height: var(--cemrb-iframe-h); border: 0; background: #fff; } .cemrb-modal .cemrb-modal__fallback, .cemrb-modal .cemrb-modal__fallback:hover { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--cemrb-text); opacity: 0.7; text-decoration: underline; } .cemrb-modal .cemrb-modal__fallback:hover { opacity: 1; } /* Loading spinner over the frame until the booking page paints. */ .cemrb-modal__spinner { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: #fff; } .cemrb-modal__spinner::after { content: ''; width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(0, 0, 0, 0.12); border-top-color: var(--cemrb-accent); animation: cemrb-spin 0.8s linear infinite; } .cemrb-modal.is-loading .cemrb-modal__spinner { display: flex; } @keyframes cemrb-spin { to { transform: rotate(360deg); } } /* ---- Booking-only mode / expanded: the frame takes the whole modal ---- */ .cemrb-modal.is-mode-booking, .cemrb-modal.is-expanded { padding: 0; } .cemrb-modal.is-mode-booking .cemrb-modal__dialog, .cemrb-modal.is-expanded .cemrb-modal__dialog { max-width: none; width: 100%; height: 90%; max-height: none; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; } .cemrb-modal.is-expanded .cemrb-modal__details { display: none !important; } .cemrb-modal.is-mode-booking .cemrb-modal__body, .cemrb-modal.is-expanded .cemrb-modal__body { display: block; height: 100%; } .cemrb-modal.is-mode-booking .cemrb-modal__booking, .cemrb-modal.is-expanded .cemrb-modal__booking { position: static; height: 100%; padding: 0; border: 0; } .cemrb-modal.is-mode-booking .cemrb-modal__booking-label, .cemrb-modal.is-expanded .cemrb-modal__booking-label, .cemrb-modal.is-mode-booking .cemrb-modal__fallback, .cemrb-modal.is-expanded .cemrb-modal__fallback { display: none !important; } .cemrb-modal.is-mode-booking .cemrb-modal__cover, .cemrb-modal.is-expanded .cemrb-modal__cover { display: none !important; } .cemrb-modal.is-mode-booking .cemrb-modal__frame, .cemrb-modal.is-expanded .cemrb-modal__frame { height: 100%; min-height: 0; border-radius: 0; background: #000; /* Mr. Black's own snippet sizes its frame to 95% / 575px — match it so their booking UI lays out as designed. */ width: 95%; margin: 0 auto; } @media (min-width: 640px) { .cemrb-modal.is-mode-booking .cemrb-modal__frame, .cemrb-modal.is-expanded .cemrb-modal__frame { width: 575px; } } .cemrb-modal.is-mode-booking .cemrb-modal__frame iframe, .cemrb-modal.is-expanded .cemrb-modal__frame iframe { height: 100%; min-height: 0; } .cemrb-modal.is-mode-booking .cemrb-modal__close, .cemrb-modal.is-expanded .cemrb-modal__close { top: 20px; right: 44px; background: #000; border-color: #4e4e4e; } @media (max-width: 640px) { .cemrb-modal { padding: 0; } .cemrb-modal__dialog { max-height: 100vh; max-height: 100dvh; border-radius: 0; } .cemrb-modal__content, .cemrb-modal__booking { padding: 22px 20px 24px; } .cemrb-modal.is-mode-booking .cemrb-modal__close, .cemrb-modal.is-expanded .cemrb-modal__close { right: 16px; } } @media (prefers-reduced-motion: reduce) { .cemrb-modal, .cemrb-modal__dialog { transition: none; } }