/** * mod_rimnow_ads â€” shared stylesheet (loaded once regardless of how many * module instances are on the page â€” see mod_rimnow_ads.php's define() * guard). Self-contained: does not read or depend on the active * template's own CSS custom properties, only on the site-wide * data-theme="dark" attribute / dir="rtl" attribute it already sets on * , so this file works under any template. * * Logical properties (inset-inline-*, margin-inline, etc.) are used * throughout instead of left/right so RTL is automatic, not a special case. */ .mod-rimnow-ads { --ra-surface: #ffffff; --ra-ink: #111827; --ra-shadow: 0 12px 34px rgba(15, 23, 42, .22); --ra-close-bg: rgba(17, 24, 39, .55); --ra-close-ink: #ffffff; --ra-accent: #0d9488; box-sizing: border-box; } .mod-rimnow-ads *, .mod-rimnow-ads *::before, .mod-rimnow-ads *::after { box-sizing: border-box; } :root[data-theme="dark"] .mod-rimnow-ads { --ra-surface: #1f2937; --ra-ink: #f1f5f9; --ra-shadow: 0 12px 34px rgba(0, 0, 0, .45); } /* Belt-and-braces: the `hidden` attribute already removes these from the render tree in every browser; this just guarantees it can never be fought by a more specific rule added later. */ .mod-rimnow-ads[hidden] { display: none !important; } /* Small "Ad" label reused by Video and Notification. Popup/Sticky do not use it and are unaffected by its existence. */ .mod-rimnow-ads__label { display: inline-block; font-size: 10.5px; /* font-weight: 700; */ letter-spacing: .03em; text-transform: uppercase; opacity: .65; margin-block-end: 2px; } /* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ Popup / Interstitial â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */ .mod-rimnow-ads--popup { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .22s ease; } .mod-rimnow-ads--popup.is-visible { opacity: 1; } @media (prefers-reduced-motion: reduce) { .mod-rimnow-ads--popup { transition: none; } } .mod-rimnow-ads__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .mod-rimnow-ads__dialog { position: relative; z-index: 1; outline: none; } /* Centered variant: card with generous top margin reserved so the close button sits above the image, never on top of it. */ .mod-rimnow-ads--centered .mod-rimnow-ads__dialog { max-width: min(92vw, 560px); max-height: 86vh; margin-block-start: 44px; padding-block-start: 44px; background: var(--ra-surface); border-radius: 14px; box-shadow: var(--ra-shadow); display: flex; flex-direction: column; align-items: center; overflow: hidden; } .mod-rimnow-ads--centered .mod-rimnow-ads__img { display: block; max-width: 100%; max-height: calc(86vh - 44px); width: auto; height: auto; object-fit: contain; border-radius: 0 0 14px 14px; } .mod-rimnow-ads--centered .mod-rimnow-ads__close { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; } .mod-rimnow-ads--centered .mod-rimnow-ads__countdown { position: absolute; inset-block-start: 10px; inset-inline-start: 14px; } /* Fullscreen variant: image fills the viewport, letterboxed to keep its aspect ratio (never stretched/cropped). Close button floats at a corner â€” unavoidable on a true fullscreen layout, kept small and clearly legible over any image via its own opaque backing. */ .mod-rimnow-ads--fullscreen .mod-rimnow-ads__dialog { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background: #000; } .mod-rimnow-ads--fullscreen .mod-rimnow-ads__img { max-width: 100vw; max-height: 100vh; width: auto; height: auto; object-fit: contain; } .mod-rimnow-ads--fullscreen .mod-rimnow-ads__close { position: fixed; inset-block-start: 14px; inset-inline-end: 14px; } .mod-rimnow-ads--fullscreen .mod-rimnow-ads__countdown { position: fixed; inset-block-start: 18px; inset-inline-start: 18px; } .mod-rimnow-ads__link { display: block; line-height: 0; } .mod-rimnow-ads__close { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--ra-close-bg); color: var(--ra-close-ink); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .15s ease, opacity .15s ease; } .mod-rimnow-ads__close:hover { transform: scale(1.06); } .mod-rimnow-ads__close[disabled] { opacity: .45; cursor: not-allowed; transform: none; } @media (prefers-reduced-motion: reduce) { .mod-rimnow-ads__close { transition: none; } .mod-rimnow-ads__close:hover { transform: none; } } .mod-rimnow-ads__countdown { min-width: 26px; padding: 4px 10px; border-radius: 999px; background: rgba(17, 24, 39, .55); color: #fff; font: 600 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif; text-align: center; /* Isolates the digits from surrounding bidi context WITHOUT forcing a direction on this box â€” forcing direction here previously flipped this element's OWN inset-inline-start/end resolution too (logical inset properties resolve against the box's own direction, not the page's), which made it drift onto the same side as the close button in RTL instead of the opposite one. */ unicode-bidi: isolate; } .mod-rimnow-ads__countdown:empty { display: none; } /* Locks page scroll while a Popup/Fullscreen instance is visible only â€” toggled and reverted unconditionally by ads.js. */ html.rimnow-ads-scroll-lock { overflow: hidden; } /* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ Sticky Bottom â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */ .mod-rimnow-ads--sticky { position: fixed; inset-inline: 0; bottom: 0; z-index: 950; max-height: 96px; background: var(--ra-surface); box-shadow: 0 -6px 20px rgba(15, 23, 42, .18); display: flex; align-items: center; gap: 8px; padding: 6px 10px; padding-inline-end: calc(10px + env(safe-area-inset-right, 0px)); padding-inline-start: calc(10px + env(safe-area-inset-left, 0px)); padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); } @media (max-width: 480px) { .mod-rimnow-ads--sticky { max-height: 76px; padding: 5px 8px; padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px)); } } .mod-rimnow-ads--sticky .mod-rimnow-ads__link { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; } .mod-rimnow-ads--sticky .mod-rimnow-ads__img { display: block; max-width: 100%; max-height: calc(96px - 12px); width: auto; height: auto; object-fit: contain; border-radius: 6px; } @media (max-width: 480px) { .mod-rimnow-ads--sticky .mod-rimnow-ads__img { max-height: calc(76px - 10px); } } .mod-rimnow-ads--sticky .mod-rimnow-ads__close { flex: 0 0 auto; width: 28px; height: 28px; font-size: 16px; } /* Space reserved at the bottom of the page while the bar is visible â€” set/cleared immediately by ads.js, never left stale after a close. */ body.rimnow-ads-has-sticky { padding-bottom: var(--rimnow-ads-sticky-h, 0px); } /* rimnow_light's own floating scroll-to-bottom button (.scroll-step-btn) is lifted by the same amount so the two never overlap â€” added here only, the template file itself is untouched. Inert (matches nothing) on any page/template without that button. rimnow_light sets two different baseline offsets for this button â€” 124px on desktop, 237px at its own <=768px breakpoint (extra bottom chrome on narrow screens) â€” so this shim mirrors that same breakpoint to add on top of the CORRECT baseline for the current viewport rather than assuming the desktop one always applies. If the template's own 124px/237px values ever change, these two numbers need updating too. */ body.rimnow-ads-has-sticky .scroll-step-btn { bottom: calc(124px + var(--rimnow-ads-sticky-h, 0px)); } @media (max-width: 768px) { body.rimnow-ads-has-sticky .scroll-step-btn { bottom: calc(237px + var(--rimnow-ads-sticky-h, 0px)); } } /* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ Video Ad â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */ /* Normal in-flow content â€” not an overlay, never `hidden`. Only the heavy asset (video src/poster) is lazy-activated by ads.js; the block itself renders immediately wherever its module position places it. */ .mod-rimnow-ads--video { max-width: 100%; } .mod-rimnow-ads__video-wrap { position: relative; max-width: 100%; line-height: 0; } .mod-rimnow-ads__video { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 10px; background: #000; } .mod-rimnow-ads__label--video { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; z-index: 1; background: rgba(17, 24, 39, .6); color: #fff; padding: 2px 9px; border-radius: 999px; opacity: 1; line-height: 1.6; } .mod-rimnow-ads__video-cta { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; z-index: 1; background: var(--ra-accent); color: #fff; padding: 8px 18px; border-radius: 999px; font: 600 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif; text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transition: transform .15s ease; } .mod-rimnow-ads__video-cta:hover { transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .mod-rimnow-ads__video-cta { transition: none; } .mod-rimnow-ads__video-cta:hover { transform: none; } } @media (max-width: 480px) { .mod-rimnow-ads__video-cta { inset-block-end: 8px; inset-inline-end: 8px; padding: 6px 14px; font-size: 12px; } } /* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ Notification â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */ .mod-rimnow-ads--notification { --ra-notif-grad: linear-gradient(135deg, #b30505 0%, #830808 55%, #a5160c 100%); --ra-notif-ink: #f8fafc; --ra-notif-ink-soft: rgba(248, 250, 252, .82); --ra-notif-accent: #2dd4bf; --ra-notif-badge-bg: rgba(255, 255, 255, .16); --ra-notif-border: rgba(255, 255, 255, .1); --ra-notif-track-bg: rgba(255, 255, 255, .18); --ra-close-bg: rgba(255, 255, 255, .16); --ra-close-ink: #ffffff; position: fixed; z-index: 9500; display: flex; align-items: flex-start; gap: 12px; /* extra bottom padding reserves room for the bottom-left "Ad" badge and the progress bar, both absolutely positioned below the flow */ padding: 16px 18px 36px; background: var(--ra-notif-grad); color: var(--ra-notif-ink); border: 1px solid var(--ra-notif-border); border-radius: 20px; box-shadow: 0 20px 45px -12px rgba(0, 0, 0, .5), 0 8px 20px rgba(0, 0, 0, .3); opacity: 0; transform: translateY(18px); transition: opacity .32s cubic-bezier(.16, 1, .3, 1), transform .32s cubic-bezier(.16, 1, .3, 1); } .mod-rimnow-ads--notification.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .mod-rimnow-ads--notification { transition: opacity .01s linear; transform: none; } } :root[data-theme="dark"] .mod-rimnow-ads--notification { --ra-notif-border: rgba(255, 255, 255, .14); box-shadow: 0 20px 45px -12px rgba(0, 0, 0, .7), 0 8px 20px rgba(0, 0, 0, .45); } .mod-rimnow-ads--notification-right { inset-block-end: 18px; right: 18px; max-width: 380px; } .mod-rimnow-ads--notification-left { inset-block-end: 18px; left: 18px; max-width: 380px; } .mod-rimnow-ads--notification-bottom { inset-block-end: 18px; left: 50%; max-width: min(92vw, 440px); transform: translate(-50%, 18px); } .mod-rimnow-ads--notification-bottom.is-visible { transform: translate(-50%, 0); } /* On small screens every position becomes a bottom-anchored, near-full- width card â€” a corner toast is cramped and easy to miss on a phone. This is the "Bottom is the effective default on mobile" behavior, enforced responsively rather than only as a settings default. Fixed 12px insets (not a max-width) so width is always exactly calc(100vw - 24px), centered, with a small constant side margin at every phone size instead of a percentage that grows on wider phones. */ @media (max-width: 480px) { .mod-rimnow-ads--notification-right, .mod-rimnow-ads--notification-left, .mod-rimnow-ads--notification-bottom { left: 12px; right: 12px; max-width: none; transform: translateY(18px); } .mod-rimnow-ads--notification-right.is-visible, .mod-rimnow-ads--notification-left.is-visible, .mod-rimnow-ads--notification-bottom.is-visible { transform: translateY(0); } } /* If a Sticky Bottom instance is ALSO active on the same page, reuse its already-tracked height so a bottom-anchored Notification never overlaps it â€” the same --rimnow-ads-sticky-h variable the scroll-step-btn shim above already relies on. */ body.rimnow-ads-has-sticky .mod-rimnow-ads--notification { inset-block-end: calc(18px + var(--rimnow-ads-sticky-h, 0px)); } .mod-rimnow-ads--notification .mod-rimnow-ads__close { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; width: 28px; height: 28px; font-size: 15px; } .mod-rimnow-ads--notification .mod-rimnow-ads__close:hover { background: rgba(255, 255, 255, .28); } /* Deliberately pinned to the visual bottom-LEFT with physical `left`/ `bottom` (not inset-inline-start/inset-block-end) â€” the rest of the card stays fully RTL-aware, but this small "Ad" disclosure badge is meant to read as a quiet, secondary watermark in a fixed corner rather than following text direction. Pulled out of the flex flow (absolute) so it can never be the most eye-catching element and never competes with the title/CTA for space; the card's own bottom padding above already reserves room for it. */ .mod-rimnow-ads--notification .mod-rimnow-ads__label { position: absolute; left: 14px; bottom: 12px; display: inline-flex; align-items: center; opacity: 1; background: var(--ra-notif-badge-bg); color: var(--ra-notif-ink-soft); font-size: 8px; padding: 2px 7px; border-radius: 999px; margin-block-end: 0; } .mod-rimnow-ads__notification-body { display: flex; gap: 12px; align-items: flex-start; flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; /* room reserved for the absolutely-positioned close button above */ padding-inline-end: 24px; } .mod-rimnow-ads__notification-icon { width: 70px; height: 72px; border-radius: 7px; object-fit: cover; flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(255, 255, 255, .18); } .mod-rimnow-ads__notification-text { min-width: 0; } .mod-rimnow-ads__notification-title { margin: 0 0 3px; font-size: 15.5px; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mod-rimnow-ads__notification-desc { margin: 0 0 8px; font-size: 11.5px; line-height: 1.8; color: var(--ra-notif-ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* font-family: arial; */ font-weight: normal; } .mod-rimnow-ads__notification-title:last-child, .mod-rimnow-ads__notification-desc:last-child { margin-bottom: 0; } .mod-rimnow-ads__notification-cta { display: inline-block; margin-block-start: 4px; padding: 6px 15px; border-radius: 999px; background: linear-gradient(135deg, var(--ra-notif-accent), #67e8f9); color: #042f2e; font-size: 12.5px; font-weight: 700; box-shadow: 0 6px 16px -2px rgba(45, 212, 191, .45); } /* Auto-close progress bar â€” purely visual; rendered by the template only when notification_autoclose_seconds > 0, and driven by ads.js toggling the .is-counting class. The countdown duration itself is unchanged; it still comes solely from the existing notificationAutoCloseSeconds value. */ .mod-rimnow-ads__notification-progress { position: absolute; inset-inline: 0; inset-block-end: 0; height: 3px; background: var(--ra-notif-track-bg); overflow: hidden; border-end-start-radius: 20px; border-end-end-radius: 20px; } .mod-rimnow-ads__notification-progress-bar { display: block; position: absolute; inset-block: 0; inset-inline-start: 0; width: 100%; background: linear-gradient(90deg, var(--ra-notif-accent), #67e8f9); transition-property: width; transition-timing-function: linear; transition-duration: var(--ra-notif-duration, 0s); } .mod-rimnow-ads__notification-progress-bar.is-counting { width: 0%; }