/* ========================================================================== B2B hero — visual unity layer -------------------------------------------------------------------------- This is intentionally a treatment layer only. It does not alter the bento grid, the slide order, card content, artwork crops, or captions. Its only responsibility is to give campaigns, coupons, and loyalty the same eCopon visual signature: restrained navy base, cyan/orange edge light, and one consistent editorial contrast treatment. ========================================================================== */ .b2b-page .b2b-hero-slider { --b2b-unity-navy: #0b253c; --b2b-unity-cyan: #38b7d5; --b2b-unity-orange: #f26b3e; } /* The first slide is the visual master and is intentionally untouched. These common frames apply only to slides two and three. */ .b2b-page .b2b-hero-slide--coupons .b2b-world-tile, .b2b-page .b2b-hero-slide--loyalty .b2b-world-tile { border: 1px solid rgba(163, 220, 236, .58) !important; box-shadow: 0 14px 28px rgba(7, 30, 49, .15), inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -1px 0 rgba(4, 31, 53, .18) !important; } /* The supplied campaign bento already has the target visual language. Only coupon/loyalty photography is calmed down before its card-specific grade. */ .b2b-page .b2b-hero-slide--coupons .b2b-world-tile__bg, .b2b-page .b2b-hero-slide--loyalty .b2b-world-tile__bg { filter: saturate(.62) contrast(1.03) brightness(.93); } /* Coupons and loyalty share the same colour-grade. The existing bottom scrim stays intact; this extra top wash only pulls very warm/cool source images into the shared navy-cyan family. */ .b2b-page .b2b-hero-slider .b2b-world-tile::after { background: linear-gradient(138deg, rgba(14, 94, 126, .34) 0%, rgba(14, 94, 126, 0) 47%), linear-gradient(0deg, rgba(6, 24, 41, .92) 0%, rgba(6, 24, 41, .58) 23%, rgba(6, 24, 41, 0) 54%) !important; } .b2b-page .b2b-hero-slider .b2b-world-tile--kpi::before { background: linear-gradient(180deg, rgba(6, 25, 42, .86) 0%, rgba(6, 25, 42, .32) 55%, rgba(6, 25, 42, 0) 100%) !important; } /* -------------------------------------------------------------------------- Card-by-card palette mapping to slide one 1) powder blue, 2) deep charcoal with warm ember, 3) calm warm stone, 4) dark steel with a restrained orange accent, 5) smoky navy, 6) navy 360. The image contents and all text stay exactly as supplied. -------------------------------------------------------------------------- */ /* 1 — the quiet, light “shield” card. */ .b2b-page .b2b-hero-slide--coupons .b2b-hero-ref__card--shield, .b2b-page .b2b-hero-slide--loyalty .b2b-hero-ref__card--shield { background: #cfe0ef !important; } .b2b-page .b2b-hero-slide--coupons .b2b-hero-ref__card--shield .b2b-world-tile__bg, .b2b-page .b2b-hero-slide--loyalty .b2b-hero-ref__card--shield .b2b-world-tile__bg { opacity: .72; filter: saturate(.52) contrast(.98) brightness(1.04); } .b2b-page .b2b-hero-slide--coupons .b2b-hero-ref__card--shield::after, .b2b-page .b2b-hero-slide--loyalty .b2b-hero-ref__card--shield::after { background: linear-gradient(145deg, rgba(207, 224, 239, .34), rgba(207, 224, 239, 0) 58%), linear-gradient(0deg, rgba(9, 33, 54, .82), rgba(9, 33, 54, 0) 42%) !important; } /* 2 — the tall KPI card, matching slide one's black/orange core. */ .b2b-page .b2b-hero-slide--coupons .b2b-hero-ref__card--stats, .b2b-page .b2b-hero-slide--loyalty .b2b-hero-ref__card--stats { background: #090b0e !important; } .b2b-page .b2b-hero-slide--coupons .b2b-hero-ref__card--stats .b2b-world-tile__bg, .b2b-page .b2b-hero-slide--loyalty .b2b-hero-ref__card--stats .b2b-world-tile__bg { opacity: .77; filter: saturate(.57) contrast(1.08) brightness(.76); } .b2b-page .b2b-hero-slide--coupons .b2b-hero-ref__card--stats::after, .b2b-page .b2b-hero-slide--loyalty .b2b-hero-ref__card--stats::after { background: radial-gradient(circle at 10% 65%, rgba(192, 76, 37, .48), transparent 40%), linear-gradient(0deg, rgba(2, 10, 18, .94), rgba(2, 10, 18, .14) 62%) !important; } /* 3 — the warm explanatory card. */ .b2b-page .b2b-hero-slide--coupons .b2b-hero-ref__card--plane, .b2b-page .b2b-hero-slide--loyalty .b2b-hero-ref__card--plane { background: #d8cabd !important; } .b2b-page .b2b-hero-slide--coupons .b2b-hero-ref__card--plane .b2b-world-tile__bg, .b2b-page .b2b-hero-slide--loyalty .b2b-hero-ref__card--plane .b2b-world-tile__bg { opacity: .78; filter: saturate(.55) contrast(.96) brightness(1.02); } .b2b-page .b2b-hero-slide--coupons .b2b-hero-ref__card--plane::after, .b2b-page .b2b-hero-slide--loyalty .b2b-hero-ref__card--plane::after { background: linear-gradient(145deg, rgba(11, 37, 60, .18), transparent 55%), linear-gradient(0deg, rgba(8, 28, 45, .8), rgba(8, 28, 45, 0) 46%) !important; } /* 4 — goal / premium card. */ .b2b-page .b2b-hero-slide--coupons .b2b-hero-ref__card--target, .b2b-page .b2b-hero-slide--loyalty .b2b-hero-ref__card--target { background: #203c56 !important; } .b2b-page .b2b-hero-slide--coupons .b2b-hero-ref__card--target::after, .b2b-page .b2b-hero-slide--loyalty .b2b-hero-ref__card--target::after { background: linear-gradient(135deg, rgba(213, 107, 65, .34), transparent 50%), linear-gradient(0deg, rgba(5, 23, 40, .9), rgba(5, 23, 40, 0) 48%) !important; } /* 5 — compatible / points card. */ .b2b-page .b2b-hero-slide--coupons .b2b-hero-ref__card--progress, .b2b-page .b2b-hero-slide--loyalty .b2b-hero-ref__card--progress { background: #31516c !important; } .b2b-page .b2b-hero-slide--coupons .b2b-hero-ref__card--progress::after, .b2b-page .b2b-hero-slide--loyalty .b2b-hero-ref__card--progress::after { background: linear-gradient(135deg, rgba(95, 170, 195, .22), transparent 55%), linear-gradient(0deg, rgba(7, 28, 47, .84), rgba(7, 28, 47, 0) 48%) !important; } /* 6 — wide 360 card. */ .b2b-page .b2b-hero-slide--coupons .b2b-hero-ref__card--marketing, .b2b-page .b2b-hero-slide--loyalty .b2b-hero-ref__card--marketing { background: #182f47 !important; } .b2b-page .b2b-hero-slide--coupons .b2b-hero-ref__card--marketing::after, .b2b-page .b2b-hero-slide--loyalty .b2b-hero-ref__card--marketing::after { background: linear-gradient(90deg, rgba(202, 86, 45, .34), rgba(202, 86, 45, 0) 34%), linear-gradient(0deg, rgba(6, 24, 41, .8), rgba(6, 24, 41, 0) 54%) !important; } /* Keep the visual treatment calm on touch devices; no new geometry or motion is introduced at any breakpoint. */ @media (max-width: 767px) { .b2b-page .b2b-hero-slide--coupons .b2b-world-tile, .b2b-page .b2b-hero-slide--loyalty .b2b-world-tile { box-shadow: 0 10px 20px rgba(7, 30, 49, .13), inset 0 1px 0 rgba(255, 255, 255, .2) !important; } }