[ div.castos-player , div.podcast_meta ]
> p.ssp-episode-list-content > .ssp-podcast-list__pagination.ssp-podcast-list__pagination--full Card language is the /blog/ post card, value for value: transparent, no border, no card shadow, 10px radius on the image only, aspect-ratio 2/1 + object-fit:cover, hover scale(1.1) on .2s all ease-in-out, 40px rhythm, separated by the site's only hairline idiom, 1px solid #deeffe. The "no chrome" half of that needs no declarations: SSP's list layout adds none. It is only `layout="cards"` that brings a background, an 8px radius and a shadow, and this stylesheet deliberately does NOT half-support that mode — the `divi/code` token must stay `layout=list`. ===================================================================== */ /* SSP prints INLINE, in the body, at (0,1,0) on a class produced by wp_unique_id() — unstable, never target it. This is (0,2,0), so it wins on specificity without naming that class and regardless of source order. It is also why the shortcode passes no colour arguments. */ .ed-episodes .ssp-podcast-list{ --ssp-episode-list-title-size:var(--ed-card-title); --ssp-episode-list-cols:1; --ssp-episode-list-gap:var(--ed-gap-y); --ssp-episode-list-article-margin-bottom:0; --ssp-episode-list-title-color:var(--ed-heading); --ssp-episode-list-text-color:var(--ed-body); --ssp-episode-list-link-color:var(--ed-blue); --ssp-episode-list-pagination-color:var(--ed-heading); --ssp-episode-list-pagination-active:var(--ed-heading); } /* Belt and braces: if SSP ever renames --ssp-episode-list-gap the flex gap would silently fall back to its 10px default. (0,2,0) vs SSP's (0,1,0). */ .ed-episodes .ssp-podcast-list__articles{gap:var(--ed-gap-y)} /* (0,2,1) vs SSP's `.ssp-podcast-list article` (0,1,1). min-width:0 replaces SSP's min-width:100px so a long unbroken word cannot widen the flex item and force a horizontal page scroll. */ .ed-episodes .ssp-podcast-list article{ margin-bottom:0; padding:0 0 var(--ed-gap-y); border-bottom:1px solid var(--ed-pale); min-width:0; } .ed-episodes .ssp-podcast-list article:last-child{padding-bottom:0;border-bottom:0} /* TITLE — the site's own card-title treatment, not an invented one: `.et_pb_text_2 .et_pb_text_inner h3` = Merriweather 700 / 24px / 1.3em / #003189, which is exactly what the S2 and S3 card titles on this same page render at, at every breakpoint. (An earlier draft used Poppins 500/18px on the grounds that "Merriweather is never used below 30px on this site" — that is false: the same file also carries the toggle preset at Merriweather 400/20px, and both render on this page.) (0,3,1) vs SSP's `.ssp-podcast-list article .ssp-episode-title` (0,2,1) and vs the global `h1,h2,h3,h4,h5,h6{...}` rules (0,0,1). */ .ed-episodes .ssp-podcast-list article .ssp-episode-title{ margin:0 0 16px;padding:0; font-family:var(--ed-serif);font-weight:700; font-size:var(--ssp-episode-list-title-size);line-height:1.3em; color:var(--ed-heading); overflow-wrap:anywhere; } /* (0,4,2) vs SSP's `.ssp-podcast-list article .ssp-episode-title a` (0,3,2) and the global `a{color:#003189}` (0,0,1). */ .ed-episodes .ssp-podcast-list article .ssp-episode-title a.entry-title-link{ color:inherit;text-decoration:none; } /* (0,5,2) vs SSP's `… .ssp-episode-title a:hover{opacity:0.75}` (0,4,2). The site's link affordance is an underline, not a fade. */ .ed-episodes .ssp-podcast-list article .ssp-episode-title a.entry-title-link:hover{ opacity:1;text-decoration:underline; } /* The template wraps the player inbut emits two
on each side (verified against the real 12-episode render). Divi gives every
padding-bottom:1em, so without this every row gains two ghost ~1em gaps. wpautop can leave the same artefact around code-module output. (0,2,1)/(0,3,1) already beat `p{padding-bottom:1em}` (0,0,1); the !important is there because this hides a parser artefact and must never lose to a rule nobody has thought of. */ .ed-episodes .ssp-podcast-list .podcast-content>p:empty, .ed-episodes p:empty, .ed-episode-list .et_pb_code_inner>p:empty{display:none!important;margin:0;padding:0} /* EXCERPT — the site's body clamp and the preset's 1.6em, not a fixed size. */ .ed-episodes .ssp-podcast-list p.ssp-episode-list-content{ margin:0 0 20px;padding:0; font-family:var(--ed-sans);font-size:var(--ed-p);line-height:1.6em; color:var(--ed-body); } .ed-episodes .ssp-podcast-list p.ssp-episode-list-content:empty{display:none} /* META STRIP — "Download file | Play in new window | Duration | Recorded on". 16px is the site's smallest real type size (--gvid-wis6hihqj2, #top-menu a); there is no 14px anywhere on exploredigital.com. */ .ed-episodes .ssp-podcast-list .podcast_meta{margin:16px 0 0} .ed-episodes .ssp-podcast-list .podcast_meta aside, .ed-episodes .ssp-podcast-list .podcast_meta p{margin:0;padding:0} .ed-episodes .ssp-podcast-list .podcast_meta p{ font-family:var(--ed-sans);font-size:16px;line-height:1.6em;color:var(--ed-muted); } /* The duration/date s take --ssp-episode-list-text-color from SSP's `.ssp-podcast-list article .podcast_meta span` (0,3,2), which would leave them at full body colour inside a muted line. (0,4,2) fixes that. */ .ed-episodes .ssp-podcast-list article .podcast_meta span{color:var(--ed-muted)} /* (0,3,1) vs SSP's `.ssp-podcast-list article a:not(.entry-title-link)` (0,2,2). */ .ed-episodes .ssp-podcast-list .podcast_meta a{color:var(--ed-blue);text-decoration:none} .ed-episodes .ssp-podcast-list .podcast_meta a:hover{text-decoration:underline} /* EPISODE IMAGE — dormant today (display_image="false"), pre-styled so the shortcode argument can be flipped with no CSS work. Every value is the /blog/ post card's. */ .ed-episodes .ssp-podcast-list a.podcast-image-link{ display:block;margin:0 0 16px;border-radius:var(--ed-radius); overflow:hidden;line-height:0; } .ed-episodes .ssp-podcast-list a.podcast-image-link img{ width:100%;aspect-ratio:2 / 1;object-fit:cover;border-radius:var(--ed-radius); transition:0.2s all ease-in-out; } .ed-episodes .ssp-podcast-list article:hover a.podcast-image-link img{transform:scale(1.1)} .ed-episodes .ssp-podcast-list a.podcast-image-link:empty{display:none} /* --------------------------------------------------------------------- PAGINATION = the site's own wp-pagenavi idiom, rebuilt on .page-numbers. Measured (et-core-unified-127796.min.css): .wp-pagenavi{text-align:center} .wp-pagenavi>*{margin:0 10px} span.current{color:#fff;background:#003189;padding:4px 12px;border-radius:4px} a.previouspostslink{margin-right:50px} a.nextpostslink{margin-left:50px} @media(max-width:424px){ those two become 30px } So the site's real gaps are 10+10=20px between items, 50+10=60px either side of prev/next, and 30+10=40px at <=424. This is a flex container, where `gap` ADDS to item margins rather than replacing them, so the margins here are 40px / 20px, not 50px / 30px — otherwise the same gaps would come out 70px and 42px. Container is (0,2,0) vs SSP's `.ssp-podcast-list__pagination--full` (0,1,0); items are (0,3,0)/(0,4,0)/(0,4,1) vs SSP's (0,2,0)/(0,3,0)/(0,3,1). --------------------------------------------------------------------- */ .ed-episodes .ssp-podcast-list__pagination:empty{display:none} .ed-episodes .ssp-podcast-list__pagination{ margin-top:48px; display:flex;justify-content:center;align-items:center; gap:20px;flex-wrap:wrap; font-family:var(--ed-sans);font-weight:500;font-size:16px; } .ed-episodes .ssp-podcast-list__pagination .page-numbers{ display:inline-block;padding:4px 12px;border-radius:4px; color:var(--ed-heading);text-decoration:none; transition:0.2s all ease-in-out; } .ed-episodes .ssp-podcast-list__pagination .page-numbers.current, .ed-episodes .ssp-podcast-list__pagination a.page-numbers:hover{ background:var(--ed-heading);color:var(--ed-white); } /* SSP fades every pagination link on hover (`__pagination a:hover{opacity:.75}`, (0,1,1)); we invert on hover instead, so the fade has to go. */ .ed-episodes .ssp-podcast-list__pagination a.page-numbers:hover{opacity:1} .ed-episodes .ssp-podcast-list__pagination .page-numbers.dots{ background:none;color:var(--ed-body);padding-left:0;padding-right:0; } .ed-episodes .ssp-podcast-list__pagination .prev.page-numbers{margin-right:40px} .ed-episodes .ssp-podcast-list__pagination .next.page-numbers{margin-left:40px} /* ===================================================================== 8. CASTOS HTML5 PLAYER, re-skinned to the palette Unscoped from .ed-episodes on purpose, so single episode pages match the archive. SSP declares its palette as custom properties on :root, so the colour work is a variable swap on the player element and no selector fight at all; only the values castos-player.css hard-codes need selectors, and every one of those is Castos red (#df4e4f / #dd4142). That red inventory is complete: --ssp-progress-bar-color, --ssp-play-btn-color, .close-btn span, .player-panel-row button:hover, .share-icon:hover, .player-btn__volume.off. Every selector below carries a leading `div` — the player root is always A #deeffe panel is the site's own band colour used as a card. That IS a stated deviation — #deeffe appears on this site only as a full-bleed section band, a wave-divider fill, the mobile-menu hairline and the open/close menu chip; it is never a rounded panel. Everything else about the card is measured: the radius and the padding ramp are .et_pb_column_25's own (56 / 36 / 40-20), the heading is the same Merriweather 700 / 24px / 1.3em card title the episode rows use, the measure is the 800px narrow measure the site uses on its FAQ row and on S4, and .ed-btn reproduces the byix5tavy3 preset declaration for declaration. .ed-podcast-empty h3 is (0,1,1) and beats every global h1..h6 rule (0,0,1); .ed-podcast-empty p is (0,1,1) and beats Divi core's p{padding-bottom:1em}. ===================================================================== */ .ed-podcast-empty{ margin:0;padding:56px;text-align:center; background:var(--ed-pale);border-radius:var(--ed-radius); font-family:var(--ed-sans);color:var(--ed-body); } .ed-podcast-empty h3{ margin:0 0 16px;padding:0; font-family:var(--ed-serif);font-weight:700; font-size:var(--ed-card-title);line-height:1.3em; color:var(--ed-heading); } .ed-podcast-empty p{ margin:0 auto 24px;padding:0;max-width:800px; font-size:var(--ed-p);line-height:1.6em;color:var(--ed-body); } .ed-podcast-empty p:last-child{margin-bottom:0} .ed-podcast-empty .ed-btn{ display:inline-block; font-family:var(--ed-sans);font-weight:700;font-size:18px;line-height:1.7em; color:var(--ed-navy); background-color:var(--ed-yellow); border:2px solid var(--ed-yellow); border-radius:var(--ed-radius-btn); padding:12px 16px; text-decoration:none; transition:background-color 300ms ease,border-color 300ms ease,color 300ms ease; } .ed-podcast-empty .ed-btn:hover{ background-color:var(--ed-blue);border-color:var(--ed-blue);color:var(--ed-white); } /* ===================================================================== 10. RESPONSIVE — the site's own 980 / 700 / 424 breakpoints ===================================================================== */ @media only screen and (max-width:980px){ /* Both button presets ship css.tablet.freeForm = "width:100%;text-align:center", which compiles to @media(max-width:980px){…{width:100%;text-align:center}}. The empty-state CTA has to switch at the SAME breakpoint, or across the whole 701–980px range it is an auto-width pill sitting directly below S4's identically-labelled full-bleed "Subscribe by RSS" button. */ .ed-podcast-empty .ed-btn{display:block;text-align:center} .ed-podcast-empty{padding:36px} /* .et_pb_column_25 tablet padding */ } @media only screen and (max-width:700px){ .ed-hero-art img{max-width:260px} /* DERIVED — see §3 */ /* 63 characters of feed address must never force a horizontal page scroll. */ .et_pb_text_inner a.ed-feed-url{white-space:normal;word-break:break-all;padding:16px} .ed-episodes .ssp-podcast-list{--ssp-episode-list-gap:32px} /* --vertical-gap:32px */ .ed-episodes .ssp-podcast-list article{padding-bottom:32px} .ed-episodes .ssp-podcast-list__pagination{margin-top:32px} .ed-podcast-empty{padding:40px 20px} /* .et_pb_column_25 phone padding */ } @media only screen and (max-width:424px){ /* 20 + the 20px flex gap = the site's own 40px at this breakpoint. */ .ed-episodes .ssp-podcast-list__pagination .prev.page-numbers{margin-right:20px} .ed-episodes .ssp-podcast-list__pagination .next.page-numbers{margin-left:20px} }