/* ========================================================= PMPro Membership Black Card Real classes confirmed from the live site's rendered HTML: .pmpro_card_content .pmpro_membership_card-left / -right .pmpro_membership_card_field .pmpro_membership_card_field-qr_code .pmpro_membership_card_field-display_name .pmpro_membership_card_field-membership_startdate .pmpro_membership_card_field-membership_name .pmpro_membership_card_field_label / _data BOX MODEL, FINAL: literal fixed pixel width/height on .pmpro-bc-face (computed in includes/card-faces.php), no aspect-ratio, no padding-bottom percentage trick. Both of those techniques conflicted with this stylesheet's own box-sizing: border-box rule below (padding- bottom needs content-box sizing; border-box collapses it), which was the actual cause of the logo rendering outside the card and downloaded images coming out far too tall. Literal px width/height has no such ambiguity — border-box is fine (actually preferable) with them. Front and back get the EXACT same width/height (see card-faces.php) — this guarantees they always match physically for double-sided printing. IMPORTANT: nothing in this file targets the add-on's own print/PDF mechanism. If you see more than one card size when printing, control that from Memberships > Settings (the add-on's own print-size options). ========================================================= */ /* ---------- Overall wrapper ---------- */ .pmpro-bc-wrapper { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 14px !important; width: 100% !important; box-sizing: border-box !important; } .pmpro-bc-wrapper * { box-sizing: border-box !important; } /* Mobile default: front on top, back below (single column) */ .pmpro-bc-faces { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 20px !important; width: 100% !important; } /* Desktop: front and back side by side in the same row */ @media (min-width: 720px) { .pmpro-bc-faces { flex-direction: row !important; align-items: flex-start !important; justify-content: center !important; flex-wrap: wrap !important; } } /* ---------- Shared face box: literal fixed pixel dimensions ---------- */ .pmpro-bc-face { position: relative !important; display: block !important; width: var( --pmpro-bc-width, 400px ) !important; height: var( --pmpro-bc-height, 252px ) !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border-radius: var( --pmpro-bc-radius, 20px ) !important; overflow: hidden !important; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45) !important; background: #000000 !important; /* solid black fallback so any transparent/uncovered area of the front image never shows the page's white background through */ border: none !important; flex: 0 0 auto !important; } /* On very narrow screens, let the box shrink proportionally rather than overflow the viewport. This uses aspect-ratio ONLY as a non-critical enhancement here (not the primary sizing mechanism), so even if a browser ignores it, the card just stays at its fixed pixel size and may need horizontal scroll — it will not distort. */ @media (max-width: 460px) { .pmpro-bc-face { width: 100% !important; max-width: var( --pmpro-bc-width, 400px ) !important; aspect-ratio: var( --pmpro-bc-width, 400) / var( --pmpro-bc-height, 252 ); height: auto !important; } } /* Front face: just your uploaded artwork, no data */ .pmpro-bc-front img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; margin: 0 !important; } /* ---------- Back face: the real, dynamic card ---------- */ /* Neutralize any wrapper markup/styles the add-on renders around .pmpro_card_content (e.g. a default white background or border), without guessing its exact class name. This only affects background/ shadow/border cosmetics — it never sets display, so it can't hide any markup the add-on needs for print. */ .pmpro-bc-back, .pmpro-bc-back [class*="pmpro_membership_card"]:not(.pmpro_card_content):not([class*="_field"]) { background: transparent !important; box-shadow: none !important; border: none !important; margin-top: -18px; } .pmpro-bc-back .pmpro_card_content { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 22px !important; width: 100% !important; height: 100% !important; padding: 30px 26px !important; background: #000000 !important; /* plain black, no pattern, no colored border */ color: #f2f2f2 !important; font-family: "Helvetica Neue", Arial, sans-serif !important; border: none !important; overflow: hidden !important; } /* The add-on's "Print or Save as PDF" button sits in normal document flow BEFORE the card content by default — inside our fixed-height box with overflow:hidden, that pushed the actual card content down and clipped it, and also broke the front/back alignment. Taking it out of flow (absolute, top-right corner) fixes both at once, and it gets the same discreet treatment as the other links since it's a