/* ============================================================ Pakistan & Counting — Industry Decks (listing page) Self-contained: hero + rainbow + deck card grid + sponsor + ticker. Base tokens / header / footer / buttons come from style.css. Figma colours: green #26B685 · yellow #FFCB00 · orange #FF6B22 · pink #EF2167 · dark #3A3A3A · body #4E4E4E ============================================================ */ :root{ --sd-green:#26B685; --sd-orange:#FF6B22; --sd-yellow:#FFCB00; --sd-pink:#EF2167; --sd-dark:#3A3A3A; --sd-body:#4E4E4E; } /* ---------- HERO ---------- */ .sd-hero{position:relative;margin-top:-84px;padding:170px 0 88px;text-align:center;overflow:hidden; background-color:#fff; background-image: repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px), repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px); background-size:46px 46px} .sd-hero__inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 clamp(24px,2.4vw,60px)} .sd-hero__title{font-family:var(--ff);font-weight:900;text-transform:uppercase;line-height:1;color:var(--sd-dark)} .sd-boxed{display:inline-block;border:3px solid var(--sd-dark);background:#fff;padding:.05em .35em; box-shadow:6px 6px 0 0 var(--sd-orange);font-size:clamp(22px,5vw,35px);white-space:nowrap} .sd-hero__sub{margin:28px auto 0;max-width:620px;font-family:var(--ff);font-weight:600; color:var(--sd-body);font-size:clamp(15px,1.5vw,20px);line-height:1.45} /* rainbow separator under the hero */ .sd-rainbow{height:9px;background:linear-gradient(90deg,var(--sd-green) 0 25%,var(--sd-yellow) 25% 50%, var(--sd-orange) 50% 75%,var(--sd-pink) 75% 100%)} /* faint grid backdrop — the ACTUAL 46px "boxed" grid now lives ONCE on (see style.css "CONTINUOUS PAGE GRID"): these per-section ::before grids are overridden to display:none there so the single body grid flows unbroken. A NEW section that needs the boxed background must be TRANSPARENT + have its ::before hidden in that style.css block (that's where .sd-videos is handled) — do NOT give it its own opaque bg / ::before grid here, or it covers the body grid. */ .sd-sec,.sd-sponsor{position:relative;overflow:hidden;background:#fff} .sd-sec::before,.sd-sponsor::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px), repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px)} .sd-sec>.container,.sd-sponsor>.container{position:relative;z-index:1} /* ---------- SEARCH + SORT FILTER (Figma "Sorting Filter") ---------- */ .sd-filter{position:relative;z-index:2;max-width:1024px;margin:0 auto 36px; display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap} /* search field (scaled to the site's card grid) */ .sd-filter__search{position:relative;flex:0 1 300px;max-width:300px;min-width:200px} .sd-filter__input{font-weight: 500;width:100%;height:46px;border:1px solid #c4c4c4;background:#fff; padding:0 44px 0 18px;font-family:var(--ff);font-size:15px;line-height:46px;color:var(--sd-dark); outline:none;transition:border-color .15s ease} .sd-filter__input::placeholder{color:#7f7f7f;opacity:1} .sd-filter__input:focus{border-color:var(--sd-green)} .sd-filter__search-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%); width:18px;height:18px;color:var(--sd-green);pointer-events:none} .sd-filter__search-icon svg{width:100%;height:100%;display:block} /* sort dropdown */ .sd-sort{position:relative;flex:0 0 188px;max-width:188px;width:188px} .sd-sort__toggle{font-weight:500 ;width:100%;height:46px;display:flex;align-items:center;justify-content:space-between; gap:10px;background:#fff;border:1px solid #c4c4c4;padding:0 16px 0 18px;cursor:pointer; font-family:var(--ff);font-size:15px;color:#7f7f7f;text-align:left} .sd-sort__chev{width:12px;height:8px;color:var(--sd-green);flex:0 0 auto;transition:transform .18s ease} .sd-sort.is-open .sd-sort__chev{transform:rotate(180deg)} .sd-sort__menu{position:absolute;top:calc(100% - 1px);left:0;right:0;z-index:5;margin:0;padding:5px 0; list-style:none;background:#fff;border:1px solid #c4c4c4;box-shadow:0 14px 30px rgba(0,0,0,.12); display:none} .sd-sort.is-open .sd-sort__menu{display:block} .sd-sort__opt{padding:9px 18px;font-family:var(--ff);font-size:15px;color:#7f7f7f;cursor:pointer; transition:background .12s ease,color .12s ease} .sd-sort__opt:hover{background:#eefff9;color:var(--sd-dark)} .sd-sort__opt.is-active{color:var(--sd-green);font-weight:500} /* no-results message */ .sd-filter__empty{position:relative;z-index:1;max-width:900px;margin:0 auto 10px;text-align:center; font-family:var(--ff);font-weight:700;color:var(--sd-body);font-size:18px} .sd-card.is-hidden{display:none} .sd-card.is-paged{display:none} /* hidden by pagination (not on the current page) */ /* ---------- PAGINATION ---------- */ .sd-pager{position:relative;z-index:1;display:flex;justify-content:center;align-items:center; gap:9px;flex-wrap:wrap;max-width:var(--wrap);margin:40px auto 0;padding:0 20px} .sd-page{min-width:44px;height:44px;padding:0 14px;font-family:var(--ff);font-size:15px;font-weight:800; color:#1d1d1d;background:#fff;border:2px solid #1d1d1d;border-radius:3px;cursor:pointer; box-shadow:3px 3px 0 0 #1d1d1d;transition:transform .12s ease,box-shadow .12s ease,background .12s ease,color .12s ease} .sd-page:hover:not(:disabled):not(.is-active){transform:translate(-1px,-1px);box-shadow:5px 5px 0 0 #1d1d1d} .sd-page.is-active{background:var(--sd-green,#26B685);border-color:#1d1d1d;color:#fff;cursor:default} .sd-page:disabled{opacity:.4;cursor:default;box-shadow:2px 2px 0 0 #1d1d1d} .sd-page--gap{border:0;background:none;box-shadow:none;cursor:default;min-width:18px;padding:0} @media (max-width:520px){ .sd-page{min-width:40px;height:40px;font-size:14px} } /* ---------- DECK CARD GRID ---------- */ .sd-sec{padding:64px 0 70px} .sd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 34px;max-width:1024px;margin:auto;} /* capped at 1024px at every screen size / zoom level (client request) — no wide-screen stretch */ /* Coming-Soon deck: shown in the grid but non-clickable, with a badge */ .sd-card--soon{cursor:default} .sd-card--soon .sd-card__media img{filter:grayscale(.35) opacity(.92)} .sd-card__soon{position:absolute;top:14px;left:14px;background:var(--gold,#F9C300);color:#3A3A3A; font-family:var(--ff);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:12px; padding:6px 12px;border:1.5px solid #3A3A3A;box-shadow:3px 3px 0 0 rgba(58,58,58,.25)} .sd-card__soonlabel{display:inline-block;font-family:var(--ff);font-weight:800;text-transform:uppercase; letter-spacing:.03em;font-size:13px;color:#8a8a8a;padding:11px 0} .sd-card{position:relative;display:flex;flex-direction:column;padding:12px 12px 16px; background:#FDEDE2;box-shadow:9px 11px 0 0 rgba(255,107,34,.42); transition:background .18s ease,box-shadow .18s ease} .sd-card__media{position:relative;line-height:0} .sd-card__media img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover} /* pink price ribbon with a small up-tab + yellow slanted wedge under the price */ .sd-card__price{position:absolute;left:-10px;bottom:-20px;z-index:3;font-family:var(--ff);font-weight:900; color:#fff;font-size:16px;line-height:1;padding:31px 18px 15px 17px;background:var(--sd-pink); clip-path:polygon(0 20px,8% 0,12% 20px,100% 20px,100% 100%,0 100%)} .sd-card__price::after{content:none;display:none} /* free decks: same price ribbon, green (no cost) */ .sd-card__price--free{background:var(--sd-green,#26B685)} .sd-card__title{margin:34px 6px 0;font-family:var(--ff);font-weight:800;text-transform:uppercase; color:#161616;font-size:16px;line-height:1.28;flex:1 0 auto} .sd-card__actions{display:flex;gap:16px;margin:20px 6px 0} .sd-card__btn{flex:1 1 0;text-align:center;font-family:var(--ff);font-weight:900;text-transform:uppercase; font-size:12.5px;letter-spacing:.02em;color:#fff;padding:13px 6px;white-space:nowrap;cursor:pointer; transition:transform .12s ease,box-shadow .12s ease,background .18s ease,color .18s ease} .sd-card__cart{background:var(--sd-orange);box-shadow:4px 4px 0 0 var(--sd-yellow)} .sd-card__buy{background:var(--sd-yellow);color:var(--sd-dark);box-shadow:4px 4px 0 0 var(--sd-orange)} .sd-card__btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 0 currentColor} .sd-card__cart:hover{box-shadow:2px 2px 0 0 var(--sd-yellow)} .sd-card__buy:hover{box-shadow:2px 2px 0 0 var(--sd-orange)} /* ---- HOVER: DECK box fills ORANGE, and the buttons change with it ---- Deck boxes = orange, product boxes = pink (see recorded-webinars.css). Add To Cart is orange at rest, so it must change or it would vanish into the fill — it takes the COMPLEMENTARY colour: orange card → PINK button (a product card does the reverse, pink card → orange button). The :hover-inside-:hover rules keep each button's own press effect working while the card is filled. */ .sd-card:hover{background:var(--sd-orange);box-shadow:9px 11px 0 0 var(--sd-dark)} .sd-card:hover .sd-card__title{color:#fff} .sd-card:hover .sd-card__details{color:#fff;border-top-color:rgba(255,255,255,.5)} .sd-card:hover .sd-card__details svg{color:#fff} .sd-card:hover .sd-card__cart{background:var(--sd-pink);color:#fff;box-shadow:4px 4px 0 0 var(--sd-dark)} .sd-card:hover .sd-card__buy{background:var(--sd-yellow);color:var(--sd-dark);box-shadow:4px 4px 0 0 #fff} .sd-card:hover .sd-card__cart:hover{box-shadow:2px 2px 0 0 var(--sd-dark)} .sd-card:hover .sd-card__buy:hover{box-shadow:2px 2px 0 0 #fff} /* a coarse pointer has no hover — never leave a tapped card stuck in the filled state */ @media (hover:none){ .sd-card:hover{background:#FDEDE2;box-shadow:9px 11px 0 0 rgba(255,107,34,.42)} .sd-card:hover .sd-card__title{color:#161616} .sd-card:hover .sd-card__details{color:var(--sd-orange);border-top-color:rgba(0,0,0,.14)} .sd-card:hover .sd-card__cart{background:var(--sd-orange);color:#fff;box-shadow:4px 4px 0 0 var(--sd-yellow)} .sd-card:hover .sd-card__buy{box-shadow:4px 4px 0 0 var(--sd-orange)} } .sd-card__details{margin:18px 6px 0;padding-top:14px;border-top:1px solid rgba(0,0,0,.14); display:inline-flex;align-items:center;gap:7px;font-family:var(--ff);font-weight:800;text-transform:uppercase; font-size:12.5px;letter-spacing:.02em;color:var(--sd-orange)} .sd-card__details svg{width:10px;height:12px;color:var(--sd-green)} /* ---------- SPONSOR ---------- */ .sd-sponsor{padding:56px 0 88px;text-align:center} .sd-sponsor__title{font-family:var(--ff);font-weight:900;text-transform:uppercase;line-height:1} .sd-sponsor__title .sd-boxed{font-size:clamp(22px,3.2vw,34px);box-shadow:6px 6px 0 0 var(--sd-green)} .sd-sponsor__lead{margin:22px auto 0;font-family:var(--ff);font-weight:800;color:var(--sd-dark); font-size:clamp(15px,1.35vw,19px)} .sd-sponsor__sub{margin:12px auto 0;max-width:760px;font-family:var(--ff);font-weight:500; color:var(--sd-body);font-size:clamp(13px,1vw,15px);line-height:1.6} .sd-sponsor__logos{margin:40px auto 0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:30px} .sd-sponsor__logo{width:230px;height:110px;display:flex;align-items:center;justify-content:center;background:#fff; border:1px solid #ededed;border-radius:8px;box-shadow:0 10px 26px rgba(0,0,0,.06);padding:22px 30px} .sd-sponsor__logo img{max-width:100%;max-height:50px;width:auto;height:auto;object-fit:contain} .sd-sponsor__past{margin:26px auto 0;font-family:var(--ff);font-weight:800;text-transform:uppercase; letter-spacing:.06em;color:var(--sd-dark);font-size:14px} .sd-sponsor__cta{margin-top:26px;font-weight:900;text-transform:uppercase;letter-spacing:.04em; padding:15px 40px;box-shadow:5px 6px 0 0 var(--sd-yellow)} /* ---------- TICKER ---------- */ .sd-ticker{background:#EFFFFA;overflow:hidden;padding:16px 0} /* margins, not `gap` — a flex gap isn't repeated after the last child, so the -50% loop lands half a gap short and the strip jumps every cycle */ .sd-ticker__track{display:flex;align-items:center;white-space:nowrap;width:max-content; animation:sd-ticker 34s linear infinite;will-change:transform} .sd-ticker__track > *{margin-right:26px} .sd-ticker__item{font-family:var(--ff);font-weight:600;font-size:12px;letter-spacing:.02em;color:var(--sd-dark)} .sd-ticker__dot{width:7px;height:7px;background:var(--sd-green);transform:rotate(45deg);flex:0 0 auto} @keyframes sd-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---------- RESPONSIVE ---------- */ @media (max-width:1024px){ .sd-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:767px){ .sd-hero{margin-top:-70px;padding:120px 0 56px} .sd-filter{gap:12px} .sd-filter__search{flex:1 1 100%;max-width:none} .sd-sort{flex:1 1 100%;max-width:none;width:100%} .sd-filter__input,.sd-sort__toggle{height:46px;font-size:15px} .sd-sort__opt{font-size:15px} .sd-grid{grid-template-columns:1fr;gap:26px} .sd-sponsor__logos{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;gap:16px; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 4px 12px} .sd-sponsor__logos::-webkit-scrollbar{display:none} .sd-sponsor__logo{flex:0 0 78%;scroll-snap-align:center} } /* NOTE: this file used to end with @media (prefers-reduced-motion:reduce){.sd-ticker__track{animation:none}} which killed the ticker outright on any machine with "reduce" set (Windows → Accessibility → Visual effects → Animation effects: off). It loaded AFTER style.css, so it also beat the exemption there. style.css now re-asserts every ticker track inside its own reduced-motion block — don't re-add this. */ /* ============================================================ VIDEO SECTION — opt-in via $sd_videos (e.g. power.php PowerPlay). Cards match the podcasts.php card (no play-button overlay on the thumb); 3 shown + "Load More". Videos play in the yt-modal.js popup (data-yt). ============================================================ */ .sd-videos{padding:8px 0 74px;text-align:center} .sd-videos__title{font-family:var(--ff);font-weight:900;text-transform:uppercase;line-height:1.1;margin-bottom:40px;margin-top:50px;} .sd-videos__title .sd-boxed{font-size:clamp(20px,3vw,32px);box-shadow:6px 6px 0 0 var(--sd-green);white-space:normal} /* deck-grid section heading — same boxed style as the videos heading, centered */ .sd-sec__title{font-family:var(--ff);font-weight:900;text-transform:uppercase;line-height:1.1;text-align:center;margin:0 0 40px} .sd-sec__title .sd-boxed{font-size:clamp(20px,3vw,32px);box-shadow:6px 6px 0 0 var(--sd-green);white-space:normal} .sd-vgrid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:1024px;margin:0 auto;text-align:left} /* card = podcasts .pc-card: mint fill, coloured border, hard offset shadow */ .sd-vcard{display:flex;flex-direction:column;background:#f0fbf7;border:1px solid rgba(38,182,133,.55); border-radius:3px;padding:11px 11px 22px;box-shadow:9px 12px 0 0 rgba(38,182,133,.5); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease} .sd-vcard.is-hidden{display:none} .sd-vcard:hover{transform:translateY(-5px);box-shadow:13px 16px 0 0 rgba(38,182,133,.62);border-color:rgba(38,182,133,.95)} .sd-vcard__thumb{display:block;width:100%;padding:0;border:0;background:#e7f4ee;line-height:0; border-radius:3px;overflow:hidden;aspect-ratio:349/196;cursor:pointer} .sd-vcard__thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease} .sd-vcard:hover .sd-vcard__thumb img{transform:scale(1.05)} .sd-vcard__title{margin:13px 3px 0;font-family:var(--ff);font-weight:700;color:#000;font-size:clamp(18px,1.5vw,21px);line-height:1.18} .sd-vcard__titlebtn{background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer;font:inherit;color:inherit;transition:color .2s ease} .sd-vcard:hover .sd-vcard__title,.sd-vcard:hover .sd-vcard__titlebtn{color:var(--sd-green)} .sd-vcard__desc{margin:9px 3px 0;font-family:var(--ff);font-weight:400;color:#272727;font-size:15px;line-height:1.4;flex:1 0 auto} .sd-vcard__watch{display:inline-flex;align-items:center;gap:10px;margin:16px 3px 0;align-self:flex-start; background:none;border:0;padding:0;cursor:pointer;font-family:var(--ff);font-weight:900;font-size:16px; letter-spacing:.02em;text-transform:uppercase;color:var(--sd-green)} .sd-vcard__playi{width:0;height:0;flex:0 0 auto;display:inline-block;border-style:solid; border-width:7px 0 7px 12px;border-color:transparent transparent transparent #111} .sd-vmore{position:relative;z-index:1;display:flex;justify-content:center;margin-top:44px} .sd-vmore__btn{font-family:var(--ff);font-weight:900;text-transform:uppercase;letter-spacing:.03em;font-size:14px; padding:15px 44px;color:var(--sd-dark);background:var(--sd-yellow);border:0;cursor:pointer;box-shadow:5px 6px 0 0 #1d1d1d} .sd-vmore__btn:hover{box-shadow:3px 4px 0 0 #1d1d1d} .sd-vseeall{margin:22px 0 0;font-family:var(--ff);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.04em} .sd-vseeall a{color:var(--sd-green);display:inline-flex;align-items:center;gap:7px;text-decoration:none} .sd-vseeall a:hover{color:#1d8f66} @media (max-width:1024px){ .sd-vgrid{grid-template-columns:repeat(2,1fr)} } @media (max-width:767px){ .sd-vgrid{grid-template-columns:1fr;gap:24px} .sd-videos{padding-bottom:56px} }