; those inherit Cleanon's left-align default. Force center for text-center sections. */ .section-title.text-center .section-title__title, .section-title.text-center .section-title__title .split-line { text-align: center; } .section-title.text-center .section-title__tagline-box { justify-content: center; } /* ── 17. Back-to-top — animated arrow circle ─────────────── */ /* Uses .sa-stt (our class) combined with .scroll-to-top so Cleanon's JS (.show add/remove) still works, but ALL Cleanon style conflicts are beaten via !important on the double-class selector. */ .scroll-to-top.sa-stt { position: fixed !important; bottom: 32px !important; right: 28px !important; width: 50px !important; height: 50px !important; border-radius: 50% !important; background: var(--cleanon-black) !important; color: var(--cleanon-base) !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; border: 2px solid var(--cleanon-base) !important; box-shadow: 0 4px 20px rgba(0,0,0,.30) !important; z-index: 9999 !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(16px) !important; transition: opacity .35s, visibility .35s, transform .35s cubic-bezier(.4,0,.2,1), background .2s, color .2s !important; cursor: pointer !important; } .scroll-to-top.sa-stt.show { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; bottom: 32px !important; } .scroll-to-top.sa-stt:hover { background: var(--cleanon-base) !important; color: var(--cleanon-black) !important; } /* Bouncing arrow icon */ .sa-stt__icon { font-size: 18px; line-height: 1; display: block; animation: saBounceUp 1.8s ease-in-out infinite; } @keyframes saBounceUp { 0%, 55%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } 45% { transform: translateY(-2px); } } @media (max-width: 768px) { .scroll-to-top.sa-stt, .scroll-to-top.sa-stt.show { bottom: 20px !important; right: 16px !important; width: 44px !important; height: 44px !important; } } /* ── 17b. Hide ptTimeSelect popup — timePicker.js always appends #ptTimeSelectCntr to on document.ready even when no time inputs exist on the page. Hide it so it never renders. ────── */ #ptTimeSelectCntr { display: none !important; } /* ── 18. SavingAims Coupon Card (sa-mc) ──────────────────── */ .sa-mc { display: flex; align-items: center; gap: 16px; background: var(--c-surface, #fff); border-radius: 14px; padding: 20px; margin-bottom: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04); border: 1.5px solid transparent; transition: transform .25s, box-shadow .25s, border-color .25s; position: relative; overflow: hidden; } .sa-mc::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cleanon-base); border-radius: 4px 0 0 4px; } .sa-mc.deal_type::before { background: var(--cleanon-extra); } .sa-mc--expired { opacity: .72; } .sa-mc--expired::before { background: #9ca3af; } .sa-mc:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06); border-color: rgba(241,171,33,.25); } /* Logo area */ .sa-mc__logo { position: relative; flex-shrink: 0; width: 80px; } .sa-mc__logo-link { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 12px; background: var(--cleanon-primary); border: 1.5px solid var(--cleanon-bdr-color); overflow: hidden; text-decoration: none; transition: border-color .25s; } .sa-mc:hover .sa-mc__logo-link { border-color: var(--cleanon-base); } .sa-mc__img { width: 100%; height: 100%; object-fit: contain; padding: 6px; display: block; } .sa-mc__initial { font-size: 28px; font-weight: 800; color: var(--cleanon-base); font-family: var(--cleanon-font); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .sa-mc__type-pill { position: absolute; bottom: -4px; right: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; border: 2px solid #fff; } .sa-mc__type-pill--code { background: var(--cleanon-base); color: var(--cleanon-black); } .sa-mc__type-pill--deal { background: var(--cleanon-extra); color: #fff; } /* Body */ .sa-mc__body { flex: 1; min-width: 0; } .sa-mc__title { font-size: 15px; font-weight: 700; color: var(--cleanon-black); margin: 0 0 6px; line-height: 1.4; cursor: pointer; transition: color .2s; font-family: var(--cleanon-font); } .sa-mc__title:hover { color: var(--cleanon-base); } .sa-mc__desc { font-size: 13px; color: var(--cleanon-gray); margin: 0 0 10px; line-height: 1.55; } .sa-mc__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } /* Badges */ .sa-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; line-height: 1.4; } .sa-badge i { font-size: 10px; } .sa-badge--verified { background: rgba(10,113,88,.1); color: var(--cleanon-extra); } .sa-badge--exclusive { background: rgba(241,171,33,.14); color: #9a6d05; } .sa-badge--expiry { background: rgba(100,116,139,.1); color: #64748b; } .sa-badge--expiring { background: rgba(239,68,68,.1); color: #dc2626; } .sa-badge--expired { background: rgba(100,116,139,.1); color: #94a3b8; text-decoration: line-through; } .sa-badge--trust { background: rgba(14,48,38,.07); color: var(--cleanon-secondary); } /* Action area */ .sa-mc__action { flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; min-width: 140px; } /* Code reveal button */ .sa-mc__code-btn { display: flex; flex-direction: column; align-items: stretch; border: 2px dashed var(--cleanon-base); border-radius: 10px; overflow: hidden; text-decoration: none; cursor: pointer; transition: border-color .25s; position: relative; } .sa-mc__code-btn:hover { border-color: var(--cleanon-black); } .sa-mc__code-hidden { display: block; background: rgba(241,171,33,.1); color: var(--cleanon-black); font-size: 13px; font-weight: 700; padding: 8px 12px; text-align: center; letter-spacing: 2px; filter: blur(4px); transition: filter .3s; font-family: monospace; user-select: none; } .sa-mc__code-btn:hover .sa-mc__code-hidden { filter: blur(0); } .sa-mc__code-label { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--cleanon-base); color: var(--cleanon-black); font-size: 12px; font-weight: 700; padding: 8px 12px; text-transform: uppercase; letter-spacing: 0.5px; transition: background .25s, color .25s; position: relative; overflow: hidden; } .sa-mc__code-btn:hover .sa-mc__code-label { background: var(--cleanon-black); color: #fff; } /* Deal button */ .sa-mc__deal-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--cleanon-extra); color: #fff !important; font-size: 13px; font-weight: 700; padding: 14px 18px; border-radius: 10px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; transition: background .25s; position: relative; overflow: hidden; } .sa-mc__deal-btn:hover { background: var(--cleanon-base); color: var(--cleanon-black) !important; } /* Responsive */ @media (max-width: 768px) { .sa-mc { flex-wrap: wrap; padding: 16px; gap: 12px; } .sa-mc__action { min-width: 100%; } .sa-mc__code-btn, .sa-mc__deal-btn { width: 100%; } } @media (max-width: 480px) { .sa-mc__logo { width: 60px; } .sa-mc__logo-link { width: 56px; height: 56px; } .sa-mc__title { font-size: 14px; } } /* ── 19. CSS Split Background (fully customizable) ───────── * * * Usage:

...

* * Override any variable on the element or a wrapper: * --split-left : left panel colour (default: off-white) * --split-right : right panel colour (default: dark green) * --split-at : where the split happens (default: 50%) * --split-dot-color : dot pattern colour (default: semi-white) * --split-dot-size : dot grid pitch (default: 22px) * --split-dot-radius : dot radius (default: 1.2px) * --split-blend : gradient overlap width at split edge (default: 60px) * ─────────────────────────────────────────────────────────── */ .sa-split-bg { --split-left: #f4f4f1; --split-right: var(--cleanon-black, #0c342f); --split-at: 50%; --split-dot-color: rgba(255,255,255,.065); --split-dot-size: 22px; --split-dot-radius: 1.2px; --split-blend: 60px; position: relative; overflow: hidden; } /* Base two-tone split */ .sa-split-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient( to right, var(--split-left) calc(var(--split-at) - var(--split-blend)), var(--split-right) calc(var(--split-at) + var(--split-blend)) ); z-index: 0; } /* Dot/halftone texture — only on the right (dark) side */ .sa-split-bg::after { content: ''; position: absolute; inset: 0; /* dot grid via radial-gradient */ background-image: radial-gradient( circle var(--split-dot-radius) at center, var(--split-dot-color) 0%, transparent 100% ); background-size: var(--split-dot-size) var(--split-dot-size); /* mask: only show dots on the right side */ -webkit-mask-image: linear-gradient( to right, transparent var(--split-at), black calc(var(--split-at) + var(--split-blend)) ); mask-image: linear-gradient( to right, transparent var(--split-at), black calc(var(--split-at) + var(--split-blend)) ); z-index: 0; pointer-events: none; } /* Everything inside stays above the background layers */ .sa-split-bg > * { position: relative; z-index: 1; } /* ─ Variant: right-heavy (30/70 split) */ .sa-split-bg--right { --split-at: 30%; } /* ─ Variant: left-heavy (70/30 split) */ .sa-split-bg--left { --split-at: 70%; } /* ─ Variant: amber accent right instead of dark green */ .sa-split-bg--amber { --split-right: var(--cleanon-base, #f1ab21); --split-dot-color: rgba(0,0,0,.06); } /* ─ Variant: gradient on right side instead of flat colour (matches the teal→olive card in the screenshot) */ .sa-split-bg--gradient::before { background: linear-gradient( to right, var(--split-left) calc(var(--split-at) - var(--split-blend)), var(--cleanon-secondary, #0e3026) calc(var(--split-at) + var(--split-blend)), #2a5a2a 100% ); } /* ── 20. Page Header (Cleanon page-header section) ──────── */ .page-header { position: relative; padding: 80px 0; overflow: hidden; z-index: 1; } .page-header__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -1; filter: brightness(.5); } .page-header__inner { text-align: center; } .page-header__inner h3 { font-size: clamp(26px, 4vw, 42px); font-weight: 800; color: #fff; font-family: var(--cleanon-font); margin: 0 0 16px; } .thm-breadcrumb { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .thm-breadcrumb li a { color: rgba(255,255,255,.75); font-size: 14px; transition: color .2s; text-decoration: none; } .thm-breadcrumb li a:hover, .thm-breadcrumb li:last-child { color: var(--cleanon-base); font-size: 14px; } .thm-breadcrumb .fas.fa-angle-right { color: rgba(255,255,255,.5); font-size: 12px; } /* Bubble animation */ .bubbleContainer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .bubble-1, .bubble-2, .bubble-3 { position: absolute; border-radius: 50%; background: rgba(241,171,33,.12); animation: saHeaderBubble 6s ease-in-out infinite; } .bubble-1 { width: 200px; height: 200px; bottom: -60px; left: -60px; animation-delay: 0s; } .bubble-2 { width: 140px; height: 140px; top: 20px; right: 10%; animation-delay: 2s; } .bubble-3 { width: 90px; height: 90px; bottom: 30px; right: 25%; animation-delay: 4s; } @keyframes saHeaderBubble { 0%, 100% { transform: translateY(0) scale(1); opacity: .7; } 50% { transform: translateY(-20px) scale(1.06); opacity: 1; } } /* ── 21. Blog listing cards ──────────────────────────────── */ .sa-blog-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; justify-content: center; } .sa-blog-pill { display: inline-block; padding: 7px 20px; border-radius: 30px; border: 1.5px solid var(--cleanon-bdr-color); color: var(--cleanon-gray); font-size: 13px; font-weight: 600; text-decoration: none; transition: all .25s; font-family: var(--cleanon-font); } .sa-blog-pill:hover, .sa-blog-pill.active { background: var(--cleanon-base); border-color: var(--cleanon-base); color: var(--cleanon-black); } .sa-blog-cat-badge { display: inline-block; background: rgba(241,171,33,.14); color: #9a6d05; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; text-decoration: none; text-transform: uppercase; letter-spacing: .5px; } .sa-blog-placeholder { display: flex; align-items: center; justify-content: center; height: 240px; background: var(--cleanon-secondary); color: rgba(255,255,255,.3); font-size: 40px; text-decoration: none; } .sa-blog-author-initial { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cleanon-base); color: var(--cleanon-black); font-size: 16px; font-weight: 800; font-family: var(--cleanon-font); } /* ── 22. Cleanon pagination ──────────────────────────────── */ .sa-pagination { display: flex; justify-content: center; margin-top: 50px; } .sa-pagination ul { display: flex; align-items: center; gap: 8px; list-style: none; padding: 0; margin: 0; } .sa-pagination ul li a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--cleanon-bdr-color); color: var(--cleanon-black); font-size: 14px; font-weight: 600; text-decoration: none; transition: all .25s; font-family: var(--cleanon-font); } .sa-pagination ul li a:hover, .sa-pagination ul li.active a { background: var(--cleanon-base); border-color: var(--cleanon-base); color: var(--cleanon-black); } /* ── 23. Blog sidebar extras ─────────────────────────────── */ .sidebar__post-date { font-size: 12px; color: var(--cleanon-gray); margin-top: 4px; display: block; } .sa-sidebar-img-placeholder { width: 72px; height: 56px; background: var(--cleanon-primary); display: flex; align-items: center; justify-content: center; color: var(--cleanon-gray); font-size: 20px; border-radius: 6px; flex-shrink: 0; } /* blog-details date overlay */ .blog-details__img { position: relative; overflow: hidden; border-radius: 14px 14px 0 0; } .blog-details__img img { width: 100%; max-height: 460px; object-fit: cover; display: block; } .blog-details__tag-1 { position: absolute; top: 20px; left: 20px; bottom: auto; /* cancel Cleanon's bottom:15px — without this, top+bottom both set = full height stretch */ right: auto; /* cancel Cleanon's right:90px — without this, left+right both set = full width stretch */ background: var(--cleanon-base); border-radius: 6px; overflow: hidden; } .blog-details__tag-1 a { display: block; padding: 4px 14px; color: var(--cleanon-black); font-size: 13px; font-weight: 700; text-decoration: none; } .blog-details__date { position: absolute; bottom: 20px; left: 20px; background: var(--cleanon-black); border-radius: 8px; padding: 8px 14px; text-align: center; line-height: 1.2; } .blog-details__date p { font-size: 22px; font-weight: 800; color: var(--cleanon-base); margin: 0; font-family: var(--cleanon-font); } .blog-details__date span { font-size: 12px; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: 1px; } /* ── 26. Coupon carousel — .sa-cc vertical card + owl nav ──────── */ /* ── Equal-height: make all owl items stretch to match the tallest ── */ .sa-coupon-owl .owl-stage, .sa-blog-owl .owl-stage { display: flex; flex-wrap: wrap; } .sa-coupon-owl .owl-item, .sa-blog-owl .owl-item { display: flex; flex: 1; } /* ── Slide wrapper ── */ .sa-owl-slide { padding: 6px 4px; display: flex; flex-direction: column; width: 100%; } .sa-owl-slide .sa-cc { flex: 1; } /* ── AOS override: cards inside owl are always visible ── */ .sa-coupon-owl [data-aos], .sa-coupon-owl [data-aos].aos-animate { opacity: 1 !important; transform: none !important; transition: none !important; } /* ── Owl nav arrow buttons ── */ .sa-coupon-owl .owl-nav { margin-top: 24px; display: flex; justify-content: center; gap: 10px; } .sa-coupon-owl .owl-nav button { width: 42px; height: 42px; border-radius: 50%; background: var(--cleanon-black) !important; color: var(--cleanon-base) !important; font-size: 18px; border: none; display: inline-flex; align-items: center; justify-content: center; transition: background .25s, color .25s, transform .2s; } .sa-coupon-owl .owl-nav button:hover { background: var(--cleanon-base) !important; color: var(--cleanon-black) !important; transform: scale(1.08); } .sa-coupon-owl .owl-nav button.disabled { opacity: .35; cursor: default; } /* ═══════════════════════════════════════════════════════════ sa-cc — Vertical coupon card (carousel layout) ═══════════════════════════════════════════════════════════ */ .sa-cc { background: #fff; border-radius: 16px; padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 16px rgba(12,52,47,.07); border: 1px solid var(--cleanon-bdr-color, #ded8cf); min-height: 300px; position: relative; overflow: hidden; transition: box-shadow .25s, transform .25s; } .sa-cc:hover { box-shadow: 0 8px 32px rgba(12,52,47,.14); transform: translateY(-3px); } .sa-cc--expired { opacity: .6; } /* Left accent stripe by type */ .sa-cc.code_type { border-left: 4px solid var(--cleanon-base); } .sa-cc.deal_type { border-left: 4px solid var(--cleanon-black); } /* ── Top row: type pill + logo ── */ .sa-cc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .sa-cc__type-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; padding: 4px 10px; border-radius: 20px; flex-shrink: 0; } .code_type .sa-cc__type-pill { background: rgba(241,171,33,.18); color: #b87d00; } .deal_type .sa-cc__type-pill { background: rgba(12,52,47,.1); color: var(--cleanon-black); } .sa-cc__logo { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; border: 1px solid var(--cleanon-bdr-color, #ded8cf); background: #f7f4f1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sa-cc__logo picture, .sa-cc__img { width: 100%; height: 100%; object-fit: contain; display: block; } .sa-cc__initial { font-size: 22px; font-weight: 800; color: var(--cleanon-black); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } /* ── Store name ── */ .sa-cc__store { font-size: 11px; font-weight: 700; color: var(--cleanon-gray); text-transform: uppercase; letter-spacing: .5px; text-decoration: none; display: block; } a.sa-cc__store:hover { color: var(--cleanon-base); } /* ── Title ── */ .sa-cc__title { font-size: 15px; font-weight: 700; color: var(--cleanon-black); line-height: 1.45; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sa-cc__title a { color: inherit; text-decoration: none; } .sa-cc__title a:hover { color: var(--cleanon-base); } /* ── Description ── */ .sa-cc__desc { font-size: 12.5px; color: var(--cleanon-gray); line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── Badges row ── */ .sa-cc__badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; /* floats to bottom before the button */ padding-top: 4px; } /* ── Action button ── */ .sa-cc__action { margin-top: 4px; } .sa-cc__btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; border: none; transition: background .22s, color .22s, transform .18s; position: relative; overflow: hidden; } .sa-cc__btn:hover { transform: translateY(-1px); } /* Code button: amber fill */ .sa-cc__btn--code { background: var(--cleanon-base); color: var(--cleanon-black); } .sa-cc__btn--code:hover { background: #d4920e; color: #fff; } /* Hidden code text (visible after reveal) */ .sa-cc__code-hidden { letter-spacing: 2px; font-size: 13px; opacity: .7; } .sa-cc__code-reveal { display: inline-flex; align-items: center; gap: 6px; } /* Deal button: dark green fill */ .sa-cc__btn--deal { background: var(--cleanon-black); color: #fff; } .sa-cc__btn--deal:hover { background: var(--cleanon-base); color: var(--cleanon-black); } /* ── 27. Home blog section (blog-four reuse) ─────────────── */ /* Override Cleanon's 120px section padding — we embed inside a themed section */ .sa-home-blog.blog-four { padding: 60px 0 70px; background: var(--cleanon-primary); } /* Image fixed aspect ratio + object-fit so all images are same height */ .sa-home-blog .blog-four__single-img img { width: 100%; height: 220px; object-fit: cover; } /* Placeholder when no featured image */ .sa-blog-placeholder-img { width: 100%; height: 220px; background: var(--cleanon-secondary); display: flex; align-items: center; justify-content: center; font-size: 48px; color: rgba(255,255,255,.3); border-top-left-radius: var(--cleanon-bdr-radius); border-top-right-radius: var(--cleanon-bdr-radius); } /* Equal height blog cards in carousel */ .sa-blog-owl__item { display: flex; flex-direction: column; padding: 6px 0; width: 100%; } .sa-blog-owl__item .blog-four__single { flex: 1; display: flex; flex-direction: column; margin-bottom: 0; } .sa-blog-owl__item .blog-four__single-content { flex: 1; display: flex; flex-direction: column; } .sa-blog-owl__item .blog-four__single-content .btn-box { margin-top: auto; } /* Owl nav for blog carousel */ .sa-blog-owl .owl-nav { margin-top: 24px; display: flex; justify-content: center; gap: 10px; } .sa-blog-owl .owl-nav button { width: 42px; height: 42px; border-radius: 50%; background: var(--cleanon-black) !important; color: var(--cleanon-base) !important; font-size: 16px; border: none; display: inline-flex; align-items: center; justify-content: center; transition: background .25s, color .25s, transform .2s; } .sa-blog-owl .owl-nav button:hover { background: var(--cleanon-base) !important; color: var(--cleanon-black) !important; transform: scale(1.08); } .sa-blog-owl .owl-dots { text-align: center; margin-top: 12px; } .sa-blog-owl .owl-dot span { width: 8px; height: 8px; margin: 0 4px; background: var(--cleanon-bdr-color) !important; border-radius: 50%; display: inline-block; transition: background .2s, transform .2s; } .sa-blog-owl .owl-dot.active span { background: var(--cleanon-base) !important; transform: scale(1.3); } /* AOS in blog owl: always visible */ .sa-blog-owl [data-aos], .sa-blog-owl [data-aos].aos-animate { opacity: 1 !important; transform: none !important; transition: none !important; } /* ── Cookie Consent Banner ─────────────────────────────────── */ .sa-cookie-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--cleanon-black, #0c342f); border-top: 3px solid var(--cleanon-base, #f1ab21); z-index: 99999; transform: translateY(100%); transition: transform .4s cubic-bezier(.4,0,.2,1); box-shadow: 0 -4px 24px rgba(0,0,0,.35); } .sa-cookie-bar--visible { transform: translateY(0); } .sa-cookie-bar__inner { display: flex; align-items: center; gap: 20px; max-width: 1200px; margin: 0 auto; padding: 14px 30px; } .sa-cookie-bar__icon { width: 28px; height: 28px; flex-shrink: 0; color: var(--cleanon-base, #f1ab21); } .sa-cookie-bar__text { flex: 1; margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.88); display: flex; align-items: center; gap: 12px; } .sa-cookie-bar__actions { display: flex; gap: 10px; flex-shrink: 0; } .sa-cookie-bar__btn { padding: 9px 22px; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: background .2s, color .2s, border-color .2s, transform .15s; white-space: nowrap; } .sa-cookie-bar__btn:hover { transform: translateY(-1px); } .sa-cookie-bar__btn--accept { background: var(--cleanon-base, #f1ab21); color: var(--cleanon-black, #0c342f); border-color: var(--cleanon-base, #f1ab21); } .sa-cookie-bar__btn--accept:hover { background: #d4920e; border-color: #d4920e; } .sa-cookie-bar__btn--reject { background: transparent; color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.3); } .sa-cookie-bar__btn--reject:hover { border-color: rgba(255,255,255,.7); color: #fff; } @media (max-width: 640px) { .sa-cookie-bar__inner { flex-direction: column; align-items: flex-start; padding: 16px 20px; gap: 14px; } .sa-cookie-bar__actions { width: 100%; } .sa-cookie-bar__btn { flex: 1; text-align: center; } } /* ── 25. Main slider hero — review-box text ─────────────── */ .main-slider__review-box .text-box h4 { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 2px; } .main-slider__review-box .text-box p { font-size: 13px; color: rgba(255,255,255,.7); margin: 0; } /* Two CTA buttons side by side in hero slider */ .main-slider__btn-box { display: flex !important; align-items: center; gap: 14px; flex-wrap: wrap; line-height: normal !important; } /* Outline / ghost variant for the secondary hero button */ .main-slider__btn-box .sa-btn-outline { background: transparent !important; color: #fff !important; border: 2px solid rgba(241,171,33,.55) !important; padding: 12px 26px !important; font-size: 15px !important; font-weight: 500 !important; border-radius: var(--cleanon-bdr-radius) !important; transition: background .25s, color .25s, border-color .25s !important; position: relative; overflow: hidden; } /* Kill Cleanon's white ripple spans on the outline button so the CSS transition works */ .main-slider__btn-box .sa-btn-outline .hover-btn { display: none !important; } .main-slider__btn-box .sa-btn-outline:hover { background: var(--cleanon-base) !important; color: var(--cleanon-black) !important; border-color: var(--cleanon-base) !important; } .main-slider__btn-box .sa-btn-outline i { margin-right: 6px; } /* Suppress Cleanon's built-in dark ::after overlay when a custom overlay div is used */ .swiper-slide[data-custom-overlay] .main-slider__bg::after { display: none !important; } /* ── 26. Single-store coupon tab filtering ─────────────────── */ /* Use CSS class toggling so AOS-animated elements are never touched on show (only the unwanted type is hidden — avoids AOS re-queuing animation). */ #sa-coupons-col.filter-codes .sa-mc.deal_type { display: none !important; } #sa-coupons-col.filter-deals .sa-mc.code_type { display: none !important; } #sa-coupons-col.filter-deals .sa-mc.deal_type, #sa-coupons-col.filter-codes .sa-mc.code_type { opacity: 1 !important; transform: none !important; visibility: visible !important; } /* ── Inner-page header positioning ─────────────────────────────────────── */ /* On the home page the header is position:absolute so the hero slider shows through it. On all other pages we switch it to position:relative so it occupies space in the document flow and content naturally starts below it. This replaces all the padding-top hacks on .pg-banner. */ .sa-inner-page .main-header { position: relative !important; top: auto !important; } /* Keep sticky clone fixed/hidden — only appears on scroll */ .sa-inner-page .stricky-header { position: fixed !important; } /* ── 27. Hamburger only on mobile ───────────────────────────────────────── */ /* Cleanon's sticky-header clone always includes .mobile-nav__toggler (☰). On desktop the main nav is visible so the toggler must be hidden. */ @media (min-width: 1200px) { .sticky-header .mobile-nav__toggler, .stricky-header .mobile-nav__toggler { display: none !important; } } /* ── 28. Top Bar ────────────────────────────────────────────────────────── */ /* Admin-controlled top bar background override (inline style on .main-menu__top) */ .main-menu__top[style*="background"] { border-bottom-color: rgba(255,255,255,.12) !important; } /* Cascade admin font color/size/weight to all text children */ .main-menu__top[style] .main-menu__contact-list li .text p, .main-menu__top[style] .main-menu__contact-list li .text p a, .main-menu__top[style] .main-menu__contact-list li .icon i, .main-menu__top[style] .main-menu__top-welcome-text, .main-menu__top[style] .main-menu__social a, .main-menu__top[style] .main-menu__social a i { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; }