/* ============================================================= RevvRider — single.css Single-post-only rules: hero, quick summary, TOC, review scores, comments, author box, related posts, post navigation, social share. ============================================================= */ .rr-single__header{padding-block:40px;background:var(--rr-gray-100);} .rr-single__hero-content .rr-breadcrumbs{margin-bottom:18px;} /* .rr-badge defaults to position:absolute for its usual job as an image overlay (cards, hero tiles) — in the single-post header it has no media box to anchor to, so it must render inline instead, or it escapes to the page's initial containing block and floats near the top of the viewport. */ .rr-single__header .rr-badge{position:static;display:inline-block;margin-bottom:14px;} .rr-single__title{font-size:clamp(28px,4vw,42px);line-height:1.2;margin:0 0 18px;} .rr-single__meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--rr-gray-600);font-size:14px;margin-bottom:22px;} /* Static pages (page.php) keep a plain full-bleed hero — only single posts use the 50/50 grid below. */ .rr-single__hero{max-height:520px;overflow:hidden;} .rr-single__hero img{width:100%;height:100%;object-fit:cover;} /* 50/50 hero: title/meta on the left, featured image on the right. object-fit:contain (not cover) is deliberate: not every existing image on a real site actually has the 'revvrider-hero' 16:9 size generated for it (older uploads, images added before the theme/its image sizes existed) — cover would crop those down to fill the box, which is exactly the "image isn't fully visible" complaint this section exists to fix. Contain guarantees the whole image shows regardless of its actual ratio, at the cost of letterboxing (filled by the box's own background) when an image's ratio doesn't match the 16:9 box. */ .rr-single__hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;} .rr-single__hero-content{min-width:0;} /* White, not gray-100 — .rr-single__header now has a gray-100 background of its own, so a same-color media box would blend invisibly into it instead of reading as a distinct image frame. */ .rr-single__hero-media{border-radius:var(--rr-radius);overflow:hidden;background:var(--rr-white);aspect-ratio:16/9;} .rr-single__hero-media img{width:100%;height:100%;object-fit:contain;} @media (max-width:900px){ .rr-single__hero-grid{grid-template-columns:1fr;gap:20px;} } /* ---------- Content typography ---------- */ /* style.css's global h1-h6 reset gives headings margin:0 on top (only a bottom margin), so post-body headings had no breathing room of their own above them — they just inherited whatever the previous element's bottom margin happened to collapse to. Explicit top margins here, sized larger than the paragraph's own bottom margin, guarantee real separation regardless of what precedes them (FAQ answer paragraphs directly above a question heading were the worst offender). */ .rr-single__content h2{margin:2em 0 .6em;font-size:clamp(26px,3vw,30px);} .rr-single__content h3{margin:1.7em 0 .5em;font-size:clamp(21px,2.4vw,24px);} .rr-single__content h4{margin:1.4em 0 .5em;font-size:19px;} /* h5/h6 otherwise fall back to raw browser UA defaults (~13px/~11px at this body size) since style.css's global h1-h6 reset sets no font-size at all — too small to read as headings. h5 matches body size but bold; h6 goes smaller still, so weight+caps carry the "this is a heading" signal instead of size. */ .rr-single__content h5{margin:1.3em 0 .4em;font-size:17px;font-weight:700;} .rr-single__content h6{margin:1.3em 0 .4em;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;} .rr-single__content h2:first-child,.rr-single__content h3:first-child,.rr-single__content h4:first-child,.rr-single__content h5:first-child,.rr-single__content h6:first-child{margin-top:0;} .rr-single__content p{margin:0 0 1.2em;} /* Sitewide a{color:charcoal} (style.css) makes every link, nav or body text, the same dark neutral — fine for nav/UI chrome, but inline links inside an article need to stand out from the surrounding prose so readers can spot them at a glance. --rr-accent-text, not --rr-accent — plain article text on white is exactly the case that color fails AA contrast at (see the :root comment in style.css); the underline bar matches it for the same reason, so bar and text never mismatch. The underline itself is a background-gradient bar, not text-decoration — text-decoration has no size/length to transition, so a hover-driven "grow" animation needs an actual paintable box to animate instead. It sits flush under the baseline via background-position, starts at 0% width, and animates open left-to-right on hover (closing the same way on mouse-out). The gradient's own color is left untouched between states — only background-size transitions here, since a background-image color swap can't be eased, it just snaps; keeping one fixed accent-colored bar avoids a stray instant color-flip mid-animation. */ .rr-single__content a{color:var(--rr-accent-text);text-decoration:none;background-image:linear-gradient(var(--rr-accent-text),var(--rr-accent-text));background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px;padding-bottom:1px;transition:color .2s ease,background-size .25s ease;} .rr-single__content a:hover{color:var(--rr-charcoal);background-size:100% 2px;} .rr-single__content ul,.rr-single__content ol{margin:0 0 1.2em;padding-left:1.4em;} .rr-single__content > *:last-child{margin-bottom:0;} /* Rank Math's FAQ block (h3.rank-math-question + div.rank-math-answer, each pair wrapped in .rank-math-faq-item) ships its own plugin CSS that zeroes the question heading's margin — that stylesheet loads after ours with the same single-class specificity, so it silently won regardless of the h2/h3 rule above and left every FAQ question flush against the previous answer. Scoped two classes deep here to outrank it outright, and spaced via the wrapper rather than the heading's own margin so it holds no matter what Rank Math does to the heading/answer elements directly. */ .rr-single__content .rank-math-faq-item{margin-top:1.7em;} .rr-single__content .rank-math-faq-item:first-child{margin-top:0;} .rr-single__content .rank-math-question{margin:0 0 .5em;} .rr-single__content .rank-math-answer{margin:0;} /* AI Summarize Buttons plugin ships its own hardcoded inline