/* ================================================================ CouponPress — Frontend Stylesheet (v2, full redesign) ---------------------------------------------------------------- One cohesive, modern, fully-responsive design system. - Single source of truth: no competing "override passes". - Respects Customizer variables (--cp-primary, --cp-navy, --cp-font, --cp-btn-*, --cp-radius ...) so admin controls work. - Respects admin sizing vars (--cp-title-fs / --cp-body-fs / --cp-logo-h) injected in . Aesthetic: clean white surfaces on a soft canvas, confident orange accent, deep-navy headings, ticket/dashed motif on code buttons — the look shared by the leading coupon destinations. ================================================================ */ /* ── Design tokens (fallbacks; Customizer may override the starred) ── */ :root { --cp-primary: #FF6B2C; /* ★ customizer */ --cp-primary-dark: #E5551A; /* ★ customizer */ --cp-primary-light: #FFF1EA; /* ★ customizer (derived) */ --cp-navy: #0F1B35; /* ★ customizer */ --cp-navy-light: #1E2E50; /* ★ customizer (derived) */ --cp-green: #16A34A; --cp-green-light: #DCFCE7; --cp-red: #DC2626; --cp-red-light: #FEE2E2; --cp-yellow: #F59E0B; --cp-purple: #7C3AED; --cp-ink: #1F2733; /* primary body text */ --cp-gray-50: #F7F8FA; --cp-gray-100: #EFF1F5; --cp-gray-200: #E3E7ED; --cp-gray-300: #CBD2DC; --cp-gray-400: #97A1B0; --cp-gray-500: #6B7588; --cp-gray-600: #4B5564; --cp-gray-700: #343C49; --cp-gray-900: #141A22; --cp-white: #FFFFFF; --cp-canvas: #F4F6F9; /* page background tint behind cards */ --cp-shadow-xs: 0 1px 2px rgba(20,26,34,.05); --cp-shadow-sm: 0 1px 3px rgba(20,26,34,.07), 0 1px 2px rgba(20,26,34,.04); --cp-shadow: 0 4px 14px rgba(20,26,34,.07), 0 2px 6px rgba(20,26,34,.05); --cp-shadow-md: 0 10px 28px rgba(20,26,34,.10), 0 4px 10px rgba(20,26,34,.05); --cp-shadow-lg: 0 24px 48px rgba(20,26,34,.16), 0 10px 18px rgba(20,26,34,.06); --cp-ring: 0 0 0 4px rgba(255,107,44,.18); --cp-radius-sm: 8px; --cp-radius: 11px; /* ★ customizer (control radius) */ --cp-radius-lg: 18px; --cp-radius-xl: 26px; --cp-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* ★ */ --cp-font-display: 'Syne', var(--cp-font); /* ★ */ --cp-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --cp-font-size: 15px; /* ★ customizer */ --cp-transition: .18s cubic-bezier(.4,0,.2,1); /* Button tokens (Customizer supplies these with !important on its targets) */ --cp-btn-bg: linear-gradient(135deg, var(--cp-primary), var(--cp-primary-dark)); --cp-btn-hover-bg: linear-gradient(135deg, var(--cp-primary-dark), #C8470F); --cp-btn-text: #FFFFFF; --cp-btn-radius: var(--cp-radius); --cp-btn-fw: 800; --cp-code-btn-bg: var(--cp-primary-light); --cp-code-btn-border:var(--cp-primary); /* Admin sizing (injected in ; sane fallbacks here) */ --cp-title-fs: 30px; --cp-body-fs: 15px; --cp-logo-h: 96px; } /* ── Reset & base (scoped to plugin wrapper) ───────────────────── */ .cp-wrap, .cp-wrap *, .cp-wrap *::before, .cp-wrap *::after { box-sizing: border-box; } .cp-wrap { font-family: var(--cp-font); font-size: var(--cp-body-fs); line-height: 1.6; color: var(--cp-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .cp-wrap a { color: var(--cp-primary); text-decoration: none; transition: color var(--cp-transition); } .cp-wrap a:hover { color: var(--cp-primary-dark); } .cp-wrap img { max-width: 100%; height: auto; } .cp-wrap h1, .cp-wrap h2, .cp-wrap h3, .cp-wrap h4 { font-family: var(--cp-font-display); color: var(--cp-navy); line-height: 1.2; letter-spacing: -.01em; } .cp-wrap :focus-visible { outline: none; box-shadow: var(--cp-ring); border-radius: var(--cp-radius-sm); } /* ── Layout ────────────────────────────────────────────────────── */ .cp-container { max-width: 1180px; margin: 0 auto; padding: 0 20px; } .cp-section { padding: 44px 0; } .cp-grid-1 { display: grid; grid-template-columns: 1fr; gap: 16px; } .cp-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .cp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .cp-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .cp-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } /* ── Section headers ───────────────────────────────────────────── */ .cp-section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .cp-section-title { font-size: 24px; font-weight: 800; color: var(--cp-navy); margin: 0; } .cp-section-link { font-size: 14px; font-weight: 700; color: var(--cp-primary); } /* ── Search bar ────────────────────────────────────────────────── */ .cp-search-wrap { position: relative; display: block; width: 100%; } .cp-search-input, input.cp-search-input { width: 100%; padding: 14px 52px 14px 46px; border: 2px solid var(--cp-gray-200); border-radius: var(--cp-radius-xl); font-family: var(--cp-font); font-size: 15px; color: var(--cp-gray-900); background: var(--cp-white); outline: none; transition: border-color var(--cp-transition), box-shadow var(--cp-transition); } .cp-search-input::placeholder { color: var(--cp-gray-400); } .cp-search-input:focus, input.cp-search-input:focus { border-color: var(--cp-primary); box-shadow: var(--cp-ring); } .cp-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--cp-gray-400); pointer-events: none; } /* ── Autocomplete dropdown ─────────────────────────────────────── */ .cp-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--cp-white); border: 1px solid var(--cp-gray-200); border-radius: var(--cp-radius-lg); box-shadow: var(--cp-shadow-md); z-index: 9999; max-height: 460px; overflow-y: auto; display: none; } .cp-search-results.active { display: block; } .cp-search-results::-webkit-scrollbar { width: 6px; } .cp-search-results::-webkit-scrollbar-thumb { background: var(--cp-gray-200); border-radius: 8px; } .cp-search-group-header, .cp-search-result-label { display: flex; align-items: center; gap: 8px; padding: 11px 16px 6px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-gray-400); position: sticky; top: 0; background: var(--cp-white); border-bottom: 1px solid var(--cp-gray-100); z-index: 1; } .cp-search-group-header .cp-sgc { font-size: 11px; font-weight: 700; color: var(--cp-gray-300); margin-left: auto; } .cp-search-store-item, .cp-search-coupon-item, .cp-search-result-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; cursor: pointer; text-decoration: none; color: inherit; border-bottom: 1px solid var(--cp-gray-50); transition: background .12s; } .cp-search-store-item:hover, .cp-search-coupon-item:hover, .cp-search-result-item:hover, .cp-search-store-item.highlighted, .cp-search-coupon-item.highlighted, .cp-search-cat-item.highlighted { background: var(--cp-primary-light); } .cp-ss-logo-wrap, .cp-sc-logo-wrap { flex-shrink: 0; border-radius: 10px; border: 1px solid var(--cp-gray-100); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--cp-gray-50); } .cp-ss-logo-wrap { width: 44px; height: 44px; } .cp-sc-logo-wrap { width: 36px; height: 36px; } .cp-ss-logo { width: 100%; height: 100%; object-fit: contain; padding: 4px; } .cp-sc-logo { width: 100%; height: 100%; object-fit: contain; padding: 3px; } .cp-ss-logo-placeholder { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: var(--cp-gray-400); } .cp-ss-info, .cp-sc-info { flex: 1; min-width: 0; } .cp-ss-name { font-weight: 700; font-size: 14px; color: var(--cp-gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-ss-meta { font-size: 12px; color: var(--cp-gray-400); margin-top: 2px; } .cp-ss-cashback { font-size: 11px; font-weight: 800; color: var(--cp-green); margin-left: 6px; } .cp-ss-badge { flex-shrink: 0; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 20px; background: var(--cp-primary-light); color: var(--cp-primary-dark); white-space: nowrap; } .cp-ss-badge.cp-badge-coupon { background: var(--cp-green-light); color: var(--cp-green); } .cp-ss-badge.cp-badge-cat { background: var(--cp-gray-100); color: var(--cp-gray-500); } .cp-sc-title { font-weight: 600; font-size: 13px; color: var(--cp-gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-sc-store { font-size: 11px; color: var(--cp-gray-400); } .cp-sc-right { flex-shrink: 0; text-align: right; } .cp-sc-discount { font-size: 12px; font-weight: 800; color: var(--cp-primary); } .cp-sc-code { font-family: var(--cp-font-mono); font-size: 11px; background: var(--cp-primary-light); color: var(--cp-primary-dark); padding: 2px 6px; border-radius: 4px; margin-top: 2px; display: inline-block; } .cp-search-cat-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; cursor: pointer; text-decoration: none; color: inherit; transition: background .12s; } .cp-search-cat-item:hover { background: var(--cp-gray-50); } .cp-search-cat-emoji { font-size: 20px; } .cp-search-cat-name { font-size: 13px; font-weight: 600; color: var(--cp-gray-700); } .cp-search-cat-count { font-size: 11px; color: var(--cp-gray-400); margin-left: auto; } .cp-search-result-logo, .cp-search-result-logo-placeholder { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--cp-gray-100); object-fit: contain; background: var(--cp-gray-50); display: flex; align-items: center; justify-content: center; } .cp-search-result-title { font-weight: 700; font-size: 14px; color: var(--cp-gray-900); } .cp-search-result-sub { font-size: 12px; color: var(--cp-gray-400); } .cp-search-result-badge { margin-left: auto; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 20px; white-space: nowrap; } .cp-badge-store { background: var(--cp-primary-light); color: var(--cp-primary-dark); } .cp-badge-coupon { background: var(--cp-green-light); color: var(--cp-green); } .cp-badge-category { background: var(--cp-gray-100); color: var(--cp-gray-500); } .cp-search-footer { padding: 11px 16px; border-top: 1px solid var(--cp-gray-100); text-align: center; font-size: 12px; color: var(--cp-primary); font-weight: 700; cursor: pointer; } .cp-search-footer:hover { background: var(--cp-gray-50); } .cp-search-loading { padding: 22px; text-align: center; color: var(--cp-gray-400); font-size: 13px; display: none; } .cp-search-loading.show { display: block; } .cp-search-empty { padding: 34px 20px; text-align: center; color: var(--cp-gray-400); } .cp-search-empty-icon { font-size: 32px; margin-bottom: 8px; } .cp-search-empty-text { font-size: 14px; } /* ══════════════════════════════════════════════════════════════════ COUPON CARD (archive, category, store widget, AJAX load-more) Vertical card by default; the .cp-grid-1 list turns it horizontal. ══════════════════════════════════════════════════════════════════ */ .cp-coupon-card { position: relative; background: var(--cp-white); border: 1px solid var(--cp-gray-200); border-radius: var(--cp-radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--cp-transition), box-shadow var(--cp-transition), border-color var(--cp-transition); } .cp-coupon-card:hover { transform: translateY(-3px); box-shadow: var(--cp-shadow-md); border-color: var(--cp-gray-300); } .cp-coupon-card.is-featured { border-color: var(--cp-primary); box-shadow: 0 0 0 1px var(--cp-primary) inset; } .cp-coupon-card.is-featured::before { content: "★ Featured"; position: absolute; top: 10px; right: -34px; background: var(--cp-primary); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 4px 40px; transform: rotate(45deg); z-index: 2; box-shadow: var(--cp-shadow-sm); } .cp-coupon-card.is-expired { opacity: .6; } .cp-coupon-card-header { display: flex; align-items: flex-start; gap: 14px; padding: 18px 18px 12px; } .cp-coupon-store-logo, .cp-coupon-store-logo-placeholder { width: 52px; height: 52px; flex-shrink: 0; border-radius: 12px; border: 1px solid var(--cp-gray-100); background: var(--cp-white); object-fit: contain; padding: 5px; } .cp-coupon-store-logo-placeholder { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; color: var(--cp-gray-400); background: var(--cp-gray-100); } .cp-coupon-meta { flex: 1; min-width: 0; } .cp-coupon-store-name { font-size: 12px; color: var(--cp-gray-400); font-weight: 700; margin-bottom: 3px; } .cp-coupon-store-name a { color: var(--cp-gray-500); } .cp-coupon-title { font-size: 16px; font-weight: 700; color: var(--cp-navy); line-height: 1.35; margin: 0; } .cp-coupon-title a, .cp-coupon-title span { color: var(--cp-navy); } .cp-coupon-title a:hover { color: var(--cp-primary); } .cp-coupon-discount-badge { flex-shrink: 0; align-self: flex-start; text-align: center; white-space: nowrap; min-width: 60px; padding: 8px 12px; border-radius: 12px; background: var(--cp-btn-bg); color: #fff; font-family: var(--cp-font-display); font-weight: 800; font-size: 15px; line-height: 1.1; } .cp-coupon-discount-badge.free-shipping { font-size: 11px; } .cp-coupon-discount-badge.bogo { background: linear-gradient(135deg, var(--cp-purple), #6D28D9); } .cp-coupon-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px; } .cp-coupon-tag { font-size: 11px; font-weight: 700; line-height: 1; padding: 5px 9px; border-radius: 20px; white-space: nowrap; background: var(--cp-gray-100); color: var(--cp-gray-600); } .cp-tag-exclusive { background: #FEF3C7; color: #92400E; } .cp-tag-verified { background: var(--cp-green-light); color: #15803D; } .cp-tag-featured { background: var(--cp-primary-light); color: var(--cp-primary-dark); } .cp-tag-deal { background: #E0F2FE; color: #0369A1; } .cp-coupon-action { padding: 0 18px 14px; margin-top: auto; } /* Reveal-code button (ticket / dashed motif) */ .cp-btn-code { width: 100%; display: flex; align-items: stretch; justify-content: space-between; min-height: 50px; padding: 0; overflow: hidden; cursor: pointer; background: var(--cp-code-btn-bg); border: 2px dashed var(--cp-code-btn-border); border-radius: var(--cp-btn-radius); font-family: var(--cp-font); transition: box-shadow var(--cp-transition), background var(--cp-transition); } .cp-btn-code .cp-btn-code-label { flex: 1; display: flex; align-items: center; justify-content: center; font-family: var(--cp-font-mono); font-weight: 800; font-size: 15px; letter-spacing: 1px; color: var(--cp-navy); filter: blur(4px); padding: 0 14px; transition: filter var(--cp-transition); } .cp-btn-code .cp-btn-code-label.revealed { filter: none; } .cp-btn-code .cp-btn-code-action { display: flex; align-items: center; white-space: nowrap; background: var(--cp-primary); color: #fff; font-weight: 800; font-size: 13px; padding: 0 16px; } .cp-btn-code:hover { box-shadow: 0 6px 16px rgba(255,107,44,.22); } .cp-btn-code:hover .cp-btn-code-action { background: var(--cp-primary-dark); } .cp-btn-code.cp-copied { border-color: var(--cp-green); background: var(--cp-green-light); } .cp-btn-code.cp-copied .cp-btn-code-label { color: #15803D; } .cp-btn-code.cp-copied .cp-btn-code-action { background: var(--cp-green); } .cp-btn-code[disabled] { cursor: not-allowed; border-style: solid; border-color: var(--cp-gray-200); background: var(--cp-gray-50); } /* Get-deal button (solid gradient CTA) */ .cp-btn-deal, a.cp-btn-deal { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; padding: 0 18px; text-align: center; background: var(--cp-btn-bg); color: var(--cp-btn-text) !important; border: 0; border-radius: var(--cp-btn-radius); font-family: var(--cp-font); font-weight: var(--cp-btn-fw); font-size: 14px; cursor: pointer; transition: background var(--cp-transition), box-shadow var(--cp-transition), transform var(--cp-transition); } .cp-btn-deal:hover, a.cp-btn-deal:hover { background: var(--cp-btn-hover-bg); box-shadow: 0 6px 16px rgba(255,107,44,.28); transform: translateY(-1px); } .cp-coupon-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--cp-gray-100); font-size: 12px; color: var(--cp-gray-400); } .cp-coupon-expiry { font-size: 12px; color: var(--cp-gray-400); } .cp-coupon-expiry.expiring-soon { color: var(--cp-yellow); font-weight: 700; } .cp-coupon-expiry.expired { color: var(--cp-red); font-weight: 700; } .cp-vote-btns { display: flex; gap: 8px; align-items: center; } .cp-vote-btn { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 20px; border: 1px solid var(--cp-gray-200); background: var(--cp-white); color: var(--cp-gray-600); cursor: pointer; font-family: var(--cp-font); transition: var(--cp-transition); } .cp-vote-btn:hover { border-color: var(--cp-primary); color: var(--cp-primary); } .cp-vote-btn.voted-up { background: var(--cp-green-light); border-color: var(--cp-green); color: var(--cp-green); } .cp-vote-btn.voted-down { background: var(--cp-red-light); border-color: var(--cp-red); color: var(--cp-red); } .cp-vote-success-rate { font-size: 11px; font-weight: 700; color: var(--cp-green); } /* 1-column list → horizontal rows; multi-column → vertical cards */ @media (min-width: 720px) { .cp-grid-1 .cp-coupon-card { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 18px; padding: 16px 20px; } .cp-grid-1 .cp-coupon-card-header { flex: 1 1 320px; padding: 0; min-width: 0; } .cp-grid-1 .cp-coupon-tags { padding: 0; align-self: center; } .cp-grid-1 .cp-coupon-action { flex: 0 0 220px; width: 220px; padding: 0; margin: 0; } .cp-grid-1 .cp-coupon-footer { flex: 0 0 100%; order: 5; padding: 12px 0 0; margin-top: 4px; } } /* ══════════════════════════════════════════════════════════════════ STORE CARD (archive grid, featured, A-Z, similar) ══════════════════════════════════════════════════════════════════ */ .cp-store-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; background: var(--cp-white); border: 1px solid var(--cp-gray-200); border-radius: var(--cp-radius-lg); padding: 22px 16px; color: inherit; transition: transform var(--cp-transition), box-shadow var(--cp-transition), border-color var(--cp-transition); } .cp-store-card:hover { transform: translateY(-4px); box-shadow: var(--cp-shadow-md); border-color: var(--cp-primary); } .cp-store-card.is-featured { border-color: var(--cp-primary); } .cp-store-logo, .cp-store-logo-placeholder { width: 82px; height: 82px; object-fit: contain; padding: 8px; border-radius: 16px; border: 1px solid var(--cp-gray-100); background: var(--cp-white); } .cp-store-logo-placeholder { display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; color: var(--cp-gray-400); background: var(--cp-gray-100); } .cp-store-name { font-weight: 800; font-size: 15px; color: var(--cp-navy); } .cp-store-coupon-count { font-size: 12px; color: var(--cp-gray-400); } .cp-store-cashback { font-size: 12px; font-weight: 800; color: var(--cp-green); background: var(--cp-green-light); padding: 3px 10px; border-radius: 20px; } .cp-store-rating { display: flex; gap: 2px; justify-content: center; } .cp-store-rating .cp-star { color: var(--cp-yellow); font-size: 13px; } .cp-store-rating .cp-star.empty { color: var(--cp-gray-200); } /* ══════════════════════════════════════════════════════════════════ HERO (home / shortcode landing) ══════════════════════════════════════════════════════════════════ */ .cp-hero { position: relative; overflow: hidden; text-align: center; padding: 72px 20px 88px; background: radial-gradient(900px 360px at 50% -30%, rgba(255,107,44,.22), transparent 65%), linear-gradient(135deg, var(--cp-navy), var(--cp-navy-light)); border-radius: var(--cp-radius-xl); } .cp-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 24px 24px; opacity: .5; } .cp-hero-content { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; } .cp-hero-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-primary); margin-bottom: 16px; } .cp-hero-title { font-size: clamp(32px, 5vw, 54px); font-weight: 800; color: #fff; line-height: 1.08; margin: 0 0 18px; } .cp-hero-title span { color: var(--cp-primary); } .cp-hero-sub { font-size: 17px; color: rgba(255,255,255,.72); margin: 0 0 32px; } .cp-hero-stats { display: flex; justify-content: center; gap: 48px; margin-top: 40px; } .cp-hero-stat-num { font-family: var(--cp-font-display); font-size: 30px; font-weight: 800; color: #fff; } .cp-hero-stat-label { font-size: 12px; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .08em; } /* ── Filters bar ───────────────────────────────────────────────── */ .cp-filters-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--cp-white); border: 1px solid var(--cp-gray-200); border-radius: var(--cp-radius-lg); padding: 14px 18px; } .cp-filter-label { font-size: 13px; font-weight: 800; color: var(--cp-gray-500); } .cp-filter-btn { padding: 7px 15px; border-radius: 20px; font-size: 13px; font-weight: 700; border: 1px solid var(--cp-gray-200); background: var(--cp-white); color: var(--cp-gray-600); cursor: pointer; font-family: var(--cp-font); transition: var(--cp-transition); } .cp-filter-btn:hover { border-color: var(--cp-primary); color: var(--cp-primary); } .cp-filter-btn.active { background: var(--cp-primary); color: #fff; border-color: var(--cp-primary); box-shadow: 0 3px 10px rgba(255,107,44,.28); } .cp-filter-select { padding: 7px 32px 7px 14px; border-radius: 20px; font-size: 13px; font-weight: 700; border: 1px solid var(--cp-gray-200); background: var(--cp-white); color: var(--cp-gray-600); cursor: pointer; font-family: var(--cp-font); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7588' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .cp-filter-separator { width: 1px; height: 24px; background: var(--cp-gray-200); } .cp-filter-count { font-size: 12px; color: var(--cp-gray-400); margin-left: auto; } /* Column toggle */ .cp-col-toggle { display: inline-flex; gap: 4px; margin-left: auto; } .cp-col-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cp-gray-200); background: var(--cp-white); color: var(--cp-gray-500); border-radius: var(--cp-radius-sm); cursor: pointer; font-size: 15px; transition: var(--cp-transition); } .cp-col-btn:hover { border-color: var(--cp-primary); color: var(--cp-primary); } .cp-col-btn.active { background: var(--cp-primary); color: #fff; border-color: var(--cp-primary); } /* ── Category pills + cards ─────────────────────────────────────── */ .cp-cat-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .cp-cat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: 20px; font-size: 13px; font-weight: 700; border: 2px solid var(--cp-gray-200); background: var(--cp-white); color: var(--cp-gray-600); cursor: pointer; font-family: var(--cp-font); white-space: nowrap; transition: var(--cp-transition); } .cp-cat-pill:hover { border-color: var(--cp-primary); color: var(--cp-primary); background: var(--cp-primary-light); } .cp-cat-pill.active { background: var(--cp-primary); color: #fff; border-color: var(--cp-primary); box-shadow: 0 3px 10px rgba(255,107,44,.3); } .cp-pill-count { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 20px; background: var(--cp-gray-100); color: var(--cp-gray-500); } .cp-cat-pill.active .cp-pill-count { background: rgba(255,255,255,.25); color: #fff; } .cp-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; } .cp-category-card { background: var(--cp-white); border: 1px solid var(--cp-gray-200); border-radius: var(--cp-radius-lg); padding: 20px 16px; text-align: center; color: inherit; transition: var(--cp-transition); } .cp-category-card:hover { border-color: var(--cp-primary); background: var(--cp-primary-light); transform: translateY(-3px); } .cp-category-emoji { font-size: 30px; margin-bottom: 8px; display: block; } .cp-category-name { font-weight: 800; font-size: 14px; color: var(--cp-navy); } .cp-category-count { font-size: 11px; color: var(--cp-gray-400); margin-top: 2px; } /* ── Cashback banner ───────────────────────────────────────────── */ .cp-cashback-banner { display: flex; align-items: center; gap: 18px; color: #fff; margin-bottom: 24px; background: linear-gradient(135deg, #064E3B, #047857); border-radius: var(--cp-radius-lg); padding: 22px 26px; } .cp-cashback-icon { font-size: 34px; } .cp-cashback-rate { font-family: var(--cp-font-display); font-size: 28px; font-weight: 800; } .cp-cashback-label { font-size: 14px; opacity: .85; } .cp-cashback-btn { margin-left: auto; background: #fff; color: #047857; padding: 11px 22px; border-radius: var(--cp-radius); font-weight: 800; font-size: 14px; white-space: nowrap; } /* ── Load more ─────────────────────────────────────────────────── */ .cp-load-more-wrap { text-align: center; padding: 36px 0; } .cp-btn-load-more { display: inline-flex; align-items: center; gap: 8px; padding: 13px 34px; border: 2px solid var(--cp-gray-200); border-radius: var(--cp-radius); font-weight: 800; font-size: 14px; color: var(--cp-gray-700); background: var(--cp-white); cursor: pointer; font-family: var(--cp-font); transition: var(--cp-transition); } .cp-btn-load-more:hover { border-color: var(--cp-primary); color: var(--cp-primary); } /* ── A-Z browser ───────────────────────────────────────────────── */ .cp-az-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 32px; } .cp-az-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: var(--cp-radius-sm); font-weight: 800; font-size: 14px; border: 1px solid var(--cp-gray-200); background: var(--cp-white); color: var(--cp-gray-600); text-decoration: none; transition: var(--cp-transition); } .cp-az-btn:hover, .cp-az-btn.active { background: var(--cp-primary); color: #fff; border-color: var(--cp-primary); } .cp-az-btn.empty { opacity: .3; pointer-events: none; } .cp-az-group { margin-bottom: 36px; scroll-margin-top: 20px; } .cp-az-letter { font-family: var(--cp-font-display); font-size: 28px; font-weight: 800; color: var(--cp-navy); margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid var(--cp-gray-100); } /* ── Submit form ───────────────────────────────────────────────── */ .cp-submit-form { max-width: 680px; margin: 0 auto; } .cp-form-group { margin-bottom: 20px; } .cp-form-label { display: block; font-size: 14px; font-weight: 700; color: var(--cp-gray-700); margin-bottom: 7px; } .cp-form-label .required { color: var(--cp-primary); } .cp-form-input, .cp-form-select, .cp-form-textarea { width: 100%; padding: 12px 14px; border: 2px solid var(--cp-gray-200); border-radius: var(--cp-radius); font-family: var(--cp-font); font-size: 14px; color: var(--cp-gray-900); background: var(--cp-white); outline: none; transition: var(--cp-transition); } .cp-form-input:focus, .cp-form-select:focus, .cp-form-textarea:focus { border-color: var(--cp-primary); box-shadow: var(--cp-ring); } .cp-form-textarea { min-height: 110px; resize: vertical; } .cp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .cp-btn-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 32px; border: 0; border-radius: var(--cp-radius); background: var(--cp-btn-bg); color: var(--cp-btn-text); font-family: var(--cp-font); font-size: 15px; font-weight: var(--cp-btn-fw); cursor: pointer; transition: var(--cp-transition); } .cp-btn-submit:hover { background: var(--cp-btn-hover-bg); box-shadow: 0 6px 16px rgba(255,107,44,.28); } .cp-form-success { background: var(--cp-green-light); border: 1px solid var(--cp-green); border-radius: var(--cp-radius); padding: 16px 20px; color: #15803D; font-weight: 700; margin-top: 16px; display: none; } .cp-form-error { background: var(--cp-red-light); border: 1px solid var(--cp-red); border-radius: var(--cp-radius); padding: 16px 20px; color: var(--cp-red); font-weight: 700; margin-top: 16px; display: none; } /* ── Legacy store header (standalone archive) + visit/subscribe ──── */ .cp-store-header { background: var(--cp-white); border-bottom: 1px solid var(--cp-gray-200); padding: 32px 0; } .cp-store-header-inner { display: flex; align-items: flex-start; gap: 24px; max-width: 1180px; margin: 0 auto; padding: 0 20px; } .cp-store-header-logo, .cp-store-header-logo-placeholder { width: 100px; height: 100px; object-fit: contain; padding: 8px; border-radius: var(--cp-radius-lg); border: 1px solid var(--cp-gray-200); background: var(--cp-white); } .cp-store-header-logo-placeholder { display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 800; color: var(--cp-gray-400); background: var(--cp-gray-100); } .cp-store-header-info { flex: 1; } .cp-store-header-name { font-size: 30px; font-weight: 800; color: var(--cp-navy); margin-bottom: 6px; } .cp-store-header-desc { font-size: 15px; color: var(--cp-gray-500); margin-bottom: 14px; } .cp-store-header-meta { display: flex; gap: 20px; flex-wrap: wrap; } .cp-store-meta-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cp-gray-500); } .cp-store-meta-item strong { color: var(--cp-navy); } .cp-store-header-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; } .cp-btn-visit-store { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: var(--cp-radius); background: var(--cp-btn-bg); color: var(--cp-btn-text) !important; font-weight: var(--cp-btn-fw); font-size: 14px; transition: var(--cp-transition); } .cp-btn-visit-store:hover { background: var(--cp-btn-hover-bg); box-shadow: 0 6px 16px rgba(255,107,44,.28); transform: translateY(-1px); } .cp-btn-subscribe { display: inline-flex; align-items: center; gap: 6px; padding: 11px 20px; border: 1px solid var(--cp-gray-200); border-radius: var(--cp-radius); font-size: 13px; font-weight: 700; color: var(--cp-gray-600); background: var(--cp-white); cursor: pointer; font-family: var(--cp-font); transition: var(--cp-transition); } .cp-btn-subscribe:hover { border-color: var(--cp-primary); color: var(--cp-primary); } .cp-btn-subscribe.subscribed { border-color: var(--cp-green); color: var(--cp-green); background: var(--cp-green-light); } /* ── Breadcrumbs ───────────────────────────────────────────────── */ .cp-breadcrumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--cp-gray-400); margin-bottom: 24px; } .cp-breadcrumbs a { color: var(--cp-gray-500); } .cp-breadcrumbs a:hover { color: var(--cp-primary); } .cp-breadcrumbs .sep { color: var(--cp-gray-300); } .cp-breadcrumbs .current { color: var(--cp-gray-700); font-weight: 700; } /* ── Pagination ────────────────────────────────────────────────── */ .cp-pagination { display: flex; justify-content: center; gap: 6px; padding: 36px 0; flex-wrap: wrap; } .cp-page-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--cp-radius-sm); font-weight: 700; font-size: 14px; border: 1px solid var(--cp-gray-200); background: var(--cp-white); color: var(--cp-gray-600); cursor: pointer; transition: var(--cp-transition); } .cp-page-btn:hover { border-color: var(--cp-primary); color: var(--cp-primary); } .cp-page-btn.active { background: var(--cp-primary); color: #fff; border-color: var(--cp-primary); } /* ── Toast / spinner ───────────────────────────────────────────── */ .cp-toast { position: fixed; bottom: 24px; right: 24px; z-index: 9999; max-width: 320px; padding: 13px 20px; border-radius: var(--cp-radius); background: var(--cp-gray-900); color: #fff; font-size: 14px; font-weight: 700; box-shadow: var(--cp-shadow-lg); transform: translateY(80px); opacity: 0; transition: all .3s ease; pointer-events: none; } .cp-toast.show { transform: translateY(0); opacity: 1; } .cp-toast.success { background: var(--cp-green); } .cp-toast.error { background: var(--cp-red); } .cp-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: cp-spin .7s linear infinite; } .cp-spinner.dark { border-color: rgba(0,0,0,.1); border-top-color: var(--cp-primary); } @keyframes cp-spin { to { transform: rotate(360deg); } } /* ── Code modal ────────────────────────────────────────────────── */ .cp-modal-overlay { position: fixed; inset: 0; z-index: 9990; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15,27,53,.6); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .25s; } .cp-modal-overlay.active { opacity: 1; pointer-events: all; } .cp-modal { position: relative; width: 100%; max-width: 460px; background: var(--cp-white); border-radius: var(--cp-radius-xl); padding: 34px; text-align: center; box-shadow: var(--cp-shadow-lg); transform: translateY(24px) scale(.98); transition: transform .25s; } .cp-modal-overlay.active .cp-modal { transform: translateY(0) scale(1); } .cp-modal-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--cp-gray-100); border: 0; cursor: pointer; font-size: 18px; color: var(--cp-gray-500); transition: var(--cp-transition); } .cp-modal-close:hover { background: var(--cp-gray-200); color: var(--cp-gray-700); } .cp-modal-store-name { font-size: 13px; color: var(--cp-gray-400); font-weight: 700; margin-bottom: 6px; } .cp-modal-title { font-size: 19px; font-weight: 800; color: var(--cp-navy); margin-bottom: 24px; } .cp-modal-code-wrap { position: relative; margin-bottom: 16px; } .cp-modal-code { width: 100%; padding: 16px 64px 16px 16px; border: 2px dashed var(--cp-primary); border-radius: var(--cp-radius); font-family: var(--cp-font-mono); font-size: 22px; font-weight: 800; letter-spacing: .12em; color: var(--cp-navy); background: var(--cp-primary-light); text-align: center; outline: none; } .cp-modal-copy-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: var(--cp-primary); color: #fff; border: 0; border-radius: var(--cp-radius-sm); padding: 9px 13px; font-size: 12px; font-weight: 800; cursor: pointer; font-family: var(--cp-font); transition: var(--cp-transition); } .cp-modal-copy-btn:hover { background: var(--cp-primary-dark); } .cp-modal-visit-btn { display: block; padding: 14px; border-radius: var(--cp-radius); background: var(--cp-btn-bg); color: var(--cp-btn-text) !important; font-weight: var(--cp-btn-fw); font-size: 15px; margin-bottom: 16px; transition: var(--cp-transition); } .cp-modal-visit-btn:hover { background: var(--cp-btn-hover-bg); box-shadow: 0 6px 16px rgba(255,107,44,.28); } .cp-modal-hint { font-size: 12px; color: var(--cp-gray-400); } /* ── Single coupon page ────────────────────────────────────────── */ .cp-single-layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; } .cp-single-coupon { background: var(--cp-white); border: 1px solid var(--cp-gray-200); border-radius: var(--cp-radius-xl); box-shadow: var(--cp-shadow); overflow: hidden; } .cp-single-coupon-header { position: relative; padding: 36px 32px; text-align: center; background: linear-gradient(135deg, var(--cp-navy), var(--cp-navy-light)); overflow: hidden; } .cp-single-coupon-header::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; } .cp-single-coupon-store-logo { position: relative; z-index: 1; width: 86px; height: 86px; object-fit: contain; border-radius: var(--cp-radius-lg); background: #fff; padding: 10px; margin-bottom: 16px; } .cp-single-coupon-store-name { position: relative; z-index: 1; color: rgba(255,255,255,.7); font-size: 13px; font-weight: 700; margin-bottom: 6px; } .cp-single-coupon-title { position: relative; z-index: 1; color: #fff; font-family: var(--cp-font-display); font-size: 24px; font-weight: 800; line-height: 1.2; } .cp-single-coupon-body { padding: 32px; } .cp-code-display { border: 2px dashed var(--cp-primary); border-radius: var(--cp-radius-lg); padding: 22px; text-align: center; margin-bottom: 20px; cursor: pointer; background: var(--cp-primary-light); transition: var(--cp-transition); } .cp-code-display:hover { background: var(--cp-primary); } .cp-code-display:hover .cp-code-text, .cp-code-display:hover .cp-code-hint { color: #fff; } .cp-code-text { font-family: var(--cp-font-mono); font-size: 28px; font-weight: 800; color: var(--cp-navy); letter-spacing: .08em; } .cp-code-hint { font-size: 12px; color: var(--cp-primary-dark); margin-top: 6px; font-weight: 700; } /* ── Newsletter ────────────────────────────────────────────────── */ .cp-newsletter-box { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; text-align: left; background: linear-gradient(135deg, var(--cp-navy), var(--cp-navy-light)); border-radius: var(--cp-radius-lg); padding: 24px 28px; margin: 28px 0; color: #fff; } .cp-newsletter-icon { font-size: 34px; flex: 0 0 auto; } .cp-newsletter-text { flex: 1 1 240px; min-width: 200px; } .cp-newsletter-title { font-family: var(--cp-font-display); font-size: 19px; font-weight: 800; color: #fff; margin: 0 0 4px; } .cp-newsletter-sub { font-size: 13px; color: rgba(255,255,255,.7); margin: 0; } .cp-newsletter-form-wrap { display: flex; align-items: stretch; gap: 0; flex: 1 1 360px; max-width: 480px; margin-left: auto; border-radius: var(--cp-radius); overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.22); } .cp-newsletter-email { flex: 1; min-width: 0; height: 50px; padding: 0 16px; border: 0; font-size: 14px; font-family: var(--cp-font); color: var(--cp-gray-900); background: #fff; outline: none; } .cp-newsletter-btn { height: 50px; padding: 0 24px; border: 0; white-space: nowrap; background: var(--cp-btn-bg); color: var(--cp-btn-text); font-weight: var(--cp-btn-fw); font-size: 14px; cursor: pointer; font-family: var(--cp-font); transition: filter var(--cp-transition); } .cp-newsletter-btn:hover { filter: brightness(1.08); } .cp-newsletter-btn:disabled { opacity: .7; cursor: not-allowed; } .cp-newsletter-msg { flex: 0 0 100%; margin-top: 4px; padding: 10px 14px; border-radius: var(--cp-radius-sm); font-size: 14px; font-weight: 700; } .cp-newsletter-msg.success { background: rgba(22,163,74,.2); color: #bbf7d0; } .cp-newsletter-msg.error { background: rgba(220,38,38,.2); color: #fca5a5; } .cp-newsletter-privacy { flex: 0 0 100%; margin: 4px 0 0; font-size: 12px; color: rgba(255,255,255,.5); } .cp-newsletter-stats { display: flex; gap: 16px; margin-top: 12px; } .cp-newsletter-stat { flex: 1; text-align: center; background: var(--cp-gray-50); border-radius: var(--cp-radius-sm); padding: 10px 14px; } .cp-newsletter-stat-num { font-family: var(--cp-font-display); font-size: 22px; font-weight: 800; color: var(--cp-primary); } .cp-newsletter-stat-label { font-size: 11px; color: var(--cp-gray-400); text-transform: uppercase; letter-spacing: .06em; } /* ══════════════════════════════════════════════════════════════════ SINGLE STORE PAGE ★ primary redesign Hero card · star rating · coupon table (responsive → cards) · request-a-code · about · FAQs · similar stores · breadcrumbs. ══════════════════════════════════════════════════════════════════ */ .cp-store-single .cp-container { max-width: 1080px; margin: 0 auto; padding: 24px 20px 64px; } /* Hero card */ .cp-store-hero { position: relative; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; background: var(--cp-white); border: 1px solid var(--cp-gray-200); border-radius: var(--cp-radius-lg); padding: 28px 30px; box-shadow: var(--cp-shadow-sm); overflow: hidden; } .cp-store-hero::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--cp-btn-bg); } .cp-store-hero-logo { width: clamp(80px, var(--cp-logo-h), 132px); height: clamp(80px, var(--cp-logo-h), 132px); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--cp-white); border: 1px solid var(--cp-gray-200); border-radius: var(--cp-radius); overflow: hidden; padding: 12px; } .cp-store-hero-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .cp-store-hero-initial { font-family: var(--cp-font-display); font-weight: 800; font-size: 44px; color: var(--cp-primary); } .cp-store-hero-body { flex: 1 1 300px; min-width: 0; } .cp-store-hero-title { font-size: var(--cp-title-fs); font-weight: 800; color: var(--cp-navy); margin: 0 0 10px; line-height: 1.18; } .cp-store-hero-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--cp-gray-500); margin-top: 12px; } .cp-store-hero-meta span { display: inline-flex; align-items: center; gap: 5px; } .cp-store-hero-meta strong { color: var(--cp-navy); } .cp-store-hero-actions { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; } /* Large hero buttons */ .cp-btn-primary-lg, .cp-btn-ghost-lg { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: var(--cp-radius); font-weight: 800; font-size: 14px; cursor: pointer; white-space: nowrap; border: 2px solid transparent; font-family: var(--cp-font); transition: var(--cp-transition); } .cp-btn-primary-lg { background: var(--cp-btn-bg); color: #fff !important; } .cp-btn-primary-lg:hover { background: var(--cp-btn-hover-bg); color: #fff !important; box-shadow: 0 6px 16px rgba(255,107,44,.3); transform: translateY(-1px); } .cp-btn-ghost-lg { background: var(--cp-white); border-color: var(--cp-gray-200); color: var(--cp-gray-700); } .cp-btn-ghost-lg:hover { border-color: var(--cp-primary); color: var(--cp-primary); } .cp-btn-ghost-lg.subscribed { background: var(--cp-green-light); border-color: var(--cp-green); color: var(--cp-green); } /* Visitor star rating */ .cp-rating { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; } .cp-stars { display: inline-flex; } .cp-star { background: none; border: 0; cursor: pointer; font-size: 22px; line-height: 1; color: var(--cp-gray-300); padding: 0 1px; transition: color .12s, transform .12s; } .cp-star.is-on { color: var(--cp-yellow); } .cp-stars:hover .cp-star { color: var(--cp-yellow); } .cp-stars .cp-star:hover ~ .cp-star { color: var(--cp-gray-300); } .cp-star:hover { transform: scale(1.12); } .cp-rating-meta { font-size: 13px; color: var(--cp-gray-500); } .cp-rating-avg { color: var(--cp-navy); font-size: 16px; font-weight: 800; } /* Panels (content sections) */ .cp-panel { background: var(--cp-white); border: 1px solid var(--cp-gray-200); border-radius: var(--cp-radius-lg); padding: 26px 28px; margin-top: 22px; box-shadow: var(--cp-shadow-sm); } .cp-panel-title { font-size: calc(var(--cp-title-fs) * .68); font-weight: 800; color: var(--cp-navy); margin: 0 0 18px; } .cp-prose { color: var(--cp-gray-600); line-height: 1.85; } .cp-prose a { color: var(--cp-primary); text-decoration: underline; } /* Highlights */ .cp-highlights-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .cp-highlights-list li { position: relative; padding: 11px 14px 11px 42px; background: var(--cp-primary-light); border: 1px solid transparent; border-radius: var(--cp-radius); color: var(--cp-gray-700); font-weight: 600; } .cp-highlights-list li::before { content: "✓"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--cp-primary); font-weight: 800; } /* ── Coupon table (desktop) ────────────────────────────────────── */ .cp-coupon-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; } .cp-coupon-table thead th { text-align: left; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--cp-gray-400); padding: 0 16px 2px; } .cp-ct-row { background: var(--cp-white); transition: box-shadow var(--cp-transition), transform var(--cp-transition); } .cp-ct-row > td { padding: 16px; vertical-align: middle; border-top: 1px solid var(--cp-gray-200); border-bottom: 1px solid var(--cp-gray-200); background: var(--cp-white); } .cp-ct-row > td:first-child { border-left: 1px solid var(--cp-gray-200); border-radius: var(--cp-radius) 0 0 var(--cp-radius); } .cp-ct-row > td:last-child { border-right: 1px solid var(--cp-gray-200); border-radius: 0 var(--cp-radius) var(--cp-radius) 0; } .cp-ct-row:hover { transform: translateY(-1px); box-shadow: var(--cp-shadow); } .cp-ct-row:hover > td { border-color: var(--cp-gray-300); } .cp-ct-row.is-expired { opacity: .55; } .cp-ct-disc { width: 110px; } .cp-ct-badge { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-width: 84px; min-height: 56px; padding: 8px 12px; border-radius: var(--cp-radius); background: var(--cp-navy); color: #fff; font-family: var(--cp-font-display); font-weight: 800; font-size: 18px; line-height: 1.1; word-break: break-word; hyphens: auto; } .cp-ct-desc { min-width: 0; } .cp-ct-store { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; } .cp-ct-store-logo { width: 22px; height: 22px; flex: 0 0 22px; object-fit: contain; border-radius: 5px; background: #fff; border: 1px solid var(--cp-gray-100); } .cp-ct-store-name { font-size: 12px; font-weight: 700; color: var(--cp-gray-500); } .cp-ct-title { font-weight: 700; color: var(--cp-navy); font-size: 15px; } .cp-ct-title:hover { color: var(--cp-primary); } .cp-ct-tags { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; } .cp-mini-tag { font-size: 11px; font-weight: 700; color: var(--cp-gray-500); background: var(--cp-gray-100); padding: 3px 9px; border-radius: 20px; } .cp-mini-verified { background: var(--cp-green-light); color: #15803D; } .cp-mini-exclusive { background: var(--cp-primary-light); color: var(--cp-primary-dark); } .cp-mini-exp { display: none; } .cp-ct-exp { width: 116px; font-size: 13px; color: var(--cp-gray-500); white-space: nowrap; } .cp-ct-action { width: 168px; text-align: right; } /* Store-table reveal button (ticket style) */ .cp-ct-getcode { position: relative; display: inline-flex; align-items: stretch; min-width: 150px; border: 2px dashed var(--cp-code-btn-border); background: var(--cp-code-btn-bg); border-radius: var(--cp-radius); overflow: hidden; padding: 0; cursor: pointer; font-family: var(--cp-font); transition: box-shadow var(--cp-transition); } .cp-ct-getcode .cp-btn-code-label { flex: 1; display: flex; align-items: center; justify-content: center; padding: 11px 12px; font-family: var(--cp-font-mono); font-weight: 800; letter-spacing: 1px; color: var(--cp-navy); filter: blur(3.5px); transition: filter var(--cp-transition); } .cp-ct-getcode .cp-btn-code-label.revealed { filter: none; } .cp-ct-getcode .cp-btn-code-action { display: flex; align-items: center; background: var(--cp-primary); color: #fff; padding: 11px 14px; font-weight: 800; font-size: 12px; white-space: nowrap; } .cp-ct-getcode:hover { box-shadow: 0 6px 16px rgba(255,107,44,.22); } .cp-ct-getcode.cp-copied { border-color: var(--cp-green); background: var(--cp-green-light); } .cp-ct-getcode.cp-copied .cp-btn-code-label { color: #15803D; } .cp-ct-getcode.cp-copied .cp-btn-code-action { background: var(--cp-green); } .cp-ct-getdeal { display: inline-flex; align-items: center; gap: 5px; background: var(--cp-navy); color: #fff !important; padding: 12px 20px; border-radius: var(--cp-radius); font-weight: 800; font-size: 13px; transition: var(--cp-transition); } .cp-ct-getdeal:hover { background: var(--cp-navy-light); color: #fff !important; transform: translateY(-1px); box-shadow: var(--cp-shadow); } .cp-ct-expired { font-size: 13px; color: var(--cp-gray-400); font-weight: 600; } .cp-empty-block { text-align: center; padding: 48px 20px; color: var(--cp-gray-400); } .cp-empty-block .cp-empty-icon { font-size: 46px; margin-bottom: 10px; } /* Request a code (tweet) */ .cp-request-code { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; padding: 18px 22px; border: 1.5px dashed var(--cp-gray-300); border-radius: var(--cp-radius); background: var(--cp-gray-50); } .cp-request-icon { font-size: 28px; } .cp-request-text { display: flex; flex-direction: column; line-height: 1.45; } .cp-request-text strong { color: var(--cp-navy); } .cp-request-text span { font-size: 13px; color: var(--cp-gray-500); } .cp-request-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; background: #000; color: #fff !important; padding: 12px 22px; border-radius: var(--cp-radius); font-weight: 800; font-size: 13px; transition: var(--cp-transition); } .cp-request-btn:hover { background: #1a1a1a; transform: translateY(-1px); } /* Tips */ .cp-tips-list { margin: 0; padding-left: 22px; display: grid; gap: 12px; color: var(--cp-gray-600); line-height: 1.7; } .cp-tips-list li::marker { color: var(--cp-primary); font-weight: 800; } /* FAQs */ .cp-faq-list { display: grid; gap: 10px; } .cp-faq-item { border: 1px solid var(--cp-gray-200); border-radius: var(--cp-radius); overflow: hidden; transition: border-color var(--cp-transition); } .cp-faq-item[open] { border-color: var(--cp-primary); } .cp-faq-q { cursor: pointer; list-style: none; padding: 16px 48px 16px 18px; font-weight: 700; color: var(--cp-navy); background: var(--cp-gray-50); position: relative; } .cp-faq-q::-webkit-details-marker { display: none; } .cp-faq-q::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 22px; line-height: 1; color: var(--cp-primary); transition: transform var(--cp-transition); } .cp-faq-item[open] .cp-faq-q::after { content: "–"; } .cp-faq-a { padding: 16px 18px; color: var(--cp-gray-600); line-height: 1.75; border-top: 1px solid var(--cp-gray-200); background: var(--cp-white); } /* Similar stores */ .cp-similar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .cp-similar-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 20px 12px; border: 1px solid var(--cp-gray-200); border-radius: var(--cp-radius); background: var(--cp-white); color: inherit; transition: var(--cp-transition); } .cp-similar-card:hover { border-color: var(--cp-primary); box-shadow: var(--cp-shadow); transform: translateY(-3px); } .cp-similar-logo { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: var(--cp-radius); background: var(--cp-white); border: 1px solid var(--cp-gray-100); overflow: hidden; padding: 6px; } .cp-similar-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .cp-similar-logo span { font-size: 24px; font-weight: 800; color: var(--cp-primary); } .cp-similar-name { font-weight: 800; font-size: 13px; color: var(--cp-navy); } .cp-similar-count { font-size: 11px; color: var(--cp-gray-400); } /* Bottom breadcrumbs */ .cp-breadcrumbs-bottom { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--cp-gray-200); } /* ── Optional two-column store layout (main + sticky sidebar) ────── */ .cp-store-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 32px; align-items: start; margin-top: 8px; } .cp-store-main, .cp-store-aside { min-width: 0; } .cp-store-aside .cp-panel { padding: 18px; margin: 0 0 20px; } .cp-store-aside .cp-panel-title { font-size: 16px; margin-bottom: 12px; } .cp-sidebar-widget { margin: 0 0 22px; } .cp-sidebar-widget-title { font-family: var(--cp-font-display); font-size: 16px; font-weight: 800; color: var(--cp-navy); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--cp-gray-100); } .cp-widget-highlights { list-style: none; margin: 0; padding: 0; } .cp-widget-highlights li { position: relative; padding: 8px 10px 8px 30px; margin-bottom: 6px; background: var(--cp-primary-light); border-radius: 6px; font-size: 13px; color: var(--cp-gray-700); } .cp-widget-highlights li::before { content: "✓"; position: absolute; left: 11px; top: 9px; color: var(--cp-primary); font-weight: 800; } .cp-widget-tips { margin: 0; padding-left: 18px; } .cp-widget-tips li { font-size: 13px; color: var(--cp-gray-700); margin-bottom: 8px; line-height: 1.55; } .cp-widget-faqs .cp-faq-q { font-size: 13px; padding: 11px 30px 11px 13px; } .cp-widget-faqs .cp-faq-a { font-size: 13px; } @media (min-width: 981px) { .cp-store-aside { position: sticky; top: 24px; } } @media (max-width: 980px) { .cp-store-layout { grid-template-columns: 1fr; gap: 0; } .cp-store-aside { margin-top: 8px; } } /* ══════════════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .cp-grid-4, .cp-grid-5 { grid-template-columns: repeat(3, 1fr); } .cp-single-layout { grid-template-columns: 1fr; gap: 22px; } } @media (max-width: 768px) { .cp-grid-2, .cp-grid-3 { grid-template-columns: 1fr; } .cp-grid-4, .cp-grid-5 { grid-template-columns: repeat(2, 1fr); } .cp-hero { padding: 44px 18px 56px; } .cp-hero-stats { gap: 28px; } .cp-store-header-inner { flex-direction: column; } .cp-store-header-actions { flex-direction: row; align-items: flex-start; } .cp-form-row { grid-template-columns: 1fr; } .cp-cashback-banner { flex-wrap: wrap; } .cp-cashback-btn { margin-left: 0; width: 100%; text-align: center; } } /* Phones — single store page becomes clean stacked cards */ @media (max-width: 680px) { .cp-store-single .cp-container { padding: 16px 14px 52px; } .cp-store-hero { flex-direction: column; text-align: center; align-items: center; gap: 16px; padding: 24px 18px; } .cp-store-hero-logo { width: 110px; height: 110px; } .cp-store-hero-body { flex: 1 1 auto; width: 100%; } .cp-store-hero-meta { justify-content: center; gap: 14px; font-size: 14px; } .cp-rating { margin-top: 8px; } .cp-store-hero-actions { width: 100%; flex-direction: row; gap: 10px; } .cp-store-hero-actions > * { flex: 1; } .cp-btn-primary-lg, .cp-btn-ghost-lg { font-size: 14px; padding: 14px 14px; } .cp-panel { padding: 18px 16px; margin-top: 16px; } /* Table → cards */ .cp-coupon-table { border-spacing: 0; } .cp-coupon-table thead { display: none; } .cp-coupon-table, .cp-coupon-table tbody { display: block; width: 100%; } .cp-ct-row { display: grid !important; grid-template-columns: auto 1fr; grid-template-areas: "badge desc" "action action"; align-items: center; gap: 12px 14px; background: var(--cp-white); border: 1px solid var(--cp-gray-200); border-radius: var(--cp-radius); padding: 14px; margin-bottom: 12px; box-shadow: var(--cp-shadow-xs); } .cp-ct-row > td { display: block; padding: 0 !important; border: none !important; width: auto !important; background: transparent; } .cp-ct-row > td:first-child, .cp-ct-row > td:last-child { border-radius: 0; } .cp-ct-row > td.cp-ct-disc { grid-area: badge; } .cp-ct-row > td.cp-ct-desc { grid-area: desc; } .cp-ct-row > td.cp-ct-exp { display: none !important; } .cp-ct-row > td.cp-ct-action { grid-area: action; width: 100% !important; } .cp-ct-badge { min-width: 70px; min-height: 52px; font-size: 17px; } .cp-ct-title { font-size: 16px; } .cp-mini-exp { display: inline-block; background: transparent; color: var(--cp-gray-500); padding-left: 0; } .cp-ct-getcode, .cp-ct-getdeal { width: 100%; min-width: 0; justify-content: center; } .cp-ct-getcode .cp-btn-code-label, .cp-ct-getcode .cp-btn-code-action { font-size: 14px; padding: 13px; } .cp-request-code { flex-direction: column; text-align: center; } .cp-request-btn { margin-left: 0; width: 100%; justify-content: center; } .cp-similar-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } /* Coupon cards stack fully */ .cp-grid-1 .cp-coupon-card { flex-direction: column; align-items: stretch; } .cp-grid-1 .cp-coupon-action { flex: 0 0 auto; width: 100%; } /* Single coupon */ .cp-single-coupon-header { padding: 28px 20px; } .cp-single-coupon-title { font-size: 21px; } /* Newsletter stacks */ .cp-newsletter-box { flex-direction: column; align-items: stretch; text-align: center; } .cp-newsletter-form-wrap { flex-direction: column; margin-left: 0; max-width: none; box-shadow: none; gap: 8px; } .cp-newsletter-email { border: 1px solid var(--cp-gray-300); border-radius: var(--cp-radius); } .cp-newsletter-btn { width: 100%; border-radius: var(--cp-radius); } } @media (max-width: 480px) { .cp-grid-4, .cp-grid-5 { grid-template-columns: 1fr; } .cp-category-grid { grid-template-columns: repeat(2, 1fr); } .cp-similar-grid { grid-template-columns: repeat(2, 1fr); } .cp-section-title { font-size: 21px; } } /* ══════════════════════════════════════════════════════════════════ THEME INTEGRATION (functional, non-aesthetic) Full-width container + strip the theme's post chrome on our singles. ══════════════════════════════════════════════════════════════════ */ body.cp-fullwidth .main-inner, body.cp-fullwidth .main, body.cp-fullwidth .container-inner > .main, body.cp-fullwidth #content, body.cp-fullwidth .content { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; float: none !important; } body.cp-fullwidth .sidebar.s1, body.cp-fullwidth .sidebar.s2, body.cp-fullwidth #sidebar-1, body.cp-fullwidth #sidebar-2 { display: none !important; } body.cp-single-clean .article-header, body.cp-single-clean header.article-header, body.cp-single-clean .entry-title, body.cp-single-clean .post-title, body.cp-single-clean h1.title, body.cp-single-clean .single-title, body.cp-single-clean .page-title, body.cp-single-clean .post-header, body.cp-single-clean article > header, body.cp-single-clean .post > .title, body.cp-single-clean .post-inner > .title, body.cp-single-clean .post-byline, body.cp-single-clean .entry-meta, body.cp-single-clean .post-metas, body.cp-single-clean .post-meta, body.cp-single-clean .byline, body.cp-single-clean .post-author-infos, body.cp-single-clean .author-bio, body.cp-single-clean .post-tags, body.cp-single-clean .post-cats, body.cp-single-clean .entry-footer, body.cp-single-clean .breadcrumbs, body.cp-single-clean #breadcrumbs, body.cp-single-clean .hu-breadcrumb, body.cp-single-clean .breadcrumb, body.cp-single-clean nav.rank-math-breadcrumb, body.cp-single-clean .trail-items, body.cp-single-clean #comments, body.cp-single-clean .comments-area, body.cp-single-clean .related-posts, body.cp-single-clean .post-related, body.cp-single-clean .single-pagination, body.cp-single-clean .post-navigation, body.cp-single-clean .page-image, body.cp-single-clean .post-image, body.cp-single-clean .featured-image { display: none !important; } body.cp-single-clean article.post, body.cp-single-clean .entry.themeform, body.cp-single-clean .entry { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } /* Reduced-motion users */ @media (prefers-reduced-motion: reduce) { .cp-wrap *, .cp-wrap *::before, .cp-wrap *::after { transition: none !important; animation: none !important; } } /* ══════════════════════════════════════════════════════════════════ SEARCH PAGE HERO (search shortcode) + misc utilities ══════════════════════════════════════════════════════════════════ */ .cp-search-hero { position: relative; overflow: hidden; text-align: center; padding: 52px 22px 56px; margin-bottom: 32px; border-radius: var(--cp-radius-xl); background: radial-gradient(1100px 320px at 50% -40%, rgba(255,107,44,.22), transparent 62%), linear-gradient(135deg, var(--cp-navy), var(--cp-navy-light)); } .cp-search-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 22px 22px; opacity: .5; } .cp-search-hero-title { position: relative; z-index: 1; font-size: clamp(26px, 4vw, 34px); font-weight: 800; color: #fff; margin: 0 0 8px; } .cp-search-hero-sub { position: relative; z-index: 1; color: rgba(255,255,255,.72); font-size: 15px; margin: 0 0 28px; } .cp-search-hero-form { position: relative; z-index: 1; max-width: 660px; margin: 0 auto; } .cp-search-hero-wrap { position: relative; display: flex; align-items: center; } .cp-search-hero-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--cp-gray-400); pointer-events: none; z-index: 2; } .cp-search-hero-input.cp-search-input { width: 100%; height: 60px; padding: 0 132px 0 50px; border: 0; border-radius: var(--cp-radius-lg); font-size: 16px; background: #fff; box-shadow: var(--cp-shadow-lg); } .cp-search-hero-input.cp-search-input:focus { box-shadow: var(--cp-ring), var(--cp-shadow-lg); } .cp-search-hero-btn { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); height: 46px; padding: 0 26px; border: 0; border-radius: var(--cp-radius); background: var(--cp-btn-bg); color: var(--cp-btn-text); font-weight: 800; font-size: 15px; cursor: pointer; font-family: var(--cp-font); transition: filter var(--cp-transition); } .cp-search-hero-btn:hover { filter: brightness(1.08); } .cp-search-hero .cp-search-results { text-align: left; top: calc(100% + 10px); } @media (max-width: 600px) { .cp-search-hero { padding: 36px 16px 40px; } .cp-search-hero-input.cp-search-input { height: 54px; padding-right: 50px; font-size: 15px; } .cp-search-hero-wrap { flex-wrap: wrap; } .cp-search-hero-btn { position: static; transform: none; width: 100%; height: 48px; margin-top: 10px; } } /* WP native search inputs upgraded by JS get .cp-ac-input */ input.cp-ac-input { width: 100%; padding: 13px 46px 13px 18px; border: 2px solid var(--cp-gray-200); border-radius: var(--cp-radius-xl); font-family: var(--cp-font); font-size: 15px; color: var(--cp-gray-900); background: var(--cp-white); outline: none; transition: border-color var(--cp-transition), box-shadow var(--cp-transition); } input.cp-ac-input:focus { border-color: var(--cp-primary); box-shadow: var(--cp-ring); } /* Archive wrapper + empty states */ .cp-stores-archive .cp-container, #cp-archive-wrap { max-width: 1080px; } .cp-no-results { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--cp-gray-400); } .cp-rating-count { color: var(--cp-gray-400); }