/* ============================================================================= Destinito guest nudge card. Colours, radii and typography come from the guest theme's existing custom properties (--iig-*, defined in theme-destinito.css). No new palette is introduced here; the fallbacks in each var() are the same values that file defines, present only so the card still renders correctly if it is ever loaded on a surface that has not pulled the theme in. Positioning is fixed and the element is the LAST child of , so it participates in no layout: nothing on the page moves when it is injected and it contributes no cumulative layout shift. There is no backdrop and no pointer-events blocker — the page stays fully scrollable and clickable behind the card at all times, which is the whole difference between this and the interstitial modals that were removed. z-index sits BELOW the consent banner (10050) on purpose: if the two ever coincide the banner must win, and nudge.js already refuses to show while the banner is up. ========================================================================== */ .dn-nudge { position: fixed; z-index: 10040; display: flex; align-items: flex-start; gap: 8px; background: var(--iig-bg, #ffffff); color: var(--iig-text, #1a1a2e); border: 1px solid var(--iig-gray-200, #e5e7eb); border-radius: var(--iig-radius-lg, 12px); box-shadow: var(--iig-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1)); font-family: var(--iig-font, 'Inter', system-ui, -apple-system, sans-serif); padding: 16px; /* Desktop: bottom-right card, slid off to the right until shown. */ right: 24px; bottom: 24px; max-width: 360px; width: calc(100vw - 48px); transform: translateX(calc(100% + 24px)); opacity: 0; transition: transform 250ms ease, opacity 250ms ease; } .dn-nudge--visible { transform: translateX(0); opacity: 1; } .dn-nudge__content { flex: 1 1 auto; min-width: 0; } .dn-nudge__label { margin: 0 0 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--iig-accent-dark, #cc6600); } .dn-nudge__title { margin: 0 0 6px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--iig-primary, #003366); } .dn-nudge__body { margin: 0; font-size: 14px; line-height: 1.45; color: var(--iig-text-muted, #6b7280); /* Hard cap at three lines. The column allows 300 characters and an operator who fills it should get an ellipsis, not a card that grows to cover a phone screen. */ display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .dn-nudge__cta { display: inline-block; margin-top: 12px; padding: 9px 16px; background: var(--iig-primary, #003366); color: #ffffff; border-radius: var(--iig-radius-md, 8px); font-size: 14px; font-weight: 600; text-decoration: none; } .dn-nudge__cta:hover, .dn-nudge__cta:focus { background: var(--iig-primary-light, #004d99); color: #ffffff; } /* Always visible — never a hover-reveal. The way out of a message has to be as obvious as the message. 40x40 meets the minimum comfortable tap target; the glyph is smaller than the button so the target is not visually heavy. */ .dn-nudge__close { flex: 0 0 auto; width: 40px; height: 40px; margin: -8px -8px 0 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: var(--iig-radius-full, 9999px); color: var(--iig-text-light, #9ca3af); font-size: 22px; line-height: 1; cursor: pointer; } .dn-nudge__close:hover, .dn-nudge__close:focus { background: var(--iig-gray-100, #f3f4f6); color: var(--iig-text, #1a1a2e); } .dn-nudge :focus-visible { outline: 2px solid var(--iig-accent, #ff7f0e); outline-offset: 2px; } /* ── Mobile: full-width toast anchored to the bottom, sliding up ─────────── */ @media (max-width: 767px) { .dn-nudge { right: 0; left: 0; bottom: 0; max-width: none; width: auto; border-radius: var(--iig-radius-lg, 12px) var(--iig-radius-lg, 12px) 0 0; border-left: 0; border-right: 0; border-bottom: 0; /* The home-indicator strip on modern iPhones sits inside the viewport; without this the ✕ and the CTA end up underneath it. */ padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); } .dn-nudge--visible { transform: translateY(0); } } /* Respect a reduced-motion preference: the card still appears and still disappears, it just does not travel. */ @media (prefers-reduced-motion: reduce) { .dn-nudge { transition: opacity 250ms ease; transform: none; } .dn-nudge--visible { transform: none; } }