/* social-embed-plugin/assets/front.css — v1.4.0 */ /* ── Page wrapper ─────────────────────────────────────────────────────────── */ .sep-single { max-width: 800px; margin: 0 auto; padding: 24px 16px 48px; } /* ── Article ──────────────────────────────────────────────────────────────── */ .sep-article { width: 100%; } /* ── Title ────────────────────────────────────────────────────────────────── */ .sep-article__header { margin-bottom: 24px; } .sep-article__title { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 700; line-height: 1.25; margin: 0; word-break: break-word; } /* ── Embed wrapper ────────────────────────────────────────────────────────── */ .sep-embed-wrapper { width: 100%; } /* ── YouTube: responsive 16:9 iframe ─────────────────────────────────────── */ .sep-video-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; border-radius: 6px; background: #000; } .sep-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* ── TikTok: centre the embed card ───────────────────────────────────────── */ .sep-embed-wrapper--tiktok { display: flex; justify-content: center; } .sep-embed-wrapper--tiktok blockquote { max-width: 480px; width: 100%; } /* ── Instagram: centre the embed card ────────────────────────────────────── */ .sep-embed-wrapper--instagram { display: flex; justify-content: center; } .sep-embed-wrapper--instagram .instagram-media { max-width: 540px !important; width: 100% !important; min-width: 0 !important; } /* ── No-embed fallback ────────────────────────────────────────────────────── */ .sep-no-embed { padding: 24px; background: #f5f5f5; border: 1px dashed #ccc; text-align: center; color: #888; border-radius: 4px; } /* ── Responsive tweaks ────────────────────────────────────────────────────── */ @media ( max-width: 600px ) { .sep-single { padding: 16px 12px 32px; } .sep-embed-wrapper--tiktok blockquote, .sep-embed-wrapper--instagram .instagram-media { max-width: 100% !important; } } /* ── Suppress theme meta (author, category, tags) on social_post singles ───── * * WordPress automatically adds .single-social_post to for this CPT. * The selectors below cover the entry-meta patterns used by the most widely * deployed themes (Twenty* defaults, Astra, GeneratePress, Kadence, Divi, * OceanWP, Neve, Blocksy, Hello Elementor, Storefront). * * If your theme uses a different class, add it here or copy this file into * your theme root as single-social_post.php to take full control. */ .single-social_post .entry-meta, .single-social_post .post-meta, .single-social_post .post-info, .single-social_post .byline, .single-social_post .author-info, .single-social_post .post-author, .single-social_post .entry-footer, .single-social_post .post-footer, .single-social_post .cat-links, .single-social_post .tags-links, .single-social_post .posted-by, .single-social_post .posted-on, .single-social_post .post-categories, .single-social_post .post-tags, .single-social_post .article-meta, .single-social_post .jeg_post_meta, .single-social_post .vcard, .single-social_post [class*="entry-meta"], .single-social_post [class*="post-meta"] { display: none !important; } /* ============================================================= Social Post Archive Card Mirrors the lpt-link-card structure from Link Post Type Plus so both post types share the same visual design on the blog listing page. Platform badge colours are the only difference. HTML structure (rendered by SEP_Renderer::render_card()):

============================================================= / / ── Card Container ── / .sep-card { margin-bottom: 2rem; border-radius: 12px; overflow: hidden; background: #ffffff; } / ── Clickable Wrapper ── / .sep-cardinner { display: flex; flex-direction: column; text-decoration: none; color: inherit; height: 100%; } / ── Image ── / .sep-cardimage-wrap { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #f1f5f9; } .sep-cardimage { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .sep-card:hover .sep-cardimage { transform: scale(1.03); } / ── Body ── / .sep-cardbody { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } / ── Meta Row ── / .sep-cardmeta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } / ── Platform Badge — shared structure ── / .sep-cardtype-badge { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.2em 0.6em; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } / YouTube — red / .sep-cardtype-badge--youtube { background: #fff0f0; color: #cc0000; border-color: #fca5a5; } / TikTok — near-black / .sep-cardtype-badge--tiktok { background: #f0f0f0; color: #111111; border-color: #d1d5db; } / Instagram — purple/magenta / .sep-cardtype-badge--instagram { background: #fdf4ff; color: #7e22ce; border-color: #e9d5ff; } / ── Source label ── / .sep-cardsource { font-size: 0.78rem; color: #64748b; font-weight: 500; } / ── Title ── / .sep-cardtitle { font-size: 1.1rem; font-weight: 700; line-height: 1.4; margin: 0; color: #0f172a; } .sep-card:hover .sep-cardtitle { color: #1d4ed8; } / ── Excerpt ── / .sep-cardexcerpt { font-size: 0.88rem; color: #475569; line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } / ── Footer Row ── / .sep-cardfooter { display: flex; align-items: center; justify-content: space-between; margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid #f1f5f9; } .sep-carddate { font-size: 0.78rem; color: #94a3b8; } .sep-cardcta { font-size: 0.78rem; font-weight: 600; color: #1d4ed8; letter-spacing: 0.01em; } / ── Responsive ── / @media (max-width: 480px) { .sep-cardbody { padding: 1rem; } .sep-card__title { font-size: 1rem; } } / ============================================================= Zeen Theme Compatibility Zeen renders its own image, title, excerpt, and byline for every post in its proprietary loop. These rules suppress that default output for social_post entries so only our sep-card is visible. WordPress automatically adds type-{post_type} to the
element, so social_post entries receive the class type-social_post. Zeen's article structure per post:

...
← featured image → hide

...
← date/author/cat → hide
...
← post title → hide
...
← excerpt text → hide
← our card → show ============================================================= / article.type-social_post .mask { display: none !important; } article.type-social_post .title-wrap { display: none !important; } article.type-social_post [class="byline"]{ display: none !important; } article.type-social_post .excerpt { display: none !important; } article.type-social_post .meta { padding: 0 !important; }