/* Theme Name: BigCouponCodes Child Theme URI: https://bigcouponcodes.com Description: Child theme of Couponis for BigCouponCodes. All custom CSS + PHP live here. Author: BigCouponCodes Template: couponis Version: 1.0.0 Text Domain: bigcouponcodes-child */ /* ============================================================================ FONT IMPORT (must be the first real rule in the file, above :root, or the browser ignores it). Sora = headings, Lato = body. Couponis does not ship Sora, so without this the headings fall back to a system font. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Lato:wght@400;700;900&display=swap'); /* ============================================================================ BCC DESIGN TOKENS — the single control panel for the whole site. Edit these ~11 colours + 3 shadows to reskin everything; every .bcc-* rule below reads from them (no hard-coded hex anywhere else). Palette is the refined BCC purple + gold (Concept A). ============================================================================ */ :root{ --bcc-primary: #7b2ce6; /* main brand violet: buttons, links, active */ --bcc-primary-d: #6a1fd1; /* darker violet: hover/pressed states */ --bcc-deep: #3a0f6b; /* deep purple: hero gradient top, dark areas */ --bcc-deep-2: #2a0a52; /* deepest purple: hero gradient bottom */ --bcc-bg: #f5eefb; /* page background: soft lavender */ --bcc-surface: #ffffff; /* cards / tiles surface */ --bcc-ink: #1c1226; /* primary text (near-black, warm) */ --bcc-muted: #6f6684; /* secondary/muted text */ --bcc-accent: #ffb23a; /* gold accent: highlights, checks, CTAs */ --bcc-accent-d: #f59e17; /* darker gold: hover */ --bcc-line: #eaddf7; /* hairline borders / dividers */ --sh-sm: 0 1px 2px rgba(28,18,38,.06), 0 2px 8px rgba(28,18,38,.05); /* subtle */ --sh-md: 0 8px 24px rgba(58,15,107,.10); /* card hover */ --sh-lg: 0 18px 50px rgba(58,15,107,.20); /* hero search, big lift */ } /* ============================================================================ SHARED SECTION HEADER (.bcc-sec-*) ---------------------------------------------------------------------------- Reused by every homepage section that has a title + subtitle + "view all" link (Featured stores, etc.). Defined once here so all sections match. ============================================================================ */ .bcc-sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:26px;gap:20px} .bcc-sec-title{font-family:'Sora',sans-serif;font-size:28px;font-weight:800;color:var(--bcc-ink);margin:0;letter-spacing:-.02em} .bcc-sec-sub{color:var(--bcc-muted);font-size:14.5px;margin:4px 0 0} .bcc-sec-more{font-family:'Sora',sans-serif;font-weight:700;font-size:14px;color:var(--bcc-primary);white-space:nowrap;text-decoration:none} .bcc-sec-more:hover{text-decoration:underline} /* .bcc-accent = reusable gold text colour for the highlighted word in headings */ .bcc-accent{color:var(--bcc-primary)} /* ============================================================================ HERO — output by [bcc_hero] (Concept A, search-first) ---------------------------------------------------------------------------- Deep-purple gradient band + faint masked dot texture, gold eyebrow, big headline with a gold highlight word, a white search pill (posts to /coupons/?keyword= -> bcc_search_redirect), trending store chips, and the verified ticker docked at the base. Drop [bcc_hero] into a FULL-WIDTH Elementor section with NO padding/background (the hero paints its own). ============================================================================ */ .bcc-hero{position:relative;overflow:hidden;color:#fff; background:radial-gradient(900px 420px at 50% -10%, rgba(255,178,58,.20), transparent 62%), radial-gradient(700px 360px at 15% 8%, rgba(123,44,230,.5), transparent 60%), linear-gradient(180deg,var(--bcc-deep),var(--bcc-deep-2))} /* faint dot grid, masked so it dissolves toward the bottom */ .bcc-hero::after{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.4px);background-size:24px 24px; -webkit-mask-image:radial-gradient(700px 340px at 50% 24%,#000,transparent 78%); mask-image:radial-gradient(700px 340px at 50% 24%,#000,transparent 78%)} .bcc-hero-in{position:relative;text-align:center;padding:64px 24px 0;max-width:820px;margin:0 auto} .bcc-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Sora',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#ffd591;background:rgba(255,178,58,.12);border:1px solid rgba(255,178,58,.32);padding:6px 14px;border-radius:20px} .bcc-hero-h1{font-family:'Sora',sans-serif;font-size:52px;font-weight:800;line-height:1.1;letter-spacing:-.02em;margin:20px 0 14px;color:#fff} .bcc-hero-h1 .bcc-u{color:var(--bcc-accent)} /* gold highlight word */ .bcc-hero-sub{font-size:18px;color:#e9dcff;max-width:560px;margin:0 auto 30px;line-height:1.6} /* white search pill */ .bcc-hero-search{display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:9px 9px 9px 20px;box-shadow:var(--sh-lg);max-width:640px;margin:0 auto} .bcc-hero-search svg{width:20px;height:20px;color:var(--bcc-muted);flex:none} .bcc-hero-search input{flex:1;border:0;outline:none;font-family:'Lato',sans-serif;font-size:16.5px;color:var(--bcc-ink);background:transparent} .bcc-hero-search input::placeholder{color:var(--bcc-muted)} .bcc-btn-primary{font-family:'Sora',sans-serif;font-weight:700;border:0;cursor:pointer;border-radius:11px;background:var(--bcc-primary);color:#fff;padding:14px 28px;font-size:15px;transition:.15s} .bcc-btn-primary:hover{background:var(--bcc-primary-d)} /* trending store chips under the search */ .bcc-hero-chips{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center} .bcc-hero-chips .bcc-lbl{color:#c9b6ef;font-size:13px;font-weight:600;font-family:'Sora',sans-serif} .bcc-hero-chips a{font-size:13px;color:#e9dcff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);padding:6px 13px;border-radius:20px;text-decoration:none;transition:.15s} .bcc-hero-chips a:hover{background:rgba(255,255,255,.22)} /* ticker restyled for the dark hero base (overrides the light default below) */ .bcc-hero .bcc-ticker{margin-top:44px;background:rgba(0,0,0,.16);border-top:1px solid rgba(255,255,255,.12);border-bottom:0} .bcc-hero .bcc-ticker-item{color:#e9dcff} .bcc-hero .bcc-ticker-item b{color:#fff} @media(max-width:640px){.bcc-hero-h1{font-size:34px}.bcc-hero-sub{font-size:16px}} /* ============================================================================ FEATURED STORES — output by [bcc_top_stores] ---------------------------------------------------------------------------- 6-across grid of white store tiles (logo/monogram, name, "N offers") on the lavender section background. Grid drops to 4, then 3 columns on smaller screens. Logo box shows a real when the store has a logo, else a 1-letter monogram in brand violet. ============================================================================ */ .bcc-stores{background:var(--bcc-bg);padding:52px 0} .bcc-stores-wrap{max-width:1180px;margin:0 auto;padding:0 22px} .bcc-stores-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px} .bcc-store-tile{background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:14px;padding:20px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;transition:.16s} .bcc-store-tile:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:transparent} .bcc-store-logo{width:52px;height:52px;border-radius:13px;background:#fff;border:1px solid var(--bcc-line);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:6px} .bcc-store-logo img{max-width:100%;max-height:100%;object-fit:contain} .bcc-store-mono{font-family:'Sora',sans-serif;font-weight:800;font-size:22px;color:var(--bcc-primary)} .bcc-store-name{font-family:'Sora',sans-serif;font-size:14.5px;font-weight:700;color:var(--bcc-ink)} .bcc-store-offers{font-size:12px;color:var(--bcc-muted)} @media(max-width:1024px){.bcc-stores-grid{grid-template-columns:repeat(4,1fr)}} @media(max-width:600px){.bcc-stores-grid{grid-template-columns:repeat(3,1fr)}} /* ============================================================================ VERIFIED TICKER — output by [bcc_ticker] (also embedded in the hero) ---------------------------------------------------------------------------- Infinite horizontal scroll of "✓ verified …" items. The track is printed twice in PHP and translated -50% for a seamless loop. Pauses on hover; stops entirely for prefers-reduced-motion users. This is the LIGHT default (used if placed outside the hero); the .bcc-hero override above restyles it for the dark hero. ============================================================================ */ .bcc-ticker{background:rgba(58,15,107,.06);border-top:1px solid var(--bcc-line);border-bottom:1px solid var(--bcc-line);overflow:hidden;position:relative} .bcc-ticker-track{display:flex;align-items:center;white-space:nowrap;padding:12px 0;width:max-content;animation:bcc-ticker-scroll linear infinite} .bcc-ticker-track:hover{animation-play-state:paused} .bcc-ticker-item{display:inline-flex;align-items:center;gap:8px;padding:0 26px;font-family:'Sora',sans-serif;font-size:13.5px;color:var(--bcc-muted);text-decoration:none;flex-shrink:0} .bcc-ticker-item b{color:var(--bcc-ink);font-weight:600} .bcc-ticker-item:hover b{color:var(--bcc-primary)} /* gold circular check badge */ .bcc-ticker-check{width:17px;height:17px;border-radius:50%;background:var(--bcc-accent);color:#3a0f6b;display:inline-grid;place-items:center;font-size:10px;font-weight:900;flex-shrink:0} @keyframes bcc-ticker-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.bcc-ticker-track{animation:none}} /* ============================================================================ SHOP BY CATEGORY — output by [bcc_category_pills] ---------------------------------------------------------------------------- Full section: shared .bcc-sec-* header + a wrapping pill row. Leading "All Deals" pill carries .is-active (solid violet). Lavender background to sit flush under the featured-stores section. ============================================================================ */ .bcc-cats-section{background:var(--bcc-bg);padding:0 0 52px} .bcc-cats-wrap{max-width:1180px;margin:0 auto;padding:0 22px} .bcc-cats-inner{display:flex;flex-wrap:nowrap;gap:11px;overflow-x:auto;scrollbar-width:none} .bcc-cats-inner::-webkit-scrollbar{display:none} .bcc-cats-inner>.bcc-cat{flex:0 0 auto} .bcc-cat{display:inline-flex;align-items:center;gap:9px;background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:30px;padding:10px 18px;font-family:'Sora',sans-serif;font-weight:700;font-size:14px;color:var(--bcc-ink);text-decoration:none;transition:.15s} .bcc-cat:hover{border-color:var(--bcc-primary);color:var(--bcc-primary)} .bcc-cat.is-active{background:var(--bcc-primary);color:#fff;border-color:var(--bcc-primary)} .bcc-cat .bcc-emoji{font-size:15px;line-height:1} /* ============================================================================ POPULAR STORE TAGS (.bcc-tag) — output by [bcc_popular_stores] ---------------------------------------------------------------------------- Plain inline store tags (used in the hero / inline lists). Soft violet chip. ============================================================================ */ .bcc-tag{display:inline-block;font-size:13px;color:var(--bcc-primary);background:rgba(123,44,230,.08);border:1px solid var(--bcc-line);padding:6px 13px;border-radius:20px;text-decoration:none;margin:0 6px 6px 0} .bcc-tag:hover{background:rgba(123,44,230,.14)} /* ============================================================================ "TODAY'S TOP COUPONS" SECTION HEADER — output by [bcc_deals_head] ---------------------------------------------------------------------------- Title (with gold-accented word) + a "See all deals" link, in a flex row. ============================================================================ */ .bcc-deals-head{max-width:1180px;margin:0 auto;padding:0 22px 20px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px} .bcc-deals-title{font-family:'Sora',sans-serif;font-size:28px;font-weight:800;color:var(--bcc-ink);margin:0;letter-spacing:-.02em} .bcc-deals-viewall{font-family:'Sora',sans-serif;font-weight:700;font-size:14px;color:var(--bcc-primary);white-space:nowrap;text-decoration:none} .bcc-deals-viewall:hover{text-decoration:underline} /* ============================================================================ MORE SECTIONS ADDED BELOW AS WE BUILD: coupon cards • blog listing • editors' picks • trust banner • store page • categories page • all-stores • breadcrumbs • footer • FAQ • 404 Each new block: its own commented section header, tokens only, no hex. ============================================================================ */ /* ============================================================================ TRUST STRIP — output by [bcc_trust_strip] ---------------------------------------------------------------------------- A row of pill chips (BCC's own chip language) under the hero: gold line-icon + purple value + muted label. Desktop = centered wrapping row. Mobile (<640px) = one-row HORIZONTAL SCROLLER that bleeds to the screen edge — the SAME pattern as the category pills, so the phone layout stays consistent. Tokens only. No freshness/checking claim is made here — copy kept to what's currently true. ============================================================================ */ .bcc-trust{background:var(--bcc-bg);padding:22px 0 6px} .bcc-trust-wrap{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;justify-content:center;gap:9px;flex-wrap:wrap} .bcc-trust-pill{display:inline-flex;align-items:center;gap:9px;background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:30px;padding:10px 18px;font-family:'Sora',sans-serif;font-size:14px;color:var(--bcc-ink);box-shadow:var(--sh-sm);white-space:nowrap} .bcc-trust-pill b{color:var(--bcc-primary);font-weight:800} .bcc-trust-ico{display:inline-flex;color:var(--bcc-accent-d);flex:none} .bcc-trust-ico svg{width:16px;height:16px} /* mobile: one-row horizontal scroller, edge-bleed — same as category pills */ @media(max-width:640px){ .bcc-trust{padding:18px 0 4px} .bcc-trust-wrap{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; gap:8px; padding:2px 16px 10px; margin:0 -16px; /* bleed past the section padding */ scrollbar-width:none; } .bcc-trust-wrap::-webkit-scrollbar{display:none} .bcc-trust-pill{flex:0 0 auto;scroll-snap-align:start;font-size:12.5px;padding:8px 14px} } /* ============================================================================ NATIVE COUPON CARDS — Concept A skin over Couponis native output Ported from the proven MCS solution. Money-path untouched: the keeps its native affiliate link + reveal popup; we only reskin. .partial-code is hidden and inner spans are reset because Couponis floats/positions them (that's what broke the layout). CODE/DEAL badge auto-detects via :has(.code-text-full). Two scopes: .latest-coupons = homepage GRID widget ; tax-coupon-store = LIST. ============================================================================ */ /* ---- HOMEPAGE GRID — Concept A ticket look (Couponis Latest Coupons widget) ---- Money button untouched: keeps its native affiliate link + reveal popup. We only skin it into a ticket: dashed border, hatched peek (left) + solid label (right). CODE cards have .partial-code (peek); DEAL cards have only .code-text-full (solid full-width button, no peek). Badge (::before) + left notch (::after) are pure CSS. */ .latest-coupons .white-block.coupon-box{position:relative;width:100%;background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:16px;padding:20px 20px 18px;display:flex;flex-direction:column;box-shadow:var(--sh-sm);transition:box-shadow .2s ease,transform .2s ease;overflow:visible} .latest-coupons .white-block.coupon-box:hover{box-shadow:var(--sh-md);transform:translateY(-2px)} /* CODE/DEAL badge (top-left), auto-detected from the button's inner span */ .latest-coupons .white-block.coupon-box::before{content:"CODE";position:absolute;top:14px;left:14px;z-index:2;font-family:'Sora',sans-serif;font-size:11px;font-weight:700;letter-spacing:.3px;padding:4px 9px;border-radius:6px;background:rgba(123,44,230,.10);color:var(--bcc-primary)} .latest-coupons .white-block.coupon-box:has(.code-text-full)::before{content:"DEAL";background:rgba(255,178,58,.18);color:#8a5a00} /* left ticket notch (::after, since ::before is the badge) */ .latest-coupons .white-block.coupon-box::after{content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;background:var(--bcc-bg);border:1px solid var(--bcc-line);z-index:2} /* date */ .latest-coupons .expire{font-family:'Lato',sans-serif;font-size:11px;color:var(--bcc-muted);text-align:right;display:block;margin:0 0 8px} .latest-coupons .expire .icon-clock{margin-right:4px} /* logo */ .latest-coupons .coupon-image{display:flex;align-items:center;justify-content:center;height:48px;margin:6px 0 12px;border:none} .latest-coupons .coupon-image img{max-height:44px;max-width:70%;width:auto;height:auto;object-fit:contain} /* hide the "0 used" lock meta for now (re-enable when real usage data exists) */ .latest-coupons .coupon-top-meta{display:none} .latest-coupons .white-block-content{display:flex;flex-direction:column;flex:1} /* title — wrap-safe, centered */ .latest-coupons .white-block-content h4{font-family:'Sora',sans-serif;font-size:16px;font-weight:800;line-height:1.35;margin:0 0 16px;text-align:center;min-height:44px;display:block !important;white-space:normal !important;overflow:visible !important;word-break:break-word;color:var(--bcc-ink)} .latest-coupons .white-block-content h4 *{white-space:normal !important;overflow:visible !important;max-width:100% !important;float:none !important;word-break:break-word} .latest-coupons .white-block-content h4 a.coupon-action-button{color:var(--bcc-ink);text-decoration:none;padding:0;background:none;border:none;display:inline !important} .latest-coupons .white-block-content h4 a.coupon-action-button:hover{color:var(--bcc-primary)} /* ---- MONEY BUTTON = ticket skin. Link/structure/reveal all native. ---- */ .latest-coupons a.coupon-action-button.header-alike{margin-top:auto;display:flex;align-items:stretch;width:100%;min-height:46px;border:2px dashed var(--bcc-primary);border-radius:10px;overflow:hidden;background:none;text-decoration:none} /* strip the theme's float/position on inner spans, keep them as flex children */ .latest-coupons a.coupon-action-button.header-alike > *{float:none !important;position:static !important;border:none !important;box-shadow:none !important;margin:0 !important;font-family:'Sora',sans-serif !important;font-weight:700 !important;font-size:13.5px !important;line-height:1 !important;letter-spacing:.1em !important;text-transform:uppercase !important} /* peek code (left, hatched paper) — CODE cards only */ .latest-coupons a.coupon-action-button.header-alike .partial-code{order:1;flex:1;display:flex !important;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#faf6ff,#faf6ff 8px,#fff 8px,#fff 16px);color:var(--bcc-muted) !important;white-space:nowrap;padding:0 10px} /* label (right, solid purple) — GET CODE */ .latest-coupons a.coupon-action-button.header-alike .code-text{order:2;background:var(--bcc-primary);color:#fff !important;display:flex !important;align-items:center;justify-content:center;padding:0 18px;white-space:nowrap;transition:background .15s ease} .latest-coupons a.coupon-action-button.header-alike:hover .code-text{background:var(--bcc-primary-d)} /* DEAL cards: no peek → solid full-width GOLD button (distinct from CODE's purple) */ .latest-coupons a.coupon-action-button.header-alike:has(.code-text-full){border-style:solid;border-color:var(--bcc-accent)} .latest-coupons a.coupon-action-button.header-alike .code-text-full{flex:1;background:var(--bcc-accent);color:#fff !important;display:flex !important;align-items:center;justify-content:center;padding:0 18px;white-space:nowrap;transition:background .15s ease} .latest-coupons a.coupon-action-button.header-alike:has(.code-text-full):hover .code-text-full{background:var(--bcc-accent-d)} /* ---- STORE PAGE LIST — Concept A ticket look (body.tax-coupon-store .coupon-list) ---- Same skin philosophy as the homepage grid, adapted to the horizontal list card: logo (left) · title (middle) · date + ticket button (right). Money button untouched: native affiliate link + reveal, we only style it. CODE = .code-text + .partial-code (hatched peek) -> purple DEAL = .code-text-full only, no peek -> gold ============================================================================ */ body.tax-coupon-store .coupon-box.coupon-list{position:relative;background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:16px;padding:18px 20px 18px 26px;margin-bottom:14px;box-shadow:var(--sh-sm);transition:box-shadow .2s ease,border-color .2s ease,transform .16s ease;overflow:visible} body.tax-coupon-store .coupon-box.coupon-list:hover{border-color:var(--bcc-primary);box-shadow:var(--sh-md);transform:translateY(-2px)} /* left ticket notch */ body.tax-coupon-store .coupon-box.coupon-list::after{content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;background:var(--bcc-bg);border:1px solid var(--bcc-line);z-index:2} body.tax-coupon-store .coupon-box.coupon-list .white-block-content{width:100%} body.tax-coupon-store .coupon-box.coupon-list .flex-wrap{display:flex;align-items:center;gap:20px;flex-wrap:nowrap} /* logo (left) */ body.tax-coupon-store .coupon-box.coupon-list .flex-left{flex:0 0 auto} body.tax-coupon-store .coupon-box.coupon-list .coupon-image{display:flex;align-items:center;justify-content:center;width:84px;height:60px;border:1px solid var(--bcc-line);border-radius:12px;background:#fff;overflow:hidden;padding:8px} body.tax-coupon-store .coupon-box.coupon-list .coupon-image img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} /* title (middle) — wrap-safe */ body.tax-coupon-store .coupon-box.coupon-list .flex-middle{flex:1 1 auto;min-width:0} body.tax-coupon-store .coupon-box.coupon-list .flex-middle h4{margin:0} body.tax-coupon-store .coupon-box.coupon-list .flex-middle h4 a.coupon-action-button{font-family:'Sora',sans-serif;font-size:16px;font-weight:800;line-height:1.4;color:var(--bcc-ink);text-decoration:none;background:none;border:none;padding:0;display:inline;white-space:normal !important;overflow:visible !important;text-overflow:clip !important} body.tax-coupon-store .coupon-box.coupon-list .flex-middle h4 a.coupon-action-button:hover{color:var(--bcc-primary)} body.tax-coupon-store .coupon-box.coupon-list .coupon-top-meta, body.tax-coupon-store .coupon-box.coupon-list .coupon-bottom-meta{display:none} /* right column: date + button */ body.tax-coupon-store .coupon-box.coupon-list .flex-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:10px} body.tax-coupon-store .coupon-box.coupon-list .expire{font-family:'Lato',sans-serif;font-size:11px;color:var(--bcc-muted);text-align:right;display:block} /* ---- MONEY BUTTON = ticket skin (link/structure/reveal all native) ---- */ body.tax-coupon-store .coupon-box.coupon-list a.coupon-action-button.header-alike{display:flex !important;align-items:stretch;min-width:210px;min-height:46px;border:2px dashed var(--bcc-primary) !important;border-radius:10px !important;overflow:hidden;background:none !important;box-shadow:none !important;padding:0 !important;text-decoration:none !important} /* strip theme float/position on inner spans */ body.tax-coupon-store .coupon-box.coupon-list a.coupon-action-button.header-alike > *{float:none !important;position:static !important;top:auto !important;right:auto !important;left:auto !important;bottom:auto !important;border:none !important;box-shadow:none !important;margin:0 !important;font-family:'Sora',sans-serif !important;font-weight:700 !important;font-size:13px !important;line-height:1 !important;letter-spacing:.1em !important;text-transform:uppercase !important} /* CODE: hatched peek (left) + purple label (right) */ body.tax-coupon-store .coupon-box.coupon-list a.coupon-action-button.header-alike .partial-code{order:1;flex:1;display:flex !important;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#faf6ff,#faf6ff 8px,#fff 8px,#fff 16px) !important;color:var(--bcc-muted) !important;white-space:nowrap;padding:0 10px !important} body.tax-coupon-store .coupon-box.coupon-list a.coupon-action-button.header-alike .code-text{order:2;background:var(--bcc-primary) !important;color:#fff !important;display:flex !important;align-items:center;justify-content:center;padding:0 18px !important;white-space:nowrap;transition:background .15s ease} body.tax-coupon-store .coupon-box.coupon-list a.coupon-action-button.header-alike:hover .code-text{background:var(--bcc-primary-d) !important} /* DEAL: no peek → solid gold */ body.tax-coupon-store .coupon-box.coupon-list a.coupon-action-button.header-alike:has(.code-text-full){border-style:solid !important;border-color:var(--bcc-accent) !important} body.tax-coupon-store .coupon-box.coupon-list a.coupon-action-button.header-alike .code-text-full{flex:1;background:var(--bcc-accent) !important;color:#fff !important;display:flex !important;align-items:center;justify-content:center;padding:0 18px !important;white-space:nowrap;transition:background .15s ease} body.tax-coupon-store .coupon-box.coupon-list a.coupon-action-button.header-alike:has(.code-text-full):hover .code-text-full{background:var(--bcc-accent-d) !important} body.tax-coupon-store .coupon-box.coupon-list .share-coupon{z-index:5} /* list → stack on mobile */ @media(max-width:600px){ body.tax-coupon-store .coupon-box.coupon-list .flex-wrap{flex-direction:column;align-items:stretch;gap:12px} body.tax-coupon-store .coupon-box.coupon-list .flex-right{align-items:stretch} body.tax-coupon-store .coupon-box.coupon-list a.coupon-action-button.header-alike{align-self:stretch;justify-content:center;min-width:0} body.tax-coupon-store .coupon-box.coupon-list .expire{text-align:left} } /* ============================================================================ NEWSLETTER / FOOTER SUBSCRIBE (.footer-subscribe) — SITE-WIDE ---------------------------------------------------------------------------- Ported from the proven MCS solution, recoloured to BCC (purple + gold). Native markup is hard-coded in Couponis' footer.php and is AJAX-driven (.ajax-form / a.submit-ajax-form + hidden action input) — untouched, so the future Mailchimp API integration stays safe. CSS reskin only. Key MCS learnings applied: widen the theme's narrow bootstrap column; keep the input TRANSPARENT on the dark band (a white pill looks pasted-on); give input and button their own rounded shapes with a gap between them. ============================================================================ */ /* section shell: deep purple band */ .footer-subscribe{background:linear-gradient(180deg,var(--bcc-deep),var(--bcc-deep-2));padding:52px 0;border-bottom:1px solid rgba(255,255,255,.12)} /* widen the native narrow column into a centered block */ .footer-subscribe .col-sm-6.col-sm-push-3{width:100%;left:auto;max-width:920px;margin:0 auto;float:none;text-align:center} /* envelope icon — gold */ .footer-subscribe .icon-envelope{display:inline-block;font-size:34px;color:var(--bcc-accent) !important;margin-bottom:14px} /* heading */ .footer-subscribe h4{font-family:'Sora',sans-serif;font-size:24px;font-weight:800;color:#fff;letter-spacing:-.4px;line-height:1.3;margin:0 auto 22px;max-width:640px} /* form: input + button row */ .footer-subscribe form.ajax-form{max-width:560px;margin:0 auto} .footer-subscribe .relative-holder{display:flex;gap:10px;align-items:stretch} /* email input — transparent on the dark band */ .footer-subscribe .relative-holder input.form-control{flex:1 1 auto;min-width:0;padding:15px 18px;border:1.5px solid rgba(255,255,255,.15);border-radius:10px;background:rgba(255,255,255,.07);color:#fff;font-family:'Lato',sans-serif;font-size:14px;outline:none;box-shadow:none;height:auto;transition:border-color .15s ease,background .15s ease} .footer-subscribe .relative-holder input.form-control::placeholder{color:rgba(255,255,255,.4)} .footer-subscribe .relative-holder input.form-control:focus{border-color:var(--bcc-accent);background:rgba(255,255,255,.10)} /* subscribe button (it's an — JS-hooked; styling only) — gold CTA */ .footer-subscribe .relative-holder a.submit-ajax-form{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;padding:0 28px;min-height:50px;background:var(--bcc-accent);color:#fff;font-family:'Sora',sans-serif;font-size:14px;font-weight:700;letter-spacing:.3px;border:none;border-radius:10px;text-decoration:none;white-space:nowrap;transition:background .2s ease} .footer-subscribe .relative-holder a.submit-ajax-form:hover{background:var(--bcc-accent-d)} /* AJAX result message */ .footer-subscribe .ajax-form-result{font-family:'Lato',sans-serif;font-size:13px;color:var(--bcc-accent);margin-top:12px;min-height:0} /* disclaimer */ .footer-subscribe p{font-family:'Lato',sans-serif;font-size:12px;color:rgba(255,255,255,.4);margin:14px 0 0} /* responsive */ @media(max-width:600px){ .footer-subscribe{padding:36px 0} .footer-subscribe h4{font-size:20px} .footer-subscribe .relative-holder{flex-direction:column} .footer-subscribe .relative-holder a.submit-ajax-form{padding:14px} } /* ============================================================================ FROM THE BLOG / EDITOR'S PICKS — output by [bcc_editors_picks] ---------------------------------------------------------------------------- 4-across card grid: thumb (featured image, or category-tinted emoji), a category tag pinned to the thumb, title (2-line clamp) and date · read-time. Reuses the shared .bcc-sec-* section header. Drops to 2 then 1 column. ============================================================================ */ .bcc-picks{background:transparent;padding:52px 0} .bcc-picks-wrap{max-width:1180px;margin:0 auto;padding:0 22px} .bcc-picks-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .bcc-pick-card{background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:14px;overflow:hidden;text-decoration:none;display:block;transition:.18s} .bcc-pick-card:hover{border-color:transparent;box-shadow:var(--sh-md);transform:translateY(-3px)} .bcc-pick-thumb{height:130px;display:flex;align-items:center;justify-content:center;font-size:34px;position:relative;background-size:cover;background-position:center} .bcc-pick-tag{position:absolute;top:10px;left:10px;font-family:'Sora',sans-serif;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:4px 9px;border-radius:6px} .bcc-pick-body{padding:14px 15px 16px} .bcc-pick-ttl{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;color:var(--bcc-ink);line-height:1.45;margin:0 0 7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .bcc-pick-card:hover .bcc-pick-ttl{color:var(--bcc-primary)} .bcc-pick-meta{font-family:'Lato',sans-serif;font-size:11.5px;color:var(--bcc-muted);margin:0} @media(max-width:1024px){.bcc-picks-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.bcc-picks-grid{grid-template-columns:1fr}} /* ============================================================================ BREADCRUMBS (.bcc-breadcrumb-bar) — injected by bcc_breadcrumbs_inject() ---------------------------------------------------------------------------- A "purple continuation" band that flows out of the header. Links are gold, the current (last) crumb is white. The native Couponis category breadcrumb is hidden so there is never a duplicate trail. ============================================================================ */ .bcc-breadcrumb-bar{background:var(--bcc-deep-2);width:100%;box-sizing:border-box;font-family:'Lato',sans-serif;font-size:13px;color:rgba(255,255,255,.6)} .bcc-breadcrumb-bar .bcc-bc-inner{max-width:1200px !important;margin:0 auto !important;padding:12px 22px !important;box-sizing:border-box !important} .bcc-breadcrumb-bar a, .bcc-breadcrumb-bar .bcc-bc-nav a{color:var(--bcc-accent) !important;text-decoration:none} .bcc-breadcrumb-bar a:hover, .bcc-breadcrumb-bar .bcc-bc-nav a:hover{color:var(--bcc-accent-d) !important;text-decoration:underline} .bcc-bc-nav .breadcrumb_last, .bcc-bc-nav strong{color:#fff;font-weight:600} /* hide the native Couponis breadcrumb so ours is the only one */ body.tax-coupon-category .main-title .breadcrumb, body.tax-coupon-category ul.breadcrumb, body.tax-coupon-store .main-title .breadcrumb, body.tax-coupon-store ul.breadcrumb{display:none !important} @media(max-width:600px){ .bcc-breadcrumb-bar .bcc-bc-inner{padding:10px 16px !important} .bcc-breadcrumb-bar{font-size:12px} } /* ============================================================================ TOP BAR + HEADER (Concept A) — output by the child header.php ---------------------------------------------------------------------------- Concept A's header is LIGHT: a deep-purple trust bar on top (live count + region switcher), then a WHITE sticky header with the wordmark, the WP nav menu and the theme's native AJAX search. Purple is reserved for the top bar, hero and footer. The search form markup is Couponis' own (AJAX store autocomplete) — CSS only. ============================================================================ */ /* ---------- top bar ---------- */ .bcc-top{background:var(--bcc-deep-2);color:#e2d4ff;font-size:13px;font-family:'Lato',sans-serif} .bcc-top-wrap{max-width:1180px;margin:0 auto;padding:0 22px;display:flex;justify-content:space-between;align-items:center;height:38px} .bcc-top-l{display:flex;gap:18px} .bcc-top-l span{display:inline-flex;align-items:center;gap:6px;opacity:.9} .bcc-chk{color:var(--bcc-accent);font-weight:700} .bcc-top-r{display:flex;align-items:center;gap:14px} .bcc-top-live{font-family:'Sora',sans-serif;font-weight:700;font-size:12.5px;color:#fff;display:inline-flex;align-items:center;gap:7px} .bcc-pulse{width:7px;height:7px;border-radius:50%;background:var(--bcc-accent);box-shadow:0 0 0 0 rgba(255,178,58,.55);animation:bcc-pulse 2s infinite} @keyframes bcc-pulse{70%{box-shadow:0 0 0 7px rgba(255,178,58,0)}100%{box-shadow:0 0 0 0 rgba(255,178,58,0)}} .bcc-top-divider{width:1px;height:15px;background:rgba(255,255,255,.22)} /* region switcher (multisite — the menu builds itself from the site list) */ .bcc-region{position:relative} .bcc-region-btn{display:inline-flex;align-items:center;gap:6px;font-family:'Sora',sans-serif;font-weight:700;font-size:12.5px;line-height:1;color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.15);padding:6px 12px;border-radius:8px;cursor:pointer;transition:.15s} .bcc-region-btn:hover{background:rgba(255,255,255,.2)} .bcc-region-btn svg{width:13px;height:13px;flex:none;opacity:.8} .bcc-region-caret{width:11px !important;height:11px !important;opacity:.7;transition:transform .15s} .bcc-region.is-open .bcc-region-caret{transform:rotate(180deg)} .bcc-region-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:180px;background:#fff;border:1px solid var(--bcc-line);border-radius:12px;box-shadow:var(--sh-lg);padding:6px;display:none;z-index:1000} .bcc-region.is-open .bcc-region-menu{display:block} .bcc-region-item{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;color:var(--bcc-ink);font-family:'Lato',sans-serif;font-size:13.5px;text-decoration:none;transition:.12s} .bcc-region-item:hover{background:var(--bcc-bg);color:var(--bcc-primary)} .bcc-region-item.is-active{background:var(--bcc-bg);color:var(--bcc-primary);font-weight:700} .bcc-region-flag{font-size:16px;line-height:1} /* ---------- header (white, sticky) ---------- */ .bcc-hd{position:sticky;top:0;z-index:40;background:var(--bcc-surface);border-bottom:1px solid var(--bcc-line);box-shadow:var(--sh-sm)} .bcc-hd-wrap{max-width:1180px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:22px;height:74px} .bcc-hd-right{margin-left:auto;display:flex;align-items:center;gap:14px} /* wordmark (ticket mark + text) */ .bcc-wm{display:flex;align-items:center;gap:10px;font-family:'Sora',sans-serif;font-weight:800;font-size:22px;color:var(--bcc-ink);text-decoration:none;flex:none;line-height:1} .bcc-wm-mark{width:34px;height:34px;border-radius:9px;background:var(--bcc-primary);display:grid;place-items:center;transform:rotate(-8deg);box-shadow:var(--sh-md);position:relative;flex:none} .bcc-wm-mark::after{content:"";position:absolute;left:6px;top:6px;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.08) inset} .bcc-wm-mark svg{width:18px;height:18px} .bcc-wm-txt b{color:var(--bcc-primary)} /* The native Couponis logo image is a white-on-purple graphic and would be invisible on this white header, so it is never rendered. Hidden here as well, as a safety net, in case the theme or a plugin prints it inside the header. */ .bcc-hd .logo img, .bcc-hd .bcc-logo-img{display:none !important} /* nav (native WP menu, 'main-navigation' location) */ .bcc-nav{margin-left:4px} .bcc-nav-list{display:flex;gap:5px;margin:0;padding:0;list-style:none} .bcc-nav-list li{margin:0;padding:0;position:relative} .bcc-nav-list a{display:block;padding:9px 15px;border-radius:9px;font-family:'Sora',sans-serif;font-weight:700;font-size:15px;color:var(--bcc-ink);text-decoration:none;transition:.15s;white-space:nowrap} .bcc-nav-list a:hover{background:var(--bcc-bg);color:var(--bcc-primary)} .bcc-nav-list .current-menu-item > a, .bcc-nav-list .current_page_item > a{background:var(--bcc-bg);color:var(--bcc-primary)} /* native search form, restyled for the white header */ .bcc-hd form.main-search{position:relative;display:flex;align-items:center;width:300px;background:var(--bcc-bg);border:1px solid var(--bcc-line);border-radius:10px;overflow:visible;margin:0} .bcc-hd form.main-search .form-control{flex:1;min-width:0;padding:9px 13px;background:transparent;border:none;color:var(--bcc-ink);font-family:'Lato',sans-serif;font-size:14px;outline:none;box-shadow:none;height:auto} .bcc-hd form.main-search .form-control::placeholder{color:var(--bcc-muted)} .bcc-hd form.main-search a.submit-form{flex-shrink:0;background:var(--bcc-primary);color:#fff;font-family:'Sora',sans-serif;font-weight:700;font-size:13px;padding:9px 16px;border-radius:0 9px 9px 0;text-decoration:none;transition:background .15s;display:flex;align-items:center} .bcc-hd form.main-search a.submit-form:hover{background:var(--bcc-primary-d)} .bcc-hd form.main-search .store-search-spin{display:none !important} .bcc-hd form.main-search .store-search-spin.fa-spin{display:inline-block !important;position:absolute;right:80px;top:50%;transform:translateY(-50%);color:var(--bcc-muted);z-index:1} /* AJAX autocomplete dropdown */ .bcc-hd form.main-search .store-search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--bcc-line);border-radius:10px;box-shadow:var(--sh-lg);z-index:999;overflow:hidden} .bcc-hd form.main-search .store-search-results:empty{display:none} .bcc-hd form.main-search .store-search-results p:empty{display:none} .bcc-hd form.main-search .store-search-list{margin:0;padding:0;list-style:none} .bcc-hd form.main-search .store-search-list li a{display:block;padding:10px 14px;color:var(--bcc-ink);font-size:13px;text-decoration:none} .bcc-hd form.main-search .store-search-list li a:hover{background:var(--bcc-bg);color:var(--bcc-primary)} /* Gold "Verified daily" badge — present in the markup but HIDDEN: at this header width it crowds the search bar. Change to display:inline-flex to bring it back. */ .bcc-verify{display:none;align-items:center;gap:7px;font-family:'Sora',sans-serif;font-weight:700;font-size:13px;color:var(--bcc-accent-d);background:rgba(255,178,58,.14);border:1px solid rgba(255,178,58,.35);padding:8px 14px;border-radius:9px;white-space:nowrap} .bcc-verify svg{width:14px;height:14px;flex:none} /* native account / submit-coupon icons */ .bcc-hd-actions{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none} .bcc-hd-actions li a{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;color:var(--bcc-muted);text-decoration:none;transition:.15s} .bcc-hd-actions li a:hover{background:var(--bcc-bg);color:var(--bcc-primary)} /* mobile burger (hidden on desktop) */ .bcc-burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:4px} .bcc-burger span{display:block;width:22px;height:2px;background:var(--bcc-ink);border-radius:2px;transition:.15s} @media(max-width:1100px){ .bcc-hd form.main-search{width:220px} } @media(max-width:960px){ .bcc-burger{display:flex} .bcc-hd form.main-search{display:none} .bcc-nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--bcc-line);box-shadow:var(--sh-md);display:none;margin:0;padding:8px 22px 14px} body.bcc-nav-open .bcc-nav{display:block} .bcc-nav-list{flex-direction:column;gap:0} .bcc-nav-list a{padding:12px 4px;border-bottom:1px solid var(--bcc-line);border-radius:0} .bcc-hd-wrap{height:64px;gap:14px} } @media(max-width:600px){ .bcc-top-l span:last-child{display:none} .bcc-top-wrap{padding:0 16px} .bcc-wm{font-size:19px} .bcc-hd-actions{display:none} } /* ============================================================================ FOOTER (Concept A) — output by the child footer.php ---------------------------------------------------------------------------- 4-column grid: brand · Explore (WP menu) · Top Stores (dynamic featured stores) · Company (WP menu), then the affiliate disclosure + social icons. FOOTER ORDER — why the flex/order rules below exist: The Couponis PLUGIN prints BOTH the newsletter block (.footer-subscribe) AND its own legacy footer bar (.copyrights) through do_action('couponis_footer'), which fires AFTER our footer. That hook must stay (the newsletter and the coupon modals depend on it), so instead of removing anything we: • hide the legacy bar (.copyrights) — our footer replaces it • make body a flex column and give the blocks an explicit order, so the newsletter sits ABOVE our footer, matching Concept A Social links and the copyright text are read from the Couponis theme options (Couponis WP → Footer), so they remain editable from the admin. ============================================================================ */ /* the page is a flex column purely so the two footer blocks can be re-ordered */ body{display:flex;flex-direction:column;min-height:100vh} body > .footer-subscribe{order:98} /* newsletter — above our footer */ body > .bcc-ft{order:99} /* Concept A footer — last */ .copyrights{display:none !important} /* plugin's legacy footer bar — replaced */ .bcc-ft{background:var(--bcc-deep-2);color:#cdbce8;font-family:'Lato',sans-serif} .bcc-ft-wrap{max-width:1180px;margin:0 auto;padding:0 22px} .bcc-ft-top{padding:52px 0 34px} .bcc-ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px} /* brand column */ .bcc-ft-brand .bcc-wm{color:#fff} .bcc-wm-ft b{color:var(--bcc-accent)} .bcc-ft-brand p{margin-top:14px;font-size:13.5px;line-height:1.6;color:#b7a4d8;max-width:290px} /* Link columns — used by both the WP menus and the dynamic Top Stores list. The colour is forced because the theme's own rules otherwise render these links dark, making them invisible against the purple footer. */ .bcc-ft-col h4{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;color:#fff;margin:0 0 15px} .bcc-ft-links{margin:0;padding:0;list-style:none} .bcc-ft-links li{margin:0;padding:0} .bcc-ft .bcc-ft-links a, .bcc-ft .bcc-ft-links li a{display:block;font-size:13.5px;color:#b7a4d8 !important;padding:6px 0;text-decoration:none;transition:.12s} .bcc-ft .bcc-ft-links a:hover, .bcc-ft .bcc-ft-links li a:hover{color:var(--bcc-accent) !important;padding-left:4px} /* bottom bar: disclosure + social icons (social URLs come from theme options) */ .bcc-ft-bottom{border-top:1px solid rgba(255,255,255,.10);padding:20px 0} .bcc-ft-bottom .bcc-ft-wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#9986bf} .bcc-ft-disc{max-width:720px;line-height:1.5} .bcc-ft-social{display:flex;gap:9px} .bcc-ft-social a{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;transition:.15s} .bcc-ft-social a:hover{background:var(--bcc-accent);color:var(--bcc-deep)} .bcc-ft-social svg{width:16px;height:16px} /* back-to-top (native button, kept from the parent footer) */ a.to_top.btn{background:var(--bcc-primary) !important;color:#fff !important;border:none !important;border-radius:10px !important;width:42px;height:42px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px -6px rgba(123,44,230,.5) !important;transition:background .15s !important} a.to_top.btn:hover{background:var(--bcc-primary-d) !important} a.to_top.btn .fa{color:#fff !important;font-size:18px} @media(max-width:960px){ .bcc-ft-grid{grid-template-columns:1fr 1fr;gap:28px} } @media(max-width:600px){ .bcc-ft-grid{grid-template-columns:1fr} .bcc-ft-bottom .bcc-ft-wrap{flex-direction:column;text-align:center} .bcc-ft-social{justify-content:center} } /* ============================================================================ BCC — STORE PAGE : CSS ---------------------------------------------------------------------------- PASTE AT THE END OF style.css Styles the three sidebar widgets and the affiliate-disclosure line added by the store-page PHP blocks. Nothing here touches the coupon cards or the affiliate buttons — those are already skinned in the coupon-card section. REMINDER: after any CSS change -> LiteSpeed Purge All + Ctrl+Shift+R. ============================================================================ */ /* ============================================================================ STORE PAGE SIDEBAR (.bcc-side*) — related stores · categories · subscribe ---------------------------------------------------------------------------- Shared card shell for every sidebar widget so the column reads as one system. All three are plain links/anchors — nothing here touches the coupon list or the affiliate buttons. ============================================================================ */ .bcc-side-card{background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:14px;padding:18px;margin-bottom:18px;box-shadow:var(--sh-sm)} .bcc-side-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px} .bcc-side-title{font-family:'Sora',sans-serif;font-size:15px;font-weight:800;color:var(--bcc-ink);letter-spacing:-.01em} .bcc-rs-viewall{font-family:'Sora',sans-serif;font-size:12px;font-weight:700;color:var(--bcc-primary);text-decoration:none;white-space:nowrap} .bcc-rs-viewall:hover{text-decoration:underline} /* related stores rows */ .bcc-rs-item{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:10px;text-decoration:none;transition:.14s} .bcc-rs-item:hover{background:var(--bcc-bg)} .bcc-rs-logo{width:40px;height:40px;flex:none;border-radius:10px;background:#fff;border:1px solid var(--bcc-line);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:5px} .bcc-rs-logo img{max-width:100%;max-height:100%;object-fit:contain} .bcc-rs-mono{font-family:'Sora',sans-serif;font-weight:800;font-size:16px;color:var(--bcc-primary)} .bcc-rs-info{display:flex;flex-direction:column;min-width:0} .bcc-rs-name{font-family:'Sora',sans-serif;font-size:13.5px;font-weight:700;color:var(--bcc-ink);line-height:1.3} .bcc-rs-item:hover .bcc-rs-name{color:var(--bcc-primary)} .bcc-rs-deals{font-family:'Lato',sans-serif;font-size:11.5px;color:var(--bcc-muted)} /* sidebar categories */ .bcc-side-cat{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:10px;text-decoration:none;transition:.14s} .bcc-side-cat:hover{background:var(--bcc-bg)} .bcc-side-emoji{font-size:15px;line-height:1;flex:none} .bcc-side-cat-name{font-family:'Sora',sans-serif;font-size:13.5px;font-weight:600;color:var(--bcc-ink);flex:1;min-width:0} .bcc-side-cat:hover .bcc-side-cat-name{color:var(--bcc-primary)} .bcc-side-cat-n{font-family:'Lato',sans-serif;font-size:11.5px;color:var(--bcc-muted);background:var(--bcc-bg);border-radius:20px;padding:2px 9px;flex:none} /* subscribe CTA (scrolls to the native newsletter — no second form) */ .bcc-side-sub{text-align:center;background:linear-gradient(180deg,var(--bcc-deep),var(--bcc-deep-2));border-color:transparent} .bcc-side-sub-ico{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,178,58,.14);border:1px solid rgba(255,178,58,.32);color:var(--bcc-accent);font-size:20px;margin-bottom:10px} .bcc-side-sub h4{font-family:'Sora',sans-serif;font-size:16px;font-weight:800;color:#fff;margin:0 0 6px} .bcc-side-sub p{font-family:'Lato',sans-serif;font-size:12.5px;color:#c9b6ef;margin:0 0 14px;line-height:1.5} .bcc-side-sub-btn{display:block;padding:11px 16px;border-radius:10px;background:var(--bcc-accent);color:#fff;font-family:'Sora',sans-serif;font-weight:700;font-size:13.5px;text-decoration:none;transition:background .15s} .bcc-side-sub-btn:hover{background:var(--bcc-accent-d);color:#fff} /* ============================================================================ AFFILIATE DISCLOSURE (.bcc-affiliate-disclosure) — store + category pages ---------------------------------------------------------------------------- Short FTC notice injected just under the store header, above the deals. ============================================================================ */ .bcc-affiliate-disclosure{max-width:1200px;margin:18px auto;padding:11px 15px;font-family:'Lato',sans-serif;font-size:12.5px;line-height:1.5;color:var(--bcc-muted);background:var(--bcc-bg);border:1px solid var(--bcc-line);border-radius:9px;box-sizing:border-box} .bcc-affiliate-disclosure .bcc-ad-ico{color:var(--bcc-primary);font-weight:700;margin-right:4px} @media(max-width:768px){ .bcc-affiliate-disclosure{margin:14px 15px;font-size:12px} } /* ============================================================================ STORE HEADER (.taxonomy-header) — Concept A skin over Couponis native markup ---------------------------------------------------------------------------- Native structure (confirmed by DOM inspect — we only restyle it): div.taxonomy-header.white-block > .white-block-content > .store-tax-header-wrap ├── .flex-left -> (sout tracking link) > .store-logo > img ├── .flex-middle -> .store-info > h1 ("Store (2)") [+ optional description] │ .post-share -> a.share.facebook / .twitter / ... ├── .single-tax-action > .listing-action -> grid/list view toggles └── a.visit-store -> THE AFFILIATE LINK. href carries the ?sout= tracking param. Never touched — recoloured only. The store title, its "(2)" count and the description all come from Couponis (term name / count / description), so they stay editable in the admin. ============================================================================ */ /* band */ .taxonomy-header.white-block{background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:16px;box-shadow:var(--sh-sm);padding:26px 28px;margin:22px 0} .taxonomy-header .store-tax-header-wrap{position:relative;display:flex;align-items:center;gap:22px;flex-wrap:wrap} /* logo */ .taxonomy-header .flex-left{flex:0 0 auto} .taxonomy-header .store-logo{width:120px;height:80px;border:1px solid var(--bcc-line);border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:12px} .taxonomy-header .store-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} /* title + description */ .taxonomy-header .flex-middle{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:10px} .taxonomy-header .store-info h1{font-family:'Sora',sans-serif;font-size:28px;font-weight:800;color:var(--bcc-ink);letter-spacing:-.02em;margin:0;line-height:1.25} /* gold "verified" line under the title (pure CSS — no markup added) */ .taxonomy-header .store-info h1::after{content:"✓ Updated regularly";display:block;margin-top:7px;font-family:'Sora',sans-serif;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--bcc-accent-d)} .taxonomy-header .store-info p, .taxonomy-header .store-info .small-description, .taxonomy-header .store-info .full-description{font-family:'Lato',sans-serif;font-size:14px;line-height:1.6;color:var(--bcc-muted);margin:8px 0 0;max-width:640px} .taxonomy-header .read-coupon-more, .taxonomy-header .toggle-more{color:var(--bcc-primary);font-family:'Sora',sans-serif;font-weight:700;font-size:13px;text-decoration:none} .taxonomy-header .read-coupon-more:hover{text-decoration:underline} /* share icons — small, subtle, purple on hover */ .taxonomy-header .post-share{display:flex;gap:7px;flex-wrap:wrap;margin:0} .taxonomy-header .post-share a.share{width:32px;height:32px;border-radius:9px;border:1px solid var(--bcc-line);background:var(--bcc-bg);display:inline-flex;align-items:center;justify-content:center;color:var(--bcc-muted);text-decoration:none;transition:.15s} .taxonomy-header .post-share a.share:hover{background:var(--bcc-primary);border-color:var(--bcc-primary);color:#fff} .taxonomy-header .post-share a.share i{font-size:13px;line-height:1;color:inherit} /* VISIT STORE — the affiliate link. Recolour ONLY; href/rel/target untouched. */ .taxonomy-header a.visit-store{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;justify-content:center; font-family:'Sora',sans-serif;font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase; background:var(--bcc-accent);color:#fff;border:0;border-radius:11px;padding:14px 28px;text-decoration:none; box-shadow:0 6px 18px -8px rgba(245,158,23,.7);transition:background .15s,transform .15s} .taxonomy-header a.visit-store:hover{background:var(--bcc-accent-d);color:#fff;transform:translateY(-1px)} /* grid/list view toggle — subtle, top-right */ .taxonomy-header .single-tax-action{position:absolute;top:-6px;right:0} .taxonomy-header .listing-action{display:flex;gap:4px} .taxonomy-header .listing-action a.listing-style{width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--bcc-muted);border:1px solid transparent;transition:.15s} .taxonomy-header .listing-action a.listing-style:hover{background:var(--bcc-bg);color:var(--bcc-primary)} .taxonomy-header .listing-action a.listing-style.active{background:var(--bcc-bg);border-color:var(--bcc-line);color:var(--bcc-primary)} .taxonomy-header .listing-action i{font-size:15px} @media(max-width:768px){ .taxonomy-header.white-block{padding:20px 18px} .taxonomy-header .store-tax-header-wrap{gap:16px} .taxonomy-header .store-logo{width:92px;height:64px} .taxonomy-header .store-info h1{font-size:22px} .taxonomy-header a.visit-store{width:100%;margin-left:0} .taxonomy-header .single-tax-action{display:none} } /* ============================================================================ SIDEBAR WIDGET WRAPPER RESET (.col-sm-4 .widget.white-block) ---------------------------------------------------------------------------- Couponis wraps every sidebar widget in div.widget.white-block (solid white, 50px margin-bottom) plus an inner div.white-block-content (20px padding). Our .bcc-side-card already IS the card — white, bordered, padded — so the two stack into a double box with ~68px of gap between widgets. This flattens the native wrapper so only our card is drawn, and our card owns its own spacing. Scoped to the sidebar column so nothing else is affected. (Structure confirmed by DOM inspect: div.col-sm-4 > div.widget.white-block > div.white-block-content > .bcc-side-card) ============================================================================ */ .col-sm-4 .widget.white-block{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 0 18px !important;border-radius:0 !important} .col-sm-4 .widget.white-block > .white-block-content{padding:0 !important;background:transparent !important} /* our card carries all the spacing itself */ .col-sm-4 .bcc-side-card{margin-bottom:0} /* ============================================================================ BCC — ALL STORES PAGE : CSS ---------------------------------------------------------------------------- PASTE AT THE END OF style.css Output by [bcc_all_stores]. Layout: sticky filter rail + a LOGO-FIRST card grid. Brands are scanned by their logo, so the logo is the hero of the card; this also matches the store tiles on the homepage, so the site reads as one product. Ordering is freshness-led (recently verified first), not alphabet-led. The freshness stamp ("checked 12m ago") is BCC's core promise and survives every breakpoint. Below 900px the rail becomes a slide-in DRAWER (a stacked rail would bury the stores under a wall of filters), with the search bar and category chips staying inline. REMINDER: after any CSS change -> LiteSpeed Purge All + Ctrl+Shift+R. ============================================================================ */ .bcc-as{max-width:1180px;margin:0 auto;padding:0 22px;font-family:'Lato',sans-serif;color:var(--bcc-ink)} /* ---------- head + live proof strip ---------- */ .bcc-as-head{padding:26px 0 20px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap} .bcc-as-h1{font-family:'Sora',sans-serif;font-size:34px;font-weight:800;letter-spacing:-.02em;margin:0;color:var(--bcc-ink)} .bcc-as-h1 em{font-style:normal;color:var(--bcc-primary)} .bcc-as-sub{color:var(--bcc-muted);font-size:14.5px;margin:6px 0 0;max-width:520px} .bcc-as-live{flex:none;display:flex;align-items:center;gap:9px;background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:30px;padding:9px 16px;box-shadow:var(--sh-sm)} .bcc-as-live b{font-family:'Sora',sans-serif;font-size:13px;font-weight:700} .bcc-as-live span{font-size:12.5px;color:var(--bcc-muted)} .bcc-as-pulse{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:bcc-as-p 2s infinite} @keyframes bcc-as-p{70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}} /* ---------- mobile bar + chips (hidden on desktop) ---------- */ .bcc-as-mbar{display:none;gap:8px;margin-bottom:10px;position:sticky;top:80px;z-index:6} .bcc-as-msearch{flex:1;display:flex;align-items:center;gap:8px;background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:10px;padding:10px 12px} .bcc-as-msearch svg{width:16px;height:16px;color:var(--bcc-muted);flex:none} .bcc-as-msearch input{flex:1;border:0;outline:none;background:transparent;font-family:'Lato',sans-serif;font-size:14px;color:var(--bcc-ink)} .bcc-as-mfilter{flex:none;background:var(--bcc-primary);color:#fff;border:0;border-radius:10px;padding:10px 16px;font-family:'Sora',sans-serif;font-weight:700;font-size:13px;cursor:pointer} .bcc-as-chips{display:none;gap:7px;overflow-x:auto;padding-bottom:10px;margin-bottom:12px;-webkit-overflow-scrolling:touch} .bcc-as-chips::-webkit-scrollbar{display:none} .bcc-as-chip{flex:none;background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:20px;padding:8px 14px;font-family:'Sora',sans-serif;font-weight:700;font-size:13px;color:var(--bcc-ink);white-space:nowrap;cursor:pointer} .bcc-as-chip.is-on{background:var(--bcc-primary);color:#fff;border-color:var(--bcc-primary)} /* ---------- two-pane ---------- */ .bcc-as-pane{display:grid;grid-template-columns:250px 1fr;gap:22px;align-items:start;padding-bottom:44px} .bcc-as-main{min-width:0} /* ---------- rail ---------- */ .bcc-as-rail{position:sticky;top:96px;background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:16px;padding:18px;box-shadow:var(--sh-sm)} .bcc-as-rail-top{display:none;align-items:center;justify-content:space-between;margin-bottom:14px;font-family:'Sora',sans-serif;font-weight:800;font-size:15px} .bcc-as-close{background:none;border:0;font-size:24px;line-height:1;color:var(--bcc-muted);cursor:pointer;padding:0 4px} .bcc-as-rsearch{display:flex;align-items:center;gap:8px;background:var(--bcc-bg);border:1px solid var(--bcc-line);border-radius:10px;padding:10px 12px;margin-bottom:18px} .bcc-as-rsearch svg{width:16px;height:16px;color:var(--bcc-muted);flex:none} .bcc-as-rsearch input{flex:1;border:0;outline:none;background:transparent;font-family:'Lato',sans-serif;font-size:14px;color:var(--bcc-ink)} .bcc-as-rgrp{margin-bottom:18px} .bcc-as-rgrp-last{margin-bottom:0} .bcc-as-rgrp h4{font-family:'Sora',sans-serif;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--bcc-muted);margin:0 0 9px} /* sort + category buttons share the same shape */ .bcc-as-sort,.bcc-as-cats{display:flex;flex-direction:column;gap:2px} .bcc-as-sort button,.bcc-as-cats button{display:flex;align-items:center;width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:8px 10px;border-radius:8px;font-family:'Sora',sans-serif;font-size:13.5px;font-weight:600;color:var(--bcc-ink);transition:.14s} .bcc-as-sort button:hover,.bcc-as-cats button:hover{background:var(--bcc-bg);color:var(--bcc-primary)} .bcc-as-sort button.is-on{background:var(--bcc-primary);color:#fff} .bcc-as-sort button small{display:block;font-family:'Lato',sans-serif;font-weight:400;font-size:11px;opacity:.65;margin-top:1px} .bcc-as-cats button.is-on{background:var(--bcc-bg);color:var(--bcc-primary);font-weight:700} .bcc-as-n{margin-left:auto;font-family:'Lato',sans-serif;font-size:11px;font-weight:400;color:var(--bcc-muted);background:var(--bcc-bg);border-radius:20px;padding:1px 8px} .bcc-as-cats button.is-on .bcc-as-n{background:#fff} /* letters */ .bcc-as-letters{display:flex;gap:3px;flex-wrap:wrap} .bcc-as-letters button{width:26px;height:26px;display:grid;place-items:center;background:none;border:0;cursor:pointer;border-radius:6px;font-family:'Sora',sans-serif;font-weight:700;font-size:12px;color:var(--bcc-ink);transition:.14s;padding:0} .bcc-as-letters button:hover{background:var(--bcc-bg);color:var(--bcc-primary)} .bcc-as-letters button.is-on{background:var(--bcc-primary);color:#fff} .bcc-as-letters button.is-off{color:#d7cbe6;cursor:default} .bcc-as-apply{display:none;width:100%;margin-top:14px;background:var(--bcc-primary);color:#fff;border:0;border-radius:10px;padding:12px;font-family:'Sora',sans-serif;font-weight:700;font-size:14px;cursor:pointer} /* ---------- card grid ---------- */ .bcc-as-gridhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 2px 12px} .bcc-as-gridhead b{font-family:'Sora',sans-serif;font-size:13.5px;font-weight:700} .bcc-as-gridhead span{font-size:12.5px;color:var(--bcc-muted)} .bcc-as-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .bcc-as-card{background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:16px;padding:16px; display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none; box-shadow:var(--sh-sm);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease} .bcc-as-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:transparent} .bcc-as-card[hidden]{display:none} /* the logo is the hero of the card */ .bcc-as-logo{width:100%;height:62px;border:1px solid var(--bcc-line);border-radius:11px;background:#fff; display:flex;align-items:center;justify-content:center;overflow:hidden;padding:9px;margin-bottom:11px} .bcc-as-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} .bcc-as-mono{font-family:'Sora',sans-serif;font-weight:800;font-size:24px;color:var(--bcc-primary)} .bcc-as-name{font-family:'Sora',sans-serif;font-size:14.5px;font-weight:700;color:var(--bcc-ink);line-height:1.3} .bcc-as-card:hover .bcc-as-name{color:var(--bcc-primary)} .bcc-as-count{font-size:12px;color:var(--bcc-muted);margin-top:2px} /* the freshness stamp — BCC's differentiator, kept at every size */ .bcc-as-fresh{display:inline-flex;align-items:center;gap:4px;margin-top:10px; font-family:'Sora',sans-serif;font-weight:600;font-size:11px;color:#166534; background:#f0fdf4;border:1px solid #bbf7d0;border-radius:20px;padding:3px 9px;white-space:nowrap} /* empty state */ .bcc-as-empty{grid-column:1/-1;padding:44px 18px;text-align:center;background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:16px} .bcc-as-empty b{display:block;font-family:'Sora',sans-serif;font-size:15px;font-weight:700;margin-bottom:4px} .bcc-as-empty span{font-size:13.5px;color:var(--bcc-muted)} /* ---------- info panel (single block — FAQs can be added inside later) ---------- */ .bcc-as-info-panel{margin-top:22px;background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:16px;box-shadow:var(--sh-sm);overflow:hidden} .bcc-as-info-head{display:flex;align-items:center;gap:10px;padding:18px 22px;border-bottom:1px solid var(--bcc-line)} .bcc-as-info-head h2{font-family:'Sora',sans-serif;font-size:18px;font-weight:800;margin:0;letter-spacing:-.01em} .bcc-as-info-ico{width:30px;height:30px;border-radius:9px;background:var(--bcc-bg);display:grid;place-items:center;color:var(--bcc-primary);font-weight:700;flex:none} .bcc-as-info-body{padding:20px 22px} .bcc-as-info-body p{color:var(--bcc-muted);font-size:14.5px;line-height:1.65;margin:0 0 12px;max-width:900px} .bcc-as-info-body p:last-child{margin-bottom:0} .bcc-as-info-body strong{color:var(--bcc-ink)} /* backdrop for the mobile drawer */ .bcc-as-backdrop{position:fixed;inset:0;background:rgba(28,18,38,.45);z-index:60} /* ============================================================================ RESPONSIVE — the rail becomes a drawer; the freshness stamp stays ============================================================================ */ @media(max-width:900px){ .bcc-as-pane{grid-template-columns:1fr} .bcc-as-mbar{display:flex} .bcc-as-chips{display:flex} /* rail -> slide-in drawer */ .bcc-as-rail{position:fixed;top:0;right:0;bottom:0;width:min(320px,88vw);border-radius:0;border:0;z-index:70;overflow-y:auto; transform:translateX(100%);transition:transform .22s ease;box-shadow:-10px 0 40px rgba(28,18,38,.2);padding:18px 18px 26px} .bcc-as-rail.is-open{transform:translateX(0)} .bcc-as-rail-top{display:flex} .bcc-as-rsearch{display:none} /* the mobile bar already has one */ .bcc-as-apply{display:block} .bcc-as-grid{grid-template-columns:repeat(3,1fr)} } @media(max-width:700px){ .bcc-as-grid{grid-template-columns:repeat(2,1fr);gap:11px} } @media(max-width:600px){ .bcc-as{padding:0 16px} .bcc-as-h1{font-size:26px} .bcc-as-head{padding:20px 0 16px} .bcc-as-card{padding:13px} .bcc-as-logo{height:52px;padding:7px} .bcc-as-name{font-size:13px} /* the freshness stamp stays — it is the differentiator */ .bcc-as-fresh{font-size:10px;padding:3px 8px;margin-top:8px} .bcc-as-info-body p{font-size:14px} } /* ============================================================================ BCC — CATEGORIES PAGE : CSS ---------------------------------------------------------------------------- PASTE AT THE END OF style.css Output by [bcc_categories]. A "bento shelf": tile size follows category size, so the layout itself shows where the deals are. The biggest category becomes a deep-purple hero tile; the rest sit on a 6-column grid. The LIVE TOP DEAL strip inside every tile is the point of this page — it turns a browse page into a shop page, and it is the thing a plain directory can't show. It stays at every breakpoint. Responsive: 6-col → 2-col (tablet, hero spans both) → 1-col (phone). REMINDER: after any CSS change -> LiteSpeed Purge All + Ctrl+Shift+R. ============================================================================ */ .bcc-cx{max-width:1180px;margin:0 auto;padding:0 22px 44px;font-family:'Lato',sans-serif;color:var(--bcc-ink)} /* ---------- head + live proof ---------- */ .bcc-cx-head{padding:26px 0 20px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap} .bcc-cx-h1{font-family:'Sora',sans-serif;font-size:34px;font-weight:800;letter-spacing:-.02em;margin:0;color:var(--bcc-ink)} .bcc-cx-h1 em{font-style:normal;color:var(--bcc-primary)} .bcc-cx-sub{color:var(--bcc-muted);font-size:14.5px;margin:6px 0 0;max-width:520px} .bcc-cx-live{flex:none;display:flex;align-items:center;gap:9px;background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:30px;padding:9px 16px;box-shadow:var(--sh-sm)} .bcc-cx-live b{font-family:'Sora',sans-serif;font-size:13px;font-weight:700} .bcc-cx-live span{font-size:12.5px;color:var(--bcc-muted)} .bcc-cx-pulse{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:bcc-cx-p 2s infinite} @keyframes bcc-cx-p{70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}} /* ---------- the bento shelf ---------- */ .bcc-cx-bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px} .bcc-cx-tile{grid-column:span 2;background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:18px;padding:20px; display:flex;flex-direction:column;text-decoration:none;box-shadow:var(--sh-sm); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .bcc-cx-tile:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:transparent} /* the biggest category gets the wide, deep-purple hero tile */ .bcc-cx-tile.is-hero{grid-column:span 4;background:linear-gradient(135deg,var(--bcc-deep),var(--bcc-deep-2));border-color:transparent} .bcc-cx-tile.is-hero .bcc-cx-name{color:#fff} .bcc-cx-tile.is-hero .bcc-cx-meta{color:#c9b6ef} .bcc-cx-tile.is-hero .bcc-cx-ico{background:rgba(255,178,58,.16);border:1px solid rgba(255,178,58,.3)} .bcc-cx-tile.is-hero .bcc-cx-go{color:var(--bcc-accent)} .bcc-cx-tile.is-hero .bcc-cx-deal{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)} .bcc-cx-tile.is-hero .bcc-cx-dealtxt b{color:#fff} .bcc-cx-tile.is-hero .bcc-cx-dealtxt small{color:#c9b6ef} .bcc-cx-tile.is-hero .bcc-cx-logo{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.16);color:#fff} .bcc-cx-tile.is-hero .bcc-cx-more{color:#c9b6ef} /* tile head */ .bcc-cx-top{display:flex;align-items:flex-start;gap:13px;margin-bottom:16px} .bcc-cx-ico{width:46px;height:46px;flex:none;border-radius:13px;background:var(--bcc-bg);display:grid;place-items:center;font-size:22px;line-height:1} .bcc-cx-info{flex:1;min-width:0;display:flex;flex-direction:column} .bcc-cx-name{font-family:'Sora',sans-serif;font-size:18px;font-weight:800;color:var(--bcc-ink);line-height:1.25;letter-spacing:-.01em} .bcc-cx-tile:hover .bcc-cx-name{color:var(--bcc-primary)} .bcc-cx-tile.is-hero:hover .bcc-cx-name{color:var(--bcc-accent)} .bcc-cx-meta{font-size:12.5px;color:var(--bcc-muted);margin-top:3px} .bcc-cx-go{flex:none;font-family:'Sora',sans-serif;font-weight:800;font-size:17px;color:var(--bcc-line);transition:.18s} .bcc-cx-tile:hover .bcc-cx-go{color:var(--bcc-primary);transform:translateX(3px)} /* the live top deal — the reason this page isn't a plain list */ .bcc-cx-deal{display:flex;align-items:center;gap:10px;background:var(--bcc-bg);border:1px solid var(--bcc-line);border-radius:12px;padding:11px 13px;margin-bottom:14px} .bcc-cx-deal.is-empty{opacity:.55} .bcc-cx-flash{width:26px;height:26px;flex:none;border-radius:8px;background:var(--bcc-accent);display:grid;place-items:center;font-size:13px;line-height:1} .bcc-cx-deal.is-empty .bcc-cx-flash{background:var(--bcc-line)} .bcc-cx-dealtxt{min-width:0} .bcc-cx-dealtxt b{display:block;font-family:'Sora',sans-serif;font-size:13.5px;font-weight:700;color:var(--bcc-ink);line-height:1.35; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bcc-cx-dealtxt small{display:block;font-size:11.5px;color:var(--bcc-muted)} /* real store logos inside the category */ .bcc-cx-logos{display:flex;align-items:center;gap:7px;margin-top:auto;flex-wrap:wrap} .bcc-cx-logo{width:38px;height:30px;flex:none;border:1px solid var(--bcc-line);border-radius:8px;background:#fff; display:flex;align-items:center;justify-content:center;overflow:hidden;padding:3px; font-family:'Sora',sans-serif;font-weight:800;font-size:10px;color:var(--bcc-primary)} .bcc-cx-logo img{max-width:100%;max-height:100%;object-fit:contain} .bcc-cx-more{font-family:'Sora',sans-serif;font-weight:600;font-size:11.5px;color:var(--bcc-muted)} /* ---------- info panel (single block — FAQs can be added inside later) ---------- */ .bcc-cx-panel{margin-top:22px;background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:16px;box-shadow:var(--sh-sm);overflow:hidden} .bcc-cx-panel-head{display:flex;align-items:center;gap:10px;padding:18px 22px;border-bottom:1px solid var(--bcc-line)} .bcc-cx-panel-head h2{font-family:'Sora',sans-serif;font-size:18px;font-weight:800;margin:0;letter-spacing:-.01em} .bcc-cx-panel-ico{width:30px;height:30px;border-radius:9px;background:var(--bcc-bg);display:grid;place-items:center;color:var(--bcc-primary);font-weight:700;flex:none} .bcc-cx-panel-body{padding:20px 22px} .bcc-cx-panel-body p{color:var(--bcc-muted);font-size:14.5px;line-height:1.65;margin:0 0 12px;max-width:900px} .bcc-cx-panel-body p:last-child{margin-bottom:0} .bcc-cx-panel-body strong{color:var(--bcc-ink)} /* ============================================================================ RESPONSIVE — the size hierarchy survives on tablet, flattens on phone. The live deal never drops: it is what makes this page BCC's, not a directory. ============================================================================ */ @media(max-width:960px){ .bcc-cx-bento{grid-template-columns:1fr 1fr;gap:12px} .bcc-cx-tile{grid-column:span 1} .bcc-cx-tile.is-hero{grid-column:span 2} } @media(max-width:640px){ .bcc-cx{padding:0 16px 34px} .bcc-cx-h1{font-size:26px} .bcc-cx-head{padding:20px 0 16px} .bcc-cx-bento{grid-template-columns:1fr} .bcc-cx-tile,.bcc-cx-tile.is-hero{grid-column:span 1} .bcc-cx-tile{padding:16px} .bcc-cx-ico{width:38px;height:38px;font-size:18px} .bcc-cx-name{font-size:16px} .bcc-cx-panel-body p{font-size:14px} } /* ============================================================================ BCC — CATEGORY PAGE : CSS ---------------------------------------------------------------------------- PASTE AT THE END OF style.css Two things here: A) The BCC sections around the coupon loop (hero, best-right-now, store strip, timing, verification log, quick answers, explore). B) The COUPON-CARD SKIN FOR CATEGORY PAGES — which was missing until now. The ticket skin was only scoped to .latest-coupons (homepage grid) and body.tax-coupon-store (store list), so cards on category archives were rendering unskinned. This adds body.tax-coupon-category for both the list and grid variants, reusing the same ticket look. Money path untouched throughout: the Get Code / Get Deal keeps its native href, data-affiliate and reveal popup — CSS only. REMINDER: after any CSS change -> LiteSpeed Purge All + Ctrl+Shift+R. ============================================================================ */ .bcc-catpage .container{max-width:1200px} .bcc-catpage{font-family:'Lato',sans-serif;color:var(--bcc-ink);display:block} .bcc-cat-sech{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px} .bcc-cat-sech h2{font-family:'Sora',sans-serif;font-size:20px;font-weight:800;margin:0;letter-spacing:-.02em} .bcc-cat-sech h2 em{font-style:normal;color:var(--bcc-primary)} .bcc-cat-sech > span{font-size:12.5px;color:var(--bcc-muted)} .bcc-cat-sech a{font-family:'Sora',sans-serif;font-weight:700;font-size:13px;color:var(--bcc-primary);text-decoration:none} .bcc-cat-sech a:hover{text-decoration:underline} /* ---------- 1. HERO (the intro copy lives here, not in a slab at the bottom) ---------- */ .bcc-cat-hero{background:radial-gradient(620px 280px at 12% 0%,rgba(255,178,58,.15),transparent 60%),linear-gradient(180deg,var(--bcc-deep),var(--bcc-deep-2)); color:#fff;border-radius:20px;padding:30px 32px;margin:22px 0 20px} .bcc-cat-hero-in{display:flex;align-items:flex-start;gap:22px;flex-wrap:wrap} .bcc-cat-ico{width:66px;height:66px;flex:none;border-radius:18px;background:rgba(255,178,58,.14);border:1px solid rgba(255,178,58,.32);display:grid;place-items:center;font-size:30px;line-height:1} .bcc-cat-ico img,.bcc-cat-ico svg{max-width:34px;max-height:34px} .bcc-cat-hero-main{flex:1;min-width:280px} .bcc-cat-pill{display:inline-flex;align-items:center;gap:7px;font-family:'Sora',sans-serif;font-weight:700;font-size:11px;letter-spacing:.11em;text-transform:uppercase; color:var(--bcc-accent);background:rgba(255,178,58,.12);border:1px solid rgba(255,178,58,.3);padding:5px 12px;border-radius:20px;margin-bottom:12px} .bcc-cat-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.5);animation:bcc-cat-p 2s infinite} @keyframes bcc-cat-p{70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}} .bcc-cat-hero h1{font-family:'Sora',sans-serif;font-size:32px;font-weight:800;line-height:1.18;letter-spacing:-.02em;color:#fff;margin:0} .bcc-cat-hero h1 em{font-style:normal;color:var(--bcc-accent)} .bcc-cat-intro{margin-top:10px;max-width:640px} .bcc-cat-intro p{color:#d9c9f5;font-size:14.5px;line-height:1.7;margin:0 0 9px} .bcc-cat-intro p:last-child{margin-bottom:0} .bcc-cat-intro a{color:var(--bcc-accent);font-weight:700} .bcc-cat-stats{display:flex;gap:30px;margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)} .bcc-cat-stats b{display:block;font-family:'Sora',sans-serif;font-size:22px;font-weight:800;line-height:1.2;color:#fff} .bcc-cat-stats div:first-child b{color:var(--bcc-accent)} .bcc-cat-stats span{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#b7a4d8} /* ---------- 2. BEST RIGHT NOW ---------- */ .bcc-cat-best{margin-bottom:20px} .bcc-cat-best-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .bcc-cat-pick{position:relative;background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:16px;padding:18px; display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;box-shadow:var(--sh-sm);transition:.16s} .bcc-cat-pick:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:transparent} /* an editor's pick is visibly the editor's pick */ .bcc-cat-pick.is-pick{border:2px solid var(--bcc-accent)} .bcc-cat-pick-tag{position:absolute;top:-10px;left:16px;background:var(--bcc-accent);color:#fff;font-family:'Sora',sans-serif;font-size:10px;font-weight:800; letter-spacing:.09em;text-transform:uppercase;padding:3px 11px;border-radius:20px} .bcc-cat-pick-logo{width:100%;height:46px;border:1px solid var(--bcc-line);border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center; overflow:hidden;padding:7px;margin-bottom:11px;font-family:'Sora',sans-serif;font-weight:800;font-size:11px;color:var(--bcc-primary)} .bcc-cat-pick-logo img{max-width:100%;max-height:100%;object-fit:contain} .bcc-cat-pick-title{font-family:'Sora',sans-serif;font-size:15px;font-weight:800;color:var(--bcc-ink);line-height:1.35} .bcc-cat-pick:hover .bcc-cat-pick-title{color:var(--bcc-primary)} .bcc-cat-pick-store{font-size:12px;color:var(--bcc-muted);margin-top:3px} .bcc-cat-fresh{display:inline-flex;align-items:center;gap:4px;margin-top:10px;font-family:'Sora',sans-serif;font-weight:600;font-size:11px; color:#166534;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:20px;padding:3px 9px} /* ---------- 3. STORE STRIP ---------- */ .bcc-cat-strip{background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:12px; margin-bottom:16px;box-shadow:var(--sh-sm);overflow-x:auto} .bcc-cat-strip::-webkit-scrollbar{display:none} .bcc-cat-strip-l{font-family:'Sora',sans-serif;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--bcc-muted);flex:none} .bcc-cat-strip-i{flex:none;display:flex;align-items:center;gap:9px;border:1px solid var(--bcc-line);border-radius:10px;padding:7px 12px;text-decoration:none;transition:.14s} .bcc-cat-strip-i:hover{border-color:var(--bcc-primary);background:var(--bcc-bg)} .bcc-cat-strip-logo{width:36px;height:26px;flex:none;border:1px solid var(--bcc-line);border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center; overflow:hidden;padding:2px;font-family:'Sora',sans-serif;font-weight:800;font-size:9px;color:var(--bcc-primary)} .bcc-cat-strip-logo img{max-width:100%;max-height:100%;object-fit:contain} .bcc-cat-strip-i b{display:block;font-family:'Sora',sans-serif;font-size:12.5px;font-weight:700;color:var(--bcc-ink);white-space:nowrap} .bcc-cat-strip-i span span{font-size:10.5px;color:var(--bcc-muted)} /* ---------- 6. BEST TIME TO BUY (per-category copy; hidden when empty) ---------- */ .bcc-cat-timing{background:linear-gradient(135deg,var(--bcc-deep),var(--bcc-deep-2));color:#fff;border-radius:18px;padding:26px 30px;margin:26px 0} .bcc-cat-timing h2{font-family:'Sora',sans-serif;font-size:21px;font-weight:800;margin:0 0 12px;letter-spacing:-.02em} .bcc-cat-timing h2 em{font-style:normal;color:var(--bcc-accent)} .bcc-cat-timing-body p{color:#d9c9f5;font-size:14.5px;line-height:1.75;margin:0 0 11px;max-width:900px} .bcc-cat-timing-body p:last-child{margin-bottom:0} .bcc-cat-timing-body strong{color:#fff} .bcc-cat-timing-body a{color:var(--bcc-accent);font-weight:700;text-decoration:none} .bcc-cat-timing-body a:hover{text-decoration:underline} .bcc-cat-timing-body ul{margin:0 0 11px;padding-left:20px} .bcc-cat-timing-body li{color:#d9c9f5;font-size:14.5px;line-height:1.7;margin-bottom:5px} /* ---------- 7. VERIFICATION LOG (the proof behind the promise) ---------- */ .bcc-cat-log{background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:16px;box-shadow:var(--sh-sm);overflow:hidden;margin:26px 0} .bcc-cat-log-h{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--bcc-line);background:var(--bcc-bg)} .bcc-cat-log-h h2{font-family:'Sora',sans-serif;font-size:16px;font-weight:800;margin:0} .bcc-cat-log-h > span{margin-left:auto;font-size:12px;color:var(--bcc-muted)} .bcc-cat-log-dot{width:8px;height:8px;border-radius:50%;background:#16a34a;animation:bcc-cat-p 2s infinite} .bcc-cat-log-r{display:flex;align-items:center;gap:12px;padding:11px 20px;font-size:13.5px} .bcc-cat-log-r + .bcc-cat-log-r{border-top:1px solid var(--bcc-line)} .bcc-cat-log-t{font-family:'Sora',sans-serif;font-weight:700;font-size:12px;color:var(--bcc-muted);width:104px;flex:none} .bcc-cat-log-r b{font-family:'Sora',sans-serif;font-weight:700;font-size:13.5px;color:var(--bcc-ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bcc-cat-log-ok{margin-left:auto;color:#166534;font-family:'Sora',sans-serif;font-weight:700;font-size:12px;white-space:nowrap;flex:none} .bcc-cat-log-f{padding:14px 20px;border-top:1px solid var(--bcc-line);font-size:12.5px;line-height:1.6;color:var(--bcc-muted);background:var(--bcc-bg)} /* ---------- 8. QUICK ANSWERS ---------- */ .bcc-cat-qa{margin-bottom:26px} .bcc-cat-qa-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .bcc-cat-qa-c{background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:14px;padding:16px 18px;box-shadow:var(--sh-sm)} .bcc-cat-qa-c h3{font-family:'Sora',sans-serif;font-size:14px;font-weight:800;margin:0 0 6px;display:flex;align-items:center;gap:8px;color:var(--bcc-ink)} .bcc-cat-q{width:20px;height:20px;flex:none;border-radius:6px;background:var(--bcc-bg);color:var(--bcc-primary);display:grid;place-items:center;font-size:11px;font-weight:800} .bcc-cat-qa-c p{font-size:13.5px;color:var(--bcc-muted);line-height:1.65;margin:0} .bcc-cat-qa-c strong{color:var(--bcc-ink)} /* ---------- 9. EXPLORE MORE ---------- */ .bcc-cat-more{margin-bottom:34px} .bcc-cat-more-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:11px} .bcc-cat-more-c{background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:13px;padding:14px;text-align:center;text-decoration:none;box-shadow:var(--sh-sm);transition:.16s} .bcc-cat-more-c:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:transparent} .bcc-cat-more-i{width:36px;height:36px;margin:0 auto 7px;border-radius:11px;background:var(--bcc-bg);display:grid;place-items:center;font-size:17px} .bcc-cat-more-c b{display:block;font-family:'Sora',sans-serif;font-size:12.5px;font-weight:700;color:var(--bcc-ink)} .bcc-cat-more-c:hover b{color:var(--bcc-primary)} .bcc-cat-more-c > span:last-child{font-size:10.5px;color:var(--bcc-muted)} /* ============================================================================ B) COUPON CARDS ON CATEGORY PAGES (body.tax-coupon-category) ---------------------------------------------------------------------------- This scope was missing: the ticket skin existed only for the homepage grid (.latest-coupons) and the store list (body.tax-coupon-store), so category archives rendered unskinned Couponis cards. Same skin, same rules: .partial-code is the hatched peek, inner spans are hard-reset because the theme floats them, CODE = purple, DEAL = gold. The itself — its href, data-affiliate and reveal popup — is never touched. Couponis' "Coupon Listing Type" option decides list vs grid; both are covered. ============================================================================ */ /* ---- LIST variant ---- */ body.tax-coupon-category .coupon-box.coupon-list{position:relative;background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:16px; padding:18px 20px 18px 26px;margin-bottom:14px;box-shadow:var(--sh-sm);transition:box-shadow .2s ease,border-color .2s ease,transform .16s ease;overflow:visible} body.tax-coupon-category .coupon-box.coupon-list:hover{border-color:var(--bcc-primary);box-shadow:var(--sh-md);transform:translateY(-2px)} body.tax-coupon-category .coupon-box.coupon-list::after{content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);width:18px;height:18px; border-radius:50%;background:var(--bcc-bg);border:1px solid var(--bcc-line);z-index:2} body.tax-coupon-category .coupon-box.coupon-list .white-block-content{width:100%} body.tax-coupon-category .coupon-box.coupon-list .flex-wrap{display:flex;align-items:center;gap:20px;flex-wrap:nowrap} body.tax-coupon-category .coupon-box.coupon-list .flex-left{flex:0 0 auto} body.tax-coupon-category .coupon-box.coupon-list .coupon-image{display:flex;align-items:center;justify-content:center;width:84px;height:60px; border:1px solid var(--bcc-line);border-radius:12px;background:#fff;overflow:hidden;padding:8px} body.tax-coupon-category .coupon-box.coupon-list .coupon-image img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} body.tax-coupon-category .coupon-box.coupon-list .flex-middle{flex:1 1 auto;min-width:0} body.tax-coupon-category .coupon-box.coupon-list .flex-middle h4{margin:0} body.tax-coupon-category .coupon-box.coupon-list .flex-middle h4 a.coupon-action-button{font-family:'Sora',sans-serif;font-size:16px;font-weight:800;line-height:1.4; color:var(--bcc-ink);text-decoration:none;background:none;border:none;padding:0;display:inline;white-space:normal !important;overflow:visible !important;text-overflow:clip !important} body.tax-coupon-category .coupon-box.coupon-list .flex-middle h4 a.coupon-action-button:hover{color:var(--bcc-primary)} body.tax-coupon-category .coupon-box.coupon-list .coupon-top-meta, body.tax-coupon-category .coupon-box.coupon-list .coupon-bottom-meta{display:none} body.tax-coupon-category .coupon-box.coupon-list .flex-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:10px} body.tax-coupon-category .coupon-box.coupon-list .expire{font-family:'Lato',sans-serif;font-size:11px;color:var(--bcc-muted);text-align:right;display:block} /* the money button — ticket skin only */ body.tax-coupon-category .coupon-box.coupon-list a.coupon-action-button.header-alike{display:flex !important;align-items:stretch;min-width:210px;min-height:46px; border:2px dashed var(--bcc-primary) !important;border-radius:10px !important;overflow:hidden;background:none !important;box-shadow:none !important;padding:0 !important;text-decoration:none !important} body.tax-coupon-category .coupon-box.coupon-list a.coupon-action-button.header-alike > *{float:none !important;position:static !important;top:auto !important;right:auto !important; left:auto !important;bottom:auto !important;border:none !important;box-shadow:none !important;margin:0 !important;font-family:'Sora',sans-serif !important;font-weight:700 !important; font-size:13px !important;line-height:1 !important;letter-spacing:.1em !important;text-transform:uppercase !important} body.tax-coupon-category .coupon-box.coupon-list a.coupon-action-button.header-alike .partial-code{order:1;flex:1;display:flex !important;align-items:center;justify-content:center; background:repeating-linear-gradient(45deg,#faf6ff,#faf6ff 8px,#fff 8px,#fff 16px) !important;color:var(--bcc-muted) !important;white-space:nowrap;padding:0 10px !important} body.tax-coupon-category .coupon-box.coupon-list a.coupon-action-button.header-alike .code-text{order:2;background:var(--bcc-primary) !important;color:#fff !important; display:flex !important;align-items:center;justify-content:center;padding:0 18px !important;white-space:nowrap;transition:background .15s ease} body.tax-coupon-category .coupon-box.coupon-list a.coupon-action-button.header-alike:hover .code-text{background:var(--bcc-primary-d) !important} body.tax-coupon-category .coupon-box.coupon-list a.coupon-action-button.header-alike:has(.code-text-full){border-style:solid !important;border-color:var(--bcc-accent) !important} body.tax-coupon-category .coupon-box.coupon-list a.coupon-action-button.header-alike .code-text-full{flex:1;background:var(--bcc-accent) !important;color:#fff !important; display:flex !important;align-items:center;justify-content:center;padding:0 18px !important;white-space:nowrap;transition:background .15s ease} body.tax-coupon-category .coupon-box.coupon-list a.coupon-action-button.header-alike:has(.code-text-full):hover .code-text-full{background:var(--bcc-accent-d) !important} body.tax-coupon-category .coupon-box.coupon-list .share-coupon{z-index:5} /* ---- GRID variant ---- */ body.tax-coupon-category .white-block.coupon-box.coupon-grid{position:relative;width:100%;background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:16px; padding:20px 20px 18px;display:flex;flex-direction:column;box-shadow:var(--sh-sm);transition:box-shadow .2s ease,transform .2s ease;overflow:visible;margin-bottom:16px} body.tax-coupon-category .white-block.coupon-box.coupon-grid:hover{box-shadow:var(--sh-md);transform:translateY(-2px)} body.tax-coupon-category .white-block.coupon-box.coupon-grid::before{content:"CODE";position:absolute;top:14px;left:14px;z-index:2;font-family:'Sora',sans-serif;font-size:11px; font-weight:700;letter-spacing:.3px;padding:4px 9px;border-radius:6px;background:rgba(123,44,230,.10);color:var(--bcc-primary)} body.tax-coupon-category .white-block.coupon-box.coupon-grid:has(.code-text-full)::before{content:"DEAL";background:rgba(255,178,58,.18);color:#8a5a00} body.tax-coupon-category .white-block.coupon-box.coupon-grid::after{content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);width:18px;height:18px; border-radius:50%;background:var(--bcc-bg);border:1px solid var(--bcc-line);z-index:2} body.tax-coupon-category .coupon-grid .expire{font-family:'Lato',sans-serif;font-size:11px;color:var(--bcc-muted);text-align:right;display:block;margin:0 0 8px} body.tax-coupon-category .coupon-grid .coupon-image{display:flex;align-items:center;justify-content:center;height:48px;margin:6px 0 12px;border:none} body.tax-coupon-category .coupon-grid .coupon-image img{max-height:44px;max-width:70%;width:auto;height:auto;object-fit:contain} body.tax-coupon-category .coupon-grid .coupon-top-meta{display:none} body.tax-coupon-category .coupon-grid .white-block-content{display:flex;flex-direction:column;flex:1} body.tax-coupon-category .coupon-grid .white-block-content h4{font-family:'Sora',sans-serif;font-size:16px;font-weight:800;line-height:1.35;margin:0 0 16px;text-align:center; min-height:44px;display:block !important;white-space:normal !important;overflow:visible !important;word-break:break-word;color:var(--bcc-ink)} body.tax-coupon-category .coupon-grid .white-block-content h4 *{white-space:normal !important;overflow:visible !important;max-width:100% !important;float:none !important;word-break:break-word} body.tax-coupon-category .coupon-grid .white-block-content h4 a.coupon-action-button{color:var(--bcc-ink);text-decoration:none;padding:0;background:none;border:none;display:inline !important} body.tax-coupon-category .coupon-grid .white-block-content h4 a.coupon-action-button:hover{color:var(--bcc-primary)} body.tax-coupon-category .coupon-grid a.coupon-action-button.header-alike{margin-top:auto;display:flex;align-items:stretch;width:100%;min-height:46px; border:2px dashed var(--bcc-primary);border-radius:10px;overflow:hidden;background:none;text-decoration:none} body.tax-coupon-category .coupon-grid a.coupon-action-button.header-alike > *{float:none !important;position:static !important;border:none !important;box-shadow:none !important; margin:0 !important;font-family:'Sora',sans-serif !important;font-weight:700 !important;font-size:13.5px !important;line-height:1 !important;letter-spacing:.1em !important;text-transform:uppercase !important} body.tax-coupon-category .coupon-grid a.coupon-action-button.header-alike .partial-code{order:1;flex:1;display:flex !important;align-items:center;justify-content:center; background:repeating-linear-gradient(45deg,#faf6ff,#faf6ff 8px,#fff 8px,#fff 16px);color:var(--bcc-muted) !important;white-space:nowrap;padding:0 10px} body.tax-coupon-category .coupon-grid a.coupon-action-button.header-alike .code-text{order:2;background:var(--bcc-primary);color:#fff !important;display:flex !important; align-items:center;justify-content:center;padding:0 18px;white-space:nowrap;transition:background .15s ease} body.tax-coupon-category .coupon-grid a.coupon-action-button.header-alike:hover .code-text{background:var(--bcc-primary-d)} body.tax-coupon-category .coupon-grid a.coupon-action-button.header-alike:has(.code-text-full){border-style:solid;border-color:var(--bcc-accent)} body.tax-coupon-category .coupon-grid a.coupon-action-button.header-alike .code-text-full{flex:1;background:var(--bcc-accent);color:#fff !important;display:flex !important; align-items:center;justify-content:center;padding:0 18px;white-space:nowrap;transition:background .15s ease} body.tax-coupon-category .coupon-grid a.coupon-action-button.header-alike:has(.code-text-full):hover .code-text-full{background:var(--bcc-accent-d)} body.tax-coupon-category .coupon-grid .share-coupon{z-index:5} /* native pagination, reskinned */ body.tax-coupon-category .pagination.header-alike{display:flex;gap:6px;justify-content:center;margin:18px 0 30px;padding:0} body.tax-coupon-category .pagination.header-alike .page-numbers{display:grid;place-items:center;min-width:38px;height:38px;padding:0 12px;border:1px solid var(--bcc-line); border-radius:9px;background:var(--bcc-surface);font-family:'Sora',sans-serif;font-weight:700;font-size:13.5px;color:var(--bcc-ink);text-decoration:none;transition:.14s} body.tax-coupon-category .pagination.header-alike .page-numbers:hover{border-color:var(--bcc-primary);color:var(--bcc-primary)} body.tax-coupon-category .pagination.header-alike .page-numbers.current{background:var(--bcc-primary);border-color:var(--bcc-primary);color:#fff} /* ============================================================================ RESPONSIVE ============================================================================ */ @media(max-width:1000px){ .bcc-cat-best-grid{grid-template-columns:repeat(2,1fr)} .bcc-cat-more-grid{grid-template-columns:repeat(3,1fr)} .bcc-cat-qa-grid{grid-template-columns:1fr} } @media(max-width:768px){ body.tax-coupon-category .coupon-box.coupon-list .flex-wrap{flex-direction:column;align-items:stretch;gap:12px} body.tax-coupon-category .coupon-box.coupon-list .flex-right{align-items:stretch} body.tax-coupon-category .coupon-box.coupon-list a.coupon-action-button.header-alike{align-self:stretch;justify-content:center;min-width:0} body.tax-coupon-category .coupon-box.coupon-list .expire{text-align:left} } @media(max-width:640px){ .bcc-cat-hero{padding:22px 20px} .bcc-cat-hero h1{font-size:25px} .bcc-cat-ico{width:52px;height:52px;font-size:24px} .bcc-cat-stats{gap:20px} .bcc-cat-best-grid{grid-template-columns:1fr} .bcc-cat-more-grid{grid-template-columns:repeat(2,1fr)} .bcc-cat-timing{padding:20px} .bcc-cat-log-t{width:84px} .bcc-cat-log-r b{font-size:12.5px} } /* ============================================================================ B) COUPON CARDS ON CATEGORY PAGES (body.tax-coupon-category) ---------------------------------------------------------------------------- Ported from the proven MCS solution. The theme option stays "List" (so STORE pages keep their list layout) — the category page instead TRANSFORMS those list cards into a 3-up grid in CSS: • the empty native sidebar (col-sm-4) is hidden • col-sm-8 becomes the grid itself, and the inner Bootstrap .row wrappers are dissolved with display:contents so every card is a direct grid item • the card's horizontal flex row (logo | title | button) is re-stacked into a vertical card (logo on top, title centred, button full width) The money button keeps its native href, data-affiliate and reveal popup — ticket skin only: CODE = purple + hatched peek, DEAL = solid gold. ============================================================================ */ /* ---- layout: full width, drop the empty sidebar, make col-sm-8 the grid ---- */ body.tax-coupon-category .main-listing .col-sm-4{display:none} body.tax-coupon-category .main-listing .col-sm-8{width:100%;float:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px} /* dissolve the inner .row wrappers so all cards flow as direct grid items */ body.tax-coupon-category .main-listing .col-sm-8 > .row{display:contents} body.tax-coupon-category .main-listing .col-sm-8 > .row::before, body.tax-coupon-category .main-listing .col-sm-8 > .row::after{content:none;display:none} body.tax-coupon-category .main-listing .col-sm-8 .col-sm-12, body.tax-coupon-category .main-listing .col-sm-8 .col-sm-6{width:100%;max-width:100%;padding:0;margin:0;float:none} /* pagination spans the whole grid, not one cell */ body.tax-coupon-category .main-listing .col-sm-8 > .pagination{grid-column:1 / -1} /* ---- card shell ---- */ body.tax-coupon-category .coupon-box.coupon-list{position:relative;width:100%;background:var(--bcc-surface);border:1px solid var(--bcc-line); border-radius:16px;padding:20px;margin:0;box-shadow:var(--sh-sm);transition:box-shadow .2s ease,transform .2s ease;overflow:visible;display:flex;flex-direction:column} body.tax-coupon-category .coupon-box.coupon-list:hover{box-shadow:var(--sh-md);transform:translateY(-2px)} body.tax-coupon-category .coupon-box.coupon-list .white-block-content{width:100%;display:flex;flex-direction:column;flex:1} /* CODE/DEAL badge, auto-detected: CODE has .partial-code, DEAL does not */ body.tax-coupon-category .coupon-box.coupon-list::before{content:"DEAL";position:absolute;top:14px;left:14px;z-index:3; font-family:'Sora',sans-serif;font-size:11px;font-weight:700;letter-spacing:.3px;padding:4px 9px;border-radius:6px; background:rgba(255,178,58,.18);color:#8a5a00} body.tax-coupon-category .coupon-box.coupon-list:has(.partial-code)::before{content:"CODE";background:rgba(123,44,230,.10);color:var(--bcc-primary)} /* left ticket notch */ body.tax-coupon-category .coupon-box.coupon-list::after{content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%); width:18px;height:18px;border-radius:50%;background:var(--bcc-bg);border:1px solid var(--bcc-line);z-index:2} /* ---- re-stack the horizontal row into a vertical card ---- */ body.tax-coupon-category .coupon-box.coupon-list .flex-wrap{display:flex;flex-direction:column;align-items:stretch;gap:0;flex:1} body.tax-coupon-category .coupon-box.coupon-list .flex-left{order:1;display:flex;align-items:center;justify-content:center} body.tax-coupon-category .coupon-box.coupon-list .flex-middle{order:2;width:100%;min-width:0;text-align:center} body.tax-coupon-category .coupon-box.coupon-list .flex-right{order:3;display:flex;flex-direction:column;margin-top:auto} /* logo, centred */ body.tax-coupon-category .coupon-box.coupon-list a.coupon-image{display:flex;align-items:center;justify-content:center;height:48px;width:100%; margin:10px 0 14px;border:none;background:none;padding:0} body.tax-coupon-category .coupon-box.coupon-list a.coupon-image img{max-height:44px;max-width:70%;width:auto;height:auto;object-fit:contain} /* native meta lists off */ body.tax-coupon-category .coupon-box.coupon-list .coupon-top-meta, body.tax-coupon-category .coupon-box.coupon-list .coupon-bottom-meta{display:none} /* title: fixed 2-line box so every card's button lines up */ body.tax-coupon-category .coupon-box.coupon-list .flex-middle h4{font-family:'Sora',sans-serif;font-size:16px;font-weight:800;line-height:1.35; color:var(--bcc-ink);margin:0 0 14px;width:100%;text-align:center !important;height:44px;display:flex;align-items:center;justify-content:center; white-space:normal;overflow:hidden;word-break:break-word} body.tax-coupon-category .coupon-box.coupon-list .flex-middle h4 a.coupon-action-button{display:inline;padding:0;margin:0;border:none;background:none; color:inherit;font:inherit;text-decoration:none;white-space:normal;overflow:visible;text-align:center !important} body.tax-coupon-category .coupon-box.coupon-list .flex-middle h4 a.coupon-action-button:hover{color:var(--bcc-primary)} /* expire date, above the button */ body.tax-coupon-category .coupon-box.coupon-list .flex-right .expire{font-family:'Lato',sans-serif;font-size:11px;color:var(--bcc-muted); text-align:center;display:block;margin:0 0 10px} body.tax-coupon-category .coupon-box.coupon-list .flex-right .expire .icon-clock{margin-right:4px} /* ---- money button: full-width ticket. Native href/reveal untouched. ---- */ body.tax-coupon-category .coupon-box.coupon-list a.coupon-action-button.header-alike{display:flex !important;align-items:stretch;width:100%; min-height:46px;border:2px dashed var(--bcc-primary) !important;border-radius:10px !important;overflow:hidden;background:none !important; box-shadow:none !important;padding:0 !important;text-decoration:none !important} /* the theme floats/positions the inner spans — hard-reset them */ body.tax-coupon-category .coupon-box.coupon-list a.coupon-action-button.header-alike > *{float:none !important;position:static !important; top:auto !important;right:auto !important;left:auto !important;bottom:auto !important;border:none !important;box-shadow:none !important; margin:0 !important;font-family:'Sora',sans-serif !important;font-weight:700 !important;font-size:13.5px !important;line-height:1 !important; letter-spacing:.1em !important;text-transform:uppercase !important} /* CODE: hatched peek (left) + purple label (right) */ body.tax-coupon-category .coupon-box.coupon-list a.coupon-action-button.header-alike .partial-code{order:1;flex:1;display:flex !important; align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#faf6ff,#faf6ff 8px,#fff 8px,#fff 16px) !important; color:var(--bcc-muted) !important;white-space:nowrap;padding:0 10px !important} body.tax-coupon-category .coupon-box.coupon-list a.coupon-action-button.header-alike .code-text{order:2;background:var(--bcc-primary) !important; color:#fff !important;display:flex !important;align-items:center;justify-content:center;padding:0 18px !important;white-space:nowrap;transition:background .15s ease} body.tax-coupon-category .coupon-box.coupon-list a.coupon-action-button.header-alike:hover .code-text{background:var(--bcc-primary-d) !important} /* DEAL: no peek -> solid gold, full width */ body.tax-coupon-category .coupon-box.coupon-list a.coupon-action-button.header-alike:has(.code-text-full){border-style:solid !important;border-color:var(--bcc-accent) !important} body.tax-coupon-category .coupon-box.coupon-list a.coupon-action-button.header-alike .code-text-full{flex:1;background:var(--bcc-accent) !important; color:#fff !important;display:flex !important;align-items:center;justify-content:center;padding:0 18px !important;white-space:nowrap;transition:background .15s ease} body.tax-coupon-category .coupon-box.coupon-list a.coupon-action-button.header-alike:has(.code-text-full):hover .code-text-full{background:var(--bcc-accent-d) !important} body.tax-coupon-category .coupon-box.coupon-list .share-coupon{z-index:5} /* native pagination, reskinned */ body.tax-coupon-category .pagination.header-alike{display:flex;gap:6px;justify-content:center;margin:18px 0 30px;padding:0} body.tax-coupon-category .pagination.header-alike .page-numbers{display:grid;place-items:center;min-width:38px;height:38px;padding:0 12px; border:1px solid var(--bcc-line);border-radius:9px;background:var(--bcc-surface);font-family:'Sora',sans-serif;font-weight:700;font-size:13.5px; color:var(--bcc-ink);text-decoration:none;transition:.14s} body.tax-coupon-category .pagination.header-alike .page-numbers:hover{border-color:var(--bcc-primary);color:var(--bcc-primary)} body.tax-coupon-category .pagination.header-alike .page-numbers.current{background:var(--bcc-primary);border-color:var(--bcc-primary);color:#fff} @media(max-width:1000px){ body.tax-coupon-category .main-listing .col-sm-8{grid-template-columns:repeat(2,1fr)} } @media(max-width:640px){ body.tax-coupon-category .main-listing .col-sm-8{grid-template-columns:1fr} } /* ============================================================================ BCC — BLOG : CSS ---------------------------------------------------------------------------- PASTE AT THE END OF style.css Three parts: A) LISTING — output by [bcc_blog_listing] (an Elementor shortcode widget) B) SINGLE POST — a skin over Couponis' NATIVE single-post template. No template override: a blog post has no affiliate path, and the native markup is fine — it just needs typography and spacing. C) DEALS BLOCK — output by [bcc_deals], dropped at the end of an article. The freshness stamp ("updated 2 days ago") appears on the blog too: it is the same proof the rest of the site makes, and it tells a reader an article is maintained, not abandoned. REMINDER: after any CSS change -> LiteSpeed Purge All + Ctrl+Shift+R. ============================================================================ */ /* ============================================================================ A) BLOG LISTING ============================================================================ */ .bcc-blog{max-width:1180px;margin:0 auto;padding:0 22px 40px;font-family:'Lato',sans-serif;color:var(--bcc-ink)} .bcc-blog-head{padding:26px 0 20px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap} .bcc-blog-h1{font-family:'Sora',sans-serif;font-size:34px;font-weight:800;letter-spacing:-.02em;margin:0} .bcc-blog-h1 em{font-style:normal;color:var(--bcc-primary)} .bcc-blog-sub{color:var(--bcc-muted);font-size:14.5px;margin:6px 0 0;max-width:540px} .bcc-blog-search{flex:none;display:flex;align-items:center;gap:8px;background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:11px;padding:10px 14px;width:280px;box-shadow:var(--sh-sm)} .bcc-blog-search svg{width:16px;height:16px;color:var(--bcc-muted);flex:none} .bcc-blog-search input{flex:1;border:0;outline:none;background:transparent;font-family:'Lato',sans-serif;font-size:14px;color:var(--bcc-ink)} /* topic pills = the post categories in use */ .bcc-blog-topics{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px} .bcc-blog-topic{background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:20px;padding:8px 15px;font-family:'Sora',sans-serif;font-weight:700;font-size:13px;color:var(--bcc-ink);cursor:pointer;transition:.14s} .bcc-blog-topic:hover{border-color:var(--bcc-primary);color:var(--bcc-primary)} .bcc-blog-topic.is-on{background:var(--bcc-primary);color:#fff;border-color:var(--bcc-primary)} /* shared bits */ .bcc-blog-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12px;color:var(--bcc-muted);margin-top:10px} .bcc-blog-fresh{display:inline-flex;align-items:center;gap:4px;font-family:'Sora',sans-serif;font-weight:600;font-size:11px;color:#166534;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:20px;padding:3px 9px} /* featured + side */ .bcc-blog-feat{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:16px} .bcc-blog-fmain{background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:18px;overflow:hidden;box-shadow:var(--sh-sm);display:flex;flex-direction:column;text-decoration:none;transition:.16s} .bcc-blog-fmain:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:transparent} .bcc-blog-fthumb{height:230px;background:linear-gradient(135deg,var(--bcc-deep),var(--bcc-deep-2));display:grid;place-items:center;font-size:52px;position:relative} .bcc-blog-ftag{position:absolute;top:14px;left:14px;background:var(--bcc-accent);color:#fff;font-family:'Sora',sans-serif;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:4px 11px;border-radius:20px} .bcc-blog-fbody{padding:20px;display:flex;flex-direction:column} .bcc-blog-ftitle{font-family:'Sora',sans-serif;font-size:22px;font-weight:800;line-height:1.3;color:var(--bcc-ink);letter-spacing:-.01em} .bcc-blog-fmain:hover .bcc-blog-ftitle{color:var(--bcc-primary)} .bcc-blog-fexc{color:var(--bcc-muted);font-size:14px;margin-top:8px} .bcc-blog-side{display:flex;flex-direction:column;gap:12px} .bcc-blog-spost{background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:14px;padding:13px;display:flex;gap:12px;box-shadow:var(--sh-sm);text-decoration:none;transition:.16s;flex:1;align-items:center} .bcc-blog-spost:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:transparent} .bcc-blog-sthumb{width:76px;height:62px;flex:none;border-radius:10px;background:var(--bcc-bg);display:grid;place-items:center;font-size:24px} .bcc-blog-stitle{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;line-height:1.4;color:var(--bcc-ink);display:block} .bcc-blog-spost:hover .bcc-blog-stitle{color:var(--bcc-primary)} .bcc-blog-spost .bcc-blog-meta{margin-top:6px;font-size:11px} /* the CTA band — the blog's job is to send readers to the deals */ .bcc-blog-cta{background:linear-gradient(135deg,var(--bcc-deep),var(--bcc-deep-2));border-radius:18px;padding:24px 28px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:24px;text-decoration:none;transition:.16s} .bcc-blog-cta:hover{transform:translateY(-2px);box-shadow:var(--sh-md)} .bcc-blog-cta b{display:block;font-family:'Sora',sans-serif;font-size:19px;font-weight:800;color:#fff;letter-spacing:-.01em} .bcc-blog-cta > span > span{display:block;color:#c9b6ef;font-size:13.5px;margin-top:4px} .bcc-blog-cta-btn{margin-left:auto;background:var(--bcc-accent);color:#fff;font-family:'Sora',sans-serif;font-weight:800;font-size:14px;padding:13px 24px;border-radius:11px;white-space:nowrap;transition:.15s} .bcc-blog-cta:hover .bcc-blog-cta-btn{background:var(--bcc-accent-d)} /* post grid */ .bcc-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .bcc-blog-card{background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:16px;overflow:hidden;box-shadow:var(--sh-sm);transition:.16s;display:flex;flex-direction:column;text-decoration:none} .bcc-blog-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:transparent} .bcc-blog-pthumb{height:130px;background:var(--bcc-bg);display:grid;place-items:center;font-size:34px;position:relative} .bcc-blog-pcat{position:absolute;top:10px;left:10px;background:#fff;border:1px solid var(--bcc-line);font-family:'Sora',sans-serif;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:3px 9px;border-radius:6px;color:var(--bcc-primary)} .bcc-blog-pbody{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1} .bcc-blog-ptitle{font-family:'Sora',sans-serif;font-size:15px;font-weight:700;line-height:1.4;color:var(--bcc-ink)} .bcc-blog-card:hover .bcc-blog-ptitle{color:var(--bcc-primary)} .bcc-blog-card .bcc-blog-meta{margin-top:auto;padding-top:10px} .bcc-blog-item[hidden]{display:none} .bcc-blog-empty{padding:40px;text-align:center;background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:16px} .bcc-blog-empty b{display:block;font-family:'Sora',sans-serif;font-size:15px;font-weight:700;margin-bottom:4px} .bcc-blog-empty span{font-size:13.5px;color:var(--bcc-muted)} /* ============================================================================ B) SINGLE POST — skin over the native Couponis template ---------------------------------------------------------------------------- No template override: a post carries no affiliate path, and the native markup is sound. This is typography, spacing and card shells only. ============================================================================ */ body.single-post main{background:var(--bcc-bg);padding:24px 0 40px} body.single-post main .container{max-width:1200px} /* the article card */ body.single-post .white-block{background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:18px;box-shadow:var(--sh-sm);overflow:hidden} body.single-post .white-block-content{padding:32px 36px} /* title + byline */ body.single-post h1, body.single-post .post-title h1, body.single-post .entry-title{font-family:'Sora',sans-serif;font-size:34px;font-weight:800;line-height:1.22;letter-spacing:-.02em;color:var(--bcc-ink);margin:0 0 14px} body.single-post .post-meta, body.single-post .entry-meta{display:flex;align-items:center;gap:11px;flex-wrap:wrap;font-family:'Lato',sans-serif;font-size:13px;color:var(--bcc-muted); margin:0 0 22px;padding-bottom:20px;border-bottom:1px solid var(--bcc-line)} body.single-post .post-meta a{color:var(--bcc-primary);font-weight:700} /* featured image */ body.single-post .post-thumbnail img, body.single-post .entry-content > img:first-child{border-radius:14px;width:100%;height:auto;margin-bottom:24px} /* body copy — the whole point of a blog: make it readable. Theme wraps post content in .white-block-single-content (not .entry-content / .white-block-content), so every rule targets it too. */ body.single-post .entry-content p, body.single-post .white-block-content > p, body.single-post .white-block-single-content p{font-family:'Lato',sans-serif;font-size:16.5px;line-height:1.85;color:#3c3348;margin:0 0 16px} body.single-post .entry-content h2, body.single-post .white-block-content h2, body.single-post .white-block-single-content h2{font-family:'Sora',sans-serif;font-size:23px;font-weight:800;color:var(--bcc-ink);margin:30px 0 12px;letter-spacing:-.02em} body.single-post .entry-content h3, body.single-post .white-block-content h3, body.single-post .white-block-single-content h3{font-family:'Sora',sans-serif;font-size:18px;font-weight:800;color:var(--bcc-ink);margin:24px 0 9px} body.single-post .entry-content ul, body.single-post .entry-content ol, body.single-post .white-block-single-content ul, body.single-post .white-block-single-content ol{margin:0 0 16px 20px} body.single-post .entry-content li, body.single-post .white-block-single-content li{font-size:16.5px;line-height:1.85;color:#3c3348;margin-bottom:7px} /* internal links inside the copy — this is how the blog feeds the money pages */ body.single-post .entry-content a{color:var(--bcc-primary);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(123,44,230,.28)} body.single-post .entry-content a:hover{border-bottom-color:var(--bcc-primary)} body.single-post .entry-content strong{color:var(--bcc-ink)} body.single-post .entry-content blockquote{background:var(--bcc-bg);border:1px solid var(--bcc-line);border-left:4px solid var(--bcc-accent);border-radius:12px; padding:16px 18px;margin:22px 0;font-size:15.5px;color:var(--bcc-muted)} body.single-post .entry-content blockquote p{margin:0;font-size:15.5px} body.single-post .entry-content img{border-radius:12px;max-width:100%;height:auto;margin:8px 0 18px} /* sidebar column */ body.single-post .col-sm-4 .widget.white-block{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 0 18px !important} body.single-post .col-sm-4 .widget.white-block > .white-block-content{padding:0 !important;background:transparent !important} /* ============================================================================ C) DEALS BLOCK — output by [bcc_deals], dropped at the end of an article ---------------------------------------------------------------------------- Cards live HERE, not inside the copy: in the article itself the money path is a plain internal link (keyword anchor text, passes equity, lands the reader on the store page with every live offer). Cards after the read are an action, not an interruption. ============================================================================ */ .bcc-deals-block{margin:30px 0 10px;padding-top:24px;border-top:2px solid var(--bcc-line)} .bcc-deals-block-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap} .bcc-deals-block-h h3{font-family:'Sora',sans-serif;font-size:18px;font-weight:800;margin:0;letter-spacing:-.01em} .bcc-deal-row{display:flex;align-items:center;gap:16px;background:var(--bcc-bg);border:1px solid var(--bcc-line);border-radius:14px;padding:15px;margin-bottom:10px;text-decoration:none;transition:.15s} .bcc-deal-row:hover{border-color:var(--bcc-primary);background:#fff;box-shadow:var(--sh-sm)} .bcc-deal-logo{width:66px;height:46px;flex:none;background:#fff;border:1px solid var(--bcc-line);border-radius:10px;display:flex;align-items:center;justify-content:center; overflow:hidden;padding:6px;font-family:'Sora',sans-serif;font-weight:800;font-size:10px;color:var(--bcc-primary)} .bcc-deal-logo img{max-width:100%;max-height:100%;object-fit:contain} .bcc-deal-main{flex:1;min-width:0} .bcc-deal-main b{display:block;font-family:'Sora',sans-serif;font-size:15.5px;font-weight:800;color:var(--bcc-ink);line-height:1.35} .bcc-deal-row:hover .bcc-deal-main b{color:var(--bcc-primary)} .bcc-deal-main span{display:block;font-size:12.5px;color:var(--bcc-muted);margin-top:2px} .bcc-deal-btn{flex:none;font-family:'Sora',sans-serif;font-weight:700;font-size:13px;color:var(--bcc-primary);border:1px solid var(--bcc-line);background:#fff;border-radius:9px;padding:10px 16px;white-space:nowrap;transition:.14s} .bcc-deal-row:hover .bcc-deal-btn{background:var(--bcc-primary);border-color:var(--bcc-primary);color:#fff} .bcc-deals-all{display:block;text-align:center;padding:13px;border:1px solid var(--bcc-line);border-radius:11px;font-family:'Sora',sans-serif;font-weight:700;font-size:14px; color:var(--bcc-primary);background:var(--bcc-surface);margin-top:4px;text-decoration:none;transition:.14s} .bcc-deals-all:hover{background:var(--bcc-primary);color:#fff;border-color:var(--bcc-primary)} /* ============================================================================ RESPONSIVE ============================================================================ */ @media(max-width:980px){ .bcc-blog-feat{grid-template-columns:1fr} .bcc-blog-grid{grid-template-columns:repeat(2,1fr)} body.single-post .white-block-content{padding:24px} } @media(max-width:640px){ .bcc-blog{padding:0 16px 30px} .bcc-blog-h1{font-size:26px} .bcc-blog-search{width:100%} .bcc-blog-grid{grid-template-columns:1fr} .bcc-blog-fthumb{height:170px;font-size:40px} .bcc-blog-ftitle{font-size:18px} .bcc-blog-cta{padding:20px} .bcc-blog-cta-btn{margin-left:0;width:100%;text-align:center} body.single-post h1{font-size:26px} body.single-post .entry-content p, body.single-post .entry-content li{font-size:16px} .bcc-deal-row{flex-wrap:wrap} .bcc-deal-btn{width:100%;text-align:center} } /* ---- "Keep reading" — related posts at the end of an article ---- */ .bcc-related-posts{margin-top:30px;padding-top:24px;border-top:2px solid var(--bcc-line)} .bcc-rp-title{font-family:'Sora',sans-serif;font-size:20px;font-weight:800;margin:0 0 14px;letter-spacing:-.02em;color:var(--bcc-ink)} .bcc-rp-title em{font-style:normal;color:var(--bcc-primary)} .bcc-rp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media(max-width:980px){.bcc-rp-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.bcc-rp-grid{grid-template-columns:1fr}} /* ============================================================================ 404 (.bcc-404) — output by the child 404.php ---------------------------------------------------------------------------- A 404 on a coupon site should not apologise, it should route. The headline turns the dead end into a brand line ("this page has expired — we remove dead codes too"), then hands over the search box, the live counts, and the fastest ways back into the deals. ============================================================================ */ .bcc-404-main{background:var(--bcc-bg);padding:40px 0 60px} .bcc-404{max-width:820px;margin:0 auto;text-align:center;font-family:'Lato',sans-serif} .bcc-404-code{display:inline-block;font-family:'Sora',sans-serif;font-size:76px;font-weight:800;line-height:1;letter-spacing:-.04em; background:linear-gradient(135deg,var(--bcc-primary),var(--bcc-accent));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px} .bcc-404-title{font-family:'Sora',sans-serif;font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--bcc-ink);margin:0 0 10px} .bcc-404-title em{font-style:normal;color:var(--bcc-primary)} .bcc-404-lead{color:var(--bcc-muted);font-size:15.5px;line-height:1.7;max-width:560px;margin:0 auto 26px} /* search — the fastest route out of a 404 */ .bcc-404-search{display:flex;align-items:center;gap:10px;background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:14px; padding:8px 8px 8px 18px;max-width:520px;margin:0 auto 24px;box-shadow:var(--sh-md)} .bcc-404-search svg{width:19px;height:19px;color:var(--bcc-muted);flex:none} .bcc-404-search input{flex:1;border:0;outline:none;background:transparent;font-family:'Lato',sans-serif;font-size:15.5px;color:var(--bcc-ink)} .bcc-404-search input::placeholder{color:var(--bcc-muted)} .bcc-404-search button{flex:none;border:0;cursor:pointer;background:var(--bcc-primary);color:#fff;font-family:'Sora',sans-serif;font-weight:700; font-size:14px;padding:12px 24px;border-radius:10px;transition:background .15s} .bcc-404-search button:hover{background:var(--bcc-primary-d)} /* live counts */ .bcc-404-stats{display:flex;justify-content:center;gap:40px;margin-bottom:26px} .bcc-404-stats b{display:block;font-family:'Sora',sans-serif;font-size:24px;font-weight:800;color:var(--bcc-primary);line-height:1.2} .bcc-404-stats span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--bcc-muted)} /* routes back */ .bcc-404-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:36px} .bcc-404-btn{display:inline-flex;align-items:center;font-family:'Sora',sans-serif;font-weight:700;font-size:14px;padding:13px 22px;border-radius:11px; text-decoration:none;transition:.15s;border:1px solid transparent} .bcc-404-btn-primary{background:var(--bcc-primary);color:#fff} .bcc-404-btn-primary:hover{background:var(--bcc-primary-d);color:#fff} .bcc-404-btn-ghost{background:var(--bcc-surface);border-color:var(--bcc-line);color:var(--bcc-ink)} .bcc-404-btn-ghost:hover{border-color:var(--bcc-primary);color:var(--bcc-primary)} /* featured stores — straight back into the money pages */ .bcc-404-stores-l{display:block;font-family:'Sora',sans-serif;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:var(--bcc-muted);margin-bottom:14px} .bcc-404-stores-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px} .bcc-404-store{background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:14px;padding:14px 10px;text-decoration:none; display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:var(--sh-sm);transition:.16s} .bcc-404-store:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:transparent} .bcc-404-store-logo{width:100%;height:44px;border:1px solid var(--bcc-line);border-radius:9px;background:#fff;display:flex;align-items:center; justify-content:center;overflow:hidden;padding:6px;font-family:'Sora',sans-serif;font-weight:800;font-size:16px;color:var(--bcc-primary)} .bcc-404-store-logo img{max-width:100%;max-height:100%;object-fit:contain} .bcc-404-store-name{font-family:'Sora',sans-serif;font-size:12.5px;font-weight:700;color:var(--bcc-ink);text-align:center;line-height:1.3} .bcc-404-store:hover .bcc-404-store-name{color:var(--bcc-primary)} .bcc-404-store-n{font-size:10.5px;color:var(--bcc-muted)} @media(max-width:900px){.bcc-404-stores-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:600px){ .bcc-404-code{font-size:58px} .bcc-404-title{font-size:25px} .bcc-404-stats{gap:26px} .bcc-404-stores-grid{grid-template-columns:repeat(2,1fr)} .bcc-404-search{padding:7px 7px 7px 14px} .bcc-404-search button{padding:11px 16px} } /* ============================================================================ BCC — STATIC / LEGAL PAGES : CSS ---------------------------------------------------------------------------- PASTE AT THE END OF style.css Skins the Privacy Policy, Affiliate Disclosure and About pages. These are plain WordPress pages (no Elementor, no template override) — the content is wrapped in
, which is all this needs. The goal is readability, nothing else: a comfortable measure, generous line height, clear headings, and a "last updated" stamp — the same freshness cue the rest of the site makes. A legal page that looks abandoned reads as one. ============================================================================ */ /* the page shell — inherits the theme's page wrapper, just calms it down */ .bcc-legal{max-width:780px;margin:0 auto;padding:8px 0 24px;font-family:'Lato',sans-serif;color:#3c3348} /* last-updated stamp */ .bcc-legal-updated{display:inline-flex;align-items:center;gap:6px;font-family:'Sora',sans-serif;font-weight:600;font-size:11.5px; letter-spacing:.06em;text-transform:uppercase;color:var(--bcc-muted);background:var(--bcc-bg);border:1px solid var(--bcc-line); border-radius:20px;padding:5px 12px;margin:0 0 20px} /* opening line — sets the tone before the small print */ .bcc-legal-lead{font-size:18px;line-height:1.7;color:var(--bcc-ink);font-weight:400;margin:0 0 28px;padding-bottom:24px; border-bottom:1px solid var(--bcc-line)} /* headings */ .bcc-legal h2{font-family:'Sora',sans-serif;font-size:23px;font-weight:800;letter-spacing:-.02em;color:var(--bcc-ink);margin:32px 0 12px} .bcc-legal h2:first-of-type{margin-top:0} .bcc-legal h3{font-family:'Sora',sans-serif;font-size:17px;font-weight:800;color:var(--bcc-ink);margin:22px 0 8px} /* body copy */ .bcc-legal p{font-size:16px;line-height:1.85;margin:0 0 15px} .bcc-legal ul, .bcc-legal ol{margin:0 0 18px 20px} .bcc-legal li{font-size:16px;line-height:1.85;margin-bottom:8px} .bcc-legal strong{color:var(--bcc-ink);font-weight:700} .bcc-legal em{font-style:italic} /* links — same treatment as the blog, so the site reads as one voice */ .bcc-legal a{color:var(--bcc-primary);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(123,44,230,.28)} .bcc-legal a:hover{border-bottom-color:var(--bcc-primary)} @media(max-width:640px){ .bcc-legal{padding:4px 0 18px} .bcc-legal-lead{font-size:16.5px;margin-bottom:22px;padding-bottom:18px} .bcc-legal h2{font-size:20px;margin:26px 0 10px} .bcc-legal h3{font-size:16px} .bcc-legal p, .bcc-legal li{font-size:15.5px} } /* ============================================================================ FIX 1 — the 100px gap under the header, and the duplicate breadcrumb ---------------------------------------------------------------------------- Couponis gives
a 100px top margin because it expects its own page-title banner to sit there. We don't render that banner, so on every page with our injected breadcrumb the margin is left as a large empty band under the sticky header. Separately, on plain pages (Privacy / About / Disclosure) the theme's own .main-title banner DOES render — and it already contains a breadcrumb — so our injected one becomes a second, duplicate trail 100px below it. Fix: drop the reserved margin wherever our breadcrumb is present, and hide the theme's redundant banner/breadcrumb on those pages so only ours remains. ============================================================================ */ /* 1a.
no longer reserves room for a banner it isn't rendering */ body main{margin-top:0 !important} /* 1b. our breadcrumb sits flush under the sticky header */ .bcc-breadcrumb-bar{margin:0 !important} /* 1c. the theme's page-title banner (with its own breadcrumb) is redundant — our breadcrumb bar replaces it site-wide */ .main-title{display:none !important} /* 1d. give the content back a little breathing room under the breadcrumb, since the 100px was doing that job by accident */ body.page main > .container, body.single-post main > .container, body.tax-coupon-category main > .container, body.tax-coupon-store main > .container{padding-top:22px} /* ============================================================================ FIX 2 — plain pages got a square container ---------------------------------------------------------------------------- The rounded card shell was only scoped to body.single-post, so the theme's native .white-block wrapper on plain pages (Privacy / Disclosure / About) stayed square while every other page on the site is rounded. Same shell, applied to pages too. ============================================================================ */ body.page main .white-block{background:var(--bcc-surface);border:1px solid var(--bcc-line);border-radius:18px;box-shadow:var(--sh-sm);overflow:hidden} body.page main .white-block-content{padding:32px 36px} body.page main{background:var(--bcc-bg);padding-bottom:40px} @media(max-width:640px){ body.page main .white-block-content{padding:22px} } /* ============================================================================ FIX 3 — white strip between the content and the newsletter ---------------------------------------------------------------------------- Couponis puts margin-bottom:45px on
. Because is plain white, that margin renders as a white band between the (lavender) content and the purple newsletter block. Two changes: the page background becomes the lavender token, so any gap is the right colour, and
's reserved bottom margin is dropped — the sections already carry their own spacing. ============================================================================ */ body{background:var(--bcc-bg)} body main{margin-bottom:0 !important} /* ============================================================================ FIX 4 — header search button overflowing the header ---------------------------------------------------------------------------- The native form's submit is an , and the theme gives it its own padding and line-height; combined with our pill wrapper the button was ending up taller than the form and spilling out of the 74px header. This pins the form and the button to a single height and clips anything that tries to exceed it. The form's markup, action and AJAX autocomplete are untouched. ============================================================================ */ .bcc-hd form.main-search{height:42px;overflow:hidden;align-items:stretch} .bcc-hd form.main-search .form-control{height:100%;padding:0 13px;line-height:normal} .bcc-hd form.main-search a.submit-form{height:100%;padding:0 18px;border-radius:0;line-height:1;display:flex;align-items:center;justify-content:center} /* the AJAX dropdown must still escape the clipped form */ .bcc-hd form.main-search .store-search-results{overflow:visible} .bcc-hd{overflow:visible} /* ============================================================================ FIX 5 — the header search spinner never stops (ported from MCS FIX 17) ---------------------------------------------------------------------------- This is a Couponis bug, not ours: the store-search autocomplete AJAX handler reads a `search` parameter while the form actually sends `keyword`, so the request never resolves and the spinner spins forever behind an empty results box. The header search ITSELF still works — it submits to the theme's search template — only the autocomplete is dead. So the spinner and the empty results scaffold are safe to suppress. Why a plain rule doesn't work: the theme keeps the spinner visible with header form.main-search .store-search-spin.fa-spin { display:inline-block !important } which is (0,3,2). We prefix with `body` to beat it, and add visibility/opacity as a safety net (the theme doesn't override those). ============================================================================ */ body header form.main-search .store-search-spin.fa-spin, body header form.main-search .store-search-spin, body .bcc-hd form.main-search .store-search-spin.fa-spin, body .bcc-hd form.main-search .store-search-spin{ display:none !important; visibility:hidden !important; opacity:0 !important; } body header form.main-search .store-search-results, body .bcc-hd form.main-search .store-search-results{ display:none !important; } /* ============================================================================ FIX 6 — section headers and category pills on mobile ---------------------------------------------------------------------------- .bcc-sec-head is a flex ROW (title left, "view all" right). On a phone the link squeezes the title, which wraps mid-phrase ("Shop by / category"). And the pills, stacked one per row, eat the whole screen for five items. Fix: below 640px the header stacks, and the pills become a single-row HORIZONTAL SCROLLER — the same pattern already used for the All Stores chips, so the phone layout is consistent and the pills cost one row, not five. ============================================================================ */ @media(max-width:640px){ /* stack the section header instead of squeezing the title */ .bcc-sec-head{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:16px} .bcc-sec-title{font-size:22px} .bcc-sec-sub{font-size:13.5px} .bcc-sec-more{font-size:13px} .bcc-deals-head{flex-direction:column;align-items:flex-start;gap:8px} .bcc-deals-title{font-size:22px} .bcc-cat-sech{flex-direction:column;align-items:flex-start;gap:6px} /* category pills -> one-row horizontal scroller (bleeds to the screen edge so it reads as "there's more this way", not as a cut-off row) */ .bcc-cats-section{padding-bottom:34px} .bcc-cats-inner{ display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; gap:8px; padding:2px 16px 10px; margin:0 -16px; /* bleed past the section padding */ scrollbar-width:none; } .bcc-cats-inner::-webkit-scrollbar{display:none} .bcc-cat{ flex:0 0 auto; width:auto; white-space:nowrap; scroll-snap-align:start; padding:10px 16px; font-size:13.5px; } } /* ============================================================================ FIX 7 — single post: gap between header and breadcrumb bar ---------------------------------------------------------------------------- body.single-post main has padding-top:24px (breathing room for the article). But the breadcrumb bar is main's FIRST child, so that 24px pushes the bar down, leaving a lavender gap under the sticky header. Zero the top padding on main and hand it to the article container instead, so the breadcrumb bar sits flush under the header while the content keeps its 24px of space. Measured: header bottom 145px, gap = main's 24px top padding. CSS only. ============================================================================ */ body.single-post main{padding-top:0} body.single-post main > .container{padding-top:24px} /* ============================================================================ FIX 8 — mobile horizontal scroll (16px) from the trust pills scroller ---------------------------------------------------------------------------- On mobile .bcc-trust-wrap uses the edge-bleed trick (margin:0 -16px) so the pill scroller runs to the screen edge — same pattern as .bcc-cats-inner. But unlike the category pills (whose parent .bcc-cats-wrap has padding:0 22px to absorb the bleed), .bcc-trust's parent has no padding, so the -16px pokes 16px past the viewport and scrolls the whole page sideways. Measured: page overflow = exactly this 16px. Fix: clip the overflow at .bcc-trust so the bleed stays inside the section — the scroller still works, the page no longer scrolls. CSS only; scoped to mobile. ============================================================================ */ @media(max-width:640px){ .bcc-trust{overflow-x:hidden} } /* ============================================================================ FIX 9 — hide the sidebar "Never miss a code" CTA on store + single post, MOBILE ONLY ---------------------------------------------------------------------------- On mobile the sidebar stacks directly above the native newsletter block, so the sidebar's [bcc_subscribe_cta] card is redundant. On desktop the sidebar sits beside the content, so it's kept. Hide only below the sidebar's stacking breakpoint. CSS only; shortcode/widget intact. ============================================================================ */ @media(max-width:960px){ body.tax-coupon-store .bcc-side-sub, body.single-post .bcc-side-sub{display:none} } /* ============================================================================ FIX 10 — parent theme's teal a:hover / a:active leaking (incl. click flash) ---------------------------------------------------------------------------- Couponis' own style.css sets a:hover AND a:active to #1ab1b7 (teal) on EVERY link. It showed on the wordmark, and flashed for a split-second on CLICK (:active) when navigating (logo → home, category pill, etc.). We don't edit the parent (update-unsafe) — we override from the child: same specificity (0,1,1) but our stylesheet loads last, so BCC purple wins. All our .bcc-* links keep their own more-specific hovers; only plain/native links change. :hover = mouse over, :active = mid-click, :focus = keyboard — all pinned so there is no teal in any state. Wordmark keeps its brand colours in every state (a logo shouldn't recolour): .bcc-wm:hover/:active/:focus (0,2,0) beats a:active (0,1,1). ============================================================================ */ a:hover, a:active, a:focus{color:var(--bcc-primary)} .bcc-wm:hover .bcc-wm-txt, .bcc-wm:active .bcc-wm-txt, .bcc-wm:focus .bcc-wm-txt{color:var(--bcc-ink)} .bcc-wm:hover .bcc-wm-txt b, .bcc-wm:active .bcc-wm-txt b, .bcc-wm:focus .bcc-wm-txt b{color:var(--bcc-primary)} /* ============================================================================ FIX 11 — 404 page: gap between header and breadcrumb bar ---------------------------------------------------------------------------- Same issue as FIX 7 but on the 404 template: main.bcc-404-main has padding-top:40px, and the breadcrumb bar is its first child, so that 40px pushes the bar down and leaves a lavender gap under the sticky header. Zero the top padding on main and hand it to the 404 content wrapper instead, so the breadcrumb sits flush while the content keeps its space. Measured: header bottom 145px, gap = main's 40px top padding. CSS only. ============================================================================ */ body.error404 main.bcc-404-main{padding-top:0} body.error404 main.bcc-404-main > .bcc-404{padding-top:40px} /* ============================================================================ FIX 12 — Categories page: 50px horizontal overflow on mobile ---------------------------------------------------------------------------- Measured at 390px: .bcc-cx-bento is 323px wide but its 1fr track resolves to 414px, so every .bcc-cx-tile (and its inner rows) overflows by 50px and the whole page scrolls sideways. Cause: a grid item's default min-width is AUTO, i.e. it never shrinks below its content's intrinsic width. The tile's nowrap flex rows (.bcc-cx-top, .bcc-cx-deal, .bcc-cx-logos) demand ~414px, so the track grows to match. Fix: min-width:0 on the tile and its flex children lets the track shrink to the container, and the long deal title ellipsises as it already does on desktop. Layout/columns unchanged — this only removes the intrinsic floor. ============================================================================ */ .bcc-cx-bento > .bcc-cx-tile{min-width:0} .bcc-cx-tile .bcc-cx-top, .bcc-cx-tile .bcc-cx-info, .bcc-cx-tile .bcc-cx-deal, .bcc-cx-tile .bcc-cx-dealtxt, .bcc-cx-tile .bcc-cx-logos{min-width:0} .bcc-cx-logos{flex-wrap:wrap} /* ============================================================================ FIX 13 — All Stores: sticky filter bar detached from the header on mobile ---------------------------------------------------------------------------- .bcc-as-mbar sticks at top:80px, but the header is only 64px tall below 960px (.bcc-hd-wrap{height:64px}). That 16px gap is a window the store cards scroll through, so the bar reads as floating/broken. The bar also has no background of its own — only the inner search box is white — so cards show through the gap between the input and the Filters button. Fix: dock it flush under the 64px header, give it an opaque page-coloured band with edge-bleed padding so nothing scrolls through it, and lift its z-index above the cards while staying below the header (z-index:40). ============================================================================ */ @media(max-width:900px){ .bcc-as-mbar{ top:64px; z-index:30; background:var(--bcc-bg); padding:10px 16px; margin:0 -16px 10px; /* bleed to the screen edges so no card peeks past */ } /* the category chips sit right under the bar — keep them on the same band */ .bcc-as-chips{padding:0 16px 10px;margin:0 -16px 12px;background:var(--bcc-bg)} } /* ============================================================================ FIX 14 — store rich description typography ---------------------------------------------------------------------------- The store "rich description" renders into .white-block-content.store-rich-content and we never styled it, so it fell back to Couponis' defaults: Montserrat headings (28.8px/600) and Open Sans 14px body — nothing like the rest of BCC. This gives it the SAME type system as a blog post: Sora headings, Lato body at 16.5px/1.85, brand-purple links, tidy list spacing. Content only — no card, no money path, no layout change. ============================================================================ */ .store-rich-content{font-family:'Lato',sans-serif;color:#3c3348} .store-rich-content h2{font-family:'Sora',sans-serif;font-size:23px;font-weight:800;color:var(--bcc-ink);margin:30px 0 12px;letter-spacing:-.02em;line-height:1.3} .store-rich-content h3{font-family:'Sora',sans-serif;font-size:18px;font-weight:800;color:var(--bcc-ink);margin:24px 0 9px;line-height:1.35} .store-rich-content h4{font-family:'Sora',sans-serif;font-size:16px;font-weight:700;color:var(--bcc-ink);margin:20px 0 8px} .store-rich-content > :first-child{margin-top:0} .store-rich-content p{font-size:16.5px;line-height:1.85;color:#3c3348;margin:0 0 16px} .store-rich-content ul, .store-rich-content ol{margin:0 0 16px;padding-left:22px} .store-rich-content li{font-size:16.5px;line-height:1.8;color:#3c3348;margin-bottom:7px} .store-rich-content strong{color:var(--bcc-ink)} .store-rich-content a{color:var(--bcc-primary);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(123,44,230,.28)} .store-rich-content a:hover{border-bottom-color:var(--bcc-primary)} .store-rich-content img{border-radius:12px;max-width:100%;height:auto;margin:8px 0 18px} .store-rich-content table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14.5px} .store-rich-content th, .store-rich-content td{border:1px solid var(--bcc-line);padding:10px 12px;text-align:left} .store-rich-content th{background:var(--bcc-bg);font-family:'Sora',sans-serif;font-weight:700;color:var(--bcc-ink)} @media(max-width:640px){ .store-rich-content h2{font-size:20px;margin:24px 0 10px} .store-rich-content h3{font-size:16.5px} .store-rich-content p, .store-rich-content li{font-size:15.5px} } /* the rich-content card itself — Couponis renders it square; round it to match every other BCC surface (coupon cards, sidebar cards, store header) */ .white-block:has(> .store-rich-content){border:1px solid var(--bcc-line);border-radius:18px;box-shadow:var(--sh-sm);overflow:hidden} .store-rich-content{padding:28px 32px} @media(max-width:640px){ .store-rich-content{padding:20px 18px} } /* ============================================================================ GET CODE / GET DEAL POPUP — Concept A skin over Couponis' native modal ---------------------------------------------------------------------------- MONEY PATH UNTOUCHED. The modal markup, the code + its auto-copy JS, the DEAL affiliate link, the up/down vote actions, the share row and the "Used by" counter are all native Couponis — we only reskin them. Structure (confirmed by DOM inspect): #showCode .modal-content.coupon_modal_content ├─ .modal-header > h4.text-center (title) ├─ button.close (× button) ├─ a.store-image > img (store logo) ├─ input.coupon-code-modal.header-alike (CODE box — readonly, copies) │ OR a.coupon-code-modal.header-alike.sale-act-btn (DEAL button — link) ├─ p.coupon-code-copied (hint under the action) ├─ .coupon-works (Did it work? + .feedback-record-action thumbs) ├─ a.modal-content-action (Show information) ├─ .modal-body-share .post-share a.share (share icons) └─ .modal-footer ul.list-inline (Used by · See all …) CODE vs DEAL is told apart by .sale-act-btn (DEAL only). Nothing here changes any href, value, or JS hook — CSS only. REMINDER: after any CSS change -> LiteSpeed Purge All + Ctrl+Shift+R. ============================================================================ */ /* modal shell — rounded card */ #showCode .modal-content.coupon_modal_content{border:1px solid var(--bcc-line);border-radius:18px;overflow:hidden;box-shadow:var(--sh-lg)} /* title bar — deep-purple gradient (hero continuation) */ #showCode .modal-header{background:linear-gradient(180deg,var(--bcc-deep),var(--bcc-deep-2));border-bottom:0;padding:16px 46px 16px 20px;position:relative} #showCode .modal-header h4{font-family:'Sora',sans-serif;font-size:15px;font-weight:800;color:#fff;line-height:1.3;margin:0} /* close button — soft chip, top-right */ #showCode .modal-header .close{position:absolute;top:12px;right:12px;width:28px;height:28px;margin:0;border-radius:8px;background:rgba(255,255,255,.14);color:#fff;opacity:1;text-shadow:none;font-size:16px;font-weight:400;display:flex;align-items:center;justify-content:center;transition:.15s} #showCode .modal-header .close:hover{background:rgba(255,255,255,.28);opacity:1} /* body spacing + store logo */ #showCode .modal-body{padding:24px 22px} #showCode .store-image{display:flex;align-items:center;justify-content:center;margin:0 0 18px} #showCode .store-image img{max-height:44px;width:auto;object-fit:contain} /* ---- CODE box (native readonly input; copy JS untouched) — ticket look ---- */ #showCode input.coupon-code-modal{display:block;width:100%;height:auto;text-align:center; font-family:'Sora',sans-serif !important;font-weight:800;font-size:18px;letter-spacing:.08em;color:var(--bcc-ink); background:repeating-linear-gradient(45deg,#faf6ff,#faf6ff 8px,#fff 8px,#fff 16px); border:2px dashed var(--bcc-primary);border-radius:11px;padding:15px 12px;cursor:pointer;box-shadow:none;transition:.15s} #showCode input.coupon-code-modal:hover{background:#faf6ff} /* ---- DEAL button (native affiliate link; href untouched) — solid gold ---- */ #showCode a.coupon-code-modal.sale-act-btn{display:flex;align-items:center;justify-content:center;width:100%; font-family:'Sora',sans-serif;font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none; background:var(--bcc-accent);color:#fff;border:0;border-radius:11px;padding:16px;box-shadow:0 6px 18px -6px rgba(245,158,23,.7);transition:.15s} #showCode a.coupon-code-modal.sale-act-btn:hover{background:var(--bcc-accent-d);color:#fff} /* hint text under the action */ #showCode .coupon-code-copied{text-align:center;font-family:'Lato',sans-serif;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--bcc-muted);margin:8px 0 0} #showCode .coupon-code-copied.after-copy{color:var(--bcc-primary);font-weight:700} /* "Did it work?" + thumbs */ #showCode .coupon-works{text-align:center;margin-top:18px} #showCode .coupon-works > span{display:block;font-family:'Sora',sans-serif;font-weight:700;font-size:14px;color:var(--bcc-ink);margin-bottom:10px} #showCode .feedback-wrap{display:inline-flex;gap:10px;margin:0;padding:0} #showCode .feedback-record-action{width:36px;height:36px;border:1px solid var(--bcc-line);border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:var(--bcc-muted);transition:.15s} #showCode .feedback-record-action:hover{background:var(--bcc-bg);border-color:var(--bcc-primary);color:var(--bcc-primary)} /* "Show information" toggle */ #showCode .modal-content-action{font-family:'Sora',sans-serif;font-weight:700;font-size:12px;color:var(--bcc-primary);text-decoration:none} #showCode .modal-content-action:hover{text-decoration:underline} /* share row */ #showCode .modal-body-share{border-top:1px solid var(--bcc-line);padding-top:16px} #showCode .modal-body-share .post-share{display:flex;gap:7px;flex-wrap:wrap;margin:0} #showCode .modal-body-share .post-share a.share{width:34px;height:34px;border-radius:9px;border:1px solid var(--bcc-line);background:var(--bcc-bg);display:inline-flex;align-items:center;justify-content:center;color:var(--bcc-muted);text-decoration:none;transition:.15s} #showCode .modal-body-share .post-share a.share:hover{background:var(--bcc-primary);border-color:var(--bcc-primary);color:#fff} /* footer — used by · see all */ #showCode .modal-footer{border-top:1px solid var(--bcc-line);padding:13px 20px;background:var(--bcc-surface)} #showCode .modal-footer ul{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin:0} #showCode .modal-footer li{font-family:'Lato',sans-serif;font-size:12px;color:var(--bcc-muted)} #showCode .modal-footer li a, #showCode .modal-footer li strong{font-family:'Sora',sans-serif;font-weight:700;font-size:12.5px;color:var(--bcc-primary);text-decoration:none} #showCode .modal-footer li a:hover{text-decoration:underline} @media(max-width:600px){ #showCode .modal-body{padding:20px 16px} #showCode .modal-header h4{font-size:14px} }