To style an offer itself, you can navigate to Manage → Templates → Offer and create or edit a template. Then, within the Show Offer card in Composer, you should select that template when prompted. This works for applying styles to your offer itself, including how the terms are displayed, any text that is included, spacing, images, etc.
However, when you are displaying an Offer modal, the "Close" button and the backdrop are not part of the Offer itself, and therefore cannot be styled within a template. Instead, to customize these components, you will have to include the necessary CSS on your end and override the default styles that Piano applies to these elements. To do so, you should call out the appropriate CSS selectors on the parent page of your content. To modify the close button, you should call out the following CSS selector:
.tp-modal .tp-close {\n border-color: #f00;\n}
To modify the backdrop that covers your content when a modal appears, you should call out the following CSS selector:
.tp-backdrop.tp-active {\n opacity: .5;\n}
You can modify more than simply the border color and opacity of these two elements by adding or substituting other properties, so don't hesitate to adjust the styles here to optimize your UI.
In general, you cannot reposition the modal using the Piano template's CSS. This is due to the fact that the class name that controls the position of the modal (.tp-iframe-wrapper) is at a much higher level than our templates have control over.
An alternative would be declaring a new position within your site's global CSS. By doing so, you could override the current settings with your own, however, it would affect all modals unless you specify it on a page by page basis.
Handling overscroll prevention on mobile devices
When a modal is displayed, Piano automatically applies the tp-modal-overscroll-prevented class to prevent the background page from scrolling behind the modal. This behavior is especially important on mobile browsers (such as Safari on iOS), where touch gestures might otherwise scroll the underlying page while the modal is open.
In some cases (particularly on mobile) this class can cause a visual issue where the background behind the modal appears grey or obscured after the user scrolls. To resolve this, you can override the z-index of the overscroll prevention layer in your site's global stylesheet or in the template's custom CSS:
.tp-modal .tp-modal-overscroll-prevented {\n z-index: 0 !important;\n}
The !important declaration is required to override Piano's default inline styles. This resets the stacking order of the overscroll layer so it no longer covers your page content.
If you need to override scroll-related behavior more broadly (for example, if a modal is leaving scroll locked after being closed), you can also target the following classes on the <body> element:
.tp-scroll-prevented {\n height: unset !important;\n overflow: auto !important;\n touch-action: auto !important;\n}\n.tp-body-scroll-prevented {\n touch-action: auto !important;\n}
The tp-body-scroll-prevented class also sets the page background to a dark overlay (rgba(18, 18, 20, 0.9)) on the <body> tag. This is intentional, it masks visual artifacts during scroll on iOS. If this conflicts with your site's design, you can override the background-color property, but keep in mind it may affect the user experience on iOS devices.