/* ========================================================================= RF THUNDER — BLOG (archive + single post) Shares the homepage's design tokens (fonts, dark palette, red accent) without the WebGL hero / custom-cursor weight, so blog pages stay fast. ========================================================================= */ :root{ /* Fallback only — normally overridden by the inline :root block the PHP Customizer generates right after this file loads (see rfth_generate_color_css() in functions.php). Kept in sync with the same 4-color system defined in rfthunder-home.css. */ --bg:#000000; --bg-rgb:0,0,0; --ink:#F4EFE4; --ink-rgb:244,239,228; --muted:#8C8880; --muted-rgb:140,136,128; --red:#E2231C; --red-rgb:226,35,28; /* See the matching comment in rfthunder-home.css :root — hue-preserving lightness shift, not a color-mix()-toward-white blend (that desaturated toward pink instead of just brightening). Pre-JS fallback only. */ --red-hover:#EA5752; --red-hover-rgb:234,87,82; --red-active:#AC1B15; --line: rgba(var(--ink-rgb),0.1); --maxw:1180px; --ease: cubic-bezier(.16,.84,.44,1); } *{ box-sizing:border-box; } /* Safety net: any image/video/iframe/embed that doesn't already have its own explicit sizing is capped at its container's width, so WP post content (embeds, oversized images, etc.) can never force horizontal overflow/scroll on narrow screens. */ img, svg, video, iframe, embed, object{ max-width:100%; } /* See the matching comment in rfthunder-home.css: needs its own guaranteed background + overscroll-behavior so the mobile rubber-band bounce past the top/bottom of the page never reveals a flash of white. */ html{ scroll-behavior:smooth; background:var(--bg); min-height:100%; overscroll-behavior-y:none; } body.rfth-blog-body{ margin:0; min-height:100%; background:var(--bg); color:var(--ink); font-family:'Manrope', sans-serif; overflow-x:hidden; overscroll-behavior-y:none; position:relative; } /* Kept in exact sync with the h1/h2/h3 rule in rfthunder-home.css (same family/weight/line-height/letter-spacing) so headings on the privacy, terms, cookies, blog and single-post pages render with the identical font style as the homepage. */ body.rfth-blog-body h1, body.rfth-blog-body h2, body.rfth-blog-body h3{ font-family:'Fraunces', serif; font-weight:460; line-height:1.05; letter-spacing:-0.01em; margin:0; } body.rfth-blog-body em{ font-style:italic; font-weight:420; color:var(--red); } body.rfth-blog-body p{ margin:0; } body.rfth-blog-body a{ color:inherit; text-decoration:none; } body.rfth-blog-body ::selection{ background:var(--red); color:var(--bg); } body.rfth-blog-body a:focus, body.rfth-blog-body button:focus{ outline:none; } body.rfth-blog-body a:focus-visible, body.rfth-blog-body button:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:2px; } .grain{ position:fixed; inset:0; z-index:2; pointer-events:none; opacity:0.04; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--red); font-weight:700; } .lede{ font-family:'Manrope'; font-size:clamp(15px,1.6vw,18px); line-height:1.6; color:var(--muted); max-width:560px; } .cta-btn--solid{ display:inline-flex; align-items:center; gap:10px; background:var(--red); color:var(--ink); border:none; padding:14px 28px; border-radius:3px; font-weight:700; font-size:14px; cursor:pointer; } .cta-btn--solid:hover{ background:var(--red-hover); } .cta-btn--solid:active{ transform:translateY(0); } /* ---------------------------- HEADER / NAV ------------------------------ */ .nav.rfth-blog-nav{ position:fixed; top:0; left:0; right:0; z-index:80; display:flex; align-items:center; justify-content:space-between; padding:16px clamp(20px,4vw,56px); background:rgba(var(--bg-rgb),0.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 1px 0 rgba(var(--ink-rgb),0.07); } .rfth-blog-nav .nav__brand{ display:flex; align-items:center; gap:10px; } .rfth-blog-nav .nav__logo{ height:56px; width:auto; max-width:260px; display:block; object-fit:contain; } .rfth-blog-nav .nav__links{ display:flex; gap:clamp(16px,2.4vw,34px); } .rfth-blog-nav .nav__links a{ position:relative; font-size:12.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink); font-weight:800; transition:color .25s ease, text-shadow .3s ease; padding-bottom:3px; } .rfth-blog-nav .nav__links a::after{ content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--red); box-shadow:0 0 6px 1px rgba(var(--red-rgb),0.8); transition:right .3s var(--ease); } .rfth-blog-nav .nav__links a:hover{ color:var(--ink); text-shadow:0 0 12px rgba(var(--red-rgb),0.85); } .rfth-blog-nav .nav__links a.active{ color:var(--red); } .rfth-blog-nav .nav__links a.active::after{ right:0; } .rfth-blog-nav .nav__cta{ font-size:12.5px; letter-spacing:0.04em; text-transform:uppercase; font-weight:700; color:var(--ink); border-bottom:1px solid var(--red); padding-bottom:3px; transition:color .2s ease, border-color .2s ease; } .rfth-blog-nav .nav__cta:hover{ color:var(--ink); border-color:var(--ink); } .rfth-blog-nav .nav__burger{ display:none; width:28px; height:28px; border:none; background:none; cursor:pointer; position:relative; } .rfth-blog-nav .nav__burger span{ position:absolute; left:3px; right:3px; height:1.5px; background:var(--red); transition:transform .3s var(--ease), opacity .3s ease, background .3s ease; } .rfth-blog-nav .nav__burger span:nth-child(1){ top:9px; } .rfth-blog-nav .nav__burger span:nth-child(2){ top:14px; } .rfth-blog-nav .nav__burger span:nth-child(3){ top:19px; } .rfth-blog-nav .nav__burger.open span:nth-child(1){ transform:translateY(5px) rotate(45deg); } .rfth-blog-nav .nav__burger.open span:nth-child(2){ opacity:0; } .rfth-blog-nav .nav__burger.open span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); } .rfth-blog-nav .nav__burger:hover span{ background:var(--red); } /* 8 nav links + CTA + logo genuinely don't fit in the ~780-1080px range (real tablets, e.g. iPad landscape at 1024px) — switching to the hamburger menu well before that avoids the links visibly overlapping the CTA button or wrapping onto a second line. Matches the homepage's same-reasoning breakpoint. */ @media (max-width:1100px){ .rfth-blog-nav .nav__links, .rfth-blog-nav .nav__cta{ display:none; } .rfth-blog-nav .nav__burger{ display:block; } } @media (max-width:480px){ .rfth-blog-nav .nav__logo{ height:42px; max-width:200px; } } #rfthMobileMenu{ position:fixed; inset:0; z-index:70; background:rgba(var(--bg-rgb),0.98); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s; overflow-y:auto; padding:90px 20px 40px; } #rfthMobileMenu.open{ opacity:1; visibility:visible; } /* See the matching comment in rfthunder-home.css #mobileMenu — keeps every link reachable on short/landscape phones. */ @media (max-height:560px){ #rfthMobileMenu{ gap:14px; justify-content:flex-start; } #rfthMobileMenu a{ font-size:18px; } } /* Matches the desktop nav link typography (.nav__links a) — see the same comment in rfthunder-home.css #mobileMenu a — so the mobile slide-out menu never switches to a different (serif/italic) font than the rest of the site. */ #rfthMobileMenu a{ font-family:'Manrope', sans-serif; font-size:clamp(20px,5.5vw,26px); font-style:normal; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink); text-shadow:0 0 10px rgba(var(--red-rgb),0.35); } #rfthMobileMenu a:hover{ color:var(--ink); text-shadow:0 0 14px rgba(var(--red-rgb),0.7); } #rfthToTop{ position:fixed; right:clamp(14px,3vw,36px); bottom:26px; z-index:20; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:rgba(var(--bg-rgb),0.5); display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transform:translateY(10px); transition:opacity .3s ease, transform .3s ease, border-color .3s ease; } #rfthToTop.show{ opacity:1; transform:translateY(0); } #rfthToTop:hover{ border-color:var(--red); } #rfthToTop svg{ width:14px; height:14px; stroke:var(--ink); } /* ------------------------------ LAYOUT ---------------------------------- */ .rfth-blog-main{ position:relative; z-index:10; max-width:var(--maxw); margin:0 auto; padding:150px clamp(20px,6vw,90px) 40px; } .blog-hero{ padding-bottom:56px; opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .blog-hero.is-visible{ opacity:1; transform:translateY(0); } .blog-hero h1{ font-size:clamp(38px,6vw,64px); margin-top:14px; } .blog-hero .lede{ margin-top:16px; } /* ------------------------------ BLOG GRID -------------------------------- */ .blog-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:34px 28px; } @media (max-width:980px){ .blog-grid{ grid-template-columns:repeat(2, 1fr); } } @media (max-width:640px){ .blog-grid{ grid-template-columns:1fr; } } .blog-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:rgba(var(--ink-rgb),0.015); opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease), border-color .3s ease, box-shadow .3s ease; } .blog-card.is-visible{ opacity:1; transform:translateY(0); } .blog-card:hover{ border-color:rgba(var(--red-rgb),0.4); box-shadow:0 16px 34px -14px rgba(var(--red-rgb),0.35); } .blog-card__media{ display:block; aspect-ratio:16/10.4; overflow:hidden; background:var(--bg); } .blog-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); } .blog-card:hover .blog-card__media img{ transform:scale(1.06); } .blog-card__placeholder{ display:block; width:100%; height:100%; background:linear-gradient(135deg, rgba(var(--red-rgb),0.14), rgba(var(--bg-rgb),0.4)); } .blog-card__body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; } .blog-card__meta{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); font-weight:700; } .blog-card__cat{ color:var(--ink); } .blog-card__dot{ opacity:0.5; } .blog-card__title{ font-size:21px; line-height:1.24; } .blog-card__title a{ transition:color .2s ease; } .blog-card__title a:hover{ color:var(--ink); } .blog-card__excerpt{ font-size:15px; line-height:1.62; color:var(--muted); flex:1; } .blog-card__link{ margin-top:6px; display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--red); align-self:flex-start; padding-bottom:2px; transition:color .2s ease, border-color .2s ease, gap .2s ease; } .blog-card__link:hover{ color:var(--ink); border-color:var(--ink); gap:12px; } .blog-grid--related{ margin-top:26px; } .blog-empty{ padding:60px 0; color:var(--muted); font-size:16px; } /* ---------------------------- PAGINATION --------------------------------- */ .blog-pagination{ margin-top:56px; display:flex; justify-content:center; } .blog-pagination ul{ list-style:none; display:flex; gap:8px; padding:0; margin:0; flex-wrap:wrap; } .blog-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 12px; border:1px solid var(--line); border-radius:4px; font-size:13px; font-weight:700; color:var(--ink); transition:border-color .2s ease, background .2s ease, color .2s ease; } .blog-pagination .page-numbers:hover{ border-color:var(--red); color:var(--ink); } .blog-pagination .page-numbers.current{ background:var(--red); border-color:var(--red); color:var(--ink); } .blog-pagination .page-numbers.dots{ border:none; } /* ---------------------------- SINGLE POST -------------------------------- */ .rfth-single-main{ padding-top:150px; } .single-post__header{ max-width:960px; margin:0 auto; text-align:center; padding-bottom:36px; opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .single-post__header.is-visible{ opacity:1; transform:translateY(0); } .single-post__header .eyebrow{ justify-content:center; } .single-post__header h1{ font-size:clamp(32px,5vw,52px); margin-top:16px; } .single-post__meta{ margin-top:20px; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; font-size:13px; letter-spacing:0.03em; text-transform:uppercase; color:var(--muted); font-weight:700; } .single-post__author-avatar img{ border-radius:50%; display:block; vertical-align:middle; } .single-post__author{ color:var(--ink); } .single-post__hero-media{ max-width:1040px; margin:36px auto 0; border-radius:8px; overflow:hidden; border:1px solid var(--line); } .single-post__hero-media img{ width:100%; height:auto; display:block; } .single-post__content{ max-width:880px; margin:48px auto 0; font-size:18px; line-height:1.9; color:var(--ink); } .single-post__content > *{ margin-bottom:26px; } /* `body.rfth-blog-body p{ margin:0; }` above is a higher-specificity rule than `.single-post__content > *` for plain

tags, so it was silently winning the cascade and zeroing out paragraph spacing — every paragraph in a blog post, and on the Privacy Policy, Terms & Conditions and Cookies Policy pages (all built on this same .single-post__content block), ran straight into the next one with no breathing room. This restores the 26px gap between paragraphs with matching/higher specificity so it actually applies. */ body.rfth-blog-body .single-post__content p{ margin-bottom:26px; } .single-post__content h2{ font-size:clamp(24px,3vw,32px); margin-top:14px; } .single-post__content h3{ font-size:clamp(20px,2.4vw,24px); } .single-post__content p{ color:rgba(var(--ink-rgb),0.82); } .single-post__content a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:3px; } .single-post__content a:hover{ color:var(--ink); } .single-post__content img{ max-width:100%; height:auto; border-radius:6px; display:block; } .single-post__content blockquote{ border-left:3px solid var(--red); padding:4px 0 4px 22px; font-family:'Fraunces'; font-style:italic; font-size:20px; color:var(--ink); } .single-post__content ul, .single-post__content ol{ padding-left:22px; color:rgba(var(--ink-rgb),0.82); } .single-post__content li{ margin-bottom:8px; } .single-post__content code{ background:rgba(var(--ink-rgb),0.06); padding:2px 6px; border-radius:3px; font-size:14px; } .single-post__content pre{ background:rgba(var(--ink-rgb),0.04); border:1px solid var(--line); border-radius:6px; padding:18px; overflow-x:auto; } /* Tables and embeds pasted into post content don't naturally wrap like text does — scroll them horizontally within their own box instead of letting them push the whole page wider than the viewport. */ .single-post__content table{ display:block; width:100%; overflow-x:auto; border-collapse:collapse; } .single-post__content th, .single-post__content td{ padding:10px 14px; border:1px solid var(--line); font-size:14px; text-align:left; } .single-post__content iframe, .single-post__content video, .single-post__content embed{ max-width:100%; } /* ---------------------------- AUTHOR BIO BOX ------------------------------ */ .author-bio{ max-width:880px; margin:52px auto 0; padding:clamp(26px,4vw,38px); border:1px solid var(--line); border-radius:12px; background:radial-gradient(circle at 0% 0%, rgba(var(--red-rgb),0.07), transparent 55%); display:flex; align-items:flex-start; gap:28px; } .author-bio__avatar{ flex-shrink:0; width:80px; height:80px; border-radius:8px; overflow:hidden; border:2px solid rgba(var(--red-rgb),0.4); } .author-bio__avatar img{ display:block; width:100%; height:100%; object-fit:cover; } .author-bio__body{ min-width:0; } .author-bio .eyebrow{ font-size:10.5px; } .author-bio__name{ font-family:'Fraunces'; font-style:italic; font-weight:700; font-size:21px; color:var(--ink); margin-top:9px; } .author-bio__text{ margin-top:10px; font-size:15px; line-height:1.78; color:var(--muted); max-width:660px; } .author-bio__text--muted{ font-style:italic; } @media (max-width:640px){ .author-bio{ flex-direction:column; align-items:center; text-align:center; gap:18px; } .author-bio__avatar{ width:88px; height:88px; } .author-bio .eyebrow{ justify-content:center; } .author-bio__text{ max-width:none; } } .single-post__footer{ max-width:880px; margin:56px auto 0; padding-top:26px; border-top:1px solid var(--line); } .related-posts{ max-width:var(--maxw); margin:90px auto 0; padding-top:60px; border-top:1px solid var(--line); } /* ------------------------------ LET'S TALK -------------------------------- */ .lets-talk{ position:relative; z-index:10; max-width:var(--maxw); margin:0 auto; padding:48px clamp(20px,6vw,90px); } .lets-talk__card{ border:1px solid var(--line); border-radius:10px; padding:clamp(26px,4vw,40px) clamp(24px,5vw,56px); text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; max-width:640px; margin:0 auto; background:radial-gradient(ellipse 140% 100% at 50% 0%, rgba(var(--red-rgb),0.045), transparent 70%); } .lets-talk__card .eyebrow{ justify-content:center; } /* Explicitly pinned to the exact same heading treatment used site-wide (see the h1,h2,h3 rule in rfthunder-home.css) so this line reads identically here as it does in the homepage's own Contact section, regardless of any other cascade this card happens to load under. */ .lets-talk__card h2{ font-family:'Fraunces', serif; font-weight:460; font-style:normal; line-height:1.05; letter-spacing:-0.01em; font-size:clamp(22px,3vw,30px); max-width:480px; } .lets-talk__card .lede{ font-family:'Manrope', sans-serif; font-weight:400; font-style:normal; max-width:420px; text-align:center; font-size:14px; } .lets-talk__card .cta-btn--solid{ margin-top:4px; text-decoration:none; padding:11px 24px; font-size:13px; } /* --------------------------- POLICY PDF CARD ------------------------------ */ /* Shared card used at the end of the Privacy Policy, Cookies Policy and Terms & Conditions content to link out to the corresponding PDF on ruderfinn.com. Same look on all three pages: heading-style red text in the site's heading font (Fraunces), plain border card, simple hover. */ .policy-pdf-card{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:10px; padding:22px clamp(22px,4vw,32px); border:1px solid var(--line); border-radius:10px; text-decoration:none; transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease); } .policy-pdf-card:hover{ border-color:rgba(var(--red-rgb),0.45); background:rgba(var(--red-rgb),0.05); transform:translateY(-2px); } .policy-pdf-card__text{ font-family:'Fraunces', serif; font-weight:460; font-style:normal; line-height:1.2; letter-spacing:-0.01em; font-size:clamp(17px,2.2vw,21px); color:var(--red); } .policy-pdf-card__arrow{ flex-shrink:0; font-size:20px; line-height:1; color:var(--red); transition:transform .3s var(--ease); } .policy-pdf-card:hover .policy-pdf-card__arrow{ transform:translateX(5px); } @media (max-width:480px){ .policy-pdf-card{ flex-direction:column; align-items:flex-start; gap:10px; } } /* -------------------------------- FOOTER ---------------------------------- */ .rfth-blog-footer{ position:relative; z-index:10; border-top:1px solid var(--line); padding:34px clamp(20px,6vw,90px); max-width:var(--maxw); margin:0 auto; } /* 1fr auto auto — copy stays flexible on the left, legal links + social icons pack together and sit flush at the far right of the row. */ .rfth-blog-footer .footer-bottom{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:16px; font-size:11px; color:var(--muted); } .rfth-blog-footer .footer-bottom__copy{ min-width:0; } .rfth-blog-footer .footer-tagline{ display:inline-block; margin-bottom:2px; color:rgba(var(--ink-rgb),0.7); } /* Right-aligned, sitting directly beside the social icons at the far right of the footer (matches rfthunder-home.css). */ .rfth-blog-footer .footer-legal{ display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; text-align:right; margin-right:20px; } .rfth-blog-footer .footer-legal__link{ font-size:11px; font-weight:600; letter-spacing:0.02em; color:var(--muted); text-decoration:none; white-space:nowrap; transition:color .2s ease; } .rfth-blog-footer .footer-legal__link:hover{ color:var(--ink); } .rfth-blog-footer .footer-legal__link + .footer-legal__link{ position:relative; padding-left:12px; } .rfth-blog-footer .footer-legal__link + .footer-legal__link::before{ content:''; position:absolute; left:0; top:50%; width:3px; height:3px; border-radius:50%; background:var(--line); transform:translateY(-50%); } .rfth-blog-footer .footer-social{ display:flex; align-items:center; justify-content:flex-end; gap:14px; } .rfth-blog-footer .footer-social a{ width:32px; height:32px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:border-color .2s ease, color .2s ease; color:var(--muted); } .rfth-blog-footer .footer-social a:hover{ border-color:var(--red); color:var(--ink); } .rfth-blog-footer .footer-social svg{ width:15px; height:15px; } @media (max-width:820px){ .rfth-blog-footer .footer-bottom{ grid-template-columns:1fr; justify-items:center; text-align:center; } .rfth-blog-footer .footer-social{ justify-content:center; } .rfth-blog-footer .footer-legal{ margin-right:0; justify-content:center; text-align:center; } } /* ------------------------------- SCROLLBAR --------------------------------- */ body.rfth-blog-body::-webkit-scrollbar{ width:8px; } body.rfth-blog-body::-webkit-scrollbar-track{ background:var(--bg); } body.rfth-blog-body::-webkit-scrollbar-thumb{ background:var(--red); border-radius:4px; } body.rfth-blog-body::-webkit-scrollbar-thumb:hover{ background:var(--ink); } html{ scrollbar-color: var(--red) var(--bg); scrollbar-width: thin; }