/* ============================================================ Pakistan & Counting — Product / Episode Detail page Pixel match to Figma: two-column episode detail (copy + bullets + links + socials | video cover + Watch More + time stamps). Base tokens / header / footer come from style.css. ============================================================ */ :root{ --pd-green:#26B685; --pd-orange:#FF6B22; --pd-yellow:#FFCB00; --pd-pink:#EF2167; --pd-dark:#2C2C2C; --pd-body:#4E4E4E; } /* Let the SITE-WIDE grid on (style.css) show straight through. That grid is a single, continuous, edge-complete graph-paper layer that already spans the whole page — behind the transparent sticky header and every section alike, starting at 0,0 with whole columns so boxes are never cut. This page only needs to avoid painting an opaque layer over it, so the wrapper and every section below stay transparent (they used to paint white + a per-section grid, which hid the body grid and misaligned the boxes). */ .pd-bg{position:relative} .pd-wrap{position:relative;overflow:hidden;background:transparent;padding:56px 0 72px} .pd-wrap>.container{position:relative;z-index:1} .pd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:56px;align-items:start} /* ---------- LEFT: copy ---------- */ .pd-main{font-family:var(--ff)} .pd-title{font-weight:800;color:var(--pd-dark);font-size:clamp(20px,1.9vw,26px);line-height:1.25;letter-spacing:-.01em} .pd-intro{margin-top:20px;color:var(--pd-body);font-weight:500;font-size:15px;line-height:1.7} /* rich-text description (admin-authored: headings, lists, links) */ .pd-rich>*:first-child{margin-top:0} .pd-rich>*:last-child{margin-bottom:0} .pd-rich p{margin:0 0 12px} .pd-rich h1{font-family:var(--ff);font-weight:900;color:var(--pd-dark);font-size:clamp(22px,2.5vw,28px);line-height:1.2;margin:22px 0 10px;text-transform:uppercase} .pd-rich h2{font-family:var(--ff);font-weight:900;color:var(--pd-dark);font-size:clamp(19px,2.1vw,24px);line-height:1.25;margin:20px 0 8px;text-transform:uppercase} .pd-rich h3{font-family:var(--ff);font-weight:800;color:var(--pd-dark);font-size:clamp(16px,1.7vw,19px);line-height:1.3;margin:16px 0 6px} .pd-rich h4{font-family:var(--ff);font-weight:800;color:var(--pd-dark);font-size:16px;line-height:1.3;margin:14px 0 6px} .pd-rich h5{font-family:var(--ff);font-weight:800;color:var(--pd-dark);font-size:14.5px;line-height:1.3;margin:12px 0 5px} .pd-rich h6{font-family:var(--ff);font-weight:800;color:var(--pd-dark);font-size:13px;line-height:1.3;margin:12px 0 5px;text-transform:uppercase;letter-spacing:.03em} /* the global reset zeroes ul markers — restore them for rich description content */ .pd-rich ul{list-style:disc;margin:0 0 12px;padding-left:24px} .pd-rich ol{list-style:decimal;margin:0 0 12px;padding-left:24px} .pd-rich li{margin:0 0 5px} .pd-rich a{color:var(--pd-orange);font-weight:700;text-decoration:underline;text-underline-offset:2px} .pd-rich a:hover{color:var(--pd-green)} .pd-rich strong,.pd-rich b{font-weight:800;color:var(--pd-dark)} .pd-rich blockquote{margin:14px 0;padding:8px 16px;border-left:3px solid var(--pd-green);color:var(--pd-dark);font-style:italic} .pd-lead{margin-top:22px;color:var(--pd-dark);font-weight:800;font-style:italic;font-size:15.5px} .pd-list{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px} .pd-list li{position:relative;padding-left:22px;color:var(--pd-body);font-weight:500;font-size:15px;line-height:1.5} .pd-list li::before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;background:var(--pd-pink)} .pd-cta{margin-top:22px;color:var(--pd-dark);font-weight:600;font-size:15px} .pd-cta b{color:var(--pd-pink);font-weight:900;text-decoration:underline;text-underline-offset:2px} .pd-block{margin-top:22px;color:var(--pd-dark);font-weight:600;font-size:15px;line-height:1.6} .pd-block a{color:var(--pd-green);font-weight:600;word-break:break-word} .pd-block a:hover{text-decoration:underline} .pd-follow{margin-top:26px;color:var(--pd-dark);font-weight:800;font-style:italic;font-size:15.5px} /* icons only — no URLs (Figma) */ .pd-social{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:16px} .pd-social li{display:flex} .pd-social .pd-ic{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;color:var(--pd-dark)} .pd-social .pd-ic:hover{color:var(--pd-green)} /* ---------- RIGHT: video + timestamps ---------- */ .pd-media{position:relative} .pd-video{position:relative;display:block} /* pink accent block behind the cover — peeks out top-right and runs down the full right side (Figma) */ .pd-video::before{content:"";position:absolute;top:-30%;right:-100vw;z-index:0;height: 100%;left: 70%;z-index: 0;pointer-events: none; background:var(--pd-pink)} .pd-video img{position:relative;z-index:1;display:block;width:100%;height:auto} .pd-watchmore{position:relative;z-index:1;display:flex;align-items:center;gap:12px; padding:30px 30px;color:#fff;font-family:var(--ff);font-weight:900;text-transform:uppercase; letter-spacing:.03em;font-size:18px;background:linear-gradient(90deg,var(--pd-pink),#f27ba0 85%)} .pd-watchmore .pd-play{width:0;height:0;border-style:solid;border-width:7px 0 7px 12px; border-color:transparent transparent transparent #fff} .pd-ts-title{margin-top:34px;display:inline-block;font-family:var(--ff);font-weight:800;color:var(--pd-dark); font-size:18px;position:relative;padding-bottom:9px} .pd-ts-title::after{content:none;display:none} .pd-ts{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px} .pd-ts li{color:var(--pd-body);font-weight:500;font-size:13.5px;line-height:1.4} .pd-ts li b{color:var(--pd-dark);font-weight:600} /* ---------- PRODUCT MODE (deck / webinar detail) ---------- */ .pd-crumb{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;font-family:var(--ff); font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;color:var(--pd-pink)} .pd-crumb:hover{text-decoration:underline} .pd-grid--product{align-items:center} .pd-kicker{display:inline-block;font-family:var(--ff);font-weight:800;text-transform:uppercase; letter-spacing:.12em;font-size:12px;color:var(--pd-green)} .pd-title--product{margin-top:12px;font-size:clamp(24px,2.4vw,34px);line-height:1.15;text-transform:uppercase} .pd-price{margin-top:16px;font-family:var(--ff);font-weight:900;font-size:34px;color:var(--pd-dark)} .pd-actions{margin-top:20px;display:flex;gap:16px;flex-wrap:wrap} .pd-buy{display:inline-flex;align-items:center;justify-content:center;font-family:var(--ff);font-weight:900; text-transform:uppercase;letter-spacing:.02em;font-size:14px;padding:15px 34px;cursor:pointer;border:0; transition:transform .12s ease,box-shadow .12s ease} .pd-buy--cart{background:var(--pd-orange);color:#fff;box-shadow:5px 5px 0 0 var(--pd-yellow);text-decoration:none} .pd-buy--now{background:var(--pd-yellow);color:var(--pd-dark);box-shadow:5px 5px 0 0 var(--pd-orange)} /* Buy Now (paid decks) + View Deck / Free Download (free decks) */ .pd-buy--buy{background:var(--pd-yellow);color:var(--pd-dark);box-shadow:5px 5px 0 0 var(--pd-orange);text-decoration:none} .pd-buy--view{background:var(--pd-green);color:#fff;box-shadow:5px 5px 0 0 var(--pd-yellow);text-decoration:none} .pd-buy--soon{background:#efefef;color:#8a8a8a;box-shadow:5px 5px 0 0 #dcdcdc;cursor:default} .pd-buy--soon:hover{transform:none} .pd-buy:hover{transform:translate(1px,1px)} .pd-facts{margin:26px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px} .pd-facts li{position:relative;padding-left:22px;font-family:var(--ff);font-weight:500;font-size:14.5px;color:var(--pd-body);line-height:1.5} .pd-facts li::before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;background:var(--pd-green)} .pd-video--product::before{background:var(--pd-green)} .pd-cover-price{position:absolute;left:-10px;bottom:-16px;z-index:2;font-family:var(--ff);font-weight:900;color:#fff; font-size:16px;line-height:1;padding:14px 18px;background:var(--pd-pink)} /* ---------- DECK detail (Figma): mixed-case title + underline, green price tag ---------- */ .pd-title--deck{margin:0;font-family:var(--ff);font-weight:800;color:var(--pd-dark);text-transform:none; font-size:clamp(24px,2.4vw,34px);line-height:1.22;letter-spacing:-.01em;position:relative;display:inline-block;padding-bottom:14px} .pd-title--deck::after{content:none;display:none} .pd-cover-price--deck{background:var(--pd-green);box-shadow:none; padding: 36px 22px 20px;clip-path: polygon(0px 20px, 8% 0px, 12% 20px, 100% 20px, 100% 100%, 0px 100%);} .pd-cover-price--deck::after{content:none;display:none} /* Product Detail page (video, frame #3) — title with a pink marker underline */ .pd-title--uline{position:relative;display:inline-block;padding-bottom:14px} .pd-title--uline::after{content:none;display:none} /* ---------- watermark panel behind the product cover (explainer technique) ---------- The provided color-variant asset sits BEHIND the cover, taller than it, peeking around the edges; width:auto keeps it from ever being distorted. Cover stays on top. */ /* product / deck cover: brand watermark image removed (client request); the solid colour accent block is kept, tinted per product via --pd-accent (falls back to green) */ .pd-video img.pd-wm{display:none} .pd-video.pd-video--product::before{display:block;background:var(--pd-accent,var(--pd-green))} /* ---------- Explainer EPISODE mode (?v=) ---------- */ .pd-grid--episode{align-items:start} .pd-eyebrow{display:inline-block;margin:0 0 10px;font-family:var(--ff);font-weight:800; text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--pd-green)} .pd-block-title{margin:28px 0 10px;font-family:var(--ff);font-weight:800;font-size:17px;color:var(--pd-dark); position:relative;padding-bottom:9px} .pd-block-title::after{content:none;display:none} .pd-fulldesc{white-space:pre-line;font-family:var(--ff);font-weight:400;color:var(--dark); font-size:16px;line-height:1.7;word-break:break-word} .pd-fulldesc a{color:var(--pd-green);text-decoration:underline;word-break:break-all} /* clickable timestamps (jump into the popup) */ .pd-ts--yt li{display:flex;gap:10px;align-items:baseline} .pd-ts-jump{flex:0 0 auto;background:none;border:0;padding:0;cursor:pointer; font-family:var(--ff);font-weight:800;font-size:13.5px;color:var(--pd-green);white-space:nowrap; font-variant-numeric:tabular-nums} .pd-ts-jump:hover{text-decoration:underline} .pd-ts--yt li span{color:var(--pd-body);font-weight:500;font-size:13.5px;line-height:1.45} .pd-buy--watch{background:var(--pd-green);color:#fff;box-shadow:5px 5px 0 0 var(--pd-yellow);gap:11px;text-decoration:none} .pd-play--btn{width:0;height:0;display:inline-block;border-style:solid;border-width:7px 0 7px 12px; border-color:transparent transparent transparent #fff} .pd-video--yt{cursor:pointer} .pd-cover-play{position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%); width:74px;height:74px;border-radius:50%;background:rgba(38,182,133,.92); display:grid;place-items:center;pointer-events:none;box-shadow:0 6px 24px rgba(0,0,0,.35);transition:transform .15s ease} .pd-cover-play::after{content:"";width:0;height:0;margin-left:6px; border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent #fff} .pd-video--yt:hover .pd-cover-play{transform:translate(-50%,-50%) scale(1.08)} /* ---------- Recorded Webinars section (bottom of Product Detail) ---------- */ /* transparent so the site-wide grid shows through, continuous with the whole page */ .pd-webinars{position:relative;overflow:hidden;background:transparent;padding:24px 0 74px} .pd-webinars>.container{position:relative;z-index:1} .pd-webinars__head{text-align:center;margin:0 0 34px;font-family:var(--ff);font-weight:900; text-transform:uppercase;line-height:1} /* ---------- RESPONSIVE ---------- */ @media (max-width:900px){ .pd-grid{grid-template-columns:1fr;gap:40px} .pd-media{order:-1} .pd-grid--product .pd-media{order:-1} } @media (max-width:600px){ .pd-wrap{padding:36px 0 52px} .pd-video::before{width:70%;height:80px;top:-16px;right:-16px;bottom:auto} }